/* ==================================================
   Главная страница
================================================== */

.homepage{

    padding:10px 20px 80px;

}

.homepage-container{
    max-width:1400px;
    margin:0 auto;
}

.homepage-title{

    margin:0 0 18px;

    text-align:center;

    font-size:clamp(28px,3vw,46px);

    line-height:1.15;

    font-weight:700;

}


/* ==================================================
   Hero
================================================== */

.hero{
    margin-bottom:60px;
}

.hero-text{
    text-align:center;
    font-size:22px;
}

/* ==================================================
   Категории
================================================== */

.homepage-categories{

    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
    margin-bottom:80px;

}

.homepage-category{

    display:block;
    overflow:hidden;
    border-radius:12px;

}

.homepage-category img{

    display:block;
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    transition:transform .25s ease;

}

.homepage-category:hover img{

    transform:scale(1.03);

}

/* ==================================================
   Заголовки блоков
================================================== */

.homepage-products{

    margin-bottom:80px;

}

.homepage-section-header{

    margin-bottom:30px;

}

.homepage-section-header h2{

    margin:0;
    text-align:center;
    font-size:clamp(26px,3vw,40px);
    line-height:1.2;

}

/* ==================================================
   Сетка товаров
================================================== */

.homepage-products-wrapper{

    width:100%;

}

.homepage-products .products{

    display:grid;

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

    gap:24px;

    margin:0;

    padding:0;

    list-style:none;

}

.homepage-products .products li.product{

    width:auto !important;

    float:none !important;

    margin:0 !important;

}

/* ==================================================
   Планшет
================================================== */

@media (max-width:1024px){

    .homepage-categories{

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

    }

    .homepage-products .products{

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

    }

}

/* ==================================================
   Телефон
================================================== */

@media (max-width:768px){

    .homepage-categories{

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

        gap:15px;

    }

    .homepage-products .products{

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

        gap:16px;

    }

}
/* ==================================================
   Красивые карточки товаров
================================================== */

.homepage-products .product{

    display:flex;
    flex-direction:column;

}

.homepage-products .woocommerce-loop-product__link{

    display:flex;
    flex-direction:column;
    height:100%;

}

/* Фото */

.homepage-products img{

    width:100%;
    height:auto;
    aspect-ratio:1/1;
    object-fit:cover;

}

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

.homepage-products .woocommerce-loop-product__title{

    display:-webkit-box;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    overflow:hidden;

    min-height:48px;

    margin-top:12px;

    line-height:1.35;

}

/* Цена */

.homepage-products .price{

    margin-top:auto;

    font-size:22px;

    font-weight:700;

}

/* Кнопка */

.homepage-products .button{

    width:100%;

    margin-top:15px;

    text-align:center;

}
/* ==================================================
   Доработка карточек
================================================== */

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

.homepage-products .product{

    padding:16px;

    border:1px solid #ececec;

    border-radius:12px;

    background:#fff;

    transition:.2s ease;

}

.homepage-products .product:hover{

    box-shadow:0 8px 24px rgba(0,0,0,.08);

    transform:translateY(-2px);

}

/* Фото */

.homepage-products img{

    border-radius:10px;

}

/* Цена */

.homepage-products .price{

    margin:14px 0;

}

/* Кнопка */

.homepage-products .button{

    border-radius:8px;

}
/* ==================================================
   Кнопка "Все категории"
================================================== */

.homepage-all-categories{

    margin-top:35px;

    text-align:center;

}

.homepage-all-categories a{

    display:inline-block;

    padding:16px 34px;

    border-radius:12px;

    font-size:18px;

    font-weight:600;

    text-decoration:none;

    transition:.25s;

}

.homepage-all-categories a:hover{

    transform:translateY(-2px);

}
/* ==================================================
   Преимущества
================================================== */

.homepage-advantages {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 54px;
}

.homepage-advantage {
    display: flex;
    min-width: 0;
    min-height: 92px;
    padding: 16px;
    align-items: center;
    gap: 13px;
    overflow: visible;
    border: 1px solid #eceff3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .06);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.homepage-advantage:hover {
    border-color: rgba(242, 63, 120, .22);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .10);
    transform: translateY(-2px);
}

.homepage-advantage-icon {
    display: flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
}

.homepage-advantage-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.homepage-advantage-icon--delivery {
    background: linear-gradient(135deg, #ff3f7f, #ff7043);
}

.homepage-advantage-icon--flight {
    background: linear-gradient(135deg, #7c4dff, #a855f7);
}

.homepage-advantage-icon--bonus {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.homepage-advantage-icon--payment {
    background: linear-gradient(135deg, #0a7cff, #25a7ff);
}

.homepage-advantage-content {
    min-width: 0;
}

.homepage-advantage h3 {
    margin: 0 0 4px;
    color: #252932;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.homepage-advantage p {
    margin: 0;
    color: #707681;
    font-size: 13px;
    line-height: 1.35;
}

@media (max-width: 1024px) {
    .homepage-advantages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .homepage-advantages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 36px;
    }

    .homepage-advantage {
        min-height: 78px;
        padding: 12px;
        gap: 10px;
        border-radius: 13px;
    }

    .homepage-advantage-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 11px;
    }

    .homepage-advantage-icon svg {
        width: 20px;
        height: 20px;
    }

    .homepage-advantage h3 {
        font-size: 14px;
    }

    .homepage-advantage p {
        font-size: 11px;
        line-height: 1.3;
    }
}

@media (max-width: 420px) {
    .homepage-advantage {
        align-items: flex-start;
    }

    .homepage-advantage-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .homepage-advantage h3 {
        font-size: 13px;
    }

    .homepage-advantage p {
        font-size: 10.5px;
    }
}
/* Только главная страница */

@media (min-width:1200px){

    .home.ast-plain-container.ast-no-sidebar #primary{

        margin-top:0 !important;

    }

}
@media (max-width:768px){

    .homepage-products .woocommerce-loop-product__title{

        -webkit-line-clamp:3;

        min-height:78px;

    }

}
/* ==========================================
   Кнопка "Все категории"
========================================== */

.homepage-all-categories{
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.homepage-all-categories a{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 34px;

    border-radius: 12px;

    background: #0a7cff;
    color: #fff;

    font-size: 16px;
    font-weight: 600;

    text-decoration: none;

    transition: .25s;
}

.homepage-all-categories a:hover{
    background:#0868d5;
    transform: translateY(-2px);
    color:#fff;
}