/**
 * Dabi — layout primitives + vertical rhythm.
 *
 * Vertical sources (one level = one token):
 *   .section          → --section-y   (between sections only)
 *   .stack--block     → --block-y     (blocks inside a section)
 *   .stack            → --stack-y     (elements inside a component)
 *   .card / panels    → --pad-card / --pad-panel
 * Horizontal: --gutter on containers; --gap on grids.
 * Prefer gap over margin for repeated vertical spacing.
 */

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

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

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

.container--bleed {
  max-width: none;
  padding-inline: 0;
}

/* Section — ONLY vertical rhythm between page sections */
.section {
  display: flex;
  flex-direction: column;
  gap: var(--block-y);
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: calc(var(--section-y) * 0.5);
}

/* Stacks — gap-based vertical spacing (no child margins) */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-y);
}

.stack--block {
  display: flex;
  flex-direction: column;
  gap: var(--block-y);
}

.stack > :first-child,
.stack--block > :first-child {
  margin-block-start: 0;
}

.stack > :last-child,
.stack--block > :last-child {
  margin-block-end: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stack-y);
  align-items: center;
}

.grid {
  display: grid;
  gap: var(--gap);
}

/* Card / panel padding primitives */
.card {
  padding: var(--pad-card);
  background: var(--surface);
  border-radius: var(--radius);
}

.panel {
  padding: var(--pad-panel);
  background: var(--surface);
  border-radius: var(--radius);
}

/* Product card → assets/css/components.css */

/* Column utilities — product / brand grids */
.cols-2,
.cols-3,
.cols-4,
.cols-5 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cols-3,
  .cols-4,
  .cols-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cols-4,
  .cols-5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  .cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}