:root {
    /* V2.1 layout */
    --max: 1480px;
    --page-width: 1520px;
    --pad: 24px;
    --gap: 24px;

    /* V2.1 surfaces */
    --bg: #F8FAFC;
    --surface: #FFFFFF;
    --surface-alt: #EFF7FF;        /* V2.1 blue surface */
    --border: #E2E8F0;
    --border-strong: #CBD5E1;

    /* V2.1 text */
    --text: #1E293B;
    --text-2: #64748B;
    --text-3: #94A3B8;

    /* V2.1 brand-aligned tokens */
    --color-logo-blue: #1E8AE7;    /* exact logo blue — accents only */
    --color-logo-gold: #C8A800;    /* exact logo gold — accents only */
    --color-primary: #1478D4;      /* accessible CTA blue (white text OK) */
    --color-primary-hover: #0F75D6;
    --color-primary-dark: #0D6FCB;
    --color-primary-soft: #EAF6FF;
    --color-primary-softer: #F4FAFF;
    --color-navy: #0A2540;
    --color-navy-2: #0F3557;
    --color-gold-soft: #FFF7D6;
    --color-gold-softer: #FFFBEB;
    --color-gold-dark: #9B8200;

    /* Backward-compatible aliases used throughout existing markup.
       Mapping: old generic blue -> V2.1 accessible primary; old "mid" -> logo blue. */
    --brand: var(--color-primary);
    --brand-light: var(--color-primary-soft);
    --brand-mid: var(--color-logo-blue);
    --brand-dark: var(--color-primary-dark);
    --navy: var(--color-navy);
    --gold: var(--color-logo-gold);
    --gold-soft: var(--color-gold-soft);

    /* Functional colors (unchanged from V1/V2 — these are semantic) */
    --green: #16A34A;
    --green-bg: #ECFDF3;
    --amber: #92400E;
    --amber-bg: #FFFBEB;
    --amber-border: #FDE68A;
    --red: #DC2626;

    /* V2.1 radii */
    --radius: 6px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-2xl: 18px;
    --radius-pill: 999px;

    /* V2.1 shadows (navy-tinted) */
    --shadow-sm:   0 1px  2px rgba(10, 37, 64, 0.06);
    --shadow:      0 2px  6px rgba(10, 37, 64, 0.08);
    --shadow-md:   0 2px  6px rgba(10, 37, 64, 0.08);
    --shadow-lg:   0 4px 16px rgba(10, 37, 64, 0.10);
    --shadow-xl:   0 8px 30px rgba(10, 37, 64, 0.12);
    --shadow-lift: 0 12px 28px rgba(10, 37, 64, 0.11);
    --shadow-hero: 0 18px 46px rgba(10, 37, 64, 0.12);

    /* V2.1 gradients — high-intent areas only */
    --gradient-hero-brand: radial-gradient(circle at 10% 18%, rgba(30, 138, 231, 0.16), transparent 30%),
    radial-gradient(circle at 92% 14%, rgba(200, 168, 0, 0.13), transparent 25%),
    linear-gradient(135deg, #FFFFFF 0%, #F4FAFF 54%, #EAF6FF 100%);
    --gradient-hero-strong: linear-gradient(135deg, #0A2540 0%, #0F3557 52%, #1478D4 100%);
    --gradient-card-soft:  linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);

    /* Typography */
    --font: 'Open Sans', Arial, Helvetica, sans-serif;
    --mono: 'Open Sans', Arial, Helvetica, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; font-size: 14px; }
a { color: var(--brand-mid); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }

/* ── Shell ────────────────────────────────────── */
.shell { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }

/* ── Title row ────────────────────────────────── */
.title-row { padding-bottom: 20px; }
.title-row h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 10px; }
.title-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; color: var(--text-2); }
.title-meta strong { color: var(--text); font-weight: 600; }
/* ── Document signs (Citations / COA / Instructions) ────
   Render only the signs that apply to the current product.
   Any combination of 0, 1, 2, or 3 signs is supported. */
