/*==================================================
KOTHARI CATALOG V2
Modern Architect Catalogue
PART 1
==================================================*/

/*=========================
RESET
=========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:#F5F6F8;

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    color:#2D2D2D;

}

/*=========================
APP CONTAINER
=========================*/

.kc-app{

    max-width:1700px;

    margin:40px auto;

    padding:0 25px;

}

/*=========================
TOP BAR
=========================*/

.kc-topbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:30px;

}

.kc-search{

    flex:1;

    height:58px;

    padding:0 22px;

    border:none;

    border-radius:16px;

    background:#FFFFFF;

    font-size:16px;

    outline:none;

    box-shadow:
    0 10px 25px rgba(0,0,0,.05);

}

.kc-search:focus{

    box-shadow:

    0 0 0 3px rgba(46,125,50,.18),

    0 10px 25px rgba(0,0,0,.06);

}

.kc-filter-btn{

    height:58px;

    padding:0 28px;

    border:none;

    border-radius:16px;

    background:#2E7D32;

    color:white;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.kc-filter-btn:hover{

    background:#256628;

}

/*=========================
MAIN LAYOUT
=========================*/

.kc-main{

    display:grid;

    grid-template-columns:

    260px

    1fr

    390px;

    gap:28px;

}

/*=========================
SIDEBAR
=========================*/

.kc-sidebar{

    background:white;

    border-radius:24px;

    padding:28px;

    box-shadow:

    0 10px 25px rgba(0,0,0,.06);

}

.kc-sidebar h3{

    font-size:20px;

    margin-bottom:18px;

}

.kc-sidebar p{

    color:#888;

    line-height:1.7;

}

/*=========================
GRID AREA
=========================*/

.kc-grid-area{

    background:white;

    border-radius:24px;

    padding:28px;

    box-shadow:

    0 10px 25px rgba(0,0,0,.06);

}

.kc-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fill,minmax(215px,1fr));

    gap:24px;

}

/*=========================
PREMIUM CARDS
=========================*/

.kc-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    cursor:pointer;

    transition:.30s;

    background:white;

    box-shadow:

    0 8px 18px rgba(0,0,0,.08);

}

.kc-card:hover{

    transform:

    translateY(-8px);

    box-shadow:

    0 20px 45px rgba(0,0,0,.18);

}

.kc-card.active{

    outline:4px solid #2E7D32;

    transform:

    translateY(-5px);

}

/*=========================
IMAGE
=========================*/

.kc-card img{

    width:100%;

    height:255px;

    display:block;

    object-fit:cover;

}

/*=========================
BOTTOM GRADIENT
=========================*/

.kc-card::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:90px;

    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.78)

    );

    opacity:0;

    transition:.30s;

}

.kc-card:hover::after{

    opacity:1;

}

/*=========================
DESIGN CODE
=========================*/

.kc-card-title{

    position:absolute;

    left:20px;

    bottom:18px;

    z-index:5;

    color:white;

    font-size:15px;

    font-weight:600;

    opacity:0;

    transition:.30s;

}

.kc-card:hover .kc-card-title{

    opacity:1;

}

/*=========================
GREEN CORNER INDICATOR
=========================*/

.kc-card.active::before{

    content:"✓";

    position:absolute;

    top:16px;

    right:16px;

    width:32px;

    height:32px;

    border-radius:50%;

    background:#2E7D32;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

    z-index:10;

}
/*==================================================
PART 2
DETAIL PANEL + RESPONSIVE
==================================================*/

/*=========================
DETAIL PANEL
=========================*/

.kc-details{

    position:sticky;

    top:30px;

    align-self:start;

    background:#FFFFFF;

    border-radius:24px;

    padding:28px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.06);

}

/*=========================
DETAIL IMAGE
=========================*/

#kc-detail-image{

    width:100%;

    border-radius:20px;

    display:block;

    margin-bottom:24px;

    background:#ECECEC;

    min-height:320px;

    object-fit:cover;

}

