/*
Theme Name: Bendekandallo Theme
Theme URI: https://designair.hu/
Description: Storefront gyermek téma a Bendekandallo projekthez.
Author: Pap Balázs - Designair
Author URI: https://designair.hu/
Template: storefront
Version: 1.1.27
Text Domain: bendekandallo-theme
*/

:root {
	--global-color: #2c403e;
	--bs-body-bg: #f2f2f2;
	--highlight-color: #648c8c;
	--price-special-color: #2c403e;
	--accent-color: #8fbfbf;
	--text-color: #0d0d0d;
	--text-on-primary: #ffffff;
	--corner-sm: 8px;
	--corner-md: 16px;
	--corner-lg: 24px;
	--corner-pill: 999px;
	--container-width: 960px;
	--container-wide-width: 1800px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: 'Poppins', sans-serif;
	background-color: var(--bs-body-bg);
	color: var(--text-color);
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Playfair Display', serif;
	color: var(--global-color);
	margin: 0 0 0.6em;
}

a {
	color: var(--global-color);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--global-color);
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
}

ul {
	margin: 0;
	padding: 0;
}

.list-unstyled {
	list-style: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 100000;
	background: var(--global-color);
	color: #fff;
	padding: 10px 16px;
	border-radius: var(--corner-sm);
}

/* ==========================================================================
   Buttons + badges
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.4;
	padding: 12px 26px;
	border-radius: var(--corner-pill);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn:hover,
.btn:focus {
	text-decoration: none;
	transform: translateY(-1px);
}

.btn-primary {
	background-color: var(--global-color);
	border-color: var(--global-color);
	color: var(--text-on-primary);
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: #2f403e;
	border-color: #2f403e;
	color: var(--text-on-primary);
}

.btn-secondary {
	background-color: transparent;
	border-color: var(--global-color);
	color: var(--global-color);
}

.btn-secondary:hover,
.btn-secondary:focus {
	background-color: var(--global-color);
	color: var(--text-on-primary);
}

.btn-block {
	width: 100%;
}

.product-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: var(--corner-pill);
	font-size: 0.75rem;
	font-weight: 600;
	background-color: var(--price-special-color);
	color: #fff;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.woocommerce-breadcrumb {
	padding: 16px;
	font-size: 0.875rem;
	color: var(--highlight-color);
}

.woocommerce-breadcrumb a {
	color: var(--global-color);
}

/* ==========================================================================
   Fejléc + navigáció
   A markup a szülő Storefront téma header.php + storefront_header hookjaiból
   jön (storefront_header_container, storefront_site_branding,
   storefront_secondary_navigation, storefront_primary_navigation,
   storefront_product_search, storefront_header_cart) – itt csak a valódi
   osztályneveket színezzük/formázzuk, a szerkezetet/JS-t nem nyúljuk hozzá,
   hogy a mobilmenü és a kosár AJAX működése ne sérüljön.

   Asztali nézeten (≥768px – ez a szülő téma saját töréspontja is a
   menu-toggle/primary-navigation váltásnál) a fejléc 3 sorra rendeződik:
   1) sötét gyorsmenü sáv (secondary-navigation), 2) keresés / logó / kosár,
   3) kategória mega-menü (primary-navigation). A .col-full és a
   .storefront-primary-navigation wrapper divek "display:contents"-szé
   válnak ezen a törésponton, így a bennük lévő valódi elemek az #masthead
   saját CSS grid-jének közvetlen tagjaivá válnak – ez engedi a sorrendet
   tisztán CSS-sel átrendezni a header.php módosítása (és ezzel a
   mobilmenü/kosár JS kockáztatása) nélkül. 768px alatt minden a szülő téma
   eredeti, egysoros elrendezésében marad.

   A gyorsmenü sáv a szélétől szélig ér: ehhez NEM a szokásos "100vw +
   negatív margó" trükköt használjuk (az a scrollbar szélességétől függően
   vízszintes túlcsordulást/scrollbart okozhat), hanem az #masthead rácsának
   első és utolsó oszlopa egy-egy rugalmas (minmax(…, 1fr)) "ütköző" –
   ezekbe nem kerül elem, csak automatikusan kitöltik a keresés/logó/kosár/
   menü köré eső helyet, középre rendezve a tartalmat bármilyen szélességen,
   túlcsordulás kockázata nélkül.

   A "position:sticky" működéséhez fontos: a szülő téma a <body>-ra és a
   #page-re (".site" osztály) "overflow-x:hidden"-t ad (vízszintes gördítősáv
   elleni védelemként). A CSS specifikáció szerint viszont, ha egy elemen a
   két tengely (x/y) közül CSAK az egyik "visible", a másik automatikusan
   "scroll konténerré" teszi az elemet – így a body/#page (bár ténylegesen
   sosem görgetnek önmagukban, a teljes lap a <html> szintjén görgethető)
   FORMÁLISAN "scroll konténer" lesz. A "position:sticky" elem viszont a
   LEGKÖZELEBBI ilyen konténerhez rögzül, nem a látható böngészőablakhoz –
   emiatt a fejléc eddig egyáltalán nem "akadt meg", hanem egyszerűen
   végiggördült a lappal. Élesben tesztelve (böngészőben, a tényleges
   oldalon) igazolódott, hogy ez a pontos ok. A javítás: a body/#page
   vízszintes overflow-ját is "visible"-re állítjuk – a fejléc saját CSS-e
   (fentebb) nem okoz vízszintes túlcsordulást, úgyhogy ez itt biztonságos. */
body,
#page.hfeed.site {
	overflow-x: visible;
}

#masthead.site-header {
	position: sticky;
	top: 0;
	z-index: 400;
	background-color: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.site-header > .col-full {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.site-branding {
	margin: 0;
}

.site-branding img {
	max-height: 60px;
	width: auto;
}

.site-title,
.site-title a {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	font-size: 1.5rem;
	color: var(--global-color);
}

.site-description {
	margin: 4px 0 0;
	font-size: 0.8125rem;
	color: var(--highlight-color);
}

.secondary-navigation ul.menu {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	list-style: none;
	margin: 0;
}

.secondary-navigation ul.menu a {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--global-color);
}

.storefront-primary-navigation {
	background-color: var(--global-color);
}

#site-navigation.main-navigation {
	position: relative;
}

#site-navigation-menu-toggle.menu-toggle {
	display: inline-flex;
	align-items: center;
	/* A szülő téma (Storefront) a hamburger/X ikont a gomb ::before/::after és
	   span::before pszeudoelemeivel rajzolja, "left: 1em"-re, a saját nagy
	   bal paddingjéhez (2.617924em) igazítva. Ez a gomb itt kisebb, szimmetrikus
	   paddinget és középre igazítást kapott, ami az ikont a "Menü" felirat első
	   betűjére csúsztatta – innen a bal oldali hely az ikonnak (ikon szélesség
	   14px + 1em pozíció + kis rés), a szöveg pedig balra igazítva követi. */
	justify-content: flex-start;
	padding: 10px 20px 10px 38px;
	margin: 8px 0;
	border: none;
	border-radius: var(--corner-pill);
	background-color: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
}

#site-navigation-menu-toggle.menu-toggle:hover,
#site-navigation-menu-toggle.menu-toggle.toggled {
	background-color: rgba(255, 255, 255, 0.22);
}

.primary-navigation ul.menu,
.handheld-navigation ul.menu {
	list-style: none;
	margin: 0;
}

