/* ═══════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE — "Daylight Atelier" visual identity.
   Second pass, replacing the earlier dark "Atelier Noir" treatment
   wholesale: bright, near-white ground, flat geometry (no pills, no
   drop shadows), a single muted-gold accent spent sparingly, and one
   deliberate near-black section (the film reel) for contrast rather
   than several competing dark blocks. Scoped to this page only via
   the .pd- prefix, distinct from the shared .pdp-* rules the diamond
   detail page still relies on.

   Shared contracts with astridi.js — kept as-is even though nothing
   else here uses the .pdp- prefix:
     .pdp-viewer-dot        — dot indicators, rebuilt by JS
     .size-drawer-tab / .size-drawer-panel / .size-list-row — size drawer
   ═══════════════════════════════════════════════════════════════ */

/* Typefaces intentionally NOT imported here — Playfair Display, Cormorant
   Garamond and Poppins are already loaded site-wide by layouts/frontend.blade.php,
   and this page uses the same pairing as the rest of the site (Playfair for
   display headings, Poppins for UI/body) rather than a page-specific face. */

:root{
  --pd-white:      #FFFFFF;
  --pd-ivory:      #FAF8F3;
  --pd-sand:       #F1ECE2;
  --pd-ink:        #131214;
  --pd-ink-soft:   #57555C;
  --pd-ink-faint:  #8B8890;
  --pd-line:       rgba(19,18,20,0.12);
  --pd-line-soft:  rgba(19,18,20,0.07);
  --pd-gold:       #9B7A3F;
  --pd-gold-deep:  #7C5F2E;
  --pd-black:      #0E0D0F;
  --pd-white-on-black: #F4F2ED;
  --pd-muted-on-black: rgba(244,242,237,0.6);
  --pd-line-on-black:  rgba(244,242,237,0.14);
  --pd-serif: 'Playfair Display', Georgia, serif;
  --pd-sans:  'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.pd-page{ background:var(--pd-white); color:var(--pd-ink); font-family:var(--pd-sans); }
.pd-page *{ box-sizing:border-box; }
.pd-page section{ position:relative; }

/* Shared type utilities */
.pd-eyebrow{
  font-family:var(--pd-sans); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pd-gold);
}
.pd-h2{
  font-family:var(--pd-serif); font-weight:500; font-size:clamp(26px,3.2vw,40px);
  line-height:1.16; letter-spacing:0; color:var(--pd-ink);
}

/* ═══ HERO ═══════════════════════════════════════════════════ */
.pd-hero{
  background:var(--pd-white); color:var(--pd-ink);
  display:grid; grid-template-columns: 1.4fr 1fr; align-items:start;
}
.pd-hero-stage{ position:relative; padding:32px 0 48px; display:flex; flex-direction:column; min-width:0; }

@keyframes pdFadeIn{ from{ opacity:0; } to{ opacity:1; } }
.pd-hero-stage{ animation:pdFadeIn .5s ease both; }
.pd-hero-info{ animation:pdFadeIn .6s ease .1s both; }

.pd-hero-crumb{
  display:flex; align-items:center; gap:8px; padding:0 48px 22px;
  font-size:11px; letter-spacing:.03em; color:var(--pd-ink-faint);
}
.pd-hero-crumb a{ color:var(--pd-ink-faint); text-decoration:none; transition:color .2s; }
.pd-hero-crumb a:hover{ color:var(--pd-ink); }
.pd-hero-crumb .sep{ color:var(--pd-line); }

.pd-view-toggle{
  display:flex; gap:0; width:fit-content; margin:0 48px 18px;
  border:1px solid var(--pd-ink); border-radius:0; overflow:hidden;
}
.pd-view-toggle-btn{
  font-family:var(--pd-sans); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:9px 18px; border:none; background:transparent; color:var(--pd-ink); cursor:pointer;
  transition:background .2s, color .2s;
}
.pd-view-toggle-btn.active{ background:var(--pd-ink); color:var(--pd-white); }
.pd-view-toggle-btn:not(.active):hover{ background:var(--pd-sand); }

/* Row wrapping the image + the JS-built thumbnail rail (see the blade
   comment at .pd-viewer-row) so the rail's width comes out of the photo's
   own space instead of leaving it as dead area beside a narrower image. */
