/* Mix-and-Match cross-sell popup — see CROSSSELL_POPUP_HANDOFF.md
   Reward cards reuse the site-wide .product-card styles from _productbox.scss
   (.sale-badge / .product-title / .product-price-old / .product-price /
   .img-box / .product-img). This file only adds the modal chrome + the
   popup-specific grid + small overrides where the modal context differs
   from a normal product listing. */

#crossSellModal .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

#crossSellModal .modal-header {
    border-bottom: 1px solid #f0f0f0;
    padding: 1rem 1.25rem;
}

#crossSellModal .modal-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a1a1a;
}

#crossSellModal .crosssell-subtitle {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

#crossSellModal .modal-footer {
    border-top: 1px solid #f0f0f0;
    padding: 0.75rem 1.25rem;
}

#crossSellModal .modal-footer small {
    font-size: 0.75rem;
    color: #888;
}

/* Make "No thanks" more visible than the default small-outlined skip button — the
   customer needs an obvious way out, not a tiny dismiss link. */
#crossSellModal .crosssell-no-thanks {
    min-width: 140px;
    font-weight: 600;
    border: 1.5px solid #1a1a1a;
    color: #1a1a1a;
    padding: 0.5rem 1.5rem;
}

#crossSellModal .crosssell-no-thanks:hover,
#crossSellModal .crosssell-no-thanks:focus {
    background-color: #1a1a1a;
    color: #fff;
}

.crosssell-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

@media (max-width: 575.98px) {
    .crosssell-grid {
        grid-template-columns: 1fr;
    }
}

/* Inside the modal we don't want the regular product-card's outer margins to push
   the cards around — let the grid handle spacing. */
#crossSellModal .product-card.crosssell-card {
    margin: 0;
}

/* Match the visual style of the offer card screenshot — pink title (the regular
   product card uses pink only on hover; for the cross-sell card we want it
   highlighted permanently so the customer sees the offer is "special"). */
#crossSellModal .product-card.crosssell-card .product-title {
    color: #e61b77;
}

/* The .btn-cart class has left padding 35px reserved for the absolute-positioned
   "+" icon used in the standard product-card layout. Inside the modal the icon
   sits inline with the text, so reset to balanced padding. */
#crossSellModal .product-card.crosssell-card .btn-cart {
    padding: 10px 20px;
    margin-top: 12px;
}

#crossSellModal .product-card.crosssell-card .btn-cart img {
    width: 12px !important;
    height: 12px;
    margin-right: 6px;
}