/* =========================================================================
   KOSE v2 — platform-wide polish overrides (Phase X audit fixes).
   Loaded AFTER the design-system files on every vertical.
   ========================================================================= */

/* X3 — sparse rails must not stretch cards into monsters */
.rail{grid-auto-columns:minmax(220px,300px)}
@media(max-width:720px){ .rail{grid-auto-columns:minmax(160px,220px)} }

/* Product card v3 (TC): steady rhythm + compact round add */
.pcard__title--rhythm{min-height:2.7em}
.pcard__buyrow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px}
.pcard__pts{display:block;font-size:10.5px;font-weight:700;color:var(--gold);margin-top:2px}
.pcard__addmini{width:42px;height:42px;border-radius:50%;border:0;background:var(--brand-soft);color:var(--brand-deep);
  display:grid;place-items:center;cursor:pointer;transition:.15s;flex-shrink:0}
.pcard__addmini:hover{background:var(--brand);color:#fff;transform:scale(1.07)}
.pcard__addmini:active{transform:scale(.95)}
.pcard__addmini svg{width:19px;height:19px}
.pcard__oos{font-size:11.5px;font-weight:700;color:var(--ink-3)}
@media(max-width:720px){ .pcard__addmini{width:38px;height:38px} }

/* X6 — large icon buttons get proportionate glyphs */
.btn--icon.btn--lg svg{width:24px;height:24px}
.pcard__fav svg{width:18px;height:18px}

/* X7 — pagination, in the design system's voice */
.kpag{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.kpag a,.kpag span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);
  font-weight:700;font-size:14px;color:var(--ink-2);transition:.15s}
.kpag a:hover{border-color:var(--ink-3);color:var(--ink)}
.kpag .on{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.kpag .off{opacity:.4;pointer-events:none}

/* X8 — Eats mobile tabbar accent */
.tabbar--eats .tab--on{color:#C2381A}
.tabbar--eats .tab--ai .tab__ic{background:var(--warm)}

/* AI sheet on warm verticals */
.ai-h--warm{background:linear-gradient(120deg,#7a1d0e,var(--warm)) !important}

/* PDP fixes (TC screenshot): solo gallery + sane related sizing */
.gallery--solo{grid-template-columns:1fr !important}
.pgrid--rel{grid-template-columns:repeat(auto-fill,minmax(220px,300px))}

/* Category drill-down (Phase AB) */
.fopt--sub{margin-left:18px;font-size:13px}
.fopt--sub2{margin-left:36px;font-size:12.5px;color:var(--ink-3)}

/* Browse sidebar (TC): sticky, viewport-capped, collapsible groups —
   it can never sink below the grid again. */
.plp{align-items:start}
.filters{position:sticky;top:84px;max-height:calc(100vh - 110px);overflow:auto;scrollbar-width:thin;padding-right:4px}
details.fgroup{padding:0}
details.fgroup summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:16px 18px}
details.fgroup summary::-webkit-details-marker{display:none}
details.fgroup summary h4{margin:0}
details.fgroup summary::after{content:'';width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .18s;margin-left:10px}
details.fgroup[open] summary::after{transform:rotate(-135deg)}
details.fgroup .fgroup__b{padding:0 18px 16px}

/* OTP gate (TC) — one joined phone row + six digit boxes */
.kotp{--ac:var(--brand);--ac-deep:var(--brand-ink)}
.kotp--warm{--ac:var(--warm);--ac-deep:#C2381A}
.kotp-row{display:flex;height:54px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:var(--surface);overflow:hidden;transition:.15s}
.kotp-row:focus-within{border-color:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb, var(--ac) 14%, transparent)}
.kotp-row .pfx{display:flex;align-items:center;padding:0 14px 0 20px;font-weight:800;font-family:var(--font-display);color:var(--ink-2);background:var(--surface-2);border-right:1.5px solid var(--line)}
.kotp-row input{flex:1;border:0;background:none;padding:0 14px;font:inherit;font-size:16px;min-width:60px}
.kotp-row input:focus{outline:none}
.kotp-row .send{border:0;background:var(--ac);color:#fff;font:inherit;font-weight:800;font-size:14px;padding:0 22px;cursor:pointer;white-space:nowrap;transition:.15s}
.kotp-row .send:hover{background:var(--ac-deep)}
.kotp-row .send:disabled{opacity:.55;cursor:default}
.kotp-boxes{display:flex;gap:9px;margin-top:16px}
.kotp-boxes input{width:48px;height:56px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  text-align:center;font-family:var(--font-display);font-weight:800;font-size:22px;transition:.12s}
.kotp-boxes input:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb, var(--ac) 14%, transparent)}
.kotp-boxes input.full{border-color:var(--ac);background:color-mix(in srgb, var(--ac) 7%, var(--surface))}
@media(max-width:420px){ .kotp-boxes input{width:42px;height:50px;font-size:19px} }
.kotp-meta{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:13px;color:var(--ink-3);font-weight:600}
.kotp-meta button{border:0;background:none;color:var(--ac-deep);font:inherit;font-weight:800;cursor:pointer;padding:0}
.kotp-meta button:disabled{color:var(--ink-3);cursor:default;font-weight:600}
.kotp-verify{margin-top:16px}

/* Deliver-to as quiet text (TC) — no pill-vs-pill fight with the search */
.loc{border:0 !important;background:none !important;box-shadow:none !important;padding:0 8px;height:auto;cursor:pointer}
.loc:hover .loc__t b{color:var(--brand-ink)}
.loc .loc__t b{display:inline-flex;align-items:center;gap:5px}
.loc .loc__t b::after{content:'';width:7px;height:7px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg) translateY(-2px)}
.addrsel{border:0 !important;background:none !important;box-shadow:none !important}

/* Promo band rhythm to match the demo (TC screenshot) */
.promo{padding:36px 32px;min-height:248px}
.promo .tag{margin-bottom:10px}
.promo h3{font-size:26px}
.promo p{font-size:14.5px;margin:8px 0 18px}
.promo .btn{margin-top:auto}

/* Group buy band (Phase AA) */
.gbjoin-note{font-size:12px;color:var(--ink-3);margin-top:8px}
.gbseat{background:transparent !important;border:2px dashed var(--line) !important;color:transparent !important}

/* X13 — back breadcrumb */
.backcrumb{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:var(--ink-3);padding:16px 0 0}
.backcrumb:hover{color:var(--ink)}
.backcrumb svg{width:16px;height:16px}