.pd-viewer-row{ display:flex; align-items:stretch; gap:14px; margin:0 48px; height:min(72vh,680px); }

/* Bright ivory stage — studio photography sits naturally on it without
   the letterboxing a dark or pure-white ground would create. */
.pd-viewer-main{
  position:relative; flex:1 1 auto; min-width:0; overflow:hidden; border-radius:0; background:var(--pd-ivory);
  height:100%;
}
.pd-viewer-main img{
  width:100%; height:100%; object-fit:contain; display:block;
  transition:opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover){
  .pd-viewer-main img.pd-zoomed{ transform:scale(1.65); }
}
.pd-viewer-nav{ position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); display:flex; justify-content:space-between; padding:0 14px; pointer-events:none; }
.pd-viewer-btn{
  pointer-events:all; width:38px; height:38px; border-radius:50%; border:1px solid var(--pd-line);
  background:rgba(255,255,255,0.85); color:var(--pd-ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s, border-color .2s;
}
.pd-viewer-btn:hover{ background:var(--pd-ink); border-color:var(--pd-ink); color:var(--pd-white); }
.pd-viewer-tools{ position:absolute; top:16px; right:16px; display:flex; flex-direction:column; gap:8px; }
.pd-viewer-tool{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--pd-line);
  background:rgba(255,255,255,0.85); color:var(--pd-ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition:background .2s, color .2s;
}
.pd-viewer-tool:hover{ background:var(--pd-ink); color:var(--pd-white); }
/* Positioned as an overlay on the image (matching .pd-viewer-nav /
   .pd-viewer-tools) rather than flowing in-document — a gallery with
   many images (Stuller angle sets routinely run 15-20+) would otherwise
   wrap the dot row onto several lines and push a tall, near-invisible
   block of pale dots below the photo. flex-wrap + max-width caps how
   far a very long dot row can spread before it wraps in place. */
.pd-viewer-dots{
  position:absolute; left:0; right:0; bottom:14px; z-index:2;
  display:flex; flex-wrap:wrap; justify-content:center; align-content:center;
  gap:6px; padding:0 16px; max-width:100%;
}
.pdp-viewer-dot{
  width:5px; height:5px; border-radius:50%; border:none; background:rgba(19,18,20,0.28); cursor:pointer; padding:0;
  transition:background .2s, width .2s; flex-shrink:0;
}
.pdp-viewer-dot.active{ background:var(--pd-gold); width:15px; border-radius:3px; }

/* JS-built thumbnail strip (#pdpThumbStrip, inserted as .pd-viewer-main's
   sibling inside .pd-viewer-row — see the blade comment there). It ships
   with inline layout styles (display:flex, gap, padding, overflow-x) but no
   sizing or color, so most of this needs !important to win over those inline
   rules. Turned into a vertical rail here: it sits in the row's remaining
   width, scrolls internally if there are more thumbnails than fit, and its
   height matches the photo instead of leaving that column's space empty. */
#pdpThumbStrip{
  flex:0 0 76px; width:76px; height:100%;
  flex-direction:column !important; overflow-y:auto !important; overflow-x:hidden !important;
  padding:0 !important; gap:8px !important;
}
#pdpThumbStrip button{ border-radius:0 !important; width:100% !important; height:76px !important; }
#pdpThumbStrip button img{ background:var(--pd-ivory); }

.pd-hero-info{ padding:8px 48px 40px; display:flex; flex-direction:column; min-width:0; }
.pd-hero-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:26px; }
.pd-wish-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--pd-line); background:transparent;
  color:var(--pd-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  transition:border-color .2s, color .2s;
}
.pd-wish-btn:hover{ border-color:var(--pd-gold); color:var(--pd-gold); }

.pd-title{
  font-family:var(--pd-serif); font-weight:500; font-size:clamp(30px,3vw,42px); line-height:1.1;
  color:var(--pd-ink); margin:0 0 20px; text-wrap:balance;
}

.pd-price-row{ display:flex; align-items:baseline; gap:14px; margin-bottom:6px; }
.pd-price{ font-family:var(--pd-sans); font-weight:600; font-size:24px; color:var(--pd-ink); }
.pd-price-was{ font-family:var(--pd-sans); font-size:14px; color:var(--pd-ink-faint); text-decoration:line-through; }
.pd-price-tax{ font-size:11px; color:var(--pd-ink-faint); }
.pd-price-note{ font-size:12px; color:var(--pd-ink-faint); margin-bottom:22px; }

