/* Shop appearance matches the components in accessories.php. */
:root {
            --neon: #00d2ff;
            --muted: #a8bedf;
            --header-height: 152px;
        }

        html,
        body {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            position: fixed;
            background: #050811;
        }

        body {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            font-family: 'Roboto', sans-serif;
            color: #e6f1ff;
            font-size: 18px;
            background-image: 
                radial-gradient(circle at 50% 150px, rgba(14, 165, 233, 0.45) 0%, rgba(56, 189, 248, 0.15) 35%, transparent 70%),
                linear-gradient(90deg, rgba(56, 189, 248, 0.12) 1px, transparent 1px),
                linear-gradient(0deg, rgba(56, 189, 248, 0.12) 1px, transparent 1px);
            background-size: 100% 100%, 40px 40px, 40px 40px;
            background-attachment: fixed;
        }

        .main-scroller{
            height: 100%;
            width: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
            display: flex;
            flex-direction: column;
        }
        .main-scroller::-webkit-scrollbar{
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            -webkit-appearance: none;
        }

        .page-wrapper {
            flex: 1 0 auto;
            padding-top: 0;
        }

        .footer-wrapper {
            flex-shrink: 0;
        }

        .container {
            width: 100%;
            max-width: 1400px;
            margin: 30px auto;
            padding: 0 16px;
            box-sizing: border-box;
            position: relative;
            z-index: 3;
        }

        .hero-slideshow {
            position: relative;
            width: 100%;
            min-height: 400px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0;
            margin-top: 0;
            -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
            transition: filter 0.3s ease;
        }

        .hero-slideshow .slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            z-index: 1;
            transition: opacity 2000ms ease;
            will-change: opacity, transform;
        }

        .hero-slideshow .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            display: block;
            transform-origin: center center;
            transition: transform 6000ms linear;
        }

        .hero-slideshow .slide.active {
            opacity: 1;
            z-index: 2;
        }

        .hero-slideshow .slide.active img {
            transform: scale(1.08);
        }

        .hero-slideshow::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 250px;
            background: linear-gradient(to bottom, transparent, #050811);
            z-index: 2;
        }

        .hero-marquee-bar {
            position: relative;
            z-index: 2147483647;
            width: 100%;
            height: 0;
            overflow: visible;
            white-space: nowrap;
            box-sizing: border-box;
            pointer-events: none;
            transform: translateY(-30px);
        }

        .hero-marquee-track {
            display: inline-flex;
            white-space: nowrap;
            animation: marquee 35s linear infinite;
        }

        .hero-marquee-track span {
            color: var(--neon);
            font-family: 'Roboto', sans-serif;
            font-size: 18px;
            font-weight: 700;
            line-height: 1.4;
            text-shadow: 0 2px 8px rgba(0,0,0,0.8);
            padding-right: 60px;
            display: inline-block;
        }

        @keyframes marquee {
            0% {
                transform: translateX(0%);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        .shop-menu-wrapper {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 16px;
            margin-top: 10mm;
            margin-bottom: 0;
            width: 100%;
            box-sizing: border-box;
            z-index: 3;
        }
        .shop-menu {
            display: flex;
            gap: 12px;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }
        .shop-menu a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 12px 6px;
            border-radius: 10px;
            background: transparent;
            color: var(--neon);
            font-weight: 700;
            text-decoration: none;
            text-align: center;
            box-shadow: none;
            border: 1px solid #ff0000;
            font-size: 13px;
            font-family: 'Roboto', sans-serif;
            cursor: pointer;
            box-sizing: border-box;
            white-space: nowrap;
            flex: 1 1 0;
            min-width: 0;
            transition: background 0.2s, color 0.2s;
        }
        .shop-menu a:hover, .shop-menu a.active {
            background: rgba(255, 0, 0, 0.15) !important;
            color: #fff !important;
        }

        .shop-mobile-trigger {
            display: none;
        }
        .shop-drawer {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.95);
            width: 290px;
            height: auto;
            max-height: calc(100vh - 40px);
            background: #071028;
            z-index: 100005;
            padding: 40px 20px;
            box-sizing: border-box;
            border: 2px solid #ff0000;
            border-radius: 10px;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: 0.3s ease;
            overflow-y: auto;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }
        .shop-drawer::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }
        .shop-drawer.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translate(-50%, -50%) scale(1);
        }
        .shop-drawer-menu { display: flex; flex-direction: column; gap: 14px; }
        .shop-drawer-menu a {
            padding: 12px; border-radius: 6px; background: transparent; color: var(--neon);
            border: 1px solid #ff0000; text-decoration: none; font-weight: 700; text-align: center;
        }
        .shop-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100004; display: none; }
        .shop-drawer-overlay.active { display: block; }

        .grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
            justify-content: center;
            max-width: 1400px;
            margin: 20px auto;
            padding: 0;
            box-sizing: border-box;
        }

        .card-link {
            display: block;
            text-decoration: none;
            color: inherit;
        }

        .card {
            background: #071028;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            padding: 14px;
            height: 320px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: stretch;
            box-sizing: border-box;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .card:hover {
            transform: translateY(-4px);
            border-color: var(--neon);
            box-shadow: 0 8px 24px rgba(0, 210, 255, 0.15);
        }

        .card-media {
            width: 100%;
            height: 190px;
            overflow: hidden;
            border-radius: 6px;
            background: #050a1a;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }

        .card h3 {
            margin: 0;
            color: var(--neon);
            font-size: 15px;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .card p {
            margin: 0;
            color: var(--muted);
            font-size: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.3;
        }

        .empty {
            padding: 18px;
            border-radius: 8px;
            background: rgba(6, 11, 31, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.03);
            color: #dfeeff;
            text-align: center;
        }

        @media (max-width: 1200px) {
            .grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
        }

        @media (max-width: 900px) {
            .shop-menu-wrapper { display: none !important; }
            .shop-mobile-trigger {
                display: inline-flex; width: calc(100% - 32px); margin: 20px auto 10px auto;
                background: #07122b; color: var(--neon); border: 2px solid #ff0000;
                padding: 14px; border-radius: 10px; font-weight: 800; font-size: 15px;
                text-transform: uppercase; cursor: pointer; justify-content: center; align-items: center; gap: 10px;
            }
            .hero-slideshow { min-height: 360px; }
            .hero-marquee-track span { font-size: 15px; padding-right: 40px; }
            .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }

        @media (max-width: 800px) {
            .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }

        @media (max-width: 600px) {
            .grid {
                grid-template-columns: repeat(1, 1fr);
            }

            .hero-slideshow { min-height: 300px; }
            .hero-marquee-track span { font-size: 14px; padding-right: 30px; }
        }
.equipment-search label{display:block;font-size:14px;color:#9fc5ff;margin-bottom:8px}.equipment-search>div{display:flex;gap:10px;flex-wrap:wrap}.equipment-search input{flex:1;min-width:0;padding:12px 14px;border:1px solid #38bdf84d;border-radius:8px;background:#071028;color:#e6f1ff;font-size:16px}.equipment-search button,.equipment-search a{padding:12px 18px;background:#1b63ff;border:0;border-radius:8px;color:white;font-size:15px;cursor:pointer}.equipment-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:24px 0}.equipment-product{display:flex;flex-direction:column;min-width:0;background:#071028;border:1px solid #38bdf838;border-radius:10px;overflow:hidden}.equipment-product:hover{border-color:#38bdf8}.equipment-product-image{position:relative;height:190px;padding:0;background:transparent}.equipment-product-image img{display:block;width:100%;height:100%;object-fit:contain}.equipment-product-body{display:flex;flex-direction:column;gap:8px;padding:14px;flex:1}.equipment-product h3{color:#00d2ff;font-size:16px;line-height:1.4;margin:0;overflow-wrap:anywhere}.equipment-meta{font-size:13px;color:#9fc5ff;overflow-wrap:anywhere}.equipment-stock{font-size:14px;color:#86efac}.equipment-price{margin-top:auto;font-size:20px;font-weight:800}.equipment-view{font-size:14px;color:#9fc5ff}.equipment-empty{padding:24px;border:1px solid #38bdf838;border-radius:10px;background:#071028}.equipment-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:24px 0;color:#9fc5ff;font-size:14px}.equipment-pagination>div{display:flex;gap:8px;flex-wrap:wrap}.equipment-pagination a,.equipment-pagination .current{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:8px 12px;border:1px solid #38bdf84d;border-radius:8px;background:#071028}.equipment-pagination .current{background:#1b63ff;color:#fff}.equipment-main a:focus-visible,.equipment-main button:focus-visible,.equipment-main input:focus-visible{outline:3px solid #38bdf8;outline-offset:3px}

.equipment-category .card-media svg{width:48px;height:48px;color:var(--neon)}
.equipment-category:focus-visible .card{outline:3px solid var(--neon);outline-offset:3px}
.equipment-breadcrumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:24px;font-size:14px;color:var(--muted)}
.equipment-breadcrumb a{color:var(--neon);text-decoration:none}
.equipment-main h1{margin:0 0 24px;color:var(--neon);font-size:24px}
.equipment-products{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.equipment-product{border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:14px;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.equipment-product:hover{transform:translateY(-4px);border-color:var(--neon);box-shadow:0 8px 24px rgba(0,210,255,.15)}
.equipment-product-image{height:190px;border-radius:6px;overflow:hidden}
.equipment-product-body{padding:14px 0 0}
.equipment-price{color:var(--neon);font-size:18px}
.equipment-search input{border-color:rgba(255,255,255,.08)}
.equipment-search button,.equipment-search a{border:1px solid red;background:transparent;color:var(--neon);font-family:inherit;font-weight:700;text-decoration:none}
.equipment-empty{padding:18px;border:1px solid rgba(255,255,255,.03);border-radius:8px;background:rgba(6,11,31,.8);color:#dfeeff;text-align:center;font-size:16px}
.shop-drawer-close{display:block;margin:0 auto 16px;padding:10px 14px;border:1px solid red;border-radius:6px;background:transparent;color:var(--neon);font:700 14px Roboto,Arial,sans-serif;cursor:pointer}
@media(max-width:900px){.equipment-products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.equipment-products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.equipment-products{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.hero-marquee-track{animation:none}.shop-drawer,.card,.equipment-product{transition:none}}