/*=========================
DESIGN CODE
=========================*/

#kc-detail-code{

    font-size:30px;

    font-weight:700;

    margin-bottom:24px;

    color:#222;

    letter-spacing:.5px;

}

/*=========================
DETAIL TABLE
=========================*/

.kc-detail-table{

    width:100%;

    border-collapse:collapse;

}

.kc-detail-table tr{

    border-bottom:1px solid #EFEFEF;

}

.kc-detail-table th{

    width:120px;

    padding:18px 0;

    text-align:left;

    font-size:14px;

    color:#888;

    font-weight:600;

}

.kc-detail-table td{

    padding:18px 0;

    text-align:left;

    font-size:15px;

    font-weight:600;

    color:#222;

}

/*=========================
SMOOTH IMAGE CHANGE
=========================*/

#kc-detail-image{

    transition:.35s;

}

#kc-detail-code,
#kc-detail-category,
#kc-detail-finish,
#kc-detail-size,
#kc-detail-mrp{

    transition:.25s;

}

/*=========================
SCROLLBAR
=========================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#F2F2F2;

}

::-webkit-scrollbar-thumb{

    background:#CCCCCC;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#A9A9A9;

}

/*=========================
TABLE HOVER
=========================*/

.kc-detail-table tr:hover{

    background:#FAFAFA;

}

/*=========================
CARD ANIMATION
=========================*/

.kc-card{

    animation:fadeUp .35s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:1400px){

.kc-main{

grid-template-columns:

220px

1fr

340px;

}

}

@media(max-width:1100px){

.kc-main{

grid-template-columns:

1fr;

}

.kc-sidebar{

order:2;

}

.kc-grid-area{

order:1;

}

.kc-details{

order:3;

position:relative;

top:auto;

}

}

@media(max-width:768px){

.kc-topbar{

flex-direction:column;

align-items:stretch;

}

.kc-filter-btn{

width:100%;

}

.kc-grid{

grid-template-columns:

repeat(auto-fill,minmax(170px,1fr));

gap:18px;

}

.kc-card img{

height:200px;

}

#kc-detail-code{

font-size:24px;

}

}

/*=========================
EMPTY STATE
=========================*/

.kc-empty{

display:flex;

justify-content:center;

align-items:center;

height:300px;

color:#999;

font-size:18px;

}
/*==================================================
PART 3
PREMIUM POLISH
==================================================*/

/*=========================
APP BACKGROUND
=========================*/

.kc-app{

    animation:fadeIn .5s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/*=========================
GRID SECTION TITLE
=========================*/

.kc-grid-area h2{

    font-size:24px;

    margin-bottom:22px;

    color:#222;

    font-weight:700;

}

/*=========================
SEARCH ICON SPACING
=========================*/

.kc-search{

    transition:.25s;

}

.kc-search:hover{

    box-shadow:

    0 15px 30px rgba(0,0,0,.08);

}

/*=========================
BUTTON
=========================*/

.kc-filter-btn{

    transition:.25s;

}

.kc-filter-btn:hover{

    transform:translateY(-2px);

}

/*=========================
CARD SHADOW
=========================*/

.kc-card{

    border:2px solid transparent;

}

.kc-card.active{

    border-color:#2E7D32;

}

/*=========================
DETAIL IMAGE SHADOW
=========================*/

#kc-detail-image{

    box-shadow:

    0 15px 35px rgba(0,0,0,.12);

}

/*=========================
DETAIL TABLE
=========================*/

.kc-detail-table td{

    transition:.25s;

}

.kc-detail-table tr:hover td{

    color:#2E7D32;

}

/*=========================
SIDEBAR
=========================*/

.kc-sidebar{

    min-height:700px;

}

/*=========================
DETAIL PANEL
=========================*/

.kc-details{

    min-height:700px;

}

/*=========================
GRID AREA
=========================*/

.kc-grid-area{

    min-height:700px;

}

/*=========================
PLACEHOLDER FILTERS
=========================*/

