/*
 * ============================================================================
 *  WooCommerce-шаблон для темы «theme» (стройвместе.рф)
 *  Файл: assets/css/woocommerce-theme.css
 * ============================================================================
 *
 *  Основную стилизацию обеспечивают КЛАССЫ ТЕМЫ из main.css — шаблоны
 *  используют ту же разметку, что и каталог/карточка проекта
 *  (.catalog__item, .item-price, .info-list и т.д.).
 *
 *  Этот файл содержит только «клеевые» стили для новых элементов:
 *  панель «показано/сортировка», пагинация, хлебные крошки на белом фоне,
 *  кнопка добавления в корзину, описание товара, мелкие правки и адаптив.
 *
 *  Все правила скоуплены классами .svwoo-* и не влияют на остальной сайт.
 * ============================================================================
 */

/* ---------------------------------------------------------------------------
 * 1. Список товаров (карточки каталога .catalog__item)
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * Выравнивание карточек в списке: все карточки одного ряда — одной высоты,
 * кнопка «Перейти» прижата к низу карточки (как в каталоге).
 * ------------------------------------------------------------------------- */

.svwoo .catalog__item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
}

/* Слайдер и цена не сжимаются, текст характеристик — с запасом вниз */
.svwoo .catalog__item .item-slider,
.svwoo .catalog__item .item-price {
        -ms-flex-negative: 0;
        flex-shrink: 0;
}

.svwoo .catalog__item .item-text {
        -ms-flex-positive: 1;
        flex-grow: 1;
}

.svwoo .catalog__item .item-order {
        margin-top: 2.0833333333vw;
        -ms-flex-item-align: start;
        align-self: flex-start;
}

/* Изображение в карточке (слайдер темы рассчитан на swiper-разметку) */
.svwoo .item-slider img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        cursor: pointer;
}

.svwoo .item-slider > a,
.svwoo .item-slider .swiper-slide a {
        display: block;
        width: 100%;
        height: 100%;
}

/* Страховка: если swiper-скрипт не инициализировался, слайды не разъезжаются */
.svwoo .item-slider .swiper-container {
        overflow: hidden;
}

/* Бейджи: по умолчанию скрыты, показываются модификаторами md-* */
.svwoo .item-status .hit,
.svwoo .item-status .sale,
.svwoo .item-status .new {
        display: none;
}

.svwoo .item-status.md-hit .hit,
.svwoo .item-status.md-sale .sale,
.svwoo .item-status.md-new .new {
        display: flex;
        align-items: center;
}

.svwoo .item-status span {
        color: #fff;
        font-weight: 500;
        font-size: 0.625vw;
        letter-spacing: 0.03em;
        padding: 0.26vw 0.52vw;
        white-space: nowrap;
}

