/* =============================================================
   J.A Essence — Mobile-first adaptive stylesheet
   Base styles target mobile. Desktop adjustments come via
   @media (min-width:...) — progressive enhancement.
   ============================================================= */

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:#0a0908; color:#ece4d4; font-family:'Jost',sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
::selection { background:#d4af61; color:#0a0908; }
a { color:inherit; }

@keyframes shimmer { to { background-position:200% center; } }
@keyframes floatYslow { 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-26px) rotate(2deg); } }
@keyframes glowPulse { 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:.9; transform:scale(1.08); } }
@keyframes drift { 0%{ transform:translateY(0) translateX(0); opacity:0; } 15%{ opacity:.8; } 85%{ opacity:.6; } 100%{ transform:translateY(-120px) translateX(20px); opacity:0; } }
@keyframes marquee { to { transform:translateX(-50%); } }
@keyframes revealUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes spinRing { to { transform:rotate(360deg); } }
@keyframes raysSpin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes auroraShift { 0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.7; } 50%{ transform:translate(-50%,-52%) scale(1.12); opacity:1; } }
@keyframes floorGlow { 0%,100%{ opacity:.5; transform:translateX(-50%) scaleX(1); } 50%{ opacity:.85; transform:translateX(-50%) scaleX(1.1); } }
@keyframes sparkle { 0%, 100% { transform:translate(-50%,-50%) scale(0); opacity:0; } 35% { opacity:1; } 50% { transform:translate(-50%,-50%) scale(1.5); opacity:1; } 65% { opacity:1; } }
@keyframes sparkleDrift { 0% { transform: rotate(0deg) translateY(-180px); opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { transform: rotate(360deg) translateY(-180px); opacity:0; } }
@keyframes logoPulse { 0%, 100% { box-shadow: 0 0 50px rgba(212,175,97,.3), 0 0 0 rgba(232,196,120,0); } 50% { box-shadow: 0 0 70px rgba(212,175,97,.55), 0 0 30px rgba(232,196,120,.4); } }

/* =============================================================
   NAV — base = mobile (drawer + hamburger)
   ============================================================= */
.nav {
  position:fixed; top:0; left:0; width:100%;
  z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:10px 5vw;
  background:rgba(10,9,8,.94);
  border-bottom:1px solid rgba(212,175,97,.16);
  transition:padding .3s;
}
.nav.scrolled { padding:8px 5vw; background:rgba(10,9,8,.92); }

.nav-brand { display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0; }
.logo-circle {
  position:relative; display:inline-block;
  width:44px; height:44px;
  border-radius:50%;
  overflow:hidden;
  background:#0a0908;
  border:1px solid rgba(212,175,97,.55);
  box-shadow:0 0 14px rgba(212,175,97,.25), inset 0 0 0 1px rgba(212,175,97,.12);
  transition:width .3s, height .3s, box-shadow .3s;
  flex-shrink:0;
}
.logo-circle img {
  position:absolute; top:50%; left:50%;
  width:158%; height:158%;
  transform:translate(-50%,-50%);
  object-fit:cover;
  display:block;
}
.nav.scrolled .logo-circle { width:38px; height:38px; }
.nav-brand-text { font-family:'Cormorant Garamond',serif; font-size:15px; font-weight:600; letter-spacing:2px; color:#f3e8cf; white-space:nowrap; overflow:hidden; max-width:240px; opacity:1; transition:max-width .35s, opacity .25s, margin-left .35s; }
.nav.scrolled .nav-brand-text { max-width:0; opacity:0; margin-left:-12px; }
.nav-brand-text .dot { color:#d4af61; }

/* Mobile: nav-links is a slide-in drawer from the right */
.nav-links {
  position:fixed; top:0; right:0; bottom:0; left:auto;
  width:78vw; max-width:320px;
  display:flex;
  flex-direction:column; align-items:flex-start; justify-content:flex-start;
  gap:4px;
  padding:88px 28px 32px;
  background:#14110d;
  border-left:1px solid rgba(212,175,97,.5);
  box-shadow:-30px 0 60px rgba(0,0,0,.8);
  z-index:300;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
  overflow-y:auto;
}
.nav-links.open { transform:translateX(0); }
.nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-actions .nav-toggle { display:none !important; }
/* Only show hamburger on real touch devices (phones/tablets), never on desktop */
@media (hover: none) and (pointer: coarse) {
  body.is-mobile .nav-actions .nav-toggle { display:inline-flex !important; }
}
.nav-scrim {
  position:fixed; inset:0;
  background:rgba(7,6,5,.78);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  z-index:290; opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.nav-scrim.open { opacity:1; pointer-events:auto; }
.nav-link {
  display:block; width:100%;
  font-size:15px; letter-spacing:2.5px;
  padding:16px 0;
  color:#e9dcb8;
  text-decoration:none;
  text-transform:uppercase;
  border-bottom:1px solid rgba(212,175,97,.14);
  transition:color .3s;
  position:relative;
}
.nav-link:hover, .nav-link.active { color:#d4af61; }

/* Hide brand text on very narrow screens */
@media (max-width:380px) {
  .nav-brand-text { display:none; }
}

/* Desktop nav: inline links, no drawer, hamburger hidden */
@media (min-width:760px) {
  .nav { gap:40px; padding:14px 6vw; background:rgba(10,9,8,.55); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
  .nav.scrolled { padding:10px 6vw; background:rgba(10,9,8,.78); }
  .nav-brand { gap:16px; }
  .logo-circle { width:52px; height:52px; box-shadow:0 0 18px rgba(212,175,97,.25), inset 0 0 0 1px rgba(212,175,97,.12); }
  .nav.scrolled .logo-circle { width:42px; height:42px; }
  .nav-brand-text { font-size:19px; letter-spacing:2.5px; max-width:320px; }
  .nav-brand-text { display:inline-block; }
  .nav-links {
    position:static; width:auto; max-width:none;
    flex-direction:row; align-items:center; justify-content:flex-end;
    gap:28px;
    padding:0;
    background:transparent;
    border-left:none; box-shadow:none;
    transform:none;
    overflow:visible;
    z-index:auto;
  }
  .nav-actions { gap:12px; }
  .nav-actions .nav-toggle { display:none !important; }
  .nav-scrim { display:none; }
  .nav-link {
    display:inline-block; width:auto;
    font-size:13px; letter-spacing:1.5px;
    padding:0;
    color:#cfc6b4;
    border-bottom:none;
  }
  .nav-link.active::after {
    content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:#d4af61;
  }
}

/* =============================================================
   BUTTONS & ICONS
   ============================================================= */
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; background:transparent; border:1px solid rgba(212,175,97,.32); border-radius:50%; color:#e9dcb8; cursor:pointer; transition:border-color .3s, background .3s, color .3s; }
.icon-btn:hover { border-color:#d4af61; background:rgba(212,175,97,.1); color:#f6e2a8; }
@media (min-width:760px) {
  .icon-btn { width:42px; height:42px; }
}

.btn-gold { display:inline-flex; align-items:center; gap:8px; padding:11px 22px; background:linear-gradient(135deg,#f6e2a8,#d4af61 45%,#b8893b); color:#1a1408; text-decoration:none; font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; border-radius:2px; box-shadow:0 6px 22px rgba(212,175,97,.3); transition:transform .3s, box-shadow .3s; }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(212,175,97,.5); }

.btn-gold-lg { display:inline-flex; align-items:center; gap:8px; padding:13px 26px; background:linear-gradient(135deg,#f6e2a8,#d4af61 45%,#b8893b); color:#1a1408; text-decoration:none; font-size:11px; font-weight:600; letter-spacing:1.8px; text-transform:uppercase; border-radius:2px; box-shadow:0 8px 24px rgba(212,175,97,.3); transition:transform .3s, box-shadow .3s; }
.btn-gold-lg:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(212,175,97,.45); }

.btn-outline { display:inline-flex; align-items:center; padding:13px 26px; border:1px solid rgba(212,175,97,.45); color:#ece4d4; text-decoration:none; font-size:11px; font-weight:500; letter-spacing:1.8px; text-transform:uppercase; border-radius:2px; transition:background .3s, border-color .3s; }
.btn-outline:hover { background:rgba(212,175,97,.1); border-color:#d4af61; }

/* =============================================================
   HERO — base = stacked column, no trio image
   ============================================================= */
.hero {
  position:relative;
  min-height:auto;
  display:flex; flex-direction:column;
  gap:30px;
  align-items:flex-start;
  padding:110px 5vw 50px;
  background:#070605;
  overflow:hidden;
}
.hero > div:last-child { max-width:100%; flex:1 1 auto; }
.hero h1 { font-size:clamp(28px,7.5vw,40px); }
.hero p { font-size:14px; max-width:100%; margin-bottom:24px; }
.hero-trio { display:none; }
@media (min-width:760px) {
  .hero {
    min-height:100vh;
    flex-direction:row; gap:0;
    align-items:center;
    padding:140px 6vw 80px;
  }
  .hero > div:last-child { max-width:600px; flex:1.1; }
  .hero h1 { font-size:clamp(40px,5.2vw,72px); }
  .hero p { font-size:16px; max-width:460px; margin-bottom:32px; }
  .hero-trio { display:block; }
}

/* =============================================================
   SEARCH OVERLAY
   ============================================================= */
.close-btn { width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid rgba(212,175,97,.3); border-radius:50%; color:#e9dcb8; cursor:pointer; transition:border-color .3s, color .3s; }
.close-btn:hover { border-color:#d4af61; color:#f6e2a8; }
.search-overlay { display:none; position:fixed; inset:0; z-index:200; flex-direction:column; align-items:center; padding:10vh 5vw 5vh; background:rgba(7,6,5,.86); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); animation:revealUp .35s both; }
.search-overlay.open { display:flex; }
.search-result { display:flex; align-items:center; gap:16px; padding:12px; text-decoration:none; border:1px solid rgba(212,175,97,.16); border-radius:4px; background:rgba(20,18,16,.6); transition:border-color .3s, transform .3s; }
.search-result:hover { border-color:rgba(212,175,97,.5); transform:translateX(4px); }
@media (min-width:760px) {
  .search-overlay { padding:14vh 6vw 6vh; }
  .close-btn { width:46px; height:46px; }
}

/* =============================================================
   PRODUCT CARDS & GENERIC CARDS
   ============================================================= */
.product-card { position:relative; background:linear-gradient(180deg,#141210,#0d0c0a); border:1px solid rgba(212,175,97,.16); border-radius:4px; overflow:hidden; transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s; }
.product-card:hover { transform:translateY(-10px); box-shadow:0 30px 60px rgba(0,0,0,.55), 0 0 40px rgba(212,175,97,.18); border-color:rgba(212,175,97,.55); }
.product-card img.cover { transition:transform .7s cubic-bezier(.2,.7,.2,1); position:relative; z-index:3; }
.product-card:hover img.cover { transform:scale(1.08); filter:drop-shadow(0 0 18px rgba(212,175,97,.35)); }

/* Golden aura — energía dorada respirando detrás del perfume */
.card-stage { isolation:isolate; box-shadow:inset 0 -50px 70px -25px rgba(212,175,97,.22); }
.card-stage::before {
  content:"";
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,196,80,.55), transparent 30%),
    radial-gradient(circle at 50% 58%, rgba(186,112,28,.38), transparent 40%),
    radial-gradient(circle at 45% 42%, rgba(255,224,140,.26), transparent 24%),
    radial-gradient(circle at 65% 65%, rgba(212,175,97,.20), transparent 36%);
  filter:blur(36px);
  opacity:.65;
  mix-blend-mode:screen;
  animation:goldenAura 8s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:1;
}
.card-stage::after {
  content:"";
  position:absolute;
  top:-60%;
  left:-80%;
  width:55%;
  height:220%;
  background:linear-gradient(120deg, transparent 0%, rgba(255,214,120,.20) 50%, transparent 100%);
  transform:rotate(18deg);
  animation:goldenShine 7s ease-in-out infinite;
  pointer-events:none;
  z-index:2;
  mix-blend-mode:screen;
}
.product-card:hover .card-stage { box-shadow:inset 0 -55px 80px -20px rgba(212,175,97,.38); }
.product-card:hover .card-stage::before { opacity:.92; animation-duration:5s; }

@keyframes goldenAura {
  0%   { transform:scale(1)    translateY(10px);  opacity:.50; }
  50%  { transform:scale(1.08) translateY(-8px);  opacity:.78; }
  100% { transform:scale(1.14) translateY(-18px); opacity:.62; }
}
@keyframes goldenShine {
  0%   { transform:translateX(-130%) rotate(18deg); opacity:0; }
  35%  { opacity:.28; }
  65%  { transform:translateX(330%)  rotate(18deg); opacity:0; }
  100% { opacity:0; }
}

@media (prefers-reduced-motion: reduce) {
  .card-stage::before, .card-stage::after { animation:none; }
}
.product-cta { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:13px; background:transparent; border:1px solid rgba(212,175,97,.5); color:#f0d99a; text-decoration:none; font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; border-radius:2px; cursor:pointer; font-family:inherit; transition:background .35s, color .35s, border-color .35s; }
.product-cta:hover { background:linear-gradient(135deg,#f6e2a8,#d4af61 45%,#b8893b); color:#1a1408; border-color:transparent; }
.size-card { position:relative; padding:34px 22px; text-align:center; border-radius:5px; transition:transform .4s, box-shadow .4s; }
.size-card:hover { transform:translateY(-8px); box-shadow:0 26px 54px rgba(0,0,0,.5); }
@media (min-width:760px) { .size-card { padding:46px 32px; } }

/* =============================================================
   FOOTER
   ============================================================= */
.footer { position:relative; padding:42px 5vw 28px; background:#070605; border-top:1px solid rgba(212,175,97,.14); }
.footer-link { color:#8f897a; text-decoration:none; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; transition:color .3s; }
.footer-link:hover { color:#d4af61; }
.social-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid rgba(212,175,97,.35); color:#cfc6b4; text-decoration:none; transition:transform .3s, border-color .3s, color .3s, background .3s, box-shadow .3s; }
.social-btn:hover { color:#1a1408; background:linear-gradient(135deg,#f6e2a8,#d4af61 45%,#b8893b); border-color:transparent; transform:translateY(-2px); box-shadow:0 8px 22px rgba(212,175,97,.35); }
@media (min-width:760px) {
  .footer { padding:60px 6vw 40px; }
  .footer-link { font-size:13px; }
  .social-btn { width:42px; height:42px; }
}

/* =============================================================
   CART
   ============================================================= */
.cart-btn { position:relative; }
.cart-badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; background:linear-gradient(135deg,#f6e2a8,#d4af61); color:#1a1408; border-radius:99px; font-size:10px; font-weight:700; display:none; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(212,175,97,.45); }
.cart-scrim { position:fixed; inset:0; background:rgba(7,6,5,.7); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); z-index:240; opacity:0; pointer-events:none; transition:opacity .35s; }
.cart-scrim.open { opacity:1; pointer-events:auto; }
.cart-drawer { position:fixed; top:0; right:0; bottom:0; width:100vw; max-width:100vw; background:linear-gradient(180deg,#0d0c0a,#070605); border-left:1px solid rgba(212,175,97,.28); z-index:250; transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.7,.2,1); display:flex; flex-direction:column; box-shadow:-30px 0 60px rgba(0,0,0,.5); }
.cart-drawer.open { transform:translateX(0); }
.cart-head { display:flex; align-items:flex-start; justify-content:space-between; padding:22px 22px 18px; border-bottom:1px solid rgba(212,175,97,.18); }
.cart-eyebrow { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:#d4af61; margin-bottom:5px; }
.cart-head h3 { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:26px; color:#f3ece0; line-height:1; }
.cart-body { flex:1; overflow-y:auto; padding:8px 18px; }
.cart-empty { padding:60px 18px 40px; text-align:center; color:#cbbf9f; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:20px; }
.cart-item { display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:14px 4px; border-bottom:1px solid rgba(212,175,97,.1); }
.cart-item:last-child { border-bottom:none; }
.cart-item img { width:56px; height:56px; object-fit:cover; border-radius:3px; border:1px solid rgba(212,175,97,.18); }
.cart-item-brand { font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:#d4af61; margin-bottom:3px; }
.cart-item-name { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:16px; color:#f3ece0; line-height:1.15; }
.cart-item-meta { font-size:12px; color:#8f897a; margin-top:4px; }
.qty-control { display:flex; align-items:center; gap:4px; padding:4px 6px; background:rgba(212,175,97,.06); border:1px solid rgba(212,175,97,.22); border-radius:3px; }
.qty-btn { background:transparent; border:none; color:#d4af61; width:24px; height:24px; cursor:pointer; font-size:17px; line-height:1; padding:0; transition:color .2s; font-family:inherit; }
.qty-btn:hover { color:#f6e2a8; }
.qty-val { font-size:14px; color:#f3ece0; min-width:20px; text-align:center; font-weight:500; }
.cart-foot { padding:18px 22px 22px; border-top:1px solid rgba(212,175,97,.25); background:rgba(20,18,16,.55); }
.cart-total-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.cart-total-row .label { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:#9c9484; }
.cart-total-row .value { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:24px; color:#d4af61; }
@media (min-width:640px) {
  .cart-drawer { width:440px; max-width:92vw; }
  .cart-head { padding:26px 28px 24px; }
  .cart-head h3 { font-size:30px; }
  .cart-body { padding:8px 24px; }
  .cart-item { grid-template-columns:64px 1fr auto; gap:14px; padding:16px 4px; }
  .cart-item img { width:64px; height:64px; }
  .cart-item-name { font-size:18px; }
  .cart-foot { padding:22px 28px 26px; }
  .cart-total-row .value { font-size:28px; }
}

/* CTA on cards */
.vitrine-cta { cursor:pointer; font-family:inherit; background:transparent; }

/* =============================================================
   VITRINE
   ============================================================= */
.vitrine {
  position:relative;
  padding:70px 5vw 60px;
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(212,175,97,.10), transparent 72%),
    radial-gradient(110% 70% at 50% 0%, #1a140c 0%, #0a0908 55%, #050403 100%);
  overflow:hidden;
}
.vitrine::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:280px; max-width:60%; height:1px;
  background:linear-gradient(90deg, transparent, #d4af61, transparent);
  opacity:.45;
}
.vitrine-header { text-align:center; max-width:640px; margin:0 auto 40px; }
.vitrine-eyebrow { font-size:12px; letter-spacing:4px; text-transform:uppercase; color:#d4af61; }
.vitrine-title { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(24px,6vw,42px); color:#f3ece0; margin:10px 0 12px; }
.vitrine-sub { font-size:14px; line-height:1.65; color:#9c9484; }
.vitrine-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:24px;
  max-width:1280px;
  margin:0 auto 40px;
}
@media (min-width:760px) {
  .vitrine { padding:130px 6vw 110px; }
  .vitrine-header { margin-bottom:80px; }
  .vitrine-grid { gap:30px; margin-bottom:60px; }
}

/* Carousel — base: 1 visible, grows with viewport */
.vitrine-carousel { position:relative; max-width:1280px; margin:0 auto 6px; padding:0 44px; }
.vitrine-viewport { overflow:hidden; padding:8px 0; }
.vitrine-track {
  display:flex; gap:24px;
  transition:transform .75s cubic-bezier(.25,.8,.25,1);
  will-change:transform;
}
.vitrine-track > .vitrine-card { flex:0 0 100%; }
@media (min-width:540px) {
  .vitrine-carousel { padding:0 50px; }
  .vitrine-track > .vitrine-card { flex:0 0 calc((100% - 24px) / 2); }
}
@media (min-width:760px) {
  .vitrine-carousel { padding:0 60px; }
  .vitrine-track { gap:30px; }
  .vitrine-track > .vitrine-card { flex:0 0 calc((100% - 60px) / 3); }
}
@media (min-width:1200px) {
  .vitrine-track > .vitrine-card { flex:0 0 calc((100% - 90px) / 4); }
}

.vitrine-arrow {
  position:absolute; top:38%; z-index:5;
  width:38px; height:38px; border-radius:50%;
  background:rgba(15,12,9,.85); border:1px solid rgba(212,175,97,.4);
  color:#d4af61; padding:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .3s, background .3s, color .3s, border-color .3s, box-shadow .3s;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.vitrine-arrow:hover { background:linear-gradient(135deg,#f6e2a8,#d4af61 45%,#b8893b); color:#1a1408; border-color:transparent; transform:translateY(-50%) scale(1.08); box-shadow:0 8px 22px rgba(212,175,97,.35); }
.vitrine-arrow:disabled { opacity:.25; cursor:default; }
.vitrine-arrow-prev { left:0; transform:translateY(-50%); }
.vitrine-arrow-next { right:0; transform:translateY(-50%); }
@media (min-width:760px) {
  .vitrine-arrow { width:46px; height:46px; }
}

.vitrine-dots { display:flex; justify-content:center; gap:9px; margin:18px 0 32px; }
.vitrine-dot { width:8px; height:8px; border-radius:50%; background:rgba(212,175,97,.25); border:none; padding:0; cursor:pointer; transition:width .35s, background .35s, border-radius .35s; }
.vitrine-dot:hover { background:rgba(212,175,97,.55); }
.vitrine-dot.active { width:26px; border-radius:99px; background:#d4af61; box-shadow:0 0 14px rgba(212,175,97,.5); }

.vitrine-card { position:relative; display:flex; flex-direction:column; align-items:stretch; text-align:center; isolation:isolate; }
.vitrine-frame {
  position:relative;
  width:100%;
  aspect-ratio: 4 / 5;
  overflow:hidden;
  border:1px solid rgba(212,175,97,.5);
  border-radius:3px;
  background:linear-gradient(180deg, rgba(20,16,10,.6), rgba(8,6,4,.9));
  box-shadow: 0 30px 50px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,235,180,.22), inset 0 -1px 0 rgba(0,0,0,.5);
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s, border-color .55s;
  z-index:1;
  cursor:pointer;
}
.vitrine-frame::before {
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 38%, transparent 62%, rgba(255,255,255,.05) 100%);
  pointer-events:none;
}
.vitrine-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .55s; }
.vitrine-card:hover .vitrine-frame { transform: translateY(-10px); border-color: rgba(232,196,120,.85); box-shadow: 0 42px 60px -20px rgba(0,0,0,.85), 0 0 38px rgba(232,196,120,.32), inset 0 1px 0 rgba(255,235,180,.35), inset 0 -1px 0 rgba(0,0,0,.5); }
.vitrine-card:hover .vitrine-photo { transform: scale(1.06); }
.vitrine-card:hover .vitrine-shelf { transform: translateY(-10px); }
.vitrine-card:hover .vitrine-shelf::after { opacity:1; }

.vitrine-shelf {
  position:relative; width:100%; height:14px; margin-top:-1px;
  background:linear-gradient(180deg, rgba(255,236,184,.25), rgba(255,255,255,.06) 45%, rgba(0,0,0,.45));
  border-top:1px solid rgba(212,175,97,.7);
  border-bottom:1px solid rgba(212,175,97,.2);
  box-shadow: 0 6px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.vitrine-shelf::before { content:''; position:absolute; left:8%; right:8%; top:-1px; height:1px; background:linear-gradient(90deg, transparent, rgba(255,235,180,.7), transparent); }
.vitrine-shelf::after {
  content:''; position:absolute; left:6%; right:6%; top:100%; height:54px;
  background: radial-gradient(ellipse at 50% 0%, rgba(232,196,120,.6), rgba(212,175,97,.2) 42%, transparent 78%);
  filter: blur(10px); opacity:.55;
  transition: opacity .55s;
  pointer-events:none;
}
.vitrine-info { padding:32px 4px 0; }
.vitrine-brand { font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:#d4af61; margin-bottom:6px; }
.vitrine-name { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:19px; color:#f3ece0; line-height:1.15; margin-bottom:8px; }
.vitrine-price { font-size:12px; color:#cbbf9f; letter-spacing:.5px; margin-bottom:15px; }
.vitrine-cta {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px;
  border:1px solid rgba(212,175,97,.5);
  color:#f0d99a;
  text-decoration:none;
  font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  border-radius:2px;
  transition:background .35s, color .35s, border-color .35s;
}
.vitrine-cta:hover { background:linear-gradient(135deg,#f6e2a8,#d4af61 45%,#b8893b); color:#1a1408; border-color:transparent; }
.vitrine-footer-cta { text-align:center; }
@media (min-width:760px) { .vitrine-info { padding-top:42px; } }

/* =============================================================
   PRODUCT MODAL — base: single column; desktop: two columns
   ============================================================= */
.product-modal { display:none; position:fixed; inset:0; z-index:300; align-items:flex-start; justify-content:center; padding:3vh 4vw; overflow-y:auto; }
.product-modal.open { display:flex; animation: revealUp .35s both; }
.product-modal-backdrop { position:fixed; inset:0; background:rgba(7,6,5,.85); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); cursor:pointer; }
.product-modal-panel {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap:0;
  max-width:960px; width:100%; max-height:94vh;
  background:linear-gradient(180deg,#141210,#0a0908);
  border:1px solid rgba(212,175,97,.45);
  border-radius:4px;
  overflow-y:auto;
  box-shadow: 0 40px 80px rgba(0,0,0,.7), 0 0 60px rgba(212,175,97,.18);
}
.product-modal-img-wrap {
  position:relative;
  background:
    radial-gradient(70% 55% at 50% 90%, rgba(212,175,97,.22), transparent 75%),
    linear-gradient(180deg,#1a140c,#070605);
  display:flex; align-items:center; justify-content:center;
  padding:28px 22px 50px;
  min-height:280px;
  overflow:hidden;
}
.product-modal-img-wrap img { position:relative; z-index:2; max-width:100%; max-height:320px; object-fit:contain; filter: drop-shadow(0 30px 30px rgba(0,0,0,.6)); }
.product-modal-shelf {
  position:absolute; left:8%; right:8%; bottom:24px;
  height:12px;
  background:linear-gradient(180deg, rgba(255,236,184,.22), rgba(255,255,255,.05) 45%, rgba(0,0,0,.45));
  border-top:1px solid rgba(212,175,97,.6);
  border-bottom:1px solid rgba(212,175,97,.18);
  box-shadow: 0 6px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
  z-index:1;
}
.product-modal-info { padding:28px 22px 32px; display:flex; flex-direction:column; }
.product-modal-brand { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:#d4af61; margin-bottom:10px; }
.product-modal-name { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:28px; color:#f3ece0; line-height:1.05; margin-bottom:14px; }
.product-modal-desc { font-size:14px; line-height:1.65; color:#a39b8b; margin-bottom:22px; }
.product-modal-tiers-label { font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:#d4af61; margin-bottom:10px; }
.product-modal-tiers { display:flex; gap:10px; margin-bottom:22px; }
.modal-tier { flex:1; text-align:center; padding:14px 6px; border:1px solid rgba(212,175,97,.28); border-radius:3px; background:rgba(212,175,97,.05); }
.modal-tier-ml { font-size:13px; color:#cbbf9f; font-weight:500; }
.modal-tier-price { font-size:14px; color:#d4af61; margin-top:4px; }
button.modal-tier { font-family:inherit; cursor:pointer; display:block; width:100%; transition:background .25s, border-color .25s, transform .25s; }
button.modal-tier:hover { background:linear-gradient(135deg,rgba(246,226,168,.15),rgba(212,175,97,.18) 60%,rgba(184,137,59,.15)); border-color:#d4af61; transform:translateY(-2px); }
.modal-tier-add { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#d4af61; margin-top:8px; font-weight:600; }
.product-modal-panel .btn-gold-lg { align-self:flex-start; }
.product-modal-close { position:absolute; top:20px; right:20px; z-index:5; }
@media (min-width:760px) {
  .product-modal { align-items:center; padding:5vh 5vw; }
  .product-modal-panel { grid-template-columns:1fr 1fr; max-height:90vh; overflow:hidden; }
  .product-modal-img-wrap { padding:36px 28px 56px; min-height:400px; }
  .product-modal-img-wrap img { max-height:420px; }
  .product-modal-shelf { bottom:30px; }
  .product-modal-info { padding:50px 40px; justify-content:center; overflow-y:auto; }
  .product-modal-name { font-size:42px; margin-bottom:18px; }
  .product-modal-desc { font-size:15px; line-height:1.7; margin-bottom:26px; }
  .product-modal-tiers { gap:10px; margin-bottom:30px; }
}

/* Make product imagery look clickable */
.product-card .cover { cursor:pointer; }

/* =============================================================
   PAGE HERO (used on subpages)
   ============================================================= */
.page-hero {
  position:relative;
  padding:110px 5vw 40px;
  text-align:center;
  background:radial-gradient(120% 100% at 50% 0%,#1a140d,#0a0908 65%);
  border-bottom:1px solid rgba(212,175,97,.12);
}
.page-hero-eyebrow { font-size:11px; letter-spacing:3.5px; text-transform:uppercase; color:#d4af61; }
.page-hero h1 { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(26px,6vw,54px); color:#f3ece0; margin:10px 0 12px; line-height:1.05; }
.page-hero p { max-width:560px; margin:0 auto; font-size:14px; line-height:1.65; color:#9c9484; }
@media (min-width:760px) {
  .page-hero { padding:140px 6vw 56px; }
  .page-hero h1 { margin:12px 0 14px; }
}