/* Tuck the decoration behind the header and soften its open ends. */
.top{position:relative;z-index:1}
.holidayGarland{position:relative;z-index:0;width:100%;--garland-y:.92;aspect-ratio:2172 / 301.76;margin:-30px auto 0;pointer-events:none;user-select:none}
.holidayGarland img{position:absolute;top:0;left:50%;width:100%;height:auto;max-width:none;display:block;transform-origin:top center;transform:translateX(-50%) scaleY(var(--garland-y)) translateY(-26.5%);-webkit-mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent);mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent)}
@media(max-width:800px){.holidayGarland{--garland-y:.94;aspect-ratio:2172 / 308.32;margin-top:-22px}}
@media(max-width:480px){.holidayGarland{--garland-y:.96;aspect-ratio:2172 / 314.88;margin-top:-14px}}
/* Let the longer seasonal copy determine its own height without clipping. */
.collectionHero{display:grid;grid-template-columns:45% 55%;align-items:center;margin-top:14px}
.collectionHero[hidden]{display:none}
.collectionCopy{position:relative;inset:auto;width:100%;height:100%;padding:clamp(18px,2.6cqw,36px);gap:clamp(12px,1.6cqw,22px)}
.collectionCopy h2{font-size:clamp(30px,4cqw,56px)}
.collectionMedia{width:100%;margin-left:0}
@media(max-width:800px){
  .collectionHero{grid-template-columns:100%}
  .collectionCopy{padding:26px;gap:18px}
  .collectionCopy h2{font-size:clamp(28px,8.8vw,42px)}
}
@media(max-width:400px){.collectionCopy{padding:22px}}

/* Fill the rounded logo frame while preserving the complete artwork. */
.logoBox{padding:0;overflow:hidden;height:auto;align-self:center;aspect-ratio:3 / 1}
.logo{display:block;width:100%;max-width:100%;height:auto;max-height:none;margin:0;object-fit:contain}
@media(min-width:921px){.logoBox{width:256px;flex:0 0 256px}}
@media(min-width:921px){.brand{flex-wrap:wrap}.brandTxt{flex:1 1 180px}}
/* Keep the mobile header as compact as the original two-button layout. */
@media(max-width:480px){
  .top{--headerControlGap:8px}
  .brand,.mobileControls{height:calc(var(--mobileControlSize) * 2 + var(--headerControlGap))}
  .mobileControls{gap:var(--headerControlGap);justify-content:flex-start}
  .mobileMenuBtn,.mobileHeaderIcon{flex-shrink:0}
  .logoBox{height:100%;aspect-ratio:auto}
  .logo{height:100%;object-fit:cover;object-position:center}
}
@media(max-width:680px){.top{--headerControlGap:8px}}
@media(max-width:360px){.logoBox{height:auto;aspect-ratio:3 / 1}.logo{height:auto}}