/*
Theme Name: Vents-Center-Themes
Author: Dmitriy Smirnov
Version: 2.1
*/


/* ------------------------------------------------
VENTS.CENTER UI SYSTEM
------------------------------------------------ */

body{
font-family:'Montserrat',sans-serif;
background:#f5f7fb;
color:#222;
margin:0;
}


/* ------------------------------------------------
COLORS
------------------------------------------------ */

:root{

--vents-dark:#071B2F;
--vents-blue:#0E5CCB;
--vents-blue-light:#2EA3F2;
--vents-gray:#9AA8B6;
--vents-white:#FFFFFF;

--vents-border:rgba(0,0,0,0.08);
--vents-border-light:rgba(0,0,0,0.05);

--vents-bg:#f5f7fb;

--vents-gradient:linear-gradient(135deg,#0E5CCB,#2EA3F2);

}


/* ------------------------------------------------
LAYOUT
------------------------------------------------ */

.layout{
display:flex;
}


/* ------------------------------------------------
SIDEBAR
------------------------------------------------ */

.sidebar{

position:fixed;
top:0;
left:0;

width:280px;
height:100vh;

background:#ffffff;
border-right:1px solid var(--vents-border-light);

display:flex;
flex-direction:column;

padding:30px 25px;

overflow:hidden;

}
.sidebar{

background:

linear-gradient(
180deg,
#ffffff 0%,
#f4f8ff 100%
);

}



/* ------------------------------------------------
LOGO
------------------------------------------------ */

.sidebar-logo{
margin-bottom:40px;
}

.sidebar-logo img{
max-width:100%;
height:auto;
}


/* ------------------------------------------------
MENU
------------------------------------------------ */

.sidebar-menu{
flex:1;
}

/* убираем точки списка */

.sidebar-menu ul{
list-style:none;
padding:0;
margin:0;
}

/* отступы элементов */

.sidebar-menu li{
margin:0;
padding:0;
}

/* ссылки меню */

.sidebar-menu li a{

display:flex;
align-items:center;
gap:10px;

padding:12px 14px;

color:#6f7f8f;
text-decoration:none;

font-size:15px;

transition:all .25s ease;

}

/* hover */

.sidebar-menu li a:hover{

background:#f1f6ff;
color:var(--vents-blue);

transform:translateX(3px);

}

/* активный пункт */

.sidebar-menu .current-menu-item > a{

background:#e9f2ff;
color:var(--vents-blue);
font-weight:600;

}

/* иконки */

.sidebar-menu i{
font-size:18px;
}

.sidebar-menu .current-menu-item > a{
background: rgb(233 242 255 / 33%);
color:var(--vents-blue);
font-weight:600;
border-left:3px solid var(--vents-blue);
}


/* ------------------------------------------------
SIDEBAR FOOTER
------------------------------------------------ */

.sidebar-footer{

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

padding-top:18px;

font-size:13px;
color:var(--vents-gray);

line-height:1.6;

}

.sidebar-footer a{
color:var(--vents-blue);
text-decoration:none;
}

.sidebar-footer a:hover{
color:var(--vents-blue-light);
}


/* ------------------------------------------------
MAIN CONTENT
------------------------------------------------ */

.main{
margin-left:280px;
width:100%;
min-height:100vh;
}


/* ------------------------------------------------
BUTTONS
------------------------------------------------ */

.btn-primary{

background:var(--vents-blue);
border:none;

}

.btn-primary:hover{

background:var(--vents-blue-light);

}


/* ------------------------------------------------
LINKS
------------------------------------------------ */

a{
color:var(--vents-blue);
}

a:hover{
color:var(--vents-blue-light);
}


/* ------------------------------------------------
TEXT
------------------------------------------------ */

.text-muted{
color:var(--vents-gray);
}


/* ------------------------------------------------
SECTION DARK
------------------------------------------------ */

.section-dark{

background:var(--vents-dark);
color:#fff;

}


/* ------------------------------------------------
AIR FLOW DESIGN
------------------------------------------------ */

.air-lines{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;
opacity:.08;

}

.air-lines span{

position:absolute;
width:200%;
height:2px;

background:
linear-gradient(
90deg,
transparent,
var(--vents-blue-light),
transparent
);

animation:airFlow 18s linear infinite;

}

.air-lines span:nth-child(1){
top:18%;
animation-delay:0s;
}

.air-lines span:nth-child(2){
top:38%;
animation-delay:4s;
}

.air-lines span:nth-child(3){
top:58%;
animation-delay:8s;
}

.air-lines span:nth-child(4){
top:78%;
animation-delay:12s;
}

@keyframes airFlow{

0%{
transform:translateX(-50%);
}

100%{
transform:translateX(0%);
}

}


/* ------------------------------------------------
SCROLLBAR
------------------------------------------------ */

::-webkit-scrollbar{
width:6px;
}

::-webkit-scrollbar-track{
background:#f1f1f1;
}

::-webkit-scrollbar-thumb{
background:#c8d3e0;
border-radius:6px;
}


/* ------------------------------------------------
RESPONSIVE
------------------------------------------------ */

@media (max-width:1000px){

.sidebar{

transform:translateX(-100%);
position:fixed;

}

.main{
margin-left:0;
}

}


/* -------------------------------
SIDEBAR CONTACTS
------------------------------- */

.sidebar-phone{

display:flex;
align-items:center;
gap:8px;

font-size:20px;
font-weight:700;

margin-bottom:16px;

}

.sidebar-phone a{

color:#1F2937;
text-decoration:none;

}

.sidebar-phone i{

color:#6b7280;
font-size:16px;

}


/* кнопка */

.sidebar-cta{
display:block;
width:100%;
background:var(--vents-blue);
color:#fff !important;
text-align:center;
padding:12px 14px;
font-weight:600;
font-size:15px;
margin-bottom:16px;
text-decoration:none;
transition:.25s;
}

.sidebar-cta:hover{
background:var(--vents-blue-light);
color:#fff;
}


/* email */

.sidebar-email{

display:flex;
align-items:center;
gap:8px;

font-size:15px;

margin-bottom:14px;

}

.sidebar-email a{

color:#6f7f8f;
text-decoration:none;

}

.sidebar-email i{
color:#777;
font-size:16px;
}


/* копирайт */

.sidebar-copy{

font-size:12px;
color:#9AA8B6;

}

/* --------------------------------
SUBCATEGORY GRID
-------------------------------- */

.vents-cat-description{
font-size:15px;
color:#5f6c7b;
max-width:850px;
line-height:1.7;
margin-bottom:35px;
}

a.vents-subcat-card {
    text-decoration: none;
}

.vents-subcats{
margin-bottom:40px;
}

.vents-subcat-card {
    display: block;
    background: #fcfdff;
    padding: 15px 10px;
    text-align: center;
    border: 1px solid var(--vents-border-light);
    transition: all .25s ease;
    height: 100%;
    border-left: 5px #0e60c7 solid;
}

.vents-subcat-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 28px rgba(0,0,0,0.08);
}