.pd-installment{
  display:flex; align-items:center; gap:10px; padding:13px 16px; margin-bottom:22px;
  background:var(--pd-ivory); border:1px solid var(--pd-line); border-radius:0;
}
.pd-installment svg{ color:var(--pd-gold); flex-shrink:0; }
.pd-installment-text{ font-size:12px; color:var(--pd-ink-soft); display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; }
.pd-installment-text a{ color:var(--pd-ink); text-decoration:none; }
.pd-installment-text a:hover{ color:var(--pd-gold); }
.pd-installment-text strong{ color:var(--pd-ink); font-weight:600; }
.pd-installment-foot{ width:100%; font-size:10.5px; color:var(--pd-ink-faint); }

.pd-desc-teaser{
  font-size:14.5px; color:var(--pd-ink-soft); line-height:1.75; margin:0 0 6px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.pd-desc-teaser.expanded{ -webkit-line-clamp:unset; }
.pd-read-more{ font-size:11.5px; font-weight:600; letter-spacing:.04em; color:var(--pd-gold); cursor:pointer; text-decoration:underline; text-underline-offset:3px; margin-bottom:22px; display:inline-block; }

.pd-stock-note{ font-size:12px; margin-bottom:16px; }
.pd-stock-note.low{ color:var(--pd-gold-deep); }
.pd-stock-note.out a{ color:var(--pd-gold); }
.pd-material-badge{
  display:inline-block; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--pd-ink); background:var(--pd-sand); border:1px solid var(--pd-line);
  padding:5px 12px; border-radius:0; margin-bottom:22px;
}

/* No stacked divider per block — one hairline marks the start of the
   "practical info" cluster (glance / size / tech / variants / stock),
   spacing alone separates items inside it. Fewer rulers reads calmer
   than a ladder of identical horizontal rules. */
.pd-glance{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-bottom:8px; }
.pd-glance-item{ display:flex; flex-direction:column; gap:4px; }
.pd-glance-item .k{ font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--pd-ink-faint); }
.pd-glance-item .v{ color:var(--pd-ink); font-family:var(--pd-sans); font-weight:600; font-size:14.5px; }

.pd-size-row{
  display:flex; align-items:center; justify-content:space-between; padding:18px 0 14px; border-top:1px solid var(--pd-line);
  margin-top:8px; cursor:pointer; transition:opacity .2s;
}
.pd-size-row:hover{ opacity:.7; }
.pd-size-row .lbl{ font-size:12.5px; color:var(--pd-ink-soft); }
.pd-size-row .val{ font-size:12.5px; color:var(--pd-gold); display:flex; align-items:center; gap:8px; }

.pd-tech-row{
  display:flex; align-items:center; gap:12px; padding:12px 0;
  font-size:12.5px; color:var(--pd-ink-soft); cursor:pointer; transition:color .2s;
}
.pd-tech-row:hover{ color:var(--pd-gold); }
.pd-tech-row svg{ color:var(--pd-ink-faint); flex-shrink:0; }

.pd-variants{ padding:8px 0 4px; }
.pd-variants-label{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--pd-ink-faint); margin-bottom:12px; }
.pd-variants-list{ display:flex; flex-wrap:wrap; gap:10px; }
.pd-swatch{
  width:28px; height:28px; border-radius:50%; display:inline-block;
  border:2px solid var(--pd-white); box-shadow:0 0 0 1px var(--pd-line);
  cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;
}
.pd-swatch:hover{ transform:scale(1.1); }
.pd-swatch.current{ box-shadow:0 0 0 1px var(--pd-gold); }

