/** Shopify CDN: Minification failed

Line 1243:0 Unexpected "}"

**/
/* ============================================================================
   Luminate Co — 2026 editorial refresh
   Implements the design handoff's token set on top of the existing theme.
   Loaded last, so these rules win over app.css without editing the compiled
   Tailwind build. Plain CSS by design — no Tailwind build step required.
   ========================================================================= */

:root {
  /* greens */
  --lum-green: #9eb061;          /* brand green — fills, rules, accents */
  --lum-green-text: #606d2e;     /* small text on light grounds (contrast-safe) */
  --lum-green-light: #c6d398;    /* small text on brown grounds */
  --lum-green-deep: #3f4a1e;     /* eyebrow over hero scrim */
  --lum-green-shade: #93a557;

  /* browns */
  --lum-brown: #594a41;          /* body text, dark fields, primary buttons */
  --lum-brown-deep: #3a3029;     /* announcement bar, footer, button hover */
  --lum-brown-mid: #4c4038;
  --lum-brown-black: #2e2621;    /* hero headline */
  --lum-ink-on-green: #2e2a1c;
  --lum-body-light: #443a32;
  --lum-muted: #6b5c51;

  /* creams */
  --lum-cream: #f6f3ec;          /* page ground, text on dark */
  --lum-cream-alt: #ede8dc;      /* alternate band */
  --lum-cream-ph: #e4ded0;       /* image placeholder fill */
  --lum-hairline: #e2dbcb;       /* borders, grid gaps */
  --lum-cream-on-brown: #ede5da;
  --lum-meta-on-brown: #e3d9cf;

  /* type */
  --lum-display: "IM Fell DW Pica Pro", ui-serif, Georgia, serif;
  --lum-body: Montserrat, ui-sans-serif, system-ui, sans-serif;
  --lum-label: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* rhythm */
  --lum-pad-y: clamp(56px, 8vw, 110px);
  --lum-pad-x: clamp(24px, 5vw, 64px);
}

/* ---------- the third voice: tracked uppercase micro-labels --------------- */
.lum-eyebrow {
  display: block;
  font-family: var(--lum-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lum-green-text);
  margin: 0 0 16px;
}
.lum-eyebrow--on-brown { color: var(--lum-green-light); }
.lum-eyebrow--on-green { color: var(--lum-ink-on-green); }
.lum-meta {
  font-family: var(--lum-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lum-muted);
}

/* ---------- display type ------------------------------------------------- */
.lum-h1,
.lum-h2,
.lum-h3 {
  font-family: var(--lum-display);
  font-weight: 400;
  text-wrap: balance;
  margin: 0;
}
.lum-h1 { font-size: clamp(44px, 8.5vw, 112px); line-height: 0.93; letter-spacing: -0.005em; }
.lum-h2 { font-size: clamp(34px, 5vw, 64px); line-height: 0.98; }
.lum-h3 { font-size: clamp(26px, 3vw, 34px); line-height: 1.05; }
.lum-lede {
  font-family: var(--lum-body);
  font-weight: 300;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.6;
  max-width: 48ch;
}

/* ---------- bands -------------------------------------------------------- */
.lum-band { padding: var(--lum-pad-y) var(--lum-pad-x); }
.lum-band--cream { background: var(--lum-cream); color: var(--lum-brown); }
.lum-band--alt   { background: var(--lum-cream-alt); color: var(--lum-brown); }
.lum-band--brown { background: var(--lum-brown); color: var(--lum-cream); }
.lum-band--green { background: var(--lum-green); color: var(--lum-ink-on-green); }

/* section header row: left-aligned title, right-aligned link (Erewhon pattern) */
.lum-headrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 44px;
}
.lum-headrow__text { max-width: 60ch; }
.lum-headrow .lum-lede { margin-top: 16px; }

/* ---------- links & buttons --------------------------------------------- */
.lum-link {
  font-family: var(--lum-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  border-bottom: 1.5px solid var(--lum-green);
  padding-bottom: 4px;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.lum-link:hover { color: var(--lum-green-text); }
.lum-band--brown .lum-link:hover,
.lum-band--green .lum-link:hover { color: var(--lum-cream); border-color: currentColor; }

.lum-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--lum-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 17px 32px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.lum-btn:hover { transform: translateY(-2px); }
.lum-btn--primary { background: var(--lum-brown); color: var(--lum-cream); }
.lum-btn--primary:hover { background: var(--lum-brown-deep); color: var(--lum-cream); }
.lum-btn--outline { border-color: var(--lum-brown); color: var(--lum-brown); background: transparent; }
.lum-btn--outline:hover { background: var(--lum-brown); color: var(--lum-cream); }
.lum-btn--green { background: var(--lum-green); color: var(--lum-ink-on-green); }
.lum-btn--green:hover { background: var(--lum-cream); color: var(--lum-brown); }
.lum-btn--cream { background: var(--lum-cream); color: var(--lum-brown); }
.lum-btn--cream:hover { background: var(--lum-brown-deep); color: var(--lum-cream); }
.lum-btn--on-dark-outline { border-color: var(--lum-cream); color: var(--lum-cream); background: transparent; }
.lum-btn--on-dark-outline:hover { background: var(--lum-cream); color: var(--lum-brown); }

/* keyboard focus — the prototype only modelled hover */
.lum-btn:focus-visible,
.lum-link:focus-visible,
.lum-card:focus-visible {
  outline: 2px solid var(--lum-brown);
  outline-offset: 2px;
}
.lum-band--brown .lum-btn:focus-visible,
.lum-band--brown .lum-link:focus-visible,
.lum-band--brown .lum-card:focus-visible { outline-color: var(--lum-cream); }

/* ---------- cards: flat, borderless, lift on hover ---------------------- */
.lum-card { display: block; text-decoration: none; color: inherit; }
.lum-card__media {
  display: block;
  width: 100%;
  background: var(--lum-cream-ph);
  border-radius: 3px;
  overflow: hidden;
  transition: transform 0.35s ease;
}
.lum-card:hover .lum-card__media { transform: translateY(-6px); }
.lum-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lum-card__name {
  font-family: var(--lum-body);
  font-size: 15px;
  font-weight: 500;
  margin: 14px 0 6px;
  line-height: 1.3;
}
.lum-card:hover .lum-card__name { color: var(--lum-green-text); }
.lum-ratio-45 { aspect-ratio: 4 / 5; }
.lum-ratio-34 { aspect-ratio: 3 / 4; }
.lum-ratio-32 { aspect-ratio: 3 / 2; }

/* ---------- three-way split: hairline-separated colour fields ------------ */
.lum-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: var(--lum-hairline);
}
.lum-split__panel {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: none;
}
.lum-split__media { height: clamp(180px, 22vw, 260px); overflow: hidden; position: relative; }
.lum-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.lum-split__panel:hover .lum-split__media img { transform: scale(1.04); }
.lum-split__body { padding: 32px clamp(22px, 2.4vw, 34px) 40px; flex: 1; display: flex; flex-direction: column; }
.lum-split__body p {
  font-family: var(--lum-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  margin: 14px 0 20px;
  flex: 1;
}
.lum-split__cta { align-self: flex-start; }
.lum-split__panel--cream { background: var(--lum-cream); color: var(--lum-brown); }
.lum-split__panel--brown { background: var(--lum-brown); color: var(--lum-cream); }
.lum-split__panel--green { background: var(--lum-green); color: var(--lum-ink-on-green); }
.lum-split__panel--brown .lum-link,
.lum-split__panel--green .lum-link { border-bottom-color: currentColor; }

/* ---------- hours rows (visit band) ------------------------------------- */
.lum-hours { max-width: 40ch; margin: 0 0 30px; }
.lum-hours__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--lum-hairline);
  padding: 11px 0;
  font-family: var(--lum-body);
  font-size: 15px;
  font-weight: 300;
}
.lum-hours__row b { font-weight: 500; font-variant-numeric: tabular-nums; }
.lum-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--lum-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.lum-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lum-green); flex: 0 0 auto; }
.lum-status--closed .lum-status__dot { background: var(--lum-muted); }

/* ---------- generic grids ------------------------------------------------ */
.lum-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.lum-grid--journal { gap: 30px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.lum-grid--portraits { gap: 18px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lum-two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .lum-card__media,
  .lum-btn,
  .lum-split__media img { transition: none !important; }
  .lum-card:hover .lum-card__media,
  .lum-btn:hover { transform: none !important; }
}

/* footer CTA under a carousel band */
.lum-band__footcta { display: flex; justify-content: center; margin-top: 8px; }
/* carousel track sits flush with the band padding */
.lum-band [data-carousel] { margin-bottom: 32px; }

/* ---------- product card: flat, borderless, image lifts on hover -------- */
.lum-pcard {
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  color: inherit;
  text-decoration: none;
}
.lum-pcard > :first-child {
  border-radius: 3px;
  overflow: hidden;
  background: var(--lum-cream-ph);
  transition: transform 0.35s ease;
}
.lum-pcard:hover > :first-child { transform: translateY(-6px); }
.lum-pcard__badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 1; }
.lum-pcard__local { display: block; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 1px 3px rgba(46,38,33,0.18); }
.lum-pcard h3 { transition: color 0.25s ease; }
.lum-pcard:hover h3 { color: var(--lum-green-text); }
@media (prefers-reduced-motion: reduce) {
  .lum-pcard > :first-child, .lum-pcard:hover > :first-child { transition: none; transform: none; }
}

/* ---------- locations ---------------------------------------------------- */
.lum-locs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 4vw, 56px);
}
.lum-loc__map { aspect-ratio: 16 / 11; border-radius: 3px; overflow: hidden; background: var(--lum-cream-ph); margin-bottom: 26px; }
.lum-loc__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.75) sepia(0.12) contrast(1.05); }
.lum-loc__mapfallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--lum-muted); }
.lum-loc__name { margin: 0 0 12px; }
.lum-loc__addr {
  font-family: var(--lum-body); font-style: normal; font-weight: 300;
  font-size: 16px; line-height: 1.7; margin: 0 0 10px;
}
.lum-loc__tag { display: block; margin-bottom: 22px; }
.lum-loc__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lum-status--soon { color: var(--lum-green-text); }
.lum-status--soon .lum-status__dot { background: var(--lum-green); animation: lum-pulse 2.4s ease-in-out infinite; }
.lum-status--closed .lum-status__dot { background: var(--lum-muted); }
@keyframes lum-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .lum-status--soon .lum-status__dot { animation: none; } }
.lum-locpage__title { max-width: 16ch; margin-bottom: 24px; }
.lum-locpage__lede { margin: 0; }
.lum-locpage__map { margin-bottom: 0; }

