.flexiblecolumn {
	float: none;
}

.flexiblecolumn > div, .flexiblecolumn > div > div {
	height: 100%;
}

#contact-button .btn {
 font-size: 20px; 
}

ul.list-icons {
  list-style: none;
  margin: 0;
}

ul.list-icons li:before {
  content: "\f101";
  color: #3e9667;
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  margin-right: 12px;
}

div.mod-login__password button {
	width: 55px;
	padding-left: 0;
	padding-right: 0;
	margin: 0;
}

div.mod-login__username .input-group-text {
	width: 55px;
}

.plg_system_webauthn_login_button {
	display: flex;
	align-items: center;
}

.mod-login input {
	margin: 0;
}

button.navbar-toggler {
   color: #404040; 
}


/* --- CONTROL TOTAL DE GRILLA REBASANDO --- */

/* 1. Forzar el ancho horizontal para que las tarjetas se junten */
.hikashop_products_listing .hkc-md-3 {
    width: 270px !important; /* Ajuste para tu imagen de 250px */
    max-width: 240px !important;
    flex: 0 0 240px !important; /* Anula el 25% de Bootstrap */
    padding-left: 1px !important;
    padding-right: 1px !important;
    float: left !important;
}

/* 2. Respetar el espacio VERTICAL del menú */
.hikashop_products_listing .hikashop_product {
    /* Aquí NO forzamos margen inferior para que el valor del menú (10px) funcione */
    display: block !important;
}

/* 3. Ajustar la tarjeta interna para que no se desborde */
.hikashop_subcontainer {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    min-height: auto !important; /* Evita que queden huecos verticales desiguales */
}

/* 4. Contenedor padre: Centrar las tarjetas en la web */
.hikashop_products_listing {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0px !important; /* El espacio lo darán los rellenos laterales */
}

/* --- NIVELACIÓN DE ALTURAS PARA TÍTULOS --- */

/* 1. Forzar que el área del título siempre mida lo mismo (2 renglones) */
.hikashop_product_name {
    display: block !important;
    min-height: 42px !important; /* Altura suficiente para 2 líneas de texto */
    line-height: 1.2 !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    vertical-align: middle;
}

/* 2. Asegurar que el contenedor interno no colapse */
.hikashop_subcontainer {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important; /* Obliga a todas las tarjetas de la fila a ser igual de altas */
}

/* 3. Alinear el precio o los botones al fondo para que todo se vea simétrico */
.hikashop_product_price_full {
    margin-top: auto !important;
    display: block !important;
    padding-bottom: 5px;
}

/* Esta regla solo se aplica si la tarjeta tiene la clase "modo-oscuro" */
.modo-oscuro .hikashop_product_name, 
.modo-oscuro .hikashop_product_name a, 
.modo-oscuro .hikashop_product_price_full {
    color: #ffffff !important;
}



/* --- BOTÓN DE COMPRA COMPACTO --- */

.hikabtn.hikacart, 
#hikashop_product_quantity_main .hikabtn.hikacart {
    background-color: #d40808 !important;
    color: #ffffff !important;
    border: none !important;
    
    /* EL TRUCO PARA EL TAMAÑO */
    display: inline-block !important; /* Evita que ocupe el 100% */
    width: auto !important;           /* Se ajusta al texto "Añadir al carrito" */
    padding: 6px 15px !important;    /* Menos relleno lo hace más chico */
    
    font-size: 13px !important;      /* Fuente ligeramente más pequeña */
    font-weight: bold !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin: 10px auto !important;    /* Lo separa un poco de la imagen */
    transition: all 0.3s ease;
}