.pd-availability{ display:flex; flex-wrap:wrap; gap:8px; padding-top:14px; }
.pd-avail-tag{
  font-size:11px; padding:5px 11px; border-radius:0; border:1px solid var(--pd-line); color:var(--pd-ink-soft);
}
.pd-avail-tag.good{ border-color:rgba(84,128,90,.35); color:#4C7A54; }
.pd-avail-tag.lead{ border-color:rgba(155,122,63,.4); color:var(--pd-gold-deep); }

.pd-cta-wrap{ display:flex; flex-direction:column; gap:10px; padding-top:24px; margin-top:10px; border-top:1px solid var(--pd-line); }
.pd-btn-primary{
  display:block; width:100%; text-align:center; text-decoration:none;
  background:var(--pd-ink); color:var(--pd-white); border:1px solid var(--pd-ink); cursor:pointer;
  font-family:var(--pd-sans); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:17px 20px; transition:background .2s, border-color .2s;
}
.pd-btn-primary:hover{ background:var(--pd-gold-deep); border-color:var(--pd-gold-deep); }
.pd-btn-primary:active{ opacity:.9; }
.pd-btn-primary:disabled{ background:var(--pd-line); border-color:var(--pd-line); color:var(--pd-ink-faint); cursor:not-allowed; }
.pd-btn-secondary{
  display:block; width:100%; text-align:center; text-decoration:none;
  background:transparent; color:var(--pd-ink); border:1px solid var(--pd-line); cursor:pointer;
  font-family:var(--pd-sans); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 20px; transition:border-color .2s, color .2s;
}
.pd-btn-secondary:hover{ border-color:var(--pd-ink); }

.pd-service-links{ display:flex; flex-direction:column; gap:2px; margin-top:24px; }
.pd-svc-link{
  display:flex; align-items:center; gap:11px; padding:12px 0; background:none; border:none;
  font-family:var(--pd-sans); font-size:12.5px; color:var(--pd-ink-soft); cursor:pointer; text-align:left;
  text-decoration:none; transition:color .2s;
}
.pd-svc-link:hover{ color:var(--pd-gold-deep); }
.pd-svc-link svg{ color:var(--pd-ink-faint); flex-shrink:0; }

@media (max-width:980px){
  .pd-hero{ grid-template-columns:1fr; min-height:auto; }
  /* A side rail only works with room to spare — below 980px the thumb
     strip drops back under the photo as a horizontal scroller. */
  .pd-viewer-row{ flex-direction:column; height:auto; margin:0 20px; gap:10px; }
  .pd-viewer-main{ aspect-ratio:1/1; height:auto; margin:0; }
  #pdpThumbStrip{ margin:0 !important; flex-direction:row !important; width:auto !important; height:auto !important; overflow-x:auto !important; overflow-y:visible !important; }
  #pdpThumbStrip button{ width:60px !important; height:60px !important; flex-shrink:0; }
  .pd-hero-crumb{ padding:0 20px 16px; }
  .pd-view-toggle{ margin:0 20px 14px; }
  .pd-hero-info{ padding:28px 20px 36px; min-width:0; }
  .pd-hero-stage{ min-width:0; }
  .pd-title{ font-size:clamp(26px,7vw,34px); }
  .pd-glance{ grid-template-columns:1fr 1fr; gap:12px 14px; }
  .pd-variants-list{ gap:7px; }
  .pd-price-row{ flex-wrap:wrap; }
}

/* ═══ TRIPTYCH ═══════════════════════════════════════════════ */
.pd-triptych{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--pd-line-soft); }
.pd-triptych-cell{ background:var(--pd-ivory); aspect-ratio:3/4; overflow:hidden; position:relative; }
.pd-triptych-cell img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.pd-triptych-cell:hover img{ transform:scale(1.03); }
@media (max-width:760px){ .pd-triptych{ grid-template-columns:1fr; } }

/* ═══ VIDEOS — the one deliberate near-black section ══════════ */
.pd-videos{ background:var(--pd-black); color:var(--pd-white-on-black); padding:96px 40px; }
.pd-videos-head{ text-align:center; max-width:560px; margin:0 auto 56px; }
.pd-videos-head .pd-h2{ color:var(--pd-white-on-black); margin-top:14px; }
.pd-videos-head p{ font-size:14.5px; color:var(--pd-muted-on-black); margin-top:14px; }
.pd-videos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:1240px; margin:0 auto; }
.pd-video-card{ display:flex; flex-direction:column; gap:16px; }
.pd-video-frame{ position:relative; aspect-ratio:4/5; overflow:hidden; background:rgba(244,242,237,.06); }
.pd-video-frame video, .pd-video-frame iframe{ width:100%; height:100%; object-fit:cover; border:none; display:block; }
.pd-video-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(14,13,15,0.22); pointer-events:none;
}
.pd-video-play span{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--pd-white-on-black); display:flex; align-items:center; justify-content:center; color:var(--pd-white-on-black);
}
.pd-video-label{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--pd-gold); }
.pd-video-name{ font-family:var(--pd-serif); font-style:italic; font-weight:400; font-size:19px; color:var(--pd-white-on-black); margin:4px 0 0; }
@media (max-width:900px){ .pd-videos{ padding:64px 20px; } .pd-videos-grid{ grid-template-columns:1fr; gap:36px; } }

