/* LoxiCuba: SOLO lo que anadimos encima del tema Metronic (frontend/shop).
   Nada de rehacer el tema: aqui van la zona, las etiquetas de entrega,
   el selector de cantidad y los ajustes de movil. */

/* ---------- LO QUE SE REPITE ----------
   Cuatro valores, en un solo sitio. Si manana el rojo de la casa cambia o las
   esquinas se quieren mas o menos redondas, se toca aqui y no en treinta
   reglas. El rojo es el del tema (themes/red.css), no uno inventado. */
:root {
    /* EL rojo de la casa, el del boton de Categorias. Habia tres rondando
       (#e02222, #e84d1c y #e6400c) y la tienda parecia de dos marcas. */
    --lx-rojo: #e02222;
    --lx-rojo-oscuro: #c41c1c;
    --lx-tinta: #1f2937;
    /* Gris de texto secundario. Estaba en #9ca3af y en un movil, con sol y a
       pulso, no se leia: sobre blanco daba un contraste de 2.5:1, por debajo
       del minimo accesible (4.5:1). Este da 5.7:1. */
    --lx-gris: #55606e;
    --lx-radio: 12px;
    --lx-radio-chico: 8px;
    --lx-sombra: 0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);
    /* La letra del sistema, que es la que usan las aplicaciones de las tiendas
       grandes: en cada telefono sale la suya (San Francisco, Roboto, Segoe) y
       por eso se lee como una app y no como una web de plantilla. */
    --lx-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---------- TIPOGRAFIA ----------
   Metronic reparte dos fuentes: Open Sans para el texto y PT Sans Narrow
   (condensada) para titulos, precios, migas y botones. La condensada es lo que
   le daba ese aire de plantilla de 2013, y ademas se lee peor en un movil.

   Se cambian de golpe porque el tema las mete con la abreviatura `font:` en
   docenas de reglas (style-shop.css: lineas 5, 60, 322, 411, 446...) y no hay
   forma de ganarles una a una sin escribir un fichero entero de parches.
   Los iconos quedan fuera: <i>, .fa y los glyphicons tiran de su propia fuente
   y si se les cambia la familia desaparecen. */
body,
body *:not(i):not(.fa):not([class*="fa-"]):not([class*="glyphicon"]) {
    font-family: var(--lx-fuente) !important;
}

body { font-size: 14px; line-height: 1.5; color: var(--lx-tinta); }
h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--lx-tinta); }

/* La miga de pan iba en VERSALITAS y condensada: dos cosas que cansan la
   vista. En minusculas ocupa menos y se lee de un golpe. */
.breadcrumb { text-transform: none; font-size: 13px; background: none; padding-left: 0; }
.breadcrumb > .active { color: var(--lx-gris); }

/* ---------- UN SOLO ROJO ----------
   El tema pinta de naranja (#e84d1c / #e6400c) los precios, el boton del
   buscador y los totales, mientras el boton de Categorias y el del carrito van
   en rojo. Aqui se iguala todo al rojo de la casa. Lleva !important donde el
   tema usa la abreviatura `font`/`background` con mas peso. */
.btn-primary,
.input-group-btn .btn-primary {
    background: var(--lx-rojo) !important;
    border-color: var(--lx-rojo) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--lx-rojo-oscuro) !important;
    border-color: var(--lx-rojo-oscuro) !important;
}

/* El carrito de la cabecera seguia naranja en escritorio: themes/red.css:246
   se lo pinta con `.top-cart-block .fa-shopping-cart`. En movil ya lo
   pisabamos; ahora en los dos. */
.top-cart-block .fa-shopping-cart { background: var(--lx-rojo) !important; }
/* OJO: aqui puse un dia `.top-cart-info a { color: #fff }` pensando en el icono
   y lo que hice fue dejar el texto "0 art. | $0.00" en blanco sobre el fondo
   gris claro de su pastilla: invisible. El blanco es solo para el icono, que va
   sobre el circulo rojo; el texto de al lado va oscuro. */
