/*
=============================================================
  AURUMIS LIFESTYLE — GLOBAL STYLESHEET
  aurumis-global.css
=============================================================
  HOW IT WORKS
  ─────────────
  Every HTML page links ONLY this file:
    <link rel="stylesheet" href="css/aurumis-global.css"/>

  This file is organised into sections:
    1.  CSS Variables  ← change fonts/colours HERE
    2.  Reset & Base
    3.  Navigation
    4.  Mobile Nav
    5.  Cart Drawer
    6.  Auth Modal & Google Sign-In
    7.  User Menu
    8.  Footer
    9.  Buttons (shared)
   10.  Newsletter
   10b. Email Capture Popup (site-wide)
   11.  WhatsApp Float
   12.  Reveal Animation
   12b. Skeleton Loaders
   13.  Marquee
   14.  Overlays & Open-state classes
   15.  Mobile / Touch media queries
   16.  Hero (index.html)
   16b. Instagram Stories Section Spacing (index.html)
   17.  Collections Grid (index.html + collections.html)
   18.  Editorial Split (index.html)
   19.  Products Grid (index.html + collections.html)
   20.  Filter & Sort Bar (collections.html)
   21.  Quick View Modal (collections.html)
   22.  Lookbook (lookbook.html)
   23.  Product Page (product.html)
   24.  Try-On Widget (product.html)
   25.  Checkout (checkout.html)
   26.  Account (account.html)
   27.  Wishlist (wishlist.html)
   28.  About (about.html)
   29.  Contact (contact.html)
   30.  Legal (legal.html)
   31.  404 (404.html)

=============================================================
*/


/* ═══════════════════════════════════════════════════════════
   1. CSS VARIABLES
   ── Change colours, fonts and spacing HERE only ──
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Typography ── */
  --serif:      'Cormorant Garamond', serif;
  --serif1:     'Montserrat', serif;
  --sans:       'Jost', sans-serif;
  --font-serif: 'Cormorant Garamond', serif;   /* alias for product page */
  --font-sans:  'Jost', sans-serif;            /* alias for product page */

  /* ── Brand Gold ── */
  --gold:          #C9A84C;
  --gold-light:    #E4C97A;
  --gold-pale:     #F5EDCF;
  --gold-faint:    #FBF7EC;
  --gold-nav-bar:  #DBB435;

  /* ── Background Tones ── */
  --ivory:     #FAF9F6;
  --cream:     #FDFAF4;
  --blush:     #F7EDE8;
  --rose:      #F0DDD6;
  --sage:      #EDF0E6;
  --lavender:  #EDE8F5;
  --white:     #FFFFFF;

  /* ── Text ── */
  --text-dark:   #3A2F28;
  --text-mid:    #7A6B5D;
  --text-light:  #B0A090;

  /* ── Layout ── */
  --nav-height:      84px;
  --container-width: 1400px;
  --container-pad:   56px;

  /* ── Transitions ── */
  --transition-fast: all .25s ease;
  --transition-mid:  all .35s ease;
  --transition-slow: all .6s ease;
}


/* ═══════════════════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background:  var(--ivory);
  color:       var(--text-dark);
  overflow-x:  hidden;
}

img  { max-width: 100%; display: block; }
a    { color: inherit; }
ul   { list-style: none; }


/* ═══════════════════════════════════════════════════════════
   3. NAVIGATION
   ═══════════════════════════════════════════════════════════ */
nav {
  position:        fixed;
  top: 0; left: 0;
  width:           100%;
  z-index:         1000;
  background:      var(--ivory);
  backdrop-filter: blur(20px);
  box-shadow:      0 1px 30px rgba(255,215,0,.09);
  border-bottom:   1px solid rgba(219,180,53,.25);
}
.nav-inner {
  max-width:       var(--container-width);
  margin:          0 auto;
  padding:         0 var(--container-pad);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          var(--nav-height);
}
.nav-logo {
  font-family:     var(--serif);
  text-decoration: none;
  display:         flex;
  flex-direction:  column;
  line-height: 1;
  gap: 3px;
}
.nav-logo-main {
  width:          120px;
  height:         auto;
  display:        inline-block;
  vertical-align: middle;
}
.nav-logo-sub {
  font-family:    var(--sans);
  font-size:      .75rem;
  letter-spacing: .6em;
  text-transform: uppercase;
  color:          var(--gold-nav-bar);
  font-weight:    400;
}
.nav-links {
  display:     flex;
  gap:         40px;
  list-style:  none;
}
.nav-links a {
  font-family:    var(--sans);
  font-size:      .7rem;
  font-weight:    400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color:          var(--text-mid);
  text-decoration:none;
  position:       relative;
  padding-bottom: 3px;
  transition:     color .3s;
}
.nav-links a::after {
  content:    '';
  position:   absolute;
  bottom: 0; left: 0;
  width:      0;
  height:     1px;
  background: var(--gold-nav-bar);
  transition: width .35s;
}
.nav-links a:hover,
.nav-links a.active              { color: var(--gold); }
.nav-links a:hover::after,
.nav-links a.active::after       { width: 100%; }

.nav-right {
  display:     flex;
  gap:         22px;
  align-items: center;
}
.nav-right a {
  font-family:    var(--sans);
  font-size:      .7rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color:          var(--text-mid);
  text-decoration:none;
  transition:     color .3s;
}
.nav-right a:hover { color: var(--gold); }

.nav-bag {
  width:      20px;
  height:     auto;
  stroke:     var(--text-mid);
  fill:       none;
  transition: stroke .3s;
  cursor:     pointer;
}
.nav-bag:hover { stroke: var(--gold); }

.hamburger {
  display:         none;
  flex-direction:  column;
  gap:             5px;
  cursor:          pointer;
  padding:         4px;
}
.hamburger span {
  width:      24px;
  height:     1px;
  background: var(--text-dark);
  display:    block;
  transition: var(--transition-fast);
}
.cart-badge {
  display:         none;
  align-items:     center;
  justify-content: center;
  position:        absolute;
  top:  -7px;
  right:-8px;
  width:           17px;
  height:          17px;
  background:      var(--gold);
  border-radius:   50%;
  font-family:     var(--sans);
  font-size:       .55rem;
  color:           white;
  font-weight:     500;
}

/* ── Nav icon buttons (search, cart) ── */
.nav-icon-btn {
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     0;
  display:     flex;
  align-items: center;
  color:       var(--text-mid);
  transition:  color .25s;
}
.nav-icon-btn svg    { width: 19px; height: 19px; stroke: currentColor; fill: none; }
.nav-icon-btn:hover  { color: var(--gold); }
.nav-icon-btn.cart-btn { position: relative; }

/* ── Signed-in user label (shown/hidden via JS) ── */
.nav-user-label {
  display:        none;
  cursor:         pointer;
  font-family:    var(--sans);
  font-size:      .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color:          var(--text-mid);
}

/* ── Search bar (toggled from the nav search icon) ── */
#nav-search-bar {
  position:   fixed;
  top: 0; left: 0; right: 0;
  background: white;
  border-bottom: 1px solid rgba(201,168,76,.18);
  max-height: 0;
  overflow:   hidden;
  opacity:    0;
  transition: max-height .35s ease, opacity .3s ease;
  z-index:    1001;
}
#nav-search-bar.open { max-height: 110px; opacity: 1; padding: 26px 0; }
.nav-search-form {
  max-width:   640px;
  margin:      0 auto;
  display:     flex;
  align-items: center;
  gap:         14px;
  padding:     0 40px;
}
.nav-search-icon { width: 20px; height: 20px; stroke: var(--text-mid); fill: none; flex-shrink: 0; }
.nav-search-input {
  flex:        1;
  border:      none;
  border-bottom: 1px solid rgba(201,168,76,.35);
  background:  transparent;
  font-family: var(--serif);
  font-size:   1.3rem;
  font-weight: 300;
  color:       var(--text-dark);
  padding:     6px 0;
  outline:     none;
  transition:  border-color .3s;
}
.nav-search-input:focus { border-color: var(--gold); }
.nav-search-close {
  background: none;
  border:     none;
  cursor:     pointer;
  font-size:  1.2rem;
  color:      var(--text-mid);
  flex-shrink:0;
  transition: color .25s;
}
.nav-search-close:hover { color: var(--gold); }
@media (max-width: 600px) { .nav-search-form { padding: 0 22px; } }

