/* Ensure cart recommendations take the full width of the page */
#cart-recommendations {
  display: block;
  width: 100%;
}

.cart-recommendations .card-body {
  padding: 12px;
}

.cart-recommendations .grid {
  --gap: var(--grid-gap);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Use auto-fit to make full-width grid */
  gap: 20px; /* Adjust gap as needed */
}

/* Mobile view: scrollable product list */
@media only screen and (max-width: 1024px) {
  .cart-recommendations .grid {
    display: flex;
    overflow-x: auto;
    gap: 20px;
  }

  .cart-recommendations .grid > div {
    flex: 0 0 auto;
    width: 70%;
    max-width: 250px; /* Adjust as needed */
  }
}

.drawer .cart-recommendations__title {
  font-size: 1.4rem;
}

.drawer cart-recommendations .grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Use auto-fit for full-width grid */
}

.drawer cart-recommendations .card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-cart cart-recommendations {
  margin-top: 40px;
}

.template-cart cart-recommendations .grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Use auto-fit for full-width grid */
}

.template-cart .cart-recommendations__title {
  text-align: center;
}

@media only screen and (min-width: 1024px) {
  .template-cart cart-recommendations .grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Use auto-fit for full-width grid */
  }
}