/*
|--------------------------------------------------------------------------
| Ordr - Sitio público del negocio
|--------------------------------------------------------------------------
|
| Este archivo pertenece al sitio del restaurante/negocio.
| NO corresponde a la identidad visual del administrador Ordr.
|
| Se comparte entre:
|
| /demo/{token}
| /{tipo}/{slug}
|
*/


/*
|--------------------------------------------------------------------------
| Variables base
|--------------------------------------------------------------------------
*/

:root {
    --site-brand: #808080;

    --site-bg: #ffffff;
    --site-surface: #ffffff;
    --site-surface-soft: #f6f6f6;

    --site-text: #171717;
    --site-text-soft: #666666;

    --site-border: #e7e7e7;

    --site-radius-sm: 10px;
    --site-radius-md: 16px;
    --site-radius-lg: 24px;

    --site-shadow:
        0 10px 30px
        rgb(0 0 0 / 8%);

    --site-max-width: 1120px;

    --site-space-1: 0.5rem;
    --site-space-2: 0.75rem;
    --site-space-3: 1rem;
    --site-space-4: 1.5rem;
    --site-space-5: 2rem;
    --site-space-6: 3rem;
}


/*
|--------------------------------------------------------------------------
| Reset básico
|--------------------------------------------------------------------------
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}


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


body {
    --site-brand-soft:
        color-mix(
            in srgb,
            var(--site-brand) 12%,
            white
        );

    --site-brand-strong:
        color-mix(
            in srgb,
            var(--site-brand) 68%,
            black
        );

    margin: 0;

    background:
        var(--site-bg);

    color:
        var(--site-text);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.5;
}


img {
    display: block;

    max-width: 100%;
}


a {
    color:
        inherit;
}


/*
|--------------------------------------------------------------------------
| Aviso de demo
|--------------------------------------------------------------------------
*/

[data-site-demo-notice] {
    padding:
        0.55rem
        1rem;

    background:
        #171717;

    color:
        #ffffff;

    font-size:
        0.875rem;

    text-align:
        center;
}


/*
|--------------------------------------------------------------------------
| Contenedor principal
|--------------------------------------------------------------------------
*/

[data-public-site] {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

[data-site-hero] {
    position: relative;
}


[data-site-banner] {
    position: relative;

    width: 100%;

    aspect-ratio:
        16 / 7;

    overflow: hidden;

    background:
        var(--site-surface-soft);
}


[data-site-banner-image] {
    width: 100%;
    height: 100%;

    object-fit:
        cover;

    /*
    |--------------------------------------------------------------------------
    | Móvil
    |--------------------------------------------------------------------------
    |
    | Si no existe ajuste móvil específico,
    | site.php ya entrega aquí el focus general.
    |
    */

    object-position:
        var(--site-banner-mobile-focus-x)
        var(--site-banner-mobile-focus-y);
}


/*
|--------------------------------------------------------------------------
| Banner automático
|--------------------------------------------------------------------------
|
| Se utiliza solamente cuando el negocio no tiene
| una imagen personalizada.
|
*/

[data-site-banner-fallback] {
    position:
        relative;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--site-brand) 62%,
                white
            )
            0%,

            var(--site-brand)
            42%,

            color-mix(
                in srgb,
                var(--site-brand) 78%,
                black
            )
            100%
        );

    background-size:
        180% 180%;

    animation:
        site-banner-gradient
        12s ease-in-out
        infinite;
}


/*
|--------------------------------------------------------------------------
| Luz ambiental
|--------------------------------------------------------------------------
*/

[data-site-banner-fallback]::before {
    content:
        "";

    position:
        absolute;

    inset:
        -30%;

    background:
        radial-gradient(
            circle at 30% 35%,
            rgb(255 255 255 / 24%),
            transparent 42%
        );

    animation:
        site-banner-light
        14s ease-in-out
        infinite alternate;
}


/*
|--------------------------------------------------------------------------
| Profundidad suave
|--------------------------------------------------------------------------
*/

[data-site-banner-fallback]::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            rgb(255 255 255 / 4%),
            rgb(0 0 0 / 12%)
        );

    pointer-events:
        none;
}


/*
|--------------------------------------------------------------------------
| Animaciones
|--------------------------------------------------------------------------
*/

@keyframes site-banner-gradient {

    0%,
    100% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }
}


@keyframes site-banner-light {

    0% {
        transform:
            translate3d(
                -4%,
                -2%,
                0
            )
            scale(1);
    }

    100% {
        transform:
            translate3d(
                8%,
                5%,
                0
            )
            scale(1.08);
    }
}


/*
|--------------------------------------------------------------------------
| Identidad del negocio
|--------------------------------------------------------------------------
*/

[data-site-brand] {
    width:
        min(
            calc(100% - 2rem),
            var(--site-max-width)
        );

    margin:
        -2.5rem auto 0;

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        auto 1fr;

    gap:
        var(--site-space-3);

    align-items:
        center;
}


[data-site-logo] {
    width:
        88px;

    height:
        88px;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    border:
        4px solid
        var(--site-bg);

    border-radius:
        50%;

    background:
        var(--site-brand);

    box-shadow:
        var(--site-shadow);
}


[data-site-logo-image] {
    width: 100%;
    height: 100%;

    object-fit:
        cover;
}


[data-site-logo-initials] {
    color:
        #ffffff;

    font-size:
        1.75rem;

    font-weight:
        700;

    letter-spacing:
        0.03em;
}


[data-site-business-info] {
    min-width: 0;

    padding:
        0.75rem
        1rem;

    border:
        1px solid
        rgb(0 0 0 / 6%);

    border-radius:
        var(--site-radius-md);

    background:
        rgb(255 255 255 / 94%);

    box-shadow:
        0 8px 24px
        rgb(0 0 0 / 8%);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


[data-site-business-info] h1 {
    margin:
        0;

    color:
        var(--site-text);

    font-size:
        clamp(
            1.7rem,
            4.5vw,
            2.55rem
        );

    line-height:
        1.08;
}


[data-site-description] {
    margin:
        0.35rem 0 0;

    color:
        var(--site-text-soft);
}


/*
|--------------------------------------------------------------------------
| Redes sociales
|--------------------------------------------------------------------------
*/

[data-site-socials] {
    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        0.65rem;

    margin-top:
        0.9rem;
}


[data-site-social-link] {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    border:
        1px solid
        var(--site-border);

    border-radius:
        999px;

    background:
        var(--site-surface);

    color:
        var(--site-text);

    text-decoration:
        none;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease;
}


[data-site-social-icon] {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        20px;

    height:
        20px;

    line-height:
        1;
}


[data-site-social-icon] svg {
    display:
        block;

    width:
        20px;

    height:
        20px;

    fill:
        currentColor;
}


[data-site-social-link]:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--site-brand);

    background:
        var(--site-brand-soft);

    color:
        var(--site-brand);

    box-shadow:
        0 5px 14px
        rgb(0 0 0 / 6%);
}


[data-site-social-link]:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--site-brand) 35%,
            transparent
        );

    outline-offset:
        3px;
}


/*
|--------------------------------------------------------------------------
| Secciones públicas
|--------------------------------------------------------------------------
*/

[data-site-branch],
[data-site-menu] {
    width:
        min(
            calc(100% - 2rem),
            var(--site-max-width)
        );

    margin:
        var(--site-space-5)
        auto 0;
}


[data-site-branch] > h2,
[data-site-menu] > h2 {
    margin:
        0 0
        var(--site-space-4);

    font-size:
        1.5rem;
}


/*
|--------------------------------------------------------------------------
| Contacto
|--------------------------------------------------------------------------
*/

[data-site-contact] {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        var(--site-space-2);

    margin-bottom:
        var(--site-space-4);
}


[data-site-contact] p {
    margin:
        0;
}


[data-site-contact] a {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        44px;

    padding:
        0.65rem
        1rem;

    border:
        1px solid
        var(--site-border);

    border-radius:
        999px;

    background:
        var(--site-surface);

    text-decoration:
        none;
}

/*
|--------------------------------------------------------------------------
| Acciones de contacto
|--------------------------------------------------------------------------
*/

[data-site-contact] a[data-site-whatsapp] {
    border-color:
        var(--site-brand);

    /*
    |--------------------------------------------------------------------------
    | Fallback
    |--------------------------------------------------------------------------
    |
    | Si el navegador no procesa color-mix(),
    | por lo menos conserva el color principal.
    |
    */

    background-color:
        var(--site-brand);


    /*
    |--------------------------------------------------------------------------
    | Color principal oscurecido
    |--------------------------------------------------------------------------
    |
    | Lo calculamos directamente aquí para evitar
    | depender de otra variable CSS.
    |
    */

    background-color:
        color-mix(
            in srgb,
            var(--site-brand) 68%,
            black
        );

    color:
        #ffffff;

    font-weight:
        700;

    box-shadow:
        0 6px 18px
        color-mix(
            in srgb,
            var(--site-brand) 22%,
            transparent
        );
}


[data-site-phone] {
    border-color:
        color-mix(
            in srgb,
            var(--site-brand) 30%,
            var(--site-border)
        );

    background:
        var(--site-surface);

    color:
        var(--site-text);

    font-weight:
        600;
}


/*
|--------------------------------------------------------------------------
| Interacción
|--------------------------------------------------------------------------
*/

[data-site-whatsapp],
[data-site-phone] {
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease;
}


[data-site-contact] a[data-site-whatsapp]:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--site-brand);

    background-color:
        var(--site-brand);

    box-shadow:
        0 9px 24px
        color-mix(
            in srgb,
            var(--site-brand) 30%,
            transparent
        );
}


[data-site-phone]:hover {
    border-color:
        var(--site-brand);

    background:
        var(--site-brand-soft);
}


[data-site-whatsapp]:focus-visible,
[data-site-phone]:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--site-brand) 35%,
            transparent
        );

    outline-offset:
        3px;
}


/*
|--------------------------------------------------------------------------
| Ubicación
|--------------------------------------------------------------------------
*/

[data-site-location] {
    padding:
        var(--site-space-4);

    border:
        1px solid
        var(--site-border);

    border-radius:
        var(--site-radius-md);

    background:
        var(--site-surface-soft);
}


[data-site-location] p {
    margin:
        0.35rem 0;
}


/*
|--------------------------------------------------------------------------
| Acción de ubicación
|--------------------------------------------------------------------------
*/

[data-site-maps] {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        42px;

    margin-top:
        0.5rem;

    padding:
        0.6rem
        0.9rem;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--site-brand) 35%,
            var(--site-border)
        );

    border-radius:
        999px;

    background:
        var(--site-brand-soft);

    color:
        var(--site-brand-strong);

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        transform 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease;
}


[data-site-maps]:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--site-brand);

    background:
        color-mix(
            in srgb,
            var(--site-brand) 18%,
            white
        );
}


[data-site-maps]:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--site-brand) 35%,
            transparent
        );

    outline-offset:
        3px;
}

/*
|--------------------------------------------------------------------------
| Estado de apertura
|--------------------------------------------------------------------------
*/

[data-site-branch] > h2 {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        0.65rem;
}


[data-site-branch-name] {
    display:
        inline-block;
}


[data-site-open-status] {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.45rem;

    padding:
        0.35rem
        0.7rem;

    border-radius:
        999px;

    font-size:
        0.85rem;

    font-weight:
        700;

    line-height:
        1.2;
}


/*
|--------------------------------------------------------------------------
| Punto indicador
|--------------------------------------------------------------------------
*/

[data-site-open-status]::before {
    content:
        "";

    flex:
        0 0 auto;

    width:
        0.55rem;

    height:
        0.55rem;

    border-radius:
        50%;
}


/*
|--------------------------------------------------------------------------
| Abierto
|--------------------------------------------------------------------------
*/

[data-site-open-status][data-open="1"] {
    background:
        #ecf8ef;

    color:
        #176b2c;
}


[data-site-open-status][data-open="1"]::before {
    background:
        #25a244;
}


/*
|--------------------------------------------------------------------------
| Cerrado
|--------------------------------------------------------------------------
*/

[data-site-open-status][data-open="0"] {
    background:
        #fff0f0;

    color:
        #9f2525;
}


[data-site-open-status][data-open="0"]::before {
    background:
        #d63c3c;
}


/*
|--------------------------------------------------------------------------
| Detalle
|--------------------------------------------------------------------------
*/

[data-site-open-status-detail] {
    color:
        inherit;

    font-size:
        0.8rem;

    font-weight:
        500;

    opacity:
        0.8;
}


/*
|--------------------------------------------------------------------------
| Horarios
|--------------------------------------------------------------------------
*/

[data-site-hours] {
    margin-top:
        var(--site-space-4);
}


[data-site-hours] h3 {
    margin:
        0 0
        var(--site-space-3);
}


[data-site-hours] dl {
    margin:
        0;
}


[data-site-hours-row] {
    display:
        grid;

    grid-template-columns:
        minmax(100px, 1fr)
        auto;

    gap:
        var(--site-space-3);

    padding:
        0.65rem 0;

    border-bottom:
        1px solid
        var(--site-border);
}


[data-site-hours-row] dt {
    font-weight:
        600;
}


[data-site-hours-row] dd {
    margin:
        0;

    text-align:
        right;
}


/*
|--------------------------------------------------------------------------
| Menú
|--------------------------------------------------------------------------
*/

[data-site-menu] {
    padding-bottom:
        var(--site-space-6);
}


[data-site-menu-section] {
    margin-top:
        var(--site-space-5);
}


[data-site-menu-section] > h3 {
    margin:
        0 0
        var(--site-space-3);

    font-size:
        1.35rem;
}


[data-site-products] {
    display:
        grid;

    gap:
        var(--site-space-3);
}

/*
|--------------------------------------------------------------------------
| Personalidad del menú
|--------------------------------------------------------------------------
*/

[data-site-menu] > h2 {
    position:
        relative;

    padding-bottom:
        0.75rem;
}


[data-site-menu] > h2::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        56px;

    height:
        4px;

    border-radius:
        999px;

    background:
        var(--site-brand);
}


[data-site-menu-section] > h3 {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.6rem;

    margin:
        0 0
        var(--site-space-3);

    padding:
        0.35rem
        0.75rem;

    border-radius:
        999px;

    background:
        var(--site-brand-soft);

    color:
        var(--site-brand-strong);
}


