/* ═══════════════════════════════════════════════════════════
   PRODUCT DETAIL — Amazon-inspired, luxury-jewellery styled
   Loaded only on /product/{id}. Two-column hero (gallery + info),
   tabbed details, related products, sticky mobile bar.
═══════════════════════════════════════════════════════════ */

:root {
  /* Mirrors the home-page DEME palette so the product page reads as a
     direct continuation of the festive-edit / occasion / focus sections.
     ─ cream surfaces, bone hairlines, warm-black ink, clay accent. */
  --pd-ink:       #1A1815;   /* de-ink     — near-black, warm */
  --pd-ink-soft:  #6B5D4F;   /* de-ink-soft — secondary warm grey */
  --pd-mute:      #8A7C6B;   /* lighter warm grey for fine print */
  --pd-line:      #E8DECB;   /* de-bone    — warm hairline */
  --pd-line-soft: #F0E7D6;   /* softer bone for inner dividers */
  --pd-cream:     #FBF7F0;   /* de-cream-soft — lighter cream */
  --pd-cream-d:   #F5EFE5;   /* de-cream   — main cream surface */
  --pd-gold:      #8B6F47;   /* de-clay    — deep champagne accent */
  --pd-gold-d:    #5C4A33;   /* de-clay-d  — darker clay */
  --pd-accent:    #8B6F47;   /* unified — use clay for emphasis */
  --pd-green:     #5C7A3F;   /* warm olive-green for in-stock */
  --pd-shadow-sm: 0 1px 3px rgba(60, 40, 20, .08);
  --pd-shadow-md: 0 12px 28px rgba(60, 40, 20, .10);
  --pd-shadow-lg: 0 30px 70px rgba(60, 40, 20, .14);
}

.pd-page {
  background: #FFFFFF;
  color: var(--pd-ink);
  font-family: 'Jost', sans-serif;
  padding-top: 96px; /* clear fixed nav */
  min-height: 100vh;
}

/* ── Nav theme override ───────────────────────────────────
   The product detail page has a white top, so the default
   white-on-transparent nav is invisible. Force dark nav text
   when at the top; revert to white when the nav scrolls into
   its frosted-dark state. */
body.product-page .nav {
  --nav-fg:      #0F0F0F;
  --nav-fg-soft: rgba(15, 15, 15, 0.72);
}
body.product-page .nav-rule {
  background: rgba(15, 15, 15, 0.16);
}
body.product-page .nav-ico,
body.product-page .nav-signin,
body.product-page .nav-account-btn {
  color: #0F0F0F;
}
body.product-page .nav-ico svg,
body.product-page .nav-signin svg,
body.product-page .nav-account-btn svg {
  stroke: #0F0F0F;
}
body.product-page .nav.scrolled {
  --nav-fg:      #F8FCF9;
  --nav-fg-soft: rgba(244, 250, 246, 0.78);
}
body.product-page .nav.scrolled .nav-rule {
  background: rgba(255, 255, 255, 0.14);
}
body.product-page .nav.scrolled .nav-ico,
body.product-page .nav.scrolled .nav-signin,
body.product-page .nav.scrolled .nav-account-btn {
  color: #F8FCF9;
}
body.product-page .nav.scrolled .nav-ico svg,
body.product-page .nav.scrolled .nav-signin svg,
body.product-page .nav.scrolled .nav-account-btn svg {
  stroke: #F8FCF9;
}

/* "Beyond Expression" text is baked into logo.svg as white-filled paths,
   alongside an embedded gem PNG. On the white product-page hero the text
   disappears — invert the SVG to darken the text, then overlay the gem
   region as an unfiltered background-image so the symbol keeps its
   original colour. Once the nav scrolls into its dark frosted state,
   drop both the filter and the overlay so the original white logo
   returns. The gem occupies roughly x: 17–44% of the SVG viewBox; the
   horizontal clip-path crops the overlay to that band. */
body.product-page .nav-logo {
  position: relative;
}
body.product-page .nav-logo img {
  filter: invert(1);
  transition: filter .3s ease;
  display: block;
}
body.product-page .nav-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/logo.svg') no-repeat center / 100% 100%;
  clip-path: inset(0 56.1% 0 17.2%);
  pointer-events: none;
  transition: opacity .3s ease;
}
body.product-page .nav.scrolled .nav-logo img {
  filter: none;
}
body.product-page .nav.scrolled .nav-logo::after {
  opacity: 0;
}

