/* ============================================================
   MARKUS PRO — Layout System
   ============================================================ */

/* ── Container ───────────────────────────────────────────── */

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

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

/* ── Sections ────────────────────────────────────────────── */

.section {
  padding-block: var(--section-pad);
}

.section-alt {
  padding-block: var(--section-pad);
  background: var(--bg-secondary);
}

/* ── Page wrapper ────────────────────────────────────────── */

.page-wrap {
  padding-top: var(--nav-height);
  min-height: 100vh;
}

/* ── Grid ────────────────────────────────────────────────── */

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

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Auto responsive grids */
.grid-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}

.grid-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

/* ── Flex utilities ──────────────────────────────────────── */

.flex            { display: flex; }
.flex-col        { display: flex; flex-direction: column; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }
.gap-10 { gap: var(--sp-10); }

/* ── Spacing utilities ───────────────────────────────────── */

.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }
.mb-10 { margin-bottom: var(--sp-10); }

/* ── Visibility ──────────────────────────────────────────── */

.hidden          { display: none !important; }
.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;
}

/* ── Horizontal scroll strip ─────────────────────────────── */

.scroll-strip {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-2);
  scrollbar-width: none;
}
.scroll-strip::-webkit-scrollbar { display: none; }
.scroll-strip > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ── Aspect ratios ───────────────────────────────────────── */

.ratio-4-5  { aspect-ratio: 4 / 5; }
.ratio-3-4  { aspect-ratio: 3 / 4; }
.ratio-1-1  { aspect-ratio: 1 / 1; }
.ratio-16-9 { aspect-ratio: 16 / 9; }

/* ── Reveal animation ────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s var(--ease-standard),
    transform 0.6s var(--ease-standard);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }