/* ==========================================================================
   MUSKETEER — Page-scoped blocks: hero, code trio, PDP, cart, checkout, misc
   ========================================================================== */

/* --- Home hero ------------------------------------------------------------ */
.hero {
  position: relative;
  /* svh, not vh: on mobile browsers vh is the *largest* viewport, so a vh hero
     sits partly under the retracted URL bar until the user scrolls. */
  min-height: clamp(70svh, 82svh, 900px);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--paper);
  overflow: hidden;
  background: #0b0b0c;
}
@supports not (height: 1svh) {
  .hero { min-height: clamp(70vh, 82vh, 900px); }
}
.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Scrim: bright B&W footage cycles through high-key frames, so a firm,
   bottom-weighted dark gradient + a soft centre vignette keep the white
   wordmark legible across the whole loop. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.28) 42%, rgba(0,0,0,0.78) 100%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  /* Shrink-to-fit (so the grid keeps the block centred), but never wider than
     the hero itself. */
  max-width: 100%;
  padding: var(--space-5) var(--space-4);
}
/* The wordmark carries ~0.32em of tracking on top of nine glyphs, so its box is
   far wider than the font-size suggests — size it off the viewport and shed
   tracking as the screen narrows, or it overflows and drags the whole centred
   block off-axis. */
.hero__word {
  font-size: min(var(--step-5), 10.5vw);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 2px 40px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.45);
}
.hero__tagline {
  margin-top: var(--space-3);
  font-size: min(var(--step-1), 4.6vw);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 16px rgba(0,0,0,0.6);
}
.hero__sub {
  margin: var(--space-3) auto 0;
  max-width: 40ch;
  color: #f3f1ea;
  text-shadow: 0 1px 14px rgba(0,0,0,0.55);
}
.hero__cta { margin-top: var(--space-4); display: inline-flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* --- Silk accent band (Three.js) ----------------------------------------- */
.silk-band {
  position: relative;
  height: clamp(180px, 26vh, 320px);
  background: #050505;
  overflow: hidden;
}
.silk-band canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.silk-band__caption {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--paper);
  pointer-events: none;
}
.silk-band__caption p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.1em;
  margin-inline: auto;
}

/* --- Section heading ------------------------------------------------------ */
.section-head { text-align: center; margin-bottom: var(--space-5); }
.section-head .eyebrow { display: block; margin-bottom: var(--space-2); }

/* --- Collection cards (home) ---------------------------------------------- */
.collection-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.collection-card {
  position: relative;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--paper-3);
  color: var(--paper);
}
.collection-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.collection-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11,11,12,0.75)); }
.collection-card:hover img { transform: scale(1.05); }
.collection-card__body { position: relative; z-index: 1; padding: var(--space-4); }
.collection-card__body h3 { color: var(--paper); }

/* --- The Musketeer Code (Honor / Sacrifice / Unity) ----------------------- */
.code-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  text-align: center;
}
.code-trio__item h3 { font-size: var(--step-2); letter-spacing: 0.1em; text-transform: uppercase; }
.code-trio__item .num { display: block; font-family: var(--font-display); font-size: var(--step-2); color: var(--gold); margin-bottom: var(--space-2); }

/* --- Editorial split feature (Zara-style image + minimal copy) ------------ */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(420px, 60vh, 640px);
}
.feature--reverse .feature__media { order: 2; }
.feature__media { position: relative; overflow: hidden; background: var(--paper-3); }
.feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__body {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-6);
  background: var(--ink);
  color: var(--paper);
}
.feature__body .eyebrow { color: var(--gold); }
.feature__body h2 { color: var(--paper); margin-block: var(--space-2) var(--space-3); }
.feature__body p { color: #cfcdc6; max-width: 38ch; }
.feature__body .btn { margin-top: var(--space-4); align-self: flex-start; }

/* --- Lookbook ------------------------------------------------------------- */
.lookbook {
  padding: var(--space-6) var(--space-4);
  background: var(--paper-2);
}
.lookbook__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: var(--container);
  margin-inline: auto;
}
.lookbook__item {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-3);
}
.lookbook__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.lookbook__item:hover img { transform: scale(1.03); }

/* --- Made-in-USA strip ---------------------------------------------------- */
.usa-strip {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding-block: var(--space-5);
}
.usa-strip .flag { font-size: 1.4rem; }

