/* Mobile-responsive styles for shop page */
/* ONLY applies to screens smaller than 768px */

@media (max-width: 767px) {
    /* Hero section - reduce padding */
    .shop-hero {
        padding: 2rem 1rem !important;
    }

    /* Hero logo - smaller on mobile */
    .shop-hero-logo {
        max-width: 200px !important;
        margin-bottom: 1rem !important;
    }

    /* Hero text - smaller fonts */
    .shop-hero-title {
        font-size: 1.2rem !important;
    }

    .shop-hero-subtitle {
        font-size: 0.95rem !important;
    }

    /* Hero button */
    .shop-hero-button {
        font-size: 1rem !important;
        padding: 0.6rem 1.5rem !important;
    }

    /* Product card images - smaller height on mobile */
    .product-card .card-img-top,
    .featured-product-card .card-img-top {
        height: 180px !important;
    }

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

    /* Product titles - smaller */
    .product-card .card-title {
        font-size: 0.9rem !important;
        min-height: 40px !important;
    }

    .featured-product-card .card-title {
        font-size: 1rem !important;
        min-height: 45px !important;
    }

    /* Product price - smaller */
    .product-price {
        font-size: 1.2rem !important;
    }

    /* Product buttons - ensure touch-friendly */
    .product-card button,
    .featured-product-card button {
        font-size: 0.9rem !important;
        padding: 0.6rem !important;
        min-height: 44px !important;
    }

    /* Category cards - reduce padding */
    .category-card .card-body {
        padding: 1.5rem 1rem !important;
    }

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

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

    .category-icon {
        font-size: 2.5rem !important;
    }

    /* Section headings - smaller */
    h2 {
        font-size: 1.8rem !important;
    }

    /* Category section headings */
    .category-heading {
        font-size: 1.5rem !important;
        margin-top: 2rem !important;
    }

    /* Promo banner - reduce padding */
    .promo-banner {
        padding: 2rem 1rem !important;
    }

    .promo-banner h2 {
        font-size: 1.3rem !important;
    }

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

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

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

    .about-section .feature-box {
        padding: 1.5rem 1rem !important;
        margin-bottom: 1rem !important;
    }

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

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

    /* Footer - stack links vertically */
    .footer-links {
        text-align: center !important;
    }

    .footer-links a {
        display: block !important;
        margin: 0.5rem 0 !important;
    }

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

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

    /* Reduce container padding on mobile */
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Stock info text - smaller */
    .stock-info {
        font-size: 0.8rem !important;
    }

    /* Badges - smaller */
    .badge {
        font-size: 0.65rem !important;
    }
}

/* Tablet optimization: 768px - 991px */
@media (min-width: 768px) and (max-width: 991px) {
    /* Product images - medium size on tablets */
    .product-card .card-img-top,
    .featured-product-card .card-img-top {
        height: 200px !important;
    }

    /* Slightly reduce padding on tablets */
    .shop-hero {
        padding: 3rem 2rem !important;
    }
}

/* Ensure all images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure all buttons are touch-friendly (minimum 44x44px) */
button,
a.btn,
.btn {
    min-height: 44px;
    min-width: 44px;
}