/* ---------- market category landing pages -------------------------------- */
.lum-cathero {
  position: relative;
  min-height: min(56vh, 460px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--lum-cream-ph);
}
.lum-cathero__media { position: absolute; inset: 0; }
.lum-cathero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lum-cathero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(246,243,236,0.95) 0%, rgba(246,243,236,0.72) 38%,
    rgba(246,243,236,0.28) 68%, rgba(246,243,236,0.05) 100%);
}
.lum-cathero__inner {
  position: relative; z-index: 1; width: 100%;
  padding: clamp(28px,5vw,64px) var(--lum-pad-x) clamp(32px,5vw,60px);
}
.lum-cathero__eyebrow { color: var(--lum-green-deep); }
.lum-cathero__title { color: var(--lum-brown-black); max-width: 16ch; font-size: clamp(38px, 6.5vw, 84px); }
.lum-crumbs {
  display: flex; gap: 10px; align-items: center; margin-bottom: 20px;
  font-family: var(--lum-label); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lum-muted);
}
.lum-crumbs a { color: var(--lum-green-text); text-decoration: none; }
.lum-crumbs a:hover { text-decoration: underline; }
.lum-catintro { padding-block: clamp(44px, 6vw, 80px); }
.lum-catintro__text {
  font-family: var(--lum-display);
  font-size: clamp(22px, 2.9vw, 34px);
  line-height: 1.34;
  max-width: 30ch;
  margin: 0;
  color: var(--lum-brown-mid);
  text-wrap: pretty;
}
.lum-grid--products { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 26px 22px; }
.lum-catcta { max-width: 60ch; }
.lum-catcta__title { margin-bottom: 20px; max-width: 18ch; }
.lum-catcta__lede { color: var(--lum-cream-on-brown); margin: 0 0 30px; }
.lum-catcta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* department page: hero blurb + actions, intro/why split, sub-department tiles,
   gallery, store cards */
.lum-cathero__blurb { margin: 16px 0 0; color: var(--lum-brown-mid); max-width: 52ch; }
.lum-cathero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 26px; }
.lum-catintro__grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .lum-catintro__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.lum-why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.lum-why-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-top: 18px; border-top: 1px solid var(--lum-hairline); }
.lum-why-list__n { font-family: var(--lum-label); font-size: 11px; letter-spacing: 0.14em; color: var(--lum-green-text); padding-top: 5px; }
.lum-why-list__t { margin: 0 0 6px; font-family: var(--lum-display); font-weight: 400; font-size: 20px; line-height: 1.2; }
.lum-why-list__p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--lum-body-light); font-weight: 300; }
.lum-grid--subdepts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 26px 18px; }
.lum-subdept__media { background: var(--lum-cream-ph); }
.lum-subdept__pack { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #fff; padding: 14%; }
.lum-subdept__pack img { width: 100%; height: 100%; object-fit: contain; }
.lum-subdept__name { font-size: 15px; margin-bottom: 4px; }
.lum-catgallery { padding-block: 0 clamp(40px, 6vw, 72px); }
.lum-catgallery__grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .lum-catgallery__grid { grid-template-columns: repeat(3, 1fr); } }
.lum-catgallery__item { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 3px; background: var(--lum-cream-ph); }
.lum-catgallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lum-catstores__lede { color: var(--lum-cream-on-brown); }
.lum-catstores__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px; }
.lum-catstores__card { display: grid; grid-template-columns: 1fr; text-decoration: none; color: var(--lum-cream); background: var(--lum-brown-deep); border-radius: 4px; overflow: hidden; transition: transform 0.3s ease; }
.lum-catstores__card:hover { transform: translateY(-4px); }
.lum-catstores__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.lum-catstores__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lum-catstores__body { display: grid; gap: 6px; padding: 20px 22px 24px; }
.lum-catstores__addr { font-size: 15px; color: var(--lum-cream-on-brown); }
.lum-catstores__hours { font-size: 13.5px; color: var(--lum-meta-on-brown); }
.lum-catstores__go { margin-top: 8px; justify-self: start; border-bottom-color: var(--lum-green-light); }
.lum-catstores__express { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; font-size: 15px; color: var(--lum-cream-on-brown); }
.lum-catstores__express a { color: var(--lum-cream); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lum-green-light); }
.lum-catstores__ic { width: 18px; height: 18px; color: var(--lum-green-light); flex: 0 0 18px; }
.lum-pdp__posts--wide { max-width: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.lum-grid--depts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }

/* ---------- wellness market page ----------------------------------------- */
.lum-markethero { min-height: min(72vh, 620px); }
.lum-statement { text-align: left; }
.lum-statement__text {
  font-family: var(--lum-display);
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.18;
  max-width: 22ch;
  margin: 0 0 26px;
  color: var(--lum-brown-mid);
  text-wrap: balance;
}
.lum-statement__lede { margin: 0; }

.lum-depts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 34px 24px;
}
.lum-dept__eyebrow { display: block; margin-top: 14px; }
.lum-dept__name { margin: 6px 0 8px; font-size: 19px; font-family: var(--lum-display); font-weight: 400; line-height: 1.15; }
.lum-dept__blurb {
  display: block;
  font-family: var(--lum-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--lum-muted);
}
.lum-dept:hover .lum-dept__name { color: var(--lum-green-text); }

.lum-refill__lede { color: var(--lum-ink-on-green); opacity: 0.88; }
.lum-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  background: rgba(46, 42, 28, 0.18);
}
.lum-steps li {
  background: var(--lum-green);
  padding: 28px clamp(20px, 2vw, 28px) 32px;
  display: flex; flex-direction: column; gap: 8px;
}
.lum-steps__n {
  font-family: var(--lum-label); font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; color: var(--lum-ink-on-green); opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.lum-steps b { font-family: var(--lum-display); font-size: 24px; font-weight: 400; line-height: 1.1; }
.lum-steps span:last-child { font-family: var(--lum-body); font-size: 14px; font-weight: 300; line-height: 1.6; }

.lum-portrait--light .lum-card__media { background: var(--lum-cream-ph); }
.lum-portrait--light .lum-card__name { color: var(--lum-brown); }
.lum-portrait--light .lum-meta { display: block; }

/* Base team grid — defined globally so pages other than the homepage (which
   carried its own scoped copy) lay out correctly. */
.lum-team__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
/* wider variant for the market team, where the column is full-bleed not half */
.lum-team__grid.lum-team__grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 30px 22px;
}

/* card name/meta are spans, so force block flow or they run together inline */
.lum-card__name { display: block; }
.lum-card .lum-meta { display: block; }
.lum-cathero .lum-crumbs { margin-bottom: 24px; }

/* ---------- category rail: one auto-cycling row -------------------------- */
.lum-catrail { position: relative; }
.lum-catrail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 22px) / 5);
  gap: 22px;
  overflow-x: auto;
  /* snap is enabled only when the marquee is not running; JS turns it off */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.lum-catrail__track::-webkit-scrollbar { display: none; }
.lum-catrail__item { scroll-snap-align: start; }
@media (max-width: 1100px) { .lum-catrail__track { grid-auto-columns: calc((100% - 3 * 22px) / 4); } }
@media (max-width: 860px)  { .lum-catrail__track { grid-auto-columns: calc((100% - 2 * 18px) / 3); gap: 18px; } }
@media (max-width: 640px)  { .lum-catrail__track { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; } }
@media (max-width: 420px)  { .lum-catrail__track { grid-auto-columns: 72%; } }

.lum-catrail__btn {
  position: absolute;
  top: calc((100% - 46px) / 2);
  transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--lum-cream);
  color: var(--lum-brown);
  border: 1px solid var(--lum-hairline);
  box-shadow: 0 4px 18px rgba(89, 74, 65, 0.12);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
  z-index: 2;
}
.lum-catrail__btn svg { width: 18px; height: 18px; }
.lum-catrail__btn:hover { background: var(--lum-brown); color: var(--lum-cream); }
.lum-catrail__btn:focus-visible { outline: 2px solid var(--lum-brown); outline-offset: 2px; }
.lum-catrail__btn--prev { left: -14px; }
.lum-catrail__btn--next { right: -14px; }
@media (max-width: 860px) {
  .lum-catrail__btn--prev { left: -6px; }
  .lum-catrail__btn--next { right: -6px; }
}

/* product rails: same marquee, cards carry more text so the arrows centre on
   the image band rather than the whole card */
.lum-catrail--products .lum-catrail__btn { top: 28%; }
@media (max-width: 640px) { .lum-catrail--products .lum-catrail__track { grid-auto-columns: calc((100% - 16px) / 2); } }

/* ==========================================================================
   Header & footer — the furniture that frames every page.
   Restyled via hooks on the existing markup so the mega-menus, predictive
   search and cart drawer keep their wiring.
   ========================================================================== */

