.products {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 40px;
  @media (min-width: 768px) {
    grid-template-columns: repeat(4, 1fr);
  }
  @media (min-width: 1200px) {
    gap: 80px 20px;
  }
}
.product {
  position: relative;
  transition: opacity 0.3s ease;
}
.product__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  @media (hover: hover) {
    &:hover {
      color: var(--color-black);
    }
  }
  @media (min-width: 1440px) {
    gap: 20px;
  }
  & img {
    width: 100%;
    height: 100%;
    aspect-ratio: 9/12;
    object-fit: cover;
  }
  & .fs-h2 {
    margin: 0;
  }
}

.product__link-btn {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: var(--color-yellow);
  transition: all 275ms ease-out;
  @media (hover: hover) {
    &:hover {
      background: var(--color-yellow-hover);
    }
  }
  @media (min-width: 1440px) {
    width: 40px;
    height: 40px;
    & svg {
      width: 10px;
      height: auto;
    }
  }
}
.product__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  @media (min-width: 1200px) {
    height: calc(100vh - 120px);
  }
}
.product-gallery {
  flex: 1;
  width: 100%;
  height: 460px;
  @media (min-width: 768px) {
    height: 1020px;
  }
}
/* ! Прозрачность у продуктов без ховера
.products:has(.product:hover) .product:not(:hover) {
  opacity: 0.3;
}
*/
.product__desc {
  display: none;
  color: var(--color-text);
  position: absolute;
  top: calc(100% + 20px);
  left: 0;
  right: 0;
}
@media (min-width: 768px) {
  .product:hover .product__desc {
    display: block;
    opacity: 1;
  }
  .product__link:hover .product__link-btn {
    transform: scale(1.1);
  }
}

.js-product-gallery .swiper-wrapper {
  transition-timing-function: linear !important;
}

.product-gallery__slide.swiper-slide {
  width: auto;
  height: 100%;
}
.product-gallery__link {
  display: block;
  height: 100%;
}
.product-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product__card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  z-index: 2;
  @media (max-width: 1199px) {
    padding: 40px 20px;
  }
  @media (min-width: 1200px) {
    position: absolute;
    bottom: 20px;
    right: 40px;
    max-width: 450px;
    padding: 30px;
    gap: 60px;
    background-color: rgba(34, 34, 34, 0.8);
    backdrop-filter: blur(20px);
    /* Префикс для поддержки в браузере Safari (macOS/iOS) */
    -webkit-backdrop-filter: blur(20px);
  }
  @media (min-width: 1440px) {
    bottom: 40px;
  }
}
.product__title-price {
  display: flex;
  align-items: baseline;
  gap: 40px;
  margin-bottom: 10px;
}
.product__title {
  flex: 1;
  @media (min-width: 1200px) {
    color: var(--color-white);
  }
}
.product__card .price {
  color: var(--color-black);
  flex-direction: column;
  gap: 0;
  font-size: 18px;
  @media (min-width: 768px) {
    color: var(--color-white);
  }
}

/* Скрываем цену, которую WooCommerce генерирует внутри формы вариаций */
.woocommerce-variation-price {
  display: none !important;
}
.product__shortdesc {
  font-size: 16px;
  line-height: 120%;
  @media (min-width: 1200px) {
    color: rgba(255, 255, 255, 0.6);
  }
}
.advantages__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--color-white);
  padding-block: 20px;
  line-height: 140%;
  @media (max-width: 767px) {
    flex-direction: column;
    text-align: center;
  }
  @media (min-width: 1200px) {
    padding-block: 13px;
    line-height: 100%;
  }
}
.product__advantages {
  background-color: var(--color-black);
}

/* --- Основная сетка --- */
@media (max-width: 1199px) {
  .product-info {
    padding-block: 20px;
  }
}

.product-info__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: flex-start; /* Обязательно для работы sticky */
  gap: 50px;
  @media (min-width: 1200px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (min-width: 1200px) {
  .product-info__media-sticky {
    position: sticky;
    top: 80px;
  }
  .product-info__content {
    padding: 60px 40px 0;
  }
}

.product-info__video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  background-color: #f0f0f0;
}

.product-info__features {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 50px;
  color: var(--color-yellow);
}

.product-info__feature {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  line-height: 120%;
  font-weight: 400;
}

.product-info__feature-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

/* --- Аккордеоны --- */
.product-info__accordion {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-gray-dark);
  padding-top: 20px;
  &:last-child .product-info__accordion-body {
    padding-bottom: 0 !important;
  }
}

