/* CSS-стили могут быть еще в !_1.php (functions.php), koleso_fortuni, calc_1 */

/* Убрать горизонтальную полосу прокрутки. Она может появляться когда я задаю объектам эффект выезжания-появления */
html { overflow-x: hidden !important; scroll-padding-top: 150px; /* Отступ от якорной ссылки */ } body { overflow-x: hidden !important; } 
/* ==================================================== */












.pochVibNas { min-width: 55px !important; min-height: 55px !important; max-width: 55px !important; max-height: 55px !important; }

/* === Переменные цветов - НАЧАЛО ======================= */
/* Юзать так: .lalala { color: var(--c_1_1); } */
:root {
/* Цвет 1 */
--c_1_1: #ffffff; /* Светлый */
--c_1_2: #e6e6e6; /* Средний */
--c_1_3: #c3c3c3; /* Темный */

/* Цвет 2 */
--c_2_1: #ffbe6e; /* Светлый */
--c_2_2: #ff8c00; /* Средний */
--c_2_3: #d15700; /* Темный */

/* Цвет 3 */
--c_3_1: #2e2eff; /* Светлый */
--c_3_2: #00008b; /* Средний */
--c_3_3: #000066; /* Темный */

/* Цвет 4 */
--c_4_1: #ff17ff; /* Светлый */
--c_4_2: #cc00cc; /* Средний */
--c_4_3: #7d007d; /* Темный */
}
/* === Переменные цветов - КОНЕЦ ======================== */

/* === Ширина и высота-размеры контейнера не больше его содержимого ======== */
.shirSod { display: table !important; width: auto !important; height: auto !important; }

/* === Подпись под картинкой в попапе и в элементоровском плагине "Галерея" и в других ================== */
/* .elementor-slideshow__title { display: none; } */

/* === Убрать нижний отступ (Делаю это что бы в Элемонторовском виджете "Текстовой редактор" были нормальные отступы от заголовков до текста) ======== */
/* P, H1, H2, H3, H4, H5, H6 { margin-bottom: 0px !important; } */

/* === Сделать ширину блока как вся страница сайта (86765657 - Эта закладка для "w.txt") ============================ */
/* Вписываю по необходимости этот класс везде и в Элементоре в виджете "Внутренняя секция" / Расширенные / CSS-классы" */
.elementor_polnaya_shirina { max-width: 1180px; margin: 0 auto; padding: 0px 20px 0px 20px; } /*  Для работы этого класса надо поставить шаблон страницы "Elementor полная ширина" */ 

/* Для работы этого класса надо поставить шаблон страницы "Шаблон по умолчанию" или "Тема". Сейчас сюда вписаны стили из класса "ast-container" темы "Astra", а "max-width:" я добавил сам */ 
.shirina_sayta_po_umolch { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } 
/* ===================================================================== */

/* === Форма обратной связи - НАЧАЛО ====================== */
/* Фон в поле ввода текста изменился: Это из-за того что я выбрал из выпад списка ранее введенный текс. Набрать его вручную */ 
/* --- Contact form 7 - НАЧАЛО ------------------------------------------------------ */
/* Шаблоны самих форм в "Плагины\Contact form 7 - Форма обратной связи" */

.wpcf7-response-output { display: none; } /* Надпись "Не корректное заполнение." которая появляется при не правильном заполнении формы */

