/* ═══════════════════════════════════════════════════════════════════════
   product-detail.css · single-template detail page
   Used by /product.html?id=<SKU> for V1 / V2 / V3 products.
   ═══════════════════════════════════════════════════════════════════════ */

.product-detail{
  max-width:var(--max);
  margin:0 auto;
  padding-inline:var(--pad);
  padding-block:clamp(6rem,12vh,10rem) clamp(4rem,8vh,7rem);
}

.pd-loading,
.pd-not-found{
  text-align:center;
  padding-block:4rem;
}

.pd-page{display:contents}


/* ─── BREADCRUMB ─── */
.pd-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin-bottom:1.5rem;
  font-family:var(--sans);
  font-size:.55rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.pd-breadcrumb a{
  color:var(--mute);
  text-decoration:none;
  transition:color .2s ease;
}
.pd-breadcrumb a:hover{
  color:var(--ink);
}
.pd-breadcrumb-sep{
  color:var(--rule);
  font-size:.7rem;
}
.pd-breadcrumb-current{
  color:var(--ink);
}

@media (max-width: 560px){
  .pd-breadcrumb{
    font-size:.5rem;
    gap:.35rem;
  }
}


/* ─── HEADER ─── */
.pd-head{
  position:relative;
  margin-bottom:clamp(2rem,4vh,3rem);
}
.pd-head .back-link{
  display:block;
  margin-bottom:1rem;
}
.pd-head .eyebrow{
  display:block;
  margin-top:0;
}

@media (min-width: 768px){
  .pd-head{
    text-align:center;
    padding-top:0;
  }
  .pd-head .back-link{
    position:absolute;
    left:0;
    top:0;
    margin-bottom:0;
  }
  .pd-head .pd-title,
  .pd-head .pd-tagline{
    margin-left:auto;
    margin-right:auto;
  }
}
.pd-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3rem,8vw,7rem);
  line-height:1;
  margin-top:1.25rem;
}
.pd-tagline{
  font-family:var(--body);
  font-style:italic;
  color:var(--mute);
  font-size:clamp(1rem,1.4vw,1.2rem);
  line-height:1.5;
  max-width:48ch;
  margin-top:1.25rem;
}


/* ─── INTRO · description text above the showcase ─── */
.pd-intro{
  margin-bottom:clamp(2rem,4vh,3rem);
  max-width:760px;
}
.pd-intro .pd-body-text p{
  font-family:var(--body);
  color:var(--ink-soft);
  font-size:1.02rem;
  line-height:1.75;
  margin-bottom:1.25rem;
  max-width:60ch;
}
.pd-intro .pd-body-text p:first-child{
  font-style:italic;
  color:var(--ink);
  font-size:1.1rem;
}


/* ─── SHOWCASE · image + specs side-by-side ─── */
.pd-showcase{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:clamp(2rem,4vw,4rem);
  align-items:start;
  margin-bottom:clamp(3rem,6vh,5rem);
}
.pd-showcase .pd-hero{
  margin:0;
}


/* ─── HERO IMAGE ─── */
.pd-hero{
  margin-block:clamp(2rem,4vh,3rem) clamp(2rem,5vh,4rem);
}
.pd-hero-frame{
  position:relative;
  border:1px solid var(--rule-stronger);
  background:var(--ink);
  overflow:hidden;
  aspect-ratio: 4 / 3;
  max-width:1100px;
  margin:0 auto;
}
.pd-hero-frame::before,
.pd-hero-frame::after{
  content:"";
  position:absolute;
  width:10px;height:10px;
  background:var(--accent);
  z-index:2;
}
.pd-hero-frame::before{top:-5px;left:-5px}
.pd-hero-frame::after{bottom:-5px;right:-5px}
.pd-hero-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.pd-hero-frame--illust{
  background:var(--bg-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(2rem,5vw,5rem);
}
.pd-hero-frame--illust svg{
  width:60%;
  max-width:280px;
  height:auto;
  color:var(--ink);
}


/* ─── BODY · description (left) + side panel (right) ─── */
.pd-body{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
  margin-bottom:clamp(3rem,6vh,5rem);
}
.pd-body--single{
  display:block;
  max-width:600px;
  margin:0 auto;
  text-align:center;
}
.pd-body-text p{
  font-family:var(--body);
  color:var(--ink-soft);
  font-size:1.02rem;
  line-height:1.75;
  margin-bottom:1.25rem;
  max-width:60ch;
}
.pd-body-text p:first-child{
  font-style:italic;
  color:var(--ink);
  font-size:1.1rem;
}


/* ─── SIDE PANEL · specs + CTA ─── */
.pd-body-side{
  position:sticky;
  top:6rem;
  background:var(--bg-tint);
  padding:clamp(1.5rem,3vw,2rem);
  border:1px solid var(--rule);
}
.pd-specs{
  display:grid;
  gap:.85rem;
  margin-bottom:1.5rem;
}
.pd-specs > div{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:1rem;
  align-items:baseline;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--rule);
}
.pd-specs > div:last-of-type{border-bottom:0}
.pd-specs dt{
  font-size:.55rem;
  letter-spacing:.28em;
}
.pd-specs dd{
  font-family:var(--serif);
  font-size:.92rem;
  color:var(--ink);
  line-height:1.3;
}
.pd-cta{
  width:100%;
  justify-content:center;
  margin-top:.5rem;
}
.pd-note{
  margin-top:1rem;
  font-size:.55rem;
  letter-spacing:.28em;
  color:var(--mute);
  text-align:center;
}