.product-info__accordion-header {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* Плавное открытие контента */
.product-info__accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.product-info__accordion.is-open .product-info__accordion-body {
  grid-template-rows: 1fr;
  padding-bottom: 20px;
}

.product-info__accordion-content {
  overflow: hidden; /* Скрываем контент при 0fr */
}

/* Обертка для иконки, чтобы она не сжималась */
.product-info__accordion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0; /* Запрещаем сплющиваться, если текст заголовка слишком длинный */
}

/* Настраиваем плавную анимацию для вертикальной линии */
.js-icon-vline {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  transform-origin: center; /* Анимация будет идти от центра крестика */
}

/* Когда аккордеон получает класс is-open (открыт) */
.product-info__accordion.is-open .js-icon-vline {
  /* Растворяем вертикальную линию... */
  opacity: 0;

  /* ...и слегка поворачиваем её при исчезновении для премиального эффекта */
  transform: rotate(90deg) scale(0.5);
}
/* Скрываем поле выбора количества в карточке товара */
.woocommerce-product-details__short-description + .cart .quantity,
.woocommerce-variation-add-to-cart .quantity {
  display: none !important;
}

.product-params__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-params__item {
  display: flex;
  justify-content: space-between; /* Разносит название и описание по краям */
  align-items: baseline; /* Выравнивание по базовой линии текста */
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

.product-params__item:last-child {
  border-bottom: none;
}

.product-params__name {
  width: 40%; /* Фиксированная ширина для левой колонки, чтобы список был ровным */
  flex-shrink: 0;
}

.product-params__desc {
  width: 60%;
  text-align: right; /* Прижимаем текст значения к правому краю */
}

/* --- Сброс дефолтов для Swiper (если еще не добавили) --- */
.product-upsells__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-upsells__list .swiper-slide {
  width: 240px;
}

/* --- Карточка Upsell --- */
.product-upsell-card {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Отступ между фото и контентом */
}

/* Фотография */
.product-upsell-card__image-link {
  display: block;
  width: 100%;
  background-color: #f5f5f5; /* Легкий фон на случай PNG-картинок */
}

.product-upsell-card__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Блок действий (Кнопка + Цена) */
.product-upsell-card__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* Кастомная кнопка "ДОБАВИТЬ" */
.product-upsell-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-yellow);
  color: var(--color-black);
  font-size: 14px;
  font-weight: 600;
  line-height: 100%;
  text-transform: uppercase;
  height: auto;
  padding: 10px 20px;
  text-decoration: none;
  transition: all 275ms ease-out;
}
.product-upsell-card__btn:hover {
  color: var(--color-black);
  background-color: var(--color-yellow-hover);
}
.product-upsell-card__svg {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}
.product-upsell-card__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Цена */
.product-upsell-card__price {
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

/* WooCommerce оборачивает цены в свои теги, выравниваем их */
.product-upsell-card__price .amount {
  font-weight: 400;
}
.product-upsell-card__price del {
  opacity: 0.5;
  font-size: 14px;
  margin-right: 6px;
}

/* Название товара */
.product-upsell-card__title-link {
  text-decoration: none;
  color: #222;
  display: block;
}

.product-upsell-card__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 0;
  transition: color 0.2s ease;
}

.product-upsell-card__title-link:hover .product-upsell-card__title {
  color: #ffb800; /* Ховер-эффект для названия (опционально) */
}
.woocommerce .product-upsell-card__image {
  width: 100%;
}

.product-features {
  overflow: hidden; /* Чтобы слайдер не вылезал за пределы экрана и не создавал скролл */
}

/* Сброс стилей списка, если они есть */
.product-features__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-features__slide {
  height: 300px !important;
}
@media (min-width: 1200px) {
  .product-features__slide {
    width: auto !important; /* Ключевое правило: ширина зависит от контента */
  }
}
@media (min-width: 1440px) {
  .product-features__slide {
    height: 420px !important; /* Высота секции на десктопе. Подстройте под ваш макет */
  }
}

.product-features__link {
  display: block;
  height: 100%;
  cursor: zoom-in; /* Курсор-лупа подсказывает, что можно увеличить */
}

.product-features__image {
  display: block;
  height: 100%;
  width: auto;
  object-fit: cover; /* Изображение заполнит высоту без искажений */
  /* Убираем рамки на случай, если они есть по умолчанию */
  border: none;
}

@media (max-width: 767px) {
  .product-features {
    margin: 40px 0;
  }
}

