/* ============================================================================
   IBRAHIM Fragrances — Version themes (V1 / V2 / V3)
   ---------------------------------------------------------------------------
   Three distinct design directions layered over styles/main.css.
   Activated by  <html data-v="v1|v2|v3">  (set by scripts/versions.js).

   Nothing here runs unless a data-v attribute is present, so the base
   design in main.css is left completely untouched.

   Typography uses system stacks only (no webfont licensing), matching the
   base site's approach — differentiation comes from face, scale and rhythm.
   ========================================================================= */

/* Shared: a token for photo tiles. The product photography is shot on black,
   so every theme keeps the image plate dark and themes the chrome around it. */
[data-v] .pcard-media,
[data-v] .cl-media,
[data-v] .pick-media,
[data-v] .disc-sample-media,
[data-v] .rv-media,
[data-v] .jr-media,
[data-v] .gift-media,
[data-v] .gallery-thumb {
  background: var(--media-bg, #000);
}

/* Shared fix: `.pick-card` is a <button>, and main.css never gives buttons a
   colour, so the bundle-builder product names inherit the UA default black and
   sit black-on-black. Present in the original build too; corrected for every
   version here rather than per theme. */
[data-v] .pick-card { color: inherit; }

/* ===========================================================================
   V1 — NOCTURNE
   Midnight emerald + platinum. Cool, architectural, restrained.
   Squared geometry, hairline rules, wide-tracked sans display.
   ======================================================================== */
[data-v="v1"] {
  --bg:            #05100d;
  --bg-2:          #071511;
  --panel:         #0a1a16;
  --panel-2:       #0d211b;
  --elevated:      #113029;
  --line:          rgba(214, 232, 225, 0.10);
  --line-strong:   rgba(214, 232, 225, 0.20);
  --gold-line:     rgba(196, 214, 201, 0.30);

  --ink:           #eef4f0;
  --muted:         #9db2a8;
  --faint:         #6f8579;

  --gold:          #c8d3c4;   /* platinum-sage */
  --gold-soft:     #e8efe6;
  --gold-deep:     #8fa393;

  --accent:        var(--gold);
  --accent-soft:   var(--gold-soft);
  --accent-deep:   #071511;

  --media-bg:      #030b09;
  --scrim-rgb:     5, 16, 13;

  --serif: 'Optima', 'Avenir Next', 'Futura', 'Gill Sans', 'Trebuchet MS', sans-serif;
  --sans:  'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --radius: 0px;
  --radius-lg: 0px;
  --shadow-1: 0 1px 0 rgba(214,232,225,0.06);
  --shadow-2: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
[data-v="v1"] .announce { background: #030b09; }
[data-v="v1"] .site-header { background: rgba(5, 16, 13, 0.6); }
[data-v="v1"] .site-header.is-scrolled { background: rgba(3, 11, 9, 0.92); }
[data-v="v1"] .site-footer { background: #030b09; }

/* ===========================================================================
   V4 — NOIR
   The Ledger layout (structure family s1, shared with V1) carrying the
   reference site's own palette, value for value. Colour is the only thing
   that differs from V1: type, geometry and layout are identical.
   ======================================================================== */
[data-v="v4"] {
  --bg:            #08080a;
  --bg-2:          #0c0c0f;
  --panel:         #111114;
  --panel-2:       #16161a;
  --elevated:      #1b1b20;
  --line:          rgba(255, 255, 255, 0.08);
  --line-strong:   rgba(255, 255, 255, 0.14);
  --gold-line:     rgba(199, 154, 78, 0.32);

  --ink:           #f4f1ea;
  --muted:         #b0aaa1;
  --faint:         #8a847a;

  --gold:          #c79a4e;
  --gold-soft:     #e4c583;
  --gold-deep:     #9c7838;

  --accent:        var(--gold);
  --accent-soft:   var(--gold-soft);
  --accent-deep:   #1a1a1f;

  --media-bg:      #000000;
  --scrim-rgb:     8, 8, 10;

  /* identical to V1 — only the colours above differ */
  --serif: 'Optima', 'Avenir Next', 'Futura', 'Gill Sans', 'Trebuchet MS', sans-serif;
  --sans:  'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --radius: 0px;
  --radius-lg: 0px;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-2: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
[data-v="v4"] .announce { background: #050506; }
[data-v="v4"] .site-header { background: rgba(8, 8, 10, 0.6); }
[data-v="v4"] .site-header.is-scrolled { background: rgba(6, 6, 8, 0.92); }
[data-v="v4"] .site-footer { background: #050506; }

/* --- shared by the Ledger family (V1 + V4) ------------------------------- */

/* Architectural display type: tracked-out, light weight, uppercase headings */
[data-s="s1"] h1, [data-s="s1"] h2, [data-s="s1"] h3,
[data-s="s1"] .hero-title, [data-s="s1"] .pcard-name {
  font-weight: 300;
  letter-spacing: 0.06em;
}
[data-s="s1"] .hero-title {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.05;
}
[data-s="s1"] .serif-em { font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.9em; }
[data-s="s1"] .pcard-name { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.14em; }
[data-s="s1"] .brand-word { letter-spacing: 0.5em; padding-left: 0.5em; font-weight: 300; }

/* Flat, bordered cards — no gradient fill */
[data-s="s1"] .product-card {
  background: transparent;
  border-color: var(--line);
}
[data-s="s1"] .product-card:hover { transform: none; border-color: var(--gold-line); }
[data-s="s1"] .pcard-media::after { background: none; }
[data-s="s1"] .product-card:hover .pcard-media img { transform: scale(1.03); filter: none; }

/* Squared, thin-ruled buttons */
[data-s="s1"] .btn { border-radius: 0; letter-spacing: 0.22em; font-weight: 500; padding: 16px 34px; }
[data-s="s1"] .btn--primary { background: var(--gold); color: var(--bg); border-color: var(--gold); }
[data-s="s1"] .btn--primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); }

/* ===========================================================================
   V2 — CONTACT SHEET
   Apothecary/clinical, in the register of a modern niche house rather than a
   heritage one. Cool pressed-paper grey, near-black ink, and deliberately NO
   decorative accent — the only colour on the page comes from the fragrance
   photography and the per-scent markers. Grotesque type throughout; not a
   serif anywhere, which is the sharpest available break from the reference.
   ======================================================================== */
[data-v="v2"] {
  --bg:            #e4e7e5;
  --bg-2:          #d7dbd9;
  --panel:         #ffffff;
  --panel-2:       #eef1ef;
  --elevated:      #ffffff;
  --line:          rgba(18, 22, 20, 0.16);
  --line-strong:   rgba(18, 22, 20, 0.34);
  --gold-line:     rgba(18, 22, 20, 0.42);

  --ink:           #121614;
  --muted:         #454e4b;
  --faint:         #545c59;

  /* the "accent" is functional black, not a colour statement */
  --gold:          #121614;
  --gold-soft:     #2f3a36;
  --gold-deep:     #000000;

  --accent:        var(--gold);
  --accent-soft:   var(--gold-soft);
  --accent-deep:   #ffffff;

  --media-bg:      #101312;
  --scrim-rgb:     228, 231, 229;

  --serif: 'Helvetica Neue', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --sans:  'Helvetica Neue', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --radius: 0px;
  --radius-lg: 0px;
  --shadow-1: none;
  --shadow-2: 0 30px 60px -34px rgba(18, 22, 20, 0.28);
}
[data-v="v2"] body { background: var(--bg); color: var(--ink); }
[data-v="v2"] .announce { background: #121614; color: #e4e7e5; border-bottom-color: transparent; }
[data-v="v2"] .announce a, [data-v="v2"] .announce-item { color: #e4e7e5; }
[data-v="v2"] .site-header { background: rgba(228, 231, 229, 0.82); }
[data-v="v2"] .site-header.is-scrolled { background: rgba(228, 231, 229, 0.96); border-bottom-color: var(--line); }
[data-v="v2"] .site-footer { background: #121614; color: #e4e7e5; border-top-color: transparent; }
[data-v="v2"] .site-footer .nav-link,
[data-v="v2"] .site-footer a { color: #b9c0bd; }
[data-v="v2"] .site-footer a:hover { color: #fff; }
[data-v="v2"] .site-footer h4, [data-v="v2"] .site-footer .brand-word { color: #e4e7e5; }

/* Dark chrome elements that must invert on a light ground */
[data-v="v2"] .mobile-nav { background: var(--bg); }
[data-v="v2"] .consent { background: #121614; color: #e4e7e5; }
[data-v="v2"] .drawer, [data-v="v2"] .search-panel { background: var(--bg); }

/* Grotesque display: tight, dense, negative tracking — the opposite of the
   reference's wide-tracked Didone. Headings are set as compact blocks. */
[data-v="v2"] .hero-title { font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; }
[data-v="v2"] h1, [data-v="v2"] h2, [data-v="v2"] h3 {
  font-weight: 600; letter-spacing: -0.032em; line-height: 1.02;
}
[data-v="v2"] .section-title { font-size: clamp(1.9rem, 4vw, 3.1rem); }
/* labels read as specimen data, not ornament */
[data-v="v2"] .eyebrow {
  color: var(--ink); letter-spacing: 0.06em; font-size: 0.66rem;
  font-weight: 600; text-transform: uppercase;
}
[data-v="v2"] .brand-word { letter-spacing: 0.16em; padding-left: 0.16em; font-weight: 600; }
[data-v="v2"] .serif-em { font-style: normal; font-weight: 600; }
[data-v="v2"] .nav-link { letter-spacing: 0.04em; font-size: 0.72rem; }

/* Flat specimen plates: hairline rule, no lift, no shadow, no rounding */
[data-v="v2"] .product-card {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
}
[data-v="v2"] .product-card:hover {
  transform: none;
  border-color: var(--ink);
  box-shadow: none;
}
[data-v="v2"] .pcard-media::after { background: none; }
[data-v="v2"] .pcard-name { font-weight: 600; letter-spacing: -0.02em; }
[data-v="v2"] .pcard-family {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em;
}
[data-v="v2"] .pcard-price { font-weight: 600; letter-spacing: -0.02em; }
[data-v="v2"] .pcard-price small { color: var(--faint); font-weight: 400; }
[data-v="v2"] .chip { border-radius: 0; font-weight: 500; }

[data-v="v2"] .btn { border-radius: 0; }
[data-v="v2"] .btn--primary { background: var(--ink); color: #f7f9f8; border-color: var(--ink); }
[data-v="v2"] .btn--primary:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
[data-v="v2"] .btn--ghost { color: var(--ink); border-color: var(--line-strong); }
[data-v="v2"] .btn--ghost:hover { background: var(--ink); color: #f7f9f8; border-color: var(--ink); }

/* Hero overlay scrims were tuned for a dark page — soften on ivory */
[data-v="v2"] .hero-arrow { background: rgba(255,255,255,0.75); color: var(--ink); border-color: var(--line-strong); }
[data-v="v2"] .chip, [data-v="v2"] .char-pill { border-color: var(--line-strong); color: var(--muted); }

/* ===========================================================================
   V3 — ROUGE ROYALE
   Opulent maximalism. Near-black with oxblood and antique gold.
   Oversized Didone display, soft curves, deep shadow, warm vignettes.
   ======================================================================== */
[data-v="v3"] {
  --bg:            #100507;
  --bg-2:          #16070a;
  --panel:         #1e0a0e;
  --panel-2:       #260d12;
  --elevated:      #33121a;
  --line:          rgba(240, 214, 190, 0.12);
  --line-strong:   rgba(240, 214, 190, 0.24);
  --gold-line:     rgba(206, 160, 88, 0.40);

  --ink:           #f7ece0;
  --muted:         #c4a99a;
  --faint:         #9c8071;

  --gold:          #c9a227;   /* antique gold */
  --gold-soft:     #ecd08a;
  --gold-deep:     #8c6a1c;

  --accent:        var(--gold);
  --accent-soft:   var(--gold-soft);
  --accent-deep:   #16070a;

  --media-bg:      #0a0305;

  --serif: 'Bodoni 72', 'Didot', 'Bodoni MT', 'Playfair Display', 'Hoefler Text', Georgia, serif;
  --sans:  'Futura', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --radius: 3px;
  --radius-lg: 18px;
  --shadow-1: 0 18px 40px -18px rgba(0, 0, 0, 0.85);
  --shadow-2: 0 50px 90px -30px rgba(0, 0, 0, 0.95);
}
[data-v="v3"] .announce { background: #2a0d12; color: var(--gold-soft); }
[data-v="v3"] .site-header { background: rgba(16, 5, 7, 0.62); }
[data-v="v3"] .site-header.is-scrolled { background: rgba(10, 3, 5, 0.94); }
[data-v="v3"] .site-footer { background: #0a0305; }

/* Dramatic Didone display, oversized and tight */
[data-v="v3"] .hero-title {
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 9vw, 7.5rem);
}
[data-v="v3"] h1, [data-v="v3"] h2 { font-weight: 400; letter-spacing: -0.015em; }
[data-v="v3"] .pcard-name { font-size: 1.7rem; }
[data-v="v3"] .eyebrow { color: var(--gold); letter-spacing: 0.3em; }
[data-v="v3"] .brand-word { letter-spacing: 0.4em; padding-left: 0.4em; }

/* Rich, rounded, deeply shadowed cards with a warm inner glow */
[data-v="v3"] .product-card {
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  box-shadow: var(--shadow-1);
}
[data-v="v3"] .product-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-line);
  box-shadow: var(--shadow-2);
}
[data-v="v3"] .pcard-media::after {
  background: radial-gradient(80% 60% at 50% 40%, transparent, rgba(42, 13, 18, 0.55));
}
[data-v="v3"] .product-card:hover .pcard-media img { transform: scale(1.08) translateY(-5px); filter: saturate(1.12) brightness(1.06); }

[data-v="v3"] .btn { border-radius: 999px; padding: 16px 34px; letter-spacing: 0.2em; }
[data-v="v3"] .btn--primary {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #2a0d12; border-color: transparent;
}
[data-v="v3"] .btn--primary:hover { filter: brightness(1.08); }

/* ===========================================================================
   Hero display line
   ---------------------------------------------------------------------------
   main.css hard-codes a warm-gold gradient on `.hero-title .l2` (#f3ddab →
   --gold). That is baked to the original palette, so each theme restates it.
   The hero sits over dark photography in every version, so the type stays
   light here even in the light theme.
   ======================================================================== */
[data-v="v1"] .hero-title .l2 {
  /* uppercase + the theme's own tracking would compound with the base
     0.14em and overflow the viewport, so this line restates both */
  font-size: clamp(2.4rem, 7.2vw, 5rem);
  letter-spacing: 0.05em;
  background: linear-gradient(180deg, #ffffff, var(--gold));
  -webkit-background-clip: text; background-clip: text;
}
[data-v="v2"] .hero-title .l2 {
  /* the carousel puts the display line on the ivory panel, not on the photo,
     so this gradient has to stay dark enough to read on a light ground */
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-deep));
  -webkit-background-clip: text; background-clip: text;
}

/* V2 hero: main.css fades the photo into `var(--bg)` and then into an opaque
   near-black. With an ivory --bg that mixes to a muddy grey wash over the
   bottle, so the light theme restates the scrim as ivory → transparent. */
[data-v="v2"] .hero-carousel .hero-overlay {
  background:
    linear-gradient(90deg,
      var(--bg) 30%,
      rgba(228, 231, 229, 0.72) 37%,
      rgba(228, 231, 229, 0.22) 48%,
      transparent 62%),
    linear-gradient(0deg, rgba(228, 231, 229, 0.32), transparent 34%);
}
[data-v="v2"] .hero .hero-overlay {
  background:
    linear-gradient(90deg,
      rgba(228, 231, 229, 0.95) 0%,
      rgba(228, 231, 229, 0.72) 34%,
      rgba(228, 231, 229, 0.18) 62%,
      rgba(228, 231, 229, 0.55) 100%),
    linear-gradient(0deg, rgba(228, 231, 229, 0.88), transparent 42%);
}
@media (max-width: 760px) {
  [data-v="v2"] .hero-carousel .hero-overlay {
    background: linear-gradient(0deg,
      var(--bg) 10%,
      rgba(228, 231, 229, 0.6) 34%,
      rgba(228, 231, 229, 0.18) 62%,
      transparent 88%);
  }
}
/* hero body copy is hard-coded to a pale grey for the dark original */
[data-v="v2"] .hero-copy { color: var(--muted); }

/* main.css assumes the accent is a light gold and paints near-black text on
   it (#17110a). V1's platinum and V3's gold keep that working, but V2's
   rouge is mid-dark, so anything sitting on the accent flips to light. */
[data-v="v2"] .chip.is-active,
[data-v="v2"] .cart-badge,
[data-v="v2"] .skip-link,
[data-v="v2"] .pick-card.is-selected .pick-check {
  color: #f7f9f8;
}

/* Inputs and subtle panels are translucent white (rgba(255,255,255,0.02–0.08))
   so they read as a lift on the dark original. On ivory they vanish, so the
   light theme gives them a real surface and a visible edge. */
[data-v="v2"] .news-input,
[data-v="v2"] .cart-code input,
[data-v="v2"] .pdp-notify input,
[data-v="v2"] .reviews-form input,
[data-v="v2"] .reviews-form textarea,
[data-v="v2"] .co-upsell-row select,
[data-v="v2"] .field input,
[data-v="v2"] .field select,
[data-v="v2"] .field textarea {
  background: #fff;
  border-color: var(--line-strong);
  color: var(--ink);
}
[data-v="v2"] .news-input::placeholder,
[data-v="v2"] .field input::placeholder,
[data-v="v2"] .field textarea::placeholder { color: var(--faint); }

[data-v="v2"] .btn--ghost { background: rgba(255, 255, 255, 0.6); }
[data-v="v2"] .icon-btn:hover { background: rgba(38, 30, 24, 0.06); }
[data-v="v2"] .acct-note,
[data-v="v2"] .ship-progress { background: rgba(38, 30, 24, 0.04); }
[data-v="v2"] .ship-bar,
[data-v="v2"] .quiz-progress { background: rgba(38, 30, 24, 0.12); }

/* --- V2 legibility -------------------------------------------------------
   The base greys are tuned for light-on-dark. Inverted, --faint drops to a
   3.5:1 ratio on ivory, so the secondary tones are darkened to clear 4.5:1. */
[data-v="v2"] {
  --faint:     #545c59;
  --gold-soft: #2f3a36;   /* link/price tone, ~9:1 on the paper grey */
}

/* The footer, consent bar and mobile drawer are dark surfaces sitting inside
   a light page, so inside them the greys have to invert back. */
[data-v="v2"] .site-footer,
[data-v="v2"] .consent {
  --ink:   #e4e7e5;
  --muted: #c2c9c6;
  --faint: #98a19e;
}
/* …but V2's primary button is `background: var(--ink)`, so on those dark
   surfaces the inverted --ink would make it light-on-light. Restate both. */
[data-v="v2"] .site-footer .btn--primary,
[data-v="v2"] .consent .btn--primary {
  background: #e4e7e5; color: #121614; border-color: #e4e7e5;
}
[data-v="v2"] .site-footer .btn--primary:hover,
[data-v="v2"] .consent .btn--primary:hover {
  background: var(--gold-soft); border-color: var(--gold-soft); color: #fff;
}
[data-v="v2"] .site-footer .btn--ghost,
[data-v="v2"] .consent .btn--ghost {
  background: transparent; color: #e4e7e5; border-color: rgba(228, 231, 229, 0.34);
}
[data-v="v2"] .site-footer .btn--ghost:hover,
[data-v="v2"] .consent .btn--ghost:hover {
  background: rgba(228, 231, 229, 0.12); color: #fff; border-color: rgba(228, 231, 229, 0.5);
}
[data-v="v2"] .consent p a { color: #cfe0d9; }

/* two body-copy rules hard-code a pale grey (#cfc9bf) for the dark original */
[data-v="v2"] .pdp-desc { color: var(--muted); }

/* Per-fragrance accents (amber, rose, ocean blue…) are pale tints chosen to
   glow on black; as small text on ivory they fall to ~1.6:1. Mixing each one
   toward the ink keeps the fragrance's hue while making it readable. */
[data-v="v2"] .pcard-family,
[data-v="v2"] .pdp-family,
[data-v="v2"] .hero-now,
[data-v="v2"] .gift-label,
[data-v="v2"] .offer-save,
[data-v="v2"] .quiz-result-fam,
[data-v="v2"] .pdp-banner-tag {
  color: color-mix(in srgb, var(--accent) 60%, #121614);
}

/* Newsletter band: a blurred photo under a `var(--bg)` → near-black wash.
   On ivory that mix greys out the whole band, so it becomes an ivory wash. */
[data-v="v2"] .news-bg img { opacity: 0.16; }
[data-v="v2"] .news-bg::after {
  background: linear-gradient(90deg, var(--bg) 20%, rgba(228, 231, 229, 0.72));
}
[data-v="v3"] .hero-title .l2 {
  font-size: clamp(3.4rem, 11vw, 8rem);
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fbeec4, var(--gold));
  -webkit-background-clip: text; background-clip: text;
}

/* ===========================================================================
   Version switcher UI  (shared)
   ======================================================================== */
.vswitch {
  position: fixed; z-index: 900;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.vswitch-panel {
  display: flex; align-items: stretch; gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(14, 14, 16, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.7);
}
.vswitch-label {
  display: flex; align-items: center;
  padding: 0 10px 0 12px;
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); white-space: nowrap;
}
.vswitch-btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 9px 15px; border-radius: 999px;
  background: transparent; color: rgba(255, 255, 255, 0.72);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease;
  line-height: 1;
}
.vswitch-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.10); }
.vswitch-btn[aria-pressed="true"] { background: #fff; color: #111; }
.vswitch-name {
  margin-top: 7px; text-align: center;
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
/* On the light theme the switcher needs dark-on-light treatment */
[data-v="v2"] .vswitch-panel { background: rgba(255, 255, 255, 0.9); border-color: rgba(38, 30, 24, 0.18); }
[data-v="v2"] .vswitch-label { color: rgba(38, 30, 24, 0.5); }
[data-v="v2"] .vswitch-btn { color: rgba(38, 30, 24, 0.68); }
[data-v="v2"] .vswitch-btn:hover { color: #121614; background: rgba(38, 30, 24, 0.08); }
[data-v="v2"] .vswitch-btn[aria-pressed="true"] { background: #121614; color: #e4e7e5; }
[data-v="v2"] .vswitch-name { color: rgba(38, 30, 24, 0.6); text-shadow: none; }

@media (max-width: 720px) {
  .vswitch { right: 10px; bottom: 10px; }
  .vswitch-label { display: none; }
  .vswitch-btn { padding: 9px 12px; font-size: 0.66rem; }
  .vswitch-name { display: none; }
}
@media print { .vswitch { display: none; } }
