@font-face { font-family: Manrope; src: url('assets/moormi/03-fonts/Manrope-variable.woff2') format('woff2'); font-style: normal; font-weight: 200 800; font-display: swap; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sand); color: var(--ink); font-family: Manrope, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
nav { display: flex; gap: 38px; }
nav, .cart { font-size: 11px; letter-spacing: .25em; font-weight: 400; }
.cart { justify-self: end; }
h1, h2 { font-family: Manrope, sans-serif; font-weight: 400; }
.collection { position: relative; width: 100%; overflow: hidden; color: var(--ink); }
.collection > img { display: block; width: 100%; height: auto; }
.collection-copy { position: absolute; top: 3%; left: var(--gutter); width: calc(100% - 2 * var(--gutter)); text-align: left; transition: opacity 800ms cubic-bezier(.22,1,.36,1), transform 800ms cubic-bezier(.22,1,.36,1); }
.collection-copy.pending { opacity: 0; transform: translateY(18px); }
h2 { font-size: clamp(48px, 5vw, 96px); letter-spacing: .14em; line-height: 1.1; margin: 0 0 22px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.product { position: relative; isolation: isolate; aspect-ratio: 2 / 3; overflow: hidden; color: var(--ink); }
.product > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 400ms cubic-bezier(.22,1,.36,1), filter 400ms cubic-bezier(.22,1,.36,1); }
.product:is(:hover, :focus-visible) > img { transform: scale(1.025); filter: blur(2px); }
.product:focus-visible { outline: 1px solid var(--ink); outline-offset: -5px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .collection-copy { transition: none; }
  .product > img { transition: none; }
  .product:is(:hover, :focus-visible) > img { transform: none; }
}

