/* WEB-1452: Impulse Cart Cross-Sell */

/* ======================== CART PAGE ======================== */

.cross-sell {
  padding: 24px 0;
}

.cross-sell__heading {
  font-family: var(--galls-font-gt-america-condensed);
  font-weight: var(--galls-fw-700);
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding: 0 15px;
}

@media (min-width: 768px) {
  .cross-sell__heading {
    font-size: 22px;
    padding: 0;
  }
}

/* ======================== MINI CART ======================== */

/*
 * Reserve space for the carousel BEFORE Slick initializes.
 * Prevents layout shift when the drawer opens.
 * The container starts display:none and is shown by JS once products are fetched.
 */
[data-target="crossSellMiniCart"] {
  min-height: 0;
  transition: min-height 0.2s ease;
}
[data-target="crossSellMiniCart"]:not([style*="display: none"]):not([style*="display:none"]) {
  min-height: 230px;
}

.cross-sell--mini-cart {
  padding: 12px 0 8px;
  border-top: 1px solid #e5e5e5;
}

.cross-sell--mini-cart .cross-sell__heading {
  font-size: 14px;
  margin-bottom: 8px;
  padding: 0 16px;
}

.cross-sell--mini-cart .cross-sell__carousel {
  padding: 0 8px;
}

/* ---- Card overrides for narrow drawer ---- */

/* Tighter slide spacing */
.cross-sell--mini-cart .ais-Hits-item {
  padding: 0 4px;
}

/* Constrain card body */
.cross-sell--mini-cart .ais-Hits-item .card-body,
.cross-sell--mini-cart .ais-Hits-item .hit-body {
  padding: 4px 6px;
}

/* Fixed-size image container — prevents stretching + different card heights */
.cross-sell--mini-cart .hit-card .hit-header {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cross-sell--mini-cart .hit-card .hit-header .hit-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  min-height: unset;
  aspect-ratio: unset;
}

/* Disable the hover zoom — awkward in a narrow drawer */
.cross-sell--mini-cart .hit-card:hover .hit-image {
  transform: none;
}

/* Smaller text to fit the drawer width */
.cross-sell--mini-cart .hit-title {
  font-size: 11px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cross-sell--mini-cart .hit-brand {
  font-size: 10px;
}

.cross-sell--mini-cart .hit-price {
  font-size: 12px;
}

/* Hide elements that don't fit in mini cart */
.cross-sell--mini-cart .hit-whyBuys,
.cross-sell--mini-cart .hit-whybuys,
.cross-sell--mini-cart .hit-color-swatch,
.cross-sell--mini-cart .hit-color,
.cross-sell--mini-cart .hit-social-proof,
.cross-sell--mini-cart .hit-stock-status,
.cross-sell--mini-cart .hit-banner,
.cross-sell--mini-cart .hit-rating,
.cross-sell--mini-cart .hit-cta,
.cross-sell--mini-cart .hit-tag-badge,
.cross-sell--mini-cart .hit-tag-inline,
.cross-sell--mini-cart #ab-test-gwp {
  display: none !important;
}

/* Remove the grey hover overlay — not useful in drawer */
.cross-sell--mini-cart .hit-card .hit-header::before {
  display: none;
}

/* Slick arrow tweaks for mini cart */
.cross-sell--mini-cart .slick-prev,
.cross-sell--mini-cart .slick-next {
  top: 30%;
  width: 24px;
  height: 24px;
  z-index: 1;
}
.cross-sell--mini-cart .slick-prev {
  left: -2px;
}
.cross-sell--mini-cart .slick-next {
  right: -2px;
}
.cross-sell--mini-cart .slick-prev:before,
.cross-sell--mini-cart .slick-next:before {
  font-size: 18px;
  color: #333;
}