/* Essty Garment — Global Design System
 * Unified dark-gold token set. Loaded AFTER each page's inline <style>,
 * so these :root values override per-page variable declarations and
 * harmonize the two legacy themes (dark marketing pages + light content pages)
 * into one consistent brand language.
 */

:root{
  /* surfaces — unified dark base (covers both --primary and --bg legacy names) */
  --primary:#0a0a14;
  --surface:#12121f;
  --bg:#0a0a14;
  --card:#1a1a2e;
  --card-hover:#22223a;

  /* brand accent — single gold language (was #d4a574 on dark, #b45309 on light) */
  --accent:#d4a574;
  --accent2:#c8956a;
  --accent-glow:rgba(212,165,116,0.25);
  --accent-light:rgba(212,165,116,0.14);

  /* text */
  --text:#e8e8f0;
  --text-light:#9898b0;
  --text-muted:#6a6a80;

  /* lines */
  --border:#2a2a3e;
  --border-light:#1f1f35;

  /* whatsapp / status */
  --green:#25D366;
  --green-dark:#1ebd5a;
  --green-bg:rgba(37,211,102,0.12);
  --red:#e94560;

  /* gradients & shape */
  --gold-grad:linear-gradient(135deg,#d4a574 0%,#c8956a 50%,#b8864a 100%);
  --radius:14px;
  --radius-sm:8px;
  --transition:0.3s cubic-bezier(0.4,0,0.2,1);
}

/* base typography + surface — applied site-wide for a consistent feel */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--primary);
  color:var(--text);
  line-height:1.7;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  color:var(--text);
  line-height:1.2;
  letter-spacing:-0.3px;
}

/* shared primary button — one brand action style everywhere */
.btn-primary,.nav-cta,.cta-wa{
  background:var(--gold-grad);
  color:#fff!important;
  font-weight:700;
}
.btn-primary:hover,.nav-cta:hover{filter:brightness(1.08);transform:translateY(-2px)}

/* focus visibility for keyboard users (a11y) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ── Product image standard: every product page shows the hero image at 2:3 ── */
.product-hero .gallery-main{
  aspect-ratio:2/3;
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
}
.product-hero .gallery-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.product-hero .gallery-thumbs{
  margin-top:12px;
  display:flex;
  gap:8px;
}
.product-hero .gallery-thumbs .gallery-thumb{
  flex-shrink:0;
  width:64px;
  height:64px;
  background:var(--card);
  border-radius:var(--radius-sm);
  overflow:hidden;
  border:2px solid transparent;
}
.product-hero .gallery-thumbs .gallery-thumb.active{
  border-color:var(--accent);
}
.product-hero .gallery-thumbs .gallery-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ── Product page dark-theme compatibility ──
   Product pages were originally designed for a light theme and still contain
   hardcoded #fff / #fafaf9 backgrounds in their inline <style>. site.css
   overrides the root palette to dark-gold, so these rules remap the legacy
   light surfaces to dark tokens and ensure text contrast is readable.
   Scope: body.product-page (added to all dist/products/*.html).
*/
body.product-page{
  background:var(--bg);
  color:var(--text);
}

/* nav: force dark sticky bar on older pages that still ship light nav */
body.product-page .nav{
  background:rgba(10,10,20,0.92)!important;
  border-color:var(--border)!important;
}
body.product-page .nav-logo,
body.product-page .nav-links a:hover{
  color:var(--text)!important;
}
body.product-page .nav-links a{
  color:var(--text-light)!important;
}

/* breadcrumb */
body.product-page .breadcrumb a,
body.product-page .breadcrumb span{
  color:var(--text-light)!important;
}
body.product-page .breadcrumb a:hover{
  color:var(--accent)!important;
}

/* hardcoded light section backgrounds -> dark card */
body.product-page .content-section,
body.product-page .content-section:nth-child(even),
body.product-page .content-section[style*="background:#fff"],
body.product-page .size-guide,
body.product-page .price-tiers,
body.product-page .price-table,
body.product-page .price-table th,
body.product-page .price-table tr,
body.product-page .size-table,
body.product-page .specs-table,
body.product-page .specs-table tr:nth-child(odd),
body.product-page .faq-q:hover,
body.product-page .gallery-thumb,
body.product-page .inquiry-modal,
body.product-page .inquiry-close:hover,
body.product-page .inquiry-product,
body.product-page .inquiry-field input,
body.product-page .inquiry-field textarea{
  background:var(--card)!important;
}

/* accent highlight rows */
body.product-page .price-table .tier-highlight{
  background:var(--accent-light)!important;
}

/* pricing table cells */
body.product-page .price-table td,
body.product-page .price-table th,
body.product-page .specs-table td{
  border-color:var(--border)!important;
}
body.product-page .price-table .tier-highlight td:last-child{
  color:var(--accent)!important;
}

/* text contrast: headings / primary copy */
body.product-page .section-title,
body.product-page .product-info h1,
body.product-page .option-card h4,
body.product-page .process-step h4,
body.product-page .related-body h4,
body.product-page .faq-q,
body.product-page .price-table td,
body.product-page .specs-table td,
body.product-page .inquiry-header h3,
body.product-page .inquiry-product strong{
  color:var(--text)!important;
}

/* text contrast: body / muted copy */
body.product-page .section-text,
body.product-page .product-subtitle,
body.product-page .option-card p,
body.product-page .process-step p,
body.product-page .related-body p,
body.product-page .faq-a,
body.product-page .specs-table td:first-child,
body.product-page .price-table th,
body.product-page .inquiry-product,
body.product-page .inquiry-field label,
body.product-page .inquiry-note{
  color:var(--text-light)!important;
}

/* inquiry form inputs */
body.product-page .inquiry-field input,
body.product-page .inquiry-field textarea{
  border-color:var(--border)!important;
  color:var(--text)!important;
}
body.product-page .inquiry-field input::placeholder,
body.product-page .inquiry-field textarea::placeholder{
  color:var(--text-muted)!important;
}
body.product-page .inquiry-close{
  color:var(--text-light)!important;
}

/* email inquiry button */
body.product-page .cta-email{
  background:var(--card)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
body.product-page .cta-email:hover{
  border-color:var(--accent)!important;
  color:var(--accent)!important;
}

/* related cards */
body.product-page .related-card:hover{
  box-shadow:0 8px 30px rgba(0,0,0,0.25)!important;
}

/* footer is already dark; ensure links readable */
body.product-page .footer a{
  color:#a8a29e!important;
}
body.product-page .footer a:hover{
  color:#fff!important;
}

/* homepage / product-grid cards: crop images to fill the frame */
.card-visual img.product-img{
  object-fit:cover!important;
  object-position:center top;
}