@media(min-width:1200px){.ingredients .secondary-range{grid-template-columns:repeat(5,minmax(0,1fr))}.ingredients .secondary-range > a{padding:14px;grid-template-columns:72px minmax(0,1fr)}}
.beachboy-pack{display:flex;align-items:center;justify-content:center;gap:4px}
.secondary-range .beachboy-pack img{width:32px;height:78px;object-fit:contain}
.secondary-range .beachboy-logo{display:block;width:110px;height:36px;object-fit:cover;object-position:50% 55%;background:#fff9ee;border-radius:4px;max-width:100%}
@media(min-width:701px) and (max-width:1199px){.ingredients .secondary-range{grid-template-columns:repeat(2,minmax(0,1fr))}.ingredients .secondary-range>a:last-child{grid-column:1/-1}}
.beachboy-main{max-width:1100px;margin:auto;padding:150px 32px 60px}
.beachboy-heading{text-align:center;max-width:680px;margin:0 auto 38px}
.beachboy-heading h1{margin:20px 0 14px}
.beachboy-heading h1 img{width:300px;height:100px;object-fit:cover;object-position:50% 55%;max-width:90%;background:#fff9ee;border-radius:8px}
.beachboy-heading p{font-size:18px;line-height:1.65}
.beachboy-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.beachboy-product{background:#fffaf1;border:1px solid #dfd6c7;border-radius:16px;padding:28px;text-align:center;color:#352317}
.beachboy-product img{display:block;height:360px;width:100%;object-fit:contain;margin:auto auto 22px}
.beachboy-product h2{font-size:26px;margin:0 0 8px}
.beachboy-product p{font-size:16px;line-height:1.6;margin:0}
@media(max-width:600px){.beachboy-main{padding:120px 20px 40px}.beachboy-products{grid-template-columns:1fr}.beachboy-product img{height:320px}.beachboy-heading p{font-size:16px}}

/* Preserve the supplied transparent logo and override shared thumbnail styling. */
.ingredients .secondary-range > a.beachboy-range .beachboy-logo{
 width:60px!important;height:18px!important;max-width:100%;object-fit:cover!important;object-position:50% 50%;background:transparent!important;border-radius:0;filter:brightness(0) invert(1);transform:none!important;transition:none!important;
}
.ingredients .secondary-range > a.beachboy-range .beachboy-pack{gap:0;justify-content:center}
.ingredients .secondary-range > a.beachboy-range .beachboy-pack img{width:clamp(18px,2.2vw,24px)!important;height:clamp(44px,5vw,62px)!important;margin-inline:-2px;object-fit:contain;transform:none!important;transition:none!important}
.ingredients .secondary-range > a.beachboy-range,
.ingredients .secondary-range > a.beachboy-range:hover{transform:none!important;box-shadow:none!important;background:transparent!important;transition:none!important}
.beachboy-heading h1 img{background:transparent;border-radius:0;object-position:50% 50%;filter:none}

/* Match the shared 78px product thumbnail area in portrait layouts. */
@media (orientation:portrait){
 .ingredients .secondary-range > a.beachboy-range .beachboy-pack{width:78px;max-width:100%;height:78px;gap:0;justify-content:center}
 .ingredients .secondary-range > a.beachboy-range .beachboy-pack img{width:32px!important;height:78px!important;flex:0 0 32px;margin-inline:-2px;object-fit:contain}
}

/* Consistent bottle size in both orientations; logo stays still. */
.ingredients .secondary-range > a.beachboy-range .beachboy-pack{width:78px;max-width:100%;height:78px;gap:0;justify-content:center}
.ingredients .secondary-range > a.beachboy-range .beachboy-pack img{width:32px!important;height:78px!important;flex:0 0 32px;margin-inline:-2px;object-fit:contain;transition:transform .25s ease!important}
@media(hover:hover){
 .ingredients .secondary-range > a.beachboy-range:hover .beachboy-pack img{transform:translateY(-5px) scale(1.08)!important}
}
.ingredients .secondary-range > a.beachboy-range:focus-visible .beachboy-pack img{transform:translateY(-5px) scale(1.08)!important}
@media(prefers-reduced-motion:reduce){
 .ingredients .secondary-range > a.beachboy-range .beachboy-pack img{transition:none!important}
 .ingredients .secondary-range > a.beachboy-range:hover .beachboy-pack img,
 .ingredients .secondary-range > a.beachboy-range:focus-visible .beachboy-pack img{transform:none!important}
}

/* Landscape: match the neighboring syrup thumbnail scale. */
@media (orientation:landscape){
 .ingredients .secondary-range > a.beachboy-range .beachboy-pack{height:52px}
 .ingredients .secondary-range > a.beachboy-range .beachboy-pack img{width:22px!important;height:52px!important;flex-basis:22px;margin-inline:-1px}
}