/* ── PAGE HEADER ── */
.page-header {
  padding: 70px 8% 52px;
  background: var(--white);
  border-bottom: 1px solid rgba(184,150,62,.1);
}
.ph-bc {
  display: flex; align-items: center; gap: 10px; margin-bottom: 32px;
}
.ph-bc-link {
  font-family:"Cormorant SC",serif; font-size:10px; letter-spacing:.3em;
  color:var(--ink-light); text-decoration:none; text-transform:uppercase;
  cursor:none; opacity:.65; transition:opacity .3s;
}
.ph-bc-link:hover { opacity:.9; }
.ph-bc-sep { color:var(--gold); opacity:.55; font-size:10px; }
.ph-bc-cur { font-family:"Cormorant SC",serif; font-size:10px; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; }

.ph-body {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 60px;
}
.ph-left { max-width: 560px; }
.ph-eyebrow {
  font-family:"Cormorant SC",serif; font-size:11px; letter-spacing:.5em;
  color:var(--gold); text-transform:uppercase; display:block; margin-bottom:14px; opacity:.9;
}
.ph-title {
  font-family:"Cormorant Garamond",serif;
  font-size: clamp(52px, 6vw, 78px);
  font-weight: 300; color: var(--ink); line-height: 1; margin-bottom: 0;
}
.ph-title em { font-style:italic; }
.ph-right { padding-bottom: 6px; text-align: right; }
.ph-count {
  font-family:"Cormorant SC",serif; font-size:11px; letter-spacing:.28em;
  color:var(--ink-light); text-transform:uppercase; opacity:.62; display:block; margin-bottom:10px;
}
.ph-note {
  font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size: clamp(15px,1.5vw,18px); line-height:1.75;
  color:var(--ink-light); max-width:360px;
}

/* ── CATEGORY NAV ── */
.cat-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 0; background: var(--white);
  border-bottom: 1px solid rgba(184,150,62,.1);
  position: sticky;
  top: 0px;
  z-index: 100;
  transition: top .55s cubic-bezier(.4,0,.2,1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  top: 50px;
}
@media screen and (max-width:650px){
  .cat-nav {
    justify-content: left;
  }
}
.cat-nav::-webkit-scrollbar { display: none; }

.cat-link {
  font-family:"Cormorant SC",serif; font-size:12px; letter-spacing:.25em;
  color:var(--ink-light); text-decoration:none; text-transform:uppercase;
  padding: 14px 28px; cursor:none; transition:color .3s;
  position:relative; border-right:1px solid rgba(184,150,62,.08);
  white-space: nowrap;
}
.cat-link:first-child { border-left:1px solid rgba(184,150,62,.08); }
.cat-link:hover { color:var(--ink); }
.cat-link--active { color:var(--gold); }
.cat-link--active::after {
  content:""; position:absolute; bottom:0; left:0; right:0;
  height:1.5px; background:var(--gold);
}

/* ── GRID SECTION ── */
.grid-section {
  background: var(--white);
  padding: 60px 6% 80px;
}
.grid-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 44px;
}
.grid-title {
  font-family:"Cormorant SC",serif; font-size:11px; letter-spacing:.35em;
  color:var(--gold); text-transform:uppercase; opacity:.88;
}
.grid-appt {
  font-family:"Cormorant SC",serif; font-size:11px; letter-spacing:.28em;
  color:var(--ink-light); text-transform:uppercase; opacity:.62;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* ── Card ── */
.product-card {
  cursor: none; position:relative; overflow:hidden;
  background: var(--cream-mid);
  transition: background .3s;
}
.product-card:hover { background: var(--cream-dark); }

.card-img-wrap {
  position: relative; overflow:hidden;
  /*aspect-ratio: 3/4;*/
  background: var(--cream-mid);
}
.card-img {
  width:100%; height:100%; object-fit:contain;
  display:block;
   transform: scale(1);
  /*transition: transform .7s ease;*/
}
.product-card:hover .card-img {  transform: scale(0.99);
  transition: transform .7s ease; }

.card-img.card-img--primary {
  position: relative;
  opacity: 1;
  z-index: 1;
  transition: opacity 0.5s ease, transform 0.7s ease;
}
.card-img.card-img--secondary {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.5s ease, transform 0.7s ease;
}
.product-card:hover .card-img.card-img--primary {
  opacity: 0;
}
.product-card:hover .card-img.card-img--secondary {
  opacity: 1;
}

.card-hover-line {
  position:absolute; bottom:0; left:0; right:0; height:2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  transform: scaleX(0); transition: transform .5s ease;
  transform-origin: center;
}
.product-card:hover .card-hover-line { transform: scaleX(1); }

.card-info {
  padding: 18px 20px 22px;
  border-top: 1px solid rgba(184,150,62,.08);
}
.card-stone {
  font-family:"Cormorant SC",serif; font-size:10px; letter-spacing:.3em;
  color:var(--gold); text-transform:uppercase; display:block;
  margin-bottom:5px; opacity:.88;
}
.card-name {
  font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size: 19px; color:var(--ink); display:block;
  transition: color .3s; line-height:1.15;
}
.product-card:hover .card-name { color:var(--gold); }

/* Visible call-to-action per tile — the whole card already opens the
   detail/enquiry panel on tap; this just makes that obvious. */
.card-enquire {
  font-family:"Cormorant SC",serif; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); opacity:.75;
  display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  transition: gap .3s, opacity .3s;
}
.product-card:hover .card-enquire { opacity:1; gap:10px; }

