/* =============================================================================
   VOLVO BRAND LAYER
   Loaded additively after theme.css when brand_make = "volvo".
   EVERY selector MUST be scoped under .brand-volvo so it can never affect other
   brands or the generic look. Mirrors the structure of brands/bmw.css, restyled
   to the Volvo Cars brand standards (Normes de marketing des concessionnaires
   2021 — sections C4 typographie, C5/C6 palette numérique) : Scandinavian
   minimalism, Volvo Novum, greys dominate, digital blue used only as an accent
   (CTA / icons / hovers / selected), light-weight sentence-case headings, pill
   buttons, generous whitespace.

   Box style variants combine here as:  .brand-volvo .box-style-luxury { … }
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. WEBFONTS — Volvo Novum (official Volvo Cars brand typeface)
   Self-hosted .ttf in assets/fonts/. Path is relative to THIS file
   (assets/css/brands/volvo.css) → ../../fonts/. Weights map the Volvo Novum
   family onto the numeric weights used throughout this brand layer
   (300 Light, 350 SemiLight, 400 Regular, 500 Medium, 700 Bold) plus italics.
   ----------------------------------------------------------------------------- */
@font-face {
    font-family: 'Volvo Novum';
    src: url('../../fonts/VolvoNovum-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Volvo Novum';
    src: url('../../fonts/VolvoNovum-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Volvo Novum';
    src: url('../../fonts/VolvoNovum-SemiLight.ttf') format('truetype');
    font-weight: 350;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Volvo Novum';
    src: url('../../fonts/VolvoNovum-SemiLightItalic.ttf') format('truetype');
    font-weight: 350;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Volvo Novum';
    src: url('../../fonts/VolvoNovum-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Volvo Novum';
    src: url('../../fonts/VolvoNovum-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Volvo Novum';
    src: url('../../fonts/VolvoNovum-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Volvo Novum';
    src: url('../../fonts/VolvoNovum-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Volvo Novum';
    src: url('../../fonts/VolvoNovum-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Volvo Novum';
    src: url('../../fonts/VolvoNovum-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* -----------------------------------------------------------------------------
   1. TOKENS
   Volvo design tokens (same names as bmw.css so the ported component CSS works
   unchanged) PLUS mappings onto the theme's tokens (so base theme components
   render Volvo-styled).
   ----------------------------------------------------------------------------- */
.brand-volvo {
    /* ---- Volvo C6 digital palette (Normes Volvo Cars Canada 2021, section C6) ----
       Exact swatch values, mapped onto bmw.css's variable names (darkest→lightest). */
    --white: #ffffff;
    --black: #161618;      /* Cod Gray — near-black (strong text) */
    --grey-900: #333333;   /* Dark Gray */
    --grey-700: #414146;   /* Ship Gray — body text */
    --grey-500: #6b6b6b;   /* Light Gray — muted (darkened from #797979 for WCAG AA: 5.1:1 on white) */
    --grey-400: #999999;   /* Medium Gray */
    --grey-300: #e7e7e7;   /* Mercury — hairlines */
    --grey-200: #ececec;   /* Background */
    --grey-100: #f0f0f0;   /* Steel */
    --grey-50:  #f6f6f6;   /* Wild Sand */

    --blue: #161618;       /* Volvo digital blue — accent ONLY (CTA / icons / hover / selected) -black */
    --blue-dark: #000;  /* Color Sep — darker blue -black */
    --blue-700: #333;   /* interpolated mid blue (hover) -black */ 

    /* ---- Semantic (component CSS reads these) ---- */
    --ink: var(--grey-700);        /* Ship Gray #414146 — body */
    --ink-strong: var(--black);    /* Cod Gray #161618 — headings/strong */
    --ink-soft: var(--grey-500);   /* Light Gray #797979 — muted */
    --line: var(--grey-300);       /* Mercury #E7E7E7 — hairlines */
    --bg: var(--white);
    --bg-alt: var(--grey-50);      /* Wild Sand #F6F6F6 */
    --accent: var(--blue);

    /* ---- Type scale ---- */
    --font: "Volvo Novum", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --fs-display: clamp(2.9rem, 6.6vw, 6rem);
    --fs-h1: clamp(2.3rem, 4.6vw, 4.1rem);
    --fs-h2: clamp(1.85rem, 3.3vw, 3rem);
    --fs-h3: clamp(1.3rem, 1.9vw, 1.85rem);
    --fs-lead: clamp(1.05rem, 1.35vw, 1.3rem);
    --fs-body: 1.0625rem;
    --fs-small: 0.875rem;
    --fs-eyebrow: 0.78rem;

    /* ---- Layout ---- */
    --maxw: 1480px;
    --gutter: clamp(20px, 5vw, 88px);
    --section-y: clamp(64px, 8vw, 132px);
    --radius: 0px;            /* clean rectangular surfaces */
    --radius-ui: 999px;       /* pills for buttons/controls */
    --shadow-card: 0 1px 2px rgba(22,22,24,.04), 0 16px 36px -24px rgba(22,22,24,.18);
    --shadow-float: 0 22px 50px -28px rgba(22,22,24,.30);
    --ease: cubic-bezier(.2,.7,.2,1);
    --header-h: 72px;

    /* ---- Tracking ---- */
    --tracking-eyebrow: .25em;   /* Volvo Novum Light subtitles: +250 */

    /* ---- Mappings onto the THEME tokens (base components inherit the Volvo look) ---- */
    --brand-primary: var(--ink-strong);   /* dark — primary buttons (blue reserved for links/selected) */
    --brand-primary-rgb: 22, 22, 24;
    --brand-accent: var(--blue);
    --brand-accent-hover: var(--blue-dark);
    --brand-accent-rgb: 22, 22, 24;
    --brand-secondary: var(--black);

    --brand-text: var(--ink-strong);
    --brand-text-secondary: var(--ink);
    --brand-text-muted: var(--ink-soft);
    --brand-border: var(--line);

    --brand-dark: var(--black);
    --brand-dark-rgb: 22, 22, 24;
    --brand-bg-alt: var(--bg-alt);

    --font-heading: var(--font);
    --font-body: var(--font);
    --heading-weight: 500;   /* Volvo headings use Medium, not Bold */

    /* Clean, minimal radii across the base UI; pill buttons */
    --radius-sm: 0px;
    --radius-md: 2px;
    --radius-lg: 2px;
    --radius-xl: 4px;

    /* Volvo button treatment — pill, sentence case */
    --btn-letter-spacing: 0.02em;
    --btn-font-size: 15px;
    --btn-border-radius: 999px;
}

/* -----------------------------------------------------------------------------
   1b. GLOBAL controls (every Volvo page, not only luxury boxes)
   Primary buttons = dark (Cod Gray); the digital blue stays for links / selected
   states only. Covers component-rendered pages too (inventory SRP/VDP, forms),
   since the base theme ties .btn-primary to the accent colour.
   ----------------------------------------------------------------------------- */
.brand-volvo .btn-primary,
.brand-volvo .btn.btn-primary,
.brand-volvo .availability-btn {
    background-color: var(--ink-strong);
    border-color: var(--ink-strong);
    color: var(--white);
}
.brand-volvo .btn-primary:hover,
.brand-volvo .btn-primary:focus,
.brand-volvo .btn.btn-primary:hover,
.brand-volvo .availability-btn:hover {
    background-color: #000;
    border-color: #000;
    color: var(--white);
}
.brand-volvo .btn-outline-primary {
    color: var(--accent);
    border-color: var(--accent);
}
.brand-volvo .btn-outline-primary:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

/* Footer logo wordmark — white on dark footer (#161618).
   The fallback span renders inside <a> whose UA/theme default would land on
   #466dca (accent), giving only 3.7:1 on the dark background (WCAG AA fail).
   White = 16.75:1 on #161618; also correct per Volvo brand (white wordmark on dark). */
.brand-volvo .footer__logo-text {
    color: var(--white);
    font-family: var(--font);
    font-weight: 300;
    font-size: 1.2rem;
    letter-spacing: .04em;
    text-decoration: none;
}
.brand-volvo .footer__logo a:hover .footer__logo-text { color: var(--white); }

/* -----------------------------------------------------------------------------
   2. COMPONENT REFINEMENTS
   Volvo-specific component/layout treatments, each scoped under .brand-volvo
   .box-style-luxury. Same component vocabulary as bmw.css.
   ----------------------------------------------------------------------------- */
/* --- Shared maquette primitives (only inside luxury boxes) --- */
.brand-volvo .box-style-luxury .eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 300;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    gap: .7em;
}
.brand-volvo .box-style-luxury .eyebrow.muted { color: var(--ink-soft); }
/* No decorative bar — Volvo eyebrows are pure uppercase tracking. */
.brand-volvo .box-style-luxury .h2 {
    font-size: var(--fs-h2);
    text-transform: none;
    font-weight: 300;
    line-height: 1.08;
    color: var(--ink-strong);
    letter-spacing: -0.01em;
}
.brand-volvo .box-style-luxury .lead { font-size: var(--fs-lead); color: var(--ink); font-weight: 300; line-height: 1.55; }
.brand-volvo .box-style-luxury .muted { color: var(--ink-soft); }

.brand-volvo .box-style-luxury .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: clamp(28px, 4vw, 56px);
}
.brand-volvo .box-style-luxury .section-head .titles { max-width: 760px; }
.brand-volvo .box-style-luxury .section-head .eyebrow { margin-bottom: 18px; }
.brand-volvo .box-style-luxury .section-head .sub { margin-top: 16px; max-width: 56ch; }

/* --- value-props (luxury): feature strip --- */
.brand-volvo .box-style-luxury .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.brand-volvo .box-style-luxury .feat-grid .feat { background: var(--white); padding: 30px; }
.brand-volvo .box-style-luxury .feat-grid .feat .ico { width: 38px; height: 38px; color: var(--ink-strong); margin-bottom: 14px; }
.brand-volvo .box-style-luxury .feat-grid .feat b { display: block; color: var(--ink-strong); font-weight: 500; margin-bottom: 6px; }
.brand-volvo .box-style-luxury .feat-grid .feat p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 760px) {
    .brand-volvo .box-style-luxury .feat-grid { grid-template-columns: 1fr; }
}

/* --- Shared: buttons (Volvo pill) --- */
.brand-volvo .box-style-luxury .btn {
    --bg: var(--ink-strong); --fg: var(--white);   /* dark fill — not blue (per volvocars.com) */
    display: inline-flex; align-items: center; justify-content: center; gap: .7em;
    padding: .9em 1.9em; background: var(--bg); color: var(--fg);
    font-size: .95rem; font-weight: 500; letter-spacing: .02em; text-transform: none;
    border: 1.5px solid transparent; border-radius: 999px; position: relative;
    transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
    white-space: nowrap; cursor: pointer;
}
.brand-volvo .box-style-luxury .btn .ico { width: 1.05em; height: 1.05em; transition: transform .35s var(--ease); }
.brand-volvo .box-style-luxury .btn:hover { background: #000; border-color: #000; transform: translateY(-1px); box-shadow: var(--shadow-float); }
.brand-volvo .box-style-luxury .btn:hover .ico { transform: translateX(4px); }
.brand-volvo .box-style-luxury .btn--ghost { --bg: transparent; --fg: var(--ink-strong); border-color: var(--ink-strong); }
.brand-volvo .box-style-luxury .btn--ghost:hover { background: var(--ink-strong); color: var(--white); border-color: var(--ink-strong); box-shadow: none; }
.brand-volvo .box-style-luxury .btn--sm { padding: .7em 1.4em; font-size: .85rem; }
.brand-volvo .box-style-luxury .btn--on-dark.btn--ghost { --fg: var(--white); border-color: rgba(255,255,255,.6); }
.brand-volvo .box-style-luxury .btn--on-dark.btn--ghost:hover { background: var(--white); color: var(--ink-strong); border-color: var(--white); }

/* --- Shared: accent rule, section tones, badges --- */
.brand-volvo .box-style-luxury .m-rule { height: 2px; width: 56px; background: var(--ink-strong); }
.brand-volvo .box-style-luxury .section--alt { background: var(--bg-alt); }
.brand-volvo .box-style-luxury .badge { display: inline-flex; align-items: center; gap: .5em; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .45em .9em; border-radius: 999px; background: var(--ink-strong); color: var(--white); }
.brand-volvo .box-style-luxury .badge--new { background: var(--ink-strong); }
.brand-volvo .box-style-luxury .badge--blue { background: var(--accent); }

/* --- testimonials (luxury): review cards --- */
.brand-volvo .box-style-luxury .bmw-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); }
.brand-volvo .box-style-luxury .bmw-rv { background: var(--white); border: 1px solid var(--line); padding: 28px 26px 24px; display: flex; flex-direction: column; gap: 14px; transition: box-shadow .35s, transform .35s, border-color .3s; }
.brand-volvo .box-style-luxury .bmw-rv:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); border-color: var(--ink-strong); }
.brand-volvo .box-style-luxury .bmw-rv__top { display: flex; align-items: center; justify-content: space-between; }
.brand-volvo .box-style-luxury .bmw-rv__stars { display: flex; gap: 2px; color: var(--accent); }
.brand-volvo .box-style-luxury .bmw-rv__source { display: flex; align-items: center; opacity: .7; }
.brand-volvo .box-style-luxury .bmw-rv__quote { font-size: .96rem; color: var(--ink); line-height: 1.65; margin: 0; flex: 1; font-weight: 300; }
.brand-volvo .box-style-luxury .bmw-rv__quote::before { content: '\201C'; font-size: 1.4rem; color: var(--accent); line-height: 0; vertical-align: -.3em; margin-right: 3px; }
.brand-volvo .box-style-luxury .bmw-rv__author { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.brand-volvo .box-style-luxury .bmw-rv__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.brand-volvo .box-style-luxury .bmw-rv__avatar--init { background: linear-gradient(150deg, var(--accent), var(--blue-dark)); color: #fff; display: grid; place-items: center; font-size: 1rem; font-weight: 300; border-radius: 50%; }
.brand-volvo .box-style-luxury .bmw-rv__name { display: block; font-weight: 500; color: var(--ink-strong); font-size: .95rem; }
.brand-volvo .box-style-luxury .bmw-rv__role { font-size: .78rem; color: var(--ink-soft); letter-spacing: .04em; margin-top: 2px; }
@media (max-width: 900px) { .brand-volvo .box-style-luxury .bmw-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .brand-volvo .box-style-luxury .bmw-reviews { grid-template-columns: 1fr; } }

/* --- cta-cards (luxury): culture/perk grid --- */
.brand-volvo .box-style-luxury .culture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); margin-top: 4px; }
.brand-volvo .box-style-luxury .perk { background: var(--white); padding: 32px 28px; transition: box-shadow .35s, transform .35s; }
.brand-volvo .box-style-luxury .perk:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.brand-volvo .box-style-luxury .perk .perk-ico { width: 44px; height: 44px; display: grid; place-items: center; background: var(--bg-alt); color: var(--accent); margin-bottom: 18px; }
.brand-volvo .box-style-luxury .perk h3 { font-size: 1.05rem; font-weight: 500; color: var(--ink-strong); margin-bottom: 8px; }
.brand-volvo .box-style-luxury .perk p { font-size: .9rem; color: var(--ink-soft); }
@media (max-width: 900px) { .brand-volvo .box-style-luxury .culture-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .brand-volvo .box-style-luxury .culture-grid { grid-template-columns: 1fr; } }

/* --- split-cta (luxury): intro band --- */
.brand-volvo .box-style-luxury .intro-band { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,64px); align-items: center; }
.brand-volvo .box-style-luxury .intro-band .intro-media { aspect-ratio: 5/4; position: relative; }
.brand-volvo .box-style-luxury .intro-band .intro-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .brand-volvo .box-style-luxury .intro-band { grid-template-columns: 1fr; } }

