/* ============================================
   COMMON.CSS - Responsive Styles
   Breakpoints:
   - Small Mobile: default (in style.css)
   - Large Mobile: 480px+
   - Tablet: 576px+, 768px+
   - Desktop: 992px+
   ============================================ */

/* ============================================
   LARGE MOBILE (480px+)
   ============================================ */
@media (min-width: 480px) {
    /* Modal adjustments */
    .modal-header {
        padding: 22px 24px 20px;
    }

    .modal-body {
        padding: 24px 24px 20px;
    }

    /* Product detail container */
    .product-detail .product-container {
        width: 100% !important;
    }

    .d-flex {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }

    .logo-size {
        width: 50px;
        height: 30px;
    }

    .main_content {
        margin-top: 50px;
    }
}

/* ============================================
   TABLET & SMALL LAPTOP (576px+)
   ============================================ */
@media (min-width: 576px) {
    /* Header adjustments */
    .logo {
        position: absolute;
    }

    .cart-account-section {
        top: -85px;
        right: 20px;
    }

    .has-search {
        margin-top: 40px;
    }

    .header-menu {
        height: 85px;
    }

    /* Product item width */
    .product-item {
        width: 17.9rem;
    }

    .d-flex {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }

    .logo-size {
        width: 10rem;
        height: 3rem;
    }

    .main_content {
        margin-top: 100px;
    }
}

/* ============================================
   TABLET & LAPTOP (768px+)
   ============================================ */
@media (min-width: 768px) {
    /* ===== HEADER ===== */
    .logo {
        top: 20px;
        left: 20px;
    }

    .cart-account-section {
        top: 25px !important;
        left: 35px !important;
        right: auto !important;
    }

    .has-search {
        margin-top: 20px !important;
    }

    .header-menu {
        height: 70px !important;
    }

    .humber {
        top: 25px;
    }

    /* ===== BANNER ===== */
    .inner-banner .bg-breadcrumb h3 {
        font-size: 40px;
        font-weight: 700;
    }

    .breadcrumb .breadcrumb-item {
        font-size: 16px;
    }

    /* ===== SCROLLABLE CONTAINER ===== */
    .scrollable-container {
        display: flex;
        flex-direction: row;
    }

    /* ===== PRODUCT GRID (2 columns) ===== */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
        align-items: stretch; /* equal card heights per row */
    }

    .product-filter-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px;
    }

    .product-item {
        /* width: auto;*/
        width: 16rem;
    }

    .product-item-body {
        padding: 18px;
        /* maintain flex column from base styles */
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .product-price {
        font-size: 20px;
    }

    .product_title {
        font-size: 1.5rem;
    }

    /* ===== PADDING UTILITIES ===== */
    .pl-4, .px-4 {
        padding-left: 1.5rem !important;
    }

    .pb-4, .py-4 {
        padding-bottom: 1.5rem !important;
    }

    .pr-4, .px-4 {
        padding-right: 1.5rem !important;
    }

    /* ===== BODY ===== */
    body {
        padding: 0;
    }

    /* ===== PRODUCT DETAIL ===== */
    .product-detail .product-container {
        width: 400px;
    }

    .product-main-img img {
        max-width: 400px;
    }

    /* ===== POPULAR BLOG ===== */
    .popular-blog-thumb img {
        width: 92px;
        height: 75px;
    }

    /* ===== ACCORDION ===== */
    .accordion {
        padding: 0 50px;
    }

        .accordion h1 {
            font-size: 35px;
        }

    .d-flex {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }

    .main_content {
        margin-top: 100px;
    }
}

/* ============================================
   DESKTOP (992px+)
   ============================================ */
@media (min-width: 992px) {
    /* ===== HEADER ===== */
    .logo {
        position: static !important;
        top: auto !important;
        left: auto !important;
    }

    .cart-account-section {
        position: static !important;
        top: 0px !important;
        right: 0px !important;
        left: auto !important;
    }

    .has-search {
        margin-top: 20px !important;
    }

    .header-menu {
        height: 70px !important;
    }

    /* ===== NAVIGATION (Desktop Menu) ===== */
    .menu-list {
        position: static;
        z-index: auto;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        background-color: transparent;
    }

        .menu-list > ul {
            display: flex;
            padding: 0px;
            background: transparent;
            width: auto;
            height: auto;
        }

        .menu-list ul li > a:not(.child-menu-list ul li > a) {
            display: block;
            padding: 0px 20px;
            position: relative;
            border-bottom: none;
        }

        .menu-list ul li > span {
            display: block;
            padding: 0px 20px;
            position: relative;
            border-bottom: none;
        }

            .menu-list ul li > a:hover,
            .menu-list ul li > span:hover {
                background: transparent;
            }

    .child-menu-list {
        display: none;
        position: absolute;
        width: 250px;
        z-index: 11;
    }

        .child-menu-list ul {
            background: var(--white);
            list-style: none;
            padding: 6px;
            margin: 19px 0px 0px 0px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
            border-radius: 0px 0px 8px 8px;
        }

    .closeMenu {
        display: none;
    }

    /* ===== PRODUCT GRID (4 columns) ===== */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 20px;
        align-items: stretch; /* equal card heights per row */
    }

    .product-filter-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 20px;
    }

    .d-flex {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }

    .main_content {
        margin-top: 100px;
    }
}

