/*
 * NMChem Child Theme - Main Stylesheet
 * Loaded via wp_enqueue_style in functions.php as 'nmchem-style'.
 * Do not treat this file as the WordPress theme stylesheet (that role belongs to /style.css).
 */

:root{
  --bg:#fafaf7; --surface:#ffffff; --surface-2:#f4f3ee; --surface-3:#ebeae3;
  --line:#e2e0d6; --line-2:#cfccbd;
  --ink:#1b1d1a; --ink-2:#4a4d45; --ink-3:#80847a;
  --brand:#1d4e3f; --brand-2:#163c31; --brand-soft:#e6efe9;
  --accent:#a8843a; --danger:#9b2b2b; --danger-soft:#f7eaea; --ok:#2f6b46;
  --radius:4px; --radius-lg:8px;
  --shadow-sm:0 1px 2px rgba(20,22,18,.05);
  --shadow-md:0 6px 24px -8px rgba(20,22,18,.18);
  --font:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-serif:"Source Serif 4",Georgia,serif;
  --h-top:32px; --h-header:72px;

  /* Typographic scale */
  --fs-xs:0.75rem;
  --fs-sm:0.8125rem;
  --fs-base:0.9375rem;
  --fs-md:1rem;
  --fs-lg:1.125rem;
  --fs-xl:1.375rem;
  --fs-2xl:1.75rem;
  --fs-3xl:2.25rem;
  --fs-4xl:3rem;

  /* Spacing tokens */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:32px;
  --sp-8:40px;
  --sp-9:48px;
  --sp-10:56px;
  --sp-11:64px;
  --sp-12:80px;
  --sp-13:96px;
  --sp-14:112px;
  --sp-15:128px;
  --sp-16:160px;

  /* Component-specific */
  --container:1240px;
  --container-narrow:880px;
  --transition:160ms cubic-bezier(.2,.6,.2,1);
  --transition-slow:280ms cubic-bezier(.2,.6,.2,1);
  --focus-ring:0 0 0 3px rgba(29,78,63,.28);
  --pip-bg:var(--brand);
  --pip-ink:#fff;
}
[data-theme="dark"]{
  --bg:#121311; --surface:#1c1d1a; --surface-2:#242521; --surface-3:#2c2e29;
  --line:#2e2f2b; --line-2:#3c3f3a;
  --ink:#e8e8e3; --ink-2:#b9b7ac; --ink-3:#9a9a8e;
  --brand:#2d6e59; --brand-2:#3a8a70; --brand-soft:#1b2c25;
  --accent:#d4af6a; --danger:#d87373; --danger-soft:#2b1a1a; --ok:#7ecfb3;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 10px 30px -8px rgba(0,0,0,.6);
  --focus-ring:0 0 0 3px rgba(126,207,179,.32);
  --pip-bg:#7ecfb3;
  --pip-ink:#0d0f0d;
  /* Dark-mode link palette — never browser default blue */
  --color-link:#7ecfb3;
  --color-link-hover:#a8e4cc;
  --btn-bg:#2d6e59;
  --btn-bg-hover:#3a8a70;
  --btn-ink:#fafaf7;
}

/* ===== Dark mode hard overrides — kill any browser-default link blue ===== */
[data-theme="dark"] a{ color:var(--color-link); }
[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus{ color:var(--color-link-hover); }
[data-theme="dark"] a:visited{ color:var(--color-link); }
[data-theme="dark"] a:active{ color:var(--color-link-hover); }

/* Body, headings, paragraphs explicit in dark */
[data-theme="dark"] body{ background:var(--bg); color:var(--ink); }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6{ color:var(--ink); }

/* Buttons — make sure no element falls through to default */
[data-theme="dark"] .btn,
[data-theme="dark"] button.btn,
[data-theme="dark"] a.btn{
  background:var(--brand); color:var(--btn-ink); border-color:transparent;
}
[data-theme="dark"] .btn:hover,
[data-theme="dark"] a.btn:hover{ background:var(--brand-2); color:#fff; }
[data-theme="dark"] .btn--ghost{
  background:transparent; color:var(--color-link); border-color:var(--line-2);
}
[data-theme="dark"] .btn--ghost:hover{
  background:var(--brand-soft); color:var(--color-link-hover); border-color:var(--brand);
}
[data-theme="dark"] .btn--accent{ background:var(--accent); color:#1b1d1a; }
[data-theme="dark"] .btn--accent:hover{ background:#b8924a; color:#0d0f0d; }

/* Form fields, inputs — never default */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select{
  background:var(--surface-2); color:var(--ink); border-color:var(--line);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{ color:var(--ink-3); }
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus{ border-color:var(--brand); box-shadow:var(--focus-ring); }

/* Code, pre, mark */
[data-theme="dark"] code,[data-theme="dark"] pre,[data-theme="dark"] kbd{
  background:var(--surface-2); color:var(--ink); border-color:var(--line);
}
[data-theme="dark"] mark{ background:#3a3a25; color:var(--ink); }

/* WooCommerce + Storefront stubborn overrides */
[data-theme="dark"] .woocommerce a,
[data-theme="dark"] .woocommerce-breadcrumb a,
[data-theme="dark"] .woocommerce-page a{ color:var(--color-link); }
[data-theme="dark"] .woocommerce a:hover,
[data-theme="dark"] .woocommerce-breadcrumb a:hover{ color:var(--color-link-hover) !important; }
[data-theme="dark"] .woocommerce-message,
[data-theme="dark"] .woocommerce-info{
  background:var(--surface-2) !important; color:var(--ink) !important;
  border-top-color:var(--brand) !important;
}
[data-theme="dark"] .woocommerce-error{
  background:var(--danger-soft) !important; color:var(--ink) !important;
  border-top-color:var(--danger) !important;
}
[data-theme="dark"] .price del{ color:var(--ink-3); }
[data-theme="dark"] .price ins{ color:var(--color-link); text-decoration:none; }
[data-theme="dark"] .stock{ color:var(--ink-2); }
[data-theme="dark"] .stock.is-out{ color:var(--danger); }
[data-theme="dark"] .stock.is-low{ color:var(--accent); }

/* Cards, surfaces */
[data-theme="dark"] .card,
[data-theme="dark"] .nmchem-product,
[data-theme="dark"] .value-card,
[data-theme="dark"] .team-card,
[data-theme="dark"] .quality-stat,
[data-theme="dark"] .nm-faq__item,
[data-theme="dark"] .gate-card,
[data-theme="dark"] .drawer,
[data-theme="dark"] .mobile-nav,
[data-theme="dark"] .product-spec-table{
  background:var(--surface); border-color:var(--line); color:var(--ink);
}

/* Topbar in dark mode — already dark, keep contrast */
[data-theme="dark"] .topbar{ background:#0d1612; color:#cfdcd3; }
[data-theme="dark"] .topbar__nav a{ color:#a8c4b6; }
[data-theme="dark"] .topbar__nav a:hover{ color:#fff; }
[data-theme="dark"] #themeBtn{ color:#a8c4b6; border-color:rgba(255,255,255,.14); }
[data-theme="dark"] #themeBtn:hover{ color:#fff; border-color:rgba(255,255,255,.32); }

/* Footer */
[data-theme="dark"] .site-footer{ background:var(--surface) !important; }
[data-theme="dark"] .site-footer a{ color:var(--ink-2) !important; }
[data-theme="dark"] .site-footer a:hover{ color:var(--color-link-hover) !important; }

/* Primary nav */
[data-theme="dark"] .primary-nav a{ color:var(--ink-2); }
[data-theme="dark"] .primary-nav a:hover{ color:var(--color-link); background:var(--brand-soft); }
[data-theme="dark"] .primary-nav .current-menu-item > a{ color:var(--color-link); }

/* Selection */
[data-theme="dark"] ::selection{ background:var(--brand); color:#fff; }

/* ===== Reset & base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light;scrollbar-gutter:stable}
[data-theme="dark"]{color-scheme:dark}
/* No overflow-x:hidden on html — it would make html the scrolling container,
   shifting the initial containing block used by position:fixed and clipping
   the cart drawer on long pages. The header overflow that originally caused
   horizontal scrolling has been eliminated structurally (search relocated). */
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--brand-2)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0 0 .6em}
h1{font-size:var(--fs-3xl);line-height:1.15}
h2{font-size:var(--fs-2xl);line-height:1.2}
h3{font-size:var(--fs-xl);line-height:1.3}
p{margin:0 0 1em}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius)}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-7) 0}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--sp-6)}

/* ===== Tap-highlight reset for interactive elements ===== */
button,a,input,select,textarea{-webkit-tap-highlight-color:rgba(29,78,63,.12)}

/* ============================================================
   Z-index map — all fixed/sticky/floating layers in one place.
   Anything new should slot into this scale, not invent its own.

     50  — sticky cat-strip below header
     90  — mobile bottom nav
    100  — site header (sticky), sticky add-to-cart on product page
    110  — header tooltip (cart-tip, after header)
    120  — search dropdown (above header sticky context)
    200  — (reserved, currently unused)
    299  — drawer overlay
    300  — drawers (cart drawer, mobile nav drawer)
    400  — toast
    9999 — skip link (focused state)
   ============================================================ */

/* ===== Skip link ===== */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--brand);color:#fff;padding:10px 16px;
  border-radius:var(--radius);font-weight:600;font-size:var(--fs-sm);
  text-decoration:none;
  box-shadow:var(--shadow-md);
}
.skip-link:focus,.skip-link:focus-visible{left:8px;top:8px;color:#fff;outline:2px solid #fff;outline-offset:2px}

/* ===== Reading progress ===== */
.reading-progress,#readingProgress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  z-index:99;transition:width 80ms linear;pointer-events:none;
}
body:not(.nmchem-single-product):not(.nmchem-page) #readingProgress{display:none}

/* ===== Topbar ===== */
.topbar{
  background:var(--brand-2);
  color:#e7efe9;
  font-size:var(--fs-xs);
  height:var(--h-top);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.topbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:100%;gap:var(--sp-5);
}
.topbar__msg{display:flex;align-items:center;gap:var(--sp-2);font-weight:500;letter-spacing:.01em}
.topbar__dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(168,132,58,.6);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(168,132,58,.5)}
  50%{box-shadow:0 0 0 6px rgba(168,132,58,0)}
}
.topbar__nav{display:flex;align-items:center;gap:var(--sp-5)}
.topbar__nav a{color:#cfdcd3;text-decoration:none;font-size:var(--fs-xs);transition:color var(--transition)}
.topbar__nav a:hover{color:#fff}
#themeBtn{
  background:transparent;border:1px solid rgba(255,255,255,.18);
  color:#cfdcd3;padding:4px 10px;border-radius:var(--radius);
  font-size:var(--fs-xs);transition:all var(--transition);
  display:inline-flex;align-items:center;gap:6px;
}
#themeBtn:hover{border-color:rgba(255,255,255,.4);color:#fff}

/* ===== Site header ===== */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:100;
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
}
[data-theme="dark"] .site-header{background:rgba(26,28,24,.92)}
.site-header__inner{
  display:flex;align-items:center;gap:var(--sp-6);
  height:var(--h-header);
}

/* ===== Hamburger ===== */
.hamburger,#navOpen{
  display:none;
  background:transparent;border:0;padding:8px;
  width:40px;height:40px;min-width:40px;flex-shrink:0;
  border-radius:var(--radius);
  align-items:center;justify-content:center;
  color:var(--ink);transition:background var(--transition);
}
.hamburger:hover,#navOpen:hover{background:var(--surface-2)}
.hamburger span,#navOpen span{
  display:block;width:22px;height:2px;background:currentColor;
  position:relative;border-radius:1px;flex-shrink:0;
}
.hamburger span::before,.hamburger span::after,
#navOpen span::before,#navOpen span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;border-radius:1px;
}
.hamburger span::before,#navOpen span::before{top:-7px}
.hamburger span::after,#navOpen span::after{top:7px}
/* The hamburger uses three direct child <span> elements (no pseudo-elements).
   Stack them with flex so they never collapse or stretch under flex parents. */
.hamburger,#navOpen{
  flex-direction:column;gap:5px;
}
.hamburger > span,#navOpen > span{
  width:22px;height:2px;background:currentColor;
  border-radius:1px;display:block;flex:0 0 auto;
  position:static;
  transition:transform var(--transition),opacity var(--transition);
  transform-origin:center;
}
body.nav-open #navOpen > span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open #navOpen > span:nth-child(2){opacity:0;transform:scaleX(0)}
body.nav-open #navOpen > span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hamburger > span::before,.hamburger > span::after,
#navOpen > span::before,#navOpen > span::after{
  content:none;display:none;
}

/* ===== Branding / logo ===== */
.site-branding{display:flex;align-items:center;flex-shrink:0}
.site-logo{display:flex;align-items:center;gap:var(--sp-3);color:var(--ink)}
.site-logo:hover{color:var(--ink)}
.site-logo__mark{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-weight:700;font-size:1.05rem;
  box-shadow:var(--shadow-sm);
  flex-shrink:0;overflow:hidden;
}
.site-logo__mark svg{display:block;width:100%;height:100%}
/* Subtle dark-mode tint on the inner background of the brand mark so it doesn't
   look like a stark white tile against the dark surface. */
[data-theme="dark"] .site-logo__mark svg rect{fill:#e8e8e3}
.site-logo__word{display:flex;flex-direction:column;line-height:1}
.site-logo__name{
  font-family:var(--font-serif);font-weight:600;font-size:1.15rem;
  letter-spacing:-.01em;color:var(--ink);
}
.site-logo__tag{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-top:3px;font-weight:500;
}

/* ===== Primary nav ===== */
.primary-nav{flex:1;display:flex;justify-content:center}
.primary-nav ul,.primary-menu{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:var(--sp-2);
}
.primary-nav li{position:relative}
.primary-nav a{
  display:block;padding:10px 14px;
  color:var(--ink-2);font-size:var(--fs-sm);font-weight:500;
  border-radius:var(--radius);transition:all var(--transition);
  letter-spacing:.005em;
}
.primary-nav a:hover{color:var(--brand);background:var(--brand-soft)}
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{
  color:var(--brand);font-weight:600;
}
.primary-nav .sub-menu{
  position:absolute;top:100%;left:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--sp-2);
  min-width:220px;box-shadow:var(--shadow-md);
  display:none;list-style:none;margin:4px 0 0;
  z-index:50;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu{display:block}
.primary-nav .sub-menu a{padding:8px 12px}

/* ===== Header tools ===== */
.header-tools{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0;margin-left:auto}
/* ===== WooCommerce My Account — login / register cards ===== */
.woocommerce-account #customer_login.u-columns,
.woocommerce-account .u-columns#customer_login{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-7);margin:0;
}
@media (max-width:768px){
  .woocommerce-account #customer_login.u-columns{grid-template-columns:1fr;gap:var(--sp-5)}
}
.woocommerce-account .u-column1,
.woocommerce-account .u-column2{
  width:auto !important;float:none !important;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--sp-6);
}
.woocommerce-account #customer_login h2{
  font-family:var(--font-serif);font-size:var(--fs-xl);
  margin:0 0 var(--sp-4);font-weight:600;color:var(--ink);
}
.woocommerce form .form-row,
.woocommerce-page form .form-row{
  display:flex;flex-direction:column;gap:6px;margin:0 0 var(--sp-4);padding:0;
}
.woocommerce form .form-row label,
.woocommerce-page form .form-row label{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin:0;
}
.woocommerce form .form-row input.input-text,
.woocommerce-page form .form-row input.input-text{
  width:100%;padding:12px 14px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--ink);
  font-family:inherit;font-size:var(--fs-base);
  -webkit-appearance:none;appearance:none;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-page form .form-row input.input-text:focus{
  outline:0;border-color:var(--brand);background:var(--surface);
  box-shadow:var(--focus-ring);
}
.woocommerce form button.button,
.woocommerce-page form button.button,
.woocommerce form .button[type="submit"]{
  background:var(--brand);color:#fff;border:0;
  padding:11px 20px;border-radius:var(--radius);
  font-size:var(--fs-sm);font-weight:600;
  cursor:pointer;transition:background var(--transition);
}
.woocommerce form button.button:hover{background:var(--brand-2);color:#fff}
.woocommerce-LostPassword{margin-top:var(--sp-3);font-size:var(--fs-xs)}
.woocommerce-LostPassword a{color:var(--brand)}
.woocommerce-form-login__rememberme{font-size:var(--fs-xs);color:var(--ink-2);margin:6px 0}
.woocommerce-privacy-policy-text{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.55;margin:var(--sp-3) 0}
[data-theme="dark"] .woocommerce-account .u-column1,
[data-theme="dark"] .woocommerce-account .u-column2{background:var(--surface-2)}

/* ===== Shop archive search (relocated from header) ===== */
.shop-search{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:999px;padding:6px 14px;
  transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);
  flex:1 1 240px;max-width:360px;min-width:0;
  position:relative;
}
.shop-search:hover{border-color:var(--line-2)}
.shop-search:focus-within{
  border-color:var(--brand);
  box-shadow:var(--focus-ring);
}
.shop-search__icon{flex-shrink:0;color:var(--ink-3);width:16px;height:16px}
.shop-search:focus-within .shop-search__icon{color:var(--brand)}
.shop-search input{
  flex:1;min-width:0;
  background:transparent;border:0;outline:0;
  font-size:var(--fs-sm);color:var(--ink);
  font-family:inherit;
  padding:4px 0;
  -webkit-appearance:none;appearance:none;
}
.shop-search input::-webkit-search-decoration,
.shop-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.shop-search input::placeholder{color:var(--ink-3);opacity:1}
[data-theme="dark"] .shop-search{background:var(--surface-2)}
[data-theme="dark"] .shop-search input{
  background:transparent !important;color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink);
}
[data-theme="dark"] .shop-search input::placeholder{color:var(--ink-3) !important;opacity:1}

