/* ---------- the bag ----------------------------------------------------- */
/* The bag button is real now, so it stays reachable at every width. */
@media(max-width:900px){
  .nav-links a.bag{display:inline-block}
}
.nav-links a.bag{white-space:nowrap}
.nav-links a.bag.has{color:var(--beacon);opacity:1}

.cart-back{position:fixed;inset:0;background:rgba(18,36,75,.52);
  opacity:0;pointer-events:none;transition:opacity .32s var(--ease);z-index:300}
.cart-back.on{opacity:1;pointer-events:auto}

/* The shadow only exists while the drawer does. Translating a panel off screen
   does not take its box-shadow with it: offset 24px left with a 60px blur, the
   closed drawer was painting a soft grey band about eighty pixels wide down the
   right edge of every page, over the ticker, the product grid and the footer
   alike. It cost the ticker copy 5.0:1 down to 3.7:1 and it read as a vignette
   nobody had designed. box-shadow animates, so it fades in with the slide. */
.cart{position:fixed;top:0;right:0;bottom:0;width:min(430px,92vw);
  background:var(--linen);color:var(--harbour);z-index:301;
  display:flex;flex-direction:column;
  transform:translateX(100%);box-shadow:0 0 0 rgba(18,36,75,0);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease)}
.cart.on{transform:none;box-shadow:-24px 0 60px rgba(18,36,75,.22)}

.cart-head{display:flex;align-items:center;justify-content:space-between;
  padding:26px 26px 18px;border-bottom:1px solid var(--rule)}
.cart-head h2{font-size:1.35rem;letter-spacing:-.02em;font-weight:800}
.cart-head .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  opacity:.72;margin-left:10px}
.cart-x{background:none;border:0;cursor:pointer;color:inherit;
  width:38px;height:38px;border-radius:999px;font-size:1.1rem;line-height:1;
  display:grid;place-items:center;transition:background .2s var(--ease)}
.cart-x:hover{background:rgba(25,48,98,.08)}

.cart-body{flex:1;min-height:0;overflow-y:auto;padding:6px 26px}
.cart-line{display:grid;grid-template-columns:66px 1fr auto;gap:16px;
  padding:20px 0;border-bottom:1px solid var(--rule);align-items:start}
.cart-line img{width:66px;height:82px;object-fit:cover;border-radius:3px;
  background:#EFE7DA;display:block}
.cart-line b{display:block;font-weight:600;font-size:.95rem;line-height:1.3}
.cart-line .opt{font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;
  opacity:.6;line-height:1.7;margin-top:5px}
.cart-line .price{font-family:var(--mono);font-size:.78rem;white-space:nowrap}

.qty{display:inline-flex;align-items:center;gap:2px;margin-top:12px;
  border:1px solid var(--rule);border-radius:999px}
.qty button{background:none;border:0;cursor:pointer;color:inherit;
  width:30px;height:28px;font-size:.9rem;line-height:1;border-radius:999px;
  transition:background .2s var(--ease)}
.qty button:hover{background:rgba(25,48,98,.08)}
.qty span{font-family:var(--mono);font-size:.76rem;min-width:20px;text-align:center}
.cart-del{background:none;border:0;cursor:pointer;padding:0;margin-top:12px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;opacity:.45;color:inherit;text-decoration:underline}
.cart-del:hover{opacity:.9}

.cart-empty{padding:64px 0;text-align:center}
.cart-empty p{opacity:.6;margin-bottom:22px}

.cart-foot{border-top:1px solid var(--rule);padding:22px 26px 26px;
  display:flex;flex-direction:column;gap:14px}
/* ---------- where it is going ------------------------------------------
   The one question the bag has to ask, because Square asks for the address
   only after the price is settled. It sits above the figures it changes, so
   the cause is read before the effect. */
.cart-dest{display:flex;flex-direction:column;gap:7px}
.cart-dest label{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:#4A5876}
.cart-dest select{width:100%;font-family:var(--sans);font-size:.9rem;
  color:var(--harbour);background:#FFF;border:1px solid var(--rule);
  border-radius:3px;padding:11px 13px;line-height:1.3;
  /* the native arrow is left in place: a custom one is one more thing to
     maintain and native selects are the control every phone already knows */
  appearance:auto}
.cart-dest select:focus-visible{outline:2px solid var(--beacon);outline-offset:2px}

/* The postal code, asked for only where free local delivery is claimed. It sits
   directly under the destination that summons it, indented against the rule so
   it reads as a consequence of that choice rather than a new question. */
.cart-postal{display:flex;flex-direction:column;gap:7px;
  border-left:2px solid var(--rule);padding-left:14px;margin-top:-4px}
.cart-postal label{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:#4A5876}
.cart-postal input{width:100%;max-width:170px;font-family:var(--mono);
  font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--harbour);background:#FFF;border:1px solid var(--rule);
  border-radius:3px;padding:10px 12px}
.cart-postal input::placeholder{color:#8A93A8;text-transform:none;letter-spacing:.04em}
.cart-postal input:focus-visible{outline:2px solid var(--beacon);outline-offset:2px}
.cart-postal input[aria-invalid="true"]{border-color:var(--flare,#DC3513)}
/* quiet text carries its quietness as a colour, never as an opacity */
.cart-hint{font-size:.74rem;line-height:1.5;color:#4A5876;max-width:34ch}
.cart-hint.bad{color:#B02A0F}

.cart-rows{display:flex;flex-direction:column;gap:8px}
.cart-row{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:.76rem;color:#4A5876}
/* tabular figures so the decimal points line up down the column. The mono is
   already fixed width; the total is set in the sans and needs telling. */
.cart-row i{font-style:normal;color:var(--harbour);font-variant-numeric:tabular-nums}

.cart-sum{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:.82rem;
  border-top:1px solid var(--rule);padding-top:14px}
.cart-sum b{font-size:1.05rem;font-family:var(--sans);font-weight:700;
  font-variant-numeric:tabular-nums}
.cart-note{font-family:var(--mono);font-size:.66rem;letter-spacing:.03em;
  opacity:.72;line-height:1.7}
/* the sans, not the mono: this is a sentence someone has to read and act on,
   and the mono is for labels */
.cart-terms{font-family:var(--sans);font-size:.72rem;line-height:1.65;
  opacity:.6;margin-top:12px}
.cart-terms a{color:inherit;text-underline-offset:3px}
.cart-go{width:100%;border:0;cursor:pointer;background:var(--signal);
  color:var(--harbour);padding:17px 24px;border-radius:999px;
  font-family:var(--sans);font-size:.82rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;transition:filter .2s var(--ease)}
.cart-go:hover{filter:brightness(1.07)}
.cart-go[disabled]{opacity:.35;cursor:default;filter:none}
.cart-keep{background:none;border:0;cursor:pointer;color:inherit;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;opacity:.55;
  text-decoration:underline}
.cart-keep:hover{opacity:.9}
.cart-err{font-family:var(--mono);font-size:.7rem;line-height:1.7;
  color:var(--flare,#DC3513)}

body.cart-open{overflow:hidden}