/*
 * Tolarie — kosik. Vzor: Portaro apps/tolarie-eshop (design/extracted).
 *
 * Zdroje: 11-cart-search-shared.css (kosik), 12-checkout-account-about.css
 * (pokladna), 13-order-confirm.css (potvrzeni). Tlacitka, chipy a nadpisy
 * se neopisuji - jsou v tolarie-komponenty.css.
 *
 * Selektory jsou zanorene pod .cartpage / .co / .ty, protoze tolarie-brand.css
 * se nacita az za timhle souborem a na holy element by prebil.
 */

/* --- napojeni na layout -------------------------------------------------
 * Sablony nechavaji `page_headline` prazdny (nadpis patri az za krokovnik)
 * a single_col_layout.html prazdny .info__title skryva. Sirku i odsazeni
 * stranky uz drzi .info--siroky, takze uvnitr nej nesmi pribyt dalsi.
 */
.info__body > .cartpage,
.info__body > .co,
.info__body > .ty {
	margin: 0;
	padding: 0;
	/* .info__body je flex column - auto okraje by zrusily roztazeni */
	width: 100%;
	max-width: none;
	color: var(--fg);
	font-family: var(--f-body);
}

/* basic.css odsazuje nadpisy zespodu a brand.css kresli `aside h3` jako
 * nadpis pravého sloupce - plocha a zlata linka vlevo. */
.cartpage h1, .cartpage h2, .cartpage h3,
.co h1, .co h2, .co h3,
.ty h1, .ty h2, .ty h3 {
	padding: 0;
	background: none;
	border-left: 0;
}

/* Ikona v tlacitku nema vlastni rozmer, bez toho se roztahne na celou plochu. */
.cartpage .btn svg,
.co .btn svg,
.ty .btn svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}


/* ============================================================
   KOSIK
   ============================================================ */

.cartpage__head {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--bg-rule);
	margin-bottom: 28px;
}

/* Predloha ma verzalky jen na kosiku, pokladna i podekovani jsou v minuskach. */
.cartpage__title {
	font-size: 40px;
	margin: 10px 0 0;
	color: var(--fg);
	text-transform: uppercase;
}

/* --- krokovnik --------------------------------------------------------- */

.cartpage__steps {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
}

.step {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--f-display);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-mute);
}

.step strong {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-elev);
	border: 1px solid var(--bg-rule);
	border-radius: 50%;
	font-family: var(--f-mono);
	font-size: 11px;
	color: var(--fg-mute);
}

.step.is-current {
	color: var(--fg);
}

.step.is-current strong {
	background: var(--accent);
	border-color: var(--accent-deep);
	color: var(--accent-ink);
}

.step__sep {
	width: 40px;
	height: 1px;
	background: var(--bg-rule);
}

/* --- rozvrzeni --------------------------------------------------------- */

.cartpage__grid {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 32px;
	align-items: flex-start;
}

.cartpage__items {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

.cartpage__group {
	display: flex;
	flex-direction: column;
}

/* Prebiji header.css, ktery styluje <header> jako hlavicku webu. */
.cartpage__group > header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 10px;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	z-index: auto;
}

.cartpage__group .h-section {
	margin: 0;
	font-size: 15px;
}

/* --- polozka ----------------------------------------------------------- */

.citem {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 18px;
	padding: 18px 0;
	border-bottom: 1px solid var(--bg-rule);
}

.citem:last-child {
	border-bottom: 0;
}

.citem__art {
	position: relative;
	aspect-ratio: 63 / 88;
	border-radius: var(--r-1);
	overflow: hidden;
	background: var(--bg-sunk);
}

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

.citem__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.citem__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
}

.citem__brand {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--accent-deep);
	text-transform: uppercase;
}

.citem__name {
	font-family: var(--f-body);
	font-weight: 600;
	font-size: 17px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--fg);
	margin: 4px 0 8px;
	line-height: 1.25;
}

.citem__name a,
.citem__name a:visited {
	color: var(--fg);
}

.citem__name a:hover {
	color: var(--accent-deep);
}

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

.citem__rmv {
	display: flex;
	gap: 4px;
	flex: 0 0 auto;
}