.main-navigation ul.menu > li > a {
	display: block;
	padding: 14px 16px;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.main-navigation ul.menu > li:hover > a,
.main-navigation ul.menu > li.current-menu-item > a {
	background-color: rgba(255, 255, 255, 0.12);
}

/* A szülő téma "ul.menu li.current-menu-item>a{color:#43454b}" szabálya szürkére
   színezi az aktuális oldalhoz tartozó menüpont szövegét – ez a sötétzöld
   sávokon (gyorsmenü + mega-menü) szinte olvashatatlan. Csak a felső szintű
   ( > li) elemeket célozzuk, a lenyíló almenükben lévő "current" elemeket
   (fehér hátterű dropdown) nem érinti, ott a szülő szürkéje megfelelő kontrasztú marad. */
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current_page_item > a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.menu ul.children {
	background-color: #fff;
	border-radius: 0 0 var(--corner-sm) var(--corner-sm);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
	padding: 8px 0;
}

.main-navigation ul.menu ul.sub-menu a,
.main-navigation ul.menu ul.children a {
	/* A szülő téma ".main-navigation ul ul li a{width:200px}" szabálya a régi,
	   egyetlen keskeny oszlopban lefelé sorjázó dropdownhoz készült – a
	   mega-menü több hasábos elrendezésében (lásd lentebb) egy-egy hasáb ennél
	   keskenyebb is lehet, a rögzített 200px ilyenkor túlcsordulást okozna. */
	width: 100%;
	padding: 8px 18px;
	color: var(--text-color);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: none;
}

.main-navigation ul.menu ul.sub-menu li:hover > a,
.main-navigation ul.menu ul.children li:hover > a {
	background-color: var(--bs-body-bg);
	color: var(--global-color);
}

/* A "Márka szerint" csoportot és az "Összes X megtekintése" linket az
   inc/mega-menu-brands.php csak a "primary" (asztali mega-menü) menühelyre
   szúrja be, a "handheld" (mobil, harmonika) menühelyre nem – ott a
   kategórianév maga is közvetlen link a kategória archívumára, külön
   "Összes X" linkre nincs szükség. A "display:none" itt csak biztonsági
   háló, ha valaha mégis belekerülne mobil nézetbe. */
.menu-item-brand-row {
	display: none;
}

/* ==========================================================================
   Mega-menü (≥768px): a lenyíló panel a teljes oldalszélességet kitölti
   ========================================================================== */

@media (min-width: 768px) {
	/*
	 * A lenyíló "ul.sub-menu" abszolút pozicionálású elemként a legközelebbi
	 * "position"-nel rendelkező őséhez igazodik. A szülő téma ezt ELŐSZÖR a
	 * felső szintű "li"-n magán állítja be (".main-navigation ul li
	 * {position:relative}", lásd storefront/style.css) – emiatt a panel ennek
	 * a ~140-200px-es "li"-nek a szélességéhez/pozíciójához igazodva nyílik
	 * le, NEM pedig a #site-navigation-en (ami maga is position:relative, de
	 * ez itt lényegtelen, mivel a "li" van közelebb). Ahhoz, hogy a panel a
	 * teljes oldalszélességet kitöltse, MINDKETTŐT ki kell kapcsolni ezen a
	 * törésponton, hogy a pozicionálás egészen a #masthead.site-header-ig
	 * (position:sticky, ld. fentebb) "lyukadjon fel". A header (NEM a
	 * .col-full/.storefront-primary-navigation – azok "display:contents",
	 * lásd fentebb) éri el ténylegesen a böngészőablak mindkét szélét, ezért
	 * a "left:0; right:0" ehhez képest pontosan a teljes oldalszélességet adja,
	 * "100vw" (és az abból eredő görgetősáv-szélesség miatti túlcsordulás)
	 * nélkül.
	 */
	.main-navigation ul.menu > li,
	#site-navigation.main-navigation {
		position: static;
	}

	/*
	 * A "left"/"right" ITT SZÁNDÉKOSAN NEM szerepel: a szülő téma az elrejtést
	 * a ".main-navigation ul ul{left:-9999px}" alapállapottal oldja meg (nincs
	 * "display:none", csak képernyőn kívülre tolja), és csak a
	 * ":hover"/".focus" szabályban állítja "left:0"-ra. Ha itt, feltétel
	 * nélkül adnánk "left:0; right:0"-t, az felülírná a "-9999px"-et, és
	 * MINDEN almenü egyszerre, folyamatosan látszódna (egymásra csúszva),
	 * nem csak a ténylegesen hoverelt/fókuszált.
	 *
	 * A "width"-nek viszont MINDIG (rejtett állapotban is) 100%-nak kell
	 * lennie, "auto" NEM jó: "left"/"right" nélkül egy absolute elem szélessége
	 * a tartalmához igazodva "shrink-to-fit" méretű lenne, és a 4-hasábos
	 * elrendezés (lentebb) ekkor is számottevő (~950px) natív szélességet ad
	 * neki – ez a "left:-9999px"-es, képernyőn kívüli állapotban is megnöveli
	 * a dokumentum "scrollWidth"-jét, vízszintes túlcsordulást okozva olyan
	 * (keskenyebb, pl. 800px-es) nézeteken is, ahol a mega-menü egyáltalán
	 * nincs is megnyitva.
	 */
	.main-navigation ul.menu > li > ul.sub-menu {
		position: absolute;
		top: 100%;
		width: 100%;
		/* A panel HÁTTERE tölti ki a teljes oldalszélességet, de a benne lévő
		   linkoszlopokat a lap többi részéhez hasonló, olvasható szélességben
		   tartjuk. A "max-width + margin:auto" trükk (bal/jobb "0"-ra állítva,
		   lásd a következő szabályban) ezt a dobozt KÖZÉPRE rendezi a teljes
		   szélességű panelen belül – nem kell hozzá viewport-szélességtől függő
		   "calc()", minden töréspontnál (és böngésző-görgetősáv mellett is)
		   megbízhatóan működik. */
		max-width: 1200px;
		margin: 0 auto;
		box-sizing: border-box;
		border-radius: 0 0 var(--corner-md) var(--corner-md);
		padding: 28px 24px;
	}

	/*
	 * ".mega-open" – js/custom.js JS-esen kapcsolja be/ki (lásd initMegaMenu()),
	 * "mouseenter/mouseleave" + egy rövid késleltetéssel. A puszta CSS
	 * ":hover"-re hagyatkozva az egér elveszíti a hovert, amint elhagyja a
	 * "li"-t (pl. lefelé mozogva a panel felé) – MÉG mielőtt a panel
	 * ténylegesen elérhető lenne, a menü emiatt "elugrott" a felhasználó elől.
	 * A ":hover"/".focus" szabály (utóbbi a szülő téma saját, billentyűzet-
	 * fókuszhoz készült navigation.js-éből jön) MARADT is, kiegészítésként –
	 * JS nélkül (illetve gyors, egérmozgás nélküli billentyűzetes navigációnál)
	 * ez adja az alapviselkedést.
	 */
	.main-navigation ul.menu > li:hover > ul.sub-menu,
	.main-navigation ul.menu > li.focus > ul.sub-menu,
	.main-navigation ul.menu > li.mega-open > ul.sub-menu {
		left: 0;
		right: 0;
	}

	/* A lapos linklista magazin-szerű, több hasábos elrendezésbe rendeződik,
	   ahelyett hogy egyetlen hosszú, függőleges oszlopban állna a panel bal
	   szélén – ez tölti ki érdemben a most rendelkezésre álló szélességet. */
	.main-navigation ul.menu > li > ul.sub-menu {
		column-count: 4;
		column-gap: 32px;
	}

	.main-navigation ul.menu > li > ul.sub-menu > li {
		break-inside: avoid;
		margin-bottom: 4px;
	}

	.main-navigation ul.menu > li > ul.sub-menu a {
		border-radius: var(--corner-sm);
	}

	/* "Összes X megtekintése" (lásd inc/mega-menu-brands.php) – a kövér
	   alkategória-linkekkel azonos súlyú, de a kiemelő színnel és egy kis
	   nyílhegy ikonnal elkülönítve, hogy egyértelműen "lásd mind" jellegű
	   akciónak tűnjön, ne egy alkategóriának. */
	.main-navigation ul.menu ul.sub-menu li.menu-item-view-all > a {
		display: flex;
		align-items: center;
		gap: 4px;
		color: var(--highlight-color);
	}

	.main-navigation ul.menu ul.sub-menu li.menu-item-view-all > a::after {
		content: '\203A';
		font-weight: 700;
	}

	.main-navigation ul.menu ul.sub-menu li.menu-item-view-all:hover > a {
		color: var(--global-color);
		background-color: var(--bs-body-bg);
	}

	/* "Márka szerint" csoport (lásd inc/mega-menu-brands.php) – ugyanúgy a
	   4 hasábos elrendezés RÉSZE (nem "column-span:all" teljes szélességű
	   sor többé), mintha egy 3. szintű (unoka-) kategóriákkal rendelkező
	   alkategória lenne: kövér, nem kattintható címke + alatta a márkák
	   normál súlyú, egymás alatti linklistája. */
	.main-navigation ul.menu > li > ul.sub-menu > li.menu-item-brand-row {
		margin-top: 8px;
		padding-top: 16px;
		border-top: 1px solid var(--bs-body-bg);
	}

	.main-navigation ul.menu > li > ul.sub-menu > li.menu-item-brand-row:hover {
		background-color: transparent;
	}

	.brand-row__label {
		display: block;
		padding: 8px 18px;
		color: var(--text-color);
		font-size: 0.875rem;
		font-weight: 700;
	}

	/*
	 * A szülő téma nagyon általános ".main-navigation ul ul{position:absolute;
	 * left:-9999px; ...}" szabálya (a hagyományos, egyetlen oszlopos dropdown
	 * elrejtésére szánva) BÁRMELY, egy "ul"-ön belüli "ul"-t elkap – így ezt a
	 * belül elhelyezett márka-linklistát is (".sub-menu > li > ul.brand-row__list"
	 * szintén "ul ul"), képernyőn kívülre tolva, LÁTHATATLANNÁ téve azt, pedig
	 * maga a "li.menu-item-brand-row" (ami NEM "ul", hanem "li") helyesen,
	 * látható állapotban van. Ez a szabály semlegesíti a szülő téma
	 * pozicionálását erre a konkrét listára nézve.
	 */
	.main-navigation ul.menu .brand-row__list {
		position: static;
		float: none;
		left: auto;
		top: auto;
		z-index: auto;
	}

	.brand-row__list {
		list-style: none;
		margin: 0;
	}

	.main-navigation ul.menu ul.sub-menu .brand-row__link {
		font-weight: 400;
	}
}

.site-search .woocommerce-product-search {
	position: relative;
	display: flex;
}

.site-search .search-field {
	width: 100%;
	padding: 10px 46px 10px 18px;
	border-radius: var(--corner-pill);
	border: 1px solid var(--highlight-color);
	background-color: var(--bs-body-bg);
	font-family: 'Poppins', sans-serif;
}

.site-search input[type='submit'] {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: var(--global-color);
	color: #fff;
	font-size: 0;
	cursor: pointer;
}

.site-search input[type='submit']::before {
	content: '🔍';
	font-size: 14px;
}

#site-header-cart.site-header-cart {
	list-style: none;
	margin: 0;
}

#site-header-cart a.cart-contents {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
	white-space: nowrap;
}

#site-header-cart a.cart-contents .count {
	background-color: #fff;
	color: var(--global-color);
	border-radius: var(--corner-pill);
	padding: 2px 8px;
	font-size: 0.75rem;
	white-space: nowrap;
}

.storefront-handheld-footer-bar {
	background-color: #fff;
	border-top: 1px solid var(--bs-body-bg);
}

.storefront-handheld-footer-bar ul li a {
	color: var(--global-color);
}

/* Asztali elrendezés (≥768px): gyorsmenü sáv / keresés+logó+kosár / mega-menü.
   A színek nem változnak (gyorsmenü + mega-menü marad a megszokott sötétzöld
   háttér + fehér szöveg) – csak az elemek SORRENDJE/POZÍCIÓJA módosul. */
