/*
Theme Name:   Bricks Child
Theme URI:    https://avanton.studio
Description:  Дочерняя тема Bricks
Author:       Avanton Studio
Author URI:   https://avanton.studio
Template:     bricks
Version:      1.2.0
License:      GNU General Public License v2 or later
Text Domain:  bricks-child
*/

/* ── Пульсация иконки онлайн-статуса #brxe-a51af5 ── */
#brxe-a51af5 rect:first-child {
  transform-box: fill-box;
  transform-origin: center;
  animation: brx-pulse-a51af5 2s ease-out infinite;
}

@keyframes brx-pulse-a51af5 {
  0%   { transform: scale(1);   opacity: 0.75; }
  70%  { transform: scale(4);   opacity: 0; }
  100% { transform: scale(4);   opacity: 0; }
}

/* ── Hover-увеличение всех social-icons на сайте ── */
.brxe-social-icons li {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brxe-social-icons li:hover {
  transform: scale(1.2);
}

/* ── Галочки ✓ во всех текстовых блоках — единый var(--orange) ── */
/* перебиваем жёстко прописанный инлайн color:#ff6600 у спанов-галочек */
.brxe-text [style*="ff6600" i],
.brxe-text-basic [style*="ff6600" i],
.brxe-rich-text [style*="ff6600" i] {
  color: var(--orange) !important;
}

/* ── Галереи товара: #brxe-gojvwy (шаблон товара 85) и #brxe-mjyzzf (шаблон "Добавить в корзину" 976) — оформление под макет Figma ── */
/* Миниатюры: скругление + серый фон */
#brxe-gojvwy .flex-control-thumbs img,
#brxe-mjyzzf .flex-control-thumbs img {
  border-radius: 8px;
  background-color: var(--gray);
}
/* Неактивные миниатюры — убираем тёмную рамку (перебиваем настройку элемента) */
#brxe-gojvwy .flex-control-thumbs img:not(.flex-active),
#brxe-mjyzzf .flex-control-thumbs img:not(.flex-active) {
  border-color: transparent !important;
}
/* Основное фото — скругление и серый фон как в макете */
#brxe-gojvwy .woocommerce-product-gallery__image img,
#brxe-mjyzzf .woocommerce-product-gallery__image img {
  border-radius: 16px;
  background-color: var(--gray);
}
/* Логотип Keelson 1 Pro поверх основного фото (top/left 20px).
   В шаблоне 976 миниатюры СЛЕВА, поэтому там логотип якорим не к контейнеру
   галереи (его левый верх — над миниатюрами), а к вьюпорту основного фото */
#brxe-gojvwy .woocommerce-product-gallery,
#brxe-mjyzzf .flex-viewport {
  position: relative;
}
#brxe-gojvwy .woocommerce-product-gallery::before,
#brxe-mjyzzf .flex-viewport::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  width:  clamp(8.2rem, calc(7.5926vw + 5.4667rem), 16.4rem);
  height: clamp(2rem,  calc(1.8519vw + 1.3333rem), 4rem);
  background: url('https://keelson.instawp.dev/wp-content/uploads/2026/06/69d23ccca2fb60e736c8e5fb-logo2-1-webp.avif') no-repeat top left / contain;
  pointer-events: none;
}
/* Отключаем лайтбокс/зум: прячем лупу и блокируем клик-открытие по фото */
#brxe-gojvwy .woocommerce-product-gallery__trigger,
#brxe-mjyzzf .woocommerce-product-gallery__trigger {
  display: none !important;
}
#brxe-gojvwy .woocommerce-product-gallery__image a,
#brxe-mjyzzf .woocommerce-product-gallery__image a {
  pointer-events: none;
  cursor: default;
}

/* ── Цена #brxe-baqbcd (шаблон товара 85) — старая слева, новая справа, на всю ширину блока ── */
#brxe-baqbcd {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}
#brxe-baqbcd .price {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}
#brxe-baqbcd del,
#brxe-baqbcd ins {
  margin: 0;
}

/* ── Цена #brxe-tigxfc (шаблон "Добавить в корзину" 976) — старая НАД новой,
   размеры шрифтов и ₽ те же, что у #brxe-baqbcd (заданы в настройках элемента) ── */
