/* Mobile layout layer. It deliberately contains only responsive rules so the
   established desktop design is unaffected. */
img,
svg,
video {
    max-width: 100%;
}

@media (max-width: 1024px) {
    .custom-container {
        width: 100%;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .hvac-nav,
    .hvac-search-box {
        display: none !important;
    }


    .hero-section {
        padding: 24px 0 48px !important;
    }

    .hero-slider {
        min-height: 0 !important;
    }

    .hero-content-wrapper {
        gap: 28px !important;
    }

    .hero-left,
    .hero-right {
        min-width: 0;
    }

    .category-grid,
    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .features-section {
        margin-left: 24px !important;
        margin-right: 24px !important;
    }

    .product-card,
    .category-card,
    .service-card {
        min-width: 0;
    }

    .product-name,
    .category-card h3,
    .service-content h3 {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 767px) {
    section {
        padding: 48px 0 !important;
    }

    .hvac-mobile-menu {
        width: min(88vw, 360px) !important;
    }

    .hero-slider {
        padding: 28px 20px 56px !important;
        border-radius: 16px !important;
    }

    .hero-content-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .hero-left,
    .hero-right {
        flex: 0 0 auto !important;
        width: 100%;
    }

    .hero-title {
        font-size: clamp(1.9rem, 9vw, 2.5rem) !important;
        line-height: 1.14 !important;
    }

    .hero-features {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 12px !important;
        margin-bottom: 26px !important;
    }

    .hero-image-wrapper,
    .hero-right img {
        width: 100%;
        height: auto !important;
        aspect-ratio: 4 / 3;
        object-fit: cover !important;
    }

    .hero-btn,
    .btn-primary {
        justify-content: center;
        max-width: 100%;
        padding: 13px 22px !important;
    }

    .hero-slider .swiper-button-prev,
    .hero-slider .swiper-button-next {
        top: auto !important;
        bottom: 14px !important;
        width: 36px !important;
        height: 36px !important;
    }

    .hero-slider .swiper-button-prev { left: 16px !important; }
    .hero-slider .swiper-button-next { right: 16px !important; }
    .hero-slider .swiper-pagination { bottom: 24px !important; }

    .section-header {
        align-items: flex-start !important;
        gap: 12px;
        flex-wrap: wrap;
    }

    .section-title {
        font-size: clamp(1.65rem, 7vw, 2.15rem) !important;
        line-height: 1.2;
    }

    .category-grid,
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .category-card {
        padding: 18px 12px !important;
    }

    .category-image {
        height: 86px !important;
    }

    .product-image {
        height: auto !important;
        aspect-ratio: 1;
    }

    .product-image img {
        height: 100% !important;
        object-fit: contain !important;
    }

    .product-content,
    .service-content {
        padding: 18px !important;
    }

    .product-name {
        font-size: 15px !important;
        min-height: 3em;
    }

    .product-price {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 2px !important;
    }

    .btn-add-cart {
        width: 100%;
        padding: 11px 8px !important;
        font-size: 13px;
    }

    .features-section {
        margin: 0 12px !important;
        padding: 36px 20px !important;
        border-radius: 16px !important;
    }

    .features-grid,
    .services-grid,
    .gallery-grid,
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .service-image {
        height: auto !important;
        aspect-ratio: 16 / 10;
    }

    .about-image img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .hvac-footer {
        padding-top: 48px !important;
    }

    .hvac-footer-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding-bottom: 32px !important;
    }

    .hvac-footer-bottom,
    .hvac-footer-bottom-links {
        flex-direction: column !important;
        text-align: center;
        gap: 12px !important;
    }

    .table-responsive,
    .cart-form {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 359px) {
    .custom-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .hero-slider { padding-left: 16px !important; padding-right: 16px !important; }
    .category-grid,
    .products-grid { gap: 8px !important; }
}