/* Mobile-responsive styles for shop page */

/* Mobile breakpoint: screens smaller than 768px */
@media (max-width: 767px) {
    /* Hero section - reduce padding and font sizes */
    .shop-hero {
        padding: 2rem 1rem !important;
    }

    .shop-hero p:first-of-type {
        font-size: 1.1rem !important;
    }

    .shop-hero p:last-of-type {
        font-size: 0.9rem !important;
    }

    /* Logo - smaller on mobile */
    .shop-hero img {
        max-width: 250px !important;
        margin-bottom: 1rem !important;
    }

    /* Trust badges - stack vertically, reduce size */
    .trust-badge h3 {
        font-size: 1.5rem !important;
    }

    .trust-badge p {
        font-size: 0.85rem !important;
    }

    /* Category cards - full width on mobile */
    .category-card .card-body {
        padding: 1rem !important;
    }

    .category-card h4 {
        font-size: 1.1rem !important;
    }

    .category-card p {
        font-size: 0.8rem !important;
    }

    /* Product cards - optimize for mobile */
    .product-card img,
    .featured-product-card img {
        height: 180px !important;
    }

    .product-card .card-body,
    .featured-product-card .card-body {
        padding: 1rem !important;
    }

    .product-card h5,
    .featured-product-card h4 {
        font-size: 0.95rem !important;
        min-height: auto !important;
        margin-bottom: 0.5rem !important;
    }

    .product-card .text-muted {
        font-size: 0.75rem !important;
    }

    /* Price - slightly smaller */
    .product-card span[style*="1.4rem"],
    .featured-product-card span[style*="1.8rem"] {
        font-size: 1.2rem !important;
    }

    /* Buttons - ensure they're tappable (min 44px height) */
    .product-card button,
    .featured-product-card button {
        font-size: 0.9rem !important;
        padding: 0.6rem 1rem !important;
        min-height: 44px;
    }

    /* About section - reduce padding */
    .about-section h2 {
        font-size: 1.5rem !important;
    }

    .about-section p {
        font-size: 0.95rem !important;
    }

    /* Feature boxes */
    .feature-box {
        padding: 1.5rem 1rem !important;
        margin-bottom: 1rem !important;
    }

    .feature-box h3 {
        font-size: 2rem !important;
    }

    .feature-box h4 {
        font-size: 1rem !important;
    }

    /* Promo banner */
    .promo-banner h2 {
        font-size: 1.4rem !important;
    }

    .promo-banner p {
        font-size: 0.9rem !important;
    }

    /* Footer */
    .footer-links a {
        display: block;
        margin-bottom: 0.5rem !important;
    }

    /* Container max-width - full width on mobile */
    .container-fluid[style*="maxWidth"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Quick view overlay - hide on mobile (not touch-friendly) */
    .quick-view-overlay {
        display: none !important;
    }

    /* Navbar - ensure mobile menu works */
    .navbar-toggler {
        border: none;
        padding: 0.5rem;
    }

    .navbar-collapse {
        background: white;
        padding: 1rem;
        margin-top: 0.5rem;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
}

/* Tablet breakpoint: 768px - 991px */
@media (min-width: 768px) and (max-width: 991px) {
    /* Product cards slightly smaller on tablets */
    .product-card img,
    .featured-product-card img {
        height: 200px !important;
    }
}

/* Ensure images don't overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Make sure all interactive elements are touch-friendly (min 44x44px) */
button, a.btn {
    min-height: 44px;
    min-width: 44px;
}