/* SupMenu — texto grande (XL) solo móvil.
   Escala relativa: no fija tamaños (eso pisaba los del tema y podía achicar
   títulos), multiplica la base y da un extra al contenido de las tarjetas. */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.text-xl-toggle {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    z-index: 5;
}

.text-xl-toggle .text-xl-icon {
    display: block;
    width: 1.28em;
    height: 1.28em;
    pointer-events: none;
    /* currentColor: hereda el color del botón (.lang-btn); activo = blanco del tema */
    stroke: currentColor;
}

.text-xl-toggle .text-xl-icon--aa {
    stroke: none;
    overflow: visible;
    /* Más cerca del ES/EN de las banderas que la lupa (1.28em). */
    width: 1.72em;
    height: 1.72em;
    /* Misma familia que ES/EN (inherit → Nexa, CarmenSans, etc. según el tema). */
    font-family: inherit;
}

.text-xl-toggle .text-xl-icon--aa text {
    font-family: inherit;
}

.floating-btn.text-xl-float-btn {
    background: var(--accent-color, #c73b1a);
    color: #fff;
}

.floating-btn.text-xl-float-btn.active {
    box-shadow: 0 0 0 2px #fff, 0 2px 10px rgba(0,0,0,0.25);
}

/* Desktop ancho: sin modo XL. iPhone apaisado (~930px) sí lo muestra. */
@media (min-width: 1025px) {
    .text-xl-toggle {
        display: none !important;
    }

    .lang-selector:has(> .text-xl-toggle):not(:has(> .lang-btn:not(.text-xl-toggle))) {
        display: none;
    }
}

@media (max-width: 1024px) {
    html.menu-text-xl {
        font-size: 18px !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* 1) Base: crece todo lo dimensionado en em (títulos de categoría y de
       sección, botonera, badges, drawer…) manteniendo la jerarquía del tema.
       Va en body, no en html: los px/rem de barras y flotantes no se mueven. */
    html.menu-text-xl body {
        font-size: 118% !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* 2) Extra en el contenido de las tarjetas: nombre, descripción y precio
       son lo que más importa leer. Al aplicarlo al contenedor, cada tema
       conserva sus proporciones internas. */
    html.menu-text-xl .product-card,
    html.menu-text-xl .featured-product-card,
    html.menu-text-xl .super-featured-card,
    html.menu-text-xl .super-featured-card-especial,
    html.menu-text-xl .generic-promo-card,
    html.menu-text-xl .generic-promo-in-category,
    html.menu-text-xl .featured-inline-item {
        font-size: 1.2em;
    }

    /* 3) Antidesborde: con texto grande, nombre y precio ya no entran en una
       línea (el precio se cortaba fuera de la tarjeta). */
    html.menu-text-xl .product-name-row,
    html.menu-text-xl .featured-product-name-row,
    html.menu-text-xl .super-featured-name-row,
    html.menu-text-xl .inline-icons {
        flex-wrap: wrap !important;
    }

    html.menu-text-xl .product-card > * {
        min-width: 0;
    }

    /* Los badges no se encogen y algunos temas les fijan alto de 1 línea:
       con texto grande se salían de la tarjeta o pisaban el precio. */
    html.menu-text-xl .inline-icons {
        min-width: 0 !important;
        max-width: 100%;
        height: auto !important;
        flex-shrink: 1 !important;
        transform: none !important;
    }

    html.menu-text-xl .price-container,
    html.menu-text-xl .product-name,
    html.menu-text-xl .super-featured-name,
    html.menu-text-xl .featured-product-name {
        min-width: 0 !important;
        overflow-wrap: anywhere;
    }

    html.menu-text-xl .multi-price {
        white-space: normal !important;
    }

    /* 4) Botonera: que crezca la tipografía sin deformar el bloque */
    html.menu-text-xl .category-button {
        padding-top: 0.55em !important;
        padding-bottom: 0.55em !important;
    }

    html.menu-text-xl .category-button .btn-icon,
    html.menu-text-xl .category-button .btn-icon img,
    html.menu-text-xl .category-button .btn-icon-img {
        max-height: 1.35em;
    }
}