/* ==========================================================================
   Header
   ========================================================================== */
@media (min-width: 1200px) {
  .main-header .navbar-nav {
    flex-wrap: nowrap !important;
  }
}



/* ==========================================================================
   PAGINA HOME
   ========================================================================== */
/* Aquí se incluyen los estilos específicos para la página de inicio y sus includes
   (Categorias, Conocenos, newsletter etc.)
   -------------------------------------------------------------------------- */

/*Slider de categorias */
.card.categorias .card-img {
    object-fit: contain;
    width: 100%;
    height: 350px;
    background-color: #EAEAEA;
    /* Gris Para que el contains haga que la imagen no se corte y se el texto aun asi con fondo */
}


@media (max-width: 1480px) and (min-width: 768px) {
    .card.categorias .card-title {
        font-size: 1.3rem !important;
    }
}




/*Iconos  de categorias, debajo del lanzamiento de catalogo*/

.icono-catalogo {
    max-width: 100%;
    height: auto;
    min-width: 80px;
    min-height: 80px;
    object-fit: contain;
}



/* BUSCADOR DE LA HOME */


.buscador-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 12px;
    padding: 24px 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

#contenedor-mobiliario.buscador-box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

@media (max-width: 991.98px) {
    #contenedor-mobiliario.buscador-box {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #contenedor-mobiliario.buscador-box {
        flex-direction: column;
        align-items: stretch;
    }

    #contenedor-mobiliario .separator {
        display: none;
    }
}

/* --- INPUTS --- */




/* ==========================================================================
   Detalle producto
   ========================================================================== */
/* Aquí se incluyen los estilos específicos para la página de detalleproducto.php
   -------------------------------------------------------------------------- */

/* Sin este bloque el menu de ambientes informacion y comentarios revienta */
.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}





/* Aplica solo a la sección social del detalle de producto */
.bloque-social .col-sm-3 {
  margin-bottom: 0.5rem;
  white-space: nowrap;
}

@media (max-width: 992px) {
  .bloque-social .col-sm-3,
  .bloque-social .col-sm-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .bloque-social ul.list-inline {
    margin-left: 0.5rem;
    justify-content: flex-start !important; /* Fuerza alineación izquierda */
  }
}




/* Íconos más grandes pero alineados a la izquierda en móvil */
/* Íconos más grandes pero alineados a la izquierda en móvil */
@media (max-width: 992px) {
  .bloque-social ul.list-inline {
    gap: 1rem;
    justify-content: flex-start !important;
  }

  .bloque-social ul.list-inline a i {
    font-size: 22px !important;
  }
}




    /* ✅ En pantallas pequeñas, cuando el tercero baje, que quede centrado */
    @media (max-width: 380px) {
      .bloque-botones-producto {
        width: 230px;
        /* 110 + 110 + 6px de gap */
        margin-left: 0;
        justify-content: flex-start;
      }

      .boton-tercero {
        margin-left: auto;
        margin-right: auto;
      }
    }

    @media (min-width: 768px) and (max-width: 991px) {
      .bloque-botones-producto {
        width: 230px;
        /* 110 + 110 + gap */
        justify-content: flex-start;
        margin: 0 auto;
      }

      .boton-tercero {
        margin-left: auto;
        margin-right: auto;
      }
    }







/*En catalogo-categorias, categorias-silla y categoria-mesa con tocar bootstrap ha sido suficiente*/




/* COMPARADOR */
.card.product .card-body {
  min-height: 110px;
}

.min-h-material {
  min-height: 125px; /* Igualar altura entre tarjetas */
}

@media (max-width: 575.98px) {
  .cnt_measures {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


@media (min-width: 992px) and (max-width: 1199.98px) {
  .altura-fija-card {
    min-height: 240px; /* Ajusta si lo ves justo */
  }
}

.card.recomendacion {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card.recomendacion .card-body {
  flex-grow: 1;
}




/* CONTACTO*/



/* CARRITO */

/* Responsivo: ancho del sidebar */
@media (max-width: 576px) {
  .canvas-sidebar {
    max-width: 100vw !important;
    width: 100% !important;
  }

  .cart-item {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .cart-item .price {
    margin-left: 0 !important;
    margin-top: 0.5rem;
    display: block;
  }
}

@media (min-width: 577px) {
  .cart-item .price {
    margin-left: 1.5rem;
    white-space: nowrap;
  }

  .cart-item .input-group {
    width: auto;
    min-width: 110px;
  }
}

/* Alineación botones +/- */
.input-group .down,
.input-group .up {
  top: 50%;
  transform: translateY(-50%);
}

.input-group .up {
  right: 6px;
}

.input-group .down {
  left: 0;
}





/*CONTRACT*/








/*FILTRO*/
@media (max-width: 575.98px) {
  .filter-canvas {
    width: 320px;
  }
}



/* Favoritos */
    @media (max-width: 575.98px) {
  .btn-ver-producto {
    font-size: 12px !important;
    padding: 0.4rem 0.8rem;
  }
}




/* RECOMENDACIONES */
/* md - <992px */
@media (max-width: 991.98px) {
  .ribbon {
    width: 65%;
    font-size: 10px;
  }
}

/* sm - <768px */
@media (max-width: 767.98px) {
  .ribbon {
    width: 75%;
    font-size: 9.5px;
  }
}

/* xs - <576px */
@media (max-width: 575.98px) {
  .ribbon {
    width: 80%;
    font-size: 9px;
  }

/*ICOS CATEGORIES */
.container-medium {
  max-width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: auto;
  margin-right: auto;
}
}

@media (min-width: 768px) {
  .container-medium {
    max-width: 1340px; /* O ajústalo a 1240px, 1320px, etc. */
  }
}

/* ICOS CATEGORIES */
/* Contenedor personalizado */
.categorias-container {
  max-width: 1250px;
  margin: 0 auto;
  width: 100%;
}

/* Espaciado en las cajas del slider */
.categorias-slider .categorias-box {
  margin-bottom: 1.5rem; /* equivalente a mb-4 */
}

@media (min-width: 768px) {
  .categorias-slider .categorias-box {
    padding: 0 2rem;   /* más separación en pantallas medianas */
    margin-bottom: 2rem;
  }
}

@media (min-width: 1200px) {
  .categorias-slider .categorias-box {
    padding: 0 5rem;   /* más separación en pantallas grandes */
  }
}