/* --- Секция Лукбук --- */
.product-lookbook__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ссылка-контейнер */
.product-lookbook__link {
  display: block;
  width: 100%;
  /* Фиксируем пропорции фотографий (например, 4:5 - часто используется для одежды) 
       Если нужны исходные пропорции, удалите aspect-ratio и задайте высоту через JS или оставьте auto */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  background-color: #f5f5f5; /* Цвет-заглушка пока грузится фото */
}

/* Эффект ховера как в главной галерее (по желанию) */
.product-lookbook__link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(34, 34, 34, 0.3);
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4V20M4 12H20' stroke='white' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.product-lookbook__link:hover::after {
  opacity: 1;
}

/* Изображение */
.product-lookbook__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Идеально заполнит заданный aspect-ratio без искажений */
  transition: transform 0.5s ease; /* Плавное увеличение */
}

/* Легкий зум картинки при наведении (смотрится очень стильно) */
.product-lookbook__link:hover .product-lookbook__image {
  transform: scale(1.05);
}
.product-lookbook,
.product-features {
  overflow: hidden;
}
.product-lookbook .product-lookbook__slider,
.product-features .product-features__slider {
  overflow: visible;
}
.product-complect__list {
  margin: 0;
  padding: 0;
}
table.variations {
  margin-bottom: 40px;
}
table.variations tr {
  display: flex;
  flex-direction: column;
  gap: 10px;
  & label {
    color: var(--color-gray-dark);
    font-size: 14px;
    line-height: 120%;
    text-transform: lowercase;
    @media (max-width: 1199px) {
      color: var(--color-black);
    }
  }
}
.product-sizes__guide {
  font-size: 14px;
  line-height: 120%;
  color: var(--color-black);
  text-transform: lowercase;
  @media (min-width: 1200px) {
    color: var(--color-white);
  }
}
table.variations tr:not(:last-child) {
  margin-bottom: 30px;
}
.single_add_to_cart_button {
  flex: 1;
  justify-content: center;
}
/* --- Контейнер рейтинга --- */
.product-rating {
  margin-bottom: 12px; /* Отступ до заголовка H1 */
}

/* Ссылка (оборачивает и звезды, и цифру) */
.product-rating__link {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* Расстояние от звезд до скобок */
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.product-rating__link:hover {
  opacity: 0.8;
}

/* --- Механика звезд --- */
.product-rating__stars {
  position: relative;
  display: inline-flex;
  line-height: 1;
}

/* Слой 1: Фоновые звезды */
.product-rating__stars-bg {
  display: flex;
  gap: 4px;
  color: #e0e0e0; /* Светло-серый цвет для недозаполненных звезд (если рейтинг, например, 4) */
}

/* Слой 2: Желтые звезды (перекрывают фоновые) */
.product-rating__stars-filled {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 4px;
  color: #ffb800; /* Желтый акцентный цвет */
  overflow: hidden; /* Обрезает звезды, если рейтинг дробный */
  white-space: nowrap;
}

.product-rating__stars svg {
  flex-shrink: 0;
}

/* --- Текст с количеством (3) --- */
.product-rating__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-black);
  @media (min-width: 768px) {
    color: var(--color-white);
    font-size: 16px;
  }
}

/* --- Состояние "0 отзывов" (Модификатор) --- */
.product-rating--empty .product-rating__stars-bg svg {
  color: #ffffff; /* Делаем звезды белыми, как просили */
  stroke: #e0e0e0; /* Добавляем тонкую серую обводку, чтобы белые звезды было видно на белом сайте */
  stroke-width: 1px;
}

.product-rating--empty .product-rating__count {
  color: #999999; /* Делаем (0) более тусклым, чтобы не отвлекало */
}
/* --- Сетка секции отзывов --- */

.product-reviews__container {
  display: flex;
  gap: 48px;
}
.product-reviews .section__header {
  flex-direction: row !important;
}

/* Левая колонка */
.product-reviews__sidebar {
  width: 240px; /* Фиксированная ширина левой колонки */
  flex-shrink: 0;
}

.product-reviews__title {
  margin: 0 0 16px 0;
  text-transform: uppercase;
}

