/* A single beanie owns each screen. The document scroll stays inside the gallery. */
.beanie-viewer-page{height:100svh;height:100dvh;overflow:hidden;background:#b9b6b4;color:#141413}
.beanie-header{position:fixed;inset:0 0 auto;z-index:5;height:86px;padding:12px var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:linear-gradient(#b9b6b4e6,#b9b6b400);pointer-events:none}
.beanie-header a{pointer-events:auto;font-size:14px;padding:10px 0}.beanie-header .brand{padding:0}.beanie-header .brand img{width:158px}.beanie-access{justify-self:end}.beanie-back{justify-self:start}.beanie-header a:not(.brand):hover{text-decoration:underline;text-underline-offset:5px}
#beanie-viewer{position:fixed;inset:0;height:100%;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior-y:contain;scrollbar-width:none;scroll-padding:0;isolation:isolate;-webkit-overflow-scrolling:touch}
#beanie-viewer::-webkit-scrollbar{display:none}#beanie-viewer:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.beanie-panel{position:relative;height:100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#b9b6b4}
.beanie-panel[data-beanie="mocha"]{background:#bdb7b1}.beanie-panel[data-beanie="slate"]{background:#b7b8b8}
.beanie-art{position:absolute;inset:78px 0 120px;display:grid;place-items:center;perspective:1400px;pointer-events:none}
.beanie-visual{width:min(86vw,calc((100svh - 195px)*.91));width:min(86vw,calc((100dvh - 195px)*.91));aspect-ratio:.91;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease}
.beanie-visual img{width:100%;height:100%;object-fit:cover;object-position:center 62%;mask-image:radial-gradient(ellipse 74% 72% at 50% 54%,#000 68%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 74% 72% at 50% 54%,#000 68%,transparent 100%)}
.beanie-caption{position:absolute;left:var(--gutter);right:var(--gutter);bottom:max(60px,calc(env(safe-area-inset-bottom) + 42px));display:flex;justify-content:space-between;gap:24px;align-items:end}.beanie-count{font-size:12px;letter-spacing:.1em;margin:0 0 10px}.beanie-caption h2{font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-.045em;margin:0 0 10px}.beanie-type{font-size:14px;margin:0;color:#393735}.beanie-detail-button{background:#ece9e0bf;color:var(--ink);border:1px solid #14141365;min-height:48px;min-width:120px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:14px}.beanie-detail-button:hover{background:var(--bone)}
.next-beanie{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:8px 12px;font-size:13px;white-space:nowrap}.next-beanie:hover{text-decoration:underline;text-underline-offset:4px}
.beanie-pagination{position:fixed;z-index:6;right:calc(var(--gutter) - 14px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column}.beanie-pagination a{width:44px;height:44px;display:grid;place-items:center}.beanie-pagination a span{width:7px;height:7px;border:1px solid #14141380;border-radius:50%;transition:transform .2s,background .2s}.beanie-pagination a[aria-current="true"] span{background:var(--ink);border-color:var(--ink);transform:scale(1.3)}
/* Details stay one tap away without interrupting the color sequence. */
#beanie-details{inset:0 0 0 auto;margin:0;width:min(480px,100vw);max-width:100vw;height:100svh;height:100dvh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;border:0;padding:0;background:var(--bone);color:var(--ink)}
#beanie-details::backdrop{background:#0005;backdrop-filter:blur(4px)}.beanie-sheet-header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:12px 28px;background:var(--bone);border-bottom:1px solid var(--line);z-index:2;font-size:12px;letter-spacing:.08em}.beanie-sheet-header button{background:none;border:0;color:var(--ink);font-size:14px;letter-spacing:0;padding:10px 0;text-decoration:underline;text-underline-offset:4px}
.sheet-gallery{background:var(--bone)}.sheet-image{height:290px;overflow:hidden}.sheet-image img{width:100%;height:100%;object-fit:cover;object-position:center 64%;transition:transform .3s}.sheet-image[data-view="knit"] .angle-crop{transform:scale(1.75);transform-origin:50% 68%}.sheet-image[data-view="collection"]{height:340px}.sheet-image[data-view="collection"] img{object-fit:contain;object-position:center;transform:none}.sheet-views{display:flex;justify-content:center;gap:22px;padding:0 20px 12px}.sheet-views button{padding:9px 5px;background:none;color:var(--ink);border:0;border-bottom:1px solid transparent;font-size:14px}.sheet-views button[aria-pressed="true"]{border-bottom-color:var(--ink)}
.beanie-info{padding:30px 28px 40px}.beanie-info .eyebrow{font-size:12px;margin-bottom:15px}.beanie-info h2{font-size:44px;letter-spacing:-.045em;line-height:1.1;margin:0 0 12px}.beanie-info .product-type{font-size:18px}.beanie-info .detail-description{margin:20px 0}.beanie-info .color-links{margin:24px 0}.beanie-info details{scroll-margin-top:80px}.beanie-info [data-detail-color][aria-current]{border-color:var(--ink)}.beanie-viewer-page.modal-open #beanie-viewer{overflow:hidden}
@media(max-width:700px){.beanie-header{height:74px;padding:10px 20px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.beanie-header .brand img{width:128px}.beanie-header a{font-size:13px}.beanie-art{inset:74px 0 153px}.beanie-visual{width:min(100vw,calc((100svh - 195px)*.91));width:min(100vw,calc((100dvh - 195px)*.91))}.beanie-caption{left:24px;right:24px;bottom:max(66px,calc(env(safe-area-inset-bottom) + 48px));gap:18px}.beanie-caption h2{font-size:36px}.beanie-count{font-size:12px;margin-bottom:9px}.beanie-type{font-size:13px}.beanie-detail-button{min-width:110px;padding:12px 16px;font-size:14px}.next-beanie{font-size:13px;bottom:max(21px,env(safe-area-inset-bottom))}.beanie-pagination{right:5px}.beanie-pagination a{height:38px;width:38px}.beanie-pagination a span{width:6px;height:6px}#beanie-details{width:100vw}.beanie-sheet-header{padding:10px 24px}.beanie-info{padding:28px 24px 40px}.sheet-image{height:265px}}
@media(max-height:540px) and (min-width:600px){.beanie-header{height:64px}.beanie-art{inset:65px 0 35px}.beanie-visual{width:calc((100dvh - 90px)*.8)}.beanie-caption{bottom:38px}.beanie-caption h2{font-size:34px}.beanie-type{display:none}.next-beanie{bottom:6px}}
@media(prefers-reduced-motion:reduce){#beanie-viewer{scroll-behavior:auto}.beanie-visual{transform:none!important}.beanie-visual,.beanie-pagination a span,.sheet-image img{transition:none}}
/* Transparent product cutouts inherit the existing page color. */
.beanie-art{inset:78px 0 210px;display:block;pointer-events:auto}
.angle-track{display:flex;position:relative;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom}
.angle-track::-webkit-scrollbar{display:none}.angle-track:focus-visible{outline:2px solid #14141380;outline-offset:-4px}
.angle-slide{flex:0 0 100%;min-width:0;height:100%;display:grid;place-items:center;scroll-snap-align:start;scroll-snap-stop:always}
.angle-slide .beanie-visual{width:min(90vw,calc((100svh - 295px)*1.09));width:min(90vw,calc((100dvh - 295px)*1.09));aspect-ratio:380/348}
.angle-controls{position:absolute;bottom:160px;left:50%;transform:translateX(-50%);display:flex;gap:24px;z-index:2}
.angle-controls button{background:none;border:0;border-bottom:1px solid transparent;padding:12px 4px;font-size:14px;color:var(--ink);min-height:44px}.angle-controls button[aria-pressed="true"]{border-color:var(--ink)}
.sheet-image{display:grid;place-items:center}.sheet-image .angle-crop{width:min(94%,310px)}.sheet-views{gap:12px}.sheet-views button{font-size:14px}
@media(max-width:700px){.beanie-art{inset:78px 0 206px}.angle-slide .beanie-visual{width:min(98vw,calc((100svh - 284px)*1.09));width:min(98vw,calc((100dvh - 284px)*1.09))}.angle-controls{bottom:166px;gap:23px}.sheet-image .angle-crop{width:min(94%,285px)}}
@media(max-height:540px) and (min-width:600px){.beanie-art{inset:64px 0 90px}.angle-slide .beanie-visual{width:calc((100dvh - 170px)*1.09)}.angle-controls{bottom:38px}}
@media(prefers-reduced-motion:reduce){.angle-track{scroll-behavior:auto}}