/* ================================================================
   Specimen detail page — extends css/styles.css and css/products.css
   No animation on this page: no transitions, no hover transforms,
   no scroll-reveal, no preloader, no magnetic buttons.
   ================================================================ */

/* ---------- Banner (built from the specimen's own image, or a
   per-category banner + texture when there's no photo yet) ---------- */
.detail-banner{
  position: relative;
  min-height: 46vh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--charcoal);
}
.detail-banner-media{
  position: absolute; inset: 0;
  background-size: cover; background-position: center 55%;
}
/* Subtle quarried-stone texture laid over a category-colour banner so
   it reads as a real banner rather than a flat swatch block. Only
   applied when there's no product photo (see .is-texture, set in
   product-detail.js). Static — no animation. */
.detail-banner-media.is-texture::before{
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.6px),
    radial-gradient(rgba(0,0,0,.18) 1px, transparent 1.8px);
  background-size: 9px 9px, 15px 15px;
  background-position: 0 0, 4px 6px;
  mix-blend-mode: overlay;
  opacity: .5;
}
.detail-banner-scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,17,14,.35) 0%, rgba(20,17,14,.25) 35%, rgba(20,17,14,.92) 100%);
}
.detail-banner-inner{ position: relative; z-index: 1; padding: 10rem 0 3rem; color: #fff; }
.detail-crumb{ display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: rgba(255,255,255,.65); margin-bottom: 1.4rem; }
.detail-crumb a{ color: rgba(255,255,255,.85); }
.detail-code{ display: block; font-size: .82rem; letter-spacing: .04em; color: #E4A583; margin-bottom: .6rem; }
.detail-title{ font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 600; line-height: 1.1; max-width: 22ch; color: #fff; margin: 0; }

/* ---------- Body ---------- */
.detail-section{ padding-top: 4rem; }
.detail-figure{ position: relative; aspect-ratio: 4/3.3; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px var(--slate-line); }
.detail-figure img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-desc{ font-size: 1.05rem; color: var(--slate); line-height: 1.6; max-width: 46ch; margin-bottom: 1.8rem; }
.detail-spec-table{ margin-bottom: 2rem; }
.detail-actions{ display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; }

/* ---------- Related specimens ---------- */
.related-section{ background: var(--stone-white); border-top: 1px solid var(--slate-line); padding: 4.5rem 0 5.5rem; }
.related-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 1.6rem; }
.related-card{
  display: block; border-radius: 2px; overflow: hidden;
  background: var(--stone-white); box-shadow: 0 0 0 1px var(--slate-line);
}
.related-media{ aspect-ratio: 4/3; overflow: hidden; }
.related-media img, .related-media .spec-swatch{ width: 100%; height: 100%; object-fit: cover; display: block; }
.related-body{ padding: 1rem 1.1rem 1.2rem; }
.related-code{ font-size: .72rem; color: var(--terracotta-deep); }
.related-body h4{ font-size: 1.02rem; font-weight: 600; margin: .3rem 0 .6rem; }
.related-link{ display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 500; color: var(--charcoal); }
.related-link .spec-link-eye{ width: 13px; height: 13px; fill: var(--charcoal); flex: none; }
.related-link svg:last-child{ width: 11px; height: 11px; fill: var(--charcoal); margin-left: auto; }

@media (max-width: 767px){
  .related-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .related-grid{ grid-template-columns: 1fr; }
  .detail-actions{ width: 100%; }
}