/* ==========================================================================
   VVIP.J — V03
   Design tokens and layout ported from "VVIP.J V03.dc.html" (Claude Design).
   Values are 1:1 with the canvas; classes replace the canvas' inline styles.
   NOTE: never set overflow-x:hidden on html/body — it disables the
   `animation-timeline: view()` reveal (see HANDOFF, section 7.2).
   ========================================================================== */

:root {
  /* Surfaces */
  --ivory:        #F6F3ED;  /* page background */
  --ivory-light:  #FBF9F5;  /* cards, header, drawer */
  --ink:          #14120F;  /* text, dark sections */
  --ink-deep:     #0C0B0A;  /* hero, footer */
  --placeholder:  #E7E2D9;  /* image background */

  /* Accents */
  --accent:       #A88B5C;  /* hover, active */
  --gold:         #C9A66B;  /* accent on dark */
  --gold-metal:   #E0B04A;  /* 24K swatch dot */

  /* Text */
  --muted:        #8A8478;
  --muted-warm:   #6E695F;
  --body-ink:     #4A463E;

  /* Rules */
  --rule:         rgba(20, 18, 15, 0.12);
  --rule-soft:    rgba(20, 18, 15, 0.09);
  --rule-input:   rgba(20, 18, 15, 0.16);

  /* On dark */
  --on-dark:            #FBF9F5;
  --on-dark-80:  rgba(251, 249, 245, 0.80);
  --on-dark-68:  rgba(251, 249, 245, 0.68);
  --on-dark-56:  rgba(251, 249, 245, 0.56);
  --on-dark-50:  rgba(251, 249, 245, 0.50);
  --on-dark-rule:rgba(251, 249, 245, 0.20);

  /* Type */
  --font-display: 'Cormorant Garamond', 'Nanum Myeongjo', serif;
  --font-ui:      'Jost', 'Noto Sans KR', sans-serif;
  --font-body:    'Noto Sans KR', sans-serif;

  /* Rhythm */
  --pad-x:     40px;
  --section-y: 130px;
  --maxw:      1560px;
  --header-h:  88px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  /* Reserved up front: the bag drawer locks the page, and without a stable
     gutter the whole layout would jump sideways as the scrollbar vanished. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 300;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button, input { font: inherit; color: inherit; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--ivory-light); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.section { padding: var(--section-y) var(--pad-x); }
.wrap    { max-width: var(--maxw); margin: 0 auto; }

/* Small uppercase label used throughout the page */
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}

.rule-drop {
  width: 1px;
  height: 56px;
  background: rgba(20, 18, 15, .2);
  margin: 44px auto 0;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------- animations --- */

@keyframes vvipMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes vvipCue {
    0% { transform: scaleY(0); transform-origin: top; }
   45% { transform: scaleY(1); transform-origin: top; }
   55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes vvipRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* Scroll-driven reveal. Native scroll timelines where available (no JS);
   main.js adds .is-visible via IntersectionObserver everywhere else. */
[data-reveal] { opacity: 0; }

[data-reveal].is-visible {
  animation: vvipRise 1.1s var(--ease) both;
}

@supports (animation-timeline: view()) {
  [data-reveal] {
    opacity: 1;
    animation: vvipRise 1.1s var(--ease) both;
    animation-timeline: view();
    animation-range: entry 4% cover 26%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal],
  [data-reveal].is-visible { opacity: 1; animation: none; }
  .hero__copy { animation: none; }
  .marquee__track { animation: none; }
  .cue__fill { animation: none; }
}

/* -------------------------------------------------------------- header --- */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  pointer-events: none;
}

.header__bg {
  position: absolute;
  inset: 0;
  background: var(--ivory-light);
  border-bottom: 1px solid var(--rule-soft);
  opacity: 0;
  transition: opacity .6s ease;
}

.header.is-stuck .header__bg { opacity: 1; }

.header__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 22px var(--pad-x);
  color: var(--on-dark);
  transition: color .6s ease;
}

.header.is-stuck .header__inner { color: var(--ink); }

.header a,
.header button { pointer-events: auto; }

.header__nav,
.header__actions {
  display: flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.header__nav     { gap: 30px; justify-self: start; }
.header__actions { gap: 26px; justify-self: end; justify-content: flex-end; }

.header__nav a[aria-current="true"] {
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.3em;
  line-height: 1;
  padding-left: 0.3em; /* optically re-centre the tracked-out word */
}

.brand__sub {
  font-size: 8px;
  letter-spacing: 0.42em;
  opacity: .62;
  padding-left: 0.42em;
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.link-btn:hover { color: var(--accent); }

/* Mobile menu — hidden on desktop, see the responsive block */
.header__toggle { display: none; }
.header__drawer { display: none; }

/* ---------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  height: 100vh;
  min-height: 480px;
  background: var(--ink-deep);
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.02) contrast(1.02);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(12, 11, 10, .62) 0%,
    rgba(12, 11, 10, .10) 34%,
    rgba(12, 11, 10, .06) 56%,
    rgba(12, 11, 10, .78) 100%
  );
}

/* Announcement marquee */
.marquee {
  position: absolute;
  top: 0; left: 0; right: 0;
  overflow: hidden;
  padding: 9px 0;
  background: rgba(12, 11, 10, .28);
  pointer-events: none;
}

.marquee[hidden] { display: none; }

.marquee__track {
  display: flex;
  width: 200%;
  animation: vvipMarquee 46s linear infinite;
}

.marquee__half {
  display: flex;
  width: 50%;
  justify-content: space-around;
  gap: 64px;
  white-space: nowrap;
  color: rgba(251, 249, 245, .72);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.hero__foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 var(--pad-x) clamp(20px, 4.4vh, 54px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  color: var(--ivory-light);
}

.hero__copy { animation: vvipRise 1.4s var(--ease) both; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, .78);
}

.hero__eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: rgba(251, 249, 245, .5);
}

.hero__eyebrow span { font-size: 17px; }

.hero__title {
  margin: clamp(8px, 1.6vh, 18px) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, min(8.4vw, 13vh), 140px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* The canvas separates the two lines with an empty line */
.hero__title span { display: block; }
.hero__title span + span { margin-top: 0.62em; }

.hero__lead {
  margin: clamp(12px, 2.4vh, 26px) 0 0;
  max-width: 44ch;
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(251, 249, 245, .8);
  text-wrap: pretty;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(16px, 3.2vh, 36px);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}

.btn--solid {
  background: var(--ivory-light);
  color: var(--ink);
}

.btn--solid:hover {
  background: var(--accent);
  color: var(--ivory-light);
}

.btn--ghost {
  background: none;
  border: 1px solid rgba(251, 249, 245, .42);
  color: var(--ivory-light);
  letter-spacing: 0.2em;
}

.btn--ghost:hover {
  background: rgba(251, 249, 245, .1);
  border-color: var(--ivory-light);
  color: var(--ivory-light);
}

.btn__arrow { font-size: 14px; line-height: 1; }

.hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 22px;
}

.hero__playpause {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(251, 249, 245, .4);
  background: rgba(12, 11, 10, .28);
  color: var(--ivory-light);
  font-size: 10px;
  letter-spacing: 0.1em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .4s ease;
}

.hero__playpause:hover { background: rgba(251, 249, 245, .18); }

.hero__controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero__sound {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 18px;
  border-radius: 26px;
  border: 1px solid rgba(251, 249, 245, .4);
  background: rgba(12, 11, 10, .28);
  color: var(--ivory-light);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .4s ease;
}

.hero__sound:hover { background: rgba(251, 249, 245, .18); }

.hero__sound-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background .3s ease, border-color .3s ease;
}

