/* Shared cart drawer — storefront (index) + product (/p/) pages.
   Markup is injected by js/cart-drawer.js; everything here is scoped
   under .drawer so it can't collide with page styles. Falls back to
   the site tokens when a page doesn't define them.

   Animation: the panel slides in from the right, the shade fades.
   Both directions animate — hiding uses a delayed visibility flip
   instead of display:none so the exit transition can play. */

/* Self-contained sizing — never rely on the host page's reset. */
.drawer, .drawer *, .drawer *::before, .drawer *::after { box-sizing: border-box; }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  visibility: hidden;
  transition: visibility 0s linear .34s;
}
.drawer.open { visibility: visible; transition: visibility 0s; }

.drawer .shade {
  position: absolute;
  inset: 0;
  background: var(--overlay, rgba(0, 0, 0, .16));
  opacity: 0;
  transition: opacity .3s ease;
}
.drawer.open .shade { opacity: 1; }

.drawer-panel {
  position: absolute;
  right: 0;
  top: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(420px, 100%);
  height: 100%;
  background: var(--bg, #fff);
  color: var(--text, #121212);
  border-left: 1px solid var(--line, #e6e6e6);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .02em;
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.22, .61, .36, 1);
}
.drawer.open .drawer-panel { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer .shade, .drawer-panel { transition: none; }
}

/* Background scroll locks while the drawer is open. */
html.cart-open { overflow: hidden; }

/* ---------- Panel chrome ---------- */
.drawer .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line, #e6e6e6);
}
.drawer .panel-head strong { font-weight: 400; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }

.drawer .close { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.drawer .close:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- The cart layout system ----------
   ONE grouped unit — the .cart-stack — holds everything below the
   header: items, subtotal, action button, helper text, and the
   post-order receipt. It is a single narrow column so every element
   shares the same width and reads as one composed block.

   Centering mechanism (no offsets, no absolute positioning): the
   scrollable body is a flex column; the stack's auto vertical margins
   center it when it is shorter than the body and collapse to zero
   when it is taller — content then starts at the top and scrolls.
   Works identically at every viewport size. */
.drawer .panel-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(16px, 3vh, 28px) 22px calc(clamp(16px, 3vh, 28px) + env(safe-area-inset-bottom, 0px));
}
.drawer .cart-stack {
  width: min(100%, 300px);
  margin-top: auto;
  margin-bottom: auto;
  display: grid;
  gap: clamp(16px, 3vh, 26px);
  text-align: center;
}

/* [hidden] must win over the grid/flex display values in here. */
.drawer [hidden] { display: none !important; }

.drawer .bag-list { display: grid; gap: clamp(18px, 3.5vh, 28px); }
.drawer .bag-item {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.drawer .bag-item + .bag-item { border-top: 1px solid var(--line, #e6e6e6); padding-top: clamp(18px, 3.5vh, 28px); }
.drawer .bag-item img {
  width: min(100%, 230px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #f4f3f1;
  margin-bottom: 10px;
}
.drawer .bag-item p { margin: 0; text-transform: uppercase; letter-spacing: .05em; }
.drawer .bag-item .muted { color: var(--muted, #767676); }

.drawer .qty { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.drawer .qty button {
  width: 26px;
  height: 26px;
  font-size: 14px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.drawer .qty button:hover { background: #f4f3f1; }
.drawer .qty span { min-width: 18px; text-align: center; letter-spacing: .05em; }
.drawer .bag-item .close { margin-top: 4px; color: var(--muted, #767676); }
.drawer .bag-item .close:hover { color: var(--text, #121212); }

.drawer .empty {
  color: var(--muted, #767676);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 0;
}

/* Subtotal + action directly under the items — same column width,
   connected by a hairline, never pinned to the drawer edge. */
.drawer .panel-foot,
.drawer .order-done {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line, #e6e6e6);
  padding-top: clamp(14px, 2.5vh, 20px);
}
.drawer .panel-foot .row,
.drawer .order-done .row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.drawer .order-done .link-btn { justify-self: center; }

.drawer .primary {
  /* Layout is pinned here because host pages style .primary too —
     the injected drawer must not inherit their widths/margins. */
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 44px;
  border: 1px solid var(--text, #121212);
  background: var(--text, #121212);
  color: var(--bg, #fff);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 11px;
  transition: background .18s ease, color .18s ease;
}
.drawer .primary:hover { background: var(--bg, #fff); color: var(--text, #121212); }
.drawer .primary[disabled] { opacity: .45; cursor: default; }

/* Injected into arbitrary pages — don't depend on their resets. */
.drawer a { color: inherit; text-decoration: none; }
.drawer button { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; }

.drawer .link-btn {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  border-bottom: 1px solid var(--text, #121212);
  padding-bottom: 2px;
}

.drawer .order-note {
  margin: 0;
  color: var(--muted, #767676);
  font-size: 10px;
  text-align: center;
  letter-spacing: .03em;
}
.drawer .order-msgbox {
  width: 100%;
  min-height: 130px;
  border: 1px solid var(--line, #e6e6e6);
  padding: 10px;
  font: inherit;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .02em;
  resize: vertical;
  background: #fafaf8;
  color: var(--text, #121212);
}
.drawer .order-msgbox:focus { outline: none; border-color: var(--text, #121212); }

/* iOS Safari zooms focused fields under 16px — applies to the
   manual-copy fallback textarea; mobile only. */
@media (max-width: 700px) {
  .drawer .order-msgbox { font-size: 16px; }
}