*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --cream-light: #ffffff;
      --gold-orange: #b8860b;
      --brown-red: #b8860b;
      --zinc-50: #ffffff;
      --zinc-100: #fffaf0;
      --zinc-200: #eadfbf;
      --zinc-300: #d8c783;
      --zinc-400: #b8a45e;
      --zinc-500: #8a7a45;
      --zinc-600: #63582f;
      --zinc-700: #4f441f;
      --zinc-800: #2f2a14;
      --zinc-900: #17150b;
      --amber-500: #b8860b;
      --amber-600: #ff7f00;
      --amber-700: #8a6508;
      --white: #ffffff;
      --black: #000000;
    }
    body {
      font-family: 'Host Grotesk', sans-serif;
      background: var(--cream-light);
      color: var(--zinc-900);
      -webkit-font-smoothing: antialiased;
      line-height: 1.5;
      overflow-x: hidden;
    }
    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; font-family: inherit; }
    img { max-width: 100%; display: block; }
    ul { list-style: none; }

    /* ===== UTILITY ===== */
    .container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
    @media (min-width: 768px) { .container { padding: 0 3rem; } }
    @media (min-width: 1024px) { .container { padding: 0 4rem; } }

    .tag { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; border: 1px solid var(--zinc-300); }
    .tag-dot { width: 0.625rem; height: 0.625rem; background: var(--amber-500); }
    .tag-text { font-size: 0.875rem; font-weight: 500; color: var(--zinc-600); letter-spacing: 0.025em; }

    .btn-primary {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      padding: 0.75rem 2rem; background: var(--amber-500); color: var(--white);
      font-weight: 600; font-size: 0.875rem; border: none; transition: all 0.2s;
    }
    .btn-primary:hover { background: var(--amber-600); }
    .btn-primary.is-in-cart { background: #15803d; }
    .btn-primary.is-in-cart:hover { background: #166534; }

    .btn-outline {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      padding: 0.75rem 2rem; background: transparent; color: var(--amber-600);
      font-weight: 600; font-size: 0.875rem; border: 2px solid var(--amber-500); transition: all 0.2s;
    }
    .btn-outline:hover {
      background: var(--amber-500);
      color: var(--white);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(184, 134, 11, 0.24);
    }

    .section-border { border-bottom: 1px solid var(--zinc-200); }

    /* ===== VERTICAL LINES ===== */
    .vlines { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
    .vlines-inner { max-width: 1280px; margin: 0 auto; height: 100%; position: relative; }
    .vlines-inner::before, .vlines-inner::after {
      content: ''; position: absolute; top: 0; height: 100%; width: 1px; background: var(--zinc-200);
    }
    .vlines-inner::before { left: 0; }
    .vlines-inner::after { right: 0; }

    /* ===== NAV ===== */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(10px); border-bottom: 1px solid rgba(184,134,11,0.12);
      transition: all 0.3s ease;
    }
    .nav.scrolled { background: rgba(255,255,255,0.98); }
    .nav-inner {
      display: flex; align-items: center; justify-content: space-between;
      max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; height: 64px;
    }
    @media (min-width: 768px) { .nav-inner { padding: 0 3rem; } }
    @media (min-width: 1024px) { .nav-inner { padding: 0 4rem; } }
    .nav-logo {
      display: flex; align-items: center; gap: 0.75rem;
      height: 64px;
      max-height: 64px;
      overflow: hidden;
      color: var(--zinc-900); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.025em;
    }
    .nav-logo img,
    .nav-logo-image {
      width: 148px;
      height: auto;
      max-width: 100%;
    }
    .nav-context-badge {
      display: inline-flex;
      align-items: center;
      height: 1.5rem;
      padding: 0 0.55rem;
      border: 1px solid rgba(184, 134, 11, 0.16);
      background: var(--zinc-100);
      color: var(--amber-600);
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .nav-logo-dot { width: 0.5rem; height: 0.5rem; background: var(--amber-500); }
    .nav-links { display: none; align-items: center; gap: 2rem; }
    @media (min-width: 768px) { .nav-links { display: flex; } }
    .nav-link {
      font-size: 0.875rem; font-weight: 500; color: var(--zinc-600);
      transition: color 0.2s; position: relative;
    }
    .nav-link:hover, .nav-link.active { color: var(--zinc-900); }
    .nav-link.active::after {
      content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
      height: 2px; background: var(--amber-500);
    }
    .nav-mega { position: relative; }
    .nav-mega::after {
      content: '';
      position: absolute;
      left: -1rem;
      right: -1rem;
      top: 100%;
      height: 1.5rem;
    }
    .nav-mega-trigger { display: inline-flex; align-items: center; gap: 0.35rem; }
    .nav-mega-trigger::before {
      content: '';
      width: 0.35rem;
      height: 0.35rem;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg) translateY(-1px);
      order: 2;
    }
    .nav-mega-panel {
      position: fixed;
      top: calc(64px + 0.7rem);
      left: 50%;
      z-index: 1200;
      width: min(920px, calc(100vw - 3rem));
      padding: 1.25rem;
      background: var(--white);
      border: 1px solid var(--zinc-200);
      box-shadow: 0 24px 60px rgba(36, 7, 1, 0.14);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate(-50%, -8px);
      transition:
        opacity 0.22s ease 0.18s,
        transform 0.22s ease 0.18s,
        visibility 0s linear 0.4s;
    }
    .nav-mega-panel::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: -1rem;
      height: 1rem;
    }
    .nav-mega:hover .nav-mega-panel,
    .nav-mega:focus-within .nav-mega-panel {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, 0);
      transition-delay: 0s;
    }
    .nav-mega-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding-bottom: 0.9rem;
      border-bottom: 1px solid var(--zinc-200);
      margin-bottom: 1rem;
    }
    .nav-mega-head strong { font-size: 1.125rem; color: var(--zinc-900); }
    .nav-mega-head a { font-size: 0.95rem; font-weight: 700; color: var(--amber-600); }
    .nav-mega-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem 1.25rem;
    }
    .nav-mega-family {
      display: block;
      margin-bottom: 0.45rem;
      color: var(--zinc-900);
      font-size: 0.95rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .nav-mega-child {
      display: block;
      padding: 0.28rem 0;
      color: var(--zinc-600);
      font-size: 0.95rem;
      line-height: 1.35;
    }
    .nav-mega-child:hover,
    .nav-mega-family:hover { color: var(--amber-600); }
    .nav-actions { display: flex; align-items: center; gap: 1rem; }
    .search-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
      height: 40px; padding: 0 1rem; border: 1px solid var(--zinc-200);
      background: var(--zinc-100); color: var(--zinc-700);
      transition: all 0.2s;
    }
    .search-btn svg { width: 1rem; height: 1rem; }
    .search-btn-label { font-size: 0.875rem; font-weight: 600; }
    .search-btn:hover {
      border-color: var(--amber-500);
      background: #fff4ef;
      color: var(--amber-600);
    }
    .cart-btn {
      position: relative; display: flex; align-items: center; gap: 0.5rem;
      padding: 0.625rem 1.25rem; background: var(--amber-500); color: var(--white);
      font-weight: 600; font-size: 0.875rem; border: none; transition: background 0.2s;
    }
    .cart-btn:hover { background: var(--amber-600); }
    .cart-btn svg { width: 1.125rem; height: 1.125rem; }
    .cart-count {
      position: absolute; top: -6px; right: -6px;
      width: 18px; height: 18px; background: var(--zinc-900); color: var(--white);
      font-size: 0.625rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
    }

    /* Cacher la barre de recherche sur mobile */
@media (max-width: 900px) {
  .nav-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 0 0.75rem;
    gap: 0.5rem;
  }
  .nav-logo {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
  }
  .nav-logo img,
  .nav-logo-image {
    width: clamp(88px, 24vw, 110px) !important;
    max-width: 100%;
    flex-shrink: 1;
  }
  .nav-context-badge {
    height: 1.35rem;
    padding: 0 0.45rem;
    font-size: 0.62rem;
    flex-shrink: 0;
  }
  .nav-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
  }
  .nav-mega { display: none; }
  .search-btn { display: inline-flex; }
  .cart-btn,
  .hamburger {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    flex: 0 0 38px;
    justify-content: center;
  }
  .search-btn-label { display: none; }
  .cart-btn svg,
  .search-btn svg {
    width: 1rem;
    height: 1rem;
  }
  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .hamburger span {
    width: 18px;
  }
  .cart-count {
    top: -4px;
    right: -4px;
  }
  .cart-label { display: none; }
}
    .hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; }
    @media (min-width: 768px) { .hamburger { display: none; } }
    .hamburger span { display: block; width: 22px; height: 2px; background: var(--zinc-900); transition: all 0.3s; }

    /* ===== MOBILE MENU ===== */
    .mobile-menu {
      position: fixed; top: 64px; left: 0; right: 0; z-index: 999;
      background: var(--white); border-bottom: 1px solid var(--zinc-200);
      padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;
      transform: translateY(-110%); transition: transform 0.3s ease;
    }
    .mobile-menu.open { transform: translateY(0); }
    .mobile-menu a { font-size: 1rem; font-weight: 500; color: var(--zinc-700); padding: 0.5rem 0; border-bottom: 1px solid var(--zinc-100); }
    @media (min-width: 768px) {
      .mobile-menu { display: none !important; }
      .hamburger { display: none !important; }
    }
    .search-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.28);
      z-index: 1100; opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
    }
    .search-overlay.open { opacity: 1; pointer-events: all; }
    .search-modal {
      position: fixed; top: 76px; left: 1rem; right: 1rem; z-index: 1101;
      background: var(--white); border: 1px solid var(--zinc-200);
      box-shadow: 0 18px 40px rgba(0,0,0,0.14); padding: 1rem;
      opacity: 0; transform: translateY(-12px); pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .search-modal.open { opacity: 1; transform: translateY(0); pointer-events: all; }
    .search-modal-head {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem;
    }
    .search-modal-head h3 { font-size: 1rem; font-weight: 600; color: var(--zinc-900); }
    .search-close {
      width: 2rem; height: 2rem; border: none; background: none; color: var(--zinc-600);
      display: flex; align-items: center; justify-content: center;
    }
    .search-close svg { width: 1rem; height: 1rem; }
    .search-modal-field {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.75rem 1rem; border: 1px solid var(--zinc-200); background: var(--zinc-100);
    }
    .search-modal-field input {
      width: 100%; border: none; outline: none; background: transparent;
      font-family: inherit; font-size: 0.95rem; color: var(--zinc-900);
    }
    .search-modal-field svg { width: 1rem; height: 1rem; color: var(--zinc-400); flex-shrink: 0; }
    .search-modal-note { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--zinc-500); }
    .live-search { margin-top: 0.75rem; }
    .live-search-status {
      padding: 0.75rem 0.25rem; color: var(--zinc-500); font-size: 0.8125rem;
    }
    .live-search-status[hidden] { display: none; }
    .live-search-results {
      display: flex; flex-direction: column; max-height: min(420px, calc(100vh - 260px)); overflow-y: auto;
    }
    .live-search-result {
      display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center;
      gap: 0.875rem; padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--zinc-200);
      transition: background 0.2s;
    }
    .live-search-result:hover,
    .live-search-result:focus-visible { background: var(--zinc-100); outline: none; }
    .live-search-result-image {
      width: 64px; height: 56px; overflow: hidden; background: var(--zinc-100);
    }
    .live-search-result-image img { width: 100%; height: 100%; object-fit: contain; }
    .live-search-result-copy { min-width: 0; }
    .live-search-result-name {
      display: block; overflow: hidden; color: var(--zinc-900); font-size: 0.875rem;
      font-weight: 600; text-overflow: ellipsis; white-space: nowrap;
    }
    .live-search-result-meta {
      display: block; overflow: hidden; margin-top: 0.2rem; color: var(--zinc-500);
      font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap;
    }
    .live-search-result-price {
      color: var(--amber-700); font-size: 0.8125rem; font-weight: 700; white-space: nowrap;
    }
    .live-search-more {
      display: block; width: 100%; margin-top: 0.75rem; padding: 0.7rem 1rem;
      color: var(--amber-700); font-size: 0.8125rem; font-weight: 600;
      background: var(--white); border: 1px solid var(--amber-500);
    }
    .live-search-more:hover { color: var(--white); background: var(--amber-500); }
    .live-search-more[hidden] { display: none; }
    @media (max-width: 520px) {
      .live-search-result { grid-template-columns: 52px minmax(0, 1fr); }
      .live-search-result-image { width: 52px; height: 48px; }
      .live-search-result-price { grid-column: 2; }
    }
    @media (min-width: 768px) {
      .search-modal {
        top: 88px;
        left: 50%;
        right: auto;
        width: min(640px, calc(100vw - 4rem));
        transform: translate(-50%, -12px);
      }
      .search-modal.open { transform: translate(-50%, 0); }
    }

    /* ===== SHOP HERO BANNER ===== */
    .shop-hero {
      margin-top: 64px;
      background: var(--zinc-100);
      border-bottom: 1px solid var(--zinc-200);
      padding: 3rem 0;
    }
    .shop-hero-inner {
      display: flex; flex-direction: column; gap: 1.5rem;
    }
    @media (min-width: 768px) {
      .shop-hero-inner { flex-direction: row; align-items: center; justify-content: space-between; }
    }
    .shop-hero h1 { font-size: 2.5rem; font-weight: 400; letter-spacing: -0.025em; color: var(--zinc-900); }
    @media (min-width: 768px) { .shop-hero h1 { font-size: 3rem; } }
    .shop-hero p { color: var(--zinc-600); font-size: 1rem; margin-top: 0.5rem; max-width: 36rem; }
    .shop-hero-meta { display: flex; align-items: center; gap: 2rem; flex-shrink: 0; }
    .hero-stat { text-align: center; }
    .hero-stat strong { display: block; font-size: 1.75rem; font-weight: 600; color: var(--amber-500); letter-spacing: -0.025em; }
    .hero-stat span { font-size: 0.75rem; color: var(--zinc-500); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }

    /* ===== BREADCRUMB ===== */
    .breadcrumb {
      padding: 0.75rem 0; border-bottom: 1px solid var(--zinc-200);
      background: var(--white);
    }
    .breadcrumb-inner { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--zinc-500); }
    .breadcrumb-inner a:hover { color: var(--amber-500); }
    .breadcrumb-inner svg { width: 0.875rem; height: 0.875rem; }

    /* ===== MAIN LAYOUT ===== */
    .shop-layout {
      display: grid; grid-template-columns: 1fr;
      gap: 0; padding: 2rem 0 6rem;
    }
    @media (min-width: 1024px) {
      .shop-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
    }