[data-site-product] {
    position:
        relative;

    overflow:
        hidden;

    border-left:
        4px solid
        var(--site-brand);
}


[data-site-product-price] {
    color:
        var(--site-brand-strong);

    font-weight:
        800;
}


[data-site-product-image] {
    box-shadow:
        0 4px 14px
        rgb(0 0 0 / 10%);
}

/*
|--------------------------------------------------------------------------
| Producto
|--------------------------------------------------------------------------
*/

[data-site-product] {
    display:
        grid;

    grid-template-columns:
        1fr auto;

    gap:
        var(--site-space-3);

    padding:
        var(--site-space-3);

    border:
        1px solid
        var(--site-border);

    border-left:
        4px solid
        var(--site-brand);

    border-radius:
        var(--site-radius-md);

    background:
        var(--site-surface);
}


[data-site-product-image] {
    grid-column:
        2;

    grid-row:
        1;

    width:
        96px;

    height:
        96px;

    object-fit:
        cover;

    border-radius:
        var(--site-radius-sm);
}


[data-site-product-content] {
    grid-column:
        1;

    grid-row:
        1;
}


[data-site-product-content] h4 {
    margin:
        0;

    font-size:
        1.05rem;
}


[data-site-product-description] {
    margin:
        0.35rem 0 0;

    color:
        var(--site-text-soft);
}


[data-site-product-price] {
    margin:
        0.65rem 0 0;

    font-weight:
        700;
}


[data-site-product-unavailable] {
    display:
        inline-block;

    margin:
        0.5rem 0 0;

    padding:
        0.2rem
        0.6rem;

    border-radius:
        999px;

    background:
        var(--site-surface-soft);

    color:
        var(--site-text-soft);

    font-size:
        0.85rem;
}


/*
|--------------------------------------------------------------------------
| Presentaciones de producto por sección
|--------------------------------------------------------------------------
|
| La sección decide cómo se muestran sus productos:
|
| - lista: tarjeta compacta con fotografía lateral
| - foto_arriba: fotografía protagonista sobre el contenido
|
| El botón + y "Ver detalles" abren el detalle del producto.
| La persistencia de "Mi pedido" se conectará después.
|
*/

[data-site-menu-section],
[data-site-products],
[data-site-product],
[data-site-product-content],
[data-site-product-media] {
    min-width: 0;
}


[data-site-product] {
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}


[data-site-product-media] {
    position: relative;

    overflow: hidden;

    background:
        var(--site-brand-soft);
}


[data-site-product-image],
[data-site-product-image-placeholder] {
    width: 100%;
    height: 100%;

    border-radius: inherit;
}


[data-site-product-image] {
    object-fit: cover;
}


[data-site-product-image-placeholder] {
    display: grid;

    place-items: center;

    background:
        linear-gradient(
            145deg,
            var(--site-brand-soft),
            var(--site-surface-soft)
        );

    color:
        var(--site-brand-strong);

    font-size:
        clamp(1.8rem, 5vw, 3.5rem);

    font-weight: 800;
}


[data-site-product-add] {
    position: absolute;

    right: 0.65rem;
    bottom: 0.65rem;

    display: grid;

    width: 44px;
    height: 44px;

    place-items: center;

    border:
        3px solid
        var(--site-surface);

    border-radius: 999px;

    background:
        var(--site-brand);

    box-shadow:
        0 7px 18px
        rgb(0 0 0 / 16%);

    color: #ffffff;

    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}


[data-site-product-footer] {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--site-space-2);

    margin-top: auto;
}


[data-site-product-footer]
[data-site-product-price] {
    margin: 0;
}


/*
|--------------------------------------------------------------------------
| Precios promocionales
|--------------------------------------------------------------------------
*/

[data-site-product-price],
[data-site-detail-price] {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        baseline;

    gap:
        0.45rem;
}


[data-site-price-regular] {
    color:
        var(--site-text-soft);

    font-weight:
        600;

    text-decoration-thickness:
        2px;
}


[data-site-price-promotional] {
    color:
        var(--site-brand-strong);

    font-weight:
        800;
}


[data-site-product-details-hint] {
    display: none;

    color:
        var(--site-brand-strong);

    font-size: 0.86rem;
    font-weight: 700;

    white-space: nowrap;
}


[data-site-product][data-product-available="0"]
[data-site-product-media] {
    filter: saturate(0.45);
}


/*
|--------------------------------------------------------------------------
| Vista lista
|--------------------------------------------------------------------------
*/

[data-site-menu-section][data-section-view="lista"]
[data-site-product] {
    grid-template-columns:
        minmax(0, 1fr)
        136px;

    align-items: stretch;

    min-height: 136px;

    padding: var(--site-space-3);
}


[data-site-menu-section][data-section-view="lista"]
[data-site-product-media] {
    grid-column: 2;
    grid-row: 1;

    width: 136px;
    height: 136px;

    align-self: center;

    border-radius: var(--site-radius-sm);
}


[data-site-menu-section][data-section-view="lista"]
[data-site-product-content] {
    display: flex;

    grid-column: 1;
    grid-row: 1;

    flex-direction: column;

    min-width: 0;
}