.header-account,.header-cart{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--radius);
  color:var(--ink-2);background:transparent;border:0;
  position:relative;transition:background var(--transition),color var(--transition),border-color var(--transition);
  -webkit-tap-highlight-color:transparent;
}
/* Wrapper that anchors the cart-pip to the icon (not the whole button). */
.header-cart__icon-wrap{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
}
.header-cart__label{display:none}
@media (min-width:769px){
  .header-cart{
    width:auto;min-width:44px;height:42px;
    padding:0 16px 0 14px;gap:8px;
    border:1.5px solid var(--brand);
    background:var(--surface);
    color:var(--brand);
  }
  .header-cart:hover{
    background:var(--brand);
    color:#fff;
    border-color:var(--brand);
  }
  .header-cart .cart-pip{border-color:var(--surface);background:var(--brand);color:#fff}
  .header-cart:hover .cart-pip{background:#fff;color:var(--brand);border-color:var(--brand)}
  .header-cart__label{
    display:inline-block;
    font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;
    color:inherit;line-height:1;text-transform:uppercase;
  }
}
/* Tooltip — hidden by default, only revealed on desktop hover/focus. */
.header-cart__tip{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--ink);color:#fff;
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.01em;line-height:1;
  padding:7px 10px;border-radius:var(--radius);white-space:nowrap;
  opacity:0;pointer-events:none;
  transform:translateY(-4px);
  transition:opacity 160ms,transform 160ms;
  z-index:110;box-shadow:var(--shadow-sm);
}
.header-cart__tip::before{
  content:"";position:absolute;top:-4px;right:14px;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:5px solid var(--ink);
}
@media (max-width:768px){
  .header-cart__tip{display:none}
}
@media (hover:hover) and (min-width:769px){
  .header-cart:hover .header-cart__tip,
  .header-cart:focus-visible .header-cart__tip{
    opacity:1;transform:translateY(0);
  }
}
/* Hover/focus-only states for the account button (cart styles already gated above). */
@media (hover:hover){
  .header-account:hover{background:var(--surface-2);color:var(--brand)}
}
.header-account:active{background:var(--surface-2);color:var(--brand)}
.header-account:focus-visible{background:var(--surface-2);color:var(--brand)}

/* Global img/svg rule sets height:auto+display:block which collapses icon SVGs on mobile WebKit.
   Force explicit dimensions and visibility so the icon always renders. */
.header-cart svg,
.header-account svg {
  width:18px !important;
  height:18px !important;
  flex-shrink:0;
  display:inline-block !important;
  stroke:currentColor;
  fill:none;
  pointer-events:none;
  position:relative;z-index:1;
}

.cart-pip{
  position:absolute;top:-7px;right:-9px;
  min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;
  background:var(--pip-bg);color:var(--pip-ink);
  font-size:10px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  line-height:1;border:2px solid var(--surface);
  z-index:2;pointer-events:none;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
@media (min-width:769px){
  /* Inside the desktop pill button the surface colour matches the button bg, not the page. */
  .header-cart .cart-pip{border-color:var(--surface-2)}
  .header-cart:hover .cart-pip{border-color:var(--brand-soft)}
}
.cart-pip:empty,.cart-pip[data-count="0"]{display:none}
/* Subtle "bump" when the pip is re-inserted by a WC fragment refresh after add-to-cart. */
.cart-pip:not(:empty):not([data-count="0"]),
.mbn-pip:not(:empty):not([data-count="0"]){animation:nm-pip-bump 380ms cubic-bezier(.2,1.4,.4,1)}
@keyframes nm-pip-bump{
  0%{transform:scale(.7)}
  60%{transform:scale(1.18)}
  100%{transform:scale(1)}
}

/* ===== Mobile nav drawer ===== */
.mobile-nav{
  position:fixed;top:0;left:0;bottom:0;
  height:100vh;height:100dvh;
  width:min(360px,86vw);background:var(--surface);
  z-index:300;transform:translateX(-100%);
  transition:transform 320ms cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-md);
  will-change:transform;
}
.mobile-nav.show{transform:translateX(0)}
.mobile-nav__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line);
  min-height:var(--h-header);
}
.mobile-nav__head .site-logo__name{font-size:1.05rem}
#navClose{
  background:transparent;border:0;padding:8px;
  width:40px;height:40px;border-radius:var(--radius);
  color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;
}
#navClose:hover{background:var(--surface-2);color:var(--ink)}
.mobile-nav__body{
  flex:1;overflow-y:auto;
  padding:var(--sp-4) var(--sp-3);
}
.mobile-nav__search{
  display:flex;align-items:center;gap:6px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;padding:4px 4px 4px 14px;
  margin:0 var(--sp-1) var(--sp-4);
}
.mobile-nav__search:focus-within{border-color:var(--brand);box-shadow:var(--focus-ring)}
.mobile-nav__search input{
  flex:1;background:transparent;border:0;outline:0;
  font-size:var(--fs-sm);color:var(--ink);min-width:0;
  font-family:inherit;padding:8px 0;
  -webkit-appearance:none;appearance:none;
}
.mobile-nav__search input::-webkit-search-decoration,
.mobile-nav__search input::-webkit-search-cancel-button{-webkit-appearance:none}
.mobile-nav__search input::placeholder{color:var(--ink-3);opacity:1}
/* Force readable contrast inside the dark-mode pill — beats the global [data-theme=dark] input reset. */
[data-theme="dark"] .mobile-nav__search input{
  background:transparent !important;color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink);
}
[data-theme="dark"] .mobile-nav__search input::placeholder{color:var(--ink-3) !important;opacity:1}
.mobile-nav__search button{
  background:var(--brand);color:#fff;border:0;
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;
}
.mobile-nav__menu,.mobile-nav__util{list-style:none;margin:0;padding:0}
.mobile-nav__menu a,.mobile-nav__util a{
  display:block;padding:12px 14px;
  color:var(--ink);font-size:var(--fs-md);font-weight:500;
  border-radius:var(--radius);
}
.mobile-nav__menu a:hover,.mobile-nav__util a:hover{background:var(--brand-soft);color:var(--brand)}
.mobile-nav__divider{
  height:1px;background:var(--line);
  margin:var(--sp-4) var(--sp-3);
}
.mobile-nav__util a{font-size:var(--fs-sm);color:var(--ink-2);font-weight:400}
.mobile-nav__section-label{
  margin:var(--sp-3) var(--sp-3) var(--sp-2);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
}
.mobile-nav__menu--secondary a{
  font-size:var(--fs-sm);font-weight:400;color:var(--ink-3);
  padding:8px 14px;
}
.mobile-nav__menu--secondary a:hover{color:var(--brand);background:var(--brand-soft)}
.mobile-nav__foot{
  padding:var(--sp-4) var(--sp-5);
  border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--ink-3);
}
.nav-overlay{
  position:fixed;inset:0;background:rgba(20,22,18,.5);
  z-index:299;opacity:0;visibility:hidden;
  transition:opacity var(--transition),visibility var(--transition);
}
.nav-overlay.show{opacity:1;visibility:visible}

/* ===== Buttons ===== */
.btn,button.btn,a.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;font-size:var(--fs-sm);font-weight:600;
  border-radius:var(--radius);border:1px solid transparent;
  background:var(--brand);color:#fff;cursor:pointer;
  transition:all var(--transition);text-decoration:none;
  letter-spacing:.005em;
}
.btn:hover{background:var(--brand-2);color:#fff;box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:80ms}
.add:active,a.ajax_add_to_cart:active,.co:active,.sp-mobile-cta__btn:active{transform:scale(.985);transition-duration:80ms}
@media (hover:hover){
  .btn:hover{transform:translateY(-1px)}
}
.btn--ghost{background:transparent;color:var(--brand);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}
.btn--accent{background:var(--accent);color:#1b1d1a}
.btn--accent:hover{background:#90702f;color:#fff}
.btn--block{display:flex;width:100%}

/* ===== Trustmarks ===== */
.trustmarks{
  background:var(--surface-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:var(--sp-7) 0;
}
.trustmarks .container{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--sp-6);
}
.trustmark{
  display:flex;align-items:flex-start;gap:var(--sp-3);
}
.trustmark__icon{
  width:42px;height:42px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--brand);flex-shrink:0;
}
.trustmark__title{
  font-family:var(--font-serif);font-weight:600;font-size:var(--fs-md);
  color:var(--ink);margin:0 0 2px;
}
.trustmark__sub{
  font-size:var(--fs-xs);color:var(--ink-3);margin:0;line-height:1.45;
}

/* ===== Footer ===== */
.site-footer{
  background:var(--surface);
  border-top:1px solid var(--line);
  position:relative;
}
.footer-accent{
  height:3px;
  background:linear-gradient(90deg,var(--brand),var(--accent),var(--brand));
}
.site-footer__inner{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:var(--sp-8);
  padding:var(--sp-11) 0 var(--sp-8);
}
.footer-brandcol{display:flex;flex-direction:column;gap:var(--sp-4)}
.footer-brand{display:flex;align-items:center;gap:var(--sp-3);color:var(--ink)}
.footer-brand .site-logo__mark{width:36px;height:36px}
.footer-tagline{
  color:var(--ink-2);font-size:var(--fs-sm);
  line-height:1.6;max-width:38ch;
}
.footer-col__title{
  font-family:var(--font);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin:0 0 var(--sp-4);
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.footer-col a{
  color:var(--ink-2);font-size:var(--fs-sm);
  transition:color var(--transition);
}
.footer-col a:hover{color:var(--brand)}

/* Newsletter */
#newsletter{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3)}
.newsletter__label{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
}
.newsletter__row{
  display:flex;gap:6px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:4px;
  transition:border-color var(--transition);
}
.newsletter__row:focus-within{border-color:var(--brand);box-shadow:var(--focus-ring)}
.newsletter__row input[type=email]{
  flex:1;background:transparent;border:0;outline:0;
  padding:8px 10px;font-size:var(--fs-sm);color:var(--ink);
  font-family:inherit;
}
.newsletter__row button{
  background:var(--brand);color:#fff;border:0;
  padding:8px 14px;border-radius:calc(var(--radius) - 1px);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;
  transition:background var(--transition);
}
.newsletter__row button:hover{background:var(--brand-2)}
.newsletter__msg{font-size:var(--fs-xs);color:var(--ink-3);margin:4px 0 0;min-height:1.2em}
.newsletter__msg.is-ok{color:var(--ok)}
.newsletter__msg.is-err{color:var(--danger)}

.site-footer__legal{
  border-top:1px solid var(--line);
  padding:var(--sp-5) 0 var(--sp-7);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:var(--sp-3);
  font-size:var(--fs-xs);color:var(--ink-3);
}
.site-footer__legal p{margin:0}

/* ===== FAQ accordion ===== */
.nm-faq{
  display:flex;flex-direction:column;gap:var(--sp-2);
  max-width:var(--container-narrow);margin:0 auto;
}
.nm-faq__item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.nm-faq__item:hover{border-color:var(--line-2)}
.nm-faq__q{
  width:100%;background:transparent;border:0;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  text-align:left;font-family:var(--font-serif);font-weight:600;
  font-size:var(--fs-md);color:var(--ink);cursor:pointer;
  transition:color var(--transition);
}
.nm-faq__q:hover{color:var(--brand)}
.nm-faq__icon{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--transition);
  font-weight:600;
}
.nm-faq__q[aria-expanded="true"] .nm-faq__icon{transform:rotate(45deg)}
.nm-faq__q[aria-expanded="true"]{color:var(--brand)}
.nm-faq__a{
  border-top:1px solid var(--line);
  padding:var(--sp-4) var(--sp-5) var(--sp-5);
  color:var(--ink-2);line-height:1.7;
  animation:faqOpen 220ms ease;
}
.nm-faq__inner{font-size:var(--fs-sm)}
.nm-faq__inner p:last-child{margin-bottom:0}
@keyframes faqOpen{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.faq-group{margin:var(--sp-7) 0}
.faq-group h2{
  font-family:var(--font-serif);font-size:var(--fs-xl);
  margin:0 0 var(--sp-4);max-width:var(--container-narrow);
  margin-left:auto;margin-right:auto;
}

/* ===== Gate page ===== */
.gate-body{
  min-height:100vh;
  background:radial-gradient(ellipse at top left,rgba(29,78,63,.18),transparent 50%),
             radial-gradient(ellipse at bottom right,rgba(168,132,58,.14),transparent 55%),
             linear-gradient(180deg,#fafaf7 0%,#ebeae3 100%);
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-7);font-family:var(--font);
}
[data-theme="dark"] .gate-body{
  background:radial-gradient(ellipse at top left,rgba(111,189,156,.14),transparent 50%),
             radial-gradient(ellipse at bottom right,rgba(217,177,105,.12),transparent 55%),
             linear-gradient(180deg,#0d0e0c 0%,#1a1c18 100%);
}
.gate-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 80px -20px rgba(20,22,18,.25);
  padding:var(--sp-9);
  max-width:520px;width:100%;
  position:relative;overflow:hidden;
}
.gate-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brand),var(--accent),var(--brand));
}
.gate-mark{
  width:64px;height:64px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin:0 0 var(--sp-5);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.gate-mark svg{display:block;width:100%;height:100%}
[data-theme="dark"] .gate-mark svg rect{fill:#e8e8e3}
.gate-eyebrow{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin:0 0 var(--sp-2);
}
.gate-title{
  font-family:var(--font-serif);font-size:var(--fs-2xl);
  margin:0 0 var(--sp-3);color:var(--ink);
}
.gate-lede{
  color:var(--ink-2);line-height:1.65;margin:0 0 var(--sp-6);
  font-size:var(--fs-base);
}
.gate-form{display:flex;flex-direction:column;gap:var(--sp-3)}
.gate-input,.contact-grid input,.contact-grid textarea{
  width:100%;padding:13px 14px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--ink);
  font-family:inherit;font-size:var(--fs-base);
  transition:all var(--transition);
}
.gate-input:focus,.contact-grid input:focus,.contact-grid textarea:focus{
  outline:0;border-color:var(--brand);background:var(--surface);
  box-shadow:var(--focus-ring);
}
.gate-error{
  color:var(--danger);background:var(--danger-soft);
  padding:10px 14px;border-radius:var(--radius);
  font-size:var(--fs-sm);margin:0;
}
.gate-meta{
  margin-top:var(--sp-6);padding-top:var(--sp-5);
  border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6;
}

/* ===== Shop archive ===== */
.shop-hero{
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
  border-bottom:1px solid var(--line);
  padding:var(--sp-10) 0 var(--sp-9);
  position:relative;overflow:hidden;
}
.shop-hero::after{
  content:"";position:absolute;right:-100px;top:-50px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(29,78,63,.05),transparent 70%);
  pointer-events:none;
}
.shop-hero__eyebrow{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin:0 0 var(--sp-3);
}
.shop-hero h1{font-size:var(--fs-3xl);margin:0 0 var(--sp-3);max-width:24ch}
.shop-hero p{color:var(--ink-2);max-width:62ch;font-size:var(--fs-md);margin:0}
.shop-hero__sub{color:var(--ink-2);max-width:62ch;font-size:var(--fs-md);margin:var(--sp-3) 0 0}
.shop-hero__desc{color:var(--ink-2);max-width:62ch;font-size:var(--fs-md);margin:var(--sp-2) 0 0}
.shop-hero__stats{display:flex;gap:var(--sp-7);margin-top:var(--sp-6);flex-wrap:wrap}
.shop-hero__stat{display:flex;flex-direction:column;gap:2px}
.shop-hero__stat-num{font-family:var(--font-serif);font-size:var(--fs-2xl);color:var(--ink);font-weight:600;line-height:1}
.shop-hero__stat-label{font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}

.cat-strip{
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:var(--sp-4) 0;position:sticky;top:var(--h-header);z-index:50;
}
.cat-strip__inner{
  display:flex;gap:var(--sp-2);overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px;-webkit-overflow-scrolling:touch;
}
.cat-strip__inner::-webkit-scrollbar{display:none}
.cat-pill{
  padding:8px 16px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);
  color:var(--ink-2);font-size:var(--fs-sm);font-weight:500;
  white-space:nowrap;transition:all var(--transition);
}
.cat-pill{transition:background var(--transition),color var(--transition),border-color var(--transition),transform 80ms;-webkit-tap-highlight-color:transparent}
.cat-pill:hover{border-color:var(--brand);color:var(--brand)}
.cat-pill:active{transform:scale(.96)}
.cat-pill.is-active,.cat-pill.sel{
  background:var(--brand);color:#fff;border-color:var(--brand);
}
.dchip{transition:background var(--transition),color var(--transition),border-color var(--transition),transform 80ms;-webkit-tap-highlight-color:transparent}
.dchip:active{transform:scale(.94)}

.trust-strip{
  background:var(--surface-2);border-bottom:1px solid var(--line);
  padding:var(--sp-3) 0;font-size:var(--fs-xs);color:var(--ink-3);
}
.trust-strip__inner{
  display:flex;justify-content:center;gap:var(--sp-7);flex-wrap:wrap;
}
.trust-strip span{display:inline-flex;align-items:center;gap:6px}

.shop-layout{
  display:grid;grid-template-columns:240px 1fr;gap:var(--sp-7);
  padding:var(--sp-8) 0;
}
.shop-sidebar{position:sticky;top:calc(var(--h-header) + 70px);align-self:start}
.shop-sidebar h3{
  font-family:var(--font);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 var(--sp-3);font-weight:600;
}
.shop-sidebar ul{list-style:none;margin:0 0 var(--sp-6);padding:0}
.shop-sidebar li a{
  display:block;padding:6px 0;font-size:var(--fs-sm);color:var(--ink-2);
  transition:color var(--transition);
}
.shop-sidebar li a:hover,.shop-sidebar li.is-active a{color:var(--brand);font-weight:500}

.product-grid,ul.products{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-5);
}