/* ── Collections mega-menu ── */
.nav-links li.has-dropdown { position: relative; }
.nav-dropdown {
  position:   absolute;
  top:        100%;
  left:       50%;
  transform:  translateX(-50%) translateY(8px);
  background: white;
  box-shadow: 0 12px 40px rgba(58,47,40,.14);
  border:     1px solid rgba(201,168,76,.15);
  padding:    18px 0;
  min-width:  200px;
  opacity:    0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  z-index:    50;
}
.nav-links li.has-dropdown:hover .nav-dropdown,
.nav-links li.has-dropdown:focus-within .nav-dropdown {
  opacity:    1;
  visibility: visible;
  transform:  translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display:        block;
  padding:        10px 28px;
  font-family:    var(--sans);
  font-size:      .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--text-mid);
  text-decoration:none;
  transition:     color .25s, background .25s;
}
.nav-dropdown a:hover  { color: var(--gold); background: var(--ivory); }
.nav-dropdown a.viewall {
  border-top:  1px solid rgba(201,168,76,.15);
  margin-top:  8px;
  padding-top: 14px;
  color:       var(--gold);
}


/* ═══════════════════════════════════════════════════════════
   4. MOBILE NAV PANEL
   ═══════════════════════════════════════════════════════════ */
#mobile-nav {
  display:    none;
  position:   fixed;
  inset:      0;
  z-index:    1080;
  background: var(--ivory);
}
#mobile-nav.open { display: block; }

.mobile-nav-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         0 24px;
  height:          84px;
  border-bottom:   1px solid rgba(201,168,76,.14);
}
.mobile-nav-logo { width: 100px; height: auto; }
.mobile-nav-close {
  background:  none;
  border:      none;
  cursor:      pointer;
  font-size:   1.5rem;
  color:       var(--text-mid);
  min-width:   44px;
  min-height:  44px;
  display:     flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav-links { padding: 48px 32px; display: flex; flex-direction: column; gap: 0; }
.mobile-nav-links a {
  font-family:    var(--serif);
  font-size:      2.2rem;
  font-weight:    300;
  color:          var(--text-dark);
  text-decoration:none;
  padding:        14px 0;
  border-bottom:  1px solid rgba(201,168,76,.1);
}
.mobile-nav-links a:last-child { border-bottom: none; }
.mobile-nav-links a.sub {
  font-family:    var(--sans);
  font-size:      .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight:    400;
  color:          var(--text-mid);
  padding:        12px 0 12px 18px;
}


/* ═══════════════════════════════════════════════════════════
   5. CART DRAWER
   ═══════════════════════════════════════════════════════════ */
#cart-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(58,47,40,.45);
  z-index:         1100;
  backdrop-filter: blur(3px);
}
#cart-drawer {
  position:   fixed;
  top: 0;
  right:      -440px;
  width:      100%;
  max-width:  440px;
  height:     100%;
  background: var(--cream);
  z-index:    1101;
  display:    flex;
  flex-direction: column;
  box-shadow: -8px 0 60px rgba(58,47,40,.15);
  transition: right .4s cubic-bezier(.25,.46,.45,.94);
}
#cart-overlay.open  { display: block; }
#cart-drawer.open   { right: 0; }
#cart-items         { flex: 1; overflow-y: auto; padding: 0 32px; }
#cart-footer        { padding: 24px 32px; border-top: 1px solid rgba(201,168,76,.15); display: none; }

.cart-drawer-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         28px 32px;
  border-bottom:   1px solid rgba(201,168,76,.15);
}
.cart-drawer-title {
  font-family: var(--serif);
  font-size:   1.5rem;
  font-weight: 300;
  color:       var(--text-dark);
}
.cart-count-label {
  font-family:    var(--sans);
  font-size:      .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color:          var(--text-light);
  margin-top:     2px;
}
.drawer-close-btn {
  background: none;
  border:     none;
  cursor:     pointer;
  font-size:  1.4rem;
  color:      var(--text-mid);
  transition: color .3s;
}
.drawer-close-btn:hover { color: var(--gold); }
.cart-footer-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   20px;
}
.cart-footer-label {
  font-family:    var(--sans);
  font-size:      .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--text-mid);
}
.cart-subtotal { font-family: var(--serif); font-size: 1.3rem; color: var(--text-dark); }
.cart-footer-note {
  font-family: var(--sans);
  font-size:   .68rem;
  color:       var(--text-light);
  margin-bottom: 16px;
}
.btn-checkout {
  display:        block;
  width:          100%;
  padding:        15px;
  background:     var(--gold);
  color:          white;
  font-family:    var(--sans);
  font-size:      .68rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  text-decoration:none;
  text-align:     center;
  transition:     background .3s;
  border:         1px solid var(--gold);
  box-sizing:     border-box;
}
.btn-checkout:hover { background: var(--text-dark); }
.link-continue {
  display:        block;
  text-align:     center;
  margin-top:     14px;
  font-family:    var(--sans);
  font-size:      .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color:          var(--gold);
  text-decoration:none;
}


/* ═══════════════════════════════════════════════════════════
   6. AUTH MODAL & GOOGLE SIGN-IN
   ═══════════════════════════════════════════════════════════ */
#auth-modal {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(58,47,40,.55);
  z-index:         1200;
  align-items:     center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
#auth-modal.open { display: flex; }
#auth-modal > div {
  background:   var(--cream);
  width:        100%;
  max-width:    440px;
  margin:       20px;
  position:     relative;
  box-shadow:   0 24px 80px rgba(58,47,40,.2);
  max-height:   90dvh;
  overflow-y:   auto;
  -webkit-overflow-scrolling: touch;
}
/* Login/register panels — styled via .auth-view class.
   IDs stay on the elements only as JS hooks (showLogin/showRegister). */
.auth-view        { padding: 48px 44px; }
.auth-view.hidden { display: none; }

.auth-close-btn {
  position:   absolute;
  top: 20px; right: 20px;
  background: none;
  border:     none;
  cursor:     pointer;
  font-size:  1.2rem;
  color:      var(--text-light);
  z-index:    1;
  transition: color .3s;
}
.auth-close-btn:hover { color: var(--gold); }
.auth-eyebrow {
  font-family:    var(--sans);
  font-size:      .58rem;
  letter-spacing: .55em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  10px;
}
.auth-title {
  font-family: var(--serif);
  font-size:   2.2rem;
  font-weight: 300;
  color:       var(--text-dark);
  margin-bottom: 32px;
}
.auth-title em { font-style: italic; }
.auth-provider-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.auth-google-btn {
  width:      100%;
  overflow:   hidden;
  border:     1px solid rgba(201,168,76,.3);
  transition: border-color .3s;
}
.auth-provider-btn {
  display:        flex;
  align-items:    center;
  justify-content:center;
  gap:            12px;
  padding:        13px;
  border:         1px solid rgba(201,168,76,.3);
  background:     white;
  cursor:         pointer;
  font-family:    var(--sans);
  font-size:      .72rem;
  letter-spacing: .15em;
  color:          var(--text-dark);
  transition:     border-color .3s;
}
.auth-google-btn:hover,
.auth-provider-btn:hover { border-color: var(--gold); }
.auth-divider      { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.auth-divider-line { flex: 1; height: 1px; background: rgba(201,168,76,.2); }
.auth-divider-text {
  font-family:    var(--sans);
  font-size:      .62rem;
  letter-spacing: .2em;
  color:          var(--text-light);
}
.auth-input {
  width:       100%;
  padding:     13px 16px;
  border:      1px solid rgba(201,168,76,.28);
  background:  white;
  font-family: var(--sans);
  font-size:   .84rem;
  color:       var(--text-dark);
  outline:     none;
  margin-bottom: 12px;
  box-sizing:  border-box;
  border-radius:0;
  transition:  border-color .3s;
}
.auth-input:focus  { border-color: var(--gold); }
.auth-input.mb-20  { margin-bottom: 20px; }
.auth-submit-btn {
  width:          100%;
  padding:        14px;
  background:     var(--gold);
  border:         1px solid var(--gold);
  color:          white;
  font-family:    var(--sans);
  font-size:      .68rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     all .3s;
}
.auth-submit-btn:hover { background: var(--text-dark); }
.auth-switch-text {
  font-family: var(--sans);
  font-size:   .72rem;
  color:       var(--text-mid);
  text-align:  center;
  margin-top:  20px;
}
.auth-switch-text a { color: var(--gold); text-decoration: none; }

/* Google button wrapper — matches Meta button border */
#g_id_signin {
  width:      100%;
  overflow:   hidden;
  border:     1px solid rgba(201,168,76,.3);
  transition: border-color .3s;
  margin-bottom: 12px;
}
#g_id_signin:hover { border-color: var(--gold); }

