.product-detail { padding-top: 1.25rem; }
.detail-navigation { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); }
.detail-back { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.5rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-muted); font-size: 0.8rem; transition: color var(--motion-feedback), background var(--motion-feedback); }
.detail-back:hover { color: var(--color-text); background: var(--color-surface-hover); }
.detail-back:active { color: var(--color-primary); }
.detail-shipping { display: flex; align-items: center; gap: 0.6rem; color: var(--color-muted); font-size: 0.75rem; }
.detail-shipping img { width: 20px; height: 20px; border-radius: 50%; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: clamp(1.25rem, 3vw, 2.5rem); }
.detail-art { position: sticky; top: 1.5rem; aspect-ratio: 1; background: var(--color-garment-floor); }
.detail-art .apparel-art { position: absolute; inset: 0; width: 100%; height: 100%; padding: 1.25rem; }
.detail-art-caption { position: absolute; bottom: 1.1rem; left: 0; right: 0; text-align: center; color: var(--color-garment-ink); font-size: 0.65rem; }
.video-preview, .video-poster, .product-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-poster, .product-video { object-fit: contain; }
.product-video { background: var(--color-art-shadow); }
.video-start { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.75rem; border: 0; background: transparent; color: var(--color-on-primary); font: 600 0.85rem/1.4 var(--font-body); }
.video-play { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary); transition: background var(--motion-feedback), transform var(--motion-feedback); }
.video-play .icon { width: 28px; height: 28px; }
.video-start-label { background: var(--color-primary); padding: 0.35rem 0.7rem; border-radius: var(--radius-control); }
.video-start:hover .video-play { background: var(--color-primary-hover); transform: scale(1.06); }
.video-start:active .video-play { transform: scale(0.96); }
.video-start:focus-visible { outline-offset: -6px; }
.video-error { position: absolute; inset: auto 0 0; padding: 0.8rem; background: var(--color-surface); color: var(--color-text); font-size: 0.75rem; text-align: center; }
.video-error a { text-decoration: underline; text-underline-offset: 3px; }
.video-direct { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.video-direct:hover { transform: translate(-50%, calc(-50% - 2px)); }
.video-direct:active { transform: translate(-50%, calc(-50% + 1px)); }
.detail-summary { min-width: 0; padding: clamp(1.5rem, 3vw, 2.5rem); }
.detail-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.detail-category { color: var(--color-muted); font-size: 0.75rem; }
.detail-heading .availability { padding: 0.3rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: color-mix(in srgb, currentColor 8%, var(--color-surface)); border-color: color-mix(in srgb, currentColor 35%, var(--color-border)); font-size: 0.7rem; }
.detail-summary h1 { font: 650 clamp(2rem, 3.5vw, 3rem)/1.08 var(--font-body); letter-spacing: -0.055em; overflow-wrap: anywhere; }
.detail-price { color: var(--color-primary); margin-top: 1.4rem; font-size: 2rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.detail-price .price-tier { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.55rem; }
.detail-price .price-weight { font-size: 0.9rem; font-weight: 400; letter-spacing: 0; color: var(--color-muted); }
.detail-contact { margin-top: 1.6rem; }
.contact-price { display: none; }
.contact-admin { display: flex; width: 100%; justify-content: center; gap: 0.75rem; min-height: 56px; }
.contact-admin .icon:last-child { margin-left: auto; width: 18px; }
.contact-admin .icon:first-child { margin-right: auto; }
.contact-hint, .detail-note { color: var(--color-muted); font-size: 0.65rem; line-height: 1.65; }
.contact-hint { margin-top: 0.65rem; }
.detail-description { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.detail-description h2 { font: 600 0.85rem/1.5 var(--font-body); letter-spacing: 0; margin-bottom: 0.75rem; }
.detail-description p { font-size: 0.85rem; line-height: 1.8; color: var(--color-muted); max-width: 52ch; }
.detail-specs { margin-block: 1.25rem; }
.detail-specs div { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 1rem; padding-block: 0.8rem; border-bottom: 1px solid var(--color-border); font-size: 0.75rem; }
.detail-specs dt { color: var(--color-muted); }
.detail-specs dd { margin: 0; }
@media (max-width: 900px) and (min-width: 701px) {
  .detail-layout { gap: 1rem; grid-template-columns: 1fr 1fr; }
  .detail-summary { padding: 1.25rem; }
  .detail-summary h1 { font-size: 2rem; }
}
@media (max-width: 700px) {
  .product-detail { padding-top: 0.75rem; }
  .detail-navigation { margin-bottom: 1rem; padding-bottom: 0.75rem; }
  .detail-back { padding-inline: 0.6rem; font-size: 0.7rem; }
  .detail-shipping { font-size: 0.65rem; gap: 0.4rem; }
  .detail-shipping img { width: 18px; height: 18px; }
  .detail-layout { grid-template-columns: 1fr; gap: 1rem; }
  .detail-art { position: relative; top: auto; aspect-ratio: 1.3; }
  .detail-art .apparel-art { padding: 0.75rem; }
  .detail-art-caption { bottom: 0.65rem; font-size: 0.6rem; }
  .detail-summary { padding: 1.25rem; }
  .detail-heading { margin-bottom: 0.9rem; }
  .detail-summary h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .detail-price { font-size: 1.75rem; margin-top: 0.9rem; }
  .detail-price .price-weight { font-size: 0.85rem; }
  .detail-description { margin-top: 1.25rem; padding-top: 1.25rem; }
  .detail-contact { position: fixed; z-index: var(--z-floating); inset: auto 0 0; display: flex; align-items: center; gap: 1rem; padding: 0.85rem max(1.25rem, env(safe-area-inset-right)) calc(0.85rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); background: var(--color-surface); border-top: 1px solid var(--color-border); margin: 0; }
  .contact-price { color: var(--color-primary); display: block; flex-shrink: 0; font-size: 1.1rem; font-weight: 650; font-variant-numeric: tabular-nums; }
  .contact-price .price-weight { display: block; font-size: 0.65rem; font-weight: 400; color: var(--color-muted); }
  .contact-admin { flex: 1; min-width: 0; min-height: 48px; gap: 0.6rem; padding-inline: 1rem; font-size: 0.8rem; }
  .contact-admin .icon:last-child { display: none; }
  .contact-admin .icon:first-child { margin: 0; width: 18px; }
  .contact-hint { margin-top: 0.75rem; }
  .is-product-page .back-top { bottom: calc(6.75rem + env(safe-area-inset-bottom)); }
  .is-product-page main { padding-bottom: calc(8rem + env(safe-area-inset-bottom)); }
}