.iconbtn,
.iconbtn:visited {
	width: 32px;
	height: 32px;
	background: transparent;
	border: 1px solid var(--bg-rule);
	border-radius: var(--r-1);
	color: var(--fg-mute);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.iconbtn svg {
	width: 16px;
	height: 16px;
}

.iconbtn--del:hover {
	color: var(--bad);
	border-color: var(--bad);
}

.citem__bot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.citem__price {
	text-align: right;
}

.citem__price strong {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 19px;
	color: var(--accent-deep);
	display: block;
}

.citem__price span {
	font-family: var(--f-mono);
	font-size: 11px;
}

/* --- pocitadlo mnozstvi ------------------------------------------------ */

.cdrow__qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--bg-rule);
	border-radius: var(--r-1);
	overflow: hidden;
	background: var(--bg-elev);
}

.cdrow__qty .qty-btn {
	width: 34px;
	height: 36px;
	padding: 0;
	background: var(--bg-elev);
	border: 0;
	color: var(--fg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}

.cdrow__qty .qty-btn svg {
	width: 12px;
	height: 12px;
}

.cdrow__qty .qty-btn:hover {
	background: var(--bg-sunk);
	color: var(--accent-deep);
}

.cdrow__qty input[type="number"],
.cdrow__qty input.number {
	width: 52px;
	height: 36px;
	margin: 0;
	padding: 0;
	text-align: center;
	border: 0;
	border-left: 1px solid var(--bg-rule);
	border-right: 1px solid var(--bg-rule);
	border-radius: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: 14px;
	outline: 0;
	-moz-appearance: textfield;
}

.cdrow__qty input::-webkit-outer-spin-button,
.cdrow__qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Popisek pro incrementing.js, ktery rozlisuje tlacitka podle textu. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- souhrn ------------------------------------------------------------ */

.csumm {
	background: var(--bg-elev);
	border: 1px solid var(--bg-rule);
	border-radius: var(--r-2);
	padding: 24px 22px;
	/* Predloha ma top:140px podle sve hlavicky; nase .tb-header je sticky
	   a vysoka 224 px, stejne jako u filtru kusovek. */
	position: sticky;
	top: 240px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.csumm .h-section {
	margin: 0 0 4px;
	font-size: 14px;
}

.csumm__rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.csumm__rows > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 14px;
}

.csumm__rows > div > span {
	color: var(--fg-mute);
}

.csumm__rows > div > strong {
	font-family: var(--f-body);
	font-weight: 600;
	color: var(--fg);
}

.csumm__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--bg-rule);
}

.csumm__total span {
	font-family: var(--f-display);
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fg);
}

.csumm__total strong {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 28px;
	color: var(--accent-deep);
	white-space: nowrap;
}

/* Upozorneni na minimalni hodnotu objednavky; tlacitko "Pokracovat" je
   v tu chvili skryte, takze musi byt jasne proc. */
.csumm__min {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--warn);
	border-radius: var(--r-2);
	background: var(--bg-sunk);
	color: var(--warn);
	font-size: 14px;
	line-height: 1.45;
}

.csumm__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.csumm__perks {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
}

.csumm__perks li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--fg-mute);
	list-style: none;
}

.csumm__pay {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 8px;
	border-top: 1px dashed var(--bg-rule);
}

.csumm__pay-icons {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.paychip {
	padding: 4px 8px;
	background: var(--bg);
	border: 1px solid var(--bg-rule);
	border-radius: var(--r-1);
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	color: var(--fg-mute);
}

/* --- prazdny kosik ----------------------------------------------------- */

.cartpage__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 60px 24px;
	border: 1px dashed var(--bg-rule);
	border-radius: var(--r-2);
	text-align: center;
}

.cartpage__empty p {
	margin: 0;
	color: var(--fg-mute);
}


/* ============================================================
   POKLADNA
   ============================================================ */

.co__head {
	padding-bottom: 18px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--bg-rule);
}

.co__title {
	font-size: 38px;
	margin: 10px 0 0;
	color: var(--fg);
	text-transform: none;
}

.co__grid {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 32px;
	align-items: start;
}

.co__main {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.co-block {
	background: var(--bg-elev);
	border: 1px solid var(--bg-rule);
	border-radius: var(--r-2);
	padding: 22px 24px;
}

/* Chyby mimo konkretni pole (napr. zbozi, ktere mezitim dosly). */
.cartpage .errorlist,
.co .errorlist,
.ty .errorlist {
	margin: 0 0 16px;
	padding: 12px 14px;
	list-style: none;
	border: 1px solid var(--bad);
	border-radius: var(--r-1);
	background: rgba(139, 46, 46, 0.14);
	color: var(--fg);
	font-size: 13px;
}

.cartpage .errorlist li,
.co .errorlist li,
.ty .errorlist li {
	list-style: none;
}

.co-block__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 18px;
	color: var(--fg);
}

.co-step {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--f-mono);
	font-size: 13px;
}