@media (min-width: 768px) {
	#masthead.site-header > .col-full,
	.storefront-primary-navigation,
	.storefront-primary-navigation > .col-full {
		display: contents;
	}

	/* A szülő téma saját 768px-es töréspontja mutatja meg újra a
	   primary-navigation-t – a mobil menü-gombot itt explicit el kell rejteni,
	   mert a gyermek téma #ID-alapú szelektora (lásd fentebb) különben
	   minden szélességen felülírná a szülő "display:none" szabályát. */
	#site-navigation-menu-toggle.menu-toggle {
		display: none;
	}

	#masthead.site-header {
		--topbar-height: 40px;
		display: grid;
		grid-template-columns: minmax(16px, 1fr) minmax(240px, 380px) auto minmax(180px, 320px) minmax(16px, 1fr);
		/* A gyorsmenü sávnak (1. sor) nincs nevesített területe – explicit
		   grid-column/grid-row vonalakkal kerül a helyére (lásd lentebb),
		   mert egy névvel azonosított, teljes szélességben átívelő
		   "grid-area" néhány böngészőben megbízhatatlanul viselkedett a
		   display:contents-szel kombinálva. */
		grid-template-areas:
			".  .        .        .    ."
			".  search   branding cart  ."
			".  nav      nav      nav   .";
		align-items: center;
		row-gap: 14px;
		/* A szülő téma ".site-header{padding-top:2.617924em}" szabálya adta a
		   fehér csíkot a zöld sáv fölött – itt nullázzuk. */
		padding-top: 0;
		padding-bottom: 14px;
		/* A teljes fejléc (mind a 3 sor) EGYETLEN sticky doboz marad – ez adja
		   a "csak az alsó rész ragadjon" hatást: a "top" negatív, a gyorsmenü
		   sáv magasságával egyenlő érték, így amint a lap legördül ennyit, a
		   doboz úgy "akad meg", hogy a teteje (a zöld sáv) a látható terület
		   FÖLÉ kerül – vagyis lerulózik –, míg a keresés/logó/kosár sor és a
		   mega-menü onnantól a nézet tetejéhez ragad. A zöld sáv saját maga
		   sosem "sticky", csak együtt mozog lefelé a görgetéssel, mielőtt a
		   doboz megakadna. */
		top: calc(-1 * var(--topbar-height));
	}

	/* FONTOS: a szülő téma automatikusan felveszi a <body>-ra a
	   "storefront-secondary-navigation" osztályt, amint a "secondary" menühely
	   ki van töltve (lásd class-storefront.php), a "woocommerce-active"-ot
	   pedig amíg a WooCommerce aktív – ez a te oldaladon MINDIG teljesül. A
	   szülő ezekhez az osztály-kombinációkhoz saját, float+százalék alapú
	   szélességet ad a .site-branding / .secondary-navigation / .site-search /
	   .site-header-cart elemeknek (pl. ".storefront-secondary-navigation.
	   woocommerce-active .site-header .secondary-navigation{width:47.8%}"),
	   és ezek a szelektorok (2-4 osztály) MAGASABB specificitásúak, mint a mi
	   sima ".secondary-navigation{…}" szabályunk – emiatt tört be korábban a
	   keresőmező, a gyorsmenü sáv és a logó szélessége. A javítás: minden
	   érintett elemet a #masthead ID-val ellátott leszármazott-szelektorral
	   célzunk (ID mindig felülír bármennyi osztályt), és explicit width-et
	   adunk nekik, hogy a szülő %-os értékei ne érvényesüljenek. */

	#masthead.site-header .secondary-navigation {
		grid-column: 1 / -1;
		grid-row: 1;
		display: flex;
		align-items: center;
		/* Rögzített magasság (a fenti --topbar-height-dzsel megegyező érték),
		   hogy a sticky "top" negatív ajánlata pontosan ennyi görgetés után
		   tüntesse el a sávot – ne a tartalomtól (2-4 link) függő, változó
		   magasság alapján számoljunk. */
		height: var(--topbar-height);
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		float: none;
		margin-right: 0;
		margin-bottom: 0;
		padding: 0 24px;
		background-color: var(--global-color);
	}

	/* A WordPress "wp_nav_menu()" alapból egy <div class="menu-{menünév}-container">
	   wrapperbe teszi a <ul>-t (lásd a ténylegesen kiadott HTML-t) – EZ a div,
	   NEM az "ul.menu" maga, a ".secondary-navigation" flex konténer közvetlen
	   gyermeke/flex eleme. Egy "ul.menu"-re rakott margin/width szabály ezért
	   hatástalan volt: a flex elem (ez a div) alapból csak a tartalmához
	   igazodó szélességű maradt, üresen hagyva a jobb oldali helyet – a menü
	   így a sáv BAL szélén torlódott. A "flex:1 1 auto"-val ez a div kitölti a
	   rendelkezésre álló teljes szélességet, ezen belül pedig az "ul.menu"
	   (lentebb: display:flex + justify-content:flex-end) jobbra igazítja a
	   menüpontokat. A menü neve/slugja bármikor változhat a Testreszabóban,
	   ezért szándékosan a generikus "> div" szelektort használjuk a konkrét
	   (dinamikus) osztálynév helyett. */
	.secondary-navigation > div {
		flex: 1 1 auto;
		min-width: 0;
	}

	.secondary-navigation ul.menu {
		width: 100%;
		justify-content: flex-end;
	}

	.secondary-navigation ul.menu a {
		color: #fff;
	}

	.secondary-navigation ul.menu > li.current-menu-item > a,
	.secondary-navigation ul.menu > li.current_page_item > a {
		color: #fff;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	#masthead.site-header .site-branding {
		grid-area: branding;
		justify-self: center;
		width: auto;
		max-width: none;
		float: none;
		margin-right: 0;
		text-align: center;
	}

	#masthead.site-header .site-search {
		grid-area: search;
		width: 100%;
		max-width: none;
		float: none;
		margin-right: 0;
	}

	#site-header-cart.site-header-cart {
		grid-area: cart;
		justify-self: end;
		width: auto;
		max-width: none;
		float: none;
		margin-right: 0;
	}

	/* A kosár linkje eredetileg a sötétzöld mega-menü sávon ült (fehér
	   szöveg) – most a fehér fejléc-sorba kerül, ezért a szöveg színét a
	   háttérhez kell igazítani, a jelvény pedig megcserélt (zöld/fehér)
	   színekkel ugyanazt a kontrasztot adja, mint korábban. */
	#site-header-cart a.cart-contents {
		color: var(--global-color);
	}

	#site-header-cart a.cart-contents .count {
		background-color: var(--global-color);
		color: #fff;
	}

	/* A szülő téma a lenyíló mini-kosarat "width:100%; left:0"-val méretezi
	   a legközelebbi position:relative őshöz – ez korábban a széles
	   .storefront-primary-navigation sáv volt, most viszont a #site-header-cart
	   maga (justify-self:end miatt csak a tartalmához igazodó, keskeny doboz),
	   ezért enélkül a lenyíló kosár is összenyomódna. A SZÉLESSÉGET ezért itt,
	   alapállapotban módosítjuk – de a "left"/"right" pozíciót SZÁNDÉKOSAN NEM
	   itt, hanem csak a :hover/.focus szabályban, mert a szülő az elrejtést a
	   "left:-999em" alapértékkel oldja meg: ha itt, feltétel nélkül is
	   "left:auto"-t adnánk, az felülírná a "-999em"-et, és a kosár
	   ÁLLANDÓAN látszódna, nem csak hover/fókusz esetén. */
	#site-header-cart .widget_shopping_cart {
		width: 320px;
		max-width: calc(100vw - 32px);
	}

	#site-header-cart:hover .widget_shopping_cart,
	#site-header-cart.focus .widget_shopping_cart {
		left: auto;
		right: 0;
	}

	#site-navigation.main-navigation {
		grid-area: nav;
		width: 100%;
		background-color: var(--global-color);
		border-radius: var(--corner-sm);
	}

	/* A szülő téma a felső szintű menüpontokat ("li") "display:inline-block"-ként
	   adja (lásd storefront/style.css), ami – szöveghez hasonlóan – a sáv BAL
	   szélén torlódik, a jobb oldali fennmaradó helyet üresen hagyva. Flexbe
	   téve, "space-between"-nel az elemek egyenletesen elosztva töltik ki a
	   teljes (immár a tartalommal megegyező szélességű, lásd lentebb) sávot –
	   az első/utolsó elem a sáv bal/jobb széléhez simul. Csak a LEGFELSŐ szintű
	   listát ("ul.menu" közvetlenül a ".main-navigation" alatt) érinti, a
	   lenyíló almenük ("ul.sub-menu") változatlanul a szülő téma saját,
	   függőleges "display:block" elrendezését használják. */
	.main-navigation ul.menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
}

/* ==========================================================================
   Product cards (WooCommerce shop loop)
   ========================================================================== */

/* "minmax(0, 1fr)", NEM sima "1fr" (itt és az összes lenti töréspontnál) –
   egy grid track alapértelmezett minimális szélessége "auto" (a tartalom
   min-content szélessége), nem 0. Egy hosszabb, törhetetlen termékkártya-
   tartalom (pl. a "Kérjen ajánlatot" gomb szava vagy egy hosszú terméknév)
   emiatt szélesebbre nyomhatja a saját oszlopát, mint amennyi ténylegesen
   elfér – ultra-keskeny (pl. 320px-es) nézeteken ez vízszintes túlcsordulást
   okozott. A "minmax(0, 1fr)" nullázza ezt az implicit minimumot. */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	list-style: none !important;
	margin: 0 0 32px !important;
	padding: 0 !important;
}

/* A WooCommerce alap CSS-e (woocommerce.css) egy régi, float-alapú elrendezéshez
   "ul.products::before,ul.products::after{content:"";display:table}" clearfixet
   ad – ez "display:table"-ként (nem "none"-ként) generált tartalom, ezért CSS
   Grid szülőben (fentebb) ÉRVÉNYES RÁCSELEMMÉ válik: egy láthatatlan, üres
   cellát szúr a rács ELEJÉRE (::before), emiatt csúszott el eggyel minden
   valódi termékkártya (az első sor eggyel kevesebb kártyát mutatott). A
   clearfixre CSS Grid-del nincs szükség (nincs float, amit "clear"-elni
   kellene), ezért teljesen kikapcsoljuk. */
ul.products::before,
ul.products::after {
	content: none;
	display: none;
}

/* A WooCommerce a tényleges oszlopszámot a "columns-N" osztályban adja át
   (pl. shop/kategória lista = columns-4, kapcsolódó termékek = columns-3,
   lásd inc/woocommerce.php woocommerce_output_related_products_args). A rács
   ezt kövesse, különben pl. 3 kapcsolódó termék egy 4-oszlopos rácsba
   kényszerülve rossz méretben/aránytalanul jelenik meg. */
@media (min-width: 768px) {
	ul.products.columns-3,
	ul.products.columns-4,
	ul.products.columns-5,
	ul.products.columns-6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	ul.products.columns-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	ul.products.columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	ul.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	ul.products.columns-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	ul.products.columns-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* A WooCommerce alap CSS-e (woocommerce.css) a li.product elemekre saját,
   float-alapú százalékos szélességet ad (~22-30%, oszlopszámtól függően,
   a "ul.products[class*='columns-'] li.product" szelektorral, ami magasabb
   specificitású, mint egy sima "ul.products li.product"). Mivel a szülő
   ul.products-ot CSS Grid-dé alakítottuk, ezt az örökölt szélesség/float/
   margó értéket teljesen vissza kell állítani – ugyanazzal (vagy magasabb)
   specificitással –, különben a kártya a rács cellán belül összezsugorodik,
   és a rács is hibásan tördel (üres cella, elcsúszott sorok). */
.woocommerce ul.products[class*="columns-"] li.product,
ul.products[class*="columns-"] li.product,
ul.products li.product,
.product-card-item {
	list-style: none;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.card.product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #fff;
	border-radius: var(--corner-md);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card.product-card:hover {
	box-shadow: 0 16px 30px rgba(0, 0, 0, 0.1);
	transform: translateY(-3px);
}

/* A woocommerce_template_loop_product_link_open()/_close() ezt az <a>-t nyitja
   meg a kép ELŐTT, és csak a cím/ár után zárja le – tehát a kép és a
   termékadatok is ide, EBBE az <a>-ba kerülnek (lásd woocommerce/content-product.php). */
.card.product-card > a.woocommerce-loop-product__link {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.card.product-card > a.woocommerce-loop-product__link:hover,
.card.product-card > a.woocommerce-loop-product__link:focus {
	color: inherit;
	text-decoration: none;
}

/* A kép mindig kitölti a kártya felső részét, a forrás-arányától függetlenül
   (object-fit: cover) – ami az adott dobozból kilóg, az levágásra kerül
   (overflow: hidden), nem marad üres/letterboxolt terület a kép körül. */
.product-card-image {
	position: relative;
	height: 220px;
	overflow: hidden;
	background-color: var(--bs-body-bg);
}

.product-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-card-image .product-badge {
	position: absolute;
	top: 14px;
	left: 14px;
}

.product-card__body {
	padding: 16px 18px 0;
}

.product-card__title,
.product-card__title a {
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-color);
}

.product-card__stock {
	margin-top: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
}

.product-card__stock .stock.in-stock,
.product-card__stock .in-stock {
	color: #00908A;
}

.product-card__stock .stock.out-of-stock,
.product-card__stock .out-of-stock {
	color: #b3261e;
}

.product-card__price {
	margin-top: 10px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--price-special-color);
}

/* A szülő Storefront téma a "woocommerce_after_shop_loop_item_title" hookra
   helyezi át az akciós jelvényt (a csillagos értékelés és az ár közé), ezért
   itt jelenik meg – nem a kép fölött, mint az egyedi termékoldalon. */
.product-card__price .product-badge {
	display: inline-flex;
	margin-bottom: 6px;
}

.product-card__price .star-rating {
	margin-bottom: 6px;
	font-weight: 400;
}

.product-card__price del {
	font-weight: 400;
	opacity: 0.6;
	margin-right: 6px;
}

/*
 * A "Részletek" + "Kosárba" gomb egy sorban, tördelés nélkül (nowrap-ölhető,
 * egy szavas felirattal) kb. 274px minimális szélességet igényel. Flex
 * elemként ez az alapértelmezett "min-width:auto" miatt padlóként viselkedik:
 * szűkebb kártyáknál (mobil rács, karusszel-kártyák) a kártya inkább szélesebbre
 * nőtt/túlcsordult, mintsem összenyomódott volna. A flex-wrap engedi, hogy a
 * két gomb – ha nem fér ki egymás mellett – egymás alá kerüljön, mindkettő
 * teljes szélességben, kártyaméret-független, csordulásmentes elrendezést adva.
 */
.product-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 16px 18px;
}

