/* ==========================================================
   TechMart Deals Page
   Part 1 - Base, Layout & Sidebar
========================================================== */

/* ===============================
   Base
================================== */

*{
    box-sizing:border-box;
}

.tmn-deals-page{
     background:#f5f7fb;
    padding:40px 0;
}

.tmn-container{
    width:min(96%,1900px);
    margin:auto;
}

/* ===============================
   Header
================================== */

.tmn-page-header{
    margin-bottom:25px;
}

.tmn-title{
    font-size:42px;
    font-weight:700;
    margin:0 0 10px;
    line-height:1.2;
}

.tmn-results{
    margin:0;
    font-size:16px;
    color:#666;
    font-weight:600;
}

#tmn-count{
    color:#111;
    font-weight:700;
}

/* ==========================================
   Top Toolbar
========================================== */

.tmn-topbar{

    display:flex;
    align-items:center;
    gap:25px;
    margin-bottom:25px;

}


/* Left */

.tmn-results{

    flex:0 0 auto;
    white-space:nowrap;

}


/* Center */

.tmn-search-wrap{

    flex:1;
    position:relative;

}


/* Right */

.tmn-sort{

    flex:0 0 240px;
    display:flex;


}

.tmn-sort select{

    width:100%;

}


/* Search Box */

.tmn-search{

    width:100%;
    height:48px;
    padding:0 18px;
    border:1px solid #D1D5DB;
    border-radius:8px;
    font-size:15px;
    transition:.25s;

}

.tmn-search:focus{

    border-color:#2563EB;
    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.tmn-search:hover{

    border-color:#9CA3AF;

}

/* ===============================
   Layout
================================== */

.tmn-layout{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:30px;
    align-items:start;
}

/* ===============================
   Sidebar
================================== */

.tmn-sidebar{
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:14px;
    padding:25px;
    position:sticky;
    top:20px;
    box-shadow:0 8px 30px rgba(0,0,0,.05);
}

.tmn-sidebar h3{
    margin:20px 0 15px;
    font-size:18px;
}

.tmn-sidebar h3:first-child{
    margin-top:0;
}

.tmn-sidebar label{
    display:flex;
    align-items:center;
    gap:8px;
    margin:12px 0;
    cursor:pointer;
    font-size:15px;
}

.tmn-sidebar input[type="checkbox"]{
    cursor:pointer;
}

.tmn-sidebar hr{
    border:0;
    border-top:1px solid #eee;
    margin:22px 0;
}

/* ===============================
   Products
================================== */

.tmn-products{
    width:100%;
}

.tmn-products-grid{
    display:none;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
    opacity:1;
    transition:opacity .3s ease;
}

.tmn-products-grid.loading{
    opacity:0;
}

/* Desktop */

@media (min-width:1200px){

    .tmn-products-grid{
        grid-template-columns:repeat(5,1fr);
    }

}

/* ===============================
   Mobile Toolbar
================================== */

.tmn-mobile-toolbar{
    display:none;
}

.tmn-filter-btn{
    background:#ff9800;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:11px 16px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}

#tmn-sort-mobile{
    padding:12px 16px;
    border:1px solid #ddd;
    border-radius:10px;
    background:#fff;
    font-size:15px;
}

/* ===============================
   Overlay
================================== */

.tmn-overlay{
    display:none;
}

.tmn-close-sidebar{
    display:none;
}

/* ==========================================================
   Part 2 - Cards, Content, Price & Pagination
========================================================== */

/* ===============================
   Card
================================== */

.tmn-card{
    display:flex;
    flex-direction:column;
    height:100%;
    background:#fff;
    border:1px solid #ececec;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:transform .3s ease, box-shadow .3s ease;
}

.tmn-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.tmn-card:hover .tmn-image img{
    transform:scale(1.05);
}

/* ===============================
   Image
================================== */

.tmn-image{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:160px;
    padding:20px;
    background:#fafafa;
    overflow:hidden;
}

.tmn-image img{
    display:block;
    max-width:100%;
    max-height:130px;
    object-fit:contain;
    width:auto;
    height:auto;
    transition:transform .3s ease;
}

/* ===============================
   Discount Badge
================================== */

.tmn-discount-badge{
    position:absolute;
    top:15px;
    right:15px;
    padding:7px 13px;
    border-radius:30px;
    font-size:13px;
    font-weight:700;
    color:#fff;
    background:#e53935;
    box-shadow:0 5px 12px rgba(0,0,0,.18);
    z-index:5;
}

.tmn-discount-badge.amazon{
    background:#ff9900;
    color:#111;
}

.tmn-discount-badge.flipkart{
    background:#2874f0;
    color:#fff;
}

/* ===============================
   Content
================================== */

.tmn-content{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:16px;
}

.tmn-content h2{
    margin:14px 0;
    min-height:58px;
    font-size:16px;
    font-weight:700;
    line-height:1.4;
    color:#1f2937;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* ===============================
   Store Badge
================================== */

.tmn-store-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    width:max-content;
    padding:8px 14px;
    margin-bottom:18px;
    border-radius:30px;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
}

.tmn-store-badge.amazon{
    background:#fff0d8;
    color:#ff6f00;
}

.tmn-store-badge.flipkart{
    background:#e8f2ff;
    color:#1565c0;
}

/* ===============================
   Price
================================== */

.tmn-price{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    margin:16px 0 20px;
}

.tmn-price strong{
    font-size:24px;
    font-weight:800;
    color:#111;
    line-height:1;
}

.tmn-price del{
    color:#999;
    font-size:15px;
    text-decoration:line-through;
    white-space:nowrap;
}

/* ===============================
   Button
================================== */

.tmn-button{
    display:block;
    margin-top:auto;
    padding:12px;
    border-radius:12px;
    background:#ff9800;
    color:#fff;
    text-align:center;
    text-decoration:none;
    font-size:15px;
    font-weight:700;
    transition:all .25s ease;
}

.tmn-button:hover{
    background:#f57c00;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(245,124,0,.35);
}

/* ===============================
   No Results
================================== */

#tmn-no-results{
    display:none;
    grid-column:1/-1;
    padding:60px 20px;
    text-align:center;
    background:#fff;
    border:1px solid #eee;
    border-radius:16px;
}

