/**
 * Kiloue — Global Responsive Styles
 * Mobile-first, tablet, desktop
 */

/* ══════ RESET & BASE ══════ */
*, *::before, *::after { box-sizing: border-box; }
body { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ══════ NAVBAR ══════ */
#site-navbar { padding-left: 16px !important; padding-right: 16px !important; }
@media(min-width:640px) { #site-navbar { padding-left: 24px !important; padding-right: 24px !important; } }

/* Mobile: hide desktop nav, show hamburger */
@media(max-width:767px) {
    #desktop-nav { display: none !important; }
    #site-navbar .hidden.md\:flex { display: none !important; }
}
/* Desktop: show nav, hide hamburger */
@media(min-width:768px) {
    #mobile-menu-toggle { display: none !important; }
}

/* Mobile drawer — ensure it slides properly */
#mobile-drawer-panel {
    will-change: transform;
    -webkit-overflow-scrolling: touch;
}

/* ══════ FOOTER — Centered on mobile ══════ */
@media(max-width:767px) {
    footer .grid { gap: 32px !important; }
    footer .grid > div {
        text-align: center !important;
    }
    footer .grid > div .flex.items-center.gap-2 {
        justify-content: center !important;
    }
    footer .grid > div .flex.gap-4 {
        justify-content: center !important;
    }
    footer .grid > div ul {
        text-align: center !important;
    }
    footer .grid > div h4 {
        text-align: center !important;
    }
}
/* Tablet: 2 cols centered */
@media(min-width:640px) and (max-width:1023px) {
    footer .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px !important;
    }
}

/* ══════ HOMEPAGE HERO ══════ */
@media(max-width:480px) {
    .kl-hero { padding: 32px 16px !important; min-height: auto !important; }
    .kl-hero-h1 { font-size: 26px !important; }
    .kl-hero-p { font-size: 15px !important; }
    .kl-hero-chips { gap: 8px !important; }
    .kl-hero-chip { padding: 6px 14px !important; font-size: 13px !important; }
}

/* ══════ HOMEPAGE SECTIONS — Center on mobile ══════ */
@media(max-width:767px) {
    /* All section headings centered */
    .min-h-screen h2,
    .min-h-screen section h2 {
        text-align: center !important;
    }

    /* Category cards - smaller padding */
    .min-h-screen .grid a.rounded-xl {
        padding: 16px !important;
    }

    /* Featured section header */
    .min-h-screen .flex.flex-col.sm\:flex-row {
        text-align: center !important;
        align-items: center !important;
    }

    /* Trust section - already centered via text-center class */
}

/* Tablet: categories 2 cols */
@media(min-width:640px) and (max-width:1023px) {
    .min-h-screen .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ══════ MY ACCOUNT — Dashboard sidebar ══════ */
@media(max-width:1023px) {
    /* Sidebar hidden, mobile nav shows */
    .flex.min-h-\[calc\(100vh-72px\)\] > aside {
        display: none !important;
    }
    .flex.min-h-\[calc\(100vh-72px\)\] > main {
        width: 100% !important;
    }

    /* Dashboard stat cards */
    .kl-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media(max-width:640px) {
    .kl-stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* Balance cards in revenue */
    .kl-bal-grid {
        grid-template-columns: 1fr !important;
    }

    /* Listing grid */
    .kl-listings-grid {
        grid-template-columns: 1fr !important;
    }

    /* Favorites grid */
    .kl-fav-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ══════ CATALOG / SHOP ══════ */
/* Already handled in archive-product.php but reinforce */
@media(max-width:1023px) {
    .kl-sidebar { display: none !important; }
    .kl-filter-mobile-btn { display: flex !important; }
    .kl-body { padding: 0 16px !important; }
}
@media(max-width:640px) {
    .kl-grid { grid-template-columns: 1fr !important; }
    .kl-toolbar { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
    .kl-toolbar-right { width: 100%; justify-content: space-between !important; }
    .kl-search-inner { padding: 12px 16px !important; }
    .kl-search-bar { flex-direction: column !important; height: auto !important; padding: 8px !important; gap: 6px !important; }
    .kl-search-field { height: 44px !important; background: #F8FAFC; border-radius: 10px !important; width: 100% !important; }
    .kl-search-sep { display: none !important; }
    .kl-search-btn { width: 100% !important; height: 44px !important; border-radius: 10px !important; }
    .kl-map-link { display: none !important; }
}
/* Tablet: 2 cols in catalog */
@media(min-width:641px) and (max-width:1100px) {
    .kl-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ══════ PRODUCT CARDS ══════ */
@media(max-width:480px) {
    /* Make cards full width with proper spacing */
    .tool-card,
    .bg-white.rounded-xl.shadow-sm.overflow-hidden {
        margin-bottom: 0 !important;
    }
}

/* ══════ 404 PAGE ══════ */
@media(max-width:480px) {
    .kl-404 { padding: 24px 16px !important; }
    .kl-404-code { font-size: 48px !important; }
    .kl-404-title { font-size: 20px !important; }
    .kl-404-desc { font-size: 14px !important; }
    .kl-404-links { flex-direction: column !important; }
    .kl-404-link { justify-content: center !important; }
    .kl-404-search { height: auto !important; flex-direction: column !important; padding: 8px !important; }
    .kl-404-search input { height: 44px !important; padding: 0 12px !important; }
    .kl-404-search button { width: 100% !important; }
}

/* ══════ AUTH PAGE ══════ */
@media(max-width:767px) {
    /* Auth split layout — stack vertically */
    .kiloue-auth-wrap,
    [class*="auth-split"],
    .flex > .kiloue-auth-left {
        display: none !important;
    }
}

/* ══════ CHECKOUT ══════ */
@media(max-width:1023px) {
    .kiloue-checkout-wrap {
        flex-direction: column !important;
    }
    .kiloue-checkout-wrap > div {
        width: 100% !important;
        flex: none !important;
    }
}

/* ══════ CART ══════ */
@media(max-width:767px) {
    .flex.gap-8.lg\:gap-12 {
        flex-direction: column !important;
    }
}

/* ══════ MESSAGING ══════ */
@media(max-width:767px) {
    #km {
        flex-direction: column !important;
        height: calc(100vh - 80px) !important;
    }
    #km > div:first-child {
        width: 100% !important;
        height: auto !important;
        max-height: 40vh !important;
        border-right: none !important;
        border-bottom: 1px solid #E2E8F0 !important;
    }
    #km > div:last-child {
        width: 100% !important;
        flex: 1 !important;
    }
}

/* ══════ CREATE LISTING ══════ */
@media(max-width:640px) {
    /* Progress bar circles smaller */
    .flex.items-center.justify-center[style*="48px"] {
        width: 36px !important;
        height: 36px !important;
    }
}

/* ══════ GENERAL UTILITY — Touch targets ══════ */
@media(max-width:767px) {
    /* Minimum 44px touch targets on mobile */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
    /* Exception for inline links in text */
    p a, span a, li a, td a {
        min-height: auto;
        min-width: auto;
    }
}

/* ══════ STOREFRONT OVERRIDES ══════ */
body.loutils-theme .col-full {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.loutils-theme .site-content {
    padding: 0 !important;
}
body.loutils-theme .woocommerce-breadcrumb {
    display: none !important;
}