/* ==========================================================================
   Layout
   Structural primitives shared by every page: containers, section rhythm,
   and a small set of flex/grid utilities. Page-specific layout (shop grid,
   product gallery, checkout steps) lives in its own stylesheet.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
  background:
    radial-gradient(circle at 95% 0%, rgba(var(--color-secondary-rgb), 0.06), transparent 26rem),
    radial-gradient(circle at 0% 24rem, rgba(var(--color-accent-rgb), 0.055), transparent 30rem);
}

section,
.section {
  padding-block: var(--space-8);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  position: relative;
}

.section-head h2::after {
  content: '';
  display: block;
  width: 42px;
  height: 3px;
  margin-top: var(--space-2);
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
}

/* Flex utilities */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center   { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }

/* Grid utilities — auto-fit product/category grids that reflow without
   media queries for the common cases; page-specific grids may override. */
.grid {
  display: grid;
  gap: var(--space-5);
}

.grid-auto-sm {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.grid-auto-md {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.grid-auto-lg {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Visually-hidden but screen-reader accessible — for skip links, labels */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-4);
  z-index: var(--z-toast);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-4);
}