/* Shared styles for Sahel's Treasure store pages.
   Palette and type must match the landing page's inline styles. */
:root {
  --gold:        #c8a97e;
  --gold-light:  #e2c99a;
  --gold-pale:   #f5ede0;
  --deep:        #2e1f2a;
  --brown:       #5a3a4a;
  --cream:       #fdf8f4;
  --rose:        #d4907a;
  --rose-light:  #edc4b8;
  --blush:       #f2d5cc;
  --blush-dark:  #e8b8a8;
  --champagne:   #f7efe4;
  --ivory:       #faf4ef;
  --text:        #3a2530;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Georgia', serif; background: var(--cream); color: var(--text); overflow-x: hidden; }

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 56px; height: 68px;
  background: rgba(253,248,244,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(200,169,126,0.3);
}
.nav-logo { font-size: 1.1rem; letter-spacing: 0.12em; color: var(--brown); font-style: italic; }
.nav-logo a { color: inherit; text-decoration: none; }
nav ul { list-style: none; display: flex; gap: 36px; }
nav ul a {
  text-decoration: none; font-family: 'Arial', sans-serif;
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brown); opacity: 0.7; transition: opacity 0.2s, color 0.2s;
}
nav ul a:hover { color: var(--rose); opacity: 1; }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; font-size: 1.3rem; color: var(--brown); }
.mobile-menu {
  display: none; position: fixed; top: 68px; left: 0; right: 0; z-index: 199;
  background: rgba(253,248,244,0.98); border-bottom: 1px solid rgba(200,169,126,0.3);
  padding: 12px 24px 20px; flex-direction: column; gap: 14px;
}
.mobile-menu a {
  text-decoration: none; font-family: 'Arial', sans-serif; font-size: 0.8rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brown); padding: 8px 0;
}
.mobile-menu.open { display: flex; }

section { padding: 110px 56px 90px; max-width: 1280px; margin: 0 auto; }
.section-label {
  font-family: 'Arial', sans-serif; font-size: 0.72rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 12px;
}
.section-title {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem); color: var(--brown);
  text-align: center; line-height: 1.25; font-style: italic;
}
.gold-rule { width: 64px; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); margin: 22px auto 0; }

.btn {
  display: inline-block; padding: 14px 34px; font-family: 'Arial', sans-serif;
  font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; transition: all 0.25s; cursor: pointer;
}
.btn-gold { background: var(--gold); color: #fff; border: 1px solid var(--gold); }
.btn-gold:hover { background: transparent; color: var(--gold); }

.cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 32px 24px; margin-top: 48px;
}
.product-card { text-decoration: none; display: block; }
.card-photo { aspect-ratio: 1/1; background: var(--champagne); overflow: hidden; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.product-card:hover .card-photo img { transform: scale(1.05); }
.card-kicker {
  font-family: 'Arial', sans-serif; font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--rose); margin: 14px 0 4px;
}
.card-name { font-family: 'Georgia', serif; font-size: 1.05rem; color: var(--brown); line-height: 1.3; }
.card-sub { font-family: 'Georgia', serif; font-style: italic; font-size: 0.85rem; color: var(--rose); margin-top: 2px; }
.card-price { font-family: 'Georgia', serif; font-size: 1rem; color: var(--brown); margin-top: 8px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .card-photo img { transition: none; }
}

/* cart (markup injected by store.js) */
#cart-overlay { display: none; position: fixed; inset: 0; background: rgba(46,31,42,0.4); z-index: 300; }
#cart-sidebar {
  display: none; position: fixed; top: 0; right: 0; width: 360px; max-width: 92vw; height: 100%;
  background: var(--cream); z-index: 400; box-shadow: -4px 0 24px rgba(46,31,42,0.15); flex-direction: column;
}

@media (max-width: 960px) {
  section { padding: 100px 28px 70px; }
  nav { padding: 0 24px; }
}
@media (max-width: 600px) {
  nav ul { display: none; }
  .nav-toggle { display: block; }
}