/* atelier-noon — Zenith · SS27
 * tokens.css 의 var() 만 쓴다(색은 전부 토큰). 여기서 새로 만드는 사용자 변수는 토큰에서 계산한 값뿐이다.
 * 원칙: 정오에는 그림자가 없다 — 깊이는 크기와 흑백 대비로만. 모션은 하나(그림자 시침)뿐이다.
 */

/* ── 파생 값 ────────────────────────────────────────────────────────────── */
:root {
  /* 노치 기기 가로 모드에서도 글자가 안전 영역 안에 — 판은 가장자리까지 번진다 */
  --pad-x: max(var(--spacing-margin), env(safe-area-inset-left), env(safe-area-inset-right));
  --hdr-h: var(--spacing-header-compact);
  --tap: calc(var(--spacing) * 11); /* 44px 터치 타깃 */
  /* DESIGN 은 900ms — shoot 구간 컷이 스크롤 뒤 450ms 에 찍혀 시침이 80% 에서 멈춘 채 찍혔다(교훈 #18). 600ms 면 450ms 에 97% */
  --hand-time: 600ms;
}
@media (min-width: 48rem) {
  :root { --hdr-h: var(--spacing-header); }
}

/* ── 바탕 ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr-h) + var(--spacing) * 4);
}
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--font-weight-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
:where(ul[role="list"]) { list-style: none; padding: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--radius-none);
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.btn { -webkit-user-select: none; user-select: none; }
/* 포인터가 있는 기기만 hover — 터치에서는 탭 뒤에 hover 가 눌어붙는다 */
@media (hover: hover) and (pointer: fine) {
  .tlink:hover { text-decoration-color: transparent; }
  .btn:hover { background: var(--color-ink); }
  .btn--ghost:hover { background: var(--color-accent); color: var(--color-ink-inverse); }
  .size:hover:not(:disabled) { border-color: var(--color-ink); }
}
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
::selection { background: var(--color-accent); color: var(--color-ink-inverse); }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: var(--pad-x);
  top: calc(var(--spacing) * 2);
  z-index: 60;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  background: var(--color-accent);
  color: var(--color-ink-inverse);
  font-size: var(--text-small);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.tnum { font-variant-numeric: tabular-nums lining-nums; }

/* 라벨 — 옷 안쪽 케어 라벨의 좁은 글자: Instrument Sans wdth 85, 대문자, 자간 */
.label,
.season__k,
.ph__ratio,
.chip__look,
.chip__colour,
.chip__shop {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-stretch: 85%;
  font-weight: var(--font-weight-body);
}

/* ── 링크 · 버튼 ────────────────────────────────────────────────────────── */
.tlink {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--color-ink);
  font-size: var(--text-small);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: currentColor;
}
button.tlink { cursor: pointer; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--spacing) * 12);
  padding-inline: calc(var(--spacing) * 8);
  background: var(--color-accent);
  color: var(--color-ink-inverse);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  font-stretch: 85%;
  font-weight: var(--font-weight-strong);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--color-accent);
  transition:
    background-color var(--default-transition-duration) var(--ease-out),
    transform calc(var(--default-transition-duration) / 2) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn--block { display: flex; width: 100%; }
.btn--ghost { background: var(--color-bg); color: var(--color-ink); border-color: var(--color-ink); }

/* ── 워드마크 ───────────────────────────────────────────────────────────── */
.wm {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 1.5);
  min-height: var(--tap);
  padding-top: calc(var(--spacing) * 3);
  text-decoration: none;
  color: var(--color-accent);
}
.wm__a {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-stretch: 85%;
  font-weight: var(--font-weight-strong);
}
.wm__n {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-display);
  font-size: calc(var(--text-lead) * 1.1);
  line-height: 1;
}

/* ── 머리 ───────────────────────────────────────────────────────────────── */
.hdr {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: var(--hdr-h);
  padding-inline: var(--pad-x);
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
}
.hdr.is-ruled { border-bottom-color: var(--color-rule); }
.hdr .wm { padding-top: 0; align-items: center; }
.hdr__nav { display: none; }
.hdr__nav ul { display: flex; gap: calc(var(--spacing) * 8); }
.hdr__nav a,
.hdr__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--text-small);
  text-decoration: none;
  color: var(--color-ink);
}
.hdr__nav a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: transparent; }
.hdr__nav a:hover,
.hdr__nav a[aria-current="page"] { text-decoration-color: currentColor; }
.hdr__tools { display: flex; gap: calc(var(--spacing) * 5); justify-self: end; }
.hdr__link { gap: 0.3em; padding-inline: calc(var(--spacing) * 1); }
.hdr__search { display: none; }

@media (min-width: 48rem) {
  .hdr { grid-template-columns: 1fr auto 1fr; }
  .hdr__nav { display: block; }
  .hdr__search { display: inline-flex; }
  .hdr__menu { display: none; }
}

