/*
Theme Name: PneuPro Custom Shell
Description: Ultra-lean shell for pure HTML/CSS/JS design.
Author: Ayoub Makhloufi
Template: hello-elementor
Version: 1.0.0
*/

/* --- PNEUPRO DESIGN SYSTEM --- */
:root {
    --pneu-blue: #2B70FF;
    --pneu-dark: #0F172A;
    --pneu-text-muted: #94A3B8;
    --pneu-white: #F8FAFC;
    --whatsapp-green: #25D366;
    --white: #FFFFFF;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- RESET & BASE --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('assets/fonts/PlusJakartaSans-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--pneu-white);
    color: var(--pneu-dark);
    line-height: 1.5;
}

/* ==========================================================================
   01. HEADER & DYNAMIC NAVIGATION ENGINE
   ========================================================================== */

/* Prevent body scroll when mobile menu is open */
body.menu-open {
    overflow: hidden;
}

/* --- CONTAINER --- */
.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- SVG GLOBAL --- */
svg {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    flex-shrink: 0;
}

/* --- TOP BAR --- */
.top-bar {
    background-color: var(--pneu-blue);
    color: var(--white);
    padding: 10px 0;
    font-size: 13px;
    font-weight: 500;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    position: relative;
    z-index: 1001;
}

.top-bar-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-info {
    display: flex;
    align-items: center;
    font-weight: 650;
}