.product-card__details,
.product-card__addtocart {
	flex: 1 1 auto;
	min-width: 0;
}

.product-card__addtocart .button,
.product-card__addtocart a.button {
	width: 100%;
}

.product-card__details-button {
	width: 100%;
}

.product-card__addtocart .button,
.product-card__addtocart a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/*
	 * NEM "white-space:nowrap": a "Kérjen ajánlatot" felirat (lásd
	 * woocommerce/content-product.php, ár nélküli termékeknél) jóval
	 * hosszabb, mint az eredetileg egysoros "Kosárba" – "nowrap"-pal a
	 * "width:100%"-os gomb TARTALMA (nem maga a gomb doboza) folyt volna ki a
	 * kártyából, ami a teljes oldal "scrollWidth"-jét megnövelte, vízszintes
	 * túlcsordulást okozva keskeny (pl. 375px-es) nézeteken. Ehelyett a
	 * szöveg – ha nem fér ki – 2 sorra törik, a gomb magassága nő, de az
	 * oldal szélessége sosem csordul túl. Az "overflow-wrap" ugyanezért kell:
	 * a "Kérjen ajánlatot" szó szerinti szavai (kötőjel/szóköz nélküli, kb.
	 * 9 karakteres "ajánlatot") ultra-keskeny (pl. 320px-es, 2 oszlopos)
	 * nézeteken EGYETLEN darabban is szélesebbek lehetnek, mint a kártya –
	 * enélkül a böngésző nem törné meg a szót, és ismét túlcsordulást okozna.
	 */
	text-align: center;
	overflow-wrap: break-word;
	padding: 12px 20px;
	border-radius: var(--corner-pill);
	background-color: var(--global-color);
	border: 1px solid var(--global-color);
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.product-card__addtocart .button:hover,
.product-card__addtocart a.button:hover {
	background-color: #2f403e;
	border-color: #2f403e;
	color: #fff;
	transform: translateY(-1px);
}

.product-card__addtocart .added_to_cart {
	display: block;
	margin-top: 6px;
	font-size: 0.75rem;
	text-align: center;
}

/* ==========================================================================
   Lábléc
   A markup a szülő Storefront téma footer.php + storefront_footer hookjaiból
   (bendekandallo_theme_footer_columns, storefront_credit – lásd functions.php
   és inc/storefront-overrides.php) és a Testreszabóból (bendekandallo_phone
   stb.) jön. Elrendezés a mbkandallo.hu mintája alapján: egy sötétzöld,
   lekerekített 4 oszlopos blokk (Elérhetőség / Információk / Hírlevél /
   Üzenetküldés), alatta egy egyszerű, világos copyright-sáv.
   ========================================================================== */

#colophon.site-footer {
	margin-top: 48px;
	padding: 0 0 24px;
	background-color: transparent;
}

.footer-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	background-color: var(--global-color);
	border-radius: var(--corner-lg);
	padding: 32px 24px;
}

/* A szülő téma Testreszabó → Lábléc színbeállítása a <head>-be egy KÉSŐN
   beszúrt, dinamikus <style> blokkot ír ki (pl. ".site-footer{color:...}",
   ".site-footer a:not(.button){color:#333}", ".site-footer h1..h6{color:#333}")
   – ez a blokk MINDIG az itt beköttet stíluslapunk UTÁN töltődik be, ezért
   azonos specificitás esetén felülírná a sötétzöld/fehér lábléc-dizájnunkat
   (ez okozta, hogy a fejlécek/linkek szürkén, alig olvashatóan jelentek meg).
   A #colophon ID hozzáadásával a szelektoraink specificitása mindig magasabb
   lesz, mint bármelyik ilyen, csak osztályokat használó Testreszabó-szabályé,
   így a Testreszabó lábléc-szín beállítása biztonságosan bármire állítható,
   nem befolyásolja ezt az egyedi 4 oszlopos blokkot. */
#colophon.site-footer .footer-columns {
	color: rgba(255, 255, 255, 0.85);
}

#colophon.site-footer .footer-col__title {
	font-family: 'Playfair Display', serif;
	font-size: 1.125rem;
	font-weight: 900;
	font-style: normal;
	color: #fff;
	margin-bottom: 16px;
}

/* Elérhetőség oszlop */

.footer-contact-list {
	list-style: none;
	margin: 0 0 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.footer-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.875rem;
	line-height: 1.5;
	min-width: 0;
}

.footer-contact-list li > *:last-child {
	min-width: 0;
	overflow-wrap: anywhere;
}

.footer-contact-list svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--accent-color);
}

#colophon.site-footer .footer-contact-list a {
	color: rgba(255, 255, 255, 0.85);
}

#colophon.site-footer .footer-contact-list a:hover {
	color: #fff;
}

.footer-social {
	display: flex;
	gap: 10px;
}

.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.footer-social a:hover {
	background-color: #fff;
	color: var(--global-color);
}

/* Információk oszlop */

.footer-links-list {
	list-style: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

#colophon.site-footer .footer-links-list a {
	display: block;
	padding: 4px 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.85);
}

#colophon.site-footer .footer-links-list a:hover {
	color: #fff;
	text-decoration: underline;
}

/* Üzenetküldés oszlop – valódi Contact Form 7 űrlap (lásd
   bendekandallo_theme_footer_columns() a functions.php-ban). A form
   megjelenése az alábbi, általános ".wpcf7-form" szabályokból jön (lásd
   "Contact Form 7 – Árajánlatkérő és kapcsolati űrlapok" szakasz lentebb);
   itt csak a lábléc sötétzöld hátteréhez igazított SZÍN-felülírás van. */

.footer-col--contact-form p {
	font-size: 0.875rem;
	line-height: 1.6;
	margin: 0 0 16px;
}

#colophon.site-footer .footer-col--contact-form .wpcf7-form label {
	color: rgba(255, 255, 255, 0.85);
}

#colophon.site-footer .footer-col--contact-form input.wpcf7-form-control,
#colophon.site-footer .footer-col--contact-form textarea.wpcf7-form-control {
	border-color: rgba(255, 255, 255, 0.3);
	background-color: rgba(255, 255, 255, 0.08);
	color: #fff;
}

#colophon.site-footer .footer-col--contact-form input.wpcf7-form-control::placeholder,
#colophon.site-footer .footer-col--contact-form textarea.wpcf7-form-control::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

#colophon.site-footer .footer-col--contact-form .wpcf7-list-item-label,
#colophon.site-footer .footer-col--contact-form .wpcf7-form-control-wrap {
	color: rgba(255, 255, 255, 0.85);
}

#colophon.site-footer .footer-col--contact-form .wpcf7-submit {
	background-color: #fff;
	border-color: #fff;
	color: var(--global-color);
}

#colophon.site-footer .footer-col--contact-form .wpcf7-submit:hover {
	background-color: rgba(255, 255, 255, 0.85);
	border-color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Contact Form 7 – Árajánlatkérő és kapcsolati űrlapok

   A webhelyen 3 CF7 űrlap fut: "Kapcsolat űrlap" (lábléc, lásd fentebb),
   "Online árajánlat kérés" és "Helyszíni felmérés" (mindkettő az Árajánlat
   kérés oldalakon). Az űrlapok saját tartalma (Beállítások → Contact Form 7)
   még a régi Divi gyermek témából származó, Bootstrap-szerű
   ".row/.col/.col-md-6" rács- és térköz-osztályokat használja – ahelyett,
   hogy az űrlaptartalmat is át kellene írni, ez a szakasz ugyanazokat az
   osztályneveket definiálja újra a témához illő, egyszerű flex-rácsként,
   így az űrlapok elrendezése (2 mező egymás mellett asztali nézetben,
   egymás alatt mobilon) és a formázása is a témát követi. */

.wpcf7 {
	max-width: 640px;
}

.wpcf7-form .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -8px;
}

.wpcf7-form .col {
	width: 100%;
	padding: 0 8px;
}

.wpcf7-form .szurkeBg {
	background-color: var(--bs-body-bg);
	border-radius: var(--corner-sm);
}

.wpcf7-form .text-center {
	text-align: center;
}

.wpcf7-form .d-none {
	display: none;
}

.wpcf7-form .pb-3 {
	padding-bottom: 12px;
}

.wpcf7-form .pt-2,
.wpcf7-form .pb-2 {
	padding-top: 8px;
	padding-bottom: 8px;
}

.wpcf7-form .pl-2,
.wpcf7-form .pr-2 {
	padding-left: 8px;
	padding-right: 8px;
}

.wpcf7-form .mt-3,
.wpcf7-form .mb-3 {
	margin-top: 12px;
	margin-bottom: 12px;
}

.wpcf7-form .ml-1,
.wpcf7-form .mr-1 {
	margin-left: 4px;
	margin-right: 4px;
}

.wpcf7-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--text-color);
}

.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
}

/* A "Termékek űrlap" (ID 4889 – lásd inc/product-quote-form.php) saját
   ".formWrap/.formHeader/.formBody/.fieldWrap" osztályokat használ. A
   ".formHeader" saját címét/leírását a hívó oldal (.product-quote-form)
   MÁR megadja egyszer (lásd style.css lentebb) – itt elrejtjük, hogy ne
   jelenjen meg duplán. */
.wpcf7-form .formHeader {
	display: none;
}

.wpcf7-form .fieldWrap {
	margin-bottom: 14px;
}

.wpcf7-form input.wpcf7-form-control,
.wpcf7-form textarea.wpcf7-form-control,
.wpcf7-form select.wpcf7-form-control {
	width: 100%;
	padding: 12px 16px;
	border-radius: var(--corner-sm);
	border: 1px solid #d9d9d9;
	background-color: #fff;
	color: var(--text-color);
	font-family: 'Poppins', sans-serif;
	font-size: 0.9375rem;
}

.wpcf7-form input.wpcf7-form-control:focus,
.wpcf7-form textarea.wpcf7-form-control:focus,
.wpcf7-form select.wpcf7-form-control:focus {
	outline: none;
	border-color: var(--highlight-color);
}

.wpcf7-form textarea.wpcf7-form-control {
	resize: vertical;
	min-height: 120px;
}

.wpcf7-form input.wpcf7-form-control[type="file"] {
	padding: 10px;
	background-color: transparent;
	border-style: dashed;
}