/* Stage 3: desktop product view */
body.view-open { overflow: hidden; }
.product[role="button"] { cursor: pointer; }
.product-view { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; max-height: none; padding: 0; border: 0; margin: 0; color: #19110d; background: #d9dede; }
.product-view::backdrop { background: #19110d; }
.view-layout { display: grid; grid-template-columns: 65% 35%; height: 100%; }
.view-gallery { position: relative; min-width: 0; height: 100%; background: #b9bfbf; }
.view-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.view-close { position: absolute; top: 22px; right: 28px; z-index: 2; background: none; border: 0; color: inherit; font-size: 34px; font-weight: 200; cursor: pointer; width: 44px; height: 44px; }
.view-copy { align-self: center; padding: 70px 12%; }
.view-number { font-size: 12px; letter-spacing: .2em; margin: 0 0 24px; }
.view-copy h2 { font-size: clamp(36px, 4vw, 76px); letter-spacing: .08em; margin-bottom: 20px; }
.view-keywords { font-size: 10px; letter-spacing: .16em; line-height: 1.8; }
.view-description { font-size: 16px; line-height: 1.7; margin: 38px 0 26px; }
.view-materials { font-size: 12px; line-height: 1.8; }
.view-price { font-family: Manrope, sans-serif; font-size: 30px; margin: 34px 0 26px; }
.view-add { width: 100%; border: 1px solid #19110d; background: #eef1f1; color: #19110d; padding: 20px 12px; font-size: 11px; letter-spacing: .22em; cursor: not-allowed; }
.gallery-controls { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 24px; color: #19110d; background: #d9dedee6; padding: 6px 14px; }
.gallery-controls button { border: 0; background: none; color: inherit; font-size: 22px; width: 36px; height: 36px; cursor: pointer; }
.gallery-count { font-size: 11px; letter-spacing: .2em; white-space: nowrap; }
.product-view button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* Stage 4: desktop cart drawer */
button.cart { background: none; border: 0; padding: 10px 0; color: inherit; font-family: Manrope, sans-serif; cursor: pointer; }
.view-add:not(:disabled) { cursor: pointer; }
body.cart-open { overflow: hidden; }
.cart-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: 400px; max-width: 100vw; height: 100vh; max-height: none; padding: 30px; border: 0; color: #19110d; background: #d9dede; }
.cart-drawer[open] { display: flex; flex-direction: column; }
.cart-drawer::backdrop { background: #0003; backdrop-filter: blur(3px); }
.cart-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 26px; }
.cart-heading h2 { font-family: Manrope, sans-serif; font-size: 12px; letter-spacing: .2em; margin: 0; }
.cart-close { border: 0; background: none; color: inherit; font-size: 30px; width: 36px; height: 36px; cursor: pointer; }
.cart-items { overflow-y: auto; flex: 1; }
.cart-item { position: relative; display: grid; grid-template-columns: 84px 1fr auto; gap: 18px; padding: 22px 0; border-top: 1px solid #19110d26; }
.cart-item > img { display: block; width: 84px; height: 126px; object-fit: cover; }
.cart-item h3 { font-family: Manrope, sans-serif; font-size: 19px; font-weight: 400; letter-spacing: .1em; margin: 0 0 10px; }
.cart-item p { margin: 0; font-size: 12px; }
.cart-quantity { display: flex; align-items: center; gap: 13px; margin-top: 14px; font-size: 12px; }
.cart-quantity button { width: 26px; height: 26px; border: 1px solid #19110d33; background: none; color: inherit; cursor: pointer; }
.cart-quantity button:disabled { opacity: .35; cursor: default; }
.cart-remove { padding: 0; margin-top: 14px; border: 0; background: none; color: inherit; font-size: 9px; letter-spacing: .12em; cursor: pointer; }
.cart-bottom { border-top: 1px solid #19110d33; padding-top: 24px; }
.cart-subtotal { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .12em; margin: 0 0 24px; }
.cart-total { font-size: 21px; letter-spacing: 0; }
.cart-checkout { width: 100%; padding: 18px; background: #eef1f1; color: #19110d; border: 0; font-size: 11px; letter-spacing: .2em; opacity: .5; cursor: not-allowed; }
.cart-empty { font-size: 14px; margin-top: 35px; }
.cart-drawer button:focus-visible { outline: 1px solid #19110d; outline-offset: 3px; }

/* Stage 5: brand and footer */
.brand-section { background: transparent; color: #19110d; }
.brand-story { display: block; }
.brand-photo { position: relative; overflow: hidden; aspect-ratio: 1.1; }
.brand-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.brand-copy { background: transparent; align-self: center; padding: 55px var(--gutter); }
.brand-copy h2 { font-size: clamp(42px, 4.4vw, 80px); line-height: 1.06; letter-spacing: -.025em; margin: 0 0 35px; }
.brand-copy > p { font-size: 16px; line-height: 1.85; max-width: 380px; margin: 0; }
.footer-copyright { font-size: 9px; letter-spacing: .18em; margin: 0; }
.footer a:focus-visible { outline-color: #19110d; }

/* Supplied footer photograph and centered product crop. */
.view-layout { min-height: 0; }
.view-gallery { min-height: 0; overflow: hidden; }
.view-image { object-fit: cover; object-position: 50% 50%; }
.view-copy { max-height: 100vh; overflow-y: auto; }

/* Brand assets only. All original layout and interaction rules above are retained. */
.footer-wordmark img { display: block; height: 1em; width: 100%; object-fit: contain; }
button, input, select, textarea { font-family: Manrope, sans-serif; }

/* Phone and tablet adaptation. Original desktop rules above stay unchanged. */
@media (max-width: 900px) {
  .collection-copy h2 { font-size: clamp(28px, 6vw, 48px); margin-bottom: 12px; letter-spacing: .1em; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-story { grid-template-columns: 1fr; }
  .brand-copy { padding: 48px var(--gutter); }
  .brand-copy h2 { font-size: clamp(38px, 7vw, 56px); margin-bottom: 24px; }
  .brand-copy > p { max-width: 540px; font-size: 15px; line-height: 1.8; }

  .product-view { width: 100%; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  .view-layout { display: block; height: auto; }
  .view-gallery { height: min(150vw, 76svh); min-height: 300px; }
  .view-image { object-fit: contain; }
  .view-close { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; background: #d9dedeee; border-radius: 50%; }
  .view-copy { max-height: none; overflow: visible; padding: 32px var(--gutter) max(32px, env(safe-area-inset-bottom)); }
  .view-number { margin-bottom: 16px; }
  .view-copy h2 { font-size: 36px; margin-bottom: 16px; }
  .view-description { margin: 24px 0 18px; }
  .view-price { margin: 24px 0; }
  .gallery-controls { bottom: 16px; gap: 16px; padding: 4px 10px; }
  .gallery-controls button { width: 44px; height: 44px; }
  .view-add { min-height: 52px; }
  .cart-drawer { height: 100dvh; padding: max(16px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
  .cart-heading { padding-bottom: 16px; flex-shrink: 0; }
  .cart-close { width: 44px; height: 44px; }
  .cart-items { min-height: 0; overscroll-behavior: contain; }
  .cart-item { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; }
  .cart-item > img { width: 64px; height: 96px; }
  .cart-item h3 { font-size: 17px; }
  .cart-quantity { gap: 10px; }
  .cart-quantity button { width: 44px; height: 44px; flex-shrink: 0; }
  .cart-remove { min-height: 44px; margin-top: 4px; }
  .cart-bottom { flex-shrink: 0; padding-top: 18px; }
  .cart-subtotal { margin-bottom: 18px; }
  .cart-checkout { min-height: 52px; font-size: 10px; letter-spacing: .14em; }
}

@media (max-width: 599px) {
  .product-grid { grid-template-columns: minmax(0, 1fr); }
  .cart-drawer { width: 100%; }
}

/* On small screens a tap opens the dialog without a sticky hover overlay. */
@media (max-width: 900px) {
  .product:is(:hover, :focus-visible) > img { filter: none; transform: none; }
}



/* Stage 01: readability and purchase controls within the existing layout. */
.collection-copy { z-index: 1; }
.collection-copy h2 { display: inline-block; max-width: 100%; padding: 0; margin: 0; font-size: clamp(18px, 2.5vw, 40px); line-height: 1; background: transparent; }
.product:is(:hover, :focus-visible) > img { filter: none; }
.brand-copy > p { font-size: 17px; line-height: 1.7; }
.footer-top, .footer nav, .footer-policies { font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: .05em; }
.footer-copyright { font-size: 12px; letter-spacing: .05em; }

.view-gallery { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.view-image { min-height: 0; object-fit: contain; }
.gallery-controls { position: static; transform: none; justify-self: center; gap: 20px; margin: 12px 0; padding: 0 10px; background: #d9dede; }
.gallery-controls button { width: 44px; height: 44px; }
.gallery-count { font-size: 13px; font-weight: 500; letter-spacing: .06em; }
.view-number { font-size: 14px; letter-spacing: .08em; }
.view-keywords { font-size: 13px; font-weight: 500; line-height: 1.6; letter-spacing: .04em; }
.view-description { font-size: 17px; line-height: 1.65; }
.view-materials { font-size: 14px; line-height: 1.6; }
.view-add, .mobile-add { min-height: 52px; padding: 16px 20px; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: .02em; }

.mobile-purchase { display: none; }
.mobile-purchase[hidden] { display: none; }
.cart-heading h2 { font-size: 14px; font-weight: 600; letter-spacing: .05em; }
.cart-item p, .cart-quantity { font-size: 14px; }
.cart-quantity button { min-width: 44px; min-height: 44px; }
.cart-remove { min-height: 44px; font-size: 12px; font-weight: 500; letter-spacing: .03em; }
.cart-close { width: 44px; height: 44px; }
.cart-subtotal { font-size: 14px; font-weight: 500; letter-spacing: .03em; }
.cart-checkout { min-height: 52px; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: .02em; }
.cart-preview-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: #19110d; }
.cart-empty { font-size: 16px; }

@media (max-width: 900px) {
  .brand-copy > p { font-size: 16px; }
  .footer-top, .footer nav, .footer-policies { font-size: 13px; letter-spacing: .04em; }
  .view-gallery { height: min(calc(150vw + 68px), 72svh); min-height: 300px; }
  .view-copy { padding-bottom: calc(var(--purchase-space, 136px) + env(safe-area-inset-bottom)); }
  .view-description { font-size: 16px; }
  .view-add { font-size: 15px; }
  .mobile-purchase { position: fixed; z-index: 3; inset: auto 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 1.5fr); align-items: center; gap: 16px; padding: 14px 24px max(14px, env(safe-area-inset-bottom)); color: #19110d; background: #d9dede; border-top: 1px solid #8e999b; }
  .mobile-purchase p { margin: 0; }
  .mobile-product-name { display: block; font-size: 12px; font-weight: 500; letter-spacing: .06em; }
  .mobile-product-price { display: block; margin-top: 4px; font-size: 23px; font-weight: 500; line-height: 1.2; }
  .mobile-add { border: 1px solid #19110d; background: #eef1f1; color: #19110d; cursor: pointer; }
  .cart-checkout { font-size: 14px; }
  .cart-bottom { padding-top: 16px; }
}

@media (max-width: 359px) {
  .mobile-purchase { grid-template-columns: minmax(0, 1fr) 172px; gap: 12px; padding-left: 20px; padding-right: 20px; }
}


/* English / controls refinement: user-specified 12px corners, neutral gray glass.
   Photography, sections and panels retain their straight edges. */
:root {
  --ink: #19110d;
  --paper: #eef1f1;
  --sand: #d9dede;
  --muted: #19110d;
  --brand-sand: var(--sand);
  --gutter: 48px;
  --control-radius: 12px;
  --control-ink: #19110d;
  --control-paper: #eef1f1;
  --control-line: rgba(142,153,155,.40);
  --control-transition: 220ms ease;
}
.discover, .view-add, .mobile-add, .cart-checkout,
.view-close, .cart-close, .gallery-controls button, .cart-quantity button {
  border-radius: var(--control-radius);
  transition: background-color var(--control-transition), border-color var(--control-transition), color var(--control-transition);
}

.view-add, .mobile-add {
  min-height: 48px;
  padding: 13px 20px;
  border: 1px solid var(--control-ink);
  background: var(--control-paper);
  color: var(--control-ink);
}
.gallery-controls {
  padding: 0;
  gap: 16px;
  background: transparent;
}
.gallery-controls button, .view-close, .cart-close, .cart-quantity button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--control-line);
  background: rgba(238,241,241,.68);
  color: var(--control-ink);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.gallery-controls button[hidden] { display: none; }
.gallery-count { padding: 0 4px; }
.cart-quantity { gap: 10px; }
.cart-quantity button { width: 44px; height: 44px; font-size: 18px; }
.cart-checkout {
  min-height: 48px;
  padding: 13px 20px;
  background: #b9bfbf;
  color: #19110d;
  border: 1px solid rgba(142,153,155,.30);
  opacity: 1;
}
.cart-drawer::backdrop { background: rgba(25,17,13,.24); -webkit-backdrop-filter: blur(3px); }
.header .cart, .cart-remove { border-radius: var(--control-radius); }
@media (hover: hover) {
  .view-add:not(:disabled):hover, .mobile-add:hover { background: #d9dede; border-color: #19110d; }
  .gallery-controls button:hover, .view-close:hover, .cart-close:hover, .cart-quantity button:not(:disabled):hover {
    background: rgba(238,241,241,.90);
    border-color: rgba(142,153,155,.72);
  }
}
.product-view button:focus-visible, .cart-drawer button:focus-visible { outline: 2px solid var(--control-ink); outline-offset: 3px; }
@media (max-width: 900px) {
  .mobile-purchase {
    background: rgba(217,222,222,.88);
    border-top-color: rgba(142,153,155,.35);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .gallery-controls button, .view-close, .cart-close, .cart-quantity button { background: #d9dede; }
  .mobile-purchase { background: #d9dede; }
}
@media (prefers-reduced-motion: reduce) {
  .discover, .view-add, .mobile-add, .cart-checkout,
  .view-close, .cart-close, .gallery-controls button, .cart-quantity button { transition: none; }
}



/* V2: shared text axes, live product name/price, and the cropped footer. */
.product-shade { display: none; }
.product-info { position: absolute; inset: auto var(--gutter) max(24px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; pointer-events: none; }
.product h3 { margin: 0; font-size: 1.5rem; font-weight: 500; line-height: 1.4; letter-spacing: .04em; }
.product-price { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.4; letter-spacing: .02em; padding: 0; border-radius: 0; color: var(--ink); background: transparent; border: 0; }
.closing-scene { background: var(--sand) url('assets/scenes/footer-neutral-v06.webp') center bottom / cover no-repeat; }
.footer { background: transparent; color: var(--ink); padding: 48px var(--gutter) max(24px, env(safe-area-inset-bottom)); }
.footer-top { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; font-size: .875rem; font-weight: 500; line-height: 1.5; letter-spacing: .04em; }
.footer-policies { display: flex; flex-direction: column; gap: 12px; }
.footer [aria-disabled] { overflow-wrap: anywhere; color: var(--muted); cursor: default; }
.footer-preview { color: var(--muted); font-size: .875rem; line-height: 1.5; margin: 24px 0 0; }
.footer-wordmark { font-size: 15vw; line-height: 1; margin: 64px 0 48px; }
.brand-photo::after { content: none; }

/* HERO v3: transparent controls and copy; original photograph and SVG retained. */
.hero { position: relative; min-height: 100dvh; width: 100%; padding: max(180px, 40dvh) var(--gutter) 64px; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); color: var(--ink); }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% center; transform: scale(1.035); }
.hero { overflow: hidden; }
.header { position: absolute; z-index: 3; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 24px max(var(--gutter), env(safe-area-inset-right)) 24px max(var(--gutter), env(safe-area-inset-left)); }
.wordmark { display: flex; align-items: center; justify-self: start; min-height: 44px; }
.wordmark img { display: block; width: 220px; height: auto; }
.header nav, .header .cart { font-size: .875rem; font-weight: 500; letter-spacing: .04em; }
.header nav a, .header .cart { min-height: 44px; display: inline-flex; align-items: center; }
.header .cart { justify-self: end; justify-content: center; min-width: 44px; gap: 4px; white-space: nowrap; }
.cart-icon { display: none; width: 20px; height: 20px; flex: none; }
.header nav[hidden] { display: none; }
.menu-toggle, .menu-toggle[hidden] { display: none; }
.hero-action { position: relative; width: fit-content; max-width: 100%; }
.hero-copy { position: relative; z-index: 2; width: fit-content; max-width: 100%; }
#hero-title { width: min(45vw, 760px); max-width: 100%; line-height: 1; margin: 0; }
#hero-title img { display: block; width: 100%; height: auto; }
.cart-toggle { position: fixed; z-index: 5; top: max(16px, env(safe-area-inset-top)); right: max(var(--gutter), env(safe-area-inset-right)); display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 44px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .02em; cursor: pointer; }
.cart-toggle svg { display: block; flex: none; }
.cart-toggle-count { min-width: 1ch; font-variant-numeric: tabular-nums; }
.cart-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.discover { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 13px 24px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font-size: .875rem; font-weight: 500; line-height: 1.4; letter-spacing: .01em; }
.discover:focus-visible, .menu-toggle:focus-visible, .header .cart:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) {
  .discover:hover { color: var(--muted); border-color: var(--muted); }
}
@media (max-width: 900px) {
  :root { --gutter: 32px; }
  .hero { padding-top: max(140px, 18dvh); padding-bottom: 48px; }
  .hero-image { object-position: 76% center; }
  .header { grid-template-columns: minmax(180px, 1fr) auto 44px; gap: 8px; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: 8px; }
  .wordmark img { width: 180px; }
  .header .cart { grid-column: 2; grid-row: 1; font-size: .75rem; letter-spacing: 0; }
  .menu-toggle { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
  .menu-toggle span { width: 20px; height: 1px; background: currentColor; }
  .header nav { position: absolute; top: 100%; left: var(--gutter); right: var(--gutter); display: flex; flex-direction: column; gap: 0; padding: 8px 20px; background: var(--paper); font-size: .875rem; }
  .header nav a { min-height: 48px; }
  #hero-title { width: min(66vw, 435px); }
  body.menu-open { overflow: hidden; }
  .footer-top { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 16px; }
  .footer-contact { grid-column: 1; grid-row: 1; }
  .footer-top > span { grid-column: 1; grid-row: 2; }
  .footer-policies { grid-column: 2; grid-row: 1 / 3; }
}
/* Native snapping only while the document is inside the phone product area.
   dvh follows the current browser content viewport; no stacked svh override. */
@media (max-width: 599px) {
  :root { --gutter: 20px; }
  .header { gap: 4px; }
  .cart-label { display: none; }
  .header .cart { width: 44px; flex-wrap: wrap; row-gap: 0; line-height: 1.2; }
  .cart-icon { display: block; }
  html.product-snap-active { scroll-snap-type: y mandatory; }
  html:has(dialog[open], .header.menu-open) { scroll-snap-type: none; }
  .product { height: 100dvh; min-height: 20rem; aspect-ratio: auto; scroll-snap-align: start; scroll-snap-stop: always; }
  .product > img { object-position: var(--product-focus, 50% 50%); }
  /* Escape targets matter only while native product snapping is active. */
  .hero, .collection, .brand-section, .footer { scroll-snap-align: start; }
}
@supports not (height: 100dvh) {
  .hero { min-height: 100vh; }
  @media (max-width: 599px) { .product { height: 100vh; } }
}
@media (prefers-reduced-motion: reduce) {
  html.product-snap-active { scroll-snap-type: none; }
  .hero-image { transform: none; }
}