/* ==========================================================================
   XENEX LEGACY BRIDGE — see BRAND.md
   Loaded globally after xnx-brand.css (snippets/xnx-brand-head.liquid).

   Restyles the legacy custom sections that hard-code their own look (teal
   gradients behind white text, gradient text, navy panels, glass, blobs,
   Inter fonts) so every page reads on-brand: white / Surface / Accent BG
   surfaces, charcoal dark panels, flat colour, the sections' own rounded
   corners (buttons, inputs and cards normalised to the radius tokens),
   Montserrat headings and labels, Poppins body.

   CSS only. No markup, IDs, names, forms or scripts are touched.
   Display is only ever set to none on purely decorative elements
   (blobs, glows, dot patterns). Elements toggled by JS keep their display.

   SPECIFICITY STRATEGY
   Legacy rules are scoped as `#section-id .a .b` (one ID) inside <style>
   blocks in <body>, so they come later in the cascade than this file.
   Every rule here is anchored at
       html body :is(<legacy roots>):not(#xnx-z)
   which carries two IDs, so it wins without !important. !important is only
   used where the legacy rule itself is !important or the value is inline.
   CSS nesting (&) keeps the long root list written once per block.

   CONTENTS
     0. Generic layer (all legacy roots): tokens, type, radius, buttons,
        labels, cards, decoration
     1+. One block per legacy section file (source file named in the header)
   ========================================================================== */


/* ==========================================================================
   0. GENERIC LAYER — every legacy custom section
   Roots, by source file:
     quality ............................ #xenex-compliance-section
     xenex-forest ....................... #xenex-veritree-section
     xenex-forest-about-section ......... #xenex-tree-impact-section
     xenex-points ....................... #xenex-rewards-section
     xenex-rewards-section2 ............. #xenex-points-section
     xenex-shipping-page ................ #xenex-shipping-policy
     xenex-shipping-page-aus ............ #xenex-shipping-section
     shipping-section ................... #xenex-shipping-policy-section
     aus-shipping ....................... #xenex-policy-page
     xenex-return-policy ................ #xenex-return-policy-section
     xenex-terms-service ................ #xenex-tos-section
     faq ................................ #xenex-faq-section
     podcasts ........................... #xenex-podcast-section
     multimax ........................... #xenex-multimax-section
     suspendrx .......................... #xenex-suspendrx-section
     td-lipo ............................ #xenex-tdlipo-section
     featured-product-section-new2 ...... #xenex-tdlipo-featured-section
     td-lipo-hero/-benefits/-microscopy . #td-lipo-hero-*, #td-lipo-benefits-*, #td-lipo-microscopy-*
     td-lipo-penetration-results ........ #tdl-penetration-*
     transderma-landing ................. #xenex-transderma-landing
     xenefix2, xencare-xenefix .......... #xenex-xenefix-section
     xenefix-hero ....................... #xenefix-hero-*
     Xenefix-solutions .................. #xenefix-solutions-*
     troche-mold ........................ #xenex-troche-*
     compounding-features ............... #xenex-features-*
     new-airless ........................ #xenex-airless-section
     Shop-The-Look-New .................. #xenex-shop-the-look-section
     xenex-about-us ..................... #xenex-about-level3
     landing-page-about-us .............. #xenex-australia-hero-section
     aus-specials ....................... .xenex-australia-specials-hero
     aus-home-welcome ................... #xenex-future-hero-top-section
     xenex-home-usa ..................... #xenex-future-hero-usa-section
     other-countries .................... #xenex-future-hero-others-section
     xenex-home ......................... #xenex-home-redesign
     Value-cards-2, home-page-cards ..... #xenex-future-value-cards-section
     statistics-bar ..................... #xenex-stats-section
     auth-cta-banner .................... #xenex-full-access-section
     why-xenex-section .................. #xenex-why-choose-section
     brands-section ..................... #xenex-brands-section
     xenex-categories-grid .............. #xenex-categories
     How-To-Order-Australia ............. #xenex-australia-order-section
     How-to-order-from-aus-new .......... #xenex-aus-api-guide-section
     ordering-australia ................. #xenex-aus-guide-section
     flexible-banner .................... #flexible-banner-*
     contact-us, Contact-New ............ #xenex-contact-section
     formula-request-form ............... #xenex-formula-request-section
     price-match-request ................ #xenex-quote-request-section
     COA/SDS/Sample/sds-coa forms ....... #xenex-coa-request-section, #xenex-sds-request-section,
                                          #xenex-sample-request-section, #xenex-sds-coa-request-section
     main-customers-login/register ...... #xenex-login-section, #xenex-register-section
   ========================================================================== */