/* ===== Product card ===== */
.card,ul.products li.product{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
  position:relative;
}
.card:hover,ul.products li.product:hover{
  border-color:var(--line-2);
  box-shadow:var(--shadow-md);
}
@media (hover:hover){
  .card:hover,ul.products li.product:hover{transform:translateY(-2px)}
}
.vis{
  position:relative;
  background:linear-gradient(160deg,var(--surface-2),var(--surface-3));
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.vis img{
  width:100%;height:100%;
  object-fit:contain;
  padding:8%;box-sizing:border-box;
  transition:transform var(--transition-slow);
}
/* Dark-mode archive cards — lighter mid-tone container background blends
   with the white product photo without darkening it. No image filter — the
   photo stays crisp. */
[data-theme="dark"] .vis{
  background:linear-gradient(160deg,#3a3d38,#2a2d28);
}
[data-theme="dark"] .vis img{filter:none}
@media (hover:hover){
  .card:hover .vis img{transform:scale(1.04)}
}
.card-tags{
  position:absolute;top:10px;left:10px;
  display:flex;gap:6px;flex-wrap:wrap;
}
.ctag{
  background:var(--surface);color:var(--ink);
  font-size:10px;font-weight:600;letter-spacing:.04em;
  padding:4px 8px;border-radius:3px;
  border:1px solid var(--line);
  text-transform:uppercase;
}
.ctag.is-new{background:var(--brand);color:#fff;border-color:var(--brand)}
.ctag.is-99{background:var(--accent);color:#1b1d1a;border-color:var(--accent)}
/* Wishlist UI removed — orphaned rules cleaned up. */

.meta{padding:var(--sp-4);display:flex;flex-direction:column;gap:6px;flex:1 1 auto}
.meta h3,.meta .woocommerce-loop-product__title{
  font-family:var(--font-serif);font-size:var(--fs-md);
  margin:0;line-height:1.3;
}
.meta h3 a{color:var(--ink)}
.meta h3 a:hover{color:var(--brand)}
.cas{
  font-size:11px;letter-spacing:.06em;
  color:var(--ink-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.blurb{font-size:var(--fs-sm);color:var(--ink-2);margin:0;line-height:1.5}
.dose-row{display:flex;flex-wrap:wrap;gap:6px;padding-top:var(--sp-2)}
.dchip{
  padding:5px 10px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:3px;
  font-size:11px;font-weight:600;color:var(--ink-2);
  cursor:pointer;transition:all var(--transition);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.dchip:hover{border-color:var(--brand);color:var(--brand)}
.dchip.sel{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
@media (max-width:768px){
  .dchip{padding:9px 14px;font-size:var(--fs-sm);min-height:36px}
  .qbtn{width:36px;height:36px}
  .sp-thumbs button{width:56px;height:56px}
}
.purity-badge{
  display:inline-block;align-self:flex-start;
  background:var(--brand-soft);color:var(--brand);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;
  padding:3px 9px;border-radius:3px;
}
.meta .cat{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
}
.shop-sidebar__cats{list-style:none;margin:0 0 var(--sp-6);padding:0}
.shop-sidebar__cats li{padding:6px 0}
.shop-sidebar__cats li a{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--ink-2)}
.shop-sidebar__cats li a:hover,.shop-sidebar__cats li.is-active a{color:var(--brand);font-weight:500}
.shop-sidebar__cats li a span{color:var(--ink-3);font-size:var(--fs-xs)}
.shop-sidebar__filters{list-style:none;margin:0 0 var(--sp-6);padding:0;display:flex;flex-direction:column;gap:8px}
.shop-sidebar__filters label{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-2);cursor:pointer}
.shop-sidebar__coa-note{
  margin-top:var(--sp-5);padding:var(--sp-4);
  background:var(--brand-soft);border-radius:var(--radius);
  font-size:var(--fs-xs);color:var(--ink-2);
}
.shop-sidebar__coa-note strong{display:block;color:var(--brand);margin-bottom:4px;font-size:var(--fs-sm)}
.shop-main__toolbar{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-4);flex-wrap:wrap;
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--line);
  margin-bottom:var(--sp-5);font-size:var(--fs-sm);color:var(--ink-3);
}
.shop-main__toolbar > .woocommerce-result-count{margin:0;flex:0 0 auto}
.shop-main__toolbar > .woocommerce-ordering{margin:0;flex:0 0 auto}
@media (max-width:640px){
  .shop-search{order:3;flex:1 1 100%;max-width:none}
  .shop-main__toolbar{gap:var(--sp-3)}
}
.shop-main__empty{padding:var(--sp-9) 0;text-align:center;color:var(--ink-3)}

.stock{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);color:var(--ok);font-weight:500;
}
.stock::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);
}
.stock.is-low{color:var(--accent)}
.stock.is-low::before{background:var(--accent)}
.stock.is-out{color:var(--ink-3)}
.stock.is-out::before{background:var(--ink-3)}

.buy{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--line);
  background:var(--surface-2);
  margin-top:auto; /* pin to bottom of the card */
  flex-shrink:0;
}
.price,.woocommerce-Price-amount{
  font-family:var(--font-serif);font-weight:600;
  font-size:var(--fs-lg);color:var(--ink);
}
.price del{color:var(--ink-3);font-weight:400;font-size:var(--fs-sm);margin-right:6px}
.price ins{text-decoration:none;color:var(--brand)}
.add,.button.add_to_cart_button,a.ajax_add_to_cart{
  background:var(--brand);color:#fff;border:0;
  padding:9px 16px;font-size:var(--fs-sm);font-weight:600;
  border-radius:var(--radius);cursor:pointer;
  transition:all var(--transition);
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;
}
.add:hover,.button.add_to_cart_button:hover,a.ajax_add_to_cart:hover{background:var(--brand-2);color:#fff}
.add:focus-visible,a.ajax_add_to_cart:focus-visible,.btn:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--shadow-sm)}
.add.loading,a.ajax_add_to_cart.loading,.sp-mobile-cta__btn.loading{opacity:.85;pointer-events:none;position:relative}
.add.loading::after,a.ajax_add_to_cart.loading::after,.sp-mobile-cta__btn.loading::after{
  content:"";display:inline-block;width:13px;height:13px;margin-left:8px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:nm-spin .7s linear infinite;vertical-align:middle;
}
@keyframes nm-spin{to{transform:rotate(360deg)}}
.add.added::after,a.ajax_add_to_cart.added::after{
  content:"✓";margin-left:6px;display:inline-block;
  animation:nm-pop 280ms cubic-bezier(.2,1.4,.4,1);
}
@keyframes nm-pop{
  0%{transform:scale(0);opacity:0}
  60%{transform:scale(1.25);opacity:1}
  100%{transform:scale(1);opacity:1}
}

/* ===== Single product ===== */
.single-product-wrap{padding:var(--sp-8) 0}
.single-product-grid{
  display:grid;grid-template-columns:1.05fr 1fr;
  gap:var(--sp-9);align-items:start;
}
.sp-gallery{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;position:sticky;top:calc(var(--h-header) + 24px);
  max-width:540px;
}
.sp-gallery .vis{
  aspect-ratio:1/1;
  background:linear-gradient(160deg,var(--surface-2),var(--surface-3));
  position:relative;overflow:hidden;
}
/* Ambient backdrop: a heavily blurred, scaled-up copy of the product image
   fills the dead space around the contained main image. The actual image
   sits sharply on top via z-index. */
.sp-gallery .vis::before{
  content:"";
  position:absolute;inset:-15%;
  background-image:var(--gallery-bg, none);
  background-size:cover;background-position:center;
  filter:blur(46px) saturate(1.2);
  opacity:.32;
  z-index:0;pointer-events:none;
  transform:translateZ(0); /* hint hw acceleration */
}
.sp-gallery .vis > *{position:relative;z-index:1}
.sp-gallery .vis img,
.sp-gallery .vis a img,
.sp-gallery .woocommerce-product-gallery__image img{
  width:100%;height:100%;
  object-fit:contain;
  padding:10%;box-sizing:border-box;
  cursor:zoom-in;
  position:relative;z-index:1;
}
/* Dark mode — keep the ambient backdrop strong but warm, drop the corner
   vignette (was muddying the corners), and remove all filters from the
   image itself so the photo stays crisp. The lighter mid-tone container
   gradient grounds the white product photo without fighting it. */
[data-theme="dark"] .sp-gallery .vis{
  background:linear-gradient(160deg,#3a3d38,#2a2d28);
}
[data-theme="dark"] .sp-gallery .vis::before{
  opacity:.42;
  filter:blur(54px) saturate(1.35);
}
[data-theme="dark"] .sp-gallery .vis::after{display:none}
[data-theme="dark"] .sp-gallery .vis img,
[data-theme="dark"] .sp-gallery .woocommerce-product-gallery__image img{
  filter:none;
}
.sp-thumbs{
  display:flex;gap:8px;padding:var(--sp-3);
  border-top:1px solid var(--line);
}
.sp-thumbs button{
  width:64px;height:64px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface-2);
  padding:6px;cursor:pointer;
}
.sp-thumbs button.is-active{border-color:var(--brand)}

.sp-info{display:flex;flex-direction:column;gap:var(--sp-4)}
.sp-eyebrow{
  display:flex;align-items:center;gap:var(--sp-3);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
}
.sp-info h1{font-size:var(--fs-3xl);margin:0;line-height:1.15}
.sp-cas{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--fs-sm);color:var(--ink-3);
  background:var(--surface-2);padding:8px 12px;
  border-radius:var(--radius);display:inline-block;
}
.sp-credentials{
  display:flex;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-4);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-lg);
}
.sp-cred{
  display:flex;align-items:center;gap:8px;
  font-size:var(--fs-xs);color:var(--ink-2);
}
.sp-cred__icon{
  width:28px;height:28px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
}
.sp-price{font-family:var(--font-serif);font-size:var(--fs-3xl);color:var(--ink);font-weight:600}
.sp-doses{display:flex;flex-direction:column;gap:var(--sp-2)}
.sp-doses__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.sp-doses__row{display:flex;gap:8px;flex-wrap:wrap}

.sp-coa{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-5);background:var(--surface);
}
.sp-coa h3{font-size:var(--fs-md);margin:0 0 var(--sp-2)}
.sp-coa-doc{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3);background:var(--surface-2);
  border-radius:var(--radius);margin-top:var(--sp-3);
}
.sp-coa-doc__icon{
  width:36px;height:36px;border-radius:var(--radius);
  background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sp-coa-doc__meta{flex:1;font-size:var(--fs-sm)}
.sp-coa-doc__title{font-weight:600;color:var(--ink)}
.sp-coa-doc__sub{color:var(--ink-3);font-size:var(--fs-xs)}

.sp-tabs{margin-top:var(--sp-9);border-top:1px solid var(--line);padding-top:var(--sp-7)}
.sp-tablist{display:flex;gap:var(--sp-2);border-bottom:1px solid var(--line);margin-bottom:var(--sp-5)}
.sp-tab{
  background:transparent;border:0;padding:12px 18px;
  font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.sp-tab.is-active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}

.related-products{margin-top:var(--sp-11)}
.related-products h2{font-size:var(--fs-2xl);margin-bottom:var(--sp-6)}

.reassurance-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-5);margin-top:var(--sp-9);
  padding:var(--sp-7);background:var(--surface-2);
  border-radius:var(--radius-lg);
}
.reassurance-row > div{display:flex;align-items:flex-start;gap:var(--sp-3)}
.reassurance-row__icon{
  width:36px;height:36px;border-radius:var(--radius);
  background:var(--surface);color:var(--brand);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}

/* ===== Inner pages ===== */
.inner-page{
  padding:var(--sp-9) 0 var(--sp-11);
  max-width:var(--container-narrow);margin:0 auto;
  padding-left:var(--sp-6);padding-right:var(--sp-6);
}
.page-head,.page-header{margin-bottom:var(--sp-7)}
.page-title{
  font-size:var(--fs-3xl);margin:0 0 var(--sp-3);line-height:1.15;
}
.page-eyebrow{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin:0 0 var(--sp-3);
}
.page-lede{font-size:var(--fs-lg);color:var(--ink-2);line-height:1.6;margin:0 0 var(--sp-7);max-width:62ch}
.page-content{font-size:var(--fs-base);color:var(--ink);line-height:1.7}
.page-content h2{font-size:var(--fs-xl);margin:var(--sp-8) 0 var(--sp-3)}
.page-content h3{font-size:var(--fs-lg);margin:var(--sp-6) 0 var(--sp-3)}
.page-content p{margin:0 0 var(--sp-4)}
.page-content a{color:var(--brand);border-bottom:1px solid var(--brand-soft);transition:border-color var(--transition)}
.page-content a:hover{border-color:var(--brand)}
.page-content ul,.page-content ol{margin:0 0 var(--sp-5);padding-left:var(--sp-5)}
.page-content li{margin-bottom:8px;line-height:1.65}
.page-content hr{margin:var(--sp-7) 0}
.page-content strong{color:var(--ink);font-weight:600}
.page-content blockquote{
  border-left:3px solid var(--brand);
  padding:var(--sp-2) var(--sp-5);
  margin:var(--sp-5) 0;
  color:var(--ink-2);font-style:italic;
  background:var(--brand-soft);
  border-radius:0 var(--radius) var(--radius) 0;
}

/* ===== About page ===== */
.about-hero{
  padding:var(--sp-12) 0 var(--sp-10);
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
  border-bottom:1px solid var(--line);
}
.about-hero h1{font-size:var(--fs-4xl);margin:0 0 var(--sp-4);max-width:18ch}
.about-hero p{font-size:var(--fs-lg);max-width:60ch;color:var(--ink-2)}

.values-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-6);padding:var(--sp-10) 0;
}
.value-card{
  padding:var(--sp-6);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);
}
.value-card__icon{
  width:48px;height:48px;border-radius:var(--radius);
  background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  margin:0 0 var(--sp-4);
}
.value-card h3{font-size:var(--fs-md);margin:0 0 var(--sp-2)}
.value-card p{font-size:var(--fs-sm);color:var(--ink-2);margin:0;line-height:1.6}

.quality-section{
  padding:var(--sp-10) 0;
  background:var(--surface-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.quality-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-9);align-items:center;
}

.team-section{padding:var(--sp-11) 0}
.team-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);
  margin-top:var(--sp-7);
}
.team-card{text-align:center}
.team-card__img{
  width:100%;aspect-ratio:1/1;
  background:var(--surface-2);border-radius:var(--radius-lg);
  margin-bottom:var(--sp-4);
}
.team-card h4{font-size:var(--fs-md);margin:0 0 4px}
.team-card .role{font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}

/* ===== Reconstitution Guide ===== */
.recon-doc{padding:var(--sp-9) 0 var(--sp-11);max-width:780px;margin:0 auto;padding-left:var(--sp-6);padding-right:var(--sp-6)}
.recon-warn{
  background:var(--danger-soft);
  border-left:4px solid var(--danger);
  border-radius:var(--radius);
  padding:var(--sp-5);
  margin:var(--sp-6) 0 var(--sp-7);
  display:flex;gap:var(--sp-3);align-items:flex-start;
}
.recon-warn__icon{
  width:32px;height:32px;border-radius:50%;
  background:var(--danger);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.recon-warn h3{margin:0 0 6px;color:var(--danger);font-size:var(--fs-md)}
.recon-warn p{margin:0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.6}

.recon-step{
  display:grid;grid-template-columns:48px 1fr;gap:var(--sp-4);
  padding:var(--sp-5) 0;border-top:1px solid var(--line);
}
.recon-step:first-of-type{border-top:0}
.recon-step__num{
  width:36px;height:36px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-weight:600;font-size:var(--fs-md);
}
.recon-step h3{margin:4px 0 var(--sp-2);font-size:var(--fs-lg)}
.recon-step__body{color:var(--ink-2);line-height:1.7;font-size:var(--fs-base)}
.recon-step__body p:last-child{margin-bottom:0}

.recon-table{
  width:100%;border-collapse:collapse;margin:var(--sp-5) 0;
  font-size:var(--fs-sm);
}
.recon-table th,.recon-table td{
  padding:10px 14px;text-align:left;
  border-bottom:1px solid var(--line);
}
.recon-table th{background:var(--surface-2);font-weight:600;color:var(--ink)}
.recon-table tr:hover td{background:var(--surface-2)}
.recon-coa{margin-top:var(--sp-9);padding:var(--sp-6);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg)}
.recon-coa h2{margin-top:0;font-size:var(--fs-lg)}
.contact-aside__note{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}

/* ===== COA Database ===== */
.coa-tools{
  display:flex;gap:var(--sp-3);align-items:center;
  padding:var(--sp-5);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  margin-bottom:var(--sp-6);flex-wrap:wrap;
}
.coa-search{
  flex:1;min-width:240px;
  padding:11px 14px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface-2);
  font-family:inherit;font-size:var(--fs-sm);
}
.coa-search:focus{outline:0;border-color:var(--brand);box-shadow:var(--focus-ring)}
.coa-table{
  width:100%;border-collapse:collapse;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
}
.coa-table th,.coa-table td{
  padding:14px 16px;text-align:left;
  border-bottom:1px solid var(--line);font-size:var(--fs-sm);
}
.coa-table th{background:var(--surface-2);font-weight:600;color:var(--ink-2);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase}
.coa-table tr:last-child td{border-bottom:0}
.coa-table tr:hover td{background:var(--surface-2)}
.coa-cas{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-3);font-size:var(--fs-xs)}
.coa-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;background:var(--brand-soft);color:var(--brand);
  border-radius:var(--radius);font-weight:500;font-size:var(--fs-xs);
}
.coa-link:hover{background:var(--brand);color:#fff}

/* ===== Compliance / policy pages ===== */
.policy-toc{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--sp-5);
  margin-bottom:var(--sp-7);
}
.policy-toc h3{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--sp-3);font-weight:600}
.policy-toc ol{margin:0;padding-left:var(--sp-5);columns:2;column-gap:var(--sp-6)}
.policy-toc li{margin-bottom:6px;font-size:var(--fs-sm);break-inside:avoid}
.policy-toc a{color:var(--ink-2)}
.policy-toc a:hover{color:var(--brand)}
.policy-meta{
  font-size:var(--fs-xs);color:var(--ink-3);
  padding:var(--sp-3) 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin:var(--sp-5) 0 var(--sp-7);
  display:flex;gap:var(--sp-5);flex-wrap:wrap;
}

