/* ================= STORE SNIPPET ================= */
@media screen and (min-width: 1920px) {
  .t-store__prod-snippet__container {
    padding-bottom: 120px;
    padding-top: 200px !important;
  }
}

/* ================= NO-BORDER UTILS (≥1200px) ================= */
@media (min-width: 1200px) {
.no-border-top,
.no-border-top    *:not(input, textarea, select) { border-top-width: 0 !important; }

.no-border-right,
.no-border-right  *:not(input, textarea, select) { border-right-width: 0 !important; }

.no-border-bottom,
.no-border-bottom *:not(input, textarea, select) { border-bottom-width: 0 !important; }

.no-border-left,
.no-border-left   *:not(input, textarea, select) { border-left-width: 0 !important; }
}

/* ================= БАЗА ================= */
.uc-btn{
  --fill:  #ffffff;    /* цвет квадрата/заливки */
  --bg:    #2E40F0;    /* цвет фона кнопки = цвет рамки */
  --box:   36px;       /* размер квадрата */
  --border:2px;        /* толщина рамки */
  --txt-h: #2E40F0;    /* цвет текста ТОЛЬКО при hover */
  --speed: .4s;

  position: relative !important;
  overflow: hidden !important;
  cursor: pointer;
}

/* Фон кнопки = цвет рамки, на всю площадь */
.uc-btn::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 0;
  pointer-events: none;
}

/* Заливка: отступ = рамка, со всех сторон одинаковый */
.uc-btn::before{
  content: "";
  position: absolute;
  top: var(--border);
  right: var(--border);
  bottom: var(--border);
  left: var(--border);
  background: var(--fill);
  z-index: 1;
  clip-path: inset(0 0 0 calc(100% - var(--box)));
  transition: clip-path var(--speed) cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.uc-btn:hover::before{
  clip-path: inset(0 0 0 0);
}

/* Текст: цвет покоя из Tilda, меняем только при hover */
.uc-btn .uc-btn-text,
.uc-btn .uc-btn-text .tn-atom{
  position: relative;
  z-index: 3;
}
.uc-btn:hover .uc-btn-text,
.uc-btn:hover .uc-btn-text .tn-atom{
  color: var(--txt-h) !important;
  transition: color .35s ease;
}

/* Квадрат + стрелка поверх */
.uc-btn .uc-btn-box,
.uc-btn .uc-btn-box .tn-atom{
  position: relative;
  z-index: 3;
  overflow: visible !important;
}
.uc-btn .uc-btn-arrow,
.uc-btn .uc-btn-arrow .tn-atom{
  position: relative;
  z-index: 4;
}

/* Стрелка: бесконечная петля */
.uc-btn:hover .uc-btn-arrow{
  animation: ucArrowLoop 1s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes ucArrowLoop{
  0%   { transform: translate(0,0); opacity: 1; }
  40%  { transform: translate(14px,-14px); opacity: 0; }
  41%  { transform: translate(-14px,14px); opacity: 0; }
  100% { transform: translate(0,0); opacity: 1; }
}

/* ================= ЦВЕТОВЫЕ ВАРИАНТЫ ================= */
.uc-btn.uc-btn--v1{ --fill:#ffffff; --bg:#2E40F0; --txt-h:#2E40F0; }
.uc-btn.uc-btn--v2{ --fill:#2E40F0; --bg:#ffffff; --txt-h:#ffffff; }
.uc-btn.uc-btn--v3{ --fill:#ffffff; --bg:#F47B11; --txt-h:#F47B11; }
.uc-btn.uc-btn--v4{ --fill:#2E40F0; --bg:#F2F2F2; --txt-h:#ffffff; }

/* ================= РАЗМЕРЫ (идут ПОСЛЕ вариантов) ================= */
/* маленькая — 36 всегда */
.uc-btn.uc-btn--s{ --box:36px; --border:2px; }

/* большая — 36 до 1200, 46 от 1200 */
.uc-btn.uc-btn--l{ --box:36px; --border:2px; }
@media (min-width:1200px){
  .uc-btn.uc-btn--l{ --box:46px; --border:3px; }
}

/* ================= ОТКЛЮЧЕНИЕ АНИМАЦИИ < 1200px ================= */
@media (max-width:1199px){
  /* заливка не разливается */
  .uc-btn:hover::before{
    clip-path: inset(0 0 0 calc(100% - var(--box)));
  }
  /* текст не меняет цвет */
  .uc-btn:hover .uc-btn-text,
  .uc-btn:hover .uc-btn-text .tn-atom{
    color: inherit !important;
  }
  /* стрелка не анимируется */
  .uc-btn:hover .uc-btn-arrow{
    animation: none;
  }
}

/* === Смена цвета текста при наведении (только десктоп ≥1200px) === */
.uc-hover-color{
  --uc-hover:#2E40F0;   /* цвет текста при наведении */
}
@media screen and (min-width:1200px){
  /* плавность перехода */
  .uc-hover-color .tn-atom{
    transition:color .25s ease, text-decoration-color .25s ease;
  }
  /* сам эффект цвета */
  .uc-hover-color:hover .tn-atom{
    color:var(--uc-hover) !important;
  }
  /* --- ПОДЧЁРКИВАНИЕ (опция) --- */
  .uc-underline .tn-atom{
    text-decoration:underline;
    text-decoration-color:transparent;
    text-underline-offset:1px;
  }
  .uc-underline:hover .tn-atom{
    text-decoration-color:var(--uc-hover);
  }
}

/* ================= КАРТОЧКИ МЕНЮ ================= */

.uc-menu-card {
  position: relative;
  transition: background-color .3s ease;
}

/* белый фон-подложка (карточка прозрачная в редакторе) */
.uc-menu-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: inherit;
  z-index: 0;
  transition: background-color .3s ease;
}

.uc-menu-card > * {
  position: relative;
  z-index: 1;
}

.uc-menu-card__title,
.uc-menu-card__title *,
.uc-menu-card__icon,
.uc-menu-card__icon * {
  transition: color .3s ease, stroke .3s ease, opacity .3s ease;
}

/* ===== HOVER ===== */
.uc-menu-card:hover::after {
  background: #2E40F0;
}

.uc-menu-card:hover .uc-menu-card__title,
.uc-menu-card:hover .uc-menu-card__title * {
  color: #fff !important;
}

/* Tabler icon: контурная, красим stroke + снимаем opacity группы */
.uc-menu-card:hover .uc-menu-card__icon svg g {
  opacity: 1 !important;
}
.uc-menu-card:hover .uc-menu-card__icon svg path {
  stroke: #fff !important;
  stroke-opacity: 1 !important;
}




.uc-hover-icon svg path,
.uc-hover-icon svg * {
  transition: fill .3s ease, opacity .3s ease;
}

/* наведение на флекс — иконка внутри синеет */
.uc-icon-flex:hover .uc-hover-icon svg g {
  opacity: 1 !important;
}
.uc-icon-flex:hover .uc-hover-icon svg path {
  fill: #2E40F0 !important;
  fill-opacity: 1 !important;
}
</style>