/* =========================================================
   OrenkaFine — Fine Jewellery
   Design tokens
   ========================================================= */
:root{
  --ink:        #16140f;
  --ink-soft:   #2a271f;
  --bone:       #f3eee4;
  --bone-dim:   #e9e1d2;
  --gold:       #a9824c;
  --gold-light: #d8be8f;
  --gold-pale:  #efe3cb;
  --emerald:    #22392c;
  --emerald-light:#3c5a49;
  --rose:       #ded0c4;
  /* Shown behind a product image while it's still loading, or in
     place of it entirely if it's blank/broken (see .product-media,
     .product-gallery-main, and the img onerror handlers in
     js/main.js) — a deliberate, visible brown container rather than
     a blank white flash. */
  --placeholder-brown: #8a6a52;
  --line:       rgba(22,20,15,.14);
  --line-light: rgba(243,238,228,.22);

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --container: 1320px;
  --gutter: clamp(20px, 4vw, 64px);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; width: 100%; overflow-x: hidden; overflow-x: clip; }
img, video, canvas, svg{ max-width: 100%; height: auto; }
body{
  margin:0;
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:500; margin:0; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

/* Mobile Safari auto-zooms the whole page in when you focus any
   input/select/textarea whose computed font-size is under 16px.
   Several forms across the site (auth modal, delivery pincode check,
   contact form, newsletter fields, filter dropdowns) use font sizes
   below that threshold, so some pages zoomed in on focus while pages
   using 16px+ fields didn't — inconsistent per-page zoom behavior.
   Forcing 16px site-wide on every input/select/textarea (only where
   the viewport is actually mobile-sized) removes the trigger
   everywhere at once, without touching desktop styling or any
   page's regular (pinch/ctrl) zoom, which stays untouched. */
@media (max-width: 900px){
  input, select, textarea{ font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow{
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}

/* =========================================================
   Top utility bar + Header
   ========================================================= */
.utility-bar{
  background: var(--ink);
  color: var(--bone-dim);
  font-size: .70rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.utility-bar .container{
  display:flex; justify-content:space-between; align-items:center;
  height: 39px;
}
.utility-bar .marquee-track{
  display:flex; gap: 3.0rem;
}

.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(243,238,228,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 84px;
}
.brand{
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: .12em;
  font-weight: 600;
}
.brand small{
  display:block;
  font-family: var(--font-body);
  font-size: .58rem;
  letter-spacing: .35em;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 2px;
}
.main-nav{
  display:flex; gap: 2.2rem;
}
.main-nav a{
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  position:relative;
  padding-bottom: 4px;
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background: var(--gold);
  transition: right .35s ease;
}
.main-nav a:hover::after, .main-nav a.active::after{ right:0; }
.main-nav a.active{ color: var(--gold); }

.header-icons{ display:flex; align-items:center; gap: 1.2rem; }
.icon-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  background: transparent;
  transition: border-color .2s, background .2s;
}
.icon-btn:hover{ border-color: var(--gold); background: var(--gold-pale); }
.account-avatar{
  width: 26px; height: 26px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
}
.account-avatar-img{ width:100%; height:100%; object-fit:cover; }
.account-avatar-initial{
  width:100%; height:100%;
  background: var(--gold); color:#fff;
  font-family: var(--font-body); font-weight:600; font-size:.8rem;
}
.nav-toggle{ display:none; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  min-height: auto;
  display:flex; align-items:center;
  background: var(--ink);
  overflow:hidden;
  padding: 2rem 0;
}
.hero-media{
  position:absolute; inset:0;
  z-index:0;
  padding: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.hero-video-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem;
  width: 100%;
  height: 100%;
}
.video-showcase{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.video-showcase video,
.video-showcase > a{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio: 9 / 16;
  min-height: 260px;
  border-radius: 1.2rem;
  box-shadow: 0 40px 90px rgba(0,0,0,.15);
  filter: saturate(1.02) brightness(.92);
}
.video-showcase > a video{
  width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block;
  box-shadow:none; filter:none;
}
@media (max-width: 760px){
  .video-showcase{
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    overflow-x: auto;
    padding-bottom: .75rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .video-showcase video,
  .video-showcase > a{
    min-height: 180px;
    scroll-snap-align: start;
  }
}
.hero-video-grid video{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio: 9 / 16;
  border-radius: 1.2rem;
  box-shadow: 0 40px 90px rgba(0,0,0,.22);
  filter: saturate(1.08) brightness(.8);
}
.hero-media .hero-fallback img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: saturate(1.02) brightness(.72);
}
.hero-media video,
.hero-media > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.hero-fallback{
  position:absolute; inset:0; z-index:0;
}
.hero-media--slider{ background:none; }
.hero-slider{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  width:100%; height:100%;
}
.hero-slider-col{
  position:relative;
  overflow:hidden;
  height:100%;
}
.hero-slider-track{
  display:flex;
  flex-direction:column;
  gap: 3px;
  width:100%;
  animation: heroSlide var(--dur, 30s) linear infinite;
}
.hero-slider-col--down .hero-slider-track{ animation-direction: reverse; }
.hero-slider-track img{
  width:100%;
  height:auto;
  aspect-ratio: 3 / 4;
  object-fit:cover;
  display:block;
  filter: saturate(1.05) brightness(.78);
}
@keyframes heroSlide{
  from{ transform: translateY(0); }
  to{ transform: translateY(-50%); }
}
@media (max-width: 760px){
  .hero-slider{ grid-template-columns: repeat(2, 1fr); }
  .hero-slider-col:nth-child(3),
  .hero-slider-col:nth-child(4){ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .hero-slider-track{ animation: none; }
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(22,20,15,.55) 0%, rgba(22,20,15,.5) 40%, rgba(22,20,15,.88) 100%);
  z-index:1;
}
.hero-content{
    position: relative;
    z-index: 2;
    color: var(--bone);
    width: 100%;
    padding: 1rem 0 1.2rem 60px; /* Top Right Bottom Left */
}
.hero-content .eyebrow{ color: var(--gold-light); text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.hero-title{
  font-size: clamp(2.6rem, 6.4vw, 5.6rem);
  line-height: .98;
  margin-top: .6rem;
  max-width: 15ch;
  text-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.hero-title em{ color: var(--gold-light); font-style: italic; }
.hero-sub{
  margin-top: 1.3rem;
  max-width: 46ch;
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--bone-dim);
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.hero-actions{ margin-top: 2.2rem; display:flex; gap: 1rem; flex-wrap:wrap; }

.hero-cat-pills{
  margin-top: 1.8rem;
  display:flex;
  gap: .7rem;
  flex-wrap: wrap;
}
.hero-cat-pills a{
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bone);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.hero-cat-pills a:hover{
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: #1a1a1a;
}
@media (max-width: 640px){
  .hero-cat-pills{ gap:.5rem; }
  .hero-cat-pills a{ font-size:.7rem; padding:.42rem .9rem; }
}

.collections-hero{
  position:relative;
  min-height: 65vh;
  overflow:hidden;
}
.collections-hero .hero-video{
  position:absolute;
  inset:0;
  z-index:0;
}
.collections-hero .hero-video video,
.collections-hero .hero-video img{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(1.04) brightness(.75);
}
.collections-hero .hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(22,20,15,.35) 0%, rgba(22,20,15,.8) 55%, rgba(22,20,15,.95) 100%);
  z-index:1;
}
.collections-hero .hero-copy{
  position:relative;
  z-index:2;
  padding: 6rem 0 4rem;
  color: var(--bone);
  max-width: 55ch;
}
.collections-hero .hero-copy h1{
  font-size: clamp(3rem, 6vw, 4.8rem);
  margin: 1rem 0 1.2rem;
  line-height: 1.02;
}
.collections-hero .hero-copy p{
  font-size: 1.05rem;
  color: var(--bone-dim);
  line-height: 1.8;
  margin-bottom: 1.8rem;
}

.intro-panel{
  background: var(--bone);
  color: var(--ink);
  padding: 4rem 0;
}
.intro-panel .container{
  display:grid; gap: 1.8rem;
  max-width: 860px;
}
.intro-panel h2{
  font-size: clamp(2.2rem, 3vw, 3rem);
  margin: .8rem 0 0;
}

.collection-highlights{
  padding-top: 2rem;
}
.collection-highlights .container{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.collection-spot{
  padding: 3rem 2.2rem;
  border: 1px solid var(--line);
  background: var(--bone);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.collection-spot h2{
  font-size: 1.85rem;
  margin-bottom: .8rem;
}
.collection-spot p{
  color: var(--ink-soft);
  line-height: 1.8;
  margin-bottom: 1.8rem;
}

.collections-intro{
  text-align:center;
  padding-top: 2.5rem;
}
.collections-intro h2{
  max-width: 54ch;
  margin: 1rem auto 1.5rem;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.3;
}
.intro-divider{
  display:block;
  width: 8rem;
  height: 1px;
  margin-inline: auto;
  background: var(--line);
}

.lifestyle-banner{
  padding: 5rem 0;
}
.banner-panel{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2rem;
  align-items:center;
}
.banner-copy h2{
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  margin: 1rem 0 1.2rem;
}
.banner-copy p{
  max-width: 44ch;
  color: var(--ink-soft);
  line-height: 1.8;
}
.banner-image{
  overflow:hidden;
  border: 1px solid var(--line);
}
.banner-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.video-story .hero-video.small{
  position:relative;
  min-height: 52vh;
  overflow:hidden;
  border-radius: 1px;
}
.video-story .hero-video.small video{
  width:100%; height:100%; object-fit:cover;
}
.video-story .hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(22,20,15,.2) 0%, rgba(22,20,15,.7) 100%);
  z-index:1;
}
.video-copy{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color: var(--bone);
  padding: 4rem 2rem;
  max-width: 42rem;
}
.video-copy h2{
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin: 1rem 0 1rem;
}
.video-copy p{
  max-width: 36ch;
  color: var(--bone-dim);
  margin-bottom: 1.8rem;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding: .95rem 1.9rem;
  font-size: .78rem; letter-spacing: .14em; text-transform:uppercase;
  border: 1px solid currentColor;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.btn-gold{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.btn-gold:hover{ background: var(--gold-light); transform: translateY(-2px); }
.btn-outline-light{
  color: var(--bone);
  border-color: var(--line-light);
}
.btn-outline-light:hover{ background: rgba(243,238,228,.1); border-color: var(--bone); }
.btn-outline-dark{
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline-dark:hover{ background: var(--ink); color: var(--bone); }
.btn-text{
  border:none; padding: 0; letter-spacing:.12em; font-size:.78rem; text-transform:uppercase;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
}

/* =========================================================
   Section shells
   ========================================================= */
section{ padding: 3rem 0; }
.section-dark{ background: var(--ink); color: var(--bone); }
.section-light{ background: var(--bone); color: var(--ink); }
.section-emerald{ background: var(--emerald); color: var(--bone); }
.section-dim{ background: var(--bone-dim); }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  margin-bottom: 2rem; flex-wrap:wrap;
}
.section-light .eyebrow{ color: var(--gold); }
.section-light .section-desc{ color: var(--ink-soft); }
.section-light .product-card{ background: #fff; border: 1px solid var(--line); }
.section-light .product-cat{ color: var(--gold); }
.section-light .product-name,
.section-light .product-price{ color: var(--ink); }
.section-light .product-wish{ background: rgba(255,255,255,.95); color: var(--ink); }
.section-light .stat-row{ border-color: rgba(22,20,15,.08); }
.section-light .stat .num{ color: var(--ink); }
.section-light .stat .label{ color: var(--ink-soft); }
.unique-picks-stats{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.stat-card{
  padding: 1.6rem;
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: 1.4rem;
  display:flex;
  flex-direction:column;
  gap: .65rem;
}
.stat-card .stat-num{
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--gold);
}
.stat-card h3{
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}
.stat-card p{
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.65;
  font-size: .95rem;
}
@media (max-width: 1080px) {
  .unique-picks-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .unique-picks-stats{ grid-template-columns: 1fr; }
}
.section-title{ font-size: clamp(2rem, 3.4vw, 3rem); margin-top:.5rem; }
.section-dark .eyebrow, .section-emerald .eyebrow{ color: var(--gold-light); }
.section-desc{ max-width: 42ch; font-size: .95rem; color: var(--ink-soft); }
.section-dark .section-desc, .section-emerald .section-desc{ color: var(--bone-dim); }

/* =========================================================
   Two brands split
   ========================================================= */
.brands-split{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: stretch;
  min-height: 520px;
}
.brand-card{
  position:relative;
  overflow:hidden;
  color:#fff;
  min-height: 520px;
}
.brand-card img{
  width:100%; height:100%; object-fit:cover; transition: transform .8s ease;
}
.brand-card:hover img{ transform: scale(1.04); }
.brand-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(22,20,15,0) 0%, rgba(22,20,15,.12) 40%, rgba(22,20,15,.45) 100%);
}
.brand-card-content{
  position:absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index:2;
}
.brand-card-content .eyebrow{ color: var(--gold-light); margin-bottom: .7rem; max-width: 18rem; }
.brand-card-content h3{ font-size: 2rem; margin: 0 0 1rem; line-height: 1.05; max-width: 18rem; }
.brand-card-content .btn{ display: flex; width: fit-content; margin: 1rem auto 0; justify-content: center; text-align: center; }

.brand-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 1rem 0;
  position: relative;
}
.brand-center::before,
.brand-center::after{
  display:none;
}
.brand-center .eyebrow{ letter-spacing:.25em; text-transform:uppercase; color: var(--gold); margin-bottom: 1rem; }
.brand-center h2{ font-size: clamp(2.4rem, 4vw, 3.6rem); margin: 0; line-height: 1.02; }
.brand-center p{ margin-top: 1rem; max-width: 20rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.75; }

.brand-collections{ padding: 5rem 0; }
.brand-collections .section-head{ display:none; }
.brand-collections .section-title{ font-size: clamp(2rem, 4vw, 3rem); }

/* =========================================================
   Product grid / cards
   ========================================================= */
.product-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter) 1.6rem;
}
.product-card{ display:flex; flex-direction:column; }
.product-media{
  position:relative;
  aspect-ratio: 1/1.15;
  overflow:hidden;
  background: var(--placeholder-brown);
}
.product-media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.product-card:hover .product-media img{ transform: scale(1.07); }
.product-tag{
  position:absolute; top:.9rem; left:.9rem;
  background: var(--ink);
  color: var(--gold-light);
  font-size: .62rem; letter-spacing: .12em; text-transform:uppercase;
  padding: .35rem .65rem;
}
.product-wish{
  position:absolute; top:.8rem; right:.8rem; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background: rgba(243,238,228,.9);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none;
  transition: transform .2s, background .2s;
}
.product-card:hover .product-wish{ transform: scale(1.08); }
.product-wish .wish-icon{ font-size:1.15rem; line-height:1; color: var(--ink-soft); transition: color .2s; }
.product-wish.liked .wish-icon{ color:#c0344a; }
.product-info{ padding-top: 1rem; }
.product-cat{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold); }
.product-name{ font-family: var(--font-display); font-size: 1.18rem; margin-top:.25rem; }
.product-price{ font-size: .85rem; color: var(--ink-soft); margin-top:.3rem; }

/* filter pills */
.filter-row{
  display:flex; gap: .6rem; flex-wrap:wrap; margin-bottom: 2.6rem;
}
.filter-pill{
  padding: .55rem 1.15rem;
  border: 1px solid var(--line);
  font-size: .74rem; letter-spacing:.1em; text-transform:uppercase;
  background: transparent;
  transition: all .2s ease;
}
.filter-pill.active, .filter-pill:hover{
  background: var(--ink); color: var(--bone); border-color: var(--ink);
}
.sort-row{
  display:flex; align-items:center; justify-content:flex-end; gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap:wrap;
}
.sort-row label{
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft);
}
.sort-row select{
  min-width: 220px;
  border: 1px solid var(--line);
  background: var(--bone);
  color: var(--ink);
  padding: .85rem 1rem;
  font-family: inherit;
}

/* =========================================================
   Categories band
   ========================================================= */
.cat-band{
  display:grid; grid-template-columns: repeat(5,1fr); gap: 1.4rem;
}
.cat-item{ text-align:center; }
.cat-circle{
  width: 92%; max-width: 150px; aspect-ratio:1/1; border-radius:50%;
  overflow:hidden; border: 1px solid var(--line);
  margin: 0 auto 0.8rem;
}
.cat-circle img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.cat-item:hover .cat-circle img{ transform: scale(1.08); }
.cat-item h4{ font-size: 1.05rem; letter-spacing:.04em; }

.unique-set{
  background: url("https://xjepiecjsomrallliifj.supabase.co/storage/v1/object/public/Images/Index/uniquebg.png") center/cover no-repeat;
}

.unique-set-content{
  display:grid;
  grid-template-columns: 1fr minmax(320px, 1.2fr);
  gap: 2rem;
  align-items: center;
  margin-top: 2rem;
}

.unique-set-copy{
  display:flex;
  flex-direction:column;
  gap: 1.8rem;
  max-width: 42rem;
}

.unique-set-copy p{
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-soft);
}

