/* KONCEPTA-KOSIK (9. 10. 2026) — košík, pokladňa a stav objednávky vo vzhľade konceptu A (SK+EN, <main class="shop shop--ka">).
 * Podklad _KONCEPTA/GridGarden-A-pre-Claude/a-kosik.html (.a-hero mäta + slnko, biely súhrn, „Skutočný tok“) a a-pokladna.html
 * (.page-head na papieri s omrvinkou, karty). Načítava sa ZA shop.css a len na stránkach A; farby len z tokens.css, ⛔ verzálky.
 * Funkcia (shop.js) bez zmeny — tu sa mení len vzhľad. Súhrn .ss má z shop.js triedu on-dark: tokeny tmavého sa tu prepíšu na svetlé. */
.shop--ka { background: var(--paper); }
.shop--ka .shop__h1 { margin: 12px 0 24px; font-size: clamp(48px, 7vw, 102px); line-height: .98; letter-spacing: -.052em; font-weight: var(--w-head); color: var(--ink); text-wrap: initial; hyphens: manual; overflow-wrap: normal; }
.shop--ka .lead { margin: 0; max-width: 760px; font-size: var(--fs-lead); line-height: 1.43; color: var(--body); }
.shop--ka .gg-eyebrow { color: var(--leaf); }

/* úvod košíka — KOSIKHERO1 (owner 13. 10.): kompaktný mätový pás, H1 „Váš košík“ + krátka poznámka v 1 riadku, malý žltý kruh;
 * prvá položka košíka bez scrollu na 1440×900 aj 390×844 (predtým A .a-hero so sloganom cez celú obrazovku) */
.shop__kahero { position: relative; overflow: hidden; padding: calc(var(--hdr-h) + clamp(14px, 2vw, 24px)) 0 clamp(14px, 2vw, 24px); background: var(--leaf-mist); }
.shop__kahero::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: var(--sun); right: -70px; top: -110px; }
.shop__kahero .wrap { position: relative; z-index: 1; }
.shop__chead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.shop--ka .shop__kahero .shop__h1 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.04em; }
.shop__cnote { margin: 0; font-size: var(--fs-small); line-height: 1.4; color: var(--body); }
/* úvod pokladne a stavu (A .page-head): papier, omrvinka nad nadtitulkom */
.shop__kahead { padding: calc(var(--hdr-h) + clamp(16px, 2.5vw, 28px)) 0 clamp(8px, 2vw, 24px); }
.shop__kahead .sp-crumbs { margin-bottom: clamp(48px, 7vw, 96px); }
.shop__kahead .sp-crumbs a { color: var(--body); }
.shop--ka .shop__body { padding-top: clamp(40px, 6vw, 96px); }
.shop--ka[data-shop-page="cart"] .shop__body, .shop--ka[data-shop-page="checkout"] .shop__body, .shop--ka[data-shop-page="order-status"] .shop__body { padding-top: var(--s-5); }

/* karty projektu / výrobku a polia pokladne (A .card: biela, rádius 28) */
.shop--ka .cpj, .shop--ka .co__box { border-radius: 28px; }

/* súhrn (A .cart-side): biela karta namiesto tmavej — tokeny tmavého prepísané na svetlé */
.shop--ka .ss.on-dark { --on-dark: var(--ink); --on-dark-muted: var(--body); --soil-2: var(--line); background: var(--surface); color: var(--body); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--sh-2); }
.shop--ka .ss h2 { font-size: clamp(28px, 2.6vw, 34px); letter-spacing: -.045em; }
.shop--ka .ss select, .shop--ka .ss input:not([type="radio"]):not([type="checkbox"]) { background: var(--paper); border-color: var(--line-strong); color: var(--ink); }
.shop--ka .ss .gg-btn:not(.gg-btn--glass):not(.gg-btn--sun) { --b-bg: var(--leaf); --b-fg: #fff; --b-bd: var(--leaf); --b-sh: var(--sh-btn); }
.shop--ka .ss .gg-btn:not(.gg-btn--glass):not(.gg-btn--sun):hover { --b-bg: var(--soil); --b-bd: var(--soil); }
.shop--ka .ss .gg-btn--light { --b-bg: transparent; --b-fg: var(--ink); --b-bd: var(--line-strong); --b-sh: none; }
.shop--ka .ss .gg-btn--light:hover { --b-bg: var(--ink); --b-fg: var(--paper); --b-bd: var(--ink); }
.shop--ka .ss__opt input { accent-color: var(--leaf-deep); }
.shop--ka .ss__pend, .shop--ka .ss__nocar, .shop--ka .ss__zerr { color: var(--larch-ink) !important; }
.shop--ka .ss__zip input[aria-invalid="true"] { border-color: var(--larch-ink); box-shadow: 0 0 0 1px var(--larch-ink); }
.shop--ka .ss__trust li::before { background: var(--leaf); }

/* tok nákupu pod košíkom (A „Skutočný tok“: 4 mätové karty) */
.shop__kaflow { padding: clamp(64px, 9vw, 140px) 0; background: var(--surface); }
.shop__kaflow h2 { margin: 12px 0 clamp(28px, 4vw, 48px); font-size: clamp(36px, 5vw, 70px); line-height: .98; letter-spacing: -.052em; font-weight: var(--w-head); color: var(--ink); }
.shop__kasteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.shop__kasteps li { padding: 22px 22px 28px; border-radius: 22px; background: var(--leaf-mist); }
.shop__kasteps b { display: block; font-size: 22px; color: var(--leaf); }
.shop__kasteps h3 { margin: 14px 0 10px; font-size: clamp(22px, 2.2vw, 32px); line-height: .98; letter-spacing: -.052em; color: var(--ink); }
.shop__kasteps p { margin: 0; color: var(--body); font-size: var(--fs-small); line-height: 1.5; }
@media (max-width: 899px) { .shop__kasteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .shop__kasteps { grid-template-columns: 1fr; } .shop__kahero::after { width: 120px; height: 120px; right: -50px; top: -70px; } }