/* ===== SIDEBAR ===== */
.sidebar { display: none; }
@media (min-width: 1024px) { 
  .sidebar { 
    display: block; 
    position: sticky; 
    top: 96px; 
    max-height: calc(100vh - 112px); 
    overflow-y: auto; 
    padding: 1.5rem;
    background: var(--white);
    border: 0;
    border-radius: 0.75rem;
    box-shadow: none;
    scrollbar-gutter: stable;
  } 
}

/* Custom scrollbar for sidebar */
.sidebar::-webkit-scrollbar { 
  width: 6px;
}
.sidebar::-webkit-scrollbar-track { 
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb { 
  background: var(--zinc-300); 
  border-radius: 999px;
}
.sidebar::-webkit-scrollbar-thumb:hover { 
  background: var(--zinc-400); 
}
    .sidebar-section { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--zinc-200); }
    .sidebar-section:last-child { border-bottom: none; margin-bottom: 0; }
    .sidebar-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zinc-500); margin-bottom: 0.875rem; }
    .sidebar-cats { display: flex; flex-direction: column; gap: 0.25rem; }
    .cat-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.625rem 0.75rem; font-size: 0.875rem; color: var(--zinc-700);
      background: none; border: none; text-align: left; transition: all 0.2s; cursor: pointer;
      border-left: 2px solid transparent;
    }
    .cat-item:hover { background: var(--zinc-100); color: var(--zinc-900); }
    .cat-item.active { background: var(--zinc-100); color: var(--zinc-900); border-left-color: var(--amber-500); font-weight: 600; }
    .cat-dropdown { border: 1px solid transparent; }
    .cat-dropdown.open { border-color: var(--zinc-200); background: rgba(255, 250, 248, 0.65); }
    .cat-dropdown-toggle {
      width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
      margin-top: 0.5rem; padding: 0.75rem; border: none; background: transparent;
      color: var(--zinc-900); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em;
      text-align: left; text-transform: uppercase; transition: background 0.2s, color 0.2s;
    }
    .cat-dropdown-toggle:hover,
    .cat-dropdown-toggle.active { background: var(--zinc-100); color: var(--zinc-900); }
    .cat-dropdown-meta { display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0; }
    .cat-dropdown-icon { width: 0.95rem; height: 0.95rem; color: var(--zinc-500); transition: transform 0.2s; }
    .cat-dropdown.open .cat-dropdown-icon { transform: rotate(180deg); }
    .cat-dropdown-panel { display: none; padding: 0.25rem 0 0.5rem; }
    .cat-dropdown.open .cat-dropdown-panel { display: flex; flex-direction: column; gap: 0.125rem; }
    .cat-child { padding-left: 1.5rem; font-size: 0.8125rem; }
    .cat-all { font-weight: 600; color: var(--zinc-800); }
    .cat-count { font-size: 0.75rem; color: var(--zinc-400); background: var(--zinc-100); padding: 0.125rem 0.5rem; }
    .cat-item.active .cat-count,
    .cat-dropdown-toggle.active .cat-count { background: rgba(184,134,11,0.1); color: var(--amber-500); }

    .price-range { display: flex; flex-direction: column; gap: 1rem; }
    .price-inputs { display: flex; align-items: center; gap: 0.5rem; width: 100%; }
    .price-input {
      flex: 1; min-width: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--zinc-300);
      font-family: inherit; font-size: 0.875rem; color: var(--zinc-900); background: var(--white);
    }
    .price-input:focus { outline: none; border-color: var(--amber-500); }
    .price-sep { color: var(--zinc-400); font-size: 0.875rem; }

    .brand-list { display: flex; flex-direction: column; gap: 0.5rem; }
    .brand-check { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--zinc-700); cursor: pointer; }
    .brand-check input { accent-color: var(--amber-500); width: 1rem; height: 1rem; cursor: pointer; }
    .login-forgot-password { text-align: right; }
    .login-forgot-password-link:hover,
    .login-forgot-password-link:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }

    .sidebar-apply { width: 100%; margin-top: 1.5rem; }

    /* ===== PRODUCT AREA ===== */
    .product-area { min-width: 0; }

    .toolbar {
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;
    }
    .toolbar-left { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
    .filter-chip {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.375rem 0.875rem; border: 1px solid var(--zinc-300);
      font-size: 0.8125rem; font-weight: 500; color: var(--zinc-700);
      background: none; transition: all 0.2s; cursor: pointer;
    }
    .filter-chip:hover { border-color: var(--amber-500); color: var(--amber-500); }
    .filter-chip.active { background: var(--amber-500); color: var(--white); border-color: var(--amber-500); }
    .filter-chip svg { width: 0.875rem; height: 0.875rem; }
    
    /* Cacher les filtres de catégorie dans la toolbar sur desktop */
    @media (min-width: 1024px) {
      .toolbar-left { display: none; }
    }
    .mobile-filter-btn {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.625rem 1rem; border: 1px solid var(--zinc-300);
      font-size: 0.875rem; font-weight: 500; color: var(--zinc-700);
      background: none; transition: all 0.2s; cursor: pointer;
    }
    @media (min-width: 1024px) { .mobile-filter-btn { display: none; } }
    .mobile-filter-btn svg { width: 1rem; height: 1rem; }
    .toolbar-right { display: flex; align-items: center; gap: 0.75rem; }
    .result-count { font-size: 0.875rem; color: var(--zinc-500); }
    .sort-select {
      padding: 0.5rem 0.75rem; border: 1px solid var(--zinc-300);
      font-family: inherit; font-size: 0.875rem; color: var(--zinc-700);
      background: var(--white); cursor: pointer;
    }
    .sort-select:focus { outline: none; border-color: var(--amber-500); }
    .view-toggle { display: flex; border: 1px solid var(--zinc-300); overflow: hidden; }
    .view-btn {
      padding: 0.5rem 0.625rem; background: none; border: none;
      color: var(--zinc-400); cursor: pointer; transition: all 0.2s;
    }
    .view-btn.active { background: var(--amber-500); color: var(--white); }
    .view-btn svg { width: 1rem; height: 1rem; display: block; }
    @media (max-width: 767px) { .view-toggle { display: none; } }

    /* ===== PRODUCT GRID ===== */
    .product-grid {
      display: grid; grid-template-columns: 1fr; gap: 1.5rem;
    }
    @media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1280px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

    .product-grid.list-view { grid-template-columns: 1fr !important; }
    .product-grid.list-view .product-card { flex-direction: row; }
    .product-grid.list-view .product-image { width: 200px; flex-shrink: 0; height: auto; }

    /* Mobile responsive list view */
    @media (max-width: 767px) {
  .product-grid.list-view .product-image {
    width: 90px;         /* réduit de 200px → 90px */
    flex-shrink: 0;
  }
  .product-grid.list-view .product-body {
    padding: 0.625rem 0.75rem;
  }
  .product-grid.list-view .product-footer {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }
  .product-grid.list-view .add-cart {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 0;        /* cache le texte "Ajouter" */
    gap: 0;
  }
  .product-grid.list-view .add-cart svg {
    display: block;      /* l'icône reste visible */
  }
}

    /* ===== PRODUCT CARD ===== */
    .product-card {
      display: flex; flex-direction: column;
      background: var(--white); border: 1px solid var(--zinc-200);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative; overflow: hidden;
    }
    .product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.1); }
    .product-image {
      position: relative; height: 200px; overflow: hidden;
      background: var(--zinc-100);
    }
    .product-image img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.4s ease;
    }
    .product-card:hover .product-image img { transform: scale(1.04); }
    .product-badge {
      position: absolute; top: 0.75rem; left: 0.75rem;
      padding: 0.25rem 0.625rem; font-size: 0.6875rem; font-weight: 700;
      letter-spacing: 0.05em; text-transform: uppercase;
    }
    .badge-new { background: var(--amber-500); color: var(--white); }
    .badge-promo { background: #dc2626; color: var(--white); }
    .badge-stock { background: var(--zinc-800); color: var(--white); }
    .product-wishlist {
      position: absolute; top: 0.75rem; right: 0.75rem;
      width: 2rem; height: 2rem; background: rgba(255,255,255,0.9);
      border: none; display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity 0.2s; cursor: pointer;
    }
    .product-card:hover .product-wishlist { opacity: 1; }
    .product-wishlist svg { width: 1rem; height: 1rem; color: var(--zinc-600); }
    .product-wishlist:hover svg { color: var(--amber-500); }

    .product-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: 0.75rem; }
    .product-cat { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zinc-400); }
    .product-name { font-size: 1rem; font-weight: 500; color: var(--zinc-900); line-height: 1.4; }
    .product-ref { font-size: 0.75rem; color: var(--zinc-400); }
    .product-specs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: auto; }
    .spec-tag {
      display: inline-flex; align-items: center; gap: 0.25rem;
      padding: 0.2rem 0.5rem; background: var(--zinc-100);
      font-size: 0.6875rem; color: var(--zinc-600); font-weight: 500;
    }

    .product-footer {
      padding: 1rem 1.25rem;
      border-top: 1px solid var(--zinc-100);
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    }
    .product-price { display: flex; flex-direction: column; }
    .price-main { font-size: 1.25rem; font-weight: 700; color: var(--zinc-900); letter-spacing: -0.025em; }
    .price-old { font-size: 0.8125rem; color: var(--zinc-400); text-decoration: line-through; }
    .price-promo {
      font-size: 0.72rem;
      color: #b91c1c;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .price-ht { font-size: 0.6875rem; color: var(--zinc-400); }
    .add-cart {
      display: flex; align-items: center; justify-content: center;
      padding: 0.625rem 1rem; background: var(--amber-500); color: var(--white);
      font-size: 0.8125rem; font-weight: 600; border: none; transition: background 0.2s;
      gap: 0.375rem; white-space: nowrap; flex-shrink: 0;
    }
    .add-cart:hover { background: var(--amber-600); }
    .add-cart svg { width: 1rem; height: 1rem; }

  

    /* ===== PROMO BANNER ===== */
    .promo-banner {
      background: var(--zinc-900); color: var(--white);
      padding: 2rem; margin-bottom: 0; grid-column: 1 / -1;
      display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
      flex-wrap: wrap;
    }
    .promo-text h3 { font-size: 1.25rem; font-weight: 500; }
    .promo-text p { color: rgba(255,255,255,0.7); font-size: 0.875rem; margin-top: 0.25rem; }
    .promo-tag { background: var(--amber-500); color: var(--white); padding: 0.375rem 1rem; font-size: 0.875rem; font-weight: 700; }

    /* ===== PAGINATION ===== */
    .pagination { display: flex; align-items: center; justify-content: center; gap: 0.25rem; margin-top: 3rem; }
    .page-btn {
      width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
      border: 1px solid var(--zinc-200); background: none;
      font-size: 0.875rem; font-weight: 500; color: var(--zinc-600);
      transition: all 0.2s; cursor: pointer;
    }
    .page-btn:hover { border-color: var(--amber-500); color: var(--amber-500); }
    .page-btn.active { background: var(--amber-500); color: var(--white); border-color: var(--amber-500); }
    .page-btn svg { width: 1rem; height: 1rem; }

    /* ===== TRUST BAR ===== */
    .trust-bar { background: var(--zinc-100); border-top: 1px solid var(--zinc-200); border-bottom: 1px solid var(--zinc-200); padding: 1.75rem 0; }
    .trust-items { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; }
    .trust-item {
      display: flex; align-items: center; gap: 0.75rem;
      padding: 0.75rem 2rem; border-right: 1px solid var(--zinc-200);
      flex: 1; min-width: 180px; max-width: 260px;
    }
    .trust-item:last-child { border-right: none; }
    .trust-icon { width: 2rem; height: 2rem; color: var(--amber-500); flex-shrink: 0; }
    .trust-icon svg { width: 100%; height: 100%; }
    .trust-copy strong { display: block; font-size: 0.875rem; font-weight: 600; color: var(--zinc-900); }
    .trust-copy span { font-size: 0.75rem; color: var(--zinc-500); }

    /* ===== MOBILE FILTER DRAWER ===== */
    .filter-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.4);
      z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.3s;
    }
    .filter-overlay.open { opacity: 1; pointer-events: all; }
    .filter-drawer {
      position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 90vw;
      background: var(--white); z-index: 2001; padding: 1.5rem;
      overflow-y: auto; transform: translateX(-100%); transition: transform 0.3s ease;
    }
    .filter-drawer.open { transform: translateX(0); }
    .filter-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
    .filter-drawer-head h3 { font-size: 1.25rem; font-weight: 500; }
    .filter-close { background: none; border: none; padding: 0.25rem; cursor: pointer; }
    .filter-close svg { width: 1.25rem; height: 1.25rem; color: var(--zinc-600); }

    /* ===== FOOTER ===== */
    .footer { width: 100%; background: var(--white); border-top: 1px solid var(--zinc-200); }
    .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 2rem 0; }
    @media (min-width: 768px) { .footer-inner { flex-direction: row; justify-content: space-between; } }
    .footer-logo { display: flex; align-items: center; gap: 0.5rem; }
    .footer-logo-image { width: 108px; height: auto; object-fit: contain; }
    .footer-logo span { font-size: 1.125rem; font-weight: 700; color: var(--zinc-900); letter-spacing: -0.025em; }
    .footer-logo-dot { width: 0.375rem; height: 0.375rem; background: var(--amber-500); }
    .footer-links { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
    .footer-links a { font-size: 0.8125rem; color: var(--zinc-500); transition: color 0.2s; }
    .footer-links a:hover { color: var(--zinc-900); }
    .footer-copy { font-size: 0.75rem; color: var(--zinc-500); text-align: center; padding-bottom: 1rem; }
    @media (max-width: 767px) {
      .footer-inner { align-items: stretch; }
      .footer-logo { justify-content: center; }
      .footer-links {
        gap: 0.75rem 1rem;
        justify-content: center;
      }
      .footer-links a {
        text-align: center;
      }
    }

    /* ===== CART SIDEBAR ===== */
    .cart-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.4);
      z-index: 3000; opacity: 0; pointer-events: none; transition: opacity 0.3s;
    }
    .cart-overlay.open { opacity: 1; pointer-events: all; }
    .cart-drawer {
      position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 95vw;
      background: var(--white); z-index: 3001; display: flex; flex-direction: column;
      transform: translateX(100%); transition: transform 0.3s ease;
    }
    .cart-drawer.open { transform: translateX(0); }
    .cart-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.5rem; border-bottom: 1px solid var(--zinc-200);
    }
    .cart-head h3 { font-size: 1.125rem; font-weight: 600; }
    .cart-close { background: none; border: none; cursor: pointer; padding: 0.25rem; }
    .cart-close svg { width: 1.25rem; height: 1.25rem; color: var(--zinc-600); }
    .cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
    .cart-item { display: flex; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--zinc-100); }

    body.ui-booting .mobile-menu,
    body.ui-booting .cart-overlay,
    body.ui-booting .search-overlay {
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translateY(-110%) !important;
    }

    body.ui-booting .cart-drawer {
      transform: translateX(100%) !important;
    }

    body.ui-booting .search-modal {
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translateY(-12px) !important;
    }
    .cart-item-img { width: 64px; height: 64px; background: var(--zinc-100); overflow: hidden; flex-shrink: 0; }
    .cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
    .cart-item-info { flex: 1; }
    .cart-item-name { font-size: 0.875rem; font-weight: 500; color: var(--zinc-900); line-height: 1.3; }
    .cart-item-meta { font-size: 0.75rem; color: var(--zinc-500); margin-top: 0.25rem; }
    .cart-item-price { font-size: 0.875rem; font-weight: 600; color: var(--zinc-900); margin-top: 0.375rem; }
    .cart-item-qty { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
    .qty-btn { width: 1.5rem; height: 1.5rem; border: 1px solid var(--zinc-300); background: none; font-size: 0.875rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
    .qty-btn:hover { background: var(--amber-500); color: var(--white); border-color: var(--amber-500); }
    .qty-val { font-size: 0.875rem; font-weight: 500; min-width: 1.5rem; text-align: center; }
    .cart-remove { background: none; border: none; color: var(--zinc-400); cursor: pointer; font-size: 0.75rem; margin-left: auto; }
    .cart-remove:hover { color: #dc2626; }
    .cart-empty { text-align: center; padding: 3rem 1rem; color: var(--zinc-500); }
    .cart-empty svg { width: 3rem; height: 3rem; margin: 0 auto 1rem; color: var(--zinc-300); }
    .cart-footer { padding: 1.5rem; border-top: 1px solid var(--zinc-200); }
    .cart-subtotal { display: flex; justify-content: space-between; margin-bottom: 1rem; }
    .cart-subtotal span { font-size: 0.875rem; color: var(--zinc-600); }
    .cart-subtotal strong { font-size: 1rem; font-weight: 700; color: var(--zinc-900); }
    .cart-checkout { width: 100%; padding: 1rem; background: var(--amber-500); color: var(--white); font-weight: 600; font-size: 0.9375rem; border: none; cursor: pointer; transition: background 0.2s; }
    .cart-checkout:hover { background: var(--amber-600); }
    .cart-note { font-size: 0.75rem; color: var(--zinc-400); text-align: center; margin-top: 0.75rem; }

    /* ===== ANIMATIONS ===== */
    .fade-in { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
    .fade-in.visible { opacity: 1; transform: translateY(0); }

    /* ===== TOAST ===== */
    .toast {
      position: fixed; bottom: 2rem; right: 2rem; z-index: 9999;
      background: var(--zinc-900); color: var(--white);
      padding: 0.875rem 1.5rem; font-size: 0.875rem;
      display: flex; align-items: center; gap: 0.75rem;
      transform: translateY(120%); opacity: 0; transition: all 0.3s ease;
      max-width: 320px;
    }
    .toast.show { transform: translateY(0); opacity: 1; }
    .toast-icon { width: 1.25rem; height: 1.25rem; color: #4ade80; flex-shrink: 0; }

    /* ===== MULTI-PAGE CONTENT ===== */
    .page-main { padding-top: 64px; }
    .landing-hero {
      position: relative;
      min-height: calc(100vh - 64px);
      display: flex;
      align-items: center;
      overflow: hidden;
      background: var(--zinc-900);
    }
    .landing-hero-bg {
      position: absolute; inset: 0;
      background-image: url('https://images.pexels.com/photos/2976970/pexels-photo-2976970.jpeg');
      background-size: cover; background-position: center;
      transform: scale(1.03);
    }
    .landing-hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(36, 7, 1, 0.82), rgba(36, 7, 1, 0.48));
    }
    .landing-hero-content {
      position: relative; z-index: 1;
      display: grid; gap: 1.5rem;
      padding-top: 6rem; padding-bottom: 6rem;
    }
    .landing-title {
      max-width: 56rem;
      font-size: clamp(2.7rem, 6vw, 5.2rem);
      line-height: 0.98;
      letter-spacing: -0.06em;
      color: var(--white);
    }
    .landing-copy {
      max-width: 42rem;
      color: rgba(255,255,255,0.88);
      font-size: 1.0625rem;
    }
    .landing-outline {
      background: rgba(255,255,255,0.98);
      color: var(--amber-600);
      border-color: rgba(255,255,255,0.95);
    }
    .landing-outline:hover { border-color: var(--amber-500); }
    .landing-cta {
      position: relative;
      padding: 6rem 0;
      background-image: url('https://images.unsplash.com/photo-1631193816258-28b44b21e78b?q=80&w=1170&auto=format&fit=crop');
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
    .landing-cta-overlay {
      position: absolute; inset: 0; background: rgba(0,0,0,0.55);
    }
    .landing-cta-content {
      position: relative; z-index: 1;
    }
    .landing-cta-content h2 {
      max-width: 48rem;
      font-size: clamp(2rem, 4vw, 3.8rem);
      line-height: 1.02;
      letter-spacing: -0.05em;
      color: var(--white);
    }
    .landing-cta-content p {
      margin-top: 1rem;
      max-width: 40rem;
      color: rgba(255,255,255,0.84);
      font-size: 1rem;
    }
    .page-hero {
      padding: 4rem 0 3rem;
      background: linear-gradient(180deg, var(--zinc-100) 0%, var(--white) 100%);
      border-bottom: 1px solid var(--zinc-200);
    }
    .shop-page-hero {
      min-height: 18rem;
      display: flex;
      align-items: center;
      background-image:
        linear-gradient(90deg, rgba(36, 7, 1, 0.9) 0%, rgba(36, 7, 1, 0.68) 42%, rgba(36, 7, 1, 0.2) 100%),
        var(--shop-hero-image);
      background-position: center 44%;
      background-repeat: no-repeat;
      background-size: cover;
      border-bottom-color: rgba(75, 16, 1, 0.3);
    }
    .shop-page-hero .page-hero-inner { width: 100%; }
    .shop-page-hero h1,
    .shop-page-hero p { color: var(--white); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3); }
    .page-hero-inner {
      display: grid; gap: 2rem;
    }
    @media (min-width: 960px) {
      .page-hero-inner { grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); align-items: center; }
    }
    .page-kicker {
      font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--amber-500); margin-bottom: 1rem;
    }
    .page-title {
      font-size: clamp(2.2rem, 5vw, 4.5rem);
      line-height: 1; letter-spacing: -0.05em; margin-bottom: 1rem;
    }
    .product-title {
      font-size: clamp(1.75rem, 3vw, 2.6rem);
      line-height: 1.08;
      letter-spacing: -0.025em;
    }
    .page-copy {
      max-width: 42rem; color: var(--zinc-600); font-size: 1rem;
    }
    .hero-panel {
      border: 1px solid var(--zinc-200); background: var(--white);
      padding: 1.5rem; box-shadow: 0 18px 40px rgba(36, 7, 1, 0.08);
    }
    .hero-panel strong {
      display: block; font-size: 2rem; line-height: 1; margin-bottom: 0.75rem;
    }
    .hero-panel p { color: var(--zinc-600); font-size: 0.9375rem; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 1.75rem; }
    .product-info-tabs {
      border: 1px solid var(--zinc-200);
      background: var(--white);
    }
    .product-info-tab-list {
      display: flex;
      gap: 0;
      overflow: hidden;
      border-bottom: 1px solid var(--zinc-200);
      background: var(--zinc-50);
    }
    .product-info-tab {
      position: relative;
      flex: 1 1 50%;
      min-width: 0;
      padding: 1rem 1.25rem;
      border: 0;
      background: transparent;
      color: var(--zinc-600);
      font-size: 0.9375rem;
      font-weight: 700;
      text-align: center;
    }
    .product-info-tab::after {
      content: '';
      position: absolute;
      right: 1.25rem;
      bottom: -1px;
      left: 1.25rem;
      height: 3px;
      background: transparent;
    }
    .product-info-tab:hover,
    .product-info-tab.active { color: var(--amber-700); }
    .product-info-tab.active::after { background: var(--amber-500); }
    .product-info-tab:focus-visible { outline: 2px solid var(--amber-500); outline-offset: -4px; }
    .product-info-panel { padding: 1.5rem; }
    .product-info-panel[hidden] { display: none; }
    .product-service-grid { margin-top: 1.5rem; }
    @media (min-width: 768px) {
      .product-info-panel { padding: 2rem; }
    }
    .product-cart-inline {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.35rem 0.45rem;
      border: 1px solid var(--zinc-300);
      background: var(--white);
    }
    .product-cart-inline[hidden] { display: none; }
    .product-cart-inline-label { color: var(--zinc-600); font-size: 0.8125rem; font-weight: 600; }
    .product-cart-qty-button {
      width: 2rem;
      height: 2rem;
      border: 1px solid var(--zinc-300);
      background: var(--zinc-50);
      color: var(--zinc-900);
      font-size: 1rem;
      font-weight: 700;
    }
    .product-cart-qty-button:hover { border-color: var(--amber-500); color: var(--amber-700); }
    .product-cart-quantity { min-width: 1.5rem; text-align: center; }
    .product-cart-remove {
      padding: 0.4rem 0.55rem;
      border: 0;
      background: transparent;
      color: #b91c1c;
      font-size: 0.8125rem;
      font-weight: 700;
    }
    .product-cart-remove:hover { text-decoration: underline; }

    .feature-grid,
    .info-grid,
    .category-grid {
      display: grid; gap: 1.25rem;
    }
    @media (min-width: 768px) {
      .feature-grid,
      .info-grid,
      .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    .feature-card,
    .info-card,
    .category-card {
      border: 1px solid var(--zinc-200); background: var(--white); padding: 1.5rem;
    }
    .feature-card h3,
    .info-card h3,
    .category-card h3 { font-size: 1.125rem; margin-bottom: 0.625rem; }
    .feature-card p,
    .info-card p,
    .category-card p { color: var(--zinc-600); font-size: 0.9375rem; }
    .promotion-empty-state {
      min-height: 20rem; max-width: 45rem; margin-inline: auto;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center;
    }
    .promotion-empty-state .hero-actions { justify-content: center; }
    .campaign-card {
      display: flex; flex-direction: column; min-height: 18rem;
      background-image: linear-gradient(180deg, rgba(36, 7, 1, 0.42), rgba(36, 7, 1, 0.92)), var(--campaign-card-image, linear-gradient(135deg, #6b2108, #240701));
      background-position: center; background-size: cover; color: var(--white);
    }
    .campaign-card h2 { margin: 0.35rem 0 0.85rem; font-size: 1.35rem; color: var(--white); }
    .campaign-card p { color: rgba(255, 255, 255, 0.88); }
    .campaign-card .category-link { margin-top: auto; padding-top: 1rem; }
    .campaign-page-hero {
      min-height: 22rem; display: flex; align-items: center;
      background-image: linear-gradient(90deg, rgba(36, 7, 1, 0.92), rgba(36, 7, 1, 0.38)), var(--campaign-hero-image, linear-gradient(135deg, #6b2108, #240701));
      background-position: center; background-size: cover; color: var(--white);
    }
    .campaign-page-hero .page-hero-inner { width: 100%; }
    .campaign-page-hero h1,
    .campaign-page-hero p,
    .campaign-page-hero .breadcrumb,
    .campaign-page-hero .breadcrumb a { color: var(--white); }
    .promotion-list-shell { padding-inline: 2rem; }
    @media (min-width: 768px) { .promotion-list-shell { padding-inline: 4rem; } }
    @media (min-width: 1024px) { .promotion-list-shell { padding-inline: 6rem; } }
    .category-link {
      display: inline-flex; margin-top: 1rem; font-size: 0.875rem; font-weight: 600;
      color: var(--amber-500);
    }

    .section-pad { padding: 4rem 0; }
    .section-head {
      display: flex; align-items: end; justify-content: space-between; gap: 1rem;
      margin-bottom: 1.75rem; flex-wrap: wrap;
    }
    .section-head h2 { font-size: 2rem; letter-spacing: -0.04em; }
    .section-head p { color: var(--zinc-600); max-width: 36rem; }

    .split-layout {
      display: grid; gap: 2rem;
    }
    @media (min-width: 960px) {
      .split-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); align-items: start; }
    }

    .detail-card,
    .summary-card,
    .contact-card {
      border: 1px solid var(--zinc-200); background: var(--white); padding: 1.5rem;
    }
    .detail-media {
      min-height: 420px; background: var(--zinc-100); overflow: hidden;
      border: 1px solid var(--zinc-200);
    }
    .detail-media img { width: 100%; height: 100%; object-fit: cover; }
    .product-gallery {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      gap: 1rem;
      align-items: start;
    }
    .product-visual-note {
      margin-top: 0.75rem;
      color: var(--zinc-500);
      font-size: 0.75rem;
      line-height: 1.5;
      text-align: center;
    }
    .detail-media-zoom { position: relative; cursor: zoom-in; }
    .detail-media-zoom img {
      transform-origin: center center;
      transition: transform 0.18s ease;
      will-change: transform;
    }
    .detail-media-zoom.is-zoomed img { transform: scale(2.1); }
    .zoom-hint {
      position: absolute; right: 1rem; bottom: 1rem;
      border: 1px solid rgba(255,255,255,0.7); background: rgba(36, 7, 1, 0.72);
      color: var(--white); padding: 0.45rem 0.8rem; font-size: 0.75rem; font-weight: 600;
    }
    .fullscreen-hint {
      position: absolute; top: 1rem; right: 1rem;
      border: 1px solid rgba(36, 7, 1, 0.12); background: rgba(255,255,255,0.92);
      color: var(--zinc-900); padding: 0.45rem 0.8rem; font-size: 0.75rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.04em;
    }
    .product-thumbs {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.75rem;
      align-content: start;
    }
    .product-thumb {
      border: 1px solid var(--zinc-200); background: var(--white); padding: 0;
      overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .product-thumb:hover {
      transform: translateY(-2px);
      border-color: var(--amber-500);
      box-shadow: 0 10px 24px rgba(36, 7, 1, 0.08);
    }
    .product-thumb.active {
      border-color: var(--amber-500);
      box-shadow: inset 0 0 0 1px var(--amber-500);
    }
    .product-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
    @media (max-width: 767px) {
      .product-gallery { grid-template-columns: 1fr; }
      .detail-media { min-height: 320px; }
      .detail-media-zoom.is-zoomed img { transform: scale(1.6); }
      .product-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .fullscreen-hint { top: auto; bottom: 3.75rem; }
    }
    .product-lightbox {
      position: fixed;
      inset: 0;
      z-index: 3200;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .product-lightbox[hidden] { display: none; }
    .product-lightbox-backdrop {
      position: absolute;
      inset: 0;
      border: none;
      background: rgba(10, 5, 3, 0.88);
    }
    .product-lightbox-dialog {
      position: relative;
      z-index: 1;
      width: min(1120px, calc(100vw - 2rem));
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) 64px;
      align-items: center;
      gap: 1rem;
    }
    .product-lightbox-figure {
      background: rgba(255,255,255,0.04);
      padding: 1rem;
      border: 1px solid rgba(255,255,255,0.1);
    }
    .product-lightbox-figure img {
      width: 100%;
      max-height: calc(100vh - 10rem);
      object-fit: contain;
    }
    .product-lightbox-caption {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-top: 0.75rem;
      color: var(--white);
      font-size: 0.95rem;
    }
    .product-lightbox-nav,
    .product-lightbox-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: rgba(255,255,255,0.12);
      color: var(--white);
      backdrop-filter: blur(8px);
    }
    .product-lightbox-nav {
      width: 56px;
      height: 56px;
    }
    .product-lightbox-nav svg,
    .product-lightbox-close svg {
      width: 1.5rem;
      height: 1.5rem;
    }
    .product-lightbox-close {
      position: absolute;
      top: -0.5rem;
      right: 0;
      width: 48px;
      height: 48px;
    }
    @media (max-width: 767px) {
      .product-lightbox-dialog {
        width: calc(100vw - 1rem);
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        gap: 0.5rem;
      }
      .product-lightbox-nav {
        width: 44px;
        height: 44px;
      }
      .product-lightbox-caption {
        flex-direction: column;
        align-items: flex-start;
      }
    }
    .detail-meta { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 1rem; }
    .detail-pill {
      display: inline-flex; padding: 0.35rem 0.75rem; background: var(--zinc-100);
      color: var(--zinc-700); font-size: 0.75rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.08em;
    }
    .detail-price { display: flex; align-items: baseline; gap: 0.75rem; margin: 1.25rem 0; }
    .detail-price strong { font-size: 2rem; letter-spacing: -0.04em; }
    .detail-price span { color: var(--zinc-400); text-decoration: line-through; }
    .promotion-callout {
      display: grid;
      gap: 0.25rem;
      border: 1px solid #fecaca;
      background: #fff1f2;
      color: #991b1b;
      padding: 0.9rem 1rem;
      margin: -0.25rem 0 1.25rem;
    }
    .promotion-callout strong {
      color: #7f1d1d;
    }
    .promotion-callout span,
    .promotion-callout small {
      font-size: 0.88rem;
    }
    .detail-list,
    .contact-list,
    .summary-list {
      display: flex; flex-direction: column; gap: 0.75rem;
    }
    .detail-list li,
    .contact-list li,
    .summary-list li {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      padding-bottom: 0.75rem; border-bottom: 1px solid var(--zinc-100);
    }

    .cart-page-layout {
      display: grid; gap: 2rem; padding: 3rem 0 5rem;
    }
    @media (min-width: 1024px) {
      .cart-page-layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
    }
    .cart-page-list,
    .cart-page-empty {
      border: 1px solid var(--zinc-200); background: var(--white); padding: 1.5rem;
    }
    .cart-page-item {
      display: flex; justify-content: space-between; gap: 1rem;
      padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--zinc-100);
    }
    .cart-page-item:last-child { margin-bottom: 0; }
    .cart-page-item-main h3 { font-size: 1rem; margin-bottom: 0.375rem; }
    .cart-page-item-main p { color: var(--zinc-600); font-size: 0.875rem; max-width: 26rem; }
    .cart-page-item-meta { display: flex; flex-direction: column; gap: 0.625rem; align-items: flex-end; }
    .cart-page-item-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
    .cart-status-card {
      margin-bottom: 1rem;
      border: 1px solid #bbf7d0;
      background: #f0fdf4;
      color: #166534;
      padding: 1rem 1.1rem;
    }
    .checkout-form {
      display: grid;
      gap: 1rem;
    }
    .app-flash,
    .form-error-block,
    .form-success-block {
      display: grid;
      gap: 0.35rem;
      padding: 0.9rem 1rem;
      font-size: 0.94rem;
    }
    .app-flash {
      margin-bottom: 1rem;
      border: 1px solid var(--zinc-200);
      background: #fff;
      color: var(--zinc-800);
    }
    .app-flash strong {
      font-size: 0.95rem;
    }
    .app-flash p,
    .app-flash small {
      margin: 0;
    }
    .app-flash small {
      color: inherit;
      opacity: 0.8;
    }
    .app-flash-success,
    .form-success-block {
      border: 1px solid #bbf7d0;
      background: #f0fdf4;
      color: #166534;
    }
    .app-flash-warning {
      border: 1px solid #fde68a;
      background: #fffbeb;
      color: #92400e;
    }
    .app-flash-error,
    .form-error-block {
      border: 1px solid #fecaca;
      background: #fef2f2;
      color: #991b1b;
    }
    .app-flash-list {
      margin-top: 0.65rem;
      padding-left: 1.2rem;
    }
    .form-error {
      color: #b91c1c;
      font-size: 0.875rem;
      margin-top: 0.5rem;
    }
    .form-success-block strong,
    .form-success-block p {
      margin: 0;
    }
    .password-toggle-wrap {
      position: relative;
      display: block;
    }
    .password-toggle-wrap input[type="password"],
    .password-toggle-wrap input[type="text"] {
      padding-right: 3rem;
      width: 100%;
    }
    .password-toggle-button {
      position: absolute;
      right: 0.45rem;
      top: 50%;
      transform: translateY(-50%);
      width: 2.2rem;
      height: 2.2rem;
      border: 0;
      background: transparent;
      color: var(--zinc-500);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .password-toggle-button:hover,
    .password-toggle-button:focus {
      color: var(--amber-700);
      outline: none;
    }
    .password-toggle-button svg {
      width: 1.15rem;
      height: 1.15rem;
      pointer-events: none;
    }
    .checkout-lines {
      display: grid;
      gap: 0.9rem;
    }
    .checkout-line {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr) auto;
      gap: 0.85rem;
      align-items: center;
      padding-bottom: 0.9rem;
      border-bottom: 1px solid var(--zinc-100);
    }
    .checkout-line:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .checkout-line-image {
      width: 56px;
      height: 56px;
      object-fit: cover;
      border: 1px solid var(--zinc-200);
      background: var(--zinc-100);
    }
    .checkout-line-content {
      display: grid;
      gap: 0.2rem;
    }
    .checkout-line-content span {
      color: var(--zinc-500);
      font-size: 0.85rem;
    }
    .auth-shell {
      max-width: 760px;
    }
    .auth-card {
      margin: 0 auto;
    }
    .mobile-menu-action {
      width: 100%;
      text-align: left;
      background: transparent;
      border: none;
      padding: 0;
      font: inherit;
      color: inherit;
      cursor: pointer;
    }
    .account-order-line {
      align-items: flex-start;
    }
    .account-order-meta {
      display: grid;
      gap: 0.5rem;
      justify-items: end;
      text-align: right;
    }
    .account-shell {
      display: grid;
      gap: 1.25rem;
      padding: 2rem 0 5rem;
    }
    .account-hero {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 1.5rem;
      border: 1px solid var(--zinc-200);
      background: var(--white);
      padding: 1.5rem;
    }
    .account-hero-copy {
      max-width: 44rem;
    }
    .account-hero h1 {
      font-size: clamp(2rem, 4vw, 3rem);
      letter-spacing: -0.04em;
      margin-top: 0.25rem;
    }
    .account-hero p,
    .account-card-head p,
    .account-empty,
    .account-address-card p,
    .account-order-details,
    .account-order-top span {
      color: var(--zinc-600);
      line-height: 1.55;
    }
    .account-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0.75rem;
    }
    .account-actions form {
      display: contents;
    }
    .account-stats {
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .account-stat {
      display: grid;
      gap: 0.35rem;
      border: 1px solid var(--zinc-200);
      background: var(--white);
      padding: 1rem;
      min-width: 0;
    }
    .account-stat span {
      color: var(--zinc-500);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .account-stat strong {
      overflow-wrap: anywhere;
      color: var(--zinc-900);
      font-size: 1rem;
    }
    .account-main-grid {
      display: grid;
      gap: 1.25rem;
      align-items: start;
    }
    @media (min-width: 1080px) {
      .account-main-grid {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
      }
    }
    .account-main-column,
    .account-orders-list,
    .account-address-list {
      display: grid;
      gap: 1.25rem;
    }
    .account-card {
      border: 1px solid var(--zinc-200);
      background: var(--white);
      padding: 1.5rem;
    }
    .account-orders-card {
      position: sticky;
      top: 6rem;
    }
    .account-card-head {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.25rem;
    }
    .account-card-head h2 {
      font-size: 1.35rem;
      letter-spacing: -0.03em;
      margin-bottom: 0.35rem;
    }
    .form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    .account-address-form {
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--zinc-100);
    }
    .account-address-card,
    .account-order-card {
      border: 1px solid var(--zinc-200);
      background: var(--zinc-50);
      padding: 1rem;
    }
    .account-address-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 1rem;
      align-items: start;
    }
    .account-address-title {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-bottom: 0.35rem;
    }
    .account-address-actions {
      display: grid;
      gap: 0.6rem;
      justify-items: end;
    }
    .account-order-card {
      display: grid;
      gap: 0.9rem;
    }
    .account-order-top,
    .account-order-bottom {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
    }
    .account-order-top > div {
      display: grid;
      gap: 0.2rem;
      min-width: 0;
    }
    .account-order-top .category-link {
      margin-top: 0;
    }
    .account-order-details {
      display: grid;
      gap: 0.35rem;
      font-size: 0.88rem;
    }
    .account-order-bottom {
      align-items: center;
      padding-top: 0.85rem;
      border-top: 1px solid var(--zinc-200);
    }
    .account-default-check {
      align-self: end;
      justify-content: flex-start;
      gap: 0.6rem;
      border: 1px solid var(--zinc-200);
      padding: 0.85rem 1rem;
      min-height: 50px;
    }
    @media (max-width: 900px) {
      .account-hero {
        align-items: flex-start;
        flex-direction: column;
      }
      .account-actions {
        justify-content: flex-start;
        width: 100%;
      }
      .account-orders-card {
        position: static;
      }
    }
    @media (max-width: 640px) {
      .account-shell {
        padding-top: 1rem;
      }
      .account-hero,
      .account-card {
        padding: 1rem;
      }
      .account-stats {
        grid-template-columns: 1fr;
      }
      .account-actions,
      .account-actions .btn-primary,
      .account-actions .btn-outline,
      .account-actions button,
      .form-actions .btn-primary,
      .form-actions .btn-outline,
      .form-actions button {
        width: 100%;
      }
      .account-address-card,
      .account-order-top,
      .account-order-bottom {
        grid-template-columns: 1fr;
        display: grid;
      }
      .account-address-actions {
        justify-items: stretch;
      }
      .account-address-actions .btn-outline,
      .account-address-actions button,
      .account-order-bottom .btn-outline {
        width: 100%;
      }
    }

    .form-grid {
      display: grid; gap: 1rem;
    }
    @media (min-width: 768px) { .form-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .form-field { display: flex; flex-direction: column; gap: 0.5rem; }
    .form-field label {
      font-size: 0.8125rem; font-weight: 600; color: var(--zinc-600);
      text-transform: uppercase; letter-spacing: 0.08em;
    }
    .form-field input,
    .form-field textarea,
    .form-field select {
      width: 100%; border: 1px solid var(--zinc-300); padding: 0.875rem 1rem;
      font: inherit; color: var(--zinc-900); background: var(--white);
    }
    .form-field textarea { min-height: 160px; resize: vertical; }
    .form-field input:focus,
    .form-field textarea:focus,
    .form-field select:focus { outline: none; border-color: var(--amber-500); }

    .admin-body {
      background: #f6f1ee;
      color: var(--zinc-900);
      min-height: 100vh;
    }
    .admin-shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
    }
    .admin-sidebar {
      background: #fffaf0;
      color: var(--zinc-900);
      padding: 0rem 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
      border-right: 1px solid var(--zinc-200);
    }
    .admin-brand {
      display: flex;
      align-items: center;
      gap: 0.9rem;
      margin-inline: -1.25rem;
      padding: 0.65rem 1.25rem 0.75rem;
      background: var(--white);
      border-bottom: 1px solid var(--zinc-200);
      color: var(--zinc-900);
      font-weight: 700;
      font-size: 1.1rem;
    }
    .admin-brand img { width: 108px; height: auto; }
    .admin-user-card {
      display: grid;
      gap: 0.25rem;
      padding: 0.95rem 1rem;
      border: 1px solid var(--zinc-200);
      background: #fff;
      color: var(--zinc-800);
    }
    .admin-user-card span {
      color: var(--zinc-600);
      font-size: 0.85rem;
    }
    .admin-user-card small {
      color: var(--amber-600);
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .admin-user-card-topbar {
      min-width: 220px;
      max-width: 520px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.65rem;
      padding: 0.55rem 0.75rem;
      text-align: left;
      border-color: transparent;
      background: rgba(255, 255, 255, 0.72);
    }
    .admin-user-card-topbar strong {
      font-size: 0.92rem;
    }
    .admin-user-card-topbar span {
      font-size: 0.82rem;
    }
    .admin-user-card-topbar small {
      font-size: 0.72rem;
      padding: 0.25rem 0.45rem;
      background: #fff7ed;
      border: 1px solid #fed7aa;
    }
    .admin-user-card-topbar strong,
    .admin-user-card-topbar span,
    .admin-user-card-topbar small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .admin-nav {
      display: grid;
      gap: 0.5rem;
      min-height: 0;
    }
    .admin-nav-link {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      padding: 0.9rem 1rem;
      color: var(--zinc-700);
      border: 1px solid transparent;
      background: transparent;
      transition: 0.2s ease;
    }
    .admin-nav-link i {
      width: 1.15rem;
      flex: 0 0 1.15rem;
      color: var(--zinc-500);
      font-size: 0.95rem;
      text-align: center;
      transition: color 0.2s ease;
    }
    .admin-nav-link:hover i,
    .admin-nav-link.active i {
      color: var(--amber-700);
    }
    .admin-nav-link:hover,
    .admin-nav-link.active {
      color: var(--amber-700);
      background: #fff;
      border-color: var(--zinc-200);
      box-shadow: 0 10px 24px rgba(36, 7, 1, 0.05);
    }
    .admin-main {
      padding: 2rem;
    }
    .admin-topbar-actions {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    .admin-topbar-actions form {
      margin: 0;
    }
    .admin-export-shell {
      padding: 2rem;
    }
    .admin-export-card {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      gap: 1rem;
    }
    .admin-export-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .admin-auth-shell {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 2rem 1rem;
    }
    .admin-auth-card {
      width: min(100%, 540px);
      background: var(--white);
      border: 1px solid var(--zinc-200);
      padding: 2rem;
      box-shadow: 0 18px 40px rgba(36, 7, 1, 0.08);
    }
    .admin-auth-brand {
      margin-bottom: 2rem;
      justify-content: center;
    }
    .admin-auth-head {
      display: grid;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
    }
    .admin-auth-head h1 {
      font-size: 2rem;
      line-height: 1;
      letter-spacing: -0.05em;
    }
    .admin-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 2rem;
    }
    .admin-topbar h1 {
      font-size: 2.4rem;
      line-height: 1;
      letter-spacing: -0.05em;
    }
    .admin-kicker {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--amber-600);
      margin-bottom: 0.5rem;
      font-weight: 700;
    }
    .admin-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
      margin-bottom: 2rem;
    }
    .admin-grid-compact {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .admin-users-grid {
      grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    }
    .admin-chart-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .admin-chart-panel {
      min-height: 360px;
    }
    .admin-bar-chart {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 0.75rem;
      align-items: end;
      min-height: 230px;
      padding-top: 1rem;
    }
    .admin-bar-chart-item {
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 0.45rem;
      min-width: 0;
      height: 230px;
      text-align: center;
    }
    .admin-bar-value {
      min-height: 1.2rem;
      color: var(--zinc-500);
      font-size: 0.72rem;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .admin-bar-track {
      position: relative;
      display: flex;
      align-items: flex-end;
      min-height: 160px;
      background: var(--zinc-100);
      border: 1px solid var(--zinc-200);
      overflow: hidden;
    }
    .admin-bar-track span {
      display: block;
      width: 100%;
      min-height: 8px;
      background: linear-gradient(180deg, var(--amber-500), var(--amber-700));
    }
    .admin-bar-chart-orders .admin-bar-track span {
      background: linear-gradient(180deg, #1d4ed8, #1e3a8a);
    }
    .admin-bar-chart-item strong {
      color: var(--zinc-600);
      font-size: 0.78rem;
    }
    .admin-progress-chart {
      display: grid;
      gap: 1rem;
    }
    .admin-progress-row {
      display: grid;
      gap: 0.45rem;
    }
    .admin-progress-row > div:first-child {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      color: var(--zinc-600);
      font-size: 0.88rem;
      font-weight: 700;
    }
    .admin-progress-row strong {
      color: var(--zinc-900);
    }
    .admin-progress-track {
      height: 0.7rem;
      border: 1px solid var(--zinc-200);
      background: var(--zinc-100);
      overflow: hidden;
    }
    .admin-progress-track span {
      display: block;
      height: 100%;
      min-width: 0.35rem;
      background: var(--amber-500);
    }
    .admin-progress-track .status-pending { background: #f59e0b; }
    .admin-progress-track .status-confirmed { background: #2563eb; }
    .admin-progress-track .status-shipped { background: #16a34a; }
    .admin-progress-track .status-cancelled { background: #dc2626; }
    .admin-progress-track .unpaid { background: #dc2626; }
    .admin-progress-track .paid { background: #16a34a; }
    .admin-stat-card,
    .admin-panel {
      background: var(--white);
      border: 1px solid var(--zinc-200);
      padding: 1.5rem;
      box-shadow: 0 12px 30px rgba(36, 7, 1, 0.04);
    }
    .admin-stat-card span {
      display: block;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--zinc-500);
      margin-bottom: 0.9rem;
    }
    .admin-stat-card strong {
      display: block;
      font-size: 2rem;
      line-height: 1;
      margin-bottom: 0.75rem;
    }
    .admin-stat-card p,
    .admin-panel-copy {
      color: var(--zinc-600);
      font-size: 0.95rem;
    }
    .admin-panels {
      display: grid;
      grid-template-columns: 1.3fr 0.9fr;
      gap: 1rem;
    }
    .admin-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.25rem;
    }
    .admin-panel-head h2 {
      font-size: 1.25rem;
      letter-spacing: -0.03em;
    }
    .admin-panel-head a {
      color: var(--amber-600);
      font-weight: 600;
      font-size: 0.9rem;
    }
    .admin-main .btn-primary {
      background: #f3e4dc;
      color: var(--amber-700);
      border: 1px solid #e7d8d2;
    }
    .admin-main .btn-primary:hover {
      background: #ead4ca;
      color: var(--amber-700);
      transform: translateY(-1px);
    }
    .admin-main .btn-outline:disabled,
    .admin-main .btn-primary:disabled {
      opacity: 0.6;
      cursor: wait;
    }
    .admin-table-wrap {
      overflow-x: auto;
    }
    .admin-list-filters {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
      margin-bottom: 1rem;
    }
    .admin-list-filters input,
    .admin-list-filters select {
      min-height: 46px;
      border: 1px solid var(--zinc-300);
      padding: 0.75rem 0.95rem;
      background: var(--white);
      font: inherit;
      color: var(--zinc-900);
    }
    .admin-list-filters input {
      min-width: min(100%, 320px);
      flex: 1 1 260px;
    }
    .admin-list-filters input:focus,
    .admin-list-filters select:focus {
      outline: none;
      border-color: var(--amber-500);
    }
    .admin-pagination {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.75rem;
      margin-top: 1.25rem;
      flex-wrap: wrap;
    }
    .admin-pagination-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 0.65rem 1rem;
      border: 1px solid var(--zinc-300);
      background: var(--white);
      color: var(--zinc-800);
      font-weight: 600;
    }
    .admin-pagination-link.is-disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .admin-pagination-status {
      color: var(--zinc-600);
      font-size: 0.9rem;
    }
    .admin-table {
      width: 100%;
      border-collapse: collapse;
    }
    .admin-table th,
    .admin-table td {
      padding: 0.95rem 0.75rem;
      border-bottom: 1px solid var(--zinc-100);
      text-align: left;
      vertical-align: middle;
      font-size: 0.92rem;
    }
    .admin-table th {
      color: var(--zinc-500);
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .admin-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.35rem 0.65rem;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      background: var(--zinc-100);
      color: var(--zinc-700);
    }
    .admin-badge.neutral { background: var(--zinc-100); color: var(--zinc-700); }
    .admin-badge.paid { background: #dcfce7; color: #166534; }
    .admin-badge.unpaid { background: #fee2e2; color: #991b1b; }
    .admin-badge.status-pending { background: #fef3c7; color: #92400e; }
    .admin-badge.status-confirmed { background: #dbeafe; color: #1d4ed8; }
    .admin-badge.status-shipped { background: #dcfce7; color: #166534; }
    .admin-badge.status-en_stock { background: #dcfce7; color: #166534; }
    .admin-badge.status-sur_commande { background: #ede9fe; color: #6d28d9; }
    .admin-product-cell {
      display: flex;
      align-items: center;
      gap: 0.85rem;
    }
    .admin-product-cell img {
      width: 52px;
      height: 52px;
      object-fit: cover;
      border: 1px solid var(--zinc-200);
      background: var(--zinc-100);
    }
    .admin-product-cell p {
      color: var(--zinc-500);
      font-size: 0.85rem;
      margin-top: 0.2rem;
    }
    .admin-muted {
      color: var(--zinc-500);
      font-size: 0.85rem;
      margin-top: 0.2rem;
    }
    .admin-shortcuts {
      display: grid;
      gap: 0.9rem;
    }
    .admin-detail-list {
      display: grid;
      gap: 0.9rem;
    }
    .admin-detail-list div {
      display: grid;
      gap: 0.25rem;
      padding-bottom: 0.9rem;
      border-bottom: 1px solid var(--zinc-100);
    }
    .admin-detail-list div:last-child {
      padding-bottom: 0;
      border-bottom: none;
    }
    .admin-detail-list span {
      color: var(--zinc-500);
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 700;
    }
    .admin-detail-list strong {
      font-size: 0.98rem;
      color: var(--zinc-900);
    }
    .admin-permission-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.65rem;
      margin-top: 1rem;
    }
    .admin-check-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      min-height: 40px;
      padding: 0.6rem 0.75rem;
      border: 1px solid var(--zinc-200);
      background: var(--zinc-50);
      color: var(--zinc-700);
      font-size: 0.88rem;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
    }
    .admin-check-row input {
      width: auto;
      min-height: auto;
    }
    .admin-message-preview {
      color: var(--zinc-700);
      line-height: 1.5;
    }
    .admin-shortcut-card {
      border: 1px solid var(--zinc-200);
      padding: 1rem;
      background: linear-gradient(180deg, #fff, #fdf8f6);
    }
    .admin-customer-block {
      display: grid;
      gap: 0.75rem;
      margin-bottom: 1.25rem;
    }
    .admin-customer-block:last-child {
      margin-bottom: 0;
    }
    .admin-customer-block strong {
      color: var(--zinc-800);
      font-size: 0.95rem;
    }
    .admin-detail-bullets {
      display: grid;
      gap: 0.65rem;
      list-style: disc;
      padding-left: 1.25rem;
      color: var(--zinc-700);
    }
    .admin-shortcut-card strong {
      display: block;
      margin-bottom: 0.35rem;
    }
    .admin-shortcut-card p {
      color: var(--zinc-600);
      font-size: 0.92rem;
    }
    .admin-settings-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      align-items: start;
    }
    .admin-order-items {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .admin-order-item {
      display: grid;
      grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) minmax(130px, 0.75fr) minmax(120px, 0.65fr) minmax(90px, 0.45fr) auto;
      gap: 0.75rem;
      align-items: end;
      padding: 0.85rem;
      border: 1px solid var(--zinc-200);
      background: var(--zinc-100);
    }
    .admin-setting-field {
      display: grid;
      gap: 0.45rem;
    }
    .admin-setting-field span {
      font-size: 0.82rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--zinc-500);
      font-weight: 700;
    }
    .admin-setting-field input {
      width: 100%;
      border: 1px solid var(--zinc-300);
      padding: 0.85rem 1rem;
      background: var(--white);
      font: inherit;
      color: var(--zinc-900);
    }
    .admin-setting-field select,
    .admin-setting-field textarea {
      width: 100%;
      border: 1px solid var(--zinc-300);
      padding: 0.85rem 1rem;
      background: var(--white);
      font: inherit;
      color: var(--zinc-900);
    }
    .admin-setting-field input:focus {
      outline: none;
      border-color: var(--amber-500);
    }
    .admin-setting-field input[type="file"] {
      padding: 0.7rem 0.85rem;
      background: #fffaf0;
    }
    .admin-spec-fields {
      display: grid;
      gap: 0.85rem;
      border: 1px solid var(--zinc-200);
      background: #fffaf0;
      padding: 1rem;
    }
    .admin-spec-group {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.85rem;
    }
    .admin-spec-group[hidden] {
      display: none;
    }
    .admin-spec-field {
      min-width: 0;
    }
    @media (max-width: 768px) {
      .admin-spec-group {
        grid-template-columns: 1fr;
      }
    }
    .admin-setting-field select:focus,
    .admin-setting-field textarea:focus {
      outline: none;
      border-color: var(--amber-500);
    }
    .admin-image-preview {
      width: 110px;
      height: 110px;
      object-fit: cover;
      border: 1px solid var(--zinc-200);
      background: var(--zinc-100);
      margin-top: 0.65rem;
    }
    .admin-branding-preview {
      display: block;
      max-width: 100%;
      border: 1px solid var(--zinc-200);
      background: var(--white);
      margin-top: 0.65rem;
      padding: 0.75rem;
    }
    .admin-branding-preview-logo {
      width: 220px;
      max-height: 96px;
      object-fit: contain;
    }
    .admin-branding-preview-favicon {
      width: 72px;
      height: 72px;
      object-fit: contain;
    }
    .admin-field-help {
      color: var(--zinc-500);
      font-size: 0.85rem;
      line-height: 1.45;
    }
    .admin-gallery-preview {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 0.65rem;
    }
    .admin-gallery-manager {
      display: grid;
      gap: 1rem;
    }
    .admin-gallery-list,
    .admin-gallery-new-list {
      display: grid;
      gap: 1rem;
    }
    .admin-gallery-item,
    .admin-gallery-new-row {
      display: block;
      padding: 1rem;
      border: 1px solid var(--zinc-200);
      background: #fffaf0;
    }
    .admin-gallery-item-body {
      display: grid;
      grid-template-columns: 28px 120px minmax(0, 1fr);
      gap: 1rem;
      align-items: start;
    }
    .admin-gallery-item.is-removed {
      opacity: 0.6;
      background: #fef2f2;
      border-color: #fecaca;
    }
    .admin-gallery-item.is-dragging,
    .admin-gallery-new-row.is-dragging {
      opacity: 0.45;
      border-color: var(--amber-500);
      box-shadow: 0 14px 28px rgba(36, 7, 1, 0.08);
    }
    .admin-gallery-item .admin-image-preview,
    .admin-gallery-new-row .admin-image-preview {
      margin-top: 0;
      width: 120px;
      height: 120px;
    }
    .admin-gallery-item-meta {
      display: grid;
      gap: 0.75rem;
      align-content: start;
    }
    .admin-gallery-mobile-actions {
      display: none;
      flex-wrap: wrap;
      gap: 0.6rem;
    }
    .admin-gallery-mobile-actions .btn-outline {
      min-width: 110px;
    }
    .admin-gallery-main-badge {
      display: inline-flex;
      width: fit-content;
      padding: 0.35rem 0.7rem;
      border: 1px solid var(--zinc-300);
      background: var(--white);
      color: var(--zinc-600);
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .admin-gallery-main-badge.is-active {
      border-color: #bbf7d0;
      background: #f0fdf4;
      color: #166534;
    }
    .admin-gallery-drag-handle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      min-height: 120px;
      border: 1px dashed var(--zinc-300);
      background: var(--white);
      color: var(--zinc-500);
      font-size: 1rem;
      user-select: none;
      cursor: grab;
    }
    .admin-gallery-item.is-dragging .admin-gallery-drag-handle,
    .admin-gallery-new-row.is-dragging .admin-gallery-drag-handle {
      cursor: grabbing;
    }
    .admin-gallery-order-field {
      align-content: start;
    }
    .admin-gallery-remove-button,
    .admin-gallery-inline-remove {
      width: fit-content;
      padding-left: 1rem;
      padding-right: 1rem;
    }
    .admin-gallery-removed-note {
      color: #b91c1c;
      font-size: 0.875rem;
    }
    .admin-gallery-additions {
      display: grid;
      gap: 0.9rem;
      padding: 1rem;
      border: 1px dashed var(--zinc-300);
      background: var(--white);
    }
    .admin-gallery-additions-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .admin-gallery-additions-head strong {
      color: var(--zinc-700);
      font-size: 0.95rem;
    }
    .wysiwyg-editor {
      border: 1px solid var(--zinc-300);
      background: var(--white);
    }
    .wysiwyg-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      padding: 0.75rem;
      border-bottom: 1px solid var(--zinc-200);
      background: #fffaf0;
    }
    .wysiwyg-toolbar button {
      border: 1px solid var(--zinc-300);
      background: var(--white);
      color: var(--zinc-800);
      padding: 0.45rem 0.7rem;
      font: inherit;
    }
    .wysiwyg-toolbar button:hover {
      border-color: var(--amber-500);
      color: var(--amber-600);
    }
    .wysiwyg-surface {
      min-height: 260px;
      padding: 1rem;
      outline: none;
    }
    .wysiwyg-surface:focus {
      box-shadow: inset 0 0 0 1px var(--amber-500);
    }
    .wysiwyg-content {
      display: grid;
      gap: 0.85rem;
      color: var(--zinc-700);
    }
    .wysiwyg-content ul,
    .wysiwyg-content ol {
      margin-left: 1.2rem;
      padding-left: 1rem;
    }
    .wysiwyg-content ul {
      list-style: disc;
    }
    .wysiwyg-content figure {
      display: grid;
      gap: 0.5rem;
      margin: 0.5rem 0;
    }
    .wysiwyg-content img {
      width: 100%;
      max-height: 560px;
      object-fit: cover;
      background: var(--zinc-100);
    }
    .wysiwyg-content figcaption {
      color: var(--zinc-500);
      font-size: 0.8125rem;
      text-align: center;
    }
    .wysiwyg-content ol {
      list-style: decimal;
    }
    .info-card-rich {
      grid-column: 1 / -1;
    }
    .admin-note {
      margin-bottom: 1rem;
      padding: 1rem 1.1rem;
      border: 1px solid #fde68a;
      background: #fffbeb;
      color: #92400e;
      font-size: 0.94rem;
    }
    .admin-flash { padding: 1rem 1.1rem; }
    .admin-flash-list { margin-top: 0.65rem; padding-left: 1.2rem; }
    .admin-inline-actions {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-top: 1rem;
      flex-wrap: wrap;
    }
    .admin-inline-actions form,
    .admin-table-actions form {
      margin: 0;
    }
    .admin-filter-bar {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px) auto auto;
      gap: 0.75rem;
      align-items: center;
      margin-top: 1rem;
    }
    .admin-filter-bar input,
    .admin-filter-bar select {
      width: 100%;
      border: 1px solid var(--zinc-300);
      background: var(--white);
      padding: 0.85rem 1rem;
      font: inherit;
      color: var(--zinc-900);
    }
    .admin-filter-bar input:focus,
    .admin-filter-bar select:focus {
      outline: none;
      border-color: var(--amber-500);
    }
    @media (max-width: 900px) {
      .admin-filter-bar {
        grid-template-columns: 1fr;
      }
      .admin-filter-bar .btn-primary,
      .admin-filter-bar .btn-outline {
        width: 100%;
      }
    }
    .admin-table-actions {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      flex-wrap: wrap;
    }
    .admin-icon-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.25rem;
      height: 2.25rem;
      border: 1px solid rgba(120, 53, 15, 0.18);
      border-radius: 999px;
      background: #fff7ed;
      color: #7c2d12;
      transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }
    .admin-icon-action svg {
      width: 1rem;
      height: 1rem;
      stroke: currentColor;
    }
    .admin-icon-action:hover {
      transform: translateY(-1px);
      background: #ffedd5;
      border-color: rgba(120, 53, 15, 0.3);
      color: #9a3412;
      text-decoration: none;
    }
    .admin-icon-action-danger {
      border-color: rgba(185, 28, 28, 0.18);
      background: #fef2f2;
      color: #b91c1c;
    }
    .admin-icon-action-danger:hover {
      background: #fee2e2;
      border-color: rgba(185, 28, 28, 0.3);
      color: #991b1b;
    }
    .admin-link-danger {
      border: none;
      background: transparent;
      padding: 0;
      color: #b91c1c;
      font: inherit;
      font-weight: 600;
    }
    .admin-link-danger:hover {
      color: #991b1b;
      text-decoration: underline;
    }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .admin-confirm-overlay {
      position: fixed;
      inset: 0;
      background: rgba(36, 7, 1, 0.38);
      z-index: 1200;
    }
    .admin-confirm-overlay[hidden],
    .admin-confirm-dialog[hidden] {
      display: none !important;
    }
    .admin-confirm-dialog {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 1rem;
      z-index: 1201;
    }
    .admin-confirm-card {
      width: min(100%, 460px);
      border: 1px solid var(--zinc-200);
      background: var(--white);
      padding: 1.5rem;
      box-shadow: 0 20px 48px rgba(36, 7, 1, 0.14);
      display: grid;
      gap: 0.9rem;
    }
    .admin-confirm-card h2 {
      font-size: 1.3rem;
      letter-spacing: -0.03em;
    }
    .admin-confirm-card p {
      color: var(--zinc-600);
    }
    .admin-ai-select {
      min-width: 220px;
      border: 1px solid var(--zinc-300);
      padding: 0.7rem 0.9rem;
      background: var(--white);
      font: inherit;
      color: var(--zinc-900);
    }
    .admin-ai-sources {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 1rem;
      padding: 0.9rem 1rem;
      border: 1px solid var(--zinc-200);
      background: #fffaf0;
    }
    .admin-ai-sources strong {
      width: 100%;
      color: var(--zinc-700);
      font-size: 0.9rem;
    }
    .admin-ai-sources a {
      color: var(--amber-600);
      font-size: 0.9rem;
      text-decoration: underline;
    }
    .admin-checkbox-field {
      align-content: start;
    }
    .admin-checkbox-control {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      border: 1px solid var(--zinc-300);
      padding: 0.85rem 1rem;
      min-height: 52px;
      color: var(--zinc-900);
      font-weight: 400;
      text-transform: none;
      letter-spacing: 0;
    }
    .admin-checkbox-control input[type="checkbox"] {
      width: 18px;
      height: 18px;
      accent-color: var(--amber-600);
    }
    .admin-targets-field {
      grid-column: 1 / -1; display: grid; gap: 1.25rem;
      border: 1px solid var(--zinc-300); padding: 1.25rem;
    }
    .admin-targets-field legend {
      padding: 0 0.5rem; font-weight: 700; color: var(--zinc-900);
    }
    .admin-targets-group { display: grid; gap: 0.65rem; }
    .admin-target-search {
      width: 100%; border: 1px solid var(--zinc-300); padding: 0.8rem 1rem;
      background: var(--white); color: var(--zinc-900); font: inherit;
    }
    .admin-target-search:focus { outline: none; border-color: var(--amber-500); }
    .admin-checkbox-control[hidden] { display: none; }
    .admin-export-card { display: flex; flex-direction: column; gap: 0.85rem; }
    .admin-export-form { display: grid; gap: 0.85rem; margin-top: auto; }
    .admin-maintenance-control {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      margin-bottom: 1.25rem; padding: 1rem 1.15rem;
      border: 1px solid var(--zinc-300); background: var(--white);
    }
    .admin-maintenance-control.is-active { border-color: #dc2626; background: #fff7f7; }
    .admin-maintenance-control p { margin-top: 0.25rem; color: var(--zinc-600); font-size: 0.9rem; }
    .admin-switch {
      width: 3.4rem; height: 1.9rem; padding: 0.2rem; border: 0; border-radius: 999px;
      background: var(--zinc-300); cursor: pointer; transition: background 0.2s ease;
    }
    .admin-switch span {
      display: block; width: 1.5rem; height: 1.5rem; border-radius: 50%;
      background: var(--white); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease;
    }
    .admin-switch.is-on { background: #dc2626; }
    .admin-switch.is-on span { transform: translateX(1.5rem); }
    .maintenance-page {
      min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
      background: radial-gradient(circle at top right, #8f3b13, #4b1001 45%, #240701);
    }
    .maintenance-card {
      width: min(42rem, 100%); padding: clamp(2rem, 6vw, 4.5rem); text-align: center;
      background: rgba(255, 255, 255, 0.97); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
    }
    .maintenance-card img { display: block; max-width: 12rem; max-height: 5rem; margin: 0 auto 2.5rem; object-fit: contain; }
    .maintenance-card h1 { margin: 0.5rem 0 1rem; font-size: clamp(2.2rem, 7vw, 4.5rem); line-height: 0.95; }
    .maintenance-card p { max-width: 34rem; margin: 0 auto 2rem; color: var(--zinc-600); }
    .admin-targets-grid {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem;
      max-height: 18rem; overflow-y: auto;
    }
    @media (max-width: 900px) { .admin-targets-grid { grid-template-columns: 1fr; } }
    @media (max-width: 1024px) {
      .admin-shell { grid-template-columns: 1fr; }
      .admin-sidebar {
        position: static;
        height: auto;
      }
      .admin-grid,
      .admin-grid-compact,
      .admin-chart-grid,
      .admin-users-grid,
      .admin-panels {
        grid-template-columns: 1fr;
      }
      .admin-settings-grid { grid-template-columns: 1fr; }
      .admin-order-item { grid-template-columns: 1fr; }
      .admin-permission-grid { grid-template-columns: 1fr; }
      .admin-gallery-item,
      .admin-gallery-new-row {
        grid-template-columns: 1fr;
      }
      .admin-gallery-item-body {
        grid-template-columns: 1fr;
      }
      .admin-gallery-drag-handle {
        min-height: 40px;
        width: 100%;
      }
      .admin-gallery-mobile-actions {
        display: flex;
      }
      .admin-gallery-mobile-actions .btn-outline,
      .admin-gallery-remove-button,
      .admin-gallery-inline-remove,
      [data-gallery-make-main] {
        width: 100%;
      }
      .admin-topbar {
        flex-direction: column;
        align-items: flex-start;
      }
      .admin-topbar-actions {
        width: 100%;
      }
      .admin-user-card-topbar {
        width: 100%;
        min-width: 0;
        max-width: none;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
    }
    @media print {
      .admin-body {
        background: #fff;
      }
      .admin-export-shell {
        padding: 0;
      }
      .admin-export-head .btn-outline {
        display: none;
      }
      .admin-panel,
      .admin-export-card {
        box-shadow: none;
      }
    }

    /* ===== NOUVEAUX STYLES POUR LE FILTRAGE MARQUE ===== */
    .brand-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1rem;
      align-items: center;
    }
    
    .brand-control-btn {
      padding: 0.375rem 0.75rem;
      font-size: 0.75rem;
      background: var(--zinc-100);
      border: 1px solid var(--zinc-300);
      color: var(--zinc-700);
      border-radius: 0.25rem;
      transition: all 0.2s;
    }
    
    .brand-control-btn:hover {
      background: var(--zinc-200);
      border-color: var(--zinc-400);
    }
    
    .selected-count {
      font-size: 0.75rem;
      color: var(--zinc-600);
      margin-left: auto;
    }
    
    .sidebar .brand-check {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    
    .sidebar .brand-check.brand-disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .sidebar .brand-check input[type="checkbox"] {
      margin-right: 0.5rem;
    }
    
    .brand-name {
      flex: 1;
      font-size: 0.875rem;
    }
    
    .brand-count {
      font-size: 0.75rem;
      color: var(--zinc-500);
      min-width: 2.5rem;
      text-align: right;
    }
    
    .active-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1.5rem;
      padding: 1rem;
      background: var(--zinc-100);
      border-radius: 0.5rem;
      border: 1px solid var(--zinc-200);
    }
    
    .filter-badge {
      display: inline-flex;
      align-items: center;
      background: var(--zinc-200);
      padding: 0.375rem 0.75rem;
      border-radius: 1rem;
      font-size: 0.75rem;
      color: var(--zinc-800);
      gap: 0.5rem;
    }
    
    .filter-badge .remove-filter {
      background: none;
      border: none;
      color: var(--zinc-600);
      font-size: 1rem;
      line-height: 1;
      padding: 0;
      width: 1rem;
      height: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: color 0.2s;
    }
    
    .filter-badge .remove-filter:hover {
      color: var(--zinc-900);
    }
    
    .clear-all-filters {
      padding: 0.375rem 0.75rem;
      font-size: 0.75rem;
      background: transparent;
      border: 1px solid var(--zinc-400);
      color: var(--zinc-700);
      border-radius: 0.25rem;
      transition: all 0.2s;
    }
    
    .clear-all-filters:hover {
      background: var(--zinc-200);
      border-color: var(--zinc-500);
    }
    
    /* Styles pour mobile */
    @media (max-width: 768px) {
      .sidebar {
        display: none;
      }
      
      .brand-controls {
        flex-direction: column;
        align-items: stretch;
      }
      
      .brand-control-btn {
        width: 100%;
        text-align: center;
      }
      
      .selected-count {
        margin-left: 0;
        text-align: center;
        margin-top: 0.5rem;
      }
      
      .active-filters {
        padding: 0.75rem;
      }
      
      .filter-badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
      }
    }
    
    /* Bouton pour ouvrir les filtres sur mobile */
    .mobile-filter-toggle {
      display: none;
    }
    
    @media (max-width: 768px) {
      .mobile-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.625rem;
        background: var(--amber-500);
        color: var(--white);
        border: none;
        border-radius: 0.25rem;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        font-weight: 600;
        font-size: 0.75rem;
        width: auto;
        align-self: flex-start;
      }
      
      .mobile-filter-toggle .active-filters-count {
        background: var(--white);
        color: var(--amber-500);
        border-radius: 50%;
        width: 1rem;
        height: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.625rem;
      }
      
      .mobile-filter-toggle svg {
        width: 0.875rem;
        height: 0.875rem;
      }
    }

/* ===== FILTRES BOUTIQUE ===== */
.filter-drawer-backdrop,
.sidebar-mobile-header { display: none; }

.sidebar .cat-all-btn,
.sidebar .acc-btn,
.sidebar .acc-link { width: 100%; font-family: inherit; }

.sidebar .cat-all-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-bottom: 0.5rem; padding: 0.75rem 0.875rem;
  color: var(--zinc-700); font-size: 0.875rem; font-weight: 600; text-align: left;
  background: var(--zinc-50); border: 1px solid var(--zinc-200); border-radius: 0.5rem;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.sidebar .cat-all-btn:hover,
.sidebar .cat-all-btn.active {
  color: var(--amber-700); background: var(--zinc-100); border-color: var(--amber-500);
}
.sidebar .acc-count,
.sidebar .btag-count {
  flex-shrink: 0; color: var(--zinc-500); font-size: 0.72rem; font-variant-numeric: tabular-nums;
}
.sidebar .acc-cat { border-bottom: 1px solid var(--zinc-200); }
.sidebar .acc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 0.25rem; color: var(--zinc-800); font-size: 0.875rem;
  font-weight: 600; text-align: left; background: transparent; border: 0;
  transition: color 0.2s;
}
.sidebar .acc-btn:hover,
.sidebar .acc-btn.active { color: var(--amber-700); }
.sidebar .acc-label { min-width: 0; overflow-wrap: anywhere; }
.sidebar .acc-meta { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.sidebar .acc-chev {
  width: 0.875rem; height: 0.875rem; color: var(--amber-500); transition: transform 0.2s ease;
}
.sidebar .acc-cat.open .acc-chev { transform: rotate(90deg); }
.sidebar .acc-panel { display: none; padding: 0 0.25rem 0.75rem 0.75rem; }
.sidebar .acc-cat.open .acc-panel { display: block; }
.sidebar .acc-link {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0.625rem; color: var(--zinc-600); font-size: 0.8125rem;
  line-height: 1.35; text-align: left; background: transparent; border: 0;
  border-left: 2px solid transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.sidebar .acc-link:hover,
.sidebar .acc-link.on {
  color: var(--amber-700); background: var(--zinc-100); border-left-color: var(--amber-500);
}

.sidebar .brand-controls {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem; margin-bottom: 0.875rem;
}
.sidebar .brand-control-btn {
  min-width: 0; padding: 0.5rem; color: var(--zinc-600); font-size: 0.7rem; line-height: 1.25;
  background: var(--zinc-50); border: 1px solid var(--zinc-200); border-radius: 0.375rem;
}
.sidebar .brand-control-btn:hover {
  color: var(--amber-700); background: var(--zinc-100); border-color: var(--amber-500);
}
.sidebar .selected-count {
  grid-column: 1 / -1; margin: 0; color: var(--zinc-500); font-size: 0.75rem; text-align: left;
}
.sidebar .brand-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sidebar .btag {
  position: relative; display: inline-flex; align-items: center; gap: 0.4rem; max-width: 100%;
  padding: 0.5rem 0.7rem; color: var(--zinc-700); font-size: 0.78rem; line-height: 1.2;
  background: var(--white); border: 1px solid var(--zinc-200); border-radius: 999px;
  cursor: pointer; user-select: none; transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.sidebar .btag:hover,
.sidebar .btag:has(.btag-input:checked) {
  color: var(--amber-700); background: var(--zinc-100); border-color: var(--amber-500);
}
.sidebar .btag:focus-within { outline: 2px solid var(--amber-500); outline-offset: 2px; }
.sidebar .btag-input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.sidebar .btag-name { min-width: 0; overflow-wrap: anywhere; }
.sidebar :is(button, input, a):focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; }
.sidebar-apply { border-radius: 0; }

@media (max-width: 1023px) {
  .mobile-filter-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 44px; margin: 0 0 1.25rem; padding: 0.65rem 1rem;
    color: var(--white); font-size: 0.8125rem; font-weight: 600;
    background: var(--amber-500); border: 0; border-radius: 0.5rem;
  }
  .mobile-filter-toggle svg { width: 1rem; height: 1rem; }
  .mobile-filter-toggle .active-filters-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem;
    color: var(--amber-700); font-size: 0.6875rem; background: var(--white); border-radius: 999px;
  }
  .sidebar {
    display: block; position: fixed; inset: 0 auto 0 0; z-index: 2001;
    width: min(90vw, 380px); height: 100dvh; padding: 0 1.25rem 2rem;
    overflow-y: auto; overscroll-behavior: contain; background: var(--white);
    border: 0; box-shadow: none;
    transform: translateX(-105%); visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s;
  }
  .sidebar.is-open { transform: translateX(0); visibility: visible; }
  .sidebar-mobile-header {
    position: sticky; top: 0; z-index: 1; display: flex;
    align-items: center; justify-content: space-between; gap: 1rem;
    margin: 0 -1.25rem 1.25rem; padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--zinc-200);
    backdrop-filter: blur(8px);
  }
  .sidebar-mobile-header strong { color: var(--zinc-900); font-size: 1rem; }
  .sidebar-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; color: var(--zinc-700); font-size: 1.75rem; line-height: 1;
    background: var(--zinc-100); border: 1px solid var(--zinc-200); border-radius: 50%;
  }
  .filter-drawer-backdrop {
    display: block; position: fixed; inset: 0; z-index: 2000; width: 100%; height: 100%;
    background: rgba(23, 21, 11, 0.42); border: 0;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s;
  }
  .filter-drawer-backdrop.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  body.shop-filters-open { overflow: hidden; }
  .sidebar-section { margin-bottom: 1.5rem; padding-bottom: 1.5rem; }
}

.required-indicator {
  color: #b42318;
  font-weight: 700;
}

.floating-whatsapp {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: #25D366;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 50px;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.35);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  line-height: 1;
}

.floating-whatsapp svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.floating-whatsapp:hover {
  background: #20bd5a;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45);
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: #25D366;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  border-radius: 50px;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.28);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-whatsapp:hover {
  background: #20bd5a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.38);
}

.product-back-link {
  width: fit-content;
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .floating-whatsapp {
    right: 1rem;
    bottom: 1rem;
    padding: 0.85rem;
    border-radius: 50%;
    min-width: 3.25rem;
    min-height: 3.25rem;
  }

  .floating-whatsapp span {
    display: none;
  }

  .floating-whatsapp svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}