/* ==========================================================================
   Piston Tribe: basket drawer (side cart)
   Desktop and tablet: a 420px panel from the right. Phone (≤640px): full width.
   Source of truth: basket-drawer-mockup.html (Plan/)

   RULES FOR THIS FILE
   - Copy it in as-is. Don't round, rename or "tidy" values.
   - Every selector is prefixed .pt-bk-. Nothing else on the site is styled.
   - Load it site-wide, because the drawer opens from the header on every page.
   - Tokens marked ASSUMED: if design-tokens.md differs, report it. Don't
     silently swap it.
   - Theme or plugin fixes go ONLY in the OVERRIDES block at the bottom, each
     with a comment.
   ========================================================================== */

:root{
  --pt-bk-ink:#1A1A1A;
  --pt-bk-paper:#FAF9F6;
  --pt-bk-white:#FFFFFF;
  --pt-bk-sunk:#F3F1EB;          /* ASSUMED */
  --pt-bk-line:#E4E2DB;
  --pt-bk-line-strong:#C9C7BF;
  --pt-bk-accent:#185FA5;
  --pt-bk-green:#1F6B45;         /* ASSUMED */
  --pt-bk-amber:#B26A00;         /* ASSUMED: stock-limit note only */
  --pt-bk-red:#A12622;           /* ASSUMED: errors only */
  --pt-bk-muted:#78746C;         /* ASSUMED */
  --pt-bk-soft:#55524C;          /* ASSUMED */
  --pt-bk-sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --pt-bk-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --pt-bk-w:420px;
}

/* 0. Scope ---------------------------------------------------------------- */
.pt-bk-drawer,.pt-bk-drawer *{box-sizing:border-box}
.pt-bk-drawer{font-family:var(--pt-bk-sans);font-size:15px;line-height:1.5;color:var(--pt-bk-ink);-webkit-font-smoothing:antialiased;text-align:left}
.pt-bk-drawer :focus-visible{outline:2px solid var(--pt-bk-accent);outline-offset:2px}
.pt-bk-drawer [hidden]{display:none!important}
.pt-bk-drawer p,.pt-bk-drawer h2,.pt-bk-drawer h3{margin:0;text-transform:none;letter-spacing:0}
.pt-bk-drawer a{color:var(--pt-bk-accent);text-decoration:none}
.pt-bk-drawer a:hover{text-decoration:underline;text-underline-offset:3px}
.pt-bk-drawer button{font:inherit;color:inherit;cursor:pointer;border-radius:0;text-transform:none;letter-spacing:0;box-shadow:none}

/* 1. Scrim and panel ------------------------------------------------------ */
.pt-bk-scrim{position:fixed;inset:0;z-index:9998;background:rgba(26,26,26,.5);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s}
.pt-bk-scrim.is-open{opacity:1;visibility:visible}
.pt-bk-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:9999;
  width:var(--pt-bk-w);max-width:100%;
  display:flex;flex-direction:column;
  background:var(--pt-bk-paper);box-shadow:-12px 0 32px rgba(0,0,0,.18);
  transform:translateX(100%);visibility:hidden;transition:transform .22s ease,visibility .22s;
}
.pt-bk-drawer.is-open{transform:none;visibility:visible}
body.pt-bk-lock{overflow:hidden}

/* 2. Head ----------------------------------------------------------------- */
.pt-bk-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px;padding:0 10px 0 20px;background:var(--pt-bk-white);border-bottom:1px solid var(--pt-bk-line)}
.pt-bk-title{font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.pt-bk-count{margin-left:6px;font:500 14px var(--pt-bk-mono);color:var(--pt-bk-muted)}
.pt-bk-close{width:44px;height:44px;padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center}
.pt-bk-close:hover{background:var(--pt-bk-sunk)}
.pt-bk-close svg{width:16px;height:16px;display:block}

/* 3. Body ----------------------------------------------------------------- */
.pt-bk-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}

/* "Added to your basket" / "{item} removed. Undo" strips */
.pt-bk-strip{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--pt-bk-line);font-size:14px;color:var(--pt-bk-soft)}
.pt-bk-strip b{color:var(--pt-bk-ink);font-weight:600}
.pt-bk-strip.is-added{background:var(--pt-bk-white);border-left:3px solid var(--pt-bk-green)}
.pt-bk-strip.is-added span{display:flex;gap:8px;align-items:center}
.pt-bk-strip.is-undo{background:var(--pt-bk-sunk)}
.pt-bk-strip.is-error{background:var(--pt-bk-white);border-left:3px solid var(--pt-bk-red);color:var(--pt-bk-red)}
.pt-bk-undo{padding:4px 0;border:0;background:none;color:var(--pt-bk-accent);font-weight:600;font-size:14px}