/* 가방 쪽지 — 서랍 대신 한 문단 */
.bag {
  position: absolute;
  top: calc(100% + 1px);
  right: var(--pad-x);
  width: min(20rem, calc(100vw - var(--pad-x) * 2));
  padding: calc(var(--spacing) * 5);
  background: var(--color-bg);
  border: 1px solid var(--color-rule-strong);
}
.bag__title { font-family: var(--font-display); font-size: var(--text-lead); line-height: var(--text-lead--line-height); }
.bag__note { margin-top: calc(var(--spacing) * 1); font-size: var(--text-small); color: var(--color-ink-soft); }
.bag .tlink { margin-top: calc(var(--spacing) * 2); }

/* 모바일 메뉴 시트 — 전체 화면 흰 */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) var(--pad-x) max(var(--pad-x), env(safe-area-inset-bottom));
  background: var(--color-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--spacing-header-compact);
  border-bottom: 1px solid var(--color-rule);
}
.sheet__links { margin-top: calc(var(--spacing) * 8); }
.sheet__links a {
  display: block;
  padding-block: calc(var(--spacing) * 2);
  font-family: var(--font-display);
  font-size: calc(var(--text-body) * 2.5);
  line-height: 1.15;
  text-decoration: none;
  color: var(--color-accent);
}
.sheet__links a[aria-current="page"] { font-style: italic; }
.sheet__note { margin-top: auto; padding-top: calc(var(--spacing) * 8); font-size: var(--text-small); color: var(--color-ink-soft); }

/* ── 판 (자리표시자 = 컬러 칩) ──────────────────────────────────────────── */
[data-plate="optic"]     { --plate: var(--color-plate-optic);     --plate-ink: var(--color-ink); }
[data-plate="chalk"]     { --plate: var(--color-plate-chalk);     --plate-ink: var(--color-ink); }
[data-plate="limestone"] { --plate: var(--color-plate-limestone); --plate-ink: var(--color-ink); }
[data-plate="sky"]       { --plate: var(--color-plate-sky);       --plate-ink: var(--color-ink); }
[data-plate="graphite"]  { --plate: var(--color-plate-graphite);  --plate-ink: var(--color-ink-inverse); }
[data-plate="shadow"]    { --plate: var(--color-plate-shadow);    --plate-ink: var(--color-ink-inverse); }

.ph {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--plate);
  color: var(--plate-ink);
  container-type: inline-size;
}
.ph[data-ratio="16:9"] { aspect-ratio: var(--aspect-hero-wide); }
.ph[data-ratio="3:4"]  { aspect-ratio: var(--aspect-hero); }
.ph[data-ratio="4:5"]  { aspect-ratio: var(--aspect-look); }
.ph[data-ratio="2:3"]  { aspect-ratio: var(--aspect-look-tall); }
.ph[data-ratio="3:2"]  { aspect-ratio: var(--aspect-detail); }

/* 판 위 글자는 셋뿐 — 로마 숫자 · 비율 표 · 그림자 시침 */
.ph__num {
  position: absolute;
  top: var(--spacing-chip);
  left: var(--spacing-chip);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: clamp(var(--text-small), 11cqi, var(--text-numeral));
  line-height: var(--text-numeral--line-height);
  letter-spacing: var(--tracking-display);
}
.ph__ratio {
  position: absolute;
  right: var(--spacing-chip);
  bottom: var(--spacing-chip);
}

/* 그림자 시침 — 판 아래쪽 가운데(아래에서 18%)를 축으로 번호 × 30°. XII 는 점만 */
.hand {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 1px;
  height: 18%;
  pointer-events: none;
}
.hand i {
  position: absolute;
  inset: 0;
  background: currentColor;
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--n) * 30deg));
}
.hand::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3px;
  height: 3px;
  margin: 0 0 -1.5px -1.5px;
  border-radius: var(--radius-dot);
  background: currentColor;
}
.hand--noon i { display: none; }
.hand--back i { transform: rotate(calc(var(--n) * 30deg + 180deg)); }

@media (prefers-reduced-motion: no-preference) {
  /* 유일한 모션: 판이 보이면 시침이 정오(0°)에서 제 시각으로 돈다. 한 번만 */
  .hand i { transition: transform var(--hand-time) var(--ease-hand); }
  .js .ph:not(.is-in) .hand i { transform: rotate(0deg); }
  /* 히어로(XII): 로드 때 한 번 — 그림자가 짧아져 점만 남는다 */
  .hero .hand--noon i {
    display: block;
    animation: noon-shadow calc(var(--hand-time) * 1.5) var(--ease-hand) 250ms both;
  }
}
@keyframes noon-shadow {
  from { transform: rotate(-30deg) scaleY(1); }
  to { transform: rotate(0deg) scaleY(0); }
}

/* 사진이 오면 판 위 글자는 모두 사라진다 — 번호는 라벨 띠에 이미 있다(DESIGN 판 위 글자 규칙 3) */
.ph > img, .ph > picture > img, .face > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph:has(> img, > picture) :is(.ph__num, .ph__ratio, .hand) { display: none; }