/* GDPR elfogadó jelölőnégyzet + a fölötte lévő "Adatvédelmi tájékoztató" link */

.wpcf7-form .wpcf7-acceptance {
	display: block;
	margin-top: 8px;
}

.wpcf7-form .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form .wpcf7-list-item-label {
	margin-left: 8px;
	font-size: 0.8125rem;
	color: var(--text-color);
}

.wpcf7-form a.btn-custom {
	display: inline-block;
	margin-bottom: 6px;
	color: var(--highlight-color);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: underline;
}

/* Küldés gomb – az űrlap saját "class:btn class:btn-custom" form-tag
   attribútuma miatt a .wpcf7-submit már alapból megkapja ezeket az
   osztályokat is (lásd a form-tartalmat a Contact Form 7 admin felületén). */

.wpcf7-form .wpcf7-submit,
.wpcf7-form input.wpcf7-form-control.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 14px 32px;
	border-radius: var(--corner-pill);
	border: 1px solid var(--global-color);
	background-color: var(--global-color);
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wpcf7-form .wpcf7-submit:hover {
	filter: brightness(0.92);
}

/* A Contact Form 7 addig letiltva tartja a Küldés gombot, amíg az
   adatvédelmi elfogadó jelölőnégyzet nincs bepipálva (ez a plugin saját,
   beépített viselkedése, lásd contact-form-7/includes/js/index.js) – itt
   csak vizuálisan is jelezzük ezt az állapotot. */
.wpcf7-form .wpcf7-submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.wpcf7-form .btn-block .wpcf7-submit,
.wpcf7-form .btn-block input.wpcf7-form-control.wpcf7-submit {
	width: 100%;
}

/* Hibaüzenetek + a beküldés utáni státusz-sáv */

.wpcf7-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	color: #c0392b;
	font-size: 0.75rem;
}

.wpcf7-form-control-wrap.captchac img {
	border-radius: var(--corner-sm);
}

.wpcf7 .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: var(--corner-sm);
	border: none;
	font-size: 0.875rem;
}

/* Beküldés előtt a doboz üres (a Contact Form 7 csak beküldéskor tölti fel
   szöveggel) – ":empty"-vel elrejtve, hogy ne látszódjon egy üres, kitöltött
   hátterű sáv az űrlap alatt minden oldalbetöltéskor. */
.wpcf7 .wpcf7-response-output:empty {
	display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
	background-color: rgba(0, 144, 138, 0.12);
	color: #00655f;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	background-color: rgba(192, 57, 43, 0.1);
	color: #c0392b;
}

@media (min-width: 768px) {
	.wpcf7-form .col-md-6 {
		width: 50%;
	}

	.wpcf7-form .col-md-12 {
		width: 100%;
	}
}

/* Copyright-sáv a sötétzöld blokk alatt */

#colophon.site-footer .site-info {
	padding: 20px 24px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: var(--highlight-color);
	text-align: center;
}

#colophon.site-footer .site-info__contact a {
	color: var(--global-color);
	font-weight: 600;
}

.scroll-top-button {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	padding: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 300;
}

.scroll-top-button.is-visible {
	display: flex;
}

/*
 * A lábléc 3 oszlopot tartalmaz (Elérhetőség / Információk / Üzenetküldés) –
 * ezt SZÁNDÉKOSAN egyetlen töréspont adja meg (nincs köztes 2 oszlopos
 * lépcső): 3 elemnél egy 2 oszlopos rács mindig üresen hagyná a 2×2-es rács
 * negyedik celláját, ami pont úgy néz ki, mintha "4 oszlopból egy üres
 * maradt volna" – ez volt a korábbi (4 oszlopra tervezett, Hírlevél oszlop
 * törlése utáni) elrendezés hibája.
 */
@media (min-width: 700px) {
	.footer-columns {
		/*
		 * "minmax(0, 1fr)", NEM sima "1fr": egy grid track alapértelmezett
		 * minimális szélessége "auto" (a tartalom min-content szélessége), nem
		 * 0 – az Elérhetőség oszlop törhetetlen e-mail címe emiatt szélesebbre
		 * nyomná a saját oszlopát a másik kettőnél, hiába van mindhárom track
		 * "1fr"-re állítva. A "minmax(0, 1fr)" nullázza ezt az implicit
		 * minimumot, így a 3 oszlop tényleg egyenlő szélességű marad.
		 */
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 40px;
	}
}

/* ==========================================================================
   FAQ accordion (újrahasznosítható a jövőbeli tartalmi blokkokhoz)
   ========================================================================== */

.faq-item {
	border-bottom: 1px solid var(--bs-body-bg);
}

.faq-item__question-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 0;
	cursor: pointer;
}

.faq-item__question {
	margin: 0;
	font-size: 1rem;
}

.faq-item__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
}

.faq-item__answer-inner {
	overflow: hidden;
}

.faq-item--expanded .faq-item__answer {
	grid-template-rows: 1fr;
}

.faq-item--expanded .faq-item__answer-inner {
	padding-bottom: 18px;
}

/* ==========================================================================
   WooCommerce quantity spinner
   ========================================================================== */

.js-input-spinner-wrapper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--highlight-color);
	border-radius: var(--corner-pill);
	overflow: hidden;
}

.js-input-spinner-btn {
	width: 36px;
	height: 36px;
	background: transparent;
	border: none;
	font-size: 1.125rem;
	cursor: pointer;
	color: var(--global-color);
}

.js-input-spinner-injected {
	width: 44px;
	text-align: center;
	border: none;
	background: transparent;
	font-family: 'Poppins', sans-serif;
}

/* ==========================================================================
   Single termékoldal (woocommerce/content-single-product.php)
   ========================================================================== */

.product-page-top {
	padding: 24px 0 8px;
}

.product-page-top__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 32px;
}

.product-page-gallery {
	position: relative;
	flex: 1 1 100%;
	margin-bottom: 24px;
}

.product-page-summary-col {
	flex: 1 1 100%;
	margin-bottom: 24px;
}

/* A WooCommerce alap CSS-e (woocommerce.css) a ".storefront-full-width-content"
   body-osztályhoz ÖNÁLLÓ, float+százalék alapú 2 hasábos elrendezést ad a
   galériának és az összegzésnek (".woocommerce-product-gallery"/".images"
   width:~39%, ".summary" width:~53%, mindkettő float-tal) – ez FÜGGETLENÜL
   a saját, ezeket már egy flex sorba (.product-page-top__row) rendező
   elrendezésünktől is lefut, és "beleszámolódik" a MI flex-oszlopunk (már
   50% széles) SZÁZALÉKÁBA, ezért lett a galéria-kép nevetségesen kicsi.
   Emellett a lebegő (float) elem nem ad magasságot a szülőjének (clearfix
   nélkül), ez okozta az üres, összeesett sávot a tabok fölött. Itt
   semlegesítjük a szülő float/százalék szabályait – a !important indokolt,
   mert egy korábban betöltött, magasabb specificitású core-szabályt írunk
   felül szándékosan, nem megkerülhető törékeny szelektor-versenyfutással. */
.product-page-gallery .woocommerce-product-gallery,
.product-page-gallery .images,
.product-page-summary-col .summary {
	float: none !important;
	width: 100% !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
}

/* A szülő téma a ".stock::before"-hoz egy Font Awesome "smiley"/"frown"
   glyphot ad (icons.css, "\f118"/"\f119") – ez az egyetlen hely a témában,
   ahol Font Awesome ikonfont jelenne meg (a téma mindenhol máshol saját,
   beágyazott SVG ikonokat használ), és ha a glyph valamiért nem a megfelelő
   betűtípussal renderelődik, olvashatatlan "roncsolt" karakterként jelenik
   meg a "Raktáron"/"Elfogyott" szöveg előtt. Mivel a készletjelzés amúgy is
   egyértelmű a szín (zöld/piros) + szöveg kombinációból, ezt az idegen,
   következetlen ikont inkább teljesen kikapcsoljuk. */
.stock::before {
	content: none;
}

.stock {
	display: inline-flex;
	align-items: center;
	font-size: 0.8125rem;
	font-weight: 600;
}

.stock.in-stock {
	color: #00908A;
}

.stock.out-of-stock {
	color: #b3261e;
}

/* WooCommerce galéria (zoom/lightbox/slider a core JS-ből jön, csak a megjelenést igazítjuk) */

.woocommerce-product-gallery {
	position: relative;
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
	border-radius: var(--corner-lg);
	overflow: hidden;
	background-color: var(--bs-body-bg);
}

.woocommerce-product-gallery__image {
	list-style: none;
}

.woocommerce-product-gallery__image a {
	display: block;
	aspect-ratio: 1 / 1;
}

.woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	width: 72px;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: var(--corner-sm);
	border: 2px solid transparent;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--global-color);
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 5;
}

/* Termékösszegzés (cím, ár, leírás, kosárba gomb) */

.entry-summary .product_title {
	font-size: 1.75rem;
	margin-bottom: 12px;
}

.entry-summary .woocommerce-product-rating {
	margin-bottom: 16px;
}

.entry-summary .price {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 1.75rem;
	color: var(--price-special-color);
}

.entry-summary .price del {
	font-size: 1.125rem;
	font-weight: 400;
	opacity: 0.55;
	margin-right: 10px;
}

.entry-summary .price ins {
	text-decoration: none;
}

.entry-summary .woocommerce-product-details__short-description {
	margin: 16px 0;
	color: var(--text-color);
	line-height: 1.7;
}

.entry-summary .stock {
	display: block;
	margin: 12px 0;
}

.entry-summary form.cart {
	background-color: var(--bs-body-bg);
	border-radius: var(--corner-md);
	padding: 20px;
	margin: 20px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.entry-summary form.cart .quantity {
	margin: 0;
}

.entry-summary .single_add_to_cart_button,
.entry-summary .single_add_to_cart_button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 180px;
	padding: 14px 28px;
	border-radius: var(--corner-pill);
	border: 1px solid var(--global-color);
	background-color: var(--global-color);
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.entry-summary .single_add_to_cart_button:hover,
.entry-summary .single_add_to_cart_button.button:hover {
	background-color: #2f403e;
	border-color: #2f403e;
	transform: translateY(-1px);
}

.entry-summary .single_add_to_cart_button.disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* Ár nélküli (nem vásárolható) termékek "Egyedi árajánlat" felirata a
   ".price" helyén (lásd bendekandallo_theme_quote_price_html() az
   inc/product-quote-form.php-ban) – a ".entry-summary .price" fentebbi
   szabálya már megadja a színt/betűvastagságot, itt csak a normál (nem
   pénzösszeg-jellegű) megjelenést jelezzük dőlt stílussal. */
.product-quote-price {
	font-style: italic;
}

/* Árajánlatkérő űrlap-szakasz (lásd bendekandallo_theme_render_quote_form()
   az inc/product-quote-form.php-ban) – a "Kosárba rakom" gomb HELYÉN jelenik
   meg ár nélküli termékeknél, a form maga a már meglévő ".wpcf7-form"
   szabályokat kapja (lásd a "Contact Form 7" szakaszt). */
.product-quote-form {
	background-color: var(--bs-body-bg);
	border-radius: var(--corner-md);
	padding: 20px;
	margin: 20px 0;
	scroll-margin-top: 90px;
}

.product-quote-form__title {
	margin: 0 0 8px;
	font-size: 1.25rem;
}

.product-quote-form__intro {
	margin: 0 0 16px;
	color: var(--highlight-color);
	font-size: 0.875rem;
	line-height: 1.6;
}

.product-quote-form .wpcf7 {
	max-width: none;
}

.product_meta {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 0.8125rem;
	color: var(--highlight-color);
}

.product_meta > span {
	display: block;
	margin-bottom: 4px;
}

.product_meta a {
	color: var(--global-color);
}

.product-page-gallery > .product-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 5;
}