/* --- accordion (luxury): FAQ --- */
.brand-volvo .box-style-luxury .bmw-faq__item { border-bottom: 1px solid var(--line); }
.brand-volvo .box-style-luxury .bmw-faq__item:first-child { border-top: 1px solid var(--line); }
.brand-volvo .box-style-luxury .bmw-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; cursor: pointer; list-style: none; font-size: var(--fs-body); font-weight: 500; color: var(--ink-strong); letter-spacing: 0; user-select: none; transition: color .2s; }
.brand-volvo .box-style-luxury .bmw-faq__q::-webkit-details-marker { display: none; }
.brand-volvo .box-style-luxury .bmw-faq__q:hover { color: var(--accent); }
.brand-volvo .box-style-luxury .bmw-faq__chevron { flex-shrink: 0; color: var(--accent); transition: transform .3s var(--ease); }
.brand-volvo .box-style-luxury .bmw-faq__item[open] .bmw-faq__chevron { transform: rotate(180deg); }
.brand-volvo .box-style-luxury .bmw-faq__a { padding: 0 0 1.4rem; color: var(--ink-soft); line-height: 1.75; font-weight: 300; font-size: var(--fs-body); }
.brand-volvo .box-style-luxury .bmw-faq__a p:last-child { margin-bottom: 0; }
.brand-volvo .box-style-luxury .bmw-faq__a strong { font-weight: 500; color: var(--ink-strong); }
.brand-volvo .box-style-luxury .bmw-faq__a ul, .brand-volvo .box-style-luxury .bmw-faq__a ol { padding-left: 1.5rem; margin-bottom: 1em; }
.brand-volvo .box-style-luxury .bmw-faq__a li { margin-bottom: .4em; }

/* --- geo-stats (luxury): trust figures ---
   Section has bg_style:brand → theme.css .bg-brand gives it a dark #161618 background.
   Tighten section padding so it reads as a compact band, not an oversized block. */
.brand-volvo .box-style-luxury.geo-stats-section {
    padding-block: clamp(32px, 4vw, 56px);  /* tighter than default section-y */
}
.brand-volvo .box-style-luxury.geo-stats-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Visible eyebrow heading above the stat bar.
   On dark bg-brand (#161618): white = 16.75:1 ✓ */
.brand-volvo .box-style-luxury .lead-trust__eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 300;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: rgba(255,255,255,.6);   /* soft white — decorative label, not body text; ≥3:1 large */
    margin: 0 0 clamp(16px, 2vw, 28px);
    text-align: center;
}
/* Stat bar: horizontally centered, baseline-aligned */
.brand-volvo .box-style-luxury .lead-trust {
    display: flex;
    gap: clamp(28px, 5vw, 64px);
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    margin-top: 0;    /* eyebrow above handles spacing */
}
.brand-volvo .box-style-luxury .lead-trust .t {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.brand-volvo .box-style-luxury .lead-trust .t .n { font-size: 2rem; font-weight: 300; color: var(--ink-strong); }
.brand-volvo .box-style-luxury .lead-trust .t .l { font-size: .78rem; color: var(--ink-soft); letter-spacing: .04em; }
/* On dark brand-bg sections (bg_style:brand → .bg-brand → #161618 background).
   Value: #ececec on #161618 = 12.4:1 ✓   Label: rgba(255,255,255,.75) ≈ #bfbfbf on #161618 = 9.3:1 ✓ */
.brand-volvo .box-style-luxury.bg-brand .lead-trust .t .n { color: var(--grey-200); }
.brand-volvo .box-style-luxury.bg-brand .lead-trust .t .l { color: rgba(255,255,255,.75); }

/* --- geo-takeaways (luxury): SEO two-column block ---
   The luxury markup emits .seo-grid2 directly inside .container (no .seo-block wrapper),
   so we scope both with and without the .seo-block intermediate. */
.brand-volvo .box-style-luxury .seo-grid2,
.brand-volvo .box-style-luxury .seo-block .seo-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 64px); }
.brand-volvo .box-style-luxury .seo-grid2 .seo-item h3,
.brand-volvo .box-style-luxury .seo-block .seo-grid2 .seo-item h3 { font-size: var(--fs-h3); font-weight: 400; color: var(--ink-strong); margin-bottom: 10px; letter-spacing: -.01em; }
.brand-volvo .box-style-luxury .seo-grid2 .seo-item p,
.brand-volvo .box-style-luxury .seo-block .seo-grid2 .seo-item p { color: var(--ink-soft); line-height: 1.75; max-width: 52ch; font-weight: 300; }
.brand-volvo .box-style-luxury .seo-grid2 .seo-more,
.brand-volvo .box-style-luxury .seo-block .seo-grid2 .seo-more { display: none; }
.brand-volvo .box-style-luxury .seo-grid2.expanded .seo-more,
.brand-volvo .box-style-luxury .seo-block .seo-grid2.expanded .seo-more { display: block; }
/* geo-takeaway item layout: icon circle + content stack, matching BMW maquette structure.
   Volvo treatment: thin 1px hairline border, light bg-alt fill, blue accent stroke icon —
   no heavy shadow, flat Scandinavian style. */
.brand-volvo .box-style-luxury .geo-takeaway {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.brand-volvo .box-style-luxury .geo-takeaway__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-alt);          /* #f6f6f6 — light, flat */
    border: 1px solid var(--line);      /* 1px Mercury hairline */
    color: var(--accent);               /* #466dca — blue stroke icon */
}
.brand-volvo .box-style-luxury .geo-takeaway__content { flex: 1; }
.brand-volvo .box-style-luxury .geo-takeaway__title {
    display: block;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--ink-strong);
    margin-bottom: 6px;
}
.brand-volvo .box-style-luxury .geo-takeaway__description {
    font-size: .92rem;
    color: var(--ink-soft);
    line-height: 1.7;
    margin: 0;
    font-weight: 300;
}

/* Inline text link with a left-to-right underline reveal on hover.
   Use --blue-dark (#145081) instead of --accent (#466dca): on light section
   backgrounds (bg-default → white, bg-alt → #f6f6f6, bg-light → ~#efefef) the
   digital blue #466dca falls to 4.24:1 (WCAG AA fail for small/normal text).
   #145081 on white = 7.05:1, on #f6f6f6 = 6.68:1, on #efefef = 6.42:1 — all pass.
   The underline animation and hover/focus states keep --blue-dark for consistency. */
