/* ═══════════════════════════════════════════════════════════════════
   XEUS CONNECT — THÈME SOMBRE OR (Dark Gold)
   Insérer APRÈS styles.css : <link rel="stylesheet" href="theme-dark-gold.css">
   Remplace theme-light.css — NE PAS charger les deux en même temps.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════ VARIABLES ══════════════════ */
:root {
    --bg-body: #0A0A0A;
    --bg-section-dark: #141414;
    --bg-section-mid: #1C1C1C;
    --bg-card: #1C1C1C;
    --bg-card-hover: #242424;
    --border-card: #2A2A2A;
    --border-subtle: #242424;
    --border-input: #333333;
    --gold: #B8953F;
    --gold-light: #D4AF5A;
    --gold-dark: #8A6E2F;
    --gold-bg: #120E04;
    --text-primary: #FFFFFF;
    --text-secondary: #BBBBBB;          /* WCAG AA: 11.0:1 sur #0A0A0A */
    --text-tertiary: #8A8A8A;           /* WCAG AA: 5.35:1 sur #0A0A0A (était #666 = 3.66:1 FAIL) */
    --text-on-gold: #0A0A0A;
    /* Override gray-500/600 from styles.css for dark theme (WCAG AA compliance) */
    --gray-400: #B0B0B0;                /* 8.4:1 OK */
    --gray-500: #9A9A9A;                /* 6.0:1 OK (était #737373 = 4.03:1 borderline) */
    --gray-600: #888888;                /* 4.86:1 OK (était #525252 = 2.55:1 FAIL) */
    --badge-stock: #6B1E2E;
    --star-empty: #333333;
    --shadow-card: 0 2px 16px rgba(0,0,0,0.4);
    --shadow-card-hover: 0 4px 24px rgba(184,149,63,0.15);
    /* Dashboard/legacy accent remap (was purple #957EFC / cyan #6EC1E4) */
    --accent-start: #B8953F;
    --accent-end: #D4AF5A;
    --accent-cyan: #D4AF5A;

    /* ────────── DESIGN TOKENS (unifiés) ────────── */
    /* Radii — échelle cohérente (4→28) */
    --xvs-radius-xs: 4px;
    --xvs-radius-sm: 8px;
    --xvs-radius-md: 12px;
    --xvs-radius-lg: 16px;
    --xvs-radius-xl: 20px;
    --xvs-radius-2xl: 28px;
    --xvs-radius-pill: 999px;
    /* Shadows — trois niveaux + hover or */
    --xvs-shadow-sm: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.15);
    --xvs-shadow-md: 0 4px 12px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.20);
    --xvs-shadow-lg: 0 12px 32px rgba(0,0,0,.50), 0 4px 10px rgba(0,0,0,.30);
    --xvs-shadow-gold: 0 12px 32px rgba(184,149,63,.35);
    --xvs-shadow-gold-soft: 0 4px 16px rgba(184,149,63,.18);
    /* Transitions — courbes luxe Apple-like */
    --xvs-ease: cubic-bezier(.16,1,.3,1);
    --xvs-ease-out: cubic-bezier(.25,.46,.45,.94);
    --xvs-dur-fast: 160ms;
    --xvs-dur-base: 250ms;
    --xvs-dur-slow: 420ms;
    --xvs-transition-fast: all var(--xvs-dur-fast) var(--xvs-ease);
    --xvs-transition: all var(--xvs-dur-base) var(--xvs-ease);
    --xvs-transition-slow: all var(--xvs-dur-slow) var(--xvs-ease);
    /* Espacement — échelle 4px */
    --xvs-space-1: 4px;
    --xvs-space-2: 8px;
    --xvs-space-3: 12px;
    --xvs-space-4: 16px;
    --xvs-space-5: 20px;
    --xvs-space-6: 24px;
    --xvs-space-8: 32px;
    --xvs-space-10: 40px;
    --xvs-space-12: 48px;
    --xvs-space-16: 64px;
    /* Z-index stack */
    --xvs-z-dropdown: 100;
    --xvs-z-sticky: 500;
    --xvs-z-navbar: 900;
    --xvs-z-overlay: 9500;
    --xvs-z-modal: 10000;
    --xvs-z-toast: 10500;
}

/* Respect user's motion preference — disable all design-token transitions */
@media (prefers-reduced-motion: reduce) {
    :root {
        --xvs-transition-fast: none;
        --xvs-transition: none;
        --xvs-transition-slow: none;
        --xvs-dur-fast: 0ms;
        --xvs-dur-base: 0ms;
        --xvs-dur-slow: 0ms;
    }
}

/* ═════════ TYPOGRAPHY SCALE (Major Third 1.25) — luxe banque privée ═════════
   Fluid clamp() combine mobile → desktop sans breakpoint.
   H1: 2.4→3.5rem · H2: 1.9→2.6rem · H3: 1.5→2rem · H4: 1.25→1.5rem
   Line-heights resserrés pour titres (1.15-1.25), généreux pour corps (1.65).
   Letter-spacing négatif sur gros titres = luxe éditorial.
   ──────────────────────────────────────────────────────────── */
:root {
    --xvs-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --xvs-fs-xs:   .75rem;    /* 12 — legal/captions */
    --xvs-fs-sm:   .85rem;    /* 13.6 — secondary ui */
    --xvs-fs-base: 1rem;      /* 16 — body */
    --xvs-fs-md:   1.125rem;  /* 18 — lead */
    --xvs-fs-lg:   1.25rem;   /* 20 — h4/button xl */
    --xvs-fs-xl:   clamp(1.5rem, 1.2rem + 1.2vw, 2rem);      /* h3 fluid */
    --xvs-fs-2xl:  clamp(1.9rem, 1.4rem + 2vw, 2.6rem);      /* h2 fluid */
    --xvs-fs-3xl:  clamp(2.4rem, 1.5rem + 3.6vw, 3.5rem);    /* h1 fluid */
    --xvs-fs-hero: clamp(2.8rem, 1.8rem + 4vw, 4.25rem);     /* hero banner */

    --xvs-lh-tight:    1.15;
    --xvs-lh-snug:     1.25;
    --xvs-lh-normal:   1.45;
    --xvs-lh-relaxed:  1.65;   /* body text */
    --xvs-lh-loose:    1.8;

    --xvs-tracking-tight:  -.02em;  /* H1/H2 luxe */
    --xvs-tracking-snug:   -.01em;  /* H3/H4 */
    --xvs-tracking-normal: 0;
    --xvs-tracking-wide:   .04em;   /* labels/eyebrows */
    --xvs-tracking-wider:  .08em;   /* uppercase micro */

    --xvs-fw-regular:  400;
    --xvs-fw-medium:   500;
    --xvs-fw-semibold: 600;
    --xvs-fw-bold:     700;
    --xvs-fw-black:    800;
}
/* Apply to base HTML hierarchy without overriding tailored pages */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--xvs-font-sans);
    font-feature-settings: 'ss01', 'cv11', 'kern';   /* Inter alt ss/kern */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--xvs-lh-relaxed);
}
/* Only apply if the page hasn't explicitly set its own H scale */
h1:not([style*="font-size"]) {
    font-size: var(--xvs-fs-3xl);
    line-height: var(--xvs-lh-tight);
    letter-spacing: var(--xvs-tracking-tight);
    font-weight: var(--xvs-fw-black);
}
h2:not([style*="font-size"]) {
    font-size: var(--xvs-fs-2xl);
    line-height: var(--xvs-lh-snug);
    letter-spacing: var(--xvs-tracking-tight);
    font-weight: var(--xvs-fw-bold);
}
h3:not([style*="font-size"]) {
    font-size: var(--xvs-fs-xl);
    line-height: var(--xvs-lh-snug);
    letter-spacing: var(--xvs-tracking-snug);
    font-weight: var(--xvs-fw-bold);
}
h4:not([style*="font-size"]) {
    font-size: var(--xvs-fs-lg);
    line-height: var(--xvs-lh-normal);
    letter-spacing: var(--xvs-tracking-snug);
    font-weight: var(--xvs-fw-semibold);
}
p:not([style*="line-height"]) { line-height: var(--xvs-lh-relaxed); }
small { font-size: var(--xvs-fs-sm); }
.eyebrow, .label-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--xvs-tracking-wider);
    font-size: var(--xvs-fs-xs);
    font-weight: var(--xvs-fw-semibold);
    color: var(--gold-light);
}

/* ══════════════════ SCROLLBAR ══════════════════ */
* { scrollbar-color: var(--gold) var(--bg-section-dark); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-section-dark); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }

/* ══════════════════ BASE ══════════════════ */
body {
    background: var(--bg-body) !important;
    color: var(--text-primary) !important;
    background-image: none !important;
}

::selection {
    background: rgba(184,149,63,0.3);
    color: #fff;
}

