/* TH1 — be-loud.eu storefront themes. Loaded after Bootstrap 5.3 (layouts/app.blade.php).
   Palette is measured from the logo (yellow #EBE01E, black #0D0D0D). Three themes, chosen by
   <html data-theme="noir|daylight|deep"> (server-side, ThemeResolver):
     noir      black header/footer, yellow is the button
     daylight  white header, warm-white page, black buttons, yellow on the money actions
     deep      navy chrome and buttons, yellow only as the accent
   Rule: yellow is never text on white (1.4:1). On white use ink 900 or yellow 800. */

:root {
    /* yellow scale */
    --be-yellow-100: #FCFADF; --be-yellow-200: #F9F5B3; --be-yellow-300: #F5EE7A;
    --be-yellow-400: #F1E84A; --be-yellow-500: #EBE01E; --be-yellow-600: #CFC414;
    --be-yellow-700: #A89F0C; --be-yellow-800: #7D7607; --be-yellow-900: #4F4A04;
    /* ink scale */
    --be-ink-950: #0D0D0D; --be-ink-900: #1C1C1E; --be-ink-700: #3A3A3C; --be-ink-500: #6B6B70;
    --be-ink-300: #A6A6AB; --be-ink-200: #D9D9DD; --be-ink-100: #F2F2F4; --be-ink-50: #FAFAF7;
    --be-navy: #16264A; --be-navy-hover: #22365A; --be-navy-link: #1B4F8A;
    /* HOME2 D10 navy theme: the chrome runs #0f1b33 -> #16264a (owner/designer), the logo sits on a deeper block */
    --be-navy-900: #0F1B33; --be-navy-950: #0A1326; --be-navy-200: #D3DBE8;

    /* semantic (Bootstrap) */
    --bs-success: #267A4D; --bs-success-rgb: 38, 122, 77; /* EU1: was #2E8B57 (white on it 4.25:1) */
    --bs-danger: #D33F2E; --bs-danger-rgb: 211, 63, 46;
    --bs-info: #2B6CB0; --bs-info-rgb: 43, 108, 176;
    --bs-warning: #CFC414; --bs-warning-rgb: 207, 196, 20;
    --bs-light: #F2F2F4; --bs-light-rgb: 242, 242, 244;
    --bs-dark: #0D0D0D; --bs-dark-rgb: 13, 13, 13;
    --bs-body-font-size: 1rem;
    --bs-focus-ring-color: rgba(241, 232, 74, .6);

    /* the brand action (add to cart, checkout) is yellow in every theme */
    --th-brand-bg: var(--be-yellow-500); --th-brand-fg: var(--be-ink-950); --th-brand-hover: var(--be-yellow-400);
    --th-focus: var(--be-yellow-400);
    --th-focus-edge: var(--be-ink-950);
}

