/**
 * Košík.
 *
 * Zobrazenie položiek, setov a služieb je zdieľané s pokladňou
 * (assets/css/item-lines.css) — tu sa nastavuje len mierka a to, čo je
 * na košíku vlastné: rozloženie stránky a pravý súhrn.
 *
 * Prečo väčšia mierka než v pokladni: tam je súhrn sprievodný obsah vedľa
 * formulára, tu je produkt hlavný obsah stránky.
 *
 * @package egne
 */

/* --- Mierka zdieľaného zobrazenia položiek --- */

.cart-items.egne-items {
	--egne-item-name-lg: 1.1875rem;   /* názov produktu / setu — 19px */
	--egne-item-name: 1.1875rem;
	--egne-item-price: 1rem;          /* 16px */
	--egne-item-attr: 0.8125rem;      /* 13px */
	--egne-item-thumb: 7.75rem;       /* 124px */
	--egne-item-gap: 1.25rem;         /* 20px medzi náhľadom a textom */
	--egne-item-child-name: 0.90625rem;  /* kus setu — 14.5px */
	--egne-item-child-price: 0.8125rem;  /* 13px */
	--egne-item-row-gap: 2.75rem;        /* odstup medzi produktami — 44px */

	/*
	 * Miesto vyhradené vpravo pre kôš. Kôš je umiestnený absolútne (nižšie),
	 * takže by inak prekryl cenu; tento padding mu drží stĺpec.
	 */
	--egne-cart-remove-col: 2.25rem;

	/* Výška prvého riadka položky (názov). Slúži na zvislé zarovnanie koša. */
	--egne-cart-firstline: calc(var(--egne-item-name-lg) * 1.3);
}

/*
 * Názvy bez verzáliek. Téma ich dáva cez .mini-cart-product-name v screen.min.css
 * a v košíku pôsobili pri dlhých názvoch typu „SVADOBNÉ OBRÚČKY EMMALYN“ ťažko.
 * Verzálky si stránka necháva tam, kde majú váhu — v badge a v nadpisoch.
 */
.cart-items.egne-items .mini-cart-product-name {
	text-transform: none;
	letter-spacing: normal;
}

/* --- Rozloženie stránky --- */

/*
 * Hero pruh je zrušený (kosik.php), takže obsah začína hneď pod hlavičkou
 * a potrebuje vlastný odstup zhora.
 */
.cart-container {
	padding-top: 2.5rem;
}

@media (max-width: 991px) {
	.cart-container { padding-top: 1.5rem; }
}

/* --- Pravý súhrn --- */

/*
 * Lepivosť súhrnu.
 *
 * screen.min.css lepí súhrn nepodmienene cez `.cart-container .cart-summary`
 * (position: sticky; top: 120px) — na každej šírke a bez ohľadu na to, či sa
 * do okna vôbec zmestí. Preto sú selektory nižšie rovnako alebo viac
 * špecifické; s jednoduchým `.cart-summary` by sme prehrali.
 *
 * Výška fixnej hlavičky je rovnaká konštanta ako v pokladni (57 px). Držíme ju
 * tu preto, aby lepiaci bod sedel s meraním v cart.js, ktoré výšku hlavičky
 * číta z DOM — inak by súhrn o tých pár pixelov presiahol okno.
 */
.cart-container {
	--egne-cart-header-h: 3.5625rem;
}

@media (max-width: 991px) {
	/* Pod breakpointom je súhrn pod zoznamom — lepiť ho nemá čo. */
	.cart-container .cart-summary {
		position: static;
	}
}

@media (min-width: 992px) {
	.cart-container .cart-summary {
		position: sticky;
		top: calc(var(--egne-cart-header-h) + 1.5rem);
		align-self: start;
	}
}

/*
 * Súhrn vyšší než okno má spodok natrvalo pod hranou obrazovky. Vtedy mu
 * cart.js dá .is-loose a lepenie sa vypne — scrolluje so stránkou ako bežný
 * obsah. Vnútorné scrollovanie by bola druhá posuvná plocha vedľa stránkovej.
 */
.cart-container .cart-summary.is-loose {
	position: static;
}

