/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 24 2024 | 08:30:02 */
.header-bottom {
    min-height: 60px!important;
}

.nv-single-post-wrap>div:first-child {
    margin-top: 20px!important;
}

/* Slider home*/
.categoria-container {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
}

.categoria-item {
  margin: 10px;
  flex: 0 0 auto;
  width: 190px; /* Ancho fijo para todos los ítems */
  text-align: center;
}

.categoria-item img {
  width: 100%; /* Hace que la imagen ocupe el ancho del contenedor */
  height: auto;
  max-height: 190px;
   border-radius: 8px;/* Altura máxima para las imágenes */
}

/* Disclaimer confiar*/
.info-box {
  background-color: rgb(235 243 248); /* Color de fondo */
  border: 1px solid #ddd; /* Borde */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
  padding: 20px; /* Relleno */
  margin: 20px 0; /* Margen */
  font-family: 'Arial', sans-serif; /* Tipo de letra */
  color: #333; /* Color de texto */
  line-height: 1.6; /* Altura de línea */
  border-radius: 8px; /* Bordes redondeados */
}

/* Estilo para el título que es un párrafo con una clase especial */
.info-box .info-title {
  font-size: 24px; /* Tamaño de fuente más grande para el título */
  font-weight: bold; /* Fuente en negrita */
  color: #000; /* Color de texto para el título */
  margin-top: 0; /* Remueve margen superior */
  margin-bottom: 1em; /* Espaciado después del título */
}

/* Estilos para los párrafos normales dentro del recuadro */
.info-box p {
  margin-bottom: 1em; /* Espaciado después de párrafos */
}

.egg-container .btn-danger {
    color: #fff !important;
}

.nv-single-post-wrap a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
  border-bottom: 1px solid;
}

.nv-single-post-wrap a:link {
  color: #265301;
}

.nv-single-post-wrap a:visited {
  color: #437a16;
}

.nv-single-post-wrap a:focus {
  border-bottom: 1px solid;
  background: #bae498;
}



header .searchform {
  display: block;
}

#buscarzapas {
width:130px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
  background-color: #eceeef;

}

a {
    background-color: transparent;
    text-decoration: none;
    color: #000;
}

a:hover {

    color: #41a845;
}

#breadcrumbs span a {
      color: #2319db;
}

#breadcrumbs span a:hover {
      color: #41a845;
}

.pt-cv-scrollable {
    margin-top: 2px;
    margin-bottom: 10px;
}


/** 
@media only screen and (max-width:800px){
.menu{
display:none
}
}

@media screen and (max-width: 767px) {
.top-bar {
display:none;
}
}

@media handheld, only screen and (max-width: 767px) {
.logos {
display:none;
}


@media only screen and (max-width: 1023px) {
.logos {
display:none;
}
}
**/


.tags-links { display: none; }
.cat-links { display: none; }
 .bdt-navigation-next  { display: none; }
 .bdt-navigation-wrap  { display: none; }

#pg-427-2, #pg-427-3 {
	margin-bottom: 5px!important;
}

#pg-427-1 {
	margin-bottom: 5px!important;
}
#pg-427-4 {
	margin-bottom: 5px!important;
}
#pg-427-0 {
	margin-bottom: 5px!important;
}


.page-header-image, .page-header-image-single {

display: none !important;

}
/* ocultar right moviles */
@media(max-width: 768px) {
    #right-sidebar {
        display: none;
    }
}

/* Categorías y colores */
.entry-meta .cat-links a {
    padding: 3px 5px;
    font-size: 17px;
	background-color: #ea3322;
	border-radius: 5px;  
    color: #FFF	
		
}
/* Etiquetas y colores */  
.entry-meta .tags-links a {
	padding: 3px 5px;
	font-size: 17px;
	background-color: #0000f5;
	border-radius: 5px;  
    color: #FFFF	
}

/* Espacio entre línea de categorías y etiquetas */
.cat-links {
    margin-bottom: 10px;
}

.searchform .search-field {
    color: #46a546;
}
h1.home-title {
    font-size: .85rem;
    color: grey;
    font-weight: 400;
    letter-spacing: .075rem;
    padding: 1rem 0 .5rem;
    text-align: right;
}

.mega-links .column-heading {
   font-size: 18px;
    color: #ffffff;
  
}

.wp-post-author-meta-more-posts {
    display: none;
}

#awpa-website-li {
    display: none;
}

.egg-container .text-muted {
    display: none;
}
.cegg-lineheight15 {
        display: none;
}

