/* ==========================================================================
   blocks.css — A főoldali blokkok KÖZÖS alapja: szakasz-keret, szakaszcím,
   carousel-sín. Akkor töltődik be, ha az oldalon legalább egy vlshop/* blokk
   van, vagy a főoldal tartalék útján renderel.
   MIÉRT KÜLÖN FÁJL, ÉS NEM MINDEN BLOKK CSS-ÉBEN: a szakaszcím és a
   carousel-sín NÉGY blokkban azonos (termékek, bannerek, blog, márkák). Ha
   mindegyik a saját fájljában hozná, ugyanaz a 40 sor négyszer töltődne le, és
   egy javítás négy helyen kellene.
   NULLA ÜRES SOR, a blokkok között sem. Szakaszokat komment-választó jelöl.
   ========================================================================== */
.home .main {
	padding-top: 0;
}
.sect {
	margin-bottom: 30px;
}
.sect__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-5);
}
.sect__title {
	margin: 0;
	font-size: var(--fs-2xl);
	font-weight: 900;
	line-height: 1.21;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--c-text);
	text-wrap: balance;
}
.sect__head .sect__title {
	margin-bottom: 0;
}
/* A FOOLDALI SZAKASZCIMEK NEM CSUPA NAGYBETUSEK.
   Az alapszabaly `text-transform: uppercase`-t ad, mert a referencian a
   kategorialap es a bolt cimsorai igy szedettek. A fooldalon a megbizo a
   normal, kis- es nagybetus alakot kerte, ezert a felulirás CSAK ide szol,
   a tobbi felulet cimsorait nem bantja. Minden nezetszelessegre ervenyes:
   a kerdes nem a hely, hanem a tipografia. */
.home .sect__title {
	text-transform: none;
}
.sect__more {
	flex-shrink: 0;
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--c-text);
}
.sect__more:hover {
	color: var(--c-primary);
}
/* --------------------------------------------------------------------------
   KOZEPRE IGAZITOTT SZAKASZCIM A FOOLDALON, ASZTALI NEZETBEN.
   A .sect__head alapesetben `space-between` flex, mert a termek-carousel
   szakaszciме melle egy "1 / 2" szamlalo is kerul. Ha ilyenkor csak
   `text-align: center`-t adnank a cimnek, a cim a MARADEK helyen kozepezodne,
   tehat a szamlalo szelessegevel balra csuszna. Ezert harom hasabos racs:
   a ket szelso hasab egyenlo (1fr), a cim a kozepso, auto szelessegu
   hasabban all, tehat a KONTENERHEZ kepest kozepen van, fuggetlenul attol,
   hogy van-e melle szamlalo es milyen hosszu.
   Telefonon marad a balra igazitas: ott a cim tobb sorba tordelhet, es a
   kozepre igazitott, tordelt cimsor nehezebben olvashato.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.home .sect__head {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: baseline;
	}
	.home .sect__head .sect__title {
		grid-column: 2;
		text-align: center;
	}
	/* A MEGBIZO ALTAL KERT 30 PIXEL, asztali nezetben. Alapertelmezesben a
	   cim 1,5rem, tehat 24 pixel; itt 1,875rem, ami 16 pixeles alapmereten
	   PONTOSAN 30 pixel. Miert rem es nem px: ha a latogato a bongeszojeben
	   nagyobb alapbetut allitott be (latasromlas, nagy kijelzo), a rem
	   ertekkel a cimsor is vele no, a fix px-szel nem. A tema minden
	   betumerete rem, tehat ez a konvencio is. */
	.home .sect__title {
		font-size: 1.875rem;
	}
	.home .sect__head > :not(.sect__title) {
		grid-column: 3;
		justify-self: end;
	}
}
/* --------------------------------------------------------------------------
   EGYBEFUGGO ROZSASZIN SAV a kategoria-csempek es a ket termek-carousel
   alatt, TELJES nezet-szelessegben.
   .
   MIERT CSAK CSS, es miert nem egy kozos burkolo elem: a harom szakaszt az
   ACF Flexible Content rendereli egymas utan, a burkolo elemet tehat a
   renderelo ciklusba kellene beepiteni, ami minden jovobeli szakasz-sorrendnel
   elromolhat. A szakaszok viszont a <main> KOZVETLEN gyermekei, es a <main>-en
   nincs max-width (a szelesseget a benne levo .container adja), tehat a
   szakasz hattere MAGATOL teljes szelessegu.
   .
   AZ EGYBEFUGGOSEG a `margin-bottom: 0`-bol jon: a szakaszok kozotti 30 pixeles
   margo helyen kulonben kilatszana a lap hattere, es a sav ket-harom csikra
   szakadna. A belso tavolsagot igy a szomszedos paddingok adjak (24+24=48),
   a sav ket vegen pedig ugyanennyi (48) all, tehat a ritmus egyenletes, es
   szoveg nem er a sav szelehez.
   .
   A sav ELSO tagja az, amit nem elozi meg sav-tag, az UTOLSO pedig az, amit
   nem kovet. Ezert a `:not(... + ...)` es a `:not(:has(+ ...))` par: igy a
   szabaly akkor is helyes marad, ha a kliens atrendezi a szakaszokat, vagy
   csak az egyiket hasznalja.
   -------------------------------------------------------------------------- */