[data-site-menu-section][data-section-view="lista"]
[data-site-product-description] {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


[data-site-menu-section][data-section-view="lista"]
[data-site-product-footer] {
    margin-top: 0.65rem;
}


[data-site-menu-section][data-section-view="lista"]
[data-site-product-footer] {
    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        flex-start;

    gap:
        0.35rem;
}


[data-site-menu-section][data-section-view="lista"]
[data-site-product-details-hint] {
    margin:
        0;
}


/*
|--------------------------------------------------------------------------
| Vista foto arriba
|--------------------------------------------------------------------------
*/

[data-site-menu-section][data-section-view="foto_arriba"]
[data-site-product] {
    display: flex;

    overflow: hidden;

    padding: 0;

    flex-direction: column;

    border-left:
        1px solid
        var(--site-border);

    box-shadow:
        0 6px 18px
        rgb(0 0 0 / 5%);
}


[data-site-menu-section][data-section-view="foto_arriba"]
[data-site-product-media] {
    width: 100%;

    aspect-ratio: 4 / 3;

    border-radius: 0;
}


[data-site-menu-section][data-section-view="foto_arriba"]
[data-site-product-content] {
    display: flex;

    flex: 1;

    flex-direction: column;

    padding: var(--site-space-3);
}


[data-site-menu-section][data-section-view="foto_arriba"]
[data-site-product-content] h4 {
    font-size: 1.08rem;
}


[data-site-menu-section][data-section-view="foto_arriba"]
[data-site-product-description] {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


[data-site-menu-section][data-section-view="foto_arriba"]
[data-site-product-footer] {
    padding-top: 0.75rem;
}


@media (hover: hover) and (pointer: fine) {

    [data-site-product]:hover {
        transform: translateY(-2px);

        border-color:
            color-mix(
                in srgb,
                var(--site-brand) 30%,
                var(--site-border)
            );

        box-shadow:
            0 12px 28px
            rgb(0 0 0 / 8%);
    }
}


@media (min-width: 560px) {

    [data-site-menu-section][data-section-view="foto_arriba"]
    [data-site-products] {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


@media (min-width: 1024px) {

    [data-site-menu-section][data-section-view="foto_arriba"]
    [data-site-products] {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    [data-site-product-details-hint] {
        display: inline-flex;

        align-items: center;

        gap: 0.35rem;
    }


    [data-site-product-details-hint]::after {
        content: "›";

        font-size: 1.15em;
        line-height: 1;
    }
}


/*
|--------------------------------------------------------------------------
| Identidad móvil
|--------------------------------------------------------------------------
*/

@media (max-width: 719px) {

    [data-site-banner] {
        aspect-ratio:
            16 / 6;
    }


    [data-site-brand] {
        grid-template-columns:
            1fr;

        justify-items:
            center;

        align-items:
            center;

        gap:
            var(--site-space-1);

        margin-top:
            -2.2rem;

        text-align:
            center;
    }


    [data-site-logo] {
        position:
            relative;

        z-index:
            2;

        width:
            82px;

        height:
            82px;
    }


    [data-site-business-info] {
        width:
            min(
                100%,
                420px
            );

        min-width:
            0;

        margin:
            0 auto;

        padding:
            0.7rem
            0.9rem;
    }


    [data-site-business-info] h1 {
        font-size:
            clamp(
                1.65rem,
                8vw,
                2.1rem
            );

        text-align:
            center;
    }


    [data-site-description] {
        margin:
            0.3rem auto 0;

        text-align:
            center;
    }


    [data-site-socials] {
        justify-content:
            center;

        gap:
            0.6rem;
    }


    [data-site-social-link] {
        width:
            44px;

        height:
            44px;
    }


    /*
    |--------------------------------------------------------------------------
    | Sucursal móvil
    |--------------------------------------------------------------------------
    */

    [data-site-branch] {
        margin-top:
            var(--site-space-4);
    }


    [data-site-branch] > h2 {
        margin-bottom:
            var(--site-space-3);
    }


    [data-site-contact] {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            var(--site-space-2);

        margin-bottom:
            var(--site-space-4);
    }


    [data-site-contact] p {
        width:
            100%;
    }


    [data-site-contact] a {
        width:
            100%;

        justify-content:
            center;

        min-height:
            52px;

        padding:
            0.75rem
            1rem;
    }


    [data-site-location] {
        padding:
            1.25rem;
    }


    [data-site-maps] {
        width:
            100%;

        min-height:
            48px;
    }


    [data-site-branch] > h2 {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0.6rem;
    }


    [data-site-open-status] {
        width:
            fit-content;
    }


    [data-site-hours] {
        margin-top:
            var(--site-space-5);
    }


    [data-site-menu] > h2 {
        font-size:
            1.55rem;
    }


    [data-site-menu-section] > h3 {
        font-size:
            1.15rem;
    }


    [data-site-product] {
        padding:
            1rem;
    }


    [data-site-menu-section][data-section-view="lista"]
    [data-site-product-image] {
        width:
            100%;

        height:
            100%;
    }
}



/*
|--------------------------------------------------------------------------
| Tablet / escritorio
|--------------------------------------------------------------------------
*/

@media (min-width: 720px) {

    [data-site-banner] {
        aspect-ratio:
            15 / 4;
    }


    [data-site-banner-image] {
        object-position:
            var(--site-banner-focus-x)
            var(--site-banner-focus-y);
    }


    [data-site-brand] {
        margin-top:
            -3.15rem;
    }


    [data-site-logo] {
        width:
            108px;

        height:
            108px;
    }


    [data-site-products] {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/*
|--------------------------------------------------------------------------
| Escritorio amplio
|--------------------------------------------------------------------------
*/

@media (min-width: 1024px) {

    [data-site-brand] {
        gap:
            var(--site-space-3);
    }


    [data-site-branch] {
        display:
            grid;

        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(300px, 0.55fr);

        grid-template-areas:
            "title hours"
            "contact hours"
            "location hours";

        column-gap:
            var(--site-space-5);

        row-gap:
            var(--site-space-3);

        align-items:
            start;
    }


    [data-site-branch] > h2 {
        grid-area:
            title;

        margin:
            0;
    }


    [data-site-contact] {
        grid-area:
            contact;

        margin:
            0;
    }


    [data-site-location] {
        grid-area:
            location;

        align-self:
            start;
    }


    [data-site-hours] {
        grid-area:
            hours;

        margin:
            0;
    }


    [data-site-branch] > h2,
    [data-site-contact] {
        grid-column:
            1 / -1;
    }


    [data-site-location] {
        align-self:
            start;
    }


    [data-site-hours] {
        margin-top:
            0;
    }
}


/*
|--------------------------------------------------------------------------
| Preferencias de movimiento
|--------------------------------------------------------------------------
*/

@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}


/*
|--------------------------------------------------------------------------
| Interacción del producto
|--------------------------------------------------------------------------
*/

[data-site-product-media-open] {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: inherit;

    background: transparent;

    color: inherit;

    cursor: pointer;
}


[data-site-product-media-open]
[data-site-product-image],
[data-site-product-media-open]
[data-site-product-image-placeholder] {
    width: 100%;
    height: 100%;
}


[data-site-product-add] {
    cursor: pointer;
}


[data-site-product-add]:focus-visible,
[data-site-product-media-open]:focus-visible,
[data-site-product-details-hint]:focus-visible,
[data-site-product-dialog] button:focus-visible,
[data-site-product-dialog] input:focus-visible,
[data-site-product-dialog] textarea:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--site-brand) 55%,
            white
        );

    outline-offset: 2px;
}


[data-site-product-details-hint] {
    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    font: inherit;

    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| Corrección foto arriba en móvil
|--------------------------------------------------------------------------
|
| La regla móvil de la miniatura pertenece solamente a la vista Lista.
| En Foto arriba la imagen siempre llena el ancho del área protagonista.
|
*/

[data-site-menu-section][data-section-view="foto_arriba"]
[data-site-product-image] {
    width: 100%;
    height: 100%;
}


/*
|--------------------------------------------------------------------------
| Overlay / detalle del producto
|--------------------------------------------------------------------------
*/

html.site-product-dialog-open {
    overflow: hidden;
}


[data-site-product-dialog] {
    width:
        min(
            760px,
            calc(100% - 2rem)
        );

    max-width: 760px;
    max-height:
        min(
            920px,
            calc(100dvh - 2rem)
        );

    margin: auto;
    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: 26px;

    background:
        var(--site-surface);

    color:
        var(--site-text);

    box-shadow:
        0 28px 80px
        rgb(0 0 0 / 28%);
}


[data-site-product-dialog][open] {
    display: block;
}


[data-site-product-dialog]::backdrop {
    background:
        rgb(0 0 0 / 58%);

    backdrop-filter:
        blur(5px);
}


[data-site-product-dialog-panel] {
    display: grid;

    grid-template-rows:
        minmax(0, 1fr)
        auto;

    max-height:
        min(
            920px,
            calc(100dvh - 2rem)
        );
}


[data-site-product-dialog-scroll] {
    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
}


[data-site-detail-media] {
    position: relative;

    width: 100%;

    aspect-ratio:
        16 / 10;

    overflow: hidden;

    background:
        var(--site-brand-soft);
}


[data-site-detail-image],
[data-site-detail-image-placeholder] {
    width: 100%;
    height: 100%;
}


[data-site-detail-image] {
    object-fit: cover;
}


[data-site-detail-image-placeholder] {
    display: grid;

    place-items: center;

    background:
        linear-gradient(
            145deg,
            var(--site-brand-soft),
            var(--site-surface-soft)
        );

    color:
        var(--site-brand-strong);

    font-size:
        clamp(4rem, 14vw, 7rem);

    font-weight: 800;
}


[data-site-detail-image][hidden],
[data-site-detail-image-placeholder][hidden],
[data-site-detail-description][hidden],
[data-site-detail-unavailable][hidden],
[data-site-detail-modifiers][hidden],
[data-site-detail-instructions][hidden],
[data-site-detail-recommendations][hidden] {
    display: none !important;
}


[data-site-product-dialog-close] {
    position: absolute;

    top: 1rem;
    right: 1rem;

    display: grid;

    width: 46px;
    height: 46px;

    place-items: center;

    margin: 0;
    padding: 0 0 0.15rem;

    border:
        1px solid
        rgb(255 255 255 / 65%);

    border-radius: 999px;

    background:
        rgb(255 255 255 / 94%);

    box-shadow:
        0 8px 24px
        rgb(0 0 0 / 18%);

    color:
        #171717;

    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;
}


[data-site-detail-body] {
    display: grid;

    gap:
        1.35rem;

    padding:
        1.5rem;
}


[data-site-detail-heading] {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap:
        1rem;
}


[data-site-detail-heading] h2 {
    margin: 0;

    font-size:
        clamp(1.7rem, 4vw, 2.25rem);

    line-height: 1.12;
}


[data-site-detail-price] {
    margin:
        0.45rem 0 0;

    color:
        var(--site-brand-strong);

    font-size: 1.2rem;
    font-weight: 800;
}


[data-site-detail-unavailable] {
    flex: none;

    padding:
        0.35rem
        0.7rem;

    border-radius: 999px;

    background:
        var(--site-surface-soft);

    color:
        var(--site-text-soft);

    font-size: 0.85rem;
    font-weight: 700;
}


[data-site-detail-description] {
    margin: -0.4rem 0 0;

    color:
        var(--site-text-soft);

    font-size: 1.02rem;
    line-height: 1.65;
}


[data-site-detail-modifiers] {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 0;
    border-top: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
}

[data-site-detail-modifiers-heading] h3 {
    margin: 0;
    font-size: 1.15rem;
}

[data-site-detail-modifiers-heading] p {
    margin: 0.25rem 0 0;
    color: var(--site-text-soft);
    font-size: 0.9rem;
}

[data-site-detail-modifiers-list] {
    display: grid;
    gap: 0.75rem;
}

[data-site-detail-modifier-group] {
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;

    border:
        1px solid
        var(--site-border);

    border-radius: 14px;

    background:
        var(--site-surface-soft);
}


[data-site-detail-modifier-group][data-modifier-valid="0"] {
    border-color:
        color-mix(
            in srgb,
            #c9362b 42%,
            var(--site-border)
        );
}


[data-site-detail-modifier-group-heading] {
    padding:
        0.85rem
        1rem;

    border-bottom:
        1px solid
        var(--site-border);

    background:
        var(--site-surface);
}


[data-site-detail-modifier-group-heading] > div {
    display: grid;
    gap: 0.15rem;
}


[data-site-detail-modifier-group-heading] strong {
    font-size: 0.95rem;
}


[data-site-detail-modifier-group-heading] small {
    color:
        var(--site-text-soft);

    font-size: 0.78rem;
}


[data-site-detail-modifier-status] {
    min-height: 1.1em;
}


[data-site-detail-modifier-status][data-state="required"],
[data-site-detail-modifier-status][data-state="error"] {
    color: #a52828;

    font-weight: 700;
}


[data-site-detail-modifier-status][data-state="ready"] {
    color:
        var(--site-brand-strong);

    font-weight: 700;
}


[data-site-detail-modifier-options] {
    display: grid;
}


[data-site-detail-modifier-option] {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 0.8rem;

    min-height: 48px;

    padding:
        0.7rem
        1rem;

    cursor: pointer;

    transition:
        background-color 140ms ease;
}


[data-site-detail-modifier-option]
+ [data-site-detail-modifier-option] {
    border-top:
        1px solid
        var(--site-border);
}


[data-site-detail-modifier-option]:has(
    input:checked
) {
    background:
        var(--site-brand-soft);
}


[data-site-detail-modifier-option]:has(
    input:disabled
) {
    cursor: default;
}


[data-site-detail-modifier-option]
input {
    width: 19px;
    height: 19px;

    margin: 0;

    accent-color:
        var(--site-brand);

    cursor: pointer;
}


[data-site-detail-modifier-option]
input:disabled:not(:checked) {
    opacity: 0.35;

    cursor: default;
}


[data-site-detail-modifier-option]
span {
    min-width: 0;

    color:
        var(--site-text);

    font-size: 0.9rem;
}


[data-site-detail-modifier-option]
strong {
    flex: 0 0 auto;

    color:
        var(--site-text-soft);

    font-size: 0.82rem;

    white-space: nowrap;
}


[data-site-detail-quantity] {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        1rem;

    padding:
        1rem 0;

    border-top:
        1px solid
        var(--site-border);

    border-bottom:
        1px solid
        var(--site-border);
}


[data-site-detail-quantity] h3,
[data-site-detail-instructions] h3,
[data-site-detail-recommendations-heading] h3 {
    margin: 0;

    font-size: 1.15rem;
}


[data-site-detail-quantity] p,
[data-site-detail-instructions] > p,
[data-site-detail-recommendations-heading] p {
    margin:
        0.25rem 0 0;

    color:
        var(--site-text-soft);

    font-size: 0.9rem;
}


[data-site-detail-stepper] {
    display: grid;

    grid-template-columns:
        46px
        58px
        46px;

    align-items: stretch;

    overflow: hidden;

    border:
        1px solid
        var(--site-border);

    border-radius: 999px;

    background:
        var(--site-surface-soft);
}


[data-site-detail-stepper] button,
[data-site-detail-stepper] input {
    min-width: 0;
    height: 46px;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(--site-text);

    font: inherit;
    font-weight: 700;

    text-align: center;
}


[data-site-detail-stepper] button {
    font-size: 1.45rem;

    cursor: pointer;
}


[data-site-detail-stepper] button:disabled {
    opacity: 0.35;

    cursor: default;
}


[data-site-detail-stepper] input {
    appearance: textfield;

    font-size: 1rem;
}


[data-site-detail-stepper] input::-webkit-outer-spin-button,
[data-site-detail-stepper] input::-webkit-inner-spin-button {
    margin: 0;

    appearance: none;
}


[data-site-detail-instructions] {
    display: grid;

    gap:
        0.75rem;
}


[data-site-detail-instructions] textarea {
    width: 100%;
    min-height: 112px;

    resize: vertical;

    padding:
        0.9rem
        1rem;

    border:
        1px solid
        var(--site-border);

    border-radius:
        14px;

    background:
        var(--site-surface-soft);

    color:
        var(--site-text);

    font: inherit;
    line-height: 1.5;
}


[data-site-detail-instructions] textarea::placeholder {
    color:
        color-mix(
            in srgb,
            var(--site-text-soft) 74%,
            transparent
        );
}


[data-site-detail-total] {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        1rem;

    padding:
        1rem;

    border-radius:
        14px;

    background:
        var(--site-brand-soft);
}


[data-site-detail-total] span {
    color:
        var(--site-text-soft);

    font-weight: 650;
}


[data-site-detail-total] strong {
    color:
        var(--site-brand-strong);

    font-size: 1.05rem;
}


[data-site-detail-recommendations] {
    display: grid;

    gap:
        1rem;

    padding-top:
        0.25rem;
}


[data-site-detail-recommendations-list] {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        0.8rem;
}


[data-site-detail-recommendation] {
    position: relative;

    display: grid;

    grid-template-columns:
        74px
        minmax(0, 1fr);

    gap:
        0.8rem;

    align-items: center;

    min-width: 0;

    padding:
        0.7rem;

    border:
        1px solid
        var(--site-border);

    border-radius:
        16px;

    background:
        var(--site-surface);

    color:
        var(--site-text);

    font: inherit;
    text-align: left;

    cursor: pointer;
}


[data-site-detail-recommendation-media] {
    display: block;

    width: 74px;
    height: 74px;

    overflow: hidden;

    border-radius: 12px;

    background:
        var(--site-brand-soft);
}


[data-site-detail-recommendation-media] img,
[data-site-detail-recommendation-placeholder] {
    display: block;

    width: 100%;
    height: 100%;
}


[data-site-detail-recommendation-media] img {
    object-fit: cover;
}


[data-site-detail-recommendation-placeholder] {
    display: grid;

    place-items: center;

    color:
        var(--site-brand-strong);

    font-size: 1.5rem;
    font-weight: 800;
}


[data-site-detail-recommendation-copy] {
    display: grid;

    min-width: 0;

    gap:
        0.2rem;

    padding-right:
        1.6rem;
}


[data-site-detail-recommendation-copy] strong {
    overflow: hidden;

    font-size: 0.93rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}


[data-site-detail-recommendation-copy] span {
    color:
        var(--site-brand-strong);

    font-size: 0.86rem;
    font-weight: 750;
}


[data-site-detail-recommendation-plus] {
    position: absolute;

    right: 0.55rem;
    bottom: 0.55rem;

    display: grid;

    width: 28px;
    height: 28px;

    place-items: center;

    border-radius: 999px;

    background:
        var(--site-brand);

    color: #ffffff;

    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
}


[data-site-detail-footer] {
    padding:
        0.9rem
        1.25rem
        calc(0.9rem + env(safe-area-inset-bottom));

    border-top:
        1px solid
        var(--site-border);

    background:
        rgb(255 255 255 / 96%);

    backdrop-filter:
        blur(12px);
}


[data-site-detail-add] {
    width: 100%;
    min-height: 54px;

    padding:
        0.9rem
        1rem;

    border: 0;
    border-radius: 14px;

    background:
        var(--site-brand);

    color: #ffffff;

    font: inherit;
    font-size: 1rem;
    font-weight: 800;
}


[data-site-detail-add][data-pending-order="1"]:disabled {
    opacity: 0.82;
}


[data-site-detail-add]:disabled {
    cursor: default;
}


@media (max-width: 719px) {

    [data-site-product-dialog] {
        width:
            calc(100% - 1rem);

        max-height:
            calc(100dvh - 1rem);

        border-radius:
            22px;
    }


    [data-site-product-dialog-panel] {
        max-height:
            calc(100dvh - 1rem);
    }


    [data-site-detail-media] {
        aspect-ratio:
            4 / 3;
    }


    [data-site-detail-body] {
        gap:
            1.15rem;

        padding:
            1.15rem;
    }


    [data-site-detail-heading] h2 {
        font-size:
            1.65rem;
    }


    [data-site-detail-quantity] {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    [data-site-detail-stepper] {
        width: 100%;

        grid-template-columns:
            1fr
            72px
            1fr;
    }


    [data-site-detail-recommendations-list] {
        grid-template-columns:
            1fr;
    }


    [data-site-detail-footer] {
        padding-inline:
            0.85rem;
    }
}


@media (min-width: 720px) {

    [data-site-detail-body] {
        padding:
            1.65rem
            1.75rem;
    }
}


/*
|--------------------------------------------------------------------------
| Densidad responsive del menú
|--------------------------------------------------------------------------
|
| Foto arriba:
| - móvil: 2 columnas
| - tablet vertical: 3 columnas
| - tablet horizontal: 4 columnas
| - escritorio: 4 columnas
|
| Lista:
| - móvil: 1 columna
| - tablet vertical: 2 columnas
| - tablet horizontal: 3 columnas
| - escritorio: 3 columnas
|
*/

[data-site-menu-section][data-section-view="foto_arriba"]
[data-site-products] {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}


@media (min-width: 720px) and (orientation: portrait) {

    [data-site-menu-section][data-section-view="foto_arriba"]
    [data-site-products] {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}


@media (min-width: 900px) and (orientation: landscape) {

    [data-site-menu-section][data-section-view="foto_arriba"]
    [data-site-products] {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }


    [data-site-menu-section][data-section-view="lista"]
    [data-site-products] {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}


@media (min-width: 1280px) {

    [data-site-menu-section][data-section-view="foto_arriba"]
    [data-site-products] {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }


    [data-site-menu-section][data-section-view="lista"]
    [data-site-products] {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

/*
|--------------------------------------------------------------------------
| Foto arriba compacta en móvil
|--------------------------------------------------------------------------
|
| Con dos productos por fila, la descripción se reserva para el detalle.
| Esto mantiene las tarjetas equilibradas y reduce la altura del menú.
|
*/

@media (max-width: 719px) {

    [data-site-menu-section][data-section-view="foto_arriba"]
    [data-site-product-description] {
        display: none;
    }
}

/*
|--------------------------------------------------------------------------
| Foto arriba: ajuste fino de densidad en móvil
|--------------------------------------------------------------------------
|
| - Menos aire vertical en el bloque de texto.
| - Título limitado a dos líneas con elipsis.
| - Medianil un poco más estrecho para ganar área de fotografía.
|
*/

@media (max-width: 719px) {

    [data-site-menu-section][data-section-view="foto_arriba"]
    [data-site-products] {
        gap: 0.65rem;
    }


    [data-site-menu-section][data-section-view="foto_arriba"]
    [data-site-product-content] {
        padding:
            0.75rem
            0.8rem
            0.7rem;
    }


    [data-site-menu-section][data-section-view="foto_arriba"]
    [data-site-product-content] h4 {
        display: -webkit-box;

        overflow: hidden;

        line-height: 1.28;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }


    [data-site-menu-section][data-section-view="foto_arriba"]
    [data-site-product-footer] {
        padding-top: 0.45rem;
    }
}


/*
|--------------------------------------------------------------------------
| Público · Subpaso 2 · Sucursal y acciones
|--------------------------------------------------------------------------
|
| Compacta la información operativa sin tocar todavía la presentación de
| horarios. WhatsApp mantiene la prioridad, teléfono baja de peso visual y
| ubicación deja de sentirse como una tarjeta pesada.
|
*/

[data-site-branch] {
    margin-top:
        clamp(
            1rem,
            2vw,
            1.5rem
        );
}


[data-site-branch] > h2 {
    gap:
        0.55rem;

    margin-bottom:
        0.75rem;
}


[data-site-branch-name] {
    line-height:
        1.15;
}


[data-site-open-status] {
    padding:
        0.3rem
        0.65rem;
}


[data-site-contact] {
    gap:
        0.55rem;

    margin-bottom:
        0.8rem;
}


[data-site-contact] a {
    min-height:
        40px;

    padding:
        0.55rem
        0.85rem;
}


[data-site-phone] {
    font-size:
        0.9rem;

    font-weight:
        600;

    color:
        var(--site-text-soft);

    box-shadow:
        none;
}


[data-site-location] {
    padding:
        0.85rem
        1rem;

    border-color:
        color-mix(
            in srgb,
            var(--site-border) 78%,
            transparent
        );

    background:
        var(--site-surface);

    box-shadow:
        0 4px 18px
        rgb(15 23 42 / 0.035);
}


[data-site-location] p {
    margin:
        0.2rem 0;
}


[data-site-location] > p:first-child strong {
    font-size:
        0.95rem;
}


[data-site-address],
[data-site-location-instructions] {
    color:
        var(--site-text-soft);

    font-size:
        0.92rem;

    line-height:
        1.45;
}


[data-site-maps] {
    min-height:
        38px;

    margin-top:
        0.4rem;

    padding:
        0.5rem
        0.8rem;

    background:
        transparent;
}


/*
|--------------------------------------------------------------------------
| Móvil
|--------------------------------------------------------------------------
*/

@media (max-width: 719px) {

    [data-site-branch] {
        width:
            min(
                calc(100% - 1.25rem),
                var(--site-max-width)
            );

        margin-top:
            0.8rem;
    }


    [data-site-branch] > h2 {
        flex-direction:
            row;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            0.5rem;

        margin-bottom:
            0.65rem;
    }


    [data-site-branch-name] {
        min-width:
            0;

        font-size:
            1.35rem;
    }


    [data-site-open-status] {
        flex:
            0 1 auto;

        width:
            auto;

        max-width:
            58%;

        font-size:
            0.78rem;
    }


    [data-site-open-status-detail] {
        font-size:
            0.72rem;
    }


    [data-site-contact] {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap:
            0.45rem;

        margin-bottom:
            0.65rem;
    }


    [data-site-contact] p {
        min-width:
            0;
    }


    [data-site-contact] a {
        min-height:
            44px;

        padding:
            0.6rem
            0.75rem;
    }


    [data-site-contact] a[data-site-whatsapp] {
        width:
            100%;
    }


    [data-site-phone] {
        width:
            auto;

        max-width:
            100%;

        white-space:
            nowrap;

        font-size:
            0.82rem;
    }


    [data-site-location] {
        padding:
            0.75rem
            0.85rem;

        border-radius:
            calc(var(--site-radius-md) - 2px);
    }


    [data-site-maps] {
        width:
            auto;

        min-height:
            40px;

        margin-top:
            0.35rem;
    }
}


/*
|--------------------------------------------------------------------------
| Teléfonos muy estrechos
|--------------------------------------------------------------------------
*/

@media (max-width: 380px) {

    [data-site-branch] > h2 {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    [data-site-open-status] {
        max-width:
            100%;
    }


    [data-site-contact] {
        grid-template-columns:
            1fr;
    }


    [data-site-phone] {
        width:
            100%;

        justify-content:
            center;
    }
}


/*
|--------------------------------------------------------------------------
| Tablet y escritorio
|--------------------------------------------------------------------------
*/

@media (min-width: 720px) {

    [data-site-branch] > h2 {
        margin-bottom:
            0.8rem;
    }


    [data-site-contact] {
        margin-bottom:
            0.85rem;
    }


    [data-site-location] {
        padding:
            0.9rem
            1rem;
    }
}


@media (min-width: 1024px) {

    [data-site-branch] {
        row-gap:
            0.7rem;
    }


    [data-site-contact] {
        margin:
            0;
    }


    [data-site-location] {
        min-height:
            0;
    }
}


/*
|--------------------------------------------------------------------------
| Google Reviews dentro de información
|--------------------------------------------------------------------------
*/

[data-site-reviews] {
    margin-top:
        0;
}


[data-site-reviews-shell] {
    width:
        100%;

    margin:
        0;

    padding:
        0.55rem;

    box-sizing:
        border-box;

    border:
        1px solid
        var(--site-border);

    border-radius:
        14px;

    background:
        var(--site-surface-soft);
}


[data-site-reviews-status] {
    margin:
        0;

    padding:
        1rem;

    color:
        var(--site-text-soft);

    text-align:
        center;
}


[data-site-reviews-widget] {
    width:
        100%;

    max-width:
        430px;

    margin:
        0 auto;
}


[data-site-reviews-widget]
gmp-place-details {
    display:
        block;

    width:
        100%;

    height:
        430px;

    margin:
        0;

    border:
        0;

    border-radius:
        12px;

    overflow:
        hidden;

    background-color:
        transparent;

    color-scheme:
        light;

    --gmp-star-rating-color:
        #F9AB00;
}


/*
|--------------------------------------------------------------------------
| Publico - Subpaso 3 - Informacion al final del menu
|--------------------------------------------------------------------------
*/

[data-site-info] {
    width:
        min(
            calc(100% - 2rem),
            var(--site-max-width)
        );

    margin:
        clamp(
            0.75rem,
            2vw,
            1.5rem
        )
        auto 0;

    padding:
        clamp(
            1.25rem,
            3vw,
            2rem
        )
        0
        var(--site-space-6);

    border-top:
        1px solid
        var(--site-border);
}


[data-site-info] > h2 {
    position:
        relative;

    margin:
        0 0
        var(--site-space-4);

    padding-bottom:
        0.75rem;

    font-size:
        clamp(
            1.4rem,
            3vw,
            1.75rem
        );
}


[data-site-info] > h2::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        56px;

    height:
        4px;

    border-radius:
        999px;

    background:
        var(--site-brand);
}


[data-site-info-grid] {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap:
        var(--site-space-4);
}


[data-site-info-card] {
    min-width:
        0;

    padding:
        clamp(
            1rem,
            2.25vw,
            1.35rem
        );

    border:
        1px solid
        var(--site-border);

    border-radius:
        var(--site-radius-lg);

    background:
        var(--site-surface);

    box-shadow:
        0 10px 28px
        rgb(15 23 42 / 0.055);
}


[data-site-info-card-header] {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        var(--site-space-3);

    margin-bottom:
        0.8rem;
}


[data-site-info-eyebrow] {
    margin:
        0 0
        0.2rem;

    color:
        var(--site-brand-strong);

    font-size:
        0.76rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


[data-site-info-card] h3 {
    margin:
        0;

    font-size:
        1.2rem;

    line-height:
        1.2;
}


[data-site-info-address] {
    margin:
        0;

    color:
        var(--site-text);

    font-size:
        0.95rem;

    line-height:
        1.5;
}


[data-site-info-instructions] {
    margin:
        0.45rem 0 0;

    color:
        var(--site-text-soft);

    font-size:
        0.9rem;

    line-height:
        1.5;
}


[data-site-map-frame] {
    width:
        100%;

    margin-top:
        0.9rem;

    overflow:
        hidden;

    aspect-ratio:
        16 / 9;

    border:
        1px solid
        var(--site-border);

    border-radius:
        calc(var(--site-radius-lg) - 4px);

    background:
        var(--site-surface-soft);
}


[data-site-map-frame] iframe {
    display:
        block;

    width:
        100%;

    height:
        100%;

    border:
        0;
}


[data-site-location-card] [data-site-maps] {
    width:
        100%;

    min-height:
        44px;

    margin-top:
        0.85rem;

    border-color:
        color-mix(
            in srgb,
            var(--site-brand) 38%,
            var(--site-border)
        );

    background:
        var(--site-brand-soft);

    color:
        var(--site-brand-strong);
}


[data-site-info] [data-site-hours] {
    grid-area:
        auto;

    margin-top:
        0;
}


[data-site-hours] h3 {
    margin:
        0;
}


[data-site-hours] dl {
    margin:
        0;
}


[data-site-info-status] {
    display:
        inline-flex;

    align-items:
        center;

    flex:
        0 0 auto;

    min-height:
        30px;

    padding:
        0.35rem
        0.65rem;

    border-radius:
        999px;

    font-size:
        0.78rem;

    font-weight:
        800;

    line-height:
        1;
}


[data-site-info-status][data-open="1"] {
    background:
        #ecf8ef;

    color:
        #176b2c;
}


[data-site-info-status][data-open="0"] {
    background:
        #fff0f0;

    color:
        #9f2525;
}


[data-site-info] [data-site-hours-row] {
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        0.8rem;

    padding:
        0.7rem
        0.65rem;

    border-bottom:
        1px solid
        var(--site-border);

    border-radius:
        10px;
}


[data-site-info] [data-site-hours-row]:last-child {
    border-bottom-color:
        transparent;
}


[data-site-info] [data-site-hours-row][data-current-day="1"] {
    border-bottom-color:
        transparent;

    background:
        var(--site-brand-soft);
}


[data-site-hours-today] {
    display:
        inline-flex;

    margin-left:
        0.35rem;

    padding:
        0.15rem
        0.4rem;

    border-radius:
        999px;

    background:
        var(--site-brand);

    color:
        #ffffff;

    font-size:
        0.66rem;

    font-weight:
        800;

    line-height:
        1.1;

    vertical-align:
        middle;
}


[data-site-info] [data-site-hours-row] dd {
    color:
        var(--site-text-soft);

    font-size:
        0.9rem;
}


[data-site-info] [data-site-hours-row][data-current-day="1"] dt,
[data-site-info] [data-site-hours-row][data-current-day="1"] dd {
    color:
        var(--site-text);

    font-weight:
        700;
}


/*
|--------------------------------------------------------------------------
| La sucursal superior ya no necesita reservar columnas para ubicacion
| y horarios. Esto evita huecos en escritorio despues de moverlos al final.
|--------------------------------------------------------------------------
*/

@media (min-width: 1024px) {

    [data-site-branch] {
        display:
            block;
    }


    [data-site-branch] > h2 {
        margin-bottom:
            0.8rem;
    }


    [data-site-contact] {
        margin:
            0;
    }
}


/*
|--------------------------------------------------------------------------
| Tablet y escritorio
|--------------------------------------------------------------------------
*/

@media (min-width: 900px) {

    [data-site-info-grid] {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(280px, 0.8fr);

        align-items:
            start;
    }
}


/*
|--------------------------------------------------------------------------
| Movil
|--------------------------------------------------------------------------
*/

@media (max-width: 719px) {

    [data-site-reviews] {
        margin-top:
            0;
    }


    [data-site-reviews-shell] {
        width:
            100%;

        padding:
            0.45rem;

        border-radius:
            12px;
    }


    [data-site-reviews-widget]
    gmp-place-details {
        height:
            500px;
    }

    [data-site-info] {
        width:
            min(
                calc(100% - 1.25rem),
                var(--site-max-width)
            );

        margin-top:
            0.4rem;

        padding-top:
            1.15rem;
    }


    [data-site-info] > h2 {
        margin-bottom:
            0.9rem;

        font-size:
            1.35rem;
    }


    [data-site-info-grid] {
        gap:
            0.85rem;
    }


    [data-site-info-card] {
        padding:
            0.9rem;

        border-radius:
            var(--site-radius-md);
    }


    [data-site-info-card-header] {
        gap:
            0.65rem;

        margin-bottom:
            0.65rem;
    }


    [data-site-map-frame] {
        margin-top:
            0.75rem;

        aspect-ratio:
            4 / 3;
    }


    [data-site-location-card] [data-site-maps] {
        min-height:
            44px;

        margin-top:
            0.7rem;
    }


    [data-site-info] [data-site-hours-row] {
        gap:
            0.55rem;

        padding:
            0.62rem
            0.5rem;
    }


    [data-site-info] [data-site-hours-row] dt,
    [data-site-info] [data-site-hours-row] dd {
        font-size:
            0.86rem;
    }
}

/*
|--------------------------------------------------------------------------
| Informacion del restaurante: tablet y escritorio
|--------------------------------------------------------------------------
*/

@media (min-width: 720px) {

    [data-site-info-grid] {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        align-items:
            stretch;

        gap:
            clamp(
                1rem,
                2vw,
                1.5rem
            );
    }


    [data-site-info-card] {
        width:
            100%;

        max-width:
            none;

        align-self:
            stretch;
    }


    /*
    |--------------------------------------------------------------------------
    | Horarios ocupan toda la fila
    |--------------------------------------------------------------------------
    */

    [data-site-hours-card] {
        grid-column:
            1 / -1;
    }


    /*
    |--------------------------------------------------------------------------
    | Horarios en dos filas
    |--------------------------------------------------------------------------
    |
    | Lunes - jueves: 4 columnas
    | Viernes - domingo: 3 columnas
    |
    */

    [data-site-info]
    [data-site-hours]
    dl {
        display:
            grid;

        grid-template-columns:
            repeat(
                12,
                minmax(0, 1fr)
            );

        gap:
            0.65rem;
    }


    [data-site-info]
    [data-site-hours-row] {
        display:
            block;

        grid-column:
            span 3;

        min-width:
            0;

        padding:
            0.8rem;

        border:
            1px solid
            var(--site-border);

        border-radius:
            12px;

        background:
            var(--site-surface-soft);
    }


    /*
    |--------------------------------------------------------------------------
    | Viernes, sábado y domingo
    |--------------------------------------------------------------------------
    */

    [data-site-info]
    [data-site-hours-row]:nth-child(n + 5) {
        grid-column:
            span 4;
    }


    [data-site-info]
    [data-site-hours-row]
    dt {
        margin-bottom:
            0.35rem;

        font-size:
            0.9rem;
    }


    [data-site-info]
    [data-site-hours-row]
    dd {
        margin:
            0;

        text-align:
            left;

        font-size:
            0.84rem;
    }


    /*
    |--------------------------------------------------------------------------
    | Segunda fila: ubicación + reviews
    |--------------------------------------------------------------------------
    */

    [data-site-location-card],
    [data-site-reviews-card] {
        height:
            100%;
    }
}


/*
|--------------------------------------------------------------------------
| Mi pedido - fase local
|--------------------------------------------------------------------------
| El pedido se mantiene en el navegador durante esta etapa.
| El guardado en servidor y el envio por WhatsApp se conectan despues.
|--------------------------------------------------------------------------
*/

html.site-product-dialog-open,
html.site-order-dialog-open {
    overflow:
        hidden;
}


html.site-has-order [data-public-site] {
    padding-bottom:
        5.75rem;
}


[data-site-order-launcher] {
    position:
        fixed;

    right:
        max(
            1rem,
            env(safe-area-inset-right)
        );

    bottom:
        max(
            1rem,
            env(safe-area-inset-bottom)
        );

    z-index:
        850;

    display:
        flex;

    width:
        min(330px, calc(100% - 2rem));

    min-height:
        62px;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    padding:
        0.75rem
        0.95rem;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--site-brand) 58%,
            white
        );

    border-radius:
        18px;

    background:
        var(--site-brand);

    color:
        #ffffff;

    box-shadow:
        0 16px 40px
        rgb(0 0 0 / 18%);

    font:
        inherit;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
}


[data-site-order-launcher][hidden] {
    display:
        none;
}


[data-site-order-launcher]:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 18px 44px
        rgb(0 0 0 / 22%);
}


[data-site-order-launcher].is-updated {
    transform:
        scale(1.025);
}


[data-site-order-launcher-copy] {
    display:
        grid;

    min-width:
        0;

    gap:
        0.1rem;
}


[data-site-order-launcher-copy] strong {
    font-size:
        1rem;

    font-weight:
        850;

    line-height:
        1.15;
}


[data-site-order-launcher-count] {
    color:
        rgb(255 255 255 / 82%);

    font-size:
        0.8rem;

    font-weight:
        650;
}


[data-site-order-launcher-total] {
    flex:
        0 0 auto;

    font-size:
        0.95rem;

    font-weight:
        850;

    white-space:
        nowrap;
}


[data-site-order-launcher]:focus-visible,
[data-site-order-dialog] button:focus-visible,
[data-site-order-dialog] input:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--site-brand) 35%,
            white
        );

    outline-offset:
        3px;
}


[data-site-order-dialog] {
    width:
        min(720px, calc(100% - 2rem));

    max-width:
        none;

    max-height:
        min(88dvh, 860px);

    margin:
        auto;

    padding:
        0;

    overflow:
        hidden;

    border:
        0;

    border-radius:
        26px;

    background:
        transparent;

    color:
        var(--site-text);

    box-shadow:
        var(--site-shadow);
}


[data-site-order-dialog][open] {
    display:
        block;
}


[data-site-order-dialog]::backdrop {
    background:
        rgb(12 16 24 / 62%);

    backdrop-filter:
        blur(4px);
}


[data-site-order-panel] {
    display:
        grid;

    max-height:
        min(88dvh, 860px);

    grid-template-rows:
        auto
        minmax(0, 1fr)
        auto;

    overflow:
        hidden;

    border:
        1px solid
        rgb(255 255 255 / 42%);

    border-radius:
        inherit;

    background:
        var(--site-surface);
}


[data-site-order-header] {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        1rem;

    padding:
        1.3rem
        1.35rem
        1rem;

    border-bottom:
        1px solid
        var(--site-border);
}


[data-site-order-eyebrow] {
    margin:
        0 0
        0.2rem;

    color:
        var(--site-brand-strong);

    font-size:
        0.74rem;

    font-weight:
        850;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


[data-site-order-header] h2 {
    margin:
        0;

    font-size:
        clamp(1.45rem, 3vw, 1.8rem);

    line-height:
        1.1;
}


[data-site-order-summary] {
    margin:
        0.35rem 0 0;

    color:
        var(--site-text-soft);

    font-size:
        0.9rem;
}


[data-site-order-close] {
    display:
        grid;

    width:
        42px;

    height:
        42px;

    flex:
        0 0 auto;

    place-items:
        center;

    padding:
        0;

    border:
        1px solid
        var(--site-border);

    border-radius:
        999px;

    background:
        var(--site-surface-soft);

    color:
        var(--site-text);

    font:
        inherit;

    font-size:
        1.45rem;

    line-height:
        1;

    cursor:
        pointer;
}


[data-site-order-scroll] {
    min-height:
        0;

    overflow-y:
        auto;

    overscroll-behavior:
        contain;

    padding:
        0.4rem
        1.35rem
        1.25rem;
}


[data-site-order-empty] {
    margin:
        1rem 0 0;

    padding:
        2rem
        1.25rem;

    border:
        1px dashed
        color-mix(
            in srgb,
            var(--site-brand) 32%,
            var(--site-border)
        );

    border-radius:
        var(--site-radius-md);

    background:
        var(--site-brand-soft);

    text-align:
        center;
}


[data-site-order-empty][hidden] {
    display:
        none;
}


[data-site-order-empty] strong {
    display:
        block;

    font-size:
        1rem;
}


[data-site-order-empty] p {
    margin:
        0.35rem 0 0;

    color:
        var(--site-text-soft);

    font-size:
        0.9rem;
}


[data-site-order-list] {
    display:
        grid;

    gap:
        0.85rem;

    padding-top:
        0.9rem;
}


[data-site-order-item] {
    display:
        grid;

    grid-template-columns:
        92px
        minmax(0, 1fr);

    gap:
        0.9rem;

    padding:
        0.8rem;

    border:
        1px solid
        var(--site-border);

    border-radius:
        18px;

    background:
        var(--site-surface);
}


[data-site-order-item-media] {
    width:
        92px;

    aspect-ratio:
        1;

    overflow:
        hidden;

    border-radius:
        14px;

    background:
        var(--site-brand-soft);
}


[data-site-order-item-media] img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


[data-site-order-item-placeholder] {
    display:
        grid;

    width:
        100%;

    height:
        100%;

    place-items:
        center;

    color:
        var(--site-brand-strong);

    font-size:
        1.5rem;

    font-weight:
        900;
}


[data-site-order-item-body] {
    display:
        grid;

    min-width:
        0;

    align-content:
        start;

    gap:
        0.45rem;
}


[data-site-order-item-heading] {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        0.8rem;
}


[data-site-order-item-heading] strong {
    min-width:
        0;

    font-size:
        0.98rem;

    line-height:
        1.3;
}


[data-site-order-item-heading] span {
    flex:
        0 0 auto;

    color:
        var(--site-brand-strong);

    font-size:
        0.9rem;

    font-weight:
        850;

    white-space:
        nowrap;
}


[data-site-order-item-note] {
    margin:
        0;

    overflow:
        hidden;

    color:
        var(--site-text-soft);

    font-size:
        0.84rem;

    line-height:
        1.4;

    display:
        -webkit-box;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;
}


[data-site-order-item-note][data-has-instructions="1"] {
    color:
        var(--site-text);
}


[data-site-order-item-bottom] {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        0.75rem;

    margin-top:
        0.1rem;
}


[data-site-order-item-stepper] {
    display:
        grid;

    grid-template-columns:
        34px
        42px
        34px;

    align-items:
        center;

    overflow:
        hidden;

    border:
        1px solid
        var(--site-border);

    border-radius:
        999px;

    background:
        var(--site-surface-soft);
}


[data-site-order-item-stepper] button,
[data-site-order-item-stepper] input {
    width:
        100%;

    height:
        34px;

    margin:
        0;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        var(--site-text);

    font:
        inherit;

    text-align:
        center;
}


[data-site-order-item-stepper] button {
    font-size:
        1.05rem;

    font-weight:
        800;

    cursor:
        pointer;
}


[data-site-order-item-stepper] button:disabled {
    opacity:
        0.32;

    cursor:
        default;
}


[data-site-order-item-stepper] input {
    appearance:
        textfield;

    font-size:
        0.9rem;

    font-weight:
        800;
}


[data-site-order-item-stepper] input::-webkit-outer-spin-button,
[data-site-order-item-stepper] input::-webkit-inner-spin-button {
    margin:
        0;

    appearance:
        none;
}


[data-site-order-item-actions] {
    display:
        flex;

    align-items:
        center;

    gap:
        0.35rem;
}


[data-site-order-item-actions] button {
    min-height:
        34px;

    padding:
        0.35rem
        0.65rem;

    border:
        1px solid
        var(--site-border);

    border-radius:
        999px;

    background:
        var(--site-surface);

    color:
        var(--site-text);

    font:
        inherit;

    font-size:
        0.78rem;

    font-weight:
        750;

    cursor:
        pointer;
}


[data-site-order-item-actions] button:disabled {
    opacity:
        0.45;

    cursor:
        default;
}


[data-site-order-item-actions] [data-site-order-item-remove] {
    border-color:
        #f0cccc;

    color:
        #a52828;
}


/*
|--------------------------------------------------------------------------
| Nota general del pedido
|--------------------------------------------------------------------------
*/

[data-site-order-note] {
    margin:
        0.9rem
        1.35rem
        1rem;

    padding:
        1rem;

    border:
        1px solid
        var(--site-border);

    border-radius:
        14px;

    background:
        var(--site-surface);
}


[data-site-order-note] label {
    display:
        flex;

    align-items:
        baseline;

    justify-content:
        space-between;

    gap:
        1rem;

    margin-bottom:
        0.55rem;
}


[data-site-order-note] label span {
    color:
        var(--site-text-soft);

    font-size:
        0.78rem;
}


[data-site-order-note] textarea {
    width:
        100%;

    min-height:
        76px;

    box-sizing:
        border-box;

    padding:
        0.75rem;

    border:
        1px solid
        var(--site-border);

    border-radius:
        12px;

    background:
        #fff;

    color:
        var(--site-text);

    font:
        inherit;

    resize:
        vertical;
}


[data-site-order-note] textarea:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--site-brand) 22%,
            transparent
        );

    border-color:
        var(--site-brand);
}


[data-site-order-note] > small {
    display:
        block;

    margin-top:
        0.45rem;

    color:
        var(--site-text-soft);

    font-size:
        0.76rem;

    line-height:
        1.4;
}


[data-site-order-footer] {
    padding:
        1rem
        1.35rem
        calc(1rem + env(safe-area-inset-bottom));

    border-top:
        1px solid
        var(--site-border);

    background:
        rgb(255 255 255 / 97%);

    backdrop-filter:
        blur(12px);
}


[data-site-order-total] {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    margin-bottom:
        0.75rem;
}


[data-site-order-total] span {
    color:
        var(--site-text-soft);

    font-size:
        0.9rem;
}


[data-site-order-total] strong {
    color:
        var(--site-brand-strong);

    font-size:
        1.15rem;
}


[data-site-order-send] {
    width:
        100%;

    min-height:
        52px;

    padding:
        0.8rem
        1rem;

    border:
        0;

    border-radius:
        14px;

    background:
        var(--site-brand);

    color:
        #ffffff;

    font:
        inherit;

    font-size:
        0.95rem;

    font-weight:
        850;
}


[data-site-order-send]:disabled {
    opacity:
        0.52;
}


[data-site-order-pending] {
    margin:
        0.55rem 0 0;

    color:
        var(--site-text-soft);

    font-size:
        0.76rem;

    line-height:
        1.4;

    text-align:
        center;
}


@media (max-width: 719px) {

    html.site-has-order [data-public-site] {
        padding-bottom:
            6.4rem;
    }


    [data-site-order-launcher] {
        right:
            max(
                0.65rem,
                env(safe-area-inset-right)
            );

        bottom:
            max(
                0.65rem,
                env(safe-area-inset-bottom)
            );

        left:
            max(
                0.65rem,
                env(safe-area-inset-left)
            );

        width:
            auto;

        min-height:
            58px;

        border-radius:
            16px;
    }


    [data-site-order-dialog] {
        width:
            calc(100% - 0.75rem);

        max-height:
            calc(100dvh - 0.75rem);

        border-radius:
            22px;
    }


    [data-site-order-panel] {
        max-height:
            calc(100dvh - 0.75rem);
    }


    [data-site-order-header] {
        padding:
            1rem
            1rem
            0.85rem;
    }


    [data-site-order-scroll] {
        padding:
            0.25rem
            0.75rem
            1rem;
    }


    [data-site-order-list] {
        gap:
            0.7rem;
    }


    [data-site-order-item] {
        grid-template-columns:
            72px
            minmax(0, 1fr);

        gap:
            0.7rem;

        padding:
            0.7rem;

        border-radius:
            16px;
    }


    [data-site-order-item-media] {
        width:
            72px;

        border-radius:
            12px;
    }


    [data-site-order-item-heading] {
        gap:
            0.45rem;
    }


    [data-site-order-item-heading] strong {
        font-size:
            0.9rem;
    }


    [data-site-order-item-heading] span {
        font-size:
            0.82rem;
    }


    [data-site-order-item-bottom] {
        align-items:
            flex-end;

        flex-wrap:
            wrap;
    }


    [data-site-order-item-actions] {
        margin-left:
            auto;
    }


    [data-site-order-footer] {
        padding:
            0.85rem
            1rem
            calc(0.85rem + env(safe-area-inset-bottom));
    }


    [data-site-order-note] {
        margin:
            0.75rem
            1rem;

        padding:
            0.85rem;
    }
}


@media (max-width: 380px) {

    [data-site-order-item] {
        grid-template-columns:
            62px
            minmax(0, 1fr);
    }


    [data-site-order-item-media] {
        width:
            62px;
    }


    [data-site-order-item-stepper] {
        grid-template-columns:
            30px
            38px
            30px;
    }


    [data-site-order-item-stepper] button,
    [data-site-order-item-stepper] input {
        height:
            32px;
    }


    [data-site-order-item-actions] button {
        padding-inline:
            0.5rem;
    }
}

/*
|--------------------------------------------------------------------------
| Estado de guardado de Mi pedido
|--------------------------------------------------------------------------
*/

[data-site-order-send]:not(:disabled) {
    cursor: pointer;
}

[data-site-order-save-status] {
    margin: 0.65rem 0 0;
    padding: 0.65rem 0.8rem;
    border-radius: 12px;
    background: #f7f7f7;
    color: var(--site-text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

[data-site-order-save-status][data-state="success"] {
    background: color-mix(in srgb, var(--site-brand) 12%, white);
    color: var(--site-brand-strong);
}

[data-site-order-save-status][data-state="error"] {
    background: #fff0f0;
    color: #a52828;
}

[data-site-order-save-status][data-state="loading"] {
    background: #f4f4f4;
    color: var(--site-text-soft);
}

/*
|--------------------------------------------------------------------------
| Confirmacion al regresar de WhatsApp
|--------------------------------------------------------------------------
*/

[data-site-whatsapp-return-dialog] {
    width: min(430px, calc(100% - 2rem));
    max-width: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    background: transparent;
    color: var(--site-text);
    box-shadow: var(--site-shadow);
}

[data-site-whatsapp-return-dialog][open] {
    display: block;
}

[data-site-whatsapp-return-dialog]::backdrop {
    background: rgb(12 16 24 / 62%);
    backdrop-filter: blur(4px);
}

[data-site-whatsapp-return-panel] {
    padding: 1.45rem;
    border: 1px solid rgb(255 255 255 / 42%);
    border-radius: inherit;
    background: var(--site-surface);
    text-align: center;
}

[data-site-whatsapp-return-eyebrow] {
    margin: 0 0 0.3rem;
    color: var(--site-brand-strong);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-site-whatsapp-return-panel] h2 {
    margin: 0;
    font-size: clamp(1.3rem, 4vw, 1.65rem);
    line-height: 1.2;
}

[data-site-whatsapp-return-actions] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-top: 1.25rem;
}

[data-site-whatsapp-return-actions] button {
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--site-border);
    border-radius: 14px;
    background: var(--site-surface);
    color: var(--site-text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

[data-site-whatsapp-return-actions] [data-site-whatsapp-return-yes] {
    border-color: transparent;
    background: var(--site-brand);
    color: #ffffff;
}

[data-site-whatsapp-return-dialog] button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--site-brand) 35%, white);
    outline-offset: 3px;
}

@media (max-width: 420px) {
    [data-site-whatsapp-return-dialog] {
        width: calc(100% - 1rem);
        border-radius: 20px;
    }

    [data-site-whatsapp-return-panel] {
        padding: 1.2rem;
    }
}


/*
|--------------------------------------------------------------------------
| Publico - Pulido final de contacto y recomendaciones
|--------------------------------------------------------------------------
|
| Los numeros siguen viviendo en href/datos, pero los botones muestran solo
| la accion. En movil quedan dos acciones compactas; desde tablet se integran
| en la misma franja visual de sucursal y estado.
|
*/

[data-site-detail-recommendation] {
    cursor: default;
}

[data-site-detail-recommendation-plus] {
    border: 0;
    cursor: pointer;
    font: inherit;
    transition:
        transform 150ms ease,
        box-shadow 150ms ease;
}

[data-site-detail-recommendation-plus]:hover {
    transform: scale(1.06);
}

[data-site-detail-recommendation-plus]:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--site-brand) 35%,
            transparent
        );
    outline-offset: 3px;
}