.top-bar a {
    color: var(--white);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.top-bar a:hover { opacity: 0.8; }

.top-bar svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.separator { margin: 0 15px; opacity: 0.3; }

/* --- ENGINE: INLINE TEXT ROTATOR PANEL SYSTEM --- */
.usp-rotator {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 220px;
    height: 24px;
    overflow: hidden;
}

.usp-item {
    position: absolute;
    opacity: 0;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: #FFFFFF;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    transform: translateY(15px);
    transition: opacity 0.4s ease-in-out, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    white-space: nowrap;
}

.usp-item.active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.usp-icon {
    font-size: 14px;
}

.social-icons {
    display: flex;
    gap: 15px;
}
.social-icons svg {
    fill: currentColor;
}

/* --- MAIN HEADER --- */
.main-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 0; /* was 15px */
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.main-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* --- LOGO --- */
.logo a,
.mobile-menu-header .logo {
    font-size: 26px;
    font-weight: 800;
    color: var(--pneu-dark);
    text-decoration: none;
}

.logo span,
.mobile-menu-header .logo span {
    color: var(--pneu-blue);
}
.logo {
    flex-shrink: 0;
    overflow: hidden;
}


.pneupro-header-logo-svg {
    display: block;
    width: 220px !important;
    height: 50px !important;
    object-fit: contain;
    object-position: left center;
    max-width: 220px;
}
/* ==========================================================================
   DESKTOP DYNAMIC NAVIGATION NAV SYSTEM (Min-width: 1025px)
   ========================================================================== */
@media (min-width: 1025px) {
    .nav-desktop {
        display: block !important;
    }

    .nav-desktop ul {
        display: flex;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-desktop ul li {
        position: relative;
        padding: 15px 0;
        margin: 0 18px;
    }

    .nav-desktop ul li a {
        text-decoration: none;
        color: var(--pneu-dark);
        font-weight: 700;
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: color 0.2s ease;
    }

    .nav-desktop ul li a:hover {
        color: var(--pneu-blue);
    }

    .nav-desktop ul li.menu-item-has-children > a::after {
        content: "";
        width: 5px;
        height: 5px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        margin-top: -2px;
        display: inline-block;
        transition: transform 0.2s ease;
    }

    .nav-desktop ul li .sub-menu {
        position: absolute;
        top: 100%;
        left: -20px;
        background: #ffffff !important;
        min-width: 240px;
        box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08) !important;
        border-radius: 16px !important;
        padding: 12px 0 !important;
        list-style: none !important;
        margin: 0 !important;
        display: block !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
        z-index: 9999;
    }

    .nav-desktop ul li .sub-menu li {
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
    }

    .nav-desktop ul li .sub-menu li a {
        padding: 12px 24px !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        color: #475569 !important;
        display: block !important;
        transition: all 0.2s ease !important;
    }

    .nav-desktop ul li .sub-menu li a:hover {
        background-color: rgba(8, 85, 254, 0.04) !important;
        color: var(--pneu-blue) !important;
        padding-left: 28px !important;
    }

    .nav-desktop ul li:hover .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    .nav-desktop ul li:hover > a::after {
        transform: rotate(225deg);
        margin-top: 3px;
    }
}

/* ==========================================================================
   MOBILE & TABLET NAVIGATION PANEL OVERLAYS (Max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    .nav-desktop {
        display: none !important;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        max-width: 380px;
        height: 100vh;
        background: #ffffff;
        box-shadow: -10px 0 30px rgba(15, 23, 42, 0.05);
        z-index: 9999;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .nav-menu.active {
        right: 0;
    }

    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    }

    .close-menu {
        background: none;
        border: none;
        font-size: 32px;
        color: var(--pneu-dark);
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }

    .nav-menu ul {
        list-style: none;
        padding: 24px;
        margin: 0;
    }

    .nav-menu ul li {
        margin-bottom: 18px;
        position: relative;
        width: 100%;
    }

    .nav-menu ul li a {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--pneu-dark);
        text-decoration: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
    }

    .nav-menu ul li.menu-item-has-children > a::after {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
        display: inline-block;
        margin-left: 8px;
        margin-right: 4px;
        fill: none !important;
    }

    .nav-menu .sub-menu {
        max-height: 0;
        overflow: hidden;
        padding: 0 0 0 16px !important;
        margin: 0 !important;
        list-style: none !important;
        transition: max-height 0.25s ease-out;
    }

    .nav-menu .sub-menu li {
        margin-top: 12px;
        margin-bottom: 4px;
    }

    .nav-menu .sub-menu li a {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #64748B !important;
    }

    .nav-menu .menu-item-has-children.open .sub-menu {
        max-height: 400px;
        margin-top: 6px !important;
    }

    .nav-menu .menu-item-has-children.open > a::after {
        transform: rotate(225deg);
    }

    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        z-index: 9998;
        transition: all 0.3s ease;
    }

    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

/* --- ACTIONS & CTAs BUTTON BASES --- */
.pneupro-btn-outline {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 28px;
    border: 2px solid var(--pneu-blue);
    color: var(--pneu-blue) !important;
    font-weight: 800;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .pneupro-btn-outline {
        display: inline-flex;
    }
}

.pneupro-btn-outline:hover {
    background: var(--pneu-blue);
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(43, 112, 255, 0.2);
}

.pneupro-btn-outline .cta-icon {
    transition: transform 0.3s ease;
    stroke: currentColor;
}

.pneupro-btn-outline:hover .cta-icon {
    transform: translateX(4px);
}

.pneupro-btn-outline:active {
    transform: scale(0.96);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.interaction-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.action-icon {
    color: var(--pneu-dark);
    text-decoration: none;
    position: relative;
    display: flex;
    align-items: center;
    transition: var(--transition);
}

.action-icon:hover { color: var(--pneu-blue); }

.action-icon svg {
    width: 24px;
    height: 24px;
}

.whatsapp-link { color: var(--whatsapp-green) !important; }
.whatsapp-link:hover { transform: scale(1.1); }

/* --- CART BADGE --- */
.badge-container { padding: 4px; }

.badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--pneu-blue);
    color: white;
    font-size: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    font-weight: 700;
    pointer-events: none;
}

.badge:empty,
.badge.cart-count[data-count="0"] {
    display: none;
}

.phone-icon svg {
    transform: rotate(90deg);
    display: inline-block;
}

/* --- HAMBURGER TOGGLE TRIGGER --- */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    padding: 5px;
}

.mobile-toggle .bar {
    width: 25px;
    height: 2px;
    background-color: var(--pneu-dark);
    border-radius: 2px;
    transition: var(--transition);
    display: block;
}

body.menu-open .mobile-toggle .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
body.menu-open .mobile-toggle .bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
body.menu-open .mobile-toggle .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   MOBILE STRUCTURAL VIEWPORT RESPONSIVITY BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
    .mobile-toggle {
        display: flex;
    }

    .top-bar .social-icons {
        display: none;
    }

    .top-bar-flex {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
        /* Padding here pushes content away from edges without clipping children */
        padding: 6px 16px !important;
    }

    .contact-info,
    .usp-rotator {
        flex-shrink: 1;
        min-width: 0 !important;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: flex; /* Ensures alignment */
        align-items: center;
    }

    /* Fixed: Removed flex-wrap: wrap and ensured it stays inline */
    .top-bar .contact-info {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 6px;
        font-weight: 700;
    }

    .separator {
        display: none;
    }

    /* Fixed: Removed width: 100% to allow side-by-side layout */
    .usp-rotator {
        width: auto !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .logo a {
    display: flex;
    align-items: center;
    line-height: 1;
    }

    .interaction-group {
        gap: 10px;
    }

    .action-icon svg {
        width: 22px;
        height: 22px;
    }

    .top-bar {
        font-size: 12px;
    }
}