/* ===== Contact form ===== */
.contact-grid{
  display:grid;grid-template-columns:1.2fr 1fr;
  gap:var(--sp-9);padding:var(--sp-8) 0;
}
.contact-form{display:flex;flex-direction:column;gap:var(--sp-4)}
.contact-form .field{display:flex;flex-direction:column;gap:6px}
.contact-form label{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
}
.contact-form textarea{min-height:140px;resize:vertical;font-family:inherit;line-height:1.6}
.contact-form .row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form .submit-row{display:flex;gap:var(--sp-3);align-items:center;margin-top:var(--sp-2)}
.contact-form .form-msg{
  padding:12px 16px;border-radius:var(--radius);
  font-size:var(--fs-sm);margin:0;
}
.contact-form .form-msg.is-ok{background:var(--brand-soft);color:var(--ok);border:1px solid rgba(47,107,70,.3)}
.contact-form .form-msg.is-err{background:var(--danger-soft);color:var(--danger);border:1px solid rgba(155,43,43,.25)}
.contact-form .form-msg.is-success{background:var(--brand-soft);color:var(--ok)}

.contact-aside{
  padding:var(--sp-6);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  align-self:start;
}
.contact-aside h3{margin-top:0;font-size:var(--fs-md)}
.contact-aside dl{margin:0;display:grid;gap:var(--sp-3)}
.contact-aside dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:2px}
.contact-aside dd{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}

/* ===== Cart drawer ===== */
.drawer{
  position:fixed;
  top:0;right:0;bottom:0;
  /* Explicit height as a belt-and-braces guarantee that the drawer always
     occupies exactly one viewport regardless of any future ancestor that
     introduces a transform/contain (which could otherwise re-base
     position:fixed onto an offset container). */
  height:100vh;
  height:100dvh; /* mobile-safe — dynamic viewport height where supported */
  width:min(420px,92vw);background:var(--surface);
  z-index:300;transform:translateX(100%);
  transition:transform 320ms cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;
  box-shadow:-20px 0 60px -20px rgba(20,22,18,.25);
  will-change:transform;
}
.drawer.show{transform:translateX(0)}
#ovl{
  position:fixed;inset:0;background:rgba(20,22,18,.45);
  z-index:299;opacity:0;visibility:hidden;
  transition:opacity var(--transition),visibility var(--transition);
}
#ovl.show{opacity:1;visibility:visible}

.dhead{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line);
  min-height:var(--h-header);
}
.dhead h2{
  margin:0;font-size:var(--fs-lg);
  font-family:var(--font-serif);font-weight:600;
}
#cartClose{
  background:transparent;border:0;padding:8px;
  width:36px;height:36px;border-radius:var(--radius);
  color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;
}
#cartClose:hover{background:var(--surface-2);color:var(--ink)}

.dbody{flex:1;overflow-y:auto;padding:var(--sp-3);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.nav-open,body.drawer-open{overflow:hidden}
.dempty{
  text-align:center;padding:var(--sp-9) var(--sp-5);
  color:var(--ink-3);
}
.dempty__icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--surface-2);color:var(--ink-3);
  margin:0 auto var(--sp-4);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;line-height:1;
  animation:nm-float 3.6s ease-in-out infinite;
}
@keyframes nm-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.dempty p{font-size:var(--fs-sm);margin:0 0 var(--sp-5)}
.dempty .btn--ghost{transition:transform var(--transition),background var(--transition),color var(--transition),border-color var(--transition)}

.line{
  display:grid;grid-template-columns:64px 1fr auto;
  gap:var(--sp-3);padding:var(--sp-3);
  border-bottom:1px solid var(--line);align-items:start;
}
.lvis{
  width:64px;height:64px;border-radius:var(--radius);
  background:var(--surface-2);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
}
.lvis img{max-width:90%;max-height:90%;object-fit:contain}
.linfo{display:flex;flex-direction:column;gap:6px;min-width:0}
.linfo h4{
  font-size:var(--fs-sm);font-family:var(--font);
  font-weight:600;margin:0;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;
}
.linfo h4 a{color:var(--ink)}
.linfo .var{font-size:var(--fs-xs);color:var(--ink-3)}
.lrow{display:flex;align-items:center;gap:var(--sp-3);margin-top:4px}
.qty{
  display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-2);overflow:hidden;
}
.qbtn{
  width:28px;height:28px;background:transparent;border:0;
  color:var(--ink-2);cursor:pointer;font-size:var(--fs-sm);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--transition);
}
.qbtn:hover{background:var(--surface-3);color:var(--ink)}
.qbtn:disabled{opacity:.4;cursor:not-allowed}
.qv{
  min-width:32px;text-align:center;font-size:var(--fs-sm);font-weight:600;
  padding:0 4px;color:var(--ink);
}
.lpr{
  font-family:var(--font-serif);font-weight:600;
  font-size:var(--fs-sm);color:var(--ink);text-align:right;
}
a.rm{
  font-size:var(--fs-xs);color:var(--ink-3);
  margin-top:6px;display:inline-block;
  padding:4px 0;min-height:24px;
}
a.rm:hover{color:var(--danger)}
a.rm:focus-visible{color:var(--danger);outline:none;text-decoration:underline}

.dftip{
  background:var(--brand-soft);color:var(--brand);
  font-size:var(--fs-xs);padding:10px 14px;
  border-radius:var(--radius);text-align:center;margin:var(--sp-3);
}

.bar{
  border-top:1px solid var(--line);
  padding:var(--sp-4) var(--sp-5);background:var(--surface);
}
.drow{
  display:flex;justify-content:space-between;align-items:center;
  font-size:var(--fs-sm);margin-bottom:8px;color:var(--ink-2);
}
.drow.is-total{
  font-family:var(--font-serif);font-weight:600;
  font-size:var(--fs-xl);color:var(--ink);
  padding-top:var(--sp-4);margin-top:var(--sp-3);
  border-top:1px solid var(--line);
  align-items:baseline;
}
.drow.is-total > span:last-child{
  font-size:var(--fs-2xl);font-weight:700;color:var(--brand);
  letter-spacing:-.005em;
  /* Subtle flash whenever the subtotal element is re-inserted by a fragment refresh. */
  animation:nm-total-flash 600ms ease-out;
}
@keyframes nm-total-flash{
  0%{transform:scale(.92);opacity:.5}
  50%{transform:scale(1.04);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.co{
  display:flex;width:100%;justify-content:center;align-items:center;gap:8px;
  background:var(--brand);color:#fff;border:0;
  padding:16px 20px;font-size:var(--fs-md);font-weight:700;
  border-radius:var(--radius);text-transform:uppercase;letter-spacing:.08em;
  text-decoration:none;margin-top:var(--sp-3);transition:background var(--transition);
  box-shadow:0 4px 14px -4px rgba(29,78,63,.45);
}
.co::after{content:"→";font-size:var(--fs-lg);transition:transform var(--transition)}
.co:hover{background:var(--brand-2);color:#fff}
.co:hover::after{transform:translateX(3px)}
/* (Subtotal sizing handled in the main .drow.is-total rule above.) */

/* ===== Predictive search dropdown ===== */
.shop-search,.mobile-nav__search{position:relative}
.search-dd{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  z-index:120;max-height:380px;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity 160ms,transform 160ms;
  padding:6px;
}
.search-dd.show{opacity:1;transform:translateY(0);pointer-events:auto}
.search-dd__item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--radius);
  color:var(--ink);text-decoration:none;
  transition:background var(--transition);
}
.search-dd__item:hover,.search-dd__item:focus-visible{
  background:var(--surface-2);outline:none;
}
.search-dd__item + .search-dd__item{margin-top:2px}
.search-dd__img{
  width:42px;height:42px;flex-shrink:0;border-radius:var(--radius);
  background:linear-gradient(160deg,var(--surface-2),var(--surface-3));
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.search-dd__img img{max-width:90%;max-height:90%;object-fit:contain;display:block}
.search-dd__body{flex:1;min-width:0}
.search-dd__name{
  font-family:var(--font-serif);font-weight:600;font-size:var(--fs-sm);
  color:var(--ink);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.search-dd__meta{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;color:var(--ink-3);letter-spacing:.04em;margin-top:1px;
}
.search-dd__price{
  font-family:var(--font-serif);font-weight:600;font-size:var(--fs-sm);
  color:var(--brand);margin-top:2px;
}
.search-dd__price del{color:var(--ink-3);font-weight:400;margin-right:4px}
.search-dd__empty{
  padding:18px 12px;text-align:center;
  color:var(--ink-3);font-size:var(--fs-sm);
}
.search-dd__view-all{
  display:block;text-align:center;
  padding:10px;margin-top:4px;
  font-size:var(--fs-xs);font-weight:600;color:var(--brand);
  border-top:1px solid var(--line);text-transform:uppercase;letter-spacing:.08em;
}
.search-dd__view-all:hover{background:var(--brand-soft)}
/* Skeleton rows during AJAX */
.search-dd__skel{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
}
.search-dd__skel-img{
  width:42px;height:42px;border-radius:var(--radius);flex-shrink:0;
  background:var(--surface-2);
}
.search-dd__skel-text{flex:1;display:flex;flex-direction:column;gap:6px}
.search-dd__skel-l{height:10px;border-radius:3px;background:var(--surface-2);width:75%}
.search-dd__skel-l--short{width:40%;height:8px}
.search-dd__skel-img,.search-dd__skel-l{
  background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-3) 50%,var(--surface-2) 100%);
  background-size:200% 100%;
  animation:nm-skel 1.4s ease-in-out infinite;
}
@keyframes nm-skel{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ===== Product card image skeleton (gentle pulse only while loading) =====
   Default state is visible — JS adds .is-loading only for un-loaded images, so
   if JS fails to run, images still appear normally. */
.vis img{transition:opacity 240ms ease,transform var(--transition-slow)}
.vis.is-loading{animation:nm-card-pulse 1.6s ease-in-out infinite}
.vis.is-loading img{opacity:0}
@keyframes nm-card-pulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(.95)}
}

/* ===== Mobile bottom nav (persistent on mobile) ===== */
.mobile-bottom-nav{display:none}
@media (max-width:768px){
  .mobile-bottom-nav{
    display:flex;align-items:stretch;justify-content:space-around;
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:var(--surface);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(0);
    transition:transform 280ms cubic-bezier(.22,1,.36,1);
    box-shadow:0 -2px 12px -8px rgba(20,22,18,.18);
  }
  body.nav-open .mobile-bottom-nav,
  body.drawer-open .mobile-bottom-nav{
    transform:translateY(110%);pointer-events:none;
  }
  .mbn-item{
    flex:1 1 0;min-width:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:6px 4px;height:54px;
    margin:0;
    background:transparent;border:0;
    color:var(--ink-2);font-size:10.5px;font-weight:500;
    text-decoration:none;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    -webkit-appearance:none;appearance:none;
    transition:color var(--transition);
    font-family:inherit;line-height:1;
    position:relative;
  }
  .mbn-item:hover,.mbn-item:focus-visible{color:var(--brand);outline:none}
  .mbn-item:active{transform:scale(.94);transition-duration:80ms}
  /* Active state — applied to the current page's nav item */
  .mbn-item.is-active{color:var(--brand)}
  .mbn-item.is-active::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:24px;height:2px;border-radius:0 0 2px 2px;background:var(--brand);
  }
  /* Every icon sits in an identical 22×22 box so spacing is uniform across all four items. */
  .mbn-icon-wrap{
    position:relative;width:22px;height:22px;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .mbn-icon-wrap svg{
    display:block;width:22px;height:22px;
    stroke:currentColor;fill:none;
  }
  .mbn-label{letter-spacing:.02em;line-height:1;display:block}
  .mbn-pip{
    position:absolute;top:-4px;right:-7px;
    min-width:16px;height:16px;padding:0 4px;
    border-radius:9px;
    background:var(--pip-bg);color:var(--pip-ink);
    font-size:10px;font-weight:700;
    display:inline-flex;align-items:center;justify-content:center;
    line-height:1;border:2px solid var(--surface);
    box-shadow:0 1px 3px rgba(0,0,0,.18);
    letter-spacing:0;
  }
  .mbn-pip:empty,.mbn-pip[data-count="0"]{display:none}
  /* Hide the top-right header cart on mobile — bottom nav is the single cart entry. */
  .header-cart{display:none !important}
  /* Pad the page for the bottom nav so content is never obscured. */
  body{padding-bottom:calc(54px + env(safe-area-inset-bottom))}
  /* Gate template renders standalone — its <body class="gate-body"> never has the bottom nav. */
  body.gate-body{padding-bottom:0}
}
[data-theme="dark"] .mobile-bottom-nav{
  background:rgba(28,29,26,.96);
  border-top-color:var(--line);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  backdrop-filter:saturate(140%) blur(8px);
}

/* ===== Mobile sticky Add-to-cart bar (single product) ===== */
.sp-mobile-cta{display:none}
@media (max-width:768px){
  /* Tightened heights — bottom nav 54px, sticky CTA 56px = 110px total (was 126px). */
  body.nmchem-single-product{padding-bottom:calc(54px + 56px + env(safe-area-inset-bottom))}
  .sp-mobile-cta{
    display:flex;align-items:center;gap:var(--sp-3);
    position:fixed;left:0;right:0;
    bottom:calc(54px + env(safe-area-inset-bottom));
    z-index:100;
    padding:8px 14px;
    background:var(--surface);
    /* Single soft shadow lifts the CTA visually above the bottom nav without a heavy border. */
    box-shadow:0 -1px 0 var(--line),0 -8px 18px -10px rgba(20,22,18,.16);
    transition:transform 280ms cubic-bezier(.22,1,.36,1);
  }
  body.nav-open .sp-mobile-cta,
  body.drawer-open .sp-mobile-cta{transform:translateY(160%);pointer-events:none}
  .sp-mobile-cta__price{
    flex:1;min-width:0;font-family:var(--font-serif);
    font-weight:600;font-size:var(--fs-md);color:var(--ink);
    line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .sp-mobile-cta__price del{color:var(--ink-3);font-size:var(--fs-sm);font-weight:400;margin-right:4px}
  .sp-mobile-cta__btn{
    flex-shrink:0;min-height:40px;padding:10px 18px;
    font-size:var(--fs-sm);font-weight:700;letter-spacing:.02em;
  }
  .sp-mobile-cta__btn[disabled]{opacity:.5;cursor:not-allowed}
  /* Toast sits above whichever fixed bars are present. */
  .toast{bottom:calc(54px + 14px + env(safe-area-inset-bottom));right:12px;left:12px;max-width:none}
  body.nmchem-single-product .toast{bottom:calc(54px + 56px + 14px + env(safe-area-inset-bottom))}
}

/* ===== Toast ===== */
.toast{
  position:fixed;bottom:24px;right:24px;
  background:var(--ink);color:#fff;
  padding:12px 16px 12px 14px;border-radius:var(--radius-lg);
  font-size:var(--fs-sm);font-weight:500;
  box-shadow:var(--shadow-md);
  transform:translateY(80px) scale(.96);opacity:0;
  transition:transform 280ms cubic-bezier(.22,1,.36,1),opacity 200ms;
  z-index:400;max-width:380px;
  display:flex;align-items:center;gap:10px;pointer-events:none;
}
.toast.show{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.toast__icon{
  display:none;width:22px;height:22px;flex-shrink:0;
  align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.16);
  font-size:13px;font-weight:700;line-height:1;
}
.toast.is-ok .toast__icon{display:inline-flex}
.toast.is-ok .toast__icon::before{content:"✓"}
.toast.is-err .toast__icon{display:inline-flex;background:rgba(255,255,255,.16)}
.toast.is-err .toast__icon::before{content:"!"}
.toast__msg{flex:1;min-width:0}
.toast__action{
  flex-shrink:0;color:#fff;text-decoration:underline;
  font-weight:600;font-size:var(--fs-sm);letter-spacing:.01em;
  padding:2px 4px;border-radius:3px;
  transition:background var(--transition);
}
.toast__action:hover,.toast__action:focus-visible{
  background:rgba(255,255,255,.12);color:#fff;
}
.toast.is-ok{background:var(--brand)}
.toast.is-err{background:var(--danger)}
.toast.is-ok{background:var(--brand)}
.toast.is-err{background:var(--danger)}

/* ===== 404 ===== */
.nf{
  position:relative;padding:var(--sp-12) 0;
  text-align:center;overflow:hidden;
}
.bg404{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-serif);font-weight:700;
  font-size:clamp(180px,30vw,360px);
  color:var(--surface-3);line-height:.85;letter-spacing:-.04em;
  pointer-events:none;user-select:none;z-index:0;
}
.nf-in{position:relative;z-index:1;max-width:540px;margin:0 auto;padding:0 var(--sp-5)}
.nf-in h1{font-size:var(--fs-3xl);margin:0 0 var(--sp-3)}
.nf-in p{color:var(--ink-2);margin:0 0 var(--sp-6);font-size:var(--fs-md)}
.nf-search{
  display:flex;gap:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:4px;margin-bottom:var(--sp-5);
}
.nf-search input{
  flex:1;background:transparent;border:0;outline:0;
  padding:10px 14px;font-size:var(--fs-sm);font-family:inherit;color:var(--ink);
}
.nf-search button{
  background:var(--brand);color:#fff;border:0;
  padding:10px 18px;border-radius:calc(var(--radius) - 1px);
  font-size:var(--fs-sm);font-weight:600;cursor:pointer;
}
.nf-cta{display:inline-flex}

