/* demo-heladeria — base del demo. El diseño vive en heladeria-ds.css (hl-*);
   acá solo van las neutralizaciones de Porto y el re-skin de vistas compartidas
   (catálogo del módulo menu, services) que no tienen vista propia del demo. */

/* Porto: sin sombras de header por defecto, el DS dibuja su borde */
html.demo-heladeria #header .header-body { box-shadow: none; }

/* El loader hereda el fondo crema */
html.demo-heladeria .bounce-loader { background: #FDF7F1; }

/* Páginas interiores compartidas: el page-header clásico toma la banda tinta */
html.demo-heladeria .page-header {
    background: #23150C !important;
    border: 0;
    padding: 42px 0;
}
html.demo-heladeria .page-header h1 { font-family: "Fraunces", Georgia, serif; font-weight: 800; color: #FFF8F1; }
html.demo-heladeria .page-header .breadcrumb a, html.demo-heladeria .page-header .breadcrumb .active { color: #C9B6A6; }

/* Formularios sobre crema */
html.demo-heladeria .form-control {
    border: 1px solid #EADCCC;
    border-radius: 8px;
    background: #FFFFFF;
    color: #23150C;
}
html.demo-heladeria .form-control:focus { border-color: #FF6600; box-shadow: 0 0 0 2px rgba(255,102,0,.18); }

/* ============================================================
   Re-skin del catálogo (módulo menu, vista compartida).
   El markup y el JS del carrito NO se tocan: contrato intacto.
   Sin fotos de producto la lista densa es más mayorista que una
   grilla de recuadros vacíos; cuando haya fotos, se evalúa la
   vista en grilla propia del demo.
   ============================================================ */
html.demo-heladeria .menu-page { background: #FDF7F1; }

/* chips de sección sticky */
html.demo-heladeria .menu-sticky-nav { background: #FDF7F1; border-bottom: 1px solid #EADCCC; box-shadow: none; }
html.demo-heladeria .menu-tabs a, html.demo-heladeria .menu-tabs .nav-link {
    border-radius: 999px; border: 1px solid #EADCCC; background: #FFFFFF; color: #23150C;
    font-weight: 600; font-size: 13px;
}
html.demo-heladeria .menu-tabs a.active, html.demo-heladeria .menu-tabs .nav-link.active,
html.demo-heladeria .menu-tabs a:hover { background: #FF6600; border-color: #FF6600; color: #fff; }

/* card de sección */
html.demo-heladeria .card.box-shadow-4 {
    border: 1px solid #EADCCC !important; border-radius: 10px !important;
    box-shadow: 0 2px 4px rgba(35, 21, 12, 0.08) !important;
}
html.demo-heladeria .card .card-body h4 {
    font-family: "Fraunces", Georgia, serif; letter-spacing: 0.04em; color: #23150C;
}
html.demo-heladeria .card .card-body hr { background: #EADCCC; opacity: 1; }

/* imagen de sección: esquinas y sombra del DS */
html.demo-heladeria .menu-section-image-col img { border-radius: 10px; box-shadow: 0 2px 4px rgba(35,21,12,.08) !important; }

/* fila de producto */
html.demo-heladeria .menu-product-card { border-bottom: 1px dashed #EADCCC; }
html.demo-heladeria .menu-product-name { font-family: "Public Sans", sans-serif; font-weight: 600; color: #23150C; }
html.demo-heladeria .menu-product-price {
    font-family: "IBM Plex Mono", monospace; font-weight: 600; color: #C24800;
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
html.demo-heladeria .menu-product-desc, html.demo-heladeria .menu-product-card p { color: #7C6A5C; }
html.demo-heladeria .menu-product-badge { background: #FFE7D4; color: #C24800; border-radius: 999px; }
html.demo-heladeria .menu-product-badge-trending { background: #DEF0F5; color: #17697E; }

/* controles: agregar / stepper */
html.demo-heladeria .menu-add-btn, html.demo-heladeria .qty-btn, html.demo-heladeria .cart-qty-btn {
    border-radius: 999px;
}
html.demo-heladeria .menu-add-btn { background: #FF6600; border-color: #FF6600; }
html.demo-heladeria .menu-add-btn:hover { background: #C24800; border-color: #C24800; }

/* buscador */
html.demo-heladeria .menu-search input, html.demo-heladeria input[type="search"] {
    border: 1px solid #EADCCC; border-radius: 999px; background: #fff;
}

/* FAB y panel del carrito */
html.demo-heladeria #cart-fab, html.demo-heladeria .cart-fab { background: #FF6600 !important; }
html.demo-heladeria #cart-whatsapp-btn { border-radius: 999px; }

/* ============================================================
   Densidad mayorista del catálogo. El layout del demo (imagen
   lateral + card alternada, herencia restaurante) hace página
   larguísima y desperdicia el ancho: para compra al por mayor
   manda la lista de precios. La imagen de sección pasa a banner
   compacto y la card ocupa todo el ancho con filas más apretadas.
   Solo CSS: markup y carrito intactos.
   ============================================================ */
html.demo-heladeria .menu-section-image-col,
html.demo-heladeria .custom-negative-margin-top-1 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0 !important;
}
html.demo-heladeria .menu-section-image-col img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #EADCCC;
    box-shadow: none !important;
    display: block;
    margin-bottom: 14px;
}
html.demo-heladeria .custom-negative-margin-top-1 {
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 2.2rem !important;
}

html.demo-heladeria .card .card-body.p-5 { padding: 1.6rem 1.8rem !important; }
html.demo-heladeria .menu-product-card { padding-top: .55rem; padding-bottom: .55rem; }
html.demo-heladeria .menu-product-card:last-child { border-bottom: 0; }
/* el col de imagen traía un min-height del layout lateral: fuera */
html.demo-heladeria .menu-section-image-col { margin-bottom: 0; min-height: 0 !important; height: auto !important; }

/* Una lista de precios no "aparece": las animaciones escalonadas de Porto
   dejaban las secciones fantasma hasta scrollear. Fuera para todo el demo
   (los reveals propios hl-reveal no usan este plugin y siguen andando). */
html.demo-heladeria .appear-animation {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    visibility: visible !important;
}
/* banner y card pegados: el aire entre secciones lo pone la card (mb) */
html.demo-heladeria .row.pt-4.mt-5:has(.menu-section-image-col) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ============================================================
   Catálogo con SIDEBAR (≥1200px). Un solo ítem por pantalla era
   ritmo de restaurante: acá manda la lista de precios continua.
   .main pasa a grid de 2 columnas: nav de secciones fijo a la
   izquierda (vertical, con buscador arriba), listado denso a la
   derecha, banners fuera (el sidebar ya navega). Solo CSS.
   ============================================================ */
@media (min-width: 1200px) {
    html.demo-heladeria .main:has(#menu.container) {
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        column-gap: 32px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
    }
    /* franja y cabecera cruzan las dos columnas; la cabecera queda como
       caja redondeada al ancho del grid (sin hacks de vw, sin overflow) */
    html.demo-heladeria .main:has(#menu.container) > .hl-conditions {
        grid-column: 1 / -1;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    html.demo-heladeria .main:has(#menu.container) > .page-header {
        grid-column: 1 / -1;
        border-radius: 10px;
        margin-top: 26px;
        padding: 34px 0;
    }

    /* nav de secciones → sidebar sticky vertical */
    html.demo-heladeria .main:has(#menu.container) > .menu-sticky-nav {
        grid-column: 1;
        align-self: start;
        position: sticky;
        top: 96px;
        margin-top: 34px;
        background: transparent;
        border: 0;
        box-shadow: none !important;
        padding: 0;
    }
    html.demo-heladeria .menu-sticky-nav .container { padding: 0; margin: 0; max-width: none; }
    html.demo-heladeria .menu-sticky-inner { display: flex; flex-direction: column; gap: 14px; }
    html.demo-heladeria .menu-sticky-nav .menu-search,
    html.demo-heladeria .menu-sticky-nav input[type="search"] { width: 100%; }
    html.demo-heladeria .menu-tabs {
        display: flex; flex-direction: column; align-items: stretch; gap: 4px;
        overflow: visible; white-space: normal;
    }
    html.demo-heladeria .menu-tabs a, html.demo-heladeria .menu-tabs .nav-link {
        display: block; text-align: left; border-radius: 8px; border: 0;
        background: transparent; padding: 9px 12px; font-size: 14px; color: #4A3A2E;
    }
    html.demo-heladeria .menu-tabs a:hover { background: #F7EDE2; color: #C24800; }
    html.demo-heladeria .menu-tabs a.active, html.demo-heladeria .menu-tabs .nav-link.active {
        background: #FFE7D4; color: #C24800; font-weight: 700;
    }

    /* listado a la derecha, continuo */
    html.demo-heladeria #menu.container { grid-column: 2; margin: 0 !important; padding: 34px 0 40px !important; max-width: none; }
    /* banners de sección fuera: el sidebar ya cumple esa función */
    html.demo-heladeria #menu .row:has(.menu-section-image-col) { display: none; }
    html.demo-heladeria #menu .custom-negative-margin-top-1 { margin-bottom: 1.4rem !important; }
    html.demo-heladeria #menu .custom-negative-margin-top-1 > [class*="col-"] { padding: 0; }
}

/* filas de producto a UNA línea (todas las resoluciones):
   [nombre · unidad ......... $precio] [agregar/stepper] */
html.demo-heladeria .menu-product-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 18px;
    align-items: center;
}
html.demo-heladeria .menu-product-head { grid-column: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0; }
html.demo-heladeria .menu-product-desc { grid-column: 1; margin: 2px 0 0; font-size: 12.5px; }
html.demo-heladeria .menu-product-actions { grid-column: 2; grid-row: 1 / 3; margin: 0; }
html.demo-heladeria .menu-product-card { padding-top: .7rem; padding-bottom: .7rem; }

/* aviso bajo el botón de confirmar: el WhatsApp es el paso siguiente, no una sorpresa */
html.demo-heladeria .cart-hint-wa { display: block; text-align: center; font-size: 11.5px; color: #7C6A5C; margin-top: 6px; }

/* carrito: identidad del cliente logueado en lugar del campo de nombre */
html.demo-heladeria .cart-known-client {
    display: flex; align-items: center; gap: 8px; font-size: 13px; color: #23150C;
    background: #F7EDE2; border: 1px solid #EADCCC; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px;
}
html.demo-heladeria .cart-known-client i { color: #1F7A46; }
html.demo-heladeria .cart-form-row input[hidden] { display: none; }

/* La lista densa no repite la foto de sección en cada fila: las imágenes
   de producto viven en las tarjetas de la home y en la futura grilla. */
html.demo-heladeria .menu-product-card .menu-product-img { display: none; }