/* ---- announcement bar ---- */
.lum-annc {
  background: var(--lum-brown-deep) !important;
  color: var(--lum-meta-on-brown) !important;
}
.lum-annc a,
.lum-annc .text-sm { color: var(--lum-meta-on-brown); }
.lum-annc .text-sm.font-medium {
  font-family: var(--lum-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lum-annc a:hover { color: var(--lum-cream); }
.lum-annc .rounded-full { background: rgba(246, 243, 236, 0.1); }
.lum-annc .rounded-full:hover { background: rgba(246, 243, 236, 0.2); }

/* ---- main bar ---- */
.lum-header__bar {
  background: var(--lum-cream) !important;
  border-bottom: 1px solid var(--lum-hairline) !important;
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}
.lum-header { background: transparent !important; box-shadow: none !important; }
/* condensed state once the page is scrolled */
.lum-header[data-scrolled="true"] .lum-header__bar {
  box-shadow: 0 6px 24px rgba(89, 74, 65, 0.07);
  background: rgba(246, 243, 236, 0.94) !important;
  backdrop-filter: blur(10px);
}
.lum-header[data-scrolled="true"] .lum-header__bar .lg\:h-24 { height: 74px; }
.lum-header[data-scrolled="true"] .lum-header__bar img[alt*="Luminate"] { height: 60px; }
.lum-header__bar img[alt*="Luminate"] { transition: height 0.3s ease; }

/* ---- nav links: the label voice ---- */
.lum-nav > li > a {
  font-family: var(--lum-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lum-brown) !important;
  padding: 6px 2px !important;
  margin: 0 12px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.lum-nav > li > a:hover,
.lum-nav > li:hover > a {
  color: var(--lum-green-text) !important;
  border-bottom-color: var(--lum-green);
}
.lum-nav svg { width: 11px; height: 11px; }

/* ---- footer ---- */
.lum-footer { background: var(--lum-brown-deep) !important; color: var(--lum-meta-on-brown); }
.lum-footer .text-secondary-foreground,
.lum-footer .text-secondary-foreground\/80 { color: var(--lum-meta-on-brown) !important; }
.lum-footer__h {
  font-family: var(--lum-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lum-green-light) !important;
  margin-bottom: 18px;
}
.lum-footer a { transition: color 0.25s ease; }
.lum-footer a:hover { color: var(--lum-cream) !important; }
.lum-footer .text-primary { color: var(--lum-green) !important; }
/* newsletter input + button pick up the pill language */
.lum-footer input[type="email"] {
  border-radius: 999px !important;
  background: rgba(246, 243, 236, 0.08) !important;
  border: 1px solid rgba(246, 243, 236, 0.22) !important;
  color: var(--lum-cream) !important;
  padding: 13px 20px !important;
}
.lum-footer input[type="email"]::placeholder { color: rgba(227, 217, 207, 0.55); }
.lum-footer button[type="submit"] {
  border-radius: 999px !important;
  background: var(--lum-green) !important;
  color: var(--lum-ink-on-green) !important;
  font-family: var(--lum-body);
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 24px !important;
}
.lum-footer button[type="submit"]:hover { background: var(--lum-cream) !important; color: var(--lum-brown) !important; }

/* ---------- collection pages --------------------------------------------- */
.lum-colhero { background: var(--lum-cream-alt); border-bottom: 1px solid var(--lum-hairline); }
.lum-colhero__inner { padding: clamp(34px, 4.5vw, 64px) var(--lum-pad-x); }
.lum-colhero__title { margin-bottom: 14px; font-size: clamp(30px, 4.2vw, 54px); }
.lum-colhero__lede { margin: 0 0 12px; }
.lum-colhero__where {
  margin: 0 0 12px;
  font-family: var(--lum-label); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lum-green-text);
}
.lum-colinfo__title { margin-bottom: 18px; }

/* ---------- product pages ------------------------------------------------
   Two columns on desktop (gallery 55 / buy panel 45), a buy-first stack on
   phones. Details are native <details> so nothing hides from search or a
   thumb. Every block renders only when its field has a value.            */
.lum-pdp { padding-top: 18px; padding-bottom: clamp(48px, 7vw, 96px); background: var(--lum-cream); color: var(--lum-brown); }
.lum-pdp__wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--lum-pad-x); }
.lum-pdp__crumbs { margin-bottom: 22px; flex-wrap: wrap; row-gap: 4px; }
.lum-pdp__grid { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
@media (min-width: 1024px) {
  .lum-pdp__grid { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: clamp(36px, 4.5vw, 72px); }
  .lum-pdp__gallery { position: sticky; top: 104px; }
}

/* gallery */
.lum-pdp__gallery { min-width: 0; }
.lum-pdp__stage {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--lum-hairline); border-radius: 4px;
  aspect-ratio: 1 / 1;
}
.lum-pdp__track { height: 100%; }
.lum-pdp__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.lum-pdp__badges img { display: block; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 1px 4px rgba(46,38,33,0.2); }
.lum-pdp__badges img.is-canada { background: #fff; }
@media (max-width: 640px) { .lum-pdp__badges img { width: 38px; height: 38px; } }
.lum-pdp__slide { margin: 0; height: 100%; display: none; align-items: center; justify-content: center; padding: 6%; }
.lum-pdp__slide.is-active { display: flex; }
.lum-pdp__slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lum-pdp__noimg { height: 100%; display: grid; place-items: center; align-content: center; gap: 10px; background: var(--lum-cream-ph); color: var(--lum-muted); }
.lum-pdp__noimg-icon { width: 34px; height: 34px; color: var(--lum-green); }
.lum-pdp__dots { display: none; }
.lum-pdp__thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.lum-pdp__thumbs::-webkit-scrollbar { display: none; }
.lum-pdp__thumb {
  flex: 0 0 64px; width: 64px; height: 64px; padding: 4px;
  background: #fff; border: 1px solid var(--lum-hairline); border-radius: 3px; cursor: pointer;
  transition: border-color 0.2s ease;
}
.lum-pdp__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lum-pdp__thumb.is-active, .lum-pdp__thumb:hover { border-color: var(--lum-brown); }
@media (min-width: 1024px) {
  .lum-pdp__gallery.has-thumbs { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .lum-pdp__gallery.has-thumbs .lum-pdp__thumbs { order: -1; flex-direction: column; margin: 0; max-height: 560px; overflow-y: auto; }
}
@media (max-width: 1023px) {
  .lum-pdp__stage { aspect-ratio: 4 / 3; }
  .lum-pdp__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lum-pdp__track::-webkit-scrollbar { display: none; }
  .lum-pdp__slide { display: flex; flex: 0 0 100%; scroll-snap-align: start; }
  .lum-pdp__thumbs { display: none; }
  .lum-pdp__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
  .lum-pdp__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--lum-hairline); transition: background-color 0.2s ease; }
  .lum-pdp__dots span.is-active { background: var(--lum-brown); }
}

/* buy panel */
.lum-pdp__buy { min-width: 0; display: flex; flex-direction: column; }
.lum-pdp__brand { margin-bottom: 10px; text-decoration: none; align-self: flex-start; }
.lum-pdp__brand:hover { text-decoration: underline; text-underline-offset: 3px; }
.lum-pdp__title {
  font-family: var(--lum-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.06;
  margin: 0 0 8px;
  text-wrap: balance;
  color: var(--lum-brown);
}
.lum-pdp__format { margin: 0 0 12px; font-size: 14px; color: var(--lum-muted); }
.lum-pdp__rating { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13.5px; color: var(--lum-muted); text-decoration: none; align-self: flex-start; }
.lum-pdp__rating:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.lum-stars { display: inline-flex; gap: 1px; font-size: 15px; line-height: 1; color: var(--lum-hairline); }
.lum-stars .is-on { color: var(--lum-green-shade); }
.lum-pdp__chips { list-style: none; margin: 4px 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lum-pdp__chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--lum-green); color: var(--lum-green-text);
  font-family: var(--lum-label); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
}
.lum-pdp__chip img { width: 22px; height: 22px; border-radius: 50%; margin: -4px 0 -4px -5px; display: block; }
.lum-pdp__chip--local { background: var(--lum-green); color: var(--lum-ink-on-green); border-color: var(--lum-green); }
.lum-pdp__chip--canada { background: #fff; color: #b3241a; border-color: #d52b1e; }
.lum-pdp__chip--canada img { border-radius: 0; }
.lum-pcard__local--canada { background: #fff; }
.lum-shipnote { padding: 12px 14px; background: #fbf3e3; border-left: 3px solid #d9a441; font-size: 14.5px; }
.lum-pdp__pricerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 12px; margin: 6px 0 14px; }
.lum-pdp__price { font-family: var(--lum-body); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; color: var(--lum-brown); }
.lum-pdp__was { font-size: 16px; color: var(--lum-muted); }
.lum-pdp__sale { font-family: var(--lum-label); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--lum-green); color: var(--lum-ink-on-green); }
.lum-pdp__unit { font-size: 13px; color: var(--lum-muted); }

.lum-avail__status {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-family: var(--lum-label); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lum-green-text);
}
.lum-avail__status.is-out { color: var(--lum-muted); }
.lum-avail__status.is-out .lum-status__dot { background: var(--lum-muted); }
.lum-avail { margin: 0 0 20px; padding: 14px 18px; background: var(--lum-cream-alt); border-radius: 4px; }
.lum-avail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--lum-body-light); }
.lum-avail__list li { display: flex; gap: 10px; align-items: flex-start; }
.lum-avail__ic { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; color: var(--lum-green-text); }
.lum-avail__list a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lum-green); }
.lum-avail__open { color: var(--lum-green-text); }

.lum-pdp__options { display: grid; gap: 12px; margin: 0 0 16px; max-width: 360px; }
.lum-pdp__option { display: grid; gap: 6px; }
.lum-select {
  height: 46px; padding: 0 40px 0 14px; font-family: var(--lum-body); font-size: 15px; color: var(--lum-brown);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23594a41' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--lum-hairline); border-radius: 4px; appearance: none; -webkit-appearance: none;
}
.lum-pdp__cta { display: flex; gap: 12px; align-items: stretch; }
.lum-qty { display: inline-flex; align-items: center; height: 52px; border: 1.5px solid var(--lum-brown); border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
.lum-qty button { width: 44px; height: 100%; background: transparent; border: 0; font-size: 18px; color: var(--lum-brown); cursor: pointer; }
.lum-qty button:hover { background: var(--lum-cream-alt); }
.lum-qty input, .lum-qty span { width: 40px; text-align: center; border: 0; background: transparent; font-family: var(--lum-body); font-size: 15px; font-weight: 500; color: var(--lum-brown); -moz-appearance: textfield; }
.lum-qty input::-webkit-outer-spin-button, .lum-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lum-qty input:focus { outline: none; }
.lum-qty--sm { height: 40px; }
.lum-qty--sm button { width: 34px; }
.lum-qty--sm span { width: 28px; font-size: 14px; }
.lum-pdp__add { flex: 1 1 auto; max-width: 340px; min-height: 52px; padding-block: 0; }
.lum-pdp__add:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.lum-pdp__add-ic { width: 16px; height: 16px; }
.lum-pdp__paybtn { margin-top: 10px; max-width: 396px; }
.lum-pdp__paybtn .shopify-payment-button__button--unbranded {
  border-radius: 999px; min-height: 48px; background: var(--lum-green); color: var(--lum-ink-on-green);
  font-family: var(--lum-body); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.lum-pdp__paybtn .shopify-payment-button__button--unbranded:hover { background: var(--lum-green-shade); }
.lum-pdp__paybtn .shopify-payment-button__more-options { font-size: 12px; color: var(--lum-muted); }
.lum-pdp__gate { margin: 10px 0 20px; }
.lum-pdp__gate p { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; }

.lum-trust { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--lum-hairline); display: grid; gap: 9px; font-size: 13.5px; color: var(--lum-muted); }
.lum-trust li { display: flex; gap: 10px; align-items: center; }
.lum-trust__ic { flex: 0 0 15px; width: 15px; height: 15px; color: var(--lum-green-text); }
.lum-trust a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lum-hairline); }
.lum-trust a:hover { color: var(--lum-green-text); }

.lum-why { margin: 26px 0 0; padding: 20px 22px 22px; border-left: 3px solid var(--lum-green); background: #fff; }
.lum-why .lum-eyebrow { margin-bottom: 10px; }
.lum-why__text { margin: 0; font-family: var(--lum-display); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--lum-brown-mid); text-wrap: pretty; }

/* phones: status → buy → where to get it, so the button sits in the first screen */
@media (max-width: 1023px) {
  .lum-avail__status { order: 1; }
  .lum-pdp__form { order: 2; }
  .lum-avail { order: 3; margin-top: 18px; }
  .lum-trust { order: 4; }
  .lum-why { order: 5; }
  .lum-pdp__gate { order: 2; }
}
@media (max-width: 480px) {
  .lum-pdp__cta { flex-wrap: wrap; }
  .lum-pdp__add { max-width: none; flex-basis: 100%; }
  .lum-qty { height: 48px; }
}