.hero__sound[aria-pressed="true"] .hero__sound-dot {
  background: var(--gold);
  border-color: var(--gold);
}

.hero__meta {
  text-align: right;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, .68);
  line-height: 2;
}

.cue {
  width: 1px;
  height: 64px;
  background: rgba(251, 249, 245, .34);
  overflow: hidden;
}

.cue__fill {
  width: 100%;
  height: 100%;
  background: var(--ivory-light);
  animation: vvipCue 3.4s cubic-bezier(.6, 0, .4, 1) infinite;
}

/* --------------------------------------------------------------- intro --- */

.intro { padding: 132px var(--pad-x); }

.intro__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.intro__statement {
  margin: 30px 0 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.42;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.intro__statement span { display: block; }
.intro__statement span + span { margin-top: 1.1em; }

/* ------------------------------------------------------------- product --- */

.product { padding: 0 var(--pad-x) 140px; }

.product__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 72px;
  align-items: start;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* Image frames --------------------------------------------------------- */

.frame {
  position: relative;
  width: 100%;
  background: var(--placeholder);
  overflow: hidden;
}

.frame--45  { aspect-ratio: 4 / 5; }
.frame--34  { aspect-ratio: 3 / 4; }
.frame--11  { aspect-ratio: 1 / 1; }
.frame--169 { aspect-ratio: 16 / 9; }

.frame img,
.frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover swap: the base cut sits on top of the motion cut and fades away. */
.frame__base {
  position: absolute;
  inset: 0;
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s var(--ease), transform 1.4s var(--ease);
}

@media (hover: hover) {
  .frame--swap:hover .frame__base { opacity: 0; }
  /* data-hover-effect="zoom" on <body> switches the swap style */
  body[data-hover-effect="zoom"] .frame--swap:hover .frame__base {
    transform: scale(1.05);
  }
}

/* Touch: tap toggles the pair (main.js) */
.frame--swap.is-swapped .frame__base { opacity: 0; }

body[data-hover-effect="zoom"] .frame--swap.is-swapped .frame__base {
  transform: scale(1.05);
}

.frame__hint {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: rgba(251, 249, 245, .86);
  backdrop-filter: blur(6px);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 1;
  transition: opacity .6s ease;
  pointer-events: none;
}

.frame__hint::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.frame__hint.is-hidden { opacity: 0; }

.thumb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.media-block { margin-top: 16px; }
.media-block--gap { margin-top: 24px; }

.media-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}

.media-caption__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.media-caption__kind {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Buy panel ------------------------------------------------------------ */

.buy {
  position: sticky;
  top: 108px;
  padding-top: 8px;
}

.buy__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

.buy__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -0.01em;
}

.buy__subtitle {
  margin-top: 10px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--muted-warm);
}

.wish {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule-input);
  background: none;
  cursor: pointer;
  color: var(--ink);
  transition: border-color .3s ease, color .3s ease;
}

.wish:hover { border-color: var(--ink); }
.wish[aria-pressed="true"] { color: var(--accent); }

.buy__price {
  margin-top: 28px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.buy__amount {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.buy__terms {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.buy__body {
  margin: 26px 0 0;
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 14px;
  line-height: 1.95;
  color: var(--body-ink);
  text-wrap: pretty;
}

.buy__body p { margin: 0 0 1.1em; }
.buy__body p:last-child { margin-bottom: 0; }

.field { margin-top: 32px; }
.field--first { margin-top: 38px; }

.field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.field__value {
  color: var(--ink);
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 12px;
}

.field__link {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: none;
}

.metals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.metal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 6px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--rule-input);
  transition: border-color .3s ease, background .3s ease;
}

.metal[aria-pressed="true"] {
  background: var(--ivory-light);
  border-color: var(--ink);
}

.metal__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
  background: var(--gold-metal);
  box-shadow: inset 0 0 0 1px rgba(20, 18, 15, 0.14);
}

