/* PV Myths Slider — Figma-driven (front + back) */
.pv-myths { max-width:100%; }

/* Anti-FOUC */
.pv-myths { visibility:hidden !important; }
.pv-myths.pv-ready { visibility:visible !important; }

.pv-myths, .pv-myths * { box-sizing:border-box !important; }

/* ===== Figma tokens ===== */
.pv-myths{
  /* Front card (desktop from earlier): 400x530 */
  --pv-card-w: 400px;
  --pv-card-h: 530px;
  --pv-radius: 10px;
  --pv-gap: 10px;

  /* Claim */
  --pv-claim-w: 301px;
  --pv-claim-h: 96px;
  --pv-claim-fs: 20px;
  --pv-claim-lh: 24px;
    min-height: var(--pv-claim-h) !important;

  /* Button */
  --pv-btn-w: 145px;
  --pv-btn-h: 50px;
  --pv-btn-r: 30px;
  --pv-btn-py: 8px;
  --pv-btn-px: 16px;
  --pv-btn-fs: 16px;
  --pv-btn-color: #001856;

  /* Back card (mobile Figma): 345x564, padding 30, gap 16, bg #E0EEEE */
  --pv-back-bg: #E0EEEE;
  --pv-back-pad: 30px;
  --pv-back-gap: 16px;

  --pv-back-title-fs: 20px;
  --pv-back-title-lh: 24px;
  --pv-back-title-fw: 600;
  --pv-back-title-color: #001965;

  --pv-back-text-w: 285px;
  --pv-back-text-fs: 14px;
  --pv-back-text-lh: 20px;
  --pv-back-text-fw: 400;
  --pv-back-text-color: #001856;

  --pv-back-icon: 16px;
  --pv-back-icon-gap: 8px;
}

/* Swiper */
.pv-myths .swiper{ width:100% !important; }
.pv-myths .swiper-wrapper{ align-items:stretch !important; }

.pv-myths .swiper-slide{
  height: var(--pv-card-h) !important;
  display:flex !important;
  justify-content:center !important;
}

/* Card shell */
.pv-myths .pv-card{
  height:100% !important;
  width: min(100%, var(--pv-card-w)) !important;
  border-radius: var(--pv-radius) !important;
  overflow:hidden !important;
  position:relative !important;
  background:#111 !important;
  color:#fff !important;
}

/* Front/back layers */
.pv-myths .pv-card__front,
.pv-myths .pv-card__back{
  position:absolute !important;
  inset:0 !important;
}

/* Toggle */
.pv-myths .pv-card__back{ display:none !important; }
.pv-myths .pv-card.is-answered .pv-card__back{ display:block !important; }
.pv-myths .pv-card.is-answered .pv-card__front{ display:none !important; }

/* ===== FRONT ===== */
.pv-myths .pv-media{
  position:absolute !important;
  inset:0 !important;
  background:#111 !important;
}

.pv-myths .pv-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}

/* Image dim (as in Figma) */
.pv-myths .pv-media::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.40) 45%,
    rgba(0,0,0,0.10) 70%,
    rgba(0,0,0,0.00) 100%
  ) !important;
}

/* Bottom content */
.pv-myths .pv-body{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  padding:12px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;   /* ВАЖНО: вниз */
  gap: var(--pv-gap) !important;
}

