/* strangefolk — layout */

/* ---- section frame ---- */
section { padding: 78px 0 }

/* ---- grids ----
   .sf-grid4 belongs here, not woocommerce.css. WooCommerce isn't installed
   until Phase 3 (inc/assets.php enqueues woocommerce.css only when
   class_exists('WooCommerce')), so a New Sightings grid styled there would
   render unstyled through all of Phase 2. Ruling carried from Task 3.

   auto-fit, not auto-fill: with `minmax(215px, 1fr)`, auto-fit collapses
   any track with nothing in it to 0 and hands its share of the row to the
   tracks that DO hold a card — so a grid with a single item stretches that
   one card to fill the entire row's width. That's a real, visible defect
   at launch: /specimen/mothman/'s Recovered Artifacts section has exactly
   one product today, and several /collections/<slug>/ archives will too,
   since most creatures ship with only a tumbler until Specimen (cutout)
   art exists. auto-fill keeps those empty tracks in the layout instead of
   collapsing them, so a sparse grid's cards sit at their natural
   minmax()-clamped size on the left and the row's leftover space stays
   empty beside them, rather than every card being stretched to fill it.
   Once there are enough items to fill every computed track — /shop/'s ten
   products, for instance — auto-fill and auto-fit are visually identical:
   there are no empty tracks left for auto-fill to preserve, so a full row
   wraps exactly as before. Verified by eye at desktop and mobile widths on
   all three shapes: one item (/specimen/mothman/), a few
   (/collections/myth-folklore/, two), and a full row (/shop/, ten) — see
   task-7-report.md. */
.sf-grid4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 22px }