/* ==========================================================================
   Korpa · Checkout · Potvrda porudžbine
   Koristi tokene iz kumric.css. Prefiksi: kr- (korpa), co- (checkout), ty-/rc- (potvrda).
   ========================================================================== */

/* ---------- Zajedničko: tok kupovine, oznake plaćanja, skica ploče ---------- */
.flow { display: flex; gap: 6px; min-width: 0; }
.flow__i { flex: 1 1 0; min-width: 0; }
.flow__i > a, .flow__i > span { display: grid; gap: 8px; padding-top: 12px; border-top: 2px solid var(--line-2); color: var(--ink-4); font-size: 14px; font-weight: 500; font-stretch: 104%; transition: border-color var(--t) var(--ease), color var(--t-fast); }
.flow__i > a:hover { color: var(--ink); }
.flow__no { display: inline-flex; align-items: center; height: 16px; font-size: 11.5px; font-weight: 500; letter-spacing: .06em; }
.flow__no .ic { width: 15px; height: 15px; stroke-width: 2; }
.flow__l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow__i.is-done > * { border-color: var(--ink); color: var(--ink-2); }
.flow__i.is-cur > * { border-color: var(--wood); color: var(--ink); }
.flow__i.is-cur .flow__no { color: var(--wood-700); }

.paymarks { display: flex; flex-wrap: wrap; gap: 6px; }
.paymarks > * { padding: 4px 7px; border: 1px solid var(--line-2); border-radius: 2px; font-size: 10.5px; line-height: 1.2; color: var(--ink-3); background: var(--paper); }

.cutsk { width: 100%; height: auto; overflow: visible; font-family: var(--f-mono); }
.cutsk__board { fill: var(--card); stroke: var(--ink); stroke-width: 1; }
.cutsk__cut { fill: none; stroke: var(--ink-3); stroke-width: .8; stroke-dasharray: 3 3; }
.cutsk__edge { fill: none; stroke: var(--wood); stroke-width: 3; }
.cutsk__dim { fill: none; stroke: var(--ink-3); stroke-width: .7; }
.cutsk__t { font-size: 7.5px; fill: var(--ink-3); }
.cutsk__n { font-size: 6.5px; fill: var(--ink-2); }

/* Zbirne tabele (korpa + checkout) */
.kr-sum__dl, .co-sum__dl { display: grid; padding: 8px 0; }
.kr-sum__dl > div, .co-sum__dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; font-size: 14.5px; }
.kr-sum__dl dt, .co-sum__dl dt { color: var(--ink-2); }
.kr-sum__dl dt .mono, .co-sum__dl dt .mono { font-size: 11.5px; color: var(--ink-4); margin-left: 6px; white-space: nowrap; }
.kr-sum__dl dd, .co-sum__dl dd { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kr-sum__dl .is-free dd, .co-sum__dl .is-free dd { color: var(--ok); }
.kr-sum__dl .is-disc dd, .co-sum__dl .is-disc dd { color: var(--wood-700); }
.kr-sum__dl .is-sub, .co-sum__dl .is-sub { font-size: 13.5px; padding: 5px 0; }
.kr-sum__dl .is-sub dt, .co-sum__dl .is-sub dt { color: var(--ink-3); }
.kr-sum__total, .co-sum__total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.kr-sum__total > span, .co-sum__total > span { font-size: 15px; font-weight: 600; font-stretch: 104%; }
.kr-sum__total small, .co-sum__total small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-4); margin-top: 2px; }
.kr-sum__total strong, .co-sum__total strong { font-size: clamp(28px, 2.3vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kr-sum__vat, .co-sum__vat { font-size: 11.5px; color: var(--ink-3); text-align: right; margin-top: 8px; }

/* Stanje dugmeta dok se šalje (jezgro dodaje .is-loading + disabled) */
.btn.is-loading { opacity: 1 !important; }
.btn.is-loading .btn__cell { position: relative; }
.btn.is-loading .btn__cell .ic { opacity: 0; }
.btn.is-loading .btn__cell::after { content: ''; position: absolute; width: 18px; height: 18px; border: 1.5px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: g-spin .7s linear infinite; }
.btn--outline.is-loading .btn__cell::after { border-color: var(--line-2); border-top-color: var(--ink); }
@keyframes g-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   KORPA
   ========================================================================== */
.kr-head { border-bottom: 0; padding-bottom: clamp(24px, 3vw, 40px); }
.kr-head__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.6vw, 40px); row-gap: 28px; align-items: end; }
.kr-head__grid > div:first-child { grid-column: 1 / span 7; }
.kr-head__grid > .flow { grid-column: 9 / -1; padding-bottom: 10px; }
.kr-head__t { display: flex; align-items: flex-start; gap: 14px; }
.kr-head__t sup { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink-2); padding: 4px 9px; border: 1px solid var(--line-2); line-height: 1.2; margin-top: .45em; }
.kr-head__t sup:empty { display: none; }

.kr { padding-bottom: clamp(56px, 7vw, 104px); }
.kr__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.6vw, 40px); align-items: start; }
.kr__main { grid-column: 1 / span 8; min-width: 0; }
.kr__side { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + 24px); }

/* Lenjir do besplatne dostave */
.kr-ship { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 36%); gap: 4px 32px; align-items: center; padding: 16px 20px; margin-bottom: 32px; background: var(--card); border: 1px solid var(--line); }
.kr-ship__t { grid-row: span 2; display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.kr-ship__t .ic { width: 22px; height: 22px; color: var(--wood-600); }
.kr-ship__t b { color: var(--ink); font-weight: 600; }
.kr-ship.is-free .kr-ship__t .ic { color: var(--ok); }
.kr-ship__rule { position: relative; height: 10px; border-bottom: 1px solid var(--line-3); background: repeating-linear-gradient(90deg, var(--line-3) 0 1px, transparent 1px 10%) left bottom / 100% 5px no-repeat; }
.kr-ship__rule::before, .kr-ship__rule::after { content: ''; position: absolute; bottom: 0; width: 1px; height: 10px; background: var(--ink-3); }
.kr-ship__rule::before { left: 0; } .kr-ship__rule::after { right: 0; }
.kr-ship__rule i { position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--wood); transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.kr-ship.is-free .kr-ship__rule i { background: var(--ok); }
.kr-ship__scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-4); }

