/* ================================================================
   Mr. Ink — monochrome editorial fashion
   ================================================================ */
/* ================================================================
   Brand face — Snell Roundhand (licensed, self-hosted)
   ----------------------------------------------------------------
   Family name taken from the files' own `name` table (name ID 1):
     snellroundhand_bold.otf   -> "Snell Roundhand" / Bold  / usWeightClass 700
     snellroundhand_black.otf  -> "Snell Roundhand" / Black / usWeightClass 900
   Both faces are upright (head.macStyle = 0), so font-style is normal —
   the script's slant is drawn into the outlines, never synthesised.
   The .otf files carry TrueType-flavoured outlines (glyf/loca); "opentype"
   is the correct sfnt format keyword for them, and they are served as-is
   (no conversion, no external/webfont-CDN request).
   URLs are relative to THIS stylesheet, which lives beside the fonts, so
   they resolve from every page (/, /account/, /help/) with no per-page path.
   ================================================================ */
@font-face {
  font-family: "Snell Roundhand";
  src: url("snellroundhand_bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Snell Roundhand";
  src: url("snellroundhand_black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --background: #f2f1ed;
  --foreground: #131311;
  --muted: #6d6b64;
  --border: #d3d1ca;
  --dark: #131311;
  --dark-text: #f2f1ed;

  --font-display: "Cormorant Garamond", "Didot", Georgia, serif;
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* brand script — logo/wordmark only, never UI or body copy */
  --font-logo: "Snell Roundhand", "Snell Roundhand Black", "Apple Chancery", var(--font-display);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 3.5rem;
  --space-5: 6rem;
  --space-6: 9rem;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- page transition (smooth navigation) ---------- */
@media (prefers-reduced-motion: no-preference) {
  body { animation: page-in 0.7s var(--ease); }
  @keyframes page-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ---------- utilities ---------- */
/* author display values (grid/flex) must never override the hidden attribute */
[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -3rem;
  z-index: 200;
  padding: 0.5rem 1rem;
  background: var(--dark);
  color: var(--dark-text);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: var(--space-2); }

.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;
  border: 0;
}

.label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.text-link {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.35s var(--ease), letter-spacing 0.35s var(--ease);
}
.text-link:hover,
.text-link:focus-visible { opacity: 0.55; letter-spacing: 0.3em; }

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

:focus-visible { outline: 1px solid var(--foreground); outline-offset: 4px; }

/* ================================================================
   Header
   ================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--background) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.1rem var(--gutter);
}

.brand {
  /* Snell Roundhand Black (900) — the Mr. Ink wordmark */
  font-family: var(--font-logo);
  font-style: normal; /* the slant is drawn in; never synthesise oblique */
  font-weight: 900;
  font-size: clamp(1.625rem, 2vw, 1.75rem); /* 26px -> 28px */
  /* a connected script must not be tracked: 0.06em broke the I-n / n-k joins,
     and body's inherited 0.01em has to be reset explicitly */
  letter-spacing: 0;
  /* pinned to the .icon-btn height so the header row — and therefore the
     header height — is exactly what it was before the script was introduced.
     Snell Roundhand only inks 0.748em, so nothing is clipped. */
  line-height: 2.25rem;
  text-align: center;
  /* the ink centre sits 0.0515em above the line-box centre at any line-height
     (the leading term cancels out), so nudge it down to the optical centre */
  transform: translateY(0.05em);
  transition: opacity 0.35s var(--ease);
}
.brand:hover { opacity: 0.6; }

.header-actions {
  display: flex;
  justify-content: flex-end;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  transition: opacity 0.3s var(--ease);
}
.icon-btn:hover { opacity: 0.5; }

/* membership register link beside the utility icons */
.header-actions__join {
  align-self: center;
  margin-left: 0.35rem;
  padding-bottom: 0.15rem;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--foreground);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, opacity 200ms ease;
}
.header-actions__join:hover { border-bottom-color: var(--foreground); }
.header-actions__join:focus-visible {
  outline: 1px solid var(--foreground);
  outline-offset: 3px;
}
.header-actions__join[aria-current="page"] { border-bottom-color: var(--border); }


.icon-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* hamburger */
.menu-toggle {
  justify-self: start;
  flex-direction: column;
  gap: 6px;
}
.menu-toggle__line {
  display: block;
  width: 1.35rem;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__line:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__line:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ================================================================
   Full-screen menu
   ================================================================ */
.full-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-5) var(--gutter) var(--space-3);
  background: var(--dark);
  color: var(--dark-text);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}
.full-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--ease);
}

.full-menu__nav ol { counter-reset: menu; }

.full-menu__nav ol > li {
  counter-increment: menu;
  border-bottom: 1px solid rgba(242, 241, 237, 0.14);
}

.full-menu__nav ol > li > a,
.full-menu__subtoggle {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  width: 100%;
  text-align: left;
  padding: clamp(0.7rem, 2.2vh, 1.4rem) 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 5.5vw, 3.4rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
  transform: translateY(0.6em);
  opacity: 0;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), padding-left 0.4s var(--ease);
}
.full-menu.is-open .full-menu__nav ol > li > a,
.full-menu.is-open .full-menu__subtoggle { opacity: 1; transform: translateY(0); }
.full-menu.is-open .full-menu__nav ol > li:nth-child(1) > a { transition-delay: 0.08s; }
.full-menu.is-open .full-menu__nav ol > li:nth-child(2) .full-menu__subtoggle { transition-delay: 0.14s; }
.full-menu.is-open .full-menu__nav ol > li:nth-child(3) > a { transition-delay: 0.2s; }
.full-menu.is-open .full-menu__nav ol > li:nth-child(4) > a { transition-delay: 0.26s; }
.full-menu.is-open .full-menu__nav ol > li:nth-child(5) > a { transition-delay: 0.32s; }

.full-menu__nav ol > li > a::before,
.full-menu__subtoggle::before {
  content: "0" counter(menu);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  color: rgba(242, 241, 237, 0.45);
}
.full-menu__nav ol > li > a:hover,
.full-menu__subtoggle:hover { padding-left: 1rem; }

/* ---------- collection submenu ---------- */
/* chevron: points right (>) when closed, rotates to point down (v) when open */
.full-menu__subtoggle-icon {
  align-self: center;
  margin-left: auto;
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  border-right: 1px solid rgba(242, 241, 237, 0.7);
  border-bottom: 1px solid rgba(242, 241, 237, 0.7);
  transform: rotate(-45deg);
  transition: transform 0.3s var(--ease);
}
.full-menu__subtoggle[aria-expanded="true"] .full-menu__subtoggle-icon {
  transform: rotate(45deg);
}

/* hidden by default: zero height, invisible, takes no space */
.full-menu__submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s var(--ease);
}
.full-menu__submenu.is-open { grid-template-rows: 1fr; }

.full-menu__submenu > ul {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  /* indented to sit under the "Collection" label (number column + gap) */
  padding-left: clamp(2.1rem, 5vw, 2.75rem);
  transition: opacity 0.26s var(--ease), visibility 0s linear 0.26s;
}
.full-menu__submenu.is-open > ul {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.26s var(--ease) 0.05s;
}

/* defensive reset: submenu entries are NOT top-level menu rows */
.full-menu__submenu li {
  counter-increment: none;
  border-bottom: 0;
}
.full-menu__submenu a::before { content: none; }

