/* ==========================================================================
   PureManCare — CSS pagina: Home
   Ogni pagina ha il proprio file in css/pages/
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dots carosello (Impreza us_post_carousel / owl-carousel)
   Match design Figma: inattivo 4x4 tondo #231313 @30%, attivo pill 32x4 @100%
   Funziona sui caroselli us_post_carousel; oppure aggiungi .pmc-dots al blocco.
   -------------------------------------------------------------------------- */

.page-id-14 #page-content {
  background: var(
    --Backgound-Linear,
    linear-gradient(180deg, #fff3dd 0%, #e1cfac 100%)
  );
}
.pmc-dots .owl-dots,
.us_post_carousel .owl-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 12px; /* design: hero content -> dots = 12px */
}

/* reset stile owl di default */
.pmc-dots .owl-dots .owl-dot,
.pmc-dots .owl-dots .owl-dot span,
.us_post_carousel .owl-dots .owl-dot,
.us_post_carousel .owl-dots .owl-dot span {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* dot inattivo: 4x4 tondo, #231313 @ 30% */
.pmc-dots .owl-dots .owl-dot span,
.us_post_carousel .owl-dots .owl-dot span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background-color: rgba(35, 19, 19, 0.3) !important;
  transition: width 0.3s ease, background-color 0.3s ease;
}

/* dot attivo: pill 32x4, #231313 @ 100% */
.pmc-dots .owl-dots .owl-dot.active span,
.us_post_carousel .owl-dots .owl-dot.active span {
  width: 32px;
  background-color: rgba(35, 19, 19, 1) !important;
}

/* :::::::::::::::::::::::::::::::::::::::: */
.pmc--video---home {
  border: 1px solid var(--Card-stroke, #fff);
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.12) 100%
  );

  /* Card shadow */
  box-shadow: 0 8px 20px 0 rgba(182, 160, 120, 0.5);
}