.blanco-rojo {
  color: #FFFFFF;
  background-color: red;
}

.post-pagination {
    display: none;
}

/* Aspecto Breadcrumbs */
#breadcrumbs {
	font-size: 16px;
	letter-spacing: 2px;
        padding-left: 10px;
        padding-right: 10px;
}


@media all and (max-width:768px) {
	#breadcrumbs {
	font-size: 16px !important;
        padding-left: 30px;
        }
        
}



.metadatabox {
display:none;
}
  
.byline-left .entry-byline {
display:none;
}



.featured-posts.flexslider {
    display: block !important;
}



.table-responsive {
    min-height: .01%;
    overflow-x: auto;
}

@media screen and (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }
    .table-responsive > .table {
        margin-bottom: 0;
    }
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > th,
    .table-responsive > .table > tfoot > tr > th,
    .table-responsive > .table > thead > tr > td,
    .table-responsive > .table > tbody > tr > td,
    .table-responsive > .table > tfoot > tr > td {
        white-space: nowrap;
    }
}


@media screen and (min-width: 800px) { 
	.mostrarenmobile{
		display: none;
	}
}

.single-post .wp-post-image {
display: none;
}

.neve-mm-description {
    display: none!important;
}

.footer-bottom {
    display: none!important;
}
.nv-thumb-wrap {
  display: flex!important;
  justify-content: center!important;
  align-items: center!important;
}

.boton {
border: 1px solid #2e518b;
padding: 10px;
color: #000000; 
text-decoration: none; 
text-transform: uppercase; 
border-radius: 50px; 
}

.boton:hover  {
border: 1px solid #2e518b;
padding: 10px;
color: #ffffff; 
text-decoration: none; 
text-transform: uppercase; 
border-radius: 50px; 
background-color: black;
}

. nv-meta-list {
  margin-bottom: 5px!important;
}

.nv-single-post-wrap>div:not(:last-child) {
    margin-bottom: var(--spacing,10px)!important; 
}

/* Tablas mejores */
.ranking-cards-container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

.ranking-card {
    font-family: 'Open Sans', sans-serif; /* Ejemplo de fuente de Google Fonts */
    color: #333;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;
}

.ranking-card:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.card-header {
    background: #f8f8f8;
    padding: 16px;
    border-bottom: 1px solid #ddd;
}

.card-header h2 {
    margin: 0;
    font-size: 1.5em; /* Ajusta el tamaño de la fuente según tu preferencia */
}

.card-body {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    align-items: center;
}

.card-info {
    flex-grow: 1;
    margin-right: 10px;
}

.card-reasons {
    flex-grow: 1;
    margin-left: 10px;
}

