/* ═══════════════════════════════════════════════════════════════════
   EVERSTAR SPORTS — MODERN THEME LAYER v1.0
   Cinematic dark redesign. Loads after the base styles and upgrades
   the visual design + motion without touching content or brand colors.
   Brand palette preserved: #ff0000 red · black · white · #25D366 WA green.
   All animation uses transform/opacity only (GPU, 60fps).
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --es-red: #ff0000;
    --es-red-dark: #cc0000;
    --es-bg: #070707;
    --es-surface: #111111;
    --es-surface-2: #161616;
    --es-border: rgba(255, 255, 255, 0.08);
    --es-border-strong: rgba(255, 255, 255, 0.14);
    --es-red-border: rgba(255, 0, 0, 0.35);
    --es-glow: 0 0 0 1px rgba(255, 0, 0, 0.25), 0 18px 50px -12px rgba(255, 0, 0, 0.35);
    --es-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
    --es-shadow-2: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
    --es-shadow-3: 0 24px 60px -12px rgba(0, 0, 0, 0.65);
    --es-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --es-fast: 0.2s;
    --es-med: 0.35s;
    --es-slow: 0.7s;
    --es-r-sm: 10px;
    --es-r-md: 16px;
    --es-r-lg: 20px;
    --es-r-pill: 999px;
}

/* ── GLOBAL POLISH ─────────────────────────────────────────────── */

::selection { background: var(--es-red); color: #fff; }

* { scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #262626; border-radius: 8px; border: 2px solid #0a0a0a; }
::-webkit-scrollbar-thumb:hover { background: var(--es-red-dark); }

:focus-visible {
    outline: 2px solid var(--es-red);
    outline-offset: 3px;
    border-radius: 4px;
}

body { background: var(--es-bg); }

/* Cinematic ambient light — two slow-drifting red glows + subtle grid */
body::before,
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
body::before {
    background:
        radial-gradient(42vw 42vw at 12% 18%, rgba(255, 0, 0, 0.075), transparent 65%),
        radial-gradient(50vw 50vw at 88% 78%, rgba(255, 0, 0, 0.055), transparent 65%);
}
body::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 0%, transparent 75%);
}

/* Let the ambient light show through near-black sections */
.categories, .about, .faq-section, .featured-section,
.walkin-section, .trust-strip, .products,
.faq-section-cat, .related-section, .category-intro {
    background: transparent !important;
}
.ws-section { background: rgba(0, 0, 0, 0.35) !important; }

/* ── NAVIGATION — unified glassmorphism ────────────────────────── */

.navbar {
    background: rgba(7, 7, 7, 0.55) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    border-bottom: 1px solid var(--es-border) !important;
}
.navbar.scrolled {
    background: rgba(7, 7, 7, 0.82) !important;
    border-bottom: 1px solid var(--es-red-border) !important;
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.6), 0 1px 18px -6px rgba(255, 0, 0, 0.25) !important;
}
.nav-logo {
    transition: transform var(--es-fast) var(--es-ease), filter var(--es-fast) ease;
    filter: drop-shadow(0 0 12px rgba(255, 0, 0, 0.35));
}
.nav-logo:hover { transform: scale(1.04); }

.nav-links a:not(.nav-cta) { position: relative; }
.nav-links a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    left: 16px; right: 16px; bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--es-red), rgba(255, 0, 0, 0.4));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--es-med) var(--es-ease);
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a.active:not(.nav-cta)::after { transform: scaleX(1); }
.nav-links a:not(.nav-cta):hover { color: #fff; }

.nav-cta {
    box-shadow: 0 4px 18px -4px rgba(255, 0, 0, 0.55);
    transition: transform var(--es-fast) var(--es-ease), box-shadow var(--es-fast) ease, background 0.3s ease;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 26px -6px rgba(255, 0, 0, 0.7); }
.nav-cta:active { transform: scale(0.96); }

.nav-search-bar {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--es-border) !important;
    border-radius: var(--es-r-pill) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: border-color var(--es-fast) ease, background var(--es-fast) ease, transform var(--es-fast) var(--es-ease);
}
.nav-search-bar:hover {
    border-color: var(--es-red-border) !important;
    background: rgba(255, 255, 255, 0.09) !important;
    transform: translateY(-1px);
}