/* ── 히어로 — 지평선 제목 ───────────────────────────────────────────────── */
.hero {
  position: relative;
  --hero-h: clamp(20rem, calc(100svh - var(--hdr-h) - var(--spacing-band)), 32.5rem);
  /* 제목이 판의 아래 가장자리를 가로지른다 — 글자 높이 55% 는 판 위, 45% 는 흰 띠 위.
     Bodoni Moda italic 실측(캡 0.75em · 행간 0.82 줄 상자 안 기준선 0.7735em): 0.7735 − 0.45 × 0.75 = 0.436em — NOTES.md */
  --title-lift: 0.436em;
}
.hero__plate .ph { width: 100%; height: var(--hero-h); aspect-ratio: auto; }
.hero__plate .ph__num { top: var(--spacing-chip); left: var(--pad-x); font-size: var(--text-numeral); }
.hero__plate .ph__ratio { right: var(--pad-x); }

.hero__title {
  position: absolute;
  z-index: 2;
  left: var(--pad-x);
  top: var(--hero-h);
  transform: translateY(calc(var(--title-lift) * -1));
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-display);
  font-size: var(--text-hero);
  line-height: var(--text-hero--line-height);
  letter-spacing: var(--tracking-hero);
  color: var(--color-accent);
  white-space: nowrap;
  pointer-events: none;
}
/* 사진이 제목 자리(왼쪽 아래 3분의 1)에서 7:1 아래면 .hero 에 이 클래스 하나로 제목을 판 밖으로 내린다(윗몫 0%):
   기준선 0.7735em − 캡 0.75em = 0.0235em → 글자 윗선이 판 아래 가장자리에 닿는다. 흰 띠 위쪽 여백은 그만큼 늘린다 */
.hero--title-below { --title-lift: 0em; }
.hero--title-below .hero__band { padding-top: calc(var(--text-hero) * 0.8 + var(--spacing) * 4); }

.hero__band {
  padding: calc(var(--spacing) * 13) var(--pad-x) calc(var(--spacing) * 6);
}
.hero__copy { display: grid; gap: calc(var(--spacing) * 3); }
.hero__cta { display: grid; gap: calc(var(--spacing) * 1); }
.hero__cta .btn { width: 100%; }
.hero__cta .tlink { justify-self: start; }
.hero__cap { display: none; font-size: var(--text-small); color: var(--color-ink-soft); }

@media (min-width: 48rem) {
  .hero { --hero-h: max(26rem, calc(100svh - var(--hdr-h) - var(--spacing-band))); }
  .hero__band {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-gutter);
    align-items: start;
    min-height: var(--spacing-band);
    padding-block: calc(var(--spacing) * 7) calc(var(--spacing) * 6);
  }
  .hero__copy { grid-column: 8 / 13; gap: calc(var(--spacing) * 4); }
  .hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 calc(var(--spacing) * 7); }
  .hero__cta .btn { width: auto; }
}
/* 가로로 긴 화면만 16:9 크롭 — 세로 태블릿은 3:4 원본이 판을 채운다.
   고르는 건 index.html 의 <picture><source media="(min-width: 48rem) and (min-aspect-ratio: 1/1)"> —
   판 두 장을 display 로 바꾸면 숨긴 쪽 사진도 받는다 */
@media (min-width: 48rem) and (min-aspect-ratio: 1 / 1) {
  /* 16:9 사진이 판(1280–1920 에서 2.3–2.4:1)보다 높아 위아래가 잘린다 — 발밑에 고인 그림자(= XII 의 점)를 남기고 위를 자른다 */
  .hero__plate img { object-position: 50% 100%; }
}
@media (min-width: 68.75rem) {
  .hero__cap { display: block; }
}

/* ── 시즌 줄 ────────────────────────────────────────────────────────────── */
.season { padding-inline: var(--pad-x); }
.season__row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
  border-block: 1px solid var(--color-rule);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}
.season__k { color: var(--color-ink-soft); margin-right: calc(var(--spacing) * 1.5); }
@media (min-width: 68.75rem) {
  .season__row { justify-content: space-between; flex-wrap: nowrap; }
}

/* ── 룩북 ───────────────────────────────────────────────────────────────── */
.lookbook { padding-top: var(--spacing-section); }
.lookbook__head {
  display: grid;
  gap: calc(var(--spacing) * 4);
  padding-inline: var(--pad-x);
  margin-bottom: var(--spacing-spread);
}
.lookbook__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-display-s);
  line-height: var(--text-display-s--line-height);
  letter-spacing: var(--tracking-display);
  color: var(--color-accent);
}
.lookbook__title { text-wrap: balance; }
.lookbook__title em { font-style: italic; }
/* 본문 16px 문단은 한 줄 ≈ 80자 — Instrument Sans 는 좁아서 prose 폭(38rem)이면 100자를 넘는다 */
.lookbook__note { max-width: calc(var(--container-prose) * 0.8); color: var(--color-ink-soft); }

