/*
Theme Name: MishBio Luxe
Theme URI: https://mishbio.us
Author: MishBio
Description: A lightweight, editorial WooCommerce theme for MishBio skincare. Standalone (no parent), built for Core Web Vitals with coded product templates rather than page-builder widgets.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mishbio-luxe
Tags: e-commerce, custom-menu, featured-images, translation-ready
WC requires at least: 8.0
WC tested up to: 11.0
*/

/* ==========================================================================
   MishBio Luxe — design system

   Direction: "the laboratory record." The palette is taken from the brand's
   own assets — the azure and deep navy of the MishBio Bioscience mark, and the
   blue-and-white cartons the products actually ship in. A previous pass tried
   an amber/sage laboratory palette; it was coherent on its own terms but
   fought both the logo and the packaging, so it was reverted.

   Rhythm comes from luminance, not from a second hue. Sections alternate cool
   paper with a warm sand band, and the supplement world runs dark against the
   skincare world's light. That is the fix for a page reading flat — the
   problem was tonal range, not the colour.

   Signature: the specimen strip — a hairline-ruled monospace metadata band
   carrying real measured facts (key active, skin type, volume). It appears on
   product cards, product pages and category headers. It is structural, not
   decorative: every cell holds a fact the shopper actually needs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ------------------------------------------------------------------
     PALETTE — derived from the brand's real assets.

     The azure and deep navy come straight from the MishBio Bioscience mark,
     and match the blue-and-white cartons the products ship in. The site, the
     logo and the packaging now belong to each other.

     Azure is the ONLY saturated colour on the page: primary CTAs, active
     states, the vitrine's light bar. If it appears more than three times in
     a viewport, remove one.

     Token names below are historic (--amber, --sage, --kraft) and no longer
     describe their values. They are kept because several hundred component
     declarations reference them; renaming would be a large diff for no visual
     change. Read them as: --amber = the accent, --sage = secondary type,
     --kraft = mid neutral.
     ------------------------------------------------------------------ */

  --ink:        #0B2032; /* deep navy — the logo's molecule nodes           */
  --cleanroom:  #EEF4F8; /* cool paper, matched to the carton white         */
  --amber:      #12A5DE; /* SIGNATURE — the logo azure, and the carton blue */
  --sage:       #40607A; /* mid navy-slate. Secondary type.                 */
  --kraft:      #8CA3B5; /* mid neutral: rules, captions, meta              */
  --oxblood:    #A8452F; /* alerts, sale, low stock. Warm, so it reads.     */

  --amber-glow: #5EC8F0; /* hover / focus only                              */

  /* The anti-monotony token. An earlier build was one hue at one luminance
     from top to bottom, which is what read as flat — the problem was tonal
     range, not the colour itself. This warm sand alternates with --cleanroom
     for section banding, giving the page rhythm without introducing a second
     brand colour to compete with the azure. */
  --sage-tint:  #E9E4DA; /* warm sand — section banding, light world        */
  --ink-raised: #123049; /* card surface, dark world                        */

  /* Aliases.
     Component rules across the theme reference the older token names. Rather
     than rewrite several hundred declarations — and risk missing some —
     the old names now point at the new palette, so the art direction changes
     everywhere at once and stays in one place. */
  --glass:    var(--cleanroom);
  --paper:    #FBFDFE;            /* lifted, for card surfaces              */
  --mineral:  var(--sage);        /* secondary type                         */
  --trace:    #CFDDE7;            /* hairlines                              */
  --meniscus: var(--amber);       /* the accent                             */

  /* Dimensional layer */
  --navy-deep:  #061523;
  --azure-lift: var(--amber-glow);

  /* Derived */
  --ink-08:      rgba(11, 32, 50, 0.08);
  --ink-60:      rgba(11, 32, 50, 0.6);
  --meniscus-10: rgba(18, 165, 222, 0.12);

  /* Type. Newsreader (editorial serif) / Instrument Sans (body) /
     IBM Plex Mono (data). Deliberately not the Playfair+Inter pairing. */
  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo,
    Consolas, monospace;

  /* Fluid type scale, 1.25 ratio at the small end opening to 1.33.
     The small steps were raised: at the original sizes the monospace UI text
     (specimen strip, eyebrows, tier labels, nav) fell to ~11px on desktop,
     which is below comfortable reading size for a face with this much letter
     spacing. Body text came up too. */
  --step--2: clamp(0.84rem, 0.82rem + 0.1vw, 0.90rem);
  --step--1: clamp(0.90rem, 0.87rem + 0.15vw, 1.00rem);
  --step-0:  clamp(1.0625rem, 1.02rem + 0.22vw, 1.125rem); /* BODY 17→18px */
  --step-1:  clamp(1.2rem, 1.15rem + 0.25vw, 1.35rem);
  --step-2:  clamp(1.44rem, 1.35rem + 0.44vw, 1.75rem);
  --step-3:  clamp(1.728rem, 1.58rem + 0.74vw, 2.25rem);
  --step-4:  clamp(2.074rem, 1.84rem + 1.17vw, 2.9rem);
  --step-5:  clamp(2.488rem, 2.11rem + 1.89vw, 3.8rem);
  --step-6:  clamp(2.986rem, 2.4rem + 2.93vw, 5rem);

  /* Space — 4px base, geometric. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;

  /* Measure & layout */
  /* Layout width.
     82rem read as a narrow boxed column on a wide monitor, with the content
     stranded in the middle of a large empty field. The wrapper now scales with
     the viewport and only stops at a genuinely wide ceiling, so the page fills
     the screen instead of sitting in a box. */
  --measure: 72ch;
  --wrap: min(114rem, 92vw);
  --wrap-narrow: min(60rem, 90vw);
  --gutter: clamp(1.25rem, 3.5vw, 4rem);

  /* Motion — one duration, one easing. Discipline over variety. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 420ms;
  --dur-fast: 180ms;

  --radius: 2px; /* Near-square. Lab glass, not app UI. */
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--glass);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--meniscus); }

ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

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

