/* A single horizontal brand banner after ABOUT. */
.home-product{padding:70px 36px 80px;background:#fff8e9;color:var(--red,#ff0024)}
.product-banner{display:flex;align-items:center;justify-content:center;margin-top:36px;padding:72px 8%;background:#fff}
.product-logo{display:block;width:58%;max-width:600px;aspect-ratio:808/113;background:#eb300d;mask:url('/assets/products/toji/logo-001.png') center/contain no-repeat;mask-mode:luminance;transform:scaleY(-1)}
@media(max-width:700px){.home-product{padding:48px 20px 50px}.product-banner{margin-top:24px;padding:44px 24px}.product-logo{width:82%}}

@media(hover:hover) and (pointer:fine){
  .product-logo{transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .product-banner:hover .product-logo{transform:scale(1.04,-1.04)}
}
@media(prefers-reduced-motion:reduce){
  .product-logo{transition:none}
  .product-banner:hover .product-logo{transform:scaleY(-1)}
}

.product-banner:focus-visible{outline:3px solid var(--red,#ff0024);outline-offset:6px}

/* Background media is out of flow to preserve the original banner size. */
.product-banner{position:relative;isolation:isolate;overflow:hidden;background:#6d827d}.product-banner-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;pointer-events:none}.product-banner::after{content:"";position:absolute;inset:0;background:#152b2638;z-index:1;pointer-events:none}.product-logo{position:relative;z-index:2;background:#fff}

/* Pair the brand with the actual packaged product. */
.product-banner{justify-content:space-between;gap:5%;min-height:260px;padding:22px 6%}
.product-banner .product-logo{width:60%;max-width:680px;flex:none}
.product-banner-goods{position:relative;z-index:2;display:block;width:31%;max-width:330px;flex:none}
.product-banner-goods img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;object-position:center;filter:drop-shadow(0 12px 12px #10261f33)}
@media(max-width:700px){
 .product-banner{flex-direction:column;justify-content:center;gap:14px;min-height:0;padding:32px 24px 16px}
 .product-banner .product-logo{width:100%;max-width:420px}
 .product-banner-goods{width:190px;max-width:75%}
}

.product-banner-goods{width:25%;max-width:260px}
.product-banner-goods .badge-card-image{aspect-ratio:1122/1402;clip-path:inset(6.7% 8.4% 8% 8.4%)}
@media(max-width:700px){.product-banner-goods{width:180px}}