.zoom {
  transition: transform 0.5s; 
}

.zoom:hover {
  transform: scale(1.13); 
}

.zoom-container {
    overflow: hidden;
}

.zoom-container img {
    transition: transform 0.3s ease;
}

.zoom-container:hover img {
    transform: scale(1.1);
}


/* tamaño logo mobile*/
@media (max-width: 767px) {
    .navbar-brand img {
        width: 150px;
        margin-left: 10px; 
    }
}

/* Color verde de WhatsApp #25D366 , siguiendo la estructura de cartzilla template/css/theme.css */
/* .text-color-whatsapp { */
.text-color-whatsapp {
    color: #25D366;
}

.btn-share.btn-whatsapp {
    background-color: #E9FAF9;
    color: #25D366;
    font-size: 14px;
    /*padding: 4px 5px; 
    border-radius: 4px; 
    text-decoration: none; */
    
}

/* .text-color-whatsapp:hover { */
.btn-share.btn-whatsapp:hover{
    background-color: #25D366; 
    color: #FFF;
}
/*
.btn-whatsapp {
    display: inline-block;
    width: auto; 
}*/

.text-justify {
    text-align: justify;
}

/* Agrega un símbolo al final del select */
.select2-container .select2-selection::after {
    content: "▼"; /* Código Unicode para la flecha hacia abajo */
    font-size: 10px; /* Tamaño de fuente ajustable */
    position: absolute;
    top: 50%;
    right: 10px; /* Ajusta la posición según sea necesario */
    transform: translateY(-50%);
    pointer-events: none; /* Evita que el símbolo sea interactivo */
}

/* Estilo para la sombra al pasar el ratón */
.image-with-shadow:hover {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease;
}

.px-4 {
  padding-right: 0.3rem !important;
  padding-left: 0.3rem !important;
}

/* Modal */

.modal-body img {
  max-width: 100%; 
  max-height: 100%
  height: auto; 
}

.modal-dialog {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.modal-content {
  background-color: transparent; 
  box-shadow: none; 
  border: none;
}

.btn-close {
  position: absolute;
  top: 1.7rem;
  right: 1.7rem;
}

/* Código usado como prueba de implementación de zoom
.drift-zoom-pane.drift-inline {
  position: absolute;
  width: 0px;
  height: 0px;
  border-radius: 0px;
  box-shadow: none;
}

.drift-zoom-pane {
  overflow: hidden;
  width: 35%;
  height: 35%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  position: absolute;
}

@media only screen and (max-width: 767px) and (max-height: 767px) {
  .drift-zoom-pane.drift-inline {
    display: none;
  }
}
*/
/* Ícono flotante de WhatsApp */

.whatsapp-float {
  position: fixed;
  width: 50px;
  height: 50px;
  line-height: 50px;  
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
  z-index: 100;
  transition: all 300ms ease; 

}

.whatsapp-float:hover{
  background: #25d366;
  transform: scale(1.2);
  transition: 0.3s;
}

.icon-wsp {
  font-size: 30px; 
  width: 100%;
  height: 100%; 
  display: flex;
  align-items: center; 
  justify-content: center; 
}
/** Media queries*/

@media only screen and (min-width: 768px) {
  .img_height13{
    height: 13rem;
  }

}

@media only screen and (max-width: 768px) {
  .desktop-only {
    display: none;
  }

  .zoom:hover {
    transform: none;
   }
}

/* icon copy coupon */

.reduce-padding {
  padding-top: 0.5rem; 
  padding-bottom: 0.5rem; 
}

.icon-copy {
  width: 2rem; 
  height: 2rem;
  line-height: 2; 
  vertical-align: middle;
}


@media screen and (min-width: 340px) and (max-width: 399px) {
  /* Ajuste de tamaño para dispositivos con ancho de pantalla entre 340px y 399px */
  .icon-copy {
    width: 4rem;
    height: 4rem;
  }
}

.table-responsive {
  margin-left: -10px; 
  margin-right: -10px; 
}

.table {
  margin-left: 0;
  margin-right: 0; 
}

/*justificado de textos de alerts o mensajes*/

.justify_text {
  text-align: justify !important;
}


/*Centrado para imagen de producto*/

.img_center {
    text-align: center;
    background-color: #F3F5F9;/* #FAF0E6; Color de fondo suave */
    display: inline-block; /* Asegura que el contenedor se ajuste al contenido */
}


/* Fuente para texto 'Ordenar por:' en Tienda*/
.small-label {
      font-size: 0.9rem;
    }