.nav-topbar {
    background: rgba(7, 7, 7, 0.92);
    border-bottom: 1px solid var(--es-border);
}

/* ── HERO — cinematic entrance ─────────────────────────────────── */

.hero::before {
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(140, 0, 0, 0.16) 55%,
            rgba(7, 7, 7, 0.92) 96%,
            var(--es-bg) 100%) !important;
}
.hero h1 span { text-shadow: 0 0 38px rgba(255, 0, 0, 0.55), 2px 2px 20px rgba(0, 0, 0, 0.8); }

/* Staggered load-in for hero children (motion-gated) */
@keyframes esRise {
    from { opacity: 0; transform: translateY(34px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.m-motion .hero-content { animation: none !important; opacity: 1 !important; transform: none !important; }
.m-motion .hero-content > h1      { animation: esRise 0.9s var(--es-ease) 0.15s both; }
.m-motion .hero-content > p       { animation: esRise 0.9s var(--es-ease) 0.32s both; }
.m-motion .hero-badges            { animation: esRise 0.9s var(--es-ease) 0.48s both; }
.m-motion .hero-ctas              { animation: esRise 0.9s var(--es-ease) 0.62s both; }

.hero-badges span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--es-border-strong);
    border-radius: var(--es-r-pill);
    padding: 9px 18px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--es-shadow-1);
}

.scroll-indicator .mouse { border-color: rgba(255, 255, 255, 0.65); }

/* ── BUTTONS — pill, glow, spring press ────────────────────────── */

