/* =========================
   RESET + BASE
========================= */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#111;
  background:#fff;
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ width:min(1100px, 92vw); margin:0 auto; }

/* =========================
   TYPOGRAPHY (Elegant: Playfair + Poppins)
   Put this AFTER reset and BEFORE components
========================= */

/* If you used Google Fonts link, just apply them here */
:root{
  --font-body: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-title: "Playfair Display", Georgia, "Times New Roman", serif;
}

html{
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body{
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings = Playfair */
h1, h2, h3, h4, h5, h6{
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

/* Optional: make big titles look extra luxe */
h1{ font-weight: 700; letter-spacing: 0.015em; }
h2{ font-weight: 700; letter-spacing: 0.012em; }
h3{ font-weight: 700; letter-spacing: 0.01em; }

/* Common “title” classes you already use */
.hero-title,
.section h1, .section h2,
.card-title,

.pay-pop-title,
.lux-checkout-cta-text strong,
.lux-rec-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.lux-rec-hint{
  font-size:12px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(0,0,0,0.55);
}

/* Scroll row */
.lux-rec-row{
  display:flex;
  gap: 18px;
  overflow-x:auto;  
  padding-bottom: 6px;            
}

/* Nice scrollbar (Chrome/Edge) */
.lux-rec-row::-webkit-scrollbar{ height: 8px; }
.lux-rec-row::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}
.lux-rec-row::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
}

/* Card sizing */
.lux-rec-card{
  flex: 0 0 auto;                        /* prevent wrapping */
  width: 220px;                          /* desktop size */
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  overflow:hidden;
  scroll-snap-align: start;
  transition: transform 180ms ease, box-shadow 220ms ease, border-color 200ms ease;
}

.lux-rec-card:hover{
  transform: translateY(-2px);
  border-color: rgba(215,183,106,.45);
  box-shadow: 0 18px 55px rgba(0,0,0,.10);
}

/* =========================
   REC CARD HOVER ANIMATION
========================= */

.lux-rec-card{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 280ms cubic-bezier(.22,.61,.36,1),
              box-shadow 280ms ease,
              border-color 220ms ease;
}

/* Smooth lift */
.lux-rec-card:hover{
  transform: translateY(-6px);
  border-color: rgba(215,183,106,.55);
  box-shadow:
    0 28px 70px rgba(0,0,0,.12),
    0 0 0 1px rgba(215,183,106,.12);
}

/* Media container */
.lux-rec-media{
  position: relative;
  overflow: hidden;
}

/* Image zoom */
.lux-rec-media img{
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}

.lux-rec-card:hover .lux-rec-media img{
  transform: scale(1.12);
}

/* Soft dark overlay */
.lux-rec-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.05)
  );
  opacity:0;
  transition: opacity 400ms ease;
}

.lux-rec-card:hover .lux-rec-media::after{
  opacity:1;
}

/* Slide-up text effect */
.lux-rec-body{
  position: relative;
  transition: transform 400ms ease;
}

.lux-rec-card:hover .lux-rec-body{
  transform: translateY(-4px);
}

/* Name glow on hover */
.lux-rec-card:hover .lux-rec-name{
  color: var(--lux-gold);
  transition: color 300ms ease;
}

.lux-rec-card::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,0.25) 50%,
    transparent 60%
  );
  transform: translateX(-60%) rotate(8deg);
  opacity:0;
  transition: transform 900ms ease, opacity 400ms ease;
  pointer-events:none;
}

.lux-rec-card:hover::before{
  transform: translateX(60%) rotate(8deg);
  opacity:.6;
}

/* Media */
.lux-rec-media{
  width:100%;
  aspect-ratio: 4 / 3;
  background: #f5f5f5;
  overflow:hidden;
}
.lux-rec-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform 450ms ease;
}
.lux-rec-card:hover .lux-rec-media img{ transform: scale(1.05); }

.lux-rec-body{ padding: 12px 12px 14px; }
.lux-rec-name{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.3;
  margin-bottom: 6px;
}
.lux-rec-price{ font-weight: 900; font-size: 13px; }

/* Mobile sizing */
@media (max-width: 520px){
  .lux-rec-card{ width: 72vw; max-width: 280px; }
}

/* Fade edges to hint horizontal scroll */
.lux-rec-row-wrap{
  position: relative;
}

.lux-rec-row-wrap::before,
.lux-rec-row-wrap::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width: 34px;
  pointer-events:none;
  z-index: 2;
}