/* 칩 = 판 + 라벨 띠. 테두리 1px rule, 직각, 그림자 0 */
.chip {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  background: var(--color-bg);
}
.chip__band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3) var(--spacing-chip) calc(var(--spacing) * 4);
}
.chip__look { color: var(--color-ink); }
.chip__swap { display: grid; justify-items: end; }
.chip__swap > * { grid-area: 1 / 1; transition: opacity var(--default-transition-duration) var(--ease-out); }
.chip__colour { color: var(--color-ink-soft); }
.chip__shop { opacity: 0; color: var(--color-ink); }
.chip__name { grid-column: 1 / -1; font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-ink-soft); }
.chip:focus-visible .chip__colour { opacity: 0; }
.chip:focus-visible .chip__shop { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .chip:hover .chip__colour { opacity: 0; }
  .chip:hover .chip__shop { opacity: 1; }
}

/* 모바일: 1열. 2:3 는 전면, 4:5 는 들여 — 번갈아 */
.spread {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-spread) / 2);
}
.spread + .spread,
.spread + .pair,
.pair__hint + .spread { margin-top: calc(var(--spacing-spread) / 2); }
.spread > .chip { margin-inline: var(--pad-x); }
.spread > .chip.m-full { margin-inline: 0; border-inline-width: 0; }
.m-full .chip__band { padding-inline: var(--pad-x); }
.m-full .ph__num { left: var(--pad-x); }
.m-full .ph__ratio { right: var(--pad-x); }
.spread__aside {
  padding-inline: var(--pad-x);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  color: var(--color-accent);
}

/* VI·VII 전면 쌍 — 모바일은 가로 스냅 두 장 */
.pair {
  display: flex;
  margin-top: calc(var(--spacing-spread) / 2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pair::-webkit-scrollbar { display: none; }
.pair > .chip { flex: 0 0 100%; scroll-snap-align: start; }
.chip--flush { border: 0; }
.chip--flush .chip__band { padding-inline: var(--pad-x); }
.chip--flush .ph__num { left: var(--pad-x); }
.pair__hint {
  padding: calc(var(--spacing) * 2) var(--pad-x) 0;
  font-size: var(--text-small);
  color: var(--color-ink-soft);
}

@media (min-width: 48rem) {
  .spread {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-gutter);
    align-items: start;
    padding-inline: var(--pad-x);
  }
  .spread + .spread,
  .spread + .pair,
  .pair + .spread,
  .pair__hint + .spread { margin-top: var(--spacing-spread); }
  .spread > .chip,
  .spread > .chip.m-full { margin-inline: 0; border-inline-width: 1px; }
  .m-full .chip__band { padding-inline: var(--spacing-chip); }
  .m-full .ph__num { left: var(--spacing-chip); }
  .m-full .ph__ratio { right: var(--spacing-chip); }

  /* 번짐 — 판이 화면 가장자리까지 간다(여백 0), 그 쪽 테두리는 없다 */
  .spread > .chip.bleed-l { margin-left: calc(var(--pad-x) * -1); border-left-width: 0; }
  .spread > .chip.bleed-r { margin-right: calc(var(--pad-x) * -1); border-right-width: 0; }
  .chip.bleed-l .chip__band { padding-left: var(--pad-x); }
  .chip.bleed-l .ph__num { left: var(--pad-x); }
  .chip.bleed-r .chip__band { padding-right: var(--pad-x); }
  .chip.bleed-r .ph__ratio { right: var(--pad-x); }

  .s1-i { grid-column: 1 / 6; }
  .s1-ii { grid-column: 7 / 11; margin-top: calc(var(--spacing) * 30); }
  .s1-aside { grid-column: 11 / 13; align-self: end; padding-inline: 0; }
  .s2-iii { grid-column: 3 / 7; align-self: end; }
  .s2-iv { grid-column: 8 / 13; }
  .sv-v { grid-column: 5 / 9; }
  .s4-viii { grid-column: 2 / 6; }
  .s4-ix { grid-column: 7 / 12; margin-top: calc(var(--spacing) * 20); }
  .s5-x { grid-column: 1 / 5; }
  .s5-xi { grid-column: 6 / 10; align-self: center; }
  .s5-xii { grid-column: 10 / 13; align-self: end; }

  .pair { margin-top: var(--spacing-spread); overflow: visible; }
  .pair > .chip { flex: 1 1 50%; }
  .chip--flush .chip__band { grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; padding-block: calc(var(--spacing) * 3); }
  .chip--flush .chip__name { grid-column: 2; grid-row: 1; }
  .chip--flush .chip__swap { grid-column: 3; grid-row: 1; }
  .pair > .chip + .chip .chip__band { padding-left: var(--spacing-chip); }
  .pair > .chip + .chip .ph__num { left: var(--spacing-chip); }
  .pair__hint { display: none; }
}

/* ── 캠페인 문구 ────────────────────────────────────────────────────────── */
.campaign {
  padding: var(--spacing-section) var(--pad-x) 0;
  display: grid;
  gap: calc(var(--spacing) * 6);
}
.campaign__quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-display);
  font-size: var(--text-headline);
  line-height: var(--text-headline--line-height);
  letter-spacing: var(--tracking-display);
  color: var(--color-accent);
  text-wrap: balance;
}
.campaign__note { font-size: var(--text-small); color: var(--color-ink-soft); }
@media (min-width: 48rem) {
  .campaign { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
  .campaign__quote, .campaign__note { grid-column: 2 / 12; text-align: center; }
}

/* ── 구간 머리 ──────────────────────────────────────────────────────────── */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
  padding-inline: var(--pad-x);
  padding-bottom: calc(var(--spacing) * 6);
}
.sec-head__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-display-s);
  line-height: var(--text-display-s--line-height);
  letter-spacing: var(--tracking-display);
  color: var(--color-accent);
}
.sec-head__note { font-size: var(--text-small); color: var(--color-ink-soft); }