.unique-set .section-head{
  justify-content: flex-start;
  align-items: flex-start;
}

.unique-set .section-head .section-desc{
  order: 3;
  width: 100%;
  max-width: 42rem;
  text-align: left;
}

.unique-set .image-container{
  position:relative;
  width:100%;
  margin: 0;
}

.unique-set .image-container img{
  width:100%;
  display:block;
  border-radius: 1.6rem;
  overflow:hidden;
}

.unique-set .hotspot{
  position:absolute;
  transform:translate(-50%,-50%);
  cursor:pointer;
  z-index:2;
}

.unique-set .pulse{
  width:15px;
  height:15px;
  background: transparent;
  border-radius:50%;
  display:block;
  position:relative;
  border:1.5px solid white;
}

.unique-set .pulse::before{
  content: "";
  position:absolute;
  inset:-4px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:50%;
  animation: pulse 2s infinite;
}

@keyframes pulse{
  from{ transform: scale(.7); opacity:1; }
  to{ transform: scale(1.7); opacity:0; }
}

.unique-set .card{
  position:absolute;
  top: -25px;
  left: 35px;
  width: 180px;
  background: white;
  border-radius: 18px;
  display:flex;
  gap: 12px;
  padding: 14px;
  box-shadow: 0 20px 45px rgba(0,0,0,.15);
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: transform .25s ease, opacity .25s ease, visibility .25s ease;
  color: inherit;
  text-decoration: none;
}

