/* ============================================================
   SAINT BONES — LAYOUT PRIMITIVES
   Containers · gutters · section rhythm · grids · sticky chrome
   Requires sb-tokens.css. One layout language for both worlds.
   ============================================================ */

/* ---------- CONTAINERS ------------------------------------- */
.sb-page { width: 100%; overflow-x: clip; }

.sb-container {
  width: 100%;
  max-width: var(--sb-container-main);
  margin-inline: auto;
  padding-inline: var(--sb-page-inline);
}
.sb-container--full { max-width: var(--sb-container-full); }
/* Edge-to-edge imagery band: no max-width, no gutter. */
.sb-container--bleed { max-width: none; padding-inline: 0; }

/* Reading measures — apply to the text element, not the container. */
.sb-measure { max-width: var(--sb-measure-body); }
.sb-measure--reading { max-width: var(--sb-measure-reading); }
.sb-measure--lede { max-width: var(--sb-measure-lede); }
.sb-measure--caption { max-width: var(--sb-measure-caption); }

/* ---------- SECTION RHYTHM -------------------------------- */
.sb-section { padding-block: var(--sb-section-y); }
.sb-section--sm { padding-block: var(--sb-section-y-sm); }
.sb-section--lg { padding-block: var(--sb-section-y-lg); }
.sb-section--flush { padding-block: 0; }
.sb-section--inverse { background: var(--sb-color-bg-inverse); color: var(--sb-color-text-inverse-body); }
.sb-section--light { background: var(--sb-color-bg); color: var(--sb-color-text); }
/* Hairline-separated stack of service/fact rows. */
.sb-section--ruled { border-block: var(--sb-border-hairline) solid var(--sb-color-border); }
.sb-section--inverse.sb-section--ruled { border-block-color: var(--sb-color-border-inverse); }

.sb-stack { display: flex; flex-direction: column; gap: var(--sb-block-y); }
.sb-stack--tight { gap: var(--sb-space-10); }
.sb-stack--loose { gap: var(--sb-section-y-sm); }

/* ---------- GRID PRIMITIVES ------------------------------- */
.sb-grid { display: grid; gap: var(--sb-grid-gap); }

/* PRODUCT GRIDS — cardinality-bound. The column count IS the approved
   merchandising density and is capped; a wide viewport widens the cards,
   it never adds a column. Watches and eyewear are 3-up because the object
   must read; apparel is 4-up because the fashion grid is denser. */
.sb-grid--watch { grid-template-columns: repeat(var(--sb-grid-cols-watch), minmax(0, 1fr)); }
.sb-grid--eyewear { grid-template-columns: repeat(var(--sb-grid-cols-eyewear), minmax(0, 1fr)); }
.sb-grid--apparel { grid-template-columns: repeat(var(--sb-grid-cols-apparel), minmax(0, 1fr)); }
.sb-grid--looks { grid-template-columns: repeat(var(--sb-grid-cols-looks), minmax(0, 1fr)); }

/* NON-PRODUCT auto-fit grids. These are genuinely floor-driven: their
   members are text blocks, not merchandising, so column count may vary. */
.sb-grid--collections { grid-template-columns: repeat(auto-fit, minmax(var(--sb-grid-min-collections), 1fr)); }
.sb-grid--facts { grid-template-columns: repeat(auto-fit, minmax(var(--sb-grid-min-facts), 1fr)); }
.sb-grid--footer { grid-template-columns: repeat(auto-fit, minmax(var(--sb-grid-min-footer), 1fr)); }

/* Fixed-count grids for deliberate compositions. */
.sb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sb-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Asymmetric editorial + PDP splits. These four ratios are the
   complete approved set; do not invent a fifth. */
.sb-split { display: grid; gap: var(--sb-grid-gap); }
.sb-split--24-76 { grid-template-columns: minmax(0, 24fr) minmax(0, 76fr); }  /* label / content */
.sb-split--34-66 { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); }  /* nav / body */
.sb-split--52-48 { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); }  /* editorial 50/50 */
.sb-split--62-38 { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }  /* PDP gallery / panel */