/* ─── Breadcrumb ─── */
.pd-crumb {
  background: var(--pd-cream);
  border-bottom: 1px solid var(--pd-line);
}
.pd-crumb-in {
  max-width: 1480px;
  margin: 0 auto;
  padding: 14px 28px;
  font-size: .82rem;
  color: var(--pd-mute);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pd-crumb a {
  color: var(--pd-ink-soft);
  text-decoration: none;
  transition: color .2s ease;
}
.pd-crumb a:hover { color: var(--pd-gold-d); text-decoration: underline; }
.pd-crumb-sep { color: var(--pd-mute); }
.pd-crumb-current {
  color: var(--pd-ink);
  font-weight: 500;
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── HERO: two-column grid ─── */
.pd-hero {
  background: #FFFFFF;
  padding: 36px 0 60px;
}
.pd-hero-in {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: flex-start;
}

/* ─── GALLERY ─── */
.pd-gallery {
  position: sticky;
  top: 110px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  align-items: flex-start;
}
.pd-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 600px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 4px;
}
.pd-thumbs::-webkit-scrollbar { width: 4px; }
.pd-thumbs::-webkit-scrollbar-thumb { background: var(--pd-line); border-radius: 2px; }
.pd-thumb {
  width: 72px; height: 72px;
  border-radius: 6px;
  border: 1.5px solid var(--pd-line);
  background: var(--pd-cream);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  flex-shrink: 0;
}
.pd-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.pd-thumb:hover {
  border-color: var(--pd-ink);
  transform: translateY(-2px);
  box-shadow: var(--pd-shadow-sm);
}
.pd-thumb:hover img { transform: scale(1.08); }
.pd-thumb.is-active {
  border-color: var(--pd-ink);
  box-shadow: 0 0 0 2px rgba(0,0,0,.05), var(--pd-shadow-sm);
}

.pd-main {
  position: relative;
  border-radius: 8px;
  background: var(--pd-cream);
  aspect-ratio: 1 / 1;
  cursor: zoom-in;
  border: 1px solid var(--pd-line);
}
.pd-main-stage {
  position: absolute; inset: 0;
  border-radius: 8px;
  overflow: hidden;
}
.pd-main-stage {
  position: absolute; inset: 0;
}
.pd-main-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .45s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.pd-main-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.pd-main-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

/* Zoom lens overlay on main image */
.pd-zoom-lens {
  position: absolute;
  width: 180px; height: 180px;
  border: 2px solid rgba(255,255,255,.85);
  background: rgba(0,0,0,.12);
  border-radius: 50%;
  pointer-events: none;
  display: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.04);
  transform: translate(-50%, -50%);
  z-index: 3;
}
.pd-main.is-zooming .pd-zoom-lens { display: block; }

/* Floating zoom panel (desktop) — sits to the right of .pd-main */
.pd-zoom-panel {
  position: absolute;
  top: 0; left: calc(100% + 18px);
  width: 480px; height: 480px;
  border: 1px solid var(--pd-line);
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
  display: none;
  z-index: 5;
  box-shadow: var(--pd-shadow-lg);
  pointer-events: none;
}
.pd-main.is-zooming .pd-zoom-panel { display: block; }
.pd-zoom-panel img {
  position: absolute;
  width: 200%;
  height: 200%;
  max-width: none;
  transform-origin: 0 0;
}

/* Wishlist heart on main image */
.pd-wish {
  position: absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--pd-line);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 4;
  transition: all .25s ease;
}
.pd-wish svg { width: 20px; height: 20px; stroke: var(--pd-ink); }
.pd-wish:hover {
  background: var(--pd-ink);
  border-color: var(--pd-ink);
  transform: scale(1.08);
}
.pd-wish:hover svg { stroke: #FFFFFF; }
.pd-wish.is-active {
  background: #B91C1C;
  border-color: #B91C1C;
}
.pd-wish.is-active svg { stroke: #FFFFFF; fill: #FFFFFF; }

/* Mobile arrows + counter (hidden on desktop) */
.pd-mobile-controls {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--pd-line);
  border-radius: 999px;
  padding: 6px 10px;
  z-index: 3;
  backdrop-filter: blur(8px);
}
.pd-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.pd-arrow svg { width: 16px; height: 16px; stroke: var(--pd-ink); }
.pd-arrow:hover { background: var(--pd-line-soft); }
.pd-counter {
  font-size: .76rem;
  color: var(--pd-ink-soft);
  letter-spacing: .04em;
  min-width: 42px;
  text-align: center;
}

/* ─── INFO COLUMN ─── */
.pd-info {
  padding-top: 4px;
}
.pd-cat {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--pd-gold);
  margin-bottom: 14px;
}
.pd-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--pd-ink);
  margin: 0 0 14px;
  letter-spacing: -.008em;
}