/* ══════════════════ HEADER & NAVIGATION ══════════════════ */
.navbar {
    background: rgba(10,10,10,0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.nav-links a { color: var(--text-secondary) !important; }
.nav-links a:hover { color: var(--gold) !important; }
.nav-links a.active { color: var(--text-primary) !important; }
.nav-btn { color: var(--text-primary) !important; }
.nav-btn:hover { color: var(--gold) !important; }
.logo-xeus, .logo-connect-text { color: var(--text-primary) !important; }
.x-letter { color: var(--gold) !important; }
.cart-count { background: var(--gold) !important; color: var(--text-on-gold) !important; }

.nav-hamburger span { background: var(--text-primary) !important; }

/* Language selector */
.lang-selector { color: var(--text-secondary) !important; }
.lang-selector:hover { color: var(--gold) !important; }
.lang-dropdown { background: var(--bg-card) !important; border: 1px solid var(--border-card) !important; box-shadow: var(--shadow-card) !important; }
.lang-option { color: var(--text-secondary) !important; }
.lang-option:hover { background: var(--bg-card-hover) !important; color: var(--gold) !important; }
.lang-option.selected { background: var(--gold-bg) !important; color: var(--gold) !important; }

/* Mobile menu */
.nav-links.mobile-open { background: rgba(10,10,10,0.98) !important; }

/* ══════════════════ HERO ══════════════════ */
.hero { background: var(--bg-body) !important; }
.hero-bg, .hero-gradient, .hero-particles { display: none !important; }

.hero-badge {
    background: var(--gold-bg) !important;
    border: 1px solid var(--gold-dark) !important;
    color: var(--gold) !important;
}
.hero-badge .badge-dot { background: var(--gold) !important; }

.hero-title, .hero-title .title-line { color: var(--text-primary) !important; }
.gradient-text {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.hero-subtitle { color: var(--text-secondary) !important; }
.hero-stats { color: var(--text-primary) !important; }
.stat-number { color: var(--text-primary) !important; }
.stat-label { color: var(--text-tertiary) !important; }
.stat-plus { color: var(--gold) !important; }

.scroll-indicator { color: var(--text-tertiary) !important; }
.scroll-indicator:hover { color: var(--gold) !important; }

/* ══════════════════ BOUTONS ══════════════════ */
.btn-primary {
    background: var(--gold) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
.btn-primary:hover {
    background: var(--gold-light) !important;
    color: var(--text-on-gold) !important;
}
.btn-primary:active {
    background: var(--gold-dark) !important;
}

.btn-secondary {
    background: transparent !important;
    border: 1px solid var(--gold) !important;
    color: var(--gold) !important;
}
.btn-secondary:hover {
    background: var(--gold) !important;
    color: var(--text-on-gold) !important;
}

/* ══════════════════ SECTIONS — FONDS ALTERNÉS ══════════════════ */
.categories-section,
.why-section,
.trust-badges-section,
.newsletter-section { background: var(--bg-section-dark) !important; }

.flash-sales-section,
.featured-section,
.partners-section,
.testimonials-section,
.client-section { background: var(--bg-section-mid) !important; }

.flash-sales-section::before { display: none !important; }

/* ══════════════════ TITRES DE SECTION ══════════════════ */
.section-title {
    color: var(--text-primary) !important;
    border-left: 4px solid var(--gold) !important;
    padding-left: 12px !important;
}
.section-subtitle { color: var(--text-secondary) !important; }
.section-header .btn { color: var(--gold) !important; }
.section-header .btn:hover { color: var(--gold-light) !important; }

/* ══════════════════ CARDS PRODUITS ══════════════════ */
.product-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}
.product-card:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--gold) !important;
    box-shadow: var(--shadow-card-hover) !important;
}

.product-name { color: var(--text-primary) !important; }
.product-brand { color: var(--gold) !important; }
.product-specs { color: var(--text-secondary) !important; }
.product-price { color: var(--text-primary) !important; font-weight: 700 !important; }
.product-old-price { color: var(--text-tertiary) !important; text-decoration: line-through !important; }
.product-new-price, .product-promo-price { color: var(--gold) !important; font-weight: 700 !important; }
.product-stock { color: var(--text-secondary) !important; }
.product-stock .stock-dot { background: #22c55e !important; }
.product-rating { color: var(--text-secondary) !important; }
.product-rating .stars { color: var(--gold) !important; }

/* Product action buttons */
.product-actions button,
.product-compare-btn,
.product-wishlist-btn {
    background: rgba(255,255,255,0.05) !important;
    color: var(--text-secondary) !important;
    border: none !important;
}
.product-actions button:hover,
.product-compare-btn:hover,
.product-wishlist-btn:hover {
    background: var(--gold-bg) !important;
    color: var(--gold) !important;
}

/* ══════════════════ BADGES & TAGS ══════════════════ */
.badge-new, .badge-novo,
[class*="badge"][class*="new"] {
    background: var(--gold) !important;
    color: var(--text-on-gold) !important;
    font-weight: 700 !important;
}
.badge-promo,
[class*="badge"][class*="promo"] {
    background: var(--gold) !important;
    color: var(--text-on-gold) !important;
    font-weight: 700 !important;
}
.badge-reconditionne,
.badge-grade,
[class*="badge"][class*="grade"] {
    background: var(--bg-card) !important;
    border: 1px solid var(--gold) !important;
    color: var(--gold) !important;
}

/* ══════════════════ FLASH SALES ══════════════════ */
.flash-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}
.flash-card:hover {
    border-color: var(--gold) !important;
    box-shadow: var(--shadow-card-hover) !important;
}
.flash-discount-badge {
    background: var(--gold) !important;
    color: var(--text-on-gold) !important;
    font-weight: 700 !important;
}
.flash-stock-warning {
    background: var(--badge-stock) !important;
    color: var(--text-primary) !important;
}
.flash-image { background: var(--bg-card) !important; }
.flash-brand { color: var(--gold) !important; }
.flash-name { color: var(--text-primary) !important; }
.flash-old-price { color: var(--text-tertiary) !important; text-decoration: line-through !important; }
.flash-new-price { color: var(--gold) !important; font-weight: 700 !important; }
.flash-badge { color: var(--gold) !important; }

/* ══════════════════ CATÉGORIES ══════════════════ */
.category-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}
.category-card:hover {
    border-color: var(--gold) !important;
    box-shadow: var(--shadow-card-hover) !important;
}
.category-card h3 { color: var(--text-primary) !important; }
.category-card p { color: var(--text-secondary) !important; }
.category-icon {
    background: var(--gold-bg) !important;
    color: var(--gold) !important;
}
.category-icon svg { color: var(--gold) !important; }
.subcategory-chip {
    background: var(--bg-body) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-card) !important;
}
.subcategory-chip:hover {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}

/* ══════════════════ FILTER TABS ══════════════════ */
.filter-tab {
    color: var(--text-secondary) !important;
    background: transparent !important;
}
.filter-tab:hover { color: var(--gold) !important; }
.filter-tab.active {
    color: var(--text-on-gold) !important;
    background: var(--gold) !important;
}

/* ══════════════════ WHY SECTION ══════════════════ */
.why-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}
.why-card:hover {
    border-color: var(--gold) !important;
    box-shadow: var(--shadow-card-hover) !important;
}
.why-card h3 { color: var(--text-primary) !important; }
.why-card p { color: var(--text-secondary) !important; }
.why-icon {
    background: var(--gold-bg) !important;
    color: var(--gold) !important;
}
.why-icon svg { color: var(--gold) !important; }

/* ══════════════════ TRUST BADGES ══════════════════ */
.trust-badge-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
}
.trust-badge-card:hover { border-color: var(--gold) !important; }
.trust-badge-card svg { color: var(--gold) !important; }
.trust-badge-card strong { color: var(--text-primary) !important; }
.trust-badge-card span { color: var(--text-secondary) !important; }

/* ══════════════════ TRADE-IN SECTION ══════════════════ */
.tradein-section { background: var(--bg-section-mid) !important; }
.tradein-card {
    background: var(--bg-section-dark) !important;
    border: 1px solid var(--border-card) !important;
}
.tradein-badge {
    background: var(--gold-bg) !important;
    color: var(--gold) !important;
    border: 1px solid var(--gold-dark) !important;
}
.tradein-card h2 { color: var(--text-primary) !important; }
.tradein-card p { color: var(--text-secondary) !important; }
.tradein-step-num {
    background: var(--gold-bg) !important;
    color: var(--gold) !important;
}
.tradein-visual svg { color: var(--gold) !important; }

/* ══════════════════ PROMO BANNER ══════════════════ */
.promo-banner {
    background: var(--gold-bg) !important;
    border: 1px solid var(--gold) !important;
}
.promo-tag {
    background: var(--gold) !important;
    color: var(--text-on-gold) !important;
}
.promo-banner h2 { color: var(--text-primary) !important; }
.promo-banner p { color: var(--text-secondary) !important; }

/* ══════════════════ SPACE CARDS (B2C/B2B) ══════════════════ */
.space-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}
.space-card:hover {
    border-color: var(--gold) !important;
    box-shadow: var(--shadow-card-hover) !important;
}
.space-icon {
    background: var(--gold-bg) !important;
}
.space-icon svg { color: var(--gold) !important; }
.space-card h3 { color: var(--text-primary) !important; }
.space-card p { color: var(--text-secondary) !important; }
.space-features li { color: var(--text-primary) !important; }
.space-features svg { color: var(--gold) !important; }
.partner-highlight { color: var(--gold) !important; }
.space-badge {
    background: var(--gold) !important;
    color: var(--text-on-gold) !important;
}
.space-partner { border-color: var(--gold-dark) !important; }

/* ══════════════════ TÉMOIGNAGES ══════════════════ */
.testimonial-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    border-left: 3px solid var(--gold) !important;
}
.testimonial-stars { color: var(--gold) !important; }
.testimonial-text { color: var(--text-secondary) !important; }
.testimonial-author strong { color: var(--text-primary) !important; }
.testimonial-author span { color: var(--text-tertiary) !important; }
.testimonial-author { border-top-color: var(--border-subtle) !important; }
.testimonial-avatar {
    background: var(--gold) !important;
    color: var(--text-on-gold) !important;
}

/* ══════════════════ NEWSLETTER ══════════════════ */
.newsletter-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}
.newsletter-content h2 { color: var(--text-primary) !important; }
.newsletter-content p { color: var(--text-secondary) !important; }
.newsletter-form input {
    background: var(--bg-body) !important;
    border: 1px solid var(--border-input) !important;
    color: var(--text-primary) !important;
}
.newsletter-form input::placeholder { color: var(--text-tertiary) !important; }
.newsletter-form input:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(184,149,63,0.15) !important;
}

/* ══════════════════ PARTNERS / BRANDS MARQUEE ══════════════════ */
.partners-section { background: var(--bg-section-mid) !important; }
.brand-marquee img { filter: invert(1) brightness(0.7) !important; opacity: 0.6 !important; }
.brand-marquee img:hover { opacity: 1 !important; }
.brand-marquee .brand-fallback { color: var(--text-tertiary) !important; }

/* ══════════════════ FOOTER ══════════════════ */
.footer {
    background: var(--bg-body) !important;
    border-top: 2px solid var(--gold) !important;
    color: var(--text-secondary) !important;
}
.footer .logo-xeus, .footer .logo-connect-text { color: var(--text-primary) !important; }
.footer .x-letter { color: var(--gold) !important; }
.footer h4 { color: var(--text-primary) !important; }
.footer p { color: var(--text-tertiary) !important; }
.footer a { color: var(--text-secondary) !important; }
.footer a:hover { color: var(--gold) !important; }
.footer-socials a {
    background: rgba(255,255,255,0.05) !important;
    color: var(--text-secondary) !important;
}
.footer-socials a:hover {
    background: var(--gold-bg) !important;
    color: var(--gold) !important;
}
.footer-group-section { border-top-color: var(--border-subtle) !important; border-bottom-color: var(--border-subtle) !important; }
.footer-group-label { color: var(--text-primary) !important; }
.footer-group-label .x-letter { color: var(--gold) !important; }
.footer-group-label:hover { color: var(--gold) !important; }
.footer-group-tagline { color: var(--text-tertiary) !important; }
.footer-company {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid var(--border-card) !important;
}
.footer-company:hover {
    background: var(--gold-bg) !important;
    border-color: var(--gold) !important;
}
.footer-company strong { color: var(--text-primary) !important; }
.footer-company span { color: var(--text-tertiary) !important; }
.footer-company-icon { background: rgba(255,255,255,0.04) !important; color: var(--text-secondary) !important; }
.footer-company-active {
    background: var(--gold-bg) !important;
    border-color: var(--gold) !important;
}
.footer-company-active .footer-company-icon {
    background: rgba(184,149,63,0.12) !important;
    color: var(--gold) !important;
}
.footer-company-active strong { color: var(--gold) !important; }
.footer-bottom { border-top-color: var(--border-subtle) !important; }
.footer-bottom p { color: var(--text-tertiary) !important; }
.footer-legal a { color: var(--text-tertiary) !important; }
.footer-legal a:hover { color: var(--gold) !important; }