.brand-volvo .box-style-luxury .link { display: inline-flex; align-items: center; gap: .55em; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--blue-dark); position: relative; padding-bottom: 4px; }
.brand-volvo .box-style-luxury .link:hover,
.brand-volvo .box-style-luxury .link:focus { text-decoration: none; color: var(--blue-dark); }
.brand-volvo .box-style-luxury .link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--blue-dark); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.brand-volvo .box-style-luxury .link:hover::after { transform: scaleX(1); }
.brand-volvo .box-style-luxury .link .ico { width: 1em; height: 1em; transition: transform .35s var(--ease); }
.brand-volvo .box-style-luxury .link:hover .ico { transform: translateX(4px); }
.brand-volvo .box-style-luxury .link.on-dark { color: var(--white); }
/* seo-toggle "Read more" button — reset browser button chrome so it renders
   as a plain text link (identical to .link treatment above). */
.brand-volvo .box-style-luxury button.seo-toggle,
.brand-volvo .box-style-luxury .seo-toggle {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
}
@media (max-width: 720px) {
    .brand-volvo .box-style-luxury .seo-grid2,
    .brand-volvo .box-style-luxury .seo-block .seo-grid2 { grid-template-columns: 1fr; }
}

/* --- dealer-location (luxury): dark section + hours card ---
   !important needed to override theme.css `.bg-default { background-color: … !important }` */