.doc-signs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 12px; }
.doc-sign { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; letter-spacing: -.005em; text-decoration: none; line-height: 1; transition: opacity .15s; }
.doc-sign:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.doc-sign__icon { width: 20px; height: 22px; flex-shrink: 0; }
.doc-sign--citations { color: #7C3AED; }
.doc-sign--coa { color: var(--red); }
.doc-sign--instructions { color: var(--brand-mid); }

/* ── Hero grid ────────────────────────────────── */
.hero { gap: var(--gap); align-items: start; padding-bottom: 28px; width: 100%; }

/* Media column */
.media-col {width: 114px;}
.media-col .main-image { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); aspect-ratio: 1; display: grid; place-items: center; position: relative; overflow: hidden; }
.main-image svg { width: 70%; height: 70%; opacity: .12; }
.main-image .label { position: absolute; bottom: 14px; left: 14px; font-size: 12px; font-weight: 600; color: var(--text-3); background: rgba(255,255,255,.85); backdrop-filter: blur(4px); padding: 4px 10px; border-radius: 6px; }
/*.thumbs-row { display: flex; gap: 8px; margin-top: 10px; }*/
.thumb { flex: 1; aspect-ratio: 1; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--text-3); cursor: pointer; transition: border-color .15s; }
.thumb:hover, .thumb.active { border-color: var(--brand-mid); color: var(--brand-mid); }

/* ── Buy column ───────────────────────────────── */
.buy-col { position: sticky; top: 20px; }
.buy-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.buy-inner { padding: 24px; }

/* Badges */
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 6px; }
.badge.blue { background: var(--brand-light); color: var(--brand); }
.badge.green { background: var(--green-bg); color: var(--green); }
.badge.amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }

/* Quick facts */
.quick-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.qf { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.qf:nth-child(odd) { border-right: 1px solid var(--border); }
.qf:nth-last-child(-n+2) { border-bottom: none; }
.qf .k,.badges .grade-purity { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; margin-bottom: 2px; }
.badges .grade-purity {line-height: 26px;}
.qf .v { font-size: 13px; font-weight: 600; color: var(--text); }

/* Warning */
.handling-warn { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: #fef3c7; border: 1px solid #FDE68A; margin-bottom: 16px; font-size: 13px; color: var(--amber); line-height: 1.45; }
.handling-warn .icon { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.handling-warn strong { color: #78350f; }

/* 移动端 */
@media all and (max-width: 769px), print {
    .size-header,.size-row {grid-template-columns: 20% 20% 30% 1fr;}
}
/* 仅PC生效 */
@media all and (min-width: 770px), print {
    .size-header,.size-row {grid-template-columns: 35% 30% 25% 1fr;}
}
.size-matrix { border: 1px solid var(--border); border-radius: var(--radius); /*overflow: hidden;*/ margin-bottom: 16px; }
.size-header { display: grid; gap: 0; padding: 8px 14px; background: var(--surface-alt); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); border-bottom: 1px solid var(--border); }
.size-row { display: grid; /*grid-template-columns: 30% 20% 35% 1fr;*/ gap: 0; padding: 10px 14px; align-items: center; border-bottom: 1px solid var(--border); transition: background .15s, opacity .15s;opacity:0.6; }
.size-row:last-child { border-bottom: none; }
.size-row:hover { background: #F8FAFC; opacity:1; }
/* Muted state when qty = 0 (default); hover un-mutes so controls read as interactive */
.size-row.is-empty { opacity: 0.6; }
.size-row.is-empty:hover, .size-row.is-empty:focus-within { opacity: 1; }
/* Highlighted state when qty > 0 — positive feedback for selection */
.size-row.is-active { background: var(--brand-light); opacity: 1; }
.size-row.is-active:hover { background: var(--brand-light); }
.size-row .sku { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.size-row .size-label { font-weight: 700; font-size: 14px; }
.stock { font-size: 12px; font-weight: 600; color: var(--green); }
.stock.out { color: var(--red); }
.price { font-weight: 800; font-size: 16px; }
.qty-ctrl { /*display: inline-flex;*/ align-items: center; /*border: 1px solid var(--border);*/ border-radius: 8px; /*overflow: hidden;*/ height: 32px; /*background: var(--surface);*/ }
.qty-ctrl button { width: 28px; height: 100%; border: none; background: var(--surface-alt); cursor: pointer; font-size: 14px; font-weight: 700; color: var(--text-2); transition: background .1s; }
.qty-ctrl button:hover { background: var(--border); }
.qty-ctrl button:disabled { opacity: 0.4; cursor: not-allowed; }
.qty-ctrl span { width: 32px; text-align: center; font-size: 13px; font-weight: 700; }

/* CTAs */
.cta-group { display: grid; gap: 8px; margin-bottom: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 10px; border: 1px solid transparent; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: all .15s; }
.btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-primary:hover { background: #1565C0; }
.price-display .from-label {
    font-size: 12px;
    color: var(--text-3);
    font-weight: 600;
}
.btn-primary:disabled, .btn-primary[disabled] { background: #CBD5E1; border-color: #CBD5E1; color: #fff; cursor: not-allowed; }
.btn-primary:disabled:hover, .btn-primary[disabled]:hover { background: #CBD5E1; }
.btn-secondary { background: var(--surface); color: var(--brand); border-color: var(--brand-mid); }
.btn-secondary:hover { background: var(--brand-light); }
.btn-full { grid-column: 1 / -1; }
.cta-helper { font-size: 12px; color: var(--text-3); text-align: center; margin-top: -4px; margin-bottom: 10px; }
.helper-links { display: flex; gap: 16px; font-size: 13px; color: var(--text-2); justify-content: center; padding-top: 4px; }
.helper-links a { display: inline-flex; align-items: center; gap: 4px; }

/* Doc row inside buy card */
.doc-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--border); }
.doc-link { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; font-size: 12px; font-weight: 700; color: var(--text-2); text-align: center; border-right: 1px solid var(--border); transition: background .1s; cursor: pointer; }
.doc-link:last-child { border-right: none; }
.doc-link:hover { background: var(--surface-alt); color: var(--brand-mid); }
.doc-link .doc-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--surface-alt); border: 1px solid var(--border); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--brand); }

/* ── Sticky anchor bar ────────────────────────── */
.anchor-bar { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); margin-bottom: 32px; }
.anchor-bar .shell { display: flex; gap: 0; overflow-x: auto; }
.anchor-link { padding: 13px 18px; font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; border-bottom: 2px solid transparent; transition: all .15s; }
.anchor-link:hover { color: var(--brand); text-decoration: none; }
.anchor-link.active { color: var(--brand); border-bottom-color: var(--brand); }

/* ── Fact cards row ───────────────────────────── */
.fact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: 40px; }
.fact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.fact-card .fc-icon { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; font-size: 17px; margin-bottom: 12px; }
.fact-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.fact-card p { font-size: 13px; color: var(--text-2); line-height: 1.55; }

/* ── Two-column body ──────────────────────────── */
.body-grid { display: grid; grid-template-columns: 1fr 400px; gap: var(--gap); align-items: start; }
.main-col { display: flex; flex-direction: column; gap: var(--gap); }
.side-col { display: flex; flex-direction: column; gap: var(--gap); position: sticky; top: 60px; }

/* Panels */
#maincontent .panel { /*background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);*/ box-shadow: var(--shadow-sm); overflow: hidden; }
#maincontent .panel-head { padding: 20px 24px; border-bottom: 1px solid var(--border); }
#maincontent .panel-head h2 { font-size: 17px; font-weight: 700; }
#maincontent .panel-body { padding: 24px; }

/* Spec table */
.spec-table { display: grid; gap: 0; }
.spec-row { display: grid; grid-template-columns: 180px 1fr; border-bottom: 1px solid var(--border); }
.spec-row:last-child { border-bottom: none; }
.spec-row .k { padding: 10px 16px 10px 0; font-size: 13px; font-weight: 600; color: var(--text-3); }
.spec-row .v { padding: 10px 0; font-size: 14px; font-weight: 500; }

/* Description */
.description p { margin-bottom: 14px; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.description p:last-child { margin-bottom: 0; }

/* Safety section */
.safety-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.safety-item { padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); }
.safety-item h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.safety-item p { font-size: 13px; color: var(--text-2); }
.safety-item.warn { background: #FEF3C7; border-color: #fde68a; }
.safety-item.info { background: #EFF6FF; border-color: #1E88E5; }

/* Compare table */
.compare-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.compare-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow .15s; }
.compare-card:hover { box-shadow: var(--shadow); }
.compare-card.current { border-color: var(--brand-mid); box-shadow: 0 0 0 1px var(--brand-mid); }
.cc-head { padding: 14px; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.cc-head h4 { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.cc-head p { font-size: 12px; color: var(--text-3); }
.cc-body { padding: 0; }
.cc-row { display: flex; justify-content: space-between; padding: 8px 14px; font-size: 13px; border-bottom: 1px solid var(--border); }
.cc-row:last-child { border-bottom: none; }
.cc-row .label { color: var(--text-3); }
.cc-row .val { font-weight: 700; text-align: right; }
.cc-foot { padding: 14px; border-top: 1px solid var(--border); }
.cc-foot .price { font-size: 17px; font-weight: 800; }
.cc-foot .from { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.current-badge { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: var(--brand); color: #fff; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; }

/* Side cards */
.side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.side-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.cite-cluster { display: flex; flex-direction: column; gap: 8px; }
.cite-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .1s; }
.cite-item:hover { background: var(--surface-alt); }
.cite-item .count { font-family: var(--mono); font-size: 12px; color: var(--brand); background: var(--brand-light); padding: 2px 8px; border-radius: 4px; margin-left: auto; flex-shrink: 0; }

.bulk-cta { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: var(--radius); background: linear-gradient(135deg, #EFF6FF, #EFF6FF); border: 1px solid #1E88E5; }
.bulk-cta .text { font-size: 13px; color: var(--text-2); }
.bulk-cta .text strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 2px; }

/* Accordion / advanced */
.accordion { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-item:last-child { border-bottom: none; }
.acc-item summary { padding: 14px 20px; font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.acc-item summary::after { content: '+'; font-size: 17px; color: var(--text-3); }
.acc-item[open] summary::after { content: '−'; }
.acc-item .acc-body { padding: 0 20px 16px; font-size: 14px; color: var(--text-2); }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); }
.faq-item summary { padding: 14px 18px; font-weight: 600; font-size: 14px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.faq-item summary::after { content: '+'; color: var(--text-3); font-size: 16px; }
.faq-item[open] summary::after { content: '−'; }
.faq-item .faq-body { padding: 0 18px 14px; font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* Related series tags */
.related-series { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.related-series h3 { font-size: 14px; font-weight: 700; color: var(--brand); margin-bottom: 10px; }
.series-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.series-tag { display: inline-block; padding: 8px 14px; background: #dae8ed; border-radius: 4px; font-size: 13px; font-weight: 700; color: var(--text); text-decoration: none; transition: background .15s, color .15s; }
.series-tag:hover { background: var(--brand-light); color: var(--brand); text-decoration: none; }

/* Mobile bottom bar */
.mobile-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(0,0,0,.08); padding: 12px var(--pad); }
.mobile-bar-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

@media (max-width: 1100px) {
    .hero { grid-template-columns: 1fr; }
    .buy-col { position: static; }
    .body-grid { grid-template-columns: 1fr; }
    .side-col { position: static; }
    .fact-cards { grid-template-columns: 1fr 1fr; }
    .compare-grid { grid-template-columns: 1fr 1fr; }
    .mobile-bar { display: block; }
}
@media (max-width: 640px) {
    .fact-cards { grid-template-columns: 1fr; }
    .compare-grid { grid-template-columns: 1fr; }
    .safety-grid { grid-template-columns: 1fr; }
    .title-row h1 { font-size: 26px; }
    .cta-group { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────
   V2.1 — Logo-aligned brand polish
   Layered overrides, kept after base rules so cascade wins.
   ────────────────────────────────────────────────────────── */

/* Headings: serious scientific anchor color */
.title-row h1 { color: var(--color-navy); }
.panel-head h2 { color: var(--color-navy); }
.side-card h3,
.related-series h3 { color: var(--color-navy); }
.fact-card h3 { color: var(--color-navy); }

/* Buy card + panels — V2.1 shell treatment */
.buy-card { border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
/*.panel { border-radius: var(--radius-xl); }*/

/* Primary CTA — accessible logo-aligned blue */
.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    border-radius: var(--radius-md);
}
.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: var(--shadow-md);
}

/* Outline / secondary — V2.1 outline pattern */
.btn-secondary {
    background: var(--surface);
    color: var(--color-primary);
    border-color: var(--color-primary);
    border-radius: var(--radius-md);
}
.btn-secondary:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* Anchor bar — primary blue active state, logo blue underline */
.anchor-link.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-logo-blue);
}
.anchor-link:hover { color: var(--color-primary); }

/* Document signs — re-tint to V2.1 scale */
.doc-sign--instructions,
.wishlist.split.button .action.toggle:after,
.helper-links button { color: var(--color-logo-blue) !important; }
.helper-links button{font-weight: normal !important;}
.wishlist.split.button > .action.toggle:before{border-color: var(--color-logo-blue); }
.doc-sign--coa { color: var(--red) !important; }

/* Badges — V2.1 rule:
   gold for premium/compliance/quality proof points,
   blue for grade names and brand families,
   green for purity (functional). */
.badge.blue {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}
.badge.green {
    background: var(--green-bg);
    color: var(--green);
}
.badge.gold {
    background: var(--color-gold-soft);
    color: var(--color-navy);
    border: 1px solid rgba(200, 168, 0, 0.35);
}
.badge.amber {
    background: var(--amber-bg);
    color: var(--amber);
    border: 1px solid var(--amber-border);
}

/* Citation count chip — primary tones */
.cite-item .count {
    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
}

/* Doc strip icons — brand soft */
.doc-link .doc-icon {
    background: var(--color-primary-soft);
    border-color: rgba(30, 138, 231, 0.18);
    color: var(--color-primary-dark);
}
.doc-link:hover { color: var(--color-primary); }

/* Bulk & Custom CTA — V2.1 brand gradient (high-intent only) */
.bulk-cta {
    background: var(--gradient-hero-brand);
    border: 1px solid rgba(30, 138, 231, 0.24);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Compare "current" card — logo blue ring */
.compare-card.current {
    border-color: var(--color-logo-blue);
    box-shadow: 0 0 0 1px var(--color-logo-blue);
}
.current-badge { background: var(--color-primary); }

/* Size matrix active row — soft brand surface */
.size-row.is-active,
.size-row.is-active:hover { background: var(--color-primary-soft); }

/* Quick facts label color */
.qf .k { color: var(--color-text-muted, var(--text-3)); }

/* Fact card icon backgrounds — calmer, on-brand */
.fact-card .fc-icon { box-shadow: 0 0 0 1px rgba(10, 37, 64, 0.04) inset; }

/* Series tags — soft blue surface, primary text */
.series-tag {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}
.series-tag:hover {
    background: var(--color-logo-blue);
    color: #FFFFFF;
}

/* Mobile bar — V2.1 shadow */
.mobile-bar { box-shadow: 0 -4px 16px rgba(10, 37, 64, 0.10); }
/* Safety "info" panel — V2.1 logo blue accent */
.safety-item.info { background: var(--color-primary-soft); border-color: var(--color-logo-blue); }

.catalog-product-view .product-info-price,
.catalog-product-view .product-social-links{display: none;}
.catalog-product-view .cta-group{margin-top: -57px;}
.catalog-product-view .mage-error{margin-top: -3px;}
.catalog-product-view .box-tocart .action.tocart{width: 100% !important;}
.catalog-product-view .product-options-wrapper .price-box.price-final_price {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
}
.catalog-product-view .price-container .price{
    font-size: 26px;
}
.doc-strip a:not(:last-child) {
    border-right: 1px solid var(--border);
}
.catalog-product-view .custom-mage-error{
    white-space: nowrap;
}
.catalog-product-view .custom-mage-error {color: #e02b27;}
.catalog-product-view .product-options-wrapper .swatch-attribute .required{color: #DC2626;}
.catalog-product-view .product.media .fotorama__stage {border-radius: 14px;}
.old-price .price{font-size: 13px !important; color: var(--text-3);}
.catalog-product-view .grouped .price-box.price-final_price .price-save {
    display: inline-block;
    font-size: 11px !important;
    font-weight: 700;
    color: #166534;
    background: var(--green-bg);
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 6px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.catalog-product-view .grouped .price-box.price-final_price .price-save .price{
    font-size: 11px !important;
}
.catalog-product-view .fotorama__nav-wrap {
    display: flex;
}
.catalog-product-view .wishlist.split.button > .action.split:before{
    content: none;
}
.catalog-product-view .split.button.wishlist span {font-size: 13px;}
.product-info-main {float: right !important;}

.tier-banner {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-primary-soft);
    border: 1px solid rgba(20, 120, 212, 0.25);
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--color-navy);
}
.tier-banner.show { display: flex; }
.tier-banner .icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-logo-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}
.tier-banner strong { font-weight: 700; }
.tier-banner .muted { color: var(--text-2); font-size: 12px; margin-left: auto; }
.price .save.save-distributor {
    color: #0E3A6E;
    background: var(--color-primary-soft);
    border: 1px solid rgba(20, 120, 212, 0.18);
    font-size: 11px;
    border-radius: 4px;
    padding: 3px 10px;
}

.product-options-wrapper .swatch-option {
    border-radius: 8px !important;
    background: #fff !important;
}
.product-options-wrapper .swatch-option.selected {
    border-color: var(--color-logo-blue);
    background: var(--color-primary-soft) !important;
    color: var(--color-primary-dark);
    box-shadow: 0 0 0 1px var(--color-logo-blue);
    border: 1px solid var(--border);
}