/* ══════════════════ CART PANEL ══════════════════ */
.cart-panel {
    background: var(--bg-section-dark) !important;
    border-left: 1px solid var(--border-subtle) !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.5) !important;
}
.cart-panel-header { border-bottom-color: var(--border-subtle) !important; }
.cart-panel-header h3 { color: var(--text-primary) !important; }
.cart-item { border-bottom-color: var(--border-subtle) !important; }
.cart-item-name { color: var(--text-primary) !important; }
.cart-item-price { color: var(--gold) !important; }
.cart-item-specs { color: var(--text-secondary) !important; }
.cart-summary { border-top-color: var(--border-subtle) !important; }
.cart-total-label { color: var(--text-secondary) !important; }
.cart-total-value { color: var(--gold) !important; font-weight: 700 !important; }

/* ══════════════════ SEARCH OVERLAY ══════════════════ */
.search-overlay {
    background: rgba(10,10,10,0.95) !important;
    backdrop-filter: blur(20px) !important;
}
.search-container input {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-input) !important;
}
.search-container input::placeholder { color: var(--text-tertiary) !important; }
.search-container input:focus { border-color: var(--gold) !important; }
.search-container svg { color: var(--text-secondary) !important; }
.search-close { color: var(--text-secondary) !important; }

/* ══════════════════ AI / FAQ ASSISTANT ══════════════════ */
.ai-assistant {
    background: var(--bg-section-dark) !important;
    border: 1px solid var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}
.ai-header {
    background: var(--gold) !important;
    color: var(--text-on-gold) !important;
}
.ai-header * { color: var(--text-on-gold) !important; }
.ai-messages { background: var(--bg-section-dark) !important; }
.ai-message { color: var(--text-primary) !important; }
.ai-message.bot { background: var(--bg-card) !important; }
.ai-suggestions button {
    background: var(--bg-card) !important;
    border: 1px solid var(--gold) !important;
    color: var(--gold) !important;
}
.ai-suggestions button:hover {
    background: var(--gold) !important;
    color: var(--text-on-gold) !important;
}
.ai-input-area { border-top: 1px solid var(--border-subtle) !important; }
.ai-input-area input {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}
.ai-btn-toggle {
    background: var(--gold) !important;
    color: var(--text-on-gold) !important;
    box-shadow: 0 4px 16px rgba(184,149,63,0.3) !important;
}

/* ══════════════════ PRODUCT MODAL ══════════════════ */
.modal-overlay { background: rgba(10,10,10,0.8) !important; }
.product-modal, .product-detail {
    background: var(--bg-section-dark) !important;
    border: 1px solid var(--border-card) !important;
}
.product-detail-image { background: var(--bg-card) !important; }
.product-detail-name { color: var(--text-primary) !important; }
.product-detail-brand { color: var(--gold) !important; }
.product-detail-price { color: var(--gold) !important; }
.product-detail-old-price { color: var(--text-tertiary) !important; }
.product-detail-specs { color: var(--text-secondary) !important; }
.product-detail-info { color: var(--text-primary) !important; }
.product-spec-item { background: var(--bg-card) !important; border: 1px solid var(--border-card) !important; }
.product-spec-label { color: var(--text-tertiary) !important; }
.product-spec-value { color: var(--text-primary) !important; }

/* ══════════════════ COOKIE BANNER ══════════════════ */
#cookieBanner {
    background: var(--bg-section-dark) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

/* ══════════════════ FORMULAIRES ══════════════════ */
input, textarea, select {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-input) !important;
    color: var(--text-primary) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-tertiary) !important; }
input:focus, textarea:focus, select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(184,149,63,0.15) !important;
    outline: none !important;
}
label { color: var(--text-secondary) !important; }

/* ══════════════════ ÉTOILES ══════════════════ */
.stars, .testimonial-stars, .product-rating .stars {
    color: var(--gold) !important;
}

/* ══════════════════ LIENS GLOBAUX ══════════════════ */
a { transition: color 0.2s ease !important; }
a:hover { color: var(--gold) !important; }

/* ══════════════════ ANIMATIONS SCROLL ══════════════════ */
.animate-ready {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(.25,.1,.25,1), transform 0.6s cubic-bezier(.25,.1,.25,1);
}
.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* ══════════════════ SÉPARATEURS ══════════════════ */
hr, .divider { border-color: var(--border-subtle) !important; }

/* ══════════════════ FOCUS VISIBLE (A11Y) ══════════════════ */
*:focus-visible {
    outline: 2px solid var(--gold) !important;
    outline-offset: 2px !important;
}

/* ══════════════════ TRUST STRIP (New compact bar under hero) ══════════════════ */
.trust-strip {
    background: var(--bg-section-dark);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: 20px 0;
}
.trust-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: center;
}
.trust-strip-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.trust-strip-item svg {
    color: var(--gold);
    flex-shrink: 0;
}
.trust-strip-item strong {
    color: var(--text-primary);
    font-weight: 500;
}

/* Mobile: 2 columns */
@media (max-width: 768px) {
    .trust-strip { padding: 16px 0; }
    .trust-strip-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px 12px;
    }
    .trust-strip-item {
        font-size: 0.78rem;
        gap: 8px;
    }
    .trust-strip-item svg {
        width: 18px;
        height: 18px;
    }
}
@media (max-width: 480px) {
    .trust-strip-item strong {
        font-size: 0.75rem;
    }
}

/* ══════════════════ SECTION SPACING POLISH ══════════════════ */
.categories-section,
.featured-section,
.flash-sales-section,
.why-section,
.tradein-section,
.client-section,
.testimonials-section,
.newsletter-section,
.partners-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

@media (max-width: 768px) {
    .categories-section,
    .featured-section,
    .flash-sales-section,
    .why-section,
    .tradein-section,
    .client-section,
    .testimonials-section,
    .newsletter-section,
    .partners-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
}

/* Partners marquee minimal section - remove title for visual-only impact */
.partners-section .section-header {
    margin-bottom: 32px !important;
}
.partners-section .section-title {
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    text-align: center !important;
    border-left: none !important;
    padding-left: 0 !important;
}
.partners-section .section-subtitle {
    display: none !important;
}

/* ══════════════════ TRADE-IN COMPACT (secondary CTA) ══════════════════ */
.tradein-section { padding-top: 48px !important; padding-bottom: 48px !important; }
.tradein-card {
    padding: 40px !important;
}
@media (max-width: 768px) {
    .tradein-card { padding: 28px 20px !important; }
}

/* ══════════════════ NAVBAR CLEAN ══════════════════ */
.nav-links {
    gap: 28px !important;
}
.nav-links a {
    font-size: 0.92rem !important;
    font-weight: 500 !important;
}

/* ══════════════════ NAVBAR DESKTOP FIX ══════════════════ */
/* Force nav-links visible on desktop, hide hamburger */
@media (min-width: 1025px) {
    .nav-links {
        display: flex !important;
        align-items: center !important;
    }
    .nav-hamburger {
        display: none !important;
    }
}
/* Mobile: show hamburger, hide nav-links */
@media (max-width: 1024px) {
    .nav-links {
        display: none !important;
    }
    .nav-hamburger {
        display: flex !important;
    }
    .nav-links.mobile-open {
        display: flex !important;
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(10,10,10,0.98) !important;
        flex-direction: column !important;
        padding: 24px !important;
        gap: 16px !important;
        z-index: 999 !important;
    }
}

/* ══════════════════ HERO 2 COLONNES FIX ══════════════════ */
.hero {
    min-height: auto !important;
    padding: 0 !important;
    max-height: 760px !important;
}
@media (max-width: 768px) {
    .hero {
        max-height: none !important;
    }
}

/* ══════════════════ PRODUCTS GRID 4x2 (8 max) ══════════════════ */
.products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}
@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}
@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Product card — premium dark */
.product-card {
    background: #111111 !important;
    border: 1px solid #222 !important;
    border-radius: 20px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), border-color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    overflow: hidden !important;
}
.product-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(184,149,63,0.4) !important;
    box-shadow: 0 16px 40px rgba(184,149,63,0.15), 0 4px 12px rgba(0,0,0,0.4) !important;
}
.product-card .product-image {
    height: 220px !important;
    max-height: 220px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    padding: 12px !important;
    overflow: hidden !important;
}
.product-card .product-image img {
    max-height: 196px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}
.product-card:hover .product-image img {
    transform: scale(1.05) !important;
}
.product-card .product-info {
    padding-top: 16px !important;
    border-top: 1px solid #1d1d1d !important;
    margin-top: 16px !important;
}
.product-card .product-brand {
    font-size: 0.68rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--gold) !important;
    font-weight: 600 !important;
}
.product-card .product-name {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin-top: 4px !important;
    line-height: 1.3 !important;
}
.product-card .product-specs {
    font-size: 0.78rem !important;
    color: var(--text-secondary) !important;
    margin-top: 4px !important;
}
.product-card .product-price {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-top: 12px !important;
}
.product-card .product-old-price {
    font-size: 0.85rem !important;
    color: var(--text-tertiary) !important;
    text-decoration: line-through !important;
    margin-right: 8px !important;
}
.product-card .product-new-price {
    color: var(--gold) !important;
    font-weight: 700 !important;
}

/* Badges positioned absolute */
.product-card .product-badges {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    z-index: 2 !important;
}
.product-card .product-wishlist {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 2 !important;
    background: rgba(10,10,10,0.6) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

/* CTA button centered below products */
.featured-section .section-cta {
    display: flex !important;
    justify-content: center !important;
    margin-top: 48px !important;
}

/* ══════════════════ TESTIMONIALS — Horizontal Carousel ══════════════════ */
.testimonials-grid {
    display: flex !important;
    gap: 20px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 8px 24px 32px !important;
    margin: 0 -24px !important;
    scroll-behavior: smooth !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--gold) transparent !important;
}
.testimonials-grid::-webkit-scrollbar {
    height: 6px;
}
.testimonials-grid::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
}
.testimonials-grid::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}
.testimonials-grid .testimonial-card {
    flex: 0 0 400px !important;
    scroll-snap-align: start !important;
    padding: 32px !important;
    background: #151515 !important;
    border: 1px solid #222 !important;
    border-left: 3px solid var(--gold) !important;
    border-radius: 20px !important;
}
@media (max-width: 768px) {
    .testimonials-grid .testimonial-card {
        flex: 0 0 85% !important;
    }
}
.testimonials-grid .testimonial-stars {
    color: var(--gold) !important;
    font-size: 1.1rem !important;
    margin-bottom: 16px !important;
}
.testimonials-grid .testimonial-text {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 24px !important;
    min-height: 120px !important;
}
.testimonials-grid .testimonial-author {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-top: 16px !important;
    border-top: 1px solid #222 !important;
}
.testimonials-grid .testimonial-avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}

/* ══════════════════ SECTIONS — MASSIVE VERTICAL RHYTHM (py-24 / py-32) ══════════════════ */
.categories-section,
.featured-section,
.flash-sales-section,
.why-section,
.client-section,
.testimonials-section,
.newsletter-section {
    padding: 96px 24px !important;
}
.partners-section {
    padding: 64px 24px !important;
}
.tradein-section {
    padding: 80px 24px !important;
}
@media (max-width: 768px) {
    .categories-section,
    .featured-section,
    .flash-sales-section,
    .why-section,
    .client-section,
    .testimonials-section,
    .newsletter-section,
    .tradein-section {
        padding: 56px 20px !important;
    }
    .partners-section {
        padding: 40px 20px !important;
    }
}

