*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0;padding:0}ul,ol{margin:0;padding:0;list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5;-webkit-font-smoothing:antialiased}canvas,img,picture,svg,video{max-width:100%;height:auto;display:block}button,input,select,textarea{font:inherit;margin:0}a{text-decoration:none;color:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* ========== ПОДКЛЮЧЕНИЕ ШРИФТОВ ========== */
@font-face {
  font-family: 'Bacalisties';
  src: url('/wp-content/themes/new-kinderok/fonts/Bacalisties.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Concreate Fill';
  src: url('/wp-content/themes/new-kinderok/fonts/Concreate Fill.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========== ОСНОВНЫЕ СТИЛИ ========== */
body {
  margin: 0;
  color: #484642;
}

/* ========== ОГРАНИЧЕНИЕ ШИРИНЫ ВСЕГО САЙТА ========== */
#page {
  position: relative;
  width: clamp(600px, 95.3125vh + 48px, 1800px);
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.homepage {
  height: 100vh;
}
#page > img {
  width: 100%;
  height: auto;
  position: absolute;
  color: white;
}
/* ========== HEADER С ФОНОМ ========== */
header {
  width: 100%;
  overflow: visible;
  height: 36vh;
  display: flex;
  min-height: 73px;
  position: absolute;
}

header img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  color: white;
}

/* ========== ЛОГОТИП ========== */
.logo {
  position: relative;
  z-index: 100;
  width: 33%;
}

.logo .custom-logo {
  height: auto;
  width: clamp(130px, 91%, 91%);
  position: absolute;
  bottom: 20vh;
  margin-left: 9%;
  animation: fadeInMenu 0.8s ease-out forwards;
}

/* ========== НАЛОЖЕНИЕ ТОВАРОВ НА ФОН ========== */
main.content {
  width: 100%;
  position: relative;
  display: flex;
  margin-top: auto;
}
main.content .post {
  margin-bottom: clamp(28px, 4.5547vh, 94px);
  width: 100%;
  margin-top: auto;
}
.menu-hmenu-container {
  position: relative;
  width: 67%;
  z-index: 999;
}
#menu-hmenu {
  background: white;
  border-radius: 99px;
  right: 0;
  position: absolute;
  bottom: 22vh;
  margin: 0;
    margin-right: 0px;
  padding: 0;
  animation: fadeInMenu 1s ease-out forwards;
  margin-right: 9%;
}
/* #menu-hmenu {
  background: white;
  border-radius: 99px;
  right: 0;
  position: absolute;
  bottom: clamp(5px, calc(2.5vh + -1px), 100px);
  margin: 0;
    margin-right: 0px;
  padding: 0 5px;
  animation: fadeInMenu 1s ease-out forwards;
  margin-right: 9%;
  border: 1px solid #dfdfdf;
  box-shadow: 1px 1px 4px #d9d9d9;
} */


#menu-hmenu li {
  display: inline-block;
  margin-left: clamp(7px, 1.1719vh, 29px);
}
#menu-hmenu .current-menu-item a {
  color: #685e5e;
}
#menu-hmenu a {
  color: #ca9d66;
  text-decoration: none;
  font-size: clamp(14px, 2.1875vh + 1.2px, 46px);
  text-transform: uppercase;
  font-family: 'Concreate Fill', sans-serif;
  font-weight: lighter;
}

/* ========== СЕТКА ТОВАРОВ ========== */
.woocommerce ul.products.columns-4 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0 clamp(43px, 7.0313vh, 144px);
  margin: 0;
  list-style: none;
}

.woocommerce ul.products.columns-4 li.product {
  width: 33.3%;
  margin: 0;
  padding: 0;
  float: none;
  background: transparent;
  box-shadow: none;
  flex: 1;
}

/* Ссылка вокруг товара */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  padding: 0;
  margin: 0;
}

/* Галерея товара (бутылка) */
.woocommerce-product-gallery {
  width: 100%;
  opacity: 1;
  margin: 0;
  padding: 0;
}

.woocommerce-product-gallery__wrapper {
  margin: 0;
  padding: 0;
}

.woocommerce-product-gallery__image {
  margin: 0;
  padding: 0;
}

.woocommerce-product-gallery__image img, .single-wine-bottle-img {
  height: clamp(240px, 39.0625vh, 800px);
  width: auto;
  max-width: none;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  color: white;
  transition: transform 0.4s ease-in-out; 
  will-change: transform; 
}
.woocommerce-product-gallery__image img:hover, .single-wine-bottle-img:hover {
  transform: scale(1.06); 
}
/* ========== НАЗВАНИЯ ПОД БУТЫЛКАМИ (ШРИФТЫ) ========== */
.loop_product_div, .single-product-top-content {
  text-align: center;
}