/* compact, lightweight links — small sans type, tight rhythm */
.full-menu__submenu a {
  display: inline-block;
  padding: 0.3rem 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(242, 241, 237, 0.6);
  opacity: 1;
  transform: none;
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.full-menu__submenu li:first-child a { padding-top: 0; }
.full-menu__submenu li:last-child a { padding-bottom: clamp(0.7rem, 2vh, 1.1rem); }
.full-menu__submenu a:hover,
.full-menu__submenu a:focus-visible {
  color: var(--dark-text);
  padding-left: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .full-menu__submenu,
  .full-menu__submenu > ul,
  .full-menu__subtoggle-icon { transition: none; }
}

.full-menu__foot {
  margin-top: var(--space-4);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242, 241, 237, 0.45);
}

body.menu-open { overflow: hidden; }

/* ================================================================
   Hero
   ================================================================ */
.hero {
  position: relative;
  height: 72vh;
  min-height: 26rem;
  overflow: hidden;
  background: var(--dark);
}

.hero__media {
  position: absolute;
  inset: -6% 0;
  will-change: transform;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.hero__caption {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(2rem, 7vh, 4.5rem);
  color: var(--dark-text);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: flex-start;
}

.hero__season {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  letter-spacing: 0.08em;
  line-height: 1;
}

.hero__index {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2rem, 7vh, 4.5rem);
  color: rgba(242, 241, 237, 0.55);
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

/* ================================================================
   About
   ================================================================ */
.about {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: var(--space-6) var(--gutter);
}

.about__media { position: relative; }
.about__media img {
  width: 100%;
  aspect-ratio: 10 / 13;
  object-fit: cover;
  filter: grayscale(1);
}

.about__caption {
  margin-top: 0.8rem;
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  max-width: 30rem;
}

.about__lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.5;
  color: var(--foreground);
}

.about__text p:not(.about__lead) { color: var(--muted); }
.about__text .text-link { margin-top: 0.75rem; }

/* ================================================================
   Collection / products
   ================================================================ */
.collection { padding: var(--space-6) var(--gutter); }

.collection__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-4);
}

.collection__count {
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  color: var(--muted);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

.product-card__link { display: block; }

.product-card__media {
  overflow: hidden;
  background: var(--border);
}
.product-card__media img {
  width: 100%;
  aspect-ratio: 7 / 9;
  object-fit: cover;
  filter: grayscale(1);
  transform: scale(1.001);
  transition: transform 0.9s var(--ease), filter 0.9s var(--ease);
}
.product-card__link:hover .product-card__media img,
.product-card__link:focus-visible .product-card__media img {
  transform: scale(1.045);
  filter: grayscale(1) contrast(1.08);
}

.product-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid transparent;
  transition: border-color 0.5s var(--ease);
}
.product-card__link:hover .product-card__meta { border-top-color: var(--border); }

.product-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}
.product-card__name span {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--muted);
  vertical-align: 0.15em;
  margin-left: 0.3rem;
}

.product-card__price {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  transition: color 0.4s var(--ease);
}
.product-card__link:hover .product-card__price { color: var(--foreground); }

.collection__more {
  margin-top: var(--space-5);
  text-align: center;
}

/* ================================================================
   Manifesto (dark strip)
   ================================================================ */
.manifesto {
  background: var(--dark);
  color: var(--dark-text);
  padding: var(--space-6) var(--gutter);
  text-align: center;
}

.manifesto blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.manifesto cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(242, 241, 237, 0.5);
}

/* ================================================================
   Footer
   ================================================================ */
.site-footer { border-top: 1px solid var(--border); }

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--gutter) var(--space-4);
  text-align: center;
}

.site-footer__brand {
  /* the same wordmark, one step lighter: Snell Roundhand Bold (700) */
  font-family: var(--font-logo);
  font-style: normal;
  font-weight: 700;
  font-size: 2.75rem;
  letter-spacing: 0;
  line-height: 1.2;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 3rem);
}
.site-footer__nav a {
  font-size: 0.6875rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.35s var(--ease);
}
.site-footer__nav a:hover { color: var(--foreground); }

.site-footer__legal {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ================================================================
   Reveal on scroll
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 900px) {
  :root { --space-6: 5.5rem; --space-5: 4rem; }

  /* tablet wordmark: 23px -> 25px across the band
     (ramp pinned to the band edges: 18.05px + 0.7722vw is 23px at 641px and
     25px at 900px, with the clamp ends guarding either side of the band) */
  .brand { font-size: clamp(1.4375rem, 1.1281rem + 0.7722vw, 1.5625rem); }

  /* Same rationale as the 640px band: the "Membership" text label is swapped
     for the equivalent account icon so the 23-25px script wordmark keeps an
     equal side column on both flanks and stays optically centred. */
  .header-actions__join { display: none; }

  .about {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .about__text { max-width: 34rem; }

  .product-grid { gap: 1.25rem; }
}

@media (max-width: 640px) {
  :root { --space-6: 4rem; }

  /* mobile wordmark: 20px -> 21px across the band
     (18.714px + 0.35714vw is exactly 20px at 360px and 21px at 640px) */
  .brand { font-size: clamp(1.25rem, 1.1696rem + 0.35714vw, 1.3125rem); }
  .site-footer__brand { font-size: 2.375rem; }

  /* Typography-driven swap so the script wordmark can stay centred:
     the 92px "Membership" TEXT label is replaced by the 36px account ICON,
     which is the same destination for signed-out visitors (js/account.js
     sends it to account/login.html) and opens the account menu when signed
     in. No icon is removed and no account functionality is lost. */
  .header-actions__join { display: none; }
  .header-actions__account { display: inline-flex; }

  .hero { height: 68vh; }
  .hero__index { display: none; }
  .hero__caption { align-items: center; left: 0; right: 0; text-align: center; }

  .about { text-align: left; }

  .product-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .product-card__media img { aspect-ratio: 4 / 5; }
}

/* Very narrow phones (<360px): 168px of the row is already spoken for by the
   hamburger (36) + the three icons and their gaps (132). At 20px the wordmark
   is only 76px wide and the usable width at 320px is 112px, so the script now
   clears every real phone width with room to spare. This rule is kept purely
   as a guard: should the row ever grow, it derives the largest size that still
   fits rather than letting the header overflow. "Mr. Ink" advances 3.8em in
   Snell Roundhand Black (measured from the font's own hmtx + kern tables), and
   the row is inset by --gutter per side, so the usable width is
   100vw - 2*--gutter - 168px. Below 500px --gutter is pinned at its 1.25rem
   floor rather than 4vw, so the gutter must be read from the token itself.

   NOTE on centring below ~380px: .site-header__inner is a 1fr auto 1fr grid,
   so once the wordmark claims all the slack the two 1fr tracks collapse to
   their min-content widths, which are unequal (36px hamburger vs the icon
   cluster). The wordmark therefore centres inside the space that is left
   rather than on the viewport axis. That is pre-existing behaviour - the old
   Cormorant wordmark was likewise off-axis at these widths - and correcting
   it would mean dropping an icon or taking the wordmark under 20px. */
@media (max-width: 359px) {
  .brand { font-size: min(1.25rem, calc((100vw - 2 * var(--gutter) - 168px) / 3.8)); }
}

/* ================================================================
   Reduced motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__media { transform: none !important; }
}

/* ================================================================
   Cart badge
   ================================================================ */
.icon-btn--cart { position: relative; }

.cart-count {
  position: absolute;
  top: 0;
  right: -0.15rem;
  min-width: 1rem;
  height: 1rem;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  color: var(--dark-text);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1;
  border-radius: 50%;
  padding: 0 0.2rem;
}
.cart-count.is-visible { display: inline-flex; }

/* ================================================================
   Product detail page
   ================================================================ */
.pdp-breadcrumb {
  display: flex;
  gap: 0.75rem;
  padding: var(--space-3) var(--gutter) 0;
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.pdp-breadcrumb a { transition: color 0.35s var(--ease); }
.pdp-breadcrumb a:hover { color: var(--foreground); }
.pdp-breadcrumb [aria-current] { color: var(--foreground); }

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding: var(--space-4) var(--gutter) var(--space-6);
}

/* ---------- media ---------- */
.pdp__image-btn {
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--border);
  cursor: zoom-in;
}
.pdp__image-btn img {
  width: 100%;
  aspect-ratio: 7 / 9;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform 1.2s var(--ease), opacity 0.45s var(--ease);
}
.pdp__image-btn:hover img { transform: scale(1.025); }
.pdp__image-btn img.is-fading { opacity: 0.35; }

