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

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


body {

    font-family:
    "Inter",
    "Arial",
    sans-serif;

    background:#f2f6fb;

    color:#18283d;

}




a {
    text-decoration:none;
    color:inherit;
}


button {

    border:none;
    cursor:pointer;

    font-family:inherit;

}




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


.header {


    height:72px;

    background:
    linear-gradient(
        90deg,
        #101d2c,
        #182b42
    );


    display:flex;

    align-items:center;

    padding:
    0 48px;


    color:white;

}




.logo {


    width:52px;

    height:52px;


    border-radius:9px;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:24px;


    border:1px solid #91c8ff;


    box-shadow:

    0 0 20px
    rgba(100,170,255,.8);


    margin-right:85px;


}




.menu {


    display:flex;

    gap:46px;

    height:100%;

    align-items:center;


    flex:1;


}



.menu a {


    color:#dce5ef;


    font-size:14px;


    height:100%;


    display:flex;

    align-items:center;


    position:relative;


}



.menu a.active {


    color:white;


    font-weight:600;


}



.menu a.active:after {


    content:"";


    position:absolute;


    bottom:19px;


    left:0;


    width:100%;


    height:2px;


    background:#8bc7ff;


}




.header-actions {


    display:flex;

    align-items:center;

    gap:28px;


}




.search {


    font-size:32px;

    font-weight:200;

}





.cart {


    position:relative;

    font-size:22px;


}



.cart small {


    position:absolute;


    right:-10px;

    top:-12px;


    background:#5ba9ff;


    width:20px;

    height:20px;


    border-radius:50%;


    display:flex;


    justify-content:center;

    align-items:center;


    font-size:11px;


}




.header-actions button {


    height:40px;


    padding:

    0 28px;


    background:transparent;


    color:white;


    border:

    1px solid #78baff;


    border-radius:7px;


}




/* ================================
   HERO
================================ */
.hero {

    height:360px;

    position:relative;
    overflow:hidden;

    display:flex;
    align-items:center;

    padding:0 48px;

    background:#eef3f8;
}


/* изображение отдельным слоем */

.hero-bg {

    position:absolute;

    inset:0;

    background-image:url("/uploads/back_gr.webp");

    background-size:cover;

    background-position:center right;

    z-index:1;

}



/* световой слой */


.hero-overlay {

    position:absolute;

    inset:0;

    z-index:2;

    background:
    linear-gradient(
        90deg,
		rgba(16, 29, 44, 0.9) 0%,
        rgba(16, 29, 44, 0.7) 40%,
        rgba(16, 29, 44, 0.3) 100%
    );

}


.hero:before {

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.18) 25%,
        transparent 25%
    );

    background-size:80px 80px;

    opacity:.25;

}


.hero-left,
.advantages {

    position:relative;

    z-index:3;
	


}





.hero-left {


    width:430px;


}



.breadcrumbs {


    font-size:12px;


    color:#94a3b8;


    margin-bottom:16px;


}

.hero h1 {

    font-size:48px;

    line-height:1.05;

    font-weight:900;

    letter-spacing:-2px;

    color:#ffffff;

}




.hero p {


    margin-top:12px;


    color:#e2e8f0;


    font-size:17px;


    line-height:23px;


}





.advantages {


    display:flex;


    margin-left:40px;


    gap:0;


}

.adv {
    width: 170px; /* Немного увеличим ширину для текста */
    height: 70px;
    padding-left: 25px;
    border-left: 1px solid rgba(255, 255, 255, 0.25); /* Светлая линия вместо темной */
}

.adv .icon {
    font-size: 25px;
    color: #8bc7ff; /* Яркий голубой цвет для иконок */
    margin-bottom: 8px;
}

.f-icon {
    font-size: 16px;
    color: #2576ca;
    font-weight: bold;
}


.adv p {
    font-size: 12px;
    line-height: 16px;
    color: #ffffff; /* Белый текст преимуществ */
    margin: 0;
}

.ral-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.ral-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    display: inline-block;
    flex-shrink: 0;
}

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


.catalog {


    display:flex;


    gap:28px;


    padding:

    32px 48px 50px;


}





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



.sidebar {


    width:280px;


    flex-shrink:0;


}



