/* ==== Ads: Header Top (scoped) ==== */
.w-ads-ht-slot{
  --glass: var(--glass-bg-light, rgba(255,255,255,.35));
  --radius: var(--radius-md, .9rem);
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(8px);
  z-index: 1;
}

/* Skeleton (shimmer) із правильними пропорціями */
.w-ads-ht-slot .w-ads-ht-skeleton{
  width: 100%;
  height: auto;
  aspect-ratio: 970 / 90;
  background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.4), rgba(255,255,255,.25));
  background-size: 200% 100%;
  animation: wAdsHtShine 1.2s linear infinite;
}
@keyframes wAdsHtShine{ to{ background-position: -200% 0; } }

/* Card */
.w-ads-ht-card{ position: relative; width: 100%; }

/* Контейнер посилання тримає пропорцію */
.w-ads-ht-link{
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 970 / 90;  /* desktop */
  overflow: hidden;
  z-index: 1;
}

/* Зображення — обрізка по краях */
.w-ads-ht-img{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Бейдж "Реклама" (зліва) */
.w-ads-ht-badge{
  position: absolute;
  top: .35rem; left: .45rem;
  padding: .22rem .45rem;
  font: 600 12px/1 var(--font-main, Inter, system-ui, sans-serif);
  color: #fff;
  background: rgba(0,0,0,.45);
  border-radius: .5rem;
  pointer-events: none;
  z-index: 2;
}

/* Кнопки керування (справа вгорі) */
.w-ads-ht-controls{
  position: absolute;
  top: .35rem; right: .35rem;
  display: inline-flex; gap: .35rem;
  z-index: 3;
}
.w-ads-ht-btn{
  width: 28px; height: 28px;
  display:inline-flex; align-items:center; justify-content:center;
  font: 700 14px/1 var(--font-main, Inter, system-ui, sans-serif);
  color:#fff; background: rgba(0,0,0,.45);
  border: 0; border-radius: 999px; cursor: pointer;
  backdrop-filter: blur(3px);
}
.w-ads-ht-btn:hover{ background: rgba(0,0,0,.6); }

/* Поповер “Поскаржитися” */
.w-ads-ht-report{
  position: absolute;
  top: 2.2rem; right: .35rem;
  min-width: 220px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(24,145,195,.2);
  border-radius: .7rem;
  box-shadow: 0 12px 24px rgba(24,145,195,.16);
  padding: .25rem;
  z-index: 4;
  display: none;
}
.w-ads-ht-report.is-open{ display:block; animation: fadeIn .14s ease; }
.w-ads-ht-report h4{
  margin: .3rem .4rem .2rem; font: 700 12px/1 var(--font-main, Inter, system-ui, sans-serif);
  color: #0b3a56; opacity: .75;
}
.w-ads-ht-report .w-ads-ht-reason{
  width: 100%; text-align: left; padding: .45rem .55rem; margin: .15rem 0;
  background: transparent; border: 0; border-radius: .55rem; cursor: pointer;
  color: #0b3a56; font-weight: 600;
}
.w-ads-ht-report .w-ads-ht-reason:hover{ background: rgba(24,145,195,.12); }

@keyframes fadeIn{ from{opacity:0; transform: translateY(-4px);} to{opacity:1; transform:none;} }

/* Тихий стан без банера */
.w-ads-ht-slot .w-ads-ht-skeleton.is-empty{ opacity:.42; }

/* ---- Breakpoints під стандартні розміри ---- */
@media (max-width:1024px){ .w-ads-ht-link, .w-ads-ht-skeleton{ aspect-ratio: 728 / 90; } }
@media (max-width:768px) { .w-ads-ht-link, .w-ads-ht-skeleton{ aspect-ratio: 468 / 60; } }
@media (max-width:480px) { .w-ads-ht-link, .w-ads-ht-skeleton{ aspect-ratio: 320 / 100; } }

/* ==== Underlap-поведінка під хедером ==== */
.header-underlap{ position: relative; margin-top: var(--header-height, 54px); }

/* без відступів і декору під хедером */
.header-underlap .w-ads-ht--underlap{
  background: transparent !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  position: sticky;
  top: 0;
  z-index: 100; /* нижче за слайдер/оверлей */
}
.header-underlap .w-ads-ht--underlap::before{ content:none; }

/* страховка від горизонтального скролу */
.w-ads-ht-slot, .w-ads-ht-link{ max-width: 100%; line-height: 0; }
html, body { overflow-x: hidden; }
/* ==== Ads: Header Top (scoped) ==== */
.w-ads-ht-slot{
  --glass: var(--glass-bg-light, rgba(255,255,255,.35));
  --radius: var(--radius-md, .9rem);
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(8px);
  z-index: 1;
}

/* Skeleton */
.w-ads-ht-slot .w-ads-ht-skeleton{
  width: 100%;
  height: auto;
  aspect-ratio: 970 / 90;
  background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.4), rgba(255,255,255,.25));
  background-size: 200% 100%;
  animation: wAdsHtShine 1.2s linear infinite;
}
@keyframes wAdsHtShine{ to{ background-position: -200% 0; } }