.btn, .btn-outline, .fp-wa-btn, .walkin-btn-primary, .walkin-btn-secondary,
.ws-btn, .newsletter-btn, .product-enquire-btn, .pp-enquire-btn, .pp-whatsapp,
.product-modal-whatsapp, .whatsapp-cta, .empty-state-wa, .home-link, .search-btn,
.product-overlay-btn, .page-header-cta {
    border-radius: var(--es-r-pill) !important;
    transition: transform 0.25s var(--es-ease), box-shadow 0.25s ease,
                background 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
    will-change: transform;
}
.btn {
    background: linear-gradient(180deg, #ff0000, #ff0000 55%, #d90000) !important;
    border: 1px solid rgba(255, 80, 80, 0.5) !important;
    box-shadow: 0 10px 30px -8px rgba(255, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.btn:hover {
    background: linear-gradient(180deg, #ff1a1a, #ff0000 55%, #d90000) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 18px 42px -10px rgba(255, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}
.btn-outline {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.btn-outline:hover {
    border-color: #fff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.6) !important;
}
.btn:active, .btn-outline:active, .fp-wa-btn:active, .ws-btn:active,
.walkin-btn-primary:active, .walkin-btn-secondary:active, .newsletter-btn:active,
.product-enquire-btn:active, .pp-enquire-btn:active, .pp-whatsapp:active,
.nav-cta:active, .whatsapp-cta:active {
    transform: scale(0.965) !important;
}

/* ── SECTION TITLES — animated underline ───────────────────────── */

.section-title { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6); }
.section-title::after {
    background: linear-gradient(90deg, transparent, var(--es-red) 20%, var(--es-red) 80%, transparent) !important;
    height: 3px !important;
    border-radius: 3px;
    box-shadow: 0 0 18px rgba(255, 0, 0, 0.6);
}
.m-motion .section-title.m-reveal::after {
    transform: translateX(-50%) scaleX(0);
    transition: transform 0.9s var(--es-ease) 0.25s;
}
.m-motion .section-title.m-reveal.m-in::after { transform: translateX(-50%) scaleX(1); }

/* ── SCROLL REVEAL (elements tagged by motion.js) ──────────────── */

.m-motion .m-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--es-slow) var(--es-ease), transform var(--es-slow) var(--es-ease);
    transition-delay: var(--d, 0s);
    will-change: transform, opacity;
}
.m-motion .m-reveal.m-in { opacity: 1; transform: none; }

/* Base-style .animate-on-scroll already exists on the homepage —
   keep it working but retime it to the new easing */
.animate-on-scroll { transition-timing-function: var(--es-ease) !important; }

/* ── CARDS — unified treatment ─────────────────────────────────── */

.category-box {
    border-radius: var(--es-r-lg) !important;
    border: 1px solid var(--es-border-strong) !important;
    box-shadow: var(--es-shadow-2);
    transition: transform 0.45s var(--es-ease), border-color 0.35s ease, box-shadow 0.45s ease !important;
}
.category-box:hover {
    transform: translateY(-8px) scale(1.015) !important;
    border-color: var(--es-red-border) !important;
    box-shadow: 0 26px 60px -14px rgba(0, 0, 0, 0.7), 0 10px 42px -10px rgba(255, 0, 0, 0.4) !important;
}
/* light sweep across category tiles */
.category-box::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%);
    transform: translateX(-110%);
    pointer-events: none;
}
.category-box:hover::after { transition: transform 0.7s ease; transform: translateX(110%); }

.cat-count {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--es-border-strong);
    border-radius: var(--es-r-pill);
    padding: 4px 12px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.fp-card, .product-card, .search-product-card, .pp-related-card, .cat-card {
    border-radius: var(--es-r-md) !important;
    border: 1px solid var(--es-border) !important;
    background: linear-gradient(180deg, #141414, #0e0e0e) !important;
    box-shadow: var(--es-shadow-1);
    transition: transform 0.35s var(--es-ease), border-color 0.3s ease, box-shadow 0.35s ease !important;
}
.fp-card:hover, .product-card:hover, .search-product-card:hover,
.pp-related-card:hover, .cat-card:hover {
    transform: translateY(-6px) !important;
    border-color: var(--es-red-border) !important;
    box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.65), 0 8px 36px -10px rgba(255, 0, 0, 0.32) !important;
}

/* product photo zoom on hover (image wells stay light — photos need it) */
.fp-img, .product-image, .search-product-image, .pp-main-image {
    transition: transform 0.6s var(--es-ease) !important;
}
.fp-card:hover .fp-img,
.product-card:hover .product-image,
.search-product-card:hover .search-product-image { transform: scale(1.06); }

.fp-img-wrap, .product-image-wrap { overflow: hidden; }

.fp-cat-tag, .product-category-tag, .pp-category-tag {
    border-radius: var(--es-r-pill) !important;
    background: rgba(0, 0, 0, 0.65) !important;
    border: 1px solid var(--es-border-strong);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 3;
}

/* dynamic grid entrances (JS-rendered product cards animate on insert) */
@keyframes esCardIn {
    from { opacity: 0; transform: translateY(22px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.m-motion .products-grid > .product-card,
.m-motion .search-results-grid > .search-product-card,
.m-motion .pp-related-grid > .pp-related-card {
    animation: esCardIn 0.55s var(--es-ease) backwards;
}
.m-motion .products-grid > :nth-child(1),  .m-motion .search-results-grid > :nth-child(1)  { animation-delay: 0.03s; }
.m-motion .products-grid > :nth-child(2),  .m-motion .search-results-grid > :nth-child(2)  { animation-delay: 0.08s; }
.m-motion .products-grid > :nth-child(3),  .m-motion .search-results-grid > :nth-child(3)  { animation-delay: 0.13s; }
.m-motion .products-grid > :nth-child(4),  .m-motion .search-results-grid > :nth-child(4)  { animation-delay: 0.18s; }
.m-motion .products-grid > :nth-child(5),  .m-motion .search-results-grid > :nth-child(5)  { animation-delay: 0.23s; }
.m-motion .products-grid > :nth-child(6),  .m-motion .search-results-grid > :nth-child(6)  { animation-delay: 0.28s; }
.m-motion .products-grid > :nth-child(7),  .m-motion .search-results-grid > :nth-child(7)  { animation-delay: 0.33s; }
.m-motion .products-grid > :nth-child(8),  .m-motion .search-results-grid > :nth-child(8)  { animation-delay: 0.38s; }
.m-motion .products-grid > :nth-child(9),  .m-motion .search-results-grid > :nth-child(9)  { animation-delay: 0.43s; }
.m-motion .products-grid > :nth-child(10), .m-motion .search-results-grid > :nth-child(10) { animation-delay: 0.48s; }
.m-motion .products-grid > :nth-child(11), .m-motion .search-results-grid > :nth-child(11) { animation-delay: 0.53s; }
.m-motion .products-grid > :nth-child(n+12), .m-motion .search-results-grid > :nth-child(n+12) { animation-delay: 0.56s; }

/* ── TRUST STRIP — glass chips ─────────────────────────────────── */

.trust-strip { border-top: 1px solid var(--es-border) !important; border-bottom: 1px solid var(--es-border) !important; }
.trust-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--es-border);
    border-radius: var(--es-r-md);
    padding: 12px 16px;
    transition: transform 0.3s var(--es-ease), border-color 0.25s ease, background 0.25s ease;
}
.trust-item:hover {
    transform: translateY(-3px);
    border-color: var(--es-red-border);
    background: rgba(255, 0, 0, 0.04);
}
.trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.18), rgba(255, 0, 0, 0.08));
    border: 1px solid var(--es-red-border);
    box-shadow: 0 0 20px -4px rgba(255, 0, 0, 0.35);
}