.pd-meta-row {
  display: flex; align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--pd-mute);
}
.pd-sku { letter-spacing: .04em; }
.pd-hallmark {
  display: inline-flex;
  align-items: center; gap: 6px;
  color: var(--pd-gold-d);
  font-weight: 500;
}
.pd-hallmark svg { width: 14px; height: 14px; }

/* Rating */
.pd-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pd-line);
  margin-bottom: 18px;
  flex-wrap: wrap;
  font-size: .88rem;
  color: var(--pd-ink-soft);
}
.pd-stars { display: inline-flex; gap: 1px; }
.pd-star {
  font-size: 1rem;
  color: var(--pd-line);
  line-height: 1;
}
.pd-star.is-full { color: var(--pd-gold); }
.pd-star.is-half {
  background: linear-gradient(90deg, var(--pd-gold) 50%, var(--pd-line) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pd-rating-num {
  font-weight: 600;
  color: var(--pd-ink);
}
.pd-rating-count {
  color: var(--pd-gold-d);
  text-decoration: none;
}
.pd-rating-count:hover { text-decoration: underline; }
.pd-rating-sep { color: var(--pd-mute); }
.pd-sold {
  background: var(--pd-cream-d);
  color: var(--pd-gold-d);
  padding: 2px 10px;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Price */
.pd-price-block {
  padding: 4px 0 22px;
  border-bottom: 1px solid var(--pd-line);
  margin-bottom: 22px;
}
.pd-price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.pd-discount-tag {
  background: var(--pd-accent);
  color: #FFFFFF;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.pd-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  font-weight: 500;
  color: var(--pd-ink);
  line-height: 1;
}
.pd-price-old {
  font-size: .9rem;
  color: var(--pd-mute);
}
.pd-price-old s { text-decoration: line-through; }
.pd-price-tax {
  margin: 8px 0 0;
  font-size: .78rem;
  color: var(--pd-mute);
}
.pd-price-save {
  margin: 4px 0 0;
  font-size: .82rem;
  color: var(--pd-green);
}
.pd-price-save strong { color: var(--pd-green); }

.pd-short {
  font-size: .94rem;
  line-height: 1.6;
  color: var(--pd-ink-soft);
  margin: 0 0 22px;
  max-width: 56ch;
}

/* Option groups (metal, size) */
.pd-option {
  margin-bottom: 22px;
}
.pd-option-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pd-option-lbl {
  font-size: .82rem;
  font-weight: 600;
  color: var(--pd-ink);
  letter-spacing: .02em;
}
.pd-option-lbl::after {
  content: ':';
  margin-right: 6px;
}
.pd-option-val {
  font-size: .82rem;
  color: var(--pd-ink-soft);
  font-weight: 500;
}
.pd-option-guide {
  font-size: .78rem;
  color: var(--pd-gold-d);
  text-decoration: none;
}
.pd-option-guide:hover { text-decoration: underline; }

.pd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pd-chip {
  padding: 10px 18px;
  border: 1.5px solid var(--pd-line);
  background: #FFFFFF;
  color: var(--pd-ink);
  font-size: .86rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s ease;
  font-family: inherit;
}
.pd-chip:hover {
  border-color: var(--pd-ink);
  background: var(--pd-cream);
}
.pd-chip.is-active {
  border-color: var(--pd-ink);
  background: var(--pd-ink);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0,0,0,.16);
}
.pd-chip--sm {
  padding: 8px 14px;
  font-size: .82rem;
  min-width: 44px;
  text-align: center;
}

/* Buy row */
.pd-buy-row {
  display: flex;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.pd-qty {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--pd-line);
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
  height: 52px;
}
.pd-qty-btn {
  width: 42px;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--pd-ink);
  transition: background .2s ease;
}
.pd-qty-btn:hover { background: var(--pd-cream); }
.pd-qty-num {
  width: 48px;
  height: 100%;
  border: none;
  border-left: 1px solid var(--pd-line);
  border-right: 1px solid var(--pd-line);
  text-align: center;
  font-size: .96rem;
  font-weight: 600;
  color: var(--pd-ink);
  background: #FFFFFF;
  outline: none;
  font-family: inherit;
}

.pd-buy-btns {
  display: flex;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 280px;
}
.pd-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 26px;
  height: 52px;
  border: 1.5px solid;
  border-radius: 8px;
  font-family: 'Jost', sans-serif;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  text-decoration: none;
}
.pd-btn svg {
  width: 18px; height: 18px;
  transition: transform .25s ease;
}
.pd-btn--cart {
  background: var(--pd-ink);
  color: #FFFFFF;
  border-color: var(--pd-ink);
}
.pd-btn--cart:hover {
  background: transparent;
  color: var(--pd-ink);
  transform: translateY(-2px);
  box-shadow: var(--pd-shadow-md);
}
.pd-btn--cart::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-20deg);
  transition: left .8s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.pd-btn--cart:hover::before { left: 140%; }

