/* Estilos existentes */
.extra-options label {
    display: block;
    margin-bottom: 5px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f9f9f9;
    font-size: 0.9em;
}
.extra-options label:hover {
    background-color: #e9e9e9;
    border-color: #bbb;
}
.extra-options input[type="checkbox"] {
    display: none; /* Oculta el checkbox por defecto */
}
.extra-options input[type="checkbox"]:checked + span {
    font-weight: bold;
    color: #007bff; /* Resalta el texto de la opción seleccionada */
}
.extra-options input[type="checkbox"]:checked + span::before {
    content: '✓ '; /* Agrega un visto bueno visual */
    color: #28a745;
}
.product { border: 1px solid #ccc; padding: 15px; margin-bottom: 15px; border-radius: 8px; position: relative; overflow: hidden; }
.product img { width: 100%; max-height: 200px; object-fit: contain; }

/* ESTILO PARA EL TÍTULO DEL PRODUCTO */
.product h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Negrita */
    font-size: 1.4em; /* Tamaño de fuente ligeramente más grande */
    color: #333; /* Color de texto oscuro */
    margin-top: 15px;
    margin-bottom: 10px;
    text-align: center; /* Centrar el texto */
    height: 2.8em; /* Altura fija para 2 líneas */
    line-height: 1.4em;
    overflow: hidden; /* Oculta el texto que se desborda */
    text-overflow: ellipsis; /* Añade puntos suspensivos (...) */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita a 2 líneas */
    -webkit-box-orient: vertical;
}

/* ESTILO PARA EL TEXTO "AGOTADO" */
.agotado-badge {
    position: absolute;
    top: calc(2.8em + 15px + 210px); /* Altura del título (2.8em) + margin-top del título (15px) + pequeño espacio */
    left: 50%; /* Centrar horizontalmente */
    transform: translateX(-50%); /* Ajuste para centrar correctamente */
    background: #dc3545; /* Rojo de agotado */
    color: white;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9em; /* Mismo tamaño que las insignias existentes */
    z-index: 10;
    white-space: nowrap; /* Evitar que el texto se rompa */
}
/* Ajuste para el contenedor de agotado si es necesario, aunque el badge flotante lo hace menos crítico */
.sold-out-container {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinea los elementos al inicio */
    gap: 10px; /* Espacio entre el botón y el texto */
    margin-top: 10px;
}
/* COLORES PASTELES PARA INSIGNIAS */
.discount-badge {
    position: absolute;
    background: #ff99a9; /* Rosa pastel más oscuro para descuento */
    color: white;
    padding: 3px 10px;
    top: 10px;
    left: 10px;
    border-radius: 4px;
    font-weight: bold;
    z-index: 10;
}
.new-badge {
    position: absolute;
    background: #a9d9ff; /* Azul pastel para nuevo */
    color: white;
    padding: 3px 10px;
    top: 40px; /* Adjusted position to not overlap discount-badge */
    left: 10px;
    border-radius: 4px;
    font-weight: bold;
    z-index: 10;
}

/* --- Rectangular Price Tag Styles --- */
.price-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    width: auto; /* Ajusta el ancho basado en el contenido */
    min-width: 90px; /* Ancho mínimo */
    padding: 5px 10px;
    border-radius: 8px; /* Esquinas ligeramente redondeadas */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    z-index: 9;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
    transition: all 0.3s ease; /* Transición suave para el cambio de fondo */
    transform: scale(1);
}

/* Efecto hover para la etiqueta de precio */
.price-tag:hover {
    transform: scale(1.05); /* Ligeramente más grande al pasar el mouse */
    box-shadow: 0px 4px 8px rgba(0,0,0,0.4); /* Sombra más pronunciada */
}

/* Estilo para productos con descuento (GRADIENTE ROSA CORAL PASTEL) */
.price-tag.discount {
    background: linear-gradient(to bottom right, #ff99a9, #ffc0a9); /* Rosa coral a durazno suave */
}

/* Estilo para productos con precio regular (GRADIENTE ROSA CLARO A LILA SUAVE) */
.price-tag.no-discount {
    background: linear-gradient(to bottom right, #ffc0cb, #e0b0ff); /* Rosa claro a lila suave */
}

.price-tag .offer-label {
    font-size: 0.7em;
    font-weight: bold;
    color: #fff;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #ff6980; /* Rosa pastel más vibrante para la etiqueta de oferta */
    padding: 2px 5px;
    border-radius: 3px;
}

.price-tag .old-price {
    color: #ffffff; /* Blanco roto para el precio antiguo */
    font-size: 0.8em;
    margin-bottom: 2px;
    white-space: nowrap;
    text-decoration: underline; /* Tachado para el precio antiguo */
}

.price-tag .current-price {
    font-size: 1.8em; /* Más grande para el precio actual */
    font-weight: 900; /* Fuente más gruesa */
    color: #ffffff; /* Blanco para el precio actual */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6); /* Sombra sutil oscura */
    line-height: 1.1;
}
            
.price-tag.no-discount .current-price {
    color: #ffffff; /* Asegura el blanco también para el precio regular */
    text-shadow: none; /* Sin sombra para el precio regular */
}

.price-tag .save-info {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 2px;
    font-weight: normal;
}
            
/* NUEVO: Estilo para el texto "Valor Solo Peluche" o texto de opción */
.price-tag .option-info {
    font-size: 0.8em;
    color: #666666;
    margin-top: 2px;
    font-weight: 600;
    white-space: nowrap; /* Evita que el texto de la opción se envuelva */
}

/* --- Fin Estilos de Etiqueta de Precio Rectangular --- */

/* Relleno añadido al contenido principal para evitar que quede oculto por el encabezado fijo */
.catalog-content {
    padding-top: 100px;
}

/* Estilos del sistema de filtros (actualizados) */
.filter-section {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
    padding: 15px;
    background-color: rgba(255, 192, 203, 0.15); /* Rosa palo muy claro y transparente */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.1); /* Borde suave */
    align-items: flex-end; /* Alinea los elementos a la parte inferior para que estén al mismo nivel */
}
.filter-group {
    flex: 1 1 auto; /* Permite que los grupos de filtro se expandan y contraigan */
    min-width: 150px; /* Ancho mínimo para elementos de filtro */
    display: flex; /* Añadir display flex para alinear label e input/select */
    flex-direction: column; /* Apilar label y input/select verticalmente */
}
.filter-group label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
    color: black; /* Texto negro */
}
.filter-group select { /* Contenedores y elementos seleccionados */
    padding: 8px 12px;
    border: 1px solid black; /* Borde negro */
    border-radius: 8px; /* Bordes redondeados */
    font-size: 0.9em;
    transition: all 0.3s ease;
    background-color: white; /* BLANCO para contenedores no seleccionados */
    color: black; /* Texto negro */
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Sombra suave */
    cursor: pointer;
    width: 100%; /* Ocupar todo el ancho disponible */
    box-sizing: border-box; /* Incluir padding y borde en el ancho */
    height: 40px; /* **Altura fija para select para igualar el checkbox** */
}
.filter-group select:focus,
.filter-group .checkbox-container label:hover {
    border-color: black; /* Borde negro al enfocar/hover */
    outline: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra más pronunciada al enfocar/hover */
}