/* Названия вин - каллиграфический шрифт */
.loop_product_div h2, .single-product h1 {
  font-family: 'Bacalisties', cursive;
  font-size: clamp(36px, 5.8594vh, 120px);
  margin-top: clamp(7px, 1.1719vh, 29px);
  font-weight: normal;
  color: #ca9d66;
  white-space: nowrap;
  word-spacing: -0.5rem;
}
.single-product h1 {
  font-size: clamp(44px, 7.1641vh, 147px);
  text-align: center;
  font-weight: bold;
}

/* Тип вина (SAPERAVI RESERVE и т.д.) */
.wine-type-subtitle{
  font-family: 'Concreate Fill', sans-serif;
  font-size: clamp(11px, 1.5625vh, 32px);
  text-transform: uppercase;
  font-weight: lighter;
  white-space: nowrap;
  color: #4f4f4f;
}
.single-product .wine-type-subtitle {
  font-size: clamp(14px, 2.3438vh, 48px);
}
.single-product br {
  display: none;
}
/* Год */
.year-wine {
  display: block;
  font-family: 'Concreate Fill', sans-serif;
  font-size: clamp(19px, 3.125vh, 64px);
  color: #ca9d66;
  font-weight: lighter;
}

.single-product .limited-release {
  font-size: clamp(10px, 1.6953vh, 35px);
  margin-top: clamp(3px, 0.5234vh, 11px);
}
.limited-release {
  display: block;
  font-family: 'Concreate Fill', sans-serif;
  font-size: clamp(8px, 1.4297vh, 30px);
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
  margin-top: clamp(3px, 0.5234vh, 11px);
}

/* ========== АДАПТИВНОСТЬ ДЛЯ БОЛЬШИХ ЭКРАНОВ ========== */
@media (min-width: 769px) {
  .woocommerce ul.products.columns-4 {
    flex-direction: row;
    flex-wrap: nowrap;
  }
}


@media (max-width: 768px) {
  #page {
    width: 100% !important;
    height: auto; 
    overflow: hidden !important; 
    display: flex !important;
    flex-direction: column !important;
  }

  /* ФОН НАВЕРХУ */
#page > img {
  transform: scale(1.1);
  top: 3vh;
}
  
header {
  height: 8vh;
  margin-bottom: 6vh;
}

.logo .custom-logo {
  margin-left: 7%;
  bottom: clamp(4px, 1.6667vh, 9px);
}

  /* ЖЕСТКОЕ ВЫРАВНИВАНИЕ МЕНЮ В ОДИН РЯД */
  .menu-hmenu-container {

  }

#menu-hmenu {
  margin-right: 5%;
  bottom: clamp(10px, 2vh, 20px);
}

  #menu-hmenu li {
  margin-left: clamp(4px, 1.3333vw, 8px);
}

