/* ==========================================================================
   DR SPORT — HERO SECTION ATHLETIC DARK UI (EXACT SCREENSHOT MATCH)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Montserrat:ital,wght@0,700;0,800;0,900;1,900&family=Barlow+Condensed:wght@700;800;900&display=swap');

:root {
    --brand-blue: #2b6aff;
    --brand-red: #e51a24;
    --brand-dark: #060a14;

    --orange: #D90429;
    --orange-dark: #A8001F;
    --orange-hover: #B80322;
    --orange-soft: #FFF1F3;
}

/* 1. Main Hero Container — Full Width, Zero Gaps */
.rcg-main-hero,
section.rcg-main-hero,
section:has(.hero-slider):not(:has(.hero-split)) {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
}

.rcg-main-hero .wrap,
.wrap:has(.hero-slider):not(:has(.hero-split)) {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.rcg-main-hero .hero-slider,
section:not(:has(.hero-split))>.wrap>.hero-slider {
    position: relative !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    height: clamp(500px, 58vh, 620px) !important;
    min-height: 500px !important;
    display: flex !important;
    align-items: center !important;
    background-color: var(--brand-dark) !important;
    box-shadow: none !important;
}

/* 2. Top Hero Slide Base */
.rcg-main-hero .hero-slide,
section:not(:has(.hero-split)) .hero-slide,
section:has(.hero-slider):not(:has(.hero-split)) .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    background-color: var(--brand-dark) !important;
    background-size: cover !important;
    background-position: right 12% center !important;
    background-repeat: no-repeat !important;
    height: 100% !important;
    width: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s !important;
}

.rcg-main-hero .hero-slide.on,
section:not(:has(.hero-split)) .hero-slide.on,
section:has(.hero-slider):not(:has(.hero-split)) .hero-slide.on {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
}