.vents-subcat-card img{
width:100%;
height:150px;
object-fit:contain;
margin-bottom:15px;
}

.vents-subcat-card h3{
font-size:14px;
color:#1F2937;
margin-bottom:6px;
}

.vents-count{
font-size:13px;
color:#9AA8B6;
}

/* --------------------------------
CATEGORY TITLE
-------------------------------- */

.woocommerce-products-header__title.page-title{
font-size:36px;
font-weight:600;
color:#1F2937;
margin-bottom:8px;
letter-spacing:-0.5px;
position:relative;
padding-bottom:14px;
}

/* фирменная линия под заголовком */

.woocommerce-products-header__title.page-title::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:120px;
height:3px;
background:var(--vents-blue);
border-radius:2px;
}
.woocommerce-products-header p{
font-size:15px;
color:#6B7280;
max-width:100%;
margin-top:6px;
margin-bottom:28px;
line-height:1.6;
}
/* --------------------------------
CATEGORY DESCRIPTION
-------------------------------- */

/* абзацы внутри */
.term-description p{
margin-bottom:5px;
font-size:12px;
}

/* если будет список */

.term-description ul{
padding-left:18px;
margin-top:10px;
}

.term-description li{
margin-bottom:6px;
}

.term-description {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.7;
    color: #5F6C7B;
    margin-bottom: 35px;
    padding-left: 14px;
    border-left: 3px solid var(--vents-blue);
    background: #fcfdff;
    padding: 10px 30px;
    margin-top: 30px;
}

