/*
=========================================================
    ООО "ИМПОРТКОМ"
    Версия: 1.0
=========================================================
*/

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

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

html{
    scroll-behavior:smooth;
}

body{
    min-width:320px;
    background:#f5f7fa;
    color:#1c1c1c;
    font-family:"Segoe UI",Tahoma,Arial,sans-serif;
    font-size:16px;
    line-height:1.6;
}

img{
    max-width:100%;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
    transition:.25s;
}

ul{
    list-style:none;
}

button,
input,
textarea,
select{
    font:inherit;
    outline:none;
}

button{
    cursor:pointer;
    border:none;
}

section{
    padding:70px 0;
}

/* =====================================================
   VARIABLES
===================================================== */

:root{

    --primary:#0d2b45;
    --secondary:#f7941d;

    --white:#ffffff;
    --dark:#1c1c1c;
    --gray:#777777;
    --light:#f5f7fa;

    --border:#e5e5e5;

    --shadow:
        0 5px 20px rgba(0,0,0,.08);

    --radius:8px;

    --transition:.3s;

}

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

.container{

    width:100%;
    max-width:1300px;

    margin:0 auto;

    padding:0 15px;

}

/* =====================================================
   TYPOGRAPHY
===================================================== */

h1,h2,h3,h4,h5,h6{

    font-weight:700;

    color:var(--primary);

    line-height:1.2;

    margin-bottom:20px;

}

h1{

    font-size:48px;

}

h2{

    font-size:36px;

}

h3{

    font-size:26px;

}

p{

    margin-bottom:18px;

    color:#555;

}

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

.header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    background:#ffffff;

    box-shadow:0 2px 12px rgba(0,0,0,.08);

    z-index:999;

}

.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:80px;

}

.logo{

    font-size:28px;

    font-weight:700;

    color:var(--primary);

    letter-spacing:1px;

}

.logo span{

    color:var(--secondary);

}

/* =====================================================
   MENU
===================================================== */

.navigation ul{

    display:flex;

    align-items:center;

    gap:35px;

}

.navigation a{

    position:relative;

    color:var(--primary);

    font-weight:600;

}

.navigation a:hover{

    color:var(--secondary);

}

.navigation a.active{

    color:var(--secondary);

}

.navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:var(--transition);

}

.navigation a:hover::after{

    width:100%;

}

.navigation a.active::after{

    width:100%;

}

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

.mobile-menu-button{

    display:none;

    width:45px;

    height:45px;

    border-radius:6px;

    background:var(--primary);

    color:#fff;

    font-size:22px;

}

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

main{

    min-height:70vh;

}

/* =====================================================
   BUTTONS
===================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:var(--radius);

    transition:var(--transition);

    font-weight:600;

}

.btn-primary{

    background:var(--secondary);

    color:#fff;

}

.btn-primary:hover{

    background:#db8209;

}

.btn-outline{

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

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

.card{

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    overflow:hidden;

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-6px);

}

/* =====================================================
   FOOTER
===================================================== */

.footer{

    background:var(--primary);

    color:#fff;

    padding:60px 0 30px;

}

.footer-grid{

    display:grid;

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

    gap:40px;

}

.footer h3{

    color:#fff;

}

.footer p{

    color:#d8d8d8;

}

.footer a{

    color:#d8d8d8;

}

.footer a:hover{

    color:var(--secondary);

}

.footer li{

    margin-bottom:10px;

}

.copyright{

    margin-top:50px;

    border-top:1px solid rgba(255,255,255,.15);

    padding-top:25px;

    text-align:center;

    color:#cccccc;

    font-size:14px;

}

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

.fade{

    opacity:0;

    transform:translateY(25px);

    transition:.6s;

}

.fade.show{

    opacity:1;

    transform:none;

}

/* =====================================================
   ADAPTIVE
===================================================== */

@media(max-width:992px){

    .navigation{

        display:none;

    }

    .mobile-menu-button{

        display:block;

    }

    h1{

        font-size:38px;

    }

    h2{

        font-size:30px;

    }

    .footer-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    section{

        padding:50px 0;

    }

    h1{

        font-size:30px;

    }

    h2{

        font-size:24px;

    }

}

/* =====================================================
   HERO
===================================================== */

