/* ── CART: nav badge, slide-in drawer, toast ─────────────────────────────
   Pairs with assets/cart.js. Loaded on every page that loads cart.js.
   Uses the site's own tokens (site.css :root) so the drawer looks like the
   rest of the shop rather than a bolted-on widget.
   ──────────────────────────────────────────────────────────────────────── */

/* ── nav badge ───────────────────────────────────────────────────────────
   Injected by cart.js into .nav-right, before the hamburger. Visible at every
   width — on a phone the hamburger hides the links but the cart stays out,
   because a cart you have to open a menu to find is a cart nobody opens. */
.cart-btn{
  position:relative;display:inline-flex;align-items:center;gap:.4rem;
  min-width:44px;min-height:44px;padding:.4rem .7rem;cursor:pointer;
  background:transparent;border:1px solid var(--line-3);border-radius:8px;
  color:var(--ink);font:inherit;font-size:1.05rem;line-height:1;
  transition:border-color .18s,color .18s,transform .18s;
}
.cart-btn:hover{border-color:var(--crimson);color:var(--crimson)}
.cart-btn:focus-visible{outline:3px solid var(--crimson);outline-offset:2px}
.cart-btn .cn{
  font-family:var(--mono);font-size:.72rem;font-weight:700;line-height:1;
  min-width:1.35rem;padding:.22rem .3rem;border-radius:99px;text-align:center;
  background:var(--line);color:var(--ink);transition:background .18s,color .18s;
}
.cart-btn.has .cn{background:var(--crimson);color:var(--cream)}
/* Fires on add. The badge is the only feedback a customer gets when they add
   from inside the product modal, so it has to actually catch the eye. */
@keyframes cartBump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
.cart-btn.bump{animation:cartBump .42s cubic-bezier(.34,1.56,.64,1)}
@media(prefers-reduced-motion:reduce){.cart-btn.bump{animation:none}}

/* ── scrim + panel ───────────────────────────────────────────────────── */
.cart-scrim{
  position:fixed;inset:0;z-index:9000;display:flex;justify-content:flex-end;
  background:rgba(28,26,23,0);visibility:hidden;
  transition:background .28s ease,visibility 0s linear .28s;
}
.cart-scrim.on{background:rgba(28,26,23,.55);visibility:visible;transition:background .28s ease}
body.cart-open{overflow:hidden}

.cart-panel{
  width:min(29rem,100%);height:100%;display:flex;flex-direction:column;
  background:var(--cream);border-left:1px solid var(--line-2);
  box-shadow:-14px 0 40px rgba(28,26,23,.18);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
}
.cart-scrim.on .cart-panel{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){
  .cart-panel{transition:none}
  .cart-scrim{transition:visibility 0s}
}

.cart-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.2rem;border-bottom:1px solid var(--line);
  background:var(--paper);flex:0 0 auto;
}
.cart-head h2{font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.cart-head .cart-n{font-family:var(--mono);font-size:.74rem;font-weight:400;color:var(--ink-soft)}
.cart-x{
  background:none;border:1px solid var(--line-3);border-radius:8px;cursor:pointer;
  min-width:40px;min-height:40px;font-size:.95rem;color:var(--ink);
}
.cart-x:hover{border-color:var(--crimson);color:var(--crimson)}
.cart-x:focus-visible{outline:3px solid var(--crimson);outline-offset:2px}

/* The list scrolls; the totals and the buttons never do. On a short phone the
   old way of doing this puts "Pay" below the fold and it looks like there
   isn't one. */
.cart-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:.4rem 1.2rem 1rem}
.cart-foot{flex:0 0 auto;padding:1rem 1.2rem 1.2rem;border-top:1px solid var(--line);background:var(--paper)}

/* ── empty state ─────────────────────────────────────────────────────── */
.cart-empty{text-align:center;padding:3rem 1rem}
.cart-empty .ce-i{font-size:2.4rem;opacity:.35;margin-bottom:.6rem}
.cart-empty h3{font-size:1.05rem;margin-bottom:.4rem}
.cart-empty p{color:var(--ink-soft);font-size:.9rem;margin-bottom:1.2rem;line-height:1.5}