/* ─── SHORT DESCRIPTION ─── */
.pd-short-desc{
  font-family:var(--body);
  font-size:.95rem;
  line-height:1.6;
  color:var(--ink-soft);
  margin-bottom:1.25rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--rule);
}


/* ─── TRUST SIGNALS ─── */
.pd-trust-signals{
  margin-top:1.25rem;
  padding-top:1.25rem;
  border-top:1px solid var(--rule);
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.pd-lead-time,
.pd-delivery{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.15em;
  color:var(--mute);
}
.pd-lead-time svg,
.pd-delivery svg{
  width:16px;
  height:16px;
  flex-shrink:0;
  color:var(--accent);
}
.pd-rating-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.15em;
  color:var(--ink-soft);
  text-decoration:none;
  transition:color .2s ease;
}
.pd-rating-badge:hover{
  color:var(--ink);
}
.pd-rating-badge svg{
  width:14px;
  height:14px;
  color:var(--accent);
}


/* ═══════════════════════════════════════════════════════════════════════
   REVIEWS SECTION · Quiet, archival presentation
   ═══════════════════════════════════════════════════════════════════════ */

.pd-reviews{
  border-top:1px solid var(--rule);
  padding-top:clamp(3rem,6vh,5rem);
  margin-bottom:clamp(3rem,6vh,5rem);
}
.pd-reviews-head{
  display:flex;
  align-items:baseline;
  gap:1.5rem;
  margin-bottom:2rem;
}
.pd-reviews-count{
  font-family:var(--body);
  font-size:.85rem;
  color:var(--mute);
}
.pd-reviews-avg{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.2em;
  color:var(--mute);
}
.pd-reviews-avg svg{
  width:14px;
  height:14px;
  color:var(--accent);
}

.pd-reviews-list{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.pd-review{
  padding:1.25rem 1.5rem;
  background:var(--bg-tint);
  border:1px solid var(--rule);
}
.pd-review-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.75rem;
}
.pd-review-author{
  display:flex;
  align-items:baseline;
  gap:.75rem;
}
.pd-review-name{
  font-family:var(--serif);
  font-size:1rem;
  color:var(--ink);
}
.pd-review-location{
  font-family:var(--body);
  font-size:.8rem;
  color:var(--mute);
}
.pd-review-date{
  font-family:var(--sans);
  font-size:.5rem;
  letter-spacing:.28em;
  color:var(--mute);
}
.pd-review-rating{
  display:flex;
  gap:2px;
  margin-bottom:.5rem;
}
.pd-review-rating svg{
  width:12px;
  height:12px;
  color:var(--rule-stronger);
}
.pd-review-rating svg.filled{
  color:var(--accent);
}
.pd-review-text{
  font-family:var(--body);
  font-size:.95rem;
  line-height:1.65;
  color:var(--ink-soft);
}
.pd-review-verified{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-top:.75rem;
  font-family:var(--sans);
  font-size:.5rem;
  letter-spacing:.2em;
  color:var(--mute);
}
.pd-review-verified svg{
  width:10px;
  height:10px;
  color:var(--accent);
}

.pd-no-reviews{
  padding:2rem;
  text-align:center;
  background:var(--bg-tint);
  border:1px dashed var(--rule);
}
.pd-no-reviews p{
  font-family:var(--body);
  font-style:italic;
  color:var(--mute);
  font-size:.9rem;
}
.pd-no-reviews .pd-review-cta{
  margin-top:1.25rem;
}

.pd-reviews-footer{
  margin-top:1.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
  text-align:center;
}
.pd-review-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
  transition:color .2s ease;
}
.pd-review-link:hover{
  color:var(--ink);
}
.pd-review-link svg{
  width:14px;
  height:14px;
  color:var(--accent);
}

@media (max-width: 560px){
  .pd-review{
    padding:1rem 1.25rem;
  }
  .pd-review-header{
    flex-direction:column;
    gap:.25rem;
  }
}


/* ─── RELATED STRIP ─── */
.pd-related{
  border-top:1px solid var(--rule);
  padding-top:clamp(3rem,6vh,5rem);
}
.pd-related-head{margin-bottom:2rem}
.pd-related-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1rem;
}
.pd-related-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--rule);
  background:var(--bg);
  transition:background .35s ease, border-color .35s ease, transform .35s ease;
}
.pd-related-card:hover{
  background:var(--bg-tint);
  border-color:var(--rule-stronger);
  transform:translateY(-2px);
}
.pd-related-img{
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:var(--ink);
}
.pd-related-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s var(--ease-archival);
}
.pd-related-card:hover .pd-related-img img{transform:scale(1.04)}
.pd-related-meta{
  padding:.85rem 1rem 1rem;
}
.pd-related-meta .caption{
  font-size:.5rem;
  letter-spacing:.32em;
  color:var(--accent);
}
.pd-related-meta h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:1rem;
  margin-top:.4rem;
  line-height:1.1;
}
.pd-related-meta p{
  font-family:var(--body);
  font-size:.78rem;
  color:var(--mute);
  margin-top:.25rem;
  line-height:1.4;
}
.pd-related-card--text .pd-related-meta{padding:1.5rem}