.home .cats,
.home .prodrow {
	margin-bottom: 0;
	padding-block: var(--sp-6);
	background: var(--c-cream);
	/* A SAV KET SZELENEK ARNYALASA, KOMPONALVA.
	   .
	   MIERT VALTOZOKKAL, ES MIERT NEM KET KULON `box-shadow` SZABALLYAL. A
	   box-shadow NEM halmozodik szabalyok kozott: ha a felso arnyekot a sav
	   ELSO, az alsot az UTOLSO tagjara irnank ki kulon deklaracioval, akkor
	   egyetlen pink szakasz eseten (a kliens csak az egyiket hasznalja) ugyanaz
	   az elem mindket szabalyra illeszkedne, es a masodik deklaracio
	   FELULIRNA az elsot: a felso arnyek csendben elveszne.
	   .
	   Igy viszont a `box-shadow` egyszer van kiirva, ket resze pedig ket
	   valtozobol jon. Alapertelmezesben mindketto lathatatlan, es csak a sav
	   vegein kap erteket, tehat mind a harom eset helyes: elso, utolso, es az
	   egyszerre elso-es-utolso. */
	--sav-arny-fel: 0 0 0 0 transparent;
	--sav-arny-al: 0 0 0 0 transparent;
	box-shadow: inset var(--sav-arny-fel), inset var(--sav-arny-al);
}
.home .cats:not(.cats + .cats):not(.prodrow + .cats),
.home .prodrow:not(.cats + .prodrow):not(.prodrow + .prodrow) {
	padding-top: var(--sp-12);
}
.home .cats:not(:has(+ .cats)):not(:has(+ .prodrow)),
.home .prodrow:not(:has(+ .cats)):not(:has(+ .prodrow)) {
	padding-bottom: var(--sp-12);
	margin-bottom: 30px;
}
/* --------------------------------------------------------------------------
   A SAV SZELE "POLC": HAJSZALVONAL ES EGY LEHELETNYI BELSO ARNYEK.
   .
   MIERT NEM MINTAZAT A VILAGOS FELULETBEN. A feher itt nem hatter, hanem
   KARTYA: a szabad tartalom feher panel, a kategoria-csempek szinten feher
   kartyak. Egy minta a kartya MOGOTT nem texturakent olvasodik, hanem zajkent
   a doboz korul. Emellett ez egy drogeria-katalogus, ahol a kepi terhet a
   csomagolasok viszik, tehat a hatter egyetlen dolga, hogy eltunjon.
   .
   MIERT EZ, ES NEM A HULLAM. Kiprobaltunk otfele atmenetet lokalisan (lasd a
   dontesi naplo 135. bejegyzeset), es a kliens ezt valasztotta. Ez a
   legvisszafogottabb: nem tesz uj formai elemet a lapra, csak megrajzolja,
   hogy a sav egy FELULET. Addig nem is latszik, amig nem keresi az ember, es
   pont ez a lenyege egy katalogusnal.
   .
   A HAJSZALVONAL CSAK A SAV KET VEGEN VAN, a belso szakaszhatarokon nincs:
   enelkul a sav ket-harom csikra szakadna szet, amit a fenti `margin-bottom: 0`
   epp elkerul. A vonal 1 pixel, tehat a sav magassaga vegenkent 1 pixellel
   no, ami a 48 pixeles paddingon nem latszik.
   -------------------------------------------------------------------------- */
