img.flechas-zoom {
   width: 30px;
	filter: brightness(0) saturate(100%) invert(86%) sepia(21%) saturate(6304%) hue-rotate(188deg) brightness(109%) contrast(104%);
}
a.pasafoto.fizq img.flechas-zoom{
    transform: rotate(180deg);
}
a.pasafoto.fizq.disabled, a.pasafoto.fder.disabled {
    opacity: 0.3;
}
.product-details-page {
  background-color: #f5f5f5;
  margin-inline: var(--main-padding);
  margin-bottom: 2rem;
  padding: var(--main-padding);
  background-color: var(--color-neutral-100);
  border-radius: 0.5rem;
}

.product-details-content-container {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  max-width: 80rem;
  margin-inline: auto;
}
.product__container span.disponible {
    color: green;
    font-size: 1.2rem;
}
body.productos span.no-visible {
    margin: 0px;
    display: block;
    justify-content: center;
    margin-left: 79%;
    margin-top: -102px;
	  width: max-content;
    height: 35px;
	  font-size: 25px !important;    
}
.product-details {
  /* padding: 1rem 4rem; */

  .page__header {
    margin-bottom: 1.5rem;
  }

  .product__container {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    /* max-width: rem; */
  }

  .product__images-container {
    display: grid;
    grid-template-columns: repeat(5, 8rem);
    grid-template-rows: repeat(3, 8rem);
    gap: 0.5rem;
  }

  .product__gallery-image-container {
    width: 100%;
    height: 100%;
    grid-column-start: 1;
    grid-column-end: 2;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--color-neutral-50);
    cursor: pointer;
    overflow: hidden;
    &:hover > img {
      transform: scale(1.1);
    }
  }

  .product__gallery-image-container:first-child {
    grid-row-start: 1;
    grid-row-end: 2;
  }

  .product__gallery-image-container:nth-child(2) {
    grid-row-start: 2;
    grid-row-end: 3;
  }

  .product__gallery-image-container:nth-child(3) {
    grid-row-start: 3;
    grid-row-end: 4;
  }

  .product__gallery-selected-image-container {
    position: relative;
    grid-column-start: 2;
    grid-column-end: 10;
    grid-row-start: 1;
    grid-row-end: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--color-neutral-50);

    overflow: hidden; /* ¡Muy importante! Oculta las partes de la imagen de fondo que se salen del contenedor */
    cursor: zoom-in; /* Cambia el cursor para indicar que se puede hacer zoom */    
  }

  .product__gallery-selected-image-container.zoomed img {
    opacity: 0; /* Ocultamos la imagen original */
}
  .product__gallery-selected-image-container--only {
    grid-column-start: 1;
  }

  .product__gallery-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease-in-out;
  }

  .product__gallery-selected-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 1;

    transition: opacity 0.2s ease; /* Transición suave para ocultar la imagen */    
  }

  .product__gallery-selected-image-header {
    position: absolute;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    top: 0.75rem;
    padding-inline: 0.75rem;
  }

  .product__gallery-selected-image-header-brand {
    width: 4rem;
    object-fit: contain;
  }

  .product__gallery-selected-image-header-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  .product__gallery-selected-image-header-button {
    transition: transform 0.2s ease-in-out;
    &:hover {
      cursor: pointer;
      transform: scale(1.1);
      opacity: 75%;
    }
    & > .icon {
      background-color: var(--color-primary-500);
      width: 1.75rem;
      height: 2rem;
    }
  }

  .product__info-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-grow: 1;
    gap: 1rem;
    resize: horizontal;
    container-type: inline-size;
    /* height: 100%; */
    /* max-width: 40rem; */
    gap: 1rem;
  }
  .product__chip {
    width: fit-content;
    padding-block: 1rem;
    padding-inline: 1rem;
    margin-bottom: 1.25rem;
  }

  .product__name {
    font-weight: 500;
    font-size: 1.5rem;
    max-width: 35rem;
    margin-block: 0;
    color: var(--color-primary-500);
    transition: color 0.1s linear;
    &:hover {
      cursor: pointer;
      color: var(--color-primary-200);
    }
  }

  .product__details-container {
    gap: 0.5rem;
  }
  .product__details-data {
    font-size: 1.25rem;
  }

  .product__stock-info-stock {
    font-size: 1.25rem;
  }

  .product__stock-info-warn {
    & > .icon {    
      width: 1.25rem;
      height: 1.25rem;
    }
  }
  .product__stock-info-stock-send-warn {
    font-size: 1.2rem;
  }


  .product__price {
    font-size: 1.75rem;
  }

  .product__price-old {
    font-size: 1.25rem;
  }

  .product__price-discount-qty {
    font-size: 1rem;
  }

  .product__price-and-buttons-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
  }

  .product__buttons-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .product__qty-buttons {
    height: 2.25rem;
    width: 8rem;
  }
  .cart-button__container {
    height: 2.25rem;
    width: 8rem;
  }

  .product__agent-price-container {
    font-size: 1rem;
    align-items: flex-end;
    gap: 0.5rem;
  }

  .product__agent-price-uom {
    font-weight: 400;
    font-size: 1.25rem;
    /* white-space: nowrap; */
  }

  .product__agent-price {
    font-weight: 700;
    font-size: 1.75rem;
  }

  .product__agent-price-discounts-item {
    font-weight: 400;
    font-size: 1.25rem;
    /* white-space: nowrap; */
  }

  .product__agent-price-discounts {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75em;
  }

  .product__agent-price-data {
    font-weight: 700;
  }
}
.product-details__title {
  margin-block: 0;
  margin-bottom: 1rem;
  font-weight: 500;
  font-size: 2rem;
  color: var(--color-primary-500);
}

