/* =============================================================
   Ashlar House — slide-out Bag drawer
   Deliberately its own stylesheet, not added to css/styles.css: this
   component is self-contained (its own BEM-ish .bagdrawer-* namespace)
   and keeping it separate means it can be reviewed, tested and iterated
   without touching the much larger shared stylesheet. It reuses
   styles.css's existing design tokens (--bg, --text, --font-serif, …)
   and a few already-shared component classes (.qty-stepper/.qty-btn,
   .co-send-btn, .co-total-row/.co-total/.co-reassurance — the same ones
   checkout.html's summary column already uses), so load this after
   styles.css, never instead of it.
   ============================================================= */

.bagdrawer { position: fixed; inset: 0; z-index: 10000; }
.bagdrawer[hidden] { display: none !important; }

.bagdrawer-scrim {
  position: absolute; inset: 0;
  background: rgba(var(--ink-rgb), 0.42);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.bagdrawer.is-visible .bagdrawer-scrim { opacity: 1; }

.bagdrawer-panel {
  position: absolute; top: 0; right: 0;
  height: 100%; height: 100dvh;
  width: min(460px, 100vw);
  background: var(--bg);
  border-left: 1px solid var(--border-accent);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(.4, 0, .2, 1);
}
.bagdrawer.is-visible .bagdrawer-panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .bagdrawer-scrim, .bagdrawer-panel { transition: none; }
}
body.bagdrawer-open { overflow: hidden; }

.bagdrawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid var(--border); flex: none;
}
.bagdrawer-title {
  font-family: var(--font-serif); font-size: 16px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 400; margin: 0;
}
.bagdrawer-close {
  background: none; border: none; cursor: pointer; padding: 8px; margin: -8px;
  color: var(--text); opacity: 0.65;
}
.bagdrawer-close:hover { opacity: 1; }

.bagdrawer-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 24px; -webkit-overflow-scrolling: touch; }

.bagdrawer-empty { padding: 70px 0; text-align: center; }
.bagdrawer-empty p { font-family: var(--font-serif); font-size: 15px; color: var(--text-muted); margin: 0 0 18px; }
.bagdrawer-continue {
  font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  background: none; border: 1px solid var(--border-accent); border-radius: 3px;
  padding: 11px 22px; cursor: pointer; color: var(--text);
}
.bagdrawer-continue:hover { background: var(--accent-dim); }

.bagdrawer-items { display: flex; flex-direction: column; }
.bagdrawer-item {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.08); /* lighter than the standard --border rule */
}
.bagdrawer-item:last-child { border-bottom: none; }
.bagdrawer-item-img-link { display: block; }
.bagdrawer-item-img { width: 64px; height: 64px; object-fit: cover; border-radius: 3px; display: block; background: var(--border); }
/* Name and price share a line at the top of the item, price sitting
   level with the name's first line rather than down by the quantity
   controls — the two things a customer checks first (what is this,
   what does it cost) read together immediately. Baseline-aligned, not
   box-top: when the name wraps to two lines, this locks the price's own
   text baseline to the baseline of the name's first line specifically
   (not just the top edge of its box, which can sit slightly off from
   the actual letters depending on each element's line-height). */
