.pp-hero__stage{position:relative}.pp-hero__tabs{display:flex;gap:8px;justify-content:center;margin:24px 0 12px}.pp-hero__tab{background:transparent;border:1px solid var(--pp-line);padding:10px 20px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;color:var(--pp-text, var(--pp-ink));transition:background .25s ease,color .25s ease,border-color .25s ease}.pp-hero__tab.is-active{background:var(--pp-accent, var(--pp-ink));color:#fff;border-color:var(--pp-accent, var(--pp-ink))}.pp-hero__tab.is-disabled,.pp-hero__tab[disabled]{opacity:.35;cursor:not-allowed;pointer-events:none}.pp-hero__product{position:relative;aspect-ratio:1 / 1;max-width:var(--pp-hero-product-max, 560px);margin:0 auto;display:grid;place-items:center}.pp-hero__base{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.pp-hero__base.is-active{display:block}.pp-hero__base-img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block;border-radius:var(--pp-hero-image-radius, 0)}.pp-hero__placeholder{position:absolute;top:10%;right:10%;bottom:10%;left:10%;display:grid;place-items:center;border:2px dashed var(--pp-line);border-radius:var(--pp-hero-image-radius, var(--pp-radius));color:var(--pp-muted);font-size:14px}.pp-hero__patch-slot{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:3}.pp-hero__patch-overlay{position:absolute;z-index:4;width:var(--pp-patch-w, 22%);top:var(--pp-patch-top, 42%);left:var(--pp-patch-left, 50%);aspect-ratio:1 / 1;transform:translate(-50%,-50%) rotate(var(--pp-patch-rot, 0deg)) scale(1);filter:drop-shadow(0 calc(var(--pp-patch-shadow, 4) * 1px) calc(var(--pp-patch-shadow, 4) * 2px) rgba(0,0,0,.18));opacity:0;transition:opacity .35s ease,transform .45s var(--pp-ease)}.pp-hero__patch-overlay-img{width:100%;height:100%;object-fit:contain;display:block;border-radius:var(--pp-hero-patch-radius, 8px)}.pp-hero__patch-overlay.is-in{opacity:1;transform:translate(-50%,-50%) rotate(var(--pp-patch-rot, 0deg)) scale(1)}.pp-hero__patch-overlay.is-snap{transform:translate(-50%,-50%) rotate(var(--pp-patch-rot, 0deg)) scale(1.12)}.pp-hero__floaters{position:absolute;top:-5%;right:-5%;bottom:-5%;left:-5%;pointer-events:none;z-index:0;background-image:radial-gradient(circle at 8% 18%,rgba(255,200,120,.5) 0 14px,transparent 15px),radial-gradient(circle at 92% 22%,rgba(140,200,255,.45) 0 16px,transparent 17px),radial-gradient(circle at 12% 82%,rgba(255,150,170,.5) 0 12px,transparent 13px),radial-gradient(circle at 88% 78%,rgba(180,230,160,.5) 0 14px,transparent 15px);filter:blur(.3px);animation:pp-hero-float 18s ease-in-out infinite}@keyframes pp-hero-float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.pp-hero__rail-wrap{display:flex;align-items:center;gap:8px;margin-top:32px}.pp-hero__arrow{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--pp-line);background:var(--pp-card-bg, var(--pp-card));cursor:pointer;display:grid;place-items:center;color:var(--pp-text, var(--pp-ink));transition:transform .2s ease,background .2s ease,color .2s ease}.pp-hero__arrow:hover{background:var(--pp-accent, var(--pp-ink));color:#fff;transform:scale(1.05)}.pp-hero__rail{flex:1;display:flex;gap:14px;padding:8px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none}.pp-hero__rail::-webkit-scrollbar{display:none}.pp-hero__patch-card{flex:0 0 160px;scroll-snap-align:center;display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--pp-card-bg, var(--pp-card));border:1px solid var(--pp-line);border-radius:var(--pp-radius);cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;text-align:left}.pp-hero__patch-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px #00000014}.pp-hero__patch-card.is-active{border-color:var(--pp-accent, var(--pp-ink));box-shadow:0 14px 36px #0000001f}.pp-hero__patch-card-inner{aspect-ratio:1 / 1;border-radius:var(--pp-radius-sm);background:var(--pp-cream);display:grid;place-items:center;overflow:hidden}.pp-hero__patch-thumb{width:100%;height:100%;object-fit:contain}.pp-hero__patch-thumb--empty{display:block;width:60%;aspect-ratio:1 / 1;border:2px dashed var(--pp-line);border-radius:8px}.pp-hero__patch-card-meta{display:flex;flex-direction:column;gap:2px}.pp-hero__patch-card-name{font-weight:700;font-size:13px}.pp-hero__patch-card-label{color:var(--pp-muted);font-size:11px}.pp-hero__active-name{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pp-hero__cta{padding:14px 26px;border-radius:999px;text-decoration:none;font-weight:700;font-size:14px;display:inline-block;border:1px solid transparent;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}.pp-hero__cta--solid{background:var(--pp-accent, var(--pp-ink));color:#fff;border-color:var(--pp-accent, var(--pp-ink))}.pp-hero__cta--solid:hover{transform:translateY(-2px)}.pp-hero__cta--outline{background:transparent;color:var(--pp-accent, var(--pp-ink));border-color:var(--pp-accent, var(--pp-ink))}.pp-hero__cta--outline:hover{background:var(--pp-accent, var(--pp-ink));color:#fff}.pp-hero__empty{margin-top:24px;padding:24px;text-align:center;border:1px dashed var(--pp-line);border-radius:var(--pp-radius);color:var(--pp-muted)}@media(max-width:749px){.pp-hero__product{max-width:100%}.pp-hero__floaters,.pp-hero__arrow{display:none}.pp-hero__rail-wrap{margin-top:18px}.pp-hero__rail{gap:8px;padding:4px 2px}.pp-hero__patch-card{flex-basis:96px;padding:8px;gap:6px;border-radius:var(--pp-radius-sm)}.pp-hero__patch-card-name{font-size:12px}.pp-hero__patch-card-label{font-size:10px}.pp-hero .pp-section__ctas,.pp-hero__ctas{margin-top:16px}}@media(prefers-reduced-motion:reduce){.pp-hero__patch-overlay,.pp-hero__patch-card,.pp-hero__cta,.pp-hero__floaters{transition:none!important;animation:none!important}}@media(min-width:750px){.pp-hero[data-thumb-size-desktop=medium] .pp-hero__rail{gap:10px}.pp-hero[data-thumb-size-desktop=medium] .pp-hero__patch-card{flex:0 0 120px;padding:9px;gap:6px}.pp-hero[data-thumb-size-desktop=medium] .pp-hero__patch-card-name{font-size:12px}.pp-hero[data-thumb-size-desktop=medium] .pp-hero__patch-card-label{font-size:10px}.pp-hero[data-thumb-size-desktop=compact] .pp-hero__rail{gap:8px}.pp-hero[data-thumb-size-desktop=compact] .pp-hero__patch-card{flex:0 0 88px;padding:6px;gap:4px}.pp-hero[data-thumb-size-desktop=compact] .pp-hero__patch-card-name{font-size:11px}.pp-hero[data-thumb-size-desktop=compact] .pp-hero__patch-card-label{font-size:10px}}@media(max-width:749px){.pp-hero[data-thumb-size-mobile=large] .pp-hero__patch-card{flex-basis:96px;padding:8px;gap:6px}.pp-hero[data-thumb-size-mobile=large] .pp-hero__patch-card-name{font-size:12px}.pp-hero[data-thumb-size-mobile=large] .pp-hero__patch-card-label{font-size:10px}.pp-hero[data-thumb-size-mobile=medium] .pp-hero__patch-card{flex-basis:84px;padding:6px;gap:4px}.pp-hero[data-thumb-size-mobile=medium] .pp-hero__patch-card-name{font-size:11px}.pp-hero[data-thumb-size-mobile=medium] .pp-hero__patch-card-label{font-size:10px}.pp-hero[data-thumb-size-mobile=compact] .pp-hero__patch-card{flex-basis:76px;padding:5px;gap:3px}.pp-hero[data-thumb-size-mobile=compact] .pp-hero__patch-card-name{font-size:11px}.pp-hero[data-thumb-size-mobile=compact] .pp-hero__patch-card-label{font-size:9px}}.pp-section.pp-hero{background-color:var(--pp-section-bg, #f3f3f3)}.pp-hero__product{inline-size:min(100%,var(--pp-hero-product-max, 560px),50vh);inline-size:min(100%,var(--pp-hero-product-max, 560px),50svh)}@media(max-width:749px){.pp-hero__product{inline-size:min(100%,clamp(280px,86vw,520px))}.pp-hero .pp-section__header,.pp-hero__header{margin-bottom:12px}.pp-hero__tabs{margin-top:10px;margin-bottom:8px}.pp-hero__rail-wrap{margin-top:10px}.pp-hero .pp-section__ctas,.pp-hero__ctas{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;gap:10px;width:100%;margin-top:20px}.pp-hero .pp-section__ctas .pp-hero__cta,.pp-hero__ctas .pp-hero__cta{flex:1 1 0;min-width:0;max-width:190px;white-space:nowrap;padding-left:12px;padding-right:12px;font-size:13px;text-align:center}}@media(min-width:750px)and (min-height:900px){.pp-hero__product{inline-size:min(100%,var(--pp-hero-product-max, 560px),54svh)}}.pp-hero .pp-hero__rail-wrap[data-pp-reveal]{opacity:1;transform:translateY(0);transition:none;visibility:visible}@media(max-width:749px){.pp-hero .pp-section__ctas,.pp-hero__ctas{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;gap:10px;width:100%}.pp-hero .pp-section__ctas .pp-hero__cta,.pp-hero__ctas .pp-hero__cta{flex:1 1 0;min-width:0;max-width:190px;white-space:nowrap;padding-left:12px;padding-right:12px;font-size:13px;text-align:center}}
/*# sourceMappingURL=/cdn/shop/t/27/assets/patch-pop-hero-playground.css.map */