/* Quality floor: keyboard focus is always visible and always the accent. */
:focus-visible {
  outline: 2px solid var(--meniscus);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100%; left: var(--space-s); z-index: 999;
  background: var(--ink); color: var(--glass);
  padding: var(--space-2xs) var(--space-s);
}
.skip-link:focus { top: var(--space-s); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--flush-top { padding-block-start: 0; }

.stack > * + * { margin-block-start: var(--flow, var(--space-s)); }

/* --------------------------------------------------------------------------
   4. Signature: the specimen strip
   Hairline-ruled monospace metadata. Each cell is a measured fact.
   -------------------------------------------------------------------------- */

.specimen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0;
  border-block: 1px solid var(--trace);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}

.specimen__cell {
  padding: var(--space-xs) var(--space-s) var(--space-xs) 0;
  border-inline-end: 1px solid var(--trace);
  min-width: 0;
}
.specimen__cell:last-child { border-inline-end: 0; }
.specimen__cell + .specimen__cell { padding-inline-start: var(--space-s); }

.specimen__key {
  display: block;
  color: var(--mineral);
  font-size: 0.85em;
  margin-block-end: var(--space-3xs);
}

.specimen__val {
  display: block;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 1.05em;
}

/* Compact variant for product cards. */
.specimen--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  border: 0;
  border-block-start: 1px solid var(--trace);
  padding-block-start: var(--space-2xs);
}
.specimen--inline .specimen__cell {
  border: 0; padding: 0;
  display: flex; gap: 0.4em; align-items: baseline;
}
.specimen--inline .specimen__key { margin: 0; }

/* --------------------------------------------------------------------------
   5. Eyebrow / rule / section heading
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mineral);
  margin: 0 0 var(--space-s);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 1px;
  background: var(--meniscus);
  flex: none;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-m);
  margin-block-end: var(--space-xl);
}
.section-head p { color: var(--mineral); max-width: 42ch; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.95em 1.9em;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--glass);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--meniscus);
  border-color: var(--meniscus);
  color: var(--paper);
}

.btn--ghost,
.woocommerce a.button.alt--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--glass); }

.btn--block { width: 100%; }

/* WooCommerce's `.alt` button ships a hard-coded purple (#7f54b3) at a
   specificity our base rule doesn't beat, which is why Add to Cart rendered
   purple. Match its selector weight and take it back. */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button.button.alt {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--glass);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1.05em 2em;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button.button.alt:hover {
  background: var(--meniscus);
  border-color: var(--meniscus);
  color: #fff;
}