/* Override Google's internal iframe styles to match Jost font */
#g_id_signin > div,
#g_id_signin iframe              { width: 100% !important; margin: 0 !important; }
#g_id_signin .nsm7Bb-HzV7m-LgbsSe {
  width:        100% !important;
  border:       none !important;
  box-shadow:   none !important;
  border-radius:0 !important;
  font-family:  var(--sans) !important;
  font-size:    .72rem !important;
  letter-spacing:.15em !important;
  color:        var(--text-dark) !important;
  padding:      13px 16px !important;
  height:       auto !important;
}
#g_id_signin .nsm7Bb-HzV7m-LgbsSe .jVeSEe {
  font-family:   var(--sans) !important;
  font-size:     .72rem !important;
  letter-spacing:.15em !important;
  color:         var(--text-dark) !important;
}


/* ═══════════════════════════════════════════════════════════
   7. USER MENU
   ═══════════════════════════════════════════════════════════ */
#user-menu {
  display:    none;
  position:   fixed;
  top:        84px;
  right:      56px;
  background: var(--cream);
  border:     1px solid rgba(201,168,76,.2);
  box-shadow: 0 12px 40px rgba(58,47,40,.12);
  min-width:  180px;
  z-index:    1050;
  padding:    8px 0;
}
.user-menu-link {
  display:        block;
  padding:        12px 22px;
  font-family:    var(--sans);
  font-size:      .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--text-mid);
  text-decoration:none;
  transition:     color .3s;
}
.user-menu-link:hover { color: var(--gold); }
.user-menu-divider { height: 1px; background: rgba(201,168,76,.12); margin: 6px 0; }
.user-menu-signout {
  display:        block;
  width:          100%;
  padding:        12px 22px;
  font-family:    var(--sans);
  font-size:      .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--text-light);
  background:     none;
  border:         none;
  cursor:         pointer;
  text-align:     left;
  transition:     color .3s;
}
.user-menu-signout:hover { color: #c0392b; }


/* ═══════════════════════════════════════════════════════════
   8. FOOTER
   ═══════════════════════════════════════════════════════════ */
footer {
  background:  var(--ivory);
  margin-top:  25px;
}
.footer-grid {
  max-width:             var(--container-width);
  margin:                0 auto;
  padding:               0 var(--container-pad) 60px;
  display:               grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap:                   48px;
}
.footer-col-brand p {
  font-family: var(--sans);
  font-size:   .82rem;
  line-height: 2;
  color:       rgba(253,250,244,.55);
  max-width:   150px;
  margin-top:  16px;
}
.ft-logo {
  font-family:    var(--serif);
  font-size:      1rem;
  font-weight:    300;
  color:          var(--gold);
  letter-spacing: .1em;
}

.ft-col-title {
  font-family:    var(--sans);
  font-size:      .58rem;
  letter-spacing: .55em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  20px;
}
.ft-links { display: flex; flex-direction: column; gap: 10px; }
.ft-links a {
  font-family:    var(--sans);
  font-size:      .78rem;
  color:          var(--gold-light);
  text-decoration:none;
  transition:     color .3s;
}
.ft-links a:hover { color: var(--gold); }
.ft-social {
  display:    flex;
  gap:        14px;
  margin-top: 20px;
}
.ft-social a {
  width:           25px;
  height:          25px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.ft-social{     display: flex;      gap: 20px;      font-size: 30px;}
.ft-social a {text-decoration: none;transition: transform 0.3s;}
.ft-social a:hover {transform: scale(1.2) }

.footer-bottom {
  max-width:   var(--container-width);
  margin:      0 auto;
  padding:     24px var(--container-pad) 0;
  border-top:  2.5px solid rgba(201,168,76,.12);
  display:     flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:   wrap;
  gap:         12px;
  padding-bottom: 32px;
}
.footer-bottom p,
.footer-bottom a {
  font-family:    var(--sans);
  font-size:      .68rem;
  color:          var(--gold-light);
  text-decoration:none;
  letter-spacing: .08em;
}
.footer-bottom a:hover { color: var(--gold); }
.footer-legal { display: flex; gap: 5px;}

/* WhatsApp float button */
.wa-float {
  position:    fixed;
  bottom:      28px;
  right:       28px;
  z-index:     900;
  width:       52px;
  height:      52px;
  background:  #25D366;
  border-radius:50%;
  display:     flex;
  align-items: center;
  justify-content: center;
  box-shadow:  0 4px 20px rgba(37,211,102,.35);
  transition:  transform .3s, box-shadow .3s;
  text-decoration: none;
}
.wa-float:hover {
  transform:  scale(1.08);
  box-shadow: 0 6px 28px rgba(37,211,102,.45);}
.wa-float svg { width: 28px; height: 28px; fill: white; }

/* ── WhatsApp float tooltip ── */
.wa-tip       {display:none;position:absolute;right:62px;top:50%;transform:translateY(-50%);background:var(--text-dark);color:white;font-family:var(--sans);font-size:.65rem;letter-spacing:.1em;white-space:nowrap;padding:6px 12px;border-radius:2px}
.wa-float:hover .wa-tip{display:block}



/* ═══════════════════════════════════════════════════════════
   9. SHARED BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn-solid {
  display:        inline-block;
  padding:        14px 48px;
  background:     var(--gold);
  color:          var(--white);
  font-family:    var(--sans);
  font-size:      .68rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  border:         1px solid var(--gold);
  cursor:         pointer;
  text-decoration:none;
  transition:     var(--transition-mid);
}
.btn-solid:hover { background: transparent; color: var(--gold); }

.btn-outline {
  display:        inline-block;
  padding:        14px 48px;
  background:     transparent;
  color:          var(--gold);
  font-family:    var(--sans);
  font-size:      .68rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  border:         1px solid var(--gold);
  cursor:         pointer;
  text-decoration:none;
  transition:     var(--transition-mid);
}
.btn-outline:hover { background: var(--gold); color: var(--white); }

/* Hero buttons */
.btn-hero-primary {
  padding:        15px 52px;
  border:         1px solid var(--gold);
  background:     var(--gold);
  color:          var(--white);
  font-family:    var(--sans);
  font-size:      .68rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     var(--transition-mid);
  text-decoration:none;
}
.btn-hero-primary:hover { background: transparent; border-color: var(--white); color: var(--white); }

.btn-hero-ghost {
  padding:        15px 52px;
  border:         1px solid rgba(255,255,255,.6);
  background:     transparent;
  color:          var(--white);
  font-family:    var(--sans);
  font-size:      .68rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     var(--transition-mid);
  text-decoration:none;
}
.btn-hero-ghost:hover { border-color: var(--gold-light); color: var(--gold-light); }


/* ═══════════════════════════════════════════════════════════
   10. NEWSLETTER
   ═══════════════════════════════════════════════════════════ */
.nl-section {
  background: var(--blush);
  padding:    80px var(--container-pad);
  text-align: center;
}
.nl-eyebrow {
  font-family:    var(--sans);
  font-size:      .58rem;
  letter-spacing: .55em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  12px;
}
.nl-title {
  font-family: var(--serif);
  font-size:   clamp(2.2rem,4vw,3.2rem);
  font-weight: 300;
  color:       var(--text-dark);
  margin-bottom: 10px;
}
.nl-sub {
  font-family: var(--sans);
  font-size:   .82rem;
  color:       var(--text-mid);
  line-height: 1.9;
  margin-bottom: 32px;
}
.nl-form {
  display:     flex;
  max-width:   480px;
  margin:      0 auto;
  border:      1px solid rgba(201,168,76,.35);
}
.nl-input {
  flex:        1;
  padding:     14px 20px;
  border:      none;
  background:  white;
  font-family: var(--sans);
  font-size:   .82rem;
  color:       var(--text-dark);
  outline:     none;
}
.nl-btn {
  padding:        14px 28px;
  background:     var(--gold);
  border:         none;
  color:          white;
  font-family:    var(--sans);
  font-size:      .65rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     background .3s;
  white-space:    nowrap;
}
.nl-btn:hover { background: var(--text-dark); }


/* ═══════════════════════════════════════════════════════════
   10b. EMAIL CAPTURE POPUP (site-wide)
   Small modal used in place of an inline newsletter section.
   Triggered a few seconds after page load; remembers dismissal
   in localStorage (UI-state only — no personal data collected).
   ═══════════════════════════════════════════════════════════ */
#promo-popup-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(58,47,40,.55);
  z-index:         1250;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  backdrop-filter: blur(4px);
}
#promo-popup-overlay.open { display: flex; }
.promo-popup {
  background:  var(--cream);
  width:       100%;
  max-width:   380px;
  position:    relative;
  box-shadow:  0 24px 80px rgba(58,47,40,.22);
  animation:   promoPopIn .4s cubic-bezier(.25,.46,.45,.94);
  overflow:    hidden;
}
@keyframes promoPopIn { from{opacity:0;transform:translateY(18px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
.promo-popup-img {
  width:      100%;
  height:     150px;
  object-fit: cover;
  display:    block;
}
.promo-popup-close {
  position:   absolute;
  top: 14px; right: 14px;
  width:      30px;
  height:     30px;
  background: rgba(253,250,244,.9);
  border:     none;
  cursor:     pointer;
  display:    flex;
  align-items:center;
  justify-content:center;
  font-size:  1rem;
  color:      var(--text-mid);
  transition: all .3s;
  z-index:    2;
}
.promo-popup-close:hover { background: var(--white); color: var(--text-dark); }
.promo-popup-body { padding: 32px 32px 36px; text-align: center; }
.promo-popup-eyebrow {
  font-family:    var(--sans);
  font-size:      .58rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  10px;
}
.promo-popup-title {
  font-family: var(--serif);
  font-size:   1.7rem;
  font-weight: 300;
  line-height: 1.2;
  color:       var(--text-dark);
  margin-bottom: 10px;
}
.promo-popup-title em { font-style: italic; color: var(--gold); }
.promo-popup-sub {
  font-family: var(--sans);
  font-size:   .78rem;
  line-height: 1.8;
  color:       var(--text-mid);
  margin-bottom: 22px;
}
.promo-popup-form { display: flex; flex-direction: column; gap: 10px; }
.promo-popup-input {
  width:       100%;
  padding:     13px 16px;
  border:      1px solid rgba(201,168,76,.3);
  background:  white;
  font-family: var(--sans);
  font-size:   .82rem;
  color:       var(--text-dark);
  outline:     none;
  box-sizing:  border-box;
  transition:  border-color .3s;
}
.promo-popup-input:focus { border-color: var(--gold); }
.promo-popup-submit {
  width:          100%;
  padding:        14px;
  background:     var(--gold);
  border:         1px solid var(--gold);
  color:          white;
  font-family:    var(--sans);
  font-size:      .65rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     background .3s, border-color .3s;
}
.promo-popup-submit:hover { background: var(--text-dark); border-color: var(--text-dark); }
.promo-popup-dismiss {
  display:        inline-block;
  margin-top:     16px;
  font-family:    var(--sans);
  font-size:      .65rem;
  letter-spacing: .1em;
  color:          var(--text-light);
  text-decoration:underline;
  background:     none;
  border:         none;
  cursor:         pointer;
}
.promo-popup-dismiss:hover { color: var(--text-mid); }
@media (max-width: 480px) {
  .promo-popup       { max-width: 92vw; }
  .promo-popup-body  { padding: 26px 22px 30px; }
}


/* ═══════════════════════════════════════════════════════════
   11. WHATSAPP FLOAT
   ═══════════════════════════════════════════════════════════ */
/* Defined in Section 8 (footer block) above */


/* ═══════════════════════════════════════════════════════════
   12. REVEAL ANIMATION
   ═══════════════════════════════════════════════════════════ */
.reveal {
  opacity:   0;
  transform: translateY(28px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.visible {
  opacity:   1;
  transform: translateY(0);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════
   12b. SKELETON LOADERS
   Used two ways:
     1. Product grids (index.html #featured-products,
        collections.html #products-grid, product.html #related-grid)
        ship this markup directly in the static HTML, so there's
        never a blank flash between first paint and the page's own
        render script executing — the real cards simply replace it.
     2. The cart drawer (#cart-items, shared via aurumis.js) shows
        this for one paint frame when opened, before the real cart
        contents render. Cart data is local today so the real swap
        is near-instant, but this keeps the drawer's ~0.4s slide-in
        transition from ever revealing empty space, and is already
        wired for the day this becomes a real async fetch.
   ═══════════════════════════════════════════════════════════ */
@keyframes skeletonShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton-shimmer {
  background-color: rgba(201,168,76,.08);
  background-image: linear-gradient(
    90deg,
    rgba(201,168,76,.08) 25%,
    rgba(201,168,76,.20) 37%,
    rgba(201,168,76,.08) 63%
  );
  background-size: 800px 100%;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
}

/* Product card skeleton */
.skeleton-card       { display: flex; flex-direction: column; gap: 12px; }
.skeleton-card .skeleton-img  { width: 100%; aspect-ratio: 3/4; }
.skeleton-card .skeleton-line { height: 11px; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-40 { width: 40%; }

/* Cart drawer row skeleton */
.skeleton-cart-row {
  display:             grid;
  grid-template-columns: 72px 1fr auto;
  gap:                  14px;
  padding:              18px 0;
  border-bottom:        1px solid rgba(201,168,76,.1);
  align-items:          start;
}
.skeleton-cart-row .skeleton-img  { width: 72px; height: 90px; }
.skeleton-cart-row .skeleton-line { height: 11px; }


/* ═══════════════════════════════════════════════════════════
   13. MARQUEE
   ═══════════════════════════════════════════════════════════ */
.marquee-wrap {
  overflow:   hidden;
  border-top: 1px solid rgba(201,168,76,.15);
  border-bottom:1px solid rgba(201,168,76,.15);
  padding:    12px 0;
  background: var(--cream);
}
.marquee-track {
  display:   flex;
  width:     max-content;
  animation: marqueeScroll 30s linear infinite;
}
.marquee-item {
  font-family:    var(--sans);
  font-size:      .62rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color:          var(--text-light);
  padding:        0 36px;
  white-space:    nowrap;
}
.marquee-dot {
  color:     var(--gold);
  font-size: .5rem;
  margin:    0 4px;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ═══════════════════════════════════════════════════════════
   14. OVERLAY OPEN-STATE CLASSES
   (Controlled by aurumis.js)
   ═══════════════════════════════════════════════════════════ */
#cart-overlay.open  { display: block !important; }
#cart-drawer.open   { right: 0 !important; }
#auth-modal.open    { display: flex !important; }
#mobile-nav.open    { display: block !important; }


/* ═══════════════════════════════════════════════════════════
   15. MOBILE & TOUCH MEDIA QUERIES
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .nav-links             { display: none; }
  .hamburger             { display: flex; }
  .footer-grid           { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  .nav-inner             { padding: 0 22px; }
  .footer-grid           { grid-template-columns: 1fr; padding: 0 22px 40px; }
  .footer-bottom         { padding: 20px 22px 0; }
  .nl-section            { padding: 60px 22px; }
  .container             { padding: 0 22px; }
}
@media (max-width: 480px) {
  .nl-form               { flex-direction: column; }
  .nl-input              { border-right: 1px solid rgba(201,168,76,.35); border-bottom: none; }
  .nl-btn                { width: 100%; }
}
@media (pointer: coarse) {
  /* Prevent double-tap zoom, remove iOS tap flash */
  button, a, [onclick]   { touch-action: manipulation; -webkit-tap-highlight-color: rgba(201,168,76,.15); }

  /* Minimum 44×44px touch targets */
  .nav-right a,
  .nav-right button,
  .hamburger,
  .filter-btn,
  .wl-size-btn, .wl-remove, .wl-view-btn, .wl-add,
  .prod-add, .prod-wish, .prod-quick,
  .account-nav-item, .address-btn,
  .ft-social a,
  .ship-opt, .pay-opt,
  .coupon-btn, .nl-btn    { min-height: 44px; }

  .hamburger             { min-width: 44px; min-height: 44px; justify-content: center; }

  /* User menu stays on screen */
  #user-menu             { right: 16px !important; top: 80px !important; }

  /* Product overlays always visible (no :hover on touch) */
  .prod-overlay          { transform: translateY(0) !important; }
  .img-hover             { display: none !important; }

  /* Auth modal scrollable on small screens */
  #auth-modal > div      { max-height: 90dvh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* Prevent iOS auto-zoom on inputs */
  input, select, textarea { font-size: 1rem !important; }
}


/* ═══════════════════════════════════════════════════════════
   16. HERO (index.html)
   ═══════════════════════════════════════════════════════════ */
.hero {
  position:        relative;
  height:          100vh;
  min-height:      600px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
}
.hero-video-wrap {
  position: absolute;
  inset:    0;
  z-index:  0;
}
.hero-video-wrap video {
  width:       100%;
  height:      100%;
  object-fit:  cover;           /* full-bleed background — crops to fill instead of letterboxing */
  object-position: center center;
  background:  #1a1208;         /* neutral fallback color while the video loads or if it fails */
}
.hero-overlay {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: linear-gradient(170deg,
    rgba(58,47,40,.18) 0%,
    rgba(40,30,20,.45) 60%,
    rgba(58,47,40,.55) 100%);
}
.hero-content {
  position:   relative;
  z-index:    2;
  text-align: center;
  padding:    0 24px;
  max-width:  900px;
}
.hero-eyebrow {
  font-family:    var(--sans);
  font-size:      .62rem;
  letter-spacing: .65em;
  text-transform: uppercase;
  color:          var(--gold-light);
  margin-bottom:  28px;
  opacity:        0;
  animation:      fadeUp 1s ease .5s forwards;
}
.hero-title {
  font-family:  var(--serif1);
  font-size:    clamp(4.5rem, 9vw, 4.5rem);
  font-weight:  300;
  line-height:  1.0;
  color:        var(--white);
  margin-bottom:28px;
  text-shadow:  0 4px 60px rgba(0,0,0,.2);
  opacity:      0;
  animation:    fadeUp 1.1s ease .8s forwards;
}
.hero-title em   { font-style: italic; color: var(--gold-light); }
.hero-sub {
  font-family:    var(--sans);
  font-size:      .78rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.75);
  margin-bottom:  52px;
  opacity:        0;
  animation:      fadeUp 1.1s ease 1.1s forwards;
}
.hero-buttons {
  display:         flex;
  gap:             18px;
  justify-content: center;
  flex-wrap:       wrap;
  opacity:         0;
  animation:       fadeUp 1s ease 1.4s forwards;
}
.hero-scroll-cue {
  position:  absolute;
  bottom:    40px;
  left:      50%;
  transform: translateX(-50%);
  z-index:   2;
  display:   flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
}
.scroll-line {
  width:      1px;
  height:     52px;
  background: linear-gradient(to bottom, transparent, rgba(201,168,76,.5));
  animation:  scrollCue 2s ease-in-out infinite;
}
@keyframes scrollCue {
  0%, 100% { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50%       { opacity: 1; transform: scaleY(1); transform-origin: top; }
}
@media (max-width: 600px) {
  .hero { min-height: 100svh; }
  .hero-title { font-size: clamp(2.8rem, 12vw, 5rem); }
}

/* ── HERO VIDEO ON TALL/NARROW VIEWPORTS ──────────────────────────
   object-fit:cover (set above) crops a 16:9 video to fill whatever
   box it's in — on a desktop browser window that's a close enough
   match to look intentional, but on a phone or tablet held in
   portrait mode (roughly 9:19.5 or 3:4), filling that much taller,
   narrower shape means zooming in far enough that large parts of the
   frame get cropped off the sides.

   This targets that by VIEWPORT ASPECT RATIO, not operating system —
   an iPhone and an Android phone with similar screen proportions crop
   identically under object-fit:cover, so checking "iOS vs Android"
   wouldn't actually fix anything. What matters is portrait vs
   landscape shape, which aspect-ratio media queries catch correctly
   regardless of device or OS (a portrait iPad matches this rule just
   as correctly as a portrait phone does; a landscape phone correctly
   does NOT match it, and keeps the cover treatment above).

   Switching to object-fit:contain here shows the complete, uncropped
   frame instead — trading full-bleed edge-to-edge fill for making
   sure nothing important is cut off. If dark letterbox bars above/
   below the video read as too empty in practice, the more thorough
   fix is exporting a second, taller-cropped version of the video
   specifically composed for portrait screens (common on sites with
   video production resources) — CSS alone can reposition and crop an
   existing 16:9 source, but it can't add back detail the source
   doesn't contain outside its original frame.
   ────────────────────────────────────────────────────────────── */
@media (max-aspect-ratio: 4/5) {
  .hero-video-wrap video {
    width:      100%;
    height:     100%;
    object-fit: contain;
  }
}


/* ═══════════════════════════════════════════════════════════
   16b. INSTAGRAM STORIES SECTION SPACING (index.html)

   index.html's own local <style> block still defines
   `.section { padding: 76px 0 }`, applied to both the Featured
   Products section and the Instagram Stories section right below
   it — so their top/bottom padding stacks into a 152px gap between
   them (padding doesn't collapse the way margins do).

   `.insta-section` alone can't fix this: it has the same
   specificity (0,0,1,0) as `.section`, and since the page's local
   <style> block loads AFTER this stylesheet, its `.section` rule
   would win the tie and silently override this one. Qualifying the
   selector with the element type (`section.insta-section`) bumps
   the specificity to (0,0,1,1), which beats `.section` regardless
   of load order — so the padding-top override actually takes
   effect instead of being silently overridden.
   ═══════════════════════════════════════════════════════════ */
section.insta-section {
  padding-top: 32px; /* was 76px via .section — gap is now 76+32=108px instead of 152px */
}


/* ═══════════════════════════════════════════════════════════
   17. COLLECTIONS GRID (index.html + collections.html)
   ═══════════════════════════════════════════════════════════ */
.coll-grid {
  display:               grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:                   3px;
  margin-bottom:         3px;
}
.coll-card {
  position:   relative;
  overflow:   hidden;
  cursor:     pointer;
  aspect-ratio:3/4;
}
.coll-img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; }
.coll-card:hover .coll-img { transform: scale(1.04); }
.coll-info {
  position:   absolute;
  bottom:     0; left: 0; right: 0;
  padding:    28px 24px;
  background: linear-gradient(to top, rgba(40,28,18,.75) 0%, transparent 100%);
  color:      var(--white);
}
.coll-label {
  font-family:    var(--sans);
  font-size:      .58rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color:          var(--gold-light);
  margin-bottom:  6px;
}
.coll-name {
  font-family: var(--serif);
  font-size:   1.7rem;
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 16px;
}
.coll-link {
  font-family:    var(--sans);
  font-size:      .62rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.7);
  text-decoration:none;
  border-bottom:  1px solid rgba(255,255,255,.3);
  padding-bottom: 2px;
  transition:     color .3s, border-color .3s;
}
.coll-link:hover { color: var(--gold-light); border-color: var(--gold-light); }
@media (max-width: 700px) { .coll-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .coll-grid { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════
   18. EDITORIAL SPLIT (index.html)
   ═══════════════════════════════════════════════════════════ */
.ed-section {
  display:    grid;
  grid-template-columns: 1fr 1fr;
  gap:        3px;
  margin:     3px 0;
}
.ed-panel { position: relative; overflow: hidden; }
.ed-img-wrap { overflow: hidden; aspect-ratio: 4/5; }
.ed-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; display: block; }
.ed-panel:hover .ed-img-wrap img { transform: scale(1.04); }
.ed-content {
  padding:        56px 48px;
  display:        flex;
  flex-direction: column;
  justify-content:center;
}
.ed-eyebrow {
  font-family:    var(--sans);
  font-size:      .58rem;
  letter-spacing: .55em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  16px;
}
.ed-title {
  font-family: var(--serif);
  font-size:   clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  color:       var(--text-dark);
}
.gold-line   { width: 56px; height: 1px; background: var(--gold); margin: 28px 0 24px; }
.ed-body {
  font-family: var(--sans);
  font-size:   .86rem;
  line-height: 2;
  color:       var(--text-mid);
  max-width:   450px;
}
@media (max-width: 768px) { .ed-section { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════
   19. PRODUCTS GRID (index.html + collections.html)
   ═══════════════════════════════════════════════════════════ */
.section-header {
  text-align:   center;
  padding:      72px var(--container-pad) 48px;
}
.section-eyebrow {
  font-family:    var(--sans);
  font-size:      .58rem;
  letter-spacing: .55em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  12px;
}
.section-title {
  font-family: var(--serif);
  font-size:   clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 300;
  line-height: 1.1;
  color:       var(--text-dark);
}
.prod-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2px;
  padding:               32px var(--container-pad) 72px;
}
/* Top padding preserved at every breakpoint below (not reset to 0) —
   this is the same fix applied to collections.html's own local
   .prod-grid rule, needed here too since index.html's featured
   products grid (#featured-products) pulls its base styling from
   THIS shared rule instead of a local override. Without it, the
   product grid's first row renders underneath the sticky nav/filter
   bar above it instead of clearing it. */
@media (max-width: 960px) {
  .prod-grid { padding: 28px var(--container-pad) 72px; }
}
@media (max-width: 600px) {
  .prod-grid { padding: 24px var(--container-pad) 72px; }
}
.prod-card { position: relative; cursor: pointer; }
.prod-img-wrap {
  position:     relative;
  overflow:     hidden;
  aspect-ratio: 3/4;
  background:   var(--ivory);   /* matches the page background exactly, so the matte around non-3:4 photos blends in rather than standing out as its own colored block */
  margin-bottom:18px;
}

@media(max-width:600px){
  .prod-add{padding:0 8px;font-size:.52rem;letter-spacing:.15em}
}
/* object-fit:contain (not cover) — the product catalog's real photos
   aren't all a uniform native ratio, and cover was cropping the tops
   and bottoms off images taller/shorter than this box's fixed 3:4
   shape. contain shows the complete photo with the --ivory background
   above filling in as a matte around it, rather than a hard crop
   deciding what's visible. object-position is set explicitly (rather
   than relying on its default) so every photo is centered both
   horizontally and vertically within its frame, not just whichever
   edge contain happens to anchor to. Trade-off: cards won't look
   perfectly edge-to-edge on photos that don't match 3:4 exactly — the
   alternative (JS reading each photo's real dimensions to resize its
   own box) avoids that but makes grid rows uneven heights instead,
   which reads as more "broken" in a product grid than a bit of matte. */
.prod-img-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center center; transition: transform .75s ease; display: block; }
.img-primary { transition: opacity .5s ease, transform .75s ease; }
.img-hover   { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; opacity: 0; transition: opacity .5s ease; }
.prod-card:hover .img-hover   { opacity: 1; }
.prod-card:hover .img-primary { opacity: 0; }
.prod-card:hover .prod-img-wrap img { transform: scale(1.03); }

.prod-overlay {
  position:        absolute;
  inset:           0;
  background:      linear-gradient(to top, rgba(58,47,40,.72) 0%, rgba(58,47,40,.08) 62%, transparent 100%);
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
  padding:         14px;
  gap:             8px;
  transform:       translateY(100%);
  transition:      transform .4s cubic-bezier(.25,.46,.45,.94);
  z-index:         3;
}
.prod-card:hover .prod-overlay { transform: translateY(0); }

/* Fixed 44px height on every element in this row — height never
   changes on hover, so the row can't visibly "grow" on interaction.
   Used identically on index.html and collections.html. */
.prod-add {
  flex:           1;
  height:         44px;
  display:        flex;
  align-items:    center;
  justify-content:center;
  padding:        0 14px;
  background:     var(--gold);
  border:         1px solid var(--gold);
  color:          white;
  font-family:    var(--sans);
  font-size:      .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     background .3s, border-color .3s;
}
.prod-add:hover { background: var(--text-dark); border-color: var(--text-dark); }
.prod-overlay-icons { display: flex; gap: 8px; }
.prod-quick, .prod-wish {
  width:           44px;
  height:          44px;
  flex-shrink:     0;
  border:          none;
  background:      rgba(253,250,244,.92);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background .3s;
}
.prod-quick:hover { background: var(--white); }
.prod-quick svg    { width: 16px; height: 16px; stroke: var(--text-mid); fill: none; transition: stroke .3s; }
.prod-quick:hover svg { stroke: var(--gold); }
.prod-wish:hover, .prod-wish.wished, .prod-wish.active { background: var(--gold); }
.prod-wish svg     { width: 15px; height: 15px; stroke: var(--text-mid); fill: none; transition: all .3s; }
.prod-wish:hover svg, .prod-wish.wished svg, .prod-wish.active svg { stroke: white; fill: white; }

.prod-tag {
  position:       absolute;
  top:            14px;
  left:           14px;
  font-family:    var(--sans);
  font-size:      .55rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  background:     var(--gold);
  color:          white;
  padding:        4px 10px;
}
.prod-tag.sale     { background: #c0392b; }
.prod-tag.new      { background: var(--text-dark); }
.prod-tag.limited  { background: var(--text-mid); }

.prod-info      { padding: 0 4px; }
.prod-name {
  font-family: var(--serif);
  font-size:   1.1rem;
  font-weight: 300;
  color:       var(--text-dark);
  margin-bottom: 6px;
}
.prod-colour {
  font-family:    var(--sans);
  font-size:      .65rem;
  color:          var(--text-light);
  letter-spacing: .12em;
  margin-bottom:  8px;
}
.prod-price {
  font-family: var(--serif);
  font-size:   1.1rem;
  color:       var(--text-dark);
}
.prod-price-original { color: var(--text-light); text-decoration: line-through; margin-left: 8px; font-size: .9rem; }

.btn-load-more {
  display:        block;
  margin:         0 auto 80px;
  padding:        14px 56px;
  background:     transparent;
  border:         1px solid rgba(201,168,76,.4);
  color:          var(--gold);
  font-family:    var(--sans);
  font-size:      .68rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     var(--transition-mid);
}
.btn-load-more:hover { background: var(--gold); color: white; }

@media (max-width: 900px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .prod-grid { grid-template-columns: 1fr; padding: 0 16px 48px; } }


/* ═══════════════════════════════════════════════════════════
   20. FILTER & SORT BAR (collections.html)
   ═══════════════════════════════════════════════════════════ */
.filter-bar {
  display:     flex;
  gap:         4px;
  padding:     32px var(--container-pad) 0;
  flex-wrap:   wrap;
}
.filter-btn {
  padding:        10px 22px;
  background:     var(--ivory);
  border:         1px solid rgba(201,168,76,.2);
  font-family:    var(--sans);
  font-size:      .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color:          var(--text-mid);
  cursor:         pointer;
  transition:     var(--transition-fast);
}
.filter-btn:hover, .filter-btn.active {
  background: transparent;
  border-color: var(--gold);
  color: var(--White);
}
.sort-bar {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  padding:         16px var(--container-pad);
  gap:             10px;
}
.sort-bar label {
  font-family:    var(--sans);
  font-size:      .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--text-light);
}
.sort-select {
  font-family:    var(--sans);
  font-size:      .72rem;
  color:          var(--text-mid);
  border:         1px solid rgba(201,168,76,.25);
  padding:        6px 12px;
  background:     var(--cream);
  cursor:         pointer;
  outline:        none;
}


/* ═══════════════════════════════════════════════════════════
   21. QUICK VIEW MODAL (collections.html)
   ═══════════════════════════════════════════════════════════ */
.qv-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(58,47,40,.55);
  z-index:         1300;
  align-items:     center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.qv-overlay.open { display: flex; }
.qv-modal {
  background:   var(--cream);
  width:        100%;
  max-width:    860px;
  max-height:   90dvh;
  overflow-y:   auto;
  display:      grid;
  grid-template-columns: 1fr 1fr;
  position:     relative;
}
.qv-close {
  position:   absolute;
  top: 16px; right: 16px;
  z-index:    2;
  background: none;
  border:     none;
  font-size:  1.3rem;
  cursor:     pointer;
  color:      var(--text-mid);
  transition: color .3s;
}
.qv-close:hover { color: var(--text-dark); }
@media (max-width: 700px) { .qv-modal { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════
   22. LOOKBOOK (lookbook.html)
   ═══════════════════════════════════════════════════════════ */
.lb-hero {
  height:          70vh;
  min-height:      500px;
  background:      var(--text-dark);
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding-top:     var(--nav-height);
  position:        relative;
  overflow:        hidden;
}
.lb-masonry {
  columns:     3;
  gap:         3px;
  padding:     3px var(--container-pad) 72px;
}
.lb-item      { break-inside: avoid; margin-bottom: 3px; position: relative; overflow: hidden; cursor: pointer; }
.lb-item img  { width: 100%; display: block; transition: transform 1s ease; }
.lb-item:hover img { transform: scale(1.04); }
@media (max-width: 768px) { .lb-masonry { columns: 2; padding: 3px 16px 48px; } }
@media (max-width: 480px) { .lb-masonry { columns: 1; } }


/* ═══════════════════════════════════════════════════════════
   23. PRODUCT PAGE (product.html)
   ═══════════════════════════════════════════════════════════ */
.product-page {
  padding-top:  var(--nav-height);
  min-height:   100vh;
}
.product-layout {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0;
  max-width:             var(--container-width);
  margin:                0 auto;
}
.product-images { position: sticky; top: var(--nav-height); height: calc(100vh - var(--nav-height)); overflow: hidden; }
.product-images img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-detail {
  padding:        56px 64px 80px;
  display:        flex;
  flex-direction: column;
}
.prod-brand {
  font-family:    var(--sans);
  font-size:      .56rem;
  letter-spacing: .55em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  10px;
}
.prod-name-lg {
  font-family:  var(--serif);
  font-size:    clamp(2.2rem, 3.5vw, 3rem);
  font-weight:  300;
  line-height:  1.1;
  color:        var(--text-dark);
  margin-bottom:16px;
}
.prod-price-lg {
  font-family:  var(--serif);
  font-size:    1.6rem;
  color:        var(--text-dark);
  margin-bottom:28px;
}
.prod-price-original-lg { font-size: 1rem; color: var(--text-light); text-decoration: line-through; margin-left: 10px; }

.size-label {
  font-family:    var(--sans);
  font-size:      .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--text-mid);
  margin-bottom:  10px;
}
.size-grid  { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.size-btn {
  min-width:      48px;
  padding:        9px 14px;
  border:         1px solid rgba(201,168,76,.3);
  background:     transparent;
  font-family:    var(--sans);
  font-size:      .7rem;
  letter-spacing: .1em;
  color:          var(--text-mid);
  cursor:         pointer;
  transition:     var(--transition-fast);
  text-transform: uppercase;
}
.size-btn:hover, .size-btn.active {
  background:   var(--gold);
  border-color: var(--gold);
  color:        white;
}
.qty-row {
  display:     flex;
  gap:         12px;
  align-items: stretch;
  margin-bottom:0;
}
.qty-ctrl {
  display:     flex;
  align-items: center;
  border:      1px solid rgba(201,168,76,.3);
}
.qty-ctrl button {
  width:      40px;
  height:     100%;
  background: none;
  border:     none;
  font-size:  1.1rem;
  color:      var(--text-mid);
  cursor:     pointer;
  transition: color .3s;
}
.qty-ctrl button:hover { color: var(--gold); }
.qty-ctrl input {
  width:      42px;
  text-align: center;
  border:     none;
  background: transparent;
  font-family:var(--sans);
  font-size:  .85rem;
  color:      var(--text-dark);
  outline:    none;
}
.btn-add-bag {
  flex:           1;
  padding:        14px;
  background:     var(--gold);
  border:         1px solid var(--gold);
  color:          white;
  font-family:    var(--font-sans);
  font-size:      .7rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     var(--transition-mid);
}
.btn-add-bag:hover { background: var(--text-dark); border-color: var(--text-dark); }

.btn-wishlist {
  padding:         13px 18px;
  background:      transparent;
  border:          1px solid rgba(201,168,76,.3);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      var(--transition-fast);
}
.btn-wishlist:hover, .btn-wishlist.active { border-color: var(--gold); background: var(--gold-faint); }
.btn-wishlist svg    { width: 18px; height: 18px; stroke: var(--gold); fill: none; }
.btn-wishlist.active svg { fill: var(--gold); }

.btn-tryon {
  display:        flex;
  align-items:    center;
  justify-content:center;
  gap:            10px;
  width:          100%;
  padding:        14px;
  background:     transparent;
  border:         1px solid var(--gold);
  color:          var(--gold);
  font-family:    var(--font-sans);
  font-size:      .7rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     var(--transition-mid);
  margin-top:     12px;
}
.btn-tryon:hover { background: var(--gold); border-color: var(--gold); color: white; }
.btn-tryon svg   { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; stroke-width: 1.4; }

@media (max-width: 960px) {
  .product-layout { grid-template-columns: 1fr; }
  .product-images { position: static; height: 70vw; }
  .product-detail { padding: 36px 28px 60px; }
}


/* ═══════════════════════════════════════════════════════════
   24. TRY-ON WIDGET (product.html)
   ═══════════════════════════════════════════════════════════ */
.tryon-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(40,28,20,.7);
  z-index:         1400;
  display:         none;
  align-items:     center;
  justify-content: center;
  padding:         16px;
  backdrop-filter: blur(6px);
}
.tryon-overlay.open { display: flex; }
.tryon-modal {
  background:    var(--cream);
  width:         100%;
  max-width:     860px;
  max-height:    92dvh;
  overflow-y:    auto;
  -webkit-overflow-scrolling: touch;
  position:      relative;
  display:       grid;
  grid-template-columns: 1fr 1fr;
  animation:     tryonIn .38s cubic-bezier(.25,.46,.45,.94);
}
@keyframes tryonIn { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
.tryon-close {
  position:        absolute;
  top: 14px; right: 14px;
  z-index:         2;
  width:           36px;
  height:          36px;
  background:      rgba(253,250,244,.92);
  border:          none;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.1rem;
  color:           var(--text-mid);
  transition:      color .3s;
}
.tryon-close:hover { color: var(--text-dark); }
.tryon-left {
  padding:        36px 32px;
  display:        flex;
  flex-direction: column;
  border-right:   1px solid rgba(201,168,76,.1);
}
.tryon-right {
  padding:         36px 32px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      360px;
}
.photo-upload-area {
  border:          1.5px dashed rgba(201,168,76,.35);
  padding:         28px 16px;
  text-align:      center;
  cursor:          pointer;
  transition:      all .3s;
  background:      rgba(245,237,207,.2);
  flex:            1;
  min-height:      200px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  position:        relative;
  overflow:        hidden;
}
.photo-upload-area:hover,
.photo-upload-area.drag-over { border-color: var(--gold); background: rgba(245,237,207,.4); }
.photo-upload-area img.preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tryon-result-img { display: none; width: 100%; max-height: 440px; object-fit: contain; border: 1px solid rgba(201,168,76,.1); }
.tryon-result-img.show { display: block; }
.tryon-loading { display: none; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.tryon-loading.show { display: flex; }
.spin-ring {
  width:        44px;
  height:       44px;
  border:       2px solid rgba(201,168,76,.2);
  border-top-color: var(--gold);
  border-radius:50%;
  animation:    spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tryon-result-actions { display: none; flex-direction: column; gap: 10px; width: 100%; margin-top: 16px; }
.tryon-result-actions.show { display: flex; }
.tryon-error { display: none; text-align: center; padding: 20px; }
.tryon-error.show { display: block; }
.tryon-error p { font-family: var(--sans); font-size: .78rem; color: #b5341b; line-height: 1.8; }
.btn-generate {
  width:          100%;
  padding:        14px;
  background:     var(--gold);
  border:         1px solid var(--gold);
  color:          white;
  font-family:    var(--font-sans);
  font-size:      .68rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     var(--transition-mid);
  margin-top:     16px;
}
.btn-generate:hover:not(:disabled) { background: transparent; color: var(--gold); }
.btn-generate:disabled { opacity: .45; cursor: default; }
.btn-tryon-save {
  padding:        11px;
  background:     transparent;
  border:         1px solid rgba(201,168,76,.3);
  color:          var(--gold);
  font-family:    var(--sans);
  font-size:      .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     var(--transition-mid);
  text-decoration:none;
  text-align:     center;
  display:        block;
}
.btn-tryon-save:hover { background: var(--gold); color: white; border-color: var(--gold); }
.btn-tryon-retry {
  padding:        11px;
  background:     transparent;
  border:         none;
  color:          var(--text-light);
  font-family:    var(--sans);
  font-size:      .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     color .3s;
}
.btn-tryon-retry:hover { color: var(--gold); }
@media (max-width: 700px) {
  .tryon-modal { grid-template-columns: 1fr; max-width: 440px; }
  .tryon-left  { border-right: none; border-bottom: 1px solid rgba(201,168,76,.1); padding: 28px 22px; }
  .tryon-right { padding: 28px 22px; }
}


/* ═══════════════════════════════════════════════════════════
   25. CHECKOUT (checkout.html)
   ═══════════════════════════════════════════════════════════ */
.checkout-page {
  max-width:   var(--container-width);
  margin:      0 auto;
  padding:     calc(var(--nav-height) + 48px) var(--container-pad) 80px;
}
.co-layout {
  display:               grid;
  grid-template-columns: 1fr 380px;
  gap:                   56px;
  align-items:           start;
}
.steps {
  display:       flex;
  gap:           0;
  margin-bottom: 48px;
  border-bottom: 1px solid rgba(201,168,76,.2);
}
.step {
  padding:        14px 24px;
  font-family:    var(--sans);
  font-size:      .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color:          var(--text-light);
  border-bottom:  2px solid transparent;
  cursor:         default;
  transition:     color .25s, border-color .25s;
  user-select:    none;
}
.step.active { color: var(--gold); border-bottom-color: var(--gold); }
.step.done   { color: var(--text-mid); cursor: pointer; }
.step.done:hover { color: var(--gold); }

.form-section { margin-bottom: 36px; }
.form-legend {
  font-family:    var(--sans);
  font-size:      .6rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  16px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

.co-field {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-bottom:  14px;
}
.co-field label {
  font-family:    var(--sans);
  font-size:      .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--text-light);
}
.co-field input,
.co-field select,
.co-field textarea {
  padding:     12px 16px;
  border:      1px solid rgba(201,168,76,.28);
  background:  white;
  font-family: var(--sans);
  font-size:   .84rem;
  color:       var(--text-dark);
  outline:     none;
  transition:  border-color .3s;
  border-radius: 0;
}
.co-field input:focus,
.co-field select:focus,
.co-field textarea:focus { border-color: var(--gold); }

.order-summary {
  position:   sticky;
  top:        calc(var(--nav-height) + 24px);
  background: var(--cream);
  border:     1px solid rgba(201,168,76,.15);
  padding:    28px;
}
.btn-place-order {
  width:          100%;
  padding:        16px;
  background:     var(--gold);
  border:         1px solid var(--gold);
  color:          white;
  font-family:    var(--sans);
  font-size:      .7rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     var(--transition-mid);
}
.btn-place-order:hover:not(:disabled) { background: var(--text-dark); border-color: var(--text-dark); }
.btn-place-order:disabled { opacity: .5; cursor: default; }

#order-success {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(58,47,40,.6);
  z-index:    2000;
  align-items:center;
  justify-content: center;
}
#order-success.show { display: flex; }

@media (max-width: 960px) {
  .co-layout   { grid-template-columns: 1fr; }
  .order-summary { position: static; }
  .form-row    { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .checkout-page { padding: 40px 20px; }
  .steps { overflow-x: auto; white-space: nowrap; }
}


/* ═══════════════════════════════════════════════════════════
   26. ACCOUNT (account.html)
   ═══════════════════════════════════════════════════════════ */
.account-page {
  padding-top: var(--nav-height);
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
}
.locked-state {
  display:         none;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      60vh;
  text-align:      center;
  padding:         48px 24px;
}
.account-body { display: none; }

.acc-hero {
  background:   var(--blush);
  padding:      48px var(--container-pad) 36px;
  border-bottom:1px solid rgba(201,168,76,.12);
}
.acc-greeting {
  font-family: var(--serif);
  font-size:   clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 300;
  color:       var(--text-dark);
}
.acc-stats {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   2px;
  margin-top:            28px;
}
.acc-stat {
  background:   white;
  padding:      20px 16px;
  text-align:   center;
}
.acc-stat-num {
  font-family:  var(--serif);
  font-size:    2rem;
  color:        var(--gold);
  font-weight:  300;
}
.acc-stat-lbl {
  font-family:    var(--sans);
  font-size:      .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--text-light);
  margin-top:     4px;
}
.account-layout {
  display:               grid;
  grid-template-columns: 220px 1fr;
  gap:                   0;
  flex:                  1;
}
.account-nav {
  border-right: 1px solid rgba(201,168,76,.1);
  padding-top:  24px;
  background:   var(--cream);
}
.account-nav-item {
  display:        block;
  padding:        14px 28px;
  font-family:    var(--sans);
  font-size:      .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--text-mid);
  cursor:         pointer;
  transition:     var(--transition-fast);
  border-left:    3px solid transparent;
  background:     none;
  border-top:     none;
  border-right:   none;
  border-bottom:  none;
  width:          100%;
  text-align:     left;
}
.account-nav-item:hover,
.account-nav-item.active { color: var(--gold); border-left-color: var(--gold); background: rgba(201,168,76,.05); }
.account-panel { padding: 36px 48px; }

@media (max-width: 768px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-nav    { display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid rgba(201,168,76,.1); padding: 0; }
  .account-nav-item { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .account-panel  { padding: 24px 20px; }
  .acc-stats      { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .acc-stats      { grid-template-columns: repeat(2, 1fr); }
  .acc-hero       { padding: 36px 22px 24px; }
}


/* ═══════════════════════════════════════════════════════════
   27. WISHLIST (wishlist.html)
   ═══════════════════════════════════════════════════════════ */
.wishlist-page {
  padding-top: var(--nav-height);
  min-height:  100vh;
}
.wishlist-header {
  padding:      48px var(--container-pad) 36px;
  border-bottom:1px solid rgba(201,168,76,.1);
}
.wl-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   2px;
  padding:               24px var(--container-pad) 72px;
}
.wl-card { position: relative; }
.wl-img  { position: relative; overflow: hidden; aspect-ratio: 3/4; margin-bottom: 14px; }
.wl-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; display: block; }
.wl-card:hover .wl-img img { transform: scale(1.04); }
.wl-remove {
  position:        absolute;
  top: 8px; right: 8px;
  width:           44px;
  height:          44px;
  background:      rgba(253,250,244,.9);
  border:          none;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background .3s;
}
.wl-remove:hover   { background: white; }
.wl-remove svg     { width: 16px; height: 16px; stroke: var(--text-mid); fill: none; }
.wl-size-btn {
  min-width:      44px;
  height:         44px;
  padding:        0 12px;
  border:         1px solid rgba(201,168,76,.3);
  background:     transparent;
  font-family:    var(--sans);
  font-size:      .65rem;
  letter-spacing: .1em;
  color:          var(--text-mid);
  cursor:         pointer;
  transition:     var(--transition-fast);
}
.wl-size-btn:hover, .wl-size-btn.active {
  background:   var(--gold);
  border-color: var(--gold);
  color:        white;
}
.wl-add {
  display:        block;
  width:          100%;
  padding:        12px;
  background:     var(--text-dark);
  border:         none;
  color:          white;
  font-family:    var(--sans);
  font-size:      .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  cursor:         pointer;
  margin-top:     10px;
  transition:     background .3s;
}
.wl-add:hover { background: var(--gold); }

@media (max-width: 960px) { .wl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .wl-grid { grid-template-columns: repeat(2, 1fr); padding: 16px 16px 48px; } }
@media (max-width: 400px) { .wl-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 12px 48px; } }


/* ═══════════════════════════════════════════════════════════
   28. ABOUT (about.html)
   ═══════════════════════════════════════════════════════════ */
.about-page  { padding-top: var(--nav-height); }
.about-hero {
  height:          65vh;
  min-height:      460px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  background:      var(--blush);
  position:        relative;
  overflow:        hidden;
}
.timeline {
  display:        flex;
  flex-direction: column;
  gap:            0;
  max-width:      680px;
  margin:         0 auto;
  padding:        72px var(--container-pad);
}
.timeline-item {
  display:    grid;
  grid-template-columns: 80px 1fr;
  gap:        32px;
  padding:    28px 0;
  border-bottom: 1px solid rgba(201,168,76,.12);
}
.timeline-year {
  font-family: var(--serif);
  font-size:   1.3rem;
  color:       var(--gold);
  font-weight: 300;
  padding-top: 4px;
}
.values-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2px;
  padding:               0 0 72px;
}
.value-card {
  background: var(--cream);
  padding:    48px 36px;
  text-align: center;
}
@media (max-width: 768px) { .values-grid { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════
   29. CONTACT (contact.html)
   ═══════════════════════════════════════════════════════════ */
.contact-page  { padding-top: var(--nav-height); }
.contact-layout {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0;
  max-width:             var(--container-width);
  margin:                0 auto;
  padding:               72px var(--container-pad);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width:       100%;
  padding:     13px 16px;
  border:      1px solid rgba(201,168,76,.28);
  background:  white;
  font-family: var(--sans);
  font-size:   .84rem;
  color:       var(--text-dark);
  outline:     none;
  transition:  border-color .3s;
  margin-bottom:14px;
  border-radius:0;
}
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--gold); }
.contact-info-card {
  background:  var(--cream);
  border:      1px solid rgba(201,168,76,.15);
  padding:     32px;
  margin-bottom: 14px;
}
@media (max-width: 768px) { .contact-layout { grid-template-columns: 1fr; padding: 48px 22px; } }


/* ═══════════════════════════════════════════════════════════
   30. LEGAL (legal.html)
   ═══════════════════════════════════════════════════════════ */
.legal-page {
  padding-top: var(--nav-height);
  max-width:   840px;
  margin:      0 auto;
  padding-left:  var(--container-pad);
  padding-right: var(--container-pad);
  padding-bottom:80px;
}
.legal-page h1 {
  font-family: var(--serif);
  font-size:   clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 300;
  color:       var(--text-dark);
  padding:     60px 0 8px;
}
.legal-page h2 {
  font-family:    var(--serif);
  font-size:      1.5rem;
  font-weight:    300;
  color:          var(--gold);
  margin:         40px 0 12px;
  letter-spacing: .04em;
}
.legal-page p, .legal-page li {
  font-family: var(--sans);
  font-size:   .86rem;
  line-height: 2;
  color:       var(--text-mid);
  margin-bottom:12px;
}
.legal-page ul { margin: 0 0 16px 20px; }
.legal-divider { height: 1px; background: rgba(201,168,76,.15); margin: 36px 0; }


/* ═══════════════════════════════════════════════════════════
   31. 404 (404.html)
   ═══════════════════════════════════════════════════════════ */
.not-found-page {
  padding-top:     var(--nav-height);
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding-bottom:  80px;
}
.not-found-num {
  font-family:  var(--serif);
  font-size:    clamp(6rem, 18vw, 14rem);
  font-weight:  300;
  color:        var(--gold-pale);
  line-height:  1;
  letter-spacing: .08em;
}
.not-found-title {
  font-family:  var(--serif);
  font-size:    clamp(1.6rem, 3vw, 2.4rem);
  font-weight:  300;
  color:        var(--text-dark);
  margin-bottom:16px;
}
.not-found-sub {
  font-family:  var(--sans);
  font-size:    .84rem;
  color:        var(--text-mid);
  line-height:  1.9;
  max-width:    420px;
  margin:       0 auto 36px;
}