/* ── a line ──────────────────────────────────────────────────────────── */
.cart-line{
  display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:.8rem;
  padding:.9rem 0;border-bottom:1px solid var(--line);align-items:start;
}
.cl-img{
  width:70px;height:85px;object-fit:contain;border-radius:8px;
  background:var(--cream-2);border:1px solid var(--line);
}
.cl-n{font-weight:700;font-size:.9rem;line-height:1.3;margin-bottom:.25rem}
.cl-c{
  display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;
  font-size:.72rem;color:var(--ink-soft);margin-bottom:.5rem;
}
.cl-sw{
  width:.85rem;height:.85rem;border-radius:50%;display:inline-block;
  border:1px solid rgba(28,26,23,.22);flex:0 0 auto;
}
.cl-qty{display:flex;align-items:center;gap:.28rem}
.cl-b{
  width:30px;height:30px;border:1px solid var(--line-3);background:var(--paper);
  border-radius:7px;cursor:pointer;font-size:1rem;line-height:1;color:var(--ink);
}
.cl-b:hover{border-color:var(--crimson);color:var(--crimson)}
.cl-b:focus-visible,.cl-q:focus-visible,.cl-rm:focus-visible{outline:2px solid var(--crimson);outline-offset:1px}
.cl-q{
  width:2.6rem;height:30px;text-align:center;font-family:var(--mono);font-size:.8rem;
  border:1px solid var(--line-3);border-radius:7px;background:var(--paper);color:var(--ink);
}
.cl-rm{
  background:none;border:0;cursor:pointer;color:var(--ink-soft);
  font-size:.72rem;text-decoration:underline;padding:.3rem .2rem;margin-left:.25rem;
}
.cl-rm:hover{color:var(--crimson)}
.cl-right{text-align:right;display:flex;flex-direction:column;gap:.15rem}
.cl-p{font-family:var(--mono);font-weight:700;font-size:.88rem;white-space:nowrap}
.cl-p em{font-style:normal;font-weight:400;font-size:.76rem;color:var(--ink-soft)}
.cl-ea{font-family:var(--mono);font-size:.68rem;color:var(--ink-soft);white-space:nowrap}

/* ── shipping block ──────────────────────────────────────────────────── */
.cart-ship{
  margin-top:1rem;padding:.9rem;border:1px solid var(--line);
  border-radius:10px;background:var(--paper);
}
.cs-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem}
.cs-row:last-of-type{margin-bottom:0}
.cs-row label{font-size:.76rem;font-weight:600;color:var(--ink-soft);flex:0 0 6.6rem}
.cs-row select,.cs-row input{
  flex:1 1 auto;min-width:0;padding:.5rem .6rem;font:inherit;font-size:.82rem;
  border:1px solid var(--line-3);border-radius:8px;background:var(--cream);color:var(--ink);
}
.cs-row input{font-family:var(--mono);letter-spacing:.06em}
.cs-row select:focus-visible,.cs-row input:focus-visible{outline:2px solid var(--crimson);outline-offset:1px}

.cs-out{
  margin-top:.7rem;font-size:.8rem;color:var(--ink-soft);line-height:1.45;
  display:flex;flex-direction:column;gap:.12rem;
}
.cs-out:empty{margin-top:0}
.cs-out b{font-family:var(--mono);font-size:1.15rem;color:var(--ink);font-weight:700}
.cs-out.live b{color:var(--ok)}
.cs-alt{font-size:.7rem;color:var(--ink-soft);opacity:.85}

/* ── totals + the two ways out ───────────────────────────────────────── */
.cf-sums{margin-bottom:.8rem}
.cf-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.22rem 0;font-size:.84rem;color:var(--ink-soft)}
.cf-row b{font-family:var(--mono);color:var(--ink);font-weight:700}
.cf-row b em{font-style:normal;font-weight:400;font-size:.76rem;color:var(--ink-soft)}
.cf-row.tot{
  border-top:1px solid var(--line);margin-top:.4rem;padding-top:.5rem;
  font-size:.95rem;color:var(--ink);font-weight:700;
}
.cf-row.tot b{font-size:1.2rem}
/* Says which missing thing is holding the pay button, in the words of the
   thing that's missing — "add your ZIP" beats a greyed-out button with no
   explanation, which just reads as broken. */
