/* =====================================================
   DESKTOP NAV — show above 1024px
   ===================================================== */
@media (min-width: 1024px) {
    .desktop-only {
        display: flex;
        align-items: center;
    }
}

/* =====================================================
   HOME PAGE — responsive breakpoints
   ===================================================== */

/* Tablet landscape: 2-col grid (switch earlier to prevent text wrapping) */
@media (max-width: 1000px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .category-tile {
        height: 140px;
        min-width: 300px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin: 0 auto;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-lg);
    }

    .footer-col-brand {
        grid-column: 1 / -1;
    }

    .footer-cta-inner {
        flex-direction: row;
        text-align: left;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-sm);
    }
    
    .footer-cta-inner p {
        font-size: 0.95rem;
        flex: 1;
    }

    .footer-cta-bar {
        padding: var(--spacing-sm) var(--spacing-md);
        margin-top: var(--spacing-sm);
    }
    
    .btn-footer-cta {
        width: 60%;
        max-width: 140px;
        padding: var(--spacing-sm) var(--spacing-xs);
        font-size: 0.85rem;
    }

    .footer-main {
        padding: var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
    }
}

/* Mobile: 1-col grid (switch earlier to prevent text wrapping) */
@media (max-width: 700px) {
    .category-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .category-tile {
        height: 120px;
        min-width: 0;
        max-width: 100%;
    }
}

/* Medium screens: adjust for phone button */
@media (max-width: 1024px) {
    .catalog-sticky-wrapper {
        padding-right: 90px;
    }
}