.product-reviews__write-btn {
  font-size: 16px;
  line-height: 120%;
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

/* Правая колонка */
.product-reviews__main {
  display: grid;
  align-items: start;
  grid-template-columns: 100%;
  gap: 40px;
  @media (min-width: 1200px) {
    grid-template-columns: 180px calc(100% - 180px);
  }
}
.product-reviews__main > *:last-child {
  display: none;
}

/* Навигация (Стрелки) */
.product-reviews__nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.product-reviews__arrow {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
}
.product-reviews__arrow:hover {
  opacity: 0.6;
}

/* Очистка списка для слайдера */
.product-reviews__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Стили Карточки Отзыва (.review-card) --- */
.swiper.js-reviews-slider {
  overflow: visible;
}
.product-reviews {
  overflow: hidden;
}
.review-card {
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  border-top: 1px solid var(--color-black); /* Черная полоска сверху отзыва, как на макете */
  height: auto; /* Для слайдера */
}

.review-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
}

.review-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 100%;
  color: var(--color-yellow);
}
.review-card__author {
  margin: 0;
}
.review-card__stars {
  display: flex;
  gap: 2px;
}
.review-card__stars svg {
  width: 16px;
  height: 16px;
}

.review-card__content {
  margin-bottom: 20px;
  line-height: 160%;
}
.review-card__content p {
  margin: 0;
}

.review-card__date {
  margin-top: auto; /* Прижимает дату к низу, если отзывы разной высоты */
  font-size: 16px;
  color: var(--color-gray-dark);
}

/* --- Адаптив --- */
@media (max-width: 768px) {
  .product-reviews__container {
    flex-direction: column;
    gap: 32px;
  }
  .product-reviews__sidebar {
    width: 100%;
  }
}
/* --- Контейнер модального окна Fancybox --- */
#review_form_wrapper {
  width: 100%;
  max-width: 500px;
  padding: 40px;
  background: #ffffff;
  border-radius: 4px; /* По желанию */
}

#review_form_wrapper hspan,
#review_form_wrapper .comment-reply-title {
  display: block;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  text-transform: uppercase;
  color: #222;
}

/* --- МАГИЯ ЗВЕЗДОЧЕК (ПРО версия) --- */
.comment-form-rating {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.comment-form-rating label {
  font-size: 15px;
  font-weight: 700;
  color: #222;
}

.comment-form-rating select {
  display: none;
}

/* 1. Жестко убиваем дефолтные шрифтовые иконки WooCommerce */
#review_form p.stars a::before {
  display: none !important;
}
#review_form p.stars {
  margin: 0;
}
/* Контейнер (WooCommerce оборачивает ссылки в тег span) */
#review_form p.stars span {
  display: flex;
  gap: 4px;
  margin: 0;
}

/* Базовая настройка невидимых ссылок */
#review_form p.stars a {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  text-indent: -9999px;
  transition: transform 0.1s ease;
}

#review_form p.stars a:hover {
  transform: scale(1.1);
}

/* =========================================
   ЛОГИКА ЗАКРАШИВАНИЯ (ЧИСТЫЙ CSS)
   ========================================= */

/* =========================================
   ЛОГИКА ЗАКРАШИВАНИЯ (С ВАШЕЙ SVG ЗВЕЗДОЙ)
   ========================================= */

/* А. ПО УМОЛЧАНИЮ: Все звезды серые */
#review_form p.stars a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Ваша СЕРАЯ звезда */
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.3512 0.196596C6.38041 0.13757 6.42555 0.087884 6.4815 0.0531459C6.53746 0.0184078 6.60201 0 6.66787 0C6.73373 0 6.79828 0.0184078 6.85423 0.0531459C6.91019 0.087884 6.95532 0.13757 6.98453 0.196596L8.52453 3.31593C8.62598 3.52124 8.77574 3.69887 8.96095 3.83356C9.14616 3.96826 9.36128 4.056 9.58786 4.08926L13.0319 4.59326C13.0971 4.60272 13.1584 4.63024 13.2089 4.67273C13.2593 4.71521 13.2968 4.77096 13.3172 4.83367C13.3376 4.89637 13.34 4.96353 13.3243 5.02755C13.3085 5.09157 13.2751 5.1499 13.2279 5.19593L10.7372 7.62126C10.5729 7.78133 10.45 7.97892 10.3791 8.19702C10.3081 8.41511 10.2912 8.64719 10.3299 8.87326L10.9179 12.2999C10.9294 12.3652 10.9223 12.4323 10.8975 12.4937C10.8727 12.5551 10.8312 12.6083 10.7776 12.6473C10.724 12.6862 10.6605 12.7093 10.5944 12.7139C10.5284 12.7185 10.4623 12.7044 10.4039 12.6733L7.3252 11.0546C7.12234 10.9481 6.89665 10.8924 6.66753 10.8924C6.43841 10.8924 6.21272 10.9481 6.00987 11.0546L2.93187 12.6733C2.87342 12.7042 2.80746 12.7181 2.7415 12.7134C2.67554 12.7087 2.61221 12.6856 2.55873 12.6467C2.50525 12.6078 2.46375 12.5547 2.43897 12.4934C2.41419 12.4321 2.4071 12.3651 2.41853 12.2999L3.00587 8.87393C3.04466 8.64775 3.02786 8.41553 2.95689 8.19729C2.88593 7.97906 2.76294 7.78137 2.59853 7.62126L0.107866 5.1966C0.0602624 5.15062 0.0265286 5.09219 0.0105081 5.02798C-0.00551242 4.96376 -0.00317558 4.89634 0.0172523 4.83339C0.0376802 4.77044 0.0753778 4.71449 0.126051 4.67192C0.176724 4.62935 0.238335 4.60186 0.303866 4.5926L3.7472 4.08926C3.97404 4.05626 4.18946 3.96863 4.37492 3.83392C4.56039 3.69921 4.71034 3.52144 4.81187 3.31593L6.3512 0.196596Z' fill='%23E0E0E0'/%3E%3C/svg%3E") !important;
}

