/* ============================================================
   Cart drawer — Storefront API basket. Colours via tokens only.
   ============================================================ */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

/* Add-to-cart CTA — orange, glowing, larger + bolder (owner, 2026-08-10) */
.buy-cta {
  background: var(--accent);
  font-family: var(--font-card);
  font-weight: 760;
  font-size: 1.12rem;
  padding: var(--sp-4);
  box-shadow: 0 4px 20px rgba(228, 87, 46, 0.45);
  transition: background var(--t), box-shadow var(--t), filter var(--t);
}
.buy-cta:hover { background: var(--accent); filter: brightness(0.96); box-shadow: 0 6px 26px rgba(228, 87, 46, 0.62); }
/* "Yes" for printing + badges turns orange when selected, not black */
#printYes.sel, #badgeYes.sel { background: var(--accent); border-color: var(--accent); color: var(--base); }

/* Trust row: equal-height items when stacked on mobile so they read uniform */
@media (max-width: 640px) {
  .trust-item { min-height: 84px; align-items: center; }
}

/* Sticky add-to-cart bar (appears when the main CTA scrolls away) */
.sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; display: none; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--base); border-top: 1px solid var(--rule-c); box-shadow: 0 -6px 22px rgba(20, 17, 15, 0.12); }
.sticky-buy.on { display: flex; }
.sb-img { width: 42px; height: 42px; object-fit: cover; border-radius: var(--radius); background: var(--base-warm); flex: 0 0 auto; }
.sb-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sb-name { font: 680 0.9rem var(--font-card); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-price { font: 740 0.9rem var(--font-card); }
.sb-size { position: relative; flex: 0 0 auto; }
.sb-size-btn { min-width: 66px; border: 1px solid var(--rule-c); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); font: 600 0.85rem var(--font-mono); background: var(--base); color: var(--muted); cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.sb-size-btn.chosen { color: var(--ink); }
.sb-size-btn::after { content: "\25B2"; font-size: 0.55em; opacity: 0.55; }
.sb-size-menu { position: absolute; bottom: calc(100% + 6px); left: 0; margin: 0; padding: 4px; list-style: none; min-width: 100%; max-height: 46vh; overflow-y: auto; background: var(--base); border: 1px solid var(--rule-c); border-radius: var(--radius); box-shadow: 0 -8px 24px rgba(20, 17, 15, 0.18); z-index: 810; }
.sb-size-menu[hidden] { display: none; }
.sb-size-menu li { padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); cursor: pointer; font: 600 0.9rem var(--font-mono); color: var(--ink); }
.sb-size-menu li:hover, .sb-size-menu li.sel { background: var(--ink); color: var(--base); }
.sb-add { background: var(--accent); color: var(--base); border: 0; border-radius: var(--radius); padding: var(--sp-3) var(--sp-6); font: 740 0.95rem var(--font-card); text-transform: uppercase; letter-spacing: 0.01em; cursor: pointer; flex: 0 0 auto; box-shadow: 0 2px 14px rgba(228, 87, 46, 0.42); }
.sb-add:hover { filter: brightness(0.96); }
@media (max-width: 560px) { .sb-price { display: none; } .sb-add { padding: var(--sp-3) var(--sp-4); font-size: 0.85rem; } .sb-name { font-size: 0.82rem; } }

/* Ships-by estimate under the CTA */
.ship-eta { margin: var(--sp-3) 0 0; font: 500 0.85rem var(--font-ui); color: var(--ink); display: flex; align-items: center; gap: var(--sp-2); }
.ship-eta strong { font-weight: 700; }
.ship-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); display: inline-block; flex: 0 0 auto; }