/* --- formular jako tabulka ---------------------------------------------
 * Radky zustavaji <tr>: pickup-point.js si k radku doprava/zeme/vydejni
 * misto dojde od inputu nahoru pres rodice. Mrizku dela display: grid.
 */
/* Jedina definice .co-fields pro cely web - checkout i ucet. Byla napsana
   dvakrat, tady s mezerou 16 px a v tolarie-ucet.css se 14; ucet.css se
   nacita pozdeji, takze platilo 14. Tu hodnotu drzime dal. */
.co-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

/* Zanoreny cenik dopravy zustava tabulkou, proto vsude primi potomci. */
.co-fields > tbody {
	display: contents;
}

/* `min-width: 0` je nutne: polozka gridu si jinak stopu rozsiri na sirku
   svého obsahu, takze siroky radek (cenik dopravy) protahne celou stranku
   a jeho vlastni `overflow-x` se k slovu nedostane. */
.co-fields > tbody > tr {
	display: grid;
	align-content: start;
	gap: 6px;
	min-width: 0;
	border: 0;
}

.co-fields > tbody > tr > td {
	display: block;
	min-width: 0;
	padding: 0;
	border: 0;
	vertical-align: top;
}

.co-fields > tbody > tr > td.label label {
	display: block;
	font-family: var(--f-body);
	font-size: 12px;
	font-weight: 600;
	color: var(--fg-mute);
	letter-spacing: 0.02em;
}

.co-fields > tbody > tr > td.label label a {
	color: var(--accent-deep);
}

.co-req {
	color: var(--bad);
}

.co-fields > tbody > tr > td input[type="text"],
.co-fields > tbody > tr > td input[type="email"],
.co-fields > tbody > tr > td input[type="tel"],
.co-fields > tbody > tr > td input[type="number"],
.co-fields > tbody > tr > td select,
.co-fields > tbody > tr > td textarea {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	background: var(--bg);
	border: 1px solid var(--bg-rule);
	border-radius: var(--r-1);
	color: var(--fg);
	font-family: var(--f-body);
	font-size: 15px;
	outline: 0;
}

/* Prebiji `rows` na widgetu poznamky - deset radku je pres pul stranky. */
.co-fields > tbody > tr > td textarea {
	height: 110px;
	padding: 12px 14px;
	line-height: 1.5;
	resize: vertical;
}

.co-fields > tbody > tr > td input:focus,
.co-fields > tbody > tr > td select:focus,
.co-fields > tbody > tr > td textarea:focus {
	border-color: var(--accent);
}

/* Sirsi pole - jmeno, ulice, poznamka a vse, co ma vlastni tabulku. */
.co-fields > tbody > tr[data-field="name"],
.co-fields > tbody > tr[data-field="street"],
.co-fields > tbody > tr[data-field="note"],
.co-fields > tbody > tr.co-row--wide {
	grid-column: 1 / -1;
}

/* Telefon: predvolba a cislo v jednom poli. */
.co-fields .phone_group {
	display: flex;
	gap: 6px;
}

.co-fields .phone_group select {
	flex: 0 0 auto;
	width: auto;
	padding-right: 32px;
}

.co-fields .explanation {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--bad);
}

/* Podnadpis sekce uvnitr tabulky - samostatne karty by rozbily <table>. */
.co-fields > tbody > tr.co-sec {
	grid-column: 1 / -1;
	margin-top: 10px;
	padding-top: 20px;
	border-top: 1px solid var(--bg-rule);
}

.co-fields > tbody > tr.co-sec:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.co-fields > tbody > tr.co-sec .co-block__title {
	margin: 0;
}

/* --- souhlas s podminkami (predloha: .co-firma) ------------------------- */

.co-consent {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--bg-rule);
	border-radius: var(--r-1);
	font-size: 14px;
	color: var(--fg);
	cursor: pointer;
}

.co-consent:hover {
	border-color: var(--accent);
}

.co-consent a {
	color: var(--accent-deep);
}

.co-consent input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--accent);
	cursor: pointer;
}

/* --- cenik dopravy -----------------------------------------------------
 * Tabulku vykresluje server a pickup-point.js mezi nimi prepina, takze
 * zustava tabulkou; meni se jen vzhled bunky.
 */
.delivery_rates_wrap {
	overflow-x: auto;
}

.co table.delivery_rates {
	width: auto;
	border-collapse: separate;
	border-spacing: 8px;
	margin: 0 0 4px -8px;
}

