/* База */
a.button-reset,
a.button-reset:link,
a.button-reset:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  font-family: "Voyage", serif;
  position: relative;
  overflow: hidden;

  /* текст по умолчанию */
  color: #E9DFC1 !important;

  /* плавность */
  transition:
    color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background-color 0.4s ease;
}

/* Текст — всегда над всем */
a.button-reset .btn-label {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* Слой-перекрытие для плавного hover */
a.button-reset::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1; /* ниже текста, выше базового фона */
}

/* Цвет текста при ховере */
a.button-reset:hover,
a.button-reset:focus {
  color: #74070E !important;
}

/* ===== СТИЛЬ 1 — Десктоп, длинные ===== */
a.button-style-1 {
  width: 404px;
  height: 45px;
  border-radius: 5.5px;
  border: 0.7px solid #E9DFC1;
  font-size: 25px;
  background-color: #74070E;

  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(100, 9, 14, 0.6) 0 7.4px,
      transparent 7.4px 15.7px
    ),
    linear-gradient(90deg, #E9DFC1, #E9DFC1),
    linear-gradient(90deg, #E9DFC1, #E9DFC1),
    linear-gradient(#74070E, #74070E);
  background-repeat: no-repeat;
  background-size:
    calc(100% - 20px) 100%,
    0.7px 100%,
    0.7px 100%,
    100% 100%;
  background-position:
    10px 0,
    20px 0,
    calc(100% - 20px) 0,
    0 0;
}
a.button-style-1::before {
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(248, 245, 243, 0.2) 0 7.4px,
      transparent 7.4px 15.7px
    ),
    linear-gradient(90deg, #64090E, #64090E),
    linear-gradient(90deg, #64090E, #64090E),
    linear-gradient(#E9DFC1, #E9DFC1);
  background-repeat: no-repeat;
  background-size:
    calc(100% - 20px) 100%,
    0.7px 100%,
    0.7px 100%,
    100% 100%;
  background-position:
    10px 0,
    20px 0,
    calc(100% - 20px) 0,
    0 0;
}
a.button-style-1:hover {
  border-color: #74070E;
  box-shadow: 0 0 18px 0 rgba(208, 74, 82, 0.42);
}
a.button-style-1:hover::before { opacity: 1; }




/* ===== СТИЛЬ 3 — Мобильный, длинные ===== */
a.button-style-3 {
  width: 292px;
  height: 39px;
  border-radius: 4px;
  border: 0.5px solid #E9DFC1;
  font-size: 18px;
  background-color: #74070E;

  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(100, 9, 14, 0.6) 0 5.3px,
      transparent 5.3px 11.3px
    ),
    linear-gradient(90deg, #E9DFC1, #E9DFC1),
    linear-gradient(90deg, #E9DFC1, #E9DFC1),
    linear-gradient(#74070E, #74070E);
  background-repeat: no-repeat;
  background-size:
    calc(100% - 14px) 100%,
    0.5px 100%,
    0.5px 100%,
    100% 100%;
  background-position:
    7px 0,
    16px 0,
    calc(100% - 16px) 0,
    0 0;
}
a.button-style-3::before {
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(248, 245, 243, 0.2) 0 5.3px,
      transparent 5.3px 11.3px
    ),
    linear-gradient(90deg, #64090E, #64090E),
    linear-gradient(90deg, #64090E, #64090E),
    linear-gradient(#E9DFC1, #E9DFC1);
  background-repeat: no-repeat;
  background-size:
    calc(100% - 14px) 100%,
    0.5px 100%,
    0.5px 100%,
    100% 100%;
  background-position:
    7px 0,
    16px 0,
    calc(100% - 16px) 0,
    0 0;
}
a.button-style-3:hover {
  border-color: #74070E;
  box-shadow: 0 0 18px 0 rgba(208, 74, 82, 0.42);
}
a.button-style-3:hover::before { opacity: 1; }











/* ===== STYLE 4 — стабильный, ровные боковые линии ===== */
.t-records a.button-reset.button-style-4{
  width:140px;height:39px;border-radius:4px;
  border:1px solid #E9DFC1;
  font-size:18px;
  position:relative;overflow:hidden;isolation:isolate;z-index:0;

  /* базовые полоски + базовый фон */
  background:
    repeating-linear-gradient(
      90deg,
      rgba(100,9,14,.6) 0 5.8px,
      transparent 5.8px 11.8px
    ),
    linear-gradient(#74070E,#74070E);
  background-repeat:no-repeat;
  background-size:
    calc(100% - 10px) 100%,   /* отступы 5px слева/справа */
    100% 100%;
  background-position:
    5px 0,
    0 0;

  transition: color .4s ease, border-color .4s ease, box-shadow .4s ease, background-color .4s ease;
}

/* текст – сверху */
.t-records a.button-reset.button-style-4 .btn-label{
  position:relative;z-index:3;
  color:#E9DFC1 !important;
  -webkit-text-fill-color:#E9DFC1 !important;
  pointer-events:none;
}

/* светлый hover-фон (полоски+фон) — мягко проявляется */
.t-records a.button-reset.button-style-4::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  z-index:1;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(248,245,243,.2) 0 5.8px,
      transparent 5.8px 11.8px
    ),
    linear-gradient(#E9DFC1,#E9DFC1);
  background-repeat:no-repeat;
  background-size:
    calc(100% - 10px) 100%,
    100% 100%;
  background-position:
    5px 0,
    0 0;
}

/* БОКОВЫЕ ЛИНИИ — рисуем отдельным оверлеем ::after, строго одинаковые */
.t-records a.button-reset.button-style-4::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  z-index:2; /* над фоном, под текстом */
  /* по 0.5px на 12px от краёв */
  background: linear-gradient(90deg,
    transparent 0 12px,
    #E9DFC1 12px 12.5px,
    transparent 12.5px calc(100% - 12.5px),
    #E9DFC1 calc(100% - 12.5px) calc(100% - 12px),
    transparent calc(100% - 12px) 100%
  );
  transition: background .4s ease;
}

/* hover-состояние */
.t-records a.button-reset.button-style-4:hover{
  border-color:#74070E;
  box-shadow:0 0 18px 0 rgba(208,74,82,.42);
}
.t-records a.button-reset.button-style-4:hover .btn-label{
  color:#74070E !important;
  -webkit-text-fill-color:#74070E !important;
}
.t-records a.button-reset.button-style-4:hover::before{ opacity:1; }
.t-records a.button-reset.button-style-4:hover::after{
  background: linear-gradient(90deg,
    transparent 0 12px,
    #64090E 12px 12.5px,
    transparent 12.5px calc(100% - 12.5px),
    #64090E calc(100% - 12.5px) calc(100% - 12px),
    transparent calc(100% - 12px) 100%
  );
}







/* ===== STYLE 2 — финальная стабильная версия ===== */
.t-records a.button-reset.button-style-2{
  /* размер/форма, как в ТЗ */
  width:193px; height:49px; border-radius:5.5px;
  border:0.7px solid #E9DFC1; font-size:25px;

  position:relative; overflow:hidden; isolation:isolate; z-index:0;

  /* плавности, без дерганья */
  transition: color .4s ease, border-color .4s ease, box-shadow .4s ease;

  /* БАЗОВЫЙ ФОН: полоски + сплошной — без боковых линий */
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(100,9,14,.6) 0 8px,
      transparent 8px 17px
    ),
    linear-gradient(#74070E,#74070E) !important; /* фиксируем базовый фон */
  background-repeat:no-repeat !important;
  background-size:
    calc(100% - 12px) 100%, /* отступы 6px слева/справа */
    100% 100% !important;
  background-position:
    6px 0,
    0 0 !important;
}

/* Текст — всегда сверху и плавно меняет цвет */
.t-records a.button-reset.button-style-2 .btn-label{
  position:relative; z-index:3;
  color:#E9DFC1 !important; -webkit-text-fill-color:#E9DFC1 !important;
  pointer-events:none; transition:color .4s ease;
}

/* HOVER-OVERLAY: светлые полоски + светлый фон, без боковых линий (только кроссфейд) */
.t-records a.button-reset.button-style-2::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  z-index:1; pointer-events:none; opacity:0; transition:opacity .4s ease;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(248,245,243,.2) 0 8px,
      transparent 8px 17px
    ),
    linear-gradient(#E9DFC1,#E9DFC1);
  background-repeat:no-repeat;
  background-size:
    calc(100% - 12px) 100%,
    100% 100%;
  background-position:
    6px 0,
    0 0;
}

/* БОКОВЫЕ ЛИНИИ: ровные и симметричные, отдельным оверлеем */
.t-records a.button-reset.button-style-2::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  z-index:2; transition:background .4s ease;
  /* по 0.7px на 22px от краёв */
  background: linear-gradient(90deg,
    transparent 0 22px,
    #E9DFC1 22px 22.7px,
    transparent 22.7px calc(100% - 22.7px),
    #E9DFC1 calc(100% - 22.7px) calc(100% - 22px),
    transparent calc(100% - 22px) 100%
  );
}

/* HOVER: только мягкие изменения, БЕЗ смены фон-картинки у ссылки */
.t-records a.button-reset.button-style-2:hover{
  border-color:#74070E;
  box-shadow:0 0 18px 0 rgba(208,74,82,.42);
  /* фиксируем базовый фон, чтобы не было рывка */
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(100,9,14,.6) 0 8px,
      transparent 8px 17px
    ),
    linear-gradient(#74070E,#74070E) !important;
}
.t-records a.button-reset.button-style-2:hover::before{ opacity:1; }
.t-records a.button-reset.button-style-2:hover::after{
  background: linear-gradient(90deg,
    transparent 0 22px,
    #64090E 22px 22.7px,
    transparent 22.7px calc(100% - 22.7px),
    #64090E calc(100% - 22.7px) calc(100% - 22px),
    transparent calc(100% - 22px) 100%
  );
}
.t-records a.button-reset.button-style-2:hover .btn-label{
  color:#74070E !important; -webkit-text-fill-color:#74070E !important;
}



/* — клики всегда доходят до ссылок-кнопок — */
.t-records a.button-reset{
  position: relative;
  z-index: 1000;              /* поверх соседних слоёв Zero */
  pointer-events: auto !important;
}

/* — декоративные оверлеи никогда не перекрывают клик — */
.t-records a.button-reset::before,
.t-records a.button-reset::after{
  pointer-events: none !important;
}

/* — на всякий случай: текстовый спан тоже не перехватывает — */
.t-records a.button-reset .btn-label{
  pointer-events: none;
}

/* Иногда в Zero есть невидимые слои поверх.
   Дадим нашим HTML-элементам приоритет клика */
.t-records .t396__elem:has(a.button-reset){
  pointer-events: auto;
  z-index: 1000;
}