/* ETC custom styles */

/* ===========================
   Tabs for calibration options
=========================== */
.etc-opts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:10px 0 14px;
}
.etc-opt-btn{
  border:1px solid rgba(0,0,0,.18);
  background:#ffffff;
  color:#2b2f36;
  border-radius:12px;
  padding:10px 12px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  transition:transform .05s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}
.etc-opt-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(0,0,0,.12);
}
.etc-opt-btn.is-active{
  background:#2f8f2f;
  color:#ffffff;
  text-shadow:0 1px 0 rgba(0,0,0,.55);
}
.etc-opt-hidden{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.product-info label{ font-weight:700; }

/* ===========================
   Product title (H1)
=========================== */
h1{
  font-size: 44px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
}
@media (max-width: 768px){
  h1{
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
}

/* ===========================
   PRICE PLATE (light-green, engineering)
=========================== */
:root{
  --etc-price-bg: #e9f6ea;      /* светло-зелёный */
  --etc-price-border: #9bd3a4;  /* граница */
  --etc-accent: #6fbf7a;        /* уголки */
  --etc-price-text: #000000;
}

/* Контейнер цены (листинг + карточка) */
.product-price,
.products .price,
.products .product-price,
.product-info .price,
.product-info .product-price{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  background: var(--etc-price-bg) !important;
  border: 1px solid var(--etc-price-border) !important;
  border-radius: 14px !important;

  padding: 10px 16px !important;
  margin-top: 6px !important;

  font-weight: 900 !important;
  font-size: 30px !important;
  line-height: 1 !important;

  color: var(--etc-price-text) !important;

  box-shadow: 0 6px 14px rgba(0,0,0,.12) !important;
  position: relative !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
}

/* “Уголки” */
.product-price::before,
.product-price::after,
.products .price::before,
.products .price::after,
.products .product-price::before,
.products .product-price::after,
.product-info .price::before,
.product-info .price::after,
.product-info .product-price::before,
.product-info .product-price::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border:2px solid var(--etc-accent);
  opacity:.7;
}
.product-price::before,
.products .price::before,
.products .product-price::before,
.product-info .price::before,
.product-info .product-price::before{
  top:-5px;
  left:-5px;
  border-right:none;
  border-bottom:none;
  border-top-left-radius:6px;
}
.product-price::after,
.products .price::after,
.products .product-price::after,
.product-info .price::after,
.product-info .product-price::after{
  bottom:-5px;
  right:-5px;
  border-left:none;
  border-top:none;
  border-bottom-right-radius:6px;
}

/* Ховер */
.product-price:hover,
.products .price:hover,
.products .product-price:hover,
.product-info .price:hover,
.product-info .product-price:hover{
  transform: translateY(-1px) !important;
  filter: brightness(.98) !important;
}

/* Кешбэк/мелкие подписи */
.products small,
.product-info small,
.product-info .cashback,
.product-info .bonus{
  opacity:.75 !important;
}

/* ===========================
   SPECIALS: pretty parts (old / discount / final)
   Работает вместе с etc-specials-fix.js
=========================== */
.etc-price-row{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
}

.etc-price-old{
  font-size: 0.82em;
  font-weight: 800;
  opacity: .75;
  text-decoration: line-through;
}

.etc-price-discount{
  font-size: 0.82em;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
}

.etc-price-final{
  font-size: 1em;
  font-weight: 900;
  color: #000;
  -webkit-text-stroke: 1.2px #ffffff;
  text-shadow:
    1px 1px 0 #ffffff,
   -1px 1px 0 #ffffff,
    1px -1px 0 #ffffff,
   -1px -1px 0 #ffffff;
}

/* Мобильная */
@media (max-width: 768px){
  .product-price,
  .products .price,
  .products .product-price,
  .product-info .price,
  .product-info .product-price{
    font-size: 24px !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
  }
  .etc-price-row{ gap:8px; }
}
/* ===== ETC: Product page price plate (BIG) ===== */
.product-info .price,
.product-info .product-price{
  display: inline-block !important;
  background: #e9f6ea !important;
  border: 1px solid #9bd3a4 !important;
  border-radius: 16px !important;
  padding: 12px 18px !important;

  font-weight: 900 !important;
  font-size: 40px !important;
  line-height: 1 !important;
  color: #000 !important;

  box-shadow: 0 10px 22px rgba(0,0,0,.12) !important;
  position: relative !important;

  /* черные цифры с белым кантом */
  -webkit-text-stroke: 1.2px #ffffff;
  text-shadow:
    1px 1px 0 #ffffff,
   -1px 1px 0 #ffffff,
    1px -1px 0 #ffffff,
   -1px -1px 0 #ffffff;
}

/* “тех-уголки” на плашке */
.product-info .price:before,
.product-info .price:after,
.product-info .product-price:before,
.product-info .product-price:after{
  content:"" !important;
  position:absolute !important;
  width: 10px !important;
  height: 10px !important;
  border: 2px solid #6fbf7a !important;
  opacity: .75 !important;
}

.product-info .price:before,
.product-info .product-price:before{
  left: -6px !important;
  top: -6px !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-top-left-radius: 8px !important;
}

.product-info .price:after,
.product-info .product-price:after{
  right: -6px !important;
  bottom: -6px !important;
  border-left: 0 !important;
  border-top: 0 !important;
  border-bottom-right-radius: 8px !important;
}

/* чтобы кешбэк не спорил с ценой */
.product-info small,
.product-info .cashback,
.product-info .bonus{
  opacity: .75 !important;
}

/* мобилка */
@media (max-width: 768px){
  .product-info .price,
  .product-info .product-price{
    font-size: 30px !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
  }
}
/* ===============================
   BIG PRICE BLOCK (product card)
   =============================== */

/* контейнер цены */
.product-info .price,
.product-info .product-price,
.product-info .price-new {
    display: inline-block;
    background: #e9f9ee;
    border: 2px solid #7ad89c;
    border-radius: 14px;
    padding: 14px 22px;
    margin: 12px 0 6px;
    font-size: 36px;
    font-weight: 800;
    color: #000;
    line-height: 1;
}

/* знак рубля и цифры */
.product-info .price *,
.product-info .product-price *,
.product-info .price-new * {
    color: #000 !important;
}

/* если есть старая цена — делаем аккуратно */
.product-info .price-old {
    display: block;
    font-size: 16px;
    color: #888;
    text-decoration: line-through;
    margin-bottom: 4px;
}

/* подпись кешбэка */
.product-info .cashback,
.product-info .price + small {
    display: block;
    font-size: 14px;
    color: #5b7f65;
    margin-top: 6px;
}

/* мобильная версия */
@media (max-width: 768px) {
    .product-info .price,
    .product-info .product-price,
    .product-info .price-new {
        font-size: 28px;
        padding: 12px 18px;
    }
}
/* ===============================
   ETC: BIG PRICE ON PRODUCT PAGE
   (правый блок карточки товара)
   =============================== */

/* Пытаемся зацепить цену именно внутри карточки товара справа */
.product-info .price,
.product-info .product-price,

/* частые варианты в темах */
.product .price,
.product .product-price,
.product-card .price,
.product-card .product-price,
.product_page .price,
.product_page .product-price,
.product-info-right .price,
.product-info-right .product-price,
.product-right .price,
.product-right .product-price,
.product-details .price,
.product-details .product-price,

/* на всякий случай: любые price-элементы внутри блока товара */
.product-info [class*="price"],
.product [class*="price"]{
  background: #e9f6ea !important;
  border: 2px solid #9bd3a4 !important;
  border-radius: 14px !important;
  padding: 14px 22px !important;
  margin: 8px 0 6px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 46px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  color: #000 !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.12) !important;
  letter-spacing: .2px !important;
}

/* чтобы мелкие вложенные спаны не ломали размер */
.product-info .price *,
.product-info .product-price *,
.product .price *,
.product .product-price *,
.product-card .price *,
.product-card .product-price *,
.product-info [class*="price"] *,
.product [class*="price"] *{
  font-size: inherit !important;
  font-weight: inherit !important;
  color: #000 !important;
}

/* Старую цену (если есть) делаем аккуратной и маленькой */
.price-old,
.old-price,
.product-info .price-old,
.product-info .old-price,
.product .price-old,
.product .old-price{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
  font-size: 18px !important;
  color: #8a8a8a !important;
  text-decoration: line-through !important;
  display: block !important;
}

/* Кешбэк спокойнее */
.product-info .cashback,
.product-info small{
  opacity: .8 !important;
  font-size: 14px !important;
  margin-top: 6px !important;
  display: block !important;
}

/* Мобила */
@media (max-width: 768px){
  .product-info .price,
  .product-info .product-price,
  .product .price,
  .product .product-price,
  .product-card .price,
  .product-card .product-price,
  .product-info [class*="price"],
  .product [class*="price"]{
    font-size: 32px !important;
    padding: 12px 18px !important;
  }
}
/* ================================
   ETC: разные размеры цены
   Каталог — меньше, карточка товара — больше
   ================================ */

/* 1) КАТАЛОГ / СПИСКИ (включая блок "Скидки" на странице каталога) */
.products .product-price,
.products .price{
  font-size: 22px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
}

/* Чуть меньше "уголки" в каталоге */
.products .product-price::before,
.products .product-price::after,
.products .price::before,
.products .price::after{
  width: 8px !important;
  height: 8px !important;
  border-width: 2px !important;
}

/* 2) СТРАНИЦА ТОВАРА (справа, где кнопка "в корзину") — оставляем крупно */
.product-info .product-price,
.product-info .price{
  font-size: 34px !important;
  padding: 14px 18px !important;
  border-radius: 16px !important;
}

/* Мобилка: каталог меньше, карточка товара тоже чуть меньше, но заметно */
@media (max-width: 768px){
  .products .product-price,
  .products .price{
    font-size: 20px !important;
    padding: 8px 11px !important;
  }

  .product-info .product-price,
  .product-info .price{
    font-size: 28px !important;
    padding: 12px 16px !important;
  }
}
/* Главная: скрываем блоки "Скидки" и "Популярные" (списки) */
.index-page .boxSpecials,
.index-page .boxBestSellers,
.index-page .boxFeatured,
.index-page .boxPopular,
.index-page .specials,
.index-page .bestsellers,
.index-page .popular,
.index-page .featured {
  display: none !important;
}
/* ===== Главная: блоки "Скидки" и "Популярные" выравниваем по центру ===== */

/* общий контейнер, который мы помечаем через JS */
.etc-home-discounts-block{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* маленький ценник внутри списка скидок: старая + новая, без "минусов" */
.etc-home-discounts-block .etc-mini-old{
  display:inline-block;
  font-size: 12px;
  font-weight: 700;
  opacity: .55;
  text-decoration: line-through;
  margin-right: 8px;
  white-space: nowrap;
}

.etc-home-discounts-block .etc-mini-new{
  display:inline-block;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
/* ===== ETC: зелёная кнопка "В корзину" в карточках при наведении ===== */

/* сама кнопка в оверлее/ховере (часто это a.btn или button) */
.products .product:hover .btn,
.products .product:hover a.btn,
.products .product:hover button.btn,
.products .product:hover .btn.btn-primary,
.products .product:hover a.btn.btn-primary,
.products .product:hover button.btn.btn-primary,
.products .product:hover .btn-cart,
.products .product:hover .add-to-cart .btn,
.products .product:hover .product-buy .btn,
.products .product:hover .product-buttons .btn{
  background: #2f8f2f !important;
  border-color: #2f8f2f !important;
  color: #fff !important;
}

/* ховер/фокус, чтобы не становилась красной */
.products .product:hover .btn:hover,
.products .product:hover a.btn:hover,
.products .product:hover button.btn:hover,
.products .product:hover .btn:focus,
.products .product:hover a.btn:focus,
.products .product:hover button.btn:focus{
  background: #2f8f2f !important;
  border-color: #2f8f2f !important;
  color: #fff !important;
  filter: brightness(.95) !important;
}

/* если у темы есть красный стиль для danger, тоже перетираем */
.products .product:hover .btn-danger,
.products .product:hover a.btn-danger,
.products .product:hover button.btn-danger{
  background: #2f8f2f !important;
  border-color: #2f8f2f !important;
  color: #fff !important;
}
/* ===== ETC: принудительно зелёная "В корзину" в карточках (оверлей/ховер) ===== */

/* 1) Любые кнопки внутри блока товаров, которые выглядят как "в корзину" */
.products .product .btn,
.products .product a.btn,
.products .product button.btn,
.products .product input.btn,
.products .product .btn-primary,
.products .product .button,
.products .product a.button,
.products .product button.button,
.products .product input.button,
.products .product a[aria-label*="корзин" i],
.products .product a[title*="корзин" i],
.products .product a[href*="buy_now" i],
.products .product a[href*="cart" i],
.products .product a[href*="shopping_cart" i],
.products .product a[class*="cart" i],
.products .product a[class*="buy" i],
.products .product a[class*="basket" i],
.products .product button[class*="cart" i],
.products .product button[class*="buy" i],
.products .product .add-to-cart a,
.products .product .add-to-cart button,
.products .product .product-buy a,
.products .product .product-buy button,
.products .product .product-buttons a,
.products .product .product-buttons button{
  background-color:#2f8f2f !important;
  border-color:#2f8f2f !important;
  color:#fff !important;
}

/* 2) Чтобы при наведении не краснела */
.products .product .btn:hover,
.products .product a.btn:hover,
.products .product button.btn:hover,
.products .product input.btn:hover,
.products .product .btn:focus,
.products .product a.btn:focus,
.products .product button.btn:focus,
.products .product input.btn:focus,
.products .product .button:hover,
.products .product a.button:hover,
.products .product button.button:hover,
.products .product input.button:hover{
  background-color:#2f8f2f !important;
  border-color:#2f8f2f !important;
  color:#fff !important;
  filter:brightness(.95) !important;
}

/* 3) Если тема красит через "danger"/"red" классы */
.products .product .btn-danger,
.products .product a.btn-danger,
.products .product button.btn-danger,
.products .product .red,
.products .product a.red,
.products .product button.red,
.products .product .bg-danger,
.products .product a.bg-danger,
.products .product button.bg-danger{
  background-color:#2f8f2f !important;
  border-color:#2f8f2f !important;
  color:#fff !important;
}
/* ===========================
   SEARCH: прозрачная кнопка с лупой
=========================== */

/* сама кнопка поиска */
.header-search button,
.header-search .btn,
.search button,
.search .btn{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 10px !important;
}

/* иконка лупы */
.header-search button i,
.header-search .btn i,
.search button i,
.search .btn i{
  color: #2b2f36 !important; /* тёмно-серый, как текст */
  font-size: 18px;
}

/* при наведении — без зелёного */
.header-search button:hover,
.header-search .btn:hover,
.search button:hover,
.search .btn:hover{
  background: transparent !important;
  box-shadow: none !important;
}

/* при фокусе (клик, таб) */
.header-search button:focus,
.search button:focus{
  outline: none !important;
  box-shadow: none !important;
}
/* ===========================
   ETC: SEARCH ICON — TRANSPARENT
=========================== */

/* кнопка лупы (жёсткое переопределение темы) */
.header-search button,
.header-search .search-btn,
.header-search .btn-search,
.header-search button.btn,
.header-search a.btn,
.header-search .btn,
.search-box button,
.search-box .btn,
.search-form button,
.search-form .btn{
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* иконка лупы */
.header-search i,
.header-search svg,
.search-box i,
.search-form i{
  color: #2b2f36 !important;
  fill: #2b2f36 !important;
  font-size: 18px;
}

/* hover / active / focus — НИКАКОГО зелёного */
.header-search button:hover,
.header-search button:active,
.header-search button:focus,
.search-box button:hover,
.search-form button:hover{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* если тема красит через псевдоэлемент */
.header-search button::before,
.header-search button::after{
  display: none !important;
  content: none !important;
}
/* ===========================
   ETC: Search button (лупа) — без зеленого фона
=========================== */

/* 1) Кнопка отправки в поиске (типовой VamShop/Bootstrap) */
header form button[type="submit"],
header form .btn[type="submit"],
header form .btn-success,
header form .btn.btn-success,
header form .btn-outline-success,
header form .btn.btn-outline-success{
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 2) На всякий случай — если кнопка красится через focus/hover/active */
header form button[type="submit"]:hover,
header form button[type="submit"]:active,
header form button[type="submit"]:focus,
header form .btn-success:hover,
header form .btn-success:active,
header form .btn-success:focus,
header form .btn-outline-success:hover,
header form .btn-outline-success:active,
header form .btn-outline-success:focus{
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 3) Если внутри svg/иконка */
header form button[type="submit"] svg,
header form button[type="submit"] i{
  fill: #2b2f36 !important;
  color: #2b2f36 !important;
}

/* 4) Если зелёный фон нарисован псевдоэлементом */
header form button[type="submit"]::before,
header form button[type="submit"]::after{
  background: transparent !important;
  content: none !important;
}
/* ===== ETC: варианты калибровки плашками ===== */

.etc-select-hidden{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

.etc-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:10px 0 12px;
}

.etc-pill{
  border:1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.65);
  color:#2b2f36;
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  transition:transform .05s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}

.etc-pill:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(0,0,0,.12);
}

.etc-pill.is-active{
  background:#2f8f2f;
  border-color:#2f8f2f;
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.55);
}
/* Убираем пробел между шапкой и баннером */
.module {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Убираем отступ именно между header и первым блоком (баннером) */
body > header + .module{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* На всякий случай: если отступ у самого header снизу */
body > header{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* И если вдруг отступ у самой карусели */
#carouselExampleInterval{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* ===== ETC: уменьшаем высоту шапки ===== */

/* сам header */
header.shadow-sm{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

/* контейнеры внутри header */
header.shadow-sm .container,
header.shadow-sm .container-fluid{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* часто именно эти блоки держат высоту */
header.shadow-sm .header,
header.shadow-sm .header-main,
header.shadow-sm .header-middle,
header.shadow-sm .header-bottom{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* если меню или строки имеют свои отступы */
header.shadow-sm .row{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* ===== ETC: уменьшаем высоту шапки ===== */

/* сам header */
header.shadow-sm{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

/* контейнеры внутри header */
header.shadow-sm .container,
header.shadow-sm .container-fluid{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* часто именно эти блоки держат высоту */
header.shadow-sm .header,
header.shadow-sm .header-main,
header.shadow-sm .header-middle,
header.shadow-sm .header-bottom{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* если меню или строки имеют свои отступы */
header.shadow-sm .row{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* ===== ETC: уменьшаем высоту шапки ===== */

/* сам header */
header.shadow-sm{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

/* контейнеры внутри header */
header.shadow-sm .container,
header.shadow-sm .container-fluid{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* часто именно эти блоки держат высоту */
header.shadow-sm .header,
header.shadow-sm .header-main,
header.shadow-sm .header-middle,
header.shadow-sm .header-bottom{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* если меню или строки имеют свои отступы */
header.shadow-sm .row{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}