/* Linije */
.kr-cols, .kr-line { display: grid; grid-template-columns: 104px minmax(0, 1fr) 116px 150px 118px; column-gap: clamp(16px, 1.8vw, 28px); }
.kr-cols { padding-bottom: 10px; border-bottom: 1px solid var(--line-2); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); }
.kr-cols span:first-child { grid-column: 1 / span 2; }
.kr-cols span:last-child { text-align: right; }
.kr-lines { display: grid; }
.kr-line { grid-template-areas: "img info unit qty total" ". pair pair pair pair"; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--line); animation: rise .6s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 70ms); }
.kr-line__img { grid-area: img; position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); }
.kr-line__img img, .kr-line__img .skel { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.kr-line:hover .kr-line__img img { transform: scale(1.06); }
.kr-line__edge { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(180deg, var(--wood) 0 60%, var(--wood-600) 60%); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.kr-line:hover .kr-line__edge { transform: scaleX(1); }
.kr-line__info { grid-area: info; min-width: 0; }
.kr-line__meta { display: flex; gap: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.kr-line__meta .mono { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); font-size: 12px; }
.kr-line__name { font-size: 18px; font-weight: 500; font-stretch: 104%; letter-spacing: -.012em; line-height: 1.25; margin: 6px 0 4px; }
.kr-line__name a { transition: color var(--t-fast); }
.kr-line__name a:hover { color: var(--wood-700); }
.kr-line__var { font-size: 12px; color: var(--ink-3); }
.kr-line__unit-m { display: none; }
.kr-line__stock { margin-top: 10px; }
.kr-line__acts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 12px; }
.kr-act { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; color: var(--ink-3); transition: color var(--t-fast); }
.kr-act .ic { width: 16px; height: 16px; }
.kr-act:hover { color: var(--ink); }
.kr-act--rm:hover { color: var(--err); }
.kr-line__unit { grid-area: unit; padding-top: 12px; }
.kr-price { display: grid; gap: 1px; font-variant-numeric: tabular-nums; }
.kr-price b { font-size: 16px; font-weight: 600; }
.kr-price small { font-size: 12px; color: var(--ink-3); }
.kr-price s { font-size: 12px; color: var(--ink-4); }
.kr-price__tag { font-size: 10.5px; font-weight: 500; letter-spacing: .06em; color: var(--wood-700); }
.kr-line__qty { grid-area: qty; }
.kr-line__qty .qty { width: 100%; }
.kr-line__warn { display: flex; gap: 6px; margin-top: 8px; font-size: 12px; line-height: 1.35; color: var(--warn); }
.kr-line__warn .ic { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.kr-line__warn:empty { display: none; }
.kr-line__total { grid-area: total; display: grid; gap: 1px; justify-items: end; padding-top: 10px; text-align: right; }
.kr-line__total b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kr-line__total small { font-size: 12px; color: var(--ink-3); }
.kr-line__pair { grid-area: pair; }
.kr-line__pair:empty { display: none; }
.kr-pair { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 8px 8px 14px; border: 1px dashed var(--line-3); font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.kr-pair > .ic { width: 18px; height: 18px; flex: none; color: var(--wood-600); }
.kr-pair .mono { font-size: 12px; }
.kr-pair--ok { border-style: solid; border-color: transparent; background: var(--ok-bg); padding: 10px 14px; }
.kr-pair--ok > .ic { color: var(--ok); }
.kr-pair__add { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; background: var(--ink); color: var(--paper); border-radius: var(--r); font-size: 13px; font-weight: 500; transition: background-color var(--t-fast); }
.kr-pair__add:hover { background: var(--wood-600); }
.kr-pair__add .ic { width: 16px; height: 16px; }
.kr-line.is-out { overflow: hidden; opacity: 0; transform: translateX(28px); padding-block: 0; border-bottom-color: transparent; transition: opacity .28s var(--ease), transform .45s var(--ease-out), height .45s var(--ease-io) .12s, padding .45s var(--ease-io) .12s; }
.kr-line--skel .skel-line:first-child { margin-top: 2px; }

/* Posle linija: promo + nastavak */
.kr-after { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-top: 18px; }
.kr-promo { flex: 1; max-width: 480px; }
.kr-promo__toggle { display: inline-flex; align-items: center; gap: 10px; height: 40px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); transition: color var(--t-fast); }
.kr-promo__toggle:hover { color: var(--ink); }
.kr-promo__toggle .ic:first-child { width: 18px; height: 18px; color: var(--wood-600); }
.kr-promo__toggle .ic:last-child { width: 15px; height: 15px; transition: transform var(--t) var(--ease-out); }
.kr-promo.is-open .kr-promo__toggle .ic:last-child { transform: rotate(45deg); }
.kr-promo__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.kr-promo__body > div { overflow: hidden; min-height: 0; }
.kr-promo.is-open .kr-promo__body { grid-template-rows: 1fr; }
.kr-promo__form { padding: 6px 4px 4px; }
.kr-promo__row { display: flex; gap: 8px; }
.kr-promo__row input { flex: 1; min-width: 0; letter-spacing: .08em; text-transform: uppercase; }
.kr-promo__row input::placeholder { text-transform: none; letter-spacing: 0; }
.kr-promo__on { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-height: 40px; }
.kr-promo__on .tag-x { gap: 8px; }
.kr-promo__on .tag-x > .ic { width: 15px; height: 15px; }
.kr-promo__saved { font-size: 13.5px; color: var(--ok); font-weight: 500; }
.kr-promo__b2b { display: none; align-items: center; gap: 8px; min-height: 40px; font-size: 13.5px; color: var(--ink-3); }
.kr-promo__b2b .ic { width: 16px; height: 16px; }
.kr-promo.is-b2b .kr-promo__b2b { display: flex; }
.kr-continue { flex: none; height: 40px; }

/* Obrada uz porudžbinu */
.kr-svc { position: relative; display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: 44px; padding: clamp(20px, 2.4vw, 32px); background: var(--wood-50); border: 1px solid var(--wood-100); }
.kr-svc::before, .ty-svc::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: linear-gradient(90deg, var(--wood) 0 60%, var(--wood-600) 60%); }
.kr-svc__art, .ty-svc__art { background: var(--card); border: 1px solid var(--wood-100); padding: 16px 16px 10px; }
.kr-svc__k, .ty-svc__k { display: flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--wood-700); }
.kr-svc__k .ic, .ty-svc__k .ic { width: 16px; height: 16px; }
.kr-svc__t { font-size: clamp(21px, 1.8vw, 26px); letter-spacing: -.022em; line-height: 1.15; margin: 10px 0; max-width: 26ch; }
.kr-svc__x { font-size: 15px; color: var(--ink-2); max-width: 60ch; }
.kr-svc__boards { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 20px; }
.kr-svc__boards:empty { display: none; }
.kr-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 3px; background: var(--card); border: 1px solid var(--line-2); font-size: 13px; }
.kr-chip img { width: 26px; height: 26px; object-fit: cover; }
.kr-chip .mono { font-size: 12px; color: var(--ink-2); }
.kr-chip span:last-child { color: var(--ink-3); }
.kr-svc__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.kr-svc__boards:empty + .kr-svc__act { margin-top: 20px; }