/* details accordion */
.lum-pdp__details { margin-top: clamp(40px, 6vw, 72px); }
.lum-acc__list { max-width: 820px; border-top: 1px solid var(--lum-hairline); }
.lum-acc { border-bottom: 1px solid var(--lum-hairline); }
.lum-acc__q {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 2px; font-family: var(--lum-display); font-size: clamp(19px, 1.8vw, 22px); color: var(--lum-brown);
}
.lum-acc__q::-webkit-details-marker { display: none; }
.lum-acc__body { padding: 0 2px 24px; font-size: 15.5px; line-height: 1.65; color: var(--lum-body-light); max-width: 66ch; }
.lum-acc__body p { margin: 0 0 12px; }
.lum-acc__body p:last-child { margin-bottom: 0; }
.lum-acc__body ul, .lum-acc__body ol { margin: 0 0 12px; padding-left: 22px; list-style: disc; }
.lum-acc__body ol { list-style: decimal; }
.lum-acc__body li { margin: 0 0 4px; }
.lum-acc__body a { color: var(--lum-green-text); }
.lum-acc__body [style] { color: inherit !important; font-family: inherit !important; font-size: inherit !important; background: transparent !important; }
.lum-acc__body h1, .lum-acc__body h2, .lum-acc__body h3, .lum-acc__body h4 { font-family: var(--lum-body); font-size: 15.5px; font-weight: 600; margin: 14px 0 6px; }
.lum-acc__body img { max-width: 100%; height: auto; }
.lum-acc__body--table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lum-acc__body--table td, .lum-acc__body--table th { padding: 6px 8px; border-bottom: 1px solid var(--lum-hairline); text-align: left; vertical-align: top; }
.lum-allergens { margin-top: 14px !important; padding: 12px 14px; background: #fbf3e3; border-left: 3px solid #d9a441; font-size: 14.5px; }
.lum-specs { margin: 0; }
.lum-specs > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--lum-hairline); }
.lum-specs > div:last-child { border-bottom: 0; }
.lum-specs dt { font-family: var(--lum-label); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lum-muted); padding-top: 3px; }
.lum-specs dd { margin: 0; font-size: 15px; }
.lum-specs dd a { color: var(--lum-brown); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lum-green); }
.lum-specs__hint { font-size: 12.5px; color: var(--lum-muted); }
.lum-specs__links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.lum-warnings { margin: 16px 0 0; font-size: 13.5px; color: var(--lum-muted); }
.lum-pdp__stores { margin-top: 14px; display: grid; gap: 10px; }
.lum-pdp__store { font-size: 14.5px; }
.lum-pdp__store a { color: var(--lum-brown); }
@media (max-width: 480px) { .lum-specs > div { grid-template-columns: 1fr; gap: 2px; } }

/* bands below: pairs with, you may also like, reviews, journal */
.lum-pdp__band { margin-top: clamp(44px, 6vw, 80px); }
.lum-pdp__headrow { margin-bottom: 26px; }
.lum-pdp__h2 { font-size: clamp(28px, 3.4vw, 42px); }
.lum-rail-wrap { position: relative; }
.lum-rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0 8px; }
.lum-rail::-webkit-scrollbar { display: none; }
.lum-rail__item { flex: 0 0 calc((100% - 72px) / 5); min-width: 0; scroll-snap-align: start; }
@media (max-width: 1023px) { .lum-rail__item { flex-basis: calc((100% - 36px) / 3); } }
@media (max-width: 640px) {
  .lum-rail { gap: 12px; }
  .lum-rail__item { flex-basis: 44%; }
  .lum-rail-wrap [data-carousel-prev], .lum-rail-wrap [data-carousel-next] { display: none; }
}
.lum-pdp__reviews .jdgm-rev-widg { padding: 0; border: 0; }
.lum-pdp__reviews .jdgm-rev-widg__title { display: none; }
@media (max-width: 1023px) {
  .lum-pdp__crumbs { margin-bottom: 12px; }
  .lum-pdp__grid { gap: 18px; }
}
.lum-acc--review .lum-acc__body { max-width: none; }
.lum-pdp__posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; max-width: 760px; }
.lum-pdp__post-title { font-family: var(--lum-display); font-size: 20px; font-weight: 400; margin: 14px 0 8px; }

/* sticky add-to-cart bar */
.lum-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--lum-cream); border-top: 1px solid var(--lum-hairline);
  box-shadow: 0 -8px 32px rgba(46, 38, 33, 0.10);
  transform: translateY(100%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease;
}
.lum-sticky.is-shown { transform: none; opacity: 1; }
.lum-sticky__inner { max-width: 1320px; margin: 0 auto; padding: 10px var(--lum-pad-x); display: flex; align-items: center; gap: 12px; }
.lum-sticky__thumb { width: 46px; height: 46px; flex: 0 0 46px; border: 1px solid var(--lum-hairline); border-radius: 3px; background: #fff; overflow: hidden; }
.lum-sticky__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lum-sticky__text { flex: 1 1 auto; min-width: 0; }
.lum-sticky__title { margin: 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lum-sticky__meta { margin: 0; font-size: 12px; color: var(--lum-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lum-sticky__meta:empty { display: none; }
.lum-sticky__price { font-size: 16px; font-weight: 600; flex: 0 0 auto; }
.lum-sticky__add { min-height: 44px; padding: 0 22px; flex: 0 0 auto; }
.lum-sticky__add:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 640px) {
  .lum-sticky__qty, .lum-sticky__thumb { display: none; }
  .lum-sticky__inner { padding: 10px 16px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .lum-sticky { transition: none; } }

/* ==========================================================================
   Legacy page uplift.
   The imported pages (clinic, 11 services, about, studio, express, blog,
   careers, brands…) carry frozen Tailwind markup. Rather than 19 bespoke
   rewrites, this brings them onto the type system: the brand serif at its
   intended 400 weight and the new scale, the label voice for badge pills,
   and the refreshed button language. Anything already carrying a `lum-`
   class is left alone.
   ========================================================================== */

/* the display face is drawn for 400; font-bold makes it look like a fax */
h1:not([class*="lum-"]),
h2:not([class*="lum-"]),
h3:not([class*="lum-"]) {
  font-weight: 400 !important;
  letter-spacing: -0.004em;
  text-wrap: balance;
}

/* scale legacy headings up to the refreshed rhythm */
h1:not([class*="lum-"])[class*="text-4xl"],
h1:not([class*="lum-"])[class*="text-5xl"],
h1:not([class*="lum-"])[class*="text-6xl"] {
  font-size: clamp(38px, 5.8vw, 76px) !important;
  line-height: 0.99 !important;
}
h2:not([class*="lum-"])[class*="text-3xl"],
h2:not([class*="lum-"])[class*="text-4xl"],
h2:not([class*="lum-"])[class*="text-5xl"] {
  font-size: clamp(29px, 4vw, 50px) !important;
  line-height: 1.03 !important;
}
h3:not([class*="lum-"])[class*="text-xl"],
h3:not([class*="lum-"])[class*="text-2xl"] {
  font-size: clamp(20px, 2.1vw, 26px) !important;
  line-height: 1.14 !important;
}

/* badge pills become the tracked label voice */
.lum-promos .rounded-full { /* promo badges keep their pill — see below */ }
.rounded-full.bg-primary\/10:not(.lum-promos *),
.rounded-full.bg-primary\/20:not(.lum-promos *),
.rounded-full.bg-secondary:not(.lum-promos *) {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: var(--lum-label) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}
.rounded-full.bg-primary\/10:not(.lum-promos *) svg,
.rounded-full.bg-primary\/20:not(.lum-promos *) svg,
.rounded-full.bg-secondary:not(.lum-promos *) svg { display: none !important; }
.rounded-full.bg-primary\/10:not(.lum-promos *) { color: var(--lum-green-text) !important; }
.rounded-full.bg-primary\/20:not(.lum-promos *) { color: var(--lum-green-light) !important; }

/* legacy CTAs take the pill language */
a > span.inline-flex.rounded-md,
a > span.inline-flex[class*="rounded-md"],
button.inline-flex[class*="rounded-md"][class*="bg-primary"],
button.inline-flex[class*="rounded-md"][class*="border-input"] {
  border-radius: 999px !important;
  font-family: var(--lum-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

/* soften the big rounded cards the imported pages lean on */
[class*="rounded-2xl"]:not([class*="lum-"]),
[class*="rounded-xl"]:not([class*="lum-"]) { border-radius: 4px !important; }

/* page grounds inherit the cream family rather than pure white */
.bg-background { background-color: var(--lum-cream) !important; }
.bg-muted\/30, .bg-muted\/50 { background-color: var(--lum-cream-alt) !important; }

/* ---------- clinic page -------------------------------------------------- */
.lum-clinhero { min-height: min(74vh, 640px); }
.lum-clinhero__sub {
  font-family: var(--lum-display);
  font-size: clamp(19px, 2.2vw, 28px);
  line-height: 1.2;
  color: var(--lum-brown);
  margin: -12px 0 22px;
  max-width: 24ch;
}
.lum-clin__lede { color: var(--lum-cream-on-brown); }
.lum-clincta__lede { color: var(--lum-ink-on-green); opacity: 0.85; }
.lum-grid--team { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 30px 22px; }

/* clinic space gallery — a loose editorial mosaic, not a uniform grid */
.lum-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
  grid-auto-flow: dense;
}
.lum-gallery__item { margin: 0; border-radius: 3px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--lum-cream-ph); }
.lum-gallery__item--wide { grid-column: span 2; aspect-ratio: 8 / 3; }
@media (max-width: 640px) { .lum-gallery__item--wide { grid-column: span 1; aspect-ratio: 4 / 3; } }
.lum-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.lum-gallery__item:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .lum-gallery__item img, .lum-gallery__item:hover img { transition: none; transform: none; } }

/* ---------- service pages: badge pills -> the label voice ---------------- */
/* Targets the eyebrow badges only: inline-flex pills carrying gap-2 and
   padding. Deliberately excludes the numbered step circles (w-7/w-8) and the
   cart count, which are also rounded-full but are not labels. */
.inline-flex.rounded-full.bg-primary.gap-2:not([class*="w-7"]):not([class*="w-8"]),
.inline-flex.rounded-full.gap-2[class*="bg-primary\/90"],
.inline-flex.rounded-full.gap-2[class*="bg-white\/20"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: var(--lum-label) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  backdrop-filter: none !important;
  color: var(--lum-green-text) !important;
}
.inline-flex.rounded-full.bg-primary.gap-2:not([class*="w-7"]):not([class*="w-8"]) svg,
.inline-flex.rounded-full.gap-2[class*="bg-primary\/90"] svg,
.inline-flex.rounded-full.gap-2[class*="bg-white\/20"] svg { display: none !important; }
/* on dark grounds the label flips to the light green */
.bg-secondary .inline-flex.rounded-full.bg-primary.gap-2,
[class*="bg-gradient-earth"] .inline-flex.rounded-full.bg-primary.gap-2,
.inline-flex.rounded-full.gap-2[class*="bg-white\/20"] { color: var(--lum-green-light) !important; }

/* flatten the bordered content cards these pages lean on */
.border.rounded-lg.bg-card,
.rounded-lg.border.bg-card {
  border-color: var(--lum-hairline) !important;
  box-shadow: none !important;
  background: var(--lum-cream) !important;
}


/* ==========================================================================
   Shared page furniture — hero, portraits, clinic band.
   These were previously scoped inside the homepage sections' <style> blocks,
   which meant the market and clinic pages used the class names with none of
   the rules (the hero lost its padding entirely). They belong here.
   ========================================================================== */

  .lum-hero {
    position: relative;
    min-height: min(88vh, 820px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--lum-cream);
  }
  .lum-hero__media { position: absolute; inset: 0; }
  .lum-hero__media img,
  .lum-hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* The storefront photo carries its meaning in the sign, which sits just
     above centre; a centred crop on a wide hero would lose it to the sky. */
  .template-index .lum-hero__media img,
  .lum-storehero .lum-hero__media img { object-position: center 38%; }
  /* keeps the headline legible over photography — verify against any new footage */
  .lum-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
      rgba(246, 243, 236, 0.96) 0%,
      rgba(246, 243, 236, 0.82) 34%,
      rgba(246, 243, 236, 0.42) 62%,
      rgba(246, 243, 236, 0.12) 100%);
  }
  /* Homepage: the produce-wall photo is portrait, so a full-width band of it
     is a magnified sliver. From tablet up the photo takes the right half at
     full height (much more of it shows, at a natural scale) and the headline
     sits on a cream panel with a feathered edge — no wash over the produce. */
  @media (min-width: 900px) {
    .template-index .lum-hero { align-items: center; min-height: min(80vh, 760px); }
    .template-index .lum-hero__media { left: 46%; }
    .template-index .lum-hero__media img { object-position: center 45%; }
    /* the scrim lives inside the media box, so left:0 is the photo's left edge */
    .template-index .lum-hero__scrim {
      left: 0;
      background: linear-gradient(to right,
        rgba(246, 243, 236, 1) 0%,
        rgba(246, 243, 236, 0.8) 7%,
        rgba(246, 243, 236, 0.3) 16%,
        rgba(246, 243, 236, 0) 26%);
    }
    .template-index .lum-hero__inner { max-width: none; width: 46%; padding-right: 40px; }
    .template-index .lum-hero__title { font-size: clamp(44px, 4.2vw, 76px); line-height: 1.02; max-width: none; }
    .template-index .lum-hero__lede { max-width: 40ch; }
  }
  @media (max-width: 899px) {
    /* lighter wash on phones so the colour of the produce comes through */
    .template-index .lum-hero__scrim {
      background: linear-gradient(to top,
        rgba(246, 243, 236, 0.94) 0%,
        rgba(246, 243, 236, 0.72) 36%,
        rgba(246, 243, 236, 0.25) 66%,
        rgba(246, 243, 236, 0.04) 100%);
    }
  }
  .lum-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    padding: clamp(36px, 6vw, 88px) var(--lum-pad-x) clamp(44px, 6vw, 84px);
  }
  .lum-hero__eyebrow { color: var(--lum-green-deep); margin-bottom: 26px; }
  .lum-hero__title { color: var(--lum-brown-black); margin-bottom: 26px; max-width: 15ch; }
  .lum-hero__lede { color: var(--lum-body-light); margin: 0 0 34px; max-width: 46ch; }
  .lum-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
  @media (max-width: 640px) {
    .lum-hero { min-height: 78vh; }
    .lum-hero__title { max-width: none; }
    /* Keeps a hero's buttons clear of the fixed chat bubble, which sits at
       roughly y 746–796 on an 844px screen. The homepage hero has no buttons
       — the three pathway cards below it carry those — but the market and
       clinic heroes do. */
    .lum-hero__inner { padding-bottom: 96px; }
  }

