:root {
    /* =====================================================
       INCHCAPE BRAND COLORS — Canonical tokens
    ====================================================== */
    --color-dark-blue:       #001A41;
    --color-eco-blue:        #18BDE6;
    --color-electric-yellow: #F2E400;
    --color-mid-grey:        #848A8C;
    --color-dark-grey:       #394650;
    --color-purple:          #9E61A4;
    --color-green:           #B6CD00;
    --color-background:      #faf8fd;
    --color-surface:         #faf8fd;
    --color-white:           #ffffff;
    --color-black:           #000000;

    /* =====================================================
       LEGACY ALIASES — preserved for compatibility
    ====================================================== */
    --color-inchcape-dark-blue:       var(--color-dark-blue);
    --color-inchcape-eco-blue:        var(--color-eco-blue);
    --color-inchcape-electric-yellow: var(--color-electric-yellow);
    --color-inchcape-mid-grey:        var(--color-mid-grey);
    --color-inchcape-dark-grey:       var(--color-dark-grey);
    --color-inchcape-purple:          var(--color-purple);
    --color-inchcape-green:           var(--color-green);

    /* =====================================================
       SEMANTIC TOKENS — UI roles
    ====================================================== */
    --color-brand-primary:   var(--color-dark-blue);
    --color-brand-accent:    var(--color-eco-blue);
    --color-brand-highlight: var(--color-electric-yellow);

    --primary:        var(--color-dark-blue);
    --primary-hover:  #002a6e;
    --accent:         var(--color-eco-blue);
    --accent-hover:   #0fa8d0;
    --highlight:      var(--color-electric-yellow);
    --text-on-dark:   #ffffff;
    --text-on-light:  var(--color-dark-grey);
    --color-text-primary: var(--color-dark-grey);
    --color-text-strong:  var(--color-dark-blue);
    --color-text-muted:   var(--color-mid-grey);
    --text-muted:     var(--color-mid-grey);

    --color-surface-page:     var(--color-background);
    --color-surface-card:     var(--color-white);
    --color-surface-muted:    #f8f9fb;
    --color-border-subtle:    #e8ecf2;
    --color-border-control:   #d1d9e0;
    --color-focus-ring:       rgba(24, 189, 230, 0.16);
    --color-success:          #16a34a;
    --color-danger:           #d4144f;

    /* =====================================================
       TYPOGRAPHY SCALE
    ====================================================== */
    --font-brand: "ITC Avant Garde Gothic", "Avant Garde Gothic Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --fs-page-title: 3rem;
    --lh-page-title: 1.2;

    --fs-section-title: 2rem;
    --lh-section-title: 1.2;

    --fs-subsection-title: 1.5rem;
    --lh-subsection-title: 1.25;

    --fs-card-title: 1rem;
    --lh-card-title: 1.3;

    --fs-product-price: 1.125rem;
    --lh-product-price: 1.2;

    --fs-h1: clamp(2.25rem, 5vw, 3.5rem);
    --lh-h1: 1.07;

    --fs-h2: clamp(1.875rem, 4vw, 2.5rem);
    --lh-h2: 1.1;

    --fs-h3: clamp(1.5rem, 3vw, 1.75rem);
    --lh-h3: 1.14;

    --fs-body-lg: 1.125rem;
    --lh-body-lg: 1.55;

    --fs-body: 1rem;
    --lh-body: 1.5;

    --fs-small: 0.875rem;
    --lh-small: 1.4;

    --fs-meta: 0.8125rem;
    --lh-meta: 1.35;

    --fs-label: 0.875rem;
    --lh-label: 1.42;

    /* Menu Font Sizes */
    --inchcape-menu-font-size: 1rem;
    --inchcape-submenu-font-size: 0.95rem;

    /* =====================================================
       SPACING SYSTEM
    ====================================================== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;
    --space-9: 64px;

    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-4);
    --space-lg: var(--space-5);
    --space-xl: var(--space-8);

    /* =====================================================
       LAYOUT
    ====================================================== */
    --container-sm: 960px;
    --container-md: 1200px;
    --container-lg: 1280px;
    --container-xl: 1440px;
    --container-shop: 1600px;
    --container-max: var(--container-lg);
    --gutter: var(--space-5);
    --gutter-fluid: clamp(var(--space-4), 4vw, var(--space-9));

    /* =====================================================
       BORDERS & RADIUS
    ====================================================== */
    --radius-sm:   0.125rem;
    --radius-md:   0.25rem;
    --radius-lg:   0.375rem;
    --radius-xl:   0.5rem;
    --radius-2xl:  0.75rem;
    --radius-full: 9999px;

    --border-subtle: 1px solid var(--color-border-subtle);
    --border-control: 1px solid var(--color-border-control);

    --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 28px rgba(0, 26, 65, 0.12);
    --shadow-panel: 0 18px 45px rgba(0, 26, 65, 0.07);

    /* =====================================================
       COMPONENT TOKENS
    ====================================================== */
    --button-height: 2.75rem;
    --button-height-sm: 2.5rem;
    --button-height-lg: 3rem;
    --button-padding-x: 1rem;
    --button-padding-y: 0.65rem;
    --button-font-size: 0.875rem;
    --button-font-weight: 700;
    --input-height: 2.75rem;
    --input-height-lg: 3.75rem;
    --input-padding-x: 0.875rem;
    --input-padding-icon: 3.75rem;
    --input-font-size: 0.95rem;
    --input-radius: var(--radius-lg);
    --input-border: var(--border-control);
    --input-focus-border: var(--color-inchcape-eco-blue);
    --input-focus-ring: 0 0 0 3px var(--color-focus-ring);
    --notice-padding: var(--space-4);
    --notice-radius: var(--radius-xl);
    --notice-accent-width: 4px;
    --product-card-image-height: 140px;
    --product-card-image-max-height: 115px;
    --product-grid-min: 220px;
    --widget-section-padding-y: 60px;
    --widget-section-padding-x: 40px;
    --widget-section-padding-y-mobile: 40px;
    --widget-section-padding-x-mobile: 20px;
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;

    /* =====================================================
       TRUST BADGE ICON SIZE — ensures uniformity
    ====================================================== */
    --badge-icon-size: 48px;
}

/* =====================================================
   HERO BUTTON STYLE
====================================================== */
.inchcape-hero-banner .inchcape-btn-primary {
    background-color: var(--color-electric-yellow);
    color: var(--color-dark-blue);
    border-color: var(--color-electric-yellow);
    font-weight: 700;
}
.inchcape-hero-banner .inchcape-btn-primary:hover {
    background-color: #fff;
    color: var(--color-dark-blue);
    border-color: #fff;
}

/* =====================================================
   TRUST BADGE ICON UNIFORMITY
====================================================== */
.inchcape-badges-carousel .inchcape-carousel-slide img,
.inchcape-badges-carousel .inchcape-carousel-slide svg,
.inchcape-trust-badges .trust-badge-item svg,
.inchcape-trust-badges .trust-badge-item img,
.ps-badge-img {
    height: var(--badge-icon-size);
    width: auto;
    max-width: 120px;
    max-height: var(--badge-icon-size);
    object-fit: contain;
    flex-shrink: 0;
}

/* Make sure picture tag acts as an inline wrapper without interfering */
picture {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =====================================================
   "ENCUENTRA TU REPUESTO" SECTION SPACING
====================================================== */
.inchcape-product-search-container {
    padding: var(--space-xl) calc(var(--gutter) * 2);
}
@media (max-width: 768px) {
    .inchcape-product-search-container {
        padding: var(--space-lg) var(--gutter);
    }
}