:root {
	--wd-text-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(0,0,0);
	--wd-text-font-size: 14px;
	--wd-title-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 500;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 500;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 500;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(0,61,165);
	--wd-alternative-color: #fbbc34;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(0,61,165);
	--btn-accented-bgcolor-hover: rgb(0,61,165);
	--wd-form-brd-width: 1px;
	--notices-success-bg: rgb(0,61,165);
	--notices-success-color: #fff;
	--notices-warning-bg: rgb(0,61,165);
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 1000px;
	--wd-popup-padding: 0px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(0,61,165);
	background-image: none;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: rgb(242,242,242);
	background-image: none;
}
.wd .product-label.new {
	background-color: rgb(30,115,190);
}
.wd .product-label.attribute-label:not(.label-with-img) {
	background-color: rgb(0,61,165);
	color: rgb(255,255,255);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
.wd-builder-off .wd-fbt.wd-design-side {
	--wd-form-width: 100%;
}
:root{
--wd-container-w: 1600px;
--wd-form-brd-radius: 5px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 8px;
}

@media (min-width: 1600px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: rgb(0,61,165);
}

/* ============================================================
   ГЛОБАЛЬНЫЙ CSS — грузится на ВСЕХ страницах.
   Блоки, помеченные [CHECKOUT-ONLY], нужны только на /checkout/
   — кандидаты на перенос в плагин velo-checkout (на будущее).
   intl-tel-input (.iti*) перенесён в плагин v1.4.0.
   ============================================================ */


/* =============== 1) БАЗА / ВЕЗДЕ =============== */

/* Footer */
.wd-footer .wd-copyrights{
  padding:10px 0;
  font-size:13px;
  text-align:center;
  color:#fff;
  background-color:#003da5;
  border-top:1px solid rgba(255,255,255,.15);
}
.wd-testimon-name.title,
.wd-testimon-pos{ color:#fff; }

/* CF7 / SmartCaptcha — не обрезать капчу контейнером */
.wpcf7, .wpcf7-form, .smart-captcha{ overflow:visible; }
.smart-captcha{ display:block; width:100%; margin-bottom:20px; }

/* «Показать все результаты» в выпадающем поиске */
.view-all-results{
  display:flex; align-items:center; justify-content:center;
  height:50px; background-color:#003da5; color:#fff;
}

/* Карточки категорий — белая подложка со скруглением */
.wd-grid .category-grid-item .category-image,
.elementor .category-grid-item .category-image{
  padding:4px; box-sizing:border-box; background:#fff; border-radius:12px;
}

/* HERO-видео — скругление углов + перекрытие фонового видео Elementor */
.hero-rounded{ --r:24px; position:relative; border-radius:var(--r); overflow:hidden; }
.hero-rounded > .elementor-background-video-container,
.hero-rounded > .elementor-background-video-embed,
.hero-rounded > .elementor-background-overlay{
  position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; overflow:hidden;
}
.hero-rounded video,
.hero-rounded iframe{
  display:block; width:100%; height:100%; object-fit:cover; border:0;
}
.hero-rounded iframe{ pointer-events:none; }
.hero-rounded > .elementor-container,
.hero-rounded > .e-con-inner{ position:relative; z-index:2; }

/* Меню — позиционирование лейблов (бейджей) в подпунктах */
.custom-class-label .wd-sub-menu li>a .menu-label{ position:unset; margin-top:0; align-self:unset; }
.custom-class-label .menu-label{ margin-inline-start:5px; }
.custom-class-label .menu-label:before{ content:none; }

/* Size Guide — прячем дефолтный заголовок, центрируем, адаптив таблиц.
   ВНИМАНИЕ: селектор :has() требует современного браузера (ОК для 2025+). */
h4.wd-sizeguide-title,
.wd-sizeguide > div:first-child:has(.wd-sizeguide-title){ display:none !important; }
.wd-sizeguide-content{ text-align:center; }
.wd-sizeguide-content img,
.wd-sizeguide-content figure{
  border-radius:12px; overflow:hidden; display:block; margin:0 auto;
}
.wd-sizeguide-table,
.wd-sizeguide-table td,
.wd-sizeguide-table th{ font-size:14px !important; padding:8px 5px !important; }
@media (max-width:768px){
  .wd-sizeguide-table,
  .wd-sizeguide-table td,
  .wd-sizeguide-table th{ font-size:12px !important; padding:6px 3px !important; }
}
@media (max-width:480px){
  .wd-sizeguide-table,
  .wd-sizeguide-table td,
  .wd-sizeguide-table th{ font-size:11px !important; padding:5px 2px !important; white-space:nowrap; }
}


/* =============== 2) ARTVELO — градиентный текст =============== */
/* Анимация ВЫКЛ по умолчанию; включается добавлением класса .is-animated */

.banner_artvelo_text,
.banner_artvelo_text .elementor-heading-title,
.banner_artvelo_text h1,
.banner_artvelo_text h2{
  --g1:#ff2f8a; --g2:#3bc2ff; --g3:#b8f26a; --g4:#e9e3ff; --angle:115deg; --spread:320%;
  font-weight:800;
  background-image:linear-gradient(var(--angle), var(--g1) 0%, var(--g2) 30%, var(--g3) 65%, var(--g4) 85%, var(--g1) 100%);
  background-size:var(--spread) 100%; background-position:0% 50%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* Движение только при .is-animated */
.banner_artvelo_text.is-animated,
.banner_artvelo_text.is-animated .elementor-heading-title{
  animation: artvelo-water 18s ease-in-out infinite alternate; will-change:background-position;
}
@keyframes artvelo-water{ 0%{background-position:0% 50%} 100%{background-position:100% 50%} }
/* Уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion:reduce){
  .banner_artvelo_text.is-animated,
  .banner_artvelo_text.is-animated .elementor-heading-title{ animation:none; }
}
/* Фолбэк для браузеров без background-clip:text */
@supports not (-webkit-background-clip:text){
  .banner_artvelo_text, .banner_artvelo_text .elementor-heading-title{ background:none; -webkit-text-fill-color:initial; color:#111; }
}


/* =============== 3) КАРТОЧКА-БАННЕР (.hover-card) =============== */

.hover-card{
  position:relative;
  min-height:520px;
  border-radius:24px;
  overflow:hidden;
}

/* Затемняющий слой при наведении (pointer-events:none — чтобы не перехватывал клики) */
.hover-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.55) 100%);
  opacity:0;
  transition:opacity .3s ease;
  z-index:2;
  pointer-events:none;
}

/* Заголовок поверх баннера */
.hover-title{
  position:absolute;
  left:24px;
  bottom:24px;
  margin:0;
  color:#fff;
  font-weight:800;
  font-size:clamp(24px, 4vw, 44px);
  line-height:1.1;
  z-index:3;
  text-shadow:0 6px 24px rgba(0,0,0,.35);
}

/* Меню по центру — скрыто по умолчанию */
.hover-menu{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  transform:translate(-50%, calc(-50% + 10px));
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}

/* Ссылки-«кнопки» (glassmorphism) */
.hover-menu a{
  display:inline-block;
  padding:10px 16px;
  border-radius:12px;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.hover-menu a:hover{ transform:translateY(-1px); background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.4); }

/* Показ при наведении И при фокусе с клавиатуры (доступность) */
.hover-card:hover::after,
.hover-card:focus-within::after{ opacity:1; }

.hover-card:hover .hover-menu,
.hover-card:focus-within .hover-menu{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, -50%);
}

