/* ==========================================================================
   LAYOUT — shell, grids, stacks
   Composition primitives only. Nothing here knows what it contains.
   ========================================================================== */

/* ---- Shell -------------------------------------------------------------
   One centring container, used everywhere. Padding is a token so a portal
   with a wider logo can loosen the gutter without touching a template.  */

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

.ssc-shell--narrow { max-width: 80ch; }
.ssc-shell--wide   { max-width: none; }

/* ---- Stack -------------------------------------------------------------
   Vertical rhythm via the owl selector, so a stack never puts a margin on
   its first or last child and cannot collapse against a section edge.   */

.ssc-stack > * + * { margin-block-start: var(--ss-stack-gap, var(--ss-space-s)); }

.ssc-stack--xs { --ss-stack-gap: var(--ss-space-2xs); }
.ssc-stack--s  { --ss-stack-gap: var(--ss-space-xs); }
.ssc-stack--m  { --ss-stack-gap: var(--ss-space-m); }
.ssc-stack--l  { --ss-stack-gap: var(--ss-space-l); }
.ssc-stack--xl { --ss-stack-gap: var(--ss-space-xl); }

/* ---- Section ----------------------------------------------------------- */

.ssc-section { padding-block: var(--ss-space-2xl); }
.ssc-section--tight { padding-block: var(--ss-space-l); }
.ssc-section--flush { padding-block: 0; }

.ssc-section--alt { background: var(--ssp-surface-alt); }

.ssc-section-head { margin-block-end: var(--ss-space-l); }

/* ---- Grid --------------------------------------------------------------
   Explicit column counts rather than auto-fill. auto-fill produced ghost
   tracks and orphan cards during the specimen work; naming the counts is
   duller and correct.                                                    */

.ssc-grid {
  display: grid;
  gap: var(--ss-grid-gap, var(--ss-space-m));
  grid-template-columns: 1fr;
}

/*
 * Grid and flex children default to min-width:auto, which means they
 * refuse to shrink below their content. One wide table or a long
 * unbroken SKU then forces the whole track wider than the screen and the
 * page scrolls sideways — with the overflow container doing nothing,
 * because its parent never let it get narrow enough to matter.
 *
 * This single rule is what makes overflow-x:auto work inside a grid.
 * Do not remove it.
 */
.ssc-grid > *,
.ssc-with-sidebar > *,
.ssc-cluster > * { min-width: 0; }

/*
 * Fixed column counts for PRODUCT grids, where a ragged final row of one
 * card looks like a bug and the item count is always high.
 */
@media (min-width: 40rem) {
  .ssc-grid--2, .ssc-grid--3, .ssc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .ssc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ssc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/*
 * Fluid columns for grids whose item count is small and variable —
 * departments, guides, range cards. A fixed three-column grid holding one
 * item leaves two empty tracks and reads as a broken page, which is
 * exactly what a store with one category showed. auto-fit collapses the
 * empty tracks instead; the max-width stops a lone card stretching to the
 * full width of the shell.
 */
.ssc-grid--fluid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.ssc-grid--fluid > * { max-width: 32rem; }

/* ---- Cluster ----------------------------------------------------------- */

.ssc-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-cluster-gap, var(--ss-space-xs));
  align-items: center;
}

.ssc-cluster--between { justify-content: space-between; }
.ssc-cluster--end     { justify-content: flex-end; }

/* ---- Sidebar ----------------------------------------------------------
   Shop layout: filters beside a grid, stacking below the breakpoint.   */

.ssc-with-sidebar {
  display: grid;
  gap: var(--ss-space-l);
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .ssc-with-sidebar {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    align-items: start;
  }
  .ssc-with-sidebar--right { grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); }
}

/* ---- Main -------------------------------------------------------------- */

.ssc-main { min-height: 50svh; }

/* Isolation for any duotone or blend-mode treatment placed inside. */
.ssc-isolate { isolation: isolate; }

/* Section heading, stated explicitly rather than relying on the h2 default,
   because it is used on nine templates and a change to h2 should not move
   all of them silently. */
.ssc-section-head__title { font-size: var(--ss-step-4); margin: 0; }

.ssp-pill__label { display: inline; }