/* Tabok (leírás / további információk / vélemények) */

.product-page-bottom {
	padding: 32px 0 48px;
}

.woocommerce-tabs {
	max-width: 900px;
}

/* A WooCommerce/Storefront alap CSS-e a ".storefront-full-width-content"
   body-osztályhoz egy RÉGI, "függőleges tabok bal oldalt + panel jobb oldalt"
   elrendezést ad ("ul.tabs" ~30% float:left, ".panel" ~65% float:right) –
   pontosan ugyanaz a jelenség, mint a galériánál fentebb: emiatt jelent meg
   a "Leírás" fül egy keskeny, oldalra szorult dobozként a tartalom mellett,
   ahelyett hogy vízszintes fülsor lenne felül, teljes szélességű panellel
   alatta. Itt is semlegesítjük a float/százalék szélességet. */
.woocommerce-tabs ul.tabs,
.woocommerce-tabs .panel {
	float: none !important;
	width: 100% !important;
	margin-right: 0 !important;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	border-bottom: 1px solid var(--bs-body-bg);
}

.woocommerce-tabs ul.tabs li {
	margin: 0;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 10px 20px;
	border-radius: var(--corner-pill) var(--corner-pill) 0 0;
	color: var(--highlight-color);
	font-weight: 600;
}

.woocommerce-tabs ul.tabs li.active a {
	background-color: var(--bs-body-bg);
	color: var(--global-color);
}

.woocommerce-tabs .panel {
	line-height: 1.7;
	color: var(--text-color);
}

.woocommerce-tabs .panel h2 {
	font-size: 1.25rem;
	margin-bottom: 16px;
}

.woocommerce-tabs table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--bs-body-bg);
	text-align: left;
}

.woocommerce-tabs table.shop_attributes th {
	width: 240px;
	font-weight: 600;
	color: var(--global-color);
}

/* Kapcsolódó termékek */

.related.products {
	margin-top: 16px;
	padding-top: 32px;
	border-top: 1px solid var(--bs-body-bg);
}

.related.products > h2 {
	font-size: 1.5rem;
	margin-bottom: 24px;
}

@media (min-width: 992px) {
	.product-page-gallery,
	.product-page-summary-col {
		flex: 1 1 calc(50% - 16px);
		margin-bottom: 0;
	}
}

/* ==========================================================================
   Nincs oldalsáv (globális, minden sablonra érvényes)
   A szülő Storefront téma "jobb oldali sidebar" elrendezést feltételez, amíg
   a sidebar-1 widget-területben van widget – ilyenkor a ".right-sidebar
   .content-area{width:73.91%}" szabállyal mindig helyet hagy egy oldalsávnak,
   FÜGGETLENÜL attól, hogy az ténylegesen kiíródik-e. Nálunk a #secondary
   KIÍRÁSÁT globálisan letiltottuk (lásd inc/storefront-overrides.php), ezért
   ez a szelektor (#primary.content-area, ami minden Storefront-sablonban –
   page.php, single.php, archive.php stb. – ugyanaz) explicit módon teljes
   szélességűre kényszeríti a tartalmi oszlopot, hogy ne maradjon üres hely
   a jobb oldalon. */
#primary.content-area {
	width: 100% !important;
	float: none !important;
	padding-top: 24px;
}

/* Néhány bővítmény (pl. termékkereső) egy üres <div class="woocommerce">
   wrappert szúr be a tartalom elé – ha nincs benne semmi, ne foglaljon helyet. */
#content .col-full > .woocommerce:empty {
	display: none;
}

.woocommerce-products-header {
	position: relative;
	margin-bottom: 24px;
}

.archive-header-banner {
	height: 160px;
	margin-bottom: 20px;
	border-radius: var(--corner-lg);
	background-color: var(--highlight-color);
	background-size: cover;
	background-position: center;
}

.woocommerce-products-header__title.page-title {
	font-family: 'Playfair Display', serif;
	font-size: 2rem;
	color: var(--global-color);
	margin: 0 0 8px;
}

.woocommerce-products-header .term-description,
.woocommerce-products-header .woocommerce-products-header__description {
	max-width: 760px;
	color: var(--text-color);
	line-height: 1.6;
}

/* Rendezés + találatszám sáv (storefront_sorting_wrapper) */

.storefront-sorting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
	padding: 12px 16px;
	background-color: #fff;
	border: 1px solid var(--bs-body-bg);
	border-radius: var(--corner-sm);
}

.storefront-sorting .woocommerce-result-count {
	margin: 0;
	color: var(--highlight-color);
	font-size: 0.875rem;
}

.storefront-sorting .woocommerce-ordering {
	margin: 0;
}

.storefront-sorting .woocommerce-ordering select {
	padding: 8px 12px;
	border: 1px solid var(--bs-body-bg);
	border-radius: var(--corner-sm);
	font-family: 'Poppins', sans-serif;
	font-size: 0.875rem;
	color: var(--global-color);
	background-color: #fff;
}

.woocommerce-pagination {
	margin-top: 32px;
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}

.woocommerce-pagination .page-numbers li {
	list-style: none;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border-radius: var(--corner-sm);
	border: 1px solid var(--bs-body-bg);
	color: var(--global-color);
	font-size: 0.875rem;
}

.woocommerce-pagination .page-numbers a:hover {
	border-color: var(--global-color);
	text-decoration: none;
}

.woocommerce-pagination .page-numbers .current {
	background-color: var(--global-color);
	border-color: var(--global-color);
	color: var(--text-on-primary);
}

@media (max-width: 767px) {
	.archive-header-banner {
		height: 110px;
	}

	.woocommerce-products-header__title.page-title {
		font-size: 1.5rem;
	}

	.storefront-sorting {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ==========================================================================
   Termékkategória/bolt oldalak – szűrősáv (ár + márka) és végtelen görgetés
   A markup: woocommerce/archive-product.php (".shop-layout" > ".shop-filters"
   + ".shop-main"), a szűrő-widgetek tartalma: inc/shop-filters.php.
   ========================================================================== */

.shop-layout {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.shop-main {
	min-width: 0;
	flex: 1 1 auto;
	width: 100%;
}

.shop-filters {
	flex: 0 0 auto;
	width: 100%;
	background-color: #fff;
	border: 1px solid var(--bs-body-bg);
	border-radius: var(--corner-md);
	padding: 20px;
}

.shop-filters__section + .shop-filters__section {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--bs-body-bg);
}

.shop-filters__title {
	margin: 0 0 14px;
	font-size: 1rem;
	color: var(--global-color);
}

.shop-filters__reset {
	display: inline-block;
	margin-top: 20px;
	color: var(--highlight-color);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: underline;
}

.shop-filters__reset:hover {
	color: var(--global-color);
}

/* Ár szerint (WC_Widget_Price_Filter) – a csúszka maga a WooCommerce saját
   jQuery UI-alapú "wc-price-slider" szkriptjéből jön (lásd
   inc/shop-filters.php), itt csak a színeit igazítjuk a témához. */

.price_slider_wrapper .ui-slider {
	position: relative;
	height: 4px;
	margin: 10px 6px 20px;
	background-color: var(--bs-body-bg);
	border-radius: var(--corner-pill);
}

.price_slider_wrapper .ui-slider-range {
	position: absolute;
	top: 0;
	height: 100%;
	background-color: var(--highlight-color);
	border-radius: var(--corner-pill);
}

.price_slider_wrapper .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	transform: translateY(-50%);
	background-color: #fff;
	border: 2px solid var(--global-color);
	border-radius: 50%;
	cursor: pointer;
	outline: none;
}

.price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.price_slider_amount #min_price,
.price_slider_amount #max_price {
	width: 88px;
	padding: 8px 10px;
	border: 1px solid var(--bs-body-bg);
	border-radius: var(--corner-sm);
	font-family: 'Poppins', sans-serif;
	font-size: 0.8125rem;
	color: var(--text-color);
	background-color: var(--bs-body-bg);
}

.price_slider_amount .button {
	padding: 8px 16px;
	border-radius: var(--corner-pill);
	border: 1px solid var(--global-color);
	background-color: var(--global-color);
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.8125rem;
	cursor: pointer;
}

.price_slider_amount .button:hover {
	background-color: #2f403e;
	border-color: #2f403e;
}

.price_slider_amount .price_label {
	width: 100%;
	color: var(--highlight-color);
	font-size: 0.8125rem;
}

.price_slider_amount .clear {
	display: none;
}

/* Márka szerint (WC_Widget_Layered_Nav) – jelölőnégyzet-szerű lista; a
   WooCommerce ezt sima linkekkel adja (nincs valódi <input type=checkbox>,
   kattintásra teljes oldal-navigáció szűri az URL-t), a pipa-jelet ezért egy
   ::before pszeudo-elem adja a ".chosen" (kiválasztott) állapotban. */

.woocommerce-widget-layered-nav-list {
	list-style: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/*
 * A WooCommerce a márka nevét ("<a>...</a>") és a darabszámot
 * ("<span class="count">...") EGYMÁS UTÁNI TESTVÉR elemként adja ki (NEM a
 * link BELSEJÉBEN) – ezért a flex-elrendezésnek (és a jelölőnégyzet ::before
 * pszeudo-elemnek) magán a listaelemen ("li", nem az "a"-n) kell lennie,
 * különben a darabszám a link ALÁ, külön sorba törne (a tömb szélességű,
 * blokk-szintű "a" flex-konténer alá).
 */
.woocommerce-widget-layered-nav-list__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 6px 30px;
	border-radius: var(--corner-sm);
}

.woocommerce-widget-layered-nav-list__item a,
.woocommerce-widget-layered-nav-list__item > span:not(.count) {
	color: var(--text-color);
	font-size: 0.875rem;
}

.woocommerce-widget-layered-nav-list__item::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	background-color: #fff;
}

.woocommerce-widget-layered-nav-list__item--chosen::before {
	background-color: var(--global-color);
	border-color: var(--global-color);
}

.woocommerce-widget-layered-nav-list__item--chosen::after {
	content: '';
	position: absolute;
	left: 10px;
	top: 45%;
	width: 5px;
	height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translateY(-50%) rotate(45deg);
}

.woocommerce-widget-layered-nav-list__item:hover {
	background-color: var(--bs-body-bg);
}

.woocommerce-widget-layered-nav-list__item--chosen {
	font-weight: 600;
}

.woocommerce-widget-layered-nav-list__item .count {
	margin-left: auto;
	flex-shrink: 0;
	color: var(--highlight-color);
	font-size: 0.75rem;
}