.home .cats:not(.cats + .cats):not(.prodrow + .cats),
.home .prodrow:not(.cats + .prodrow):not(.prodrow + .prodrow) {
	border-top: 1px solid var(--c-cream-line);
	--sav-arny-fel: 0 8px 14px -10px rgba(5, 29, 51, 0.1);
}
.home .cats:not(:has(+ .cats)):not(:has(+ .prodrow)),
.home .prodrow:not(:has(+ .cats)):not(:has(+ .prodrow)) {
	border-bottom: 1px solid var(--c-cream-line);
	--sav-arny-al: 0 -8px 14px -10px rgba(5, 29, 51, 0.1);
}
.carousel {
	position: relative;
}
.carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 320px;
	gap: var(--gutter);
	margin: 0;
	padding: 0 0 var(--sp-1);
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar {
	display: none;
}
.carousel__track > * {
	scroll-snap-align: start;
}
@media (max-width: 575px) {
	.carousel__track {
		grid-auto-columns: min(78%, 300px);
	}
}
/* --------------------------------------------------------------------------
   A TERMEK-CAROUSELBEN EGESZ KARTYAK LATSZANAK, nem lelog egy fel.
   .
   MERT hiba javitasa. A kartya szelessege fix 320 pixel volt, a sin szelessege
   viszont a kepernyotol fugg, tehat a ketto csak veletlenul jott ki egeszre.
   Merve a hoszton, minden szokasos szelessegen maradt egy csonka kartya:
   .
     1920 px -> 1600 pixeles sin, 4,76 kartya fer ki, tehat 260 pixeles csonk
     1440 px -> 1400 pixeles sin, 4,18 kartya
     1280 px -> 1240 pixeles sin, 3,71 kartya
     1100 px -> 1060 pixeles sin, 3,18 kartya
      900 px ->  860 pixeles sin, 2,59 kartya
   .
   A megbizo pont ezt jelezte: a jobb szelso elem kilog. Egy erintokepernyos
   sinnel a kilogo darab hasznos jelzes ("huzz meg"), egy asztali carouselnel
   viszont, ahol nyilak es lapozopontok is vannak, hibanak latszik.
   .
   A MEGOLDAS: A KARTYA SZELESSEGE A SINBOL SZAMOLODIK, nem forditva. A hasabok
   szama breakpointonkent adott, a szelesseg ebbol jon ki, tehat DEFINICIO
   SZERINT egesz szamu kartya fer ki. Ugyanez a keplet all a markacsikon
   (blocks/brands/brands.css), tehat nem uj minta a temaban.
   .
   A HASABSZAMOK ugy vannak megvalasztva, hogy a kartya 229 es 354 pixel kozott
   maradjon: ennel keskenyebben a mennyiseg-lepteto es a "Kosarba" gomb egy
   sorban mar nem fer el, szelesebben pedig a kep uszik a kartyaban.
   .
   576 PIXEL ALATT MARAD A KILOGO DARAB, es ez szandekos: erintokepernyon az a
   jelzes mondja meg, hogy a sor huzhato, es ott sem nyil, sem lapozopont nem
   segit. Ezert kell a sajat szabaly, kulonben ez a specifikusabb szelektor a
   telefonos ertekre is ravinne a hasabszamot.
   .
   A HERO ES A MARKACSIK NEM ERINTETT: mind a ketto sajat grid-auto-columns
   erteket ad (hero.css, brands.css), es ez a szabaly kifejezetten a
   `ul.products` sinre szol.
   -------------------------------------------------------------------------- */
ul.products.carousel__track {
	--cols: 5;
	grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gutter)) / var(--cols));
}
@media (max-width: 1479px) {
	ul.products.carousel__track {
		--cols: 4;
	}
}
@media (max-width: 1099px) {
	ul.products.carousel__track {
		--cols: 3;
	}
}
@media (max-width: 767px) {
	ul.products.carousel__track {
		--cols: 2;
	}
}
@media (max-width: 575px) {
	ul.products.carousel__track {
		grid-auto-columns: min(78%, 300px);
	}
}
.carousel__count,
.carousel__dots {
	display: none;
}
/* A SZAMLALO EGY SORBAN MARAD.
   .
   MERT hiba javitasa, telefonon: a .sect__head flex-sorban a cim ket-harom
   sorba tordelt, es a maradek helyen a szamlalo is megtort, tehat a "3 / 17"
   ket sorban jelent meg ("3 /" alatta "17"). A flex-elem alapertelmezesben
   zsugorodhat a tartalma ala, ezert nem eleg a nowrap: a `flex-shrink: 0` es
   a `flex-basis: auto` par kell hozza, hogy a szamlalo a SAJAT szelesseget
   megtartsa, es a tordeles a cimen tortenjen. Asztali nezetben a szamlalo a
   racs harmadik hasabjaban all, ott ez a szabaly nem valtoztat semmit. */
.carousel[data-ready="true"] .carousel__count {
	display: block;
	flex: 0 0 auto;
	margin: 0;
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.carousel[data-ready="true"] .carousel__dots {
	display: flex;
	justify-content: center;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
}
.carousel[data-ready="true"] .carousel__dots[hidden] {
	display: none;
}
.carousel__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--r-full);
	color: var(--c-line);
}
.carousel__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--r-full);
	background: currentColor;
}
.carousel__dot[aria-current="true"] {
	color: var(--c-primary);
}
@media (pointer: coarse) {
	.carousel__dot {
		width: 44px;
		height: 44px;
	}
}
.blk-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.blk-img--contain {
	object-fit: contain;
}