#menu-hmenu a {
  font-size: clamp(8px, 3.2vw, 18px);
  transition: color 0.3s ease !important;
}
  
  #menu-hmenu a:active {
    color: #685e5e !important;
  }

  /* НАДЕЖНЫЙ ВЕРТИКАЛЬНЫЙ СКРОЛЛ КОНТЕНТА */
  main.content {
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
    overflow-y: auto !important; /* Включаем классический вертикальный скролл */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important; 
    margin-top: 10px !important; 
    padding-bottom: 100px !important; /* Пространство в самом низу для последней бутылки */
    z-index: 5 !important;
    position: relative !important;
  }

  main.content .post {
    position: relative !important;
    bottom: auto !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* СЕТКА ТОВАРОВ В СТОЛБИК */
  .woocommerce .products,
  .woocommerce ul.products,
  .woocommerce ul.products.columns-4 {
    display: flex !important;
    flex-direction: column !important; /* Выстраиваем строго вертикально */
    flex-wrap: nowrap !important; 
    align-items: center !important;
    
    overflow: visible !important;
    padding: 20px 20px !important;
    gap: 50px !important; /* Расстояние между бутылками по вертикали */
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* КАРТОЧКА ТОВАРА */
  .woocommerce .products li.product,
  .woocommerce ul.products li.product,
  .woocommerce ul.products.columns-4 li.product {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    float: none !important;
    clear: none !important;
    padding: 5% 0 !important;
    width: 100% !important;
    max-width: 270px !important; /* Чтобы бутылка не растягивалась вширь */
    flex: none !important;
    display: block !important;
  }
  
  /* РАЗМЕР КАРТИНКИ */
  .woocommerce-product-gallery__image img {
    height: auto !important;
    max-height: 340px !important; /* Оптимальная аккуратная высота бутылки */
    width: auto !important;
    margin: 0 auto !important;
  }

.product-block-image{
  margin: 2vh 0;
}

  .loop_product_div h2 {
    margin-top: 12px !important;
  }

  .loop_product_div h3 {
    font-size: 12px !important;
    white-space: normal !important;
  }

  .year-wine {
    font-size: 24px !important;
    margin-top: 3px !important;
  }

  .limited-release {
    font-size: 10px !important;
  }

  /* Блокировка лупы на смартфонах */
  .magnifier-lens, 
  .woocommerce ul.products li.product:hover .magnifier-lens {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  .products .product .woocommerce-LoopProduct-link {
    cursor: default !important;
  }
}

@keyframes fadeInMenu {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal_age { display: none; }
.magnifier-container { position: relative; display: inline-block; }
.main-img { display: block; max-width: 100%; height: auto; cursor: none; }
.woocommerce-product-gallery { opacity: 1 !important; visibility: visible !important; display: block !important; }
.products .product { position: relative !important; }
.products .product .woocommerce-LoopProduct-link { cursor: none !important; }

/* СТИЛИ ДЛЯ ВЫНЕСЕННОЙ ЛУПЫ */
.magnifier-lens {
  position: fixed !important;
  top: 0 !important;   
  left: 0 !important;  
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  border: 5px solid #fff !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
  background-color: transparent !important; 
  pointer-events: none !important; 
  z-index: 999999 !important;
  display: none;
}

.woocommerce ul.products li.product:hover .magnifier-lens {
  visibility: visible;
  opacity: 1;
}

.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-4 li.product {
  overflow: visible !important;
}

.woocommerce-product-gallery__trigger {
  display: none;
}


/* МОЕ */

.single-product .product-type-simple, #pages {
  /* background: rgba(255, 255, 255, 0.8); */
  backdrop-filter: blur(1px) !important;
  -webkit-backdrop-filter: blur(1px) !important;
/*   border: 1px solid rgba(255, 255, 255, 0.4) !important; */
  border-radius: 13px !important;
  padding: 2% 2% !important;
  /* box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.05) !important; */
  transition: all 0.3s ease-in-out !important;
}

@media (max-width: 769px) {
  .product-type-simple {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 24px !important;
  padding: 2% 2% !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease-in-out !important;
 }
}
/* МОЕ END */














/* ========== СТИЛЬ КНОПКИ ПОДРОБНЕЕ ========== */
.product-read-more-wrapper {
  text-align: center;
  margin-top: clamp(10px, 2vh, 25px);
  width: 100%;
}

.product-read-more-btn {
  display: inline-block !important;
  font-family: 'Concreate Fill', sans-serif;
  font-size: clamp(10px, 1.6vh, 14px) !important;
  color: #ca9d66 !important; /* Фирменный золотистый цвет */
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 1px solid rgba(202, 157, 102, 0.4); /* Элегантное тонкое подчеркивание */
  padding-bottom: 3px;
  transition: all 0.3s ease !important;
}

/* Эффект при наведении на ПК и при клике на мобильном */
.product-read-more-btn:hover,
.product-read-more-btn:active {
  color: #4f4f4f !important;
  border-bottom-color: #4f4f4f;
  transform: translateY(-1px);
}











/* 4. СЕТКА: Заголовок сверху, бутылка слева, текст справа */
@media (min-width: 769px) {
  .product-custom-layout-grid {
  display: grid !important;
  grid-template-columns: 4.1fr 6fr !important;
  column-gap: 1vw;
  row-gap: 30px !important;
  align-items: start !important;
  box-sizing: border-box !important;
}

    /* Заголовки занимают всю верхнюю строчку */
    .product-custom-layout-grid .product-block-meta {
        grid-column: 1 / span 2 !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Картинка бутылки садится слева */
    .product-custom-layout-grid .product-block-image {
        grid-column: 1 !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* Подробный текст садится справа */
    .product-custom-layout-grid .product-block-description {
        grid-column: 2 !important;
        width: 100% !important;
    }
}

/* ========== АДАПТИВНЫЙ РАЗМЕР БУТЫЛКИ ========== */
.product-custom-layout-grid .single-wine-bottle-img {
    height: clamp(350px, 80vh, 750px) !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}



.product-block-description p{
  font-size: clamp(11px, 3.8333vw, 17px);
}
#pages {
  z-index: 99;
}

#pages h1 {
  margin: 1em;
}
#pages p {
  margin: 1em 2em;
}
#pages hr{
  margin: 0 2em;
}