.pdp__media-caption {
  margin-top: 0.8rem;
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- info column ---------- */
.pdp__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 30rem;
  position: sticky;
  top: 6rem;
}

.pdp__title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
}

.pdp__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  letter-spacing: 0.05em;
  line-height: 1.15;
}
.pdp__number {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--muted);
  vertical-align: 0.35em;
  margin-left: 0.4rem;
}

.pdp__price {
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  white-space: nowrap;
}

.pdp__field {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  border: 0;
}

.pdp__field-value {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.pdp__stock {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.4s var(--ease);
}
.pdp__stock.is-out { color: var(--foreground); }

.swatch.is-out { opacity: 0.45; }
.swatch.is-out::before {
  content: "";
  position: absolute;
  left: -0.2rem;
  right: -0.2rem;
  top: 50%;
  height: 1px;
  background: var(--muted);
  transform: rotate(-45deg);
}

.pdp__rule { border: 0; border-top: 1px solid var(--border); }

.pdp__description {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--muted);
}

/* ---------- swatches ---------- */
.swatches { display: flex; gap: 0.9rem; }

.swatch {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--swatch, #888);
  border: 1px solid var(--border);
  position: relative;
  transition: transform 0.4s var(--ease);
}
.swatch:hover { transform: scale(1.12); }
.swatch::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color 0.4s var(--ease);
}
.swatch[aria-checked="true"]::after { border-color: var(--foreground); }

/* ---------- sizes ---------- */
.sizes { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.size {
  min-width: 2.75rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.size:hover { border-color: var(--foreground); color: var(--foreground); }
.size[aria-checked="true"] {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--dark-text);
}

/* ---------- quantity ---------- */
.qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  width: max-content;
}
.qty__btn {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1rem;
  font-weight: 300;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}
.qty__btn:hover { color: var(--foreground); }
.qty__value {
  min-width: 2.75rem;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0.75rem 0;
}

/* ---------- add to cart ---------- */
.add-to-cart {
  align-self: flex-start;
  padding: 1rem 2.5rem;
  background: var(--dark);
  color: var(--dark-text);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: opacity 0.4s var(--ease), letter-spacing 0.4s var(--ease);
}
.add-to-cart:hover { opacity: 0.8; letter-spacing: 0.36em; }

.pdp__note {
  min-height: 1.2rem;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transform: translateY(0.4rem);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.pdp__note.is-visible { opacity: 1; transform: translateY(0); }
.pdp__note.is-error { color: var(--foreground); }

/* ================================================================
   Shopping cart page
   ================================================================ */
.cart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: var(--space-4) var(--gutter) var(--space-3);
}

.cart-head__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  letter-spacing: 0.05em;
  line-height: 1.1;
}

.cart-head__count {
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding: 0 var(--gutter) var(--space-5);
}

/* ---------- cart items ---------- */
.cart-items { border-top: 1px solid var(--border); }

.cart-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.cart-item__media {
  display: block;
  width: clamp(6rem, 12vw, 8.5rem);
  overflow: hidden;
  background: var(--border);
}
.cart-item__media img {
  width: 100%;
  aspect-ratio: 7 / 9;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform 1s var(--ease);
}
.cart-item__media:hover img { transform: scale(1.04); }

.cart-item__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.cart-item__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.cart-item__name a { transition: opacity 0.35s var(--ease); }
.cart-item__name a:hover { opacity: 0.6; }
.cart-item__name span {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--muted);
  vertical-align: 0.15em;
  margin-left: 0.3rem;
}

.cart-item__variant {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.qty--cart .qty__btn { width: 2.1rem; height: 2.1rem; font-size: 0.9rem; }
.qty--cart .qty__value { min-width: 2.1rem; padding: 0.45rem 0; font-size: 0.75rem; }

.cart-item__remove {
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.cart-item__remove:hover { color: var(--foreground); border-bottom-color: currentColor; }

.cart-item__price {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-align: right;
}
.cart-item__each {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.3rem;
}

/* ---------- order summary ---------- */
.cart-summary {
  position: sticky;
  top: 6rem;
  border: 1px solid var(--border);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.cart-summary__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

.summary-lines { display: flex; flex-direction: column; gap: 0.9rem; }

.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.summary-line dt {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.summary-line dd { font-size: 0.8125rem; letter-spacing: 0.08em; }

.summary-line--total {
  margin-top: 0.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}
.summary-line--total dt { color: var(--foreground); }
.summary-line--total dd {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
}

.cart-summary__note {
  margin-top: 1rem;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.checkout-btn {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  padding: 1rem 2.5rem;
  background: var(--dark);
  color: var(--dark-text);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  transition: opacity 0.4s var(--ease), letter-spacing 0.4s var(--ease);
}
.checkout-btn:hover { opacity: 0.8; letter-spacing: 0.36em; }
.checkout-btn:disabled { opacity: 0.45; cursor: wait; letter-spacing: 0.3em; }

.cart-summary__continue { margin-top: var(--space-3); text-align: center; }
.cart-summary__continue .text-link { font-size: 0.625rem; }

/* ---------- empty cart ---------- */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--gutter);
  text-align: center;
}
.cart-empty__line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  letter-spacing: 0.04em;
}

/* ---------- your picks ---------- */
.pick-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.pick-card__add {
  font-size: 0.6875rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.35s var(--ease), letter-spacing 0.35s var(--ease);
}
.pick-card__add:hover { opacity: 0.55; letter-spacing: 0.32em; }

.pick-card__note {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transform: translateY(0.3rem);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.pick-card__note.is-visible { opacity: 1; transform: translateY(0); }

/* ================================================================
   Form fields (cart summary + account pages)
   ================================================================ */
.field__label {
  display: block;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.55rem;
}
.field__optional { text-transform: none; letter-spacing: 0.1em; }

.field__input {
  display: block;
  width: 100%;
  padding: 0.6rem 0;
  font: inherit;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--foreground);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  transition: border-color 0.35s var(--ease);
}
.field__input::placeholder { color: var(--border); letter-spacing: 0.08em; }
.field__input:focus { outline: none; border-bottom-color: var(--foreground); }
.field__input.is-invalid { border-bottom-color: var(--foreground); }

.field__input--select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236d6b64' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
}

.field__error {
  min-height: 1rem;
  margin-top: 0.45rem;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foreground);
}
.field__error:empty { display: none; }