.hero{

    position:relative;

    display:flex;

    align-items:center;

    min-height:650px;

    color:#fff;

    background:
        linear-gradient(rgba(13,43,69,.82),rgba(13,43,69,.82)),
        url("../img/hero.jpg") center center/cover no-repeat;

}

.hero-content{

    max-width:700px;

}

.hero h1{

    color:#fff;

    font-size:56px;

    margin-bottom:25px;

}

.hero p{

    color:#f0f0f0;

    font-size:20px;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

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

.section-title{

    text-align:center;

    margin-bottom:15px;

}

.section-description{

    max-width:750px;

    margin:0 auto 60px;

    text-align:center;

    color:#666;

}

/* =====================================================
   ABOUT
===================================================== */

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.about-image img{

    border-radius:10px;

    box-shadow:var(--shadow);

}

.about-content ul{

    margin-top:25px;

}

.about-content li{

    margin-bottom:15px;

    padding-left:30px;

    position:relative;

}

.about-content li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--secondary);

    font-weight:bold;

}

/* =====================================================
   ADVANTAGES
===================================================== */

.advantages{

    background:#fff;

}

.advantages-grid{

    display:grid;

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

    gap:30px;

}

.advantage{

    background:#fff;

    border-radius:10px;

    padding:35px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.3s;

}

.advantage:hover{

    transform:translateY(-8px);

}

.advantage-icon{

    width:80px;

    height:80px;

    margin:0 auto 20px;

    border-radius:50%;

    background:rgba(247,148,29,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:var(--secondary);

}

.advantage h3{

    margin-bottom:15px;

}

/* =====================================================
   BRANDS
===================================================== */

.brands{

    background:#f8f9fb;

}

.brand-grid{

    display:grid;

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

    gap:25px;

}

.brand-item{

    background:#fff;

    border-radius:10px;

    height:140px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:var(--shadow);

    transition:.3s;

}

.brand-item:hover{

    transform:translateY(-6px);

}

.brand-item img{

    max-height:70px;

    max-width:120px;

}

/* =====================================================
   SEARCH
===================================================== */

.search-box{

    display:flex;

    gap:15px;

    margin-bottom:45px;

}

.search-box input{

    flex:1;

    border:1px solid var(--border);

    border-radius:8px;

    padding:15px 18px;

    background:#fff;

}

.search-box input:focus{

    border-color:var(--secondary);

}

.search-box button{

    width:170px;

    background:var(--secondary);

    color:#fff;

    border-radius:8px;

    transition:.3s;

}

.search-box button:hover{

    background:#d67e0c;

}

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

.filters{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:40px;

}

.filters select{

    min-width:220px;

    padding:14px 16px;

    border-radius:8px;

    border:1px solid var(--border);

    background:#fff;

}

/* =====================================================
   CATEGORY
===================================================== */

.category-grid{

    display:grid;

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

    gap:30px;

}

/* =====================================================
   PRODUCT CARD
===================================================== */

.product-card{

    background:#fff;

    border-radius:10px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.3s;

}

.product-card:hover{

    transform:translateY(-6px);

}

.product-image{

    height:240px;

    background:#fafafa;

    display:flex;

    align-items:center;

    justify-content:center;

}


.product-body{

    padding:20px;

}

.product-brand{

    color:var(--secondary);

    font-size:14px;

    font-weight:600;

    margin-bottom:8px;

}

.product-title{

    font-size:18px;

    color:var(--primary);

    font-weight:700;

    margin-bottom:12px;

}

.product-code{

    color:#888;

    font-size:14px;

    margin-bottom:18px;

}

.product-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:20px;

}

.product-status{

    color:#2c9d4d;

    font-weight:600;

}

/* =====================================================
   CTA
===================================================== */

.cta{

    background:var(--primary);

    color:#fff;

    text-align:center;

}

.cta h2{

    color:#fff;

}

.cta p{

    color:#e8e8e8;

    margin-bottom:35px;

}

/* =====================================================
   CONTACT
===================================================== */

.contacts-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

}

.contact-card{

    background:#fff;

    border-radius:10px;

    padding:35px;

    box-shadow:var(--shadow);

}

.contact-item{

    margin-bottom:25px;

}

.contact-item h4{

    margin-bottom:8px;

}