/* ── 컬렉션 입구 (카테고리 5) ──────────────────────────────────────────── */
.cats { padding-top: var(--spacing-section); }
.cats__body { padding-inline: var(--pad-x); }
.cats__list { border-top: 1px solid var(--color-rule); }
.cats__list li { border-bottom: 1px solid var(--color-rule); }
.cat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: calc(var(--spacing) * 5);
  min-height: calc(var(--spacing) * 14);
  padding-block: calc(var(--spacing) * 2);
  text-decoration: none;
  color: var(--color-ink);
}
.cat__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-display-s);
  line-height: var(--text-display-s--line-height);
  letter-spacing: var(--tracking-display);
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
  text-decoration-color: transparent;
}
.cat:hover .cat__name, .cat:focus-visible .cat__name { text-decoration-color: currentColor; }
.cat__count { font-size: var(--text-small); color: var(--color-ink-soft); }
.cat__arrow { font-size: var(--text-lead); }
.cats__preview { display: none; }

@media (min-width: 48rem) {
  .cats__body {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-gutter);
    align-items: start;
  }
  .cats__list { grid-column: 1 / 10; }
  .cat { padding-block: calc(var(--spacing) * 5); }
  .cats__preview {
    display: grid;
    grid-column: 10 / 13;
    border: 1px solid var(--color-rule);
  }
  .cats__preview .ph {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity var(--default-transition-duration) var(--ease-out);
  }
  .cats:not(:has(.cat:hover, .cat:focus-visible)) .pv--dresses,
  .cats:has([data-cat="dresses"]:is(:hover, :focus-visible)) .pv--dresses,
  .cats:has([data-cat="shirting"]:is(:hover, :focus-visible)) .pv--shirting,
  .cats:has([data-cat="tailoring"]:is(:hover, :focus-visible)) .pv--tailoring,
  .cats:has([data-cat="knitwear"]:is(:hover, :focus-visible)) .pv--knitwear,
  .cats:has([data-cat="accessories"]:is(:hover, :focus-visible)) .pv--accessories { opacity: 1; }
}

/* ── Atelier — 매장 ─────────────────────────────────────────────────────── */
.atelier { padding-block: var(--spacing-section); }
.atelier .sec-head { justify-content: start; }
.atelier__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-display);
  font-size: var(--text-display-s);
  line-height: var(--text-display-s--line-height);
  letter-spacing: var(--tracking-display);
  color: var(--color-accent);
}
.stores {
  width: calc(100% - var(--pad-x) * 2);
  margin-inline: var(--pad-x);
  border-collapse: collapse;
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}
.stores thead { display: none; }
.stores tr {
  display: grid;
  gap: calc(var(--spacing) * 1);
  padding-block: calc(var(--spacing) * 4);
  border-top: 1px solid var(--color-rule);
}
.stores tbody tr:last-child { border-bottom: 1px solid var(--color-rule); }
.stores th, .stores td { padding: 0; text-align: left; font-weight: var(--font-weight-body); }
.stores tbody th {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  color: var(--color-accent);
}
@media (min-width: 48rem) {
  .stores thead { display: table-header-group; }
  .stores tr { display: table-row; }
  .stores th, .stores td { padding-block: calc(var(--spacing) * 4); border-bottom: 1px solid var(--color-rule); vertical-align: baseline; }
  .stores thead th { padding-block: calc(var(--spacing) * 2); color: var(--color-ink-soft); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-stretch: 85%; }
  .stores tr { border: 0; }
}

