:root[data-look=playful]:not(:has(.workspace-layout)){--lift:0 22px 40px -26px #0f172a80, 0 2px 6px -2px #0f172a14;--lift-sm:0 12px 24px -16px #0f172a73;--out:cubic-bezier(.2, .8, .2, 1);--spring:cubic-bezier(.34, 1.4, .64, 1)}:root[data-look=playful]:not(:has(.workspace-layout)) ::selection{color:var(--ink);background:#fde68a}:root[data-look=playful]:not(:has(.workspace-layout)) .product-card,:root[data-look=playful]:not(:has(.workspace-layout)) .hub-card,:root[data-look=playful]:not(:has(.workspace-layout)) .deal-card{transition:transform .35s var(--out), box-shadow .35s var(--out), border-color .35s var(--out)}:root[data-look=playful]:not(:has(.workspace-layout)) .product-photo{transition:transform .7s var(--out)}:root[data-look=playful]:not(:has(.workspace-layout)) .aisle-tile{transition:transform .35s var(--out)}:root[data-look=playful]:not(:has(.workspace-layout)) .aisle-art{transition:box-shadow .35s var(--out)}:root[data-look=playful]:not(:has(.workspace-layout)) .aisle-tile img{transition:transform .7s var(--out), filter .35s}:root[data-look=playful]:not(:has(.workspace-layout)) .hub-count svg,:root[data-look=playful]:not(:has(.workspace-layout)) .section-heading>a svg,:root[data-look=playful]:not(:has(.workspace-layout)) .deal-price a svg{transition:translate .3s var(--out)}:root[data-look=playful]:not(:has(.workspace-layout)) .primary-button,:root[data-look=playful]:not(:has(.workspace-layout)) .secondary-button{transition:background .2s, border-color .2s, color .2s, transform .25s var(--out), box-shadow .25s var(--out)}:root[data-look=playful]:not(:has(.workspace-layout)) .primary-button:active,:root[data-look=playful]:not(:has(.workspace-layout)) .secondary-button:active,:root[data-look=playful]:not(:has(.workspace-layout)) .add-button:active:not(:disabled){transform:scale(.96)}:root[data-look=playful]:not(:has(.workspace-layout)) .add-button{transition:background .2s, color .2s, transform .2s var(--out)}:root[data-look=playful]:not(:has(.workspace-layout)) .qty-stepper.compact{animation:fx-pop .35s var(--spring)}:root[data-look=playful]:not(:has(.workspace-layout)) .wishlist-control button{transition:transform .25s var(--spring), color .2s, background .2s}:root[data-look=playful]:not(:has(.workspace-layout)) .wishlist-control button.saved svg{animation:fx-pop .4s var(--spring)}:root[data-look=playful]:not(:has(.workspace-layout)) .mobile-nav .nav-icon{transition:background .25s, transform .25s var(--spring)}:root[data-look=playful]:not(:has(.workspace-layout)) .mobile-nav a:active .nav-icon{transform:scale(.9)}:root[data-look=playful]:not(:has(.workspace-layout)) .section-heading{position:relative}:root[data-look=playful]:not(:has(.workspace-layout)) .section-heading:after{content:"";background:var(--offer);transform-origin:0;border-radius:3px;width:56px;height:3px;position:absolute;bottom:-1px;left:0}:root[data-look=playful]:not(:has(.workspace-layout)) .primary-nav a:not(.school-door-pill){background:linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0 1.5px;transition:background-size .3s var(--out), color .2s;border-bottom-color:#0000}:root[data-look=playful]:not(:has(.workspace-layout)) .primary-nav a:not(.school-door-pill):hover{background-size:100% 1.5px;border-bottom-color:#0000}:root[data-look=playful]:not(:has(.workspace-layout)) .aisle-art:after,:root[data-look=playful]:not(:has(.workspace-layout)) .deal-art:after{content:"";z-index:1;pointer-events:none;background:linear-gradient(105deg,#0000 35%,#ffffff6b 50%,#0000 65%);position:absolute;inset:0;translate:-110%}:root[data-look=playful]:not(:has(.workspace-layout)) .hero-card:after{content:"";z-index:0;background:radial-gradient(440px circle at var(--mx,30%) var(--my,40%), #fbbf2442, transparent 60%);opacity:0;transition:opacity .4s var(--out);pointer-events:none;position:absolute;inset:0}:root[data-look=playful]:not(:has(.workspace-layout)) .offer-code{background-image:linear-gradient(110deg,#0000 40%,#ffffffa6 50%,#0000 60%);background-position:150% 0;background-repeat:no-repeat;background-size:250% 100%}:root[data-look=playful]:not(:has(.workspace-layout)) .fx-bump{animation:fx-bump .5s var(--spring)}@media (hover:hover){:root[data-look=playful]:not(:has(.workspace-layout)) .product-card:hover{box-shadow:var(--lift);border-color:#0000;transform:translateY(-4px)}:root[data-look=playful]:not(:has(.workspace-layout)) .product-card:hover .product-photo{transform:scale(1.06)}:root[data-look=playful]:not(:has(.workspace-layout)) .aisle-tile:hover{transform:translateY(-4px)}:root[data-look=playful]:not(:has(.workspace-layout)) .aisle-tile:hover .aisle-art{box-shadow:var(--lift-sm)}:root[data-look=playful]:not(:has(.workspace-layout)) .aisle-tile:hover img{filter:saturate();transform:scale(1.07)}:root[data-look=playful]:not(:has(.workspace-layout)) .hub-card:hover{box-shadow:var(--lift);border-color:#0000;transform:translateY(-3px)}:root[data-look=playful]:not(:has(.workspace-layout)) .deal-card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px);box-shadow:var(--lift);border-color:#0000}:root[data-look=playful]:not(:has(.workspace-layout)) .aisle-tile:hover .aisle-art:after,:root[data-look=playful]:not(:has(.workspace-layout)) .deal-art:hover:after{transition:translate .9s var(--out);translate:110%}:root[data-look=playful]:not(:has(.workspace-layout)) .hero-card:hover:after{opacity:1}:root[data-look=playful]:not(:has(.workspace-layout)) .hub-card:hover .hub-count svg,:root[data-look=playful]:not(:has(.workspace-layout)) .section-heading>a:hover svg,:root[data-look=playful]:not(:has(.workspace-layout)) .deal-price a:hover svg{translate:4px}:root[data-look=playful]:not(:has(.workspace-layout)) .primary-button:hover{transform:translateY(-1px);box-shadow:0 10px 20px -12px #1e3a8ab3}:root[data-look=playful]:not(:has(.workspace-layout)) .hero-actions .primary-button:hover{box-shadow:0 10px 22px -10px #fbbf24bf}:root[data-look=playful]:not(:has(.workspace-layout)) .add-button:hover:not(:disabled){transform:translateY(-1px)}:root[data-look=playful]:not(:has(.workspace-layout)) .wishlist-control button:hover{transform:scale(1.08)}}@media (prefers-reduced-motion:no-preference){:root[data-look=playful]:not(:has(.workspace-layout)) .hero-card>:not(img){animation:fx-rise .7s var(--out) both}:root[data-look=playful]:not(:has(.workspace-layout)) .hero-card>h1{animation-delay:80ms}:root[data-look=playful]:not(:has(.workspace-layout)) .hero-card>p{animation-delay:.16s}:root[data-look=playful]:not(:has(.workspace-layout)) .hero-card>.hero-actions{animation-delay:.24s}:root[data-look=playful]:not(:has(.workspace-layout)) .hero-card img{animation:fx-settle 1.6s var(--out) both}:root[data-look=playful]:not(:has(.workspace-layout)) .hero-card h1 em{animation:1.6s ease-in-out .7s fx-glow}:root[data-look=playful]:not(:has(.workspace-layout)) .deal-card{animation:fx-rise .7s var(--out) .18s both}:root[data-look=playful]:not(:has(.workspace-layout)) .benefits>div{animation:fx-rise .6s var(--out) both}:root[data-look=playful]:not(:has(.workspace-layout)) .benefits>div:first-child{animation-delay:.3s}:root[data-look=playful]:not(:has(.workspace-layout)) .benefits>div:nth-child(2){animation-delay:.38s}:root[data-look=playful]:not(:has(.workspace-layout)) .benefits>div:nth-child(3){animation-delay:.46s}:root[data-look=playful]:not(:has(.workspace-layout)) .benefits>div:hover .benefit-icon{animation:fx-nudge .5s var(--spring)}:root[data-look=playful]:not(:has(.workspace-layout)) .offer-code{animation:4.5s ease-in-out 1s infinite fx-glint}:root[data-look=playful]:not(:has(.workspace-layout)) .empty-state .empty-icon{animation:2.8s ease-in-out infinite alternate fx-float}@media (max-width:760px){:root[data-look=playful]:not(:has(.workspace-layout)) .cart-bar{animation:fx-slide-up .5s var(--spring)}}:root[data-look=playful]:not(:has(.workspace-layout)) #main .workspace-heading{animation:fx-rise .5s var(--out) both}:root[data-look=playful]:not(:has(.workspace-layout)) .search-popover a{animation:fx-rise .3s var(--out) both}:root[data-look=playful]:not(:has(.workspace-layout)) .search-popover a:nth-child(2){animation-delay:30ms}:root[data-look=playful]:not(:has(.workspace-layout)) .search-popover a:nth-child(3){animation-delay:60ms}:root[data-look=playful]:not(:has(.workspace-layout)) .search-popover a:nth-child(4){animation-delay:90ms}:root[data-look=playful]:not(:has(.workspace-layout)) .search-popover a:nth-child(n+5){animation-delay:.12s}:root[data-look=playful]:not(:has(.workspace-layout)) .account-menu[open] .account-menu-panel,:root[data-look=playful]:not(:has(.workspace-layout)) .popover[open] .popover-panel{transform-origin:100% 0;animation:fx-menu .18s var(--out)}:root[data-look=playful]:not(:has(.workspace-layout)) .add-to-list[open] .popover-panel{transform-origin:0 0}:root[data-look=playful]:not(:has(.workspace-layout)) .share-sheet[open]{animation:fx-sheet .28s var(--out)}:root[data-look=playful]:not(:has(.workspace-layout)) .share-sheet[open]::backdrop{animation:fx-fade .25s var(--out)}@media (max-width:760px){:root[data-look=playful]:not(:has(.workspace-layout)) .share-sheet[open]{animation-name:fx-sheet-up}}:root[data-look=playful]:not(:has(.workspace-layout)) .cart-bar b,:root[data-look=playful]:not(:has(.workspace-layout)) .cart-bar small,:root[data-look=playful]:not(:has(.workspace-layout)) .cart-button b,:root[data-look=playful]:not(:has(.workspace-layout)) .mobile-nav .nav-count{animation:fx-tick .35s var(--out)}:root[data-look=playful]:not(:has(.workspace-layout)) .basket-goals-track progress::-webkit-progress-value{animation:fx-fill .9s var(--out) .15s both;transition:width .5s var(--out)}:root[data-look=playful]:not(:has(.workspace-layout)) .basket-goals-track progress::-moz-progress-bar{animation:fx-fill .9s var(--out) .15s both}:root[data-look=playful]:not(:has(.workspace-layout)) .goal-marker.is-reached{animation:fx-pop .45s var(--spring) .6s both}:root[data-look=playful]:not(:has(.workspace-layout)) .basket-goals.is-done .basket-goals-headline svg{animation:fx-nudge .7s var(--spring) .4s both}:root[data-look=playful]:not(:has(.workspace-layout)) .order-hero-icon{animation:fx-pop .5s var(--spring) .1s both}:root[data-look=playful]:not(:has(.workspace-layout)) .order-tracker li+li:before{transform-origin:0;animation:fx-draw .45s var(--out) both}:root[data-look=playful]:not(:has(.workspace-layout)) .order-tracker li:nth-child(2):before{animation-delay:.15s}:root[data-look=playful]:not(:has(.workspace-layout)) .order-tracker li:nth-child(3):before{animation-delay:.35s}:root[data-look=playful]:not(:has(.workspace-layout)) .order-tracker li:nth-child(4):before{animation-delay:.55s}:root[data-look=playful]:not(:has(.workspace-layout)) .order-tracker .tracker-dot{animation:fx-pop .45s var(--spring) both}:root[data-look=playful]:not(:has(.workspace-layout)) .order-tracker li:nth-child(2) .tracker-dot{animation-delay:.3s}:root[data-look=playful]:not(:has(.workspace-layout)) .order-tracker li:nth-child(3) .tracker-dot{animation-delay:.5s}:root[data-look=playful]:not(:has(.workspace-layout)) .order-tracker li:nth-child(4) .tracker-dot{animation-delay:.7s}:root[data-look=playful]:not(:has(.workspace-layout)) .order-tracker li.is-current>.tracker-dot{animation:fx-pop .45s var(--spring) both, fx-breathe 2.2s ease-out 1s infinite}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){:root[data-look=playful]:not(:has(.workspace-layout)) .section-heading,:root[data-look=playful]:not(:has(.workspace-layout)) .aisle-tile,:root[data-look=playful]:not(:has(.workspace-layout)) .offer-ladder,:root[data-look=playful]:not(:has(.workspace-layout)) .delivery-steps{animation:linear both fx-reveal;animation-timeline:view();animation-range:entry entry 25%}:root[data-look=playful]:not(:has(.workspace-layout)) .section-heading:after{animation:linear both fx-draw;animation-timeline:view();animation-range:entry 30% cover 35%}@media (min-width:761px){:root[data-look=playful]:not(:has(.workspace-layout)) .product-card,:root[data-look=playful]:not(:has(.workspace-layout)) .hub-card{animation:linear both fx-reveal;animation-timeline:view();animation-range:entry entry 25%}:root[data-look=playful]:not(:has(.workspace-layout)) .product-grid>.product-card:nth-child(5n+2),:root[data-look=playful]:not(:has(.workspace-layout)) .aisles>.aisle-tile:nth-child(6n+2),:root[data-look=playful]:not(:has(.workspace-layout)) .hubs>.hub-card:nth-child(4n+2){animation-range:entry 3% entry 28%}:root[data-look=playful]:not(:has(.workspace-layout)) .product-grid>.product-card:nth-child(5n+3),:root[data-look=playful]:not(:has(.workspace-layout)) .aisles>.aisle-tile:nth-child(6n+3),:root[data-look=playful]:not(:has(.workspace-layout)) .hubs>.hub-card:nth-child(4n+3){animation-range:entry 6% entry 31%}:root[data-look=playful]:not(:has(.workspace-layout)) .product-grid>.product-card:nth-child(5n+4),:root[data-look=playful]:not(:has(.workspace-layout)) .aisles>.aisle-tile:nth-child(6n+4),:root[data-look=playful]:not(:has(.workspace-layout)) .hubs>.hub-card:nth-child(4n){animation-range:entry 9% entry 34%}:root[data-look=playful]:not(:has(.workspace-layout)) .product-grid>.product-card:nth-child(5n),:root[data-look=playful]:not(:has(.workspace-layout)) .aisles>.aisle-tile:nth-child(6n+5){animation-range:entry 12% entry 37%}:root[data-look=playful]:not(:has(.workspace-layout)) .aisles>.aisle-tile:nth-child(6n){animation-range:entry 15% entry 40%}}}}@supports (animation-timeline:scroll()){:root[data-look=playful]:not(:has(.workspace-layout)) .header{animation:linear both fx-header;animation-timeline:scroll(root);animation-range:0 96px}@media (prefers-reduced-motion:no-preference){:root[data-look=playful]:not(:has(.workspace-layout)) .header:after{content:"";background:var(--offer);transform-origin:0;height:2px;animation:linear both fx-progress;animation-timeline:scroll(root);position:absolute;bottom:-1px;left:0;right:0;scale:0 1}}}@keyframes fx-rise{0%{filter:blur(6px);translate:0 14px}}@keyframes fx-settle{0%{scale:1.08}}@keyframes fx-glow{45%{text-shadow:0 0 22px #fbbf2499}}@keyframes fx-reveal{0%{translate:0 32px}}@keyframes fx-draw{0%{scale:0 1}}@keyframes fx-header{to{box-shadow:0 10px 28px -20px #0f172a66}}@keyframes fx-pop{0%{scale:.6}}@keyframes fx-bump{40%{scale:1.16}}@keyframes fx-nudge{40%{rotate:-10deg;scale:1.08}}@keyframes fx-progress{to{scale:1}}@keyframes fx-glint{0%,70%{background-position:150% 0}to{background-position:-50% 0}}@keyframes fx-float{to{translate:0 -6px}}@keyframes fx-slide-up{0%{translate:0 120%}}@keyframes fx-tick{0%{filter:blur(3px);translate:0 45%}}@keyframes fx-fill{0%{width:0}}@keyframes fx-breathe{0%{box-shadow:0 0 0 4px var(--brand-tint), 0 0 0 4px #1e3a8a59}70%,to{box-shadow:0 0 0 4px var(--brand-tint), 0 0 0 14px #1e3a8a00}}@keyframes fx-menu{0%{opacity:0;translate:0 -4px;scale:.96}}@keyframes fx-sheet{0%{opacity:0;translate:0 12px;scale:.96}}@keyframes fx-sheet-up{0%{translate:0 100%}}@keyframes fx-fade{0%{opacity:0}}.fx-burst{z-index:1000;pointer-events:none;width:0;height:0;position:fixed}.fx-burst i{background:var(--c);border-radius:50%;width:7px;height:7px;animation:.6s cubic-bezier(.2,.7,.3,1) forwards fx-fly;position:absolute;top:-3.5px;left:-3.5px}.fx-burst.hearts i{color:#e11d48;background:0 0;width:auto;height:auto;font-size:13px;font-style:normal;line-height:1;top:-8px;left:-6px}@keyframes fx-fly{60%{opacity:1}to{opacity:0;transform:translate(var(--dx), var(--dy)) scale(.5)}}.fx-ghost{z-index:1000;pointer-events:none;position:fixed}.fx-ghost img{object-fit:cover;border-radius:14px;width:100%;height:100%;position:absolute;inset:0;box-shadow:0 14px 28px -12px #0f172a8c}.fx-switch{right:12px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:90;color:#fff;min-height:36px;font:600 .8rem/1.2 var(--font-sans);background:#0f172a;border:1px solid #0f172a;border-radius:999px;padding:6px 14px;position:fixed;box-shadow:0 10px 24px -12px #0f172a99}@media (max-width:760px){.fx-switch{bottom:calc(var(--bottom-nav-h) + 96px + env(safe-area-inset-bottom))}}