/* Mobile responsive helpers for Woodmart child theme
   - Compact header on small screens
   - Responsive hero scaling
   - Product card grid adjustments
   - Utility helper classes for spacing and stacking
*/

/* Base viewport fix */
html, body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Make images responsive by default */
.woodmart .product-image img,
.woodmart .site-logo img,
.woodmart img {
    max-width: 100%;
    height: auto;
}

/* Header compacting */
@media (max-width: 1024px) {
    .wd-header {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .wd-header .logo {
        max-width: 160px;
    }
}

@media (max-width: 768px) {
    .wd-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
    }
    .wd-header .logo {
        max-width: 140px;
    }
    .wd-tools-element {
        display: flex;
        gap: 8px;
    }
    .wd-tools-element .wd-tools-item {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Collapse the main navigation into a hamburger if provided by theme */
    .main-menu {
        display: none;
    }
    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        background: transparent;
        border: 1px solid rgba(0,0,0,0.04);
    }
}

/* Hero scaling */
@media (max-width: 1024px) {
    .knb-hero {
        background-position: center;
        background-size: cover;
    }
    .knb-hero .knb-hero-inner {
        padding: 56px 24px;
    }
}
@media (max-width: 480px) {
    .knb-hero .knb-hero-inner {
        padding: 40px 16px;
    }
    .knb-hero .knb-hero-title {
        font-size: 1.4rem;
        line-height: 1.2;
    }
    .knb-hero .knb-hero-subtitle {
        font-size: 0.95rem;
    }
}

/* Product card responsive grid */
.woodmart .products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 1024px) {
    .woodmart .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .woodmart .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .woodmart .products-grid {
        grid-template-columns: 1fr;
    }
}

/* Utility: stack elements vertically */
.knb-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Footer adjustments for mobile */
@media (max-width: 768px) {
    .site-footer .widget-columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}
@media (max-width: 480px) {
    .site-footer .widget-columns {
        grid-template-columns: 1fr;
    }
}

/* Accessibility: larger tap targets for interactive elements */
a, button, .wd-tools-item {
    touch-action: manipulation;
}

/* Reduce crowded text on product titles */
.woodmart .product-title {
    font-size: 0.95rem;
}

/* Small helpers */
.can-hide-mobile {
    display: inherit;
}
@media (max-width: 768px) {
    .can-hide-mobile {
        display: none;
    }
}