.metal__label {
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.size {
  width: 46px;
  height: 46px;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-input);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.size:hover { border-color: var(--ink); }

.size[aria-pressed="true"] {
  background: var(--ink);
  color: var(--ivory-light);
  border-color: var(--ink);
}

.buy__actions {
  display: flex;
  gap: 10px;
  margin-top: 32px;
}

.btn--add {
  flex: 1;
  justify-content: center;
  padding: 20px;
  background: var(--ink);
  color: var(--ivory-light);
  letter-spacing: 0.22em;
}

.btn--add:hover { background: var(--accent); color: var(--ivory-light); }

.btn--add:disabled {
  background: var(--rule);
  color: var(--muted);
  cursor: not-allowed;
}

.btn--add:disabled:hover { background: var(--rule); color: var(--muted); }

.btn--inquiry {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 26px;
  background: none;
  cursor: pointer;
  border: 1px solid rgba(20, 18, 15, .2);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: border-color .4s ease;
}

.btn--inquiry:hover { border-color: var(--ink); color: var(--ink); }

.buy__note {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.buy__note--sub {
  margin-top: 4px;
  font-size: 10px;
  color: var(--muted-warm);
}

.specs {
  margin-top: 44px;
  border-top: 1px solid var(--rule);
}

.specs__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.specs__key {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.specs__val {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
}

/* ------------------------------------------------------------ movement --- */

.movement { background: var(--ivory-light); }

.movement__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

.h2-display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1;
  letter-spacing: -0.01em;
}

.movement__note {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.movement__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.figure-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

.figure-caption__title {
  font-family: var(--font-display);
  font-size: 20px;
}

.figure-caption__num {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------ campaign --- */

.campaign {
  position: relative;
  height: 78vh;
  min-height: 520px;
  background: var(--placeholder);
  overflow: hidden;
}

.campaign img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The canvas' flat left-to-right wash was built for a darker campaign frame.
   Against this one the copy lands on a lit beige wall and measured 2.3:1, so
   the wash is now anchored on the bottom-right corner the copy actually
   occupies — the model and the top of the frame stay untouched. */
.campaign__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(75% 92% at 100% 100%,
      rgba(12, 11, 10, .97) 0%,
      rgba(12, 11, 10, .92) 38%,
      rgba(12, 11, 10, .70) 60%,
      rgba(12, 11, 10, .30) 80%,
      rgba(12, 11, 10, 0) 96%),
    linear-gradient(270deg,
      rgba(12, 11, 10, .30) 0%,
      rgba(12, 11, 10, .10) 38%,
      rgba(12, 11, 10, 0) 70%
    );
}

/* The model sits left in the frame, so the copy is set right. */
.campaign__copy {
  position: absolute;
  text-shadow: 0 1px 14px rgba(12, 11, 10, .55);
  right: var(--pad-x);
  bottom: 56px;
  max-width: 480px;
  text-align: right;
  color: var(--ivory-light);
  pointer-events: none;
}

.campaign__kicker {
  font-size: 14px;
  letter-spacing: 0.32em;
  color: rgba(251, 249, 245, .76);
}

.campaign__kicker span { display: block; }
.campaign__kicker span + span { margin-top: 1em; }

.campaign__line {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.34;
  text-wrap: balance;
}

/* --------------------------------------------------------------- craft --- */

.craft {
  background: var(--ink);
  color: var(--ivory-light);
}

.craft .eyebrow { color: rgba(251, 249, 245, .6); }

.craft__intro { max-width: 720px; }

.craft__title {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.craft__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  margin-top: 76px;
}

.step {
  border-top: 1px solid var(--on-dark-rule);
  padding-top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 24px;
}

.step:has(.patent-proof) {
  grid-template-columns: 1fr 140px;
}

.step__num,
.step__title,
.step__body {
  grid-column: 1;
}

.step__num {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.step__title {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
}

.step__body {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 13px;
  line-height: 1.95;
  color: var(--on-dark-68);
  text-wrap: pretty;
}

.step__body p { margin: 0; }

.patent-proof {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: start;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

.patent-proof img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  background: none;
  border: none;
  transition: opacity .3s var(--ease);
}

.patent-proof:hover img,
.patent-proof:focus-visible img {
  opacity: .8;
}

.patent-proof__label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--on-dark-68);
}

/* ---------------------------------------------------------------- care --- */

.quote-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.quote-carousel__arrow {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}
.quote-carousel__arrow:hover,
.quote-carousel__arrow:focus-visible { color: var(--accent); border-color: var(--accent); }

@media (max-width: 640px) {
  .quote-carousel { gap: 8px; }
  .quote-carousel__arrow { width: 28px; height: 28px; font-size: 14px; }
}

.quote {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
  transition: opacity .25s ease;
}
.quote:focus-visible { outline: 1px solid var(--accent); outline-offset: 8px; }

.quote__mark {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  color: var(--accent);
}

.quote__text {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(22px, 2.7vw, 34px);
  line-height: 1.55;
  text-wrap: balance;
}

.quote-carousel .quote__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.quote__by {
  margin-top: 28px;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 1px gaps double as hairline rules between the cells */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  margin: 96px auto 0;
  max-width: 1200px;
}

.stat {
  background: var(--ivory);
  padding: 34px 28px;
  text-align: center;
}

.stat__value {
  font-family: var(--font-display);
  font-size: 26px;
}

.stat__label {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted-warm);
  font-family: var(--font-body);
  font-weight: 300;
}

.care-policy {
  max-width: 720px;
  margin: 64px auto 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--rule);
}

.care-policy__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  color: var(--ink);
}

.care-policy__body {
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted-warm);
}

.care-policy__list {
  margin: 12px 0 0;
  padding-left: 18px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted-warm);
}

.care-policy__list li + li { margin-top: 6px; }
.care-policy__list a { color: var(--accent); text-decoration: underline; }
.care-policy__list a:hover { color: var(--gold); }

.care-policy__more { margin-top: 4px; }
.care-policy__more .care-policy__list { margin-top: 10px; }

.care-policy__more-toggle {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}
.care-policy__more-toggle::-webkit-details-marker { display: none; }
.care-policy__more-toggle::before {
  content: '+ ';
  color: var(--gold);
}
.care-policy__more[open] .care-policy__more-toggle::before { content: '– '; }
.care-policy__more-toggle:hover { color: var(--gold); }

.care-policy__subtitle {
  margin-top: 28px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  color: var(--ink);
}

.care-faq {
  max-width: 720px;
  margin: 48px auto 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--rule);
}

.customer-reviews {
  max-width: 960px;
  margin: 64px auto 0;
  padding: 32px 24px 0;
  border-top: 1px solid var(--rule);
}

.customer-reviews__grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

.customer-reviews__card {
  display: flex;
  flex-direction: column;
}

.customer-reviews__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.customer-reviews__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.customer-reviews__thumb:hover img { transform: scale(1.04); }

.customer-reviews__body {
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted-warm);
}

.customer-reviews__by {
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.customer-reviews__more {
  display: block;
  margin: 32px auto 0;
  padding: 12px 32px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background .2s ease, border-color .2s ease;
}
.customer-reviews__more:hover   { background: var(--rule-soft); border-color: var(--rule-input); }
.customer-reviews__more:disabled { opacity: .5; cursor: default; }

.care-faq__item {
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
}
.care-faq__item:first-of-type { border-top: none; }

.care-faq__q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.care-faq__q::-webkit-details-marker { display: none; }
.care-faq__q::before {
  content: '+';
  display: inline-block;
  width: 1em;
  color: var(--gold);
}
.care-faq__item[open] > .care-faq__q::before { content: '–'; }

.care-faq__a {
  margin: 12px 0 0 1em;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted-warm);
}

