/* FlowBlend – Custom Store CSS */
/* ======================================
   FlowBlend: Hide Header + Breadcrumbs
   Scoped by JS-added html.fb-hide-chrome
   ====================================== */

html.fb-hide-chrome .page-heading {
  display: none !important;
}
/* Home page: hide breadcrumbs too */
html.fb-home ul.breadcrumbs {
  display: none !important;
}

/* =====================================
   FOOTER PAGES NAV — MOBILE OPTIMIZED
   - Customer Care: single column
   - Other page sections: two columns
   ===================================== */
@media (max-width: 767px) {

  /* Section spacing + dividers */
  .footer-pages-col {
    padding: 14px 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  }

  /* No divider after the last pages column */
  .footer-pages-col:last-of-type {
    border-bottom: 0;
  }

  /* Headings */
  .footer-pages-col .footer-info-heading {
    margin: 0 0 8px;
    line-height: 1.1;
    text-align: left;
    padding: 0 6px;
  }

  /* Default: two-column layout for page lists */
  .footer-pages-col .footer-info-list {
    margin: 0;
    padding: 0 6px;
    column-count: 2;
    column-gap: 18px;
  }

  /* Single-column override for Customer Care */
  .footer-pages-col--support .footer-info-list {
    column-count: 1;
  }

  /* Prevent awkward column breaks */
  .footer-pages-col .footer-info-list li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 6px;
  }

  /* Tight, tappable links */
  .footer-pages-col .footer-info-list a {
    display: inline-block;
    width: 100%;
    padding: 2px 0;
    line-height: 1.25;
    text-align: left;
  }
}
/* Ensure Fera modal is always on top - Hide Smile.io Rewards button */
.fera.fera-modal.is-open,
.fera.fera-modal.is-open .fera-modal-overlay,
.fera.fera-modal.is-open .fera-modal-dialog-container {
  z-index: 2147483647 !important;
}
/* FlowBlend COA */
.fb-coa{
  margin:18px 0;
  padding:14px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  background:#fff;
}
.fb-coa h3{ margin:0 0 10px; font-size:18px; }
.fb-coa-note{ margin:10px 0 0; font-size:14px; opacity:.85; }

.fb-coa-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.fb-coa-btn{
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.18);
  text-decoration:none;
  font-weight:700;
  font-size:14px;
}
/* === FlowBlend Loadout — hide theme page header + breadcrumbs on this page === */
/* Scoped to the Build Your Loadout page only via the body class set by page JS */

body.fb-has-loadout-bar .page-heading,
body.fb-has-loadout-bar .breadcrumbs,
body.fb-has-loadout-bar ul.breadcrumbs {
  display: none !important;
}
/* === FlowBlend Loadout — keep mobile fixed bar above theme footer === */
/* Scoped to the Build Your Loadout page only via body class set by the page JS */

body.fb-has-loadout-bar .fb-loadout-mobile-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2147483646 !important;
}

@media (max-width: 1024px) {
  /* Neutralize the footer's stacking context so the bar sits above it */
  body.fb-has-loadout-bar .footer,
  body.fb-has-loadout-bar footer.footer {
    position: relative;
    z-index: 1;
  }

  /* Push the last footer content up so it isn't hidden behind the bar */
  body.fb-has-loadout-bar {
    padding-bottom: 84px;
  }
}
/* ============================================================================
   Header Nav — The Loadout amber accent
   Adds a small editorial-amber dot before the THE LOADOUT label.
   Targets only the link inside the `.navPages-item--loadout` <li>.
   Color #C4841D from brand guide editorial accent (sparing use).
   Pairs with template edit in navigation-menu.html (2026-06-04).
   ============================================================================ */
