*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --orange:#E07B2A;
  --orange-dark:#C05E10;
  --orange-light:#F5A855;
  --orange-a11y:#B35410; /* same hue family as --orange, darkened to meet WCAG AA 4.5:1 for small text on cream — used only where --orange itself would fail contrast as text */
  --cream:#FDFAF4;
  --cream2:#F7F2E8;
  --dark:#1A1208;
  --dark2:#2C1F0A;
  --text:#2D2010;
  --text2:#6B5A3E;
  --text3:#9E8C72;
  --border:#E8DCC8;
  --white:#FFFFFF;
  --green:#22C55E;
  --header-h:125px; /* fixed top-bar + nav height, used to clear section headings */
}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--cream);color:var(--text);overflow-x:hidden;}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(253,250,244,0.95);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0.6rem 3rem;
}
.nav-brand{display:flex;align-items:center;gap:0.7rem;text-decoration:none;}
.nav-logo-img{
  width:48px;height:48px;object-fit:contain;display:block;
  filter:drop-shadow(0 1px 2px rgba(192,94,16,0.18));
}
/* ── Premium gold shimmer ── */
.logo-shimmer{
  position:relative;display:inline-block;overflow:hidden;border-radius:50%;
  line-height:0;
}
.logo-shimmer::after{
  content:"";position:absolute;top:-20%;left:-60%;width:50%;height:140%;
  background:linear-gradient(115deg,
    transparent 0%,
    rgba(255,225,160,0) 35%,
    rgba(255,235,180,0.85) 50%,
    rgba(255,225,160,0) 65%,
    transparent 100%);
  transform:skewX(-18deg);
  pointer-events:none;
  mix-blend-mode:screen;
  animation:logoShimmer 4.5s ease-in-out infinite;
  animation-delay:0s;
}
@keyframes logoShimmer{
  0%   { left:-60%; opacity:0; }
  8%   { opacity:1; }
  35%  { left:120%; opacity:1; }
  40%  { opacity:0; }
  100% { left:120%; opacity:0; }
}
/* Synchronised glow breath - no delay */
.logo-shimmer img{
  animation:logoBreath 4.5s ease-in-out infinite;
  animation-delay:0s;
  will-change:filter,transform;
}
@keyframes logoBreath{
  0%,30%,100%{
    filter:drop-shadow(0 1px 2px rgba(192,94,16,0.18))
           drop-shadow(0 0 0 rgba(245,168,85,0));
  }
  15%{
    filter:drop-shadow(0 1px 2px rgba(192,94,16,0.18))
           drop-shadow(0 0 14px rgba(245,168,85,0.55));
  }
}
.logo-shimmer:hover::after{animation-duration:1.8s;}
@media (prefers-reduced-motion: reduce){
  .logo-shimmer::after,.logo-shimmer img{animation:none;}
}
.nav-brand-name{font-family:'Playfair Display',serif;font-weight:600;font-size:1.15rem;color:var(--text);letter-spacing:0.02em;}
.nav-links{display:flex;gap:2rem;list-style:none;}
.nav-links a{
  font-size:0.85rem;font-weight:500;color:var(--text2);
  text-decoration:none;transition:color 0.2s;padding:0.3rem 0;
  position:relative;
}
.nav-links a:hover{color:var(--orange);}
.nav-links a.active{color:var(--text);}
.nav-phone{
  display:flex;align-items:center;gap:0.4rem;
  font-size:0.83rem;font-weight:500;color:var(--text2);
}
.nav-phone svg{width:16px;height:16px;stroke:var(--orange);}

/* SECTIONS */
section{display:none;}
section.active{display:block;}

/* ── HOME ── */
#home{
  min-height:100vh;padding-top:65px;
  background:var(--cream);
  position:relative;overflow:hidden;
}
.hero-bg-circles{position:absolute;inset:0;pointer-events:none;}
.hero-circle{
  position:absolute;border-radius:50%;
  border:1px solid rgba(224,123,42,0.12);
  background:rgba(224,123,42,0.03);
}
.hero-circle.c1{width:350px;height:350px;left:-80px;bottom:80px;}
.hero-circle.c2{width:250px;height:250px;right:-40px;top:120px;}
.hero-dot{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:rgba(224,123,42,0.35);
}
.hero-dot.d1{top:22%;left:38%;}
.hero-dot.d2{top:60%;right:18%;}
.hero-dot.d3{top:38%;right:35%;}