/* ═══ DETAILS / DESCRIPTION ══════════════════════════════════ */
.pd-details{ background:var(--pd-white); padding:0; display:grid; grid-template-columns:1fr 1fr; }
.pd-details.pd-no-image{ grid-template-columns:1fr; max-width:760px; margin:0 auto; }
.pd-details-image{ position:relative; overflow:hidden; min-height:520px; background:var(--pd-ivory); }
.pd-details-image img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.pd-details-panel{ padding:96px 56px; max-width:640px; min-width:0; }
.pd-no-image .pd-details-panel{ padding:96px 0; max-width:none; }

.pd-panel{ border-top:1px solid var(--pd-line); }
.pd-panel:last-child{ border-bottom:1px solid var(--pd-line); }
.pd-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 0; cursor:pointer; user-select:none; }
.pd-panel-title{ font-family:var(--pd-sans); font-weight:600; font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:var(--pd-ink); display:flex; align-items:center; gap:10px; }
.pd-panel-title .stars{ font-size:12px; color:var(--pd-gold); font-family:var(--pd-sans); text-transform:none; letter-spacing:0; }
.pd-panel-plus{ font-size:19px; font-weight:300; color:var(--pd-ink-faint); transition:transform .25s; }
.pd-panel.open .pd-panel-plus{ transform:rotate(45deg); color:var(--pd-gold); }
.pd-panel-body{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.22,1,.36,1); }
.pd-panel.open .pd-panel-body{ max-height:1400px; }
.pd-panel-content{ padding-bottom:30px; font-size:14.5px; color:var(--pd-ink-soft); line-height:1.8; }

.pd-spec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; }
.pd-spec-item{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--pd-ink-soft); }
.pd-spec-item svg{ color:var(--pd-ink-faint); flex-shrink:0; margin-top:2px; }
.pd-spec-item strong{ color:var(--pd-ink); font-weight:600; }

.pd-stonemap{ display:flex; flex-direction:column; gap:14px; }
.pd-stonemap img{ max-width:260px; border:1px solid var(--pd-line); }
.pd-fullyset-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:10px; margin-top:12px; }
.pd-fullyset-grid img{ width:100%; aspect-ratio:1; object-fit:cover; cursor:pointer; border:1px solid var(--pd-line); transition:border-color .2s; }
.pd-fullyset-grid img:hover{ border-color:var(--pd-gold); }

.pd-review-item{ padding:18px 0; border-top:1px solid var(--pd-line); }
.pd-review-item:first-child{ border-top:none; padding-top:0; }
.pd-review-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.pd-review-name{ font-size:13px; font-weight:600; color:var(--pd-ink); }
.pd-review-stars{ color:var(--pd-gold); font-size:12px; letter-spacing:1px; }
.pd-review-title{ font-size:13.5px; font-weight:600; color:var(--pd-ink); margin:0 0 4px; }
.pd-review-body{ font-size:13.5px; color:var(--pd-ink-soft); line-height:1.7; margin:0 0 6px; }
.pd-review-date{ font-size:11px; color:var(--pd-ink-faint); }
.pd-no-reviews{ font-style:italic; color:var(--pd-ink-faint); }

@media (max-width:900px){
  .pd-details{ grid-template-columns:1fr; }
  .pd-details-image{ min-height:340px; }
  .pd-details-panel{ padding:56px 20px; min-width:0; }
}

