/* Native touch/trackpad scrolling; card DOM is appended in small batches. */
html body #tea-recommendations .recommendation-rail {
    --recommendation-count: 3;
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 32px) / 3);
    gap: 16px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: 12px;
}
html body #tea-recommendations .recommendation-rail > * {
    min-width: 0;
    width: auto !important;
    scroll-snap-align: start;
}
.recommendation-pagination { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 12px; color: #1e3a2b; }
.recommendation-pagination button { width: 44px; height: 44px; border: 1px solid #d9e1da; border-radius: 50%; background: white; color: #1e3a2b; font-size: 22px; cursor: pointer; }
.recommendation-pagination button:disabled { opacity: .35; cursor: default; }
.recommendation-pagination span { min-width: 64px; text-align: center; }
@media (max-width: 1000px) {
    html body #tea-recommendations .recommendation-rail { --recommendation-count: 2; grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 600px) {
    html body #tea-recommendations .recommendation-rail { --recommendation-count: 1; grid-auto-columns: 84%; gap: 12px !important; }
}