.categories {


    background:white;


    border-radius:14px;


    padding:24px;


    box-shadow:

    0 8px 25px

    rgba(26,48,78,.08);


}



.categories h3 {


    font-size:18px;


    margin-bottom:20px;


}



.categories ul {


    list-style:none;


}



.categories li {


    height:43px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    padding:

    0 14px;


    border-radius:8px;


    color:#60758c;


    font-size:14px;


    margin-bottom:6px;


}




.categories li.selected {


    background:#eaf3ff;


    color:#2165ad;


    font-weight:600;


}



.categories li span {


    font-size:20px;


}





.business-box {


    margin-top:22px;


    background:


    linear-gradient(
        145deg,
        #ffffff,
        #edf5ff
    );


    border-radius:14px;


    padding:24px;


}



.business-icon {


    width:42px;


    height:42px;


    border-radius:50%;


    background:#dcecff;


    display:flex;


    align-items:center;


    justify-content:center;


    color:#3676bd;


    margin-bottom:15px;


}



.business-box h3 {


    font-size:17px;


    margin-bottom:10px;


}



.business-box p {


    font-size:13px;


    line-height:20px;


    color:#687d93;


    margin-bottom:20px;


}



.business-box button {


    width:100%;


    height:42px;


    background:#2473c7;


    color:white;


    border-radius:7px;


}



.company-mini {


    margin-top:20px;


    background:#15263a;


    color:white;


    padding:22px;


    border-radius:14px;


    display:flex;


    gap:15px;


    align-items:center;


}



.mini-logo {


    font-size:28px;


    font-weight:800;


    border:1px solid #80baff;


    padding:6px;


    border-radius:6px;


}




.company-mini p {


    font-size:12px;


    line-height:17px;


    color:#dce8f5;


}




/* ================================
   PRODUCTS AREA
================================ */


.products-area {


    flex:1;


}



.toolbar {


    height:45px;


    display:flex;


    justify-content:space-between;


    align-items:center;


    margin-bottom:20px;


}



.sort {


    color:#6b8096;


    font-size:14px;


}



.sort select {


    margin-left:10px;


    height:34px;


    padding:0 14px;


    border:

    1px solid #d5dfeb;


    border-radius:7px;


    background:white;


}




.view {


    display:flex;


    align-items:center;


    gap:10px;


    color:#70849a;


    font-size:13px;


}



.view button {


    width:34px;


    height:34px;


    background:white;


    border-radius:6px;


}



.view button.active {


    background:#2576ca;


    color:white;


}







/* ================================
   PRODUCT GRID
================================ */

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}




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


.product-card {
    background: white;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column; /* Выстраиваем элементы строго сверху вниз */
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(26,48,78,0.05);
    transition: all 0.3s ease;
}


.product-card:hover {


    transform:translateY(-5px);


    box-shadow:


    0 15px 35px

    rgba(35,60,90,.16);


}




.product-image {


    height:220px;


    background:#f3f7fc;


    border-radius:12px;


    display:flex;


    justify-content:center;


    align-items:center;


    position:relative;


}



.product-image img {


    max-height:180px;


    max-width:90%;


    object-fit:contain;


}




.badge {


    position:absolute;


    top:12px;


    left:12px;


    background:#39a96b;


    color:white;


    padding:

    5px 12px;


    border-radius:20px;


    font-size:11px;


}

.badge.hit {
    background: #e53e3e;
}

.favorite {


    position:absolute;


    right:14px;


    top:12px;


    width:30px;


    height:30px;


    background:white;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    color:#789;


}

.favorite.active {
    color: #e53e3e;
    background: #fee2e2;
}

.brand {


    color:#2d79ce;


    font-weight:700;


    margin-top:15px;


}



.product-card h2 {


    font-size:16px;


    margin:

    6px 0;


    color:#182b40;


}