#brxe-tigxfc {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
}
#brxe-tigxfc .price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
#brxe-tigxfc del,
#brxe-tigxfc ins {
  margin: 0;
}

/* Символ ₽ — выравнивание по верхнему краю суммы, без надстрочности (оба шаблона) */
#brxe-baqbcd .woocommerce-Price-currencySymbol,
#brxe-tigxfc .woocommerce-Price-currencySymbol {
  vertical-align: top;
  line-height: 1;
}
/* Размер ₽ у новой (акционной) цены */
#brxe-baqbcd ins .woocommerce-Price-currencySymbol,
#brxe-tigxfc ins .woocommerce-Price-currencySymbol {
  font-size: clamp(2rem, calc(0.3704vw + 1.8667rem), 2.4rem);
}
/* Размер ₽ у старой (зачёркнутой) цены + убираем зачёркивание с символа */
#brxe-baqbcd del .woocommerce-Price-currencySymbol,
#brxe-tigxfc del .woocommerce-Price-currencySymbol {
  font-size: 12px;
  display: inline-block;
  text-decoration: none;
}

/* Ripple animation for the plus marker wrapper on the product template image */
#brxe-bpuoeu,
#brxe-bpuoeu div:has(> #brxe-jgulon) {
  position: relative;
  overflow: visible;
}

#brxe-bpuoeu div:has(> #brxe-jgulon)::before,
#brxe-bpuoeu div:has(> #brxe-jgulon)::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 129, 70, 0.72);
  border-radius: 50%;
  transform: scale(1);
  transform-origin: center;
  pointer-events: none;
  z-index: 1;
  animation: keelson-plus-ring-wrapper 2.4s ease-out infinite;
}

#brxe-bpuoeu div:has(> #brxe-jgulon)::after {
  animation-delay: 1.2s;
}

#brxe-bpuoeu:not(:has(div > #brxe-jgulon))::before,
#brxe-bpuoeu:not(:has(div > #brxe-jgulon))::after {
  content: "";
  position: absolute;
  left: 48px;
  bottom: 0;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 129, 70, 0.72);
  border-radius: 50%;
  transform: translateX(-50%) scale(1);
  transform-origin: center;
  pointer-events: none;
  z-index: 1;
  animation: keelson-plus-ring 2.4s ease-out infinite;
}

#brxe-bpuoeu:not(:has(div > #brxe-jgulon))::after {
  animation-delay: 1.2s;
}

#brxe-jgulon {
  position: relative;
  z-index: 2;
  overflow: visible;
}

@keyframes keelson-plus-ring-wrapper {
  0% {
    opacity: 0.72;
    transform: scale(1);
  }
  70% {
    opacity: 0.32;
  }
  100% {
    opacity: 0;
    transform: scale(3.25);
  }
}

@keyframes keelson-plus-ring {
  0% {
    opacity: 0.72;
    transform: translateX(-50%) scale(1);
  }
  70% {
    opacity: 0.32;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(3.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  #brxe-bpuoeu div:has(> #brxe-jgulon)::before,
  #brxe-bpuoeu div:has(> #brxe-jgulon)::after {
    animation: none;
    opacity: 0.45;
    transform: scale(2.15);
  }

  #brxe-bpuoeu:not(:has(div > #brxe-jgulon))::before,
  #brxe-bpuoeu:not(:has(div > #brxe-jgulon))::after {
    animation: none;
    opacity: 0.45;
    transform: translateX(-50%) scale(2.15);
  }
}

/* ── Чекбокс согласия в форме "Получить персональное предложение" #brxe-htunmv ── */
/* Квадрат 17×17 со скруглённой оранжевой рамкой; при отметке — фон прозрачный, галочка оранжевая */
#brxe-htunmv .options-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
}
#brxe-htunmv .options-wrapper li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
#brxe-htunmv input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  box-sizing: border-box;
  /* фиксируем 1:1 — перебиваем padding/width, которые Bricks вешает на все инпуты формы */
  width: 17px !important;
  min-width: 17px;
  max-width: 17px;
  height: 17px !important;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  /* по центру первой строки текста */
  margin: -2px 0 0;
  border: 2px solid var(--orange);
  border-radius: 5px;
  background-color: transparent !important;
  cursor: pointer;
  position: relative;
}
#brxe-htunmv input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 4px;
  height: 8px;
  border: solid var(--orange);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