/* Centrar el botón si está suelto en la tarjeta */
.hikashop_product_image_subdiv + .hikabtn,
.hikashop_product_price_full + .hikabtn {
    display: table !important; /* Truco para centrar botones inline-block */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Efecto Hover */
.hikabtn.hikacart:hover {
    background-color: #b30606 !important;
    transform: scale(1.05); /* Un pequeño pulso al pasar el ratón */
}

/* --- LIMPIEZA TOTAL DE TEXTOS Y PRECIOS --- */

/* 1. TÍTULOS: Nitidez pura sin sombras gruesas */
.hikashop_product_name a {
    color: #ffffff !important; /* Blanco puro para tus tarjetas oscuras */
    font-weight: 500 !important; /* Peso medio para que no se vea tosco */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important; /* Sombra negra sutil para fondo blanco */
    font-size: 1rem !important;
    text-align: center;
    display: block;
}

/* 2. PRECIOS: Legibles pero sin "bordes" blancos */
.hikashop_product_price_full, 
.hikashop_product_price {
    color: #ffffff !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important;
    text-align: center !important;
    display: block !important;
}

/* 3. ELIMINAR "por unidad" Y "Gratis" (si prefieres que no aparezca) */
/* Nota: Si quieres que el precio '0' se vea, no ocultes .hikashop_product_price */
.hikashop_product_price_unit, 
.hikashop_product_unit_price,
.hikashop_product_price_free_text {
    display: none !important;
}

/* 4. Si quieres que la palabra "Gratis" aparezca pero más fina: */
/* Descomenta esto si prefieres verla:
.hikashop_product_price_free_text {
    display: block !important;
    font-weight: 400 !important;
    font-size: 0.9rem !important;
    color: #ffffff !important;
}

/* --- ELIMINAR TEXTO "POR UNIDAD" DEFINITIVAMENTE --- */

.hikashop_product_price_unit, 
.hikashop_product_unit_price, 
.hikashop_product_price_per_unit {
    display: none !important;
    visibility: hidden !important;
    font-size: 0 !important;
}


/* --- SOLUCIÓN PARA EL ÁREA DE DESCRIPCIÓN / PRODUCTO --- */

/* Creamos un contenedor neutro para la imagen principal de Piolín o la armadura */
#hikashop_main_image_div {
    background-color: #f2f2f2 !important; /* Gris muy suave que resalta blanco y negro */
    border: 1px solid #ddd !important;
    border-radius: 8px;
    padding: 20px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

/* En la ficha de producto, quitamos los efectos borrosos */
.hikashop_product_page img {
    filter: none !important; 
}

/* --- MEJORA DE PAGINACIÓN Y NAVEGACIÓN --- */

/* 1. Contenedor de los números (hacerlos más grandes y separados) */
.hikashop_pagination ul, 
.pagination-list {
    display: flex !important;
    gap: 8px !important;
    padding: 20px 0 !important;
    justify-content: center !important;
    list-style: none !important;
}

/* 2. Estilo de los botones individuales (Números y Flechas) */
.hikashop_pagination li a, 
.hikashop_pagination li span,
.pagination-list li a,
.pagination-list li span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important; /* Más anchos para que entre bien el dedo */
    height: 40px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    color: #333 !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* 3. El botón de la página actual (Resaltado en Rojo) */
.hikashop_pagination li.active span, 
.hikashop_pagination li span.active,
.pagination-list li.active span {
    background-color: #d40808 !important; /* Tu rojo */
    color: #ffffff !important;
    border-color: #d40808 !important;
}

/* 4. Efecto al pasar el mouse por los números */
.hikashop_pagination li a:hover,
.pagination-list li a:hover {
    background-color: #f2f2f2 !important;
    border-color: #d40808 !important;
    color: #d40808 !important;
}

/* 5. Ajuste para el selector de "Cantidad" (el desplegable) */
.hikashop_pagination_limit_div {
    margin-bottom: 15px !important;
    font-weight: bold !important;
    color: #474747 !important;
}

.hikashop_pagination_limit_div select {
    padding: 5px !important;
    border-radius: 4px !important;
    border: 1px solid #ccc !important;
}