html,
body {
  margin: 0;
  padding: 0;
  background: #ffffff;
}

:root {
  --snm-safe-top: env(safe-area-inset-top, 0px);
  --snm-header-h: 63px;
  --snm-top: calc(var(--snm-safe-top) + var(--snm-header-h));
}

@media screen and (max-width: 1199px) {
  :root { --snm-header-h: 54px; }
}

@media screen and (max-width: 639px) {
  :root { --snm-header-h: 50px; }
}

@media screen and (max-width: 479px) {
  :root { --snm-header-h: 48px; }
}

/* HEADER WRAPPER */
#rec999721551 {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  background: transparent !important;
  overflow: visible !important;
}

/* ЕДИНЫЙ GLASS СЛОЙ: safe area + header */
#rec999721551::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--snm-top);
  z-index: 99998;
  pointer-events: none;

  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

/* УБРАТЬ rectangle из ZB (если не удалил в редакторе) */
#rec999721551 .tn-elem[data-elem-id="1779706643883000001"] {
  display: none !important;
}

/* УБРАТЬ стандартные Tilda BG слои */
#rec999721551 .t396__carrier,
#rec999721551 .t396__filter {
  display: none !important;
}

/* ARTBOARD = только контейнер иконок/логотипа (без blur/background) */
#rec999721551 .t396__artboard {
  position: fixed !important;
  top: var(--snm-safe-top) !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--snm-header-h) !important;
  padding-top: 0 !important;
  box-sizing: border-box !important;
  z-index: 99999 !important;

  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Контент ниже safe area + header */
body {
  padding-top: var(--snm-top) !important;
}

/* Слайдер под стеклом от самого верха */
#rec528868282nlm {
  margin-top: calc(-1 * var(--snm-top)) !important;
}

/* Убираем серый/цветной tap highlight на мобильных */
html,
body,
a,
button,
[role="button"],
.tn-atom,
.t-menu__link-item,
.t-btn,
.t-submit,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent;
}

/* Убираем вспышку/маску в момент нажатия */
a:active,
button:active,
[role="button"]:active,
.tn-atom:active,
.t-menu__link-item:active,
.t-btn:active,
.t-submit:active {
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Чтобы не было синей обводки на мобильном таче */
a:focus,
button:focus,
[role="button"]:focus,
.tn-atom:focus,
.t-menu__link-item:focus,
.t-btn:focus,
.t-submit:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ==== Render optimization (без потери качества) ==== */
/* Safe performance tweaks (без поломки popups) */
.t396__artboard,
.t-store__card,
.t-slds__item {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Важно для popup-окон Tilda */
.t1002__wishlistwin,
.t706__cartwin,
.t-popup,
.t-store__userbar,
.t-store__search-wrapper {
  content-visibility: visible !important;
  contain: none !important;
}

/* Меньше перерисовок при скролле */
.t396__artboard,
.t-store__card,
.t-slds__item {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.js-product .js-product-img,
.js-product .t-catalog__card__bgimg,
.js-product .t-store__card__bgimg {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.snm-slide-layer {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Всегда 3 точки */
.snm-prod-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 8;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.snm-prod-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9a9a9a;
}

.snm-prod-dot.is-active {
  background: #111111;
}

/* =========================================================
   ST340 GLOBAL (все блоки каталога / record-type 1291)
   ========================================================= */

/* =========================
   1) Бейдж NEW/SALE
   ========================= */
#allrecords .t-rec[data-record-type="1291"] .t-catalog__card__mark,
#allrecords .t-rec[data-record-type="1291"] .t-store__card__mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  height: 18px !important;
  min-height: 18px !important;
  padding: 0 7px !important;
  border-radius: 8px !important;

  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 530 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: #111 !important;

  background: rgba(255, 255, 255, 0.24) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14) !important;
}

#allrecords .t-rec[data-record-type="1291"] .t-catalog__card__mark-wrapper,
#allrecords .t-rec[data-record-type="1291"] .t-store__card__mark-wrapper {
  width: auto !important;
}

/* =========================
   2) Строка Фильтры / Сортировка
   ========================= */
#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__controls-wrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__opts-mob-btn {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: 0 !important;
}

#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__sort-mob-btn {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  margin-right: 0 !important;
}

#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__sort-mob-btn::before {
  content: "Сортировка";
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__opts-mob-btn-icon,
#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__opts-mob-btn svg,
#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__sort-mob-btn-icon,
#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__sort-mob-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* =========================
   3) Текст внутри попапов
   ========================= */
#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__options .t-catalog__filter__item-title {
  font-size: 14px !important;
  font-weight: 500 !important;
}

#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__options .t-catalog__filter__title,
#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__options .t-catalog__sort-select,
#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__options .t-catalog__filter__input,
#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__options .t-catalog__filter__reset,
#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__options .t-catalog__filter__prods-number {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__item_sort-mobile .t-catalog__filter__item-title,
#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__item_sort-mobile .t-catalog__filter__custom-sel,
#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__item_sort-mobile .t-catalog__filter__title {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__item_sort-mobile .t-catalog__sort-select,
#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__item_sort-mobile .t-catalog__sort-select option {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* =========================
   4) КЛЮЧЕВОЙ фикс зазора (только st340, mobile)
   Убирает 40px пустоты в начале .t1291
   ========================= */
@media (max-width: 980px) {
  #allrecords .t-rec[data-record-type="1291"] > .t1291 {
    margin-top: -40px !important;
  }
}

#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter-wrapper,
#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter,
#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter__controls-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#allrecords .t-rec[data-record-type="1291"] .t-catalog__filter {
  padding-bottom: 8px !important;
}

/* =========================
   5) Кнопка «Выбрать размер»
   ========================= */
#allrecords .t-rec[data-record-type="1291"] .t-btnflex.t-btnflex_type_button.js-catalog-prod-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  color: #111 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(198, 198, 202, 0.9) !important;

  background: rgba(255, 255, 255, 0.32) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.08) !important;

  filter: none !important;
}

#allrecords .t-rec[data-record-type="1291"] .t-btnflex.t-btnflex_type_button.js-catalog-prod-btn::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 1px;
  height: 36%;
  border-radius: 8px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  pointer-events: none;
}

#allrecords .t-rec[data-record-type="1291"] .t-btnflex.t-btnflex_type_button.js-catalog-prod-btn:hover,
#allrecords .t-rec[data-record-type="1291"] .t-btnflex.t-btnflex_type_button.js-catalog-prod-btn:focus-visible,
#allrecords .t-rec[data-record-type="1291"] .t-btnflex.t-btnflex_type_button.js-catalog-prod-btn:active {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 3px 10px rgba(0, 0, 0, 0.09) !important;
}