/* -------------------------------------------------------------- footer --- */

.footer {
  background: var(--ink-deep);
  color: var(--ivory-light);
}

.footer a:hover { color: var(--gold); }

.newsletter {
  padding: 96px var(--pad-x);
  border-bottom: 1px solid rgba(251, 249, 245, .14);
}

.newsletter__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.newsletter__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.2;
}

.newsletter__body {
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 13px;
  line-height: 1.9;
  color: var(--on-dark-56);
}

.newsletter__form {
  display: flex;
  max-width: 520px;
  margin: 32px auto 0;
  border-bottom: 1px solid rgba(251, 249, 245, .36);
}

.newsletter__input {
  flex: 1;
  min-width: 0;
  padding: 14px 4px;
  background: none;
  border: none;
  outline: none;
  color: var(--ivory-light);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.newsletter__input::placeholder { color: var(--on-dark-50); }

.newsletter__submit {
  padding: 14px 8px;
  background: none;
  border: none;
  color: var(--ivory-light);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: color .3s ease;
}

.newsletter__submit:hover { color: var(--gold); }

.newsletter__status {
  margin-top: 14px;
  min-height: 1.2em;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  color: var(--gold);
}

.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 48px;
  padding: 80px var(--pad-x) 56px;
  max-width: var(--maxw);
  margin: 0 auto;
}

.footer__logo {
  display: block;
  width: 190px;
  height: auto;
  margin: 0 0 4px;
}

.footer__brand-sub {
  width: 190px;
  margin-top: 10px;
  font-size: 8px;
  letter-spacing: 0.42em;
  text-align: center;
  color: var(--on-dark-50);
  padding-left: 0.42em;
}

.footer__address {
  margin: 24px 0 0;
  max-width: 34ch;
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 12px;
  line-height: 1.9;
  color: var(--on-dark-56);
}

.footer__heading {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-dark-50);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  color: rgba(251, 249, 245, .82);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px var(--pad-x);
  border-top: 1px solid rgba(251, 249, 245, .12);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, .44);
}

.footer__legal-links { display: flex; gap: 24px; }

/* ----------------------------------------------------------- bag drawer --- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(12, 11, 10, .42);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
}

body.bag-open .backdrop#bag-backdrop { opacity: 1; visibility: visible; }

/* Freeze the catalogue while the drawer is open — on a phone the page used to
   scroll away underneath it. overflow:hidden is safe here: it does not change
   which element scrolls, so the `animation-timeline: view()` reveals hold
   their computed opacity (verified in Chromium). */
body.bag-open { overflow: hidden; }

.bag {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 95;
  width: min(420px, 92vw);
  background: var(--ivory-light);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .62s var(--ease);
  box-shadow: -24px 0 60px rgba(12, 11, 10, .16);
  overscroll-behavior: contain;
}

body.bag-open .bag { transform: translateX(0); }

.bag__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 28px;
  border-bottom: 1px solid var(--rule);
}

.bag__title {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.bag__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.bag__list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 28px;
}

.bag__empty {
  padding: 60px 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
}

.bag-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.bag-item img {
  width: 72px;
  height: 90px;
  object-fit: cover;
  background: var(--placeholder);
}

.bag-item__name {
  font-family: var(--font-display);
  font-size: 20px;
}

.bag-item__spec {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted-warm);
}

.bag-item__price {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.bag-item__remove {
  align-self: start;
  width: 26px;
  height: 26px;
  flex: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  transition: color .3s ease;
}

.bag-item__remove:hover { color: var(--ink); }

.bag__foot {
  padding: 24px 28px 28px;
  border-top: 1px solid var(--rule);
}

.bag__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.bag__total-label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.bag__total-value {
  font-family: var(--font-display);
  font-size: 24px;
}

.btn--checkout {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
  padding: 19px;
  background: var(--ink);
  color: var(--ivory-light);
  letter-spacing: 0.22em;
}

.btn--checkout:hover { background: var(--accent); }

.btn--checkout:disabled {
  background: var(--rule);
  color: var(--muted);
  cursor: not-allowed;
}

.btn--checkout:disabled:hover { background: var(--rule); }

.bag__policy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  cursor: pointer;
}

.bag__policy input[type="checkbox"] {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--ink);
  cursor: pointer;
}

.bag__policy span {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink);
}

.bag__policy-title {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--ink);
}

.bag__points {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
}

.bag__points-label span {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--muted-warm);
}

.bag__points-input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.bag__points-input-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--rule-input);
  font-family: var(--font-body);
  font-size: 13px;
  background: none;
  color: var(--ink);
}

.bag__points-input-row input:focus { outline: none; border-color: var(--accent); }

.bag__points-final {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  text-align: right;
  color: var(--ink);
}

.bag__points-final span { font-weight: 500; }

.bag__fineprint {
  margin-top: 12px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---------------------------------------------------------- login modal --- */

.login-modal {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 96;
  width: min(380px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--ivory-light);
  padding: 40px 32px 32px;
  box-shadow: 0 24px 60px rgba(12, 11, 10, .22);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -46%);
  transition: opacity .45s var(--ease), visibility .45s var(--ease), transform .45s var(--ease);
}

body.login-open .login-modal {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
}

body.login-open .backdrop#login-backdrop { opacity: 1; visibility: visible; }
body.login-open { overflow: hidden; }

.login-modal__close {
  position: absolute;
  top: 16px; right: 18px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
}

.login-modal__close:hover { color: var(--ink); }

.login-modal__eyebrow {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.login-modal__title {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
}

.login-form {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* display:flex above otherwise beats the UA [hidden] rule (author styles
   win over UA styles at equal specificity), so a hidden .login-form would
   stay visible — this is what setAppointmentFormMode() in main.js relies
   on to actually hide #mypage-appointment-form. */
.login-form[hidden] { display: none; }

.login-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-form__field span {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.login-form__field input,
.login-form__field textarea,
.login-form__field select {
  width: 100%;
  padding: 12px 2px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule-input);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  transition: border-color .3s ease;
  -webkit-appearance: none;
  appearance: none;
  resize: vertical;
}

.login-form__field input:focus,
.login-form__field textarea:focus,
.login-form__field select:focus { border-color: var(--accent); }

.login-form__field input:read-only {
  color: var(--muted-warm);
  cursor: default;
}

.login-form__field input:read-only:focus { border-color: var(--rule-input); }

.login-form__zonecode-group {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.login-form__zonecode-group input {
  flex: 1;
  min-width: 0;
}

.login-form__search-btn {
  flex: none;
  padding: 12px 16px;
  background: none;
  border: 1px solid var(--rule-input);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--ink);
  transition: border-color .3s ease, color .3s ease;
}

.login-form__search-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.login-form__radios {
  display: flex;
  gap: 28px;
  padding-top: 4px;
}

.login-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted-warm);
}