/* ---------- theme variables ---------- */
[data-theme="noir"] {
    --bs-primary: #EBE01E; --bs-primary-rgb: 235, 224, 30;
    --bs-secondary: #1C1C1E; --bs-secondary-rgb: 28, 28, 30;
    --bs-body-bg: #fff; --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: #1C1C1E; --bs-body-color-rgb: 28, 28, 30;
    --bs-emphasis-color: #0D0D0D;
    --bs-secondary-color: #6B6B70;
    --bs-tertiary-bg: #F2F2F4;
    --bs-border-color: #D9D9DD;
    --bs-link-color: #1C1C1E; --bs-link-color-rgb: 28, 28, 30;
    --bs-link-hover-color: #7D7607; --bs-link-hover-color-rgb: 125, 118, 7; /* EU1: was #A89F0C (2.75:1 on white) */

    --th-primary-bg: var(--be-yellow-500); --th-primary-fg: var(--be-ink-950); --th-primary-hover: var(--be-yellow-400);
    --th-primary-ink: var(--be-ink-950);          /* primary colour usable as text/outline on white */
    --th-secondary-bg: var(--be-ink-900); --th-secondary-fg: #fff; --th-secondary-hover: var(--be-ink-700);
    --th-header-bg: var(--be-ink-950); --th-header-fg: #fff; --th-header-rule: 3px solid var(--be-yellow-500);
    --th-footer-bg: var(--be-ink-950); --th-footer-fg: var(--be-ink-200); --th-footer-link: #fff; --th-footer-link-hover: var(--be-yellow-400);
    --th-card-bg: #fff; --th-card-border: var(--be-ink-200);
    --th-badge-bg: var(--be-yellow-500); --th-badge-fg: var(--be-ink-950);
    --th-price: var(--be-ink-950);
    --th-tabbar-bg: var(--be-ink-950); --th-tabbar-fg: var(--be-ink-200);
    --th-header-dark: 1;
}
[data-theme="daylight"] {
    --bs-primary: #0D0D0D; --bs-primary-rgb: 13, 13, 13;
    --bs-secondary: #6B6B70; --bs-secondary-rgb: 107, 107, 112;
    --bs-body-bg: #FAFAF7; --bs-body-bg-rgb: 250, 250, 247;
    --bs-body-color: #1C1C1E; --bs-body-color-rgb: 28, 28, 30;
    --bs-emphasis-color: #0D0D0D;
    --bs-secondary-color: #6B6B70;
    --bs-tertiary-bg: #F2F2F4;
    --bs-border-color: #D9D9DD;
    --bs-link-color: #1C1C1E; --bs-link-color-rgb: 28, 28, 30;
    --bs-link-hover-color: #6E6806; --bs-link-hover-color-rgb: 110, 104, 6; /* EU1: was #7D7607 (4.50:1 on the daylight page) */

    --th-primary-bg: var(--be-ink-950); --th-primary-fg: #fff; --th-primary-hover: var(--be-ink-700);
    --th-primary-ink: var(--be-ink-950);
    --th-secondary-bg: var(--be-ink-200); --th-secondary-fg: var(--be-ink-950); --th-secondary-hover: var(--be-ink-300);
    --th-header-bg: #fff; --th-header-fg: var(--be-ink-900); --th-header-rule: 4px solid var(--be-yellow-500);
    --th-footer-bg: var(--be-ink-100); --th-footer-fg: var(--be-ink-900); --th-footer-link: var(--be-ink-900); --th-footer-link-hover: var(--be-yellow-800);
    --th-card-bg: #fff; --th-card-border: var(--be-ink-200);
    --th-badge-bg: var(--be-yellow-200); --th-badge-fg: var(--be-ink-900);
    --th-price: var(--be-ink-950);
    --th-tabbar-bg: #fff; --th-tabbar-fg: var(--be-ink-700);
}
[data-theme="deep"] {
    /* HOME2 D10: navy = the default theme. Navy chrome (header, hero, footer, tab bar), a cool off-white page so product
       photos and prices read on white cards, yellow kept as the accent and the money actions. Contrast (WCAG AA, checked by
       tests/Unit/Home2ThemeContrastTest.php): body text 15.7:1 on the page, secondary text 5.5:1, links 7.7:1, white on
       navy 17.1:1 (14.9:1 at the lighter end), #D3DBE8 on navy 12.3:1, yellow on navy 12.4:1, ink on yellow 14.1:1. */
    --bs-primary: #16264A; --bs-primary-rgb: 22, 38, 74;
    --bs-secondary: #3A3A3C; --bs-secondary-rgb: 58, 58, 60;
    --bs-body-bg: #F4F6F9; --bs-body-bg-rgb: 244, 246, 249;
    --bs-body-color: #1C1C1E; --bs-body-color-rgb: 28, 28, 30;
    --bs-emphasis-color: #0D0D0D;
    --bs-secondary-color: #5E6470;
    --bs-tertiary-bg: #E9EDF3;
    --bs-border-color: #D5DBE4;
    --bs-link-color: #1B4F8A; --bs-link-color-rgb: 27, 79, 138;
    --bs-link-hover-color: #16264A; --bs-link-hover-color-rgb: 22, 38, 74;

    --th-primary-bg: var(--be-navy); --th-primary-fg: #fff; --th-primary-hover: var(--be-navy-hover);
    --th-primary-ink: var(--be-navy);
    --th-secondary-bg: var(--be-ink-700); --th-secondary-fg: #fff; --th-secondary-hover: var(--be-ink-900);
    --th-header-bg: linear-gradient(90deg, var(--be-navy-900) 0%, var(--be-navy) 100%); --th-header-fg: #fff; --th-header-rule: 1px solid #22365A;
    --th-footer-bg: var(--be-navy-900); --th-footer-fg: var(--be-navy-200); --th-footer-link: #fff; --th-footer-link-hover: var(--be-yellow-400);
    --th-card-bg: #fff; --th-card-border: #D5DBE4;
    --th-badge-bg: var(--be-yellow-500); --th-badge-fg: var(--be-ink-950);
    --th-price: var(--be-ink-950);
    --th-tabbar-bg: var(--be-navy-900); --th-tabbar-fg: var(--be-navy-200);
    --th-header-dark: 1;
}

/* ---------- buttons ---------- */
.btn-primary {
    --bs-btn-bg: var(--th-primary-bg); --bs-btn-border-color: var(--th-primary-bg); --bs-btn-color: var(--th-primary-fg);
    --bs-btn-hover-bg: var(--th-primary-hover); --bs-btn-hover-border-color: var(--th-primary-hover); --bs-btn-hover-color: var(--th-primary-fg);
    --bs-btn-active-bg: var(--th-primary-hover); --bs-btn-active-border-color: var(--th-primary-hover); --bs-btn-active-color: var(--th-primary-fg);
    --bs-btn-disabled-bg: var(--th-primary-bg); --bs-btn-disabled-border-color: var(--th-primary-bg); --bs-btn-disabled-color: var(--th-primary-fg);
    --bs-btn-focus-shadow-rgb: 241, 232, 74;
    font-weight: 600;
}
.btn-brand,
.btn-primary.btn-brand {
    --bs-btn-bg: var(--th-brand-bg); --bs-btn-border-color: var(--th-brand-bg); --bs-btn-color: var(--th-brand-fg);
    --bs-btn-hover-bg: var(--th-brand-hover); --bs-btn-hover-border-color: var(--th-brand-hover); --bs-btn-hover-color: var(--th-brand-fg);
    --bs-btn-active-bg: var(--th-brand-hover); --bs-btn-active-border-color: var(--th-brand-hover); --bs-btn-active-color: var(--th-brand-fg);
}
.btn-secondary {
    --bs-btn-bg: var(--th-secondary-bg); --bs-btn-border-color: var(--th-secondary-bg); --bs-btn-color: var(--th-secondary-fg);
    --bs-btn-hover-bg: var(--th-secondary-hover); --bs-btn-hover-border-color: var(--th-secondary-hover); --bs-btn-hover-color: var(--th-secondary-fg);
    --bs-btn-active-bg: var(--th-secondary-hover); --bs-btn-active-border-color: var(--th-secondary-hover); --bs-btn-active-color: var(--th-secondary-fg);
}
.btn-outline-primary {
    --bs-btn-color: var(--th-primary-ink); --bs-btn-border-color: var(--th-primary-ink);
    --bs-btn-hover-bg: var(--th-primary-bg); --bs-btn-hover-border-color: var(--th-primary-bg); --bs-btn-hover-color: var(--th-primary-fg);
    --bs-btn-active-bg: var(--th-primary-bg); --bs-btn-active-border-color: var(--th-primary-bg); --bs-btn-active-color: var(--th-primary-fg);
}
.btn-outline-secondary {
    --bs-btn-color: var(--be-ink-700); --bs-btn-border-color: var(--be-ink-300);
    --bs-btn-hover-bg: var(--be-ink-900); --bs-btn-hover-border-color: var(--be-ink-900); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--be-ink-900); --bs-btn-active-border-color: var(--be-ink-900); --bs-btn-active-color: #fff;
}
/* product-page finish picker: the chosen finish */
.btn-dark {
    --bs-btn-bg: var(--be-ink-950); --bs-btn-border-color: var(--be-ink-950); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--be-ink-700); --bs-btn-hover-border-color: var(--be-ink-700);
}
[data-theme="noir"] .btn-dark, [data-theme="deep"] .btn-dark {
    --bs-btn-bg: var(--be-yellow-500); --bs-btn-border-color: var(--be-yellow-500); --bs-btn-color: var(--be-ink-950);
    --bs-btn-hover-bg: var(--be-yellow-400); --bs-btn-hover-border-color: var(--be-yellow-400); --bs-btn-hover-color: var(--be-ink-950);
    --bs-btn-active-bg: var(--be-yellow-400); --bs-btn-active-color: var(--be-ink-950);
}
.btn-link { --bs-btn-color: var(--bs-link-color); --bs-btn-hover-color: var(--bs-link-hover-color); }