.button {
    background-color: #007bff;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 4px;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}



/* Estilos para dispositivos más pequeños */
@media (max-width: 768px) {
    .card-body {
        flex-direction: column; /* Cambia la disposición a vertical en dispositivos pequeños */
    }

    .card-info, .card-reasons {
        margin-right: 0; /* Remueve el margen derecho en dispositivos pequeños */
        margin-bottom: 10px; /* Agrega un margen inferior para separar las columnas */
    }
}

.card-actions {
    text-align: right;
}

.button {
    background-color: #007bff;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 4px;
    display: inline-block;
    margin-left: 10px;
}

.card-footer {
    background: #f8f8f8;
    padding: 16px;
    border-top: 1px solid #ddd;
}

.card-footer p {
    margin: 0;
}

.card-footer a {
    color: #007bff;
    text-decoration: none;
}

@media (max-width: 768px) {
    .card-body {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-body img {
        margin-bottom: 16px;
    }

    .card-actions {
        text-align: left;
    }
}



.review-link-container {
    text-align: right;
    margin-top: 10px;
}

.review-completa {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
    text-decoration: underline;
}

.ficha-imagen-container {
    width: 66%; /* 66% del ancho del contenedor padre */
    margin: auto; /* Centrar horizontalmente */
    display: flex; /* Utilizamos flex para centrar la imagen dentro */
    justify-content: center; /* Centra horizontalmente dentro del contenedor flex */
    align-items: center; /* Centra verticalmente en caso de que sea necesario */
}

.ficha-imagen {
    max-width: 100%; /* Hace que la imagen sea receptiva y no exceda su contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

.posicion-etiqueta {
    position: absolute; /* Posición absoluta respecto a su contenedor relativo más cercano */
    top: -10px; /* Posición hacia arriba para que sobresalga de la ficha */
    left: -10px; /* Posición hacia la izquierda para que sobresalga de la ficha */
    background-color: red; /* Fondo rojo, puedes cambiarlo por el color deseado */
    color: white; /* Texto en color blanco */
    padding: 10px; /* Espaciado interno */
    border-radius: 50%; /* Borde redondo */
    width: 30px; /* Ancho de la etiqueta */
    height: 30px; /* Altura de la etiqueta */
    display: flex; /* Uso de flexbox para centrar el contenido */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    font-weight: bold; /* Texto en negrita */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Sombra para darle profundidad */
}

.ranking-ficha {
    position: relative; /* Establece la ficha como contenedor relativo para la etiqueta de posición */
    /* Resto de tus estilos para .ranking-ficha */
}

.star-full:before {
    content: "\2605"; /* Unicode para estrella llena */
    color: #FFD700; /* Color dorado para las estrellas */
}

.star-half:before {
    content: "\2605"; /* Unicode para estrella llena */
    color: #FFD700; /* Color dorado para las estrellas */
    /* Necesitas algo más complejo para mostrar una media estrella.
       Podrías tener una estrella llena con un color de fondo que cubra la mitad,
       o utilizar una imagen para la media estrella. */
}

.star-empty:before {
    content: "\2606"; /* Unicode para estrella vacía */
    color: #FFD700; /* Color dorado para las estrellas */
}




/* Contenedor Principal para las Tarjetas */
.cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Espacio entre las tarjetas */
  justify-content: space-between;
}

/* Estilo de las Tarjetas Home-------------------*/
.cardt-container {
  flex: 0 1 calc(33.333% - 20px); /* Cada tarjeta ocupa un tercio del espacio disponible menos el espacio del gap */
  max-width: 400px; /* O cualquier ancho máximo que prefieras para las tarjetas */
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px; /* Espacio adicional debajo de cada tarjeta si es necesario */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Estilo de las Tarjetas al pasar el mouse */
.cardt-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}


.cardt-link {
  text-decoration: none; /* Elimina el subrayado de los enlaces */
  color: inherit; /* Hereda el color del texto del padre */
  display: block; /* o 'block' dependiendo de tu diseño */
  width: 100%; /* Hace que el enlace llene el contenedor para que sea clicable */
}

.imaget-container {
  height: 200px;
  background-size: cover;
  background-position: center;
}

.cardt-content {
  background: white;
  padding: 20px;
  text-align: center; /* Centra el texto horizontalmente */
}

.cardt-content h2 {
  margin-bottom: 20px; /* Espacio debajo del título */
}

.buttont {
  background-color: #0000FF;
  color: white;
  border: none; /* Elimina el borde del botón */
  padding: 10px 20px;
  border-radius: 20px; /* Bordes redondeados para el botón */
  text-transform: uppercase; /* Texto en mayúsculas para el botón */
  cursor: pointer; /* Cambia el cursor a una mano al pasar sobre el botón */
}

.buttonr {
  background-color: white;
  color: black;
  border:-color: #aaaaaa;
  border-width: 1px;
  border-style: solid;
  padding: 10px 20px;
  border-radius: 20px; /* Bordes redondeados para el botón */
  cursor: pointer; /* Cambia el cursor a una mano al pasar sobre el botón */
  text-decoration: none!important;
}
.buttonr:hover {
  background-color: #45A746;
    color: white;
}

/* Estilos para Móviles */
@media (max-width: 768px) {
  .cards-wrapper {
    flex-direction: column; /* Las tarjetas se apilan verticalmente en móviles */
  }

  .cardt-container {
    flex-basis: 100%; /* Cada tarjeta se expande para ocupar el ancho disponible */
  }
}



  .gallerye {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .gallerye-item {
    display: flex;
    align-items: center; /* Centra el texto verticalmente */
    width: 100%; /* Ajusta a una sola columna en todas las pantallas */
    margin-bottom: 20px; /* Espacio entre filas */
  }
  .gallerye-item img {
    width: 30%; /* Tamaño reducido de la imagen */
    height: auto; /* Mantiene la proporción de la imagen */
  }
  .gallerye-item div {
    flex-grow: 1;
    display: flex;
    justify-content: center; /* Centra el texto horizontalmente */
    align-items: center; /* Centra el texto verticalmente */
    text-align: center; /* Asegura que el texto dentro del div está centrado si es más de una línea */
    padding: 0 20px; /* Espacio alrededor del texto */
  }
  @media (min-width: 768px) {
    .gallerye-item {
      width: 48%; /* Ajusta dos items por fila en pantallas grandes con algo de espacio entre ellos */
    }
  }

/* Tabla Ficha */

.fza-zapatilla-datos-tabla {
    width: 50%; /* Establece el ancho de la tabla al 50% del contenedor */
    max-width: 600px; /* Establece un ancho máximo para la tabla */
    min-width: 300px; /* Establece un ancho mínimo para la tabla */
    margin: 0 auto; /* Centra la tabla horizontalmente */
    border-collapse: collapse;
    border-radius: 10px; /* Esquinas redondeadas para la tabla */
    overflow: hidden; /* Asegura que el contenido no sobresalga de las esquinas redondeadas */
}

.fza-zapatilla-datos-tabla th, 
.fza-zapatilla-datos-tabla td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.fza-zapatilla-datos-tabla th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* Tabla Comparativas */-------------------------------
/* Estilos generales para la tabla */
.fza-comparativa-tabla {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    table-layout: auto;
}

/* Estilos para los encabezados de la tabla */
.fza-comparativa-tabla th {
    vertical-align: middle;
    font-size: 0.8em!important; 
}



.fza-comparativa-tabla th:nth-child(2), 
.fza-comparativa-tabla th:nth-child(3) {
    width: 40%; /* Ancho para la segunda y tercera columna */
}

/* Estilos para las celdas de cada columna */
.fza-comparativa-zapatillas .fza-comparativa-tabla td:nth-child(1) {
    font-weight: bold; 
   font-size: 0.2em!important; 
}

.fza-comparativa-tabla td:nth-child(2), 
.fza-comparativa-tabla td:nth-child(3) {
    text-align: center; /* Texto centrado para la segunda y tercera columna */
}

/* Estilos para las celdas de la tabla */
.fza-comparativa-tabla td {
    border: 1px solid #dee2e6;
  border-radius: 5px;
    vertical-align: middle;
    padding: 5px; /* Ajusta el padding según sea necesario */
}

/* Estilo para los botones Comprar */
.comprar-btn {
    background-color: #ff4500;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    margin: 10px 0;
    border-radius: 5px;
}

/* Estilos para las imágenes de las zapatillas */
.fza-comparativa-tabla img {
    max-width: 100px;
    height: auto;
    display: block;
    margin: 0 auto; /* Centrar imágenes horizontalmente */
}


/* Estilo para el contenedor de la tabla */
#comparador-zapatillas {
    display: flex;
    flex-direction: column; /* Asegúrate de que los elementos se apilen verticalmente */
    align-items: center; /* Centrar los elementos horizontalmente */
}

td, th {
    padding: 10px;
}

/* Estilo para el contenedor de cada zapatilla */
.zapatilla-container {
    text-align: center;
}

/* Ajuste para celdas específicas si es necesario */
.fza-comparativa-tabla .especifico {
    padding: 5px; /* Ajusta el relleno según sea necesario */
}

/* Media query para pantallas menores a 768px */
@media screen and (max-width: 768px) {
    /* Mantener los anchos específicos para cada columna */
    .fza-comparativa-tabla th:nth-child(1),
    .fza-comparativa-tabla td:nth-child(1) {
        width: 0%; /* Mantenemos 20% como solicitado */
    }

    .fza-comparativa-tabla th:nth-child(2), 
    .fza-comparativa-tabla td:nth-child(2),
    .fza-comparativa-tabla th:nth-child(3), 
    .fza-comparativa-tabla td:nth-child(3) {
        width: 40%; /* Mantenemos 40% como solicitado */
    }
    
    /* Podrías querer reducir aún más el padding para pantallas pequeñas */
    .fza-comparativa-tabla td {
        padding: 3px; /* Aún más pequeño para pantallas pequeñas */
    }
}
/* ------------------------------------------------- */


.bg-blue {
       background-color: rgb(235 243 248); 
    }


/* Estilo de las Tarjetas */
.cards-wrapper2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Asegura que el espacio entre las tarjetas se distribuya uniformemente */
  gap: 20px; /* Espacio entre las tarjetas */
}