/* --- Shop layout ---------------------------------------------------------- */
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-5); align-items: start; }
.filters { position: sticky; top: 6rem; }
.filters__group { padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.filters__group h3 { font-family: var(--font-ui); font-size: var(--step--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: var(--space-2); }
.filters__opt { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; font-size: var(--step-0); cursor: pointer; }
.filters__opt input { accent-color: var(--gold-deep); }
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.shop-toolbar .count { font-size: var(--step--1); color: var(--text-muted); }
.sort-field { margin: 0; flex-direction: row; align-items: center; gap: 0.6rem; }
.sort-field__label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--step--1);
}
.sort-field .select { width: auto; }

/* Active-filter chips */
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.filter-chips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.5rem 0.35rem 0.75rem;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}
.chip button { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; color: var(--text-muted); }
.chip button:hover { color: var(--ink); }
.chip--clear { border-style: dashed; color: var(--text-muted); padding: 0.35rem 0.75rem; }
.chip--clear:hover { color: var(--ink); border-color: var(--ink); }

/* Mobile "Filters" trigger — hidden on desktop */
.filters-trigger { display: none; }

/* --- Collection hero ------------------------------------------------------ */
.collection-hero { text-align: center; padding-block: var(--space-6); background: var(--paper-2); }

/* --- Product detail (PDP) ------------------------------------------------- */
.pdp { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-6); align-items: start; }
.pdp__gallery { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-3); }
.pdp__thumbs { display: flex; flex-direction: column; gap: var(--space-2); }
.pdp__thumb { aspect-ratio: 4/5; overflow: hidden; border: 1px solid transparent; background: var(--paper-3); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb[aria-pressed="true"] { border-color: var(--ink); }
.pdp__main { aspect-ratio: 4/5; overflow: hidden; background: var(--paper-3); }
.pdp__main img { width: 100%; height: 100%; object-fit: cover; }
.pdp__info { position: sticky; top: 6rem; }
.pdp__price { font-size: var(--step-2); font-family: var(--font-display); margin-block: var(--space-2) var(--space-4); }
.pdp__row { margin-block: var(--space-4); }
.pdp__row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.pdp__row-head h2 { font-family: var(--font-ui); font-size: var(--step--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.pdp__actions { display: flex; gap: var(--space-2); margin-block: var(--space-4); }

/* --- Cart ----------------------------------------------------------------- */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-6); align-items: start; }
.cart-line { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--space-3); padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.cart-line__media { aspect-ratio: 4/5; background: var(--paper-3); overflow: hidden; }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__title { font-family: var(--font-display); font-size: var(--step-1); line-height: var(--leading-snug); }
.cart-line__meta { font-size: var(--step--1); color: var(--text-muted); }
.cart-line .qty { margin-top: var(--space-2); }
.cart-line__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  text-align: right;
}
.cart-line__remove { font-size: var(--step--1); color: var(--text-muted); border-bottom: 1px solid currentColor; }
.cart-line__remove:hover { color: var(--danger); }
.summary { background: var(--paper-2); padding: var(--space-4); position: sticky; top: 6rem; }
.summary__row { display: flex; justify-content: space-between; padding-block: var(--space-2); }
.summary__row--total { border-top: 1px solid var(--line); margin-top: var(--space-2); padding-top: var(--space-3); font-family: var(--font-display); font-size: var(--step-1); }
.empty-state { text-align: center; padding-block: var(--space-7); }

/* Narrow phones: 96px thumb + quantity stepper + price column exceeds the
   viewport, so the price/remove pair drops beneath the details instead. */
@media (max-width: 560px) {
  .cart-line { grid-template-columns: 72px 1fr; gap: var(--space-3); }
  .cart-line__aside {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* --- Checkout ------------------------------------------------------------- */
.checkout-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-6); align-items: start; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
.form-grid .field--full { grid-column: 1 / -1; }
.confirm { text-align: center; padding-block: var(--space-7); }
.confirm__mark { font-size: 3rem; color: var(--ok); }

/* --- Content pages -------------------------------------------------------- */
.prose { max-width: 70ch; }
.prose h2 { margin-top: var(--space-5); margin-bottom: var(--space-2); }
.prose h3 { margin-top: var(--space-4); margin-bottom: var(--space-2); }
.prose p, .prose ul { margin-bottom: var(--space-3); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4rem; }

/* A five-column measurement table cannot compress below ~330px, so it scrolls
   inside its own box rather than pushing the page sideways. */
.table-scroll {
  overflow-x: auto;
  margin-block: var(--space-3);
  -webkit-overflow-scrolling: touch;
}
.size-table { width: 100%; min-width: 30rem; border-collapse: collapse; }
.size-table th, .size-table td { padding: 0.7rem 0.9rem; border: 1px solid var(--line); text-align: left; font-size: var(--step-0); }
.size-table thead th { background: var(--paper-2); font-family: var(--font-ui); letter-spacing: 0.06em; }

.page-head { text-align: center; padding-block: var(--space-6) var(--space-5); }

/* --- Custom button-down builder ------------------------------------------ */
/* --- Related rail --------------------------------------------------------- */
.rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

/* --- Mobile sticky add-to-bag bar (PDP) ----------------------------------- */
.pdp-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-header);
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
  background: rgba(250, 249, 246, 0.96);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.pdp-sticky .btn { min-height: 48px; }