/* Б. ПРИ НАВЕДЕНИИ МЫШИ */
/* Делаем все 5 звезд желтыми... */
#review_form p.stars span:hover a::after {
  /* Ваша ЖЕЛТАЯ звезда (#FEBD10) */
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.3512 0.196596C6.38041 0.13757 6.42555 0.087884 6.4815 0.0531459C6.53746 0.0184078 6.60201 0 6.66787 0C6.73373 0 6.79828 0.0184078 6.85423 0.0531459C6.91019 0.087884 6.95532 0.13757 6.98453 0.196596L8.52453 3.31593C8.62598 3.52124 8.77574 3.69887 8.96095 3.83356C9.14616 3.96826 9.36128 4.056 9.58786 4.08926L13.0319 4.59326C13.0971 4.60272 13.1584 4.63024 13.2089 4.67273C13.2593 4.71521 13.2968 4.77096 13.3172 4.83367C13.3376 4.89637 13.34 4.96353 13.3243 5.02755C13.3085 5.09157 13.2751 5.1499 13.2279 5.19593L10.7372 7.62126C10.5729 7.78133 10.45 7.97892 10.3791 8.19702C10.3081 8.41511 10.2912 8.64719 10.3299 8.87326L10.9179 12.2999C10.9294 12.3652 10.9223 12.4323 10.8975 12.4937C10.8727 12.5551 10.8312 12.6083 10.7776 12.6473C10.724 12.6862 10.6605 12.7093 10.5944 12.7139C10.5284 12.7185 10.4623 12.7044 10.4039 12.6733L7.3252 11.0546C7.12234 10.9481 6.89665 10.8924 6.66753 10.8924C6.43841 10.8924 6.21272 10.9481 6.00987 11.0546L2.93187 12.6733C2.87342 12.7042 2.80746 12.7181 2.7415 12.7134C2.67554 12.7087 2.61221 12.6856 2.55873 12.6467C2.50525 12.6078 2.46375 12.5547 2.43897 12.4934C2.41419 12.4321 2.4071 12.3651 2.41853 12.2999L3.00587 8.87393C3.04466 8.64775 3.02786 8.41553 2.95689 8.19729C2.88593 7.97906 2.76294 7.78137 2.59853 7.62126L0.107866 5.1966C0.0602624 5.15062 0.0265286 5.09219 0.0105081 5.02798C-0.00551242 4.96376 -0.00317558 4.89634 0.0172523 4.83339C0.0376802 4.77044 0.0753778 4.71449 0.126051 4.67192C0.176724 4.62935 0.238335 4.60186 0.303866 4.5926L3.7472 4.08926C3.97404 4.05626 4.18946 3.96863 4.37492 3.83392C4.56039 3.69921 4.71034 3.52144 4.81187 3.31593L6.3512 0.196596Z' fill='%23FEBD10'/%3E%3C/svg%3E") !important;
}
/* ...а те, что идут ПОСЛЕ курсора, принудительно возвращаем в серый! */
#review_form p.stars span a:hover ~ a::after {
  /* Ваша СЕРАЯ звезда */
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.3512 0.196596C6.38041 0.13757 6.42555 0.087884 6.4815 0.0531459C6.53746 0.0184078 6.60201 0 6.66787 0C6.73373 0 6.79828 0.0184078 6.85423 0.0531459C6.91019 0.087884 6.95532 0.13757 6.98453 0.196596L8.52453 3.31593C8.62598 3.52124 8.77574 3.69887 8.96095 3.83356C9.14616 3.96826 9.36128 4.056 9.58786 4.08926L13.0319 4.59326C13.0971 4.60272 13.1584 4.63024 13.2089 4.67273C13.2593 4.71521 13.2968 4.77096 13.3172 4.83367C13.3376 4.89637 13.34 4.96353 13.3243 5.02755C13.3085 5.09157 13.2751 5.1499 13.2279 5.19593L10.7372 7.62126C10.5729 7.78133 10.45 7.97892 10.3791 8.19702C10.3081 8.41511 10.2912 8.64719 10.3299 8.87326L10.9179 12.2999C10.9294 12.3652 10.9223 12.4323 10.8975 12.4937C10.8727 12.5551 10.8312 12.6083 10.7776 12.6473C10.724 12.6862 10.6605 12.7093 10.5944 12.7139C10.5284 12.7185 10.4623 12.7044 10.4039 12.6733L7.3252 11.0546C7.12234 10.9481 6.89665 10.8924 6.66753 10.8924C6.43841 10.8924 6.21272 10.9481 6.00987 11.0546L2.93187 12.6733C2.87342 12.7042 2.80746 12.7181 2.7415 12.7134C2.67554 12.7087 2.61221 12.6856 2.55873 12.6467C2.50525 12.6078 2.46375 12.5547 2.43897 12.4934C2.41419 12.4321 2.4071 12.3651 2.41853 12.2999L3.00587 8.87393C3.04466 8.64775 3.02786 8.41553 2.95689 8.19729C2.88593 7.97906 2.76294 7.78137 2.59853 7.62126L0.107866 5.1966C0.0602624 5.15062 0.0265286 5.09219 0.0105081 5.02798C-0.00551242 4.96376 -0.00317558 4.89634 0.0172523 4.83339C0.0376802 4.77044 0.0753778 4.71449 0.126051 4.67192C0.176724 4.62935 0.238335 4.60186 0.303866 4.5926L3.7472 4.08926C3.97404 4.05626 4.18946 3.96863 4.37492 3.83392C4.56039 3.69921 4.71034 3.52144 4.81187 3.31593L6.3512 0.196596Z' fill='%23E0E0E0'/%3E%3C/svg%3E") !important;
}