/* ═══ ALSO LIKE ═══════════════════════════════════════════════ */
.pd-also{ background:var(--pd-ivory); padding:96px 40px; }
.pd-also-head{ display:flex; align-items:flex-end; justify-content:space-between; max-width:1240px; margin:0 auto 36px; }
.pd-also-nav{ display:flex; gap:8px; }
.pd-also-nav button{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--pd-line); background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--pd-ink); transition:border-color .2s, background .2s;
}
.pd-also-nav button:hover{ border-color:var(--pd-ink); background:var(--pd-white); }
.pd-also-slider{ display:flex; gap:22px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; max-width:1240px; margin:0 auto; }
.pd-also-slider::-webkit-scrollbar{ display:none; }
.pd-also-card{ flex:0 0 260px; text-decoration:none; color:inherit; transition:transform .25s ease; }
.pd-also-card:hover{ transform:translateY(-3px); }
.pd-also-img{ aspect-ratio:3/4; overflow:hidden; background:var(--pd-sand); margin-bottom:14px; }
.pd-also-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.pd-also-card:hover .pd-also-img img{ transform:scale(1.04); }
.pd-also-name{ font-family:var(--pd-sans); font-weight:500; font-size:14.5px; color:var(--pd-ink); margin-bottom:4px; transition:color .2s; }
.pd-also-card:hover .pd-also-name{ color:var(--pd-gold-deep); }
.pd-also-price{ font-size:12.5px; font-weight:600; color:var(--pd-ink); }
.pd-also-price del{ color:var(--pd-ink-faint); font-weight:400; margin-left:6px; }
@media (max-width:900px){ .pd-also{ padding:56px 20px; } }

/* ═══ EDITORIAL DUO ═══════════════════════════════════════════ */
.pd-editorial{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--pd-line-soft); }
.pd-editorial-cell{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.pd-editorial-cell img{ width:100%; height:100%; object-fit:cover; }
.pd-editorial-nav{ position:absolute; bottom:20px; right:20px; display:flex; gap:6px; }
.pd-editorial-nav button{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.6); background:rgba(14,13,15,.35);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
@media (max-width:760px){ .pd-editorial{ grid-template-columns:1fr; } }

/* ═══ GIFT ════════════════════════════════════════════════════ */
.pd-gift{ background:var(--pd-white); display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.pd-gift-image{ overflow:hidden; background:var(--pd-ivory); }
.pd-gift-image img{ width:100%; height:100%; object-fit:cover; display:block; min-height:420px; }
.pd-gift-content{ display:flex; flex-direction:column; justify-content:center; padding:56px; max-width:520px; min-width:0; }
.pd-gift-content .pd-h2{ margin:14px 0 16px; }
.pd-gift-content p{ font-size:14.5px; color:var(--pd-ink-soft); line-height:1.8; margin-bottom:24px; }
.pd-gift-cta{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--pd-ink); text-decoration:none; width:fit-content; border-bottom:1px solid var(--pd-ink); padding-bottom:2px; }
.pd-gift-cta:hover{ color:var(--pd-gold-deep); border-color:var(--pd-gold-deep); }
@media (max-width:900px){ .pd-gift{ grid-template-columns:1fr; } .pd-gift-content{ padding:40px 20px; min-width:0; } }

/* ═══ SERVICES ════════════════════════════════════════════════ */
.pd-services{ background:var(--pd-sand); color:var(--pd-ink); padding:96px 40px; }
.pd-services-head{ display:flex; align-items:center; justify-content:space-between; max-width:1240px; margin:0 auto 36px; }
.pd-services-head .pd-h2{ color:var(--pd-ink); }
.pd-services-nav{ display:flex; gap:8px; }
.pd-services-nav button{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--pd-line); background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--pd-ink); transition:border-color .2s, background .2s;
}
.pd-services-nav button:hover{ border-color:var(--pd-ink); background:var(--pd-white); }
.pd-svc-slider{ display:flex; gap:24px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; max-width:1240px; margin:0 auto; }
.pd-svc-slider::-webkit-scrollbar{ display:none; }
.pd-svc-item{ flex:0 0 220px; }
.pd-svc-img{ aspect-ratio:1; overflow:hidden; margin-bottom:16px; background:var(--pd-ivory); }
.pd-svc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.pd-svc-item:hover .pd-svc-img img{ transform:scale(1.05); }
.pd-svc-name{ font-family:var(--pd-sans); font-weight:600; font-size:14.5px; color:var(--pd-ink); margin-bottom:8px; }
.pd-svc-desc{ font-size:12.5px; color:var(--pd-ink-soft); line-height:1.7; }
@media (max-width:900px){ .pd-services{ padding:56px 20px; } }

