/* =========================================================
   Alvport Theme 2.3.5
   Responsive card geometry hotfix

   IMPORTANT:
   - These rules are responsive-only.
   - Desktop Productos Similares is intentionally untouched.
   ========================================================= */

@media (max-width: 900px) {

  /* -------------------------------------------------------
     Standard / Inicio product cards
     ------------------------------------------------------- */

  /*
   * Previous responsive layers mixed:
   *   grid-template-rows: 190px auto
   * with media heights of 205–235px.
   * That made the body begin before the media ended.
   *
   * Use one physical vertical flow instead: media, then body.
   */
  .alv-product-card,
  .alv-home-equip .alv-product-card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .alv-product-card__media,
  .alv-home-equip .alv-product-card__media {
    position: relative !important;
    z-index: 1 !important;
    flex: 0 0 clamp(225px, 59vw, 250px) !important;
    width: 100% !important;
    height: clamp(225px, 59vw, 250px) !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(226,232,240,.82) !important;
    background:
      radial-gradient(circle at 50% 45%, rgba(0,130,0,.018), transparent 58%),
      #fff !important;
  }

  .alv-product-card__image-link,
  .alv-home-equip .alv-product-card__image-link {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /*
   * The image itself never establishes card geometry.
   * It is centered inside the media canvas with breathing room.
   */
  .alv-product-card__image,
  .alv-product-card--gallery .alv-product-card__image,
  .alv-home-equip .alv-product-card__image {
    width: auto !important;
    height: auto !important;
    max-width: 84% !important;
    max-height: 80% !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }

  /*
   * Body is always its own block below the media.
   * A solid background guarantees that neither slides nor quick-view can
   * visually bleed into product name / SKU / actions.
   */
  .alv-product-card__body,
  .alv-home-equip .alv-product-card__body {
    position: relative !important;
    z-index: 4 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 17px 18px 19px !important;
    overflow: visible !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  .alv-product-card__brand {
    min-height: 0 !important;
    margin: 0 0 7px !important;
  }

  .alv-product-card__title {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 8px !important;
    overflow: visible !important;
    color: #162b4c !important;
    font-size: 1rem !important;
    font-weight: 820 !important;
    line-height: 1.32 !important;
    white-space: normal !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
  }

  .alv-product-card__title a {
    color: inherit !important;
  }

  .alv-product-card__sku {
    margin: 0 0 8px !important;
  }

  .alv-product-card__actions {
    margin-top: 12px !important;
    padding-top: 0 !important;
  }

  /*
   * Quick view stays entirely inside the image panel instead of sitting
   * against the media/body seam.
   */
  .alv-product-card__quick,
  .alv-home-equip .alv-product-card__quick {
    top: auto !important;
    bottom: 14px !important;
    z-index: 8 !important;
    margin: 0 !important;
  }

  /* -------------------------------------------------------
     Swipe tracks in regular / Inicio cards
     ------------------------------------------------------- */

  .alv-product-card--gallery .alv-product-card__slides,
  .alv-home-equip-card__slides {
    height: 100% !important;
    max-height: 100% !important;
  }

  .alv-product-card--gallery .alv-product-card__slide,
  .alv-home-equip-card__slide {
    height: 100% !important;
    padding: 16px 14px 54px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /*
   * The reserved 54px bottom space keeps the product itself clear from the
   * always-visible quick-view pill.
   */
  .alv-product-card--gallery .alv-product-card__slide .alv-product-card__image,
  .alv-home-equip-card__slide .alv-product-card__image {
    max-width: 84% !important;
    max-height: 100% !important;
  }

  /* -------------------------------------------------------
     Productos Similares — RESPONSIVE ONLY
     Desktop is deliberately left exactly as 2.3.4.
     ------------------------------------------------------- */

  body.single-product .alv-similar-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.single-product .alv-similar-card__media {
    position: relative !important;
    flex: 0 0 clamp(225px, 60vw, 255px) !important;
    width: 100% !important;
    height: clamp(225px, 60vw, 255px) !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  body.single-product .alv-similar-card__slides {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body.single-product .alv-similar-card__slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    padding: 20px 22px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    place-items: center !important;
  }

  /*
   * Responsive similar products get deliberately smaller image bounds.
   * This is what prevents forks, coffee urns, plates, etc. from touching or
   * crossing the card edges while still showing the COMPLETE product.
   */
  body.single-product .alv-similar-card__image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 80% !important;
    max-height: 82% !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }

  body.single-product .alv-similar-card__title {
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 15px 17px 18px !important;
    overflow: visible !important;
    border-top: 1px solid #eef1f3 !important;
    background: #fff !important;
    color: #162b4c !important;
    font-size: .96rem !important;
    line-height: 1.34 !important;
    box-sizing: border-box !important;
  }

  body.single-product .alv-similar-card__title a {
    color: inherit !important;
  }
}

/*
 * Extra-small phones: slightly reduce the media canvas without ever changing
 * its relationship to the text body.
 */
@media (max-width: 390px) {
  .alv-product-card__media,
  .alv-home-equip .alv-product-card__media {
    flex-basis: 220px !important;
    height: 220px !important;
  }

  body.single-product .alv-similar-card__media {
    flex-basis: 230px !important;
    height: 230px !important;
  }
}