html body :is(
  #xenex-compliance-section, #xenex-veritree-section, #xenex-tree-impact-section,
  #xenex-rewards-section, #xenex-points-section, #xenex-shipping-policy, #xenex-shipping-section,
  #xenex-shipping-policy-section, #xenex-policy-page, #xenex-return-policy-section, #xenex-tos-section,
  #xenex-faq-section, #xenex-podcast-section, #xenex-multimax-section, #xenex-suspendrx-section,
  #xenex-tdlipo-section, #xenex-tdlipo-featured-section, #xenex-transderma-landing, #xenex-xenefix-section,
  #xenex-airless-section, #xenex-shop-the-look-section, #xenex-about-level3, #xenex-australia-hero-section,
  #xenex-future-hero-top-section, #xenex-future-hero-usa-section, #xenex-future-hero-others-section,
  #xenex-home-redesign, #xenex-future-value-cards-section, #xenex-stats-section, #xenex-full-access-section,
  #xenex-why-choose-section, #xenex-brands-section, #xenex-categories, #xenex-australia-order-section,
  #xenex-aus-api-guide-section, #xenex-aus-guide-section, #xenex-contact-section,
  #xenex-formula-request-section, #xenex-quote-request-section, #xenex-coa-request-section,
  #xenex-sds-request-section, #xenex-sample-request-section, #xenex-sds-coa-request-section,
  #xenex-login-section, #xenex-register-section,
  .xenex-australia-specials-hero,
  [id^="td-lipo-hero-"], [id^="td-lipo-benefits-"], [id^="td-lipo-microscopy-"], [id^="tdl-penetration-"],
  [id^="xenefix-hero-"], [id^="xenefix-solutions-"], [id^="xenex-troche-"], [id^="xenex-features-"],
  [id^="flexible-banner-"], [id^="xenex-collections-"], [id^="xenex-product-faq-"]
):not(#xnx-z) {
  /* --- Token remap: the legacy palette variables, flattened to the brand --- */
  --brand-blue: var(--xnx-green);
  --brand-light-green: var(--xnx-sage);
  --brand-accent: var(--xnx-sage);
  --brand-orange: var(--xnx-green);
  --brand-primary: var(--xnx-green);
  --brand-secondary: var(--xnx-sage);
  --brand-dark: var(--xnx-text);
  --brand-dark-green: var(--xnx-forest);
  --brand-dark-blue: var(--xnx-text);
  --brand-gradient: linear-gradient(var(--xnx-green), var(--xnx-green));

  --gray-50: var(--xnx-paper);
  --gray-100: var(--xnx-mist);
  --gray-200: var(--xnx-border);
  --gray-400: #9ca3af;
  --gray-600: #4b5563;
  --gray-800: var(--xnx-ink);
  --gray-900: var(--xnx-text);

  --tdl-primary: var(--xnx-green);
  --tdl-secondary: var(--xnx-sage);
  --tdl-accent: var(--xnx-sage);
  --tdl-gray-50: var(--xnx-paper);
  --tdl-gray-100: var(--xnx-mist);
  --tdl-gray-600: #4b5563;
  --tdl-gray-900: var(--xnx-text);
  --tdl-shadow: none;

  --xenefix-teal: var(--xnx-green);
  --xenefix-green: var(--xnx-green);
  --xenefix-light-green: var(--xnx-sage);
  --xenefix-accent: var(--xnx-sage);
  --xenefix-dark: var(--xnx-text);
  --xenefix-surface: var(--xnx-text);

  /* Gradients become flat fills. Written as single-colour gradients so they stay valid
     wherever the legacy CSS used them (background, background-image or background-clip:text). */
  --grad-primary: linear-gradient(var(--xnx-green), var(--xnx-green));
  --grad-dark: linear-gradient(var(--xnx-text), var(--xnx-text));
  --grad-dark-bg: linear-gradient(var(--xnx-text), var(--xnx-text));
  --grad-text: linear-gradient(var(--xnx-green), var(--xnx-green));
  --grad-text-light: linear-gradient(var(--xnx-sage), var(--xnx-sage));
  --grad-gold: linear-gradient(#e6a33e, #e6a33e);
  --stats-grad: linear-gradient(var(--xnx-green), var(--xnx-green));
  --icon-bg: linear-gradient(var(--xnx-mist), var(--xnx-mist));

  /* Glass -> flat */
  --glass-filter: none;
  --card-shadow: none;
  --card-hover-shadow: none;
  --tile-shadow: none;
  --shadow: none;
  --glow-gold: none;
  --radius: var(--xnx-radius-block);
  --tile-radius: var(--xnx-radius-block);
  --xf-radius: var(--xnx-radius-block);

  font-family: var(--xnx-font-body);
  -webkit-font-smoothing: antialiased;

  /* --- Typography ------------------------------------------------------- */
  & *:not(code, pre, kbd, samp, .xnx-label, .xnx-eyebrow, .xnx-data,
          [class*="material-symbols"], [class*="material-icons"], .fa, .fas, .far, .fab) {
    font-family: var(--xnx-font-body);
  }

  & :is(h1, h2, h3, h4, h5, h6,
        .hero-title, .section-title, .card-title, .card-title-large, .benefit-title, .step-title,
        .spec-title, .dark-card-title, .xenex-card-title, .xenex-title, .xenefix-title, .xf-heading,
        .xf-card-heading, .xs-heading, .tdl-title, .fb-heading, .troche-photo-title, .workflow-heading,
        .reason-title, .alert-title, .bento-title, .brand-title, .bulk-title, .column-title,
        .highlight-title, .ingredients-title, .login-title, .register-title, .accordion-title,
        .multiplier, .stat-number, .stat-value),
  & :is(h1, h2, h3, h4, h5, h6, .hero-title, .section-title) *:not([class*="material-symbols"], [class*="material-icons"]) {
    font-family: var(--xnx-font-display);
    text-transform: none;
  }

  & :is(h1, h2, .hero-title, .section-title) {
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  & :is(h3, h4, h5, h6, .card-title, .benefit-title, .step-title) {
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  /* Gradient text -> flat. Green on light (display sizes only), Success Green on dark panels. */
  & :is(.text-gradient, .gradient-text, .xv-gradient-text, .tdl-gradient, .troche-photo-accent) {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--xnx-green);
    animation: none;
  }

  /* Labels: Montserrat caps, letterspaced */
  & :is(.overline, .eyebrow, .badge-text, .tdl-eyebrow, .xs-eyebrow, .xf-eyebrow, .xenefix-eyebrow,
        .xenex-overline, .card-overline, .troche-photo-eyebrow, .xv-badge-text, .tier-name,
        .stat-label, .xv-stat-label, .card-tag, .stat-tag, .schedule-tag, .bento-status-tag,
        .policy-badge, .region-badge, .sku-badge, .exp-label, .spec-label, .sc-label,
        .form-section-label, .caption-label, .tdl-end-label) {
    font-family: var(--xnx-font-label);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--xnx-forest);
  }

  /* Label containers (legacy pills) -> flat, square, no fill */
  & :is(.overline-wrapper, .badge-wrapper, .badge-container, .hero-badge, .x-badge, .xv-badge,
        .fb-badge, .xenex-glass-badge, .hero-status-badge) {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
  }

  & :is(.badge-dot, .x-badge-dot, .xv-badge-dot, .hero-badge-dot, .fb-badge-dot) {
    background: var(--xnx-green);
    box-shadow: none;
    animation: none;
  }

  /* --- Shape: the sections keep their own rounded corners (classic Xenex);
         buttons, inputs and cards are normalised below. No glass, no drop shadows. */
  & *, & *::before, & *::after {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  & *:not(input, textarea, select) {
    box-shadow: none;
  }

  & img, & video, & picture {
    box-shadow: none;
  }

  /* --- Decoration: blobs, ambient glows, dot grids (decorative only) ------ */
  & :is(.blob, .blob-1, .blob-2, .blob-3, .tdl-blob, .tdl-blob-1, .tdl-blob-2, .xenefix-hero-blob,
        .xenefix-hero-blob-1, .xenefix-hero-blob-2, .ambient-glow, .visual-glow, .teal-glow,
        .green-glow, .medal-glow, .hero-radial-glow, .dark-blob-glow, .fb-glow, .world-map,
        .cleanroom-grid-pattern) {
    display: none;
  }

  /* Dot grids and navy radial overlays on dark panels. background-image only, so a
     `background: inherit` full-bleed extension keeps its (now charcoal) colour. */
  & :is(.dark-mode-area, .accordion-section, .alert-card, .featured-card, .dark-breaker,
        .three-steps-section, .sample-dark-section, .xv-dark-panel),
  & :is(.dark-mode-area, .accordion-section, .alert-card, .featured-card, .dark-breaker,
        .three-steps-section, .sample-dark-section, .xv-dark-panel)::before,
  & :is(.dark-mode-area, .accordion-section, .alert-card, .featured-card, .dark-breaker,
        .three-steps-section, .sample-dark-section, .xv-dark-panel)::after {
    background-image: none;
  }

  /* --- Buttons: rounded Xenex Green, white 600, Green Dark on hover ------- */
  & :is(.btn-primary, .btn-glass-primary, .submit-btn, .btn-submit, .premium-btn, .premium-glass-btn,
        .orange-gradient-btn, .fb-button, .tdl-button, .tdl-cta, .xv-btn, .xv-cta, .cta-btn,
        .btn-card-add-cart, .shop-the-look-new-5__atc-button, .btn-action) {
    background: var(--xnx-green);
    color: #fff;
    border: 1px solid var(--xnx-green);
    border-radius: var(--xnx-radius-control);
    box-shadow: none;
    font-family: var(--xnx-font-body);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    animation: none; /* legacy pulse/glow keyframes animate box-shadow */
    transition: background-color var(--xnx-dur-2) var(--xnx-ease-standard),
                border-color var(--xnx-dur-2) var(--xnx-ease-standard),
                color var(--xnx-dur-2) var(--xnx-ease-standard);

    &::before, &::after { background: none; }

    &:hover, &:focus-visible {
      background: var(--xnx-forest);
      border-color: var(--xnx-forest);
      color: #fff;
      transform: none;
    }
  }

  /* Secondary / outline buttons: Green Dark outline */
  & :is(.btn-outline, .btn-ghost, .btn-glass, .btn-secondary, .btn-call, .btn-email) {
    background: transparent;
    color: var(--xnx-forest);
    border: 1px solid var(--xnx-forest);
    border-radius: var(--xnx-radius-control);
    box-shadow: none;
    font-family: var(--xnx-font-body);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;

    &:hover, &:focus-visible {
      background: var(--xnx-forest);
      border-color: var(--xnx-forest);
      color: #fff;
      transform: none;
    }
  }

  & .btn-dark {
    background: var(--xnx-text);
    border-color: var(--xnx-forest);
    color: #fff;

    &:hover { background: var(--xnx-green); border-color: var(--xnx-green); }
  }

  /* --- Form fields -------------------------------------------------------- */
  & .input-group {
    align-items: stretch;
  }

  & :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
        input[type="search"], input[type="number"], input[type="url"], input:not([type]), textarea, select) {
    border-radius: var(--xnx-radius-input);
    border-color: var(--xnx-line-strong);
    background-color: #fff;
    color: var(--xnx-ink);
    box-shadow: none;
    font-family: var(--xnx-font-body);
    transform: none;
    transition: border-color var(--xnx-dur-1) var(--xnx-ease-standard),
                box-shadow var(--xnx-dur-1) var(--xnx-ease-standard),
                background-color var(--xnx-dur-1) var(--xnx-ease-standard);

    &::placeholder { color: rgb(var(--xnx-text-rgb) / 0.6); }

    &:hover {
      transform: none;
    }

    &:focus, &:focus-visible {
      outline: none;
      border-color: var(--xnx-green);
      box-shadow: 0 0 0 3px rgb(var(--xnx-green-rgb) / 0.18);
      transform: none;
    }
  }

  /* --- Cards: flat white, hairline border ---------------------------------- */
  & :is(.premium-glass-card, .glass-card, .feature-card, .feature-item, .benefit-card, .value-card,
        .faq-card, .rep-card, .method-card, .reason-card, .notice-card, .comparison-card,
        .episode-card, .xs-card, .tdl-card, .premium-card, .table-wrapper, .table-glass-card,
        .xenex-card, .brand-card, .glass-tier-card, .dark-card, .dark-glass-card, .alert-card,
        .accordion-item, .commit-item) {
    border-radius: var(--xnx-radius-block);
    box-shadow: none;

    &:hover {
      transform: none;
    }
  }

  & :is(.glass-frame:hover img, .product-img-wrapper:hover .product-img,
        .product-image-wrapper:hover .product-image, .premium-glass-card:hover .card-icon) {
    transform: none;
  }

  & .card-link:hover {
    gap: 0.5rem;
  }

  /* Light glass cards: crisp white (dark-panel cards are reset below) */
  & :is(.premium-glass-card, .glass-card, .feature-card, .feature-item, .rep-card, .method-card,
        .faq-card, .reason-card, .comparison-card, .xs-card, .tdl-card, .premium-card) {
    background: #fff;
    border: 1px solid var(--xnx-line);

    &:hover {
      background: #fff;
      border-color: rgb(var(--xnx-forest-rgb) / 0.35);
      transform: none;
    }
  }

  & :is(.card-icon, .icon-box) {
    background: var(--xnx-mist);
    border-color: transparent;
    color: var(--xnx-forest);
    box-shadow: none;
  }

  /* Dark panels: charcoal (classic Xenex gray-900), never navy */
  & :is(.dark-mode-area, .dark-card, .dark-glass-card, .alert-card, .dark-hero-banner,
        .sample-dark-section, .three-steps-section, .xv-dark-panel, .dark-breaker) {
    background-color: var(--xnx-text);
    background-image: none;
    color: #fff;
  }

  & :is(.dark-mode-area, .dark-card, .dark-glass-card, .alert-card, .dark-hero-banner,
        .sample-dark-section, .three-steps-section, .xv-dark-panel, .dark-breaker) {
    & :is(h1, h2, h3, h4, h5, h6, .hero-title, .section-title, .card-title) { color: #fff; }
    & :is(.overline, .eyebrow, .badge-text, .tdl-eyebrow, .xs-eyebrow, .xf-eyebrow, .xenefix-eyebrow,
          .xenex-overline, .card-overline, .troche-photo-eyebrow, .xv-badge-text, .tier-name,
          .stat-label, .xv-stat-label, .card-tag, .stat-tag, .schedule-tag, .bento-status-tag,
          .policy-badge, .region-badge, .sku-badge, .exp-label, .spec-label, .sc-label,
          .form-section-label, .caption-label, .tdl-end-label) { color: var(--xnx-sage); }
    & :is(.text-gradient, .gradient-text) { color: var(--xnx-sage); }
    & :is(.premium-glass-card, .glass-card, .glass-tier-card, .feature-card, .feature-item, .rep-card,
          .method-card, .faq-card, .reason-card, .comparison-card, .xs-card, .tdl-card, .premium-card) {
      background: var(--xnx-glass-card-dark);
      border: 1px solid var(--xnx-glass-border-dark);
      box-shadow: var(--xnx-glass-highlight-dark);

      &:hover { background: rgb(255 255 255 / 0.09); border-color: rgb(255 255 255 / 0.3); transform: none; }
    }
    & .glass-tier-card::before { background: none; }
  }

  /* Ensure GSAP ScrollTrigger / reveal initial states never leave content faded or invisible */
  html.xnx-no-gsap & :is(.reveal-up, .reveal-left, .reveal-right, .reveal-stagger, .tdl-reveal, .xv-reveal),
  &.gsap-ready :is(.reveal-up, .reveal-left, .reveal-right),
  & .gsap-ready :is(.reveal-up, .reveal-left, .reveal-right) {
    opacity: 1 !important;
    transform: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    & *, & *::before, & *::after {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
    }
  }
}


/* ==========================================================================
   GROUP A — policy, info and rewards pages
   ========================================================================== */
/* Shared by the policy pages below: a heading set entirely in the legacy gradient span
   reads as a Green Dark heading (green is kept for partial accent spans only). */
html body :is(#xenex-shipping-policy, #xenex-return-policy-section, #xenex-tos-section, #xenex-faq-section,
              #xenex-shipping-section, #xenex-policy-page):not(#xnx-z) {
  & :is(h1, h2).text-gradient,
  & .hero-title > .text-gradient:only-child {
    color: var(--xnx-forest);
  }

  /* Hero badge label and contact links are styled inline in green */
  & .badge-container > span {
    font-family: var(--xnx-font-mono);
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    color: var(--xnx-forest) !important;
  }
  & a[href^="mailto:"] {
    color: var(--xnx-forest) !important;
    font-weight: 600 !important;
    border-bottom-color: var(--xnx-green) !important;
  }
}

/* --- sections/xenex-shipping-page.liquid (#xenex-shipping-policy) ------- */
html body #xenex-shipping-policy:not(#xnx-z) {
  & .highlight-text { color: var(--xnx-forest); font-weight: 600; }
  & .feature-item svg { color: var(--xnx-green); }
  & .card-icon[style] { background: var(--xnx-mist) !important; }
  & .dark-mode-area {
    & .highlight-text, & a { color: var(--xnx-sage); }
    & .detail-block h4 { color: #fff; }
    & .detail-block li::before { background: var(--xnx-sage); }
  }
}

/* --- sections/xenex-return-policy.liquid (#xenex-return-policy-section) - */
html body #xenex-return-policy-section:not(#xnx-z) {
  & .highlight { color: var(--xnx-forest); font-weight: 600; }
  & .dark-mode-area {
    & .highlight { color: var(--xnx-sage); }
    & .restriction-item { border-left-color: var(--xnx-sage); }
    & .schedule-tag {
      background: transparent;
      border: 1px solid rgb(var(--xnx-sage-rgb) / 0.45);
      color: var(--xnx-sage);
    }
  }
}

/* --- sections/xenex-terms-service.liquid (#xenex-tos-section) ----------- */
html body #xenex-tos-section:not(#xnx-z) {
  & .highlight { color: var(--xnx-forest); font-weight: 600; }
  & .dark-mode-area {
    & .highlight { color: var(--xnx-sage); }
    & .legal-item { border-left-color: var(--xnx-sage); }
  }
}