.lux-rec-row-wrap::before{
  left:0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.lux-rec-row-wrap::after{
  right:0;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.lux-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.lux-chip{
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  background:#f5f5f5;
  border:1px solid #e5e5e5;
}
.lux-stars-buttons{
  display:flex;
  gap:4px;
}

.lux-star-btn{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  transition: transform .2s ease;
}

.lux-star-btn:hover{
  transform:scale(1.1);
}


/* If your product page background isn't pure white, change rgba(255,255,255,1) to match */

/* Everything else stays Poppins */
.hero-sub,
.lead,
.card-text,
.small,
.price,
.product-short,
.product-section p,
.lux-rating-text,
.lux-rating-count,
.nav-links a,
.cart-pill,
.btn,
input, select, textarea, button{
  font-family: var(--font-body);
}

/* Classy button text */
.btn,
.cart-pill{
  letter-spacing: 0.02em;
}

/* Slightly more elegant nav links */
.nav-links a{
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* =========================
   NAVBAR (Injected Partial)
   Left logo | Center links | Right actions
   (NO account/auth styles here)
========================= */
nav.site-nav{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  height:86px;
  background:#000;
  padding:0 6px;
  position:sticky;
  top:0;
  z-index:6000; /* keep above page content */
  transition: height 260ms ease, background 260ms ease, box-shadow 260ms ease, backdrop-filter 260ms ease;
}

.site-nav.is-scrolled{
  height:72px;
  background: rgba(0,0,0,0.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Left */
.nav-left{ display:flex; align-items:center; height:100%; justify-self:start; }
.nav-brand{ display:flex; align-items:center; gap:12px; height:100%; }

/* Logos */
.logo{ width:auto; object-fit:contain; display:block; }
.logo-wordmark{ max-height:56px; }
.logo-symbol{ max-height:34px; }

/* Home vs inner logo switching */
.home .logo-wordmark{ display:block; }
.home .logo-symbol{ display:none; }
.inner .logo-wordmark{ display:none; }
.inner .logo-symbol{ display:block; }

/* Center links */
.nav-links{
  justify-self:center;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:22px;
  margin:0;
  padding:0;
}
.nav-links a{
  color:#fff;
  font-size:14px;
  font-weight:500;
  opacity:.9;
}
.nav-links a:hover{ opacity:1; }
.nav-links a[aria-current="page"]{ opacity:1; position:relative; }
.nav-links a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:100%;
  height:2px;
  background: rgba(255,255,255,0.9);
  border-radius:999px;
}

/* Right */
.nav-right{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  position:relative;
  z-index:7000; /* ensures right actions clickable */
}

/* Cart pill */
.cart-pill{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#fff;
  border:1px solid rgba(255,255,255,0.25);
  padding:10px 16px 10px 38px;
  border-radius:999px;
  font-size:14px;
}
.cart-count{
  position:absolute;
  left:10px;
  top:50%;
  transform: translateY(-50%);
  min-width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#000;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

/* Hamburger (mobile) */
.hamburger{
  display:none;
  width:44px; height:44px;
  border:1px solid rgba(255,255,255,0.2);
  background:transparent;
  border-radius:12px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0;
}
.hamburger span{
  display:block;
  width:18px; height:2px;
  background:#fff;
  opacity:.9;
  border-radius:99px;
}

/* =========================
   HERO (2-slide)
========================= */
/* ===== HERO SLIDER (Luxury + Faster) ===== */

.hero{
  position:relative;
  height: 100vh;
  overflow:hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Video layer */
.hero-video-wrap{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-video{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: brightness(.85) contrast(1.05);
}


/* Keep text above everything */
.hero-content{
  position:relative;
  z-index:2;
}
/* slides */
.hero-slides{ position:absolute; inset:0; z-index:1; }

.hero-slides img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 22%;
  opacity:0;
  transform:scale(1.07);
  transition:
    opacity 1200ms cubic-bezier(.22,.61,.36,1),
    transform 6500ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.hero-slides img.is-active{ opacity:1; transform:scale(1); }

/* overlay */
.hero-overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,215,120,0.08), transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,0.82), rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.80));
}

/* content */
.hero-content{
  position:absolute;
  inset:0;                 /* take full hero space */
  display:flex;
  flex-direction:column;
  justify-content:center;  /* vertical center */
  align-items:center;      /* horizontal center */
  text-align:center;
  z-index:3;
  color:#ffffff;
  padding:0 20px;
}

/* Force text white + luxury shadow */
.hero-title, .hero-sub{
  color:#fff;
  text-shadow:0 14px 40px rgba(0,0,0,.8);
}

/* ===== Text Fade-Up Per Slide ===== */
/* start state */
.hero-content.is-animating .hero-title,
.hero-content.is-animating .hero-sub,
.hero-content.is-animating .hero-cta{
  opacity:0;
  transform: translateY(10px);
}

/* end state */
.hero-title, .hero-sub, .hero-cta{
  opacity:1;
  transform: translateY(0);
  transition:
    opacity 850ms cubic-bezier(.22,.61,.36,1),
    transform 850ms cubic-bezier(.22,.61,.36,1);
}

.hero-title{ font-size:clamp(32px, 4.5vw, 52px); font-weight:700; margin:0; letter-spacing:.5px; }
.hero-sub{ margin:16px auto 0; max-width:720px; font-size:16px; line-height:1.7; opacity:.95; }

.hero-cta{
  margin-top:26px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  border:1px solid transparent;
  transition: transform 160ms ease, opacity 160ms ease, box-shadow 200ms ease;
}
.btn-primary{ background:#fff; color:#000; }
.btn-secondary{ background:transparent; color:#fff; border-color: rgba(255,255,255,0.35); }
.btn:active{ transform: scale(0.98); }
.btn-primary:hover{ box-shadow: 0 14px 34px rgba(0,0,0,0.14); }

/* =========================
   SECTIONS + CARDS
========================= */
.section{ padding:48px 0; }
.section h1, .section h2{ font-size:30px; margin-bottom:8px; }
.lead{ color:#444; margin-bottom:20px; }

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}

.card{
  border:1px solid #eee;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  border-color:#e9e9e9;
}

.card-media{
  aspect-ratio: 4 / 3;
  background:#f5f5f5;
  overflow:hidden;
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform 500ms ease;
}
.card:hover .card-media img{ transform: scale(1.04); }

/* =========================
   CARD IMAGE SWAP (HOVER)
========================= */

.card-img-wrap{
  position:relative;
  overflow:hidden;
}

.card-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: opacity 300ms ease, transform 600ms ease;
}

.card:hover .card-img-wrap img{
  transform: scale(1.04);
}

.card-body{ padding:14px 14px 16px; }
.card-title{ font-weight:700; margin-bottom:6px; }
.card-text{ color:#555; font-size:14px; margin-bottom:10px; }
.card-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.price{ font-weight:800; }
.small{ font-size:13px; color:#666; }

.btn, button, [data-add-to-cart]{ cursor:pointer; }

/* =========================
   CATALOG LIVE ANIMATIONS
========================= */

/* Base: make cards feel premium on hover (you already have some, this enhances) */
.card{
  position: relative;
  transform: translateY(0);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease, opacity 240ms ease;
  will-change: transform, opacity;
}
.card:hover{
  transform: translateY(-8px);
}

/* Image “alive” motion */
.card-media{
  position:relative;
  overflow:hidden;
}
.card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(60% 60% at 50% 30%, rgba(255,255,255,0.10), transparent 60%);
  opacity:0;
  transition: opacity 300ms ease;
  pointer-events:none;
}
.card:hover .card-media::after{ opacity:1; }

.card-media img{
  transition: transform 650ms cubic-bezier(.22,.61,.36,1);
}
.card:hover .card-media img{
  transform: scale(1.08);
}

/* ===== Scroll reveal animation ===== */
.card.reveal{
  opacity: 0;
  transform: translateY(14px) scale(.99);
}
.card.reveal.is-in{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ===== Live re-render animation when filtering ===== */
.card.render-in{
  opacity: 0;
  transform: translateY(10px);
}
.card.render-in.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .card, .card-media img{ transition:none !important; }
  .card.reveal, .card.render-in{ opacity:1 !important; transform:none !important; }
}
/* Add-to-cart micro interaction */
[data-add-to-cart]{
  transition: transform 160ms ease, box-shadow 200ms ease, opacity 160ms ease;
  will-change: transform;
}
[data-add-to-cart]:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  opacity:.98;
}
[data-add-to-cart]:active{
  transform: translateY(0) scale(0.98);
  box-shadow:none;
}

/* shimmer placeholder */
.media-placeholder{
  width:100%;
  height:100%;
  background: linear-gradient(90deg, #f3f3f3, #f8f8f8, #f3f3f3);
  background-size:200% 100%;
  animation: shimmer 1.2s infinite linear;
}
.media-placeholder.big{ min-height:360px; }
@keyframes shimmer{ 0%{background-position:0% 0;} 100%{background-position:200% 0;} }

.muted{ color: rgba(0,0,0,.55); }

/* =========================
   FORMS
========================= */
.form{
  border:1px solid #eee;
  border-radius:18px;
  padding:18px;
}
.field{ display:grid; gap:8px; margin-bottom:14px; }
label{ font-weight:700; }
input, select, textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid #ddd;
  border-radius:12px;
  font:inherit;
}
textarea{ min-height:120px; resize:vertical; }

/* =========================
   CHECKOUT
========================= */
.checkout{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:18px;
}
.summary{
  border:1px solid #eee;
  border-radius:18px;
  padding:18px;
}
.summary ul{ list-style:none; display:grid; gap:10px; margin-top:12px; }
.summary li{ display:flex; justify-content:space-between; gap:10px; }
.hr{ height:1px; background:#eee; margin:14px 0; }

.checkout-item{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid #eee;
}
.checkout-left{ min-width:220px; }
.checkout-name{ font-weight:700; margin-bottom:4px; }
.checkout-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.qty{ display:inline-flex; align-items:center; gap:8px; }
.qty-btn{
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
  font-weight:800;
}
.qty-num{ min-width:18px; text-align:center; font-weight:700; }
.line-total{ font-weight:800; min-width:70px; text-align:right; }
.remove-btn{
  border:1px solid #ddd;
  background:#fff;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-size:13px;
}
.remove-btn:hover{ border-color:#bbb; }

/* =========================
   PAGE TRANSITIONS
========================= */
.has-transitions body{ opacity:0; }
body.page-in{ opacity:1; transition: opacity 220ms ease; }
body.page-out{ opacity:0; transition: opacity 220ms ease; }

/* =========================
   MOBILE MENU DRAWER
   IMPORTANT: doesn't block clicks unless open
========================= */
.menu-drawer{
  position:fixed;
  inset:0;
  display:none;
  z-index:8000;
  pointer-events:none; /* ✅ default: do not intercept */
}
.menu-drawer.show{
  display:block;
  pointer-events:auto; /* ✅ intercept only when open */
}
.menu-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.45); }
.menu-panel{
  position:absolute; top:0; left:0; height:100%;
  width: min(320px, 88vw);
  background:#fff;
  box-shadow: 20px 0 60px rgba(0,0,0,0.25);
  transform: translateX(-12px);
  animation: menuIn 220ms ease-out forwards;
  display:flex; flex-direction:column;
}
@keyframes menuIn{ to{ transform: translateX(0); } }
.menu-head{
  padding:16px;
  border-bottom:1px solid #eee;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.menu-links{ padding:12px 16px; display:grid; gap:10px; }
.menu-links a{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid #eee;
}

/* =========================
   PRODUCT PAGE (Layout + Gallery)
========================= */
.product-layout{
  width: min(1100px, 92vw);
  margin: 28px auto 80px;
  display: grid;
  grid-template-columns: minmax(0,520px) minmax(0,1fr);
  gap: 34px;
  align-items: start;
}
.product-info{ min-width:0; }
@media (max-width: 980px){
  .product-layout{
    grid-template-columns: 1fr;
  }
}
.product-gallery{
  position:sticky;
  top:110px;
  align-self:start;
  padding-bottom:16px;
}

/* PRODUCT MAIN IMAGE (premium, no crop) */
.product-main{
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
  overflow: hidden;

  /* fixed gallery frame like premium ecommerce */
  height: 460px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-main img{
  width:100%;
  height:100%;
  object-fit: contain;     /* ✅ no crop */
  object-position: center;
  padding: 18px;           /* premium spacing */
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 420ms ease,
    transform 1400ms cubic-bezier(.22,.61,.36,1),
    filter 700ms ease;

  will-change: opacity, transform;
  filter: saturate(1.02) contrast(1.02);
}
@media (max-width: 980px){
  .product-main{ height: 360px; }
}
.product-thumbs{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.thumb{
  width:72px;
  height:72px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  overflow:hidden;
  cursor:pointer;
  transition: transform 160ms ease, border-color 200ms ease, box-shadow 220ms ease;
}
.thumb:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.28);
}
.thumb.is-active{
  border-color: rgba(215,183,106,.8);
  box-shadow: 0 0 0 3px rgba(215,183,106,.18);
}
.thumb img{ width:100%; height:100%; object-fit:cover; }

/* Product text */
.product-title{
  letter-spacing: .5px;         /* NOT 5px */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.product-price{
  font-size: 22px;
  font-weight:600;
  margin-bottom: 10px 0;
}
.product-short{
  color: rgba(0,0,0,.70);
  margin-bottom: 12px;
}

.product-section{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(0,0,0,.08);
}
.product-section h3{
  font-size:14px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:10px;
  color: rgba(0,0,0,.75);
}
.product-section p{
  color: rgba(0,0,0,.72);
  line-height:1.8;
  font-size:14px;
}

.product-meta{
  margin-top:16px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  color: rgba(0,0,0,.75);
  box-shadow: 0 14px 34px rgba(0,0,0,.05);
}

/* =========================
   LUX ACTION BUTTONS (Product Page)
========================= */
:root{
  --lux-gold:#D7B76A;
  --lux-gold-deep:#B9923B;
}

.lux-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:14px 0 10px;
}

.lux-btn{
  height:50px;
  padding: 0 18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:600;
  font-size:14px;
  border:1px solid transparent;
  cursor:pointer;
  transition: transform 160ms ease, box-shadow 220ms ease, border-color 200ms ease, background 220ms ease, opacity 200ms ease;
  position:relative;
  overflow:hidden;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.lux-btn-primary{
  color:#000;
  background: linear-gradient(135deg, var(--lux-gold), #F3E2B3);
  border-color: rgba(185,146,59,.45);
  box-shadow: 0 16px 46px rgba(215,183,106,.18);
}

.lux-btn-primary::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(120deg,
    transparent 40%,
    rgba(255,255,255,.45) 50%,
    transparent 60%
  );
  transform: translateX(-40%) rotate(8deg);
  opacity: .55;
  transition: transform 700ms ease, opacity 300ms ease;
  pointer-events:none;
}
.lux-btn-primary:hover::before{
  transform: translateX(40%) rotate(8deg);
  opacity:.75;
}
.lux-btn-primary:hover{
  transform: translateY(-1px);
  box-shadow:
    0 22px 70px rgba(215,183,106,.24),
    0 0 0 1px rgba(215,183,106,.16);
}
.lux-btn-primary:active{
  transform: translateY(0) scale(.985);
  box-shadow: 0 12px 34px rgba(215,183,106,.18);
}

.lux-btn-icon{
  font-size:16px;
  transform: translateX(0);
  transition: transform 180ms ease;
}
.lux-btn-primary:hover .lux-btn-icon{
  transform: translateX(3px);
}

.lux-btn-ghost{
  background: rgba(0,0,0,.02);
  color: rgba(0,0,0,.82);
  border-color: rgba(0,0,0,.12);
}
.lux-btn-ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(215,183,106,.50);
  box-shadow: 0 18px 50px rgba(215,183,106,.12);
}
.lux-btn-ghost:active{
  transform: translateY(0) scale(.99);
}

@media (max-width: 520px){
  .lux-actions{ gap:10px; }
  .lux-btn{ width:100%; }
}

/* =========================
   SHOP CONTROLS (Search / Filter / Sort)
========================= */
.shop-controls{
  width:min(1100px, 92vw);
  margin:18px auto 16px;
  display:flex;
  gap:14px;
  align-items:end;
  justify-content:space-between;
  flex-wrap:wrap;
}

.shop-controls__left{ flex: 1 1 280px; }
.shop-controls__right{
  display:flex;
  gap:12px;
  align-items:end;
  flex-wrap:wrap;
}

.shop-field{ display:grid; gap:6px; min-width:180px; }

.shop-label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(0,0,0,0.55);
}

#shopSearch, #shopBrand, #shopCategory, #shopSort{
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.12);
  padding:0 12px;
  background: rgba(255,255,255,0.95);
  font:inherit;
  outline:none;
  transition: border-color 180ms ease, box-shadow 220ms ease;
}

#shopSearch:focus, #shopBrand:focus, #shopCategory:focus, #shopSort:focus{
  border-color: rgba(215,183,106,0.65);
  box-shadow: 0 0 0 4px rgba(215,183,106,0.14);
}

