/* Real merchant photographs, cleaned cutouts, and exact guide tokens. */
.merchant-cup{position:relative;width:100%;height:100%;transform:rotate(-4deg)}
.merchant-cup-base,.merchant-cup-lip{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.merchant-cup-charms{position:absolute;left:32%;top:20%;width:58%;height:22%;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(3,1fr);gap:0;z-index:1;transform:rotate(2deg)}
.merchant-cup-charms>.charm-cutout{width:155%;height:auto;aspect-ratio:1;max-width:none;min-width:0;min-height:0;margin-left:-10%;filter:drop-shadow(1px 3px 2px #8e54632b);transform:rotate(-17deg)}
.merchant-cup-charms>.charm-cutout:nth-child(2n){transform:rotate(14deg) translateY(-8%)}
.merchant-cup-charms>.charm-cutout:nth-child(3n){transform:rotate(-28deg) translateY(-12%)}
.merchant-cup-lip{z-index:2;clip-path:polygon(0 35%,25% 35%,29% 31%,34% 36%,42% 30%,50% 34%,57% 30%,65% 35%,72% 29%,80% 33%,89% 28%,96% 29%,100% 30%,100% 100%,0 100%)}
.hero-image-frame{background:#f4cfdc}
.hero-float.charm-cutout{width:93px;height:93px}
.cute-ribbon .charm-cutout{width:64px;height:64px;flex-shrink:0;filter:drop-shadow(1px 3px 2px #95648020);transform:rotate(-9deg)}
.cute-ribbon .charm-cutout:nth-child(2n){transform:rotate(11deg)}
.card-cute.charm-cutout{width:76px;height:76px}
.story-cup{background:#f8e3ea}
.story-cup>img{object-fit:contain}
.story-matching>.charm-cutout{width:86px;height:86px;flex-shrink:0}
.product-card>h3{margin-top:13px;text-align:center;line-height:1.2}
.real-cup-scene .photo-cup{position:absolute;height:98%;width:auto;aspect-ratio:1;left:50%;translate:-50% 0;top:1%;bottom:auto;z-index:2;max-height:none}
.real-cup-scene .photo-scoop{position:absolute;height:82%;width:auto;aspect-ratio:1;left:45%;translate:-50% 0;top:-7%;z-index:3;transform:rotate(-38deg);transform-origin:50% 26%}
.real-cup-scene .photo-cup>img,.real-cup-scene .photo-scoop>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain}
.spoon-token-tray{position:absolute;left:34%;top:8%;width:32%;height:29%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));opacity:0;gap:0}
.spoon-token-tray .charm-cutout{width:120%;height:120%;min-height:0;min-width:0;filter:drop-shadow(1px 2px 1px #84607520)}
.spoon-token-tray[data-count="3"]{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.real-cup-scene.scooping .photo-scoop{animation:merchant-scoop 4.4s ease-in-out both}
.real-cup-scene.scooping .photo-cup{animation:none}
.real-cup-scene.scooping .spoon-token-tray{animation:merchant-tokens 4.4s ease-in-out both}
@keyframes merchant-scoop{0%{transform:translate(0,0) rotate(-38deg);z-index:3}28%{transform:translate(0,22%) rotate(-25deg);z-index:1}46%{transform:translate(3%,28%) rotate(-18deg);z-index:1}70%{transform:translate(8%,-3%) rotate(-38deg);z-index:3}100%{transform:translate(8%,-6%) rotate(-38deg);z-index:3}}
@keyframes merchant-tokens{0%,48%{opacity:0}58%,100%{opacity:1}}
@media(max-width:940px){.hero-float.charm-cutout{width:63px;height:63px}.card-cute.charm-cutout{width:57px;height:57px}.story-matching>.charm-cutout{width:56px;height:56px}}
@media(max-width:640px){.hero-float.charm-cutout{width:65px;height:65px}.cute-ribbon .charm-cutout{width:52px;height:52px}.card-cute.charm-cutout{width:62px;height:62px}.story-matching>.charm-cutout{width:40px;height:40px}.merchant-cup-charms{gap:0}.product-card>h3{margin-top:10px}}
@media(max-width:380px){.hero-float.charm-cutout{width:56px;height:56px}.card-cute.charm-cutout{width:54px;height:54px}}
@media(prefers-reduced-motion:reduce){.real-cup-scene *{animation:none!important}}