@media (max-width: 768px) {
    .pneupro-header-logo-svg {
        width: 160px !important;
    }
}
/* ============================================
   MODERNIZED BLOG SLIDER DESIGN
   ============================================ */

.bp-section {
    background: var(--pneu-white, #f8fafc);
    padding: 60px 48px;
    border-radius: 24px;
}

.bp-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 16px;
}

.bp-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pneu-blue, #2b70ff);
    margin-bottom: 8px;
}

.bp-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: var(--pneu-dark, #0f172a);
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.02em;
}

.bp-see-all {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--pneu-blue, #2b70ff);
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bp-see-all:hover {
    border-bottom-color: var(--pneu-blue, #2b70ff);
    transform: translateX(3px);
}

/* ── Modern Snap-Scroll Slider Engine ────────────────── */

.bp-slider-wrap {
    position: relative;
}

.bp-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hides default scrollbars on Firefox */
    padding: 10px 4px;
    margin: -10px -4px;
}

.bp-track::-webkit-scrollbar {
    display: none; /* Hides default scrollbars on Chrome/Safari/Edge */
}

/* ── Sleek Card Architecture ────────────────────────── */

.bp-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 48px) / 3); /* Forces exactly 3 cards per row view */
    scroll-snap-align: start;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02), 0 2px 4px -1px rgba(15, 23, 42, 0.01);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.bp-card:hover {
    box-shadow: 0 20px 25px -5px rgba(43, 112, 255, 0.12), 0 10px 10px -5px rgba(43, 112, 255, 0.04);
    transform: translateY(-5px);
    border-color: rgba(43, 112, 255, 0.15);
}

