/*
 * Style przeniesione/dostosowane z motywu greenfarm-child
 * dla sklepu naturalniezkonopi.pl (elementy: naglowki sekcji,
 * przyciski kategorii, opisy kategorii, siatka wpisow, rabaty w koszyku).
 */

/* --- Naglowki sekcji [roadthemes_title] --- */
.heading-title {
	text-align: center;
	margin: 0 0 30px;
}
.heading-title h3 {
	display: inline-block;
	position: relative;
	font-size: 28px;
	font-weight: 700;
	margin: 0;
	padding-bottom: 12px;
}
.heading-title h3:after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 60px;
	height: 3px;
	background-color: var(--color-primary, #74a84a);
}
.heading-title p {
	margin: 8px 0 0;
	color: #777;
}

/* --- Opisy kategorii (SEO) --- */
.cat_description p,
#description_parrt_two_content p {
	text-align: justify;
}
#description_parrt_two_content {
	margin: 30px 0 10px;
}

/* --- Przyciski kategorii / zakladki sklepu --- */
.category_buttons {
	list-style: none;
	padding: 0;
	margin: 0 0 15px 0;
}
.category_buttons li {
	display: inline-block;
	margin: 0 10px 15px 0;
}
.category_buttons li a {
	display: inline-block;
	padding: 7px 12px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.1);
	text-decoration: none;
}
.category_buttons li a:hover {
	background-color: #dcdcdc;
}

/* --- Naglowek strony sklepu/kategorii --- */
.woocommerce-products-header {
	display: block;
	margin-bottom: 1.5rem;
}
.woocommerce-products-header .woocommerce-products-header__title {
	font-size: 2rem;
	line-height: 1.2;
	margin: 0 0 1rem;
}