@media (max-width: 719px) {
    [data-site-contact] {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        width: 100%;
        margin-bottom: 0.65rem;
    }

    [data-site-contact] p,
    [data-site-contact] a,
    [data-site-contact] a[data-site-whatsapp],
    [data-site-phone] {
        width: 100%;
        max-width: none;
    }

    [data-site-contact] a {
        justify-content: center;
        min-height: 42px;
        padding: 0.55rem 0.7rem;
        white-space: nowrap;
        font-size: 0.88rem;
    }
}

@media (max-width: 380px) {
    [data-site-contact] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    [data-site-contact] a {
        min-height: 40px;
        padding: 0.5rem 0.55rem;
        font-size: 0.82rem;
    }
}

@media (min-width: 720px) {
    [data-site-branch] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.6rem 0.75rem;
    }

    [data-site-branch] > h2 {
        flex: 0 1 auto;
        margin: 0;
    }

    [data-site-contact] {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 0.45rem;
        margin: 0;
    }

    [data-site-contact] p {
        width: auto;
    }

    [data-site-contact] a,
    [data-site-contact] a[data-site-whatsapp],
    [data-site-phone] {
        width: auto;
        min-height: 38px;
        padding: 0.48rem 0.8rem;
        white-space: nowrap;
    }
}


/*
|--------------------------------------------------------------------------
| Publico - Overlay final: cierre fijo, feedback y sugeridos compactos
|--------------------------------------------------------------------------
*/