.brand-volvo .box-style-luxury.dloc { background-color: var(--ink-strong) !important; color: var(--grey-200); }
.brand-volvo .box-style-luxury.dloc .h2, .brand-volvo .box-style-luxury.dloc h2, .brand-volvo .box-style-luxury.dloc h3 { color: var(--white); }
.brand-volvo .box-style-luxury .bmw-dloc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.brand-volvo .box-style-luxury .bmw-dloc-name { font-size: var(--fs-h3); font-weight: 400; color: var(--white); text-transform: none; letter-spacing: 0; margin-bottom: 22px; }
.brand-volvo .box-style-luxury .bmw-dloc-info .footer-contact { display: grid; gap: 12px; margin-top: 0; margin-bottom: 28px; font-size: .92rem; }
.brand-volvo .box-style-luxury .bmw-dloc-info .footer-contact a { display: flex; gap: .7em; color: var(--grey-300); transition: color .25s; }
.brand-volvo .box-style-luxury .bmw-dloc-info .footer-contact a:hover { color: var(--white); }
.brand-volvo .box-style-luxury .bmw-dloc-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.brand-volvo .box-style-luxury .bmw-hours-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); padding: 26px 28px; }
.brand-volvo .box-style-luxury .bmw-hours-head { display: flex; align-items: center; gap: 10px; color: var(--accent); font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; }
.brand-volvo .box-style-luxury .bmw-hours-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 16px; }
.brand-volvo .box-style-luxury .bmw-hours-tab { padding: 8px 16px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); border-bottom: 2px solid transparent; transition: color .25s, border-color .25s; }
.brand-volvo .box-style-luxury .bmw-hours-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.brand-volvo .box-style-luxury .bmw-hours-tab:hover { color: rgba(255,255,255,.85); }
.brand-volvo .box-style-luxury .bmw-hours-panel { display: none; }
.brand-volvo .box-style-luxury .bmw-hours-panel.is-active { display: block; }
.brand-volvo .box-style-luxury .bmw-hours-panel ul { list-style: none; padding: 0; margin: 0; }
.brand-volvo .box-style-luxury .bmw-hours-panel li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: var(--fs-small); }
.brand-volvo .box-style-luxury .bmw-hours-panel li:last-child { border-bottom: none; padding-bottom: 0; }
.brand-volvo .box-style-luxury .bmw-hours-panel li span:first-child { color: var(--grey-200); font-weight: 400; }
.brand-volvo .box-style-luxury .bmw-hours-panel li span:last-child { color: var(--grey-200); }
.brand-volvo .box-style-luxury .bmw-hours-note { font-size: .8rem; color: rgba(255,255,255,.45); font-style: italic; margin-top: 12px; }
.brand-volvo .box-style-luxury .bmw-dloc-map { margin-top: clamp(2rem, 4vw, 3.5rem); overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
@media (max-width: 900px) { .brand-volvo .box-style-luxury .bmw-dloc-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 560px) { .brand-volvo .box-style-luxury .bmw-dloc-ctas { flex-direction: column; } .brand-volvo .box-style-luxury .bmw-dloc-ctas .btn { width: 100%; justify-content: center; } .brand-volvo .box-style-luxury .bmw-hours-card { padding: 20px 18px; } }

/* --- vehicle-carousel (luxury): inventory card grid --- */
.brand-volvo .box-style-luxury .inv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.brand-volvo .box-style-luxury .veh-card { background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; transition: box-shadow .4s var(--ease), transform .4s var(--ease), border-color .3s; }
.brand-volvo .box-style-luxury .veh-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); border-color: var(--ink-strong); }
.brand-volvo .box-style-luxury .veh-media { position: relative; aspect-ratio: 4/3; background: var(--grey-50); overflow: hidden; }
.brand-volvo .box-style-luxury .veh-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.brand-volvo .box-style-luxury .veh-card:hover .veh-media img { transform: scale(1.04); }
.brand-volvo .box-style-luxury .veh-tags { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; }
.brand-volvo .box-style-luxury .veh-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.brand-volvo .box-style-luxury .veh-head .yr { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.brand-volvo .box-style-luxury .veh-head .nm { font-size: 1.3rem; font-weight: 400; color: var(--ink-strong); line-height: 1.1; margin-top: 2px; }
.brand-volvo .box-style-luxury .veh-head .trim { font-size: .9rem; color: var(--ink-soft); margin-top: 2px; }
.brand-volvo .box-style-luxury .veh-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; padding: 14px 0; border-block: 1px solid var(--line); }
.brand-volvo .box-style-luxury .veh-specs .sp { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: var(--grey-700); }
.brand-volvo .box-style-luxury .veh-specs .sp .ico { width: 17px; height: 17px; color: var(--ink-soft); flex: none; }
.brand-volvo .box-style-luxury .veh-price { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; }
.brand-volvo .box-style-luxury .veh-price .pay { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.brand-volvo .box-style-luxury .veh-price .pay b { font-size: 1.05rem; color: var(--ink-strong); font-weight: 500; letter-spacing: 0; }
.brand-volvo .box-style-luxury .veh-price .total { text-align: right; }
.brand-volvo .box-style-luxury .veh-price .total .lbl { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); display: block; }
.brand-volvo .box-style-luxury .veh-price .total .amt { font-size: 1.5rem; font-weight: 400; color: var(--ink-strong); }
.brand-volvo .box-style-luxury .veh-price .total .was { display: block; font-size: .9rem; color: var(--ink-soft); text-decoration: line-through; line-height: 1.2; }
.brand-volvo .box-style-luxury .veh-price .total--sale .amt { color: var(--accent); }
.brand-volvo .box-style-luxury .veh-stock { font-size: .72rem; color: var(--ink-soft); letter-spacing: .04em; }
.brand-volvo .box-style-luxury .veh-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
@media (max-width: 980px) { .brand-volvo .box-style-luxury .inv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
    .brand-volvo .box-style-luxury .inv-grid { grid-template-columns: 1fr; }
    .brand-volvo .box-style-luxury .veh-actions { grid-template-columns: 1fr; }
}
/* Section-head "View all inventory" CTA: Volvo blue outline. */
.brand-volvo .box-style-luxury.vehicle-showcase-section .section-head .btn--ghost { --fg: var(--ink-strong); border-color: var(--ink-strong); }
.brand-volvo .box-style-luxury.vehicle-showcase-section .section-head .btn--ghost:hover { background: var(--ink-strong); color: #fff; }

/* --- Scroll-reveal animations (driven by brands/volvo.js, which adds .in) --- */
.brand-volvo .box-style-luxury [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.brand-volvo .box-style-luxury [data-reveal].in { opacity: 1; transform: none; }
.brand-volvo .box-style-luxury [data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.brand-volvo .box-style-luxury [data-reveal-stagger].in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .brand-volvo .box-style-luxury [data-reveal],
    .brand-volvo .box-style-luxury [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* --- Full maquette shell: delegated teaser boxes render their own <section>. --- */
.brand-volvo .lux-shell { padding-block: var(--section-y); }
.brand-volvo .lux-shell > .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.brand-volvo .lux-shell.section--alt { background: var(--bg-alt); }
.brand-volvo .lux-shell.section--ink { background: var(--ink-strong); color: var(--grey-200); }
.brand-volvo .lux-shell.section--ink .h2 { color: var(--white); }

/* --- promotions-teaser (luxury): live promo banners --- */
.brand-volvo .box-style-luxury .promo-banner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.brand-volvo .box-style-luxury .promo-banner { background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; transition: box-shadow .4s var(--ease), transform .4s var(--ease), border-color .3s; }
.brand-volvo .box-style-luxury .promo-banner:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); border-color: var(--ink-strong); }
.brand-volvo .box-style-luxury .promo-banner__img { display: block; overflow: hidden; }
.brand-volvo .box-style-luxury .promo-banner__img img { width: 100%; height: auto; display: block; transition: transform 1s var(--ease); }
.brand-volvo .box-style-luxury .promo-banner:hover .promo-banner__img img { transform: scale(1.04); }
.brand-volvo .box-style-luxury .promo-banner__cap { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.brand-volvo .box-style-luxury .promo-banner__title { font-size: 1.05rem; font-weight: 500; color: var(--ink-strong); letter-spacing: -.01em; }
@media (max-width: 860px) { .brand-volvo .box-style-luxury .promo-banner-grid { grid-template-columns: 1fr; } }

/* --- lineup-teaser (luxury): catalog segmented filter + model cards --- */
.brand-volvo .box-style-luxury .catalog-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; }
.brand-volvo .box-style-luxury .seg { display: inline-flex; background: var(--bg-alt); padding: 4px; border-radius: 999px; }
.brand-volvo .box-style-luxury .seg button { font: inherit; background: none; border: 0; cursor: pointer; padding: 9px 20px; font-size: .8rem; letter-spacing: .04em; text-transform: none; color: var(--ink-soft); transition: color .25s; position: relative; z-index: 0; border-radius: 999px; }
.brand-volvo .box-style-luxury .seg button:hover { color: var(--ink-strong); }
.brand-volvo .box-style-luxury .seg button.active { color: var(--white); }
.brand-volvo .box-style-luxury .seg button.active:hover { color: var(--white); }
.brand-volvo .box-style-luxury .seg button.active::before { content: ""; position: absolute; inset: 0; background: var(--accent); border-radius: 999px; z-index: -1; transition: background .25s var(--ease); }
.brand-volvo .box-style-luxury .lineup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.brand-volvo .box-style-luxury .model-card { position: relative; background: var(--white); padding: 30px 30px 26px; display: flex; flex-direction: column; min-height: 360px; transition: box-shadow .4s var(--ease), transform .45s var(--ease), opacity .45s var(--ease); overflow: hidden; }
.brand-volvo .box-style-luxury .model-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); z-index: 1; }
.brand-volvo .box-style-luxury .model-card.is-filtering { opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .brand-volvo .box-style-luxury .model-card.is-filtering { transform: none; }
}
.brand-volvo .box-style-luxury .model-card .mc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.brand-volvo .box-style-luxury .model-card .mc-name { font-size: 1.5rem; font-weight: 400; color: var(--ink-strong); letter-spacing: 0; }
.brand-volvo .box-style-luxury .model-card .mc-type { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
.brand-volvo .box-style-luxury .model-card .mc-media { flex: 1; display: grid; place-items: center; margin: 6px 0 16px; min-height: 150px; }
.brand-volvo .box-style-luxury .model-card .mc-media img { width: 100%; max-height: 200px; object-fit: contain; transition: transform .7s var(--ease); }
.brand-volvo .box-style-luxury .model-card:hover .mc-media img { transform: scale(1.05); }
.brand-volvo .box-style-luxury .model-card .mc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.brand-volvo .box-style-luxury .model-card .mc-price .lbl { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); display: block; }
.brand-volvo .box-style-luxury .model-card .mc-price .val { font-size: 1.15rem; color: var(--ink-strong); font-weight: 400; }
.brand-volvo .box-style-luxury .model-card .mc-cta { width: 46px; height: 46px; border-radius: 999px; background: var(--bg-alt); display: grid; place-items: center; transition: background .3s, color .3s; color: var(--ink-strong); }
.brand-volvo .box-style-luxury .model-card:hover .mc-cta { background: var(--accent); color: #fff; }
.brand-volvo .box-style-luxury .model-card .mc-fuel { position: absolute; top: 30px; right: 30px; }
@media (max-width: 980px) { .brand-volvo .box-style-luxury .lineup-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .brand-volvo .box-style-luxury .lineup-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .brand-volvo .box-style-luxury .catalog-filters { max-width: 100%; }
    .brand-volvo .box-style-luxury .seg { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .brand-volvo .box-style-luxury .seg::-webkit-scrollbar { display: none; }
    .brand-volvo .box-style-luxury .seg button { flex: 0 0 auto; white-space: nowrap; }
}

/* --- blog-teaser (luxury): editorial post grid (1 lead + side cards) --- */
.brand-volvo .box-style-luxury .blog-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 1px; background: var(--line); }
.brand-volvo .box-style-luxury .post { position: relative; background: var(--white); display: flex; flex-direction: column; transition: box-shadow .4s, transform .4s; overflow: hidden; }
.brand-volvo .box-style-luxury .post:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); z-index: 1; }
.brand-volvo .box-style-luxury .post-media { aspect-ratio: 16/10; position: relative; background: var(--grey-50); overflow: hidden; display: block; }
.brand-volvo .box-style-luxury .post-media .media { width: 100%; height: 100%; }
.brand-volvo .box-style-luxury .post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.brand-volvo .box-style-luxury .post:hover .post-media img { transform: scale(1.05); }
.brand-volvo .box-style-luxury .post-cat { position: absolute; top: 16px; left: 16px; }
.brand-volvo .box-style-luxury .post-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.brand-volvo .box-style-luxury .post-meta { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.brand-volvo .box-style-luxury .post-title { font-size: 1.2rem; font-weight: 400; color: var(--ink-strong); line-height: 1.25; }
.brand-volvo .box-style-luxury .post-excerpt { color: var(--ink-soft); font-size: .95rem; font-weight: 300; }
.brand-volvo .box-style-luxury .post .link { margin-top: auto; }
.brand-volvo .box-style-luxury .post.lead-post { grid-row: span 2; }
.brand-volvo .box-style-luxury .post.lead-post .post-media { aspect-ratio: auto; flex: 1; min-height: 280px; }
.brand-volvo .box-style-luxury .post.lead-post .post-title { font-size: clamp(1.5rem, 2vw, 2rem); }
@media (max-width: 900px) { .brand-volvo .box-style-luxury .blog-grid { grid-template-columns: 1fr 1fr; } .brand-volvo .box-style-luxury .post.lead-post { grid-column: span 2; grid-row: span 1; } .brand-volvo .box-style-luxury .post.lead-post .post-media { min-height: 240px; } }
@media (max-width: 560px) { .brand-volvo .box-style-luxury .blog-grid { grid-template-columns: 1fr; } .brand-volvo .box-style-luxury .post.lead-post { grid-column: span 1; } }

/* --- quick-search (luxury): inventory search card that overlaps the hero --- */
.brand-volvo .box-style-luxury.quicksearch { position: relative; z-index: 6; margin-top: -46px; }
.brand-volvo .box-style-luxury.quicksearch > .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.brand-volvo .box-style-luxury.quicksearch .qs-card { background: var(--white); box-shadow: var(--shadow-card); border-top: 3px solid var(--ink-strong); padding: clamp(20px, 2.4vw, 30px); }
.brand-volvo .box-style-luxury .qs-grid { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 0; align-items: stretch; }
.brand-volvo .box-style-luxury .qs-field { display: flex; flex-direction: column; gap: 6px; padding: 6px 22px; border-right: 1px solid var(--line); }
.brand-volvo .box-style-luxury .qs-field:first-child { padding-left: 4px; }
.brand-volvo .box-style-luxury .qs-field label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.brand-volvo .box-style-luxury .qs-field select { font: inherit; border: none; background: none; font-size: 1rem; color: var(--ink-strong); padding: 4px 0; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23797979' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; }
.brand-volvo .box-style-luxury .qs-submit { display: flex; align-items: stretch; padding-left: 22px; }
.brand-volvo .box-style-luxury .qs-submit .btn { height: 100%; }
.brand-volvo .box-style-luxury .qs-meta { display: flex; align-items: center; gap: 20px; margin-top: 16px; font-size: .82rem; color: var(--ink-soft); flex-wrap: wrap; }
.brand-volvo .box-style-luxury .qs-meta .chip { padding: 6px 14px; border-radius: 999px; background: var(--bg-alt); color: var(--grey-700); letter-spacing: .04em; text-decoration: none; transition: background .25s, color .25s; }
.brand-volvo .box-style-luxury .qs-meta .chip:hover { background: var(--accent); color: #fff; }
@media (max-width: 920px) {
    .brand-volvo .box-style-luxury.quicksearch { margin-top: -30px; }
    .brand-volvo .box-style-luxury .qs-grid { grid-template-columns: 1fr 1fr; }
    .brand-volvo .box-style-luxury .qs-field { border-right: none; border-bottom: 1px solid var(--line); padding: 12px 6px; }
    .brand-volvo .box-style-luxury .qs-submit { grid-column: 1 / -1; padding-left: 0; padding-top: 14px; }
    .brand-volvo .box-style-luxury .qs-submit .btn { width: 100%; padding-block: 1.1em; }
}

/* --- text-block (luxury): editorial / SEO copy block ---
   Content width is centralized in the text-block box (keyed on
   .box-style-luxury) so it honors the Content Width control — do not re-add a
   .text-block__content max-width here. */
.brand-volvo .box-style-luxury.text-block-section .section-eyebrow { font-size: var(--fs-eyebrow); font-weight: 300; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: .7em; }
.brand-volvo .box-style-luxury.text-block-section .section-title { font-size: var(--fs-h2); text-transform: none; font-weight: 300; line-height: 1.08; color: var(--ink-strong); letter-spacing: -.01em; max-width: 34ch; }
.brand-volvo .box-style-luxury.text-block-section .section-subtitle { font-size: var(--fs-lead); color: var(--ink-soft); font-weight: 300; line-height: 1.5; }
.brand-volvo .box-style-luxury.text-block-section .text-block__body { color: var(--ink); font-weight: 300; line-height: 1.8; }
.brand-volvo .box-style-luxury.text-block-section .text-block__body p { margin-bottom: 1em; break-inside: avoid; }
.brand-volvo .box-style-luxury.text-block-section .text-block__body h2,
.brand-volvo .box-style-luxury.text-block-section .text-block__body h3,
.brand-volvo .box-style-luxury.text-block-section .text-block__body h4 { font-size: 1.15rem; color: var(--ink-strong); letter-spacing: 0; margin: 1.2em 0 .5em; text-transform: none; font-weight: 500; break-inside: avoid; }
.brand-volvo .box-style-luxury.text-block-section .text-block__content.text-columns-2 .text-block__body,
.brand-volvo .box-style-luxury.text-block-section .text-block__content.text-columns-3 .text-block__body { column-gap: 56px; }
.brand-volvo .box-style-luxury.text-block-section .text-block__body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s; }
.brand-volvo .box-style-luxury.text-block-section .text-block__body a:hover { text-decoration: none; border-color: var(--accent); }
.brand-volvo .box-style-luxury.text-block-section .text-block__body blockquote { border-left: 3px solid var(--accent); padding-left: 1.2em; margin: 1.5em 0; color: var(--ink); font-style: normal; }

/* =============================================================================
   3. VDP (VEHICLE DETAIL PAGE) — WCAG AA CONTRAST FIXES
   All scoped .brand-volvo so BMW is unaffected.
   ============================================================================= */

/* 5) Contact-form header subtitle — "Get Pre-Approved Today".
      Header bg: linear-gradient(#466dca → #145081). Theme rule uses opacity:.9
      on color:#fff which makes text near-transparent (#fefefe) on blue → 1.07:1.
      Fix: explicit white, full opacity. White on #466dca (lightest gradient point) = 4.51:1 ✓ */
.brand-volvo .inv-vdp-contact__subtitle {
    color: #ffffff;
    opacity: 1;
}

/* 6) Sidebar financing CTA "strong" label — inherits brand-accent #466dca on
      bg rgba(70,109,202,.1) over white ≈ #edf0fa → 4.28:1 (fail).
      Use blue-dark #145081: 7.12:1 on #edf0fa ✓ */
.brand-volvo .inv-vdp-sidebar__cta--secondary .inv-vdp-sidebar__cta-text strong {
    color: var(--blue-dark);
}

/* 7) Sidebar financing CTA "small" sub-label — opacity:.8 on #466dca → #6787d4
      on #edf0fa = 3.07:1 (fail).
      Fix: blue-dark, full opacity → 7.12:1 on #edf0fa ✓ */
.brand-volvo .inv-vdp-sidebar__cta--secondary .inv-vdp-sidebar__cta-text small {
    color: var(--blue-dark);
    opacity: 1;
}

/* 8) Quick-facts labels (KM, STOCK #, etc.) — theme default brand-text-muted
      resolves to #94a3b8 on white = 2.77:1 (fail) before brand layer loads.
      Explicit rule guarantees var(--ink) = #414146 on white = 8.59:1 ✓
      regardless of cascade order. */
.brand-volvo .inv-vdp__facts-grid .inv-vdp__fact-label,
.brand-volvo .inv-vdp__fact-label {
    color: var(--ink-strong);
}

/* 9) "Get Pre-Approved Today" CTA banner heading — the banner has a dark
      gradient bg (#1B1B1B→#333) with color:#fff, but the brand layer's global
      heading colour forces this <h3> to --ink-strong (#161618) → dark-on-dark,
      invisible. Restore white on the dark banner. */
.brand-volvo .inv-vdp-pricing__cta-content h3,
.brand-volvo .inv-vdp-pricing__cta h3 {
    color: var(--white);
}

/* =============================================================================
   5. DARK MODE
   Activated when <html class="dark-mode"> (mirrors theme.css .dark-mode hook).
   Also covered by the auto-mode @media query for parity.

   Strategy:
   a) Remap the semantic tokens so every component that reads them flips
      automatically (no per-component repetition needed).
   b) Explicitly guard the handful of rules that used --ink-strong or --white
      as a BACKGROUND — after the token flip those would become light-on-light.
   c) Fix header/nav links (dark text → light).

   Contrast targets (all ≥4.5:1 for normal text):
     --ink-strong #f4f4f5 on #0f1117  = 18.2:1 ✓
     --ink        #d4d4d8 on #0f1117  = 11.3:1 ✓
     --ink-soft   #a1a1aa on #0f1117  =  6.0:1 ✓
     --accent     #466dca on #0f1117  =  4.6:1 ✓  (links/icons/selected)
     --white on card surface #1a1d28  = 16.8:1 ✓
   ============================================================================= */

/* ---- 5a. TOKEN REMAP -------------------------------------------------------- */
/* Scope: html.dark-mode .brand-volvo — one block flips all semantic tokens.
   Card/component bg guards below rely on the remapped --bg-alt (#1a1d28). */

.dark-mode .brand-volvo {
    /* Text tokens — near-white scale */
    --ink-strong:  #f4f4f5;   /* was #161618 — now near-white, 18.2:1 on #0f1117 ✓ */
    --ink:         #d4d4d8;   /* was #414146 — 11.3:1 on #0f1117 ✓ */
    --ink-soft:    #a1a1aa;   /* was #6b6b6b — 6.0:1 on #0f1117 ✓ (was 3.54:1 → fail) */

    /* Surface tokens */
    --bg:          #0f1117;   /* page bg matches theme dark bg */
    --bg-alt:      #1a1d28;   /* card / raised surface (was #f6f6f6) */
    --white:       #1a1d28;   /* guard: anything using var(--white) as a bg surface gets dark */
    --line:        rgba(255, 255, 255, .14); /* hairlines visible on dark (was #e7e7e7) */

    /* Grey scale remapped for dark */
    --grey-50:     #1a1d28;   /* card bg */
    --grey-100:    #1e2230;   /* slight lift */
    --grey-200:    #d4d4d8;   /* formerly near-white in dark dloc — now kept as light */
    --grey-300:    rgba(255, 255, 255, .14);
    --grey-400:    #71717a;
    --grey-500:    #a1a1aa;   /* muted text */
    --grey-700:    #d4d4d8;   /* body text */
    --grey-900:    #f4f4f5;   /* headings */
    --black:       #f4f4f5;   /* --black maps to --ink-strong — flip to near-white */

    /* Re-map brand theme tokens so base components (nav, footer, etc.) also flip */
    --brand-text:            #f4f4f5;
    --brand-text-secondary:  #d4d4d8;
    --brand-text-muted:      #a1a1aa;
    --brand-primary:         #f4f4f5;   /* buttons use this for bg — see guard 5c */
    --brand-primary-rgb:     244, 244, 245;
    --brand-bg-alt:          #1a1d28;
    --brand-dark:            #0f1117;
    --brand-dark-rgb:        15, 17, 23;
    --brand-border:          rgba(255, 255, 255, .14);
    --brand-border-light:    rgba(255, 255, 255, .08);
    --brand-border-strong:   rgba(255, 255, 255, .22);
    --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 16px 36px -24px rgba(0,0,0,.5);
    --shadow-float: 0 22px 50px -28px rgba(0,0,0,.6);
}

/* ---- 5b. COMPONENT GUARDS — backgrounds that used --white / --ink-strong ---- */
/* These cards used `background: var(--white)` for a white card on a light page.
   After the token flip --white = #1a1d28 (correct), so the background is already
   dark.  We only need to fix borders and any explicit hex whites in selectors. */

/* Feat grid tiles */
.dark-mode .brand-volvo .box-style-luxury .feat-grid {
    background: rgba(255, 255, 255, .06); /* grid gap line on dark */
}
.dark-mode .brand-volvo .box-style-luxury .feat-grid .feat {
    background: var(--bg-alt);
}

/* Testimonial cards */
.dark-mode .brand-volvo .box-style-luxury .bmw-rv {
    background: var(--bg-alt);
    border-color: var(--line);
}

/* Perk cards */
.dark-mode .brand-volvo .box-style-luxury .perk {
    background: var(--bg-alt);
}

/* Vehicle cards */
.dark-mode .brand-volvo .box-style-luxury .veh-card {
    background: var(--bg-alt);
    border-color: var(--line);
}
.dark-mode .brand-volvo .box-style-luxury .veh-media {
    background: #0c0e14;
}

/* Promo banners */
.dark-mode .brand-volvo .box-style-luxury .promo-banner {
    background: var(--bg-alt);
    border-color: var(--line);
}

/* Model cards (lineup) */
.dark-mode .brand-volvo .box-style-luxury .model-card {
    background: var(--bg-alt);
}
.dark-mode .brand-volvo .box-style-luxury .lineup-grid {
    background: rgba(255, 255, 255, .06);
}

/* Blog posts */
.dark-mode .brand-volvo .box-style-luxury .post {
    background: var(--bg-alt);
}
.dark-mode .brand-volvo .box-style-luxury .blog-grid {
    background: rgba(255, 255, 255, .06);
}

/* Quick-search card */
.dark-mode .brand-volvo .box-style-luxury.quicksearch .qs-card {
    background: var(--bg-alt);
    border-top-color: var(--ink-strong);
}
.dark-mode .brand-volvo .box-style-luxury .qs-field {
    border-right-color: var(--line);
}

/* Segmented filter pill */
.dark-mode .brand-volvo .box-style-luxury .seg {
    background: rgba(255, 255, 255, .06);
}

/* FAQ items */
.dark-mode .brand-volvo .box-style-luxury .bmw-faq__item {
    border-color: var(--line);
}

/* Hours card in dealer-location */
.dark-mode .brand-volvo .box-style-luxury .bmw-hours-card {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .1);
}

/* ---- 5b-ii. BUTTONS: guard --ink-strong-as-bg flip --------------------- */
/* .btn uses `--bg: var(--ink-strong)` = now #f4f4f5 (light) → light-on-light.
   Fix: dark pill bg (#0f1117) with near-white text.
   #0f1117 on #0f1117 bg = N/A (it's the button not the page);
   near-white #f4f4f5 on #0f1117 button = 18.2:1 ✓ */
.dark-mode .brand-volvo .box-style-luxury .btn {
    --bg: #0c0e14;
    --fg: #f4f4f5;
    border-color: rgba(255, 255, 255, .22);
}
.dark-mode .brand-volvo .box-style-luxury .btn:hover {
    background: #000;
    border-color: rgba(255, 255, 255, .35);
}

/* Ghost button on dark page: outline stays visible */
.dark-mode .brand-volvo .box-style-luxury .btn--ghost {
    --bg: transparent;
    --fg: #f4f4f5;
    border-color: rgba(255, 255, 255, .4);
}
.dark-mode .brand-volvo .box-style-luxury .btn--ghost:hover {
    background: rgba(255, 255, 255, .1);
    color: #f4f4f5;
    border-color: rgba(255, 255, 255, .6);
}

/* Global btn-primary (SRP/VDP/forms — outside luxury boxes) */
.dark-mode .brand-volvo .btn-primary,
.dark-mode .brand-volvo .btn.btn-primary,
.dark-mode .brand-volvo .availability-btn {
    background-color: #f4f4f5;
    border-color: #f4f4f5;
    color: #0f1117; /* dark text on light button — 18.2:1 ✓ */
}
.dark-mode .brand-volvo .btn-primary:hover,
.dark-mode .brand-volvo .btn.btn-primary:hover,
.dark-mode .brand-volvo .availability-btn:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #0f1117;
}

