.beans-motion-story{--beans-stage-height:clamp(450px,67svh,750px);--beans-warm:#d2af79;position:relative}
.beans-motion-screen{position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 74% 49%,#342118 0%,#1c1612 31%,#101110 69%)}
.beans-motion-content{display:grid;grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr);align-items:center;min-height:var(--beans-stage-height);padding-top:22px}
.beans-motion-copy{position:relative;z-index:2;display:grid;align-items:center;min-width:0;padding:28px 0}
.beans-motion-intro,.beans-motion-detail{grid-area:1/1}
.beans-motion-detail{opacity:0;visibility:hidden;pointer-events:none}
.beans-motion-intro h1{font-size:clamp(45px,5.55vw,100px);line-height:.97;letter-spacing:-.015em;margin:20px 0}
.beans-motion-intro h1 span{display:block}
.beans-motion-name{font:400 clamp(47px,6.15vw,112px)/.95 var(--heading);color:var(--gold);overflow-wrap:anywhere;margin:18px 0}
.beans-choose{display:inline-flex;min-width:0;margin-top:25px}
.beans-motion-stage{height:var(--beans-stage-height);min-width:0;position:relative;isolation:isolate}
.beans-motion-backdrop{position:absolute;inset:0;display:grid;place-items:center;font:400 clamp(74px,12vw,205px)/1 var(--heading);letter-spacing:-.025em;color:#b7834e22;white-space:nowrap;pointer-events:none}
.beans-motion-pack{position:absolute;left:var(--pack-x);top:var(--pack-y);width:min(46%,calc(var(--beans-stage-height)*.40));transform:translate(-50%,-50%) scale(var(--pack-s)) rotate(var(--pack-r));filter:drop-shadow(0 24px 25px #0009);pointer-events:none}
.beans-cutout{display:block;width:100%;height:auto;overflow:hidden}
.beans-motion-pack--latte{--pack-x:25%;--pack-y:47%;--pack-s:.92;--pack-r:-14deg;z-index:1}
.beans-motion-pack--cappuccino{--pack-x:75%;--pack-y:48%;--pack-s:.88;--pack-r:14deg;z-index:1}
.beans-motion-pack--chocolate{--pack-x:51%;--pack-y:54%;--pack-s:1.04;--pack-r:-2deg;z-index:2}
.beans-motion-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid #d5b67f38;padding:12px 0 16px;position:relative;z-index:3;color:var(--gold);font-size:11px;letter-spacing:.06em}
.beans-motion-steps{display:none;flex-wrap:wrap;gap:8px 15px}
.beans-motion-steps button{border:0;border-bottom:1px solid transparent;background:none;color:#bcb0a2;font:inherit;padding:8px 0}
.beans-motion-steps button[aria-current=step]{color:var(--gold);border-color:var(--gold)}
.beans-motion-story.is-animated .beans-motion-screen{position:sticky;top:var(--story-top,0px)}
.beans-motion-story.is-animated .beans-motion-steps{display:flex}
.beans-motion-story.is-animated .beans-motion-pack{will-change:transform,opacity}
.beans-panel-image .beans-cutout{width:min(100%,285px);height:auto;filter:drop-shadow(0 22px 25px #0008)}
.catalog-card--beans .catalog-card-media:has(.beans-cutout){display:grid;place-items:center;background:radial-gradient(ellipse at 56% 46%,#66462e,#241812 69%)}
.catalog-card--beans .catalog-card-media>.beans-cutout{width:auto;height:88%;max-height:100%;max-width:100%;transform:rotate(42deg) scale(1.2);filter:drop-shadow(0 15px 15px #0008)}
@media(max-width:820px){.beans-motion-content{grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr)}}
@media(max-width:700px){
 .beans-motion-story{--beans-stage-height:clamp(235px,45svh,390px)}
 .beans-motion-content{grid-template-columns:1fr;padding-top:0}
 .beans-motion-copy{padding:25px 0 4px}
 .beans-motion-intro h1{font-size:clamp(38px,9.6vw,68px);margin:15px 0}
 .beans-motion-name{font-size:clamp(39px,11vw,72px)}
 .beans-motion-intro .beans-lead{font-size:14px}
 .beans-motion-stage{margin-top:8px}
 .beans-motion-pack{width:min(43%,calc(var(--beans-stage-height)*.42))}
 .beans-motion-bar{flex-wrap:wrap;justify-content:center}
 .beans-motion-steps{justify-content:center;gap:4px 12px}
 .beans-motion-bar>a{font-size:10px}
 .beans-choose{min-height:46px;padding:10px 14px;margin-top:14px}
 .beans-panel-image .beans-cutout{width:min(100%,210px)}
}