/* ── EDITORIAL STRIP ── */
.editorial-strip {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 500px; background: var(--cream-mid);
  border-top: 1px solid rgba(184,150,62,.08);
  border-bottom: 1px solid rgba(184,150,62,.08);
}
.es-img { position:relative; overflow:hidden; }
.es-img img { width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .9s; }
.editorial-strip:hover .es-img img { transform:scale(1.04); }
.es-text {
  padding: 72px 68px;
  display: flex; flex-direction:column; justify-content:center;
  background: var(--dark);
}
.es-eyebrow {
  font-family:"Cormorant SC",serif; font-size:8.5px; letter-spacing:.52em;
  color:var(--gold); text-transform:uppercase; display:block; margin-bottom:18px;
}
.es-caption {
  font-family:"Cormorant Garamond",serif; font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.22em; color:rgba(240,228,195,.3); text-transform:uppercase;
  display:block; margin-bottom:10px;
}
.es-title {
  font-family:"Cormorant Garamond",serif; font-size:clamp(26px,3vw,38px);
  font-weight:300; color:white; line-height:1.18; margin-bottom:22px;
}
.es-title em { font-style:italic; color:var(--gold-light); }
.es-rule { width:32px; height:1px; background:rgba(184,150,62,.4); margin-bottom:20px; }
.es-body {
  font-family:"EB Garamond",serif; font-size:17px;
  line-height:1.88; color:rgba(240,228,195,.48); margin-bottom:28px;
}
.es-link {
  font-family:"Cormorant SC",serif; font-size:9.5px; letter-spacing:.3em;
  color:var(--gold); text-decoration:none; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px; cursor:none; transition:gap .3s;
}
.es-link:hover { gap:16px; }
.es-link::after { content:"→"; }

/* ── CTA ── */
.section-cta {
  background: var(--dark); padding: 80px 40px; text-align: center;
}
.cta-ey {
  font-family:"Cormorant SC",serif; font-size:8.5px; letter-spacing:.55em;
  color:var(--gold); text-transform:uppercase; display:block; margin-bottom:20px;
}
.cta-title {
  font-family:"Cormorant Garamond",serif; font-size:clamp(26px,3.8vw,44px);
  font-weight:300; color:white; line-height:1.12; margin-bottom:8px;
}
.cta-title em { font-style:italic; color:var(--gold-light); }
.cta-rule { width:1px; height:44px; background:linear-gradient(to bottom,rgba(184,150,62,.5),transparent); margin:20px auto; }
.cta-sub {
  font-family:"Cormorant Garamond",serif; font-style:italic; font-size:17px;
  color:rgba(240,228,195,.45); max-width:380px; margin:0 auto 34px; line-height:1.8;
}
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-btn {
  font-family:"Cormorant SC",serif; font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:white; border:1px solid rgba(255,255,255,.22);
  padding:13px 40px; text-decoration:none; cursor:none; transition:all .35s;
  display:inline-block;
}
.cta-btn:hover, .cta-btn--primary { background:var(--gold); border-color:var(--gold); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .ph-body { flex-direction: column; align-items: flex-start; gap: 30px; }
  .ph-right { text-align: left; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .editorial-strip { grid-template-columns: 1fr; }
  .cat-nav { top: 100px; }
  
  .card-info{ 
          padding: 8px 11px 8px;
  } 
}

@media (max-width: 768px) {
  .page-header { padding-top: 140px; padding-bottom: 32px; }
  .ph-bc { margin-bottom: 20px; }
  .product-grid { grid-template-columns: 1fr  1fr; }

  /* One scrollable row instead of a 2×2 grid — the grid ate a whole extra
     row (~75px) of chrome above the first product on every category page. */
  .cat-nav { top: 80px; flex-wrap: nowrap; justify-content: flex-start; }
  .cat-link {
    padding: 12px 20px;
    font-size: 11px;
    flex: 0 0 auto;
    text-align: center;
    border-bottom: none;
  }

  /* Reserve two lines for the stone/eyebrow label so a wrapping one
     ("Emerald & Diamond") doesn't push its title lower than the card
     next to it, which used a single-line label ("Diamond"). */
  .card-stone {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.4em * 2);
    line-height: 1.4em;
  }

  .es-text { padding: 40px 30px; }
}



.dp-note {
  margin: 20px 0;
  padding: 16px 20px;
  background: #f5f1ea;
  border-left: 2px solid #b8935a;
}

.dp-note-italic {
  font-style: italic;
  font-size: 13px;
  color: #6b6155;
  margin: 0 0 10px 0;
  line-height: 1.5;
}

.dp-note-caps {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #4a3f33;
  margin: 0;
  line-height: 1.6;
}

/* ── Product photo viewer (phones) — see "product photo viewer" in main.js ── */
.bdk-viewer {
  position: fixed; inset: 0; z-index: 3000;
  background: #14120f;
  display: none;
}
.bdk-viewer.is-open { display: block; }
.bdk-viewer-stage {
  position: absolute; inset: 0;
  overflow: auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: center; justify-content: center;
  touch-action: pan-x pan-y;
}
.bdk-viewer.is-zoomed .bdk-viewer-stage { display: block; }
.bdk-viewer-img {
  display: block; width: 100%; height: auto; max-width: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.bdk-viewer-close {
  position: fixed; top: 14px; right: 14px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(184, 150, 62, .5); background: rgba(20, 18, 15, .6);
  color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
.bdk-viewer-hint {
  position: fixed; left: 0; right: 0; bottom: 22px; text-align: center;
  font-family: "Cormorant SC", serif; font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(240, 228, 195, .7); pointer-events: none;
}
.bdk-viewer.is-zoomed .bdk-viewer-hint { display: none; }