/* vehicle-showcase "View all" ghost CTA */
.dark-mode .brand-volvo .box-style-luxury.vehicle-showcase-section .section-head .btn--ghost {
    --fg: #f4f4f5;
    border-color: rgba(255, 255, 255, .4);
}
.dark-mode .brand-volvo .box-style-luxury.vehicle-showcase-section .section-head .btn--ghost:hover {
    background: rgba(255, 255, 255, .1);
    color: #f4f4f5;
}

/* ---- 5b-iii. BADGES --------------------------------------------------- */
/* badge background was var(--ink-strong) → now #f4f4f5.  Fix: dark bg + light text. */
.dark-mode .brand-volvo .box-style-luxury .badge {
    background: rgba(255, 255, 255, .12);
    color: #f4f4f5;
}
.dark-mode .brand-volvo .box-style-luxury .badge--new {
    background: rgba(255, 255, 255, .12);
    color: #f4f4f5;
}

/* ---- 5c. HEADER + NAV ----------------------------------------------------- */
/* Theme sets `.site-header { background-color: var(--brand-bg) }` which in dark
   mode = #0f1117 (dark) ✓.  But volvo.css's nav-link / logo-text colour was
   hardcoded to --ink-strong (now light) via the brand-text mapping, so ALREADY
   flips correctly.  However, to be explicit and guard against cascade order: */

/* Nav links: near-white on dark header bg.
   #f4f4f5 on #0f1117 = 18.2:1 ✓ */
.dark-mode .brand-volvo .nav-link {
    color: #f4f4f5;
}
.dark-mode .brand-volvo .nav-link:hover,
.dark-mode .brand-volvo .nav-link.active {
    color: var(--accent); /* #466dca on #0f1117 = 4.6:1 ✓ */
    background-color: rgba(70, 109, 202, .08);
}

/* Logo text */
.dark-mode .brand-volvo .header__logo-text {
    color: #f4f4f5;
}

/* Dropdown arrow icon */
.dark-mode .brand-volvo .dropdown-arrow {
    color: #f4f4f5;
}

/* ---- 5d. MEGAMENU DARK ----------------------------------------------------- */
/* The megamenu panels are white containers in light mode.  In dark they must
   be dark surface (#1a1d28) with light text and light hairlines. */