/* Footer column collapse (old rule updated) */
@media (max-width: 768px) {
    :root {
        --font-size-base: 14px;
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }

    /* Hero */
    .home-hero-content {
        padding-top: 90px;
        padding-bottom: 80px;
    }

    .home-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .home-hero-actions .btn {
        text-align: center;
        justify-content: center;
    }

    /* Scroll indicator - ensure visibility on mobile */
    .home-hero-scroll {
        bottom: max(80px, 3vh);
        font-size: 0.65rem;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-cta-inner {
        flex-direction: row;
        text-align: left;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-sm);
    }
    
    .footer-cta-inner p {
        font-size: 0.95rem;
        flex: 1;
    }

    .footer-cta-bar {
        padding: var(--spacing-sm) var(--spacing-md);
        margin-top: var(--spacing-sm);
    }
    
    .btn-footer-cta {
        width: 60%;
        max-width: 140px;
        padding: var(--spacing-sm) var(--spacing-xs);
        font-size: 0.85rem;
    }

    .footer-main {
        padding: var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
    }

    /* Mobile Filter Adjustments */
    .catalog-sticky-wrapper {
        padding-right: 80px;
    }

    .catalog-search-bar {
        flex-direction: row;
        gap: var(--spacing-xs);
        align-items: stretch;
    }

    .search-input-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mobile-filter-toggle {
        width: auto;
        min-width: 44px;
        max-width: 44px;
        padding: var(--spacing-sm);
        flex: 0 0 auto;
    }

    .mobile-filter-toggle .filter-btn-text {
        display: none;
    }

    .mobile-filter-toggle svg {
        margin: 0;
    }

    /* Mobile: narrower drawer */
    .filters-container {
        width: 85%;
        max-width: 380px;
    }

    /* Mobile Header Layout */
    header .container {
        padding: 0 var(--spacing-sm);
    }
    
    header nav {
        flex-wrap: nowrap;
    }
    
    /* Symmetrical spacing */
    .nav-left,
    .nav-right-header {
        flex: 0 0 auto;
        gap: var(--spacing-sm);
    }
    
    .nav-center {
        flex: 0 0 auto;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
    }
    
    header .logo {
        font-size: 1.2rem;
    }
    
    .logo-img {
        height: 36px; /* Larger for better visibility */
    }
    
    /* Hamburger - ensure consistent height with cart */
    .hamburger {
        width: 40px;
        height: 40px;
        justify-content: center;
    }
    
    .hamburger span {
        margin: 3px auto;
    }
    
    /* Mobile Cart - Match hamburger width, no hover */
    .cart-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .cart-icon:hover {
        background-color: transparent !important;
        transform: none !important;
    }
    
    .cart-total {
        display: none;
    }
    
    .cart-icon-svg {
        display: block;
        width: 24px;
        height: 24px;
    }
    
    .cart-badge {
        display: flex;
        top: 2px;
        right: 2px;
        width: 18px;
        height: 18px;
        font-size: 0.65rem;
    }
    
    /* Mobile Navigation Menu */
    .nav-menu {
        width: 100%;
    }
    
    .nav-menu-content {
        padding: var(--spacing-md);
    }
    
    .nav-menu .header-phone {
        font-size: 1rem;
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    
    .nav-menu .nav-links a,
    .nav-menu .nav-links .dropdown-toggle {
        padding: var(--spacing-md);
        font-size: 1rem;
    }
    
    .nav-menu .nav-links .dropdown-menu a {
        padding-left: calc(var(--spacing-md) + var(--spacing-sm));
        font-size: 0.95rem;
    }
    
    .language-toggle {
        padding: var(--spacing-md);
    }
    
    .product-grid {
        grid-template-columns: 1fr;
    }

    /* Popular Models Carousel - Mobile */
    .popular-models-carousel-wrapper {
        padding: 0 50px;
    }

    .popular-models-carousel-track {
        grid-template-columns: 1fr;
    }

    .popular-models-carousel-wrapper .carousel-arrow {
        width: 40px;
        height: 40px;
    }

    .popular-models-carousel-wrapper .carousel-arrow-left {
        left: 2px;
    }

    .popular-models-carousel-wrapper .carousel-arrow-right {
        right: 2px;
    }
    
    .product-detail {
        display: flex;
        flex-direction: column;
    }
    
    /* Hide breadcrumb on mobile */
    .breadcrumb {
        display: none;
    }
    
    /* Use display: contents to flatten structure for proper ordering */
    .product-detail-left {
        display: contents;
    }
    
    /* Reorder sections: Gallery → Main Info → Tabs */
    .product-gallery {
        order: 0; /* Gallery first */
    }
    
    .product-detail-info {
        order: 1; /* Main info second */
        position: static;
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
    
    .info-tabs-container {
        order: 2; /* Tabs last */
    }
    
    /* Compact price and cart button on same line */
    .price-section {
        display: flex;
        flex-direction: row !important;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }
    
    .price-section .price {
        font-size: 2rem;
        margin: 0;
    }
    
    .price-section .add-to-cart {
        flex: 0 0 auto;
        width: 80%;
        max-width: 180px;
        padding: var(--spacing-sm);
        font-size: 0.9rem;
        white-space: nowrap;
    }
    
    .price-section .add-to-cart:hover {
        transform: none;
        box-shadow: none;
    }
    
    /* Action buttons on same line, narrower */
    .actions {
        flex-direction: row;
        gap: var(--spacing-xs);
        margin-top: var(--spacing-xs);
        margin-bottom: var(--spacing-xs);
        justify-content: flex-start;
    }
    
    .actions .btn {
        flex: 1;
        padding: var(--spacing-sm);
        font-size: 0.85rem;
        white-space: nowrap;
    }
    
    .actions .btn svg,
    .btn-call svg,
    .btn-secondary svg {
        display: none !important;
    }
    
    .options-section {
        margin-bottom: var(--spacing-sm);
    }
    
    /* Wider spec fields - reduce tab content padding */
    .info-tabs-content {
        padding: var(--spacing-sm);
    }
    
    /* Tab buttons - reduce padding and font size */
    .info-tab-btn {
        padding: var(--spacing-sm);
        font-size: 0.9rem;
    }
    
    .specs-grid {
        width: 100%;
        margin: 0;
    }

    /* Gallery: flip to vertical stack — main top, thumbs below */
    .product-gallery {
        flex-direction: column;
    }

    .product-gallery .gallery-thumbs {
        flex-direction: row;
        width: 100%;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 0;
        padding-bottom: 4px;
        gap: 6px;
    }

    .product-gallery .gallery-thumb {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
    }
    
    .related-products-grid {
        grid-template-columns: 1fr;
    }
    
    /* Cart Responsive */
    .cart-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .cart-items-list {
        gap: var(--spacing-sm);
    }

    .cg-main-card {
        gap: var(--spacing-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .cg-main-img {
        width: 44px;
        height: 44px;
    }

    .cg-main-name {
        white-space: normal;
        font-size: 0.88rem;
        line-height: 1.3;
    }

    .cg-main-secondary {
        font-size: 0.72rem;
    }

    .cg-header {
        padding: var(--spacing-xs) var(--spacing-sm);
        gap: 6px;
    }

    .cg-item-count {
        font-size: 0.75rem;
    }

    .cg-header-total {
        font-size: 0.95rem;
    }

    .cg-stepper {
        border-width: 1px;
    }

    .cg-stepper-btn {
        width: 24px;
        height: 24px;
        font-size: 1rem;
    }

    .cg-stepper-val {
        min-width: 20px;
        font-size: 0.85rem;
    }

    .cg-main-total {
        font-size: 0.92rem;
    }

    .cg-section {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .cg-sub-card {
        gap: 8px;
    }

    .cg-sub-img {
        width: 36px;
        height: 36px;
    }

    .cg-sub-icon {
        width: 36px;
        height: 36px;
    }

    .cg-sub-icon svg {
        width: 18px;
        height: 18px;
    }

    .cg-sub-name {
        font-size: 0.8rem;
    }

    .cg-sub-secondary {
        font-size: 0.7rem;
    }

    .cg-qty-badge {
        font-size: 0.75rem;
    }

    .cg-sub-total {
        font-size: 0.85rem;
    }

    .cart-summary {
        position: static;
        padding: var(--spacing-md);
    }

    .cart-summary h2 {
        font-size: 1.3rem;
        margin-bottom: var(--spacing-sm);
    }

    .summary-row {
        padding: 8px 0;
        font-size: 0.9rem;
    }

    .summary-row.total {
        font-size: 1.05rem;
        padding-top: var(--spacing-sm);
    }

    .total-price {
        font-size: 1.3rem;
    }

    .cart-summary .btn {
        font-size: 0.9rem;
        padding: 10px var(--spacing-sm);
    }
    
    .clear-cart-btn {
        font-size: 0.9rem;
        padding: 10px var(--spacing-sm);
    }
    
    /* Empty cart state */
    .empty-cart-icon svg {
        width: 80px;
        height: 80px;
    }
    
    .empty-cart-heading {
        font-size: 1.5rem;
    }
    
    .empty-cart-subtitle {
        font-size: 0.95rem;
    }
    
    /* Removed conflicting cart-icon rule - mobile rules above take precedence */
    
    .cart-total {
        font-size: 1rem;
    }
    
    /* Comparison Page */
    /* Chart adjustments */
    .compare-chart-section {
        padding: var(--spacing-md);
    }
    
    .chart-controls {
        gap: var(--spacing-xs);
    }
    
    .chart-metric-btn {
        font-size: 0.813rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .chart-container {
        height: 280px;
    }
    
    .compare-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    .compare-header h1 {
        font-size: 1.5rem;
    }
    
    .compare-table {
        font-size: 0.813rem;
    }
    
    .compare-table th,
    .compare-table td {
        padding: 0.75rem;
    }
    
    .compare-label {
        min-width: 120px;
        font-size: 0.75rem;
    }
    
    .compare-product-header {
        min-width: 180px;
    }
    
    .compare-product-image {
        width: 100px;
        height: 100px;
    }
    
    .compare-icon {
        font-size: 1rem;
        padding: 6px 10px;
    }
    
    /* Pricing Table Responsive */
    .accordion-header {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .accordion-title {
        font-size: 0.9rem;
    }
    
    .accordion-icon {
        font-size: 0.7rem;
    }
    
    .pricing-table {
        font-size: 0.8rem;
    }
    
    .pricing-table th,
    .pricing-table td {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .pricing-table th {
        font-size: 0.85rem;
    }
    
    .pricing-table td {
        font-size: 0.75rem;
    }
    
    /* Power Capacity Bar - Mobile */
    .power-capacity-bar {
        margin: 10px 0 var(--spacing-md) 0;
    }
    
    .capacity-bar-header {
        font-size: 0.75rem;
        margin-bottom: 6px;
    }
    
    .capacity-label {
        font-size: 0.7rem;
    }
    
    .capacity-percentage {
        font-size: 0.8rem;
    }
    
    .capacity-bar-track {
        height: 6px;
    }
    
    /* Multi-Split & Heat Pump Drawer Unit Cards - Mobile Responsive */
    .drawer-unit-card {
        grid-template-columns: 105px 1fr;
    }
    
    .drawer-unit-type-label {
        width: 105px;
        font-size: 0.55rem;
        padding: 0 6px;
    }
    
    .drawer-card-body-left {
        padding: 8px 6px;
    }
    
    .drawer-unit-card img {
        height: 100px;
    }
    
    .drawer-card-body-right {
        gap: 3px;
        padding: 6px 8px;
    }
    
    .drawer-unit-chip {
        padding: 1px 8px;
        gap: 4px;
        font-size: 0.65rem;
    }
    
    .chip-label {
        font-size: 0.63rem;
    }
    
    .chip-value {
        font-size: 0.68rem;
    }
    
    .drawer-card-foot-left {
        padding: 0 6px;
    }
    
    .drawer-card-foot-right {
        padding: 6px 8px;
    }
    
    .drawer-unit-price {
        font-size: 1.3rem;
    }
    
    .drawer-unit-card .btn-add-unit {
        width: 100%;
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
        white-space: nowrap;
    }
    
    .drawer-card-colors {
        padding: 8px 8px 4px;
    }
    
    .drawer-card-colors .color-swatch {
        width: 22px;
        height: 22px;
    }
    
    .drawer-card-colors .color-swatch-label {
        font-size: 0.7rem;
    }
    
    .drawer-unit-manufacturer {
        font-size: 0.85rem;
    }
    
    .drawer-unit-series {
        font-size: 0.85rem;
    }
    
    .drawer-unit-model {
        font-size: 0.75rem;
    }
    
    .drawer-card-header-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 6px 8px;
    }
    
    .drawer-brand-series {
        gap: 6px;
    }
    
    /* Options styling to match data labels */
    .drawer-card-options {
        padding: 6px 8px 3px;
    }
    
    .drawer-option-label {
        gap: 4px;
        font-size: 0.65rem;
        font-weight: 600;
    }
    
    .drawer-option-label input[type="checkbox"] {
        width: 14px;
        height: 14px;
        margin-right: 2px;
    }
    
    .drawer-option-price {
        font-size: 0.68rem;
        font-weight: 700;
    }
}

/* Mobile Only */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-xs);
    }
    
    .btn {
        width: 100%;
        text-align: center;
    }
    
    /* Info Tabs - Extra Compact for Mobile */
    .info-tabs-container {
        border-radius: var(--radius-md);
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    
    .info-tabs-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    
    .info-tabs-nav::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    
    .info-tab-btn {
        padding: 10px 8px;
        font-size: 0.75rem;
        white-space: nowrap;
        min-width: fit-content;
    }
    
    .info-tab-btn.active::after {
        bottom: 0;
        height: 3px;
    }
    
    .info-tabs-content {
        padding: var(--spacing-xs);
        overflow-x: hidden;
    }
    
    .spec-item {
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .spec-label,
    .spec-value {
        word-break: break-word;
    }
    
    /* Cart - Extra Small Mobile */
    .cg-header {
        flex-wrap: wrap;
        padding: 6px 10px;
        gap: 4px;
    }

    .cg-collapse-btn {
        order: 1;
    }

    .cg-category-badge {
        order: 2;
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    .cg-item-count {
        order: 3;
        font-size: 0.7rem;
        margin-right: var(--spacing-xs);
    }

    .cg-remove-group {
        order: 4;
        margin-left: auto;
    }

    .cg-header-total {
        order: 5;
        flex-basis: 100%;
        text-align: left;
        font-size: 0.9rem;
        margin-top: 2px;
    }

    .cg-main-card {
        flex-wrap: wrap;
        padding: 8px 10px;
    }

    .cg-main-img {
        width: 40px;
        height: 40px;
        order: 1;
    }

    .cg-main-info {
        order: 2;
        flex: 1;
        min-width: 0;
    }

    .cg-main-name {
        font-size: 0.82rem;
    }

    .cg-main-secondary {
        font-size: 0.68rem;
    }

    .cg-stepper {
        order: 3;
        margin-left: auto;
    }

    .cg-stepper-btn {
        width: 22px;
        height: 22px;
        font-size: 0.95rem;
    }

    .cg-stepper-val {
        min-width: 18px;
        font-size: 0.8rem;
    }

    .cg-main-total {
        order: 4;
        flex-basis: 100%;
        text-align: right;
        font-size: 0.88rem;
        margin-top: 4px;
    }

    .cg-section {
        padding: 6px 10px;
    }

    .cg-section-label {
        font-size: 0.68rem;
        padding: 4px 0 2px 0;
    }

    .cg-sub-card {
        gap: 6px;
        padding: 4px 0;
    }

    .cg-sub-img,
    .cg-sub-icon {
        width: 32px;
        height: 32px;
    }

    .cg-sub-icon svg {
        width: 16px;
        height: 16px;
    }

    .cg-sub-name {
        font-size: 0.75rem;
        white-space: normal;
        line-height: 1.3;
    }

    .cg-sub-secondary {
        font-size: 0.65rem;
    }

    .cg-qty-badge {
        font-size: 0.7rem;
    }

    .cg-sub-total {
        font-size: 0.8rem;
    }

    .cg-sub-remove,
    .cg-remove-group {
        width: 20px;
        height: 20px;
    }

    .cg-sub-remove svg,
    .cg-remove-group svg {
        width: 10px;
        height: 10px;
    }

    .cart-summary {
        padding: var(--spacing-sm);
    }

    .cart-summary h2 {
        font-size: 1.2rem;
    }

    .summary-row {
        font-size: 0.85rem;
    }

    .summary-row.total {
        font-size: 1rem;
    }

    .total-price {
        font-size: 1.2rem;
    }

    .empty-cart {
        padding: var(--spacing-lg) var(--spacing-sm);
    }

    .empty-cart-icon svg {
        width: 70px;
        height: 70px;
    }

    .empty-cart-heading {
        font-size: 1.3rem;
    }

    .empty-cart-subtitle {
        font-size: 0.9rem;
    }
    
    /* Pricing Table Mobile */
    .accordion-item {
        margin-bottom: var(--spacing-sm);
    }
    
    .accordion-header {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .accordion-title {
        font-size: 0.85rem;
    }
    
    .pricing-table {
        font-size: 0.7rem;
    }
    
    .pricing-table th,
    .pricing-table td {
        padding: var(--spacing-xs);
    }
    
    .pricing-table th {
        font-size: 0.75rem;
    }
    
    .pricing-table td {
        font-size: 0.65rem;
    }
}

/* =====================================================
   HEIGHT-SPECIFIC MEDIA QUERIES
   ===================================================== */

/* Short viewport height - ensure scroll indicator is always visible */
@media (max-height: 700px) {
    .home-hero-scroll {
        bottom: max(12px, 2vh);
        font-size: 0.6rem;
        gap: 4px;
    }

    .home-hero-content {
        padding-top: 70px;
        padding-bottom: 60px;
    }
}

/* Very short viewport height */
@media (max-height: 550px) {
    .home-hero-scroll {
        display: none; /* Hide on very short screens to prevent overlap */
    }

    .home-hero-content {
        padding-top: 60px;
        padding-bottom: 40px;
    }
}