/* Deep athletic blue gradient overlay covering full background image + subdued top-left blue orb + bottom-right red glow */
.rcg-main-hero .hero-overlay,
section:not(:has(.hero-split)) .hero-overlay,
section:has(.hero-slider):not(:has(.hero-split)) .hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    background:
        /* Top-Left Ambient Blue Glow — Subdued Dark Blue */
        radial-gradient(circle at 10% 15%, rgba(30, 64, 175, 0.15) 0%, rgba(30, 64, 175, 0.05) 40%, transparent 68%),
        /* Bottom-Right Ambient Red Glow — Subdued Dark Red */
        radial-gradient(circle at 90% 85%, rgba(185, 28, 28, 0.13) 0%, rgba(185, 28, 28, 0.04) 40%, transparent 68%),
        /* Full background dark blue gradient covering the left side across the full image */
        linear-gradient(90deg,
            rgba(4, 7, 16, 0.98) 0%,
            rgba(5, 9, 22, 0.92) 36%,
            rgba(7, 14, 36, 0.65) 56%,
            rgba(8, 18, 42, 0.28) 75%,
            rgba(4, 7, 16, 0.04) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Top-Left Kyu-Blue Orb Blur — Softened & Darkened */
.rcg-main-hero .hero-overlay::before,
section:not(:has(.hero-split)) .hero-overlay::before,
section:has(.hero-slider):not(:has(.hero-split)) .hero-overlay::before {
    content: "" !important;
    position: absolute !important;
    top: -60px !important;
    left: -60px !important;
    width: 280px !important;
    height: 280px !important;
    border-radius: 50% !important;
    background: rgba(30, 64, 175, 0.18) !important;
    filter: blur(72px) !important;
    -webkit-filter: blur(72px) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Bottom-Right Aka-Red Orb Blur — Softened & Darkened */
.rcg-main-hero .hero-overlay::after,
section:not(:has(.hero-split)) .hero-overlay::after,
section:has(.hero-slider):not(:has(.hero-split)) .hero-overlay::after {
    content: "" !important;
    position: absolute !important;
    bottom: -60px !important;
    right: -60px !important;
    width: 280px !important;
    height: 280px !important;
    border-radius: 50% !important;
    background: rgba(185, 28, 28, 0.15) !important;
    filter: blur(72px) !important;
    -webkit-filter: blur(72px) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* 3. Hero Content Left-Aligned Layout */
.rcg-main-hero .hero-content,
section:not(:has(.hero-split)) .hero-content,
section:has(.hero-slider):not(:has(.hero-split)) .hero-content {
    position: relative !important;
    z-index: 5 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: clamp(560px, 52vw, 760px) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding: 60px 40px 90px clamp(40px, 8vw, 120px) !important;
    text-align: left !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

/* 4. Eyebrow: Frosted Pill Background, White Text, Red Dot at Start */
.rcg-main-hero .hero-content .eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 999px !important;
    padding: 5px 14px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
    color: #e2e8f0 !important;
    margin: 0 0 18px 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
    width: fit-content !important;
    line-height: 1.4 !important;
}

.rcg-main-hero .hero-content .eyebrow::before {
    content: "" !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background-color: #e51a24 !important;
    box-shadow: 0 0 8px #ff2a37, 0 0 2px #ffffff !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
}

/* 5. Title: Athletic Heavy Bold Typography (2nd word Blue, Last word Red) */
.rcg-main-hero .hero-content h1 {
    display: block !important;
    font-family: 'Montserrat', 'Barlow Condensed', sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(2.3rem, 4.6vw, 3.8rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.015em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.75)) !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
}

.rcg-main-hero .hero-content h1 .text-blue {
    color: #2b6aff !important;
    -webkit-text-fill-color: #2b6aff !important;
}

.rcg-main-hero .hero-content h1 .text-red {
    color: #e51a24 !important;
    -webkit-text-fill-color: #e51a24 !important;
}

/* Description paragraph */
.rcg-main-hero .hero-content p:not(.eyebrow) {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(0.88rem, 1.2vw, 1rem) !important;
    line-height: 1.6 !important;
    color: #cbd5e1 !important;
    margin: 0 0 24px 0 !important;
    max-width: 560px !important;
}

/* 6. Buttons: Red Athletic Action Button */
.rcg-main-hero .hero-content .btn,
.rcg-main-hero .hero-content .btn-primary {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #e51a24 0%, #b91c1c 100%) !important;
    padding: 13px 28px !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 24px rgba(229, 26, 36, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    margin: 0 !important;
}

.rcg-main-hero .hero-content .btn-primary:hover,
.rcg-main-hero .hero-content .btn:not(.dr-hero-btn-secondary):hover {
    background: linear-gradient(135deg, #f22933 0%, #cb1818 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(229, 26, 36, 0.7) !important;
}

/* Secondary Frosted Glass Action Button (Explore Collection) */
.dr-hero-btns {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-top: 4px !important;
}

.rcg-main-hero .hero-content .dr-hero-btn-secondary,
.dr-hero-btn-secondary {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 13px 26px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.rcg-main-hero .hero-content .dr-hero-btn-secondary:hover,
.dr-hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    color: #ffffff !important;
}

.rcg-main-hero .hero-content .dr-hero-btn-secondary:active,
.dr-hero-btn-secondary:active {
    transform: translateY(0) !important;
}

/* 7. Left/Right Changing Buttons & Indicators at Bottom-Left */
.rcg-main-hero .hero-slider::before {
    content: "‹";
    position: absolute;
    left: clamp(40px, 8vw, 120px);
    bottom: 30px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(10, 16, 28, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 28px;
    text-align: center;
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: all 0.2s ease;
}

.rcg-main-hero .hero-slider::after {
    content: "›";
    position: absolute;
    left: calc(clamp(40px, 8vw, 120px) + 38px);
    bottom: 30px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(10, 16, 28, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 28px;
    text-align: center;
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: all 0.2s ease;
}

.rcg-main-hero .hero-slider::before:hover,
.rcg-main-hero .hero-slider::after:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Dots positioned right next to the left/right changing buttons */
.rcg-main-hero .hero-dots {
    position: absolute !important;
    left: calc(clamp(40px, 8vw, 120px) + 84px) !important;
    bottom: 43px !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hero-dot,
.rcg-main-hero .hero-dot {
    width: 10px !important;
    height: 5px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.28) !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hero-dot.on,
.rcg-main-hero .hero-dot.on {
    width: 30px !important;
    height: 5px !important;
    border-radius: 4px !important;
    background: #e51a24 !important;
    box-shadow: 0 0 10px rgba(229, 26, 36, 0.65) !important;
}

/* 8. Mobile & Tablet Responsiveness */
@media (max-width: 991px) {

    .rcg-main-hero .wrap,
    .wrap:has(.hero-slider):not(:has(.hero-split)) {
        padding: 0 !important;
    }

    .rcg-main-hero .hero-slider {
        height: 480px !important;
        border-radius: 0 !important;
    }

    .rcg-main-hero .hero-content {
        max-width: 520px !important;
        padding: 40px 24px 75px 32px !important;
    }

    .rcg-main-hero .hero-slider::before {
        left: 32px !important;
    }

    .rcg-main-hero .hero-slider::after {
        left: 70px !important;
    }

    .rcg-main-hero .hero-dots {
        left: 116px !important;
    }
}

@media (max-width: 768px) {

    .wrap:has(.hero-slider):not(:has(.hero-split)),
    .rcg-main-hero .wrap,
    section.rcg-main-hero > .wrap,
    section.dr-main-hero-section > .wrap,
    section:has(.hero-slider):not(:has(.hero-split)) > .wrap {
        padding: 0 !important;
    }

    .hero-slider,
    .rcg-main-hero .hero-slider,
    section:not(:has(.hero-split)) > .wrap > .hero-slider {
        height: auto !important;
        min-height: 320px !important;
        max-height: 370px !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    .hero-slide,
    .rcg-main-hero .hero-slide,
    section:not(:has(.hero-split)) .hero-slide {
        background-size: cover !important;
        background-position: right 15% center !important;
        background-repeat: no-repeat !important;
        height: 100% !important;
    }

    .hero-overlay,
    .rcg-main-hero .hero-overlay,
    section:not(:has(.hero-split)) .hero-overlay {
        background: linear-gradient(90deg,
            rgba(4, 7, 16, 0.92) 0%,
            rgba(5, 10, 22, 0.72) 48%,
            rgba(5, 10, 22, 0.25) 80%,
            rgba(4, 7, 16, 0.1) 100%) !important;
    }

    .rcg-main-hero .hero-overlay::before,
    section:not(:has(.hero-split)) .hero-overlay::before,
    .rcg-main-hero .hero-overlay::after,
    section:not(:has(.hero-split)) .hero-overlay::after {
        display: none !important;
    }

    .hero-content,
    .rcg-main-hero .hero-content,
    section:not(:has(.hero-split)) .hero-content {
        max-width: 82% !important;
        padding: 20px 16px 42px 16px !important;
        align-items: flex-start !important;
        text-align: left !important;
        justify-content: center !important;
    }

    .hero-content .eyebrow,
    .rcg-main-hero .hero-content .eyebrow {
        font-size: 8.5px !important;
        padding: 3px 8px !important;
        margin: 0 0 8px 0 !important;
        letter-spacing: 0.08em !important;
        gap: 5px !important;
    }

    .hero-content .eyebrow::before,
    .rcg-main-hero .hero-content .eyebrow::before {
        width: 5px !important;
        height: 5px !important;
        margin-right: 4px !important;
    }

    .hero-content h1,
    .rcg-main-hero .hero-content h1,
    section:not(:has(.hero-split)) .hero-content h1 {
        font-size: clamp(1.2rem, 5.2vw, 1.55rem) !important;
        line-height: 1.15 !important;
        margin: 0 0 10px 0 !important;
        letter-spacing: -0.01em !important;
    }

    .hero-content p:not(.eyebrow),
    .rcg-main-hero .hero-content p:not(.eyebrow) {
        font-size: 11px !important;
        line-height: 1.35 !important;
        margin: 0 0 10px 0 !important;
    }

    .dr-hero-btns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: auto !important;
        margin-top: 2px !important;
    }

    .dr-hero-btns .btn,
    .dr-hero-btns .btn-primary,
    .dr-hero-btns .dr-hero-btn-secondary {
        padding: 7px 13px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        width: auto !important;
        min-height: unset !important;
        white-space: nowrap !important;
        letter-spacing: 0.03em !important;
        margin: 0 !important;
    }

    .rcg-main-hero .hero-slider::before,
    .rcg-main-hero .hero-slider::after {
        width: 28px !important;
        height: 28px !important;
        bottom: 12px !important;
    }

    .rcg-main-hero .hero-slider::before {
        left: 16px !important;
    }

    .rcg-main-hero .hero-slider::after {
        left: 50px !important;
    }

    .hero-dots,
    .rcg-main-hero .hero-dots {
        left: 90px !important;
        bottom: 22px !important;
        gap: 6px !important;
    }

    .hero-dot {
        width: 18px !important;
        height: 3px !important;
    }
}

/* ==========================================================================
   HERO SPLIT — DISCIPLINES & MASTER RANKS (4 MARTIAL ARTS CARDS)
   ========================================================================== */

/* 1. Section & Wrapper */
.hero-split-section,
section:has(.hero-split) {
    padding: 36px 0 56px 0 !important;
    background: #ffffff !important;
}

.hero-split-section .wrap,
.wrap:has(.hero-split) {
    max-width: 1400px !important;
    padding: 0 24px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* 2. Header: Eyebrow, Title, Red Line, Description */
.hero-split-header {
    text-align: center !important;
    margin: 0 auto 36px auto !important;
    max-width: 760px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.hero-split-eyebrow {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #2b6aff !important;
    margin: 0 0 10px 0 !important;
    display: block !important;
    line-height: 1.3 !important;
}

.hero-split-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(26px, 3.2vw, 34px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
    color: #0b0f19 !important;
    margin: 0 0 14px 0 !important;
    line-height: 1.15 !important;
    text-align: center !important;
}

.hero-split-line {
    width: 36px !important;
    height: 3.5px !important;
    background-color: #e51a24 !important;
    border-radius: 2px !important;
    margin: 0 auto 16px auto !important;
}

.hero-split-desc {
    color: rgb(107 114 128) !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* 3. 4-Card Grid Container */
.hero-split {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
}

.hero-split-left,
.hero-split-left .hero-slider,
.hero-split-right {
    display: contents !important;
}

/* Hide hero slider arrows, dots, and extra items beyond 4 */
.hero-split .hero-slider::before,
.hero-split .hero-slider::after,
.hero-split .hero-dots,
.hero-split-left .hero-slide:nth-of-type(n+3),
.hero-split-right .side-banner:nth-of-type(n+3) {
    display: none !important;
}

/* 4. Card Item Base */
.hero-split .hero-slide,
.hero-split .side-banner {
    position: relative !important;
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.35) !important;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.hero-split .hero-slide:hover,
.hero-split .side-banner:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 18px 36px -10px rgba(0, 0, 0, 0.55) !important;
}


/* 5. Dark Bottom Gradient Overlay */
.hero-split .hero-overlay,
.hero-split .side-banner-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 32%,
            rgba(0, 0, 0, 0.42) 62%,
            rgba(0, 0, 0, 0.90) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* 6. Card Content Container */
.hero-split .hero-content,
.hero-split .side-banner-content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 22px !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* 7. Circular Badge / Icon */
.hero-split .hero-content::before,
.hero-split .side-banner-content::before {
    content: "" !important;
    display: inline-flex !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    margin-bottom: 10px !important;
    background-size: 15px 15px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45) !important;
    flex-shrink: 0 !important;
}

/* Card 1 Badge: Blue - Martial Arts Fist (Karate) */
.hero-split-left .hero-slide:nth-of-type(1) .hero-content::before {
    background-color: #1e56d0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19.5 7.05h-2V5.5A2.5 2.5 0 0 0 15 3H9A2.5 2.5 0 0 0 6.5 5.5v2.05H5A2.5 2.5 0 0 0 2.5 10.1v3.4C2.5 17.09 5.41 20 9 20h6c3.59 0 6.5-2.91 6.5-6.5v-3.9a2.5 2.5 0 0 0-2-2.55zM8 5.5c0-.55.45-1 1-1h1.5v3H8V5.5zm4 0c0-.55.45-1 1-1H14c.55 0 1 .45 1 1v2h-3v-2z'/%3E%3C/svg%3E") !important;
}

/* Card 2 Badge: Red - Judo Symbol */
.hero-split-left .hero-slide:nth-of-type(2) .hero-content::before {
    background-color: #e51a24 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14.5v-5H8.5V10h5v1.5H12v5h-1zm3.5-3.5h1.5v3.5H14.5V13zM12 4.5c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z'/%3E%3C/svg%3E") !important;
}

/* Card 3 Badge: Blue - Taekwondo Kick Figure */
.hero-split-right .side-banner:nth-of-type(1) .side-banner-content::before {
    background-color: #1e56d0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M14.5 2.5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM7.2 9.8l3.2-1.6 2.4 2.8 5.7-4.2 1.2 1.6-6.8 5-1.9-2.2-2.2 6.8H6.5l2-6.5-3-1.5 1.7-2.2z'/%3E%3C/svg%3E") !important;
}

/* Card 4 Badge: Red - Jiu-Jitsu Shield */
.hero-split-right .side-banner:nth-of-type(2) .side-banner-content::before {
    background-color: #e51a24 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm0 2.18l6 2.25v4.66c0 4.14-2.73 8.01-6 9.08-3.27-1.07-6-4.94-6-9.08V6.43l6-2.25z'/%3E%3C/svg%3E") !important;
}

/* Optional Eyebrow text above title */
.hero-split .eyebrow {
    display: inline-block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    margin: 0 0 4px 0 !important;
}

/* 8. Card Titles from Admin Panel */
.hero-split .hero-content h1,
.hero-split .side-banner-content h3 {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.28rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    line-height: 1.15 !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}

/* 9. Card Subtitles from Admin Panel */
.hero-split .hero-content p:not(.eyebrow),
.hero-split .side-banner-content p:not(.eyebrow) {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    line-height: 1.35 !important;
    margin: 0 0 12px 0 !important;
}

/* 10. Card Buttons from Admin Panel */
.hero-split .hero-content .btn,
.hero-split .side-banner-content .btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

/* Arrow indicator after button */
.hero-split .hero-content .btn:not(:has(i))::after,
.hero-split .side-banner-content .btn:not(:has(i))::after {
    content: "\2192" !important;
    display: inline-block !important;
    margin-left: 4px !important;
    transition: transform 0.2s ease !important;
}

.hero-split .hero-slide:hover .btn,
.hero-split .side-banner:hover .btn {
    color: #ffffff !important;
    transform: translateX(4px) !important;
}

/* 10. Responsive Breakpoints */
@media (max-width: 1024px) {
    .hero-split {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    .hero-split .hero-slide,
    .hero-split .side-banner {
        height: 380px !important;
        min-height: 380px !important;
        max-height: 380px !important;
    }
}

@media (max-width: 768px) {
    .hero-split-section,
    section:has(.hero-split) {
        padding: 24px 0 32px 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .hero-split-section .wrap,
    .wrap:has(.hero-split) {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .hero-split-header {
        margin-bottom: 16px !important;
        text-align: center !important;
        padding: 0 8px !important;
    }

    .hero-split-title {
        font-size: 20px !important;
    }

    .hero-split-desc {
        font-size: 12.5px !important;
    }

    .hero-split {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 12px !important;
        padding: 6px 0 16px 0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .hero-split::-webkit-scrollbar {
        display: none !important;
    }

    .hero-split .hero-slide,
    .hero-split .side-banner {
        flex: 0 0 220px !important;
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
        border-radius: 14px !important;
        scroll-snap-align: start !important;
    }

    .hero-split .hero-content,
    .hero-split .side-banner-content {
        padding: 16px 14px !important;
    }

    .hero-split .hero-content h1,
    .hero-split .side-banner-content h3 {
        font-size: 17px !important;
        margin-bottom: 4px !important;
    }

    .hero-split .hero-content p:not(.eyebrow),
    .hero-split .side-banner-content p:not(.eyebrow) {
        font-size: 11px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .hero-split .hero-content .btn,
    .hero-split .side-banner-content .btn {
        font-size: 10.5px !important;
        padding: 6px 12px !important;
    }
}

/* ==========================================================================
   DR SPORT — ATHLETIC HEADER & TOPBAR (EXACT SCREENSHOT MATCH)
   ========================================================================== */

/* Hide default storefront announce bar */
#announce,
.announce {
    display: none !important;
}

/* Header container */
header.dr-header,
header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #edf2f7 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 1. Top Announcement Bar */
.dr-topbar {
    background: #060b13 !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
}

.dr-topbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1380px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

.dr-topbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.dr-topbar-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #e51a24 !important;
    box-shadow: 0 0 6px rgba(229, 26, 36, 0.8) !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.dr-topbar-truck {
    display: inline-flex !important;
    align-items: center !important;
    color: #2b6aff !important;
    flex-shrink: 0 !important;
}

.dr-topbar-truck svg {
    display: block !important;
    stroke: #2b6aff !important;
}

.dr-topbar-text {
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.dr-topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.dr-topbar-link {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color 0.2s ease !important;
}

.dr-topbar-link:hover {
    color: #2b6aff !important;
}

.dr-topbar-phone-icon {
    color: #2b6aff !important;
    display: inline-flex !important;
    align-items: center !important;
}

.dr-topbar-phone-icon svg {
    fill: #2b6aff !important;
}

.dr-topbar-sep {
    color: #334155 !important;
    font-weight: 300 !important;
    user-select: none !important;
}

/* 2. Main Navigation Bar */
nav.dr-nav,
header nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 72px !important;
    max-width: 1380px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    gap: 20px !important;
    background: transparent !important;
}

/* Logo */
.dr-logo,
.logo {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

.dr-logo img,
.site-logo-img {
    max-height: 48px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Nav Links Centered */
.dr-nav-links,
.nav-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(14px, 2vw, 28px) !important;
    flex: 1 !important;
    margin: 0 16px !important;
}

.dr-nav-item,
.nav-links a {
    position: relative !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #1e293b !important;
    text-decoration: none !important;
    padding: 10px 0 !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    transition: color 0.2s ease !important;
    border-bottom: none !important;
}

.dr-nav-item:hover,
.nav-links a:hover {
    color: #2b6aff !important;
}

/* Active Nav Item — Blue Text & Blue Underline */
.dr-nav-item.active,
.nav-links a.active {
    color: #2b6aff !important;
}

.dr-nav-item.active::after,
.nav-links a.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 2.5px !important;
    background: #2b6aff !important;
    border-radius: 2px !important;
}

/* SALE Link in Red */
.dr-nav-sale,
.nav-links a.dr-nav-sale {
    color: #e51a24 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.dr-nav-sale .dr-sale-dot {
    color: #e51a24 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

.dr-nav-sale:hover {
    color: #b91c1c !important;
}

/* Right Nav Icons */
.dr-nav-icons,
.nav-icons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.dr-nav-icons .iconbtn,
.nav-icons .iconbtn {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    color: #0f172a !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    text-decoration: none !important;
}

.dr-nav-icons .iconbtn:hover,
.nav-icons .iconbtn:hover {
    background: #f1f5f9 !important;
    color: #2b6aff !important;
}

.dr-nav-icons .iconbtn .ic,
.nav-icons .iconbtn .ic {
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dr-nav-icons .iconbtn .ic svg,
.nav-icons .iconbtn .ic svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
}

/* Wishlist Badge — Blue Circle with White Number */
.dr-nav-icons .iconbtn #wishCount,
.iconbtn #wishCount,
.dr-iconbtn-wish .count,
.count-wish {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    background: #2b6aff !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    line-height: 1 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(43, 106, 255, 0.45) !important;
}

/* Cart Badge — Red Circle with White Number */
.dr-nav-icons .iconbtn #cartCount,
.iconbtn #cartCount,
.dr-iconbtn-cart .count,
.count-cart {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    background: #e51a24 !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    line-height: 1 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(229, 26, 36, 0.45) !important;
}

/* Responsive adjustments */
@media (max-width: 1080px) {
    .dr-topbar-inner {
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center !important;
        padding: 6px 16px !important;
    }

    .dr-topbar-right {
        gap: 12px !important;
        justify-content: center !important;
    }

    .dr-nav-links,
    .nav-links {
        display: none !important;
    }

    .nav-toggle {
        display: flex !important;
    }
}

/* Mobile view navbar adjustments: compact logo & icons so cart icon is never hidden */
@media (max-width: 768px) {
    .dr-topbar {
        display: none !important;
    }

    nav.dr-nav,
    header nav {
        height: 60px !important;
        padding: 0 12px !important;
        gap: 10px !important;
    }

    .dr-logo,
    .logo {
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    .dr-logo img,
    .dr-logo .site-logo-img,
    header .site-logo-img {
        max-height: 28px !important;
        max-width: 130px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .dr-nav-icons,
    .nav-icons {
        gap: 4px !important;
        flex-shrink: 0 !important;
    }

    .dr-nav-icons .iconbtn,
    .nav-icons .iconbtn,
    .nav-toggle {
        width: 36px !important;
        height: 36px !important;
    }

    .dr-nav-icons .iconbtn .ic,
    .nav-icons .iconbtn .ic,
    .nav-toggle .ic {
        width: 18px !important;
        height: 18px !important;
    }

    .dr-nav-icons .iconbtn .ic svg,
    .nav-icons .iconbtn .ic svg,
    .nav-toggle .ic svg {
        width: 18px !important;
        height: 18px !important;
    }
}

@media (max-width: 420px) {
    nav.dr-nav,
    header nav {
        padding: 0 8px !important;
        gap: 6px !important;
    }

    .dr-logo img,
    .dr-logo .site-logo-img,
    header .site-logo-img {
        max-height: 25px !important;
        max-width: 110px !important;
    }

    .dr-nav-icons,
    .nav-icons {
        gap: 2px !important;
    }

    .dr-nav-icons .iconbtn,
    .nav-icons .iconbtn,
    .nav-toggle {
        width: 34px !important;
        height: 34px !important;
    }
}


/* ==========================================================================
   DR SPORT — CHOOSE YOUR DISCIPLINE CATEGORY GRID (EXACT SCREENSHOT MATCH)
   ========================================================================== */

.dr-disciplines-section {
    padding: 64px 0 84px 0 !important;
    background: rgb(248 249 250) !important;
    width: 100% !important;
}

.dr-disciplines-section .wrap {
    max-width: 1380px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

.dr-disciplines-header {
    text-align: center !important;
    margin-bottom: 38px !important;
}

.dr-disciplines-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.8rem, 2.5vw, 2.3rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.015em !important;
    text-transform: uppercase !important;
    color: #0a0e1a !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.2 !important;
}

.dr-disciplines-sub {
    color: rgb(107 114 128) !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.dr-disciplines-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 22px !important;
    width: 100% !important;
}

.dr-discipline-card {
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    height: clamp(160px, 14.5vw, 215px) !important;
    min-height: 135px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    background-color: #0b1120 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.4s ease !important;
}

@supports (aspect-ratio: 1.4 / 1) {
    .dr-discipline-card {
        height: auto !important;
        aspect-ratio: 1.4 / 1 !important;
        max-height: 220px !important;
        min-height: 135px !important;
    }
}

.dr-discipline-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

.dr-discipline-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.6s cubic-bezier(0.2, 0, 0.2, 1) !important;
}

.dr-discipline-card:hover .dr-discipline-bg {
    transform: scale(1.08) !important;
}

.dr-discipline-bg-placeholder {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, #0b1120 0%, #1e293b 100%) !important;
}

.dr-discipline-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(8, 12, 22, 0.38) 0%, rgba(8, 12, 22, 0.68) 100%) !important;
    transition: background 0.4s ease !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.dr-discipline-card:hover .dr-discipline-overlay {
    background: linear-gradient(180deg, rgba(8, 12, 22, 0.28) 0%, rgba(8, 12, 22, 0.55) 100%) !important;
}

.dr-discipline-content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 16px 12px !important;
    pointer-events: none !important;
}

.dr-discipline-name {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.1rem, 1.35vw, 1.45rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8) !important;
    transition: transform 0.35s ease !important;
}

.dr-discipline-card:hover .dr-discipline-name {
    transform: translateY(-2px) !important;
}

.dr-discipline-tag {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-top: 6px !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7) !important;
}

@media (max-width: 1080px) {
    .dr-disciplines-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    .dr-discipline-card {
        height: clamp(160px, 22vw, 190px) !important;
        max-height: none !important;
        aspect-ratio: auto !important;
    }
}

@media (max-width: 768px) {
    .dr-disciplines-section,
    section:has(.dr-disciplines-grid) {
        padding: 28px 0 36px 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .dr-disciplines-section .wrap,
    .wrap:has(.dr-disciplines-grid) {
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .dr-disciplines-header {
        margin-bottom: 18px !important;
        text-align: center !important;
        padding: 0 8px !important;
    }

    .dr-disciplines-title {
        font-size: 20px !important;
    }

    .dr-disciplines-sub {
        font-size: 12.5px !important;
    }

    .dr-disciplines-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 12px !important;
        padding: 6px 0 16px 0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dr-disciplines-grid::-webkit-scrollbar {
        display: none !important;
    }

    .dr-discipline-card {
        flex: 0 0 150px !important;
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        height: 105px !important;
        min-height: 105px !important;
        max-height: 105px !important;
        border-radius: 12px !important;
        scroll-snap-align: start !important;
    }

    .dr-discipline-content {
        padding: 12px 10px !important;
    }

    .dr-discipline-name {
        font-size: 13.5px !important;
        letter-spacing: 0.04em !important;
    }

    .dr-discipline-tag {
        font-size: 8.5px !important;
        letter-spacing: 0.16em !important;
        margin-top: 3px !important;
    }
}

/* ==========================================================================
   DR SPORT — PRODUCT CARD & PRODUCT SECTIONS (EXACT SCREENSHOT MATCH)
   ========================================================================== */

/* 1. Global Product Card Styling */
.prod.dr-prod-card,
.dr-prod-card {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.prod.dr-prod-card:hover,
.dr-prod-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
}

.prod.dr-prod-card.dr-card-hidden,
.dr-prod-card.dr-card-hidden {
    display: none !important;
}

/* Card Photo Area */
.dr-prod-ph,
.dr-prod-card .ph {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: #f8fafc !important;
    overflow: hidden !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.dr-prod-img,
.dr-prod-card .ph img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.45s ease !important;
    display: block !important;
}

.dr-prod-card:hover .dr-prod-img,
.dr-prod-card:hover .ph img {
    transform: scale(1.05) !important;
}

.dr-prod-img-placeholder {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
}

/* Badges on Top-Left */
.dr-prod-badges,
.dr-prod-card .badges {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    pointer-events: none !important;
}

.dr-badge-sale,
.dr-prod-card .badges .badge.sale,
.dr-prod-card .badges .badge.deal {
    background: #e51a24 !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 3.5px 7px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    box-shadow: 0 2px 6px rgba(229, 26, 36, 0.35) !important;
    line-height: 1.2 !important;
}

.dr-badge-new,
.dr-prod-card .badges .badge.new {
    background: #0f172a !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 3.5px 7px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25) !important;
    line-height: 1.2 !important;
}

.dr-badge-oos,
.dr-prod-card .badges .badge.oos {
    background: #475569 !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 3.5px 7px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    box-shadow: 0 2px 6px rgba(71, 85, 105, 0.25) !important;
    line-height: 1.2 !important;
}

.dr-badge-ws,
.dr-prod-card .badges .badge.ws {
    background: #2b6aff !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 3.5px 7px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    box-shadow: 0 2px 6px rgba(43, 106, 255, 0.35) !important;
    line-height: 1.2 !important;
}

/* Wishlist Button on Top-Right */
.dr-wish-btn,
.dr-prod-card .wish-btn {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 3 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #64748b !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.dr-wish-btn:hover,
.dr-prod-card .wish-btn:hover {
    background: #f8fafc !important;
    color: #e51a24 !important;
    transform: scale(1.08) !important;
}

.dr-wish-btn.active,
.dr-prod-card .wish-btn.active {
    background: #ffffff !important;
    color: #e51a24 !important;
}

.dr-wish-btn .ic,
.dr-prod-card .wish-btn .ic {
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dr-wish-btn.active .ic svg,
.dr-prod-card .wish-btn.active .ic svg {
    fill: #e51a24 !important;
    stroke: #e51a24 !important;
}

/* Card Info Area */
.dr-prod-info,
.dr-prod-card .info {
    padding: 14px 14px 16px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

/* Brand / Category (Blue text) */
.dr-prod-brand {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 200 !important;
    text-transform: uppercase !important;
    color: #2b6aff !important;
    margin-bottom: 5px !important;
    line-height: 1.2 !important;
}

/* Product Title */
.dr-prod-title,
.dr-prod-card .info h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Rating Row */
.dr-rate-row,
.dr-prod-card .rate-row {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    margin-bottom: 8px !important;
}

.dr-stars-group,
.dr-prod-card .stars-group {
    display: flex !important;
    align-items: center !important;
    gap: 1.5px !important;
}

.dr-stars-group .ic svg,
.dr-prod-card .stars-group .ic svg {
    fill: #f59e0b !important;
    stroke: #f59e0b !important;
    width: 12.5px !important;
    height: 12.5px !important;
}

.dr-rate-count {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    margin-left: 4px !important;
}

/* Price Row */
.dr-prod-prc,
.dr-prod-card .prc {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin-top: auto !important;
}

.dr-price-now,
.dr-prod-card .prc .now {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.dr-price-was,
.dr-prod-card .prc .was {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
}

/* ==========================================================================
   2. FEATURED SECTION (Centered Title, Red Accent, Filter Pills, 5 Columns)
   ========================================================================== */

.dr-featured-section {
    padding: 60px 0 75px 0 !important;
    background: #ffffff !important;
    width: 100% !important;
}

.dr-featured-section .wrap {
    max-width: 1380px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

.dr-featured-header {
    text-align: center !important;
    margin-bottom: 26px !important;
}

.dr-featured-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.8rem, 2.5vw, 2.25rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #0a0e1a !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Title Accents */
.dr-title-accent {
    width: 38px !important;
    height: 3.5px !important;
    border-radius: 2px !important;
}

.dr-accent-red {
    background: #e51a24 !important;
    margin: 10px auto 14px auto !important;
}

.dr-accent-blue {
    background: #2b6aff !important;
    margin-top: 8px !important;
}

.dr-featured-sub {
    color: rgb(107 114 128) !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Filter Bar */
.dr-filter-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 30px !important;
    flex-wrap: wrap !important;
}

.dr-filter-pills {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.dr-filter-pill {
    border: none !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 7px 16px !important;
    border-radius: 15% !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

.dr-filter-pill:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.dr-filter-pill.active {
    background: #0f172a !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25) !important;
}

.dr-filter-pill.dr-pill-sale {
    color: #e51a24 !important;
    background: #fef2f2 !important;
}

.dr-filter-pill.dr-pill-sale:hover {
    background: #fee2e2 !important;
}

.dr-filter-pill.dr-pill-sale.active {
    background: #e51a24 !important;
    color: #ffffff !important;
}

/* Sort Select */
.dr-filter-sort {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #64748b !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    font-family: 'Montserrat', sans-serif !important;
}

.dr-sort-select {
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    background: #ffffff !important;
    cursor: pointer !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
}

.dr-sort-select:focus {
    border-color: #2b6aff !important;
}

/* 5 Columns Grid */
.dr-product-grid-5 {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
}

@media (max-width: 1240px) {
    .dr-product-grid-5 {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .dr-product-grid-5 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 680px) {
    .dr-product-grid-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
}

/* ==========================================================================
   3. NEW ARRIVALS SECTION (Left Title, Blue Accent, Arrows, 5-Card Slider Rail)
   ========================================================================== */

.dr-rail-section,
.dr-new-arrivals-section,
.dr-top-selling-section {
    padding: 50px 0 65px 0 !important;
    background: #ffffff !important;
    width: 100% !important;
}

.dr-rail-section .wrap,
.dr-new-arrivals-section .wrap,
.dr-top-selling-section .wrap {
    max-width: 1380px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

.dr-rail-title-wrap .dr-title-accent {
    margin: 8px 0 0 0 !important;
}

.dr-rail-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    margin-bottom: 26px !important;
}

/* Centered Rail Header (TOP SELLERS) */
.dr-rail-head.dr-rail-head-center,
.dr-top-selling-section .dr-rail-head {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-bottom: 28px !important;
}

.dr-rail-head.dr-rail-head-center .dr-rail-title-wrap,
.dr-top-selling-section .dr-rail-title-wrap {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
}

.dr-rail-head.dr-rail-head-center .dr-rail-title-wrap .dr-title-accent,
.dr-top-selling-section .dr-rail-title-wrap .dr-title-accent {
    margin: 10px auto 14px auto !important;
}

.dr-rail-sub {
    color: rgb(107 114 128) !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.dr-rail-head.dr-rail-head-center .dr-rail-arrows,
.dr-top-selling-section .dr-rail-arrows {
    position: absolute !important;
    right: 0 !important;
    bottom: 2px !important;
}

@media (max-width: 768px) {

    .dr-rail-head.dr-rail-head-center .dr-rail-arrows,
    .dr-top-selling-section .dr-rail-arrows {
        position: static !important;
        margin-top: 14px !important;
        justify-content: center !important;
    }
}

.dr-rail-title-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.dr-rail-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.8rem, 2.5vw, 2.25rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #0a0e1a !important;
    margin: 0 !important;
    line-height: 1.15 !important;
}

.dr-rail-arrows {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.dr-rail-nav-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #0f172a !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    padding: 0 !important;
}

.dr-rail-nav-btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #2b6aff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    transform: scale(1.05) !important;
}

.dr-rail-nav-btn:active {
    transform: scale(0.96) !important;
}

/* Horizontal Track */
.dr-rail-track-wrap {
    width: 100% !important;
    overflow: hidden !important;
}

.dr-rail-track {
    display: flex !important;
    gap: 20px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 6px 2px 16px 2px !important;
}

.dr-rail-track::-webkit-scrollbar {
    display: none !important;
}

/* Exactly 5 items in view on desktop */
.dr-rail-item {
    flex: 0 0 calc((100% - (4 * 20px)) / 5) !important;
    scroll-snap-align: start !important;
    min-width: 210px !important;
    box-sizing: border-box !important;
}

@media (max-width: 1240px) {
    .dr-rail-item {
        flex: 0 0 calc((100% - (3 * 18px)) / 4) !important;
    }
}

@media (max-width: 992px) {
    .dr-rail-item {
        flex: 0 0 calc((100% - (2 * 16px)) / 3) !important;
    }
}

@media (max-width: 680px) {
    .dr-rail-item {
        flex: 0 0 calc((100% - 14px) / 2) !important;
    }
}

@media (max-width: 480px) {
    .dr-rail-item {
        flex: 0 0 80% !important;
    }
}

/* ==========================================================================
   DR SPORT — ATHLETIC FOOTER (EXACT SCREENSHOT MATCH)
   ========================================================================== */

footer.dr-footer,
footer {
    background: #060b13 !important;
    color: #94a3b8 !important;
    padding: 72px 0 28px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    font-family: 'Montserrat', sans-serif !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

footer .wrap {
    max-width: 1380px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

.dr-foot-grid {
    display: grid !important;
    grid-template-columns: 1.35fr 0.95fr 1.05fr 1.25fr !important;
    gap: 40px !important;
    margin-bottom: 48px !important;
}

/* Column 1: Brand & Social */
.dr-foot-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.dr-foot-logo {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    margin-bottom: 16px !important;
}

.dr-foot-logo img,
.dr-foot-logo .site-logo-img,
footer.dr-footer .site-logo-img {
    max-height: 44px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    filter: brightness(0) invert(1) !important;
    transition: opacity 0.25s ease !important;
}

.dr-foot-logo:hover img,
.dr-foot-logo:hover .site-logo-img {
    opacity: 0.85 !important;
}

.dr-foot-tagline {
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: #94a3b8 !important;
    margin: 0 0 24px 0 !important;
    max-width: 320px !important;
}

.dr-foot-social {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.dr-social-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #cbd5e1 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.dr-social-btn:hover {
    background: #2b6aff !important;
    border-color: #2b6aff !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(43, 106, 255, 0.35) !important;
}

.dr-social-btn svg {
    display: block !important;
}

/* Headings */
.dr-foot-heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    margin: 0 0 18px 0 !important;
    line-height: 1.2 !important;
}

/* Links */
.dr-foot-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
}

.dr-foot-links li {
    margin: 0 !important;
    padding: 0 !important;
}

.dr-foot-links li a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    display: inline-block !important;
}

.dr-foot-links li a:hover {
    color: #2b6aff !important;
    transform: translateX(2px) !important;
}

.dr-foot-link-sale {
    color: #e51a24 !important;
    font-weight: 700 !important;
}

.dr-foot-link-sale:hover {
    color: #ff3b46 !important;
}

/* Column 4: About & Contact */
.dr-foot-about-contact {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
}

.dr-foot-contact-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

.dr-foot-contact-list p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    color: #94a3b8 !important;
    margin: 0 !important;
    line-height: 1.55 !important;
}

.dr-foot-contact-list p span {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
    margin-right: 4px !important;
}

.dr-foot-contact-list p a {
    color: #94a3b8 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.dr-foot-contact-list p a:hover {
    color: #2b6aff !important;
}

/* Address line: formatted into 2 clean, balanced lines without dangling orphan words */
.dr-foot-contact-list p:last-child {
    max-width: 270px !important;
    line-height: 1.55 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Bottom Bar */
.dr-foot-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 26px !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.dr-foot-copy {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

.dr-foot-sig {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.dr-foot-dot {
    width: 6.5px !important;
    height: 6.5px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.dr-dot-blue {
    background-color: #2b6aff !important;
    box-shadow: 0 0 5px rgba(43, 106, 255, 0.8) !important;
}

.dr-dot-red {
    background-color: #e51a24 !important;
    box-shadow: 0 0 5px rgba(229, 26, 36, 0.8) !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .dr-foot-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 36px !important;
    }
}

@media (max-width: 640px) {
    .dr-foot-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .dr-foot-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
}

/* ==========================================================================
   DR SPORT — NEWSLETTER / STAY IN THE FIGHT (EXACT SCREENSHOT MATCH)
   ========================================================================== */

/* 1. Section Wrapper — White Background, Generous Padding */
section.band,
section:has(.newsletter-form) {
    padding: 0 !important;
    margin: 56px 0 0 0 !important;
    background: #ffffff !important;
    width: 100% !important;
}

section.band>.wrap,
section:has(.newsletter-form)>.wrap {
    max-width: 1380px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

/* 2. Dark Navy Rounded Card Container with Subdued Top-Left Blue and Bottom-Right Red Orbs */
section.band .promo,
.promo:has(.newsletter-form),
.promo:has(.foot-news) {
    background:
        radial-gradient(circle at 10% 15%, rgba(30, 64, 175, 0.12) 0%, rgba(30, 64, 175, 0.03) 40%, transparent 65%),
        radial-gradient(circle at 90% 85%, rgba(185, 28, 28, 0.11) 0%, rgba(185, 28, 28, 0.03) 40%, transparent 65%),
        #060a14 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 68px 40px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
}

/* Top-Left Kyu-Blue Orb Blur — Softened & Darkened */
section.band .promo::before,
.promo:has(.newsletter-form)::before,
.promo:has(.foot-news)::before {
    content: "" !important;
    position: absolute !important;
    top: -50px !important;
    left: -50px !important;
    width: 220px !important;
    height: 220px !important;
    border-radius: 50% !important;
    background: rgba(30, 64, 175, 0.16) !important;
    filter: blur(65px) !important;
    -webkit-filter: blur(65px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Bottom-Right Aka-Red Orb Blur — Softened & Darkened */
section.band .promo::after,
.promo:has(.newsletter-form)::after,
.promo:has(.foot-news)::after {
    content: "" !important;
    position: absolute !important;
    bottom: -50px !important;
    right: -50px !important;
    width: 220px !important;
    height: 220px !important;
    border-radius: 50% !important;
    background: rgba(185, 28, 28, 0.13) !important;
    filter: blur(65px) !important;
    -webkit-filter: blur(65px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Inner content wrapper */
section.band .promo>div,
.promo:has(.newsletter-form)>div,
.promo:has(.foot-news)>div {
    position: relative !important;
    z-index: 2 !important;
}

/* 3. Hide Eyebrow — Not in screenshot */
section.band .promo .eyebrow {
    display: none !important;
}

/* 4. Title — Bold White Uppercase */
section.band .promo h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.55rem, 2.8vw, 2rem) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    letter-spacing: 0.03em !important;
    margin: 0 0 14px 0 !important;
    line-height: 1.15 !important;
    text-align: center !important;
}

/* 5. Description — Muted Gray, Centered */
section.band .promo p:not(.eyebrow) {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    line-height: 1.55 !important;
    margin: 0 auto 32px auto !important;
    max-width: 440px !important;
    text-align: center !important;
}

/* 6. Newsletter Form — Side-by-Side Input + Button with Gap */
section.band .newsletter-form,
section.band .foot-news {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* 7. Email Input — Dark Frosted Glass Look, Full Rounded Corners */
section.band .newsletter-form input[type="email"],
section.band .foot-news input[type="email"] {
    flex: 1 !important;
    min-width: 0 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    padding: 14px 20px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    outline: none !important;
    transition: border-color 0.25s ease, background 0.25s ease !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

section.band .newsletter-form input[type="email"]::placeholder,
section.band .foot-news input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    font-weight: 500 !important;
}

section.band .newsletter-form input[type="email"]:focus,
section.band .foot-news input[type="email"]:focus {
    border-color: rgba(43, 106, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

/* 8. Subscribe Button — Red, Standalone Rounded Corners */
section.band .newsletter-form .btn,
section.band .newsletter-form .btn-primary,
section.band .foot-news .btn {
    background: linear-gradient(135deg, #e51a24 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 14px 28px !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 16px rgba(229, 26, 36, 0.35) !important;
    flex-shrink: 0 !important;
    line-height: 1.3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

section.band .newsletter-form .btn:hover,
section.band .foot-news .btn:hover {
    background: linear-gradient(135deg, #f22933 0%, #cb1818 100%) !important;
    box-shadow: 0 6px 22px rgba(229, 26, 36, 0.6) !important;
    transform: translateY(-1px) !important;
}

/* 9. Mobile Responsive */
@media (max-width: 768px) {
    section.band .promo {
        padding: 48px 24px !important;
        border-radius: 14px !important;
    }

    section.band .promo h2 {
        font-size: 1.4rem !important;
    }

    section.band .promo p:not(.eyebrow) {
        font-size: 13px !important;
        margin-bottom: 24px !important;
    }

    section.band .newsletter-form,
    section.band .foot-news {
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    section.band .promo {
        padding: 40px 20px !important;
        border-radius: 12px !important;
    }

    section.band .newsletter-form,
    section.band .foot-news {
        flex-direction: column !important;
        gap: 10px !important;
    }

    section.band .newsletter-form input[type="email"],
    section.band .foot-news input[type="email"] {
        border-radius: 8px !important;
        border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
    }

    section.band .newsletter-form .btn,
    section.band .foot-news .btn {
        border-radius: 8px !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   DR SPORT — TRAINING GEAR (EVERYTHING YOU NEED TO TRAIN) (EXACT SCREENSHOT MATCH)
   ========================================================================== */

/* 1. Section Container & Wrapper */
.dr-train-section,
section.promo-banners-section,
section:has(.dr-train-grid) {
    padding: 60px 0 70px 0 !important;
    background: rgb(248 249 250) !important;
    width: 100% !important;
}

.dr-train-section .wrap,
section.promo-banners-section .wrap,
section:has(.dr-train-grid) .wrap {
    max-width: 1380px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

/* 2. Header: Centered Title and Subtitle */
.dr-train-header {
    text-align: center !important;
    margin: 0 auto 36px auto !important;
    max-width: 800px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.dr-train-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(24px, 2.5vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
    color: #0b0f19 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.15 !important;
    text-align: center !important;
}

.dr-train-desc {
    color: rgb(107 114 128) !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* 3. 6-Column Grid in 1 Single Row on Desktop */
.dr-train-grid,
.dr-train-section .promo-grid,
.promo-banners-section .promo-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
}

/* 4. Individual Card Item */
.dr-train-card,
.dr-train-section .promo-grid .promo,
.promo-banners-section .promo-grid .promo {
    position: relative !important;
    height: 190px !important;
    min-height: 190px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    background-color: #0b1120 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.35s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.35s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dr-train-card:hover,
.dr-train-section .promo-grid .promo:hover,
.promo-banners-section .promo-grid .promo:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

/* Background image */
.dr-train-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.6s cubic-bezier(0.2, 0, 0.2, 1) !important;
    z-index: 0 !important;
}

.dr-train-card:hover .dr-train-bg {
    transform: scale(1.08) !important;
}

.dr-train-bg-placeholder {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, #0b1120 0%, #1e293b 100%) !important;
}

/* 5. Dark Vignette / Gradient Overlay */
.dr-train-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg,
            rgba(8, 12, 22, 0.15) 0%,
            rgba(8, 12, 22, 0.38) 45%,
            rgba(8, 12, 22, 0.90) 100%) !important;
    transition: background 0.35s ease !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.dr-train-card:hover .dr-train-overlay {
    background: linear-gradient(180deg,
            rgba(8, 12, 22, 0.08) 0%,
            rgba(8, 12, 22, 0.28) 45%,
            rgba(8, 12, 22, 0.82) 100%) !important;
}

/* 6. Card Bottom Content (Icon + Title side by side) */
.dr-train-content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    width: 100% !important;
}

/* Icon Wrap & SVG Icons */
.dr-train-icon-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
}

.dr-train-svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.dr-svg-blue {
    color: #2b6aff !important;
    fill: #2b6aff !important;
    filter: drop-shadow(0 1px 4px rgba(43, 106, 255, 0.5)) !important;
}

.dr-svg-red {
    color: #e51a24 !important;
    fill: #e51a24 !important;
    filter: drop-shadow(0 1px 4px rgba(229, 26, 36, 0.5)) !important;
}

/* Category / Gear Name Text */
.dr-train-name {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85) !important;
}

/* 7. Responsive Breakpoints */
@media (max-width: 1200px) {

    .dr-train-grid,
    .dr-train-section .promo-grid,
    .promo-banners-section .promo-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }

    .dr-train-card,
    .dr-train-section .promo-grid .promo,
    .promo-banners-section .promo-grid .promo {
        height: 175px !important;
        min-height: 175px !important;
    }
}

@media (max-width: 768px) {

    .dr-train-section,
    section.promo-banners-section,
    section:has(.dr-train-grid) {
        padding: 32px 0 40px 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .dr-train-section .wrap,
    section.promo-banners-section .wrap,
    section:has(.dr-train-grid) .wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .dr-train-header {
        margin-bottom: 18px !important;
        text-align: center !important;
        padding: 0 8px !important;
    }

    .dr-train-title {
        font-size: 20px !important;
    }

    .dr-train-desc {
        font-size: 12.5px !important;
    }

    .dr-train-grid,
    .dr-train-section .promo-grid,
    .promo-banners-section .promo-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 12px !important;
        padding: 6px 0 16px 0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dr-train-grid::-webkit-scrollbar,
    .dr-train-section .promo-grid::-webkit-scrollbar,
    .promo-banners-section .promo-grid::-webkit-scrollbar {
        display: none !important;
    }

    .dr-train-card,
    .dr-train-section .promo-grid .promo,
    .promo-banners-section .promo-grid .promo {
        flex: 0 0 150px !important;
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        height: 145px !important;
        min-height: 145px !important;
        max-height: 145px !important;
        border-radius: 12px !important;
        scroll-snap-align: start !important;
    }

    .dr-train-content {
        padding: 10px !important;
        gap: 6px !important;
    }

    .dr-train-icon-wrap,
    .dr-train-svg {
        width: 18px !important;
        height: 18px !important;
    }

    .dr-train-name {
        font-size: 11px !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }
}

footer {
    margin-top: 50px;
}

/* ==========================================================================
   DR SPORT — SINGLE PRODUCT PAGE (PDP) MODERN ATHLETIC DESIGN SYSTEM
   ========================================================================== */

/* 1. Breadcrumbs */
.crumb {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 14px 0 !important;
    margin-bottom: 8px !important;
}

.crumb a {
    color: #64748b !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    font-weight: 600 !important;
}

.crumb a:hover {
    color: #2b6aff !important;
}

.crumb b {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* 2. Main PDP Grid Container */
.pdp {
    display: grid !important;
    grid-template-columns: 1.05fr 1fr !important;
    gap: 52px !important;
    align-items: start !important;
    padding-bottom: 50px !important;
}

/* 3. Product Gallery */
.gallery {
    display: grid !important;
    grid-template-columns: 84px 1fr !important;
    gap: 16px !important;
    position: sticky !important;
    top: 96px !important;
    z-index: 10 !important;
}

.thumbs {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-height: 580px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
}

.thumbs::-webkit-scrollbar {
    width: 4px !important;
}

.thumbs::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
}

.thumb {
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
    overflow: hidden !important;
    cursor: pointer !important;
    padding: 0 !important;
    background: #f8fafc !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

.thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.2s ease !important;
}

.thumb:hover {
    border-color: #94a3b8 !important;
    transform: translateY(-2px) !important;
}

.thumb.on {
    border-color: #e51a24 !important;
    box-shadow: 0 0 0 2px rgba(229, 26, 36, 0.25) !important;
}

.thumb#videoThumb {
    background: #0f172a !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.thumb#videoThumb svg {
    fill: #ffffff !important;
    width: 24px !important;
    height: 24px !important;
}

.main-img {
    position: relative !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    aspect-ratio: 1/1 !important;
    background: #f8fafc !important;
    border: 1px solid #edf2f7 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.main-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.main-img:hover img {
    transform: scale(1.03) !important;
}

.main-img .badge.sale {
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;
    background: #e51a24 !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(229, 26, 36, 0.4) !important;
    z-index: 5 !important;
}

/* 4. Product Info Column */
.pinfo {
    display: flex !important;
    flex-direction: column !important;
    font-family: 'Montserrat', sans-serif !important;
}

.pinfo .cat {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #2b6aff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-bottom: 6px !important;
}

.pinfo .cat::before {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: #2b6aff !important;
    box-shadow: 0 0 8px rgba(43, 106, 255, 0.6) !important;
}

.pinfo h1 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.35rem, 2.2vw, 1.85rem) !important;
    font-weight: 700 !important;
    color: #0a0e1a !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em !important;
    margin: 4px 0 12px 0 !important;
    text-transform: uppercase !important;
}

.pinfo a.link {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.pinfo a.link:hover {
    color: #0f172a !important;
}

/* Price Row */
#priceNow {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.35rem, 1.9vw, 1.65rem) !important;
    font-weight: 700 !important;
    color: #0a0e1a !important;
    letter-spacing: 0 !important;
}

#priceWas {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    margin-left: 8px !important;
}

.hot-deal-tag {
    background: #fee2e2 !important;
    color: #e51a24 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(229, 26, 36, 0.2) !important;
    display: inline-block !important;
}

/* Hot Deal Strip */
.hot-deal-strip {
    background: linear-gradient(135deg, #fff1f2 0%, #fee2e2 100%) !important;
    border: 1px solid #fecaca !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    color: #991b1b !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.hot-deal-strip .hd-clock {
    background: #e51a24 !important;
    color: #ffffff !important;
    font-family: 'Montserrat', monospace !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    letter-spacing: 0.05em !important;
    margin-left: auto !important;
}

/* 5. Variant Options & Chips */
.opt-row {
    margin: 16px 0 22px 0 !important;
}

.opt-label {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.opt-label b {
    color: #0f172a !important;
    font-weight: 800 !important;
}

.opt-label span {
    color: #2b6aff !important;
    font-weight: 700 !important;
}

.chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.chips .chip {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
}

.chips .chip:hover:not(:disabled) {
    border-color: #94a3b8 !important;
    background: #f8fafc !important;
    transform: translateY(-1px) !important;
}

.chips .chip.on {
    border-color: #e51a24 !important;
    background: #fef2f2 !important;
    color: #e51a24 !important;
    box-shadow: 0 2px 10px rgba(229, 26, 36, 0.15) !important;
}

.chips .chip.soldout,
.chips .chip:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    text-decoration: line-through !important;
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
}

/* Stock Urgency */
.stock-left-line {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #b45309 !important;
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    margin: 8px 0 16px 0 !important;
    width: fit-content !important;
}

.stock-left-line::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.8) !important;
    display: inline-block !important;
}

/* 6. Buy Action Row */
.buy-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 18px 0 22px 0 !important;
    flex-wrap: wrap !important;
}

/* Quantity selector */
.buy-row .qty {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    height: 50px !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
}

.buy-row .qty button {
    width: 36px !important;
    height: 38px !important;
    border: none !important;
    background: transparent !important;
    color: #0f172a !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    font-size: 16px !important;
}

.buy-row .qty button:hover {
    background: #e2e8f0 !important;
    color: #e51a24 !important;
}

.buy-row .qty #qv {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    min-width: 34px !important;
    text-align: center !important;
    color: #0a0e1a !important;
}

/* Add to Cart button */
.buy-row #addBtn,
.buy-row .btn-primary {
    height: 50px !important;
    flex: 1 1 180px !important;
    background: #e51a24 !important;
    border: none !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 4px 18px rgba(229, 26, 36, 0.35) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 24px !important;
    white-space: nowrap !important;
}

.buy-row #addBtn:hover:not(:disabled),
.buy-row .btn-primary:hover:not(:disabled) {
    background: #b80322 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(229, 26, 36, 0.45) !important;
}

/* Buy Now button */
.buy-row #buyBtn,
.buy-row .btn-dark {
    height: 50px !important;
    flex: 1 1 160px !important;
    background: #060a14 !important;
    border: 1.5px solid #060a14 !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 24px !important;
    white-space: nowrap !important;
}

.buy-row #buyBtn:hover:not(:disabled),
.buy-row .btn-dark:hover:not(:disabled) {
    background: #1e293b !important;
    border-color: #1e293b !important;
    transform: translateY(-2px) !important;
}

.buy-row .btn:disabled {
    background: #cbd5e1 !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Wishlist button */
.buy-row .wish,
.buy-row .wish-btn {
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #64748b !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.buy-row .wish:hover,
.buy-row .wish-btn:hover {
    border-color: #e51a24 !important;
    color: #e51a24 !important;
    background: #fef2f2 !important;
    transform: scale(1.05) !important;
}

.buy-row .wish.on {
    background: #fee2e2 !important;
    border-color: #e51a24 !important;
    color: #e51a24 !important;
}

/* 7. Meta Table */
.pdp-meta-table {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 20px 0 !important;
    padding: 16px 20px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
}

.pdp-meta-row {
    display: flex !important;
    align-items: center !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
}

.pdp-meta-label {
    font-weight: 700 !important;
    color: #64748b !important;
    min-width: 120px !important;
    text-transform: uppercase !important;
    font-size: 11.5px !important;
    letter-spacing: 0.04em !important;
}

.pdp-meta-sep {
    color: #cbd5e1 !important;
    padding: 0 10px !important;
}

.pdp-meta-val {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* 8. Trust Badges Row */
.trust-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 24px 0 !important;
    padding: 18px 0 !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    flex-wrap: wrap !important;
}

.trust-row div {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
}

.trust-row .ic {
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #2b6aff !important;
}

.trust-row svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
}

/* 9. Accordion */
.acc {
    margin: 18px 0 30px 0 !important;
}

.acc-item {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

.acc-item.open {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

.acc-head {
    width: 100% !important;
    padding: 15px 20px !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0a0e1a !important;
    cursor: pointer !important;
    outline: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.acc-head .ic svg {
    transition: transform 0.25s ease !important;
}

.acc-item.open .acc-head .ic svg {
    transform: rotate(180deg) !important;
}

.acc-body {
    padding: 0 20px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    color: #475569 !important;
    line-height: 1.65 !important;
}

.acc-body p {
    margin: 0 0 16px 0 !important;
}

/* 10. Long Description Section */
#description {
    padding: 60px 0 70px 0 !important;
    border-top: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
}

#description .sec-head {
    margin-bottom: 24px !important;
}

#description .sec-head .eyebrow {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #2b6aff !important;
    margin-bottom: 4px !important;
}

#description .sec-head h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #0a0e1a !important;
    margin: 0 !important;
}

.pdp-longdesc {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #334155 !important;
    max-width: 960px !important;
}

.pdp-longdesc h2,
.pdp-longdesc h3 {
    font-family: 'Montserrat', sans-serif !important;
    color: #0a0e1a !important;
    font-weight: 800 !important;
    margin: 28px 0 12px 0 !important;
    line-height: 1.3 !important;
}

.pdp-longdesc p {
    margin: 0 0 16px 0 !important;
}

.pdp-longdesc ul,
.pdp-longdesc ol {
    margin: 0 0 18px 0 !important;
    padding-left: 24px !important;
}

.pdp-longdesc li {
    margin-bottom: 8px !important;
}

/* 11. Customer Reviews Section */
#reviews {
    padding: 60px 0 75px 0 !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

.rev-summary {
    display: flex !important;
    align-items: center !important;
    gap: 48px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 32px 40px !important;
    margin-bottom: 36px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03) !important;
}

.rs-score {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 140px !important;
    text-align: center !important;
    padding-right: 36px !important;
    border-right: 1px solid #e2e8f0 !important;
}

.rs-score b {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 3.4rem !important;
    font-weight: 900 !important;
    color: #0a0e1a !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
}

.rs-score span:first-of-type {
    color: #f59e0b !important;
    font-size: 1.25rem !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 4px !important;
}

.rs-score span:last-of-type {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

.rs-bars {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.rs-bar {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475569 !important;
}

.rs-bar .rt {
    height: 8px !important;
    background: #e2e8f0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    flex: 1 !important;
}

.rs-bar .rf {
    height: 100% !important;
    background: #e51a24 !important;
    border-radius: 6px !important;
}

.grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}

.qcard {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s ease !important;
}

.qcard:hover {
    transform: translateY(-2px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

.qcard b {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0a0e1a !important;
}

.qcard span {
    font-family: 'Montserrat', sans-serif !important;
}

.qcard p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #334155 !important;
    margin: 10px 0 0 0 !important;
}

.empty-state {
    text-align: center !important;
    padding: 56px 24px !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1.5px dashed #cbd5e1 !important;
    color: #64748b !important;
    font-family: 'Montserrat', sans-serif !important;
}

.empty-state b {
    font-size: 1.15rem !important;
    color: #0a0e1a !important;
    font-weight: 800 !important;
}

/* 12. Sticky Buy Bar */
.sticky-buy {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 12px 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    z-index: 90 !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

.sticky-buy-info,
.sticky-buy div:first-child {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    font-family: 'Montserrat', sans-serif !important;
}

.sticky-buy-info b,
.sticky-buy div:first-child b {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0a0e1a !important;
    text-transform: uppercase !important;
}

.sticky-buy #stickyPrice {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #e51a24 !important;
    white-space: nowrap !important;
}

.sticky-buy-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.sticky-buy .btn {
    height: 44px !important;
    padding: 0 24px !important;
    border-radius: 10px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

/* 13. Mobile Responsiveness Breakpoints */
@media (max-width: 992px) {
    .pdp {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .gallery {
        grid-template-columns: 1fr !important;
        position: static !important;
    }

    .thumbs {
        flex-direction: row !important;
        order: 2 !important;
        overflow-x: auto !important;
        padding-bottom: 6px !important;
        max-height: none !important;
    }

    .thumb {
        width: 72px !important;
        height: 72px !important;
        flex: 0 0 72px !important;
    }

    .rev-summary {
        flex-direction: column !important;
        gap: 24px !important;
        padding: 24px !important;
    }

    .rs-score {
        padding-right: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding-bottom: 20px !important;
        width: 100% !important;
    }

    .grid-2 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .pdp {
        gap: 28px !important;
        padding-bottom: 30px !important;
    }

    .pinfo h1 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    .buy-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .buy-row .qty {
        width: 100% !important;
        height: 48px !important;
    }

    .buy-row #addBtn,
    .buy-row #buyBtn {
        width: 100% !important;
        flex: 1 1 auto !important;
        height: 48px !important;
    }

    .buy-row .wish {
        width: 100% !important;
        height: 44px !important;
        border-radius: 12px !important;
    }

    .trust-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 16px 0 !important;
    }

    /* Mobile Sticky Buy Bar */
    .sticky-buy {
        padding: 10px 14px !important;
        gap: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .sticky-buy-info,
    .sticky-buy > div:first-child,
    .sticky-buy div:first-child {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        min-width: max-content !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 2 !important;
    }

    .sticky-buy-info b,
    .sticky-buy > div:first-child b,
    .sticky-buy div:first-child b {
        display: none !important;
    }

    .sticky-buy #stickyPrice {
        font-size: 15px !important;
        font-weight: 900 !important;
        color: #e51a24 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        letter-spacing: -0.01em !important;
        display: inline-block !important;
    }

    .sticky-buy-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .sticky-buy .btn,
    .sticky-buy > .btn,
    .sticky-buy-actions .btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 40px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0.02em !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   14. DR SPORT — SIZE GUIDE TRIGGER & POPUP MODAL (MOBILE RESPONSIVE)
   ========================================================================== */

.opt-label-left {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.opt-label-left b {
    color: #0f172a !important;
    font-weight: 800 !important;
}

.opt-label-left span {
    color: #2b6aff !important;
    font-weight: 700 !important;
}

.size-guide-row-standalone {
    margin: 8px 0 16px 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.size-guide-trigger {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #2b6aff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    transition: all 0.2s ease !important;
}

.size-guide-trigger:hover {
    color: #e51a24 !important;
    background: rgba(229, 26, 36, 0.06) !important;
}

.size-guide-trigger svg {
    stroke: currentColor !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}

.size-guide-trigger:hover svg {
    transform: rotate(-10deg) scale(1.1) !important;
}

/* Modal Backdrop */
.size-guide-modal-backdrop {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(8, 14, 26, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    opacity: 0;
    transition: opacity 0.25s ease !important;
}

.size-guide-modal-backdrop.open {
    display: flex !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* Modal Dialog */
.size-guide-modal-dialog {
    background: #ffffff !important;
    border-radius: 20px !important;
    max-width: 860px !important;
    width: 100% !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
    transform: scale(0.92) translateY(12px) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.size-guide-modal-backdrop.open .size-guide-modal-dialog {
    transform: scale(1) translateY(0) !important;
}

/* Modal Header */
.size-guide-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid #edf2f7 !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
}

.size-guide-modal-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #0a0e1a !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.size-guide-modal-title svg {
    color: #2b6aff !important;
}

.size-guide-close {
    background: #f1f5f9 !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.size-guide-close:hover {
    background: #e51a24 !important;
    color: #ffffff !important;
    transform: rotate(90deg) !important;
}

/* Modal Body */
.size-guide-modal-body {
    padding: 20px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: #f8fafc !important;
}

.size-guide-img-wrap {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.size-guide-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    max-height: 72vh !important;
}

/* Mobile Responsive Modal Adjustments */
@media (max-width: 640px) {
    .size-guide-modal-backdrop {
        padding: 12px !important;
    }

    .size-guide-modal-dialog {
        border-radius: 16px !important;
        max-height: 94vh !important;
    }

    .size-guide-modal-header {
        padding: 12px 16px !important;
    }

    .size-guide-modal-title {
        font-size: 13.5px !important;
    }

    .size-guide-close {
        width: 32px !important;
        height: 32px !important;
        font-size: 20px !important;
    }

    .size-guide-modal-body {
        padding: 10px !important;
    }

    .size-guide-img {
        max-height: 75vh !important;
    }
}

/* ==========================================================================
   15. DR SPORT — SINGLE PRODUCT RELATED PRODUCTS ("YOU MAY ALSO LIKE")
   ========================================================================== */

body:has(.pdp) section:has(.grid-4),
#reviews~section:has(.grid-4),
#reviews~section {
    padding: 31px 0 22px 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #edf2f7 !important;
}

body:has(.pdp) section:has(.grid-4) .sec-head,
#reviews~section .sec-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    margin-bottom: 30px !important;
    gap: 16px !important;
}

body:has(.pdp) section:has(.grid-4) .sec-head .eyebrow,
#reviews~section .sec-head .eyebrow {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #2b6aff !important;
    margin: 0 0 6px 0 !important;
    display: inline-block !important;
}

body:has(.pdp) section:has(.grid-4) .sec-head h2,
#reviews~section .sec-head h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.6rem, 2.5vw, 2.15rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.015em !important;
    text-transform: uppercase !important;
    color: #0a0e1a !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

body:has(.pdp) section:has(.grid-4) .sec-head a.link,
#reviews~section .sec-head a.link {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #e51a24 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
}

body:has(.pdp) section:has(.grid-4) .sec-head a.link:hover,
#reviews~section .sec-head a.link:hover {
    color: #b91c1c !important;
    transform: translateX(3px) !important;
}

body:has(.pdp) section:has(.grid-4) .sec-head a.link .ic,
#reviews~section .sec-head a.link .ic {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body:has(.pdp) section:has(.grid-4) .sec-head a.link svg,
#reviews~section .sec-head a.link svg {
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    width: 14px !important;
    height: 14px !important;
}

/* Related Products Grid */
body:has(.pdp) section:has(.grid-4) .grid-4,
#reviews~section .grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
}

@media (max-width: 1100px) {

    body:has(.pdp) section:has(.grid-4) .grid-4,
    #reviews~section .grid-4 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 18px !important;
    }
}

@media (max-width: 768px) {

    body:has(.pdp) section:has(.grid-4),
    #reviews~section:has(.grid-4),
    #reviews~section {
        padding: 44px 0 60px 0 !important;
    }

    body:has(.pdp) section:has(.grid-4) .sec-head,
    #reviews~section .sec-head {
        margin-bottom: 20px !important;
    }

    body:has(.pdp) section:has(.grid-4) .sec-head h2,
    #reviews~section .sec-head h2 {
        font-size: 1.35rem !important;
    }

    body:has(.pdp) section:has(.grid-4) .grid-4,
    #reviews~section .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* ==========================================================================
   16. DR SPORT — FLOATING WHATSAPP BUTTON (HOME PAGE)
   ========================================================================== */

.dr-whatsapp-float {
    position: fixed !important;
    bottom: 28px !important;
    right: 28px !important;
    z-index: 9990 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.dr-wa-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
    z-index: 2 !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
}

.dr-wa-btn svg {
    width: 24px !important;
    height: 22px !important;
    display: block !important;
    fill: #ffffff !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)) !important;
    transition: transform 0.3s ease !important;
}

/* Pulsing ripple wave animation */
.dr-wa-pulse {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 42px !important;
    height: 42px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background: rgba(37, 211, 102, 0.5) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    animation: drWaRipple 2.2s infinite ease-out !important;
}

@keyframes drWaRipple {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    70% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
    }
}

/* Interactive Pill Tooltip */
.dr-wa-tooltip {
    position: absolute !important;
    right: calc(100% + 14px) !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(10px) !important;
    background: #0a0e1a !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.dr-wa-tooltip::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 100% !important;
    transform: translateY(-50%) !important;
    border-width: 5px 0 5px 6px !important;
    border-style: solid !important;
    border-color: transparent transparent transparent #0a0e1a !important;
}

/* Hover effects */
.dr-whatsapp-float:hover .dr-wa-btn {
    transform: scale(1.08) translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(37, 211, 102, 0.6), 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

.dr-whatsapp-float:hover .dr-wa-btn svg {
    transform: rotate(8deg) scale(1.05) !important;
}

.dr-whatsapp-float:hover .dr-wa-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(0) !important;
}

/* Active / Tap state */
.dr-whatsapp-float:active .dr-wa-btn {
    transform: scale(0.95) !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .dr-whatsapp-float {
        bottom: 22px !important;
        right: 18px !important;
    }

    .dr-wa-btn {
        width: 54px !important;
        height: 54px !important;
    }

    .dr-wa-btn svg {
        width: 30px !important;
        height: 30px !important;
    }

    .dr-wa-pulse {
        width: 54px !important;
        height: 54px !important;
    }

    .dr-wa-tooltip {
        display: none !important;
    }
}


#back-to-top {
    right: 28px;
    left: inherit;
}

/* ==========================================================================
   DR SPORT — CONTACT US PAGE (BALANCED & READABLE UI)
   ========================================================================== */

/* 1. Breadcrumb Bar on Contact Page */
.crumb {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    /*font-weight: 500 !important;*/
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f8fafc !important;
    border: 1px solid #edf2f7 !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
}

.crumb a {
    color: #64748b !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.crumb a:hover {
    color: #2b6aff !important;
}

.crumb b {
    color: #0f172a !important;
    font-weight: 600 !important;
}

/* 2. Single Page Headers (Contact & Checkout) — Matching Clean Single Page Title Style */
section:has(.contact-grid),
section:has(.checkout-grid),
section:has(#checkoutForm) {
    padding-top: 18px !important;
    padding-bottom: 70px !important;
    background: #ffffff !important;
}

section:has(.contact-grid) .sec-head,
section:has(.checkout-grid) .sec-head,
section:has(#checkoutForm) .sec-head {
    margin-bottom: 24px !important;
    position: relative !important;
    display: block !important;
}

section:has(.contact-grid) .sec-head .eyebrow,
section:has(.checkout-grid) .sec-head .eyebrow,
section:has(#checkoutForm) .sec-head .eyebrow {
    display: none !important;
}

section:has(.contact-grid) .sec-head h2,
section:has(.checkout-grid) .sec-head h2,
section:has(#checkoutForm) .sec-head h2 {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: clamp(1.7rem, 3.6vw, 2.3rem) !important;
    font-weight: 300 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    color: #1d1d1f !important;
    margin: 0 !important;
    line-height: 1.15 !important;
}

section:has(.contact-grid) .sec-head::after,
section:has(.checkout-grid) .sec-head::after,
section:has(#checkoutForm) .sec-head::after {
    display: none !important;
}



/* 3. Balanced 2-Column Grid (Aligned Tops & Symmetric Proportions) */
.contact-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.15fr !important;
    gap: 32px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* 4. Left Column: Contact Info Card Container */
.contact-info {
    background: #ffffff !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 18px !important;
    padding: 32px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
}

/* Header inside Contact Info */
.contact-info::before {
    content: "Contact Details" !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #0f172a !important;
    display: block !important;
    margin-bottom: 20px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* Rows inside Contact Info */
.contact-info .row {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    box-shadow: none !important;
    transition: background 0.2s ease !important;
}

.contact-info .row:last-of-type {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.contact-info .row:first-of-type {
    padding-top: 0 !important;
}

.contact-info .row:hover {
    transform: none !important;
    border-color: #f1f5f9 !important;
    box-shadow: none !important;
}

/* Icon Badges */
.contact-info .row .ic {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    transition: transform 0.2s ease !important;
}

.contact-info .row:hover .ic {
    transform: scale(1.05) !important;
}

.contact-info .row .ic svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

/* Row 1 (Visit us): Blue Accent */
.contact-info .row:nth-of-type(1) .ic {
    background: #eff6ff !important;
    color: #2b6aff !important;
    border: 1px solid #dbeafe !important;
}

/* Row 2 (Call us): Red Accent */
.contact-info .row:nth-of-type(2) .ic {
    background: #fef2f2 !important;
    color: #e51a24 !important;
    border: 1px solid #fee2e2 !important;
}

/* Row 3 (Email us): Blue Accent */
.contact-info .row:nth-of-type(3) .ic {
    background: #eff6ff !important;
    color: #2b6aff !important;
    border: 1px solid #dbeafe !important;
}

/* Row Content */
.contact-info .row>div {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
}

.contact-info .row b {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
}

.contact-info .row p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.contact-info .row a {
    color: #475569 !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.contact-info .row a:hover {
    color: #2b6aff !important;
}

/* Content page description if present */
.contact-info .content-page {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    background: #f8fafc !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    border-left: 3px solid #2b6aff !important;
    margin-bottom: 16px !important;
}

/* 5. Right Column: Contact Form Card Container */
#contactForm {
    background: #ffffff !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 18px !important;
    padding: 32px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    box-sizing: border-box !important;
    position: relative !important;
    height: auto !important;
}

/* Header inside Contact Form */
#contactForm::before {
    content: "Send Us a Message" !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #0f172a !important;
    display: block !important;
    margin-bottom: 4px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* Form Two-Column Row */
#contactForm>div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

/* Form inputs & textarea — Clean, Non-Bold, Easy to Read */
#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm textarea {
    width: 100% !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    /*font-family: 'Montserrat', sans-serif !important;*/
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}

#contactForm input[type="text"]::placeholder,
#contactForm input[type="email"]::placeholder,
#contactForm textarea::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

#contactForm input[type="text"]:focus,
#contactForm input[type="email"]:focus,
#contactForm textarea:focus {
    background: #ffffff !important;
    border-color: #2b6aff !important;
    box-shadow: 0 0 0 3px rgba(43, 106, 255, 0.12) !important;
}

#contactForm textarea {
    min-height: 120px !important;
    line-height: 1.55 !important;
    resize: vertical !important;
}

/* Submit Button */
#contactForm button.btn,
#contactForm button.btn-primary,
#contactForm button[type="submit"] {
    background: linear-gradient(135deg, #e51a24 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 13px 32px !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(229, 26, 36, 0.3) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    align-self: flex-start !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
}

#contactForm button.btn:hover,
#contactForm button.btn-primary:hover,
#contactForm button[type="submit"]:hover {
    background: linear-gradient(135deg, #f22933 0%, #cb1818 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(229, 26, 36, 0.45) !important;
}

#contactForm button.btn:active,
#contactForm button.btn-primary:active,
#contactForm button[type="submit"]:active {
    transform: translateY(0) !important;
}

/* 6. Responsive Breakpoints */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .contact-info,
    #contactForm {
        padding: 24px !important;
    }
}

@media (max-width: 580px) {
    #contactForm>div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    #contactForm button.btn,
    #contactForm button[type="submit"] {
        width: 100% !important;
    }

    .contact-info .row {
        gap: 12px !important;
    }

    .contact-info .row .ic {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ==========================================================================
   DR SPORT — SHOP PAGE SORT DROPDOWN (INSET ARROW & BALANCED PILL)
   ========================================================================== */

.sortwrap {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.sortwrap select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 15px) center !important;
    background-size: 11px 11px !important;
    padding: 7px 36px 7px 16px !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 999px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    cursor: pointer !important;
    outline: none !important;
    line-height: 1.4 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.sortwrap select::-ms-expand {
    display: none !important;
}

.sortwrap select:hover {
    border-color: #0f172a !important;
}

.sortwrap select:focus {
    border-color: #2b6aff !important;
    box-shadow: 0 0 0 3px rgba(43, 106, 255, 0.14) !important;
}

/* ==========================================================================
   DR SPORT — CONTENT PAGES BODY TYPOGRAPHY (ABOUT, STORY, STORE INFO, ETC.)
   Uses clean Manrope 400 font without affecting navbar or other storefront sections
   ========================================================================== */

.content-page {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Clean, readable body paragraphs & descriptions */
.content-page p,
.content-page li,
.content-page .dr-page-text,
.content-page .dr-feature-card p,
.content-page .dr-pillar-item p,
.content-page .dr-box-callout p,
.content-page .dr-box-callout ul,
.content-page .dr-box-callout li,
.content-page .dr-legal-article p,
.content-page .dr-legal-article li,
.content-page .dr-term-card p,
.content-page .dr-term-card li,
.content-page .dr-ship-card p,
.content-page .dr-faq-card p,
.content-page .dr-step-box p,
.content-page .dr-faq-answer,
.dr-about-wrap p,
.dr-story-wrap p,
.dr-store-wrap p,
.dr-legal-wrap p,
.dr-terms-wrap p,
.dr-ship-wrap p,
.dr-ret-wrap p,
.dr-faqs-wrap p {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.5rem !important;
    color: rgb(107 114 128) !important;
    font-weight: 400 !important;
}

/* Paragraphs inside dark hero banners stay clear & legible */
.dr-hero-banner p,
.dr-story-hero p,
.dr-store-hero p,
.dr-ship-hero p,
.dr-ret-hero p,
.dr-faqs-hero p {
    color: #94a3b8 !important;
    font-size: 0.875rem !important;
    line-height: 1.45rem !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 400 !important;
}

/* Non-bold, clean emphasis */
.content-page strong,
.content-page b {
    font-weight: 600 !important;
    color: #111827 !important;
}

/* Clean section headings */
.content-page h2,
.content-page h3,
.content-page h4 {
    font-family: 'Montserrat', sans-serif !important;
}

/* ── CART DRAWER & STICKY BUY OVERLAP FIX (Mobile & Desktop) ─────────────── */
/* Ensure Drawer and scrim sit safely above sticky buy bar, floating buttons & header */
.drawer,
.drawer.open,
#cartDrawer,
#navDrawer {
    z-index: 99999 !important;
}

.drawer .scrim {
    z-index: 99999 !important;
}

.drawer .panel {
    z-index: 100000 !important;
    height: 100% !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
}

#cartDrawer .cart-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

#cartDrawer .cart-foot {
    flex-shrink: 0 !important;
    padding: 16px 20px max(16px, env(safe-area-inset-bottom, 16px)) !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
    z-index: 10 !important;
}

#cartDrawer .cart-foot .btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Automatically hide sticky buy bar & floating WhatsApp / back-to-top widgets whenever Cart Drawer is open */
body:has(#cartDrawer.open) .sticky-buy,
body:has(#cartDrawer.open) .dr-whatsapp-float,
body:has(#cartDrawer.open) #backToTop,
body:has(#cartDrawer.open) .back-to-top,
body:has(#navDrawer.open) .sticky-buy,
body:has(#navDrawer.open) .dr-whatsapp-float {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==========================================================================
   DR SPORT — MOBILE VIEW REFINEMENTS (Max-Width: 768px)
   Does not affect desktop view.
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Universal Left & Right Padding for EVERY PAGE on Mobile (Shop, Product, Contact, Shipping, Checkout, Account, etc.) */
    .wrap,
    main .wrap,
    main > .wrap,
    section .wrap,
    section > .wrap,
    div.wrap,
    form .wrap,
    footer .wrap,
    header .wrap,
    .content-page,
    .crumb-wrap,
    .dr-topbar-inner,
    nav.dr-nav,
    header nav {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Prevent mobile horizontal shift */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    main {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* 2. Remove Top Hero Banner Section on Mobile */
    section.dr-main-hero-section,
    section.rcg-main-hero,
    section:has(.hero-slider):not(:has(.hero-split)),
    section:not(:has(.hero-split)) > .wrap > .hero-slider {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* 3. Product Sections (Featured, Top Sellers, New Arrivals) */
    .dr-featured-section,
    .dr-rail-section,
    .dr-top-selling-section,
    .dr-new-arrivals-section,
    section.product-rail-section,
    section:has(.dr-product-grid-5),
    section:has(.dr-rail-track) {
        padding: 36px 0 44px 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .dr-product-grid-5 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .dr-rail-track-wrap {
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .dr-rail-track {
        padding-bottom: 12px !important;
        gap: 12px !important;
    }

    .dr-rail-item {
        flex: 0 0 160px !important;
        width: 160px !important;
        min-width: 160px !important;
    }

    /* 4. Hero Split Section: Left & Right Padding via .wrap */
    .hero-split-section,
    section:has(.hero-split) {
        padding: 24px 0 32px 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .hero-split {
        margin: 0 !important;
        width: 100% !important;
        padding: 6px 0 16px 0 !important;
        box-sizing: border-box !important;
    }

    /* 5. Category Section (Disciplines): Left & Right Padding via .wrap */
    .dr-disciplines-section,
    section:has(.dr-disciplines-grid) {
        padding: 28px 0 36px 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .dr-disciplines-grid {
        margin: 0 !important;
        width: 100% !important;
        padding: 6px 0 16px 0 !important;
        box-sizing: border-box !important;
    }

    /* 6. Promo Banners Section (Training Gear): Left & Right Padding via .wrap + Horizontal Scroll */
    .dr-train-section,
    section.promo-banners-section,
    section:has(.dr-train-grid) {
        padding: 32px 0 40px 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .dr-train-grid,
    .dr-train-section .promo-grid,
    .promo-banners-section .promo-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 12px !important;
        padding: 6px 0 16px 0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dr-train-grid::-webkit-scrollbar,
    .dr-train-section .promo-grid::-webkit-scrollbar,
    .promo-banners-section .promo-grid::-webkit-scrollbar {
        display: none !important;
    }

    .dr-train-card,
    .dr-train-section .promo-grid .promo,
    .promo-banners-section .promo-grid .promo {
        flex: 0 0 150px !important;
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        height: 145px !important;
        min-height: 145px !important;
        max-height: 145px !important;
        border-radius: 12px !important;
        scroll-snap-align: start !important;
    }

    /* 7. Top Filter Section Alignment */
    .dr-filter-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    .dr-filter-pills {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 2px 0 6px 0 !important;
        box-sizing: border-box !important;
    }

    .dr-filter-pills::-webkit-scrollbar {
        display: none !important;
    }

    .dr-filter-pill {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 7px 15px !important;
        font-size: 11px !important;
        border-radius: 999px !important;
    }

    .dr-filter-sort {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        width: 100% !important;
        font-size: 12px !important;
    }

    .dr-sort-select {
        padding: 5px 10px !important;
        font-size: 11.5px !important;
        border-radius: 6px !important;
    }

    /* 8. Product Cards Mobile: Normal Font Weight */
    .prod.dr-prod-card .dr-prod-title,
    .dr-prod-card .info h3,
    .dr-prod-title,
    .dr-prod-card .dr-prod-title {
        font-weight: 500 !important;
    }

    .prod.dr-prod-card .dr-prod-brand,
    .dr-prod-card .info .dr-prod-brand,
    .dr-prod-brand {
        font-weight: 400 !important;
    }

    .dr-price-now,
    .dr-prod-card .prc .now,
    .prod.dr-prod-card .prc .now {
        font-weight: 500 !important;
    }

    .dr-rate-count,
    .dr-prod-card .rate-row .dr-rate-count {
        font-weight: 400 !important;
    }

    /* 9. Product Page: Bottom Sticky Buy Bar Mobile Optimization */
    .sticky-buy {
        padding: 10px 14px !important;
        gap: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .sticky-buy-info,
    .sticky-buy > div:first-child,
    .sticky-buy div:first-child {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        min-width: max-content !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 2 !important;
    }

    .sticky-buy-info b,
    .sticky-buy > div:first-child b,
    .sticky-buy div:first-child b {
        display: none !important;
    }

    .sticky-buy #stickyPrice {
        font-size: 15px !important;
        font-weight: 900 !important;
        color: #e51a24 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        letter-spacing: -0.01em !important;
        display: inline-block !important;
    }

    .sticky-buy-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .sticky-buy .btn,
    .sticky-buy > .btn,
    .sticky-buy-actions .btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 40px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0.02em !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

/* Small Mobile Screens (Max-Width: 380px) */
@media (max-width: 380px) {
    .sticky-buy {
        padding: 8px 8px !important;
        gap: 8px !important;
    }

    .sticky-buy #stickyPrice {
        font-size: 13.5px !important;
    }

    .sticky-buy-actions {
        gap: 6px !important;
    }

    .sticky-buy .btn,
    .sticky-buy > .btn,
    .sticky-buy-actions .btn {
        height: 38px !important;
        padding: 0 6px !important;
        font-size: 10px !important;
        letter-spacing: 0 !important;
    }
}