/* The add-to-cart form is Woo's markup; make it lay out like ours. */
.woocommerce form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: stretch;
  margin-block: var(--space-m);
}
.woocommerce form.cart .quantity { flex: none; }
.woocommerce form.cart .single_add_to_cart_button { flex: 1 1 14rem; }

.btn[disabled], .woocommerce button.button:disabled {
  opacity: 0.4; cursor: not-allowed;
}

/* Text link with an animated rule — the one recurring micro-interaction. */
.link-rule {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block-end: 0.35em;
  border-block-end: 1px solid var(--trace);
  transition: border-color var(--dur-fast) var(--ease);
}
.link-rule:hover { border-block-end-color: var(--meniscus); }
.link-rule::after { content: "\2192"; transition: transform var(--dur-fast) var(--ease); }
.link-rule:hover::after { transform: translateX(0.25em); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--glass) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-block-end: 1px solid var(--trace);
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m);
  min-height: 4.5rem;
}

.site-brand {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  text-decoration: none;
  line-height: 1;
  flex: none;
}
.site-brand em { font-style: italic; color: var(--meniscus); }

/* Image logo. The supplied file is 3:2 with generous internal padding, so it
   is sized by height and allowed to find its own width. */
.site-brand--image { display: block; line-height: 0; }
.site-brand--image img,
.custom-logo {
  height: clamp(3.2rem, 2.4rem + 2.4vw, 4.6rem);
  width: auto;
  max-width: min(70vw, 22rem);
  object-fit: contain;
}

/* WordPress's own custom-logo markup, if one is set in the Customizer. */
.custom-logo-link { display: block; line-height: 0; }

/* The header has to grow to hold a larger mark without cropping it. */
.site-header__inner { min-height: 5.75rem; }

/* On the dark footer the navy half of the mark disappears, so lift it. */
.site-footer .site-brand--image img,
.site-footer .custom-logo {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.primary-nav ul {
  display: flex; gap: var(--space-m);
  list-style: none; margin: 0; padding: 0;
}
.primary-nav a {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.4em;
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a { border-block-end-color: var(--meniscus); }

/* --------------------------------------------------------------------------
   Dropdowns.
   Both halves of the catalogue now hang off the nav — skincare and
   supplements — so the menu is two levels deep. It was styled flat before,
   which is part of why twelve products were invisible.
   -------------------------------------------------------------------------- */

.primary-nav li { position: relative; }

.primary-nav .sub-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 20;
  min-width: 15rem;
  margin: 0;
  padding: var(--space-s) 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--trace);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -28px var(--ink-08);

  /* Hidden without display:none, so it stays in the accessibility tree and
     can transition. visibility is what keeps it out of tab order. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast);
}

/* Open on hover AND on keyboard focus anywhere inside — a hover-only menu is
   unusable without a mouse. */
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.primary-nav .sub-menu a {
  display: block;
  padding: var(--space-2xs) var(--space-m);
  border-block-end: 0;
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--mineral);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu a:focus-visible {
  color: var(--ink);
  background: var(--meniscus-10);
}

/* A parent with children gets an affordance. */
.primary-nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0.36em;
  height: 0.36em;
  margin-inline-start: 0.5em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
}

@media (max-width: 60rem) {
  /* On mobile the panel already scrolls, so nesting inline is simpler and
     more reliable than a floating dropdown. */
  .primary-nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: var(--space-2xs) 0 var(--space-s) var(--space-m);
    background: transparent;
    border: 0;
    box-shadow: none;
    border-inline-start: 1px solid var(--trace);
    margin-inline-start: var(--space-2xs);
  }
  .primary-nav .sub-menu a { font-size: var(--step-0); padding-inline: 0; }
  .primary-nav .menu-item-has-children > a::after { display: none; }
}

