/* ============================================================
   LOLA VIBES — WHITE THEME  (theme.css)
   Replaces the old black theme. White page, white cards,
   black buttons, sand accent. NO GREEN. Loaded AFTER style.css.
   ============================================================ */

:root {
  --page-bg:      #ffffff;   /* white page background           */
  --page-bg-2:    #f5f7f5;   /* subtle light surface            */
  --surface:      #ffffff;   /* white cards / drawers           */
  --ink-green:    #111111;   /* body text (kept name for compat) */

  /* map the base tokens to a light, non-green palette */
  --off:        #f7f7f5;     /* light neutral surface (media, heroes) */
  --gray:       #5a5a5a;
  --gray-mid:   #a8a8a8;
  --gray-light: #e6e4e0;     /* borders (neutral, not green)     */
  --green:         #111111;  /* accents neutralised -> black     */
  --green-strong:  #000000;
  --accent:        #c4a882;  /* original sand accent             */
  --accent-strong: #c8a96e;
}

/* ---------- Page ---------- */
html { background: var(--page-bg); }
body {
  background: var(--page-bg) !important;
  color: #111111;
}
::selection { background: #111; color: #fff; }

/* ---------- Header ---------- */
.site-header { background: rgba(255, 255, 255, 0.92); border-bottom-color: transparent; }
.site-header.scrolled { border-color: var(--gray-light); }
/* the logo asset is white — invert it so it reads on the light header */
.nav-logo img { filter: invert(1) brightness(0.25); }
.nav-left a::after,
.nav-right a.nav-link::after { background: #111; }
.nav-icon-btn:hover { background-color: rgba(0, 0, 0, 0.06); }
.lang-btn.active { background: #111; color: #fff; }
.cart-badge { background: #111; border-color: #fff; }
.hamburger span { background: #111; }
.mobile-menu { background: #fff; }
.mobile-menu a { color: #111; }

/* ---------- Cards stay crisp white ---------- */
.product-card-img,
.gallery-thumb,
.cart-item-img,
.product-media { background: #fff; }

/* ---------- Buttons: BLACK ---------- */
.btn-dark { background: #111111; border-color: #111111; color: #fff; }
.btn-dark:hover { background: #000000; border-color: #000000; }
.btn-outline-dark { color: #111; border-color: #111; }
.btn-outline-dark:hover { background: #111; border-color: #111; color: #fff; }
.section-subtitle::before { background: #111; }
.chip.is-active,
.filter-chip.active { background: #111 !important; border-color: #111 !important; color: #fff !important; }
.size-btn.active { background: #111 !important; border-color: #111 !important; color: #fff !important; }
.add-to-cart-btn { background: #111111; border-color: #111111; }
.add-to-cart-btn:hover { background: #000000; border-color: #000000; }
.add-to-cart-btn.added { background: #111111; }

/* ---------- Scrollbar (neutral) ---------- */
::-webkit-scrollbar-track { background: var(--page-bg-2); }
::-webkit-scrollbar-thumb { background: #c9c5bd; border-color: var(--page-bg-2); }
::-webkit-scrollbar-thumb:hover { background: #111; }

/* ---------- Loading state while Shopify products load ---------- */
html.is-loading-products .product-grid,
html.is-loading-products .shop-grid { min-height: 320px; }
html.is-loading-products .product-grid::after,
html.is-loading-products .shop-grid::after {
  content: 'Chargement…';
  display: block;
  padding: 48px 0;
  text-align: center;
  color: #9a9a9a;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}