*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior: smooth; }
    body { background: #FAF7F2; font-family: 'Jost', sans-serif; color: #4A0A12; overflow-x: hidden; }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: #FAF7F2; }
    ::-webkit-scrollbar-thumb { background: #C9A84C; border-radius: 2px; }

    /* ── Animations ── */
    @keyframes fadeUp   { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
    @keyframes fadeIn   { from{opacity:0} to{opacity:1} }
    @keyframes floatY   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
    @keyframes marquee  { from{transform:translateX(0)} to{transform:translateX(-50%)} }
    @keyframes shimmer  { 0%{background-position:-400% center} 100%{background-position:400% center} }
    @keyframes pulseGold{ 0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,0.45)} 50%{box-shadow:0 0 0 10px rgba(201,168,76,0)} }
    @keyframes ticker   { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
    @keyframes slideIn  { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }

    .anim-fade-up { animation: fadeUp 0.85s ease forwards; }
    .anim-fade-in { animation: fadeIn 1.1s ease forwards; }
    .float        { animation: floatY 7s ease-in-out infinite; }
    .delay-1{animation-delay:.1s;opacity:0}
    .delay-2{animation-delay:.2s;opacity:0}
    .delay-3{animation-delay:.3s;opacity:0}
    .delay-4{animation-delay:.4s;opacity:0}
    .delay-5{animation-delay:.5s;opacity:0}
    .delay-6{animation-delay:.65s;opacity:0}

    /* ── Nav ── */
    nav { position:relative; top:0; left:0; right:0; z-index:100;
          background:#6B0F1A; transition:all .35s ease; }
    nav.scrolled { background:rgba(107,15,26,0.97); backdrop-filter:blur(14px);
                   box-shadow:0 2px 20px rgba(74,10,18,0.3); position:fixed; top:0; left:0; right:0; }

    /* ── Gold shimmer button ── */
    .btn-gold {
      background: linear-gradient(90deg, #C9A84C 0%, #E2C97E 40%, #C9A84C 70%, #b8952f 100%);
      background-size: 300% auto;
      color: #4A0A12;
      transition: background-position .5s ease, transform .2s ease, box-shadow .2s ease;
    }
    .btn-gold:hover {
      background-position: right center;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(201,168,76,.35);
    }

    /* ── Maroon button ── */
    .btn-maroon {
      background: #6B0F1A;
      color: #FAF7F2;
      transition: background .3s ease, color .3s ease, transform .2s ease, box-shadow .2s ease;
    }
    .btn-maroon:hover {
      background: #C9A84C;
      color: #4A0A12;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(201,168,76,.35);
    }

    /* ── Product cards ── */
    .product-card {
      background: #FFFFFF;
      border: 1.5px solid rgba(201,168,76,0.25);
      border-radius: 16px;
      overflow: hidden;
      transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
    }
    .product-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 50px rgba(107,15,26,0.12);
      border-color: rgba(201,168,76,0.7);
    }
    .product-card .card-img { overflow:hidden; }
    .product-card .card-img .thumb { transition: transform .7s cubic-bezier(.25,.46,.45,.94); }
    .product-card:hover .card-img .thumb { transform: scale(1.06); }
    .product-card .quick-add { transform:translateY(14px); opacity:0; transition:all .3s ease; }
    .product-card:hover .quick-add { transform:translateY(0); opacity:1; }

    /* ── Scroll reveal ── */
    .reveal { opacity:0; transform:translateY(36px);
              transition:opacity .75s ease, transform .75s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }

    /* ── Marquee ── */
    .marquee-track { display:flex; white-space:nowrap;
                     animation: marquee 24s linear infinite; }
    .marquee-wrap:hover .marquee-track { animation-play-state:paused; }

    /* ── Offer banner ── */
    .offer-banner {
      background: linear-gradient(135deg, #4A0A12 0%, #6B0F1A 35%, #8B1A28 60%, #C9A84C 100%);
      position: relative; overflow: hidden;
    }
    .offer-banner::before {
      content:'';
      position:absolute; inset:0;
      background: repeating-linear-gradient(
        -55deg, transparent, transparent 20px,
        rgba(201,168,76,.04) 20px, rgba(201,168,76,.04) 40px
      );
    }
    .offer-banner .offer-badge {
      animation: pulseGold 2.5s ease-in-out infinite;
    }
    .offer-ticker { overflow:hidden; }
    .offer-ticker-track { display:inline-flex; white-space:nowrap;
                          animation: ticker 18s linear infinite; }

    /* ── Product Slider ── */
    .slider-wrap { position:relative; overflow:hidden; }
    .slider-track {
      display:flex; gap:1.5rem;
      transition: transform .5s cubic-bezier(.25,.46,.45,.94);
    }
    .slider-item { flex: 0 0 calc(25% - 1.125rem); }
    @media(max-width:1024px){ .slider-item{ flex: 0 0 calc(33.33% - 1rem); } }
    @media(max-width:768px) { .slider-item{ flex: 0 0 calc(50% - 0.75rem); } }
    @media(max-width:480px) { .slider-item{ flex: 0 0 calc(85%); } }

    .slider-btn {
      position:absolute; top:50%; transform:translateY(-50%);
      width:44px; height:44px; border-radius:50%;
      background:#FFFFFF; border:1.5px solid rgba(201,168,76,.5);
      color:#6B0F1A; z-index:10; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      transition:all .3s ease; box-shadow:0 4px 16px rgba(107,15,26,.15);
    }
    .slider-btn:hover { background:#6B0F1A; color:#C9A84C; border-color:#6B0F1A; }
    .slider-btn.prev-btn { left:9px; }
    .slider-btn.next-btn { right:9px; }

    /* dot indicator */
    .dot { width:8px; height:8px; border-radius:50%; background:rgba(107,15,26,.2);
           cursor:pointer; transition:all .3s ease; }
    .dot.active { background:#6B0F1A; width:22px; border-radius:4px; }

    /* ── Wishlist ── */
    .wish-btn { transition:all .3s ease; }
    .wish-btn.liked svg { fill:#C9A84C; stroke:#C9A84C; }

    /* ── Category card ── */
   /* Modern smaller category cards */
.cat-card-modern {
  position: relative;
  overflow: hidden;
 
  height: 420px;
  border: 1px solid rgba(201,168,76,0.18);
  background: rgba(255,255,255,0.5);
 
  box-shadow:
    0 10px 28px rgba(74,10,18,0.08),
    0 2px 8px rgba(74,10,18,0.05);
  transition:
    transform .55s cubic-bezier(.22,1,.36,1),
    box-shadow .55s ease,
    border-color .35s ease;
}
/* 
.cat-card-modern:hover {
  transform: translateY(-8px);
  border-color: rgba(201,168,76,.45);
  box-shadow:
    0 24px 48px rgba(74,10,18,0.14),
    0 10px 24px rgba(201,168,76,.12);
} */

.cat-card-modern img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}

.cat-card-modern:hover img {
  transform: scale(1.08);
}

/* .cat-card-modern::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 8, 10, 0.88) 0%,
    rgba(20, 8, 10, 0.35) 45%,
    rgba(20, 8, 10, 0.05) 100%
  );
} */

.cat-card-modern .cat-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.cat-card-modern .cat-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 22px;
}

.cat-card-modern .cat-title {
  font-size: 1.65rem;
  line-height: 1;
  color: #fff;
  font-weight: 300;
  margin-bottom: 12px;
}

.cat-card-modern .cat-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cat-card-modern .cat-count {
  color: rgba(255,255,255,.72);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.cat-card-modern .cat-arrow {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .35s ease;
}

.cat-card-modern:hover .cat-arrow {
  background: #C9A84C;
  color: #4A0A12;
  transform: translateX(4px);
}

.cat-card-modern .cat-desc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 0;
  transition: all .4s ease;
}

.cat-card-modern:hover .cat-desc {
  max-height: 80px;
  opacity: 1;
  margin-top: 14px;
}

@media (max-width: 1024px) {
  .cat-card-modern {
    height: 360px;
  }
}

@media (max-width: 640px) {
  .cat-card-modern {
    height: 320px;
    border-radius: 22px;
  }

  .cat-card-modern .cat-content {
    padding: 18px;
  }

  .cat-card-modern .cat-title {
    font-size: 1.4rem;
  }

  .cat-card-modern .cat-arrow {
    width: 38px;
    height: 38px;
  }
}

    /* ── Testimonial ── */
    .testi-card { background:#FFFFFF; border:1.5px solid rgba(201,168,76,.2); border-radius:16px;
                  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
    .testi-card:hover { transform:translateY(-6px); box-shadow:0 18px 50px rgba(107,15,26,.1); border-color:rgba(201,168,76,.55); }

    /* ── Search overlay ── */
    #search-overlay { transition: opacity .3s ease; }

    /* ── Cart drawer ── */
    #cart-drawer { transition: transform .45s cubic-bezier(.25,.46,.45,.94); }

    /* ── Toast ── */
    #toast { transition: all .35s cubic-bezier(.25,.46,.45,.94); }

    /* ── Mobile menu ── */
    #mobile-menu { transition: max-height .4s ease, opacity .4s ease; }

    /* ── Gold underline heading ── */
    .gold-accent { position:relative; }
    .gold-accent::after {
      content:''; position:absolute; bottom:-4px; left:0; right:0; height:2px;
      background:linear-gradient(90deg,transparent,#C9A84C,transparent);
    }
    #featured-collection{
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#featured-collection::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background: url('../assets/img/bg3.webp') right/cover no-repeat;

   opacity: 0.25;
}
#zoomContainer {
  overflow: hidden;
  cursor: zoom-in;
}

#zoomContainer img {
  transition: transform 0.2s ease;
}
.input{
  width: 100%;
  border: 1px solid rgba(107,15,26,0.15);
  padding: 12px 14px;
  border-radius: 10px;
  outline: none;
}

.input:focus{
  border-color: #6B0F1A;
}

.account-tab{
  transition: all 0.3s ease;
}

/* cart drawer  */
#cart-drawer.open {
    transform: translateX(0);
  }

  #cart-overlay.open {
    opacity: 1;
    visibility: visible;
  }

  #cart-drawer::-webkit-scrollbar {
    width: 5px;
  }

  #cart-drawer::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 999px;
  }

  #cart-drawer::-webkit-scrollbar-track {
    background: transparent;
  }
  /* progress wrapper */