/* Estilo para las tarjetas individuales en PC */
.cardt-container2 {
  flex: 0 1 calc(33.333% - 20px); /* Ajusta para que tres tarjetas quepan en una fila, restando el gap */
  margin-bottom: 20px; /* Espacio debajo de cada tarjeta */
  background-color: #f7f7f7; /* Fondo gris para las tarjetas */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 350px; 
  border: 1px solid #ddd; /* Borde sutil */
  border-radius: 4px; 
}

.cardt-container2:hover {
  transform: translateY(-5px); /* Eleva la tarjeta al pasar el mouse */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.cardt-link2 {
  text-decoration: none; /* Elimina el subrayado de los enlaces */
  color: inherit; /* Hereda el color del texto del padre */
  display: block; /* Hace que el enlace llene el contenedor para que sea clicable */
}

.imaget-container2 {
  height: 160px;
  background-size: contain; /* Esto asegura que la imagen se ajuste dentro del contenedor */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center;
}

.cardt-content {
  background: white;
  padding: 10px;
  text-align: center; /* Centra el texto horizontalmente */
}

.cardt-content2 h2 {
  margin-bottom: 5px; /* Espacio debajo del título */
}
.cardt-content2 {
  background: white;
  padding: 10px;
  text-align: center; /* Centra el texto horizontalmente */
}

.buttont2 {
  background-color: #CB3234;
  color: white;
  border: none; /* Elimina el borde del botón */
  padding: 8px 20px;
  border-radius: 20px; /* Bordes redondeados para el botón */
  text-transform: uppercase; /* Texto en mayúsculas para el botón */
  cursor: pointer; /* Cambia el cursor a una mano al pasar sobre el botón */
}
.cardt-container2:last-child {
  margin-bottom: 40px; /* Esto puede ser necesario para mantener la consistencia de margen en la última fila */
}

/* Estilos para Móviles */
  @media (max-width: 768px) {
  .cards-wrapper2 {
    justify-content: space-around; /* O space-between para distribuir el espacio */
    gap: 10px; /* Menor espacio entre tarjetas para pantallas más pequeñas */
  }

  .cardt-container2 {
    flex-basis: calc(50% - 10px); /* Dos tarjetas por fila en dispositivos móviles */
    margin-bottom: 10px; /* Menor espacio debajo de cada tarjeta para pantallas más pequeñas */
  }
}

.input-ancho-completo {
  width: 100%; /* Establece el ancho al 100% del contenedor padre */
  box-sizing: border-box; /* Asegura que el padding y border estén incluidos en el ancho total */
}

/* Opcionalmente, puedes querer añadir un poco de estilo adicional para mejorar la apariencia */
.campo-busqueda {
  margin-bottom: 15px; /* Espacio entre campos de búsqueda */
}


/* precios 2------------------------*/

.product-table-header {
    background-color: #0000FF;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 22px;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0; /* Elimina el margen inferior */
}

.product-table-container {
    border: 2px solid #ddd;
background-color: #f7f7f7; /* Un gris claro para el fondo */
    color: #333; /* Un gris oscuro para el texto */
    border-radius: 8px;
    padding: 2px;
    padding-top: 2px; /* Ajusta el relleno superior para acercar el primer título de categoría */
}

.category-title {
    font-weight: bold;
   background-color: #e9ecef; /* Un gris ligeramente más oscuro para los títulos de las categorías */
    color: #0000FF; 
    margin: 2px 0; /* Ajusta el margen para ser solo de 2px */
    text-align: center;
}

.product-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.product-image34 {
   width: 18.75%;
    object-fit: contain;
}

.product-image {
    width: 150px; 

    object-fit: contain; 
}


.disc {
   text-align: center;
  color: #747779;
  font-size: small;
}


.product-model-desktop {
    width: 25%;
   margin-left: 5px;
    text-align: left;
    display: none; /* Hidden by default, shown on desktop */
}

.shop-logo {
    width: 15%;
    margin: 0 10px;
}

.product-prices {
    width: 25%;
    color: #176324;
    font-weight: bold;
    text-align: center;
}

.product-price {
    width: 15%;
    color: darkgreen;
    font-weight: bold;
}

.offer-button-desktop {
    width: 20%;
    margin-left: auto; /* Pushes the button to the right */
    background-color: #9E2E29;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    display: none; /* Hidden by default, shown on desktop */
}



@media (min-width: 768px) {
    .product-model-desktop, .offer-button-desktop {
        display: block; /* Show model on desktop */
    }
}

@media (max-width: 768px) {
    .product-row {
             margin-bottom: 5px; 
    }

    .product-image{
        width: 36%;
       max-width: 120px;
    object-fit: contain; 
        text-align: center;
       margin-bottom: 2px; 
    }
  .shop-logo{
        width: 24%; 
        text-align: center;
    }
   .product-price{
        width: 40%;
        text-align: center;
    }

  .product-prices {
    font-size: large;
    color: darkgreen;
    font-weight: bold;
    text-align: center;
}
   .category-title {
        margin-top: 2px;
        margin-bottom: 2px; 
    }

  
}

/* Comparacion 3------------------------*/
.fza-comparativa-tres {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.fza-comparativa-tres th, .fza-comparativa-tres td {
    border: 1px solid #dee2e6;
    padding: 10px;
    text-align: center;
}

/* Eliminar el borde superior, izquierdo y derecho de las celdas del encabezado */
.fza-comparativa-tres thead th {
    border-top: none;
    border-left: none;
    border-right: none;
}

/* Asegúrate de que el último th no tenga borde a la derecha */
.fza-comparativa-tres thead th:last-child {
    border-right: none;
}



/* Estilos para las columnas con datos de las zapatillas */
.fza-comparativa-tres th:nth-child(2), .fza-comparativa-tres td:nth-child(2),
.fza-comparativa-tres th:nth-child(3), .fza-comparativa-tres td:nth-child(3),
.fza-comparativa-tres th:nth-child(1), .fza-comparativa-tres td:nth-child(1) {
    width: 29%; /* Segunda, tercera y cuarta columnas */
}

/* Estilos para las imágenes */
.fza-comparativa-tres img {
    width: auto; /* Ajusta el ancho automáticamente */
    height: auto; /* Altura fija para las imágenes */
    margin-bottom: 10px; /* Espacio debajo de las imágenes */
}

/* Clase para las etiquetas de los campos */
.campo-etiqueta {
    text-align: left; /* Alinear las etiquetas a la izquierda */
    font-weight: normal; /* Peso normal para las etiquetas */
}

.sin-borde {
    border: none;
}

/* Clase para resaltar la columna del centro */
.columna-central {
    background-color: rgb(235, 243, 248);
}

/* Clase para los botones de URL */
.boton-url a {
    background-color: orange;
    color: white;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block; /* Para que funcione el padding y border-radius */
}

.boton-url a:hover {
    background-color: #cc8400; /* Un tono más oscuro para el hover */
}



/* Buscador ------------------------*/

/* Estilo para el botón de comparar */
#comparar {
  background-color: #007bff; /* Azul */
  color: white; /* Texto blanco */
  padding: 10px 15px; /* Espaciado interno */
  border: none; /* Sin borde */
  border-radius: 5px; /* Bordes redondeados */
  cursor: pointer; /* Cursor en forma de mano */
}

#comparar:hover {
  background-color: #0056b3; /* Azul más oscuro al pasar el ratón */
}