/* focus: a yellow ring with a thin dark line inside the gap, so it reads on white and on black */
:focus-visible { outline: 3px solid var(--th-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--th-focus-edge); }
.form-control:focus, .form-select:focus {
    border-color: var(--be-ink-900);
    box-shadow: 0 0 0 .25rem rgba(241, 232, 74, .6);
    outline: 0;
}
.btn:focus-visible, .btn-check:focus-visible + .btn {
    outline: 3px solid var(--th-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--th-focus-edge);
}
.form-check-input:checked { background-color: var(--be-ink-950); border-color: var(--be-ink-950); }
[data-theme="deep"] .form-check-input:checked { background-color: var(--be-navy); border-color: var(--be-navy); }
.form-check-input:focus { border-color: var(--be-ink-900); box-shadow: 0 0 0 .25rem rgba(241, 232, 74, .6); }

/* ---------- header ---------- */
.site-header {
    background: var(--th-header-bg); color: var(--th-header-fg);
    border-bottom: var(--th-header-rule);
}
.brand-link { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; }
.brand-logo { display: block; width: 120px; height: auto; }
@media (min-width: 768px) { .brand-logo { width: 160px; } }
.site-header .brand-deep { background: var(--be-navy-950); border-radius: .5rem; padding: .35rem .7rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.site-footer .brand-deep { background: var(--be-navy-950); border-radius: .5rem; padding: .35rem .7rem; }
.site-header .nav-link { color: var(--th-header-fg); border-bottom: 2px solid transparent; padding-left: 0; padding-right: 0; }
.site-header .nav-link:hover, .site-header .nav-link.active, .site-header .nav-link[aria-current] {
    color: var(--th-header-fg); border-bottom-color: var(--be-yellow-500);
}
.site-header .btn-link.nav-link { text-decoration: none; }
.site-header .text-muted { color: inherit !important; opacity: .75; }
.site-header summary.nav-link { cursor: pointer; }
/* the Explore button */
.btn-explore {
    --bs-btn-bg: var(--be-yellow-500); --bs-btn-border-color: var(--be-yellow-500); --bs-btn-color: var(--be-ink-950);
    --bs-btn-hover-bg: var(--be-yellow-400); --bs-btn-hover-border-color: var(--be-yellow-400); --bs-btn-hover-color: var(--be-ink-950);
    --bs-btn-active-bg: var(--be-yellow-400); --bs-btn-active-color: var(--be-ink-950);
    font-weight: 600;
}
[data-theme="daylight"] .btn-explore {
    --bs-btn-bg: var(--be-ink-950); --bs-btn-border-color: var(--be-ink-950); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--be-ink-700); --bs-btn-hover-border-color: var(--be-ink-700); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--be-ink-700); --bs-btn-active-color: #fff;
}
/* header search button + selects on a dark header */
[data-theme="noir"] .site-header .btn-outline-secondary,
[data-theme="deep"] .site-header .btn-outline-secondary {
    --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .45);
    --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-hover-color: var(--be-ink-950);
}
[data-theme="noir"] .site-header .btn-link, [data-theme="deep"] .site-header .btn-link { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }
/* header links on a dark header (the "my car" line); the white panels keep the page link colours */
[data-theme="noir"] .site-header .navbar-nav,
[data-theme="deep"] .site-header .navbar-nav {
    --bs-link-color-rgb: 255, 255, 255; --bs-link-color: #fff;
    --bs-link-hover-color-rgb: 241, 232, 74; --bs-link-hover-color: var(--be-yellow-400);
}
.site-header .navbar-nav details > ul { --bs-link-color-rgb: 28, 28, 30; --bs-link-hover-color-rgb: 28, 28, 30; }
/* the open language list and Explore panel are white surfaces on every theme */
.site-header details > ul { color: var(--be-ink-900); }
.explore-panel { color: var(--be-ink-900); }
.site-header .badge.text-bg-primary { background: var(--be-yellow-500) !important; color: var(--be-ink-950) !important; }

/* ---------- page furniture ---------- */
.card { --bs-card-bg: var(--th-card-bg); --bs-card-border-color: var(--th-card-border); }
[data-theme="daylight"] .card { box-shadow: 0 1px 0 rgba(13, 13, 13, .04); }
.text-bg-primary, .bg-primary { background-color: var(--th-primary-bg) !important; color: var(--th-primary-fg) !important; }
.text-primary { color: var(--th-primary-ink) !important; }
.border-primary { border-color: var(--th-primary-ink) !important; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--be-ink-300); --bs-breadcrumb-item-active-color: var(--be-ink-500); }
.breadcrumb a { color: var(--bs-link-color); }
.page-link { --bs-pagination-color: var(--be-ink-900); --bs-pagination-hover-color: var(--be-ink-950); --bs-pagination-hover-bg: var(--be-yellow-100);
    --bs-pagination-focus-color: var(--be-ink-950); --bs-pagination-focus-bg: var(--be-yellow-100); }