.shop-clear{
  height:44px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.14);
  background: rgba(0,0,0,0.02);
  font-weight:800;
  cursor:pointer;
  transition: transform 160ms ease, border-color 180ms ease, box-shadow 220ms ease;
}
.shop-clear:hover{
  transform: translateY(-1px);
  border-color: rgba(215,183,106,0.55);
  box-shadow: 0 16px 40px rgba(215,183,106,0.12);
}
.shop-clear:active{ transform: translateY(0) scale(0.99); }


  
/* =========================
   NAV AUTH (Luxury)
========================= */
.nav-auth{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-auth-link{
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .9;
}
.nav-auth-link:hover{ opacity: 1; }

.nav-auth-btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(215,183,106,0.45);
  background: rgba(215,183,106,0.14);
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform 180ms ease, box-shadow 220ms ease, background 180ms ease, border-color 180ms ease;
}
.nav-auth-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(215,183,106,0.65);
  box-shadow: 0 16px 40px rgba(215,183,106,0.14);
}
.nav-auth-btn--ghost{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}
.nav-auth-btn--ghost:hover{
  border-color: rgba(215,183,106,0.55);
}

/* Icon-only account pill (SVG) */
.account-pill{
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.03);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform 180ms ease, box-shadow 220ms ease, border-color 180ms ease;
}
.account-pill:hover{
  transform: translateY(-1px);
  border-color: rgba(215,183,106,0.55);
  box-shadow: 0 16px 40px rgba(215,183,106,0.12);
}