/* ===== Responsive ===== */
@media (max-width:1200px){
  :root{--container:100%}
  .container{padding:0 var(--sp-5)}
  .product-grid,ul.products{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .primary-nav{display:none}
  .hamburger,#navOpen{display:inline-flex}
  .single-product-grid{grid-template-columns:1fr;gap:var(--sp-7)}
  .sp-gallery{position:static}
  .shop-layout{grid-template-columns:1fr}
  .shop-sidebar{position:static;display:none}
  .shop-sidebar.is-open{display:block}
  .product-grid,ul.products{grid-template-columns:repeat(2,1fr)}
  .site-footer__inner{grid-template-columns:1fr 1fr;gap:var(--sp-7)}
  .footer-brandcol{grid-column:1 / -1}
  .trustmarks .container{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .quality-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .reassurance-row{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:var(--sp-7)}
}
@media (max-width:768px){
  :root{--h-header:64px;--h-top:auto}
  .topbar{padding:6px 0;font-size:11px}
  .topbar__inner{flex-direction:column;gap:6px;text-align:center}
  .topbar__nav{gap:var(--sp-3);justify-content:center}
  .topbar__nav a:not(#themeBtn){display:none}
  .cat-strip{padding:var(--sp-3) 0}
  .cat-pill{padding:8px 14px;min-height:36px;display:inline-flex;align-items:center}
  h1{font-size:var(--fs-2xl)}
  .shop-hero{padding:var(--sp-8) 0 var(--sp-7)}
  .shop-hero h1{font-size:var(--fs-2xl)}
  .about-hero h1{font-size:var(--fs-3xl)}
  .sp-info h1{font-size:var(--fs-2xl)}
  .sp-price{font-size:var(--fs-2xl)}
  .policy-toc ol{columns:1}
  .recon-step{grid-template-columns:1fr;gap:var(--sp-2)}
  .contact-form .row-2{grid-template-columns:1fr}
  .site-footer__inner{padding:var(--sp-8) 0 var(--sp-6)}
  .site-footer__legal{flex-direction:column;align-items:flex-start;text-align:left}
}
@media (max-width:640px){
  .product-grid,ul.products{grid-template-columns:1fr;gap:var(--sp-4)}
  .buy{flex-direction:column;align-items:stretch;gap:var(--sp-2)}
  .buy .price{text-align:left}
  .buy .add,.buy a.ajax_add_to_cart,.buy .btn--ghost{width:100%;justify-content:center;padding:12px 16px}
  .trustmarks .container{grid-template-columns:1fr;gap:var(--sp-5)}
  .site-footer__inner{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .cat-strip{position:static}
  .sp-credentials{flex-direction:column;gap:var(--sp-3)}
  .gate-card{padding:var(--sp-7)}
  .gate-title{font-size:var(--fs-xl)}
  .nf-in h1{font-size:var(--fs-2xl)}
  .bg404{font-size:clamp(140px,40vw,240px)}
}
@media (max-width:480px){
  .container{padding:0 var(--sp-4)}
  .site-header__inner{gap:var(--sp-2)}
  .site-logo__tag{display:none}
  /* Bottom-nav handles cart + account on mobile — keep header tools collapsed. */
  .header-account{display:none}
  .header-cart{display:none !important}
  .header-tools{gap:4px;margin-left:auto}
  .topbar__nav a:not(#themeBtn){display:none}
  .drawer{width:100vw}
  .mobile-nav{width:100vw}
  .toast{left:12px;right:12px;bottom:12px;max-width:none}
  .coa-tools{flex-direction:column;align-items:stretch}
  .recon-doc{padding-left:var(--sp-4);padding-right:var(--sp-4)}
  .sp-qty-row{flex-wrap:wrap;gap:var(--sp-2)}
  .sp-qty-row .add{flex:1 1 100%;min-height:48px;font-size:var(--fs-md)}
  .sp-tablist{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sp-tablist::-webkit-scrollbar{display:none}
  .sp-tab{white-space:nowrap;flex-shrink:0}
  /* Tighter mobile single-product spacing — reclaims vertical space lost to the bottom UI. */
  .single-product-wrap{padding:var(--sp-5) 0}
  .sp-info{gap:var(--sp-3)}
  .sp-info h1{margin-top:var(--sp-1)}
  .reassurance-row{padding:var(--sp-5);gap:var(--sp-4);margin-top:var(--sp-6)}
  .sp-tabs{margin-top:var(--sp-7);padding-top:var(--sp-5)}
}
@media (max-width:375px){
  :root{--fs-base:0.875rem;--fs-md:0.9375rem}
  .site-logo__name{font-size:1rem}
  .site-logo__mark{width:34px;height:34px;font-size:1rem}
  h1,.shop-hero h1{font-size:1.5rem}
  .gate-card{padding:var(--sp-5)}
  .gate-mark{width:52px;height:52px;font-size:1.3rem}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ===== Print — clean pages for orders / invoices / COA pages ===== */
@media print{
  body{background:#fff !important;color:#000 !important}
  .topbar,.site-header,.mobile-nav,.nav-overlay,.mobile-bottom-nav,
  .drawer,#ovl,.toast,.sp-mobile-cta,.cart-pip,.mbn-pip,
  .header-cart__tip,.search-dd,.cat-strip,.shop-hero,
  .reading-progress,#readingProgress,#themeBtn,
  .skip-link,.shop-search,.mobile-nav__search,
  .related-products,.home-faq{display:none !important}
  a{color:inherit;text-decoration:none}
  .container{max-width:none;padding:0}
  .product-spec-table{break-inside:avoid}
  .vis,.sp-gallery .vis,.sp-gallery .vis::before,.sp-gallery .vis::after{
    background:#fff !important;filter:none !important;
  }
}

/* ===== Utility ===== */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.is-hidden,[hidden]{display:none !important}
.text-center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* ============================================================
   STOREFRONT OVERRIDES
   Neutralise inherited Storefront parent theme styles so the
   NMChem child theme controls all layout, typography, and colour.
   ============================================================ */
.storefront-primary-navigation,
.site-header-cart,
.secondary-navigation,
.before-site-header,
.handheld-navigation,
.storefront-handheld-footer-bar,
.beside-site-info,
.site-info{
  all:unset;
  display:revert;
}
.storefront-primary-navigation,
#site-header-cart,
.site-search,
.site-header .site-branding,
.site-header .custom-logo-link,
.before-site-header,
.handheld-navigation,
.storefront-handheld-footer-bar{
  background:none !important;
  box-shadow:none !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:revert;
}
.site-header{
  background:var(--surface) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:none !important;
  padding:0 !important;
}
.main-navigation ul.menu,
.main-navigation ul.nav-menu,
.main-navigation ul li{margin:0;padding:0;list-style:none;background:transparent}
.main-navigation ul li a{
  color:var(--ink-2);text-shadow:none;
  font-weight:500;font-size:var(--fs-sm);
}
.main-navigation ul li a:hover{color:var(--brand);background:var(--brand-soft)}
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart{
  background-color:var(--brand) !important;
  color:#fff !important;
  border-radius:var(--radius) !important;
  text-shadow:none !important;
  box-shadow:none !important;
  font-weight:600 !important;
  border:0 !important;
}
button:hover,
input[type="submit"]:hover,
.button:hover,
.added_to_cart:hover{
  background-color:var(--brand-2) !important;
  color:#fff !important;
}
.woocommerce ul.products li.product .button{margin-top:0}
.woocommerce ul.products li.product .price{
  color:var(--ink) !important;
  font-family:var(--font-serif) !important;
  font-weight:600 !important;
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-serif) !important;
  font-size:var(--fs-md) !important;
  color:var(--ink) !important;
  padding:0 !important;
  font-weight:600 !important;
}
.woocommerce-breadcrumb{
  font-size:var(--fs-xs) !important;color:var(--ink-3) !important;
  margin:var(--sp-4) 0 !important;
}
.woocommerce-breadcrumb a{color:var(--ink-2) !important}
.woocommerce-breadcrumb a:hover{color:var(--brand) !important}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  background:var(--surface-2) !important;
  border-top-color:var(--brand) !important;
  color:var(--ink) !important;
  border-radius:var(--radius) !important;
}
.woocommerce-message::before,
.woocommerce-info::before{color:var(--brand) !important}
.woocommerce-error{border-top-color:var(--danger) !important;background:var(--danger-soft) !important}
.woocommerce-error::before{color:var(--danger) !important}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  background:var(--surface-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  color:var(--ink) !important;
  padding:11px 14px !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{
  border-color:var(--brand) !important;
  box-shadow:var(--focus-ring) !important;
  outline:0 !important;
}
.site-footer{
  background:var(--surface) !important;
  color:var(--ink-2) !important;
  border-top:1px solid var(--line) !important;
  padding:0 !important;
}
.site-footer a{color:var(--ink-2) !important}
.site-footer a:hover{color:var(--brand) !important}
.storefront-handheld-footer-bar{display:none !important}
.site-header-cart .cart-contents{color:var(--ink-2) !important}
.site-header-cart .cart-contents:hover{color:var(--brand) !important}
.widget-area .widget,
.widget{
  background:transparent !important;
  padding:0 !important;
  margin-bottom:var(--sp-6) !important;
}
.widget h1,.widget h2,.widget h3,.widget .widget-title{
  font-family:var(--font) !important;
  font-size:11px !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:var(--ink-3) !important;
  font-weight:600 !important;
  margin-bottom:var(--sp-3) !important;
}
.storefront-product-pagination{display:none !important}
.woocommerce nav.woocommerce-pagination ul{
  border:0 !important;
  display:flex !important;gap:6px !important;justify-content:center !important;
}
.woocommerce nav.woocommerce-pagination ul li{
  border:0 !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  background:var(--surface) !important;
  color:var(--ink-2) !important;
  padding:8px 14px !important;
  min-width:auto !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--brand) !important;
  color:#fff !important;
  border-color:var(--brand) !important;
}
.col-full{
  max-width:var(--container) !important;
  padding:0 var(--sp-6) !important;
}
@media (max-width:768px){
  .col-full{padding:0 var(--sp-5) !important}
}
/* ===========================================================================
   Product spec table (single product page) + dark mode overrides
   =========================================================================== */
.product-spec-table{
  width:100%; border-collapse:collapse;
  font-size:var(--fs-sm);
  margin:var(--sp-5) 0 var(--sp-6);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.product-spec-table tbody tr{transition:background var(--transition)}
@media (hover:hover){
  .product-spec-table tbody tr:hover{background:var(--surface-2)}
}
.product-spec-table caption{
  text-align:left; padding:var(--sp-3) var(--sp-4);
  font-family:var(--font-serif); font-size:var(--fs-md); font-weight:600;
  color:var(--ink); background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.product-spec-table th,
.product-spec-table td{
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  text-align:left; vertical-align:top;
  line-height:1.55;
}
.product-spec-table tr:last-child th,
.product-spec-table tr:last-child td{ border-bottom:0; }
.product-spec-table th{
  width:38%;
  font-weight:500;
  color:var(--ink-3);
  white-space:nowrap;
  font-family:var(--font);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.06em;
  background:var(--surface-2);
}
.product-spec-table td{
  color:var(--ink);
  font-family:var(--font);
  font-variant-numeric:tabular-nums;
}
.product-spec-table sub{ font-size:.7em; vertical-align:sub; }
.product-spec-table .spec-mono{
  font-family:"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.92em; letter-spacing:0;
}
.product-spec-table .spec-pill{
  display:inline-block;
  background:var(--brand-soft); color:var(--brand);
  padding:2px 8px; border-radius:999px;
  font-size:var(--fs-xs); font-weight:600;
}
@media (max-width:640px){
  .product-spec-table th{ width:42%; font-size:10px; }
  .product-spec-table th,
  .product-spec-table td{ padding:9px 10px; }
}

/* Dark-mode spec table overrides */
[data-theme="dark"] .product-spec-table{
  background:var(--surface); border-color:var(--line);
}
[data-theme="dark"] .product-spec-table caption{
  background:var(--surface-2); color:var(--ink); border-color:var(--line);
}
[data-theme="dark"] .product-spec-table th{
  color:var(--ink-3); background:var(--surface-2);
  border-color:var(--line);
}
[data-theme="dark"] .product-spec-table td{
  color:var(--ink); border-color:var(--line);
}
[data-theme="dark"] .product-spec-table .spec-pill{
  background:var(--brand-soft); color:var(--color-link);
}

/* ===========================================================================
   Homepage (template-home.php)
   =========================================================================== */
.home-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%,rgba(168,132,58,.18),transparent 60%),
    radial-gradient(900px 500px at 0% 100%,rgba(255,255,255,.06),transparent 55%),
    linear-gradient(160deg,#1d4e3f 0%,#163c31 60%,#0f2c24 100%);
  color:#f4f3ee; padding:var(--sp-13) 0 var(--sp-12);
}
.home-hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:48px 48px; pointer-events:none;
  mask-image:radial-gradient(ellipse at center,black 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center,black 20%,transparent 75%);
}
.home-hero__inner{ position:relative; z-index:1; max-width:780px; }
.home-hero__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
  color:#cfdcd3; font-weight:600; margin-bottom:var(--sp-5);
}
.home-hero__eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 0 rgba(168,132,58,.6);
  animation:pulse 2.4s ease-in-out infinite;
}
.home-hero h1{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.05;
  letter-spacing:-.02em; color:#fafaf7;
  margin:0 0 var(--sp-4); max-width:18ch;
}
.home-hero h1 em{ font-style:normal; color:var(--accent); }
.home-hero p.lede{
  font-size:var(--fs-lg); line-height:1.6; color:#d8e1dc;
  max-width:60ch; margin:0 0 var(--sp-7);
}
.home-hero__ctas{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.home-hero__ctas .btn{
  background:#fafaf7; color:#163c31; padding:13px 22px;
  font-weight:600; border:0;
}
.home-hero__ctas .btn:hover{ background:#fff; color:#0f2c24; transform:translateY(-1px); }
.home-hero__ctas .btn--ghost{
  background:transparent; color:#fafaf7;
  border:1px solid rgba(255,255,255,.28);
}
.home-hero__ctas .btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.55); color:#fff; }

/* Trust bar */
.home-trust{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:var(--sp-7) 0;
}
.home-trust__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6);
}
.home-trust__item{ display:flex; align-items:center; gap:var(--sp-3); }
.home-trust__icon{
  width:42px; height:42px; flex-shrink:0;
  border-radius:50%; background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.home-trust__num{
  font-family:var(--font-serif); font-weight:600;
  font-size:var(--fs-lg); color:var(--ink); line-height:1.1;
}
.home-trust__lbl{ font-size:var(--fs-xs); color:var(--ink-3); margin-top:2px; }

/* Section headings */
.home-section{ padding:var(--sp-12) 0; }
.home-section__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-5); margin-bottom:var(--sp-7); flex-wrap:wrap;
}
.home-section__eyebrow{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin:0 0 var(--sp-2);
}
.home-section__title{
  font-family:var(--font-serif); font-size:var(--fs-2xl);
  margin:0; max-width:24ch; letter-spacing:-.01em;
}
.home-section__lede{
  color:var(--ink-2); max-width:48ch; line-height:1.65;
  font-size:var(--fs-base); margin:0;
}
.home-section__link{
  font-size:var(--fs-sm); font-weight:600; color:var(--brand);
  display:inline-flex; align-items:center; gap:6px;
}
.home-section__link::after{ content:"→"; transition:transform var(--transition); }
.home-section__link:hover::after{ transform:translateX(3px); }

/* Featured product grid */
.home-featured__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-5);
}
@media (max-width:1024px){ .home-featured__grid{ grid-template-columns:repeat(2,1fr); } }
/* Tablet: keep cart pill prominent but slightly more compact than desktop. */
@media (min-width:769px) and (max-width:1024px){
  .header-cart{padding:0 12px 0 10px;height:40px}
  .header-cart__label{font-size:var(--fs-xs);letter-spacing:.06em}
  .site-header__inner{gap:var(--sp-4)}
}
@media (max-width:560px){ .home-featured__grid{ grid-template-columns:1fr; } }

/* Categories strip */
.home-cats{ background:var(--surface-2); border-block:1px solid var(--line); padding:var(--sp-11) 0; }
.home-cats__row{
  display:flex; gap:var(--sp-4); overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:var(--sp-3);
  scrollbar-width:thin;
}
.home-cats__row::-webkit-scrollbar{ height:6px; }
.home-cats__row::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:3px; }
.home-cat{
  flex:0 0 240px; scroll-snap-align:start;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  display:flex; flex-direction:column;
  text-decoration:none; color:var(--ink);
}
.home-cat:hover{
  transform:translateY(-3px); border-color:var(--brand);
  box-shadow:var(--shadow-md); color:var(--ink);
}
.home-cat__vis{
  height:140px; background:linear-gradient(140deg,var(--brand-soft),var(--surface-3));
  display:flex; align-items:center; justify-content:center;
  color:var(--brand); position:relative;
}
.home-cat__vis img{ width:100%; height:100%; object-fit:cover; }
.home-cat__body{ padding:var(--sp-4); }
.home-cat__name{
  font-family:var(--font-serif); font-weight:600; font-size:var(--fs-md);
  margin:0 0 4px; color:var(--ink);
}
.home-cat__count{ font-size:var(--fs-xs); color:var(--ink-3); }

/* Quality section */
.home-quality__grid{
  display:grid; grid-template-columns:1.1fr 1fr; gap:var(--sp-9);
  align-items:center;
}
@media (max-width:880px){ .home-quality__grid{ grid-template-columns:1fr; } }
.home-quality__copy h2{ font-size:var(--fs-2xl); margin:0 0 var(--sp-4); }
.home-quality__copy p{ color:var(--ink-2); line-height:1.7; max-width:50ch; }
.home-quality__stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3);
}
.home-quality__stat{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--sp-5);
  position:relative; overflow:hidden;
}
.home-quality__stat::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--brand),var(--accent));
}
.home-quality__stat-num{
  font-family:var(--font-serif); font-weight:600;
  font-size:var(--fs-2xl); color:var(--ink); line-height:1.1;
  letter-spacing:-.01em;
}
.home-quality__stat-lbl{
  font-size:var(--fs-xs); color:var(--ink-3); margin-top:6px;
  text-transform:uppercase; letter-spacing:.08em; font-weight:600;
}