.tmn-no-results-icon{

    font-size:64px;

    margin-bottom:15px;

}

#tmn-no-results h3{
    margin-bottom:10px 0;
    font-size:28px;
    color:#222;
}

#tmn-no-results p{
    color:#666;
    font-size:16px;

    line-height:1.6;
}

/* ===============================
   Pagination
================================== */

.navigation.pagination{
    display:flex;
    justify-content:center;
    margin-top:40px;
}

.navigation.pagination .nav-links{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

.navigation.pagination .page-numbers{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:48px;
    height:48px;
    padding:0 18px;
    border:1px solid #ddd;
    border-radius:10px;
    background:#fff;
    color:#222;
    text-decoration:none;
    font-weight:600;
}

.navigation.pagination .current{
    background:#ff9800;
    border-color:#ff9800;
    color:#fff;
}

.navigation.pagination .prev,
.navigation.pagination .next{
    width:auto;
}

/* ==========================================================
   Part 3 - Responsive, Mobile Filter Drawer & Sort
========================================================== */


/* ===============================
   Desktop (993px and above)
================================== */

@media (min-width:993px){

    .tmn-mobile-toolbar{
        display:none !important;
    }

    .tmn-sort{
        display:flex !important;
    }

    .tmn-layout{
        display:grid;
        grid-template-columns:280px 1fr;
    }

}


/* ===============================
   Tablet + Mobile (992px and below)
================================== */

@media (max-width:992px){

    /* Layout */

    .tmn-layout{
        display:block;
    }


    /* Products */

    .tmn-products{
        width:100%;
    }


    .tmn-products-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }


    /* Hide Desktop Sort */

    .tmn-sort{
        display:none !important;
    }


    /* Show Mobile Toolbar */

    .tmn-mobile-toolbar{
        display:flex !important;
        width:100%;
        align-items:center;
        justify-content:space-between;
        gap:12px;
    }


    #tmn-sort-mobile{
        flex:1;
        max-width:180px;
    }


    /* Sidebar Drawer */

    .tmn-sidebar{

        position:fixed;
        top:0;
        left:-340px;

        width:300px;
        height:100vh;

        overflow-y:auto;

        z-index:99999;

        border-radius:0;

        transition:left .3s ease;

        margin:0;

    }


    .tmn-sidebar.active{

        left:0;

    }


    /* Close Button */

    .tmn-close-sidebar{

        display:block;

        position:absolute;

        right:15px;

        top:15px;

        border:none;

        background:none;

        font-size:28px;

        cursor:pointer;

    }


    /* Overlay */

    .tmn-overlay{

        display:none;

        position:fixed;

        inset:0;

        background:rgba(0,0,0,.45);

        z-index:99998;

    }


    .tmn-overlay.active{

        display:block;

    }


    /* Header */

    .tmn-title{

        font-size:34px;

        margin-bottom:8px;

    }


    .tmn-results{

        margin-bottom:18px;

    }


    .tmn-topbar{

        margin-bottom:20px;

    }

}



/* ===============================
   Mobile
================================== */

