/* Cabecera PC · maqueta v89 (regalo-original-implementacion/CABECERA.md).
   Aquí va todo lo que no es la franja superior (esa está en TopStrip): fila con el botón
   MENÚ, el logo con "Hecho en España", buscador centrado e iconos de acción. La barra
   oscura de menú (Todos los productos, Desayunos…) ya no existe: el botón MENÚ vive en la
   fila del logo, a su izquierda. Archivo nuevo, no toca ro.css ni las hojas heredadas;
   todo con #header delante para ganar a los estilos de los componentes. */
:root {
    --ro-ink: #222326;
    --ro-brand: #d9263b;
    --ro-line: #e9e7e5;
}
/* Fila del botón MENÚ + logo + buscador: lleva el crema que antes tenía la franja superior (que ahora es blanca). */
#header > header { background: #f7f4f1; }
.header-brand-group { display: contents; }
.origin-signature { display: none; }

/* Iconos de acción de la maqueta (trazo fino) en lugar de los glifos de la fuente de
   iconos: se dibujan con máscara SVG para que cambien de color con el hover. */
#header .nav-ro .nav-icons .icon-envelope,
#header .nav-ro .nav-icons .icon-phone-call,
#header .nav-ro .nav-icons .icon-heart,
#header .nav-ro .nav-icons .icon-shopping-cart {
    display: block;
    width: 23px;
    height: 23px;
    font-size: 0;
    line-height: 0;
    background-color: currentColor;
    color: inherit;
}
#header .nav-ro .nav-icons .icon-envelope {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 6 9 7 9-7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 6 9 7 9-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
#header .nav-ro .nav-icons .icon-phone-call {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3H4a1 1 0 0 0-1 1c0 9.4 7.6 17 17 17a1 1 0 0 0 1-1v-3l-5-2-2 2a14 14 0 0 1-7-7l2-2-2-5ZM15 3a7 7 0 0 1 6 6m-6-2a3 3 0 0 1 2 2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3H4a1 1 0 0 0-1 1c0 9.4 7.6 17 17 17a1 1 0 0 0 1-1v-3l-5-2-2 2a14 14 0 0 1-7-7l2-2-2-5ZM15 3a7 7 0 0 1 6 6m-6-2a3 3 0 0 1 2 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
#header .nav-ro .nav-icons .icon-heart {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 5.8a5.2 5.2 0 0 0-7.4 0L12 7.2l-1.4-1.4a5.2 5.2 0 1 0-7.4 7.4L12 22l8.8-8.8a5.2 5.2 0 0 0 0-7.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 5.8a5.2 5.2 0 0 0-7.4 0L12 7.2l-1.4-1.4a5.2 5.2 0 1 0-7.4 7.4L12 22l8.8-8.8a5.2 5.2 0 0 0 0-7.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* El carrito (líneas finas, poco relleno) se veía más pequeño que mail, teléfono y favoritos con la misma caja: se recorta
   su viewBox para ampliarlo un 7%, sin cambiar la caja del icono ni la posición del contador. */
#header .nav-ro .nav-icons .icon-shopping-cart {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.8 1.3 22.4 22.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.2 10.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 1.9-1.4L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.8 1.3 22.4 22.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.2 10.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 1.9-1.4L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
}
#header .nav-ro .nav-icons .icon-envelope::before,
#header .nav-ro .nav-icons .icon-phone-call::before,
#header .nav-ro .nav-icons .icon-heart::before,
#header .nav-ro .nav-icons .icon-shopping-cart::before {
    content: none;
}

@media (max-width: 992px) {
    #header .nav-ro .nav-icons .icon-envelope,
    #header .nav-ro .nav-icons .icon-phone-call,
    #header .nav-ro .nav-icons .icon-heart,
    #header .nav-ro .nav-icons .icon-shopping-cart {
        width: 21px;
        height: 21px;
    }
}