/* Size-guide modal */
.buy-label-row { display: flex; align-items: baseline; justify-content: space-between; }
.size-guide-link { background: none; border: 0; cursor: pointer; font: 600 0.8rem var(--font-ui); color: var(--accent); text-decoration: underline; padding: 0; }
.sg-modal { position: fixed; inset: 0; z-index: 902; display: flex; align-items: center; justify-content: center; }
.sg-modal[hidden] { display: none; }
.sg-overlay { position: absolute; inset: 0; background: rgba(20, 17, 15, 0.5); }
.sg-box { position: relative; z-index: 1; background: var(--base); color: var(--ink); border-radius: var(--radius); max-width: 460px; width: 92vw; max-height: 86vh; overflow-y: auto; padding: var(--sp-6); box-shadow: 0 20px 60px rgba(20, 17, 15, 0.32); }
.sg-close { position: absolute; top: var(--sp-3); right: var(--sp-4); background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--muted); }
.sg-close:hover { color: var(--ink); }
.sg-box h3 { margin: 0 0 2px; font: 760 1.2rem var(--font-card); }
.sg-fit { font: 600 0.76rem var(--font-ui); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 var(--sp-4); }
.sg-measure h4 { margin: var(--sp-4) 0 var(--sp-2); font: 700 0.9rem var(--font-card); }
.sg-measure p { font: 400 0.85rem/1.5 var(--font-ui); color: var(--muted); margin: 0; }
.player-intro > summary { cursor: pointer; font: 680 0.95rem var(--font-card); color: var(--accent); list-style: none; padding: var(--sp-2) 0; }
.player-intro > summary::-webkit-details-marker { display: none; }
.account-link { display: flex; align-items: center; color: inherit; opacity: 0.9; transition: opacity var(--t); }
.account-link:hover { opacity: 1; }
.bag { position: relative; }
.bag-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--accent); color: var(--base);
  font: 700 11px/17px var(--font-ui);
  border-radius: 999px; text-align: center;
  display: none;
}
.bag-count.on { display: block; }

.cart-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(20, 17, 15, 0.5);
  opacity: 0; transition: opacity .2s ease;
}
.cart-overlay.open { opacity: 1; }

.cart-drawer {
  position: fixed; top: 0; right: 0; z-index: 901;
  width: min(420px, 92vw); height: 100%;
  background: var(--base); color: var(--ink);
  border-left: 1px solid var(--rule-c);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .24s ease;
  box-shadow: -8px 0 30px rgba(20, 17, 15, 0.18);
}
.cart-drawer.open { transform: translateX(0); }

.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--rule-c);
}
.cart-head h2 { margin: 0; font: 740 1.15rem/1 var(--font-card); letter-spacing: -0.01em; }
.cart-x {
  background: none; border: 0; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: var(--muted); padding: 0 4px;
}
.cart-x:hover { color: var(--ink); }

.cart-body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-6); }
.cart-empty { color: var(--muted); font: 400 .95rem/1.5 var(--font-ui); padding: var(--sp-8) 0; text-align: center; }

.cart-line { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule-c); }
.cart-line-img { width: 56px; height: 56px; background: var(--base-warm); border-radius: var(--radius); overflow: hidden; }
.cart-line-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-info { min-width: 0; }
.cart-line-name { font: 680 .9rem/1.2 var(--font-card); margin: 0 0 2px; }
.cart-line-meta { font: 400 .78rem/1.35 var(--font-ui); color: var(--muted); }
.cart-line-print { font: 400 .78rem/1.35 var(--font-ui); color: var(--accent); }
.cart-line-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.cart-line-price { font: 740 .9rem/1 var(--font-card); }
.cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--rule-c); border-radius: var(--radius); }
.cart-qty button { background: none; border: 0; width: 24px; height: 24px; cursor: pointer; color: var(--ink); font-size: .95rem; line-height: 1; }
.cart-qty button:disabled { color: var(--muted); cursor: default; }
.cart-qty span { min-width: 22px; text-align: center; font: 600 .82rem var(--font-mono); }
.cart-remove { background: none; border: 0; cursor: pointer; color: var(--muted); font: 400 .72rem var(--font-ui); text-decoration: underline; padding: 0; margin-top: 4px; }

.cart-foot { border-top: 1px solid var(--rule-c); padding: var(--sp-4) var(--sp-6) var(--sp-6); }
.cart-note { font: 400 .8rem/1.4 var(--font-ui); color: var(--muted); margin: 0 0 var(--sp-3); }
.cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-4); }
.cart-subtotal .lab { font: 600 .95rem var(--font-ui); }
.cart-subtotal .val { font: 740 1.35rem/1 var(--font-card); }
.cart-checkout {
  display: block; width: 100%; text-align: center;
  padding: var(--sp-4); border: 0; border-radius: var(--radius); cursor: pointer;
  background: var(--accent); color: var(--base);
  font: 740 1rem var(--font-card); letter-spacing: 0.01em; text-transform: uppercase;
}
.cart-checkout:hover { filter: brightness(0.94); }
.cart-secure { text-align: center; font: 400 .72rem var(--font-ui); color: var(--muted); margin: var(--sp-3) 0 0; }
.cart-busy { opacity: .55; pointer-events: none; }