/* ============================================================
   ÉLÉGANCE FEMME — theme overlay (women's fashion)
   Loaded AFTER style.css. No markup or JS changes.

   Parisian atelier: warm cream, dusty rose, Cormorant serif,
   soft rounded corners. Clothing sells on the model, so cards
   stay 4:5 portrait (unlike the furniture 4:3 landscape).

   Palette: cream #faf5f0, ink #38282e, rose #b5636f.
   ============================================================ */
:root {
  --navy: #38282e;           /* ink — footer, top bar, headings */
  --navy-2: #4a353d;
  --ink: #38282e;
  --ivory: #faf5f0;          /* warm cream */
  --paper: #fffdfb;
  --gold: #b5636f;           /* dusty rose — washes, borders, decoration */
  --gold-deep: #9c4a57;      /* deep rose — ALL text and fills on light bg (5.5:1) */
  --gold-soft: rgba(181, 99, 111, 0.12);
  --muted: #6f5f66;          /* 5.5:1 on ivory, 5.9:1 on paper */
  --line: #ecddd9;
  --max-w: 1200px;           /* atelier air: content holds 1200, bands still bleed */
  --radius: 16px;
  --shadow: 0 16px 40px rgba(56, 40, 46, 0.12);
  --font-display: "Cormorant Garamond", "Cairo", Georgia, serif;
  --font-body: "Montserrat", "Cairo", system-ui, sans-serif;
}
html[lang="ar"] {
  --font-display: "Cairo", system-ui, sans-serif;
  --font-body: "Cairo", system-ui, sans-serif;
}

body { background: var(--ivory); }

/* ---------- header / top bar ---------- */
.topbar { background: var(--navy); letter-spacing: .02em; }
header.site { background: var(--paper); border-bottom: 1px solid var(--line); }
.brand-name, .logo { font-family: var(--font-display); letter-spacing: .06em; }
.brand-name em, .logo em { color: var(--gold); font-style: italic; }

/* ---------- hero: atelier, not billboard ---------- */
.hero {
  background:
    radial-gradient(1100px 420px at 78% -8%, rgba(181, 99, 111, 0.14), transparent 60%),
    linear-gradient(180deg, #fffdfb 0%, var(--ivory) 100%);
  color: var(--ink);
  padding: 76px 20px 66px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.hero h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: .01em; font-weight: 600; }
.hero p { color: var(--muted); max-width: 48ch; margin-inline: auto; }
.cod-badge { border-color: var(--gold-deep); color: var(--gold-deep); background: var(--gold-soft); }

/* ---------- categories: circular collection rings (signature) ---------- */
#catTiles { padding-top: 54px; }
.tile-row { gap: 18px; }
.cat-tile { border-radius: var(--radius); overflow: hidden; background: var(--paper);
  border: 1px solid var(--line); box-shadow: none; transition: box-shadow .25s, transform .25s; }
.cat-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.cat-tile .tile-photo { aspect-ratio: 1 / 1; border-radius: 50%; }  /* rings */
.cat-tile .tile-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: .04em; }
.cat-tile .tile-count { background: var(--gold-deep); color: #fff; }

/* ---------- grid: portrait cards with a capped width ---------- */
.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 22px;
}
.product-grid .card { max-width: 330px; width: 100%; margin-inline: auto; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card .card-photo, .card img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.price { color: var(--ink); font-weight: 700; }
.price-old { color: var(--muted); text-decoration: line-through; }
.badge-sale, .promo-banner { background: var(--gold-deep); color: #fff; }

/* ---------- CTA system: conversion buttons act alive ----------
   .btn-gold was referenced by 10 money buttons but never defined, so the
   PDP add, sticky bars, track lookup and the checkout Commander rendered
   as naked text. It is now THE action style: deep rose (6:1 white text),
   lift + shadow on hover (never darken), press on active. */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--gold-deep); border: 1px solid var(--gold-deep); color: #fff;
  border-radius: 999px; padding: 15px 34px; min-height: 52px;
  font-size: 0.95rem; font-weight: 700; letter-spacing: .02em; cursor: pointer;
  box-shadow: 0 10px 24px rgba(156, 74, 87, 0.28);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-gold:hover { background: #a85461; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(156, 74, 87, 0.34); }
.btn-gold:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(156, 74, 87, 0.25); }
.btn-gold:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
/* momentum cue on the money buttons only — arrow flips in RTL, no i18n cost */
#placeOrderBtn::after, #pdpAdd::after, #mAdd::after,
#stickyAdd::after, #pdpStickyAdd::after, #coStickyBtn::after { content: '→'; font-size: 1.1em; line-height: 1; }
[dir="rtl"] #placeOrderBtn::after, [dir="rtl"] #pdpAdd::after,
[dir="rtl"] #mAdd::after, [dir="rtl"] #stickyAdd::after,
[dir="rtl"] #pdpStickyAdd::after, [dir="rtl"] #coStickyBtn::after { content: '←'; }
/* the Commander is the single strongest action on the site */
#placeOrderBtn { width: 100%; font-size: 1.05rem; padding: 17px 34px; min-height: 58px; }
/* sticky buy bars: thumb-first targets (48px+) */
.sticky-cart .btn-primary { min-height: 48px; padding: 12px 22px; font-size: 0.85rem; }
.pdp-sticky .btn-gold { min-height: 48px; padding: 12px 22px; }

/* ---------- buttons ---------- */
.btn-primary { background: var(--gold); border-color: var(--gold); border-radius: 999px; }
.btn-primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(156, 74, 87, 0.25); filter: none; }
.btn-outline { border-color: var(--gold-deep); color: var(--gold-deep); border-radius: 999px; }
.link-btn { color: var(--gold-deep); }

/* ---------- footer ---------- */
footer.site { background: var(--navy); color: #f3e9e4; }
footer.site a { color: #f3e9e4; }
footer.site .fine { border-top: 1px solid rgba(255,255,255,.12); }

/* ---------- size guide stays visible (dresses have sizes) ---------- */
#sizeGuideBtn { display: inline-block; }

/* ---------- bottom nav active ---------- */
.bottom-nav a.active, .bottom-nav a[aria-current="page"] { color: var(--gold-deep); }

/* ---------- gutters: premium air on phones ---------- */
.container { padding: 0 clamp(20px, 4vw, 48px); }