/* Template product heroes: complete art-directed images with live HTML copy. */
.product-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--hero-background, #f5f9ff);
  color: var(--ink);
}
.product-hero__media { margin: 0; }
.product-hero__media picture { display: block; }
.product-hero .product-hero__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 800;
  object-fit: contain;
  border-radius: 0;
}
.product-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.product-hero__content > .container { display: flex; }
.product-hero__copy { width: 48%; max-width: 570px; }
.product-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.6px;
  margin: 0 0 15px;
}
.product-hero__eyebrow > span { width: 22px; height: 1px; background: currentColor; flex-shrink: 0; }
.product-hero h1 {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(34px, 3.06vw, 48px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -1.1px;
  text-wrap: balance;
  margin: 0 0 20px;
}
.product-hero__description {
  color: var(--ink-muted);
  font-size: clamp(14px, 1.12vw, 17px);
  line-height: 1.65;
  margin: 0 0 24px;
}
.product-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.product-hero__details {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  margin-top: 21px;
  padding-top: 15px;
  border-top: 1px solid var(--brand-line);
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.5;
}
.product-hero__details > span { display: flex; align-items: center; gap: 6px; }
.product-hero__details > span::before { content: '✓'; color: var(--brand); }
.product-hero__caption {
  position: absolute;
  inset: auto 4% 12px;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  color: var(--ink-muted);
  font-size: 9px;
  line-height: 1.5;
}
.product-hero__caption > span:first-child { letter-spacing: 1px; font-weight: 600; }
.product-hero--collections .product-hero__content > .container { justify-content: center; }
.product-hero--collections .product-hero__copy {
  width: 100%;
  max-width: min(40vw, 620px);
  text-align: center;
}
.product-hero--collections .product-hero__eyebrow,
.product-hero--collections .product-hero__actions,
.product-hero--collections .product-hero__details { justify-content: center; }
.product-hero--collections h1 { font-size: clamp(32px, 2.8vw, 44px); }

@media (min-width: 768px) and (max-width: 1049.98px) {
  .product-hero .product-hero__image { aspect-ratio: 1680 / 1094; }
  .product-hero__copy { width: 49%; }
  .product-hero h1 { font-size: clamp(30px, 3.8vw, 38px); margin-bottom: 16px; }
  .product-hero__eyebrow { font-size: 9px; letter-spacing: 1px; margin-bottom: 12px; }
  .product-hero__description { font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
  .product-hero__details { font-size: 10px; column-gap: 12px; margin-top: 16px; padding-top: 12px; }
  .product-hero--collections .product-hero__copy { max-width: 40vw; }
  .product-hero--collections h1 { font-size: 30px; }
}

@media (max-width: 767.98px) {
  .product-hero { padding-top: max(48px, calc(466px - 103.7vw)); padding-bottom: 32px; }
  .product-hero .product-hero__image { aspect-ratio: 1080 / 2000; }
  .product-hero__content { align-items: flex-start; padding-top: 30px; }
  .product-hero__content > .container { justify-content: center; width: calc(100% - 24px); padding-inline: 8px; }
  .product-hero__copy { width: 100%; max-width: 600px; text-align: center; }
  .product-hero__eyebrow { font-size: 9px; letter-spacing: 1.1px; justify-content: center; margin-bottom: 12px; }
  .product-hero h1 { font-size: 38px; letter-spacing: -1px; line-height: 1.1; margin-bottom: 16px; }
  .product-hero__description { font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
  .product-hero__actions { justify-content: center; }
  .product-hero__details { justify-content: center; gap: 6px 12px; margin-top: 15px; padding-top: 12px; font-size: 11px; }
  .product-hero__caption { justify-content: center; bottom: 12px; }
  .product-hero--collections { padding: 0; }
  .product-hero--collections .product-hero__content { align-items: center; padding-top: 0; }
  .product-hero--collections .product-hero__copy { max-width: 70vw; }
  .product-hero--collections h1 { font-size: 34px; }
  .product-hero--collections .product-hero__description { font-size: 15px; }
  .product-hero--collections .product-hero__details { column-gap: 12px; }
  .product-hero--collections .product-hero__caption { justify-content: flex-end; }
}

/* Keep full-size template buttons clear of the real products on narrow phones. */
@media (max-width: 389px) {
  .product-hero:not(.product-hero--collections) .product-hero__content > .container { width: 100%; padding-inline: 8px; }
}
@media (max-width: 359px) {
  .product-hero:not(.product-hero--collections) { padding-top: max(48px, calc(510px - 103.7vw)); }
  .product-hero--collections .product-hero__content > .container { width: 100%; padding-inline: 8px; }
  .product-hero--collections .product-hero__copy { max-width: 100%; }
  .product-hero--collections .product-hero__eyebrow { margin-bottom: 8px; }
  .product-hero--collections h1 { margin-bottom: 10px; }
  .product-hero--collections .product-hero__description { margin-bottom: 12px; }
  .product-hero--collections .product-hero__details { margin-top: 10px; padding-top: 8px; }
}