.unique-set .hotspot:hover .card,
.unique-set .hotspot.active .card{
  opacity:1;
  visibility:visible;
  transform: translateX(0);
}

.unique-set .card::after{
  content: "";
  position:absolute;
  top: 50%;
  left: -8px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: white;
}

.unique-set .card.left{
  left: auto;
  right: 35px;
}

.unique-set .card.left::after{
  left: auto;
  right: -8px;
  border-right-color: transparent;
  border-left-color: white;
}

.unique-set .thumb{
  width: 60px;
  height: 60px;
  border-radius: 14px;
  overflow:hidden;
  flex-shrink:0;
  border:1px solid #eee;
}

.unique-set .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .25s ease;
}

.unique-set .card:hover .thumb img{
  transform: scale(1.05);
}

.unique-set .info h4{
  font-size: .95rem;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.unique-set .info p{
  margin: 6px 0 0;
  font-size: .82rem;
  color: #777;
}

.unique-set .info strong{
  display:block;
  margin-top: 8px;
  font-size: 1rem;
}

/* Positions are the center of each rect from the image map, converted
   to percentages of Model.png's REAL dimensions — 1448x1086 (checked
   directly against the file; the originally-given 1448x1806 was
   wrong, which is why these were off) — so they still line up if the
   image is ever resized. */
.unique-set .shree{
    top: 79.15%;
    left: 16.54%;
}

.unique-set .trunk{
    top: 81.55%;
    left: 53.04%;
}

.unique-set .drumru{
    top: 23.16%;
    left: 56.33%;
}

.collection-showcase .collection-cards{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
}
.collections-hero{
  position:relative;
  min-height: 45vh;
  display:flex; align-items:center;
  overflow:hidden;
}
.collections-hero .hero-copy{
  position:relative;
  z-index:2;
  padding: 2.2rem 0 1.4rem;
  color: var(--bone);
  max-width: 55ch;
}

.collections-hero .hero-video{ overflow:hidden; }
.collections-hero .hero-video video,
.collections-hero .hero-video img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform: scale(1.06);
  will-change: transform;
}

@media (max-width: 760px) {
  .collections-hero{ min-height: 38vh; }
  .collections-hero .hero-copy{ padding: 1.6rem 0; }
}

@media (max-width: 760px) {
  .hero{ padding: 1rem 0; }
  .hero-content{ padding: 0.8rem 0; }
  .collections-hero .hero-copy{ padding: 2rem 0; }
}
.testimonial-card{
  padding: 2rem; background: var(--bone); border:1px solid var(--line);
}
.testimonial-card p{ font-size: 1rem; line-height:1.8; color: var(--ink-soft); margin-bottom: 1.5rem; }
.testimonial-card span{ font-weight: 500; letter-spacing:.05em; color: var(--ink); }
.trust-grid{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; margin-top: 2rem;
}
.trust-item{
  padding: 1rem 1.2rem; background: var(--bone-dim); border:1px solid var(--line);
  color: var(--ink-soft); font-size:.85rem; text-align:center; letter-spacing:.08em; text-transform:uppercase;
}

.promise-section{
  padding-top: 4rem;
}
.promise-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.5rem;
}
.promise-card{
  padding: 2rem; background: var(--bone); border:1px solid var(--line); min-height: 220px;
}
.promise-card h3{
  margin-bottom: 1rem; font-size: 1.3rem;
}
.promise-card p{
  color: var(--ink-soft); line-height:1.8;
}

/* =========================================================
   Editorial / story split
   ========================================================= */
.editorial{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items:center;
}
.editorial img{ width:100%; aspect-ratio: 4/5; object-fit:cover; }
.editorial .eyebrow{ color: var(--gold); }
.editorial h2{ font-size: clamp(2rem,3.6vw,3.2rem); margin: .6rem 0 1.4rem; }
.editorial p{ font-size: .98rem; color: var(--ink-soft); margin-bottom: 1rem; line-height:1.7; }
.editorial-reverse .editorial{ grid-template-columns: .9fr 1.1fr; }
.editorial-reverse .editorial img{ order:2; }

/* stat row */
.stat-row{
  display:grid; grid-template-columns: repeat(4,1fr);
  border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light);
}
.stat{
  padding: 2.4rem 1rem; text-align:center;
  border-right: 1px solid var(--line-light);
}
.stat:last-child{ border-right:none; }
.stat .num{ font-family: var(--font-display); font-size: 2.6rem; color: var(--gold-light); }
.stat .label{ font-size: .72rem; letter-spacing:.14em; text-transform:uppercase; margin-top:.4rem; color: var(--bone-dim); }

/* =========================================================
   News / journal cards
   ========================================================= */
.journal-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 2.4rem;
}
.journal-card img{ aspect-ratio: 4/3; object-fit:cover; width:100%; }
.journal-date{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--gold); margin-top:1.1rem; }
.journal-card h3{ font-size: 1.35rem; margin-top:.5rem; }
.journal-card p{ font-size:.88rem; color: var(--ink-soft); margin-top:.6rem; line-height:1.6; }

/* =========================================================
   Newsletter
   ========================================================= */
.newsletter{
  background: var(--emerald);
  color: var(--bone);
}
.newsletter-inner{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items:center;
}
.newsletter h2{ font-size: clamp(1.9rem,3vw,2.6rem); }
.newsletter p{ color: var(--bone-dim); margin-top:1rem; max-width: 42ch; }
.field-row{ display:flex; gap:.8rem; margin-top:1.6rem; flex-wrap:wrap; }
.field-row input[type="email"]{
  flex:1; min-width: 220px;
  background: transparent; border: none; border-bottom: 1px solid var(--line-light);
  color: var(--bone); padding: .8rem .2rem; font-size: .95rem; font-family: inherit;
}
.field-row input::placeholder{ color: var(--bone-dim); }