/* ── 고지 ───────────────────────────────────────────────────────────────── */
.notice {
  display: grid;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 10) var(--pad-x);
  border-top: 1px solid var(--color-rule);
}
.notice__text {
  max-width: var(--container-prose);
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
}
@media (min-width: 48rem) {
  .notice { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
  .notice .label { grid-column: 1 / 4; padding-top: calc(var(--spacing) * 1.5); }
  .notice__text { grid-column: 4 / 11; }
}

/* ── 꼬리 ───────────────────────────────────────────────────────────────── */
.ftr {
  padding: calc(var(--spacing) * 12) var(--pad-x) max(calc(var(--spacing) * 8), env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-accent);
}
.ftr__top { display: grid; gap: calc(var(--spacing) * 10); }
.ftr .wm__n { font-size: var(--text-title); }
.ftr__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--spacing) * 8) var(--spacing-gutter); }
.ftr__cols ul { margin-top: calc(var(--spacing) * 3); }
.ftr__cols li { font-size: var(--text-small); line-height: var(--text-small--line-height); }
.ftr__cols a { display: inline-flex; align-items: center; min-width: var(--tap); min-height: var(--tap); text-decoration: none; }
.ftr__cols a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ftr__cols li:not(:has(a)) { padding-block: calc(var(--spacing) * 1.5); }
.ftr__soft { margin-top: calc(var(--spacing) * 2); font-size: var(--text-small); color: var(--color-ink-soft); }
.ftr__base {
  display: grid;
  gap: calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 14);
  padding-top: calc(var(--spacing) * 5);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-small);
}
.ftr__notice { max-width: 40em; color: var(--color-ink); }
.ftr__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6); color: var(--color-ink-soft); }
.ftr__meta a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-ink); text-underline-offset: 4px; }
.ftr__meta { align-items: center; }
@media (min-width: 48rem) {
  .ftr__top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gutter); align-items: start; }
  .ftr__top > .wm { grid-column: 1 / 5; }
  .ftr__cols { grid-column: 6 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr__base { grid-template-columns: 1fr auto; align-items: baseline; }
}

/* ════════════════════════════════════════════════════════════════════════
   컬렉션
   ════════════════════════════════════════════════════════════════════════ */
.page-head {
  display: grid;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 5) var(--pad-x) calc(var(--spacing) * 5);
}
.crumbs {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crumbs a { color: var(--color-ink-soft); text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--color-ink); }
.page-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--tracking-display);
  color: var(--color-accent);
}
.page-meta { font-size: var(--text-small); color: var(--color-ink-soft); }
@media (min-width: 48rem) {
  .page-head { grid-template-columns: 1fr auto; align-items: end; padding-top: calc(var(--spacing) * 6); }
  .crumbs { grid-column: 1 / -1; }
  .page-meta { padding-bottom: calc(var(--spacing) * 2); }
}

/* 카테고리 막대 — 글자 탭 한 줄, 모바일은 가로 스크롤(잘린 탭이 "더 있다" 를 알린다) */
.tabs {
  display: flex;
  gap: calc(var(--spacing) * 6);
  padding-inline: var(--pad-x);
  border-block: 1px solid var(--color-rule);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--pad-x);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 1.5);
  min-height: calc(var(--spacing) * 12);
  padding-top: calc(var(--spacing) * 3.5);
  font-size: var(--text-small);
  color: var(--color-ink);
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  scroll-snap-align: start;
}
.tab__n { font-size: var(--text-label); color: var(--color-ink-soft); }
.tab[aria-pressed="true"] { font-weight: var(--font-weight-strong); border-bottom-color: var(--color-accent); }

.tools {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding-inline: var(--pad-x);
  border-bottom: 1px solid var(--color-rule);
}
.tool {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: calc(var(--spacing) * 12);
  font-size: var(--text-small);
}
.tools__end { display: flex; justify-content: flex-end; align-items: center; gap: calc(var(--spacing) * 8); }
.view { display: none; }

/* + / − 를 1px 선 두 개로 */
.pm { position: relative; display: inline-block; width: 9px; height: 9px; flex: 0 0 auto; }
.pm::before, .pm::after { content: ""; position: absolute; background: currentColor; }
.pm::before { left: 0; right: 0; top: 4px; height: 1px; }
.pm::after { top: 0; bottom: 0; left: 4px; width: 1px; }
[aria-expanded="true"] > .pm::after,
details[open] > summary .pm::after { display: none; }

.sort { position: relative; }
.sort__menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  display: grid;
  min-width: calc(var(--spacing) * 56);
  padding: calc(var(--spacing) * 2) 0;
  background: var(--color-bg);
  border: 1px solid var(--color-rule-strong);
}
.sort__menu button {
  min-height: var(--tap);
  padding-inline: calc(var(--spacing) * 4);
  text-align: left;
  font-size: var(--text-small);
}
.sort__menu button[aria-pressed="true"] { font-weight: var(--font-weight-strong); text-decoration: underline; text-underline-offset: 4px; }
.sort__menu button:hover { background: var(--color-plate-optic); }