.kc-sidebar h4{

    margin-top:25px;

    margin-bottom:12px;

    font-size:15px;

    color:#333;

}

.kc-sidebar label{

    display:block;

    margin-bottom:10px;

    cursor:pointer;

    color:#666;

    font-size:14px;

}

/*=========================
SMOOTH SELECTION
=========================*/

.kc-card.active img{

    transform:scale(1.02);

}

.kc-card img{

    transition:.35s;

}

/*=========================
NO IMAGE STATE
=========================*/

#kc-detail-image[src=""]{

    display:none;

}

/*=========================
DETAIL CODE
=========================*/

#kc-detail-code{

    line-height:1.2;

}

/*=========================
BETTER SPACING
=========================*/

.kc-detail-table{

    margin-top:10px;

}

/*=========================
REMOVE TEXT SELECTION
=========================*/

.kc-card{

    user-select:none;

}

/*=========================
NICE TRANSITIONS
=========================*/

.kc-sidebar,
.kc-grid-area,
.kc-details{

    transition:.3s;

}

/*=========================
FUTURE FILTER PANEL
=========================*/

.kc-filter-group{

    margin-bottom:28px;

}

.kc-filter-group:last-child{

    margin-bottom:0;

}
/*==================================================
FILTER DRAWER
==================================================*/

.kc-filter-drawer{

    position:fixed;

    top:0;

    left:-360px;

    width:340px;

    height:100vh;

    background:#ffffff;

    box-shadow:10px 0 40px rgba(0,0,0,.18);

    z-index:9999;

    transition:.35s ease;

    padding:30px;

    overflow-y:auto;

}

.kc-filter-drawer.open{

    left:0;

}

.kc-filter-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

.kc-filter-overlay.show{

    opacity:1;

    visibility:visible;

}

/*==========================
HEADER
==========================*/

.kc-filter-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.kc-filter-header h2{

    font-size:24px;

    font-weight:700;

}

#kc-close-filters{

    border:none;

    background:none;

    font-size:26px;

    cursor:pointer;

    color:#555;

}

#kc-close-filters:hover{

    color:#2E7D32;

}

/*==========================
FILTER GROUP
==========================*/

.kc-filter-group{

    margin-bottom:35px;

}

.kc-filter-group h3{

    font-size:17px;

    margin-bottom:15px;

    color:#222;

}

.kc-filter-group label{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;

    cursor:pointer;

    font-size:15px;

    color:#444;

}

.kc-filter-group input{

    width:18px;

    height:18px;

    accent-color:#2E7D32;

}

/*==========================
CLEAR BUTTON
==========================*/

.kc-clear-btn{

    width:100%;

    margin-top:20px;

    padding:14px;

    border:none;

    border-radius:12px;

    background:#2E7D32;

    color:white;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.kc-clear-btn:hover{

    background:#256728;

}

/*==========================
SPEC CARDS
==========================*/

.kc-specs{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:25px;

}

.kc-spec{

    background:#F7F8FA;

    padding:18px;

    border-radius:14px;

}

.kc-spec span{

    display:block;

    font-size:13px;

    color:#777;

    margin-bottom:8px;

    text-transform:uppercase;

    letter-spacing:.6px;

}

.kc-spec strong{

    font-size:17px;

    color:#222;

}

/*==========================
DETAIL IMAGE
==========================*/

#kc-detail-image{

    width:100%;

    border-radius:18px;

    margin-bottom:25px;

    object-fit:cover;

    background:#EFEFEF;

}

/*==========================
DETAIL TITLE
==========================*/

#kc-detail-code{

    font-size:28px;

    margin-bottom:25px;

    font-weight:700;

}

/*==========================
SMALL SCREENS
==========================*/

@media(max-width:1000px){

.kc-content{

grid-template-columns:1fr;

}

.kc-details{

position:relative;

top:auto;

margin-top:35px;

}

}

@media(max-width:700px){

.kc-filter-drawer{

width:280px;

left:-300px;

}

}/*==================================================
FILTER DRAWER
==================================================*/