/* Make SVG look premium */
.account-pill svg{
  width:18px;
  height:18px;
  fill: rgba(255,255,255,0.92);
}

/* Ensure nothing overlays clicks */
nav.site-nav{ position: sticky; top:0; z-index: 6000; }
.menu-drawer{ pointer-events:none; }
.menu-drawer.show{ pointer-events:auto; }
/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkout{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  nav.site-nav{ height:72px; padding:0 10px; }
  .logo-wordmark{ max-height:42px; }
  .logo-symbol{ max-height:26px; }
  .nav-links{ display:none; }
  .hamburger{ display:inline-flex; }
  .grid{ grid-template-columns:1fr; }
}
.nav-auth-wrap{ position:relative; display:flex; align-items:center; gap:10px; }

.nav-greet{
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  opacity: .92;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dropdown */
.auth-menu{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  box-shadow: 0 22px 70px rgba(0,0,0,0.45);
  padding: 8px;
  display:none;
  z-index: 9001;
}
.auth-menu.show{ display:block; }

.auth-menu a,
.auth-menu button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.92);
  font: inherit;
  cursor:pointer;
  transition: transform 160ms ease, border-color 180ms ease, background 180ms ease;
}
.auth-menu a:hover,
.auth-menu button:hover{
  transform: translateY(-1px);
  border-color: rgba(215,183,106,0.50);
  background: rgba(255,255,255,0.05);
}
/* One-button auth icon */
.nav-auth{ display:flex; align-items:center; }

/* small dot indicator when logged out (optional) */
.auth-dot{
  position:absolute;
  top:8px; right:8px;
  width:8px; height:8px;
  border-radius:999px;
  background: var(--lux-gold);
  box-shadow: 0 0 14px rgba(215,183,106,.35);
}

/* Auth modal */
.auth-pop{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.55);
  z-index: 9500;
  padding:16px;
}
.auth-pop.show{ display:flex; }

.auth-card{
  width: min(520px, 92vw);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 26px 80px rgba(0,0,0,0.55);
  color:#fff;
  padding:18px;
  position:relative;
}

.auth-close{
  position:absolute;
  top:10px; right:12px;
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

.auth-head{
  margin-bottom: 12px;
}
.auth-title{
  font-family: var(--font-title);
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.92), rgba(215,183,106,0.90));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.auth-sub{ color: rgba(255,255,255,0.78); font-size:14px; line-height:1.6; }

.auth-tabs{
  display:flex;
  gap:10px;
  margin: 12px 0;
}
.auth-tab{
  height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
.auth-tab.is-active{
  border-color: rgba(215,183,106,0.55);
  background: rgba(215,183,106,0.14);
}

.auth-card .form{
  border:0;
  padding:0;
  background: transparent;
}
.auth-card label{ color: rgba(255,255,255,0.92); }
.auth-card input{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color:#fff;
}
.auth-card input::placeholder{ color: rgba(255,255,255,0.55); }

.auth-actions{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.auth-ghost{
  height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
.auth-gold{
  height:42px;
  padding:0 14px;
  border-radius:999px;
  background: var(--lux-gold);
  color:#000;
  font-weight:900;
  border:1px solid rgba(215,183,106,0.30);
  cursor:pointer;
}

/* =========================================================
   Add this to styles.css (FULL REQUIRED CSS for hover swaps)
========================================================= */

.product-main:hover img{
  transform: scale(1.03);
}

/* Card image swap wrapper (used for "You may also like") */
.card-img-wrap{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  /* premium card feel */
  height: 280px;                 /* adjust: 240–320 */
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}

.card-img-wrap::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 55%);
  transform: rotate(18deg);
  opacity: .6;
  pointer-events:none;
  transition: opacity 450ms ease, transform 650ms cubic-bezier(.22,.61,.36,1);
}

/* subtle edge fade like luxury storefronts */
.card-img-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 60%, rgba(0,0,0,0) 35%, rgba(0,0,0,.06) 120%);
  opacity:.35;
  pointer-events:none;
}

.card-img-wrap img{
  width: 100%;
  height: 100%;
  object-fit: contain;        /* ✅ no cropping */
  object-position: center;
  padding: 16px;              /* makes bottles look “premium” */
  transform: translateZ(0) scale(1);
  transition: opacity 260ms ease, transform 700ms cubic-bezier(.22,.61,.36,1), filter 500ms ease;
  will-change: transform, opacity;
  filter: saturate(1.02) contrast(1.02);
}
.card-img-wrap:hover img{
  transform: translateY(-2px) scale(1.06);
  filter: saturate(1.06) contrast(1.04);
}

/* hover: shine moves slightly */
.card-img-wrap:hover::before{
  opacity: .85;
  transform: rotate(18deg) translate3d(8%, -6%, 0);
}


/* smooth image swap support (your JS sets opacity) */
.card-img-wrap img{
  backface-visibility: hidden;
}

/* MOBILE: slightly smaller height */
@media (max-width: 520px){
  .card-img-wrap{ height: 240px; border-radius: 16px; }
  .card-img-wrap img{ padding: 14px; }
}

/* Horizontal scroll row + premium feel */
.lux-rec-row{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-behavior: smooth;
  padding: 6px;
}
.lux-rec-row::-webkit-scrollbar{height: 6px;}
.lux-rec-row::-webkit-scrollbar-thumb{
  background-color: #ddd;
  border-radius: 999px;
}

.lux-rec-card{
  flex: 0 0 auto;
  width: 220px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  overflow:hidden;
  scroll-snap-align: start;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.lux-rec-card:hover{
  transform: translateY(-6px);
  border-color: rgba(215,183,106,.55);
  box-shadow: 0 22px 60px rgba(0,0,0,.12);
}
.lux-rec-media{
  width:100%;
  aspect-ratio: 4 / 3;
  background:#f5f5f5;
  overflow:hidden;
}
.lux-rec-body{ padding: 12px 12px 14px; }
.lux-rec-name{ font-weight: 800; font-size: 13px; line-height: 1.3; margin-bottom: 6px; }
.lux-rec-price{ font-weight: 900; font-size: 13px; }

/* Scroll hint fade edges */
.lux-rec-row-wrap{
  position: relative;
}
.lux-rec-row-wrap::before,
.lux-rec-row-wrap::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width: 34px;
  pointer-events:none;
  z-index: 2;
}
.lux-rec-row-wrap::before{
  left:0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.lux-rec-row-wrap::after{
  right:0;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

html, body { height: auto; }

body { overflow-x: hidden; overflow-y: auto; }


/* Scrollbar (optional nice) */
.lux-rec-row{ scrollbar-width: thin; }
.lux-rec-row::-webkit-scrollbar{ height: 8px; }
.lux-rec-row::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.18); border-radius: 999px; }
.lux-rec-row::-webkit-scrollbar-track{ background: rgba(0,0,0,0.06); border-radius: 999px; }