@media (max-width:767px){

    .tmn-container{

        width:94%;

    }


    .tmn-products-grid{

        grid-template-columns:repeat(2,1fr);

        gap:10px;

    }


    .tmn-image{

        height:130px;

        padding:15px;

    }


    .tmn-image img{

        max-height:100px;

    }


    .tmn-content{

        padding:12px;

    }


    .tmn-content h2{

        font-size:14px;

        min-height:50px;

    }


    .tmn-price strong{

        font-size:20px;

    }


    .tmn-button{

        font-size:14px;

        padding:10px;

    }

}



/* ===============================
   Small Mobile
================================== */

@media (max-width:480px){

    .tmn-filter-btn{

        padding:10px 14px;

    }


    #tmn-sort-mobile{

        max-width:160px;

    }

}

/* ==========================================================
   Part 4 - Final Cleanup & Large Screen Support
========================================================== */


/* ===============================
   Large Desktop / 4K
================================== */

@media (min-width:2200px){

    .tmn-container{
        max-width:2100px;
    }
}



/* ===============================
   Card Equal Height Fix
================================== */

.tmn-card{

    min-width:0;

}


.tmn-content{

    min-height:0;

}

/* ===============================
   Checkbox Alignment
================================== */

.tmn-sidebar input[type="checkbox"]{

    margin:0;

}



/* ===============================
   Topbar Theme Conflict Fix
================================== */

.tmn-topbar,
.tmn-topbar *{

    float:none !important;

}



/* ===============================
   Select Appearance Fix
================================== */

.tmn-sort select,
#tmn-sort-mobile{

    appearance:auto;

}



/* ===============================
   Button Link Fix
================================== */

.tmn-button,
.tmn-button:hover{

    text-decoration:none;

}



/* ===============================
   Pagination Mobile Fix
================================== */

@media (max-width:767px){

    .navigation.pagination .page-numbers{

        min-width:40px;

        height:40px;

        padding:0 12px;

    }

}



/* ===============================
   Remove Extra Theme Margins
================================== */

.tmn-page-header h1,
.tmn-page-header p{

    margin-left:0;

    margin-right:0;

}



/* ===============================
   Accessibility
================================== */

.tmn-button:focus,
.tmn-filter-btn:focus,
.tmn-sort select:focus,
#tmn-sort-mobile:focus{

    outline:none;

}

/* =================================
   Desktop Sort Right Alignment
================================= */

@media (min-width:993px){

    .tmn-topbar{
        display:flex !important;
        justify-content:space-between !important;
        align-items:center !important;
        width:100%;
    }

    .tmn-results{
        margin-left:30px !important;
        margin-top:0 !important;
        margin-bottom:-10px !important;
    }

    .tmn-sort{
        display:flex !important;
        margin-left:auto !important;
    }

}

/* ===============================
Mobile Card Optimization
=============================== */

@media (max-width:992px){

    .tmn-card{
        border-radius:12px;
    }

    .tmn-content{
        padding:12px;
    }
}

/* ===============================
   Sidebar See More / Less
================================ */

.tmn-hidden-filter.tmn-hide{
    display:none;
}

.tmn-see-more{

    background:none;
    border:none;
    color:#ff9800;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    padding:8px 0;

}

.tmn-see-more:hover{
    color:#f57c00;
}

/* See More / See Less */

.tmn-hide{
    display:none !important;
}


/* ===============================
   Skeleton Loader
================================ */

.tmn-skeleton-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;

}


@media (min-width:1200px){

    .tmn-skeleton-grid{
        grid-template-columns:repeat(5,1fr);
    }

}

#tmn-skeleton{
    display:none;
}


.tmn-skeleton-card{

    background:#fff;
    border:1px solid #eee;
    border-radius:16px;
    padding:15px;
    height:370px;

}


.tmn-skeleton-image,
.tmn-skeleton-line{

    background:linear-gradient(
        90deg,
        #f2f2f2 25%,
        #e8e8e8 37%,
        #f2f2f2 63%
    );

    background-size:400% 100%;
    animation:tmnSkeleton 1.2s infinite;
}


.tmn-skeleton-image{

    height:160px;
    border-radius:12px;

}


.tmn-skeleton-line{

    height:16px;
    border-radius:8px;
    margin-top:18px;

}


.tmn-skeleton-line.title{

    width:90%;

}


.tmn-skeleton-line.price{

    width:45%;

}


.tmn-skeleton-line.button{

    width:100%;
    height:40px;
    margin-top:45px;

}


@keyframes tmnSkeleton{

    0%{
        background-position:100% 0;
    }

    100%{
        background-position:-100% 0;
    }

}