/*
 * Doprava je v košíku len údaj, nie voľba. Výber spôsobu dopravy aj kalkulačka
 * s krajinou a PSČ sú v pokladni, ktorá sa na to spýta znova — WooCommerce to
 * sám priznáva hláškou „Možnosti dopravy budú aktualizované v pokladni“.
 *
 * Skrývame CSS-om a nie odvesením hooku zámerne: WooCommerce z tých istých
 * uzlov počíta súčty a fragmenty, takže vyhodiť ich z DOM je krehkejšie.
 */
/*
 * Poznámka k doprave patrí pod sumu, nie za ňu — jadro <small> nechá v riadku
 * a „Zdarma Spôsob dopravy vyberiete v pokladni.“ splývalo do jednej vety.
 */
.cart-summary .cart-shipping-note {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--egne-co-muted, #474747);
}

.cart-summary .woocommerce-shipping-methods,
.cart-summary .shipping-calculator-button,
.cart-summary .shipping-calculator-form,
.cart-summary .woocommerce-shipping-destination {
	display: none !important;
}

/* --- Kôš --- */

/*
 * Kôš patrí k cene, nie pod ňu.
 *
 * V šablóne je prvým dieťaťom textového stĺpca, ktorý je flex column — kôš tak
 * sadol do vlastného riadku pod cenu. Vyberáme ho preto z toku a kotvíme
 * k pravému hornému rohu stĺpca, do výšky prvého riadka s názvom a cenou.
 *
 * Miesto mu drží padding-right stĺpca. Vďaka tomu je pravá zvislica ceny setu
 * aj cien jeho kusov spoločná a leží VĽAVO od koša — ceny sa teda zarovnávajú
 * pod cenu, nie pod kôš.
 */
.cart-items.egne-items .mini-cart-item-content {
	position: relative;
	padding-right: var(--egne-cart-remove-col);
}

/*
 * Kôš má okolo ikony 10 px paddingu, takže jeho box je 40 px vysoký, kým cena
 * má 21. Zarovnaním hornej hrany vznikol rozdiel stredov 9 px a kôš pôsobil
 * posunuto nadol.
 *
 * Kotvíme ho preto stredom na stred prvého riadka: top ide do jeho polovice
 * a translateY(-50%) box dotiahne. Padding tým ostáva nedotknutý, takže sa
 * nezmenšuje plocha na kliknutie.
 */
.cart-items.egne-items a.remove {
	position: absolute;
	top: calc(var(--egne-cart-firstline) / 2);
	right: 0;
	transform: translateY(-50%);
}

/*
 * Kusy setu sú vnorené v tom istom stĺpci, ale kôš nemajú — miesto preň by
 * im len zúžilo riadok, tak im ho vrátime.
 */
.cart-items.egne-items .egne-co-bundle-child .mini-cart-item-content {
	padding-right: 0;
}

/*
 * Názov sa musí vedieť zúžiť.
 *
 * Hlavička je flex so `space-between`; keď sa názov a cena nezmestia, flex ich
 * neskráti (východiskové min-width: auto) a cena pretečie za pravý okraj —
 * na 375 px to bolo 6 px, takže cena setu nesedela na zvislicu cien jeho kusov.
 */
.cart-items.egne-items .mini-cart-header {
	min-width: 0;
}

.cart-items.egne-items .mini-cart-header .mini-cart-product-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

/*
 * Na úzkom displeji je náhľad 124 px príliš — na textový stĺpec zostávalo
 * 168 px na názov, cenu aj miesto pre kôš.
 */
@media (max-width: 575px) {
	.cart-items.egne-items {
		--egne-item-thumb: 5.5rem;        /* 88px */
		--egne-item-name-lg: 1.0625rem;   /* 17px */
		--egne-item-name: 1.0625rem;
		--egne-item-row-gap: 2rem;
	}
}