.cart-progress-wrap {
  position: relative;
  height: 10px;
  border-radius: 9999px;
  background: #e7f3ee;
  overflow: visible; /* important */
}

/* actual green bar */
#cart-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  border-radius: 9999px;
  transition: width 1400ms ease-out;
  background: repeating-linear-gradient(
    135deg,
    #5ec6a0 0px,
    #5ec6a0 12px,
    #76d4b0 12px,
    #76d4b0 24px
  );
}

/* truck bubble */
#cart-progress-truck {
  position: absolute;
  top: 50%;
  left: -6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: #5ec6a0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  z-index: 20;
  transition: left 1400ms ease-out;
}
  .auth-tab {
    color: rgba(74, 10, 18, .45);
    transition: all .3s ease;
  }

  .active-auth-tab {
    background: #6B0F1A;
    color: #FAF7F2;
    box-shadow: 0 10px 24px rgba(74, 10, 18, .18);
  }

  .auth-content {
    animation: authFade .35s ease;
  }

  @keyframes authFade {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  #account-dropdown-wrapper:hover #account-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  #account-dropdown {
    transition:
      opacity .3s ease,
      visibility .3s ease,
      transform .3s ease;
  }

  .mobile-bottom-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    border: 1px solid rgba(201, 168, 76, .08);
    background: rgba(255, 255, 255, .04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(74, 10, 18, 0.72);
    transition: all .28s ease;
  }

  .mobile-bottom-label {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(74, 10, 18, 0.55);
    transition: all .28s ease;
  }

  .mobile-bottom-item:active .mobile-bottom-icon,
  .mobile-bottom-item:hover .mobile-bottom-icon {
    background: rgba(201, 168, 76, .12);
    border-color: rgba(201, 168, 76, .22);
    color: #6B0F1A;

    transform: translateY(-2px);
  }

  .mobile-bottom-item:active .mobile-bottom-label,
  .mobile-bottom-item:hover .mobile-bottom-label {
    color: #f5e1bb;
  }

  .mobile-auth-tab {
    color: rgba(74, 10, 18, .45);
    transition: all .3s ease;
  }

  .active-mobile-auth-tab {
    background: #6B0F1A;
    color: #FAF7F2;
    box-shadow: 0 8px 18px rgba(74, 10, 18, .15);
  }
  @keyframes dots {
  0% { content: ""; }
  33% { content: "."; }
  66% { content: ".."; }
  100% { content: "..."; }
}

.loading-dots::after {
  content: "";
  animation: dots 1.2s steps(3, end) infinite;
}