/* ============================================================
   NOX — premium slide-out cart drawer
   Warm cream surfaces, thin bronze accents, serif headings.
   Three-section flex column: head · scrollable body · sticky foot.
   ============================================================ */

/* ---------- overlay ---------- */
.nox-drawer-overlay{
  position:fixed;inset:0;z-index:99998;
  background:rgba(20,17,13,.42);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) ease-in-out;
  -webkit-backdrop-filter:saturate(105%);backdrop-filter:saturate(105%);
}
body.nox-drawer-open .nox-drawer-overlay{ opacity:1;pointer-events:auto; }

/* ---------- drawer shell ---------- */
.nox-drawer{
  position:fixed;top:0;right:0;z-index:99999;
  height:100%;width:clamp(380px,40vw,520px);max-width:100vw;
  display:flex;flex-direction:column;
  background:var(--bg);
  box-shadow:-24px 0 60px rgba(20,16,10,.16);
  transform:translateX(100%);
  transition:transform var(--dur) ease-in-out;
  will-change:transform;
  overscroll-behavior:contain;
}
body.nox-drawer-open .nox-drawer{ transform:translateX(0); }
/* lock the page behind the drawer */
body.nox-drawer-open{ overflow:hidden; }

/* ---------- head ---------- */
.nox-drawer-head{
  flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:22px 26px 18px;border-bottom:1px solid var(--line-soft);
}
.nox-drawer-head-titles{ display:flex;flex-direction:column;gap:3px;min-width:0; }
.nox-drawer-title{
  font-family:var(--font-serif);font-weight:400;font-size:21px;
  letter-spacing:var(--ls-heading);color:var(--ink);
}
.nox-drawer-count{ color:var(--ink-light);font-weight:400; }
.nox-drawer-subtitle{
  font-family:var(--font-sans);font-size:11.5px;color:var(--ink-mid);letter-spacing:.01em;
}
.nox-drawer-close{
  width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:var(--ink-mid);cursor:pointer;
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease;
}
.nox-drawer-close:hover{ background:var(--bg-warm);color:var(--ink); }

/* ---------- inner (fragment) ---------- */
.nox-drawer-inner{ flex:1 1 auto;display:flex;flex-direction:column;min-height:0; }

/* ---------- Section 1 — items (scrolls) ---------- */
.nox-drawer-scroll,
.nox-drawer-items-wrap{
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:6px 26px 18px;overscroll-behavior:contain;
}
/* Populated cart: items + recommendations share ONE scroll region so the bag
   items stay at the top (always visible) and the footer stays pinned — the recs
   no longer steal the vertical space as a fixed block that squeezes the items. */
.nox-drawer-body{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.nox-drawer-body .nox-drawer-items-wrap{ flex:0 0 auto;overflow:visible; }
.nox-drawer-body .nox-drawer-recs{ flex:0 0 auto; }
.nox-drawer-items{ list-style:none;margin:0;padding:0; }
.nox-drawer-item{
  display:grid;grid-template-columns:78px 1fr;gap:16px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--line-soft);
}
.nox-drawer-item:last-child{ border-bottom:0; }
.nox-drawer-item-img{
  width:78px;height:96px;overflow:hidden;border-radius:0;
  background:var(--paper);border:1px solid var(--line);
}
.nox-drawer-item-img img{ width:100%;height:100%;object-fit:cover;display:block; }
.nox-drawer-item-body{ min-width:0;display:flex;flex-direction:column;height:100%; }
.nox-drawer-item-top{ display:flex;align-items:flex-start;justify-content:space-between;gap:10px; }
.nox-drawer-item-name{
  font-family:var(--font-serif);font-weight:400;font-size:17px;line-height:1.25;
  color:var(--ink);letter-spacing:var(--ls-heading);
}
.nox-drawer-item-remove{
  flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;margin:-2px -4px 0 0;
  border:0;background:transparent;color:var(--ink-light);cursor:pointer;
  transition:color var(--dur-fast) ease;
}
.nox-drawer-item-remove:hover{ color:var(--ink); }
.nox-drawer-item-variant{
  font-family:var(--font-sans);font-size:12px;color:var(--ink-mid);
  margin-top:4px;letter-spacing:.01em;
}
.nox-drawer-item-variant p{ margin:0; }
.nox-drawer-item-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;
}