[data-site-product-dialog-panel] {
    position: relative;
}

[data-site-product-dialog-close] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 12;
}

[data-site-product-toast] {
    position: absolute;
    left: 50%;
    bottom: calc(82px + env(safe-area-inset-bottom));
    z-index: 14;

    max-width: calc(100% - 2rem);
    padding: 0.7rem 1rem;

    border: 1px solid color-mix(in srgb, var(--site-brand) 26%, var(--site-border));
    border-radius: 999px;

    background: rgb(255 255 255 / 96%);
    box-shadow: 0 12px 32px rgb(0 0 0 / 18%);

    color: var(--site-text);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;

    opacity: 0;
    transform: translate(-50%, 10px);
    transition: opacity 170ms ease, transform 170ms ease;
    pointer-events: none;
}

[data-site-product-toast][hidden] {
    display: none !important;
}

[data-site-product-toast].is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

[data-site-detail-recommendations] {
    min-width: 0;
}

[data-site-detail-recommendations-top] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.8rem;
}

[data-site-detail-recommendations-controls] {
    display: flex;
    flex: none;
    gap: 0.4rem;
}

[data-site-detail-recommendations-controls] button {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;

    padding: 0 0 0.1rem;
    border: 1px solid var(--site-border);
    border-radius: 999px;
    background: var(--site-surface);
    color: var(--site-text);

    font: inherit;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}

