@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500&family=Montserrat:wght@400;500;600&display=swap');

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --bg:       #0a0a08;
  --card:     #111110;
  --surface:  #181714;
  --border:   #2a2019;
  --muted:    #3a3428;
  --gold:     #c9a84c;
  --gold-dim: #a8863a;
  --gold-lt:  #d4b86a;
  --cream:    #f5f0e8;
  --taupe:    #a8977e;
  --dim:      #6b6050;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  background: var(--bg);
  color: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: .4;
}

h1,h2,h3,h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  line-height: 1.1;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; }

/* ── Container ── */
.container { max-width: 80rem; margin: 0 auto; padding: 0 1.25rem; }
@media(min-width:640px){.container{padding:0 2rem}}
@media(min-width:1024px){.container{padding:0 3rem}}

/* ── Buttons ── */
.btn-gold {
  background: var(--gold); color: var(--bg);
  font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .9rem 2.5rem; border: none; cursor: pointer;
  transition: background .25s ease, transform .2s ease;
  display: inline-block;
}
.btn-gold:hover { background: var(--gold-lt); transform: translateY(-1px); color: var(--bg); }

.btn-outline {
  background: transparent; color: var(--gold);
  font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .9rem 2.5rem; border: 1px solid var(--gold); cursor: pointer;
  transition: background .25s ease, color .25s ease;
  display: inline-block;
}
.btn-outline:hover { background: var(--gold); color: var(--bg); }

/* ── Nav ── */
.nav-link {
  position: relative; font-family: 'Montserrat', sans-serif;
  font-size: .68rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--taupe); padding-bottom: 3px;
  transition: color .25s ease;
}
.nav-link::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: var(--gold);
  transition: width .35s ease;
}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link:hover,.nav-link.active{color:var(--gold)}

/* ── Input ── */
.input-elegant {
  border: 1px solid var(--border); background: var(--surface);
  font-family: 'Jost', sans-serif; font-size: .875rem; font-weight: 300;
  color: var(--cream); padding: .8rem 1rem; width: 100%; outline: none;
  transition: border-color .2s ease;
}
.input-elegant:focus { border-color: var(--gold); }
.input-elegant::placeholder { color: var(--dim); }
select.input-elegant {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a8977e' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem;
}
label.field-label {
  display: block; font-family: 'Montserrat', sans-serif;
  font-size: .6rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--dim); margin-bottom: .5rem;
}
.field-error { font-size: .75rem; color: #f87171; margin-top: .25rem; }

/* ── Product Card ── */
.product-card {
  background: var(--card); border: 1px solid var(--border);
  transition: border-color .35s ease, box-shadow .35s ease;
  display: block;
}
.product-card:hover {
  border-color: rgba(201,168,76,.35);
  box-shadow: 0 16px 48px rgba(201,168,76,.08);
}
.product-card-img {
  position: relative; overflow: hidden; aspect-ratio: 3/4; background: var(--surface);
}
.product-card-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  transition: transform .7s ease-out, filter .5s ease;
  filter: brightness(.9);
}
.product-card:hover .product-card-img img { transform: scale(1.05); filter: brightness(1); }
.product-card-add {
  position: absolute; bottom: 0; left: 0; right: 0;
  transform: translateY(100%); transition: transform .4s ease-out;
  width: 100%; padding: .875rem; font-family: 'Montserrat', sans-serif;
  font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  background: rgba(10,10,8,.9); border-top: 1px solid rgba(201,168,76,.5);
  color: var(--gold); transition: transform .4s ease-out, background .25s, color .25s;
}
.product-card:hover .product-card-add { transform: translateY(0); }
.product-card-add:hover { background: var(--gold); color: var(--bg); }
.product-card-add.added { background: #1e3d1e; color: #a8d8a8; }
.product-card-body { padding: 1rem 1rem 1.25rem; }
.product-card-cat {
  font-family: 'Montserrat', sans-serif; font-size: .55rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: .375rem;
}
.product-card-name {
  font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 300;
  color: var(--cream); line-height: 1.25; margin-bottom: .75rem;
  transition: color .3s;
}
.product-card:hover .product-card-name { color: var(--gold); }
.product-card-price {
  font-family: 'Montserrat', sans-serif; font-size: .875rem; font-weight: 500; color: var(--cream);
}
.product-card-orig {
  font-family: 'Jost', sans-serif; font-size: .75rem; color: var(--dim);
  text-decoration: line-through; margin-left: .5rem;
}
.badge-discount {
  background: var(--gold); color: var(--bg); font-family: 'Montserrat', sans-serif;
  font-size: .55rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .28rem .65rem; display: inline-block;
}
.badge-popular {
  font-family: 'Montserrat', sans-serif; font-size: .5rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201,168,76,.4);
  padding: .25rem .5rem;
}