/* Item */
.pt-bk-item{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;padding:16px 20px;background:var(--pt-bk-white);border-bottom:1px solid var(--pt-bk-line)}
.pt-bk-item.is-busy{opacity:.55;pointer-events:none}
.pt-bk-thumb{width:72px;height:72px;overflow:hidden;border:1px solid var(--pt-bk-line);background:var(--pt-bk-sunk);display:block}
.pt-bk-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pt-bk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pt-bk-name{font-size:15px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pt-bk-drawer .pt-bk-name a{color:var(--pt-bk-ink)}
.pt-bk-line{font:600 15px var(--pt-bk-mono);white-space:nowrap}
.pt-bk-var{margin-top:4px!important;font-size:13.5px;color:var(--pt-bk-muted)}
.pt-bk-unit{margin-top:2px!important;font:12.5px var(--pt-bk-mono);color:var(--pt-bk-muted)}
.pt-bk-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.pt-bk-busy{position:absolute;right:20px;top:42px;font:12px var(--pt-bk-mono);color:var(--pt-bk-muted)}

/* Quantity stepper: 40px tall */
.pt-bk-qty{display:inline-grid;grid-template-columns:40px 44px 40px;height:40px;border:1px solid var(--pt-bk-line-strong);background:var(--pt-bk-white)}
.pt-bk-qty button{padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center;color:var(--pt-bk-ink)}
.pt-bk-qty button:hover{background:var(--pt-bk-sunk)}
.pt-bk-qty button:disabled{color:var(--pt-bk-line-strong);background:none;cursor:default}
.pt-bk-qty svg{width:12px;height:12px;display:block}
.pt-bk-qty output{display:flex;align-items:center;justify-content:center;border-left:1px solid var(--pt-bk-line);border-right:1px solid var(--pt-bk-line);font:600 15px var(--pt-bk-mono)}

.pt-bk-rm{padding:8px 0;border:0;background:none;font-size:13.5px;color:var(--pt-bk-soft);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--pt-bk-line-strong)}
.pt-bk-rm:hover{color:var(--pt-bk-ink)}
.pt-bk-note{grid-column:2;margin-top:8px!important;font-size:13px;color:var(--pt-bk-amber)}

/* Reassurance lines */
.pt-bk-info{display:grid;gap:10px;padding:14px 20px;font-size:13.5px;color:var(--pt-bk-soft)}
.pt-bk-info div{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start}
.pt-bk-info svg{width:16px;height:16px;margin-top:2px;display:block}

/* 4. Foot ----------------------------------------------------------------- */
.pt-bk-foot{flex:none;padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));background:var(--pt-bk-white);border-top:1px solid var(--pt-bk-line)}
.pt-bk-sub{display:flex;justify-content:space-between;align-items:baseline}
.pt-bk-sub span{font-size:15px;font-weight:700}
.pt-bk-sub b{font:700 18px var(--pt-bk-mono)}
.pt-bk-sub.is-stale b{color:var(--pt-bk-muted)}
.pt-bk-sub-note{margin:2px 0 12px!important;font-size:13px;color:var(--pt-bk-muted)}
.pt-bk-drawer .pt-bk-btn{width:100%;height:52px;padding:0 20px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;background:var(--pt-bk-ink);color:var(--pt-bk-paper);font:700 16px var(--pt-bk-sans);text-decoration:none}
.pt-bk-drawer .pt-bk-btn:hover{background:#000;color:var(--pt-bk-paper);text-decoration:none}
.pt-bk-drawer .pt-bk-btn[aria-disabled="true"]{opacity:.6;pointer-events:none}
.pt-bk-links{display:flex;justify-content:center;margin-top:10px;font-size:14px}
.pt-bk-drawer .pt-bk-links a{padding:6px 0;font-weight:600}
.pt-bk-drawer .pt-bk-links a.is-ink{color:var(--pt-bk-ink)}

/* 5. Empty ---------------------------------------------------------------- */
.pt-bk-empty{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:32px 24px}
.pt-bk-empty-ic{width:56px;height:56px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;border:1px solid var(--pt-bk-line-strong);background:var(--pt-bk-white)}
.pt-bk-empty-ic svg{width:24px;height:24px;display:block}
.pt-bk-empty h3{margin-bottom:6px!important;font-size:18px;font-weight:800}
.pt-bk-empty p{max-width:28ch;margin-bottom:20px!important;font-size:14.5px;color:var(--pt-bk-soft)}
.pt-bk-drawer .pt-bk-empty .pt-bk-btn{width:auto;height:48px;padding:0 22px}
.pt-bk-drawer .pt-bk-empty-alt{margin-top:12px;font-size:14px}

/* 6. Phone ---------------------------------------------------------------- */
@media (max-width:640px){
  .pt-bk-drawer{width:100%;box-shadow:none}
  .pt-bk-head{height:60px;padding:0 8px 0 16px}
  .pt-bk-strip,.pt-bk-item,.pt-bk-info{padding-left:16px;padding-right:16px}
  .pt-bk-busy{right:16px}
  .pt-bk-foot{padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px))}
}