/* Végtelen görgetés – lásd js/custom.js initInfiniteScroll(). A ".js-infinite-scroll"
   osztályt a JS teszi a <html>-re, csak akkor van értelme elrejteni a
   szabvány lapozást (ha valamiért nem futna le a JS, a lapozás marad a
   tartalék navigációs mód). */
.js-infinite-scroll .woocommerce-pagination {
	display: none;
}

/*
 * SZÁNDÉKOSAN NEM "display:none" alapból: az IntersectionObserver (lásd
 * js/custom.js initInfiniteScroll()) egy "display:none" elemet SOHA nem
 * jelezne metsződőnek (nincs mérete/pozíciója) – ez a doboz emiatt mindig a
 * dokumentumfolyásban marad (kis, végig lefoglalt hellyel, lásd "min-height"),
 * csak a benne lévő pörgettyű látszik/tűnik el a ".is-loading" állapottal.
 */
.shop-infinite-scroll {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 60px;
	padding: 16px 0;
}

.shop-infinite-scroll__spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--bs-body-bg);
	border-top-color: var(--global-color);
	border-radius: 50%;
	opacity: 0;
	animation: bendekandallo-spin 0.8s linear infinite;
}

.shop-infinite-scroll.is-loading .shop-infinite-scroll__spinner {
	opacity: 1;
}

@keyframes bendekandallo-spin {
	to {
		transform: rotate(360deg);
	}
}

.shop-infinite-scroll__end {
	text-align: center;
	color: var(--highlight-color);
	font-size: 0.875rem;
}

@media (min-width: 992px) {
	.shop-layout {
		flex-direction: row;
		gap: 32px;
	}

	.shop-filters {
		flex: 0 0 260px;
		position: sticky;
		top: 96px;
	}
}

/* ==========================================================================
   Kezdőlap – bemutatkozás
   ========================================================================== */

.home-intro {
	padding: 24px 0 48px;
}

.home-intro__grid {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.home-intro__media {
	flex: 1 1 100%;
	border-radius: var(--corner-lg);
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.home-intro__media img {
	width: 100%;
	display: block;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.home-intro__content {
	flex: 1 1 100%;
}

.home-intro__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}

.home-intro__title {
	margin: 0;
	white-space: nowrap;
}

.home-intro__divider {
	flex: 1 1 auto;
	height: 3px;
	border-radius: var(--corner-pill);
	background: linear-gradient(to right, var(--accent-color), rgba(143, 191, 191, 0));
}

.home-intro__text {
	color: var(--text-color);
	line-height: 1.7;
}

.home-intro__text p {
	margin: 0 0 16px;
}

.home-intro__text p:last-child {
	margin-bottom: 0;
}

.home-intro__text strong {
	color: var(--global-color);
}

.home-intro__signature {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 20px;
}

.home-intro__company {
	font-family: 'Playfair Display', serif;
	font-size: 1.125rem;
	font-weight: 900;
	color: var(--global-color);
}

.home-intro__person {
	font-size: 0.9375rem;
	color: var(--highlight-color);
}

.home-intro__phone {
	margin: 10px 0 0;
}

.home-intro__phone a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--global-color);
}

.home-intro__phone a:hover {
	text-decoration: underline;
}

.home-intro__phone svg {
	color: var(--accent-color);
}

.home-intro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

@media (min-width: 768px) {
	.home-intro__grid {
		flex-direction: row;
		align-items: center;
	}

	.home-intro__media,
	.home-intro__content {
		flex: 1 1 50%;
	}
}

/* ==========================================================================
   Kezdőlap – hero bannerek
   ========================================================================== */

.home-hero {
	padding: 24px 0;
}

/*
 * Tetszőleges számú (1-BENDEKANDALLO_THEME_HERO_SLOTS) teljes szélességű
 * banner egymásra rétegezve; 1 bannernél nincs JS/csúszka, csak a
 * ".is-active" dia látszik (lásd template-parts/home/hero.php). Egynél több
 * bannernél a "js-hero-slider" osztály jelenlétében a js/custom.js
 * initHeroSlider()-je vált automatikusan a diák között, és kezeli a lenti
 * pöttyök kattintását.
 */
.home-hero-slider {
	position: relative;
	border-radius: var(--corner-lg);
	overflow: hidden;
	background-color: var(--bs-body-bg);
}

/*
 * A dia magasságát ("aspect-ratio" + "min-height") szándékosan NEM a kép
 * (".home-hero-slide__image") adja, hanem maga a ".home-hero-slide"
 * flex-konténer, a képet pedig egy háttérként rárétegezett, abszolút
 * pozícionált réteg tölti ki ("object-fit:cover"). Ha a kép önmaga adná a
 * magasságot (fix "aspect-ratio" az img-en), egy hosszabb feliratú/gombú
 * banner (pl. hosszú Testreszabó-szöveg keskeny mobil nézetben, 2-3 sorra
 * törve) magasabb lenne, mint a kép – az abszolút pozícionált felirat
 * doboza ilyenkor a kép TETEJE FÖLÉ lógna ki, amit a szülő
 * ".home-hero-slider" "overflow:hidden"-je levágna (a cím eleje eltűnt
 * volna). A flex "justify-content:flex-end" + a felirat normál dokumentum-
 * folyásba helyezése (nem "position:absolute") miatt a dia MINDIG legalább
 * annyira magas, amennyit a felirat ténylegesen igényel – a kép pedig
 * ehhez a (szükség esetén az "aspect-ratio"-nál magasabb) dobozhoz igazodva
 * vágódik, sosem a felirat rovására.
 */
.home-hero-slide {
	display: none;
	position: relative;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 5;
}

.home-hero-slide.is-active {
	display: flex;
}

.js-hero-slider .home-hero-slide {
	display: flex;
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
}

.js-hero-slider .home-hero-slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
}

.home-hero-slide__image {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A felirat (cím/alcím/gomb) a kép fölé rétegezve, a Testreszabóból
   opcionálisan kitölthető – ha nincs kitöltve semelyik, ez a doboz
   egyáltalán nem kerül kiírásra (lásd template-parts/home/hero.php). A
   sötétedő színátmenet (nem sima text-shadow) azért kell, mert egy
   tetszőleges, ismeretlen fényességű fotó fölött is megfelelő kontrasztot
   kell adnia a szövegnek és a gombnak. Szándékosan a normál dokumentum-
   folyásban van (nem "position:absolute") – lásd a ".home-hero-slide"
   fenti kommentjét. */
.home-hero-slide__caption {
	position: relative;
	z-index: 2;
	padding: 28px 24px 32px;
	background: linear-gradient(to top, rgba(13, 13, 13, 0.75) 0%, rgba(13, 13, 13, 0.4) 55%, rgba(13, 13, 13, 0) 100%);
}

.home-hero-slide__title {
	color: #fff;
	font-style: italic;
	font-size: 1.5rem;
	margin: 0 0 8px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.home-hero-slide__subtitle {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 400;
	font-size: 1rem;
	margin: 0 0 18px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.home-hero-slide__button {
	display: block;
	width: 100%;
	padding: 16px 24px;
	border-radius: var(--corner-pill);
	background-color: var(--highlight-color);
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
	text-align: center;
}

.home-hero-slide__button:hover {
	background-color: var(--global-color);
	color: #fff;
}

.home-hero-slider__dots {
	position: absolute;
	z-index: 3;
	top: 16px;
	right: 16px;
	display: flex;
	gap: 8px;
}

.home-hero-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.3);
	cursor: pointer;
}

.home-hero-slider__dot.is-active {
	background-color: #fff;
}

@media (min-width: 576px) {
	.home-hero-slide__title {
		font-size: 1.875rem;
	}

	.home-hero-slide__button {
		width: auto;
	}
}

@media (min-width: 768px) {
	.home-hero-slide {
		aspect-ratio: 21 / 9;
	}

	.home-hero-slide__caption {
		padding: 40px 48px 48px;
	}

	.home-hero-slide__title {
		font-size: 2.25rem;
	}
}

/* ==========================================================================
   Kezdőlap – kategória blokk
   ========================================================================== */

.home-categories {
	padding: 24px 0;
}

.home-categories__wrap {
	background-color: var(--bs-body-bg);
	border-radius: var(--corner-lg);
	padding: 20px;
}

.home-categories__wrap + .home-categories__wrap {
	margin-top: 20px;
}

.home-categories__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.home-categories__row-title {
	margin: 0;
	font-size: 1.25rem;
}

.home-categories__all-link {
	flex-shrink: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--highlight-color);
}

.home-categories__all-link:hover {
	color: var(--global-color);
	text-decoration: underline;
}

.home-categories__flex {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: stretch;
}

.home-categories__main-col {
	flex: 1 1 100%;
}

.home-categories__main-banner {
	position: relative;
	display: block;
	height: 100%;
	min-height: 200px;
	border-radius: var(--corner-md);
	overflow: hidden;
	color: #fff;
	background-color: var(--global-color);
}

.home-categories__main-banner img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-categories__main-title {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 16px;
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	font-size: 1.5rem;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.home-categories__grid-col {
	flex: 1 1 320px;
}

.home-categories__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/*
 * Rugalmas csempeszélesség flexbasis-szel grid helyett: a Testreszabóban
 * 1–8 csempe adható meg, ez a megoldás bármennyi elemnél középre rendezi
 * az utolsó, nem teljes sort (grid-nél az árva elem balra tapadna).
 */
.home-category-tile {
	flex: 0 1 calc((100% - 14px) / 2);
}

.home-category-tile__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--text-color);
}

.home-category-tile__image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 130px;
	background-color: #fff;
	border: 1px solid #e3e3e3;
	border-radius: var(--corner-md);
	padding: 10px;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-category-tile__image img {
	max-height: 100px;
	object-fit: contain;
}

.home-category-tile__name {
	margin-top: 10px;
	font-size: 0.8125rem;
	font-weight: 600;
}

.home-category-tile__link:hover {
	color: var(--global-color);
}

.home-category-tile__link:hover .home-category-tile__image {
	transform: translateY(-3px);
	border-color: var(--global-color);
	box-shadow: 0 10px 20px rgba(66, 87, 85, 0.12);
}

@media (min-width: 576px) {
	.home-category-tile {
		flex-basis: calc((100% - 28px) / 3);
	}
}

@media (min-width: 768px) {
	.home-categories__main-col {
		flex: 0 0 260px;
	}
}

@media (min-width: 992px) {
	.home-category-tile {
		flex-basis: calc((100% - 42px) / 4);
	}
}

/* ==========================================================================
   Kezdőlap – termékkarusszelek
   ========================================================================== */

.home-carousel {
	padding: 24px 0;
}

.home-carousel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.home-carousel__title {
	margin: 0;
	font-size: 1.375rem;
}

.home-carousel__nav {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.home-carousel__btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--global-color);
	background-color: #fff;
	color: var(--global-color);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.home-carousel__btn:hover {
	background-color: var(--global-color);
	color: #fff;
}

.home-carousel__track.products {
	display: flex !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 20px;
	padding: 4px 4px 12px;
	scrollbar-width: thin;
	scrollbar-color: var(--highlight-color) transparent;
}

.home-carousel__track.products::-webkit-scrollbar {
	height: 6px;
}