.pd-btn--buy {
  background: linear-gradient(135deg, var(--pd-gold) 0%, var(--pd-gold-d) 100%);
  color: #FFFFFF;
  border-color: var(--pd-gold-d);
}
.pd-btn--buy:hover {
  background: linear-gradient(135deg, var(--pd-gold-d) 0%, var(--pd-ink) 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(139,111,71,.32);
}
.pd-btn--buy:hover svg { transform: translateX(4px); }
.pd-btn.is-added {
  background: var(--pd-green);
  color: #FFFFFF;
  border-color: var(--pd-green);
}

/* Delivery + pincode */
.pd-delivery {
  background: var(--pd-cream);
  border: 1px solid var(--pd-line);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 22px;
}
.pd-delivery-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.pd-delivery-row svg {
  width: 26px; height: 26px;
  stroke: var(--pd-gold-d);
  flex-shrink: 0;
  margin-top: 2px;
}
.pd-delivery-text { display: flex; flex-direction: column; gap: 4px; }
.pd-delivery-text strong {
  font-size: .9rem;
  font-weight: 600;
  color: var(--pd-ink);
}
.pd-delivery-text span {
  font-size: .82rem;
  color: var(--pd-ink-soft);
}

.pd-pincode {
  display: flex;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--pd-line);
  border-radius: 6px;
  overflow: hidden;
}
.pd-pincode input {
  flex: 1;
  padding: 10px 14px;
  border: none;
  outline: none;
  font-size: .86rem;
  font-family: inherit;
  background: transparent;
}
.pd-pincode button {
  padding: 0 18px;
  border: none;
  background: var(--pd-ink);
  color: #FFFFFF;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  transition: background .2s ease;
}
.pd-pincode button:hover { background: var(--pd-gold-d); }
.pd-pin-msg {
  margin: 8px 0 0;
  font-size: .8rem;
  min-height: 1.2em;
}
.pd-pin-msg.is-ok { color: var(--pd-green); }
.pd-pin-msg.is-err { color: #B91C1C; }

/* Trust strip */
.pd-trust {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--pd-line);
}
.pd-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  color: var(--pd-ink-soft);
  font-weight: 500;
}
.pd-trust svg {
  width: 22px; height: 22px;
  stroke: var(--pd-gold-d);
  flex-shrink: 0;
}

/* ─── DETAILS / TABS ─── */
.pd-details {
  background: var(--pd-cream);
  border-top: 1px solid var(--pd-line);
  padding: 56px 0;
}
.pd-details-in {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 28px;
}
.pd-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--pd-line);
  margin-bottom: 36px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pd-tabs::-webkit-scrollbar { display: none; }