/* Section containers — max-width consistent */
main > section > .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* ══════════════════ FOOTER — 5 COLUMNS PREMIUM ══════════════════ */
.footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1.4fr repeat(3, 1fr) 1.3fr !important;
    gap: 48px !important;
    padding: 96px 0 48px !important;
}
.footer .footer-brand {
    padding-right: 24px !important;
}
.footer .footer-brand p {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    color: var(--text-tertiary) !important;
    margin: 16px 0 24px !important;
}
.footer .footer-col h4 {
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--text-primary) !important;
    margin-bottom: 20px !important;
    font-weight: 600 !important;
}
.footer .footer-col a {
    display: block !important;
    padding: 4px 0 !important;
    font-size: 0.9rem !important;
    color: var(--text-secondary) !important;
    transition: color 0.2s ease !important;
}
.footer .footer-col a:hover {
    color: var(--gold) !important;
}
@media (max-width: 1024px) {
    .footer .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px !important;
    }
    .footer .footer-brand {
        grid-column: 1 / -1 !important;
    }
}
@media (max-width: 480px) {
    .footer .footer-grid {
        grid-template-columns: 1fr !important;
        padding: 48px 0 24px !important;
    }
}

/* ══════════════════ TYPOGRAPHIE PREMIUM (Apple/Porsche) ══════════════════ */
.section-title {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.05 !important;
    margin-bottom: 16px !important;
    border-left: none !important;
    padding-left: 0 !important;
}
.section-subtitle {
    font-size: 1.15rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.5 !important;
    max-width: 620px !important;
    margin-bottom: 0 !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
}
.section-header {
    margin-bottom: 56px !important;
}
.section-header.centered {
    text-align: center !important;
}
.section-header.centered .section-subtitle {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hero title — massive Apple style */
.hero-title {
    font-size: clamp(2.5rem, 5.5vw, 4rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.02 !important;
}

/* ══════════════════ HERO STATS — Premium with gold separators ══════════════════ */
.hero-stats {
    display: flex !important;
    gap: 0 !important;
    padding: 24px 0 0 !important;
    border-top: 1px solid rgba(184,149,63,0.15) !important;
}
.hero-stats .stat {
    flex: 1 !important;
    padding: 0 24px !important;
    text-align: left !important;
    border-right: 1px solid rgba(184,149,63,0.15) !important;
}
.hero-stats .stat:first-child {
    padding-left: 0 !important;
}
.hero-stats .stat:last-child {
    border-right: none !important;
}
.hero-stats .stat-number {
    font-size: 2rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--text-primary) !important;
    display: block !important;
    margin-bottom: 4px !important;
}
.hero-stats .stat-label {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--text-tertiary) !important;
    font-weight: 500 !important;
}
.hero-stats .stat-plus {
    color: var(--gold) !important;
}

/* ══════════════════ NAVBAR — Apple-grade blur ══════════════════ */
.navbar {
    background: rgba(10,10,10,0.72) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 16px 0 !important;
    min-height: 64px !important;
}
.nav-container {
    max-width: 1440px !important;
    padding: 0 48px !important;
    margin: 0 auto !important;
}
@media (max-width: 768px) {
    .nav-container {
        padding: 0 20px !important;
    }
}

/* Language selector — clean "PT ⌄" */
.lang-flag {
    display: none !important;
}
.lang-selector {
    gap: 4px !important;
    padding: 6px 10px !important;
}
.lang-code {
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    letter-spacing: 0.04em !important;
}
.lang-selector:hover .lang-code {
    color: var(--gold) !important;
}
.lang-dropdown .lang-flag {
    display: inline !important;
}

/* ══════════════════ TRUST STRIP — Better contrast ══════════════════ */
.trust-strip {
    background: #0F0F0F !important;
    border-top: 1px solid rgba(184,149,63,0.1) !important;
    border-bottom: 1px solid rgba(184,149,63,0.1) !important;
    padding: 28px 0 !important;
}
.trust-strip-grid {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}
.trust-strip-item {
    font-size: 0.9rem !important;
}
.trust-strip-item strong {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
}

/* ══════════════════ SUBTLE GOLD SECTION DIVIDERS ══════════════════ */
.categories-section,
.featured-section,
.flash-sales-section,
.why-section,
.client-section,
.testimonials-section,
.newsletter-section,
.tradein-section,
.partners-section {
    position: relative !important;
}
.categories-section::before,
.featured-section::before,
.flash-sales-section::before,
.why-section::before,
.client-section::before,
.testimonials-section::before,
.newsletter-section::before,
.tradein-section::before,
.partners-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 60px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(184,149,63,0.4), transparent) !important;
}

/* ══════════════════ GOLD SCROLLBAR (body) ══════════════════ */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(184,149,63,0.5) #0A0A0A;
}
html::-webkit-scrollbar {
    width: 10px;
}
html::-webkit-scrollbar-track {
    background: #0A0A0A;
}
html::-webkit-scrollbar-thumb {
    background: rgba(184,149,63,0.4);
    border-radius: 5px;
    border: 2px solid #0A0A0A;
}
html::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

/* ══════════════════ BUTTONS — Premium finish ══════════════════ */
.btn {
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    border-radius: 999px !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    letter-spacing: -0.01em !important;
}
.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(184,149,63,0.3) !important;
}
.btn-secondary:hover {
    transform: translateY(-2px) !important;
}

/* ══════════════════ FLASH SALES — Compact height ══════════════════ */
.flash-card {
    border-radius: 20px !important;
    padding: 20px !important;
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}
.flash-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(184,149,63,0.12) !important;
}
.flash-card .flash-image {
    height: 180px !important;
    max-height: 180px !important;
}
.flash-card .flash-image img {
    max-height: 160px !important;
    object-fit: contain !important;
}

/* ══════════════════ GLOBAL EASING ══════════════════ */
* {
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  AUDIT LAYOUT — 14 FIXES PREMIUM                         ║
   ╚══════════════════════════════════════════════════════════╝ */

/* FIX 1 — Bouton flottant IA (cercle or 56px bas-droite) */
.ai-floating-btn {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 998 !important;
    box-shadow: 0 8px 24px rgba(184,149,63,0.4), 0 2px 6px rgba(0,0,0,0.2) !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}
.ai-floating-btn:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 12px 32px rgba(184,149,63,0.55), 0 4px 8px rgba(0,0,0,0.3) !important;
}
.ai-floating-btn svg {
    width: 26px !important;
    height: 26px !important;
    stroke-width: 2 !important;
}
.ai-floating-btn::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(184,149,63,0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ai-floating-btn:hover::before {
    opacity: 1;
    animation: ai-pulse 1.5s ease-in-out infinite;
}
@keyframes ai-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 0.2; }
}

/* Hide when AI panel is open */
.ai-assistant.active ~ .ai-floating-btn {
    opacity: 0;
    pointer-events: none;
}

/* FIX 2 — Cart badge masqué si 0 */
.cart-count {
    transition: opacity 0.2s ease !important;
}
.cart-count[data-count="0"],
.cart-btn .cart-count:empty {
    display: none !important;
}

/* FIX 4 — Subtitle hero raccourci (visuellement resserré) */
.hero-subtitle {
    font-size: 1.05rem !important;
    max-width: 460px !important;
    line-height: 1.55 !important;
}

/* FIX 5 — Logo navbar agrandi */
.nav-logo .logo-text {
    transform: scale(1) !important;
}
.logo-xeus {
    font-size: 1.4rem !important;
    letter-spacing: -0.02em !important;
    font-weight: 800 !important;
}
.logo-connect-text {
    font-size: 0.6rem !important;
    letter-spacing: 0.35em !important;
    font-weight: 500 !important;
}

/* FIX 6 — "Vender" en or (CTA mise en avant) */
.nav-links a[href="sell-phone.html"],
.nav-links a[data-i18n="nav.vender"] {
    color: var(--gold) !important;
    font-weight: 600 !important;
    position: relative !important;
}
.nav-links a[href="sell-phone.html"]:hover,
.nav-links a[data-i18n="nav.vender"]:hover {
    color: var(--gold-light) !important;
}
.nav-links a[href="sell-phone.html"]::before,
.nav-links a[data-i18n="nav.vender"]::before {
    content: '€ ' !important;
    font-size: 0.85em !important;
    opacity: 0.8 !important;
}

/* FIX 7 — Trust Strip contraste renforcé */
.trust-strip {
    background: #1A1A1A !important;
    border-top: 1px solid rgba(184,149,63,0.25) !important;
    border-bottom: 1px solid rgba(184,149,63,0.25) !important;
    padding: 32px 0 !important;
}
.trust-strip-item {
    position: relative !important;
}
.trust-strip-item:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    right: -12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 24px !important;
    background: rgba(184,149,63,0.2) !important;
}
@media (max-width: 768px) {
    .trust-strip-item:not(:last-child)::after {
        display: none !important;
    }
}

/* FIX 8 — Séparateurs or plus intenses entre sections */
.categories-section::before,
.featured-section::before,
.flash-sales-section::before,
.why-section::before,
.client-section::before,
.testimonials-section::before,
.newsletter-section::before,
.tradein-section::before,
.partners-section::before {
    width: 120px !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(184,149,63,0.7), transparent) !important;
}

/* FIX 9 — Bouton secondaire hero différencié */
.hero-ctas .btn-secondary {
    background: transparent !important;
    border: 1.5px solid rgba(255,255,255,0.2) !important;
    color: var(--text-primary) !important;
}
.hero-ctas .btn-secondary:hover {
    border-color: var(--text-primary) !important;
    background: rgba(255,255,255,0.05) !important;
    color: var(--text-primary) !important;
    transform: translateY(-2px) !important;
}