.bagdrawer-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bagdrawer-item-name {
  font-family: var(--font-serif); font-size: 13.5px; line-height: 1.4;
  color: var(--text); text-decoration: none;
  flex: 1 1 auto; min-width: 0;
  /* Long names wrap, but never past two lines — a third line would push
     the rest of the row down unpredictably from item to item. */
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bagdrawer-item-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.bagdrawer-item-variant { font-size: 13px; color: var(--text-faint); margin: 3px 0 0; font-family: var(--font-sans); }
.bagdrawer-item-issue { font-size: 13.5px; color: #8a2b22; margin: 4px 0 0; font-family: var(--font-sans); }
.bagdrawer-item-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
/* Applied by js/bag-drawer.js only when the name actually rendered on two
   lines (no CSS selector can detect that on its own). A two-line name is
   19px taller than one line, which is more than the normal 10px gap can
   absorb without the second line touching the stepper row — so this closes
   the gap as far as it safely can instead, rather than giving every item
   the taller two-line spacing whether its name wrapped or not. */
.bagdrawer-item-row--tight { margin-top: 2px; }
/* The unit price only — never multiplied by quantity — so it reads the
   same whatever the quantity and never needs a second line to explain
   itself. */
.bagdrawer-item-price { flex: none; font-family: var(--font-sans); font-size: 14.5px; color: var(--text); text-align: right; white-space: nowrap; }
/* Original price leads here (not after the discounted price, as on the
   product page/cards) and reads larger than the site-wide .price-was
   default, which is too faint at this size to register as a real price. */
.bagdrawer-item-price .price-was { font-size: 0.86em; margin-left: 0; }
.bagdrawer-item-remove {
  background: none; border: none; cursor: pointer; color: var(--text-faint);
  font-size: 19px; line-height: 1; padding: 4px; margin: -4px; min-width: 28px; min-height: 28px;
}
.bagdrawer-item-remove:hover { color: #8a2b22; }
/* Beside the stepper — same always-underlined, distinct-colour treatment
   as the discount breakdown's own Remove control (see
   .bagdrawer-discount-remove) — this is now the only remove control on
   a normal item row (the old corner × stays only on the "no longer
   available" row below, which has no stepper to sit beside). */
.bagdrawer-item-remove-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.25s var(--ease);
}
.bagdrawer-item-remove-link:hover,
.bagdrawer-item-remove-link:focus-visible { color: #8a2b22; }
.bagdrawer-item--issue { opacity: 0.7; }

.bagdrawer-foot { flex: none; border-top: 1px solid var(--border); padding: 18px 24px 22px; background: var(--bg); }

/* Discreet by design: a single understated line of text, not a form field,
   until the customer actually wants one — a boxed input sitting open by
   default reads as a coupon site, not a house that prices things once and
   prices them correctly. */
.bagdrawer-code { margin: 14px 0 16px; }
/* A `display` declared directly on an element (needed below for the open
   row/confirmation layouts) otherwise wins over the `hidden` attribute's
   own display:none — restoring it explicitly is the standard fix, and the
   actual reason both states were visible at once before this. */
.bagdrawer-code-toggle[hidden],
.bagdrawer-code-row[hidden] { display: none; }
.bagdrawer-code-toggle {
  display: block; background: none; border: none; padding: 0; margin: 0 0 2px;
  font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-faint); cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}
.bagdrawer-code-toggle:hover,
.bagdrawer-code-toggle:focus-visible { color: var(--text); text-decoration-color: currentColor; }

.bagdrawer-code-row {
  display: flex; gap: 8px; margin-bottom: 8px;
  animation: bagdrawer-code-reveal 0.32s var(--ease);
}
@keyframes bagdrawer-code-reveal {
  from { opacity: 0; transform: translateY(-4px); }
}
.bagdrawer-code-input {
  flex: 1; min-width: 0; min-height: 40px;
  border: 1px solid var(--border-accent); border-radius: 2px; background: var(--bg);
  padding: 0 12px; font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0.02em; color: var(--text);
}
.bagdrawer-code-input::placeholder { color: var(--text-faint); }
.bagdrawer-code-input:focus-visible { outline: 1px solid var(--text); outline-offset: 1px; }
.bagdrawer-code-apply {
  flex: none; min-height: 40px; padding: 0 18px;
  background: none; border: 1px solid var(--text); border-radius: 2px;
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; color: var(--text);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.bagdrawer-code-apply:hover { background: var(--text); color: var(--bg); }

.bagdrawer-code-status { font-size: 12px; margin: -2px 0 10px; font-family: var(--font-sans); color: #8a2b22; }

@media (prefers-reduced-motion: reduce) {
  .bagdrawer-code-row { animation: none; }
}

/* The applied voucher's own undo control, sitting beside the "Code · X"
   label (never beside its amount, so every amount in the column stays
   right-aligned with nothing else sharing that span) in the totals
   breakdown (see bagdrawer.js's discountRowsHtml). Always underlined and
   a distinct colour from the label beside it, rather than only revealing
   on hover, so it reads unmistakably as its own control. */
.bagdrawer-discount-remove {
  background: none; border: none; padding: 0; margin-left: 8px; cursor: pointer;
  font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.25s var(--ease);
}
.bagdrawer-discount-remove:hover,
.bagdrawer-discount-remove:focus-visible { color: #8a2b22; }

.bagdrawer-checkout-btn { width: 100%; margin-top: 14px; font-size: 13.5px; letter-spacing: 0.02em; }
.bagdrawer-bank-btn {
  width: 100%; margin-top: 10px;
  background: none; border: 1px solid var(--border-accent); border-radius: 4px;
  padding: 12px 18px; min-height: 44px;
  font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; color: var(--text);
}
.bagdrawer-bank-btn:hover { background: var(--accent-dim); }
.bagdrawer-action-note { font-size: 13.5px; color: var(--text-muted); margin: 10px 0 0; text-align: center; font-family: var(--font-sans); }

/* ── Mobile: still a side panel (not full-screen) — a visible gutter of
   the page stays showing on the left so the drawer never fully covers the
   site, same as desktop — plus independent scroll, generous touch
   targets, and safe-area insets so the Checkout button is never hidden
   beneath the browser chrome (Stage 3 drawer brief, section "Mobile
   design"). ──── */
@media (max-width: 600px) {
  .bagdrawer-panel { width: min(460px, calc(100vw - 48px)); }
  .bagdrawer-head { padding-top: calc(18px + env(safe-area-inset-top)); }
  .bagdrawer-foot { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .bagdrawer-item { grid-template-columns: 56px 1fr; }
  .bagdrawer-item-img { width: 56px; height: 56px; }
}