/* ================================================================
   Cart responsive
   ================================================================ */
@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }

  .cart-summary { position: static; }
}

@media (max-width: 640px) {
  .cart-item {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.1rem;
  }
  .cart-item__price {
    grid-column: 2;
    text-align: left;
  }

  .cart-head { flex-direction: column; gap: 0.6rem; }
}

/* ================================================================
   Checkout page (on-site checkout: information → payment → confirmation)
   ================================================================ */
/* ---------- step indicator ---------- */
.checkout-steps {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.checkout-steps__step { display: flex; align-items: center; gap: 0.9rem; }
.checkout-steps__step + .checkout-steps__step::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--border);
}
.checkout-steps__step a { color: inherit; text-decoration: none; transition: color 0.35s var(--ease); }
.checkout-steps__step a:hover,
.checkout-steps__step a:focus-visible { color: var(--foreground); }
.checkout-steps__step.is-current { color: var(--foreground); }
.checkout-steps__step.is-done { color: var(--foreground); opacity: 0.55; }

.checkout-layout {
  grid-template-columns: minmax(0, 6.5fr) minmax(0, 4.5fr);
}

.checkout-section {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
}
.checkout-section__label { display: block; margin-bottom: 1.6rem; }
.checkout-form .field + .field,
.checkout-form .checkout-form__row + .field,
.checkout-form .field + .checkout-form__row { margin-top: 1.4rem; }

.checkout-form__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.checkout-form__row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checkout-form__row .field + .field { margin-top: 0; }

/* ---------- shipping method ---------- */
.shipping-options { display: flex; flex-direction: column; gap: 0.9rem; }

.shipping-option {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.35s var(--ease);
}
.shipping-option:hover { border-color: var(--foreground); }
.shipping-option:has(input:checked) { border-color: var(--foreground); }
.shipping-option input { accent-color: var(--foreground); }

.shipping-option__name {
  flex: 1;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
}
.shipping-option__meta {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.shipping-option__price { font-size: 0.8125rem; letter-spacing: 0.08em; }

.checkout-secure-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
}
.checkout-secure-note__lock {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}
.checkout-form__submit { margin-top: 0.5rem; }

/* ---------- checkout redirect / hosted-checkout states ---------- */
.checkout-payment__intro {
  margin-bottom: 1.6rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--muted);
}
.checkout-payment__intro strong { color: var(--foreground); font-weight: 500; }

.checkout-payment__element {
  min-height: 3rem;
  margin-bottom: 0.5rem;
}
.checkout-payment__demo {
  padding: 1rem 1.25rem;
  border: 1px dashed var(--border);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--muted);
}
.checkout-payment__demo code { text-transform: none; letter-spacing: 0.04em; }

.checkout-payment__back {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---------- checkout order summary ---------- */
.checkout-summary__items {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.checkout-summary__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
}

.checkout-summary__media {
  position: relative;
  display: block;
  width: 3.4rem;
  background: var(--border);
}
.checkout-summary__media img {
  width: 100%;
  aspect-ratio: 7 / 9;
  object-fit: cover;
  filter: grayscale(1);
}
.checkout-summary__qty {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.25rem;
  background: var(--dark);
  color: var(--dark-text);
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  border-radius: 50%;
}

.checkout-summary__info { display: flex; flex-direction: column; gap: 0.35rem; }
.checkout-summary__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.04em;
}
.checkout-summary__variant {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.checkout-summary__price { font-size: 0.8125rem; letter-spacing: 0.08em; }

/* ---------- order confirmation ---------- */
.checkout-confirm__number {
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.checkout-confirm__note {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; }
  /* on small screens the summary reads first, then the form */
  .checkout-summary { order: -1; position: static; }
}

@media (max-width: 640px) {
  .checkout-form__row { grid-template-columns: 1fr; gap: 1.4rem; }
  .checkout-form__row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}

/* ---------- similar to your style ---------- */
.similar { padding-top: var(--space-5); padding-bottom: var(--space-5); }

.similar__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  letter-spacing: 0.06em;
}

.product-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-grid--four .product-card__name { font-size: 0.95rem; }

/* ---------- editorial films ---------- */
.films {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: 0 var(--gutter) var(--space-6);
}

.film-card { position: relative; overflow: hidden; background: var(--dark); }

.film-card__link { display: block; position: relative; }

.film-card img {
  width: 100%;
  aspect-ratio: 12 / 7;
  object-fit: cover;
  filter: grayscale(1);
  transform: scale(1.001);
  transition: transform 8s var(--ease), opacity 0.6s var(--ease);
}
.film-card__link:hover img,
.film-card__link:focus-visible img { transform: scale(1.08); }

.film-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: linear-gradient(to top, rgba(19, 19, 17, 0.55), transparent 55%);
  color: var(--dark-text);
}

.film-card__label {
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(242, 241, 237, 0.75);
}

.text-link--light { color: var(--dark-text); }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 5rem);
  background: rgba(19, 19, 17, 0.94);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  cursor: zoom-out;
}
/* author display:flex overrides the hidden attribute — restore it explicitly */
.lightbox[hidden] { display: none; }
/* never intercept clicks unless actually open (covers the fade-out phase) */
.lightbox:not(.is-open) { pointer-events: none; }
.lightbox.is-open { opacity: 1; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  cursor: default;
  transform: scale(0.97);
  transition: transform 0.6s var(--ease);
}
.lightbox.is-open img { transform: scale(1); }

.lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.75rem;
  color: var(--dark-text);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  padding: 0.5rem;
  transition: opacity 0.3s var(--ease);
}
.lightbox__close:hover { opacity: 0.6; }

/* ---------- PDP responsive ---------- */
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__info { position: static; max-width: 34rem; }
  .product-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .films { grid-template-columns: 1fr; }
  .product-grid--four { grid-template-columns: 1fr; }
  .add-to-cart { align-self: stretch; text-align: center; }
  .pdp__title-row { flex-direction: column; gap: 0.5rem; }
}

/* ================================================================
   Search overlay (full-screen, editorial)
   ================================================================ */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--background);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}
.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--ease);
}

.search-overlay__inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: calc(var(--space-5)) var(--gutter) var(--space-5);
}

.search-overlay__close {
  position: absolute;
  top: 1.4rem;
  right: var(--gutter);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--muted);
  transition: color 0.35s var(--ease), transform 0.35s var(--ease);
}
.search-overlay__close:hover { color: var(--foreground); transform: rotate(90deg); }

.search-overlay__label { margin-bottom: var(--space-3); }