/* Estilo para el contenedor del checkbox (actúa como el elemento de selección) */
.checkbox-container {
    position: relative;
    display: inline-block; /* Para que ocupe solo el espacio necesario */
    width: 100%; /* Ocupa el ancho completo del grupo */
    flex-grow: 1; 
    display: flex; /* Para centrar el contenido */
    align-items: center; /* Centrar verticalmente */
    height: 40px; /* **Altura fija para el contenedor del checkbox** */
    box-sizing: border-box; /* Incluir padding y borde en el ancho */
}

.checkbox-container input[type="checkbox"] {
    display: none; /* Oculta el checkbox nativo */
}

.checkbox-container label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0; /* Eliminar margen inferior para una mejor alineación */
    height: 100%; /* Asegurar que el label ocupe todo el espacio disponible */
    flex-grow: 1; /* Permitir que el label se expanda */
    padding: 8px 12px; /* **Mismo padding que el select** */
    border: 1px solid black; /* **Mismo borde que el select** */
    border-radius: 8px; /* **Mismo radio que el select** */
    font-size: 0.9em; /* **Mismo tamaño de fuente que el select** */
    background-color: white; /* BLANCO */
    color: black; /* Texto negro */
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Sombra suave */
    transition: all 0.3s ease;
}

/* Estilo para el "checkbox" personalizado (cuadrado) */
.checkbox-container label::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid black; /* Borde negro */
    border-radius: 4px; /* Bordes redondeados */
    margin-right: 8px;
    background-color: white; /* Fondo blanco para el cuadrado del checkbox */
    transition: all 0.2s ease;
    flex-shrink: 0; /* Evitar que se encoja */
}

/* Estilo cuando el checkbox está seleccionado */
.checkbox-container input[type="checkbox"]:checked + label::before {
    background-color: #cccccc; /* GRIS CLARO cuando está seleccionado */
    border-color: black; /* Borde negro cuando está seleccionado */
    content: '✓'; /* Visto bueno */
    display: flex;
    align-items: center;
    justify-content: center;
    color: black; /* Color del visto bueno */
    font-weight: bold;
    font-size: 1.1em;
}

/* Estilo para el botón Limpiar filtro */
#reset-filters-btn {
    background-color: white; /* BLANCO */
    border: 1px solid black; /* Borde negro */
    padding: 10px 20px;
    border-radius: 8px; /* Bordes redondeados */
    color: black; /* Texto negro */
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* Sombra suave */
    align-self: flex-end; /* Alinea el botón a la parte inferior del contenedor flex */
    height: 40px; /* **Altura fija para el botón para igualar los recuadros** */
}
#reset-filters-btn:hover {
    background-color: #f0f0f0; /* Un blanco un poco más oscuro al hacer hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra más pronunciada */
}

/* Separador visual */
.filter-separator {
    width: 1px;
    background-color: black; /* Negro */
    margin: 0 10px; /* Espacio alrededor del separador */
    height: 40px; /* Altura del separador */
    align-self: flex-end; /* Alinea el separador a la parte inferior del contenedor flex */
}

/* Estilos para los botones de compartir (más pequeños y minimalistas) */
.share-buttons {
    display: flex;
    justify-content: center; /* Centra los botones horizontalmente */
    gap: 5px; /* Espacio más pequeño entre los botones */
    margin-top: 10px; /* Margen superior para separarlos del resto del contenido */
}

.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* Tamaño del botón reducido */
    height: 30px; /* Tamaño del botón reducido */
    border-radius: 50%; /* Circular */
    color: white;
    font-size: 1em; /* Tamaño del icono reducido */
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.share-button:hover {
    transform: translateY(-2px); /* Pequeño efecto al pasar el mouse */
}

.share-button.facebook {
    background-color: #3b5998; /* Color de Facebook */
}

.share-button.pinterest {
    background-color: #cb2027; /* Color de Pinterest */
}

.share-button.whatsapp {
    background-color: #25d366; /* Color de WhatsApp */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .filter-section {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-group {
        width: 100%;
    }
    .filter-separator {
        display: none; /* Ocultar separadores en móviles */
    }
}