/* ==========================================================================
   IGET Pods AUS — site stylesheet
   Design tokens carried over from the Storefront C mockups.
   ========================================================================== */

:root {
  --ink: #0b0b0b;
  --accent: #ff5c33;
  --accent-dark: #e64a24;
  --surface: #f7f7f5;
  --chip: #f3f3f1;
  --line: #ebebeb;
  --line-2: #e2e2da;
  --line-strong: #d3d3ca;   /* card + tile outlines, deliberately visible on white */
  --muted: #77776f;
  --body: #4a4a44;
  --dim: #9a9a93;
  --ok: #1a8a4a;
  --warn: #b3541e;
  /* Full-width shell for grids/header/footer. --max-mid keeps forms and the
     product page from stretching into unusable line lengths on wide monitors. */
  --max: 1800px;
  --max-mid: 1280px;
  --max-read: 1000px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --shadow: 0 10px 28px rgba(11, 11, 11, .10);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* Must outrank the display:flex/grid rules below, or [hidden] elements
   (empty-cart panel, order confirmation, payment panels) render anyway. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

input, select, button, textarea { font: inherit; }

button { cursor: pointer; }

h1, h2, h3, h4 { margin: 0; letter-spacing: -.03em; font-weight: 800; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.wrap-narrow { max-width: var(--max-read); margin: 0 auto; padding-left: 28px; padding-right: 28px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700; font-size: 14px;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------- announcement -- */

/* Deliberately NOT sticky — it scrolls away with the page and only the header
   below it pins. Note the header must stay a top-level sibling of this bar
   rather than sharing a wrapper with it: a position:sticky element can only
   stick within its own parent's box, so wrapping the two together would make
   the header unpin as soon as that wrapper scrolled past. */
.announce {
  background: var(--ink); color: #fff;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  text-align: center; padding: 9px 20px;
}
.announce strong { color: var(--accent); font-weight: 800; }

/* -------------------------------------------------------------- header --- */

/* Pins to the very top once the announce bar has scrolled past. `top: 0` is
   what keeps this robust: there is no offset to keep in sync with the height
   of anything above it, so the bar wrapping to two lines on a narrow phone
   can't push the header out of alignment. */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

/* Three-column grid rather than one flex row — the middle track sizes to its
   content and the two 1fr side tracks split whatever space is left equally,
   so the header-links group sits truly centred regardless of how wide the
   brand or the search+cart group are. */
.header-bar {
  max-width: var(--max); margin: 0 auto;
  padding: 16px 28px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px;
}
.header-left { display: flex; align-items: center; gap: 22px; min-width: 0; }
.header-right { display: flex; align-items: center; gap: 22px; justify-self: end; min-width: 0; }

/* Nav sits in its own tinted band under the top row. Previously it was a
   low-contrast second line inside the white bar and read as an afterthought. */
.nav-band { background: var(--surface); border-top: 1px solid var(--line); }

.brand {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 19px; font-weight: 800; letter-spacing: -.04em; text-transform: uppercase;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand span { color: var(--accent); }

.brand-logo { height: 32px; width: auto; display: block; }
/* The supplied mark is dark; flip it to white on the dark footer. */
.site-footer .brand-logo { filter: brightness(0) invert(1); }
.age-card .brand-logo { height: 38px; margin: 0 auto; }
.brand small {
  font-size: 9.5px; letter-spacing: .18em; font-weight: 700;
  color: var(--muted); text-transform: uppercase;
}

/* Bordered rather than a pale grey fill — on a white header the old
   background alone was near-invisible. A stronger border + a soft shadow
   lift it further off the translucent header so it doesn't read as inert. */
.search {
  flex: 1; position: relative;
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: 10px;
  padding: 9px 15px; min-width: 200px; max-width: 460px;
  box-shadow: 0 1px 4px rgba(11, 11, 11, .07);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255, 92, 51, .16); }
/* Without an explicit size the inline SVG expands to fill the whole field. */
.search .ico { width: 18px; height: 18px; flex: none; color: var(--muted); }
.search:focus-within .ico { color: var(--ink); }
.search input { border: 0; outline: 0; background: transparent; font-size: 14px; width: 100%; color: var(--ink); }
.search input::placeholder { color: #8f8f87; }

.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow); max-height: 380px; overflow-y: auto; z-index: 40; padding: 6px;
}
.search-results[hidden] { display: none; }
.search-hit { display: flex; gap: 11px; align-items: center; padding: 9px 10px; border-radius: var(--r-sm); }
.search-hit:hover { background: var(--chip); text-decoration: none; }
.search-hit .sw {
  width: 44px; height: 44px; border-radius: var(--r-sm); flex: none;
  overflow: hidden; background-color: #fff;
}
.search-hit .sw img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.search-hit b { font-size: 13.5px; font-weight: 700; display: block; line-height: 1.3; }
.search-hit em { font-style: normal; font-size: 12px; color: var(--muted); }
.search-hit .sp { margin-left: auto; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.search-empty { padding: 16px; font-size: 13.5px; color: var(--muted); text-align: center; }

.cart-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff;
  font-size: 13.5px; font-weight: 700; padding: 11px 17px;
  border-radius: 10px; border: 0; white-space: nowrap;
}
.cart-btn:hover { text-decoration: none; background: #24241f; }
.ico-cart { width: 18px; height: 18px; flex: none; }

/* Hamburger — desktop hides it, the mobile block below turns it on. */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 40px; padding: 0 9px; flex: none;
  border: 1px solid var(--line-2); border-radius: 10px; background: #fff;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
.nav-toggle:hover { background: var(--chip); }

.nav-head, .nav-extra { display: none; }

.nav-overlay {
  position: fixed; inset: 0; z-index: 125;
  background: rgba(11, 11, 11, .5); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }
/* Lift the whole sticky header stack (and the off-canvas nav inside it) above
   the overlay while the menu is open, otherwise the panel is dimmed and
   unclickable. */
body.nav-open .site-header { z-index: 140; }

/* Shop/guides/delivery links sit in the header-bar's centred grid column,
   between the brand on the left and search+cart on the right. */
.header-links { display: flex; align-items: center; gap: 20px; }
.header-links a {
  white-space: nowrap;
  font-size: 14px; font-weight: 700; color: var(--ink);
  border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.header-links a:hover {
  text-decoration: none; color: var(--accent-dark); border-bottom-color: var(--accent);
}
.header-links a.is-highlight { color: var(--accent-dark); border-bottom-color: var(--accent); }

/* Icon-only search trigger; mobile shows it in place of the inline search box. */
.icon-btn {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  border: 1px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink);
}
.icon-btn:hover { background: var(--chip); border-color: var(--ink); }
.icon-btn .ico { width: 19px; height: 19px; }
.icon-btn[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Collapsible search panel, revealed by the icon. Hidden until asked for. */
.mobile-search { display: none; }
/* Fixed bottom bar — mobile only, see the max-width:860px block below. */
.bottom-nav { display: none; }
.cart-btn .count {
  background: var(--accent); color: var(--ink);
  min-width: 20px; height: 20px; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 800; padding: 0 6px;
}

/* No overflow here — it would clip the absolutely-positioned categories
   dropdown. Links wrap instead of scrolling. */
.site-nav {
  max-width: var(--max); margin: 0 auto; padding: 0 22px;
  display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap;
}
.site-nav a {
  white-space: nowrap; padding: 14px 15px;
  font-size: 14.5px; font-weight: 700; letter-spacing: -.012em; color: var(--ink);
  border-bottom: 3px solid transparent;
}
.site-nav a:hover {
  text-decoration: none; background: #fff;
  color: var(--accent-dark); border-bottom-color: var(--line-strong);
}
.site-nav a.is-active { border-bottom-color: var(--accent); background: #fff; }

/* ------------------------------------------------- categories dropdown -- */

.nav-drop-wrap { position: relative; display: flex; align-items: stretch; }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; padding: 14px 15px;
  font-size: 14.5px; font-weight: 700; letter-spacing: -.012em; color: var(--ink);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.nav-drop-btn:hover { background: #fff; color: var(--accent-dark); }
.nav-drop-btn[aria-expanded="true"] { background: #fff; border-bottom-color: var(--accent); }
.nav-drop-btn .chev { font-size: 9px; transition: transform .2s ease; }
.nav-drop-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.nav-drop {
  position: absolute; top: 100%; left: 0; z-index: 40;
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow); padding: 14px; min-width: 620px;
}
.nav-drop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 10px; }
.nav-drop-grid a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.nav-drop-grid a:hover { background: var(--chip); text-decoration: none; color: var(--accent-dark); }
.nav-drop-grid em { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 700; }
/* Matches the primary .btn rather than the dark .btn-dark — a black slab reads
   as a heavy footer inside an otherwise white dropdown. */
.nav-drop-all {
  display: block; margin-top: 10px; padding: 11px;
  text-align: center; background: var(--accent); color: var(--ink);
  border-radius: var(--r-sm); font-size: 13.5px; font-weight: 800;
}
.nav-drop-all:hover { background: var(--accent-dark); color: #fff; text-decoration: none; }

/* ----------------------------------------------------------- pagination -- */

.pager {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; padding-top: 34px;
}
.pg-step {
  border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 11px 18px; font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.pg-step:hover { background: var(--ink); color: #fff; text-decoration: none; border-color: var(--ink); }
.pg-step.is-off { opacity: .38; pointer-events: none; }
.pg-nums { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.pg-nums a {
  min-width: 42px; text-align: center;
  border: 1px solid var(--line-strong); border-radius: 9px;
  padding: 10px 8px; font-size: 13.5px; font-weight: 700;
}
.pg-nums a:hover { border-color: var(--ink); text-decoration: none; }
.pg-nums a.is-current { background: var(--ink); color: #fff; border-color: var(--ink); }
.pg-nums .gap { color: var(--muted); padding: 0 2px; }

/* ------------------------------------------------------------- blog ----- */

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.post-card {
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  overflow: hidden; background: #fff;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.post-card:hover { box-shadow: var(--shadow); border-color: #9c9c92; transform: translateY(-2px); }
.post-card-body { display: flex; flex-direction: column; gap: 9px; padding: 22px; height: 100%; }
.post-card-body:hover { text-decoration: none; }
.post-card h3 { font-size: 18px; line-height: 1.28; letter-spacing: -.025em; }
.post-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--body); flex: 1; }

.post-cat {
  align-self: flex-start;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-dark); background: #fff3ec;
  padding: 5px 9px; border-radius: 999px;
}
.post-meta { font-size: 12.5px; color: var(--muted); font-weight: 600; }

.post { max-width: 780px; margin: 0 auto; padding: 8px 28px 0; }
.post-head { display: flex; flex-direction: column; gap: 13px; padding-bottom: 26px; }
.post-head h1 {
  font-size: clamp(28px, 4.2vw, 44px); line-height: 1.1;
  letter-spacing: -.04em; text-wrap: balance;
}
.post-standfirst { margin: 0; font-size: 18px; line-height: 1.6; color: var(--body); text-wrap: pretty; }

.post-body { border-top: 1px solid var(--line); padding-top: 26px; }
.post-body h2 {
  font-size: clamp(21px, 2.6vw, 26px); letter-spacing: -.028em;
  margin: 34px 0 12px; line-height: 1.25;
}
.post-body h2:first-child { margin-top: 0; }
.post-body p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.75; color: var(--body); text-wrap: pretty; }
.post-body ul { margin: 0 0 16px; padding-left: 22px; font-size: 16.5px; line-height: 1.75; color: var(--body); }
.post-body li { margin-bottom: 8px; }
.post-body a { font-weight: 700; border-bottom: 2px solid var(--accent); }
.post-body a:hover { text-decoration: none; color: var(--accent-dark); }
.post-body strong { color: var(--ink); }

.post-foot {
  margin-top: 34px; padding: 22px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.post-foot p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--body); }

@media (max-width: 860px) {
  .post { padding: 8px 16px 0; }
  .post-grid { grid-template-columns: 1fr; gap: 14px; }
  .post-card-body { padding: 18px; }
  .post-body p, .post-body ul { font-size: 15.5px; }
}

/* ------------------------------------------------ delivery page pieces --- */

.ship-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin: 22px 0;
}
.ship-card {
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 15px; background: #fff; display: flex; flex-direction: column; gap: 4px;
}
.ship-card b { font-size: 14.5px; letter-spacing: -.02em; }
.ship-card span { font-size: 12.5px; color: var(--body); line-height: 1.5; }

.review-head {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin-bottom: 20px; font-size: 14px; color: var(--body);
}
.review-head .stars { color: var(--accent); font-size: 19px; letter-spacing: 2px; }
.review-head strong { font-size: 17px; color: var(--ink); }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.review {
  margin: 0; border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  padding: 20px; background: #fff; display: flex; flex-direction: column; gap: 11px;
}
.review-photo {
  width: calc(100% + 40px); margin: -20px -20px 0; aspect-ratio: 4 / 3;
  object-fit: cover; background: var(--chip);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.review .stars { color: var(--accent); letter-spacing: 2px; font-size: 15px; }
.review blockquote { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--body); }
.review figcaption { font-size: 13px; font-weight: 700; display: flex; flex-direction: column; gap: 2px; }
.review figcaption span { font-size: 12px; font-weight: 600; color: var(--muted); }
.review-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 2px; padding-top: 11px; border-top: 1px solid var(--line);
}
.review-verified { font-size: 11.5px; font-weight: 700; color: var(--ok); white-space: nowrap; }

@media (max-width: 860px) {
  /* Base .nav-drop-wrap is a row flexbox for the desktop nav bar — without this
     override, the toggle button and the panel it reveals fight for horizontal
     space here and the panel renders squeezed to nothing, i.e. "blank". */
  .nav-drop-wrap { display: block; }
  .nav-drop { position: static; min-width: 0; border: 0; box-shadow: none; padding: 0 0 0 8px; }
  .nav-drop-grid { grid-template-columns: 1fr; }
  .nav-drop-btn { width: 100%; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .pg-nums a { min-width: 38px; padding: 9px 6px; }
}

/* ---------------------------------------------------------------- hero --- */

.hero { background: var(--ink); color: #fff; }
.hero-inner {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(50px, 8vw, 92px) 28px clamp(46px, 7vw, 84px);
  display: flex; flex-direction: column; gap: 22px; align-items: flex-start;
}
.eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--accent);
}
.hero h1 {
  font-size: clamp(36px, 6.6vw, 74px); line-height: .99;
  letter-spacing: -.045em; max-width: 900px; text-wrap: balance;
}
.hero p {
  margin: 0; font-size: clamp(15.5px, 1.9vw, 19px); line-height: 1.6;
  color: #b6b6b0; max-width: 580px; text-wrap: pretty;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--ink); border: 0;
  font-size: 15.5px; font-weight: 800; letter-spacing: -.01em;
  padding: 16px 30px; border-radius: var(--r-md);
}
.btn:hover { text-decoration: none; background: var(--accent-dark); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border: 1px solid #3a3a35; }
.btn-ghost:hover { background: #1a1a17; color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #24241f; color: #fff; }
.btn-line { background: #fff; color: var(--ink); border: 1px solid var(--line-2); }
.btn-line:hover { background: var(--chip); color: var(--ink); }
.btn-sm { font-size: 13.5px; padding: 11px 18px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.hero-stats {
  display: flex; gap: 28px; flex-wrap: wrap;
  border-top: 1px solid #262623; padding-top: 22px; margin-top: 6px; width: 100%;
}
.hero-stats div { display: flex; flex-direction: column; gap: 2px; }
.hero-stats b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.hero-stats span { font-size: 12.5px; color: var(--dim); }

/* ----------------------------------------------------------- trust bar --- */

.trust { border-bottom: 1px solid var(--line); }
.trust-grid {
  max-width: var(--max); margin: 0 auto; padding: 20px 28px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 24px;
}
.trust-item { display: flex; gap: 12px; align-items: center; }
.trust-item .ico { font-size: 18px; width: 24px; text-align: center; color: var(--accent); flex: none; }
.trust-item b { font-size: 13.5px; font-weight: 700; display: block; }
.trust-item span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* -------------------------------------------------------------- section -- */

.section { max-width: var(--max); margin: 0 auto; padding: clamp(44px, 6vw, 68px) 28px; }
.section-tight { padding-top: clamp(30px, 4vw, 44px); padding-bottom: clamp(30px, 4vw, 44px); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 24px;
}
.section-head h2 { font-size: clamp(25px, 3.4vw, 33px); }
.section-head p { margin: 6px 0 0; font-size: 14.5px; color: var(--muted); max-width: 60ch; }
.link-more {
  font-size: 14px; font-weight: 700;
  border-bottom: 2px solid var(--accent); padding-bottom: 2px; white-space: nowrap;
}
.link-more:hover { text-decoration: none; color: var(--accent-dark); }

/* --------------------------------------------------------- product card -- */

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grid-lg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Collection pages keep flowing columns — only the homepage is fixed at 4. */
.grid-flow { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

/* Items past the visible count, revealed by the View more button. */
.grid .extra-item, .tiles .extra-item { display: none; }
.grid.is-expanded .extra-item, .tiles.is-expanded .extra-item { display: flex; }

.view-more-row { display: flex; justify-content: center; padding-top: 22px; }
.view-more {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; color: var(--ink); border: 1px solid var(--line-2);
  font-size: 14px; font-weight: 700; padding: 13px 26px; border-radius: 999px;
}
.view-more:hover { background: var(--chip); border-color: var(--ink); }
.view-more .chev { transition: transform .2s ease; font-size: 11px; line-height: 1; }
.view-more[aria-expanded="true"] .chev { transform: rotate(180deg); }
.view-more .cnt { color: var(--muted); font-weight: 600; }

.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  overflow: hidden; background: #fff;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--shadow); border-color: #9c9c92; transform: translateY(-2px); }

.card-media {
  display: block; aspect-ratio: 1 / 1; position: relative; overflow: hidden;
}
.card-media:hover { text-decoration: none; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
/* Top-right: the source photos carry the flavour name burned in along the
   bottom edge, so a bottom-aligned badge collides with it. */
.card-media .puffs {
  position: absolute; right: 11px; top: 11px;
  background: rgba(11, 11, 11, .62); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; backdrop-filter: blur(4px);
}
.card-media .device-tag {
  position: absolute; right: 12px; bottom: 12px;
  color: rgba(255, 255, 255, .92);
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

.badges { position: absolute; top: 11px; left: 11px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.badge {
  font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}
.badge-save { background: var(--accent); color: var(--ink); }
.badge-new { background: #fff; color: var(--ink); border: 1px solid var(--line-2); }
.badge-out { background: rgba(11, 11, 11, .78); color: #fff; }
.badge-low { background: #fff3ec; color: var(--warn); border: 1px solid #ffd9c6; }

.card-body { padding: 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.card-body h3 { font-size: 14.5px; font-weight: 700; line-height: 1.32; letter-spacing: -.012em; }
.card-body h3 a:hover { color: var(--accent-dark); text-decoration: none; }

.stars { color: var(--accent); letter-spacing: 1px; font-size: 12px; }
.rating { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }

.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 6px; margin-top: auto;
}
.price { display: flex; align-items: baseline; gap: 7px; }
.price b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.price s { font-size: 12.5px; color: var(--muted); }
.price-unit { font-size: 11.5px; color: var(--muted); display: block; margin-top: 2px; }

.add-btn {
  border: 0; font-size: 12.5px; font-weight: 700;
  background: var(--ink); color: #fff;
  padding: 10px 13px; border-radius: var(--r-sm); white-space: nowrap;
}
.add-btn:hover { background: var(--chip); color: var(--ink); }
.add-btn.is-added { background: var(--ok); color: #fff; }
.add-btn[disabled] { background: var(--chip); color: var(--muted); cursor: not-allowed; }

/* ---------------------------------------------------------- collections -- */

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  overflow: hidden; background: #fff; color: var(--ink);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.tile:hover {
  text-decoration: none; box-shadow: var(--shadow);
  border-color: #9c9c92; transform: translateY(-2px);
}
.tile-media { display: block; aspect-ratio: 4 / 3; position: relative; overflow: hidden; }
/* Product shots are on white, so contain-and-pad reads better than a crop. */
.tile-media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; background: #fff; }
.tile-text { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; }
.tile b { font-size: 15px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25; }
.tile-text > span { font-size: 12px; font-weight: 600; color: var(--muted); }

/* ------------------------------------------------------- wholesale ------ */

.eyebrow-dark { color: var(--accent-dark); }

/* ------------------------------------------------- category SEO blocks -- */

.cat-block + .cat-block { border-top: 1px solid var(--line); padding-top: clamp(30px, 4vw, 44px); }
/* Centred: left-aligned it stranded itself against the edge of the wide shell. */
.cat-copy {
  margin: 24px auto 0; padding-top: 22px;
  border-top: 1px solid var(--line); max-width: 82ch; width: 100%;
}
.cat-copy h3 { font-size: 19px; letter-spacing: -.025em; margin-bottom: 12px; }
.cat-copy p { margin: 0 0 13px; font-size: 14.5px; line-height: 1.75; color: var(--body); text-wrap: pretty; }
.cat-copy p:last-child { margin-bottom: 0; }
.cat-copy a { font-weight: 700; border-bottom: 2px solid var(--accent); }
.cat-copy a:hover { text-decoration: none; color: var(--accent-dark); }

/* ------------------------------------------------------------ SEO prose -- */

.prose-band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prose { max-width: var(--max-read); margin: 0 auto; padding: clamp(44px, 6vw, 68px) 20px; }
.prose h2 { font-size: clamp(23px, 3vw, 29px); line-height: 1.18; margin-bottom: 18px; }
.prose h3 { font-size: 18px; margin: 28px 0 10px; letter-spacing: -.02em; }
.prose p { margin: 0 0 15px; font-size: 15.5px; line-height: 1.75; color: var(--body); text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0 0 15px; padding-left: 20px; color: var(--body); font-size: 15.5px; line-height: 1.75; }
.prose li { margin-bottom: 6px; }
.prose a { font-weight: 700; border-bottom: 2px solid var(--accent); }
.prose a:hover { text-decoration: none; color: var(--accent-dark); }

/* Sticky header would otherwise cover the target of a jump link. */
.prose h2[id], .prose-band[id] { scroll-margin-top: 120px; }

.jump-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size: 13.5px; padding-top: 4px;
}
.jump-nav > span { color: var(--dim); font-weight: 600; }
.jump-nav a {
  color: #fff; font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 1px;
}
.jump-nav a:hover { text-decoration: none; color: var(--accent); border-bottom-color: var(--accent); }

.flav-list { list-style: none; padding-left: 0; }
.flav-list li {
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.6;
}
.flav-list li:last-child { border-bottom: 0; }
.flav-meta {
  display: inline-block; margin-left: 4px;
  font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap;
}

/* --------------------------------------------------------- breadcrumbs --- */

.crumbs {
  max-width: var(--max); margin: 0 auto; padding: 16px 28px 0;
  font-size: 12.5px; color: var(--muted);
  display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
}
.crumbs a:hover { color: var(--ink); }
.crumbs .here { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------- listing --- */

.listing {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(22px, 3vw, 34px) 28px 0;
}

.listing-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.listing-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 13px;
}
.listing-bar .count { font-size: 13.5px; color: var(--muted); }
.listing-bar .count strong { color: var(--ink); }
.listing-bar label { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); }
select.sel {
  border: 1px solid var(--line-2); border-radius: 9px;
  padding: 9px 11px; font-size: 13.5px; background: #fff; color: var(--ink);
}
.empty-state {
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  padding: 48px 24px; text-align: center; color: var(--muted);
}
.empty-state b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 6px; }

/* ---------------------------------------------------------------- PDP ---- */

.pdp {
  max-width: var(--max-mid); margin: 0 auto;
  padding: 22px 28px 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(26px, 4vw, 52px); align-items: start;
}

.gallery { display: flex; flex-direction: column; gap: 11px; }
.gallery-main {
  aspect-ratio: 1 / 1; border-radius: var(--r-lg);
  position: relative; overflow: hidden;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main .flav {
  position: absolute; left: 18px; bottom: 18px; right: 18px;
  color: #fff; font-size: 13px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.pdp-info { display: flex; flex-direction: column; gap: 16px; }

.pdp-info h1 {
  font-size: clamp(26px, 4vw, 40px); line-height: 1.07;
  letter-spacing: -.038em; text-wrap: balance;
}
.pdp-meta { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.pdp-meta a { font-weight: 600; color: var(--ink); }

.stock-ok { color: var(--ok); font-weight: 600; }
.stock-low { color: var(--warn); font-weight: 600; }
.stock-out { color: #a11; font-weight: 600; }

.pdp-price { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.pdp-price b { font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.pdp-price s { font-size: 15px; color: var(--muted); }
.pdp-price .save {
  background: var(--accent); color: var(--ink);
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}
.ship-note { font-size: 12.5px; color: var(--muted); }

.pdp-lede { margin: 0; font-size: 15px; line-height: 1.7; color: var(--body); max-width: 54ch; text-wrap: pretty; }

.spec-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line-2); background: #fff;
  padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
}
.chip .dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.chip:hover { text-decoration: none; border-color: var(--ink); }

.buy-row { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; }
.stepper {
  display: flex; align-items: center;
  border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden;
}
.stepper button { border: 0; background: #fff; width: 46px; height: 52px; font-size: 19px; line-height: 1; }
.stepper button:hover { background: var(--chip); }
.stepper span { min-width: 36px; text-align: center; font-size: 15px; font-weight: 700; }
.buy-row .btn { flex: 1; min-width: 210px; height: 52px; padding: 0 24px; }

.assurance { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

.crypto-callout {
  margin: 2px 0 4px; font-size: 13px; line-height: 1.6; color: var(--body);
}
/* A plain inline link, not a pill button — it is a secondary aside inside a
   sentence, and a filled orange chip there competed with the real CTA. */
.crypto-callout-link {
  font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 2px;
}
.crypto-callout-link:hover { color: var(--accent-dark); }

.accordion { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-top: 4px; }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head {
  width: 100%; background: none; border: 0; padding: 17px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; text-align: left; color: var(--ink);
}
.acc-head .mark { color: var(--accent); font-size: 17px; line-height: 1; flex: none; }
.acc-body { padding: 0 0 18px; font-size: 13.5px; line-height: 1.7; color: var(--body); max-width: 62ch; }
.acc-body[hidden] { display: none; }
.acc-body p { margin: 0 0 10px; }
.acc-body p:last-child { margin-bottom: 0; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.spec-table th, .spec-table td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { font-weight: 600; color: var(--muted); width: 42%; }
.spec-table td { color: var(--ink); font-weight: 600; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------- cart ---- */

.page-head { max-width: var(--max); margin: 0 auto; padding: clamp(26px, 4vw, 42px) 28px 22px; }
.page-head h1 { font-size: clamp(28px, 4.4vw, 42px); letter-spacing: -.038em; }
.page-head p { margin: 8px 0 0; font-size: 14.5px; color: var(--muted); }

.cart-layout {
  max-width: var(--max-mid); margin: 0 auto; padding: 0 28px clamp(48px, 6vw, 72px);
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(24px, 3.5vw, 44px);
}
.cart-lines { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; }

.line { display: flex; gap: 15px; padding: 18px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.line-media { width: 92px; height: 92px; flex: none; border-radius: var(--r-md); overflow: hidden; }
.line-media img { width: 100%; height: 100%; object-fit: cover; }
.line-info { flex: 1; min-width: 175px; display: flex; flex-direction: column; gap: 5px; }
.line-info h2 { font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: -.015em; }
.line-info .sub { font-size: 12.5px; color: var(--muted); }
.line-actions { display: flex; align-items: center; gap: 13px; margin-top: 7px; flex-wrap: wrap; }
.stepper-sm button { width: 38px; height: 40px; font-size: 17px; }
.stepper-sm span { min-width: 30px; font-size: 14px; }
.link-btn {
  border: 0; background: none; padding: 0;
  font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: underline;
}
.link-btn:hover { color: var(--ink); }
.line-total { font-size: 16px; font-weight: 800; margin-left: auto; letter-spacing: -.02em; }

.summary {
  flex: 1 1 300px; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px; display: flex; flex-direction: column; gap: 13px;
  position: sticky; top: 169px;
}
@media (max-width: 860px) { .summary { position: static; } }
.summary h2 { font-size: 17px; letter-spacing: -.025em; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--body); }
.summary-row span:last-child { font-weight: 600; color: var(--ink); }
.summary-total {
  display: flex; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); padding-top: 13px;
  font-size: 19px; font-weight: 800; letter-spacing: -.025em;
}

.ship-meter { background: var(--surface); border-radius: var(--r-md); padding: 13px 15px; font-size: 12.5px; color: var(--body); }
.ship-meter .track { height: 6px; background: #e4e4dd; border-radius: 999px; margin-top: 9px; overflow: hidden; }
.ship-meter .fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }

.pay-marks { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.pay-mark {
  border: 1px solid var(--line-2); border-radius: 6px; padding: 5px 8px;
  font-size: 10px; letter-spacing: .06em; color: #7a7a71; font-weight: 700; white-space: nowrap;
}

.mini-trust { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--line); padding-top: 13px; }
.mini-trust div { display: flex; gap: 10px; align-items: flex-start; }
.mini-trust .ico { color: var(--accent); width: 17px; font-size: 14px; flex: none; }
.mini-trust span { font-size: 12.5px; line-height: 1.5; color: #5f5f57; }
.mini-trust strong { color: var(--ink); }

/* ----------------------------------------------------------- checkout ---- */

.steps {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--muted); flex-wrap: wrap;
  max-width: var(--max-mid); margin: 0 auto; padding: 0 28px 24px;
}
.steps .on { font-weight: 700; color: var(--ink); }
.steps .secure { margin-left: auto; display: flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; }
.steps .secure i { color: var(--accent); font-style: normal; }

.co-form { display: flex; flex-direction: column; gap: 28px; flex: 1 1 380px; min-width: 0; }
fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
fieldset h2 {
  font-size: 17px; letter-spacing: -.025em; margin-bottom: 2px;
  display: flex; align-items: center; gap: 9px;
}
fieldset .hint { font-size: 13px; color: var(--body); margin: -4px 0 4px; }

/* Numbered step badge on each checkout section heading. */
.step-n {
  flex: none; display: inline-grid; place-items: center;
  width: 25px; height: 25px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: 0;
}
/* Secondary heading inside a numbered section (e.g. Delivery method). */
.sub-h {
  font-size: 14px; letter-spacing: -.015em; margin: 8px 0 -2px;
  color: var(--ink);
}

/* Empty fields are all placeholder text, so a pale placeholder made the whole
   form read as disabled. Darker placeholder + a firmer border fixes that. */
.field {
  border: 1.5px solid var(--line-2); border-radius: 11px;
  padding: 14px; font-size: 15px; outline: 0;
  background: #fff; width: 100%; color: var(--ink); font-weight: 500;
}
.field::placeholder { color: #6e6e66; opacity: 1; }
.field:hover { border-color: var(--line-strong); }
.field:focus {
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255, 92, 51, .16);
}
select.field { color: var(--ink); font-weight: 600; }
.field-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; }
.field-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 11px; }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--ink); line-height: 1.5; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; margin-top: 2px; }

.radio-card {
  display: flex; align-items: center; gap: 13px;
  border: 1.5px solid var(--line-2); background: #fff;
  border-radius: var(--r-md); padding: 15px; cursor: pointer;
}
.radio-card:hover { border-color: var(--line-strong); }
.radio-card:has(input:checked) {
  border-color: var(--accent); background: #fff6f3;
  box-shadow: 0 0 0 3px rgba(255, 92, 51, .14);
}
/* When this card's own description sits open right below it, merge the two
   into one continuous card — flatten the seam instead of stacking a second,
   separately-bordered box underneath. */
.radio-card:has(+ .bank-panel:not([hidden])) {
  border-radius: var(--r-md) var(--r-md) 0 0; border-bottom-color: transparent;
}
.radio-card input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.radio-card .rc-text { display: flex; flex-direction: column; gap: 2px; }
.radio-card b { font-size: 15px; font-weight: 700; }
.radio-card span { font-size: 13px; color: var(--ink); }
.radio-card .rc-price { margin-left: auto; font-size: 14.5px; font-weight: 700; white-space: nowrap; }

/* Reads as this option's own extra detail dropping down from the card above
   it — not a second, separately-boxed panel — so no border/heading of its
   own, just a softer nested tint and rounded only where it isn't already
   flush against the radio-card. */
.bank-panel {
  background: var(--surface); border: 1.5px solid var(--line-2); border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md); margin-top: -1.5px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
}
.radio-card:has(input:checked) + .bank-panel { border-color: var(--accent); }
.bank-panel h3 { display: none; }
.bank-panel p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--body); }
/* Hidden unless an admin has switched a method to publish real account
   details again (see /admin/dashboard.php) — off by default. */
.bank-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 11px; }
.bank-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.bank-row span { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.bank-row b { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }

/* Screenshot-upload step — required before submit whenever the selected
   gateway's account details are shown (see needsProof() in app.js). */
.pay-upload {
  margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.pay-upload-title { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.pay-upload-req { color: #c0311a; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pay-upload-desc { margin: 0 0 4px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.pay-upload-drop {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-md);
  padding: 18px 14px; text-align: center; cursor: pointer;
  font-size: 13.5px; font-weight: 700; color: var(--ink); background: #fff;
}
.pay-upload-drop:hover { border-color: var(--accent); background: #fff6f3; }
.pay-upload-drop-icon { font-size: 17px; line-height: 1; }
.pay-upload-drop.has-file { border-style: solid; border-color: var(--ok); color: var(--ok); }

/* The discount is now written into the gateway's own name rather than shown as
   a coloured badge beside it, so every payment option reads at the same weight. */

/* Asterisked caveat inside a payment panel (e.g. Banxa's ID check). Set apart
   from the description above it so it isn't missed, without shouting. */
.pay-note {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line-strong);
  font-size: 12.5px; line-height: 1.6; color: var(--body);
}
.pay-note-star { color: #c0311a; font-weight: 800; }
.pay-note strong { color: var(--ink); }

.summary-row.is-discount span { color: var(--ok); }
.summary-row.is-discount span:last-child { font-weight: 700; }

/* Minimum-order gate */
.min-gate {
  border: 1px solid #ffdcc4; background: #fff6ee; color: #7a3d14;
  border-radius: var(--r-md); padding: 13px 15px; font-size: 13px; line-height: 1.55;
}
.min-gate strong { display: block; font-size: 14px; margin-bottom: 3px; color: var(--warn); }
.crypto-nudge {
  border: 1px dashed var(--accent); border-radius: var(--r-md);
  padding: 11px 14px; font-size: 12.5px; line-height: 1.5; color: var(--body);
  background: #fff8f5;
}
.crypto-nudge strong { color: var(--accent-dark); }

.co-summary {
  background: var(--surface); border-radius: var(--r-lg); padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 169px; flex: 1 1 300px;
}
@media (max-width: 860px) { .co-summary { position: static; } }
.co-summary h2 { font-size: 15px; letter-spacing: -.02em; }
.co-line { display: flex; gap: 12px; align-items: center; }
.co-line .m { width: 52px; height: 52px; flex: none; border-radius: 10px; overflow: hidden; }
.co-line .m img { width: 100%; height: 100%; object-fit: cover; }
.co-line .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co-line .t b { font-size: 13px; font-weight: 700; line-height: 1.35; }
.co-line .t span { font-size: 12px; color: var(--muted); }
.co-line .amt { margin-left: auto; font-size: 13.5px; font-weight: 700; white-space: nowrap; }

.notice {
  border-radius: var(--r-md); padding: 15px 17px;
  font-size: 13.5px; line-height: 1.6;
}
.notice-ok { background: #edf7f0; border: 1px solid #c9e6d3; color: #1c5c33; }
.notice-warn { background: #fff6ee; border: 1px solid #ffdcc4; color: #7a3d14; }
.notice-bad { background: #fdf0ee; border: 1px solid #f2c9c0; color: #8a2c17; }
.notice b { display: block; margin-bottom: 4px; font-size: 14.5px; }
.notice span { display: block; margin-top: 4px; }
.notice-followup-cta {
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed #c9e6d3;
  font-size: 14.5px; font-weight: 800; color: #164726;
}

/* Submit button while the order is in flight to /api/order.php. */
.btn.is-busy { opacity: .6; pointer-events: none; }

/* -------------------------------------------- order confirmation page ---- */

.order-done { max-width: var(--max-read); margin: 0 auto; }
.order-done .page-head { text-align: center; }

.os-card {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center; padding: 40px 26px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  margin-bottom: 26px;
}

.os-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line-2); border-top-color: var(--accent);
  animation: os-spin .9s linear infinite;
}
@keyframes os-spin { to { transform: rotate(360deg); } }
/* Respect a reduced-motion preference — pulse instead of spin. */
@media (prefers-reduced-motion: reduce) {
  .os-spinner { animation: os-pulse 1.4s ease-in-out infinite; }
  @keyframes os-pulse { 50% { opacity: .35; } }
}

.os-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 27px; line-height: 1; color: #fff;
}
.os-icon-ok { background: var(--ok); }
.os-icon-wait { background: var(--accent); }
.os-icon-bad { background: var(--warn); }

.os-ref {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 13px 22px;
}
.os-ref span {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.os-ref b { font-size: 19px; letter-spacing: .02em; font-family: ui-monospace, Consolas, monospace; }

.os-msg { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.65; color: var(--body); }
.os-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ------------------------------------------------------------- footer ---- */

.site-footer { background: var(--ink); color: #e6e6e2; margin-top: clamp(40px, 5vw, 64px); }
.footer-grid {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(40px, 5vw, 58px) 28px 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px 40px;
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-brand .brand { color: #fff; }
.footer-brand p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--dim); }
.footer-email { font-size: 13.5px; font-weight: 700; color: #fff; }
.footer-email:hover { color: var(--accent); text-decoration: none; }
.footer-form { display: flex; gap: 9px; flex-wrap: wrap; }
.footer-form input {
  flex: 1; min-width: 150px; border: 1px solid #2c2c29; background: #151513;
  color: #fff; border-radius: 10px; padding: 12px; font-size: 13.5px; outline: 0;
}
.footer-form input::placeholder { color: #6d6d66; }
.footer-form button {
  border: 0; background: var(--accent); color: var(--ink);
  font-size: 13.5px; font-weight: 800; padding: 12px 18px; border-radius: 10px;
}
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col h2 {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #8a8a82; font-weight: 700; margin-bottom: 3px;
}
.footer-col a { font-size: 13.5px; color: #dcdcd6; }
.footer-col a:hover { color: #fff; }

.footer-legal {
  max-width: var(--max); margin: 0 auto;
  padding: 18px 28px 20px; border-top: 1px solid #262623;
  font-size: 11.5px; line-height: 1.7; color: #8a8a82;
}
.footer-legal p { margin: 0 0 8px; max-width: 92ch; }
.footer-base {
  max-width: var(--max); margin: 0 auto; padding: 14px 28px 40px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.footer-base .copy { font-size: 12.5px; color: #8a8a82; }
.footer-base .pay-mark { border-color: #2c2c29; color: var(--dim); }

/* ----------------------------------------------------------- age gate ---- */

.age-gate {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11, 11, 11, .93); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 20px;
}
.age-gate[hidden] { display: none; }
.age-card {
  background: #fff; border-radius: var(--r-xl); max-width: 430px; width: 100%;
  padding: 30px; display: flex; flex-direction: column; gap: 14px; text-align: center;
}
.age-card .brand { justify-content: center; }
.age-card h2 { font-size: 25px; letter-spacing: -.035em; }
.age-card p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--body); }
.age-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.age-actions .btn { flex: 1; min-width: 130px; }
.age-card .fine { font-size: 11.5px; color: var(--muted); line-height: 1.55; }

/* ---------------------------------------------------------------- toast -- */

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 90px);
  background: var(--ink); color: #fff; border-radius: var(--r-md);
  padding: 13px 20px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3); z-index: 150;
  opacity: 0; transition: transform .28s ease, opacity .28s ease; pointer-events: none;
  max-width: calc(100vw - 40px);
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.toast a { color: var(--accent); font-weight: 800; margin-left: 10px; }

/* --------------------------------------------------------- side cart ---- */

.drawer-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(11, 11, 11, .5); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; z-index: 120;
  height: 100dvh; width: min(420px, 100vw);
  background: #fff; border-left: 1px solid var(--line);
  box-shadow: -18px 0 44px rgba(11, 11, 11, .16);
  display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1), visibility .32s ease;
}
.drawer.is-open { transform: none; visibility: visible; }

.drawer-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--line); flex: none;
}
.drawer-head h2 { font-size: 17px; letter-spacing: -.025em; }
.drawer-head .n { color: var(--muted); font-weight: 700; }
.drawer-close {
  margin-left: auto; border: 0; background: var(--chip);
  width: 34px; height: 34px; border-radius: 999px;
  font-size: 19px; line-height: 1; color: var(--ink); flex: none;
}
.drawer-close:hover { background: var(--ink); color: #fff; }

.drawer-ship {
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--body); background: var(--surface); flex: none;
}
.drawer-ship strong { color: var(--ink); }
.drawer-ship .track { height: 6px; background: #e4e4dd; border-radius: 999px; margin-top: 9px; overflow: hidden; }
.drawer-ship .fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }

.drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px; }

.drawer-line { display: flex; gap: 13px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.drawer-line:last-child { border-bottom: 0; }
.drawer-line .m { width: 66px; height: 66px; flex: none; border-radius: 10px; overflow: hidden; }
.drawer-line .m img { width: 100%; height: 100%; object-fit: cover; }
.drawer-line .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.drawer-line .t h3 { font-size: 13.5px; font-weight: 700; line-height: 1.35; letter-spacing: -.012em; }
.drawer-line .t .sub { font-size: 11.5px; color: var(--muted); }
.drawer-line .row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.drawer-line .amt { margin-left: auto; font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.stepper-xs { border-radius: 9px; }
.stepper-xs button { width: 32px; height: 32px; font-size: 15px; }
.stepper-xs span { min-width: 26px; font-size: 13px; }

.drawer-empty { padding: 48px 20px; text-align: center; color: var(--muted); font-size: 13.5px; }
.drawer-empty b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 6px; }

.drawer-foot {
  flex: none; border-top: 1px solid var(--line);
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 11px; background: #fff;
}
.drawer-foot .rows { display: flex; flex-direction: column; gap: 7px; }
.drawer-foot .note { font-size: 11.5px; color: var(--muted); text-align: center; }

/* ----------------------------------------------------------- utilities --- */

.banner-wide {
  max-width: var(--max); margin: 0 auto;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--ink); color: #fff;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: center;
}
.banner-copy { padding: clamp(30px, 4vw, 44px); display: flex; flex-direction: column; gap: 13px; align-items: flex-start; }
.banner-copy h2 { font-size: clamp(23px, 3vw, 31px); }
.banner-copy p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #b6b6b0; max-width: 46ch; }
.banner-art { min-height: 220px; height: 100%; position: relative; }
.banner-art .tiers {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 24px; gap: 9px; align-content: center;
}
.banner-art .tier {
  background: rgba(11, 11, 11, .55); backdrop-filter: blur(4px);
  border-radius: 10px; padding: 9px 15px; width: 100%; max-width: 250px;
  display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 700;
}
.banner-art .tier em { font-style: normal; color: var(--accent); }

.strip { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.strip > * { flex: 0 0 210px; scroll-snap-align: start; }

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.contact-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 7px; }
.contact-card h3 { font-size: 15px; }
.contact-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--body); }

/* ========================================================================== */
/*  MOBILE — off-canvas nav, icon cart, detached search, 2-up product grids   */
/* ========================================================================== */

/* Tablet: step 4 columns down to 3 before the 2-up mobile layout kicks in. */
@media (max-width: 1240px) and (min-width: 861px) {
  .grid, .grid-lg, .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {

  /* --- header row: [menu] [brand] ......... [cart] --- */
  /* The header-bar's desktop layout is a 3-column grid (1fr auto 1fr) that
     centres header-links between the brand and search/cart — but grid
     auto-placement skips display:none items rather than reserving their
     track, so with header-links hidden below, header-right slides into the
     middle track instead of the last one, stranding it short of the right
     edge and squeezing header-left into whatever's left. Plain flex sidesteps
     that entirely, and there's nothing to centre on mobile anyway since
     header-links always lives in the off-canvas menu here. */
  .header-bar { display: flex; padding: 10px 16px; gap: 12px; flex-wrap: nowrap; }
  .header-left { gap: 12px; }
  .header-right { gap: 10px; margin-left: auto; justify-self: auto; }
  .nav-toggle { display: flex; }
  .brand { font-size: 17px; gap: 5px; }
  .brand small { font-size: 8.5px; letter-spacing: .14em; }

  .cart-btn { padding: 10px 13px; gap: 7px; }
  .cart-word { display: none; }
  .ico-cart { width: 20px; height: 20px; }

  /* Inline search box gives way to the icon + collapsible panel. The delivery
     link moves into the off-canvas menu instead. */
  .header-bar .search { display: none; }
  .header-links { display: none; }
  .icon-btn { display: inline-flex; }
  .mobile-search {
    display: block; background: #fff;
    border-bottom: 1px solid var(--line); padding: 10px 16px;
  }
  .mobile-search .search { max-width: none; width: 100%; margin: 0; }

  /* Nav is off-canvas here, so the band must not paint a stray strip. */
  .nav-band { background: none; border-top: 0; }
  .jump-nav { display: none; }

  /* backdrop-filter (like transform/filter) makes an element a containing
     block for its position:fixed descendants — with it left on here, the
     off-canvas .site-nav below anchors to .site-header's own sticky box
     instead of the true viewport, leaving it start below the announcement
     bar instead of covering it. Dropping the blur on mobile (a solid header
     reads fine here anyway) restores normal fixed-to-viewport positioning. */
  .site-header { backdrop-filter: none; background: #fff; }

  /* --- off-canvas menu --- */
  .site-nav {
    position: fixed; top: 0; left: 0; z-index: 130;
    width: min(320px, 86vw); height: 100dvh;
    background: #fff; border-right: 1px solid var(--line);
    box-shadow: 18px 0 44px rgba(11, 11, 11, .18);
    /* flex-wrap must be reset here — the base .site-nav rule sets it to `wrap`
       for the desktop horizontal bar. Left as `wrap`, this column flexbox wraps
       into a second column once the expanded categories panel makes the total
       content taller than the drawer, rendering that panel beside the links
       instead of stacked underneath them, cut off at the drawer's edge. */
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    gap: 0; padding: 0; order: 0; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility .3s ease;
  }
  .site-nav.is-open { transform: none; visibility: visible; }

  .nav-head {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: none;
    padding: 16px 18px; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: #fff; z-index: 1;
  }

  .site-nav { max-width: none; padding: 0; }
  .site-nav a {
    padding: 14px 18px; border-bottom: 1px solid var(--line);
    font-size: 15px; font-weight: 600; border-left: 3px solid transparent;
  }
  .site-nav a:hover { text-decoration: none; background: var(--chip); border-bottom-color: var(--line); }
  .site-nav a.is-active { border-left-color: var(--accent); background: var(--surface); font-weight: 700; }

  .nav-extra { display: flex; flex-direction: column; margin-top: auto; background: var(--surface); }
  .nav-extra a {
    font-size: 14px; font-weight: 700; color: var(--ink);
    border-bottom: 1px solid var(--line); padding: 13px 18px;
  }
  .nav-extra a:hover { text-decoration: none; background: var(--chip); }

  /* --- product grids: strict 2 across --- */
  .grid, .grid-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card-body { padding: 11px; gap: 5px; }
  .card-body h3 { font-size: 13px; line-height: 1.3; }
  .card-kicker { font-size: 9.5px; letter-spacing: .09em; }
  .card-foot { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 4px; }
  .price b { font-size: 14.5px; }
  .price s { font-size: 11px; }
  .price-unit { font-size: 10.5px; }
  .add-btn { width: 100%; text-align: center; padding: 9px 8px; font-size: 12px; }
  .badge { font-size: 9px; padding: 4px 7px; letter-spacing: .06em; }
  .badges { top: 8px; left: 8px; gap: 4px; }
  .card-media .puffs { font-size: 9px; padding: 4px 7px; right: 8px; top: 8px; }
  .card-media .device-tag { display: none; }
  .strip > * { flex: 0 0 46%; }

  /* --- spacing and type --- */
  .section { padding-left: 16px; padding-right: 16px; }
  .wrap, .crumbs, .page-head, .header-bar, .footer-grid, .footer-base, .footer-legal,
  .listing, .cart-layout, .pdp, .steps { padding-left: 16px; padding-right: 16px; }
  .prose { padding-left: 16px; padding-right: 16px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tile-text { padding: 10px 11px 12px; }
  .tile b { font-size: 13px; }
  .tile-text > span { font-size: 11px; }
  .cat-copy { margin-top: 18px; padding-top: 18px; }
  .cat-copy h3 { font-size: 17px; }
  .cat-copy p { font-size: 14px; }
  .hero-stats { gap: 20px 26px; }
  .hero-stats b { font-size: 19px; }

  /* --- listing --- */
  .listing-bar { gap: 10px; }
  .listing-bar .count { font-size: 12.5px; }

  /* --- PDP --- */
  .pdp { gap: 22px; }
  .buy-row .btn { min-width: 0; }
  .stepper button { width: 42px; }

  /* --- wide tables must scroll inside themselves, not the page --- */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap .spec-table { min-width: 460px; }

  /* --- cart / checkout --- */
  .line-media { width: 74px; height: 74px; }
  .drawer { width: 100vw; }
  .footer-base { flex-direction: column; align-items: flex-start; }

  /* --- bottom navbar (Home / Shop / Cart) --- */
  /* body padding must stay in step with the bar's real height, or the last
     line of every page sits underneath it: ~17px icon + 1px gap + ~11px label
     + 5px item padding + 7px bar padding + 1px border. */
  body { padding-bottom: calc(46px + env(safe-area-inset-bottom)); }
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 105;
    background: #fff; border-top: 1px solid var(--line);
    padding: 3px 4px calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 14px rgba(11, 11, 11, .06);
  }
  .bn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
    position: relative; padding: 3px 4px 2px; border-radius: var(--r-sm);
    font-size: 9.5px; font-weight: 700; letter-spacing: -.01em; color: var(--muted);
  }
  .bn-item:hover { text-decoration: none; color: var(--ink); }
  .bn-item .ico, .bn-item .ico-cart { width: 17px; height: 17px; }
  .bn-item.is-active { color: var(--accent-dark); }
  .bn-count {
    position: absolute; top: -1px; right: 18px;
    background: var(--accent); color: var(--ink);
    min-width: 13px; height: 13px; border-radius: 999px; padding: 0 3px;
    display: inline-grid; place-items: center; font-size: 8.5px; font-weight: 800;
  }
}

@media (max-width: 400px) {
  .grid, .grid-lg { gap: 10px; }
  .card-body { padding: 9px; }
  .card-body h3 { font-size: 12.5px; }
  .brand small { display: none; }
}

@media print { .site-header, .site-footer, .age-gate, .toast { display: none !important; } }