/* Pregled (desno) */
.kr-sum { background: var(--card); border: 1px solid var(--line); padding: 24px 26px 22px; }
.kr-sum__head, .co-sum__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.kr-sum__head .mono { font-size: 12px; color: var(--ink-3); }
.kr-sum__vat { margin-bottom: 20px; }
.kr-sum__quote { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; margin-top: 4px; font-size: 14px; color: var(--ink-2); transition: color var(--t-fast); }
.kr-sum__quote .ic { width: 18px; height: 18px; }
.kr-sum__quote:hover { color: var(--ink); }
.kr-sum__quote:hover span { text-decoration: underline; text-underline-offset: 3px; }
.kr-eta { margin-top: 12px; border-top: 1px solid var(--line); }
.kr-eta li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; }
.kr-eta .ic { width: 20px; height: 20px; color: var(--ink-2); }
.kr-eta b { display: block; font-weight: 600; color: var(--ink); }
.kr-eta span span { color: var(--ink-3); }
.kr-eta em { font-style: normal; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.kr-b2b { margin-top: 16px; padding: 14px 16px 12px; background: var(--wood-50); border: 1px solid var(--wood-100); }
.kr-b2b__k { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--wood-700); margin-bottom: 6px; }
.kr-b2b dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--wood-100); font-size: 13.5px; }
.kr-b2b dt { color: var(--ink-3); }
.kr-b2b dd { font-weight: 500; text-align: right; }
.kr-b2b .link-arrow { margin-top: 8px; font-size: 14px; }
.kr-sum__pay { margin-top: 18px; }

/* Prazna korpa */
.kr-empty { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.6vw, 40px); align-items: center; padding-block: clamp(16px, 3vw, 40px) clamp(24px, 4vw, 56px); }
.kr-empty__art { grid-column: 2 / span 3; position: relative; display: grid; place-items: center; aspect-ratio: 1; color: var(--ink-3); border: 1px dashed var(--line-3); background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(23, 26, 28, .022) 10px 11px), var(--card); animation: rise .8s var(--ease-out) both; }
.kr-empty__art .ic { width: 48px; height: 48px; stroke-width: 1.2; }
.kr-empty__art .mono { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--ink-4); letter-spacing: .06em; }
.kr-empty__body { grid-column: 6 / -1; animation: rise .8s .1s var(--ease-out) both; }
.kr-empty__k { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--wood-700); margin-bottom: 16px; }
.kr-empty .lead { margin: 20px 0 32px; }
.kr-empty__act { display: flex; flex-wrap: wrap; gap: 10px; }
.kr-reorder { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; margin-top: 28px; background: var(--card); border: 1px solid var(--line); max-width: 640px; }
.kr-reorder__imgs { display: flex; padding-left: 10px; }
.kr-reorder__imgs img { width: 40px; height: 40px; object-fit: cover; margin-left: -10px; box-shadow: 0 0 0 2px var(--card); }
.kr-reorder p { display: grid; font-size: 14px; min-width: 0; }
.kr-reorder p b { font-weight: 600; }
.kr-reorder p b .mono { font-weight: 400; font-size: 12.5px; color: var(--ink-3); margin-left: 4px; }
.kr-reorder p > span { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kr-empty__cats { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); }
.kr-empty__cats a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; font-size: 15px; font-weight: 500; transition: color var(--t-fast); }
.kr-empty__cats a .ic { width: 16px; height: 16px; color: var(--ink-4); transition: transform var(--t) var(--ease-out), color var(--t-fast); }
.kr-empty__cats a:hover { color: var(--wood-700); }
.kr-empty__cats a:hover .ic { transform: translate(2px, -2px); color: currentColor; }

/* Poverenje: preuzimanje, plaćanje, dostava */
.kr-trust { background: var(--paper-2); border-block: 1px solid var(--line); }
.kr-trust__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.6vw, 40px); }
.kr-trust__pick { grid-column: 1 / span 4; display: grid; align-content: start; gap: 14px; padding: clamp(32px, 4vw, 56px) clamp(16px, 2.6vw, 40px) clamp(32px, 4vw, 56px) 0; border-right: 1px solid var(--line-2); }
.kr-trust__k { display: flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.kr-trust__k .ic { width: 16px; height: 16px; color: var(--wood-600); }
.kr-trust__addr { font-size: clamp(22px, 1.9vw, 28px); font-weight: 500; font-stretch: 110%; letter-spacing: -.022em; line-height: 1.15; }
.kr-trust__hours { display: grid; gap: 2px; font-size: 14px; }
.kr-trust__hours div { display: flex; justify-content: space-between; max-width: 280px; padding: 3px 0; border-bottom: 1px dotted var(--line-2); }
.kr-trust__hours dt { color: var(--ink-3); }
.kr-trust__hours dd { font-size: 13px; }
.kr-trust__pick .fine { max-width: 40ch; }
.kr-trust__list { grid-column: 5 / -1; display: grid; align-content: center; padding-block: clamp(16px, 2vw, 32px); }
.kr-trust__list li { display: grid; grid-template-columns: 36px 24px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line); }
.kr-trust__list li:last-child { border-bottom: 0; }
.kr-trust__no { font-size: 12px; color: var(--wood-700); padding-top: 3px; }
.kr-trust__list .ic { width: 24px; height: 24px; color: var(--ink-2); }
.kr-trust__list b { display: block; font-size: 17px; font-weight: 500; font-stretch: 106%; letter-spacing: -.01em; margin-bottom: 4px; }
.kr-trust__list p { font-size: 14.5px; color: var(--ink-3); max-width: 64ch; }

/* Preporuke */
.kr-rel__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px 40px; margin-bottom: 32px; }
.kr-rel__head .h2 { max-width: 20ch; }
.kr-rel__tabs { border-bottom: 0; }
.kr-rel__track { --w: minmax(260px, calc(100% / 4.25)); }
.kr-rel .carousel__ctrl { display: flex; align-items: center; gap: 32px; margin-top: 24px; }
.kr-rel .carousel__ctrl .progress { flex: 1; }
.kr-rel .carousel__ctrl .progress i { width: 25%; transition: transform .3s var(--ease-out); }
.kr-rel .carousel__ctrl .ibtn:disabled { opacity: .35; cursor: default; }
.kr-rel .carousel__ctrl .row { flex-wrap: nowrap; gap: 8px; }

