/* ══ CATEGORY NAV — circular tiles ═══════════════════════════════════════════
   The homepage category row. Replaces the old .cat-slider cards.

   ── WHY THIS SHAPE ──────────────────────────────────────────────────────────
   The label sits BELOW the disc, never on top of it. That one decision
   removes the entire problem the old cards had: they carried a dark gradient
   scrim so white text could sit over a photograph, and once the art became a
   packshot on white the scrim had nothing to darken and read as a grey smudge
   on a white card. With the text outside the image, the image only has to be
   an image.

   Small and round also reads as NAVIGATION rather than as a second hero
   block competing with the animated panel above it.

   ── ONE ROW OF FIVE ─────────────────────────────────────────────────────────
   This row used to be a wrapping flexbox of fixed tiles. Five tiles plus four
   38px gaps needed ~892px of usable width, so the moment the window dipped
   under that the fifth tile dropped onto a line of its own and sat orphaned
   beneath the other four.

   It is a five-column GRID now, capped at exactly the width five full-size
   tiles need and centred inside the wrap. Because the columns are fr units
   inside that ceiling, they hit full size whenever the space is there and
   shrink together — still one row, never a stray — when it is not.

   THE ARITHMETIC. These three numbers move together, always:

       DISC    = 152px          (.cat-disc, via the column width)
       GAP     =  34px          (.cat-nav-row column-gap)
       ROW_MAX = 5×152 + 4×34 = 896px   (.cat-nav-row max-width)

   Plus the wrap's 20px gutters, the row reaches full size at a 936px
   viewport. Change DISC or GAP and ROW_MAX has to be recomputed in the same
   edit, or you either re-introduce the squeeze (ROW_MAX too small, discs
   render under DISC) or leave dead space between tiles (ROW_MAX too large,
   columns wider than the discs they hold).

   ── A NOTE ON "THE TILES LOOK SMALLER" ──────────────────────────────────────
   Worth knowing, because it cost a round trip. An intermediate version of this
   grid held the discs at their original 132px and was measured doing exactly
   that — and still read as smaller on the page. The discs were right; the
   FOOTPRINT was not. The old flex row spread across ~892px with 38px gaps,
   and the grid packed the same circles into 748px with 22px gaps. Against the
   full-bleed sections above and below, a tighter cluster reads as smaller
   circles even when the circles are identical.

   So the size of this row is set by ROW_MAX as much as by DISC. If it ever
   reads wrong again, measure both before changing either.

   ── THE CAP AT FIVE ─────────────────────────────────────────────────────────
   :nth-child(n+6) hides any sixth or later tile. Five is a deliberate ceiling,
   not an accident of the current catalogue: the grid is built for exactly five
   columns, and a sixth category would wrap and reintroduce the orphan.

   display:none (not visibility or opacity) is the right tool — it takes the
   tile out of the tab order and out of the accessibility tree, so there is no
   invisible link for a keyboard or screen-reader user to land on.

   IF A SIXTH CATEGORY EVER GETS STOCKED it will silently stop appearing here.
   That is the trade for a clean row. When it happens, either raise this
   selector, the column count and ROW_MAX together, or make the fifth tile a
   "Shop all" link into /shop/ and let the category page carry the full list.
   Every category is still reachable from the footer, the Shop All filter rail
   and the category chips, so nothing is orphaned either way.

   ── WHY THE DISCS ARE WHITE, AND WHY THEY HAVE A RING ───────────────────────
   These shipped on 9 Sep with six pastel tints derived from the brand accents.
   Merchant asked for plain white the same day.

   A white disc on a white page is invisible: the product photos are JPGs shot
   on white, so with no fill and no border you do not get circles, you get
   products floating in a row with nothing containing them. The hairline ring
   below is what keeps the circle readable. It is the lightest thing that still
   holds the shape — if it needs to be more present, raise the ring colour
   before adding a fill back.

   The t1…t6 classes are still emitted by index.php and are now no-ops. They
   are left as hooks: if colour ever comes back, define them here and nothing
   in the template has to change. The tints that were here were
   #D3E3F5 / #FBE7EE / #D6EDF6 / #C9DCF1 / #F7D8E2 / #C6E6F2, cos · blush ·
   sparkle at a light and a mid-light step.

   ── THE MULTIPLY TRICK ──────────────────────────────────────────────────────
   Kept, even though it is close to a no-op on a white disc (white multiplied
   by white is white). It still earns its place: a packshot shot on off-white
   or cream blends into the disc instead of showing a visible square edge.
   Verified in Chrome on 9 Sep against the pastel version — the white
   backgrounds dissolved completely.

   Its one limit: it only works over LIGHT fills. If a dark fill is ever
   introduced, this has to go and the images need real transparency instead.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fixed gutters, not percentages. A 5% gutter scales with the container, so
   it takes the most room away exactly where the row can least afford it. */