[data-site-detail-recommendations-controls] button:disabled {
    opacity: 0.3;
    cursor: default;
}

[data-site-detail-recommendations-list] {
    display: flex;
    gap: 0.65rem;

    min-width: 0;
    width: 100%;
    padding: 0.1rem 0 0.35rem;

    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

[data-site-detail-recommendations-list]::-webkit-scrollbar {
    display: none;
}

[data-site-detail-recommendation] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0;

    flex: 0 0 calc(40% - 0.52rem);
    min-width: 0;
    padding: 0;

    overflow: hidden;
    scroll-snap-align: start;

    border-radius: 14px;
    background: var(--site-surface);
}

[data-site-detail-recommendation-media] {
    position: relative;

    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;

    overflow: hidden;
    border-radius: 0;
}

[data-site-detail-recommendation-copy] {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.55rem 0.6rem 0.65rem;
}

[data-site-detail-recommendation-copy] strong {
    display: -webkit-box;
    min-height: 2.35em;
    overflow: hidden;

    font-size: 0.82rem;
    line-height: 1.18;
    white-space: normal;
    text-overflow: initial;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

[data-site-detail-recommendation-copy] span {
    font-size: 0.78rem;
}

[data-site-detail-recommendation-plus] {
    position: absolute;
    right: 0.45rem;
    bottom: 0.45rem;

    width: 30px;
    height: 30px;

    border: 2px solid #ffffff;
    box-shadow: 0 5px 14px rgb(0 0 0 / 18%);
}

@media (max-width: 719px) {
    [data-site-detail-recommendations-controls] {
        display: none;
    }

    [data-site-detail-recommendations-top] {
        display: block;
    }

    [data-site-product-toast] {
        bottom: calc(78px + env(safe-area-inset-bottom));
        max-width: calc(100% - 1.5rem);
        font-size: 0.84rem;
    }
}

@media (min-width: 720px) and (orientation: portrait) {
    [data-site-detail-recommendation] {
        flex-basis: calc(25% - 0.4875rem);
    }
}

@media (min-width: 900px) and (orientation: landscape) {
    [data-site-detail-recommendation] {
        flex-basis: calc(20% - 0.52rem);
    }
}

@media (min-width: 1280px) {
    [data-site-detail-recommendation] {
        flex-basis: calc(20% - 0.52rem);
    }
}


/*
|--------------------------------------------------------------------------
| Footer legal público
|--------------------------------------------------------------------------
*/

[data-site-legal-footer] {
    margin-top: clamp(40px, 6vw, 72px);
    border-top: 1px solid rgba(28, 28, 28, 0.08);
    background: #faf9f6;
}

[data-site-legal-footer-inner] {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
    padding: 24px 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

[data-site-legal-brand] {
    color: var(--site-color-primary, #a77a00);
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
}

[data-site-legal-links] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 18px;
}

[data-site-legal-links] a {
    color: #6a675f;
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
}

[data-site-legal-brand]:hover,
[data-site-legal-links] a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

[data-site-legal-brand]:focus-visible,
[data-site-legal-links] a:focus-visible,
[data-site-order-legal] a:focus-visible {
    outline: 3px solid color-mix(
        in srgb,
        var(--site-color-primary, #a77a00) 35%,
        transparent
    );
    outline-offset: 3px;
    border-radius: 5px;
}


/*
|--------------------------------------------------------------------------
| Aviso legal junto al envío por WhatsApp
|--------------------------------------------------------------------------
*/

[data-site-order-legal] {
    margin: 2px 0 0;
    color: #5f5b54;
    font-size: 0.76rem;
    line-height: 1.45;
    text-align: center;
}

[data-site-order-legal] a {
    color: #3f3c37;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

@media (max-width: 700px) {
    [data-site-legal-footer-inner] {
        width: min(100% - 32px, 1200px);
        padding-block: 22px 112px;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    [data-site-legal-links] {
        justify-content: flex-start;
        gap: 10px 16px;
    }

    [data-site-order-legal] {
        font-size: 0.74rem;
    }
}

/*
|--------------------------------------------------------------------------
| Firma MyOrdr y espacio seguro para Mi pedido
|--------------------------------------------------------------------------
*/

[data-site-legal-brand] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

[data-site-legal-brand-prefix] {
    color: #6a675f;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

[data-site-legal-brand-logo] {
    display: block;
    width: 92px;
    height: auto;
}

/*
 * En escritorio el launcher vive en la esquina inferior derecha.
 * Reservamos esa zona dentro del footer para que nunca cubra los enlaces.
 */
@media (min-width: 1101px) {
    html.site-has-order [data-site-legal-footer-inner] {
        padding-right: 370px;
    }
}

/*
 * En tablet y móvil es más natural reservar espacio debajo del contenido
 * porque el launcher ocupa una porción mucho mayor del ancho disponible.
 */
@media (min-width: 701px) and (max-width: 1100px) {
    html.site-has-order [data-site-legal-footer-inner] {
        padding-bottom: 112px;
    }
}

@media (max-width: 700px) {
    [data-site-legal-brand] {
        gap: 7px;
    }

    [data-site-legal-brand-logo] {
        width: 88px;
    }

    html.site-has-order [data-site-legal-footer-inner] {
        padding-bottom: 118px;
    }
}

/*
|--------------------------------------------------------------------------
| Información del restaurante - layout final tablet / escritorio
|--------------------------------------------------------------------------
|
| Horarios ocupan toda la primera fila.
| Ubicación y Reviews comparten la segunda.
| En móvil no se modifica nada.
|
*/

@media (min-width: 720px) {

    [data-site-info-grid] {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        align-items:
            stretch;
    }


    /*
    |--------------------------------------------------------------------------
    | Primera fila: horarios a todo lo ancho
    |--------------------------------------------------------------------------
    */

    [data-site-info-grid]
    > [data-site-hours] {
        grid-column:
            1 / -1;
    }


    /*
    |--------------------------------------------------------------------------
    | Segunda fila: ubicación + reviews
    |--------------------------------------------------------------------------
    */

    [data-site-location-card],
    [data-site-reviews-card] {
        min-width:
            0;

        width:
            100%;

        align-self:
            stretch;
    }
}

/*
|--------------------------------------------------------------------------
| Información sin Google Reviews
|--------------------------------------------------------------------------
|
| Cuando el negocio todavía no tiene Reviews,
| ubicación se centra en la segunda fila.
| Móvil conserva su acomodo normal.
|
*/

@media (min-width: 720px) {

    [data-site-info-grid][data-has-reviews="0"]
    > [data-site-location-card] {
        grid-column:
            1 / -1;

        justify-self:
            center;

        width:
            min(
                100%,
                560px
            );

        max-width:
            560px;
    }
}

/*
|--------------------------------------------------------------------------
| Promociones
|--------------------------------------------------------------------------
|
| Promociones destacadas:
| - carrusel horizontal en una sola fila;
| - foto arriba + contenido abajo en todas las vistas;
| - cards más anchas que las normales;
| - ver detalles solo en PC.
|
*/

[data-site-menu-section][data-section-promotions="1"] {
    padding:
        1rem;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--site-brand) 12%,
            var(--site-border)
        );

    border-radius:
        var(--site-radius-lg);

    background:
        color-mix(
            in srgb,
            var(--site-brand) 5%,
            white
        );

    overflow:
        hidden;
}


/*
|--------------------------------------------------------------------------
| Encabezado
|--------------------------------------------------------------------------
*/

[data-site-menu-section][data-section-promotions="1"] > h3 {
    margin:
        0 0
        0.25rem;

    padding:
        0.4rem
        0.8rem;

    background:
        color-mix(
            in srgb,
            var(--site-brand) 14%,
            white
        );

    font-size:
        1.35rem;
}


[data-site-promotion-icon] {
    line-height:
        1;
}


[data-site-promotion-heading] {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    margin-bottom:
        0.75rem;
}


[data-site-promotion-subtitle] {
    margin:
        0 0
        1rem;

    color:
        var(--site-text-soft);

    font-size:
        0.9rem;
}


/*
|--------------------------------------------------------------------------
| Controles
|--------------------------------------------------------------------------
|
| Flechas solo en PC.
|
*/

[data-site-promotion-controls] {
    display:
        none;

    flex:
        0 0 auto;

    gap:
        0.45rem;
}


[data-site-promotion-controls] button {
    display:
        grid;

    width:
        38px;

    height:
        38px;

    place-items:
        center;

    margin:
        0;

    padding:
        0 0 0.1rem;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--site-brand) 24%,
            var(--site-border)
        );

    border-radius:
        999px;

    background:
        var(--site-surface);

    color:
        var(--site-brand-strong);

    font:
        inherit;

    font-size:
        1.45rem;

    line-height:
        1;

    cursor:
        pointer;
}


[data-site-promotion-controls] button:disabled {
    opacity:
        0.3;

    cursor:
        default;
}


/*
|--------------------------------------------------------------------------
| Carrusel
|--------------------------------------------------------------------------
*/

[data-site-menu-section][data-section-promotions="1"] [data-site-products] {
    display:
        flex;

    gap:
        1rem;

    width:
        100%;

    min-width:
        0;

    padding:
        0.1rem
        0
        0.35rem;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    scroll-behavior:
        smooth;

    scroll-snap-type:
        x mandatory;

    overscroll-behavior-x:
        contain;

    scrollbar-width:
        none;
}


[data-site-menu-section][data-section-promotions="1"] [data-site-products]::-webkit-scrollbar {
    display:
        none;
}


/*
|--------------------------------------------------------------------------
| Tarjeta promocional
|--------------------------------------------------------------------------
|
| Base:
| - más ancha que una card normal;
| - foto arriba;
| - datos abajo.
|
*/

[data-site-menu-section][data-section-promotions="1"] [data-site-product] {
    flex:
        0 0 84%;

    min-width:
        0;

    padding:
        0;

    overflow:
        hidden;

    scroll-snap-align:
        start;

    scroll-snap-stop:
        always;

    border-color:
        color-mix(
            in srgb,
            var(--site-brand) 16%,
            var(--site-border)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--site-brand) 16%,
            var(--site-border)
        );

    background:
        color-mix(
            in srgb,
            var(--site-brand) 3.5%,
            white
        );

    box-shadow:
        0 8px 22px
        rgb(0 0 0 / 5%);
}


/*
|--------------------------------------------------------------------------
| Imagen arriba
|--------------------------------------------------------------------------
*/

[data-site-menu-section][data-section-promotions="1"] [data-site-product-media] {
    width:
        100%;

    min-height:
        0;

    border-radius:
        0;
}


[data-site-menu-section][data-section-promotions="1"] [data-site-product-media-open] {
    display:
        block;

    width:
        100%;
}


[data-site-menu-section][data-section-promotions="1"] [data-site-product-image],
[data-site-menu-section][data-section-promotions="1"] [data-site-product-image-placeholder] {
    display:
        block;

    width:
        100%;

    aspect-ratio:
        1.45 / 1;

    height:
        auto;

    border-radius:
        0;
}


[data-site-menu-section][data-section-promotions="1"] [data-site-product-image] {
    object-fit:
        cover;
}


/*
|--------------------------------------------------------------------------
| Contenido abajo
|--------------------------------------------------------------------------
*/

[data-site-menu-section][data-section-promotions="1"] [data-site-product-content] {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    padding:
        0.95rem
        1rem
        1rem;
}


/*
|--------------------------------------------------------------------------
| Descripción a 2 líneas
|--------------------------------------------------------------------------
*/

[data-site-menu-section][data-section-promotions="1"] [data-site-product-description] {
    display:
        -webkit-box;

    overflow:
        hidden;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    line-clamp:
        2;
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

[data-site-menu-section][data-section-promotions="1"] [data-site-product-footer] {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        0.4rem;

    margin-top:
        auto;

    padding-top:
        0.7rem;
}


/*
|--------------------------------------------------------------------------
| Precios
|--------------------------------------------------------------------------
*/

[data-site-menu-section][data-section-promotions="1"] [data-site-product-price] {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        0.12rem;

    margin:
        0;
}


[data-site-menu-section][data-section-promotions="1"] [data-site-price-regular] {
    color:
        var(--site-text-soft);

    font-size:
        0.9rem;

    font-weight:
        600;

    line-height:
        1.2;
}


[data-site-menu-section][data-section-promotions="1"] [data-site-price-promotional] {
    color:
        var(--site-brand-strong);

    font-size:
        1.13rem;

    font-weight:
        800;

    line-height:
        1.25;
}


/*
|--------------------------------------------------------------------------
| Ver detalles
|--------------------------------------------------------------------------
|
| Oculto por defecto.
| Solo visible en PC.
|
*/

[data-site-menu-section][data-section-promotions="1"] [data-site-product-details-hint] {
    display:
        none;

    margin:
        0;

    color:
        var(--site-brand-strong);

    font-size:
        0.85rem;

    font-weight:
        700;
}


/*
|--------------------------------------------------------------------------
| Móvil
|--------------------------------------------------------------------------
*/

@media (max-width: 719px) {

    [data-site-menu-section][data-section-promotions="1"] {
        padding:
            0.85rem;
    }


    [data-site-promotion-heading] {
        display:
            block;

        margin-bottom:
            0.85rem;
    }


    [data-site-menu-section][data-section-promotions="1"] [data-site-product] {
        flex:
            0 0 84%;
    }


    [data-site-menu-section][data-section-promotions="1"] [data-site-product-image],
    [data-site-menu-section][data-section-promotions="1"] [data-site-product-image-placeholder] {
        aspect-ratio:
            1.35 / 1;
    }
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
|
| Una fila horizontal.
| Cards más amplias que las normales.
| Sin "Ver detalles".
|
*/

@media (min-width: 720px) and (max-width: 1023px) {

    [data-site-menu-section][data-section-promotions="1"] [data-site-product] {
        flex:
            0 0 calc(50% - 0.5rem);
    }


    [data-site-menu-section][data-section-promotions="1"] [data-site-product-image],
    [data-site-menu-section][data-section-promotions="1"] [data-site-product-image-placeholder] {
        aspect-ratio:
            1.5 / 1;
    }
}


/*
|--------------------------------------------------------------------------
| PC
|--------------------------------------------------------------------------
|
| Una fila horizontal.
| Más anchas que cards normales (~120% aprox).
| "Ver detalles" sí visible.
| Flechas visibles.
|
*/

@media (min-width: 1024px) {

    [data-site-promotion-controls] {
        display:
            flex;
    }


    [data-site-menu-section][data-section-promotions="1"] [data-site-product] {
        flex:
            0 0 calc(32% - 0.7rem);
    }


    [data-site-menu-section][data-section-promotions="1"] [data-site-product-image],
    [data-site-menu-section][data-section-promotions="1"] [data-site-product-image-placeholder] {
        aspect-ratio:
            1.55 / 1;
    }


    [data-site-menu-section][data-section-promotions="1"] [data-site-product-details-hint] {
        display:
            inline-flex;

        align-items:
            center;

        gap:
            0.25rem;
    }


    [data-site-menu-section][data-section-promotions="1"] [data-site-product-details-hint]::after {
        content:
            "›";

        font-size:
            1.15em;

        line-height:
            1;
    }
}

/*
|--------------------------------------------------------------------------
| Promociones - corrección final de layout
|--------------------------------------------------------------------------
|
| Fuerza:
| - fotografía ARRIBA;
| - contenido ABAJO;
| - carrusel horizontal;
| - proporción de fotografía 4:3;
| - Ver detalles solamente en PC.
|
*/


/*
|--------------------------------------------------------------------------
| Card vertical: imagen arriba + información abajo
|--------------------------------------------------------------------------
*/

[data-site-menu-section][data-section-promotions="1"]
[data-site-product] {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        stretch;

    gap:
        0;

    min-height:
        0;

    padding:
        0;

    overflow:
        hidden;
}


/*
|--------------------------------------------------------------------------
| Imagen ARRIBA
|--------------------------------------------------------------------------
|
| Anulamos expresamente grid-column: 2 y grid-row: 1
| heredados de la vista Lista.
|
*/

[data-site-menu-section][data-section-promotions="1"]
[data-site-product-media] {
    position:
        relative;

    display:
        block;

    grid-column:
        auto;

    grid-row:
        auto;

    flex:
        0 0 auto;

    width:
        100%;

    height:
        auto;

    min-height:
        0;

    aspect-ratio:
        4 / 3;

    align-self:
        auto;

    overflow:
        hidden;

    border-radius:
        0;

    background:
        var(--site-brand-soft);
}


[data-site-menu-section][data-section-promotions="1"]
[data-site-product-media-open] {
    display:
        block;

    width:
        100%;

    height:
        100%;
}


[data-site-menu-section][data-section-promotions="1"]
[data-site-product-image],
[data-site-menu-section][data-section-promotions="1"]
[data-site-product-image-placeholder] {
    display:
        block;

    width:
        100%;

    height:
        100%;

    aspect-ratio:
        auto;

    border-radius:
        0;
}


[data-site-menu-section][data-section-promotions="1"]
[data-site-product-image] {
    object-fit:
        cover;
}


/*
|--------------------------------------------------------------------------
| Información ABAJO
|--------------------------------------------------------------------------
|
| También anulamos la posición de grid heredada.
|
*/

[data-site-menu-section][data-section-promotions="1"]
[data-site-product-content] {
    display:
        flex;

    grid-column:
        auto;

    grid-row:
        auto;

    flex:
        1 1 auto;

    flex-direction:
        column;

    min-width:
        0;

    padding:
        0.85rem
        0.9rem
        0.95rem;
}


/*
|--------------------------------------------------------------------------
| Nombre
|--------------------------------------------------------------------------
*/

[data-site-menu-section][data-section-promotions="1"]
[data-site-product-content] h4 {
    margin:
        0;

    line-height:
        1.25;
}


/*
|--------------------------------------------------------------------------
| Descripción: máximo 2 líneas
|--------------------------------------------------------------------------
*/

[data-site-menu-section][data-section-promotions="1"]
[data-site-product-description] {
    display:
        -webkit-box;

    margin:
        0.35rem 0 0;

    overflow:
        hidden;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    line-clamp:
        2;
}


/*
|--------------------------------------------------------------------------
| Footer y precios
|--------------------------------------------------------------------------
*/

[data-site-menu-section][data-section-promotions="1"]
[data-site-product-footer] {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        0.4rem;

    margin-top:
        auto;

    padding-top:
        0.65rem;
}


[data-site-menu-section][data-section-promotions="1"]
[data-site-product-price] {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        0.1rem;

    margin:
        0;
}


/*
|--------------------------------------------------------------------------
| Ver detalles
|--------------------------------------------------------------------------
|
| Base: oculto.
| Solo PC >= 1024px lo vuelve a mostrar.
|
*/

[data-site-menu-section][data-section-promotions="1"]
[data-site-product-details-hint] {
    display:
        none;
}


/*
|--------------------------------------------------------------------------
| Móvil
|--------------------------------------------------------------------------
|
| Las cards normales foto-arriba rondan media pantalla.
| La promo es claramente más protagonista y deja asomar la siguiente.
|
*/

@media (max-width: 719px) {

    [data-site-menu-section][data-section-promotions="1"]
    [data-site-product] {
        flex:
            0 0
            78%;
    }


    [data-site-menu-section][data-section-promotions="1"]
    [data-site-product-media] {
        aspect-ratio:
            4 / 3;
    }
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
|
| Continúa el carrusel.
| Dos cards amplias caben parcialmente en la franja.
| Sin "Ver detalles".
|
*/

@media (min-width: 720px) and (max-width: 1023px) {

    [data-site-menu-section][data-section-promotions="1"]
    [data-site-product] {
        flex:
            0 0
            46%;
    }


    [data-site-menu-section][data-section-promotions="1"]
    [data-site-product-details-hint] {
        display:
            none !important;
    }
}


/*
|--------------------------------------------------------------------------
| PC
|--------------------------------------------------------------------------
|
| Una promo es aproximadamente 20-25% más ancha
| que una card normal de 4 columnas.
|
*/

@media (min-width: 1024px) {

    [data-site-menu-section][data-section-promotions="1"]
    [data-site-product] {
        flex:
            0 0
            31%;
    }


    [data-site-menu-section][data-section-promotions="1"]
    [data-site-product-details-hint] {
        display:
            inline-flex;

        align-items:
            center;

        gap:
            0.25rem;
    }


    [data-site-menu-section][data-section-promotions="1"]
    [data-site-product-details-hint]::after {
        content:
            "›";

        font-size:
            1.15em;

        line-height:
            1;
    }
}

/*
|--------------------------------------------------------------------------
| Promociones - corregir footer vertical
|--------------------------------------------------------------------------
*/

[data-site-menu-section][data-section-promotions="1"]
[data-site-product-content] {
    flex:
        none;

    height:
        auto;
}


[data-site-menu-section][data-section-promotions="1"]
[data-site-product-footer] {
    flex:
        none;

    min-height:
        0;

    height:
        auto;

    justify-content:
        flex-start;

    margin-top:
        0.65rem;

    padding-top:
        0;
}

/*
|--------------------------------------------------------------------------
| Identidad del negocio - ajuste final
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Descripción compacta
|--------------------------------------------------------------------------
*/

[data-site-description-wrap] {
    margin-top:
        0.35rem;
}


[data-site-description-wrap]
[data-site-description] {
    display:
        -webkit-box;

    margin:
        0;

    overflow:
        hidden;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    line-clamp:
        2;
}


[data-site-description-wrap].is-expanded
[data-site-description] {
    display:
        block;

    overflow:
        visible;

    -webkit-line-clamp:
        unset;

    line-clamp:
        unset;
}


[data-site-description-toggle] {
    margin:
        0.25rem 0 0;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        var(--site-brand-strong);

    font:
        inherit;

    font-size:
        0.82rem;

    font-weight:
        800;

    cursor:
        pointer;
}


[data-site-description-toggle][hidden] {
    display:
        none !important;
}


/*
|--------------------------------------------------------------------------
| Móvil
|--------------------------------------------------------------------------
|
| Logo +60%.
| Banner aproximadamente 30% más alto.
|
*/

@media (max-width: 719px) {

    [data-site-banner] {
        aspect-ratio:
            16 / 7.8;
    }


    [data-site-logo] {
        width:
            132px;

        height:
            132px;
    }


    [data-site-brand] {
        margin-top:
            -4rem;
    }


    [data-site-description-wrap] {
        text-align:
            center;
    }


    [data-site-description-toggle] {
        margin-inline:
            auto;
    }
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
|
| Logo +20%.
| Banner aproximadamente 30% más alto.
|
*/

@media (min-width: 720px) and (max-width: 1023px) {

    [data-site-banner] {
        aspect-ratio:
            15 / 5.2;
    }


    [data-site-logo] {
        width:
            130px;

        height:
            130px;
    }


    [data-site-brand] {
        margin-top:
            -3.8rem;
    }
}


/*
|--------------------------------------------------------------------------
| PC
|--------------------------------------------------------------------------
|
| Logo +30%.
| Banner aproximadamente 30% más alto.
|
*/

@media (min-width: 1024px) {

    [data-site-banner] {
        aspect-ratio:
            15 / 5.2;
    }


    [data-site-logo] {
        width:
            140px;

        height:
            140px;
    }


    [data-site-brand] {
        margin-top:
            -4.15rem;
    }
}

/*
|--------------------------------------------------------------------------
| Finalizador de pedidos - presentacion preparada (fase visual)
|--------------------------------------------------------------------------
|
| Solo aplica al dialogo que vive dentro de <template> en site.php.
| El finalizador continua inactivo: este CSS no activa ni envia pedidos.
| No modifica el estilo del carrito actual ni el cuadro de WhatsApp.
|
*/

[data-site-checkout-dialog] {
    width: min(760px, calc(100% - 1.5rem));
    max-width: none;
    max-height: min(92dvh, 900px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    background: var(--site-surface);
    color: var(--site-text);
    box-shadow: 0 24px 80px rgb(12 16 24 / 26%);
}

[data-site-checkout-dialog][open] {
    display: block;
}

[data-site-checkout-dialog]::backdrop {
    background: rgb(12 16 24 / 65%);
    backdrop-filter: blur(5px);
}

[data-site-checkout-panel] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    max-height: min(92dvh, 900px);
    overflow: hidden;
    border-radius: inherit;
    background: var(--site-surface);
}

[data-site-checkout-header] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 1.4rem 1.1rem;
    border-bottom: 1px solid var(--site-border);
}

[data-site-checkout-header] > div {
    min-width: 0;
}

[data-site-checkout-header] p:first-child {
    margin: 0 0 0.3rem;
    color: var(--site-brand-strong);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

[data-site-checkout-header] h2 {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    line-height: 1.2;
}

[data-site-checkout-header] p:last-child {
    margin: 0.4rem 0 0;
    color: var(--site-text-soft);
    font-size: 0.88rem;
    line-height: 1.4;
}

[data-site-checkout-close] {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--site-border);
    border-radius: 50%;
    background: var(--site-surface-soft);
    color: var(--site-text);
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

[data-site-checkout-form] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
}

[data-site-checkout-scroll] {
    min-width: 0;
    min-height: 0;
    padding: 1.2rem 1.4rem 1.35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

[data-site-checkout-modes],
[data-site-checkout-channels] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.65rem;
    min-width: 0;
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

[data-site-checkout-modes] legend,
[data-site-checkout-channels] legend {
    width: 100%;
    margin: 0 0 0.75rem;
    padding: 0;
    color: var(--site-text);
    font-size: 0.98rem;
    font-weight: 850;
    line-height: 1.35;
}

[data-site-checkout-mode-option],
[data-site-checkout-channel-option] {
    display: flex;
    flex: 1 1 175px;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
    min-height: 72px;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--site-border);
    border-radius: 15px;
    background: var(--site-surface);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

[data-site-checkout-channel-option] {
    align-items: center;
    min-height: 54px;
}

[data-site-checkout-mode-option] input,
[data-site-checkout-channel-option] input {
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    margin: 0.16rem 0 0;
    accent-color: var(--site-brand-strong);
    cursor: pointer;
}

[data-site-checkout-channel-option] input {
    margin-top: 0;
}

[data-site-checkout-mode-option] span,
[data-site-checkout-channel-option] span {
    min-width: 0;
    color: var(--site-text);
    font-size: 0.9rem;
    font-weight: 750;
}

[data-site-checkout-mode-option] strong,
[data-site-checkout-mode-option] small {
    display: block;
}

[data-site-checkout-mode-option] strong {
    font-size: 0.92rem;
    line-height: 1.35;
}

[data-site-checkout-mode-option] small {
    margin-top: 0.25rem;
    color: var(--site-text-soft);
    font-size: 0.77rem;
    font-weight: 400;
    line-height: 1.4;
}

[data-site-checkout-mode-option]:has(input:checked),
[data-site-checkout-channel-option]:has(input:checked) {
    border-color: var(--site-brand);
    background: var(--site-brand-soft);
}

[data-site-checkout-mode-option]:focus-within,
[data-site-checkout-channel-option]:focus-within {
    outline: 3px solid color-mix(in srgb, var(--site-brand) 26%, transparent);
    outline-offset: 2px;
}

[data-site-checkout-details] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0 0 1.2rem;
}

[data-site-checkout-details] label,
[data-site-checkout-delivery] label,
[data-site-checkout-table] label {
    display: grid;
    align-content: start;
    gap: 0.4rem;
    min-width: 0;
}

[data-site-checkout-details] label > span,
[data-site-checkout-delivery] label > span,
[data-site-checkout-table] label > span {
    color: var(--site-text);
    font-size: 0.82rem;
    font-weight: 750;
}

[data-site-checkout-details] input,
[data-site-checkout-delivery] textarea,
[data-site-checkout-table] input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 0.72rem 0.82rem;
    border: 1px solid var(--site-border);
    border-radius: 12px;
    background: var(--site-surface);
    color: var(--site-text);
    font: inherit;
    font-size: 16px;
    line-height: 1.45;
}

[data-site-checkout-delivery] textarea {
    min-height: 86px;
    resize: vertical;
}

[data-site-checkout-details] input::placeholder,
[data-site-checkout-delivery] textarea::placeholder,
[data-site-checkout-table] input::placeholder {
    color: var(--site-text-soft);
    opacity: 0.85;
}

[data-site-checkout-dialog] input:focus-visible,
[data-site-checkout-dialog] textarea:focus-visible,
[data-site-checkout-dialog] button:focus-visible,
[data-site-checkout-dialog] a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--site-brand) 35%, white);
    outline-offset: 2px;
}