/* portraits + clinic band */
.lum-clinic__title { margin-bottom: 22px; }
.lum-clinic__lede { color: var(--lum-cream-on-brown); margin: 0 0 32px; max-width: 46ch; }
.lum-clinic__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.lum-portrait__media { background: var(--lum-brown-mid); }
.lum-portrait__name { color: var(--lum-cream); }
.lum-portrait:hover .lum-portrait__name { color: var(--lum-green-light); }
.lum-portrait__role { color: var(--lum-meta-on-brown); display: block; }
.lum-services {
    list-style: none;
    margin: clamp(40px, 5vw, 64px) 0 0;
    padding: clamp(28px, 3vw, 36px) 0 0;
    border-top: 1px solid rgba(246, 243, 236, 0.18);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    font-family: var(--lum-label);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lum-green-light);
  }

/* ---------- market page tuning ------------------------------------------- */
/* a deeper hero so the photograph reads as an environment, not a letterbox */
.lum-markethero { min-height: min(84vh, 760px); }
.lum-markethero .lum-hero__scrim {
  background: linear-gradient(to top,
    rgba(246,243,236,0.97) 0%, rgba(246,243,236,0.90) 26%,
    rgba(246,243,236,0.52) 52%, rgba(246,243,236,0.10) 100%);
}
.lum-markethero .lum-hero__lede { font-size: clamp(17px, 1.6vw, 21px); max-width: 44ch; }

/* refillery steps: numerals carry the sequence, copy gets room */
.lum-steps li { padding: 34px clamp(22px, 2.2vw, 32px) 38px; gap: 10px; }
.lum-steps__n {
  font-size: 13px;
  letter-spacing: 0.2em;
  opacity: 0.55;
  margin-bottom: 6px;
}
.lum-steps b { font-size: clamp(26px, 2.6vw, 32px); }
.lum-steps span:last-child { font-size: 15px; max-width: 26ch; }
.lum-refill__cta { margin-top: clamp(34px, 4vw, 52px); }

/* ==========================================================================
   Commerce pages run a tighter rhythm than editorial ones. On a shop landing
   the merchandise should be reachable almost immediately, so the hero is
   shorter and the bands sit closer together — the generous editorial spacing
   is right for the homepage and the market story, not for a place people came
   to buy something.
   ========================================================================== */
.page-shop .lum-shophero { min-height: min(56vh, 480px); }
.page-shop .lum-shophero__inner { padding-top: clamp(26px, 3.4vw, 44px); padding-bottom: clamp(24px, 2.8vw, 36px); }
.page-shop .lum-shophero__title { font-size: clamp(34px, 4.8vw, 62px); margin-bottom: 14px; max-width: 19ch; }
.page-shop .lum-shophero__lede { margin-bottom: 20px; font-size: clamp(15px, 1.4vw, 18px); }
.page-shop .lum-shopstats {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: clamp(14px, 1.8vw, 20px);
  gap: 10px clamp(22px, 3vw, 40px);
}
.page-shop .lum-shopstats__n { font-size: clamp(21px, 2vw, 27px); }

/* tighter bands + header rows throughout the shop page */
.page-shop .lum-band { padding-block: clamp(34px, 4.2vw, 62px); }
.page-shop .lum-headrow { margin-bottom: clamp(20px, 2.4vw, 30px); }
.page-shop .lum-headrow .lum-lede { margin-top: 10px; font-size: clamp(15px, 1.4vw, 17px); }
.page-shop .lum-h2 { font-size: clamp(28px, 3.4vw, 44px); }
.page-shop .lum-band__footcta { margin-top: 4px; }
.page-shop .lum-goals { gap: 22px 20px; }
.page-shop .lum-goal__name { margin: 12px 0 4px; font-size: clamp(18px, 1.7vw, 22px); }

/* the same tightening for collection pages, which are also shopping surfaces */
.template-collection .lum-band { padding-block: clamp(32px, 4vw, 56px); }
.template-collection .lum-headrow { margin-bottom: clamp(18px, 2.2vw, 28px); }

/* The shop hero is short enough that its content fills the frame, so a
   bottom-weighted scrim leaves the eyebrow sitting on bare photo. Wash from
   the left instead: readable ground under the text, product still visible on
   the right where the photography actually is. */
.page-shop .lum-shophero__scrim {
  background:
    linear-gradient(to right,
      rgba(246,243,236,0.96) 0%, rgba(246,243,236,0.90) 40%,
      rgba(246,243,236,0.45) 68%, rgba(246,243,236,0.10) 100%),
    linear-gradient(to top,
      rgba(246,243,236,0.55) 0%, rgba(246,243,236,0.10) 60%, rgba(246,243,236,0) 100%);
}
/* trim the hero block so the category rail reaches the fold sooner */
.page-shop .lum-shophero__lede { max-width: 40ch; }
.page-shop .lum-shophero__cta { gap: 10px; }
.page-shop .lum-shopstats { margin-top: 20px; padding-top: 14px; }

/* Six goals in an auto-fit grid land 4+2, leaving half a row empty. Pin to
   three columns so they fill two even rows. */
.page-shop .lum-goals { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .page-shop .lum-goals { grid-template-columns: repeat(2, 1fr); } }
/* stay two-up on phones: six full-width goal photos is a very long scroll,
   and these are picked at a glance rather than studied */
@media (max-width: 560px) {
  .page-shop .lum-goals { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .page-shop .lum-goal__name { font-size: 16px; line-height: 1.18; margin: 10px 0 2px; }
  .page-shop .lum-goal .lum-card__media { aspect-ratio: 1 / 1; }
}

/* the closing band was leaving its right half empty — two columns, with
   explicit areas so the heading cannot drift below the buttons */
.page-shop .lum-catcta {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    "eyebrow eyebrow"
    "title   lede"
    "actions lede";
  column-gap: clamp(28px, 5vw, 72px);
  row-gap: clamp(18px, 2vw, 26px);
  align-items: start;
}
.page-shop .lum-catcta > .lum-eyebrow { grid-area: eyebrow; }
.page-shop .lum-catcta__title { grid-area: title; margin-bottom: 0; max-width: 16ch; }
.page-shop .lum-catcta__lede { grid-area: lede; margin: 0; align-self: center; }
.page-shop .lum-catcta__actions { grid-area: actions; }
@media (max-width: 820px) {
  .page-shop .lum-catcta {
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "title" "lede" "actions";
  }
  .page-shop .lum-catcta__title { max-width: none; }
}
}

/* promo cards go two-up on phones rather than one long stack */
@media (max-width: 640px) {
  .page-shop .lum-promo-card, .page-shop [class*="promo"] .rounded-lg { min-height: 0; }
  .page-shop .grid.grid-cols-2 > * { min-width: 0; }
}

/* Two-up promo cards on phones leave ~190px per card, which truncated the
   longer button labels ("SHOP CANPREV MAGNE…"). Let them wrap and shrink
   rather than clip — the label is the whole point of the button. */
@media (max-width: 640px) {
  .lum-promos a > span {
    font-size: 9.5px !important;
    letter-spacing: 0.05em !important;
    padding: 9px 8px !important;
    white-space: normal !important;
    height: auto !important;
    min-height: 38px;
    line-height: 1.22;
    text-align: center;
    gap: 3px !important;
  }
  .lum-promos a > span svg { display: none !important; }
  .lum-promos a { margin: 12px !important; margin-top: 0 !important; }
}

/* Promo badges sit on brand-coloured cards, so they need a real pill with
   contrast — the global eyebrow flattening was leaving "$5 OFF" as white text
   on a white card. */
