/* =========================================================================
   Layout — containers, sections, grids. Structural only; no color/borders
   that belong to components.
   ========================================================================= */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* Keep the gutter, but never let content slide under the notch / rounded
     corners in landscape now that viewport-fit=cover runs edge-to-edge. */
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.container--narrow { max-width: var(--container-narrow); }

/* ---- Vertical rhythm --------------------------------------------------- */
.section {
  padding-block: clamp(var(--space-8), 8vw, var(--space-10));
}

.section--inset {
  background: var(--bg-raised);
  border-block: 1px solid var(--line);
}

/* ---- Section head (eyebrow + title on left, link on right) ------------- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
  flex-wrap: wrap;
}

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

/* ---- Product grid ------------------------------------------------------ */
/* Deliberate column counts (not auto-fill) so the card foot always has a known
   width to lay out: 2 per row on phones, 3 on tablets, 4 on desktop. Mobile
   card padding is trimmed (components.css) so a full-width stepper fits 2-up. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(var(--space-3), 2.5vw, var(--space-6));
}
/* Blowout guard: cards shrink with their track, never widen the page. */
.product-grid > * { min-width: 0; }
@media (min-width: 640px)  { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- Page head (about / shop / newsletter) ----------------------------- */
.page-head {
  padding-block: clamp(var(--space-8), 10vw, var(--space-10)) var(--space-6);
  border-bottom: 1px solid var(--line-faint);
}

/* ---- Footer grid ------------------------------------------------------- */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-8);
  padding-block: var(--space-9);
}

.footer-col > h4 {
  margin-bottom: var(--space-4);
  color: var(--ink);
}

.footer-col ul { list-style: none; padding: 0; }
.footer-col li + li { margin-top: var(--space-2); }
.footer-col a {
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-5);
  border-top: 1px solid var(--line-faint);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* ---- Pillars (three-up column) ----------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(var(--space-6), 4vw, var(--space-8));
}

/* ---- Centered body variant (thank-you page) ---------------------------- */
body.is-centered main {
  display: flex;
  align-items: center;
  justify-content: center;
}