@media (max-width: 520px){
  .lux-rec-card{ width: 72vw; max-width: 280px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .product-main img,
  .card-img-wrap img,
  .lux-rec-card{ transition:none !important; }
}

/* =========================
   PRODUCT PAGE OVERRIDES (place at END)
========================= */

/* Fix grid overflow / text cut */
.product-layout{
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
}
.product-info{ min-width:0; }

.product-title{
  letter-spacing:.5px;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Recommended ("You may also like") image centering - no crop */
.lux-rec-media{
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:#fff;
  overflow:hidden;
}

/* target ONLY the nested wrapper inside recommended cards */
.lux-rec-media .card-img-wrap{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* never crop recommended images */
.lux-rec-media .card-img-wrap img{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center;
  padding:8px;
}

/* prevent title cut in recommended cards */
.lux-rec-name{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ---------- FOOTER (LUX) ---------- */
.footer--lux{
  position: relative;
  z-index: 10;
  background: #07070a;
  color: rgba(255,255,255,.86);
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer--lux .container{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.footer-wrap{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0;
}

/* Social pills row */
.footer-social{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);

  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .2px;

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.social-link svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: .92;
}

.social-link span{
  line-height: 1;
}

.social-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(220,180,120,.35);
}

.social-link:focus-visible{
  outline: 2px solid rgba(220,180,120,.65);
  outline-offset: 3px;
}

/* Payments block */
.footer-payments{
  min-width: 280px;
  max-width: 420px;
  display: grid;
  gap: 10px;
}

.secure-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.78);
}

.secure-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(220,180,120,.95);
  box-shadow: 0 0 14px rgba(220,180,120,.35);
}

.pay-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pay-chip{
  appearance: none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);

  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.pay-chip:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(220,180,120,.35);
}

.pay-chip:focus-visible{
  outline: 2px solid rgba(220,180,120,.65);
  outline-offset: 3px;
}

.pay-mark{
  font-weight: 700;
  letter-spacing: .6px;
  font-size: 12px;
}

/* Bottom strip */
.footer-bottom--lux{
  padding: 12px 0 18px;
  color: rgba(255,255,255,.60);
  font-size: 12.5px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ---------- POPUP ---------- */
.pay-pop{
  position: fixed;
  inset: 0;
  display: none; /* hidden by default */
  place-items: center;

  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  z-index: 9999; /* must be above navbar */
  padding: 18px;
}

.pay-pop.is-open{
  display: grid;
}

.pay-pop-card{
  width: min(520px, 100%);
  background: #0b0b10;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
  padding: 18px 18px 16px;
  position: relative;
}

.pay-pop-close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.pay-pop-title{
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,.94);
  margin: 6px 40px 6px 0;
}

.pay-pop-desc{
  color: rgba(255,255,255,.74);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 4px;
}

.pay-pop-actions{
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.pay-pop-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: #0b0b10;
  background: rgba(220,180,120,.95);
  font-weight: 700;
  border: 1px solid rgba(220,180,120,.55);
}

.pay-pop-ok{
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}

/* ===== FORCE FIX: FOOTER LAYOUT + PAYMENTS VISIBILITY ===== */
.footer--lux .footer-wrap{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:18px !important;
  flex-wrap:wrap !important;
}

.footer--lux .footer-social{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}

/* Force payments to show (prevents accidental display:none / opacity:0) */
.footer--lux .footer-payments{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  min-width:280px !important;
  max-width:420px !important;
}

.footer--lux .secure-label{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

.footer--lux .pay-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}

/* If something is squeezing the footer */
.footer--lux{
  overflow:visible !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 820px){
  .footer-wrap{
    flex-direction: column;
    align-items: stretch;
  }
  .footer-payments{
    max-width: 100%;
    min-width: 0;
  }
}

/* ===============================
   Section Fade-In Animation
=================================*/

.fade-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Product cards stagger */
.grid .card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.grid .card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Only hide elements that YOU explicitly mark as reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* =========================================
   VELORIA NEXT-LEVEL LUX FOOTER
========================================= */

.v-footer{
  position:relative;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(212,175,55,0.08), transparent 60%),
              radial-gradient(900px 500px at 80% 30%, rgba(246,231,184,0.06), transparent 60%),
              #070707;
  color:#d6d6d6;
  padding:70px 0 0;
  border-top:1px solid rgba(255,255,255,.06);
  overflow:visible;
}

.v-footer-topline{
  height:1px;
  width:100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(246,231,184,.9),
    rgba(215,183,106,.9),
    rgba(185,146,59,.9),
    transparent
  );
  opacity:.6;
  filter: blur(.2px);
  animation: vGoldSweep 4.5s ease-in-out infinite;
}

@keyframes vGoldSweep{
  0%{ transform: translateX(-25%); opacity:.25; }
  50%{ transform: translateX(0%); opacity:.7; }
  100%{ transform: translateX(25%); opacity:.25; }
}

.v-footer-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:55px 28px 60px;
  display:grid;
  grid-template-columns: 1.3fr .7fr .7fr .9fr;
  gap:56px;
}

@media (max-width: 980px){
  .v-footer-wrap{ grid-template-columns: 1fr 1fr; gap:40px; }
}
@media (max-width: 640px){
  .v-footer-wrap{ grid-template-columns: 1fr; gap:34px; padding:45px 22px 55px; }
}
/* =========================================
   VELORIA NEXT-LEVEL LUX FOOTER
========================================= */

.v-footer{
  position:relative;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(212,175,55,0.08), transparent 60%),
              radial-gradient(900px 500px at 80% 30%, rgba(246,231,184,0.06), transparent 60%),
              #070707;
  color:#d6d6d6;
  padding:70px 0 0;
  border-top:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}

.v-footer-topline{
  height:1px;
  width:100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(246,231,184,.9),
    rgba(215,183,106,.9),
    rgba(185,146,59,.9),
    transparent
  );
  opacity:.6;
  filter: blur(.2px);
  animation: vGoldSweep 4.5s ease-in-out infinite;
}

@keyframes vGoldSweep{
  0%{ transform: translateX(-25%); opacity:.25; }
  50%{ transform: translateX(0%); opacity:.7; }
  100%{ transform: translateX(25%); opacity:.25; }
}

.v-footer-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:55px 28px 60px;
  display:grid;
  grid-template-columns: 1.3fr .7fr .7fr .9fr;
  gap:56px;
}

@media (max-width: 980px){
  .v-footer-wrap{ grid-template-columns: 1fr 1fr; gap:40px; }
}
@media (max-width: 640px){
  .v-footer-wrap{ grid-template-columns: 1fr; gap:34px; padding:45px 22px 55px; }
}

/* Brand block */
.v-foot-brand{
  position:relative;
}

.v-foot-mark{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
}

.v-foot-logo{
  font-size:28px;
  letter-spacing:7px;
  color:#d4af37;
  font-weight:600;
  text-transform:uppercase;
}