@media (min-width: 993px) {
    /* ---- Fila blanca: grupo MENÚ + logo | buscador centrado | acciones ----
       Ya no hay barra oscura debajo: la fila cierra el header con un filete inferior. */
    #header > header {
        border-bottom: 1px solid var(--ro-line);
        box-shadow: none;
    }
    /* La primera columna se ensancha lo que necesite su contenido (MENÚ + logo + "Hecho en España")
       y empuja hacia la derecha al buscador y a los iconos; mientras cabe, el buscador sigue centrado. */
    #header .nav-ro {
        display: grid;
        grid-template-columns: minmax(max-content, 1fr) minmax(0, 49%) minmax(0, 1fr);
        column-gap: 22px;
        align-items: center;
        min-height: 43.3755px;
        padding: 0;
    }
    #header .nav-ro > #megamenumobile-dummy,
    #header .nav-ro > .navbar-toggler {
        display: none;
    }
    #header .header-brand-group {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        align-items: center;
        gap: 16px;
        min-width: 0;
    }
    #header .header-brand-group #lnkLogo {
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
    }
    #header .header-brand-group #lnkLogo .logo,
    #header .header-brand-group #lnkLogo .logo-regalo {
        display: block !important;
        width: 110.8px;
        height: 40.1px;
        max-height: none;
        margin: 0;
        object-fit: contain;
    }
    #header .origin-signature {
        display: block;
        flex: 0 0 auto;
        font-size: 14px;
        line-height: 1.35;
        color: #686a70;
        white-space: nowrap;
    }
    #header .origin-signature strong {
        color: inherit;
        font-weight: 500;
    }

    /* ---- Buscador: caja de 8px de radio, sin lupa a la izquierda y botón circular (alto 35,64px: un 10 % menos que los 39,6px de la maqueta) ---- */
    #header .nav-ro .search-bar {
        grid-column: 2;
        grid-row: 1;
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    #header .nav-ro .search-bar .input-group {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0;
        width: 100%;
        height: 35.64px;
        padding: 3px 4px 3px 15px;
        background: #fff;
        border: 1px solid #c8c4c2;
        border-radius: 8px;
        box-sizing: border-box;
    }
    #header .nav-ro .search-bar .input-group:focus-within {
        border-color: var(--ro-brand);
        box-shadow: 0 0 0 2px rgba(217, 38, 59, .08);
    }
    #header .nav-ro .search-bar .input-group::before {
        content: none;
    }
    #header .nav-ro .search-bar #txtBuscando1,
    #header .nav-ro .search-bar #txtBuscando1:focus {
        flex: 1 1 auto;
        width: 0;
        min-width: 0;
        height: 28px;
        padding: 0 0 0 2px;
        font-size: 16px;
        color: var(--ro-ink);
    }
    #header .nav-ro .search-bar .input-group-btn {
        display: flex;
        align-self: center;
        margin: 0;
    }
    #header .nav-ro .search-bar .btn-search-bar,
    #header .nav-ro .search-bar .btn-search-bar:hover,
    #header .nav-ro .search-bar .btn-search-bar:focus {
        display: grid;
        place-items: center;
        width: 27.6px;
        height: 27.6px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: #f4f3f2;
        color: var(--ro-ink);
        box-shadow: none;
    }
    #header .nav-ro .search-bar .btn-search-bar:hover {
        background: #ebe9e7;
    }
    #header .nav-ro .search-bar .search-bar-text {
        display: none;
    }
    #header .nav-ro .search-bar .btn-search-bar::before {
        content: "";
        display: block;
        width: 17px;
        height: 17px;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    /* ---- Acciones: 4 iconos de 36px con 9px de separación ---- */
    #header .nav-ro .nav-icons {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 9px;
        float: none;
        margin: 0;
        padding: 0;
    }
    #header .nav-ro .nav-icons > li.nav-item {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0;
    }
    /* El enlace "Buscar" de móvil, el separador antiguo (.line; la maqueta usa una raya
       antes de favoritos) y el botón de diseñador mientras está oculto no ocupan sitio. */
    #header .nav-ro .nav-icons > li.no-desktop,
    #header .nav-ro .nav-icons > li:has(> a > .line),
    #header .nav-ro .nav-icons > li:has(> #btnEntrar[style*="display: none"]) {
        display: none;
    }
    #header .nav-ro .nav-icons .nobutton,
    #header .nav-ro .nav-icons .liFavoritos > a.nav-link,
    #header .nav-ro .nav-icons .nav-link#lnkCarrito {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0;
        padding: 6px;
        background: none;
        border: 0;
        color: var(--ro-ink);
        transition: color .16s ease;
    }
    #header .nav-ro .nav-icons .nobutton:hover,
    #header .nav-ro .nav-icons .nobutton:focus-visible,
    #header .nav-ro .nav-icons .nav-link:hover,
    #header .nav-ro .nav-icons .nav-link:focus-visible {
        color: var(--ro-brand);
    }
    /* Raya vertical previa a favoritos (maqueta). */
    #header .nav-ro .nav-icons .liFavoritos {
        margin-left: 6.3px;
    }
    #header .nav-ro .nav-icons .liFavoritos::before {
        content: '';
        position: absolute;
        left: -6.3px;
        top: 7.2px;
        bottom: 7.2px;
        width: 1px;
        background: var(--ro-line);
    }
    /* Contadores de favoritos/carrito: insignia naranja de la maqueta. El círculo mide 17px (15px interiores, impares)
       para que la cifra de 5px de ancho y 9px de alto quede a un número entero de píxeles de cada borde: con 16px
       (14 interiores) quedaba a medio píxel, y la cifra se veía desplazada hacia la izquierda y hacia arriba. */
    #header .nav-ro .nav-icons .wrapper-fav-counter {
        position: absolute;
        top: 3px;
        right: 3px;
        z-index: 2;
        display: grid;
        box-sizing: border-box;
        width: auto;
        min-width: 17px;
        height: 17px;
        margin: 0;
        padding: 0 3px;
        place-items: center;
        border: 1px solid #fff;
        border-radius: 999px;
        background: #f5a000;
        color: #fff;
        pointer-events: none;
    }
    #header .nav-ro .nav-icons .wrapper-fav-counter .counter-num {
        position: static;
        font: 700 9px/1 Arial, sans-serif;
        color: #fff;
        /* Las cifras de Arial quedan por encima del centro de la caja de texto: se bajan 1px (medido a 1:1) */
        transform: translateY(1px);
    }

    /* ---- Botón MENÚ: a la izquierda del logo, misma altura que el buscador, rojo de marca con texto blanco ---- */
    #header .header-brand-group .btnMenuPcCollapse {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        height: 35.64px;
        margin: 0;
        padding: 0 14px;
        background: var(--ro-brand);
        border: 1px solid var(--ro-brand) !important;
        border-radius: 8px;
        box-shadow: none;
        color: #fff;
        font-family: 'DM Sans', Arial, sans-serif;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        text-transform: none;
        transition: border-color .16s ease, background-color .16s ease, color .16s ease;
    }
    #header .header-brand-group .btnMenuPcCollapse:hover,
    #header .header-brand-group .btnMenuPcCollapse:focus-visible,
    #header .header-brand-group .btnMenuPcCollapse[aria-expanded="true"] {
        background: #b71c2e;
        border-color: #b71c2e !important;
        color: #fff;
    }
    /* ro.css pone fondo blanco al botón en :focus/:active; se queda rojo hasta que el ratón o el menú abierto lo oscurezcan */
    #header .header-brand-group .btnMenuPcCollapse:focus:not(:focus-visible):not(:hover):not([aria-expanded="true"]),
    #header .header-brand-group .btnMenuPcCollapse:active {
        background: var(--ro-brand);
        border-color: var(--ro-brand) !important;
        color: #fff;
    }
    #header .header-brand-group .btnMenuPcCollapse:focus-visible {
        outline: 2px solid var(--ro-ink);
        outline-offset: 2px;
    }
    #header .header-brand-group .original-menu-label {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 0;
    }
    #header .header-brand-group .original-menu-label svg {
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
    }
}
@media (min-width: 993px) and (max-width: 1199px) {
    #header .nav-ro {
        column-gap: 16px;
    }
    #header .header-brand-group {
        gap: 10px;
    }
    #header .header-brand-group #lnkLogo .logo,
    #header .header-brand-group #lnkLogo .logo-regalo {
        width: 105px;
        height: 38px;
    }
    #header .nav-ro .nav-icons {
        gap: 4px;
    }
}

