/* ============================================================
   Блоки страниц сайта: разделы, статьи, отзывы, подвал
   Значения размеров и цветов сохраняют прежний вид страниц.
   ============================================================ */

/* основная колонка страницы */
.content {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

/* ---- плитка разделов --------------------------------------- */

.categories {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.categories > * {
    min-width: 0;
}

@media (min-width: 768px) {
    .categories {
        gap: 1.5rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .categories {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .categories {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.category {
    position: relative;
    border-radius: 16px 16px 8px 8px;
    background-color: #efefef;
    overflow: hidden;
}

.category:hover {
    background-color: #e2e2e2;
}

.category__content {
    padding: 12px;
    text-align: center;
}

@media (min-width: 576px) {
    .category__content {
        padding: 20px;
    }
}

.category__title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
}

@media (min-width: 576px) {
    .category__title {
        font-size: 16px;
    }
}

/* ---- преимущества ------------------------------------------ */

.feature {
    display: flex;
    gap: 14px;
}

@media (min-width: 400px) {
    .feature {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.feature__icon {
    flex: 0 0 50px;
    width: 50px;
}

.feature__title {
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 600;
}

.feature__desc {
    color: #606060;
}

/* ---- текстовые страницы ------------------------------------ */

.content-block {
    color: #585858;
    line-height: 1.7;
}

@media (min-width: 992px) {
    .content-block {
        font-size: 18px;
    }
}

.content-block h1,
.content-block h2,
.content-block h3,
.content-block h4,
.content-block h5,
.content-block h6 {
    margin-bottom: 10px;
    color: #000;
}

.content-block h2 { font-size: 1.3333em; }
.content-block h3 { font-size: 1.2222em; }
.content-block h4 { font-size: 1.1111em; }

.content-block p {
    margin-bottom: 10px;
}

.content-block b {
    color: #000;
    font-weight: 500;
}

.content-block a {
    color: #0684eb;
    text-decoration: underline;
    text-decoration-thickness: from-font;
}

.content-block a:hover {
    text-decoration: none;
}

.content-block ul,
.content-block ol {
    margin-bottom: 10px;
    padding-left: 32px;
}

.content-block dl {
    margin-bottom: 10px;
}

.content-block dt {
    color: #000;
    font-weight: 500;
}

.content-block hr {
    margin-top: 24px;
    margin-bottom: 24px;
}

/* блок «видео + текст» на текстовых страницах */
.embed-block {
    padding: 14px;
    border-radius: 35px;
    background-color: #efefef;
}

@media (min-width: 576px) {
    .embed-block {
        display: flex;
        gap: 25px;
        align-items: flex-start;
    }
}

.video-embed {
    position: relative;
    display: block;
}

.video-embed::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    color: #eee;
    content: "\e915";
    font-family: "ks-icons";
    font-size: 80px;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease-in-out;
}

.video-embed:hover::before {
    transform: translate(-50%, -50%) scale(1.1);
}

/* шапка страницы-баннера */
.hero {
    height: 220px;
    border-radius: 14px;
    overflow: hidden;
}

@media (min-width: 576px) {
    .hero { height: 250px; }
}

@media (min-width: 992px) {
    .hero { height: 350px; }
}

.img-cover,
.img-contain {
    display: block;
    width: 100%;
    height: 100%;
}

.img-cover { object-fit: cover; }
.img-contain { object-fit: contain; }

/* ---- мелкие утилиты проекта -------------------------------- */

.page-title {
    margin-top: 0;
    font-size: 26px;
    font-weight: 600;
}

.color-secondary {
    color: #585858 !important;
}

.text-small,
.remove-btn {
    color: #757b7e;
    font-size: 12px;
}

.btn-default {
    color: #000;
}

.dark_link {
    color: #333;
}

.dark_link:hover {
    color: #797d7f;
}

.labels {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.chip {
    padding: 2px 4px;
    border: 1px solid #ffd83a;
    border-radius: 4px;
    background-color: #fff8db;
    font-size: 12px;
    white-space: nowrap;
}

.box {
    padding: 20px;
    border: 1px solid #d2d2d2;
    border-radius: 8px;
}

.box-group .box {
    border-radius: 0;
}

.box-group .box:not(:first-child) {
    border-top: none;
}

.box-group .box:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.box-group .box:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.box-shadow {
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.box-shadow:hover {
    border-color: #fff;
    background-color: #fff;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.shine {
    position: relative;
    overflow: hidden;
}

.shine::before {
    position: absolute;
    top: 0;
    left: -50%;
    z-index: 2;
    display: block;
    width: 25%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
    content: "";
    opacity: 0;
    visibility: hidden;
    transform: skewX(-25deg);
}

.shine:hover::before {
    z-index: 3;
    opacity: 1;
    visibility: visible;
    animation: ks-shine 0.5s;
}

@keyframes ks-shine {
    to { left: 125%; }
}

.tabs {
    display: flex;
    gap: 30px;
    margin: 0 0 10px;
    padding: 0 0 10px;
    list-style: none;
    overflow: auto;
}

@media (min-width: 768px) {
    .tabs {
        margin-bottom: 20px;
    }
}

.timeline {
    display: flex;
    border: 1px solid #eee;
    border-radius: 3px;
    overflow: auto;
}

.timeline__item {
    display: flex;
    align-items: center;
    padding: 18px 24px;
    border-right: 1px solid #eee;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

.timeline__item.active {
    background: #fafafa;
    font-size: 12px;
    font-weight: 500;
}

a.timeline__item:hover {
    color: #797d7f;
}

.prop-list {
    font-size: 14px;
    font-weight: 300;
}

.prop-list dl {
    display: flex;
    gap: 4px;
}

.prop-list dl:not(:last-child) {
    margin-bottom: 8px;
}

.prop-list dt {
    color: #757b7e;
}

/* ---- статьи блога ------------------------------------------ */

.post {
    border-radius: 6px;
    transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.post:hover {
    background-color: #fff;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.post__image {
    display: block;
    height: 210px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

.post__content {
    padding: 25px;
}

.post__category {
    display: block;
    margin: 0 0 11px;
    overflow: hidden;
    color: #999;
    font-size: 10px;
    letter-spacing: 0.8px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.post__title {
    margin-bottom: 25px;
    color: #333;
    font-size: 14px;
    font-weight: 700;
}

.post__title a {
    color: #212121;
}

.post__title a:hover {
    color: #797d7f;
}

.post__date {
    color: #555;
    font-size: 13px;
}

.side-news__list {
    background-color: #fff;
}

.side-news-item {
    display: flex;
    gap: 10px;
    padding: 14px 17px;
}

.side-news-item__img {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.side-news-item__date {
    margin-bottom: 10px;
    color: #999;
    font-size: 12px;
}

.side-news-item__link {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.692em;
}

/* ---- отзывы ------------------------------------------------ */

.card-review {
    display: flex;
    gap: 8px;
}

@media (min-width: 576px) {
    .card-review {
        gap: 24px;
    }
}

.card-review__preview {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
}

@media (min-width: 576px) {
    .card-review__preview {
        flex: 0 0 160px;
        width: 160px;
        height: 160px;
    }
}

.card-review__content {
    line-height: 1.6;
}

.card-review__title {
    margin-bottom: 10px;
    font-size: 15px;
}

.card-review__rating {
    font-size: 24px;
}

.card-review__date {
    display: block;
    color: #b5b5b5;
    font-size: 12px;
}

.card-review__images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.card-review__image {
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 6px;
    overflow: hidden;
}

/* ---- ссылки и соцсети в подвале ---------------------------- */

.f-menu,
.side-menu,
.share-list__items,
.nav-list,
.submenu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.f-title {
    margin-bottom: 14px;
}

.f-menu a,
.f-title a,
.f-bottom a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.f-menu a:hover,
.f-title a:hover,
.f-bottom a:hover {
    color: #999;
}

.f-menu-item {
    padding: 4px 0;
}

.social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-item {
    display: inline-flex;
    padding: 6px;
    border: 1px solid #797d7f;
    border-radius: 50%;
    color: #797d7f;
    font-size: 22px;
    text-decoration: none;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.social-item:hover {
    border-color: #fff;
    color: #fff;
}

/* ============================================================
   Корзина, карточка товара, списки-карусели
   ============================================================ */

/* кнопки в шапке, которые рисует модуль избранного */
.action-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    border: none;
    border-radius: 8px;
    background: none;
    color: #797d7f;
    text-decoration: none;
    cursor: pointer;
}

.action-btn:hover {
    background-color: #f2f2f2;
    color: #797d7f;
}

@media (min-width: 576px) {
    .action-btn { padding: 8px; }
}

@media (max-width: 991.98px) {
    .action-btn { padding: 6px; }
}

.action-btn__icon {
    position: relative;
    display: inline-flex;
    font-size: 34px;
    text-align: center;
}

@media (min-width: 576px) {
    .action-btn__icon { font-size: 28px; }
}

.action-btn__label {
    display: none;
}

@media (min-width: 576px) {
    .action-btn__label {
        display: block;
        color: #6b7280;
        font-size: 13px;
        font-weight: 400;
        text-align: center;
    }
}

.action-btn__qnt {
    position: absolute;
    top: -8px;
    right: -12px;
    z-index: 1;
    min-width: 18px;
    height: 18px;
    padding: 1px 5px;
    border-radius: 18px;
    background-color: #dd7f0b;
    color: #fff;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
}

/* ---- цена и счётчик количества ------------------------------ */

.price {
    white-space: nowrap;
}

.price ins {
    display: block;
    font-weight: 600;
    text-decoration: none;
}

.price del {
    color: #757b7e;
    font-size: 0.75em;
}

.counter {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fafafa;
    overflow: hidden;
    white-space: nowrap;
    transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.counter-int {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: none;
    background: #fafafa;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    text-align: center;
    outline: none;
}

.counter-less,
.counter-more {
    display: flex;
    width: 36px;
    height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font-size: 16px;
    cursor: pointer;
}

.counter-less:disabled,
.counter-more:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ---- карточка товара в списках ------------------------------ */

.product__top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 11;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
}

.product__image {
    border-radius: 16px;
    overflow: hidden;
}

.product__buy {
    display: flex;
    padding: 6px;
    border: 1px solid #ececec;
    border-radius: 50%;
    background: none;
    color: #898c8e;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.product__buy:hover,
.product__buy.active {
    border-color: #898c8e;
    background-color: #898c8e;
    color: #fff;
}

.card-pagination {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    width: 100%;
    height: 100%;
}

/* стрелки карусели товаров.
   Отсчёт положения ведётся от самой ленты, иначе стрелки
   уезжают к краям страницы — им не от чего отталкиваться. */
.carousel-items {
    position: relative;
}

.carousel-items__prev,
.carousel-items__next {
    display: none;
}

@media (min-width: 992px) {
    .carousel-items__prev,
    .carousel-items__next {
        position: absolute;
        top: 50%;
        z-index: 1;
        display: inline-flex;
        border: none;
        background: none;
        color: #757b7e;
        font-size: 30px;
        cursor: pointer;
        transform: translateY(-50%);
    }

    .carousel-items__prev:hover,
    .carousel-items__next:hover {
        color: #000;
    }

    .carousel-items__prev.disabled,
    .carousel-items__next.disabled {
        opacity: 0.5;
    }

    .carousel-items__prev { left: -30px; }
    .carousel-items__next { right: -30px; }
}

.carousel-items__prev { left: 0; }
.carousel-items__next { right: 0; }

/* ---- страница товара --------------------------------------- */

.single__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.single__cost {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.option-field {
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .option-field { margin-bottom: 40px; }
}

/* меню «поделиться» */
.share-list {
    position: relative;
}

.share-list__items {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.share-list:hover .share-list__items,
.share-list__toggle:focus ~ .share-list__items {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.share-list__item {
    display: flex;
    padding: 8px 14px;
    border-bottom: 1px solid #f2f6f7;
    color: #989898;
    font-size: 24px;
    text-decoration: none;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.share-list__item:hover {
    background-color: #757b7e;
    color: #fff;
}

/* боковое меню разделов */
.side-menu > li > a {
    position: relative;
    display: block;
    margin-bottom: 8px;
    padding: 15px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.side-menu > li > a:hover {
    z-index: 1;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

/* ---- корзина ------------------------------------------------ */

.cart-item {
    position: relative;
    display: grid;
    gap: 24px;
    grid-template-areas:
        "b1 b1"
        "b2 b2"
        "b3 b4";
    grid-template-columns: 1fr 1fr;
}

@media (min-width: 768px) {
    .cart-item {
        grid-template-areas:
            "b1 b2 b4 b5"
            "b3 b2 b4 b5";
        grid-template-columns: 200px 1fr max-content max-content;
    }
}

@media (min-width: 992px) {
    .cart-item {
        grid-template-areas: "b1 b2 b3 b4 b5";
        grid-template-columns: 150px 1fr max-content max-content max-content;
    }
}

@media (min-width: 1400px) {
    .cart-item {
        grid-template-columns: 200px 1fr max-content max-content max-content;
    }
}

.cart-item__image {
    grid-area: b1;
    justify-self: center;
}

.cart-item__image img {
    border-radius: 8px;
}

@media (min-width: 768px) {
    .cart-item__image { justify-self: stretch; }
}

.cart-item__content {
    grid-area: b2;
    width: 100%;
}

.cart-item__title {
    margin-bottom: 12px;
    font-weight: 300;
}

.cart-item__quantity {
    grid-area: b3;
    width: 100%;
    align-self: flex-end;
}

@media (min-width: 768px) {
    .cart-item__quantity { align-self: flex-start; }
}

.cart-item__price {
    grid-area: b4;
    width: 100%;
    text-align: right;
}

@media (min-width: 992px) {
    .cart-item__price { text-align: left; }
}

.cart-item__remove {
    position: absolute;
    top: 0;
    right: 0;
    grid-area: b5;
}

@media (min-width: 1200px) {
    .cart-item__remove { position: static; }
}

.cart-list .cart-item:not(:last-child) {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #d2d2d2;
}

.cart-summary dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-summary__total dt,
.cart-summary__total dd {
    font-size: 18px;
    font-weight: 600;
}

.cart-summary__discount {
    font-size: 14px;
    font-weight: 300;
}

.cart-summary__discount dt {
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    align-items: flex-end;
    padding-right: 8px;
}

.cart-summary__discount dt::after {
    position: relative;
    bottom: 6px;
    flex-grow: 1;
    height: 1px;
    margin-left: 5px;
    border-top: 1px dotted #000;
    content: "";
    opacity: 0.5;
}

.cart-summary__discount dd {
    color: #27ae60;
}

.cart-summary__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cart-summary__actions .btn {
    flex: 1;
    min-width: 180px;
}

/* видео и текст внутри блока .embed-block */
.embed-block__video {
    position: relative;
    display: block;
    border-radius: 25px;
    overflow: hidden;
}

@media (min-width: 576px) {
    .embed-block__video { flex: 0 0 300px; }
    .embed-block__content { padding-bottom: 15px; }
}

@media (min-width: 992px) {
    .embed-block__video { flex-basis: 400px; }
}

.embed-block__content {
    padding-top: 15px;
}

/* точки-перелистыватели поверх фотографии товара */
.ks-dot,
.card-pagination-bullet {
    position: relative;
    flex: 1;
}

.ks-dot::after,
.card-pagination-bullet::after {
    position: absolute;
    right: 2px;
    bottom: 0;
    left: 2px;
    height: 2px;
    background: #e0e0e0;
    content: "";
}

.ks-dot_on::after,
.card-pagination-active::after {
    background-color: #b7b9ba;
}

/* просмотр видео во весь экран */
.ks-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.85);
}

.ks-lightbox[hidden] {
    display: none !important;
}

.ks-lightbox-stage {
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16 / 9;
}

.ks-lightbox-stage iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px;
}

.ks-lightbox-close {
    position: absolute;
    top: 12px;
    right: 18px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
}