.product-features-list {
  margin-block: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1rem;
  color: var(--color-primary-500);
}

.product-features-list-item:first-child{
  display: none;
}

.product-features__text {
  color: var(--color-primary-500);
}

iframe {
  width: 100%;
  max-width: 60rem;
  aspect-ratio: 16 / 9;
}

iframe.video-youtube {
    max-height: 600px;
}
.product-downloads-container {
  display: flex;
  gap: 1rem;
}

.product-downloads__button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-primary-400);
  & > .icon {
    width: 1rem;
    height: 1rem;
    /* background-color: var(--color-primary-500); */
  }
}

@media screen and (max-width: 950px) {
  .product-details {
    .product__images-container {
      grid-template-columns: repeat(4, 6.5rem);
      grid-template-rows: repeat(3, 6.5rem);
    }

    .product__chip {
      font-size: 0.75rem;
      padding-block: 0.875rem;
    }
    .product__name {
      font-size: 1.25rem;
      max-width: 25rem;
    }

    .product__details-data,
    .product__stock-info-stock {
      font-size: 1rem;
    }

    .product__stock-info-warn {
      & > .icon {    
        width: 1rem;
        height: 1rem;
      }
    }

    .product__stock-info-stock-send-warn {
      font-size: 1rem;
    }

    .product__price {
      font-size: 1.5rem;
    }

    .product__price-old {
      font-size: 1rem;
    }

    .product__price-discount-qty {
      font-size: 0.875rem;
    }

    .product__agent-price-uom {
      font-size: 1rem;
    }

    .product__agent-price {
      font-size: 1.5rem;
    }

    .product__agent-price-discounts-item {
      font-size: 1rem;
    }
  }
}