.co table.delivery_rates th {
	padding: 0 6px 2px;
	border: 0;
	font-family: var(--f-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	color: var(--fg-mute);
}

.co table.delivery_rates tbody th {
	padding-right: 12px;
	font-family: var(--f-body);
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	text-align: right;
	vertical-align: middle;
	color: var(--fg-soft);
}

.co table.delivery_rates td {
	padding: 0;
	border: 0;
}

.co .rate_cell {
	display: block;
	min-width: 104px;
	padding: 11px 14px;
	border: 1px solid var(--bg-rule);
	border-radius: var(--r-1);
	background: var(--bg);
	text-align: center;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s;
}

.co .rate_cell:hover {
	border-color: var(--accent);
	background: var(--bg-elev);
}

.co .rate_cell input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
}

/* Na desktopu nese jmeno dopravce hlavicka sloupce, v bunce by se opakovalo.
   Zobrazi se az v uzkem zobrazeni, kde se tabulka rozpada na radky. */
.co .rate_cell .rate_carrier {
	display: none;
}

.co .rate_cell .rate_price {
	font-family: var(--f-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--fg-soft);
	white-space: nowrap;
}

/* .is_selected doplnuje pickup-point.js pro prohlizece bez :has(). */
.co .rate_cell.is_selected,
.co .rate_cell:has(input:checked) {
	border-color: var(--accent);
	background: rgba(201, 162, 74, 0.1);
}

.co .rate_cell.is_selected .rate_price,
.co .rate_cell:has(input:checked) .rate_price {
	color: var(--accent-deep);
}

.co .rate_cell_empty {
	display: block;
	padding: 11px 14px;
	text-align: center;
	color: var(--fg-faint);
}

/* --- vydejni misto ----------------------------------------------------- */

.pickup_point_selected:not(:empty) {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 10px;
	padding: 11px 13px;
	border: 1px solid var(--accent);
	border-radius: var(--r-1);
	background: rgba(201, 162, 74, 0.08);
	font-size: 13px;
	color: var(--fg-soft);
}

.pickup_point_selected strong {
	font-size: 13.5px;
	color: var(--fg);
}

/* --- souhrn objednavky ------------------------------------------------- */

.co-summ {
	position: sticky;
	top: 240px;
	background: var(--bg-elev);
	border: 1px solid var(--bg-rule);
	border-radius: var(--r-2);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.co-summ__title,
.ty-summ__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
	color: var(--fg);
}

.co-summ__items,
.ty-summ__items {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.co-summ__item,
.ty-summ__item {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	gap: 12px;
	align-items: center;
}

.co-summ__thumb,
.ty-summ__thumb {
	position: relative;
	width: 40px;
	aspect-ratio: 63 / 88;
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid var(--bg-rule);
	background: var(--bg-sunk);
}

.co-summ__thumb img,
.ty-summ__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.co-summ__info,
.ty-summ__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.co-summ__info strong,
.ty-summ__info strong {
	font-size: 13px;
	font-weight: 600;
	color: var(--fg);
	line-height: 1.2;
}

.co-summ__info span,
.ty-summ__info span {
	font-size: 11px;
	color: var(--fg-mute);
}

.co-summ__price,
.ty-summ__price {
	font-family: var(--f-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--fg);
	white-space: nowrap;
}

.co-summ__rows,
.ty-summ__rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-top: 1px solid var(--bg-rule);
	padding-top: 14px;
}

.co-summ__row,
.ty-summ__rows > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13.5px;
	color: var(--fg-mute);
}

.co-summ__row span:last-child,
.ty-summ__rows > div span:last-child {
	color: var(--fg);
	font-weight: 600;
}

.co-summ__total,
.ty-summ__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	border-top: 1px solid var(--bg-rule);
	padding-top: 14px;
}

.co-summ__total span,
.ty-summ__total span {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fg);
}

.co-summ__total strong,
.ty-summ__total strong {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 26px;
	color: var(--accent-deep);
	white-space: nowrap;
}

.co-summ__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.co-summ__note {
	margin: 0;
	font-size: 11px;
	color: var(--fg-faint);
	line-height: 1.5;
	text-align: center;
}

/* --- rekapitulace (krok 3) --------------------------------------------- */

.co-dl {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

.co-dl > div {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.co-dl dt {
	font-family: var(--f-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-faint);
}

.co-dl dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fg-soft);
}

.co-dl dd strong {
	color: var(--fg);
}

.co-recap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.co-items {
	display: flex;
	flex-direction: column;
}

.co-item {
	display: grid;
	grid-template-columns: 48px 1fr auto auto;
	gap: 16px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--bg-rule-soft);
}