/* --- sections/faq.liquid (#xenex-faq-section) & sections/faq-new.liquid --- */
html body :is(#xenex-faq-section, [id^="xenex-product-faq-"]):not(#xnx-z) {
  background: var(--xnx-paper);
  & .xpf-blob-layer { display: none; }
  & :is(.overline-text, .xpf-overline-text) {
    font-family: var(--xnx-font-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--xnx-forest);
  }
  & .xpf-overline { background: transparent; border-color: transparent; padding-inline: 0; }
  & .xpf-heading { background: none; -webkit-text-fill-color: currentColor; color: var(--xnx-forest); animation: none; }
  & .xpf-item { background: #fff; border: 1px solid var(--xnx-line); }
  & :is(.faq-item, .xpf-item).is-open { border-color: rgb(var(--xnx-forest-rgb) / 0.35); background: #fff; }
  & :is(.faq-trigger, .xpf-question):hover { color: var(--xnx-forest); }
  & :is(.faq-icon, .xpf-icon) { background: var(--xnx-mist); color: var(--xnx-forest); }
  & :is(.faq-item, .xpf-item):hover :is(.faq-icon, .xpf-icon) { background: var(--xnx-mist); color: var(--xnx-forest); }
  & :is(.faq-item, .xpf-item).is-open :is(.faq-icon, .xpf-icon) { background: var(--xnx-forest); color: #fff; }
  & :is(.faq-item, .xpf-item).is-open :is(.faq-content, .xpf-answer-inner) { border-top-color: var(--xnx-line); }
}

/* --- sections/podcasts.liquid (#xenex-podcast-section) ------------------ */
html body #xenex-podcast-section:not(#xnx-z) {
  & .featured-card { background: var(--xnx-text); }
  & .featured-card h3 { line-height: 1.2; }
  & .featured-card p { color: rgb(255 255 255 / 0.74); }
  & .featured-media { background: rgb(0 0 0 / 0.14); }
  & .tag {
    font-family: var(--xnx-font-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  & .tag-featured { background: transparent; color: var(--xnx-sage); padding-left: 0; padding-right: 0; }
  & .tag-episode { background: var(--xnx-mist); color: var(--xnx-forest); }
  & .episode-card:hover { border-color: rgb(var(--xnx-forest-rgb) / 0.35); }
  & .sc-label {
    font-family: var(--xnx-font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.6);
  }
}

/* --- sections/xenex-points.liquid (#xenex-rewards-section) -------------- */
html body #xenex-rewards-section:not(#xnx-z) {
  /* Tier numbers: flat (the gold tier keeps its tier colour, set inline) */
  & .multiplier {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: #fff;
  }
  & .multiplier[style] { background: none !important; color: var(--brand-gold); }
  & .multiplier span { color: rgb(255 255 255 / 0.62); font-family: var(--xnx-font-body); }
  & .tier-gold { background: rgb(230 163 62 / 0.06); border-color: rgb(230 163 62 / 0.35); }
  & .step-number { border-color: var(--xnx-paper); }
  & th {
    font-family: var(--xnx-font-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
  }
  & td.xp-cell { color: var(--xnx-forest); font-family: var(--xnx-font-mono); font-weight: 500; }
  & td::before { font-family: var(--xnx-font-mono); font-weight: 500; letter-spacing: 0.14em; }
  & .pagination-btn {
    color: var(--xnx-forest);
    border-color: var(--xnx-forest);
    font-weight: 600;

    &:hover:not(:disabled) { background: var(--xnx-forest); border-color: var(--xnx-forest); color: #fff; transform: none; }
  }
}

/* --- sections/xenex-shipping-page-aus.liquid (#xenex-shipping-section) -- */
html body #xenex-shipping-section:not(#xnx-z) {
  & .policy-badge { background: transparent; border-color: transparent; padding-left: 0; padding-right: 0; }
  & .card-icon { background: var(--xnx-forest); color: #fff; }
  & .check-icon { background: var(--xnx-green); }
  & .text-green-bold { color: var(--xnx-forest); }
  & .footer-note { background: var(--xnx-mist); border-color: transparent; }
}

/* --- sections/aus-shipping.liquid (#xenex-policy-page) ------------------ */
html body #xenex-policy-page:not(#xnx-z) {
  & .card-icon-large { background: var(--xnx-forest); color: #fff; }
  & .feature-text strong { color: var(--xnx-forest); }
  & .footer-note-box { background: var(--xnx-mist); }
}

/* --- sections/shipping-section.liquid (#xenex-shipping-policy-section) -- */
html body #xenex-shipping-policy-section:not(#xnx-z) {
  --grad-shipping: linear-gradient(var(--xnx-forest), var(--xnx-forest));

  /* Second card header carries an inline teal gradient */
  & .card-header { background: var(--xnx-forest) !important; color: #fff; }
  & .card-header .icon-box {
    background: rgb(255 255 255 / 0.1);
    border: 1px solid rgb(255 255 255 / 0.2);
    color: #fff;
  }
  & .method-card:hover { background: #fff; }
  & .policy-footer { border-color: var(--xnx-line); }
  & .footer-list li::before { color: var(--xnx-forest); }
}
/* @@GROUP-A-END@@ */


/* ==========================================================================
   GROUP B — product landing pages (MultiMax, TD Lipo, SuspendRx, Transderma,
   XeneFix, troche molds, airless pumps)
   ========================================================================== */

/* --- B1. sections/multimax.liquid (/pages/multimax) ----------------------- */
html body #xenex-multimax-section:not(#xnx-z) {
  /* Product photos: no drop shadows */
  & .feature-img { filter: none; }

  /* Orange-tinted ingredients note -> Accent BG panel, Green Dark label */
  & .ingredients-box {
    background: var(--xnx-mist);
    border: 0;
    color: var(--xnx-ink);
  }
  & .ingredients-title {
    color: var(--xnx-forest);
    font-family: var(--xnx-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  /* Sample formulation rows: flat white rows, Green Dark SKU chip */
  & .formula-link {
    background: #fff;
    border: 1px solid var(--xnx-line);
    color: var(--xnx-ink);

    &:hover { background: #fff; border-color: var(--xnx-forest); color: var(--xnx-forest); }
  }
  & .formula-id {
    background: var(--xnx-forest);
    font-family: var(--xnx-font-mono);
    font-weight: 500;
    letter-spacing: 0.04em;
  }
}

/* --- B2. sections/td-lipo.liquid (/pages/td-lipo) ------------------------- */
html body #xenex-tdlipo-section:not(#xnx-z) {
  & .science-img-wrapper {
    border: 1px solid var(--xnx-line);
    background: #fff;
  }

  /* "Key finding" callout (inline orange tint) -> Accent BG, Green Dark label */
  & .premium-glass-card > div[style*="border-left"] {
    background: var(--xnx-mist) !important;
    border-left-color: var(--xnx-green) !important;
    border-radius: 0 !important;
  }
  & .premium-glass-card strong[style*="--brand-primary"] {
    color: var(--xnx-forest) !important;
    font-family: var(--xnx-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  /* Eyebrow on the dark panel uses an inline accent colour */
  & .dark-mode-area .eyebrow[style] { color: var(--xnx-sage) !important; }
}

/* --- B3. sections/suspendrx.liquid (/pages/suspendrx...) ------------------ */
html body #xenex-suspendrx-section:not(#xnx-z) {
  & .product-img { filter: none; }

  /* Technology spotlight: light-blue gradient -> flat Accent BG */
  & .tech-spotlight {
    background: var(--xnx-mist);
    border: 0;

    &::before { display: none; }

    & h2[style] { color: var(--xnx-forest) !important; }
    & p[style] { color: var(--xnx-ink) !important; }
  }
}

/* --- B4. sections/transderma-landing.liquid (/pages/transderma) ----------- */
html body #xenex-transderma-landing:not(#xnx-z) {
  /* Label pills -> caps labels */
  & .x-badge,
  & .x-badge span {
    font-family: var(--xnx-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--xnx-forest);
  }
  & .dark-breaker .x-badge {
    background: transparent !important;
    border-color: transparent !important;
    & span[style] { color: var(--xnx-sage) !important; }
  }

  & > .x-container h2 { color: var(--xnx-forest); }

  /* Pillar card titles (inline orange/green) -> Green Dark */
  & .glass-card > h3[style*="--brand-primary"] { color: var(--xnx-forest) !important; }

  /* Dark "About" panel: accent text -> Success Green */
  & .dark-breaker h4[style*="--brand-primary"],
  & .dark-breaker h2 span[style*="--brand-primary"] { color: var(--xnx-sage) !important; }
  & .dark-breaker .glass-card[style] {
    background: rgb(255 255 255 / 0.04) !important;
    border-color: rgb(255 255 255 / 0.16) !important;
  }

  /* Product cards: Green Dark corner tag, Accent BG meta box, caps labels */
  & .product-card > span[style*="position:absolute"] {
    background: var(--xnx-forest) !important;
    border-radius: var(--xnx-radius-control) !important;
    font-family: var(--xnx-font-mono);
    font-weight: 500 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  & .product-image { background: #fff; }
  & .meta-box {
    background: var(--xnx-mist);
    border: 0;

    & span[style*="text-transform:uppercase"] {
      color: var(--xnx-forest) !important;
      font-family: var(--xnx-font-mono);
      font-weight: 500 !important;
      letter-spacing: 0.18em;
    }
  }

  /* Closing CTA panel uses inline grad-dark-bg / white button */
  & [style*="--grad-dark-bg"] { background: var(--xnx-forest) !important; }
  & a[style*="background:white"] {
    border-radius: var(--xnx-radius-control);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
  }
}

/* --- B5. sections/xenefix-hero.liquid (/pages/xenefix, troche-molds) ------ */
html body :is(#xnx-zz, [id^="xenefix-hero-"]):not(#xnx-z) {
  /* Navy radial + dot-grid overlay -> flat charcoal wash. Note: replaces the
     section's "Dark overlay strength" setting with a fixed 55%. */
  & .xenefix-hero-overlay {
    background: rgb(var(--xnx-text-rgb) / 0.55);
  }
  @media (max-width: 767px) {
    & .xenefix-hero-overlay {
      background: rgb(var(--xnx-text-rgb) / 0.72);
    }
    & .xenefix-description br {
      display: none;
    }
  }

  /* On the dark photo: labels and accents in Success Green, not green/forest */
  & .xenefix-eyebrow { color: var(--xnx-sage); }
  & .text-gradient { color: var(--xnx-sage); }
  & .xenefix-dot { background: var(--xnx-sage); box-shadow: none; animation: none; }

  & .xenefix-form-shell {
    background: rgb(var(--xnx-text-rgb) / 0.85);
    border-color: rgb(255 255 255 / 0.16);
  }
  & .xenefix-submit {
    background: var(--xnx-green);
    color: #fff;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    &:hover { background: #fff; color: var(--xnx-forest); }
  }
}

/* --- B6. sections/Xenefix-solutions.liquid (/pages/xenefix) --------------- */
html body :is(#xnx-zz, [id^="xenefix-solutions-"]):not(#xnx-z) {
  background-image: none;
  background-color: var(--xnx-paper);

  & .xs-heading { color: var(--xnx-forest); }
  & .xs-card { border-color: var(--xnx-line); }
  & .xs-card-content h3 { color: var(--xnx-forest); }
}

/* --- B7. sections/xenefix2.liquid + xencare-xenefix.liquid (/pages/xenefix)
       Both render #xenex-xenefix-section. ------------------------------------ */
html body #xenex-xenefix-section:not(#xnx-z) {
  /* Inline amber accents (tip + limits panel) -> brand green rule */
  --brand-gold: var(--xnx-green);
  --glass-surface: linear-gradient(#fff, #fff);
  --glass-surface-hover: linear-gradient(#fff, #fff);
  --glass-border: 1px solid var(--xnx-line);

  & .product-image { filter: none; }

  /* Tag chips: Green Dark text (small text never green on light) */
  & .tag {
    color: var(--xnx-forest);
    background: var(--xnx-mist);
    border-color: transparent;
  }

  /* Dark panels: Success Green accents */
  & :is(.three-steps-section, .sample-dark-section) {
    & .three-steps-tip {
      border-left-color: var(--xnx-sage) !important;
      border-radius: var(--xnx-radius-block) !important;
      background: rgb(255 255 255 / 0.04);
    }
    & .text-gradient { color: var(--xnx-sage); }
  }
  & .sample-dark-section::before { background: none; }

  /* FAQ accordions: flat white rows */
  & details {
    background: #fff;
    border: 1px solid var(--xnx-line);
  }
  & details[open] { border-color: rgb(var(--xnx-forest-rgb) / 0.35); }
  & summary { color: var(--xnx-forest); }

  & a[style*="--brand-green"] {
    color: var(--xnx-forest) !important;
    text-decoration: underline;
    text-decoration-color: var(--xnx-green);
    text-underline-offset: 3px;
  }

  & .btn-glass { color: var(--xnx-forest); }

  @media (max-width: 767px) {
    & .comparison-table td:last-child,
    & .comparison-table td:last-child strong { color: var(--xnx-forest); }
  }

  /* xencare-xenefix inline teal chips/buttons (section currently disabled) */
  & [style*="--brand-blue"] { border-radius: var(--xnx-radius-control) !important; }
}

/* --- B8. sections/troche-mold.liquid (/pages/troche-molds) ---------------- */
html body :is(#xnx-zz, [id^="xenex-troche-"]):not(#xnx-z) {
  /* Slate/gradient section fills -> Paper / white */
  & .bg-layered-subtle { background: var(--xnx-paper); }
  & .showcase-stage { background: #fff; border: 1px solid var(--xnx-line); }

  /* Photo-hero overlays -> flat charcoal panel at 85% (no gradients) */
  & .hero-bg-overlay { background: rgb(var(--xnx-text-rgb) / 0.85); }
  & .troche-photo-hero::before { background: rgb(var(--xnx-text-rgb) / 0.85); }
  & .troche-photo-hero::after { display: none; }
  & .troche-photo-title .troche-photo-accent { color: var(--xnx-sage); }
  & .troche-photo-eyebrow { color: var(--xnx-sage); }

  /* Muted copy on the dark panel (legacy !important slate) */
  & .text-dim { color: rgb(255 255 255 / 0.72) !important; }
  & .dark-glass-card {
    background: rgb(255 255 255 / 0.04);
    border: 1px solid rgb(255 255 255 / 0.16);
  }

  /* Small green text on light -> Green Dark */
  & :is(.status-pill, .pill-mini, .selected-sku-indicator, .hotspot-title.green,
        .highlight-green, .mono-code, .card-cart-status, .faq-body a) {
    color: var(--xnx-forest);
  }
  & .status-pill,
  & .pill-mini {
    font-family: var(--xnx-font-mono);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  & .faq-body a { text-decoration: underline; text-decoration-color: var(--xnx-green); }

  & .highlight-title { color: var(--xnx-forest); }
  & .status-pill.dark-pill {
    color: var(--xnx-sage);
    background: transparent;
    border-color: transparent;
  }

  & .swatch-btn.active { color: var(--xnx-forest); border-color: var(--xnx-forest); box-shadow: 0 0 0 1px var(--xnx-forest); }
  & .bulk-order-callout { background: var(--xnx-mist); border-color: transparent; }
}

/* --- B9. sections/compounding-features.liquid (/pages/troche-molds) -------
   Colours come from section settings (navy defaults); remapped to the brand. */
html body :is(#xnx-zz, [id^="xenex-features-"]):not(#xnx-z) {
  --xf-bg: var(--xnx-forest);
  --xf-card: var(--xnx-glass-card-dark);
  --xf-text: #fff;
  --xf-muted: rgb(255 255 255 / 0.76);
  --xf-green: var(--xnx-sage);
  --xf-teal: var(--xnx-sage);
  background: var(--xnx-text);

  &::before, &::after { display: none; }

  & .xf-eyebrow {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
    color: var(--xnx-sage);
    font-family: var(--xnx-font-mono);
    font-weight: 500;
    letter-spacing: 0.18em;
  }
  & .xf-heading,
  & .xf-card-heading { color: #fff; }
  & .xf-category { font-family: var(--xnx-font-mono); }
  & .xf-card {
    background: var(--xnx-glass-card-dark);
    border-color: var(--xnx-glass-border-dark);
    box-shadow: var(--xnx-glass-highlight-dark);
    &:hover { background: rgb(255 255 255 / 0.09); border-color: rgb(255 255 255 / 0.32); transform: none; }
  }
  & .xf-icon-tile { background: rgb(255 255 255 / 0.08); color: var(--xnx-sage); }
  & .xf-card-badge { color: var(--xnx-sage); border-top-color: rgb(255 255 255 / 0.14); }
}

/* --- B10. sections/Shop-The-Look-New.liquid (troche-molds, airless) ------- */
html body #xenex-shop-the-look-section:not(#xnx-z) {
  /* Inline rounded/shadowed photo frame -> square, flat */
  & .shop-the-look__image-wrapper {
    border-radius: var(--xnx-radius-block) !important;
    box-shadow: none !important;
    border: 1px solid var(--xnx-line);
  }
  & .shop-the-look__item-content {
    opacity: 1 !important;
  }
  /* Whole-heading gradient text -> Green Dark heading */
  & .xenex-header-container h2.text-gradient { color: var(--xnx-forest); }
  & .xenex-overline { color: var(--xnx-forest); }
  & .shop-the-look-new-5__product-card {
    border: 1px solid var(--xnx-line);
    background: #fff;
  }
  & .shop-the-look-new-5__quantity {
    border: 1px solid var(--xnx-line-strong);
    background: #fff;
  }
  & .shop-the-look__hot-spot {
    border: 2px solid var(--xnx-forest);
    box-shadow: 0 2px 8px rgb(var(--xnx-forest-rgb) / 0.28);
  }
  & .shop-the-look__hot-spot[aria-current="true"],
  & .shop-the-look__hot-spot:hover {
    background: var(--xnx-green) !important;
    border-color: #fff;
    box-shadow: 0 0 0 4px rgb(var(--xnx-green-rgb) / 0.28);
  }
}

/* --- B11. sections/new-airless.liquid (/pages/new-airless-pumps) ---------- */
html body #xenex-airless-section:not(#xnx-z) {
  & .image-stage::before { display: none; }
  & .hero-title .text-gradient { color: var(--xnx-green); }
}

/* --- B12. sections/featured-product-section-new2.liquid (about QC page) --- */
html body #xenex-tdlipo-featured-section:not(#xnx-z) {
  & .image-wrapper {
    background: #fff;
    border: 1px solid var(--xnx-line);
  }
  & .btn { letter-spacing: 0.02em; }
}

/* --- B13. TD Lipo AU sections: td-lipo-hero, td-lipo-benefits,
       td-lipo-microscopy-results, td-lipo-penetration-results
       (page.welcome-aus-td-lipo, Australia market only) ---------------------- */
html body :is(#xnx-zz, [id^="td-lipo-benefits-"]):not(#xnx-z) {
  /* Navy radial + dot grid on the section root -> flat charcoal */
  background: var(--xnx-text);

  & .tdl-eyebrow { color: var(--xnx-sage); }
  & .tdl-gradient { color: var(--xnx-sage); }
  & .tdl-benefit-card {
    background: rgb(255 255 255 / 0.04);
    border-color: rgb(255 255 255 / 0.16);
    & h3 { color: var(--xnx-sage); }
  }
}

html body :is(#xnx-zz, [id^="td-lipo-microscopy-"]):not(#xnx-z) {
  & h2 { color: var(--xnx-forest); }
  & .tdl-callout {
    background: var(--xnx-mist);
    border-left-color: var(--xnx-green);
    & strong { color: var(--xnx-forest); }
  }
}

html body :is(#xnx-zz, [id^="tdl-penetration-"]):not(#xnx-z) {
  /* --tdl-accent stays as the chart's TD Lipo data colour; text uses brand colours */
  & h2 { color: var(--xnx-forest); }
  & .tdl-eyebrow { color: var(--xnx-forest); }
}

html body :is(#xnx-zz, [id^="td-lipo-hero-"]):not(#xnx-z) {
  & .tdl-eyebrow { color: var(--xnx-forest); }
}
/* @@GROUP-B-END@@ */


/* ==========================================================================
   GROUP C — market welcome pages (AU / US / QC / international) and specials
   ========================================================================== */
/* --- landing-page-about-us (#xenex-australia-hero-section) and aus-specials
       (.xenex-australia-specials-hero): same photo hero markup ---------------- */
html body :is(#xenex-australia-hero-section, #xnx-zz, .xenex-australia-specials-hero):not(#xnx-z) {
  background-color: var(--xnx-text);

  /* Text on photos sits on a flat charcoal panel, not a navy fade */
  & .dark-fade-overlay { background: rgb(var(--xnx-text-rgb) / 0.74); }
  @media (max-width: 767px) {
    & .dark-fade-overlay { background: rgb(var(--xnx-text-rgb) / 0.86); }
  }

  & :is(.hero-title, .hero-title.text-gradient, .text-gradient) { color: #fff; }
  & .badge-text { color: var(--xnx-sage); }

  /* Primary (glass) button: green; on dark, hover goes white */
  & .premium-glass-btn:is(:hover, :focus-visible) {
    background: #fff;
    border-color: #fff;
    color: var(--xnx-forest);
  }

  /* Second CTA (was orange gradient): white outline secondary on dark */
  & .orange-gradient-btn {
    background: transparent;
    border-color: rgb(255 255 255 / 0.7);
    color: #fff;

    &:is(:hover, :focus-visible) { background: #fff; border-color: #fff; color: var(--xnx-forest); }
  }
}

/* --- aus-home-welcome (#xenex-future-hero-top-section) -------------------- */
html body #xenex-future-hero-top-section:not(#xnx-z) {
  /* Photo cut-out: no drop shadow */
  & .scientist-img { filter: none; }

  & .badge {
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    font-family: var(--xnx-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--xnx-forest);
  }

  & .placeholder-frame {
    background: var(--xnx-mist);
    border-color: var(--xnx-line-strong);
    color: var(--xnx-forest);
  }
}

/* --- statistics-bar (#xenex-stats-section, root is the dark panel) -------- */
html body #xenex-stats-section:not(#xnx-z) {
  background-color: var(--xnx-text);
  background-image: none;

  /* Big numbers: white, no gradient fill */
  & .stat-info h3 {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: #fff;
    font-family: var(--xnx-font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    animation: none;
  }

  & .stat-info p {
    font-family: var(--xnx-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--xnx-sage);
  }

  & .stat-item:hover .stat-info p { color: #fff; }

  & .stat-icon-wrap { background: transparent; border-color: rgb(255 255 255 / 0.16); }
  & .stat-icon,
  & .stat-item:hover .stat-icon { stroke: var(--xnx-sage); filter: none; }

  @media (min-width: 768px) {
    & .stat-item:not(:last-child)::after { background: rgb(255 255 255 / 0.14); }
  }
}

/* --- How-to-order-from-aus-new (#xenex-aus-api-guide-section) ------------- */
html body #xenex-aus-api-guide-section:not(#xnx-z) {
  /* The whole heading carried the gradient: Green Dark heading */
  & .title.text-gradient { color: var(--xnx-forest); }

  & .badge-container {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    font-family: var(--xnx-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--xnx-forest);
  }

  & .step-number {
    font-family: var(--xnx-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--xnx-forest);
  }

  /* Connector lines: flat Success Green, no glow */
  & .track-line { stroke: rgb(var(--xnx-forest-rgb) / 0.14); }
  & .anim-line { stroke: var(--xnx-sage); filter: none; }
  & .node-pulse { fill: var(--xnx-sage); filter: none; }

  & .alert-icon {
    background: rgb(var(--xnx-sage-rgb) / 0.14);
    border-color: rgb(var(--xnx-sage-rgb) / 0.35);
    color: var(--xnx-sage);
  }
}

/* --- How-To-Order-Australia (#xenex-australia-order-section) -------------- */
html body #xenex-australia-order-section:not(#xnx-z) {
  & .text-gradient { color: var(--xnx-forest); }
  & .timeline-line { background: rgb(var(--xnx-green-rgb) / 0.3); }

  & .benefits-column .card-icon {
    background: var(--xnx-forest);
    border-color: var(--xnx-forest);
    color: #fff;
  }
}

/* --- Value-cards-2 / home-page-cards (#xenex-future-value-cards-section) -- */
html body #xenex-future-value-cards-section:not(#xnx-z) {
  & .value-card {
    background: #fff;
    border: 1px solid var(--xnx-line);

    &:hover { border-color: rgb(var(--xnx-forest-rgb) / 0.35); }
  }

  & .value-card-img-wrapper { background: var(--xnx-mist); }

  /* Card titles are under 24px: no green text */
  & .value-card h3 .text-green { color: var(--xnx-forest); }

  & .card-link {
    color: var(--xnx-forest);
    text-decoration: underline;
    text-decoration-color: var(--xnx-green);
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;

    &:hover { text-decoration-thickness: 2px; }
  }
}

/* --- auth-cta-banner (#xenex-full-access-section, root is the dark panel) - */
html body #xenex-full-access-section:not(#xnx-z) {
  background-color: var(--xnx-text);
  background-image: none;

  & .premium-glass-card {
    background: rgb(255 255 255 / 0.04);
    border: 1px solid rgb(255 255 255 / 0.16);

    &::before { background: none; }
    &:hover { background: rgb(255 255 255 / 0.07); border-color: rgb(255 255 255 / 0.3); }
  }

  & .hero-title.text-gradient { color: #fff; }
  & .badge-wrapper { background: transparent; border-color: transparent; }
  & .badge-text { color: var(--xnx-sage); }
  & .description { color: rgb(255 255 255 / 0.78); }

  /* The legacy pulse animates box-shadow, which outranks a plain declaration */
  & .btn-primary { animation: none; }
  & .btn-primary:is(:hover, :focus-visible) {
    background: #fff;
    border-color: #fff;
    color: var(--xnx-forest);
  }
}

/* --- xenex-rewards-section2 (#xenex-points-section, root is the dark panel) */
html body #xenex-points-section:not(#xnx-z) {
  background-color: var(--xnx-text);
  background-image: none;

  & .headline .text-gradient,
  & .text-gradient { color: #fff; }
  & .status-wrapper { background: transparent; border-color: transparent; padding-left: 0; padding-right: 0; }
  & .overline { color: var(--xnx-sage); }
  & .description { color: rgb(255 255 255 / 0.78); }

  /* CTA: primary, sentence case, no glow ring */
  & .btn-wrapper::before { display: none; }
  & .btn {
    background: var(--xnx-green);
    border: 1px solid var(--xnx-green);
    color: #fff;
    font-family: var(--xnx-font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;

    &::after { background: none; }
    &:is(:hover, :focus-visible) { background: #fff; border-color: #fff; color: var(--xnx-forest); }
  }

  /* Image frame: thin hairline on Green Dark instead of a white glass card */
  & .premium-glass-card {
    background: rgb(255 255 255 / 0.04);
    border: 1px solid rgb(255 255 255 / 0.16);

    &:hover { background: rgb(255 255 255 / 0.04); border-color: rgb(255 255 255 / 0.3); }
  }

  & .image-container::after { background: none; }
}

/* --- flexible-banner (#flexible-banner-{{ section.id }}) ------------------ */
html body :is(#xnx-zz, [id^="flexible-banner-"]):not(#xnx-z) {
  background-color: var(--xnx-text);
  border-radius: 0;

  /* Overlay: flat Green Dark at the merchant's chosen strength (was a teal-black fade) */
  & .fb-overlay { background: rgb(var(--xnx-text-rgb) / var(--fb-overlay-opacity, 0.6)); }
  @media (max-width: 767px) {
    & .fb-overlay { background: rgb(var(--xnx-text-rgb) / max(var(--fb-overlay-opacity, 0.6), 0.8)); }
  }

  & .fb-badge {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    font-family: var(--xnx-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--xnx-sage);
  }

  & .fb-heading { color: #fff; font-weight: 600; letter-spacing: -0.025em; }

  & .fb-button {
    border-color: var(--xnx-green);
    filter: none;

    &:is(:hover, :focus-visible) { background: #fff; border-color: #fff; color: var(--xnx-forest) !important; filter: none; }
  }

  & .fb-price-card { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.16); }
  & .fb-discount { background: transparent; border-color: rgb(var(--xnx-sage-rgb) / 0.5); color: var(--xnx-sage); font-family: var(--xnx-font-mono); }
  & .fb-new-price { font-family: var(--xnx-font-display); font-weight: 600; }
  & .fb-placeholder { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.2); }

  /* Merchant custom-content helpers (qc-* Quebec sale, au-* Australia sale/TD Lipo):
     lime chips and dots -> Success Green / Xenex Green, flat */
  & :is(.qc-off-pill, .au-off-pill) {
    background: transparent;
    border-color: rgb(var(--xnx-sage-rgb) / 0.5);
    color: var(--xnx-sage);
    font-family: var(--xnx-font-mono);
    font-weight: 500;
    letter-spacing: 0.12em;
  }
  & :is(.qc-additional-action, .au-additional-action) { color: var(--xnx-sage); }
  & :is(.qc-deadline-dot, .au-deadline-dot, .au-note-dot) { background: var(--xnx-green); box-shadow: none; }
  & .au-pack-check { color: var(--xnx-sage); background: transparent; box-shadow: none; }
  & :is(.qc-simple-title) { font-weight: 600; letter-spacing: -0.025em; }
  & :is(.qc-after-price, .fb-new-price) { font-family: var(--xnx-font-display); font-weight: 600; }
}

/* --- xenex-home-usa (#xenex-future-hero-usa-section) and other-countries
       (#xenex-future-hero-others-section): same hero + stats strip markup ---- */
html body :is(#xenex-future-hero-usa-section, #xenex-future-hero-others-section):not(#xnx-z) {
  & .scientist-img { filter: none; }

  & .badge {
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    font-family: var(--xnx-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--xnx-forest);
  }

  & .placeholder-frame { background: var(--xnx-mist); border-color: var(--xnx-line-strong); color: var(--xnx-forest); }

  /* Stats strip was a green-to-teal gradient card with white text: Green Dark panel */
  & .premium-glass-card,
  & .premium-glass-card:hover {
    background: var(--xnx-text);
    border: 0;
    color: #fff;
  }
  & .stat-info h3 { color: #fff; font-family: var(--xnx-font-display); font-weight: 600; }
  & .stat-info p { color: var(--xnx-sage); font-family: var(--xnx-font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; }
  & .stat-icon { color: var(--xnx-sage); }
  @media (min-width: 768px) {
    & .stat-item:not(:last-child)::after { background: rgb(255 255 255 / 0.14); }
  }

  & .value-card { background: #fff; border: 1px solid var(--xnx-line); }
  & .value-card-img-wrapper { background: var(--xnx-mist); }
  & :is(.value-card h3 .text-green, .text-green) { color: var(--xnx-forest); }
  & .card-link { color: var(--xnx-forest); text-decoration: underline; text-decoration-color: var(--xnx-green); text-underline-offset: 4px; }
}

/* --- xenex-home (#xenex-home-redesign) ------------------------------------ */
html body #xenex-home-redesign:not(#xnx-z) {
  & .eyebrow { background: transparent; border-color: transparent; padding-left: 0; padding-right: 0; }
  & .card-title strong { color: var(--xnx-forest); }
  & .card-link { color: var(--xnx-forest); text-decoration: underline; text-decoration-color: var(--xnx-green); text-underline-offset: 4px; }
}

/* --- ordering-australia (#xenex-aus-guide-section) ------------------------ */
html body #xenex-aus-guide-section:not(#xnx-z) {
  & .badge-container {
    background: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    font-family: var(--xnx-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--xnx-forest);
  }

  & .step-icon-wrapper { background: var(--xnx-mist); border-color: transparent; color: var(--xnx-forest); }
  & .premium-glass-card:hover .step-icon-wrapper { color: var(--xnx-forest); }
  & .step-number { font-family: var(--xnx-font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; color: var(--xnx-forest); }
  & .notice-card { background: var(--xnx-mist); border-color: transparent; }
  & .notice-icon { color: var(--xnx-forest); }
}
/* @@GROUP-C-END@@ */


/* ==========================================================================
   GROUP D — about (QC), contact, legacy quality/forest, request forms
   ========================================================================== */
/* --- sections/xenex-categories-grid.liquid (#xenex-categories) ----------- */
html body #xenex-categories:not(#xnx-z) {
  --tile-bg: #fff;
  background: var(--xnx-paper);

  & .card {
    background: #fff;
    border: 1px solid var(--xnx-line);
    transition: border-color var(--xnx-dur-2) var(--xnx-ease-standard);

    &:hover { border-color: rgb(var(--xnx-forest-rgb) / 0.35); transform: none; }
  }
  & .card-media { background: var(--xnx-mist); }
  & .card-arrow { background: #fff; border-color: var(--xnx-line); }
  & .card-arrow svg { stroke: var(--xnx-forest); }
  & .card-title { color: var(--xnx-forest); }
  & .cta-btn svg { stroke: currentColor; }
}

/* --- sections/why-xenex-section.liquid (#xenex-why-choose-section) -------
   Dark root panel: Green Dark, translucent cards, white headings, Success Green accents. */
html body #xenex-why-choose-section:not(#xnx-z) {
  --glass-surface: rgb(255 255 255 / 0.04);
  --grad-text: linear-gradient(var(--xnx-sage), var(--xnx-sage));
  background-color: var(--xnx-text);
  background-image: none;
  color: rgb(255 255 255 / 0.78);

  & :is(h2, h3) { color: #fff; }
  & h3 { line-height: 1.2; }
  & .text-gradient { color: var(--xnx-sage); }
  & .intro-text, & p { color: rgb(255 255 255 / 0.78); }
  & .benefit-card {
    background: rgb(255 255 255 / 0.04);
    border: 1px solid rgb(255 255 255 / 0.16);

    &:hover { background: rgb(255 255 255 / 0.07); border-color: rgb(255 255 255 / 0.3); }
  }
  & .icon-box { background: rgb(var(--xnx-sage-rgb) / 0.16); color: var(--xnx-sage); }
  & :is(.overline, .eyebrow, .badge-text) { color: var(--xnx-sage); }
}

/* --- sections/brands-section.liquid (#xenex-brands-section) --------------
   Three sub-brand cards. The coloured middle bands become Green Dark (white text is
   AA there); the brand logos below still carry each sub-brand's identity. */
html body #xenex-brands-section:not(#xnx-z) {
  background: var(--xnx-paper);

  & .brand-card {
    background: #fff;
    border: 1px solid var(--xnx-line);

    &:hover { transform: none; border-color: rgb(var(--xnx-forest-rgb) / 0.35); }
  }
  & .card-middle,
  & .card-middle:is(.xenex, .transderma, .xencare) { background-color: var(--xnx-forest); color: #fff; }
  & .brand-title { color: #fff; letter-spacing: -0.01em; }
  & .brand-logo { filter: none; }
  & .card-bottom { border-top: 1px solid var(--xnx-line); }
}

/* --- sections/xenex-forest-about-section.liquid (#xenex-tree-impact-section)
   Xenex Forest: Accent BG + Success Green end of the palette, Green Dark text. */
html body #xenex-tree-impact-section:not(#xnx-z) {
  background: var(--xnx-mist);

  & h2 { color: var(--xnx-forest); }
  & .description-content { color: var(--xnx-ink); }
  & .badge-text { color: var(--xnx-forest); }
  & .feature-image-wrapper { background: transparent; border: 0; box-shadow: none; }
}

/* --- sections/xenex-about-us.liquid (#xenex-about-level3) — disabled on page.json,
   styled for any template that still uses it. .accordion-item.active is JS-toggled:
   colour only, display untouched. */
html body #xenex-about-level3:not(#xnx-z) {
  background: var(--xnx-paper);
  color: var(--xnx-ink);

  & .hero-title, & .card-title { color: var(--xnx-forest); }
  & .hero-img-wrapper { box-shadow: none; }
  & .exp-badge { background: #fff; border: 1px solid var(--xnx-line); box-shadow: 0 8px 24px rgb(var(--xnx-forest-rgb) / 0.12); }
  & .exp-num { color: var(--xnx-green); font-family: var(--xnx-font-display); }
  & .exp-label { color: var(--xnx-forest); }
  & .card-icon:is(.blue, .green) { background: var(--xnx-mist); color: var(--xnx-forest); }
  & .card-overline:is(.blue, .green) { color: var(--xnx-forest); }
  & .glass-card { background: #fff; border: 1px solid var(--xnx-line); }
  & .accordion-section { background-color: var(--xnx-text); }
  & .accordion-item {
    background: rgb(255 255 255 / 0.04);
    border-color: rgb(255 255 255 / 0.16);

    &.active { background: rgb(255 255 255 / 0.08); border-color: var(--xnx-sage); }
  }
  & .letter-box { background: rgb(255 255 255 / 0.1); }
  & .accordion-item.active .letter-box { background: var(--xnx-green); }
  & .commit-item { border-left-color: var(--xnx-line-strong); }
  & .commit-item:hover, & .commit-item.blue-border:hover { border-left-color: var(--xnx-green); }
  & .commit-item.blue-border { border-left-color: var(--xnx-line-strong); }
  & .commit-icon-float { color: var(--xnx-forest); box-shadow: none; border: 1px solid var(--xnx-line); }
  & .feature-dot { background: var(--xnx-green); }
  & .brand-card { border: 1px solid var(--xnx-line); }
  & .brand-img-area { background: var(--xnx-mist); }
  & .brand-content,
  & .brand-content:is(.xenex, .transderma, .xencare) { background: var(--xnx-forest); color: #fff; }
  /* The curved white cap no longer reads once corners are square; let the band show through. */
  & .brand-content::before { background: transparent; }
}

/* --- sections/contact-us.liquid + sections/Contact-New.liquid (#xenex-contact-section)
   Contact-New is still live on the AU / US / international contact templates. */
html body #xenex-contact-section:not(#xnx-z) {
  background: var(--xnx-paper);
  color: var(--xnx-ink);

  & h2, & .rep-name { color: var(--xnx-forest); }
  & .overline { color: var(--xnx-forest); }
  & .map-wrapper { background: #fff; border: 1px solid var(--xnx-line); }
  & .dark-card { background-color: var(--xnx-text); }
  & .dark-card::before { background: var(--xnx-green); }
  & .info-list li { color: rgb(255 255 255 / 0.8); }
  & .info-list a { color: var(--xnx-sage); }
  & .info-list a:hover { color: #fff; text-shadow: none; }
  & .region-badge { background: var(--xnx-mist); color: var(--xnx-forest); padding-inline: 0.5rem; }
  & .rep-meta { color: #4b5563; }

  /* Email is the primary action, Call the secondary outline */
  & .btn-email {
    background: var(--xnx-green);
    border: 1px solid var(--xnx-green);
    color: #fff;

    &:hover { background: var(--xnx-forest); border-color: var(--xnx-forest); color: #fff; }
  }
  & .btn-call {
    background: transparent;
    border: 1px solid var(--xnx-forest);
    color: var(--xnx-forest);

    &:hover { background: var(--xnx-forest); color: #fff; }
  }
}

/* --- sections/quality.liquid (#xenex-compliance-section) — replaced by xnx-* sections
   on page.quality; kept consistent in case it is re-enabled. */
html body #xenex-compliance-section:not(#xnx-z) {
  background: var(--xnx-paper);

  & h2, & .premium-glass-card h3, & .feature-item h3 { color: var(--xnx-forest); }
  & .dark-mode-area h2 { color: #fff; }
  & .dark-mode-area p { color: rgb(255 255 255 / 0.8); }
  & .dark-mode-area { border: 0; }
  & .feature-item svg, & .card-icon { color: var(--xnx-forest); }
  & .premium-glass-card:hover .card-icon { background: var(--xnx-green); color: #fff; }
  & .image-wrapper { background: transparent; border: 0; padding: 0; }
}

/* --- sections/xenex-forest.liquid (#xenex-veritree-section) — legacy Forest page section.
   Accent BG + Success Green palette with Green Dark text; no gradients. */
html body #xenex-veritree-section:not(#xnx-z) {
  --text-primary: var(--xnx-forest);
  --text-secondary: #4b5563;
  --accent-bg: var(--xnx-mist);
  --success-green: var(--xnx-green);
  --border-color: var(--xnx-line);
  --border-alt: var(--xnx-line);
  --dark-bg: var(--xnx-forest);
  --brand-green-hover: var(--xnx-forest);

  & h2 { color: var(--xnx-forest); }
  & h3 { color: var(--xnx-forest); }
  & .xv-badge { background: var(--xnx-mist); padding-inline: 0.625rem; }
  & .xv-badge-text, & .xv-icon-label, & .xv-stat-label { color: var(--xnx-forest); }
  & .xv-stat-value { color: var(--xnx-green); font-family: var(--xnx-font-display); }
  & .xv-banner { background-color: var(--xnx-forest); border: 0; }
  & .xv-banner-overlay { background: rgb(var(--xnx-text-rgb) / 0.6); }
  & .xv-divider { background: var(--xnx-sage); }
  & .xv-float-img { border-color: #fff; box-shadow: none; }
  & .xv-dark-panel {
    & h3 { color: var(--xnx-sage); }
    & p { color: rgb(255 255 255 / 0.78); }
    & .xv-checklist li { color: rgb(255 255 255 / 0.85); }
    & .xv-icon-label { background: rgb(var(--xnx-sage-rgb) / 0.16); color: var(--xnx-sage); }
    & .xv-check { background: rgb(var(--xnx-sage-rgb) / 0.16); }
  }
}

/* --- Request forms: sections/formula-request-form.liquid, price-match-request.liquid,
   COA-request-form.liquid, SDS-request-form.liquid, Sample-request-form.liquid,
   sds-coa-form.liquid. Fields, cards and submit buttons come from the generic layer;
   this only settles text colours. .form-status states keep their state colours. */
html body :is(#xenex-formula-request-section, #xenex-quote-request-section, #xenex-coa-request-section,
              #xenex-sds-request-section, #xenex-sample-request-section, #xenex-sds-coa-request-section):not(#xnx-z) {
  background: var(--xnx-paper);
  color: var(--xnx-ink);

  & :is(h1, h2, h3) { color: var(--xnx-forest); }
  & label { color: var(--xnx-forest); font-weight: 500; }
  & .required { color: var(--xnx-forest); }
  & :is(.badge-wrapper, .badge-container) { color: var(--xnx-forest); }
  & .form-control { display: block; border: 1px solid var(--xnx-line-strong); background-color: #fff; }
  & .btn-submit::after { background: none; }
  & .form-status { border-radius: var(--xnx-radius-control); }
}

/* @@GROUP-D-END@@ */


/* ==========================================================================
   GROUP E — customer accounts, Locksmith lock page, document database,
   catalog/search, hosted payment, collection list
   ========================================================================== */

/* --- sections/main-customers-login.liquid + main-customers-register.liquid
       (#xenex-login-section, #xenex-register-section). Also rendered inside the
       Locksmith lock page. CSS only: forms, names and the Locksmith overrides
       that hide the title inside the lock page are untouched. ------------- */
html body :is(#xenex-login-section, #xenex-register-section):not(#xnx-z) {
  background: var(--xnx-paper);

  & :is(.login-title, .register-title) {
    color: var(--xnx-forest);
    font-weight: 600;
  }
  & :is(.login-title, .register-title) .text-gradient { color: var(--xnx-forest); }
  & .status-wrapper :is(span, p):not(.badge-dot) { color: var(--xnx-forest); }
  & a { color: var(--xnx-forest); }
  & a:hover { color: var(--xnx-green); }
  & .premium-btn:hover:not(.is-loading) { background: var(--xnx-forest); border-color: var(--xnx-forest); }
  & .btn-spinner { border-radius: 50%; }

  /* Reset Prestige theme.css .input-group { display: flex } so fields and
     "Forgot your password?" stack as full-width blocks and never shrink on hover
     or when browser password managers wrap/inject nodes into .input-group. */
  & .input-group {
    display: block !important;
    width: 100%;
  }
  & .input-group input:not([type="hidden"]) {
    display: block;
    width: 100% !important;
    max-width: 100%;
  }
  & .input-group > div:has(a[href="#recover"]),
  & .input-group > div[style*="text-align"] {
    display: block !important;
    width: 100% !important;
    margin-top: 0.375rem !important;
    margin-bottom: 1.25rem !important;
    text-align: right;
  }
}

html body :is(.shopify-section--main-customers-login, .shopify-section--main-customers-register) {
  background: var(--xnx-paper) !important;
}

/* --- sections/main-customers-addresses.liquid (Poppins/Montserrat, pills) -- */
html body .shopify-section--main-customers-addresses:not(#xnx-z) {
  font-family: var(--xnx-font-body);
  color: var(--xnx-ink);

  & h1 { font-family: var(--xnx-font-display); font-weight: 600; letter-spacing: -0.025em; color: var(--xnx-forest); }
  & .customer-address-list > div { border-color: var(--xnx-line); border-radius: var(--xnx-radius-block); }
  & .customer-account-category {
    font-family: var(--xnx-font-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--xnx-mist);
    color: var(--xnx-forest) !important;
    border-radius: var(--xnx-radius-block);
  }
  & button.link { color: var(--xnx-forest); }
  & button.link:hover, & .link-faded:hover { color: var(--xnx-green); }
  & form button.link { color: #cb2b2b; }
  & .button { border-radius: var(--xnx-radius-control); font-family: var(--xnx-font-body); font-weight: 600; }
  & .button:hover { background-color: var(--xnx-forest) !important; }
}

/* --- Locksmith lock page (snippets/locksmith-content-variables.liquid, app-managed:
       never edited). Header "Members Only" and the logged-in no-access card. ---- */
html body :is(.locksmith-restricted, .locksmith-no-access) {
  font-family: var(--xnx-font-body);
  background: var(--xnx-paper);
}

html body :is(.locksmith-restricted__icon, .locksmith-no-access__icon) {
  background: var(--xnx-mist);
  border-radius: var(--xnx-radius-block);
}

html body :is(.locksmith-restricted__icon, .locksmith-no-access__icon) svg { stroke: var(--xnx-forest); }

html body :is(.locksmith-restricted__title, .locksmith-no-access__title) {
  font-family: var(--xnx-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--xnx-forest);
}

html body :is(.locksmith-restricted__divider, .locksmith-no-access__divider) {
  background: var(--xnx-green);
  border-radius: 0;
  height: 2px;
}

html body :is(.locksmith-restricted__message, .locksmith-no-access__message) { color: rgb(var(--xnx-ink-rgb) / 0.78); }
html body .locksmith-no-access__contact { background: var(--xnx-mist); border-radius: var(--xnx-radius-block); }
html body .locksmith-no-access__contact p { color: var(--xnx-ink); }
html body .locksmith-no-access__contact a { color: var(--xnx-forest); }
html body .locksmith-no-access__contact a:hover { color: var(--xnx-green); }

/* Locksmith's access-denied copy (and other pasted rich text) carries inline Montserrat */
html body :is(main, #main, .locksmith-no-access) :is([style*="font-family:Montserrat"], [style*="font-family: Montserrat"], [style*="font-family:Poppins"], [style*="font-family: Poppins"]) {
  font-family: var(--xnx-font-body) !important;
}

/* --- templates/page.doc-database.json custom-liquid (#xenex-search-widget):
       COA/SDS/formula database widget + formula chat modal. Colour/type/radius only;
       display is never set (JS toggles the loading box, results, request form, modal). -- */
html body #xenex-search-widget:not(#xnx-z) {
  --xenex-primary: var(--xnx-forest);
  --xenex-primary-hover: var(--xnx-green);
  --xenex-primary-dark: var(--xnx-forest);
  --xenex-success: var(--xnx-green);
  --xenex-text-main: var(--xnx-ink);
  --xenex-text-secondary: #4b5563;
  --xenex-text-muted: #6b7280;
  --xenex-accent-bg: var(--xnx-mist);
  --xenex-border-color: #d1d5db;
  --xenex-border-light: var(--xnx-line);
  --xenex-gradient: linear-gradient(var(--xnx-green), var(--xnx-green));
  --xenex-shadow: none;
  font-family: var(--xnx-font-body);

  & *:not(code, .xenex-md code) { font-family: var(--xnx-font-body); }
  & .xenex-widget-card { border-color: var(--xnx-line); box-shadow: none; }
  & .xenex-top-gradient, & .xenex-modal-stripe { background: var(--xnx-green); height: 3px; }

  /* Folder tabs (segmented control) */
  & .xenex-folder-nav { background: var(--xnx-mist); border-color: transparent; }
  & .xenex-folder-btn { font-weight: 600; color: #4b5563; }
  & .xenex-folder-btn.active { background: #fff; color: var(--xnx-forest); box-shadow: inset 0 -2px 0 var(--xnx-green); }

  /* Search */
  & :is(.xenex-search-input, .xenex-popover-input) { background: #fff; border-width: 1px; border-color: var(--xnx-line-strong); }
  & :is(.xenex-search-input, .xenex-popover-input):focus { border-color: var(--xnx-green); box-shadow: 0 0 0 3px rgb(var(--xnx-green-rgb) / 0.18); }
  & :is(.xenex-btn-search, .xenex-btn-submit, .btn-primary) {
    background: var(--xnx-green);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
  }
  & :is(.xenex-btn-search, .xenex-btn-submit, .btn-primary):hover:not(:disabled) { background: var(--xnx-forest); transform: none; box-shadow: none; }

  /* Filter pills -> chips */
  & :is(.xenex-split-pill, .xenex-pill-btn) { background: #fff; border-color: var(--xnx-line-strong); }
  & :is(.xenex-split-pill.active, .xenex-pill-btn.open, .xenex-pill-btn:hover) { background: var(--xnx-mist); border-color: rgb(var(--xnx-forest-rgb) / 0.4); color: var(--xnx-forest); }
  & .xenex-popover {
    background: var(--xnx-glass-menu);
    border-color: var(--xnx-glass-border-light);
    box-shadow: var(--xnx-elevation-float), var(--xnx-glass-highlight-light);
    -webkit-backdrop-filter: var(--xnx-blur-strong);
    backdrop-filter: var(--xnx-blur-strong);
  }
  & :is(.xenex-popover-title, .xenex-search-label) { color: var(--xnx-forest); }
  & :is(.xenex-badge, .badge-fr, .badge-form, .badge-category, .xenex-count-pill, .mobile-label) {
    font-family: var(--xnx-font-mono);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--xnx-mist);
    color: var(--xnx-forest);
    border-color: transparent;
  }
  & .xenex-lang-group { background: var(--xnx-mist); border-color: transparent; }
  & .xenex-lang-btn.active { box-shadow: none; color: var(--xnx-forest); }

  /* Results table: Green Dark header, Paper zebra, mono codes */
  & .item-table { font-family: var(--xnx-font-body) !important; border-radius: var(--xnx-radius-control); }
  & .item-table th {
    background-color: var(--xnx-forest) !important;
    font-family: var(--xnx-font-mono) !important;
    font-weight: 500 !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
  }
  & .item-table tr.even-row { background-color: var(--xnx-paper) !important; }
  & .item-table tbody tr:hover td { background-color: var(--xnx-mist) !important; }
  & .item-table tr { border-radius: var(--xnx-radius-control) !important; }
  & .btn-open {
    background-color: var(--xnx-green) !important;
    border-radius: var(--xnx-radius-control) !important;
    font-family: var(--xnx-font-body) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }
  & .btn-open:hover { background-color: var(--xnx-forest) !important; box-shadow: none !important; transform: none; }
  & mark.highlight { background: rgb(var(--xnx-sage-rgb) / 0.45); color: var(--xnx-forest); }
  & .xenex-page-btn:hover:not(:disabled) { background: var(--xnx-mist); color: var(--xnx-forest); }

  /* Request form + modal */
  & .xenex-req-header h3 { font-family: var(--xnx-font-display) !important; font-weight: 600 !important; color: var(--xnx-forest) !important; }
  & .xenex-form-ctrl { background: #fff !important; border: 1px solid var(--xnx-line-strong) !important; border-radius: var(--xnx-radius-input) !important; }
  & .xenex-form-ctrl:focus { border-color: var(--xnx-green) !important; box-shadow: 0 0 0 3px rgb(var(--xnx-green-rgb) / 0.18) !important; }
  & .xenex-modal-overlay {
    background: rgb(var(--xnx-ink-rgb) / 0.68);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  & .xenex-modal-panel { box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.35); }
  & .xenex-modal-header { background: var(--xnx-paper); }
  & .xenex-chat-bubble-user { background: var(--xnx-forest); }
  & .xenex-chat-bubble-ai { background: var(--xnx-mist); color: var(--xnx-ink); }
  & .xenex-modal-starter { background: #fff; }
  & .xenex-modal-starter:hover { background: var(--xnx-mist); color: var(--xnx-forest); }
  & .xenex-starter-shimmer { background: var(--xnx-mist); animation: none; }
  & .xenex-md h4 { font-family: var(--xnx-font-display) !important; color: var(--xnx-forest) !important; }
  & .xenex-md code { font-family: var(--xnx-font-mono) !important; background: var(--xnx-mist) !important; border-radius: 4px !important; }
}

/* --- sections/main-collection-catalog.liquid (.catalog) and
       sections/main-search-catalog.liquid (vars on #shopify-section-*, .catalog inside).
       The --xl-* tokens are remapped where they are defined; the rules that use them
       are untouched. Green becomes Green Dark because nearly every use is small text. -- */
html body :is(.catalog, :is(#xnx-zz, .shopify-section--main-search)) {
  --xl-green: var(--xnx-forest);
  --xl-green-dark: #076a30;
  --xl-success: var(--xnx-green);
  --xl-accent: var(--xnx-mist);
  --xl-text: var(--xnx-ink);
  --xl-muted: #555555;
  --xl-faint: #9ca3af;
  --xl-border: var(--xnx-border);
  --xl-border-strong: #d1d5db;
  --xl-zebra: var(--xnx-paper);
  --xl-radius: var(--xnx-radius-block);
  --xl-focus: 0 0 0 3px rgb(var(--xnx-green-rgb) / 0.18);
  --catalog-heading-font: var(--xnx-font-display);
}

html body .catalog:not(#xnx-z) {
  & :is(.catalog__filter-status, .catalog__filter-clear, .catalog__doc, .catalog__size-chip,
        .catalog__listbox, .catalog__option-thumb, .catalog__cell--meta::before) {
    border-radius: var(--xnx-radius-control);
  }
  & .catalog__listbox {
    background: var(--xnx-glass-menu);
    border-color: var(--xnx-glass-border-light);
    box-shadow: var(--xnx-elevation-float), var(--xnx-glass-highlight-light);
    -webkit-backdrop-filter: var(--xnx-blur-strong);
    backdrop-filter: var(--xnx-blur-strong);
  }
  & .catalog__table thead :is(th, td) {
    font-family: var(--xnx-font-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  & :is(.catalog__size-chip, .catalog__sub, .catalog__doc) { font-family: var(--xnx-font-mono); }
  & .catalog__size-chip { font-size: 0.75rem; letter-spacing: 0.04em; }
  /* Short-dated: brand Warning, state only */
  & .catalog__size-chip.is-short { color: #7a5413; background: rgb(192 132 34 / 0.1); border-color: rgb(192 132 34 / 0.55); }
  & .catalog__letter { color: var(--xnx-forest); }
}

/* Search page form: the submit is a primary action, so it stays Xenex Green */
html body :is(#xnx-zz, .shopify-section--main-search) .catalog-search {
  & .catalog-search__input { border-radius: var(--xnx-radius-input); }
  & .catalog-search__submit { background: var(--xnx-green); border-radius: var(--xnx-radius-control); font-weight: 600; }
  & .catalog-search__submit:hover { background: var(--xnx-forest); }
}

/* --- sections/main-list-collections.liquid ([id^="xenex-collections-"]) ------ */
html body :is(#xnx-zz, [id^="xenex-collections-"]):not(#xnx-z) {
  font-family: var(--xnx-font-body);
  background: var(--xnx-paper);

  & :is(.blob, .blob-1, .blob-2) { display: none; }
  & .xenex-title {
    font-family: var(--xnx-font-display);
    font-weight: 600;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--xnx-forest);
    animation: none;
  }
  & .xenex-card { border-radius: var(--xnx-radius-block); box-shadow: none; }
  & .xenex-card-title { font-family: var(--xnx-font-display); font-weight: 600; }
}

/* --- sections/hosted-payment.liquid, hosted-payment2.liquid (Clover invoice form).
       Visual only: the Clover iframes and #payment-form behaviour are untouched. --- */
html body .payment-form:has(#payment-form) {
  border-radius: var(--xnx-radius-block);
  box-shadow: none;
  border: 1px solid var(--xnx-line);
  font-family: var(--xnx-font-body);

  &::before { background: var(--xnx-forest); border-radius: 0; }
  & h1 { font-family: var(--xnx-font-display); font-weight: 600; letter-spacing: -0.02em; }
  & .amount-due { font-family: var(--xnx-font-display); font-weight: 600; color: var(--xnx-forest); }
  & label { color: var(--xnx-ink); }
  & .clover-field { border: 1px solid var(--xnx-line-strong); border-radius: var(--xnx-radius-input); }
  & .clover-field:focus-within { border-color: var(--xnx-green); box-shadow: 0 0 0 3px rgb(var(--xnx-green-rgb) / 0.18); }
  & #payment-form button { background: var(--xnx-green); border-radius: var(--xnx-radius-control); box-shadow: none; font-weight: 600; }
  & #payment-form button:hover { background: var(--xnx-forest); filter: none; box-shadow: none; }
  & #payment-message .ok { color: var(--xnx-forest); }
}
/* @@GROUP-E-END@@ */