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 {
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.js-product .js-product-img {
  transition: none; /* остаётся none, т.к. анимация через fade-layer */
}

/* Плавный быстрый crossfade-слой */
.snm-fade-layer {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .09s linear; /* было .22s */
  pointer-events: none;
  will-change: opacity;
}
.snm-fade-layer.show {
  opacity: 1;
}

/* Всегда 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;
}