.co-item:last-child {
	border-bottom: 0;
}

.co-item__thumb {
	position: relative;
	width: 48px;
	aspect-ratio: 63 / 88;
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid var(--bg-rule);
	background: var(--bg-sunk);
}

.co-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.co-item__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.co-item__info strong {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--fg);
	line-height: 1.2;
}

.co-item__info span {
	font-family: var(--f-mono);
	font-size: 11.5px;
	color: var(--fg-mute);
}

.co-item__qty {
	font-family: var(--f-mono);
	font-size: 13px;
	color: var(--fg-mute);
	white-space: nowrap;
}

.co-item__price {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 17px;
	color: var(--accent-deep);
	white-space: nowrap;
}


/* ============================================================
   POTVRZENI OBJEDNAVKY
   ============================================================ */

.ty-hero {
	text-align: center;
	padding: 28px 0 36px;
}

.ty-check {
	width: 76px;
	height: 76px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: rgba(74, 143, 90, 0.16);
	border: 2px solid var(--ok);
	color: var(--ok);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ty-check svg {
	width: 38px;
	height: 38px;
}

.ty-title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(30px, 4vw, 44px);
	letter-spacing: 0.04em;
	text-transform: none;
	margin: 0 0 12px;
	color: var(--fg);
}

.ty-sub {
	font-size: 16px;
	color: var(--fg-mute);
	margin: 0 auto;
	max-width: 600px;
	line-height: 1.6;
}

.ty-sub strong {
	color: var(--fg);
}

.ty-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 26px;
}

.ty-meta > div {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 20px;
	background: var(--bg-elev);
	border: 1px solid var(--bg-rule);
	border-radius: var(--r-2);
	min-width: 150px;
}

.ty-meta span {
	font-family: var(--f-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-faint);
}

.ty-meta strong {
	font-size: 14px;
	color: var(--fg);
}

.ty-meta strong.ty-state {
	color: var(--ok);
}

.ty-grid {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 24px;
	align-items: start;
	margin-top: 12px;
}

.ty-card,
.ty-summ {
	background: var(--bg-elev);
	border: 1px solid var(--bg-rule);
	border-radius: var(--r-2);
	padding: 24px;
}

.ty-summ {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ty-card__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 18px;
	color: var(--fg);
}

.ty-steps {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.ty-steps li {
	display: flex;
	gap: 14px;
	padding-bottom: 18px;
	position: relative;
	list-style: none;
}

.ty-steps li:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 24px;
	bottom: 0;
	width: 2px;
	background: var(--bg-rule);
}

.ty-steps li.is-done:not(:last-child)::before {
	background: var(--ok);
}

.ty-steps__dot {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 2px solid var(--bg-rule);
	background: var(--bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: transparent;
	z-index: 1;
}

.ty-steps__dot svg {
	width: 13px;
	height: 13px;
}

.ty-steps li.is-done .ty-steps__dot {
	background: var(--ok);
	border-color: var(--ok);
	color: var(--fg);
}

.ty-steps li.is-next .ty-steps__dot {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.2);
}

.ty-steps li > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ty-steps strong {
	font-size: 14.5px;
	color: var(--fg);
}

.ty-steps span {
	font-size: 12.5px;
	color: var(--fg-mute);
}

.ty-note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 12px 14px;
	margin: 0 0 18px;
	border-radius: var(--r-1);
	background: var(--bg-sunk);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--fg-soft);
}

.ty-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* --- zvetseny nahled polozky ------------------------------------------- */

/*
 * Nativni <dialog>, obsluhu ma project/resources/js/nahled.js. Nahradil
 * lightbox 2.6, ktery na tohle potreboval jQuery a vlastni CSS soubor
 * nacitany na kazde strance webu.
 */
.nahled {
	max-width: min(92vw, 900px);
	max-height: 92vh;
	padding: 0;
	border: 1px solid var(--bg-rule);
	border-radius: var(--r-2);
	background: var(--bg-elev);
	/* Krizek visi pres roh, proto se nesmi orezat. */
	overflow: visible;
}
.nahled::backdrop {
	background: rgba(0, 0, 0, 0.72);
}
.nahled__obrazek {
	display: block;
	max-width: 100%;
	max-height: 88vh;
	/* `design.css` dava vsem obrazkum `margin-bottom: 20px`. */
	margin: 0;
}
.nahled__zavrit {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--accent-ink);
	background: var(--accent);
	border: 1px solid var(--accent-deep);
	border-radius: 50%;
	cursor: pointer;
}
.nahled__zavrit:hover {
	background: var(--accent-soft);
}