.v-foot-tag{
  font-size:12.5px;
  letter-spacing:1.7px;
  color:rgba(255,255,255,.78);
  text-transform:uppercase;
}

.v-foot-desc{
  font-size:14px;
  line-height:1.75;
  color:rgba(255,255,255,.62);
  max-width:420px;
  margin:0 0 20px;
}

/* Titles + links */
.v-foot-title{
  font-size:12.5px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  margin:6px 0 18px;
}

.v-foot-links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.v-foot-links a{
  color:rgba(255,255,255,.62);
  text-decoration:none;
  font-size:14px;
  letter-spacing:.2px;
  transition: transform .25s ease, color .25s ease, opacity .25s ease;
  display:inline-flex;
  align-items:center;
  gap:10px;
  position:relative;
}

.v-foot-links a::after{
  content:"";
  height:1px;
  width:0%;
  background:linear-gradient(90deg, rgba(246,231,184,.9), rgba(185,146,59,.9));
  position:absolute;
  left:0;
  bottom:-6px;
  transition: width .3s ease;
  opacity:.9;
}

.v-foot-links a:hover{
  color:#d4af37;
  transform: translateX(2px);
}
.v-foot-links a:hover::after{ width:100%; }

/* Newsletter */
.v-foot-news{
  margin-top:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:18px 16px;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(6px);
}

.v-foot-label{
  display:block;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  margin-bottom:10px;
}

.v-foot-inputRow{
  display:flex;
  gap:10px;
}

.v-foot-inputRow input{
  flex:1;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.35);
  color:#fff;
  padding:0 14px;
  outline:none;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.v-foot-inputRow input::placeholder{
  color: rgba(255,255,255,.45);
}

.v-foot-inputRow input:focus{
  border-color: rgba(212,175,55,.55);
  box-shadow: 0 0 0 4px rgba(212,175,55,.10);
}

.v-foot-btn{
  height:44px;
  border-radius:14px;
  border:1px solid rgba(212,175,55,.35);
  background: linear-gradient(135deg, rgba(246,231,184,.18), rgba(212,175,55,.10));
  color:#fff;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  white-space:nowrap;
}

.v-foot-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(212,175,55,.65);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

.v-foot-btnIcon{
  display:inline-flex;
  transform: translateX(0);
  transition: transform .25s ease;
}
.v-foot-btn:hover .v-foot-btnIcon{ transform: translateX(2px); }

.v-foot-hint{
  margin-top:10px;
  font-size:12.5px;
  color:rgba(255,255,255,.52);
}

/* Social */
.v-foot-social {
 opacity: 1 !important;
 visibility:visible !important;
}