#brxe-htunmv .options-wrapper label {
  cursor: pointer;
}

/* ── Маска телефона intl-tel-input в формах Bricks (RU/BY/KZ) ── */
/* обёртка библиотеки должна занимать всю ширину поля */
.brxe-form .iti {
  width: 100%;
}

/* ── Подвал: колонка якорных ссылок (nav #brxe-fkanav) ── */
/* элемент добавлен напрямую в мету шаблона 723, поэтому Bricks не сгенерировал
   для него CSS — дублируем стили соседнего nav-nested #brxe-uvxmjl */
#brxe-fkanav .brx-nav-nested-items {
  flex-direction: column;
  row-gap: var(--space-16-8);
  column-gap: var(--space-16-8);
  align-items: flex-start;
  transition: all 0.3s ease;
}
#brxe-fkanav .brxe-text-link {
  color: var(--white);
}
#brxe-fkanav .brxe-text-link:hover {
  color: var(--orange-hover);
}

/* ── Якорные переходы из подвала: плавный скролл + отступ под липкую шапку ── */
html {
  scroll-behavior: smooth;
}
#brxe-zrclcy,  /* Купить Каяк */
#brxe-iewjia,  /* Фишки Каяка */
#brxe-sgeyrt,  /* Характеристики */
#brxe-hkelvo,  /* Предложение для оптовиков (пункт шапки «Оптовикам») */
#brxe-eqiyvu { /* Вопрос-ответ */
  scroll-margin-top: 110px;
}


/* Popup gallery badge and Pro Forms refinements */
#brxe-mjyzzf .flex-viewport::before {
  width: 12.175rem;
  height: 2.977rem;
}

#brxe-yoifyk > label {
  display: block;
  margin-bottom: 1.2rem;
}

#brxe-yoifyk .options-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#brxe-yoifyk .options-wrapper > li {
  display: grid;
  grid-template-columns: 2rem auto;
  align-items: center;
  gap: 1.2rem;
  margin: 0;
}

#brxe-gwghbc {
  order: 1;
}

#brxe-ymzgvr {
  order: 2;
}

#brxe-fehlxz {
  order: 3;
}

#brxe-yoifyk .options-wrapper > li > label {
  display: grid;
  grid-template-columns: clamp(2.8rem, calc(0.3704vw + 2.6667rem), 3.2rem) auto;
  align-items: center;
  gap: 1.2rem;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
}

#brxe-yoifyk .options-wrapper > li > label::before {
  content: "";
  width: clamp(2.8rem, calc(0.3704vw + 2.6667rem), 3.2rem);
  height: clamp(2.8rem, calc(0.3704vw + 2.6667rem), 3.2rem);
  border-radius: 0.4rem;
}

#brxe-gwghbc > label::before {
  background: #d9d9d9;
}

#brxe-ymzgvr > label::before {
  background: #0fa8e0;
}

#brxe-fehlxz > label::before {
  background: #ff8146;
}

#brxe-ttkfhs {
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  max-width: 46.2rem;
}

#brxe-ipvfmy {
  flex: 0 0 10rem;
  width: 10rem;
  padding-bottom: 0;
}

#brxe-ipvfmy .popup-quantity {
  box-sizing: border-box;
  width: 100%;
  height: 4.4rem;
  min-height: 4.4rem;
}

#brxe-tqwkon,
#brxe-pjmldn,
#brxe-pjmldn .popup-submit {
  width: 100%;
  max-width: 35rem;
}


/* Popup quantity stepper */
#brxe-yoifyk > label {
  font-size: 2.4rem;
  line-height: 1;
}

#brxe-ipvfmy.keelson-quantity-stepper {
  display: grid;
  grid-template-columns: 3rem 4rem 3rem;
  align-items: stretch;
  box-sizing: border-box;
  width: 10rem;
  height: 4.4rem;
  min-height: 4.4rem;
  border: 1px solid #454545;
  border-radius: 0.4rem;
  overflow: hidden;
  background: #fff;
}