/* --- Siatka najnowszych wpisow [latestposts] --- */
.nzk-latest-posts .post-wrapper {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 30px;
	height: calc(100% - 30px);
	display: flex;
	flex-direction: column;
}
.nzk-latest-posts .post-thumb img {
	width: 100%;
	height: auto;
	display: block;
}
.nzk-latest-posts .post-info {
	padding: 18px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.nzk-latest-posts .post-date {
	font-size: 13px;
	color: #999;
	margin-bottom: 6px;
}
.nzk-latest-posts .post-title {
	font-size: 18px;
	line-height: 1.35;
	margin: 0 0 10px;
}
.nzk-latest-posts .post-title a {
	color: inherit;
	text-decoration: none;
}
.nzk-latest-posts .post-excerpt {
	color: #666;
	font-size: 14px;
	margin-bottom: 12px;
	flex-grow: 1;
}
.nzk-latest-posts .readmore {
	font-weight: 600;
	text-decoration: none;
	color: var(--color-primary, #74a84a);
}

/* --- Rabaty przy pozycjach koszyka --- */
.new_cart_price del {
	color: #999;
	margin-right: 6px;
}
.new_cart_price ins {
	text-decoration: none;
	font-weight: 700;
}

/* --- Logo (SVG skaluje sie do wysokosci naglowka) --- */
.navigation-middle .logo .custom-logo-link .custom-logo {
	width: auto;
	height: 72px;
	max-width: 100%;
}
.nav-area .logo .custom-logo {
	width: auto;
	height: 44px;
}

/* --- Pasek nad naglowkiem: menu poziomo, jak w starym motywie --- */
.above-header .widget_nav_menu ul.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
}
.above-header .widget_nav_menu ul.menu li {
	display: inline-block;
	margin: 0;
}
.above-header .widget,
.above-header aside.widget {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

/* --- Bloki SEO SiteOrigin w tresci stron (CO TO JEST CBD? itd.) ---
   Na starym motywie stylowala je ogolna typografia; Electromix ma duze
   naglowki, wiec przywracamy male rozmiary jak wczesniej. */
h2.sow-headline {
	font-size: 22px !important;
	font-weight: 700;
	margin: 0 0 12px;
}
h3.sow-sub-headline {
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	color: #666;
	text-align: justify;
	margin: 0 0 10px;
}
.sow-headline-container {
	margin-bottom: 15px;
}

/* --- Pasek zaufania w stopce (Ceneo + platnosci + dostawcy) --- */
.nzk-footer-trust {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px 20px;
}
.nzk-footer-trust img {
	max-height: 42px;
	width: auto;
}

/* =========================================================
   POPRAWKI PRZED WDROZENIEM (feedback wlasciciela sklepu)
   ========================================================= */

/* --- 1. Pasek nad naglowkiem: czytelne linki na zielonej wstedze --- */
.above-header .widget-left a,
.above-header .widget-left .widget_nav_menu ul.menu li a {
	color: #ffffff !important;
	text-decoration: none;
	font-weight: 500;
}
.above-header .widget-left a:hover {
	color: #d9f2d0 !important;
	text-decoration: underline;
}
.above-header .widget-right a {
	text-decoration: none;
}

/* --- 2. Glowne menu: jedna linia, wyrownane, kompaktowe --- */
.nav-area .navigation-content {
	align-items: center;
}
.nav-area .theme-menu .menubar > ul.menu-wrap,
.nav-area .theme-menu ul.nav {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 0;
}
.nav-area .theme-menu .nav > li > a,
.nav-area .theme-menu .menu-wrap > li > a {
	white-space: nowrap;
	font-size: 15px;
	font-weight: 600;
	padding: 14px 11px;
}
@media (min-width: 992px) and (max-width: 1699px) {
	.nav-area .theme-menu .nav > li > a,
	.nav-area .theme-menu .menu-wrap > li > a {
		font-size: 13px !important;
		padding: 12px 12px 12px 6px !important;
	}
	/* przycisk kategorii: sama ikona, menu tekstowe pokrywa kategorie */
	.nav-area .product-category-btn {
		font-size: 0;
		padding: 12px 14px;
	}
	.nav-area .product-category-btn i {
		font-size: 16px;
	}
}
.nav-area .right-widget .menu-right-list {
	margin: 0;
	display: flex;
	align-items: center;
}
.nav-area .right-widget .myaccount-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

/* --- 3. Pasek benefitow pod banerem (.policy): kompaktowy uklad --- */
.vc_row.policy {
	padding: 10px 0;
}
.vc_row.policy .wpb_column > .vc_column-inner > .wpb_wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 12px 8px;
}
.vc_row.policy .wpb_single_image {
	margin-bottom: 0 !important;
	flex-shrink: 0;
}
.vc_row.policy .wpb_single_image img {
	width: 44px;
	height: 44px;
	object-fit: contain;
}
.vc_row.policy .wpb_text_column {
	margin-bottom: 0 !important;
}
.vc_row.policy .wpb_text_column h1,
.vc_row.policy .wpb_text_column h2,
.vc_row.policy .wpb_text_column h3,
.vc_row.policy .wpb_text_column h4,
.vc_row.policy .wpb_text_column p {
	font-size: 16px !important;
	line-height: 1.35;
	font-weight: 600;
	margin: 0;
	text-align: left;
}

/* --- 4. Przyciski w kafelkach produktow ORAZ na stronie produktu:
   pigulka z ikona i TEKSTEM. Motyw ma tu wlasny styl z overflow:hidden
   i za niska wysokoscia dla 16px czcionki — obcinal fragment liter
   (np. "Dodaj do koszyka" na karcie produktu), dlatego nadpisujemy. --- */
li.product .product-action {
	justify-content: center;
}
li.product .product-action .button,
li.product .product-action a.button,
.products .product .button.add_to_cart_button,
.products .product .button.product_type_external,
.products .product .button.product_type_variable,
.products .product .button.product_type_grouped,
.summary .cart .button,
.single_add_to_cart_button,
form.cart .button {
	display: inline-flex !important;
	align-items: center;
	position: relative;
	background-color: #1B8415 !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 25px !important;
	padding: 10px 20px 10px 52px !important;
	min-height: 44px;
	height: auto !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	overflow: visible !important;
	max-width: 100%;
}
li.product .product-action .button:hover,
.products .product .button:hover,
.summary .cart .button:hover,
.single_add_to_cart_button:hover,
form.cart .button:hover {
	background-color: #146310 !important;
	color: #ffffff !important;
}
li.product .product-action .button::before,
.products .product .button.add_to_cart_button::before,
.products .product .button.product_type_external::before,
.products .product .button.product_type_variable::before,
.products .product .button.product_type_grouped::before,
.summary .cart .button::before,
.single_add_to_cart_button::before,
form.cart .button::before {
	content: "\f07a" !important;
	font-family: "Font Awesome 6 Free", "FontAwesome" !important;
	font-weight: 900 !important;
	position: absolute;
	left: 2px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #146310;
	color: #fff;
	font-size: 15px;
}
/* link "Zobacz koszyk" po ajaxowym dodaniu */
li.product .product-action a.added_to_cart {
	display: inline-block;
	margin-left: 8px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
}

/* Na waskich telefonach karta produktu bywa wezsza niz pigulka z pelnym
   paddingiem na ikone (52px) + tekstem — przycisk sie nie miescil i
   wygladal na "obciety"/niekompletny. Mniejsza ikona, mniejszy tekst,
   ciasniejszy padding, tekst moze zawinac sie do dwoch linii zamiast
   uciekac poza karte. */
@media (max-width: 480px) {
	/* Przycisk jest jednoczesnie flex-itemem (w .product-action) i flex-
	   containerem (dla wlasnej ikony+tekstu). Ta kombinacja + zawijanie
	   tekstu potrafi zapasc sie do bardzo waskiej szerokosci (np. 44px,
	   pojedyncze litery) w niektorych przegladarkach mobilnych. Wymuszamy
	   pelna szerokosc karty, zamiast polegac na naturalnym rozmiarze. */
	li.product .product-action {
		display: block;
	}
	li.product .product-action .button,
	li.product .product-action a.button,
	.products .product .button.add_to_cart_button,
	.products .product .button.product_type_external,
	.products .product .button.product_type_variable,
	.products .product .button.product_type_grouped,
	.summary .cart .button,
	.single_add_to_cart_button,
	form.cart .button {
		width: 100%;
		box-sizing: border-box;
		padding: 8px 10px 8px 34px !important;
		font-size: 12px !important;
		white-space: normal;
		line-height: 1.2 !important;
		text-align: left;
		justify-content: flex-start;
	}
	li.product .product-action .button::before,
	.products .product .button.add_to_cart_button::before,
	.products .product .button.product_type_external::before,
	.products .product .button.product_type_variable::before,
	.products .product .button.product_type_grouped::before,
	.summary .cart .button::before,
	.single_add_to_cart_button::before,
	form.cart .button::before {
		width: 24px;
		height: 24px;
		font-size: 11px;
	}
}

/* --- 5. Twardy obszar zdjecia kafelka (brak zdjecia nie rozwala siatki) --- */
li.product .product-img {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #fff;
}
li.product .product-img a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
li.product .product-img img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* --- 6. Puste obrazki kategorii w wysuwanym menu kategorii --- */
.product-category-menus img[src=""],
.docker-category img[src=""] {
	display: none;
}

/* --- 7. Sekcja "Produkt miesiaca" (kolumna .prod_tyg na tle drewna) --- */
.prod_tyg > .vc_column-inner,
.shadow_col.prod_tyg > .vc_column-inner {
	background: rgba(20, 40, 15, 0.35);
	border-radius: 12px;
	padding: 30px 24px !important;
}
.prod_tyg .heading-title h3,
.prod_tyg .newsletter-title-old p,
.prod_tyg > .vc_column-inner > .wpb_wrapper > .wpb_text_column p {
	color: #fff !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.prod_tyg .heading-title h3:after {
	background-color: #ffc93c;
}
.prod_tyg ul.products {
	margin-bottom: 0;
}
.prod_tyg li.product {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	margin-bottom: 0;
}
.prod_tyg li.product .product-action {
	padding: 12px;
}
.prod_tyg li.product .product-action .button {
	width: 100%;
	justify-content: center;
}
/* przycisk w waskiej karcie "Produkt miesiaca" - moze zawijac tekst,
   nie wplywa na przyciski w innych siatkach produktow (sklep, Nowosci) */
.prod_tyg li.product .product-action .button {
	white-space: normal;
	text-align: left;
}

/* =========================================================
   TRZECIA RUNDA POPRAWEK (feedback po drugim podgladzie)
   ========================================================= */

/* --- 8. Ukryty panel koszyka (.docker-overlay-layer) rozciagal cala
   strone w poziomie przy niektorych szerokosciach ekranu (np. 1440px).
   WYCOFANE: globalne overflow-x:hidden na html/body psulo pozycjonowanie
   position:fixed wysuwanych paneli (kategorie/koszyk) na mobile (znany
   problem WebKit/iOS). Zamiast tego ograniczamy tylko sam winowajce,
   nie ruszajac html/body — bezpieczne dla position:fixed gdzie indziej. */
.docker-overlay-layer {
	max-width: 100vw;
}

/* --- 9. Naglowek H1 "Sklep konopny – produkty konopne" na stronie glownej
   (#seo-header — tresc/tekst z bazy, wazny dla SEO, NIE ruszamy tekstu,
   tylko wyglad). Motyw dawal mu na sztywno plaskie szare tlo #f5f5f5
   i zwykla czarna czcionke — szpecilo. --- */
#seo-header {
	padding: 18px 0 22px;
}
#seo-header h1 {
	background: transparent !important;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	position: relative;
	margin: 0 auto;
	padding: 0 0 16px;
	color: #16330f;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.2px;
}
#seo-header h1::before {
	content: "\f06c";
	font-family: "Font Awesome 6 Free", "FontAwesome";
	font-weight: 900;
	color: #1B8415;
	font-size: 0.8em;
}
#seo-header h1::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 72px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, #1B8415, #74c869);
}
@media (max-width: 576px) {
	#seo-header h1 {
		font-size: 22px;
	}
}

