/* ═══════════════════════════════════════════════════════════
   Every Layout — 11 verified primitives
   Source: aprietof/every-layout (Stack/Sidebar/Switcher also
   from every-layout.dev primary pages). Imposter + Icon
   excluded — book CSS unverified.
   ═══════════════════════════════════════════════════════════ */

/* ── Stack — vertical rhythm ─────────────────────────────── */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-block-start: var(--space, 1.5rem); }

/* ── Box — padded containment unit ──────────────────────── */
.box {
  padding: var(--padding, 1rem);
  border: var(--border-thick, 0.125rem) solid;
  outline: 0.125rem solid transparent;
}

/* ── Center — horizontal centering ──────────────────────── */
.center {
  display: block;
  max-inline-size: var(--max-width, 60ch);
  margin-inline: auto;
  padding-inline: var(--gutter, 1rem);
}

/* ── Cluster — flexible inline grouping ──────────────────── */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space, 1rem);
  justify-content: flex-start;
  align-items: center;
}

/* ── Sidebar — responsive two-column without breakpoints ─── */
.sidebar { display: flex; flex-wrap: wrap; gap: var(--space, 1rem); }
.sidebar > :first-child { flex-basis: var(--side-width, 20rem); flex-grow: 1; }
.sidebar > :last-child  { flex-basis: 0; flex-grow: 999; min-inline-size: var(--content-min, 50%); }

/* ── Switcher — binary horizontal-or-vertical ────────────── */
.switcher { display: flex; flex-wrap: wrap; gap: var(--space, 1rem); }
.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--threshold, 30rem) - 100%) * 999);
}

/* ── Cover — full-height vertical hero ───────────────────── */
.cover {
  display: flex;
  flex-direction: column;
  min-height: var(--min-height, 100vh);
  padding: var(--padding, 1rem);
}
.cover > * { margin-block: var(--space, 1rem); }
.cover > h2 { margin-block: auto; }
.cover > :first-child:not(h2) { margin-block-start: 0; }
.cover > :last-child:not(h2)  { margin-block-end:   0; }

/* ── Grid — equal-cell auto-responsive grid ──────────────── */
.grid {
  display: grid;
  gap: var(--space, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 250px), 100%), 1fr));
}

/* ── Frame — aspect-ratio media wrapper ──────────────────── */
.frame {
  aspect-ratio: var(--n, 16) / var(--d, 9);
  overflow: hidden;
}
.frame > * { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ── Reel — horizontal scroll strip ─────────────────────── */
.reel {
  display: flex;
  overflow-x: auto;
  gap: var(--space, 1rem);
  scrollbar-color: var(--thumbColor, var(--color-copper)) var(--trackColor, var(--color-parchment));
}
.reel > * { flex: 0 0 var(--itemWidth, 25%); }
.reel > img { block-size: var(--height, 10rem); flex-basis: auto; inline-size: auto; }

/* ── Container — site-wide max-width wrapper ─────────────── */
/* .el-container avoids clash with existing .container in base_shop.css */
.el-container { max-width: var(--content-max, 1120px); margin-inline: auto; }