/* Product grid section.
 *
 * Built on .ofs-section, so it paints its own ground and spaces itself with
 * padding — no margin, so it butts against the sections above and below and
 * the theme's own background never shows through as a seam.
 */

/* Mobile 2 columns, tablet 3, desktop 4. */
.cc_vt72n7bb_g9smXohBxa .ofs-grid-section__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Row gap is deliberately much larger than the column gap: cards read as
   * rows, and a square gap makes the grid feel like a spreadsheet. */
  gap: var(--ofs-space-3);
}

@media (min-width: 768px) {
  .cc_vt72n7bb_g9smXohBxa .ofs-grid-section__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ofs-space-3);
  }
}

@media (min-width: 1024px) {
  .cc_vt72n7bb_g9smXohBxa .ofs-grid-section__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ofs-space-3);
  }
}

.cc_vt72n7bb_g9smXohBxa .ofs-grid-section__empty {
  margin: 0;
  color: var(--ofs-text-soft);
}

/* The feature card takes 2x1 cells from tablet up, so with seven products the
 * four-column grid fills exactly two rows: 2 cells for the feature plus 6
 * single cells is 8. grid-auto-rows: 1fr keeps every row the same height, so
 * the feature card's neighbours line up with it instead of floating short.
 *
 * On a phone every card is equal — a 2x2 card in a two-column grid would be
 * the whole screen. */
@media (min-width: 768px) {
  .cc_vt72n7bb_g9smXohBxa .ofs-grid-section__grid {
    grid-auto-rows: 1fr;
  }

  .cc_vt72n7bb_g9smXohBxa .ofs-grid-section__grid > .ofs-card--featured {
    grid-column: span 2;
    grid-row: span 1;
  }
}

/* ===== Entrance (B2) =====
 * The staggered entrance lives here, not on the card, and the card is VISIBLE
 * by default. Nothing is hidden waiting for a class to arrive: the animation
 * is the opt-in, so a grid that never receives `--in` still shows its
 * products. `backwards` holds the opening frame through the per-card delay
 * and then hands the card back to its own styles, so hover still lifts it.
 */
.cc_vt72n7bb_g9smXohBxa .ofs-grid-section.ofs-reveal--in .ofs-grid-section__grid .ofs-card {
  animation: cc_vt72n7bb_g9smXohBxa_ofs-grid-card-in var(--ofs-duration-enter) var(--ofs-ease-enter)
    backwards;
}

@keyframes cc_vt72n7bb_g9smXohBxa_ofs-grid-card-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_vt72n7bb_g9smXohBxa .ofs-grid-section.ofs-reveal--in .ofs-grid-section__grid .ofs-card {
    animation: none;
  }
}