.pdp-sticky__price { font-family: var(--font-display); font-size: var(--step-1); }
.pdp-sticky .btn { margin-left: auto; }
/* product.js toggles .is-shown once the inline add button leaves the viewport. */
.pdp-sticky:not(.is-shown) {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
.pdp-sticky { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 980px) {
  .pdp, .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .pdp__info, .summary, .filters { position: static; }
  .shop-layout { grid-template-columns: 1fr; }
  .rail { grid-template-columns: repeat(2, 1fr); }
  .lookbook__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { grid-template-columns: 1fr; }
  .feature--reverse .feature__media { order: 0; }
  .feature__media { min-height: 320px; }
}

@media (max-width: 760px) {
  /* Hero: shed tracking so the nine-glyph wordmark clears the viewport, and
     tighten the inner padding it is measured against. */
  .hero__word { letter-spacing: 0.2em; font-size: min(var(--step-5), 11vw); }
  .hero__inner { padding: var(--space-5) var(--space-3); }
  .hero__sub { max-width: 34ch; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1 1 auto; min-height: 48px; }

  .collection-cards, .code-trio { grid-template-columns: 1fr; }
  /* Three stacked 3:4 cards is ~1300px of scroll — a square crop keeps the set
     skimmable, biased upward so the collar and placket survive the crop
     instead of centring on the waist. */
  .collection-card { aspect-ratio: 1 / 1; }
  .collection-card img { object-position: 50% 18%; }
  .option-grid, .option-grid--swatches { grid-template-columns: 1fr; }
  .page-head h1 { font-size: var(--step-3); text-wrap: balance; }

  /* Editorial feature: --space-6 all round leaves a ~230px text column on a
     375px screen, which wraps the CTA label onto two lines. */
  .feature__body { padding: var(--space-6) var(--space-4); }
  .feature__body .btn { align-self: stretch; }
  .feature__media { min-height: 0; aspect-ratio: 4 / 3; }

  .pdp__gallery { grid-template-columns: 1fr; }
  .pdp__thumbs { flex-direction: row; order: 2; overflow-x: auto; scrollbar-width: none; }
  .pdp__thumbs::-webkit-scrollbar { display: none; }
  .pdp__thumb { flex: 0 0 68px; }
  /* Leave room for the sticky add-to-bag bar so the footer clears it.
     product.js appends .pdp-sticky to <body>, so :has() scopes this to the PDP
     without needing a new page flag. */
  body:has(.pdp-sticky) { padding-bottom: 5.5rem; }
  .form-grid { grid-template-columns: 1fr; }

  /* The toolbar is a single no-wrap flex row; on mobile its min-content width
     forces the whole shop grid wider than the viewport. Filters and Sort share
     the top row, the result count drops beneath them, and the redundant "Sort"
     label goes screen-reader-only to buy the select its width back. */
  .shop-toolbar { flex-wrap: wrap; row-gap: var(--space-2); align-items: stretch; }
  .shop-toolbar .count { order: 3; flex: 1 0 100%; }
  .filters-trigger { flex: 0 0 auto; }
  .sort-field { flex: 1 1 auto; justify-content: flex-end; }
  .sort-field .select { flex: 0 1 auto; min-width: 0; }
  .sort-field__label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
  .shop-layout > * { min-width: 0; }
  /* Filter rail collapses into a left slide-in drawer; show the trigger button */
  .filters-trigger {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6em 1em;
    font-size: var(--step--1); letter-spacing: var(--tracking-wide); text-transform: uppercase;
    border: 1px solid var(--ink); border-radius: var(--radius);
  }
  .shop-aside {
    position: fixed;
    top: 0; left: 0;
    width: min(86vw, 360px); height: 100dvh;
    z-index: var(--z-drawer);
    background: var(--paper);
    border-right: 1px solid var(--line);
    padding: var(--space-4);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
  }
  .shop-aside.is-open { transform: translateX(0); }
  .pdp-sticky { display: flex; }
}

/* The in-aside drawer header (close button) only appears in the mobile drawer */
.shop-aside__head { display: none; }
@media (max-width: 760px) {
  .shop-aside__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
}