/* =====================================================
   FORM
===================================================== */

.form-group{

    margin-bottom:20px;

}

.form-group input,
.form-group textarea{

    width:100%;

    padding:14px 16px;

    border-radius:8px;

    border:1px solid var(--border);

}

.form-group textarea{

    min-height:170px;

    resize:vertical;

}

.form-group input:focus,
.form-group textarea:focus{

    border-color:var(--secondary);

}

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

@media(max-width:1200px){

    .catalog-grid{

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

    }

    .brand-grid{

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

    }

}

@media(max-width:992px){

    .hero{

        min-height:550px;

    }

    .hero h1{

        font-size:42px;

    }

    .about-grid{

        grid-template-columns:1fr;

    }

    .advantages-grid{

        grid-template-columns:1fr 1fr;

    }

    .catalog-grid{

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

    }

    .brand-grid{

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

    }

    .contacts-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .hero{

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .advantages-grid{

        grid-template-columns:1fr;

    }

    .catalog-grid{

        grid-template-columns:1fr;

    }

    .brand-grid{

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

    }

    .search-box{

        flex-direction:column;

    }

    .search-box button{

        width:100%;

    }

    .filters{

        flex-direction:column;

    }

    .filters select{

        width:100%;

    }

}

/* =====================================================
   MOBILE MENU
===================================================== */

@media(max-width:992px){

    .navigation{

        position:absolute;

        top:80px;

        left:0;

        width:100%;

        background:#fff;

        box-shadow:0 10px 20px rgba(0,0,0,.08);

        display:none;

    }

    .navigation.mobile-open{

        display:block;

        animation:menuOpen .3s;

    }

    .navigation ul{

        flex-direction:column;

        gap:0;

    }

    .navigation li{

        border-bottom:1px solid #ececec;

    }

    .navigation a{

        display:block;

        padding:18px 20px;

    }

}

@keyframes menuOpen{

    from{

        opacity:0;

        transform:translateY(-15px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

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

.page-header{

    background:linear-gradient(rgba(13,43,69,.92),rgba(13,43,69,.92)),
    url("../img/page-header.jpg") center/cover;

    color:#fff;

    padding:70px 0;

    text-align:center;

}

.page-header h1{

    color:#fff;

    margin-bottom:15px;

}

.page-header p{

    color:#e4e4e4;

    max-width:850px;

    margin:auto;

}


/* =====================================================
   CATALOG LAYOUT
===================================================== */

.catalog{

    background:#f5f7fa;

}

.catalog-grid{

    display:grid;

    grid-template-columns:290px 1fr;

    gap:35px;

    align-items:start;

}

.catalog-sidebar{

    background:#fff;

    border-radius:10px;

    box-shadow:var(--shadow);

    padding:25px;

    position:sticky;

    top:110px;

}

.catalog-sidebar form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.catalog-sidebar input,
.catalog-sidebar select{

    width:100%;

    padding:14px 15px;

    border:1px solid var(--border);

    border-radius:8px;

    background:#fff;

}

.catalog-sidebar input:focus,
.catalog-sidebar select:focus{

    border-color:var(--secondary);

}

.catalog-sidebar button{

    width:100%;

}

.catalog-content{

    width:100%;

}


/* =====================================================
   PRODUCTS GRID
===================================================== */

.products-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

    gap:28px;

}


/* =====================================================
   PRODUCT CARD
===================================================== */

.product-card{

    display:flex;

    flex-direction:column;

    background:#fff;

    border-radius:10px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.3s;

}

.product-card:hover{

    transform:translateY(-6px);

}

.product-image{

    height:230px;

    background:#fafafa;

    display:flex;

    align-items:center;

    justify-content:center;

    border-bottom:1px solid #eee;

}

.product-image img{

    max-width:100%;

    /*max-height:296px;*/

}

.product-body{

    padding:22px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.product-body h3{

    font-size:20px;

    margin-bottom:12px;

}

.product-body .btn{

    margin-top:auto;

}

.product-oem{

    color:var(--secondary);

    font-weight:700;

    margin-bottom:10px;

    font-size:15px;

}

.no-image{

    color:#888;

    font-size:14px;

}


/* =====================================================
   STOCK
===================================================== */

.stock{

    display:inline-block;

    padding:6px 14px;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

    margin:15px 0;

}

.in-stock{

    background:#d9f6df;

    color:#14843b;

}

.out-stock{

    background:#ffe4e4;

    color:#b72828;

}


/* =====================================================
   PRODUCT PAGE
===================================================== */

.product-page{

    background:#fff;

}

.product-grid{

    display:grid;

    grid-template-columns:430px 1fr;

    gap:50px;

    margin-bottom:50px;

}

.main-image{

    background:#fff;

    border-radius:10px;

    box-shadow:var(--shadow);

    padding:20px;

}

.gallery-thumbs{

    display:flex;

    gap:12px;

    margin-top:18px;

    flex-wrap:wrap;

}

.gallery-thumbs img{

    width:85px;

    height:85px;

    object-fit:cover;

    border-radius:8px;

    border:1px solid #ddd;

    cursor:pointer;

}

.product-section{

    margin-top:50px;

}

.product-table{

    width:100%;

    border-collapse:collapse;

}

.product-table th{

    width:220px;

    background:#f7f7f7;

    text-align:left;

}

.product-table th,
.product-table td{

    padding:15px;

    border:1px solid #ececec;

}


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

.table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    box-shadow:var(--shadow);

}

.table th{

    background:var(--primary);

    color:#fff;

}

.table th,
.table td{

    padding:14px;

    border:1px solid #e5e5e5;

}


/* =====================================================
   TAGS
===================================================== */

.tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.tag{

    padding:8px 16px;

    border-radius:25px;

    background:var(--primary);

    color:#fff;

    font-size:14px;

}


/* =====================================================
   DOCUMENTS
===================================================== */

.documents{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.documents a{

    display:block;

    background:#fff;

    padding:14px 18px;

    border-radius:8px;

    box-shadow:var(--shadow);

}

.documents a:hover{

    color:var(--secondary);

}


/* =====================================================
   PAGINATION
===================================================== */

.pagination{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:45px;

    flex-wrap:wrap;

}

.pagination a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    background:#fff;

    box-shadow:var(--shadow);

}

.pagination a.active{

    background:var(--secondary);

    color:#fff;

}


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

@media(max-width:992px){

    .catalog-grid{

        grid-template-columns:1fr;

    }

    .catalog-sidebar{

        position:static;

    }

    .product-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .products-grid{

        grid-template-columns:1fr;

    }

    .product-table th{

        width:140px;

    }

}

/* ===== Brand page ===== */

.stats-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:40px;

}

.stat-card{

    background:#fff;
    border-radius:10px;
    box-shadow:var(--shadow);
    padding:30px;
    text-align:center;

}

.stat-card h3{

    color:var(--secondary);
    font-size:42px;
    margin-bottom:10px;

}

.stat-card p{

    margin:0;
    color:#666;

}

/* =====================================================
   PRODUCT GALLERY
===================================================== */

.product-gallery{

    display:flex;

    flex-direction:column;

}

.main-image{

    background:#fff;

    border-radius:10px;

    box-shadow:var(--shadow);

    padding:20px;

    text-align:center;

}

.main-image img{

    width:100%;

    max-height:420px;

    object-fit:contain;

    transition:.25s;

}

.gallery-thumbs{

    display:flex;

    gap:12px;

    margin-top:18px;

    flex-wrap:wrap;

}

.gallery-thumb{

    width:85px;

    height:85px;

    object-fit:contain;

    border-radius:8px;

    border:2px solid transparent;

    cursor:pointer;

    background:#fff;

    padding:6px;

    transition:.25s;

    box-shadow:var(--shadow);

}

.gallery-thumb:hover{

    transform:translateY(-3px);

}

.gallery-thumb.active{

    border-color:var(--secondary);

}

/* =====================================================
   BREADCRUMBS
===================================================== */

.breadcrumbs{

    background:#f7f8fa;

    border-bottom:1px solid #e8e8e8;

}

.breadcrumbs .container{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:10px;

    padding:14px 0;

    font-size:14px;

}

.breadcrumbs a{

    color:var(--secondary);

    transition:.2s;

}

.breadcrumbs a:hover{

    color:var(--primary);

}

.breadcrumbs span{

    color:#777;

}