@media (prefers-reduced-motion:reduce){
  .pt-bk-drawer,.pt-bk-scrim{transition:none}
}

/* ==========================================================================
   OVERRIDES: only more specific .pt-bk- selectors, each with a comment
   saying what it beats and why. List every one in the report.
   ========================================================================== */

/* "Qty 1" for a sold-individually line (brief §3: "no stepper, just 'Qty 1' in mono"). The mockup never
   draws that state, so pt-basket.css has no rule for it — this is the one addition, not a fight with anything. */
.pt-bk-drawer .pt-bk-qty1{display:inline-flex;align-items:center;height:40px;font:600 15px var(--pt-bk-mono);color:var(--pt-bk-ink)}

/* Remove at 13.5px / #55524C (brief §9). Beats pt-basket.css's own `.pt-bk-drawer button{font:inherit;color:inherit}`
   (0,1,1), which outranks `.pt-bk-rm` (0,1,0) and leaves Remove at 15px ink — the mockup renders it that way too
   (measured 15px / rgb(26,26,26)). Section 9 is the spec, so the value is restored with a two-class selector. */
.pt-bk-drawer .pt-bk-rm{font-size:13.5px;color:var(--pt-bk-soft)}
.pt-bk-drawer .pt-bk-rm:hover{color:var(--pt-bk-ink)}

/* Undo in the accent (pt-basket.css's own `.pt-bk-undo{color:var(--pt-bk-accent)}`), for the same reason as Remove:
   `.pt-bk-drawer button{color:inherit}` (0,1,1) outranks `.pt-bk-undo` (0,1,0) and the button came out ink. */
.pt-bk-drawer .pt-bk-undo{color:var(--pt-bk-accent)}

/* No dark box on Remove / Undo (Leon, 28 Sep: "dark background on hover"). GeneratePress prints an inline
   `button:hover, button:focus { background-color:#333; color:var(--base-3) }` (0,1,1) in the page head, which
   outranks `.pt-bk-rm` / `.pt-bk-undo` (0,1,0) the moment the pointer or keyboard lands on them. Two-class
   selectors restore the text-link look in every state; the colours are pt-basket.css's own. */
.pt-bk-drawer .pt-bk-rm:hover,.pt-bk-drawer .pt-bk-rm:focus,.pt-bk-drawer .pt-bk-rm:active{background:none;color:var(--pt-bk-ink)}
.pt-bk-drawer .pt-bk-undo:hover,.pt-bk-drawer .pt-bk-undo:focus,.pt-bk-drawer .pt-bk-undo:active{background:none;color:var(--pt-bk-accent)}
/* The close button and the stepper already set their own hover (sunk) — the same theme rule reaches their
   :focus and :active, so those states are pinned to the same values here. */
.pt-bk-drawer .pt-bk-close:focus,.pt-bk-drawer .pt-bk-close:active{background:var(--pt-bk-sunk);color:var(--pt-bk-ink)}
.pt-bk-drawer .pt-bk-qty button:focus,.pt-bk-drawer .pt-bk-qty button:active{background:var(--pt-bk-sunk);color:var(--pt-bk-ink)}
.pt-bk-drawer .pt-bk-qty button:disabled,.pt-bk-drawer .pt-bk-qty button:disabled:hover,.pt-bk-drawer .pt-bk-qty button:disabled:focus{background:none;color:var(--pt-bk-line-strong)}