/* ==========================================================================
   CORSET ATELIER — BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; }

::selection { background: var(--c-oxblood); color: var(--c-ivory); }

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

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---- Typography utility classes ---- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--metal-text);
}

.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
}

.display-lg { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: 500; }
.display-md { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 500; }
.display-sm { font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 500; }

.italic-accent { font-style: italic; color: var(--accent); }

.text-muted { color: var(--text-muted); }
.on-dark .text-muted, .bg-void .text-muted { color: var(--text-muted-inverse); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.95rem 2.2rem;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transform: translateY(0);
  transition: background var(--dur-fast) var(--ease-signature),
              color var(--dur-fast) var(--ease-signature),
              border-color var(--dur-fast) var(--ease-signature),
              transform 150ms var(--ease-signature),
              box-shadow 150ms var(--ease-signature);
  white-space: nowrap;
}

.btn-primary {
  background: var(--c-void);
  color: var(--c-ivory);
  border-color: var(--c-void);
  box-shadow: 0 4px 0 rgba(0,0,0,0.5), 0 10px 20px -8px rgba(15,13,14,0.5);
}
.btn-primary:hover {
  background: var(--c-oxblood);
  border-color: var(--c-oxblood);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0,0,0,0.5), 0 18px 30px -10px rgba(107,20,35,0.45);
}
.btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 4px 10px -6px rgba(15,13,14,0.45);
}

.btn-outline {
  background: transparent;
  color: var(--c-ivory);
  border-color: rgba(246, 241, 233, 0.55);
}
.btn-outline:hover {
  background: var(--c-ivory);
  color: var(--c-void);
  border-color: var(--c-ivory);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(0,0,0,0.4);
}
.btn-outline:active { transform: translateY(0) scale(0.97); box-shadow: none; }

.btn-outline-dark {
  background: transparent;
  color: var(--c-charcoal);
  border-color: rgba(33, 30, 31, 0.3);
}
.btn-outline-dark:hover {
  background: var(--c-charcoal);
  color: var(--c-ivory);
  border-color: var(--c-charcoal);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(33,30,31,0.3);
}
.btn-outline-dark:active { transform: translateY(0) scale(0.97); box-shadow: none; }

.btn-ghost {
  background: transparent;
  color: var(--c-charcoal);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--c-charcoal);
  border-radius: 0;
}
.btn-ghost:hover { color: var(--c-oxblood); border-color: var(--c-oxblood); }
.btn-ghost:active { transform: scale(0.97); }

/* Light press affordance for icon/utility buttons site-wide (modal close,
   drawer close, size/color selectors, FAQ toggles, send button, etc.) —
   the depth system above is reserved for primary CTAs, but every clickable
   control should still feel like it responds to touch. */
button:not(.btn) {
  transition: transform 120ms var(--ease-signature);
}
button:not(.btn):active { transform: scale(0.95); }

/* ==========================================================================
   SIGNATURE ELEMENT — "THE LACE LINE"
   A thin rule with eyelet ticks that laces itself shut, like corset lacing
   being drawn through grommets. Used as: section dividers, slider progress,
   nav hover-underline.
   ========================================================================== */

.lace-divider {
  --eyelets: 12;
  position: relative;
  height: 18px;
  margin-block: var(--sp-8);
  display: flex;
  align-items: center;
}
.lace-divider::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--c-line);
  transform: translateY(-50%);
}
.lace-divider .eyelet-row {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.lace-divider .eyelet {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bg-page);
  border: 1px solid var(--metal);
}
.on-dark .lace-divider::before { background: var(--c-line-dark); }
.on-dark .lace-divider .eyelet { background: var(--bg-inverse); }

/* Lace-line as a nav hover underline: two ticks that draw a stitch across */
.lace-underline {
  position: relative;
  padding-bottom: 6px;
}
.lace-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--metal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-signature);
}
.lace-underline:hover::after,
.lace-underline.is-active::after { transform: scaleX(1); }

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--c-oxblood);
  color: var(--c-ivory);
  padding: var(--sp-3) var(--sp-5);
  z-index: 999;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ---- Image vignette ----
   Soft inset shadow that darkens the edges of a photo/media container,
   drawing the eye toward center — standard editorial photography treatment.
   Uses inset box-shadow rather than a pseudo-element: respects border-radius
   automatically, needs no extra markup, and can't intercept clicks. */
.img-vignette {
  box-shadow: inset 0 0 70px 14px rgba(15, 13, 14, 0.38);
}

/* ---- Grain texture ----
   Very low-opacity noise overlay for dark sections, adding richness without
   being consciously noticed. pointer-events: none so it never blocks clicks;
   opacity is low enough that it doesn't need z-index management relative to
   text content. */
.has-grain { position: relative; overflow: hidden; }
.has-grain::after {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---- Scroll reveal (applied via js/reveal.js) ---- */
.reveal-target {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease-signature), transform 700ms var(--ease-signature);
}
.reveal-target.is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal-target { opacity: 1; transform: none; transition: none; }
}

/* ---- Wishlist confirmation pulse ----
   Applied transiently (added then removed via JS on click) to any wishlist
   heart icon when it becomes active — a quick, satisfying "saved" bounce
   rather than an instant flat color swap. Shared across product cards,
   the product detail page's dedicated heart, and Quick View. */
@keyframes wishlistPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.4); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.is-pulsing svg { animation: wishlistPulse 420ms var(--ease-signature); }
@media (prefers-reduced-motion: reduce) {
  .is-pulsing svg { animation: none; }
}

/* ---- Branded first-visit loader ----
   Defaults to display:none in markup — only shown via a synchronous inline
   script (see the snippet right after this element in each page) when
   sessionStorage confirms this is genuinely the first page of the session.
   If JS fails entirely, it simply never appears — no risk of a stuck
   full-screen overlay blocking the site. */
.brand-loader {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--c-void);
  display: none;
  align-items: center;
  justify-content: center;
  transition: opacity 300ms ease;
}
.brand-loader.is-hiding { opacity: 0; }
.brand-loader-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.brand-loader-mark .eyelet-glyph-lg {
  width: 28px; height: 28px;
  border: 1px solid var(--c-brass);
  border-radius: 50%;
  position: relative;
}
.brand-loader-mark .eyelet-glyph-lg::after {
  content: '';
  position: absolute;
  inset: 9px;
  background: var(--c-brass);
  border-radius: 50%;
}
.brand-loader-word {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--c-ivory);
  letter-spacing: 0.04em;
}

/* ---- Thin branded scrollbar ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-ivory-soft); }
::-webkit-scrollbar-thumb { background: var(--c-brass); border-radius: 999px; border: 2px solid var(--c-ivory-soft); }
::-webkit-scrollbar-thumb:hover { background: var(--c-oxblood); }
html { scrollbar-width: thin; scrollbar-color: var(--c-brass) var(--c-ivory-soft); }

/* ---- Stock / availability badge ----
   Shared component used on product cards, the product detail page, and
   Quick View — one place to define the four states so they stay visually
   consistent everywhere a product appears. */
.stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  font-weight: 700;
  margin-top: var(--sp-2);
}
.stock-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stock-badge.stock-in { color: #3f7a4f; }
.stock-badge.stock-in::before { background: #3f7a4f; }
.stock-badge.stock-low { color: var(--c-oxblood); }
.stock-badge.stock-low::before { background: var(--c-oxblood); }
.stock-badge.stock-made { color: var(--metal-text); }
.stock-badge.stock-made::before { background: var(--c-brass); }
.stock-badge.stock-out { color: var(--text-muted); }
.stock-badge.stock-out::before { background: var(--text-muted); }