/* ========================================
   RESPONSIVE DESIGN FOR ALL SCREEN SIZES
   ======================================== */

/* ===== ROOT VARIABLES ===== */
:root {
    --container-max-width-mobile: 500px;
    --container-max-width-tablet: 768px;
    --container-max-width-desktop: 1200px;
    --container-max-width-large: 1400px;
}

/* ===== BASE RESPONSIVE CONTAINER ===== */
@media (min-width: 501px) {
    body {
        background: #f5f5f5 !important;
    }

    .main_div {
        max-width: var(--container-max-width-tablet);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
        border: 1px solid #e0e0e0;
    }
}

@media (min-width: 769px) {
    .main_div {
        max-width: var(--container-max-width-desktop);
    }
}

@media (min-width: 1201px) {
    .main_div {
        max-width: var(--container-max-width-large);
    }
}

/* ===== CATEGORY GRID RESPONSIVE ===== */
@media (min-width: 501px) {
    .categort_menu {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 15px;
        padding: 15px;
    }
}

@media (min-width: 769px) {
    .categort_menu {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 20px;
        padding: 20px;
    }
}

@media (min-width: 1025px) {
    .categort_menu {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

/* ===== PRODUCT GRID RESPONSIVE ===== */
/* Removed - Now using unified product-grid-responsive.css only */
/* No .grid class needed - grid is always active */

/* ===== LIST VIEW RESPONSIVE ===== */
/* Removed - List view disabled, grid only */

/* ===== BOTTOM BAR RESPONSIVE ===== */
@media (min-width: 769px) {
    .bottom_bar {
        max-width: var(--container-max-width-desktop);
        left: 50%;
        transform: translateX(-50%);
        border-radius: 20px 20px 0 0;
    }
}

@media (min-width: 1201px) {
    .bottom_bar {
        max-width: var(--container-max-width-large);
    }
}

/* ===== SEARCH/RECENT/FAVOURITE PAGES ===== */
@media (min-width: 769px) {

    .search_page_div,
    .recent_page_div,
    .favourite_page_div {
        max-width: var(--container-max-width-desktop);
        left: 50%;
        transform: translateX(-50%);
        border-radius: 0;
    }
}

@media (min-width: 1201px) {

    .search_page_div,
    .recent_page_div,
    .favourite_page_div {
        max-width: var(--container-max-width-large);
    }
}

/* ===== CART POPUP RESPONSIVE ===== */
@media (min-width: 769px) {
    .cart_popup_div {
        max-width: 500px;
        right: 50%;
        transform: translateX(50%);
    }
}

/* ===== VARIANT POPUP RESPONSIVE ===== */
@media (min-width: 769px) {
    .variant_popup_div {
        max-width: 600px;
        left: 50%;
        transform: translateX(-50%);
    }

    .variant_grid_div {
        max-height: 80vh;
    }
}

/* ===== TOOLBAR/MORE MENU RESPONSIVE ===== */
@media (min-width: 501px) {
    .tool_div_2 {
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
    }
}

@media (min-width: 769px) {
    .tool_div_2 {
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }

    .tollbar_div {
        max-width: var(--container-max-width-desktop);
        left: 50%;
        transform: translateX(-50%);
    }

    .tollbar_div.active {
        bottom: 0;
        transform: translateX(-50%);
    }
}

@media (min-width: 1201px) {
    .tool_div_2 {
        grid-template-columns: repeat(7, 1fr);
    }

    .tollbar_div {
        max-width: var(--container-max-width-large);
    }
}

/* ===== PRODUCT PREVIEW/DETAIL RESPONSIVE ===== */
@media (min-width: 769px) {
    .image_preview {
        max-width: 800px;
        border-radius: 12px;
        overflow: hidden;
    }

    .preview_content {
        padding: 20px;
    }

    .preview_title {
        font-size: 20px;
    }

    .preview_desc {
        font-size: 15px;
    }
}

@media (min-width: 1025px) {
    .image_preview {
        max-width: 100%;
    }
}

/* ===== INSTAGRAM POPUP RESPONSIVE ===== */
@media (min-width: 769px) {
    .igvp-popup {
        max-width: 600px;
        margin: 0 auto;
    }
}

/* ===== MOBILE DIV PADDING ADJUSTMENTS ===== */
@media (min-width: 769px) {
    .mobile_div {
        padding-top: 60px;
        padding-bottom: 120px;
    }
}

/* ===== TOP NAVIGATION RESPONSIVE ===== */
@media (min-width: 769px) {
    .top_nav {
        height: 60px;
        padding: 0 20px;
    }

    .top_nav i {
        font-size: 32px;
    }

    .top_nav p {
        font-size: 18px;
    }
}

/* ===== PRODUCT MAIN DIV RESPONSIVE ===== */
@media (min-width: 769px) {
    .product_main_div {
        margin-top: 80px;
        padding: 0 10px;
    }
}

/* ===== COLOR DROPDOWN RESPONSIVE ===== */
@media (min-width: 769px) {
    .color_dropdown_menu {
        width: 50vw;
        max-width: 400px;
    }
}

/* ===== POLICY ROW RESPONSIVE ===== */
@media (min-width: 769px) {
    .fx-policy-row {
        --fx-icon-size: 50px;
        gap: 30px;
        padding: 15px 20px;
    }

    .fx-policy-label {
        font-size: 15px;
    }
}

/* ===== CHECKOUT PAGE RESPONSIVE ===== */
@media (min-width: 769px) {
    .container {
        max-width: 700px;
    }
}

@media (min-width: 1025px) {
    .container {
        max-width: 800px;
    }
}

/* ===== PROFILE PAGE RESPONSIVE ===== */
@media (min-width: 769px) {
    .profile_div_1 img {
        width: 120px;
        height: 120px;
    }

    .profile_div_1 p {
        font-size: 20px;
    }

    .profile_div_2 .list_edit {
        padding: 15px 20px;
        font-size: 16px;
    }
}

/* ===== ABOUT/CONTENT PAGES RESPONSIVE ===== */
@media (min-width: 769px) {
    .content_div {
        padding: 30px;
        font-size: 16px;
        line-height: 1.8;
    }
}

/* ===== LOADER RESPONSIVE ===== */
@media (min-width: 769px) {
    .custom-loader-container-9x7a1 {
        padding: 30px 0;
    }

    .dot-loader-9x7a1 span {
        width: 14px;
        height: 14px;
    }
}

/* ===== CAROUSEL RESPONSIVE ===== */
@media (min-width: 769px) {
    .product_carousel .carousel-inner {
        max-height: 500px;
    }
}

/* ===== HIDE ELEMENTS ON DESKTOP ===== */
@media (min-width: 1025px) {
    /* You can hide mobile-specific elements here if needed */
}

/* ===== HOVER EFFECTS FOR DESKTOP ===== */
@media (hover: hover) and (pointer: fine) {
    .product_item:hover {
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
        transform: translateY(-2px);
        transition: all 0.3s ease;
    }

    .category_item:hover {
        transform: translateY(-3px);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
        transition: all 0.3s ease;
    }

    .tool_item:hover {
        transform: translateY(-3px);
    }
}

/* ===== DESKTOP NAVIGATION ENHANCEMENTS ===== */
@media (min-width: 1025px) {

    /* Add desktop-specific navigation if needed */
    .desktop-nav {
        display: block;
    }
}

/* ===== PRINT STYLES ===== */
@media print {

    .bottom_bar,
    .blur_body_div,
    .tollbar_div,
    .cart_popup_div,
    .variant_popup_div {
        display: none !important;
    }

    .main_div {
        max-width: 100%;
        box-shadow: none;
        border: none;
    }
}

/* ===== LANDSCAPE ORIENTATION ===== */
@media (orientation: landscape) and (max-height: 500px) {
    .mobile_div {
        padding-top: 40px;
    }

    .bottom_bar {
        height: 60px;
    }

    .bottom_bar .a_t_cart {
        height: 60px;
        width: 60px;
        margin-top: -30px;
    }
}

/* ===== ACCESSIBILITY - REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    .main_div {
        border: 2px solid #000;
    }

    .product_item {
        border: 1px solid #000;
    }
}