.cat-nav-wrap{
  max-width:1080px;
  margin:0 auto;
  padding:4px 20px 64px;
}

/* max-width is ROW_MAX — see THE ARITHMETIC above. minmax(0,1fr) rather than
   1fr so a wide packshot can never push a column past its share and force a
   horizontal overflow. */
.cat-nav-row{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:30px 34px;
  max-width:896px;
  margin:0 auto;
  justify-items:center;
  align-items:start;
}

/* Hard cap — see THE CAP AT FIVE above before changing this number. */
.cat-tile:nth-child(n+6){display:none;}

/* The whole tile is the link, so the target is the disc plus its label rather
   than the text alone. The tile fills its column; the column ceiling is what
   sets DISC, so there is no second max-width to keep in sync. */
.cat-tile{
  width:100%;
  text-align:center;
  text-decoration:none;
  color:var(--cos-700);
}

/* aspect-ratio keeps the disc perfectly round while its width tracks the
   column, which is what lets five of them hold one row at any width. */
.cat-disc{
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:50%;
  margin:0 auto 13px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#fff;
  /* Inset rather than `border`, so the ring costs no layout box and the disc
     keeps its exact computed width. */
  box-shadow:inset 0 0 0 1px #E8ECF1;
  transition:transform .22s cubic-bezier(.25,.46,.45,.94), box-shadow .22s ease;
}
.cat-tile:hover .cat-disc{
  transform:translateY(-5px);
  box-shadow:inset 0 0 0 1px #DCE2EA, 0 16px 34px rgba(26,26,26,.13);
}
.cat-tile:focus-visible{outline:none;}
.cat-tile:focus-visible .cat-disc{
  outline:2px solid var(--cos-700);
  outline-offset:4px;
}

.cat-disc img{
  width:74%;
  height:74%;
  object-fit:contain;
  mix-blend-mode:multiply;
}

/* --cos-700 (#3D6E96) is the only blue in the kit readable as text: 5.6:1 on
   white, comfortably past AA. */
.cat-name{
  display:block;
  font-family:var(--body-font);
  font-size:15px;
  font-weight:700;
  line-height:1.35;
  color:var(--cos-700);
}

/* A category with nothing to show still gets its disc, so the row never
   develops a hole. Opacity did nothing once the fill went white, so the empty
   state is now carried by a dashed ring. */
.cat-disc.is-empty{
  box-shadow:none;
  border:1px dashed #E2E7ED;
}

/* Phone: the column count does not change, only the breathing room. The
   gutter and gap tighten so five discs still hold one row on a 360px screen,
   where they land around 62px each. The label shrinks with them — at 15px
   "Skincare" would wrap to two lines and throw the row's baseline out. */
@media (max-width:720px){
  .cat-nav-wrap{padding:4px 12px 48px;}
  .cat-nav-row{gap:16px 8px;}
  .cat-disc{margin-bottom:8px;}
  .cat-name{font-size:11px;line-height:1.3;letter-spacing:-.01em;}
}

@media (prefers-reduced-motion:reduce){
  .cat-disc{transition:none;}
  .cat-tile:hover .cat-disc{transform:none;}
}