/* ============================
   RESPONSIVE BREAKPOINTS
============================ */

/* Large Tablets */
@media (max-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablets */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        gap: 15px;
        background: white;
        padding: 20px;
    }

    .menu-btn {
        display: block;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero h1 {
        font-size: 32px;
    }

    .storefront-hero .carousel-item {
        min-height: 500px;
        border-radius: 0;
    }

    .storefront-hero__image {
        height: 500px;
        object-position: 65% center;
    }

    .storefront-hero__shade {
        background: linear-gradient(90deg, rgba(255, 248, 242, .98) 0%, rgba(255, 248, 242, .92) 58%, rgba(255, 248, 242, .54) 100%);
    }

    .storefront-hero__copy {
        max-width: 92%;
        padding-right: 2.75rem;
    }

    .storefront-hero__copy h1 {
        font-size: 2.15rem;
        line-height: 1.15;
    }

    .storefront-hero__copy p {
        font-size: .98rem;
        line-height: 1.55;
    }

    .storefront-hero__meta {
        gap: .45rem;
    }

    .storefront-hero__meta span {
        font-size: .76rem;
        padding: .4rem .62rem;
    }

    .storefront-overview__summary,
    .storefront-overview__metric {
        min-height: auto;
    }
}

/* Mobile Phones */
@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 1fr;
    }

    header {
        padding: 10px 20px;
    }

    .hero {
        padding: 80px 20px;
    }

    .hero h1 {
        font-size: 28px;
    }

    .storefront-hero .carousel-item {
        min-height: 480px;
    }

    .storefront-hero__image {
        height: 480px;
        object-position: 72% center;
    }

    .storefront-hero__copy {
        max-width: 100%;
        padding: 1.5rem 2.25rem 3rem 0;
    }

    .storefront-hero__copy h1 {
        font-size: 1.86rem;
    }

    .storefront-hero__copy p {
        font-size: .92rem;
    }

    .storefront-hero__meta span {
        max-width: 100%;
    }

    .storefront-overview__summary {
        padding: 1.2rem;
    }

    .storefront-overview__summary h2 {
        font-size: 1.45rem;
    }

    .storefront-overview__actions .btn {
        width: 100%;
    }

    .section-heading {
        align-items: flex-start !important;
        gap: .75rem;
    }

    .storefront-hero__control {
        width: 2.75rem;
    }

    .storefront-hero__control .carousel-control-prev-icon,
    .storefront-hero__control .carousel-control-next-icon {
        width: 1.9rem;
        height: 1.9rem;
    }
}