.hero-content{
  max-width:680px;margin:0 auto;text-align:center;
  padding:5rem 2rem 3rem;position:relative;z-index:1;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:0.5rem;
  border:1.5px solid rgba(224,123,42,0.4);border-radius:999px;
  padding:0.5rem 1.3rem;font-size:0.78rem;color:var(--text2);
  margin-bottom:2rem;
  background:linear-gradient(135deg,rgba(245,168,85,0.12),rgba(224,123,42,0.06));
  box-shadow:0 2px 12px rgba(224,123,42,0.1);
  animation:badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{box-shadow:0 2px 12px rgba(224,123,42,0.1);}
  50%{box-shadow:0 4px 20px rgba(224,123,42,0.25);}
}
.hero-badge svg{width:14px;height:14px;stroke:var(--orange);fill:none;}
.hero-h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.6rem,5vw,4rem);font-weight:700;
  line-height:1.15;margin-bottom:0.3rem;color:var(--text);
}
.hero-h1-orange{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.6rem,5vw,4rem);font-weight:700;font-style:italic;
  color:var(--orange);line-height:1.15;display:block;margin-bottom:1.6rem;
}
.hero-desc{
  font-size:0.95rem;color:var(--text2);line-height:1.8;
  max-width:52ch;margin:0 auto 2.5rem;
}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:4rem;}
.btn-orange{
  display:inline-flex;align-items:center;gap:0.5rem;
  background:var(--orange);color:#fff;border:none;
  padding:0.85rem 2rem;border-radius:999px;font-size:0.88rem;font-weight:500;
  cursor:pointer;transition:background 0.2s,transform 0.15s;text-decoration:none;
}
.btn-orange:hover{background:var(--orange-dark);transform:translateY(-1px);}
.btn-orange svg{width:16px;height:16px;stroke:#fff;}
.btn-outline{
  display:inline-flex;align-items:center;gap:0.5rem;
  background:transparent;color:var(--text);
  border:1.5px solid var(--border);
  padding:0.85rem 2rem;border-radius:999px;font-size:0.88rem;font-weight:500;
  cursor:pointer;transition:border-color 0.2s,color 0.2s;text-decoration:none;
}
.btn-outline:hover{border-color:var(--orange);color:var(--orange);}

/* ── COLLECTIONS ── */
#collections{padding:80px 0 60px;padding-top:var(--header-h);}
.section-header{text-align:center;padding:0 2rem 2.5rem;}
.section-title{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;color:var(--text);margin-bottom:0.8rem;}
.section-desc{font-size:0.9rem;color:var(--text2);line-height:1.8;max-width:56ch;margin:0 auto;}

.filter-tabs{
  display:flex;justify-content:center;gap:0.6rem;flex-wrap:wrap;
  padding:0 2rem 2.5rem;
}
.filter-btn{
  padding:0.5rem 1.3rem;border-radius:999px;font-size:0.83rem;font-weight:500;
  border:1.5px solid var(--border);background:var(--white);color:var(--text2);
  cursor:pointer;transition:all 0.2s;
}
.filter-btn.active,.filter-btn:hover{background:var(--orange);color:#fff;border-color:var(--orange);}

/* Metal Category Tabs */
.metal-tabs{
  display:flex;justify-content:center;gap:0.8rem;flex-wrap:wrap;
  padding:0 2rem 1.2rem;
}
.metal-btn{
  display:flex;align-items:center;gap:0.45rem;
  padding:0.55rem 1.6rem;border-radius:999px;font-size:0.85rem;font-weight:600;
  border:2px solid transparent;cursor:pointer;transition:all 0.22s;
  letter-spacing:0.03em;
}
.metal-btn .metal-icon{font-size:1rem;}
.metal-btn.gold-btn{background:linear-gradient(135deg,#C9A227,#B8860B);color:#fff;border-color:#B8860B;}
.metal-btn.silver-btn{background:linear-gradient(135deg,#d8d8d8,#a8a8a8);color:#2a2a2a;border-color:#888;}
.metal-btn.diamond-btn{background:linear-gradient(135deg,#c9e8ff,#90c8f8);color:#003060;border-color:#4096d8;}
.metal-btn.all-metal-btn{background:var(--white);color:var(--text2);border-color:var(--border);}
.metal-btn.active,.metal-btn:hover{opacity:0.88;transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,0.13);}
.metal-btn.all-metal-btn.active,.metal-btn.all-metal-btn:hover{background:var(--orange);color:#fff;border-color:var(--orange);}

/* Metal badge on product card */
.product-metal-badge{
  display:inline-block;padding:0.18rem 0.65rem;border-radius:999px;
  font-size:0.7rem;font-weight:700;letter-spacing:0.05em;margin-bottom:0.35rem;
}
.badge-gold{background:#fff3c4;color:#7a5200;}
.badge-silver{background:#eaeaea;color:#3a3a3a;}
.badge-diamond{background:#ddf0ff;color:#004a85;}

.product-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:1.5rem;padding:0 3rem 3rem;
}
.product-card{
  background:var(--white);border-radius:16px;overflow:hidden;
  border:1px solid var(--border);transition:box-shadow 0.25s,transform 0.2s;
}
.product-card:hover{box-shadow:0 8px 32px rgba(224,123,42,0.12);transform:translateY(-3px);}
.product-card.nav-card{cursor:pointer;}
.product-card.nav-card .product-cta{pointer-events:none;}
.product-card.nav-card:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.product-img{
  height:220px;background:#E8DCC8;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.product-img svg{width:80px;height:80px;opacity:0.3;}
.product-badge{
  position:absolute;top:12px;right:12px;
  background:var(--orange);color:#fff;
  font-size:0.7rem;font-weight:600;padding:0.3rem 0.75rem;border-radius:999px;
  letter-spacing:0.03em;
}
.img-dots{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;
}
.img-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.6);}
.img-dot.active{background:var(--orange);}
.product-body{padding:1.1rem 1.2rem 1.3rem;}
.product-cat{font-size:0.72rem;font-weight:600;color:var(--orange);margin-bottom:0.4rem;letter-spacing:0.04em;}
.product-name{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:600;margin-bottom:0.5rem;color:var(--text);}
.product-desc{font-size:0.78rem;color:var(--text3);line-height:1.7;margin-bottom:0.9rem;}
.product-footer{display:flex;align-items:center;justify-content:space-between;}
.product-cta{
  font-size:0.78rem;font-weight:600;color:var(--orange);
  text-decoration:none;cursor:pointer;border:none;background:none;
}
.product-material{font-size:0.72rem;color:var(--text3);}

/* Product image colors */
.img-ring{background:linear-gradient(135deg,#2a2a2a 0%,#1a1a1a 100%);}
.img-necklace{background:linear-gradient(135deg,#4a3020 0%,#2d1e10 100%);}
.img-earring{background:linear-gradient(135deg,#1a3a20 0%,#0d2010 100%);}
.img-bracelet{background:linear-gradient(135deg,#3a2030 0%,#200a18 100%);}
.img-ring2{background:linear-gradient(135deg,#e8d4c8 0%,#d4b8a8 100%);}
.img-necklace2{background:linear-gradient(135deg,#f8c8a8 0%,#e8a880 100%);}
.img-ring3{background:linear-gradient(135deg,#c8c8d8 0%,#a8a8c0 100%);}
.img-bracelet2{background:linear-gradient(135deg,#1a1a20 0%,#0d0d18 100%);}

/* Jewelry SVG icons */
.jewelry-icon{width:90px;height:90px;opacity:0.5;}

/* ── ABOUT — "Our Journey" timeline, trust stats, why-trust cards ── */
#about{padding:80px 0 60px;padding-top:var(--header-h);}

.journey-timeline{
  position:relative;max-width:980px;margin:0 auto;padding:1rem 3rem 2rem;
}
.journey-line{
  position:absolute;top:6px;bottom:6px;left:50%;width:2px;
  background:linear-gradient(180deg,transparent,var(--gold-lux,#B8860B) 8%,var(--gold-lux,#B8860B) 92%,transparent);
  transform:translateX(-50%);
}
.journey-item{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;column-gap:3.5rem;margin-bottom:4.5rem;
}
.journey-item:last-child{margin-bottom:0;}
.journey-visual{grid-column:2;display:flex;justify-content:flex-start;}
.journey-content{grid-column:1;text-align:right;}
.journey-item:nth-child(even) .journey-visual{grid-column:1;justify-content:flex-end;}
.journey-item:nth-child(even) .journey-content{grid-column:2;text-align:left;}
.journey-visual-frame{
  width:132px;height:132px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 50% 35%,rgba(184,134,11,0.10),transparent 65%),
             linear-gradient(135deg,#F6F1E8,#F2ECE0);
  border:1px solid var(--border);box-shadow:0 14px 40px rgba(184,134,11,0.10);
  display:flex;align-items:center;justify-content:center;
}
.journey-visual-frame svg{width:50px;height:50px;stroke:var(--gold-lux,#B8860B);}
.journey-dot{
  position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;
  transform:translate(-50%,-50%);background:#FFFFFF;border:3px solid var(--gold-lux,#B8860B);
  box-shadow:0 0 0 6px rgba(184,134,11,0.12);z-index:2;
}
.journey-dot-today{
  width:20px;height:20px;
  box-shadow:0 0 0 8px rgba(184,134,11,0.18),0 0 26px rgba(184,134,11,0.45);
}
.journey-year{
  font-family:'Playfair Display',serif;font-weight:700;color:var(--gold-lux,#B8860B);
  font-size:clamp(2rem,3.6vw,2.8rem);line-height:1;margin-bottom:0.5rem;
}
.journey-title{
  font-family:'Playfair Display',serif;font-weight:600;font-size:1.28rem;
  color:var(--ink,#2B2B2B);margin-bottom:0.6rem;
}
.journey-text{
  font-family:'Cormorant Garamond',serif;font-size:1.06rem;line-height:1.8;
  color:var(--pearl,#666666);max-width:38ch;
}
.journey-item:nth-child(odd) .journey-text{margin-left:auto;margin-right:0;}
.journey-item:nth-child(even) .journey-text{margin-left:0;margin-right:auto;}

.journey-quote{
  max-width:760px;margin:1rem auto 3.5rem;padding:2.4rem 2rem;
  text-align:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.journey-quote-mark{
  display:block;font-family:'Playfair Display',serif;font-size:3.4rem;line-height:1;
  color:var(--gold-lux,#B8860B);margin-bottom:0.3rem;
}
.journey-quote p{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.28rem;line-height:1.7;
  color:var(--ink,#2B2B2B);
}

/* ── MISSION / VISION ── */
.mv-grid{
  max-width:1000px;margin:0 auto 2.4rem;padding:0 3rem;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;
}
.mv-card{
  background:#fff;border:1px solid var(--border);border-radius:18px;padding:2rem;text-align:center;
}
.mv-icon{
  width:52px;height:52px;border-radius:50%;background:rgba(184,134,11,0.10);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;
}
.mv-icon svg{width:24px;height:24px;stroke:var(--gold-lux,#B8860B);}
.mv-card h3{font-family:'Playfair Display',serif;font-weight:700;font-size:1.15rem;color:var(--text);margin-bottom:0.6rem;}
.mv-card p{font-family:'Cormorant Garamond',serif;font-size:1.02rem;line-height:1.7;color:var(--text2);}

/* ── CUSTOMER PROMISE ── */
.promise-box{
  max-width:760px;margin:0 auto 2.4rem;padding:2.2rem;text-align:center;
  background:linear-gradient(135deg,#F6F1E8,#F2ECE0);border:1px solid var(--border);border-radius:20px;
}
.promise-icon{
  width:56px;height:56px;border-radius:50%;background:rgba(184,134,11,0.12);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;
}
.promise-icon svg{width:26px;height:26px;stroke:var(--gold-lux,#B8860B);}
.promise-box h3{font-family:'Playfair Display',serif;font-weight:700;font-size:1.3rem;color:var(--gold-lux,#B8860B);margin-bottom:0.7rem;}
.promise-box p{font-family:'Cormorant Garamond',serif;font-size:1.1rem;line-height:1.75;color:var(--text);max-width:56ch;margin:0 auto;}

/* ── OUR PROCESS ── */
.process-strip{max-width:1200px;margin:0 auto 2.4rem;padding:0 3rem;}
.process-title{
  text-align:center;font-family:'Playfair Display',serif;font-weight:700;
  font-size:clamp(1.4rem,2.2vw,1.8rem);color:var(--gold-lux,#B8860B);margin-bottom:1.8rem;
}
.process-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;}
.process-step{background:#fff;border:1px solid var(--border);border-radius:16px;padding:1.6rem 1.3rem;position:relative;}
.process-num{
  width:32px;height:32px;border-radius:50%;background:var(--gold-lux,#B8860B);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700;
  margin-bottom:0.8rem;
}
.process-step h4{font-family:'Playfair Display',serif;font-weight:700;font-size:1rem;color:var(--text);margin-bottom:0.5rem;}
.process-step p{font-family:'Poppins',sans-serif;font-size:0.86rem;line-height:1.65;color:var(--text2);}

/* ── STORE VALUES ── */
.values-strip{
  max-width:900px;margin:0 auto 1rem;padding:0 3rem;
  display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;
}
.value-chip{
  display:inline-flex;align-items:center;gap:0.5rem;padding:0.6rem 1.2rem;
  background:#fff;border:1px solid var(--border);border-radius:999px;
  font-family:'Montserrat',sans-serif;font-size:0.8rem;font-weight:600;letter-spacing:0.03em;color:var(--text);
}
.value-chip-icon{font-size:1rem;}

@media(max-width:900px){
  .mv-grid,.process-steps{grid-template-columns:minmax(0,1fr);}
  .mv-grid,.promise-box,.process-strip,.values-strip{padding-left:1.5rem;padding-right:1.5rem;}
}
@media(max-width:600px){
  .promise-box{padding:1.6rem;}
}

/* ── TRUST STATISTICS ── */
.trust-stats{padding:1rem 3rem 3rem;}
.trust-stats-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.2rem;
}
.trust-stat-card{
  background:#FFFFFF;border:1px solid var(--border);border-radius:16px;
  padding:1.8rem 1rem;text-align:center;
}
.trust-stat-icon{
  width:52px;height:52px;border-radius:50%;background:rgba(184,134,11,0.08);
  display:flex;align-items:center;justify-content:center;margin:0 auto 0.9rem;
}
.trust-stat-icon svg{width:24px;height:24px;stroke:var(--gold-lux,#B8860B);}
.trust-stat-label{
  font-family:'Montserrat',sans-serif;font-size:0.8rem;font-weight:600;
  letter-spacing:0.02em;color:var(--ink,#2B2B2B);line-height:1.4;
}

/* ── WHY FAMILIES TRUST US ── */
.why-trust{padding:1rem 3rem 4rem;}
.why-trust-title{
  text-align:center;font-family:'Playfair Display',serif;font-weight:700;
  font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--gold-lux,#B8860B);
  margin-bottom:2.2rem;position:relative;
}
.why-trust-title::after{
  content:"";display:block;width:64px;height:2px;margin:0.85rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold,#D4AF37),transparent);
}
.why-trust-grid{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;
}
.why-card{
  background:#FFFFFF;border:1px solid var(--border);border-radius:18px;
  padding:2rem 1.6rem;
}
.why-icon{
  width:48px;height:48px;border-radius:12px;background:rgba(184,134,11,0.10);
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
}
.why-icon svg{width:22px;height:22px;stroke:var(--gold-lux,#B8860B);}
.why-title{
  font-family:'Playfair Display',serif;font-weight:600;font-size:1.05rem;
  color:var(--ink,#2B2B2B);margin-bottom:0.5rem;
}
.why-text{font-family:'Cormorant Garamond',serif;font-size:1rem;line-height:1.75;color:var(--pearl,#666666);}

@media(max-width:900px){
  .trust-stats-inner{grid-template-columns:repeat(3,minmax(0,1fr));}
  .why-trust-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:760px){
  .journey-timeline{padding:1rem 1.5rem 2rem;}
  .journey-line{left:23px;transform:none;}
  .journey-item{
    grid-template-columns:1fr;column-gap:0;row-gap:0.9rem;
    padding-left:56px;margin-bottom:3rem;
  }
  .journey-visual,.journey-item:nth-child(even) .journey-visual{
    grid-column:1;justify-content:flex-start;order:-1;
  }
  .journey-content,.journey-item:nth-child(even) .journey-content{
    grid-column:1;text-align:left;
  }
  .journey-text,.journey-item:nth-child(odd) .journey-text,
  .journey-item:nth-child(even) .journey-text{
    margin:0;max-width:none;
  }
  .journey-dot{left:23px;}
  .journey-visual-frame{width:84px;height:84px;}
  .journey-visual-frame svg{width:34px;height:34px;}
  .journey-quote{padding:2rem 1.2rem;margin-bottom:2.5rem;}
}
@media(max-width:600px){
  .trust-stats{padding:1rem 1.5rem 2.5rem;}
  .trust-stats-inner{grid-template-columns:repeat(2,minmax(0,1fr));}
  .why-trust{padding:1rem 1.5rem 3rem;}
  .why-trust-grid{grid-template-columns:minmax(0,1fr);}
}

/* ── TESTIMONIALS ── */
#testimonials{padding:80px 0 60px;padding-top:var(--header-h);}

.rv-filter-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  max-width:1200px;margin:0 auto;padding:0 3rem 1.4rem;
}
.rv-search-wrap{
  position:relative;flex:1;min-width:220px;display:flex;align-items:center;
}
.rv-search-wrap svg{position:absolute;left:0.9rem;width:16px;height:16px;stroke:var(--text3);pointer-events:none;}
.rv-search-input{
  width:100%;padding:0.65rem 1rem 0.65rem 2.4rem;border-radius:999px;
  border:1.5px solid var(--border);background:var(--white);
  font-family:'Poppins',sans-serif;font-size:0.86rem;color:var(--text);
  outline:none;transition:border-color 0.2s;
}
.rv-search-input:focus{border-color:var(--gold-lux,#B8860B);}
.rv-filter-chips{display:flex;flex-wrap:wrap;gap:0.5rem;}
.rv-filter-chip{
  padding:0.45rem 0.95rem;border-radius:999px;border:1.5px solid var(--border);
  background:var(--white);color:var(--text2);font-family:'Montserrat',sans-serif;
  font-size:0.76rem;font-weight:600;letter-spacing:0.02em;cursor:pointer;transition:all 0.2s;
}
.rv-filter-chip:hover{border-color:var(--gold-lux,#B8860B);}
.rv-filter-chip.active{background:var(--gold-lux,#B8860B);border-color:var(--gold-lux,#B8860B);color:#fff;}
.rv-sort-wrap{display:flex;align-items:center;gap:0.5rem;font-family:'Poppins',sans-serif;font-size:0.82rem;color:var(--text3);}
.rv-sort-select{
  padding:0.5rem 0.8rem;border-radius:10px;border:1.5px solid var(--border);
  background:var(--white);color:var(--text);font-family:'Poppins',sans-serif;font-size:0.82rem;
  outline:none;cursor:pointer;
}
@media(max-width:900px){
  .rv-filter-bar{padding:0 1.5rem 1.2rem;}
}
@media(max-width:600px){
  .rv-filter-bar{flex-direction:column;align-items:stretch;padding:0 1.2rem 1.2rem;}
  .rv-sort-wrap{justify-content:space-between;}
}

.reviews-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.4rem;padding:0 3rem 2rem;
}
.reviews-empty{
  grid-column:1/-1;text-align:center;padding:2.4rem 1.5rem;
  border:1px dashed var(--border);border-radius:16px;
  font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--text2);
}
.rv-loadmore-wrap{text-align:center;padding:0.5rem 0 2rem;}
.rv-loadmore-btn{
  position:relative;display:inline-flex;align-items:center;gap:0.6rem;
  padding:0.85rem 2.2rem;border-radius:999px;cursor:pointer;
  background:transparent;border:1.5px solid var(--border);color:var(--text2);
  font-family:'Montserrat',sans-serif;font-size:0.82rem;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;transition:all 0.25s;
}
.rv-loadmore-btn:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px);}
.rv-loadmore-btn:disabled{opacity:0.7;cursor:not-allowed;transform:none;}
.rv-loadmore-btn.loading .rv-loadmore-text{opacity:0.6;}
.rv-loadmore-spinner{display:none;border-color:rgba(102,102,102,0.3);border-top-color:var(--text2);}
.rv-loadmore-btn.loading .rv-loadmore-spinner{display:inline-block;}
.rv-loadmore-count{margin-top:0.8rem;font-size:0.8rem;color:var(--text3);font-family:'Poppins',sans-serif;}
.review-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:16px;padding:1.8rem;position:relative;
}
.review-stars{display:flex;gap:3px;margin-bottom:1rem;}
.review-quote{
  position:absolute;top:1.4rem;right:1.4rem;
  font-family:'Playfair Display',serif;font-size:3rem;
  color:rgba(224,123,42,0.15);line-height:1;
}
.review-text{
  font-size:0.85rem;color:var(--text2);line-height:1.8;
  margin-bottom:1.3rem;font-style:italic;
}
.review-author{display:flex;align-items:center;gap:0.8rem;}
.author-avatar{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:0.9rem;color:#fff;flex-shrink:0;
}
.av-s{background:var(--orange);}
.av-m{background:#4A90C4;}
.av-e{background:#C47A4A;}
.author-name{font-weight:600;font-size:0.88rem;color:var(--text);}
.author-date{font-size:0.75rem;color:var(--text3);}

/* ── LEGAL (Privacy Policy / Terms) ── */
#privacy-policy,#terms{padding:80px 0 60px;padding-top:var(--header-h);}
.legal-content{
  max-width:760px;margin:0 auto;padding:0 3rem;
  font-family:'Poppins',sans-serif;font-size:0.92rem;color:var(--text2);line-height:1.85;
}
.legal-content h3{
  font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;
  color:var(--text);margin:2rem 0 0.7rem;
}
.legal-content h3:first-child{margin-top:0;}
.legal-content p{margin-bottom:1rem;}
.legal-content a{color:var(--gold-lux,#B8860B);}
.legal-disclaimer{
  margin-top:2rem;padding:1rem 1.2rem;border-radius:12px;
  background:var(--cream2);border:1px dashed var(--border);
  font-size:0.82rem;color:var(--text3);font-style:italic;
}

/* ── CONTACT ── */
#contact{padding:80px 0 0;padding-top:var(--header-h);}
.contact-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;
  padding:0 3rem 0;
}
.contact-form-card,.contact-info-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:20px;padding:2.4rem;
}
.contact-card-title{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;color:var(--text);margin-bottom:1.6rem;}
.form-group{margin-bottom:1.1rem;}
.form-label{display:block;font-size:0.8rem;font-weight:500;color:var(--text2);margin-bottom:0.4rem;}
.form-input,.form-textarea{
  width:100%;border:1.5px solid var(--border);border-radius:10px;
  padding:0.8rem 1rem;font-family:'Inter',sans-serif;font-size:0.88rem;
  color:var(--text);background:var(--cream);
  transition:border-color 0.2s;outline:none;
}
.form-input:focus,.form-textarea:focus{border-color:var(--orange);}
.form-textarea{height:110px;resize:vertical;}
.btn-send{
  width:100%;display:flex;align-items:center;justify-content:center;gap:0.5rem;
  background:var(--orange);color:#fff;border:none;border-radius:10px;
  padding:0.9rem;font-size:0.9rem;font-weight:500;cursor:pointer;
  transition:background 0.2s;
}
.btn-send:hover{background:var(--orange-dark);}
.btn-send svg{width:16px;height:16px;stroke:#fff;}

.contact-info-item{
  display:flex;align-items:flex-start;gap:0.9rem;
  padding:1rem 0;border-bottom:1px solid var(--border);
}
.contact-info-item:last-of-type{border-bottom:none;}
.contact-info-item>div{min-width:0;flex:1;}
.info-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:rgba(224,123,42,0.1);
  display:flex;align-items:center;justify-content:center;
}
.info-icon svg{width:18px;height:18px;stroke:var(--orange);}
.info-label{font-size:0.75rem;color:var(--text3);margin-bottom:0.2rem;}
.info-val{font-size:0.88rem;font-weight:500;color:var(--text);min-width:0;word-break:break-word;}

.whatsapp-box{
  background:var(--green);border-radius:14px;padding:1.4rem;margin-top:1.2rem;color:#fff;
}
.wa-title{display:flex;align-items:center;gap:0.6rem;font-weight:600;font-size:0.95rem;margin-bottom:0.5rem;}
.wa-title svg{width:20px;height:20px;fill:#fff;}
.wa-desc{font-size:0.78rem;opacity:0.9;margin-bottom:1rem;line-height:1.7;}
.btn-wa{
  width:100%;background:var(--white);color:var(--green);
  border:none;border-radius:8px;padding:0.75rem;
  font-size:0.85rem;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:0.5rem;
}
.btn-wa svg{width:16px;height:16px;fill:var(--green);}

.follow-box{margin-top:1.2rem;}
.follow-title{font-size:0.85rem;font-weight:600;color:var(--text);margin-bottom:0.8rem;}
.social-btns{display:flex;gap:0.7rem;}
.social-btn{
  width:40px;height:40px;border-radius:10px;border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:opacity 0.2s;
}
.social-btn:hover{opacity:0.85;}
.social-btn.ig{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);}
.social-btn svg{width:18px;height:18px;fill:#fff;}

/* FOOTER */
footer{
  background:var(--dark2);color:rgba(255,255,255,0.75);
  padding:3rem;margin-top:4rem;
}
.footer-grid{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);
  gap:2.5rem;margin-bottom:2rem;
}
.footer-brand{display:flex;align-items:center;gap:0.7rem;margin-bottom:0.8rem;}
.footer-logo-img{width:46px;height:46px;object-fit:contain;display:block;}
.footer-brand-name{font-family:'Playfair Display',serif;font-weight:600;font-size:1.15rem;color:#fff;letter-spacing:0.02em;}
.footer-tagline{font-size:0.78rem;line-height:1.8;opacity:0.7;margin-bottom:1.2rem;}
.footer-socials{display:flex;gap:0.6rem;}
.footer-social{
  width:34px;height:34px;border-radius:8px;border:1px solid rgba(43,43,43,0.15);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color 0.2s;
}
.footer-social:hover{border-color:var(--orange);}
.footer-social svg{width:15px;height:15px;fill:rgba(43,43,43,0.55);}
.footer-col-title{font-size:0.82rem;font-weight:600;color:#fff;margin-bottom:1rem;letter-spacing:0.04em;}
.footer-links{list-style:none;}
.footer-links li{margin-bottom:0.6rem;}
.footer-links a{font-size:0.8rem;color:#4A4A4A;text-decoration:none;transition:color 0.2s;}
.footer-links a:hover{color:var(--orange);}
.footer-contact-item{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.7rem;}
.footer-contact-item svg{width:14px;height:14px;stroke:var(--orange);flex-shrink:0;}
.footer-contact-item span{font-size:0.78rem;color:#4A4A4A;}
.footer-bottom{
  border-top:1px solid rgba(43,43,43,0.12);padding-top:1.5rem;
  text-align:center;font-size:0.75rem;color:#5A5A5A;
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
}
.footer-legal-links a{color:#5A5A5A;text-decoration:none;transition:color 0.2s;}
.footer-legal-links a:hover{color:var(--gold-lux,#B8860B);}
.footer-legal-links span{margin:0 0.5rem;opacity:0.6;}

/* RESPONSIVE */
@media(max-width:900px){
  nav{padding:0.6rem 1.5rem;}
  .nav-links,.nav-phone{display:none;}
  .nav-logo-img{width:42px;height:42px;}
  .product-grid{padding:0 1.5rem 2rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .contact-grid{grid-template-columns:minmax(0,1fr);margin:0 1.5rem 2rem;}
  .reviews-grid,.footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0 1.5rem;}
  .section-header,.filter-tabs{padding-left:1.5rem;padding-right:1.5rem;}
  .contact-grid{padding:0 1.5rem;}
}
@media(max-width:600px){
  .product-grid,.reviews-grid,.footer-grid{grid-template-columns:minmax(0,1fr);}
}

/* ============================================================================
   LUXURY DARK SHOWROOM BACKGROUND SYSTEM
   ----------------------------------------------------------------------------
   Re-tones ONLY the page background and the text/surfaces that sit directly
   on it (section headers, hero text, nav glass) so readability is preserved
   on a dark palette. All cards stay light so products keep standing out.
   No layout, spacing, animation, JS or structural change.
   ============================================================================ */

/* Dark luxury palette tokens (added; originals untouched) */
:root{
  --lux-onyx:#0B0B0D;        /* deep black base */
  --lux-charcoal:#141418;    /* charcoal */
  --lux-graphite:#1C1D22;    /* rich graphite */
  --lux-emerald:#0E2A22;     /* dark emerald accent */
  --lux-gold:#D9B25A;        /* luxury gold */
  --lux-gold-soft:#E7CB8B;   /* champagne gold */
  --lux-ivory:#F4EFE6;       /* soft ivory highlight */
  --lux-gold-glow:rgba(217,178,90,0.16);
  --lux-gold-faint:rgba(217,178,90,0.05);
  --lux-emerald-glow:rgba(28,90,72,0.14);
  --lux-text:#ECE6DA;        /* ivory body text on dark */
  --lux-text-soft:#B9B2A4;   /* muted ivory */
}

/* PAGE BACKGROUND — layered showroom: ambient gold + emerald spotlights over a
   charcoal->onyx gradient, plus an ultra-fine gold lattice texture. GPU-cheap. */
body{
  background-color:var(--lux-onyx);
  background-image:
    /* fine diagonal gold lattice (luxury texture) */
    repeating-linear-gradient(135deg,
      var(--lux-gold-faint) 0px, var(--lux-gold-faint) 1px,
      transparent 1px, transparent 26px),
    repeating-linear-gradient(45deg,
      var(--lux-gold-faint) 0px, var(--lux-gold-faint) 1px,
      transparent 1px, transparent 26px),
    /* warm champagne spotlight, upper centre (showroom key light) */
    radial-gradient(130% 80% at 50% -8%,
      var(--lux-gold-glow) 0%, transparent 52%),
    /* soft emerald ambient pool, lower left */
    radial-gradient(90% 70% at 12% 108%,
      var(--lux-emerald-glow) 0%, transparent 55%),
    /* base charcoal -> onyx diagonal depth */
    linear-gradient(160deg,
      var(--lux-charcoal) 0%, var(--lux-graphite) 48%, var(--lux-onyx) 120%);
  background-repeat:no-repeat;
  background-size:auto, auto, 100% 100%, 100% 100%, 100% 100%;
  background-attachment:scroll;
  color:var(--lux-text);
}

/* Soft floating blurred luxury orbs — decorative, fixed, behind everything,
   pointer-events none so they never affect interaction or layout. */
body::before,body::after{
  content:"";position:fixed;z-index:-2;pointer-events:none;
  border-radius:50%;filter:blur(80px);opacity:0.5;
}
body::before{
  top:-120px;right:-100px;width:460px;height:460px;
  background:radial-gradient(circle,var(--lux-gold-glow),transparent 70%);
}
body::after{
  bottom:-160px;left:-120px;width:520px;height:520px;
  background:radial-gradient(circle,var(--lux-emerald-glow),transparent 70%);
}

/* HERO ambient glow — keeps the hero feeling lit without a hard edge */
#home{
  background:
    radial-gradient(70% 55% at 50% 36%, var(--lux-gold-glow) 0%, transparent 60%),
    transparent;
}

/* ON-BACKGROUND TEXT re-toned to ivory/gold for readability on dark.
   (Card-internal text is unaffected — different selectors/surfaces.) */
.section-title{color:var(--lux-ivory);}
.section-desc{color:var(--lux-text-soft);}
.hero-h1{color:var(--lux-ivory);}
.hero-desc{color:var(--lux-text-soft);}
.hero-badge{
  color:var(--lux-text);
  border-color:rgba(217,178,90,0.4);
  background:linear-gradient(135deg,rgba(217,178,90,0.14),rgba(217,178,90,0.05));
  box-shadow:0 2px 14px rgba(217,178,90,0.12);
}
.hero-badge svg{stroke:var(--lux-gold);}
.hero-h1-orange{color:var(--lux-gold-soft);}
/* Outline button on dark background stays legible */
.btn-outline{color:var(--lux-text);border-color:rgba(217,178,90,0.35);}
.btn-outline:hover{border-color:var(--lux-gold);color:var(--lux-gold-soft);}

/* NAV glass — dark frosted with a hairline gold base for the showroom feel */
nav{
  background:rgba(13,13,16,0.72)!important;
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid rgba(217,178,90,0.18);
}
.nav-links a{color:var(--lux-text-soft);}
.nav-links a:hover,.nav-links a.active{color:var(--lux-gold-soft);}
.nav-brand-name{color:var(--lux-ivory);}
.nav-phone{color:var(--lux-text);}
.nav-phone svg{stroke:var(--lux-gold);}

/* Premium ornamental corner accents on major sections (fine gold line art).
   Purely decorative, absolutely positioned, never affect flow. */
#home,#collections,#about,#testimonials,#contact{position:relative;}
#collections::before,#about::before,#testimonials::before,#contact::before,
#collections::after,#about::after,#testimonials::after,#contact::after{
  content:"";position:absolute;width:34px;height:34px;pointer-events:none;
  opacity:0.5;z-index:0;
}
#collections::before,#about::before,#testimonials::before,#contact::before{
  top:26px;left:26px;
  border-top:1.5px solid rgba(217,178,90,0.45);
  border-left:1.5px solid rgba(217,178,90,0.45);
}
#collections::after,#about::after,#testimonials::after,#contact::after{
  bottom:26px;right:26px;
  border-bottom:1.5px solid rgba(217,178,90,0.45);
  border-right:1.5px solid rgba(217,178,90,0.45);
}

/* Performance & comfort: static gradients (no animation added). Respect users
   who prefer reduced motion (existing animations already honour their own). */
@media (prefers-reduced-motion: reduce){
  body{background-attachment:scroll;}
}

/* Responsive: soften orbs and hide corner accents on small screens so the
   layout stays clean and light on mobile/tablet. */
@media(max-width:900px){
  body::before{width:300px;height:300px;}
  body::after{width:320px;height:320px;}
}
@media(max-width:600px){
  #collections::before,#about::before,#testimonials::before,#contact::before,
  #collections::after,#about::after,#testimonials::after,#contact::after{
    display:none;
  }
}

/* ============================================================================
   COLLECTIONS CATEGORY STRUCTURE (new feature — additive only)
   Category landing cards, subcategory tiles and back button.
   Uses existing design tokens so branding stays consistent.
   ============================================================================ */
#collections{padding:80px 0 60px;padding-top:var(--header-h);}
#cat-gold,#cat-silver,#cat-diamond,#silver-products,#diamond-products,
section[id^="goldsub-"],section[id^="goldprod-"]{padding:80px 0 60px;padding-top:var(--header-h);}

/* Three primary category cards */
.category-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;
  padding:0 3rem;max-width:1200px;margin:0 auto;
}
.category-card{
  text-align:left;cursor:pointer;border:1px solid var(--border);
  background:var(--white);border-radius:20px;padding:2.4rem 2rem;
  display:flex;flex-direction:column;gap:0.9rem;
  transition:transform 0.2s,box-shadow 0.2s,border-color 0.2s;
  font-family:inherit;
}
.category-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(192,94,16,0.16);
  border-color:var(--orange);
}
.category-card-icon{font-size:2.6rem;line-height:1;}
.category-card-icon .cat-bar-icon{display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,0.28));}
.category-card-title{
  font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700;
  color:var(--text);
}
.category-card-desc{font-size:0.88rem;color:var(--text2);line-height:1.7;flex:1;}
.category-card-link{
  display:inline-flex;align-items:center;gap:0.45rem;
  font-size:0.85rem;font-weight:600;color:var(--orange);margin-top:0.4rem;
}
.category-card-link svg{width:16px;height:16px;stroke:var(--orange);}
/* Subtle top accent bar per metal */
.category-card.cat-gold{border-top:3px solid #e0a800;}
.category-card.cat-silver{border-top:3px solid #a8a8a8;}
.category-card.cat-diamond{border-top:3px solid #4096d8;}

/* Subcategory tiles within a category page */
.subcat-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:1.2rem;padding:0 3rem;max-width:1100px;margin:0 auto;
}
.subcat-card{
  cursor:pointer;background:var(--white);border:1px solid var(--border);
  border-radius:14px;padding:1.4rem 1.2rem;text-align:center;
  font-size:0.95rem;font-weight:600;color:var(--text);
  font-family:'Playfair Display',serif;letter-spacing:0.01em;
  transition:transform 0.18s,box-shadow 0.18s,border-color 0.18s,color 0.18s;
}
.subcat-card:hover{
  transform:translateY(-3px);border-color:var(--orange);color:var(--orange);
  box-shadow:0 10px 26px rgba(192,94,16,0.14);
}

/* Back button shared by category & product pages */
.category-page-header{padding:0 3rem 0.5rem;max-width:1200px;margin:0 auto;}
.category-back{
  display:inline-flex;align-items:center;gap:0.45rem;
  background:transparent;border:1.5px solid var(--border);
  border-radius:999px;padding:0.55rem 1.2rem;cursor:pointer;
  font-size:0.83rem;font-weight:500;color:var(--text2);font-family:inherit;
  transition:border-color 0.2s,color 0.2s;
}
/* ============================================================================
   COLLECTIONS CARDS — DARK SHOWROOM RE-TONE (glassmorphism, additive override)
   Converts the category & subcategory tiles to frosted dark glass with gold
   detailing so they sit beautifully on the dark background. Structure, sizing,
   hover behaviour and responsiveness are unchanged.
   ============================================================================ */
.category-card{
  background:linear-gradient(160deg,rgba(28,29,34,0.72),rgba(13,13,16,0.72));
  backdrop-filter:blur(10px) saturate(120%);
  border-color:rgba(217,178,90,0.18);
}
.category-card:hover{
  border-color:rgba(217,178,90,0.55);
  box-shadow:0 18px 44px rgba(0,0,0,0.5),0 0 0 1px rgba(217,178,90,0.12);
}
.category-card-title{color:var(--lux-ivory);}
.category-card-desc{color:var(--lux-text-soft);}
.category-card-link{color:var(--lux-gold-soft);}
.category-card-link svg{stroke:var(--lux-gold-soft);}
/* keep the per-metal top accents, slightly warmed for the dark surface */
.category-card.cat-gold{border-top:3px solid var(--lux-gold);}
.category-card.cat-silver{border-top:3px solid #c9ccd1;}
.category-card.cat-diamond{border-top:3px solid #7fc4f5;}

.subcat-card{
  background:linear-gradient(160deg,rgba(28,29,34,0.7),rgba(13,13,16,0.7));
  backdrop-filter:blur(8px) saturate(120%);
  border-color:rgba(217,178,90,0.16);
  color:var(--lux-text);
}
.subcat-card:hover{
  border-color:rgba(217,178,90,0.55);
  color:var(--lux-gold-soft);
  box-shadow:0 12px 30px rgba(0,0,0,0.45);
}

.category-back{
  color:var(--lux-text-soft);
  border-color:rgba(217,178,90,0.28);
}
.category-back:hover{border-color:var(--lux-gold);color:var(--lux-gold-soft);}
.category-back svg{width:16px;height:16px;stroke:currentColor;}

/* Responsive: category grids collapse gracefully */
@media(max-width:900px){
  .category-grid{grid-template-columns:minmax(0,1fr);padding:0 1.5rem;}
  .subcat-grid{padding:0 1.5rem;}
  .category-page-header{padding:0 1.5rem 0.5rem;}
}
@media(max-width:600px){
  .subcat-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
}

/* ============================================================================
   OM JEWELLERS — LUXURY PREMIUM DARK THEME (FINAL OVERRIDE LAYER)
   ----------------------------------------------------------------------------
   Additive only. Appended last so it wins the cascade. No HTML or JS removed.
   Converts ALL remaining light surfaces to a pure-black luxury showroom theme
   with glassmorphism, gold detailing, premium hover & scroll-reveal polish.
   ============================================================================ */

/* ---- Luxury token system (brand palette from brief) ------------------------ */
:root{
  /* Ivory + Gold luxury theme (replaces the black showroom palette below) */
  --gold:#D4AF37;
  --gold-lux:#B8860B;
  --gold-soft:#C9A227;
  --gold-deep:#B8860B;
  --gold-a11y:#8A6608; /* same hue family as --gold-lux, darkened to meet WCAG AA 4.5:1 for small text on cream — used only where --gold-lux itself would fail contrast as text */
  --ivory:#FFFFFF;
  --pearl:#666666;
  --ink:#2B2B2B;
  --ink-soft:#666666;

  /* Re-point legacy orange tokens to gold so every existing rule turns luxe */
  --orange:#B8860B;
  --orange-dark:#8A6608;
  --orange-light:#D4AF37;

  /* Glass surfaces */
  --glass:#FFFFFF;
  --glass-soft:#FFFFFF;
  --glass-border:#E6D8B8;
  --glass-border-hover:#D4AF37;
  --hairline:#E6D8B8;
}

/* ---- Typography system (Playfair / Cormorant / Poppins / Montserrat) ------- */
body{
  font-family:'Poppins',sans-serif;
  color:var(--ink-soft);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.section-title,.hero-h1,.hero-h1-orange,.product-name,
.category-card-title,.contact-card-title,
.footer-brand-name,.nav-brand-name,.subcat-card{
  font-family:'Playfair Display',serif !important;
}
.section-desc,.product-cat,.category-card-desc,.review-text,
.hero-desc,.product-desc{
  font-family:'Cormorant Garamond',serif !important;
}
.section-desc,.hero-desc,.category-card-desc,.review-text,
.product-desc{
  font-size:1.04rem;letter-spacing:0.015em;
}
.btn-orange,.btn-outline,.btn-send,.btn-wa,.filter-btn,.metal-btn,
.category-back,.product-cta,.category-card-link,.nav-links a,.footer-links a,
.product-metal-badge,.product-badge{
  font-family:'Montserrat',sans-serif !important;
  letter-spacing:0.04em;
}

/* ============================================================================
   PAGE BACKGROUND — exact premium radial showroom gradient (brief spec)
   Smooth, no banding, dark corners, softly illuminated centre.
   ============================================================================ */
body{
  background-color:#FAF8F3 !important;
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 38%,
      rgba(184,134,11,0.05) 0%,
      rgba(184,134,11,0.02) 26%,
      transparent 58%),
    radial-gradient(ellipse at center,
      #FAF8F3 0%,
      #F8F6F0 20%,
      #F6F1E8 40%,
      #F6F1E8 65%,
      #F6F1E8 85%,
      #F6F1E8 100%) !important;
  background-attachment:fixed, fixed !important;
  background-repeat:no-repeat,no-repeat !important;
  background-size:100% 100%,100% 100% !important;
}
body::before{
  top:-140px;right:-120px;width:480px;height:480px;
  background:radial-gradient(circle,rgba(184,134,11,0.07),transparent 70%) !important;
}
body::after{
  bottom:-170px;left:-130px;width:540px;height:540px;
  background:radial-gradient(circle,rgba(201,162,39,0.05),transparent 70%) !important;
}
#home{
  background:
    radial-gradient(72% 56% at 50% 34%, rgba(184,134,11,0.05) 0%, transparent 62%),
    transparent !important;
}

/* ============================================================================
   NAVIGATION — frosted black glass, gold hairline
   ============================================================================ */
nav{
  background:rgba(250,248,243,0.80) !important;
  backdrop-filter:blur(16px) saturate(130%);
  border-bottom:1px solid var(--hairline) !important;
  box-shadow:0 6px 30px rgba(184,134,11,0.08);
}
.nav-brand-name{
  color:var(--gold-lux) !important;
  background:linear-gradient(90deg,#B8860B,#D4AF37 55%,#B8860B);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:0.12em;font-weight:600;
}
.nav-links a{color:var(--ink) !important;letter-spacing:0.06em;font-size:0.8rem;}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transition:width 0.3s ease;
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-links a:hover,.nav-links a.active{color:var(--gold-soft) !important;}
.nav-phone{color:var(--ink) !important;}
.nav-phone svg{stroke:var(--gold-lux) !important;}

/* ============================================================================
   HERO — luxe headline gradient + premium gold CTA
   ============================================================================ */
.hero-h1{color:var(--ink) !important;letter-spacing:0.01em;}
.hero-h1-orange{
  background:linear-gradient(92deg,#B8860B 0%,#C9A227 45%,#D4AF37 75%,#B8860B 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#B8860B !important;
}
.hero-desc{color:var(--pearl) !important;font-size:1.12rem;line-height:1.85;}
.hero-badge{
  color:var(--ink) !important;
  border-color:rgba(184,134,11,0.35) !important;
  background:linear-gradient(135deg,rgba(201,162,39,0.12),rgba(184,134,11,0.04)) !important;
  box-shadow:0 2px 18px rgba(184,134,11,0.10) !important;
  backdrop-filter:blur(6px);
}
.hero-badge svg{stroke:var(--gold-lux) !important;}

/* Premium gold buttons */
.btn-orange,.btn-send,.metal-btn.all-metal-btn.active{
  background:#B8860B !important;
  color:#FFFFFF !important;font-weight:600;
  box-shadow:0 8px 26px rgba(184,134,11,0.28),inset 0 1px 0 rgba(255,255,255,0.18);
  border:none !important;
}
.btn-orange:hover,.btn-send:hover{
  background:#D4AF37 !important;
  transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(184,134,11,0.38),inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.btn-orange svg,.btn-send svg{stroke:#FFFFFF !important;}
.btn-outline{
  color:var(--gold-lux) !important;
  border:1.5px solid rgba(184,134,11,0.40) !important;
  background:rgba(255,255,255,0.6) !important;backdrop-filter:blur(4px);
}
.btn-outline:hover{
  border-color:var(--gold) !important;color:var(--gold) !important;
  background:rgba(201,162,39,0.08) !important;transform:translateY(-2px);
}

/* Hero ornamental dots/circles to gold */
.hero-circle{border:1px solid rgba(184,134,11,0.14) !important;background:rgba(184,134,11,0.03) !important;}
.hero-dot{background:rgba(184,134,11,0.35) !important;}

/* ============================================================================
   SECTION HEADERS — ivory + gold flourish underline
   ============================================================================ */
.section-title{color:var(--gold-lux) !important;letter-spacing:0.01em;}
.section-title::after{
  content:"";display:block;width:64px;height:2px;margin:0.85rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.section-desc{color:var(--pearl) !important;}

/* ============================================================================
   PRODUCT CARDS — frosted dark glass, gold edge, premium zoom hover
   ============================================================================ */
.product-card{
  background:var(--glass) !important;
  backdrop-filter:blur(12px) saturate(120%);
  border:1px solid var(--glass-border) !important;
  border-radius:18px !important;
  box-shadow:0 10px 30px rgba(184,134,11,0.10);
  transition:transform 0.3s cubic-bezier(.2,.7,.2,1),box-shadow 0.3s,border-color 0.3s;
}
.product-card:hover{
  transform:translateY(-6px) !important;
  border-color:var(--glass-border-hover) !important;
  box-shadow:0 22px 50px rgba(184,134,11,0.16),0 0 0 1px rgba(212,175,55,0.14),
             0 0 40px rgba(212,175,55,0.08) !important;
}
.product-img{
  height:230px !important;
  background:linear-gradient(135deg,#F6F1E8,#F2ECE0) !important;
}
/* Real product images: sharp, uniform, cover */
.product-img img{
  width:100% !important;height:100% !important;
  object-fit:cover !important;object-position:center !important;display:block;
  transition:transform 0.55s cubic-bezier(.2,.7,.2,1);
}
.product-card:hover .product-img img{transform:scale(1.10);}
.product-img svg,.jewelry-icon{
  filter:drop-shadow(0 4px 14px rgba(184,134,11,0.25));
  opacity:0.65 !important;
}
/* Real-photo cards (no placeholder modifier class): background-removed
   images float on a plain ivory ground, fully contained (never cropped),
   with consistent padding so the jewellery never touches the card edge —
   matching the hero/shop-by-category treatment used elsewhere. */
.product-img:not(.img-ring):not(.img-ring2):not(.img-ring3):not(.img-necklace):not(.img-necklace2):not(.img-earring):not(.img-bracelet):not(.img-bracelet2){
  background:var(--cream) !important;
}
.product-img:not(.img-ring):not(.img-ring2):not(.img-ring3):not(.img-necklace):not(.img-necklace2):not(.img-earring):not(.img-bracelet):not(.img-bracelet2) img{
  object-fit:contain !important;padding:0.7rem;
}
.product-body{padding:1.2rem 1.3rem 1.4rem !important;}
.product-cat{
  color:var(--gold-soft) !important;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;font-size:0.78rem !important;
}
.product-name{color:var(--ink) !important;font-size:1.18rem !important;}
.product-desc{color:var(--pearl) !important;}
.product-cta{
  color:var(--ink) !important;font-weight:600;font-size:0.78rem !important;
  letter-spacing:0.05em;
}
.product-cta:hover{color:var(--gold-lux) !important;}
.product-material{color:#8a8a8a !important;}
.product-badge{
  background:#B8860B !important;color:#FFFFFF !important;
  box-shadow:0 4px 14px rgba(184,134,11,0.3);font-weight:600;
}
.img-dot{background:rgba(184,134,11,0.25) !important;}
.img-dot.active{background:var(--gold-lux) !important;}

/* Metal badges — soft tints */
.product-metal-badge{font-weight:600;letter-spacing:0.08em;}
.badge-gold{background:rgba(184,134,11,0.14) !important;color:var(--gold-lux) !important;}
.badge-silver{background:rgba(120,120,120,0.14) !important;color:#5a5a5a !important;}
.badge-diamond{background:rgba(64,150,216,0.14) !important;color:#2f6ea8 !important;}

/* ============================================================================
   CATEGORY GRID — already glass; refine to gold-on-black premium
   ============================================================================ */
.category-card{
  background:var(--glass) !important;
  border:1px solid var(--glass-border) !important;
}
.category-card:hover{
  border-color:var(--glass-border-hover) !important;
  box-shadow:0 22px 52px rgba(184,134,11,0.16),0 0 0 1px rgba(212,175,55,0.12),
             0 0 44px rgba(212,175,55,0.08) !important;
}
.category-card-title{color:var(--ink) !important;}
.category-card-desc{color:var(--pearl) !important;}
.category-card-link{color:var(--ink) !important;}
.category-card-link svg{stroke:var(--ink) !important;}
.category-card:hover .category-card-link{color:var(--gold-lux) !important;}
.category-card:hover .category-card-link svg{stroke:var(--gold-lux) !important;}
.category-card.cat-gold{border-top:3px solid var(--gold-lux) !important;}
.category-card.cat-silver{border-top:3px solid #c9ccd1 !important;}
.category-card.cat-diamond{border-top:3px solid #7fc4f5 !important;}

.subcat-card{
  background:var(--glass-soft) !important;
  border:1px solid var(--glass-border) !important;color:var(--ink) !important;
}
.subcat-card:hover{
  border-color:var(--glass-border-hover) !important;color:var(--gold-lux) !important;
  box-shadow:0 14px 34px rgba(184,134,11,0.16) !important;
}
.category-back{
  color:var(--ink) !important;border:1.5px solid rgba(184,134,11,0.28) !important;
  background:rgba(255,255,255,0.6) !important;
}
.category-back:hover{border-color:var(--gold) !important;color:var(--gold-lux) !important;}

/* Filter & metal tabs */
.filter-btn{
  background:#FFFFFF !important;color:var(--ink) !important;
  border:1.5px solid var(--border) !important;
}
.filter-btn.active,.filter-btn:hover{
  background:#B8860B !important;color:#FFFFFF !important;
  border-color:var(--gold) !important;
}
.metal-btn.all-metal-btn{
  background:#FFFFFF !important;color:var(--ink) !important;
  border-color:var(--border) !important;
}
.metal-btn.all-metal-btn.active,.metal-btn.all-metal-btn:hover{
  background:#B8860B !important;color:#FFFFFF !important;
  border-color:var(--gold) !important;
}

/* ============================================================================
   TESTIMONIALS — glass review cards
   ============================================================================ */
.review-card{
  background:var(--glass) !important;border:1px solid var(--glass-border) !important;
  border-radius:18px !important;box-shadow:0 12px 32px rgba(184,134,11,0.10);
  transition:transform 0.3s,box-shadow 0.3s,border-color 0.3s;
}
.review-card:hover{transform:translateY(-5px);border-color:var(--glass-border-hover) !important;}
.reviews-empty{border-color:var(--glass-border) !important;color:var(--pearl) !important;}
.review-text{color:var(--ink) !important;}
.review-quote{color:rgba(184,134,11,0.18) !important;}
.author-name{color:var(--ink) !important;}
.author-date{color:#8a8a8a !important;}
.rv-loadmore-btn{
  border-color:rgba(184,134,11,0.40) !important;color:var(--gold-lux) !important;
  background:rgba(255,255,255,0.6) !important;backdrop-filter:blur(4px);
}
.rv-loadmore-btn:hover{background:rgba(184,134,11,0.08) !important;border-color:#D4AF37 !important;color:#8A6608 !important;}
.rv-loadmore-spinner{border-color:rgba(184,134,11,0.3) !important;border-top-color:var(--gold-lux) !important;}
.rv-loadmore-count{color:var(--pearl) !important;}

/* ============================================================================
   CONTACT — glass form, inputs, info, map link, follow box
   ============================================================================ */
.contact-form-card,.contact-info-card{
  background:var(--glass) !important;border:1px solid var(--glass-border) !important;
  border-radius:22px !important;box-shadow:0 14px 40px rgba(184,134,11,0.12);
}
.contact-card-title{color:var(--gold-lux) !important;}
.form-label{color:var(--ink) !important;font-family:'Montserrat',sans-serif;letter-spacing:0.03em;}
.form-input,.form-textarea{
  background:#F6F1E8 !important;
  border:1.5px solid var(--border) !important;
  color:var(--ink) !important;font-family:'Poppins',sans-serif !important;
}
.form-input::placeholder,.form-textarea::placeholder{color:#8a8a8a !important;}
.form-input:focus,.form-textarea:focus{
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px rgba(212,175,55,0.14) !important;
}
.info-icon{background:rgba(184,134,11,0.10) !important;}
.info-icon svg{stroke:var(--gold-lux) !important;}
.info-label{color:#8a8a8a !important;}
.info-val{color:var(--ink) !important;}
.contact-info-item{border-bottom:1px solid var(--border) !important;}
/* Inline-styled "Get Directions" card → matches surrounding light glass card */
#contact a[href*="google.com/maps"][style*="background:#fff"]{
  background:var(--glass-soft) !important;
  border:1.5px solid var(--glass-border) !important;
}
#contact a[href*="google.com/maps"][style*="background:#fff"] div[style*="color:#2D2010"],
#contact a[href*="google.com/maps"][style*="background:#fff"] > div:nth-child(2) > div:first-child{
  color:var(--ink) !important;
}
.whatsapp-box{
  background:linear-gradient(135deg,#25D366,#1DA851) !important;
  border:1px solid rgba(37,211,102,0.3) !important;
}
.btn-wa{background:#fff !important;color:#128C4A !important;}
.follow-box{
  background:var(--glass) !important;border:1px solid var(--glass-border) !important;
  border-radius:18px !important;
}
.follow-title{color:var(--ink) !important;}

/* ============================================================================
   FOOTER — soft deep-cream luxury
   ============================================================================ */
footer{
  background:#F2ECE0 !important;
  border-top:1px solid var(--hairline);
  color:#4a4a4a !important;
}
.footer-brand-name{
  background:linear-gradient(90deg,#B8860B,#D4AF37 55%,#B8860B);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#B8860B !important;
}
.footer-col-title{color:#2B2B2B !important;letter-spacing:0.08em;}
.footer-social:hover{border-color:var(--gold) !important;}
.footer-links a:hover{color:var(--gold-lux) !important;}
.footer-contact-item svg{stroke:var(--gold-lux) !important;}

/* Ornamental corner accents → gold */
#collections::before,#about::before,#testimonials::before,#contact::before{
  border-top-color:rgba(184,134,11,0.4) !important;
  border-left-color:rgba(184,134,11,0.4) !important;
}
#collections::after,#about::after,#testimonials::after,#contact::after{
  border-bottom-color:rgba(184,134,11,0.4) !important;
  border-right-color:rgba(184,134,11,0.4) !important;
}

/* ============================================================================
   SCROLL-REVEAL — smooth premium entrance (progressive enhancement)
   Elements are fully visible by default; .reveal-init only applies when JS
   adds the class, so no-JS users still see everything.
   ============================================================================ */
.reveal-init{opacity:0;transform:translateY(26px);}
.reveal-init.reveal-in{
  opacity:1;transform:none;
  transition:opacity 0.7s ease,transform 0.7s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce){
  .reveal-init,.reveal-init.reveal-in{opacity:1 !important;transform:none !important;transition:none !important;}
  .product-card,.product-img img,.category-card,.trust-stat-card,.why-card,.review-card{transition:none !important;}
}

/* ============================================================================
   MOBILE POLISH — no horizontal scroll, comfortable spacing
   ============================================================================ */
@media(max-width:900px){
  body{background-attachment:scroll, scroll !important;}
  nav{padding:0.55rem 1.1rem !important;}
  .product-grid{gap:1.1rem !important;}
}
@media(max-width:600px){
  .hero-content{padding:4rem 1.4rem 2.5rem !important;}
  .product-img{height:200px !important;}
  .section-title::after{width:48px;}
}


/* ============================================================================
   REFERENCE-EXACT LAYER — match the provided screenshot precisely
   Pure black showroom, top utility bar, expanded nav with icons, left hero,
   trust bar, and Shop By Category photo row. Additive; no JS/HTML removed.
   ============================================================================ */

/* ---- Soft ivory background (subtle warmth, no banding, calm and light) --- */
body{
  background-color:#FAF8F3 !important;
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 32%,
      rgba(184,134,11,0.04) 0%,
      rgba(184,134,11,0.015) 30%,
      transparent 60%),
    radial-gradient(ellipse 120% 120% at 50% 30%,
      #FAF8F3 0%,
      #F8F6F0 30%,
      #F6F1E8 55%,
      #F6F1E8 78%,
      #F6F1E8 100%) !important;
  background-attachment:fixed,fixed !important;
}
body::before{background:radial-gradient(circle,rgba(184,134,11,0.06),transparent 70%) !important;opacity:0.5;}
body::after{background:radial-gradient(circle,rgba(184,134,11,0.03),transparent 70%) !important;opacity:0.4;}
#home{background:radial-gradient(60% 50% at 50% 30%,rgba(184,134,11,0.04),transparent 62%),transparent !important;}

/* hide decorative legacy hero orbs/dots so hero stays clean like the reference */
.hero-bg-circles{display:none !important;}

/* ============================================================================
   TOP UTILITY BAR
   ============================================================================ */
.top-bar{
  position:fixed;top:0;left:0;right:0;z-index:1001;
  background:#F6F1E8;border-bottom:1px solid var(--border);
  font-family:'Montserrat',sans-serif;
}
.top-bar-inner{
  max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0.55rem 3rem;gap:1rem;
}
.top-bar-left{
  grid-column:1;justify-self:start;
  display:inline-flex;align-items:center;gap:0.4rem;
  font-size:0.72rem;letter-spacing:0.04em;color:#666666;text-decoration:none;
  transition:color 0.2s;
}
.top-bar-left:hover{color:var(--gold-lux,#B8860B);}
.top-bar-left svg{width:13px;height:13px;stroke:var(--gold-lux,#B8860B);}
.top-bar-center{
  grid-column:2;justify-self:center;
  display:inline-flex;align-items:center;
}
.top-bar-tagline{
  font-family:'Montserrat',sans-serif;
  font-size:0.74rem;font-weight:600;letter-spacing:0.16em;
  color:var(--gold-a11y,#8A6608);text-align:center;white-space:nowrap;
}
.top-bar-tagline .tb-sep{opacity:0.5;margin:0 0.15em;font-weight:400;}

/* ============================================================================
   NAV — semi-transparent ivory glass, brand + tagline, reference menu, icon group
   ============================================================================ */
nav{
  top:38px !important;                 /* sit below the utility bar */
  background:rgba(250,248,243,0.80) !important;
  backdrop-filter:blur(14px) saturate(120%) !important;
  border-bottom:1px solid var(--hairline) !important;
  box-shadow:0 8px 30px rgba(184,134,11,0.10);
  padding:0.7rem 3rem !important;
  max-width:none;
}
.nav-brand{align-items:center;gap:0.55rem;}
.nav-brand-wrap{display:flex;flex-direction:column;line-height:1;}
.nav-brand-name{
  font-family:'Playfair Display',serif !important;
  font-size:1.5rem !important;font-weight:600 !important;letter-spacing:0.14em !important;
  background:linear-gradient(90deg,#B8860B,#D4AF37 60%,#B8860B);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#B8860B !important;
}
.nav-brand-tag{
  font-family:'Montserrat',sans-serif;font-size:0.56rem;font-weight:500;
  letter-spacing:0.42em;color:#8a8a8a;margin-top:4px;padding-left:2px;
}
.nav-links{gap:1.7rem !important;}
.nav-links a{
  font-family:'Montserrat',sans-serif !important;
  font-size:0.78rem !important;font-weight:500 !important;letter-spacing:0.07em !important;
  text-transform:uppercase;color:#2B2B2B !important;
  white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{color:var(--gold-a11y,#8A6608) !important;}
.nav-links a.active::after,.nav-links a:hover::after{width:0 !important;} /* reference has no underline */

.nav-icons{display:flex;align-items:center;gap:1.25rem;}
.nav-icon{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  color:#2B2B2B;text-decoration:none;transition:color 0.2s,transform 0.2s;
}
.nav-icon svg{width:21px;height:21px;stroke:#2B2B2B;transition:stroke 0.2s;}
.nav-icon:hover{transform:translateY(-1px);}
.nav-icon:hover svg{stroke:var(--gold-lux,#B8860B);}
.nav-burger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:4px;}
.nav-burger span{width:22px;height:2px;background:var(--gold-lux,#B8860B);border-radius:2px;}

/* body offset so fixed bars don't overlap content */
#home{padding-top:96px !important;}

/* ============================================================================
   HERO — left aligned, two-column, reference match
   ============================================================================ */
.hero-content{
  max-width:1320px !important;margin:0 auto !important;text-align:left !important;
  padding:2.4rem 3rem 1.5rem !important;
}
.hero-layout{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:2rem;
  min-height:62vh;
}
.hero-text{padding-right:1rem;}
.hero-eyebrow{
  font-family:'Montserrat',sans-serif;font-size:0.92rem;font-weight:500;
  letter-spacing:0.34em;color:#B8860B;margin-bottom:1.1rem;
}
.hero-h1{
  font-family:'Playfair Display',serif !important;
  font-size:clamp(2.6rem,4.6vw,4.1rem) !important;font-weight:600 !important;
  color:#2B2B2B !important;line-height:1.04 !important;margin-bottom:0 !important;
  letter-spacing:0.04em !important;-webkit-text-fill-color:#2B2B2B;
}
.hero-h1-orange{
  font-family:'Playfair Display',serif !important;
  font-size:clamp(2.6rem,4.6vw,4.1rem) !important;font-weight:600 !important;font-style:normal !important;
  display:block;line-height:1.04 !important;letter-spacing:0.04em !important;margin:0.1rem 0 1.4rem !important;
  background:linear-gradient(92deg,#B8860B 0%,#C9A227 50%,#B8860B 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#B8860B !important;
}
.hero-divider{display:flex;align-items:center;gap:0.5rem;margin-bottom:1.5rem;}
.hero-divider .hd-line{width:54px;height:1px;background:linear-gradient(90deg,#B8860B,transparent);}
.hero-divider .hd-line:last-child{background:linear-gradient(270deg,#B8860B,transparent);}
.hero-divider .hd-dot{width:6px;height:6px;border-radius:50%;background:#B8860B;}
.hero-desc{
  font-family:'Poppins',sans-serif !important;
  font-size:1.05rem !important;color:#666666 !important;line-height:1.7 !important;
  margin:0 0 2rem !important;max-width:none !important;font-weight:300;
}
.hero-btns{justify-content:flex-start !important;margin-bottom:2.2rem !important;}
.btn-outline.hero-cta{
  border:1.5px solid #B8860B !important;color:#B8860B !important;
  background:transparent !important;border-radius:4px !important;
  padding:0.95rem 1.9rem !important;font-size:0.82rem !important;font-weight:600 !important;
  letter-spacing:0.12em !important;text-transform:uppercase;
}
.btn-outline.hero-cta:hover{
  background:rgba(184,134,11,0.08) !important;border-color:#D4AF37 !important;color:#8A6608 !important;
  transform:none !important;
}
.btn-outline.hero-cta svg{width:14px;height:14px;stroke:#B8860B;}
/* Premium slide indicators — thin gold progress bars, one per slide. The
   active bar fills left-to-right over the slide's on-screen duration. */
.hero-carousel-dots{display:flex;gap:0.5rem;}
.hc-bar{position:relative;width:26px;height:3px;border-radius:999px;background:rgba(184,134,11,0.22);overflow:hidden;}
.hc-bar-fill{position:absolute;top:0;left:0;bottom:0;width:0;background:linear-gradient(90deg,#B8860B,#D4AF37);border-radius:999px;}
.hc-bar.is-active .hc-bar-fill{animation-name:hcBarFill;animation-timing-function:linear;animation-fill-mode:forwards;}
@keyframes hcBarFill{from{width:0;}to{width:100%;}}

.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px;}
/* ── Hero slideshow — jewellery-only imagery, no card ──
   Images come from Images/hero/*.webp (background already removed from the
   original catalogue photos; those originals are untouched). A SINGLE
   reused <img> means only one slide can ever exist/be visible at once.
   Three nested wrappers keep each animation independent so they never
   interfere with one another: float (continuous, gentle vertical drift) →
   zoom (per-slide slow scale-up, restarts every slide) → the <img> itself
   (per-slide opacity cross-fade + a soft drop-shadow). Same footprint as
   before (min(440px,90%), square) so the hero's height/spacing is unchanged.
   No fill color, no border, no radius, no box-shadow, no padding on any
   wrapper — the jewellery floats directly on the page's ivory background. */
.hero-slideshow{position:relative;width:min(440px,90%);aspect-ratio:1/1;}
.hero-slide-float{width:100%;height:100%;display:flex;align-items:center;justify-content:center;animation:heroFloat 5s ease-in-out infinite alternate;}
@keyframes heroFloat{from{transform:translateY(0);}to{transform:translateY(-10px);}}
.hero-slide-zoom{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.hero-slide-zoom.is-visible{animation:heroLuxuryZoom 3.9s ease-out forwards;}
@keyframes heroLuxuryZoom{from{transform:scale(1);}to{transform:scale(1.03);}}
.hero-slide-img{
  width:100%;height:100%;object-fit:contain;
  opacity:0;
  /* Very soft luxury shadow beneath the jewellery — safe to use a real
     drop-shadow here (unlike a boxed photo) because these images are truly
     transparent, so the shadow hugs the jewellery's own silhouette. */
  filter:drop-shadow(0 22px 24px rgba(60,40,10,0.16));
  transition:opacity 0.4s ease;
}
.hero-slide-img.is-visible{opacity:1;}
/* Hero headline/subheading cross-fade in sync with the image (see JS). */
.hero-text-fade{transition:opacity 0.35s ease;}
.hero-text-fade.is-fading{opacity:0;}
@media (prefers-reduced-motion: reduce){
  .hero-slide-img{transition:none;}
  .hero-slide-img.is-visible{opacity:1;}
  .hero-slide-zoom.is-visible{animation:none;transform:none;}
  .hero-slide-float{animation:none;}
  .hc-bar.is-active .hc-bar-fill{animation:none;width:100%;}
  .hero-text-fade{transition:none;}
}

/* ============================================================================
   HOMEPAGE — FEATURED COLLECTIONS / BEST SELLERS / NEW ARRIVALS / WHY CHOOSE US
   Replaces the old "Shop by Category" grid + thin trust-bar strip (removed).
   All four blocks below reuse existing patterns: .section-header (already
   used by every other page on the site), .product-grid/.product-card (the
   same catalogue card used everywhere, so Best Sellers/New Arrivals get
   real galleries/detail-view/info.json data for free), and .why-trust/
   .why-card (the existing "Why Families Trust Us" component from the About
   page — see index.html's #about section).
   ============================================================================ */

/* Featured Collections — new, since there's no existing banner-grid
   component on the site to reuse. Kept deliberately simple: a photo, a
   soft gradient for label legibility, and a label — no invented copy. */
.featured-collections{max-width:1320px;margin:0 auto;padding:3rem 3rem 3.5rem;}
.fc-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.25rem;
}
.fc-card{
  position:relative;display:block;width:100%;aspect-ratio:3/4;
  border:none;padding:0;cursor:pointer;font-family:inherit;
  border-radius:16px;overflow:hidden;background:var(--cream);
  box-shadow:0 10px 26px rgba(184,134,11,0.10);
  transition:box-shadow 0.35s ease;
  text-decoration:none;color:inherit; /* Phase 3B: these render as <a> now, not <button> */
}
.fc-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;display:block;
  transition:transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.fc-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(20,14,4,0.72) 100%);
}
.fc-label{
  position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1rem;
  font-family:'Playfair Display',serif;font-size:1rem;font-weight:600;
  letter-spacing:0.03em;color:#FFF6E0;text-align:center;
}
.fc-card:hover{box-shadow:0 16px 38px rgba(184,134,11,0.22);}
.fc-card:hover .fc-photo{transform:scale(1.05);}
.fc-card:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(184,134,11,0.35);}

/* Best Sellers / New Arrivals — same .product-grid/.product-card the whole
   catalogue already uses, just centered to a boutique-width column instead
   of stretching edge-to-edge on very wide screens. */
.home-product-grid{max-width:1320px;margin:0 auto;padding:0 3rem 3.5rem;}
.best-sellers,.new-arrivals{padding-top:0.5rem;}

/* New Arrivals reads as a slider at every width (not just mobile, unlike
   the product-detail related-products rail this pattern is borrowed from
   — see .pd-related-scroll in this file). */
.new-arrivals-scroll.product-grid{
  display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
  gap:1.5rem;padding-bottom:0.75rem;-webkit-overflow-scrolling:touch;
}
.new-arrivals-scroll.product-grid .product-card{
  scroll-snap-align:start;flex:0 0 280px;
}

/* Why Choose Us — reuses .why-trust/.why-card as-is; this modifier only
   adds the top/bottom hairline the old .trust-bar had, so the section
   still reads as a distinct band on the homepage. */
.home-why-trust{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding-top:3rem;
}

/* ============================================================================
   PHASE 2 — COLLECTIONS LANDING PAGE + CATEGORY PAGE BANNER
   collections/index.html (the 3 large metal cards) and the banner image
   rendered by js/category-page.js at the top of every real
   collections/<metal>/<type>.html page. Reuses .section-header,
   .pd-breadcrumb, .category-back, .filter-tabs and .product-grid as-is —
   these are the only two pieces of markup Phase 2 actually introduces.
   ============================================================================ */
.collections-landing{max-width:1320px;margin:0 auto;padding:2.5rem 3rem 4rem;}
.cl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem;}
.cl-card{
  display:block;text-decoration:none;color:inherit;
  background:var(--white);border:1px solid var(--border);border-radius:18px;
  overflow:hidden;box-shadow:0 10px 26px rgba(184,134,11,0.08);
  transition:box-shadow 0.35s ease,transform 0.25s ease;
}
.cl-card:hover{box-shadow:0 18px 42px rgba(184,134,11,0.18);transform:translateY(-4px);}
.cl-card:focus-visible{outline:2px solid var(--gold-lux,#B8860B);outline-offset:2px;}
.cl-photo{height:260px;background:var(--cream);overflow:hidden;}
/* object-fit:contain (not cover) — these are full display-case product
   shots where every piece of jewellery must stay visible; cover would
   crop into the outer necklaces/earrings on some card widths. contain
   scales the whole photo down to fit and centers it, so all three cards
   get identical, uncropped, non-stretched images with equal letterboxed
   padding regardless of the source photo's own aspect ratio. */
.cl-photo img{width:100%;height:100%;object-fit:contain;object-position:center center;display:block;}
/* Per-card object-position hooks — same box size, same object-fit, same
   scaling algorithm for all three cards (that part is the shared rule
   above and must stay identical so the row reads as one consistent set).
   These three overrides exist only so that if the gold/silver/diamond
   source photos don't frame their display case with exactly the same
   margin/off-center amount, that one photo can be nudged back to visual
   center without touching the other two or the shared layout. All three
   start at the same "center center" as the default above; adjust only
   the ones that actually look off once the real photos are in place. */
.gold-card .cl-photo img{object-position:center center;}
.silver-card .cl-photo img{object-position:center center;}
.diamond-card .cl-photo img{object-position:center center;}
.cl-photo-tone{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#F7F2E8,#EFE7D6);}
.cl-body{padding:1.6rem 1.7rem 1.9rem;}
.cl-title{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:700;color:var(--text);margin-bottom:0.6rem;}
.cl-desc{font-size:0.9rem;color:var(--text2);line-height:1.75;margin-bottom:1.2rem;}
.cl-btn{
  display:inline-flex;align-items:center;gap:0.4rem;
  font-family:'Montserrat',sans-serif;font-size:0.82rem;font-weight:600;letter-spacing:0.03em;
  color:var(--gold-lux,#B8860B);
}
.cl-btn svg{width:16px;height:16px;stroke:var(--gold-lux,#B8860B);transition:transform 0.25s ease;}
.cl-card:hover .cl-btn svg{transform:translateX(3px);}

/* Category page banner — a real product photo above the breadcrumb/title
   on a category page that has one; pages with no real photography yet
   (comingSoon:true with no banner) simply skip this block. */
.category-banner{
  max-width:1320px;margin:0 auto 1.5rem;padding:0 3rem;
}
.category-banner img{
  width:100%;max-height:380px;object-fit:cover;object-position:center 30%;
  border-radius:18px;display:block;
}

/* ============================================================================
   RESPONSIVE — preserve premium look on tablet & mobile (no horizontal scroll)
   ============================================================================ */
@media(max-width:1100px){
  .top-bar-inner,nav{padding-left:1.5rem;padding-right:1.5rem;}
  .hero-content{padding-left:1.5rem;padding-right:1.5rem;}
  .nav-links{gap:1.1rem !important;}
  .nav-links a{font-size:0.7rem !important;}
  .featured-collections{padding-left:1.5rem;padding-right:1.5rem;}
  .home-product-grid{padding-left:1.5rem;padding-right:1.5rem;}
  .fc-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .collections-landing{padding-left:1.5rem;padding-right:1.5rem;}
  .cl-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .category-banner{padding-left:1.5rem;padding-right:1.5rem;}
}
@media(max-width:760px){
  .fc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cl-grid{grid-template-columns:minmax(0,1fr);}
}
@media(max-width:480px){
  .fc-grid{grid-template-columns:minmax(0,1fr);}
  .new-arrivals-scroll.product-grid .product-card{flex-basis:78vw;}
}
/* Nav collapses to the burger menu a little earlier than the other
   900px breakpoints below — five nav links + icons need more room than
   the original three-link nav did, so this avoids a cramped in-between
   zone where "Contact Us" would crowd the icon group. */
@media(max-width:1024px){
  nav{flex-wrap:wrap;}
  .nav-links{
    order:3;width:100%;display:none;flex-direction:column;gap:0.2rem !important;
    padding:0.6rem 0 0.2rem;
  }
  nav.open .nav-links{display:flex;}
  .nav-links a{padding:0.55rem 0 !important;}
  .nav-burger{display:flex;}
}
@media(max-width:900px){
  :root{--header-h:118px;}
  .top-bar-left{font-size:0.68rem;}
  .hero-layout{grid-template-columns:minmax(0,1fr);text-align:center;gap:1rem;min-height:auto;}
  .hero-text{padding-right:0;}
  .hero-eyebrow{letter-spacing:0.28em;}
  .hero-divider{justify-content:center;}
  .hero-btns{justify-content:center !important;}
  .hero-carousel-dots{justify-content:center;}
  .hero-visual{order:-1;min-height:300px;}
}
@media(max-width:600px){
  :root{--header-h:150px;}
  .top-bar-center{display:none;}
  .nav-brand-name{font-size:1.25rem !important;}
  .hero-h1,.hero-h1-orange{font-size:clamp(2.1rem,9vw,2.8rem) !important;}
}


/* ============================================================================
   REVIEW & TESTIMONIALS SYSTEM (NEW) — luxury black & gold, additive only
   ============================================================================ */
.rv-system{
  max-width:1180px;margin:0 auto 2.5rem;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.6rem;align-items:start;
}
.rv-overview{display:flex;flex-direction:column;gap:1.2rem;}

/* Overall rating hero */
.rv-overall{
  background:#FFFFFF;
  border:1px solid var(--border);border-radius:18px;
  padding:1.6rem 1.4rem;text-align:center;
  box-shadow:0 12px 34px rgba(184,134,11,0.14);
}
.rv-overall-num{
  font-family:'Playfair Display',serif;font-size:3.2rem;font-weight:700;line-height:1;
  background:linear-gradient(92deg,#B8860B,#C9A227 60%,#D4AF37);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#B8860B;
}
.rv-overall-stars{font-size:1.5rem;letter-spacing:0.12em;color:#D4AF37;margin:0.4rem 0 0.5rem;}
.rv-overall-stars .dim{color:var(--border);}
.rv-overall-sub{font-family:'Poppins',sans-serif;font-size:0.9rem;color:#666666;font-weight:300;}
.rv-overall-sub span{color:#B8860B;font-weight:500;}

/* Rating breakdown */
.rv-breakdown{
  background:#FFFFFF;
  border:1px solid var(--border);border-radius:18px;padding:1.3rem 1.4rem;
}
.rv-brow{display:flex;align-items:center;gap:0.7rem;margin:0.45rem 0;}
.rv-brow-label{font-family:'Montserrat',sans-serif;font-size:0.78rem;color:#666666;min-width:64px;white-space:nowrap;}
.rv-brow-label b{color:#B8860B;font-weight:600;}
.rv-bar{flex:1;height:8px;border-radius:99px;background:#F2ECE0;overflow:hidden;}
.rv-bar-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#B8860B,#D4AF37);transition:width 0.9s cubic-bezier(.2,.7,.2,1);}
.rv-brow-pct{font-family:'Montserrat',sans-serif;font-size:0.76rem;color:#8a8a8a;min-width:38px;text-align:right;}

/* Stats dashboard */
.rv-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.8rem;
}
.rv-stat{
  background:#F8F6F0;
  border:1px solid var(--border);border-radius:14px;padding:0.95rem 1rem;text-align:center;
}
.rv-stat-wide{grid-column:1 / -1;}
.rv-stat-num{font-family:'Playfair Display',serif;font-size:1.45rem;font-weight:600;color:#B8860B;}
.rv-stat-label{font-family:'Poppins',sans-serif;font-size:0.74rem;color:#8a8a8a;margin-top:2px;letter-spacing:0.03em;}

/* Feedback form */
.rv-form-card{
  background:#FFFFFF;
  border:1px solid var(--border);border-radius:18px;padding:1.7rem 1.6rem;
  box-shadow:0 14px 40px rgba(184,134,11,0.14);position:sticky;top:120px;
}
.rv-form-title{font-family:'Playfair Display',serif;font-size:1.5rem;color:#2B2B2B;margin-bottom:0.25rem;}
.rv-form-sub{font-family:'Cormorant Garamond',serif;font-size:1.02rem;color:#666666;margin-bottom:1.2rem;}
.rv-field{margin-bottom:1rem;position:relative;}
.rv-label{display:block;font-family:'Montserrat',sans-serif;font-size:0.76rem;letter-spacing:0.04em;color:#666666;margin-bottom:0.4rem;}
.rv-label span{color:#B8860B;}
.rv-input{
  width:100%;padding:0.8rem 0.95rem;border-radius:10px;
  background:#F6F1E8;border:1.5px solid var(--border);
  color:#2B2B2B;font-family:'Poppins',sans-serif;font-size:0.92rem;transition:border-color 0.2s,box-shadow 0.2s;
}
.rv-input::placeholder{color:#8a8a8a;}
.rv-input:focus{outline:none;border-color:#B8860B;box-shadow:0 0 0 3px rgba(184,134,11,0.14);}
.rv-textarea{resize:vertical;min-height:96px;}
.rv-input.rv-invalid{border-color:#c0395e;box-shadow:0 0 0 3px rgba(192,57,94,0.12);}
.rv-char{position:absolute;right:2px;bottom:-18px;font-family:'Montserrat',sans-serif;font-size:0.68rem;color:#8a8a8a;}
.rv-error{display:block;min-height:1rem;margin-top:0.35rem;font-family:'Poppins',sans-serif;font-size:0.74rem;color:#c0395e;}

/* Star input */
.rv-stars-input{display:flex;align-items:center;gap:0.2rem;}
.rv-star-btn{
  background:none;border:none;cursor:pointer;font-size:1.9rem;line-height:1;padding:0 2px;
  color:#E6D8B8;transition:color 0.15s,transform 0.15s;
}
.rv-star-btn:hover{transform:scale(1.12);}
.rv-star-btn.on{color:#D4AF37;}
.rv-star-readout{margin-left:0.7rem;font-family:'Montserrat',sans-serif;font-size:0.78rem;color:#8a8a8a;}

/* Honeypot */
.rv-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Submit + spinner + thank you */
.rv-submit{
  position:relative;width:100%;margin-top:0.4rem;padding:0.95rem 1.5rem;border:none;border-radius:10px;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-size:0.86rem;font-weight:600;letter-spacing:0.06em;color:#FFFFFF;
  background:#B8860B;
  box-shadow:0 8px 26px rgba(184,134,11,0.26),inset 0 1px 0 rgba(255,255,255,0.18);
  transition:transform 0.2s,box-shadow 0.2s,opacity 0.2s,background 0.2s;
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
}
.rv-submit:hover{background:#D4AF37;transform:translateY(-2px);box-shadow:0 12px 34px rgba(184,134,11,0.36);}
.rv-submit:disabled{opacity:0.75;cursor:not-allowed;transform:none;}
.rv-submit.loading .rv-submit-text{opacity:0.65;}
.rv-spinner{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,0.35);border-top-color:#FFFFFF;border-radius:50%;animation:rvspin 0.7s linear infinite;}
.rv-submit.loading .rv-spinner{display:inline-block;}
@keyframes rvspin{to{transform:rotate(360deg);}}
.rv-thankyou{
  display:none;align-items:center;gap:0.55rem;margin-top:1rem;padding:0.85rem 1rem;border-radius:10px;
  background:rgba(37,211,102,0.10);border:1px solid rgba(37,211,102,0.3);
  font-family:'Poppins',sans-serif;font-size:0.86rem;color:#1d7a4c;
}
.rv-thankyou.show{display:flex;animation:rvFadeUp 0.5s ease;}
.rv-thankyou svg{width:20px;height:20px;stroke:#1d7a4c;flex-shrink:0;}

/* Dynamic review cards (reuse existing .review-card look) + entrance animation */
.review-card.rv-dynamic{animation:rvCardIn 0.6s cubic-bezier(.2,.7,.2,1) both;}
@keyframes rvCardIn{from{opacity:0;transform:translateY(24px) scale(0.98);}to{opacity:1;transform:none;}}
@keyframes rvFadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.review-card .rv-card-rating{color:#D4AF37;font-size:1.05rem;letter-spacing:0.1em;}
.review-card .rv-card-rating .dim{color:#E6D8B8;}
.rv-empty-note{grid-column:1/-1;text-align:center;color:#8a8a8a;font-family:'Cormorant Garamond',serif;font-size:1.05rem;padding:0.5rem 0;}

/* ---- Admin panel ---- */
.rv-admin-toggle-wrap{max-width:1180px;margin:0 auto;text-align:right;padding:0 0.2rem 0.8rem;}
.rv-admin-toggle{
  background:#FFFFFF;border:1px solid var(--border);color:#666666;
  font-family:'Montserrat',sans-serif;font-size:0.7rem;letter-spacing:0.08em;
  padding:0.4rem 0.9rem;border-radius:8px;cursor:pointer;transition:all 0.2s;
}
.rv-admin-toggle:hover{color:#B8860B;border-color:#D4AF37;}
.rv-admin{
  max-width:1180px;margin:0 auto 1.5rem;
  background:#FFFFFF;
  border:1px solid var(--border);border-radius:18px;padding:1.4rem 1.5rem;
  box-shadow:0 18px 50px rgba(184,134,11,0.18);animation:rvFadeUp 0.35s ease;
}
.rv-admin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.rv-admin-title{font-family:'Playfair Display',serif;font-size:1.3rem;color:#B8860B;}
.rv-admin-actions{display:flex;align-items:center;gap:0.9rem;}
.rv-admin-count{font-family:'Montserrat',sans-serif;font-size:0.74rem;color:#8a8a8a;}
.rv-admin-close{background:none;border:none;color:#8a8a8a;font-size:1rem;cursor:pointer;transition:color 0.2s;}
.rv-admin-close:hover{color:#c0395e;}
.rv-admin-filters{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem;}
.rv-afilter{
  background:#F6F1E8;border:1px solid var(--border);color:#666666;
  font-family:'Montserrat',sans-serif;font-size:0.72rem;padding:0.35rem 0.85rem;border-radius:99px;cursor:pointer;transition:all 0.2s;
}
.rv-afilter.active,.rv-afilter:hover{background:#B8860B;color:#FFFFFF;border-color:#B8860B;}
.rv-admin-list{display:flex;flex-direction:column;gap:0.8rem;max-height:520px;overflow-y:auto;}
.rv-arow{
  background:#FDFBF6;border:1px solid var(--border);border-radius:12px;padding:0.95rem 1.1rem;
  display:flex;flex-direction:column;gap:0.5rem;
}
.rv-arow-top{display:flex;align-items:center;justify-content:space-between;gap:0.8rem;flex-wrap:wrap;}
.rv-arow-name{font-family:'Playfair Display',serif;font-size:1rem;color:#2B2B2B;}
.rv-arow-meta{font-family:'Poppins',sans-serif;font-size:0.72rem;color:#8a8a8a;}
.rv-arow-stars{color:#D4AF37;font-size:0.92rem;letter-spacing:0.08em;}
.rv-arow-stars .dim{color:#E6D8B8;}
.rv-arow-msg{font-family:'Poppins',sans-serif;font-size:0.86rem;color:#666666;line-height:1.5;font-weight:300;}
.rv-arow-msg textarea{width:100%;margin-top:0.4rem;}
.rv-status-chip{font-family:'Montserrat',sans-serif;font-size:0.64rem;letter-spacing:0.06em;text-transform:uppercase;padding:0.18rem 0.55rem;border-radius:99px;}
.rv-chip-pending{background:rgba(184,134,11,0.14);color:#8a6608;}
.rv-chip-approved{background:rgba(37,211,102,0.14);color:#1d7a4c;}
.rv-chip-rejected{background:rgba(192,57,94,0.12);color:#a12a4c;}
.rv-arow-btns{display:flex;gap:0.45rem;flex-wrap:wrap;}
.rv-abtn{
  font-family:'Montserrat',sans-serif;font-size:0.7rem;padding:0.4rem 0.8rem;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:all 0.18s;
}
.rv-abtn-approve{background:rgba(37,211,102,0.12);color:#1d7a4c;border-color:rgba(37,211,102,0.3);}
.rv-abtn-reject{background:rgba(255,170,0,0.12);color:#a3690a;border-color:rgba(255,170,0,0.3);}
.rv-abtn-edit{background:rgba(184,134,11,0.10);color:#8a6608;border-color:rgba(184,134,11,0.3);}
.rv-abtn-save{background:#B8860B;color:#FFFFFF;border-color:#B8860B;}
.rv-abtn-delete{background:rgba(192,57,94,0.10);color:#a12a4c;border-color:rgba(192,57,94,0.3);}
.rv-abtn:hover{filter:brightness(1.15);transform:translateY(-1px);}

/* Responsive */
@media(max-width:880px){
  .rv-system{grid-template-columns:minmax(0,1fr);}
  .rv-form-card{position:static;}
}
@media(max-width:600px){
  .rv-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .rv-overall-num{font-size:2.6rem;}
  .rv-brow-label{min-width:58px;font-size:0.72rem;}
}


/* ==========================================================================
   PHASE 1 — PREMIUM POLISH LAYER (2026 luxury refinements)
   Appended last so it layers cleanly over existing styles without
   altering structure or breaking the working responsive layout.
   ========================================================================== */
:root{
  --p1-ease:cubic-bezier(.22,.61,.36,1);
  --p1-shadow-sm:0 2px 10px rgba(26,18,8,.06);
  --p1-shadow-md:0 10px 30px rgba(26,18,8,.10);
  --p1-shadow-lg:0 22px 60px rgba(26,18,8,.16);
  --p1-ring:0 0 0 3px rgba(184,134,11,.35);
}
/* Consistent, buttery motion on interactive elements */
.category-card,.product-card,.subcat-card,.trust-stat-card,.why-card,.review-card,
.mv-card,.promise-box,.process-step,
.btn-outline,.hero-cta,.product-cta,.filter-btn,.nav-icon,.category-card-link,
.contact-form-card,.contact-info-card{
  transition:transform .45s var(--p1-ease),box-shadow .45s var(--p1-ease),
             border-color .3s var(--p1-ease),background-color .3s var(--p1-ease),
             color .3s var(--p1-ease) !important;
}
/* Refined card elevation on hover */
.category-card:hover,.product-card:hover,.subcat-card:hover,.trust-stat-card:hover,.why-card:hover,
.mv-card:hover,.process-step:hover{
  transform:translateY(-6px) !important;
  box-shadow:var(--p1-shadow-lg) !important;
}
.review-card:hover{transform:translateY(-4px) !important;box-shadow:var(--p1-shadow-md) !important;}

/* Premium button micro-interactions */
.btn-outline,.hero-cta,.product-cta{will-change:transform;}
.btn-outline:hover,.hero-cta:hover,.product-cta:hover{transform:translateY(-2px);}
.btn-outline:active,.hero-cta:active,.product-cta:active{transform:translateY(0) scale(.99);}

/* Accessible, luxe focus states (keyboard only) */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible,
.nav-card:focus-visible,.category-card:focus-visible,.product-card:focus-visible{
  outline:none !important;
  box-shadow:var(--p1-ring) !important;
  border-radius:10px;
}

/* Nav polish — subtle depth once you scroll past the hero top */
nav{transition:box-shadow .35s var(--p1-ease),background-color .35s var(--p1-ease);}
nav:hover{box-shadow:var(--p1-shadow-sm);}
.nav-icon{border-radius:50%;}
.nav-icon:hover{transform:translateY(-1px);}
/* Premium hover glow — soft gold halo behind each icon */
.nav-icon::before{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  background:rgba(184,134,11,0.10);
  opacity:0;transform:scale(0.6);
  transition:opacity 0.25s var(--p1-ease),transform 0.25s var(--p1-ease);
  z-index:-1;
}
.nav-icon:hover::before{opacity:1;transform:scale(1);}
@media (prefers-reduced-motion: reduce){
  .nav-icon::before{transition:none;}
}

/* Mobile menu — cleaner luxury dropdown */
@media(max-width:600px){
  nav.open{box-shadow:var(--p1-shadow-md);}
  nav.open .nav-links{
    background:rgba(253,250,244,.98);
    border-top:1px solid var(--border);
    margin-top:.4rem;
  }
  .nav-links a{border-bottom:1px solid rgba(232,220,200,.55);}
  .nav-links a:last-child{border-bottom:none;}
  .nav-burger span{transition:transform .3s var(--p1-ease),opacity .3s var(--p1-ease);}
}

/* Smoother section entrance for the active SPA panel */
section.active{animation:p1FadeUp .55s var(--p1-ease) both;}
@keyframes p1FadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* Respect reduced-motion for all Phase 1 additions */
@media (prefers-reduced-motion: reduce){
  .category-card,.product-card,.subcat-card,.trust-stat-card,.why-card,.review-card,
  .mv-card,.promise-box,.process-step,
  .btn-outline,.hero-cta,.product-cta,.nav-icon,.rv-loadmore-btn,section.active{
    transition:none !important;animation:none !important;transform:none !important;
  }
}


/* ==========================================================================
   PHASE 2 — FEATURES, ACCESSIBILITY, FORMS & UX
   Contact-form states, mobile-menu dark fix, focus & skip-link, loading UX.
   Appended last so it wins the cascade. Additive only.
   ========================================================================== */

/* ---- Mobile menu panel: matches the ivory nav (previously forced dark) ---- */
@media(max-width:600px){
  nav.open .nav-links{
    background:rgba(250,248,243,0.98) !important;
    border-top:1px solid var(--border) !important;
    margin-top:.4rem;
    backdrop-filter:blur(14px);
  }
  .nav-links a{border-bottom:1px solid var(--border) !important;}
  .nav-links a:last-child{border-bottom:none !important;}
}

/* ---- Skip-to-content link (keyboard / screen-reader accessibility) ---- */
.skip-link{
  position:fixed;top:-60px;left:12px;z-index:2000;
  background:#B8860B;color:#FFFFFF;
  font-family:'Montserrat',sans-serif;font-size:0.82rem;font-weight:600;
  padding:0.6rem 1.1rem;border-radius:8px;text-decoration:none;
  box-shadow:0 8px 26px rgba(184,134,11,0.30);transition:top 0.25s ease;
}
.skip-link:focus{top:12px;outline:none;box-shadow:0 0 0 3px rgba(184,134,11,0.35);}

/* ---- Global visible focus for keyboard users ---- */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(184,134,11,0.35) !important;
  border-radius:8px;
}

/* ---- Contact form: validation, error, spinner, success states ---- */
.form-input.cf-invalid,.form-textarea.cf-invalid{
  border-color:#c0395e !important;
  box-shadow:0 0 0 3px rgba(192,57,94,0.14) !important;
}
.cf-error{
  display:block;min-height:1rem;margin-top:0.35rem;
  font-family:'Poppins',sans-serif;font-size:0.74rem;color:#c0395e;
}
/* honeypot — visually hidden, off-screen, not tabbable */
.cf-hp{
  position:absolute !important;left:-9999px !important;
  width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;
}
.btn-send{position:relative;}
.btn-send:disabled{opacity:0.75;cursor:not-allowed;transform:none !important;}
.cf-spinner{
  display:none;width:16px;height:16px;flex-shrink:0;
  border:2px solid rgba(255,255,255,0.35);border-top-color:#FFFFFF;border-radius:50%;
  animation:cfspin 0.7s linear infinite;
}
.btn-send.loading .cf-spinner{display:inline-block;}
.btn-send.loading .cf-send-icon{display:none;}
@keyframes cfspin{to{transform:rotate(360deg);}}
.cf-thankyou{
  display:none;align-items:center;gap:0.55rem;margin-top:1rem;
  padding:0.85rem 1rem;border-radius:10px;
  background:rgba(37,211,102,0.10);
  border:1px solid rgba(37,211,102,0.3);
  font-family:'Poppins',sans-serif;font-size:0.86rem;color:#1d7a4c;line-height:1.5;
}
.cf-thankyou.show{display:flex;animation:cfFadeUp 0.5s ease;}
.cf-thankyou svg{width:20px;height:20px;stroke:#1d7a4c;flex-shrink:0;}
@keyframes cfFadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
/* Real-failure state (network/API error) — same layout as .cf-thankyou,
   error-red palette reusing the existing .cf-error/.cf-invalid color so
   no new design language is introduced. Never auto-hidden like the
   success message: a failed submission stays visible (with the user's
   input still intact in the form) until they retry or leave the page. */
.cf-submit-error{
  display:none;align-items:center;gap:0.55rem;margin-top:1rem;
  padding:0.85rem 1rem;border-radius:10px;
  background:rgba(192,57,94,0.08);
  border:1px solid rgba(192,57,94,0.3);
  font-family:'Poppins',sans-serif;font-size:0.86rem;color:#c0395e;line-height:1.5;
}
.cf-submit-error.show{display:flex;animation:cfFadeUp 0.5s ease;}
.cf-submit-error svg{width:20px;height:20px;stroke:#c0395e;flex-shrink:0;}
.cf-submit-error a{color:#c0395e;font-weight:600;text-decoration:underline;}

/* ---- Overriding the earlier light Phase-1 mobile menu block cleanly ---- */
@media(max-width:600px){
  nav.open{box-shadow:0 12px 34px rgba(0,0,0,0.6);}
}

/* ==========================================================================
   NAV SEARCH PANEL — showroom site search only (no cart/account/wishlist).
   Matches existing card/luxury styling.
   ========================================================================== */
.nav-modal-backdrop{
  position:fixed;inset:0;z-index:2100;
  background:rgba(43,43,43,0.35);backdrop-filter:blur(2px);
}
.nav-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:2101;width:min(420px,90vw);max-height:80vh;overflow-y:auto;
  background:#FFFFFF;border:1px solid var(--border);border-radius:18px;
  box-shadow:0 22px 60px rgba(43,43,43,0.28);
  padding:1.5rem 1.6rem;
}
.nav-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.nav-modal-title{font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:600;color:var(--gold-lux,#B8860B);}
.nav-modal-close{
  background:none;border:none;color:#666666;font-size:1rem;line-height:1;
  cursor:pointer;padding:0.3rem;transition:color 0.2s;
}
.nav-modal-close:hover{color:#B8860B;}
.nav-search-input{
  width:100%;padding:0.8rem 1rem;border-radius:10px;
  background:#F6F1E8;border:1.5px solid var(--border);
  color:#2B2B2B;font-family:'Poppins',sans-serif;font-size:0.92rem;
  outline:none;transition:border-color 0.2s;
}
.nav-search-input:focus{border-color:#B8860B;}
.nav-search-results{margin-top:0.9rem;display:flex;flex-direction:column;gap:0.35rem;max-height:280px;overflow-y:auto;}
.nav-search-item{
  text-align:left;background:none;border:none;border-radius:8px;
  padding:0.65rem 0.7rem;font-family:'Poppins',sans-serif;font-size:0.88rem;color:#2B2B2B;
  cursor:pointer;transition:background 0.2s,color 0.2s;
}
.nav-search-item:hover{background:#F6F1E8;color:#B8860B;}
.nav-search-empty{font-family:'Poppins',sans-serif;font-size:0.85rem;color:#8a8a8a;padding:0.5rem 0.2rem;}
@media(max-width:600px){
  .nav-modal{width:92vw;padding:1.3rem 1.3rem;}
}

/* ============================================================================
   COLLECTIONS MEGA MENU — dropdown trigger + panel. Items are rendered by
   js/nav-collections.js, which checks whether each target section exists in
   the DOM; unimplemented categories render as disabled "Coming Soon" entries
   so the menu is future-proof (no header changes needed when new collection
   pages are added later).
   ============================================================================ */
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{display:inline-flex !important;align-items:center;gap:0.3rem;cursor:pointer;}
.nav-caret{width:12px;height:12px;stroke:currentColor;transition:transform 0.25s var(--p1-ease,ease);}
.nav-dropdown.is-open .nav-caret,.nav-dropdown:hover .nav-caret,.nav-dropdown:focus-within .nav-caret{transform:rotate(180deg);}

.collections-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px) scale(0.98);
  width:min(760px,92vw);max-height:none;
  background:#FFFFFF;border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--p1-shadow-lg,0 22px 60px rgba(26,18,8,.16));
  padding:1.6rem 1.8rem;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 0.22s var(--p1-ease,ease),transform 0.22s var(--p1-ease,ease),visibility 0.22s;
  z-index:1010;
}
.nav-dropdown:hover .collections-menu,
.nav-dropdown:focus-within .collections-menu,
.nav-dropdown.is-open .collections-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1);
}
/* Each metal is its own column, headed by a small gold/silver/diamond-tinted
   label so the grouping reads at a glance — reuses the same three accent
   colors already used for the .category-card.cat-gold/cat-silver/cat-diamond
   border-top treatment on the #collections page, for visual consistency. */
.cmega-col{display:flex;flex-direction:column;gap:0.15rem;}
.cmega-col + .cmega-col{border-left:1px solid var(--border);padding-left:1.6rem;}
.cmega-col-title{
  font-family:'Montserrat',sans-serif;font-size:0.72rem;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;padding:0 0.5rem 0.7rem;margin-bottom:0.3rem;
  border-bottom:1px solid var(--border);
}
.cmega-gold .cmega-col-title{color:var(--gold-lux,#B8860B);}
.cmega-silver .cmega-col-title{color:#8A8F96;}
.cmega-diamond .cmega-col-title{color:#3E8FC4;}
.cmega-item{
  display:flex;align-items:center;gap:0.7rem;
  padding:0.5rem;border-radius:9px;
  font-family:'Montserrat',sans-serif;font-size:0.8rem;font-weight:500;letter-spacing:0.02em;
  color:#2B2B2B;text-decoration:none;
  cursor:pointer;transition:background 0.2s,color 0.2s;
}
.cmega-item:hover,.cmega-item:focus-visible{background:#F6F1E8;color:var(--gold-lux,#B8860B);outline:none;}
.cmega-thumb{
  flex-shrink:0;width:38px;height:38px;border-radius:8px;overflow:hidden;
  background:var(--cream);border:1px solid var(--border);
}
.cmega-thumb img{width:100%;height:100%;object-fit:contain;display:block;}
.cmega-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0.4;margin:0 16px 0 16px;}

@media(max-width:1024px){
  .nav-dropdown-toggle{width:100%;justify-content:space-between;}
  .collections-menu{
    position:static;transform:none;width:100%;max-width:none;
    grid-template-columns:1fr;gap:0;
    border:none;border-radius:0;box-shadow:none;padding:0;margin:0;
    opacity:1;visibility:visible;pointer-events:none;
    max-height:0;overflow:hidden;transition:max-height 0.35s var(--p1-ease,ease);
  }
  .nav-dropdown.is-open .collections-menu{max-height:1400px;pointer-events:auto;}
  .nav-dropdown:hover .collections-menu,
  .nav-dropdown:focus-within .collections-menu,
  .nav-dropdown.is-open .collections-menu{transform:none;}
  .cmega-col + .cmega-col{border-left:none;border-top:1px solid var(--border);padding-left:0;margin-top:0.5rem;padding-top:0.8rem;}
  .cmega-item{border-bottom:1px solid var(--border);border-radius:0;padding:0.65rem 0.4rem;}
}

/* ============================================================================
   PRODUCT GALLERY — multi-angle image viewer (progressive enhancement, JS-driven).
   Only activates on cards where 2+ images are detected at runtime; a card
   with a single photo is left completely untouched — no extra markup, no
   arrows, no dots. Does not alter any existing product-card, typography,
   spacing or colour rule.
   ============================================================================ */
.pg-slide{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity 0.6s ease;pointer-events:none;
}
.pg-slide.pg-active{opacity:1;pointer-events:auto;}
@media (prefers-reduced-motion: reduce){
  .pg-slide{transition:none;}
}
.pg-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,0.88);border:1px solid rgba(0,0,0,0.08);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  z-index:3;transition:background 0.2s,transform 0.15s;
}
.pg-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08);}
.pg-arrow svg{width:14px;height:14px;stroke:#2D2010;}
.pg-prev{left:8px;}
.pg-next{right:8px;}
.pg-dots{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;z-index:3;
}
.pg-dot{
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.65);
  border:none;padding:0;cursor:pointer;
}
.pg-dot.pg-dot-active{background:var(--orange);}
@media(max-width:600px){
  .pg-arrow{width:26px;height:26px;}
}

/* ============================================================================
   PRODUCT DETAIL VIEW — full gallery (large image + thumbnails + zoom +
   fullscreen lightbox), opened by clicking any real product card. Additive
   only: does not change the catalogue grid's look.
   ============================================================================ */
.product-card.pd-clickable{cursor:pointer;}
#product-detail{padding:80px 0 60px;padding-top:var(--header-h);}

.pd-header{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.8rem;
}
.pd-breadcrumb{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;font-size:0.8rem;color:var(--text3);}
.pd-breadcrumb a{color:var(--text2);text-decoration:none;transition:color 0.2s;}
.pd-breadcrumb a:hover{color:var(--orange);}
.pd-crumb-sep{color:var(--text3);opacity:0.6;}
.pd-crumb-current{color:var(--text);font-weight:600;}

.pd-layout{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:3rem;
  padding:0 3rem 3rem;align-items:start;margin-top:1.5rem;
}
.pd-main{
  position:relative;background:linear-gradient(160deg,var(--cream2),var(--cream));
  border:1px solid var(--border);border-radius:22px;overflow:hidden;min-height:460px;
  box-shadow:0 8px 32px rgba(45,32,16,0.06);
  display:flex;align-items:center;justify-content:center;
}
.pd-main-viewport{position:relative;width:100%;height:460px;overflow:hidden;cursor:zoom-in;}
.pd-skeleton{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--cream2) 30%,#fff 50%,var(--cream2) 70%);
  background-size:200% 100%;animation:pdShimmer 1.4s ease-in-out infinite;
}
.pd-skeleton[hidden]{display:none;}
@keyframes pdShimmer{0%{background-position:150% 0;}100%{background-position:-50% 0;}}
.pd-empty{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.6rem;
  color:var(--text3);background:var(--cream2);
}
.pd-empty[hidden]{display:none;}
.pd-empty svg{width:40px;height:40px;opacity:0.5;}
.pd-empty span{font-size:0.82rem;}
.pd-main-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:2rem;
  opacity:0;transition:opacity 0.45s cubic-bezier(.2,.7,.2,1);
  transform-origin:center;will-change:opacity,transform;
}
.pd-main-img.pd-active{opacity:1;z-index:2;}
.pd-main-viewport:hover .pd-main-img.pd-active{
  transform:scale(2);
  transition:opacity 0.45s cubic-bezier(.2,.7,.2,1),transform 0.15s linear;
}
.pd-expand{
  position:absolute;top:16px;right:16px;z-index:3;
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.92);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background 0.2s,transform 0.15s;
}
.pd-expand:hover{background:#fff;transform:scale(1.06);}
.pd-expand svg{width:17px;height:17px;stroke:var(--text);}
.pd-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,0.92);border:1px solid rgba(0,0,0,0.08);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background 0.2s,transform 0.15s;
}
.pd-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08);}
.pd-arrow svg{width:18px;height:18px;stroke:var(--text);}
.pd-arrow.pd-prev{left:16px;}
.pd-arrow.pd-next{right:16px;}
.pd-counter{
  position:absolute;left:16px;bottom:16px;z-index:3;
  background:rgba(26,18,8,0.72);color:#fff;font-size:0.75rem;font-weight:500;
  padding:0.35rem 0.8rem;border-radius:999px;letter-spacing:0.02em;
}
.pd-counter:empty{display:none;}
.pd-thumbs{display:flex;gap:0.8rem;flex-wrap:wrap;padding:1.2rem 0 0;}
.pd-thumb{
  width:76px;height:76px;border-radius:12px;border:2px solid var(--border);
  background:var(--cream2);cursor:pointer;padding:0;overflow:hidden;flex-shrink:0;
  transition:border-color 0.2s,transform 0.2s,box-shadow 0.2s;
}
.pd-thumb:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(45,32,16,0.1);}
.pd-thumb img{width:100%;height:100%;object-fit:contain;padding:6px;}
.pd-thumb.pd-thumb-active{
  border-color:var(--orange);box-shadow:0 0 0 3px rgba(224,123,42,0.15);transform:translateY(-2px);
}

.pd-info{padding-top:0.5rem;}
.pd-cat{font-size:0.8rem;font-weight:600;color:var(--orange-a11y);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.6rem;}
.pd-name{font-family:'Playfair Display',serif;font-size:2rem;font-weight:700;color:var(--text);margin-bottom:1.1rem;line-height:1.25;}
.pd-divider{width:56px;height:2px;background:linear-gradient(90deg,var(--orange),var(--orange-light));margin-bottom:1.3rem;border-radius:2px;}
.pd-weights{font-size:0.95rem;color:var(--text2);line-height:2.1;margin-bottom:1.8rem;}
.pd-note{font-size:0.83rem;color:var(--text2);margin-top:1.3rem;line-height:1.8;}

.pd-related{margin-top:2.5rem;padding-top:1.8rem;border-top:1px solid var(--border);}
.pd-related-title{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:700;color:var(--text);padding:0 3rem;margin-bottom:1.4rem;}

@media(max-width:900px){
  .pd-layout{grid-template-columns:1fr;padding:0 1.5rem 2.5rem;gap:1.8rem;margin-top:1.2rem;}
  .pd-main-viewport{height:380px;}
  .pd-related-title{padding:0 1.5rem;}
}
@media(max-width:600px){
  .pd-breadcrumb{font-size:0.74rem;}
  .pd-main-viewport{height:300px;}
  .pd-main-img{padding:1.2rem;}
  .pd-arrow{width:42px;height:42px;}
  .pd-expand{width:38px;height:38px;}
  .pd-thumb{width:64px;height:64px;}
  .pd-name{font-size:1.5rem;}
  .pd-related-scroll.product-grid{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;
    padding:0 1.5rem 0.5rem;-webkit-overflow-scrolling:touch;
  }
  .pd-related-scroll.product-grid .product-card{scroll-snap-align:start;flex:0 0 78vw;}
}
@media (prefers-reduced-motion: reduce){
  .pd-main-img{transition:none;}
  .pd-main-viewport:hover .pd-main-img.pd-active{transform:none;}
  .pd-skeleton{animation:none;}
  .pd-thumb,.pd-arrow,.pd-expand{transition:none;}
}

/* Focus visibility for keyboard users */
.product-card.pd-clickable:focus-visible,
.pd-thumb:focus-visible,
.pd-arrow:focus-visible,
.pd-expand:focus-visible,
.pd-breadcrumb a:focus-visible,
.pd-lightbox-close:focus-visible,
.pd-name:focus-visible{
  outline:2px solid var(--orange);outline-offset:2px;
}
.pd-name:focus{outline:none;} /* programmatic focus-on-navigate shouldn't ring for mouse users; :focus-visible above still covers keyboard */

/* Fullscreen lightbox */
.pd-lightbox-backdrop{
  position:fixed;inset:0;background:rgba(10,8,4,0.94);z-index:2000;
  opacity:0;transition:opacity 0.3s ease;
}
.pd-lightbox-backdrop.pd-open{opacity:1;}
.pd-lightbox-backdrop[hidden]{display:none;}
.pd-lightbox{
  position:fixed;inset:0;z-index:2001;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2rem;opacity:0;transform:scale(0.97);
  transition:opacity 0.3s ease,transform 0.3s ease;
}
.pd-lightbox.pd-open{opacity:1;transform:scale(1);}
.pd-lightbox[hidden]{display:none;}
.pd-lightbox-img{
  max-width:88vw;max-height:70vh;object-fit:contain;
  opacity:0;transition:opacity 0.35s ease;
}
.pd-lightbox-img.pd-active{opacity:1;}
.pd-lightbox-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;}
.pd-lightbox-counter{color:rgba(255,255,255,0.7);font-size:0.78rem;margin-top:0.8rem;letter-spacing:0.03em;}
.pd-lightbox-counter:empty{display:none;}
.pd-lightbox-close{
  position:absolute;top:1.2rem;right:1.5rem;z-index:3;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.08);color:#fff;font-size:1.2rem;cursor:pointer;
  transition:background 0.2s;
}
.pd-lightbox-close:hover{background:rgba(255,255,255,0.18);}
.pd-lightbox .pd-arrow{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.25);}
.pd-lightbox .pd-arrow svg{stroke:#fff;}
.pd-lightbox .pd-arrow:hover{background:rgba(255,255,255,0.2);}
.pd-lightbox-thumbs{display:flex;gap:0.6rem;margin-top:1rem;flex-wrap:wrap;justify-content:center;max-width:90vw;}
.pd-lightbox-thumbs .pd-thumb{border-color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.06);}
.pd-lightbox-thumbs .pd-thumb.pd-thumb-active{border-color:var(--orange-light);}
@media(max-width:600px){
  .pd-lightbox-img{max-height:58vh;}
  .pd-lightbox-close{width:40px;height:40px;top:0.8rem;right:0.8rem;}
}

/* ============================================================================
   KNOWLEDGE CENTER — separate static pages under /knowledge/, sharing this
   stylesheet. Prefixed "kc-" throughout so nothing here can collide with the
   main SPA's classes. See knowledge/index.html for the hub page and
   js/knowledge.js for the (tiny, dependency-free) accordion behaviour.
   ============================================================================ */
.kc-header{
  position:sticky;top:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:0.9rem 3rem;background:rgba(253,250,244,0.95);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.kc-logo{display:flex;align-items:center;gap:0.6rem;text-decoration:none;}
.kc-logo img{width:38px;height:38px;object-fit:contain;}
.kc-logo span{
  font-family:'Playfair Display',serif;font-weight:600;font-size:1.1rem;letter-spacing:0.06em;
  color:var(--gold-lux,#B8860B);
}
.kc-header-actions{display:flex;align-items:center;gap:1.1rem;}
.kc-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;color:#2B2B2B;transition:color 0.2s,background 0.2s;
}
.kc-icon-btn:hover{background:rgba(184,134,11,0.08);color:var(--gold-lux,#B8860B);}
.kc-icon-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;}
.kc-back-link{
  font-family:'Montserrat',sans-serif;font-size:0.76rem;font-weight:600;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--gold-a11y,#8A6608);text-decoration:none;
  border:1.5px solid rgba(184,134,11,0.35);border-radius:999px;padding:0.5rem 1.1rem;
  transition:background 0.2s,border-color 0.2s;white-space:nowrap;
}
.kc-back-link:hover{background:rgba(184,134,11,0.08);border-color:var(--gold-lux,#B8860B);}

.kc-breadcrumb{
  max-width:820px;margin:1.6rem auto 0;padding:0 3rem;
  font-family:'Poppins',sans-serif;font-size:0.8rem;color:var(--text3);
}
.kc-breadcrumb a{color:var(--text3);text-decoration:none;}
.kc-breadcrumb a:hover{color:var(--gold-lux,#B8860B);}
.kc-breadcrumb span{margin:0 0.4rem;opacity:0.6;}
.kc-breadcrumb [aria-current]{color:var(--text2);}

/* ---- Hub page ---- */
.kc-hero{max-width:820px;margin:0 auto;padding:1.6rem 3rem 0;text-align:center;}
.kc-hero h1{
  font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.9rem,3.4vw,2.6rem);
  color:var(--gold-lux,#B8860B);margin-bottom:0.7rem;
}
.kc-hero p{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--text2);line-height:1.7;}
.kc-hub-grid{
  max-width:1200px;margin:2.4rem auto 0;padding:0 3rem 4rem;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;
}
.kc-card{
  display:flex;flex-direction:column;gap:0.7rem;
  background:#fff;border:1px solid var(--border);border-radius:18px;padding:1.7rem;
  text-decoration:none;transition:transform 0.3s,box-shadow 0.3s,border-color 0.3s;
}
.kc-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(184,134,11,0.12);border-color:var(--gold-lux,#B8860B);}
.kc-card-icon{
  width:48px;height:48px;border-radius:12px;background:rgba(184,134,11,0.10);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
}
.kc-card-tag{
  font-family:'Montserrat',sans-serif;font-size:0.68rem;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--gold-a11y,#8A6608);
}
.kc-card h3{font-family:'Playfair Display',serif;font-size:1.12rem;font-weight:700;color:var(--text);}
.kc-card p{font-family:'Cormorant Garamond',serif;font-size:0.98rem;color:var(--text2);line-height:1.6;}
.kc-card-meta{font-family:'Poppins',sans-serif;font-size:0.74rem;color:var(--text3);margin-top:auto;}

/* ---- Article page ---- */
.kc-article{max-width:820px;margin:0 auto;padding:1.6rem 3rem 4rem;}
.kc-article-head{padding:1.6rem 0 2rem;border-bottom:1px solid var(--border);margin-bottom:2rem;}
.kc-category-tag{
  display:inline-block;font-family:'Montserrat',sans-serif;font-size:0.72rem;font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--gold-a11y,#8A6608);
  background:rgba(184,134,11,0.08);padding:0.35rem 0.9rem;border-radius:999px;margin-bottom:1rem;
}
.kc-article-head h1{
  font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);
  color:var(--text);line-height:1.25;margin-bottom:0.9rem;
}
.kc-article-meta{
  display:flex;flex-wrap:wrap;gap:0.5rem 1rem;
  font-family:'Poppins',sans-serif;font-size:0.82rem;color:var(--text3);
}
.kc-intro{
  font-family:'Cormorant Garamond',serif;font-size:1.15rem;line-height:1.8;color:var(--text2);
  margin-bottom:2rem;
}

/* ---- Accordion ---- */
.kc-accordion{border:1px solid var(--border);border-radius:14px;margin-bottom:0.9rem;overflow:hidden;background:#fff;}
.kc-accordion-trigger{
  width:100%;display:flex;align-items:center;gap:0.9rem;
  padding:1.1rem 1.3rem;background:none;border:none;cursor:pointer;text-align:left;
}
.kc-accordion-icon{font-size:1.25rem;flex-shrink:0;width:28px;text-align:center;}
.kc-accordion-trigger span.kc-accordion-title{
  flex:1;font-family:'Playfair Display',serif;font-weight:700;font-size:1.02rem;color:var(--text);
}
.kc-accordion-chevron{width:18px;height:18px;stroke:var(--gold-lux,#B8860B);flex-shrink:0;transition:transform 0.25s;}
.kc-accordion-trigger[aria-expanded="true"] .kc-accordion-chevron{transform:rotate(180deg);}
.kc-accordion-panel{padding:0 1.3rem 1.3rem 3.7rem;}
.kc-accordion-panel p{font-family:'Poppins',sans-serif;font-size:0.92rem;line-height:1.85;color:var(--text2);margin-bottom:0.9rem;}
.kc-accordion-panel p:last-child{margin-bottom:0;}
.kc-accordion-panel ul{margin:0 0 0.9rem 1.1rem;font-family:'Poppins',sans-serif;font-size:0.92rem;line-height:1.85;color:var(--text2);}
.kc-accordion-panel li{margin-bottom:0.35rem;}
.kc-accordion-panel strong{color:var(--text);}
.kc-accordion-panel[hidden]{display:none;}

/* ---- Internal link / CTA box ---- */
.kc-cta-box{
  margin:2.4rem 0;padding:1.8rem;border-radius:16px;
  background:linear-gradient(135deg,#F6F1E8,#F2ECE0);border:1px solid var(--border);
  text-align:center;
}
.kc-cta-box p{font-family:'Cormorant Garamond',serif;font-size:1.08rem;color:var(--text);margin-bottom:1.1rem;}
.kc-cta-btns{display:flex;flex-wrap:wrap;gap:0.8rem;justify-content:center;}

/* ---- Related articles ---- */
.kc-related{margin-top:2.6rem;}
.kc-related h2{
  font-family:'Playfair Display',serif;font-weight:700;font-size:1.3rem;color:var(--gold-lux,#B8860B);
  margin-bottom:1.2rem;
}
.kc-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}
.kc-related-card{
  display:block;background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:1.1rem 1.2rem;text-decoration:none;transition:border-color 0.2s,transform 0.2s;
}
.kc-related-card:hover{border-color:var(--gold-lux,#B8860B);transform:translateY(-3px);}
.kc-related-card .kc-card-tag{margin-bottom:0.4rem;}
.kc-related-card h4{font-family:'Playfair Display',serif;font-size:0.94rem;font-weight:700;color:var(--text);}

.kc-footer{
  text-align:center;padding:2rem 1.5rem;border-top:1px solid var(--border);
  font-family:'Poppins',sans-serif;font-size:0.78rem;color:var(--text3);
}
.kc-footer a{color:var(--gold-a11y,#8A6608);text-decoration:none;}

@media(max-width:900px){
  .kc-header{padding:0.8rem 1.5rem;}
  .kc-hero{padding:1.4rem 1.5rem 0;}
  .kc-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 1.5rem 3rem;}
  .kc-breadcrumb,.kc-article{padding-left:1.5rem;padding-right:1.5rem;}
  .kc-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:600px){
  .kc-back-link{display:none;}
  .kc-hub-grid{grid-template-columns:minmax(0,1fr);}
  .kc-related-grid{grid-template-columns:minmax(0,1fr);}
  .kc-accordion-panel{padding-left:1.3rem;}
  .kc-article-head h1{font-size:1.5rem;}
}
@media (prefers-reduced-motion: reduce){
  .kc-card,.kc-related-card,.kc-accordion-chevron{transition:none !important;}
}

/* ============================================================================
   CATEGORY PAGE — SUBCATEGORY SECTIONS (Phase 4)
   ----------------------------------------------------------------------------
   Each subcategory on a collections/gold/<type>.html page (js/category-page.js)
   renders as its own labeled section — a centered heading, then that
   subcategory's own product grid, separated from the next by a decorative
   gold divider (the same motif as .hero-divider under the homepage
   headline, reused here rather than inventing a second one). No "View All"
   control: every subcategory is already fully shown on the same page, so a
   button that would only re-show what's already visible added a click
   without adding value. The top jump-nav is the one remaining way to
   navigate between subcategories — a plain in-page anchor relying on the
   sitewide `html{scroll-behavior:smooth}` (see near the top of this file);
   `scroll-margin-top` keeps the fixed nav from covering the heading it
   scrolls to. Uses the site's final ivory + gold palette.
   ============================================================================ */
.subcategory-section{margin-bottom:0;}
/* scroll-margin-top belongs on the actual anchor target (the id'd element
   a jump link scrolls to), not its wrapper — .subcategory-title when a
   heading is shown, .subcategory-anchor (an empty marker) when it isn't. */
.subcategory-title,.subcategory-anchor{scroll-margin-top:calc(var(--header-h, 125px) + 12px);}
.subcategory-title{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:clamp(1.4rem,2.2vw,1.9rem);letter-spacing:0.015em;
  color:var(--ink,#2B2B2B);text-align:center;
  max-width:1320px;margin:0 auto;padding:0 3rem;
}
.subcategory-count{
  font-family:'Montserrat',sans-serif;font-size:0.78rem;font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;
  color:var(--gold-a11y,#8A6608);text-align:center;
  max-width:1320px;margin:0.5rem auto 1.8rem;padding:0 3rem;
}

.subcat-divider{
  display:flex;align-items:center;justify-content:center;gap:0.6rem;
  margin:3rem auto;max-width:1320px;padding:0 3rem;
}
.subcat-divider .hd-line{flex:0 1 90px;height:1px;background:linear-gradient(90deg,transparent,#B8860B);}
.subcat-divider .hd-line:last-child{background:linear-gradient(270deg,transparent,#B8860B);}
.subcat-divider .hd-dot{width:6px;height:6px;flex:none;border-radius:50%;background:#B8860B;}

/* Premium pill nav — equal-gap flex row, gold theme, animated hover lift,
   persistent "active" state kept in sync with scroll position by the
   IntersectionObserver in js/category-page.js (wireScrollSpy). */
.subcat-jumpnav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0.7rem;
  max-width:1320px;margin:0 auto 2.4rem;padding:0 3rem;
}
.jumpnav-link{
  display:inline-block;padding:0.5rem 1.25rem;border-radius:999px;
  border:1.5px solid var(--glass-border,#E6D8B8);background:transparent;
  font-size:0.8rem;font-weight:600;letter-spacing:0.02em;
  color:var(--gold-a11y,#8A6608);text-decoration:none;
  transition:background 0.25s ease,color 0.25s ease,border-color 0.25s ease,
    transform 0.25s ease,box-shadow 0.25s ease;
}
.jumpnav-link:hover{
  background:var(--gold-lux,#B8860B);border-color:var(--gold-lux,#B8860B);color:#fff;
  transform:translateY(-2px);box-shadow:0 8px 20px rgba(184,134,11,0.28);
}
.jumpnav-link.active{
  background:var(--gold-lux,#B8860B);border-color:var(--gold-lux,#B8860B);color:#fff;
  box-shadow:0 4px 14px rgba(184,134,11,0.22);
}

@media(max-width:900px){
  .subcategory-title,.subcategory-count{padding:0 1.5rem;}
  .subcat-jumpnav,.subcat-divider{padding:0 1.5rem;}
}
@media(max-width:600px){
  .subcategory-title{font-size:1.3rem;}
  .subcat-divider{margin:2.2rem auto;}
  .subcat-divider .hd-line{flex-basis:50px;}
}