/* FIX 10 — Flash Sales accent visuel (urgence) */
.flash-sales-section {
    border-top: 1px solid rgba(184,149,63,0.15) !important;
    background: linear-gradient(180deg, #0A0A0A 0%, #0F0C06 100%) !important;
}
.flash-sales-section .section-title {
    color: var(--gold) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.flash-sales-section .section-title::before {
    content: '⚡' !important;
    font-size: 0.85em !important;
    filter: drop-shadow(0 0 8px rgba(184,149,63,0.6)) !important;
}
.flash-card {
    border: 1px solid rgba(184,149,63,0.15) !important;
}
.flash-discount-badge {
    background: linear-gradient(135deg, #C0392B 0%, #E74C3C 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(192,57,43,0.4) !important;
}

/* FIX 11 — Badges promo sur produits (calculés si oldPrice existe) */
.product-card .product-badges .badge-promo {
    background: #C0392B !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(192,57,43,0.3) !important;
}
.product-card .product-badges .badge-new {
    background: var(--gold) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
    font-weight: 700 !important;
}
.product-card .product-badges .badge-grade {
    background: rgba(184,149,63,0.1) !important;
    color: var(--gold) !important;
    border: 1px solid rgba(184,149,63,0.3) !important;
    font-weight: 600 !important;
}
.product-card .product-badge {
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

/* FIX 12 — Sélecteur langue compact (icône globe) — WCAG 2.5.5 tap target 44x44 */
.lang-selector {
    padding: 10px !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}
.lang-selector > svg {
    display: none !important;
}
.lang-selector::before {
    content: '' !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AAAAAA' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    transition: filter 0.2s ease !important;
}
.lang-selector:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8953F' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") !important;
}
.lang-dropdown {
    right: 0 !important;
    min-width: 160px !important;
}
.lang-dropdown .lang-flag {
    display: inline !important;
    margin-right: 8px !important;
}

/* FIX 13 — Footer plus riche (brand description visible) */
.footer {
    padding-top: 16px !important;
}
.footer .footer-brand {
    position: relative !important;
}
.footer .footer-brand .logo-xeus {
    font-size: 1.6rem !important;
}
.footer .footer-brand p {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    color: var(--text-secondary) !important;
    margin: 20px 0 !important;
    max-width: 280px !important;
}
.footer-socials {
    gap: 10px !important;
    margin-top: 8px !important;
}
.footer-socials a {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}
.footer-socials a:hover {
    border-color: var(--gold) !important;
    transform: translateY(-3px) !important;
    color: var(--gold) !important;
    background: rgba(184,149,63,0.08) !important;
}

/* FIX 14 — Cookie banner stylé premium */
#cookieBanner {
    background: rgba(20,20,20,0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(184,149,63,0.3) !important;
    padding: 20px 32px !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.4) !important;
}
#cookieBanner p {
    color: var(--text-primary) !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
}
#cookieBanner p a {
    color: var(--gold) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(184,149,63,0.3) !important;
    padding-bottom: 1px !important;
}
#cookieBanner p a:hover {
    border-color: var(--gold) !important;
}
#cookieBanner button {
    padding: 10px 24px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    letter-spacing: -0.01em !important;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    cursor: pointer !important;
}
#cookieBanner button:first-of-type {
    background: var(--gold) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
}
#cookieBanner button:first-of-type:hover {
    background: var(--gold-light) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(184,149,63,0.3) !important;
}
#cookieBanner button:last-of-type {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}
#cookieBanner button:last-of-type:hover {
    border-color: var(--text-secondary) !important;
    color: var(--text-primary) !important;
}
/* HERO — single column centered, luxe minimaliste (Group XEUS standard) */
.hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 24px !important;
    max-width: 880px !important;
    margin: 0 auto !important;
    padding: 96px 24px 72px !important;
}
.hero-badge {
    display: inline-flex !important;
    margin: 0 auto !important;
    width: fit-content !important;
}
.hero-title {
    text-align: center !important;
    margin: 8px 0 8px !important;
    font-size: clamp(2.6rem, 5.5vw, 4.4rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.02em !important;
    font-weight: 800 !important;
}
.hero-subtitle {
    text-align: center !important;
    margin: 0 auto 16px !important;
    max-width: 620px !important;
    font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
    color: var(--text-secondary) !important;
}
.hero-ctas {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 8px 0 24px !important;
}
.hero-stats {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 32px !important;
    text-align: center !important;
    margin: 8px auto 0 !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(184,149,63,0.2) !important;
    width: 100% !important;
    max-width: 720px !important;
    flex-wrap: wrap !important;
}
.hero-image { display: none !important; }
.hero-bg, .hero-gradient, .hero-particles { display: none !important; }
.scroll-indicator { display: none !important; }

@media (max-width: 768px) {
    .hero-content {
        padding: 64px 20px 48px !important;
        gap: 20px !important;
    }
    .hero-stats {
        gap: 16px !important;
        padding-top: 20px !important;
    }
}

/* ══════════════════ DISABLE BROKEN SCROLL ANIMATIONS ══════════════════ */
/* Opacity 1 by default — no fade-in animations (they were breaking) */
.animate-ready,
.animate-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ══════════════════ HERO — SMARTPHONE FIX ══════════════════ */
.hero {
    padding-top: 88px !important;
    min-height: auto !important;
    max-height: none !important;
}
.hero-content {
    padding: 48px 24px 80px !important;
}
.hero-image img {
    max-height: 460px !important;
}

/* ══════════════════ BENTO BOX — CATEGORIES ══════════════════ */
.categories-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(2, 220px) !important;
    gap: 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}
/* First card (Smartphones) spans 2x2 */
.categories-grid .category-card:first-child {
    grid-column: 1 / 3 !important;
    grid-row: 1 / 3 !important;
    background: linear-gradient(135deg, #1C1C1C 0%, #0A0A0A 100%) !important;
    padding: 40px !important;
    position: relative !important;
    overflow: hidden !important;
}
.categories-grid .category-card:first-child .category-icon {
    width: 80px !important;
    height: 80px !important;
    background: rgba(184,149,63,0.08) !important;
}
.categories-grid .category-card:first-child .category-icon svg {
    width: 40px !important;
    height: 40px !important;
}
.categories-grid .category-card:first-child h3 {
    font-size: 2rem !important;
    margin-top: 32px !important;
}
.categories-grid .category-card:first-child p {
    font-size: 1rem !important;
    max-width: 340px !important;
}
/* Decorative gold glow on big card */
.categories-grid .category-card:first-child::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(184,149,63,0.12) 0%, transparent 70%);
    pointer-events: none;
}
/* Other cards compact */
.categories-grid .category-card:not(:first-child) {
    padding: 24px !important;
}
.categories-grid .category-card:not(:first-child) h3 {
    font-size: 1.1rem !important;
}
.categories-grid .category-card:not(:first-child) p {
    font-size: 0.82rem !important;
}
.categories-grid .category-card:not(:first-child) .category-icon {
    width: 48px !important;
    height: 48px !important;
}
.categories-grid .category-card:not(:first-child) .category-icon svg {
    width: 24px !important;
    height: 24px !important;
}

/* Hover effect on all bento cards */
.categories-grid .category-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), border-color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}
.categories-grid .category-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(184,149,63,0.12) !important;
}

/* Mobile — stack Bento */
@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto !important;
        gap: 12px !important;
    }
    .categories-grid .category-card:first-child {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        padding: 28px !important;
    }
    .categories-grid .category-card:first-child h3 {
        font-size: 1.5rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH PAGES — DARK GOLD OVERRIDES (Login & Register)
   Applies to: login-client, login-b2b, login-partner, login-admin,
               register-client, register-b2b-client, partner-register
   ═══════════════════════════════════════════════════════════════════ */

/* Page background — deep near-black instead of pure black glass */
.login-page,
.register-page,
.register-body {
    background: var(--bg-body) !important;
}

/* Radial accents tinted gold */
.login-page::before {
    background:
        radial-gradient(circle at 30% 50%, rgba(184,149,63,0.06) 0%, transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(212,175,90,0.04) 0%, transparent 50%) !important;
}

/* Logo — gold X letter on all auth pages */
.login-logo .logo-xeus,
.register-header .logo-xeus,
.register-topbar .logo-xeus {
    color: var(--text-primary);
}
.login-logo .x-letter,
.register-header .x-letter,
.register-topbar .x-letter {
    color: var(--gold) !important;
}
.login-logo .logo-connect-text,
.register-header .logo-connect-text,
.register-topbar .logo-connect-text {
    color: var(--text-secondary);
    letter-spacing: 4px;
}

/* Login card — elevated dark surface */
.login-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: none !important;
}
.login-card h1 {
    color: var(--text-primary) !important;
}
.login-card .login-subtitle {
    color: var(--text-secondary) !important;
}

/* Default login-badge (client) — gold, replaces green */
.login-badge {
    background: rgba(184,149,63,0.10) !important;
    border: 1px solid rgba(184,149,63,0.30) !important;
    color: var(--gold-light) !important;
}

/* Form inputs */
.login-form .form-group label,
.form-group label {
    color: var(--text-secondary);
}
.login-form input,
.form-group input,
.form-group select,
.form-group textarea {
    background: #0F0F0F !important;
    border: 1px solid var(--border-input) !important;
    color: var(--text-primary) !important;
}
.login-form input::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-tertiary) !important;
}
.login-form input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--gold) !important;
    background: rgba(184,149,63,0.04) !important;
    box-shadow: 0 0 0 3px rgba(184,149,63,0.15) !important;
    outline: none;
}

/* Options row */
.login-options {
    color: var(--text-secondary);
}
.login-options label input {
    accent-color: var(--gold) !important;
}
.forgot-password {
    color: var(--gold-light) !important;
}
.forgot-password:hover {
    color: var(--gold) !important;
}

/* Primary CTA — gold gradient */
.login-btn {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
    font-weight: 700;
}
.login-btn:hover {
    box-shadow: 0 8px 32px rgba(184,149,63,0.35) !important;
    filter: brightness(1.05);
}

/* Divider */
.login-divider {
    color: var(--text-tertiary);
}
.login-divider::before,
.login-divider::after {
    background: var(--border-card) !important;
}

/* Register section (secondary CTA block) */
.register-section {
    background: rgba(184,149,63,0.04) !important;
    border: 1px solid rgba(184,149,63,0.15) !important;
}
.register-section h3 {
    color: var(--text-primary);
}
.register-section p {
    color: var(--text-secondary);
}
.register-btn {
    border: 1px solid rgba(184,149,63,0.35) !important;
    color: var(--gold-light) !important;
    background: transparent;
}
.register-btn:hover {
    background: rgba(184,149,63,0.08) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}

/* Features row below card */
.login-features {
    color: var(--text-secondary);
}
.login-feature svg {
    color: var(--gold) !important;
}

/* Back-home link */
.back-home {
    color: var(--text-secondary) !important;
}
.back-home:hover {
    color: var(--gold) !important;
}

/* Register pages — shared step indicators and right column */
.step-dot {
    background: var(--border-card);
}
.step-dot.active {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
}
.step-dot.done {
    background: var(--gold-dark);
}
.register-right,
.register-footer,
.register-topbar {
    background: var(--bg-section-dark) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-secondary);
}
.register-badge {
    background: rgba(184,149,63,0.10) !important;
    border: 1px solid rgba(184,149,63,0.30) !important;
    color: var(--gold-light) !important;
}
.register-header h1 {
    color: var(--text-primary);
}
.register-header p {
    color: var(--text-secondary);
}

/* Admin login — keep red alert accent (security signal) but dark base */
.auth-dot {
    background: var(--border-card) !important;
}
.twofa-info {
    background: var(--bg-section-dark) !important;
    border: 1px solid var(--border-subtle) !important;
}
.twofa-info p {
    color: var(--text-secondary) !important;
}
.code-input-group input {
    background: #0F0F0F !important;
    border: 1px solid var(--border-input) !important;
    color: var(--text-primary) !important;
}

/* Responsive fix — force card padding on small screens */
@media (max-width: 480px) {
    .login-card {
        padding: 24px 20px !important;
    }
}

