.recommendations.similar-products-container { padding: 1.5rem 1rem 2rem; isolation: isolate; }
.recommendations .similar-products-title { margin: 0 0 1.25rem; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.4; }
.recommendations .left-right-gradient { top: auto; bottom: auto; height: auto; display: none; }
.recommendations .similar-products-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 1280px; padding: 0; margin: 0 auto; }
.recommendations .similar-product-card { display: flex; flex-direction: column; align-items: stretch; gap: .85rem; width: 100%; max-width: none; min-width: 0; margin: 0; padding: 1rem; border: 2px solid transparent; border-radius: 12px; background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #bad8f6, #0066cc, #bad8f6) border-box; background-size: 100% 100%, 400% 400%; animation: recommendationBorder 10s linear infinite; box-shadow: 0 3px 6px #19314e14, 0 7px 18px #19314e1a; transition: none; }
.recommendations .similar-product-card::before { display: none; }
.recommendations .similar-product-card:hover { transform: none; background: linear-gradient(135deg, #0066cc, #ff7d00, #0066cc, #ff7d00) border-box; background-size: 400% 400%; animation: gradientRotate 10s linear infinite; box-shadow: 0 4px 8px #19314e1a, 0 9px 20px #19314e26; }
.recommendations .similar-product-card .similar-product-image-container { display: grid; place-items: center; width: 100%; height: 140px; flex: 0 0 140px; background: #f8fafc; border-radius: 8px; }
.recommendations .similar-product-card .similar-product-image-container img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 140px; object-fit: contain; }
.recommendations .similar-product-card .similar-product-title { flex: 1; margin: 0; color: #0054aa; font: 600 .9rem/1.6 Raleway, sans-serif; overflow-wrap: anywhere; }
.recommendations .similar-product-card .similar-product-price { margin: 0; color: #24364b; font: 700 1.3rem/1.5 Raleway, sans-serif; white-space: nowrap; }
.recommendations .similar-product-card .similar-sell-now-button { margin: 0; }
.recommendations .similar-product-card .similar-sell-now-button button { width: 100%; min-height: 44px; padding: .65rem 1rem; border-radius: 8px; color: white; background: #0066cc; font: 600 .85rem/1.5 Raleway, sans-serif; }
.recommendations .similar-product-card .similar-sell-now-button button:hover { background: #0054aa; }
.recommendations button:focus-visible { outline: 3px solid #0066cc; outline-offset: 3px; }
@keyframes recommendationBorder { 0%,100% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } }
@media (min-width: 480px) { .recommendations .similar-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 800px) { .recommendations .similar-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .recommendations .similar-products-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .recommendations .similar-product-card { animation: none; } }

/* Center the blue band on the product grid, below the section heading. */
.recommendations .similar-products-grid { position: relative; isolation: isolate; }
.recommendations .similar-products-grid::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 55%; background: linear-gradient(90deg, #0066cc, #0099ff, #0066cc); background-size: 200% 200%; animation: gradientMoveLeftRight 3s linear infinite; z-index: -1; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .recommendations .similar-products-grid::before { animation: none; } }

.recommendations .similar-product-card .similar-product-image-container { position: relative; }
.recommendation-photo-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem; color: #7791ad; }
.recommendation-photo-fallback span { color: #617185; font: 500 .8rem/1.5 Raleway, sans-serif; }
.recommendations .similar-product-card .similar-product-image-container img { position: relative; z-index: 1; background: #f8fafc; }
.recommendations .similar-product-card .similar-product-image-container img[hidden] { display: none; }

.recommendations .similar-product-card:hover .similar-product-title,
.recommendations .similar-product-card:hover .similar-product-price { color: white; }
.recommendations .similar-product-card:hover .similar-sell-now-button button { background: white; color: #0054aa; }
.recommendations .similar-product-card:hover .similar-sell-now-button button:hover { background: #edf5ff; }
@media (prefers-reduced-motion: reduce) { .recommendations .similar-product-card:hover { animation: none; } }

/* Keep incomplete recommendation rows centered, with consistent card widths. */
@media (min-width: 480px) {
    .recommendations .similar-products-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
    .recommendations .similar-product-card { flex: 0 0 calc((100% - 1rem) / 2); }
}
@media (min-width: 800px) {
    .recommendations .similar-product-card { flex-basis: calc((100% - 2rem) / 3); }
}
@media (min-width: 1200px) {
    .recommendations .similar-product-card { flex-basis: calc((100% - 4rem) / 5); }
    .recommendations .similar-products-grid:has(> .similar-product-card:nth-child(6):last-child) > .similar-product-card { flex-basis: calc((100% - 2rem) / 3); }
    .recommendations .similar-products-grid:has(> .similar-product-card:nth-child(7):last-child) > .similar-product-card,
    .recommendations .similar-products-grid:has(> .similar-product-card:nth-child(8):last-child) > .similar-product-card { flex-basis: calc((100% - 3rem) / 4); }
    .recommendations .similar-products-grid:has(> .similar-product-card:nth-child(9):last-child) > .similar-product-card { flex-basis: calc((100% - 2rem) / 3); }
}

/* Give recommendation photos a square canvas, rather than a shallow strip. */
.recommendations .similar-product-card .similar-product-image-container { position: relative; aspect-ratio: 1; height: auto; flex: 0 0 auto; background: white; }
.recommendations .similar-product-card .similar-product-image-container > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; object-fit: contain; background: white; }
.recommendations .similar-product-card .similar-product-image-container > img[hidden] { display: none; }
.recommendations .similar-product-image-container .recommendation-photo-fallback { background: #f8fafc; }

/* Touch equivalent of desktop hover: highlight the card in view. */
@media (hover: none) and (pointer: coarse) {
    .recommendations .similar-product-card.is-touch-highlight { background: linear-gradient(135deg, #0066cc, #ff7d00, #0066cc, #ff7d00) border-box; background-size: 400% 400%; animation: gradientRotate 10s linear infinite; box-shadow: 0 4px 8px #19314e1a, 0 9px 20px #19314e26; }
    .recommendations .similar-product-card.is-touch-highlight .similar-product-title,
    .recommendations .similar-product-card.is-touch-highlight .similar-product-price { color: white; }
    .recommendations .similar-product-card.is-touch-highlight .similar-sell-now-button button { background: white; color: #0054aa; }
}
@media (prefers-reduced-motion: reduce) { .recommendations .similar-product-card.is-touch-highlight { animation: none; } }

@media (hover: none) and (pointer: coarse) {
    .recommendations .similar-product-card:hover:not(.is-touch-highlight) { background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #bad8f6, #0066cc, #bad8f6) border-box; background-size: 100% 100%, 400% 400%; animation: recommendationBorder 10s linear infinite; }
    .recommendations .similar-product-card:hover:not(.is-touch-highlight) .similar-product-title { color: #0054aa; }
    .recommendations .similar-product-card:hover:not(.is-touch-highlight) .similar-product-price { color: #24364b; }
    .recommendations .similar-product-card:hover:not(.is-touch-highlight) .similar-sell-now-button button { background: #0066cc; color: white; }
}
@media (prefers-reduced-motion: reduce) { .recommendations .similar-product-card:hover:not(.is-touch-highlight) { animation: none; } }