#brxe-ipvfmy.keelson-quantity-stepper .popup-quantity {
  width: 4rem;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #272727;
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

#brxe-ipvfmy.keelson-quantity-stepper .popup-quantity::-webkit-inner-spin-button,
#brxe-ipvfmy.keelson-quantity-stepper .popup-quantity::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

#brxe-ipvfmy .keelson-quantity-button {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #272727;
  font-family: inherit;
  font-size: 2.6rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

#brxe-ipvfmy .keelson-quantity-button:hover,
#brxe-ipvfmy .keelson-quantity-button:focus-visible {
  background: #f5f5f5;
}

/* Standard Bricks add-to-cart controls */
.brxe-product-add-to-cart .variations th.label,
.brxe-product-add-to-cart .variations th.label label {
  font-size: 2.4rem;
  line-height: 1;
}

.brxe-product-add-to-cart .quantity {
  display: grid !important;
  grid-template-columns: 3rem 4rem 3rem;
  grid-template-rows: 4.4rem;
  align-items: stretch;
  gap: 0 !important;
  box-sizing: border-box;
  width: 10rem !important;
  min-width: 10rem;
  height: 4.4rem;
  min-height: 4.4rem;
  margin: 0;
  border: 1px solid #454545;
  border-radius: 0.4rem;
  overflow: hidden;
  background: #fff;
}

.brxe-product-add-to-cart .quantity .qty {
  grid-column: 2;
  grid-row: 1;
  box-sizing: border-box;
  width: 4rem !important;
  height: 100% !important;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #272727;
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.brxe-product-add-to-cart .quantity .qty::-webkit-inner-spin-button,
.brxe-product-add-to-cart .quantity .qty::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.brxe-product-add-to-cart .quantity .action {
  grid-row: 1;
  display: grid !important;
  place-items: center;
  position: static !important;
  box-sizing: border-box;
  width: 3rem !important;
  height: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0;
  transform: none !important;
  background: transparent;
  color: #272727;
  cursor: pointer;
  pointer-events: auto;
}

.brxe-product-add-to-cart .quantity .action.minus {
  grid-column: 1;
}

.brxe-product-add-to-cart .quantity .action.plus {
  grid-column: 3;
}

.brxe-product-add-to-cart .quantity .action svg {
  width: 2rem;
  height: 2rem;
}

.brxe-product-add-to-cart .single_add_to_cart_button {
  width: 100%;
  max-width: 35rem;
  height: 4.4rem;
  min-height: 4.4rem;
  font-size: 1.6rem;
}

/* Standard Bricks add-to-cart layout */
.brxe-product-add-to-cart form.variations_form,
.brxe-product-add-to-cart table.variations,
.brxe-product-add-to-cart table.variations tbody,
.brxe-product-add-to-cart table.variations tr,
.brxe-product-add-to-cart table.variations th,
.brxe-product-add-to-cart table.variations td {
  display: block;
  width: 100% !important;
}

.brxe-product-add-to-cart table.variations {
  margin: 0 0 4rem;
  border: 0;
}

.brxe-product-add-to-cart table.variations th.label {
  margin: 0 0 1.6rem;
  padding: 0 !important;
  text-align: left;
}

.brxe-product-add-to-cart table.variations th.label label {
  color: #272727;
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brxe-product-add-to-cart table.variations td.value {
  position: static;
  padding: 0 !important;
}

.brxe-product-add-to-cart .bricks-variation-swatches {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem !important;
  width: max-content;
  margin: 0 !important;
  padding: 0;
}

.brxe-product-add-to-cart .bricks-variation-swatches > li {
  display: grid !important;
  grid-template-columns: 2rem clamp(2.8rem, calc(0.3704vw + 2.6667rem), 3.2rem) auto;
  align-items: center;
  column-gap: 1.2rem;
  box-sizing: border-box;
  width: max-content !important;
  min-width: 0;
  height: auto !important;
  min-height: clamp(2.8rem, calc(0.3704vw + 2.6667rem), 3.2rem);
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}

.brxe-product-add-to-cart .bricks-variation-swatches > li::before {
  content: "";
  display: block;
  position: static !important;
  grid-column: 1;
  grid-row: 1;
  box-sizing: border-box;
  width: 2rem;
  height: 2rem;
  margin: 0;
  border: 2px solid #999 !important;
  border-radius: 50%;
  opacity: 1 !important;
  visibility: visible !important;
  background: #fff;
  box-shadow: none;
  transform: none !important;
}

.brxe-product-add-to-cart .bricks-variation-swatches > li.bricks-swatch-selected::before {
  background: #999;
  box-shadow: inset 0 0 0 0.4rem #fff;
}

.brxe-product-add-to-cart .bricks-variation-swatches > li::after {
  content: attr(aria-label);
  display: block;
  position: static !important;
  grid-column: 3;
  grid-row: 1;
  width: auto;
  margin: 0;
  padding: 0;
  color: #272727;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: clamp(1.4rem, calc(0.1852vw + 1.3333rem), 1.6rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.brxe-product-add-to-cart .bricks-variation-swatches > li > div {
  grid-column: 2;
  grid-row: 1;
  box-sizing: border-box;
  width: clamp(2.8rem, calc(0.3704vw + 2.6667rem), 3.2rem) !important;
  height: clamp(2.8rem, calc(0.3704vw + 2.6667rem), 3.2rem) !important;
  margin: 0;
  border: 0 !important;
  border-radius: 0.4rem;
  box-shadow: none !important;
}

.brxe-product-add-to-cart .reset_variations {
  display: none !important;
}

.brxe-product-add-to-cart .woocommerce-variation-add-to-cart {
  display: flex !important;
  flex-flow: row nowrap;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
}

.brxe-product-add-to-cart .woocommerce-variation-add-to-cart .quantity {
  flex: 0 0 10rem;
}

.brxe-product-add-to-cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1 1 auto;
  width: auto !important;
  max-width: 35rem;
  margin: 0 !important;
  border-radius: 0.4rem;
}

@media (max-width: 767px) {
  .brxe-product-add-to-cart .woocommerce-variation-add-to-cart {
    align-items: stretch;
  }
}

/* Standard Bricks add-to-cart button color */
.brxe-product-add-to-cart .single_add_to_cart_button {
  border-color: #ff8146 !important;
  background: #ff8146 !important;
  color: #fff !important;
}

.brxe-product-add-to-cart .single_add_to_cart_button span {
  color: inherit;
}

.brxe-product-add-to-cart .single_add_to_cart_button:hover,
.brxe-product-add-to-cart .single_add_to_cart_button:focus-visible {
  border-color: #f06f35 !important;
  background: #f06f35 !important;
  color: #fff !important;
}

/* Standard Bricks add-to-cart popup label */
.brx-popup .brxe-product-add-to-cart .single_add_to_cart_button {
  font-size: 0 !important;
}

.brx-popup .brxe-product-add-to-cart .single_add_to_cart_button::after {
  content: "Добавить в корзину";
  font-size: 1.6rem;
  line-height: 1;
}

/* Responsive popup price instances */
@media (min-width: 768px) {
  #brxe-tigxfc {
    display: flex !important;
  }

  #brxe-dyaasx {
    display: none !important;
  }
}

@media (max-width: 767px) {
  #brxe-tigxfc {
    display: none !important;
  }

  #brxe-dyaasx {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
  }

  #brxe-dyaasx .price {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin: 0;
  }

  #brxe-dyaasx del,
  #brxe-dyaasx ins {
    margin: 0;
    white-space: nowrap;
  }
}

/* Mobile product gallery image backgrounds */
#brxe-lghcvj .woocommerce-product-gallery__image img,
#brxe-lghcvj .flex-control-thumbs img {
  background-color: #f5f5f5;
}

/* Popup main image logo width */
#brxe-mjyzzf .flex-viewport::before {
  width: clamp(6.1rem, calc(5.3571vw + 4.3857rem), 12.1rem);
}

/* Mobile product gallery finishing */
#brxe-lghcvj .woocommerce-product-gallery__image img {
  border-radius: 16px;
}

#brxe-lghcvj .flex-control-thumbs img {
  border-radius: 8px;
}

#brxe-lghcvj .flex-control-thumbs img:not(.flex-active) {
  border-color: transparent !important;
}

#brxe-lghcvj .flex-viewport {
  position: relative;
}

