/* ================================================================
   Casablanca Brand — v3 "EDITORIAL NOIR"
   Radical dark, high-fashion editorial redesign. Loaded last.
   Re-themes via CSS-variable remap + bold structural restyle.
   All markup/functionality preserved (redirect, nav, SEO, schema).
   ================================================================ */

/* ---------- 1. DARK EDITORIAL PALETTE (token remap) ---------- */
:root{
  --ivory:#0e0c0a;         /* page canvas */
  --ivory-2:#15100b;
  --cream:#1a1510;         /* elevated cards / panels */
  --ink:#f4ebda;           /* primary text */
  --muted:#a99d8b;
  --line:#2c261d;
  --line-strong:#3d342700; /* set below with alpha-safe value */
  --line-strong:#3d3427;
  --deep:#0b201c;          /* teal-black bands: topline, footer, hero, marquee */
  --teal:#2f8272;
  --teal-2:#3a9a86;
  --terra:#e0703c;
  --terra-2:#f28d5a;
  --sun:#ecb84f;
  --shadow:0 30px 70px -28px rgba(0,0,0,.85);
  --shadow-sm:0 14px 34px -16px rgba(0,0,0,.7);
  --ring:0 0 0 3px rgba(236,184,79,.5);
}

html,body{background:var(--ivory);color:var(--ink)}
::selection{background:var(--terra);color:#0e0c0a}
body{ -webkit-font-smoothing:antialiased; }

/* ---------- 2. Fix hardcoded light surfaces for dark ---------- */
.site-head{background:rgba(11,13,12,.82)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-head.is-stuck{background:rgba(8,10,9,.95)!important;box-shadow:0 10px 40px -20px rgba(0,0,0,.8)}
.brandmark,.brand-text,.mainnav a,.nav-braid a,.sub-toggle,.top-email,.note{color:var(--ink)}
.brand-glyph{background:var(--sun);color:#0e0c0a}
.searchbox input,.qty,.size-grid label,.btn.tiny,.size-calc input,.size-calc select,
.estimator select,.estimator input,.contact-form-wrap input,.contact-form-wrap select,
.contact-form-wrap textarea,.newsletter input,.news-email,#news-email{
  background:var(--cream)!important;color:var(--ink)!important;border-color:var(--line-strong)!important}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
.has-sub .sub,.suggestions,.drawer{background:var(--cream);border-color:var(--line)}
.review,.reviews__summary{background:var(--cream);border-color:var(--line)}
.chip{background:var(--cream);color:var(--ink);border-color:var(--line-strong)}
.chip[aria-pressed="true"]{background:var(--sun);color:#0e0c0a;border-color:var(--sun)}
.card,.card.product,.story-block .copy,.seo-body,.pill,.accordion .item,.acc-panel,
.assurance-card,.tech-specs,.measurements,.buy-box,.buybox,.info-columns .fact,.table-wrap,
.nice-table,.v2-table-wrap,.size-calc{background:var(--cream)}
.pay-logos img{background:#f4ebda;border-radius:6px;padding:3px}
.burger{background:transparent!important;border:1px solid var(--line)}
.burger span{background:var(--ink)}
.cta-banner .btn.primary,.utility-row .btn.primary{background:var(--terra)!important;color:#0e0c0a!important}
.suggestions a:hover,.has-sub .sub a:hover,.drawer-nav a:hover{background:rgba(236,184,79,.12);color:var(--sun)}
.to-top{background:var(--terra);color:#0e0c0a}

/* ---------- 3. DRAMATIC EDITORIAL TYPE ---------- */
.hero-copy h1,.hero h1,.terra-text{font-size:clamp(3rem,9.5vw,8rem)!important;line-height:.84!important;letter-spacing:-.025em;text-shadow:0 4px 40px rgba(0,0,0,.5)}
.cat-hero h1{font-size:clamp(2.4rem,7vw,5.2rem)!important;line-height:.88!important;letter-spacing:-.02em}
.section-head h2,.story-block h2,.v2-sec>h2,.faq-zone>h2,.reviews h2{
  font-size:clamp(1.9rem,4.4vw,3.4rem)!important;line-height:1!important;letter-spacing:-.015em;color:var(--ink)}
.product-title{font-size:clamp(1.9rem,4vw,3rem)!important;line-height:1.02!important}
.hero .kicker,.hero-copy .kicker,.v2-eyebrow,.cat-label,.section-head .eyebrow{
  color:var(--sun)!important;letter-spacing:.4em!important;font-size:.72rem!important}
.seo-body h2,.story-block .seo-pad h2{color:var(--ink);font-size:clamp(1.4rem,2.6vw,2rem)!important}

/* ---------- 4. HERO — full, cinematic ---------- */
.hero{min-height:88vh;display:flex;align-items:flex-end;border-bottom:1px solid var(--line)}
.hero-img{min-height:88vh;filter:saturate(.92) contrast(1.04) brightness(.82)}
.hero-overlay{background:linear-gradient(180deg,rgba(10,12,11,.15) 0%,rgba(10,12,11,.4) 45%,rgba(10,12,11,.9) 100%)!important}
.hero-copy{padding-bottom:clamp(40px,7vw,92px)}
.hero .cta-row{gap:1rem;margin-top:2rem}

/* ---------- 5. BUTTONS — bold ---------- */
.btn{letter-spacing:.02em}
.btn.primary,.btn.rh-shop,.hero .btn.primary,.cat-hero .btn.primary{
  background:var(--terra);border:1px solid var(--terra);color:#0e0c0a;font-weight:800;
  padding:.95rem 1.8rem;border-radius:999px;box-shadow:0 12px 34px -14px rgba(224,112,60,.65)}
.btn.primary:hover,.btn.rh-shop:hover{background:var(--sun);border-color:var(--sun);transform:translateY(-1px)}
.btn.ghost,.btn.ghost-dark,.cat-hero .btn.ghost{border:1px solid rgba(244,235,218,.55);color:var(--ink);background:transparent;border-radius:999px;padding:.95rem 1.6rem}
.btn.ghost:hover{border-color:var(--sun);color:var(--sun)}

/* ---------- 6. MARQUEE — gold on teal-black ---------- */
.kw-marquee{background:var(--deep);border-color:rgba(236,184,79,.18)}
.kw-marquee__track span{color:var(--sun);opacity:.95;font-weight:600}
.kw-marquee__track span::after{color:rgba(244,235,218,.35)}

/* ---------- 7. PRODUCT CARDS — editorial dark ---------- */
.grid{gap:clamp(14px,2vw,28px)}
.card,.card.product{border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s}
.card.product:hover{transform:translateY(-6px);border-color:rgba(236,184,79,.4)}
.card .info h3,.card h3{font-size:1.05rem;letter-spacing:.01em}
.card .price,.price .val,.price{color:var(--sun)}
.flag{background:var(--sun);color:#0e0c0a;font-weight:700}
.flag.alt{background:var(--terra);color:#0e0c0a}

/* ---------- 8. SECTION rhythm + gold rules ---------- */
.section-head,.v2-sec{padding-top:clamp(30px,5vw,64px)}
.section-head h2::after,.v2-sec>h2::after{background:var(--sun)}
.story-block .copy,.seo-body{border:1px solid var(--line);box-shadow:none}
.seo-body h3,.story-block h3{color:var(--sun)}
.nice-table thead th,.v2-table-wrap thead th{background:var(--deep);color:var(--sun)}
.nice-table tbody tr:nth-child(odd),.v2-table-wrap tbody tr:nth-child(even){background:rgba(244,235,218,.03)}

/* ---------- 9. PDP polish ---------- */
.stock,.authen{background:rgba(47,130,114,.16);border-color:rgba(47,130,114,.4);color:#7fd3bf}
.main-shot,.pdp-stage,.gallery figure{background:var(--ivory-2);border:1px solid var(--line)}
.thumb{background:var(--cream);border-color:var(--line)}
.reviews__score{color:var(--sun)}
.rating-inline .stars,.review .stars{color:var(--sun)}

/* ---------- 10. Size calculator + lookbook on dark ---------- */
.size-calc{background:linear-gradient(160deg,var(--cream),var(--ivory-2));border:1px solid var(--line)}
.size-calc__result{background:var(--deep)}
.lookbook__grid figure{background:var(--ivory-2)}
.lookbook__handle{color:var(--ink)}

/* ---------- 11. FOOTER — dramatic ---------- */
.footwrap{background:var(--deep);border-top:1px solid rgba(236,184,79,.16)}
.foot-col h3{color:var(--sun)}
.footer-grid a,.foot-links a{color:rgba(244,235,218,.82)}
.footer-grid a:hover{color:var(--sun)}

/* ---------- 12. misc editorial touches ---------- */
a{color:var(--ink)}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--sun)}
.topline{background:var(--deep);border-bottom:1px solid rgba(255,255,255,.05)}
hr,.divider{border-color:var(--line)}