.sb-split--62-38 > :last-child { max-width: var(--sb-panel-purchase); }

/* ---------- BEHAVIOURAL BOUNDARIES ------------------------
   NOTE: the literal px values in the @media rules below are the only
   hardcoded lengths in this file. CSS media queries cannot consume
   custom properties; the values mirror --sb-bp-grid / --sb-bp-layout /
   --sb-bp-nav exactly and must be changed together with them.
   Three, each measured. Navigation switches higher than layout
   because the desktop header's three nav clusters need ~1025px
   before they compress; the PDP purchase panel stays viable to
   ~910px; product grids hold their family count to 768px.

   LAYOUT — below 920px splits collapse and the panel unbinds.  */
@media (max-width: 919px) {
  .sb-split,
  .sb-grid--3,
  .sb-grid--4,
  .sb-grid--5,
  .sb-grid--collections { grid-template-columns: minmax(0, 1fr); }
  .sb-split--62-38 > :last-child { max-width: none; }
  /* Apparel steps 4-up → 3-up before it reaches the mobile 2-up. */
  .sb-grid--apparel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- MOBILE LAYOUT RULES --------------------------- */
/* GRID — below 768px (≤ 767px) every product family is 2-up; at and
   above 768px the family merchandising column rules apply.
   Reference width 390px. Gutter is a fixed 18px — the desktop
   fluid gutter is not carried down. */
@media (max-width: 767px) {
  .sb-container,
  .sb-container--full { padding-inline: var(--sb-page-inline-mobile); }

  .sb-section { padding-block: var(--sb-section-y-mobile); }
  .sb-section--sm { padding-block: var(--sb-section-y-mobile-sm); }
  .sb-section--lg { padding-block: var(--sb-section-y-mobile-lg); }

  .sb-grid { gap: var(--sb-grid-gap-mobile); }
  /* All product families collapse to the same 2-up mobile grid —
     imagery stays legible and the two worlds stay visually distinct
     through card density, not column count. */
  .sb-grid--watch,
  .sb-grid--eyewear,
  .sb-grid--apparel,
  .sb-grid--looks {
    grid-template-columns: repeat(var(--sb-grid-cols-mobile), minmax(0, 1fr));
    column-gap: var(--sb-grid-gap-mobile);
    row-gap: var(--sb-grid-gap-mobile-row);
  }
  .sb-stack { gap: var(--sb-space-22); }
}

/* ---------- STICKY CHROME -------------------------------- */
.sb-header {
  position: sticky;
  top: 0;
  z-index: var(--sb-layer-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sb-space-10);
  height: var(--sb-header-height-desktop);
  padding-inline: var(--sb-page-inline);
  background: var(--sb-color-bg-inverse);
  color: var(--sb-color-text-inverse);
  border-bottom: var(--sb-border-hairline) solid var(--sb-color-border-inverse);
}
/* Over a hero the header is translucent; the blur is the only
   translucency in the system and is never used as a card style. */
.sb-header--over-media {
  background: var(--sb-scrim-header);
  backdrop-filter: blur(8px);
}
.sb-header--fluid { height: var(--sb-header-height); }

/* Filter/sort or category bar that pins beneath the header. */
.sb-subbar {
  position: sticky;
  top: var(--sb-header-height-desktop);
  z-index: var(--sb-layer-sticky-sub);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sb-space-10);
  padding: var(--sb-space-7) var(--sb-page-inline);
  background: var(--sb-color-bg);
  border-bottom: var(--sb-border-hairline) solid var(--sb-color-border);
}
.sb-section--inverse .sb-subbar,
.sb-subbar--inverse {
  background: var(--sb-color-bg-inverse);
  border-bottom-color: var(--sb-color-border-inverse);
}

