/* ============================================================
   ORVENA - Layout layer
   Container, grid, sections, page chrome geometry.
   ============================================================ */

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter-sm);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--form   { max-width: calc(var(--container-form) + var(--gutter) * 2); }
.container--flush  { padding-inline: 0; }

@media (min-width: 768px)  { .container { padding-inline: var(--gutter-md); } }
@media (min-width: 1024px) { .container { padding-inline: var(--gutter); } }

/* ---------- Section rhythm ----------
   Homepage rhythm is created by alternating section ground colour and
   by varying the vertical gap - not by adding borders everywhere. */
.section { padding-block: var(--section-gap-sm); }
.section--tight { padding-block: var(--space-8); }
.section--flush-top { padding-block-start: 0; }
.section--surface { background: var(--color-surface); }
.section--ink { background: var(--color-ink); color: var(--color-text-inverse); }
@media (min-width: 1024px) {
  .section { padding-block: var(--section-gap); }
  .section--tight { padding-block: var(--space-10); }
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-block-end: var(--space-7);
}
.section-head__text { min-width: 0; }
.section-head__title { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-heading); }
.section-head__sub {
  margin-block-start: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.section-head__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.section-head__link:hover { color: var(--color-accent); }
@media (min-width: 1024px) { .section-head { margin-block-end: var(--space-8); } }

/* ---------- Product grid ----------
   2 / 3 / 4 / 5. The 2-column mobile grid is the primary shopping
   surface and is tuned first: see DESIGN_DECISIONS D-04. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-sm) var(--grid-gap-sm);
}
@media (min-width: 600px)  { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--grid-gap); } }
@media (min-width: 1600px) { .product-grid--wide { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Listing pages sit next to a filter rail, so they stay at 3 up to XL */
.product-grid--listing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px)  { .product-grid--listing { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .product-grid--listing { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Generic grids ---------- */
.grid { display: grid; gap: var(--grid-gap); }
/* Two-up is a tablet-and-wider layout. Below 768px a half-column is ~156px,
   which is not enough for a form field, a toolbar or a labelled control. */
.grid--2 { grid-template-columns: minmax(0, 1fr); }
.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Content-driven: use where cells hold whole blocks rather than cards, so a
   cell never drops below the width its content actually needs. */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- Listing page shell ---------- */
.listing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .listing { grid-template-columns: 248px minmax(0, 1fr); gap: var(--space-10); }
}
.listing__rail { display: none; }
@media (min-width: 1024px) {
  .listing__rail {
    display: block;
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-5));
    max-height: calc(100vh - var(--header-h) - var(--space-9));
    overflow-y: auto;
    padding-inline-end: var(--space-2);
  }
}

/* ---------- PDP shell ---------- */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}
@media (min-width: 1024px) {
  .pdp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-11);
    align-items: start;
  }
  .pdp__info { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-6)); }
}

/* ---------- Checkout shell ---------- */
.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
/* Checkout only, single column: the order summary goes ABOVE the form. A
   shopper on a phone wants to confirm what she is buying before she starts
   typing, and a summary below a long form is a summary nobody reads.
   The cart keeps items-first — there you review and adjust before totalling. */
.checkout--flow .checkout__aside { order: -1; }
@media (min-width: 1024px) {
  .checkout { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-11); }
  .checkout__aside { position: sticky; inset-block-start: var(--space-8); }
  .checkout--flow .checkout__aside { order: 0; }
}

/* ---------- Flex helpers ---------- */
.row { display: flex; align-items: center; gap: var(--space-3); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; }
.stack > * + * { margin-block-start: var(--space-5); }
.stack-sm > * + * { margin-block-start: var(--space-3); }
.stack-lg > * + * { margin-block-start: var(--space-8); }
.spacer { flex: 1 1 auto; }

/* ---------- Page header (breadcrumb + title block) ---------- */
.page-head { padding-block: var(--space-7) var(--space-8); }
.page-head__title { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-heading); }
.page-head__desc {
  margin-block-start: var(--space-4);
  max-width: 62ch;
  color: var(--color-text-secondary);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}
.page-head__count {
  margin-block-start: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-body-sm);
}

/* ---------- Mobile bottom-nav offset ----------
   Everything above the fixed bottom nav needs breathing room, and the
   safe-area inset matters on notched phones. */
@media (max-width: 1023px) {
  body { padding-block-end: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
}