#brxe-lghcvj .flex-viewport::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  width: clamp(6.1rem, calc(5.3571vw + 4.3857rem), 12.1rem);
  height: clamp(2rem, calc(1.8519vw + 1.3333rem), 4rem);
  background: url('https://keelson.instawp.dev/wp-content/uploads/2026/06/69d23ccca2fb60e736c8e5fb-logo2-1-webp.avif') no-repeat top left / contain;
  pointer-events: none;
}

/* ── Мини-корзина в шапке: иконка "крестик" (пусто) ↔ "галочка" (есть товары) ── */
.brxe-woocommerce-mini-cart .cart-icon {
  position: relative;
}

.brxe-woocommerce-mini-cart .cart-icon::before {
  content: "";
  display: none;
  width: 24px;
  height: 24px;
  background: url('https://keelson.instawp.dev/wp-content/uploads/2026/07/goods.svg') no-repeat center / contain;
}

.brxe-woocommerce-mini-cart.has-items .cart-icon > svg {
  display: none;
}

.brxe-woocommerce-mini-cart.has-items .cart-icon::before {
  display: block;
}

/* ── Мини-корзина в шапке: счётчик товаров — на акцентном (оранжевом) фоне ── */
/* Bricks-контрол "Цвет фона" для .cart-count не генерирует внешний CSS-файл
   для этого элемента, поэтому фон бейджа задаём напрямую здесь. */
.brxe-woocommerce-mini-cart .cart-count {
  background-color: var(--orange, #ff8146);
  color: #fff;
}

/* Bricks генерирует для этого элемента #brxe-pyplgw .cart-count{display:flex}
   (ID-селектор) независимо от настройки "Скрыть, если пусто" — эта строка
   всегда побеждает наш класс .hide-empty-count по специфичности.
   !important здесь обязателен, чтобы бейдж всё же скрывался на пустой корзине. */
.brxe-woocommerce-mini-cart.hide-empty-count .cart-count {
  display: none !important;
}

/* ── Карточки товаров "Посмотрите наши байдарки": #brxe-vbggoc (шаблон
   "Пустая корзина" 1192; #brxe-bb407b — старый ID со страницы 22, оставлен
   на случай отката) — фото оформляем как главное фото галереи товара:
   серый фон, скругление 16px, бейдж-логотип Keelson; при ховере —
   обводка 2px акцентным (оранжевым) цветом ── */
#brxe-bb407b .product .dynamic[data-field-id="e1bbc2"],
#brxe-vbggoc .product .dynamic[data-field-id="e1bbc2"] {
  position: relative;
}
#brxe-bb407b .product .dynamic[data-field-id="e1bbc2"] img,
#brxe-vbggoc .product .dynamic[data-field-id="e1bbc2"] img {
  display: block;
  width: 100%;
  border-radius: 16px;
  background-color: var(--gray);
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color 0.2s ease;
}
/* Бейдж-логотип Keelson поверх фото (как в галерее, размер — как у компактных галерей) */
#brxe-bb407b .product .dynamic[data-field-id="e1bbc2"]::before,
#brxe-vbggoc .product .dynamic[data-field-id="e1bbc2"]::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  width: clamp(6.1rem, calc(5.3571vw + 4.3857rem), 12.1rem);
  height: clamp(2rem, calc(1.8519vw + 1.3333rem), 4rem);
  background: url('https://keelson.instawp.dev/wp-content/uploads/2026/06/69d23ccca2fb60e736c8e5fb-logo2-1-webp.avif') no-repeat top left / contain;
  pointer-events: none;
}
/* Ховер: оранжевая обводка 2px по контуру фото (внутрь, чтобы не сдвигать сетку) */
#brxe-bb407b .product .dynamic[data-field-id="e1bbc2"] a:hover img,
#brxe-bb407b .product .dynamic[data-field-id="e1bbc2"] a:focus-visible img,
#brxe-vbggoc .product .dynamic[data-field-id="e1bbc2"] a:hover img,
#brxe-vbggoc .product .dynamic[data-field-id="e1bbc2"] a:focus-visible img {
  outline-color: var(--orange, #ff8146);
}