/* Mobile purchase bar. Present on PDP, Bag and Checkout only. */
.sb-sticky-action {
  position: sticky;
  bottom: 0;
  z-index: var(--sb-layer-sticky-action);
  display: flex;
  align-items: center;
  gap: var(--sb-space-7);
  min-height: var(--sb-sticky-action-height);
  padding: var(--sb-space-6) var(--sb-page-inline-mobile);
  background: var(--sb-scrim-sticky);
  border-top: var(--sb-border-hairline) solid var(--sb-color-border-inverse-strong);
}
.sb-sticky-action--light {
  background: color-mix(in srgb, var(--sb-color-bg) 97%, transparent);
  border-top-color: var(--sb-color-border-strong);
}
.sb-sticky-action > .sb-btn { flex: 1; }

/* NAVIGATION — below 1040px the desktop header's nav clusters no
   longer fit without compression, so the drawer takes over and the
   bar shortens to 60px. This is above the layout boundary by design. */
@media (max-width: 1039px) {
  .sb-header { height: var(--sb-header-height-mobile); }
  .sb-header__nav { display: none; }          /* drawer takes over */
  .sb-header__drawer-toggle { display: flex; }
  .sb-subbar { top: var(--sb-header-height-mobile); }
}
@media (min-width: 1040px) {
  .sb-header__drawer-toggle { display: none; }
}
@media (max-width: 767px) {
  .sb-header { padding-inline: var(--sb-page-inline-mobile); }
  .sb-subbar { padding-inline: var(--sb-page-inline-mobile); }
}

/* ---------- SHEET / DRAWER ------------------------------- */
.sb-sheet-scrim {
  position: fixed; inset: 0;
  z-index: var(--sb-layer-scrim);
  background: var(--sb-scrim-sheet);
}
.sb-sheet {
  position: fixed; inset: auto 0 0 0;
  z-index: var(--sb-layer-sheet);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--sb-color-bg-inverse);
  color: var(--sb-color-text-inverse-body);
  border-top: var(--sb-border-hairline) solid var(--sb-color-border-inverse-control);
}
.sb-sheet--light {
  background: var(--sb-color-bg);
  color: var(--sb-color-text);
  border-top-color: var(--sb-color-border-strong);
}
.sb-sheet__bar {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sb-space-7);
  padding: var(--sb-space-9) var(--sb-page-inline-mobile);
  background: inherit;
  border-bottom: var(--sb-border-hairline) solid var(--sb-color-border-inverse-strong);
}
.sb-sheet__footer {
  position: sticky; bottom: 0;
  padding: var(--sb-space-6) var(--sb-page-inline-mobile);
  background: var(--sb-scrim-sticky);
  border-top: var(--sb-border-hairline) solid var(--sb-color-border-inverse-strong);
}

/* ---------- ROW / ACCORDION PRIMITIVES ------------------- */
/* The recurring hairline-separated list: footer groups, accordions,
   collection indexes, account navigation, order lists. */
.sb-rows { display: flex; flex-direction: column; border-top: var(--sb-border-hairline) solid var(--sb-color-border); }
.sb-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sb-space-7);
  min-height: var(--sb-control-height-md);
  padding-block: var(--sb-space-9);
  border-bottom: var(--sb-border-hairline) solid var(--sb-color-border);
  text-align: left;
  background: transparent;
  border-inline: 0;
  border-top: 0;
  width: 100%;
  cursor: pointer;
}
.sb-rows--inverse, body[data-sb-ground="inverse"] .sb-rows { border-top-color: var(--sb-color-border-inverse); }
.sb-rows--inverse .sb-row, body[data-sb-ground="inverse"] .sb-row { border-bottom-color: var(--sb-color-border-inverse); }
.sb-row__body { padding: 0 0 var(--sb-space-10); }
.sb-row[aria-expanded="false"] + .sb-row__body { display: none; }