/* =========================================================
   Footer (light theme)
   ========================================================= */
.site-footer{ background: var(--bone); color: var(--ink); padding-top: 4rem; border-top: 1px solid var(--line-light); }
.footer-top{
  display:grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 2rem;
  padding-bottom: 2.4rem;
}
.footer-brand .brand{ color: var(--ink); display:inline-flex; align-items:center; gap:.6rem; }
.footer-brand p{ margin-top: 1rem; font-size:.9rem; max-width: 30ch; color: var(--ink-soft); }
.footer-col h5{
  font-size: .72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--gold);
  margin-bottom: 1rem;
}
.footer-col li{ margin-bottom: .5rem; font-size: .88rem; }
.footer-col a{ color: var(--ink-soft); text-decoration:none; }
.footer-col a:hover{ color: var(--ink); }
.footer-social{ display:flex; gap:.7rem; margin-top: 1.4rem; }
.footer-bottom{
  border-top: 1px solid var(--line-light);
  padding: 1rem 0 1.6rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  font-size:.76rem; color: var(--ink-soft);
}
.footer-bottom .legal-links{ display:flex; gap: 1.4rem; }
.footer-credit{
  padding: 0 0 1.2rem;
  text-align: center;
  font-size: .72rem;
  color: var(--ink-soft);
  opacity: .8;
}

.popular-searches{ padding: 1.6rem 0; border-top: 1px solid var(--line-light); display:flex; flex-direction:column; gap:1.2rem; }
.popular-block h5{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:.6rem; }
.popular-links{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.78rem; }
.popular-links a{ color:var(--ink-soft); text-decoration:none; text-transform:uppercase; letter-spacing:.02em; }
.popular-links a:hover{ color:var(--ink); text-decoration:underline; }
.popular-links span{ color:var(--line); }