/* --- 10. Ikony 6 kategorii na stronie glownej: calkiem nowy design —
   karty ze zdjeciem realnego produktu na pastelowym tle zamiast plaskich
   zielonych kolek. Rozmiar byl na sztywno ograniczony inline stylem
   (max-width:121px) do starego malutkiego formatu — powiekszamy. --- */
div.categories_img .category_img img {
	max-width: 180px !important;
	width: 100%;
	height: auto;
	transition: transform 0.25s ease, filter 0.25s ease;
	filter: drop-shadow(0 10px 18px rgba(20, 40, 15, 0.18));
}
.categories_img {
	flex-wrap: wrap;
	row-gap: 28px;
	justify-content: center !important;
}
.category_img {
	cursor: pointer;
}
.category_img:hover img {
	transform: translateY(-6px);
	filter: drop-shadow(0 16px 26px rgba(20, 40, 15, 0.28));
}
.category_img p {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #16330f !important;
	letter-spacing: 0.2px;
	margin: 16px 0 0 !important;
}
@media (max-width: 767px) {
	div.categories_img .category_img img {
		max-width: 130px !important;
	}
}

/* =========================================================
   CZWARTA RUNDA POPRAWEK (regresja po wdrozeniu na produkcje)
   ========================================================= */

/* --- 11. Widget "Kategorie produktow" w sidebarze (natywny widget
   WooCommerce, wyswietla wszystkie ~166 kategorii z pelnym zagniezdzeniem)
   renderowal sie bez zadnego stylu — surowa, zagniezdzona lista <ul><li>
   ciagnaca sie na kilka tysiecy pikseli, rozciagajac cala strone kategorii.
   Zamykamy go w kontenerze ze scrollem i porzadkujemy typografie/wciecia,
   tak jak przy typowym widgecie "przegladaj kategorie" w sklepach. --- */
.widget_product_categories .product-categories {
	max-height: 480px;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: 4px 4px 4px 0;
}
.widget_product_categories .product-categories .children {
	list-style: none;
	margin: 2px 0 6px 14px;
	padding: 0;
	border-left: 2px solid #e5e9e2;
}
.widget_product_categories .product-categories li {
	margin: 0;
}
.widget_product_categories .product-categories li a {
	display: block;
	padding: 6px 8px;
	font-size: 14px;
	color: #2b2b2b;
	text-decoration: none;
	border-radius: 4px;
	line-height: 1.35;
}
.widget_product_categories .product-categories li a:hover {
	background-color: #eef4ea;
	color: #1B8415;
}
.widget_product_categories .product-categories::-webkit-scrollbar {
	width: 6px;
}
.widget_product_categories .product-categories::-webkit-scrollbar-thumb {
	background-color: #c7d3bf;
	border-radius: 3px;
}