.pv-myths .pv-claim{
  width: var(--pv-claim-w) !important;
  max-width: 100% !important;

  font-family:"Noto Sans", sans-serif !important;
  font-weight:600 !important;
  font-size: var(--pv-claim-fs) !important;
  line-height: var(--pv-claim-lh) !important;
  text-align:center !important;
  color:#fff !important;

  margin:0 !important;

  display:-webkit-box !important;
  -webkit-line-clamp:4 !important;       /* было 3 */
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

/* Buttons */
.pv-myths .pv-actions{
  display:flex !important;
  gap: var(--pv-gap) !important;
  margin-top:0 !important;
}

.pv-myths .pv-btn{
  width: var(--pv-btn-w) !important;
  height: var(--pv-btn-h) !important;
  border-radius: var(--pv-btn-r) !important;
  padding: var(--pv-btn-py) var(--pv-btn-px) !important;

  background:#fff !important;
  border:none !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  font-family:"Noto Sans", sans-serif !important;
  font-weight:400 !important;
  font-size: var(--pv-btn-fs) !important;
  line-height:100% !important;
  color: var(--pv-btn-color) !important;

  cursor:pointer !important;
}

.pv-myths .pv-btn__icon{
  width:16px !important;
  height:16px !important;
  object-fit:contain !important;
  display:block !important;
}

/* ===== BACK (Result state) ===== */
.pv-myths .pv-card__back{
  background: var(--pv-back-bg) !important;
  color: var(--pv-back-text-color) !important;
  border-radius: var(--pv-radius) !important;
}

/* back container with Figma padding/gap */
.pv-myths .pv-back{
  height:100% !important;
  padding: var(--pv-back-pad) !important;
  display:flex !important;
  flex-direction:column !important;
  gap: var(--pv-back-gap) !important;
}

/* header: icon + title */
.pv-myths .pv-back__header{
  display:flex !important;
  align-items:center !important;
  gap: var(--pv-back-icon-gap) !important;
}

.pv-myths .pv-back__icon{
  width: var(--pv-back-icon) !important;
  height: var(--pv-back-icon) !important;
  display:block !important;
}

.pv-myths .pv-back__title{
  font-family:"Noto Sans", sans-serif !important;
  font-weight: var(--pv-back-title-fw) !important;
  font-size: var(--pv-back-title-fs) !important;
  line-height: var(--pv-back-title-lh) !important;
  color: var(--pv-back-title-color) !important;
}

/* main text block width 285px */
.pv-myths .pv-back__text{
  width: var(--pv-back-text-w) !important;
  max-width: 100% !important;

  font-family:"Noto Sans", sans-serif !important;
  font-weight: var(--pv-back-text-fw) !important;
  font-size: var(--pv-back-text-fs) !important;
  line-height: var(--pv-back-text-lh) !important;
  color: var(--pv-back-text-color) !important;
}

.pv-myths .pv-back__text p{
  margin: 0 0 5px 0 !important;
}

.pv-myths .pv-back__text p:last-child{
  margin-bottom: 0 !important;
}

.pv-myths .pv-back__text ul{
  margin: 0 0 6px 18px !important;   /* было 10 */
  padding: 0 !important;
}

.pv-myths .pv-back__text li{
  margin: 0 0 2px 0 !important;     /* было 6 */
  line-height: 20px !important;     /* строго по Figma */
}

.pv-myths .pv-back__text li:last-child{
  margin-bottom: 0 !important;
}

/* ===== NAV + DOTS (final) ===== */
.pv-myths .pv-nav{
  display:flex !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-top:10px !important;
}

.pv-myths .pv-nav__btn{
  width:36px !important;
  height:36px !important;
  border-radius:999px !important;
  border:1px solid #001965 !important;
  background:#fff !important;
  cursor:pointer !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* ===== Arrow (pure CSS, line + head) ===== */
.pv-myths .pv-nav__btn{
  width:36px !important;
  height:36px !important;
  border-radius:999px !important;
  border:1px solid #001965 !important;
  background:#fff !important;
  cursor:pointer !important;
  position:relative !important;
}

/* линия */
.pv-myths .pv-nav__btn::before{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:16px !important;          /* было 14 */
  height:2px !important;
  background:#001965 !important;
  transform:translate(-50%,-50%) !important;
}

/* наконечник */
.pv-myths .pv-nav__btn::after{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  width:7px !important;
  height:7px !important;
  border-top:2px solid #001965 !important;
  border-right:2px solid #001965 !important;
  transform:translateY(-50%) rotate(45deg) !important;
}

/* ← ставим наконечник прямо на конец линии */
.pv-myths .pv-nav__prev::after{
  left:20px !important;
  transform:translateY(-50%) rotate(-135deg) !important;
}

/* → */
.pv-myths .pv-nav__next::after{
  right:20px !important;
  transform:translateY(-50%) rotate(45deg) !important;
}

/* Dots centered under slider */
.pv-myths .pv-pagination{
  margin-top:20px !important;
  text-align:center !important;
}

.pv-myths .swiper-pagination{
  position:relative !important;
  bottom:auto !important;
  text-align:center !important;
}

.pv-myths .swiper-pagination-bullet{
  width:8px !important;
  height:8px !important;
  background:#001965 !important;
  opacity:0.3 !important;
  margin:0 4px !important;
}

.pv-myths .swiper-pagination-bullet-active{
  opacity:1 !important;
}

/* Mobile Figma: 345x564 */
@media (max-width: 767px){
  .pv-myths{
    --pv-card-w: 345px;
    --pv-card-h: 564px;
  }
}

/* Desktop tightening */
@media (min-width: 768px){

  .pv-myths .pv-back__text p{
    margin: 0 0 5px 0 !important;
  }

  .pv-myths .pv-back__text li{
    margin: 0 0 2px 0 !important;
    line-height: 18px !important;
  }

}

/* Kill external ad injections inside myths slider */
.pv-myths .pv-body .advads,
.pv-myths .pv-body [class*="advads"],
.pv-myths .pv-body [id^="prova-"],
.pv-myths .pv-body .prova-content,
.pv-myths .pv-body .prova-highlight-wrapper,
.pv-myths .pv-body .prova-target{
  display:none !important;
}

/* === NAV ARROWS === */
.pv-myths .pv-nav__btn{
  border:1px solid #001965;
  color:#001965;
}

.pv-myths .pv-nav__btn::after{
  color:#001965 !important;
  font-weight:700;
}


/* === PAGINATION DOTS === */
.pv-myths .pv-pagination{
  position:relative;
  margin-top:20px;
  text-align:center;
}

.pv-myths .swiper-pagination{
  position:relative !important;
  bottom:auto !important;
  text-align:center;
}

.pv-myths .swiper-pagination-bullet{
  width:8px;
  height:8px;
  background:#001965;
  opacity:0.3;
  margin:0 4px !important;
}

.pv-myths .swiper-pagination-bullet-active{
  opacity:1;
  background:#001965;
}