/* В. ПОСЛЕ КЛИКА (ФИКСАЦИЯ РЕЙТИНГА) */
/* Делаем все 5 звезд желтыми... */
#review_form p.stars.selected span a::after {
  /* Ваша ЖЕЛТАЯ звезда (#FEBD10) */
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.3512 0.196596C6.38041 0.13757 6.42555 0.087884 6.4815 0.0531459C6.53746 0.0184078 6.60201 0 6.66787 0C6.73373 0 6.79828 0.0184078 6.85423 0.0531459C6.91019 0.087884 6.95532 0.13757 6.98453 0.196596L8.52453 3.31593C8.62598 3.52124 8.77574 3.69887 8.96095 3.83356C9.14616 3.96826 9.36128 4.056 9.58786 4.08926L13.0319 4.59326C13.0971 4.60272 13.1584 4.63024 13.2089 4.67273C13.2593 4.71521 13.2968 4.77096 13.3172 4.83367C13.3376 4.89637 13.34 4.96353 13.3243 5.02755C13.3085 5.09157 13.2751 5.1499 13.2279 5.19593L10.7372 7.62126C10.5729 7.78133 10.45 7.97892 10.3791 8.19702C10.3081 8.41511 10.2912 8.64719 10.3299 8.87326L10.9179 12.2999C10.9294 12.3652 10.9223 12.4323 10.8975 12.4937C10.8727 12.5551 10.8312 12.6083 10.7776 12.6473C10.724 12.6862 10.6605 12.7093 10.5944 12.7139C10.5284 12.7185 10.4623 12.7044 10.4039 12.6733L7.3252 11.0546C7.12234 10.9481 6.89665 10.8924 6.66753 10.8924C6.43841 10.8924 6.21272 10.9481 6.00987 11.0546L2.93187 12.6733C2.87342 12.7042 2.80746 12.7181 2.7415 12.7134C2.67554 12.7087 2.61221 12.6856 2.55873 12.6467C2.50525 12.6078 2.46375 12.5547 2.43897 12.4934C2.41419 12.4321 2.4071 12.3651 2.41853 12.2999L3.00587 8.87393C3.04466 8.64775 3.02786 8.41553 2.95689 8.19729C2.88593 7.97906 2.76294 7.78137 2.59853 7.62126L0.107866 5.1966C0.0602624 5.15062 0.0265286 5.09219 0.0105081 5.02798C-0.00551242 4.96376 -0.00317558 4.89634 0.0172523 4.83339C0.0376802 4.77044 0.0753778 4.71449 0.126051 4.67192C0.176724 4.62935 0.238335 4.60186 0.303866 4.5926L3.7472 4.08926C3.97404 4.05626 4.18946 3.96863 4.37492 3.83392C4.56039 3.69921 4.71034 3.52144 4.81187 3.31593L6.3512 0.196596Z' fill='%23FEBD10'/%3E%3C/svg%3E") !important;
}
/* ...и перекрашиваем в серый все звезды, которые идут ПОСЛЕ класса .active */
#review_form p.stars.selected span a.active ~ a::after {
  /* Ваша СЕРАЯ звезда */
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='13' viewBox='0 0 14 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.3512 0.196596C6.38041 0.13757 6.42555 0.087884 6.4815 0.0531459C6.53746 0.0184078 6.60201 0 6.66787 0C6.73373 0 6.79828 0.0184078 6.85423 0.0531459C6.91019 0.087884 6.95532 0.13757 6.98453 0.196596L8.52453 3.31593C8.62598 3.52124 8.77574 3.69887 8.96095 3.83356C9.14616 3.96826 9.36128 4.056 9.58786 4.08926L13.0319 4.59326C13.0971 4.60272 13.1584 4.63024 13.2089 4.67273C13.2593 4.71521 13.2968 4.77096 13.3172 4.83367C13.3376 4.89637 13.34 4.96353 13.3243 5.02755C13.3085 5.09157 13.2751 5.1499 13.2279 5.19593L10.7372 7.62126C10.5729 7.78133 10.45 7.97892 10.3791 8.19702C10.3081 8.41511 10.2912 8.64719 10.3299 8.87326L10.9179 12.2999C10.9294 12.3652 10.9223 12.4323 10.8975 12.4937C10.8727 12.5551 10.8312 12.6083 10.7776 12.6473C10.724 12.6862 10.6605 12.7093 10.5944 12.7139C10.5284 12.7185 10.4623 12.7044 10.4039 12.6733L7.3252 11.0546C7.12234 10.9481 6.89665 10.8924 6.66753 10.8924C6.43841 10.8924 6.21272 10.9481 6.00987 11.0546L2.93187 12.6733C2.87342 12.7042 2.80746 12.7181 2.7415 12.7134C2.67554 12.7087 2.61221 12.6856 2.55873 12.6467C2.50525 12.6078 2.46375 12.5547 2.43897 12.4934C2.41419 12.4321 2.4071 12.3651 2.41853 12.2999L3.00587 8.87393C3.04466 8.64775 3.02786 8.41553 2.95689 8.19729C2.88593 7.97906 2.76294 7.78137 2.59853 7.62126L0.107866 5.1966C0.0602624 5.15062 0.0265286 5.09219 0.0105081 5.02798C-0.00551242 4.96376 -0.00317558 4.89634 0.0172523 4.83339C0.0376802 4.77044 0.0753778 4.71449 0.126051 4.67192C0.176724 4.62935 0.238335 4.60186 0.303866 4.5926L3.7472 4.08926C3.97404 4.05626 4.18946 3.96863 4.37492 3.83392C4.56039 3.69921 4.71034 3.52144 4.81187 3.31593L6.3512 0.196596Z' fill='%23E0E0E0'/%3E%3C/svg%3E") !important;
}