.pd-tab {
  background: transparent;
  border: none;
  padding: 14px 22px;
  font-family: 'Jost', sans-serif;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--pd-mute);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .25s ease;
  white-space: nowrap;
}
.pd-tab:hover {
  color: var(--pd-ink);
}
.pd-tab.is-active {
  color: var(--pd-ink);
  border-bottom-color: var(--pd-ink);
  font-weight: 600;
}

.pd-panel {
  display: none;
  animation: pd-fade .4s cubic-bezier(.4,0,.2,1);
}
.pd-panel.is-active { display: block; }
@keyframes pd-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pd-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 40px;
}
.pd-panel-body p {
  font-size: .96rem;
  line-height: 1.75;
  color: var(--pd-ink-soft);
  margin: 0 0 16px;
  max-width: 64ch;
}
.pd-panel-h {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--pd-ink);
  margin: 0 0 14px;
}
.pd-bullets {
  list-style: none;
  padding: 0; margin: 14px 0 0;
  display: grid; gap: 10px;
}
.pd-bullets li {
  position: relative;
  padding-left: 22px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--pd-ink-soft);
}
.pd-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pd-gold);
  box-shadow: 0 0 0 3px rgba(139,111,71,.18);
}
.pd-bullets strong { color: var(--pd-ink); font-weight: 600; }

.pd-panel-side {
  background: #FFFFFF;
  border: 1px solid var(--pd-line);
  border-radius: 10px;
  padding: 22px;
}
.pd-fact {
  padding: 12px 0;
  border-bottom: 1px solid var(--pd-line-soft);
}
.pd-fact:last-child { border-bottom: none; }
.pd-fact-lbl {
  display: block;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pd-gold);
  font-weight: 600;
  margin-bottom: 4px;
}
.pd-fact-val {
  font-size: .9rem;
  color: var(--pd-ink);
  line-height: 1.5;
}

/* Specs table */
.pd-specs {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF;
  border: 1px solid var(--pd-line);
  border-radius: 10px;
  overflow: hidden;
  max-width: 720px;
}
.pd-specs th, .pd-specs td {
  text-align: left;
  padding: 14px 22px;
  border-bottom: 1px solid var(--pd-line-soft);
  font-size: .9rem;
}
.pd-specs tr:last-child th,
.pd-specs tr:last-child td { border-bottom: none; }
.pd-specs th {
  background: var(--pd-cream);
  font-weight: 600;
  color: var(--pd-ink);
  width: 200px;
  letter-spacing: .02em;
}
.pd-specs td {
  color: var(--pd-ink-soft);
}

/* Reviews */
.pd-reviews {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
}
.pd-reviews-summary {
  background: #FFFFFF;
  border: 1px solid var(--pd-line);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  height: fit-content;
}
.pd-reviews-big {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  font-weight: 500;
  color: var(--pd-ink);
  line-height: 1;
}
.pd-reviews-stars {
  display: flex; justify-content: center; gap: 1px;
  margin: 10px 0 6px;
  font-size: 1.2rem;
  color: var(--pd-line);
}
.pd-reviews-stars .is-full { color: var(--pd-gold); }
.pd-reviews-count {
  font-size: .82rem;
  color: var(--pd-mute);
}
.pd-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pd-review {
  background: #FFFFFF;
  border: 1px solid var(--pd-line);
  border-radius: 10px;
  padding: 20px 22px;
}
.pd-review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.pd-review-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pd-gold) 0%, var(--pd-gold-d) 100%);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: .94rem;
  font-family: 'Cormorant Garamond', serif;
}
.pd-review-head strong {
  display: block;
  font-size: .9rem;
  color: var(--pd-ink);
  font-weight: 600;
}
.pd-review-head small {
  color: var(--pd-mute);
  font-size: .76rem;
}
.pd-review-head > div { flex: 1; }
.pd-review-stars {
  background: var(--pd-cream-d);
  color: var(--pd-gold-d);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 600;
}
.pd-review-body {
  margin: 0;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--pd-ink-soft);
}

