/* Glossy icing artwork matched to the owner's selected mockup. */
.site-header{
  background:transparent;
  box-shadow:none;
}
.site-header::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:auto;
  left:0;
  height:clamp(190px,26vw,500px);
  background:url('assets/icing-header-photo-v1.webp') center top / 100% auto no-repeat;
  transform:scaleY(.85);
  transform-origin:center top;
  z-index:-1;
  pointer-events:none;
}
@media(max-width:760px){
  .site-header::after{
    height:190px;
    background-size:auto 420px;
    transform:scaleY(.9);
  }
}
@media(min-width:761px){
  .site-header .brand img{
    width:clamp(225px,22vw,338px);
    height:clamp(170px,16vw,246px);
    top:clamp(-70px,-4.35vw,-38px);
    left:-11px;
  }
  .site-header nav{
    justify-content:space-evenly;
    gap:0;
    font-size:clamp(18px,1.85vw,28px);
  }
  .brand-hero{
    min-height:0;
    padding:clamp(18px,1.65vw,25px) 0 3px;
  }
  .hero-copy{transform:translateX(clamp(15px,2.2vw,34px))}
  .sweet-title img{max-height:clamp(185px,15.3vw,235px)}
  .hero-copy .hero-tagline{
    font-size:clamp(28px,2.5vw,38px);
    margin:3px 0 2px;
  }
  .hero-copy .hero-kicker{
    font-size:clamp(15px,1.32vw,20px);
    line-height:1.3;
    margin:0 0 12px;
  }
  .hero-media{
    height:clamp(330px,26.7vw,410px);
    transform:translateY(-10px);
  }
  .collection-section{padding-top:0}
  .shop-controls{margin-bottom:6px}
  .section-top{margin-bottom:10px}
  .section-top h2{line-height:1.15}
  body[data-collection="sweets"] .product-title{min-height:0}
}
@media(min-width:761px) and (max-width:1100px){
  .hero-copy{transform:translateX(10px)}
  .site-header .brand img{width:205px;height:155px;top:-30px}
}
@media(max-width:760px){
  .site-header .brand img{width:160px;height:112px;top:-35px;left:-7px}
}
@media(max-width:360px){
  .site-header .brand img{width:142px;height:100px;top:-30px;left:-8px}
}
@media(min-width:761px){
  body[data-collection="sweets"] .product-image img{aspect-ratio:1.16;object-position:center 53%}
  body[data-collection="sweets"] .section-top h2>span{font-size:44px}
  body[data-collection="sweets"] .section-top{margin-bottom:8px}
  body[data-collection="sweets"] .shop-controls{margin-bottom:4px}
}