.lum-promos .rounded-full {
  background: rgba(46, 42, 28, 0.82) !important;
  color: var(--lum-cream) !important;
  border-radius: 999px !important;
  padding: 4px 11px !important;
  font-family: var(--lum-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.lum-promos .bg-white\/20.rounded-full {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

/* ---------- mobile density on the long content pages --------------------- */
/* The clinic gallery stacked twelve full-width photos, and the market/clinic
   team grids stacked portraits — together that made those pages 19-25k px of
   thumb-scrolling. Two-up keeps them scannable without losing anything. */
@media (max-width: 640px) {
  .lum-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .lum-gallery__item { aspect-ratio: 1 / 1; }
  .lum-gallery__item--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
  .lum-grid--team { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .lum-team__grid.lum-team__grid--wide { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .lum-depts { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
  .lum-depts .lum-dept__name { font-size: 16px; }
  .lum-depts .lum-dept__blurb { font-size: 13px; }
  .lum-locs { gap: 34px; }
}

/* ---------- chat widget position ----------------------------------------- */
/* Shopify Inbox anchors itself to the bottom-right, where it sat on top of
   Add buttons in the last row of product grids. Lift it clear. The product
   page raises it further when the sticky add-to-cart bar is showing
   (see product.js). */
shopify-chat { --lum-chat-lift: 76px; }
@media (min-width: 641px) {
  shopify-chat::part(button),
  shopify-chat { transform: translateY(calc(-1 * var(--lum-chat-lift))); }
}
@media (max-width: 640px) {
  /* 64px was too high: it parked the bubble over the clinic page's Book an
     Appointment button and over the last grid row's Add button — the very
     thing the lift was meant to clear. Measured against the widget's real
     button box (its host element spans the whole viewport, so testing that
     rectangle reports overlaps that are not there). */
  shopify-chat { --lum-chat-lift: 28px; transform: translateY(calc(-1 * var(--lum-chat-lift))); }
}
/* The filter drawer is modal and its Show results bar runs to the bottom of
   the screen, where the bubble would sit right on top of it. */
body.lum-drawer-open shopify-chat { opacity: 0; pointer-events: none; }

/* ==========================================================================
   Collection filtering
   ========================================================================== */
.lum-facets { flex: 0 0 auto; width: 16rem; }
.lum-facets__panel {
  background: var(--lum-cream);
  border: 1px solid var(--lum-hairline);
  border-radius: 4px;
  padding: 18px;
  position: sticky;
  top: 7rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}
.lum-facets__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.lum-facets__title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--lum-label); font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--lum-brown);
}
.lum-facets__close { display: none; background: none; border: 0; cursor: pointer; color: var(--lum-brown); padding: 4px; }
.lum-facets__scrim { display: none; }

.lum-facet { margin-bottom: 22px; }
/* The label is a button so the group can collapse on a phone. On desktop the
   toggle is inert and every group stays open — same sidebar as before. */
.lum-facet__toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 0 0 10px; padding: 0; border: 0; background: none;
  text-align: left; cursor: default;
}
.lum-facet__label {
  font-family: var(--lum-label); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lum-green-text); margin: 0;
}
.lum-facet__tally {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 5px;
  border-radius: 999px; background: var(--lum-green); color: var(--lum-ink-on-green);
  font-size: 9px; font-variant-numeric: tabular-nums;
}
.lum-facet__chev { display: none; }
.lum-facets__foot { display: none; }
.lum-facet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.lum-facet__list--scroll { max-height: 15rem; overflow-y: auto; padding-right: 4px; }
.lum-facet__sub { font-size: 14px; color: var(--lum-muted); text-decoration: none; }
.lum-facet__sub:hover { color: var(--lum-green-text); }
.lum-facet__opt {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  font-size: 14px; color: var(--lum-brown); cursor: pointer; line-height: 1.3;
}
.lum-facet__opt.is-empty { opacity: 0.4; cursor: default; }
.lum-facet__opt input { accent-color: var(--lum-green); width: 15px; height: 15px; }
.lum-facet__count { font-family: var(--lum-label); font-size: 10px; color: var(--lum-muted); font-variant-numeric: tabular-nums; }
.lum-facet__search {
  width: 100%; height: 34px; margin-bottom: 9px; padding: 0 10px;
  border: 1px solid var(--lum-hairline); border-radius: 4px;
  background: #fff; font-size: 13px; font-family: var(--lum-body);
}
.lum-facet__search:focus-visible { outline: 2px solid var(--lum-green); outline-offset: 1px; }
.lum-facet__none { font-size: 13px; color: var(--lum-muted); margin: 6px 0 0; }
.lum-facet__price { display: flex; align-items: center; gap: 6px; }
.lum-facet__price input {
  width: 4.5rem; height: 34px; padding: 0 8px; font-size: 13px;
  border: 1px solid var(--lum-hairline); border-radius: 4px; background: #fff;
}
.lum-facet__go {
  height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--lum-brown);
  background: transparent; color: var(--lum-brown); cursor: pointer;
  font-family: var(--lum-body); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.lum-facet__go:hover { background: var(--lum-brown); color: var(--lum-cream); }

/* toolbar */
.lum-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--lum-hairline);
}
.lum-toolbar__count { margin: 0; font-size: 14px; color: var(--lum-muted); }
.lum-toolbar__count strong { color: var(--lum-brown); font-weight: 600; font-variant-numeric: tabular-nums; }
.lum-toolbar__filtered { font-family: var(--lum-label); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lum-green-text); }
.lum-toolbar__right { display: flex; align-items: center; gap: 12px; }
.lum-toolbar__filterbtn {
  display: none; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--lum-brown); background: transparent; color: var(--lum-brown);
  font-family: var(--lum-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.lum-toolbar__badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--lum-green); color: var(--lum-ink-on-green);
  font-size: 10px; font-variant-numeric: tabular-nums;
}
.lum-toolbar__sort { display: inline-flex; align-items: center; gap: 8px; }
.lum-toolbar__sort span {
  font-family: var(--lum-label); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lum-muted);
}
.lum-toolbar__sort select {
  height: 38px; padding: 0 30px 0 12px; border-radius: 999px;
  border: 1px solid var(--lum-hairline); background: var(--lum-cream);
  font-family: var(--lum-body); font-size: 13px; color: var(--lum-brown); cursor: pointer;
}

/* On a 320px screen a two-column card is ~138px wide, and the price (~60px)
   beside the nowrap "Out of Stock" pill (99px) pushed the whole grid 19px past
   the viewport. Let the footer wrap there so the pill drops to its own line. */
@media (max-width: 400px) {
  .lum-cardfoot { flex-wrap: wrap; gap: 6px; }
  .lum-cardfoot > * { min-width: 0; }
  .lum-oos { width: 100%; }
}

/* ---------- journal band ------------------------------------------------- */
.lum-journal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 34px 24px;
}
.lum-journal__item { display: flex; flex-direction: column; }
.lum-journal__noimg {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--lum-cream); color: var(--lum-green-text);
}
.lum-journal__meta {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 8px;
  font-family: var(--lum-label); font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lum-muted);
}
.lum-journal__tag {
  color: var(--lum-green-text);
  padding-right: 10px; border-right: 1px solid var(--lum-hairline);
}
.lum-journal__title {
  display: block;
  font-family: var(--lum-display); font-weight: 400;
  font-size: clamp(20px, 2vw, 24px); line-height: 1.16;
  text-wrap: balance; margin-bottom: 8px;
  transition: color 0.2s ease;
}
.lum-card:hover .lum-journal__title { color: var(--lum-green-text); }
.lum-journal__excerpt {
  display: block; flex: 1;
  font-size: 14.5px; line-height: 1.55; color: var(--lum-body-light);
  margin-bottom: 14px;
}
.lum-journal__go {
  display: block;
  font-family: var(--lum-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lum-green-text);
}
.lum-card:hover .lum-journal__go { text-decoration: underline; text-underline-offset: 4px; }

/* active filter chips */
.lum-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.lum-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--lum-cream-alt); border: 1px solid var(--lum-hairline);
  color: var(--lum-brown); text-decoration: none;
  font-size: 12.5px; line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lum-chip span[aria-hidden] { font-size: 14px; line-height: 1; opacity: 0.6; }
.lum-chip:hover { background: var(--lum-brown); color: var(--lum-cream); border-color: var(--lum-brown); }
.lum-chip--clear { background: transparent; border-style: dashed; color: var(--lum-green-text); }
.lum-chip--clear:hover { background: var(--lum-green-text); color: var(--lum-cream); border-color: var(--lum-green-text); }

/* load more + empty state */
.lum-more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 34px; }
.lum-more__status { font-family: var(--lum-label); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lum-muted); margin: 18px 0 0; text-align: center; }
.lum-more .lum-more__status { margin-top: 0; }
.lum-pagefallback { display: none; }
.lum-empty { grid-column: 1 / -1; text-align: center; padding: 60px 0; display: grid; gap: 18px; justify-items: center; }
.lum-empty p { color: var(--lum-muted); margin: 0; }

