/* ============================================================
   AJN Storefront — store.css
   Design tokens — Warm Ivory & Gold (light luxury theme)
   ============================================================ */

/* ─── TOKENS ──────────────────────────────────────────────── */
:root {
  --gold:        #C9A84C;
  --gold-light:  #E8D5A3;
  --gold-deep:   #9C7A2E;
  --dark:        #2B2013;
  --dark2:       #3D2E10;
  --mid:         #EDE0C4;
  --text:        #3D2E10;
  --cream:       #FAF6EF;
  --gold-pale:   #F5EDD8;
  --surface:     #FFFFFF;
  --border:      rgba(201,168,76,0.35);
  --nav-h:       72px;
  --radius:      4px;
  --shadow:      0 8px 32px rgba(61,46,16,.12);
}

/* ─── RESET ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; }
body  {
  background:var(--cream);
  color:var(--text);
  font-family:'Raleway',sans-serif;
  font-weight:300;
  overflow-x:hidden;
  line-height:1.6;
}

/* ─── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar       { width:5px; }
::-webkit-scrollbar-track { background:var(--cream); }
::-webkit-scrollbar-thumb { background:var(--gold); border-radius:2px; }

/* ─── CURSOR DOT ──────────────────────────────────────────── */
.cursor-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--gold);
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s;
  mix-blend-mode:difference;
}
@media(pointer:coarse){ .cursor-dot { display:none; } }

