html { scroll-behavior: smooth; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; max-width: 100%; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: #f8f7ee; color: var(--text); overflow-x: hidden; width: 100%; position: relative; }
.avis-section { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px; }
.avis-section-title { font-size: 13px; font-weight: 700; color: var(--black); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.avis-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; background: var(--cream); border-radius: 12px; padding: 12px 16px; }
.avis-score { text-align: center; flex-shrink: 0; }
.avis-score-num { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 900; color: var(--black); line-height: 1; }
.avis-score-stars { color: #f59e0b; font-size: 14px; margin: 3px 0; }
.avis-score-count { font-size: 11px; color: var(--muted); }
.avis-distrib { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.avis-distrib-row { display: flex; align-items: center; gap: 6px; }
.avis-distrib-label { font-size: 11px; color: var(--muted); width: 14px; text-align: right; flex-shrink: 0; }
.avis-distrib-bar { flex: 1; height: 5px; background: #e5e7eb; border-radius: 100px; overflow: hidden; }
.avis-distrib-fill { height: 100%; background: #f59e0b; border-radius: 100px; }
.avis-distrib-count { font-size: 11px; color: var(--muted); width: 16px; text-align: right; flex-shrink: 0; }
.avis-list { display: flex; flex-direction: column; gap: 10px; max-height: 200px; overflow-y: auto; margin-bottom: 12px; }
.avis-list::-webkit-scrollbar { width: 3px; }
.avis-list::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }
.avis-item { background: #fafaf5; border-radius: 10px; padding: 10px 12px; }
.avis-item-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.avis-item-author { font-size: 12px; font-weight: 700; color: var(--black); }
.avis-item-stars { color: #f59e0b; font-size: 12px; }
.avis-item-date { font-size: 10px; color: var(--muted); }
.avis-item-text { font-size: 12px; color: var(--muted); line-height: 1.5; }
.avis-empty { text-align: center; padding: 20px; color: var(--muted); font-size: 13px; }
.avis-form { background: var(--gold-bg); border: 1.5px solid rgba(168,184,48,0.3); border-radius: 12px; padding: 14px 16px; margin-top: 4px; }
.avis-form-title { font-size: 12px; font-weight: 700; color: var(--black); margin-bottom: 10px; }
.star-picker { display: flex; gap: 6px; margin-bottom: 10px; }
.star-pick { font-size: 24px; cursor: pointer; transition: transform .15s; color: #d1d5db; user-select: none; }
.star-pick:hover, .star-pick.active { color: #f59e0b; transform: scale(1.2); }
.avis-textarea { width: 100%; padding: 9px 12px; border: 1.5px solid rgba(168,184,48,0.4); border-radius: 9px; font-size: 12px; font-family: inherit; resize: none; outline: none; background: #fff; color: var(--text); transition: border-color .2s; }
.avis-textarea:focus { border-color: var(--gold-dark); }
.avis-submit-btn { margin-top: 8px; width: 100%; padding: 10px; background: var(--black); color: var(--gold); border: none; border-radius: 100px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .2s; }
.avis-submit-btn:hover { background: var(--gold); color: var(--black); }
.avis-submit-btn:disabled { opacity: .6; cursor: not-allowed; }
.avis-login-prompt { text-align: center; font-size: 12px; color: var(--muted); padding: 10px; background: #f9fafb; border-radius: 10px; }
.avis-login-prompt a { color: var(--gold-dark); font-weight: 700; cursor: pointer; text-decoration: none; }

/* Dans la grille : masquer la description complète */
.prod-desc-short {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 10px;
    display: none; /* Masqué par défaut */
}

/* En vue liste : afficher avec limite de lignes */
.list-view .prod-desc-short {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limite à 2 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Dans le modal : afficher la description complète */
.modal-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
    margin: 12px 0;
    white-space: pre-wrap; /* Conserve les sauts de ligne */
}
 
    :root {
      --gold:#fbf793; --gold-l:#daea55; --gold-bg:#f5f8d6; --gold-dark:#a8b830;
      --black:#0d0d0d; --navy:#0d0d0d; --cream:#f9f8f0;
      --green:#16A34A; --green-bg:#F0FDF4; --red:#DC2626; --red-bg:#FEF2F2;
      --text:#1a1a1a; --muted:#6B6660; --border:rgba(0,0,0,0.09); --white:#ffffff;
      --r:14px; --r-lg:22px;
    }

header { position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(255,255,255,0.98);border-bottom:1px solid var(--border);transition:box-shadow .3s; }

@supports (backdrop-filter: blur(20px)) {
  @media (min-width: 901px) {
    header { backdrop-filter: blur(20px); background: rgba(255,255,255,0.92); }
  }
}
    header.scrolled { box-shadow:0 4px 24px rgba(0,0,0,0.08); }
    .flash-bar { background:var(--black);padding:6px 32px;border-bottom:1px solid rgba(200,217,58,0.3);display:flex;align-items:center;gap:12px;overflow:hidden;width:100%; }
    .flash-label { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:rgba(255,255,255,0.2);padding:2px 10px;border-radius:100px;flex-shrink:0; }
    .flash-scroll { overflow:hidden;flex:1;min-width:0; }
.avis-summary, .avis-item, .avis-form {

  position: relative;
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0,0,0);
}
.flash-text {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    padding-right: 80px;
    animation: ticker 30s linear infinite;
    /* ✅ Utiliser will-change au lieu de transform statique */
    will-change: transform;
    /* ✅ Ajouter backface-visibility sans transform statique */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@keyframes ticker {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}   .nav-bar-wrapper { max-width:1400px;margin:0 auto;width:100%; }
    .nav-bar { display:flex;align-items:center;gap:16px;padding:12px 32px;width:100%; }
    .nav-logo { display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0; }
    .nav-logo-img { width:65px;height:65px;border-radius:50%;overflow:hidden;background:none;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:16px;font-weight:900;color:#fff;flex-shrink:0; }
    .nav-logo-img img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
    .nav-logo-name { font-family:'Playfair Display',serif;font-size:17px;font-weight:900;color:var(--black);line-height:1; }
    .nav-logo-name span { color:var(--gold); }

.nav-search { flex:1;max-width:520px;display:flex;align-items:center;background:var(--white);border:1.5px solid var(--border);border-radius:100px;overflow:visible;transition:border-color .2s,box-shadow .2s;position:relative; }
    .nav-search:focus-within { border-color:var(--gold-dark);box-shadow:0 0 0 3px rgba(200,217,58,0.15); }
    .nav-search input { flex:1;border:none;outline:none;padding:10px 18px;font-size:13px;font-family:inherit;background:transparent;color:var(--text);min-width:0;border-radius:100px; }
    .nav-search-btn { background:var(--black);color:var(--gold);border:none;padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s;flex-shrink:0;border-radius:0 100px 100px 0; }
    .nav-search-btn:hover { background:#222; }

.autocomplete-drop {
      position:absolute;
      top:calc(100% + 8px);
      left:0; right:0;
      background:#fff;
      border-radius:16px;
      box-shadow:0 16px 48px rgba(0,0,0,0.14);
      border:1.5px solid var(--border);
      overflow:hidden;
      display:none;
      z-index:9999;
      max-height:400px;
      overflow-y:auto;
    }
    .autocomplete-drop.show { display:block; }
    .ac-header { padding:8px 16px 6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); border-bottom:1px solid var(--border); }
    .ac-item {
      padding:10px 16px;
      font-size:13px;
      cursor:pointer;
      color:var(--text);
      display:flex;
      align-items:center;
      gap:12px;
      transition:background .12s;
      border-bottom:1px solid rgba(0,0,0,0.04);
    }
    .ac-item:last-child { border-bottom:none; }
    .ac-item:hover { background:var(--gold-bg); }
    .ac-item-img {
      width:40px; height:40px;
      border-radius:8px;
      object-fit:cover;
      background:#f5f0e8;
      flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      font-size:18px;
      overflow:hidden;
    }
    .ac-item-img img { width:100%;height:100%;object-fit:cover;border-radius:8px; }
    .ac-item-info { flex:1;min-width:0; }
    .ac-item-name { font-weight:700;color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ac-item-name mark { background:none; color:var(--gold-dark); font-weight:800; }
    .ac-item-sub { font-size:11px;color:var(--muted);margin-top:1px; }
    .ac-item-price { font-family:'Playfair Display',serif;font-size:14px;font-weight:900;color:var(--black);flex-shrink:0; }
    .ac-no-result { padding:20px 16px; text-align:center; color:var(--muted); font-size:13px; }

    .nav-right { display:flex;align-items:center;gap:10px;flex-shrink:0; }
    .user-btn { display:flex;align-items:center;gap:7px;background:#0d0d0d;color:#faf794;border:1.5px solid var(--border);padding:8px 16px;border-radius:100px;cursor:pointer;font-size:12px;font-weight:700;font-family:inherit;transition:all .2s; }
    .user-btn:hover { border-color:var(--black);background:var(--black);color:var(--gold); }

    .user-btn-wrap { position:relative; }
     .user-dropdown {
      position:absolute; top:calc(100% + 14px); right:0;
      width:380px !important; max-width:none !important;
      background:var(--white);
      border:1px solid var(--border); border-radius:24px;
      box-shadow:0 24px 60px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.06);
      opacity:0; visibility:hidden; transform:translateY(-8px);
      transition:opacity .2s, transform .2s, visibility .2s;
      z-index:300; overflow:hidden;
    }
    .user-dropdown.open { opacity:1; visibility:visible; transform:translateY(0); }

.ud-section-head {
      padding:22px 26px 14px;
      font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
      color:var(--muted);
    }

.ud-head {
      padding:22px 26px; background:var(--gold-bg);
      border-bottom:1px solid rgba(168,184,48,0.2);
      display:flex; align-items:center; gap:16px;
    }
    .ud-avatar {
      width:56px; height:56px; border-radius:50%;
      background:var(--black); color:var(--gold);
      display:flex; align-items:center; justify-content:center;
      font-family:'Playfair Display',serif; font-size:19px; font-weight:900;
      flex-shrink:0;
    }
    .ud-user-info { flex:1; min-width:0; }
    .ud-user-name { font-size:16px; font-weight:700; color:var(--black); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ud-user-tel { font-size:13px; color:var(--muted); margin-top:3px; }

.ud-list { padding:12px 14px 18px; }
    .ud-link {
      display:flex; align-items:center; gap:14px;
      padding:14px 18px; font-size:14px; font-weight:600;
      color:var(--text); text-decoration:none; cursor:pointer;
      transition:background .15s; border:none; background:none;
      width:100%; text-align:left; font-family:inherit;
      border-radius:14px;
    }
    .ud-link:hover { background:var(--cream); }
    .ud-link .ud-ico { font-size:18px; width:24px; text-align:center; flex-shrink:0; }
    .ud-divider { height:1px; background:var(--border); margin:8px 14px; }
    .ud-logout { color:var(--red); }
    .ud-logout:hover { background:var(--red-bg); }

.ud-guest-body { padding:6px 18px 22px; }
    .ud-guest-btn {
      display:flex; align-items:center; justify-content:center; gap:10px;
      width:100%; padding:16px 20px;
      background:var(--gold); color:var(--black);
      border:none; border-radius:16px;
      font-size:15px; font-weight:700; cursor:pointer;
      font-family:inherit; transition:background .2s, transform .15s;
      margin-bottom:6px; text-decoration:none;
      box-shadow:0 4px 14px rgba(200,217,58,0.3);
    }
    .ud-guest-btn:hover { background:var(--gold-l); transform:translateY(-1px); }
    .ud-guest-btn::before { content:'🔑'; font-size:16px; }
    .ud-guest-link {
      display:flex; align-items:center; gap:12px;
      padding:14px 18px; font-size:14px; font-weight:500;
      color:var(--text); text-decoration:none;
      border-radius:14px; transition:background .15s;
      margin-top:8px;
    }
    .ud-guest-link:hover { background:var(--cream); color:var(--black); }
    .ud-guest-link::before { content:'📦'; font-size:16px; }

@media(max-width:640px) {
      .user-btn-wrap { position:static; }
      .user-dropdown {
        position:fixed !important;
        top:95px !important;
        left:12px !important;
        right:12px !important;
        width:auto !important;
        max-width:none !important;
        border-radius:20px !important;
      }
      .ud-head { padding:18px 20px; gap:12px; }
      .ud-avatar { width:48px; height:48px; font-size:16px; }
      .ud-user-name { font-size:14px; }
      .ud-user-tel { font-size:12px; }
      .ud-list { padding:10px 10px 14px; }
      .ud-link { padding:12px 14px; font-size:13px; }
      .ud-section-head { padding:18px 20px 10px; }
      .ud-guest-body { padding:4px 14px 18px; }
      .ud-guest-btn { padding:14px 16px; font-size:14px; }
      .ud-guest-link { padding:12px 14px; font-size:13px; }
    }
    .cart-btn { display:flex;align-items:center;gap:8px;background:var(--black);color:var(--gold);border:1.5px solid var(--gold);padding:10px 20px;border-radius:100px;cursor:pointer;font-size:13px;font-weight:700;font-family:inherit;transition:background .2s,transform .2s;position:relative; }
    .cart-btn:hover { background:var(--gold);color:var(--black);transform:translateY(-1px); }
    .cart-count { position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--gold);color:var(--black);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--cream); }
    .hamburger { display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px;flex-shrink:0; }
    .hamburger span { display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:all .3s; }
    .hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity:0; }
    .hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
    .mobile-nav-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:500); }
    .mobile-nav-overlay.on { display:block; }
    .mobile-nav { position:fixed;top:0;left:-320px;bottom:0;width:300px;background:var(--white);z-index:501;display:flex;flex-direction:column;box-shadow:6px 0 40px rgba(0,0,0,0.15);transition:left .35s cubic-bezier(.4,0,.2,1);overflow-y:auto; }
    .mobile-nav.open { left:0; }
    .mobile-nav-head { display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;border-bottom:1px solid var(--border); }
    .mobile-nav-logo { font-family:'Playfair Display',serif;font-size:18px;font-weight:900;color:var(--black); }
    .mobile-nav-logo span { color:var(--gold); }
    .mobile-nav-close { width:34px;height:34px;border-radius:50%;background:var(--cream);border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--muted); }
    .mobile-nav-links { display:flex;flex-direction:column;padding:12px 16px;gap:2px;flex:1; }
    .mobile-nav-links a { font-size:15px;font-weight:600;color:var(--text);text-decoration:none;padding:13px 16px;border-radius:12px;display:flex;align-items:center;gap:12px;transition:background .2s,color .2s;cursor:pointer; }
    .mobile-nav-links a:hover { background:var(--gold-bg);color:var(--gold-dark); }
    .mobile-nav-foot { padding:16px 20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px; }
    .mn-cart-btn { display:flex;align-items:center;justify-content:center;gap:8px;background:var(--black);color:var(--gold);border:none;padding:14px;border-radius:100px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit; }
    .mn-account-btn { display:flex;align-items:center;justify-content:center;gap:8px;background:var(--cream);color:var(--navy);border:1.5px solid var(--border);padding:12px;border-radius:100px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s; }
    .mn-account-btn:hover { border-color:var(--navy);background:var(--navy);color:#fff; }

.hero-carousel {
  margin-top:105px;
  position:relative;
  overflow:hidden;
  width:100%;
  contain: layout paint;
  isolation: isolate;
}    .hero-slides {
  display:flex;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
    .hero-slide { min-width:100%;position:relative;height:360px;display:flex;align-items:center;overflow:hidden; }
    .hero-slide img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
    .hero-slide-overlay { position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,0.88) 0%,rgba(5,5,5,0.45) 60%,transparent 100%); }
    .hero-slide-content { position:relative;z-index:2;padding:48px 56px;max-width:560px; }
    .hero-tag { display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:var(--black);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:4px 14px;border-radius:100px;margin-bottom:16px; }
    .hero-slide-content h2 { font-family:'Playfair Display',serif;font-size:clamp(24px,3.5vw,44px);font-weight:900;color:#fff;line-height:1.1;margin-bottom:12px; }
    .hero-slide-content h2 em { color:var(--gold-l);font-style:normal; }
    .hero-slide-content p { font-size:14px;color:rgba(255,255,255,0.7);line-height:1.6;margin-bottom:24px; }
    .hero-cta { display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--black);padding:12px 28px;border-radius:100px;font-size:14px;font-weight:700;text-decoration:none;transition:background .2s,transform .2s;border:none;cursor:pointer;font-family:inherit; }
    .hero-cta:hover { background:#faf794;transform:translateY(-2px); }
    .hero-nav { position:absolute;bottom:20px;left:56px;display:flex;align-items:center;gap:10px;z-index:5; }
    .hero-dot { width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.4);cursor:pointer;transition:all .3s; }
    .hero-dot.active { background:var(--gold);width:28px;border-radius:4px; }
    .hero-arr { position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.2);color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;z-index:5;transition:background .2s; }
    .hero-arr:hover { background:rgba(255,255,255,0.25); }
    .hero-arr.prev { left:16px; } .hero-arr.next { right:16px; }
    .hero-pills-bar { background:var(--black);padding:10px 32px;display:flex;align-items:center;gap:16px;overflow-x:auto;width:100%; }
    .hero-pills-bar::-webkit-scrollbar { display:none; }
    .hero-pill { display:flex;align-items:center;gap:7px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);padding:7px 16px;border-radius:100px;white-space:nowrap;flex-shrink:0;font-size:12px;font-weight:600;color:rgba(255,255,255,0.75); }
    .hero-pill .dot { width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0; }

.shop-layout { display:grid;grid-template-columns:260px 1fr;gap:0;max-width:1400px;margin:0 auto;padding:0 0 80px;width:100%; }
    .sidebar { background:var(--white);border-right:1px solid var(--border);padding:28px 24px;position:sticky;top:105px;height:calc(100vh - 105px);overflow-y:auto; }
    .sidebar::-webkit-scrollbar { width:4px; }
    .sidebar::-webkit-scrollbar-thumb { background:var(--border);border-radius:4px; }
    .sidebar-section { margin-bottom:28px; }
    .sidebar-section-title { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border); }
    .cat-list { list-style:none;display:flex;flex-direction:column;gap:2px; }
    .cat-item a { display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--text);font-size:13px;font-weight:500;transition:background .2s,color .2s; }
    .cat-item a:hover,.cat-item a.active { background:var(--gold-bg);color:var(--gold-dark);font-weight:700; }
    .cat-item a .cat-ico { font-size:16px;margin-right:8px; }
    .cat-count { font-size:11px;color:var(--muted);background:#f5f5f5;padding:2px 8px;border-radius:100px; }
    .cat-item a.active .cat-count { background:rgba(200,217,58,0.2);color:var(--gold-dark); }
    .price-range { display:flex;flex-direction:column;gap:10px; }
    .price-inputs { display:flex;gap:8px; }
    .price-input { flex:1;padding:8px 12px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;font-family:inherit;color:var(--text);background:var(--cream);outline:none;transition:border-color .2s;min-width:0; }
    .price-input:focus { border-color:var(--gold-dark); }
    .price-slider { -webkit-appearance:none;width:100%;height:4px;border-radius:4px;background:#e0e0e0;outline:none; }
    .price-slider::-webkit-slider-thumb { -webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 2px 6px rgba(200,217,58,.4); }
    .filter-options { display:flex;flex-direction:column;gap:8px; }
    .filter-opt { display:flex;align-items:center;gap:10px;cursor:pointer; }
    .filter-opt input[type=checkbox] { display:none; }
    .check-box { width:18px;height:18px;border-radius:5px;flex-shrink:0;border:2px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s; }
    .filter-opt input:checked + .check-box { background:var(--gold);border-color:var(--gold); }
    .filter-opt input:checked + .check-box::after { content:'✓';font-size:11px;color:#fff;font-weight:700; }
    .filter-opt-label { font-size:13px;color:var(--text);font-weight:500; }
    .btn-filter-apply { width:100%;padding:11px;background:var(--black);color:var(--gold);border:none;border-radius:100px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .2s;margin-top:8px; }
    .btn-filter-apply:hover { background:#222; }

.shop-main { padding:24px 28px;min-width:0; }
    .shop-topbar { display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px; }
    .topbar-left { display:flex;align-items:center;gap:10px; }
    .results-count { font-size:13px;color:var(--muted); }
    .results-count b { color:var(--text);font-weight:700; }
    .topbar-right { display:flex;align-items:center;gap:12px; }
    .sort-select { padding:9px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;font-family:inherit;color:var(--text);background:var(--white);outline:none;cursor:pointer; }
    .view-toggle { display:flex;gap:4px; }
    .view-btn { width:36px;height:36px;border-radius:8px;border:1.5px solid var(--border);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:background .2s,border-color .2s; }
    .view-btn.active { background:var(--black);border-color:var(--gold);color:var(--gold); }
    .promo-banner { background:linear-gradient(135deg,#1a1a0a 0%,#2a2a10 50%,var(--black) 100%);border:1px solid rgba(200,217,58,0.25);border-radius:var(--r-lg);padding:24px 32px;display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;position:relative;overflow:hidden; }
    .promo-banner::before { content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,0.08); }
    .promo-banner-text h3 { font-family:'Playfair Display',serif;font-size:22px;font-weight:900;color:#fff;margin-bottom:4px; }
    .promo-banner-text p { font-size:13px;color:rgba(255,255,255,0.8); }
    .promo-banner-badge { background:var(--gold);color:var(--black);padding:10px 20px;border-radius:100px;font-size:14px;font-weight:800;white-space:nowrap;flex-shrink:0; }
    .cat-chips { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px; }
    .cat-chip { display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:100px;cursor:pointer;font-size:12px;font-weight:700;border:1.5px solid var(--border);background:var(--white);color:var(--text);transition:all .2s;user-select:none; }
    .cat-chip:hover { border-color:var(--gold-dark);color:var(--gold-dark);background:var(--gold-bg); }
    .cat-chip.active { background:var(--black);border-color:var(--black);color:var(--gold); }

.products-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px; }
    .products-grid.list-view { grid-template-columns:1fr; }
    .products-loading { grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:16px; }
    .spinner { width:40px;height:40px;border:3px solid var(--gold-bg);border-top-color:var(--gold-dark);border-radius:50%;animation:spin .8s linear infinite; }
    @keyframes spin { to{transform:rotate(360deg)} }
    /* ══════════════════════════════════════════════════════════════
   🚀 OPTIMISATION GPU ANTI-FLICKER (Mobile Android / Tecno / Infinix)
   ══════════════════════════════════════════════════════════════ */

.products-grid {
    contain: layout style paint;
    isolation: isolate;
}

.prod-card {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

}

.prod-img-wrap {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    contain: strict;
}

.prod-card:hover {
    transform: translateY(-4px) translateZ(0);
}

@media (max-width: 480px) {
    .prod-card {
        transition: none !important;
    }
    .prod-card:hover {
        transform: translateZ(0);
    }
    .prod-card:hover .prod-img-wrap img {
        transform: none;
    }
}
    .prod-card { background:var(--white);border-radius:var(--r-lg);border:1.5px solid var(--border);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s;overflow:hidden;cursor:pointer;position:relative; }
    .prod-card:hover { transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.12);border-color:rgba(200,217,58,0.4); }
    .prod-card.list-view { flex-direction:row;align-items:center; }
    .prod-img-wrap { position:relative;background:#f8f8f6;aspect-ratio:1;overflow:hidden; }
    .list-view .prod-img-wrap { width:120px;height:120px;flex-shrink:0;aspect-ratio:unset; }
    .prod-img-wrap img { width:100%;height:100%;object-fit:cover;transition:transform .3s; }
    .prod-card:hover .prod-img-wrap img { transform:scale(1.05); }
    .prod-img-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:52px;background:#f5f0e8; }
    .prod-badge { position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em; }
    .badge-promo { background:var(--gold);color:var(--black);font-weight:800; }
    .badge-new { background:var(--green);color:#fff; }
    .prod-wish { position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.9);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s;box-shadow:0 2px 8px rgba(0,0,0,0.1); }
    .prod-wish:hover { transform:scale(1.15);background:#fff; }
    .prod-wish svg { width:16px;height:16px; }
    .prod-body { padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;min-width:0; }
    .list-view .prod-body { padding:16px 20px; }
    .prod-category { font-size:10px;font-weight:700;color:var(--gold-dark);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px; }
    .prod-name { font-size:14px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:6px;flex:1; }
    .list-view .prod-name { font-size:16px; }
    .prod-weight { font-size:12px;color:var(--muted);margin-bottom:10px; }
    .prod-rating { display:flex;align-items:center;gap:5px;margin-bottom:10px; }
    .stars { color:#f59e0b;font-size:12px;letter-spacing:-1px; }
    .rating-count { font-size:11px;color:var(--muted); }
    .prod-price-row { display:flex;align-items:center;justify-content:space-between;margin-top:auto; }
    .prod-price { font-family:'Playfair Display',serif;font-size:20px;font-weight:900;color:var(--black); }
    .prod-price-old { font-size:13px;color:var(--muted);text-decoration:line-through;margin-left:6px; }
    .prod-add-btn { width:36px;height:36px;border-radius:10px;background:var(--black);color:var(--gold);border:1.5px solid var(--gold);cursor:pointer;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;flex-shrink:0; }
    .prod-add-btn:hover { background:var(--gold);color:var(--black);transform:scale(1.1); }
    .prod-qty-ctrl { display:none;align-items:center;gap:0;background:var(--black);border-radius:10px;overflow:hidden;border:1px solid var(--gold); }
    .prod-qty-ctrl.show { display:flex; }
    .qty-btn { width:32px;height:36px;background:none;border:none;font-size:16px;cursor:pointer;color:var(--gold);font-weight:700;transition:background .2s; }
    .qty-btn:hover { background:rgba(200,217,58,0.15); }
    .qty-num { font-size:14px;font-weight:700;color:var(--gold);min-width:24px;text-align:center; }
    .stock-indicator { display:flex;align-items:center;gap:5px;margin-bottom:8px; }
    .stock-dot { width:6px;height:6px;border-radius:50%;flex-shrink:0; }
    .stock-dot.in { background:var(--green); } .stock-dot.low { background:#f59e0b; } .stock-dot.out { background:#dc2626; }
    .stock-text { font-size:11px;font-weight:600; }
    .stock-text.in { color:var(--green); } .stock-text.low { color:#f59e0b; } .stock-text.out { color:#dc2626; }
    .prod-desc-short { font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:10px;display:none; }
    .list-view .prod-desc-short { display:block; }

.cart-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300; }
    .cart-overlay.on { display:block; }
    .cart-drawer { position:fixed;top:0;right:-440px;bottom:0;width:420px;max-width:100vw;background:#fff;z-index:301;transition:right .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(0,0,0,.12); }
    .cart-drawer.on { right:0; }
    .cart-head { padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0; }
    .cart-title { font-family:'Playfair Display',serif;font-size:22px;font-weight:900;color:var(--black); }
    .cart-close { background:none;border:none;font-size:24px;cursor:pointer;color:var(--muted);line-height:1;padding:4px;transition:color .2s; }
    .cart-close:hover { color:var(--text); }
    .cart-body { flex:1;overflow-y:auto;padding:16px 24px; }
    .cart-empty { text-align:center;padding:60px 20px; }
    .cart-empty-icon { font-size:60px;margin-bottom:16px; }
    .cart-empty h3 { font-family:'Playfair Display',serif;font-size:20px;font-weight:900;color:var(--navy);margin-bottom:8px; }
    .cart-empty p { font-size:14px;color:var(--muted); }
    .cart-item { display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--border); }
    .cart-item:last-child { border-bottom:none; }
    .cart-item-img { width:64px;height:64px;border-radius:10px;background:#f5f0e8;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:26px; }
    .cart-item-img img { width:100%;height:100%;object-fit:cover; }
    .cart-item-info { flex:1;min-width:0; }
    .cart-item-name { font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px;line-height:1.3; }
    .cart-item-variant { font-size:11px;color:var(--muted);margin-bottom:8px; }
    .cart-item-row { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px; }
    .cart-item-price { font-family:'Playfair Display',serif;font-size:17px;font-weight:900;color:var(--black); }
    .cart-item-qty { display:flex;align-items:center;background:var(--black);border-radius:8px;overflow:hidden; }
    .ciq-btn { width:28px;height:28px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:700;color:var(--gold);transition:background .2s; }
    .ciq-btn:hover { background:rgba(200,217,58,0.2); }
    .ciq-num { font-size:13px;font-weight:700;color:var(--gold);min-width:22px;text-align:center; }
    .cart-item-del { background:none;border:none;cursor:pointer;color:#dc2626;font-size:15px;padding:4px; }
    .cart-promo { padding:14px 0;border-bottom:1px solid var(--border); }
    .promo-input-wrap { display:flex;gap:8px; }
    .promo-input { flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;font-family:inherit;outline:none;transition:border-color .2s;min-width:0; }
    .promo-input:focus { border-color:var(--gold-dark); }
    .promo-apply-btn { padding:10px 18px;background:var(--black);color:var(--gold);border:none;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;flex-shrink:0; }
    .cart-foot { padding:20px 24px;border-top:1px solid var(--border);flex-shrink:0;background:var(--cream); }
    .cart-totals { display:flex;flex-direction:column;gap:8px;margin-bottom:16px; }
    .cart-total-row { display:flex;justify-content:space-between;font-size:13px;color:var(--muted); }
    .cart-total-row.main { font-size:16px;font-weight:700;color:var(--text);padding-top:8px;border-top:1px solid var(--border); }
    .cart-total-row .amount { font-family:'Playfair Display',serif;font-size:20px;font-weight:900;color:var(--black); }
    .delivery-toggle { display:flex;gap:8px;margin-bottom:16px; }
    .delivery-opt { flex:1;padding:10px;border-radius:10px;border:1.5px solid var(--border);cursor:pointer;text-align:center;transition:all .2s;font-size:12px;font-weight:600;color:var(--muted);background:#fff; }
    .delivery-opt.active { border-color:var(--gold-dark);color:var(--black);background:var(--gold-bg);font-weight:700; }
    .delivery-opt-icon { font-size:18px;display:block;margin-bottom:3px; }
    .btn-checkout { width:100%;padding:15px;background:var(--black);color:var(--gold);border:none;border-radius:100px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s,transform .2s;box-shadow:0 6px 20px rgba(200,217,58,.25); }
    .btn-checkout:hover { background:var(--gold);color:var(--black);transform:translateY(-1px); }

.checkout-panel { display:none;flex-direction:column;gap:0; }
    .checkout-panel.on { display:flex; }
    .checkout-panel-head { display:flex;align-items:center;gap:12px;padding:16px 24px 12px;border-bottom:1px solid var(--border);background:#fff; }
    .checkout-back-btn { background:none;border:none;cursor:pointer;font-size:20px;color:var(--muted);padding:0;line-height:1;transition:color .2s; }
    .checkout-back-btn:hover { color:var(--text); }
    .checkout-panel-title { font-family:'Playfair Display',serif;font-size:18px;font-weight:900;color:var(--black); }
    .checkout-body { flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:16px; }
    .co-field { display:flex;flex-direction:column;gap:6px; }
    .co-user-chip { display:flex; align-items:center; gap:12px; background:var(--gold-bg); border:1.5px solid rgba(168,184,48,0.4); border-radius:12px; padding:12px 14px; margin-bottom:12px; }
    .co-user-chip-ico { width:36px; height:36px; border-radius:50%; background:var(--black); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
    .co-user-chip-info { flex:1; min-width:0; }
    .co-user-chip-name { font-size:13px; font-weight:700; color:var(--black); }
    .co-user-chip-tel { font-size:11px; color:var(--muted); margin-top:1px; }
    .co-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#374151; }
    .co-input { padding:11px 14px;border:1.5px solid var(--border);border-radius:12px;font-size:14px;font-family:inherit;color:var(--text);background:#fafaf5;outline:none;transition:border-color .2s;width:100%; }
    .co-input:focus { border-color:var(--gold-dark);background:#fff; }
    .co-input::placeholder { color:#b0aba6; }
    .co-section-title { font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding-top:4px;border-top:1px solid var(--border);margin-top:4px; }
    .co-summary { background:var(--gold-bg);border:1px solid rgba(168,184,48,0.3);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px; }
    .co-summary-row { display:flex;justify-content:space-between;font-size:13px;color:var(--muted); }
    .co-summary-row.total { font-size:15px;font-weight:700;color:var(--black);border-top:1px solid rgba(168,184,48,0.3);padding-top:8px;margin-top:4px; }
    .co-summary-row .co-amt { font-family:'Playfair Display',serif;font-size:18px;font-weight:900;color:var(--black); }
    .co-payment-select { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
    .co-pay-opt { display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--border);cursor:pointer;font-size:12px;font-weight:700;background:#fff;transition:all .2s;user-select:none; }
    .co-pay-opt.selected { border-color:var(--gold-dark);background:var(--gold-bg);color:var(--black); }
    .co-pay-opt input { display:none; }
    .co-confirm-btn { width:100%;padding:15px;background:var(--black);color:var(--gold);border:none;border-radius:100px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s,transform .2s;box-shadow:0 6px 20px rgba(200,217,58,.25); }
    .co-confirm-btn:hover { background:var(--gold);color:var(--black);transform:translateY(-1px); }
    .co-confirm-btn:disabled { opacity:.6;cursor:not-allowed;transform:none; }
    .co-success { display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;gap:16px; }
    .co-success.on { display:flex; }
    .co-success-icon { font-size:64px;animation:popIn .5s cubic-bezier(.34,1.56,.64,1); }
    @keyframes popIn { from{transform:scale(0)} to{transform:scale(1)} }
    .co-success h3 { font-family:'Playfair Display',serif;font-size:22px;font-weight:900;color:var(--black); }
    .co-success p { font-size:14px;color:var(--muted);line-height:1.6; }
    .co-success-num { font-size:13px;font-weight:700;color:var(--gold-dark);background:var(--gold-bg);padding:8px 20px;border-radius:100px; }
    .co-close-btn { padding:12px 32px;background:var(--black);color:var(--gold);border:none;border-radius:100px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit; }

.modal-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:400;align-items:center;justify-content:center;padding:20px; }
    .modal-overlay.on { display:flex; }
    .modal-box { background:#fff;border-radius:24px;width:100%;max-width:780px;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 32px 80px rgba(0,0,0,0.2);animation:modalIn .3s cubic-bezier(.34,1.56,.64,1); }
    @keyframes modalIn { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }
    .modal-close { position:absolute;top:16px;right:16px;z-index:2;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.07);border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center; }

    .modal-close { position:absolute;top:16px;right:16px;z-index:2;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.07);border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center; }

    .modal-body { display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"img info" "reco reco"; }
    .modal-img { grid-area:img; background:#f5f0e8;border-radius:24px 0 0 24px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative; }
    .modal-img img { width:100%;height:100%;object-fit:cover; }
    .modal-img-placeholder { font-size:100px; }
    .modal-info { grid-area:info; padding:32px;display:flex;flex-direction:column;gap:12px;min-width:0; }
    .modal-body > .reco-section { grid-area:reco; }

.modal-cat { font-size:11px;font-weight:700;color:var(--gold-dark);text-transform:uppercase;letter-spacing:.08em; }
    .modal-name { font-family:'Playfair Display',serif;font-size:26px;font-weight:900;color:var(--black);line-height:1.2; }
    .modal-brand { font-size:13px;color:var(--muted); }
    .modal-price-row { display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; }
    .modal-price { font-family:'Playfair Display',serif;font-size:32px;font-weight:900;color:var(--black); }
    .modal-price-old { font-size:16px;color:var(--muted);text-decoration:line-through; }
    .modal-desc { font-size:13px;color:var(--muted);line-height:1.7; }
    .modal-stock { display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600; }
    .modal-stock.in { background:var(--green-bg);color:var(--green); }
    .modal-stock.low { background:#fffbeb;color:#d97706; }
    .modal-stock.out { background:var(--red-bg);color:var(--red); }
    .modal-qty-row { display:flex;align-items:center;gap:12px;margin-top:4px; }
    .modal-qty-ctrl { display:flex;align-items:center;background:var(--black);border-radius:12px;overflow:hidden;border:1px solid var(--gold); }
    .modal-qty-btn { width:38px;height:38px;background:none;border:none;cursor:pointer;font-size:18px;color:var(--gold);font-weight:700; }
    .modal-qty-num { font-size:15px;font-weight:700;color:var(--gold);min-width:28px;text-align:center; }
    .modal-add-btn { flex:1;padding:12px 20px;background:var(--black);color:var(--gold);border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .2s;display:flex;align-items:center;justify-content:center;gap:8px; }
    .modal-add-btn:hover { background:var(--gold);color:var(--black); }
    .modal-tags { display:flex;gap:6px;flex-wrap:wrap; }
    .modal-tag { font-size:11px;padding:4px 12px;border-radius:100px;background:var(--cream);color:var(--muted);font-weight:600; }

.modal-wish { position:absolute;top:16px;left:16px;z-index:3;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.92);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,0.15);transition:transform .2s,background .2s; }
    .modal-wish:hover { transform:scale(1.1);background:#fff; }
    .modal-wish svg { width:20px;height:20px; }

.reco-section { border-top:1px solid var(--border); padding:24px 32px 28px; background:#fafaf5; }
    .reco-title { font-size:13px;font-weight:700;color:var(--black);margin-bottom:14px;display:flex;align-items:center;gap:8px; }
    .reco-title::before { content:'✨'; }
    .reco-scroll { display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; }
    .reco-scroll::-webkit-scrollbar { height:6px; }
    .reco-scroll::-webkit-scrollbar-track { background:transparent; }
    .reco-scroll::-webkit-scrollbar-thumb { background:var(--border);border-radius:10px; }
    .reco-card { flex:0 0 140px;background:var(--white);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;scroll-snap-align:start;transition:transform .2s,box-shadow .2s,border-color .2s; }
    .reco-card:hover { transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.1);border-color:rgba(200,217,58,0.4); }
    .reco-card-img-wrap { position:relative; }
    .reco-card-img { width:100%;height:100px;background:#f5f0e8;display:flex;align-items:center;justify-content:center;font-size:32px;overflow:hidden; }
    .reco-card-img img { width:100%;height:100%;object-fit:cover; }
    .reco-card-body { padding:8px 10px; }
    .reco-card-name { font-size:11px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:28px; }
    .reco-card-brand { font-size:9px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em; }
    .reco-card-price { font-family:'Playfair Display',serif;font-size:13px;font-weight:900;color:var(--black); }
    .reco-card-price-old { font-size:10px;color:var(--muted);text-decoration:line-through;margin-left:4px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500; }
    .reco-card-badge { position:absolute;top:6px;right:6px;background:var(--gold);color:var(--black);font-size:9px;font-weight:700;padding:2px 6px;border-radius:100px; }
    .reco-empty { text-align:center;padding:20px;color:var(--muted);font-size:12px; }
    @media(min-width:901px) { .reco-card { flex:0 0 160px; } .reco-card-img { height:120px; } }

.modal-wish { position:absolute;top:16px;left:16px;z-index:3;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.92);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,0.15);transition:transform .2s,background .2s; }
    .modal-wish:hover { transform:scale(1.1);background:#fff; }
    .modal-wish svg { width:20px;height:20px; }

.reco-section { padding:24px 32px 28px; background:#fafaf5; border-top:1px solid var(--border); }
    .reco-title { font-size:13px;font-weight:700;color:var(--black);margin-bottom:14px;display:flex;align-items:center;gap:8px; }
    .reco-title::before { content:'✨'; }
    .reco-scroll { display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; }
    .reco-scroll::-webkit-scrollbar { height:6px; }
    .reco-scroll::-webkit-scrollbar-track { background:transparent; }
    .reco-scroll::-webkit-scrollbar-thumb { background:var(--border);border-radius:10px; }
    .reco-card { flex:0 0 140px;background:var(--white);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;scroll-snap-align:start;transition:transform .2s,box-shadow .2s,border-color .2s; }
    .reco-card:hover { transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.1);border-color:rgba(200,217,58,0.4); }
    .reco-card-img-wrap { position:relative; }
    .reco-card-img { width:100%;height:100px;background:#f5f0e8;display:flex;align-items:center;justify-content:center;font-size:32px;overflow:hidden; }
    .reco-card-img img { width:100%;height:100%;object-fit:cover; }
    .reco-card-body { padding:8px 10px; }
    .reco-card-name { font-size:11px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:28px; }
    .reco-card-brand { font-size:9px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em; }
    .reco-card-price { font-family:'Playfair Display',serif;font-size:13px;font-weight:900;color:var(--black); }
    .reco-card-price-old { font-size:10px;color:var(--muted);text-decoration:line-through;margin-left:4px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500; }
    .reco-card-badge { position:absolute;top:6px;right:6px;background:var(--gold);color:var(--black);font-size:9px;font-weight:700;padding:2px 6px;border-radius:100px; }
    .reco-empty { text-align:center;padding:20px;color:var(--muted);font-size:12px; }

@media(min-width:901px) {
      .modal-body { grid-template-columns:1fr 1fr; grid-template-areas:"img info" "reco reco"; }
      .modal-img { grid-area:img; }
      .modal-info { grid-area:info; }
      .modal-body > .reco-section { grid-area:reco; }
      .reco-card { flex:0 0 160px; }
      .reco-card-img { height:120px; }
    }

.toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--black);color:var(--gold);border:1px solid rgba(200,217,58,0.4);padding:12px 24px;border-radius:100px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px;z-index:9999;transition:transform .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 24px rgba(0,0,0,0.2);white-space:nowrap;max-width:calc(100vw - 32px); }
    .toast.show { transform:translateX(-50%) translateY(0); }

footer { background:#f0f4e8;color:rgba(0,0,0,0.6);border-top:2px solid rgba(168,184,48,0.3); }
    .footer-top { padding:64px 48px 40px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px; }

.footer-brand { display:flex;flex-direction:column;gap:0;align-items:flex-start; }
    .footer-logo-img {
      width:180px;
      height:180px;
      display:block;
      margin-bottom:16px;
      padding:10px;
      object-fit:contain;
    }

    .footer-socials { display:flex;gap:8px; }
    .social-btn {
      width:40px;height:40px;
      border-radius:10px;
      background:#fff;
      border:1.5px solid rgba(0,0,0,0.12);
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;text-decoration:none;
      transition:background .2s,border-color .2s;
    }
    .social-btn:hover { background:#f3f4f6;border-color:rgba(0,0,0,0.22); }
    .social-btn svg { width:18px;height:18px;fill:rgba(0,0,0,0.5); }

    .footer-col h4 { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(0,0,0,0.4);margin-bottom:20px; }
    .footer-col ul { list-style:none;display:flex;flex-direction:column;gap:12px; }
    .footer-col ul li a { font-size:13px;color:rgba(0,0,0,0.55);text-decoration:none;transition:color .2s; }
    .footer-col ul li a:hover { color:var(--black); }
    .footer-hours { display:flex;flex-direction:column;gap:10px; }
    .hour-row { display:flex;justify-content:space-between;font-size:12px; }
    .hour-row .day { color:rgba(0,0,0,0.4); } .hour-row .time { color:rgba(0,0,0,0.75);font-weight:600; }
    .footer-contact { display:flex;flex-direction:column;gap:10px; }
    .contact-item { display:flex;align-items:flex-start;gap:10px;font-size:13px; }
    .contact-item .ci-icon { font-size:15px;margin-top:1px; }
    .contact-item span { color:rgba(0,0,0,0.55);line-height:1.5; }
    .footer-mid { margin:0 48px;border-top:1px solid rgba(0,0,0,0.1);padding:28px 0;display:flex;align-items:center;justify-content:space-between; }
    .footer-newsletter { display:flex;gap:10px;align-items:center;flex-wrap:wrap; }
    .footer-newsletter span { font-size:13px;color:rgba(0,0,0,0.5); }
    .newsletter-input-wrap { display:flex;background:rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.12);border-radius:100px;overflow:hidden; }
    .newsletter-input-wrap input { padding:9px 16px;background:transparent;border:none;outline:none;font-size:13px;color:var(--black);font-family:inherit;width:220px;min-width:0; }
    .newsletter-btn { padding:9px 18px;background:var(--gold-dark);border:none;color:#fff;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;flex-shrink:0; }
    .footer-bottom { padding:20px 48px;border-top:1px solid rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:rgba(0,0,0,0.35);background:#e8eed6; }
    .footer-bottom a { color:rgba(0,0,0,0.45);text-decoration:none; }
    .footer-bottom a:hover { color:var(--black); }
    .footer-bottom-links { display:flex;gap:20px; }

.co-register-body { padding:20px 24px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;flex:1; }
    .co-register-hero { background:linear-gradient(135deg,#0d0d0d 0%,#1a1a0a 100%);border-radius:16px;padding:20px;text-align:center;margin-bottom:4px; }
    .co-register-hero-icon { font-size:36px;margin-bottom:8px; }
    .co-register-hero h3 { font-family:'Playfair Display',serif;font-size:18px;font-weight:900;color:#fff;margin-bottom:6px; }
    .co-register-hero p { font-size:12px;color:rgba(255,255,255,0.55);line-height:1.5; }
    .co-register-benefits { display:flex;flex-direction:column;gap:6px;background:var(--gold-bg);border-radius:12px;padding:12px 14px; }
    .co-register-benefit { display:flex;align-items:center;gap:8px;font-size:12px;color:#374151;font-weight:600; }
    .co-register-benefit span:first-child { font-size:15px; }
    .reg-error { background:#fee2e2;color:#dc2626;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:600;display:none;text-align:center; }
    .reg-error.on { display:block; }
    .reg-back-link { background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;font-family:inherit;text-decoration:underline;text-align:center;padding:0; }
    .payment-badges { display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;justify-content:center; }
    .pay-badge { padding:4px 10px;border-radius:8px;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;height:34px; }

@media(max-width:900px) {
  .shop-layout{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;border-right:none;border-bottom:1px solid var(--border);display:none}
  .sidebar.open{display:block}
  .hamburger{display:flex}
  .nav-bar{flex-wrap:wrap;padding:10px 16px}
  .nav-search{order:3;max-width:100%;width:100%;flex:0 0 100%}
  .hero-carousel{margin-top:120px}
  .hero-slide{height:280px}
  .hero-slide-content{padding:28px 32px}
  .hero-slide-content h2{font-size:26px}
  .shop-main{padding:18px 16px}
  .cart-drawer{width:100%;right:-100%}
  .products-grid{grid-template-columns:repeat(2,1fr);gap:12px}

.modal-overlay { padding: 12px; }
  .modal-box { max-width: 100%; width: 100%; }
  .modal-body {
    grid-template-columns: 1fr;
    grid-template-areas: "img" "info" "reco";
    width: 100%;
    max-width: 100%;
  }
  .modal-img {
    grid-area: img;
    border-radius: 24px 24px 0 0;
    aspect-ratio: 16/9;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .modal-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .modal-info {
    grid-area: info;
    padding: 24px 20px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .reco-section {
    padding: 18px 20px 22px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .reco-scroll { max-width: 100%; }

  .footer-top{padding:40px 24px 28px;grid-template-columns:1fr 1fr;gap:28px}
  .footer-mid{margin:0 24px;flex-direction:column;gap:20px}
  .footer-bottom{padding:16px 24px;flex-direction:column;gap:10px;text-align:center}
}

    @media(max-width:480px) {
      .nav-bar{padding:10px 16px}.hero-slide{height:240px}.hero-slide-content{padding:20px}.hero-slide-content h2{font-size:22px}
      .hero-slide-content p{display:none}.products-grid{grid-template-columns:repeat(2,1fr);gap:10px}
      .promo-banner{flex-direction:column;gap:12px;text-align:center}
    }
    @media(max-width:900px) { .btn-label{display:none}.user-btn{padding:7px 10px}.cart-btn{padding:8px 12px} }

    .hero-pill {
  text-decoration: none;
  color: white;
  cursor: pointer;
}
.hero-pill:hover {

  opacity: 0.8;
}

.delivery-toggle { display:flex; gap:6px; margin-bottom:16px; }
.delivery-opt { flex:1; padding:10px 6px; font-size:11px; }
.delivery-opt-icon { font-size:18px; display:block; margin-bottom:3px; }

.mobile-cat-select {
  display: none;
  padding: 9px 36px 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--white);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6660' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  max-width: 160px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
@media (max-width: 900px) {
  .mobile-cat-select { display: block; }
}



footer { background:#f0f4e8; color:rgba(0,0,0,0.6); border-top:2px solid rgba(168,184,48,0.3); }

.footer-top {
  padding:48px 48px 32px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:40px;
  max-width:1400px;
  margin:0 auto;
}
.footer-col h4 {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#0d0d0d;
  margin:0 0 16px;
}
.footer-col h4.mt { margin-top:24px; }
.footer-col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-col ul li a {
  font-size:13px;
  color:rgba(0,0,0,0.6);
  text-decoration:none;
  transition:color .2s;
}
.footer-col ul li a:hover { color:#0d0d0d; }
.footer-col ul li.tel-line {
  font-size:13px;
  color:#0d0d0d;
  font-weight:600;
}

.footer-newsletter-text {
  font-size:13px;
  color:rgba(0,0,0,0.6);
  line-height:1.6;
  margin:0 0 14px;
}
.footer-newsletter-input {
  width:100%;
  padding:10px 16px;
  border:1px solid rgba(0,0,0,0.15);
  border-radius:100px;
  font-size:13px;
  font-family:inherit;
  outline:none;
  background:#fff;
  margin-bottom:8px;
  box-sizing:border-box;
  color:#0d0d0d;
}
.footer-newsletter-input:focus { border-color:#a8b830; }
.footer-newsletter-btn {
  width:100%;
  padding:11px 16px;
  background:#a8b830;
  color:#fff;
  border:none;
  border-radius:100px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:background .2s;
}
.footer-newsletter-btn:hover { background:#8fa028; }

.footer-address-card {
  background:#fff;
  border:1px solid rgba(168,184,48,0.35);
  border-radius:12px;
  padding:14px;
  margin-top:18px;
}
.footer-address-card-title {
  font-size:11px;
  font-weight:700;
  color:#0d0d0d;
  margin-bottom:8px;
}
.footer-address-card-text {
  font-size:12px;
  color:rgba(0,0,0,0.6);
  line-height:1.6;
}
.footer-address-card-text strong {
  color:#0d0d0d;
  font-weight:600;
}

.footer-mid {
  padding:24px 48px;
  border-top:1px solid rgba(0,0,0,0.1);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  max-width:1400px;
  margin:0 auto;
  box-sizing:border-box;
}
.footer-mid-block h4 {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#0d0d0d;
  margin:0 0 14px;
}
.footer-socials { display:flex; gap:8px; }
.social-btn {
  width:36px;
  height:36px;
  border-radius:50%;
  background:#0d0d0d;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:transform .2s, background .2s;
}
.social-btn:hover { transform:translateY(-2px); background:#1a1a1a; }
.social-btn svg { width:16px; height:16px; fill:#fbf793; }

.footer-payments {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.pay-tag {
  background:#fff;
  border:1px solid rgba(0,0,0,0.1);
  border-radius:8px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  height:38px;
  box-sizing:border-box;
  transition:transform .2s, border-color .2s;
}
.pay-tag:hover { transform:translateY(-1px); border-color:rgba(0,0,0,0.2); }
.pay-tag img {
  height:22px;
  width:auto;
  display:block;
  object-fit:contain;
}
.pay-tag.cash {
  font-size:12px;
  font-weight:700;
  color:#0d0d0d;
  padding:8px 14px;
  gap:5px;
}

.footer-bottom {
  padding:18px 48px;
  background:#e8eed6;
  text-align:center;
  border-top:1px solid rgba(0,0,0,0.08);
}
.footer-bottom-copyright {
  font-size:12px;
  color:rgba(0,0,0,0.55);
  font-weight:500;
  margin-bottom:4px;
}
.footer-bottom-rccm {
  font-size:11px;
  color:rgba(0,0,0,0.4);
  letter-spacing:.03em;
}

@media (max-width:900px) {
  .footer-top {
    grid-template-columns:1fr 1fr;
    gap:32px;
    padding:36px 24px 24px;
  }
  .footer-mid {
    grid-template-columns:1fr;
    gap:24px;
    padding:24px;
  }
  .footer-bottom { padding:16px 24px; }
}

@media (max-width:640px) {
  .footer-top { display:none; }
  .footer-mid { display:none; }
  .footer-mobile { display:block; }

  .footer-accordion {
    border-bottom:1px solid rgba(0,0,0,0.08);
  }
  .footer-accordion summary {
    padding:14px 22px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:#0d0d0d;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    list-style:none;
  }
  .footer-accordion summary::-webkit-details-marker { display:none; }
  .footer-accordion .acc-icon {
    font-size:14px;
    color:rgba(0,0,0,0.4);
    transition:transform .2s;
  }
  .footer-accordion[open] .acc-icon { transform:rotate(45deg); }
  .footer-accordion-body { padding:0 22px 16px; }
  .footer-accordion-body ul {
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:11px;
  }
  .footer-accordion-body ul li a {
    font-size:13px;
    color:rgba(0,0,0,0.65);
    text-decoration:none;
  }
  .footer-accordion-body ul li.tel-line {
    font-size:13px;
    color:#0d0d0d;
    font-weight:600;
  }

  .footer-newsletter-mobile { padding:22px 22px 18px; }
  .footer-newsletter-mobile-title {
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:#0d0d0d;
    margin-bottom:12px;
    text-align:center;
  }

  .footer-socials-mobile {
    padding:18px 22px;
    text-align:center;
    border-top:1px solid rgba(0,0,0,0.08);
  }
  .footer-socials-mobile-title {
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:#0d0d0d;
    margin-bottom:12px;
  }
  .footer-socials-mobile-row {
    display:flex;
    gap:8px;
    justify-content:center;
  }

  .footer-payments-mobile {
    padding:18px 22px;
    text-align:center;
    border-top:1px solid rgba(0,0,0,0.08);
  }
  .footer-payments-mobile-title {
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:#0d0d0d;
    margin-bottom:12px;
  }
  .footer-payments-mobile-row {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
  }
  .footer-payments-mobile-row .pay-tag {
    padding:6px 10px;
    height:34px;
  }
  .footer-payments-mobile-row .pay-tag img { height:20px; }
  .footer-payments-mobile-row .pay-tag.cash {
    font-size:11px;
    padding:6px 12px;
  }

  .footer-bottom { padding:20px 22px; }
  .footer-bottom-copyright {
    font-size:12px;
    color:rgba(0,0,0,0.6);
    font-weight:600;
    margin-bottom:6px;
  }
  .footer-bottom-rights {
    font-size:11px;
    color:rgba(0,0,0,0.55);
    font-weight:500;
    margin-bottom:6px;
  }
  .footer-bottom-rccm { font-size:9px; }
}

@media (min-width:641px) {
  .footer-mobile { display:none; }
}

.prod-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease, transform .3s;
    background-color: #f5f0e8;
}
.prod-img-wrap img[src=""], .prod-img-wrap img:not([src]) {
    opacity: 0;
}

.prod-img-wrap {
  overflow: hidden;
  background: #f5f0e8;
}

.prod-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prod-img-wrap img.img-error,
.prod-img-wrap img[src=""],
.prod-img-wrap img:not([src]) {
  display: none !important;
}

.prod-img-placeholder {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  width: 100%;
  height: 100%;
}

.nav-logo-img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  object-fit: contain;
}

/* ══════════════════════════════════════════════════════════════
   🛡️ FIX FINAL : Isolation GPU des Overlays (Anti-Flickering Mobile)
   ══════════════════════════════════════════════════════════════ */
.cart-overlay,
.modal-overlay,
.cart-drawer,
.modal-box {
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform;
}

.payment-badges img,
.co-pay-opt img,
.pay-tag img {
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}