/* ============================================================
   BVRLY — Цветовые свотчи на странице товара
   Вариант A: без картинок → dot-свотчи (.t-product__option-item_color)
   Вариант B: с картинками → фото-свотчи (.t-product__option-item_image)
   Вставить в: Настройки сайта → Дополнительные стили (CSS)
   ============================================================ */

/* 1. Показываем блок с вариантами цвета */
.js-product-edition-option {
  display: block !important;
  margin-bottom: 28px;
}

/* Скрыть выбор количества товара */
.bv-qty { display: none !important; }


/* Скрываем нативный select только у цветовых опций */
.js-product-edition-option .t-product__option-variants_regular { display: none !important; }
.js-product-option .t-product__option-variants_regular { display: block !important; }
.js-product-option .t-product__option-select { display: none !important; }
.js-product-option .t-product__option-variants::before,
.js-product-option .t-product__option-variants::after { display: none !important; content: none !important; }


/* 3. Контейнер свотчей — горизонтальный flex (оба варианта) */
.t-product__option-variants_custom {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  margin: 0 !important;
  align-items: flex-start !important;
}

/* ── ВАРИАНТ A: без картинок (dot-свотчи) ──────────────────
   Структура: .t-product__option-item_color
                input[radio]
                .t-product__option-checkmark  ← background-color
                .t-product__option-title
   ────────────────────────────────────────────────────────── */