.kc-filter-drawer{

    position:fixed;

    top:0;

    left:-360px;

    width:340px;

    height:100vh;

    background:#ffffff;

    box-shadow:10px 0 40px rgba(0,0,0,.18);

    z-index:9999;

    transition:.35s ease;

    padding:30px;

    overflow-y:auto;

}

.kc-filter-drawer.open{

    left:0;

}

.kc-filter-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

.kc-filter-overlay.show{

    opacity:1;

    visibility:visible;

}

/*==========================
HEADER
==========================*/

.kc-filter-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.kc-filter-header h2{

    font-size:24px;

    font-weight:700;

}

#kc-close-filters{

    border:none;

    background:none;

    font-size:26px;

    cursor:pointer;

    color:#555;

}

#kc-close-filters:hover{

    color:#2E7D32;

}

/*==========================
FILTER GROUP
==========================*/

.kc-filter-group{

    margin-bottom:35px;

}

.kc-filter-group h3{

    font-size:17px;

    margin-bottom:15px;

    color:#222;

}

.kc-filter-group label{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;

    cursor:pointer;

    font-size:15px;

    color:#444;

}

.kc-filter-group input{

    width:18px;

    height:18px;

    accent-color:#2E7D32;

}

/*==========================
CLEAR BUTTON
==========================*/

.kc-clear-btn{

    width:100%;

    margin-top:20px;

    padding:14px;

    border:none;

    border-radius:12px;

    background:#2E7D32;

    color:white;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.kc-clear-btn:hover{

    background:#256728;

}

/*==========================
SPEC CARDS
==========================*/

.kc-specs{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:25px;

}

.kc-spec{

    background:#F7F8FA;

    padding:18px;

    border-radius:14px;

}

.kc-spec span{

    display:block;

    font-size:13px;

    color:#777;

    margin-bottom:8px;

    text-transform:uppercase;

    letter-spacing:.6px;

}

.kc-spec strong{

    font-size:17px;

    color:#222;

}

/*==========================
DETAIL IMAGE
==========================*/

#kc-detail-image{

    width:100%;

    border-radius:18px;

    margin-bottom:25px;

    object-fit:cover;

    background:#EFEFEF;

}

/*==========================
DETAIL TITLE
==========================*/

#kc-detail-code{

    font-size:28px;

    margin-bottom:25px;

    font-weight:700;

}

/*==========================
SMALL SCREENS
==========================*/

@media(max-width:1000px){

.kc-content{

grid-template-columns:1fr;

}

.kc-details{

position:relative;

top:auto;

margin-top:35px;

}

}

@media(max-width:700px){

.kc-filter-drawer{

width:280px;

left:-300px;

}

}
/*==================================================
LIGHTBOX
==================================================*/

.kc-lightbox{

    position:fixed !important;

    top:0 !important;

    left:0 !important;

    width:100vw !important;

    height:100vh !important;

    background:rgba(0,0,0,.92) !important;

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:999999999 !important;

}
.kc-lightbox.show{

    opacity:1;

    visibility:visible;

}

.kc-lightbox img{

    max-width:90vw;

    max-height:90vh;

    border-radius:14px;

    box-shadow:

    0 20px 60px rgba(0,0,0,.5);

}

#kc-lightbox-close{

    position:absolute;

    top:25px;

    right:35px;

    color:white;

    font-size:44px;

    cursor:pointer;

    user-select:none;

}

#kc-lightbox-close:hover{

    color:#2E7D32;

}

#kc-detail-image{

    cursor:zoom-in;

}
/*==================================================
FILTER DRAWER
==================================================*/

.kc-filter-drawer{

    position:fixed;

    top:0;

    left:-360px;

    width:340px;

    height:100vh;

    background:#ffffff;

    box-shadow:10px 0 40px rgba(0,0,0,.18);

    z-index:9999;

    transition:.35s ease;

    padding:30px;

    overflow-y:auto;

}

