*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { overflow-x: hidden; scroll-behavior: smooth; }
  body { background: #fdfbf7; color: #0e0d0c; font-family: 'DM Sans', sans-serif; overflow-x: hidden; }
  .marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
  .marquee-track span { white-space: nowrap; flex-shrink: 0; }
  @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
  .mega-menu { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility .25s; top:100%; left:50%; transform:translateX(-50%); }
  .mega-menu::before { content:''; position:absolute; left:0; right:0; top:-24px; height:24px; }
  .nav-item:hover .mega-menu, .nav-item.is-open .mega-menu { opacity:1; visibility:visible; pointer-events:auto; }
  .mobile-nav { position:fixed; top:0; right:0; height:100%; width:280px; background:#0e0d0c; z-index:50; padding:32px; transform:translateX(100%); transition:transform .4s; }
  .mobile-nav.open { transform:translateX(0); }
  .mobile-overlay { position:fixed; inset:0; background:rgba(14,13,12,.5); z-index:40; opacity:0; pointer-events:none; transition:opacity .3s; }
  .mobile-overlay.show { opacity:1; pointer-events:auto; }
  input[type=range] { -webkit-appearance:none; appearance:none; height:3px; background:#d1ccc4; border-radius:2px; outline:none; width:100%; }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:#c9a84c; cursor:pointer; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.2); }
  .filter-section + .filter-section { border-top: 1px solid rgba(14,13,12,.08); padding-top: 20px; margin-top: 20px; }
  .filter-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#0e0d0c; margin-bottom:12px; }
  .side-filter-btn { display:block; width:100%; text-align:left; font-size:13px; color:rgba(14,13,12,.5); padding:5px 0; transition:color .2s; cursor:pointer; background:none; border:none; }
  .side-filter-btn:hover { color:#0e0d0c; }
  .side-filter-btn.active { color:#c9a84c; font-weight:600; }
  .side-filter-btn input[type="checkbox"] { accent-color:#c9a84c; width:14px; height:14px; margin-right:8px; }

  /* ── Product card (exact same as index.html) ── */
  .product-card { transition: transform .4s cubic-bezier(.25,.46,.45,.94), box-shadow .4s; will-change: transform; backface-visibility: hidden; background:#fff; border-radius:4px; overflow:hidden; border:1px solid rgba(14,13,12,.05); }
  .card-media { background:#f7f3ec; }
  .card-img, .card-img-hover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition: opacity .45s ease, transform .65s cubic-bezier(.25,.46,.45,.94); }
  .card-img { image-rendering: auto; opacity:1; z-index:0; }
  .card-img-hover { opacity:0; z-index:1; }
  .product-card:hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(14,13,12,.14); }
  .product-card:hover .card-img { opacity:0; transform: scale(1.04); }
  .product-card:hover .card-img-hover { opacity: 1; transform: scale(1.06); }
  .card-overlay { opacity: 0; transform:translateY(12px); transition: opacity .3s ease, transform .3s ease, background .2s ease; border:0; }
  .product-card:hover .card-overlay { opacity: 1; transform:translateY(0); }
  .card-overlay:hover { background:#c9a84c; color:#0e0d0c; }
  .product-card { box-shadow: 0 8px 30px rgba(14,13,12,.06); }
  .product-card::before { content: ''; position: absolute; inset: 1px; border: 1px solid rgba(201,168,76,.18); pointer-events: none; z-index: 2; }
  .product-card::after { content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.42) 42%, transparent 58%); transform: translateX(-120%); transition: opacity .35s, transform .8s cubic-bezier(.25,.46,.45,.94); z-index: 3; }
  .product-card:hover::after { opacity: 1; transform: translateX(120%); }
  .color-swatch { width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:border-color .2s, transform .2s; display:inline-block; }
  .color-swatch:hover { transform:scale(1.15); }
  .color-swatch.active { border-color:#0e0d0c; transform:scale(1.15); }

  .filter-overlay { display:none; }
  body.filters-open { overflow:hidden; }

  @media (max-width: 1023px) {
    .mobile-nav {
      width:min(88vw, 320px) !important;
      z-index:60;
    }
    .mobile-overlay { z-index:55; }
    .collection-filter {
      display:block !important;
      position:fixed !important;
      top:0 !important;
      left:0 !important;
      width:min(86vw, 340px) !important;
      height:100dvh !important;
      max-height:none !important;
      padding:24px 20px 28px !important;
      background:#fdfbf7;
      z-index:80;
      overflow-y:auto;
      box-shadow:24px 0 60px rgba(14,13,12,.18);
      transform:translateX(-105%);
      transition:transform .3s ease;
    }
    .collection-filter.open { transform:translateX(0); }
    .filter-overlay {
      display:block;
      position:fixed;
      inset:0;
      background:rgba(14,13,12,.46);
      z-index:75;
      opacity:0;
      pointer-events:none;
      transition:opacity .25s ease;
    }
    .filter-overlay.open {
      opacity:1;
      pointer-events:auto;
    }
    .collection-toolbar {
      gap:14px;
      align-items:flex-start;
    }
    #productGrid {
      grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
      gap:16px !important;
    }
    .card-media { height:260px !important; }
  }

  @media (max-width: 640px) {
    .collection-toolbar {
      flex-direction:column;
      align-items:stretch;
    }
    .collection-toolbar > div {
      width:100%;
      justify-content:space-between;
    }
    #filterToggle, #sortSelect { flex:1; min-width:0; }
    #productGrid {
      grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
      gap:12px !important;
    }
    .card-media { height:clamp(190px, 58vw, 250px) !important; }
    .product-card .p-4 { padding:12px !important; }
    .product-card .font-display { font-size:14px !important; line-height:1.3; }
  }

  @media (max-width: 420px) {
    #productGrid { grid-template-columns:1fr !important; }
    .card-media { height:260px !important; }
  }