.product-recommendations { padding-top: 48px; padding-bottom: 0; }
.recommendations-heading { text-align: center; margin-bottom: 26px; }
.recommendations-heading h2 { margin: 0; color: #0A2FBE; font-size: var(--type-section, 36px); }
.recommendations-controls { display: none; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.recommendations-enhanced .recommendations-controls { display: flex; }
.recommendations-controls button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid #DDE2FB; border-radius: 50%; background: #fff; color: #0A2FBE; font: inherit; cursor: pointer; }
.recommendations-controls button:hover { background: #1626C8; color: #fff; }
.recommendations-controls svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.recommendations-controls button:focus-visible, .recommendation-card:focus-visible { outline: 3px solid #1626C8; outline-offset: -3px; }
.recommendations-controls button:disabled { opacity: .4; cursor: default; }
.recommendations-position { min-width: 4em; text-align: center; color: #5A6A9E; font-size: var(--type-small, 14px); font-variant-numeric: tabular-nums; }
.recommendations-viewport { --recommendation-columns: 4; --recommendation-gap: 20px; overflow-x: auto; touch-action: pan-y; }
.recommendations-enhanced .recommendations-viewport { overflow: hidden; }
.recommendations-track { display: flex; gap: var(--recommendation-gap); }
.recommendations-enhanced .recommendations-track { will-change: transform; }
.recommendation-card { flex: 0 0 calc((100% - (var(--recommendation-columns) - 1) * var(--recommendation-gap)) / var(--recommendation-columns)); min-width: 0; border: 1px solid #DDE2FB; border-radius: 10px; overflow: hidden; background: #fff; color: #0A2FBE; text-decoration: none; }
.recommendation-image { height: clamp(200px, 18vw, 300px); overflow: hidden; background: #F4F7FF; }
.recommendation-image img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.recommendation-card:hover img { transform: scale(1.04); }
.recommendation-card h3 { margin: 0; padding: 18px 16px; font-size: var(--type-card, 18px); line-height: 1.6; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 1199px) { .recommendations-viewport { --recommendation-columns: 3; } }
@media (max-width: 900px) { .recommendations-viewport { --recommendation-columns: 2; } }
@media (max-width: 600px) {
  .recommendations-viewport { --recommendation-columns: 1; }
  .recommendations-heading { margin-bottom: 18px; }
  .recommendations-heading h2 { font-size: 28px; }
  .recommendations-controls { gap: 16px; margin-top: 20px; }
  .recommendations-controls button { width: 34px; height: 34px; }
  .recommendation-image { height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .recommendation-image img { transition: none; }
  .recommendation-card:hover img { transform: none; }
}