/* Approved homepage product layout, 2026-11-10. */
.hero-grid{grid-template-columns:1fr 1.08fr;gap:46px;align-items:center}
.hero-copy h1{font-size:clamp(64px,6.25vw,100px)}
.hero-art.brand-stage{position:relative;background:transparent;border:0;box-shadow:none;padding:0;overflow:visible;aspect-ratio:1/1.08;width:100%;height:auto;min-height:0;color:#000;isolation:isolate}
.brand-hero{position:absolute;left:23%;top:24%;width:54%;aspect-ratio:1/1;margin:0;padding:0;display:grid;place-items:center;background:#000;border:3px solid #000;border-radius:50%;overflow:hidden;box-shadow:5px 5px 0 var(--brand-cyan);z-index:2;transform:rotate(-4deg)}
.brand-hero img{display:block;width:100%;height:100%;object-fit:contain;max-width:none}
.orbit-ring{position:absolute;inset:11% 9%;border:1px dashed #0002;border-radius:50%;z-index:0}
.orbit-item{position:absolute;display:grid;place-items:center;left:var(--x);top:var(--y);width:var(--w,23%);aspect-ratio:1/1;transform:translate(-50%,-50%) rotate(var(--r,0deg));z-index:3;pointer-events:none;mix-blend-mode:multiply}
.orbit-item img{display:block;max-width:100%;width:100%;height:100%;object-fit:contain}
.p-coin{--x:28%;--y:10%;--w:26%;--r:-15deg}
.p-pay{--x:74%;--y:10%;--w:25%;--r:12deg}
.p-hotel{--x:91%;--y:29%;--w:21%;--r:17deg}
.p-cup{--x:94%;--y:53%;--w:19%;--r:10deg}
.p-impak{--x:88%;--y:75%;--w:27%;--r:12deg}
.p-pill{--x:71%;--y:91%;--w:24%;--r:5deg}
.p-bag{--x:48%;--y:97%;--w:29%;--r:-4deg}
.p-patch{--x:24%;--y:91%;--w:26%;--r:-12deg}
.p-wrench{--x:9%;--y:72%;--w:28%;--r:-24deg}
.p-driver{--x:5%;--y:50%;--w:24%;--r:-15deg}
.p-metal{--x:10%;--y:29%;--w:26%;--r:-36deg}
.p-freshener{--x:51%;--y:5%;--w:22%;--r:-6deg}
.p-freshener img{clip-path:inset(0 0 14% 0)}
.hero-bottom{padding-top:35px}



@media(max-width:1100px) and (min-width:901px){.hero-grid{gap:30px}.hero-copy h1{font-size:65px}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-art.brand-stage{width:min(100%,550px);justify-self:center}}
@media(max-width:600px){
.hero-top{padding:18px 0}.hero-grid{display:grid;grid-template-columns:1fr;gap:0}.hero-copy{display:contents}
.hero-copy h1{grid-row:1;font-size:clamp(42px,12.7vw,66px);margin:0 0 8px;line-height:.95}
.hero-art.brand-stage{grid-row:2;width:calc(100% - 20px);margin:15px auto 15px;aspect-ratio:1/1.08}
.hero-jp{grid-row:3;font-size:19px;line-height:1.5;margin:11px 0 10px}
.hero-description{grid-row:4;font-size:11px;line-height:1.9;margin:0 0 17px;max-width:290px}
.hero-copy>.button{grid-row:5;justify-self:start;min-height:48px}
.brand-hero{border-width:2px;box-shadow:3px 3px 0 var(--brand-cyan)}
.hero-bottom{padding-top:26px}
}
@media(min-width:901px){.hero-art.brand-stage{max-width:520px;justify-self:center;aspect-ratio:1/1.03}.hero-copy h1{margin-top:0}}
.hero-art.brand-stage{isolation:auto}
@media(max-width:600px){.hero-copy h1{font-size:clamp(40px,11vw,50px)}.hero-art.brand-stage{width:calc(100% - 46px);margin-top:12px;margin-bottom:4px}.hero-description{max-width:235px}.p-driver{--x:7%}.p-wrench{--x:11%}.hero-jp{margin-top:10px;font-size:18px}}

.orbit-item picture{display:block;width:100%;height:100%}
@media(max-width:360px){.hero-description{max-width:calc(100% - 108px)}.hero-jp{font-size:17px}.dig-widget{--dig-size:88px}.dig-caption{font-size:9px;padding:3px 6px}}

@media(max-width:360px){.hero-copy>.button{max-width:calc(100% - 108px);gap:14px;font-size:10px;padding:10px 12px}}