.navPages-item--loadout .navPages-action::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #C4841D;
    margin-right: 8px;
    vertical-align: middle;
}
/* ============================================================================
   Global Announcement Bar v2 — black, on-brand (replaces royal-blue rules)
   Sits below header nav on every page.

   Desktop: three messages inline, amber ✦ separators (rendered via ::before
   so screen readers skip them).
   Mobile: fixed-height single-line rotator — pure CSS crossfade, no JS.
   Zero CLS: min-height locked at both breakpoints.
   Honors prefers-reduced-motion (rotation off, first message shown).
   ============================================================================ */

.fb-announce-bar {
  background: #0E0E0E;
  color: #FFFFFF;
  width: 100%;
  padding: 0 16px;
  min-height: 40px;
  display: flex;
  align-items: center;
  font-family: 'Work Sans', Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  box-sizing: border-box;
}

.fb-announce-bar-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1280px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  overflow: hidden;
}

.fb-announce-bar-item {
  color: #FFFFFF;
  white-space: nowrap;
}

/* Amber diamond separators — decorative only (::before = skipped by SRs) */
.fb-announce-bar-item + .fb-announce-bar-item::before {
  content: '\2726'; /* ✦ */
  color: #C4841D;
  font-weight: 400;
  font-size: 11px;
  margin: 0 16px;
  position: relative;
  top: -1px;
}

.fb-announce-bar-link,
.fb-announce-bar-link:link,
.fb-announce-bar-link:visited {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.fb-announce-bar-link:hover,
.fb-announce-bar-link:focus {
  color: #FFFFFF;
  text-decoration-color: #C4841D;
}

.fb-announce-bar-link:focus-visible {
  outline: 2px solid #C4841D;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Long/short message variants: desktop shows the full line, mobile the
   fitted one. Both stay in the DOM; visibility is display-toggled. */
.fb-announce-bar-text--short { display: none; }

/* ---------------------------------------------------------------------------
   Mobile ≤640px: one-line rotator. Items stack in the same grid cell and
   crossfade — container height never changes, so no layout shift and no
   three-row-tall bar eating the viewport.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .fb-announce-bar-text--long { display: none; }
  .fb-announce-bar-text--short { display: inline; }

  .fb-announce-bar {
    padding: 0 12px;
    min-height: 36px;
    font-size: 13px;
  }

  .fb-announce-bar-list {
    display: grid;
    align-items: center;
    justify-items: center;
    min-height: 36px;
  }

  .fb-announce-bar-item {
    grid-area: 1 / 1;               /* all three occupy the same cell */
    opacity: 0;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: fb-announce-rotate 12s infinite;
  }

  .fb-announce-bar-item + .fb-announce-bar-item::before { content: none; }

  .fb-announce-bar-item--1 { animation-delay: 0s; }
  .fb-announce-bar-item--2 { animation-delay: 4s; }
  .fb-announce-bar-item--3 { animation-delay: 8s; }

  /* Finger on the bar (or focus inside it) pauses the cycle */
  .fb-announce-bar-list:hover .fb-announce-bar-item,
  .fb-announce-bar-list:focus-within .fb-announce-bar-item {
    animation-play-state: paused;
  }

  /* Each message: fade in over .5s, hold ~3s, fade out over .5s (of 12s) */
  @keyframes fb-announce-rotate {
    0%      { opacity: 0; }
    4.16%   { opacity: 1; }         /* 0.5s in */
    29.16%  { opacity: 1; }         /* 3.5s in */
    33.33%  { opacity: 0; }         /* 4s in — next message takes over */
    100%    { opacity: 0; }
  }
}

/* Motion off → rotation off, first message stays visible.
   All three remain in the DOM for screen readers at every setting. */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .fb-announce-bar-item { animation: none; }
  .fb-announce-bar-item--1 { opacity: 1; }
}
/* FlowBlend — Subscription buy-box disclosure (injected by fb-sns-buybox.js) */
.fb-sns-note {
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: #2a2a2a;
    margin: 8px 0 0;
}
/* ============================================================
   FlowBlend — Loadout PDP Cross-Sell (Quiet card, buy-box zone)
   Renders on Pouches PDPs only. Multi-category match dedupe.
   ============================================================ */