.v-social{
  display: inline-flex !important;
  align-items: center !important;
  width:42px !important;
  height:42px !important;
  border: 1px solid rgba(255, 255, 255,.12) !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .12) !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .03) !important;
  z-index: 50 !important;
}
.v-social svg{
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.v-social:hover{
  transform: translateY(-2px);
  border-color: rgba(212,175,55,.55);
  color:#d4af37;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}

/* Contact */
.v-foot-contact{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:6px;
}

.v-foot-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.v-foot-k{
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  white-space:nowrap;
}

.v-foot-v{
  font-size:14px;
  color:rgba(255,255,255,.75);
  text-decoration:none;
  text-align:right;
}

a.v-foot-v:hover{ color:#d4af37; }

/* Payments */
.v-foot-pay{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.v-pay-chip{
  font-size:11px;
  letter-spacing:2px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.72);
}

/* Bottom bar */
.v-footer-bottom{
  border-top:1px solid rgba(255,255,255,.06);
  padding:18px 0;
  background: rgba(0,0,0,.35);
}

.v-bottom-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-size:13px;
  color:rgba(255,255,255,.55);
}

@media (max-width: 640px){
  .v-bottom-wrap{ flex-direction:column; align-items:flex-start; }
}

.v-backTop{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:rgba(255,255,255,.75);
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  transition: transform .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.v-backTop:hover{
  transform: translateY(-1px);
  border-color: rgba(212,175,55,.55);
  color:#d4af37;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

.v-social:hover svg{
  transform: translateY(-2px);
  opacity: 1;}

.v-social svg path{
  stroke-width: 1.6;
}

/* =========================
   Veloria Footer (Luxury)
   ========================= */

   .v-footer{
    background:
      radial-gradient(1200px 420px at 18% 0%, rgba(241,208,73,.10), transparent 62%),
      linear-gradient(180deg, #070707, #050505);
    border-top: 1px solid rgba(241,208,73,.18);
    color: rgba(255,255,255,.86);
    padding: 56px 24px 18px;
  }
  
  .v-footer-inner{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 52px;
    flex-wrap: wrap;
  }
  
  .v-foot-left{
    flex: 1 1 360px;
    min-width: 300px;
  }
  
  .v-foot-right{
    flex: 1 1 560px;
    min-width: 320px;
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 28px;
  }
  
  .v-foot-logoWrap{
    display: inline-block;
    margin-bottom: 12px;
  }
  
  .v-foot-logo{
    height: 28px;
    width: auto;
    display: block;
    filter: drop-shadow(0 10px 26px rgba(241,208,73,.10));
  }
  
  .v-foot-sub{
    margin: 0 0 18px;
    line-height: 1.55;
    color: rgba(255,255,255,.70);
    max-width: 420px;
  }
  
  .v-foot-form{
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 16px 0 12px;
    max-width: 540px;
  }
  
  .v-foot-input{
    flex: 1;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: #fff;
    outline: none;
  }
  
  .v-foot-input::placeholder{
    color: rgba(255,255,255,.45);
  }
  
  .v-foot-input:focus{
    border-color: rgba(241,208,73,.35);
    box-shadow: 0 0 0 4px rgba(241,208,73,.10);
  }
  
  .v-foot-btn{
    height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(241,208,73,.35);
    background: linear-gradient(180deg, rgba(241,208,73,.22), rgba(241,208,73,.08));
    color: rgba(255,255,255,.92);
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  
  .v-foot-btn:hover{
    transform: translateY(-1px);
    border-color: rgba(241,208,73,.55);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  
  
  
  .v-social i{
    font-size: 16px;
    line-height: 1;
  }
  
  
  .v-foot-note{
    margin-top: 10px;
    color: rgba(255,255,255,.45);
    font-size: 12px;
  }
  
  .v-foot-title{
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    margin-bottom: 12px;
  }
  
  .v-foot-link{
    display: block;
    margin: 8px 0;
    color: rgba(255,255,255,.68);
    text-decoration: none;
    transition: color .15s ease;
  }
  
  .v-foot-link:hover{
    color: rgba(241,208,73,.95);
  }
  
  .v-foot-muted{
    display: block;
    margin-top: 10px;
    color: rgba(255,255,255,.45);
    font-size: 12px;
  }
  
  .v-foot-bottom{
    max-width: 1200px;
    margin: 22px auto 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.55);
    font-size: 12px;
  }
  
  .v-foot-mini{
    color: rgba(255,255,255,.62);
    text-decoration: none;
  }
  
  .v-foot-mini:hover{
    color: rgba(241,208,73,.95);
  }
  
  .v-foot-dot{ opacity: .55; }
  
  /* Responsive */
  @media (max-width: 900px){
    .v-foot-right{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  }
  
  @media (max-width: 560px){
    .v-foot-right{ grid-template-columns: 1fr; }
    .v-foot-form{
      flex-direction: column;
      align-items: stretch;
    }
  }
  .v-foot-social{
    display:flex;
    gap:10px;
    margin-top:14px;
  }
  
  .v-social{
    width:40px;
    height:40px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color:#fff;                 /* makes SVG visible */
  }
  
  .v-social svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    display:block;
  }
  
  .v-social:hover{
    color:#E3D6C7;
    transform: translateY(-2px);
    transition:.25s ease;
  }
  .v-social.tiktok svg{
    fill: currentColor;
    stroke: none;
  }

  .v-footer-inner{
    max-width: 1200px;
    margin: 0 auto;
    display: grid !important;
    grid-template-columns: 420px 1fr !important;
    gap: 48px;
    align-items: start;
  }
  
  .v-foot-left{
    min-width: 0;
  }
  
  .v-foot-right{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(140px, 1fr)) !important;
    gap: 28px;
    min-width: 0;
  }
  
  @media (max-width: 900px){
    .v-footer-inner{
      grid-template-columns: 1fr !important;
    }
  
    .v-foot-right{
      grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    }
  }
  .v-foot-social{
    display:flex;
    gap:12px;
    margin-top:16px;
    }
    
    .v-social{
    width:40px;
    height:40px;
    min-width:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.04);
    color:#fff;
    font-size:16px;
    text-decoration:none;
    transition:all .25s ease;
    }
    
    .v-social:hover{
    background:#d4af37;
    color:#000;
    border-color:#d4af37;
    }
    /* ===== LUXURY ADD TO CART BUTTON ===== */

.add-to-cart{
  background: linear-gradient(135deg,#e8c768,#c9a94b);
  color:#000;
  border:none;
  padding:10px 18px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.3px;
  cursor:pointer;
  transition:all .25s ease;
  box-shadow:0 2px 8px rgba(212,175,55,.25);
}

.add-to-cart:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(212,175,55,.45);
  background:linear-gradient(135deg,#f2d77a,#d4af37);
}

/* optional soft shine */
.add-to-cart::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:10px;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
  );
  opacity:0;
  transition:opacity .25s ease;
}

.add-to-cart:hover::after{
  opacity:.6;
}
/* ===== LUXURY WISHLIST BUTTON ===== */

.wishlist-btn{
  background:transparent;
  border:1.5px solid #d4af37;
  color:#d4af37;
  padding:9px 16px;
  border-radius:10px;
  font-weight:500;
  font-size:13px;
  letter-spacing:.3px;
  cursor:pointer;
  transition:all .25s ease;
}

.wishlist-btn:hover{
  background:#d4af37;
  color:#000;
  box-shadow:0 4px 12px rgba(212,175,55,.35);
}

/* heart icon spacing */
.wishlist-btn i{
  margin-right:6px;
  font-size:13px;
}

/* ===== LUXURY PRODUCT CARD BUTTONS ===== */

.card-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Wishlist button */
.wish-btn{
  background: transparent !important;
  border: 1.5px solid #d4af37 !important;
  color: #d4af37 !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: .2px !important;
  cursor: pointer !important;
  transition: all .25s ease !important;
  box-shadow: none !important;
}

.wish-btn:hover{
  background: #d4af37 !important;
  color: #000 !important;
  box-shadow: 0 4px 12px rgba(212,175,55,.35) !important;
}

.wish-btn .wish-heart{
  margin-right: 6px;
  font-size: 13px;
}

.wish-btn.is-on{
  background: rgba(212,175,55,.12) !important;
  border-color: #d4af37 !important;
  color: #d4af37 !important;
}

/* Add to cart button */
.btn.btn-primary,
button[data-add-to-cart]{
  position: relative;
  background: linear-gradient(135deg,#e8c768,#c9a94b) !important;
  color: #000 !important;
  border: none !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: .3px !important;
  cursor: pointer !important;
  transition: all .25s ease !important;
  box-shadow: 0 2px 8px rgba(212,175,55,.25) !important;
}

.btn.btn-primary:hover,
button[data-add-to-cart]:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(212,175,55,.45) !important;
  background: linear-gradient(135deg,#f2d77a,#d4af37) !important;
}
/* PRODUCT PAGE WISHLIST BUTTON */
button:has(span.wish-heart),
button:has(.wish-heart),
button:has(.heart),
button.wish-btn,
button[data-wishlist]{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: transparent;
  border:1.5px solid #d4af37;
  color:#b9923b;
  padding:8px 14px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:all .25s ease;
}

/* hover luxury effect */
button:has(span.wish-heart):hover,
button:has(.wish-heart):hover,
button.wish-btn:hover{
  background:linear-gradient(135deg,#e8c768,#c9a94b);
  color:#000;
  box-shadow:0 6px 16px rgba(212,175,55,.35);
  transform:translateY(-1px);
}
.add-to-cart{
  position:relative;
  overflow:hidden;
}

.add-to-cart::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
  );
  opacity:0;
  transition:opacity .25s ease;
}

.add-to-cart:hover::before{
  opacity:.6;
}
.wish-btn .wish-heart{
  transition:transform .25s ease;
}

.wish-btn.is-on .wish-heart{
  transform:scale(1.25);
}
.product-price{
  font-size:26px;
  font-weight:700;
  color:#111;
  letter-spacing:.4px;
}

/* ===== PREMIUM WHATSAPP WIDGET ===== */

.wa-widget{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  animation: waEnter .7s ease both;
}

.wa-bubble{
  background: rgba(17,17,17,.96);
  color: #fff;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
  white-space: nowrap;
  transform: translateX(8px);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  border: 1px solid rgba(255,255,255,.08);
}

.wa-btn{
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  font-size: 27px;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  animation: waFloat 2.2s ease-in-out infinite;
}

.wa-widget:hover .wa-bubble{
  opacity: 1;
  transform: translateX(0);
}

.wa-widget:hover .wa-btn{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 18px 34px rgba(0,0,0,.28);
  filter: saturate(1.05);
}

@keyframes waFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

@keyframes waEnter{
  from{
    opacity: 0;
    transform: translateY(18px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px){
  .wa-widget{
    right: 16px;
    bottom: 16px;
  }

  .wa-bubble{
    display: none;
  }

  .wa-btn{
    width: 54px;
    height: 54px;
    font-size: 24px;
  }
}
.wa-widget{
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

.wa-btn{
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  color: #fff !important;
  font-size: 28px !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.22) !important;
}

.wa-bubble{
  background: rgba(17,17,17,.96) !important;
  color: #fff !important;
  padding: 11px 14px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

body,
main,
.section,
.v-footer,
.v-footer-inner{
  overflow: visible !important;
}

.routine-results-list{
  display:grid;
  gap:16px;
  margin-top:18px;
}

.routine-result-item{
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:14px;
  background:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,.04);
}

.routine-result-step{
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#b9923b;
  margin-bottom:10px;
}

.routine-result-img{
  width:100%;
  height:160px;
  object-fit:contain;
  margin-bottom:12px;
}

.routine-result-name{
  font-weight:700;
  font-size:16px;
  margin-bottom:6px;
}

.routine-result-desc{
  font-size:14px;
  color:#666;
  line-height:1.5;
  margin-bottom:10px;
}

.routine-result-price{
  font-weight:700;
  font-size:18px;
  color:#111;
}

.routine-result-block{
  margin-top: 26px;
}

.routine-results-list{
  display: grid;
  gap: 16px;
  margin-top: 14px;
}

.routine-result-item{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}

.routine-result-step{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #b9923b;
  margin-bottom: 10px;
}

.routine-result-img{
  width: 100%;
  height: 170px;
  object-fit: contain;
  margin-bottom: 12px;
}

.routine-result-name{
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
}

.routine-result-desc{
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 10px;
}

.routine-result-price{
  font-weight: 700;
  font-size: 18px;
  color: #111;
  margin-bottom: 10px;
}

.routine-result-reasons{
  margin: 0;
  padding-left: 18px;
  color: #444;
  font-size: 13px;
  line-height: 1.6;
}

.routine-total-box{
  margin-top: 28px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(212,175,55,.22);
  background: linear-gradient(180deg, rgba(255,248,230,.75), rgba(255,255,255,.96));
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}

.routine-total-label{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8c6b1f;
  margin-bottom: 8px;
}

.routine-total-price{
  font-size: 30px;
  font-weight: 700;
  color: #111;
  margin-bottom: 14px;
}

body.inner {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.inner main {
  flex: 1;
}

#siteFooter {
  margin-top: auto;
}

.hero{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero-video-wrap{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.hero-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
}

.hero-slides,
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-slides img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-slides img.is-active{
  opacity: 1;
}

.hero-overlay{
  background:
    linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.45)),
    radial-gradient(circle at 50% 35%, rgba(212,175,55,.10), transparent 40%);
  pointer-events: none;
}

.hero-content{
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  color: #fff;
  padding: 120px 20px 80px;
}

.hero-title{
  font-size: clamp(42px, 6vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  color: #fff;
  text-shadow: 0 6px 28px rgba(0,0,0,.28);
}

.hero-sub{
  max-width: 760px;
  margin: 0 auto 28px;
  font-size: clamp(15px, 2vw, 21px);
  line-height: 1.6;
  color: rgba(255,255,255,.92);
}

.hero-cta{
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.22));
  z-index: 1;
  pointer-events: none;
}
.hero-title,
.hero-sub{
  animation: heroFadeUp 0.9s ease both;
}

.hero-sub{
  animation-delay: 0.15s;
}

.hero-cta{
  animation: heroFadeUp 0.9s ease both;
  animation-delay: 0.3s;
}

/* =========================
   VELORIA TOAST FINAL
========================= */
.toast{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  width: auto !important;
  max-width: max-content !important;
  min-width: 0 !important;
  height: auto !important;

  padding: 7px 12px;
  border-radius: 10px;

  background: rgba(20,20,20,.94);
  color: #f4e7b2;
  border: 1px solid rgba(212,175,55,.35);

  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;

  box-shadow: 0 8px 18px rgba(0,0,0,.22);

  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(.98);
  transition: opacity .25s ease, transform .25s ease;
}

.toast.show{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast-icon{
  color: #d4af37;
  font-size: 12px;
  line-height: 1;
  flex: 0 0 auto;
}

@media (max-width: 600px){
  .toast{
    top: 12px;
    right: 12px;
    left: auto;
    max-width: calc(100vw - 24px) !important;
    padding: 7px 11px;
    font-size: 11px;
    white-space: nowrap;
  }
}

/* ===== FORCE NAV LINK ANIMATION ===== */

.menuLink{
  position: relative !important;
  display: inline-block !important;
  text-decoration: none !important;
  transition:
    color 0.28s ease,
    transform 0.28s ease,
    opacity 0.28s ease !important;
}

.menuLink::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -6px !important;
  width: 0 !important;
  height: 2px !important;
  background: #d7b76a !important;
  border-radius: 999px !important;
  transform: translateX(-50%) !important;
  transition: width 0.3s ease !important;
}

.menuLink:hover{
  color: #f3d98a !important;
  transform: translateY(-2px) !important;
}

.menuLink:hover::after{
  width: 100% !important;
}



@keyframes heroFadeUp{
  from{
    opacity: 0;
    transform: translateY(18px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

  @media (max-width: 560px){
    .v-foot-right{
      grid-template-columns: 1fr !important;
    }
  }

  /* ===== FIX PRODUCT PAGE MOBILE ===== */

.product-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:start;
}

.product-details{
  min-width:0;
}

.product-details h1{
  writing-mode:horizontal-tb !important;
  white-space:normal;
  word-break:normal;
  line-height:1.1;
  font-size:clamp(28px,4vw,44px);
}

.product-gallery img{
  width:100%;
  height:auto;
  display:block;
}

@media (max-width:900px){

  .product-layout{
    grid-template-columns:1fr;
    gap:24px;
  }

  .product-details h1{
    font-size:30px;
  }

}
/* ===== PRODUCT PAGE MOBILE SCROLL FIX ===== */

@media (max-width: 900px) {
  .product-layout,
  .product-page,
  .product-main {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    align-items: start !important;
  }

  .product-gallery,
  .product-images,
  .product-left,
  .product-main-image,
  .product-media {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    z-index: 1 !important;
  }

  .product-details,
  .product-info,
  .product-right {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    z-index: 2 !important;
  }

  .product-gallery img,
  .product-main-image img,
  .product-images img,
  #mainProductImage {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  .product-details h1,
  .product-info h1,
  .product-title {
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
}

.wishlist-btn{
  transition: transform .18s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

.wishlist-btn.is-on,
.wishlist-btn.active{
  background:#d7b76a;
  color:#111;
  border-color:#d7b76a;
}

.wishlist-btn.bump{
  animation:wishPop .28s ease;
}

@keyframes wishPop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.16); }
  100%{ transform:scale(1); }
}

/* ===== Wishlist nav ===== */
.nav-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.wishlist-link{
  text-decoration:none;
  color:rgba(255,255,255,.92);
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}

.wishlist-link:hover{
  transform:translateY(-2px);
  border-color:rgba(215,183,106,.45);
  background:rgba(255,255,255,.04);
}

.wish-nav-heart{
  font-size:16px;
  line-height:1;
}

#wishlistCount{
  min-width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#d7b76a;
  color:#111;
  font-size:12px;
  font-weight:800;
}

/* ===== Wishlist page ===== */
.wishlist-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:24px;
  margin-top:24px;
}

.wishlist-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.wishlist-btn{
  border:1px solid rgba(255,255,255,.18);
  background:transparent;
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  transition:all .25s ease;
  font:inherit;
}

.wishlist-btn.is-on,
.wishlist-btn.active{
  background:#d7b76a;
  color:#111;
  border-color:#d7b76a;
}

.wishlist-btn.bump{
  animation:wishPop .28s ease;
}

@keyframes wishPop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.14); }
  100%{ transform:scale(1); }
}

/* ===== Footer social pills fix ===== */
.footer-social,
.social-pills,
.v-social,
.v-footer-social{
  display:flex !important;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.footer-social a,
.social-pills a,
.v-social a,
.v-footer-social a{
  width:42px;
  height:42px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.92);
  text-decoration:none;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}

.footer-social a:hover,
.social-pills a:hover,
.v-social a:hover,
.v-footer-social a:hover{
  transform:translateY(-2px);
  border-color:rgba(215,183,106,.45);
  background:rgba(255,255,255,.06);
}

/* mobile */
@media (max-width: 900px){
  .wish-nav-text{
    display:none;
  }

  .nav-right{
    gap:8px;
  }

  .wishlist-link{
    padding:10px 12px;
  }
}