.login-form__checkbox sup {
  color: var(--accent);
  font-size: 10px;
}

.login-form__checkbox input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid var(--rule-input);
  cursor: pointer;
  position: relative;
  transition: border-color .3s ease, background-color .3s ease;
}

.login-form__checkbox input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.login-form__checkbox input:checked::after {
  content: '';
  position: absolute;
  top: 2px; left: 5px;
  width: 4px;
  height: 8px;
  border: solid var(--ivory-light);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.login-form__date-group {
  display: flex;
  gap: 14px;
}

.login-form__date-group select {
  flex: 1;
  min-width: 0;
  padding: 12px 18px 12px 2px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule-input);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .3s ease;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                     linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 4px top 60%, right 10px top 60%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.login-form__date-group select:invalid { color: var(--muted); }
.login-form__date-group select:focus { border-color: var(--accent); }

.login-form__radio {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
}

.login-form__radio sup {
  color: var(--accent);
  font-size: 10px;
}

.login-form__radio input {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1px solid var(--rule-input);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: border-color .3s ease;
}

.login-form__radio input:checked {
  border-color: var(--accent);
}

.login-form__radio input:checked::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}

.login-form__error {
  font-family: var(--font-body);
  font-size: 11px;
  color: #B4483C;
}

.login-form__result {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  padding: 14px 16px;
  background: var(--ivory);
  border: 1px solid var(--rule);
}

.login-modal .btn--checkout { margin-top: 4px; }

.login-modal__desc {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted-warm);
}

.login-modal__switch {
  margin-top: 22px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted-warm);
}

.login-modal__find {
  margin-top: 12px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
}

.login-modal__find-divider {
  margin: 0 10px;
  color: var(--rule-input);
}

.login-modal__link {
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  text-decoration: underline;
  color: var(--ink);
}

.login-modal__find .login-modal__link { margin-left: 0; font-size: 11px; }

.login-modal__link:hover { color: var(--accent); }

/* ------------------------------------------------------- appointment date picker --- */

.date-picker { position: relative; }

.date-picker input[type="text"] {
  cursor: pointer;
}

.login-form__field .date-picker input:read-only {
  color: var(--ink);
  cursor: pointer;
}

.date-picker__calendar {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 5;
  width: 280px;
  padding: 14px;
  background: var(--ivory-light);
  border: 1px solid var(--rule-input);
  box-shadow: 0 18px 40px rgba(12, 11, 10, .16);
}

.date-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.date-picker__label {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.date-picker__nav {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  color: var(--muted);
}

.date-picker__nav:hover { color: var(--accent); }

.date-picker__weekdays,
.date-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.date-picker__weekdays span {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-bottom: 6px;
}

.date-picker__day {
  aspect-ratio: 1;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 50%;
}

.date-picker__day:hover:not(:disabled) { background: rgba(12, 11, 10, .06); }

.date-picker__day--today { color: var(--accent); font-weight: 600; }

.date-picker__day--selected {
  background: var(--ink) !important;
  color: var(--ivory-light) !important;
}

.date-picker__day--disabled {
  color: var(--muted-warm);
  opacity: .4;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- my page --- */

.mypage-modal {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 96;
  width: min(440px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--ivory-light);
  box-shadow: 0 24px 60px rgba(12, 11, 10, .22);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -46%);
  transition: opacity .45s var(--ease), visibility .45s var(--ease), transform .45s var(--ease);
}

body.mypage-open .mypage-modal {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
}

body.mypage-open .backdrop#mypage-backdrop { opacity: 1; visibility: visible; }
body.mypage-open { overflow: hidden; }

.mypage-modal__inner { padding: 40px 32px 36px; }

.mypage-info {
  margin-top: 24px;
  border: 1px solid var(--rule);
}

.mypage-info__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
}

.mypage-info__row + .mypage-info__row { border-top: 1px solid var(--rule-soft); }

.mypage-info__row span:first-child {
  flex: none;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.mypage-info__row span:last-child {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  text-align: right;
}

.mypage-modal .login-form { margin-top: 24px; }

.mypage-subtitle {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
}

.mypage-back {
  margin-top: 24px;
  display: inline-block;
}

.mypage-menu {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
}

.mypage-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 2px;
  background: none;
  border: none;
  border-top: 1px solid var(--rule-soft);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: color .3s ease;
}

.mypage-menu__item:last-child { border-bottom: 1px solid var(--rule-soft); }
.mypage-menu__item:hover { color: var(--accent); }

.mypage-menu__item::after {
  content: '→';
  color: var(--muted);
  font-size: 13px;
}

.mypage-menu__badge {
  position: absolute;
  top: 6px;
  right: 2px;
  font-family: var(--font-ui, var(--font-body));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #1f8a3b;
}

.mypage-menu__badge[hidden] { display: none; }

/* -------------------------------------------------- mypage list panels --- */
/* Shared by 주문내역 / 1:1 문의 / 상담 예약 panels. */