/* Mobilna traka */
.kr-bar { display: none; }

@media (max-width: 1180px) {
  .kr-cols, .kr-line { grid-template-columns: 88px minmax(0, 1fr) 104px 136px 104px; }
}
@media (max-width: 1100px) {
  .kr__main, .kr__side { grid-column: 1 / -1; }
  .kr__side { position: static; margin-top: 40px; }
  .kr-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .kr-sum > * { grid-column: 1; }
  .kr-sum > .kr-eta, .kr-sum > .kr-b2b, .kr-sum > .kr-sum__pay { grid-column: 2; }
  .kr-sum > .kr-eta { grid-row: 1 / span 4; margin-top: 0; }
  .kr-head__grid > div:first-child, .kr-head__grid > .flow { grid-column: 1 / -1; }
  .kr-head__grid > .flow { max-width: 560px; }
  .kr-trust__pick { grid-column: 1 / span 5; }
  .kr-trust__list { grid-column: 6 / -1; }
  .kr-empty__art { grid-column: 1 / span 4; }
  .kr-empty__body { grid-column: 6 / -1; }
}
@media (max-width: 900px) {
  .kr-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line-2); box-shadow: 0 -12px 30px -18px rgba(23, 26, 28, .35); transform: translateY(110%); transition: transform .45s var(--ease-out); }
  .kr-bar.is-on { transform: none; }
  .kr-bar__sum { display: grid; gap: 1px; }
  .kr-bar__sum .mono { font-size: 10.5px; color: var(--ink-3); }
  .kr-bar__sum strong { font-size: 21px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
  .kr-bar__btn { --h: 52px; flex: none; }
  .kr-has-bar .dock { bottom: 84px; }
  .kr-has-bar .toasts { bottom: 84px; }
  .kr-has-bar .ftr { padding-bottom: 72px; }
  .kr-trust__pick, .kr-trust__list { grid-column: 1 / -1; }
  .kr-trust__pick { border-right: 0; border-bottom: 1px solid var(--line-2); padding-right: 0; }
  .kr-trust__list { padding-top: 8px; }
  .kr-sum { display: block; }
  .kr-sum > .kr-eta { margin-top: 12px; }
}
@media (max-width: 720px) {
  .kr-cols { display: none; }
  .kr-line { grid-template-columns: 84px minmax(0, 1fr) auto; column-gap: 14px; grid-template-areas: "img info info" "qty qty total" "pair pair pair"; padding: 20px 0; }
  .kr-line__unit { display: none; }
  .kr-line__unit-m { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .kr-line__unit-m .mono { font-size: 10px; font-weight: 500; }
  .kr-line__name { font-size: 16px; margin-top: 4px; }
  .kr-line__meta { font-size: 10.5px; gap: 8px; }
  .kr-line__stock { margin-top: 6px; }
  .kr-line__stock .stock { font-size: 12.5px; }
  .kr-line__acts { margin-top: 6px; gap: 0 16px; }
  .kr-act__x { display: none; }
  .kr-line__qty { margin-top: 14px; }
  .kr-line__qty .qty { width: 156px; height: 44px; }
  .kr-line__total { margin-top: 14px; padding-top: 0; align-self: center; }
  .kr-line__total b { font-size: 18px; }
  .kr-line--skel .kr-line__qty, .kr-line--skel .kr-line__total { display: none; }
  .kr-pair { flex-wrap: wrap; align-items: flex-start; margin-top: 14px; padding: 10px 12px; }
  .kr-pair > span { flex: 1 1 calc(100% - 40px); min-width: 0; }
  .kr-pair > .ic { margin-top: 1px; }
  .kr-pair__add { margin-left: 28px; }
  .kr-ship { grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; margin-bottom: 20px; }
  .kr-ship__t { grid-row: auto; align-items: flex-start; font-size: 14px; gap: 12px; }
  .kr-after { flex-direction: column; align-items: stretch; gap: 4px; }
  .kr-promo { max-width: none; }
  .kr-svc { grid-template-columns: 1fr; margin-top: 32px; }
  .kr-svc__art { max-width: 260px; }
  .kr-svc__act .btn { width: 100%; }
  .kr-empty__art { grid-column: 1 / span 5; }
  .kr-empty__body { grid-column: 1 / -1; margin-top: 28px; }
  .kr-empty__act .btn { flex: 1 1 100%; }
  .kr-reorder { grid-template-columns: auto minmax(0, 1fr); }
  .kr-reorder .btn { grid-column: 1 / -1; }
  .kr-rel__track { --w: 74%; }
  .kr-rel__tabs { width: 100%; gap: 22px; }
  .kr-trust__list li { grid-template-columns: 24px minmax(0, 1fr); gap: 14px; }
  .kr-trust__no { display: none; }
  .kr-head__t sup { font-size: 12px; }
}
@media (max-width: 640px) {
  .flow__i:not(.is-cur) .flow__l { display: none; }
  .flow__i.is-cur { flex: 4 1 0; }
}

/* ==========================================================================
   CHECKOUT
   ========================================================================== */
.co-page .hdr--minimal { border-bottom: 1px solid var(--line); }

/* Traka napretka (7 koraka) */
.co-prog { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 95%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.co-prog__in { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); height: 56px; }
.co-prog__back { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding-right: clamp(16px, 2vw, 28px); border-right: 1px solid var(--line-2); font-size: 14px; color: var(--ink-3); flex: none; transition: color var(--t-fast); }
.co-prog__back .ic { width: 16px; height: 16px; transition: transform var(--t) var(--ease-out); }
.co-prog__back:hover { color: var(--ink); }
.co-prog__back:hover .ic { transform: translateX(-3px); }
.co-prog__list { display: flex; flex: 1; min-width: 0; }
.co-prog__i { flex: 1 1 0; min-width: 0; }
.co-prog__i:last-child { flex: 0 0 auto; }
.co-prog__i a { display: flex; align-items: center; gap: 10px; height: 56px; font-size: 13.5px; font-weight: 500; font-stretch: 104%; color: var(--ink-4); white-space: nowrap; transition: color var(--t-fast); }
.co-prog__i a::after { content: ''; flex: 1; min-width: 12px; height: 1px; margin-right: 10px; background: var(--line-2); transition: background-color var(--t) var(--ease); }
.co-prog__i:last-child a::after { display: none; }
.co-prog__i a:hover { color: var(--ink); }
.co-prog__dot { position: relative; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--line-3); border-radius: 50%; background: var(--paper); font-size: 10.5px; color: var(--ink-3); transition: background-color var(--t) var(--ease), border-color var(--t), color var(--t), box-shadow var(--t); }
.co-prog__dot .ic { position: absolute; width: 13px; height: 13px; stroke-width: 2.2; opacity: 0; transform: scale(.5); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out); }
.co-prog__i.is-done a { color: var(--ink-2); }
.co-prog__i.is-done a::after { background: var(--ink); }
.co-prog__i.is-done .co-prog__dot { background: var(--ink); border-color: var(--ink); color: transparent; }
.co-prog__i.is-done .co-prog__dot .ic { opacity: 1; transform: none; color: var(--paper); }
.co-prog__i.is-cur a { color: var(--ink); }
.co-prog__i.is-cur .co-prog__dot { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 4px var(--wood-100); }
.co-prog__i.is-err .co-prog__dot { background: var(--err); border-color: var(--err); color: #fff; box-shadow: 0 0 0 4px var(--err-bg); }
.co-prog__i.is-err .co-prog__dot .ic { opacity: 0; }
.co-prog__i.is-err a { color: var(--err); }
.co-prog__m { display: none; }
.co-prog__bar { display: none; }

/* Raspored */
.co { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.6vw, 40px); align-items: start; padding-top: clamp(32px, 4vw, 60px); padding-bottom: clamp(64px, 8vw, 120px); }
.co__main { grid-column: 1 / span 7; min-width: 0; }
.co__side { grid-column: 9 / -1; position: sticky; top: 80px; }
.co-head { margin-bottom: clamp(28px, 3vw, 40px); }
.co-head__t { font-size: clamp(36px, 3.8vw, 58px); letter-spacing: -.036em; line-height: .98; margin-bottom: 18px; }
.co-head__lead { font-size: 16px; color: var(--ink-2); max-width: 56ch; }
.co-head__lead b { font-weight: 600; color: var(--ink); }

