/* ==========================================================================
   FORGE — cart page
   ========================================================================== */

/* ---------- head ---------- */
.khead { background-color: var(--surface-shell); color: var(--text-on-shell); }
.khead__in { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-block: 26px 30px; }
.khead__l { display: grid; gap: 14px; }
.khead .crumbs { color: var(--shell-9); }
.khead .crumbs a:hover { color: var(--shell-12); }
.khead .crumbs > span:last-child { color: var(--safety); }
.khead .h-1 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; font-size: clamp(2.8rem, 5.4vw, 5rem); }
.khead__n { font-size: var(--text-2xs); letter-spacing: .14em; color: var(--shell-9); }
.khead__r { display: grid; justify-items: end; gap: 12px; }
.steps { display: flex; gap: 4px; }
.steps li { --c: 7px; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; background: var(--shell-4); color: var(--shell-9); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.steps b { font-weight: 600; color: var(--shell-8); }
.steps li.is-on { background: var(--safety); color: var(--ink); }
.steps li.is-on b { color: var(--ink); }
.khead__cut { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--shell-10); }
.khead__cut b { color: var(--safety); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .khead__in { flex-direction: column; align-items: flex-start; } .khead__r { justify-items: start; } }
@media (max-width: 400px) { .steps li { padding: 0 10px; } }

