/* Narrow screens retain the recommendation list below the main content. */
.mc-recommendations-side { display: none; }

@media (min-width: 1280px) {
  .modern-cart:has(.mc-recommendations-side:not(.recommendations-empty)) {
    box-sizing: border-box;
    position: relative;
    width: calc(100% - 448px);
  }
  .modern-cart .mc-recommendations-side:not(.recommendations-empty) {
    display: block;
    position: absolute;
    top: 26px;
    bottom: 52px;
    width: 200px;
    margin: 0;
    z-index: 100;
  }
  .mc-recommendations-left { left: -208px; }
  .mc-recommendations-right { right: -208px; }
  .mc-recommendations-panel {
    position: sticky;
    top: 110px;
    max-height: min(calc(100vh - 130px), var(--mc-recommendations-height, 400px));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }
  .mc-recommendations-side .mc-recommendation-list { grid-template-columns: minmax(0, 1fr); }
  .mc-recommendations-side .mc-recommendation-heading h2 { font-size: 18px; letter-spacing: 0; }
  .mc-recommendations-side .mc-recommendation-heading { margin-bottom: 14px; }
  .modern-cart .mc-recommendations-side .cart-recommendation-image { height: 72px; margin: 0 0 10px; }
  .modern-cart .mc-recommendations-side .cart-recommendation-name { font-size: 12px; line-height: 1.4; }
  .modern-cart .mc-recommendations-side .cart-recommendation-price { font-size: 18px; }
  .modern-cart .mc-recommendations-side .cart-recommendation-card { padding: 12px; }
  .modern-cart .mc-recommendations-side .cart-recommendation-qty { width: 48px; }
  .modern-cart .mc-recommendations-side .cart-recommendation-button { font-size: 11px; }
  .modern-cart .mc-recommendations-side .cart-recommendation-action { margin-top: 10px; }
  .mc-recommendations:has(.js-cart-recommendations-mobile-list) { display: none; }
}

/* Keep the order total and product controls readable between the sidebars. */
@media (min-width: 1280px) and (max-width: 1599px) {
  .modern-cart:has(.mc-recommendations-side:not(.recommendations-empty)) .mc-layout { grid-template-columns: minmax(0, 1fr); }
  .modern-cart:has(.mc-recommendations-side:not(.recommendations-empty)) .mc-summary-column { position: static; }
  .modern-category:has(.mc-recommendations-side:not(.recommendations-empty)) .cc-row {
    grid-template-columns: 80px minmax(0, 1fr) 120px 140px;
    gap: 16px;
    padding: 20px 16px;
  }
  .modern-category:has(.mc-recommendations-side:not(.recommendations-empty)) .cc-price strong { font-size: 18px; }
}