/* ─── NAVIGATION ──────────────────────────────────────────── */
#mainNav {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px;
  background:rgba(250,246,239,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .4s;
}
#mainNav.scrolled {
  box-shadow:0 4px 24px rgba(61,46,16,.08);
}
.nav-logo {
  font-family:'Playfair Display',serif;
  font-size:20px; font-weight:500;
  color:var(--text); letter-spacing:.06em;
  text-decoration:none; flex-shrink:0;
  display:inline-flex; align-items:center; gap:10px;
}
.nav-logo span { color:var(--gold); }
.logo-mark {
  width:38px; height:38px; border-radius:50%;
  object-fit:cover; flex-shrink:0;
  box-shadow:0 0 0 1.5px rgba(196,155,58,.45);
}
.nav-links {
  display:flex; gap:36px; list-style:none;
}
.nav-links a {
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(61,46,16,0.85); text-decoration:none;
  transition:color .2s; position:relative; padding-bottom:2px;
}
.nav-links a:hover,
.nav-links a.active { color:var(--gold-deep); }
.nav-links a.active::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:1px; background:var(--gold);
}
.nav-right {
  display:flex; align-items:center; gap:20px;
}
.nav-cart {
  position:relative; color:rgba(61,46,16,.65);
  text-decoration:none; display:flex; align-items:center;
  transition:color .2s;
}
.nav-cart:hover { color:var(--gold-deep); }
.cart-count {
  position:absolute; top:-7px; right:-9px;
  background:var(--gold); color:var(--dark);
  font-size:9px; font-weight:700;
  width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.nav-cta {
  background:transparent; border:1px solid var(--gold);
  color:var(--gold-deep); padding:10px 24px;
  font-family:'Raleway',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; transition:background .2s,color .2s;
  text-decoration:none; white-space:nowrap;
}
.nav-cta:hover { background:var(--gold); color:var(--dark); }
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.nav-hamburger span {
  display:block; width:22px; height:1.5px;
  background:rgba(61,46,16,.8);
  transition:transform .3s,opacity .3s;
}

/* ─── MOBILE MENU ─────────────────────────────────────────── */
.mobile-menu {
  position:fixed; top:0; right:-100%; width:280px; height:100%;
  background:var(--surface); z-index:300;
  padding:80px 40px 40px;
  transition:right .35s cubic-bezier(.25,.46,.45,.94);
  border-left:1px solid var(--border);
  box-shadow:-8px 0 32px rgba(61,46,16,.1);
}
.mobile-menu.open { right:0; }
.mobile-menu ul   { list-style:none; }
.mobile-menu li   { margin-bottom:28px; }
.mobile-menu a {
  font-size:14px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(61,46,16,.75); text-decoration:none; transition:color .2s;
}
.mobile-menu a:hover { color:var(--gold-deep); }
.mobile-menu-close {
  position:absolute; top:24px; right:24px;
  background:none; border:none; color:rgba(61,46,16,.5);
  font-size:20px; cursor:pointer; transition:color .2s;
}
.mobile-menu-close:hover { color:var(--gold-deep); }
.mobile-overlay {
  position:fixed; inset:0; background:rgba(43,32,19,.5);
  z-index:299; opacity:0; pointer-events:none; transition:opacity .35s;
}
.mobile-overlay.open { opacity:1; pointer-events:all; }

@media(max-width:768px) {
  nav { padding:0 24px; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .nav-cta { display:none; }
}

/* ─── HERO (full-bleed photo — keeps a dark scrim + light text
       for legibility, independent of the site's light theme) ── */
.hero {
  position:relative; height:100vh; min-height:600px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-bg {
  position:absolute; inset:-20%;
  background-size:cover; background-position:center;
  will-change:transform;
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(43,32,19,.35) 0%,
    rgba(43,32,19,.58) 50%,
    rgba(43,32,19,.86) 100%
  );
}
.hero-content {
  position:relative; z-index:2;
  text-align:center; padding:0 24px;
  animation:heroFadeIn 1.2s ease forwards;
}
@keyframes heroFadeIn {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
.hero-eyebrow {
  font-size:11px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:24px;
  display:flex; align-items:center; justify-content:center; gap:16px;
}
.hero-eyebrow::before,.hero-eyebrow::after {
  content:''; display:block; width:40px; height:1px;
  background:var(--gold-light); opacity:.7;
}
.hero-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(44px,8vw,96px);
  font-weight:400; line-height:1.05;
  letter-spacing:.02em; color:#fff; margin-bottom:12px;
}
.hero-title em { font-style:italic; color:var(--gold-light); }
.hero-subtitle {
  font-size:clamp(13px,1.8vw,16px);
  letter-spacing:.15em; color:rgba(255,255,255,.75);
  margin-bottom:48px; font-weight:200;
}
.hero-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-scroll {
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:9px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.55); z-index:2;
  animation:scrollPulse 2s ease infinite;
}
.hero-scroll-line {
  width:1px; height:40px;
  background:linear-gradient(to bottom,var(--gold-light),transparent);
}
@keyframes scrollPulse {
  0%,100% { opacity:.4; transform:translateX(-50%) translateY(0); }
  50%     { opacity:1;  transform:translateX(-50%) translateY(6px); }
}

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn-primary {
  background:var(--gold); color:var(--dark);
  padding:16px 44px;
  font-family:'Raleway',sans-serif; font-size:11px;
  letter-spacing:.25em; text-transform:uppercase;
  text-decoration:none; font-weight:600;
  transition:background .2s,transform .2s;
  display:inline-block; border:none; cursor:pointer;
}
.btn-primary:hover { background:var(--gold-light); transform:translateY(-2px); }

/* Default outline button — for use on light page backgrounds */
.btn-outline {
  border:1px solid rgba(61,46,16,.35); color:var(--text);
  padding:16px 44px;
  font-family:'Raleway',sans-serif; font-size:11px;
  letter-spacing:.25em; text-transform:uppercase;
  text-decoration:none; font-weight:400;
  transition:border-color .2s,color .2s;
  display:inline-block;
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold-deep); }

/* Outline button variant for use over a photo + dark overlay
   (hero, parallax banners) where light text is needed instead */
.btn-outline-light {
  border:1px solid rgba(255,255,255,.55); color:#fff;
  padding:16px 44px;
  font-family:'Raleway',sans-serif; font-size:11px;
  letter-spacing:.25em; text-transform:uppercase;
  text-decoration:none; font-weight:400;
  transition:border-color .2s,color .2s;
  display:inline-block;
}
.btn-outline-light:hover { border-color:var(--gold-light); color:var(--gold-light); }