.header-tools { display: flex; align-items: center; gap: var(--space-s); flex: none; }

.cart-link {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
}
.cart-link__count {
  display: inline-grid; place-items: center;
  min-width: 1.5em; height: 1.5em; padding-inline: 0.35em;
  background: var(--meniscus); color: var(--paper);
  border-radius: 999px; font-size: 0.85em; line-height: 1;
}

.nav-toggle {
  display: none;
  background: none; border: 0; padding: var(--space-2xs);
  cursor: pointer;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.08em; text-transform: uppercase;
}

@media (max-width: 60rem) {
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.5em; }
  .primary-nav {
    position: fixed; inset: 4.5rem 0 auto;
    background: var(--glass);
    border-block-end: 1px solid var(--trace);
    padding: var(--space-m) var(--gutter) var(--space-xl);
    transform: translateY(-120%);
    transition: transform var(--dur) var(--ease);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
  }
  .primary-nav[data-open="true"] { transform: translateY(0); }
  .primary-nav ul { flex-direction: column; gap: var(--space-s); }
  .primary-nav a { font-size: var(--step-1); }
}

/* --------------------------------------------------------------------------
   8. Hero — the thesis. Product at scale, claim stated plainly.
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-block: var(--space-2xl) var(--space-2xl);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--space-3xl);
    padding-block: var(--space-3xl);
  }
}

.hero__title {
  font-size: var(--step-6);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.hero__title em { font-style: italic; color: var(--meniscus); }

.hero__lede {
  font-size: var(--step-1);
  color: var(--mineral);
  max-width: 38ch;
  margin-block: var(--space-m) var(--space-l);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }

.hero__figure {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper);
  overflow: hidden;
}
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   9. Product grid & card
   -------------------------------------------------------------------------- */

.product-grid,
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-l) var(--space-m);
  list-style: none; margin: 0; padding: 0;
}

.woocommerce ul.products li.product { margin: 0; width: auto; float: none; }

.product-card { display: flex; flex-direction: column; height: 100%; }

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper);
  overflow: hidden;
  margin-block-end: var(--space-s);
}

.product-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* Second image crossfade — genuinely useful here: products carry 6–19 shots. */
.product-card__media img.is-alt { opacity: 0; }
.product-card:hover .product-card__media img.is-primary { opacity: 0; }
.product-card:hover .product-card__media img.is-alt { opacity: 1; }
.product-card:hover .product-card__media img { transform: scale(1.03); }

.product-card__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.15;
  margin: 0 0 var(--space-3xs);
}
.product-card__title a { text-decoration: none; }
.product-card__title a::after { content: ""; position: absolute; inset: 0; }

.product-card { position: relative; }

.product-card__price {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--mineral);
  letter-spacing: 0.03em;
}

.product-card__foot { margin-block-start: auto; padding-block-start: var(--space-2xs); }

/* WooCommerce writes its own price markup; align it to ours. */
.woocommerce .price {
  font-family: var(--font-mono);
  color: var(--ink);
  font-size: var(--step--1);
  letter-spacing: 0.03em;
}
.woocommerce .price del { color: var(--mineral); opacity: 1; margin-inline-end: 0.5em; }
.woocommerce .price ins { text-decoration: none; color: var(--meniscus); }

/* --------------------------------------------------------------------------
   10. Single product
   -------------------------------------------------------------------------- */

.product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-block: var(--space-xl);
}

@media (min-width: 62rem) {
  .product-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-3xl);
    align-items: start;
  }
  .product-layout__summary { position: sticky; top: 6rem; }
}

/* Gallery */
.product-gallery { display: grid; gap: var(--space-2xs); }

.product-gallery__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper);
  overflow: hidden;
  cursor: zoom-in;
}
.product-gallery__stage img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur) var(--ease);
}
/* Zoom on hover (pointer devices only — meaningless on touch). */
@media (hover: hover) and (pointer: fine) {
  .product-gallery__stage:hover img { transform: scale(1.6); }
  .product-gallery__stage { transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); }
  .product-gallery__stage:hover img { transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); }
}

