/**
 * CLP ULTRA PREMIUM v3 — NYXIVO
 * Strategy: cinematic dark hero → razor-clean white filter zone → soft light grid
 * Inspired by Apple / Linear / Stripe — zero conflicts, maximum premium feel.
 *
 * Loads LAST — overrides desktop-premium.css + dark-premium.css where needed.
 */

/* ================================================================
   PAGE BODY — very light background
   ================================================================ */
body.clp-theme {
    background: #f4f6fb !important;
    background-attachment: fixed !important;
    color: #0f172a !important;
}
body.clp-theme .clp-main {
    background: transparent !important;
}

/* ================================================================
   CONTRAST FIXES — dark-premium.css sets white text everywhere;
   these rules restore legibility for all white-background zones.
   ================================================================ */

/* ---- SORTBAR: search input + select (were white-on-white) ---- */
/* Match dark-premium's 0,3,0 specificity to win the cascade */
body.clp-theme .clp-search--enhanced .clp-search-input,
body.clp-theme .clp-sortbar .clp-search-input,
body.clp-theme .clp-search-input {
    color: #0f172a !important;
    background: #f8fafc !important;
    border: 1.5px solid rgba(15,23,42,0.15) !important;
    border-radius: 12px !important;
}
body.clp-theme .clp-search--enhanced .clp-search-input::placeholder,
body.clp-theme .clp-search-input::placeholder {
    color: #94a3b8 !important;
}
body.clp-theme .clp-search--enhanced .clp-search-input:focus,
body.clp-theme .clp-search-input:focus {
    background: #fff !important;
    border-color: var(--cat-clr,#3b82f6) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18) !important;
    outline: none !important;
}
body.clp-theme .clp-search-ic {
    color: #64748b !important;
}
body.clp-theme .clp-search-kbd {
    color: #64748b !important;
    background: #fff !important;
    border-color: #e2e8f0 !important;
}
/* Match dark-premium's 0,3,0 specificity for the select */
body.clp-theme .clp-select-wrap .clp-select,
body.clp-theme .clp-sortbar .clp-select,
body.clp-theme .clp-select {
    color: #0f172a !important;
    background: #fff !important;
    border: 1.5px solid rgba(15,23,42,0.12) !important;
}
body.clp-theme .clp-select-wrap .clp-select-caret {
    color: #475569 !important;
}
body.clp-theme .clp-sort-label {
    color: #475569 !important;
}
body.clp-theme .clp-results-count span {
    color: #64748b !important;
}

/* ---- SIDEBAR: dark navy bg — white text is handled by clp-sidebar-premium.css ---- */
/* Price range inputs need light styling on dark bg */
body.clp-theme .clp-price-inputs input {
    color: #e2e8f0 !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1.5px solid rgba(255,255,255,0.14) !important;
}
body.clp-theme .clp-price-inputs input:focus {
    background: rgba(255,255,255,0.12) !important;
    border-color: var(--cat-clr,#3b82f6) !important;
    outline: none !important;
}
/* Storage/color chips on dark bg */
body.clp-theme .clp-storage-chip {
    color: rgba(226,232,240,0.85) !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1.5px solid rgba(255,255,255,0.12) !important;
}
/* Price values on dark bg */
body.clp-theme .clp-price-values strong {
    color: #e2e8f0 !important;
    background: none !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}
/* Histogram bars with accent color */
body.clp-theme .clp-hist-bar {
    background: rgba(59,130,246,0.6) !important;
}

/* ---- TOPSTRIP section header (title was white-on-white) ---- */
body.clp-theme .clp-topstrip-title {
    color: #0f172a !important;
}
body.clp-theme .clp-topstrip-title i {
    color: var(--cat-clr,#3b82f6) !important;
}
body.clp-theme .clp-topstrip-hint {
    color: #94a3b8 !important;
}
body.clp-theme .clp-active-count {
    color: #fff !important;
}

/* ---- ACTIVE FILTER CHIPS row ---- */
body.clp-theme .clp-activechips-row {
    background: transparent !important;
}

/* ================================================================
   SCROLL PROGRESS BAR — glowing accent line at top
   ================================================================ */
.scroll-progress {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 3px !important;
    width: 0% !important;
    background: linear-gradient(90deg, var(--cat-clr, #3b82f6), #a855f7) !important;
    z-index: 9999 !important;
    border-radius: 0 3px 3px 0 !important;
    box-shadow: 0 0 14px rgba(59,130,246,0.5) !important;
    transition: width 0.08s linear !important;
}

/* ================================================================
   HERO — CINEMATIC DARK WITH FULL-BLEED IMAGE
   ================================================================ */

/* Taller on desktop */
@media (min-width: 992px) {
    body.clp-theme .clp-hero {
        height: clamp(460px, 58vh, 600px) !important;
        overflow: hidden !important;
    }
}

/* Overlay: very dark left (text zone) → image shows on right.
   Left-to-right gradient for maximum legibility + cinematic depth. */
@media (min-width: 992px) {
    body.clp-theme .clp-hero-img-blur::after {
        background:
            linear-gradient(105deg,
                rgba(4, 7, 15, 0.92)  0%,
                rgba(4, 7, 15, 0.80) 25%,
                rgba(4, 7, 15, 0.50) 45%,
                rgba(4, 7, 15, 0.18) 65%,
                rgba(4, 7, 15, 0.05) 82%,
                rgba(4, 7, 15, 0.00) 100%
            ),
            linear-gradient(180deg,
                rgba(4, 7, 15, 0.18) 0%,
                rgba(4, 7, 15, 0.00) 30%,
                rgba(4, 7, 15, 0.00) 68%,
                rgba(4, 7, 15, 0.40) 100%
            ) !important;
    }
}

/* Category accent halo — bottom left glow for brand identity */
body.clp-theme .clp-hero::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(
        60% 55% at 12% 100%,
        rgba(59,130,246,0.28) 0%,
        transparent 72%
    ) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Subtle dot grid pattern */
body.clp-theme .clp-hero::before {
    background: radial-gradient(circle, rgba(255,255,255,0.45) 1px, transparent 1px) !important;
    background-size: 34px 34px !important;
    mask-image: linear-gradient(90deg, rgba(0,0,0,0.3) 0%, transparent 55%) !important;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.3) 0%, transparent 55%) !important;
    opacity: 0.04 !important;
    z-index: 1 !important;
}

/* ---- Eyebrow badge — desktop only (mobile-fix hides it) ---- */
@media (min-width: 992px) {
    body.clp-theme .clp-hero-eyebrow {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.32rem 0.82rem !important;
        background: rgba(59,130,246,0.20) !important;
        border: 1px solid rgba(59,130,246,0.50) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border-radius: 99px !important;
        font-size: 0.66rem !important;
        letter-spacing: 0.16em !important;
        font-weight: 700 !important;
        color: #fff !important;
        text-transform: uppercase !important;
        line-height: 1.2 !important;
    }
}

/* Pulsing dot animation */
body.clp-theme .clp-hero-dot {
    background: var(--cat-clr, #3b82f6) !important;
    animation: clp-dot-pulse 2.2s ease-in-out infinite !important;
}
@keyframes clp-dot-pulse {
    0%, 100% { box-shadow: 0 0 4px 1px var(--cat-clr,#3b82f6); opacity: 1; }
    50%       { box-shadow: 0 0 14px 5px var(--cat-clr,#3b82f6); opacity: 0.75; }
}

/* ---- Hero title ---- */
@media (min-width: 992px) {
    body.clp-theme .clp-hero-title {
        font-size: clamp(3.2rem, 5.8vw, 4.6rem) !important;
        font-weight: 800 !important;
        letter-spacing: -0.045em !important;
        line-height: 0.97 !important;
        color: #fff !important;
        background: none !important;
        -webkit-text-fill-color: #fff !important;
        text-shadow:
            0 2px 24px rgba(0,0,0,0.45),
            0 0 100px rgba(59,130,246,0.20) !important;
    }
}
body.clp-theme .clp-hero-title {
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
}

/* ---- Hero description ---- */
body.clp-theme .clp-hero-sub {
    color: rgba(226, 232, 240, 0.88) !important;
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    max-width: 520px !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4) !important;
}

/* ================================================================
   HERO STAT CARDS — override display:none from desktop-premium.css
   ================================================================ */
@media (min-width: 992px) {
    body.clp-theme .clp-hero-stats {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.6rem !important;
        margin-top: 1.8rem !important;
        padding: 0 !important;
        list-style: none !important;
    }
}

body.clp-theme .clp-stat-card {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    padding: 0.5rem 0.9rem !important;
    background: rgba(255,255,255,0.11) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-radius: 99px !important;
    min-width: 0 !important;
    cursor: default !important;
    transition:
        background 0.22s,
        transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
        border-color 0.22s !important;
}
body.clp-theme .clp-stat-card:hover {
    background: rgba(255,255,255,0.20) !important;
    border-color: rgba(255,255,255,0.32) !important;
    transform: translateY(-2px) !important;
}
body.clp-theme .clp-stat-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    background: rgba(59,130,246,0.22) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
body.clp-theme .clp-stat-icon i {
    font-size: 0.72rem !important;
    color: #fff !important;
}
body.clp-theme .clp-stat-body {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 0.28rem !important;
    line-height: 1 !important;
}
body.clp-theme .clp-stat-body strong {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
    line-height: 1 !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important; /* override gradient from old version */
}
body.clp-theme .clp-stat-body span {
    font-size: 0.73rem !important;
    color: rgba(255,255,255,0.78) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    margin-top: 0 !important;
}

/* ================================================================
   WAVE — clean fade to page background
   ================================================================ */
.clp-hero-wave {
    height: 32px !important;
    margin-top: -32px !important;
    background: linear-gradient(to bottom, transparent 0%, #f4f6fb 100%) !important;
    display: block !important;
    position: relative !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* ================================================================
   SORTBAR — CLEAN WHITE, APPLE STYLE
   Override the dark version — let desktop-premium handle the layout,
   we just perfect the background and effects.
   ================================================================ */
body.clp-theme .clp-sortbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: saturate(200%) blur(24px) !important;
    -webkit-backdrop-filter: saturate(200%) blur(24px) !important;
    border-bottom: 1px solid rgba(15,23,42,0.07) !important;
    box-shadow: 0 4px 20px -8px rgba(15,23,42,0.10) !important;
    padding: 0 !important;
}
body.clp-theme .clp-sortbar.is-stuck {
    background: rgba(255,255,255,0.98) !important;
    box-shadow: 0 1px 0 rgba(15,23,42,0.06), 0 6px 24px -10px rgba(15,23,42,0.12) !important;
}

/* Filter toggle: dark pill with category glow */
body.clp-theme .clp-filter-toggle {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    height: 44px !important;
    box-shadow: 0 4px 14px -4px rgba(15,23,42,0.3) !important;
    transition:
        transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
        box-shadow 0.25s !important;
}
body.clp-theme .clp-filter-toggle:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px -4px rgba(59,130,246,0.35) !important;
}
body.clp-theme .clp-filter-toggle[aria-expanded="true"] {
    background: linear-gradient(135deg,
        var(--cat-clr,#3b82f6),
        #2563eb) !important;
    box-shadow: 0 6px 18px -4px rgba(99,102,241,0.45) !important;
}
body.clp-theme .clp-filter-toggle i {
    color: #fff !important;
}
body.clp-theme .clp-filter-count {
    background: rgba(255,255,255,0.22) !important;
    color: #fff !important;
}
body.clp-theme .clp-filter-count[hidden] { display: none !important; }

/* Results count: gradient number */
body.clp-theme .clp-results-count strong {
    background: linear-gradient(135deg,
        var(--cat-clr,#3b82f6),
        #2563eb) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
}

/* Sort label + select — 0,3,0 specificity to beat dark-premium */
body.clp-theme .clp-sort-label {
    color: #64748b !important;
    font-size: 0.82rem !important;
}
body.clp-theme .clp-select-wrap .clp-select,
body.clp-theme .clp-sortbar .clp-select,
body.clp-theme .clp-select {
    background: #fff !important;
    border: 1.5px solid rgba(15,23,42,0.1) !important;
    color: #0f172a !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
body.clp-theme .clp-select-wrap .clp-select:hover,
body.clp-theme .clp-select-wrap .clp-select:focus,
body.clp-theme .clp-select:hover,
body.clp-theme .clp-select:focus {
    border-color: var(--cat-clr,#3b82f6) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18) !important;
    outline: none !important;
}

/* Presets row — horizontal scrollable chips */
body.clp-theme .clp-presets-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(248,250,252,0.8) !important;
    border-top: 1px solid rgba(15,23,42,0.05) !important;
    padding: 0.5rem 0 !important;
    margin-top: 0 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
body.clp-theme .clp-presets-row::-webkit-scrollbar {
    display: none !important;
}

/* ================================================================
   PRESET CHIPS — CLEAN WHITE PILLS WITH SPRING HOVER
   ================================================================ */
body.clp-theme .clp-preset {
    background: #fff !important;
    border: 1.5px solid rgba(15,23,42,0.09) !important;
    color: #475569 !important;
    border-radius: 99px !important;
    font-weight: 600 !important;
    font-size: 0.81rem !important;
    box-shadow: 0 1px 4px rgba(15,23,42,0.06) !important;
    transition:
        background 0.22s,
        border-color 0.22s,
        color 0.22s,
        transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
        box-shadow 0.28s !important;
    white-space: nowrap !important;
}
body.clp-theme .clp-preset:hover {
    border-color: rgba(59,130,246,0.6) !important;
    color: var(--cat-clr,#3b82f6) !important;
    background: rgba(59,130,246,0.06) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px -4px rgba(59,130,246,0.22) !important;
}
body.clp-theme .clp-preset[aria-pressed="true"],
body.clp-theme .clp-preset.active {
    background: var(--cat-clr,#3b82f6) !important;
    border-color: var(--cat-clr,#3b82f6) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px -6px rgba(59,130,246,0.45) !important;
    transform: translateY(-1px) !important;
}

/* ================================================================
   SUBCAT STRIP — CLEAN WHITE, STICKY
   ================================================================ */
body.clp-theme .clp-subcat-strip {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid rgba(15,23,42,0.04) !important;
    border-bottom: 1px solid rgba(15,23,42,0.07) !important;
    padding: 0.8rem 0 !important;
    position: sticky !important;
    top: var(--clp-sortbar-height, 112px) !important;
    z-index: 110 !important;
    box-shadow: 0 4px 16px -8px rgba(15,23,42,0.08) !important;
}
body.clp-theme .clp-subcat-pill {
    background: #fff !important;
    border: 1.5px solid rgba(15,23,42,0.09) !important;
    color: #475569 !important;
    border-radius: 99px !important;
    font-weight: 600 !important;
    font-size: 0.84rem !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important;
    transition:
        background 0.22s,
        border-color 0.22s,
        color 0.22s,
        transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
        box-shadow 0.28s !important;
}
body.clp-theme .clp-subcat-pill:hover {
    border-color: rgba(59,130,246,0.55) !important;
    color: var(--cat-clr,#3b82f6) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px -4px rgba(59,130,246,0.22) !important;
}
body.clp-theme .clp-subcat-pill.active {
    background: var(--cat-clr,#3b82f6) !important;
    border-color: var(--cat-clr,#3b82f6) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px -4px rgba(59,130,246,0.40) !important;
}
body.clp-theme .clp-subcat-count {
    background: rgba(15,23,42,0.07) !important;
    color: #64748b !important;
}
body.clp-theme .clp-subcat-pill.active .clp-subcat-count {
    background: rgba(255,255,255,0.22) !important;
    color: #fff !important;
}

/* ================================================================
   ACTIVE FILTER CHIPS
   ================================================================ */
body.clp-theme .clp-activechip {
    background: rgba(59,130,246,0.08) !important;
    border: 1px solid rgba(59,130,246,0.28) !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    border-radius: 99px !important;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), background 0.2s !important;
}
body.clp-theme .clp-activechip:hover {
    background: rgba(59,130,246,0.14) !important;
    transform: scale(1.03) !important;
}
body.clp-theme .clp-activechip-clear {
    background: #fff !important;
    border: 1.5px solid rgba(15,23,42,0.1) !important;
    color: #64748b !important;
    border-radius: 99px !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}
body.clp-theme .clp-activechip-clear:hover {
    background: #fef2f2 !important;
    border-color: rgba(239,68,68,0.3) !important;
    color: #ef4444 !important;
}

/* ================================================================
   LAYOUT — SOFT LIGHT GRID
   ================================================================ */
body.clp-theme .clp-layout {
    background: #f4f6fb !important;
    padding: 2rem 0 5rem !important;
}

/* Sidebar — keep dark navy from clp-sidebar-premium.css; only shape/shadow tweaks */
@media (min-width: 1024px) {
    body.clp-theme .clp-sidebar {
        border-radius: 20px !important;
        border: 1px solid rgba(255,255,255,0.07) !important;
        box-shadow:
            0 2px 8px rgba(0,0,0,0.20),
            0 12px 40px -8px rgba(0,0,0,0.32) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow: hidden !important;
    }
}

/* Grid separators */
body.clp-theme .clp-grid-sep {
    border-color: rgba(15,23,42,0.08) !important;
    color: #475569 !important;
}
body.clp-theme .clp-grid-sep-label,
body.clp-theme .clp-grid-sep span {
    background: #f4f6fb !important;
    color: #64748b !important;
}

/* ================================================================
   BACK BUTTON — spring hover
   ================================================================ */
@media (min-width: 992px) {
    body.clp-theme .clp-btn-back {
        background: rgba(255,255,255,0.14) !important;
        border: 1px solid rgba(255,255,255,0.22) !important;
        color: #fff !important;
        backdrop-filter: blur(14px) !important;
        transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), background 0.2s, border-color 0.2s !important;
    }
    body.clp-theme .clp-btn-back:hover {
        background: rgba(255,255,255,0.24) !important;
        border-color: rgba(255,255,255,0.36) !important;
        transform: translateX(-3px) !important;
        color: #fff !important;
    }
}

/* ================================================================
   FAB BUTTON (mobile) — category accent
   ================================================================ */
body.clp-theme .clp-fab,
body.clp-theme .clp-mobile-fab {
    background: linear-gradient(135deg, var(--cat-clr,#3b82f6), #1d4ed8) !important;
    border: none !important;
    box-shadow:
        0 8px 24px -6px rgba(59,130,246,0.45),
        0 0 0 2px rgba(255,255,255,0.14) !important;
    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.28s !important;
}
body.clp-theme .clp-fab:hover,
body.clp-theme .clp-mobile-fab:hover {
    transform: scale(1.1) !important;
    box-shadow:
        0 14px 32px -6px rgba(59,130,246,0.55),
        0 0 0 3px rgba(255,255,255,0.18) !important;
}

/* ================================================================
   TOP STRIP (top 3 products zone)
   ================================================================ */
body.clp-theme .clp-topstrip {
    background: #fff !important;
    border: 1px solid rgba(15,23,42,0.07) !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 4px 14px -6px rgba(15,23,42,0.06) !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
}

/* ================================================================
   OTHER CATEGORIES STRIP
   ================================================================ */
body.clp-theme .clp-other-cats {
    background: #fff !important;
    border-top: 1px solid rgba(15,23,42,0.07) !important;
    padding: 3rem 0 !important;
}

/* ================================================================
   LOAD MORE BUTTON
   ================================================================ */
body.clp-theme .clp-btn-loadmore {
    background: #fff !important;
    border: 1.5px solid rgba(15,23,42,0.1) !important;
    color: #0f172a !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(15,23,42,0.05) !important;
    transition:
        transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
        border-color 0.22s,
        box-shadow 0.22s !important;
}
body.clp-theme .clp-btn-loadmore:hover {
    border-color: var(--cat-clr,#3b82f6) !important;
    color: var(--cat-clr,#3b82f6) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px -6px rgba(59,130,246,0.28) !important;
}

/* ================================================================
   GLOBAL FIXES — apply on ALL viewport sizes
   ================================================================ */

/* Product image: remove dark skeleton overlay on every screen size */
body.clp-theme .product-card-tech .product-image-wrapper img {
    background: transparent !important;
}

/* Desktop product cards — bolder price */
body.clp-theme .product-card-tech .product-prices {
    font-weight: 700 !important;
}

/* "Explora otras categorías" — dark heading + white bg on ALL viewports */
body.clp-theme .clp-others {
    background: #ffffff !important;
    border-top: 1px solid #e8edf4 !important;
}
body.clp-theme .clp-others .clp-others-head h2,
body.clp-theme .clp-others-head h2 {
    color: #0f172a !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}
body.clp-theme .clp-others-all {
    color: var(--cat-clr, #3b82f6) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Others arrow — color(srgb) fallback for all viewports */
body.clp-theme .clp-others-arrow {
    background: rgba(255,255,255,0.15) !important;
}

/* Desktop refinements */
@media (min-width: 992px) {
    body.clp-theme .clp-sortbar-inner {
        min-height: 56px !important;
        height: 56px !important;
        padding: 0 !important;
    }
    body.clp-theme .clp-presets-row {
        padding: 0.35rem 0 !important;
    }
    body.clp-theme .clp-subcat-strip {
        padding: 0.4rem 0 !important;
    }
    /* Desktop add-to-cart: category accent gradient */
    body.clp-theme .product-card-tech .btn-add-cart {
        background: linear-gradient(135deg,
            var(--cat-clr, #3b82f6) 0%,
            rgba(124, 58, 237, 0.85) 100%) !important;
        border: none !important;
        color: #fff !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
    }
    body.clp-theme .product-card-tech .btn-add-cart:hover {
        opacity: 0.88 !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 18px -4px rgba(59,130,246,0.45) !important;
    }
}

/* ================================================================
   MOBILE OVERRIDES — carga ÚLTIMO para ganar cascade definitivamente
   ================================================================ */
/* ================================================================
   MOBILE OVERRIDES — carga ÚLTIMO, máxima especificidad,
   gana todas las batallas del cascade en ≤991px.
   REGLA #1: solo el navbar es fijo — nada más.
   ================================================================ */
@media (max-width: 991px) {

    /* ── 1. POSICIÓN: NADA sticky excepto navbar ── */
    body.clp-theme .clp-sortbar {
        position: static !important;
        top: auto !important;
        z-index: 1 !important;
        background: #ffffff !important;
        border-bottom: 1px solid rgba(15,23,42,0.07) !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    body.clp-theme .clp-sortbar-inner {
        min-height: 52px !important;
        height: 52px !important;
        padding: 0 !important;
    }
    body.clp-theme .clp-presets-row {
        padding: 0.35rem 0 !important;
        height: 44px !important;
    }
    body.clp-theme .clp-subcat-strip {
        position: static !important;
        top: auto !important;
        z-index: 1 !important;
    }
    body.clp-theme .clp-activechips-row {
        position: static !important;
        top: auto !important;
    }
    /* Scroll progress: desactivar en mobile (no tiene sentido sin sticky) */
    .scroll-progress {
        display: none !important;
    }

    /* ── 2. HERO — más alto, pseudo badge oculto ── */
    body.clp-theme .clp-hero-eyebrow {
        display: none !important;
    }
    /* Ocultar pseudo-badge "Categoría" del ::before (ya está en breadcrumb) */
    body.clp-theme .clp-hero-copy::before {
        display: none !important;
    }

    /* ── 3. SORTBAR — layout limpio 2 filas ── */
    body.clp-theme .clp-sort-label {
        display: none !important;
    }
    body.clp-theme .clp-results-count strong {
        background: linear-gradient(135deg,
            var(--cat-clr, #3b82f6),
            #2563eb) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
    }
    body.clp-theme .clp-results-count span {
        color: #64748b !important;
        font-size: 0.84rem !important;
    }

    /* ── 4. LAYOUT — full-width sin columna del sidebar ── */
    body.clp-theme .clp-layout-inner {
        display: block !important;
        grid-template-columns: unset !important;
        padding: 0 !important;
    }
    body.clp-theme .clp-content {
        width: 100% !important;
        max-width: 100% !important;
    }
    body.clp-theme .clp-layout {
        padding: 0 0 max(5rem, calc(env(safe-area-inset-bottom) + 5rem)) !important;
        background: #f4f6fb !important;
    }

    /* ── 5. PRODUCT CARDS — blancas, legibles, bien proporcionadas ── */
    body.clp-theme .clp-grid .product-card-tech,
    body.clp-theme #clpGrid .product-card-tech {
        background: #ffffff !important;
        border: 1px solid #e8edf4 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(15,23,42,0.06), 0 6px 20px -8px rgba(15,23,42,0.12) !important;
    }
    /* Imagen: fondo claro para que los productos se vean limpios */
    body.clp-theme .clp-grid .product-card-tech .product-image-wrapper,
    body.clp-theme #clpGrid .product-card-tech .product-image-wrapper {
        background: #f8fafc !important;
        border-bottom: 1px solid #f0f4f8 !important;
        height: 160px !important;
    }
    body.clp-theme .clp-grid .product-card-tech .product-image-wrapper img,
    body.clp-theme #clpGrid .product-card-tech .product-image-wrapper img {
        background: transparent !important;
        mix-blend-mode: multiply !important;
    }
    /* Marca */
    body.clp-theme .clp-grid .product-card-tech .product-brand,
    body.clp-theme #clpGrid .product-card-tech .product-brand {
        color: var(--cat-clr, #3b82f6) !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.07em !important;
        text-transform: uppercase !important;
    }
    /* Nombre del producto — el H3 Y el <a> dentro */
    body.clp-theme .clp-grid .product-card-tech .product-name,
    body.clp-theme #clpGrid .product-card-tech .product-name {
        color: #0f172a !important;
        font-size: 0.83rem !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }
    body.clp-theme .clp-grid .product-card-tech .product-name a,
    body.clp-theme #clpGrid .product-card-tech .product-name a {
        color: #0f172a !important;
        text-decoration: none !important;
    }
    /* Estrellas vacías visibles */
    body.clp-theme .clp-grid .product-card-tech .product-rating .far.fa-star,
    body.clp-theme #clpGrid .product-card-tech .product-rating .far.fa-star,
    body.clp-theme .clp-grid .product-card-tech .product-rating--empty,
    body.clp-theme #clpGrid .product-card-tech .product-rating--empty {
        color: #cbd5e1 !important;
    }
    /* Precio actual */
    body.clp-theme .clp-grid .product-card-tech .product-price-current,
    body.clp-theme #clpGrid .product-card-tech .product-price-current {
        color: #0f172a !important;
        font-weight: 800 !important;
        font-size: 0.95rem !important;
        letter-spacing: -0.02em !important;
    }
    /* Precio tachado */
    body.clp-theme .clp-grid .product-card-tech .product-price-old,
    body.clp-theme #clpGrid .product-card-tech .product-price-old {
        color: rgba(15,23,42,0.38) !important;
        text-decoration: line-through !important;
        font-size: 0.72rem !important;
    }
    /* "Sin reseñas" / texto rating vacío */
    body.clp-theme .clp-grid .product-card-tech .product-rating span,
    body.clp-theme #clpGrid .product-card-tech .product-rating span,
    body.clp-theme .clp-grid .product-card-tech [class*="review"],
    body.clp-theme #clpGrid .product-card-tech [class*="review"] {
        color: #94a3b8 !important;
    }
    /* Botón agregar al carrito */
    body.clp-theme .clp-grid .product-card-tech .btn-add-cart,
    body.clp-theme #clpGrid .product-card-tech .btn-add-cart {
        background: #0f172a !important;
        color: #ffffff !important;
        border-radius: 10px !important;
        font-weight: 700 !important;
        font-size: 0.78rem !important;
        height: 40px !important;
        letter-spacing: 0.01em !important;
    }

    /* ── 6. OTRAS CATEGORÍAS ── */
    body.clp-theme .clp-other-cats {
        background: #f4f6fb !important;
        padding: 1.25rem 0 2rem !important;
    }

    /* ── 7. SECCIÓN "EXPLORA OTRAS CATEGORÍAS" ── */
    body.clp-theme .clp-others {
        background: #ffffff !important;
        border-top: 1px solid #e8edf4 !important;
        margin-top: 0.5rem !important;
        padding: 2rem 0 2.5rem !important;
    }
    /* Heading visible sobre fondo blanco */
    body.clp-theme .clp-others .clp-others-head h2,
    body.clp-theme .clp-others-head h2 {
        color: #0f172a !important;
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
    }
    body.clp-theme .clp-others-all {
        color: var(--cat-clr, #3b82f6) !important;
        font-weight: 700 !important;
        font-size: 0.85rem !important;
        text-decoration: none !important;
    }
    /* Tarjetas de otras categorías — texto correcto según background */
    body.clp-theme .clp-others-card {
        border-radius: 14px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(15,23,42,0.08), 0 6px 20px -6px rgba(15,23,42,0.10) !important;
        border: none !important;
        transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s !important;
    }
    body.clp-theme .clp-others-card:active {
        transform: scale(0.97) !important;
    }
    /* El arrow background usa color(srgb) no soportado → fallback rgba */
    body.clp-theme .clp-others-arrow {
        background: rgba(255,255,255,0.15) !important;
    }

    /* ── 8. ICONOS FLOTANTES — sin solapamiento ── */

    /* Ocultar carrito flotante global: el navbar ya tiene el icono de carrito */
    body.clp-theme #nyxFloatCart {
        display: none !important;
    }

    /* Chat bubble: mover a bottom-left para no solapar el FAB (bottom-right) */
    body.clp-theme #nyx-chat-bubble,
    body.clp-theme #nyx-chat-window {
        right: auto !important;
        left: 1rem !important;
    }

    /* FAB de filtros: elevar z-index y posición clara bottom-right */
    body.clp-theme .clp-mobile-fab {
        bottom: max(1.25rem, env(safe-area-inset-bottom, 1.25rem)) !important;
        right: 1rem !important;
        left: auto !important;
        z-index: 200 !important;
    }
}

/* ================================================================
   GSAP ANIMATION HELPER CLASSES
   ================================================================ */
.clp-gsap-hidden {
    opacity: 0;
    transform: translateY(20px);
}
.clp-gsap-hidden-left {
    opacity: 0;
    transform: translateX(-22px);
}
.clp-gsap-hidden-scale {
    opacity: 0;
    transform: scale(0.96);
}

/* ================================================================
   PREFERS REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    body.clp-theme .clp-hero-dot {
        animation: none !important;
    }
    .clp-gsap-hidden,
    .clp-gsap-hidden-left,
    .clp-gsap-hidden-scale {
        opacity: 1 !important;
        transform: none !important;
    }
    body.clp-theme .clp-preset,
    body.clp-theme .clp-subcat-pill,
    body.clp-theme .clp-stat-card,
    body.clp-theme .clp-filter-toggle,
    body.clp-theme .clp-btn-back {
        transition: background 0.2s, border-color 0.2s, color 0.2s !important;
        transform: none !important;
    }
}

/* ================================================================
   MOBILE UX FIXES — min-touch-target + brand font
   (appended last so these win the cascade over all prior rules)
   ================================================================ */

/* Brand label: 12px mínimo en móvil */
body.clp-theme .product-brand,
body.clp-theme .clp-grid .product-card-tech .product-brand,
body.clp-theme #clpGrid .product-card-tech .product-brand {
    font-size: 0.75rem !important;
}

/* Preset pills — touch target 40px+ */
body.clp-theme .clp-preset {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Subcat pills — touch target 40px+ */
body.clp-theme .clp-subcat-pill {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Back button — touch target 44px (WCAG AA) */
body.clp-theme .clp-btn-back {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Add-to-cart button — touch target 44px */
body.clp-theme .clp-grid .product-card-tech .btn-add-cart,
body.clp-theme #clpGrid .product-card-tech .btn-add-cart,
body.tech-theme .btn-add-cart,
.btn-add-cart {
    min-height: 44px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}