[data-site-checkout-delivery],
[data-site-checkout-table] {
    display: grid;
    gap: 0.85rem;
    margin: 0 0 1.25rem;
    padding: 1rem;
    border: 1px solid var(--site-border);
    border-radius: 16px;
    background: var(--site-surface-soft);
}

[data-site-checkout-delivery] h3,
[data-site-checkout-table] h3 {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.35;
}

[data-site-checkout-delivery] p,
[data-site-checkout-table] p {
    margin: 0;
    color: var(--site-text-soft);
    font-size: 0.78rem;
    line-height: 1.45;
}

[data-site-checkout-location] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

[data-site-checkout-gps],
[data-site-checkout-gps-clear] {
    min-height: 43px;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--site-border);
    border-radius: 11px;
    background: var(--site-surface);
    color: var(--site-text);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
}

[data-site-checkout-location] [data-site-checkout-gps-status] {
    flex: 1 0 100%;
    min-height: 1.2em;
    color: var(--site-text-soft);
}

[data-site-checkout-dialog] [hidden] {
    display: none !important;
}

[data-site-checkout-message] {
    margin: 0.8rem 0 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid #e4bdbd;
    border-radius: 12px;
    background: #fff4f4;
    color: #8d2525;
    font-size: 0.82rem;
    line-height: 1.45;
}