.kc-filter-drawer.open{

    left:0;

}

.kc-filter-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

.kc-filter-overlay.show{

    opacity:1;

    visibility:visible;

}

/*==========================
HEADER
==========================*/

.kc-filter-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.kc-filter-header h2{

    font-size:24px;

    font-weight:700;

}

#kc-close-filters{

    border:none;

    background:none;

    font-size:26px;

    cursor:pointer;

    color:#555;

}

#kc-close-filters:hover{

    color:#2E7D32;

}

/*==========================
FILTER GROUP
==========================*/

.kc-filter-group{

    margin-bottom:35px;

}

.kc-filter-group h3{

    font-size:17px;

    margin-bottom:15px;

    color:#222;

}

.kc-filter-group label{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;

    cursor:pointer;

    font-size:15px;

    color:#444;

}

.kc-filter-group input{

    width:18px;

    height:18px;

    accent-color:#2E7D32;

}

/*==========================
CLEAR BUTTON
==========================*/

.kc-clear-btn{

    width:100%;

    margin-top:20px;

    padding:14px;

    border:none;

    border-radius:12px;

    background:#2E7D32;

    color:white;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.kc-clear-btn:hover{

    background:#256728;

}

/*==========================
SPEC CARDS
==========================*/

.kc-specs{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:25px;

}

.kc-spec{

    background:#F7F8FA;

    padding:18px;

    border-radius:14px;

}

.kc-spec span{

    display:block;

    font-size:13px;

    color:#777;

    margin-bottom:8px;

    text-transform:uppercase;

    letter-spacing:.6px;

}

.kc-spec strong{

    font-size:17px;

    color:#222;

}

/*==========================
DETAIL IMAGE
==========================*/

#kc-detail-image{

    width:100%;

    border-radius:18px;

    margin-bottom:25px;

    object-fit:cover;

    background:#EFEFEF;

}

/*==========================
DETAIL TITLE
==========================*/

#kc-detail-code{

    font-size:28px;

    margin-bottom:25px;

    font-weight:700;

}

/*==========================
SMALL SCREENS
==========================*/

@media(max-width:1000px){

.kc-content{

grid-template-columns:1fr;

}

.kc-details{

position:relative;

top:auto;

margin-top:35px;

}

}

@media(max-width:700px){

.kc-filter-drawer{

width:280px;

left:-300px;

}

}
/*==================================================
LIGHTBOX
==================================================*/

.kc-lightbox{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:99999;

}

.kc-lightbox.show{

    opacity:1;

    visibility:visible;

}

.kc-lightbox img{

    max-width:90vw;

    max-height:90vh;

    border-radius:14px;

    box-shadow:

    0 20px 60px rgba(0,0,0,.5);

}

#kc-lightbox-close{

    position:absolute;

    top:25px;

    right:35px;

    color:white;

    font-size:44px;

    cursor:pointer;

    user-select:none;

}

#kc-lightbox-close:hover{

    color:#2E7D32;

}

#kc-detail-image{

    cursor:zoom-in;

}
/* ==========================================
   SINGLE LAMINATE PAGE
========================================== */

.kc-single-container{

    max-width:1400px;

    margin:60px auto;

    padding:0 40px;

    display:grid;

    grid-template-columns: 58% 42%;

    gap:60px;

    align-items:start;

}

.kc-single-image img{

    width:100%;

    display:block;

    border-radius:16px;

}

.kc-single-details{

    position:sticky;

    top:40px;

}

.kc-single-details h1{

    font-size:38px;

    margin-bottom:35px;

    font-weight:700;

}

.kc-details-table{

    width:100%;

    border-collapse:collapse;

}

.kc-details-table th{

    width:180px;

    padding:18px 0;

    text-align:left;

    font-weight:600;

    color:#777;

    border-bottom:1px solid #ececec;

}

.kc-details-table td{

    padding:18px 0;

    border-bottom:1px solid #ececec;

    font-weight:600;

    color:#222;

}