/* Only loaded by the six product detail pages. */
.detail-hero:has(> .product-sheet) {
  height:660px;
  min-height:660px;
}
.detail-hero > .detail-image.product-sheet {
  padding:clamp(16px,1.5vw,24px);
  min-height:0;
  min-width:0;
  display:grid;
  place-items:center;
}
.detail-hero > .detail-image.product-sheet img {
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:600px;
  object-fit:contain;
  object-position:center;
}
@media(max-width:1000px){
  .detail-hero:has(> .product-sheet) {height:auto;min-height:0}
  .detail-hero:has(> .product-sheet) .detail-copy {min-height:470px}
  .detail-hero > .detail-image.product-sheet {height:460px;padding:22px}
  .detail-hero > .detail-image.product-sheet img {max-height:416px}
}
@media(max-width:720px){
  .detail-hero:has(> .product-sheet) .detail-copy {min-height:560px}
  .detail-hero > .detail-image.product-sheet {height:300px;padding:16px}
  .detail-hero > .detail-image.product-sheet img {max-height:268px}
}

/* Size headings against their text column, not the whole viewport. */
.detail-hero:has(> .product-sheet) .detail-copy {container-type:inline-size;gap:0}
.detail-hero:has(> .product-sheet) .detail-copy h1 {font-size:clamp(26px,10cqi,52px);line-height:1.08;text-wrap:balance;overflow-wrap:normal;hyphens:none;margin:0 0 24px}
.detail-hero:has(> .product-sheet) .detail-copy .eyebrow {margin:0 0 20px}
.detail-hero:has(> .product-sheet) .detail-copy .breadcrumbs {margin:0 0 24px}
.detail-hero:has(> .product-sheet) .detail-copy > p:not(.eyebrow):not(.breadcrumbs) {margin:0;line-height:1.65}
.detail-hero:has(> .product-sheet) .detail-copy .actions {margin-top:26px}
@media(max-width:1000px){
  .detail-hero:has(> .product-sheet) .detail-copy {min-height:470px}
  .detail-hero:has(> .product-sheet) .detail-copy h1 {font-size:clamp(30px,7.4cqi,48px)}
}
@media(max-width:720px){
  .detail-hero:has(> .product-sheet) .detail-copy {min-height:500px;padding:34px 24px}
  .detail-hero:has(> .product-sheet) .detail-copy h1 {font-size:clamp(26px,10.5cqi,36px);margin-bottom:20px}
  .detail-hero:has(> .product-sheet) .detail-copy .breadcrumbs {margin-bottom:20px}
  .detail-hero:has(> .product-sheet) .detail-copy .eyebrow {margin-bottom:16px}
  .detail-hero:has(> .product-sheet) .detail-copy .actions {margin-top:24px}
}