.product-gallery__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 4.5rem;
  gap: var(--space-2xs);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-block-end: var(--space-3xs);
}
.product-gallery__thumb {
  aspect-ratio: 1; padding: 0; border: 1px solid var(--trace);
  background: var(--paper); cursor: pointer; overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease);
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumb[aria-current="true"] { border-color: var(--meniscus); }

/* Summary */
.product-summary__title { font-size: var(--step-4); margin-block-end: var(--space-s); }

.product-summary__price {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: 0.02em;
  margin-block: var(--space-s);
}

.product-summary__excerpt { color: var(--mineral); margin-block-end: var(--space-m); }

.product-summary .specimen { margin-block: var(--space-m); }

/* Concern / skin-type tags, pulled from product attributes so they're filterable. */
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-block: var(--space-m); }
.tag {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.4em 0.8em;
  border: 1px solid var(--trace); border-radius: 999px;
  color: var(--mineral); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tag:hover { border-color: var(--meniscus); color: var(--meniscus); }

/* Buy box */
.buy-box { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: stretch; }
.buy-box .quantity { flex: none; }
.buy-box .btn { flex: 1 1 12rem; }

.woocommerce .quantity .qty {
  width: 4.5rem; height: 100%; min-height: 3rem;
  padding: 0 0.5em; text-align: center;
  font-family: var(--font-mono);
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: transparent;
}

/* Trust signals — only claims the product data actually supports. */
.trust-list {
  list-style: none; margin: var(--space-m) 0 0; padding: var(--space-m) 0 0;
  border-block-start: 1px solid var(--trace);
  display: grid; gap: var(--space-2xs);
  font-size: var(--step--1); color: var(--mineral);
}
.trust-list li { display: flex; gap: var(--space-2xs); align-items: baseline; }
.trust-list li::before { content: "\2014"; color: var(--meniscus); flex: none; }

/* Cosmetic-not-drug disclaimer. Deliberately plain, never hidden in small print. */
.disclaimer {
  margin-block-start: var(--space-m);
  padding: var(--space-s);
  border-inline-start: 2px solid var(--meniscus);
  background: var(--meniscus-10);
  font-size: var(--step--1);
  color: var(--ink);
}
.disclaimer strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   11. Sticky add-to-cart bar
   -------------------------------------------------------------------------- */

.sticky-atc {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-block-start: 1px solid var(--trace);
  transform: translateY(105%);
  transition: transform var(--dur) var(--ease);
  padding-block: var(--space-2xs);
  padding-block-end: max(var(--space-2xs), env(safe-area-inset-bottom));
}
.sticky-atc[data-visible="true"] { transform: translateY(0); }

.sticky-atc__inner {
  display: flex; align-items: center; gap: var(--space-s);
  min-height: 3.5rem;
}
.sticky-atc__thumb { width: 2.75rem; height: 2.75rem; object-fit: cover; flex: none; }
.sticky-atc__meta { min-width: 0; flex: 1; }
.sticky-atc__name {
  font-family: var(--font-display); font-size: var(--step-0); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sticky-atc__price { font-family: var(--font-mono); font-size: var(--step--1); color: var(--mineral); }
.sticky-atc .btn { flex: none; }

@media (max-width: 30rem) {
  .sticky-atc__thumb, .sticky-atc__price { display: none; }
  .sticky-atc .btn { padding-inline: 1.2em; }
}

/* --------------------------------------------------------------------------
   12. Detail sections — ingredients, how to use, FAQ
   -------------------------------------------------------------------------- */

.detail-block + .detail-block { margin-block-start: var(--space-xl); }

.detail-block__title {
  font-size: var(--step-2);
  padding-block-end: var(--space-s);
  border-block-end: 1px solid var(--trace);
  margin-block-end: var(--space-m);
}

/* Ingredients — formatted for scanning, not a wall of INCI. */
.ingredient-list { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.ingredient {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-s);
  align-items: baseline;
  padding-block: var(--space-xs);
  border-block-end: 1px solid var(--trace);
}
.ingredient__name { font-weight: 500; }
.ingredient__role { color: var(--mineral); font-size: var(--step--1); grid-column: 1; }
.ingredient__amount {
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--meniscus); white-space: nowrap; grid-row: 1;
}

.inci {
  font-size: var(--step--1); color: var(--mineral);
  margin-block-start: var(--space-m); line-height: 1.7;
  max-width: none;
}

/* How to use — a real sequence, so numbering carries information. */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--space-m); }
.step { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-s); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--meniscus); letter-spacing: 0.06em;
  padding-block-start: 0.25em;
}
.step__title { font-weight: 600; margin-block-end: var(--space-3xs); }
.step__body { color: var(--mineral); margin: 0; }