/* Estilos específicos para el campo de búsqueda */
.input-autocomplete2.mi-buscador {
   width: 100%; /* Ajusta al 100% del contenedor padre */
    padding: 10px;
    border: 2px solid #49A740;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Contenedor de sugerencias para el autocompletado */
.sugerencias2 {
  	    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: 0;
  padding-top: 5px;
    position: absolute;
    max-height: 350px;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    overflow-y: auto;
    z-index: 999;
   background: #fff;
}
}

/* Muestra el contenedor de sugerencias solo si tiene contenido */
.sugerencias2.has-content {
  display: block; /* Muestra el contenedor */
  border-color: #ddd; /* Ahora el borde es visible */
}

/* Estilos para los ítems de sugerencia */
.sugerencias2 .sugerencia-item {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}

.sugerencias2 .sugerencia-item img {
  max-width: 50px;
  margin-right: 10px;
}

.sugerencias2 .sugerencia-item .titulo-zapatilla {
  margin-left: 10px;
}buttont

.sugerencias2 .sugerencia-item:hover {
  background-color: #f9f9f9;
}


.junkie-custom-button {
    background-color: #E6943D; /* Fondo rojo vivo */
    color: #ffffff!important;
    padding: 12px 30px!important;
    border: none; /* Sin borde para un look más limpio */
    border-radius: 20px; /* Bordes redondeados para un look moderno */
    font-size: 16px; /* Tamaño de fuente grande para facil lectura */
    text-decoration: none; /* Sin subrayado */
    display: inline-block; /* Para que funcione el padding y los márgenes */
    cursor: pointer; /* Cursor tipo mano al pasar el ratón */
    transition: background-color 0.3s ease; /* Transición suave al cambiar de color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil para un efecto elevado */
    letter-spacing: 1px; /* Espaciado entre letras para un toque de diseño */
}

.junkie-custom-button:hover {
    background-color: #FCA243; /* Fondo un poco más oscuro al pasar el ratón para efecto interactivo */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Sombra más grande al pasar el ratón para más profundidad */
}