/* ── FAQ — card accordion ──────────────────────────────────────── */

.faq-item, .faq-item-cat {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--es-border) !important;
    border-radius: var(--es-r-md);
    padding: 0 20px;
    margin-bottom: 12px;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s var(--es-ease);
}
.faq-item:hover, .faq-item-cat:hover { border-color: var(--es-border-strong) !important; }
.faq-item:has(.faq-q.open), .faq-item-cat:has(.faq-q-cat.open) {
    border-color: var(--es-red-border) !important;
    background: rgba(255, 0, 0, 0.035);
}
.faq-q:hover, .faq-q-cat:hover { color: #fff; }
.faq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid var(--es-red-border);
    color: var(--es-red);
    flex-shrink: 0;
    transition: transform 0.35s var(--es-ease), background 0.25s ease, color 0.25s ease;
}
.faq-q.open .faq-icon, .faq-q-cat.open .faq-icon {
    transform: rotate(45deg);
    background: var(--es-red);
    color: #fff;
}
.faq-a, .faq-a-cat { transition: max-height 0.45s var(--es-ease), padding 0.45s var(--es-ease) !important; }

/* ── WALK-IN / HOURS ───────────────────────────────────────────── */

.wh-box {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--es-border) !important;
    border-radius: var(--es-r-md) !important;
    transition: transform 0.3s var(--es-ease), border-color 0.25s ease;
}
.wh-box:hover { transform: translateY(-3px); border-color: var(--es-border-strong) !important; }
.wh-badge { border-radius: var(--es-r-pill) !important; }
.walkin-map, .walkin-map iframe { border-radius: var(--es-r-lg) !important; }
.walkin-map {
    border: 1px solid var(--es-border-strong) !important;
    box-shadow: var(--es-shadow-3);
    overflow: hidden;
}
.walkin-map-badge {
    border-radius: var(--es-r-md) !important;
    background: rgba(7, 7, 7, 0.8) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--es-border-strong);
}

/* ── WHOLESALE ─────────────────────────────────────────────────── */

.ws-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)) !important;
    border: 1px solid var(--es-border-strong) !important;
    border-radius: var(--es-r-lg) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: var(--es-shadow-3);
}
.ws-input {
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--es-border-strong) !important;
    border-radius: var(--es-r-sm) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.ws-input:focus {
    border-color: var(--es-red) !important;
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.18) !important;
    outline: none;
}
.ws-btn { box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.35); }
.ws-btn:hover { transform: translateY(-3px); }
.ws-stat-num { text-shadow: 0 0 26px rgba(255, 0, 0, 0.4); }

/* ── CONTACT / NEWSLETTER ──────────────────────────────────────── */