/* ── Чекаут (шаблон 1362 + страница /checkout/): оформление под макет Figma ──
   Поля: высота 60, радиус 4, отступ 16, серый фон, без лейблов и рамок.
   Кнопка: 60/4, оранжевая, на всю ширину. Скрываем заголовки Woo-секций,
   поле страны (keelson-hide, RU по умолчанию), блок "доставка на другой адрес"
   и строки товаров в таблице order review (сводка товаров — в правой колонке). */
.keelson-hide {
  display: none !important;
}

form.woocommerce-checkout .form-row {
  float: none;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
}

form.woocommerce-checkout .form-row label {
  display: none;
}

form.woocommerce-checkout .form-row .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

form.woocommerce-checkout .input-text,
form.woocommerce-checkout select,
form.woocommerce-checkout .select2-container .select2-selection--single {
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  padding: 0 20px;
  border: none;
  border-radius: 4px;
  background-color: var(--gray, #f5f5f5);
  color: #272727;
  font-size: 16px;
  line-height: 60px;
}

form.woocommerce-checkout textarea.input-text {
  height: auto;
  min-height: 120px;
  padding: 20px;
  line-height: 1.4;
  resize: vertical;
}

form.woocommerce-checkout .input-text::placeholder,
form.woocommerce-checkout textarea.input-text::placeholder {
  color: #8f8f8f;
  opacity: 1;
}

form.woocommerce-checkout .input-text:focus,
form.woocommerce-checkout textarea.input-text:focus {
  outline: 2px solid var(--orange, #ff8146);
  outline-offset: -2px;
}

/* Заголовки Woo-секций и блок "Доставка на другой адрес?" — скрыть */
form.woocommerce-checkout .woocommerce-billing-fields > h3,
form.woocommerce-checkout .woocommerce-additional-fields > h3,
form.woocommerce-checkout .woocommerce-shipping-fields {
  display: none;
}

/* Таблица order review: без строк товаров и подытога (товары — справа),
   остаются доставка (СДЭК) и итог */
form.woocommerce-checkout .woocommerce-checkout-review-order-table {
  width: 100%;
  border: none;
  border-collapse: collapse;
}
form.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
form.woocommerce-checkout .woocommerce-checkout-review-order-table tbody,
form.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal {
  display: none;
}
form.woocommerce-checkout .woocommerce-checkout-review-order-table th,
form.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  padding: 8px 0;
  border: none;
  background: transparent;
  text-align: left;
  vertical-align: top;
}
form.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  text-align: right;
}
form.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total {
  border-top: 1px solid rgba(17, 17, 17, 0.21);
}
form.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
form.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
  padding-top: 16px;
  font-weight: 600;
}

/* Методы доставки (в т.ч. СДЭК) */
form.woocommerce-checkout ul#shipping_method,
form.woocommerce-checkout ul#shipping_method li {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
form.woocommerce-checkout ul#shipping_method li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
form.woocommerce-checkout ul#shipping_method input[type="radio"] {
  accent-color: var(--orange, #ff8146);
  margin-top: 3px;
}

/* Оплата */
form.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}
form.woocommerce-checkout #payment ul.payment_methods {
  border: none;
  padding: 16px 0 0;
  margin: 0;
  list-style: none;
}
form.woocommerce-checkout #payment ul.payment_methods li {
  margin-bottom: 8px;
}
form.woocommerce-checkout #payment ul.payment_methods input[type="radio"] {
  accent-color: var(--orange, #ff8146);
}
form.woocommerce-checkout #payment div.payment_box {
  background: var(--gray, #f5f5f5);
  border-radius: 4px;
}
form.woocommerce-checkout #payment div.payment_box::before {
  display: none;
}
form.woocommerce-checkout #payment div.form-row.place-order {
  padding: 16px 0 0;
}

/* Кнопка "Оформить предзаказ" */
form.woocommerce-checkout #place_order {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  padding: 0 24px;
  border: none;
  border-radius: 4px;
  background: var(--orange, #ff8146);
  color: #fff;
  font-size: 16px;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
form.woocommerce-checkout #place_order:hover,
form.woocommerce-checkout #place_order:focus-visible {
  background: var(--orange-hover, #f06f35);
}

/* Мобильная раскладка чекаута: колонки в столбик, сводка НАД формой */
@media (max-width: 767px) {
  #brxe-kchrow {
    flex-direction: column;
  }
  #brxe-kchlft,
  #brxe-kchrgt {
    width: 100%;
  }
  #brxe-kchrgt {
    order: -1;
  }
}