/* quantity stepper */
.nox-drawer-qty{
  display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:0;overflow:hidden;
}
.nox-drawer-qty-btn{
  width:32px;height:32px;display:grid;place-items:center;border:0;background:var(--paper);
  color:var(--ink);font-size:16px;line-height:1;cursor:pointer;transition:background var(--dur-fast) ease;
}
.nox-drawer-qty-btn:hover{ background:var(--bg-warm); }
.nox-drawer-qty-val{
  min-width:34px;display:grid;place-items:center;font-family:var(--font-sans);
  font-size:13px;color:var(--ink);border-left:1px solid var(--line);border-right:1px solid var(--line);
}
.nox-drawer-item-price{
  font-family:var(--font-serif);font-size:16px;color:var(--ink);white-space:nowrap;
}
.nox-drawer-item-price .woocommerce-Price-amount{ color:inherit; }

/* loading state — a whisper of dimming while AJAX runs */
.nox-drawer.is-loading .nox-drawer-inner{ opacity:.55;transition:opacity var(--dur-fast) ease;pointer-events:none; }

/* ---------- empty state — a short navigation tool, not a mini homepage ----------
   When the bag is empty the drawer collapses to its content (header, lead,
   collections, catalogue CTA) and the header tagline hides. Populated-cart
   layout is untouched; adding an item swaps the fragment and the :has()
   scope releases automatically. */
.nox-drawer:has(.nox-drawer-empty){ height:auto;bottom:auto;max-height:100%; }
.nox-drawer:has(.nox-drawer-empty) .nox-drawer-subtitle{ display:none; }
.nox-drawer-empty{ padding:2px 0 26px; }
.nox-drawer-empty-lead{
  font-family:var(--font-serif);font-weight:300;font-size:22px;color:var(--ink);
  letter-spacing:-.01em;margin:16px 26px 2px;
}
.nox-drawer-block{ padding:24px 26px 0; }
.nox-drawer-block-label{
  display:block;font-family:var(--font-sans);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light);margin-bottom:14px;
}
/* collections — thin-divider link list with a subtle slide */
.nox-drawer-collections{ display:flex;flex-direction:column;border-top:1px solid var(--line-soft); }
.nox-drawer-collection{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 2px;border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--ink);
  transition:padding-left .3s var(--ease-lux),color var(--dur-fast) ease;
}
.nox-drawer-collection-name{ font-family:var(--font-serif);font-size:19px;letter-spacing:var(--ls-heading); }
.nox-drawer-collection-arrow{ color:var(--ink-light);transition:transform .3s var(--ease-lux),color var(--dur-fast) ease; }
.nox-drawer-collection:hover{ padding-left:8px; }
.nox-drawer-collection:hover .nox-drawer-collection-arrow{ transform:translateX(4px);color:var(--gold); }
.nox-drawer-collection--all .nox-drawer-collection-name{ font-style:italic;font-size:16px;color:var(--gold); }
/* (.nox-drawer-trust* styles removed — the empty-state trust grid is gone.) */

/* ---------- Section 2 — "Often researched together" recommendations ----------
   An editorial merchandising module: generous top breathing room, a heading +
   quiet subheading, taller image cards with name/price beneath. Warm cream,
   thin separator only — no heavy borders or shadows. */
.nox-drawer-recs{
  flex:0 0 auto;border-top:1px solid var(--line-soft);
  background:var(--bg-warm);padding:clamp(40px,6vw,52px) 0 24px;
}
.nox-drawer-recs-head{
  font-family:var(--font-serif);font-weight:400;font-size:17px;letter-spacing:var(--ls-heading);
  color:var(--ink);padding:0 26px;margin:0 0 8px;
}
.nox-drawer-recs-head em{ font-style:italic;color:var(--ink-mid); }
.nox-drawer-recs-sub{
  font-family:var(--font-sans);font-size:12px;line-height:1.5;letter-spacing:.01em;
  color:var(--ink-mid);padding:0 26px;margin:0 0 28px;max-width:42ch;
}
/* No independent vertical scroll: the recommendations flow inside the single
   drawer-body scroll surface (.nox-drawer-body), so the whole bag scrolls as one
   surface. On phones (≤640px) this becomes a horizontal carousel — the only
   element in the module with its own scrolling. */
.nox-drawer-recs-scroll{
  scrollbar-width:none;-ms-overflow-style:none;
  padding:2px 26px 6px;
}
.nox-drawer-recs-scroll::-webkit-scrollbar{ display:none;width:0;height:0; }
.nox-drawer-recs-grid{ display:grid;grid-template-columns:1fr 1fr;gap:26px 16px; }