/* ═══ COMMITMENT ══════════════════════════════════════════════ */
.pd-commitment{ position:relative; min-height:58vh; display:flex; align-items:center; overflow:hidden; }
.pd-commitment img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pd-commitment::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,13,15,.78) 0%, rgba(14,13,15,.4) 55%, rgba(14,13,15,.08) 100%); }
.pd-commitment-text{ position:relative; z-index:1; max-width:520px; padding:0 56px; color:var(--pd-white-on-black); }
.pd-commitment-text .pd-h2{ color:var(--pd-white-on-black); margin:14px 0 18px; }
.pd-commitment-text p{ font-size:14.5px; color:var(--pd-muted-on-black); line-height:1.8; margin-bottom:24px; }
.pd-commitment-cta{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--pd-white-on-black); text-decoration:none; border-bottom:1px solid var(--pd-muted-on-black); padding-bottom:2px; }
.pd-commitment-cta:hover{ color:var(--pd-gold); border-color:var(--pd-gold); }
@media (max-width:760px){ .pd-commitment-text{ padding:0 24px; } }

/* ═══ NEWSLETTER — a slim signup strip, not a saturated color block ═══ */
.pd-newsletter{ background:var(--pd-ivory); color:var(--pd-ink); padding:64px 40px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; border-top:1px solid var(--pd-line); }
.pd-newsletter > div{ min-width:0; }
.pd-newsletter-left .pd-h2{ color:var(--pd-ink); }
.pd-newsletter-left p{ font-size:14px; color:var(--pd-ink-soft); margin-top:12px; }
.pd-newsletter-form{ display:flex; gap:0; border-bottom:1px solid var(--pd-ink); max-width:420px; margin-left:auto; }
.pd-newsletter-form input{
  flex:1; background:none; border:none; padding:12px 4px; color:var(--pd-ink); font-family:var(--pd-sans); font-size:14px; outline:none;
}
.pd-newsletter-form input::placeholder{ color:var(--pd-ink-faint); }
.pd-newsletter-form button{ background:none; border:none; color:var(--pd-ink); cursor:pointer; padding:8px; transition:color .2s; }
.pd-newsletter-form button:hover{ color:var(--pd-gold-deep); }
.pd-newsletter-legal{ font-size:11px; color:var(--pd-ink-faint); margin-top:12px; text-align:right; max-width:420px; margin-left:auto; }
.pd-newsletter-legal a{ color:var(--pd-ink-soft); }
@media (max-width:800px){ .pd-newsletter{ grid-template-columns:1fr; padding:48px 20px; } .pd-newsletter-form, .pd-newsletter-legal{ margin-left:0; } }

/* ═══ CUSTOM BLOCKS (admin-authored) ═════════════════════════ */
.pd-custom-block{ background:var(--pd-white); padding:64px 40px; max-width:820px; margin:0 auto; }
.pd-custom-block h2{ font-family:var(--pd-serif); font-size:26px; margin-bottom:14px; color:var(--pd-ink); }
.pd-custom-block .body{ font-size:14px; color:var(--pd-ink-soft); line-height:1.8; }

/* ═══ STICKY BAR — the one confident black element on the page ═══ */
.pd-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:400;
  background:var(--pd-black); color:var(--pd-white-on-black);
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; transform:translateY(100%); transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.pd-sticky.show{ transform:translateY(0); }
.pd-sticky-left{ display:flex; flex-direction:column; }
.pd-sticky-name{ font-size:13.5px; color:var(--pd-white-on-black); }
.pd-sticky-price{ font-size:12px; color:var(--pd-muted-on-black); margin-top:2px; }
.pd-sticky-btn{
  background:var(--pd-white-on-black); color:var(--pd-black); border:none; cursor:pointer; text-decoration:none;
  font-family:var(--pd-sans); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:13px 30px; transition:background .2s; display:inline-block;
}
.pd-sticky-btn:hover{ background:var(--pd-gold); color:var(--pd-black); }