.search-overlay__input {
  display: block;
  width: 100%;
  padding: 0.6rem 0 0.9rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--foreground);
  transition: border-color 0.35s var(--ease);
}
.search-overlay__input::placeholder { color: var(--border); }
.search-overlay__input:focus { outline: none; border-bottom-color: var(--foreground); }
.search-overlay__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-overlay__hints {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.4rem;
  margin-top: var(--space-2);
}
.search-overlay__hint-label {
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.search-overlay__hints a {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.1rem;
  transition: border-color 0.35s var(--ease);
}
.search-overlay__hints a:hover { border-color: var(--foreground); }

.search-overlay__meta {
  margin-top: var(--space-2);
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.search-overlay__results { margin-top: var(--space-3); }

.search-overlay__all { margin-top: var(--space-3); }

/* ================================================================
   Search results page
   ================================================================ */
/* one shared horizontal gutter on the page container so the search
   field, controls row, and product grid all sit on the same line */
.search-main {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* children inherit the frame from .search-main — strip their own gutters */
.search-main .pdp-breadcrumb { padding-left: 0; padding-right: 0; }
.search-main .cart-head { padding-left: 0; padding-right: 0; }
.search-main .rule { margin-left: 0; margin-right: 0; }
.search-main .similar { padding-left: 0; padding-right: 0; }

.search-page__form { margin-bottom: var(--space-4); }
.search-page__input { font-size: clamp(1.3rem, 3vw, 1.9rem); }

/* ---------- controls row: filter · chips · sort ---------- */
.search-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  flex-wrap: wrap;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin: 0 0 var(--space-3);
}

.search-controls__filter {
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease), opacity 0.35s var(--ease);
}
.search-controls__filter:hover { border-color: var(--foreground); }
.search-controls__filter[aria-expanded="true"] { border-color: var(--foreground); }

.search-controls__sort {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-left: auto;
}
.search-controls__sort-label {
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.search-controls__select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--foreground);
  padding: 0.25rem 1.4rem 0.35rem 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23131311' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.1rem center;
  transition: border-color 0.35s var(--ease);
}
.search-controls__select:focus { outline: none; border-bottom-color: var(--foreground); }

/* ---------- active filter chips ---------- */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
}
.filter-chip {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--foreground);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
}
.filter-chip:hover { border-color: var(--foreground); }
.filter-chip span { color: var(--muted); margin-left: 0.2rem; }
.filter-chip:hover span { color: inherit; }
.filter-chip--clear {
  border-color: transparent;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.625rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.filter-chip--clear:hover { color: var(--foreground); }



/* ---------- layout: sidebar + results ---------- */
.search-layout {
  display: block;
  padding: 0 0 var(--space-5);
}
.search-layout.has-panel {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.product-grid--search {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2);
}
.product-grid--search .product-card__name { font-size: 0.95rem; }
.search-layout.has-panel .product-grid--search { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- filter panel (desktop sidebar) ---------- */
.filter-panel {
  position: sticky;
  top: 5.5rem;
  border: 1px solid var(--border);
  padding: var(--space-3) var(--space-2);
}

.filter-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.filter-panel__close {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--muted);
  transition: color 0.35s var(--ease);
  display: none; /* only shown in the mobile drawer */
}
.filter-panel__close:hover { color: var(--foreground); }

.filter-group {
  border: 0;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}
.filter-group__label {
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 0.6rem;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.3rem 0;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}
.filter-option:hover { color: var(--foreground); }

.filter-option__box {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.filter-option__mark {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--border);
  position: relative;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.filter-option:hover .filter-option__mark { border-color: var(--foreground); }
.filter-option__box:checked ~ .filter-option__mark {
  border-color: var(--foreground);
  background: var(--foreground);
}
.filter-option__box:checked ~ .filter-option__text { color: var(--foreground); }
.filter-option__box:focus-visible ~ .filter-option__mark { outline: 1px solid var(--foreground); outline-offset: 2px; }

.filter-option__swatch {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--swatch, var(--border));
  border: 1px solid rgba(19, 19, 17, 0.25);
}

/* ---------- price range ---------- */
.price-range {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.price-range__field {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  flex: 1 1 0;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.35s var(--ease);
}
.price-range__field:focus-within { border-bottom-color: var(--foreground); }
.price-range__symbol { font-size: 0.75rem; color: var(--muted); }
.price-range__dash { color: var(--muted); font-size: 0.75rem; }
.price-range__field input {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--foreground);
  padding: 0.3rem 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.price-range__field input::-webkit-outer-spin-button,
.price-range__field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-range__field input:focus { outline: none; }
.price-range__field input::placeholder { color: var(--border); }

.filter-panel__clear {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  padding: 0.6rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  transition: color 0.35s var(--ease);
}
.filter-panel__clear:hover { color: var(--foreground); }

.filter-panel__apply { display: none; margin-top: var(--space-2); } /* mobile only */


/* ---------- no results ---------- */
.search-empty {
  padding: var(--space-5) 0;
  text-align: center;
}
.search-empty__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.search-empty__line { color: var(--muted); max-width: 26rem; margin: 0 auto; }
.search-empty__line em { font-family: var(--font-display); font-size: 1.15em; color: var(--foreground); }
.search-empty__hint {
  margin-top: var(--space-2);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.search-empty__clear { margin-top: var(--space-3); }

/* ---------- search responsive ---------- */
@media (max-width: 900px) {
  .product-grid--search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-layout.has-panel { display: block; }
  .search-layout.has-panel .product-grid--search { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* filter drawer slides in from the left */
  .filter-panel {
    position: fixed;
    inset: 0;
    z-index: 70;
    border: 0;
    background: var(--background);
    overflow-y: auto;
    padding: var(--space-4) var(--gutter) var(--space-5);
    transform: translateX(-100%);
    transition: transform 0.45s var(--ease);
  }
  body.filter-open .filter-panel { transform: translateX(0); }
  body.filter-open { overflow: hidden; }
  .filter-panel__close { display: block; }
  .filter-panel__apply { display: block; }

  /* let the drawer animate: keep it rendered while transitioning */
  @media (prefers-reduced-motion: reduce) {
    .filter-panel { transition: none; }
  }
}

@media (max-width: 640px) {
  .search-overlay__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid--search { grid-template-columns: 1fr; }
  .search-layout.has-panel .product-grid--search { grid-template-columns: 1fr; }
  .search-controls__sort { margin-left: 0; width: 100%; }
}

/* ================================================================
   Journal page — formal editorial
   ================================================================ */
/* cool smoky-gray re-toning, scoped to this page only: the header,
   dividers, and footer consume these tokens via var(), so the whole
   page shifts from the warm site palette to the charcoal/silver mood */
.journal-body {
  --background: #efefed;
  --foreground: #171717;
  --muted: #5c5c5a;
  --border: rgba(23, 23, 23, 0.12);
  background: var(--background);
  color: var(--foreground);
}

/* shared frame: hero and mission panel share one centered width so
   their edges align; never touches the browser edges */
.journal-frame {
  width: min(90vw, 94rem);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- hero media ---------- */
.journal-hero {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
  background: #d9d8d5;
}
.journal-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}

/* ---------- mission panel (dark manifesto treatment) ---------- */
.journal-panel {
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  padding: clamp(3rem, 7vw, 6rem) clamp(2.25rem, 5vw, 4.5rem);
  background: var(--dark);
  color: var(--dark-text);
}

/* content sits indented toward the right of the dark panel */
.journal-panel__mission,
.journal-panel__divider,
.journal-panel__detail {
  margin-left: clamp(0rem, 26vw, 28rem);
}

.journal-panel__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 3vw, 2.8rem);
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--dark-text);
  margin-bottom: clamp(1.25rem, 2.5vw, 1.875rem);
}

.journal-panel__text {
  max-width: 45rem; /* ~720px readable measure */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.journal-panel__text p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: rgba(242, 241, 237, 0.85);
}

.journal-panel__divider {
  border-top: 1px solid rgba(242, 241, 237, 0.18);
  margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.journal-panel__index {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(242, 241, 237, 0.5);
}

.journal-panel__subheading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: var(--dark-text);
  margin-bottom: 1.1rem;
}

.journal-panel__desc {
  max-width: 40.5rem; /* ~650px */
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(242, 241, 237, 0.66);
}

/* ---------- intentional whitespace before the footer ---------- */
.journal-main { padding-bottom: clamp(10rem, 24vh, 18rem); }

/* ---------- journal responsive ---------- */
@media (max-width: 640px) {
  .journal-frame { width: calc(100% - 32px); }
  .journal-hero { margin-top: var(--space-3); }
  .journal-hero img { aspect-ratio: 3 / 2; }
  .journal-panel {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-2);
  }
  .journal-panel__mission,
  .journal-panel__divider,
  .journal-panel__detail { margin-left: 0; }
  .journal-main { padding-bottom: clamp(6rem, 18vh, 10rem); }
}

