/*
 * Webshop module styles for the `modern` template (plain CSS, no build step).
 * Linked by template/user/modern/index.php after css/tailwind.css, only when the webshop module is active.
 * Only the module's own rules — Tailwind classes used in views come from the main css/tailwind.css.
 * Use theme variables (var(--spacing), var(--color-…)) and the Tailwind breakpoints: md = 48rem, lg = 64rem.
 */
@layer components {
  #webshop-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing, 0.25rem) * 4);
  }

  @media (min-width: 48rem) {
    #webshop-products {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    #webshop-products {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  #webshop-products > :not([data-product-card]) {
    grid-column: 1 / -1;
  }

  .webshop-grid-options {
    display: none;
  }
}