/* NUTRIPOP — Shop/catalogue styles (.shop-page). Loaded only on shop.html. */

.shop-page .sub-hero {
    min-height: 40vh;
    padding-top: 128px;
    padding-bottom: 48px;
    background: radial-gradient(ellipse at 20% 30%, rgba(203,161,79,0.16) 0%, transparent 55%),
                radial-gradient(ellipse at 80% 70%, rgba(203,161,79,0.08) 0%, transparent 55%),
                var(--bg-base);
}

.shop-page .sub-hero-content { justify-content: flex-start; }

.shop-page .sub-hero-text { max-width: 640px; text-align: left; }

.shop-page .sub-hero-text .hero-subtext { margin-left: 0; }

.shop-page .hero-headline { font-size: clamp(2.6rem, 6vw, 4.4rem); }

.shop-page .stats-row { justify-content: flex-start; }

.shop-page .product-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 1100px) {
.shop-page .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
.shop-page .product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        overflow: visible;
        padding: 0;
        margin: 0;
        scroll-snap-type: none;
    }
.shop-page .product-grid > .product-card {
        width: 100%;
        flex: none;
        aspect-ratio: 3 / 4;
        scroll-snap-align: none;
    }
.shop-page .mobile-product-hint { display: none; }
}

@media (max-width: 480px) {
.shop-page .product-grid { gap: 10px; }
}

@media (max-width: 480px) {
.shop-page .sub-hero { padding-top: 118px; }
}

@media (max-width: 768px) {
.shop-page .home-best-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 4px;
        gap: 14px;
        padding: 4px 4px 10px;
        margin: 0 -4px;
        scrollbar-width: thin;
    }
.shop-page .home-best-row::-webkit-scrollbar { display: block; height: 5px; }
.shop-page .home-best-row::-webkit-scrollbar-thumb { background: currentColor; border-radius: 99px; }
.shop-page .home-best-row > .home-best-card {
        flex: 0 0 auto;
        width: min(58vw, 220px);
        scroll-snap-align: start;
    }
.shop-page .home-best-row > .home-best-card:hover { transform: none; }
}

.shop-page .spice-collection-heading { margin-bottom: 24px; }