.cf-why{
  font-size:.75rem;line-height:1.45;color:var(--ink-soft);
  background:var(--crimson-soft);border-radius:8px;padding:.55rem .7rem;margin-bottom:.7rem;
}
.cf-pay,.cf-quote{width:100%;justify-content:center;margin-bottom:.5rem}
.cf-pay[disabled]{opacity:.42;cursor:not-allowed;transform:none;box-shadow:0 3px 0 var(--crimson-d)}
.cf-pay[disabled]:hover{transform:none}
.cf-quote{font-size:.82rem;padding:.6rem 1rem}
.cf-fine{font-size:.68rem;color:var(--ink-soft);text-align:center;line-height:1.45;margin-top:.3rem}

/* ── toast ───────────────────────────────────────────────────────────
   Confirms an add without moving anyone. Sits above the product modal
   (z 8000-ish) because that is exactly where most adds happen. */
.cart-toast{
  position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,140%);
  z-index:9500;display:flex;align-items:center;gap:.9rem;
  max-width:min(26rem,calc(100vw - 2rem));
  padding:.75rem 1rem;border-radius:10px;
  background:var(--plate);color:var(--cream);
  font-size:.85rem;line-height:1.35;box-shadow:0 8px 26px rgba(28,26,23,.34);
  opacity:0;transition:transform .3s cubic-bezier(.32,.72,0,1),opacity .3s;
}
.cart-toast.on{transform:translate(-50%,0);opacity:1}
.cart-toast .ct-go{
  flex:0 0 auto;background:none;border:1px solid rgba(244,239,227,.42);
  color:var(--cream);border-radius:7px;padding:.35rem .65rem;
  font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;white-space:nowrap;
}
.cart-toast .ct-go:hover{background:rgba(244,239,227,.14);border-color:var(--cream)}
@media(prefers-reduced-motion:reduce){.cart-toast{transition:opacity .2s}}

/* ── cart recap on quote.html ────────────────────────────────────────
   What the basket held, shown above the form so nobody has to trust that it
   came across. Read-only: there is ONE cart and it lives in the drawer, so
   "Edit cart" opens that rather than making a second editable copy that can
   disagree with the first. */
.cart-recap{
  border:1px solid var(--line-2);border-radius:10px;background:var(--cream-2);
  padding:.9rem 1rem;margin-bottom:1.2rem;
}
.cr-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.6rem}
.cr-head b{font-size:.92rem}
.cr-edit{
  background:none;border:0;cursor:pointer;color:var(--crimson);
  font:inherit;font-size:.78rem;font-weight:600;text-decoration:underline;padding:.2rem;
}
.cr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.cr-list li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:.5rem;align-items:center;font-size:.82rem;
}
.cr-q{font-family:var(--mono);font-size:.75rem;color:var(--ink-soft)}
.cr-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-c{display:inline-flex;align-items:center;gap:.2rem;font-size:.68rem;color:var(--ink-soft)}
.cr-c i{width:.72rem;height:.72rem;border-radius:50%;display:inline-block;border:1px solid rgba(28,26,23,.22)}
.cr-p{font-family:var(--mono);font-size:.78rem;font-weight:700;white-space:nowrap}
.cr-sub{
  margin-top:.6rem;padding-top:.5rem;border-top:1px solid var(--line);
  font-size:.82rem;display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;
}
.cr-sub b{font-family:var(--mono);font-size:.95rem}
.cr-sub small{color:var(--ink-soft);font-size:.7rem}

/* ── phone ───────────────────────────────────────────────────────────
   Full-bleed panel, and the label column in the shipping block stacks so a
   ZIP field isn't squeezed into 4rem next to its label. */
@media(max-width:560px){
  .cart-panel{width:100%;border-left:0}
  .cart-line{grid-template-columns:58px minmax(0,1fr) auto;gap:.65rem}
  .cl-img{width:58px;height:70px}
  .cs-row{flex-direction:column;align-items:stretch;gap:.3rem}
  .cs-row label{flex:none}
  .cart-toast{left:1rem;right:1rem;max-width:none;transform:translate(0,140%)}
  .cart-toast.on{transform:translate(0,0)}
}

/* "+3" when a line carries more colour slots than we draw dots for. Forty-one
   models in the catalogue have more than six; Crosswords has twenty. */
.cl-more{
  font-family:var(--mono);font-size:.62rem;font-weight:700;color:var(--ink-soft);
  background:var(--cream-2);border:1px solid var(--line);border-radius:99px;
  padding:.05rem .3rem;line-height:1.25;flex:0 0 auto;
}