.description {
    font-size: 13px;
    color: #64748b;
    height: 38px;
    overflow: hidden;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* ================================
   PRODUCT DETAILS
================================ */


.features {


    display:flex;


    justify-content:space-between;


    margin:

    15px 0;


    padding:

    12px 0;


    border-top:

    1px solid #edf1f6;


    border-bottom:

    1px solid #edf1f6;


}



.features div {


    text-align:center;


    font-size:10px;


    color:#71869d;


    line-height:15px;


}



.features div:first-line {


    color:#2877c9;


    font-size:16px;


}





/* ================================
   SHINE SELECT
================================ */


.shine {


    margin-top:12px;


}



.shine span {


    display:block;


    font-size:12px;


    color:#72869c;


    margin-bottom:7px;


}



.shine button {


    height:27px;


    padding:

    0 8px;


    background:#f0f4f8;


    color:#60758a;


    font-size:10px;


    border-radius:5px;


    margin-right:3px;


}



.shine button.selected {


    background:#2878ca;


    color:white;


}





/* ================================
   COLORS
================================ */


.colors {


    margin-top:15px;


}



.colors > span {


    display:block;


    font-size:12px;


    color:#72869c;


    margin-bottom:8px;


}



.circles {


    display:flex;


    gap:8px;


}



.circles i {


    width:20px;


    height:20px;


    border-radius:50%;


    border:

    1px solid #ccd7e5;


}



.circles i:nth-child(1){

    background:#151515;

}


.circles i:nth-child(2){

    background:#777;

}


.circles i:nth-child(3){

    background:#d8d8d8;

}


.circles i:nth-child(4){

    background:#b33b32;

}



.colors small {


    display:block;


    margin-top:7px;


    color:#50677e;


    font-size:11px;


}




/* ================================
   PRICE
================================ */


.price {


    margin-top:15px;


    display:flex;


    flex-direction:column;


}



.price strong {


    font-size:22px;


    color:#182b40;


}



.price small {


    color:#7b8ea3;


}



.price span {


    font-size:11px;


    color:#7b8ea3;


    margin-top:5px;


}





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


.add-cart {


    margin-top:16px;


    width:100%;


    height:42px;


    background:#2375c8;


    color:white;


    border-radius:8px;


    font-size:14px;


}



.add-cart:hover {


    background:#195ea5;


}



.more {


    display:block;


    text-align:center;


    margin-top:12px;


    color:#2877ca;


    font-size:13px;


}





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



.footer-info {


    margin:

    0 48px 30px;


    background:#13263b;


    color:white;


    border-radius:18px;


    padding:35px;


}



.footer-card {


    display:flex;


    align-items:center;


    gap:25px;


}



.footer-logo {


    font-size:45px;


    font-weight:800;


    border:

    1px solid #76b8ff;


    padding:

    10px;


    border-radius:10px;


}



.footer-card h3 {


    font-size:22px;


}



.footer-card p {


    color:#bdcde0;


    margin-top:8px;


}




.footer-columns {


    margin-top:35px;


    display:flex;


    gap:100px;


}



.footer-columns div {


    display:flex;


    flex-direction:column;


    gap:10px;


}



.footer-columns h4 {


    margin-bottom:5px;


}



.footer-columns a,


.footer-columns p {


    color:#c7d6e7;


    font-size:14px;


}





footer {


    text-align:center;


    padding:

    20px;


    color:#789;


    font-size:13px;


}






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



@media(max-width:1200px){


.menu {


    gap:20px;


}



.products-grid {


    grid-template-columns:

    repeat(3,1fr);


}


}





@media(max-width:900px){


.header {


    padding:

    0 20px;


}



.menu {


    display:none;


}



.hero {


    height:auto;


    padding:

    35px 20px;


    flex-direction:column;


    align-items:flex-start;


}



.advantages {


    margin:

    30px 0 0;


}



.catalog {


    padding:

    20px;


    flex-direction:column;


}



.sidebar {


    width:100%;


}



.products-grid {


    grid-template-columns:

    repeat(2,1fr);


}



}





@media(max-width:600px){



.products-grid {


    grid-template-columns:

    1fr;


}



.toolbar {


    flex-direction:column;


    height:auto;


    align-items:flex-start;


    gap:15px;


}



.hero h1 {


    font-size:32px;


}



.advantages {


    flex-direction:column;


}



.adv {


    border-left:none;


    border-top:

    1px solid #ccd8e8;


    padding:

    15px 0;


}



.footer-info {


    margin:

    20px;


}



.footer-columns {


    flex-direction:column;


    gap:25px;


}


}