/* ─── VARIABLES ─────────────────────────────────────────── */
      :root {
        --red: #ad0000;
        --red-hover: #8a0000;
        --red-light: rgba(173, 0, 0, 0.08);
        --white: #ffffff;
        --off-white: #f7f7f5;
        --gray-50: #f5f5f5;
        --gray-100: #ebebeb;
        --gray-200: #d9d9d9;
        --gray-400: #9c9c9c;
        --gray-600: #5a5a5a;
        --gray-800: #1c1c1c;
        --black: #0a0a0a;
        --font-display: "Bebas Neue", sans-serif;
        --font-body: "DM Sans", sans-serif;
        --nav-h: 64px;
        --cat-h: 44px;
        --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        --shadow-sm:
          0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
        --shadow-md:
          0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
        --shadow-lg:
          0 12px 40px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08);
        --shadow-red: 0 4px 20px rgba(173, 0, 0, 0.3);
        --sidebar-w: 260px;
      }

      /* ─── PAGE LOADER ─────────────────────────────────────────── */
      #pageLoader{position:fixed;inset:0;background:#1c1c1c;display:flex;align-items:center;justify-content:center;z-index:99999;overflow:hidden;transition:transform .7s cubic-bezier(.76,0,.24,1)}
      #pageLoader.wl-exit{transform:translateY(-100%)}
      #pageLoader.hidden{visibility:hidden;pointer-events:none}
      .bb-noanim #pageLoader{display:none!important}
      #dataSpinner{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9998;background:rgba(255,255,255,0.92);pointer-events:none}
      .ds-ring{width:44px;height:44px;border:3px solid rgba(173,0,0,0.15);border-top-color:#ad0000;border-radius:50%;animation:ds-spin .75s linear infinite}
      @keyframes ds-spin{to{transform:rotate(360deg)}}
      .wl-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(140,0,0,.28) 0%,rgba(30,0,0,.18) 45%,transparent 70%);animation:wlBgPulse 3s ease-in-out infinite}
      @keyframes wlBgPulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
      .wl-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(173,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(173,0,0,.05) 1px,transparent 1px);background-size:50px 50px;animation:wlGridFade 1s ease .1s both}
      @keyframes wlGridFade{0%{opacity:0}100%{opacity:1}}
      .wl-rings{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
      .wl-ring{position:absolute;border-radius:50%;border:1px solid rgba(173,0,0,.5);left:50%;top:50%;transform:translate(-50%,-50%) scale(0);animation:wlRingExpand 2.2s ease-out infinite}
      .wl-ring:nth-child(1){width:180px;height:180px;animation-delay:.4s}
      .wl-ring:nth-child(2){width:300px;height:300px;animation-delay:.9s;border-color:rgba(173,0,0,.3)}
      .wl-ring:nth-child(3){width:440px;height:440px;animation-delay:1.4s;border-color:rgba(173,0,0,.15)}
      @keyframes wlRingExpand{0%{transform:translate(-50%,-50%) scale(0);opacity:1}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
      .wl-flares{position:absolute;inset:0;overflow:hidden;pointer-events:none}
      .wl-flare{position:absolute;top:50%;left:50%;height:1px;width:0;background:linear-gradient(90deg,transparent,rgba(200,0,0,.7),rgba(255,80,80,.9),rgba(200,0,0,.7),transparent);transform-origin:left center}
      .wl-flare:nth-child(1){transform:rotate(-38deg) translateX(-500px);animation:wlFlareIn .7s ease .35s both}
      .wl-flare:nth-child(2){transform:rotate(38deg) translateX(-500px);animation:wlFlareIn .7s ease .45s both}
      .wl-flare:nth-child(3){transform:rotate(-18deg) translateX(-500px);animation:wlFlareIn .5s ease .5s both;opacity:.5}
      .wl-flare:nth-child(4){transform:rotate(18deg) translateX(-500px);animation:wlFlareIn .5s ease .55s both;opacity:.5}
      @keyframes wlFlareIn{0%{width:0;opacity:0}40%{opacity:1}100%{width:700px;opacity:0}}
      .wl-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
      .wl-p{position:absolute;border-radius:50%;background:#ff3333;animation:wlParticleUp linear infinite both}
      .wl-p:nth-child(1){left:8%;bottom:-8px;width:3px;height:3px;animation-duration:3.2s;animation-delay:.8s}
      .wl-p:nth-child(2){left:18%;bottom:-8px;width:2px;height:2px;opacity:.6;animation-duration:2.8s;animation-delay:1.3s}
      .wl-p:nth-child(3){left:28%;bottom:-8px;width:3px;height:3px;animation-duration:3.5s;animation-delay:.5s}
      .wl-p:nth-child(4){left:42%;bottom:-8px;width:2px;height:2px;opacity:.8;animation-duration:2.5s;animation-delay:.3s}
      .wl-p:nth-child(5){left:52%;bottom:-8px;width:2px;height:2px;animation-duration:4s;animation-delay:1.6s}
      .wl-p:nth-child(6){left:63%;bottom:-8px;width:2px;height:5px;border-radius:1px;animation-duration:3s;animation-delay:.7s}
      .wl-p:nth-child(7){left:73%;bottom:-8px;width:2px;height:2px;opacity:.5;animation-duration:2.9s;animation-delay:1.1s}
      .wl-p:nth-child(8){left:83%;bottom:-8px;width:3px;height:3px;animation-duration:3.3s;animation-delay:.9s}
      .wl-p:nth-child(9){left:92%;bottom:-8px;width:2px;height:2px;animation-duration:2.7s;animation-delay:1.4s}
      .wl-p:nth-child(10){left:5%;bottom:-8px;width:2px;height:2px;animation-duration:3.8s;animation-delay:.6s}
      .wl-p:nth-child(11){left:37%;bottom:-8px;width:4px;height:4px;animation-duration:2.6s;animation-delay:1.8s;background:#ff6666}
      .wl-p:nth-child(12){left:70%;bottom:-8px;width:2px;height:2px;animation-duration:3.6s;animation-delay:.4s}
      @keyframes wlParticleUp{0%{transform:translateY(0) scale(1);opacity:1}80%{opacity:.8}100%{transform:translateY(-100vh) scale(.3);opacity:0}}
      .wl-body{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;z-index:1}
      .wl-logo-wrap{position:relative;overflow:hidden;animation:wlLogoBurst .75s cubic-bezier(.34,1.56,.64,1) .3s both}
      @keyframes wlLogoBurst{0%{opacity:0;transform:scale(0) rotate(-8deg);filter:brightness(6) blur(10px)}55%{filter:brightness(1.8) blur(0)}80%{transform:scale(1.07) rotate(.5deg)}100%{opacity:1;transform:scale(1) rotate(0);filter:brightness(1)}}
      .wl-logo{display:block;width:220px;height:auto;filter:drop-shadow(0 0 25px rgba(173,0,0,.55)) drop-shadow(0 0 55px rgba(173,0,0,.25))}
      .wl-logo-glow{position:absolute;inset:-25px;background:radial-gradient(ellipse at center,rgba(173,0,0,.45) 0%,transparent 65%);animation:wlGlowPulse 1.8s ease-in-out 1s infinite;pointer-events:none;z-index:-1}
      @keyframes wlGlowPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
      .wl-shine{position:absolute;top:-10%;left:-80%;width:40%;height:120%;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);transform:skewX(-20deg);animation:wlShine .55s ease-in-out 1s both;pointer-events:none}
      .wl-shine2{position:absolute;top:-10%;left:-80%;width:20%;height:120%;background:linear-gradient(105deg,transparent 20%,rgba(255,180,180,.3) 50%,transparent 80%);transform:skewX(-20deg);animation:wlShine .4s ease-in-out 1.4s both;pointer-events:none}
      @keyframes wlShine{0%{left:-80%;opacity:0}15%{opacity:1}100%{left:160%;opacity:.3}}
      .wl-line{width:0;height:2px;background:linear-gradient(90deg,transparent,#ad0000,#ff3333,#ff6666,#ff3333,#ad0000,transparent);box-shadow:0 0 12px rgba(255,51,51,.9),0 0 32px rgba(173,0,0,.6),0 0 65px rgba(173,0,0,.3);animation:wlLineGrow .5s ease .9s both}
      @keyframes wlLineGrow{0%{width:0;opacity:0}100%{width:220px;opacity:1}}
      .wl-tagline{display:flex;align-items:center;gap:14px;font-family:"Bebas Neue",sans-serif;font-size:14px;letter-spacing:.35em;color:rgba(255,255,255,.75)}
      .wl-word{display:inline-block;opacity:0;animation:wlWordIn .45s cubic-bezier(.34,1.56,.64,1) both}
      .wl-word:nth-child(1){animation-delay:1.1s}
      .wl-word:nth-child(2){animation-delay:1s;color:#ad0000}
      .wl-word:nth-child(3){animation-delay:1.2s}
      .wl-word:nth-child(4){animation-delay:1.1s;color:#ad0000}
      .wl-word:nth-child(5){animation-delay:1.3s}
      @keyframes wlWordIn{0%{opacity:0;transform:translateY(14px) scale(.75)}100%{opacity:1;transform:translateY(0) scale(1)}}

      /* ─── RESET ─────────────────────────────────────────────── */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        font-family: var(--font-body);
        color: var(--black);
        background: var(--white);
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }
      img {
        display: block;
        max-width: 100%;
      }
      a {
        text-decoration: none;
        color: inherit;
      }
      button {
        cursor: pointer;
        border: none;
        background: none;
        font-family: inherit;
      }
      ul {
        list-style: none;
      }
      input,
      select,
      textarea {
        font-family: inherit;
      }

      /* ─── UTILITY ───────────────────────────────────────────── */
      .container {
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 24px;
      }

      /* ─── ANIMATIONS ────────────────────────────────────────── */
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes slideDown {
        from {
          opacity: 0;
          transform: translateY(-8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes pulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.15);
        }
      }
      @keyframes marqueeTick {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
      }
      @keyframes lightning {
        0%,100% { opacity: 1; text-shadow: 0 0 8px #fff, 0 0 20px #fff; }
        10%      { opacity: 0.15; text-shadow: none; }
        20%      { opacity: 1; text-shadow: 0 0 12px #fff, 0 0 30px #ffffffaa; }
        30%      { opacity: 0.15; text-shadow: none; }
        40%,90%  { opacity: 1; text-shadow: 0 0 8px #fff, 0 0 20px #fff; }
      }
      .marquee-item { animation: lightning 6s ease-in-out infinite; }
      @keyframes shimmer {
        0% {
          background-position: -600px 0;
        }
        100% {
          background-position: 600px 0;
        }
      }
      @keyframes wa-float {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
      }
      @keyframes wa-pulse {
        0% {
          box-shadow:
            0 4px 16px rgba(37, 211, 102, 0.4),
            0 0 0 0 rgba(37, 211, 102, 0.5);
        }
        70% {
          box-shadow:
            0 4px 16px rgba(37, 211, 102, 0.4),
            0 0 0 14px rgba(37, 211, 102, 0);
        }
        100% {
          box-shadow:
            0 4px 16px rgba(37, 211, 102, 0.4),
            0 0 0 0 rgba(37, 211, 102, 0);
        }
      }

      /* ─── MARQUEE ───────────────────────────────────────────── */
      .marquee-bar {
        background: var(--red);
        color: var(--white);
        overflow: hidden;
        height: 36px;
        display: flex;
        align-items: center;
      }
      .marquee-track {
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        width: 100%;
      }
      .marquee-item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.8px;
        padding: 0 32px;
        text-transform: uppercase;
      }
      .marquee-sep {
        opacity: 0.5;
      }

      /* ─── HEADER ────────────────────────────────────────────── */
      #site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: var(--white);
        border-bottom: 1px solid var(--gray-100);
        transition: box-shadow var(--transition);
      }
      #site-header.scrolled {
        box-shadow: var(--shadow-md);
      }

      .top-nav {
        height: var(--nav-h);
        display: flex;
        align-items: center;
        gap: 20px;
      }

      .logo {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
      }
      .logo img {
        height: auto;
        width: auto;
        max-width: 140px;
        object-fit: contain;
      }

      .search-wrap {
        flex: 1;
        max-width: 480px;
        margin: 0 auto;
        position: relative;
      }
      .search-wrap input {
        width: 100%;
        height: 40px;
        padding: 0 44px 0 16px;
        border: 1.5px solid var(--gray-200);
        border-radius: 10px;
        background: var(--gray-50);
        font-size: 14px;
        color: var(--black);
        transition: border-color var(--transition), background var(--transition);
        outline: none;
      }
      .search-wrap input::placeholder { color: var(--gray-400); }
      .search-wrap input:focus {
        border-color: var(--red);
        background: var(--white);
        box-shadow: 0 0 0 3px rgba(173,0,0,0.1);
      }
      .search-wrap .search-btn {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        color: var(--gray-400);
        padding: 4px;
        display: flex;
        align-items: center;
      }
      .search-wrap .search-btn:hover { color: var(--red); }
      .search-dropdown {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        background: var(--white);
        border: 1.5px solid var(--gray-200);
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.12);
        z-index: 9999;
        max-height: 360px;
        overflow-y: auto;
      }
      .search-dropdown.open { display: block; }
      .search-drop-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        cursor: pointer;
        transition: background var(--transition);
      }
      .search-drop-item:hover { background: var(--gray-50); }
      .search-drop-thumb {
        width: 44px;
        height: 44px;
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
        background: var(--gray-100);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .search-drop-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .search-drop-info { flex: 1; min-width: 0; }
      .search-drop-brand {
        font-size: 11px;
        color: var(--gray-400);
        margin: 0 0 2px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .search-drop-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--gray-800);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .search-drop-price {
        font-size: 13px;
        font-weight: 700;
        color: var(--red);
        flex-shrink: 0;
      }
      .search-drop-empty {
        padding: 20px;
        text-align: center;
        font-size: 13px;
        color: var(--gray-400);
      }

      .nav-right {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
      }
      .nav-link {
        display: flex;
        align-items: center;
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 500;
        color: var(--gray-600);
        border-radius: 6px;
        transition:
          color var(--transition),
          background var(--transition),
          transform var(--transition);
      }
      .nav-link:hover {
        color: var(--black);
        background: var(--gray-50);
        transform: translateY(-1px);
      }
      .nav-link.active {
        color: var(--red);
        border: 1.5px solid var(--red);
        background: var(--red-light);
      }
      .nav-link.active:hover {
        background: rgba(173, 0, 0, 0.13);
        transform: translateY(-1px);
      }

      .lang-switch {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-left: 4px;
      }
      .lang-btn {
        padding: 4px 8px;
        font-size: 12px;
        font-weight: 600;
        color: var(--gray-400);
        border-radius: 4px;
        transition:
          color var(--transition),
          background var(--transition);
        letter-spacing: 0.5px;
      }
      .lang-btn:hover {
        color: var(--black);
        background: var(--gray-50);
      }
      .lang-btn.active {
        color: var(--white);
        background: var(--red);
      }

      .cart-btn {
        position: relative;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 8px;
        border-radius: 8px;
        color: var(--black);
        transition:
          background var(--transition),
          color var(--transition);
      }
      .cart-btn:hover {
        background: var(--gray-50);
        color: var(--red);
      }
      .cart-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        min-width: 18px;
        height: 18px;
        background: var(--red);
        color: var(--white);
        font-size: 10px;
        font-weight: 700;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        animation: pulse 2s ease-in-out infinite;
      }

      .hamburger {
        display: none;
        width: 40px;
        height: 40px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border-radius: 8px;
        transition: background var(--transition);
      }
      .hamburger:hover {
        background: var(--gray-50);
      }
      .hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--black);
        border-radius: 2px;
        transition:
          transform var(--transition),
          opacity var(--transition);
      }
      .hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .hamburger.open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
      }
      .hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      /* ─── CATEGORY NAV ──────────────────────────────────────── */
      .cat-nav {
        background: var(--white);
        border-bottom: 1px solid var(--gray-100);
        position: relative;
        z-index: 999;
      }
      .cat-nav-inner {
        display: flex;
        align-items: center;
        height: var(--cat-h);
        gap: 2px;
        overflow: visible;
      }
      .cat-item {
        position: relative;
      }
      .cat-link {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 0 14px;
        height: var(--cat-h);
        font-size: 13px;
        font-weight: 600;
        color: var(--gray-600);
        white-space: nowrap;
        transition: color var(--transition);
        position: relative;
      }
      .cat-link::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        right: 50%;
        height: 2px;
        background: var(--red);
        transition:
          left var(--transition),
          right var(--transition);
      }
      .cat-item:hover .cat-link,
      .cat-link:hover {
        color: var(--red);
      }
      .cat-item:hover .cat-link::after {
        left: 14px;
        right: 14px;
      }
      .cat-link svg {
        width: 12px;
        height: 12px;
        transition: transform var(--transition);
      }
      .cat-item:hover .cat-link svg {
        transform: rotate(180deg);
      }

      .dropdown {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        background: var(--white);
        border: 1px solid var(--gray-100);
        border-radius: 10px;
        box-shadow: var(--shadow-lg);
        min-width: 200px;
        padding: 8px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-6px);
        transition:
          opacity var(--transition),
          transform var(--transition),
          visibility var(--transition);
        z-index: 1001;
      }
      .dropdown::before {
        content: '';
        position: absolute;
        top: -12px;
        left: 0;
        right: 0;
        height: 12px;
      }
      .cat-item:hover .dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        transform: translateY(0);
      }
      .dropdown a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        font-size: 13px;
        font-weight: 500;
        color: var(--gray-600);
        border-radius: 7px;
        transition:
          background var(--transition),
          color var(--transition),
          padding-left var(--transition);
      }
      .dropdown a:hover {
        background: var(--red-light);
        color: var(--red);
        padding-left: 18px;
      }
      .dropdown a::before {
        content: "→";
        font-size: 11px;
        opacity: 0;
        transition: opacity var(--transition);
      }
      .dropdown a:hover::before {
        opacity: 1;
      }

      /* ─── MOBILE MENU ───────────────────────────────────────── */
      .mobile-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(300px, 85vw);
        background: var(--white);
        z-index: 1100;
        padding: 20px 24px 40px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
      }
      .mobile-menu.open {
        transform: translateX(0);
      }
      .mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1099;
      }
      .mobile-overlay.open {
        display: block;
      }
      .mobile-menu .m-link {
        display: flex;
        align-items: center;
        padding: 14px 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--black);
        border-bottom: 1px solid var(--gray-100);
      }
      .mobile-menu .m-link:hover {
        color: var(--red);
        transform: translateX(3px);
      }
      .mobile-menu .m-link.active {
        color: var(--red);
      }
      .mobile-lang {
        display: flex;
        gap: 8px;
        margin-top: 24px;
      }

      .m-cat-item {
        border-bottom: 1px solid var(--gray-100);
      }
      .m-cat-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--black);
        background: none;
        border: none;
        cursor: pointer;
        font-family: var(--font-body);
        transition: color var(--transition);
      }
      .m-cat-toggle:hover {
        color: var(--red);
      }
      .m-arrow {
        font-size: 18px;
        transition: transform 0.25s ease;
        display: inline-block;
        color: var(--gray-400);
      }
      .m-cat-item.open .m-arrow {
        transform: rotate(90deg);
        color: var(--red);
      }
      .m-cat-item.open .m-cat-toggle {
        color: var(--red);
      }
      .m-sub {
        display: none;
        flex-direction: column;
        padding: 0 0 12px 16px;
        gap: 2px;
      }
      .m-cat-item.open .m-sub {
        display: flex;
      }
      .m-sub-link {
        padding: 9px 12px;
        font-size: 14px;
        font-weight: 500;
        color: var(--gray-600);
        border-radius: 7px;
        transition:
          background var(--transition),
          color var(--transition);
      }
      .m-sub-link:hover {
        background: var(--red-light);
        color: var(--red);
      }

      /* ─── PAGE HERO ─────────────────────────────────────────── */
      .page-hero {
        background: var(--black);
        padding: 48px 0 40px;
        position: relative;
        overflow: hidden;
      }
      html[data-theme="dark"] .page-hero { background: #0a0a0a; }
      html[data-theme="dark"] .page-hero h1 { color: #ffffff; }
      html[data-theme="dark"] .page-hero p { color: rgba(255,255,255,0.5); }
      .page-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          ellipse at 70% 50%,
          rgba(173, 0, 0, 0.18) 0%,
          transparent 65%
        );
      }
      .page-hero-inner {
        position: relative;
        z-index: 1;
      }
      .breadcrumb {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
      }
      .breadcrumb a {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.45);
        transition: color var(--transition);
      }
      .breadcrumb a:hover {
        color: rgba(255, 255, 255, 0.8);
      }
      .breadcrumb span {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.25);
      }
      .breadcrumb strong {
        font-size: 13px;
        color: var(--red);
        font-weight: 600;
      }
      .page-hero h1 {
        font-family: var(--font-display);
        font-size: clamp(40px, 6vw, 72px);
        color: var(--white);
        letter-spacing: 1px;
        line-height: 0.95;
        margin-bottom: 12px;
      }
      .page-hero h1 em {
        color: var(--red);
        font-style: normal;
      }
      .page-hero p {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.5);
        max-width: 480px;
      }

      /* ─── TOOLBAR ───────────────────────────────────────────── */
      .toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 0;
        border-bottom: 1px solid var(--gray-100);
        flex-wrap: wrap;
      }
      .toolbar-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        flex-wrap: wrap;
      }
      .toolbar-right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
      }

      .product-search {
        position: relative;
        flex: 1;
        min-width: 200px;
        max-width: 360px;
      }
      .product-search input {
        width: 100%;
        height: 40px;
        padding: 0 40px 0 14px;
        border: 1.5px solid var(--gray-200);
        border-radius: 8px;
        font-size: 14px;
        color: var(--black);
        background: var(--gray-50);
        outline: none;
        transition:
          border-color var(--transition),
          box-shadow var(--transition);
      }
      .product-search input:focus {
        border-color: var(--red);
        background: var(--white);
        box-shadow: 0 0 0 3px rgba(173, 0, 0, 0.1);
      }
      .product-search input::placeholder {
        color: var(--gray-400);
      }
      .product-search .ps-icon {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-400);
        pointer-events: none;
      }

      .result-count {
        font-size: 13px;
        color: var(--gray-400);
        white-space: nowrap;
      }
      .result-count strong {
        color: var(--black);
      }

      .sort-select {
        height: 40px;
        padding: 0 32px 0 12px;
        border: 1.5px solid var(--gray-200);
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        color: var(--black);
        background: var(--white);
        appearance: none;
        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='%239C9C9C' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        cursor: pointer;
        outline: none;
        transition: border-color var(--transition);
      }
      .sort-select:focus {
        border-color: var(--red);
      }

      .view-toggle {
        display: flex;
        gap: 4px;
      }
      .view-btn {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        color: var(--gray-400);
        transition:
          background var(--transition),
          color var(--transition);
      }
      .view-btn.active {
        background: var(--red);
        color: var(--white);
      }
      .view-btn:hover:not(.active) {
        background: var(--gray-50);
        color: var(--black);
      }

      .filter-toggle-btn {
        display: none;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 16px;
        border: 1.5px solid var(--gray-200);
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--black);
        background: var(--white);
        transition:
          border-color var(--transition),
          background var(--transition);
      }
      .filter-toggle-btn:hover {
        border-color: var(--red);
        color: var(--red);
      }
      .filter-toggle-btn .filter-count {
        background: var(--red);
        color: var(--white);
        font-size: 10px;
        font-weight: 700;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        padding: 0 4px;
        display: none;
        align-items: center;
        justify-content: center;
      }
      .filter-toggle-btn .filter-count.visible {
        display: flex;
      }

      /* ─── ACTIVE FILTER CHIPS ───────────────────────────────── */
      .active-filters {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 0;
        flex-wrap: wrap;
      }
      .active-filters:empty {
        display: none;
      }
      .filter-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px 4px 12px;
        background: var(--red-light);
        border: 1px solid rgba(173, 0, 0, 0.2);
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        color: var(--red);
        animation: fadeUp 0.2s ease both;
      }
      .filter-chip button {
        display: flex;
        align-items: center;
        color: var(--red);
        opacity: 0.7;
        transition: opacity var(--transition);
      }
      .filter-chip button:hover {
        opacity: 1;
      }
      .clear-all-btn {
        font-size: 12px;
        font-weight: 700;
        color: var(--gray-400);
        padding: 4px 8px;
        border-radius: 6px;
        transition: color var(--transition);
        margin-left: 4px;
      }
      .clear-all-btn:hover {
        color: var(--red);
      }

      /* ─── MAIN LAYOUT ───────────────────────────────────────── */
      .products-layout {
        display: grid;
        grid-template-columns: var(--sidebar-w) 1fr;
        gap: 32px;
        padding: 24px 0 80px;
        align-items: start;
      }

      /* ─── SIDEBAR ───────────────────────────────────────────── */
      .sidebar {
        position: sticky;
        top: calc(var(--nav-h) + var(--cat-h) + 16px);
        background: var(--white);
        border: 1px solid var(--gray-100);
        border-radius: 14px;
        overflow: hidden;
      }

      /* Mobile overlay sidebar */
      .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1100;
      }
      .sidebar-overlay.open {
        display: block;
      }
      .sidebar-drawer {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(320px, 85vw);
        background: var(--white);
        z-index: 1101;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
      }
      .sidebar-overlay.open .sidebar-drawer {
        transform: translateX(0);
      }
      .drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid var(--gray-100);
        position: sticky;
        top: 0;
        background: var(--white);
        z-index: 1;
      }
      .drawer-header h3 {
        font-size: 16px;
        font-weight: 700;
      }
      .drawer-close {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        color: var(--gray-600);
        transition: background var(--transition);
      }
      .drawer-close:hover {
        background: var(--gray-50);
      }

      /* Filter sections */
      .filter-section {
        border-bottom: 1px solid var(--gray-100);
      }
      .filter-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        cursor: pointer;
        user-select: none;
      }
      .filter-header h4 {
        font-size: 13px;
        font-weight: 700;
        color: var(--black);
        letter-spacing: 0.3px;
      }
      .filter-header svg {
        color: var(--gray-400);
        transition: transform var(--transition);
      }
      .filter-section.open .filter-header svg {
        transform: rotate(180deg);
      }
      .filter-body {
        display: none;
        padding: 0 20px 16px;
      }
      .filter-section.open .filter-body {
        display: block;
      }

      .filter-title-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .filter-badge {
        font-size: 10px;
        font-weight: 700;
        background: var(--red);
        color: var(--white);
        padding: 1px 6px;
        border-radius: 10px;
      }

      .filter-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 0;
        cursor: pointer;
      }
      .filter-option label {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        color: var(--gray-600);
        cursor: pointer;
        transition: color var(--transition);
      }
      .filter-option:hover label {
        color: var(--black);
      }
      .filter-option input[type="checkbox"] {
        display: none;
      }
      .custom-checkbox {
        width: 18px;
        height: 18px;
        border: 2px solid var(--gray-200);
        border-radius: 4px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          border-color var(--transition),
          background var(--transition);
      }
      .filter-option.checked .custom-checkbox {
        border-color: var(--red);
        background: var(--red);
      }
      .custom-checkbox svg {
        display: none;
      }
      .filter-option.checked .custom-checkbox svg {
        display: block;
      }
      .option-count {
        font-size: 11px;
        color: var(--gray-400);
      }

      .price-inputs {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 4px;
      }
      .price-input {
        width: 100%;
        height: 36px;
        padding: 0 10px;
        border: 1.5px solid var(--gray-200);
        border-radius: 7px;
        font-size: 13px;
        color: var(--black);
        outline: none;
        transition: border-color var(--transition);
      }
      .price-input:focus {
        border-color: var(--red);
      }
      .price-sep {
        font-size: 12px;
        color: var(--gray-400);
        flex-shrink: 0;
      }
      .price-apply {
        width: 100%;
        height: 36px;
        margin-top: 10px;
        background: var(--red);
        color: var(--white);
        border-radius: 7px;
        font-size: 13px;
        font-weight: 700;
        transition: background var(--transition);
      }
      .price-apply:hover {
        background: var(--red-hover);
      }

      .rating-option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
        cursor: pointer;
        font-size: 13px;
        color: var(--gray-600);
        transition: color var(--transition);
        border-radius: 6px;
      }
      .rating-option:hover {
        color: var(--black);
      }
      .rating-option.selected {
        color: var(--red);
        font-weight: 600;
      }
      .rating-stars {
        color: #ffab00;
        font-size: 13px;
        letter-spacing: 1px;
      }

      .reset-filters {
        padding: 16px 20px;
        display: flex;
        justify-content: center;
      }
      .reset-btn {
        width: 100%;
        height: 38px;
        border: 2px solid var(--gray-200);
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        color: var(--gray-600);
        transition:
          border-color var(--transition),
          color var(--transition);
      }
      .reset-btn:hover {
        border-color: var(--red);
        color: var(--red);
      }

      /* ─── PRODUCT GRID ──────────────────────────────────────── */
      .products-area {
        min-width: 0;
      }

      .product-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }
      .product-grid.list-view {
        grid-template-columns: 1fr;
      }

      .product-card {
        background: var(--white);
        border: 1px solid var(--gray-100);
        border-radius: 14px;
        overflow: hidden;
        transition:
          box-shadow var(--transition),
          transform var(--transition),
          border-color var(--transition);
        position: relative;
        display: flex;
        flex-direction: column;
        animation: fadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
      }
      .product-card:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-3px);
        border-color: var(--gray-200);
      }

      .product-grid.list-view .product-card {
        flex-direction: row;
        transform: none !important;
      }
      .product-grid.list-view .product-img {
        width: 180px;
        flex-shrink: 0;
        aspect-ratio: auto;
        min-height: 160px;
      }
      .product-grid.list-view .product-info {
        flex: 1;
      }
      .product-grid.list-view .product-card:hover {
        transform: none;
        box-shadow: var(--shadow-md);
      }

      .product-img {
        position: relative;
        aspect-ratio: 4/3;
        background: linear-gradient(145deg, #f0f0f0, #fafafa);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      .product-img svg.placeholder-icon {
        color: var(--gray-200);
        transition: transform var(--transition);
      }
      .product-card:hover .product-img svg.placeholder-icon {
        transform: scale(0.95);
      }
      .product-img img.img-primary {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: opacity 0.35s ease;
      }
      .product-img img.img-hover {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0;
        transition: opacity 0.35s ease;
      }
      .product-card:hover .product-img:has(.img-hover) .img-primary { opacity: 0; }
      .product-card:hover .product-img img.img-hover { opacity: 1; }

      .product-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.8px;
        text-transform: uppercase;
      }
      .badge-sale {
        background: var(--red);
        color: var(--white);
      }
      .badge-new {
        background: var(--black);
        color: var(--white);
      }
      .badge-hot {
        background: #ff6b00;
        color: var(--white);
      }
      .badge-bundle {
        background: #0a7c3e;
        color: var(--white);
      }
      .badge-promo {
        background: var(--red);
        color: var(--white);
      }
      .badge-oos {
        background: #888;
        color: var(--white);
      }
      .product-card.is-oos .product-img {
        opacity: 0.55;
      }
      .product-card.is-oos .btn-cart {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
      }

      .wishlist-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        background: var(--white);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-sm);
        color: var(--gray-400);
        transition:
          color var(--transition),
          transform var(--transition);
        opacity: 0;
        transform: scale(0.8);
      }
      .product-card:hover .wishlist-btn {
        opacity: 1;
        transform: scale(1);
      }
      .wishlist-btn:hover {
        color: var(--red);
      }
      .wishlist-btn.active {
        color: var(--red);
        opacity: 1;
        transform: scale(1);
      }

      .product-info {
        padding: 14px 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .product-brand {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--gray-400);
      }
      .product-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--black);
        line-height: 1.35;
      }
      .product-flavor {
        font-size: 12px;
        color: var(--gray-400);
      }
      .product-rating {
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .stars {
        color: #ffab00;
        font-size: 11px;
        letter-spacing: 1px;
      }
      .rating-count {
        font-size: 11px;
        color: var(--gray-400);
      }

      .product-pricing {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 2px;
        /* Always LTR so prices render correctly in Arabic/RTL mode */
        direction: ltr;
      }
      .price {
        font-family: var(--font-display);
        font-size: 22px;
        color: var(--black);
        letter-spacing: 0.5px;
      }
      .price-old {
        font-size: 13px;
        color: var(--gray-400);
        text-decoration: line-through;
      }
      .price-save {
        font-size: 11px;
        font-weight: 700;
        color: var(--red);
        background: var(--red-light);
        padding: 2px 6px;
        border-radius: 4px;
      }

      .product-actions {
        display: flex;
        gap: 8px;
        margin-top: 6px;
      }
      .btn-cart {
        flex: 1;
        height: 38px;
        border: 2px solid var(--gray-200);
        border-radius: 7px;
        font-size: 12px;
        font-weight: 700;
        color: var(--black);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition:
          border-color var(--transition),
          background var(--transition),
          color var(--transition);
      }
      .btn-cart:hover {
        border-color: var(--black);
        background: var(--black);
        color: var(--white);
      }
      .btn-buy {
        flex: 1;
        height: 38px;
        background: var(--red);
        border-radius: 7px;
        font-size: 12px;
        font-weight: 700;
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition:
          background var(--transition),
          box-shadow var(--transition);
      }
      .btn-buy:hover {
        background: var(--red-hover);
        box-shadow: 0 4px 12px rgba(173, 0, 0, 0.25);
      }

      /* Skeleton loader */
      .skeleton-card {
        background: var(--white);
        border: 1px solid var(--gray-100);
        border-radius: 14px;
        overflow: hidden;
      }
      .skeleton-img {
        height: 180px;
        background: linear-gradient(
          90deg,
          #f0f0f0 25%,
          #fafafa 50%,
          #f0f0f0 75%
        );
        background-size: 600px 100%;
        animation: shimmer 1.5s infinite;
      }
      .skeleton-body {
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .skeleton-line {
        height: 12px;
        border-radius: 6px;
        background: linear-gradient(
          90deg,
          #f0f0f0 25%,
          #fafafa 50%,
          #f0f0f0 75%
        );
        background-size: 600px 100%;
        animation: shimmer 1.5s infinite;
      }
      .skeleton-line.short {
        width: 60%;
      }
      .skeleton-line.med {
        width: 80%;
      }

      /* Empty state */
      .empty-state {
        grid-column: 1/-1;
        text-align: center;
        padding: 80px 24px;
      }
      .empty-icon {
        font-size: 56px;
        margin-bottom: 16px;
      }
      .empty-state h3 {
        font-family: var(--font-display);
        font-size: 32px;
        color: var(--black);
        margin-bottom: 8px;
      }
      .empty-state p {
        font-size: 14px;
        color: var(--gray-400);
        margin-bottom: 24px;
      }

      /* Pagination */
      .pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 40px 0 0;
      }
      .page-btn {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        color: var(--gray-600);
        border: 1.5px solid var(--gray-200);
        transition: all var(--transition);
      }
      .page-btn:hover {
        border-color: var(--red);
        color: var(--red);
      }
      .page-btn.active {
        background: var(--red);
        border-color: var(--red);
        color: var(--white);
      }
      .page-btn.dots {
        border-color: transparent;
        cursor: default;
      }
      .page-btn.dots:hover {
        border-color: transparent;
        color: var(--gray-600);
      }

      /* ─── FOOTER ────────────────────────────────────────────── */
      footer {
        background: var(--black);
        color: rgba(255, 255, 255, 0.65);
        padding: 48px 0 0;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1.2fr;
        gap: 40px;
        padding-bottom: 48px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      .footer-brand p {
        font-size: 13px;
        line-height: 1.7;
        max-width: 260px;
        color: rgba(255,255,255,0.45);
        margin: 0;
      }
      .social-links {
        display: flex;
        gap: 10px;
        margin-top: 20px;
      }
      .social-link {
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.6);
        transition: background var(--transition), color var(--transition);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
      }
      .social-link:hover {
        background: var(--red);
        color: var(--white);
      }
      .footer-col-title {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--white);
        margin-bottom: 16px;
      }
      .footer-col-links {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .footer-col-links a {
        font-size: 13px;
        color: rgba(255,255,255,0.45);
        transition: color var(--transition);
        text-decoration: none;
      }
      .footer-col-links a:hover { color: var(--white); }
      .footer-contact-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 13px;
        color: rgba(255,255,255,0.45);
        margin-bottom: 12px;
      }
      .footer-contact-item svg { flex-shrink: 0; margin-top: 1px; color: var(--red); }
      .footer-bottom-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 0;
        font-size: 12px;
        color: rgba(255,255,255,0.3);
        flex-wrap: wrap;
        gap: 12px;
      }
      .footer-bottom-bar a { color: rgba(255,255,255,0.4); transition: color var(--transition); text-decoration: none; }
      .footer-bottom-bar a:hover { color: var(--white); }
      @media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-bottom-bar { flex-direction: column; text-align: center; } }

      /* ─── TOAST ─────────────────────────────────────────────── */
      #toast {
        position: fixed;
        bottom: 24px;
        right: 24px;
        background: var(--black);
        color: var(--white);
        padding: 14px 20px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        box-shadow: var(--shadow-lg);
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 9999;
        transform: translateY(80px);
        opacity: 0;
        transition:
          transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
          opacity 0.3s;
        pointer-events: none;
      }
      #toast.show {
        transform: translateY(0);
        opacity: 1;
      }
      .toast-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #22c55e;
        flex-shrink: 0;
      }

      /* ─── SCROLL TOP ─────────────────────────────────────────── */
      #scrollTop {
        position: fixed;
        bottom: 24px;
        left: 24px;
        width: 44px;
        height: 44px;
        background: var(--red);
        color: var(--white);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-red);
        transition:
          opacity var(--transition),
          transform var(--transition);
        opacity: 0;
        transform: translateY(12px);
        pointer-events: none;
        z-index: 998;
      }
      #scrollTop.visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
      }
      #scrollTop:hover {
        background: var(--red-hover);
      }

      /* ─── WHATSAPP BUTTON ────────────────────────────────────── */
      .wa-btn {
        position: fixed;
        bottom: 24px;
        right: 24px;
        width: 58px;
        height: 58px;
        background: #25d366;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        z-index: 9999;
        animation:
          wa-float 2.4s ease-in-out infinite,
          wa-pulse 2.4s ease-in-out infinite;
        transition:
          transform 0.2s ease,
          box-shadow 0.2s ease;
      }
      .wa-btn:hover {
        animation: none;
        transform: scale(1.12);
        box-shadow: 0 8px 28px rgba(37, 211, 102, 0.6);
      }

      /* ─── RESPONSIVE ─────────────────────────────────────────── */
      @media (max-width: 1024px) {
        .product-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (max-width: 768px) {
        .nav-link {
          display: none;
        }
        .lang-switch {
          display: none;
        }
        .hamburger {
          display: flex;
        }
        .logo {
          margin-left: auto;
          position: relative;
          left: 16px;
        }
        .footer-mini .logo {
          margin-left: 0;
          left: 0;
        }
        .cat-nav {
          display: none;
        }

        .products-layout {
          grid-template-columns: 1fr;
        }
        .sidebar {
          display: none;
        }
        .filter-toggle-btn {
          display: flex;
        }

        .logo img {
          max-width: 100px;
        }
        .top-nav {
          gap: 10px;
        }
        #desktopProductSearch {
          display: none !important;
        }
        #mobileProductSearchBtn {
          display: flex !important;
          position: relative;
          left: 16px;
        }

        .product-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;
        }
        .product-grid.list-view .product-img {
          width: 120px;
        }

        .wa-btn {
          width: 50px;
          height: 50px;
        }
        .wa-btn svg {
          width: 26px;
          height: 26px;
        }
      }

      @media (max-width: 480px) {
        .product-grid {
          grid-template-columns: 1fr;
        }
        .product-grid.list-view .product-img {
          width: 100px;
        }
        .toolbar-right {
          display: none;
        }
      }
      /* ══ ADD-TO-CART MODAL ══ */
      .atc-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.52);
        z-index: 9000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.22s,
          visibility 0.22s;
      }
      .atc-overlay.open {
        opacity: 1;
        visibility: visible;
      }
      .atc-modal {
        background: #fff;
        border-radius: 16px;
        padding: 28px 24px 24px;
        width: 90%;
        max-width: 420px;
        position: relative;
        transform: translateY(20px);
        transition: transform 0.22s;
        max-height: 90vh;
        overflow-y: auto;
      }
      .atc-overlay.open .atc-modal {
        transform: translateY(0);
      }
      .atc-close {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--gray-100);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: var(--black);
        transition: background 0.2s;
      }
      .atc-close:hover {
        background: var(--gray-200);
      }
      .atc-modal-img {
        width: 100%;
        height: 180px;
        background: var(--gray-50);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin-bottom: 16px;
      }
      .atc-modal-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .atc-modal-name {
        font-size: 17px;
        font-weight: 700;
        color: var(--black);
        margin-bottom: 4px;
      }
      .atc-modal-price {
        font-size: 20px;
        font-weight: 800;
        color: var(--red);
        margin-bottom: 18px;
        font-family: var(--font-display);
      }
      .atc-section {
        margin-bottom: 16px;
      }
      .atc-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--gray-400);
        margin-bottom: 8px;
      }
      .atc-options {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .atc-option {
        padding: 7px 14px;
        border: 1.5px solid var(--gray-200);
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.18s;
        background: #fff;
        color: var(--black);
      }
      .atc-option:hover {
        border-color: var(--black);
      }
      .atc-option.active {
        border-color: var(--red);
        background: var(--red-light);
        color: var(--red);
      }
      .atc-qty-row {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .atc-qty-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: 1.5px solid var(--gray-200);
        background: #fff;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.18s;
        line-height: 1;
      }
      .atc-qty-btn:hover {
        border-color: var(--black);
      }
      .atc-qty-val {
        font-size: 18px;
        font-weight: 700;
        min-width: 28px;
        text-align: center;
      }
      .atc-confirm-btn {
        width: 100%;
        padding: 14px;
        background: var(--red);
        color: #fff;
        border: none;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.2s;
        margin-top: 20px;
      }
      .atc-confirm-btn:hover {
        background: var(--red-hover);
      }
      /* ══ CART DRAWER ══ */
      .cart-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 8000;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.25s,
          visibility 0.25s;
      }
      .cart-overlay.open {
        opacity: 1;
        visibility: visible;
      }
      .cart-drawer {
        position: fixed;
        top: 0;
        right: 0;
        width: 380px;
        max-width: 100vw;
        height: 100%;
        background: #fff;
        z-index: 8100;
        display: flex;
        flex-direction: column;
        transform: translateX(100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
      }
      .cart-drawer.open {
        transform: translateX(0);
      }
      .cart-drawer-hd {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 20px 16px;
        border-bottom: 1px solid var(--gray-100);
        flex-shrink: 0;
      }
      .cart-drawer-title {
        font-size: 18px;
        font-weight: 800;
        color: var(--black);
      }
      .cart-drawer-x {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--gray-100);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        transition: background 0.2s;
      }
      .cart-drawer-x:hover {
        background: var(--gray-200);
      }
      .cart-drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: 0 20px;
      }
      .cart-empty-state {
        text-align: center;
        padding: 60px 20px;
        color: var(--gray-400);
      }
      .cart-empty-state svg {
        margin-bottom: 14px;
        opacity: 0.3;
      }
      .cart-empty-state p {
        font-size: 15px;
        font-weight: 600;
      }
      .cart-row {
        display: flex;
        gap: 12px;
        padding: 14px 0;
        border-bottom: 1px solid var(--gray-100);
      }
      .cart-row-img {
        width: 64px;
        height: 64px;
        border-radius: 8px;
        background: var(--gray-50);
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .cart-row-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .cart-row-info {
        flex: 1;
        min-width: 0;
      }
      .cart-row-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--black);
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .cart-row-meta {
        font-size: 12px;
        color: var(--gray-400);
        margin-bottom: 8px;
      }
      .cart-row-bot {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .ciq {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .ciq-btn {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        border: 1.5px solid var(--gray-200);
        background: #fff;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.15s;
        line-height: 1;
      }
      .ciq-btn:hover {
        border-color: var(--black);
      }
      .ciq-val {
        font-size: 14px;
        font-weight: 700;
        min-width: 20px;
        text-align: center;
      }
      .cart-row-price {
        margin-left: auto;
        font-size: 15px;
        font-weight: 800;
        color: var(--black);
        font-family: var(--font-display);
        white-space: nowrap;
      }
      .cart-row-del {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--gray-400);
        padding: 2px;
        transition: color 0.15s;
        flex-shrink: 0;
      }
      .cart-row-del:hover {
        color: var(--red);
      }
      .cart-drawer-ft {
        padding: 16px 20px 20px;
        border-top: 1px solid var(--gray-100);
        flex-shrink: 0;
      }
      .cart-total {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 14px;
      }
      .cart-total-lbl {
        font-size: 13px;
        color: var(--gray-400);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6px;
      }
      .cart-total-num {
        font-size: 22px;
        font-weight: 800;
        color: var(--black);
        font-family: var(--font-display);
      }
      .cart-checkout {
        width: 100%;
        padding: 15px;
        background: var(--red);
        color: #fff;
        border: none;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.2s;
      }
      .cart-checkout:hover {
        background: var(--red-hover);
      }