/* ============================================
   MOBILE MENU (200px - 990px)
   ============================================ */
@media (min-width: 200px) and (max-width: 990px) {
    /* Mobile and Tablet device Menu */
    .menu-list {
        z-index: 111;
        position: fixed;
        top: -25px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.2);
    }

        .menu-list > ul {
            display: block;
            padding: 10px;
            background: #fff;
            width: 80%;
            height: 100%;
        }

        .menu-list ul li > a:not(.child-menu-list ul li > a) {
            padding: 8px 10px;
            border-bottom: 1px solid #e9e3e3;
        }

        .menu-list ul li > span {
            display: block;
            padding: 8px 10px;
            border-bottom: 1px solid #e9e3e3;
        }

    .child-menu-list {
        position: static;
        width: 100% !important;
    }

    .menu-list ul li > a:hover,
    .menu-list ul li > span:hover {
        background: #f8f8f8;
    }

    .d-flex {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }

    .main_content {
        margin-top: 50px;
    }
}

/* ============================================
   MAX-WIDTH: 768px (Tablet and below)
   ============================================ */
@media (max-width: 768px) {
    /* Product grid fallback */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
        align-items: stretch; /* equal card heights per row */
    }

    .product-filter-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px;
    }

    /* Product detail */
    .product-detail .product-container {
        width: 100% !important;
    }

    /* Popular blog */
    .popular-blog-thumb img {
        width: 100%;
        height: 75px;
    }

    .d-flex {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }

    .category-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
        grid-template-rows: repeat(2, auto); /* 2 rows */
        gap: 10px;
        flex-wrap: unset; /* reset flex */
    }

    /* Slightly taller aspect ratio on small screens */
    .cat-card {
        flex: unset;
        aspect-ratio: 2 / 3;
    }

    .cat-label h3 {
        font-size: 0.72rem;
    }

    .cat-label span {
        font-size: 0.65rem;
    }

    .cat-label {
        padding: 10px 10px;
    }
}

/* ============================================
   MAX-WIDTH: 480px (Mobile)
   ============================================ */
@media (max-width: 480px) {
    /* Product grid single column */
    /*.product-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px;
        align-items: stretch;
    }*/
    .product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0px;
        align-items: stretch;
    }

    .product-filter-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
    }

    /* Banner */
    .inner-banner .bg-breadcrumb h3 {
        font-size: 1.2rem;
        font-weight: 700;
    }

    /* Product detail */
    .product-detail .product-container {
        width: 100% !important;
    }

    /* Popular blog */
    .popular-blog-thumb img {
        width: 100%;
        height: 100%;
    }

    /* Product title */
    .product_title {
        font-size: 1.2rem;
    }

    /* Breadcrumb */
    .breadcrumb .breadcrumb-item {
        font-size: 0.8rem;
    }

    /* Padding utilities */
    .pl-4, .px-4 {
        padding-left: 0.1rem !important;
    }

    .pb-4, .py-4 {
        padding-bottom: 0.1rem !important;
    }

    .pr-4, .px-4 {
        padding-right: 0.1rem !important;
    }

    /* Body padding */
    body {
        padding: 10px;
    }

    .d-flex {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }

    .logo-size {
        width: 50px;
        height: 30px;
    }

    .main_content {
        margin-top: 50px;
    }

    .category-grid {
        gap: 6px;
    }

    .cat-label h3 {
        font-size: 0.8rem;
        font-weight: 600;
    }
}

/* ============================================
   MAX-WIDTH: 600px (Small devices)
   ============================================ */
@media (max-width: 600px) {
    .product-main-img img {
        max-width: 300px;
    }

    .d-flex {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .header-menu,
    .top-header,
    .footer,
    .bottom-footer,
    .cart-account-section,
    .humber,
    .menu-list,
    .banner .owl-nav,
    .wishlist,
    .cart-btn,
    .product-btn {
        display: none !important;
    }

    .product-item {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}