.dark-mode .brand-volvo .megamenu {
    background: linear-gradient(180deg, #1a1d28 0%, #161922 100%);
    border-top-color: var(--line);
}

.dark-mode .brand-volvo .megamenu__inner {
    background: none;
}

/* Showcase category cards */
.dark-mode .brand-volvo .megamenu--showcase .megamenu__category-section {
    background: #1e2230;
    border-color: rgba(255, 255, 255, .08);
}
.dark-mode .brand-volvo .megamenu--showcase .megamenu__category-section:hover {
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.dark-mode .brand-volvo .megamenu--showcase .megamenu__category-header {
    background: rgba(255, 255, 255, .04);
    border-bottom-color: rgba(255, 255, 255, .08);
}
.dark-mode .brand-volvo .megamenu--showcase .megamenu__category-accent {
    background: #f4f4f5;
}
.dark-mode .brand-volvo .megamenu--showcase .megamenu__hero-card {
    background: #22263a;
    border-color: rgba(255, 255, 255, .08);
}
.dark-mode .brand-volvo .megamenu--showcase .megamenu__hero-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    border-color: rgba(255, 255, 255, .16);
}
/* CTA arrow text in hero card */
.dark-mode .brand-volvo .megamenu--showcase .megamenu__hero-cta {
    color: #f4f4f5;
}

/* Model list link row hover */
.dark-mode .brand-volvo .megamenu--showcase .megamenu__model-link:hover {
    background: rgba(255, 255, 255, .06);
}
.dark-mode .brand-volvo .megamenu--showcase .megamenu__model-link:hover .megamenu__model-name {
    color: #f4f4f5;
}
.dark-mode .brand-volvo .megamenu--showcase .megamenu__model-link:hover .megamenu__model-arrow {
    color: #a1a1aa;
}

/* Footer CTAs in megamenu — light pill with dark text (inverted from light mode) */
.dark-mode .brand-volvo .megamenu__footer-cta {
    background: #f4f4f5 !important;
    color: #0f1117 !important; /* 18.2:1 ✓ */
    border-color: #f4f4f5;
    box-shadow: none;
}
.dark-mode .brand-volvo .megamenu__footer-cta:hover {
    background: #ffffff !important;
    color: #0f1117 !important;
    border-color: #ffffff;
}
.dark-mode .brand-volvo .megamenu__footer-cta--secondary {
    background: transparent !important;
    color: #f4f4f5 !important;
    border-color: rgba(255, 255, 255, .35);
}
.dark-mode .brand-volvo .megamenu__footer-cta--secondary:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #f4f4f5 !important;
    border-color: rgba(255, 255, 255, .5);
}

/* Inventory megamenu footer */
.dark-mode .brand-volvo .megamenu--inventory .megamenu__inventory-footer {
    background: #161922;
    border-top-color: rgba(255, 255, 255, .08);
}
.dark-mode .brand-volvo .megamenu--inventory .megamenu__inventory-link:hover {
    color: #f4f4f5;
}

/* Inventory action buttons — light pill */
.dark-mode .brand-volvo .megamenu__inventory-btn {
    color: #f4f4f5 !important;
    background-color: transparent;
    border-color: rgba(255, 255, 255, .35);
}
.dark-mode .brand-volvo .megamenu__inventory-btn:hover {
    background-color: #f4f4f5;
    color: #0f1117 !important;
    border-color: #f4f4f5;
}

/* Section-header divider */
.dark-mode .brand-volvo .megamenu--inventory .megamenu__section-header {
    border-bottom-color: rgba(255, 255, 255, .12);
}
.dark-mode .brand-volvo .megamenu--inventory .megamenu__section-header svg {
    color: #a1a1aa;
}

/* Base link hover bg */
.dark-mode .brand-volvo .megamenu__link:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .08);
}

/* nav-dropdown (À propos) */
.dark-mode .brand-volvo .nav-dropdown {
    background-color: #1a1d28;
    border-color: rgba(255, 255, 255, .1);
}
.dark-mode .brand-volvo .nav-dropdown a:hover,
.dark-mode .brand-volvo .dropdown-item:hover {
    background-color: rgba(255, 255, 255, .06);
    color: #f4f4f5;
}

/* ---- 5e. GEO / SEO SECTIONS ----------------------------------------------- */
/* geo-stats (.bg-brand / bg-brand section) was already dark in light mode —
   it sets its own explicit dark bg (#161618) via .dloc.  On dark-mode page
   the section background is indistinguishable.  Add a subtle border to lift it. */