/* --- Стилизация полей ввода --- */
.comment-form-comment,
.comment-form-author,
.comment-form-email {
  margin-bottom: 16px;
}

.comment-form-comment label,
.comment-form-author label,
.comment-form-email label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

#review_form textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 120%;
}

#review_form input[type="text"]:focus,
#review_form input[type="email"]:focus,
#review_form textarea:focus {
  border-color: #ffb800;
}

/* Желтая кнопка отправки */
#review_form .submit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 24px;
  padding: 16px 24px;
  background-color: #ffb800;
  color: #222;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

#review_form .submit:hover {
  opacity: 0.8;
}
.product-reviews__arrow {
  height: 14px;
}
.reviews-slider {
  padding-top: 20px;
}
@media (max-width: 1199px) {
  .single-product
    .merchant-variations-wrapper
    .merchant-variation-type-button
    > a {
    color: var(--color-black);
    font-size: 14px !important;
  }
  .single-product
    .merchant-variations-wrapper
    .merchant-variation-type-button
    > a {
    padding: 6px 12px !important;
  }
}
/* Прячем навигацию слайдера товара по умолчанию (для десктопа) */
.product-gallery__nav {
  display: none;
}

/* Показываем и стилизуем только на мобильных устройствах */
@media (max-width: 767px) {
  .product-gallery__slider {
    position: relative; /* Убедитесь, что контейнер имеет relative для абсолютного позиционирования стрелок */
  }

  .product-gallery__nav {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none; /* Пропускаем клики сквозь контейнер, чтобы работал свайп */
  }

  .product-gallery__arrow {
    pointer-events: auto; /* Возвращаем кликабельность самим кнопкам */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition:
      opacity 0.2s ease,
      background-color 0.2s ease;
  }

  /* Стилизация неактивной стрелки (Swiper автоматически добавляет этот класс) */
  .product-gallery__arrow.swiper-button-disabled {
    opacity: 0.4;
    pointer-events: none;
  }
}
.product-complect {
  overflow: hidden;
}
.swiper.js-complect-slider {
  overflow: visible;
}