.btn-outline-sm {
  border:1px solid var(--gold); color:var(--gold-deep);
  padding:9px 22px; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; font-family:'Raleway',sans-serif;
  transition:background .2s,color .2s; display:inline-block;
}
.btn-outline-sm:hover { background:var(--gold); color:var(--dark); }

/* ─── MARQUEE ─────────────────────────────────────────────── */
.marquee-strip { background:var(--gold); padding:14px 0; overflow:hidden; }
.marquee-inner {
  display:flex; animation:marquee 30s linear infinite; white-space:nowrap;
}
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee-item {
  font-size:11px; letter-spacing:.25em; text-transform:uppercase;
  color:var(--dark); font-weight:600; padding:0 32px;
  display:inline-flex; align-items:center; gap:12px;
}
.marquee-item::after { content:'✦'; font-size:8px; }

/* ─── SECTION COMMONS ─────────────────────────────────────── */
section { position:relative; }
.section-inner { max-width:1200px; margin:0 auto; padding:100px 48px; }
@media(max-width:768px) { .section-inner { padding:72px 24px; } }
.section-label {
  font-size:10px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:16px; display:block;
}
.section-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(32px,5vw,54px);
  font-weight:400; line-height:1.15; color:var(--text); margin-bottom:20px;
}
.section-title em { font-style:italic; color:var(--gold-deep); }
.section-body {
  font-size:15.5px; color:rgba(61,46,16,.65);
  line-height:1.9; max-width:520px;
}
.divider-gold {
  display:flex; align-items:center; gap:16px; margin:20px 0 36px;
}
.divider-gold::before {
  content:''; display:block; width:48px; height:1px;
  background:var(--gold); opacity:.7;
}
.divider-gold-diamond {
  width:6px; height:6px; background:var(--gold);
  transform:rotate(45deg); flex-shrink:0;
}

/* Overrides for section-title/section-body/section-label when they
   appear inside a photo + dark-overlay banner (parallax CTA) instead
   of on the normal light page background */
.parallax-banner-content .section-label { color:var(--gold-light); }
.parallax-banner-content .section-title { color:#fff; }
.parallax-banner-content .section-title em { color:var(--gold-light); }
.parallax-banner-content .section-body { color:rgba(255,255,255,.8); }

/* ─── FEATURED PRODUCTS ───────────────────────────────────── */
.featured-section { background:var(--gold-pale); }
.products-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px; margin-top:56px;
}
@media(max-width:1100px) { .products-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px)  { .products-grid { grid-template-columns:repeat(2,1fr); gap:16px; } }
@media(max-width:400px)  { .products-grid { grid-template-columns:1fr; } }

.product-card {
  background:var(--surface);
  border:1px solid rgba(61,46,16,.08);
  transition:border-color .3s, transform .3s, box-shadow .3s;
  text-decoration:none; color:inherit;
  display:block;
}
.product-card:hover {
  border-color:var(--border);
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.product-img-wrap {
  position:relative; aspect-ratio:1;
  overflow:hidden; background:var(--mid);
}
.product-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.25,.46,.45,.94);
}
.product-card:hover .product-img-wrap img { transform:scale(1.07); }
.product-badge {
  position:absolute; top:12px; left:12px;
  background:var(--gold); color:var(--dark);
  font-size:9px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 9px;
}
.product-discount-badge {
  position:absolute; top:12px; right:12px;
  background:#c0392b; color:#fff;
  font-size:9px; font-weight:700;
  padding:3px 8px;
}

/* ── Promo badges (New / Hot / Bestseller / custom text) ─────────────
   Default falls back to the gold styling above (.product-badge already
   sets that); these variants recolor known keywords so "Hot" reads as
   urgent and "New" reads as fresh, without needing per-item color pickers
   in the admin. Any other custom text just keeps the gold default. */
