/**
 *  @author    Rekire <info@rekire.com>
 *  @copyright Rekire
 *  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

/* ---------------------------------------------------------------------------
 * 1. Ajustes base del menú
 * ------------------------------------------------------------------------ */

.mm-blocker {
    position: fixed !important;
}

/* Convivencia con las cabeceras fijas del theme.

   mmenu saca el menú con z-index 2 y su bloqueador con 1, unos números
   pensados para una página que no apila nada por encima. Cualquier theme con
   cabecera pegada arriba los supera: hummingbird, el oficial de PrestaShop 9,
   deja la suya en 1021, se pinta ENCIMA del menú y le tapa el logo, el botón
   de cerrar y el buscador. Aquí se sube el menú por delante de ella.

   El número sale de una variable para que una tienda con algo todavía más
   alto lo cambie desde Avanzado > CSS personalizado con un
   `:root { --rkr-menu-z: 5000; }`, sin tener que pelearse con la
   especificidad.

   Solo se tocan las cuatro posiciones de mmenu que se superponen a la página
   —el módulo ofrece dos de ellas, izquierda y derecha—. En «left» y «right» a
   secas, que mmenu tiene y el módulo no ofrece, el menú va DEBAJO a propósito
   —la página se aparta para descubrirlo— y subirlo lo dejaría a la vista con
   el menú cerrado. */
.mm-wrapper .mm-menu--position-left-front,
.mm-wrapper .mm-menu--position-right-front,
.mm-wrapper .mm-menu--position-top,
.mm-wrapper .mm-menu--position-bottom {
    z-index: var(--rkr-menu-z, 1100);
}

/* La página no se mueve en las posiciones que ofrece el módulo, y no
   necesita el `position:relative; z-index:1` que mmenu le pone a
   `.mm-slideout`. Ese z-index crea un contexto de apilamiento que encierra
   cualquier ventana Bootstrap que viva dentro de la página (el aviso de
   «añadido al carrito», el zoom de la ficha): su fondo oscuro cuelga de
   <body> con 1050 y quedaba ENCIMA de la ventana y de su botón de cerrar.
   Con el menú al frente lo que tapa la página es el propio menú (1100), así
   que el z-index sobra. `:has()` lo acota a esas dos posiciones; un navegador
   sin `:has()` se queda como estaba. */
body:has(> .mm-menu--position-left-front, > .mm-menu--position-right-front) .mm-page.mm-slideout {
    z-index: auto;
}

.mm-wrapper.mm-wrapper--position-left-front .mm-wrapper__blocker,
.mm-wrapper.mm-wrapper--position-right-front .mm-wrapper__blocker,
.mm-wrapper.mm-wrapper--position-top .mm-wrapper__blocker,
.mm-wrapper.mm-wrapper--position-bottom .mm-wrapper__blocker {
    z-index: calc(var(--rkr-menu-z, 1100) - 1);
}

/* Especificidad alta y medidas cerradas: algunos themes aplican estilos de
   carga diferida a todo <img> (fondo a rayas y ancho al 100 %) y deformaban
   el icono. */
.rkr-menu-scope .own-custom-icon,
.own-custom-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    object-fit: contain;
    background: none;
    border: 0;
    vertical-align: middle;
}

/* SVG incrustado: hereda el color del texto del menú. */
.rkr-menu-scope .own-custom-icon--inline svg,
.own-custom-icon--inline svg {
    display: block;
    width: 20px;
    height: 20px;
    color: inherit;
    fill: currentColor;
}

.rkr-menu-scope .own-custom-icon--inline svg [fill="none"],
.own-custom-icon--inline svg [fill="none"] {
    fill: none;
}

.mm-listview .rkr_menu-label {
    margin-left: 4px;
}

.mm-listview .empty-icon {
    min-width: 24px;
    display: inline-flex;
}

/* Colores configurables.
   OJO: aquí había un ciclo. Se definía --rkr-menu-color a partir de
   --mm-color-text y, a la vez, --mm-color-text a partir de --rkr-menu-color.
   CSS invalida las dos variables cuando se referencian en círculo, así que
   --mm-color-text quedaba sin valor y el texto del menú acababa heredando el
   color de la página. Con fondo claro colaba; con el tema oscuro, el texto
   seguía siendo oscuro y no se leía.
   El color propio se aplica ahora en los elementos, con el del tema como
   alternativa: sin configurar nada, manda el tema. */
.mm-menu.rkr-menu-scope,
.rkr-menu-scope .mm-panel,
.rkr-menu-scope .mm-listitem {
    color: var(--rkr-menu-color, var(--mm-color-text));
}

.rkr-menu-scope .mm-listitem__text:hover,
.rkr-menu-scope .mm-listitem__btn:hover,
.rkr-menu-scope .mm-listitem__text:focus-visible {
    color: var(--rkr-menu-hover, var(--mm-color-text));
}

/* La línea vertical de los elementos con submenú.
   mmenu la dibuja como border-left de .mm-listitem__btn, al que le fija
   height: var(--mm-listitem-size) (50 px). Si el theme usa otra altura de
   línea, la fila mide más de 50 px y el borde se queda corto: parece
   descuadrado arriba y abajo. Dejando que el botón se estire, la línea
   cubre la fila entera sea cual sea la tipografía del theme. */
.rkr-menu-scope .mm-listitem__btn:not(.mm-listitem__text) {
    height: auto;
    min-height: var(--mm-listitem-size, 50px);
    align-self: stretch;
}

/* El panel de mmenu ya tiene su propio scroll (.mm-panel { overflow-y: auto }).
   No se le añade ninguno más: la lista y los bloques fluyen seguidos y todo
   se desplaza junto, sin un scroll anidado dentro de otro. */

/* ---------------------------------------------------------------------------
 * 2. Contenedor de bloques
 * ------------------------------------------------------------------------ */

.rkr-menu-extra[hidden] {
    display: none !important;
}

.rkr-menu-extra {
    font-size: 14px;
    line-height: 1.35;
    color: var(--mm-color-text);
}

.rkr-menu-extra a {
    color: inherit;
    text-decoration: none;
}

.rkr-menu-extra a:hover .rkr-contact-row__value,
.rkr-menu-extra .rkr-links a:hover span {
    color: var(--rkr-menu-hover, var(--mm-color-text));
}

.rkr-icon {
    flex: 0 0 auto;
    color: currentColor;
}

/* ---------------------------------------------------------------------------
 * 3. Bloque de confianza (USP)
 * ------------------------------------------------------------------------ */

.rkr-usp {
    list-style: none;
    margin: 0;
    padding: 12px 20px;
    background: var(--mm-color-background-highlight);
    border-top: 1px solid var(--mm-color-border);
}

.rkr-usp__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 13px;
}

.rkr-usp__item .rkr-icon {
    color: var(--rkr-menu-hover, var(--mm-color-text));
}

/* ---------------------------------------------------------------------------
 * 4. Cabecera de bloque
 * ------------------------------------------------------------------------ */

.rkr-block {
    border-top: 1px solid var(--mm-color-border);
}

.rkr-block__title {
    margin: 0;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    background: var(--rkr-block-bg, var(--mm-color-background-highlight));
    /* Antes tiraba de --mm-color-text directamente, así que si configurabas un
       color de texto propio los enlaces lo cogían y los títulos no: de ahí que
       las cabeceras de bloque contrastasen mal. */
    color: var(--rkr-block-fg, var(--rkr-menu-color, var(--mm-color-text)));
}

/* ---------------------------------------------------------------------------
 * 5. Enlaces de mi cuenta
 * ------------------------------------------------------------------------ */

.rkr-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rkr-links li + li a {
    border-top: 1px solid var(--mm-color-border);
}

/* El color se fija aquí explícitamente y con especificidad alta. Heredarlo del
   panel dependía de que ninguna regla del theme se colase por delante, y en
   algún theme los enlaces de los bloques salían más apagados que el resto
   del menú aunque el color configurado fuese blanco. */
