/* ==========================================================================
   PRODUCTS — styles specific to products.html only
   ========================================================================== */

/* Reuses .orbit-hero (same wash/dots/blob background + header behavior as
   home) as the compact title-only variant — same rules as articles.html,
   just the page heading, centered. */
.orbit-hero--title-only{
  /* Floor raised from 4.5rem (72px) to 6.5rem (104px) — the header is a
     76px bar on top of this hero, so the old floor let the heading sit
     right under/against it on mobile. */
  padding-block: clamp(6.5rem, 10vw, 7rem) clamp(5rem, 11vw, 8rem);
}
.orbit-hero--title-only .orbit-hero__inner{
  min-height: auto;
}
.orbit-hero--title-only .orbit-hero__heading h1{
  font-size: var(--step-4);
}

/* The [hidden] attribute must win over .product-grid's own display:grid —
   same specificity, so without this the "more" batch shows immediately
   and collides with the first row instead of waiting for the button. */
.product-grid[hidden]{
  display: none;
}
/* The "more" batch is a separate grid container from the first one, so its
   own internal `gap` doesn't create any space above it — without this it
   sits flush against the row above once revealed. Match the grid's own
   gap so it reads as a continuation of the same rhythm, not a seam. */
.product-grid--more{
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* Load more — pagination control below the grid (same pattern as articles) */
.load-more{
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.load-more .btn{
  padding: 0.85rem 2rem;
}