/* Mobile uses the same product assets, with controls placed for touch. */
.preview-angles {display: none}
@media (max-width: 620px) {
  .site-header {height: 68px;padding: 0 20px}
  .header-link,.menu-button {min-height:44px;display:flex;align-items:center}
  .menu-button {flex-direction:column;justify-content:center;min-width:44px}
  .menu-button span {margin:4px 0}
  .desktop-link {display:none}
  .mobile-menu {top:68px}
  .hero {height:100svh;min-height:660px;max-height:940px}
  .hero-copy {top:91px}
  .hero-gallery {top:265px;bottom:42px}
  .gallery-stage {height:calc(100% - 150px);min-height:240px}
  .hat-card {width:min(94vw,410px)}
  .gallery-bottom {top:0;height:calc(100% - 150px);align-items:center;padding:0 14px}
  .arrow-button {width:44px;height:44px;flex:none}
  .gallery-meta {top:auto;bottom:-78px;left:50%;right:auto;transform:translateX(-50%);text-align:center;pointer-events:auto}
  .gallery-meta>span {margin-bottom:3px;font-size:9px}
  .gallery-meta strong {font-size:16px}
  .gallery-dots {justify-content:center;gap:0;margin-top:0}
  .gallery-dots button,.gallery-dots button.selected {position:relative;width:44px;height:30px;border-radius:0;background:transparent}
  .gallery-dots button::after {content:"";position:absolute;width:6px;height:6px;border-radius:6px;background:#adb4bf;top:12px;left:19px}
  .gallery-dots button.selected::after {width:20px;left:12px;background:var(--navy)}
  .hero-cta {bottom:20px;min-height:50px}
  .gesture-hint {bottom:0;white-space:nowrap;letter-spacing:.03em}
  .scroll-cue {bottom:12px;font-size:10px}
  .collection {padding-top:52px}
  .section-heading h2 {font-size:44px}
  .product-card-image {height:auto;aspect-ratio:1}
  .product-card-bottom {padding:0 20px 23px}
  .statement {padding:55px 24px 65px;gap:28px}
  .statement-main>p:first-child {line-height:1.9;letter-spacing:.03em}
  .statement h2 {font-size:clamp(38px,11vw,60px);margin-bottom:26px}
  .customizer {overscroll-behavior:contain}
  .customizer-shell {min-height:100svh}
  .customizer-top {position:sticky;top:0;z-index:12;height:56px;padding:env(safe-area-inset-top) 20px 0}
  .customizer-top button {min-width:64px;min-height:44px}
  .customizer-layout {display:block;min-height:0}
  .preview-pane {position:sticky;top:56px;z-index:10;height:245px;min-height:0;padding:16px 20px 37px;border-bottom:1px solid #d4d8d7}
  .preview-caption {top:14px;font-size:9px}
  .preview-image-wrap {width:205px;flex:none}
  .preview-notice {display:none}
  .preview-angles {position:absolute;bottom:7px;left:50%;transform:translateX(-50%);display:flex;gap:4px;white-space:nowrap}
  .preview-angles button {min-height:44px;min-width:80px;padding:8px 12px;border:0;background:transparent;color:#647080;font-size:12px}
  .preview-angles button[aria-pressed="true"] {color:var(--navy);text-decoration:underline;text-underline-offset:6px}
  .config-pane {padding:27px 24px max(32px,env(safe-area-inset-bottom));overflow:visible}
  .config-pane .eyebrow {font-size:10px;margin:0}
  .config-pane h2 {font-size:30px;margin:10px 0 24px;line-height:1.35}
  .color-options,.ink-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .choice {min-width:0;min-height:48px;padding:10px 7px;gap:7px;justify-content:center;font-size:11px}
  .swatch {width:16px;height:16px}
  .digit-wheels {gap:8px}
  .digit-wheel {flex:1;min-width:0;max-width:86px;height:124px}
  .digit-wheel strong {font-size:34px;line-height:36px}
  .wheel-step {height:44px;font-size:16px;flex:none}
  .toggle-digits {min-height:44px;margin-bottom:8px;font-size:12px;padding:8px 0}
  .field-hint {font-size:12px}
  .summary-card {padding:35px 24px;max-height:calc(100svh - 40px);overflow:auto}
  .summary-card h2 {font-size:25px}
  .summary-card>button:first-child {min-width:44px;min-height:44px;top:4px;right:4px}
}
@media (max-width:620px) and (max-height:720px) {
  .preview-pane {height:205px}
  .preview-image-wrap {width:170px}
}

/* Migration: preserve composition, improve controls and accessibility. */
:root {--paper:#fff}
.preview-angles {display:flex;gap:8px;justify-content:center}
.preview-angles button {min-height:44px;padding:8px 16px;border:1px solid #d4d8df;background:transparent;color:var(--navy)}
.preview-angles button[aria-pressed="true"] {background:var(--navy);color:white}
.digit-wheel {touch-action:pan-x}
:focus-visible {outline:2px solid var(--navy);outline-offset:4px}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(min-width:621px) {.preview-angles {position:absolute;bottom:52px;left:50%;transform:translateX(-50%);white-space:nowrap}.preview-angles button {flex:none;min-width:96px}}

/* Reference-photo refresh: longer headline stays on two intentional lines. */
@media(max-width:620px) {.hero h1 {font-size:clamp(29px,7.7vw,46px);line-height:1.3;letter-spacing:-.04em}.hero-copy {top:91px}}