/**
* inloff — Estilos globales del header del theme.
*
* Carga en TODAS las páginas (no solo /mi-cuenta/) para que el botón
* ACCEDER / MI CUENTA tenga el branding inloff en cualquier sitio.
*/
/* ============================================================
Botón "ACCEDER" / "MI CUENTA" del header (Flatsome)
============================================================
Flatsome genera (anon):
Y para logueado:
*/
#header .account-item .nav-top-link,
#header .account-item .header-button > a,
.header-button > a.nav-top-link,
a.nav-top-link.nav-top-not-logged-in,
a.account-link.account-login {
background: transparent !important;
color: #1B2B4B !important;
border: 1px solid #1B2B4B !important;
border-radius: 0 !important;
padding: 7px 18px !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
line-height: 1.3 !important;
height: auto !important;
min-height: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px;
transition: background .15s ease, color .15s ease, border-color .15s ease !important;
margin: 0 !important;
}
#header .account-item .nav-top-link:hover,
#header .account-item .header-button > a:hover,
.header-button > a.nav-top-link:hover,
a.nav-top-link.nav-top-not-logged-in:hover,
a.account-link.account-login:hover {
background: #1B2B4B !important;
color: #FFFFFF !important;
border-color: #1B2B4B !important;
text-shadow: none !important;
}
/* Quitar el icono de usuario que Flatsome añade en el link cuando icon_style está activo */
#header .account-item .nav-top-link::before,
#header .account-item .nav-top-link::after,
#header .account-item .header-button > a::before,
#header .account-item .header-button > a::after,
a.nav-top-link.nav-top-not-logged-in::before,
a.nav-top-link.nav-top-not-logged-in::after,
a.account-link.account-login::before,
a.account-link.account-login::after {
display: none !important;
content: none !important;
}
/* Ocultar el SVG/icon-user que Flatsome inyecta dentro del link */
#header .account-item .nav-top-link > i,
#header .account-item .nav-top-link > svg,
#header .account-item .header-button > a > i,
#header .account-item .header-button > a > svg {
display: none !important;
}
/* El span con el texto se muestra normal */
#header .account-item .nav-top-link > span,
#header .account-item .header-button > a > span {
display: inline !important;
margin: 0 !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
line-height: inherit !important;
}
/* Versión "logueado" filled navy (para diferenciar del anon outlined) */
a.account-link.account-login {
background: #1B2B4B !important;
color: #FFFFFF !important;
border-color: #1B2B4B !important;
}
a.account-link.account-login:hover {
background: #243a66 !important;
border-color: #243a66 !important;
color: #FFFFFF !important;
}
/* ============================================================
Off-canvas MÓVIL: "Mi cuenta" como ítem de menú normal
============================================================
Las reglas de arriba (botón navy-filled del header) NO están scopeadas a
#header, así que el fondo navy se colaba en el off-canvas (#main-menu), donde
el propio menú pinta los links en navy → navy-sobre-navy, ilegible.
Aquí reseteamos "Mi cuenta" al look de un ítem de menú (navy sobre
transparente), idéntico a sus hermanos (Bodas, etc.). */
#main-menu a.account-link.account-login,
.off-canvas a.account-link.account-login {
background: transparent !important;
color: #1B2B4B !important;
border: 0 !important;
border-radius: 0 !important;
padding: 14px 18px !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: normal !important;
text-transform: none !important;
line-height: 1.3 !important;
box-shadow: none !important;
min-height: 0 !important;
}
#main-menu a.account-link.account-login:hover,
.off-canvas a.account-link.account-login:hover {
background: transparent !important;
color: #C5A184 !important;
}
#main-menu a.account-link.account-login span,
.off-canvas a.account-link.account-login span {
color: inherit !important;
}
/* ============================================================
Off-canvas móvil: scrollbar de marca (fino, bronce)
============================================================
El scroll del menú lo hace `.mfp-content` (los contenedores internos llevan
`.no-scrollbar`), y mostraba el scrollbar nativo del navegador. Lo estilizamos
igual que el del dropdown del buscador: fino, thumb cream → heart en hover. */
.off-canvas .mfp-content {
scrollbar-width: thin;
scrollbar-color: var(--inloff-heart, #C5A184) transparent;
}
.off-canvas .mfp-content::-webkit-scrollbar { width: 8px; }
.off-canvas .mfp-content::-webkit-scrollbar-track { background: transparent; }
.off-canvas .mfp-content::-webkit-scrollbar-thumb {
background: #F3EAD9;
border-radius: 99px;
border: 2px solid #fff;
}
.off-canvas .mfp-content:hover::-webkit-scrollbar-thumb { background: var(--inloff-heart, #C5A184); }
/* Header sobre fondo dark/navy: invertir colores */
.dark .account-item .nav-top-link,
.dark .header-button > a,
.header-bg-color-dark .account-item .nav-top-link {
color: #FFFFFF !important;
border-color: rgba(255, 255, 255, 0.55) !important;
}
.dark .account-item .nav-top-link:hover,
.dark .header-button > a:hover,
.header-bg-color-dark .account-item .nav-top-link:hover {
background: #FFFFFF !important;
color: #1B2B4B !important;
border-color: #FFFFFF !important;
}
/* Ajustar espaciado del item account dentro del nav del header */
#header .account-item.has-icon {
padding: 0 6px;
}
/* Mobile: pill un poco más compacta */
@media (max-width: 768px) {
#header .account-item .nav-top-link,
#header .account-item .header-button > a {
padding: 6px 14px !important;
font-size: 10px !important;
letter-spacing: 1.2px !important;
}
}
/* ============================================================
HEADER CART LINK — sin underline, color consistente en hover
============================================================
El cart-link de Flatsome hereda el `a:hover` global que cambia
el color y, en algunos casos, añade text-decoration: underline.
Aquí lo forzamos a color/no-underline siempre. */
#header .header-cart-link,
#header .header-cart-link:hover,
#header .header-cart-link:focus,
#header .header-cart-link:active,
#header li.cart-item > a,
#header li.cart-item > a:hover,
#header li.cart-item > a:focus,
#header li.cart-item > a:active {
text-decoration: none !important;
color: #1A1612 !important;
border-bottom: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* El icono del shopping bag y el badge con el contador conservan
su color base en cualquier estado interactivo. */
#header .header-cart-link .cart-icon,
#header .header-cart-link:hover .cart-icon,
#header .header-cart-link .cart-icon strong,
#header .header-cart-link:hover .cart-icon strong,
#header .header-cart-link .cart-price,
#header .header-cart-link:hover .cart-price,
#header .header-cart-link .header-cart-title,
#header .header-cart-link:hover .header-cart-title {
color: #1A1612 !important;
background-color: transparent !important;
border-color: #1A1612 !important;
text-decoration: none !important;
}
/* Pequeño feedback en hover: solo opacity, no cambio de color */
#header .header-cart-link:hover {
opacity: 0.75;
transition: opacity .15s ease;
}
/* La línea dorada `::after` de Flatsome se extiende a todo el ancho del
, incluyendo el icono del cart. La movemos al del título
para que el underline solo cubra el texto "CARRITO / XX €" y NO llegue
hasta el icono shopping bag. */
#header .header-cart-link::before,
#header .header-cart-link::after,
#header li.cart-item > a::before,
#header li.cart-item > a::after {
display: none !important;
content: none !important;
background: transparent !important;
}
#header .header-cart-link .header-cart-title {
position: relative;
padding-bottom: 4px;
}
#header .header-cart-link .header-cart-title::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background-color: #C9A86A; /* mismo dorado que tenía Flatsome */
border-radius: 1px;
opacity: 0;
transition: opacity .15s ease;
}
#header .header-cart-link:hover .header-cart-title::after {
opacity: 1;
}
/* ==========================================================================
Wishlist · contador en cabecera (override partial element-wishlist)
Corazón SVG + badge de marca. El badge solo aparece con items.
========================================================================== */
#header li.header-wishlist-icon { display: flex; align-items: center; }
#header .inloff-wl-headcount__link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 4px;
color: var(--inloff-navy, #1B2540);
line-height: 0;
}
#header .inloff-wl-headcount__ico { display: inline-flex; }
#header .inloff-wl-headcount__ico .inloff-ico {
width: 23px;
height: 23px;
stroke-width: 1.4;
display: block;
transition: color .15s ease;
}
#header .inloff-wl-headcount.has-products .inloff-wl-headcount__ico .inloff-ico {
color: var(--inloff-heart, #C5A184);
}
#header .inloff-wl-headcount__link:hover .inloff-wl-headcount__ico .inloff-ico {
color: var(--inloff-heart-dark, #AD8763);
}
#header .inloff-wl-headcount__badge {
position: absolute;
top: -7px;
right: -9px;
min-width: 17px;
height: 17px;
padding: 0 4px;
display: grid;
place-items: center;
border-radius: 999px;
background: var(--inloff-heart, #C5A184);
color: #fff;
font-size: 10.5px;
font-weight: 700;
line-height: 1;
box-shadow: 0 1px 4px rgba(27, 37, 64, .25);
}
#header .inloff-wl-headcount:not(.has-products) .inloff-wl-headcount__badge { display: none; }
/* ==========================================================================
Header · espaciado entre MI CUENTA · corazón · carrito
========================================================================== */
#header li.account-item { margin-right: 8px; }
#header li.header-wishlist-icon { margin: 0 16px; }
#header li.cart-item { margin-left: 8px; }
/* ==========================================================================
Micro-interacción · "regalo a la bolsa" al añadir al carrito
========================================================================== */
#header li.cart-item { position: relative; }
@keyframes inloff-cart-bump {
0% { transform: translate(0, 0) scale(1) rotate(0); }
12% { transform: translate(0, -8px) scale(1.14) rotate(0); } /* salto grande */
26% { transform: translate(0, 0) scale(.88) rotate(0); } /* aterrizaje (squash) */
38% { transform: translate(-3px, -1px) rotate(-15deg); } /* shake saltarín */
52% { transform: translate(3px, 0) rotate(12deg); }
64% { transform: translate(-2px, 0) rotate(-9deg); }
76% { transform: translate(2px, 0) rotate(6deg); }
88% { transform: translate(-1px, 0) rotate(-3deg); }
100% { transform: translate(0, 0) scale(1) rotate(0); }
}
#header .cart-item .cart-icon.inloff-cart-bump {
animation: inloff-cart-bump .8s cubic-bezier(.34, 1.56, .64, 1);
transform-origin: center center;
will-change: transform;
}
/* El regalo se ancla a .cart-icon (la bolsa) y cae DENTRO de ella. */
@keyframes inloff-cart-gift-drop {
0% { opacity: 0; transform: translate(-50%, -24px) scale(.5) rotate(-12deg); }
32% { opacity: 1; transform: translate(-50%, -13px) scale(1) rotate(0deg); }
72% { opacity: 1; transform: translate(-50%, -2px) scale(.82) rotate(5deg); }
100% { opacity: 0; transform: translate(-50%, 7px) scale(.35) rotate(9deg); }
}
.inloff-cart-gift {
position: absolute;
left: 50%;
top: -2px;
width: 16px;
height: 16px;
color: var(--inloff-heart, #C5A184);
pointer-events: none;
z-index: 60;
animation: inloff-cart-gift-drop .7s cubic-bezier(.22, .61, .36, 1) forwards;
}
.inloff-cart-gift svg { width: 16px; height: 16px; display: block; }
@media (prefers-reduced-motion: reduce) {
#header .cart-item .cart-icon.inloff-cart-bump { animation: none; }
}
/* ============================================================================
O2.3 — Search header bottom-border-only (decisión D5 del audit 2026-05-30)
----------------------------------------------------------------------------
El search original (Flatsome `.searchform` con WC product search) era una
caja blanca + botón heart-fill cuadrado a la derecha → demasiado prominente
para el tono editorial de la marca. Lo simplificamos a un input minimalista
con solo `border-bottom` + lupa pequeña a la derecha sin botón cuadrado.
Resets defensivos con `!important` por las reglas globales de Flatsome:
input { border-radius: 99px; } (línea 1 de flatsome.css)
button { background: var(--fs-color-primary); padding: 0 1.2em;
min-height: 2.5em; min-width: 24px; text-transform: uppercase;
margin-right: 1em; ... }
Sin estos resets, el botón sale heart-fill cuadrado y el input se vería
como pill (border-radius 99px).
========================================================================= */
#header .searchform {
position: relative;
background: transparent !important;
margin: 0 !important;
}
#header .searchform .flex-row {
background: transparent !important;
align-items: center;
}
#header .searchform .flex-col.flex-grow {
padding-right: 0 !important;
}
#header .searchform .search-field {
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid var(--inloff-line-strong, rgba(27, 37, 64, 0.16)) !important;
border-radius: 0 !important;
padding: 8px 36px 8px 2px !important;
font-size: 0.95rem;
line-height: 1.4;
color: var(--inloff-navy, #1B2540);
height: auto !important;
min-height: 40px;
box-shadow: none !important;
transition: border-color 0.18s ease;
width: 100%;
}
#header .searchform .search-field:hover {
border-bottom-color: var(--inloff-navy, #1B2540) !important;
}
#header .searchform .search-field:focus {
border-bottom-color: var(--inloff-heart, #C5A184) !important;
outline: 0 !important;
box-shadow: none !important;
}
#header .searchform .search-field::placeholder {
color: var(--inloff-muted, #6B6B6B);
opacity: 1;
font-weight: 400;
}
/* ============================================================
Layout: buscador CENTRADO en toda la web (antes solo en PDP).
Posiciona el buscador en el centro del header-main, sea cual sea
la zona Flatsome donde esté. En móvil vuelve al flujo normal.
============================================================ */
.header-main .flex-row { position: relative; }
.header-main .header-search-form,
.header-main .header-search-form-wrapper,
.header-main .searchform-wrapper {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
width: 40% !important;
max-width: 500px !important;
min-width: 320px !important;
margin: 0 !important;
z-index: 1;
}
.header-main .header-search-form .searchform,
.header-main .header-search-form-wrapper .searchform,
.header-main .searchform-wrapper .searchform { width: 100% !important; }
.header-main .header-search-form input[type="search"],
.header-main .header-search-form input[type="text"],
.header-main .searchform input[type="search"],
.header-main .searchform input[type="text"] { width: 100% !important; min-width: 0 !important; }
@media screen and (max-width: 849px) {
.header-main .header-search-form,
.header-main .header-search-form-wrapper,
.header-main .searchform-wrapper {
position: relative !important; left: auto !important; top: auto !important;
transform: none !important; width: 100% !important; min-width: 0 !important;
}
}
/* Botón submit: lupa pegada a la derecha del input, sin caja heart-fill */
#header .searchform .ux-search-submit,
#header .searchform .submit-button {
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%);
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
color: var(--inloff-navy, #1B2540) !important;
padding: 6px 4px !important;
margin: 0 !important;
min-height: 0 !important;
min-width: 0 !important;
height: auto !important;
line-height: 1 !important;
box-shadow: none !important;
text-transform: none !important;
letter-spacing: normal !important;
transition: color 0.18s ease, transform 0.18s ease;
z-index: 2;
}
#header .searchform .ux-search-submit:hover,
#header .searchform .submit-button:hover {
background: transparent !important;
color: var(--inloff-heart-dark, #AD8763) !important;
transform: translateY(-50%) scale(1.08);
}
#header .searchform .ux-search-submit:active,
#header .searchform .submit-button:active {
transform: translateY(-50%) scale(0.94);
}
#header .searchform .ux-search-submit i,
#header .searchform .submit-button i {
color: inherit;
font-size: 18px !important;
line-height: 1 !important;
}
#header .searchform .ux-search-submit .icon-angle-right,
#header .searchform .ux-search-submit svg {
display: none !important;
}
/* ============================================================================
O2.4 — Header derecha: iconos limpios + importe sub-discreto (decisión D2.4)
----------------------------------------------------------------------------
Antes: "ACCEDER" (texto link uppercase) + ♡ heart + "CARRITO / 51,41 € (3)"
(label + total inline + count) → 5 piezas visuales compitiendo a la derecha.
Ahora: cada elemento se vuelve un icono limpio. El total del carrito sigue
visible pero como sub-label tipográfico muy discreto (11px, muted) bajo el
icono — refuerza CRO sin saturar.
========================================================================= */
/* Acceder: link de texto sin uppercase agresivo. Flatsome añade
`data-flatsome-role-button="attached"` al login link (porque abre un
popup) y le pone un border navy + padding agresivo → resetear a link
plano. */
#header .account-item .nav-top-link,
#header .account-item .nav-top-link[data-flatsome-role-button] {
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 0.92rem !important;
font-weight: 500;
color: var(--inloff-navy, #1B2540) !important;
border: 0 !important;
background: transparent !important;
padding: 4px 6px !important;
min-height: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
text-decoration: none;
line-height: 1.4;
}
#header .account-item .nav-top-link:hover {
color: var(--inloff-heart-dark, #AD8763) !important;
background: transparent !important;
}
/* Carrito: SOLO icono (sin precio inline ni debajo). Minimalismo editorial
— el total se consulta abriendo el sidecart al click. Esconde
completamente el `.header-cart-title` (texto "Carrito /" + .cart-price). */
#header .cart-item .header-cart-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center;
padding: 6px !important;
line-height: 1;
}
#header .cart-item .header-cart-title {
display: none !important;
}
/* Icono cart: caja de regalo con lazo "bow" arriba (decisión final O2.4).
SVG inline navy 26×26 vía `::before`. MISMO SVG que el regalo que cae
en la animación de inloff-cart-fx.js → consistencia: cae un regalo y
aterriza encima de la misma silueta. */
#header .cart-item .cart-icon {
position: relative !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 28px !important;
height: 28px !important;
font-size: inherit;
}
#header .cart-item .cart-icon::before {
content: '';
display: block;
width: 28px;
height: 28px;
background-image: url("data:image/svg+xml;utf8,