/* ========== ВАРИАНТ 1: ШРИФТЫ LORA + CORMORANT (ГИБКИЙ ПО ВЫСОТЕ) ========== */

/* Главный заголовок (About the Wine) */
.wine-tasting-notes h2, #pages h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(22px, 3.5vh, 40px);
  color: #2b2b2b;
  font-weight: 700;
  margin-bottom: 0.5em;
}
#pages h1, #pages h2 {
    text-transform: uppercase;
}
#pages h2 {
	margin: 1em 1.3em;
}
/* Подзаголовки (Tasting Notes, Food Pairing, Technical Info) */
.wine-tasting-notes h3, #pages h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(18px, 3vh, 32px);
  color: #444444;
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

/* Обычный текст описания */
.wine-tasting-notes p, #pages p {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(13px, 1.9vh, 22px);
  line-height: 1.8;
  color: #555555;
  margin-bottom: 0.8em;
}

/* Параметры Color, Aroma, Palate (строчные, без переноса) */
.wine-tasting-notes strong {
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(13px, 1.9vh, 22px);
    color: #444444;
    font-weight: 700;
    display: inline !important;
    margin: 0;
}

/* СПИСОК ХАРАКТЕРИСТИК (Technical Information) */
.wine-tasting-notes ul {
    padding-left: 0;
}

.wine-tasting-notes li {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(13px, 1.8vh, 16px);
  line-height: 1.8;
  color: #555555;
  margin-bottom: 0.8em;
  list-style-type: none !important;
  position: relative;
  padding-left: 2.5vh;
  white-space: nowrap !important;
}


#menu-hmenu a {
    display: inline-block;
    /* Увеличиваем плавность до 0.4 секунды для максимальной мягкости */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s ease !important;
}

#menu-hmenu a:hover {
    color: #685e5e !important; /* Мягкий переход в цвет активного пункта */
    transform: translateY(-1px); /* Едва заметный, благородный подъем всего на 1 пиксель */
}

/* Переводим лайтбокс в режим фиксации относительно экрана, а не страницы */
div.pswp.pswp--open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important; /* Гарантированно перекрывает меню и весь контент */
}
/* Полностью скрываем полосу прокрутки для открытого лайтбокса */
div.pswp.pswp--open {
    scrollbar-width: none !important; /* Убирает скроллбар в Firefox */
    -ms-overflow-style: none !important; /* Убирает скроллбар в Internet Explorer/Edge */
}

/* Убирает скроллбар во всех WebKit-браузерах (Chrome, Safari, Opera, Яндекс.Браузер) */
div.pswp.pswp--open::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
body:has(.pswp--open) {
    overflow: hidden !important;
}


.wp-block-paragraph.email{font-weight: bold;}
.wp-block-paragraph.email a{
  color: #685668;;
}

.wp-block-paragraph.email a:hover{
  text-decoration: underline;
}


/* ========== ИДЕАЛЬНЫЙ БАЛАНС: СТИЛЬНЫЙ И ТЕПЛЫЙ AGE GATE ========== */
#gtwine-age-gate {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(14, 14, 14, 0.97) !important; /* Мягкий глубокий фон */
    z-index: 99999999 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.age-gate-content {
    text-align: center;
    max-width: 480px;
    padding: 2vh 20px;
}

.age-gate-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(24px, 3.8vh, 36px) !important;
    color: #ca9d66 !important; /* Фирменное золото согревает экран */
    margin-bottom: 1.5vh !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

.age-gate-text {
    font-family: 'Lora', Georgia, serif !important;
    font-size: clamp(13px, 1.8vh, 16px) !important;
    color: #948888 !important; /* Сделали подсказку чуть теплее по цвету */
    margin-bottom: 5vh !important;
    line-height: 1.6;
}

.age-gate-buttons {
    display: flex;
    justify-content: center;
    gap: 25px; /* Комфортное расстояние между кнопками */
}

/* ФОРМА КНОПОК: СГЛАЖЕННЫЕ ОВАЛЫ С МЯГКИМ ПЕРЕХОДОМ */
#age-gate-yes,
#age-gate-no {
    font-family: 'Concreate Fill', sans-serif !important;
    font-size: clamp(12px, 1.7vh, 14.5px) !important;
    text-transform: uppercase;
    letter-spacing: 2px !important;
    
    /* Идеальные внутренние отступы, чтобы текст сидел ровно по центру овала */
    padding: 13px 38px 15px 38px !important; 
    
    cursor: pointer !important;
    display: inline-block !important;
    text-decoration: none;
    box-sizing: border-box;
    background-color: transparent !important;
    border-radius: 30px !important; /* Овальная форма убирает строгость */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Кнопка "YES, I AM" (Золотой контур, переходящий в мягкую заливку) */
