/*
 * Store page product rows: one line, scrolled by hand or with the round arrows.
 * Shown per screen: 6 (1400px+) · 5 · 4 · 3 · 2 (phones) · 1 (very small).
 */
.store-products-shell .product-grid {
    --cols: 6; --gap: 18px;
    display: flex; flex-wrap: nowrap; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
    padding: 6px 2px 14px; margin: 0; grid-template-columns: none;
}
.store-products-shell .product-grid::-webkit-scrollbar { display: none; }
.store-products-shell .product-grid[hidden] { display: none; }
.store-products-shell .product-grid > * {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    min-width: 0; scroll-snap-align: start;
}
@media (max-width: 1399px) { .store-products-shell .product-grid { --cols: 5; } }
@media (max-width: 1179px) { .store-products-shell .product-grid { --cols: 4; } }
@media (max-width: 959px)  { .store-products-shell .product-grid { --cols: 3; --gap: 14px; } }
@media (max-width: 719px)  { .store-products-shell .product-grid { --cols: 2; --gap: 12px; } }
@media (max-width: 339px)  { .store-products-shell .product-grid { --cols: 1; } }

.store-carousel { position: relative; }
.store-carousel-btn {
    position: absolute; top: 42%; z-index: 5; width: 44px; height: 44px; margin-top: -22px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    border: 1px solid #e4e7ee; background: #fff; color: #1a2233; cursor: pointer;
    box-shadow: 0 8px 22px -8px rgba(16, 24, 40, 0.4); transition: background .15s, color .15s, opacity .15s, transform .15s;
}
.store-carousel-btn svg { width: 20px; height: 20px; }
.store-carousel-btn:hover:not(:disabled) { background: #e04420; color: #fff; border-color: #e04420; transform: scale(1.06); }
.store-carousel-btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.store-carousel-btn.prev { left: -14px; }
.store-carousel-btn.next { right: -14px; }
.store-carousel.no-scroll .store-carousel-btn { display: none; }
@media (max-width: 719px) {
    .store-carousel-btn { width: 36px; height: 36px; margin-top: -18px; }
    .store-carousel-btn.prev { left: -6px; }
    .store-carousel-btn.next { right: -6px; }
}