/* =========================================================================
   SAR Shop — design tokens (ported from design-tokens.json / v5-layout1)
   No grid/blueprint backgrounds. No CTA glow. No left-border accents.
   No serif. No emoji. Neutral Material elevation only.
   ========================================================================= */
:root {
  --red:#E1251B; --red-strong:#C51B12; --red-on-dark:#FF6A5C;
  --gold:#F2A900; --gold-hover:#FFB71A; --gold-ink:#3A2600; --gold-text:#8A6200;
  --anthracite:#1C1E22;

  --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#EEF0F3;
  --ink:#16181B; --muted:#5F6368; --line:#E2E5EA; --line-strong:#D0D4DA;

  --shadow-1:0 1px 2px rgba(16,18,27,.06), 0 2px 8px rgba(16,18,27,.06);
  --shadow-2:0 4px 10px rgba(16,18,27,.08), 0 12px 28px rgba(16,18,27,.12);
  --shadow-red:0 0.0625rem 0.125rem rgba(16,18,27,.10), 0 0.1875rem 0.625rem rgba(16,18,27,.10);
  --focus:rgba(225,37,27,.28); --tint:rgba(225,37,27,.08); --tint-strong:rgba(225,37,27,.15);
  --gold-tint:rgba(242,169,0,.14);
  --green:#2E7D32; --green-tint:rgba(46,125,50,.12); --green-text:#1E6B24;

  --radius-s:0.5rem; --radius-m:0.875rem; --radius-l:1.25rem;
  --header-h:3.75rem;
  --sticky-top:calc(var(--header-h) + 1rem);
  --font-display:"Archivo", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-label:"Inter", system-ui, sans-serif;

  --content-size:50rem; --wide-size:72.5rem;
  --gutter:var(--wp--style--root--padding-left, clamp(1.25rem, 4vw, 2.5rem));
}
:root[data-theme="dark"] {
  --bg:#121316; --surface:#1C1E22; --surface-2:#24272C; --ink:#ECEDF0;
  --muted:#9BA1A9; --line:#2E3238; --line-strong:#3A3F46;
  --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
  --shadow-2:0 6px 14px rgba(0,0,0,.55), 0 16px 36px rgba(0,0,0,.5);
  --shadow-red:0 0.0625rem 0.125rem rgba(0,0,0,.5), 0 0.1875rem 0.75rem rgba(0,0,0,.42);
  --focus:rgba(225,37,27,.45); --tint:rgba(225,37,27,.16); --tint-strong:rgba(225,37,27,.24);
  --gold-tint:rgba(242,169,0,.18);
  --green:#66BB6A; --green-tint:rgba(102,187,106,.16); --green-text:#8FD293;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#121316; --surface:#1C1E22; --surface-2:#24272C; --ink:#ECEDF0;
    --muted:#9BA1A9; --line:#2E3238; --line-strong:#3A3F46;
    --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
    --shadow-2:0 6px 14px rgba(0,0,0,.55), 0 16px 36px rgba(0,0,0,.5);
    --shadow-red:0 0.0625rem 0.125rem rgba(0,0,0,.5), 0 0.1875rem 0.75rem rgba(0,0,0,.42);
    --focus:rgba(225,37,27,.45); --tint:rgba(225,37,27,.16); --tint-strong:rgba(225,37,27,.24);
    --gold-tint:rgba(242,169,0,.18);
    --green:#66BB6A; --green-tint:rgba(102,187,106,.16); --green-text:#8FD293;
  }
}

/* ---------- Base ---------- */
* { box-sizing:border-box; }
body {
  font-family:var(--font-body); background:var(--bg); color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  transition:background .35s ease, color .35s ease;
}
img { max-width:100%; height:auto; }
/* Default link colour with ZERO specificity (:where) so any component rule
   (nav, sidebar, cards…) wins without needing a dark-mode override each time. */
:where(a) { color:var(--red); }
:where(:root[data-theme="dark"] a) { color:var(--red-on-dark); }
@media (prefers-color-scheme:dark){ :where(:root:not([data-theme="light"]) a) { color:var(--red-on-dark); } }

/* Kill the top-level block-gap so there's no colored strip under the sticky header */
.wp-site-blocks > footer,
.wp-site-blocks > main { margin-block-start:0; }
/* Sticky header must live on the template-part wrapper (a direct child of
   .wp-site-blocks), otherwise it is confined to a wrapper only as tall as
   itself and scrolls away immediately. */
