/*
 * VetDispense Bestsellers storefront layout, version 1.0.2.
 *
 * The homepage section immediately before this module ends with a decorative
 * "swerve" which visually extends beyond its own content box. The protected
 * top clearance, isolated stacking context and opaque heading surface below
 * ensure that the graphic can never cover the Bestsellers heading.
 */
.vet-bestsellers,
.vet-bestsellers *,
.vet-bestsellers *::before,
.vet-bestsellers *::after {
  box-sizing: border-box;
}

.vet-bestsellers--v102 {
  /* Safe no-JavaScript fallback; front-v102.js can increase it if required. */
  --vet-bestsellers-swerve-clearance: clamp(4.5rem, 8vw, 7.25rem);

  position: relative !important;
  z-index: 100 !important;
  isolation: isolate !important;
  display: block !important;
  clear: both !important;
  width: 100% !important;
  max-width: 1170px !important;
  margin: 0 auto 2.5rem !important;
  padding: var(--vet-bestsellers-swerve-clearance) 15px 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

/*
 * A separate white surface keeps the title readable even where the theme's
 * swerve has a transparent or irregular edge. It remains within 1170px, so
 * the module does not become a full-browser-width section.
 */
.vet-bestsellers--v102 .vet-bestsellers__heading {
  position: relative !important;
  z-index: 110 !important;
  display: flex !important;
  float: none !important;
  clear: both !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 3rem !important;
  margin: 0 0 2rem !important;
  padding: 0.25rem 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  text-align: center !important;
}

.vet-bestsellers--v102 .vet-bestsellers__heading::before,
.vet-bestsellers--v102 .vet-bestsellers__heading::after {
  content: none !important;
  display: none !important;
}

.vet-bestsellers--v102 .vet-bestsellers__title {
  position: relative !important;
  z-index: 111 !important;
  display: inline-block !important;
  float: none !important;
  clear: both !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0.1rem 1rem !important;
  overflow: visible !important;
  border: 0 !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #142b5a !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-indent: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.vet-bestsellers--v102 .vet-bestsellers__title-text {
  position: relative !important;
  z-index: 112 !important;
  display: inline !important;
  background: #fff !important;
  color: #142b5a !important;
}

.vet-bestsellers--v102 .vet-bestsellers__title::before,
.vet-bestsellers--v102 .vet-bestsellers__title::after,
.vet-bestsellers--v102 .vet-bestsellers__title-text::before,
.vet-bestsellers--v102 .vet-bestsellers__title-text::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Suppress a swerve only if the theme ever injects one inside this module. */
.vet-bestsellers--v102 .swerve,
.vet-bestsellers--v102 [class*="swerve"],
.vet-bestsellers--v102 [id*="swerve"],
.vet-bestsellers--v102 img[src*="swerve"],
.vet-bestsellers--v102 [style*="swerve"] {
  display: none !important;
  visibility: hidden !important;
}

.vet-bestsellers--v102 .vet-bestsellers__grid {
  position: relative !important;
  z-index: 101 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.25rem 0.75rem !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
}

/* Themes commonly assign product cards a percentage width, flex-basis or float. */
.vet-bestsellers--v102 .vet-bestsellers__grid > * {
  float: none !important;
  flex: none !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.vet-bestsellers--v102 .vet-bestsellers__grid img {
  max-width: 100% !important;
  height: auto !important;
}

/* Keep fixed-width card internals responsive inside the enforced grid. */
.vet-bestsellers--v102 .product,
.vet-bestsellers--v102 .product-miniature,
.vet-bestsellers--v102 .thumbnail-container,
.vet-bestsellers--v102 .product-description,
.vet-bestsellers--v102 .highlighted-informations {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 992px) {
  .vet-bestsellers--v102 .vet-bestsellers__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2rem 1.5rem !important;
  }
}

@media (max-width: 575.98px) {
  .vet-bestsellers--v102 {
    --vet-bestsellers-swerve-clearance: 4.5rem;
    margin-bottom: 2rem !important;
  }

  .vet-bestsellers--v102 .vet-bestsellers__heading {
    min-height: 2.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .vet-bestsellers--v102 .vet-bestsellers__title {
    font-size: 1.5rem !important;
  }
}