/* ==========================================================================
Header (.header-2) — ajustes propios sobre el tema.
Debe cargarse SIEMPRE después de assets/css/style.css.
========================================================================== */
/* --------------------------------------------------------------------------
1. Logo
style.css hace, con selector `header .top-nav .navbar-top .web-logo img`:
width: calc(111.6px + 2.625vw); height: auto;
Dimensiona por ANCHO, lo que con un logo cuadrado (file.png es 1024x1024)
da ~149px de alto y estira la barra. Aquí dimensionamos por ALTO y dejamos
que el ancho se derive del ratio real, así sirve tanto para un logo
cuadrado como para uno apaisado.
El selector necesita 4 clases para superar al del tema (0,3,2).
-------------------------------------------------------------------------- */
.header-2 .top-nav .navbar-top .web-logo img {
width: auto;
height: clamp(40px, 2.2vw + 32px, 58px);
max-width: 190px;
object-fit: contain;
transition: height 0.25s ease;
}
/* --------------------------------------------------------------------------
2. Visibilidad de los accesos del menú
El tema posiciona los con nth-of-type, contando por posición, y da por
hecho un orden concreto. Dos reglas de style.css nos afectan:
a) .header-2 .rightside-menu .option-list > ul > li:nth-of-type(5n-3)
{ display: none } ← sin media query
Oculta el 2º (Inicio) en escritorio; el propio tema lo reactiva
con display:block dentro de @media (max-width: 1199px).
b) @media (max-width: 767px)
... li:not(:nth-last-of-type(5n-5)) { display: none }
Deja visible sólo el 1er (la lupa) en móvil, porque la barra
inferior .mobile-menu de layouts/app.blade.php cubre el resto.
Aquí Inicio debe verse en todos los tamaños, así que lo forzamos por clase
en lugar de por posición: añadir o reordenar un ya no rompe nada.
Misma especificidad que el tema (0,4,2), pero este archivo carga después.
-------------------------------------------------------------------------- */
.header-2 .rightside-menu .option-list > ul > li.header-item--home {
display: block;
}
/* --------------------------------------------------------------------------
2b. Hueco y separador entre Inicio y Lista de deseos
El tema separa los accesos con dos piezas que van SIEMPRE juntas: el margen
que abre el hueco y un ::after de 1px centrado dentro de ese hueco.
... > li + li { margin-left: 37px } (22px por debajo de 1460px)
... > li + li::after { content:""; width:1px; height:80%; left:-20px }
(left:-13px por debajo de 1460px)
Y cancela LAS DOS justo después de Inicio, contando por posición:
... > li:nth-of-type(5n-3) + li { margin-left: 0 } ← 5n-3 = 2º
... > li:nth-of-type(5n-3) + li::after { content: none }
La cancelación existe porque el tema da por hecho que Inicio está oculto en
escritorio. Como aquí sí se muestra (regla 2), Inicio y Lista de deseos
quedaban pegados y sin línea. Reponer sólo el ::after no sirve: sin margen el
hueco mide 0 y la línea se dibuja ENCIMA del icono de Inicio. Hay que
restaurar las dos piezas, con los mismos valores que usa el tema.
Ámbito: sólo escritorio. Por debajo de 1199px el propio tema ya las restaura
(margin-left:22px y content:"" dentro de @media (max-width:1199px)), así que
ahí no tocamos nada.
OJO con la especificidad: :nth-of-type() puntúa como clase, así que el
selector del tema es (0,4,3) — no basta con empatar a (0,4,2) y cargar
después. Encadenamos las dos clases que el ya lleva (.header-item y
.header-item--wishlist) para subir a (0,5,2), que gana por número de clases
sin atarnos a la posición del elemento ni recurrir a !important.
-------------------------------------------------------------------------- */
@media (min-width: 1200px) {
.header-2 .rightside-menu .option-list > ul > li.header-item.header-item--wishlist {
margin-left: 37px;
}
.header-2 .rightside-menu .option-list > ul > li.header-item.header-item--wishlist::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -20px;
width: 1px;
height: 80%;
background-color: #ececec;
}
[dir="rtl"] .header-2 .rightside-menu .option-list > ul > li.header-item.header-item--wishlist {
margin-left: unset;
margin-right: 37px;
}
[dir="rtl"] .header-2 .rightside-menu .option-list > ul > li.header-item.header-item--wishlist::after {
left: unset;
right: -20px;
}
}
/* El tema estrecha hueco y separador por debajo de 1460px; misma coherencia. */
@media (min-width: 1200px) and (max-width: 1460px) {
.header-2 .rightside-menu .option-list > ul > li.header-item.header-item--wishlist {
margin-left: 22px;
}
.header-2 .rightside-menu .option-list > ul > li.header-item.header-item--wishlist::after {
left: -13px;
}
[dir="rtl"] .header-2 .rightside-menu .option-list > ul > li.header-item.header-item--wishlist {
margin-left: unset;
margin-right: 22px;
}
[dir="rtl"] .header-2 .rightside-menu .option-list > ul > li.header-item.header-item--wishlist::after {
right: -13px;
}
}
/* --------------------------------------------------------------------------
3. Buscador desplegable (móvil)
El tema anima .search-full con `zoomIn` al abrir, pero al cerrar sólo quita
la clase. Damos una transición simétrica y evitamos que el overlay capture
clics mientras está cerrado.
-------------------------------------------------------------------------- */
.header-2 .search-full {
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.header-2 .search-full.open {
pointer-events: auto;
opacity: 1;
}
.header-2 .search-full .input-group {
width: 100%;
}
/* El botón de cerrar hereda foco visible para navegación por teclado. */
.header-2 .search-full .close-search:focus-visible {
outline: 2px solid var(--theme-color);
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
4. Buscador de escritorio
Visible de forma permanente desde 1200px. El tema oculta .middle-box por
debajo de 992px; ahí toma el relevo el icono + overlay.
-------------------------------------------------------------------------- */
@media (min-width: 1200px) {
.header-2 .middle-box {
display: flex;
flex: 1 1 auto;
justify-content: center;
min-width: 0;
padding: 0 24px;
}
.header-2 .middle-box .center-box,
.header-2 .middle-box .searchbar-box {
width: 100%;
}
.header-2 .middle-box .searchbar-box {
max-width: 520px;
margin: 0 auto;
}
}
.header-2 .searchbar-box .search-form {
position: relative;
}
.header-2 .searchbar-box .form-control {
transition: border-color 0.2s ease, box-shadow 0.2s ease;
max-width: 520px;
}
.header-2 .searchbar-box .form-control:focus {
border-color: var(--theme-color);
box-shadow: 0 0 0 3px rgba(var(--theme-color-rgb, 10, 100, 80), 0.12);
}
/* --------------------------------------------------------------------------
5. Cuenta de usuario
-------------------------------------------------------------------------- */
.header-2 .header-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: cover;
display: block;
}
/* Nombres largos no deben empujar el resto de la barra. */
.header-2 .delivery-detail h5 {
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Por debajo de 992px sólo mostramos el avatar/icono, sin el texto. */
@media (max-width: 991px) {
.header-2 .delivery-detail {
display: none;
}
}
/* --------------------------------------------------------------------------
6. Transiciones generales de los iconos
-------------------------------------------------------------------------- */
.header-2 .header-icon {
transition: background-color 0.2s ease, border-color 0.2s ease,
color 0.2s ease, transform 0.2s ease;
}
.header-2 .header-icon:hover {
transform: translateY(-2px);
}
.header-2 .header-icon:focus-visible {
outline: 2px solid var(--theme-color);
outline-offset: 2px;
}
.header-2 .badge-number {
transition: transform 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
.header-2 .search-full,
.header-2 .header-icon,
.header-2 .badge-number,
.navbar-top .web-logo img {
transition: none;
}
.header-2 .search-full.open {
animation: none;
}
.header-2 .header-icon:hover {
transform: none;
}
}