.pagination { --bs-pagination-active-bg: var(--be-yellow-500); --bs-pagination-active-border-color: var(--be-yellow-600); --bs-pagination-active-color: var(--be-ink-950);
    --bs-pagination-color: var(--be-ink-900); --bs-pagination-hover-color: var(--be-ink-950); --bs-pagination-hover-bg: var(--be-yellow-100); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--th-primary-bg); --bs-nav-pills-link-active-color: var(--th-primary-fg); }
.list-group { --bs-list-group-active-bg: var(--th-primary-bg); --bs-list-group-active-border-color: var(--th-primary-bg); --bs-list-group-active-color: var(--th-primary-fg); }
.dropdown-item.active, .dropdown-item:active { background: var(--th-primary-bg); color: var(--th-primary-fg); }
.progress { --bs-progress-bar-bg: var(--be-yellow-500); }
.alert-warning { --bs-alert-bg: var(--be-yellow-100); --bs-alert-border-color: var(--be-yellow-300); --bs-alert-color: var(--be-yellow-900); }

/* badges: sale + stock follow the theme; the rest keep Bootstrap's semantic colours */
.badge.bg-danger, .badge.text-bg-success {
    background-color: var(--th-badge-bg) !important; color: var(--th-badge-fg) !important;
}
[data-theme="noir"] .badge.bg-danger, [data-theme="noir"] .badge.text-bg-success { background-color: var(--be-ink-950) !important; color: var(--be-yellow-500) !important; }
[data-theme="deep"] .badge.text-bg-success { background-color: var(--bs-success) !important; color: #fff !important; }
.badge.text-bg-warning { background-color: var(--be-yellow-200) !important; color: var(--be-ink-900) !important; }

/* price */
.fw-bold[data-testid="product-price"], .price-main { color: var(--th-price); }
[data-theme="deep"] .price-main { background: linear-gradient(transparent 62%, var(--be-yellow-500) 62%); display: inline-block; padding: 0 .25rem; margin-left: -.25rem; }
[data-theme="noir"] .price-main, [data-theme="daylight"] .price-main { color: var(--be-ink-950); }
.price-card { color: var(--th-price); }

/* ---------- footer ---------- */
.site-footer { background: var(--th-footer-bg); color: var(--th-footer-fg); --bs-secondary-color: var(--th-footer-fg); --bs-body-color: var(--th-footer-fg); }
.site-footer a, .site-footer a.text-muted { color: var(--th-footer-link) !important; }
.site-footer a:hover { color: var(--th-footer-link-hover) !important; }
.site-footer .brand-link { display: inline-block; }
.site-footer .brand-logo { width: 120px; }
.site-footer hr { border-color: currentColor; opacity: .2; }
[data-theme="daylight"] .site-footer { border-top: 1px solid var(--be-ink-200); }

/* ---------- temporary theme switcher bar ---------- */
.theme-switcher { background: #111; color: #cfcfd4; font-size: .8125rem; }
.theme-switcher-label { opacity: .7; margin-right: .25rem; }
.theme-switcher-btn {
    appearance: none; border: 1px solid #3A3A3C; background: transparent; color: #fff; border-radius: 999px;
    padding: .1rem .75rem .1rem .5rem; font-size: inherit; line-height: 1.6; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
}
.theme-switcher-btn::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); }
.theme-swatch-noir::before { background: linear-gradient(135deg, #0D0D0D 50%, #EBE01E 50%); }
.theme-swatch-daylight::before { background: linear-gradient(135deg, #fff 50%, #EBE01E 50%); }
.theme-swatch-deep::before { background: linear-gradient(135deg, #1B2A41 50%, #EBE01E 50%); }
.theme-switcher-btn:hover { border-color: #EBE01E; }
.theme-switcher-btn.is-active { background: #EBE01E; border-color: #EBE01E; color: #0D0D0D; font-weight: 600; }

/* ---------- HOME2: homepage hero (car chooser banner) ---------- */
.home-hero { background: linear-gradient(135deg, #0f1b33 0%, #16264a 100%); color: #fff; padding: 1rem 0 1.5rem; }
@media (min-width: 992px) { .home-hero { padding: 2.25rem 0 2.5rem; } }
.home-hero-title { font-size: clamp(1.45rem, 1.05rem + 1.6vw, 2.35rem); font-weight: 700; line-height: 1.15; color: #fff; }
.form-label.req::after { content: " *"; color: var(--bs-danger, #dc3545); } /* SHP4: required-field mark of the address forms */
.home-hero-hint, .home-hero .form-label { color: #D3DBE8; }
/* the studio photos (HERO2) come trimmed on a light grey seamless backdrop (edges measured ~#ECECEA, not the navy of the prompt):
   they sit on a "studio" panel of that grey, so the photo reads as one object on the navy instead of a white rectangle */
.home-hero-media { display: flex; justify-content: center; }
.home-hero-stage { background: #ECECEA; border-radius: 1rem; padding: .5rem; box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .35); max-width: 100%; }
.home-hero-img { display: block; max-width: 100%; height: auto; max-height: 190px; object-fit: contain; margin: 0 auto; border-radius: .5rem; }
@media (min-width: 992px) { .home-hero-img { max-height: 340px; } .home-hero-stage { padding: .75rem; } }
.home-hero-change > summary { cursor: pointer; color: var(--be-yellow-400); }
.home-hero .car-chooser .btn-primary { --bs-btn-bg: var(--be-yellow-500); --bs-btn-border-color: var(--be-yellow-500); --bs-btn-color: var(--be-ink-950);
    --bs-btn-hover-bg: var(--be-yellow-400); --bs-btn-hover-border-color: var(--be-yellow-400); --bs-btn-hover-color: var(--be-ink-950);
    --bs-btn-disabled-bg: var(--be-yellow-500); --bs-btn-disabled-color: var(--be-ink-950); }

/* ---------- HOME2: homepage tiles (slides) ---------- */
.home-slide { overflow: hidden; color: var(--bs-body-color); transition: box-shadow .15s ease, transform .15s ease; }
.home-slide:hover { box-shadow: 0 .5rem 1.25rem rgba(15, 27, 51, .18); transform: translateY(-2px); }
.home-slide-img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #16264a; }
.home-slide-title { font-weight: 700; font-size: 1.05rem; color: var(--bs-emphasis-color); }
.home-slide-sub { color: var(--bs-secondary-color); }
@media (prefers-reduced-motion: reduce) { .home-slide { transition: none; } .home-slide:hover { transform: none; } }

/* ---------- HOME2: category row, brand strip, featured ---------- */
.home-category-row ul, .home-brand-row { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; padding-bottom: .25rem; -webkit-overflow-scrolling: touch; }
@media (min-width: 992px) { .home-category-row ul { flex-wrap: wrap; overflow: visible; } }
.home-category-chip { display: inline-block; white-space: nowrap; padding: .45rem .9rem; border: 1px solid var(--bs-border-color); border-radius: 999px;
    color: var(--bs-body-color); text-decoration: none; font-size: .925rem; background: var(--th-card-bg); }
.home-category-chip:hover { border-color: var(--th-primary-ink); color: var(--bs-emphasis-color); background: var(--bs-tertiary-bg); }
.home-brand { display: flex; align-items: center; justify-content: center; width: 144px; height: 72px; padding: 12px; border: 1px solid var(--bs-border-color);
    border-radius: .5rem; background: #fff; }
.home-brand img { width: 120px; height: 48px; object-fit: contain; }
.home-brand:hover { border-color: var(--th-primary-ink); }

/* ---------- HOME2 D6: product card v2 ---------- */
.product-card { --pc-accent: #5C5C61; overflow: hidden; }
.product-card-media img { width: 100%; height: 100%; }
.product-card-badges { position: absolute; top: .5rem; left: .5rem; display: flex; flex-direction: column; gap: .25rem; z-index: 2; pointer-events: none; }
.pc-badge { display: inline-block; padding: .15rem .5rem; border-radius: .25rem; font-size: .75rem; font-weight: 700; line-height: 1.4; width: max-content; }
.pc-badge-clearance { background: var(--be-ink-950); color: var(--be-yellow-500); }
.pc-badge-promo { background: #B42318; color: #fff; }
.pc-badge-new { background: var(--be-yellow-500); color: var(--be-ink-950); }
.product-card-eyebrow { color: var(--pc-accent); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.product-card-brand { font-size: .8rem; color: var(--bs-secondary-color); font-weight: 600; }
.product-card-title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .25rem; }
.product-card-large .product-card-title { -webkit-line-clamp: 3; line-clamp: 3; }
.product-card-title a:hover { text-decoration: underline !important; }
.product-card-spec { color: var(--bs-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card-lead { color: var(--bs-secondary-color); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc-stars { color: #8A5D00; letter-spacing: .05em; }
.pc-qty { width: 6.5rem; flex: 0 0 auto; }
.pc-qty .form-control { padding-left: .25rem; padding-right: .25rem; -moz-appearance: textfield; }
.pc-qty .form-control::-webkit-outer-spin-button, .pc-qty .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pc-cta {
    --bs-btn-bg: var(--th-brand-bg); --bs-btn-border-color: var(--th-brand-bg); --bs-btn-color: var(--th-brand-fg); font-weight: 600;
    --bs-btn-hover-bg: var(--th-brand-hover); --bs-btn-hover-border-color: var(--th-brand-hover); --bs-btn-hover-color: var(--th-brand-fg);
    --bs-btn-active-bg: var(--th-brand-hover); --bs-btn-active-border-color: var(--th-brand-hover); --bs-btn-active-color: var(--th-brand-fg);
}
.product-card-large .card-body { padding: 1rem 1.25rem; }
.pc-buy { flex-wrap: wrap; }
@media (max-width: 575.98px) { .product-card .card-body { padding: .6rem; } .pc-qty { width: 100%; } }


/* ---------- HOME2 D7: header v2 ---------- */
.header-row { min-height: 3rem; }
.site-header .brand-logo { width: 112px; }
@media (min-width: 768px) { .site-header .brand-logo { width: 150px; } }
.header-icon { display: inline-flex; align-items: center; gap: .35rem; line-height: 1; padding-top: .35rem !important; padding-bottom: .35rem !important; }
.header-icons .nav-link { border-bottom: 0 !important; }
.header-icons summary { list-style: none; cursor: pointer; }
.header-icons summary::-webkit-details-marker { display: none; }
.header-cart-count { position: absolute; top: -.2rem; right: -.55rem; font-size: .65rem; }
@media (min-width: 1200px) { .header-cart-count { position: static; } }
.header-panel { color: var(--be-ink-900); }
/* Language / country panel on phones: anchored to the full-width header (position:relative) instead of the 40 px summary, so it
   spans the viewport minus a 16 px gutter on each side (end-0 on the summary pushed 87 px of it off the left edge at 390 px). */
@media (max-width: 767.98px) {
    .header-locale { position: static !important; }
    .header-locale .header-panel { top: 100%; left: 1rem; right: 1rem !important; /* beats Bootstrap end-0 */  min-width: 0 !important; max-height: calc(100vh - 6rem); overflow-y: auto; }
}
.header-lang-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .5rem; max-height: 26rem; overflow-y: auto; }
.header-lang-list .dropdown-item { white-space: normal; padding-inline: .5rem; }
@media (max-width: 575.98px) { .header-lang-list { grid-template-columns: minmax(0, 1fr); max-height: 55vh; } }
.header-my-car { max-width: 17rem; }
.header-my-car-name { display: inline-block; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.header-search .form-control { border-radius: 999px; padding-left: 1rem; }
.header-search-btn { border-radius: 999px; display: inline-flex; align-items: center; gap: .35rem; }
/* Explore: a text item, not a yellow pill (designer) */
[data-theme="deep"] .btn-explore, [data-theme="noir"] .btn-explore {
    --bs-btn-bg: transparent; --bs-btn-border-color: rgba(255, 255, 255, .3); --bs-btn-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, .08); --bs-btn-hover-border-color: var(--be-yellow-400); --bs-btn-hover-color: var(--be-yellow-400);
    --bs-btn-active-bg: rgba(255, 255, 255, .12); --bs-btn-active-color: var(--be-yellow-400);
}
[data-theme="daylight"] .btn-explore {
    --bs-btn-bg: transparent; --bs-btn-border-color: var(--be-ink-300); --bs-btn-color: var(--be-ink-900);
    --bs-btn-hover-bg: var(--be-ink-100); --bs-btn-hover-border-color: var(--be-ink-900); --bs-btn-hover-color: var(--be-ink-950);
    --bs-btn-active-bg: var(--be-ink-100); --bs-btn-active-color: var(--be-ink-950);
}

/* ---------- HOME2 D7: mobile tab bar + categories sheet ---------- */
.tab-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; height: calc(3.5rem + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); background: var(--th-tabbar-bg, #0F1B33); color: var(--th-tabbar-fg, #D3DBE8);
    border-top: 1px solid rgba(127, 127, 127, .25); box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .15); }
.tab-bar-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    color: inherit; text-decoration: none; font-size: .68rem; line-height: 1.1; min-width: 0; }
.tab-bar-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-bar-item[aria-current], .tab-bar-item:hover { color: var(--be-yellow-500); }
[data-theme="daylight"] .tab-bar-item[aria-current], [data-theme="daylight"] .tab-bar-item:hover { color: var(--be-ink-950); font-weight: 700; }
.tab-bar-count { position: absolute; top: .3rem; left: 55%; background: var(--be-yellow-500); color: var(--be-ink-950); border-radius: 999px;
    font-size: .6rem; font-weight: 700; padding: 0 .35rem; line-height: 1.4; }
@media (max-width: 991.98px) { body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); } .consent-banner, [data-testid="consent-banner"] { bottom: calc(3.5rem + env(safe-area-inset-bottom)) !important; } }
.categories-sheet { display: none; }
.categories-sheet:target { display: block; position: fixed; inset: 0 0 calc(3.5rem + env(safe-area-inset-bottom)) 0; z-index: 1045; background: #fff;
    color: var(--be-ink-900); overflow-y: auto; }
.categories-sheet-link { display: block; padding: .8rem 1rem; border-bottom: 1px solid var(--be-ink-100); color: var(--be-ink-900); text-decoration: none; font-weight: 600; }

/* ---------- HOME2 D7: footer v2 ---------- */
.footer-hours dt, .footer-hours dd { font-size: inherit; }
.footer-map { position: relative; border-radius: .5rem; overflow: hidden; max-width: 320px; text-decoration: none; }
.footer-map img { display: block; width: 100%; height: auto; }
.footer-map-placeholder { display: flex; align-items: center; justify-content: center; height: 120px; color: var(--be-yellow-500);
    background-color: rgba(255, 255, 255, .06);
    background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 22px 22px; }
[data-theme="daylight"] .footer-map-placeholder { background-color: #fff; color: var(--be-ink-900);
    background-image: linear-gradient(var(--be-ink-200) 1px, transparent 1px), linear-gradient(90deg, var(--be-ink-200) 1px, transparent 1px); }
.footer-map-label { display: block; padding: .35rem .6rem; background: rgba(0, 0, 0, .25); }
[data-theme="daylight"] .footer-map-label { background: var(--be-ink-100); }
.footer-acc > summary { list-style: none; }
.footer-acc > summary::-webkit-details-marker { display: none; }
@media (max-width: 767.98px) { .footer-acc > summary { cursor: pointer; } .footer-acc > summary::after { content: " +"; opacity: .7; } .footer-acc[open] > summary::after { content: " –"; } }
@media (min-width: 768px) { .footer-acc > summary { pointer-events: none; } }
.footer-theme .theme-switcher-btn { color: inherit; border-color: rgba(127, 127, 127, .55); }
.footer-theme .theme-switcher-btn.is-active { color: var(--be-ink-950); }
.theme-swatch-deep::before { background: linear-gradient(135deg, #0F1B33 50%, #EBE01E 50%); }

/* ---------- HOME2 D9: Google quotes (moved here from google-quotes.css: the footer renders after <head>) ---------- */
.google-quotes .gq-quote[hidden] { display: none; }
.google-quotes .gq-stars { color: #EBE01E; letter-spacing: .1em; }
[data-theme="daylight"] .google-quotes .gq-stars { color: #8A5D00; }
.google-quotes blockquote { margin: 0; }
@media (prefers-reduced-motion: no-preference) { .google-quotes .gq-quote { animation: gq-in .4s ease; } }
@keyframes gq-in { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 768px) {
    .header-row { flex-wrap: nowrap !important; }
    .header-search { flex: 1 1 auto; min-width: 8rem; }
    .header-icons { flex: 0 0 auto; }
}
@media (min-width: 992px) and (max-width: 1199.98px) { .header-my-car-name { max-width: 7.5rem; } }

/* ---------- HOME2 D8: contact form ---------- */
.contact-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 992px) { .header-search { min-width: 10rem; } .header-my-car { white-space: nowrap; } }
@media (min-width: 1200px) { .header-search { min-width: 15rem; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .header-my-car [data-testid="header-my-car-change"] { display: none; } }
@media (min-width: 992px) and (max-width: 1399.98px) { .header-my-car-name { max-width: 9rem; } .header-icons .d-xl-inline { display: none !important; } }

/* ---------- UX1: mobile repair pass ---------- */
/* Cart lines stack as one block per product below 768 px (the 5-column table squeezed the name into a 4-letter column
   and the qty input + Update button overlapped the price on iOS). */
.cart-qty-form .form-control { min-width: 4rem; flex: 1 1 auto; }
.cart-qty-form .btn { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 767.98px) {
    table.cart-lines, table.cart-lines tbody { display: block; }
    table.cart-lines thead { display: none; }
    table.cart-lines tr {
        display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; row-gap: .5rem;
        padding: .9rem 0; border-bottom: 1px solid var(--bs-border-color);
    }
    table.cart-lines td { display: block; padding: 0; border: 0; background: none; box-shadow: none; min-width: 0; overflow-wrap: anywhere; }
    table.cart-lines .cart-line-product { grid-column: 1 / -1; font-weight: 600; }
    table.cart-lines .cart-line-qty { grid-column: 1 / -1; }
    table.cart-lines .cart-line-qty .cart-qty-form { max-width: 14rem; }
    table.cart-lines .cart-line-qty .form-control, table.cart-lines .cart-line-qty .btn { min-height: 44px; font-size: 1rem; }
    table.cart-lines td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--bs-secondary-color); font-weight: 400; }
    table.cart-lines .cart-line-total { text-align: right; font-weight: 600; }
    table.cart-lines .cart-line-remove { grid-column: 1 / -1; }
    table.cart-lines .cart-line-remove .btn { min-height: 44px; }
}

/* Touch targets and iOS input zoom (any phone/small tablet): controls reach 44 px, form fields use 16 px text so Safari
   does not zoom the page on focus (that zoom shifted the cart fields over each other). */
@media (max-width: 767.98px) {
    .btn, .btn-sm, .form-control, .form-control-sm, .form-select, .form-select-sm, .input-group-sm > .btn, .input-group-sm > .form-control { min-height: 44px; }
    .form-control, .form-control-sm, .form-select, .form-select-sm, .input-group-sm > .form-control, textarea, select, input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="tel"], input[type="password"] { font-size: 16px; }
    .btn, .btn-sm { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
    summary.btn { display: inline-flex !important; }
    .btn-sm { padding-left: .85rem; padding-right: .85rem; }
    .pc-qty .btn { min-width: 44px; }
    .header-icon { min-width: 40px; min-height: 44px; padding-inline: .25rem; }
    .navbar-toggler { min-width: 44px; min-height: 44px; }
    .header-icon, .navbar-toggler { display: inline-flex; align-items: center; justify-content: center; }
    .footer-acc > summary { padding-block: .6rem; }
    /* the consent banner: one row of three 44 px buttons instead of a third of the screen */
    [data-testid="consent-banner"] form { flex-wrap: wrap; }
    [data-testid="consent-banner"] details { flex: 0 0 auto; min-width: 0 !important; }
    [data-testid="consent-banner"] details[open] { flex: 1 1 100%; }
    /* product names in the two-column cards are not cut to two lines */
    .product-card-title { -webkit-line-clamp: 3; line-clamp: 3; }
}

/* HOME1: homepage trust row (three promises, inline SVG icons, theme tokens) */
.usp-bar { margin-left: 0; margin-right: 0; padding: 0; }
.usp-item { display: flex; align-items: center; gap: .75rem; height: 100%; padding: .65rem 1rem; background: var(--th-card-bg, #fff); border: 1px solid var(--th-card-border, var(--be-ink-200)); border-radius: .5rem; }
.usp-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--th-primary-bg, var(--be-yellow-500)); color: var(--th-primary-fg, var(--be-ink-950)); }
.usp-text { font-weight: 600; line-height: 1.25; color: var(--bs-emphasis-color, var(--be-ink-950)); }

/* HOME2: award badge (card + product page) — bottom-left over the image; the text badge is yellow on ink like the other pills */
.award-badge { position: absolute; left: .5rem; bottom: .5rem; z-index: 2; max-width: calc(100% - 1rem); display: inline-flex; align-items: center; pointer-events: auto; }
.award-badge img { display: block; height: 36px; width: auto; max-width: 100%; }
.award-badge-text { display: inline-block; padding: .15rem .5rem; border-radius: .25rem; background: var(--be-ink-950); color: var(--be-yellow-500); font-size: .72rem; font-weight: 700; line-height: 1.4; }
.award-badge-pdp { left: .75rem; bottom: auto; top: .75rem; }

/* HOME2 item 7: mega menu. Desktop = each L2 a row (name + count left, 3 thumbnails right) and a brand column; phone = accordion
   with the L3 names and the first 2 thumbnails per row. The pane itself is positioned by the layout's .explore-group-body rules. */
.explore-mega { display: flex; flex-direction: column; gap: .5rem; }
.explore-row { padding: .6rem 0; border-top: 1px solid var(--bs-border-color); }
.explore-row:first-child { border-top: 0; }
.explore-row-head { display: flex; align-items: baseline; gap: .5rem; }
.explore-row-name { font-weight: 600; color: var(--bs-emphasis-color); text-decoration: none; }
.explore-row-name:hover, .explore-row-name:focus-visible { text-decoration: underline; }
.explore-row-count { font-size: .8rem; color: var(--bs-secondary-color); }
.explore-l3 { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .25rem !important; font-size: .9rem; }
.explore-l3 a { color: var(--bs-body-color); text-decoration: none; }
.explore-l3 a:hover { text-decoration: underline; }
.explore-thumbs { display: flex; gap: .5rem; margin-top: .5rem !important; }
.explore-thumbs li { width: 64px; min-width: 0; }
.explore-thumbs a { display: block; color: var(--bs-body-color); text-decoration: none; font-size: .68rem; line-height: 1.2; }
.explore-thumbs img { display: block; width: 64px; height: 64px; object-fit: contain; background: var(--bs-tertiary-bg); border-radius: .25rem; margin-bottom: .2rem; }
.explore-thumbs span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.explore-thumbs li:nth-child(3) { display: none; }
@media (min-width: 992px) {
    .explore-mega { flex-direction: row; align-items: flex-start; gap: 1.5rem; }
    .explore-mega-main { flex: 1 1 auto; min-width: 0; }
    .explore-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; }
    .explore-row-head { flex: 1 1 10rem; min-width: 0; flex-wrap: wrap; }
    .explore-thumbs { margin-top: 0 !important; gap: .75rem; flex: 0 0 auto; }
    .explore-thumbs li { width: 72px; }
    .explore-thumbs img { width: 72px; height: 72px; }
    .explore-thumbs li:nth-child(3) { display: block; }
    .explore-brands { flex: 0 0 13rem; border-left: 1px solid var(--bs-border-color); padding-left: 1.25rem; max-height: calc(100vh - 12rem); overflow-y: auto; }
    .explore-brands-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); margin: 0 0 .5rem; }
    .explore-brands ul { column-count: 1; font-size: .9rem; }
    .explore-brands li { padding: .1rem 0; }
    .explore-brands a { color: var(--bs-body-color); text-decoration: none; overflow-wrap: anywhere; }
    .explore-brands a:hover { text-decoration: underline; }
}

/* HOME2 phase B: brands grid + A–Z */
.home-brand-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 768px) { .home-brand-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 992px) { .home-brand-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .75rem; } }
.home-brand-grid .home-brand { width: auto; height: 72px; padding: 8px; }
.home-brand-name { font-weight: 700; font-size: .85rem; line-height: 1.15; text-align: center; color: var(--bs-emphasis-color); overflow-wrap: anywhere; }
.brands-az { column-width: 14rem; column-gap: 1.5rem; }
.brands-az li { break-inside: avoid; padding: .15rem 0; }

/* HOME2 phase B item 1: hero showcase. Sets share one grid cell (the box is as tall as the tallest set: no layout shift on rotation). */
.home-hero-media { min-width: 0; }
.hero-sets { display: grid; grid-template-columns: minmax(0, 1fr); } /* HOME3: a long review text must not widen the track past the hero */
.hero-set { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; visibility: hidden; opacity: 0; transition: opacity .35s ease; }
.hero-set.is-active { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-set { transition: none; } }
@media (max-width: 575.98px) {
    .hero-set { position: relative; /* contains the absolutely positioned .visually-hidden spans of the cards */ grid-template-columns: repeat(3, minmax(9.5rem, 1fr)); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .25rem; }
    .hero-card { scroll-snap-align: start; }
}
.hero-card { display: flex; flex-direction: column; background: #fff; color: var(--be-ink-950, #111); border-radius: .75rem; overflow: hidden; text-decoration: none; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .28); min-width: 0; }
a.hero-card:hover, a.hero-card:focus-visible { color: var(--be-ink-950, #111); box-shadow: 0 .6rem 1.5rem rgba(0, 0, 0, .4); }
.hero-card-media { position: relative; background: #fff; display: block; }
.hero-card-media img { padding: .5rem; }
.hero-card-media > .hero-card-label { top: auto; height: auto; }
.hero-card-label { position: absolute; left: 0; right: 0; bottom: 0; padding: .3rem .6rem; font-size: .72rem; font-weight: 700; line-height: 1.3; background: rgba(15, 27, 51, .88); color: #fff; z-index: 1; }
.hero-card-label-award { background: var(--be-ink-950, #111); color: var(--be-yellow-500, #ffc400); }
.hero-card-label-promo { background: #B42318; }
.hero-card-label-day { background: var(--be-yellow-500, #ffc400); color: var(--be-ink-950, #111); }
.hero-card-body { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .7rem .75rem; min-width: 0; }
.hero-card-brand { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: #5C5C61; }
.hero-card-title { font-size: .85rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-card-title a { color: inherit; }
.hero-card-price { margin-top: .15rem; font-size: .95rem; }
.hero-card-old { color: #5C5C61; font-size: .75rem; margin-right: .35rem; }
.hero-card-review { text-decoration: none; }
.hero-card-review-media { aspect-ratio: 1 / 1; padding: .9rem .8rem 2.2rem; display: flex; flex-direction: column; gap: .4rem; overflow: hidden; background: #F4F6FA; }
.hero-review-stars { margin: 0; color: #E8A400; letter-spacing: .1em; }
.hero-review-quote { margin: 0; font-size: .85rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.hero-review-quote.has-note { -webkit-line-clamp: 6; }
.hero-review-translated { opacity: .75; }
.hero-review-rating { font-size: .72rem; margin-top: .15rem; }
.hero-review-rating strong { font-weight: 600; }
.hero-review-note { font-size: .65rem; line-height: 1.25; color: #5C5C61; }
.hero-card-label-review { background: #1a73e8; }
.brand-logo { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; }
.brand-logo img { display: block; max-width: 220px; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.brand-logo-dark { background: #0f1b33; border-radius: .5rem; padding: .6rem 1rem; }
.hero-dots { display: flex; justify-content: center; gap: .5rem; margin-top: .75rem; }
.hero-dot { width: .6rem; height: .6rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .4); cursor: pointer; }
.hero-dot.is-active { background: var(--be-yellow-500, #ffc400); }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.home-brand-grid .home-brand-dark { background: #0f1b33; border-color: #0f1b33; }