/* ============================================================
   PRODUCT DRAWER + SIDE CART — 25 Aug 2026.
   A card opens the product in a right-hand drawer (description,
   size, price, add to bag); the bag itself is a second drawer.
   Both are <dialog>-less panels with their own focus trap so they
   work inside the shop's existing stacking contexts.

   The bag persists in localStorage and hands off to Shopify at
   checkout via window.NEO_SHOP_BASE. Until that switch is set the
   checkout button states plainly that ordering is not open yet —
   a bag that silently dead-ends is worse than no bag.
   ============================================================ */
.cart-scrim{position:fixed;inset:0;z-index:90;background:rgba(33,29,24,.44);
  opacity:0;visibility:hidden;transition:opacity .32s var(--ease-out),visibility .32s}
.cart-scrim.is-open{opacity:1;visibility:visible}

.drawer{position:fixed;top:0;right:0;bottom:0;z-index:95;width:min(460px,100vw);
  display:flex;flex-direction:column;background:var(--bg-2);
  transform:translateX(100%);visibility:hidden;
  transition:transform .38s var(--ease-out),visibility .38s;
  overscroll-behavior:contain;box-shadow:var(--e4)}
.drawer.is-open{transform:none;visibility:visible}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--hairline-2);flex:none}
.drawer__head h2{font-family:'Expose',serif;font-weight:400;font-size:var(--t-3);margin:0;letter-spacing:-.03em}
.drawer__close{width:44px;height:44px;flex:none;border:1px solid var(--hairline-2);border-radius:50%;
  background:var(--bg);color:var(--ivory);cursor:pointer;font-size:17px;line-height:1}
.drawer__body{flex:1;overflow-y:auto;padding:20px}
.drawer__foot{flex:none;padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hairline-2);background:var(--bg)}

/* ---- product view ---- */
.pv__plate{background:var(--bg-3);border-radius:var(--radius-sm);aspect-ratio:1;
  display:grid;place-items:center;padding:22px;margin-bottom:18px}
.pv__plate img{width:100%;height:100%;object-fit:contain}
.pv__brand{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage-label)}
.pv__name{font-family:'Expose',serif;font-weight:400;font-size:clamp(22px,2.4vw,28px);
  letter-spacing:-.03em;margin:8px 0 0;color:var(--ivory)}
.pv__meta{margin:10px 0 0;font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-dim)}
.pv__price{margin:14px 0 0;font-size:1.15rem;color:var(--ivory)}
.pv__desc{margin:18px 0 0;color:var(--ivory-dim);font-size:.95rem;line-height:1.65;max-width:58ch}
.pv__none{margin:18px 0 0;color:var(--ivory-dim);font-size:.9rem;font-style:italic}
.pv__concerns{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:7px}
.pv__concerns span{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;
  border:1px solid var(--hairline-2);border-radius:999px;padding:6px 11px;color:var(--ivory-dim)}

.qty{display:flex;align-items:center;gap:2px;border:1px solid var(--hairline-2);border-radius:999px;
  overflow:hidden;width:max-content}
.qty button{width:44px;height:44px;border:0;background:none;color:var(--ivory);cursor:pointer;font-size:16px}
.qty button:hover{background:rgba(33,29,24,.06)}
.qty output{min-width:34px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:14px}

.btn-bag{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;
  border:0;border-radius:999px;background:var(--pine);color:var(--bone);cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  transition:background .3s var(--ease-out)}
.btn-bag:hover{background:var(--ivory)}
.btn-bag[disabled]{opacity:.45;cursor:not-allowed}
.pv__row{display:flex;align-items:center;gap:14px}

/* ---- bag ---- */
.bag__line{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--hairline-2)}
.bag__line img{width:64px;height:64px;object-fit:contain;background:var(--bg-3);border-radius:8px;padding:6px}
.bag__nm{font-size:.95rem;color:var(--ivory);margin:0}
.bag__mt{margin:4px 0 0;font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ivory-dim)}
.bag__rm{background:none;border:0;color:var(--ivory-dim);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;font-size:12px;min-height:44px;padding:0}
.bag__price{font-family:'JetBrains Mono',monospace;font-size:.9rem;white-space:nowrap}
.bag__empty{color:var(--ivory-dim);text-align:center;padding:48px 0}
.bag__sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.bag__sum b{font-size:1.05rem;letter-spacing:0}
.bag__note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--ivory-dim);text-align:center}

/* ---- bag button in the page chrome ---- */
.bagbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:0;background:none;color:inherit;cursor:pointer}
.bagbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.4}
.bagbtn b{position:absolute;top:2px;right:0;min-width:17px;height:17px;border-radius:999px;
  background:var(--pine);color:var(--bone);font-family:'JetBrains Mono',monospace;font-size:12px;
  font-weight:500;display:grid;place-items:center;padding:0 4px}
.bagbtn b[hidden]{display:none}

@media (prefers-reduced-motion:reduce){.drawer,.cart-scrim{transition:none}}