/* ══════════════════ NEWSLETTER CARD — Gold theme ══════════════════ */
.newsletter-card {
    background: linear-gradient(135deg, rgba(184,149,63,0.08), rgba(212,175,90,0.04)) !important;
    border: 1px solid rgba(184,149,63,0.2) !important;
}

/* ══════════════════ MARQUEE FADE — Match section bg ══════════════════ */
.marquee-wrapper::before { background: linear-gradient(90deg, var(--bg-section-mid), transparent) !important; }
.marquee-wrapper::after  { background: linear-gradient(-90deg, var(--bg-section-mid), transparent) !important; }

/* ══════════════════ COOKIE BANNER — Gold theme (WCAG-compliant, animated) ══════════════════ */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10,10,10,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(184,149,63,0.25);
    color: var(--text-primary);
    padding: 18px 24px calc(18px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 9999;
    font-size: 0.92rem;
    transform: translateY(100%);
    transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.cookie-banner.visible,
.cookie-banner.show { transform: translateY(0); }
.cookie-text { margin: 0; color: var(--text-secondary); line-height: 1.5; }
.cookie-link { color: var(--gold-light); text-decoration: underline; }
.cookie-link:hover { color: var(--gold); }
.cookie-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-btn {
    padding: 12px 22px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    min-height: 44px;
    box-sizing: border-box;
    transition: background .2s cubic-bezier(.16,1,.3,1),
                color .2s cubic-bezier(.16,1,.3,1),
                border-color .2s cubic-bezier(.16,1,.3,1),
                transform .15s ease;
}
.cookie-btn-accept {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--text-on-gold);
    border: none;
}
.cookie-btn-accept:hover { filter: brightness(1.1); }
.cookie-btn-decline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-input);
}
.cookie-btn-decline:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 640px) {
    .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
    .cookie-actions { justify-content: center; }
}

/* ══════════════════ ACCESSIBILITY — Reduced motion ══════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  FRESH AUDIT v2 — 2026-04-14  Remaining visual fixes     ║
   ╚══════════════════════════════════════════════════════════╝ */

/* A1 — WHY cards: enforce 4-column grid + equal height + gold icon (purple legacy was bleeding through) */
.why-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
}
.why-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 32px 24px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: 16px !important;
    text-align: left !important;
}
.why-card:hover {
    background: var(--bg-card-hover) !important;
    border-color: rgba(184,149,63,0.35) !important;
    box-shadow: 0 12px 32px rgba(184,149,63,0.12) !important;
    transform: translateY(-4px) !important;
}
.why-card .why-icon {
    width: 56px !important;
    height: 56px !important;
    background: rgba(184,149,63,0.1) !important;
    border: 1px solid rgba(184,149,63,0.2) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
}
.why-card .why-icon svg { color: var(--gold) !important; stroke: var(--gold) !important; }
.why-card h3 {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: var(--text-primary) !important;
    margin-bottom: 10px !important;
}
.why-card p {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
    flex: 1 !important;
}
@media (max-width: 1024px) { .why-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px)  { .why-grid { grid-template-columns: 1fr !important; } }

/* A2 — DUAL SPACE (B2C/B2B): equal height, cleanup of legacy purple gradient on partner card */
.dual-space {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
}
.space-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 40px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: 20px !important;
}
.space-partner {
    background: linear-gradient(145deg, rgba(184,149,63,0.06), rgba(184,149,63,0.02)) !important;
    border-color: rgba(184,149,63,0.25) !important;
}
.space-card h3 {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--text-primary) !important;
    margin: 20px 0 10px !important;
}
.space-card > p {
    color: var(--text-secondary) !important;
    font-size: 0.93rem !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
    min-height: 72px !important; /* equal alignment of feature list across cards */
}
.space-features {
    flex: 1 !important;
    margin-bottom: 24px !important;
}
.space-features li {
    align-items: flex-start !important;
    line-height: 1.5 !important;
    color: var(--text-primary) !important;
    font-size: 0.9rem !important;
}
.space-features svg {
    color: var(--gold) !important;
    margin-top: 2px !important;
}
.space-actions {
    margin-top: auto !important;
}
@media (max-width: 768px) {
    .dual-space { grid-template-columns: 1fr !important; }
    .space-card { padding: 28px 20px !important; }
    .space-card > p { min-height: auto !important; }
}

/* A3 — NEWSLETTER FORM: input + button pill alignment, consistent height */
.newsletter-card {
    padding: 40px 48px !important;
    gap: 32px !important;
}
.newsletter-form {
    align-items: center !important;
    background: rgba(10,10,10,0.6) !important;
    border: 1px solid rgba(184,149,63,0.25) !important;
    border-radius: 999px !important;
    padding: 6px 6px 6px 20px !important;
    gap: 8px !important;
    transition: border-color 0.2s ease !important;
}
.newsletter-form:focus-within {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(184,149,63,0.15) !important;
}
.newsletter-form input {
    background: transparent !important;
    border: none !important;
    padding: 12px 8px !important;
    width: 280px !important;
    min-height: 44px !important;
    color: var(--text-primary) !important;
}
.newsletter-form input:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.newsletter-form .btn {
    min-height: 44px !important;
    padding: 10px 22px !important;
    white-space: nowrap !important;
}
@media (max-width: 768px) {
    .newsletter-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 32px 20px !important;
    }
    .newsletter-form {
        flex-direction: row !important;
        width: 100% !important;
        max-width: 420px !important;
    }
    .newsletter-form input { width: 100% !important; min-width: 0 !important; }
}
@media (max-width: 480px) {
    .newsletter-form {
        flex-direction: column !important;
        border-radius: 16px !important;
        padding: 8px !important;
        gap: 8px !important;
    }
    .newsletter-form input,
    .newsletter-form .btn {
        width: 100% !important;
        border-radius: 999px !important;
    }
}

/* A4 — TRADE-IN card: remove legacy green/purple gradient, gold tones only; inline SVG recolor */
.tradein-card {
    background: linear-gradient(145deg, rgba(184,149,63,0.06) 0%, rgba(184,149,63,0.02) 100%) !important;
    border: 1px solid rgba(184,149,63,0.2) !important;
    border-radius: 24px !important;
}
.tradein-badge {
    background: rgba(184,149,63,0.12) !important;
    color: var(--gold) !important;
    border: 1px solid rgba(184,149,63,0.3) !important;
}
.tradein-step-num {
    background: rgba(184,149,63,0.12) !important;
    color: var(--gold) !important;
    border: 1px solid rgba(184,149,63,0.25) !important;
}
.tradein-eco {
    color: var(--gold-light) !important;
}
.tradein-eco svg { stroke: var(--gold-light) !important; }
/* Recolor inline purple SVG strokes in trade-in visual */
.tradein-visual svg rect,
.tradein-visual svg line,
.tradein-visual svg circle,
.tradein-visual svg path,
.tradein-visual svg polyline {
    stroke: rgba(184,149,63,0.7) !important;
}
.tradein-phone > svg:last-child circle,
.tradein-phone > svg:last-child path {
    stroke: var(--gold-light) !important;
}
.tradein-arrow svg polyline,
.tradein-arrow svg line {
    stroke: var(--gold) !important;
}

/* A5 — FLASH countdown: gold bg + dark text (was purple gradient + white = poor contrast) */
.countdown-unit {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
    border-radius: 8px !important;
    min-width: 54px !important;
    padding: 10px 12px !important;
}
.countdown-unit span {
    color: var(--text-on-gold) !important;
    font-weight: 800 !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
}
.countdown-unit small {
    color: rgba(10,10,10,0.7) !important;
    font-weight: 700 !important;
    margin-top: 2px !important;
}
.countdown-sep {
    color: var(--gold) !important;
    font-weight: 700 !important;
}
.countdown-label {
    color: var(--text-secondary) !important;
    font-size: 0.82rem !important;
}
.flash-icon {
    background: rgba(184,149,63,0.12) !important;
    border: 1px solid rgba(184,149,63,0.25) !important;
}
.flash-icon svg { color: var(--gold) !important; }

/* A6 — MARQUEE fade: section bg is #1C1C1C (bg-section-mid), match it so logos don't appear cut */
.marquee-wrapper::before {
    background: linear-gradient(90deg, var(--bg-section-mid) 0%, rgba(28,28,28,0) 100%) !important;
}
.marquee-wrapper::after {
    background: linear-gradient(-90deg, var(--bg-section-mid) 0%, rgba(28,28,28,0) 100%) !important;
}
.partner-logo img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.5 !important;
    transition: opacity 0.3s ease, filter 0.3s ease !important;
}
.partner-logo:hover img {
    opacity: 1 !important;
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(184,149,63,0.4)) !important;
}
.partner-logo .brand-svg {
    color: rgba(255,255,255,0.5) !important;
}
.partner-logo:hover .brand-svg {
    color: var(--gold) !important;
}

/* A7 — BENTO big card consistency: more visible content in Smartphones card; subcat chips gold */
.subcat-chip {
    background: rgba(184,149,63,0.08) !important;
    border: 1px solid rgba(184,149,63,0.2) !important;
    color: var(--text-secondary) !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
.subcat-chip:hover {
    background: rgba(184,149,63,0.18) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}
.categories-grid .category-card:first-child .subcategories {
    margin-top: 20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: 420px !important;
}

/* A8 — TRUST STRIP: nudge icons and harmonize bar height across breakpoints */
.trust-strip-item {
    justify-content: center !important;
}
.trust-strip-item svg {
    width: 22px !important;
    height: 22px !important;
    color: var(--gold) !important;
}
@media (max-width: 768px) {
    .trust-strip { padding: 20px 16px !important; }
    .trust-strip-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
    .trust-strip-item { font-size: 0.8rem !important; }
    .trust-strip-item svg { width: 18px !important; height: 18px !important; }
}

/* A9 — NAVBAR: stronger hover visual, active state underline for desktop */
.nav-links a {
    position: relative !important;
    padding: 8px 0 !important;
}
.nav-links a::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
    background: var(--gold) !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}
.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1) !important;
}
/* Keep the € prefix link without underline since it already has a mark */
.nav-links a[href="sell-phone.html"]::after {
    display: none !important;
}