/* ═══ LIGHTBOX (contract: JS toggles #lightbox.active) ════════ */
.pd-lightbox{
  display:none; position:fixed; inset:0; z-index:600; background:rgba(14,13,15,.96);
  align-items:center; justify-content:center;
}
.pd-lightbox.active{ display:flex; animation:pdFade .2s ease; }
.pd-lightbox img{ max-width:88vw; max-height:88vh; object-fit:contain; animation:pdScale .2s ease; }
.pd-lb-close{
  position:absolute; top:24px; right:28px; background:none; border:none; color:var(--pd-white-on-black);
  font-size:22px; cursor:pointer; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
}
.pd-lb-prev, .pd-lb-next{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  border:1px solid var(--pd-line-on-black); background:rgba(255,255,255,.06); color:var(--pd-white-on-black);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s;
}
.pd-lb-prev{ left:24px; } .pd-lb-next{ right:24px; }
.pd-lb-prev:hover, .pd-lb-next:hover{ background:rgba(155,122,63,.3); }
.pd-lb-count{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-size:12px; color:var(--pd-muted-on-black); }
@keyframes pdFade{ from{opacity:0} to{opacity:1} }
@keyframes pdScale{ from{transform:scale(.96); opacity:0} to{transform:scale(1); opacity:1} }

/* ═══ SIZE DRAWER ═════════════════════════════════════════════ */
.pd-size-overlay{ display:none; position:fixed; inset:0; background:rgba(14,13,15,.5); z-index:700; }
.pd-size-overlay.open{ display:block; }
.pd-size-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--pd-white); z-index:701;
  transform:translateX(100%); transition:transform .35s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column;
  box-shadow:-1px 0 0 var(--pd-line);
}
.pd-size-drawer.open{ transform:translateX(0); }
.pd-size-drawer-hdr{ display:flex; align-items:center; justify-content:space-between; padding:24px 26px; border-bottom:1px solid var(--pd-line); }
.pd-size-drawer-hdr .title{ font-family:var(--pd-serif); font-size:20px; color:var(--pd-ink); }
.pd-size-drawer-hdr button{ background:none; border:none; cursor:pointer; color:var(--pd-ink); }
.size-drawer-tabs{ display:flex; gap:0; padding:0 26px; border-bottom:1px solid var(--pd-line); }
.size-drawer-tabs .size-drawer-tab{
  background:none; border:none; padding:16px 4px; margin-right:26px; font-size:12.5px; font-weight:600; letter-spacing:.04em;
  color:var(--pd-ink-faint); cursor:pointer; border-bottom:2px solid transparent;
}
.size-drawer-tabs .size-drawer-tab.active{ color:var(--pd-ink); border-color:var(--pd-gold); }
.size-drawer-panel{ display:none; padding:24px 26px; overflow-y:auto; }
.size-drawer-panel.active{ display:block; }
.pd-size-note{ font-size:12.5px; color:var(--pd-ink-soft); margin-bottom:18px; line-height:1.6; }
.size-list-row{
  display:flex; align-items:center; justify-content:space-between; padding:15px 4px; border-bottom:1px solid var(--pd-line);
  cursor:pointer;
}
.size-list-row.oos{ opacity:.4; cursor:default; }
.size-row-name{ font-size:14px; color:var(--pd-ink); }
.size-row-radio{ width:16px; height:16px; border-radius:50%; border:1.5px solid var(--pd-line); }
.size-list-row.selected .size-row-radio{ border-color:var(--pd-gold); background:radial-gradient(circle,var(--pd-gold) 40%, transparent 44%); }
.size-row-notify{ font-size:11px; color:var(--pd-ink-faint); text-decoration:underline; }
.pd-size-guide-heading{ font-family:var(--pd-serif); font-size:19px; margin-bottom:4px; color:var(--pd-ink); }
.pd-size-guide-sub{ font-size:12.5px; color:var(--pd-ink-soft); margin-bottom:16px; }
.pd-size-tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.pd-size-tbl th{ text-align:left; padding:8px 6px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--pd-ink-faint); border-bottom:1px solid var(--pd-line); }
.pd-size-tbl td{ padding:9px 6px; border-bottom:1px solid var(--pd-line); color:var(--pd-ink); }
.pd-size-tbl td:not(:first-child){ text-align:right; }

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