/* ================================================================
   Member portrait — the profile-photo frame (used in profile settings)
   ================================================================ */
/* ---------- member portrait ---------- */
.portrait-frame {
  position: relative;
  width: min(100%, 20rem);
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(23, 23, 23, 0.25);
  background: var(--background);
  overflow: hidden;
}
.portrait-frame__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}
.portrait-frame__prompt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  cursor: pointer;
  transition: background 200ms ease;
}
.portrait-frame__prompt:hover { background: rgba(23, 23, 23, 0.03); }

/* once a photo is set, the prompt becomes a quiet "replace" overlay
   that only reads on hover / keyboard focus */
.portrait-frame.has-photo .portrait-frame__plus { display: none; }
.portrait-frame.has-photo .portrait-frame__prompt {
  opacity: 0;
  background: rgba(23, 23, 23, 0.45);
  transition: opacity 200ms ease;
}
.portrait-frame.has-photo .portrait-frame__prompt:hover,
.portrait-frame.has-photo:focus-within .portrait-frame__prompt { opacity: 1; }
.portrait-frame.has-photo .portrait-frame__cta { color: #f2f1ed; }

.portrait-frame__cta {
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.portrait-frame__plus {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--muted);
}
.portrait-frame__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.portrait-frame__input:focus-visible ~ * { outline: none; }
.portrait-frame:focus-within { outline: 1px solid var(--foreground); outline-offset: 3px; }
.portrait-frame__note {
  margin-top: 0.9rem;
  max-width: 20rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.portrait-frame__remove {
  margin-top: 0.9rem;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--foreground);
  border-bottom: 1px solid rgba(23, 23, 23, 0.35);
  cursor: pointer;
  transition: border-color 200ms ease, opacity 200ms ease;
}
.portrait-frame__remove:hover { opacity: 0.7; }
.portrait-frame__remove:focus-visible { outline: 1px solid var(--foreground); outline-offset: 3px; }

@media (max-width: 640px) {
  .portrait-frame { width: 100%; }
}


/* ================================================================
   Account — header menu, auth pages, profile, settings, orders
   ================================================================ */

/* ---------- header account dropdown ---------- */
.header-actions { position: relative; }

.account-menu {
  position: absolute;
  top: calc(100% + 0.9rem);
  right: 0;
  z-index: 120;
  min-width: 13.5rem;
  padding: 1.4rem 1.5rem;
  background: var(--background);
  border: 1px solid var(--border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.4rem);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0s linear 0.3s;
}
.account-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.account-menu__hello {
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.account-menu__link {
  display: block;
  width: 100%;
  padding: 0.45rem 0;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.account-menu__link:hover,
.account-menu__link:focus-visible { color: var(--foreground); padding-left: 0.4rem; }

.account-menu__logout {
  margin-top: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* mobile: compact slide-down under the sticky header */
@media (max-width: 640px) {
  .account-menu {
    position: fixed;
    top: 3.6rem;
    left: 0;
    right: 0;
    min-width: 0;
    border-left: 0;
    border-right: 0;
  }
}

/* ---------- shared account layout ---------- */
.account-main { padding-bottom: var(--space-5); }

.account-title {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
}

/* large outlined editorial sections (reference-image frames) */
.account-frame {
  width: min(90vw, 70rem);
  margin: 0 auto var(--space-4);
  padding: clamp(32px, 5vw, 64px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 60%, #f7f6f2);
}
.account-frame__label { display: block; margin-bottom: clamp(2rem, 4vw, 3rem); }

.account-empty { text-align: center; padding: var(--space-3) 0; }
.account-empty__line {
  margin-bottom: 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.03em;
  color: var(--muted);
}

/* ---------- auth pages (login / register) ---------- */
.auth-frame {
  width: min(90vw, 30rem);
  margin: clamp(3.5rem, 8vw, 6rem) auto var(--space-5);
}

.auth-title {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
}

.auth-form .field + .field { margin-top: 1.6rem; }
.auth-submit { margin-top: 2.2rem; }
.auth-note { margin-top: 1rem; text-align: center; }

.auth-alt {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  text-align: center;
}
.auth-alt__q {
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.auth-reset { margin-top: 1.6rem; text-align: left; }
.auth-reset .field { margin-bottom: 1.4rem; }


/* ---------- membership status ---------- */
.membership-status__grid {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  column-gap: clamp(2.5rem, 6vw, 5.5rem);
  row-gap: var(--space-3);
  align-items: center;
}

.membership-status__progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

/* circular member visual — a quiet double-ring seal; shows the
   customer's monochrome photo when one exists */
.member-seal {
  position: relative;
  width: clamp(11rem, 18vw, 15rem);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.member-seal__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.member-seal__ring circle { fill: none; }
.member-seal__ring-outer { stroke: var(--border); stroke-width: 1; }
.member-seal__ring-inner { stroke: var(--foreground); stroke-width: 1.5; }
.member-seal__photo {
  position: absolute;
  inset: 7%;
  width: 86%;
  height: 86%;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}
.member-seal__mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  letter-spacing: 0.06em;
}

.membership-status__metric { margin-top: 0.4rem; }
.membership-status__member-name {
  font-family: var(--font-display);

  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: 0.05em;
  line-height: 1;
}
.membership-status__since {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.membership-status__photo-action { margin-top: 0.5rem; }

/* profile facts — thin separators, editorial spacing */
.profile-facts { display: flex; flex-direction: column; }
.profile-facts__row {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) 2fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--border);
}
.profile-facts__row:first-child { padding-top: 0; }
.profile-facts__row dd {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

/* ================================================================
   Help — shared shell (content never touches the viewport edge)
   ================================================================ */
.help-shell {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding-left: 5vw;
  padding-right: 5vw;
}
.help-shell .pdp-breadcrumb { padding-left: 0; padding-right: 0; }

.help-main { padding-bottom: var(--space-6); }

/* ================================================================
   Help — landing (three-column editorial grid)
   ================================================================ */
.help-grid {
  --help-gap: clamp(1.75rem, 3.5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--help-gap);
  margin-top: var(--space-4);
}

/* four-option landing variant (policy / service / faq / return & refund) */
.help-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* thin vertical hairline centred in each gap */
.help-card { position: relative; }
.help-card + .help-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--help-gap) / -2);
  width: 1px;
  background: var(--border);
}

/* the entire column is one link */
.help-card__link { display: block; height: 100%; }

.help-card__media {
  overflow: hidden;
  background: var(--border);
}
.help-card__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform 0.3s var(--ease);
}
.help-card__link:hover .help-card__media img,
.help-card__link:focus-visible .help-card__media img { transform: scale(1.02); }

/* horizontal hairline between image and caption */
.help-card__meta {
  margin-top: clamp(1.1rem, 1.8vw, 1.5rem);
  padding-top: clamp(0.9rem, 1.5vw, 1.25rem);
  border-top: 1px solid var(--border);
}

.help-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.25s var(--ease);
}
.help-card__link:hover .help-card__title,
.help-card__link:focus-visible .help-card__title { text-decoration-color: currentColor; }

.help-card__desc {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.55rem;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.25s var(--ease);
}
.help-card__link:hover .help-card__desc,
.help-card__link:focus-visible .help-card__desc { color: var(--foreground); }

/* the arrow slides quietly on hover */
.help-card__arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}
.help-card__link:hover .help-card__arrow,
.help-card__link:focus-visible .help-card__arrow { transform: translateX(0.35rem); }

