/* Product cards are the focus. Narrow stone paths connect them. */
.shelves{
 --stone:linear-gradient(#f6eedf9c,#f6eedf9c),url('assets/garden-path-storybook.webp');
 --path-gap:24px;
 background-color:#e9dfc8;
 background-image:var(--stone);
 background-position:center,center 75%;
 background-size:auto,auto 2100px;
 border:1px solid #ddd5bf;
 border-radius:13px;
 overflow:hidden;
 padding:18px 18px 0;
}
.product-row{margin:0;position:relative}
.row-products{
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:var(--path-gap);padding:0;overflow:visible;
}
.row-products .shelf-column{
 background:var(--paper);border:1px solid #e2dccd;border-radius:8px;
 box-shadow:0 3px 9px #685c3910;overflow:hidden;
}
.row-products .find-content{display:block;width:100%;padding:12px}
.row-products .product{display:flex;flex-direction:column;height:100%}
.row-products .product-visual{
 aspect-ratio:1.22;padding:10px;background:#f0eee7;border-radius:4px;
}
.row-products .product-visual img{mix-blend-mode:normal;object-fit:contain;filter:none}
.row-products .product-index{
 font-size:6px;letter-spacing:.08em;top:7px;left:7px;
 background:#fffdf4e8;max-width:calc(100% - 14px);
}
.row-products .product-meta{font-size:7px;margin:15px 0 8px;letter-spacing:.08em}
.row-products .product h3{font-size:22px;min-height:50px;line-height:1.15;margin:0 0 8px}
.row-products .product-description{font-size:11px;line-height:1.6;min-height:36px;margin:0 0 17px}
.row-products .product-buy{margin-top:auto;padding-top:12px;gap:10px;align-items:center}
.row-products .price-placeholder{font-size:10px;line-height:1.4}
.row-products .price-placeholder small{font-size:7px;margin-top:4px}
.row-products .add-button{
 background:#35533c;color:#fffdf4;padding:10px 12px;min-height:38px;flex-shrink:0;
}
.row-products .add-button:hover{background:#496b4c}
.garden-path{
 height:104px;margin:0 -18px;border:0;border-radius:0;
 background:#e9dfc8 url('assets/garden-path-storybook.webp') center 74%/100% auto no-repeat;
 box-shadow:inset 0 1px 5px #8c805321;
}
.garden-path:before{
 content:'';position:absolute;inset:0;width:auto;height:auto;border:0;border-radius:0;
 background:linear-gradient(#f5efdf25,#f5efdf05 65%,#f3eddd55);z-index:1;
}
.garden-path .path-plants,.garden-path .path-flowers,.garden-path .path-stones,.path-topline{display:none}
.path-bottomline{left:16px;right:16px;bottom:4px;font-size:8px}
.path-status{
 padding:2px 6px;background:#fffbedb8;border-radius:10px;color:#5d704e;
 max-width:55%;font-size:8px;line-height:1.3;
}
.path-play{font-size:8px;background:#fffbedc9;bottom:1px;padding:3px 9px}
.row-basket{width:25px;height:24px;font-size:19px;bottom:0}
.path-package{width:21px;height:21px}
.path-lure{font-size:18px}
.model-loading{font-size:10px;top:38%}
.garden{background:#dce2c9 url('assets/garden-path-storybook.webp') center 64%/auto 100% no-repeat;border-radius:44% 44% 7px 7px}
.storybook-hero-host{position:absolute;inset:0;pointer-events:none}
.storybook-hero-host canvas{display:block;width:100%;height:100%}
.garden .garden-label{bottom:13px;color:#4c623c;text-shadow:0 1px 3px #fff9db;background:#faf5e2a6;width:auto;left:50%;transform:translateX(-50%);white-space:nowrap;padding:3px 12px;border-radius:14px;font-size:10px}
.pet-3d-host{z-index:3}
.pet-3d-host canvas{image-rendering:auto}
.pet-cursor-active[data-species="dog"],.pet-cursor-active[data-species="dog"] canvas{cursor:url('assets/cursor-ball.svg') 2 2,pointer}
.pet-cursor-active[data-species="cat"],.pet-cursor-active[data-species="cat"] canvas{cursor:url('assets/cursor-feather.svg') 2 2,pointer}
.path-lure{width:16px;height:16px;transform:translate(-50%,-50%);top:72%;font-size:0}
.path-lure img{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 2px #62502c25)}
.path-package{display:none!important}
.shelf-note{max-width:860px;margin:20px auto 0;font-size:10px}
.section-heading{margin-bottom:26px}
@media(min-width:701px) and (max-width:1000px){
 .row-products .product-buy{flex-direction:column;align-items:stretch}
 .row-products .add-button{width:100%}
 .row-products .product h3{font-size:20px}
}
@media(max-width:700px){
 .shelves{padding:12px 12px 0;--path-gap:14px;background-size:auto,auto 1700px;border-radius:9px}
 .row-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0;overflow:visible}
 .row-products .shelf-column{min-width:0;flex:none}
 .row-products .find-content{padding:8px}
 .row-products .product-visual{aspect-ratio:1;padding:4px}
 .row-products .product-index{font-size:5px;top:5px;left:5px;letter-spacing:.02em;padding:2px 4px}
 .row-products .product-meta{font-size:5px;margin:11px 0 7px;letter-spacing:.04em}
 .row-products .product h3{font-size:18px;min-height:42px;margin-bottom:7px}
 .row-products .product-description{font-size:9px;min-height:44px;line-height:1.6;margin-bottom:12px}
 .row-products .product-buy{flex-direction:column;align-items:stretch;gap:10px;padding-top:9px}
 .row-products .price-placeholder{font-size:9px}
 .row-products .price-placeholder small{font-size:6px;line-height:1.4}
 .row-products .add-button{width:100%;min-height:34px;font-size:9px;padding:8px}
 .garden-path{height:86px;margin:0 -12px;background-size:auto 152px;background-position:center 73%}
 .path-bottomline{left:9px;right:9px;bottom:4px}
 .path-status{font-size:6px;max-width:51%;padding:2px 5px}
 .path-play{font-size:6px;right:23px;bottom:1px;padding:3px 6px}
 .row-basket{width:19px;height:21px;font-size:16px}
 .path-package{width:17px;height:17px}
 .shelf-note{font-size:9px;text-align:left}
 .floating-basket{right:9px;bottom:9px;width:44px;height:44px;font-size:0;padding:8px;gap:0;justify-content:center;border-radius:50%;overflow:visible}
 .floating-basket>span{display:none}
 .floating-basket:before{content:'♧';font-size:25px;line-height:1}
 .floating-basket .cart-count{position:absolute;top:-3px;right:-3px;min-width:18px;width:18px;height:18px;font-size:9px;background:#e3ead3;color:#304c37;border:1px solid #c4d0b3}
}

/* Toy cursors belong to the path; shopping controls keep familiar pointers. */
.garden-path{touch-action:pan-y}
.garden-path .path-play{cursor:pointer;min-height:30px}
@media(max-width:700px){.garden-path .path-play{min-height:32px;padding:6px 9px;font-size:9px}.path-status{max-width:48%;font-size:8px}}

/* Single-product jump experiment: the wooden plaque is the contact point. */
.bump-test-button{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:34px;margin-top:12px;border:1px solid #b49163;border-bottom:3px solid #9b794e;border-radius:5px;background:linear-gradient(8deg,#d1b184,#eddbb9 60%,#dac098);color:#4e422d;font-size:11px;letter-spacing:.04em;cursor:pointer;box-shadow:inset 0 1px #fff7dc}
.bump-test-button:hover{background:#ead4ad}.bump-test-button:disabled{cursor:progress;color:#655135}.bump-test-button:focus-visible{outline:3px solid #6c8859;outline-offset:3px}
.product-row:has([data-bump]) .garden-path{overflow:visible}
.bump-waiting .bump-test-button{box-shadow:inset 0 1px #fff7dc,0 0 0 3px #e9d5a352}
.bump-hit .bump-test-button{animation:plaque-bump .5s ease-out}
.bump-hit .product-visual{animation:leaf-reveal .7s cubic-bezier(.2,.75,.3,1)}
@keyframes plaque-bump{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-9px) rotate(-1deg)}55%{transform:translateY(2px) rotate(.6deg)}}
@keyframes leaf-reveal{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-14px) scale(1.035)}70%{transform:translateY(2px) scale(.995)}}
@media(prefers-reduced-motion:reduce){.bump-hit .bump-test-button,.bump-hit .product-visual{animation:none}}

.bump-test-button{white-space:nowrap;font-size:10px;gap:4px;padding:6px 3px}

/* Leaf-only storybook surprise box. Product identity stays visible below it. */
.surprise-product .product-visual{position:relative;overflow:hidden}
.storybook-box{position:absolute;inset:12% 13% 8%;display:none;pointer-events:none;isolation:isolate}
.is-boxed .storybook-box{display:block}
.is-boxed .product-image{opacity:0;visibility:hidden}
.is-boxed .product-index{font-size:5px;z-index:6}
.box-body{position:absolute;left:15%;right:15%;top:34%;bottom:14%;border:1px solid #bfa77e;border-radius:3px 3px 8px 8px;background:linear-gradient(105deg,#f2e7cd,#e6d3ad 76%,#cbb58e 77%,#d8c29b);box-shadow:inset 1px 0 #fff9e8,0 8px 12px #715b3020;z-index:2}
.box-body:before{content:'';position:absolute;inset:0 43%;background:#9ca98466;border-left:1px solid #8f9f7966;border-right:1px solid #8f9f7966}
.box-leaf{position:absolute;left:24%;right:24%;top:9%;font-family:Georgia,serif;font-size:clamp(24px,3vw,43px);line-height:1;color:#64794e;transform:rotate(-15deg)}
.box-stamp{position:absolute;bottom:12%;left:0;width:100%;font-size:5px;letter-spacing:.06em;color:#7e7155}
.box-lid{position:absolute;left:11%;right:11%;height:18%;top:25%;border:1px solid #bba17b;border-radius:4px;background:linear-gradient(#f9efdc,#e2cca3);box-shadow:0 3px 0 #977b4b22;z-index:3;transform-origin:15% 80%}
.box-lid:before{content:'';position:absolute;inset:0 44%;background:#a4b08b99}
.box-lid>span{position:absolute;left:42%;right:42%;top:-65%;font-size:23px;color:#7e9061;text-shadow:0 1px #f4ecd7}
.box-ground{position:absolute;bottom:9%;left:8%;right:8%;height:9%;background:radial-gradient(ellipse,#796e462b,transparent 70%);z-index:0}
.box-glow{position:absolute;inset:7% 0 5%;border-radius:50%;background:radial-gradient(ellipse,#fff8dca8,transparent 70%);z-index:0}
.box-controls{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:29px;padding-top:5px}
.box-controls button{font-size:9px;color:#516747;text-decoration:underline;text-underline-offset:3px;min-height:28px;cursor:pointer;background:none;border:0;padding:2px 0}
.box-controls button[hidden]{display:none}
.box-feedback{font-size:8px;color:#7b7e6a;max-width:55%;text-align:right;line-height:1.4}
.bump-hit .is-boxed .box-lid{animation:box-lid-open .6s ease-out both}
.bump-hit .is-boxed .box-body{animation:box-body-dip .65s ease-out both}
.bump-hit .is-boxed .product-image{visibility:visible;position:relative;z-index:5;animation:box-product-rise .68s ease-out both}
.bump-hit .is-boxed .product-visual{animation:none}
@keyframes box-lid-open{to{transform:translate(-7%,-80%) rotate(-22deg);opacity:0}}
@keyframes box-body-dip{to{transform:translateY(25%);opacity:0}}
@keyframes box-product-rise{0%{opacity:0;transform:translateY(32%) scale(.55)}55%{opacity:1;transform:translateY(-5%) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.bump-hit .is-boxed .box-lid,.bump-hit .is-boxed .box-body,.bump-hit .is-boxed .product-image{animation:none}}

/* Compact product shelves: reserve space for the whole path in the viewport. */
.row-products .find-content{padding:10px}
.row-products .product-picture{position:relative;flex:none}
.row-products .product-visual{width:100%;aspect-ratio:1.8;max-height:190px;padding:5px}
.row-products .product-meta{margin:9px 0 5px}
.row-products .product h3{font-size:20px;min-height:46px;margin-bottom:5px}
.row-products .product-description{font-size:11px;min-height:0;line-height:1.45;margin:0 0 9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-products .product-buy{margin-top:0;padding-top:8px;gap:6px;min-height:53px}
.row-products .add-button{min-height:34px;padding:7px 9px;font-size:10px}
.row-products .price-placeholder small{margin-top:2px}
.surprise-product .product-visual{padding-bottom:30px}
.surprise-product .bump-test-button{position:absolute;bottom:26px;left:6px;width:auto;right:6px;margin:0;min-height:25px;padding:3px;font-size:10px;z-index:7}
.box-controls{position:absolute;bottom:0;left:6px;right:6px;min-height:25px;padding:0;z-index:7}
.box-feedback{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.box-controls button{font-size:9px;min-height:25px}
.storybook-box{inset:0 18% 22%}
.box-leaf{left:36%;right:auto;width:24%;height:40%;top:22%;border-radius:80% 0 80% 0;background:#7b8f60;transform:rotate(-24deg)}
.box-leaf:after{content:'';position:absolute;left:48%;top:14%;height:86%;width:1px;background:#dce2b8;transform:rotate(25deg)}
.garden-path{height:88px;margin-top:10px}
.row-products .added-confirmation{background:#68834e}
.falling-find{position:absolute;left:0;top:0;width:28px;height:28px;padding:3px;border:1px solid #bda47a;background:#f5ead2;border-radius:5px;z-index:12;pointer-events:none;box-shadow:0 3px 7px #5e4f3525;will-change:transform}
.falling-find img{width:100%;height:100%;object-fit:contain}
.falling-find span{position:absolute;right:-7px;top:-7px;background:#35533c;color:#fff;padding:1px 4px;font-size:9px;border-radius:8px}
.row-basket.received{animation:plaque-bump .45s ease-out}
@media(min-width:701px) and (max-width:1000px){.row-products .product-buy{flex-direction:row;align-items:center}.row-products .add-button{width:auto}.row-products .product h3{font-size:18px}}
@media(max-width:700px){.row-products .product-visual{aspect-ratio:1.3;max-height:150px}.row-products .product h3{font-size:17px;min-height:39px}.row-products .product-description{font-size:10px;margin-bottom:7px}.row-products .product-buy{flex-direction:column;align-items:stretch;gap:6px;min-height:0}.row-products .add-button{width:100%;min-height:34px}.garden-path{height:80px;margin-top:8px}.surprise-product .bump-test-button{font-size:9px;min-height:24px}.box-controls button{font-size:8px}.row-products .find-content{padding:8px}}

.row-products .product-visual{height:clamp(120px,15vw,165px);aspect-ratio:auto;min-height:120px}.row-products .product-visual img{height:100%;max-height:100%}.surprise-product .bump-test-button{left:10px;right:10px}@media(max-width:700px){.row-products .product-visual{height:125px;min-height:125px}}

.surprise-product:not(.is-boxed) .product-visual{padding:5px}.surprise-product:not(.is-boxed) .bump-test-button{left:auto;bottom:5px;right:5px;min-height:22px;font-size:9px;padding:2px 6px;background:#fff9e9eb;border-width:1px}.surprise-product:not(.is-boxed) .box-controls{right:auto;bottom:3px;background:#fffaf0c9;padding:0 3px;border-radius:3px}

.shop-mode-control{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;color:#566b4a;font-size:11px}
.shop-mode-control>div{display:flex;padding:3px;background:#e6eadc;border:1px solid #d1d9c4;border-radius:24px}
.shop-mode-control button{padding:8px 18px;min-height:35px;border:0;border-radius:20px;background:none;cursor:pointer;color:#496142;font-size:11px}
.shop-mode-control button[aria-pressed="true"]{background:#35533c;color:#fffaf0;box-shadow:0 2px 4px #35482f1a}
.shop-mode-control button:focus-visible{outline:2px solid #8f9f70;outline-offset:2px}
.shop-mode-control p{margin:0;font-size:10px;color:#7b816e}
body[data-shop-mode="shopping"] .bump-test-button,body[data-shop-mode="shopping"] .box-controls,body[data-shop-mode="shopping"] .path-play{display:none}
body[data-shop-mode="shopping"] .surprise-product .product-visual{padding:5px}
@media(max-width:700px){.shop-mode-control{gap:8px}.shop-mode-control>span{display:none}.shop-mode-control p{width:100%;font-size:10px}.shop-mode-control button{min-height:40px}}

/* Collection-wide product flow */
.play-tools{display:flex;gap:16px;margin:-6px 0 14px}.play-tools button{font-size:11px;background:none;text-decoration:underline;text-underline-offset:4px;padding:7px 0}.play-tools button[hidden]{display:none}.play-tools:has(button[hidden]):not(:has(button:not([hidden]))){display:none}
.quantity-control input{width:48px;min-width:0;height:28px;border:0;border-inline:1px solid #d2d9c7;background:transparent;text-align:center;font:12px Arial;color:#304c37;appearance:textfield}.quantity-control input::-webkit-inner-spin-button{appearance:none}.quantity-control button:disabled{opacity:.4}
.cart-product-link{background:none;padding:0;text-align:left;font:inherit}.cart-product-link:hover{text-decoration:underline}.detail-quantity{display:flex;justify-content:space-between;align-items:center;margin:15px 0;font-size:12px}.detail-quantity input{width:70px;padding:8px;border:1px solid #c8d0bb;border-radius:4px;background:#fffdf7;color:#304c37}.detail-view-cart{background:none;font-size:12px;text-decoration:underline;padding:12px 0;width:100%}
[data-in-basket]{text-align:right}.empty-cart .primary-button{margin-top:12px;font-size:11px}
@media(max-width:700px){.play-tools button{min-height:40px}.quantity-control{height:38px}.quantity-control button{height:36px;width:36px}.quantity-control input{height:36px}.row-products .add-button{min-height:40px}}

/* The toy itself is the pointer; no duplicate lure follows underneath it. */
@media(hover:hover) and (pointer:fine){
 body[data-shop-mode="play"]:not(.motion-off) .garden-path[data-species="cat"],body[data-shop-mode="play"]:not(.motion-off) .garden-path[data-species="cat"] canvas{cursor:url('assets/cursor-cat-wand.svg?v=pet-scale-1') 6 17,pointer}
 body[data-shop-mode="play"]:not(.motion-off) .garden-path[data-species="dog"],body[data-shop-mode="play"]:not(.motion-off) .garden-path[data-species="dog"] canvas{cursor:url('assets/cursor-dog-rope.svg?v=pet-scale-1') 9 9,pointer}
 body[data-shop-mode="play"]:not(.motion-off) .garden-path .path-lure{display:none!important}
 body[data-shop-mode="play"]:not(.motion-off) .garden-path button{cursor:pointer}
}
body[data-shop-mode="shopping"] .garden-path,body[data-shop-mode="shopping"] .garden-path canvas{cursor:default}
.path-play{display:inline-flex;align-items:center;gap:5px}.path-play .toy-cue{display:inline-block;width:14px;height:14px;vertical-align:middle;pointer-events:none}