/* *** CF7_1 - НАЧАЛО ******************************************************* */
.CF7_1_zag { color: #000; text-align: center; font-size: 20pt; font-weight: 700; line-height: 1; margin: 0px 0px 10px 0px !important; padding: 0px 0px 0px 0px !important; }
.CF7_1 select, .CF7_1 input, .CF7_1 text, .CF7_1 textarea { padding: 0px 10px 8px 10px !important; width: 100% !important; min-width: 100%!important; 
  border-radius: 20px !important; border: 2px solid #d4d4d4 !important; }
  .CF7_1 select, .CF7_1 input, .CF7_1 text, .CF7_1 textarea { background-color: #f6f6f6 !important; color: #000 !important; }
  .CF7_1 input:hover, .CF7_1 select:hover, .CF7_1 text:hover, .CF7_1 textarea:hover { background-color: #fff !important; }
  .CF7_1 input::placeholder, .CF7_1 text::placeholder, .CF7_1 textarea::placeholder { color: #b5b5b5; } /* Текст который введен до ввода текста в полях формы (placeholder) */
  .CF7_1 select { padding: 7px 10px 7px 10px !important; }
  .CF7_1 input, .CF7_1 text { padding: 5px 10px 5px 10px !important; }
  .CF7_1 p { margin-bottom: 0px; } /* Расстояние между текстовыми полями */ 
  
  /* Надпись "Поле обязательно для заполнения" которая появляется при не правильном заполнении поля в форме. Как я узнал как ее изменить: Попытался отправить не правильно заполненную форму и когда появились эти надписи в браузере выбрал "Исследовать элемент" */ 
  .CF7_1 span { color: #ff0000 !important; text-align: center; margin: 0 !important; }
  
  /* кн "Отправить" */
  .CF7_1_kn input { width: 100%; color: white !important; font-weight: 700; white-space: pre-line; 
  background-color: #000 !important; border-radius: 100px; border: none !important; font-size: 10pt; padding: 15px 20px 15px 20px; } 
  .CF7_1_kn input:focus { background-color: #6a6a6a !important; border-radius: 100px !important; } /* Если это убрать то кнопка будет цветом по умолчанию при попытке отправить не правильно заполненную форму */ 
  .CF7_1_kn input:hover { border-radius: 100px !important; background-color: #6a6a6a !important; }
  .CF7_1_kn p { margin-bottom: 0px; padding-bottom: 0px; }
  
  .CF7_1 select { /* Тема "Astra" скрывает стрелку в выпад. списке и грузит вместо нее картинку. Тут я возвращаю стрелку */
  /* background-position-y: calc( 100% - 15px ); */
  background: none;
  appearance: menulist;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  cursor: pointer;
  }
  
  .CF7_1_usloviya { text-align: center; color: #000; margin-top: -38px !important; } /* Надпись "Нажимая на кнопку, Вы даете согласие на обработку данных." */
  .CF7_1_usloviya p { font-size: 8pt; line-height: 1.5; margin-bottom: 0px !important; }
  /* *** CF7_1 - КОНЕЦ ********************************************** */

/* *** CF7_2 - НАЧАЛО ******************************************************* */
@media (min-width: 800px) {
.CF7_2_forma { display: flex; }
.CF7_2, .CF7_2_kn { width: 25%; } /* в дробном числе ставить точку, а не запятую */ 
}
.CF7_2_forma { margin: 0px !important; }
.CF7_2 { margin: 10px; }
.CF7_2 input, .CF7_2 text { background-color: #fff; border: 2px solid #ff8c00 !important; padding: 10px !important; border-radius: 50px !important; white-space: pre-line; }
.CF7_2 input:hover, .CF7_2 text:hover { background-color: #f9fafb; }
.CF7_2_kn { margin: 9px 10px 10px 10px; }
.CF7_2_kn input { color: #fff; background-color: #ff8c00; border: 0px solid #000; padding: 14px 18px 14px 18px; border-radius: 50px; width: 100%; white-space: normal; line-height: 1.3; }
.CF7_2_kn input:hover { color: #fff; background-color: #d2691e; }
.CF7_2_kn input:focus { color: #fff; background-color: #ff8c00; } /* Если это убрать то кнопка будет цветом по умолчанию при попытке отправить не правильно заполненную форму */ 
.CF7_2 input::placeholder, .CF7_2 text::placeholder { color: #b5b5b5; } /* Текст который введен до ввода текста в полях формы (placeholder) */
.CF7_2 span { color: #ff0000 !important; text-align: center; } /* Надпись "Поле обязательно для заполнения" которая появляется при не правильном заполнении поля в форме */ 
.CF7_2_usloviya { color: #000; text-align: center; line-height: 1.3; }
.CF7_2_usloviya { margin-left: 10px; margin-top: -40px; }
.CF7_2_usloviya p { font-size: 9pt; }
/* *** CF7_2 - КОНЕЦ ********************************************** */

/* --- Contact form 7 - КОНЕЦ -------------------------------------------- */

/* --- Плагин "MetForm" ------------------------------------------------------------------- */
.mf-error-message { font-size: 10pt; font-weight: 600; text-align: center; } /* Надпись "Это обязательное поле." */
/* === Форма обратной связи - КОНЕЦ ========================== */

/* === Скрыть стрелки-влево-вправо навигации которые появляются по мимо тех котые в слайдере сделанном из секций в плагине "OoohBoi Steroids for Elementor" ============== */
.Slayder_iz_sekcii_OoohBoi .swiper-button-next:after, .Slayder_iz_sekcii_OoohBoi .swiper-button-prev:after { display: none; } 
/* --- Slayder_iz_sekcii_OoohBoi_2 ---------------------------------------------------------------- */
.Slayder_iz_sekcii_OoohBoi_2 .swiper-button-next:after, .Slayder_iz_sekcii_OoohBoi_2 .swiper-button-prev:after { display: none; } 
.Slayder_iz_sekcii_OoohBoi_2 .swiper-button-prev, .Slayder_iz_sekcii_OoohBoi_2 .swiper-button-next { padding: 10px 15px 5px 15px !important; } 
/* === Скруглить фон под стрелками-влево-вправо навигации если он овальный в слайдере сделанном из секций в плагине "OoohBoi Steroids for Elementor" ============== */
.Slayder_iz_sekcii_OoohBoi .swiper-button-prev, .Slayder_iz_sekcii_OoohBoi .swiper-button-next { padding: 10px 15px 10px 15px !important; } 
/* === Отобразить-запретить скрывать объекты-контент за пределами слайдера-секции ======= */
.Slayder_iz_sekcii_OoohBoi .ob-swiper-bundle { overflow: visible; } 

/* === Скрыть слайдер =============================================================== */
.skrit_slayder { 
display: block;
}

@media (max-width: 800px) { 
.skrit_slayder { 
display: none;
}
}

/* === Мигающая пульсирующая кнопка. Применяю этот класс к нужным кнопкам ================= */
@keyframes myPulsKnAnim {
0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }
.myPulsKn { animation: myPulsKnAnim 2s infinite; } 
/* ======================================= */

/* === myPopupCookie_1 - Попап с согласием использования Куки-Cookie - НАЧАЛО ============= */
#myPopupCookie_1 {
  pointer-events: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent; /* Тут был темный фон под попапом */ 
  z-index: 99999; 
  opacity: 1;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
}
.myPopupCookie_1_2 {
  pointer-events: auto;
  position: fixed;
  margin:auto;
  left:0;
  right:0;
  bottom:20px;
  max-width: 420px; 
-webkit-box-shadow: 0px 26px 100px 2px rgba(34, 60, 80, 0.18);
-moz-box-shadow: 0px 26px 100px 2px rgba(34, 60, 80, 0.18);
box-shadow: 0px 26px 100px 2px rgba(34, 60, 80, 0.18);
}
@media (max-width: 600px) { .myPopupCookie_1_2 { bottom: 0px; max-width: 100%; margin: 5px; } }
/* === myPopupCookie_1 - Попап с согласием использования Куки-Cookie - КОНЕЦ ============= */

/* ===  Шапка сайта и верхнее меню ================================== */
/* --- Прозрачность у шапки и эффект размытости объектов под ней. При изменении цвета меняй только его, а прозрачность не трогай --------------------------------- */
.razmitostObj {
    background-color: #FFFFFF;
        background-color: rgba(255, 255, 255, 0.94);
        background-color: #FFFFFFF0; /* Последние 2 символа тут это уровень прозрачности и он тут такой же как в строке выше */
}
@supports (backdrop-filter: blur(30px)) or (-webkit-backdrop-filter: blur(30px)) {
    .razmitostObj {
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        background-color: rgba(255, 255, 255, 0.80);
    }
}
@supports (background-blend-mode: overlay) {
    .razmitostObj {
        background-color: rgba(255, 255, 255, 0.88);
        background-blend-mode: overlay;
    }
}

/* === Парение-плавное движение объекта вверх-вннз или влево-вправо =========================================== */
.myParenie { animation: myParen 2s infinite ease-in-out !important; } /* Можно написать ".myParenie DIV" и вместо "DIV" вписать "IMG" */
@keyframes myParen { 0% { transform: translate(0%, 2%); } 50% {	transform: translate(0%, -2%); } 100% { transform: translate(0%, 2%);	} } 

/* === Стили для суммы количества товаров которая выводится в шапке около корзины. Если эти стили вставить в style="" тега, то после добавления товара в корзину стили перестанут действовать ======================================== */
.myCena_2 { position: relative; top: 8px !important; font-size: 12pt !important; font-weight: 700 !important; color: #fff !important; padding-left: 5px; } 

/* === Искажение картинки. Применить этот класс к элементоровскому виджету "Изображение" ======================== */
.myIskagKar img { border-radius: 50%; animation: IskagKar 10s linear infinite alternate forwards; } 
@keyframes IskagKar { 0%, to { border-radius: 63% 37% 54% 46%/55% 48% 52% 45% } 14% { border-radius: 40% 60% 54% 46%/49% 60% 40% 51% } 28% { border-radius: 54% 46% 38% 62%/49% 70% 30% 51% } 42% { border-radius: 61% 39% 55% 45%/61% 38% 62% 39% } 56% { border-radius: 61% 39% 67% 33%/70% 50% 50% 30% } 70% { border-radius: 50% 50% 34% 66%/56% 68% 32% 44% } 84% { border-radius: 46% 54% 50% 50%/35% 61% 39% 65% } }
@-webkit-keyframes IskagKar { 0%, to { border-radius: 63% 37% 54% 46%/55% 48% 52% 45% } 14% { border-radius: 40% 60% 54% 46%/49% 60% 40% 51% } 28% { border-radius: 54% 46% 38% 62%/49% 70% 30% 51% } 42% { border-radius: 61% 39% 55% 45%/61% 38% 62% 39% } 56% { border-radius: 61% 39% 67% 33%/70% 50% 50% 30% } 70% { border-radius: 50% 50% 34% 66%/56% 68% 32% 44% } 84% { border-radius: 46% 54% 50% 50%/35% 61% 39% 65% } }

/* === Пульсирующее увеличение и уменьшение объекта === */
.ObjPulseZoom {display: block; animation: ObjPulseZoom 2s infinite; } @keyframes ObjPulseZoom { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } }

/* === Удалить-скрыть подпись-имя-название файла в виджетах "Карусель", "Изображение" ===================== */
.elementor-slideshow__title { display: none; } 

/* === razmerIframe (Сделать так чтоб размер фрейма-iframe подстраивался под его содержимое) ===================== */
/* Этот CSS-класс юзает код вставленный в Элементоровский виджет "HTML-код" который выводит "calc_1" */
.razmerIframe { border: 0px solid red !important; display: block !important; margin: 0px !important; padding: 0px !important; width: 100% !important; }

/* === calc_1 - CSS - НАЧАЛО ======================== */
/* Стили в "my\calc_1\calc_1.css". 
/* === calc_1 - CSS - КОНЕЦ ========================= */

/* === Форум (плагин "bbPress") ========================= */
.bbp-topic-meta, .bbp-topic-freshness p { margin: 0px !important; } /* На странице всех форумов убрать отступы в "Последняя запись" у надписи "Админ" */
.bbp-forum-description, .bbp-topic-description { display: none; } /* На странице отдельного форрума и темы надпись вверху "В этой теме 1 ответ, 2 участника, последнее обновление сделано Админ." */
.bbp-author-name { margin-top: 5px !important; } /* Имя пользователя под его аватаркой */
.bbp-search-form { margin-bottom: 20px; } /* На странице всех форумов поле поиска */
#bbp_search_submit { border-radius: 0px; padding: 12px; } /* Кнопка "Поиск" около поля поиска */
#bbp_search { max-width: 190px; } /* Поле поиска */
@media (max-width: 480px) {
	#bbp_search_submit { padding: 14px; }
	#bbp_search { max-width: 70px; }
}

/* === Выровнять текст описания по середине у Элементоровского виджета "Счетчик"-счётчик ======= */
.elem_sch .elementor-counter-title { text-align: center; }

/* === Каталог-архив категорий-товаров, страница товара - НАЧАЛО ======================== */
/* После изменений проверить не отразились ли они на страницах в которых несколько Рубрик, Записей, 
Результат поиска по сайту (ввести в поле поиска "пост" чтоб отобразились блоки). Не ламается ли дизайн 
если изменить количесво категорий-товаров в строке. 

Не убирать пустое пространство справа от карточек товаров на странице товара 
в разделе "Похожие товары". Оно займется похожими товарами если таковые будут. 

Краткое описание в карточках товара которые в каталоге обрезается в "!_1.php / Обрезать текст 
краткое описание и поставить три точки (...) в конце в карточках товара в каталоге товаров" */

/* Если между основной картинкой товара и миниатюрами которые под ней при сужении браузера образуется прогалок-отступ, 
то перезагрузить страницу и он пропадет потому что высоту этого контейнера наверно делает какой-то Вордпресовский ява скрипт */

/* Еще CSS-стили страницы товара можно редактировать в "!_1.php" в "myKaruselNaStrTov_1". 

/* Отступы миниатюр друг от друга и от низа главного изображения товара которое на странице товара делаются в "!_1.php" в "87765764765" */

/* --- Категория в каталоге категорий ------------------------ */
.product-category { 
  border-radius: 20px; 
  margin-bottom: 20px !important; /* Отступ у категорий друг от друга. У товаров и похожих товаров нужно делать такой же */
  background-color: #fff;
  -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.1);
  -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.1);
  box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.1);
		transition: box-shadow 0.3s ease-in-out,
		-webkit-box-shadow 0.3s ease-in-out,
		-moz-box-shadow 0.3s ease-in-out;
}
  .product-category:hover {
		box-shadow: 0px 5px 32px 2px rgba(34, 60, 80, 0.1);
		-webkit-box-shadow: 0px 5px 32px 2px rgba(34, 60, 80, 0.1);
		-moz-box-shadow: 0px 5px 32px 2px rgba(34, 60, 80, 0.1);
}
.product-category img { border-radius: 20px; }

/* Плашка с заголовком у категории в каталоге категорий */
.woocommerce-loop-category__title { 
  padding: 10px !important; 
  margin-bottom: -10px !important; 
  border-radius: 10px;
}

/* --- Контейнер товара в каталоге товаров ----------------- */
.woocommerce .products .ast-grid-common-col,
.woocommerce ul.products .ast-grid-common-col {
    display: flex;
}

.woocommerce .products li.ast-article-single, 
.woocommerce .products .ast-grid-common-col,
.woocommerce ul.products li.ast-article-single,
.woocommerce ul.products .ast-grid-common-col {
    border-radius: 20px; 
    background-color: #fff;
    margin-bottom: 20px !important; /* Отступ у товаров друг от друга */
    -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.1);
    -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.1);
    box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.1);
    transition: box-shadow 0.3s ease-in-out,
    -webkit-box-shadow 0.3s ease-in-out,
    -moz-box-shadow 0.3s ease-in-out;
}

.woocommerce .products li.ast-article-single:hover, 
.woocommerce .products .ast-grid-common-col:hover,
.woocommerce ul.products li.ast-article-single:hover,
.woocommerce ul.products .ast-grid-common-col:hover {
		box-shadow: 0px 8px 15px 2px rgba(34, 60, 80, 0.2);
		-webkit-box-shadow: 0px 8px 15px 2px rgba(34, 60, 80, 0.2);
		-moz-box-shadow: 0px 8px 15px 2px rgba(34, 60, 80, 0.2);
}

.woocommerce .products li.ast-article-single:hover, 
.woocommerce .products .ast-grid-common-col:hover,
.woocommerce ul.products li.ast-article-single:hover,
.woocommerce ul.products .ast-grid-common-col:hover {
		box-shadow: 0px 5px 32px 2px rgba(34, 60, 80, 0.1);
		-webkit-box-shadow: 0px 5px 32px 2px rgba(34, 60, 80, 0.1);
		-moz-box-shadow: 0px 5px 32px 2px rgba(34, 60, 80, 0.1);
}

/* Контейнер в котором только картинка товара в каталоге товаров */
/* .astra-shop-thumbnail-wrap { padding: 20px; } */

/* Картинка товара в каталоге товаров */
.astra-shop-thumbnail-wrap img { 
  border-radius: 20px 20px 0px 0px; 
}

/* --- Надпись: Распродажа, Sale ----------------- */
.ast-onsale-card {
  color: #fff;
  background: #ff0000;
  border-radius: 100px;
  top: 20px;
  left: 20px;
  padding: 5px 10px;
  box-shadow: none; /* Тень */
  outline: none;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
}

/* --- Кн "В корзину" которая появляется при наведении на карточку в каталоге ----------------- */
  .ast-select-options-trigger { top: 20px; right: 20px; }

/* --- Контейнер с текстом товара в карточке в каталоге товаров -------- */
/* После изменения порядка в "order:" изменить его на такой же в Внешний вид / Настроить / WooCommerce / Каталог товаров / раздел "Структура карты магазина" */
/* Выравнивание текста по левому-правому краю, середине делаю в "Внешний вид / Настроить / WooCommerce / Каталог товаров / DESIGN". Делается там отдельно для ПК, планшета, телефона */
.astra-shop-summary-wrap {
  padding: 20px 20px 20px 20px; /* Еще отступы есть в "!_1.php" в ".myPopTov_quick_view_btn" */
  flex: 1; /* Растягивает блок на всю высоту родителя. В результате все карточки в ряду становятся одинаковой высоты */
  display: flex;
  flex-direction: column; /* Элементы внутри выстраиваются в колонку */
  position: relative;
}

/* Все элементы кроме кнопки "В корзину" */
.astra-shop-summary-wrap > *:not(.add_to_cart_button) {
  flex-shrink: 0;
}

/* Невидимый элемент для заполнения пространства */
.astra-shop-summary-wrap::after {
  content: '';
  flex: 1;
  order: 999;
}
  
/* Кнопка "В корзину" всегда внизу */
.add_to_cart_button {
  margin-top: auto;
  order: 1000; /* Порядок следования */
  flex-shrink: 0;
}

/* +++ Порядок следования элементов. Делаю его тут потому что звездный рейтинг оказывается в самом низу если в классе ".astra-shop-summary-wrap" вписан параметр "display: flex;" ++++++++ */
/* В "Внешний вид / Настроить / WooCommerce / Каталог товаров / Структура карты магазина" элементы должны следовать в таком же порядке как тут */
.price { order: 1; } /* Цена */
.ast-woo-product-category { order: 2;  } /* Категория */
.ast-loop-product__link { order: 3; } /* Заголовок */
.ast-woo-shop-product-description { order: 4; } /* Краткое описание */
.cfvsw_variations_form { order: 5; } /* Атрибыты к кружками в карточке каталога товаров плагина "Variation Swatches for WooCommerce" - By "Brainstorm Force" - Автор: "CartFlows" */
.review-rating { order: 6; } /* Звездный рейтинг */
/* Положение кнопки "Быстрый просмотр" настраивается в "!_1.php" в "myPopTov". Там нужно заменить хук ее положения "woocommerce_after_shop_loop_item" на другой.
/* Положение атрибутов вариаций может настраиваться в настройках плагина */
/* +++++++++++++++++++++++++++++++++++++++++++ */

/* Зачеркнутая цена в каталоге товаров */
.woocommerce ul.products li.product .price del, .woocommerce ul.products li.product del { font-size: 15px !important; text-decoration: line-through !important; color: #666666 !important; text-decoration-color: #666666 !important; text-decoration-thickness: 2px !important; font-weight: 700 !important; }
.woocommerce ul.products li.product .price del .amount, .woocommerce ul.products li.product del .amount { text-decoration: none !important; }
/* Цена со скидкой в каталоге товаров */
.woocommerce .price ins { color: #ff0000; font-size: 20px; }
/* Цена без скидки в каталоге у обычных и вариативных товаров*/
.woocommerce ul.products li.product .price:not(:has(ins)) .amount, .woocommerce ul.products li.product .price > .amount:not(ins .amount) { font-size: 20px !important; }
/* Зачеркнутая цена на странице товара */
.woocommerce div.product p.price del, .woocommerce div.product span.price del { font-size: 20px !important; color: #666666 !important; text-decoration-color: #666666 !important; text-decoration: line-through !important; text-decoration-thickness: 2px !important; font-weight: 700 !important; }
/* Цена со скидкой на странице товара */
.woocommerce.single-product .price ins { color: #ff0000; font-size: 1.5rem !important; }
/* Цена без скидки и у вариативного товара на странице товара */
.single-product .price:not(:has(del)) .amount, .single-product .price:not(:has(ins)) { font-size: 1.5rem !important; }

/* --- Выравнивание текста по центру для всех кнопок "В корзину" -------------- */
.astra-shop-summary-wrap .button {
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

/* --- Сделать отступ снизу у краткого описания у карточек в каталоге ----------- */
.ast-woo-shop-product-description { margin-bottom: 10px; }
.ast-woo-shop-product-description p { margin-bottom: 0px !important; }

/* --- Картинка на странице товара ----------------- */
.woocommerce-product-gallery__wrapper img { border-radius: 20px; }

/* --- Сделать чтоб при узком окне браузера на странице товара в "Похожие товары" было по одной карточке товара в одном ряду ------------ */
@media (max-width: 767px) {
    .related.products ul.products li.product,
    .upsells.products ul.products li.product,
    .cross-sells.products ul.products li.product {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .related.products ul.products,
    .upsells.products ul.products,
    .cross-sells.products ul.products {
        display: block !important;
    }
}

/* --- Плагин "Variation Swatches for WooCommerce" - By "Brainstorm Force" - Автор: "CartFlows" ----- */
/* Выровнять по середине карточки товара в каталоге блок с атрибутами */
.cfvsw-shop-variations { 
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* Займет всю ширину родителя */
  height: 100%; /* Займет всю высоту родителя */
  margin-top: -7px !important;  /* Сдвинуть вверх в карточке товара в каталоге */
}

/* --- На странице товара сделать меньше ширину блока с картинками товара, а блока с его текстом которы справа шире. 
Делаю так для того чтоб в попапе "myPopTov" картинка товара была больше видна без необходимости прокручивать вниз ------------ */
/* После изменений тут выровнять по вертикали стрелки у главного изображения товара в "!_1.php" в "myKaruselNaStrTov_1" */

/* Левая часть с картинкой */
.woocommerce div.product .woocommerce-product-gallery {
    width: 300px !important;
}
/* Правая часть с текстом */
.woocommerce div.product .summary {
    width: calc(100% - 322px) !important;
}
@media (max-width: 921px) { /* На этой ширине окна браузера Вордпресс делает рядом стоящие блоки с картинкой и текстом друг под другом */
	.woocommerce div.product .woocommerce-product-gallery {
		width: 100% !important;
	}
	.woocommerce div.product .summary {
		width: 100% !important;
	}
}
/* === Каталог-архив категорий-товаров, страница товара - КОНЕЦ ======================== */