/**
 * Bočný panel s košíkom (drawer v hlavičke).
 *
 * Zobrazenie položiek, setov a služieb je zdieľané s pokladňou a stránkou
 * košíka (assets/css/item-lines.css) — tu sa nastavuje len mierka.
 *
 * Panel má okolo 470 px obsahu: menej než stránka košíka (635 px), viac než
 * súhrn v pokladni. Mierka je preto medzi nimi.
 *
 * @package egne
 */

/*
 * Obal je pre rozloženie neviditeľný.
 *
 * Zoznam položiek scrolluje sám (`ul.custom-mini-cart` má overflow-y: auto)
 * a výšku dostáva tým, že je flex položkou .widget_shopping_cart_content.
 * Obyčajný <div> medzi nimi ten reťazec preruší: zoznam stratí obmedzenie
 * výšky, prestane scrollovať a pretečie cez riadok s medzisúčtom.
 *
 * display: contents obal z rozloženia odstráni, ale premenné aj selektory
 * ostávajú v platnosti — dedia sa cezeň bez zmeny.
 */
.mini-cart-items.egne-items {
	display: contents;

	--egne-item-name-lg: 1.0625rem;      /* názov produktu / setu — 17px */
	--egne-item-name: 1.0625rem;
	--egne-item-price: 0.9375rem;        /* 15px */
	--egne-item-attr: 0.8125rem;         /* 13px */
	--egne-item-thumb: 5.5rem;           /* 88px */
	--egne-item-gap: 1rem;               /* 16px */
	--egne-item-child-name: 0.875rem;    /* kus setu — 14px */
	--egne-item-child-price: 0.8125rem;  /* 13px */
	--egne-item-row-gap: 1.75rem;        /* odstup medzi produktami — 28px */

	/* Miesto vpravo pre kôš, rovnaký princíp ako v košíku. */
	--egne-mini-remove-col: 2rem;
	/* Výška prvého riadka — podľa nej sa kôš zvisle centruje na cenu. */
	--egne-mini-firstline: calc(var(--egne-item-name-lg) * 1.3);
}

/*
 * Názvy bez verzáliek, rovnako ako na stránke košíka. V paneli širokom 470 px
 * by „SVADOBNÉ OBRÚČKY EMMALYN“ verzálkami zabralo dva riadky.
 */
.mini-cart-items.egne-items .mini-cart-product-name {
	text-transform: none;
	letter-spacing: normal;
}

/*
 * Kôš patrí k cene, nie pod ňu. V šablóne je prvým dieťaťom textového stĺpca
 * (flex column), takže by mu padol do vlastného riadka — vyberáme ho z toku
 * a kotvíme stredom na stred prvého riadka. Miesto mu drží padding stĺpca,
 * vďaka čomu leží pravá zvislica cien VĽAVO od koša.
 */
.mini-cart-items.egne-items .mini-cart-item-content {
	position: relative;
	padding-right: var(--egne-mini-remove-col);
}

.mini-cart-items.egne-items .egne-co-bundle-child .mini-cart-item-content {
	padding-right: 0;
}

.mini-cart-items.egne-items a.remove {
	position: absolute;
	top: calc(var(--egne-mini-firstline) / 2);
	right: 0;
	transform: translateY(-50%);
}

/*
 * Medzera medzi náhľadom a textom musí byť rovnaká na všetkých šírkach —
 * mini-cart-services.css ju pod 767 px zužuje na 0.875rem.
 */
.mini-cart-items.egne-items .mini-cart-item-main {
	gap: var(--egne-item-gap);
}

/* Názov sa musí vedieť zúžiť, inak cena pretečie za pravý okraj. */
.mini-cart-items.egne-items .mini-cart-header {
	min-width: 0;
}

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

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

/*
 * Vypisuje sa len keď je v košíku platená služba (woocommerce/cart/mini-cart.php).
 *
 * Písmo si riadky berú z tried medzisúčtu, ktoré nesú v šablóne — tu sa
 * nastavuje len odsadenie a odstupy, aby sa rozpis čítal ako podriadený
 * medzisúčtu, nie ako ďalšia položka.
 */
.mini-cart-split {
	/*
	 * Jemná linka oddeľuje rozpis od medzisúčtu — v paneli bez nej splývali
	 * tri riadky do jedného bloku a medzisúčet strácal postavenie súčtu.
	 * Rovnaký tón ako ostatné deliace linky v košíku a v pokladni.
	 *
	 * Odsadenia sú polovičné voči rozostupu riadkov, takže linka leží presne
	 * v strede medzery medzi DOPLNKOVÝMI SLUŽBAMI a MEDZISÚČTOM a všetky tri
	 * riadky majú rovnaký rytmus. Blok je nižšie ako býval preto, že súčtová
	 * pätička je ukotvená dole — čím je rozpis tesnejší, tým bližšie
	 * k medzisúčtu sadne.
	 */
	padding-bottom: 8px;
	border-bottom: 1px solid var(--egne-co-line, rgba(23, 23, 23, 0.14));
}

/*
 * Bez `margin: 0` — bootstrapovský .row má záporné okraje o polovicu
 * mriežky (6 px) a stĺpce ich vracajú paddingom. Vynulovaním sa rozpis
 * posunul o tých 6 px dovnútra a nesedel na zvislicu medzisúčtu.
 */

.mini-cart-split__label,
.mini-cart-split__value {
	margin: 0;
}

/*
 * Rozostup medzi TOVAROM a DOPLNKOVÝMI SLUŽBAMI. Tesnejší než medzera
 * k medzisúčtu — sú to dve časti jednej sumy, takže majú držať spolu
 * a až linka pod nimi ich oddeľuje od súčtu.
 */
.mini-cart-split__row + .mini-cart-split__row {
	padding-top: 6px;
}

.mini-cart-split__value {
	text-align: right;
}

/* Druhá polovica medzery okolo linky — dokopy rovnaká ako medzi riadkami. */
.mini-cart-split + .row.py-16 {
	padding-top: 8px !important;
}

/* --- Horná linka pätičky --- */

/*
 * Téma dáva súčtovej pätičke `border-top`. Na mobile má zmysel: zoznam
 * položiek pod ňou podlieza a linka označí, kde panel končí a začínajú
 * súčty. Na desktope je panel vysoký, zoznam málokedy siaha až k pätičke
 * a linka tam potom visí nad prázdnom ako zbytočný predel.
 */
@media (min-width: 992px) {
	.mini-shopping-card-subtotal-box {
		border-top: 0;
	}
}

/*
 * 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.
 */
.mini-cart-items.egne-items--stacked .mini-cart-item-inner > .egne-co-bundle-children,
.mini-cart-items.egne-items--stacked .mini-cart-item-inner > .mini-cart-service-lines {
	padding-right: var(--egne-mini-remove-col);
}