/*
Theme Name: Blocksy Factory Child
Template: blocksy
Description: Client Site Factory child theme. Brand palette is applied by scripts/apply-brand.sh (lines marked @brand:*). Mirrors the proven a1-compounds/rts pattern: CSS custom properties override Blocksy surfaces; theme.json carries the block-editor palette.
Version: 1.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  /* @brand markers — apply-brand.sh rewrites the hex on each marked line */
  --bpc-primary:           #22364B; /* @brand:primary */
  --bpc-primary-hover:     #406090; /* @brand:primary-hover */
  --bpc-foreground:        #1A2530; /* @brand:foreground */
  --bpc-body:              #1A2530; /* @brand:body */
  --bpc-background:        #FFFFFF; /* @brand:background */
  --bpc-card:              #E6E8ED; /* @brand:card */
  --bpc-border:            #A0BBCE; /* @brand:border */
  --bpc-background-deeper: #A0BBCE; /* @brand:background-deeper */

  --bpc-font-sans: 'DM Sans', system-ui, sans-serif;
  --bpc-font-mono: 'DM Mono', ui-monospace, monospace;
  --bpc-radius: 0.375rem;
}

/* Force the client palette onto Blocksy's surfaces (mirrors a1-compounds !important pattern) */
body {
  background: var(--bpc-background) !important;
  color: var(--bpc-foreground) !important;
  font-family: var(--bpc-font-sans);
}
a { color: var(--bpc-primary); }
a:hover { color: var(--bpc-primary-hover); }

/* Merit Bio per-client overrides (DESIGN.md — beyond the 8-slot contract).
   Cyan is decorative/accent only: ~2.5:1 on white fails AA, so cyan text never
   sits on light surfaces; links on white stay navy/steel. */
:root {
  --bpc-accent: #40B0D0;
  --bpc-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --bpc-font-sans: 'Inter', system-ui, sans-serif;
}
/* Blocksy's dynamic typography CSS wins the cascade without !important */
body { font-family: var(--bpc-font-sans) !important; }
h1, h2, h3, h4, h5, h6 { font-family: var(--bpc-font-display) !important; }

/* Front page: page copy provides its own H1 — suppress the duplicate "Home" hero title */
body.home .entry-header { display: none; }

/* Map the brand onto Blocksy's OWN palette variables. Without this, Blocksy renders buttons,
   links, breadcrumbs, the active-nav state, and tags in its default accent #2872FA (a bright
   blue that is off-brand AND only 4.31:1 on white — fails WCAG AA). Navy #22364B gives 12.4:1.
   These --theme-palette-color-* vars are what Blocksy's chrome actually consumes. */
:root {
  /* !important so these beat Blocksy's later inline dynamic-CSS :root palette (normal priority). */
  --theme-palette-color-1: var(--bpc-primary) !important;       /* navy — links, buttons, accents */
  --theme-palette-color-2: var(--bpc-primary-hover) !important; /* steel — hover */
  --theme-palette-color-3: var(--bpc-foreground) !important;    /* ink — headings */
  --theme-palette-color-4: var(--bpc-primary-hover) !important; /* steel — secondary/meta text */
  --theme-palette-color-5: var(--bpc-border) !important;        /* blue-gray — borders */
  --theme-palette-color-6: var(--bpc-card) !important;          /* off-white — light surfaces */
  --theme-palette-color-8: var(--bpc-background) !important;    /* white */
}

/* Compliance: hide product-card category meta in the loop — the "Peptides" label sits
   adjacent to GLP-1 chemical names and trips PEPT-20's proximity regex on listing pages.
   Category nav still available via the menu + /product-category/ pages. */
.products .entry-meta .meta-categories,
ul.products li.product .meta-categories { display: none !important; }