/* ─── BACK LINK · top-left ─── */
.back-link{
  display:inline-block;
  font-size:.6rem;
  letter-spacing:.32em;
  color:var(--mute);
  text-decoration:none;
  transition:color .3s ease, padding-left .3s ease;
}
.back-link:hover{
  color:var(--ink);
  padding-left:.5rem;
}


/* ═══════════════════════════════════════════════════════════════════════
   V1 3D PRINTED PRODUCTS · Material & Variant Selectors
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Coming Soon Badge ─── */
.pd-coming-soon{
  background:var(--bg);
  border:1px dashed var(--rule-stronger);
  padding:1rem 1.25rem;
  margin-bottom:1.5rem;
  text-align:center;
}
.pd-coming-soon .eyebrow{
  color:var(--accent-dk);
}

/* ─── Unit label (e.g., "30 pieces") ─── */
.pd-unit{
  margin-top:.75rem;
  font-size:.6rem;
  letter-spacing:.28em;
  color:var(--mute);
}

/* ─── Selector Container ─── */
.pd-selector{
  margin-bottom:1.25rem;
}
.pd-selector > label{
  display:block;
  margin-bottom:.6rem;
  font-size:.55rem;
  letter-spacing:.28em;
}
.pd-selector-options{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.pd-selector-options--inline{
  flex-direction:row;
  flex-wrap:wrap;
  gap:.4rem;
}

/* ─── Selector Buttons ─── */
.pd-selector-btn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:.75rem 1rem;
  background:var(--bg);
  border:1px solid var(--rule);
  cursor:pointer;
  transition:all .25s ease;
  text-align:left;
}
.pd-selector-btn:hover{
  border-color:var(--rule-stronger);
  background:var(--bg-tint);
}
.pd-selector-btn.active{
  border-color:var(--accent);
  background:var(--bg);
}
.pd-selector-name{
  font-family:var(--serif);
  font-size:.95rem;
  color:var(--ink);
}
.pd-selector-desc{
  font-family:var(--body);
  font-size:.7rem;
  color:var(--mute);
  margin-top:.2rem;
}

/* ─── Chip-style buttons (for materials) ─── */
.pd-selector-btn--chip{
  flex-direction:row;
  padding:.5rem .9rem;
  font-family:var(--sans);
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.pd-selector-btn--chip.active{
  background:var(--ink);
  color:var(--reverse);
  border-color:var(--ink);
}

/* ─── Price Display ─── */
.pd-price-display{
  margin:1.5rem 0 1rem;
  padding-top:1rem;
  border-top:1px solid var(--rule);
}
.pd-price{
  font-family:var(--serif);
  font-size:clamp(1.8rem,4vw,2.4rem);
  color:var(--ink);
  line-height:1;
}
.pd-price--enquiry{
  font-size:1.1rem;
  font-style:italic;
  color:var(--mute);
}
.pd-price-range{
  display:block;
  margin-top:.4rem;
  font-size:.55rem;
  letter-spacing:.2em;
  color:var(--mute);
}

/* ─── Placeholder for missing images ─── */
.pd-hero-frame--placeholder{
  background:var(--bg-tint);
  display:flex;
  align-items:center;
  justify-content:center;
}
.pd-hero-frame--placeholder::after{
  content:"Image coming soon";
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--mute);
}
.pd-hero-frame--placeholder img{
  display:none;
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE STICKY CTA · Fixed bottom bar on mobile, hidden on desktop
   ═══════════════════════════════════════════════════════════════════════ */

.pd-mobile-cta{
  display:none;
}

@media (max-width: 1000px){
  .pd-mobile-cta{
    display:block;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:100;
    background:var(--bg);
    border-top:1px solid var(--rule);
    padding:1rem var(--pad);
    padding-bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .pd-mobile-cta .cta{
    width:100%;
    justify-content:center;
  }

  /* Add bottom padding to main content so it doesn't hide behind sticky bar */
  .product-detail{
    padding-bottom:calc(5rem + env(safe-area-inset-bottom, 0px));
  }
}


/* ─── RESPONSIVE ─── */
@media (max-width: 1000px){
  .pd-body{grid-template-columns:1fr}
  .pd-body-side{position:static;margin-top:2rem}
  .pd-showcase{grid-template-columns:1fr}
  .pd-showcase .pd-body-side{margin-top:2rem}
  .pd-related-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 560px){
  .pd-related-grid{grid-template-columns:1fr}
  .pd-selector-options--inline{flex-direction:column}
}