.contact-section {
    background:
        radial-gradient(80% 120% at 50% 0%, rgba(255, 60, 60, 0.35), transparent 60%),
        linear-gradient(135deg, #ff0000 0%, #990000 100%) !important;
}
.contact-box {
    background: rgba(0, 0, 0, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: var(--es-r-md) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform 0.3s var(--es-ease), background 0.25s ease, border-color 0.25s ease !important;
}
.contact-box:hover {
    transform: translateY(-5px);
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.newsletter-section {
    background:
        radial-gradient(70% 130% at 50% 100%, rgba(120, 0, 0, 0.55), transparent 60%),
        linear-gradient(180deg, #ff0000, #cc0000) !important;
}
.newsletter-input {
    border-radius: var(--es-r-pill) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    background: rgba(0, 0, 0, 0.25) !important;
    color: #fff !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.newsletter-input::placeholder { color: rgba(255, 255, 255, 0.75); }
.newsletter-input:focus { border-color: #fff !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); outline: none; }
.newsletter-btn { background: #0a0a0a !important; color: #fff !important; border: 1px solid #000 !important; }
.newsletter-btn:hover { background: #fff !important; color: #0a0a0a !important; transform: translateY(-2px); }

/* ── FOOTER ────────────────────────────────────────────────────── */

.footer {
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5)) !important;
    border-top: 1px solid var(--es-border) !important;
    position: relative;
}
.footer::before {
    content: '';
    position: absolute;
    top: -1px; left: 50%;
    transform: translateX(-50%);
    width: min(480px, 70vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--es-red), transparent);
    box-shadow: 0 0 16px rgba(255, 0, 0, 0.55);
}
.footer-section > a {
    transition: color 0.2s ease, transform 0.25s var(--es-ease);
    display: inline-block;
    width: fit-content;
}
.footer-section > a:hover { color: var(--es-red) !important; transform: translateX(5px); }
.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--es-border-strong);
    background: rgba(255, 255, 255, 0.04);
    transition: transform 0.25s var(--es-ease), background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.social-links a:hover {
    background: var(--es-red);
    border-color: var(--es-red);
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 10px 24px -8px rgba(255, 0, 0, 0.6);
}

/* ── SEARCH OVERLAY + PRODUCT MODAL — glass & spring ───────────── */

.search-overlay {
    background: rgba(5, 5, 5, 0.82) !important;
    -webkit-backdrop-filter: blur(22px) saturate(130%) !important;
    backdrop-filter: blur(22px) saturate(130%) !important;
}
.search-input {
    border-radius: var(--es-r-md) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.search-input:focus { box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.2) !important; }
.search-filter {
    border-radius: var(--es-r-pill) !important;
    border: 1px solid var(--es-border-strong) !important;
    transition: all 0.25s var(--es-ease) !important;
}
.search-filter:hover { transform: translateY(-2px); border-color: var(--es-red-border) !important; }
.search-filter.active {
    background: var(--es-red) !important;
    border-color: var(--es-red) !important;
    box-shadow: 0 6px 20px -6px rgba(255, 0, 0, 0.6);
}
.search-product-image { border-radius: var(--es-r-md) var(--es-r-md) 0 0; }

.product-modal {
    background: rgba(5, 5, 5, 0.8) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
}
.product-modal-content {
    border-radius: var(--es-r-lg) !important;
    border: 1px solid var(--es-border-strong) !important;
    box-shadow: var(--es-shadow-3), 0 0 80px -20px rgba(255, 0, 0, 0.25) !important;
    transform: scale(0.96) translateY(12px);
    opacity: 0;
    transition: transform 0.4s var(--es-ease), opacity 0.3s ease;
}
.product-modal.active .product-modal-content { transform: scale(1) translateY(0); opacity: 1; }
.product-modal-main-image { border-radius: var(--es-r-md) !important; border: 1px solid var(--es-border-strong) !important; }
.product-modal-thumb { border-radius: var(--es-r-sm) !important; transition: transform 0.2s var(--es-ease), border-color 0.2s ease !important; }
.product-modal-thumb:hover { transform: translateY(-2px); }
.product-option {
    border-radius: var(--es-r-pill) !important;
    transition: all 0.2s var(--es-ease) !important;
}
.product-option:hover { transform: translateY(-2px); border-color: var(--es-red) !important; }
.product-option.selected {
    background: var(--es-red) !important;
    border-color: var(--es-red) !important;
    box-shadow: 0 6px 18px -6px rgba(255, 0, 0, 0.6);
}

/* ── CATEGORY PAGES — product page view, filters, misc ─────────── */

.filter-btn {
    border-radius: var(--es-r-pill) !important;
    transition: all 0.25s var(--es-ease) !important;
}
.filter-btn:hover { transform: translateY(-2px); }
.filter-btn.active { box-shadow: 0 6px 20px -6px rgba(255, 0, 0, 0.55); }
.sort-select {
    border-radius: var(--es-r-pill) !important;
    border: 1px solid var(--es-border-strong) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}
.usb-input {
    border-radius: var(--es-r-pill) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.usb-input:focus { box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.18) !important; }

.pp-main-image { border-radius: var(--es-r-lg) !important; border: 1px solid var(--es-border-strong) !important; }
.pp-thumb { border-radius: var(--es-r-sm) !important; transition: transform 0.2s var(--es-ease), border-color 0.2s ease !important; }
.pp-thumb:hover { transform: translateY(-2px); }
.pp-option { border-radius: var(--es-r-pill) !important; }
.pp-share-btn {
    border-radius: 50% !important;
    transition: transform 0.25s var(--es-ease), background 0.25s ease !important;
}
.pp-share-btn:hover { transform: translateY(-3px) scale(1.06); }

.skeleton-image, .skeleton-text { border-radius: var(--es-r-sm); }
.toast {
    border-radius: var(--es-r-pill) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--es-shadow-2);
}
.breadcrumbs a:hover { color: var(--es-red) !important; }

.page-header-badge { border-radius: var(--es-r-pill) !important; }
.empty-state { border-radius: var(--es-r-lg); border: 1px dashed var(--es-border-strong); }

/* fullscreen image viewer */
.fullscreen-viewer {
    background: rgba(3, 3, 3, 0.94) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.fullscreen-close, .fullscreen-prev, .fullscreen-next {
    transition: transform 0.2s var(--es-ease), color 0.2s ease, background 0.2s ease !important;
}
.fullscreen-close:hover { transform: rotate(90deg); }
.fullscreen-prev:hover, .fullscreen-next:hover { transform: scale(1.12); }

/* ── FLOATING WHATSAPP — pulse ring ────────────────────────────── */

.float-wa {
    box-shadow: 0 12px 32px -8px rgba(37, 211, 102, 0.55) !important;
    transition: transform 0.25s var(--es-ease), box-shadow 0.25s ease !important;
}
.float-wa:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 18px 42px -10px rgba(37, 211, 102, 0.7) !important; }
@keyframes esPulse {
    0%   { transform: scale(1); opacity: 0.55; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}
.m-motion .float-wa::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid #25D366;
    animation: esPulse 2.4s var(--es-ease) infinite;
    pointer-events: none;
}
.float-wa { position: fixed; }

/* ── 404 PAGE ──────────────────────────────────────────────────── */

.error-code { text-shadow: 0 0 60px rgba(255, 0, 0, 0.5); }
.cat-card:hover { transform: translateY(-5px) !important; }
.search-form .search-input { border-radius: var(--es-r-pill) !important; }

/* ── INJECTED UI (motion.js): progress bar + back-to-top ───────── */

#esProgress {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--es-red-dark), var(--es-red));
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.6);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 10001;
    pointer-events: none;
}
#esTop {
    position: fixed;
    right: 30px;
    bottom: 104px;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--es-red) calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.14) 0);
    padding: 2px;
    opacity: 0;
    transform: translateY(14px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.35s var(--es-ease);
}
#esTop.show { opacity: 1; transform: none; pointer-events: auto; }
#esTop:hover { transform: translateY(-3px); }
#esTop .es-top-inner {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: #101010;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
#esTop svg { width: 16px; height: 16px; }
@media (max-width: 600px) { #esTop { right: 22px; bottom: 96px; width: 42px; height: 42px; } }

/* ── ACCESSIBILITY: reduced motion kills everything ────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .hero-content, .scroll-indicator { opacity: 1 !important; transform: none !important; animation: none !important; }
    .m-reveal { opacity: 1 !important; transform: none !important; }
    #esProgress, .m-motion .float-wa::after { display: none !important; }
}