/* Product gallery: a stable, viewport-aware frame with navigation in reach. */
.detail-main { padding-top: 26px; }
.detail-breadcrumb { margin-bottom: 24px; font-size: 12px; font-weight: 400; letter-spacing: 0; }
.detail-breadcrumb a { min-height: 36px; display: inline-flex; align-items: center; border: 0; }
.detail-breadcrumb > span { color: #656c65; font-size: 11px; }
.detail-hero { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: clamp(32px, 5vw, 76px); padding-bottom: 64px; }
.detail-gallery { position: sticky; top: 108px; }
.detail-open { height: clamp(250px, calc(100svh - 310px), 540px); min-height: 0; max-height: none; aspect-ratio: auto; padding: 0; border: 1px solid #e4e1d9; border-radius: 8px; background: #f2f0eb; }
.detail-main-photo { width: 100%; height: 100%; max-height: 100%; object-fit: contain; object-position: center; border-radius: 0; }
.detail-photo-frame { overflow: hidden; border-radius: 8px; }
.detail-photo-frame .detail-arrow { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 1px solid #d9ddd8; background: #fff; color: #17231c; box-shadow: 0 2px 8px #17231c12; }
.detail-photo-frame .detail-prev { left: 12px; }
.detail-photo-frame .detail-next { right: 12px; }
.detail-photo-frame .detail-arrow:hover { background: #17231c; color: #fff; border-color: #17231c; }
.detail-photo-frame .detail-arrow:focus-visible { outline: 2px solid #17231c; outline-offset: 3px; }
.detail-zoom-hint { position: absolute; top: 12px; right: 12px; padding: 7px 10px; border-radius: 5px; background: #ffffffed; color: #344139; font-size: 10px; letter-spacing: .03em; pointer-events: none; }
.detail-caption { min-height: 34px; margin-top: 5px; color: #515b53; font-size: 11px; line-height: 1.5; }
.detail-count { font-size: 10px; letter-spacing: .05em; font-weight: 400; text-align: right; }
.detail-thumbnails { margin-top: 6px; gap: 8px; padding: 3px 3px 8px; }
.detail-thumb { flex-basis: 64px; width: 64px; height: 64px; padding: 2px; border: 1px solid #dedfd9; border-radius: 6px; background: #f2f0eb; opacity: .72; transition: opacity .2s, border-color .2s; }
.detail-thumb:hover, .detail-thumb[aria-pressed="true"] { opacity: 1; }
.detail-thumb[aria-pressed="true"] { border: 2px solid #17231c; padding: 1px; }
.detail-thumb img { object-fit: contain; border-radius: 3px; }
.detail-copy { position: static; padding-top: 4px; }
.detail-eyebrow { color: #59665b; font-size: 10px; letter-spacing: .15em; font-weight: 400; line-height: 1.6; }
.detail-copy h1 { max-width: 14ch; margin-top: 13px; font-size: clamp(28px, 3vw, 44px); line-height: 1.13; letter-spacing: -.045em; font-weight: 400; }
.detail-lead { max-width: 43ch; margin-top: 18px; font-size: 13px; line-height: 1.8; color: #596159; }
.detail-purchase { margin-top: 24px; padding-block: 22px; border-color: #dfe2dc; }
.detail-panel-label { margin-bottom: 10px; font-size: 11px; letter-spacing: .08em; }
.price-options { margin-bottom: 18px; }
.price-option { align-items: baseline; gap: 16px; padding: 12px 0; border-color: #e7e8e2; font-size: 13px; line-height: 1.6; }
.price-option dd { flex-shrink: 0; font-weight: 400; }
.price-option:last-child { border-bottom: 0; }
.price-note { margin-bottom: 18px; font-size: 12px; color: #596159; }
.detail-purchase .solid-link { min-height: 50px; width: 100%; font-size: 12px; }
.detail-facts { margin-top: 16px; }
.detail-facts > div { grid-template-columns: 75px 1fr; gap: 16px; padding-block: 8px; font-size: 12px; line-height: 1.7; }
.detail-facts dt { font-weight: 400; color: #687168; }
.detail-story { padding-block: 52px; background: #f6f5f1; }
.detail-story-grid { grid-template-columns: .4fr .6fr; gap: 36px; }
.detail-story h2 { max-width: none; font-size: clamp(25px, 2.8vw, 36px); line-height: 1.2; }
.detail-story-grid > div > p { margin-top: 18px; font-size: 13px; line-height: 1.9; color: #596159; }
.related-section { padding-block: 56px 64px; }
.related-heading { margin-bottom: 26px; }
.related-heading h2 { margin-top: 9px; font-size: 28px; }
.related-grid { gap: 24px; }
.related-card img { height: clamp(180px, 25vw, 340px); width: 100%; aspect-ratio: auto; object-fit: contain; object-position: center; padding: 0; border: 1px solid #e5e2da; background: #f2f0eb; border-radius: 8px; }
.related-card span { margin-top: 12px; font-size: 13px; line-height: 1.6; }
.detail-lightbox-caption { font-size: 12px; line-height: 1.5; }
.detail-lightbox-arrow { min-width: 44px; min-height: 44px; }
@media (max-width: 900px) {
  .detail-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .detail-gallery { position: static; }
  .detail-open { height: clamp(250px, 49svh, 470px); }
  .detail-copy h1 { max-width: none; }
  .detail-copy { max-width: 660px; }
}
@media (max-width: 600px) {
  .detail-main { padding-top: 14px; }
  .detail-breadcrumb { margin-bottom: 12px; }
  .detail-open { height: clamp(230px, 43svh, 380px); }
  .detail-photo-frame .detail-prev { left: 8px; }
  .detail-photo-frame .detail-next { right: 8px; }
  .detail-zoom-hint { top: 8px; right: 8px; }
  .detail-thumb { flex-basis: 54px; width: 54px; height: 54px; }
  .detail-hero { gap: 24px; padding-bottom: 38px; }
  .detail-copy h1 { font-size: 30px; }
  .detail-story { padding-block: 36px; }
  .detail-story h2 { margin-top: 14px; }
  .related-section { padding-block: 38px; }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .related-card img { height: 200px; }
  .related-card span { font-size: 12px; }
  .detail-lightbox-caption { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 360px) {
  .related-card img { height: 170px; }
}