@charset "UTF-8";
/* === Recommended/Similar: multi-row grid === */
.recommended-grid .productGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0; }

/* Responsive columns */
@media (max-width: 1200px) {
  .recommended-grid .productGrid {
    grid-template-columns: repeat(4, 1fr); } }

@media (max-width: 992px) {
  .recommended-grid .productGrid {
    grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 600px) {
  .recommended-grid .productGrid {
    grid-template-columns: repeat(2, 1fr); } }

/* Let the tabs container grow; don’t clip the grid */
.related-products-container .tabs-contents,
.related-products-container .tab-content,
#similar_products,
#related_products {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important; }

/* 1) FORCE the tabs stack to auto-height and visible overflow */
.related-products-container,
.related-products-container .tabs-contents,
.related-products-container .tab-content,
#similar_products,
#related_products {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  position: static !important; }

/* 2) If any Slick wrappers are still in the DOM, neutralize them */
.recommended-grid .slick-list,
.recommended-grid .slick-track {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  transform: none !important;
  width: auto !important; }

/* 3) Use a true CSS grid and neutralize float widths on items */
.recommended-grid .productGrid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0; }

.recommended-grid .productGrid > .product {
  float: none !important;
  /* kill legacy float grid */
  width: auto !important;
  /* ignore old width:20% rules */
  margin: 0 !important;
  /* let grid gaps handle spacing */ }

/* responsive columns */
@media (max-width: 1200px) {
  .recommended-grid .productGrid {
    grid-template-columns: repeat(4, 1fr); } }

@media (max-width: 992px) {
  .recommended-grid .productGrid {
    grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 600px) {
  .recommended-grid .productGrid {
    grid-template-columns: repeat(2, 1fr); } }

/* Fix first-column gap: neutralize float/layout from theme grid */
.recommended-grid .productGrid > .product {
  float: none !important;
  width: auto !important;
  margin: 0 !important; }

.recommended-grid .productGrid {
  padding-left: 0 !important; }

/* Recommended grid: remove float-clearing pseudo-elements that steal the 1st cell */
.recommended-grid .productGrid::before,
.recommended-grid .productGrid::after {
  content: none !important;
  display: none !important; }