/* Drawn symbols stay monochrome on every platform, including iOS. */
.daz-symbol{display:inline-block;width:20px;height:20px;flex:none;vertical-align:middle;overflow:visible}
.arrow{display:inline-flex;line-height:1}.arrow .daz-symbol{width:23px;height:23px}
.ticker-inner{align-items:center}.ticker b{display:inline-flex}.ticker .daz-symbol{width:23px;height:23px;stroke-width:1.1}
.close,.qty button{display:inline-flex;align-items:center;justify-content:center}.close{min-width:40px;min-height:40px}.qty .daz-symbol{width:16px;height:16px}
.iconbutton svg{stroke-width:1.4}.daz-story-art>.daz-symbol,.cover>.daz-symbol{width:70px;height:70px;stroke-width:.8}
.daz-story-empty>b>.daz-symbol{width:88px;height:88px;stroke-width:.7}
.button>.daz-symbol{margin-left:auto}.quick-add .daz-symbol{width:18px;height:18px}
.hero-art,.product-art,.detail-art{isolation:isolate}.detail-art{position:relative;overflow:hidden}
.hero-art>.art-title,.hero-art>.art-caption,.hero-art>.sticker,.hero-art>.art-corner{z-index:3}
.graffiti{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;overflow:hidden}
.graffiti>svg{display:block;width:100%;height:100%;overflow:visible}
.graffiti .paint{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.graffiti .paint-lime{stroke:#d5f467;stroke-width:9}.graffiti .paint-ink{stroke:#3b343e;stroke-width:1.6}.graffiti .paint-violet{stroke:#9670c9;stroke-width:4}
.graffiti .spray{fill:#8d66bf;opacity:0}.graffiti .tag{fill:none;stroke:#29252c;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.graffiti.is-playing{animation:paint-presence 1.65s ease-out both}
.product-art .graffiti.is-playing{animation:paint-arrive .65s ease-out both}
.graffiti.is-playing .paint,.graffiti.is-playing .tag{animation:paint-draw .65s cubic-bezier(.2,.6,.2,1) both}
.graffiti.is-playing .paint-violet{animation-delay:.12s}.graffiti.is-playing .paint-ink{animation-delay:.22s}.graffiti.is-playing .tag{animation-delay:.28s}
.graffiti.is-playing .spray{animation:spray-in .55s .15s ease-out both}
.hero-art .graffiti.is-playing{animation-duration:2.3s}.hero-art .graffiti .paint-lime{stroke-width:11}
.product-art>.badge,.product-art>.quick-add{z-index:3}
@keyframes paint-draw{to{stroke-dashoffset:0}}
@keyframes paint-arrive{from{opacity:0}to{opacity:1}}
@keyframes spray-in{from{opacity:0;transform:translateY(3px)}to{opacity:.65;transform:translateY(0)}}
@keyframes paint-presence{0%{opacity:0}8%,72%{opacity:1}100%{opacity:0}}
@media(hover:hover){.product-art:hover>.graffiti{opacity:1}.product-art:hover>.graffiti .paint,.product-art:hover>.graffiti .tag{stroke-dashoffset:0}.product-art:hover>.graffiti .spray{opacity:.65}}
.product-art:focus-visible>.graffiti{opacity:1}.product-art:focus-visible>.graffiti .paint,.product-art:focus-visible>.graffiti .tag{stroke-dashoffset:0}
.hero-float{transform-box:view-box;transform-origin:50% 50%;will-change:transform}
.hoodie-float{animation:hoodie-drift 6s ease-in-out infinite}.sneaker-float{animation:sneaker-drift 7s ease-in-out infinite}
@keyframes hoodie-drift{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-11px) rotate(1deg)}}
@keyframes sneaker-drift{0%,100%{transform:translate(0,0) rotate(1deg)}50%{transform:translate(5px,9px) rotate(-1.5deg)}}
.motion-paused .hero-float,.motion-offscreen .hero-float,.motion-background .hero-float{animation-play-state:paused}
.motion-toggle{position:absolute;z-index:4;right:66px;top:16px;width:36px;height:36px;padding:8px;display:grid;place-items:center;background:transparent;border:1px solid #20201e35;border-radius:50%;color:#20201e}
.motion-toggle:hover{background:#ffffff50}.motion-toggle svg{width:18px;height:18px}.play-mark{display:none}.motion-paused .play-mark{display:block}.motion-paused .pause-mark{display:none}
.paint-intro{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:#20201ef5;pointer-events:none;animation:intro-away 1.85s ease both}
.intro-art{position:relative;width:min(88vw,570px);aspect-ratio:1;isolation:isolate}
.intro-splash{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.splash-violet,.splash-lime,.splash-slash{transform-origin:300px 300px;animation:splash-impact .55s cubic-bezier(.16,.8,.25,1) both}
.splash-lime{animation-delay:.08s}.splash-slash{animation-delay:.12s;stroke-dasharray:700;animation-name:slash-impact}
.intro-logo{position:absolute;inset:20%;display:grid;place-items:center;animation:logo-emerge .75s .18s cubic-bezier(.16,.8,.25,1) both;will-change:transform,opacity}
.intro-logo:before{content:'';position:absolute;inset:8%;border-radius:50%;background:#20201e;filter:blur(20px);z-index:-1}
.intro-logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 0 #20201e80)}
@keyframes splash-impact{from{opacity:0;transform:translate(-90px,60px) scale(.15) rotate(-24deg)}35%{opacity:1}to{opacity:1;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes slash-impact{from{stroke-dashoffset:700;opacity:0;transform:scale(.7)}to{stroke-dashoffset:0;opacity:1;transform:scale(1)}}
@keyframes logo-emerge{from{opacity:0;transform:translate3d(-9px,10px,0) rotate(-4deg) scale(.92)}to{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}}
@keyframes intro-away{0%,72%{opacity:1}100%{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.graffiti,.paint-intro,.motion-toggle{display:none!important}.hero-float{animation:none!important;transform:none!important;will-change:auto}.product-art>svg,.product-art>img{transition:none!important;transform:none!important}}