/* На мобильных (нет hover) — меню видно всегда */
@media (max-width:1024px){
  .hover-card .hover-menu{
    opacity:1;
    visibility:visible;
    transform:translate(-50%, -50%);
  }
}


/* =============== 4) КАРУСЕЛЬ КАТЕГОРИЙ / ТОВАРЫ — отступы =============== */
/* Slick-правила удалены: тема использует Swiper, не Slick (были мёртвым кодом). */

.categories-carousel .category-grid-item,
.product-categories .category-grid-item{
  margin:0 5px !important;
}

.products-spacing-0 .product{
  padding-left:0 !important;
  padding-right:0 !important;
}


/* =============== 5) РАЗНОЕ =============== */

/* Текст на баннере — белый с тенью для читаемости поверх фото */
.banner-text{
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.7); /* x, y, размытие, цвет */
}

/* Пункт меню «Распродажа» — красным */
li.sale-menu-red > a{ color:#FF0000 !important; }


/* =============== 6) CHECKOUT [CHECKOUT-ONLY] =============== */
/* Эти правила работают только на /checkout/. Кандидаты на перенос
   в плагин velo-checkout (enqueue checkout-only), как сделано с .iti. */

/* СДЭК — шире «коробочка» иконки способа доставки */
.woocommerce-checkout label[for*="edostavka"]::before{
  width:44px;
  background-size:auto 20px;
}

/* СБП — иконка СПРАВА после названия (метод оплаты cheque переименован в СБП) */
.woocommerce-checkout #payment li.payment_method_cheque > label::before{
  content:none !important;
  background:none !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
}
.woocommerce-checkout #payment li.payment_method_cheque > label::after{
  content:"" !important;
  display:inline-block !important;
  width:32px !important;
  height:32px !important;
  margin-left:10px !important;
  vertical-align:middle !important;
  background:url("https://veloodejda.ru/wp-content/uploads/2025/09/SBP.svg") center / contain no-repeat !important;
}@media (min-width: 1025px) {
	/* Подсветка пунктов Aside-меню при наведении/открытии */
.whb-header .wd-dropdown-menu.wd-design-aside.wd-style-with-bg .wd-sub-menu-wrapp > .wd-sub-menu > li:hover > a,
.whb-header .wd-dropdown-menu.wd-design-aside.wd-style-with-bg .wd-sub-menu-wrapp > .wd-sub-menu > li.wd-opened > a {
    background-color: rgba(255, 255, 255, .15);
    color: #fff;
}

/* Иконки 32×32 в подпунктах меню */
.wd-sub-menu li > a img.attachment-thumbnail {
    --nav-img-width: 32px;
    --nav-img-height: 32px;
    width: var(--nav-img-width) !important;
    height: var(--nav-img-height) !important;
    max-height: var(--nav-img-height) !important;
    object-fit: contain;
}

/* ===== Фикс пропадания мега-меню при наведении (hover-gap) ===== */
/* Прозрачный "мостик" под пунктом меню: курсор проходит зазор,
   не теряя :hover, и выпадашка не закрывается.
   Мостик на самом <li> (не на дропдауне) — иначе overflow:hidden панели его обрезает.
   Только на :hover — чтобы не перехватывать клики постоянно. */
.whb-header .wd-nav-main > li.menu-item-has-children {
    position: relative;
}
.whb-header .wd-nav-main > li.menu-item-has-children:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 35px;
    background: transparent;
    z-index: 1;
}
}