/* A10 — LANGUAGE dropdown: polish, make sure the arrow svg is hidden consistently */
.lang-dropdown {
    margin-top: 8px !important;
    padding: 6px !important;
    border-radius: 12px !important;
    min-width: 170px !important;
}
.lang-option {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* A11 — FLASH: small warning pill refined */
.flash-stock-warning {
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    background: rgba(192,57,43,0.9) !important;
    color: #fff !important;
}

/* A12 — AI floating button: ensure it doesn't overlap cookie banner (visible cookie = shift up) */
body:has(.cookie-banner:not([style*="none"])) .ai-floating-btn {
    bottom: 96px !important;
}
@media (max-width: 640px) {
    body:has(.cookie-banner:not([style*="none"])) .ai-floating-btn {
        bottom: 160px !important;
    }
}

/* A13 — TESTIMONIALS: show a soft scroll-hint gradient on right edge (mobile) */
@media (max-width: 768px) {
    .testimonials-section .container {
        position: relative !important;
    }
    .testimonials-section .container::after {
        content: '' !important;
        position: absolute !important;
        top: 96px !important;
        right: 0 !important;
        bottom: 32px !important;
        width: 40px !important;
        background: linear-gradient(90deg, transparent, var(--bg-section-mid)) !important;
        pointer-events: none !important;
    }
}

/* A14 — FOOTER: Livro de Reclamações pill should stand out (PT legal obligation) */
.footer-legal a[href*="livroreclamacoes"] {
    background: rgba(184,149,63,0.08) !important;
    border: 1px solid rgba(184,149,63,0.25) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    color: var(--gold-light) !important;
}
.footer-legal a[href*="livroreclamacoes"]:hover {
    background: rgba(184,149,63,0.18) !important;
    color: var(--gold) !important;
}

/* A15 — HERO image: tighter max-height for better visual balance on laptop screens */
@media (min-width: 769px) and (max-width: 1280px) {
    .hero-image img {
        max-height: 420px !important;
    }
}
/* Remove empty gap caused by hidden scroll indicator */
.scroll-indicator { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   AUDIT FIX PASS — SUBPAGES (dashboards, checkout, auth, legal, etc.)
   Neutralizes hardcoded purple (#957EFC / rgba(149,126,252,*)) and
   cyan (#6EC1E4 / rgba(110,193,228,*)) leaks from inline styles that
   bypass the CSS variable remap. Maps them all onto the gold palette.
   ═══════════════════════════════════════════════════════════════════ */

/* === Inline-style purple/cyan background leaks → gold tints === */
[style*="rgba(149,126,252"],
[style*="rgba(149, 126, 252"],
[style*="rgba(110,193,228"],
[style*="rgba(110, 193, 228"] {
    /* cannot rewrite the inline value itself, but we can shadow it: */
}

/* Backgrounds — common inline patterns */
[style*="background:rgba(149,126,252,.04)"],
[style*="background:rgba(149,126,252,.06)"],
[style*="background:rgba(149,126,252,.08)"],
[style*="background:rgba(149,126,252,.1)"],
[style*="background:rgba(149,126,252,.12)"],
[style*="background:rgba(149,126,252,.15)"],
[style*="background:rgba(110,193,228,.04)"],
[style*="background:rgba(110,193,228,.06)"],
[style*="background:rgba(110,193,228,.08)"],
[style*="background:rgba(110,193,228,.1)"],
[style*="background:rgba(110,193,228,.12)"],
[style*="background: rgba(149,126,252"],
[style*="background: rgba(110,193,228"] {
    background: rgba(184,149,63,0.08) !important;
}

/* Borders */
[style*="border:1px solid rgba(149,126,252"],
[style*="border:1px solid rgba(110,193,228"],
[style*="border: 1px solid rgba(149,126,252"],
[style*="border: 1px solid rgba(110,193,228"],
[style*="border-color:rgba(149,126,252"],
[style*="border-color:rgba(110,193,228"] {
    border-color: rgba(184,149,63,0.25) !important;
}

/* Colors (text) */
[style*="color:rgba(149,126,252"],
[style*="color:rgba(110,193,228"],
[style*="color:#957EFC"],
[style*="color:#6EC1E4"],
[style*="color: #957EFC"],
[style*="color: #6EC1E4"] {
    color: var(--gold) !important;
}

/* === Dashboard payment/timeline/support cards: purple/cyan accents === */
.payment-card:hover {
    border-color: rgba(184,149,63,0.25) !important;
    background: rgba(255,255,255,0.03) !important;
}
.payment-card.selected {
    border-color: var(--gold) !important;
    background: rgba(184,149,63,0.06) !important;
}
.payment-icon.card,
.payment-icon.transfer {
    background: rgba(184,149,63,0.12) !important;
    color: var(--gold) !important;
}

/* Timeline (client-dashboard tracking) */
.timeline-step.completed .timeline-dot {
    background: linear-gradient(135deg, var(--gold), var(--gold-light)) !important;
    color: var(--text-on-gold) !important;
    box-shadow: 0 0 20px rgba(184,149,63,0.3) !important;
}
.timeline-step.active .timeline-dot {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
    box-shadow: 0 0 20px rgba(184,149,63,0.25) !important;
    animation: none !important;
}
.timeline-step.active .timeline-label,
.timeline-step.active .timeline-date {
    color: var(--gold) !important;
}
.tracking-meta-item span.tracking-number {
    color: var(--gold) !important;
}
.timeline-progress-bar {
    background: linear-gradient(90deg, var(--gold-dark), var(--gold)) !important;
}
.delivery-estimate {
    background: linear-gradient(135deg, rgba(34,197,94,0.04), rgba(184,149,63,0.04)) !important;
    border-color: rgba(34,197,94,0.18) !important;
}

/* Support card cyan */
.support-card-icon[style*="rgba(110,193,228"],
.support-card-icon[style*="var(--accent-cyan)"] {
    background: rgba(184,149,63,0.1) !important;
    color: var(--gold) !important;
}

/* === AUTH PAGES — green leaks that aren't strictly semantic === */
/* Keep success green for the "badge complete" dots but switch primary
   action buttons / focus rings to gold for brand consistency. */
.auth-btn-primary,
.btn-auth-primary {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important;
    color: var(--text-on-gold) !important;
}
.auth-input:focus,
.login-input:focus,
.register-input:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(184,149,63,0.15) !important;
    outline: none !important;
}

/* === SELL-PHONE: keep "eco/cash" badge green (semantic) but harmonize
   buttons so primary CTA is gold, success green reserved for confirm === */
.btn-sell-next:not(.btn-sell-green) {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
}

/* === FORM INPUTS — consistent dark-gold styling across subpages === */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-input) !important;
    color: var(--text-primary) !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(184,149,63,0.15) !important;
    outline: none !important;
}
input::placeholder,
textarea::placeholder {
    color: var(--text-tertiary) !important;
}

/* === BUTTON HIERARCHY — subpages === */
.btn-primary,
.btn-gold,
.btn-submit {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
}
.btn-primary:hover,
.btn-gold:hover,
.btn-submit:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-light)) !important;
    box-shadow: 0 8px 24px rgba(184,149,63,0.25) !important;
}
.btn-secondary,
.btn-outline {
    background: transparent !important;
    color: var(--gold) !important;
    border: 1px solid var(--gold) !important;
}
.btn-secondary:hover,
.btn-outline:hover {
    background: rgba(184,149,63,0.08) !important;
}
.btn-danger {
    background: #b8283a !important;
    color: #fff !important;
    border: none !important;
}
.btn-danger:hover {
    background: #d03347 !important;
}

/* === MOBILE 375px — subpage hardening === */
@media (max-width: 480px) {
    /* Prevent dashboards/forms from overflowing viewport */
    .dashboard-container,
    .auth-container,
    .checkout-container,
    .legal-container,
    .contact-container,
    .comparator-container,
    .sell-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* Timeline: stack dots vertically at very narrow widths */
    .timeline-horizontal {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .timeline-label {
        max-width: 72px !important;
        font-size: 0.66rem !important;
    }
    /* Payment grid: 1 column on mobile */
    .payment-grid {
        grid-template-columns: 1fr !important;
    }
    /* Buttons: full-width primary CTAs on mobile */
    .btn-primary,
    .btn-submit,
    .btn-sell-next {
        width: 100% !important;
        justify-content: center !important;
    }
    /* Comparator table: horizontal scroll hint */
    .comparator-table,
    .compare-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* Dashboard cards: 1 column */
    .stats-grid,
    .dashboard-stats,
    .kpi-grid {
        grid-template-columns: 1fr !important;
    }
}

/* === NAVBAR/FOOTER consistency across subpages === */
.footer {
    background: var(--bg-section-dark) !important;
    border-top: 1px solid var(--border-subtle) !important;
}
.footer a { color: var(--text-secondary) !important; }
.footer a:hover { color: var(--gold) !important; }
.footer .x-letter { color: var(--gold) !important; }

/* Dashboard sidebar purple accent cleanup */
.sidebar-nav a.active,
.sidebar-link.active,
.nav-item.active {
    background: rgba(184,149,63,0.1) !important;
    color: var(--gold) !important;
    border-left-color: var(--gold) !important;
}

/* Card layouts — normalize border radius and background */
.card,
.dashboard-card,
.stat-card,
.kpi-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
}

/* === SVG stroke color leaks (#22c55e used for generic icons) === */
/* Only touch clearly non-semantic ones via class, keep success/eco green */
.icon-neutral svg,
.nav-icon svg {
    stroke: currentColor !important;
}

/* ═══════════════════════════════════════════════════════════════════
   POLISH PASS — Apple-level refinements (Senior Design Director)
   Tokens, motion, shadows, hover/focus, empty/loading/micro states
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.20);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.30);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
    --shadow-gold-glow: 0 8px 28px rgba(184,149,63,0.20);
    --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 0.2s;
    --dur-base: 0.3s;
    --dur-slow: 0.4s;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
}

/* ── Typography rhythm ── */
body { line-height: 1.5 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6, .section-title, .hero-title { line-height: 1.2 !important; letter-spacing: -0.01em !important; }
h1, .hero-title { letter-spacing: -0.02em !important; }
p, .product-specs, .hero-subtitle, .section-subtitle { line-height: 1.6 !important; }
small, .text-small, .product-stock, .stat-label { line-height: 1.4 !important; }

/* ── Card consistency (border-radius 20px + lift) ── */
.product-card,
.card,
.dashboard-card,
.stat-card,
.kpi-card,
.category-card,
.testimonial-card,
.partner-card {
    border-radius: var(--radius-lg) !important;
    transition:
        transform var(--dur-base) var(--ease-apple),
        box-shadow var(--dur-base) var(--ease-apple),
        border-color var(--dur-base) var(--ease-apple),
        background var(--dur-base) var(--ease-apple) !important;
    will-change: transform;
}
.product-card:hover,
.card:hover,
.dashboard-card:hover,
.stat-card:hover,
.kpi-card:hover,
.category-card:hover,
.testimonial-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg), var(--shadow-gold-glow) !important;
}
.product-card:active { transform: translateY(-2px) scale(0.995) !important; }

/* ── Buttons: motion + hierarchy reinforcement ── */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-gold,
.btn-submit,
.btn-danger,
button {
    border-radius: var(--radius-md) !important;
    transition:
        background var(--dur-base) var(--ease-apple),
        color var(--dur-base) var(--ease-apple),
        box-shadow var(--dur-base) var(--ease-apple),
        transform var(--dur-fast) var(--ease-apple),
        border-color var(--dur-base) var(--ease-apple) !important;
}
.btn-primary:hover,
.btn-gold:hover,
.btn-submit:hover { transform: translateY(-1px) !important; box-shadow: var(--shadow-gold-glow) !important; }
.btn-primary:active,
.btn-gold:active,
.btn-submit:active,
.btn-secondary:active,
.btn-outline:active { transform: translateY(0) scale(0.98) !important; }