.home-carousel__track.products::-webkit-scrollbar-thumb {
	background-color: var(--highlight-color);
	border-radius: var(--corner-pill);
}

.home-carousel__track.products .product-card-item {
	flex: 0 0 220px;
	scroll-snap-align: start;
}

@media (min-width: 576px) {
	.home-carousel__track.products .product-card-item {
		flex-basis: 260px;
	}
}

/* ==========================================================================
   Kezdőlap – GYIK
   ========================================================================== */

.home-faq {
	padding: 24px 0 48px;
}

.home-faq__title {
	text-align: center;
	margin-bottom: 24px;
}

.home-faq__list {
	max-width: 820px;
	margin: 0 auto;
}

.faq-item__toggle {
	position: relative;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.faq-item__toggle::before,
.faq-item__toggle::after {
	content: '';
	position: absolute;
	background-color: var(--global-color);
	transition: transform 0.2s ease;
}

.faq-item__toggle::before {
	top: 9px;
	left: 0;
	width: 20px;
	height: 2px;
}

.faq-item__toggle::after {
	top: 0;
	left: 9px;
	width: 2px;
	height: 20px;
}

.faq-item--expanded .faq-item__toggle::after {
	transform: rotate(90deg);
	opacity: 0;
}

/* ==========================================================================
   Kezdőlap – videó szekció
   ========================================================================== */

.home-video {
	padding: 24px 0 48px;
}

.home-video__wrapper {
	display: flex;
	flex-direction: column;
	background-color: var(--global-color);
	border-radius: var(--corner-lg);
	overflow: hidden;
}

.home-video__player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.home-video__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.home-video__text {
	padding: 24px;
	color: #fff;
}

.home-video__title {
	color: #fff;
	font-size: 1.5rem;
}

.home-video__subtitle {
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 20px;
}

.home-video .btn-secondary {
	border-color: #fff;
	color: #fff;
}

.home-video .btn-secondary:hover {
	background-color: #fff;
	color: var(--global-color);
}

@media (min-width: 992px) {
	.home-video__wrapper {
		flex-direction: row;
		align-items: center;
	}

	.home-video__player {
		flex: 1 1 60%;
	}

	.home-video__text {
		flex: 0 0 40%;
		padding: 40px;
	}
}

/* ==========================================================================
   Statikus front page tartalom (ha van kiválasztva a Beállítások → Olvasás alatt)
   ========================================================================== */

.front-page-content {
	padding: 32px 0;
}

/* ==========================================================================
   Tartalmi/lábléc/fejléc konténer szélesség
   A szülő téma a ".col-full"-t egy fix "max-width:66.4989378333em" (~1064px)
   értékre korlátozza minden asztali szélességen – ez nagy (Full HD/ultrawide)
   monitorokon feleslegesen keskeny, üres sávokat hagy a tartalom két oldalán.
   Itt a tartalmi ".col-full" (fejléc alatt, a lábléc mindkét blokkja is ezt
   használja – lásd storefront/footer.php) szélességét a nézőablakhoz kötjük:
   a viewport kb. 70-80%-a, alsó korláttal (kisebb asztali méreteknél ne
   szűküljön 80% alá) és felső korláttal (ultrawide monitoron ne nyúljon
   olvashatatlanul szélesre).

   A fejléc (#masthead) saját, a háttere miatt szándékosan szélétől-szélig érő
   rácsát (lásd a fenti komment) ugyanerre a szélességre igazítjuk: a két
   szélső "ütköző" oszlop pontos (nem 1fr, hanem kiszámított) mérete garantálja,
   hogy a keresés/logó/kosár sor és az alatta lévő mega-menü bal/jobb széle
   pixelre egybeessen a tartalom/lábléc szélével – a fejléc HÁTTERE (fehér
   sáv) emiatt továbbra is szélétől-szélig ér, csak a benne lévő TARTALOM
   szélessége igazodik. Ugyanígy a gyorsmenü (zöld) sáv is: a sáv HÁTTERE
   full-bleed marad, de a menüpontokat tartalmazó doboz legfeljebb ekkora
   szélességű, és jobbra igazítva ül ebben a dobozban (nem a teljes
   viewport jobb széléhez, hanem a fejléc/tartalom jobb széléhez simulva). */
@media (min-width: 1200px) {
	.col-full {
		box-sizing: border-box;
		width: clamp(var(--container-width), 75vw, var(--container-wide-width));
		max-width: none;
		margin-left: auto;
		margin-right: auto;
		padding-left: 24px;
		padding-right: 24px;
	}

	#masthead.site-header {
		grid-template-columns:
			minmax(16px, calc((100% - clamp(var(--container-width), 75vw, var(--container-wide-width))) / 2))
			minmax(240px, 380px)
			auto
			minmax(180px, 320px)
			minmax(16px, calc((100% - clamp(var(--container-width), 75vw, var(--container-wide-width))) / 2));
	}

	#masthead.site-header .secondary-navigation {
		padding-left: 0;
		padding-right: 0;
	}

	/* Ugyanaz a doboz, mint a fejléc/tartalom szélessége (lásd fentebb) – de itt
	   a tényleges flex elemen (".secondary-navigation > div", lásd a 768px-es
	   blokk komment) állítjuk be, mert az "ul.menu"-t magát korlátozó szabály a
	   közbeékelt WordPress-wrapper div miatt nem érvényesülne. */
	.secondary-navigation > div {
		box-sizing: border-box;
		flex: 0 1 auto;
		width: 100%;
		max-width: clamp(var(--container-width), 75vw, var(--container-wide-width));
		margin-left: auto;
		margin-right: auto;
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* ==========================================================================
   Tartalmi képek nagyítása (lightbox) – oldalak (pl. Referenciák) galéria-
   és egyedi képei. A markup: js/custom.js initLightbox() nyitja meg a
   #bendekandallo-lightbox overlay-t (lásd footer.php-ba beszúrt sablon).
   ========================================================================== */

/*
 * Egyforma méretű rács a galéria-blokkokban: a feltöltött referencia-fotók
 * vegyes méretűek/arányúak (fekvő, álló, széles) – a Gutenberg galéria
 * blokk saját "is-cropped" mechanizmusa flex+"object-fit:cover"-rel
 * NORMÁL ESETBEN egyformára vágná őket, DE ez az "img" közvetlen szülőjétől
 * ("figure > a"/"figure > div") függ (lásd wp-includes/blocks/gallery/style.css
 * ".has-nested-images.is-cropped figure.wp-block-image img{flex:1 0 0%;
 * height:100%;...}") – mivel a lightbox (lentebb) egy SAJÁT wrappert
 * ("js-lightbox-trigger-wrap") szúr az "img" köré, ez a szülő-függés
 * megszakad, és a képek vissza a saját (eltérő) arányukban jelentek meg,
 * összevissza méretű rácsot adva. Ahelyett, hogy a WP core törékeny
 * mechanizmusát próbálnánk "megjavítani", itt egy SAJÁT, egyszerű és
 * megbízható megoldást adunk: a "figure" maga egy fix arányú, kivágott
 * doboz, a kép pedig "object-fit:cover"-rel tölti ki – így minden csempe
 * garantáltan egyforma méretű, a forráskép arányától függetlenül.
 * A "!important" azért kell, mert a WP core fenti szabálya egy
 * ID-specifikusságú ":not(#individual-image)"-et tartalmaz, amit sima
 * osztály-szelektorokkal nem lehetne megbízhatóan felülírni.
 */
.entry-content .wp-block-gallery .wp-block-image,
.front-page-content .wp-block-gallery .wp-block-image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--corner-md);
}

.entry-content .wp-block-gallery .wp-block-image img,
.front-page-content .wp-block-gallery .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center;
}

/* Kattintható jelzés a galéria-/tartalmi képeken – az egér rááll, és egy
   kis nagyító-ikon jelenik meg, hogy egyértelmű legyen: a kép megnyitható. */
.entry-content .wp-block-gallery img,
.entry-content .wp-block-image img,
.front-page-content .wp-block-gallery img,
.front-page-content .wp-block-image img {
	cursor: zoom-in;
	transition: transform 0.3s ease, filter 0.3s ease;
}

/* Alapból a normál dokumentumfolyásban marad (egy önálló, galérián kívüli
   "wp:image" blokknál ez helyes: a kép saját arányában jelenik meg). */
.js-lightbox-trigger-wrap {
	position: relative;
	display: block;
	overflow: hidden;
}

/* A fenti, fix arányú ("aspect-ratio:4/3") rács-csempéken BELÜL viszont a
   wrapper töltse ki a teljes csempét, hogy a kép "object-fit:cover"-je
   érvényesülhessen. */
.wp-block-gallery .wp-block-image .js-lightbox-trigger-wrap {
	position: absolute;
	inset: 0;
}

.js-lightbox-trigger-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(13, 13, 13, 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.65' y1='16.65' x2='21' y2='21'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") center / 32px no-repeat;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.js-lightbox-trigger-wrap:hover::after,
.js-lightbox-trigger-wrap:focus-within::after {
	opacity: 1;
}

.js-lightbox-trigger-wrap:hover img,
.js-lightbox-trigger-wrap:focus-within img {
	transform: scale(1.04);
}

/* Az overlay maga */

.has-lightbox-open {
	overflow: hidden;
}

.bendekandallo-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(13, 13, 13, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
}

.bendekandallo-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.bendekandallo-lightbox__figure {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: min(92vw, 1400px);
	max-height: 88vh;
}

.bendekandallo-lightbox__image {
	display: block;
	max-width: 100%;
	max-height: 80vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--corner-sm);
	background-color: rgba(255, 255, 255, 0.04);
	opacity: 0;
	transform: scale(0.98);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.bendekandallo-lightbox__image.is-loaded {
	opacity: 1;
	transform: scale(1);
}

.bendekandallo-lightbox__counter {
	margin-top: 14px;
	color: rgba(255, 255, 255, 0.7);
	font-family: 'Poppins', sans-serif;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

/* Vezérlők – nagy, könnyen célba vehető gombok (intuitív kezelés: jól
   látható zárás, nyilak, kattintás a sötét háttéren is bezár). */

.bendekandallo-lightbox__close,
.bendekandallo-lightbox__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.bendekandallo-lightbox__close:hover,
.bendekandallo-lightbox__nav:hover {
	background-color: rgba(255, 255, 255, 0.25);
}

.bendekandallo-lightbox__close {
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
}

.bendekandallo-lightbox__close svg,
.bendekandallo-lightbox__nav svg {
	width: 22px;
	height: 22px;
}

.bendekandallo-lightbox__nav--prev {
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.bendekandallo-lightbox__nav--next {
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.bendekandallo-lightbox__nav--prev:hover,
.bendekandallo-lightbox__nav--next:hover {
	transform: translateY(-50%) scale(1.08);
}

.bendekandallo-lightbox__nav[hidden] {
	display: none;
}

@media (max-width: 767px) {
	.bendekandallo-lightbox__close {
		top: 12px;
		right: 12px;
	}

	.bendekandallo-lightbox__nav {
		width: 40px;
		height: 40px;
	}

	.bendekandallo-lightbox__nav--prev {
		left: 8px;
	}

	.bendekandallo-lightbox__nav--next {
		right: 8px;
	}
}