/* Shared drawer, using the existing homepage geometry and approved colours. */
body.is-locked { overflow: hidden; }
.bag, .bag * { box-sizing: border-box; }
.bag { color: var(--moon); font-family: var(--font-ui); }
.bag button, .bag a { color: inherit; font: inherit; }
.bag a { text-decoration: none; }
.bag [hidden], .cart-trigger[hidden] { display: none; }
.bag { position: fixed; z-index: 420; inset: 0; }
.bag[hidden] { display: none; }
.bag__scrim { position: absolute; inset: 0; background: rgba(5,5,7,0.72); opacity: 0; backdrop-filter: blur(6px); transition: opacity 240ms var(--ease-out); }
.bag__panel { position: absolute; top: 0.65rem; right: 0.65rem; bottom: 0.65rem; display: flex; flex-direction: column; width: min(34rem, calc(100% - 1.3rem)); overflow: hidden; border: 1px solid rgba(255,255,255,0.16); border-radius: 0.4rem; background: rgba(21,10,40,0.94); box-shadow: 0 2.4rem 7rem rgba(0,0,0,0.6); opacity: 0; transform: translateX(5%) scale(0.98); transform-origin: top right; backdrop-filter: blur(28px) saturate(145%); transition: opacity 240ms var(--ease-out), transform 420ms var(--ease-drawer); }
.bag.is-open .bag__scrim { opacity: 1; }
.bag.is-open .bag__panel { opacity: 1; transform: translateX(0) scale(1); }
.bag__header { display: flex; min-height: 5rem; align-items: center; justify-content: space-between; padding: 0 1.4rem; border-bottom: 1px solid rgba(255,255,255,0.15); }
.bag__header button { border: 0; background: transparent; cursor: pointer; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
.bag__header h2 { margin: 0; font-family: var(--font-display); font-size: 2rem; font-weight: 400; }
.bag__items { flex: 1; overflow-y: auto; padding: 1rem 1.4rem; }
.bag__empty { display: grid; min-height: 100%; place-items: center; align-content: center; gap: 0.8rem; color: var(--moon-dim); text-align: center; }
.bag__empty span { color: var(--chlorophyll); }
.bag__empty p { margin: 0; font-family: var(--font-display); font-size: 1.8rem; }
.bag__empty a { border-bottom: 1px solid currentColor; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.bag-item { display: grid; grid-template-columns: 5rem 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
.bag-item__image { display: grid; height: 6.5rem; place-items: center; background: rgba(255,255,255,0.05); }
.bag-item__image img { width: 80%; height: 90%; object-fit: contain; }
.bag-item__content h3 { margin: 0 0 0.2rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; }
.bag-item__content p { margin: 0; color: var(--moon-dim); font-size: 0.62rem; }
.bag-item__qty { display: inline-flex; margin-top: 0.7rem; border: 1px solid rgba(255,255,255,0.18); }
.bag-item__qty button, .bag-item__qty span { display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; background: transparent; }
.bag-item__qty button { cursor: pointer; }
.bag-item__price { align-self: start; font-size: 0.72rem; }
.bag__status { margin: 0; padding: 0.7rem 1.4rem; color: var(--moon-dim); font-size: 0.7rem; line-height: 1.45; }
.bag__summary { padding: 1.2rem 1.4rem; border-top: 1px solid rgba(255,255,255,0.16); }
.bag__summary p { display: flex; justify-content: space-between; margin: 0 0 1rem; }
/* space-between existed to push a trailing arrow to the far edge. That arrow
   was a bare U+2197, which iOS renders as the blue emoji glyph, and it is gone;
   centre the label so it is optically balanced rather than left-hugging. Only
   the alignment changed -- lime, height, padding and type are untouched. */
.bag__summary button { display: flex; width: 100%; min-height: 3.7rem; align-items: center; justify-content: center; padding: 0 1rem; border: 0; background: var(--chlorophyll); color: var(--void); cursor: pointer; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.bag__summary small { display: block; margin-top: 0.6rem; color: var(--moon-dim); font-size: 0.6rem; text-align: center; }

/* --- BAG DRAWER, aligned to the menu ----------------------------------------
   The index above was refreshed to obsidian and the bag was left behind, which
   is exactly what the note on that block predicted: the two drawers SHARE their
   base rules, so the menu's override moved one of them and not the other. Side
   by side the bag still read as the old build -- measured rgba(21, 10, 40, .94),
   H262 with 30 points of channel spread, against the menu's rgba(9, 9, 12, .96)
   at H240 and spread 3. One is violet, the other is black.

   This is colour only. Every value below is taken from the approved menu block
   above rather than invented: the same obsidian ground, the same ivory-tinted
   hairlines instead of pure white, the same gold close, and ivory alphas in
   place of --moon-dim (#a396b4, itself a violet-grey at H266) for secondary
   copy. Structure, spacing, type and behaviour are untouched.

   THE CHECKOUT BUTTON IS DELIBERATELY NOT HERE. --chlorophyll is the commerce
   action colour, carried by the header bag badge as well, and the note beside
   that rule records it as already approved. A dark drawer is not a reason to
   restyle the one control the customer is meant to press. */
.bag__panel {
  background: rgba(9, 9, 12, 0.96);
  border-color: rgba(255, 247, 230, 0.14);
}
.bag__header { border-bottom-color: rgba(255, 247, 230, 0.14); }
/* Close matches the index: gold, and never hunted for. */
.bag__header button { color: var(--nectar); font-family: var(--font-ui); font-weight: 500; }
.bag__header button:focus-visible { outline: 2px solid var(--nectar); outline-offset: 3px; }
.bag__empty { color: rgba(255, 247, 230, 0.5); }
.bag__empty a:focus-visible { outline: 2px solid var(--nectar); outline-offset: 3px; }
.bag-item { border-bottom-color: rgba(255, 247, 230, 0.12); }
.bag-item__image { background: rgba(255, 247, 230, 0.05); }
.bag-item__content p { color: rgba(255, 247, 230, 0.5); }
.bag-item__qty { border-color: rgba(255, 247, 230, 0.18); }
.bag__summary { border-top-color: rgba(255, 247, 230, 0.14); }
.bag__summary small { color: rgba(255, 247, 230, 0.38); }
/* The last legacy value in the drawer. The lime CTA is untouched -- background,
   size, type and label all stay -- but its LABEL was painted with --void
   (#0a0417), a violet-black, so the bag still carried one purple token even
   after the surfaces were neutral. tokens.css has no neutral dark token to
   reach for: --void-deep, --void, --void-lift and --ink measure H255 to H268,
   every one of them violet. #0a0a0d is the Museum Black the menu panel, the
   PDP bays, the Trade Desk and the Service Archive already stand on, so this
   borrows the approved neutral rather than inventing a token for one label.
   Contrast against the lime is effectively unchanged: 17.09:1 -> 16.78:1. */
.bag__summary button { color: #0a0a0d; }
.bag__panel { background: #0a0a0d; backdrop-filter: none; }
.bag button:focus-visible { outline: 2px solid var(--nectar); outline-offset: 3px; }
.bag button:disabled, [data-add-product]:disabled { cursor: wait; opacity: .6; }
.cart-trigger { border: 1px solid rgba(255,247,230,.22); background: none; color: inherit; font: inherit; cursor: pointer; padding: .65rem .8rem; }
.cart-trigger span { display: inline-grid; place-items: center; min-width: 1.25rem; margin-left: .35rem; color: var(--chlorophyll); }
.cart-card-add { margin-top: 1rem; }
button.pdp-cta, button.shell-cta { appearance: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.cart-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .bag__scrim, .bag__panel { transition-duration: 100ms; } }

.cart-quantity { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; color: inherit; font-family: var(--font-ui); font-size: .8rem; }
.cart-quantity input { width: 5rem; min-height: 2.75rem; padding: .5rem .7rem; border: 1px solid currentColor; border-radius: 0; color: inherit; background: transparent; font: inherit; }

/* At short viewport heights (including desktop zoom), let the complete drawer
   scroll instead of compressing product rows between fixed header and summary. */
@media (max-height: 480px) {
  .bag__panel { display: block; overflow-y: auto; }
  .bag__items { overflow-y: visible; }
}