/* --------------------------------
ARROW IN SUBCATEGORY CARD
-------------------------------- */

.vents-subcat-card{
position:relative;
overflow:hidden;
}

/* карточка */

.vents-subcat-card{
position:relative;
overflow:hidden;
}


/* карточка */

.vents-subcat-card{
position:relative;
overflow:hidden;
}

/* стрелка */

.vents-arrow{

position:absolute;

right:16px;
bottom:16px;

width:24px;
height:24px;

background:#0E5CCB;

display:flex;
align-items:center;
justify-content:center;

opacity:0;

transition:.25s;

}

/* сама стрелка */

.vents-arrow::before{

content:"";

width:8px;
height:8px;

border-top:2px solid #fff;
border-right:2px solid #fff;

transform:rotate(45deg);

}

/* hover */

.vents-subcat-card:hover .vents-arrow{

opacity:1;

}
.ph-breadcrumbs{
margin-bottom:20px;
font-size:14px;
}

.ph-breadcrumbs .breadcrumb{
background:none;
padding:0;
margin:0;
}

.ph-breadcrumbs a{
text-decoration:none;
color:#9AA8B6;
}

.ph-breadcrumbs a:hover{
color:#2EA3F2;
}

.ph-breadcrumbs .breadcrumb-item.active{
color:#333;
}

/* карточка */

/* сетка каталога */

.vc-products{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
padding:0;
margin:0;
list-style:none;
}


/* карточка */

.vc-card{
background:#fff;
border:1px solid #e4edf5;
display:flex;
flex-direction:column;
height:100%;
transition:.25s;
}

.vc-card:hover{
border-color:#0E5CCB;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transform:translateY(-3px);
}


/* картинка */

.vc-card-image{
background:#f7f9fc;
text-align:center;
}

.vc-card-image img{
max-height:220px;
width:auto;
}


/* тело */

.vc-card-body{
padding:20px;
display:flex;
flex-direction:column;
height:100%;
}


/* название */

.vc-title{
font-size:16px;
line-height:1.4;
font-weight:600;
color:#071B2F;
margin-bottom:15px;
}


/* характеристики */

.vc-specs{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:18px;
}

.vc-specs span{
background:#eef4fb;
padding:5px 10px;
font-size:13px;
color:#0E5CCB;
font-weight:500;
}


/* футер */

.vc-footer{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:auto;
}


/* цена */

.vc-price{
font-size:20px;
font-weight:700;
color:#071B2F;
}


/* кнопка */

.vc-btn{
background:#0E5CCB;
color:#fff;
border:none;
padding:9px 16px;
font-size:14px;
cursor:pointer;
transition:.2s;
}

.vc-btn:hover{
background:#2EA3F2;
}


/* адаптив */

@media(max-width:1200px){

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

}

@media(max-width:768px){

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

}

@media(max-width:480px){

.vc-products{
grid-template-columns:1fr;
}

}

/* отключаем сетку WooCommerce */

ul.products li.product{
float:none !important;
width:100% !important;
margin:0 !important;
}


/* делаем свою сетку */

ul.products{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:30px;
}