/* ---- drawer below lg ---- */
@media (max-width: 1023px) {
  .lum-toolbar__filterbtn { display: inline-flex; }
  .lum-facets { width: auto; }
  .lum-facets__panel {
    position: fixed; z-index: 120; inset: 0 auto 0 0;
    width: min(88vw, 360px); max-height: none; height: 100%;
    border-radius: 0; border: 0; padding: 20px;
    transform: translateX(-102%);
    transition: transform 0.28s ease;
    box-shadow: 0 0 40px rgba(89, 74, 65, 0.22);
  }
  .lum-facets.is-open .lum-facets__panel { transform: translateX(0); }
  .lum-facets__close { display: inline-flex; }
  .lum-facets__scrim {
    display: block; position: fixed; inset: 0; z-index: 119;
    background: rgba(46, 42, 28, 0.45);
    opacity: 0; pointer-events: none; transition: opacity 0.28s ease;
  }
  .lum-facets.is-open .lum-facets__scrim { opacity: 1; pointer-events: auto; }

  /* One scroller, not two. A max-height on the option list nests a scroll box
     inside a scrolling drawer, which on touch steals the gesture and hides the
     fact that more groups follow. The groups collapse instead. */
  .lum-facet__list--scroll { max-height: none; overflow: visible; padding-right: 0; }
  .lum-facets__panel {
    display: flex; flex-direction: column;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0;
  }
  .lum-facets__panel > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

  /* accordion */
  .lum-facet { margin-bottom: 0; border-bottom: 1px solid var(--lum-hairline); }
  .lum-facet__toggle {
    min-height: 52px; margin: 0; padding: 4px 2px; cursor: pointer;
    justify-content: flex-start;
  }
  .lum-facet__label { font-size: 11px; }
  .lum-facet__chev {
    display: block; margin-left: auto; position: relative;
    width: 12px; height: 12px; flex: 0 0 12px;
  }
  .lum-facet__chev::before,
  .lum-facet__chev::after {
    content: ''; position: absolute; background: var(--lum-brown);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .lum-facet__chev::before { top: 5px; left: 0; width: 12px; height: 1.5px; }
  .lum-facet__chev::after { left: 5px; top: 0; width: 1.5px; height: 12px; }
  .lum-facet__toggle[aria-expanded='true'] .lum-facet__chev::after { opacity: 0; transform: rotate(90deg); }
  .lum-facet__toggle[aria-expanded='false'] + .lum-facet__body { display: none; }
  .lum-facet__body { padding: 0 2px 16px; }

  /* touch targets: 18px rows with 61 brands stacked is not tappable */
  .lum-facet__list { gap: 0; }
  .lum-facet__opt { min-height: 44px; padding: 4px 0; font-size: 15px; gap: 12px; }
  .lum-facet__opt input { width: 20px; height: 20px; }
  .lum-facet__count { font-size: 11px; }
  .lum-facet__sub { display: flex; align-items: center; min-height: 44px; font-size: 15px; }
  /* 16px keeps iOS Safari from zooming the page when the field takes focus */
  .lum-facet__search, .lum-facet__price input { height: 44px; font-size: 16px; }
  .lum-facet__go { height: 44px; padding: 0 16px; }
  .lum-facets__close {
    min-width: 44px; min-height: 44px; padding: 10px;
    align-items: center; justify-content: center; margin-right: -10px;
  }
  .lum-facets__head { min-height: 44px; }

  /* apply bar: selections are batched while the drawer is open */
  .lum-facets__foot {
    display: flex; align-items: center; gap: 12px;
    /* sticky pins it while the groups are expanded and the panel scrolls;
       margin-top:auto drops it to the bottom when everything is collapsed
       and there is nothing to scroll */
    position: sticky; bottom: 0; z-index: 2;
    margin: auto -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: var(--lum-cream);
    border-top: 1px solid var(--lum-hairline);
    box-shadow: 0 -8px 20px rgba(89, 74, 65, 0.08);
  }
  .lum-facets__clear {
    flex: 0 0 auto; padding: 0 4px;
    font-family: var(--lum-label); font-size: 10px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--lum-muted); text-decoration: none; line-height: 44px;
  }
  .lum-facets__apply {
    flex: 1 1 auto; height: 48px; border: 0; border-radius: 999px;
    background: var(--lum-brown); color: var(--lum-cream); cursor: pointer;
    font-family: var(--lum-body); font-size: 11px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lum-facets__panel, .lum-facets__scrim { transition: none; }
}

/* On a phone the listing sits below the hero, subcategory pills and the Top
   Products carousel, so the Filter button would be ~1,300px up the page once
   you are deep in the grid. Stick the toolbar under the header instead. */
@media (max-width: 1023px) {
  .lum-toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--lum-cream);
    /* the grid sits in a .container with 1rem padding, not the band padding —
       using --lum-pad-x here overflowed the viewport by 8px each side */
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 10px 1rem;
    margin-bottom: 16px;
    box-shadow: 0 6px 18px rgba(89, 74, 65, 0.06);
    /* one row, not two: wrapping put the count above the controls and cost
       91px of a 844px screen for something that is pinned the whole way down */
    flex-wrap: nowrap;
    gap: 8px;
  }
  .lum-toolbar__count { font-size: 12.5px; min-width: 0; flex: 0 1 auto; }
  .lum-toolbar__filtered { display: none; }
  .lum-toolbar__right { gap: 8px; flex: 0 0 auto; }
  .lum-toolbar__filterbtn { height: 44px; padding: 0 14px; }

  /* A 223px-wide native select cannot sit beside the Filter pill on a 390px
     screen. Shrink it to a matching "Sort" pill and let the transparent select
     sit on top, so the tap still opens the OS picker. */
  .lum-toolbar__sort { position: relative; flex: 0 0 auto; }
  .lum-toolbar__sort span {
    display: inline-flex; align-items: center; gap: 7px;
    height: 44px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--lum-hairline); background: var(--lum-cream);
    font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--lum-brown);
  }
  .lum-toolbar__sort span::after {
    content: ''; width: 6px; height: 6px; margin-top: -3px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  .lum-toolbar__sort select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; border: 0; padding: 0; max-width: none;
  }
}

/* ---------- store pages ------------------------------------------------- */
.lum-store { align-items: start; }
.lum-store__intro { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--lum-body-light); max-width: 52ch; margin: 14px 0 34px; }
.lum-store__intro p + p { margin-top: 14px; }
.lum-store__h { margin: 0 0 14px; }
.lum-store__list { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 12px; max-width: 56ch; }
.lum-store__list li { padding: 12px 0; border-bottom: 1px solid var(--lum-hairline); font-size: 15.5px; line-height: 1.5; }
.lum-store__list b { font-weight: 600; color: var(--lum-brown); }
.lum-store__list span { color: var(--lum-body-light); }
.lum-store__list span::before { content: ' — '; }
.lum-store__list .lum-link { margin-left: 10px; font-size: 11px; }
.lum-store__p { font-size: 15.5px; line-height: 1.6; color: var(--lum-body-light); max-width: 56ch; margin: 0 0 22px; }
.lum-store__clinic { padding: 16px 18px; background: var(--lum-cream-alt); border-left: 3px solid var(--lum-green); }
.lum-store__other { margin: 18px 0 0; font-size: 14px; color: var(--lum-muted); }
.lum-gallery--store { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .lum-gallery--store { grid-template-columns: 1fr; } .lum-gallery--store .lum-gallery__item--wide { grid-column: auto; aspect-ratio: 4 / 3; } }

/* ---------- clinic: facts line, conditions index, service links ---------- */
.lum-clinic__facts { font-size: 15px; color: var(--lum-body-light); margin: -12px 0 26px; max-width: 46ch; }
.lum-conditions__list {
  list-style: none; margin: 0; padding: 0;
  columns: 1; column-gap: 40px;
}
@media (min-width: 700px) { .lum-conditions__list { columns: 2; } }
@media (min-width: 1100px) { .lum-conditions__list { columns: 3; } }
.lum-conditions__list li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--lum-hairline); font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.lum-conditions__name { font-weight: 500; color: var(--lum-brown); }
.lum-conditions__svcs a {
  font-family: var(--lum-label); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lum-green-text); text-decoration: none; margin-right: 10px;
}
.lum-conditions__svcs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lum-svclinks__facts { font-size: 16px; color: var(--lum-body-light); margin: 0 0 28px; max-width: 60ch; }
.lum-svclinks__h { margin: 0 0 18px; }
.lum-svclinks__people { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px; }
.lum-svclinks__media { aspect-ratio: 3 / 4; }
.lum-svclinks__name { display: block; font-family: var(--lum-display); font-size: 18px; margin: 10px 0 2px; }
.lum-svclinks__more { margin: 0; font-size: 14px; color: var(--lum-muted); display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- FAQ band ---------- */
.lum-faq__list { max-width: 760px; border-top: 1px solid var(--lum-hairline); }
.lum-faq__item { border-bottom: 1px solid var(--lum-hairline); }
.lum-faq__q {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 2px; font-family: var(--lum-display); font-size: clamp(18px, 1.7vw, 21px); color: var(--lum-brown);
}
.lum-faq__q::-webkit-details-marker { display: none; }
.lum-faq__chev { position: relative; flex: 0 0 12px; width: 12px; height: 12px; }
.lum-faq__chev::before, .lum-faq__chev::after { content: ''; position: absolute; background: var(--lum-brown); transition: transform 0.18s ease, opacity 0.18s ease; }
.lum-faq__chev::before { top: 5px; left: 0; width: 12px; height: 1.5px; }
.lum-faq__chev::after { left: 5px; top: 0; width: 1.5px; height: 12px; }
.lum-faq__item[open] .lum-faq__chev::after { opacity: 0; transform: rotate(90deg); }
.lum-faq__a { margin: 0 0 20px; padding-right: 32px; font-size: 15.5px; line-height: 1.6; color: var(--lum-body-light); max-width: 62ch; }

/* ---------- article byline, author card, articles-by ---------- */
.lum-byline__avatar { display: block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--lum-cream-ph); flex: 0 0 44px; }
.lum-byline__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lum-byline__name { color: inherit; text-decoration: none; border-bottom: 1px solid var(--lum-hairline); }
.lum-byline__name:hover { color: var(--lum-green-text); border-color: currentColor; }
.lum-author { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 48px; padding: 28px; background: var(--lum-cream); border: 1px solid var(--lum-hairline); border-radius: 4px; }
@media (min-width: 640px) { .lum-author { grid-template-columns: 140px 1fr; gap: 28px; } }
.lum-author__media { width: 140px; aspect-ratio: 3 / 4; border-radius: 3px; overflow: hidden; background: var(--lum-cream-ph); }
.lum-author__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lum-author__name { margin: 6px 0 4px; }
.lum-author__bio { margin: 12px 0 14px; font-size: 15px; line-height: 1.6; color: var(--lum-body-light); }
.lum-author__links { margin: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.lum-author__moreh { margin: 18px 0 6px; }
.lum-author__more { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.lum-author__more a { color: var(--lum-brown); text-decoration: none; border-bottom: 1px solid var(--lum-hairline); }
.lum-author__more a:hover { color: var(--lum-green-text); border-color: currentColor; }
.lum-bymine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.lum-bymine__title { font-size: 17px; }
.lum-byline__avatar--team { display: grid; place-items: center; background: var(--lum-green); color: var(--lum-ink-on-green); }

/* ---------- mobile nav drawer ---------- */
.lum-mnav { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
.lum-mnav__overlay { position: absolute; inset: 0; background: rgba(46, 38, 33, 0.5); opacity: 0; transition: opacity 0.3s ease; }
.lum-mnav__panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(22rem, 90vw);
  display: flex; flex-direction: column;
  background: var(--lum-cream); color: var(--lum-brown);
  transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 8px 0 32px rgba(46, 38, 33, 0.18);
}
.lum-mnav.is-open { pointer-events: auto; }
.lum-mnav.is-open .lum-mnav__overlay { opacity: 1; }
.lum-mnav.is-open .lum-mnav__panel { transform: none; }
.lum-mnav__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 8px 12px 20px; border-bottom: 1px solid var(--lum-hairline); padding-top: max(12px, env(safe-area-inset-top)); }
.lum-mnav__logo { height: 44px; width: auto; display: block; }
.lum-mnav__close { width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; color: var(--lum-brown); cursor: pointer; border-radius: 50%; }
.lum-mnav__close:hover { background: var(--lum-cream-alt); }
.lum-mnav__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 6px 0 12px; }
.lum-mnav__list, .lum-mnav__sub { list-style: none; margin: 0; padding: 0; }
.lum-mnav__toggle, .lum-mnav__link, .lum-mnav__sub a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 48px; padding: 12px 20px;
  font-family: var(--lum-body); font-size: 16px; color: var(--lum-brown); text-decoration: none;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.lum-mnav__toggle, .lum-mnav__link { font-weight: 500; }