.t-product__option-item_color {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  border-radius: 50% !important;
  border: 1px solid #e6e6e6 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  background: #fff !important;
  position: relative !important;
  flex: none !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.t-product__option-item_color input,
.t-product__option-item_color input[type="radio"] {
  display: none !important;
}

.t-product__option-item_color .t-product__option-title {
  display: none !important;
}

.t-product__option-item_color .t-product__option-checkmark {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  display: block !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.t-product__option-item_color .t-product__option-checkmark::before,
.t-product__option-item_color .t-product__option-checkmark::after {
  display: none !important;
  content: none !important;
}

.t-product__option-item_color.t-product__option-item_active {
  box-shadow: 0 0 0 1.5px #111111 !important;
  border-color: #ffffff !important;
}

.t-product__option-item_color:hover {
  box-shadow: 0 0 0 1.5px #cfcfcf !important;
}

.t-product__option-item_color.t-product__option-item_active:hover {
  box-shadow: 0 0 0 1.5px #111111 !important;
  border-color: #ffffff !important;
}

/* ── ВАРИАНТ B: с картинками (фото-свотчи) ─────────────────
   Структура: .t-product__option-item_image (label)
                input[radio]
                .t-product__option-checkmark.t-bgimg  ← background-image: url(...)
                .t-product__option-title_radio
   ────────────────────────────────────────────────────────── */

.t-product__option-item_image {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  border-radius: 50% !important;
  border: 1px solid #e6e6e6 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  background: #f4f4f4 !important;
  position: relative !important;
  flex: none !important;
  overflow: hidden !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.t-product__option-item_image input,
.t-product__option-item_image input[type="radio"] {
  display: none !important;
}

.t-product__option-item_image .t-product__option-title,
.t-product__option-item_image .t-product__option-title_radio {
  display: none !important;
}

/* Картинка через background-image занимает весь круг */
.t-product__option-item_image .t-product__option-checkmark {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background-size: cover !important;
  background-position: center 30% !important;
  background-repeat: no-repeat !important;
  flex-shrink: 0 !important;
}

.t-product__option-item_image .t-product__option-checkmark::before,
.t-product__option-item_image .t-product__option-checkmark::after {
  display: none !important;
  content: none !important;
}

.t-product__option-item_image.t-product__option-item_active {
  box-shadow: 0 0 0 1.5px #111111 !important;
  border-color: #ffffff !important;
  overflow: visible !important;
}

/* При активном состоянии нужен border внутри (overflow:visible убирает обрезку) */
.t-product__option-item_image.t-product__option-item_active .t-product__option-checkmark {
  border-radius: 50% !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}

.t-product__option-item_image:hover {
  box-shadow: 0 0 0 1.5px #cfcfcf !important;
}

.t-product__option-item_image.t-product__option-item_active:hover {
  box-shadow: 0 0 0 1.5px #111111 !important;
}

/* ── ОБЩЕЕ ──────────────────────────────────────────────── */

/* Заголовок «Цвет» */
.js-product-edition-option .js-product-edition-option-name {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #555555 !important;
  margin-bottom: 13px !important;
  display: block !important;
}

/* Кастомный дропдаун */
.bv-tdd { position: relative; margin-top: 8px; }
.bv-tdd-btn {
  width: 100%; height: 54px; border: 1px solid #e6e6e6; background: #fff;
  padding: 0 46px 0 16px; font-size: 15px; color: #111; text-align: left;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: Arial, sans-serif; position: relative; box-sizing: border-box;
  border-radius: 0; outline: none; -webkit-appearance: none;
}
.bv-tdd-btn:hover { border-color: #bdbdbd; }
.bv-tdd.open .bv-tdd-btn { border-color: #111; }
.bv-tdd-code {
  font-weight: 800; font-size: 14px; background: #111; color: #fff;
  border-radius: 4px; padding: 3px 7px; line-height: 1; letter-spacing: .5px;
  flex: none; font-family: Arial, sans-serif;
}
.bv-tdd-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Arial, sans-serif; }
.bv-tdd-arrow {
  position: absolute; right: 18px; top: 50%; width: 9px; height: 9px;
  border-right: 1.8px solid #444; border-bottom: 1.8px solid #444;
  transform: translateY(-65%) rotate(45deg); transition: transform .2s;
}
.bv-tdd.open .bv-tdd-arrow { transform: translateY(-25%) rotate(-135deg); }
.bv-tdd-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 9999;
  background: #fff; border: 1px solid #111; max-height: 280px; overflow-y: auto;
  box-shadow: 0 14px 36px rgba(0,0,0,.14);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .16s;
}
.bv-tdd.open .bv-tdd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.bv-tdd-opt {
  width: 100%; background: none; border: none; text-align: left;
  padding: 12px 16px; font-size: 15px; color: #222; display: flex; gap: 10px;
  align-items: center; border-bottom: 1px solid #f0f0f0; cursor: pointer;
  font-family: Arial, sans-serif; box-sizing: border-box; border-radius: 0;
}
.bv-tdd-opt:last-child { border-bottom: none; }
.bv-tdd-opt:hover { background: #f5f5f5; }
.bv-tdd-opt.active { background: #111; color: #fff; }
.bv-tdd-opt b { font-weight: 800; min-width: 26px; display: inline-block; font-family: Arial, sans-serif; }
.bv-tdd-opt.active b { color: #fff; }
.bv-tdd-menu::-webkit-scrollbar { width: 6px; }
.bv-tdd-menu::-webkit-scrollbar-thumb { background: #d6d6d6; border-radius: 3px; }

.t-product__option-variants_image {
  flex-direction: row !important;
}

/* Принудительно горизонтально для обоих типов — с картинками и без */
.js-product-edition-option .t-product__option-variants_custom {
  flex-direction: row !important;
  gap: 14px !important;
}

/* Убираем лишние отступы на самих элементах */
.t-product__option-item_color,
.t-product__option-item_image {
  margin: 0 !important;
}

/* ── Нативная кнопка В корзину ── */
.t-catalog__prod-popup__btn-wrapper {
  display: flex !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

.t-catalog__prod-popup__btn {
  flex: 1 !important;
  height: 60px !important;
  background: #111111 !important;
  color: #ffffff !important;
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  letter-spacing: 0.5px !important;
}

.js-catalog-prod-popup-buy-btn-txt {
  font-family: Arial, sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 0.5px !important;
}

/* ── Нативная кнопка Избранное ── */
.t1002__addBtn {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  border: 1px solid #e6e6e6 !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
}

.t1002__addBtn svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #111111 !important;
  fill: none !important;
}

.t1002__addBtn.t1002__addBtn_active svg {
  fill: #111111 !important;
}


/* Текстовое поле для опции Фамилия/Текст */
.bv-text-input-wrap {
  margin-top: 8px;
}
.bv-text-input {
  width: 100%;
  height: 54px;
  border: 1px solid #e6e6e6;
  padding: 0 16px;
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #111;
  outline: none;
  background: #fff;
  box-sizing: border-box;
}
.bv-text-input:focus {
  border-color: #111;
}

/* Buy widget */
.bv-buy-section { margin-top: 24px; font-family: Arial, sans-serif; }
.bv-buy-row { display: flex; align-items: stretch; gap: 12px; margin-bottom: 12px; }
.bv-qty { display: flex; align-items: center; border: 1px solid #e6e6e6; height: 60px; }
.bv-qty-btn { width: 48px; height: 100%; background: none; border: none; font-size: 22px; color: #333; cursor: pointer; font-family: Arial,sans-serif; }
.bv-qty-btn:hover { background: #f3f3f3; }
.bv-qty-val { width: 44px; text-align: center; font-size: 16px; font-weight: 600; color: #111; font-family: Arial,sans-serif; }
.bv-add-btn { flex: 1; background: #111; color: #fff; border: none; font-size: 16px; font-weight: 600; height: 60px; cursor: pointer; font-family: Arial,sans-serif; letter-spacing: .3px; transition: filter .15s; }
.bv-add-btn:hover { filter: brightness(.85); }
.bv-add-btn:disabled { filter: brightness(.6); cursor: not-allowed; }
.bv-wish-btn { width: 60px; height: 60px; border: 1px solid #e6e6e6; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bv-wish-btn svg { stroke: #111; fill: none; transition: fill .15s; }
.bv-wish-btn.on svg { fill: #111; }
.bv-wish-btn:hover { border-color: #111; }
.bv-dol-row { display: flex; align-items: center; gap: 14px; border: 1px solid #e6e6e6; height: 60px; padding: 0 18px; }
.bv-dol-logo { background: #111; color: #fff; font-size: 12px; font-weight: 700; padding: 5px 8px; border-radius: 4px; display: flex; align-items: center; gap: 5px; flex: none; }
.bv-dol-bars { display: flex; gap: 2px; align-items: flex-end; }
.bv-dol-bars i { width: 2px; background: #fff; display: block; }
.bv-dol-bars i:nth-child(1) { height: 12px; }
.bv-dol-bars i:nth-child(2) { height: 9px; }
.bv-dol-bars i:nth-child(3) { height: 6px; }
.bv-dol-txt { flex: 1; font-size: 15px; color: #111; font-family: Arial,sans-serif; }
.bv-dol-arr { color: #999; font-size: 18px; }
.bv-toast2 { position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(12px);background:#111;color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;opacity:0;transition:opacity .22s,transform .22s;pointer-events:none;z-index:9999;white-space:nowrap;font-family:Arial,sans-serif; }
.bv-toast2.on { opacity:1;transform:translateX(-50%) translateY(0); }