.mypage-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mypage-list__empty {
  padding: 24px 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.mypage-list__item {
  border: 1px solid var(--rule);
  padding: 16px;
}

.mypage-list__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mypage-list__title {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
}

.mypage-list__date {
  flex: none;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.mypage-list__status {
  display: inline-block;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.mypage-list__body {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
}

.mypage-list__reply {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
}

.mypage-list__reply-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.mypage-list__reply-text {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  white-space: pre-wrap;
}

.mypage-list__edit {
  margin-top: 10px;
  margin-right: 16px;
  display: inline-block;
}

.mypage-review {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
}

.mypage-review__form { margin-top: 12px; }

.mypage-review__notice {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.mypage-review__status {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.mypage-review__photo {
  margin-top: 10px;
  max-width: 160px;
  display: block;
}

.mypage-review__body {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
}

.mypage-points__balance {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
}
.mypage-points__balance strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--accent);
  margin-right: 2px;
}

.mypage-points__reserved {
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
}

.mypage-points__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.mypage-points__amount--plus { color: #2E7D32; }
.mypage-points__amount--minus { color: #A33; }

.mypage-recraft {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
}

/* Override .care-faq__link's thin, muted accent color — this toggle sits
   inside a dense order card and needs to read clearly at a glance. */
.mypage-recraft__toggle {
  color: var(--ink);
  font-weight: 600;
}

.mypage-recraft__toggle:hover,
.mypage-recraft__toggle:focus-visible {
  color: var(--accent);
}

.mypage-recraft__status {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.mypage-recraft__desc {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted-warm);
}

.mypage-recraft__timeline {
  margin: 6px 0 0;
  padding-left: 14px;
  list-style: none;
}
.mypage-recraft__timeline li {
  position: relative;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--muted);
}
.mypage-recraft__timeline li::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rule);
}

.mypage-recraft__cta {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 14px auto 0;
}

.mypage-recraft__error {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  color: #B4483C;
}

.mypage-list-heading {
  margin-top: 32px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
}

/* ---------------------------------------------------------- alert modal --- */

.alert-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 11, 10, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

body.alert-open .alert-modal { opacity: 1; visibility: visible; }
body.alert-open { overflow: hidden; }

.alert-modal__box {
  width: min(320px, 88vw);
  background: var(--ivory-light);
  padding: 36px 28px 28px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(12, 11, 10, .3);
  transform: translateY(10px);
  transition: transform .35s var(--ease);
}

body.alert-open .alert-modal__box { transform: translateY(0); }

.alert-modal__brand {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.alert-modal__message {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}

.alert-modal .btn--checkout { margin-top: 24px; }

/* ------------------------------------------------------ patent lightbox --- */

.patent-lightbox {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(12, 11, 10, .92);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

body.patent-lightbox-open .patent-lightbox { opacity: 1; visibility: visible; }
body.patent-lightbox-open { overflow: hidden; }

.patent-lightbox__figure {
  margin: 0;
  max-width: min(520px, 90vw);
  text-align: center;
  transform: translateY(10px);
  transition: transform .35s var(--ease);
}

body.patent-lightbox-open .patent-lightbox__figure { transform: translateY(0); }

.patent-lightbox__figure img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}

.patent-lightbox__figure figcaption {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(251, 249, 245, .72);
}

.patent-lightbox__close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(251, 249, 245, .3);
  background: none;
  color: var(--ivory-light);
  font-size: 16px;
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}

.patent-lightbox__close:hover,
.patent-lightbox__close:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

.gallery-video-cta {
  margin-top: 24px;
  text-align: center;
}

.video-lightbox-trigger {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
}

.video-lightbox-trigger:hover,
.video-lightbox-trigger:focus-visible {
  color: var(--ink);
}

.gallery-video-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 34px;
  background: none;
  border: 1px solid var(--accent);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}

.gallery-video-cta__btn::after {
  content: '▶';
  font-size: 9px;
}

.gallery-video-cta__btn:hover,
.gallery-video-cta__btn:focus-visible {
  background: var(--accent);
  color: var(--ivory-light);
}

/* -------------------------------------------------------- video lightbox --- */

.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: rgba(12, 11, 10, .92);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  overflow-y: auto;
}

body.video-lightbox-open .video-lightbox { opacity: 1; visibility: visible; }
body.video-lightbox-open { overflow: hidden; }

.video-lightbox__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 920px;
  margin: auto;
  transform: translateY(10px);
  transition: transform .35s var(--ease);
}

body.video-lightbox-open .video-lightbox__inner { transform: translateY(0); }

.video-lightbox__item {
  width: min(420px, 100%);
}

.video-lightbox__item video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}

.video-lightbox__label {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(251, 249, 245, .72);
  text-align: center;
}

.video-lightbox__close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(251, 249, 245, .3);
  background: none;
  color: var(--ivory-light);
  font-size: 16px;
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}

.video-lightbox__close:hover,
.video-lightbox__close:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

/* ------------------------------------------------------ policy confirm --- */
/* Popup shown when the bag's "[필수] 실물 영상 및 상품정보 확인" checkbox is
   checked — the checkbox stays unchecked until "확인했습니다" is clicked. */

.policy-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 11, 10, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

body.policy-confirm-open .policy-confirm-modal { opacity: 1; visibility: visible; }
body.policy-confirm-open { overflow: hidden; }

.policy-confirm-modal__box {
  width: min(420px, 92vw);
  background: var(--ivory-light);
  padding: 36px 32px 28px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(12, 11, 10, .3);
  transform: translateY(10px);
  transition: transform .35s var(--ease);
}

body.policy-confirm-open .policy-confirm-modal__box { transform: translateY(0); }

.policy-confirm-modal__brand {
  display: block;
  width: 130px;
  height: auto;
  margin: 0 auto;
}

.policy-confirm-modal__title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.policy-confirm-modal__message {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
  text-align: left;
}

.policy-confirm-modal__video-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 14px 28px;
  background: none;
  border: 1px solid var(--accent);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}

.policy-confirm-modal__video-btn::after {
  content: '▶';
  font-size: 9px;
}

.policy-confirm-modal__video-btn:hover,
.policy-confirm-modal__video-btn:focus-visible {
  background: var(--accent);
  color: var(--ivory-light);
}

.policy-confirm-modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.policy-confirm-modal__back {
  flex: 1;
  background: none;
  border: 1px solid rgba(12, 11, 10, .25);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 14px;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}

.policy-confirm-modal__back:hover,
.policy-confirm-modal__back:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
}

.policy-confirm-modal__actions .btn--checkout {
  flex: 1;
  width: auto;
  margin-top: 0;
}

/* -------------------------------------------------------- terms confirm --- */
/* Popup shown when the bag's "[필수] 주문제작 및 청약철회 제한 동의" checkbox
   is checked — the checkbox stays unchecked until "동의합니다" is clicked. */

.terms-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 11, 10, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

body.terms-confirm-open .terms-confirm-modal { opacity: 1; visibility: visible; }
body.terms-confirm-open { overflow: hidden; }

.terms-confirm-modal__box {
  position: relative;
  width: min(520px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--ivory-light);
  padding: 40px 40px 32px;
  box-shadow: 0 24px 60px rgba(12, 11, 10, .3);
  transform: translateY(10px);
  transition: transform .35s var(--ease);
}