.svwoo .item-status .hit span { background-color: var(--hit-status-color, #9747FF); }
.svwoo .item-status .sale span { background-color: var(--sale-status-color, #F63123); }
.svwoo .item-status .new span { background-color: var(--new-status-color, #F2B644); }

/* ---------------------------------------------------------------------------
 * 2. Панель над сеткой: «показано N» + сортировка
 * ------------------------------------------------------------------------- */

.svwoo-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1vw;
        flex-wrap: wrap;
        margin-bottom: 1.3vw;
}

.svwoo-toolbar .woocommerce-result-count {
        margin: 0;
        color: #8A8A8A;
        font-weight: 500;
        font-size: 0.73vw;
        line-height: 1.15vw;
        letter-spacing: 0.03em;
}

.svwoo-toolbar .woocommerce-ordering {
        margin: 0;
}

.svwoo-toolbar .woocommerce-ordering select {
        font-family: 'Raleway', Arial, sans-serif;
        font-weight: 500;
        font-size: 0.73vw;
        line-height: 1.15vw;
        letter-spacing: 0.03em;
        color: var(--text-main-color, #1C1C1C);
        padding: 0.52vw 0.73vw;
        border: 0.052vw solid #E8E8E8;
        border-radius: 0;
        background-color: #fff;
        outline: none;
        cursor: pointer;
        transition: border-color 0.3s;
}

.svwoo-toolbar .woocommerce-ordering select:focus {
        border-color: var(--main-color, #31B939);
}

/* ---------------------------------------------------------------------------
 * 3. Пагинация
 * ------------------------------------------------------------------------- */

.svwoo-pagination {
        margin-top: 2.6vw;
}

.svwoo-pagination nav.woocommerce-pagination {
        text-align: center;
}

.svwoo-pagination ul.page-numbers {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.52vw;
}

.svwoo-pagination .page-numbers {
        min-width: 2.34vw;
        height: 2.34vw;
        padding: 0 0.52vw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0.052vw solid var(--main-color, #31B939);
        color: var(--main-color, #31B939);
        font-weight: 600;
        font-size: 0.73vw;
        line-height: 1;
        letter-spacing: 0.03em;
        text-decoration: none;
        transition: 0.3s;
}

.svwoo-pagination .page-numbers:hover {
        background-color: var(--main-color, #31B939);
        color: #fff;
}

.svwoo-pagination .page-numbers.current {
        background-color: var(--main-color, #31B939);
        color: #fff;
        cursor: default;
}

.svwoo-pagination .page-numbers.dots {
        border-color: transparent;
        color: #8A8A8A;
}

.svwoo-pagination .page-numbers.dots:hover {
        background-color: transparent;
        color: #8A8A8A;
}

/* ---------------------------------------------------------------------------
 * 4. Хлебные крошки на белом фоне (в теме они белые под тёмным фоном)
 * ------------------------------------------------------------------------- */

.svwoo .breadcrumbs {
        height: auto;
        margin-bottom: 2.34vw;
        padding-top: 1.5vw;
}

.svwoo .breadcrumbs__item a,
.svwoo .breadcrumbs__item {
        color: #8A8A8A;
        font-weight: 500;
        font-size: 0.73vw;
        line-height: 0.83vw;
        letter-spacing: 0.03em;
}

.svwoo .breadcrumbs__item a {
        text-decoration: none;
        transition: color 0.3s;
}

.svwoo .breadcrumbs__item a:hover {
        color: var(--main-color, #31B939);
}

.svwoo .breadcrumbs__item::before {
        background-color: #C9C9C9;
}

.svwoo .breadcrumbs__item:first-child::before {
        display: none;
}

.svwoo .breadcrumbs__item.active a,
.svwoo .breadcrumbs__item:last-child a {
        color: var(--text-main-color, #1C1C1C);
        pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * 5. Карточка товара: кнопка покупки, форма
 * ------------------------------------------------------------------------- */

.svwoo .info-btn-container .svwoo-cart-form {
        margin: 0;
}

.svwoo .order-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 15.625vw;
        max-width: 100%;
        height: 3.39vw;
        padding: 0 1vw;
        background-color: var(--main-color, #31B939);
        border: 0.052vw solid var(--main-color, #31B939);
        border-radius: 0;
        color: #fff;
        font-family: 'Raleway', Arial, sans-serif;
        font-weight: 600;
        font-size: 0.83vw;
        line-height: 1.25vw;
        letter-spacing: 0.04em;
        text-align: center;
        cursor: pointer;
        transition: 0.3s;
}

.svwoo .order-btn:hover {
        background-color: var(--main-color-darken, #1f9f27);
        border-color: var(--main-color-darken, #1f9f27);
        color: #fff;
}

/* Стандартная форма Woo для вариативных товаров — приводим к стилю темы */
.svwoo .info-btn-container .variations_form .variations {
        display: flex;
        flex-direction: column;
        gap: 0.6vw;
        margin-bottom: 1vw;
}

.svwoo .info-btn-container .variations_form .variations label {
        font-weight: 600;
        font-size: 0.83vw;
}

.svwoo .info-btn-container .variations_form .variations select {
        font-family: 'Raleway', Arial, sans-serif;
        font-size: 0.83vw;
        padding: 0.52vw 0.73vw;
        border: 0.052vw solid #E8E8E8;
        border-radius: 0;
        background-color: #fff;
        cursor: pointer;
}

.svwoo .info-btn-container .variations_form .single_add_to_cart_button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 15.625vw;
        max-width: 100%;
        height: 3.39vw;
        background-color: var(--main-color, #31B939);
        border: 0.052vw solid var(--main-color, #31B939);
        border-radius: 0;
        color: #fff;
        font-family: 'Raleway', Arial, sans-serif;
        font-weight: 600;
        font-size: 0.83vw;
        cursor: pointer;
        transition: 0.3s;
}

.svwoo .info-btn-container .variations_form .single_add_to_cart_button:hover {
        background-color: var(--main-color-darken, #1f9f27);
}

/* ---------------------------------------------------------------------------
 * 5.1 Галерея карточки товара: главное фото + слайдер миниатюр
 *     Заменяет прежнюю «сетку из 4 миниатюр» на swiper-карусель,
 *     в которую помещаются ВСЕ дополнительные изображения товара
 *     и (опционально) MP4-видео.
 * ------------------------------------------------------------------------- */

/* Главный блок галереи занимает ту же ширину, что и .item-img-block темы */
.svwoo .products__item .item-img-block.svwoo-gallery {
        width: 40.1041666667vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;        /* не растягивать thumbs-slider */
        -ms-flex-align: start;           /* на высоту главного фото     */
        align-items: flex-start;
        gap: 1.0416666667vw;
        position: relative;
}

/* Главное фото — крупное, на всю ширину блока */
.svwoo .svwoo-gallery__main {
        display: block;
        width: 100%;
        height: 28.6458333333vw;
        overflow: hidden;
        border-radius: var(--brad-regular, 0.2604166667vw);
        position: relative;
}
.svwoo .svwoo-gallery__main img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        display: block;
        cursor: zoom-in;
}

/* Слайдер миниатюр — карусель под главным фото */
.svwoo .svwoo-thumbs-slider {
        position: relative;
        width: 100%;
        padding: 0 2.6041666667vw; /* место под стрелки по бокам */
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
}
.svwoo .svwoo-thumbs-slider .swiper-container {
        overflow: hidden;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
}
.svwoo .svwoo-thumbs-slider .swiper-wrapper {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start; /* при разной высоте слайдов — выравнивание по верху */
}

/*
 * Слайд: КВАДРАТНЫЙ — aspect-ratio: 1/1.
 *
 * ВАЖНО: Elementor подключает СВОЙ swiper.css (v8.4.5), где стоит
 *   .swiper-slide { height: 100%; }  --  он растягивает слайд на высоту
 * контейнера и ломает aspect-ratio. Поэтому perебиваем height: auto !important.
 *
 * А .svwoo-gallery раньше имел align-items: stretch (default для flex) —
 * thumbs-slider растягивался на высоту главного фото. Теперь align-items:
 * flex-start (см. выше) + height: auto здесь.
 */
.svwoo .svwoo-thumbs-slider .swiper-slide {
        aspect-ratio: 1 / 1;
        height: auto !important;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
}

/* Элемент-миниатюра (ссылка) — тоже квадрат */
.svwoo .svwoo-thumbs-slider__item {
        display: block;
        width: 100%;
        height: auto !important;     /* перебивает height: 100% от swiper.css */
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: var(--brad-regular, 0.2604166667vw);
        position: relative;
        cursor: pointer;
        border: 0.052vw solid transparent;
        -webkit-transition: border-color 0.3s, opacity 0.3s;
        -o-transition: border-color 0.3s, opacity 0.3s;
        transition: border-color 0.3s, opacity 0.3s;
        opacity: 0.7;
        background-color: #F5F5F5; /* фон под прозрачные поля неквадратных фото */
}

/*
 * Картинка миниатюры: полностью видна, пропорционально вписана в квадрат.
 *
 * ВАЖНО: main.css даёт .products__item .item-img-block a img { object-fit: cover }
 * с такой же специфичностью (0,2,1) — поэтому перебиваем !important.
 */
.svwoo .svwoo-thumbs-slider__item img {
        width: 100% !important;
        height: 100% !important;
        -o-object-fit: contain !important;
        object-fit: contain !important;
        display: block;
}
.svwoo .svwoo-thumbs-slider__item:hover,
.svwoo .svwoo-thumbs-slider__item.is-active {
        opacity: 1;
        border-color: var(--main-color, #31B939);
}

/* Плей-оверлей для видео-слайда */
.svwoo .svwoo-thumbs-slider__item--video::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        -webkit-transition: background 0.3s;
        -o-transition: background 0.3s;
        transition: background 0.3s;
}
.svwoo .svwoo-thumbs-slider__item--video:hover::after {
        background: rgba(0, 0, 0, 0.15);
}
.svwoo .svwoo-thumbs-slider__play {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 3.125vw;
        height: 3.125vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 50%;
        background-color: var(--main-color, #31B939);
        -webkit-box-shadow: 0 0 0 0.15625vw rgba(255, 255, 255, 0.6);
        box-shadow: 0 0 0 0.15625vw rgba(255, 255, 255, 0.6);
}
.svwoo .svwoo-thumbs-slider__play svg {
        width: 1.0416666667vw;
        height: 1.0416666667vw;
        margin-left: 0.15625vw;
}
.svwoo .svwoo-thumbs-slider__play svg path {
        fill: #fff;
}

/* Стрелки слайдера */
.svwoo .svwoo-thumbs-slider__nav {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 1.8229166667vw;
        height: 1.8229166667vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background-color: var(--main-color, #31B939);
        border-radius: 50%;
        cursor: pointer;
        -webkit-transition: background-color 0.3s, opacity 0.3s;
        -o-transition: background-color 0.3s, opacity 0.3s;
        transition: background-color 0.3s, opacity 0.3s;
        z-index: 5;
}
.svwoo .svwoo-thumbs-slider__nav:hover {
        background-color: var(--main-color-darken, #1f9f27);
}
.svwoo .svwoo-thumbs-slider__prev {
        left: 0;
}
.svwoo .svwoo-thumbs-slider__next {
        right: 0;
}
.svwoo .svwoo-thumbs-slider__nav.swiper-button-disabled {
        opacity: 0.4;
        cursor: default;
}

/* Адаптив галереи */
@media (max-width: 767px) {
        .svwoo .products__item .item-img-block.svwoo-gallery {
                width: 86.25vw;
                gap: 3vw;
        }
        .svwoo .svwoo-gallery__main {
                height: 69.0625vw;
        }
        .svwoo .svwoo-thumbs-slider {
                padding: 0 6vw;
        }
        /* На мобильном сохраняем квадрат + contain (фото полностью видно) */
        .svwoo .svwoo-thumbs-slider .swiper-slide,
        .svwoo .svwoo-thumbs-slider__item {
                aspect-ratio: 1 / 1;
                height: auto;
        }
        .svwoo .svwoo-thumbs-slider__item img {
                width: 100%;
                height: 100%;
                -o-object-fit: contain;
                object-fit: contain;
        }
        .svwoo .svwoo-thumbs-slider__nav {
                width: 6vw;
                height: 6vw;
        }
        .svwoo .svwoo-thumbs-slider__nav svg {
                width: 6px;
                height: 10px;
        }
        .svwoo .svwoo-thumbs-slider__play {
                width: 10.9375vw;
                height: 10.9375vw;
        }
        .svwoo .svwoo-thumbs-slider__play svg {
                width: 3.5vw;
                height: 3.5vw;
        }
}

/* ---------------------------------------------------------------------------
 * 6. Описание товара под карточкой
 * ------------------------------------------------------------------------- */

.svwoo-description {
        padding-top: 1vw;
        padding-bottom: 4.9vw;
}

.svwoo-description .svwoo-desc-title {
        margin: 0 0 1.56vw;
        font-weight: 600;
        font-size: 2.08vw;
        line-height: 3.13vw;
        letter-spacing: 0.04em;
        color: var(--text-main-color, #1C1C1C);
}

.svwoo-description .editor {
        font-weight: 400;
        font-size: 1.04vw;
        line-height: 1.56vw;
        letter-spacing: 0.02em;
        color: var(--text-main-color, #1C1C1C);
}

.svwoo-description .editor p {
        margin: 0 0 0.78vw;
}

.svwoo-description .editor h2,
.svwoo-description .editor h3 {
        font-weight: 600;
        letter-spacing: 0.03em;
        margin: 1.56vw 0 0.78vw;
}

.svwoo-description .editor img {
        max-width: 100%;
        height: auto;
}

.svwoo-description .editor ul,
.svwoo-description .editor ol {
        padding-left: 1.56vw;
        margin: 0 0 0.78vw;
}

/* ---------------------------------------------------------------------------
 * 6.1 FAQ товара в карточке (.svwoo-faq)
 *     Унаследованы стили .questions из main.css (две колонки на десктопе).
 *     На мобильном — обязательно одна колонка, ВСЕ вопросы видимы,
 *     друг под другом.
 * ------------------------------------------------------------------------- */

.svwoo .svwoo-faq {
        padding-top: 2vw;
        padding-bottom: 4vw;
}

.svwoo .svwoo-faq .questions__title {
        text-align: left;
}

@media (max-width: 767px) {
        /* Жёстко перебиваем main.css: одна колонка, все вопросы видимы */
        .svwoo .svwoo-faq .questions__container {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical !important;
                -webkit-box-direction: normal !important;
                -ms-flex-direction: column !important;
                flex-direction: column !important;
                margin-bottom: 0;
        }

        .svwoo .svwoo-faq .questions__container .container-item {
                width: 100% !important;
                padding-top: 4.6875vw;
        }

        .svwoo .svwoo-faq .questions__container .container-item:first-child {
                padding-top: 0;
        }

        /* Подстраиваем размеры шрифтов/отступов для мобильного */
        .svwoo .svwoo-faq .questions__item {
                padding: 4vw 12vw 4vw 5vw;
        }

        .svwoo .svwoo-faq .questions__item .item-title {
                font-size: 3.5vw;
                line-height: 4.5vw;
        }

        .svwoo .svwoo-faq .questions__item .item-content {
                padding-top: 2.5vw;
                font-size: 3vw;
                line-height: 4.2vw;
        }

        .svwoo .svwoo-faq .questions__item .item-btn {
                width: 5vw;
                height: 5vw;
                top: 4.5vw;
                right: 3vw;
        }

        .svwoo .svwoo-faq .questions__item .item-btn svg {
                width: 1.6vw;
                height: 1.6vw;
        }
}

/* ---------------------------------------------------------------------------
 * 6.2 Страницы /cart/ и /checkout/ (svwoo-page-content)
 *     Базовая обёртка + отступы для checkout-формы WooCommerce,
 *     чтобы не зависеть от темы оформления страницы.
 * ------------------------------------------------------------------------- */

.svwoo .svwoo-page-content,
.svwoo .svwoo-page-wrapper .svwoo-page-content {
        padding: 2vw 0 6vw;
}

/* Заголовок H1 страницы (cart, checkout, my-account и т.д.) */
.svwoo .svwoo-page-title {
        margin: 0 0 2.6vw;
        font-weight: 600;
        font-size: 2.08vw;
        line-height: 3.13vw;
        letter-spacing: 0.04em;
        color: var(--text-main-color, #1C1C1C);
}

.svwoo .svwoo-page-content .woocommerce,
.svwoo .svwoo-page-content .woocommerce-cart-form,
.svwoo .svwoo-page-content .checkout.woocommerce-checkout {
        font-family: 'Raleway', Arial, sans-serif;
}

/* Заголовки H1 — как в каталоге */
.svwoo .svwoo-page-content .woocommerce > h2,
.svwoo .svwoo-page-content .woocommerce-checkout h3 {
        font-weight: 600;
        letter-spacing: 0.03em;
        color: var(--text-main-color, #1C1C1C);
}

.svwoo .svwoo-page-content .woocommerce > h2 {
        font-size: 2.08vw;
        line-height: 3.13vw;
        margin: 0 0 1.56vw;
}

.svwoo .svwoo-page-content .woocommerce-checkout h3 {
        font-size: 1.25vw;
        margin: 1.56vw 0 0.78vw;
}

/* Форма на /checkout/ — две колонки: левая данные, правая заказ */
.svwoo .svwoo-page-content .checkout.woocommerce-checkout {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 2.6vw;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
}

.svwoo .svwoo-page-content .checkout.woocommerce-checkout .checkout-billing,
.svwoo .svwoo-page-content .checkout.woocommerce-checkout .customer-details {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 60%;
        flex: 1 1 60%;
        min-width: 0;
}

.svwoo .svwoo-page-content .checkout.woocommerce-checkout #order_review_heading,
.svwoo .svwoo-page-content .checkout.woocommerce-checkout #order_review {
        -webkit-box-flex: 0;
        -ms-flex: 0 1 35%;
        flex: 0 1 35%;
        min-width: 0;
}

/* Поля формы */
.svwoo .svwoo-page-content .woocommerce form .form-row,
.svwoo .svwoo-page-content .woocommerce-cart-form .form-row {
        padding: 0;
        margin: 0 0 1vw;
}

.svwoo .svwoo-page-content .woocommerce form .form-row label {
        font-weight: 600;
        font-size: 0.83vw;
        letter-spacing: 0.03em;
        margin-bottom: 0.3vw;
        display: block;
}

.svwoo .svwoo-page-content .woocommerce form .form-row input.input-text,
.svwoo .svwoo-page-content .woocommerce form .form-row textarea,
.svwoo .svwoo-page-content .woocommerce form .form-row select {
        width: 100%;
        font-family: 'Raleway', Arial, sans-serif;
        font-size: 0.83vw;
        line-height: 1.25vw;
        padding: 0.62vw 0.83vw;
        border: 0.052vw solid #E8E8E8;
        border-radius: 0;
        background-color: #fff;
        outline: none;
        -webkit-transition: border-color 0.3s;
        -o-transition: border-color 0.3s;
        transition: border-color 0.3s;
}

.svwoo .svwoo-page-content .woocommerce form .form-row input.input-text:focus,
.svwoo .svwoo-page-content .woocommerce form .form-row textarea:focus,
.svwoo .svwoo-page-content .woocommerce form .form-row select:focus {
        border-color: var(--main-color, #31B939);
}

/* Список способов оплаты */
.svwoo .svwoo-page-content .woocommerce ul.payment_methods {
        list-style: none;
        padding: 0;
        margin: 0 0 1.56vw;
        border: 0.052vw solid #E8E8E8;
        border-radius: 0;
}

.svwoo .svwoo-page-content .woocommerce ul.payment_methods li {
        padding: 0.83vw 1vw;
        border-bottom: 0.052vw solid #E8E8E8;
        font-size: 0.83vw;
}

.svwoo .svwoo-page-content .woocommerce ul.payment_methods li:last-child {
        border-bottom: 0;
}

.svwoo .svwoo-page-content .woocommerce ul.payment_methods li label {
        cursor: pointer;
        font-weight: 500;
        display: inline;
}

/* Кнопка «Оплатить» на /checkout/ */
.svwoo .svwoo-page-content #place_order,
.svwoo .svwoo-page-content .woocommerce .checkout-button {
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        height: 3.39vw;
        padding: 0 1vw;
        background-color: var(--main-color, #31B939);
        border: 0.052vw solid var(--main-color, #31B939);
        border-radius: 0;
        color: #fff;
        font-family: 'Raleway', Arial, sans-serif;
        font-weight: 600;
        font-size: 0.83vw;
        letter-spacing: 0.04em;
        text-align: center;
        cursor: pointer;
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
}

.svwoo .svwoo-page-content #place_order:hover,
.svwoo .svwoo-page-content .woocommerce .checkout-button:hover {
        background-color: var(--main-color-darken, #1f9f27);
        border-color: var(--main-color-darken, #1f9f27);
        color: #fff;
}

/* Таблица заказа на /checkout/ и в /cart/ */
.svwoo .svwoo-page-content .woocommerce table.shop_table {
        border: 0.052vw solid #E8E8E8;
        border-radius: 0;
        border-collapse: collapse;
        width: 100%;
        font-size: 0.83vw;
}

.svwoo .svwoo-page-content .woocommerce table.shop_table th,
.svwoo .svwoo-page-content .woocommerce table.shop_table td {
        padding: 0.83vw 1vw;
        border-bottom: 0.052vw solid #E8E8E8;
        text-align: left;
}

.svwoo .svwoo-page-content .woocommerce table.shop_table th {
        background-color: #F8FAFB;
        font-weight: 600;
}

/* Адаптив /cart/ и /checkout/ */
@media (max-width: 767px) {
        .svwoo .svwoo-page-content {
                padding: 5vw 0 12vw;
        }

        .svwoo .svwoo-page-content .woocommerce > h2 {
                font-size: 5vw;
                line-height: 6.5vw;
                margin-bottom: 3vw;
        }

        .svwoo .svwoo-page-content .woocommerce-checkout h3 {
                font-size: 4vw;
                margin: 4vw 0 2vw;
        }

        .svwoo .svwoo-page-content .checkout.woocommerce-checkout {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
        }

        .svwoo .svwoo-page-content .checkout.woocommerce-checkout .checkout-billing,
        .svwoo .svwoo-page-content .checkout.woocommerce-checkout .customer-details,
        .svwoo .svwoo-page-content .checkout.woocommerce-checkout #order_review_heading,
        .svwoo .svwoo-page-content .checkout.woocommerce-checkout #order_review {
                -ms-flex: 1 1 100%;
                flex: 1 1 100%;
                width: 100%;
        }

        .svwoo .svwoo-page-content .woocommerce form .form-row,
        .svwoo .svwoo-page-content .woocommerce-cart-form .form-row {
                margin-bottom: 3vw;
        }

        .svwoo .svwoo-page-content .woocommerce form .form-row label {
                font-size: 3.2vw;
        }

        .svwoo .svwoo-page-content .woocommerce form .form-row input.input-text,
        .svwoo .svwoo-page-content .woocommerce form .form-row textarea,
        .svwoo .svwoo-page-content .woocommerce form .form-row select {
                font-size: 3.2vw;
                line-height: 4.5vw;
                padding: 2vw 2.5vw;
        }

        .svwoo .svwoo-page-content .woocommerce ul.payment_methods li {
                padding: 2.5vw 3vw;
                font-size: 3.2vw;
        }

        .svwoo .svwoo-page-content #place_order,
        .svwoo .svwoo-page-content .woocommerce .checkout-button {
                height: 11vw;
                font-size: 3.2vw;
                line-height: 4.5vw;
        }

        .svwoo .svwoo-page-content .woocommerce table.shop_table,
        .svwoo .svwoo-page-content .woocommerce table.shop_table th,
        .svwoo .svwoo-page-content .woocommerce table.shop_table td {
                font-size: 3vw;
                padding: 2.5vw 3vw;
        }
}

/* ---------------------------------------------------------------------------
 * 7. Сообщения WooCommerce (уведомления Woo о добавлении в корзину)
 * ------------------------------------------------------------------------- */

.svwoo .woocommerce-message,
.svwoo .woocommerce-info,
.svwoo .woocommerce-error {
        font-family: 'Raleway', Arial, sans-serif;
        font-weight: 500;
        font-size: 0.83vw;
        line-height: 1.25vw;
        letter-spacing: 0.03em;
        border-top-width: 2px;
}

.svwoo .woocommerce-message {
        border-top-color: var(--main-color, #31B939);
}

.svwoo .woocommerce-message::before {
        color: var(--main-color, #31B939);
}

/* ---------------------------------------------------------------------------
 * 8. Адаптив (основная сетка адаптивна средствами main.css)
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
        .svwoo-toolbar {
                margin-bottom: 3vw;
        }

        .svwoo-toolbar .woocommerce-result-count {
                font-size: 2.6vw;
                line-height: 4vw;
        }

        .svwoo-toolbar .woocommerce-ordering select {
                font-size: 2.9vw;
                padding: 1.5vw 2vw;
        }

        .svwoo-pagination {
                margin-top: 5vw;
        }

        .svwoo-pagination .page-numbers {
                min-width: 7.5vw;
                height: 7.5vw;
                font-size: 2.9vw;
        }

        .svwoo .breadcrumbs {
                padding-top: 3vw;
                margin-bottom: 4vw;
        }

        .svwoo .breadcrumbs__item a,
        .svwoo .breadcrumbs__item {
                font-size: 2.6vw;
                line-height: 3.2vw;
        }

        .svwoo .item-status span {
                font-size: 2.4vw;
                padding: 0.8vw 1.6vw;
        }

        .svwoo .order-btn,
        .svwoo .info-btn-container .variations_form .single_add_to_cart_button {
                width: 100%;
                height: 11vw;
                font-size: 3.2vw;
                line-height: 4.5vw;
        }

        .svwoo-description {
                padding-bottom: 8vw;
        }

        .svwoo-description .svwoo-desc-title {
                font-size: 5vw;
                line-height: 6.5vw;
                margin-bottom: 3vw;
        }

        .svwoo-description .editor {
                font-size: 3.5vw;
                line-height: 5.2vw;
        }

        .svwoo .woocommerce-message,
        .svwoo .woocommerce-info,
        .svwoo .woocommerce-error {
                font-size: 3vw;
                line-height: 4.5vw;
        }
}