.view { align-items: center; gap: calc(var(--spacing) * 1); font-size: var(--text-small); }
.view__k { color: var(--color-ink-soft); margin-right: calc(var(--spacing) * 1); }
.view button {
  min-width: var(--tap);
  min-height: var(--tap);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-soft);
}
.view button[aria-pressed="true"] { color: var(--color-ink); font-weight: var(--font-weight-strong); text-decoration: underline; text-underline-offset: 4px; }

.filters {
  display: grid;
  gap: calc(var(--spacing) * 6);
  padding: calc(var(--spacing) * 6) var(--pad-x);
  border-bottom: 1px solid var(--color-rule);
}
.filters__opts { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 3); }
.opt-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-width: var(--tap);
  min-height: var(--tap);
  padding-inline: calc(var(--spacing) * 3);
  justify-content: center;
  border: 1px solid var(--color-rule-strong);
  font-size: var(--text-small);
}
.opt-btn[aria-pressed="true"] { background: var(--color-accent); color: var(--color-ink-inverse); border-color: var(--color-accent); }
.filters__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6); }
.filters__note { font-size: var(--text-small); color: var(--color-ink-soft); }
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-dot);
  background: var(--plate);
  border: 1px solid var(--color-rule-strong);
}

@media (min-width: 48rem) {
  .tools { display: flex; justify-content: space-between; }
  .view { display: flex; }
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
  .filters__foot { grid-column: 1 / -1; }
}

/* 상품 격자 — 카드 테두리·그림자·배경 없음 */
.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--spacing) * 10) var(--spacing-gutter);
  padding: calc(var(--spacing) * 5) var(--pad-x) 0;
}
.card {
  display: grid;
  align-content: start;
  gap: calc(var(--spacing) * 0.5);
  text-decoration: none;
  color: var(--color-ink);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}
.card .ph { margin-bottom: calc(var(--spacing) * 2.5); }
.card .ph__ratio { font-size: var(--text-label); }
.card__name { color: var(--color-ink); }
.card__price { color: var(--color-ink); }
.card__colours { display: none; align-items: center; gap: calc(var(--spacing) * 2); color: var(--color-ink-soft); }
.dots { display: inline-flex; gap: calc(var(--spacing) * 1); }
.card--look { grid-column: 1 / -1; }
.card--look .card__price { color: var(--color-ink-soft); }
.face { position: absolute; inset: 0; transition: opacity calc(var(--default-transition-duration) * 1.5) var(--ease-out); }
.face--back { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .card:hover .face--front { opacity: 0; }
  .card:hover .face--back { opacity: 1; }
  .card:hover .card__name { text-decoration: underline; text-underline-offset: 4px; }
}

@media (min-width: 48rem) {
  .products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--spacing) * 14) var(--spacing-gutter); padding-top: calc(var(--spacing) * 6); }
  .products.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card__colours { display: flex; margin-top: calc(var(--spacing) * 1); }
  .card--look { grid-column: span 2; }
  .products.is-2 .card--look { grid-column: 1 / -1; }
}

.empty { padding: calc(var(--spacing) * 10) var(--pad-x); font-size: var(--text-lead); }
.more {
  display: grid;
  justify-items: center;
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 16) var(--pad-x) var(--spacing-section);
}
.more__count { font-size: var(--text-small); color: var(--color-ink-soft); }

.trust {
  display: grid;
  gap: calc(var(--spacing) * 6);
  padding: calc(var(--spacing) * 10) var(--pad-x);
  border-top: 1px solid var(--color-rule);
}
.trust p { margin-top: calc(var(--spacing) * 2); max-width: 22rem; }
@media (min-width: 48rem) {
  .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
}

/* ════════════════════════════════════════════════════════════════════════
   상품
   ════════════════════════════════════════════════════════════════════════ */
.crumbs--pdp {
  display: flex;
  align-items: center;
  gap: 0.35em;
  min-height: calc(var(--spacing) * 9);
  padding-inline: var(--pad-x);
}
.crumbs--pdp > * { flex: 0 0 auto; }
.crumbs--pdp [aria-current] { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }

.pdp { display: grid; gap: calc(var(--spacing) * 3); }

/* 갤러리 — 모바일은 가로 스냅 세 장 */
.gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.shot { position: relative; flex: 0 0 100%; display: grid; scroll-snap-align: start; }
.shot > .ph {
  grid-area: 1 / 1;
  aspect-ratio: auto;
  height: min(32.5rem, calc(100svh - var(--spacing) * 53));
  transition: opacity calc(var(--default-transition-duration) * 1.5) var(--ease-out);
}
.gallery[data-colour="optic"] .ph[data-colour="shadow"],
.gallery[data-colour="shadow"] .ph[data-colour="optic"] { opacity: 0; }
.shot--look { display: none; }
/* "1 / 3" 은 제 줄을 갖지 않고 정보 첫 줄(N° 012 · Dresses)의 오른쪽에 건다 — 393×660 에서 가격 줄까지 첫 화면에 */
.gallery { position: relative; }
.gallery__count {
  position: absolute;
  right: var(--pad-x);
  top: calc(100% + var(--spacing) * 3);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink-soft);
}