/* ── Уведомления WooCommerce ────────────────────────────────── */
/* В Bricks включён режим собственных уведомлений: нативные хуки сняты,
   уведомления рисует элемент «Уведомление»: чекаут (1362) — .keelson-checkout-notices,
   корзина (1221) — .keelson-cart-notices. AJAX-ошибки туда же перекладывает
   js/checkout-notices.js. Подписи под полями — штатные (show_inline_errors). */
.keelson-checkout-notices:empty,
.keelson-cart-notices:empty {
  display: none;
}
.keelson-checkout-notices .woocommerce-NoticeGroup,
.keelson-cart-notices .woocommerce-NoticeGroup {
  margin: 0;
}
.keelson-checkout-notices .woocommerce-error,
.keelson-checkout-notices .woocommerce-message,
.keelson-checkout-notices .woocommerce-info,
.keelson-cart-notices .woocommerce-error,
.keelson-cart-notices .woocommerce-message,
.keelson-cart-notices .woocommerce-info {
  margin: 0 0 16px;
  padding: 16px 20px;
  border-radius: 4px;
  list-style: none;
}
.keelson-checkout-notices li + li,
.keelson-cart-notices li + li {
  margin-top: 8px;
}

/* Подписи об ошибках под полями (WooCommerce 10, show_inline_errors) */
.checkout-inline-error-message {
  margin: 4px 0 0;
  font-size: 14px;
}

/* Чекбокс согласия с офертой ─────────────────────────────── */
/* WooCommerce кладёт чекбокс внутрь <label>, а правило выше
   (form.woocommerce-checkout .form-row label { display: none }) скрывает лейблы ради
   плейсхолдеров — вместе с ним пропадал и сам чекбокс. Аналогичное
   исключение уже есть для ul#shipping_method в css/checkout-layout.css. */
form.woocommerce-checkout .form-row label.woocommerce-form__label-for-checkbox {
  display: block;
  position: relative;
  margin: 0;
  padding-left: 27px;
  line-height: 1.5;
  cursor: pointer;
}

/* Вид чекбокса — как у согласия в форме #brxe-htunmv */
form.woocommerce-checkout .form-row input#terms {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 0;
  top: calc((1.5em - 17px) / 2);
  box-sizing: border-box;
  width: 17px !important;
  min-width: 17px;
  max-width: 17px;
  height: 17px !important;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0 !important;
  border: 2px solid var(--orange, #ff8146);
  border-radius: 5px;
  background-color: transparent !important;
  cursor: pointer;
}
form.woocommerce-checkout .form-row input#terms:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 4px;
  height: 8px;
  border: solid var(--orange, #ff8146);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
form.woocommerce-checkout .form-row .woocommerce-terms-and-conditions-checkbox-text {
  display: inline;
}

/* ── Форма на странице «Контакты» (страница 1417) ──────────────── */
/* Чекбокс согласия — тот же вид, что у формы «Оптовикам» (#brxe-htunmv):
   те правила привязаны к ID той формы и на новую не распространяются. */
#brxe-ktform input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 17px !important;
  min-width: 17px;
  max-width: 17px;
  height: 17px !important;
  aspect-ratio: 1 / 1;
  margin: -2px 0 0;
  padding: 0 !important;
  border: 2px solid var(--orange);
  border-radius: 5px;
  background-color: transparent !important;
  cursor: pointer;
}
#brxe-ktform input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 4px;
  height: 8px;
  border: solid var(--orange);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
#brxe-ktform .options-wrapper label {
  cursor: pointer;
}

/* ── Меню боковой панели (шаблон шапки 710, offcanvas #brxe-prlxix) ── */
/* Внутренний контейнер на всю высоту — иначе вертикальное центрирование меню не работает */
#brxe-prlxix .brx-offcanvas-inner {
  height: 100%;
}
/* Текущая страница — фирменным оранжевым (aria-current проставляет сам Bricks) */
#brxe-prlxix a[aria-current="page"] {
  color: var(--orange);
}