/* COA callout */
.home-coa{
  background:linear-gradient(120deg,#163c31 0%,#1d4e3f 60%,#235e4d 100%);
  color:#fafaf7; padding:var(--sp-11) 0; position:relative; overflow:hidden;
}
.home-coa::after{
  content:""; position:absolute; right:-100px; top:-100px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(168,132,58,.16),transparent 65%);
}
.home-coa__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-7); flex-wrap:wrap; position:relative; z-index:1;
}
.home-coa__copy h2{ font-family:var(--font-serif); font-size:var(--fs-2xl); color:#fff; margin:0 0 var(--sp-2); }
.home-coa__copy p{ color:#d8e1dc; max-width:54ch; margin:0; line-height:1.65; }
.home-coa .btn{ background:var(--accent); color:#1b1d1a; }
.home-coa .btn:hover{ background:#e1bd7c; color:#0d0f0d; }

/* FAQ teaser */
.home-faq{ padding:var(--sp-12) 0; }
.home-faq__grid{ max-width:var(--container-narrow); margin:0 auto; }
.home-faq__cta{ text-align:center; margin-top:var(--sp-7); }

/* Dark mode for homepage */
[data-theme="dark"] .home-trust{ background:var(--surface); }
[data-theme="dark"] .home-trust__icon{ background:var(--brand-soft); color:var(--color-link); }
[data-theme="dark"] .home-cats{ background:var(--surface-2); }
[data-theme="dark"] .home-cat{ background:var(--surface); border-color:var(--line); color:var(--ink); }
[data-theme="dark"] .home-cat:hover{ border-color:var(--color-link); color:var(--ink); }
[data-theme="dark"] .home-cat__name{ color:var(--ink); }
[data-theme="dark"] .home-quality__stat{ background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .home-section__link{ color:var(--color-link); }
[data-theme="dark"] .home-section__eyebrow{ color:var(--accent); }
[data-theme="dark"] .home-hero{
  background:
    radial-gradient(1200px 600px at 80% -10%,rgba(212,175,106,.16),transparent 60%),
    linear-gradient(160deg,#0d2820 0%,#091e18 60%,#050f0c 100%);
}

/* ===========================================================================
   Single product extras: synonyms list, sequence wrap, eyebrow link, tabs
   =========================================================================== */
.sp-synonyms{
  font-size:var(--fs-sm); color:var(--ink-2); line-height:1.6;
  margin:0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:6px;
}
.sp-synonyms li{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:3px 10px; font-size:var(--fs-xs);
}
.sp-sequence{
  font-family:"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:var(--fs-xs); line-height:1.6; word-break:break-all;
  background:var(--surface-2); padding:8px 10px; border-radius:var(--radius);
  border:1px solid var(--line); display:block;
}
[data-theme="dark"] .sp-synonyms li,
[data-theme="dark"] .sp-sequence{ background:var(--surface-2); border-color:var(--line); color:var(--ink-2); }

/* Tab switching state */
.sp-tab-panel.is-hidden{ display:none; }
.sp-tab.is-active{ background:var(--brand); color:#fff; border-color:var(--brand); }
[data-theme="dark"] .sp-tab.is-active{ background:var(--brand); color:#fff; }

/* ===========================================================================
   Single-product page additions: lede, eyebrow link, qty input, cart form
   =========================================================================== */
.sp-eyebrow a{
  color:var(--ink-3); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--transition), border-color var(--transition);
}
.sp-eyebrow a:hover{ color:var(--brand); border-bottom-color:var(--brand); }
[data-theme="dark"] .sp-eyebrow a{ color:var(--ink-3); }
[data-theme="dark"] .sp-eyebrow a:hover{ color:var(--color-link); border-bottom-color:var(--color-link); }

.sp-lede{
  font-family:var(--font-serif); font-size:var(--fs-lg);
  color:var(--ink-2); line-height:1.55; margin:var(--sp-2) 0 var(--sp-3);
  max-width:60ch;
}
[data-theme="dark"] .sp-lede{ color:var(--ink-2); }

.sp-sequence-wrap{ margin:var(--sp-3) 0 var(--sp-4); }

/* Quantity input row + add to cart, side by side */
.sp-qty-row{
  display:flex; gap:var(--sp-3); align-items:stretch;
  margin:var(--sp-3) 0 var(--sp-4);
}
.sp-qty{
  display:inline-flex; align-items:stretch;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); overflow:hidden;
  flex-shrink:0;
}
.sp-qty .qbtn{
  width:38px; height:auto; padding:0;
  background:transparent; border:0; color:var(--ink-2);
  font-size:1.1rem; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--transition), color var(--transition);
}
.sp-qty .qbtn:hover{ background:var(--surface-2); color:var(--brand); }
.sp-qty .qty-input{
  width:54px; border:0; border-left:1px solid var(--line); border-right:1px solid var(--line);
  background:transparent; color:var(--ink); text-align:center;
  font-family:var(--font); font-weight:600; font-size:var(--fs-base);
  -moz-appearance:textfield;
}
.sp-qty .qty-input::-webkit-outer-spin-button,
.sp-qty .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.sp-qty-row .btn{ flex:1; min-width:0; }
[data-theme="dark"] .sp-qty{ background:var(--surface-2); border-color:var(--line); }
[data-theme="dark"] .sp-qty .qbtn{ color:var(--ink-2); }
[data-theme="dark"] .sp-qty .qbtn:hover{ background:var(--surface-3); color:var(--color-link); }
[data-theme="dark"] .sp-qty .qty-input{ color:var(--ink); border-color:var(--line); }

@media (max-width:480px){
  .sp-qty-row{ flex-direction:column; }
  .sp-qty{ align-self:flex-start; }
}

/* Stock chip styling refresh — make in/low/out unmistakable */
.stock{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ok);
}
.stock::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:currentColor; box-shadow:0 0 0 0 currentColor;
}
.stock.is-in{ color:var(--ok); }
.stock.is-low{ color:var(--accent); }
.stock.is-out{ color:var(--danger); }

/* Card credentials line */
.card-creds{
  font-size:var(--fs-xs); color:var(--ink-3);
  letter-spacing:.02em; line-height:1.4; margin:0 0 6px;
  font-variant-numeric:tabular-nums;
}
[data-theme="dark"] .card-creds{ color:var(--ink-3); }

/* Card category tag (top-left) */
.card-tags--cat{ left:10px; right:auto; }
.card-tags--state{ right:10px; left:auto; }
.ctag.is-cat{
  background:rgba(255,255,255,.92); color:var(--brand);
  font-weight:600; backdrop-filter:saturate(140%) blur(6px);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  border:1px solid rgba(0,0,0,.04);
}
[data-theme="dark"] .ctag.is-cat{
  background:rgba(28,29,26,.85); color:var(--color-link);
  border-color:rgba(255,255,255,.08);
}

/* Card image placeholder */
.card-image-placeholder{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,var(--brand-soft),var(--surface-3));
  color:var(--brand);
}

/* CAS line on the card */
.cas{ font-size:var(--fs-xs); color:var(--ink-3); margin:0 0 4px; font-variant-numeric:tabular-nums; }
.cas__lbl{
  display:inline-block; font-weight:600; color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.08em; margin-right:4px;
}
.cas__val{ font-family:"SFMono-Regular",Menlo,Consolas,monospace; }

/* Wider variant of dose chip */
.dchip{
  background:var(--surface); border:1px solid var(--line);
  color:var(--ink-2); padding:6px 12px; border-radius:999px;
  font-size:var(--fs-xs); font-weight:600; cursor:pointer;
  transition:all var(--transition); font-family:var(--font);
}
.dchip:hover{ border-color:var(--brand); color:var(--brand); }
.dchip.sel{
  background:var(--brand); color:#fff; border-color:var(--brand);
}
[data-theme="dark"] .dchip{ background:var(--surface-2); border-color:var(--line); color:var(--ink-2); }
[data-theme="dark"] .dchip:hover{ border-color:var(--color-link); color:var(--color-link); }
[data-theme="dark"] .dchip.sel{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* CAS-on-single-product bar */
.sp-cas{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:var(--fs-sm); color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line);
  padding:5px 12px; border-radius:999px; align-self:flex-start;
}
[data-theme="dark"] .sp-cas{ background:var(--surface-2); border-color:var(--line); }

/* Variation-id hidden inputs should never display */
.nmchem-variation-id{ display:none !important; }

/* ===== Quality metrics table (About page) ===== */
.quality-table{
  width:100%;border-collapse:collapse;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
  font-size:var(--fs-sm);
}
.quality-table th,
.quality-table td{
  padding:14px 18px;text-align:left;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.quality-table thead th{
  background:var(--surface-2);
  font-size:var(--fs-xs);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:600;
}
.quality-table tbody th{
  font-weight:500;color:var(--ink-2);width:60%;
}
.quality-table tbody td{
  font-family:var(--font-serif,inherit);
  font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.quality-table tbody tr:last-child th,
.quality-table tbody tr:last-child td{border-bottom:0}
.quality-table tbody tr:hover th,
.quality-table tbody tr:hover td{background:var(--surface-2)}
@media (max-width:640px){
  .quality-table th,.quality-table td{padding:12px 14px}
}

/* Form micro-states (contact + newsletter) */
.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown){
  border-color:var(--danger,#c0392b);
}
.contact-form .field--error input,
.contact-form .field--error textarea{
  border-color:var(--danger,#c0392b);
  box-shadow:0 0 0 3px rgba(192,57,43,.12);
}
.form-msg.is-ok{color:var(--brand,#1d4e3f)}
.form-msg.is-err{color:var(--danger,#c0392b)}

/* ===========================================================================
   Universal table dark-mode normalisation
   ---------------------------------------------------------------------------
   Without these rules, tables fall back to the browser default (white
   background, black text) when [data-theme="dark"] is set, because
   WooCommerce / Storefront / WP core inject white table backgrounds via
   user-agent or parent-theme CSS. We re-bind every table surface to the
   theme tokens so light/dark switch cleanly.
   =========================================================================== */

/* Generic <table> baseline — ensures any unstyled table inside .page-content,
   the WordPress block editor, WooCommerce account pages, etc. picks up
   theme tokens instead of falling through to white. */
table{
  background:var(--surface);
  color:var(--ink);
  border-color:var(--line);
  border-collapse:collapse;
}
table th,
table td{
  background:transparent;
  color:inherit;
  border-color:var(--line);
}
table thead th,
table tfoot th,
table tfoot td{
  background:var(--surface-2);
  color:var(--ink-2);
}
table tbody tr:nth-child(even) td,
table tbody tr:nth-child(even) th{
  background:transparent;
}

/* WooCommerce account / cart / checkout tables (Storefront ships these
   with hardcoded light backgrounds via inline-ish rules, hence !important). */
[data-theme="dark"] table,
[data-theme="dark"] .woocommerce table,
[data-theme="dark"] .woocommerce-page table,
[data-theme="dark"] table.shop_table,
[data-theme="dark"] table.shop_attributes,
[data-theme="dark"] table.cart,
[data-theme="dark"] table.my_account_orders,
[data-theme="dark"] .woocommerce-orders-table,
[data-theme="dark"] .woocommerce-cart table,
[data-theme="dark"] .woocommerce-checkout table{
  background:var(--surface) !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
}
[data-theme="dark"] table th,
[data-theme="dark"] table td,
[data-theme="dark"] .woocommerce table th,
[data-theme="dark"] .woocommerce table td,
[data-theme="dark"] .woocommerce-page table th,
[data-theme="dark"] .woocommerce-page table td,
[data-theme="dark"] table.shop_table th,
[data-theme="dark"] table.shop_table td,
[data-theme="dark"] table.cart th,
[data-theme="dark"] table.cart td{
  background-color:transparent !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
}
[data-theme="dark"] table thead th,
[data-theme="dark"] table tfoot th,
[data-theme="dark"] table tfoot td,
[data-theme="dark"] .woocommerce table thead th,
[data-theme="dark"] .woocommerce table tfoot th,
[data-theme="dark"] .woocommerce table tfoot td,
[data-theme="dark"] table.shop_table thead th,
[data-theme="dark"] table.shop_table tfoot th,
[data-theme="dark"] table.shop_table tfoot td{
  background:var(--surface-2) !important;
  color:var(--ink-2) !important;
}
[data-theme="dark"] table tbody tr:hover td,
[data-theme="dark"] table tbody tr:hover th,
[data-theme="dark"] .woocommerce table tbody tr:hover td,
[data-theme="dark"] table.shop_table tbody tr:hover td{
  background:var(--surface-2) !important;
}
[data-theme="dark"] table caption{
  background:var(--surface-2) !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
}

/* Theme-specific named tables — explicit overrides so hover/zebra states
   pick up dark tokens rather than the light values bound at definition time. */
[data-theme="dark"] .coa-table,
[data-theme="dark"] .recon-table,
[data-theme="dark"] .quality-table{
  background:var(--surface);
  border-color:var(--line);
  color:var(--ink);
}
[data-theme="dark"] .coa-table th,
[data-theme="dark"] .coa-table td,
[data-theme="dark"] .recon-table th,
[data-theme="dark"] .recon-table td,
[data-theme="dark"] .quality-table th,
[data-theme="dark"] .quality-table td{
  border-color:var(--line);
  color:var(--ink);
}
[data-theme="dark"] .coa-table thead th,
[data-theme="dark"] .coa-table th:first-child,
[data-theme="dark"] .recon-table th,
[data-theme="dark"] .quality-table thead th{
  background:var(--surface-2);
  color:var(--ink-3);
}
[data-theme="dark"] .coa-table tr:hover td,
[data-theme="dark"] .recon-table tr:hover td,
[data-theme="dark"] .quality-table tbody tr:hover th,
[data-theme="dark"] .quality-table tbody tr:hover td{
  background:var(--surface-2);
}
[data-theme="dark"] .coa-cas{
  color:var(--ink-3);
}
[data-theme="dark"] .coa-link{
  background:var(--brand-soft);
  color:var(--color-link);
}
[data-theme="dark"] .coa-link:hover{
  background:var(--brand);
  color:#fff;
}
[data-theme="dark"] .quality-table tbody th{
  color:var(--ink-2);
}
[data-theme="dark"] .quality-table tbody td{
  color:var(--ink);
}

/* The COA search input also lives next to the table; keep it on-theme. */
[data-theme="dark"] .coa-search,
[data-theme="dark"] .coa-tools{
  background:var(--surface);
  border-color:var(--line);
  color:var(--ink);
}
[data-theme="dark"] .coa-search{
  background:var(--surface-2);
}
[data-theme="dark"] .coa-search::placeholder{ color:var(--ink-3); }


/* ===========================================================================
 * Production UI hardening — May 2026
 * ===========================================================================
 *
 * 1) Global `.table-wrap` utility — solves the "wide table breaks mobile
 *    layout" class of bugs (notably /coa-database/). Tables wrapped in
 *    `.table-wrap` are constrained to the wrapper's width, with horizontal
 *    momentum scroll inside the wrapper instead of forcing horizontal page
 *    drift. Dark-mode-aware via the existing token system.
 *
 * 2) Research-page component system (`.research-*`) — replaces ~50 inline
 *    `style="..."` attributes that hardcoded variable fallbacks like
 *    `var(--bg-2, #fafafa)` and `var(--brand-dark, #8a7042)`. Those
 *    fallbacks resolved to bright white (or wrong colour) in dark mode
 *    because the variables didn't exist and inline styles bypass theme
 *    cascade. All classes here use the canonical `--surface`,
 *    `--surface-2`, `--ink`, `--ink-2`, `--ink-3`, `--line`, `--brand`,
 *    `--brand-2`, `--radius-lg`, `--radius` tokens, which auto-cascade
 *    between light and dark via the existing `[data-theme="dark"]`
 *    overrides at the top of this file.
 *
 * 3) Scoped strictly to research-page DOM (`.research-page`,
 *    `.research-*`) and to the FAQ tab inside product pages
 *    (`.research-literature-list`). WooCommerce product pages, archive
 *    pages, and Storefront defaults are untouched.
 * ========================================================================= */

/* --- 1. Global table wrapper (used by /coa-database/, /identifiers/, future tables) --- */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
  margin:var(--sp-5) 0;
  -ms-overflow-style:-ms-autohiding-scrollbar;
  /* Visual cue that there's more content right (subtle inset shadow on edges) */
  background-image:
    linear-gradient(to right, var(--surface) 0%, var(--surface) 4%, rgba(0,0,0,0) 12%),
    linear-gradient(to left,  var(--surface) 0%, var(--surface) 4%, rgba(0,0,0,0) 12%);
  background-position:left center, right center;
  background-size:48px 100%, 48px 100%;
  background-repeat:no-repeat;
  background-attachment:local, local;
}
.table-wrap > table{
  margin:0;
  border:0;
  border-radius:0;
  width:100%;
}
/* Force horizontal scroll INSIDE the wrapper on mobile rather than letting
   the page itself scroll. min-width keeps columns readable instead of
   crushing them. */
@media (max-width:768px){
  .table-wrap > .coa-table,
  .table-wrap > .recon-table,
  .table-wrap > .quality-table,
  .table-wrap > .product-spec-table{
    min-width:640px;
  }
}

/* --- 2. Research pages — page container --- */
.research-page{
  padding:var(--sp-9) var(--sp-5) var(--sp-11);
  max-width:900px;
  margin:0 auto;
}
.research-page .woocommerce-breadcrumb,
.research-page > nav{
  font-size:var(--fs-sm);
  color:var(--ink-3);
  margin-bottom:var(--sp-5);
}
.research-page > nav a{ color:var(--ink-2); }
.research-page > header{ margin-top:var(--sp-5); }
.research-page > header h1{
  margin:0;
  font-size:var(--fs-3xl);
  line-height:1.15;
  color:var(--ink);
}
.research-eyebrow{
  margin:var(--sp-2) 0 0;
  color:var(--ink-3);
  font-size:var(--fs-sm);
  font-weight:500;
}

/* --- 3. Research pages — section wrapper --- */
.research-section{
  margin-top:var(--sp-8);
}
.research-section > h2{
  font-size:var(--fs-xl);
  margin:0 0 var(--sp-4);
  color:var(--ink);
  line-height:1.25;
}

/* --- 4. Identifier card (the asymmetric retrieval target) --- */
.research-identifiers{
  margin-top:var(--sp-7);
  padding:var(--sp-6);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
.research-identifiers > h2{
  margin:0 0 var(--sp-3);
  font-size:var(--fs-lg);
  color:var(--ink);
}
.research-identifiers__intro{
  margin:0 0 var(--sp-5);
  color:var(--ink-2);
  font-size:var(--fs-sm);
  max-width:60ch;
  line-height:1.55;
}
.research-identifier-grid{
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:var(--sp-2) var(--sp-5);
  margin:0;
  font-size:var(--fs-sm);
}
.research-identifier-grid dt{
  margin:0;
  color:var(--ink-2);
  font-weight:600;
}
.research-identifier-grid dd{
  margin:0;
  color:var(--ink);
  overflow-wrap:anywhere;
  word-break:break-word;
}
.research-identifier-grid code{
  background:var(--surface);
  color:var(--ink);
  padding:1px 6px;
  border-radius:var(--radius);
  font-size:0.92em;
  border:1px solid var(--line);
}
.research-identifier-grid dd.iupac{
  font-size:0.88em;
  line-height:1.45;
  color:var(--ink-2);
}

/* --- 5. Prose blocks --- */
.research-prose{
  max-width:70ch;
  color:var(--ink);
  line-height:1.65;
  font-size:var(--fs-base);
}
.research-prose p{
  margin:0 0 var(--sp-4);
}
.research-prose p:last-child{ margin-bottom:0; }
.research-prose strong{
  color:var(--ink);
  font-weight:600;
}

/* --- 6. Analytical-specifications section --- */
.research-analytical p{
  max-width:78ch;
  color:var(--ink);
  margin:0 0 var(--sp-4);
  line-height:1.65;
}

/* --- 7. Research-use disclaimer --- */
.research-disclaimer{
  margin-top:var(--sp-10);
  padding:var(--sp-5);
  background:var(--surface-2);
  border-left:4px solid var(--line-2);
  color:var(--ink-2);
  font-size:var(--fs-sm);
  line-height:1.6;
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
}
.research-disclaimer strong{
  color:var(--ink);
  font-weight:600;
}

/* --- 8. Related-compounds grid --- */
.research-related-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:var(--sp-3);
  list-style:none;
  padding:0;
  margin:var(--sp-4) 0 0;
}
.research-related-list > li{
  padding:var(--sp-3) var(--sp-4);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color var(--transition), transform var(--transition);
}
.research-related-list > li:hover{
  border-color:var(--brand);
  transform:translateY(-1px);
}
.research-related-list a{
  font-weight:600;
  color:var(--brand);
  display:block;
  text-decoration:none;
}
[data-theme="dark"] .research-related-list a{ color:var(--color-link); }
.research-related-list__class{
  color:var(--ink-3);
  font-size:var(--fs-xs);
  margin-top:2px;
  font-weight:400;
}

/* --- 9. FAQ accordion --- */
.research-faq{
  max-width:78ch;
  margin-top:var(--sp-5);
}
.research-faq details{
  margin-bottom:var(--sp-3);
  padding:var(--sp-4);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color var(--transition);
}
.research-faq details[open]{
  border-color:var(--brand);
}
.research-faq summary{
  cursor:pointer;
  font-weight:600;
  color:var(--ink);
  list-style:none;
  position:relative;
  padding-right:calc(var(--sp-6) + var(--sp-2));
  line-height:1.4;
}
.research-faq summary::-webkit-details-marker{ display:none; }
.research-faq summary::after{
  content:'+';
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  color:var(--ink-3);
  font-size:1.4em;
  font-weight:400;
  line-height:1;
  transition:color var(--transition);
}
.research-faq details[open] summary::after{
  content:'−';
  color:var(--brand);
}
[data-theme="dark"] .research-faq details[open] summary::after{ color:var(--color-link); }
.research-faq__body{
  padding-top:var(--sp-3);
  color:var(--ink-2);
  line-height:1.6;
}
.research-faq__body p{ margin:0 0 var(--sp-3); }
.research-faq__body p:last-child{ margin-bottom:0; }

/* --- 10. CTA panel (commerce link from /research/ pages) --- */
.research-cta{
  margin-top:var(--sp-10);
  padding:var(--sp-8) var(--sp-7);
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color:#fff;
  border-radius:var(--radius-lg);
  text-align:center;
  box-shadow:var(--shadow-md);
}
.research-cta h2{
  margin:0 0 var(--sp-3);
  color:#fff;
  font-size:var(--fs-xl);
  line-height:1.25;
}
.research-cta p{
  margin:0 auto var(--sp-5);
  max-width:60ch;
  color:rgba(255,255,255,0.92);
  line-height:1.55;
}
.research-cta .btn--inverse{
  background:#fff;
  color:var(--brand-2);
  font-weight:700;
  padding:12px 28px;
  border-radius:var(--radius);
  text-decoration:none;
  display:inline-block;
  transition:background var(--transition), color var(--transition), transform var(--transition);
}
.research-cta .btn--inverse:hover{
  background:rgba(255,255,255,0.94);
  color:var(--brand);
  text-decoration:none;
  transform:translateY(-1px);
}

/* --- 11. Citations list (research-page literature section) --- */
.research-citations{
  padding-left:var(--sp-5);
  margin:var(--sp-4) 0 0;
  max-width:78ch;
  color:var(--ink);
}
.research-citations > li{
  margin-bottom:var(--sp-4);
  line-height:1.55;
}
.research-citations > li:last-child{ margin-bottom:0; }
.research-citations strong{
  color:var(--ink);
  font-weight:600;
  display:block;
  margin-bottom:2px;
}
.research-citations em{
  color:var(--ink-2);
  font-style:italic;
}
.research-citations a{ color:var(--brand); }
[data-theme="dark"] .research-citations a{ color:var(--color-link); }
.research-citations__intro{
  color:var(--ink-2);
  max-width:60ch;
  margin:0;
  font-size:var(--fs-sm);
  line-height:1.5;
}

/* --- 12. Research index page (the /research/ hub) --- */
.research-index{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:var(--sp-5);
  list-style:none;
  padding:0;
  margin:var(--sp-7) 0 0;
}
.research-index > li{
  padding:var(--sp-5);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  transition:border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.research-index > li:hover{
  border-color:var(--brand);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.research-index h2{
  margin:0 0 var(--sp-2);
  font-size:var(--fs-md);
  line-height:1.3;
}
.research-index a{
  color:var(--ink);
  font-weight:600;
  text-decoration:none;
}
.research-index > li:hover a{ color:var(--brand); }
[data-theme="dark"] .research-index > li:hover a{ color:var(--color-link); }
.research-index__class{
  color:var(--ink-3);
  font-size:var(--fs-sm);
  margin:0;
  line-height:1.4;
}
.research-index__meta{
  color:var(--ink-3);
  font-size:var(--fs-sm);
  margin:var(--sp-3) 0 var(--sp-5);
  line-height:1.5;
}
.research-index__meta a{ color:var(--brand); }
[data-theme="dark"] .research-index__meta a{ color:var(--color-link); }
.research-index__lede{
  margin-top:var(--sp-5);
}

/* --- 13. "Research deep-dive" callout on product pages --- */
.research-deep-dive{
  margin-top:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  background:var(--surface-2);
  border-left:3px solid var(--brand);
  font-size:var(--fs-sm);
  color:var(--ink-2);
  border-radius:0 var(--radius) var(--radius) 0;
}
.research-deep-dive strong{ color:var(--ink); }
.research-deep-dive a{
  color:var(--brand);
  font-weight:600;
}
[data-theme="dark"] .research-deep-dive a{ color:var(--color-link); }

/* --- 14. Literature list inside the product-page tab --- */
.nmchem-literature-list,
.research-literature-list{
  padding-left:var(--sp-5);
  margin:var(--sp-4) 0 0;
  max-width:78ch;
  color:var(--ink);
}
.nmchem-literature-list > li,
.research-literature-list > li{
  margin-bottom:var(--sp-4);
  line-height:1.55;
}
.nmchem-literature-list strong,
.research-literature-list strong{
  color:var(--ink);
  font-weight:600;
}
.nmchem-literature-list em,
.research-literature-list em{ color:var(--ink-2); }
.nmchem-literature-list a,
.research-literature-list a{ color:var(--brand); }
[data-theme="dark"] .nmchem-literature-list a,
[data-theme="dark"] .research-literature-list a{ color:var(--color-link); }
.research-literature__intro{
  color:var(--ink-2);
  font-size:var(--fs-sm);
  max-width:60ch;
  margin:0;
  line-height:1.5;
}
.research-literature__meta{
  color:var(--ink-3);
  font-size:var(--fs-xs);
  margin-top:var(--sp-3);
  line-height:1.5;
}

/* --- 15. Mobile responsive (mobile-first refinement at ≤768px) --- */
@media (max-width:768px){
  .research-page{
    padding:var(--sp-6) var(--sp-4) var(--sp-9);
  }
  .research-page > header h1{
    font-size:var(--fs-2xl);
  }
  .research-section{
    margin-top:var(--sp-7);
  }
  .research-section > h2{
    font-size:var(--fs-lg);
  }
  .research-identifiers{
    padding:var(--sp-5) var(--sp-4);
  }
  .research-identifier-grid{
    grid-template-columns:1fr;
    gap:var(--sp-1) 0;
  }
  .research-identifier-grid dt{
    margin-top:var(--sp-3);
  }
  .research-identifier-grid dt:first-of-type{
    margin-top:0;
  }
  .research-cta{
    padding:var(--sp-7) var(--sp-5);
  }
  .research-cta h2{ font-size:var(--fs-lg); }
  .research-related-list{ grid-template-columns:1fr; }
  .research-index{ grid-template-columns:1fr; }
  .research-faq summary{ line-height:1.5; }
}

/* --- 16. Avoid layout shift on first paint (preserve grid/space) --- */
.research-card,
.research-identifiers,
.research-cta,
.research-disclaimer,
.research-index > li,
.research-related-list > li,
.research-faq details{
  contain:layout style;
}


/* ===========================================================================
 * Dark-mode WooCommerce form-input + order-confirmation hardening
 * ===========================================================================
 *
 * Problem: customers on dark-mode couldn't see what they were typing into
 * checkout fields. The existing `[data-theme="dark"] input` rule (line ~107)
 * has specificity (0,1,1) — but WooCommerce ships `.woocommerce form
 * .form-row input.input-text` which is (0,3,1). WC's CSS wins, leaving
 * bright-white inputs on a dark page.
 *
 * Same problem on the order-received / view-order / account pages: the
 * `<table class="woocommerce-table">` and `.woocommerce-order-details`
 * components fall through to Storefront defaults which assume light mode.
 *
 * Fix: explicit dark-mode rules with matching-or-higher specificity,
 * scoped to the `[data-theme="dark"]` body class so light-mode is
 * untouched. All colors via existing token system (`--surface`, `--ink`,
 * `--line`, `--brand-soft`, `--focus-ring`).
 * ========================================================================= */

/* --- A. All WooCommerce / Storefront form inputs in dark mode --- */
[data-theme="dark"] .woocommerce form .form-row input.input-text,
[data-theme="dark"] .woocommerce form .form-row textarea,
[data-theme="dark"] .woocommerce form .form-row select,
[data-theme="dark"] .woocommerce-page form .form-row input.input-text,
[data-theme="dark"] .woocommerce-page form .form-row textarea,
[data-theme="dark"] .woocommerce-checkout form .form-row .input-text,
[data-theme="dark"] .woocommerce-EditAccountForm input.input-text,
[data-theme="dark"] .woocommerce-Address-content input.input-text,
[data-theme="dark"] form.checkout_coupon input,
[data-theme="dark"] form.lost_reset_password input,
[data-theme="dark"] form.woocommerce-form-login input,
[data-theme="dark"] form.woocommerce-form-register input,
[data-theme="dark"] .woocommerce form .form-row .select2-selection,
[data-theme="dark"] .woocommerce form .form-row .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-dropdown,
[data-theme="dark"] .select2-search--dropdown .select2-search__field{
    background:var(--surface) !important;
    color:var(--ink) !important;
    border:1px solid var(--line) !important;
    border-radius:var(--radius);
}
[data-theme="dark"] .woocommerce form .form-row input.input-text::placeholder,
[data-theme="dark"] .woocommerce form .form-row textarea::placeholder,
[data-theme="dark"] form.woocommerce-form-login input::placeholder,
[data-theme="dark"] form.woocommerce-form-register input::placeholder{
    color:var(--ink-3) !important;
}
[data-theme="dark"] .woocommerce form .form-row input.input-text:focus,
[data-theme="dark"] .woocommerce form .form-row textarea:focus,
[data-theme="dark"] .woocommerce form .form-row select:focus,
[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection,
[data-theme="dark"] .select2-search--dropdown .select2-search__field:focus{
    border-color:var(--brand) !important;
    box-shadow:var(--focus-ring) !important;
    outline:0;
}
[data-theme="dark"] .woocommerce form .form-row label,
[data-theme="dark"] .woocommerce-page form .form-row label,
[data-theme="dark"] .woocommerce-checkout .form-row label,
[data-theme="dark"] .woocommerce-shipping-fields label,
[data-theme="dark"] .woocommerce-billing-fields label{
    color:var(--ink) !important;
}
[data-theme="dark"] .woocommerce form .form-row .optional,
[data-theme="dark"] .woocommerce-page form .form-row .optional{
    color:var(--ink-3) !important;
}

/* Required-field asterisk should stay visible */
[data-theme="dark"] .woocommerce form .form-row.required label .required,
[data-theme="dark"] .woocommerce form .required{
    color:var(--accent) !important;
}

/* Select2 dropdown option list in dark mode */
[data-theme="dark"] .select2-container--default .select2-results__option{
    background:var(--surface) !important;
    color:var(--ink) !important;
}
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected]{
    background:var(--brand) !important;
    color:#fff !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered{
    color:var(--ink) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder{
    color:var(--ink-3) !important;
}

/* --- B. Checkout payment-method box (the bordered #payment ul) --- */
[data-theme="dark"] #payment,
[data-theme="dark"] .woocommerce-checkout #payment,
[data-theme="dark"] .woocommerce-checkout #payment ul.payment_methods{
    background:var(--surface) !important;
    color:var(--ink) !important;
    border-color:var(--line) !important;
}
[data-theme="dark"] .woocommerce-checkout #payment ul.payment_methods li{
    background:transparent !important;
    color:var(--ink) !important;
    border-bottom:1px solid var(--line);
}
[data-theme="dark"] .woocommerce-checkout #payment ul.payment_methods li label{
    color:var(--ink) !important;
}
[data-theme="dark"] .woocommerce-checkout #payment div.payment_box{
    background:var(--surface-2) !important;
    color:var(--ink) !important;
}
[data-theme="dark"] .woocommerce-checkout #payment div.payment_box::before{
    border-color:transparent transparent var(--surface-2) !important;
}

/* --- C. Order review / cart totals tables --- */
[data-theme="dark"] .woocommerce-checkout-review-order,
[data-theme="dark"] .woocommerce-checkout-review-order-table,
[data-theme="dark"] table.shop_table,
[data-theme="dark"] table.shop_table_responsive,
[data-theme="dark"] .woocommerce table.shop_table,
[data-theme="dark"] .woocommerce-page table.shop_table{
    background:var(--surface) !important;
    color:var(--ink) !important;
    border-color:var(--line) !important;
}
[data-theme="dark"] table.shop_table th,
[data-theme="dark"] table.shop_table td,
[data-theme="dark"] .woocommerce table.shop_table th,
[data-theme="dark"] .woocommerce table.shop_table td,
[data-theme="dark"] .woocommerce-checkout-review-order-table th,
[data-theme="dark"] .woocommerce-checkout-review-order-table td{
    background:transparent !important;
    color:var(--ink) !important;
    border-color:var(--line) !important;
}
[data-theme="dark"] table.shop_table thead th,
[data-theme="dark"] .woocommerce table.shop_table thead th,
[data-theme="dark"] .woocommerce-checkout-review-order-table thead th{
    background:var(--surface-2) !important;
    color:var(--ink-2) !important;
}
[data-theme="dark"] table.shop_table tfoot th,
[data-theme="dark"] table.shop_table tfoot td,
[data-theme="dark"] .woocommerce table.shop_table tfoot th{
    background:var(--surface-2) !important;
    color:var(--ink) !important;
}

/* --- D. Order-received / thank-you / view-order pages --- */
[data-theme="dark"] .woocommerce-order,
[data-theme="dark"] .woocommerce-order-received,
[data-theme="dark"] .woocommerce-thankyou-order-received,
[data-theme="dark"] ul.woocommerce-thankyou-order-details,
[data-theme="dark"] ul.order_details,
[data-theme="dark"] .woocommerce-order-details,
[data-theme="dark"] .woocommerce-customer-details,
[data-theme="dark"] .woocommerce-columns--addresses,
[data-theme="dark"] .woocommerce-column__title,
[data-theme="dark"] .woocommerce-order-details__title,
[data-theme="dark"] .woocommerce-customer-details address{
    background:transparent !important;
    color:var(--ink) !important;
}
[data-theme="dark"] ul.order_details,
[data-theme="dark"] ul.woocommerce-thankyou-order-details{
    background:var(--surface) !important;
    border:1px solid var(--line) !important;
    border-radius:var(--radius-lg);
    box-shadow:none !important;
    padding:var(--sp-5) !important;
}
[data-theme="dark"] ul.order_details li,
[data-theme="dark"] ul.woocommerce-thankyou-order-details li{
    color:var(--ink-2) !important;
    border-color:var(--line) !important;
}
[data-theme="dark"] ul.order_details li strong,
[data-theme="dark"] ul.woocommerce-thankyou-order-details li strong{
    color:var(--ink) !important;
}
[data-theme="dark"] .woocommerce-customer-details address{
    background:var(--surface) !important;
    border:1px solid var(--line) !important;
    border-radius:var(--radius);
    padding:var(--sp-4) !important;
    color:var(--ink-2) !important;
}

/* --- E. Account dashboard sidebar + navigation --- */
[data-theme="dark"] .woocommerce-MyAccount-navigation ul li a,
[data-theme="dark"] nav.woocommerce-MyAccount-navigation a{
    color:var(--ink-2) !important;
}
[data-theme="dark"] .woocommerce-MyAccount-navigation ul li.is-active a,
[data-theme="dark"] .woocommerce-MyAccount-navigation ul li:hover a{
    color:var(--brand) !important;
}
[data-theme="dark"] .woocommerce-MyAccount-content{
    color:var(--ink) !important;
}

/* --- F. Coupon-code field and notices --- */
[data-theme="dark"] .woocommerce-form-coupon-toggle .woocommerce-info,
[data-theme="dark"] .woocommerce form .woocommerce-info,
[data-theme="dark"] .woocommerce form .woocommerce-message{
    background:var(--surface-2) !important;
    color:var(--ink) !important;
    border-color:var(--brand) !important;
}
[data-theme="dark"] .woocommerce-form-coupon-toggle .woocommerce-info a,
[data-theme="dark"] .woocommerce form .woocommerce-info a{
    color:var(--color-link) !important;
}

/* --- G. Address-form / billing/shipping headings --- */
[data-theme="dark"] .woocommerce-billing-fields h3,
[data-theme="dark"] .woocommerce-shipping-fields h3,
[data-theme="dark"] .woocommerce-additional-fields h3,
[data-theme="dark"] #order_review_heading,
[data-theme="dark"] .woocommerce-checkout h3{
    color:var(--ink) !important;
}

/* --- H. The BACS bank-details block (rendered by nmchem-bacs-fix.php) --- */
[data-theme="dark"] .bacs-details{
    background:var(--surface-2) !important;
    border-color:var(--line) !important;
    border-left-color:var(--brand) !important;
    color:var(--ink) !important;
}
[data-theme="dark"] .bacs-details__card{
    background:var(--surface) !important;
    border-color:var(--line) !important;
}
[data-theme="dark"] .bacs-details__card dd code{
    background:var(--surface-2) !important;
    border-color:var(--line) !important;
    color:var(--ink) !important;
}
[data-theme="dark"] .bacs-details__reminder{
    background:var(--surface) !important;
    border-color:var(--line) !important;
    color:var(--ink) !important;
}


/* ===========================================================================
 * WooCommerce BLOCK-based Cart & Checkout — dark-mode overrides
 * ===========================================================================
 *
 * The site uses the Gutenberg Cart Block and Checkout Block (the new
 * checkout pipeline, not the classic /checkout/ shortcode). Its DOM is
 * entirely different — every class is prefixed `wc-block-components-*`
 * and the rules above (targeting `.woocommerce form .form-row …`) don't
 * reach it.
 *
 * Below covers every visible surface a customer sees in dark mode:
 *   - text/email/tel input fields (floating-label pattern)
 *   - select dropdowns + Select2 fallback
 *   - checkbox + radio controls
 *   - payment-method tiles (BACS row, instructions)
 *   - order-summary panel (right column)
 *   - cart-line items
 *   - step headers + section dividers
 *   - notice banners (success / error / info)
 *   - the place-order button (already brand-coloured, but ensure)
 *
 * Selectors are scoped to `[data-theme="dark"]` so light mode is
 * untouched. Specificity is matched against WC block default rules
 * (typically 0,2,0–0,3,0) and reinforced with `!important` where WC
 * inlines colours via CSS variables we can't otherwise override.
 * ========================================================================= */

/* --- Block: text / email / tel / number inputs --- */
[data-theme="dark"] .wc-block-components-text-input input,
[data-theme="dark"] .wc-block-components-text-input textarea,
[data-theme="dark"] .wc-block-components-text-input input[type="email"],
[data-theme="dark"] .wc-block-components-text-input input[type="text"],
[data-theme="dark"] .wc-block-components-text-input input[type="tel"],
[data-theme="dark"] .wc-block-components-text-input input[type="number"],
[data-theme="dark"] .wc-block-components-text-input input[type="search"],
[data-theme="dark"] .wc-block-components-address-form input,
[data-theme="dark"] .wc-block-components-form input,
[data-theme="dark"] .wc-block-components-form textarea{
    background:var(--surface) !important;
    color:var(--ink) !important;
    border:1px solid var(--line) !important;
    border-radius:var(--radius);
    caret-color:var(--ink);
}
[data-theme="dark"] .wc-block-components-text-input input:focus,
[data-theme="dark"] .wc-block-components-text-input textarea:focus,
[data-theme="dark"] .wc-block-components-address-form input:focus,
[data-theme="dark"] .wc-block-components-form input:focus,
[data-theme="dark"] .wc-block-components-form textarea:focus{
    border-color:var(--brand) !important;
    box-shadow:var(--focus-ring) !important;
    outline:0 !important;
}

/* Block-style floating labels — when the field is empty, label sits
   inside the input; when typed, it floats to the top edge. Both
   states need readable colours. */
[data-theme="dark"] .wc-block-components-text-input label,
[data-theme="dark"] .wc-block-components-address-form label,
[data-theme="dark"] .wc-block-components-form label{
    color:var(--ink-3) !important;
    background:transparent !important;
}
[data-theme="dark"] .wc-block-components-text-input.is-active label,
[data-theme="dark"] .wc-block-components-text-input input:focus + label,
[data-theme="dark"] .wc-block-components-text-input input:not(:placeholder-shown) + label{
    color:var(--ink-2) !important;
    background:var(--surface) !important; /* avoids the label-on-input-border crash with theme bg */
    padding:0 4px !important;
}

/* Validation messages */
[data-theme="dark"] .wc-block-components-validation-error,
[data-theme="dark"] .wc-block-components-form .wc-block-components-validation-error{
    color:var(--danger) !important;
}

/* --- Block: select dropdowns --- */
[data-theme="dark"] .wc-block-components-select select,
[data-theme="dark"] .wc-block-components-country-input select,
[data-theme="dark"] .wc-block-components-state-input select,
[data-theme="dark"] .wc-block-components-combobox-control__suggestions-container,
[data-theme="dark"] .wc-block-components-combobox-control__input{
    background:var(--surface) !important;
    color:var(--ink) !important;
    border:1px solid var(--line) !important;
}
[data-theme="dark"] .wc-block-components-combobox-control__suggestions-container li,
[data-theme="dark"] .wc-block-components-combobox-control__suggestions-container .components-form-token-field__suggestion{
    background:var(--surface) !important;
    color:var(--ink) !important;
}
[data-theme="dark"] .wc-block-components-combobox-control__suggestions-container li:hover,
[data-theme="dark"] .wc-block-components-combobox-control__suggestions-container .components-form-token-field__suggestion.is-selected{
    background:var(--brand) !important;
    color:#fff !important;
}

/* --- Block: checkboxes + radios --- */
[data-theme="dark"] .wc-block-components-checkbox .wc-block-components-checkbox__input,
[data-theme="dark"] .wc-block-components-radio-control__option input[type="radio"],
[data-theme="dark"] input[type="checkbox"].wc-block-components-checkbox__input{
    background:var(--surface) !important;
    border:1px solid var(--line) !important;
}
[data-theme="dark"] .wc-block-components-checkbox .wc-block-components-checkbox__input:checked,
[data-theme="dark"] .wc-block-components-radio-control__option input[type="radio"]:checked{
    background:var(--brand) !important;
    border-color:var(--brand) !important;
}
[data-theme="dark"] .wc-block-components-checkbox .wc-block-components-checkbox__label,
[data-theme="dark"] .wc-block-components-radio-control__option-layout,
[data-theme="dark"] .wc-block-components-radio-control__label{
    color:var(--ink) !important;
}
[data-theme="dark"] .wc-block-components-checkbox__mark{
    /* the inline SVG tick — recolour to keep visible on the brand fill */
    fill:#fff !important;
    color:#fff !important;
}

/* --- Block: step containers + headings --- */
[data-theme="dark"] .wc-block-checkout,
[data-theme="dark"] .wc-block-checkout__form,
[data-theme="dark"] .wc-block-checkout__main,
[data-theme="dark"] .wc-block-checkout__sidebar,
[data-theme="dark"] .wc-block-cart,
[data-theme="dark"] .wc-block-cart__main,
[data-theme="dark"] .wc-block-cart__sidebar{
    background:transparent !important;
    color:var(--ink) !important;
}
[data-theme="dark"] .wc-block-components-checkout-step,
[data-theme="dark"] .wp-block-woocommerce-checkout-contact-information-block,
[data-theme="dark"] .wp-block-woocommerce-checkout-shipping-address-block,
[data-theme="dark"] .wp-block-woocommerce-checkout-billing-address-block,
[data-theme="dark"] .wp-block-woocommerce-checkout-shipping-method-block,
[data-theme="dark"] .wp-block-woocommerce-checkout-payment-block,
[data-theme="dark"] .wp-block-woocommerce-checkout-order-note-block,
[data-theme="dark"] .wp-block-woocommerce-checkout-additional-information-block{
    background:transparent !important;
    color:var(--ink) !important;
    border-color:var(--line) !important;
}
[data-theme="dark"] .wc-block-components-checkout-step__title,
[data-theme="dark"] .wc-block-components-title,
[data-theme="dark"] .wc-block-components-checkout-step__heading-content,
[data-theme="dark"] .wc-block-components-checkout-step h2,
[data-theme="dark"] .wc-block-checkout h2,
[data-theme="dark"] .wc-block-cart h2{
    color:var(--ink) !important;
}
[data-theme="dark"] .wc-block-components-checkout-step__description{
    color:var(--ink-2) !important;
}

/* --- Block: payment-method tiles --- */
[data-theme="dark"] .wc-block-components-payment-methods,
[data-theme="dark"] .wc-block-components-radio-control{
    background:var(--surface) !important;
    border:1px solid var(--line) !important;
    border-radius:var(--radius);
    color:var(--ink) !important;
}
[data-theme="dark"] .wc-block-components-radio-control__option{
    background:transparent !important;
    color:var(--ink) !important;
    border-bottom:1px solid var(--line) !important;
}
[data-theme="dark"] .wc-block-components-radio-control__option:last-child{
    border-bottom:0 !important;
}
[data-theme="dark"] .wc-block-components-payment-method-label,
[data-theme="dark"] .wc-block-components-payment-method-content{
    color:var(--ink) !important;
}
[data-theme="dark"] .wc-block-components-payment-method-content{
    background:var(--surface-2) !important;
    border-radius:var(--radius);
}

/* --- Block: order-summary sidebar --- */
[data-theme="dark"] .wc-block-components-totals-wrapper,
[data-theme="dark"] .wc-block-components-totals-item,
[data-theme="dark"] .wc-block-components-totals-footer-item,
[data-theme="dark"] .wc-block-components-totals-coupon,
[data-theme="dark"] .wc-block-components-order-summary,
[data-theme="dark"] .wc-block-components-order-summary-item{
    background:transparent !important;
    color:var(--ink) !important;
    border-color:var(--line) !important;
}
[data-theme="dark"] .wc-block-components-totals-item__label,
[data-theme="dark"] .wc-block-components-totals-item__value,
[data-theme="dark"] .wc-block-components-totals-footer-item-tax{
    color:var(--ink) !important;
}
[data-theme="dark"] .wc-block-components-totals-item__description{
    color:var(--ink-3) !important;
}
[data-theme="dark"] .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
    color:var(--ink) !important;
    font-weight:700;
}

/* --- Block: cart-line items + product info --- */
[data-theme="dark"] .wc-block-cart-items,
[data-theme="dark"] .wc-block-cart-items__row,
[data-theme="dark"] .wc-block-components-order-summary-item__container{
    background:transparent !important;
    color:var(--ink) !important;
    border-color:var(--line) !important;
}
[data-theme="dark"] .wc-block-components-product-name,
[data-theme="dark"] .wc-block-cart-item__product-name,
[data-theme="dark"] .wc-block-components-order-summary-item__title{
    color:var(--ink) !important;
}
[data-theme="dark"] .wc-block-components-product-price,
[data-theme="dark"] .wc-block-components-product-price__value,
[data-theme="dark"] .wc-block-components-formatted-money-amount,
[data-theme="dark"] .wc-block-components-order-summary-item__individual-prices{
    color:var(--ink) !important;
}
[data-theme="dark"] .wc-block-components-product-metadata,
[data-theme="dark"] .wc-block-components-product-details,
[data-theme="dark"] .wc-block-components-order-summary-item__quantity,
[data-theme="dark"] .wc-block-components-quantity-selector{
    color:var(--ink-2) !important;
}
[data-theme="dark"] .wc-block-components-quantity-selector__button{
    background:var(--surface-2) !important;
    color:var(--ink) !important;
    border:1px solid var(--line) !important;
}
[data-theme="dark"] .wc-block-components-quantity-selector__input{
    background:var(--surface) !important;
    color:var(--ink) !important;
    border:1px solid var(--line) !important;
}

/* --- Block: notice banners (success / info / error) --- */
[data-theme="dark"] .wc-block-components-notice-banner{
    background:var(--surface-2) !important;
    color:var(--ink) !important;
    border-color:var(--line) !important;
}
[data-theme="dark"] .wc-block-components-notice-banner.is-error{
    background:var(--danger-soft) !important;
    border-color:var(--danger) !important;
    color:var(--ink) !important;
}
[data-theme="dark"] .wc-block-components-notice-banner.is-success{
    background:var(--brand-soft) !important;
    border-color:var(--brand) !important;
    color:var(--ink) !important;
}

/* --- Block: place-order button + login/coupon panels --- */
[data-theme="dark"] .wc-block-components-button.wc-block-components-checkout-place-order-button,
[data-theme="dark"] .wc-block-components-checkout-place-order-button,
[data-theme="dark"] .wp-block-button__link.wc-block-components-button{
    background:var(--brand) !important;
    color:#fff !important;
    border:0 !important;
}
[data-theme="dark"] .wc-block-components-button.wc-block-components-checkout-place-order-button:hover{
    background:var(--brand-2) !important;
}
[data-theme="dark"] .wc-block-components-button.is-link,
[data-theme="dark"] .wc-block-components-button-link{
    color:var(--color-link) !important;
}
[data-theme="dark"] .wc-block-checkout__login-prompt-message,
[data-theme="dark"] .wc-block-checkout__terms{
    color:var(--ink-2) !important;
}

/* --- Block: divider lines + coupon-toggle panel --- */
[data-theme="dark"] .wc-block-components-panel,
[data-theme="dark"] .wc-block-components-panel__button,
[data-theme="dark"] .wc-block-components-totals-coupon__button,
[data-theme="dark"] .wc-block-components-totals-coupon__form{
    background:transparent !important;
    color:var(--ink) !important;
    border-color:var(--line) !important;
}
[data-theme="dark"] .wc-block-components-panel__button{
    color:var(--ink-2) !important;
}
[data-theme="dark"] .wc-block-components-panel__button:hover{
    color:var(--ink) !important;
}

/* --- Block: shipping rates radios --- */
[data-theme="dark"] .wc-block-components-shipping-rates-control,
[data-theme="dark"] .wc-block-components-shipping-rates-control__package{
    background:var(--surface) !important;
    color:var(--ink) !important;
    border:1px solid var(--line) !important;
    border-radius:var(--radius);
}
[data-theme="dark"] .wc-block-components-shipping-rates-control__package-title,
[data-theme="dark"] .wc-block-components-shipping-rates-control__no-results-notice{
    color:var(--ink) !important;
}

/* --- Block: address-summary card after submission --- */
[data-theme="dark"] .wc-block-components-address-card,
[data-theme="dark"] .wc-block-components-address-card__address,
[data-theme="dark"] .wc-block-components-shipping-address__address{
    background:var(--surface) !important;
    color:var(--ink) !important;
    border-color:var(--line) !important;
}
[data-theme="dark"] .wc-block-components-address-card .wc-block-components-button{
    color:var(--color-link) !important;
}

/* --- Block: contact-information / guest checkout notice --- */
[data-theme="dark"] #wc-guest-checkout-notice,
[data-theme="dark"] .wc-block-components-checkout-step__heading-description{
    color:var(--ink-2) !important;
}

/* --- Block: autocomplete browser fill (Chrome / Edge) — kill the
       bright yellow auto-fill background that overrides our dark BG --- */
[data-theme="dark"] .wc-block-components-text-input input:-webkit-autofill,
[data-theme="dark"] .wc-block-components-text-input input:-webkit-autofill:hover,
[data-theme="dark"] .wc-block-components-text-input input:-webkit-autofill:focus,
[data-theme="dark"] .wc-block-components-text-input input:-webkit-autofill:active{
    -webkit-box-shadow:0 0 0 1000px var(--surface) inset !important;
    -webkit-text-fill-color:var(--ink) !important;
    caret-color:var(--ink) !important;
    transition:background-color 9999s ease-in-out 0s; /* defeat Chrome's autofill repaint */
}