/* ── Scroll animations ── */
.fade-up { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-in { opacity:0; transition: opacity 1s ease; }
.fade-in.visible { opacity:1; }
.slide-left { opacity:0; transform:translateX(-50px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.slide-left.visible { opacity:1; transform:translateX(0); }
.slide-right { opacity:0; transform:translateX(50px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.slide-right.visible { opacity:1; transform:translateX(0); }
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}
.delay-4{transition-delay:.32s}.delay-5{transition-delay:.40s}.delay-6{transition-delay:.48s}

/* ── Marquee ── */
@keyframes marquee-text { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.marquee-inner { animation: marquee-text 35s linear infinite; will-change:transform; display:flex; width:max-content; }

/* ── Scroll strip RTL ── */
@keyframes scroll-rtl { 0%{transform:translateX(0)} 100%{transform:translateX(-33.3333%)} }
.scroll-strip-inner { animation: scroll-rtl 28s linear infinite; will-change:transform; display:flex; width:max-content; }
.scroll-strip-inner:hover { animation-play-state:paused; }

/* ── Cart Drawer ── */
@keyframes slideInRight { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
.cart-drawer { animation: slideInRight .35s cubic-bezier(.22,1,.36,1); }
.cart-overlay { position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:998; }
#cart-drawer-panel { position:fixed;top:0;right:0;bottom:0;width:100%;max-width:24rem;background:var(--card);border-left:1px solid var(--border);z-index:999;display:flex;flex-direction:column; }

/* ── Section divider ── */
.line-gold { width:3rem;height:1px;background:linear-gradient(90deg,var(--gold),transparent);display:inline-block; }
.section-divider { width:4rem;height:1px;background:linear-gradient(90deg,var(--gold),var(--gold-dim));margin:0 auto; }

/* ── Hero ── */
.hero-overlay {
  background: linear-gradient(to bottom,rgba(10,10,8,.5) 0%,rgba(10,10,8,.3) 50%,rgba(10,10,8,.75) 100%);
}

/* ── Nav top bar ── */
#main-nav { position:fixed;top:0;left:0;right:0;z-index:50;transition:all .5s; }
#main-nav.scrolled { background:rgba(10,10,8,.98);backdrop-filter:blur(12px);border-bottom:1px solid var(--border); }
#main-nav:not(.scrolled) { background:rgba(10,10,8,.7);backdrop-filter:blur(4px); }

/* ── Mobile menu ── */
#mobile-menu { display:none; }
#mobile-menu.open { display:block; }

/* ── Trade dropdown ── */
.trade-dropdown { position:relative; }
.trade-panel {
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:.75rem; width:16rem; background:var(--card);
  border:1px solid var(--border); box-shadow:0 16px 48px rgba(0,0,0,.4); z-index:60;
}
.trade-dropdown:hover .trade-panel { display:block; }
.trade-panel-link {
  display:flex;flex-direction:column;padding:1rem 1.25rem;
  border-bottom:1px solid var(--border); transition:background .2s;
}
.trade-panel-link:last-child{border-bottom:none}
.trade-panel-link:hover{background:var(--surface)}
.trade-panel-label {
  font-family:'Montserrat',sans-serif;font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--taupe);transition:color .2s;
}
.trade-panel-link:hover .trade-panel-label{color:var(--gold)}
.trade-panel-desc {
  font-family:'Jost',sans-serif;font-weight:300;font-size:.72rem;color:var(--dim);margin-top:.125rem;
}

/* ── Category pill ── */
.cat-pill {
  flex-shrink:0;padding:.375rem 1.25rem;font-family:'Montserrat',sans-serif;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--border);background:transparent;color:var(--taupe);
  transition:all .2s;cursor:pointer;margin-right:.25rem;
}
.cat-pill.active,.cat-pill:hover{background:var(--gold);color:var(--bg);border-color:var(--gold)}

/* ── Checkout steps ── */
.step-indicator { font-family:'Montserrat',sans-serif;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase; }
.step-indicator.active{color:var(--gold)}
.step-indicator.done{color:var(--taupe)}
.step-indicator.pending{color:var(--muted)}

/* ── Payment radio ── */
.payment-radio {
  display:flex;align-items:flex-start;gap:1.25rem;padding:1rem;
  border:1px solid var(--border);background:var(--card);cursor:pointer;transition:border-color .2s;
}
.payment-radio.selected{border-color:var(--gold)}
.payment-radio:hover{border-color:var(--taupe)}
.payment-radio input[type=radio]{accent-color:var(--gold);margin-top:.15rem;flex-shrink:0}

/* ── Tier card ── */
.tier-card { border:1px solid var(--border);background:var(--card);padding:2rem;display:flex;flex-direction:column; }
.tier-card.highlight{border-color:rgba(201,168,76,.6);background:var(--surface)}

/* ── Region card ── */
.region-card { border:1px solid var(--border);background:var(--card);padding:1.5rem; }
.region-card.highlight{border-color:rgba(201,168,76,.4);background:var(--surface)}

/* ── FAQ accordion ── */
.faq-item { border:1px solid var(--border);background:var(--bg); }
.faq-btn {
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;text-align:left;cursor:pointer;background:none;border:none;
}
.faq-btn svg{transition:transform .3s;flex-shrink:0}
.faq-btn.open svg{transform:rotate(180deg)}
.faq-body { display:none;padding:0 1.5rem 1.25rem;border-top:1px solid #1e1c18; }
.faq-body.open{display:block}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--card)}
::-webkit-scrollbar-thumb{background:var(--gold)}

/* ── Grid helpers ── */
.grid-cols-1{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){
  .sm-grid-2{grid-template-columns:repeat(2,1fr)}
  .sm-grid-3{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1024px){
  .lg-grid-3{grid-template-columns:repeat(3,1fr)}
  .lg-grid-4{grid-template-columns:repeat(4,1fr)}
  .lg-grid-5{grid-template-columns:repeat(5,1fr)}
}

/* ── Products Grid — 2 cols mobile → 3 tablet → 4 desktop ── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .875rem;
}
@media(min-width:640px){
  .products-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
@media(min-width:1024px){
  .products-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

/* ── Category Grid — 2 cols mobile → 3 tablet → 6 desktop ── */
.cats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .625rem;
}
@media(min-width:640px){  .cats-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media(min-width:1024px){ .cats-grid { grid-template-columns: repeat(6, 1fr); } }

/* ── Values Grid — 1 col → 2 → 4 ── */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media(min-width:640px){  .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:1024px){ .values-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

/* ── Instagram Grid — 3 cols mobile → 6 ── */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .375rem;
  margin-top: 2.5rem;
}
@media(min-width:640px){ .insta-grid { grid-template-columns: repeat(6, 1fr); gap: .5rem; } }

/* ═══════════════════════════════════════════════
   MOBILE RESPONSIVE — full overrides ≤ 768px
═══════════════════════════════════════════════ */
@media(max-width:768px){

  /* Container spacing */
  .container { padding: 0 1rem; }

  /* Section padding */
  section { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

  /* Reduce section headings */
  h1 { font-size: clamp(2.5rem,9vw,3.5rem) !important; }
  h2 { font-size: clamp(1.75rem,6vw,2.25rem) !important; }

  /* Hero section */
  .hero-stats {
    gap: 1.5rem !important;
    flex-wrap: wrap;
  }
  .hero-stat-num { font-size: 1.5rem !important; }

  /* Buttons — full-width stack on very small */
  .btn-stack-mobile {
    flex-direction: column !important;
    width: 100%;
  }
  .btn-stack-mobile .btn-gold,
  .btn-stack-mobile .btn-outline {
    width: 100%;
    text-align: center;
  }

  /* Product card — tighter padding on mobile */
  .product-card-body { padding: .625rem .625rem .875rem; }
  .product-card-name { font-size: .9rem; margin-bottom: .5rem; }
  .product-card-cat  { font-size: .5rem; }
  .product-card-price{ font-size: .75rem; }
  .product-card-orig { font-size: .65rem; }

  /* Always show add-to-cart button on mobile (no hover) */
  .product-card-add {
    transform: translateY(0) !important;
    font-size: .55rem;
    padding: .65rem .5rem;
  }

  /* Cart drawer — full width on mobile */
  #cart-drawer-panel { max-width: 100% !important; }

  /* Checkout */
  .checkout-grid {
    grid-template-columns: 1fr !important;
  }

  /* Announcement bar — smaller text */
  .announcement-bar p { font-size: .52rem !important; letter-spacing: .15em !important; }

  /* Product detail layout */
  .product-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Story / two-col sections */
  .two-col-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  /* Floating badge on story section */
  .story-badge {
    bottom: -1rem !important;
    left: .5rem !important;
  }

  /* WhatsApp button — smaller on mobile */
  .wa-float {
    width: 2.75rem !important;
    height: 2.75rem !important;
    bottom: 1.25rem !important;
    right: 1.25rem !important;
  }
  .wa-float svg { width: 1.25rem !important; height: 1.25rem !important; }

  /* Tier cards stack */
  .tier-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Region cards */
  .region-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Wholesale table scroll */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Trade dropdown — disable hover, handled by mobile menu */
  .trade-panel { display: none !important; }

  /* Filter pills — horizontal scroll */
  .filter-pills-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .5rem;
    flex-wrap: nowrap !important;
  }
  .filter-pills-wrap::-webkit-scrollbar { display: none; }

  /* Stats row in hero */
  .hero-stats-row {
    gap: 1.5rem !important;
    flex-wrap: wrap;
  }
}

/* ── Utility ── */
.text-center{text-align:center}
.text-gold{color:var(--gold)}
.text-cream{color:var(--cream)}
.text-taupe{color:var(--taupe)}
.text-dim{color:var(--dim)}
.bg-card{background:var(--card)}
.bg-surface{background:var(--surface)}
.border-dark{border:1px solid var(--border)}
.italic{font-style:italic}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ── Wishlist btn ── */
.wishlist-btn {
  width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,8,.8);border:1px solid var(--border);
  position:absolute;top:.75rem;right:.75rem;
  opacity:0;transition:opacity .3s,border-color .3s;
}
.product-card:hover .wishlist-btn{opacity:1}
.wishlist-btn:hover{border-color:var(--gold)}
.wishlist-btn.active svg{fill:var(--gold);stroke:var(--gold)}

/* Sold out overlay */
.sold-out-overlay {
  position:absolute;inset:0;background:rgba(10,10,8,.7);
  display:flex;align-items:center;justify-content:center;
}
.sold-out-label {
  font-family:'Montserrat',sans-serif;font-size:.65rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--taupe);border:1px solid var(--border);padding:.5rem 1rem;
}

/* Parallax */
.parallax-bg { background-attachment: fixed; background-size: cover; background-position: center; }
@media(max-width:768px){.parallax-bg{background-attachment:scroll}}

/* Color swatch */
.color-swatch {
  width:.625rem;height:.625rem;border-radius:50%;display:inline-block;
  border:1px solid rgba(58,46,34,.6);
}