.nox-drawer-rec{ display:flex;flex-direction:column;transition:transform var(--dur) var(--ease-lux); }
.nox-drawer-rec-media{
  position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:0; /* taller frame (~+20% height) */
  background:var(--paper);border:1px solid var(--line-soft);
}
.nox-drawer-rec-imglink{ display:block;width:100%;height:100%;line-height:0; }
.nox-drawer-rec-imglink img{ width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-lux); }
/* Quick Add — reveals on hover (desktop), always visible on touch */
.nox-drawer-rec-add{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 8px;border:0;border-radius:0;cursor:pointer;
  background:var(--ink);color:var(--bg);
  font-family:var(--font-sans);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  opacity:0;transform:translateY(6px);
  transition:opacity .3s ease,transform .3s ease,background var(--dur-fast) ease;
}
.nox-drawer-rec:hover .nox-drawer-rec-add,
.nox-drawer-rec:focus-within .nox-drawer-rec-add{ opacity:1;transform:none; }
.nox-drawer-rec-add:hover{ background:#000; }
.nox-drawer-rec-add.is-adding{ opacity:.55;pointer-events:none; }
.nox-drawer-rec-add-arrow{ display:inline-block;transition:transform var(--dur-fast) ease; }
.nox-drawer-rec:hover .nox-drawer-rec-add-arrow{ transform:translateX(3px); }
@media(hover:none){
  .nox-drawer-rec-add{ opacity:1;transform:none; }
  /* comfortable touch targets on touch devices; desktop drawer unchanged */
  .nox-drawer-qty-btn{ width:40px;height:40px; }
  .nox-drawer-qty-val{ min-width:38px; }
  .nox-drawer-close{ width:44px;height:44px; }
  .nox-drawer-item-remove{ width:44px;height:44px;margin:-11px -13px -9px -9px; } /* larger hit area, glyph stays put */
}

/* subtle hover lift — desktop only, no shadow */
@media(hover:hover){
  .nox-drawer-rec:hover{ transform:translateY(-3px); }
  .nox-drawer-rec:hover .nox-drawer-rec-imglink img{ transform:scale(1.02); }
}
.nox-drawer-rec-body{ padding:16px 2px 4px; }
.nox-drawer-rec-cat{
  display:block;font-family:var(--font-sans);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--gold);margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nox-drawer-rec-name{
  display:block;font-family:var(--font-serif);letter-spacing:var(--ls-heading);font-weight:400;font-size:14.5px;line-height:1.25;
  color:var(--ink);text-decoration:none;margin-bottom:5px;transition:color var(--dur-fast) ease;
}
.nox-drawer-rec-name:hover{ color:var(--gold); }
.nox-drawer-rec-price{ font-family:var(--font-serif);font-size:13px;color:var(--ink-mid); }
.nox-drawer-rec-price .woocommerce-Price-amount{ color:inherit; }

/* ---------- empty-state featured grid — editorial, whole-card link ---------- */
.nox-drawer-feat-grid{ row-gap:22px; }
.nox-drawer-rec--feat{ text-decoration:none;color:inherit;cursor:pointer; }
.nox-drawer-rec--feat .nox-drawer-rec-media img{ transition:transform .6s var(--ease-lux); }
.nox-drawer-rec--feat:hover .nox-drawer-rec-media img{ transform:scale(1.03); }
.nox-drawer-rec--feat:hover .nox-drawer-rec-name{ color:var(--gold); }
.nox-drawer-feat-all{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-family:var(--font-sans);font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink);text-decoration:none;
}
.nox-drawer-feat-all span{ display:inline-block;transition:transform var(--dur-fast) var(--ease-lux); }
.nox-drawer-feat-all:hover span{ transform:translateX(4px); }

/* ---------- Section 3 — sticky footer ---------- */
.nox-drawer-foot{
  flex:0 0 auto;padding:20px 26px calc(20px + env(safe-area-inset-bottom,0px));
  background:var(--paper);border-top:1px solid var(--line-soft);
}
.nox-drawer-ship{ margin-bottom:16px; }
.nox-drawer-ship-msg{
  margin:0 0 9px;font-family:var(--font-sans);font-size:12.5px;color:var(--ink-mid);letter-spacing:.01em;
}
.nox-drawer-ship-msg strong{ color:var(--ink);font-weight:600; }
.nox-drawer-ship-msg span{ color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:11.5px; }
.nox-drawer-ship-msg.is-unlocked{ color:var(--ink); }
.nox-drawer-ship-check{ color:var(--gold);font-weight:700;margin-right:2px; }
.nox-drawer-ship-track{ height:4px;border-radius:0;background:var(--line-soft);overflow:hidden; }
.nox-drawer-ship-fill{ display:block;height:100%;background:var(--gold);border-radius:0;transition:width .5s var(--ease-lux); }