/* Image zoom effect container */
.bp-img-wrapper {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

.bp-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bp-card:hover .bp-card-img {
    transform: scale(1.06);
}

.bp-no-thumb {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.bp-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── Premium Category Badges ────────────────────────── */

.bp-cat {
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    width: fit-content;
    background: rgba(43, 112, 255, 0.06);
    color: var(--pneu-blue, #2b70ff);
}

/* ── Card Content Typography ────────────────────────── */

.bp-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--pneu-dark, #0f172a);
    line-height: 1.4;
    margin: 0 0 12px;
}

.bp-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bp-card-title a:hover {
    color: var(--pneu-blue, #2b70ff);
}

.bp-card-excerpt {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--pneu-text-muted, #64748b);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 20px;
}

/* ── Card Footer ─────────────────────────────────────── */

.bp-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f1f5f9;
    padding-top: 16px;
    margin-top: auto;
}

.bp-date {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--pneu-text-muted, #94a3b8);
}

.bp-read {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--pneu-blue, #2b70ff);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s ease;
}

.bp-read:hover {
    gap: 8px;
}

/* ── Progressive Pagination Dots ─────────────────────── */

.bp-nav {
    display: flex;
    gap: 8px;
    margin-top: 36px;
    justify-content: center;
    align-items: center;
}

.bp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    cursor: pointer;
    background-color: #cbd5e1;
    border: none;
    padding: 0;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bp-dot.active {
    background-color: var(--pneu-blue, #2b70ff);
    width: 22px;
    border-radius: 6px;
}

/* ── Glassmorphism Navigation Arrows ─────────────────── */

.bp-arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% + 40px);
    left: -20px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

.bp-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: var(--pneu-dark, #0f172a);
    padding: 0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transition: all 0.25s ease;
}

.bp-arrow:hover {
    background-color: var(--pneu-blue, #2b70ff);
    border-color: var(--pneu-blue, #2b70ff);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(43, 112, 255, 0.3);
}

.bp-arrow svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* ── Fix Hello Elementor Sticky Theme Pink Focus ─────── */

/* 1. Reset Arrows back to their clean white state when focused */
.bp-slider-wrap button.bp-arrow:focus,
.bp-slider-wrap button.bp-arrow:focus-visible {
    background-color: #ffffff;
    border-color: rgba(15, 23, 42, 0.06);
    color: var(--pneu-dark, #0f172a);
    outline: none;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* 2. Maintain the beautiful brand blue while being actively hovered or clicked */
.bp-slider-wrap button.bp-arrow:hover,
.bp-slider-wrap button.bp-arrow:active,
.bp-slider-wrap button.bp-arrow:focus:hover {
    background-color: var(--pneu-blue, #2b70ff);
    border-color: var(--pneu-blue, #2b70ff);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(43, 112, 255, 0.3);
}

/* 3. Reset Pagination Dots to prevent them from turning pink when clicked */
.bp-slider-wrap button.bp-dot:focus,
.bp-slider-wrap button.bp-dot:focus-visible {
    background-color: #cbd5e1;
    outline: none;
    box-shadow: none;
}

/* 4. Ensure the active dot maintains its modern wide blue capsule look */
.bp-slider-wrap button.bp-dot.active {
    background-color: var(--pneu-blue, #2b70ff);
}

/* ============================================
   RESPONSIVE DESIGN SYSTEM
   ============================================ */

@media (max-width: 1024px) {
    .bp-card {
        flex: 0 0 calc((100% - 24px) / 2); /* Shows exactly 2 cards on Tablets */
    }
    .bp-section {
        padding: 44px 32px;
    }
    .bp-arrows {
        width: calc(100% + 16px);
        left: -8px;
    }
}

@media (max-width: 640px) {
    .bp-card {
        flex: 0 0 100%; /* Shows exactly ONE card on Mobile, no stacking */
    }
    .bp-section {
        padding: 32px 20px;
    }
    .bp-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 28px;
    }
    .bp-title {
        font-size: 26px;
    }
    /* Hide navigation arrows on mobile devices to let users rely on native gestures */
    .bp-arrows {
        display: none;
    }
}
/* ============================================
   PNEUPRO FOOTER
   ============================================ */

.pneupro-footer {
    background-color: var(--pneu-dark);
    color: #ffffff;
    padding-top: 70px;
    border-top: 4px solid var(--pneu-blue);
}

/* Grid */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 60px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 40px;
    align-items: start;
}

/* Brand column */
.brand-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: -70px;
}

.brand-logo-wrap {
    width: 200px;
}

.brand-logo-wrap a {
    display: block;
}

.brand-logo-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

.brand-tagline {
    color: #E2E8F0;
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
    max-width: 280px;
}

/* Nav columns */
.footer-col h3 {
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    margin: 0 0 22px 0;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col a {
    color: #E2E8F0;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.footer-col a:hover {
    color: #ffffff;
    transform: translateX(3px);
}

/* Contact column */
.contact-col address {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.address-text {
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}

.contact-label {
    display: block;
    margin-top: 10px;
    color: #ffffff;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.contact-link {
    color: #E2E8F0;
    text-decoration: none;
    font-size: 14px;
    display: block;
}

.contact-link.highlight {
    color: var(--pneu-blue);
    font-weight: 700;
}

.contact-link.highlight:hover {
    filter: brightness(1.25);
}

/* Map */
.footer-map-container {
    margin-top: 18px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    height: 135px;
}

.footer-map-container iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* Bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.25);
    padding: 24px 0;
}

.bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #94A3B8;
}

.bottom-container p {
    margin: 0;
}

.ice-number {
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
}



/* Mobile */
@media (max-width: 600px) {
    /* 1. Force the grid to a single column */
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* 2. Reset the negative margin that pulls the logo up */
    .brand-col {
        margin-top: 0;
        text-align: center;
        align-items: center;
    }

    /* 3. Ensure everything else is centered */
    .footer-col,
    .contact-col {
        text-align: center;
        align-items: center;
    }

    .brand-logo-wrap {
        margin: 0 auto;
    }

    .brand-tagline {
        margin: 0 auto;
        max-width: 100%; /* Allows text to use full width */
    }

    .contact-col address {
        align-items: center;
    }

    .footer-map-container {
        margin: 18px auto 0;
    }

    /* 4. Optional: Stack the bottom bar contents if they feel cramped */
    .bottom-container {
        flex-direction: column;
        gap: 10px;
    }
}
/* ============================================
   NAV SYSTEM (patched)
   ============================================ */
/* ============================================
   NAV — Desktop inline nav
   ============================================ */

/* Desktop nav: visible inline inside header */
.nav-desktop {
    display: none; /* hidden on mobile */
}

@media (min-width: 1025px) {
    .nav-desktop {
        display: block;
    }
}

.nav-desktop ul {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-desktop ul li a {
    text-decoration: none;
    color: var(--pneu-dark);
    font-size: 15px;
    font-weight: 600;
    transition: var(--transition);
}

.nav-desktop ul li a:hover,
.nav-desktop ul li.current-menu-item > a,
.nav-desktop ul li a.active {
    color: var(--pneu-blue);
}

/* ============================================
   NAV — Mobile slide-in panel (outside header)
   ============================================ */

/* Hidden by default on all screen sizes */
.nav-menu {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: min(300px, 85vw);
    height: 100dvh;
    background: var(--white);
    z-index: 9999;
    padding: 30px;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    pointer-events: none;
}

.nav-menu.active {
    right: 0;
    pointer-events: auto;
}

.nav-menu ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu ul li a {
    display: block;
    width: 100%;
    padding: 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--pneu-dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    transition: var(--transition);
}

.nav-menu ul li a:hover {
    color: var(--pneu-blue);
    padding-left: 6px;
}

.nav-menu ul li:last-child a {
    border-bottom: none;
}

/* Mobile header inside the panel */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.close-menu {
    font-size: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--pneu-dark);
    line-height: 1;
    padding: 4px;
}

/* Overlay sits BEHIND the nav panel */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
    z-index: 9998; /* one below nav-menu */
}

.menu-overlay.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================================
   PneuPro Global WooCommerce Catalog Ordering Dropdown Styling
   ========================================================================== */

/* Universal structural placement for the sorting form */
.woocommerce-ordering {
    margin: 0 0 25px auto; /* Ensures it naturally pushes to the right of the layout */
    display: inline-block;
}

.woocommerce-ordering select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #ffffff !important;
    border: 2px solid #0855FE !important; /* Flagship Blue */
    border-radius: 12px !important;       /* Clean modern curves matching the UI */
    color: #0F172A !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 10px 40px 10px 16px !important;
    cursor: pointer;
    line-height: normal !important;

    /* Premium custom down chevron vector matching our primary identity */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230855FE' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Micro-interactions for active state changes */
.woocommerce-ordering select:hover {
    border-color: #0341CD !important;
    background-color: #F8FAFC !important;
}

.woocommerce-ordering select:focus {
    border-color: #0341CD !important;
    box-shadow: 0 0 0 3px rgba(8, 85, 254, 0.15) !important;
    outline: none !important;
}

/* Responsive adjustment for clean presentation on mobile viewports */
@media (max-width: 768px) {
    .woocommerce-ordering {
        width: 100% !important;
        margin: 0 0 20px 0 !important;
    }
    .woocommerce-ordering select {
        width: 100% !important; /* Spans smoothly across fluid phone rows */
    }
}

/* ==========================================================================
   PneuPro Universal Breadcrumbs Styling Override
   ========================================================================== */

/* Main Container Alignment */
.pneupro-breadcrumbs,
.woocommerce-breadcrumb {
    padding: 18px 0;
    margin: 0 0 20px 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748B; /* Soft slate grey for secondary navigation hierarchy */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Base Navigation Links styling */
.pneupro-breadcrumbs a,
.woocommerce-breadcrumb a {
    color: #475569;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

/* Hover Accent tracking your Flagship Blue */
.pneupro-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
    color: #0855FE;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Premium Vector Chevron Separator */
.pneupro-breadcrumbs .breadcrumb-separator {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
}

/* Highlight style rule explicitly for the active trailing text leaf */
.pneupro-breadcrumbs :not(a):last-child,
.woocommerce-breadcrumb :not(a):last-child {
    color: #0F172A; /* Dark Slate to mark exactly where the user is */
    font-weight: 700;
}

/* Mobile fluid wrapping fixes */
@media (max-width: 768px) {
    .pneupro-breadcrumbs,
    .woocommerce-breadcrumb {
        padding: 12px 0;
        font-size: 0.82rem;
        gap: 6px;
    }
}

/* ==========================================================================
   PneuPro Premium Global FAQ Card Sheet Overrides (Fully Responsive V3)
   ========================================================================== */

.pneupro-seo-bottom-wrapper {
    margin-top: 60px;
    border-top: 1px solid #E2E8F0;
    padding-top: 50px;
    margin-bottom: 80px !important;
    clear: both;
    width: 100%;
    display: block !important;
}

.pneupro-faq-section {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.pneupro-faq-section .pneupro-faq-title {
    text-align: center !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin-bottom: 32px !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
}

.pneupro-faq-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* --- The Premium Card Pod --- */
.pneupro-faq-container .faq-item {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    transition: all 0.25s ease-in-out !important;
    border-left: 0px solid #0855FE !important;
    list-style: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Hover and Active Micro-interactions */
.pneupro-faq-container .faq-item:hover {
    box-shadow: 0 15px 35px rgba(8, 85, 254, 0.06) !important;
}

.pneupro-faq-container .faq-item.active {
    border-left: 6px solid #0855FE !important;
    box-shadow: 0 20px 40px rgba(8, 85, 254, 0.1) !important;
    transform: translateY(-2px);
}

/* --- Core Button Trigger Responsive Layout Engine --- */
.pneupro-faq-container button.faq-question {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 24px 30px !important;
    cursor: pointer !important;
    gap: 20px !important; /* Safety channel preventing text from hitting the icon */
    box-shadow: none !important;
    text-transform: none !important;
    margin: 0 !important;
    transition: background-color 0.2s ease !important;
    box-sizing: border-box !important;
}

.pneupro-faq-container button.faq-question:hover,
.pneupro-faq-container button.faq-question:focus {
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
}

/* --- Text Element Wrapping Optimization --- */
.pneupro-faq-container button.faq-question span {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: #1E293B !important;
    line-height: 1.4 !important;
    transition: color 0.2s ease !important;

    /* CRUCIAL FIX: Unlocks multi-line text wrapping for long questions */
    flex: 1 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: block !important;
}

.pneupro-faq-container .faq-item.active button.faq-question span {
    color: #0855FE !important;
}

/* --- SVG Round Icon Fixed Architecture --- */
.pneupro-faq-container .faq-icon {
    width: 40px !important;
    height: 40px !important;
    background-color: rgba(8, 85, 254, 0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important; /* CRUCIAL FIX: Keeps icon perfectly circular on mobile */
    transition: all 0.2s ease-in !important;
}

/* Overriding theme-specific SVG color bleeding */
.pneupro-faq-container .faq-svg-icon {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    stroke: #0855FE !important;
    fill: none !important;
    transition: transform 0.2s ease-in !important;
}

/* Active State Transformation Framework */
.pneupro-faq-container .faq-item.active .faq-icon {
    background-color: #0855FE !important;
    transform: rotate(180deg) !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Enforces conversion to crisp white while expanded */
.pneupro-faq-container .faq-item.active .faq-svg-icon {
    filter: brightness(0) invert(1) !important;
    stroke: #ffffff !important;
    fill: none !important;
}

/* --- Pure CSS Grid Slide Transition Logic --- */
.pneupro-faq-container .faq-answer {
    display: grid !important;
    grid-template-rows: 0fr !important;
    padding: 0 30px !important;
    transition: grid-template-rows 0.2s ease-in !important;
    box-sizing: border-box !important;
}

.pneupro-faq-container .faq-item.active .faq-answer {
    grid-template-rows: 1fr !important;
    transition: grid-template-rows 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.pneupro-faq-container .faq-answer-inner {
    overflow: hidden !important;
    width: 100%;
}

.pneupro-faq-container .faq-answer p {
    color: #475569 !important;
    line-height: 1.65 !important;
    font-size: 0.98rem !important;
    padding-bottom: 24px !important;
    margin: 0 !important;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE VIEWPORT BREAKPOINTS
   ========================================================================== */
@media (max-width: 768px) {
    .pneupro-faq-container button.faq-question {
        padding: 18px 20px !important;
        gap: 14px !important;
    }

    .pneupro-faq-container .faq-answer {
        padding: 0 20px !important;
    }

    .pneupro-faq-container button.faq-question span {
        font-size: 1rem !important;
        line-height: 1.35 !important;
    }

    .pneupro-faq-container .faq-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .pneupro-faq-container .faq-svg-icon {
        width: 18px !important;
        height: 18px !important;
    }
}

@media (max-width: 480px) {
    .pneupro-faq-container button.faq-question {
        padding: 16px 16px !important;
        gap: 12px !important;
    }

    .pneupro-faq-container .faq-answer {
        padding: 0 16px !important;
    }

    .pneupro-faq-container button.faq-question span {
        font-size: 0.95rem !important;
    }
}

/* ==========================================================================
   --- FIXED PNEUPRO SALE PRODUCTS SLIDER DESIGN SYSTEM ---
   ========================================================================== */

.pneupro-promo-section-wrapper {
    padding: 60px 0;
    background-color: #F8FAFC;
    width: 100%;
}

/* Section Header Typography */
.section-header-slider {
    text-align: center;
    margin-bottom: 40px;
}

.section-header-slider h2 {
    font-size: 36px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 12px 0;
    letter-spacing: -0.04em;
}

.section-header-slider p {
    font-size: 17px;
    color: #64748B;
    max-width: 600px;
    margin: 0 auto;
}

.pneupro-slider-outer-container {
    width: 100%;
    position: relative;
    padding: 0 25px;
    box-sizing: border-box;
}

.pneupro-products-slider {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 20px 8px 35px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.pneupro-products-slider::-webkit-scrollbar {
    display: none;
}

/* --- FIXING ARROWS & SUPPRESSING THE PINK DEFAULT ACTIVE STATE --- */
.pneupro-arrow,
.pneupro-arrow:focus,
.pneupro-arrow:active,
.pneupro-arrow:focus-visible {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: #FFFFFF !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 50% !important;
    color: #0F172A !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.08) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    outline: none !important;
}

.pneupro-arrow svg {
    width: 20px;
    height: 20px;
}

.arrow-left { left: -15px; }
.arrow-right { right: -15px; }

/* Force clean hover states over theme definitions */
.pneupro-arrow:hover {
    background: #2B70FF !important;
    color: #FFFFFF !important;
    border-color: #2B70FF !important;
    box-shadow: 0 8px 22px rgba(43, 112, 255, 0.3) !important;
}

/* --- THE CARD LAYOUT --- */
.pneupro-slide-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    padding: 25px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pneupro-slide-card:hover {
    transform: translateY(-8px);
    border-color: #2B70FF;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.pneupro-promo-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #ff2d2d;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 6px;
    letter-spacing: 0.05em;
    z-index: 2;
}

.pneupro-card-image-link {
    display: flex;
    width: 100%;
    height: 180px;
    margin-bottom: 15px;
    align-items: center;
    justify-content: center;
}

.pneupro-card-thumb {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.pneupro-slide-card:hover .pneupro-card-thumb {
    transform: scale(1.05);
}

.pneupro-card-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.pneupro-card-title {
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.4;
    margin: 0 0 15px 0;
    min-height: 44px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pneupro-card-title a { color: inherit; text-decoration: none; }
.pneupro-card-title a:hover { color: #2B70FF; }

/* --- OVERRIDING WOOCOMMERCE INJECTED PRICE TEXT STRUCTURING --- */
.pneupro-card-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

/* Force regular crossout styling values */
.pneupro-card-price-row .pneupro-price-old,
.pneupro-card-price-row .pneupro-price-old del,
.pneupro-card-price-row .pneupro-price-old .amount,
.pneupro-card-price-row .pneupro-price-old bdi {
    color: #64748B !important;
    text-decoration: line-through !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Force sale highlighted styling values */
.pneupro-card-price-row .pneupro-price-current,
.pneupro-card-price-row .pneupro-price-current ins,
.pneupro-card-price-row .pneupro-price-current .amount,
.pneupro-card-price-row .pneupro-price-current bdi {
    color: var(--pneu-blue) !important;
    font-weight: 800 !important;
    font-size: 19px !important;
    text-decoration: none !important;
}

/* Remove WooCommerce's native generated block formatting */
.pneupro-card-price-row del, .pneupro-card-price-row ins {
    background: transparent !important;
    padding: 0 !important;
    text-decoration: none !important;
}

/* --- FIXING CTA BUTTON: STRIKING PNEUPRO BLUE --- */
.pneupro-card-btn,
.pneupro-card-btn:focus,
.pneupro-card-btn:visited {
    display: block !important;
    text-align: center !important;
    background: #2B70FF !important; /* PneuPro Blue */
    color: #FFFFFF !important;
    text-decoration: none !important;
    padding: 13px 20px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border: 1px solid #2B70FF !important;
    box-shadow: 0 4px 12px rgba(43, 112, 255, 0.15) !important;
}

.pneupro-slide-card:hover .pneupro-card-btn {
    background: #0F172A !important; /* Elegant transition switch to dark text focus */
    border-color: #0F172A !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.2) !important;
}
/* --- TRAPPING THE WOOCOMMERCE CURRENCY SYMBOL INTERNAL CLASS --- */
.pneupro-card-price-row .pneupro-price-current .woocommerce-Price-currencySymbol,
.pneupro-card-price-row .woocommerce-Price-currencySymbol,
.pneupro-card-price-row ins .woocommerce-Price-currencySymbol {
    color: #2B70FF !important; /* Force currency symbol to PneuPro Blue */
    font-weight: 800 !important;
    font-size: 16px !important; /* Slightly smaller scale for standard typographic balance */
    display: inline-block !important;
}

/* --- PREMIUM SIDE-OVERLAY MOBILE ENGINE FOR PNEUPRO SLIDER --- */
@media (max-width: 768px) {
    .pneupro-promo-section-wrapper {
        padding: 40px 0;
    }

    .section-header-slider h2 {
        font-size: 26px;
    }

    /* Reset container boundaries to let arrows sit cleanly on the outer edges */
    .pneupro-slider-outer-container {
        padding: 0 !important;
        position: relative !important;
    }

    /* Sideline padding keeps cards from hard-clipping against the phone screen edges */
    .pneupro-products-slider {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 10px !important;
    }

    .pneupro-slide-card {
        flex: 0 0 255px;
        padding: 20px 15px;
    }

    /* --- ELEGANT FLOATING SIDE ARROWS --- */
    .pneupro-arrow {
        display: flex !important;          /* Bring arrows back */
        position: absolute !important;
        top: 42% !important;               /* Centers them perfectly over the tire image zone */
        transform: translateY(-50%) !important;
        width: 38px !important;            /* High-precision compact mobile tap target */
        height: 38px !important;
        background: rgba(255, 255, 255, 0.96) !important; /* Sharp, semi-opaque white glass */
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
        z-index: 100 !important;           /* Forces arrows to float over moving elements */
        border-radius: 50% !important;
    }

    /* Pin arrows inside the screen margin gutters */
    .arrow-left {
        left: 6px !important;
        right: auto !important;
    }

    .arrow-right {
        right: 6px !important;
        left: auto !important;
    }

    /* Direct touch feedback matching PneuPro Blue */
    .pneupro-arrow:active {
        background: #2B70FF !important;
        color: #FFFFFF !important;
        border-color: #2B70FF !important;
    }
}

/* Demander un Devis Button Styling */
.custom-quote-wrapper {
    margin: 20px 0;
}

.button-demander-devis {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background-color: #1a56db !important; /* Adjust color to match your brand */
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(26, 86, 219, 0.2);
    transition: all 0.25s ease-in-out !important;
}

.button-demander-devis:hover {
    background-color: #1e429f !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(26, 86, 219, 0.3);
}
/* Container Centering */
.custom-quote-wrapper {
    margin: 22px 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Jazzed-Up Stadium Pill Button */
.button-demander-devis {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 28px !important;
    background-color: #2563eb !important; /* Vibrant primary blue matching your theme */
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 50px !important; /* Full pill shape matching 'AJOUTER AU PANIER' */
    border: none !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}

/* Icon Styling & Micro-interaction */
.button-demander-devis svg {
    transition: transform 0.3s ease;
}

/* Hover & Active States */
.button-demander-devis:hover {
    background-color: #1d4ed8 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.35);
    color: #ffffff !important;
}

.button-demander-devis:hover svg {
    transform: scale(1.1);
}

.button-demander-devis:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}


/* Global override for all ins tags */
ins {
    text-decoration: none !important;
}


/* Gray out ONLY the Rupture de stock button */
.button.pneupro-btn-disabled {
    background-color: #94A3B8 !important;
    border-color: #94A3B8 !important;
    color: #FFFFFF !important;
    opacity: 0.7;
    cursor: not-allowed !important;
    pointer-events: none; /* Disables click action */
    box-shadow: none !important;
    transform: none !important;
}