/* ─── RELATED ─── */
.pd-related {
  background: #FFFFFF;
  padding: 64px 0 80px;
  border-top: 1px solid var(--pd-line);
}
.pd-related-in {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 28px;
}
.pd-related-hd {
  text-align: center;
  margin-bottom: 40px;
}
.pd-related-hd .eyebrow {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--pd-gold);
  font-weight: 600;
  margin-bottom: 8px;
}
.pd-related-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 500;
  color: var(--pd-ink);
  margin: 0;
  letter-spacing: -.005em;
}
.pd-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.pd-rel-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #FFFFFF;
  border: 1px solid var(--pd-line);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.4,0,.2,1),
              box-shadow .35s ease,
              border-color .25s ease;
}
.pd-rel-card:hover {
  transform: translateY(-6px);
  border-color: var(--pd-ink);
  box-shadow: var(--pd-shadow-md);
}
.pd-rel-img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--pd-cream);
}
.pd-rel-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}
.pd-rel-card:hover .pd-rel-img img { transform: scale(1.07); }
.pd-rel-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--pd-ink);
  color: #FFFFFF;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pd-rel-body {
  padding: 16px 18px 18px;
}
.pd-rel-cat {
  display: block;
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--pd-gold);
  font-weight: 600;
  margin-bottom: 6px;
}
.pd-rel-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--pd-ink);
  margin: 0 0 12px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.4em;
}
.pd-rel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--pd-line-soft);
  padding-top: 12px;
}
.pd-rel-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pd-ink);
}
.pd-rel-stars {
  background: var(--pd-cream-d);
  color: var(--pd-gold-d);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: .76rem;
  font-weight: 600;
}

/* ─── STICKY MOBILE BAR ─── */
.pd-stuck {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.98);
  border-top: 1px solid var(--pd-line);
  padding: 12px 18px;
  display: none;
  align-items: center;
  gap: 14px;
  z-index: 80;
  backdrop-filter: blur(10px);
  transform: translateY(110%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -8px 24px rgba(0,0,0,.06);
}
.pd-stuck.is-visible { transform: translateY(0); }
.pd-stuck-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pd-stuck-name {
  font-size: .8rem;
  color: var(--pd-ink-soft);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-stuck-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  color: var(--pd-ink);
  font-weight: 600;
}
.pd-stuck-add {
  flex: 0 0 auto !important;
  padding: 0 22px;
  height: 44px;
  font-size: .84rem;
}

/* ─── TOAST ─── */
.pd-toast {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(40px);
  background: var(--pd-ink);
  color: #FFFFFF;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .02em;
  box-shadow: 0 12px 32px rgba(0,0,0,.24);
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  transition: opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1);
}
.pd-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .pd-zoom-panel { width: 380px; height: 380px; }
}

@media (max-width: 1100px) {
  .pd-hero-in {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .pd-gallery {
    position: relative;
    top: 0;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }
  .pd-zoom-panel { display: none !important; }
  .pd-main { cursor: default; }
  .pd-reviews { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .pd-page { padding-top: 80px; }
  .pd-hero { padding: 24px 0 40px; }
  .pd-hero-in { padding: 0 18px; gap: 28px; }
  .pd-crumb-in { padding: 12px 18px; font-size: .76rem; }
  .pd-details-in { padding: 0 18px; }
  .pd-related-in { padding: 0 18px; }
  .pd-details { padding: 40px 0; }
  .pd-related { padding: 48px 0 60px; }

  .pd-gallery {
    grid-template-columns: 1fr;
  }
  .pd-thumbs {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    order: 2;
    padding: 8px 2px 2px;
  }
  .pd-thumb { width: 64px; height: 64px; }
  .pd-mobile-controls { display: inline-flex; }
  .pd-main { aspect-ratio: 4 / 5; }

  .pd-title { font-size: 1.5rem; }
  .pd-price { font-size: 1.9rem; }

  .pd-buy-row { flex-direction: column; }
  .pd-buy-btns { width: 100%; min-width: 0; }

  .pd-panel-grid { grid-template-columns: 1fr; gap: 24px; }
  .pd-related-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pd-rel-name { font-size: 1.04rem; }

  .pd-stuck { display: flex; }
  .pd-page { padding-bottom: 80px; }
}

@media (max-width: 460px) {
  .pd-related-grid { grid-template-columns: 1fr; }
  .pd-trust { grid-template-columns: repeat(2, 1fr); }
  .pd-tabs { gap: 0; }
  .pd-tab { padding: 12px 14px; font-size: .82rem; }
  .pd-specs th { width: 130px; padding: 12px 14px; font-size: .82rem; }
  .pd-specs td { padding: 12px 14px; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-page * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}