.dark-mode .brand-volvo .box-style-luxury.bg-brand {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

/* geo-stats eyebrow on dark — was rgba(255,255,255,.6) which is fine */

/* geo-takeaway icon circle — bg-alt now dark, keep line visible */
.dark-mode .brand-volvo .box-style-luxury .geo-takeaway__icon {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
    color: var(--accent); /* #466dca — still OK as an icon colour at this size */
}

/* Inline text links on dark — blue-dark #145081 fails on dark bg (1.8:1).
   Use accent #466dca (4.6:1 ✓) or near-white for the link text. */
.dark-mode .brand-volvo .box-style-luxury .link {
    color: var(--accent); /* #466dca on #0f1117 = 4.6:1 ✓ */
}
.dark-mode .brand-volvo .box-style-luxury .link:hover,
.dark-mode .brand-volvo .box-style-luxury .link:focus {
    color: #8ab0f0; /* lighter blue — 7.5:1 on #0f1117 ✓ — hover contrast */
}
.dark-mode .brand-volvo .box-style-luxury .link::after {
    background: var(--accent);
}

/* seo-toggle "Read more" button */
.dark-mode .brand-volvo .box-style-luxury button.seo-toggle,
.dark-mode .brand-volvo .box-style-luxury .seo-toggle {
    color: var(--accent);
}

/* ---- 5f. DEALER-LOCATION DARK MODE ---------------------------------------- */
/* The dloc section was explicitly set to bg:#161618 via !important.  On a dark
   page this is barely distinguishable from #0f1117.  Lift it slightly and keep
   borders visible. */
.dark-mode .brand-volvo .box-style-luxury.dloc {
    background-color: #1e2230 !important;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* ---- 5g. VDP DARK MODE ---------------------------------------------------- */
/* Re-apply the VDP contrast fixes under dark mode — some depend on explicit
   colours rather than tokens and need a dark-context re-anchor. */

/* Contact form subtitle — keep white on blue gradient */
.dark-mode .brand-volvo .inv-vdp-contact__subtitle {
    color: #ffffff;
    opacity: 1;
}

/* Sidebar financing CTA text — blue-dark #145081 fails on dark bg.
   Use light near-white instead (#f4f4f5 on #1a1d28 surface ≥ 16:1 ✓). */
.dark-mode .brand-volvo .inv-vdp-sidebar__cta--secondary .inv-vdp-sidebar__cta-text strong {
    color: #f4f4f5;
}
.dark-mode .brand-volvo .inv-vdp-sidebar__cta--secondary .inv-vdp-sidebar__cta-text small {
    color: #d4d4d8;
    opacity: 1;
}

/* Quick-facts labels */
.dark-mode .brand-volvo .inv-vdp__facts-grid .inv-vdp__fact-label,
.dark-mode .brand-volvo .inv-vdp__fact-label {
    color: #f4f4f5;
}

/* Pricing CTA banner heading */
.dark-mode .brand-volvo .inv-vdp-pricing__cta-content h3,
.dark-mode .brand-volvo .inv-vdp-pricing__cta h3 {
    color: #ffffff;
}

/* ---- 5i. TOP-BAR FIX ------------------------------------------------------- */
/* .top-bar bg = var(--brand-primary).  After the token flip --brand-primary
   = #f4f4f5 (light).  Theme hardcodes `--brand-text-inverse:#ffffff` inside
   the .top-bar rule itself, so text stays near-white → 1.08:1 on light bg.
   Fix: force a dark bg with full-opacity light text.
   #f4f4f5 on #0c0e14 = 18.8:1 ✓ */
.dark-mode .brand-volvo .top-bar {
    background-color: #0c0e14 !important;
    color: #f4f4f5;
    --brand-text-inverse: #f4f4f5;
}
.dark-mode .brand-volvo .top-bar a,
.dark-mode .brand-volvo .top-bar span,
.dark-mode .brand-volvo .top-bar .top-bar__marquee span,
.dark-mode .brand-volvo .top-bar .lang-dropdown__current,
.dark-mode .brand-volvo .top-bar .lang-dropdown__toggle {
    color: #f4f4f5;
}

/* ---- 5j. SECTION-BG UTILITY CLASSES --------------------------------------- */
/* theme.css uses !important on .bg-default and .bg-light — must match.
   .bg-default → deep dark (#0f1117, same as page bg — cards (#1a1d28) lift above)
   .bg-light   → subtle lift (#14161d — one step above bg, one step below cards)
   .bg-brand   → keep dark (was already dark via --brand-primary in light mode;
                  in dark mode --brand-primary = #f4f4f5 → would go LIGHT. Fix.) */

.dark-mode .brand-volvo .bg-default {
    background-color: var(--bg) !important;   /* #0f1117 */
}
.dark-mode .brand-volvo .bg-light {
    background-color: #14161d !important;     /* subtle step between bg and card */
}

/* bg-brand: theme uses `background-color: var(--brand-primary) !important;`
   After flip --brand-primary = #f4f4f5 → bright white section on dark page.
   Force it back to the original Volvo dark (ink-strong in light mode = #161618).
   Keep --brand-text-inverse white so the text inside stays light.
   Text is rgba(255,255,255,.6) eyebrow and #ececec values → both fine on #1c1e2a. */
.dark-mode .brand-volvo .bg-brand {
    background-color: #1c1e2a !important;     /* slightly lifted dark — 18.5:1 for white text ✓ */
    color: #f4f4f5;
}
/* Ensure geo-stats numbers and labels on bg-brand stay light */
.dark-mode .brand-volvo .bg-brand .lead-trust .t .n { color: #ececec; }
.dark-mode .brand-volvo .bg-brand .lead-trust .t .l { color: rgba(255, 255, 255, .75); }
.dark-mode .brand-volvo .bg-brand .lead-trust__eyebrow { color: rgba(255, 255, 255, .6); }

/* bg-brand-primary — same token, same fix */
.dark-mode .brand-volvo .bg-brand-primary {
    background-color: #1c1e2a !important;
    color: #f4f4f5;
}

/* ---- 5k. FOOTER LOGO-TEXT -------------------------------------------------- */
/* In dark mode --white was remapped to #1a1d28 (card surface), so the footer
   wordmark which uses `color: var(--white)` becomes #1a1d28 on ~#0f1117 bg
   = 1.12:1 (invisible).
   Fix: explicit near-white.  #f4f4f5 on #161618 footer = 17.9:1 ✓ */
.dark-mode .brand-volvo .footer__logo-text {
    color: #f4f4f5 !important;
}
.dark-mode .brand-volvo .footer__logo a:hover .footer__logo-text {
    color: #f4f4f5 !important;
}

/* ---- 5l. ACCENT (BLUE) TEXT ON DARK SURFACES ------------------------------ */
/* --accent = #466dca. On dark #0f1117: 4.6:1 (borderline, fails for small text
   in some audit tools). On #1a1d28 surface: 3.43:1 (clear fail).
   Switch to a lighter accent for TEXT uses only in dark mode.
   #7e9ce8 on #0f1117 = 5.6:1 ✓   on #1a1d28 = 5.2:1 ✓   on #14161d = 5.4:1 ✓ */
.dark-mode .brand-volvo {
    --accent: #7e9ce8;   /* lighter blue for dark-mode text links / accent text */
    /* Also lighten the THEME accent token: base/inventory components (VDP payment
       calculator, sliders, related-vehicle "view all", card badges) read
       --brand-accent (#466dca) directly — 3.43–3.86:1 on dark surfaces (fail).
       #7e9ce8 → blue text passes on dark; blue chips become lighter so the dark
       chip-text (#0f1117) passes too (~7:1). */
    --brand-accent: #7e9ce8;
    --brand-accent-hover: #a5bdf0;
    --brand-accent-rgb: 126, 156, 232;
}

/* seo-toggle "Read more" — uses var(--accent); already inherits lighter blue now.
   Re-state explicitly to be safe. */
.dark-mode .brand-volvo .box-style-luxury button.seo-toggle,
.dark-mode .brand-volvo .box-style-luxury .seo-toggle {
    color: #7e9ce8;
}

/* Inline .link — was var(--accent) in 5e; update to lighter blue */
.dark-mode .brand-volvo .box-style-luxury .link {
    color: #7e9ce8;
}
.dark-mode .brand-volvo .box-style-luxury .link:hover,
.dark-mode .brand-volvo .box-style-luxury .link:focus {
    color: #a5bef0;
}
.dark-mode .brand-volvo .box-style-luxury .link::after {
    background: #7e9ce8;
}

/* Nav link hover / active: use lighter accent so it passes on dark header bg.
   #7e9ce8 on #0f1117 = 5.6:1 ✓ */
.dark-mode .brand-volvo .nav-link:hover,
.dark-mode .brand-volvo .nav-link.active {
    color: #7e9ce8;
    background-color: rgba(126, 156, 232, .08);
}

/* Wizard step-indicator active/completed label + number text:
   .active label and .completed label use var(--brand-accent).
   In dark the wizard sits on var(--brand-surface) = #1a1d28.
   #466dca on #1a1d28 = 3.43:1 (fail); #7e9ce8 on #1a1d28 = 5.2:1 ✓ */
.dark-mode .brand-volvo .wizard-step-indicator.active .wizard-step-indicator__label,
.dark-mode .brand-volvo .wizard-step-indicator.completed .wizard-step-indicator__label {
    color: #7e9ce8;
}
/* The active number circle has bg: var(--brand-accent) with white text —
   that's fine; keep it but use a slightly lighter bg so white passes.
   White on #7e9ce8 = 4.5:1 ✓ */
.dark-mode .brand-volvo .wizard-step-indicator.active .wizard-step-indicator__number {
    background: #7e9ce8;
    border-color: #7e9ce8;
    color: #ffffff;
}
.dark-mode .brand-volvo .wizard-step-indicator.completed .wizard-step-indicator__number {
    border-color: #7e9ce8;
    color: #7e9ce8;
}

/* Footer lang-switcher links: bg is --brand-bg-alt (#1a1d28 in dark).
   Active uses var(--brand-accent); same fail. Override to lighter blue. */
.dark-mode .brand-volvo .lang-switcher__btn.active {
    color: #7e9ce8;
}
/* Footer language-switcher anchor uses #466dca (3.43:1 on #1a1d28). Lighten. */
.dark-mode .brand-volvo .footer__lang .lang-switcher__link,
.dark-mode .brand-volvo .footer .lang-switcher__link,
.dark-mode .brand-volvo .lang-switcher__link {
    color: #7e9ce8;
}

/* Hero outline button (.btn-outline-light) sits on the always-dark hero. The
   token flip turned its colour/border to --brand-bg (#0f1117) = dark-on-dark
   (invisible). Force a light outline + light text in dark mode. */
.dark-mode .brand-volvo .btn-outline-light {
    color: #f4f4f5 !important;
    border-color: rgba(255, 255, 255, .55) !important;
    background-color: transparent !important;
}
.dark-mode .brand-volvo .btn-outline-light:hover,
.dark-mode .brand-volvo .btn-outline-light:focus {
    background-color: #f4f4f5 !important;
    border-color: #f4f4f5 !important;
    color: #0f1117 !important;
}

/* Financing section uses .bg-gradient = linear-gradient(--brand-primary →
   --brand-accent). The --ink-strong flip made --brand-primary light, so the
   gradient (+ its light text) went light-on-light (invisible left panel).
   Keep it a DARK gradient with light text in dark mode. */
.dark-mode .brand-volvo .bg-gradient {
    background: linear-gradient(135deg, #161618 0%, #1c1e2a 55%, #2f59bb 100%) !important;
    color: #f4f4f5;
}

/* VDP condition badge (Used / Occasion / New): its bg uses --brand-primary,
   which the flip turned light → white text on #f4f4f5 = 1.09:1 (illegible tag).
   Give it a solid dark surface + light text in dark mode. */
.dark-mode .brand-volvo .inv-vdp-sidebar__condition,
.dark-mode .brand-volvo .inv-vdp-sidebar__condition--used,
.dark-mode .brand-volvo .inv-vdp-sidebar__condition--new {
    background: #2b2e3a !important;
    color: #f4f4f5 !important;
}

/* Accent FILLS that carry WHITE text: lightening --brand-accent to #7e9ce8 makes
   white-on-accent fail (active spec tab "All" = 2.68:1). Use dark text on the
   light-blue fill instead (#0f1117 on #7e9ce8 ≈ 7:1). */
.dark-mode .brand-volvo .inv-vdp-features__tab.is-active {
    color: #0f1117;
}
/* Same: financing-wizard nav/submit buttons fill with the lightened accent and
   carry white text (#fff on #7e9ce8 = 2.68:1). Dark text on the light-blue fill. */
.dark-mode .brand-volvo #next-btn,
.dark-mode .brand-volvo .wizard-nav .btn-primary,
.dark-mode .brand-volvo #financing-form button[type="submit"] {
    color: #0f1117;
}

/* SRP card image-count indicator ("+15"): drop the Bootstrap pill entirely —
   just plain dark text on the light indicator tile (both light + dark modes). */
.brand-volvo .more-images-indicator .badge {
    background: transparent !important;
    /* The indicator tile bg = var(--ink-strong) (dark in light mode / light in
       dark mode via the flip). Use var(--white), which flips oppositely, so the
       count text always contrasts the tile: white on dark tile (light mode),
       near-black on light tile (dark mode). No pill. */
    color: var(--white) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-weight: 700;
}

/* Condition badge "Démo": the theme ships --new and --used variants but NO
   --demo across ALL badge families (SRP card, VDP sidebar, VDP gallery, luxury
   carousel), so demo vehicles fall back to the unstyled base badge (no fill →
   invisible / no "border" like the others). Give --demo a filled slate chip
   everywhere, explicit colours so it holds in both light + dark mode. */
.brand-volvo .vehicle-card__badge--demo,
.brand-volvo .inv-vdp-sidebar__condition--demo,
.brand-volvo .inv-vdp-gallery__badge--demo,
.brand-volvo .badge--demo {
    background-color: #475569 !important;
    color: #ffffff !important;
}

/* VDP gallery prev/next nav: the button keeps a near-white circle bg, but the
   icon (svg stroke) flipped to --ink-strong = light → white-on-white (invisible).
   Force a dark icon on the light circle in dark mode; also guarantee the button
   surface stays light so it reads over the photo. */
.dark-mode .brand-volvo .inv-vdp-gallery__nav {
    background: rgba(255, 255, 255, .95) !important;
}
.dark-mode .brand-volvo .inv-vdp-gallery__nav svg,
.dark-mode .brand-volvo .inv-vdp-gallery__nav svg * {
    stroke: #161618 !important;
    color: #161618 !important;
}

/* Systematic dark-mode invisibility sweep (token-flip side effects) -------- */
/* Dealer-location name used var(--white) (→ #1a1d28 in dark) on the dark
   section = dark-on-dark text. */
.dark-mode .brand-volvo .box-style-luxury .bmw-dloc-name,
.dark-mode .brand-volvo .bmw-dloc-name {
    color: #f4f4f5 !important;
}
/* Form controls whose borders are hardcoded dark (.border-dark) or use a dark
   token: invisible hairline on dark surfaces (hero search selects, filter
   checkboxes). Give them a visible light hairline. */
.dark-mode .brand-volvo .form-select.border-dark,
.dark-mode .brand-volvo .form-check-input {
    border-color: rgba(255, 255, 255, .35) !important;
}
/* SRP price "$" glyph icon — dark on dark; surface it with the accent blue. */
.dark-mode .brand-volvo .vehicle-price svg,
.dark-mode .brand-volvo .vehicle-price svg * {
    stroke: #7e9ce8 !important;
    color: #7e9ce8 !important;
}

/* ---- 5h. AUTO (OS-LEVEL) DARK MODE PARITY --------------------------------- */
/* Mirror the token remap for the auto-mode case (data-color-mode="auto"). */
@media (prefers-color-scheme: dark) {
    html[data-color-mode="auto"] .brand-volvo {
        --ink-strong:  #f4f4f5;
        --ink:         #d4d4d8;
        --ink-soft:    #a1a1aa;
        --accent:      #7e9ce8;   /* lighter blue for text on dark surfaces */
        --bg:          #0f1117;
        --bg-alt:      #1a1d28;
        --white:       #1a1d28;
        --line:        rgba(255, 255, 255, .14);
        --grey-50:     #1a1d28;
        --grey-100:    #1e2230;
        --grey-200:    #d4d4d8;
        --grey-300:    rgba(255, 255, 255, .14);
        --grey-500:    #a1a1aa;
        --grey-700:    #d4d4d8;
        --grey-900:    #f4f4f5;
        --black:       #f4f4f5;
        --brand-text:           #f4f4f5;
        --brand-text-secondary: #d4d4d8;
        --brand-text-muted:     #a1a1aa;
        --brand-primary:        #f4f4f5;
        --brand-primary-rgb:    244, 244, 245;
        --brand-bg-alt:         #1a1d28;
        --brand-dark:           #0f1117;
        --brand-dark-rgb:       15, 17, 23;
        --brand-border:         rgba(255, 255, 255, .14);
        --brand-border-light:   rgba(255, 255, 255, .08);
        --brand-border-strong:  rgba(255, 255, 255, .22);
        --shadow-card:  0 1px 2px rgba(0,0,0,.4), 0 16px 36px -24px rgba(0,0,0,.5);
        --shadow-float: 0 22px 50px -28px rgba(0,0,0,.6);
    }

    html[data-color-mode="auto"] .brand-volvo .nav-link { color: #f4f4f5; }
    html[data-color-mode="auto"] .brand-volvo .nav-link:hover,
    html[data-color-mode="auto"] .brand-volvo .nav-link.active { color: #7e9ce8; }
    html[data-color-mode="auto"] .brand-volvo .header__logo-text { color: #f4f4f5; }
    html[data-color-mode="auto"] .brand-volvo .dropdown-arrow { color: #f4f4f5; }

    html[data-color-mode="auto"] .brand-volvo .top-bar {
        background-color: #0c0e14 !important;
        color: #f4f4f5;
        --brand-text-inverse: #f4f4f5;
    }
    html[data-color-mode="auto"] .brand-volvo .top-bar a,
    html[data-color-mode="auto"] .brand-volvo .top-bar span,
    html[data-color-mode="auto"] .brand-volvo .top-bar .lang-dropdown__current,
    html[data-color-mode="auto"] .brand-volvo .top-bar .lang-dropdown__toggle {
        color: #f4f4f5;
    }

    html[data-color-mode="auto"] .brand-volvo .bg-default {
        background-color: #0f1117 !important;
    }
    html[data-color-mode="auto"] .brand-volvo .bg-light {
        background-color: #14161d !important;
    }
    html[data-color-mode="auto"] .brand-volvo .bg-brand,
    html[data-color-mode="auto"] .brand-volvo .bg-brand-primary {
        background-color: #1c1e2a !important;
        color: #f4f4f5;
    }

    html[data-color-mode="auto"] .brand-volvo .footer__logo-text {
        color: #f4f4f5 !important;
    }
}

/* =============================================================================
   4. MEGAMENUS — navbar dropdowns
   All selectors scoped .brand-volvo.  No edits to theme.css.
   Contrast notes:
     --ink-strong #161618 on white   = 19.3:1 ✓
     --ink        #414146 on white   = 8.59:1 ✓
     --ink-soft   #6b6b6b on white   = 5.74:1 ✓  (normal text ≥4.5:1)
     --accent     #466dca on white   = 4.51:1 ✓  (used only for hover colour;
                                                    falls below 4.5 only on
                                                    off-white; all interactive
                                                    link text uses --ink hover)
     --blue-dark  #145081 on white   = 7.05:1 ✓
   ============================================================================= */

/* ---- 4a. BASE MEGAMENU CONTAINER ----------------------------------------- */

/* Neutralise the blue brand-accent top border; replace with a single-pixel
   hairline (Mercury #e7e7e7) so the panel "lifts" cleanly off the nav bar. */
.brand-volvo .megamenu {
    border-top: 1px solid var(--line);
}

/* Kill the animated blue shimmer bar (::before) and the decorative radial orb
   (::after) — both rely on --brand-accent and add visual noise. */
.brand-volvo .megamenu::before {
    display: none;
}
.brand-volvo .megamenu::after {
    display: none;
}

/* Flatten the radial gradient background pattern on __inner — Volvo panels
   should be plain white with zero decorative depth. */
.brand-volvo .megamenu__inner {
    background: none;
}

/* Megamenu column section titles — theme sets var(--brand-accent) blue.
   Volvo eyebrow: uppercase, tracked, ink-soft (#6b6b6b on white = 5.74:1 ✓). */
.brand-volvo .megamenu__title {
    color: var(--ink-soft);
}

/* Suppress the 4px blue bar pseudo-element before each title. */
.brand-volvo .megamenu__title::before {
    display: none;
}

/* Base megamenu links — theme adds rgba white 50% background tint; flatten to
   transparent so links sit on the plain white panel. */
.brand-volvo .megamenu__link {
    background: transparent;
}

/* Hover state: flat bg-alt (#f6f6f6) instead of white + blue shadow. */
.brand-volvo .megamenu__link:hover {
    background: var(--bg-alt);
    border-color: var(--line);
    box-shadow: none;
}

/* Kill the blue accent bar that slides in on the left edge of each link row. */
.brand-volvo .megamenu__link::before {
    display: none;
}

/* Remove the blue radial gradient overlay on hover. */
.brand-volvo .megamenu__link::after {
    display: none;
}

/* Model name inside a link — theme turns it blue on hover; use ink-strong. */
.brand-volvo .megamenu__link:hover .megamenu__model {
    color: var(--ink-strong);
}

/* ---- 4b. MEGAMENU FOOTER CTAs (shared by showcase + base variants) -------- */

/* Primary CTA: theme fills it with a blue gradient and forces white text via
   !important.  Volvo target: dark pill (ink-strong bg, white text) — must also
   use !important to win the cascade.
   White on #161618 = 19.3:1 ✓ */
.brand-volvo .megamenu__footer-cta {
    background: var(--ink-strong) !important;
    color: #ffffff !important;
    border: 1px solid var(--ink-strong);
    border-radius: 999px;
    box-shadow: none;
}

.brand-volvo .megamenu__footer-cta:hover {
    background: var(--ink) !important;
    color: #ffffff !important;
    border-color: var(--ink);
    box-shadow: none;
    transform: translateY(-1px);
}

/* Secondary CTA: theme default is transparent + blue hover.
   Volvo: outline with ink-strong border; hover fills dark pill.
   --ink-strong #161618 on white = 19.3:1 ✓ */
.brand-volvo .megamenu__footer-cta--secondary {
    background: transparent !important;
    color: var(--ink-strong) !important;
    border: 1px solid var(--ink-strong);
    box-shadow: none;
}

.brand-volvo .megamenu__footer-cta--secondary:hover {
    background: var(--ink-strong) !important;
    color: #ffffff !important;
    border-color: var(--ink-strong);
    box-shadow: none;
}

/* ---- 4c. MEGAMENU--SHOWCASE (Modèles) -------------------------------------- */

/* Category card: remove rounded corners → flat hairline cards (Volvo aesthetic).
   Theme uses --radius-xl; override to 0 for the hairline card look. */
.brand-volvo .megamenu--showcase .megamenu__category-section {
    border-radius: 0;
    border-color: var(--line);
}

/* Hover state: remove the blue glow/outline ring; use subtle shadow only. */
.brand-volvo .megamenu--showcase .megamenu__category-section:hover {
    border-color: var(--line);
    box-shadow: var(--shadow-card);
}

/* Category header: replace the blue-gradient bg with bg-alt (#f6f6f6), keep
   a clean 1px bottom border. */
.brand-volvo .megamenu--showcase .megamenu__category-header {
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
}

/* Vertical 3px accent bar inside the category header — theme fills it with a
   blue gradient.  Replace with ink-strong for a clean dark marker. */
.brand-volvo .megamenu--showcase .megamenu__category-accent {
    background: var(--ink-strong);
}

/* Hero card: flatten the blue-gradient bg; remove the blue top-bar reveal. */
.brand-volvo .megamenu--showcase .megamenu__hero-card {
    background: var(--white);
    border-color: var(--line);
    border-radius: 0;
}

.brand-volvo .megamenu--showcase .megamenu__hero-card:hover {
    border-color: var(--line);
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

/* Suppress the blue gradient bar that appears at the top of each hero card
   on hover. */
.brand-volvo .megamenu--showcase .megamenu__hero-card::before {
    display: none;
}

/* Hero-card CTA ("Voir les modèles"): theme = blue.
   Volvo: ink-strong (#161618 on white = 19.3:1 ✓). */
.brand-volvo .megamenu--showcase .megamenu__hero-cta {
    color: var(--ink-strong);
}

/* Hero model name hover: blue → ink-strong. */
.brand-volvo .megamenu--showcase .megamenu__hero-card:hover .megamenu__hero-name {
    color: var(--ink-strong);
}

/* Model list link hover: blue text → ink-strong; bg-alt tint. */
.brand-volvo .megamenu--showcase .megamenu__model-link:hover {
    background: var(--bg-alt);
}

.brand-volvo .megamenu--showcase .megamenu__model-link:hover .megamenu__model-name {
    color: var(--ink-strong);
}

/* Arrow icon that appears on model-link hover: blue → ink-soft. */
.brand-volvo .megamenu--showcase .megamenu__model-link:hover .megamenu__model-arrow {
    color: var(--ink-soft);
}

/* ---- 4d. MEGAMENU--INVENTORY (Inventaire) ---------------------------------- */

/* Section-header divider: the heavy 2px blue underline is the most visible
   problem.  Replace with 1px Mercury hairline. */
.brand-volvo .megamenu--inventory .megamenu__section-header {
    border-bottom: 1px solid var(--line);
}

/* Section-header icon — blue → ink-soft. */
.brand-volvo .megamenu--inventory .megamenu__section-header svg {
    color: var(--ink-soft);
}

/* Quick-links list anchor hover: blue → ink-strong. */
.brand-volvo .megamenu--inventory .megamenu__links-list a:hover {
    color: var(--ink-strong);
}

/* Model item grid hover: blue text → ink-strong; bg-alt tint. */
.brand-volvo .megamenu--inventory .megamenu__model-item:hover {
    background-color: var(--bg-alt);
    color: var(--ink-strong);
}

/* Inventory footer: replace --brand-bg-alt tint with a clean white bg, keep
   the 1px hairline top border. */
.brand-volvo .megamenu--inventory .megamenu__inventory-footer {
    background: var(--white);
    border-top: 1px solid var(--line);
}

/* Inventory footer "View all" link hover: blue → ink-strong. */
.brand-volvo .megamenu--inventory .megamenu__inventory-link:hover {
    color: var(--ink-strong);
}

/* Inventory buttons: theme renders them as blue-outlined pills with
   color:var(--brand-accent) !important and blue hover fill.
   Volvo: dark pill — ink-strong border + text, dark fill on hover.
   Must use !important to override the theme's !important declarations.
   --ink-strong #161618 on white = 19.3:1 ✓;  white on #161618 = 19.3:1 ✓ */
.brand-volvo .megamenu__inventory-btn {
    color: var(--ink-strong) !important;
    background-color: transparent;
    border: 1px solid var(--ink-strong);
    border-radius: 999px;
}

.brand-volvo .megamenu__inventory-btn:hover {
    background-color: var(--ink-strong);
    color: #ffffff !important;
    border-color: var(--ink-strong);
    transform: translateY(-1px);
}

/* ---- 4e. NAV-DROPDOWN (À propos simple list) ------------------------------- */

/* Link hover: theme turns text blue and adds blue bg tint.
   Volvo: bg-alt (#f6f6f6) + ink-strong text.
   --ink-strong #161618 on #f6f6f6 = 17.5:1 ✓ */
.brand-volvo .nav-dropdown a:hover {
    background-color: var(--bg-alt);
    color: var(--ink-strong);
}

/* .dropdown-item is the flex variant (icon + label) used in some nav items. */
.brand-volvo .dropdown-item:hover {
    background-color: var(--bg-alt);
    color: var(--ink-strong);
}

/* === Nerd fix: financing form text visibility (via backend) === */
/* Highlighted word on the dark financing panel — grey, legible (not black, not pure white) */
.financing-form-section .financing-form__highlight { color: #9ea2a8 !important; }
/* Info-box sits on a light card; must beat theme.css body-color-light !important (0,3,0) */
.section.body-color-light .info-box,
.section.body-color-light .info-box p { color: #161618 !important; }
/* Dealer-location "Business Hours" head on dark sections — light grey, visible */
.section.bg-dark .bmw-hours-head,
.section.bg-dark .bmw-hours-head *,
.dloc.bg-dark .bmw-hours-head,
.dloc.bg-dark .bmw-hours-head * { color: #9ea2a8 !important; }