.nox-drawer-subtotal{
  display:flex;align-items:baseline;justify-content:space-between;margin:18px 0 16px;
}
.nox-drawer-subtotal-label{ font-family:var(--font-sans);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-mid); }
.nox-drawer-subtotal-val{ font-family:var(--font-serif);font-size:24px;color:var(--ink); }
.nox-drawer-subtotal-val .woocommerce-Price-amount{ color:inherit; }

.nox-drawer-checkout{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  padding:19px 24px;background:var(--ink);color:var(--bg);text-decoration:none;
  font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-wide);
  border:1px solid var(--ink);
  transition:background var(--dur) ease,color var(--dur) ease,gap var(--dur) ease;
}
.nox-drawer-checkout:hover{ background:transparent;color:var(--ink);gap:18px; }
.nox-drawer-checkout-arrow{ display:inline-block;transition:transform var(--dur) ease; }
.nox-drawer-checkout:hover .nox-drawer-checkout-arrow{ transform:translateX(4px); }
.nox-drawer-continue{
  display:block;width:100%;margin-top:12px;padding:8px 6px;background:none;border:0;cursor:pointer;
  font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-mid);transition:color var(--dur-fast) ease;
}
.nox-drawer-continue:hover{ color:var(--ink); }
.nox-drawer-foot-note{ margin:10px 0 0;text-align:center;font-family:var(--font-sans);font-size:11px;color:var(--ink-light); }

/* ---------- responsive widths ---------- */
@media(max-width:1024px){
  .nox-drawer{ width:min(62vw,460px); }
}
@media(max-width:640px){
  .nox-drawer{ width:100vw;max-width:100vw; }
  /* Empty drawer: keep it full-height on mobile so the content scrolls inside
     .nox-drawer-scroll. (height:auto breaks the flex-scroll chain on phones and
     leaves the lower content unreachable.) */
  .nox-drawer:has(.nox-drawer-empty){ height:100%;max-height:100%;top:0;bottom:0; }
  .nox-drawer-empty{ overflow-x:hidden; }
  /* The empty-drawer "Selected compounds" block shares .nox-drawer-recs-grid,
     so the horizontal-row rule above would make it overflow sideways and shift
     the whole drawer. Force it back to a 2×2 grid. */
  .nox-drawer-feat-grid{ display:grid !important;grid-template-columns:1fr 1fr !important;gap:20px 14px; }
  .nox-drawer-feat-grid .nox-drawer-rec{ flex:none !important;max-width:none !important;width:auto !important; }
  .nox-drawer-head{ padding:20px 20px 16px; }
  .nox-drawer-scroll,.nox-drawer-items-wrap{ padding:4px 20px 16px; }
  .nox-drawer-recs-head{ padding:0 20px; }
  /* Recommendations become a compact single swipeable row on mobile so the bag
     items and checkout keep the vertical space (a fixed-height grid otherwise
     squeezes the actual bag down to a sliver). */
  .nox-drawer-recs{ padding-top:22px; }
  .nox-drawer-recs-sub{ margin-bottom:16px; }
  .nox-drawer-recs-scroll{
    padding:2px 20px 8px;
    /* Horizontal carousel only. touch-action:pan-x lets the browser route
       vertical gestures to the drawer (no nested scroll trap) while horizontal
       gestures scroll the product row; contain horizontal overscroll only. */
    overflow-x:auto;overflow-y:hidden;
    touch-action:pan-x;overscroll-behavior-x:contain;
    -webkit-mask-image:none;mask-image:none;
  }
  .nox-drawer-recs-grid{ display:flex;grid-template-columns:none;gap:14px;align-items:flex-start; }
  /* min-width:0 + max-width stop a card with a larger source image from
     refusing to shrink to 44% (flexbox min-content gotcha). */
  .nox-drawer-rec{ flex:0 0 44%;min-width:0;max-width:44%;box-sizing:border-box; }
  .nox-drawer-rec-media{ aspect-ratio:1/1;width:100%;min-width:0; }
  .nox-drawer-rec-body{ padding-top:10px; }
  .nox-drawer-foot{ padding:18px 20px calc(18px + env(safe-area-inset-bottom,0px)); }
}

/* respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .nox-drawer,.nox-drawer-overlay,.nox-drawer-ship-fill{ transition:none; }
}

/* The drawer replaces Blocksy's built-in mini-cart flyout — suppress it so it
   can't also appear on hover/click alongside the drawer. (Cart icon + count
   badge are untouched.) */
.ct-header-cart .ct-cart-content{ display:none !important; }