/* Use the screen width while keeping small, consistent content gutters. */
:root{--wrap:100%}
@media(min-width:1025px){
 :root{--gutter:clamp(20px,1.4vw,32px)}
 body:has(#pdp) main>.wrap{max-width:none}
}
@media(min-width:641px) and (max-width:1024px){
 :root{--gutter:20px}
}

/* Larger header identity; keep image proportions and the existing header height. */
.header .wordmark{flex-shrink:0}
.header .wordmark img{width:auto;height:42px;max-width:180px;object-fit:contain}
.header.is-stuck .wordmark img{height:38px}
@media(min-width:1025px) and (max-width:1199px){
 .header .wordmark img{height:36px;max-width:150px}
 .header.is-stuck .wordmark img{height:34px}
}
@media(min-width:641px) and (max-width:1024px){
 .header .wordmark img{height:38px;max-width:160px}
 .header.is-stuck .wordmark img{height:36px}
}
@media(max-width:640px){
 .header .wordmark img{height:34px;max-width:140px}
 .header.is-stuck .wordmark img{height:32px}
}