@media screen and (max-width: 780px) {
  .product-details {
    .product__images-container {
      grid-template-columns: repeat(4, 6rem);
      grid-template-rows: repeat(3, 6rem);
    }
    .product__name {
      font-size: 1.25rem;
      max-width: 25rem;
    }

    .product__details-data,
    .product__stock-info-stock {
      font-size: 0.875rem;
    }

    .product__price-and-buttons-container {
      flex-direction: column-reverse;
      gap: 0.25rem;
    }

    .product__stock-info-warn {
      & > .icon {    
        width: 0.875rem;
        height: 0.875rem;
      }
    }

    .product__stock-info-stock-send-warn {
      font-size: 0.875rem;
    }

    .product__buttons-container {
      flex-direction: row;
      width: 100%;
      height: 3rem;
    }

    .product__qty-buttons {
      flex-grow: 1;
      height: 100%;
    }
    .cart-button__container {
      flex-grow: 1;
      height: 100%;
    }

    .product__price-container {
      flex-direction: row-reverse;
      justify-content: space-between;
      width: 100%;
    }
    .product__agent-price-uom {
      font-size: 0.875rem;
    }

    .product__agent-price {
      font-size: 1.25rem;
    }

    .product__agent-price-discounts-item {
      font-size: 0.875rem;
    }

    .product__agent-price-container {
      flex-direction: row-reverse;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%;
      gap: 0.25rem;
    }

    .product__agent-price-discounts {
      gap: 0.25em;
    }
  }
}

@media screen and (max-width: 710px) {
.product-details-content-container{
    gap: 1.5rem;
}
  .product-details {
    .product__container {
      flex-direction: column;
    }
    .product__info-container {
      gap: 2rem;
    }

    .product__images-container {
      grid-template-columns: repeat(3, minmax(3.5rem, 1fr));
      grid-template-rows: repeat(3, minmax(3.5rem, 1fr));
    }

    .product__gallery-image-container {
      aspect-ratio: 1;
    }

    .product__gallery-image-container:first-child {
      grid-row-start: 4;
      grid-row-end: 5;
      grid-column-start: 1;
      grid-column-end: 2;
    }

    .product__gallery-image-container:nth-child(2) {
      grid-row-start: 4;
      grid-row-end: 5;
      grid-column-start: 2;
      grid-column-end: 3;
    }

    .product__gallery-image-container:nth-child(3) {
      grid-row-start: 4;
      grid-row-end: 5;
      grid-column-start: 3;
      grid-column-end: 4;
    }

    .product__gallery-selected-image-container {
      grid-column-start: 1;
      grid-column-end: 5;
      grid-row-start: 1;
      grid-row-end: 4;
    }

    .product__name {
      font-size: 1.5rem;
      max-width: 35rem;
    }

    .product__details-container {
      max-width: 30rem;
    }
    .product__details-data,
    .product__stock-info-stock {
      font-size: 1rem;
    }

    .product__stock-info-warn {
      & > .icon {    
        width: 1rem;
        height: 1rem;
      }
    }

    .product__stock-info-stock-send-warn {
      font-size: 1rem;
    }

    .product__price-and-buttons-container {
      flex-direction: row;
      gap: 0.5rem;
    }

    .product__price-container {
      flex-direction: column;
    }

    .product__qty-buttons {
      flex-grow: 1;
      /* height: 15rem; */
    }
    .cart-button__container {
      flex-grow: 1;
      /* height: 5rem; */
    }

    .product__agent-price-uom {
      font-size: 1rem;
    }

    .product__agent-price {
      font-size: 1.75rem;
    }

    .product__agent-price-discounts-item {
      font-size: 1rem;
    }

    .product__agent-price-container {
      flex-direction: column;
      align-items: flex-end;
      width: 100%;
      gap: 0.25rem;
    }

    .product__agent-price-discounts {
      gap: 0.25em;
    }
  }
}

@media screen and (max-width: 480px) {
  .product-details {
    .product__price-and-buttons-container {
      flex-direction: column-reverse;
      gap: 0.25rem;
    }

    .product__price-container {
      flex-direction: row;
    	justify-content: flex-end; 
            gap: 10px;    	     
    }
    .product__agent-price-container {
      flex-direction: row-reverse;
    	justify-content: flex-start;      
            gap: 10px;    	
    }

    .product__price {
      font-size: 21px;
    }

    .product__price-old {
      font-size: 1.3rem;
    }

    .product__price-discount-qty {
      font-size: 1.3rem;
    }
   
  }
.product__gallery-selected-image-header-button.lupa {
	display:none;
}         
	iframe.video-youtube {
		 max-height: 300px;
	}   
}