/* =========================================================
   Alvport Theme 2.3.4
   Navigation states + proportional product media + touch swipe
   ========================================================= */

/* Menu trigger wording: this is navigation, not an exploration module. */
@media (max-width: 900px) {
  .alv-primary-nav .wp-block-navigation__responsive-container-open::after {
    content: "Menú" !important;
    text-transform: none !important;
    letter-spacing: .04em !important;
  }

  /* Descriptions were intentionally removed from each item. */
  .alv-mobile-menu-copy small {
    display: none !important;
  }

  .alv-mobile-menu-copy {
    gap: 0 !important;
  }

  .alv-primary-nav .wp-block-navigation-item__content {
    min-height: 68px !important;
  }

  /*
   * Cotízanos must not look selected merely because it is the fifth item.
   * First reset the old forced nth-child state.
   */
  .alv-primary-nav .wp-block-navigation-item:nth-child(5) > .wp-block-navigation-item__content {
    border-color: #dce6df !important;
    background: linear-gradient(145deg, #fff 0%, #fbfdfb 100%) !important;
    color: #162b4c !important;
    box-shadow:
      0 6px 18px rgba(22,43,76,.045),
      inset 0 1px 0 rgba(255,255,255,.9) !important;
  }

  .alv-primary-nav .wp-block-navigation-item:nth-child(5) .alv-mobile-menu-icon {
    background: #eef8ef !important;
    color: #008200 !important;
  }

  .alv-primary-nav .wp-block-navigation-item:nth-child(5) .alv-mobile-menu-arrow {
    color: #91a09a !important;
  }

  /* Only the actual WordPress current item is allowed to be selected. */
  .alv-primary-nav .current-menu-item > .wp-block-navigation-item__content,
  .alv-primary-nav .wp-block-navigation-item__content[aria-current="page"] {
    border-color: #008200 !important;
    background: linear-gradient(135deg, #008200, #08740b) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(0,130,0,.15) !important;
  }

  .alv-primary-nav .current-menu-item .alv-mobile-menu-icon,
  .alv-primary-nav .wp-block-navigation-item__content[aria-current="page"] .alv-mobile-menu-icon {
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
  }

  .alv-primary-nav .current-menu-item .alv-mobile-menu-arrow,
  .alv-primary-nav .wp-block-navigation-item__content[aria-current="page"] .alv-mobile-menu-arrow {
    color: rgba(255,255,255,.82) !important;
  }
}

/* ---------------------------------------------------------
   Product media must contain the whole source asset.
   --------------------------------------------------------- */
.alv-product-card--gallery .alv-product-card__image,
.alv-home-equip .alv-product-card__image,
.alv-home-product-card__image,
.alv-similar-card__image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* Similar products: retain enough canvas without clipping the object. */
body.single-product .alv-similar-card__slide {
  overflow: hidden !important;
  box-sizing: border-box !important;
}

@media (min-width: 901px) {
  body.single-product .alv-similar-card__media {
    height: 220px !important;
  }

  body.single-product .alv-similar-card__slide {
    inset: 12px !important;
  }
}

/* ---------------------------------------------------------
   Touch devices: native horizontal swipe instead of hover.
   Each gallery becomes a scroll-snap carousel.
   --------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .alv-product-card--gallery .alv-product-card__slides,
  .alv-home-equip-card__slides,
  .alv-home-product-card__slides,
  .alv-similar-card__slides {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: auto;
  }

  .alv-product-card--gallery .alv-product-card__slides::-webkit-scrollbar,
  .alv-home-equip-card__slides::-webkit-scrollbar,
  .alv-home-product-card__slides::-webkit-scrollbar,
  .alv-similar-card__slides::-webkit-scrollbar {
    display: none;
  }

  .alv-product-card--gallery .alv-product-card__slide,
  .alv-home-equip-card__slide,
  .alv-home-product-card__slide,
  .alv-similar-card__slide {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    pointer-events: none !important;
  }

  .alv-home-equip .alv-home-equip-card__slide {
    padding: 12px !important;
  }

  .alv-product-card--gallery .alv-product-card__image,
  .alv-home-equip .alv-product-card__image,
  .alv-home-product-card__image,
  .alv-similar-card__image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  /* Show dots as swipe affordance on touch. */
  .alv-product-card__gallery-dots,
  .alv-home-equip-card__dots,
  .alv-home-product-card__dots,
  .alv-similar-card__gallery-hint {
    display: inline-flex !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  /* Enough room for tall objects while still keeping cards compact. */
  .alv-product-card__media,
  .alv-home-product-card__media,
  body.single-product .alv-similar-card__media {
    height: clamp(205px, 56vw, 235px) !important;
  }

  .alv-home-equip .alv-product-card__media {
    height: clamp(205px, 56vw, 235px) !important;
    padding: 0 !important;
  }
}