.lum-mnav__link { justify-content: flex-start; }
.lum-mnav__toggle[aria-expanded="true"] { color: var(--lum-green-text); }
.lum-mnav__chev { position: relative; flex: 0 0 12px; width: 12px; height: 12px; }
.lum-mnav__chev::before, .lum-mnav__chev::after { content: ''; position: absolute; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; }
.lum-mnav__chev::before { top: 5px; left: 0; width: 12px; height: 1.5px; }
.lum-mnav__chev::after { left: 5px; top: 0; width: 1.5px; height: 12px; }
.lum-mnav__toggle[aria-expanded="true"] .lum-mnav__chev::after { opacity: 0; transform: rotate(90deg); }
.lum-mnav__sub { background: var(--lum-cream-alt); border-top: 1px solid var(--lum-hairline); border-bottom: 1px solid var(--lum-hairline); padding: 4px 0; }
.lum-mnav__sub a, .lum-mnav__toggle--sub { min-height: 44px; padding: 10px 20px 10px 32px; font-size: 15px; font-weight: 400; color: var(--lum-body-light); }
.lum-mnav__toggle--sub { font-weight: 500; color: var(--lum-brown); }
.lum-mnav__sub--2 { background: var(--lum-cream); border-top: 0; border-bottom: 0; margin: 0 0 4px; }
.lum-mnav__sub--2 a { padding-left: 46px; font-size: 14.5px; }
.lum-mnav__toggle--sub3 { padding-left: 46px; font-size: 14.5px; }
.lum-mnav__sub--3 { background: var(--lum-cream-alt); margin: 0 0 4px; }
.lum-mnav__sub--3 a { padding-left: 60px; font-size: 14px; }
.lum-mnav__all { font-family: var(--lum-label); font-size: 11px !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lum-green-text) !important; }
.lum-mnav__account { border-top: 1px solid var(--lum-hairline); margin-top: 6px; }
.lum-mnav__account svg { margin-right: 8px; }
.lum-mnav__foot { flex: 0 0 auto; display: grid; gap: 6px; padding: 14px 20px; padding-bottom: max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--lum-hairline); background: var(--lum-cream-alt); font-size: 13.5px; }
.lum-mnav__foot a { display: inline-flex; align-items: center; gap: 8px; color: var(--lum-brown); text-decoration: none; }
.lum-mnav__foot svg { color: var(--lum-green-text); }
.lum-mnav__hours { color: var(--lum-muted); font-size: 12.5px; }

/* ---------- imported pages: the page-builder tells, neutralised ----------
   detemplate.py strips blur blobs, gradient text, icon tiles and watermark
   numbers from the imported sections and tags their cards .lum-tile. */
.lum-tile { background: #fff !important; border: 1px solid var(--lum-hairline) !important; border-radius: 4px !important; box-shadow: none !important; color: var(--lum-brown); transform: none !important; }
.lum-tile:hover { transform: none !important; box-shadow: none !important; border-color: var(--lum-hairline) !important; }
.lum-tile [class*="text-muted-foreground"], .lum-tile [class*="opacity-90"] { color: var(--lum-muted) !important; opacity: 1 !important; }
.lum-tile h3, .lum-tile h4 { font-weight: 400 !important; }
.lum-stepnum { display: block; font-family: var(--lum-label); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; color: var(--lum-green-text); margin: 0 0 10px; }
.lum-bullet { display: inline-block; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--lum-green); margin-top: 0.6em; }
.lum-bullet + p, .lum-bullet + span, .lum-bullet + div { min-width: 0; }
[class*="hover:scale-"]:hover { transform: none !important; }
[class*="hover:shadow-"]:hover { box-shadow: none !important; }
main img[class*="scale-105"], main img[class*="group-hover:scale"] { transform: none !important; }
.lum-tile, .lum-tile h3, .lum-tile h4, .lum-tile p, .lum-tile span, .lum-tile li { color: var(--lum-brown); }
.lum-tile [class*="text-primary-foreground"], .lum-tile [class*="text-white"], .lum-tile [class*="text-secondary-foreground"] { color: var(--lum-brown) !important; }
.lum-tile [class*="text-muted-foreground"] { color: var(--lum-muted) !important; }
/* the page-builder's pill badges read as eyebrows instead */
main [class*="rounded-full"][class*="text-xs"][class*="font-semibold"]:not(a):not(button) {
  background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
  font-family: var(--lum-label); font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lum-green-text) !important;
}
main .bg-primary [class*="rounded-full"][class*="text-xs"][class*="font-semibold"]:not(a):not(button),
main [class*="bg-gradient-earth"] [class*="rounded-full"][class*="text-xs"][class*="font-semibold"]:not(a):not(button),
main [class*="from-primary"] [class*="rounded-full"][class*="text-xs"][class*="font-semibold"]:not(a):not(button) { color: var(--lum-green-light) !important; }
.lum-tile img[class*="invert"] { filter: none !important; }
/* every remaining pill badge on the imported pages becomes an eyebrow */
.template-page main [class*="rounded-full"][class*="px-"][class*="font-"]:not(a):not(button):not([class*="lum-"]):not([class*="destructive"]) {
  background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
  font-family: var(--lum-label); font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.6;
  color: inherit !important; opacity: 0.78;
}
.template-page main [class*="rounded-full"][class*="px-"][class*="font-"] svg { display: none; }
/* pills whose text weight sits on an inner span */
.template-page main [class*="rounded-full"][class*="px-"][class*="py-"]:not(a):not(button):not([class*="lum-"]):not(.lum-pcard *):not([class*="destructive"]) {
  background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
  font-family: var(--lum-label); font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.6;
  color: inherit !important; opacity: 0.78;
}
.template-page main [class*="rounded-full"][class*="px-"][class*="py-"]:not(a):not(button):not([class*="lum-"]) > span { color: inherit !important; font: inherit !important; letter-spacing: inherit !important; }
.template-page main [class*="rounded-full"][class*="px-"][class*="py-"]:not(a):not(button):not([class*="lum-"]) > svg { display: none; }
/* icon marks: the icon kept, the tinted box gone */
.lum-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 0 12px; border-radius: 50%; background: var(--lum-cream-alt) !important; color: var(--lum-green-text) !important; flex: 0 0 40px; }
.lum-icon svg { width: 20px; height: 20px; }
.text-center .lum-icon, .lum-tile.text-center .lum-icon, [class*="text-center"] > .lum-icon { display: flex; margin-left: auto; margin-right: auto; }
.lum-tile .lum-icon { background: var(--lum-cream-alt) !important; }
/* photo cards: keep the dark scrim and light title over the image */
.lum-tile [class*="absolute"][class*="inset-0"][class*="bg-gradient-to-t"] { background: linear-gradient(to top, rgba(46,38,33,0.78) 0%, rgba(46,38,33,0.35) 50%, rgba(46,38,33,0) 100%) !important; }
.lum-tile [class*="absolute"][class*="bottom-0"] h3, .lum-tile [class*="absolute"][class*="bottom-0"] p, .lum-tile [class*="absolute"][class*="bottom-0"] span { color: var(--lum-cream) !important; }
.lum-tile [class*="absolute"] .lum-icon { background: rgba(246,243,236,0.92) !important; margin: 0; }

/* ---- Forms (contact page, clinic inquiry) ---- */
.lum-form { display: grid; gap: 16px; margin-top: 18px; }
.lum-form__row { display: grid; gap: 16px; }
@media (min-width: 640px) { .lum-form__row { grid-template-columns: 1fr 1fr; } }
.lum-form__field { display: grid; gap: 6px; }
.lum-form__field > span, .lum-form__legend { font-family: var(--lum-label); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lum-muted); }
.lum-form input, .lum-form textarea, .lum-form select {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.4;
  border: 1px solid var(--lum-hairline); border-radius: 4px; background: #fff; color: var(--lum-brown);
}
.lum-form input:not([type="radio"]):not([type="checkbox"]), .lum-form select { height: 48px; }
.lum-form select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b4f45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.lum-form textarea { resize: vertical; min-height: 96px; }
.lum-form ::placeholder { color: var(--lum-muted); opacity: .8; }
.lum-form input:focus-visible, .lum-form textarea:focus-visible, .lum-form select:focus-visible { outline: 2px solid var(--lum-green); outline-offset: 1px; }
.lum-form__fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.lum-form__fieldset .lum-form__legend { width: 100%; padding: 0; margin-bottom: 4px; }
.lum-form__radio { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--lum-brown); cursor: pointer; }
.lum-form input[type="radio"] { width: 18px; height: 18px; padding: 0; margin: 0; accent-color: var(--lum-green); }
.lum-form .lum-btn { justify-self: start; }
.lum-form__ok { color: var(--lum-green-text); font-weight: 500; margin: 0; }
.lum-form__err { color: #9a3b2c; margin: 0; }
.lum-form__fine { margin: -4px 0 0; font-size: 13px; color: var(--lum-muted); }

/* ---- Clinic inquiry band (below the conditions index) ---- */
.lum-inquiry { display: grid; gap: 28px; margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--lum-hairline); }
@media (min-width: 900px) { .lum-inquiry { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
.lum-inquiry__text { max-width: 48ch; }
.lum-inquiry__text .lum-h3 { margin: 10px 0 12px; }
.lum-inquiry__text p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: var(--lum-body-light); }
.lum-inquiry__text p a { color: var(--lum-brown); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lum-green); }
.lum-inquiry__form { background: #fff; border: 1px solid var(--lum-hairline); border-radius: 6px; padding: 22px; }
@media (min-width: 640px) { .lum-inquiry__form { padding: 28px 32px 30px; } }
.lum-inquiry__form .lum-form { margin-top: 0; }

/* ---- Gift card recipient (product form) ---- */
.lum-gift { margin: 4px 0 18px; border: 1px solid var(--lum-hairline); border-radius: 6px; background: #fff; }
.lum-gift__toggle { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 15px; font-weight: 500; color: var(--lum-brown); cursor: pointer; }
.lum-gift__toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--lum-green); }
.lum-gift__fields { padding: 4px 16px 18px; display: grid; gap: 14px; border-top: 1px solid var(--lum-hairline); }
.lum-gift__hint { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--lum-body-light); }
.lum-gift__fields .lum-form__row { display: grid; gap: 14px; }
@media (min-width: 640px) { .lum-gift__fields .lum-form__row { grid-template-columns: 1fr 1fr; } }
.lum-gift__fields .lum-form__field { display: grid; gap: 6px; }
.lum-gift__fields .lum-form__field > span { font-family: var(--lum-label); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lum-muted); }
.lum-gift__fields input, .lum-gift__fields textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.4; border: 1px solid var(--lum-hairline); border-radius: 4px; background: #fff; color: var(--lum-brown); }
.lum-gift__fields input { height: 48px; }
.lum-gift__fields textarea { resize: vertical; }
.lum-gift__fields input:focus-visible, .lum-gift__fields textarea:focus-visible { outline: 2px solid var(--lum-green); outline-offset: 1px; }
.lum-gift__date .lum-form__fine { margin: 0; }

/* ---- Judge.me star badges ---- */
.lum-pdp__rating.jdgm-preview-badge { display: block; margin: 2px 0 10px; }
.lum-pdp__rating .jdgm-star { color: var(--lum-green); font-size: 15px; }
.lum-pdp__rating .jdgm-prev-badge__text { font-family: var(--lum-label); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lum-muted); margin-left: 6px; }
.lum-pcard__stars { min-height: 18px; margin-top: -2px; } /* reserved so the stars do not shift the grid when Judge.me draws them */
.lum-pcard__stars .jdgm-star { color: var(--lum-green); font-size: 12px; }
.lum-pcard__stars .jdgm-prev-badge__text { font-size: 11px; color: var(--lum-muted); margin-left: 4px; }