.rkr-menu-scope .rkr-menu-extra a,
.rkr-menu-scope .rkr-menu-extra a:link,
.rkr-menu-scope .rkr-menu-extra a:visited,
.rkr-menu-scope .rkr-menu-top a,
.rkr-menu-scope .rkr-menu-top a:link,
.rkr-menu-scope .rkr-menu-top a:visited {
    color: var(--rkr-menu-color, var(--mm-color-text));
}

.rkr-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    min-height: 44px;
}

.rkr-account-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 14px 20px;
}

.rkr-account-cta .rkr-btn {
    flex: 1 1 140px;
    justify-content: center;
    text-align: center;
}

/* ---------------------------------------------------------------------------
 * 6. Botones
 * ------------------------------------------------------------------------ */

.rkr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    transition: opacity .15s ease-in-out;
}

.rkr-btn:hover {
    opacity: .88;
}

.rkr-btn {
    border-radius: var(--rkr-cta-radius, 6px);
    border: 1px solid transparent;
}

/* Antes era background: var(--rkr-menu-hover) sin alternativa. Si nadie había
   puesto color hover, la variable no existía, la declaración era inválida y el
   botón quedaba transparente con texto blanco: invisible. */
.rkr-menu-scope a.rkr-btn--primary,
.rkr-menu-scope a.rkr-btn--primary:link,
.rkr-menu-scope a.rkr-btn--primary:visited,
.rkr-btn--primary {
    background: var(--rkr-cta1-bg, var(--rkr-menu-hover, #77a632));
    border-color: var(--rkr-cta1-bd, var(--rkr-cta1-bg, var(--rkr-menu-hover, #77a632)));
    color: var(--rkr-cta1-fg, #fff);
}

.rkr-menu-scope a.rkr-btn--ghost,
.rkr-menu-scope a.rkr-btn--ghost:link,
.rkr-menu-scope a.rkr-btn--ghost:visited,
.rkr-btn--ghost {
    background: var(--rkr-cta2-bg, transparent);
    border-color: var(--rkr-cta2-bd, currentColor);
    color: var(--rkr-cta2-fg, var(--rkr-menu-color, var(--mm-color-text, inherit)));
}

.rkr-btn--whatsapp {
    margin: 4px 20px 16px;
    background: #25d366;
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
 * 7. Filas de contacto
 * ------------------------------------------------------------------------ */

.rkr-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    min-height: 44px;
}

.rkr-contact-row + .rkr-contact-row {
    border-top: 1px solid var(--mm-color-border);
}

.rkr-contact-row .rkr-icon {
    margin-top: 2px;
}

.rkr-contact-row__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* No con --mm-color-text-dimmed: en el tema claro de mmenu es negro al 30 %,
   #B3B3B3 sobre blanco (2,1:1), y a 12 px no se lee. Al 70 % del color del
   texto queda en torno a 6:1 sobre claro y sobre oscuro. */
.rkr-contact-row__label {
    font-size: 12px;
    color: var(--mm-color-text);
    opacity: .7;
}

.rkr-contact-row__value {
    font-weight: 700;
    word-break: break-word;
}

.rkr-contact-row__hint {
    font-size: 12px;
    color: var(--mm-color-text-dimmed);
}

/* ---------------------------------------------------------------------------
 * 8. Redes sociales
 * ------------------------------------------------------------------------ */

.rkr-social {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 14px 20px;
}

.rkr-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--mm-color-border);
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.rkr-social a:hover,
.rkr-social a:focus-visible {
    background: var(--rkr-menu-hover, var(--mm-color-text));
    border-color: var(--rkr-menu-hover, var(--mm-color-text));
    color: #fff;
}

/* ---------------------------------------------------------------------------
 * 9. Opiniones
 * ------------------------------------------------------------------------ */

.rkr-reviews {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
}

.rkr-reviews__text {
    font-size: 13px;
    color: var(--mm-color-text-dimmed);
}

.rkr-stars {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 16px;
    flex: 0 0 auto;
    background: rgba(128, 128, 128, .35);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 16'%3E%3Cpath d='M9 0l2.2 4.6 5 .7-3.6 3.5.9 5L9 11.4 4.5 13.8l.9-5L1.8 5.3l5-.7z'/%3E%3Cpath d='M27 0l2.2 4.6 5 .7-3.6 3.5.9 5L27 11.4l-4.5 2.4.9-5-3.6-3.5 5-.7z'/%3E%3Cpath d='M45 0l2.2 4.6 5 .7-3.6 3.5.9 5L45 11.4l-4.5 2.4.9-5-3.6-3.5 5-.7z'/%3E%3Cpath d='M63 0l2.2 4.6 5 .7-3.6 3.5.9 5L63 11.4l-4.5 2.4.9-5-3.6-3.5 5-.7z'/%3E%3Cpath d='M81 0l2.2 4.6 5 .7-3.6 3.5.9 5L81 11.4l-4.5 2.4.9-5-3.6-3.5 5-.7z'/%3E%3C/svg%3E") no-repeat 0 0;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 16'%3E%3Cpath d='M9 0l2.2 4.6 5 .7-3.6 3.5.9 5L9 11.4 4.5 13.8l.9-5L1.8 5.3l5-.7z'/%3E%3Cpath d='M27 0l2.2 4.6 5 .7-3.6 3.5.9 5L27 11.4l-4.5 2.4.9-5-3.6-3.5 5-.7z'/%3E%3Cpath d='M45 0l2.2 4.6 5 .7-3.6 3.5.9 5L45 11.4l-4.5 2.4.9-5-3.6-3.5 5-.7z'/%3E%3Cpath d='M63 0l2.2 4.6 5 .7-3.6 3.5.9 5L63 11.4l-4.5 2.4.9-5-3.6-3.5 5-.7z'/%3E%3Cpath d='M81 0l2.2 4.6 5 .7-3.6 3.5.9 5L81 11.4l-4.5 2.4.9-5-3.6-3.5 5-.7z'/%3E%3C/svg%3E") no-repeat 0 0;
}

.rkr-stars__on {
    position: absolute;
    inset: 0 auto 0 0;
    background: #ffb400;
}

/* ---------------------------------------------------------------------------
 * 10. Bloque HTML libre
 * ------------------------------------------------------------------------ */

.rkr-block--html,
.menu-contact-footer {
    padding: 14px 20px;
    font-size: 13px;
}

.menu-contact-footer p {
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.menu-contact-footer p:last-child {
    margin-bottom: 0;
}

.menu-contact-footer a {
    text-decoration: none;
    transition: color .2s;
}

.menu-contact-footer a:hover {
    color: var(--rkr-menu-hover, var(--mm-color-text));
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * 11. Accesibilidad
 * ------------------------------------------------------------------------ */

.rkr-menu-extra a:focus-visible {
    outline: 2px solid var(--rkr-menu-hover, var(--mm-color-focusring, currentColor));
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .rkr-btn,
    .rkr-social a {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Botones extra
   --------------------------------------------------------------------------- */

.rkr-menu-top,
.rkr-buttons {
    display: block;
}

.rkr-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 20px;
}

.rkr-buttons--top {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mm-color-border, rgba(127, 127, 127, .25));
}

.rkr-buttons--bottom {
    padding-top: 6px;
}

.rkr-menu-scope a.rkr-btn-extra,
.rkr-menu-scope a.rkr-btn-extra:link,
.rkr-menu-scope a.rkr-btn-extra:visited,
.rkr-btn-extra {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--rkr-btn-radius, 6px);
    background: var(--rkr-btn-bg, var(--rkr-menu-hover, #77a632));
    color: var(--rkr-btn-fg, #fff);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: filter .15s ease, transform .1s ease;
}

.rkr-menu-scope a.rkr-btn-extra:hover,
.rkr-menu-scope a.rkr-btn-extra:focus,
.rkr-btn-extra:hover,
.rkr-btn-extra:focus {
    background: var(--rkr-btn-bg-hover, var(--rkr-btn-bg, var(--rkr-menu-hover, #77a632)));
    color: var(--rkr-btn-fg-hover, var(--rkr-btn-fg, #fff));
    text-decoration: none;
}

/* Sin color de hover propio se aclara el de fondo, para que el botón responda igual. */
.rkr-btn-extra--autohover:hover,
.rkr-btn-extra--autohover:focus {
    filter: brightness(1.08);
}

.rkr-btn-extra:active {
    transform: translateY(1px);
}

.rkr-btn-extra:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Sin color elegido hereda el estilo del menú, en versión contorneada. */
.rkr-menu-scope a.rkr-btn-extra--default,
.rkr-menu-scope a.rkr-btn-extra--default:link,
.rkr-menu-scope a.rkr-btn-extra--default:visited,
.rkr-btn-extra--default {
    background: transparent;
    border-color: currentColor;
    color: var(--rkr-menu-color, var(--mm-color-text, inherit));
}

.rkr-menu-scope a.rkr-btn-extra--default:hover,
.rkr-menu-scope a.rkr-btn-extra--default:focus,
.rkr-btn-extra--default:hover,
.rkr-btn-extra--default:focus {
    background: var(--rkr-menu-hover, rgba(127, 127, 127, .12));
    border-color: var(--rkr-menu-hover, currentColor);
    color: var(--rkr-menu-color, var(--mm-color-text, inherit));
    filter: none;
}

.rkr-btn-extra__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

.rkr-btn-extra__icon svg,
.rkr-btn-extra__img {
    display: block;
    width: 20px;
    height: 20px;
}

.rkr-btn-extra__img {
    object-fit: contain;
}

.rkr-btn-extra__label {
    display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
    .rkr-btn-extra {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Cabecera del menú (logo y/o nombre de la tienda)
   --------------------------------------------------------------------------- */

.rkr-menu-top[hidden] {
    display: none !important;
}

/* El contenedor no debe tener transform ni overflow propios: crearían un
   contexto de apilamiento y la cabecera dejaría de quedarse fija. */
.rkr-menu-top {
    display: block;
    overflow: visible;
}

.rkr-header[hidden] {
    display: none !important;
}

.rkr-header {
    display: block;
    padding: 16px 20px;
    background: var(--rkr-header-bg, var(--mm-color-background, #fff));
    color: var(--rkr-header-fg, var(--mm-color-text));
    border-bottom: 1px solid var(--mm-color-border, rgba(127, 127, 127, .25));
    transition: padding .2s ease;
}

/* Fija dentro del panel, que es quien tiene el scroll. Sustituye a la barra
   de título de mmenu, que repetía el nombre de la tienda justo debajo. */
.rkr-header--sticky {
    position: sticky;
    top: 0;
    z-index: 4;
    overflow-anchor: none;
}

.rkr-header--compact {
    padding-top: 8px;
    padding-bottom: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.rkr-header--compact .rkr-header__logo {
    max-height: var(--rkr-header-logo-h-min, 26px);
}

.rkr-header--compact .rkr-header__text {
    font-size: 14px;
}

.rkr-menu-scope a.rkr-header__link,
.rkr-menu-scope a.rkr-header__link:link,
.rkr-menu-scope a.rkr-header__link:visited,
.rkr-header__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.rkr-header:not(:has(.rkr-header__link)) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.rkr-header__logo {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: 60%;
    height: auto;
    max-height: var(--rkr-header-logo-h, 40px);
    object-fit: contain;
    transition: max-height .2s ease;
    /* Capa propia: evita el repintado sucio del logo mientras encoge. */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.rkr-header__text {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    transition: font-size .2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .rkr-header,
    .rkr-header__logo,
    .rkr-header__text {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Diseños predefinidos
   Cada uno redefine la paleta de mmenu, así que afecta a todo el menú.
   --------------------------------------------------------------------------- */

.rkr-style--rekire {
    --mm-color-background: #ffffff;
    --mm-color-background-highlight: #f4f8ef;
    --mm-color-background-emphasis: #eef4e5;
    --mm-color-border: #dfe7d4;
    --mm-color-text: #22301a;
    --mm-color-text-dimmed: #6d7d61;
    --mm-color-focusring: #77a632;
    --rkr-menu-hover: #77a632;
}

.rkr-style--midnight {
    --mm-color-background: #1b2433;
    --mm-color-background-highlight: #232e40;
    --mm-color-background-emphasis: #2c3850;
    --mm-color-border: #33415a;
    --mm-color-text: #eef2f8;
    --mm-color-text-dimmed: #9aa8bf;
    --mm-color-focusring: #6ea8fe;
    --rkr-menu-hover: #6ea8fe;
}

.rkr-style--soft {
    --mm-color-background: #ffffff;
    --mm-color-background-highlight: #fafafa;
    --mm-color-background-emphasis: #f2f2f2;
    --mm-color-border: #ededed;
    --mm-color-text: #2b2b2b;
    --mm-color-text-dimmed: #8d8d8d;
    --mm-color-focusring: #2b2b2b;
    --rkr-menu-hover: #555555;
}

.rkr-style--soft .mm-listitem:after {
    left: 20px;
    right: 20px;
}

.rkr-style--contrast {
    --mm-color-background: #ffffff;
    --mm-color-background-highlight: #000000;
    --mm-color-background-emphasis: #000000;
    --mm-color-border: #000000;
    --mm-color-text: #000000;
    --mm-color-text-dimmed: #000000;
    --mm-color-focusring: #0033cc;
    --rkr-menu-hover: #0033cc;
}

.rkr-style--contrast .mm-listitem__text,
.rkr-style--contrast .rkr-block__title {
    font-weight: 700;
}

.rkr-style--warm {
    --mm-color-background: #fdf8f2;
    --mm-color-background-highlight: #f7ede1;
    --mm-color-background-emphasis: #f1e2d1;
    --mm-color-border: #e8d8c4;
    --mm-color-text: #3d2b1f;
    --mm-color-text-dimmed: #8a7360;
    --mm-color-focusring: #c1663b;
    --rkr-menu-hover: #c1663b;
}

/* ---------------------------------------------------------------------------
   Submenús en columnas (opcional)
   El panel abierto se coloca a la derecha y su padre inmediato queda a la
   izquierda, a la vista. Los abuelos se ocultan: siempre dos columnas.
   --------------------------------------------------------------------------- */

/* Sin submenú abierto el menú es el de siempre: un solo panel a todo el ancho. */
.mm-menu--cols .mm-panel {
    box-sizing: border-box;
}

.mm-menu--cols-split .mm-panel {
    width: 50%;
}

.mm-menu--cols-split .mm-panel.rkr-col--left {
    transform: translate3d(0, 0, 0);
    z-index: 1;
    /* mmenu deja los paneles padre en overflow hidden: aquí sí se puede scrollear. */
    overflow-y: auto;
}

.mm-menu--cols-split .mm-panel.rkr-col--right {
    transform: translate3d(100%, 0, 0);
    z-index: 2;
    /* La línea divisoria va en la columna derecha, no como borde de cada panel:
       así cae siempre justo en el límite entre las dos y a toda su altura. */
    border-left: 1px solid var(--mm-color-border, rgba(127, 127, 127, .25));
}

/* Cualquier otro panel (abuelos) fuera de la vista. */
.mm-menu--cols-split .mm-panel--parent:not(.rkr-col--left) {
    transform: translate3d(-100%, 0, 0);
    visibility: hidden;
}

/* En la columna izquierda la línea vertical del botón «>» sobra: ya está la
   divisoria de la columna a un palmo, y las dos juntas se leen como un
   descuadre. Se quita y la rama abierta se marca con la fila entera. */
.mm-menu--cols-split .rkr-col--left .mm-listitem__btn:not(.mm-listitem__text) {
    border-left: 0;
}

.mm-menu--cols-split .rkr-col--left .mm-listitem--opened,
.mm-menu--cols-split .rkr-col--left .mm-listitem--selected {
    background: var(--mm-color-background-emphasis, rgba(127, 127, 127, .12));
}

.mm-menu--cols-split .rkr-col--left .mm-listitem--opened > .mm-listitem__text {
    font-weight: 600;
}

/* El botón de la rama abierta hereda el fondo de la fila, no uno propio. */
.mm-menu--cols-split .rkr-col--left .mm-listitem--opened > .mm-listitem__btn {
    background: transparent;
}

/* Con dos columnas a la vez hacen falta textos más compactos para que quepan.
   Solo cuando están las dos: sin submenú abierto el menú se ve como siempre. */
@media (max-width: 640px) {
    .mm-menu--cols-split .mm-listitem__text,
    .mm-menu--cols-split .mm-listitem__btn {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 13px;
        line-height: 1.3;
    }

    .mm-menu--cols-split .rkr-header,
    .mm-menu--cols-split .rkr-buttons {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ---------------------------------------------------------------------------
   Submenús desplegables en línea (acordeón)
   mmenu lo trae de serie con slidingSubmenus: false. Es la opción buena en
   móvil: da la misma ventaja que las columnas (ver dónde estás y saltar de
   rama sin volver atrás) sin gastar ancho, así que los nombres no se recortan.
   --------------------------------------------------------------------------- */

.mm-listitem--vertical > .mm-panel {
    /* Guía de indentación para que se lea el anidamiento. */
    border-left: 2px solid var(--mm-color-border, rgba(127, 127, 127, .25));
    margin-left: 20px;
    padding-left: 12px;
    /* mmenu le deja a cada .mm-panel overflow-y: auto y overscroll-behavior:
       contain, también al submenú desplegado, que no desplaza nada propio.
       Con contain el gesto que empieza encima de un submenú abierto no llega
       al panel principal: en móvil el menú «se atasca» y lo de abajo no se
       alcanza. Con auto el desplazamiento pasa al panel que sí tiene scroll. */
    overscroll-behavior: auto;
}

.mm-listitem--vertical > .mm-panel > .mm-navbar {
    display: none;
}

/* La flecha gira al abrir, para que se vea el estado. */
.rkr-menu--accordion .mm-listitem--vertical > .mm-listitem__btn:after,
.mm-menu .mm-listitem--vertical > .mm-listitem__btn:after {
    transition: transform .2s ease;
}

.mm-listitem--vertical.mm-listitem--opened > .mm-listitem__btn:after {
    transform: rotate(315deg);
}

.mm-listitem--vertical.mm-listitem--opened > .mm-listitem__text {
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Nombres largos en modo columnas
   Con menos ancho disponible, mejor dos líneas que puntos suspensivos.
   --------------------------------------------------------------------------- */

.mm-menu--cols-split .mm-listitem__text {
    padding-left: 14px;
    padding-right: 10px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
    /* Como máximo dos líneas: a partir de ahí sí se recorta. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mm-menu--cols-split .mm-listitem:after {
    inset-inline-start: 14px;
}

.mm-menu--cols-split .mm-btn {
    width: 38px;
}

.mm-menu--cols-split .mm-listitem__btn:not(.mm-listitem__text) {
    padding-inline-end: 38px;
}

.mm-menu--cols-split .mm-listitem__btn:after {
    right: 14px;
}


/* ---------------------------------------------------------------------------
   Barra superior oculta en el primer panel
   La barra compartida del addon navbars vive fuera de los paneles, así que se
   oculta con una clase que el JS pone y quita según el panel abierto: en los
   submenús debe seguir estando, porque ahí va la flecha de volver.
   --------------------------------------------------------------------------- */

.mm-menu.rkr-menu--nobar > .mm-navbars--top,
.mm-menu.rkr-menu--nobar .mm-navbars--top {
    display: none;
}

/* ---------------------------------------------------------------------------
   Página actual marcada en el menú
   --------------------------------------------------------------------------- */

.rkr-menu-scope .mm-listitem--selected > .mm-listitem__text {
    background: var(--mm-color-background-emphasis, rgba(127, 127, 127, .12));
    font-weight: 600;
}

/* Barra fina en el borde de inicio para que se localice de un vistazo. */
.rkr-menu-scope .mm-listitem--selected > .mm-listitem__text::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--rkr-menu-hover, var(--mm-color-focusring, currentColor));
}

.rkr-menu-scope .mm-listitem--selected > .mm-listitem__text {
    position: relative;
}

/* Aviso mientras se pide una rama diferida. */
.rkr-lazy-notice {
    padding: 14px 20px;
    color: var(--mm-color-text-dimmed, currentColor);
    font-style: italic;
    list-style: none;
}

/* La rama que no ha podido cargarse. No se deja el panel en blanco: eso no se
   distingue de una sección vacía, y el visitante no sabe que le falta algo. */
.rkr-lazy-error {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
    padding: 14px 20px;
}

.rkr-lazy-error span {
    color: var(--mm-color-text-dimmed, currentColor);
}

.rkr-lazy-error a {
    color: var(--rkr-menu-hover, var(--mm-color-text, currentColor));
    font-weight: 600;
    text-decoration: underline;
}

/* La fila de una marca se reparte: el nombre a la izquierda y el logo pegado a
   la derecha. Hace falta que la propia fila sea flexible —mmenu la deja en
   bloque— o el margen automatico del logo no empuja nada. */
.rkr_menu-type_AUTO_MAN > .mm-listitem__text,
.rkr_menu-type_AUTO_MAN > a,
.rkr_menu-type_AUTO_MAN > span {
    align-items: center;
    display: flex;
    gap: 10px;
}

.rkr-brand-logo--derecha {
    margin-left: auto;
}

/* Un nombre largo no puede empujar el logo fuera de la fila: se recorta el
   nombre, que es lo que se puede volver a leer pasando el raton. */
.rkr_menu-type_AUTO_MAN .rkr_menu-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Listas largas: indice A-Z y columnas

   Una lista de trescientas entradas no se recorre, se busca. La fila de letras
   se queda pegada arriba del panel mientras se desplaza, que es lo unico que
   la hace util: si se fuera con el desplazamiento habria que volver arriba
   para cambiar de letra.
   --------------------------------------------------------------------------- */

.rkr-az {
    background: var(--mm-color-background, #fff);
    border-bottom: 1px solid var(--mm-color-border, rgba(0, 0, 0, .12));
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 8px 10px;
    position: sticky;
    top: 0;
    z-index: 3;
}

.rkr-az__letra {
    background: transparent;
    border: 0;
    border-radius: 3px;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    min-width: 20px;
    padding: 5px 4px;
    text-align: center;
}

.rkr-az__letra:hover,
.rkr-az__letra:focus-visible {
    background: var(--mm-color-background-emphasis, rgba(0, 0, 0, .06));
    color: var(--rkr-menu-hover, inherit);
}

/* Las columnas solo cuando el menu se ha ensanchado para ellas: en un menu
   estrecho, tres columnas dejan los nombres partidos en pedazos. El
   JavaScript pone esa clase al abrir el panel, y la quita si no cabe. */
.rkr-lista-cols {
    columns: 1;
}

.rkr-menu--grouped-open .rkr-lista-cols {
    column-gap: 0;
    columns: var(--rkr-list-cols, 1);
}

/* Una entrada partida entre dos columnas es ilegible, y con los separadores de
   mmenu ademas queda una raya suelta al final de la columna. */
.rkr-lista-cols > .mm-listitem {
    break-inside: avoid;
}

/* La salida de una lista cortada: se lee como lo que es, un «y hay mas». */
.rkr_menu-type_AUTO_MAN_ALL > .mm-listitem__text,
.rkr_menu-type_AUTO_MAN_ALL > a {
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Panel agrupado en columnas
   Las columnas se reparten con la maquetación multicolumna del navegador: los
   grupos saltan solos a la siguiente cuando la anterior se llena, así que un
   grupo largo no obliga a desplazarse, se continúa al lado.
   --------------------------------------------------------------------------- */

.mm-menu.rkr-menu--grouped-open {
    --mm-min-size: var(--rkr-grouped-width, 900px);
    --mm-size: var(--rkr-grouped-width, 900px);
    --mm-max-size: var(--rkr-grouped-width, 900px);
}

.rkr-grouped {
    padding: 18px 20px;
    list-style: none;
}

.rkr-grouped__cols {
    columns: var(--rkr-grouped-cols, 4) 190px;
    column-gap: 28px;
}

.rkr-grouped__group {
    /* Un grupo no se parte entre dos columnas: se pasa entero. */
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 18px;
}

.rkr-menu-scope a.rkr-grouped__title,
.rkr-menu-scope a.rkr-grouped__title:link,
.rkr-menu-scope a.rkr-grouped__title:visited,
.rkr-grouped__title {
    display: block;
    margin-bottom: 4px;
    color: var(--rkr-menu-hover, var(--mm-color-text));
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.rkr-menu-scope a.rkr-grouped__link,
.rkr-menu-scope a.rkr-grouped__link:link,
.rkr-menu-scope a.rkr-grouped__link:visited,
.rkr-grouped__link {
    display: block;
    padding: 3px 0;
    color: var(--rkr-menu-color, var(--mm-color-text));
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
}

.rkr-menu-scope a.rkr-grouped__link:hover,
.rkr-menu-scope a.rkr-grouped__title:hover {
    text-decoration: underline;
}

/* Sin ancho para las columnas se cae a una sola: mejor eso que recortar. */
@media (max-width: 900px) {
    .rkr-grouped__cols {
        columns: 1;
    }
}

/* Logo de marca en el menú. El ALTO va cerrado —por lo mismo que los iconos:
   algunos themes estilan todo <img> con placeholders de carga diferida— pero
   el ancho no: casi todos los logos de marca son apaisados y dentro de un
   cuadrado de 28 se quedaban en una raya de 28x6. Con el ancho libre y un
   tope, se leen. Las dos medidas salen de los ajustes. */
.rkr-menu-scope .rkr-brand-logo,
.rkr-brand-logo {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: var(--rkr-brand-logo-w, 84px);
    height: var(--rkr-brand-logo-h, 22px);
    max-height: var(--rkr-brand-logo-h, 22px);
    object-fit: contain;
    background: none;
    border-radius: 3px;
    vertical-align: middle;
}

/* ===========================================================================
   Barra horizontal
   Las entradas de primer nivel del menú, repetidas junto al botón.

   Ninguna regla de aquí lleva un valor escrito a fuego: todo sale de las
   variables que calcula el módulo con los ajustes del comerciante, y cada una
   trae su valor de reserva por si la hoja se sirve sin ellos (una caché vieja,
   un theme que se coma el <style>). Quien quiera ir más lejos redefine la
   variable en su CSS personalizado y no tiene que pelearse con selectores.
   =========================================================================== */

.rkr-bar {
    --rkr-bar-height: 52px;
    --rkr-bar-gap: 6px;
    --rkr-bar-pad: 14px;
    --rkr-bar-radius: 4px;
    --rkr-bar-accent-h: 2px;
    --rkr-bar-fs: 15px;
    --rkr-bar-ls: 0px;
    --rkr-bar-fw: 500;
    --rkr-bar-tt: none;
    --rkr-bar-maxw: 1200px;
    --rkr-bar-justify: flex-start;

    /* Sin color elegido, la barra se apoya en el theme: fondo transparente y
       el color de texto que herede. Es lo que hace que quede integrada en
       cualquier tienda sin tocar un solo ajuste. */
    --rkr-bar-bg: transparent;
    --rkr-bar-fg: currentColor;
    --rkr-bar-hover-fg: var(--rkr-bar-accent, currentColor);
    --rkr-bar-hover-bg: transparent;
    --rkr-bar-accent: currentColor;
    --rkr-bar-border: transparent;
    --rkr-bar-hl-bg: #77a632;
    --rkr-bar-hl-fg: #ffffff;
    --rkr-bar-badge-bg: #e63946;
    --rkr-bar-badge-fg: #ffffff;
    --rkr-bar-badge-fs: 10px;
    --rkr-bar-badge-radius: 10px;

    background: var(--rkr-bar-bg);
    border-bottom: 1px solid var(--rkr-bar-border);
    color: var(--rkr-bar-fg);
    width: 100%;
}

/* Cuando el theme pinta el hook dentro de una fila flexible (hummingbird en
   displayTop: logo, buscador y lo que cuelgue del hook, todo en la misma
   .row), la barra ocupa el ancho entero y, en su orden natural, mandaría el
   buscador a otra línea. Al final de la fila, logo y buscador se quedan donde
   el theme los puso y la barra tiene su propia línea debajo. */
.row > .rkr-bar {
    order: 99;
}

/* Recién instalado, sin configurar: solo el botón. No ocupa una fila
   propia; se queda en la del logo, como un icono más de la cabecera. */
.rkr-bar--solo-boton,
.row > .rkr-bar--solo-boton {
    flex: 0 0 auto;
    order: 0;
    width: auto;
}

.rkr-bar--sticky {
    position: sticky;
    top: 0;
    /* Por debajo del menú lateral, que tiene que poder taparla al abrirse. */
    z-index: calc(var(--rkr-menu-z, 1100) - 2);
}

.rkr-bar__inner {
    align-items: stretch;
    display: flex;
    gap: var(--rkr-bar-gap);
    justify-content: var(--rkr-bar-justify);
    min-height: var(--rkr-bar-height);
    width: 100%;
}

.rkr-bar--boxed .rkr-bar__inner {
    margin: 0 auto;
    max-width: var(--rkr-bar-maxw);
}

.rkr-bar__list {
    align-items: center;
    column-gap: var(--rkr-bar-gap);
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--rkr-bar-justify);
    list-style: none;
    margin: 0;
    padding: 0;
    /* Entre filas hace falta mas hueco que entre entradas: con el mismo, dos
       filas de texto quedan pegadas y la barra parece un bloque. */
    row-gap: calc(var(--rkr-bar-gap) + 6px);
}

/* Repartidas a todo lo ancho: la lista tiene que ocupar el hueco, o el
   reparto se haría solo entre el botón y el bloque de entradas. */
.rkr-bar__list {
    flex: 1 1 auto;
}

.rkr-bar__item {
    display: flex;
    margin: 0;
    padding: 0;
}

/* Cuando no caben de ancho: una sola fila que se desliza.

   Hace falta porque los hooks de cabecera de muchos themes no son una fila
   entera sino una COLUMNA — en el theme clásico de PrestaShop el más ancho
   deja 920 px y el más estrecho 259—, y ahí una barra que envuelve se
   convierte en una torre de siete filas. */
.rkr-bar--scroll .rkr-bar__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* El deslizamiento se para en cada entrada: en una barra corta, media
       entrada cortada al final parece un fallo de maquetación. */
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.rkr-bar--scroll .rkr-bar__item {
    scroll-snap-align: start;
}

.rkr-bar--scroll .rkr-bar__list::-webkit-scrollbar {
    height: 4px;
}

.rkr-bar--scroll .rkr-bar__list::-webkit-scrollbar-thumb {
    background: var(--rkr-bar-border);
    border-radius: 2px;
}

/* El botón no se encoge nunca: es la salida al menú completo y tiene que
   seguir ahí aunque las entradas ocupen todo lo demás. */
.rkr-bar--scroll .rkr-bar__burger {
    flex: 0 0 auto;
}

.rkr-bar__link {
    align-items: center;
    background: transparent;
    border-radius: var(--rkr-bar-radius);
    color: inherit;
    display: inline-flex;
    font-size: var(--rkr-bar-fs);
    font-weight: var(--rkr-bar-fw);
    gap: 8px;
    letter-spacing: var(--rkr-bar-ls);
    line-height: 1.2;
    padding: 6px var(--rkr-bar-pad);
    position: relative;
    text-decoration: none;
    text-transform: var(--rkr-bar-tt);
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
    white-space: nowrap;
}

.rkr-bar__link:hover,
.rkr-bar__link:focus-visible {
    color: var(--rkr-bar-hover-fg);
    text-decoration: none;
}

.rkr-bar__link:focus-visible {
    outline: 2px solid var(--rkr-bar-accent);
    outline-offset: -2px;
}

.rkr-bar__icon {
    flex: 0 0 auto;
    font-size: 1.15em;
    height: 1.15em;
    width: 1.15em;
}

.rkr-bar__icon--svg svg {
    display: block;
    height: 100%;
    width: 100%;
}

/* La flecha sólo aparece en las entradas con submenú: es lo único que
   distingue a simple vista un enlace directo de un desplegable. */
.rkr-bar__caret {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    flex: 0 0 auto;
    height: .38em;
    margin-top: -.18em;
    opacity: .65;
    transform: rotate(45deg);
    transition: transform .18s ease;
    width: .38em;
}

.rkr-bar__link:hover .rkr-bar__caret {
    opacity: 1;
    transform: rotate(45deg) translate(1px, 1px);
}

/* ---------------------------------------------------------------------------
   Efectos de paso del ratón
   Cada uno es una forma distinta de marcar la entrada activa; se elige uno.
   --------------------------------------------------------------------------- */

/* La linea cuelga de la ETIQUETA, no del enlace.
   El enlace es tan alto como la fila, y la fila cambia de alto segun quepan
   las entradas en una linea o en dos. Colgando la linea del enlace, con dos
   filas acaba cruzando el texto por la mitad: parece un tachado y no un
   subrayado. Colgada de la etiqueta cae siempre justo debajo de las letras,
   que ademas es como se ve en cualquier menu de tienda. */
.rkr-bar--hover-underline .rkr-bar__label,
.rkr-bar--hover-overline .rkr-bar__label {
    position: relative;
}

.rkr-bar--hover-underline .rkr-bar__label::after,
.rkr-bar--hover-overline .rkr-bar__label::after {
    background: var(--rkr-bar-accent);
    content: '';
    height: var(--rkr-bar-accent-h);
    left: 0;
    position: absolute;
    right: 0;
    transform: scaleX(0);
    transition: transform .2s ease;
}

.rkr-bar--hover-underline .rkr-bar__label::after {
    bottom: -.35em;
}

.rkr-bar--hover-overline .rkr-bar__label::after {
    top: -.35em;
}

.rkr-bar--hover-underline .rkr-bar__link:hover .rkr-bar__label::after,
.rkr-bar--hover-underline .rkr-bar__link:focus-visible .rkr-bar__label::after,
.rkr-bar--hover-underline .rkr-bar__item--current .rkr-bar__label::after,
.rkr-bar--hover-overline .rkr-bar__link:hover .rkr-bar__label::after,
.rkr-bar--hover-overline .rkr-bar__link:focus-visible .rkr-bar__label::after,
.rkr-bar--hover-overline .rkr-bar__item--current .rkr-bar__label::after {
    transform: scaleX(1);
}

.rkr-bar--hover-fill .rkr-bar__link:hover,
.rkr-bar--hover-fill .rkr-bar__link:focus-visible,
.rkr-bar--hover-fill .rkr-bar__item--current .rkr-bar__link {
    background: var(--rkr-bar-hover-bg);
}

.rkr-bar--hover-box .rkr-bar__link:hover,
.rkr-bar--hover-box .rkr-bar__link:focus-visible,
.rkr-bar--hover-box .rkr-bar__item--current .rkr-bar__link {
    box-shadow: inset 0 0 0 1px var(--rkr-bar-accent);
}

.rkr-bar__item--current .rkr-bar__link {
    color: var(--rkr-bar-hover-fg);
}

/* ---------------------------------------------------------------------------
   Botón de hamburguesa
   Es marcado propio del módulo: no se toca el del theme. Quien ya tenga el
   suyo apaga éste desde los ajustes.
   --------------------------------------------------------------------------- */

.rkr-bar__burger {
    align-items: center;
    border-radius: var(--rkr-bar-radius);
    color: inherit;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--rkr-bar-fs);
    font-weight: var(--rkr-bar-fw);
    gap: 10px;
    letter-spacing: var(--rkr-bar-ls);
    padding: 0 var(--rkr-bar-pad);
    text-decoration: none;
    text-transform: var(--rkr-bar-tt);
    transition: color .18s ease, background-color .18s ease;
}

.rkr-bar__burger:hover,
.rkr-bar__burger:focus-visible {
    color: var(--rkr-bar-hover-fg);
    text-decoration: none;
}

.rkr-bar__burger-icon {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    width: 20px;
}

.rkr-bar__burger-icon span {
    background: currentColor;
    border-radius: 2px;
    display: block;
    height: 2px;
    transition: transform .2s ease, opacity .2s ease;
    width: 100%;
}

/* Abierto el menú, las tres barras se convierten en un aspa. El estado lo
   marca el propio JS del módulo sobre aria-expanded, que ya mantenía. */
.rkr-bar__burger[aria-expanded="true"] .rkr-bar__burger-icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.rkr-bar__burger[aria-expanded="true"] .rkr-bar__burger-icon span:nth-child(2) {
    opacity: 0;
}

.rkr-bar__burger[aria-expanded="true"] .rkr-bar__burger-icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


/* ---------------------------------------------------------------------------
   La entrada cuya rama está abierta

   Es lo único que dice de dónde viene lo que se está viendo. En columnas la
   izquierda pinta todas las entradas iguales, y entrando desde la barra el
   visitante no ha pulsado nada en el menú: sin esto, sólo el título de arriba
   lo cuenta.

   El color sale de las mismas variables que el resto del menú, así que
   cambiar la paleta lo arrastra; y quien quiera otro lo redefine en su CSS
   personalizado sin pelearse con la especificidad.
   --------------------------------------------------------------------------- */

.rkr-menu-scope {
    --rkr-rama-bg: var(--mm-color-background-emphasis, rgba(0, 0, 0, .06));
    /* El `focusring` de mmenu es azul y no pinta nada en una tienda que no
       lo sea: se cae al color del texto del menú, que casa con cualquier
       paleta. Poniendo «Color al pasar el ratón» manda ese. */
    --rkr-rama-barra: var(--rkr-menu-hover, var(--mm-color-text, currentColor));
    --rkr-rama-barra-ancho: 3px;
}

.rkr-listitem--rama-abierta {
    background: var(--rkr-rama-bg);
    position: relative;
}

/* La barrita va en un ::before del propio <li> y no en un borde: mmenu ya usa
   el ::after de .mm-listitem para el separador entre entradas. */
.rkr-listitem--rama-abierta::before {
    background: var(--rkr-rama-barra);
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    top: 0;
    width: var(--rkr-rama-barra-ancho);
    z-index: 1;
}

.rkr-listitem--rama-abierta > .mm-listitem__text {
    font-weight: 600;
}

/* En acordeón el <li> contiene además el panel desplegado, así que el fondo
   teñiría también a los hijos. Se limita a la fila. */
.rkr-menu--accordion .rkr-listitem--rama-abierta {
    background: transparent;
}

.rkr-menu--accordion .rkr-listitem--rama-abierta > .mm-listitem__text,
.rkr-menu--accordion .rkr-listitem--rama-abierta > .mm-listitem__btn {
    background: var(--rkr-rama-bg);
}

.rkr-menu--accordion .rkr-listitem--rama-abierta::before {
    bottom: auto;
    height: var(--mm-listitem-size, 50px);
}

/* ---------------------------------------------------------------------------
   Grupo apartado a la derecha
   Para lo que no es catálogo —«Tarjetas regalo», «Blog»— y conviene que se
   lea como otra cosa sin sacarlo del menú.
   --------------------------------------------------------------------------- */

.rkr-bar__list--right {
    flex: 0 0 auto;
    /* Empuja este grupo al final: lo que sobra de ancho se lo queda el hueco
       de la izquierda, no las entradas. */
    margin-left: auto;
}

/* Con un solo grupo, el de la izquierda manda y respeta la alineación
   elegida; con los dos, el de la izquierda se queda con el espacio libre. */
.rkr-bar__list--left {
    flex: 1 1 auto;
}

.rkr-bar--con-separador .rkr-bar__list--right {
    border-left: 1px solid var(--rkr-bar-border);
    margin-left: auto;
    padding-left: var(--rkr-bar-gap);
}

/* El separador sólo tiene sentido cuando hay dos grupos: con uno solo dejaría
   una raya suelta al principio de la barra. */
.rkr-bar--con-separador .rkr-bar__list--right:first-child {
    border-left: 0;
    padding-left: 0;
}

/* ---------------------------------------------------------------------------
   Entrada destacada
   Una sola, normalmente: «Chollos», «Rebajas», «Outlet». Si destacan todas,
   no destaca ninguna.
   --------------------------------------------------------------------------- */

.rkr-bar__item--destacada .rkr-bar__link {
    background: var(--rkr-bar-hl-bg);
    color: var(--rkr-bar-hl-fg);
}

.rkr-bar__item--destacada .rkr-bar__link:hover,
.rkr-bar__item--destacada .rkr-bar__link:focus-visible {
    /* Se oscurece o se aclara con un velo en vez de con otro color elegido a
       mano: así funciona igual sobre un destacado claro y sobre uno oscuro,
       sin pedir un ajuste más. */
    background: var(--rkr-bar-hl-bg);
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .12);
    color: var(--rkr-bar-hl-fg);
}

/* El subrayado y el recuadro sobran encima de un fondo de color: la entrada
   ya destaca, y además el acento suele ser el mismo color del fondo. */
.rkr-bar__item--destacada .rkr-bar__label::after {
    display: none;
}

.rkr-bar--hover-box .rkr-bar__item--destacada .rkr-bar__link:hover {
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .12);
}

.rkr-bar__item--destacada .rkr-bar__caret {
    opacity: .85;
}

/* «Solo el color del texto»: la entrada se comporta como las demás —mismo
   efecto al pasar el ratón— pero en su color. Sin fondo y sin el velo, que
   sobre un destacado de fondo blanco dejaba un recuadro gris. */
.rkr-bar--hl-text .rkr-bar__item--destacada .rkr-bar__link,
.rkr-bar--hl-text .rkr-bar__item--destacada .rkr-bar__link:hover,
.rkr-bar--hl-text .rkr-bar__item--destacada .rkr-bar__link:focus-visible {
    --rkr-bar-accent: currentColor;
    background: transparent;
    box-shadow: none;
    color: var(--rkr-bar-hl-fg);
}

.rkr-bar--hl-text .rkr-bar__item--destacada .rkr-bar__link:hover,
.rkr-bar--hl-text .rkr-bar__item--destacada .rkr-bar__link:focus-visible {
    color: color-mix(in srgb, var(--rkr-bar-hl-fg) 82%, #000);
}

.rkr-bar--hl-text .rkr-bar__item--destacada .rkr-bar__label::after {
    display: block;
}

.rkr-bar--hl-text.rkr-bar--hover-fill .rkr-bar__item--destacada .rkr-bar__link:hover,
.rkr-bar--hl-text.rkr-bar--hover-fill .rkr-bar__item--destacada .rkr-bar__link:focus-visible {
    background: var(--rkr-bar-hover-bg);
}

.rkr-bar--hl-text.rkr-bar--hover-box .rkr-bar__item--destacada .rkr-bar__link:hover,
.rkr-bar--hl-text.rkr-bar--hover-box .rkr-bar__item--destacada .rkr-bar__link:focus-visible {
    box-shadow: inset 0 0 0 1px currentColor;
}

/* ---------------------------------------------------------------------------
   Etiquetas de las entradas

   El rótulo corto que se pone a una entrada —«Nuevo», «-20 %», «¡Wow!»— para
   que se distinga sin tener que duplicarla ni sacarla del menú.

   El texto y los colores son de cada entrada; el sitio, el aspecto y el
   movimiento son de la barra entera, para que no acabe pareciendo una feria.
   Los colores propios llegan como variables en el atributo style del propio
   elemento, así que una etiqueta puede ir a contracorriente sin que el módulo
   tenga que escribir una regla por entrada.
   --------------------------------------------------------------------------- */

.rkr-bar__badge {
    align-items: center;
    background: var(--rkr-bar-badge-bg);
    border-radius: var(--rkr-bar-badge-radius);
    color: var(--rkr-bar-badge-fg);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--rkr-bar-badge-fs);
    font-weight: 700;
    /* La barra puede ir en mayúsculas y con las letras separadas; la etiqueta
       es otra cosa y se lee mejor sin heredar eso. */
    letter-spacing: 0;
    line-height: 1;
    padding: .3em .55em;
    text-transform: none;
    white-space: nowrap;
}

/* --- Dónde se coloca --- */

/* Encima, montada sobre el borde superior de la entrada: es la que se ve en
   las tiendas que usan esto para destacar una sección. */
.rkr-bar--badge-above .rkr-bar__badge {
    left: 50%;
    position: absolute;
    top: 0;
    transform: translate(-50%, -62%);
}

/* Con la etiqueta saliéndose por arriba hace falta hueco, o la recorta la
   cabecera del theme. Sólo cuando hay alguna: una barra sin etiquetas no
   tiene por qué cambiar de alto. */
.rkr-bar--con-etiquetas.rkr-bar--badge-above .rkr-bar__inner {
    padding-top: calc(var(--rkr-bar-badge-fs) + 4px);
}

/* Y en la barra que se desplaza, el recorte lo hace el propio contenedor del
   desplazamiento, así que el hueco va ahí dentro. */
/* La etiqueta se sale hacia arriba algo mas de su propio alto (sube un 62 %
   sobre el borde de la entrada), asi que el hueco tiene que ser MAYOR que el
   tamano de letra: con el tamano justo se recortaba un pixel, y un pixel
   recortado en el borde superior se ve. */
.rkr-bar--con-etiquetas.rkr-bar--badge-above.rkr-bar--scroll .rkr-bar__list {
    padding-top: calc(var(--rkr-bar-badge-fs) + 6px);
}

.rkr-bar--badge-corner .rkr-bar__badge {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(38%, -38%);
}

/* Al lado del texto no hace falta nada: el enlace ya es flex y tiene su
   separación. Se deja escrito para que se vea que es una decisión. */
.rkr-bar--badge-inline .rkr-bar__badge {
    position: static;
}

/* --- Aspecto --- */

.rkr-bar__badge--outline {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--rkr-bar-badge-bg);
    color: var(--rkr-bar-badge-bg);
}

/* El fondo tenue necesita mezclar el color con nada, y eso sólo lo sabe hacer
   color-mix. Va dentro de un @supports porque la regla del color TAMBIÉN
   cambia: sin la mezcla, el texto saldría del color del fondo sobre ese mismo
   fondo, o sea invisible. */
@supports (background: color-mix(in srgb, red 20%, transparent)) {
    .rkr-bar__badge--soft {
        background: color-mix(in srgb, var(--rkr-bar-badge-bg) 18%, transparent);
        color: var(--rkr-bar-badge-bg);
    }
}

/* Cinta: un pico a la derecha, como una banderita. */
.rkr-bar__badge--ribbon {
    border-radius: 2px;
    clip-path: polygon(0 0, 100% 0, calc(100% - .42em) 50%, 100% 100%, 0 100%);
    padding-right: .85em;
}

/* Un punto y ya: para señalar una novedad sin escribir nada. El texto sigue
   en el marcado —hace falta para quien navega con lector de pantalla— y se
   esconde con el tamaño de letra, no con display:none, que lo quitaría
   también del lector. */
.rkr-bar__badge--dot {
    border-radius: 50%;
    font-size: 0;
    height: calc(var(--rkr-bar-badge-fs) * .8);
    line-height: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--rkr-bar-badge-fs) * .8);
}

/* --- Movimiento --- */

/* Se anima `scale` y no `transform`: la posición «encima» y la de «esquina»
   ya usan transform para colocarse, y animarlo se la llevaría por delante. */
@media (prefers-reduced-motion: no-preference) {
    .rkr-bar--badge-anim-pulse .rkr-bar__badge {
        animation: rkr-bar-badge-latido 1.9s ease-in-out infinite;
    }

    .rkr-bar--badge-anim-blink .rkr-bar__badge {
        animation: rkr-bar-badge-parpadeo 2.2s ease-in-out infinite;
    }
}

@keyframes rkr-bar-badge-latido {
    0%, 100% {
        scale: 1;
    }

    50% {
        scale: 1.12;
    }
}

@keyframes rkr-bar-badge-parpadeo {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .45;
    }
}

/* Sobre una entrada destacada el fondo de color ya está ocupado, así que la
   etiqueta se despega un poco para que no parezca parte del botón. */
.rkr-bar__item--destacada .rkr-bar__badge {
    box-shadow: 0 0 0 2px var(--rkr-bar-hl-bg);
}

/* ---------------------------------------------------------------------------
   Diseños predefinidos de la barra
   Los mismos nombres que los del menú, para que las dos piezas puedan ir a
   juego eligiendo el mismo en las dos pantallas.
   --------------------------------------------------------------------------- */

.rkr-bar--rekire {
    --rkr-bar-bg: #ffffff;
    --rkr-bar-fg: #22301a;
    --rkr-bar-accent: #77a632;
    --rkr-bar-hover-fg: #77a632;
    --rkr-bar-hover-bg: #f4f8ef;
    --rkr-bar-border: #dfe7d4;
}

.rkr-bar--midnight {
    --rkr-bar-bg: #1b2433;
    --rkr-bar-fg: #eef2f8;
    --rkr-bar-accent: #6ea8fe;
    --rkr-bar-hover-fg: #6ea8fe;
    --rkr-bar-hover-bg: #232e40;
    --rkr-bar-border: #33415a;
}

.rkr-bar--soft {
    --rkr-bar-bg: #ffffff;
    --rkr-bar-fg: #2b2b2b;
    --rkr-bar-accent: #2b2b2b;
    --rkr-bar-hover-fg: #555555;
    --rkr-bar-hover-bg: #fafafa;
    --rkr-bar-border: #ededed;
}

.rkr-bar--contrast {
    --rkr-bar-bg: #ffffff;
    --rkr-bar-fg: #000000;
    --rkr-bar-accent: #0033cc;
    --rkr-bar-hover-fg: #0033cc;
    --rkr-bar-hover-bg: #f0f0f0;
    --rkr-bar-border: #000000;
    --rkr-bar-fw: 700;
}

.rkr-bar--warm {
    --rkr-bar-bg: #fdf8f2;
    --rkr-bar-fg: #3d2b1f;
    --rkr-bar-accent: #c1663b;
    --rkr-bar-hover-fg: #c1663b;
    --rkr-bar-hover-bg: #f7ede1;
    --rkr-bar-border: #e8d8c4;
}

/* «Heredar los colores del menú»: la barra usa las mismas variables que
   pintan el menú lateral, así que cambiar la paleta del menú la arrastra. */
.rkr-bar--inherit {
    --rkr-bar-bg: var(--mm-color-background, transparent);
    --rkr-bar-fg: var(--mm-color-text, currentColor);
    --rkr-bar-accent: var(--rkr-menu-hover, currentColor);
    --rkr-bar-hover-fg: var(--rkr-menu-hover, currentColor);
    --rkr-bar-hover-bg: var(--mm-color-background-highlight, transparent);
    --rkr-bar-border: var(--mm-color-border, transparent);
}

/* Transparente: ni fondo ni borde, la barra desaparece y quedan los enlaces
   sobre la cabecera del theme. */
.rkr-bar--plain {
    --rkr-bar-bg: transparent;
    --rkr-bar-border: transparent;
}

/* Las medidas y colores que el comerciante haya puesto llegan en un <style>
   posterior a esta hoja, así que ganan sin necesidad de !important. */

/* ---------------------------------------------------------------------------
   Etiquetas DENTRO del menú lateral
   ---------------------------------------------------------------------------
   El mismo rótulo que la barra puede llevar en su entrada —«Nuevo», «-20 %»—
   pero pintado en la fila del menú. Se configura una sola vez, por entrada, y
   cada una decide dónde se ve.

   Las variables son propias (`--rkr-menu-badge-*`) y no las de la barra: las
   de la barra las escribe un <style> que sólo sale cuando la barra está
   encendida, así que reutilizarlas dejaría la etiqueta sin fondo ni color en
   una tienda que use el menú sin barra. Los valores por defecto están aquí
   además de en el PHP, para que la hoja se sostenga sola.

   Los aspectos son los cinco de la barra: quien ya conoce uno no tiene que
   aprender otro.
   --------------------------------------------------------------------------- */

.rkr-menu-scope .rkr_menu-badge {
    align-items: center;
    background: var(--rkr-menu-badge-bg, #e63946);
    border-radius: var(--rkr-menu-badge-radius, 10px);
    color: var(--rkr-menu-badge-fg, #fff);
    display: inline-flex;
    /* Que no se encoja: en una fila estrecha el navegador aplastaría antes la
       etiqueta que el nombre, y una etiqueta de dos píxeles no dice nada. */
    flex: 0 0 auto;
    font-size: var(--rkr-menu-badge-fs, 10px);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    margin-left: .5em;
    padding: .3em .55em;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
}

/* --- Dónde se coloca: pegada al nombre, y sólo ahí --- */

/* No hay opción de alinearla a la derecha de la fila, y no es un olvido: el
   borde derecho de una fila del menú es de mmenu. Ahí van su contador de
   hijos y su flecha de submenú, y según la fila los mete en el MISMO enlace
   que el texto. Medido: `.mm-counter` es `position: static` y se coloca
   contando con que su enlace sea un bloque, así que basta con pasar ese
   enlace a flex —que es lo que hacía falta para poder alinear la etiqueta—
   para que el contador salte al principio de la fila, delante del icono.

   Así que la etiqueta se queda en el flujo del texto, detrás del nombre, que
   es donde no le quita el sitio a nada de nadie. */

/* --- Aspecto --- */

.rkr-menu-scope .rkr_menu-badge--outline {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--rkr-menu-badge-bg, #e63946);
    color: var(--rkr-menu-badge-bg, #e63946);
}

/* El fondo tenue mezcla el color con nada, y eso sólo lo sabe hacer
   color-mix. Va dentro de un @supports porque la regla del COLOR también
   cambia: sin la mezcla, el texto saldría del color del fondo sobre ese mismo
   fondo, o sea invisible. */
@supports (background: color-mix(in srgb, red 20%, transparent)) {
    .rkr-menu-scope .rkr_menu-badge--soft {
        background: color-mix(in srgb, var(--rkr-menu-badge-bg, #e63946) 18%, transparent);
        color: var(--rkr-menu-badge-bg, #e63946);
    }
}

.rkr-menu-scope .rkr_menu-badge--ribbon {
    border-radius: 2px;
    clip-path: polygon(0 0, 100% 0, calc(100% - .42em) 50%, 100% 100%, 0 100%);
    padding-right: .85em;
}

/* Un punto y ya. El texto sigue en el marcado —hace falta para quien navega
   con lector de pantalla— y se esconde con el tamaño de letra, no con
   display:none, que lo quitaría también del lector. */
.rkr-menu-scope .rkr_menu-badge--dot {
    border-radius: 50%;
    font-size: 0;
    height: calc(var(--rkr-menu-badge-fs, 10px) * .8);
    line-height: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--rkr-menu-badge-fs, 10px) * .8);
}