/* ===== Móvil/tablet (<=992px): fila compacta de 46px, como .header-main de la maqueta ===== */
@media (max-width: 992px) {
    #header .header-brand-group .btnMenuPcCollapse {
        display: none;
    }
    #header > header {
        background: #f7f4f1;
        border-bottom: 1px solid var(--ro-line);
        box-shadow: 0 5px 18px rgba(28, 24, 26, .10);
    }
    #header > header > .container:has(> .nav-ro) {
        padding-left: 7px;
        padding-right: 7px;
    }
    #header .nav-ro {
        min-height: 46px;
        padding: 0;
        align-items: center;
    }
    /* Botón de menú: 33x36, rojo de marca con las rayas blancas (igual que el botón MENÚ de PC). Las rayas son un SVG en
       lugar de los PNG heredados (nav_open/nav_close, grises); con el menú abierto pasan a un aspa blanca. */
    #header .nav-ro .navbar-toggler.menu-trigger {
        flex: 0 1 auto;
        width: 34px;
        min-width: 33px;
        height: 36px;
        margin: 0;
        padding: 6px 3px;
        border: 0;
        border-radius: 8px;
        background-color: var(--ro-brand);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px 20px;
        color: #fff;
    }
    #header .nav-ro .navbar-toggler.menu-trigger.collapsed {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
    }
    #header .nav-ro .navbar-toggler.menu-trigger:not(.collapsed) {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    }
    #header .nav-ro .navbar-toggler.menu-trigger:active {
        background-color: #b71c2e;
    }
    /* Logo de 91px que se encoge en pantallas estrechas igual que en la maqueta
       (flex-shrink), con el alto proporcional; el buscador toma el resto. */
    #header .nav-ro #lnkLogo {
        flex: 0 1 auto;
        min-width: 0;
        margin: 0 0 0 7px;
        padding: 0;
    }
    #header .nav-ro #lnkLogo .logo,
    #header .nav-ro #lnkLogo .logo-regalo {
        display: block;
        width: 91px;
        max-width: 100%;
        height: auto;
        max-height: none;
        margin: 0;
    }
    #header .nav-ro .search-bar {
        flex: 1 1 240px;
        min-width: 0;
        margin: 0 0 0 5px;
    }
    #header .nav-ro .nav-icons {
        gap: 0;
        margin: 0;
    }
    #header .nav-ro .nav-icons > li.nav-item {
        position: relative;
        display: flex;
        flex: 0 1 34px;
        align-items: center;
        min-width: 30px;
        padding: 0;
    }
    #header .nav-ro .nav-icons {
        flex: 0 1 auto;
        min-width: min-content;
    }
    /* En móvil solo favoritos y carrito (como la maqueta): fuera correo, teléfono,
       separadores, el enlace "Buscar" antiguo y el botón de diseñador oculto. */
    #header .nav-ro .nav-icons > li.no-mobile,
    #header .nav-ro .nav-icons > li#search-btn,
    #header .nav-ro .nav-icons > li#search-btn + li,
    #header .nav-ro .nav-icons > li:has(> #btnEntrar[style*="display: none"]) {
        display: none;
    }
    #header .nav-ro .nav-icons .liFavoritos > a.nav-link,
    #header .nav-ro .nav-icons .nav-link#lnkCarrito {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        height: 36px;
        margin: 0;
        padding: 6px;
        color: var(--ro-ink);
    }
    #header .nav-ro .nav-icons .wrapper-fav-counter {
        position: absolute;
        top: 4px;
        right: 4px;
        z-index: 2;
        display: grid;
        box-sizing: border-box;
        width: auto;
        min-width: 17px;
        height: 17px;
        margin: 0;
        padding: 0 3px;
        place-items: center;
        border: 1px solid #fff;
        border-radius: 999px;
        background: #f5a000;
        pointer-events: none;
    }
    #header .nav-ro .nav-icons .wrapper-fav-counter .counter-num {
        position: static;
        font: 700 9px/1 Arial, sans-serif;
        color: #fff;
        /* Las cifras de Arial quedan por encima del centro de la caja de texto: se bajan 1px (medido a 1:1) */
        transform: translateY(1px);
    }
}
@media (max-width: 380px) {
    #header .nav-ro .search-bar {
        margin-left: 3px;
    }
}
@media (max-width: 360px) {
    #header .nav-ro .nav-icons > li.nav-item {
        flex: 0 0 30px;
    }
    #header .nav-ro .navbar-toggler.menu-trigger {
        flex: 0 0 30px;
        width: 30px;
        padding: 4px;
    }
    #header .nav-ro #lnkLogo .logo,
    #header .nav-ro #lnkLogo .logo-regalo {
        width: 90px;
    }
}
/* Desde ~400px de ancho la maqueta no encoge el logo ni los botones: 91px y 34px. */
@media (min-width: 400px) and (max-width: 992px) {
    #header .nav-ro .navbar-toggler.menu-trigger,
    #header .nav-ro .nav-icons > li.nav-item {
        flex: 0 0 34px;
    }
    #header .nav-ro #lnkLogo {
        flex-shrink: 0;
    }
}

/* Icono heredado de una categoria del menu sin icono propio (Menu.Icono: clase de fuente de iconos, p. ej.
   "fas fa-coffee"). Misma caja de 19px y color que los SVG de .menu-category-icon. */
body .menu-category-icon.menu-category-icon--legacy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    font-size: 16px;
    line-height: 1;
    color: #786777;
    /* Son glifos rellenos (Font Awesome, a veces convertidos a <svg> por su JS): no heredan el trazo de los
       iconos de línea del menú. */
    fill: currentColor;
    stroke: none;
}

/* Móvil y tablet táctiles: Safari de iPhone/iPad amplía la página al enfocar un campo con letra menor de 16px. Como la
   tienda ya permite ampliar con los dedos, estos campos se quedan en 16px para que enfocar no mueva ni amplíe nada. */
@media (hover: none) and (pointer: coarse) {
    #header .nav-ro .search-bar #txtBuscando1,
    #header .nav-ro .search-bar #txtBuscando1:focus {
        font-size: 16px;
    }
}