.product-badge-hot, .product-badge-sale, .product-badge-limited {
  background:#c0392b; color:#fff;
}
.product-badge-new {
  background:#2e7d32; color:#fff;
}
.product-badge-bestseller, .product-badge-trending {
  background:#1a1a2e; color:var(--gold);
}
/* Detail-page inline placement (product.php) instead of overlaid on the image */
.product-badge-inline {
  position:static; display:inline-block; margin:0 8px 0 0;
  vertical-align:middle;
}

/* ── Stock urgency ("Only 3 left!") ───────────────────────────────── */
.product-outofstock-overlay {
  position:absolute; inset:0;
  background:rgba(20,20,20,.55);
  color:#fff; font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase;
  display:flex; align-items:center; justify-content:center;
}
.product-stock-chip {
  position:absolute; bottom:10px; left:12px;
  background:rgba(230,81,0,.92); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.02em;
  padding:3px 9px; border-radius:2px;
  display:flex; align-items:center; gap:4px;
}
.product-stock-chip-inline {
  position:static; display:inline-flex;
  margin:8px 0 0; border-radius:3px;
}
.product-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--mid) 0%,var(--gold-pale) 100%);
}
.product-placeholder svg { opacity:.35; }
.product-info { padding:16px; }
.product-category {
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:6px; display:block;
}
.product-name {
  font-family:'Playfair Display',serif;
  font-size:15px; font-weight:400; color:var(--text);
  margin-bottom:8px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.product-desc {
  font-size:12px; color:rgba(61,46,16,.5);
  line-height:1.6; margin-bottom:12px;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.product-rating-mini {
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:rgba(61,46,16,.45);
  margin-bottom:6px;
}
.product-rating-mini .star-rating { color:var(--gold); letter-spacing:1px; }
.product-price-row {
  display:flex; align-items:center; gap:8px;
}
.product-price {
  font-family:'Playfair Display',serif;
  font-size:17px; font-weight:500; color:var(--gold-deep);
}
.product-mrp {
  font-size:12px; color:rgba(61,46,16,.4);
  text-decoration:line-through;
}
.products-empty {
  grid-column:1/-1; text-align:center; padding:60px 0;
  color:rgba(61,46,16,.4);
}
.products-empty p { font-size:15px; margin-top:12px; }

/* ─── PARALLAX BANNERS (photo — keeps dark scrim + light text) ─ */
.parallax-banner {
  height:60vh; min-height:380px;
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.parallax-banner-bg {
  position:absolute; inset:-20%;
  background-size:cover; background-position:center;
  will-change:transform;
}
.parallax-banner-overlay {
  position:absolute; inset:0;
  background:rgba(43,32,19,.58);
}
.parallax-banner-content {
  position:relative; z-index:2;
  text-align:center; padding:0 24px;
}
.parallax-banner-content blockquote {
  font-family:'Playfair Display',serif;
  font-size:clamp(22px,4vw,40px);
  font-style:italic; font-weight:400;
  color:#fff; line-height:1.4; max-width:760px;
  margin:0 auto 24px;
}
.parallax-banner-content cite {
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-light); font-style:normal;
}

/* ─── CATEGORIES ──────────────────────────────────────────── */
.categories-section { background:var(--cream); }
.categories-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; margin-top:56px;
}
@media(max-width:900px) { .categories-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:580px) { .categories-grid { grid-template-columns:1fr; } }
.category-card {
  position:relative; overflow:hidden;
  aspect-ratio:3/4; cursor:pointer; text-decoration:none; display:block;
  box-shadow:0 4px 20px rgba(61,46,16,.1);
}
.category-card:first-child { grid-row:span 2; }
@media(max-width:900px) { .category-card:first-child { grid-row:span 1; } }
.category-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform .7s cubic-bezier(.25,.46,.45,.94);
}
.category-card:hover .category-bg { transform:scale(1.08); }
/* Category tiles keep a dark-photo treatment (like the hero) so the
   white name/tag/count text on top stays legible regardless of the
   overall light theme around them */