/* Brza prijava */
.co-login { margin-bottom: 28px; background: var(--card); border: 1px solid var(--line); }
.co-login__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 14px 18px; text-align: left; font-size: 14.5px; color: var(--ink-3); line-height: 1.4; }
.co-login__row > .ic { width: 20px; height: 20px; color: var(--ink-2); }
.co-login__row b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.co-login__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.co-login__cta .ic { width: 16px; height: 16px; transition: transform var(--t) var(--ease-out); }
.co-login.is-open .co-login__cta .ic { transform: rotate(180deg); }
.co-login__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.co-login__body > div { overflow: hidden; min-height: 0; }
.co-login.is-open .co-login__body { grid-template-rows: 1fr; }
.co-login__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 6px 22px 20px 52px; border-top: 1px dashed var(--line-2); padding-top: 18px; }
.co-login__act { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; }

/* Sekcije */
.co-form { border-top: 1px solid var(--line-2); }
.co-sec { position: relative; border-bottom: 1px solid var(--line-2); scroll-margin-top: 72px; }
.co-sec__head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding-top: 28px; transition: padding var(--t) var(--ease-out); }
.co-sec__no { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--ink); font-size: 12px; font-weight: 500; color: var(--ink); }
.co-sec__ok { position: absolute; inset: -1px; display: grid; place-items: center; background: var(--ink); color: var(--paper); opacity: 0; transform: scale(.6); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out); }
.co-sec__ok .ic { width: 16px; height: 16px; stroke-width: 2; }
.co-sec__tt { min-width: 0; padding-top: 3px; }
.co-sec__t { font-size: clamp(20px, 1.6vw, 24px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.co-sec__sum { font-size: 14px; color: var(--ink-3); margin-top: 4px; line-height: 1.45; overflow-wrap: anywhere; }
.co-sec__edit { display: none; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r); font-size: 14px; font-weight: 500; transition: border-color var(--t-fast), background-color var(--t-fast); }
.co-sec__edit .ic { display: none; }
.co-sec__edit:hover { border-color: var(--ink); }
.co-sec__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease-out); }
.co-sec__clip { min-height: 0; overflow: hidden; margin-inline: -4px; padding-inline: 4px; }
.co-sec__in { padding: 24px 0 36px 60px; }
.co-sec.is-done .co-sec__head { cursor: pointer; padding-bottom: 26px; }
.co-sec.is-done .co-sec__head:hover .co-sec__t { color: var(--wood-700); }
.co-sec.is-done .co-sec__ok { opacity: 1; transform: none; }
.co-sec.is-done .co-sec__sum { color: var(--ink-2); font-size: 14.5px; }
.co-sec.is-done .co-sec__edit { display: inline-flex; }
.co-sec.is-done .co-sec__body { grid-template-rows: 0fr; }
.co-sec.is-done .co-sec__clip { visibility: hidden; transition: visibility 0s .55s; }
.co-sec.is-err .co-sec__no { border-color: var(--err); color: var(--err); }
.co-sec__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 28px; }
.co-inline-check { margin-top: 14px; font-size: 14.5px; }

.co-kind { max-width: 440px; margin-bottom: 24px; }
.co-pdv { display: grid; gap: 2px; align-content: end; padding-bottom: 4px; }
.co-hint { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 20px; background: var(--info-bg); color: var(--info); font-size: 14px; line-height: 1.45; }
.co-hint .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.co-hint span { color: var(--ink-2); }
.co-same { margin-top: 18px; }
.co-same__more { margin-top: 14px; padding-top: 20px; border-top: 1px dashed var(--line-2); animation: rise .45s var(--ease-out); }
.co-same__more .label { margin-bottom: 14px; }