.info { padding-inline: var(--pad-x); }
.info__kicker { font-size: var(--text-small); line-height: var(--text-small--line-height); color: var(--color-ink-soft); }
.info__title {
  margin-top: calc(var(--spacing) * 1);
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  letter-spacing: var(--tracking-display);
  color: var(--color-accent);
  text-wrap: balance;
}
.info__price {
  display: flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 2);
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
}
.info__duty { font-family: var(--font-sans); font-size: var(--text-small); color: var(--color-ink-soft); }
.opt { margin-top: calc(var(--spacing) * 6); }
.opt__label { display: flex; align-items: baseline; gap: calc(var(--spacing) * 2); font-size: var(--text-small); }
.opt__label .label { color: var(--color-ink-soft); }
.swatches, .sizes { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); margin-top: calc(var(--spacing) * 2); }
.swatch {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
}
.swatch i {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
  border-radius: var(--radius-dot);
  background: var(--plate);
  border: 1px solid var(--color-rule-strong);
}
.swatch[aria-pressed="true"] i { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.size {
  position: relative;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--color-rule-strong);
  font-size: var(--text-small);
  transition: transform calc(var(--default-transition-duration) / 2) var(--ease-out);
}
.size:active:not(:disabled) { transform: scale(0.98); }
.size[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-ink-inverse); }
.size:disabled { color: var(--color-ink-soft); overflow: hidden; }
/* 품절 사선 — 1px 선 하나를 45° 로 */
.size:disabled::after {
  content: "";
  position: absolute;
  left: -25%;
  right: -25%;
  top: 50%;
  height: 1px;
  background: var(--color-rule-strong);
  transform: rotate(-45deg);
}

summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.sizeguide { margin-top: calc(var(--spacing) * 1); }
.sizeguide > summary {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: var(--tap);
  font-size: var(--text-small);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sizeguide__body { padding-block: calc(var(--spacing) * 2) calc(var(--spacing) * 4); }
.sizeguide__note { font-size: var(--text-small); color: var(--color-ink-soft); margin-bottom: calc(var(--spacing) * 3); }

.spec { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.spec th, .spec td { padding: calc(var(--spacing) * 2) calc(var(--spacing) * 1); border-bottom: 1px solid var(--color-rule); text-align: right; font-weight: var(--font-weight-body); }
.spec th[scope="row"], .spec thead th:first-child { text-align: left; color: var(--color-ink-soft); }
.spec thead th { color: var(--color-ink-soft); }

.info > .btn { margin-top: calc(var(--spacing) * 6); }
.bagnote { min-height: calc(var(--spacing) * 6); margin-top: calc(var(--spacing) * 3); font-size: var(--text-small); }
.info__links { display: flex; flex-wrap: wrap; gap: 0 calc(var(--spacing) * 6); }

.acc { padding-inline: var(--pad-x); margin-top: calc(var(--spacing) * 6); }
.acc__item { border-top: 1px solid var(--color-rule); }
.acc__item:last-child { border-bottom: 1px solid var(--color-rule); }
.acc__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--spacing) * 14);
  font-size: var(--text-body);
}
.acc__body { display: grid; gap: calc(var(--spacing) * 3); padding-bottom: calc(var(--spacing) * 6); max-width: calc(var(--container-prose) * 0.8); color: var(--color-ink); }

@media (min-width: 48rem) {
  .crumbs--pdp { min-height: calc(var(--spacing) * 12); }
  .pdp {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-gutter);
    row-gap: 0;
    padding-inline: var(--pad-x);
    align-items: start;
  }
  .gallery { grid-column: 1 / 9; grid-row: 1; }
  .gallery__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-gutter); overflow: visible; }
  .shot > .ph { height: auto; aspect-ratio: var(--aspect-product); }
  .gallery__count { display: none; }
  .shot--look {
    display: grid;
    align-content: start;
    gap: calc(var(--spacing) * 3);
    text-decoration: none;
    color: var(--color-ink);
    align-self: start;
    width: 50%;
  }
  .shot--look .ph { aspect-ratio: var(--aspect-hero); }
  .shot__cap { display: flex; justify-content: space-between; gap: calc(var(--spacing) * 3); font-size: var(--text-small); }
  .shot--look:hover .shot__cap span:first-child { text-decoration: underline; text-underline-offset: 4px; }
  .info {
    grid-column: 9 / 13;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(var(--hdr-h) + var(--spacing) * 6);
    padding-inline: calc(var(--spacing) * 6) 0;
  }
  .info__look { display: none; }
  .acc { grid-column: 1 / 9; grid-row: 2; padding-inline: 0; margin-top: calc(var(--spacing) * 12); }
}

.complete { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); }
.complete .products { padding-top: 0; }