[data-site-checkout-footer] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.6rem;
    padding: 1rem 1.4rem calc(1rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--site-border);
    background: var(--site-surface);
    box-shadow: 0 -6px 20px rgb(0 0 0 / 3%);
}

[data-site-checkout-back],
[data-site-checkout-continue] {
    min-height: 49px;
    padding: 0.7rem 1rem;
    border-radius: 13px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 850;
    cursor: pointer;
}

[data-site-checkout-back] {
    border: 1px solid var(--site-border);
    background: var(--site-surface);
    color: var(--site-text);
}

[data-site-checkout-continue] {
    border: 1px solid transparent;
    background: var(--site-brand-strong);
    color: #fff;
}

[data-site-checkout-continue]:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

[data-site-checkout-footer] p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--site-text-soft);
    font-size: 0.73rem;
    line-height: 1.45;
    text-align: center;
}

[data-site-checkout-footer] a {
    color: var(--site-brand-strong);
    font-weight: 750;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

@media (max-width: 719px) {
    [data-site-checkout-dialog] {
        width: calc(100% - 0.65rem);
        max-height: calc(100dvh - 0.65rem);
        border-radius: 19px;
    }

    [data-site-checkout-panel] {
        max-height: calc(100dvh - 0.65rem);
    }

    [data-site-checkout-header] {
        padding: 0.95rem 1rem 0.8rem;
    }

    [data-site-checkout-header] h2 {
        font-size: 1.35rem;
    }

    [data-site-checkout-close] {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    [data-site-checkout-scroll] {
        padding: 0.9rem 1rem 1.15rem;
        scrollbar-gutter: auto;
    }

    [data-site-checkout-mode-option] {
        flex-basis: 100%;
        min-height: 62px;
    }

    [data-site-checkout-channel-option] {
        flex-basis: 140px;
    }

    [data-site-checkout-details] {
        grid-template-columns: minmax(0, 1fr);
    }

    [data-site-checkout-footer] {
        padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
    }

    [data-site-checkout-back],
    [data-site-checkout-continue] {
        padding: 0.7rem 0.65rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 380px) {
    [data-site-checkout-channel-option] {
        flex-basis: 100%;
    }

    [data-site-checkout-footer] p {
        font-size: 0.7rem;
    }
}

/*
|--------------------------------------------------------------------------
| Finalizador: opciones visuales y pasos sin texto redundante
|--------------------------------------------------------------------------
|
| Solo afecta la plantilla del nuevo finalizador. La navegacion del wizard,
| los datos y el checkout existente por WhatsApp no se modifican.
|
*/

/* El progreso sigue funcionando en JS; omitimos su lista visual. */
[data-site-checkout-progress],
[data-site-checkout-header] #site-checkout-description,
[data-site-checkout-step-intro],
[data-site-checkout-mode-option] small {
    display: none !important;
}

/* Tarjetas compactas, con el icono sobre el nombre (incluido en movil). */
[data-site-checkout-modes],
[data-site-checkout-channels] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    align-items: stretch;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
}

[data-site-checkout-mode-option],
[data-site-checkout-channel-option] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 122px;
    padding: 1.05rem 0.45rem 0.8rem;
    text-align: center;
}

[data-site-checkout-mode-option] input,
[data-site-checkout-channel-option] input {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    z-index: 1;
    width: 18px;
    height: 18px;
    margin: 0;
}

[data-site-checkout-mode-option] [data-site-checkout-option-icon],
[data-site-checkout-channel-option] [data-site-checkout-option-icon] {
    display: grid;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    place-items: center;
    color: var(--site-text);
}

[data-site-checkout-option-icon] svg {
    display: block;
    width: 40px;
    height: 40px;
}

[data-site-checkout-mode-option]:has(input:checked) [data-site-checkout-option-icon],
[data-site-checkout-channel-option]:has(input:checked) [data-site-checkout-option-icon] {
    color: var(--site-brand-strong);
}

[data-site-checkout-mode-option] [data-site-checkout-option-copy],
[data-site-checkout-channel-option] [data-site-checkout-option-copy] {
    display: block;
    width: 100%;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: break-word;
}

[data-site-checkout-mode-option] [data-site-checkout-option-copy] strong {
    font-size: inherit;
    line-height: inherit;
}

@media (max-width: 719px) {
    [data-site-checkout-modes],
    [data-site-checkout-channels] {
        grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
        gap: 0.5rem;
    }

    [data-site-checkout-mode-option],
    [data-site-checkout-channel-option] {
        min-height: 116px;
        padding: 0.95rem 0.35rem 0.7rem;
        gap: 0.35rem;
    }

    [data-site-checkout-mode-option] input,
    [data-site-checkout-channel-option] input {
        top: 0.5rem;
        left: 0.5rem;
        width: 17px;
        height: 17px;
    }

    [data-site-checkout-mode-option] [data-site-checkout-option-icon],
    [data-site-checkout-channel-option] [data-site-checkout-option-icon] {
        width: 42px;
        height: 42px;
    }

    [data-site-checkout-option-icon] svg {
        width: 36px;
        height: 36px;
    }

    [data-site-checkout-mode-option] [data-site-checkout-option-copy],
    [data-site-checkout-channel-option] [data-site-checkout-option-copy] {
        font-size: 0.8rem;
        line-height: 1.22;
    }
}


/*
|--------------------------------------------------------------------------
| Finalizador: campos mas visibles y textos legales discretos
|--------------------------------------------------------------------------
| Afecta exclusivamente al finalizador preparado, sin alterar el carrito.
*/
[data-site-checkout-details] input,
[data-site-checkout-delivery] textarea,
[data-site-checkout-table] input {
    border-color: color-mix(in srgb, var(--site-text) 16%, var(--site-border));
    box-shadow: 0 2px 7px rgb(18 23 30 / 8%);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

[data-site-checkout-details] input:focus,
[data-site-checkout-delivery] textarea:focus,
[data-site-checkout-table] input:focus {
    border-color: var(--site-brand);
    box-shadow: 0 2px 9px rgb(18 23 30 / 11%);
}

[data-site-checkout-disclaimer] {
    margin-top: 0.65rem;
    color: var(--site-text-soft);
    font-size: 0.79rem;
    line-height: 1.45;
}

[data-site-checkout-disclaimer] p {
    margin: 0 0 0.55rem;
    font-size: inherit;
    line-height: inherit;
}

[data-site-checkout-disclaimer] p:last-child {
    margin-bottom: 0;
}

[data-site-checkout-disclaimer] a {
    color: var(--site-text);
    font-weight: 650;
    text-decoration-thickness: 1px;
}

/*
|--------------------------------------------------------------------------
| Finalizador: aviso visible antes de compartir ubicacion GPS
|--------------------------------------------------------------------------
| Solo modifica el texto informativo ya existente debajo del boton GPS.
| No cambia los permisos de ubicacion ni el comportamiento del formulario.
*/
[data-site-checkout-delivery] [data-site-checkout-gps-help] {
    position: relative;
    margin: 0;
    padding: 0.8rem 0.85rem 0.8rem 2.85rem;
    border: 1px solid #ebce94;
    border-left: 3px solid #cf8c24;
    border-radius: 12px;
    background: #fff6e2;
    color: #62451a;
    font-size: 0.82rem;
    font-weight: 550;
    line-height: 1.5;
    box-shadow: 0 2px 5px rgb(86 60 21 / 6%);
}

[data-site-checkout-delivery] [data-site-checkout-gps-help]::before {
    content: "!";
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #d08c22;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1;
}