.product-colors {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}

.product-variation__label {
  font-weight: 400;
  color: var(--color-black);
  font-size: 14px;
  line-height: 100%;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  text-transform: lowercase;
  @media (min-width: 1200px) {
    color: var(--color-gray-dark);
  }
}

.product-colors__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.product-colors__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
}
.product-colors__current {
  color: var(--color-white);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  text-transform: uppercase;
  @media (max-width: 1199px) {
    color: var(--color-black);
  }
}
.product-sizes__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: var(--color-gray-dark);
  @media (min-width: 1200px) {
    color: var(--color-gray-light);
  }
}
.product-colors__swatch {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid var(--color-gray-dark);
  transition: transform 0.2s ease;
}

/* Эффект при наведении */
.product-colors__swatch:hover {
  transform: scale(1.05);
}

/* Состояние активного цвета (добавляем внешнее кольцо) */
.product-colors__swatch--active {
  width: 40px;
  height: 40px;
}

/* Шапка атрибута (как мы делали ранее) */
table.variations th.label {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
  padding: 0 0 5px 0 !important;
  border-bottom: 1px solid var(--color-black);
  @media (min-width: 1200px) {
    border-color: rgba(255, 255, 255, 0.3);
  }
}

table.variations th.label label {
  font-size: 14px;
  margin: 0 !important;
  @media (min-width: 1200px) {
    color: var(--color-gray-dark);
  }
}

table.variations td.value {
  display: block;
  width: 100%;
  padding: 0;
}

/* Скрываем родной селект полностью */
.product-sizes__hidden-select {
  display: none !important;
}

/* Контейнер кнопок */
.product-sizes__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Сами кнопки */
.product-sizes__btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 6px 13px;
  background-color: transparent;
  color: var(--color-black);
  border: 2px solid transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 100%;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  @media (min-width: 1200px) {
    color: var(--color-white);
    font-size: 18px;
  }
}

.product-sizes__btn:hover {
  border-color: currentColor;
  color: var(--color-yellow);
}

/* Активное состояние кнопки */
.product-sizes__btn--active {
  border-color: currentColor;
  color: var(--color-yellow);
  cursor: default;
}

/* Состояние, если размера нет в наличии */
.product-sizes__btn--disabled {
  opacity: 0.3;
  pointer-events: none;
  text-decoration: line-through;
}

/* Кнопка сброса */
.product-sizes__reset {
  font-size: 13px;
  color: #888;
  text-decoration: underline;
  display: none; /* WooCommerce сам управляет видимостью через JS */
}
.woosb-price {
  color: var(--color-white);
}
.woosb-title,
.woosb-title a {
  color: var(--color-white);
}
.woosb-price-ori {
  display: flex;
  flex-direction: column;
  & del {
    order: 2;
  }
}
.woosb-products {
  border: 0;
}
.woosb-products .woosb-product {
  padding: 8px 0;
  border: 0;
}
.stock.out-of-stock,
.woocommerce-variation-availability {
  font-size: 18px;
  color: var(--color-text);
  margin-bottom: 20px;
}