/* Left-side catalog view and exact slogan asset. */
.hat-card .visor-canvas{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:auto;aspect-ratio:722/410}
.visor-canvas{position:relative;display:block;width:100%;aspect-ratio:722/410}
.hat-card .visor-photo,.product-card .visor-photo{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal}
.hat-card .slogan-stamp,.product-card .slogan-stamp,.turn-front .slogan-stamp{position:absolute;left:49%;top:35%;width:27%;height:auto;object-fit:contain;filter:invert(1);mix-blend-mode:screen;pointer-events:none;transform:rotate(7deg);transform-origin:left center}
.hat-card .ivory .slogan-stamp,.product-card .ivory .slogan-stamp,.turn-front.ivory .slogan-stamp{filter:none;mix-blend-mode:multiply}
.product-card-image{display:grid;place-items:center}
.product-card-image .visor-canvas{width:114%}
.product-card:hover .visor-canvas{transform:scale(1.035);transition:transform .5s}
.turn-stage{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.2,.7,.15,1)}
.turn-stage.turned{transform:rotateY(180deg)}
.turn-face{position:absolute;inset:0;backface-visibility:hidden;display:grid;place-items:center}
.turn-front{transform:rotateY(0deg)}
.turn-back{transform:rotateY(180deg)}
.turn-face img.visor-photo{width:100%;height:auto;object-fit:contain;mix-blend-mode:normal}
.turn-front .slogan-stamp{left:49%;top:39%;width:27%;z-index:2}
.turn-back #previewHat{width:100%;height:100%;object-fit:cover}
#digitOverlay{left:20%;top:29%;width:54%;height:13%;transform:rotate(11deg);transform-origin:left center}
.hero-watermark{width:min(95vw,1450px);max-width:none;left:50%;top:50%;opacity:.028;transform:translate(-50%,-50%)}
.hero-watermark img{display:block;width:100%;height:auto}
.hero-gallery{clip-path:none}
.hat-card.before{transform:translate(calc(-50% - min(18vw,160px)),-49%) scale(.65) rotate(-7deg)}
.statement{background-image:linear-gradient(90deg,rgba(12,20,37,.88) 0%,rgba(16,28,50,.70) 55%,rgba(14,25,46,.67) 100%),url("assets/story-golf.png");background-size:cover;background-position:center 58%}
.statement h2{font-size:clamp(64px,7.4vw,112px);line-height:.98;letter-spacing:-.045em;font-weight:600;white-space:nowrap;margin-bottom:43px}
.statement-body{color:#eff1f5}
.customizer-shell{background:#faf9f6;box-shadow:0 36px 100px rgba(6,13,27,.27)}
.customizer-top{background:#faf9f6;border-bottom:1px solid #d9dad7}
.preview-pane{position:sticky;top:65px;align-self:start;height:calc(95svh - 65px);min-height:590px;background:#e9ebe9}
.preview-image-wrap{width:min(98%,650px);overflow:visible}
.preview-image-wrap img{mix-blend-mode:normal}
.preview-caption{color:#4f5b6a;font-weight:600}
.preview-notice{color:#526073;letter-spacing:.035em}
.config-pane{background:#faf9f6;padding:clamp(42px,5vw,78px) clamp(36px,5vw,80px)}
.config-pane h2{font-family:"Noto Serif SC",serif;font-size:clamp(40px,4vw,57px);font-weight:500;line-height:1.32;letter-spacing:-.045em;margin:20px 0 44px;color:#17223b}
.config-pane .eyebrow{color:#7c8797;font-weight:600}
.config-group{border-top-color:#cfd3d3;padding:24px 0 32px}
.group-head{gap:17px;margin-bottom:20px}
.group-head span{font-size:11px;color:#8290a0;font-variant-numeric:tabular-nums}
.group-head h3{font-weight:500;letter-spacing:.04em}
.choice{min-height:50px;background:transparent;border-color:#cbd0d2;padding:11px 15px;transition:border-color .2s,background .2s}
.choice:hover,.choice.selected{background:#fff;border-color:#1f2a44}
.swatch{width:20px;height:20px}
.digit-wheel{height:128px;width:76px;background:#fff;border-color:#d1d5d7}
.digit-wheel strong{font-weight:500;font-size:46px}
.digit-wheel:hover{border-color:#7a879a}
.number-field{margin-top:7px}
.number-field input{font-weight:500;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.config-footer{border-top-color:#cfd3d3}
@media(max-width:900px){.hero-watermark{width:110vw;left:50%;top:45%;opacity:.024}.hero-gallery{clip-path:none}.statement{background-position:40% center}.statement h2{font-size:clamp(48px,9.5vw,82px)}.preview-pane{position:relative;top:auto;height:auto;min-height:380px}.preview-image-wrap{width:min(90%,480px)}.config-pane{padding:34px 24px}}
@media(max-width:620px){.hero-watermark{width:125vw;left:50%;top:48%;opacity:.024}.statement h2{font-size:clamp(38px,10vw,60px)}#digitOverlay{left:20%;top:29%;width:54%;height:13%}.preview-pane{min-height:360px}.preview-image-wrap{width:min(98%,390px)}.config-pane h2{font-size:42px}.digit-wheel{width:67px;height:114px}.digit-wheel strong{font-size:42px}}
.digit-wheels{display:flex;gap:10px;margin-bottom:12px}
.digit-wheel{display:flex;flex-direction:column;align-items:center;justify-content:center;width:74px;height:116px;background:#f0f1f1;border:1px solid #d4d7d9;touch-action:none;user-select:none;cursor:ns-resize}
.digit-wheel strong{font-size:45px;line-height:1;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.wheel-step{border:0;background:none;color:#a9afb5;font-size:18px;line-height:1.2;width:100%;height:28px}
.wheel-step:hover{color:var(--navy)}
.toggle-digits{border:0;border-bottom:1px solid #a4aab2;padding:0 0 4px;background:none;color:var(--navy);font-size:11px;letter-spacing:.08em;margin:1px 0 19px}
@media(max-width:620px){.digit-wheel{width:67px;height:110px}.digit-wheel strong{font-size:42px}.digit-wheels{gap:8px}}
@media(prefers-reduced-motion:reduce){.turn-stage,.hat-card{transition:none!important}}
