#top-products-category {
  position: relative;
  padding: 15px;
  background: linear-gradient(180deg, #111827 0%, #003782 100%);
  margin: 15px 0px;
  border-radius: 4px;
}
/* Pre-owl layout — override `.campaign-products-list` (4-col grid by
   default) into a single-row flex so the container height matches what
   owl will produce. Without this the container renders ~2x as tall
   (2 rows of cards) pre-init, then collapses to 1 row when owl wraps
   items into .owl-stage — visible "blue box stretches and shrinks".
   Item widths mirror owl's responsive config: 3 on desktop, 2 on
   tablet, 1 on mobile. */
#top-products-category .top-products-category-carousel:not(.owl-loaded) {
  display: flex !important;
  flex-wrap: nowrap;
  overflow: hidden;
  grid-template-columns: none;
}
#top-products-category .top-products-category-carousel:not(.owl-loaded) > .product-item {
  flex: 0 0 calc(33.333% - 5px);
  max-width: calc(33.333% - 5px);
  min-width: 0;
  margin-right: 5px;
  box-sizing: border-box;
}
@media (max-width: 1079px) {
  #top-products-category .top-products-category-carousel:not(.owl-loaded) > .product-item {
    flex-basis: calc(50% - 5px);
    max-width: calc(50% - 5px);
  }
}
@media (max-width: 449px) {
  #top-products-category .top-products-category-carousel:not(.owl-loaded) > .product-item {
    flex-basis: 100%;
    max-width: 100%;
  }
}
#top-products-category h2 {
  font-size: 1.2em;
  color: #fff;
  font-family: 'Ubuntu-Bold';
  margin-bottom: 10px;
}
#top-products-category .product-item:not(.product-item--campaign) {
  padding: 10px;
  background: #fff;
  border-radius: 3px;
  transition: all 0.3s ease;
  position: relative;
}
#top-products-category .product-item:not(.product-item--campaign).new::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 35px;
  height: 35px;
  background: url(images/new.svg);
  background-size: 35px 35px;
  content: "";
  display: block;
  z-index: 9;
  transform: rotate(270deg);
}
#top-products-category .product-item:not(.product-item--campaign).blackfriday::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background: url(images/blackfriday.svg);
  background-size: 50px 50px;
  content: "";
  display: block;
  z-index: 9;
}
#top-products-category .product-item .labels {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
}
#top-products-category .product-item .labels .any-label {
  border-radius: 3px;
  font-weight: 700;
  padding: 5px 10px;
  display: inline-block;
  margin-bottom: 5px;
}
#top-products-category .product-item .discount-label {
  color: #fff;
  background: #ff0000;
}
#top-products-category .product-item .promo-countdown {
  margin-top: 10px;
  font-family: "Ubuntu-Medium";
  text-align: center;
}
#top-products-category .product-item .promo-countdown::before {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-image: url(../../images/stopwatch.png);
  content: "";
  background-size: 20px 20px;
  vertical-align: top;
  margin-right: 10px;
}
#top-products-category .product-item:not(.product-item--campaign) .img-container {
  width: 100%;
  height: 250px;
  display: block;
  text-decoration: none!important;
  text-align: center;
  position: relative;
  white-space: nowrap;
}
#top-products-category .product-item:not(.product-item--campaign) .img-container img {
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  vertical-align: middle;
  width: auto;
}
#top-products-category .product-item:not(.product-item--campaign) .img-container::before {
  height: 100%;
  display: inline-block;
  content: "";
  vertical-align: middle;
}
#top-products-category .product-item:not(.product-item--campaign) .product-title {
  font-size: 14px;
  margin: 15px 0px 0px 0px;
  font-family: 'Ubuntu-Medium';
}
#top-products-category .product-item:not(.product-item--campaign) .product-title a {
  color: #4c6fff;
  text-decoration: none;
}
#top-products-category .product-item:not(.product-item--campaign) .product-title a {
  text-decoration: none;
  color: inherit;
}
#top-products-category .product-item:not(.product-item--campaign):hover {
  -webkit-box-shadow: 0px 0px 5px 0px #e6e6e6;
  -moz-box-shadow: 0px 0px 5px 0px #e6e6e6;
  box-shadow: 0px 0px 5px 0px #e6e6e6;
}
#top-products-category .product-item .important_attributes {
  margin: 5px 0px 0px -10px;
  width: calc(100% + 20px);
  position: relative;
}
#top-products-category .product-item .important_attributes ul {
  position: relative;
  z-index: 3;
  padding: 10px 10px;
}
#top-products-category .product-item .important_attributes ul span {
  position: relative;
  font-family: 'Ubuntu-Medium';
}
#top-products-category .product-item .important_attributes ul span::before {
  width: 15px;
  height: 15px;
  background-image: url(images/check2.png);
  margin: -2px 5px 0px 0px;
  background-size: 15px 15px;
  content: "";
  display: inline-block;
  vertical-align: middle;
}
#top-products-category .owl-nav .owl-prev,
#top-products-category .owl-nav .owl-next {
  width: 35px;
  height: 50px;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: -15px;
  display: inline-block;
  z-index: 3;
  background: #4c5869;
  border-radius: 4px;
}
#top-products-category .owl-nav .owl-prev::before,
#top-products-category .owl-nav .owl-next::before {
  width: 20px;
  height: 20px;
  display: inline-block;
  content: "";
  background-image: url('../../images/back.svg');
  background-size: 20px 20px;
  position: absolute;
  top: 15px;
  left: 8px;
}
#top-products-category .owl-nav .owl-prev.owl-next,
#top-products-category .owl-nav .owl-next.owl-next {
  left: auto;
  right: -18px;
}
#top-products-category .owl-nav .owl-prev.owl-next::before,
#top-products-category .owl-nav .owl-next.owl-next::before {
  background-image: url('../../images/next.svg');
}
#top-products-category .owl-nav .owl-prev span,
#top-products-category .owl-nav .owl-next span {
  display: none;
}

/* Override .campaign-products-list grid layout — owl-carousel handles item flow.
   The class is added to inherit campaign card styles for the top-products carousel. */
#top-products-category .campaign-products-list {
  display: block;
}
#top-products-category .product-item--campaign {
  margin: 0;
}
#top-products-category h2 {
  margin-bottom: 14px;
}
/* Always show buy button in this carousel — owl-stage clips hover overflow,
   and a top-products carousel with hidden CTA is unfriendly. Landing keeps hover-reveal. */
#top-products-category .product-item--campaign .campaign-actions {
  max-height: 64px;
  margin-top: 8px;
  pointer-events: auto;
}