.wp-site-blocks > header { position:sticky; top:0; z-index:60; margin-block-start:0; }
/* full-width sections edge-to-edge */
.wide { max-width:calc(var(--wide-size) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- Typography roles ---------- */
.eyebrow { font-family:var(--font-label); font-size:0.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin:0 0 1rem; display:flex; align-items:center; gap:0.625rem; }
.eyebrow.center { justify-content:center; }
:root[data-theme="dark"] .eyebrow { color:var(--red-on-dark); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .eyebrow { color:var(--red-on-dark); } }
.kick { font-family:var(--font-label); font-size:0.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 0.875rem; }
.display-title { font-family:var(--font-display); font-weight:800; font-size:clamp(2.125rem,5.2vw,3.375rem); line-height:1.02; letter-spacing:-.025em; text-wrap:balance; }
.display-title .accent, .accent-red { color:var(--red); }
:root[data-theme="dark"] .display-title .accent, :root[data-theme="dark"] .accent-red { color:var(--red-on-dark); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .display-title .accent, :root:not([data-theme="light"]) .accent-red { color:var(--red-on-dark); } }
.section-title { font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,3vw,2.125rem); letter-spacing:-.02em; line-height:1.08; text-wrap:balance; }
.lead { font-size:clamp(1rem,1.5vw,1.125rem); color:var(--muted); max-width:54ch; text-wrap:pretty; }
.prose { max-width:64ch; text-wrap:pretty; }
.prose p, .prose li { color:var(--ink); }
.text-muted { color:var(--muted); }
.mono { font-family:var(--font-label); letter-spacing:.04em; }

/* ---------- Buttons (core + custom classes) ---------- */
/* The block wrapper (.wp-block-button) is NEVER a visual button — only the
   inner .wp-block-button__link is styled. This prevents the "square box behind
   the button" caused by variant classes (btn-primary/btn-onlight) sitting on
   the wrapper. */
.wp-block-button { background:transparent !important; box-shadow:none !important; }

.btn, .wp-element-button, .wp-block-button__link {
  font-family:var(--font-display); font-weight:600; font-size:0.9375rem; letter-spacing:.01em;
  border-radius:0.625rem; padding:0.75rem 1.375rem; cursor:pointer; border:1.5px solid transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:0.5625rem; text-decoration:none;
  transition:transform .18s cubic-bezier(.4,0,.2,1), box-shadow .22s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
/* primary = filled red (default core button + a.btn-primary) */
a.btn-primary, button.btn-primary,
.wp-element-button,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
  background:var(--red); color:#fff; box-shadow:var(--shadow-red);
}
a.btn-primary:hover, button.btn-primary:hover,
.wp-element-button:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
  background:var(--red-strong); color:#fff; transform:translateY(-0.0625rem); box-shadow:var(--shadow-2);
}
.btn:focus-visible, .wp-element-button:focus-visible { outline:none; box-shadow:0 0 0 4px var(--focus); }
/* Keep icons inside buttons small (prevents huge unconstrained SVGs). */
.btn svg, .wp-element-button svg, .wp-block-button__link svg,
.woocommerce .button svg, .woocommerce button.button svg,
.single_add_to_cart_button svg, .sar-buy-now svg { width:1.125rem; height:1.125rem; flex-shrink:0; }
/* outline / secondary */
a.btn-outline, .wp-block-button.is-style-outline > .wp-block-button__link {
  background:transparent; color:var(--ink); border:1.5px solid var(--line-strong); box-shadow:none;
}
a.btn-outline:hover, .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  border-color:var(--red); color:var(--red); background:transparent; transform:translateY(-0.125rem); box-shadow:var(--shadow-1);
}
:root[data-theme="dark"] a.btn-outline:hover, :root[data-theme="dark"] .wp-block-button.is-style-outline > .wp-block-button__link:hover { color:var(--red-on-dark); border-color:var(--red-on-dark); }
.btn-ghost { background:transparent; color:var(--muted); padding:0.75rem 0.75rem; }
.btn-ghost:hover { color:var(--red); background:transparent; }
/* on dark band = white button */
.wp-block-button.btn-onlight > .wp-block-button__link, a.btn-onlight {
  background:#fff; color:var(--anthracite); box-shadow:none; border-color:transparent;
}
.wp-block-button.btn-onlight > .wp-block-button__link:hover, a.btn-onlight:hover { background:var(--gold); color:var(--gold-ink); transform:translateY(-0.125rem); }
.is-style-gold > .wp-block-button__link { background:var(--gold); color:var(--gold-ink); box-shadow:none; }
.is-style-gold > .wp-block-button__link:hover { background:var(--gold-hover); color:var(--gold-ink); }

/* ---------- Badges ---------- */
.badge { font-family:var(--font-label); font-size:0.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:0.3125rem 0.625rem; border-radius:0.375rem; display:inline-flex; align-items:center; gap:0.375rem; }
.badge-gold { background:var(--gold); color:var(--gold-ink); }
.badge-soft { background:var(--tint); color:var(--red); }
.badge-out { background:transparent; color:var(--muted); border:1px solid var(--line-strong); }

/* ---------- Brand rule ---------- */
.brand-rule { height:0.1875rem; border-radius:0.1875rem; background:linear-gradient(90deg, var(--red) 0 62%, var(--gold) 62% 100%); }