#age-gate-yes {
    color: #ca9d66 !important;
    border: 1px solid rgba(202, 157, 102, 0.4) !important; /* Тонкая золотистая рамка */
}
#age-gate-yes:hover {
    background-color: #ca9d66 !important; /* Кнопка загорается благородным золотом */
    border-color: #ca9d66 !important;
    color: #0d0d0d !important; /* Текст становится контрастным темным */
    transform: translateY(-2px) !important; /* Плавный интерактивный подъем */
}

/* Кнопка "NO, I AM NOT" (Приглушенная, не отвлекает внимание) */
#age-gate-no {
    color: #726767 !important;
    border: 1px solid rgba(114, 103, 103, 0.25) !important; /* Едва заметная рамка */
}
#age-gate-no:hover {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-2px) !important;
}
/* РАДИАЛЬНАЯ МАСКА-ДУГА (ТОЧНО ПО ВАШЕМУ РИСУНКУ) */
#page > img {
    /* Сдвигаем центр эллипса вниз страницы (50% 120%) и растягиваем его.
       Внутри круга (0) — картинка стирается до белого фона. К краям (75%) — проявляется. */
    -webkit-mask-image: radial-gradient(ellipse at 50% 280%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgb(0, 0, 0) 75%) !important;
    mask-image: radial-gradient(ellipse at 50% 280%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgb(0, 0, 0) 75%) !important;
}

/* Очищаем фон текстового блока */
.product-custom-layout-grid .product-block-description {
    background: none !important;
    background-color: transparent !important;
}











/* ==========================================================================
   ИСПРАВЛЕННЫЙ ШЕЛКОВЫЙ SCROLL SNAP
   ========================================================================== */

/* Включаем плавное поведение на уровне движка браузера */
html, body {
    scroll-behavior: smooth !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Главный контейнер, который вы прокручиваете на видео */
.main-seo-wrapper {
  height: 100vh !important;
  overflow-y: scroll !important;
  scroll-snap-type: y mandatory !important;
  scroll-behavior: smooth !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Убираем полосы прокрутки */
.main-seo-wrapper::-webkit-scrollbar { display: none !important; }
.main-seo-wrapper { scrollbar-width: none !important; }

/* ЭТАЖ 1: Витрина с бутылками */
.first-viewport-hero {
  scroll-snap-align: center;
  scroll-snap-stop: always !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: transparent !important;
  padding-top: 36vh;
}

/* ЭТАЖ 2: Белый свиток с текстом (ИЗОЛИРОВАННЫЙ СЛОЙ) */
.second-viewport-seo {
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    height: auto !important;
    background: #ffffff !important; /* Жесткий белый фон */
    background-color: #ffffff !important;
    position: relative !important;
    z-index: 9999 !important; /* Выталкиваем выше фоновых картинок темы */
    box-sizing: border-box;
    padding: 8vh 0 !important;
}

/* ==========================================================================
   КРОССБРАУЗЕРНЫЙ СМАРТ-ХЕДЕР (ИСПРАВЛЕН ПОД ВАШИ ПАДДИНГИ 36VH)
   ========================================================================== */

/* 1. Настройка самой шапки */
header {
    position: absolute !important; 
    width: clamp(600px, 95.3125vh + 48px, 1800px) !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important; 
    overflow: visible;
    height: 36vh;
    display: flex;
    min-height: 73px;
    opacity: 1;

    /* Подключаем анимацию видимости */
    animation: crossBrowserFade linear both !important;
    animation-timeline: --scroll-trigger !important;
    animation-range: exit 0% exit 100% !important;
}

/* 2. ИСПРАВЛЕНИЕ: Автономный датчик, защищенный от padding-top: 36vh */
.first-viewport-hero::before {
    content: "" !important;
    position: absolute !important;
    /* Намертво прибиваем к самому верхнему пикселю первого экрана, игнорируя паддинги */
    top: 0 !important; 
    left: 0 !important;
    width: 100% !important;
    height: 10px !important; /* Делаем его ультра-тонкой невидимой нитью на потолке */
    background: transparent !important;
    pointer-events: none !important;
    z-index: -1 !important;
    
    /* Регистрируем датчик */
    view-timeline-name: --scroll-trigger !important;
    view-timeline-axis: y !important;
}

/* КЛЮЧЕВЫЕ КАДРЫ: Мягкое таяние и аккуратный уход вверх на 25px */
@keyframes crossBrowserFade {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) !important;
        pointer-events: auto;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-25px) !important; /* Тот самый микро-уход */
        pointer-events: none;
    }
}