/* FAQ accordion — native <details>, so it works without JS and is accessible. */
.faq { display: grid; gap: 0; }
.faq__item { border-block-end: 1px solid var(--trace); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
  padding-block: var(--space-m);
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; font-family: var(--font-mono); color: var(--meniscus);
  font-size: var(--step-1); flex: none;
  transition: transform var(--dur-fast) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding-block-end: var(--space-m); color: var(--mineral); }

/* --------------------------------------------------------------------------
   13. Shop archive & filters
   -------------------------------------------------------------------------- */

.shop-head { padding-block: var(--space-xl) var(--space-l); }
.shop-head h1 { font-size: var(--step-5); }
.shop-head__desc { color: var(--mineral); margin-block-start: var(--space-s); }

.shop-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
@media (min-width: 62rem) {
  .shop-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-2xl); }
  .shop-filters { position: sticky; top: 6rem; align-self: start; }
}

.filter-group + .filter-group { margin-block-start: var(--space-l); }
.filter-group__title {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mineral);
  padding-block-end: var(--space-2xs);
  border-block-end: 1px solid var(--trace);
  margin-block-end: var(--space-s);
}
.filter-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.filter-group a { text-decoration: none; font-size: var(--step--1); color: var(--mineral); }
.filter-group a:hover, .filter-group .is-active a { color: var(--meniscus); }
.filter-group .count { font-family: var(--font-mono); font-size: 0.85em; opacity: 0.7; }

.woocommerce-result-count {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--mineral);
}
.woocommerce-ordering select {
  font-family: var(--font-mono); font-size: var(--step--1);
  padding: 0.5em 0.75em; background: transparent;
  border: 1px solid var(--trace); border-radius: var(--radius);
}

.shop-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-s);
  padding-block-end: var(--space-m);
  border-block-end: 1px solid var(--trace);
  margin-block-end: var(--space-l);
}

/* --------------------------------------------------------------------------
   14. Editorial / blog
   -------------------------------------------------------------------------- */

.article-head { padding-block: var(--space-2xl) var(--space-l); }
.article-head h1 { font-size: var(--step-5); max-width: 20ch; }
.article-meta {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mineral);
  margin-block-start: var(--space-m);
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: var(--space-m); }
.prose h2 { font-size: var(--step-3); margin-block-start: var(--space-xl); }
.prose h3 { font-size: var(--step-1); margin-block-start: var(--space-l); }
.prose blockquote {
  margin: var(--space-l) 0; padding-inline-start: var(--space-m);
  border-inline-start: 2px solid var(--meniscus);
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3;
}
.prose img { margin-block: var(--space-l); }
.prose figcaption {
  font-family: var(--font-mono); font-size: var(--step--2);
  color: var(--mineral); margin-block-start: var(--space-2xs);
}

/* The answer-first block: AI crawlers and skimmers both read this. */
.answer-first {
  padding: var(--space-m);
  background: var(--paper);
  border-inline-start: 2px solid var(--meniscus);
  margin-block: var(--space-m);
}
.answer-first p { margin: 0; }

.post-card__title { font-size: var(--step-2); margin-block: var(--space-2xs); }
.post-card__title a { text-decoration: none; }
.post-card__excerpt { color: var(--mineral); font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--glass);
  padding-block: var(--space-2xl) var(--space-l);
  margin-block-start: var(--space-3xl);
}
.site-footer a { color: inherit; text-decoration: none; opacity: 0.75; }
.site-footer a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--meniscus); }

