.product-surf{position:relative;height:320svh;background:var(--paper);color:#293022}.surf-pin{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}.surf-heading{position:absolute;top:96px;left:var(--page-gutter);right:var(--page-gutter);z-index:2;pointer-events:none}.surf-heading p{margin:0 0 16px}.variant-b .surf-heading h2{font-size:var(--type-display)!important;line-height:.94;letter-spacing:-.055em;margin:0}.surf-viewport{position:absolute;inset:24% -15% 0;perspective:1300px;overflow:visible}.surf-camera{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(5deg) rotateZ(-12deg)}.surf-track{position:absolute;left:34%;top:24%;transform-style:preserve-3d;will-change:transform}.surf-card{position:absolute;left:0;top:0;width:280px;height:370px;display:block;background:#ddd6c4;transform:translate3d(calc(var(--card-index)*190px),var(--card-y),var(--card-z)) rotateY(-42deg);transform-style:preserve-3d;outline-offset:8px;color:#293022;transition:filter .3s;backface-visibility:hidden}.surf-card:nth-child(3n+2){background:#c8c9b9}.surf-card:nth-child(3n){background:#ded3c1}.surf-card img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.surf-card-caption{position:absolute;left:0;right:0;bottom:0;padding:16px;background:#eee9df;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s}.surf-card:is(:hover,:focus-visible){z-index:30;filter:brightness(1.06)}.surf-card:is(:hover,:focus-visible) .surf-card-caption{opacity:1;transform:none}.surf-meta{position:absolute;bottom:32px;left:var(--page-gutter);right:var(--page-gutter);display:grid;grid-template-columns:1fr 1fr auto;gap:24px;align-items:center;z-index:5}.surf-meta p{margin:0}.surf-meta>p:nth-child(2){text-align:center}.surf-meta nav{display:flex;align-items:center;gap:20px}.surf-meta button{min-width:44px;min-height:44px;border:1px solid #29302255;background:var(--paper);cursor:pointer}.surf-meta button:disabled{opacity:.35;cursor:default}
@media(max-width:759px){.product-surf{height:260svh}.surf-heading{top:90px}.surf-viewport{inset:25% -20% 0;perspective:900px}.surf-card{width:210px;height:280px}.surf-track{left:25%;top:20%}.surf-meta{grid-template-columns:1fr auto;bottom:24px;gap:16px}.surf-meta>p:nth-child(2){display:none}.surf-current{max-width:19ch}.surf-meta nav{gap:10px}}
@media(prefers-reduced-motion:reduce){.product-surf{height:auto;padding:64px var(--page-gutter)}.surf-pin{position:relative;height:auto;overflow:visible}.surf-heading{position:static;margin-bottom:48px}.surf-viewport,.surf-camera,.surf-track{position:static;transform:none!important;perspective:none}.surf-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}.surf-card{position:relative;transform:none!important;width:100%;height:340px}.surf-card-caption{opacity:1;transform:none;transition:none}.surf-meta{display:none}}
/* Measured reference: left-origin 1000px perspective, upright planes,
   85→70deg yaw and descending Y coordinates. No rotated camera. */
.surf-heading{top:80px;text-align:center}.variant-b .surf-heading h2{font-size:var(--type-heading)!important;max-width:600px;margin:auto}.surf-viewport{inset:0;perspective:none;display:flex;align-items:center}.surf-camera{position:relative;inset:auto;transform:none!important;transform-style:flat;width:100%;height:420px}.surf-track{position:relative;left:0;top:0;perspective:1000px;perspective-origin:50% 50%;transform:none!important;transform-style:preserve-3d}.surf-card{top:auto;bottom:0;left:0;transform-origin:50% 50%;transition:filter .3s;background:#ded7c6}.surf-card img{mix-blend-mode:normal}.surf-meta{background:transparent}.surf-card-caption{font-size:16px!important}.surf-card:is(:hover,:focus-visible){filter:none}
@media(max-width:759px){.surf-heading{top:88px}.surf-camera{height:300px}.surf-meta{bottom:24px}}
@media(prefers-reduced-motion:reduce){.surf-viewport{display:block}.surf-camera,.surf-track{width:auto!important;height:auto!important;perspective:none}.surf-card{width:100%!important;height:340px!important}.surf-heading{text-align:left}.variant-b .surf-heading h2{margin:0}.surf-card-caption{opacity:1}}
@media(prefers-reduced-motion:reduce){.surf-repeat{display:none!important}}
.surf-viewport{inset:0}.surf-card{padding:10px 10px 36px;background:#f6f1e6!important;border:1px solid #d4c9b6;box-sizing:border-box;box-shadow:inset 0 0 5px #ae927b30;transform-style:preserve-3d;will-change:transform}.surf-card img{width:100%;height:100%;background:#ded7c6;object-fit:contain;transform-origin:50% 50%;will-change:transform}.surf-card:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 25%,#ffffff38 48%,transparent 72%);opacity:var(--paper-light,0);border-radius:1px}.surf-meta{display:flex;justify-content:flex-end}.surf-shop-cursor{position:fixed;left:0;top:0;z-index:120;pointer-events:none;display:flex;align-items:center;justify-content:space-between;width:108px;height:46px;padding:0 16px;background:#39382f9e;backdrop-filter:blur(20px);color:#fff;opacity:0;clip-path:inset(0 100% 0 0);transform-origin:left center}.surf-shop-cursor span{display:block;transform:translateY(12px);opacity:0}.product-surf.has-shop-cursor .surf-card{cursor:none}.surf-card:focus-visible{outline:2px solid #39382f}.surf-card:focus-visible:before{content:'Shop ↗';position:absolute;bottom:8px;left:10px;color:#293022;font:500 16px Everett}
@media(hover:none),(prefers-reduced-motion:reduce){.surf-shop-cursor{display:none}.product-surf.has-shop-cursor .surf-card{cursor:pointer}}