/* "← back" beneath each sub-page */
.help-back {
  padding-top: var(--space-4);
  text-align: center;
}

/* ================================================================
   Help — policy and conditions (three-column editorial spread)
   ================================================================ */
.policy-head {
  padding-top: var(--space-4);
  text-align: center;
}
.policy-head__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
}

.policy-spread {
  --policy-gap: clamp(1.75rem, 3.5vw, 3.75rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--policy-gap);
  align-items: start;
  width: min(100%, 88rem);
  margin: var(--space-4) auto 0;
}

/* thin vertical hairline centred in each gap */
.policy-col { position: relative; }
.policy-col + .policy-col::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--policy-gap) / -2);
  width: 1px;
  background: var(--border);
}
/* column heading + intro */
.policy-col__kicker {
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}
.policy-col__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  letter-spacing: 0.05em;
  line-height: 1.25;
}
.policy-col__body {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.policy-col__body > p { color: var(--muted); }

.policy-col__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  line-height: 1.6;
}

/* small "last updated" metadata */
.policy-updated {
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* second serif subheading inside a column */
.policy-col__subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  letter-spacing: 0.05em;
  line-height: 1.3;
  padding-top: 0.4rem;
}
/* cookies / data privacy topics */
.policy-topic { padding-top: 0.4rem; }
.policy-topic__title {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.policy-topic p { font-size: 0.9rem; line-height: 1.75; }

/* numbered return & refund clauses */
.policy-clause { padding-top: 0.6rem; }
.policy-clause__title {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
.policy-clause__num {
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  color: var(--muted);
}
.policy-clause p { font-size: 0.9rem; line-height: 1.75; }
.policy-clause p + p,
.policy-clause .policy-list + p { margin-top: 0.7rem; }

.policy-list {
  list-style: none;
  margin: 0.7rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.policy-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted);
}
.policy-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--muted);
}

/* quiet inline links inside running text */
.policy-inline-link {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--border);
  transition: text-decoration-color 0.35s var(--ease);
}
.policy-inline-link:hover,
.policy-inline-link:focus-visible { text-decoration-color: var(--foreground); }

/* ================================================================
   Help — customer service (info column + contact form)
   ================================================================ */
.service-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  width: min(100%, 64rem);
  margin: var(--space-4) auto 0;
}
.service-info__label { margin-bottom: 1.6rem; }
.service-info__note {
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  line-height: 1.7;
  color: var(--muted);
}
.service-facts .profile-facts__row dd { color: var(--muted); }

/* editable contact placeholders — quiet italics until real details exist */
.service-facts .profile-facts__row dd[data-placeholder] {
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: 0.03em;
}

.service-form { padding: 0; }

/* textarea variant of the standard underlined field */
.field__input--textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.7;
  border: 1px solid var(--border);
  padding: 0.85rem 1rem;
}
.field__input--textarea:focus-visible { border-color: var(--foreground); }

/* ================================================================
   Help — FAQ accordion (thin rules, + / − icons)
   ================================================================ */
.faq-list {
  width: min(100%, 52rem);
  margin: var(--space-4) auto 0;
  border-top: 1px solid var(--border);
}

.faq-item { border-bottom: 1px solid var(--border); }

.faq-item__q { font-size: inherit; font-weight: 400; }

.faq-item__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--foreground);
  transition: opacity 0.35s var(--ease);
}
.faq-item__toggle:hover { opacity: 0.6; }

/* the + becomes − : two hairlines, one rotates away */
.faq-item__icon {
  position: relative;
  flex: 0 0 auto;
  width: 0.8rem;
  height: 0.8rem;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--foreground);
  transition: transform 0.45s var(--ease);
}
.faq-item__icon::before { width: 100%; height: 1px; }
.faq-item__icon::after { width: 1px; height: 100%; }
.faq-item__toggle[aria-expanded="true"] .faq-item__icon::after { transform: rotate(90deg); }

/* panel opens with a quiet grid-rows transition (no JS measuring) */
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.faq-item__panel.is-open { grid-template-rows: 1fr; }
.faq-item__panel > .faq-item__answer { overflow: hidden; }

.faq-item__answer p {
  max-width: 42rem;
  padding-bottom: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--muted);
}

/* ================================================================
   Help — single-column reading layout
   ================================================================ */
.reading {
  width: min(100%, 62rem);
  margin: var(--space-4) auto 0;
}
.reading__head {
  text-align: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.reading__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.reading__updated { margin-top: 1rem; }
.reading__lead {
  margin: var(--space-3) auto 0;
  max-width: 44rem;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: var(--muted);
}
.reading__body {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}
.reading__body .policy-clause { padding-top: 0; }
.reading__body .policy-clause__title { font-size: clamp(1.25rem, 2vw, 1.5rem); }

/* ================================================================
   Help — return & refund request (editorial two-column form)
   ================================================================ */
.rr-intro {
  margin-top: var(--space-3);
  text-align: center;
}
.rr-intro .text-link { font-size: 0.625rem; }

/* large centered form container — one thin rule, no card styling */
.rr-form {
  width: min(100%, 62rem);
  margin: var(--space-4) auto 0;
  border: 1px solid var(--border);
  padding: clamp(1.75rem, 4.5vw, 4rem);
}

.rr-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.75rem, 4vw, 3.5rem);
  row-gap: 1.6rem;
  margin-bottom: var(--space-4);
}
.rr-form__full { grid-column: 1 / -1; }

.rr-issue { margin-bottom: var(--space-4); }
.rr-issue .field__error { margin-top: 0.8rem; }