body.terms-confirm-open .terms-confirm-modal__box { transform: translateY(0); }

.terms-confirm-modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  transition: color .3s ease;
}

.terms-confirm-modal__close:hover,
.terms-confirm-modal__close:focus-visible {
  color: var(--ink);
}

.terms-confirm-modal__eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.terms-confirm-modal__title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.terms-confirm-modal__body {
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
}

.terms-confirm-modal__note {
  margin-top: 18px;
  padding: 16px 18px;
  background: rgba(168, 139, 92, .08);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
}

.terms-confirm-modal__question {
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.terms-confirm-modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.terms-confirm-modal__decline {
  flex: 1;
  background: none;
  border: 1px solid rgba(12, 11, 10, .25);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 16px;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}

.terms-confirm-modal__decline:hover,
.terms-confirm-modal__decline:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
}

.terms-confirm-modal__actions .btn--checkout {
  flex: 1.4;
  width: auto;
  margin-top: 0;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------- policy modal --- */
/* Popup for footer's "교환 · 반품" — its content is cloned at click time from
   the #order-policy block already in the CARE section (see main.js), so the
   text only has to be maintained in one place. */

.policy-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 18, 15, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}

.policy-modal[aria-hidden="false"] { opacity: 1; visibility: visible; }
body.policy-modal-open { overflow: hidden; }

.policy-modal__panel {
  position: relative;
  width: min(640px, 100%);
  max-height: 84vh;
  background: var(--ivory-light);
  border: 1px solid var(--rule);
  box-shadow: 0 30px 70px rgba(12, 11, 10, .28);
  transform: translateY(12px);
  transition: transform .35s var(--ease);
}

.policy-modal[aria-hidden="false"] .policy-modal__panel { transform: translateY(0); }

.policy-modal__close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  transition: color .3s ease;
}
.policy-modal__close:hover,
.policy-modal__close:focus-visible { color: var(--ink); }

.policy-modal__scroll {
  max-height: 84vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 48px 44px 40px;
}

.specs__detail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 22px;
  padding: 16px 2px;
  background: none;
  border: none;
  border-top: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: color .3s ease;
}
.specs__detail-link-arrow {
  font-size: 14px;
  font-weight: 300;
  color: var(--accent);
  transition: color .3s ease, transform .3s ease;
}
.specs__detail-link:hover,
.specs__detail-link:focus-visible { color: var(--accent); }
.specs__detail-link:hover .specs__detail-link-arrow,
.specs__detail-link:focus-visible .specs__detail-link-arrow { transform: rotate(90deg); }

.product-detail__eyebrow {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

.product-detail__title {
  margin: 10px 0 32px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  color: var(--ink);
}

.product-detail__list { margin: 0; }

.product-detail__row {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--rule-soft);
}
.product-detail__row:last-child { border-bottom: 1px solid var(--rule-soft); }

.product-detail__row dt {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.product-detail__row dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink);
}

.product-detail__link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  transition: color .3s ease;
}
.product-detail__link:hover,
.product-detail__link:focus-visible { color: var(--ink); }

@media (max-width: 480px) {
  .product-detail__row { grid-template-columns: 84px 1fr; gap: 14px; }
}

.policy-modal__scroll .care-policy__more-toggle { display: none; }
.policy-modal__scroll .care-policy__more { display: block !important; }

.review-detail-goto {
  display: block;
  margin-top: 28px;
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  transition: color .25s ease;
}
.review-detail-goto:hover,
.review-detail-goto:focus-visible { color: var(--accent); }

@media (max-width: 480px) {
  .policy-modal { padding: 0; }
  .policy-modal__panel { width: 100%; max-height: 100vh; border: none; }
  .policy-modal__scroll { max-height: 100vh; padding: 36px 22px 28px; }
}

/* -------------------------------------------------------- address modal --- */

.address-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 11, 10, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

body.address-open .address-modal { opacity: 1; visibility: visible; }
body.address-open { overflow: hidden; }

.address-modal__box {
  width: min(420px, 92vw);
  height: min(560px, 86vh);
  display: flex;
  flex-direction: column;
  background: var(--ivory-light);
  box-shadow: 0 24px 60px rgba(12, 11, 10, .3);
}

.address-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule);
  flex: none;
}

.address-modal__title {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.address-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
}

.address-modal__close:hover { color: var(--ink); }

.address-modal__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.address-modal__status {
  margin: auto;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-warm);
  text-align: center;
}

#address-modal-retry { margin: 4px auto 0; }

.address-modal__layer {
  flex: 1;
  min-height: 0;
}

.address-modal__layer iframe {
  width: 100% !important;
  height: 100% !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Buy panel loses its second column before the images get cramped */
@media (max-width: 1180px) {
  .product__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }

  .buy {
    position: static;
    max-width: 640px;
  }

  .buy__title { font-size: 52px; }
}

@media (max-width: 1024px) {
  :root {
    --section-y: 96px;
    --pad-x: 28px;
  }

  .intro { padding: 96px var(--pad-x); }
  .product { padding: 0 var(--pad-x) 104px; }

  .craft__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    margin-top: 56px;
  }

  .footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    padding: 64px var(--pad-x) 40px;
  }
}