/* Opcije (dostava, plaćanje) */
.co-opts { display: grid; gap: 8px; }
.co-opt { position: relative; display: block; cursor: pointer; }
.co-opt[hidden] { display: none; }
.co-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.co-opt__box { display: grid; grid-template-columns: 20px 24px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 18px 20px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast); }
.co-opt:hover .co-opt__box { border-color: var(--line-3); }
.co-opt input:checked + .co-opt__box { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #fff; }
.co-opt input:focus-visible + .co-opt__box { outline: 2px solid var(--wood); outline-offset: 2px; }
.co-opt__radio { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-3); background: var(--card); transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast); }
.co-opt input:checked + .co-opt__box .co-opt__radio { border-color: var(--ink); box-shadow: inset 0 0 0 5px var(--ink); }
.co-opt__ic .ic { width: 24px; height: 24px; color: var(--ink-2); }
.co-opt__txt { display: grid; gap: 3px; min-width: 0; }
.co-opt__txt b { font-size: 15.5px; font-weight: 600; font-stretch: 104%; }
.co-opt__txt > span { font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }
.nw { white-space: nowrap; }
.co-opt__meta { display: grid; justify-items: end; gap: 3px; text-align: right; }
.co-opt__meta b { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.co-opt__meta .mono { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.co-opt--b2b .co-opt__meta b { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; padding: 3px 6px; background: var(--wood); color: #fff; }
.co-opt__more { grid-column: 3 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.co-opt__more > span { display: block; overflow: hidden; min-height: 0; }
.co-opt__more > span > span { display: block; padding-top: 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; max-width: 60ch; }
.co-opt input:checked + .co-opt__box .co-opt__more { grid-template-rows: 1fr; }
.co-marks { margin-top: 10px; }
.co-opt.is-dis { cursor: not-allowed; }
.co-opt.is-dis .co-opt__box { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(23, 26, 28, .035) 6px 7px), var(--paper); border-style: dashed; }
.co-opt.is-dis .co-opt__txt b, .co-opt.is-dis .co-opt__meta b, .co-opt.is-dis .co-opt__ic .ic { color: var(--ink-4); }
.co-opt.is-dis .co-opt__radio { background: transparent; }
.co-payerr { margin-bottom: 14px; }
.co-payerr span { color: var(--ink-2); }

.co-slots { display: grid; gap: 12px; margin-top: 16px; padding: 18px 20px; border: 1px dashed var(--line-3); animation: rise .45s var(--ease-out); }
.co-slots[hidden] { display: none; }
.co-slots__days .check--chip { height: 40px; padding: 0 14px; background: var(--card); font-variant-numeric: tabular-nums; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.co-slots__days .check__box { display: none; }
.co-slots__days .check--chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.co-slots__days .check--chip:has(input:focus-visible) { outline: 2px solid var(--wood); outline-offset: 2px; }
.co-slots__time { justify-self: start; }
.co-slots .fine { max-width: 62ch; }

/* 06 Pregled */
.co-review { border-top: 1px solid var(--line); margin-bottom: 24px; }
.co-review__row { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.co-review dt { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); }
.co-review dd { font-size: 14.5px; color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
.co-review__miss { font-size: 13.5px; color: var(--warn); }
.co-review__edit { font-size: 13px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.co-review__edit:hover { color: var(--ink); text-decoration-color: var(--wood); }

/* 07 Potvrda */
.co-terms { padding: 14px 18px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); transition: border-color var(--t-fast), background-color var(--t-fast); }
.co-terms .check { align-items: flex-start; font-size: 14.5px; }
.co-terms .check__box { margin-top: 1px; }
.co-terms a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.co-terms a:hover { text-decoration-color: var(--wood); }
.co-terms.is-error { border-color: var(--err); background: #fff; animation: g-shake .4s var(--ease); }
.co-terms.is-error .check__box { border-color: var(--err); }
.co-terms__msg { display: flex; gap: 6px; margin: 6px 0 2px 32px; font-size: 13px; color: var(--err); }
.co-terms__msg .ic { width: 16px; height: 16px; flex: none; }
.co-terms__msg:empty { display: none; }
@keyframes g-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 60% { transform: translateX(3px); } }
.co-acct { margin-top: 10px; padding: 4px 18px; }
.co-acct .check { font-size: 14.5px; align-items: flex-start; }
.co-acct .check__box { margin-top: 1px; }
.co-acct__more { padding: 10px 0 6px 32px; max-width: 440px; animation: rise .45s var(--ease-out); }
.co-final { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.co-final__sum { display: grid; gap: 4px; }
.co-final__sum .mono { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.co-final__sum strong { font-size: clamp(32px, 2.8vw, 42px); font-weight: 600; letter-spacing: -.034em; line-height: 1; font-variant-numeric: tabular-nums; }
.co-submit { --h: 64px; }
.co-final__fine { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.co-final__fine .ic { width: 14px; height: 14px; flex: none; }

/* Greška pri plaćanju */
.co-err { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding: 24px 28px 26px; margin-bottom: 32px; background: var(--card); border: 1px solid color-mix(in srgb, var(--err) 28%, var(--line)); animation: rise .6s var(--ease-out) both; }
.co-err::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--err); }
.co-err__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--err-bg); color: var(--err); }
.co-err__ic .ic { width: 22px; height: 22px; }
.co-err__body > .co-err__k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--err); }
.co-err__t { font-size: clamp(20px, 1.7vw, 25px); letter-spacing: -.02em; line-height: 1.2; margin: 8px 0 10px; }
.co-err__body > p { font-size: 15px; color: var(--ink-2); max-width: 62ch; }
.co-err__body > p b { color: var(--ink); font-weight: 500; }
.co-err__why { display: grid; gap: 6px; margin: 16px 0 22px; padding: 14px 0 0; border-top: 1px dashed var(--line-2); font-size: 13.5px; color: var(--ink-3); }
.co-err__why li { position: relative; padding-left: 20px; }
.co-err__why li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--ink-4); }
.co-err__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }

/* Pregled porudžbine (desno) */
.co-sum { background: var(--card); border: 1px solid var(--line); }
.co-sum__toggle { display: none; }
.co-sum__in { padding: 24px 26px 22px; }
.co-sum__edit { font-size: 13.5px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.co-sum__edit:hover { color: var(--ink); }
.co-sum__items { display: grid; padding: 4px 0; border-bottom: 1px solid var(--line); max-height: 360px; overflow-y: auto; scrollbar-width: thin; }
.co-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; }
.co-item + .co-item { border-top: 1px solid var(--line); }
.co-item__img { position: relative; width: 56px; height: 56px; background: var(--paper-2); }
.co-item__img img { width: 100%; height: 100%; object-fit: cover; }
.co-item__img b { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--ink); color: var(--paper); font-size: 10.5px; font-weight: 500; box-shadow: 0 0 0 2px var(--card); }
.co-item__txt { display: grid; gap: 2px; min-width: 0; }
.co-item__n { font-size: 14px; font-weight: 500; line-height: 1.3; }
.co-item__txt .mono { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-item__p { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-item--skel > .skel { display: block; width: 56px; height: 56px; }
.co-item--empty { display: block; font-size: 14px; color: var(--ink-3); }
.co-item--empty a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.co-sum__trust { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.co-sum__trust li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.co-sum__trust .ic { width: 16px; height: 16px; color: var(--ink-2); margin-top: 1px; }
.co-sum__trust a { color: var(--ink); white-space: nowrap; }
.co.is-empty-cart .co-submit { opacity: .42; }

@media (max-width: 1280px) {
  .co__main { grid-column: 1 / span 7; }
  .co__side { grid-column: 8 / -1; }
}
@media (max-width: 1100px) {
  .co-prog__i:not(.is-cur) .co-prog__l { display: none; }
  .co-prog__i.is-cur { flex: 2 1 auto; }
}
@media (max-width: 960px) {
  .co { padding-top: 0; }
  .co__main, .co__side { grid-column: 1 / -1; }
  .co__side { position: relative; top: auto; order: -1; margin: 0 calc(var(--gutter) * -1) 28px; }
  .co-sum { border-width: 0 0 1px; background: var(--paper-2); }
  .co-sum__toggle { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 18px; gap: 12px; align-items: center; width: 100%; height: 60px; padding: 0 var(--gutter); text-align: left; font-size: 14.5px; font-weight: 500; }
  .co-sum__toggle > .ic { width: 20px; height: 20px; }
  .co-sum__toggle > .ic:last-child { width: 18px; height: 18px; transition: transform var(--t) var(--ease-out); }
  .co-sum__toggle .mono { font-size: 12px; font-weight: 400; color: var(--ink-3); }
  .co-sum__toggle strong { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .co-sum.is-open .co-sum__toggle > .ic:last-child { transform: rotate(180deg); }
  .co-sum__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
  .co-sum__clip { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s .5s; }
  .co-sum.is-open .co-sum__body { grid-template-rows: 1fr; }
  .co-sum.is-open .co-sum__clip { visibility: visible; transition: none; }
  .co-sum__in { padding: 4px var(--gutter) 20px; border-top: 1px solid var(--line); background: var(--card); }
  .co-sum__head { display: none; }
  .co-sum__items { max-height: none; }
  .co-head { padding-top: 8px; }
}
@media (max-width: 720px) {
  .co-prog__in { height: 52px; gap: 14px; }
  .co-prog__back { padding-right: 14px; }
  .co-prog__list { display: none; }
  .co-prog__m { display: flex; align-items: baseline; gap: 12px; flex: 1; min-width: 0; font-size: 14px; font-weight: 500; }
  .co-prog__m .mono { font-size: 12px; color: var(--ink-3); }
  .co-prog__m .mono b { color: var(--ink); font-weight: 500; }
  .co-prog__bar { display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--line); }
  .co-prog__bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--ease-out); }
  .co-head__t { font-size: 34px; }
  .co-head__t br { display: none; }
  .co-login__row { grid-template-columns: 20px minmax(0, 1fr); padding: 14px 16px; }
  .co-login__cta { grid-column: 2; }
  .co-login__form { grid-template-columns: 1fr; padding: 16px; }
  .co-sec { scroll-margin-top: 64px; }
  .co-sec__head { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-top: 22px; }
  .co-sec__no { width: 32px; height: 32px; font-size: 11px; }
  .co-sec__edit { grid-column: 2; justify-self: start; height: auto; margin-top: -6px; padding: 4px 0; border: 0; font-size: 13.5px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
  .co-sec.is-done .co-sec__head { padding-bottom: 20px; }
  .co-sec__in { padding: 20px 0 28px; }
  .co-sec__foot .btn { width: 100%; }
  .co-opt__box { grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; padding: 16px 14px; align-items: start; }
  .co-opt__meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 2px 10px; margin-top: 8px; text-align: left; }
  .co-opt__ic { display: none; }
  .co-opt__radio { margin-top: 1px; }
  .co-opt__txt b { font-size: 15px; }
  .co-opt__txt > span { font-size: 13px; }
  .co-opt__more { grid-column: 2 / -1; }
  .co-slots { padding: 14px; }
  .co-review__row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .co-review dt { grid-column: 1; }
  .co-review dd { grid-column: 1 / -1; grid-row: 2; }
  .co-review__edit { grid-column: 2; grid-row: 1; }
  .co-terms { padding: 14px; }
  .co-acct { padding: 4px 14px; }
  .co-final { flex-direction: column; align-items: stretch; }
  .co-submit { width: 100%; --h: 60px; }
  .co-final__fine { justify-content: flex-start; }
  .co-err { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .co-err__ic { width: 40px; height: 40px; }
  .co-err__act .btn { width: 100%; }
}

/* ==========================================================================
   POTVRDA PORUDŽBINE
   ========================================================================== */
.ty { position: relative; padding: clamp(24px, 3vw, 44px) 0 clamp(64px, 8vw, 112px); overflow: clip; }
.ty::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 96px 96px; background-position: -1px -1px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%); mask-image: linear-gradient(180deg, #000 0%, transparent 62%); }
.ty > .container { position: relative; }
.ty__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.6vw, 40px); margin-bottom: clamp(36px, 5vw, 72px); }
.ty__top .flow { grid-column: 8 / -1; }
.ty__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.6vw, 40px); align-items: start; }
.ty__main { grid-column: 1 / span 6; }
.ty__side { grid-column: 8 / -1; }
.ty .success-mark { margin-bottom: 28px; }
.ty__title { font-size: clamp(42px, 5.2vw, 84px); font-weight: 450; letter-spacing: -.044em; line-height: .96; margin-bottom: 26px; }
.ty__title em { font-style: normal; color: var(--wood-600); }
.ty__lead { margin-bottom: 32px; }
.ty__lead b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.ty-no { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 16px 0; border-block: 1px solid var(--line-2); margin-bottom: 40px; }
.ty-no__k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ty-no__v { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: .02em; color: var(--ink); margin-left: auto; }
.ty__h { font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.ty-steps { margin-bottom: 0; }
.ty-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 0; }
.ty-steps li > .mono { padding-top: 3px; }
.ty-steps__t { display: grid; gap: 3px; }
.ty-steps__t b { font-weight: 600; font-size: 15.5px; }
.ty-steps__t span { font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.ty-steps .status-dot { font-size: 12.5px; white-space: nowrap; padding-top: 2px; }
.ty-steps li.is-cur .status-dot::before { animation: ty-pulse 2.2s var(--ease) infinite; }
@keyframes ty-pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 89, 104, .45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(61, 89, 104, 0); } }
.ty__act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.ty__help { display: flex; gap: 10px; margin-top: 28px; max-width: 56ch; }
.ty__help .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* Otpremnica: izlazi iz „štampača“ */
.ty__side { position: relative; padding-top: 6px; }
.rc-slot { position: relative; z-index: 2; height: 16px; margin: 0 -14px; background: var(--ink); border-radius: 8px; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); }
.rc-slot span { position: absolute; left: 16px; right: 16px; top: 7px; height: 2px; background: #07090A; border-radius: 1px; }
.rc-wrap { overflow: hidden; margin: -8px -14px 0; padding: 8px 14px 40px; }
.rc { position: relative; background: #FDFCFA; color: var(--ink); padding: 30px 30px 26px; box-shadow: 0 40px 70px -46px rgba(40, 28, 16, .5), 0 1px 0 rgba(0, 0, 0, .04); transition: transform 1.7s var(--ease-out) .25s; }
.js .ty:not(.is-printed) .rc { transform: translateY(-101%); }
.rc::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: linear-gradient(-45deg, transparent 6px, #FDFCFA 0) 0 0 / 12px 10px repeat-x, linear-gradient(45deg, transparent 6px, #FDFCFA 0) 0 0 / 12px 10px repeat-x; }
.rc .crop { color: var(--ink-3); }
.rc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 1px dashed var(--line-3); }
.rc__k { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.rc__t { font-size: 21px; font-weight: 500; font-stretch: 110%; letter-spacing: -.02em; margin-top: 4px; }
.rc__doc { font-size: 10.5px; line-height: 1.5; color: var(--ink-3); text-align: right; }
.rc__doc b { font-size: 13px; font-weight: 500; color: var(--ink); }
.rc__code { display: grid; justify-items: center; gap: 6px; padding: 18px 0 14px; }
.rc__bc { width: 100%; height: 46px; fill: var(--ink); }
.rc__code .mono { font-size: 11px; letter-spacing: .32em; color: var(--ink-2); }
.rc__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; padding: 14px 0 16px; border-block: 1px dashed var(--line-3); }
.rc__meta dt { font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 3px; }
.rc__meta dd { font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.rc__meta dd.mono { font-size: 12.5px; font-weight: 400; }
.rc__items { margin-top: 6px; font-size: 13px; }
.rc__items th { padding: 10px 10px 8px 0; border-bottom: 1px solid var(--line-2); font-family: var(--f-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); text-align: left; }
.rc__items th span { letter-spacing: 0; text-transform: none; }
.rc__items td { padding: 10px 10px 10px 0; border-bottom: 1px dotted var(--line-3); vertical-align: top; line-height: 1.35; }
.rc__items td.mono { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.rc__items td small { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-3); }
.rc__items .num { text-align: right; padding-right: 0; white-space: nowrap; }
.rc__items td .skel-line { width: 100%; }
.rc__sum { display: grid; gap: 5px; padding-top: 14px; font-size: 12.5px; }
.rc__sum > div { display: flex; justify-content: space-between; gap: 12px; }
.rc__sum dt { color: var(--ink-3); }
.rc__sum dd { font-variant-numeric: tabular-nums; }
.rc__sum .rc__grand { margin-top: 8px; padding-top: 10px; border-top: 2px solid var(--ink); font-size: 15px; font-weight: 600; }
.rc__sum .rc__grand dt { color: var(--ink); }
.rc__foot { display: grid; justify-items: center; gap: 12px; margin-top: 26px; }
.rc__foot .dim { font-size: 10px; }
.rc__foot p { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* Posle potvrde */
.ty-more { padding-bottom: var(--section); }
.ty-more__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.6vw, 40px); row-gap: 24px; align-items: start; }
.ty-svc { position: relative; grid-column: 1 / span 7; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: center; padding: clamp(20px, 2.6vw, 36px); background: var(--wood-50); border: 1px solid var(--wood-100); }
.ty-svc .h3 { margin: 10px 0 12px; }
.ty-svc__body > p:not(.ty-svc__k) { font-size: 15px; color: var(--ink-2); margin-bottom: 22px; max-width: 58ch; }
.ty-svc .row { gap: 14px 28px; }
.ty-acct { grid-column: 9 / -1; padding: clamp(20px, 2.4vw, 30px); background: var(--card); border: 1px solid var(--line-2); }
.ty-acct[hidden] { display: none; }
.ty-more__grid:has(.ty-acct[hidden]) .ty-svc { grid-column: 1 / span 9; }
.ty-acct__k { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.ty-acct__k .ic { width: 16px; height: 16px; }
.ty-acct__x { font-size: 14.5px; color: var(--ink-3); margin-top: 10px; }
.ty-acct__x b { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.ty-acct__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; margin-top: 20px; }
.ty-acct__form .btn { margin-top: 30px; }
.ty-acct__ok { display: grid; justify-items: start; gap: 12px; }
.ty-acct__ok p { font-size: 14.5px; color: var(--ink-2); }
.ty-acct__ok .success-mark { width: 48px; height: 48px; }
.ty-acct__ok .success-mark .ic { width: 22px; height: 22px; }

@media (max-width: 1100px) {
  .ty__main { grid-column: 1 / span 7; }
  .ty__side { grid-column: 8 / -1; }
  .ty__top .flow { grid-column: 6 / -1; }
  .ty-svc { grid-column: 1 / -1; }
  .ty-acct { grid-column: 1 / span 7; }
  .ty-more__grid:has(.ty-acct[hidden]) .ty-svc { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .ty__main, .ty__side, .ty__top .flow { grid-column: 1 / -1; }
  .ty__side { margin-top: 48px; max-width: 560px; }
  .ty-acct { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ty__top { margin-bottom: 28px; }
  .ty .success-mark { width: 56px; height: 56px; margin-bottom: 22px; }
  .ty__title { font-size: 42px; }
  .ty-no__v { margin-left: 0; }
  .ty-no { gap: 8px 14px; }
  .ty-no__k { width: 100%; }
  .ty-steps li { grid-template-columns: 26px minmax(0, 1fr); }
  .ty-steps .status-dot { grid-column: 2; grid-row: 2; }
  .ty__act .btn { width: 100%; }
  .rc { padding: 24px 18px 22px; }
  .rc__meta { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .rc-slot { margin-inline: -8px; }
  .ty-svc { grid-template-columns: 1fr; }
  .ty-svc__art { max-width: 240px; }
  .ty-svc .row .btn { width: 100%; }
  .ty-acct__form { grid-template-columns: 1fr; }
  .ty-acct__form .btn { margin-top: 0; }
}