/* ============================================================
   THE BINDER DRAWER — every page
   ------------------------------------------------------------
   Moved out of shop.css so the drawer is not a shop-only object.
   The binder follows the visitor across all three pages, so its
   panel, its scrim and its capture field have to exist on all
   three too. shop.css keeps only what is genuinely the shop's:
   the grid, the rail, quick view, the standing whole-binder bar.

   Load order on every page: after the page's own styles, before
   type-scale.css — the scale owns every font-size and must win.
   ============================================================ */

/* ---------- panel ---------- */
.drawer{position:fixed;top:0;right:0;bottom:0;width:372px;max-width:88vw;background:var(--paper);
  border-left:1px solid var(--ink);z-index:120;transform:translateX(101%);
  transition:transform .42s cubic-bezier(.22,1,.28,1);display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-h{padding:22px 24px 16px;border-bottom:1px solid var(--rule);display:flex;
  justify-content:space-between;align-items:flex-start}
.drawer-h h3{font-size:21px}
.drawer-h .sub{font-family:var(--sans);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:3px}
.xbtn{background:transparent;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--muted)}
.xbtn:hover{color:var(--ink)}
.drawer-b{flex:1;overflow-y:auto;padding:0 24px}
.dempty{color:var(--muted);padding:26px 0;font-style:italic}
.dline{display:flex;justify-content:space-between;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--rule);font-size:16px;align-items:flex-start}
.dline .rm{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:15px;
  padding:0 0 0 8px}
.dline .rm:hover{color:var(--coral)}
/* a stored SKU that no longer resolves: visibly flagged, never silently kept
   at a stale price and never silently dropped */
.dline.detached{color:var(--coral);font-style:italic;font-size:15px}
.upsell{margin:16px 0;padding:15px;border:1px solid var(--coral);
  border-left-width:3px}
.upsell p{margin:0 0 11px;font-size:15.5px;line-height:1.42}
.upsell strong{font-family:var(--serif);font-style:italic}
.upsell button{font-family:var(--sans);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  padding:9px 13px;background:var(--coral);color:#fff;border:0;cursor:pointer}
.drawer-f{border-top:1px solid var(--rule);padding:18px 24px 24px}
.totals{display:flex;justify-content:space-between;font-family:var(--serif);font-size:20px;
  padding-bottom:14px}
.scrim{position:fixed;inset:0;background:rgba(17,17,17,.32);z-index:110;opacity:0;
  pointer-events:none;transition:opacity .35s}
.scrim.on{opacity:1;pointer-events:auto}

/* The binder button is a real control on every page now, not a link to the
   shop, so it has to read as one under the cursor. */
.binder-btn{cursor:pointer;transition:background .2s,color .2s}
.binder-btn:hover{background:var(--ink);color:#fff}
.binder-btn:hover .n{color:#fff}

/* ---------- email capture ----------
   The delivery address, and the hook for "finish what you carted". */
.capbox{border-top:1px solid var(--rule);padding:16px 0 4px;margin-bottom:14px}
.capbox label{display:block;font-family:var(--serif);font-size:18px;line-height:1.25;
  margin-bottom:9px}
.caprow{position:relative}
.caprow input{width:100%;padding:12px 38px 12px 13px;border:1px solid var(--rule);
  font-family:var(--text);font-size:16px;outline:none;background:transparent;
  transition:border-color .25s,box-shadow .25s}
.caprow input:focus{border-color:var(--jade);box-shadow:0 0 0 3px rgba(15,122,110,.10)}
.captick{position:absolute;right:12px;top:50%;transform:translateY(-50%) scale(.6);
  color:var(--jade);font-size:15px;opacity:0;transition:opacity .3s,transform .35s cubic-bezier(.34,1.4,.64,1)}
.capbox.done .caprow input{border-color:var(--jade)}
.capbox.done .captick{opacity:1;transform:translateY(-50%) scale(1)}
.capnote{font-family:var(--sans);font-size:9px;letter-spacing:.05em;line-height:1.55;
  color:#9A948E;margin:8px 0 0;font-weight:300}
.capnote b{color:var(--muted);font-weight:400}
.capbox.done .capnote{color:var(--jade)}
.capbox.done .capnote b{color:var(--jade)}