/* ---- Tablet / phone: the header collapses to a menu ---- */
@media (max-width: 900px) {
  /* The bar is shorter here, so anchor jumps need less clearance */
  :root { --header-h: 68px; }

  .header__inner {
    grid-template-columns: auto 1fr auto;
    padding: 16px var(--pad-x);
    transition: color .6s ease, padding-top .4s ease;
  }

  /* At the top of the page the header floats over the hero's announcement
     band; drop it clear of the band until the header goes solid. */
  .header:not(.is-stuck) .header__inner { padding-top: 46px; }

  /* Nav links move into the drawer */
  .header__nav { display: none; }

  .header__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    justify-self: start;
    pointer-events: auto;
  }

  .header__toggle span {
    display: block;
    width: 22px;
    height: 1px;
    background: currentColor;
    transition: transform .3s ease, opacity .2s ease;
  }

  .header.is-menu-open .header__toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .header.is-menu-open .header__toggle span:nth-child(2) { opacity: 0; }

  .header.is-menu-open .header__toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Menu panel is opaque, so force the ink palette while it is open */
  .header.is-menu-open .header__bg { opacity: 1; }
  .header.is-menu-open .header__inner { color: var(--ink); }

  /* The open panel hides the announcement band, so the 46px clearance above
     would only read as an empty strip — take it back. */
  .header.is-menu-open .header__inner { padding-top: 16px; }

  .header__actions { gap: 18px; }
  .header__actions .header__search { display: none; }

  /* 16px links are a 16px-tall tap target — pad them out to ~32px */
  .header__actions a,
  .header__actions .link-btn { padding: 10px 0; white-space: nowrap; }

  /* Without this the brand's <a> stretches across the middle grid column and
     a tap anywhere near the centre of the bar jumps to the top. */
  .brand { justify-self: center; }

  .brand__name { font-size: 21px; }
  .brand__sub  { font-size: 7px; }

  .header__drawer {
    display: grid;
    position: relative;
    grid-template-rows: 0fr;
    background: var(--ivory-light);
    color: var(--ink);
    transition: grid-template-rows .45s var(--ease);
    pointer-events: auto;
  }

  .header.is-menu-open .header__drawer { grid-template-rows: 1fr; }

  .header__drawer-inner {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .header__drawer a,
  .header__drawer-login {
    padding: 17px var(--pad-x);
    border-top: 1px solid var(--rule-soft);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .header__drawer-login {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
  }

  /* Layout */

  /* svh, not vh: on a phone the dynamic URL bar makes 100vh taller than the
     screen, which pushes the CTA row out of sight on first paint. */
  .hero {
    height: 100svh;
    min-height: min(480px, 100svh);
  }

  .hero__foot {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .hero__aside {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
  }

  .hero__meta { text-align: left; }
  .cue { display: none; }

  .movement__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .stats { margin-top: 56px; }

  /* The scrim is a left-to-right wash built for the wide crop. Once the frame
     narrows the copy lands on the model's lit cheek, so darken from below. */
  .campaign__scrim {
    background: linear-gradient(
      180deg,
      rgba(12, 11, 10, 0) 14%,
      rgba(12, 11, 10, .74) 48%,
      rgba(12, 11, 10, .97) 100%
    );
  }

  /* The kicker is the smallest type on the page and it sits on skin tones */
  .campaign__kicker { color: rgba(251, 249, 245, .92); }


  .campaign__copy {
    left: var(--pad-x);
    right: var(--pad-x);
    bottom: 40px;
    max-width: none;
    text-align: left;
  }

  /* 13px inputs make iOS Safari zoom the page on focus and never zoom back */
  .newsletter__input { font-size: 16px; }
  .newsletter__submit { padding: 14px 12px; }

  /* Stacked footer links were a 17px-tall tap target */
  .footer__links { gap: 2px; }
  .footer__links a { padding: 9px 0; }
  .footer__legal-links a { padding: 6px 0; }

  .field__link { padding: 10px 0 10px 14px; margin-block: -10px; }
}

@media (max-width: 640px) {
  :root {
    --section-y: 76px;
    --pad-x: 22px;
  }

  .intro { padding: 76px var(--pad-x); }
  .product { padding: 0 var(--pad-x) 80px; }

  /* min() so a phone held sideways is not handed a hero taller than itself */
  .hero { height: 92svh; min-height: min(520px, 100svh); }
  .hero__eyebrow span { font-size: 13px; }
  .hero__eyebrow::before { width: 22px; }
  .hero__lead { font-size: 14px; }

  .btn { padding: 15px 22px; font-size: 10px; letter-spacing: 0.16em; }
  .hero__cta { gap: 8px; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }

  .hero__playpause { width: 44px; height: 44px; }

  .hero__sound {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .hero__sound-label { display: none; }

  .intro__statement { font-size: clamp(22px, 6.2vw, 30px); }

  .thumb-row { gap: 10px; }
  .media-block { margin-top: 10px; }

  .buy__title { font-size: 44px; }
  .buy__amount { font-size: 26px; }

  .buy__actions { flex-wrap: wrap; }
  .btn--add { flex: 1 1 100%; }
  .btn--inquiry { flex: 1 1 100%; }

  .size { width: 44px; height: 44px; }
  .metals { grid-template-columns: 1fr; }

  .specs__row { grid-template-columns: 72px 1fr; gap: 14px; }

  .craft__steps { grid-template-columns: minmax(0, 1fr); gap: 34px; }

  .step:has(.patent-proof) { grid-template-columns: 1fr; }
  .patent-proof { grid-column: 1; grid-row: auto; margin-top: 18px; }
  .patent-proof img { height: 220px; }

  .stats { grid-template-columns: minmax(0, 1fr); }

  .campaign { height: 68vh; min-height: 420px; }
  .campaign__kicker { font-size: 11px; letter-spacing: 0.24em; }

  .newsletter { padding: 64px var(--pad-x); }

  .footer__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .footer__legal {
    justify-content: flex-start;
    gap: 12px;
  }

  .footer__legal-links { gap: 16px; }

  .bag__head, .bag__list, .bag__foot { padding-left: 20px; padding-right: 20px; }

  .bag-item__remove {
    width: 40px;
    height: 40px;
    margin: -7px -9px 0 0;
  }

  /* Full-screen so the embedded Kakao Postcode layer never gets clipped */
  .address-modal__box {
    width: 100vw;
    height: 100dvh;
  }
}

/* ---- Landscape phone: height, not width, is the scarce axis ---- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .hero__foot { padding-bottom: 18px; }
  .hero__title { font-size: clamp(28px, 6vw, 40px); }
  .hero__lead { display: none; }
  .hero__eyebrow span { font-size: 14px; }

  .header:not(.is-stuck) .header__inner { padding-top: 38px; }

  .campaign { height: 100svh; min-height: 0; }
}

/* ---- Small phones (SE class): the bar runs out of room ---- */
@media (max-width: 400px) {
  .header__inner { gap: 12px; }

  /* Contact is one tap away in the drawer; keeping it here wrapped "Bag (0)"
     onto a second line at 320px. */
  .header__actions > a { display: none; }

  .brand__name { font-size: 19px; }
  .brand__sub  { letter-spacing: 0.34em; padding-left: 0.34em; }

  /* The hard <br>s in the heading re-wrapped into five ragged lines */
  .craft__title { font-size: clamp(22px, 6.6vw, 30px); }

  .buy__title { font-size: 38px; }
  .buy__amount { font-size: 23px; }
  .buy__price { flex-wrap: wrap; gap: 4px 12px; }

  .figure-caption__title { font-size: 17px; }
  .media-caption__label { font-size: 11px; }
}