/* Multi-match dedupe — only the first card on a PDP is visible */
.fb-pdp-cross-sell ~ .fb-pdp-cross-sell {
    display: none !important;
}

/* Card container — white bg, navy border, quiet presence */
.fb-pdp-cross-sell {
    display: block;
    max-width: 720px;
    margin: 8px auto 40px;
    background: #ffffff;
    border: 1px solid #031B7A;
    border-radius: 10px;
    text-decoration: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.fb-pdp-cross-sell:hover,
.fb-pdp-cross-sell:focus {
    border-color: #0420a0;
    box-shadow: 0 4px 12px rgba(3, 27, 122, 0.12);
    transform: translateY(-1px);
    text-decoration: none !important;
}

.fb-pdp-cross-sell-inner {
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Eyebrow — Raleway 600, amber editorial accent */
.fb-pdp-cross-sell-eyebrow {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: #C4841D;
    text-transform: uppercase;
    margin: 0;
}

/* Headline — Oswald 700 mixed-case */
.fb-pdp-cross-sell-headline {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.15;
    color: #0a0a0a;
    margin: 0;
    text-transform: none;
}

/* Sub copy — Work Sans 400 */
.fb-pdp-cross-sell-sub {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.45;
    color: #2a2a2a;
    margin: 0;
}

/* Math row — strikethrough from-price, bold to-price, amber savings */
.fb-pdp-cross-sell-math {
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #2a2a2a;
    margin: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.fb-pdp-cross-sell-math .fb-math-eg     { font-weight: 600; color: #0a0a0a; }
.fb-pdp-cross-sell-math .fb-math-from   { color: #6a6a6a; }
.fb-pdp-cross-sell-math .fb-math-arrow  { color: #2a2a2a; }
.fb-pdp-cross-sell-math .fb-math-to     { font-weight: 700; color: #0a0a0a; }
.fb-pdp-cross-sell-math .fb-math-save   { font-weight: 700; color: #C4841D; margin-left: auto; }

/* CTA — navy gradient pill, matches global primary CTA */
.fb-pdp-cross-sell-cta {
    display: inline-block;
    align-self: flex-start;
    margin-top: 8px;
    padding: 12px 22px;
    background: linear-gradient(to bottom, #000000, #031B7A);
    color: #ffffff !important;
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    border-radius: 999px;
    text-decoration: none !important;
    transition: background 0.18s ease, transform 0.18s ease;
}

.fb-pdp-cross-sell:hover .fb-pdp-cross-sell-cta {
    background: linear-gradient(to bottom, #0a0a0a, #0420a0);
    transform: scale(1.03);
}

/* Mobile — tighter padding, stack savings on its own line, full-width CTA */
@media (max-width: 640px) {
    .fb-pdp-cross-sell-inner { padding: 18px 16px; }
    .fb-pdp-cross-sell-headline { font-size: 20px; }
    .fb-pdp-cross-sell-sub { font-size: 14px; }
    .fb-pdp-cross-sell-math { font-size: 13px; gap: 6px; }
    .fb-pdp-cross-sell-math .fb-math-save { margin-left: 0; width: 100%; }
    .fb-pdp-cross-sell-cta { align-self: stretch; text-align: center; padding: 14px 22px; }
}
/* Hide the theme's Loadout cross-sell card on SPDP pages — these builds carry
   their own Loadout band. Scoped via :has() so it ONLY fires when the description
   contains .fb-spdp; every other PDP keeps the theme's card untouched. */
.productView-description:has(.fb-spdp) .fb-pdp-cross-sell { display: none !important; }

/* ============================================================
   FlowBlend — Buy-Box v2 (pack tiles + subscription cards)
   Decorated by fb-sns-buybox.js. All selectors keyed to
   JS-assigned classes — no theme-class assumptions.
   ============================================================ */

/* shared: hide native radio dot, keep keyboard focusable */
.fb-pack-group input[type="radio"],
.fb-sns-group  input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ---------- Pack Size: economic tiles ---------- */
.fb-pack-group .fb-opt {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 46%;
    padding: 12px 16px;
    margin: 0 8px 8px 0;
    border: 1.5px solid #d8d8d8;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fb-pack-group .fb-opt.fb-selected {
    border-color: #031B7A;
    box-shadow: 0 0 0 1px #031B7A;
}
.fb-pack-group .fb-opt-price  { font-weight: 700; font-size: 16px; color: #0a0a0a; }
.fb-pack-group .fb-opt-percan { font-size: 13px; color: #555; }
.fb-pack-group .fb-opt-badge,
.fb-pack-group .fb-opt-pop {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.fb-pack-group .fb-opt-badge { color: #C4841D; }
.fb-pack-group .fb-opt-pop   { color: #031B7A; }

/* ---------- Subscribe & Save: stacked choice cards ---------- */
.fb-sns-group .fb-opt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    width: 100%;
    padding: 14px 16px 14px 44px;
    margin: 0 0 10px;
    position: relative;
    border: 1.5px solid #d8d8d8;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fb-sns-group .fb-opt.fb-selected {
    border-color: #031B7A;
    box-shadow: 0 0 0 1px #031B7A;
}
/* drawn radio indicator */
.fb-sns-group .fb-opt::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #b9b9b9;
    border-radius: 50%;
    background: #fff;
}
.fb-sns-group .fb-opt.fb-selected::before {
    border-color: #031B7A;
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 12px #031B7A;
}
.fb-sns-group .fb-card-price {
    font-weight: 700;
    font-size: 16px;
    color: #0a0a0a;
}
.fb-sns-group .fb-card-price s {
    font-weight: 400;
    color: #8a8a8a;
    margin: 0 2px;
}
.fb-sns-group .fb-card-benefits {
    flex-basis: 100%;
    font-size: 13px;
    line-height: 1.4;
    color: #555;
}
.fb-sns-group .fb-card-badge {
    margin-left: auto;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #C4841D;
}

/* ---------- trust line under CTA ---------- */
.fb-buybox-trust {
    font-family: 'Work Sans', sans-serif;
    font-size: 13.5px;
    color: #444;
    margin: 10px 0 0;
    text-align: center;
    display: block;
    width: 100%;
    flex-basis: 100%;
    order: 99;
    clear: both;
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
    .fb-pack-group .fb-opt { min-width: 100%; margin-right: 0; }
    .fb-sns-group  .fb-opt { padding: 13px 14px 13px 42px; }
    .fb-sns-group  .fb-card-badge { flex-basis: 100%; margin-left: 0; }
}
/* ============================================================
   Header quickSearch — panel must not occupy layout when closed.
   It was rendering in-flow (~300px), inflating the search item to
   ~304px and scattering the whole navUser cluster / overlapping the
   nav in the sticky header. Hide it while collapsed; theme JS still
   opens it on click.
   ============================================================ */
.navUser-item--search .dropdown--quickSearch[aria-hidden="true"] {
    display: none;
}

/* ==========================================================================
FlowBlend SPEAR PDP 2026 — shared description-zone stylesheet
Scope: everything under .fb-spdp (BC product description zone — Custom HTML / description field)
This file is the REFERENCE COPY. In deployment it ships INLINE as the first <style>
block of each page's description HTML (BC has no global CSS field for PDP descriptions).
Design tokens per FlowBlend_Web_Build_Spec.md (canonical). SPEAR accent #0096FF.
NO JavaScript required by any section. Bands are container-width rounded panels
(safe inside .productView-description) — do NOT use 50vw full-bleed breakouts here.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Work+Sans:wght@400;500;600;700&family=Raleway:wght@600;700&display=swap');

.fb-spdp, .fb-spdp * { box-sizing: border-box; }
.fb-spdp {
  --sp-ink:#0E0E0E; --sp-muted:#2B2B2B; --sp-line:rgba(43,43,43,.12);
  --sp-accent:#0096FF; --sp-amber:#C4841D; --sp-gray:#F1F1F1; --sp-dark:#0E0E0E;
  --sp-cta:linear-gradient(to bottom,#000000,#031B7A);
  font-family:'Work Sans',sans-serif; color:var(--sp-ink);
  max-width:1040px; margin-left:auto; margin-right:auto; overflow-x:hidden;
}
.fb-spdp section { margin:0 auto 56px; overflow:hidden; }
@media (max-width:760px){ .fb-spdp section { margin-bottom:40px; } }

/* type */
.fb-spdp .sp-eyebrow { font-family:'Raleway',sans-serif !important; font-weight:600 !important; letter-spacing:.12em; text-transform:uppercase; font-size:13px; color:var(--sp-accent) !important; margin:0 0 12px; }
.fb-spdp h2.sp-h2 { font-family:'Oswald',sans-serif !important; font-weight:700 !important; font-size:38px; line-height:1.12; margin:0 0 16px; color:var(--sp-ink) !important; }
.fb-spdp h3.sp-h3 { font-family:'Oswald',sans-serif !important; font-weight:600 !important; font-size:22px; line-height:1.2; margin:0 0 8px; color:var(--sp-ink) !important; }
.fb-spdp p, .fb-spdp li { font-size:18px; line-height:1.6; color:var(--sp-muted); margin:0 0 14px; }
@media (max-width:760px){ .fb-spdp h2.sp-h2{ font-size:29px; } .fb-spdp p, .fb-spdp li{ font-size:17px; } }
.fb-spdp .sp-center { text-align:center; }

/* CTA — locked navy pill */
.fb-spdp a.sp-btn, .fb-spdp a.sp-btn:link, .fb-spdp a.sp-btn:visited {
  display:inline-block; background:var(--sp-cta) !important; color:#FFFFFF !important;
  font-family:'Work Sans',sans-serif !important; font-weight:700 !important; font-size:17px;
  text-decoration:none !important; padding:15px 36px; border-radius:999px !important; border:0 !important;
  transition:transform .15s ease, filter .15s ease; }
.fb-spdp a.sp-btn:hover { transform:scale(1.03); filter:brightness(1.15); }
.fb-spdp a.sp-btn--ghost, .fb-spdp a.sp-btn--ghost:link, .fb-spdp a.sp-btn--ghost:visited { background:transparent !important; color:var(--sp-ink) !important; border:1.5px solid var(--sp-ink) !important; padding:13px 32px; }
.fb-spdp a.sp-btn--ondark, .fb-spdp a.sp-btn--ondark:link, .fb-spdp a.sp-btn--ondark:visited { color:#FFFFFF !important; }
.fb-spdp .sp-textlink { color:var(--sp-ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* 1 — Loadout band */
.fb-spdp .sp-loadout { background:var(--sp-dark); border-radius:10px; padding:34px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.fb-spdp .sp-loadout-copy { flex:1 1 340px; }
.fb-spdp .sp-loadout .sp-eyebrow { color:var(--sp-amber) !important; }
.fb-spdp .sp-loadout h2 { font-family:'Oswald',sans-serif !important; font-weight:700 !important; font-size:30px; color:#FFFFFF !important; margin:0 0 8px; }
.fb-spdp .sp-loadout p { color:#CFCFCF; margin:0 0 4px; font-size:17px; }
.fb-spdp .sp-loadout-cta { flex:0 0 auto; }
@media (max-width:760px){ .fb-spdp .sp-loadout { padding:26px 22px; } .fb-spdp .sp-loadout h2 { font-size:25px; } }

/* 2 — outcome row */
.fb-spdp .sp-outcomes { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:18px !important; }
@media (max-width:760px){ .fb-spdp .sp-outcomes { grid-template-columns:1fr !important; } }
.fb-spdp .sp-outcome { border:1px solid var(--sp-line); border-radius:10px; padding:24px 22px; background:#FFFFFF; }
.fb-spdp .sp-outcome h3 { margin-top:6px; }
.fb-spdp .sp-outcome p { margin:0; font-size:16px; }
.fb-spdp .sp-oicon { width:44px; height:44px; border-radius:999px; background-color:rgba(0,150,255,.10); background-repeat:no-repeat; background-position:center; background-size:22px 22px; display:flex; align-items:center; justify-content:center; }
.fb-spdp .sp-oicon--target { background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230096FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8'/><circle cx='12' cy='12' r='3.5'/><circle cx='12' cy='12' r='1' fill='%230096FF' stroke='none'/></svg>"); }
.fb-spdp .sp-oicon--shield { background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230096FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 3v5c0 4.6-3.1 7.6-7 9-3.9-1.4-7-4.4-7-9V6z'/><path d='M9 12l2 2 4-4'/></svg>"); }
.fb-spdp .sp-oicon--box { background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230096FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 8l-9-5-9 5v8l9 5 9-5z'/><path d='M3 8l9 5 9-5'/><path d='M12 13v9'/></svg>"); }
.fb-spdp .sp-oicon--sparkle { background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230096FF' stroke='none'><path d='M12 2.5l1.9 5.6 5.6 1.9-5.6 1.9L12 17.5l-1.9-5.6L4.5 10l5.6-1.9z'/></svg>"); }
.fb-spdp .sp-oicon--snow { background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230096FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v20M4.2 7l15.6 10M19.8 7L4.2 17'/></svg>"); }
.fb-spdp .sp-oicon--leaf { background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230096FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20c0-8 6-14 16-15 1 10-5 16-13 16-2 0-3-.6-3-1z'/><path d='M9 18c2-4 5-6.5 8-7.5'/></svg>"); }
.fb-spdp .sp-oicon--cans { background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230096FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='5' height='10' rx='1.5'/><rect x='9.5' y='5.5' width='5' height='13' rx='1.5'/><rect x='16' y='8' width='5' height='10' rx='1.5'/></svg>"); }
.fb-spdp .sp-oicon--tag { background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230096FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.6 13.4L11 3.8A2 2 0 0 0 9.6 3H4a1 1 0 0 0-1 1v5.6a2 2 0 0 0 .6 1.4l9.6 9.6a2 2 0 0 0 2.8 0l4.6-4.6a2 2 0 0 0 0-2.8z'/><circle cx='7.5' cy='7.5' r='1.3' fill='%230096FF' stroke='none'/></svg>"); }

/* 3 — flavor switcher */
.fb-spdp .sp-flavors { display:flex; flex-wrap:wrap; gap:12px; margin:14px 0 6px; }
.fb-spdp a.sp-flavor, .fb-spdp a.sp-flavor:link, .fb-spdp a.sp-flavor:visited { display:flex; align-items:center; gap:10px; border:1.5px solid var(--sp-line); border-radius:999px; padding:10px 20px 10px 12px; text-decoration:none !important; color:var(--sp-ink) !important; font-weight:600; font-size:15px; transition:border-color .15s ease; }
.fb-spdp a.sp-flavor:hover { border-color:var(--sp-accent); }
.fb-spdp .sp-flavor--active { border-color:var(--sp-accent) !important; background:rgba(0,150,255,.07); cursor:default; }
.fb-spdp .sp-fdot { width:22px; height:22px; border-radius:999px; display:inline-block; }
.fb-spdp .sp-fdot--spearmint { background:#2FBF71; } /* flavor cue dots, not category accents */
.fb-spdp .sp-fdot--cherry { background:#C0392B; }
.fb-spdp .sp-fdot--wintergreen { background:#1E7A5A; }
.fb-spdp .sp-fdot--cbd { background:#4A6FA5; }
.fb-spdp .sp-fdot--stack { background:linear-gradient(135deg,#2FBF71 33%,#C0392B 33% 66%,#1E7A5A 66%); }

/* 4 — ingredient panel (dark) */
.fb-spdp .sp-formula { background:var(--sp-dark); border-radius:10px; padding:44px 36px; }
.fb-spdp .sp-formula h2.sp-h2, .fb-spdp .sp-formula h3, .fb-spdp .sp-formula p { color:#FFFFFF !important; }
.fb-spdp .sp-formula .sp-sub { color:#CFCFCF !important; }
.fb-spdp .sp-doses { display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:14px !important; margin:26px 0 10px; }
@media (max-width:900px){ .fb-spdp .sp-doses { grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:520px){ .fb-spdp .sp-doses { grid-template-columns:1fr !important; } }
.fb-spdp .sp-dose { border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:20px 18px; }
.fb-spdp .sp-dosenum { font-family:'Oswald',sans-serif !important; font-weight:700; font-size:32px; color:var(--sp-amber) !important; display:block; line-height:1.05; margin-bottom:4px; }
.fb-spdp .sp-dose h3 { font-size:17px !important; color:#FFFFFF !important; margin:0 0 6px; }
.fb-spdp .sp-dose p { font-size:15px !important; color:#CFCFCF !important; margin:0; line-height:1.5; }
@media (max-width:760px){ .fb-spdp .sp-formula { padding:30px 22px; } }

/* 5/6 — feel + use */
.fb-spdp .sp-quote { border-left:3px solid var(--sp-amber); padding:6px 0 6px 18px; margin:18px 0; }
.fb-spdp .sp-quote p { font-size:19px; font-style:italic; color:var(--sp-ink); margin:0 0 6px; }
.fb-spdp .sp-quote cite { font-style:normal; font-size:14px; color:var(--sp-muted); }
.fb-spdp ol.sp-steps { padding-left:22px; margin:0 0 10px; }
.fb-spdp ol.sp-steps li { margin-bottom:8px; }
.fb-spdp .sp-occasions { display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:16px 0 0; list-style:none; }
.fb-spdp .sp-occasions li { font-weight:600; font-size:14px; color:var(--sp-ink); background:var(--sp-gray); border-radius:999px; padding:9px 18px; margin:0; }

/* 7 — comparison table */
.fb-spdp .sp-cmpwrap { overflow-x:auto; border:1px solid var(--sp-line); border-radius:10px; }
.fb-spdp table.sp-cmp { width:100%; border-collapse:collapse; min-width:640px; }
.fb-spdp .sp-cmp th, .fb-spdp .sp-cmp td { text-align:left; padding:14px 16px; border-bottom:1px solid var(--sp-line); font-size:16px; vertical-align:top; }
.fb-spdp .sp-cmp thead th { font-family:'Oswald',sans-serif !important; font-weight:700; font-size:17px; background:var(--sp-gray); }
.fb-spdp .sp-cmp thead th:first-child { background:#FFFFFF; }
.fb-spdp .sp-cmp tbody tr:last-child td { border-bottom:0; }
.fb-spdp .sp-cmp td:first-child { font-weight:600; color:var(--sp-ink); }
.fb-spdp .sp-cmp .sp-col-hero { color:var(--sp-accent); }

/* 8 — origin block */
.fb-spdp .sp-origin { background:var(--sp-gray); border-radius:10px; padding:36px 32px; }
.fb-spdp .sp-badges { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; padding:0; list-style:none; }
.fb-spdp .sp-badges li { font-weight:600; font-size:13px; color:var(--sp-ink); background:#FFFFFF; border:1px solid var(--sp-line); border-radius:999px; padding:8px 16px; margin:0; }

/* 9 — proof band */
.fb-spdp .sp-proofhead { font-family:'Oswald',sans-serif !important; font-weight:600 !important; font-size:20px; margin:0 0 18px; }
.fb-spdp .sp-stars { color:var(--sp-amber); letter-spacing:2px; font-size:18px; }
.fb-spdp .sp-proofgrid { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:16px !important; }
@media (max-width:820px){ .fb-spdp .sp-proofgrid { grid-template-columns:1fr !important; } }
.fb-spdp .sp-proofcard { border:1px solid var(--sp-line); border-radius:10px; padding:22px 20px; background:#FFFFFF; }
.fb-spdp .sp-proofcard p { font-size:16px; font-style:italic; margin:8px 0 10px; color:var(--sp-ink); }
.fb-spdp .sp-proofcard cite { font-style:normal; font-size:13px; color:var(--sp-muted); }
.fb-spdp .sp-verified { font-size:12px; font-weight:600; color:var(--sp-accent); text-transform:uppercase; letter-spacing:.06em; }

/* 10 — FAQ */
.fb-spdp .sp-faq details { border-bottom:1px solid var(--sp-line); padding:4px 0; }
.fb-spdp .sp-faq summary { list-style:none; cursor:pointer; padding:18px 40px 18px 0; position:relative; font-family:'Oswald',sans-serif !important; font-weight:600; font-size:19px; color:var(--sp-ink); }
.fb-spdp .sp-faq summary::-webkit-details-marker { display:none; }
.fb-spdp .sp-faq summary::after { content:'+'; position:absolute; right:4px; top:14px; font-size:28px; font-weight:400; color:var(--sp-accent); line-height:1; }
.fb-spdp .sp-faq details[open] summary::after { content:'\2212'; }
.fb-spdp .sp-faq details p { padding:0 0 16px; margin:0; font-size:17px; }

/* 11 — closing band */
.fb-spdp .sp-close { background:#000000; border-radius:10px; padding:56px 32px; text-align:center; }
.fb-spdp .sp-close h2 { font-family:'Oswald',sans-serif !important; font-weight:700 !important; font-size:34px; color:#FFFFFF !important; margin:0 0 12px; }
.fb-spdp .sp-close p { color:#CFCFCF; max-width:560px; margin:0 auto 18px; }
.fb-spdp .sp-close .sp-guarantee { font-weight:600; color:#FFFFFF; }
.fb-spdp .sp-disclaimer { font-size:12.5px; color:#9a9a9a; margin:26px auto 0; max-width:640px; line-height:1.5; }
@media (max-width:760px){ .fb-spdp .sp-close { padding:40px 22px; } .fb-spdp .sp-close h2 { font-size:27px; } }

/* ==== media / photography (2026 add — see PHOTO-REFERENCE-SHEET.md) ==== */
.fb-spdp figure { margin:0; }
.fb-spdp .sp-media { margin:0 0 28px; }
.fb-spdp .sp-media img { display:block; width:100%; height:auto; border-radius:12px; }
.fb-spdp .sp-media figcaption { font-size:13px; color:var(--sp-muted); margin:10px 2px 0; line-height:1.45; }
/* product-shot + copy split (blocks 3 & 8) */
.fb-spdp .sp-split { display:grid !important; grid-template-columns:0.9fr 1.1fr; gap:30px; align-items:center; }
.fb-spdp .sp-split--media-right { grid-template-columns:1.1fr 0.9fr; }
@media (max-width:760px){ .fb-spdp .sp-split, .fb-spdp .sp-split--media-right { grid-template-columns:1fr !important; gap:22px; } }
/* surface card — gives a plain/white-bg can a home so it never 'floats' */
.fb-spdp .sp-shot { background:radial-gradient(circle at 50% 38%, #FFFFFF 0%, #F4F5F6 72%, #ECEEF0 100%); border:1px solid var(--sp-line); border-radius:14px; padding:18px; text-align:center; }
.fb-spdp .sp-shot img { display:block; width:100%; height:auto; margin:0 auto; border-radius:8px; }
.fb-spdp .sp-shot--wide img { max-width:none; }
/* image on the dark formula panel */
.fb-spdp .sp-formula .sp-media { margin:8px 0 24px; }
/* live Fera rating (proof band) */
.fb-spdp .sp-fera-rating { margin:0 0 18px; min-height:22px; }
.fb-spdp .sp-proofnote { font-size:14px; color:var(--sp-muted); margin:-6px 0 18px; }