/* ---- Age gate: premium brand skin (one-click 21+ confirm) ---- */
.age-gate__wrapper {
  background: var(--bpc-card);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(10, 18, 28, .45);
  padding: 44px 40px;
  max-width: 420px;
}
.age-gate__heading-title {
  font-family: var(--bpc-font-display) !important;
  color: var(--bpc-primary);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.age-gate__subheadline {
  font-family: var(--bpc-font-sans) !important;
  color: var(--bpc-foreground);
  font-size: 15px;
  line-height: 1.55;
  max-width: 32ch;
  margin: 10px auto 22px;
}
.age-gate__button, .age-gate__submit {
  font-family: var(--bpc-font-display) !important;
  border-radius: 999px !important;
  padding: 13px 30px !important;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid var(--bpc-primary) !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.age-gate__button--yes, .age-gate__submit--yes {
  background: var(--bpc-primary) !important;
  color: #fff !important;
}
.age-gate__button--yes:hover, .age-gate__submit--yes:hover { background: var(--bpc-primary-hover) !important; border-color: var(--bpc-primary-hover) !important; }
.age-gate__button--no, .age-gate__submit--no {
  background: transparent !important;
  color: var(--bpc-primary) !important;
}
.age-gate__button--no:hover, .age-gate__submit--no:hover { background: var(--bpc-border) !important; }
.age-gate__remember-wrapper, .age-gate__remember {
  font-family: var(--bpc-font-sans) !important;
  color: var(--bpc-foreground);
  font-size: 13px;
}
.age-gate__errors { color: #b3261e; font-size: 14px; }
/* ---- CSF Home Sections — premium storefront layout (puratek-architecture, client-token skin) ----
   Consumes the child theme's --bpc-* tokens. Sections full-bleed via the 100vw breakout so they
   work inside any theme container. Append to the per-client child style.css. */

.mb-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 72px 24px;
}
.mb-wrap { max-width: 1160px; margin: 0 auto; }

.mb-eyebrow {
  font-family: var(--bpc-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bpc-primary-hover);
  margin: 0 0 10px;
}
.mb-h2 {
  font-family: var(--bpc-font-display) !important;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--bpc-primary);
  margin: 0 0 14px;
}
.mb-h2 em { font-style: normal; color: var(--bpc-primary-hover); }
.mb-sub { font-size: 16px; line-height: 1.6; color: var(--bpc-foreground); max-width: 60ch; margin: 0 0 8px; }
.mb-center { text-align: center; }
.mb-center .mb-sub { margin-left: auto; margin-right: auto; }

.mb-btn {
  display: inline-block;
  font-family: var(--bpc-font-display);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: 999px;
  text-decoration: none !important;
  border: 2px solid var(--bpc-primary);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mb-btn--solid { background: var(--bpc-primary); color: #fff !important; }
.mb-btn--solid:hover { background: var(--bpc-primary-hover); border-color: var(--bpc-primary-hover); }
.mb-btn--ghost { background: transparent; color: var(--bpc-primary) !important; }
.mb-btn--ghost:hover { background: rgba(34, 54, 75, .08); }
.mb-btn--inverse { background: #fff; color: var(--bpc-primary) !important; border-color: #fff; }
.mb-btn--inverse:hover { background: var(--bpc-card); border-color: var(--bpc-card); }
.mb-btn--outline-light { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.7); }
.mb-btn--outline-light:hover { background: rgba(255,255,255,.12); }

/* ---- Hero: photo backdrop blends into the blue-gray band (handoff directive) ---- */
.mb-hero {
  background: linear-gradient(135deg, #b9cdd9 0%, var(--bpc-border) 55%, #8fadc4 100%);
  padding: 88px 24px 0;
  overflow: hidden;
}
.mb-hero .mb-wrap { display: flex; align-items: center; gap: 48px; }
.mb-hero__copy { flex: 1.1; padding-bottom: 88px; }
.mb-hero__title {
  font-family: var(--bpc-font-display) !important;
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--bpc-primary);
  margin: 0 0 18px;
}
.mb-hero__sub { font-size: 17px; line-height: 1.65; color: var(--bpc-foreground); max-width: 52ch; margin: 0 0 28px; }
.mb-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.mb-hero__media { flex: .9; align-self: flex-end; display: flex; justify-content: center; }
.mb-hero__media img {
  display: block;
  max-height: 520px;
  width: auto;
   /* melts the photo's own blue-gray backdrop into the band */
  filter: drop-shadow(0 28px 48px rgba(16, 28, 42, .35));
}

/* ---- Ticker band ---- */
.mb-ticker {
  background: var(--bpc-primary);
  padding: 14px 24px;
}
.mb-ticker .mb-wrap { display: flex; justify-content: center; gap: 38px; flex-wrap: wrap; }
.mb-ticker span {
  font-family: var(--bpc-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
.mb-ticker span::before { content: "•"; color: var(--bpc-accent); margin-right: 10px; }

/* ---- Category cards ---- */
.mb-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 40px; }
.mb-cat {
  display: block;
  text-decoration: none !important;
  border: 1px solid var(--bpc-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.mb-cat:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16, 28, 42, .14); }
.mb-cat__img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--bpc-border); }
.mb-cat__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-cat__body { padding: 18px 20px 20px; }
.mb-cat__name { font-family: var(--bpc-font-display); font-weight: 800; font-size: 19px; color: var(--bpc-primary); margin: 0 0 4px; }
.mb-cat__desc { font-size: 13.5px; line-height: 1.5; color: var(--bpc-primary-hover); margin: 0 0 10px; }
.mb-cat__cta { font-family: var(--bpc-font-display); font-size: 13px; font-weight: 700; color: var(--bpc-primary); }
.mb-cat__cta::after { content: " →"; color: var(--bpc-primary-hover); }

/* ---- Featured products (styles the Woo [products] grid on home) ---- */
.mb-products { padding-top: 0; }
body.home ul.products { margin-top: 36px !important; }
body.home ul.products li.product {
  border: 1px solid var(--bpc-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  padding-bottom: 16px !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
body.home ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16, 28, 42, .14); }
body.home ul.products li.product .woocommerce-loop-product__title { font-family: var(--bpc-font-display) !important; font-weight: 700; }

/* ---- Trust band (navy) ---- */
.mb-trust { background: linear-gradient(150deg, var(--bpc-primary) 0%, #1a2a3c 100%); }
.mb-trust .mb-eyebrow { color: var(--bpc-accent); }
.mb-trust .mb-h2 { color: #fff; }
.mb-trust .mb-sub { color: var(--bpc-card); }
.mb-trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px; margin-top: 36px; }
.mb-trust__item {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(160, 187, 206, .25);
  border-radius: 14px;
  padding: 22px 24px;
}
.mb-trust__item h3 {
  font-family: var(--bpc-font-display) !important;
  font-size: 17px;
  font-weight: 700;
  color: #fff !important;
  margin: 0 0 8px;
}
.mb-trust__item h3::before { content: "◆ "; color: var(--bpc-accent); font-size: 13px; }
.mb-trust__item p { font-size: 14.5px; line-height: 1.6; color: var(--bpc-card); margin: 0; }

/* ---- FAQ accordion teaser ---- */
.mb-faq { background: var(--bpc-card); }
.mb-faq__list { margin-top: 32px; }
.mb-faq details {
  background: #fff;
  border: 1px solid var(--bpc-border);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 0;
}
.mb-faq summary {
  font-family: var(--bpc-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--bpc-primary);
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.mb-faq summary::-webkit-details-marker { display: none; }
.mb-faq summary::after { content: "+"; position: absolute; right: 22px; color: var(--bpc-primary-hover); font-size: 20px; font-weight: 400; }
.mb-faq details[open] summary::after { content: "–"; }
.mb-faq details p { padding: 0 22px 18px; margin: 0; font-size: 15px; line-height: 1.6; color: var(--bpc-foreground); }
.mb-faq__more { margin-top: 18px; }

/* ---- RUO notice band ---- */
.mb-ruo { padding: 40px 24px; background: #fff; }
.mb-ruo .mb-wrap {
  border: 1px solid var(--bpc-border);
  border-left: 5px solid var(--bpc-primary-hover);
  border-radius: 12px;
  padding: 24px 30px;
}
.mb-ruo h3 { font-family: var(--bpc-font-display) !important; font-size: 16px; font-weight: 800; color: var(--bpc-primary); margin: 0 0 8px; }
.mb-ruo p { font-size: 14px; line-height: 1.65; color: var(--bpc-foreground); margin: 0; }

/* ---- Final CTA band ---- */
.mb-cta { background: linear-gradient(150deg, var(--bpc-primary) 0%, #1a2a3c 100%); text-align: center; }
.mb-cta .mb-h2 { color: #fff; }
.mb-cta .mb-sub { color: var(--bpc-card); margin: 0 auto 28px; }
.mb-cta__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .mb-cats { grid-template-columns: repeat(2, 1fr); }
  .mb-hero .mb-wrap { flex-direction: column; gap: 8px; }
  .mb-hero__copy { padding-bottom: 0; }
  .mb-hero__media { align-self: center; margin-top: 12px; }
  .mb-hero__media img { max-height: 380px; }
  .mb-hero { padding-top: 56px; }
  .mb-trust__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mb-section { padding: 52px 18px; }
  .mb-cats { grid-template-columns: 1fr; }
  .mb-ticker .mb-wrap { gap: 10px; flex-direction: column; align-items: center; }
}
/* Home: section layout starts flush under the header */
body.home .entry-content { margin-top: 0 !important; }
body.home article { margin-bottom: 0 !important; }

/* ---- Interior pages: styled document, not raw markdown ---- */
body.page:not(.home):not(.woocommerce-page) .entry-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: linear-gradient(150deg, var(--bpc-primary) 0%, #1a2a3c 100%);
  padding: 96px 24px 84px;
  margin-bottom: 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* hero depth: soft cyan glow + oversized brand mark bleeding off the right edge */
body.page:not(.home):not(.woocommerce-page) .entry-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(820px 360px at 78% 120%, rgba(64,176,208,.28), transparent 70%);
}
body.page:not(.home):not(.woocommerce-page) .entry-header::after {
  content: ""; position: absolute; pointer-events: none;
  right: -90px; top: 50%; transform: translateY(-50%) rotate(12deg);
  width: 340px; height: 340px; opacity: .10;
  background: url('/wp-content/uploads/2026/06/logo-mark.svg') no-repeat center / contain;
}
body.page:not(.home):not(.woocommerce-page) .entry-header > * { position: relative; z-index: 1; }
body.page:not(.home):not(.woocommerce-page) .entry-header .page-title,
body.page:not(.home):not(.woocommerce-page) .entry-header h1 {
  color: #fff !important;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0;
}
body.page:not(.home) .entry-content > h2 { 
  font-size: 26px; 
  margin-top: 44px; 
  padding-top: 28px;
  border-top: 1px solid var(--bpc-card);
}
body.page:not(.home) .entry-content > h2:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
body.page:not(.home) .entry-content > p, 
body.page:not(.home) .entry-content > ul { 
  font-size: 16px; 
  line-height: 1.7; 
  max-width: 72ch;
}
body.page:not(.home) .entry-content hr { 
  border: 0; 
  border-top: 1px solid var(--bpc-border); 
  margin: 40px 0; 
  opacity: .5;
}
/* Interior title band sits flush under the site header */
body.page:not(.home):not(.woocommerce-page) .ct-container-full { padding-top: 0 !important; }

/* ================= v6-mix home (swiss hero + glass body) ================= */
/* v6-mix (swiss hero + glass body) namespaced for WP */

.mixhome {
    --navy:#22364B;
    --cyan:#40B0D0;
    --steel:#406090;
    --bluegray:#A0BBCE;
    --offwhite:#E6E8ED;
    --white:#FFFFFF;
    --ink:#1A2530;
    --radius:18px;
    --radius-sm:12px;
    --hairline:rgba(34,54,75,0.12);
    --hairline-strong:rgba(34,54,75,0.18);
    --glass:rgba(255,255,255,0.55);
    --glass-strong:rgba(255,255,255,0.72);
    --shadow-soft:0 24px 60px -28px rgba(34,54,75,0.35);
    --shadow-card:0 16px 40px -24px rgba(34,54,75,0.28);
  }

.mixhome * {box-sizing:border-box;margin:0;padding:0;}

.mixhome {scroll-behavior:smooth;}

.mixhome {
    font-family:'Inter',system-ui,sans-serif;
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    background:
      radial-gradient(1200px 700px at 78% -8%, rgba(64,176,208,0.16), transparent 60%),
      radial-gradient(900px 600px at 8% 12%, rgba(160,187,206,0.30), transparent 58%),
      linear-gradient(180deg, #EEF2F6 0%, #E4EAF0 40%, #E8ECF1 100%);
    background-attachment:fixed;
    min-height:100vh;
  }

.mixhome h1, .mixhome h2, .mixhome h3, .mixhome h4 {font-family:'Plus Jakarta Sans',sans-serif;color:var(--navy);letter-spacing:-0.02em;line-height:1.12;}

.mixhome a {text-decoration:none;color:inherit;}

.mixhome .wrap {max-width:1200px;margin:0 auto;padding:0 32px;}

.mixhome .eyebrow {
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:12px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--steel);
  }

  /* ---------- Buttons ---------- */
.mixhome .btn {
    display:inline-flex;align-items:center;gap:9px;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:15px;
    padding:13px 24px;border-radius:999px;border:1px solid transparent;
    cursor:pointer;transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
    white-space:nowrap;
  }
.mixhome .btn-primary {
    background:var(--navy);color:#fff;
    box-shadow:0 14px 30px -14px rgba(34,54,75,0.6);
  }
.mixhome .btn-primary:hover {transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(34,54,75,0.65);background:#1b2c3e;}
.mixhome .btn-ghost {
    background:var(--glass);
    border:1px solid var(--hairline-strong);
    color:var(--navy);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  }
.mixhome .btn-ghost:hover {transform:translateY(-2px);background:var(--glass-strong);border-color:var(--steel);}
.mixhome .btn svg {width:16px;height:16px;}

  /* ---------- Header ---------- */
.mixhome header {
    position:sticky;top:0;z-index:100;
    background:rgba(238,242,246,0.62);
    -webkit-backdrop-filter:saturate(140%) blur(16px);backdrop-filter:saturate(140%) blur(16px);
    border-bottom:1px solid var(--hairline);
  }
.mixhome .nav {display:flex;align-items:center;justify-content:space-between;height:72px;}
.mixhome .wordmark {display:flex;align-items:center;gap:11px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:21px;color:var(--navy);letter-spacing:-0.02em;}
.mixhome .mark {
    width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
    background:linear-gradient(150deg,var(--navy),var(--steel));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 6px 16px -8px rgba(34,54,75,0.6);
  }
.mixhome .mark span {width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#bfe6f1,var(--cyan));box-shadow:0 0 0 3px rgba(64,176,208,0.25);}
.mixhome nav ul {display:flex;gap:6px;list-style:none;}
.mixhome nav ul a {
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:14.5px;color:var(--navy);
    padding:9px 15px;border-radius:999px;transition:background .2s ease,color .2s ease;
  }
.mixhome nav ul a:hover, .mixhome nav ul a.active {background:rgba(255,255,255,0.6);color:var(--steel);}
.mixhome .header-right {display:flex;align-items:center;gap:14px;}
.mixhome .cart {
    position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
    background:var(--glass);border:1px solid var(--hairline-strong);color:var(--navy);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s ease,transform .2s ease;
  }
.mixhome .cart:hover {background:var(--glass-strong);transform:translateY(-1px);}
.mixhome .cart svg {width:19px;height:19px;}
.mixhome .cart b {
    position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;
    background:var(--navy);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;font-family:'Inter',sans-serif;
  }
.mixhome .menu-toggle {display:none;}

  /* ---------- Hero ---------- */
.mixhome .hero {position:relative;padding:74px 0 56px;overflow:hidden;}
.mixhome .hero-grid {display:grid;grid-template-columns:1.05fr 0.95fr;gap:44px;align-items:center;}
.mixhome .hero h1 {font-size:clamp(40px,5.4vw,64px);font-weight:800;margin:18px 0 20px;}
.mixhome .hero h1 em {font-style:normal;color:var(--steel);}
.mixhome .hero p.lead {font-size:18.5px;color:#42566b;max-width:30em;margin-bottom:30px;}
.mixhome .hero-cta {display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px;}
.mixhome .hero-meta {display:flex;gap:26px;flex-wrap:wrap;}
.mixhome .hero-meta .mi {display:flex;flex-direction:column;}
.mixhome .hero-meta .mi b {font-family:'Plus Jakarta Sans',sans-serif;font-size:21px;color:var(--navy);font-weight:700;}
.mixhome .hero-meta .mi span {font-size:13px;color:var(--steel);}

.mixhome .hero-visual {position:relative;display:grid;place-items:center;min-height:460px;}
  /* frosted glass panel behind the vial */
.mixhome .glass-panel {
    position:absolute;inset:6% 4%;
    border-radius:30px;
    background:linear-gradient(155deg,rgba(255,255,255,0.6),rgba(255,255,255,0.28));
    border:1px solid rgba(255,255,255,0.7);
    box-shadow:var(--shadow-soft),inset 0 1px 0 rgba(255,255,255,0.8);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }
.mixhome .hero-vial {
    position:relative;z-index:2;width:78%;max-width:380px;
    
    filter:drop-shadow(34px 50px 40px rgba(34,54,75,0.30));
    animation:float 7s ease-in-out infinite;
  }
  @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.mixhome .float-chip {
    position:absolute;z-index:3;
    background:var(--glass-strong);
    border:1px solid rgba(255,255,255,0.8);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-radius:14px;padding:11px 15px;
    box-shadow:var(--shadow-card);
    display:flex;align-items:center;gap:10px;
  }
.mixhome .float-chip .dot {width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(64,176,208,0.2);}
.mixhome .float-chip b {font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;color:var(--navy);font-weight:700;display:block;line-height:1.2;}
.mixhome .float-chip span {font-size:11.5px;color:var(--steel);}
.mixhome .chip-1 {top:8%;left:-2%;}
.mixhome .chip-2 {bottom:10%;right:-3%;}

  /* ---------- Ticker band ---------- */
.mixhome .ticker {
    margin-top:34px;
    background:var(--glass);
    border:1px solid var(--hairline);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-radius:var(--radius);
    box-shadow:var(--shadow-card);
  }
.mixhome .ticker-inner {display:grid;grid-template-columns:repeat(4,1fr);}
.mixhome .ticker .ti {
    display:flex;align-items:center;gap:13px;padding:20px 22px;
    border-right:1px solid var(--hairline);
  }
.mixhome .ticker .ti:last-child {border-right:none;}
.mixhome .ticker .ti svg {width:22px;height:22px;color:var(--steel);flex-shrink:0;}
.mixhome .ticker .ti span {font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:14px;color:var(--navy);line-height:1.3;}

  /* ---------- Section frame ---------- */
.mixhome section {padding:62px 0;}
.mixhome .sec-head {margin-bottom:38px;max-width:40em;}
.mixhome .sec-head h2 {font-size:clamp(28px,3.4vw,40px);font-weight:700;margin:12px 0 12px;}
.mixhome .sec-head p {color:#46596d;font-size:16.5px;}

  /* ---------- Category grid ---------- */
.mixhome .cat-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.mixhome .cat {
    position:relative;display:flex;flex-direction:column;
    background:var(--glass);
    border:1px solid var(--hairline);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow-card);
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  }
.mixhome .cat:hover {transform:translateY(-6px);border-color:rgba(64,176,208,0.45);box-shadow:0 26px 50px -26px rgba(34,54,75,0.4);}
.mixhome .cat-photo {height:168px;display:grid;place-items:center;padding:16px;background:linear-gradient(180deg,rgba(160,187,206,0.16),rgba(255,255,255,0.05));}
.mixhome .cat-photo img {max-height:140px;max-width:78%;transition:transform .35s ease;}
.mixhome .cat:hover .cat-photo img {transform:translateY(-4px) scale(1.03);}
.mixhome .cat-body {padding:18px 20px 22px;border-top:1px solid var(--hairline);}
.mixhome .cat-body h3 {font-size:18px;font-weight:700;margin-bottom:4px;}
.mixhome .cat-body p {font-size:13px;color:var(--steel);margin-bottom:12px;}
.mixhome .cat-link {font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:13.5px;color:var(--navy);display:inline-flex;align-items:center;gap:6px;}
.mixhome .cat-link svg {width:14px;height:14px;transition:transform .25s ease;}
.mixhome .cat:hover .cat-link svg {transform:translateX(4px);}

  /* ---------- Featured products ---------- */
.mixhome .prod-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.mixhome .prod {
    display:flex;flex-direction:column;
    background:var(--glass-strong);
    border:1px solid var(--hairline);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow-card);
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  }
.mixhome .prod:hover {transform:translateY(-6px);box-shadow:0 28px 54px -26px rgba(34,54,75,0.42);border-color:rgba(64,176,208,0.4);}
.mixhome .prod-photo {position:relative;height:210px;display:grid;place-items:center;padding:18px;background:linear-gradient(180deg,rgba(160,187,206,0.14),transparent);}
.mixhome .prod-photo img {max-height:172px;max-width:72%;filter:drop-shadow(10px 18px 20px rgba(34,54,75,0.24));transition:transform .35s ease;}
.mixhome .prod:hover .prod-photo img {transform:translateY(-5px) scale(1.04);}
.mixhome .prod-tag {position:absolute;top:14px;left:14px;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--steel);background:rgba(255,255,255,0.7);border:1px solid var(--hairline);padding:5px 10px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.mixhome .prod-body {padding:18px 20px 22px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:4px;flex:1;}
.mixhome .prod-body h3 {font-size:17px;font-weight:700;}
.mixhome .prod-body .sku {font-size:12px;color:var(--steel);}
.mixhome .prod-foot {display:flex;align-items:center;justify-content:space-between;margin-top:14px;}
.mixhome .price {font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:21px;color:var(--navy);}
.mixhome .add {
    display:inline-flex;align-items:center;gap:7px;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:13.5px;
    background:var(--navy);color:#fff;border:none;cursor:pointer;
    padding:10px 15px;border-radius:999px;transition:background .2s ease,transform .2s ease;
  }
.mixhome .add:hover {background:#1b2c3e;transform:translateY(-2px);}
.mixhome .add svg {width:15px;height:15px;}

  /* ---------- Trust ---------- */
.mixhome .trust {
    background:
      radial-gradient(700px 400px at 85% 0%, rgba(64,176,208,0.18), transparent 60%),
      linear-gradient(160deg,var(--navy),#1a2c3e);
    border-radius:28px;padding:54px 0;color:#dfe7ee;
    box-shadow:var(--shadow-soft);
    position:relative;overflow:hidden;
  }
.mixhome .trust .wrap {position:relative;z-index:2;}
.mixhome .trust .sec-head h2 {color:#fff;}
.mixhome .trust .sec-head p {color:#aebfcf;}
.mixhome .trust .sec-head .eyebrow {color:var(--cyan);}
.mixhome .trust-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.mixhome .ti-card {
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.14);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-radius:var(--radius);padding:24px 22px;
    transition:transform .3s ease,background .3s ease;
  }
.mixhome .ti-card:hover {transform:translateY(-5px);background:rgba(255,255,255,0.1);}
.mixhome .ti-ic {width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(64,176,208,0.18);border:1px solid rgba(64,176,208,0.35);margin-bottom:16px;color:#bfe6f1;}
.mixhome .ti-ic svg {width:23px;height:23px;}
.mixhome .ti-card h3 {color:#fff;font-size:17px;font-weight:700;margin-bottom:7px;line-height:1.25;}
.mixhome .ti-card p {font-size:13.5px;color:#a9bccd;line-height:1.55;}

  /* ---------- FAQ ---------- */
.mixhome .faq-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.mixhome .faq {
    background:var(--glass);
    border:1px solid var(--hairline);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-radius:var(--radius);padding:26px 24px;
    box-shadow:var(--shadow-card);
    transition:transform .3s ease,border-color .3s ease;
  }
.mixhome .faq:hover {transform:translateY(-4px);border-color:rgba(64,176,208,0.4);}
.mixhome .faq .q {display:flex;align-items:center;gap:11px;margin-bottom:11px;}
.mixhome .faq .q .num {font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:14px;color:var(--cyan);background:var(--navy);width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;}
.mixhome .faq h3 {font-size:16.5px;font-weight:700;}
.mixhome .faq p {font-size:14.5px;color:#46596d;}
.mixhome .faq-foot {margin-top:30px;text-align:center;}

  /* ---------- RUO band ---------- */
.mixhome .ruo {
    background:var(--glass-strong);
    border:1px solid var(--hairline-strong);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-radius:var(--radius);padding:34px 38px;
    box-shadow:var(--shadow-card);
    display:flex;gap:22px;align-items:flex-start;
  }
.mixhome .ruo .badge {flex-shrink:0;width:56px;height:56px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(150deg,var(--navy),var(--steel));color:#bfe6f1;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);}
.mixhome .ruo .badge svg {width:28px;height:28px;}
.mixhome .ruo .t .eyebrow {margin-bottom:8px;}
.mixhome .ruo p {font-size:15.5px;color:#36495d;max-width:62em;}

  /* ---------- Closing CTA ---------- */
.mixhome .cta-band {
    position:relative;overflow:hidden;
    background:
      radial-gradient(620px 380px at 12% 110%, rgba(64,176,208,0.22), transparent 60%),
      linear-gradient(150deg,var(--navy),#1a2c3e);
    border-radius:30px;padding:62px 50px;color:#fff;
    box-shadow:var(--shadow-soft);
    display:grid;grid-template-columns:1.4fr 0.6fr;gap:34px;align-items:center;
  }
.mixhome .cta-band h2 {color:#fff;font-size:clamp(28px,3.6vw,42px);font-weight:800;margin-bottom:14px;}
.mixhome .cta-band p {color:#b3c4d4;font-size:17px;max-width:34em;}
.mixhome .cta-actions {display:flex;flex-direction:column;gap:13px;align-items:stretch;}
.mixhome .cta-actions .btn {justify-content:center;}
.mixhome .cta-band .btn-primary {background:#fff;color:var(--navy);}
.mixhome .cta-band .btn-primary:hover {background:#eef4f8;}
.mixhome .cta-band .btn-ghost {background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.3);color:#fff;}
.mixhome .cta-band .btn-ghost:hover {background:rgba(255,255,255,0.16);}
.mixhome .cta-vial {position:absolute;right:3%;bottom:-12%;width:230px;mix-blend-mode:screen;opacity:0.5;filter:drop-shadow(0 20px 40px rgba(0,0,0,0.4));}

  /* ---------- Footer ---------- */
.mixhome footer {padding:56px 0 40px;border-top:1px solid var(--hairline);margin-top:62px;}
.mixhome .foot-top {display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;margin-bottom:34px;}
.mixhome .foot-brand .wordmark {margin-bottom:14px;}
.mixhome .foot-brand p {font-size:14px;color:#46596d;max-width:26em;}
.mixhome .foot-col h4 {font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--steel);margin-bottom:14px;}
.mixhome .foot-col a {display:block;font-size:14.5px;color:#3a4d61;padding:5px 0;transition:color .2s ease;}
.mixhome .foot-col a:hover {color:var(--navy);}
.mixhome .foot-bottom {border-top:1px solid var(--hairline);padding-top:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.mixhome .foot-bottom p {font-size:13px;color:#5a6b7c;max-width:60em;}
.mixhome .foot-bottom .legal {display:flex;gap:18px;}
.mixhome .foot-bottom .legal a {font-size:13px;color:#5a6b7c;}
.mixhome .foot-bottom .legal a:hover {color:var(--navy);}

  /* ---------- Responsive ---------- */
  @media(max-width:1024px){
.mixhome .cat-grid, .mixhome .prod-grid, .mixhome .trust-grid {grid-template-columns:repeat(2,1fr);}
.mixhome .faq-grid {grid-template-columns:1fr;}
.mixhome .foot-top {grid-template-columns:1fr 1fr;}
  }
  @media(max-width:760px){
.mixhome .wrap {padding:0 20px;}
.mixhome nav ul {display:none;}
.mixhome .menu-toggle {display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--glass);border:1px solid var(--hairline-strong);color:var(--navy);}
.mixhome .menu-toggle svg {width:20px;height:20px;}
.mixhome .hero {padding:46px 0 40px;}
.mixhome .hero-grid {grid-template-columns:1fr;gap:30px;}
.mixhome .hero-visual {min-height:360px;order:-1;}
.mixhome .hero h1 {font-size:clamp(34px,9vw,46px);}
.mixhome .ticker-inner {grid-template-columns:1fr 1fr;}
.mixhome .ticker .ti:nth-child(2) {border-right:none;}
.mixhome .ticker .ti:nth-child(1), .mixhome .ticker .ti:nth-child(2) {border-bottom:1px solid var(--hairline);}
.mixhome .cat-grid, .mixhome .prod-grid, .mixhome .trust-grid {grid-template-columns:1fr;}
.mixhome section {padding:48px 0;}
.mixhome .ruo {flex-direction:column;gap:16px;padding:28px 24px;}
.mixhome .cta-band {grid-template-columns:1fr;padding:42px 28px;}
.mixhome .cta-vial {display:none;}
.mixhome .foot-top {grid-template-columns:1fr;gap:24px;}
.mixhome .foot-bottom {flex-direction:column;}
.mixhome .chip-1 {left:-1%;top:2%;}
.mixhome .chip-2 {right:-1%;bottom:4%;}
  }
  @media(max-width:400px){
.mixhome .float-chip {transform:scale(0.9);}
.mixhome .hero-meta {gap:18px;}
  }
/* ===== MIXED-IN: v3 swiss hero/header/ticker (namespaced) ===== */
.mixhome .mixhero {
    --navy:#22364B;
    --cyan:#40B0D0;
    --steel:#406090;
    --bluegray:#A0BBCE;
    --offwhite:#E6E8ED;
    --white:#FFFFFF;
    --ink:#1A2530;
    --rule:#D2D8E0;
    --rule-strong:#22364B;
    --display:'Plus Jakarta Sans',system-ui,sans-serif;
    --body:'Inter',system-ui,sans-serif;
    --gutter:clamp(20px,4vw,64px);
    --maxw:1380px;
  }

.mixhome .mixhero * {box-sizing:border-box;margin:0;padding:0}
.mixhome .mixhero {-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.mixhome .mixhero {
    font-family:var(--body);
    color:var(--ink);
    background:var(--white);
    line-height:1.5;
    font-size:16px;
  }
.mixhome .mixhero img {display:block;max-width:100%}
.mixhome .mixhero a {color:inherit;text-decoration:none}
.mixhome .mixhero button {font-family:inherit;cursor:pointer;border:0;background:none}

.mixhome .mixhero .wrap {max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

  /* 12-col grid */
.mixhome .mixhero .grid {display:grid;grid-template-columns:repeat(12,1fr);gap:24px}

  /* section label — numbered */
.mixhome .mixhero .sec-label {
    display:flex;align-items:baseline;gap:16px;
    font-family:var(--display);
    text-transform:uppercase;
    letter-spacing:.22em;
    font-size:11px;
    font-weight:700;
    color:var(--steel);
  }
.mixhome .mixhero .sec-label .num {
    font-variant-numeric:tabular-nums;
    color:var(--navy);
    font-size:11px;
    letter-spacing:.1em;
  }
.mixhome .mixhero .sec-label .line {flex:1;height:1px;background:var(--rule)}

  /* thin section rules */
.mixhome .mixhero .ruled {border-top:1px solid var(--rule-strong)}

  /* ============ HEADER ============ */
.mixhome .mixhero header.site {
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(8px);
    border-bottom:1px solid var(--rule-strong);
  }
.mixhome .mixhero .nav {
    display:flex;align-items:center;justify-content:space-between;
    height:68px;
  }
.mixhome .mixhero .wordmark {
    font-family:var(--display);
    font-weight:800;
    font-size:18px;
    letter-spacing:-.02em;
    color:var(--navy);
    display:flex;align-items:center;gap:10px;
  }
.mixhome .mixhero .wordmark .dot {width:9px;height:9px;background:var(--cyan);border-radius:0}
.mixhome .mixhero .nav-links {display:flex;gap:34px;align-items:center}
.mixhome .mixhero .nav-links a {
    font-family:var(--display);
    font-size:13px;font-weight:600;
    letter-spacing:.01em;
    color:var(--navy);
    position:relative;padding:4px 0;
  }
.mixhome .mixhero .nav-links a::after {
    content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--cyan);transition:width .2s ease;
  }
.mixhome .mixhero .nav-links a:hover::after {width:100%}
.mixhome .mixhero .nav-right {display:flex;align-items:center;gap:22px}
.mixhome .mixhero .cart {
    display:flex;align-items:center;gap:8px;
    font-family:var(--display);font-size:13px;font-weight:600;color:var(--navy);
  }
.mixhome .mixhero .cart .badge {
    background:var(--navy);color:#fff;font-size:11px;font-weight:700;
    min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px;
  }
.mixhome .mixhero .menu-btn {display:none}

  /* ============ HERO ============ */
.mixhome .mixhero .hero {padding-top:clamp(36px,6vw,84px);padding-bottom:0}
.mixhome .mixhero .hero .grid {align-items:end}
.mixhome .mixhero .hero-copy {grid-column:1 / 8}
.mixhome .mixhero .hero-eyebrow {
    font-family:var(--display);text-transform:uppercase;letter-spacing:.26em;
    font-size:11px;font-weight:700;color:var(--steel);margin-bottom:28px;
    display:flex;gap:14px;align-items:center;
  }
.mixhome .mixhero .hero-eyebrow .num {color:var(--navy)}
.mixhome .mixhero h1.hero-title {
    font-family:var(--display);
    font-weight:800;
    color:var(--navy);
    font-size:clamp(46px,8.2vw,96px);
    line-height:.96;
    letter-spacing:-.035em;
    margin-bottom:30px;
  }
.mixhome .mixhero h1.hero-title em {font-style:normal;color:var(--steel)}
.mixhome .mixhero .hero-sub {
    font-size:clamp(16px,1.35vw,19px);
    color:var(--ink);
    max-width:46ch;
    line-height:1.55;
    margin-bottom:38px;
  }
.mixhome .mixhero .cta-row {display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:48px}
.mixhome .mixhero .btn {
    font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.01em;
    padding:16px 28px;display:inline-flex;align-items:center;gap:10px;
    transition:transform .15s ease,background .15s ease,color .15s ease;
  }
.mixhome .mixhero .btn-primary {background:var(--navy);color:#fff;border-radius:0}
.mixhome .mixhero .btn-primary:hover {background:var(--ink)}
.mixhome .mixhero .btn-primary .arrow {color:var(--cyan)}
.mixhome .mixhero .btn-ghost {
    background:transparent;color:var(--navy);
    border:1px solid var(--rule-strong);border-radius:0;
  }
.mixhome .mixhero .btn-ghost:hover {background:var(--navy);color:#fff}

.mixhome .mixhero .hero-media {grid-column:8 / 13;position:relative}
.mixhome .mixhero .hero-panel {
    border-left:1px solid var(--rule-strong);
    border-top:1px solid var(--rule-strong);
    background:var(--offwhite);
    aspect-ratio:4/5;
    position:relative;overflow:hidden;
    display:grid;place-items:center;
  }
.mixhome .mixhero .hero-panel img {
    width:108%;
    
    filter:saturate(1.02);
  }
.mixhome .mixhero .hero-panel .tag {
    position:absolute;top:18px;left:18px;
    font-family:var(--display);font-size:11px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;color:var(--navy);
  }
.mixhome .mixhero .hero-panel .tag-r {
    position:absolute;bottom:18px;right:18px;
    font-family:var(--display);font-size:11px;font-weight:600;
    letter-spacing:.08em;color:var(--steel);font-variant-numeric:tabular-nums;
  }

  /* ============ TICKER BAND ============ */
.mixhome .mixhero .ticker {
    margin-top:clamp(40px,6vw,72px);
    border-top:1px solid var(--rule-strong);
    border-bottom:1px solid var(--rule-strong);
    background:var(--navy);
  }
.mixhome .mixhero .ticker .wrap {display:grid;grid-template-columns:repeat(4,1fr)}
.mixhome .mixhero .tick {
    padding:22px 26px;
    border-left:1px solid rgba(255,255,255,.14);
    display:flex;gap:14px;align-items:baseline;
  }
.mixhome .mixhero .tick:first-child {border-left:0;padding-left:0}
.mixhome .mixhero .tick .n {
    font-family:var(--display);font-size:11px;font-weight:700;
    color:var(--cyan);letter-spacing:.1em;font-variant-numeric:tabular-nums;
  }
.mixhome .mixhero .tick .t {
    font-family:var(--display);font-size:13.5px;font-weight:600;
    color:#fff;letter-spacing:.005em;line-height:1.35;
  }

  /* ============ shared section spacing ============ */
.mixhome .mixhero .section {padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(56px,7vw,104px)}
.mixhome .mixhero .section-head {margin-bottom:clamp(36px,4vw,56px)}
.mixhome .mixhero .section-head h2 {
    font-family:var(--display);font-weight:800;color:var(--navy);
    font-size:clamp(30px,4.4vw,56px);line-height:1.0;letter-spacing:-.03em;
    margin-top:22px;max-width:18ch;
  }

  /* ============ CATEGORIES ============ */
.mixhome .mixhero .cats {grid-template-columns:repeat(12,1fr)}
.mixhome .mixhero .cat {
    grid-column:span 3;
    border-top:1px solid var(--rule-strong);
    padding-top:18px;
    display:flex;flex-direction:column;
    transition:background .2s ease;
  }
.mixhome .mixhero .cat:hover {background:var(--offwhite)}
.mixhome .mixhero .cat-top {display:flex;justify-content:space-between;align-items:baseline;padding:0 4px}
.mixhome .mixhero .cat .idx {
    font-family:var(--display);font-size:11px;font-weight:700;color:var(--steel);
    letter-spacing:.12em;font-variant-numeric:tabular-nums;
  }
.mixhome .mixhero .cat .arrow {font-family:var(--display);font-size:16px;color:var(--navy);transition:transform .2s ease}
.mixhome .mixhero .cat:hover .arrow {transform:translate(3px,-3px)}
.mixhome .mixhero .cat-img {
    aspect-ratio:1/1;background:var(--offwhite);margin:14px 0 0;
    display:grid;place-items:center;overflow:hidden;
  }
.mixhome .mixhero .cat-img img {width:96%;}
.mixhome .mixhero .cat h3 {
    font-family:var(--display);font-weight:700;font-size:19px;color:var(--navy);
    letter-spacing:-.01em;padding:16px 4px 4px;
  }
.mixhome .mixhero .cat p {font-size:13px;color:var(--steel);padding:0 4px 18px;line-height:1.45}

  /* ============ FEATURED PRODUCTS ============ */
.mixhome .mixhero .prods {grid-template-columns:repeat(12,1fr)}
.mixhome .mixhero .prod {
    grid-column:span 3;
    border:1px solid var(--rule);
    display:flex;flex-direction:column;
    transition:border-color .2s ease;
  }
.mixhome .mixhero .prod:hover {border-color:var(--rule-strong)}
.mixhome .mixhero .prod-img {
    aspect-ratio:1/1;background:var(--offwhite);
    display:grid;place-items:center;overflow:hidden;
    border-bottom:1px solid var(--rule);
    position:relative;
  }
.mixhome .mixhero .prod-img img {width:90%;transition:transform .35s ease}
.mixhome .mixhero .prod:hover .prod-img img {transform:scale(1.04)}
.mixhome .mixhero .prod-img .ribbon {
    position:absolute;top:0;left:0;
    font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--navy);background:#fff;
    border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
    padding:7px 11px;
  }
.mixhome .mixhero .prod-body {padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.mixhome .mixhero .prod .kind {
    font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--steel);margin-bottom:10px;
  }
.mixhome .mixhero .prod h3 {
    font-family:var(--display);font-weight:700;font-size:18px;color:var(--navy);
    letter-spacing:-.01em;line-height:1.15;margin-bottom:4px;
  }
.mixhome .mixhero .prod .form {font-size:12.5px;color:var(--steel);margin-bottom:18px}
.mixhome .mixhero .prod-foot {display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:12px}
.mixhome .mixhero .prod .price {
    font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink);
    font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  }
.mixhome .mixhero .add {
    font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.02em;
    background:var(--navy);color:#fff;padding:11px 16px;border-radius:0;
    transition:background .15s ease;
  }
.mixhome .mixhero .add:hover {background:var(--ink)}

  /* ============ TRUST ============ */
.mixhome .mixhero .trust {background:var(--navy);color:#fff}
.mixhome .mixhero .trust .section-head h2 {color:#fff}
.mixhome .mixhero .trust .sec-label {color:var(--bluegray)}
.mixhome .mixhero .trust .sec-label .num {color:#fff}
.mixhome .mixhero .trust .sec-label .line {background:rgba(255,255,255,.22)}
.mixhome .mixhero .trust-grid {grid-template-columns:repeat(12,1fr)}
.mixhome .mixhero .trust-item {
    grid-column:span 3;
    border-top:1px solid rgba(255,255,255,.2);
    padding-top:22px;
  }
.mixhome .mixhero .trust-item .ti-num {
    font-family:var(--display);font-size:12px;font-weight:700;color:var(--cyan);
    letter-spacing:.1em;font-variant-numeric:tabular-nums;margin-bottom:46px;
  }
.mixhome .mixhero .trust-item h3 {
    font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em;
    color:#fff;margin-bottom:12px;line-height:1.2;
  }
.mixhome .mixhero .trust-item p {font-size:13.5px;color:var(--bluegray);line-height:1.55}

  /* ============ FAQ ============ */
.mixhome .mixhero .faq-grid {grid-template-columns:repeat(12,1fr);gap:0}
.mixhome .mixhero .faq-list {grid-column:5 / 13}
.mixhome .mixhero .faq-side {grid-column:1 / 5}
.mixhome .mixhero .faq-side p {font-size:14px;color:var(--steel);max-width:30ch;margin-top:18px;line-height:1.6}
.mixhome .mixhero .faq-side a.faq-link {
    display:inline-flex;gap:8px;align-items:center;margin-top:26px;
    font-family:var(--display);font-weight:700;font-size:13px;color:var(--navy);
    border-bottom:2px solid var(--cyan);padding-bottom:3px;
  }
.mixhome .mixhero .qa {border-top:1px solid var(--rule-strong);padding:26px 0}
.mixhome .mixhero .qa:last-child {border-bottom:1px solid var(--rule-strong)}
.mixhome .mixhero .qa-head {display:flex;gap:22px;align-items:baseline}
.mixhome .mixhero .qa .qn {
    font-family:var(--display);font-size:12px;font-weight:700;color:var(--steel);
    letter-spacing:.1em;font-variant-numeric:tabular-nums;flex:0 0 auto;width:36px;
  }
.mixhome .mixhero .qa h3 {
    font-family:var(--display);font-weight:700;font-size:clamp(19px,2vw,24px);
    color:var(--navy);letter-spacing:-.015em;line-height:1.2;
  }
.mixhome .mixhero .qa p {font-size:14.5px;color:var(--ink);line-height:1.6;margin-top:12px;margin-left:58px;max-width:62ch}

  /* ============ RUO BAND ============ */
.mixhome .mixhero .ruo {
    background:var(--offwhite);
    border-top:1px solid var(--rule-strong);
    border-bottom:1px solid var(--rule-strong);
  }
.mixhome .mixhero .ruo .wrap {padding-top:46px;padding-bottom:46px}
.mixhome .mixhero .ruo .grid {align-items:start}
.mixhome .mixhero .ruo .label {
    grid-column:1 / 4;
    font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;
    font-size:11px;font-weight:700;color:var(--steel);
  }
.mixhome .mixhero .ruo .text {
    grid-column:4 / 13;
    font-family:var(--display);font-weight:600;
    font-size:clamp(15px,1.7vw,21px);line-height:1.5;color:var(--navy);
    letter-spacing:-.005em;max-width:60ch;
  }

  /* ============ CLOSING CTA ============ */
.mixhome .mixhero .closing {background:var(--navy);color:#fff}
.mixhome .mixhero .closing .wrap {padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(64px,8vw,120px)}
.mixhome .mixhero .closing .sec-label {color:var(--bluegray)}
.mixhome .mixhero .closing .sec-label .num {color:#fff}
.mixhome .mixhero .closing .sec-label .line {background:rgba(255,255,255,.22)}
.mixhome .mixhero .closing h2 {
    font-family:var(--display);font-weight:800;color:#fff;
    font-size:clamp(36px,6.5vw,82px);line-height:.98;letter-spacing:-.035em;
    margin:28px 0 36px;max-width:16ch;
  }
.mixhome .mixhero .closing h2 em {font-style:normal;color:var(--bluegray)}
.mixhome .mixhero .btn-onnavy {background:#fff;color:var(--navy)}
.mixhome .mixhero .btn-onnavy:hover {background:var(--offwhite)}
.mixhome .mixhero .btn-onnavy .arrow {color:var(--cyan)}
.mixhome .mixhero .btn-ghost-light {background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.mixhome .mixhero .btn-ghost-light:hover {background:#fff;color:var(--navy)}

  /* ============ FOOTER ============ */
.mixhome .mixhero footer.site {background:var(--ink);color:#fff;padding:clamp(48px,6vw,80px) 0 36px}
.mixhome .mixhero .foot-grid {grid-template-columns:repeat(12,1fr);gap:24px;margin-bottom:54px}
.mixhome .mixhero .foot-brand {grid-column:1 / 5}
.mixhome .mixhero .foot-brand .wordmark {color:#fff;margin-bottom:16px}
.mixhome .mixhero .foot-brand .wordmark .dot {background:var(--cyan)}
.mixhome .mixhero .foot-brand p {font-size:13px;color:var(--bluegray);max-width:34ch;line-height:1.6}
.mixhome .mixhero .foot-col {grid-column:span 2}
.mixhome .mixhero .foot-col h4 {
    font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;
    font-size:11px;font-weight:700;color:var(--bluegray);margin-bottom:18px;
  }
.mixhome .mixhero .foot-col a {display:block;font-size:13.5px;color:#E6E8ED;padding:6px 0;transition:color .15s ease}
.mixhome .mixhero .foot-col a:hover {color:var(--cyan)}
.mixhome .mixhero .foot-bottom {
    border-top:1px solid rgba(255,255,255,.14);
    padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  }
.mixhome .mixhero .foot-bottom p {font-size:12px;color:var(--bluegray);line-height:1.6;max-width:70ch}
.mixhome .mixhero .foot-bottom .meta {font-size:11px;color:var(--steel);letter-spacing:.04em;white-space:nowrap}

  /* ============ RESPONSIVE ============ */
  @media (max-width:1024px){
.mixhome .mixhero .hero-copy {grid-column:1 / 7}
.mixhome .mixhero .hero-media {grid-column:7 / 13}
.mixhome .mixhero .cat {grid-column:span 6}
.mixhome .mixhero .prod {grid-column:span 6}
.mixhome .mixhero .trust-item {grid-column:span 6}
.mixhome .mixhero .trust-item .ti-num {margin-bottom:20px}
  }
  @media (max-width:680px){
.mixhome .mixhero .nav-links {display:none}
.mixhome .mixhero .menu-btn {
      display:grid;place-items:center;width:40px;height:40px;
      border:1px solid var(--rule-strong);
    }
.mixhome .mixhero .menu-btn span {display:block;width:18px;height:2px;background:var(--navy);position:relative}
.mixhome .mixhero .menu-btn span::before, .mixhome .mixhero .menu-btn span::after {content:"";position:absolute;left:0;width:18px;height:2px;background:var(--navy)}
.mixhome .mixhero .menu-btn span::before {top:-5px}.menu-btn span::after{top:5px}
.mixhome .mixhero .cart span.lbl {display:none}

.mixhome .mixhero .grid {gap:0}
.mixhome .mixhero .hero .grid {display:block}
.mixhome .mixhero .hero-copy {margin-bottom:40px}
.mixhome .mixhero h1.hero-title {font-size:clamp(40px,12vw,58px)}
.mixhome .mixhero .cta-row {gap:12px}
.mixhome .mixhero .btn {width:100%;justify-content:space-between}
.mixhome .mixhero .hero-media {margin:0 calc(-1*var(--gutter))}
.mixhome .mixhero .hero-panel {aspect-ratio:1/1;border-right:1px solid var(--rule-strong)}

.mixhome .mixhero .ticker .wrap {grid-template-columns:1fr}
.mixhome .mixhero .tick {border-left:0;border-top:1px solid rgba(255,255,255,.14);padding:16px 0}
.mixhome .mixhero .tick:first-child {border-top:0}

.mixhome .mixhero .cats, .mixhome .mixhero .prods, .mixhome .mixhero .trust-grid, .mixhome .mixhero .foot-grid {display:block}
.mixhome .mixhero .cat, .mixhome .mixhero .prod, .mixhome .mixhero .trust-item {width:100%;margin-bottom:18px}
.mixhome .mixhero .prod {margin-bottom:14px}
.mixhome .mixhero .trust-item {padding-top:18px}
.mixhome .mixhero .trust-item .ti-num {margin-bottom:16px}

.mixhome .mixhero .faq-grid {display:block}
.mixhome .mixhero .faq-side, .mixhome .mixhero .faq-list {width:100%}
.mixhome .mixhero .faq-side {margin-bottom:34px}
.mixhome .mixhero .qa p {margin-left:0;margin-top:14px}
.mixhome .mixhero .qa-head {gap:14px}

.mixhome .mixhero .ruo .grid {display:block}
.mixhome .mixhero .ruo .label {margin-bottom:16px}

.mixhome .mixhero .foot-brand {margin-bottom:36px}
.mixhome .mixhero .foot-col {display:inline-block;width:48%;vertical-align:top;margin-bottom:24px}
.mixhome .mixhero .foot-bottom {flex-direction:column}
  }
  @media (min-width:681px) and (max-width:1024px){
.mixhome .mixhero .grid {gap:20px}
.mixhome .mixhero .foot-brand {grid-column:1 / 7}
.mixhome .mixhero .foot-col {grid-column:span 3}
  }
.mixhome .mixhero { display:block; }

/* ---- WP integration: full-bleed sections inside the theme container ---- */
/* NO overflow rule on body/html/.mixhome for the 100vw breakout: clip amputates the page (axis-coupling forces overflow-y:clip); hidden turns body into its own scroll container and strands the footer. Overlay scrollbars make 100vw == clientWidth anyway; if a platform shows a horizontal scrollbar, fix by widening section padding, never with overflow. */
.mixhome > section, .mixhome > .mixhero, .mixhome > div.band { width: 100vw; margin-left: calc(50% - 50vw); }
.mixhome .mixhero > section { width: 100vw; margin-left: calc(50% - 50vw); }

/* ---- Brand mark wiring (custom_logo id set via wp theme mod) ---- */
[data-id="logo"] { display: flex !important; flex-direction: row !important; align-items: center; gap: 13px; }
[data-id="logo"] .site-logo-container img { max-height: 54px; width: auto; display: block; }
[data-id="logo"] .site-title { font-family: var(--bpc-font-display) !important; font-weight: 800; font-size: 26px; letter-spacing: -.01em; }
/* age gate: mark above the heading */
.age-gate__heading-title::before {
  content: "";
  display: block;
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  background: url('/wp-content/uploads/2026/06/logo-mark.svg') no-repeat center / contain;
}
/* footer mark (img injected by the copyright filter) */
.csf-footer-logo { height: 44px; width: auto; display: block; margin: 0 auto 12px; }

/* ---- Premium site-wide footer (rendered via the copyright element) ---- */
[data-id="copyright"] { padding: 0 !important; }
.ct-footer .ct-container { max-width: none !important; padding: 0 !important; }
.csf-bigfoot {
  width: 100vw; margin-left: calc(50% - 50vw);
  background: linear-gradient(150deg, #22364B 0%, #1a2a3c 100%);
  color: #E6E8ED;
  text-align: left;
}
.csf-bigfoot__wrap {
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  padding: 56px 24px 40px;
}
.csf-bigfoot__brand .csf-footer-logo { height: 44px; width: auto; display: block; margin: 0 0 10px; }
.csf-bigfoot__name { font-family: var(--bpc-font-display); font-weight: 800; font-size: 20px; color: #fff; display: block; margin-bottom: 8px; }
.csf-bigfoot__brand p { font-size: 13.5px; line-height: 1.6; color: #A0BBCE; max-width: 30ch; margin: 0; }
.csf-bigfoot__col h4 { font-family: var(--bpc-font-display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #40B0D0; margin: 0 0 12px; }
.csf-bigfoot__col a { display: block; color: #E6E8ED !important; font-size: 14px; line-height: 2; text-decoration: none; }
.csf-bigfoot__col a:hover { color: #40B0D0 !important; }
.csf-bigfoot__bar { border-top: 1px solid rgba(160,187,206,.25); padding: 18px 24px; font-size: 12.5px; color: #A0BBCE; text-align: center; }
@media (max-width: 880px) { .csf-bigfoot__wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .csf-bigfoot__wrap { grid-template-columns: 1fr; gap: 28px; } }


/* ================= Shop / archive / single-product premium pass (puratek-parity) ================= */

/* Archive title band */
.post-type-archive-product .entry-header, .tax-product_cat .entry-header {
  width: 100vw; margin-left: calc(50% - 50vw);
  background: linear-gradient(150deg, var(--bpc-primary) 0%, #1a2a3c 100%);
  padding: 78px 24px 66px; margin-bottom: 36px; text-align: center;
  position: relative; overflow: hidden;
}
.post-type-archive-product .entry-header::before, .tax-product_cat .entry-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(820px 360px at 78% 120%, rgba(64,176,208,.28), transparent 70%);
}
.post-type-archive-product .entry-header::after, .tax-product_cat .entry-header::after {
  content: ""; position: absolute; pointer-events: none;
  right: -90px; top: 50%; transform: translateY(-50%) rotate(12deg);
  width: 300px; height: 300px; opacity: .10;
  background: url('/wp-content/uploads/2026/06/logo-mark.svg') no-repeat center / contain;
}
.post-type-archive-product .entry-header > *, .tax-product_cat .entry-header > * { position: relative; z-index: 1; }
.post-type-archive-product .entry-header .page-title, .tax-product_cat .entry-header .page-title {
  color: #fff !important; font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; letter-spacing: -.01em; margin: 0;
}
.post-type-archive-product .ct-container-full, .tax-product_cat .ct-container-full { padding-top: 0 !important; }

/* Archive product cards */
.woocommerce-page ul.products li.product, .post-type-archive-product ul.products li.product, .tax-product_cat ul.products li.product {
  border: 1px solid var(--bpc-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  padding-bottom: 16px !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.woocommerce-page ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16,28,42,.14); }
ul.products li.product .woocommerce-loop-product__title { font-family: var(--bpc-font-display) !important; font-weight: 700; font-size: 16.5px; }
ul.products li.product .price { color: var(--bpc-primary) !important; font-weight: 800; font-size: 17px; }
ul.products li.product .button { border-radius: 999px !important; font-weight: 700; }

/* Sidebar widget panels */
[data-id="sidebar"] .ct-widget, .ct-sidebar .ct-widget {
  background: #fff; border: 1px solid var(--bpc-border); border-radius: 14px; padding: 20px 22px; margin-bottom: 18px;
}
.ct-sidebar .widget-title {
  font-family: var(--bpc-font-display) !important; font-size: 12px !important; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bpc-primary-hover) !important; margin-bottom: 14px;
}
.ct-sidebar .product-categories a { color: var(--bpc-foreground) !important; font-size: 14.5px; line-height: 2; text-decoration: none; }
.ct-sidebar .product-categories a:hover { color: var(--bpc-primary) !important; }
.ct-sidebar .product-categories .count { color: var(--bpc-primary-hover); font-size: 12px; }
.ct-sidebar .price_slider .ui-slider-range, .price_slider .ui-slider-handle { background-color: var(--bpc-primary) !important; }
.ct-sidebar .price_slider_amount .button { background: var(--bpc-primary) !important; color: #fff !important; border-radius: 999px !important; }

/* Single product premium */
.single-product div.product div.images { 
  border: 1px solid var(--bpc-border); border-radius: 16px; overflow: hidden; background: var(--bpc-border);
}
.single-product div.product .product_title { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.01em; }
.single-product div.product p.price { font-size: 26px; font-weight: 800; color: var(--bpc-primary) !important; }
.single-product .csf-ruo {
  display: inline-block; border: 1px solid var(--bpc-border); border-left: 4px solid var(--bpc-primary-hover);
  border-radius: 10px; padding: 10px 16px; font-size: 13.5px; color: var(--bpc-foreground); background: #fff;
}
.single-product form.cart .button { padding: 14px 36px !important; border-radius: 999px !important; font-weight: 700; font-size: 15px; }
.single-product form.cart .quantity .qty { border: 1px solid var(--bpc-border); border-radius: 10px; padding: 10px; }
.single-product .product_meta { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--bpc-primary-hover); }
.single-product .product_meta a { color: var(--bpc-primary) !important; }
.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--bpc-primary) !important; border-bottom: 2px solid var(--bpc-primary); }


/* ---- Duo feature band (affiliate + bulk) ---- */
.mixhome .duo-band { width: 100vw; margin-left: calc(50% - 50vw); padding: 26px 24px 64px; background: #fff; }
.mixhome .duo-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mixhome .duo-card {
  background: linear-gradient(150deg, #22364B 0%, #1a2a3c 100%);
  border-radius: 18px; padding: 40px 38px; color: #E6E8ED;
}
.mixhome .duo-card h3 { font-family: var(--bpc-font-display, "Plus Jakarta Sans") !important; font-size: 25px; font-weight: 800; color: #fff !important; margin: 0 0 10px; letter-spacing: -.01em; }
.mixhome .duo-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #40B0D0; margin: 0 0 12px; }
.mixhome .duo-sub { font-size: 15px; line-height: 1.6; color: #A0BBCE; margin: 0 0 24px; max-width: 44ch; }
.mixhome .duo-card .btn-primary { background: #fff !important; color: #22364B !important; border-color: #fff !important; }
.mixhome .duo-card .btn-primary:hover { background: #E6E8ED !important; border-color: #E6E8ED !important; }
.mixhome .duo-card--light { background: var(--bpc-card, #E6E8ED); color: #1A2530; }
.mixhome .duo-card--light h3 { color: #22364B !important; }
.mixhome .duo-card--light .duo-eyebrow { color: #406090; }
.mixhome .duo-card--light .duo-sub { color: #406090; }
@media (max-width: 880px) { .mixhome .duo-grid { grid-template-columns: 1fr; } }


/* archive band: defeat ct-container-narrow max-width cap */
.post-type-archive-product .entry-header, .tax-product_cat .entry-header { max-width: none !important; }


/* ---- WSR-pattern: top strip, ATC consent, strength pills ---- */
.csf-topstrip {
  background: #1a2a3c; color: #A0BBCE; font-size: 12px; letter-spacing: .04em;
  display: flex; justify-content: space-between; gap: 16px; padding: 8px 24px;
}
.csf-topstrip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .csf-topstrip__right { display: none; } .csf-topstrip { justify-content: center; } }

.csf-strengths { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; flex-wrap: wrap; }
.csf-strengths__label { font-family: var(--bpc-font-display); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bpc-primary-hover); margin-right: 4px; }
.csf-strength {
  display: inline-block; padding: 7px 16px; border: 2px solid var(--bpc-border); border-radius: 999px;
  font-family: var(--bpc-font-display); font-size: 13.5px; font-weight: 700; color: var(--bpc-primary) !important;
  text-decoration: none !important; transition: border-color .15s, background .15s;
}
.csf-strength:hover { border-color: var(--bpc-primary-hover); }
.csf-strength.is-active { background: var(--bpc-primary); border-color: var(--bpc-primary); color: #fff !important; pointer-events: none; }

.csf-atc-consent {
  display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 14px; padding: 14px 16px;
  border: 1px solid var(--bpc-border); border-radius: 12px; background: #fff;
  font-size: 14px; line-height: 1.5; color: var(--bpc-foreground); cursor: pointer; max-width: 480px;
}
.csf-atc-consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--bpc-primary); flex: none; }
.single_add_to_cart_button.csf-atc-locked { opacity: .45; cursor: not-allowed !important; }
.button.csf-view-product { border-radius: 999px !important; font-weight: 700; }

/* ==================================================================
   HERO v8c — "Blue-gray blend" (Austin's fleet pick, 2026-06-10)
   The hero field IS the photo backdrop tone; vials melt in edge-free.
   Scoped under .mb8c; remove this block to roll back.
   ================================================================== */
body.home .ct-container-full { padding-top: 0 !important; padding-bottom: 0 !important; }
body.home .mixhome .mb8c { width: 100vw; margin-left: calc(50% - 50vw); }

.mb8c {
  position: relative;
  overflow: hidden;
  min-height: max(620px, calc(100vh - 158px));
  display: flex; flex-direction: column;
  font-family: var(--bpc-font-sans, 'Inter', sans-serif);
  background:
    radial-gradient(120% 90% at 14% 0%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 52%),
    linear-gradient(135deg, #CDD9E5 0%, #C7D6E2 24%, #B6C9DA 56%, #A8C0D3 78%, #A0BBCE 100%);
}
.mb8c::after {
  content: ""; position: absolute; right: -12%; bottom: -16%;
  width: 68%; height: 92%;
  background: radial-gradient(closest-side, #A0BBCE 30%, rgba(160,187,206,0) 86%);
  pointer-events: none; z-index: 0;
}
.mb8c .field-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.mb8c .mol { position: absolute; }
.mb8c .mol-tl   { top: -72px;   left: -86px;  width: 430px; opacity: .42; transform: rotate(-9deg); }
.mb8c .mol-bl   { bottom: -110px; left: 4%;   width: 360px; opacity: .32; transform: rotate(141deg); }
.mb8c .mol-br   { bottom: -64px; right: -90px; width: 500px; opacity: .36; transform: rotate(196deg); }
.mb8c .mol-grad { top: -56px;   right: -64px; width: 350px; opacity: .5;  transform: rotate(14deg); }

.hero8c {
  position: relative; z-index: 2; flex: 1;
  width: min(1280px, 100%); margin: 0 auto;
  padding: 72px 48px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center; column-gap: 36px;
}
.copy8c { max-width: 600px; position: relative; }

.eyebrow8c {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-radius: 999px;
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 6px 18px rgba(34,54,75,.07);
  font-size: 11.5px; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: #22364B; margin-bottom: 30px;
}
.eyebrow8c .dot8c { width: 7px; height: 7px; border-radius: 50%; background: #40B0D0; box-shadow: 0 0 0 3px rgba(64,176,208,.22); }

.mb8c .title8c {
  font-family: var(--bpc-font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800; font-size: clamp(44px, 6.6vw, 84px);
  line-height: 1.04; letter-spacing: -0.022em; color: #22364B;
  text-wrap: balance; margin: 0;
}
.mb8c .title8c .tone8c { color: #406090; }

.sub8c { margin-top: 26px; font-size: 17.5px; line-height: 1.65; font-weight: 400; color: rgba(26,37,48,.78); max-width: 46ch; }

.cta8c { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
.btn8c {
  font-family: var(--bpc-font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700; font-size: 15.5px; text-decoration: none;
  border-radius: 999px; padding: 17px 34px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1), background .3s cubic-bezier(.22,.61,.36,1), border-color .3s cubic-bezier(.22,.61,.36,1);
}
.btn8c-primary { background: #fff; color: #22364B !important; box-shadow: 0 12px 32px rgba(34,54,75,.18), inset 0 1px 0 rgba(255,255,255,1); }
.btn8c-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(34,54,75,.24), inset 0 1px 0 rgba(255,255,255,1); }
.btn8c-primary svg { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.btn8c-primary:hover svg { transform: translateX(3px); }
.btn8c-ghost { color: #22364B !important; border: 1.5px solid rgba(34,54,75,.32); background: rgba(255,255,255,.12); }
.btn8c-ghost:hover { border-color: rgba(34,54,75,.62); background: rgba(255,255,255,.4); transform: translateY(-2px); }

.trust8c { margin-top: 46px; padding-top: 24px; border-top: 1px solid rgba(34,54,75,.16); display: flex; flex-wrap: wrap; gap: 14px 30px; }
.trust8c-item { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: rgba(34,54,75,.8); white-space: nowrap; }
.trust8c-item svg { flex: none; opacity: .85; }

.stage8c { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1 / 1.04; margin-left: auto; }
.stage8c-hex { position: absolute; inset: -9% -7%; width: 114%; height: 112%; opacity: .38; z-index: 0; pointer-events: none; }
.floor8c { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(34,54,75,.22), rgba(34,54,75,0) 72%); filter: blur(10px); pointer-events: none; }
.floor8c-front { left: 12%; bottom: 1.5%; width: 74%; height: 7%; z-index: 1; }
.floor8c-back  { left: 16%; bottom: 21%; width: 64%; height: 5.5%; opacity: .55; z-index: 1; }
.vial8c {
  position: absolute; display: block; height: auto;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 50%, rgba(0,0,0,.88) 64%, transparent 90%);
  mask-image: radial-gradient(ellipse at center, #000 50%, rgba(0,0,0,.88) 64%, transparent 90%);
  user-select: none; -webkit-user-drag: none;
}
.vial8c-nad  { width: 46%; left: -1%; bottom: 21%;   z-index: 2; }
.vial8c-sema { width: 44%; left: 57%; bottom: 19.5%; z-index: 2; }
.vial8c-tirz { width: 54%; left: 7%;  bottom: 7%;    z-index: 3; }
.vial8c-reta { width: 66%; left: 22%; bottom: 0;     z-index: 4; }

.ruo8c { position: relative; z-index: 2; text-align: center; font-size: 12px; letter-spacing: .04em; color: rgba(34,54,75,.58); padding: 18px 24px 22px; margin: 0; }

/* (home header hidden — the v8c floating glass nav pill is the nav on home) */

/* entrance: settle into stillness */
@keyframes rise8c { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drift8c { from { opacity: 0; transform: translateY(34px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes veil8c { from { opacity: 0; } }
.rise8c { animation: rise8c .9s cubic-bezier(.22,.61,.36,1) both; }
.mb8c .d1 { animation-delay: .08s; } .mb8c .d2 { animation-delay: .18s; }
.mb8c .d3 { animation-delay: .28s; } .mb8c .d4 { animation-delay: .4s; } .mb8c .d5 { animation-delay: .52s; }
.vial8c, .floor8c { animation: drift8c 1.15s cubic-bezier(.22,.61,.36,1) both; }
.vial8c-nad { animation-delay: .42s; } .vial8c-sema { animation-delay: .5s; }
.vial8c-tirz { animation-delay: .32s; } .vial8c-reta { animation-delay: .22s; }
.floor8c-front { animation-delay: .26s; } .floor8c-back { animation-delay: .46s; }
.mb8c .field-art .mol, .stage8c-hex { animation: veil8c 1.6s cubic-bezier(.22,.61,.36,1) both; animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .rise8c, .vial8c, .floor8c, .mb8c .field-art .mol, .stage8c-hex { animation: none !important; }
}

@media (max-width: 1080px) { .hero8c { column-gap: 20px; padding-left: 36px; padding-right: 36px; } }
@media (max-width: 880px) {
  .hero8c { grid-template-columns: 1fr; padding: 48px 24px 0; row-gap: 14px; }
  .copy8c { max-width: 100%; }
  .eyebrow8c { margin-bottom: 22px; }
  .sub8c { font-size: 16px; }
  .cta8c { margin-top: 30px; }
  .btn8c { padding: 15px 28px; font-size: 14.5px; }
  .trust8c { margin-top: 34px; gap: 10px 22px; }
  .trust8c-item { font-size: 12.5px; white-space: normal; }
  .stage8c { max-width: 480px; margin: 8px auto 0; aspect-ratio: 1 / 1; }
  .mb8c .mol-tl { width: 300px; top: -60px; left: -90px; opacity: .34; }
  .mb8c .mol-grad { width: 240px; top: -40px; right: -70px; opacity: .42; }
  .mb8c .mol-br { width: 340px; bottom: -50px; right: -110px; }
  .mb8c .mol-bl { display: none; }
  .ruo8c { font-size: 11px; padding-bottom: 18px; }
}

/* ==== v8c port fidelity: the floating glass nav pill IS the nav on home ==== */
body.home #header.ct-header { display: none; }
.mb8c { min-height: max(660px, calc(100vh - 38px)); }
.hero8c { padding-top: 150px; }
.nav8c {
  position: absolute; top: 26px; left: 20px; right: 20px; margin-inline: auto;
  width: min(1180px, calc(100% - 40px));
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px 14px 12px 24px; border-radius: 999px;
  background: rgba(255,255,255,.58);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 14px 38px rgba(34,54,75,.10), inset 0 1px 0 rgba(255,255,255,.9);
  z-index: 50; animation: rise8c .8s cubic-bezier(.22,.61,.36,1) both;
}
.nav8c-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav8c-brand img { width: 38px; height: 38px; display: block; }
.nav8c-wordmark { font-family: var(--bpc-font-display, 'Plus Jakarta Sans', sans-serif); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: #22364B; line-height: 1; display: block; }
.nav8c-tagline { display: block; font-weight: 600; font-size: 8.5px; letter-spacing: .22em; color: #406090; margin-top: 4px; text-transform: uppercase; }
.nav8c-links { display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; }
.nav8c-links a { font-size: 14.5px; font-weight: 500; color: #22364B !important; text-decoration: none; transition: color .25s cubic-bezier(.22,.61,.36,1); }
.nav8c-links a:hover { color: #406090 !important; }
.nav8c-cta {
  font-family: var(--bpc-font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700; font-size: 14px; color: #fff !important; background: #22364B;
  text-decoration: none; padding: 12px 26px; border-radius: 999px; white-space: nowrap;
  transition: background .25s cubic-bezier(.22,.61,.36,1), transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 6px 18px rgba(34,54,75,.22);
}
.nav8c-cta:hover { background: #406090; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(34,54,75,.26); }
@media (max-width: 1080px) { .nav8c-links { gap: 24px; } }
@media (max-width: 880px) {
  .nav8c { top: 14px; padding: 10px 10px 10px 18px; }
  .nav8c-links { display: none; }
  .nav8c-brand img { width: 34px; height: 34px; }
  .nav8c-cta { padding: 11px 20px; font-size: 13px; }
  .hero8c { padding-top: 110px; }
  .mb8c { min-height: 0; }
}

/* ==================================================================
   V8C SYSTEM PASS — extend the winner's language down the whole page
   (glass pills, blue-gray photo wells, navy bands, pill buttons,
    Plus Jakarta 800 headlines). Scoped .mixhome overrides; 2026-06-10.
   ================================================================== */

/* --- section rhythm + headline register --- */
.mixhome section { padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(72px, 8vw, 120px); }
.mixhome .sec-head h2 {
  font-family: var(--bpc-font-display, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 800 !important; letter-spacing: -0.022em !important;
  font-size: clamp(30px, 3.6vw, 46px) !important; color: #22364B !important;
  text-wrap: balance;
}
.mixhome .sec-head > p:last-child { font-size: 16.5px; color: rgba(26,37,48,.7); }

/* eyebrows everywhere become the hero's glass pill */
.mixhome .eyebrow, .mixhome .duo-eyebrow {
  display: inline-flex !important; align-items: center; gap: 9px;
  padding: 8px 16px !important; border-radius: 999px !important;
  background: rgba(160,187,206,.18) !important;
  border: 1px solid rgba(160,187,206,.45) !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .15em !important; text-transform: uppercase !important;
  color: #406090 !important;
}
.mixhome .eyebrow::before, .mixhome .duo-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #40B0D0; box-shadow: 0 0 0 3px rgba(64,176,208,.2);
}

/* --- category + product cards: blue-gray photo wells, photos melt in --- */
.mixhome .cat, .mixhome .prod {
  border-radius: 20px !important; overflow: hidden;
  border: 1px solid rgba(160,187,206,.4) !important;
  background: #fff !important;
  box-shadow: 0 6px 22px rgba(34,54,75,.06) !important;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1) !important;
}
.mixhome .cat:hover, .mixhome .prod:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(34,54,75,.14) !important;
}
.mixhome .cat-photo, .mixhome .prod-photo {
  /* EXACT match of the photos' studio backdrop: VERTICAL dark-top -> light-bottom,
     sampled from the renders (top rgb(157,184,204), bottom rgb(179,197,210)).
     The old 150deg light->dark approximation was inverted — that was the visible square. */
  background: linear-gradient(180deg, #9DB8CC 0%, #B3C5D2 100%) !important;
  position: relative;
}
.mixhome .cat-photo img, .mixhome .prod-photo img {
  /* tint/mask/multiply hacks RETIRED (Austin 2026-06-11): full-opacity product on exact-tone well */
}
.mixhome .cat-body h3, .mixhome .prod-body h3 {
  font-family: var(--bpc-font-display, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 700 !important; letter-spacing: -0.01em; color: #22364B !important;
}
.mixhome .prod .price { font-family: var(--bpc-font-display, 'Plus Jakarta Sans', sans-serif); font-weight: 800; color: #22364B !important; font-size: 19px !important; }
.mixhome .prod .add, .mixhome .cat-link {
  border-radius: 999px !important; font-weight: 700 !important;
  transition: background .25s cubic-bezier(.22,.61,.36,1), color .25s cubic-bezier(.22,.61,.36,1), transform .25s cubic-bezier(.22,.61,.36,1) !important;
}
.mixhome .prod .add { background: #22364B !important; color: #fff !important; padding: 10px 20px !important; }
.mixhome .prod .add:hover { background: #406090 !important; transform: translateY(-1px); }

/* --- trust band: deep navy + glass tiles (v8e energy, brand motif) --- */
.mixhome .trust { background: linear-gradient(160deg, #22364B 0%, #1a2a3c 100%) !important; border-radius: 28px !important; position: relative; overflow: hidden; }
.mixhome .trust::after {
  content: ""; position: absolute; right: -70px; top: -70px; width: 340px; height: 300px;
  background: url('http://client-merit-bio.local/wp-content/uploads/2026/06/logo-mark.svg') no-repeat center / contain;
  opacity: .07; transform: rotate(12deg); pointer-events: none;
}
.mixhome .trust .sec-head h2 { color: #fff !important; }
.mixhome .trust .sec-head > p:last-child { color: #A0BBCE; }
.mixhome .trust .eyebrow { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.16) !important; color: #7fd4ec !important; }
.mixhome .ti-card {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition: background .3s cubic-bezier(.22,.61,.36,1), transform .3s cubic-bezier(.22,.61,.36,1) !important;
}
.mixhome .ti-card:hover { background: rgba(255,255,255,.09) !important; transform: translateY(-4px); }
.mixhome .ti-card h3 { color: #fff !important; font-family: var(--bpc-font-display,'Plus Jakarta Sans',sans-serif) !important; }
.mixhome .ti-card p { color: #A0BBCE !important; }
.mixhome .ti-ic { color: #7fd4ec !important; }

/* --- duo band: glass on field --- */
.mixhome .duo-card { border-radius: 22px !important; box-shadow: 0 14px 38px rgba(34,54,75,.10) !important; }

/* --- FAQ cards --- */
.mixhome .faq {
  background: #fff; border: 1px solid rgba(160,187,206,.4); border-radius: 18px;
  padding: 26px 28px !important; box-shadow: 0 6px 22px rgba(34,54,75,.05);
}
.mixhome .faq .q h3 { font-family: var(--bpc-font-display,'Plus Jakarta Sans',sans-serif) !important; color: #22364B !important; }

/* --- RUO band: quiet glass --- */
.mixhome .ruo {
  background: rgba(160,187,206,.14) !important;
  border: 1px solid rgba(160,187,206,.4) !important;
  border-radius: 20px !important;
}

/* --- closing CTA: the field returns (bookends the hero) --- */
.mixhome .cta-band {
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(135deg, #B6C9DA 0%, #A0BBCE 100%) !important;
  border-radius: 28px !important; position: relative; overflow: hidden;
}
.mixhome .cta-band h2 { font-family: var(--bpc-font-display,'Plus Jakarta Sans',sans-serif) !important; font-weight: 800 !important; letter-spacing: -0.02em; color: #22364B !important; }
.mixhome .cta-band p { color: rgba(26,37,48,.75) !important; }
.mixhome .cta-band .btn-primary { background: #fff !important; color: #22364B !important; border-radius: 999px !important; box-shadow: 0 12px 32px rgba(34,54,75,.18) !important; font-weight: 700 !important; }
.mixhome .cta-band .btn-ghost { color: #22364B !important; border: 1.5px solid rgba(34,54,75,.32) !important; border-radius: 999px !important; }

/* all mixhome buttons go pill */
.mixhome .btn { border-radius: 999px !important; font-family: var(--bpc-font-display,'Plus Jakarta Sans',sans-serif) !important; font-weight: 700 !important; }

/* hero stage: sharpen — lead vial dominates, supports recede cleanly */
.vial8c-nad, .vial8c-sema { opacity: .8; }
.vial8c-reta { filter: drop-shadow(0 18px 30px rgba(34,54,75,.18)); }

/* ==== ART PASS v9.1: generated wave-mesh on the navy trust band (kept from v9) ==== */
.mixhome .trust {
  background:
    linear-gradient(160deg, rgba(34,54,75,.86) 0%, rgba(22,36,58,.92) 100%),
    url('http://client-merit-bio.local/wp-content/uploads/2026/06/band-wave-mesh.jpg') center 70% / cover no-repeat,
    #16243a !important;
}

/* ==== ART PASS v9.2: generated light glass-molecule field behind the v8c hero ==== */
.mb8c {
  background:
    linear-gradient(100deg, rgba(248,251,253,.95) 0%, rgba(241,247,251,.78) 28%, rgba(232,242,248,.30) 55%, rgba(232,242,248,0) 72%),
    url('http://client-merit-bio.local/wp-content/uploads/2026/06/hero-light-glass.jpg') right center / cover no-repeat,
    linear-gradient(135deg, #CDD9E5 0%, #C7D6E2 40%, #A8C0D3 100%);
}
/* layered detail: line-art whispers over the art, gradient signature stays */
.mb8c .mol { opacity: .22 !important; }
.mb8c .mol-grad { opacity: .4 !important; }
@media (max-width: 880px) {
  .mb8c {
    background:
      linear-gradient(180deg, rgba(248,251,253,.92) 0%, rgba(241,247,251,.78) 38%, rgba(236,244,250,.42) 62%, rgba(236,244,250,.12) 100%),
      url('http://client-merit-bio.local/wp-content/uploads/2026/06/hero-light-glass.jpg') 70% center / cover no-repeat,
      #C7D6E2;
  }
}

/* ==== v8c stage v2: ONE clean centered vial (Austin: "clean and centered") ==== */
.vial8c-solo {
  /* TRUE transparent cutout — stands centered IN the hexagon, silhouette shadow only */
  position: absolute; left: 0; right: 0; margin-inline: auto; bottom: 10%;
  width: 62%; height: auto;
  filter: drop-shadow(0 26px 28px rgba(34,54,75,.30)) drop-shadow(0 4px 8px rgba(34,54,75,.18));
  animation: drift8c 1.15s cubic-bezier(.22,.61,.36,1) both; animation-delay: .25s;
}
.stage8c { margin-left: auto; margin-right: auto; }   /* stage itself centers in its column */
.stage8c-hex { inset: -6% -6%; width: 112%; height: 112%; }  /* hexagon symmetric behind the centered vial */
@media (max-width: 880px) { .vial8c-solo { width: 82%; } }

/* ==== v8c stage v3: full product-kit composite (Austin: kit cutout — 3 vials + box — replaces the single vial) ==== */
.vial8c-kit {
  -webkit-mask-image: none; mask-image: none;  /* base .vial8c edge mask would clip the outer vials of the wide composite */
  width: 90%; bottom: 15%;
  filter: drop-shadow(0 22px 26px rgba(34,54,75,.26)) drop-shadow(0 4px 8px rgba(34,54,75,.14));
}
@media (max-width: 880px) { .vial8c-kit { width: 97%; bottom: 17%; } }