/* =========================================================
   Alvport Theme 2.3.1 — Estabilidad de tarjetas
   Evita recortes de contenido y glitches al desplazar.
   ========================================================= */

/*
 * The outer card is no longer the clipping boundary. Images still clip
 * inside their own media region, while text/body can grow naturally.
 */
.alv-product-card,
.alv-similar-card {
  position: relative;
  overflow: visible !important;
  contain: none !important;
}

.alv-product-card__media {
  overflow: hidden !important;
  border-radius: 16px 16px 0 0;
}

.alv-product-card__body {
  min-width: 0;
  overflow: visible !important;
  border-radius: 0 0 16px 16px;
  background: #fff;
}

/* Product names must never be cut just to keep a rigid visual height. */
.alv-product-card__title {
  display: block !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
}

/* Keep actions at the bottom without forcing the text area to clip. */
.alv-product-card__body {
  grid-template-rows: auto auto auto minmax(0,1fr) auto !important;
}

.alv-similar-card__media {
  overflow: hidden !important;
  border-radius: 12px 12px 0 0;
}

.alv-similar-card__slide {
  overflow: visible !important;
}

.alv-similar-card__title {
  min-height: 0 !important;
  overflow: visible !important;
  background: #fff;
  border-radius: 0 0 12px 12px;
}

/*
 * Touch browsers can keep :hover active while scrolling. Avoid shifting
 * whole cards in that environment because the compositor may clip a layer
 * against the previous bounds while the page is moving.
 */
@media (hover: none), (pointer: coarse) {
  .alv-product-card,
  .alv-product-card:hover,
  .alv-product-card:focus-within,
  .alv-similar-card,
  .alv-similar-card:hover,
  .alv-similar-card:focus-within,
  .alv-product-learning-card,
  .alv-product-learning-card:hover,
  .alv-product-learning-card:focus-visible {
    transform: none !important;
  }

  .alv-product-card,
  .alv-similar-card {
    will-change: auto !important;
  }
}

/*
 * On phones/tablets the scroll-reveal animation added little value and could
 * leave whole sections semi-transparent while a fast touch scroll passed
 * through them. Mobile content now paints immediately and remains stable.
 */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .alv-home.has-scroll-reveal .alv-home-reveal-target,
  .alv-home.has-scroll-reveal .alv-home-reveal-target:not(.is-visible),
  .alv-home.has-scroll-reveal .alv-home-reveal-target.is-visible,
  .alv-home.has-scroll-reveal .alv-home-reveal-target .alv-home-section-heading,
  .alv-home.has-scroll-reveal .alv-home-reveal-target .alv-home-category-copy,
  .alv-home.has-scroll-reveal .alv-home-reveal-target .alv-home-advice-copy,
  .alv-home.has-scroll-reveal .alv-home-reveal-target .alv-home-map-heading {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

@media (max-width: 620px) {
  .alv-product-card {
    grid-template-rows: 190px auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .alv-product-card__media {
    height: 190px !important;
    min-height: 190px !important;
    border-radius: 16px 16px 0 0;
  }

  .alv-product-card__body {
    grid-template-rows: auto auto auto auto auto !important;
    height: auto !important;
  }

  .alv-similar-card {
    height: auto !important;
    min-height: 0 !important;
  }

  .alv-similar-card__media {
    height: 220px !important;
  }

  .alv-similar-card__title {
    padding: 15px 16px 18px !important;
    font-size: .96rem !important;
    line-height: 1.35 !important;
  }
}