/* === REDISEÑO COMPLETO DE LA CABECERA DE PÁGINA (HERO SECTION) === */

.page-header {
    /* 1. Contenedor visual: Le damos un fondo sutil que rompe con el fondo de la página */
    background: var(--card); /* Usamos el color de la tarjeta (blanco o gris oscuro en DM) */
    border-radius: var(--radius); /* Esquinas redondeadas como tus tarjetas */
    padding: 35px 20px; /* Mucho más padding para darle espacio al texto */
    box-shadow: var(--shadow-sm); /* Sombra sutil para levantarlo */
    
    /* 2. Alineación y ancho: Centramos el contenido dentro de este bloque */
    text-align: center; 
    max-width: var(--container-w);
    /* margin-left/right: auto ya no es necesario si está dentro de .container,
       pero lo mantenemos para que el .page-header tenga su propia "caja" centrada si se usa fuera de .container */
    margin-left: auto;
    margin-right: auto;
    
    /* 3. Margen inferior para separarlo del contenido (ej. la lista de productos) */
    margin-bottom: 40px; 
}

/* --- ESTILO DEL TÍTULO PRINCIPAL (h1) --- */

.page-header .product-title { 
    /* El título es el foco, debe ser grande y negrita */
    font-size: 2.5rem; 
    font-weight: 800; 
    margin: 0 0 10px 0; /* Espacio limpio */
    line-height: 1.1;
    color: var(--text);
}

/* --- ESTILO DEL SUBTÍTULO (p) --- */

.page-header .hero-subtitle {
    font-size: 1.2rem;
    color: var(--muted); /* Gris sutil, menos prominente que el título */
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 0;
    
    /* 4. Límitamos el ancho del subtítulo para que no sea una línea muy larga y aburrida */
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.page-header .product-title .header-icon {
    width: 40px; /* Tamaño del icono */
    height: 40px; 
    vertical-align: middle; /* CLAVE para que esté alineado con el texto del título */
    margin-right: 12px; /* Espacio entre el icono y el texto */
    
    /* Si tu imagen de estrella es negra y quieres que se vea negra, puedes quitar el 'filter' o dejarlo en invert(0) */
    /* filter: brightness(0) invert(0); */
}

/* --- RESPONSIVE / AJUSTES PARA MÓVILES --- */

@media (max-width: 768px) {
    .page-header {
        padding: 25px 15px;
        margin-bottom: 25px;
        /* En móvil, eliminamos la sombra si no se ve bien */
        box-shadow: none; 
    }
    .page-header .product-title {
        font-size: 2rem;
        margin-bottom: 8px;
    }
    .page-header .hero-subtitle {
        font-size: 1rem;
    }
    .page-header .product-title .header-icon {
        width: 32px;
        height: 32px;
        margin-right: 8px;
    }
}