.top-cart-block .fa-shopping-cart,
.top-cart-block .fa-shopping-cart:hover { color: #fff !important; }
.top-cart-info,
.top-cart-info a { color: var(--lx-tinta); }

.pi-price,
.goods-page-price strong, .goods-page-total strong,
.checkout-price strong, .checkout-total strong,
.shopping-total strong, .checkout-total-block strong,
.sidebar-products .price,
.require { color: var(--lx-rojo); }

.product-item .add2cart:hover { background: var(--lx-rojo-oscuro) !important; border-color: var(--lx-rojo-oscuro) !important; }

/* Los enlaces tambien iban en naranja */
a { color: var(--lx-rojo); }
a:hover, a:focus { color: var(--lx-rojo-oscuro); }
/* Salvo los nombres de producto: ahi el rojo despista, porque no es una accion
   sino el titulo de lo que estas mirando. */
.goods-page-description a,
.product-item h3.product_name a { color: var(--lx-tinta); }
/* Y el pie, que es oscuro: en rojo no se leeria */
.pre-footer a, .pre-footer-light a { color: #d1d5db; }
.pre-footer a:hover { color: #fff; }

/* ---------- ESQUINAS REDONDEADAS ----------
   Metronic trae en assets/global/css/components.css (linea 17) un reseteo a lo
   bruto:
       div, h1..h6, p, a, button, ul, li, ... { border-radius: 0 !important }
   o sea, TODO cuadrado, y con !important, que es lo que daba ese aire de 2013.
   Ni un style="" en linea puede con eso: la unica forma de recuperar la curva
   es responder con !important, y se hace aqui, en un solo sitio y a la vista,
   para no ir sembrandolos por el fichero.
   Si algun dia se cambia el tema, este bloque se borra entero. */
.product-item                { border-radius: var(--lx-radio) !important; }
.product-item .cp-addtocart,
.q-selector,
.labels-container span,
.chip                        { border-radius: 999px !important; }
.cp-wishlist                 { border-radius: 50% !important; }
/* Botones y campos de la tienda, en movil y en escritorio: el aspecto tiene
   que ser el mismo en los dos, que la gente usa ambos. */
.btn, .form-control,
.input-group-btn .btn        { border-radius: var(--lx-radio-chico) !important; }

/* ---------- CABECERA ---------- */
.pre-header .additional-shop-info .fa { margin-right: 5px; }

.selector-zona {
    font-weight: 600;
}

.selector-zona .fa { margin-right: 4px; }

.header .buscador {
    float: right;
    width: 320px;
    margin: 32px 20px 0 0;
    position: relative;
}

.header .buscador .form-control { height: 34px; }

.q-sugerencias {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-top: 0;
    z-index: 1030;
    max-height: 340px;
    overflow-y: auto;
    text-align: left;
}

.q-sugerencias a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-bottom: 1px solid #f1f1f1;
    color: #333;
    font-size: 13px;
}

.q-sugerencias a:hover { background: #f6f8f7; }
.q-sugerencias img { width: 34px; height: 34px; object-fit: contain; }

.aviso-zona {
    background: #fff4e5;
    border-bottom: 1px solid #f3d9b5;
    padding: 10px 0;
    font-size: 14px;
}

.mini-carrito-vacio { padding: 20px 10px; color: var(--lx-gris); text-align: center; }

/* Cuanto falta para el minimo, dentro del desplegable de la cabecera.
   Version reducida de .barra-meta: una linea y un riel de 4px, sin caja propia
   ni porcentaje escrito. El panel mide 364px y ya lleva lista, subtotal y dos
   botones: cualquier cosa con marco lo vuelve denso.
   OJO: Metronic flota y da ancho fijo a span/strong/em dentro de
   .top-cart-content (style-shop.css:231), de ahi el float:none. */
.top-cart-content .mini-meta {
    padding: 8px 12px 10px;
    border-bottom: 1px solid #f1f2f4;
}
.top-cart-content .mini-meta span {
    float: none;
    width: auto;
    padding-top: 0;
    margin-right: 0;
    display: block;
    font-size: 12px;
    color: var(--lx-tinta);
    margin-bottom: 6px;
}
.top-cart-content .mini-meta-riel {
    height: 4px;
    background: #eef0f3;
    border-radius: 999px !important;
    overflow: hidden;
}
.top-cart-content .mini-meta-riel span {
    display: block;
    height: 100%;
    margin: 0;
    background: var(--lx-rojo);
    border-radius: 999px !important;
    transition: width .35s ease;
}

/* ---------- PORTADA ---------- */
.hero {
    background: #3f4c6b;
    color: #fff;
    padding: 30px 26px;
    margin-bottom: 25px;
}

.hero h1 { font-size: 26px; margin: 0 0 10px; font-weight: 600; }
.hero p { margin-bottom: 16px; opacity: .92; }

.seccion-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.seccion-titulo h1,
.seccion-titulo h2 { font-size: 20px; margin: 0; }
.seccion-titulo small { font-size: 13px; color: var(--lx-gris); font-weight: 400; margin-left: 6px; }
.seccion-titulo a { font-size: 13px; }

/* ---------- TARJETA DE PRODUCTO ---------- */
/* Filas de la misma altura: sin esto las tarjetas dejan huecos */
.row.productos { display: flex; flex-wrap: wrap; }
.row.productos .producto-col { display: flex; margin-bottom: 12px; }
.row.productos .product-item { width: 100%; display: flex; flex-direction: column; }

/* Tarjeta: blanca, esquinas redondeadas y una sombra suave en vez del borde
   gris. Es lo que separa una tienda de 2015 de una de ahora. El texto lleva su
   propio padding porque la imagen va a sangre, de borde a borde. */
.product-item {
    background: #fff;
    border: 0;
    border-radius: var(--lx-radio);
    box-shadow: var(--lx-sombra);
    overflow: hidden;
    padding: 0 0 10px;
}

.product-item.sin-stock { opacity: .75; }
.product-item .pi-img-wrapper { position: relative; background: #fff; }
.product-item .pi-img-wrapper img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: contain;
    background: #fff;
    padding: 10px;
}

.sin-imagen {
    display: block;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    font-size: 40px;
}

/* El texto de la tarjeta, alineado con los bordes redondeados */
.product-item h3.product_name,
.product-item .pi-marca,
.product-item .pi-price,
.product-item .pi-info,
.product-item .pi-cart { padding-left: 10px; padding-right: 10px; }

/* OJO con esto, que costo encontrarlo. Metronic define en style-shop.css:370
   una capa de hover para CUALQUIER div dentro de .pi-img-wrapper:

       .pi-img-wrapper div { display:none; width:100%; height:100%;
                             background: rgba(0,0,0,0.3); position:absolute; }

   Nuestra `.labels-container` es un div ahi dentro, asi que heredaba las tres
   cosas: se escondia (adios al -15% y al plazo, que no se han visto NUNCA),
   y cuando se mostraba tapaba la foto entera con un velo gris y se comia el
   clic. Hay que deshacer las tres, no solo el display. */
.product-item .pi-img-wrapper .labels-container {
    position: absolute;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    background: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    text-align: left;
    z-index: 2;
    /* Son un adorno: que el dedo atraviese y abra la ficha */
    pointer-events: none;
}

.labels-container span {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    color: #fff;
    letter-spacing: .2px;
}

.label-oferta  { background: #dc2626; }
.label-combo   { background: #2563eb; }
.label-agotado { background: #6b7280; }
.label-entrega { background: #eaf6ee; color: #146b3a !important; border: 1px solid #bfe3cd; }

.cp-wishlist {
    position: absolute;
    top: 8px; right: 8px;
    width: 32px; height: 32px;
    line-height: 32px;
    text-align: center;
    background: #fff;
    box-shadow: var(--lx-sombra);
    border-radius: 50%;
    color: var(--lx-gris);
    z-index: 2;
}

.cp-wishlist.activa { color: var(--lx-rojo); }

/* El nombre: dos lineas y a otra cosa. En VERSALITAS no se lee de un vistazo,
   que es justo lo que hace falta en una rejilla de movil. */
.product-item h3.product_name {
    /* El nombre es lo primero que se lee de la tarjeta: a 13px quedaba por
       debajo del texto corriente de la pagina y parecia un pie de foto.
       Con dos lineas a 15px, el alto minimo sube a 40. */
    min-height: 40px;
    margin: 8px 0 4px;
    font-size: 15px;
    line-height: 1.33;
    font-weight: 500;
    text-transform: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-item h3.product_name a { color: var(--lx-tinta); }
.product-item .pi-marca { font-size: 12px; text-transform: uppercase; color: var(--lx-gris); margin-bottom: 2px; }
.product-item .pi-marca a { color: var(--lx-gris); }

/* El precio manda: grande, en negrita y en rojo. El tachado, pequeno y gris al
   lado, para que la rebaja se lea sola. */
.product-item .pi-price { margin-bottom: 2px; }
.product-item .pi-price .regular_price {
    font-size: 19px;
    font-weight: 700;
    color: var(--lx-rojo);
    line-height: 1.2;
}
.product-item .pi-price .old_price { font-size: 13px; color: var(--lx-gris); text-decoration: line-through; margin-left: 6px; font-style: normal; }
.product-item .pi-info { font-size: 12px; color: var(--lx-gris); margin-bottom: 3px; }
/* El plazo, en verde y debajo del precio: informa sin taparle la foto */
.product-item .pi-entrega { color: #146b3a; font-weight: 600; }
.product-item .pi-entrega .fa { margin-right: 3px; }

.product-item .pi-cart {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
}

/* Selector de cantidad  -  n  + */
.q-selector {
    display: flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    flex: 1;
    background: #fff;
}

.q-selector button {
    background: #f6f7f9;
    border: 0;
    width: 32px;
    height: 34px;
    font-size: 16px;
    line-height: 1;
    color: #374151;
}

.q-selector button:disabled { opacity: .4; }

.q-selector .q-input {
    width: 100%;
    min-width: 26px;
    border: 0;
    text-align: center;
    height: 34px;
    font-size: 14px;
    font-weight: 600;
    -moz-appearance: textfield;
}

.q-selector .q-input::-webkit-outer-spin-button,
.q-selector .q-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* El boton de comprar se ve: relleno, redondo y del color de la casa. Antes era
   un cuadrado blanco con un icono gris que no parecia pulsable. */
.product-item .cp-addtocart {
    width: 40px;
    height: 34px;
    padding: 0;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: var(--lx-rojo);
    color: #fff;
    font-size: 15px;
}
.product-item .cp-addtocart:hover,
.product-item .cp-addtocart:focus { background: var(--lx-rojo-oscuro); color: #fff; }

/* El icono se quedaba gris (#aaa) sobre el rojo: no lo hereda del boton, se lo
   pinta el tema por su cuenta. Se le obliga a seguir al boton. */
.product-item .cp-addtocart i,
.product-item .cp-addtocart .fa { color: inherit !important; }

/* Al pulsar, el JS deja el boton desactivado 1,2 s y le pone un tic mientras
   confirma (js/shop.js:151). Con el gris de "desactivado" quedaba un tic casi
   invisible; ese momento es un EXITO, no una prohibicion, asi que va en verde.
   El gris se reserva para lo que de verdad no se puede comprar. */
.product-item .cp-addtocart:disabled { background: #146b3a; color: #fff; opacity: 1; }
.product-item.sin-stock .cp-addtocart:disabled { background: #d1d5db; color: #fff; }

/* ---------- CATALOGO ---------- */
/* Flexible tambien en escritorio: sin esto la fila seguia siendo un .row con dos
   columnas flotadas, `align-items` no hacia nada y el texto quedaba centrado a
   ojo con un `padding-top: 6px`. */
.list-view-sorting {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.catalogo-info { font-size: 14px; }
.form-orden { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.form-orden label { margin: 0; font-weight: 400; }
.form-orden select { width: auto; min-width: 190px; display: inline-block; }

/* Los filtros, en cajas blancas como todo lo demas */
.sidebar-filter {
    background: #fff;
    border: 0;
    border-radius: var(--lx-radio) !important;
    box-shadow: var(--lx-sombra);
    padding: 14px;
}
.sidebar-filter h2 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--lx-gris);
    margin: 0 0 10px;
    border: 0;
}

.sidebar-filter .filtro-lista { list-style: none; padding: 0; margin: 0; }
.sidebar-filter .filtro-lista li { margin-bottom: 2px; }

.sidebar-filter .filtro-lista a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
    padding: 7px 8px;
    border-radius: var(--lx-radio-chico) !important;
}

/* El verde era un cuarto color suelto: los filtros tambien van en el rojo. */
.sidebar-filter .filtro-lista a:hover { color: var(--lx-rojo); background: #faf6f6; }
.sidebar-filter .filtro-lista li.activo > a { font-weight: 700; color: var(--lx-rojo); }
.sidebar-filter .filtro-lista .n { margin-left: auto; color: var(--lx-gris); font-size: 12px; }
.lista-scroll { max-height: 230px; overflow-y: auto; }

/* ---------- CARGA PROGRESIVA DEL CATALOGO ---------- */
/* OJO: el atributo `hidden` solo vale `display: none` en la hoja del navegador,
   y CUALQUIER regla nuestra con `display` le gana. Como `.btn` es inline-block
   y `.catalogo-cargando` es flex, el boton y las tarjetas grises se quedaban a
   la vista siempre: salia "Ver mas (36 de 36)" con el cargador debajo aunque no
   quedara nada. Por eso hace falta esto. */
[hidden] { display: none !important; }

.catalogo-mas { text-align: center; padding: 10px 0 30px; }
/* El centinela no se ve: solo sirve para que el navegador avise de que el
   final esta cerca. Sin alto no dispararia nunca. */
#catalogo-centinela { height: 1px; }

.btn-ver-mas { min-width: 220px; height: 46px; line-height: 44px; padding: 0 24px; }
.btn-ver-mas .ver-mas-cuenta { color: var(--lx-gris); font-weight: 400; margin-left: 4px; }
.btn-ver-mas.cargando { opacity: .6; pointer-events: none; }

/* Tarjetas grises mientras llega la tanda: la pagina no pega un salto cuando
   entran las de verdad, y se entiende que viene mas. */
.catalogo-cargando { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.tarjeta-fantasma {
    flex: 0 0 120px;
    height: 150px;
    border-radius: var(--lx-radio) !important;
    background: linear-gradient(90deg, #f2f3f5 25%, #e9ebee 50%, #f2f3f5 75%);
    background-size: 200% 100%;
    animation: fantasma 1.2s infinite;
}
@keyframes fantasma {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* Quien prefiere no ver animaciones, no las ve */
@media (prefers-reduced-motion: reduce) {
    .tarjeta-fantasma { animation: none; }
}

.catalogo-fin { color: var(--lx-gris); font-size: 13px; margin: 10px 0 0; }

.precio-inputs { display: flex; align-items: center; gap: 6px; }
.precio-inputs input { width: 100%; min-width: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.chip {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 12px;
    color: #333;
}

.chip:hover { border-color: #35aa47; color: #35aa47; }
.chip-limpiar { background: #fff4e5; border-color: #f3d9b5; }

/* ---------- FICHA ---------- */
/* La tarjeta blanca de Metronic no trae margen abajo: sin miniaturas debajo de
   la imagen, "También te puede interesar" quedaba pegado al borde. */
.product-page { margin-bottom: 30px; }
.product-page .product-main-image img { width: 100%; height: 360px; object-fit: contain; background: #fff; }
.product-page .product-other-images img { width: 68px; height: 68px; object-fit: contain; }
.ficha-proveedor, .ficha-stock { font-size: 13px; margin-bottom: 6px; }
.ficha-proveedor { color: #146b3a; font-weight: 600; }

/* El precio de la ficha, con el mismo lenguaje que la tarjeta: grande y rojo,
   el tachado pequeno y gris, y el porcentaje en una pildora al lado.
   Van con `.price-availability-block` delante porque themes/red.css:276 usa
   `.price-availability-block .price strong` y con dos clases no le ganabamos:
   el precio salia naranja. */
.price-availability-block .ficha-precio .regular_price { color: var(--lx-rojo); font-size: 30px; font-weight: 700; line-height: 1.1; }
.price-availability-block .ficha-precio .old_price { font-size: 15px; color: var(--lx-gris); text-decoration: line-through; font-style: normal; margin-left: 8px; }
.price-availability-block .ficha-precio .price-by-weight { font-size: 12px; color: var(--lx-gris); margin-left: 8px; }

/* Las etiquetas del tema tambien se redondean */
.product-page .label { border-radius: 999px !important; padding: 4px 10px; font-weight: 600; }
.ficha-dto {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px !important;
    background: var(--lx-rojo);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    vertical-align: middle;
}

.ficha-compra {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 16px 0;
}

.ficha-compra .q-selector { flex: 0 0 120px; max-width: 120px; }
.otros-proveedores tr.activa { background: #f0f8f3; }

/* ---------- CARRITO ---------- */
/* Mismo lenguaje que la tarjeta de producto: caja blanca, esquina redonda y
   sombra suave en vez de borde gris. */
.grupo-proveedor {
    border: 0;
    background: #fff;
    border-radius: var(--lx-radio) !important;
    box-shadow: var(--lx-sombra);
    margin-bottom: 14px;
    overflow: hidden;
}

.grupo-cabecera {
    background: #fff;
    border-bottom: 1px solid #f1f2f4;
    padding: 12px 15px;
}

.grupo-cabecera h3 { margin: 0; font-size: 15px; font-weight: 600; float: left; }
.grupo-info { float: right; font-size: 12px; color: var(--lx-gris); padding-top: 4px; }
.grupo-subtotal { padding: 12px 15px; border-top: 1px solid #f1f2f4; font-size: 14px; }
.grupo-subtotal strong { font-size: 16px; color: var(--lx-rojo); }

.linea-carrito.no-disponible { opacity: .6; background: #fff8f8; }
.linea-carrito .motivo { font-size: 12px; margin: 4px 0 0; }
/* En el carrito el "-" es ademas el boton de QUITAR (con una unidad se vuelve
   papelera), asi que no puede ser un boton minusculo: 38px de lado, que es lo
   que pide un dedo. Por eso el selector es mas ancho aqui que en la tarjeta. */
.linea-carrito .q-selector { max-width: 132px; }
/* `flex: 0 0 38px` y no solo `width`: el selector es flex y con `width` a secas
   los botones se encogian a 27px aunque pidieran 38. */
.linea-carrito .q-selector button { flex: 0 0 38px; width: 38px; height: 38px; }
.linea-carrito .q-selector .q-input { height: 38px; }
.goods-page-image img { width: 60px; height: 60px; object-fit: contain; }

/* Cuando solo queda una unidad, el "-" se convierte en papelera: es el gesto
   que la gente ya trae aprendido de otras tiendas, y evita tener que buscar
   el icono de quitar. Lo marca el JS con .q-borrar (js/shop.js). */
.q-selector .q-menos.q-borrar { color: var(--lx-rojo); }

.btn-checkout.disabled, .btn.disabled { pointer-events: none; opacity: .55; }

/* ---------- BARRA HACIA EL PEDIDO MINIMO ----------
   Pegada bajo la cabecera y visible mientras se recorre el carrito. El `top`
   es 0 en escritorio; en movil la cabecera no es fija, asi que tampoco hay que
   descontarla. */
.barra-meta {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-radius: var(--lx-radio) !important;
    box-shadow: var(--lx-sombra);
    padding: 10px 14px;
    margin-bottom: 12px;
}
.barra-meta-texto { font-size: 14px; margin-bottom: 8px; }
.barra-meta-texto strong { color: var(--lx-rojo); }

.barra-meta-riel {
    height: 6px;
    background: #eef0f3;
    border-radius: 999px !important;
    overflow: hidden;
}
.barra-meta-riel span {
    display: block;
    height: 100%;
    background: var(--lx-rojo);
    border-radius: 999px !important;
    /* Se anima al recargar tras cambiar una cantidad: el salto de la barra es
       lo que hace entender de un vistazo que te has acercado. */
    transition: width .35s ease;
}

/* Cumplida: verde, y el texto lo dice con palabras ademas de con el color */
.barra-meta.cumplida .barra-meta-texto { color: #146b3a; font-weight: 600; }
.barra-meta.cumplida .barra-meta-riel span { background: #146b3a; }
.barra-meta.cumplida .fa-check { margin-right: 4px; }

/* Los totales, en su propia tarjeta blanca y no sueltos sobre el fondo.
   El tema los encaja en 230px (style-shop.css:525) y con "Envío a Guanabacoa"
   o un total de cuatro cifras el texto se apretaba contra la cifra. */
.shopping-total, .checkout-total-block { width: 340px; max-width: 100%; }
.shopping-total {
    background: #fff;
    border-radius: var(--lx-radio) !important;
    box-shadow: var(--lx-sombra);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.shopping-total ul { list-style: none; padding: 0; margin: 0; }
.shopping-total li { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; }
.shopping-total li em { font-style: normal; color: var(--lx-gris); text-transform: none; }
.shopping-total .shopping-total-price {
    border-top: 1px solid #f1f2f4;
    margin-top: 6px;
    padding-top: 12px;
}
.shopping-total .shopping-total-price em { color: var(--lx-tinta); font-weight: 600; font-size: 16px; }
.shopping-total .shopping-total-price strong { font-size: 22px; }

/* ---------- CHECKOUT Y PANELES ----------
   Todo lo que en Bootstrap 3 es un `panel` o un `well` (pasos del checkout,
   resumen, cuenta, seguimiento) comparte el aspecto de la tarjeta: sin borde,
   redondeado y con sombra. Es lo que da sensacion de una sola aplicacion y no
   de cinco pantallas cosidas. */
.panel, .well {
    border: 0 !important;
    border-radius: var(--lx-radio) !important;
    box-shadow: var(--lx-sombra);
    background: #fff;
}
/* Con el padre delante: `.panel-default > .panel-heading` de Bootstrap pesa
   mas que `.panel-heading` a secas, y los pasos del checkout seguian con la
   barra gris azulada del tema. */
.panel-heading,
.panel-default > .panel-heading,
.checkout-page .panel-heading {
    background: #fff !important;
    border-bottom: 1px solid #f1f2f4 !important;
    color: var(--lx-tinta);
    padding: 14px 16px;
}
.panel-title { font-size: 15px; font-weight: 600; }
.panel-body { padding: 16px; }

/* Los pasos del acordeon */
.checkout-page .accordion-toggle { font-size: 15px; font-weight: 600; color: var(--lx-tinta); display: block; }
.checkout-page .accordion-toggle:hover { color: var(--lx-rojo); }
.checkout-page .panel { margin-bottom: 12px; }
/* El paso abierto se distingue por una franja roja, no por un fondo gris */
.checkout-page .panel:has(.panel-collapse.in) > .panel-heading { border-left: 3px solid var(--lx-rojo); }

/* Elegir envio o recogida: tarjetas pulsables, no radios sueltos */
.opcion-entrega { padding: 14px; margin-bottom: 10px; border: 1px solid #e5e7eb !important; box-shadow: none; }
.opcion-entrega label { font-weight: 500; margin: 0; cursor: pointer; }
.opcion-entrega:has(input:checked) { border-color: var(--lx-rojo) !important; background: #fffafa; }

/* El resumen de la derecha: el total, grande */
.resumen-pedido .resumen-total,
.resumen-pedido .total strong { font-size: 20px; color: var(--lx-rojo); }

/* Campos de formulario comodos de rellenar con el pulgar */
.form-control { height: 42px; font-size: 14px; border-color: #e5e7eb; }
.form-control:focus { border-color: var(--lx-rojo); box-shadow: none; }
textarea.form-control { height: auto; }
/* UNA sola escala de botones en toda la tienda. Antes convivian los de 38px
   (cuenta, seguimiento) con los de 48px de `.btn-lg` (ticket, checkout) y
   parecian de dos sitios distintos. Ahora la diferencia entre el normal y el
   grande es de cuatro pixeles: se nota la jerarquia sin que canten. */
.btn { font-weight: 600; padding: 9px 16px; font-size: 14px; }
.btn-lg { padding: 11px 20px; font-size: 15px; line-height: 1.4; height: auto; }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* Fila de acciones de un formulario: en escritorio en linea, en el movil
   apiladas y a todo lo ancho, que es como se pulsan con el pulgar. */
.acciones-form { display: flex; gap: 10px; flex-wrap: wrap; }
/* Uno es <button> y el otro <a>: sin esto quedaban con 2px de diferencia de
   alto, que se nota cuando estan pegados. */
.acciones-form .btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Alto fijo, no minimo: con `min-height` seguian bailando un pixel porque
       el <a> y el <button> calculan la linea de texto distinto. */
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
}

/* ---------- ENTREGA DE DINERO ---------- */
.grupo-ticket .grupo-cabecera { background: #eaf6ee; }
.resumen-ticket td { padding: 4px 8px !important; }
.resumen-ticket .tk-total { font-size: 16px; }
.como-funciona { padding-left: 18px; }
.como-funciona li { margin-bottom: 6px; }

#canvas-firma {
    border: 2px dashed #cbd5e1;
    border-radius: 4px;
    background: #fff;
    touch-action: none;
    width: 100%;
    max-width: 600px;
    height: auto;
    cursor: crosshair;
}

.entrega-page .importe-entregar td { font-size: 18px; background: #f7fbf8; }

/* ---------- LINEA DE TIEMPO DEL PEDIDO ---------- */
.linea-tiempo {
    list-style: none;
    padding: 0 0 0 18px;
    margin: 0;
    border-left: 2px solid #e5e7eb;
}

.linea-tiempo li {
    position: relative;
    padding: 0 0 16px 12px;
    font-size: 13px;
}

.linea-tiempo li:before {
    content: '';
    position: absolute;
    left: -25px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cbd5e1;
    border: 2px solid #fff;
}

.linea-tiempo li.actual:before { background: #35aa47; }
.linea-tiempo li.actual .lt-estado { font-weight: 700; color: #35aa47; }
.linea-tiempo .lt-fecha { display: block; color: var(--lx-gris); font-size: 11px; }
.linea-tiempo .lt-estado { display: block; }

/* ---------- MOVIL ---------- */
@media (max-width: 767px) {
    /* Metronic deja el .container con 5px de padding en movil, pero las filas de
       Bootstrap siguen con margin -15px: eso saca 10px por cada lado y toda la
       pagina se desplaza. Ajustamos las filas al padding real del contenedor. */
    .row { margin-left: -5px; margin-right: -5px; }
    .row > [class*="col-"] { padding-left: 5px; padding-right: 5px; }

    .header .buscador { float: none; width: auto; margin: 10px 0 5px; }

    /* Rejilla de dos columnas apretada, como Temu o Shein: el hueco entre
       tarjetas es lo primero que delata una tienda antigua. La imagen ya no
       lleva altura fija (manda el aspect-ratio 1:1 de arriba). */
    .row.productos .producto-col { margin-bottom: 8px; }
    .product-item .pi-img-wrapper img { padding: 6px; }

    /* En un telefono el texto necesita CUERPO, no menos. Se lee a un palmo de
       la cara, con el pulgar tapando media pantalla y muchas veces a pleno sol.
       Nada por debajo de 12px, y el texto corriente a 15. */
    body { font-size: 15px; }
    .product-item h3.product_name { font-size: 16px; min-height: 44px; }
    .product-item .pi-price .regular_price { font-size: 19px; }
    .product-item .pi-info { font-size: 13px; }
    .product-item .pi-marca { font-size: 12px; }
    .breadcrumb { font-size: 13px; }
    .grupo-info, .catalogo-info { font-size: 13px; }
    .pre-header { font-size: 12px; }
    .form-control, .btn { font-size: 15px; }

    /* Las acciones, apiladas y a todo el ancho */
    .acciones-form { flex-direction: column; }
    .acciones-form .btn { width: 100%; flex: 1 1 auto; }

    /* Zonas pulsables de 36px: por debajo de eso se falla el dedo. */
    .q-selector button, .q-selector .q-input,
    .product-item .cp-addtocart { height: 36px; }
    .product-item .cp-addtocart { width: 42px; }

    /* (El redondeo de botones y campos ya no vive aqui: esta arriba, para los
       dos tamanos de pantalla.) */
    #btn-filtros, .form-orden select { border-radius: var(--lx-radio-chico) !important; }

    /* Los filtros no ocupan media pantalla: se despliegan con el boton */
    #sidebar-filtros { display: none; margin-top: 10px; }
    #sidebar-filtros.abierto { display: block; }
    #btn-filtros { margin-bottom: 8px; }

    /* Las dos mitades son col-*-6 y en movil se apilan. En una sola fila:
       (y otra vez, fuera el clearfix de .row, que al hacerla flexible cuenta). */
    .list-view-sorting {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 6px;
    }
    .list-view-sorting::before,
    .list-view-sorting::after { display: none; }
    .list-view-sorting > [class*="col-"] { width: auto; float: none; min-width: 0; padding: 0; }
    .list-view-sorting .catalogo-info {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* style-shop.css le pone 30px de margen a este bloque, que en movil son
       30px menos para el texto de la izquierda. */
    .list-view-sorting .pull-right { float: none !important; margin: 0 !important; }
    .form-orden { margin: 0; display: flex; align-items: center; gap: 5px; }
    .form-orden .control-label { margin: 0; white-space: nowrap; }
    .form-orden select { min-width: 0; width: auto; }
    .hero h1 { font-size: 20px; }
    .ficha-compra { flex-wrap: wrap; }

    /* Precio y disponibilidad, cada uno en su linea: juntos se apretaban tanto
       que el precio por peso acababa debajo del porcentaje de rebaja. */
    .price-availability-block .price,
    .price-availability-block .availability { float: none; width: 100%; text-align: left; }
    .price-availability-block .availability { margin-top: 6px; }
    .price-availability-block .ficha-precio .price-by-weight { display: block; margin: 2px 0 0; }
    .product-page .product-main-image img { height: 260px; }

    /* El carrito en el movil DEJA DE SER UNA TABLA.
       Antes tenia 520px de ancho minimo y se navegaba con scroll lateral, que
       es de lo que mas molesta en un telefono: el precio y el total quedaban
       fuera de la pantalla.

       Ahora cada linea se lee como una ficha:

           [ foto ]  Nombre del producto
                     $0.94 / ud
                     [ - 1 + ]            $0.94

       La foto a la izquierda, y a su derecha el nombre, el precio unitario y,
       en el mismo renglon, el selector de cantidad con el total de la linea
       pegado a la derecha. Es donde la vista ya va a buscar el importe.

       En el HTML las celdas vienen en otro orden (nombre, cantidad, precio,
       total), asi que la fila se vuelve flex y se recolocan con `order`, sin
       tocar la tabla: en escritorio sigue siendo una tabla normal. */
    .table-wrapper-responsive { overflow-x: visible; }
    .table-wrapper-responsive table { min-width: 0; width: 100%; }

    .goods-data table, .goods-data tbody, .goods-data td { display: block; width: auto; }
    /* Esconder solo los <th> deja la fila de cabecera vacia ocupando sitio:
       hay que quitar la fila entera. Las de producto llevan .linea-carrito. */
    .goods-data tr:not(.linea-carrito) { display: none; }

    .goods-data tr.linea-carrito {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
        padding: 12px 0 12px 92px;
        border-bottom: 1px solid #f1f2f4;
        min-height: 92px;
    }
    .goods-data tr.linea-carrito:last-child { border-bottom: 0; }
    .goods-data td { border: 0 !important; padding: 0 !important; }

    /* La foto, mas grande que antes (60 -> 80) y centrada con la ficha */
    .goods-data td.goods-page-image {
        position: absolute;
        left: 0;
        top: 12px;
    }
    .goods-page-image img { width: 80px; height: 80px; }

    /* 1. El nombre, a lo ancho */
    .goods-data td.goods-page-description {
        order: 1;
        flex: 1 0 100%;
        font-size: 15px;
        font-weight: 500;
    }
    .goods-data td.goods-page-description h3 { margin: 0; font-size: 15px; font-weight: 500; }

    /* 2. El precio por unidad: dato de apoyo, pequeno y gris. Sin el rotulo
          "Precio:" de antes, que con el simbolo de moneda ya se entiende. */
    .goods-data td.goods-page-price {
        order: 2;
        flex: 1 0 100%;
        margin: 2px 0 8px;
        font-size: 13px;
        color: var(--lx-gris);
    }
    /* El tema le da 18px de PT Sans Narrow a este <strong> (style-shop.css),
       asi que hay que bajarselo aqui o el precio unitario compite con el total. */
    .goods-data td.goods-page-price strong {
        font-size: 13px;
        font-weight: 400;
        color: var(--lx-gris);
    }

    /* 3. Selector y total, en la misma linea. El total se va a la derecha con
          `margin-left: auto`, que es lo que lo ata al borde sin flotar. */
    .goods-data td.goods-page-quantity { order: 3; flex: 0 0 auto; }
    .goods-data td.goods-page-quantity .q-selector { max-width: 132px; }

    .goods-data td.goods-page-total {
        order: 4;
        flex: 0 0 auto;
        margin-left: auto;
        font-size: 17px;
        font-weight: 700;
    }

    /* La linea no disponible se explica debajo del nombre, no al final */
    .goods-data td.goods-page-description .motivo { margin: 4px 0 0; font-size: 13px; }

    .grupo-cabecera h3, .grupo-info { float: none; }
    .grupo-info { padding-top: 2px; }
    .grupo-subtotal { text-align: left; }
    .shopping-total { width: 100%; }
    #form-carrito .btn { margin-bottom: 6px; }
}

/* ---------- CABECERA v2 (barra unica al estilo supermarket23) ----------
   El encabezado anterior sigue en theme/shop/header1.php y usa las reglas de
   arriba; todo lo de aqui cuelga de .header-v2 para no pisarlo. */

/* El panel de categorias cuelga de la cabecera, asi que tiene que ser el
   contenedor posicionado. Hace falta ganarle a `.ecommerce .header { position:
   inherit }` de style-shop.css, de ahi el selector doble. */
.ecommerce .header.header-v2 { position: relative; }
/* Sin margen el breadcrumb quedaba pegado a la cabecera; el tema trae 23px y el
   panel de categorias, que es absoluto, no depende de esto. */
.header-v2 .container { position: relative; }

.header-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
}

/* Metronic saca el logo y el carrito con float: aqui mandan las cajas flexibles */
.header-v2 .site-logo {
    float: none;
    margin: 0;
    padding: 0;
    font-size: 22px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
}
.header-v2 .site-logo:hover { color: #e02222; }
.shop-header .site-logo .brand-logo {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
}
.header-v2 .site-logo { flex-shrink: 0; }
@media (max-width: 767px) {
    .shop-header .site-logo .brand-logo { width: 108px; }
}

.header-v2 .top-cart-block {
    float: none;
    margin: 0 0 0 4px;
    flex: 0 0 auto;
}

/* Boton de categorias: el desplegable de escritorio cuelga de el */
.header-v2 .cat-toggler {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 4px;
    background: #e02222;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
}
.header-v2 .cat-toggler:hover { background: #c81e1e; }
.header-v2 .cat-toggler .fa-th-list { margin-right: 6px; }
.header-v2 .cat-toggler-flecha { margin-left: 8px; font-size: 11px; transition: transform .15s; }
.header-v2 .cat-toggler.abierto .cat-toggler-flecha { transform: rotate(180deg); }

/* La hamburguesa solo aparece en pantallas estrechas.
   Metronic la dibuja con una imagen de fondo y esconde el <i>: aqui se usa el
   icono de Font Awesome, asi que hay que deshacer las dos cosas. */
.header-v2 .mobi-toggler i { display: inline-block; }
/* style-shop.css le mete `margin-top: 30px` con tres clases (.ecommerce .header
   .mobi-toggler) y la hamburguesa se iba 15px por debajo del logo y del carrito.
   Hace falta el mismo peso para devolverla a la linea. */
.ecommerce .header.header-v2 .mobi-toggler { margin: 0; }
.header-v2 .menu-toggler:hover { background: #f6f6f6; border-color: #ccc; color: #e02222; }
.header-v2 .menu-toggler {
    display: none;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 4px !important;
    background: #fff;
    color: #555;
    font-size: 16px;
    margin: 0;
}

/* El buscador se lleva todo el ancho que sobra */
.header-v2 .buscador {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0;
    position: relative;
}
/* Buscador de una pieza: el campo redondea SOLO por la izquierda y el boton
   SOLO por la derecha, y entre ellos no hay borde. Asi se lee como una pastilla
   unica y no como dos cajas pegadas, que es como lo hacen todas las apps. */
.header .buscador .form-control,
.header-v2 .buscador .form-control {
    height: 38px;
    box-shadow: none;
    border-radius: 999px 0 0 999px !important;
    border-right: 0;
    padding-left: 16px;
}
.header .buscador .input-group-btn .btn,
.header-v2 .buscador .btn {
    height: 38px;
    border-radius: 0 999px 999px 0 !important;
    padding: 0 18px;
}
/* Al enfocar, el borde rojo tiene que rodear las dos mitades por igual */
.buscador .form-control:focus { border-color: var(--lx-rojo); }

/* ---- Panel de categorias ---- */
.cat-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-top: 0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .15);
    z-index: 1035;
    padding: 14px 0 6px;
}
.cat-panel.abierto { display: block; }
.cat-panel-cabecera { display: none; }

.cat-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.cat-lista > li { width: 25%; }
.cat-lista > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: #444;
    font-size: 14px;
    border-radius: 3px;
}
.cat-lista > li > a:hover { background: #f6f6f6; color: #e02222; }
.cat-lista .cat-nombre { flex: 1 1 auto; }
.cat-lista .cat-n { color: var(--lx-gris); font-size: 12px; }
.cat-lista-destacada {
    border-top: 1px solid #eee;
    margin-top: 8px;
    padding-top: 8px;
}
.cat-lista-destacada > li > a { font-weight: 600; color: #333; }
.cat-vacio { color: var(--lx-gris); padding: 6px 10px; margin: 0; }

.cat-fondo { display: none; }
/* Ojo: sin esto, el display:block del movil gana al atributo hidden y el fondo
   se queda encima de toda la pagina tragandose los clics. */
.cat-fondo[hidden] { display: none !important; }

/* ---- Cabecera v2 en pantallas estrechas ----
   Hasta 991px las categorias dejan de ser un desplegable y pasan a ser un menu
   lateral que entra por la izquierda, como en supermarket23. */
@media (max-width: 991px) {
    .header-v2 .menu-toggler { display: block; }
    .header-v2 .cat-toggler { display: none; }

    .cat-panel {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        width: 280px;
        max-width: 85%;
        border: 0;
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        transition: transform .2s ease-out;
    }
    .cat-panel.abierto { transform: translateX(0); }

    .cat-panel > .container { width: auto; padding: 0 10px 20px; }

    .cat-panel-cabecera {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 -10px 8px;
        padding: 14px 14px;
        background: #e02222;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
    }
    .cat-cerrar {
        border: 0;
        background: none;
        color: #fff;
        font-size: 26px;
        line-height: 1;
        padding: 0 4px;
    }

    .cat-lista { display: block; }
    .cat-lista > li { width: auto; }
    .cat-lista > li > a { padding: 11px 8px; border-bottom: 1px solid #f2f2f2; border-radius: 0; }

    /* El fondo oscuro va por DEBAJO del modal de zona (1040), para no taparlo */
    .cat-fondo {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1030;
    }
}

@media (max-width: 767px) {
    /* Todo en una sola fila: hamburguesa, logo, buscador y carrito.
       El logo ocupa SOLO su texto (con flex:1 se quedaba 283px de los 380 y
       ademas dejaba 200px de hueco pinchable a la derecha del nombre). */
    .header-barra { flex-wrap: nowrap; gap: 8px; }
    /* El logo ocupa lo que mide su texto y no se encoge (con max-width: 40% se
       cortaba en "LoxiCu..."); el que cede ancho es el buscador. */
    .header-v2 .site-logo { flex: 0 0 auto; font-size: 18px; max-width: 50%; white-space: nowrap; }
    .header-v2 .buscador { flex: 1 1 auto; min-width: 0; margin: 0; }
    .header-v2 .buscador .form-control { font-size: 13px; padding-left: 8px; }
    /* En movil solo queda el icono del carrito, asi que deja de ir absoluto:
       si no, se sale del bloque (que se queda sin ancho) y pisa al buscador.
       La cantidad no se esconde (el enlace tiene que seguir siendo visible y
       pinchable): se convierte en el globito de encima del icono. */
    .header-v2 .top-cart-block { margin-top: 0; flex: 0 0 auto; width: auto; position: relative; }
    .header-v2 .site-logo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .header-v2 .top-cart-info {
        position: absolute;
        top: -6px;
        right: -6px;
        z-index: 2;
        float: none;
        padding: 0;
        border: 0;
        background: none;
        border-radius: 0 !important;
    }
    .header-v2 .top-cart-info-value { display: none; }
    .header-v2 .btn-carrito {
        display: block;
        min-width: 19px;
        height: 19px;
        padding: 0 4px;
        border-radius: 10px;
        background: #333;
        color: #fff;
        font-size: 11px;
        line-height: 19px;
        text-align: center;
    }
    .header-v2 .top-cart-block .fa-shopping-cart {
        position: static;
        display: inline-block;
        padding: 11px 10px;
        background: #e02222;
    }
    /* En el movil NO hay mini-carrito desplegable. El tema lo abre con
       `.top-cart-block:hover .top-cart-content` (style-shop.css:209) y en una
       pantalla tactil el primer toque cuenta como hover: tocabas el carrito,
       se abria el panel y no ibas a ninguna parte. Aqui el carrito lleva
       directo a su pagina, que es lo que se espera de un icono de carrito. */
    .header-v2 .top-cart-content-wrapper { display: none !important; }
    .header-v2 .top-cart-ir { display: inline-block; }

    /* La primera fila tiene que caber entera: textos cortos y sin saltos.
       OJO: Metronic, por debajo de 480px, pone estos <li> en display:block y la
       fila se parte en cuatro lineas. Por eso se devuelven a inline-block. */
    .pre-header .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    /* Bootstrap le cuelga a .row un ::before y un ::after para el clearfix. Al
       hacerla flexible pasan a ser dos cajas mas de la fila: cuatro cajas y tres
       huecos, asi que el espacio sobrante se repartia tambien en los extremos y
       la fila no llegaba a los bordes (36px a 390, 26 a 360, 13 a 320). */
    .pre-header .row::before,
    .pre-header .row::after { display: none; }

    /* Y a plomo con la hamburguesa y el carrito de la barra de abajo, que
       arrancan en el borde del .container */
    .pre-header .additional-shop-info li:first-child { padding-left: 0; }
    .pre-header .additional-nav li:last-child { padding-right: 0; }
    .pre-header .additional-shop-info,
    .pre-header .additional-nav { width: auto; float: none; min-width: 0; }
    .pre-header ul { margin: 0; white-space: nowrap; }
    .pre-header .list-inline li { display: inline-block; margin-bottom: 0; border: none; }
    .pre-header .additional-nav .pull-right { float: right !important; }
    /* General, no solo en la barra de arriba: tambien lo usa el " art." del
       carrito, que en el globito sobra. */
    .solo-ancho { display: none; }
    /* "Seguir un pedido" y "Carrito" se van de la barra de arriba: el carrito
       esta en la barra de abajo (con su contador) y el seguimiento, en Mi cuenta.
       Le tiene que ganar a `.pre-header .list-inline li { display: inline-block }`,
       que lleva un elemento mas en el selector. */
    .pre-header .list-inline li.solo-escritorio { display: none; }
    /* La <ul> pierde arriba su margen inferior de 10px para que la fila quede
       centrada; se lo devolvemos a la barra por abajo, o la barra queda 10px
       mas baja que en escritorio (38px alli, 26px aqui). */
    .pre-header { font-size: 11px; padding-bottom: 10px; }
    .pre-header .additional-shop-info,
    .pre-header .additional-nav { width: auto; float: left; }
    .pre-header .additional-nav { float: right; }
    .pre-header .list-inline > li { padding-left: 4px; padding-right: 4px; }

    .pre-header .zona-texto {
        display: inline-block;
        max-width: 88px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }
}

/* Con el menu lateral abierto no se desplaza la pagina de detras */
@media (max-width: 991px) {
    body.cat-abierta { overflow: hidden; }
}

/* Telefonos estrechos (iPhone SE y similares).
   Con "Entrega a domicilio" y "Mi cuenta" enteros, la fila de arriba suma 353px:
   cabe de 375 para arriba. Por debajo se cede el unico dato prescindible (la
   moneda, que ya sale en cada precio y en el pie) y se aprietan las separaciones,
   antes que recortar un texto. */
@media (max-width: 374px) {
    /* Le tiene que ganar a `.pre-header .list-inline li { display: inline-block }`
       de mas arriba, que lleva un elemento mas en el selector. */
    .pre-header .list-inline li.shop-currencies { display: none; }
    .pre-header .list-inline > li { padding-left: 3px; padding-right: 3px; }
    /* Un punto menos de letra y el municipio mas corto, antes que quitar un
       enlace o recortar "Entrega a domicilio" o "Mi cuenta".
       11px es el suelo: por debajo deja de leerse a pulso. */
    .pre-header { font-size: 11px; }
    .pre-header .zona-texto { max-width: 60px; }
    /* Y un punto menos en el contador del catalogo, que si no se come el
       nombre del municipio */
    .list-view-sorting .catalogo-info { font-size: 13px; }
}

/* Hasta 390 inclusive, el texto "N productos en <municipio>" y el "Ordenar:" no
   caben juntos: se va la etiqueta, que el propio desplegable ya dice lo que hace. */
@media (max-width: 390px) {
    .form-orden .control-label { display: none; }
}

/* Este Metronic trae Bootstrap compilado con canales de 5px en vez de 15, asi que
   la caja del filtro acababa justo donde empieza la primera tarjeta. Solo en
   escritorio, que en movil el filtro va arriba y desplegable. */
@media (min-width: 768px) {
    .catalogo > .sidebar { padding-right: 20px; }
}