/*
 * Služby samostatného produktu.
 *
 * Šablóna ich pri sete vypisuje vnútri textového stĺpca, ale pri samostatnom
 * produkte ako súrodenca .mini-cart-item-main — teda pod celým riadkom, ktorý
 * je vysoký ako náhľad. Presúva ich do stĺpca inlineServiceLines() v cart.js;
 * odsadenie zľava aj sprava tým rieši samotný stĺpec a netreba ho tu
 * dopočítavať z náhľadu a medzery.
 */

/*
 * Medzera medzi náhľadom a textom musí byť na všetkých šírkach tá istá, inak
 * odsadenie služieb vyššie nesedí — počíta sa z nej.
 *
 * mini-cart-services.css ju pod 767 px zužuje na 0.875rem, takže stĺpec bol
 * v skutočnosti 88 + 14 px, kým padding počítal s 88 + 20. Služby tak boli
 * na mobile o 6 px vedľa názvu.
 */
.cart-items.egne-items .mini-cart-item-main {
	gap: var(--egne-item-gap);
}


/* --- Nadpis stránky --- */

/*
 * Jemný nadpis vľavo na mriežke zoznamu. Hero pás je zrušený, ale stránka
 * nemá začínať bez pomenovania — a vycentrovaný veľký nadpis bol práve to,
 * čo zaberalo tretinu obrazovky.
 */
.cart-page-title {
	/*
	 * .cart-container je grid s dvoma stĺpcami (zoznam | súhrn). Bez tohto by
	 * nadpis zabral prvú bunku, zoznam by sa presunul do úzkeho pravého stĺpca
	 * a súhrn by spadol pod neho.
	 *
	 * Zvislý odstup pod nadpisom drží row-gap mriežky (30 px), preto tu
	 * margin-bottom nie je.
	 */
	grid-column: 1 / -1;
	margin: 0;
	font-family: 'ivyora-display', serif;
	/*
	 * clamp() drží nadpis čitateľný na mobile a nechá ho vyrásť na desktope
	 * bez ďalšieho breakpointu: 1.375rem na úzkom displeji, 2.125rem od zhruba
	 * 1200 px. Stredná hodnota je viazaná na šírku okna, takže sa medzi tým
	 * plynule zmenšuje.
	 */
	font-size: clamp(1.375rem, 1rem + 1.6vw, 2.125rem);
	/* Najjemnejší rez, ktorý má ivyora-display načítaný — rovnaký ako nadpisy
	   sekcií v pokladni. Overené, že ide o skutočný rez, nie o dopočet. */
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	/*
	 * Jemná linka pod nadpisom. Uzatvára hlavičku stránky a opakuje ten istý
	 * tón, akým sú oddelené riadky v súhrne vpravo.
	 *
	 * Ide cez celú šírku okna, nie len po okraje kontajnera — kreslí ju preto
	 * ::after so 100vw a stredovým ukotvením, nie border-bottom. Presah cez
	 * kontajner nespôsobí vodorovné rolovanie, sekcia košíka má overflow-x:
	 * clip (page-templates/kosik.php).
	 */
	position: relative;
	padding-bottom: 1.25rem;
	color: var(--egne-co-ink, #171717);
}

.cart-page-title::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 100vw;
	transform: translateX(-50%);
	border-bottom: 1px solid var(--egne-co-line, rgba(23, 23, 23, 0.14));
}

/* --- Kupón --- */

/*
 * Pôvodný box mal hornú linku a nadpis „Kupón“ natrvalo nad otvoreným poľom.
 * Nahradil ho prepínač, takže linka aj nadpis odpadli spolu s ním.
 */
.cart-container .cart-summary .cart-summary-inner-box {
	border-top: 0;
}

.cart-coupon {
	margin: 0 0 1.5rem;
}