.category-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(43,32,19,.86) 0%,rgba(43,32,19,.08) 60%);
  transition:background .4s;
}
.category-card:hover .category-overlay {
  background:linear-gradient(to top,rgba(43,32,19,.9) 0%,rgba(43,32,19,.25) 60%);
}
/* Category gradient backgrounds (fallback when no image) — soft
   champagne/blush/sage tones instead of near-black jewel tones */
.cat-bg-1 { background:linear-gradient(135deg,#E8D5A3 0%,#C9A84C 100%); }
.cat-bg-2 { background:linear-gradient(135deg,#D9E2D3 0%,#A8BFA0 100%); }
.cat-bg-3 { background:linear-gradient(135deg,#EAD4DC 0%,#CFA0B3 100%); }
.cat-bg-4 { background:linear-gradient(135deg,#F0E0C0 0%,#D9B77E 100%); }
.cat-bg-5 { background:linear-gradient(135deg,#D6E4E8 0%,#A9C4CC 100%); }
.cat-bg-6 { background:linear-gradient(135deg,#E6D9EA 0%,#C2A8CC 100%); }
.category-info {
  position:absolute; bottom:0; left:0; right:0; padding:28px;
  transform:translateY(8px); transition:transform .4s;
}
.category-card:hover .category-info { transform:translateY(0); }
.category-tag {
  font-size:9px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:8px; display:block;
}
.category-name {
  font-family:'Playfair Display',serif;
  font-size:clamp(20px,2.5vw,28px); color:#fff; font-weight:400;
  margin-bottom:6px;
}
.category-count {
  font-size:11px; color:rgba(255,255,255,.7); margin-bottom:10px;
}
.category-arrow {
  width:32px; height:32px; border:1px solid var(--gold-light);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px;
  opacity:0; transform:translateX(-8px);
  transition:opacity .3s,transform .3s;
}
.category-card:hover .category-arrow { opacity:1; transform:translateX(0); }

/* ─── FEATURES ────────────────────────────────────────────── */
.features-section {
  background:var(--gold-pale);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.features-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
@media(max-width:900px) { .features-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:500px) { .features-grid { grid-template-columns:1fr; } }
.feature-item {
  padding:48px 36px; text-align:center;
  border-right:1px solid var(--border);
}
.feature-item:last-child { border-right:none; }
@media(max-width:900px) {
  .feature-item:nth-child(2) { border-right:none; }
  .feature-item:nth-child(3) { border-right:1px solid var(--border); }
  .feature-item             { border-bottom:1px solid var(--border); }
}
.feature-icon {
  width:52px; height:52px;
  border:1px solid rgba(201,168,76,.5); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px; font-size:22px; color:var(--gold-deep);
  background:var(--surface);
}
.feature-item h3 {
  font-family:'Playfair Display',serif; font-size:18px; font-weight:400;
  color:var(--text); margin-bottom:10px;
}
.feature-item p { font-size:13px; color:rgba(61,46,16,.55); line-height:1.7; }

/* ─── TESTIMONIALS ────────────────────────────────────────── */
.testimonials-section { background:var(--cream); padding:100px 0; }
.testimonials-inner {
  max-width:900px; margin:0 auto; padding:0 48px; text-align:center;
}
@media(max-width:768px) { .testimonials-inner { padding:0 24px; } }
.testimonials-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(28px,4vw,42px); font-weight:400;
  color:var(--text); margin-bottom:64px;
}
.testimonials-title em { font-style:italic; color:var(--gold-deep); }
.testimonials-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
@media(max-width:700px) { .testimonials-grid { grid-template-columns:1fr; } }
.testimonial-card {
  background:var(--surface);
  border:1px solid var(--border); padding:32px 28px;
  text-align:left; position:relative;
  box-shadow:0 2px 16px rgba(61,46,16,.06);
}
.testimonial-card::before {
  content:'\201C';
  font-family:'Playfair Display',serif; font-size:64px;
  color:var(--gold); opacity:.35;
  position:absolute; top:16px; left:20px; line-height:1;
}
.testimonial-stars {
  color:var(--gold); font-size:13px; margin-bottom:16px; letter-spacing:2px;
}
.testimonial-text {
  font-size:14px; color:rgba(61,46,16,.7);
  line-height:1.8; margin-bottom:20px; font-style:italic;
}
.testimonial-author {
  font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-deep);
}

/* ─── CTA BANNER ──────────────────────────────────────────── */
.cta-content   { max-width:600px; }
.cta-links     { display:flex; gap:16px; flex-wrap:wrap; }

/* ─── ABOUT (homepage mini) ───────────────────────────────── */
.about-section { background:var(--gold-pale); }
.about-grid    {
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:center;
}
@media(max-width:768px) { .about-grid { grid-template-columns:1fr; gap:48px; } }
.about-img-wrap  { position:relative; }
.about-img {
  width:100%; aspect-ratio:3/4;
  background-size:cover; background-position:center;
  box-shadow:0 12px 32px rgba(61,46,16,.15);
}
.about-img-frame {
  position:absolute; top:20px; left:20px; right:-20px; bottom:-20px;
  border:1px solid var(--gold); opacity:.5; z-index:0; pointer-events:none;
}
.about-stats {
  display:grid; grid-template-columns:1fr 1fr;
  gap:24px; margin-top:48px;
}
.stat-item   { border-left:2px solid var(--gold); padding-left:16px; }
.stat-num    {
  font-family:'Playfair Display',serif; font-size:36px;
  font-weight:400; color:var(--gold-deep); line-height:1;
}
.stat-label  {
  font-size:11px; letter-spacing:.15em;
  color:rgba(61,46,16,.55); text-transform:uppercase; margin-top:4px;
}

/* ─── FOOTER ──────────────────────────────────────────────── */
footer {
  background:var(--gold-pale);
  border-top:1px solid var(--border);
  padding:64px 48px 0;
}
@media(max-width:768px) { footer { padding:48px 24px 0; } }
.footer-grid {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px; padding-bottom:56px;
}
@media(max-width:900px) { .footer-grid { grid-template-columns:1fr 1fr; gap:36px; } }
@media(max-width:500px) { .footer-grid { grid-template-columns:1fr; } }
.footer-logo {
  font-family:'Playfair Display',serif; font-size:22px; color:var(--text);
  letter-spacing:.06em; margin-bottom:16px;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
}
.footer-logo span { color:var(--gold); }
.footer-logo .logo-mark { width:34px; height:34px; }
.footer-brand p {
  font-size:14px; color:rgba(61,46,16,.6);
  line-height:1.8; max-width:280px;
}
.footer-social {
  display:flex; gap:12px; margin-top:20px;
}
.footer-social a {
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-deep); transition:background .2s,color .2s,border-color .2s;
}
.footer-social a:hover {
  background:var(--gold); color:#fff; border-color:var(--gold);
}
.footer-col h4 {
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:20px;
}
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:10px; }
.footer-col a {
  font-size:13.5px; color:rgba(61,46,16,.65);
  text-decoration:none; transition:color .2s;
}
.footer-col a:hover { color:var(--gold-deep); }
.footer-bottom-wrap { max-width:1200px; margin:0 auto; }
.footer-gold-line {
  width:100%; height:2px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
  opacity:.4;
}
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px; padding:28px 0;
}
.footer-bottom p { font-size:12px; color:rgba(61,46,16,.45); letter-spacing:.05em; }
.footer-bottom strong { color:rgba(61,46,16,.7); }

/* ─── REVEAL ANIMATIONS ───────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(40px);
  transition:opacity .8s ease,transform .8s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.1s; }
.reveal-d2 { transition-delay:.2s; }
.reveal-d3 { transition-delay:.3s; }
.reveal-d4 { transition-delay:.4s; }

/* ── NAV FIXES ────────────────────────────────────────── */
.nav-right { position:relative; z-index:210; pointer-events:auto; }
.nav-cart  { position:relative; z-index:210; pointer-events:auto !important; cursor:pointer; }
.mobile-overlay            { pointer-events:none !important; }
.mobile-overlay.open       { pointer-events:auto !important; }

/* ── STATIC PAGE HERO (About / Contact / Terms / Refund / Privacy) ── */
.page-hero {
  padding-top: calc(var(--nav-h) + 56px);
  padding-bottom: 40px;
  background: var(--gold-pale);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.page-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 400; color: var(--text);
}
.page-hero h1 em { font-style: italic; color: var(--gold-deep); }
.page-hero p {
  font-size: 13.5px; color: rgba(61,46,16,.55);
  margin-top: 10px; max-width: 560px;
  margin-left: auto; margin-right: auto;
}

/* ── STATIC CONTENT (Terms / Refund / Privacy — long-form prose) ── */
.static-content {
  max-width: 780px; margin: 0 auto;
  padding: 64px 48px 100px;
}
@media(max-width:768px) { .static-content { padding: 48px 24px 72px; } }
.static-meta {
  font-size: 12px; color: rgba(61,46,16,.45);
  margin-bottom: 36px; letter-spacing: .05em;
}
.static-content h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(19px, 2.5vw, 24px); font-weight: 400;
  color: var(--text); margin: 40px 0 14px;
}
.static-content h2:first-child { margin-top: 0; }
.static-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 600;
  color: var(--gold-deep); margin: 22px 0 8px;
}
.static-content p {
  font-size: 14.5px; color: rgba(61,46,16,.72);
  line-height: 1.9; margin-bottom: 14px;
}
.static-content ul, .static-content ol { margin: 0 0 16px 22px; }
.static-content li {
  font-size: 14.5px; color: rgba(61,46,16,.72);
  line-height: 1.85; margin-bottom: 8px;
}
.static-content a { color: var(--gold-deep); }
.static-content strong { color: var(--text); }

/* ── CONTACT PAGE ─────────────────────────────────────────── */
.contact-layout {
  max-width: 1100px; margin: 0 auto;
  padding: 64px 48px 100px;
  display: grid; grid-template-columns: 380px 1fr; gap: 56px;
  align-items: start;
}
@media(max-width:900px) { .contact-layout { grid-template-columns: 1fr; padding: 48px 24px 72px; gap: 40px; } }
.contact-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 28px; margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(61,46,16,.05);
}
.contact-card h3 {
  font-family: 'Playfair Display', serif; font-size: 16px;
  font-weight: 400; color: var(--text); margin-bottom: 6px;
}
.contact-card p { font-size: 13px; color: rgba(61,46,16,.55); line-height: 1.7; margin-bottom: 14px; }
.contact-channel {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid rgba(61,46,16,.08);
}
.contact-channel:last-child { border-bottom: none; }
.contact-channel-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold-pale); color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-channel-label {
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(61,46,16,.45); margin-bottom: 2px;
}
.contact-channel-value { font-size: 14px; color: var(--text); }
.contact-channel-value a { color: var(--gold-deep); text-decoration: none; }
.contact-channel-value a:hover { text-decoration: underline; }
.btn-whatsapp {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; background: #25D366; color: #fff;
  padding: 15px; font-family: 'Raleway', sans-serif;
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 700; text-decoration: none;
  transition: background .2s, transform .2s; border-radius: 3px;
}
.btn-whatsapp:hover { background: #1ebc59; transform: translateY(-1px); }

.contact-form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 32px;
  box-shadow: 0 2px 12px rgba(61,46,16,.05);
}
.contact-form-card h2 {
  font-family: 'Playfair Display', serif; font-size: 22px;
  font-weight: 400; color: var(--text); margin-bottom: 6px;
}
.contact-form-card > p { font-size: 13px; color: rgba(61,46,16,.55); margin-bottom: 24px; }