/* upload area — thin border, quiet hover */
.rr-upload-section { margin-bottom: var(--space-3); }
.rr-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  border: 1px dashed var(--border);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.35s var(--ease);
}
.rr-upload:hover,
.rr-upload.is-dragover { border-color: var(--foreground); }
.rr-upload-section:has(#rrFiles:focus-visible) .rr-upload { border-color: var(--foreground); }

.rr-upload__plus {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2rem;
  line-height: 1;
}
.rr-upload__title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.rr-upload__req {
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.35s var(--ease);
}
.rr-upload__req.is-required { color: var(--foreground); }
.rr-upload__hint {
  max-width: 26rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.rr-upload__meta {
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.rr-upload-section > .field__error { margin-top: 0.8rem; }
.rr-upload__privacy {
  margin-top: 1rem;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* selected file previews */
.rr-files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.rr-files:empty { display: none; }

.rr-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
}
.rr-file__thumb {
  display: block;
  width: 3.4rem;
  height: 3.4rem;
  object-fit: cover;
  filter: grayscale(1);
  background: var(--border);
}
.rr-file__name {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
.rr-file__size {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.rr-file__remove {
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.35s var(--ease);
}
.rr-file__remove:hover,
.rr-file__remove:focus-visible { opacity: 0.55; }

/* success confirmation */
.rr-confirm {
  width: min(100%, 62rem);
  margin: var(--space-4) auto 0;
  border: 1px solid var(--border);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}
.rr-confirm__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: 0.05em;
  margin: 1.1rem 0 1rem;
}
.rr-confirm__body {
  max-width: 34rem;
  margin: 0 auto;
  color: var(--muted);
}
.rr-confirm__number {
  margin-top: var(--space-3);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.rr-confirm__demo {
  margin-top: 1.1rem;
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.rr-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 2.75rem;
  margin-top: var(--space-3);
}

/* ================================================================
   Help — responsive
   ================================================================ */
@media (max-width: 1024px) {
  .help-shell { padding-left: 4vw; padding-right: 4vw; }
  .help-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-4);
  }
  .help-grid--four .help-card + .help-card::before { content: none; }
  .help-grid--four .help-card:nth-child(even)::before { content: ""; }
}

@media (max-width: 900px) {
  .service-layout { grid-template-columns: 1fr; }
  .policy-spread {
    grid-template-columns: 1fr;
    row-gap: var(--space-4);
  }
  .policy-col + .policy-col::before { content: none; }
  .policy-col + .policy-col {
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 640px) {
  .help-shell { padding-left: 22px; padding-right: 22px; }
  .help-grid { grid-template-columns: 1fr; row-gap: var(--space-4); }
  .help-grid--four { grid-template-columns: 1fr; }
  .help-card + .help-card::before { content: none; }
  .help-grid--four .help-card:nth-child(even)::before { content: none; }
  .faq-item__toggle { padding: 1.2rem 0; }
  .rr-form__grid { grid-template-columns: 1fr; }
}

.membership-status__note {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.membership-status__edit { margin-top: var(--space-3); }

/* ---------- order history ---------- */
.order-list { display: flex; flex-direction: column; }

.order-row { border-bottom: 1px solid var(--border); }
.order-row:last-child { border-bottom: 0; }

.order-row__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  padding: 1.4rem 0.25rem;
  transition: background 0.35s var(--ease);
}
.order-row__link:hover,
.order-row__link:focus-visible { background: color-mix(in srgb, var(--foreground) 4%, transparent); }

.order-row__media {
  width: clamp(3.75rem, 7vw, 5rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--dark);
}
.order-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

.order-row__info { display: flex; flex-direction: column; gap: 0.3rem; }
.order-row__number {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.order-row__meta {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.order-row__price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

/* minimal pagination: ← 1 2 3 → */
.order-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
  margin-top: var(--space-3);
}
.order-pagination__pages { display: inline-flex; gap: 1.1rem; }
.order-pagination__page,
.order-pagination__arrow {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--muted);
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.order-pagination__page:hover,
.order-pagination__arrow:hover:not(:disabled) { color: var(--foreground); }
.order-pagination__page.is-current {
  color: var(--foreground);
  border-bottom: 1px solid currentColor;
}
.order-pagination__arrow:disabled { opacity: 0.3; cursor: default; }


/* ---------- ratings / reviews ---------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.review-card { display: flex; flex-direction: column; gap: 0.7rem; }

.review-card__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--dark);
}
.review-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform 0.9s var(--ease), opacity 0.6s var(--ease);
}
.review-card__media:hover img { transform: scale(1.04); opacity: 0.85; }

.review-card__name {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.review-card__name span { color: var(--muted); font-size: 0.6875rem; }

.review-card__stars { font-size: 0.9rem; letter-spacing: 0.28em; }
.review-card__action { align-self: flex-start; font-size: 0.6875rem; }
.review-card__text {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- review dialog ---------- */
.review-overlay {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: var(--space-2);
  background: color-mix(in srgb, var(--dark) 42%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}
.review-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--ease);
}

.review-dialog {
  position: relative;
  width: min(92vw, 26rem);
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--background);
  border: 1px solid var(--border);
}
.review-dialog__close {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}
.review-dialog__close:hover { color: var(--foreground); }

.review-dialog__product {
  margin: 0.8rem 0 1.4rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
}

.review-stars { display: flex; gap: 0.5rem; margin-bottom: 0.4rem; }
.review-stars__star {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--foreground);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.review-stars__star:hover { transform: translateY(-2px); }

.review-dialog .field { margin-top: 1.4rem; }
.review-dialog__text { resize: vertical; min-height: 5.5rem; }
.review-dialog__file { border-bottom: 0; padding-left: 0; font-size: 0.75rem; }
.review-dialog__preview {
  margin-top: 0.8rem;
  max-height: 10rem;
  border: 1px solid var(--border);
  filter: grayscale(1);
}
.review-dialog__submit { margin-top: 1.8rem; }

/* ---------- profile settings ---------- */
.settings-frame { max-width: 46rem; }
.settings-rule { margin: clamp(2.5rem, 5vw, 3.5rem) 0; }

.settings-form .field + .field { margin-top: 1.5rem; }
.settings-save { margin-top: 1.9rem; }
.settings-back { margin-top: 0; }


/* ---------- payment & billing note (checkout owns payment) ---------- */
.payment-empty { margin-bottom: 0; text-align: left; }

/* ---------- order detail ---------- */
.order-detail__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.order-detail__number {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.order-detail__meta {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.order-detail__status { color: var(--foreground); }

.order-detail__items { display: flex; flex-direction: column; }

.order-detail__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.order-detail__block .label { display: block; margin-bottom: 0.9rem; }
.order-detail__body { font-size: 0.85rem; line-height: 1.8; color: var(--muted); }
.order-detail__back { margin-top: var(--space-3); }

/* ---------- account responsive ---------- */
@media (max-width: 900px) {
  /* stack, do not shrink */
  .membership-status__grid { grid-template-columns: 1fr; }
  .membership-status__customer { max-width: 30rem; margin: 0 auto; width: 100%; }
  .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-detail__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .account-frame { width: calc(100% - 32px); }
  .review-grid { grid-template-columns: 1fr; }
  .order-row__link {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .order-row__price { grid-column: 2; justify-self: start; }
}

/* ---------- live-catalog loading states ----------
   Skeleton cards mirror the real .product-card dimensions exactly (same
   7 / 9 media ratio, same meta block), so replacing them with live Shopify
   data causes no layout shift. */
.product-card--skeleton .product-card__link { cursor: default; }

.skeleton-block,
.skeleton-line {
  display: block;
  background: var(--border);
  animation: mrink-skeleton 1.4s var(--ease) infinite;
}

.skeleton-block {
  width: 100%;
  aspect-ratio: 7 / 9;
}

.skeleton-line {
  height: 0.7em;
  width: 62%;
  border-radius: 1px;
}
.skeleton-line--short { width: 34%; }

@keyframes mrink-skeleton {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.25; }
}

/* the product detail page dims while the live product is being fetched */
.pdp-main.is-loading .pdp__media,
.pdp-main.is-loading .pdp__info {
  opacity: 0.35;
  transition: opacity 0.3s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-block,
  .skeleton-line { animation: none; opacity: 0.4; }
}