/* ==========================================================================
   IMPERVORA -- FEATURED COLLECTIONS
   Grid geometry only.

   Card internals -- image treatment, title type, price, star rating, button
   styling, hover -- are deliberately NOT touched here. Those come from Astra's
   WooCommerce styles and impervora.css, which is what keeps these cards
   identical to the ones on the shop archive. Do not restyle them from this
   file; change them at their source or the two will drift.
   ========================================================================== */

/* WooCommerce lays its product list out with floats and percentage widths.
   Grid is used instead so the three rows stay aligned even when card heights
   differ, and so the column count is a single declaration per breakpoint. The
   float reset below is what stops the two systems fighting. */
.impervora-fc ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 24px;
  row-gap: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Woo's clearfix pseudo-elements become stray grid items if left alone. */
.impervora-fc ul.products::before,
.impervora-fc ul.products::after {
  display: none;
}

/* !important is load-bearing, not lazy: Astra ships the width, float and
   nth-child clearing on `.woocommerce ul.products.columns-4 li.product`,
   which out-specifies a plain descendant selector. */
.impervora-fc ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  float: none !important;
  clear: none !important;
}

/* The homepage reveal observer (novamira-sandbox/impervora-luxury-ux.php) adds
   `is-revealed` to the FIRST h2 inside each .entry-content child, which draws a
   centred gold rule beneath it. That is right for a section heading, but inside
   this grid the first h2 is a product title, so one card was picking up a stray
   underline. Suppressed here rather than in the observer, which is shared.

   The selector is this long on purpose: the observer's rule is
   `html.impervora-lux .entry-content h2::after` and prints from wp_head at
   priority 98, i.e. after this stylesheet, so it wins any specificity tie. */
html.impervora-lux .entry-content .impervora-fc ul.products h2::after {
  content: none;
}

/* Tablet and mobile both sit at two across. Astra's tablet breakpoint is
   921px, so one query covers both. */
@media (max-width: 921px) {
  .impervora-fc ul.products {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 18px;
    row-gap: 34px;
  }
}