.cart-coupon__toggle {
	padding: 0;
	border: 0;
	background: none;
	color: var(--egne-co-accent, #f3702b);
	font-family: 'neue-haas-unica', sans-serif;
	font-size: 0.8125rem;
	text-decoration: underline;
	cursor: pointer;
}

.cart-coupon__panel[hidden] {
	display: none;
}

/*
 * Pole a tlačidlo vedľa seba, rovnaké remeslo ako .egne-co-coupon v pokladni.
 *
 * Selektory sú zámerne dlhšie, než by sa zdalo potrebné — téma má na formulári
 * kupónu silné pravidlá a s kratšími sme prehrávali:
 *
 *   vstup:    input:not(…):not(…):not(…)                        → 0,3,1
 *   tlačidlo: form.woocommerce-form-coupon .coupon button[type] → 0,3,2
 *
 * Pravidlo témy vstupu má border-radius: 0 !important a rámik len zdola, takže
 * pole vyzeralo ako podčiarknutý riadok; tlačidlo sa scvrklo na 40 px so šípkou
 * namiesto slova „Použiť“.
 */
.cart-container .cart-coupon .coupon {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.cart-container .cart-summary .cart-coupon input.input-text {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	height: auto !important;
	padding: 0.8125rem 0.875rem !important;
	font-size: 0.875rem !important;
	line-height: 1.2 !important;
	color: var(--egne-co-ink, #171717) !important;
	border: 1px solid var(--egne-co-line, rgba(23, 23, 23, 0.14)) !important;
	border-radius: var(--egne-co-radius, 6px) !important;
	background: #fff !important;
}

.cart-container .cart-summary .cart-coupon input.input-text::placeholder {
	color: var(--egne-co-muted, #474747) !important;
	font-size: 0.875rem !important;
}

.cart-container .cart-summary .cart-coupon input.input-text:focus {
	outline: 2px solid var(--egne-co-accent, #f3702b);
	outline-offset: -2px;
	border-color: var(--egne-co-accent, #f3702b) !important;
}

.cart-container .cart-coupon form.woocommerce-form-coupon .coupon button[type='submit'] {
	flex: 0 0 auto;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	padding: 0.8125rem 1.25rem !important;
	border: 1px solid var(--egne-co-line, rgba(23, 23, 23, 0.14)) !important;
	border-radius: var(--egne-co-radius, 6px) !important;
	background: #fff !important;
	color: var(--egne-co-ink, #171717) !important;
	font-family: 'neue-haas-unica', sans-serif !important;
	font-size: 0.875rem !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-indent: 0 !important;
	cursor: pointer;
}

.cart-container .cart-coupon form.woocommerce-form-coupon .coupon button[type='submit']:hover {
	border-color: var(--egne-co-ink, #171717) !important;
}

/* --- DPH pod nadpisom „Cena spolu“ --- */

/*
 * Stĺpec s nadpismi mal 119 px, kým poznámka o DPH potrebuje ~150, takže sa
 * lámala uprostred sumy („2066,06 € / DPH)“). Súčtová tabuľka má 404 px,
 * polovica stačí nadpisu aj poznámke a na sumu vpravo zostane dosť.
 */
.cart_totals .order-total th {
	width: 50%;
}

.cart_totals .order-total th .cart-total-tax {
	display: block;
	white-space: nowrap;
	margin-top: 0.125rem;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--egne-co-muted, #474747);
}

/* To isté číslo je už vľavo pod nadpisom. */
.cart_totals .order-total td small.includes_tax {
	display: none;
}

/*
 * Kupón cez celú šírku súhrnu.
 *
 * screen.min.css dáva formuláru kupónu `width: 70% !important`, takže pole
 * s tlačidlom končilo v dvoch tretinách stĺpca a vpravo zostávala diera.
 */
.cart-container .cart-summary .cart-coupon form.woocommerce-form-coupon {
	width: 100% !important;
}

/*
 * Doprava sa zarovnáva vpravo ako ostatné hodnoty v súčtoch. Jadro jej bunku
 * necháva vľavo, takže „Zdarma“ ako jediná hodnota v tabuľke visela naľavo,
 * kým medzisúčet aj cena spolu boli vpravo.
 */
.cart_totals .woocommerce-shipping-totals td {
	text-align: right;
}

/*
 * Súčty až k pravému okraju.
 *
 * Bunky súčtovej tabuľky majú z témy `margin: 0 15px 0 0` (tabuľka je tam
 * prerobená na flex), takže sumy končili 15 px pred deliacimi linkami.
 */
.cart-container .cart_totals tr > th,
.cart-container .cart_totals tr > td {
	margin-right: 0;
}

/* --- Rozpis medzisúčtu: tovar / doplnkové služby --- */

/*
 * Rovnaký rozpis ako v pokladni (assets/css/checkout.css). Súčtová tabuľka
 * je tu témou prerobená na flex, preto sa odsadenie dáva bunke nadpisu
 * a nie riadku.
 */
/*
 * Rovnaké písmo ako riadok medzisúčtu: 13 px, hrúbka 400, verzálky, čierna.
 * Nededí sa — verzálky aj veľkosť dáva medzisúčtu vlastné pravidlo na triede
 * .cart-subtotal, takže bez tohto bloku by riadky spadli na 14 px/500 z témy
 * a rozpis by vedľa MEDZISÚČTU vyzeral ako iný typ riadku.
 */
.cart_totals .egne-price-split th,
.cart_totals .egne-price-split td {
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: uppercase;
	color: #000;
}


/*
 * Riadky súčtov si poradie neurčujú DOM-om, ale flex `order` (téma:
 * doprava 1, medzisúčet 3, cena spolu 4). Bez rovnakého `order` ako
 * medzisúčet by rozpis odletel na začiatok tabuľky, nad dopravu. Pri
 * zhodnom `order` rozhoduje DOM — a tam je rozpis tesne pred medzisúčtom.
 */
.cart_totals .egne-price-split {
	order: 3;
}

/*
 * Bez odsadenia — rozpis stojí na tej istej zvislici ako MEDZISÚČET
 * a CENA SPOLU, aby stĺpec nadpisov nemal zúbky. Nadpis sa nesmie lámať,
 * „Doplnkové služby“ by inak zabralo dva riadky.
 */
.cart_totals .egne-price-split th {
	white-space: nowrap;
}

/*
 * Doprava, rozpis a medzisúčet majú jeden spoločný rytmus.
 *
 * Téma dáva každému riadku `padding: 16px 0`, ale rozpis sa do nej dostal
 * s vlastnými hodnotami, takže štyri riadky nad sebou mali tri rôzne
 * rozostupy. Zrovnávame ich na 10 px hore aj dole — teda 20 px medzi
 * ktorýmikoľvek dvoma susedmi.
 */
.cart_totals .woocommerce-shipping-totals,
.cart_totals .egne-price-split,
.cart_totals .cart-subtotal {
	margin: 0;
	padding-top: 10px;
	padding-bottom: 10px;
}

/*
 * Linka pod dopravou. Medzisúčet svoju (border-top) dostáva od témy, takže
 * rozpis stojí medzi dvoma linkami a číta sa ako to, čo medzisúčet rozpisuje.
 */
.cart_totals .egne-price-split--products {
	border-top: 1px solid var(--egne-co-line, rgba(23, 23, 23, 0.14));
}

/*
 * Tovar a doplnkové služby sú dve časti jednej sumy — medzi sebou majú
 * tesnejšie než k susedom nad a pod linkami (8 px oproti 20 px).
 */
.cart_totals .egne-price-split--products {
	padding-bottom: 4px;
}

.cart_totals .egne-price-split--services {
	padding-top: 4px;
}

/*
 * Cena spolu je záver, nie ďalší riadok v rade — dostáva výraznejší odstup
 * zhora, aby sa od bloku medzisúčtu odlepila.
 */
.cart_totals .order-total {
	padding-top: 28px;
}

.cart_totals .egne-price-split td {
	margin-left: auto;
	text-align: right;
}

/*
 * V úzkom zobrazení sa kusy setu a služby odlepujú pod náhľad na plnú šírku
 * (item-lines.js). Vpravo ale musia skončiť tam, kde končí cena — miesto pre
 * kôš im v stĺpci držal jeho padding, a ten po presune do .mini-cart-item-inner
 * neplatí. Bez tohto by riadky prebehli popod ikonu koša.
 */
.cart-items.egne-items--stacked .mini-cart-item-inner > .egne-co-bundle-children,
.cart-items.egne-items--stacked .mini-cart-item-inner > .mini-cart-service-lines {
	padding-right: var(--egne-cart-remove-col);
}