/* ---------- layout ---------- */
.kbody { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(20px, 3vw, 48px); align-items: start; padding-block: 28px clamp(56px, 6vw, 96px); }
.kmain { display: grid; gap: 14px; min-width: 0; }
@media (max-width: 1100px) { .kbody { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (max-width: 1023px) { .kbody { grid-template-columns: 1fr; } }

/* free-delivery gauge */
.gauge2 { --c: 16px; padding: 18px 20px 14px; background: var(--surface-raised); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.gauge2__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.gauge2__top p { font-size: var(--text-sm); }
.gauge2__top .mono { font: 900 1.6rem/1 var(--font-display); }
.gauge2__bar { position: relative; height: 16px; margin-top: 12px; background: repeating-linear-gradient(90deg, var(--grey-7) 0 1px, transparent 1px 5%), var(--grey-5); }
.gauge2__bar i { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, var(--ink) 0 8px, var(--shell-5) 8px 16px); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .8s var(--ease-snap); }
.gauge2.is-done .gauge2__bar i { background: repeating-linear-gradient(-45deg, var(--safety) 0 8px, var(--amber-8) 8px 16px); }
.gauge2__scale { display: flex; justify-content: space-between; margin-top: 7px; font-size: 9.5px; letter-spacing: .06em; color: var(--text-muted); }
@media (max-width: 559px) { .gauge2__scale span:nth-child(2), .gauge2__scale span:nth-child(4) { display: none; } }

/* blocks */
.kblock { --c: 16px; padding: 20px 22px 22px; background: var(--surface-raised); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.kblock__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.kblock h2 { display: flex; align-items: baseline; gap: 12px; font: 900 1.7rem/1 var(--font-display); text-transform: uppercase; }
.kblock h2 .mono { font-size: 11px; font-weight: 600; color: var(--amber-11); letter-spacing: .06em; }
.kblock__note { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.linkbtn { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--signal); }
@media (max-width: 559px) { .kblock { padding: 16px 14px 18px; } .kblock h2 { font-size: 1.4rem; } }

/* undo */
.undo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; background: var(--ink); color: var(--shell-12); font-size: var(--text-sm); animation: barIn .35s var(--ease-snap); }
@keyframes barIn { from { opacity: 0; transform: translateY(-8px); } }
.undo button { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--safety); text-decoration: underline; text-underline-offset: 3px; }

/* line items */
.line { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto 130px; gap: 18px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--border-subtle); animation: lineIn .45s var(--ease-out) both; animation-delay: calc(var(--i) * .04s); }
@keyframes lineIn { from { opacity: 0; transform: translateY(10px); } }
.line:last-child { border-bottom: 0; padding-bottom: 4px; }
.line__art { --c: 12px; display: block; aspect-ratio: 1; background: var(--surface-plate); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); transition: background var(--dur-base); }
.line__art:hover { background: var(--grey-7); }
.line__art .tool { width: 100%; height: 100%; }
.line__main { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.line__k { font-size: 9.5px; letter-spacing: .08em; color: var(--text-muted); }
.line__t { font-size: var(--text-md); font-weight: 600; line-height: 1.3; }
.line__t a:hover { text-decoration: underline; text-underline-offset: 3px; }
.line__var select { height: 34px; padding: 0 30px 0 10px; border: 1px solid var(--border-default); background: var(--surface-page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23141517' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center / 10px; font-size: var(--text-xs); font-weight: 600; appearance: none; -webkit-appearance: none; border-radius: 0; cursor: pointer; }
.line__var select:focus { outline: 0; border-color: var(--ink); }
.lst { display: inline-flex; align-items: center; gap: 7px; font: 500 10.5px/1.3 var(--font-mono); color: var(--text-secondary); }
.lst--ok .dot { background: var(--ok); } .lst--low .dot { background: var(--safety); } .lst--out .dot { background: var(--signal); }
.lst--low, .lst--out { color: var(--ink); }
.line__nudge { padding: 5px 8px; background: var(--amber-3); color: var(--amber-12); font-size: 10.5px; text-align: left; transition: background var(--dur-fast); }
button.line__nudge:hover { background: var(--safety); color: var(--ink); }
.line__nudge.is-on { background: var(--success-surface); color: var(--success-text); }
.line__qty { display: grid; justify-items: start; gap: 10px; }
.line__acts { display: flex; gap: 12px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.line__acts button { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.line__acts button:hover { color: var(--ink); }
.line__acts [data-rm]:hover { color: var(--signal); }
.line__price { display: grid; justify-items: end; gap: 6px; text-align: right; }
.line__price b { font: 900 1.7rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.line__price .mono { font-size: 10.5px; color: var(--text-muted); }
.line__price s { opacity: .7; }
@media (max-width: 767px) {
  .line { grid-template-columns: 80px minmax(0, 1fr); gap: 12px 14px; }
  .line__qty { grid-column: 2; grid-row: 2; }
  .line__price { grid-column: 2; grid-row: 3; justify-items: start; text-align: left; }
  .line__art { grid-row: span 3; align-self: start; }
}

/* delivery */
.dopts { display: grid; gap: 8px; margin-top: 16px; }
.dopt { --c: 10px; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; background: var(--surface-page); cursor: pointer; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); box-shadow: inset 0 0 0 1px var(--border-subtle); transition: box-shadow var(--dur-base), background var(--dur-base); }
.dopt input { position: absolute; opacity: 0; }
.dopt:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.dopt:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.dopt.is-on { background: var(--surface-raised); box-shadow: inset 0 0 0 2px var(--ink); }
.dopt.is-on::after { content: ""; position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; background: linear-gradient(135deg, transparent 50%, var(--safety) 50%); }
.dopt.is-off { opacity: .55; cursor: not-allowed; }
.dopt.is-off:hover { box-shadow: inset 0 0 0 1px var(--border-subtle); }
.dopt__ic { --c: 6px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--ink); color: var(--shell-12); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.dopt.is-on .dopt__ic { background: var(--safety); color: var(--ink); }
.dopt__t { display: grid; gap: 3px; }
.dopt__t b { font-weight: 600; }
.dopt__t span { font-size: var(--text-xs); color: var(--text-secondary); }
.dopt__t .cd { padding: 1px 5px; background: var(--ink); color: var(--safety); font: 600 11px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.dopt__p { font-size: 12px; font-weight: 600; }
.dsub { margin-top: 14px; }
.dsub:empty { display: none; }
.dsub__lbl { margin-bottom: 8px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.dsub__note { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); color: var(--text-secondary); }
.regions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.region { --c: 7px; display: grid; gap: 4px; padding: 10px 12px; text-align: left; background: var(--surface-page); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.region b { font-size: var(--text-sm); }
.region .mono { font-size: 9.5px; color: var(--text-muted); }
.region.is-on { background: var(--ink); color: var(--shell-12); box-shadow: none; }
.region.is-on .mono { color: var(--safety); }
.pbranches { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pbr { --c: 8px; position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 6px; padding: 10px 12px; cursor: pointer; background: var(--surface-page); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.pbr input { position: absolute; opacity: 0; }
.pbr:has(input:focus-visible) { outline: 2px solid var(--focus-ring); }
.pbr.is-on { box-shadow: inset 0 0 0 2px var(--ink); background: var(--surface-raised); }
.pbr__c { grid-row: span 2; align-self: start; padding: 5px 6px; background: var(--ink); color: var(--shell-12); font-size: 10px; }
.pbr.is-on .pbr__c { background: var(--safety); color: var(--ink); }
.pbr__t { display: grid; gap: 2px; }
.pbr__t b { font-size: var(--text-sm); }
.pbr__t .mono { font-size: 9.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.pbr__s { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; line-height: 1.3; }
.pbr__s.is-ok .dot { background: var(--ok); } .pbr__s.is-low .dot { background: var(--safety); } .pbr__s.is-out .dot { background: var(--signal); }
@media (max-width: 767px) { .regions { grid-template-columns: 1fr 1fr; } .pbranches { grid-template-columns: 1fr; } }
@media (max-width: 559px) { .dopt { grid-template-columns: 38px 1fr; } .dopt__ic { width: 38px; height: 38px; } .dopt__p { grid-column: 2; } }

/* trade details */
.tradebox summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); cursor: pointer; list-style: none; }
.tradebox summary::-webkit-details-marker { display: none; }
.tradebox summary h2 small { font-size: 9.5px; font-weight: 500; letter-spacing: .08em; color: var(--text-muted); text-transform: uppercase; }
.tradebox summary .i { transition: transform var(--dur-base) var(--ease-snap); }
.tradebox[open] summary .i { transform: rotate(45deg); }
.tradebox__body { display: grid; gap: 12px; padding-top: 16px; }
.tradebox__lede { font-size: var(--text-sm); color: var(--text-secondary); max-width: 64ch; }
.tfields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tcheck { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.tcheck input { width: 18px; height: 18px; accent-color: var(--ink); }
@media (max-width: 559px) { .tradebox summary h2 { flex-wrap: wrap; } .tfields { grid-template-columns: 1fr; } }

/* add-ons */
.addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.addon { --c: 10px; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; background: var(--surface-page); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.addon__art { width: 56px; height: 56px; background: var(--surface-plate); }
.addon__art .tool { width: 100%; height: 100%; }
.addon__t { display: grid; gap: 3px; min-width: 0; }
.addon__t b { font-size: var(--text-xs); font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addon__t .mono { font-size: 9.5px; color: var(--text-muted); }
@media (max-width: 559px) { .addons { grid-template-columns: 1fr; } }

/* ---------- summary ---------- */
.ksum { position: sticky; top: calc(var(--bar-h) + var(--head-h) + var(--nav-h) + 20px); transition: top .35s var(--ease-snap); }
html.bar-hidden .ksum { top: calc(var(--head-h) + var(--nav-h) + 20px); }
.ksum__card { --c: 22px; display: grid; gap: 14px; padding: 22px; background: var(--surface-raised); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); border-top: 6px solid var(--safety); }
.ksum__head { display: flex; justify-content: space-between; align-items: center; }
.ksum__head h2 { font: 900 1.9rem/1 var(--font-display); text-transform: uppercase; }
.ksum__head .mode { margin: 0; }
.ksum__rows { display: grid; border-top: 2px solid var(--ink); }
.ksum__rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.ksum__rows dt { display: grid; gap: 2px; }
.ksum__rows dt small { font-size: 9.5px; letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase; }
.ksum__rows dd { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ksum__rows .is-save dd { color: var(--success-text); }
.ksum__vat { font-size: var(--text-xs) !important; color: var(--text-secondary); border-bottom-style: dashed !important; }
.ksum__vat dd { font-weight: 500 !important; font-family: var(--font-mono); font-size: 11px; }
.promo { display: grid; gap: 6px; }
.promo > label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.promo__row { display: flex; }
.promo__row input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--border-default); border-right: 0; background: var(--surface-page); font: 600 var(--text-sm)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; border-radius: 0; }
.promo__row input:focus { outline: 0; border-color: var(--ink); }
.promo__row .btn { --c: 0px; min-height: 42px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.promo__msg { font-size: 10.5px; color: var(--text-muted); }
.promo__msg.is-ok { color: var(--success-text); }
.promo__msg.is-bad { color: var(--danger-text); }
.promo__msg .linkbtn { margin-left: 6px; font-size: 10px; }
.ksum__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0 2px; border-top: 2px solid var(--ink); }
.ksum__total .mono { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.ksum__total b { font: 900 2.8rem/.9 var(--font-display); font-variant-numeric: tabular-nums; }
.ksum__card > .btn--line { --fill: var(--surface-raised); }
.trust { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.trust li { display: flex; align-items: center; gap: 10px; }
.trust .i { width: 16px; height: 16px; color: var(--amber-11); }
@media (max-width: 1023px) { .ksum { position: relative; top: 0; } html.bar-hidden .ksum { top: 0; } }

/* ---------- empty ---------- */
.kempty { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 6vw, 88px); }
.kempty__art { --c: 32px; aspect-ratio: 1.1; display: grid; place-items: center; background-color: var(--surface-plate); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.kempty__art svg { width: 80%; height: 80%; overflow: visible; }
.kempty__art .tool { animation: rattle 4s var(--ease-standard) infinite; transform-origin: 50% 80%; }
@keyframes rattle { 0%, 88%, 100% { transform: none; } 91% { transform: rotate(-2deg); } 94% { transform: rotate(2deg); } 97% { transform: rotate(-1deg); } }
.kempty .dim text { fill: var(--amber-11); font-size: 11px; }
.kempty__copy { display: grid; justify-items: start; gap: 20px; }
.kempty__copy .h-1 em { color: var(--ink); background: linear-gradient(transparent 58%, var(--safety) 58% 88%, transparent 88%); }
.kempty__cta { display: flex; gap: 8px; flex-wrap: wrap; }
.kempty__cta .btn--line { --fill: var(--surface-page); }
@media (max-width: 767px) { .kempty { grid-template-columns: 1fr; } .kempty__art { max-width: 420px; } }

/* ---------- suggestions ---------- */
.ksugg { padding-block: clamp(48px, 6vw, 96px); background: var(--surface-raised); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.rail::-webkit-scrollbar { display: none; }
.rail > .card { scroll-snap-align: start; background: var(--surface-page); }
.rail > .card .plate--mini { background: var(--surface-raised); }
.rail > .card .card__acts .btn--line { --fill: var(--surface-page); }
@media (max-width: 1279px) { .rail { grid-auto-columns: calc((100% - 32px) / 3); } }
@media (max-width: 1023px) { .rail { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 559px) { .rail { grid-auto-columns: 78%; gap: 10px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } .ksugg .sec-head__r { display: none; } }

/* ---------- mobile checkout bar ---------- */
.kbar { display: none; }
@media (max-width: 1023px) {
  .kbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-overlay) - 3); display: block; background: rgba(20, 21, 23, .9); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-top: 2px solid var(--safety); }
  .kbar__in { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 70px; padding-block: 10px; }
  .kbar__in > div { display: grid; gap: 3px; }
  .kbar .mono { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--shell-11); }
  .kbar b { font: 900 1.8rem/1 var(--font-display); color: var(--safety); }
  body.page-cart:not(.cart-empty) .to-top { bottom: 90px; }
  body.page-cart:not(.cart-empty) .toast { bottom: 94px; }
  body.page-cart:not(.cart-empty) .footer { padding-bottom: 70px; }
  body.cart-empty .kbar { display: none; }
}