/* Disabled state */
.btn:disabled,
button:disabled,
.btn-primary:disabled,
.btn-gold:disabled,
.btn-submit:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* ── Inputs: refined transitions + radius ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
    border-radius: var(--radius-md) !important;
    transition:
        border-color var(--dur-base) var(--ease-apple),
        box-shadow var(--dur-base) var(--ease-apple),
        background var(--dur-base) var(--ease-apple) !important;
}

/* ── Icon normalization (stroke 1.5–2, 20–24px inline) ── */
svg { transition: transform var(--dur-base) var(--ease-apple), stroke var(--dur-base) var(--ease-apple), fill var(--dur-base) var(--ease-apple); }
.icon, .nav-icon, .btn svg, button svg { width: 20px; height: 20px; stroke-width: 1.75; }
.icon-lg { width: 24px; height: 24px; stroke-width: 1.5; }
.icon-sm { width: 16px; height: 16px; stroke-width: 2; }

/* ── Links: subtle hover ── */
a { transition: color var(--dur-base) var(--ease-apple), opacity var(--dur-base) var(--ease-apple); }

/* ── Focus visible refinement (gold 2px, offset 2px, radius-aware) ── */
*:focus-visible {
    outline: 2px solid var(--gold) !important;
    outline-offset: 2px !important;
    border-radius: inherit;
}
.btn:focus-visible,
button:focus-visible { box-shadow: 0 0 0 4px rgba(184,149,63,0.25) !important; }

/* ═══════════════════ EMPTY STATES ═══════════════════ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8) var(--space-5);
    background: var(--bg-card);
    border: 1px dashed var(--border-card);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    min-height: 320px;
    gap: var(--space-4);
    animation: empty-state-in var(--dur-slow) var(--ease-apple) both;
}
.empty-state__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--gold-bg);
    border: 1px solid var(--gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    margin-bottom: var(--space-2);
}
.empty-state__icon svg { width: 32px; height: 32px; stroke-width: 1.5; }
.empty-state__title {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    letter-spacing: -0.01em;
}
.empty-state__description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 380px;
    margin: 0;
}
.empty-state__cta { margin-top: var(--space-3); }
@keyframes empty-state-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════ SKELETON LOADERS ═══════════════════ */
.skeleton {
    display: block;
    background: linear-gradient(
        90deg,
        var(--bg-card) 0%,
        var(--bg-card-hover) 50%,
        var(--bg-card) 100%
    );
    background-size: 200% 100%;
    border-radius: var(--radius-md);
    animation: skeleton-shimmer 1.6s linear infinite;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}
.skeleton--text { height: 12px; margin: 6px 0; border-radius: 6px; }
.skeleton--title { height: 20px; width: 60%; margin: 8px 0; border-radius: 6px; }
.skeleton--line { height: 14px; width: 100%; border-radius: 6px; }
.skeleton--circle { border-radius: 50%; width: 48px; height: 48px; }
.skeleton--thumb { width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-md); }
.skeleton--card {
    height: 320px;
    border-radius: var(--radius-lg);
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Spinner fallback */
.spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2.5px solid rgba(184,149,63,0.18);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.spinner--lg { width: 40px; height: 40px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════ MICRO-INTERACTIONS ═══════════════════ */
/* Cart count badge bump */
.cart-count.bump,
.micro-anim--bump { animation: bump var(--dur-slow) var(--ease-spring); }
@keyframes bump {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35); }
    60%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}

/* Heart fill (favorite) */
.product-wishlist-btn.is-active svg,
.micro-anim--heart-fill svg {
    fill: var(--gold) !important;
    stroke: var(--gold) !important;
    animation: heart-pop var(--dur-slow) var(--ease-spring);
}
@keyframes heart-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.4); }
    60%  { transform: scale(0.85); }
    100% { transform: scale(1); }
}

/* Subtle fade-up entry */
.micro-anim--fade-up { animation: fade-up var(--dur-slow) var(--ease-apple) both; }
@keyframes fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Press feedback */
.micro-anim--press:active { transform: scale(0.97); transition: transform 0.1s var(--ease-apple); }

/* Toast slide-in (if used) */
.toast,
.notification-toast {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    animation: toast-in var(--dur-base) var(--ease-spring);
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Image loading polish ── */
img { transition: opacity var(--dur-slow) var(--ease-apple); }
img[loading="lazy"]:not([src]) { opacity: 0; }

/* ── Section spacing rhythm ── */
section { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(48px, 8vw, 96px); }
.section-header { margin-bottom: var(--space-6); }

/* ── Reduce motion preference ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .product-card:hover,
    .card:hover { transform: none !important; }
}

/* ── Selection on form fields ── */
input::selection, textarea::selection { background: rgba(184,149,63,0.4); color: #fff; }

/* ── Badges polish ── */
.badge,
.badge-new, .badge-novo,
.badge-promo, .badge-sale,
.tag, .chip {
    border-radius: var(--radius-pill) !important;
    letter-spacing: 0.02em !important;
    font-weight: 600 !important;
}

/* ── Modal/dropdown radii ── */
.modal, .modal-content, .dropdown, .lang-dropdown, .menu {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ── Mobile micro-touch targets ── */
@media (max-width: 480px) {
    .btn, button, .nav-btn { min-height: 44px; }
    .empty-state { padding: var(--space-6) var(--space-4); min-height: 260px; }
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH PAGES — HARD OVERRIDES (login-client/b2b/partner/admin,
   register-client/b2b/partner). auth.css uses #22c55e (green) and
   --accent-start (legacy purple) for buttons, badges, links, focus
   rings, and "register" CTAs. Force everything to gold so the brand
   stays consistent. Loaded AFTER auth.css in HTML <head>.
   ═══════════════════════════════════════════════════════════════════ */

/* Background — replace any green/purple radial-gradient backdrops */
.login-page,
.register-page,
.auth-page {
    background: var(--bg-body) !important;
}
.login-page::before,
.register-page::before,
.auth-page::before {
    background:
        radial-gradient(circle at 30% 50%, rgba(184,149,63,0.06) 0%, transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(184,149,63,0.04) 0%, transparent 50%) !important;
}

/* Card surface */
.login-card,
.register-card,
.auth-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
}

/* Top eyebrow badge — kill green / purple variants */
.login-badge,
.login-badge.b2b,
.login-badge.partner,
.login-badge.admin,
.register-badge {
    background: var(--gold-bg) !important;
    border: 1px solid var(--gold-dark) !important;
    color: var(--gold) !important;
}

/* Primary CTA — was green gradient on .login-btn, purple on .login-btn.b2b */
.login-btn,
.login-btn.b2b,
.login-btn.partner,
.register-btn-submit,
.auth-btn,
.btn-auth-primary {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
}
.login-btn:hover,
.login-btn.b2b:hover,
.login-btn.partner:hover,
.register-btn-submit:hover,
.auth-btn:hover,
.btn-auth-primary:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-light)) !important;
    box-shadow: 0 8px 32px rgba(184,149,63,0.3) !important;
    color: var(--text-on-gold) !important;
}

/* Input focus ring — was green/purple */
.login-form input:focus,
.login-form.b2b input:focus,
.register-form input:focus,
.auth-form input:focus,
.login-form select:focus,
.register-form select:focus,
.login-form textarea:focus,
.register-form textarea:focus {
    border-color: var(--gold) !important;
    background: rgba(184,149,63,0.04) !important;
    box-shadow: 0 0 0 3px rgba(184,149,63,0.15) !important;
    outline: none !important;
}

/* Input native widgets */
.login-options label input,
.login-form input[type="checkbox"],
.register-form input[type="checkbox"],
.auth-form input[type="checkbox"],
.login-form input[type="radio"],
.register-form input[type="radio"] {
    accent-color: var(--gold) !important;
}

/* Forgot password / inline links */
.forgot-password,
.login-link,
.register-link,
.auth-link {
    color: var(--gold) !important;
}
.forgot-password:hover,
.login-link:hover,
.register-link:hover,
.auth-link:hover {
    color: var(--gold-light) !important;
}

/* Register CTA card at bottom of login page */
.register-section {
    background: rgba(184,149,63,0.04) !important;
    border: 1px solid rgba(184,149,63,0.15) !important;
}
.register-btn {
    background: transparent !important;
    border: 1px solid rgba(184,149,63,0.3) !important;
    color: var(--gold) !important;
}
.register-btn:hover {
    background: rgba(184,149,63,0.1) !important;
    border-color: rgba(184,149,63,0.5) !important;
    color: var(--gold-light) !important;
}

/* Feature row icons (was green checkmarks) */
.login-feature svg,
.register-feature svg,
.auth-feature svg {
    color: var(--gold) !important;
    stroke: var(--gold) !important;
}
.login-feature,
.register-feature,
.auth-feature {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--border-card) !important;
}

/* Auth dot indicators — keep semantic green for "done" but gold for default */
.auth-dot { background: var(--border-input) !important; }
.auth-dot.active { background: var(--gold) !important; }
/* .auth-dot.done already green via inline — keep it semantic */

/* Back-home link */
.back-home { color: var(--text-secondary) !important; }
.back-home:hover { color: var(--gold) !important; }

/* B2B sub-variants — kill all purple */
.login-btn.b2b:hover {
    box-shadow: 0 8px 32px rgba(184,149,63,0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARDS — last-mile cleanup of green/cyan inline accents that
   bypass --accent-cyan remap (e.g. raw rgba(34,197,94,*) on buttons).
   ═══════════════════════════════════════════════════════════════════ */

/* Dashboard primary CTAs commonly use green gradient */
.dashboard-cta,
.dashboard-action-primary,
.kpi-action,
.partner-cta,
.client-cta,
.b2b-cta {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
}

/* Notification toasts (inline gradient #22c55e → #16a34a) — visually softer */
[class*="notification"][style*="22c55e"],
[class*="toast"][style*="22c55e"] {
    /* keep success semantic but tone down background to avoid full lime block */
    box-shadow: 0 8px 32px rgba(184,149,63,0.15) !important;
}

/* Sell-phone & checkout: keep semantic green for "verified/eco" badges,
   but ensure the page primary CTA stays gold */
.sell-cta-primary,
.checkout-cta-primary,
.btn-checkout {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important;
    color: var(--text-on-gold) !important;
    border: none !important;
}

/* Inline-style green text (used as accent, not just success) */
[style*="color:#22c55e"]:not(.semantic-success):not(.stock-dot):not(.status-success) {
    /* leave as-is when it's a true success indicator */
}

/* ═══════════════════════════════════════════════════════════════════
   FINAL SAFETY NET — global var() remap.
   Even if a component CSS uses var(--accent-start) directly, force
   it onto the gold ramp so legacy purple cannot resurface anywhere.
   ═══════════════════════════════════════════════════════════════════ */
:root,
:root[data-theme],
html,
body {
    --accent-start: #B8953F !important;
    --accent-end: #D4AF5A !important;
    --accent-cyan: #D4AF5A !important;
    --accent-purple: #B8953F !important;
    --primary: #B8953F !important;
    --primary-light: #D4AF5A !important;
    --primary-dark: #8A6E2F !important;
}