/* ═══════════════════════════════════════════════
   GILDED RADIANCE — Shared Design System
   Source of truth: index.php color/theme
   Applies to ALL pages via header includes
   ═══════════════════════════════════════════════ */

/* ── CSS Variables (index.php palette) ── */
:root {
  --hero-bg:        #f3efe3;   /* warm cream hero/page-header background */
  --surface:        #fcf9f8;   /* global body background */
  --surface-low:    #f6f3f2;   /* card / sidebar tints */
  --surface-mid:    #f0eded;   /* section alternates */

  /* Text */
  --heading:        #1a1a1a;   /* h1–h3 → CHARCOAL (NOT gold) */
  --body-text:      #1c1b1b;   /* body copy */
  --muted:          #4d4635;   /* on-surface-variant */

  /* Brand */
  --primary:        #735c00;   /* gold-brown — links, icon accents */
  --gold:           #d4af37;   /* gold — CTA button bg, input focus, dividers */
  --secondary:      #675d49;   /* champagne — divider lines, hover underlines */
  --outline:        #7f7663;   /* border / input bottom border */
  --outline-var:    #d0c5af;   /* lighter border */

  /* Status */
  --error:          #ba1a1a;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--body-text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

/* ──────────────────────────────────────────────
   PAGE HEADER BANNER — matches index hero style
   Used on inner pages (cart, orders, profile etc.)
   ────────────────────────────────────────────── */
.page-header {
  background: var(--hero-bg);
  padding: 80px 0 64px;
  text-align: center;
}
.page-header h1 {
  color: var(--heading) !important;
}
.page-header .divider-line {
  width: 48px;
  height: 1px;
  background: var(--secondary);
  margin: 20px auto 0;
}

/* ──────────────────────────────────────────────
   HEADINGS — Playfair Display (index.php style)
   ────────────────────────────────────────────── */

h1, .h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(36px, 6vw, 64px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--heading) !important;  /* #1a1a1a charcoal — like index h1 */
}

h2, .h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(24px, 4vw, 48px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0em !important;
  color: var(--heading) !important;
}

h3, .h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(18px, 3vw, 32px) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
  color: var(--heading) !important;
}

/* h4 → label-caps (Hanken Grotesk) */
h4, .h4 {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--heading) !important;
}

h5, h6 {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

/* ──────────────────────────────────────────────
   BODY TEXT — Hanken Grotesk
   ────────────────────────────────────────────── */

p {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--body-text);
}

p.lead, .body-lg {
  font-size: 18px;
  line-height: 1.6;
}

/* ──────────────────────────────────────────────
   LABELS — Label-Caps (Hanken Grotesk 600 CAPS)
   ────────────────────────────────────────────── */

label, .font-label, .label-caps {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
}

/* ──────────────────────────────────────────────
   BUTTONS — index.php style
   Primary = gold bg (#d4af37) + dark text
   Hover   = darker gold (#735c00) + white text
   ────────────────────────────────────────────── */

button,
input[type="submit"],
input[type="button"] {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 0 !important;
  cursor: pointer;
}

/* ── CTA Button (matches index "Discover the Collection") ── */
.cta-btn,
.btn-cta {
  display: inline-block;
  background: var(--gold);        /* #d4af37 */
  color: #1a1208;
  padding: 16px 40px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.cta-btn:hover, .btn-cta:hover {
  background: var(--primary);     /* #735c00 */
  color: #ffffff;
}

/* ──────────────────────────────────────────────
   INPUTS — bottom border only (index style)
   ────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--outline) !important;
  background: transparent !important;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 16px;
  color: var(--body-text);
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease;
  width: 100%;
  padding-left: 0 !important;
}

input:focus,
select:focus,
textarea:focus {
  border-bottom-color: var(--gold) !important;
  box-shadow: none !important;
}

input::placeholder, textarea::placeholder {
  color: rgba(77, 70, 53, 0.45);
  font-family: 'Hanken Grotesk', sans-serif;
}

/* ──────────────────────────────────────────────
   CARDS — sharp corners, gold border @ 20%
   ────────────────────────────────────────────── */

.card, .product-card {
  border-radius: 0 !important;
  border: 1px solid rgba(212, 175, 55, 0.2);
  background: #ffffff;
  box-shadow: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.card:hover, .product-card:hover {
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 8px 40px rgba(74, 58, 26, 0.05);
}

/* ──────────────────────────────────────────────
   DIVIDERS (thin secondary lines, like index.php)
   ────────────────────────────────────────────── */

hr {
  border: none;
  border-bottom: 1px solid var(--outline-var);
}

.divider {
  width: 48px;
  height: 1px;
  background: var(--secondary);
  margin: 16px auto;
}

.gold-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.5), transparent);
  border: none;
}

/* ──────────────────────────────────────────────
   SECTION BACKGROUNDS — alternating like index
   ────────────────────────────────────────────── */

.bg-cream   { background: var(--hero-bg); }
.bg-surface { background: var(--surface); }
.bg-surface-low { background: var(--surface-low); }
.bg-surface-mid { background: var(--surface-mid); }

/* ──────────────────────────────────────────────
   SECTION RHYTHM — 120px gaps
   ────────────────────────────────────────────── */

.section-gap    { margin-bottom: 120px; }
.section-gap-sm { margin-bottom: 80px; }
.section-gap-xs { margin-bottom: 40px; }

/* ──────────────────────────────────────────────
   NO ROUNDED CORNERS anywhere (sharp = luxury)
   ────────────────────────────────────────────── */

[class*="rounded"] { border-radius: 0 !important; }

/* ──────────────────────────────────────────────
   FILTER / CHIP — gold underline when active
   ────────────────────────────────────────────── */

.chip-active {
  border-bottom: 1.5px solid var(--gold) !important;
  color: var(--primary) !important;
  background: transparent !important;
}

/* ──────────────────────────────────────────────
   UTILITY
   ────────────────────────────────────────────── */

.jewel-glow {
  box-shadow: 0 10px 30px rgba(212,175,55,0.08);
}

.hover-gold:hover {
  border-color: rgba(212,175,55,0.6) !important;
  box-shadow: 0 10px 30px rgba(74,58,26,0.07);
}

.text-display {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--heading);
}

.text-headline {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--heading);
}

/* ──────────────────────────────────────────────
   NAVIGATION
   ────────────────────────────────────────────── */

.nav-active::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--primary);
  border-radius: 9999px;
}

/* Cart badge */
.cart-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--primary); color: #fff;
  font-size: 10px; width: 16px; height: 16px;
  border-radius: 9999px !important;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Hanken Grotesk'; font-weight: 600;
}

/* ──────────────────────────────────────────────
   LINKS — gold on hover, no underline default
   ────────────────────────────────────────────── */

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* ──────────────────────────────────────────────
   PAGE TITLE SECTION — consistent across all pages
   Wrap your h1 + divider in .page-title-section
   ────────────────────────────────────────────── */

.page-title-section {
  background: var(--hero-bg);
  padding: 80px 24px 56px;
  text-align: center;
}

.page-title-section h1 {
  color: var(--heading) !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em !important;
}

.page-title-section .title-divider {
  width: 48px;
  height: 1px;
  background: var(--secondary);
  margin: 16px auto 0;
}