/* ============================================================
   ASPECT V3 SKIN - applies the V3 home's system to every other
   page without touching their markup or scripts. Loaded after
   styles.css (+ product.css) on pages whose <body> carries
   .v3-skin. Mostly token re-pointing; component upgrades below.
   ============================================================ */

body.v3-skin {
  /* neutrals pulled toward navy (hue ~225), same lightness steps */
  --n-0: #ffffff; --n-50: #f3f5f9; --n-100: #eaeef5; --n-150: #e1e6ef; --n-200: #d3dae6;
  --n-300: #bcc5d4; --n-400: #96a0b3; --n-500: #6e788d; --n-600: #535d73; --n-700: #3d475f;
  --n-800: #28324a; --n-900: #142041; --n-950: #0b1531; --n-1000: #040c22;
  --accent: #1561dc; --accent-hover: #0a3fa3; --accent-press: #08347f;
  --accent-tint: #e8f0ff; --accent-tint-2: #d4e3ff; --accent-ink: #0a3fa3;
  --accent-glow: rgba(21, 97, 220, .32); --accent-dark: #8cc0ff;
  --ok: #0b7f4f; --ok-tint: #e3f5ec;
  --bg: #f3f5f9; --surface: #fff; --surface-2: #f8f9fc; --surface-sunk: #edf1f7;
  --ink: #0b1531; --ink-2: #44506b; --ink-3: #5a647d;
  --line: #e1e6ef; --line-2: #edf0f5; --line-strong: #c9d1de;
  --d-bg: #040c22; --d-surface: #0b1d47; --d-surface-2: #10275a;
  --d-ink: #f2f5fb; --d-ink-2: #c3cde0; --d-ink-3: #93a1bd;
  --d-line: rgba(255, 255, 255, .10); --d-line-2: rgba(255, 255, 255, .16);
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;
  --sh-border: 0 0 0 1px rgba(11, 21, 49, .06);
  --sh-1: 0 1px 2px rgba(11, 21, 49, .05), 0 4px 14px -6px rgba(11, 21, 49, .10);
  --sh-2: 0 2px 4px rgba(11, 21, 49, .05), 0 10px 24px -10px rgba(11, 21, 49, .16);
  --sh-3: 0 2px 4px rgba(11, 21, 49, .06), 0 24px 48px -20px rgba(11, 21, 49, .28);
  --sh-4: 0 30px 80px -24px rgba(2, 8, 30, .5), 0 2px 6px rgba(2, 8, 30, .2);
  background: var(--bg);
}
.v3-skin ::selection { background: #cfe0ff; color: #0b1531; }

/* ---------- Type: the home's display voice ---------- */
.v3-skin .h1, .v3-skin .h2, .v3-skin h1 { letter-spacing: -.04em; font-weight: 600; }
.v3-skin .h3 { letter-spacing: -.03em; }
.v3-skin .eyebrow { color: var(--accent); letter-spacing: .14em; }
.v3-skin .band-dark .eyebrow, .v3-skin .v3s-hero .eyebrow { color: var(--accent-dark); }

/* ---------- Buttons: pills ---------- */
.v3-skin .btn { border-radius: 999px; padding: 12px 22px; min-height: 46px; }
.v3-skin .btn-lg { padding: 15px 26px; min-height: 52px; }
.v3-skin .btn-sm { min-height: 38px; padding: 8px 16px; }
.v3-skin .btn-dark { --btn-bg: var(--n-950); --btn-bg-hover: var(--accent-hover); }
.v3-skin .band-dark .btn:not(.btn-on-dark):not(.btn-ghost), .v3-skin .v3s-hero .btn:not(.btn-on-dark):not(.btn-ghost) { --btn-bg: #fff; --btn-fg: #071a45; --btn-bg-hover: #e9f2ff; box-shadow: 0 10px 30px -12px rgba(140, 192, 255, .7); }
.v3-skin .btn-on-dark { --btn-bg: rgba(255, 255, 255, .08); --btn-bd: rgba(255, 255, 255, .28); }

/* ---------- Cards ---------- */
.v3-skin .card, .v3-skin .card-flat { border-color: transparent; box-shadow: var(--sh-1); }
.v3-skin .band-dark .card, .v3-skin .band-dark .card-flat { background: rgba(255, 255, 255, .06); border-color: var(--d-line-2); }

/* ---------- Header + ticker ---------- */
.v3-skin .site-header { background: color-mix(in srgb, #fff 88%, transparent); border-bottom-color: var(--line-2); }
.v3-skin .ticker { background: #040c22; }

/* ---------- Page hero: every page opens like the home ---------- */
.v3-skin main > section:first-child.v3s-hero {
  position: relative; isolation: isolate; overflow: clip;
  background: #040c22 !important; color: var(--d-ink);
  --ink: var(--d-ink); --ink-2: var(--d-ink-2); --ink-3: var(--d-ink-3);
  --surface: var(--d-surface); --surface-2: var(--d-surface); --surface-sunk: rgba(255, 255, 255, .05);
  --line: var(--d-line); --line-2: var(--d-line); --line-strong: var(--d-line-2); --accent-ink: var(--accent-dark);
  border: 0 !important;
}
.v3-skin .v3s-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/v3/img/plate-1600.webp") 70% 40% / cover no-repeat; }
.v3-skin .v3s-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(4, 12, 34, .97) 0%, rgba(4, 12, 34, .92) 45%, rgba(4, 12, 34, .62) 75%, rgba(4, 12, 34, .5) 100%), linear-gradient(180deg, transparent 60%, #040c22 100%); }
@media (max-width: 899px) { .v3-skin .v3s-hero::before { background-image: url("/v3/img/plate-m.webp"); background-position: 60% 30%; } .v3-skin .v3s-hero::after { background: linear-gradient(180deg, rgba(4, 12, 34, .7), rgba(4, 12, 34, .93) 55%, #040c22); } }
.v3-skin .v3s-hero .mol-bg, .v3-skin .v3s-hero canvas { opacity: .35; }
.v3-skin .v3s-hero.grid-bg { background-image: none !important; }
.v3-skin .v3s-hero h1, .v3-skin .v3s-hero .h1 { color: #fff; }
.v3-skin .v3s-hero .crumb, .v3-skin .v3s-hero .crumb a { color: var(--d-ink-3); }
.v3-skin .v3s-hero .lede, .v3-skin .v3s-hero p { color: var(--d-ink-2); }
.v3-skin .v3s-hero .input, .v3-skin .v3s-hero input[type="search"], .v3-skin .v3s-hero input[type="text"] { background: #fff; color: #0b1531; }

/* ---------- Product cards (shop, featured, cross-sell) ---------- */
.v3-skin .pcard { border-color: transparent; border-radius: 20px; box-shadow: var(--sh-1); }
.v3-skin .pcard-media { background: radial-gradient(120% 90% at 50% 40%, #f0f1f3 0%, #e3e4e7 70%); border-bottom: 0; }
.v3-skin .pcard-title { letter-spacing: -.03em; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .v3-skin .pcard:hover { box-shadow: var(--sh-3); border-color: transparent; } }
.v3-skin .pcard .btn { min-height: 40px; }

/* ---------- Toolbar / filters (shop) ---------- */
.v3-skin .toolbar { background: color-mix(in srgb, #fff 92%, transparent); border-color: var(--line-2); }
.v3-skin .chip, .v3-skin .area-chip, .v3-skin [data-area-chip], .v3-skin .filter-chip { border-radius: 999px; }

/* ---------- Accordions, forms, pills ---------- */
.v3-skin .acc-item, .v3-skin .acc > div { border-radius: 14px; }
.v3-skin .input, .v3-skin .select, .v3-skin textarea { border-radius: 12px; }
.v3-skin .pill { border-radius: 999px; }

/* ---------- Dark bands become the home's navy panels ---------- */
.v3-skin .band-dark { background: radial-gradient(120% 120% at 85% 20%, #123a92 0%, #071a45 45%, #040c22 100%); }
.v3-skin .band-dark.grid-bg { background-image: radial-gradient(120% 120% at 85% 20%, #123a92 0%, #071a45 45%, #040c22 100%) !important; }

/* ---------- Footer ---------- */
.v3-skin .site-footer, .v3-skin footer.footer { background: #040c22; }

/* ---------- Cart drawer ---------- */
.v3-skin .drawer { border-radius: 20px 0 0 20px; }
.v3-skin .drawer .btn { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) { .v3-skin *, .v3-skin *::before, .v3-skin *::after { scroll-behavior: auto !important; } }

/* Floating product vials (real photos, background removed) on area-tinted tiles */
.v3-skin .v3-cut-host { background: radial-gradient(75% 70% at 50% 58%, #ffffff 0%, #e9effa 62%, #e1e8f5 100%) !important; }
.v3-skin img.v3-cut { object-fit: contain !important; filter: drop-shadow(0 18px 18px rgba(11, 21, 49, .22)); }
.v3-skin .v3-cut-host { position: relative; overflow: hidden; }
.v3-skin img.v3-cut { position: absolute !important; top: 6% !important; left: 50% !important; right: auto !important; bottom: auto !important; height: 88% !important; width: auto !important; max-width: none !important; max-height: none !important; translate: -50% 0; margin: 0 !important; transform: none !important; }
.v3-skin img.v3-cut { background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; outline: 0 !important; }
.v3-skin .pdp-stage { background: radial-gradient(120% 90% at 50% 40%, #f0f1f3 0%, #e3e4e7 70%); }

/* Round 5: page heroes join the home's light tile language (owner approved the pastel research-area tiles) */
.v3-skin main > section:first-child.v3s-hero {
  background: radial-gradient(60% 120% at 85% 20%, #d9e6ff 0%, rgba(217, 230, 255, 0) 60%), linear-gradient(150deg, #e8f0ff 0%, #f4f7ff 50%, #f3f5f9 100%) !important;
  color: var(--ink);
  --ink: #0b1531; --ink-2: #44506b; --ink-3: #5a647d; --surface: #fff; --surface-2: #f8f9fc; --surface-sunk: #edf1f7;
  --line: #e1e6ef; --line-2: #edf0f5; --line-strong: #c9d1de; --accent-ink: #0a3fa3;
}
.v3-skin .v3s-hero::before, .v3-skin .v3s-hero::after { display: none !important; }
.v3-skin .v3s-hero h1, .v3-skin .v3s-hero .h1 { color: #0b1531; }
.v3-skin .v3s-hero .lede, .v3-skin .v3s-hero p { color: #44506b; }
.v3-skin .v3s-hero .crumb, .v3-skin .v3s-hero .crumb a { color: #5a647d; }
.v3-skin .v3s-hero .eyebrow { color: #1561dc; }
.v3-skin .v3s-hero .mol-bg, .v3-skin .v3s-hero canvas { opacity: .18; filter: invert(1) hue-rotate(180deg); }
.v3-skin .v3s-hero .btn:not(.btn-on-dark):not(.btn-ghost) { --btn-bg: #0b1531; --btn-fg: #fff; --btn-bg-hover: #0a3fa3; box-shadow: none; }
.v3-skin .v3s-hero .btn-on-dark { --btn-bg: rgba(255, 255, 255, .7); --btn-fg: #0b1531; --btn-bd: #e1e6ef; --btn-bg-hover: #fff; }
.v3-skin .v3s-hero .stat .num, .v3-skin .v3s-hero .num { color: #0b1531; }
.v3-skin .v3s-hero .card, .v3-skin .v3s-hero .card-flat { background: rgba(255, 255, 255, .85); border-color: transparent; }

/* Reserve the header that app.js injects (same fix as the home page): no drop after first paint */
body.v3-skin { padding-top: calc(var(--res-sale, 0px) + var(--res-head, 0px)); }
body.v3-skin:not(:has(> .asp-sale)) { --res-sale: 39px; }
body.v3-skin:not(:has(> .ticker)) { --res-head: 96px; }
@media (min-width: 600px) { body.v3-skin:not(:has(> .asp-sale)) { --res-sale: 45px; } }
@media (min-width: 834px) { body.v3-skin:not(:has(> .ticker)) { --res-head: 102px; } }
@media (min-width: 1024px) { body.v3-skin:not(:has(> .asp-sale)) { --res-sale: 47px; } }
.v3-skin .pass .lbl { color: #0a6b3d; }   /* 4.4 -> 5.8:1 on the pass tint */