/* Top block: brand statement beside a single clear action. */
.footer-top {
  display: grid;
  gap: var(--space-xl);
  padding-block-end: var(--space-xl);
  margin-block-end: var(--space-xl);
  border-block-end: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 52rem) {
  .footer-top { grid-template-columns: 1.4fr 1fr; align-items: start; gap: var(--space-3xl); }
  .footer-cta { justify-self: end; text-align: end; max-width: 24rem; }
  .footer-cta .footer-blurb { margin-inline-start: auto; }
}
.footer-cta .btn { background: var(--meniscus); border-color: var(--meniscus); color: #fff; }
.footer-cta .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }

.footer-grid {
  display: grid; gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
@media (min-width: 52rem) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) 1.5fr; }
}

/* Real product shots, so the footer isn't a wall of links. */
.footer-shots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xs);
  max-width: 22rem;
}
.footer-shots a {
  display: block; overflow: hidden; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  aspect-ratio: 1;
}
.footer-shots img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.78;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.footer-shots a:hover img { opacity: 1; transform: scale(1.06); }

.footer-brand { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; }
.site-footer .site-brand--image img,
.site-footer .custom-logo { height: clamp(2.8rem, 2.2rem + 1.6vw, 3.6rem); }
.footer-brand em { font-style: italic; color: var(--trace); }
.footer-blurb {
  color: #8CA3B5; font-size: var(--step-0); line-height: 1.65;
  margin-block-start: var(--space-m); max-width: 42ch;
}

.footer-col__title {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--meniscus); margin-block-end: var(--space-m);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.footer-col a { font-size: var(--step-0); }
.footer-col a:hover { color: #fff; }

.footer-base__note { color: var(--mineral); }

.footer-base {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; gap: var(--space-s);
  justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.06em; color: var(--mineral);
}

/* --------------------------------------------------------------------------
   16. WooCommerce chrome — restyled, native flow kept intact
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-block-start: 2px solid var(--meniscus);
  background: var(--paper);
  padding: var(--space-m);
  margin-block-end: var(--space-l);
  list-style: none;
  font-size: var(--step--1);
}
.woocommerce-error { border-block-start-color: #A8452F; }

.woocommerce-breadcrumb {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mineral); padding-block: var(--space-m);
}
.woocommerce-breadcrumb a { text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--meniscus); }

.woocommerce table.shop_table {
  border: 0; border-collapse: collapse; width: 100%;
}
.woocommerce table.shop_table th {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mineral);
  text-align: start; padding: var(--space-s) var(--space-s) var(--space-s) 0;
  border-block-end: 1px solid var(--trace);
}
.woocommerce table.shop_table td {
  padding: var(--space-m) var(--space-s) var(--space-m) 0;
  border-block-end: 1px solid var(--trace);
}

.woocommerce form .form-row { margin-block-end: var(--space-m); }
.woocommerce form .form-row label {
  display: block; font-family: var(--font-mono);
  font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mineral); margin-block-end: var(--space-2xs);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%; padding: 0.8em 0.9em;
  border: 1px solid var(--trace); border-radius: var(--radius);
  background: var(--paper);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--meniscus); }

.woocommerce #reviews .comment_container {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-m);
  padding-block: var(--space-m); border-block-end: 1px solid var(--trace);
}
.woocommerce .star-rating span { color: var(--meniscus); }

/* WooCommerce default product grids we don't template ourselves. */
.woocommerce ul.products li.product a img { margin-block-end: var(--space-s); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display); font-size: var(--step-1);
  font-weight: 400; padding: 0; margin-block-end: var(--space-3xs);
}

/* --------------------------------------------------------------------------
   17. Motion — one reveal, respected preference
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .product-gallery__stage:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   18. Print — an ingredient list is a thing people actually print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .sticky-atc, .product-gallery__thumbs { display: none; }
  body { background: #fff; }
}