.footer-newsletter input{ padding:.6rem .8rem; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:6px; }
.footer-newsletter .btn{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.footer-tag{ color: var(--ink-soft); }

/* Footer readability fix (all pages) */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer .popular-searches,
.site-footer .copyright,
.site-footer .footer-tag,
.site-footer .footer-brand h4 {
  color: var(--ink-soft);
}
.site-footer a,
.site-footer .footer-col a,
.site-footer .brand {
  color: var(--ink);
}

/* ---------- Product card v2 (price-first layout) ---------- */
.price-row{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; margin-bottom:.3rem; }
.price-now{ font-size:1.05rem; font-weight:500; color:var(--ink); }
.price-old{ font-size:.85rem; color:var(--ink-soft); text-decoration:line-through; }
.price-save{ font-size:.78rem; color:var(--emerald); font-weight:500; }

.product-name{ font-size:.95rem; margin:.1rem 0 .2rem; }
.product-rating{ font-size:.78rem; color:var(--ink-soft); font-weight:400; }
.product-rating .star{ color:var(--gold); }

.swatch-row{ display:flex; gap:.4rem; margin-top:.5rem; }
.swatch{
  width:14px; height:14px; border-radius:50%;
  border:1px solid var(--line); display:inline-block; cursor:pointer;
}

.discount-ribbon{
  position:absolute; top:16px; left:-42px; z-index:3;
  width:160px;
  background: #c0392b; color:#fff;
  font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  text-align:center; line-height:1.4; padding:.3rem 0;
  transform: rotate(-45deg); transform-origin:center;
  box-shadow: 0 2px 6px rgba(22,20,15,.18);
}

/* ---------- Shop toolbar (result count + sort) ---------- */
.shop-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.4rem; font-size:.9rem; color:var(--ink-soft);
  gap: 1rem;
  flex-wrap: wrap;
}
.shop-toolbar select{
  border:1px solid var(--line); background:var(--bone);
  padding:.5rem .8rem; font-size:.85rem; color:var(--ink);
}
.shop-toolbar .category-toggle{ margin: 0; }
.filter-menu{
  position: relative;
}
.filter-menu-trigger{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .9rem;
  border:1px solid var(--line);
  background:var(--bone);
  color:var(--ink);
  font-size:.74rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.filter-menu-trigger strong{
  font-weight:500;
  letter-spacing:.02em;
  text-transform:none;
  font-size:.82rem;
}
.menu-caret{ font-size:.72rem; line-height:1; }
.filter-menu-list{
  position:absolute;
  top: calc(100% + .35rem);
  left:0;
  min-width: 220px;
  max-height: 260px;
  overflow:auto;
  display:none;
  flex-direction:column;
  background: var(--bone);
  border:1px solid var(--line);
  box-shadow: 0 14px 28px rgba(22,20,15,.12);
  z-index:35;
}
.filter-menu:hover .filter-menu-list,
.filter-menu:focus-within .filter-menu-list,
.filter-menu.open .filter-menu-list{
  display:flex;
}
.filter-menu-item{
  text-align:left;
  border:none;
  background:transparent;
  color:var(--ink-soft);
  padding:.68rem .9rem;
  font-size:.86rem;
}
.filter-menu-item:hover,
.filter-menu-item.active{
  background: rgba(169,130,76,.14);
  color: var(--ink);
}
.filter-drawer-toggle{
  display:none;
  align-items:center;
  gap:.45rem;
  padding: .55rem 1rem;
  border: 1px solid var(--line);
  background: var(--bone);
  color: var(--ink);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.filter-drawer-toggle svg{
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

/* ---------- Shop sidebar filters (price / color / material) ---------- */
.shop-sidebar{ border-right:1px solid var(--line); padding-right:1.6rem; }
.shop-sidebar .sidebar-drop{ margin-bottom: .8rem; }
.shop-sidebar .filter-menu-trigger{
  width:100%;
  justify-content:space-between;
  border-color: rgba(22,20,15,.2);
  background:#f7f2e9;
}
.shop-sidebar .filter-drop-panel{
  display:none;
  border:1px solid var(--line);
  border-top:none;
  padding:.75rem .8rem .6rem;
  background:#fff;
}
.shop-sidebar .sidebar-drop:hover .filter-drop-panel,
.shop-sidebar .sidebar-drop:focus-within .filter-drop-panel,
.shop-sidebar .sidebar-drop.open .filter-drop-panel{
  display:block;
}
.shop-sidebar .sidebar-drop .menu-caret{ transition: transform .2s ease; }
.shop-sidebar .sidebar-drop.open .menu-caret,
.shop-sidebar .sidebar-drop:hover .menu-caret,
.shop-sidebar .sidebar-drop:focus-within .menu-caret{ transform: rotate(180deg); }
.price-slider{ width:100%; accent-color: var(--gold); }
.price-slider-value{ font-size:.85rem; color:var(--ink-soft); margin:.5rem 0 .8rem; }
.filter-check-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; padding:.35rem 0; font-size:.88rem; cursor:pointer;
}
.filter-check-row .swatch-label{ display:flex; align-items:center; gap:.6rem; }
.filter-check-row .count{ color:var(--ink-soft); font-size:.78rem; }
.shop-layout{ display:grid; grid-template-columns:220px 1fr; gap:2.4rem; align-items:start; }
@media (min-width:901px){
  .shop-sidebar{
    position: sticky;
    align-self: start;
    top: 104px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    z-index: 2;
  }
}
@media (max-width:900px){
  .shop-layout{ grid-template-columns:1fr; }
  .filter-drawer-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .filter-menu-list{ min-width: 190px; }
  .shop-sidebar{
    display:none;
    border-right:none;
    border-bottom:1px solid var(--line);
    padding:0 0 1.2rem;
  }
  .shop-sidebar .filter-drop-panel{ display:none; }
  .shop-layout.filters-open .shop-sidebar{ display:block; }
}

/* Footer extras */
.footer-brand{ display:flex; flex-direction:column; gap:.8rem; }
.footer-tag{ color: var(--bone-dim); margin:0 0 .6rem; }
.footer-newsletter{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.6rem; }
.footer-newsletter input{ flex:1 1 160px; min-width:0; padding:.6rem .8rem; border:1px solid rgba(255,255,255,.08); background:transparent; color:var(--bone); border-radius:6px; }
.footer-newsletter .btn{ padding:.55rem .9rem; font-size:.82rem; }
.footer-links{ display:flex; gap:2.2rem; }
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li a{ color: var(--bone-dim); display:inline-flex; gap:.6rem; align-items:center; }
.footer-col img{ height:18px; width:auto; margin-right:.6rem; }

@media (max-width: 860px){
  .footer-top{ grid-template-columns: 1fr; gap: 1.2rem; }
  .footer-links{ flex-wrap:wrap; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:.6rem; }
}

/* =========================================================
   Page header (interior pages)
   ========================================================= */
.page-header{
  background: var(--ink); color:var(--bone);
  padding: 7rem 0 3.5rem;
  position:relative; overflow:hidden;
}
.page-header .eyebrow{ color: var(--gold-light); }
.page-header h1{ font-size: clamp(2.4rem, 5vw, 4rem); margin-top:.6rem; }
.page-hero .hero-content{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-hero .hero-content h1,
.page-hero .hero-content .eyebrow,
.page-hero .hero-content .breadcrumb{
  width: 100%;
}
.page-hero .hero-content h1{
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  margin-top: .6rem;
}
.page-hero .hero-content .eyebrow{
  margin-top: .6rem;
}
.page-hero{
  min-height: 62vh;
}
@media (max-width: 760px){
  .page-hero{ min-height: 56vh; }
  .page-hero .hero-content h1{ font-size: clamp(2rem, 8vw, 2.8rem); }
}
.about-page section:not(.hero){
  padding: 1.7rem 0;
}
.about-page .editorial{
  gap: 2.2rem;
}
.about-page .editorial img{
  width: 82%;
  max-width: 420px;
  justify-self: center;
}
.about-page .about-split{
  grid-template-columns: 1.1fr .9fr;
  grid-template-areas:
    "title image"
    "body image";
  align-items: start;
  gap: .65rem 1.6rem;
}
.about-page .about-split .about-split-head{
  grid-area: title;
}
.about-page .about-split .about-split-head .eyebrow{
  margin-bottom: .25rem;
}
.about-page .about-split .about-split-title{
  font-size: clamp(1.85rem, 2.8vw, 2.55rem);
  line-height: 1.08;
}
.about-page .about-split img{
  grid-area: image;
  width: 88%;
  max-width: 360px;
  justify-self: end;
}
.about-page .about-split .about-split-body{
  grid-area: body;
  max-width: 60ch;
}
@media (max-width: 760px){
  .about-page .editorial img{
    width: 100%;
    max-width: 100%;
  }
  .about-page .about-split{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "image"
      "body";
    gap: 1rem;
  }
}
.breadcrumb{
  font-size: .88rem;
  color: var(--ink-soft);
  margin-top: -1.5rem;   /* Increase to -2rem if needed */
  margin-bottom: .5rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.breadcrumb a{ color: var(--ink-soft); }
.breadcrumb a:hover{ color: var(--gold); }
.page-hero .hero-content .breadcrumb,
.page-hero .hero-content .breadcrumb a{ color: var(--bone-dim); }
.page-hero .hero-content .breadcrumb a:hover{ color: var(--gold-light); }

/* Contact */
.contact-grid{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: 4rem;
}
.contact-info-item{ padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.contact-info-item h4{ font-size: .72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold); margin-bottom:.5rem; }
.contact-info-item p{ font-size: 1rem; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form-grid .full{ grid-column: 1/-1; }
.form-field label{ display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:.5rem; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; background: transparent; border: none; border-bottom: 1px solid var(--line);
  padding: .7rem .1rem; font-family: inherit; font-size: .95rem; color: var(--ink);
}
.form-field textarea{ resize: vertical; min-height: 110px; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ border-color: var(--gold); }

/* About page extras */
.value-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 2.4rem; }
.value-card{ padding: 2.2rem; border: 1px solid var(--line); }
.value-card .num{ font-family: var(--font-display); font-size: 1.6rem; color: var(--gold); }
.value-card h3{ margin: .8rem 0 .7rem; font-size: 1.3rem; }
.value-card p{ font-size: .9rem; color: var(--ink-soft); line-height: 1.6; }

.timeline{ display:flex; flex-direction:column; }
.timeline-row{
  display:grid; grid-template-columns: 140px 1fr; gap: 2rem;
  padding: 2rem 0; border-top: 1px solid var(--line-light);
}
.timeline-row:last-child{ border-bottom: 1px solid var(--line-light); }
.timeline-year{ font-family: var(--font-display); font-size: 1.8rem; color: var(--gold-light); }
.timeline-row h4{ font-size: 1.15rem; margin-bottom:.4rem; }
.timeline-row p{ font-size: .9rem; color: var(--bone-dim); max-width: 60ch; }

/* Back to top */
.to-top{
  position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 40;
  width: 46px; height:46px; border-radius:50%;
  background: var(--ink); color: var(--bone);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform: translateY(10px);
  transition: opacity .3s, transform .3s;
}
.to-top.visible{ opacity:1; pointer-events:auto; transform:none; }
.contact-page section:not(.hero){
  padding: 1.8rem 0;
}
.contact-page .contact-grid{
  gap: 2.4rem;
}
.contact-page .contact-info-item{
  padding: 1.1rem 0;
}
.contact-get-in-touch{
  background: #e7dece;
}
.contact-get-in-touch .eyebrow{
  color: var(--emerald-light);
}
.contact-get-in-touch .section-title,
.contact-get-in-touch .contact-info-item p{
  color: var(--ink);
}
.contact-get-in-touch .contact-info-item{
  border-bottom-color: rgba(22,20,15,.18);
}
.contact-get-in-touch .form-field label{
  color: var(--ink-soft);
}
.contact-get-in-touch .form-field input,
.contact-get-in-touch .form-field textarea,
.contact-get-in-touch .form-field select{
  border: 1px solid rgba(22,20,15,.35);
  background: #fff;
  border-radius: 8px;
  padding: .72rem .85rem;
}
.contact-get-in-touch .contact-grid > div{
  background: #ffffff;
  border: 1px solid rgba(22,20,15,.28);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 12px 28px rgba(22,20,15,.10);
}
.contact-page .map-frame,
.contact-page .retailer-media{
  aspect-ratio: 16/5;
  max-height: 250px;
}
.contact-footer-divider{
  height: 1px;
  background: var(--line);
  margin: .4rem 0 0;
}
@media (max-width: 760px){
  .contact-page .map-frame,
  .contact-page .retailer-media{
    aspect-ratio: 16/8;
    max-height: 200px;
  }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px){
  .container{ padding-inline: clamp(1.2rem, 3vw, 1.8rem); }
  .site-header .container{
    flex-wrap: wrap;
    gap: 1rem;
    height: auto;
    padding-block: .9rem;
  }
  .header-icons{ gap: .75rem; }
  .main-nav{ gap: 1.2rem; }
  .brand{ font-size: 1.65rem; }
  .brand small{ font-size: .5rem; }
  .hero:not(.page-hero){ min-height: 60vh; }
  .hero-content{ padding-bottom: 3.2rem; }
  .hero-sub{ max-width: 100%; }
  .section-head{ margin-bottom: 2.2rem; }
  .section-title{ font-size: clamp(2rem, 3vw, 2.8rem); }
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
  .video-showcase{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-band{ grid-template-columns: repeat(5, 1fr); }
  .collection-showcase .collection-cards{ grid-template-columns: repeat(2, 1fr); }
  .journal-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .editorial, .editorial-reverse .editorial{ grid-template-columns: 1fr !important; }
  .editorial-reverse .editorial img{ order: 0; }
  .contact-grid{ grid-template-columns: 1fr; gap: 3rem; }
  .collection-highlights{ grid-template-columns: 1fr; }
  .brand-card-content, .collection-card-body, .testimonial-card, .promise-card{ padding: 1.8rem; }
}

@media (max-width: 860px){
  .section-head{ margin-bottom: 1.8rem; }
  .banner-panel, .editorial, .promise-grid, .trust-grid, .footer-top{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top > .footer-brand{ grid-column: 1 / -1; }
  .footer-top > .footer-links{ grid-column: 1 / -1; }
  .newsletter-inner{ grid-template-columns: 1fr; }
  .site-footer{ padding-top: 3.2rem; }
  .footer-bottom{ gap: .75rem; }
  .stats-row{ grid-template-columns: 1fr; }
  .hero:not(.page-hero){ min-height: 70vh; }
  .unique-set-content{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  .container{ padding-inline: clamp(1rem, 4vw, 1.2rem); }
  .section{ padding: 2.5rem 0; }
  .utility-bar .container{ flex-wrap: wrap; gap: .5rem; justify-content: center; text-align: center; }
  .site-header .container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding-block: .9rem;
  }
  .brand{ font-size: 1.45rem; }
  .brand small{ font-size: .45rem; }
  .header-icons{ width: 100%; justify-content: space-between; }
  .main-nav{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bone);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    padding: 1rem clamp(1rem, 4vw, 1.2rem) 1rem;
    gap: .85rem;
    z-index: 55;
  }
  .main-nav.open-mobile{ display: flex; }
  .nav-toggle{ display: flex; }
  .main-nav a{ padding: .55rem 0; }
  .hero:not(.page-hero){ min-height: 55vh; }
  .hero-content{ padding-bottom: 2.2rem; }
  .hero-title{ font-size: clamp(1.9rem, 8vw, 3rem); }
  .hero-sub{ font-size: .98rem; }
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .btn{ width: 100%; justify-content: center; }
  .product-grid{ grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .video-showcase{ grid-template-columns: repeat(4, minmax(160px, 1fr)); overflow-x: auto; padding-bottom: .75rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .video-showcase video,
  .video-showcase > a{ min-height: 180px; scroll-snap-align: start; }
  .cat-band{ grid-template-columns: repeat(5, 1fr); }
  .collection-showcase .collection-cards{ grid-template-columns: 1fr; }
  .brands-split{ grid-template-columns: 1fr; gap: 1rem; }
  .brands-split > .brand-card:nth-of-type(1){ order: 1; }
  .brands-split > .brand-center{ order: 2; padding: 1rem .5rem; }
  .brands-split > .brand-card:nth-of-type(2){ order: 3; }
  .brand-card{
    min-height: 0;
    aspect-ratio: 4/3;
    display: flex;
    flex-direction: column;
  }
  .brand-card img{
    min-height: 180px;
  }
  .brand-card-content{
    padding: 1rem;
  }
  .brand-card-content h3{
    font-size: 1.5rem;
    margin-top: .25rem;
  }
  .brand-collections .section-head{
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }
  .brand-collections .section-title{
    font-size: clamp(1.8rem, 5vw, 2.4rem);
  }
  .brand-card .btn{
    width: fit-content;
    font-size: .72rem;
    padding: .75rem 1.2rem;
  }
  .journal-grid{ grid-template-columns: 1fr; }
  .testimonial-grid{ grid-template-columns: 1fr; }
  .trust-grid{ grid-template-columns: repeat(2, 1fr); }
  .stat-row{ grid-template-columns: repeat(2, 1fr); }
  .stat{ border-right: none; border-bottom: 1px solid var(--line-light); }
  .footer-top{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top > .footer-brand{ grid-column: 1 / -1; }
  .footer-top > .footer-links{ grid-column: 1 / -1; }
  .footer-links{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
  .newsletter-inner{ grid-template-columns: 1fr; }
  .value-grid{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .timeline-row{ grid-template-columns: 1fr; gap: .6rem; }
  .section-head{ align-items: flex-start; }
  .banner-panel{ grid-template-columns: 1fr; }
  .collection-card-body{ padding: 1.4rem; }
  .brand-card-content{ padding: 1.4rem; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: .75rem; }
  .newsletter .field-row{ flex-direction: column; }
  .field-row input[type="email"]{ min-width: 0; width: 100%; }
  .page-header{ padding: 4.2rem 0 2.2rem; }
}

@media (max-width: 560px){
  .section{ padding: 2.4rem 0; }
  .hero:not(.page-hero){ min-height: 50vh; }
  .brand{ font-size: 1.35rem; }
  .brand small{ font-size: .42rem; }
  .hero-title{ font-size: clamp(1.7rem, 9vw, 2.6rem); }
  .hero-sub{ margin-top: .9rem; }
  .hero-actions{ gap: .75rem; }
  .btn{ padding: .8rem 1.2rem; font-size: .75rem; }
  .section-title{ font-size: clamp(1.8rem, 8vw, 2.2rem); }
  .footer-bottom{ font-size: .72rem; }
  .product-grid{ grid-template-columns: 1fr; }
  .shop-layout .product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .8rem; }
  .shop-layout .product-media{ aspect-ratio: 1/1; }
  .shop-layout .product-info{ padding-top: .65rem; }
  .shop-layout .product-name{ font-size: 1rem; }
  .cat-band{ grid-template-columns: repeat(2, 1fr); }
  .trust-grid{ grid-template-columns: 1fr; }
  .stat-row{ grid-template-columns: 1fr; }
  .brand-card{ aspect-ratio: 4/3; }
  .testimonial-card{ padding: 1.6rem; }
  .collection-card img, .editorial img{ aspect-ratio: auto; height: auto; }
  .editorial{ gap: 1.8rem; }
  .footer-links{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem .9rem; }
  .newsletter .field-row{ gap: .5rem; }
  .page-header h1{ font-size: 2.2rem; }
}

@media (max-width: 420px){
  .container{ padding-inline: 1rem; }
  .hero:not(.page-hero){ min-height: 50vh; }
  .hero-actions{ gap: .6rem; }
  .eyebrow{ font-size: .65rem; letter-spacing: .2em; }
  .section-title{ font-size: clamp(1.6rem, 8vw, 1.9rem); }
  .footer-bottom{ font-size: .7rem; }
}

.product-card-link{
  display: contents;
}

/* =========================================================
   Login / Signup popup modal
   "Quiet luxury" arch/dome-shaped card — a large smooth
   semicircle top (radius = half the card's own width, via the
   --arch-w custom property, so it stays a true half-oval at any
   size) sitting over gently rounded bottom corners. Anchored to
   the bottom of the viewport and slides up on open (no backdrop
   blur — the page behind stays crisp, just dimmed), warm ivory
   palette, brown serif/sans type, no visible scrollbar even
   though the longer signup form still scrolls internally.
   ========================================================= */
body.auth-modal-open{ overflow: hidden; }

.auth-modal-backdrop{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20,16,11,.5);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
  animation: authFadeIn .22s ease;
}
.auth-modal-backdrop.closing{ animation: authFadeOut .26s ease forwards; }
@keyframes authFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes authFadeOut{ to{ opacity:0; } }

.auth-modal{
  --arch-w: clamp(320px, 92vw, 760px);
  --arch-ivory: #F8F3EA;
  --arch-gold: #B08D57;
  --arch-brown: #3A2A1C;
  position: relative;
  width: var(--arch-w);
  background: var(--arch-ivory);
  color: var(--arch-brown);
  border-top-left-radius: calc(var(--arch-w) / 2);
  border-top-right-radius: calc(var(--arch-w) / 2);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: none;
  box-shadow: 0 -20px 60px rgba(0,0,0,.16);
  padding: calc(var(--arch-w) * .045) 2.2rem .9rem;
  max-height: min(420px, 66dvh);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  animation: authSlideUp .38s cubic-bezier(.22,.9,.32,1);
}
.auth-modal::-webkit-scrollbar{ display:none; }
.auth-modal.closing{ animation: authSlideDown .28s cubic-bezier(.4,0,1,1) forwards; }
@keyframes authSlideUp{ from{ transform: translateY(100%); } to{ transform: translateY(0); } }
@keyframes authSlideDown{ to{ transform: translateY(100%); } }
@keyframes authPopOut{ to{ opacity:0; transform: translateY(14px) scale(.98); } }

.auth-modal-crest{
  position:absolute; top: .6rem; left:50%;
  transform: translateX(-50%);
  font-size: .85rem; color: var(--arch-gold); line-height:1;
}
.auth-modal-heading{
  text-align:center; font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.2rem); color: var(--arch-brown);
  margin: 0 0 .4rem;
}
.auth-modal-subtitle{
  text-align:center; font-size:.72rem; color: var(--arch-brown);
  opacity:.68; line-height:1.5; margin: 0 auto 1.1rem;
  max-width: 34ch;
  padding: 0 .5rem;
}

.auth-modal-close{
  position: absolute; top: .6rem; right: .6rem;
  background: #fff; border: 1px solid rgba(58,42,28,.1);
  cursor: pointer;
  font-size: 1rem; line-height: 1; color: var(--arch-brown, #3A2A1C);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  z-index: 2;
  transition: transform .15s ease, box-shadow .15s ease;
}
.auth-modal-close:hover{ transform: scale(1.06); box-shadow: 0 8px 20px rgba(0,0,0,.16); }

.auth-modal-tabs{
  display: flex; justify-content:center; gap: .4rem;
  margin: 0 auto 1rem;
  width: fit-content; max-width: 100%;
  background: rgba(58,42,28,.06);
  border-radius: 999px;
  padding: .22rem;
}
.auth-modal-tab{
  flex: none;
  background: none; border: none; cursor: pointer;
  padding: .68rem 2.5rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .74rem; letter-spacing:.04em; font-weight: 500;
  color: var(--arch-brown, #3A2A1C); opacity:.55;
  transition: background .18s ease, opacity .18s ease;
}
.auth-modal-tab.active{ opacity:1; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.08); }

.auth-modal .auth-field{ margin-bottom: .85rem; padding-inline: 3.1rem; }
.auth-modal .auth-field label{
  display:block; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--arch-brown, #3A2A1C); opacity:.6; margin-bottom:.3rem;
}
.auth-modal .auth-field label .hint-inline{ text-transform:none; letter-spacing:normal; font-size:.64rem; opacity:.75; }
.auth-modal .auth-field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.auth-modal .auth-field input, .auth-modal .auth-field select{
  width:100%; background:#fff; border: 1px solid rgba(58,42,28,.14); border-radius: 14px;
  padding: .46rem .85rem; font-family: inherit; font-size: .88rem; color: var(--arch-brown, #3A2A1C);
}
.auth-modal .auth-field input:focus, .auth-modal .auth-field select:focus{ border-color: var(--arch-gold, #B08D57); outline:none; box-shadow: 0 0 0 3px rgba(176,141,87,.16); }
.auth-modal .auth-field .hint{ font-size:.66rem; opacity:.65; margin-top:.3rem; }
.auth-modal .auth-submit{
  display:flex; width: fit-content; min-width: 15.5rem; max-width: 100%; margin-inline: auto; justify-content:center; margin-top:.2rem;
  background: var(--arch-gold, #B08D57); border-color: var(--arch-gold, #B08D57); color:#fff;
  border-radius: 999px; padding: .85rem 2.8rem;
  font-size:.78rem; font-weight:500; letter-spacing:normal; text-transform:none;
}
.auth-modal .auth-submit:hover{ background:#9c7a49; border-color:#9c7a49; }

.auth-modal-cancel{
  display:block; width:100%; text-align:center;
  background:none; border:none; cursor:pointer;
  margin-top: .4rem;
  font-family: var(--font-body); font-size:.68rem; letter-spacing:.04em;
  color: var(--arch-brown, #3A2A1C); opacity:.55;
  transition: opacity .15s ease;
}
.auth-modal-cancel:hover{ opacity:.9; text-decoration:underline; }
.auth-modal .auth-error{ color:#a9432f; font-size:.74rem; margin-bottom:.6rem; text-align:center; }
.auth-modal .auth-success{ color:#4d6b53; font-size:.76rem; margin-bottom:.6rem; line-height:1.4; text-align:center; }

.auth-modal .auth-divider{
  display:flex; align-items:center; gap:.9rem;
  margin: .9rem 0;
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--arch-brown, #3A2A1C); opacity:.5;
}
.auth-modal .auth-divider::before, .auth-modal .auth-divider::after{
  content:""; flex:1; height:1px; background: rgba(58,42,28,.14);
}
.auth-modal .auth-oauth-btn{
  width: fit-content; max-width: 100%; margin-inline: auto;
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  padding: .85rem 2.8rem; border: 1px solid rgba(58,42,28,.14); border-radius: 999px;
  background:#fff; font-family: inherit; font-size:.78rem; font-weight:500; color: var(--arch-brown, #3A2A1C);
  cursor:pointer; transition: border-color .2s ease, background .2s ease;
  margin-bottom: .2rem;
}
.auth-modal .auth-oauth-btn:hover{ border-color: var(--arch-gold, #B08D57); background: #fff; }

@media (max-width: 480px){
  .auth-modal{ padding: calc(var(--arch-w) * .08) 1.4rem .9rem; }
  .auth-modal .auth-field{ margin-bottom: .55rem; }
  .auth-modal .auth-field-row{ gap: .7rem; }
  .auth-modal .auth-field input{ padding: .8rem 1rem; font-size: .9rem; }
  .auth-modal-tabs{ margin-bottom: 1.1rem; }
  .auth-modal-subtitle{ margin-bottom: 1rem; }
}

body.search-overlay-open{ overflow: hidden; }

.search-overlay-backdrop{
  position: fixed; inset: 0; background: rgba(22,20,15,.45);
  z-index: 1200; display:flex; align-items:flex-start; justify-content:center;
  padding: 90px 1.2rem 1.2rem;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.search-overlay-backdrop.open{ opacity: 1; pointer-events: auto; }

.search-overlay{
  width: 100%; max-width: 640px; background: #fff; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(22,20,15,.25);
  max-height: 76vh; display:flex; flex-direction:column; overflow:hidden;
}

.search-overlay-bar{
  display:flex; align-items:center; gap:.8rem;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--line);
  color: var(--ink-soft); flex-shrink: 0;
}
.search-overlay-bar input{
  flex:1; border:none; outline:none; font-family: inherit; font-size: 1.05rem;
  color: var(--ink); background: transparent;
}
.search-overlay-close{
  background:none; border:none; font-size:1.4rem; line-height:1; cursor:pointer; color: var(--ink-soft);
}
.search-overlay-close:hover{ color: var(--ink); }

.search-overlay-results{ overflow-y:auto; padding:.5rem; }
.search-hint{ padding: 1.4rem 1rem; color: var(--ink-soft); font-size:.9rem; text-align:center; }

.search-result-row{
  display:flex; align-items:center; gap:.9rem;
  padding:.7rem .8rem; border-radius:8px; text-decoration:none; color:inherit;
  transition: background .15s;
}
.search-result-row:hover{ background: var(--bone-dim); }
.search-result-row img{ width:52px; height:52px; object-fit:cover; border-radius:6px; border:1px solid var(--line); background: var(--bone-dim); flex-shrink:0; }
.search-result-info{ flex:1; display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.search-result-name{ font-size:.92rem; color: var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-result-cat{ font-size:.76rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }
.search-result-price{ font-size:.95rem; color: var(--ink); white-space:nowrap; flex-shrink:0; }

@media (max-width: 640px){
  .search-overlay-backdrop{ padding: 70px .8rem .8rem; }
  .search-overlay{ max-height: 82vh; }
}

/* =========================================================
   Gold / Diamond / Ring-size guide popups
   ========================================================= */
body.guide-modal-open{ overflow: hidden; }

.guide-modal-backdrop{
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(22,20,15,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1.4rem;
  animation: guideFadeIn .2s ease;
}
.guide-modal-backdrop.closing{ animation: guideFadeOut .2s ease forwards; }
@keyframes guideFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes guideFadeOut{ to{ opacity:0; } }

.guide-modal{
  position: relative;
  width: 100%; max-width: 760px;
  max-height: 88vh; max-height: 88dvh;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 70px rgba(22,20,15,.35);
  animation: guidePopIn .25s cubic-bezier(.22,.9,.32,1);
}
.guide-modal-backdrop.closing .guide-modal{ animation: guidePopOut .2s ease forwards; }
@keyframes guidePopIn{ from{ opacity:0; transform: scale(.96) translateY(8px); } to{ opacity:1; transform: scale(1) translateY(0); } }
@keyframes guidePopOut{ to{ opacity:0; transform: scale(.97); } }

.guide-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem 1.5rem; background: var(--bone-dim, #f4f1ec);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.guide-modal-head h3{
  margin:0; font-family: var(--font-display); font-size: 1.15rem;
  letter-spacing: .04em; color: var(--ink);
}
.guide-modal-close{
  background: var(--ink); color:#fff; border:none; cursor:pointer;
  width: 28px; height: 28px; border-radius: 4px;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.2rem; line-height:1; flex-shrink:0;
}
.guide-modal-close:hover{ background: var(--gold); }

.guide-modal-body{
  padding: 1.6rem 1.8rem 2rem;
  overflow-y: auto;
  font-size: .92rem; line-height: 1.7; color: var(--ink);
}
.guide-modal-body p{ margin: 0 0 .9rem; }
.guide-modal-body h5{ margin: 0 0 .5rem; font-family: var(--font-display); font-size: 1.02rem; }

/* Confirm/notice dialog (js/order-actions.js) — small guide-modal */
.order-dialog{ max-width: 440px; }
.order-dialog .guide-modal-body{ text-align:center; padding: 1.6rem 1.6rem 1.8rem; }
.order-dialog-message{ color: var(--ink-soft); }
.order-dialog-actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top: 1.4rem; }

.guide-lead{ text-align:center; color: var(--ink-soft); }
.guide-heading-bold{ text-align:center; font-weight:600; font-size:1.02rem; margin-bottom:.3rem !important; }
.guide-subhead{ margin-top: 1.6rem !important; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.guide-note{ background: var(--bone-dim, #f4f1ec); border-radius: 8px; padding: 1rem 1.1rem; }

.guide-card-row{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.2rem; }
.guide-card{ background: var(--bone-dim, #f4f1ec); border-radius: 8px; padding: 1rem 1.1rem; }
.guide-card h5{ color: var(--gold); }
.guide-card p{ margin:0; font-size:.86rem; }

.guide-cert-row{ display:flex; align-items:center; gap: 1rem; margin: .8rem 0 1.2rem; flex-wrap: wrap; }
.guide-cert-badge{
  flex-shrink:0; width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bone-dim, #f4f1ec);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size: .72rem; letter-spacing:.04em;
  color: var(--gold); font-weight:600;
}
.guide-cert-row p{ margin:0; flex:1; min-width: 200px; }

.guide-scale-row{ display:flex; gap: 1rem; justify-content:space-between; margin: 1rem 0 1.4rem; flex-wrap: wrap; }
.guide-scale-group{ flex:1; min-width: 110px; text-align:center; }
.guide-scale-label{ display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); margin-bottom:.5rem; }
.guide-scale-icons{ display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; }
.guide-diamond-icon{ display:flex; flex-direction:column; align-items:center; gap:.2rem; font-size:.68rem; color: var(--ink-soft); }
.guide-clarity-row .guide-scale-group{ min-width: 90px; }

.guide-option-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
.guide-option-row + .guide-option-row{ margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.guide-option-tag{
  display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--gold); font-weight:600; margin-bottom:.4rem;
}
.guide-option-col ol, .guide-option-col ul{ margin: 0 0 1rem 1.1rem; padding:0; }
.guide-option-col li{ margin-bottom:.4rem; font-size:.88rem; }

.guide-ring-illustration{ display:flex; flex-direction:column; align-items:center; gap:.3rem; margin: .8rem 0; color: var(--ink-soft); font-size:.8rem; }

.guide-table-wrap{ overflow-x:auto; }
.guide-table{ width:100%; border-collapse: collapse; font-size:.82rem; }
.guide-table th, .guide-table td{ border: 1px solid var(--line); padding:.45rem .55rem; text-align:center; white-space:nowrap; }
.guide-table th{ background: var(--bone-dim, #f4f1ec); text-align:left; font-weight:600; }
.guide-table-vertical td{ white-space: normal; font-size:.78rem; min-width: 150px; }

.guide-necklace-row{ align-items:center; }
.guide-necklace-illustration{ display:flex; justify-content:center; }

.guide-wrist-illustration{ display:flex; justify-content:center; margin: .6rem 0 1.2rem; }

.guide-aani-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.6rem; }
.guide-aani-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.15rem;
  background: var(--bone-dim, #f4f1ec); border-radius: 8px; padding: .8rem .6rem 1rem;
}
.guide-aani-card strong{ font-size:.78rem; }
.guide-aani-card span{ font-size:.72rem; color: var(--ink-soft); }
.guide-aani-dims{ display:flex; gap: .8rem; font-size:.72rem; color: var(--ink-soft); margin-top:.2rem; }
.guide-aani-dims span{ font-weight:600; color: var(--ink); }

@media (max-width: 760px){
  .guide-card-row{ grid-template-columns: 1fr 1fr; }
}

.spec-breakup-row{
  /* grid-row:2 is explicit (desktop >900px) so it can never be
     disturbed by auto-placement — row1 is gallery+detail side by
     side (see product.html's own <style> block, which explicitly
     pins gallery=row1/col1, detail=row1/col2), this is row2, full
     width. Reset back to auto in that page's own max-width:900px
     block, where the grid drops to a single column and everything
     just stacks in DOM order again. */
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex; gap: 1.4rem;
  padding: 1.6rem 0; margin-top: .6rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  /* An opaque background plus a stacking context keeps this row's
     text readable even in case anything above it (e.g. the sticky
     gallery) ever visually extends past its own row for a moment. */
  position: relative;
  z-index: 1;
  background: #fff;
}
.spec-col{ flex: 1; min-width: 0; padding-right: 1.4rem; border-right: 1px solid var(--line); }
.spec-col:last-child{ border-right: none; padding-right: 0; }
.spec-col h5{ margin: 0 0 .6rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.spec-col p{ margin: 0 0 .4rem; font-size: .82rem; color: var(--ink-soft); }
.spec-col p strong{ color: var(--ink); font-weight: 500; }

.spec-others-toggle{
  display:flex; align-items:center; gap:.35rem;
  background:none; border:none; padding:0; margin:0 0 .4rem;
  font-size:.82rem; color: var(--ink-soft); cursor:pointer; font-family:inherit;
}
.spec-others-toggle:hover{ color: var(--ink); }
.spec-others-chevron{ font-size:.62rem; display:inline-block; transition: transform .2s ease; }
.spec-others-toggle[aria-expanded="true"] .spec-others-chevron{ transform: rotate(180deg); }
.spec-others-panel{ padding-left: .8rem; margin: 0 0 .4rem; border-left: 2px solid var(--line); }
.spec-others-group{ margin: 0 0 .2rem !important; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); opacity: .7; }
.spec-others-item{ margin: 0 0 0 .5rem !important; }

@media (max-width: 760px){
  .spec-breakup-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem .8rem; }
  .spec-col{ padding-right: .8rem; }
  .spec-col h5{ font-size: .68rem; }
  .spec-col p{ font-size: .74rem; }
}

/* Desktop only — nudges "Product Details" (and the row generally) in
   from the edge a little; mobile/tablet keep the base rule above
   untouched. */
@media (min-width: 901px){
  .spec-breakup-row{ padding-left: 1.4rem; }
}

@media (max-width: 640px){
  .guide-modal{ max-width: 96vw; max-height: 92vh; max-height: 92dvh; border-radius: 12px; }
  .guide-modal-body{ padding: 1.2rem 1.1rem 1.6rem; }
  .guide-card-row{ grid-template-columns: 1fr; }
  .guide-option-row{ grid-template-columns: 1fr; gap: 1.2rem; }
  .guide-scale-row{ gap: .6rem; }
  .guide-aani-grid{ grid-template-columns: 1fr 1fr; }
}