/* ==========================================================================
   pages.css — page layouts. Components keep their own CSS; this file only
   places them. Role tokens only.
   Chunk 17 gives the existing pages the shared frame only: each page's own
   layout comes in its chunk.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared by every page (from the reference's pages.css)
   -------------------------------------------------------------------------- */

.page-head {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-xl) var(--space-l);
}

.page-head__meta {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
}

/* HQ: a category's intro (Chunk 19), plain text under the title. */
.page-head__intro {
  max-width: var(--measure-reading);
}

.page-section {
  margin-top: var(--space-section);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
  margin-bottom: var(--space-l);
}

.section-head__text {
  display: grid;
  gap: var(--space-xs);
}

.section-head__eyebrow {
  color: var(--color-ink-muted);
}

/* HQ: a column of blocks with even space between them. */
.stack {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-l);
  min-width: 0;
}

.stack--tight {
  gap: var(--space-s);
}

.muted {
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------------
   storefront/home.html: "Coming soon"
   -------------------------------------------------------------------------- */

.coming-soon {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-l);
  min-height: 100svh;
  padding-block: var(--space-2xl);
}

.coming-soon__wordmark {
  width: 100%;
}

.coming-soon__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-l);
}

/* --------------------------------------------------------------------------
   storefront/home.html (Chunk 20; aligne.co's structure since 18 October 2026)
   -------------------------------------------------------------------------- */

.home {
  display: grid;
  /* minmax(0, …): the magazine's sideways row must scroll, not widen the page. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
}

/* The messages' container takes no room (and no gap) when it's empty: the
   opening starts right under the bar. */
.home > .container:not(:has(*)) {
  display: none;
}

.home__products {
  padding-block: var(--space-2xl);
}

.home__products-title {
  font-family: var(--font-display);
  font-size: var(--type-heading-size);
  font-weight: var(--type-heading-weight);
  line-height: var(--type-heading-line-height);
  letter-spacing: var(--type-heading-tracking);
}

.home > .campaign-stories {
  padding-bottom: var(--space-2xl);
}


/* --------------------------------------------------------------------------
   storefront/product_detail.html (Chunk 21; reference: pages/product.html)
   -------------------------------------------------------------------------- */

.product-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
}

.product-page__info {
  display: grid;
  align-content: start;
  gap: var(--space-l);
  min-width: 0;
}

.product-page__intro {
  display: grid;
  gap: var(--space-xs);
}

.product-page__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
}

.product-page__name {
  font-size: var(--type-heading-s-size);
  line-height: var(--type-heading-s-line-height);
  letter-spacing: var(--type-heading-s-tracking);
}

.product-page__facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
}

.product-page__facts dt {
  color: var(--color-ink-muted);
}

.product-page__block {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
  padding-top: var(--space-l);
  border-top: var(--rule-width) solid var(--color-line);
}

@media (min-width: 48em) {
  .product-page__layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-xl);
    padding-top: var(--space-l);
  }

  .product-page__info {
    position: sticky;
    top: calc(var(--header-height) + var(--space-l));
  }
}

/* HQ: the dollars note, and the form holding sizes and actions. */
.product-page__note {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--type-label-size);
}

.product-page__form {
  display: grid;
  gap: var(--space-l);
}

/* --------------------------------------------------------------------------
   storefront/product_gone.html (Chunk 21; reference: pages/product_unavailable.html)
   -------------------------------------------------------------------------- */

.product-gone__lead {
  border-bottom: var(--rule-width) solid var(--color-line);
}

/* --------------------------------------------------------------------------
   storefront/selection.html (Chunk 22; reference: pages/selection.html)
   -------------------------------------------------------------------------- */

.selection-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-m);
}

@media (min-width: 48em) {
  .selection-page__layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
  }

  .selection-page__layout > .selection-summary {
    position: sticky;
    top: calc(var(--header-height) + var(--space-l));
  }
}

/* --------------------------------------------------------------------------
   storefront/contact.html and contact_sent.html (Chunk 22; reference:
   pages/contact.html)
   -------------------------------------------------------------------------- */

.contact-page {
  max-width: calc(var(--measure-reading) + 2 * var(--layout-gutter));
}

.contact-page__intro {
  color: var(--color-ink-muted);
}

.contact-form,
.contact-page__done {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-l);
}

.contact-page__done {
  justify-items: start;
}

.contact-page__done > .request-code {
  justify-self: stretch;
}

/* --------------------------------------------------------------------------
   Reading text (privacy, how ordering works, size guide intros)
   -------------------------------------------------------------------------- */

.reading {
  max-width: var(--measure-reading);
}

.reading > section {
  margin-top: var(--space-2xl);
}

.reading h2 {
  margin-bottom: var(--space-s);
  font-size: var(--type-heading-s-size);
  line-height: var(--type-heading-s-line-height);
  letter-spacing: var(--type-heading-s-tracking);
}

.reading p + p,
.reading p + ul,
.reading ul + p {
  margin-top: var(--space-s);
}

.reading ul {
  display: grid;
  gap: var(--space-xs);
  padding-left: var(--space-l);
}

.reading__lead {
  max-width: var(--measure-reading);
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------------
   storefront/ordering.html (Chunk 23; reference: pages/how_ordering_works.html,
   no shop photos)
   -------------------------------------------------------------------------- */

.shop-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
}

.shop-block__text {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--space-s);
}

.shop-block__address {
  font-style: normal;
}

.shop-block__hours {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
}

@media (min-width: 48em) {
  .shop-block {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* HQ: the closing buttons. */
.ordering-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* --------------------------------------------------------------------------
   storefront/size_guide.html (Chunk 23; reference: pages/size_guide.html,
   text only: no diagrams)
   -------------------------------------------------------------------------- */

.size-guide__charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
}

.size-guide__chart > h2 {
  margin-bottom: var(--space-m);
  font-size: var(--type-heading-s-size);
  line-height: var(--type-heading-s-line-height);
  letter-spacing: var(--type-heading-s-tracking);
}

.measure-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gap-column);
  row-gap: var(--grid-gap-row);
}

.measure-list__item {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}

.measure-list__title {
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-mono-line-height);
  letter-spacing: 0;
}

.size-guide__help {
  display: grid;
  justify-items: start;
  gap: var(--space-s);
  padding-top: var(--space-l);
  border-top: var(--rule-width) solid var(--color-line);
}

@media (min-width: 75em) {
  .measure-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   storefront/privacy.html (HQ, Chunk 23): who runs the site, from the settings
   -------------------------------------------------------------------------- */

.privacy-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-m);
}

.privacy-identity dt {
  color: var(--color-ink-muted);
}