/* Card */
.w-ads-ht-card{ position: relative; width: 100%; }

/* Контейнер посилання тримає пропорцію (для внутрішніх) */
.w-ads-ht-link{
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 970 / 90;
  overflow: hidden;
  z-index: 1;
}

/* Зображення — обрізка по краях */
.w-ads-ht-img{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Бейдж "Реклама" (тільки для внутрішніх) */
.w-ads-ht-badge{
  position: absolute;
  top: .35rem; left: .45rem;
  padding: .22rem .45rem;
  font: 600 12px/1 var(--font-main, Inter, system-ui, sans-serif);
  color: #fff;
  background: rgba(0,0,0,.45);
  border-radius: .5rem;
  pointer-events: none;
  z-index: 2;
}

/* Кнопки керування (тільки для внутрішніх) */
.w-ads-ht-controls{
  position: absolute;
  top: .35rem; right: .35rem;
  display: inline-flex; gap: .35rem;
  z-index: 3;
}
.w-ads-ht-btn{
  width: 28px; height: 28px;
  display:inline-flex; align-items:center; justify-content:center;
  font: 700 14px/1 var(--font-main, Inter, system-ui, sans-serif);
  color:#fff; background: rgba(0,0,0,.45);
  border: 0; border-radius: 999px; cursor: pointer;
  backdrop-filter: blur(3px);
}
.w-ads-ht-btn:hover{ background: rgba(0,0,0,.6); }

/* Поповер “Поскаржитися” */
.w-ads-ht-report{
  position: absolute;
  top: 2.2rem; right: .35rem;
  min-width: 220px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(24,145,195,.2);
  border-radius: .7rem;
  box-shadow: 0 12px 24px rgba(24,145,195,.16);
  padding: .25rem;
  z-index: 4;
  display: none;
}
.w-ads-ht-report.is-open{ display:block; animation: fadeIn .14s ease; }
.w-ads-ht-report h4{
  margin: .3rem .4rem .2rem; font: 700 12px/1 var(--font-main, Inter, system-ui, sans-serif);
  color: #0b3a56; opacity: .75;
}
.w-ads-ht-report .w-ads-ht-reason{
  width: 100%; text-align: left; padding: .45rem .55rem; margin: .15rem 0;
  background: transparent; border: 0; border-radius: .55rem; cursor: pointer;
  color: #0b3a56; font-weight: 600;
}
.w-ads-ht-report .w-ads-ht-reason:hover{ background: rgba(24,145,195,.12); }

@keyframes fadeIn{ from{opacity:0; transform: translateY(-4px);} to{opacity:1; transform:none;} }

/* Тихий стан без банера */
.w-ads-ht-slot .w-ads-ht-skeleton.is-empty{ opacity:.42; }

/* ---- Breakpoints ---- */
@media (max-width:1024px){ .w-ads-ht-link, .w-ads-ht-skeleton{ aspect-ratio: 728 / 90; } }
@media (max-width:768px) { .w-ads-ht-link, .w-ads-ht-skeleton{ aspect-ratio: 468 / 60; } }
@media (max-width:480px) { .w-ads-ht-link, .w-ads-ht-skeleton{ aspect-ratio: 320 / 100; } }

/* Google INS — мінімальний резерв місця, щоб зменшити CLS */
.w-ads-ht-google{ min-height: 90px; }

/* ==== Underlap-поведінка під хедером ==== */
.header-underlap{ position: relative; margin-top: var(--header-height, 54px); }
.header-underlap .w-ads-ht--underlap{
  background: transparent !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-underlap .w-ads-ht--underlap::before{ content:none; }

.w-ads-ht-slot, .w-ads-ht-link{ max-width: 100%; line-height: 0; }
html, body { overflow-x: hidden; }