/* CMS shortcode products reuse itstore's catalog/_partials/productlist.tpl.
   Do not set display, flex basis, grid columns or width on its products/cards:
   the active theme already controls those properties for .products--grid. */
.sf-cms-products {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 24px 0;
  padding: 0;
}

/* Only cancel generic CMS rich-text typography that is not applied to real
   category pages. The theme still owns the product layout and card styling. */
/* Restore only properties overridden by the CMS editor. The itstore catalog
   uses a row of badges, a 3px gap and 4px UL padding. Do not touch the
   miniature's dimensions, grid, image or its absolute flag positioning. */
#content.page-content--cms.rich-text .sf-cms-products .product-flags {
  display: flex;
  flex-flow: row wrap;
  gap: 3px;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
}

/* The theme's `.rich-text ul li` sets padding-left:1.5rem and
   position:relative, which also hits product badges inside CMS pages.
   Restore the catalog badge's horizontal inset and default positioning;
   leave background, typography, right padding and other native styles alone. */
#content.page-content--cms.rich-text .sf-cms-products .product-flags > li.badge {
  display: inline-flex;
  flex: 0 0 auto;
  margin: 0;
  padding-left: 7px;
  position: static;
  list-style: none;
}

#content.page-content--cms.rich-text .sf-cms-products .product-flags > li::marker,
#content.page-content--cms.rich-text .sf-cms-products .product-flags > li::before {
  content: none;
}

#content.page-content--cms.rich-text .sf-cms-products .product-miniature__title {
  text-decoration: none;
  overflow-wrap: break-word;
}

/* Do not let CMS editor-generated block margins displace product cards. */
#content.page-content--cms.rich-text .sf-cms-products .product-miniature {
  margin-top: 0;
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sf-cms-products * {
    scroll-behavior: auto;
  }
}