/* ============================================
   Desktop Responsive Styles - coco-market.shop
   Keeps mobile design intact, adds PC layout
   ============================================ */

/* ---- Header ---- */
@media (min-width: 768px) {
    /* Desktop header height */
    #kt_header {
        height: 70px !important;
    }
    #kt_header .container-fluid {
        height: 100%;
        padding: 0 40px;
        max-width: 1400px;
        margin: 0 auto;
    }
    #kt_header .site-logo .logo-img {
        height: 44px;
        width: auto;
    }
    #kt_header .topbar {
        gap: 28px;
    }
    #kt_header .topbar-item {
        cursor: pointer;
    }
    #kt_header .icon-xl {
        font-size: 22px;
    }

    /* Body padding for desktop header */
    body {
        padding-top: 70px !important;
    }

    /* Search dropdown positioning */
    .search-dropdown {
        padding-top: 80px !important;
    }
}

/* ---- Container max-width on desktop ---- */
@media (min-width: 1024px) {
    .container,
    .container-fluid {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ---- Index / Home page ---- */
@media (min-width: 768px) {
    /* Hero slider - hidden on desktop */
    .hero-slider-container {
        display: none !important;
    }

    /* Category grid: 3 cols on tablet, 4 on desktop */
    #featuredCategories.row {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    #featuredCategories.row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    /* How it works section */
    .row .col-md-4 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}

@media (min-width: 1024px) {
    #featuredCategories.row {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---- Products page ---- */
@media (min-width: 768px) {
    .products-page .container {
        display: flex;
        gap: 24px;
    }

    .products-sidebar {
        width: 260px;
        flex-shrink: 0;
        display: block !important; /* always visible on desktop */
    }

    .products-main {
        flex: 1;
        min-width: 0;
    }

    /* Hide mobile filter toggle on desktop */
    .mobile-filter-toggle {
        display: none !important;
    }

    /* Product grid: 3 cols on tablet */
    #products,
    .products-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }

    /* Switch product cards to vertical layout */
    .product {
        flex-direction: column !important;
        min-height: auto !important;
    }
    .product-image {
        width: 100% !important;
        min-width: auto !important;
        aspect-ratio: 1 / 1;
        padding: 16px !important;
    }
    .product-content {
        padding: 14px !important;
    }
}

@media (min-width: 1200px) {
    #products,
    .products-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ---- Product detail page ---- */
@media (min-width: 768px) {
    .product-detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: start;
    }
}

/* ---- Cart page ---- */
@media (min-width: 768px) {
    .cart-page .container {
        display: flex;
        gap: 30px;
        align-items: flex-start;
    }
    .cart-items {
        flex: 1;
    }
    .cart-summary {
        width: 340px;
        flex-shrink: 0;
        position: sticky;
        top: 90px;
    }
}

/* ---- Checkout page ---- */
@media (min-width: 768px) {
    .checkout-container {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 30px;
        align-items: start;
    }
    .order-summary {
        position: sticky;
        top: 90px;
    }
}

/* ---- Account / Orders page ---- */
@media (min-width: 768px) {
    .account-page .container,
    .account-page > .container {
        display: flex !important;
        gap: 30px;
        align-items: flex-start;
    }
    .account-sidebar {
        width: 260px;
        flex-shrink: 0;
        position: sticky;
        top: 90px;
    }
    .account-main {
        flex: 1;
        min-width: 0;
    }
    /* Fix flex-md-row on account page */
    .d-flex.flex-column.flex-md-row {
        flex-direction: row !important;
    }
}

/* ---- Wishlist page ---- */
@media (min-width: 768px) {
    .wishlist-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}
@media (min-width: 1200px) {
    .wishlist-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ---- Menu page (categories grid) ---- */
@media (min-width: 768px) {
    #fullCategoryGrid.row {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    #fullCategoryGrid.row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }
}
@media (min-width: 1024px) {
    #fullCategoryGrid.row {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---- Contact page ---- */
@media (max-width: 767px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---- About page ---- */
@media (max-width: 767px) {
    /* Stack the 2-col about section */
    section > .container > div[style*="grid-template-columns:1fr 1fr"],
    section > .container > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Stack the 4-col features */
    section > .container > div[style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ---- Footer ---- */
@media (min-width: 768px) {
    .site-footer .footer-inner {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* ---- Search dropdown ---- */
@media (min-width: 768px) {
    .search-dropdown-content {
        width: 600px !important;
        max-width: 90vw;
    }
}

/* ---- WhatsApp button position on desktop ---- */
@media (min-width: 1024px) {
    .whatsapp-float {
        bottom: 40px;
        right: 40px;
        width: 56px;
        height: 56px;
    }
}

/* ---- Utility: fix d-none-mobile / d-none-desktop ---- */
@media (max-width: 767px) {
    .d-none-mobile { display: none !important; }
}
@media (min-width: 768px) {
    .d-none-desktop { display: none !important; }
}