/**
 * ITB Harpo — estilos de front.
 *
 * Todo va bajo el prefijo .itb- para no colisionar nunca con el tema.
 * Paleta en blanco y negro, la de la tienda.
 *
 * NOTA: aqui solo entra lo que esta medido. Los ajustes que dependan de como
 * pinta el tema (p. ej. las variaciones agotadas) se anaden tras inspeccionar
 * su marcado real, no de memoria.
 */

/* ---------------------------------------------------------------------------
   Tipografia global de titulos
   ---------------------------------------------------------------------------
   word-spacing: 5px en todos los titulos del sitio.

   Historia de la decision: primero se pidio 3px "en toda la web"; despues, viendolo
   aplicado, Jesus corrigio a "5-6px mucho mejor". Manda el feedback posterior.

   Ademas 5px es lo que YA aplica el Site Builder a los titulos de producto en la
   plantilla 863 (.elementor-863 ... .stsb_mini_product_name), asi que unificar en 5px
   ALINEA con el ajuste nativo de Elementor en vez de pelearse con el: el sitio queda
   coherente sin contraprogramar el tema. Medido en el front el 18/08/2026: los titulos
   de producto salian a 5px y los h1-h6 a 3px.

   Nota de especificidad: Elementor genera reglas del tipo
   `.elementor-863 .elementor-element.elementor-element-1338495 .stsb_mini_product_name`
   con especificidad (0,3,0). Para los titulos de producto se repite la clase
   —tecnica valida y estandar— en lugar de recurrir a !important, que las
   normas del proyecto reservan para cuando no hay alternativa.
   --------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    word-spacing: 5px;
}

/* Titulos de producto del tema: no son h1-h6, y compiten con CSS de Elementor. */
.stsb_mini_product_name.stsb_mini_product_name.stsb_mini_product_name,
.stsb_product_name.stsb_product_name.stsb_product_name,
.stsb_heading.stsb_heading.stsb_heading {
    word-spacing: 5px;
}

/* Alineacion izquierda de los titulos de producto.
   El tema declara --justify-content: left, pero es una variable del wrapper
   flex: no alinea el TEXTO. Se fija tambien text-align y el eje flex. */
.stsb_mini_product_name.stsb_mini_product_name.stsb_mini_product_name,
.stsb_mini_product_name_wrapper.stsb_mini_product_name_wrapper.stsb_mini_product_name_wrapper {
    --justify-content: flex-start;
    justify-content: flex-start;
    text-align: left;
}

.itb-notice {
    position: fixed;
    z-index: 9999;
    right: 24px;
    bottom: 24px;
    max-width: min(90vw, 22rem);
    padding: 0.9rem 1.15rem;
    background: #000;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.4;
    border-radius: 2px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.itb-notice--out {
    opacity: 0;
    transform: translateY(8px);
}

@media (max-width: 576px) {
    .itb-notice {
        right: 12px;
        left: 12px;
        bottom: 12px;
        max-width: none;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .itb-notice {
        transition: none;
    }
}

/* ===========================================================================
   CARDS DE PRODUCTO — acabado premium
   ===========================================================================
   La card es `.elementor-863`: la plantilla de miniatura del Site Builder,
   instanciada una vez por producto dentro de `.stsb_grid_wrapper`. Se estiliza
   ESA clase y no el widget interno, para que valga en todas las rejillas del
   sitio (home, categoria, buscador, relacionados) sin tocar el tema.

   Medido en el front el 18/08/2026 antes de tocar nada:
   card 210x370, position:static, sin radio, sin sombra util, sin transicion.
   Sin `position` no se puede superponer nada, asi que ese es el primer paso.

   Paleta: blanco y negro, la de la tienda. Sin colores nuevos.
   --------------------------------------------------------------------------- */

.elementor-863 {
    position: relative;
    /* CONTENEDOR REAL. Antes la card no existía como objeto: imagen, título, precio y
       botón flotaban sueltos sobre el fondo blanco de la página, sin nada que los
       agrupara. Por eso la rejilla se leía como una lista de trozos y no como un
       catálogo. Un borde fino y un fondo propio bastan para que cada producto sea
       una pieza; no hace falta sombra en reposo, que ensucia. */
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 14px;
    background: #fff;
    border: 1px solid #e5e2de;
    border-radius: 3px;
    transition: border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
    /* `isolation` crea contexto de apilamiento propio: las acciones flotantes de
       una card nunca se cuelan por encima de la card vecina. */
    isolation: isolate;
}

/* El contenido interior del Site Builder es un flex en columna: se estira a toda la
   altura para poder empujar el botón al fondo. */
.elementor-863 > .e-con-inner,
.elementor-863 > .elementor-element > .e-con-inner {
    height: 100%;
}

/* --- Alineación entre columnas ---------------------------------------------
   El defecto medido: el botón "Comprar" caía a 372px en unas cards y a 348px en
   otras, según el título ocupara una o dos líneas. En una rejilla eso se ve como
   una fila descuadrada.

   Se ataca por los dos lados: el título reserva SIEMPRE dos líneas, y el bloque de
   acción se empuja al fondo con `margin-top: auto`. Así todos los precios quedan a
   la misma altura y todos los botones sobre la misma línea de base. */

.elementor-863 [data-widget_type^="pm-product-name"] {
    /* dos líneas exactas: 1 línea y 2 líneas ocupan lo mismo */
    min-height: 3.1em;
}

.elementor-863 [data-widget_type^="pm-product-name"] .stsb_mini_product_name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.elementor-863 [data-widget_type^="pm-product-price"] {
    /* El tema lo sube 25px para pegarlo al título; con el título ya de altura fija
       ese tirón solo descuadra. */
    margin-top: 0 !important;
}

.elementor-863 [data-widget_type^="pm-product-action-button"] {
    margin-top: auto;
    padding-top: 0.6rem;
}

.elementor-863.elementor-863:hover,
.elementor-863.elementor-863:focus-within {
    transform: translateY(-4px);
    border-color: #1a1a1a;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13) !important;
    z-index: 2;
}

/* Imagen: el zoom vive DENTRO de un recorte propio, para que la foto crezca sin
   empujar el texto ni desbordar la card.

   El fondo propio resuelve además una inconsistencia visible en la rejilla: unas
   fotos traen fondo crema incrustado y otras vienen sobre blanco, así que la fila
   se veía a parches. Con un fondo uniforme detrás, todas se leen igual. */
.elementor-863 [data-widget_type^="pm-product-image"] .elementor-widget-container {
    overflow: hidden;
    background: #fcf8f5;
    border-radius: 2px;
}

.elementor-863 [data-widget_type^="pm-product-image"] img {
    transition: transform 0.45s ease;
    /* `contain` en vez del `fill` del tema: hoy las fotos son 800x800 cuadradas y
       `fill` no deforma, pero basta con que suban una que no lo sea para que se
       estire. `contain` nunca deforma; es una red de seguridad, no un arreglo. */
    object-fit: contain;
}

/* Sin acercamiento al pasar por encima de la foto del producto (decision de
   Jesus). La card sigue elevandose y mostrando la accion; lo que se retira es el
   zoom de la imagen. El carrusel de CATEGORIAS si lo conserva. */
.elementor-863:hover [data-widget_type^="pm-product-image"] img,
.elementor-863:focus-within [data-widget_type^="pm-product-image"] img {
    transform: none;
}

/* --- Acción flotante sobre la imagen -------------------------------------- */

.itb-card-action {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    /* Barra completa sobre la foto, como la "compra rápida" de las tiendas que
       funcionan: a lo ancho se lee de un vistazo y es un objetivo grande de pulsar,
       mientras que un botoncito en una esquina hay que buscarlo. */
    padding: 0.62rem 0.9rem;
    background: rgba(0, 0, 0, 0.88);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    backdrop-filter: blur(2px);
    /* Oculta pero PRESENTE en el arbol: nada de display:none, que la sacaria del
       orden de tabulacion y la haria invisible para un lector de pantalla. */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    z-index: 3;
}

.elementor-863:hover .itb-card-action,
.elementor-863:focus-within .itb-card-action,
.itb-card-action:focus-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.itb-card-action:hover,
.itb-card-action:focus-visible {
    background: #222;
    color: #fff;
}

.itb-card-action:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* --- Tactil: sin hover no hay descubrimiento posible ----------------------- */
/* En un movil el hover no existe, asi que una accion que solo aparece al pasar
   por encima es una accion que NO EXISTE. En puntero grueso se muestra siempre,
   y se reduce para no tapar la foto. */

@media (hover: none), (pointer: coarse), (max-width: 991px) {
    .itb-card-action {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        right: 8px;
        bottom: 8px;
        padding: 0.42rem 0.7rem;
        font-size: 0.72rem;
    }

    .elementor-863:hover {
        transform: none;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .elementor-863,
    .elementor-863 [data-widget_type^="pm-product-image"] img,
    .itb-card-action {
        transition: none;
    }

    .elementor-863:hover {
        transform: none;
    }

    .elementor-863:hover [data-widget_type^="pm-product-image"] img {
        transform: none;
    }
}

/* --- Rejilla en movil ------------------------------------------------------
   El grid del tema declara columnas FIJAS de 210px. Por debajo de ~460px dos
   columnas de 210 + gap no caben en la pantalla y provocan scroll horizontal.
   Se sustituye por columnas fluidas solo en los anchos donde el fijo falla; en
   escritorio manda el tema y aqui no se toca nada.
   El gap vertical del tema es de 60px contra 20px horizontal: descompensado, se
   iguala en movil para que la rejilla no parezca rota. */



/* ===========================================================================
   DESPLEGABLE DE ACCESO (boton "mi cuenta")
   ===========================================================================
   El contenido lo inyecta el JS: es el formulario REAL de PrestaShop, traido de
   la pagina de login, con su token. Aqui solo se le da forma.
   --------------------------------------------------------------------------- */

.itb-login-pop {
    position: absolute;
    z-index: 10000;
    width: min(92vw, 22rem);
    padding: 1.5rem 1.35rem 1.15rem;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}

.itb-login-pop[hidden] {
    display: none;
}

.itb-login-pop__cerrar {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: none;
    border: 0;
    color: #000;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.itb-login-pop__cerrar:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.itb-login-pop input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    width: 100%;
    /* 16px: por debajo de eso, iOS hace zoom automatico al enfocar el campo y
       descoloca toda la pagina. */
    font-size: 16px;
    /* 44px de alto: el minimo tactil de las guias de Apple. */
    min-height: 44px;
    padding: 0.55rem 0.7rem;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 0;
}

.itb-login-pop button[type="submit"],
.itb-login-pop .btn-primary {
    width: 100%;
    min-height: 44px;
    margin-top: 0.6rem;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: 0;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.itb-login-pop__pie {
    display: block;
    margin-top: 0.9rem;
    color: #000;
    font-size: 0.82rem;
    text-align: center;
    text-decoration: underline;
}

@media (max-width: 480px) {
    .itb-login-pop {
        /* En movil un desplegable anclado al icono se sale de la pantalla: pasa a
           ocupar el ancho util, centrado, que es lo que se espera en tactil. */
        right: 4vw !important;
        left: 4vw;
        width: auto;
    }
}

/* ===========================================================================
   FILTROS DE FACETA
   ===========================================================================
   El marcado lo genera PrestaShop (`rendered_facets`); el JS lo inyecta porque
   la plantilla del Site Builder no pinta el hook `displayLeftColumn`.
   Aqui solo se le da el acabado de la tienda: blanco y negro, sin adornos.
   --------------------------------------------------------------------------- */

.itb-filtros {
    margin: 0 0 1.75rem;
    font-size: 0.92rem;
}

.itb-filtros #search_filters {
    padding: 0;
    background: none;
    border: 0;
}

.itb-facet {
    border-bottom: 1px solid #e3e3e3;
}

.itb-facet:first-of-type {
    border-top: 1px solid #e3e3e3;
}

.itb-facet__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0;
    color: #000;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

/* El triangulo por defecto de <summary> se sustituye por un signo propio. */
.itb-facet__titulo::-webkit-details-marker {
    display: none;
}

.itb-facet__titulo::after {
    content: "+";
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1;
}

.itb-facet[open] > .itb-facet__titulo::after {
    content: "\2013"; /* guion: la faceta ya esta abierta */
}

.itb-facet__titulo:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.itb-facet ul {
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
}

.itb-facet li {
    margin: 0 0 0.15rem;
}

.itb-facet label,
.itb-facet .facet-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* 40px de alto util: una casilla de 13px es imposible de acertar con el dedo. */
    min-height: 40px;
    margin: 0;
    cursor: pointer;
}

.itb-facet a {
    color: #000;
    text-decoration: none;
}

.itb-facet a:hover,
.itb-facet a:focus-visible {
    text-decoration: underline;
}

/* --- Boton y panel en movil ----------------------------------------------- */

.itb-filtros__abrir {
    display: none;
    width: 100%;
    min-height: 46px;
    margin: 0 0 1rem;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.itb-filtros__abrir:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

@media (max-width: 991px) {
    .itb-filtros__abrir {
        display: block;
    }

    .itb-filtros {
        display: none;
    }

    .itb-filtros.itb-filtros--abierto {
        display: block;
        padding: 0 0 0.5rem;
    }
}

/* ===========================================================================
   CARDS · segunda pasada de acabado
   ===========================================================================
   Referencias que trajo Jesús (farmatop, cosmeticos24h, clarel) y qué se toma
   de cada una:
     · contenedor blanco con borde fino y radio, imagen sobre su propio fondo;
     · marca por encima del nombre, en pequeño, para dar contexto de un vistazo;
     · precio como dato principal, no compitiendo con el título;
     · acción sobre la foto, no perdida al final de la card.
   Lo que NO se copia: sus colores. La tienda es blanco y negro y así se queda.
   --------------------------------------------------------------------------- */

/* Proporción fija de la foto. Sin esto una imagen apaisada y otra cuadrada dan
   cards de distinta altura y la fila se descuadra. */
.elementor-863 [data-widget_type^="pm-product-image"] .elementor-widget-container {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elementor-863 [data-widget_type^="pm-product-image"] img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Aire alrededor del producto: pegado al borde se ve barato. */
    padding: 6%;
}

/* Título: menos grito y más legible. Las mayúsculas del tema con 5px de
   word-spacing piden un cuerpo más contenido para no romper en tres líneas. */
.elementor-863 .stsb_mini_product_name {
    font-size: 0.82rem;
    line-height: 1.45;
}

/* Precio: es el dato que más se mira en una rejilla. Se le da peso propio en vez
   de dejarlo del mismo tamaño que el título. */
.elementor-863 [data-widget_type^="pm-product-price"] {
    font-size: 1.06rem;
    font-weight: 700;
}

/* Botón de compra del tema: a lo ancho de la card y a la misma altura en todas.
   Antes medía 200px sueltos y quedaba descentrado respecto al contenido. */
.elementor-863 [data-widget_type^="pm-product-action-button"] .elementor-widget-container {
    width: 100%;
}

/* --- Estado de carga del filtrado ------------------------------------------
   Mientras se sustituye la rejilla, se atenúa y se bloquea el clic. Sin esto no
   hay forma de saber que el filtro está haciendo algo y se pulsa dos veces. */

.itb-cargando {
    position: relative;
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
    .itb-cargando { transition: none; }
}

/* ===========================================================================
   BORDES CUADRADOS EN TODA LA WEB
   ===========================================================================
   Decisión de Jesús: menos redondeo, aspecto más cuadrado. Encaja con una marca
   de maquillaje profesional —el redondeo suaviza y aquí interesa lo contrario—
   y con el blanco y negro que ya usa la tienda.

   Se listan familias concretas en vez de un `* { border-radius: 0 }`, porque el
   comodín aplastaría también lo que DEBE ser redondo: avatares, el botón
   flotante de WhatsApp, los puntos del carrusel y los iconos circulares. Un
   círculo cuadrado no es una web cuadrada, es una web rota.
   --------------------------------------------------------------------------- */

button,
input,
select,
textarea,
.btn,
.elementor-button,
.stsb_button,
[class*="stsb_btn"],
.card,
.modal-content,
.dropdown-menu,
.alert,
.form-control,
.custom-select,
.input-group,
.stsb_mini_product_wrapper,
.elementor-863,
.elementor-863 [data-widget_type^="pm-product-image"] .elementor-widget-container,
.itb-filtros,
.itb-facet,
.itb-login-pop,
.itb-card-action,
.itb-notice {
    border-radius: 0 !important;
}

/* Excepciones explícitas: lo que es redondo por naturaleza sigue siéndolo. */
[class*="whatsapp"],
[class*="avatar"],
[class*="swiper-pagination-bullet"],
[class*="dot"],
.rounded-circle {
    border-radius: 50% !important;
}

/* ===========================================================================
   VISTA RÁPIDA — botón cuadrado flotante + ventana
   ===========================================================================
   Botón cuadrado sobre la esquina de la foto, visible al pasar por encima (y
   siempre en táctil, donde no hay hover). Abre la ficha en una ventana sin salir
   del listado: el cliente mira el producto y sigue comparando, que es justo lo
   que se pierde cuando cada consulta obliga a navegar y volver.
   --------------------------------------------------------------------------- */

.itb-qv {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Cuadrado de verdad: mismo alto que ancho y sin radio. 40px es el mínimo
       cómodo para el dedo sin comerse la foto. */
    width: 40px;
    height: 40px;
    padding: 0;
    background: #fff;
    color: #000;
    border: 1px solid #1a1a1a;
    border-radius: 0;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.22s ease, transform 0.22s ease, background 0.18s ease;
    pointer-events: none;
    z-index: 4;
}

.elementor-863:hover .itb-qv,
.elementor-863:focus-within .itb-qv {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.itb-qv:hover,
.itb-qv:focus-visible {
    background: #000;
    color: #fff;
}

.itb-qv:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.itb-qv svg { width: 19px; height: 19px; display: block; }

@media (hover: none), (pointer: coarse), (max-width: 991px) {
    .itb-qv { opacity: 1; transform: none; pointer-events: auto; }
}

/* --- Ventana de vista rápida --- */

.itb-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.55);
}

.itb-modal[hidden] { display: none; }

.itb-modal__caja {
    position: relative;
    width: min(58rem, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: 1.75rem;
    background: #fff;
    color: #000;
    border: 1px solid #1a1a1a;
    border-radius: 0;
}

.itb-modal__cerrar {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    background: #fff;
    color: #000;
    border: 1px solid #1a1a1a;
    border-radius: 0;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.itb-modal__cerrar:hover,
.itb-modal__cerrar:focus-visible { background: #000; color: #fff; }

.itb-modal__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}

.itb-modal__foto {
    background: #fcf8f5;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.itb-modal__foto img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 5%; }

.itb-modal__titulo {
    margin: 0 0 .5rem;
    font-size: 1.3rem;
    line-height: 1.3;
    text-transform: uppercase;
}

.itb-modal__precio { font-size: 1.6rem; font-weight: 700; margin: 0 0 1rem; }

.itb-modal__desc { font-size: .93rem; line-height: 1.6; margin: 0 0 1.25rem; }

.itb-modal__ir {
    display: inline-block;
    padding: .8rem 1.6rem;
    background: #000;
    color: #fff;
    border-radius: 0;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}

.itb-modal__ir:hover, .itb-modal__ir:focus-visible { background: #333; color: #fff; }

.itb-modal__cargando { padding: 3rem; text-align: center; color: #666; }

@media (max-width: 700px) {
    .itb-modal__cuerpo { grid-template-columns: 1fr; gap: 1.1rem; }
    .itb-modal__caja { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .itb-qv { transition: none; }
}

/* ===========================================================================
   FONDO UNIFORME DE LAS FOTOS — sin tocar las imágenes
   ===========================================================================
   El problema real de la rejilla: unas fotos traen fondo blanco puro incrustado
   y otras un crema claro, así que sobre un contenedor de color se veía un
   recuadro blanco dentro de otro color. Poner un fondo al contenedor no basta,
   porque la imagen es opaca y tapa lo que hay detrás.

   `mix-blend-mode: multiply` resuelve exactamente eso: al multiplicar, el blanco
   (valor 1) deja pasar el fondo intacto y el resto de tonos se mantienen. El
   fondo incrustado desaparece y todas las fotos quedan sobre el mismo tono, sin
   editar ni un solo fichero de imagen y sin recortes automáticos que se comen el
   borde del producto.

   Contrapartida honesta: un producto con zonas blancas puras adopta ahí el tono
   del fondo. Con un fondo casi blanco como este la diferencia es imperceptible;
   con un fondo saturado no lo sería, y por eso el tono se queda claro.
   --------------------------------------------------------------------------- */

.elementor-863 [data-widget_type^="pm-product-image"] .elementor-widget-container {
    background: #fcf8f5;
}

.elementor-863 [data-widget_type^="pm-product-image"] img {
    mix-blend-mode: multiply;
}

/* --- Selector de cantidad SIEMPRE visible ----------------------------------
   El tema solo lo saca al pasar por encima, así que en la rejilla aparecía en
   una card y en las demás no, descuadrando la fila. Y en móvil no aparecía
   nunca. Se muestra siempre y en todas. */

.elementor-863 .stsb_qty_wrap_outer,
.elementor-863 .stsb_qty_wrap {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.elementor-863 .stsb_qty_wrap button {
    min-width: 32px;
    min-height: 32px;
    border-radius: 0 !important;
}

/* --- Etiquetas de más vendido y tendencia ---------------------------------
   Se pintan sobre la foto, arriba a la izquierda, para que se lean antes que el
   nombre. Sin color de marca nuevo: negro sólido para el más vendido (es el
   argumento más fuerte) y contorno para tendencia, que es un matiz. */

.itb-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    display: inline-block;
    padding: .3rem .55rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 0;
    pointer-events: none;
}

.itb-tag--vendido { background: #000; color: #fff; }
.itb-tag--tendencia { background: #fff; color: #000; border: 1px solid #000; }

/* --- Paginación centrada --------------------------------------------------
   Salía alineada a un lado, que en una rejilla centrada se lee como un error de
   maqueta. Se centra y se le dan objetivos de pulsación de tamaño decente: los
   números de paginación suelen ser diminutos y en móvil se falla el dedo. */

.pagination,
[class*="stsb_pagination"],
.page-list {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center !important;
    gap: 6px;
    width: 100%;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.pagination li,
[class*="stsb_pagination"] li,
.page-list li { margin: 0; }

.pagination a,
.pagination span,
[class*="stsb_pagination"] a,
.page-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 .5rem;
    border: 1px solid #d9d5cf;
    border-radius: 0 !important;
    color: #000;
    text-decoration: none;
}

.pagination a:hover,
[class*="stsb_pagination"] a:hover,
.page-list a:hover { background: #000; color: #fff; border-color: #000; }

.pagination .current a,
.pagination .active a,
[class*="stsb_pagination"] .current a { background: #000; color: #fff; border-color: #000; }

/* ===========================================================================
   ALINEACIÓN DE LA PÁGINA DE CATEGORÍA
   ===========================================================================
   Medido: el eje del sitio es x=150 con 1140px de ancho útil — lo usan nueve
   bloques, entre ellos el H1 y la miga de pan. Pero el bloque de contenido de la
   categoría se maqueta con `padding: 0 57.6px` sobre 1440, así que empieza en 68
   y sobresale 82px por la izquierda respecto a todo lo demás.

   De ahí la sensación de que «la miga está mal puesta»: la miga está en su sitio,
   es la columna de debajo la que se sale. Se devuelve al eje común.

   El selector va por `.e-con.e-parent` y no por el id de Elementor
   (`elementor-element-57ed5b7`), que cambia si se rehace la plantilla.
   --------------------------------------------------------------------------- */

/* ANCHO ÚNICO PARA TODA LA WEB
   ---------------------------------------------------------------------------
   Antes cada plantilla usaba el suyo: el contenido general iba a 1140px
   centrado (eje x=150) y la página de categoría a 1440 con padding de 57,6px
   (eje x=68). De ahí que la miga de pan y los productos no cuadraran entre sí.

   Se unifica en un ancho fluido que aprovecha la pantalla —tope de 1680px para
   que en un monitor muy ancho las líneas de texto no se vuelvan ilegibles— con
   el mismo margen lateral en todas las páginas. Así el eje es único y el
   contenido crece con la ventana. */

:root {
    --itb-ancho: 1680px;
    --itb-margen: clamp(16px, 3.2vw, 56px);
}

.elementor > .e-con.e-parent,
.elementor-862 > .e-con.e-parent,
.elementor-2969 > .e-con.e-parent {
    width: 100%;
    max-width: var(--itb-ancho) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--itb-margen) !important;
    padding-right: var(--itb-margen) !important;
}

/* REJILLA FLUIDA
   ---------------------------------------------------------------------------
   El tema declara un número FIJO de columnas, así que al estrechar la ventana
   las columnas se encogen hasta que el producto no se ve, en vez de pasar a
   menos productos por fila. Con `auto-fill` + `minmax` el propio navegador
   calcula cuántos caben: cada card nunca baja de un ancho legible y el número
   por fila se ajusta solo a cualquier pantalla intermedia, sin necesidad de un
   punto de ruptura por cada tamaño. */

.stsb_grid_wrapper {
    /* 250px de minimo: a 1440 da 4 por fila (con 215 salian 5 apretadas) y al
       estrechar baja sola a 3 y luego a 2. */
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)) !important;
    gap: 24px 20px !important;
}

/* Los minimos se bajan por tramos porque el contenedor util tambien encoge: en
   una tablet la columna de filtros se lleva su parte, y con un minimo alto la
   rejilla se queda en dos cards gigantes. Medido: a 1024px daba 2 columnas de
   339px, y a 390px una sola de 338px. */
@media (max-width: 1100px) {
    .stsb_grid_wrapper {
        grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)) !important;
        gap: 20px 16px !important;
    }
}

@media (max-width: 991px) {
    .stsb_grid_wrapper {
        grid-template-columns: repeat(auto-fill, minmax(min(155px, 100%), 1fr)) !important;
        gap: 20px 12px !important;
    }
}

@media (max-width: 400px) {
    .stsb_grid_wrapper {
        grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)) !important;
    }
}


/* El fondo de la foto lo pisa una regla del propio Elementor con más
   especificidad, así que aquí sí hace falta forzarlo: sin fondo, el `multiply`
   funde contra el blanco de la página y no unifica nada. */
.elementor-863 [data-widget_type^="pm-product-image"] .elementor-widget-container {
    background-color: #fcf8f5 !important;
}

/* ===========================================================================
   BUSCADOR A PANTALLA COMPLETA
   ===========================================================================
   Sustituye al panel lateral: capa completa, sin menú, con el campo centrado.
   Buscar es una acción de foco único — todo lo demás en pantalla compite con
   ella.
   --------------------------------------------------------------------------- */

.itb-buscador {
    position: fixed;
    inset: 0;
    z-index: 10100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: #fff;
}

.itb-buscador[hidden] { display: none; }

.itb-buscador__cerrar {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 46px;
    height: 46px;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.itb-buscador__cerrar:hover,
.itb-buscador__cerrar:focus-visible { background: #000; color: #fff; }

.itb-buscador__form {
    display: flex;
    width: min(46rem, 100%);
    border-bottom: 2px solid #000;
}

.itb-buscador__campo {
    flex: 1;
    padding: .9rem .25rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    /* 16px o más: por debajo, iOS hace zoom al enfocar y descoloca la capa. */
    font-size: clamp(1.15rem, 3vw, 1.7rem);
    color: #000;
}

.itb-buscador__campo:focus { outline: none; }

.itb-buscador__enviar {
    padding: 0 1.4rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #000;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}

.itb-buscador__pista {
    margin: 1.1rem 0 0;
    width: min(46rem, 100%);
    color: #666;
    font-size: .85rem;
}

/* ===========================================================================
   BARRA INFERIOR FIJA EN MÓVIL
   ===========================================================================
   Solo en móvil: en escritorio el menú superior ya cumple y una barra fija abajo
   sería ruido. Cinco accesos como máximo, que es lo que cabe manteniendo los
   44px de objetivo táctil en una pantalla de 360px.
   --------------------------------------------------------------------------- */

.itb-barra { display: none; }

@media (max-width: 991px) {
    .itb-barra {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        display: flex;
        align-items: stretch;
        background: #fff;
        border-top: 1px solid #000;
        /* Respeta la franja del gesto de iOS: sin esto, el último icono queda
           debajo de la barra del sistema y no se puede pulsar. */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .itb-barra__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 54px;
        padding: 6px 2px;
        color: #000;
        font-size: .62rem;
        letter-spacing: .04em;
        text-transform: uppercase;
        text-decoration: none;
    }

    .itb-barra__item svg { width: 21px; height: 21px; }

    .itb-barra__item:active { background: #f1eeea; }

    .itb-barra__item:focus-visible {
        outline: 2px solid #000;
        outline-offset: -2px;
    }

    /* Hueco al final del documento para que la barra no tape el pie. */
    body.itb-con-barra { padding-bottom: 62px; }

    /* El botón flotante de WhatsApp ya vive en la barra: fuera el duplicado. */
    body.itb-con-barra a[href*="wa.me"]:not(.itb-barra__item),
    body.itb-con-barra a[href*="api.whatsapp"]:not(.itb-barra__item) {
        display: none !important;
    }
}

/* ===========================================================================
   ICONO DE COOKIES
   ===========================================================================
   Más pequeño, en blanco y negro como el resto, y fuera de la barra inferior
   para que no compita con los accesos de compra.
   --------------------------------------------------------------------------- */

[class*="cookie"][class*="icon"],
[id*="cookie"][class*="icon"],
[class*="cookie-btn"],
[class*="cookies-toggle"],
[class*="cookie_float"],
#cookie-icon {
    width: 34px !important;
    height: 34px !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: .7;
    transition: opacity .2s ease;
}

[class*="cookie"][class*="icon"]:hover,
[class*="cookie-btn"]:hover,
#cookie-icon:hover { opacity: 1; }

/* En móvil se sube por encima de la barra inferior para no solaparse. */
@media (max-width: 991px) {
    [class*="cookie"][class*="icon"],
    [class*="cookie-btn"],
    [class*="cookie_float"],
    #cookie-icon {
        bottom: 70px !important;
    }
}

/* ===========================================================================
   BARRA DE FILTRAR / ORDENAR EN MÓVIL   (patrón de Clarel)
   ===========================================================================
   Dos mitades exactas justo encima de la rejilla: filtrar a la izquierda,
   ordenar a la derecha. Medido en la referencia: 60px de alto, fondo blanco,
   sin bordes ni redondeos, y una línea divisoria fina entre las dos mitades.
   --------------------------------------------------------------------------- */

.itb-barra-listado { display: none; }

@media (max-width: 991px) {
    .itb-barra-listado {
        position: sticky;
        top: 0;
        z-index: 30;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 0 0 1rem;
        background: #fff;
        border-top: 1px solid #ddd8d2;
        border-bottom: 1px solid #ddd8d2;
    }

    .itb-barra-listado__mitad {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        /* 52px: por debajo de eso el objetivo táctil se queda corto. */
        min-height: 52px;
        padding: 0 .6rem;
        background: none;
        border: 0;
        border-radius: 0;
        color: #000;
        font-size: .76rem;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        cursor: pointer;
    }

    /* La divisoria va en la mitad derecha, no como borde del contenedor: así queda
       exactamente en el centro sin depender del ancho de pantalla. */
    .itb-barra-listado__orden { border-left: 1px solid #ddd8d2; }

    .itb-barra-listado__orden select {
        max-width: 55%;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        color: #000;
        font-size: .76rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .itb-barra-listado__mitad:focus-visible {
        outline: 2px solid #000;
        outline-offset: -2px;
    }

    /* El botón antiguo de "Filtrar" sobra: su función la cumple esta barra. */
    .itb-filtros__abrir { display: none !important; }
}

/* Los filtros arrancan en el mismo eje que la miga y el H1: el contenedor del
   tema les metía 10px de padding y quedaban desalineados por poco, que es lo que
   más se nota. */
.itb-filtros { padding-left: 0; margin-left: -10px; }

@media (max-width: 991px) {
    .itb-filtros { margin-left: 0; }
}

/* --- Selector de cantidad propio (cards con variantes) --------------------- */

.itb-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #d9d5cf;
    border-radius: 0;
}

.itb-qty__btn {
    width: 30px;
    min-height: 32px;
    background: #fff;
    border: 0;
    border-radius: 0;
    color: #000;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
}

.itb-qty__btn:hover { background: #000; color: #fff; }
.itb-qty__btn:focus-visible { outline: 2px solid #000; outline-offset: -2px; }

.itb-qty__campo {
    width: 34px;
    padding: 0;
    background: #fff;
    border: 0;
    border-left: 1px solid #d9d5cf;
    border-right: 1px solid #d9d5cf;
    border-radius: 0;
    color: #000;
    font-size: .85rem;
    text-align: center;
    -moz-appearance: textfield;
}

.itb-qty__campo::-webkit-outer-spin-button,
.itb-qty__campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Compra dentro de la vista rápida -------------------------------------- */

.itb-modal__compra { margin: 0 0 1rem; }

.itb-modal__compra select,
.itb-modal__compra input[type="text"],
.itb-modal__compra input[type="number"] {
    min-height: 42px;
    padding: .4rem .6rem;
    border: 1px solid #000;
    border-radius: 0;
    font-size: 16px;
}

.itb-modal__compra button[type="submit"],
.itb-modal__compra .add-to-cart {
    width: 100%;
    min-height: 46px;
    margin-top: .8rem;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: 0;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.itb-modal__compra .product-variants > .product-variants-item { margin-bottom: .8rem; }

/* ===========================================================================
   BLOQUE DE LA ESCUELA (ficha de producto)
   ===========================================================================
   Se mantiene el color de fondo, como pidió Jesús. Lo demás se rehace:

   · El texto iba JUSTIFICADO y con los 5px de word-spacing de la web encima, lo
     que abría ríos de espacio en blanco entre palabras. Justificar sin partición
     de palabras es la causa más común de un párrafo que "se ve mal" sin que se
     sepa por qué.
   · Iba en blanco sobre un rosa claro: ese par no llega al contraste mínimo
     legible. Pasa a negro, que además es el color de la tienda.
   · El botón era un contorno flotando solo a la izquierda mientras el texto
     ocupaba la derecha. Ahora el bloque tiene un orden de lectura: rótulo,
     mensaje y llamada a la acción.
   --------------------------------------------------------------------------- */

.itb-escuela {
    padding: clamp(1.75rem, 4vw, 3rem) !important;
    border-radius: 0 !important;
}

.itb-escuela .stsb_read_more_box,
.itb-escuela .stsb_pro_summary {
    max-width: 46rem;
}

.itb-escuela h1,
.itb-escuela h2,
.itb-escuela h3,
.itb-escuela h4,
.itb-escuela p,
.itb-escuela li,
.itb-escuela span {
    /* Alineado a la izquierda y sin el word-spacing global: en un bloque de
       marketing corto, esos 5px por palabra descosen la frase. */
    text-align: left !important;
    word-spacing: normal !important;
    color: #16110f !important;
}

.itb-escuela h3,
.itb-escuela h4 {
    margin: 0 0 .6rem !important;
    font-size: clamp(1.05rem, 2.2vw, 1.4rem) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: .01em;
}

.itb-escuela p {
    margin: 0 0 .7rem !important;
    /* Interlineado normal: venía tan abierto que las dos frases parecían de
       bloques distintos. */
    line-height: 1.6 !important;
    font-size: clamp(.95rem, 1.6vw, 1.05rem) !important;
    font-weight: 400 !important;
}

/* Llamada a la acción: sólida y cuadrada, como el resto de la tienda. Un botón
   de contorno sobre un fondo de color se lee como secundario, y este es el
   único objetivo del bloque. */
.itb-escuela .itb-escuela__cta,
.itb-escuela .elementor-button {
    display: inline-block;
    margin-top: .4rem;
    padding: .95rem 2rem !important;
    background: #16110f !important;
    color: #fff !important;
    border: 1px solid #16110f !important;
    border-radius: 0 !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.itb-escuela .itb-escuela__cta span,
.itb-escuela .elementor-button span { color: #fff !important; }

.itb-escuela .itb-escuela__cta:hover,
.itb-escuela .elementor-button:hover {
    background: transparent !important;
    color: #16110f !important;
}

.itb-escuela .itb-escuela__cta:hover span,
.itb-escuela .elementor-button:hover span { color: #16110f !important; }

.itb-escuela .itb-escuela__cta:focus-visible {
    outline: 2px solid #16110f;
    outline-offset: 3px;
}

/* En móvil el bloque pasa a una sola columna: el botón debajo del mensaje, no
   al lado, que a 390px deja el texto en una franja de dos palabras por línea. */
@media (max-width: 767px) {
    .itb-escuela,
    .itb-escuela > .e-con-inner {
        display: block !important;
    }

    .itb-escuela .itb-escuela__cta,
    .itb-escuela .elementor-button {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* ===========================================================================
   CARDS DE CATEGORÍA  (plantilla `category_min`, .elementor-2165)
   ===========================================================================
   Estructura del tema: una imagen a pantalla completa de la card y, encima, un
   contenedor absoluto con el nombre y el botón "Ver". Ese contenedor venía
   centrado con `translateY(-50%)` y el botón sólo aparecía al pasar por encima,
   así que en reposo la card era una foto con un texto flotando en medio y sin
   ninguna llamada a la acción visible.

   Se rehace: franja negra translúcida anclada abajo con el nombre y el botón
   siempre a la vista, que se oscurece al pasar por encima.
   --------------------------------------------------------------------------- */

.elementor-2165 {
    position: relative;
    overflow: hidden;
    border-radius: 0;
}

.elementor-2165 .stsb_cm_image_wrapper {
    display: block;
    overflow: hidden;
}

.elementor-2165 .stsb_cm_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.elementor-2165:hover .stsb_cm_image { transform: scale(1.06); }

/* La franja. Se anula el centrado del tema (`transform: translateY(-50%)`) y se
   ancla al borde inferior ocupando todo el ancho. */
.elementor-2165 .elementor-element-85568f9,
.elementor-2165 .e-con.e-child[data-element_type="container"] {
    position: absolute !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .6rem;
    width: 100% !important;
    max-width: none !important;
    padding: .8rem .9rem !important;
    /* Degradado además del plano: sobre una foto clara, un negro liso corta de
       golpe; con la transición hacia arriba la franja se asienta en la imagen. */
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .55) 65%, rgba(0, 0, 0, 0) 100%) !important;
    transition: background .3s ease;
}

.elementor-2165:hover .elementor-element-85568f9,
.elementor-2165:focus-within .elementor-element-85568f9 {
    background: linear-gradient(to top, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .78) 70%, rgba(0, 0, 0, .12) 100%) !important;
}

.elementor-2165 .stsb_mini_category_name {
    color: #fff !important;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.elementor-2165 .stsb_mini_category_name_wrapper { margin: 0 !important; }

/* Botón "Ver": visible SIEMPRE, no sólo al pasar por encima. Una card de
   categoría sin acción visible obliga a adivinar que se puede pulsar. */
.elementor-2165 .stsb_cm_action_button_view {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    flex: 0 0 auto;
    padding: .42rem 1rem !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #fff !important;
    border-radius: 0 !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease;
}

.elementor-2165 .stsb_cm_action_button_view span { color: inherit !important; }

.elementor-2165 .stsb_cm_action_button_view:hover {
    background: transparent !important;
    color: #fff !important;
}

/* --- Botón "+" de la esquina superior derecha ------------------------------
   En reposo: sólo el signo, en blanco y de trazo fino sobre la foto.
   Al pasar por encima: crece un poco y se mete en una caja blanca cuadrada con
   borde negro, con el signo en negro. */

.itb-cat-mas {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}

.itb-cat-mas svg { width: 17px; height: 17px; display: block; }

.elementor-2165:hover .itb-cat-mas,
.itb-cat-mas:hover,
.itb-cat-mas:focus-visible {
    transform: scale(1.12);
    background: #fff;
    color: #000;
    border-color: #000;
}

.itb-cat-mas:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .elementor-2165 .stsb_cm_image,
    .itb-cat-mas,
    .elementor-2165 .elementor-element-85568f9 { transition: none; }
    .elementor-2165:hover .stsb_cm_image { transform: none; }
}

/* --- Carrusel de categorías: 3 a la vista y flechas debajo -----------------
   El carrusel del tema mostraba cards de 500px de ancho, así que en pantalla
   entraban tres a medias y las flechas se superponían encima de las fotos,
   tapando parte de la imagen y del nombre.

   Se fija el slide a un tercio del ancho útil y las flechas salen del carrusel:
   pasan debajo, centradas y en formato mínimo. Fuera del área de imagen no
   compiten con el contenido y se leen mejor sobre el fondo de la página. */

.stsb-swiper-container { position: relative; padding-bottom: 3.4rem; }

.stsb-swiper-container .swiper-slide {
    width: calc((100% - 2px) / 3) !important;
    margin-right: 1px !important;
}

@media (max-width: 991px) {
    .stsb-swiper-container .swiper-slide { width: calc((100% - 1px) / 2) !important; }
}

@media (max-width: 575px) {
    .stsb-swiper-container .swiper-slide { width: 100% !important; margin-right: 0 !important; }
}

/* Las cards de 544px de alto son desproporcionadas para un carrusel de
   navegación: se acotan a una proporción manejable. */
.stsb-swiper-container .elementor-2165,
.stsb-swiper-container .stsb_cm_image_wrapper {
    aspect-ratio: 4 / 3;
    height: auto;
}

.stsb-swiper-container .stsb_cm_image_wrapper { height: 100%; }

/* Flechas: fuera del carrusel, centradas debajo y minimalistas. */
.stsb-swiper-container .elementor-swiper-button {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 !important;
    background: transparent;
    border: 1px solid #cfc9c2;
    border-radius: 0;
    color: #16110f;
    opacity: 1 !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* Sin `transform`: Elementor ya usa transform en estos botones y el suyo gana,
   dejando las flechas cruzadas (la de "anterior" a la derecha de la de
   "siguiente"). Con margenes calculados desde el centro no hay conflicto. */
.stsb-swiper-container .elementor-swiper-button-prev {
    left: calc(50% - 46px) !important;
    right: auto !important;
    transform: none !important;
}

.stsb-swiper-container .elementor-swiper-button-next {
    left: calc(50% + 4px) !important;
    right: auto !important;
    transform: none !important;
}

.stsb-swiper-container .elementor-swiper-button:hover,
.stsb-swiper-container .elementor-swiper-button:focus-visible {
    background: #16110f;
    border-color: #16110f;
    color: #fff;
}

.stsb-swiper-container .elementor-swiper-button svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.stsb-swiper-container .elementor-swiper-button[aria-disabled="true"] {
    opacity: .3 !important;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   NOTA DE REVERSIÓN — 18/08/2026
   Entre las 22:0x y las 22:3x se probaron varias vías para que la foto llenara
   la card (container queries, aspect-ratio en cadena, anchos forzados,
   align-items: stretch). NINGUNA lo consiguió: la foto se quedó en el 52% y de
   paso se desalinearon los botones y se ensancharon reglas que podían afectar a
   otros bloques. Se revierte al estado en que las cards funcionaban bien.

   Lo que sí quedó medido para retomarlo: `.e-con-inner` mide 135px dentro de un
   padre de 227px, y ni width, ni max-width, ni flex-basis, ni align-items lo
   cambian. El límite lo impone algo del propio Element Flow que todavía no está
   identificado, y hay que encontrarlo ANTES de volver a tocar, en vez de probar
   reglas a ciegas sobre selectores cada vez más amplios.
   --------------------------------------------------------------------------- */

/* --- Carrusel de categorías: cards separadas y con aire ---------------------
   Las imágenes ya vienen a 600x800: se respeta esa proporción en lugar de
   forzar un recorte, y la card se dimensiona a partir de ella. */

.stsb-swiper-container { padding-top: 1.5rem; padding-bottom: 1rem; }

.stsb-swiper-container .swiper-slide {
    /* Separación real entre cards: el tema las dejaba pegadas con 1px. */
    width: calc((100% - 2.4rem) / 3) !important;
    margin-right: 1.2rem !important;
}

@media (max-width: 991px) {
    .stsb-swiper-container .swiper-slide { width: calc((100% - 1.2rem) / 2) !important; }
}

@media (max-width: 575px) {
    .stsb-swiper-container .swiper-slide { width: 82% !important; }
}

.stsb-swiper-container .elementor-2165 {
    /* 3/4 es la proporción natural de estas fotos (600x800 recortadas): así no
       se deforman ni se recortan por la mitad. */
    aspect-ratio: 3 / 4;
    height: auto;
    border: 1px solid #e5e2de;
    overflow: hidden;
}

.stsb-swiper-container .stsb_cm_image_wrapper,
.stsb-swiper-container .stsb_cm_image_wrapper picture {
    display: block;
    width: 100%;
    height: 100%;
}

.stsb-swiper-container .stsb_cm_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Flechas arriba a la derecha, sobre el carrusel y fuera de las fotos. */
.stsb-swiper-container .elementor-swiper-button {
    top: 0 !important;
    bottom: auto !important;
    width: 38px;
    height: 38px;
}

.stsb-swiper-container .elementor-swiper-button-prev {
    left: auto !important;
    right: 44px !important;
}

.stsb-swiper-container .elementor-swiper-button-next {
    left: auto !important;
    right: 0 !important;
}

/* ===========================================================================
   LOS 46px DE RELLENO DE LA CARD  — causa real, encontrada midiendo
   ===========================================================================
   El contenedor interior de la card llevaba `padding: 0 46.08px`. Sobre una card
   de 257px eso deja 227 − 92 = 135px útiles: exactamente el ancho al que se
   quedaba la foto, y los márgenes laterales enormes que se veían.

   Por eso ninguna de las vías anteriores funcionó: `width: 100%`, `max-width`,
   `flex-basis`, `align-items: stretch` y las container queries actuaban sobre el
   ancho del hijo, que ya era correcto. Lo que sobraba era el relleno del padre.
   Se comprobó en vivo: con el padre en `display:block` y 227px, el hijo con
   `width:100% !important` seguía midiendo 135 — imposible salvo por el padding.

   Se toca SOLO el contenedor de la miniatura de producto (.elementor-863), no
   los contenedores de Elementor en general.
   --------------------------------------------------------------------------- */

.elementor-863 > .e-con,
.elementor-863 > .elementor-element.e-con {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* El relleno de la card, proporcionado al tamaño real que tiene en pantalla.
   14px sobre una card de 257px es un 5,4%; sobre una de 163px en móvil es un
   17% y deja la foto en el 82% en vez del 88% de escritorio. */
@media (max-width: 991px) {
    .elementor-863 { padding: 9px; }
}

@media (max-width: 480px) {
    .elementor-863 { padding: 7px; }
}

/* El fondo NO es un color elegido a ojo: es el que traen las propias fotos del
   catálogo. Extraído con canvas de las cuatro esquinas de
   /2911-medium_default/correctores-individuales.jpg → #fcf8f5 (252,248,245) en
   las cuatro, idéntico. Antes se usaba #f4f1ec, visiblemente más oscuro, y por
   eso las fotos se recortaban contra el fondo en vez de fundirse.

   Se mantiene el `multiply`: una foto con fondo blanco puro multiplicada por
   #fcf8f5 da exactamente #fcf8f5, y una que ya trae ese fondo se desvía unos 3
   puntos por canal, imperceptible. Es lo que unifica las dos familias de fotos
   que hay en el catálogo sin tocar un solo fichero de imagen. */
.elementor-863 [data-widget_type^="pm-product-image"] .elementor-widget-container {
    background-color: #fcf8f5 !important;
}

/* El selector de cantidad, a la MISMA altura que el botón de comprar.
   Medido: el del tema iba a 38px contra los 39 del botón (alineado), pero el
   propio se quedaba en 34 y descuadraba la fila. Se igualan los dos al botón. */
.elementor-863 .itb-qty,
.elementor-863 .stsb_qty_wrap {
    height: 39px;
    align-items: stretch;
}

.elementor-863 .itb-qty__btn,
.elementor-863 .itb-qty__campo {
    height: 100%;
    min-height: 0;
}

/* --- Vista rápida: foto con el mismo fondo del catálogo -------------------- */
.itb-modal__foto {
    background: #fcf8f5;
}

.itb-modal__foto img { mix-blend-mode: multiply; }

/* Datos de la vista rápida */
.itb-modal__marca {
    margin: 0 0 .35rem;
    color: #6b635c;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.itb-modal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.1rem;
    margin: 0 0 .9rem;
    font-size: .8rem;
    color: #6b635c;
}

.itb-modal__stock {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
}

.itb-modal__stock--si { color: #3f6b4a; }
.itb-modal__stock--no { color: #9b3126; }

.itb-modal__stock::before {
    content: "";
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: 50%;
}

.itb-modal__precio-viejo {
    margin-left: .6rem;
    color: #8a827a;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: line-through;
}



/* ===========================================================================
   SLIDER DE CATEGORÍAS · corrección de acabado
   ===========================================================================
   Ajustes pedidos: franja PLANA (sin degradado), opacidad baja, tipografía
   fina, y la imagen cubriendo la caja entera.
   --------------------------------------------------------------------------- */

/* La foto cubre toda la caja. `cover` recorta lo que sobra en vez de dejar
   franjas vacías, y el punto de anclaje va al centro para no cortar por arriba,
   que es donde suele estar el producto. */
/* SIN `position: absolute` aqui: sacaba las imagenes del flujo y las cajas del
   carrusel se quedaban VACIAS (medido, 18/08). Basta con que el envoltorio ocupe
   el 100% de la caja y la imagen lo cubra. */
.stsb-swiper-container .elementor-2165 .stsb_cm_image_wrapper,
.stsb-swiper-container .elementor-2165 .stsb_cm_image_wrapper picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
}

.stsb-swiper-container .elementor-2165 .stsb_cm_image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    max-width: none !important;
}

/* Franja plana y discreta: sin degradado y con poca opacidad, para que la foto
   siga leyéndose por debajo. */
.stsb-swiper-container .elementor-2165 .elementor-element-85568f9,
.stsb-swiper-container .elementor-2165 .e-con.e-child[data-element_type="container"] {
    background: rgba(0, 0, 0, 0.32) !important;
    padding: .7rem .85rem !important;
}

.stsb-swiper-container .elementor-2165:hover .elementor-element-85568f9,
.stsb-swiper-container .elementor-2165:focus-within .elementor-element-85568f9 {
    background: rgba(0, 0, 0, 0.46) !important;
}

/* Tipografía fina: sin negrita y con un poco de espaciado, que es lo que le da
   aire sobre una foto. La sombra se mantiene mínima para que siga legible sobre
   una imagen clara sin recurrir a más opacidad de fondo. */
.stsb-swiper-container .elementor-2165 .stsb_mini_category_name {
    font-weight: 300 !important;
    font-size: .92rem !important;
    letter-spacing: .09em !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

/* El botón «Ver», acorde con la franja: fino y sin relleno sólido. */
.stsb-swiper-container .elementor-2165 .stsb_cm_action_button_view {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .85) !important;
    font-weight: 400 !important;
    letter-spacing: .12em;
}

.stsb-swiper-container .elementor-2165 .stsb_cm_action_button_view:hover {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}

/* Caja de categoría más alta y flechas debajo del carrusel, a la derecha.
   5/7 en vez de 3/4: más vertical, que es la proporción con la que están hechas
   las fotos de categoría (600x800) y así se recorta menos al cubrir. */
.stsb-swiper-container .elementor-2165 {
    aspect-ratio: 5 / 7 !important;
}

.stsb-swiper-container {
    padding-bottom: 3.8rem !important;
}

/* Abajo y alineadas al borde derecho del carrusel: fuera de las fotos, juntas
   como un solo control y sin tapar contenido. */
.stsb-swiper-container .elementor-swiper-button {
    top: auto !important;
    bottom: 0 !important;
    width: 40px;
    height: 40px;
}

.stsb-swiper-container .elementor-swiper-button-prev {
    left: auto !important;
    right: 46px !important;
}

.stsb-swiper-container .elementor-swiper-button-next {
    left: auto !important;
    right: 0 !important;
}

/* La imagen cubre la caja de categoría: MISMO patrón que en las cards de
   producto — el contenedor de Elementor lleva `padding: 0 46.08px` y además no
   se estira en alto (257px de 611). Medido recorriendo la cadena, no supuesto.
   Se toca solo el contenedor dentro del carrusel de categorías. */
.stsb-swiper-container .elementor-2165 > .e-con,
.stsb-swiper-container .elementor-2165 > .elementor-element.e-con {
    padding-left: 0 !important;
    padding-right: 0 !important;
    height: 100% !important;
}

.stsb-swiper-container .elementor-2165 [data-widget_type^="cm-category-image"],
.stsb-swiper-container .elementor-2165 [data-widget_type^="cm-category-image"] > .elementor-widget-container {
    height: 100% !important;
    width: 100% !important;
}

/* ===========================================================================
   FRANJA DE VENTAJAS (home)  — fija, fina y con icono por mensaje
   ===========================================================================
   Sustituye a la marquesina que rotaba dos textos. Más baja que el bloque
   original (109px) y con las cinco garantías visibles a la vez.
   --------------------------------------------------------------------------- */

.itb-ventajas {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: start;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem clamp(16px, 3.2vw, 56px);
    background: #fcf8f5;
    border-top: 1px solid #eae5df;
    border-bottom: 1px solid #eae5df;
}

.itb-ventaja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    text-align: center;
}

.itb-ventaja svg {
    width: 26px;
    height: 26px;
    color: #16110f;
    flex: 0 0 auto;
}

.itb-ventaja p {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    line-height: 1.35;
}

.itb-ventaja strong {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: #16110f;
}

.itb-ventaja span,
.itb-ventaja a {
    font-size: .74rem;
    font-weight: 400;
    color: #6b635c;
}

.itb-ventaja a { color: #16110f; text-decoration: underline; }

/* En tablet pasan a dos filas; en móvil, a dos columnas y con el icono al lado
   del texto, que es lo que cabe sin que las frases se partan en cuatro líneas. */
@media (max-width: 991px) {
    .itb-ventajas { grid-template-columns: repeat(3, 1fr); row-gap: 1.1rem; }
}

@media (max-width: 600px) {
    .itb-ventajas {
        grid-template-columns: repeat(2, 1fr);
        gap: .9rem .6rem;
        padding: .9rem 14px;
    }

    .itb-ventaja { flex-direction: row; align-items: center; gap: .5rem; text-align: left; }
    .itb-ventaja svg { width: 22px; height: 22px; }
    .itb-ventaja strong { font-size: .72rem; }
    .itb-ventaja span, .itb-ventaja a { font-size: .68rem; }
}

/* Altura de la caja de categoría: CUADRADA, y sin crecimiento al pasar por encima.
   ---------------------------------------------------------------------------
   Medido con canvas sobre /c/34-category_default/rostro.jpg: la imagen es
   600x800 pero lleva 100px TRANSPARENTES arriba y otros 100 abajo, así que el
   contenido real es 600x600 — cuadrado. Por eso la caja se veía demasiado alta:
   estaba dimensionada al lienzo (5/7) y no al dibujo.

   Con la caja a 1/1 y `object-fit: cover`, el recorte que hace el navegador es
   exactamente el de esas dos bandas vacías: se elimina el hueco sin deformar la
   foto ni tocar el fichero. */
.stsb-swiper-container .elementor-2165 {
    aspect-ratio: 1 / 1 !important;
}

/* Sin efecto de crecimiento en el carrusel de categorías. */
.stsb-swiper-container .elementor-2165:hover .stsb_cm_image,
.stsb-swiper-container .elementor-2165:focus-within .stsb_cm_image {
    transform: none !important;
}

.stsb-swiper-container .elementor-2165 .stsb_cm_image {
    transition: none !important;
}

/* Elementor aplica su propio `_transform_scale_effect_pm: 1.1` al widget de la
   imagen desde los ajustes de la plantilla; se neutraliza también ahí. */
.stsb-swiper-container .elementor-2165 [data-widget_type^="cm-category-image"],
.stsb-swiper-container .elementor-2165 [data-widget_type^="cm-category-image"]:hover {
    transform: none !important;
}

/* Botón «Ver» del carrusel de categorías: 17px expresados en rem (17/16 =
   1.0625rem) y centrado vertical real dentro de la franja. Con `line-height: 1`
   y padding simétrico el texto queda en el eje óptico; con el line-height
   heredado se descolgaba unos píxeles hacia abajo. */
.stsb-swiper-container .elementor-2165 .stsb_cm_action_button_view {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.125rem;          /* 34px */
    padding: 0 1rem !important;
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1 !important;
}

.stsb-swiper-container .elementor-2165 .stsb_cm_action_button_view span {
    display: inline-flex;
    align-items: center;
    line-height: 1 !important;
    font-size: inherit !important;
}

/* El nombre de la categoría, al mismo cuerpo que el botón para que la franja
   tenga una sola línea de base. */
.stsb-swiper-container .elementor-2165 .stsb_mini_category_name {
    font-size: 1.0625rem !important; /* 17px */
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
}

.stsb-swiper-container .elementor-2165 .stsb_mini_category_name_wrapper {
    display: flex;
    align-items: center;
}

/* --- Filtros: casilla y texto en la misma línea de base -------------------- */
/* El texto se descolgaba respecto a la casilla porque el `<a>` y el `<input>`
   son hermanos con alturas distintas y line-height heredado del tema. */

.itb-facet li label,
.itb-facet li .facet-label {
    display: flex !important;
    align-items: center !important;
    gap: .55rem;
    margin: 0 !important;
    line-height: 1.3;
}

.itb-facet li input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0 !important;
    accent-color: #16110f;
    cursor: pointer;
}

.itb-facet li label a,
.itb-facet li .facet-label a {
    display: inline-flex;
    align-items: center;
    line-height: 1.3;
    margin: 0;
    padding: 0;
}

/* El título duplicado del tema (versión móvil) lo retira el JS; por si algún
   repintado lo devuelve, aquí queda neutralizado. */
.itb-filtros .title.hidden-md-up,
.itb-filtros .facet-title.h6 { display: none !important; }

/* Carga ligera y sin efectos: solo una atenuación breve, sin animaciones. */
.itb-cargando { opacity: .55; transition: opacity .12s linear; }

/* --- Vista rápida: variantes plegadas al abrir ----------------------------- */
/* Un desplegable de color abierto empuja el botón de comprar fuera de la vista
   en cuanto hay muchos tonos. Se muestra cerrado y el cliente lo abre. */

.itb-modal__compra select {
    width: 100%;
    max-width: 100%;
}

.itb-modal__compra .product-variants > .product-variants-item {
    margin-bottom: .75rem;
}

.itb-modal__compra .product-variants label,
.itb-modal__compra .product-variants .form-control-label {
    display: block;
    margin-bottom: .25rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --- Buscador dentro de una faceta larga ----------------------------------- */

.itb-facet__buscar {
    width: 100%;
    min-height: 36px;
    margin: 0 0 .6rem;
    padding: .4rem .6rem;
    background: #fff;
    border: 1px solid #d9d5cf;
    border-radius: 0;
    /* 16px: por debajo, iOS hace zoom al enfocar. */
    font-size: 16px;
    color: #16110f;
}

.itb-facet__buscar:focus-visible { outline: 2px solid #16110f; outline-offset: -1px; }

.itb-facet__vacio {
    margin: 0 0 .7rem;
    color: #8a827a;
    font-size: .82rem;
}

/* --- Filtros como PANEL LATERAL en móvil ----------------------------------- */
/* Desplegarlos en línea empujaba los productos fuera de la pantalla y se perdía
   el punto donde se estaba mirando. Como panel lateral, el listado se queda
   donde estaba y el filtro se cierra volviendo justo ahí. */

@media (max-width: 991px) {
    .itb-filtros.itb-filtros--abierto {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 10200;
        display: block;
        width: min(86vw, 22rem);
        margin: 0;
        padding: 3rem 1.1rem 1.5rem;
        overflow-y: auto;
        background: #fff;
        border-right: 1px solid #16110f;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
    }

    .itb-filtros__cerrar {
        position: absolute;
        top: 0;
        right: 0;
        width: 44px;
        height: 44px;
        background: #fff;
        color: #16110f;
        border: 0;
        border-left: 1px solid #e4ded6;
        border-bottom: 1px solid #e4ded6;
        border-radius: 0;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
    }

    .itb-filtros__cerrar:hover,
    .itb-filtros__cerrar:focus-visible { background: #16110f; color: #fff; }

    /* Velo detrás del panel y bloqueo del scroll del fondo. */
    body.itb-panel-abierto { overflow: hidden; }

    body.itb-panel-abierto::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 10150;
        background: rgba(0, 0, 0, .4);
    }
}

/* Buscador a pantalla completa: ajustes en móvil.
   Ocupa el alto real del dispositivo (`dvh`, que descuenta las barras del
   navegador), el campo arranca arriba en vez de centrado —con el teclado
   desplegado, centrado queda tapado— y el botón de cerrar respeta el notch. */
@media (max-width: 767px) {
    .itb-buscador {
        justify-content: flex-start;
        height: 100dvh;
        padding: 5.5rem 1.1rem 1.5rem;
    }

    .itb-buscador__cerrar {
        top: max(14px, env(safe-area-inset-top, 0px));
        right: 14px;
        width: 44px;
        height: 44px;
    }

    .itb-buscador__form { width: 100%; }

    .itb-buscador__campo {
        /* nunca por debajo de 16px: iOS haría zoom al enfocar */
        font-size: 1.15rem;
        padding: .8rem .2rem;
    }

    .itb-buscador__enviar { padding: 0 .9rem; font-size: .72rem; }
    .itb-buscador__pista { width: 100%; font-size: .8rem; }
}

/* Sobre el teclado virtual el alto disponible se reduce mucho: se compacta. */
@media (max-height: 520px) {
    .itb-buscador { padding-top: 3.5rem; }
    .itb-buscador__pista { display: none; }
}

/* ===========================================================================
   MENÚ LATERAL DE MÓVIL — cabecera con logo y salida a contacto
   =========================================================================== */

.itb-menu-cab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem 1rem 1rem;
    border-bottom: 1px solid #e4ded6;
}

.itb-menu-cab img {
    max-width: 150px;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.itb-menu-pie {
    padding: 1.1rem 1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
    margin-top: auto;
    border-top: 1px solid #e4ded6;
}

.itb-menu-contacto {
    display: block;
    width: 100%;
    padding: .85rem 1rem;
    background: #16110f;
    color: #fff;
    border: 1px solid #16110f;
    border-radius: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
}

.itb-menu-contacto:hover,
.itb-menu-contacto:focus-visible { background: transparent; color: #16110f; }

/* El panel pasa a columna para que el pie se pegue abajo y los enlaces respiren
   con objetivos táctiles decentes. */
.e-n-mobile-menu-content,
[class*="mobile-menu-content"] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.e-n-mobile-menu-content a:not(.itb-menu-contacto),
[class*="mobile-menu-content"] a:not(.itb-menu-contacto) {
    min-height: 46px;
    display: flex;
    align-items: center;
}

/* ===========================================================================
   FLUJO DE COMPRA EN MÓVIL — dos correcciones medidas
   ===========================================================================
   Auditado a 390px en carrito, ficha y acceso (18/08/2026).

   1) Campos por debajo de 16px: iOS AMPLÍA la página al enfocarlos y descoloca
      todo el formulario; el cliente pierde el sitio en mitad de la compra.
      Medidos 6 en la ficha, 3 en el acceso y 1 en el carrito. 16px es el umbral
      exacto de Safari, no una preferencia estética.
   2) Objetivos táctiles pequeños en los controles de compra (45 por debajo de
      40px en la ficha). Se suben SOLO los controles del flujo —cantidad, envío,
      cupón, botones de acción—, no los enlaces de texto corrido, que con 44px
      de alto romperían los párrafos.
   --------------------------------------------------------------------------- */

@media (max-width: 991px) {
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Controles del flujo de compra con objetivo táctil suficiente. */
    .product-quantity input,
    .product-quantity button,
    .cart-line-product-quantity input,
    .cart-line-product-quantity button,
    [class*="stsb_qty"] button,
    [class*="stsb_qty"] input,
    .cart-summary button,
    .cart-detailed-actions a,
    .cart-detailed-actions button,
    #checkout .btn,
    .checkout .btn,
    .block-promo button,
    .block-promo input,
    .form-footer button,
    .form-footer .btn {
        min-height: 44px;
    }

    /* Quitar producto del carrito: es un icono diminuto y un fallo de dedo aquí
       borra una línea del pedido. */
    .cart-line-product-actions a,
    .remove-from-cart {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
}

/* ===========================================================================
   CARRUSELES EN MÓVIL: un elemento por vista
   ===========================================================================
   Medido a 390px: los slides de producto ocupaban 212px (54% del ancho), así
   que se veía uno entero y medio cortado — la peor lectura posible, porque no
   se distingue si el de al lado está recortado a propósito o mal maquetado.

   Se distingue el carrusel por lo que contiene (`:has`), porque el mismo
   componente sirve para productos y para categorías y cada uno pide un tamaño
   distinto. Las flechas ya viven fuera del área de imagen, así que no hace falta
   dejar medio slide asomando para indicar que hay más.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
    /* El ancho lo fija Swiper desde JS (itbCarruselesMovil): forzarlo aqui
       tambien hacia que ambos pelearan y el slide se quedaba al 66%. */
    .stsb-swiper-container .swiper-slide {
        margin-right: 0 !important;
    }

    /* Flechas más presentes cuando solo se ve un elemento: son el único modo de
       saber que hay más. */
    .stsb-swiper-container .elementor-swiper-button {
        width: 44px;
        height: 44px;
        border-color: #16110f;
    }
}

/* --- Miniaturas del buscador con vista previa ------------------------------
   El buscador (ambjolisearch) sirve miniaturas pequeñas y se ven borrosas en
   pantallas de doble densidad. Se les da un tamaño de render fijo y modesto y
   se deja que el navegador use la resolución completa del fichero. */

[class*="jolisearch"] img,
[class*="ambjoli"] img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    background: #fcf8f5;
    image-rendering: auto;
}

/* Rejilla de productos en móvil: UN producto por fila (decisión de Jesús,
   provisional hasta dejar afinada la maquetación de dos columnas). Con una sola
   columna la card recupera todo el ancho y el nombre, el precio y el botón se
   leen sin apreturas. */
@media (max-width: 767px) {
    .stsb_grid_wrapper {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

/* La franja de ventajas, sin el fondo negro heredado de la plantilla.
   Medido: el contenedor que la envuelve venía con `background: rgb(0,0,0)`
   (1440x144 bajo el vídeo). Queda como en la referencia de farmatop: fondo
   claro y un filete negro fino arriba y abajo que la separa del vídeo sin
   cortar la página en dos. */
.itb-ventajas-envoltorio,
.itb-ventajas-envoltorio > .elementor-widget-container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.itb-ventajas {
    background: #fff;
    border-top: 1px solid #16110f;
    border-bottom: 1px solid #16110f;
}

/* ===========================================================================
   SIN EFECTO DE AGRANDAR IMÁGENES (decisión de Jesús)
   ===========================================================================
   Se retira en los tres sitios donde lo había: cards de producto, cards de
   categoría y carruseles. Elementor lo aplica además desde los ajustes de la
   plantilla (`_transform_scale_effect_pm`), así que se neutraliza también el
   transform del widget, no solo el de la imagen.
   --------------------------------------------------------------------------- */

.elementor-863 img,
.elementor-2165 img,
.stsb-swiper-container img,
.stsb_grid_wrapper img,
.elementor-863 [data-widget_type^="pm-product-image"],
.elementor-2165 [data-widget_type^="cm-category-image"],
.stsb-swiper-container [data-widget_type^="cm-category-image"] {
    transition: none !important;
}

.elementor-863:hover img,
.elementor-863:focus-within img,
.elementor-2165:hover img,
.elementor-2165:focus-within img,
.stsb-swiper-container:hover img,
.stsb_grid_wrapper *:hover img,
.elementor-863:hover [data-widget_type^="pm-product-image"],
.elementor-2165:hover [data-widget_type^="cm-category-image"],
.stsb-swiper-container:hover [data-widget_type^="cm-category-image"],
.elementor-863 [data-widget_type^="pm-product-image"]:hover,
.elementor-2165 [data-widget_type^="cm-category-image"]:hover {
    transform: none !important;
}

/* Franja de ventajas al estilo de la referencia: recuadro completo con filete
   fino en los CUATRO lados y separadores verticales entre bloques, en vez de
   solo las líneas de arriba y abajo. */
.itb-ventajas {
    background: #fff;
    border: 1px solid #16110f;
    /* Se separa del vídeo y respeta el mismo margen lateral del resto del sitio. */
    margin: 1.6rem auto;
    max-width: var(--itb-ancho, 1680px);
    width: calc(100% - 2 * var(--itb-margen, 32px));
    padding: 1.15rem 0;
}

/* Separadores entre bloques: filete en todos menos el primero de cada fila. */
.itb-ventaja + .itb-ventaja { border-left: 1px solid #e4ded6; }

.itb-ventaja { padding: 0 .9rem; }

@media (max-width: 991px) {
    /* Al pasar a 3 columnas, el primero de cada fila no lleva filete. */
    .itb-ventaja:nth-child(3n + 1) { border-left: 0; }
}

@media (max-width: 600px) {
    .itb-ventajas {
        margin: 1.1rem auto;
        width: calc(100% - 28px);
        padding: .9rem 0;
    }

    .itb-ventaja:nth-child(3n + 1) { border-left: 1px solid #e4ded6; }
    .itb-ventaja:nth-child(2n + 1) { border-left: 0; }
    .itb-ventaja { padding: .35rem .55rem; }
}

/* ===========================================================================
   FUERA EL EFECTO DE CRECER — en toda la web, sin resquicios
   ===========================================================================
   Elementor lo aplica por TRES vías distintas y hay que cortarlas todas:
     1. la clase `elementor-animation-grow` en botones y enlaces,
     2. el ajuste `_transform_scale_effect_pm` del widget (transform en :hover),
     3. transiciones de `transform` en las propias imágenes.
   Neutralizar solo una deja el efecto vivo en el resto, que es lo que venía
   pasando.
   --------------------------------------------------------------------------- */

.elementor-animation-grow,
.elementor-animation-grow:hover,
.elementor-animation-grow:focus,
.elementor-animation-grow:active {
    transform: none !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
}

/* Cualquier imagen del sitio: ni escala ni transición de transform. */
img,
picture,
figure {
    transition-property: opacity !important;
}

*:hover > img,
*:hover > picture > img,
*:focus-within > img,
[class*="elementor"]:hover img,
[class*="stsb"]:hover img,
[class*="elementor"]:hover [data-widget_type*="image"],
[data-widget_type*="image"]:hover,
[data-widget_type*="image"]:hover img {
    transform: none !important;
    scale: none !important;
}

/* Los widgets con `e-transform` son los que llevan el ajuste de escala de la
   plantilla: se anula en el propio widget y en su interior. */
.e-transform:hover,
.e-transform:focus-within,
.e-transform:hover > *,
.e-transform:hover img {
    transform: none !important;
    scale: none !important;
}

/* ===========================================================================
   FRANJA SUPERIOR DE AVISO — fija, negra, con cierre
   ===========================================================================
   Escritorio: pegada arriba del todo.
   Móvil: pegada TAMBIÉN, pero por debajo del header, que ahí ya ocupa la franja
   superior; solaparlos dejaría el aviso ilegible.
   --------------------------------------------------------------------------- */

.itb-aviso {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10300;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-height: 38px;
    padding: .45rem 3rem .45rem 1rem;
    background: #16110f;
    color: #fff;
}

.itb-aviso__texto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-align: center;
}

.itb-aviso__sep { opacity: .5; }

.itb-aviso__cerrar {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    /* 38px: objetivo táctil aceptable sin engordar la franja. */
    width: 38px;
    height: 38px;
    background: transparent;
    color: #fff;
    border: 0;
    border-radius: 0;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    opacity: .75;
}

.itb-aviso__cerrar:hover,
.itb-aviso__cerrar:focus-visible { opacity: 1; }

.itb-aviso__cerrar:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

/* Se reserva el hueco para que la franja no tape el inicio de la página. */
body.itb-con-aviso { padding-top: 38px; }

@media (max-width: 991px) {
    /* Debajo del header, no encima: en móvil el header ya vive arriba. */
    .itb-aviso {
        top: var(--itb-alto-header, 64px);
        min-height: 34px;
        padding: .4rem 2.6rem .4rem .7rem;
    }

    .itb-aviso__texto { font-size: .7rem; gap: .35rem; }
    .itb-aviso__cerrar { width: 34px; height: 34px; font-size: 1.2rem; }

    body.itb-con-aviso { padding-top: 34px; }
}

/* El margen lateral que añadí a los contenedores creaba scroll horizontal: los
   hijos que Elementor declara con ancho fijo (1440px) no lo respetan y se salen
   justo el ancho del padding. Medido en la home: documento 1486 sobre viewport
   1440, exceso de 46px = el valor exacto de --itb-margen a ese ancho.
   Se acota el hijo, que es la causa, en vez de esconderlo con overflow. */
.elementor > .e-con.e-parent > *,
.elementor-862 > .e-con.e-parent > *,
.elementor-2969 > .e-con.e-parent > * {
    max-width: 100%;
}

/* Secciones a ancho completo dentro de un contenedor con margen lateral.
   El tema declara algunas secciones con `width: 1440px` (o sea 100vw) y mi
   margen lateral las empuja fuera justo esos 46px. No es un fallo del tema ni
   del margen: una sección full-width y un padding lateral son incompatibles por
   definición, y aquí se quieren las dos cosas.
   `overflow-x: clip` acota el lienzo sin crear contexto de scroll (a diferencia
   de `hidden`, que rompería `position: sticky` de la franja y del header). */
html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
    max-width: 100vw;
}

/* Botón propio de búsqueda (sustituye al del tema) */
.itb-buscar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    color: inherit;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.itb-buscar-btn svg { width: 21px; height: 21px; display: block; }
.itb-buscar-btn:hover { opacity: .7; }
.itb-buscar-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* La franja de ventajas en la FICHA: a ancho completo, antes de las pestañas. */
.itb-ventajas--ficha {
    margin: 2rem auto 1.5rem;
}

/* ===========================================================================
   BLOQUE DE LA ESCUELA — rediseño
   ===========================================================================
   Seguía viéndose pobre porque era texto suelto sobre un color: sin jerarquía,
   sin ancla visual y con el botón como único elemento. Se le da estructura de
   pieza: rótulo pequeño que dice QUÉ es, titular corto, texto de apoyo medido y
   la llamada a la acción con aire propio. Sin colores nuevos: el fondo que ya
   tenía y la tinta de la tienda.
   --------------------------------------------------------------------------- */

.itb-escuela {
    position: relative;
    display: grid;
    gap: 1.1rem;
    align-content: center;
    overflow: hidden;
}

/* Rótulo: contexto en dos palabras antes del mensaje. */
.itb-escuela::before {
    content: "Escuela Harpo";
    display: inline-block;
    justify-self: start;
    padding: .35rem .7rem;
    background: #16110f;
    color: #fff;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* Filete de cierre que ancla el bloque y lo separa del resto de la ficha. */
.itb-escuela::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #16110f;
}

.itb-escuela h3,
.itb-escuela h4 {
    max-width: 22ch;
    font-size: clamp(1.3rem, 3vw, 1.9rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -.01em;
}

.itb-escuela p {
    max-width: 52ch;
    color: #3a322d !important;
}

.itb-escuela .itb-escuela__cta,
.itb-escuela .elementor-button {
    justify-self: start;
    margin-top: .3rem;
}

@media (max-width: 767px) {
    .itb-escuela::before { font-size: .58rem; }
    .itb-escuela h3, .itb-escuela h4 { max-width: none; }
}

/* ===========================================================================
   PÁGINAS DE TEXTO (legales, FAQ, envíos)
   ===========================================================================
   Estaban maquetadas como el resto del sitio: el texto en una columna de 629px
   desplazada a la derecha, con el interlineado de un listado y sin jerarquía.
   Un documento legal se lee de arriba abajo y necesita otra cosa: medida de
   lectura, aire entre párrafos y encabezados que dejen encontrar la cláusula.
   --------------------------------------------------------------------------- */

body.itb-pagina-texto .stsb_read_more_box,
body.itb-pagina-texto .page-content,
body.itb-pagina-texto #content {
    /* 68ch: la medida en la que el ojo no pierde el renglón. Ni 30 caracteres
       (columna estrecha) ni la línea de 1440px de lado a lado. */
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
    /* Sin relleno lateral propio: el contenedor de la pagina ya trae su margen y
       sumarle otro metia el texto hacia dentro. Solo se conserva en movil, donde
       el texto si necesita despegarse del borde de la pantalla. */
    padding: 0;
    font-size: 1.02rem;
    line-height: 1.75;
    color: #2a2420;
}

body.itb-pagina-texto .stsb_read_more_box p,
body.itb-pagina-texto .page-content p {
    margin: 0 0 1.1rem;
    text-align: left;
    word-spacing: normal;
}

body.itb-pagina-texto h1 {
    margin: 0 0 1.6rem;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.15;
}

/* Sin filete encima de los titulos: separaban de mas y en una pagina con varios
   bloques («Pedidos», «Devoluciones») parecian tachones. El aire del margen ya
   marca el corte. */
body.itb-pagina-texto h2 {
    margin: 2.2rem 0 .8rem;
    padding-top: 0;
    border-top: 0;
    font-size: clamp(1.15rem, 2.6vw, 1.45rem);
    line-height: 1.25;
}

body.itb-pagina-texto h3 {
    margin: 1.6rem 0 .6rem;
    font-size: 1.02rem;
}

body.itb-pagina-texto ul,
body.itb-pagina-texto ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
body.itb-pagina-texto li { margin-bottom: .45rem; }

body.itb-pagina-texto a { color: #16110f; text-decoration: underline; }

/* --- Preguntas frecuentes en acordeón -------------------------------------- */

.itb-faq {
    border-bottom: 1px solid #e4ded6;
}

.itb-faq:first-of-type { border-top: 1px solid #e4ded6; }

.itb-faq__p {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    /* 52px de alto útil: objetivo cómodo también con el dedo. */
    min-height: 52px;
    padding: .95rem 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #16110f;
    cursor: pointer;
    list-style: none;
}

.itb-faq__p::-webkit-details-marker { display: none; }

.itb-faq__p::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
}

.itb-faq[open] > .itb-faq__p::after { content: "\2013"; }

.itb-faq__p:focus-visible { outline: 2px solid #16110f; outline-offset: 2px; }

.itb-faq__r {
    padding: 0 0 1.1rem;
    color: #3a322d;
}

.itb-faq__r p:last-child { margin-bottom: 0; }

/* ===========================================================================
   VÍDEO DE PORTADA — velo y botón
   ===========================================================================
   El texto va en blanco sobre un vídeo que cambia de luminosidad todo el rato:
   habrá fotogramas claros donde no se lea nada. Un velo oscuro fija un fondo
   mínimo garantizado y hace la lectura estable sin apagar la imagen.
   0.38 es suficiente para sostener texto blanco y deja ver el vídeo.
   --------------------------------------------------------------------------- */

.elementor-element:has(> .elementor-background-video-container),
.elementor-element:has(> .elementor-background-video-wrapper) {
    position: relative;
}

.elementor-element:has(> .elementor-background-video-container)::after,
.elementor-element:has(> .elementor-background-video-wrapper)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .38);
    pointer-events: none;
}

/* El contenido debe quedar POR ENCIMA del velo, o se lo traga. */
.elementor-element:has(> .elementor-background-video-container) > .e-con-inner,
.elementor-element:has(> .elementor-background-video-container) > .elementor-element,
.elementor-element:has(> .elementor-background-video-wrapper) > .e-con-inner {
    position: relative;
    z-index: 2;
}

/* Botón de portada: sin sombra y con acabado limpio. La sombra sobre un vídeo
   ya velado no aporta separación, solo ensucia el borde. */
/* Estados invertidos (peticion de Jesus): en reposo el contorno, que sobre el
   video velado se lee sin tapar imagen; al pasar por encima se rellena de negro,
   que es el gesto que confirma que es pulsable. */
.itb-cta-video {
    box-shadow: none !important;
    background: transparent !important;
    color: #fff !important;
    border: 1px solid #fff !important;
    border-radius: 0 !important;
    padding: 1rem 2.2rem !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    transition: background .22s ease, color .22s ease !important;
}

.itb-cta-video:hover,
.itb-cta-video:focus-visible {
    background: #16110f !important;
    color: #fff !important;
    border-color: #16110f !important;
    /* Trazo mas fino al rellenar: sobre fondo solido el mismo peso se ve mas
       pesado que sobre el contorno. */
    font-weight: 400 !important;
    letter-spacing: .16em !important;
}

.itb-cta-video span { color: inherit !important; }

.itb-cta-video:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 767px) {
    body.itb-pagina-texto .stsb_read_more_box,
    body.itb-pagina-texto .page-content,
    body.itb-pagina-texto #content {
        padding: 0 14px;
    }
}

/* El contenido de la portada debe quedar por encima del velo del vídeo. */
.elementor-element:has(> .elementor-background-video-container) .e-con-inner,
.elementor-element:has(> .elementor-background-video-container) h1,
.elementor-element:has(> .elementor-background-video-container) .elementor-widget {
    position: relative;
    z-index: 2;
}

/* El contenedor de las páginas CMS limitaba el texto a 629px dentro de una
   columna, con lo que el contenido se veía metido hacia dentro. En una página
   de texto no hay columna lateral que respetar: el bloque pasa a ocupar el ancho
   de la página y la medida de lectura la impone el `max-width` en caracteres,
   que es lo que debe gobernarla. */
body.itb-pagina-texto .stsb_read_more_box,
body.itb-pagina-texto .stsb_pro_summary,
body.itb-pagina-texto .page-content,
body.itb-pagina-texto #content {
    width: 100%;
}

body.itb-pagina-texto .e-con-inner,
body.itb-pagina-texto .elementor-widget-container {
    max-width: 100%;
}

/* La columna que envuelve el texto deja de estar acotada. */
body.itb-pagina-texto .e-con.e-child {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
}

/* CAUSA del texto estrecho, medida recorriendo la cadena: el contenido cuelga de
   una COLUMNA de 649px dentro de una fila flex de 1348. No era el `max-width` del
   bloque de texto ni su padding: era el reparto de la fila. En una página de
   texto no hay segunda columna que respetar, así que la fila pasa a columna y el
   contenido recupera el ancho de la página. */
body.itb-pagina-texto .e-con-inner {
    flex-direction: column !important;
}

body.itb-pagina-texto .e-con-inner > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
}

/* --- Tarjeta de cierre del FAQ -------------------------------------------- */

.itb-faq-cta {
    margin: 2.5rem auto 1rem;
    padding: clamp(1.6rem, 4vw, 2.6rem);
    background: #16110f;
    color: #fff;
    border-radius: 0;
    text-align: center;
}

.itb-faq-cta h2 {
    margin: 0 0 .7rem !important;
    padding: 0 !important;
    border: 0 !important;
    color: #fff !important;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    line-height: 1.2;
}

.itb-faq-cta p {
    max-width: 46ch;
    margin: 0 auto 1.5rem !important;
    color: #e8e2dc !important;
    font-size: .96rem;
    line-height: 1.6;
}

.itb-faq-cta__btn {
    display: inline-block;
    padding: .9rem 2.2rem;
    background: transparent;
    color: #fff;
    /* Borde blanco y esquinas rectas: la línea sola basta como llamada cuando el
       fondo ya es negro; un botón relleno competiría con la propia tarjeta. */
    border: 1px solid #fff;
    border-radius: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .22s ease, color .22s ease;
}

.itb-faq-cta__btn:hover,
.itb-faq-cta__btn:focus-visible { background: #fff; color: #16110f; }

.itb-faq-cta__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Titular de portada: más grande y en varias líneas.
   Medido: 50px en una sola línea de 1240px de ancho. Un titular que ocupa todo
   el ancho en una línea se lee como un rótulo, no como una entrada; partido en
   dos o tres, gana peso visual y deja respirar el vídeo detrás.
   La medida en `ch` es la que fuerza el salto, sin `<br>` que se rompen al
   cambiar de idioma o de pantalla. */
.elementor-element:has(> .elementor-background-video-container) h1,
.elementor-element:has(> .elementor-background-video-wrapper) h1 {
    max-width: 16ch;
    font-size: clamp(2.4rem, 6.4vw, 5rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.015em;
    /* El word-spacing global de 5px abre demasiado un titular de este cuerpo. */
    word-spacing: 2px !important;
    text-wrap: balance;
}

@media (max-width: 767px) {
    .elementor-element:has(> .elementor-background-video-container) h1 {
        max-width: 13ch;
        font-size: clamp(2rem, 10vw, 3rem) !important;
    }
}

/* ===========================================================================
   VARIANTES NO DISPONIBLES — aspa negra en vez de raya roja
   ===========================================================================
   El tema marca los tonos agotados con `.stsb_unavailable_variant` y una línea
   roja. En una tienda en blanco y negro el rojo canta, y una raya diagonal se
   confunde con un borde. Un aspa se lee como «esta no» sin ambigüedad y sin
   introducir un color que no está en la paleta.

   El aspa se dibuja con dos pseudoelementos girados sobre la muestra de color,
   con un halo blanco fino para que se distinga también sobre tonos oscuros
   (esta tienda tiene tonos que llegan al negro #000000).
   --------------------------------------------------------------------------- */

.stsb_variant_item.stsb_unavailable_variant .color,
.stsb_variant_item.stsb_unavailable_variant .attribute-name {
    position: relative;
}

.stsb_variant_item.stsb_unavailable_variant label {
    position: relative;
    /* La opacidad la pone el tema en algunos casos: se mantiene legible. */
    opacity: 1;
}

/* Se retira cualquier marca previa del tema (la raya roja). */
.stsb_variant_item.stsb_unavailable_variant .color::before,
.stsb_variant_item.stsb_unavailable_variant .color::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 132%;
    height: 1.6px;
    background: #000;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .85);
    pointer-events: none;
    border-radius: 0;
}

.stsb_variant_item.stsb_unavailable_variant .color::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.stsb_variant_item.stsb_unavailable_variant .color::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Nada de rojo en esta señal, venga de donde venga. */
.stsb_variant_item.stsb_unavailable_variant .color,
.stsb_variant_item.stsb_unavailable_variant label {
    border-color: #cfc9c2 !important;
    text-decoration: none !important;
}

.stsb_variant_item.stsb_unavailable_variant input {
    cursor: not-allowed;
}

/* El bloque de la Escuela quedaba en `display: block` porque el contenedor de
   Elementor gana en especificidad. Con la clase repetida se impone sin recurrir
   a `!important` en la propiedad de layout, que es la que más daño hace si algún
   día hay que revertirla. */
.itb-escuela.itb-escuela {
    display: grid;
}

/* El logo del menú móvil puede ser SVG o imagen: se acota por altura, no por
   `max-width` de imagen, que no aplica a un SVG en línea. */
.itb-menu-cab a { display: inline-flex; align-items: center; }
.itb-menu-cab svg,
.itb-menu-cab img {
    max-height: 44px;
    max-width: 160px;
    width: auto;
    height: auto;
}

/* ===========================================================================
   ACOTAR MIS REGLAS DE REJILLA · la galería de la ficha NO es un listado
   ===========================================================================
   `.stsb_grid_wrapper` la usa el tema para DOS cosas distintas: la rejilla de
   productos y la galería de imágenes de la ficha. Mis reglas de columnas y gap
   se aplicaban a las dos, así que una ficha con UNA sola foto quedaba con la
   imagen a 256px dentro de un grid de 3 columnas de 809px: 553px de hueco
   blanco a la derecha. Lo causé yo con un `!important` demasiado ancho.

   Aquí se devuelve la galería a su comportamiento propio y, de paso, se adapta
   al número real de fotos.
   --------------------------------------------------------------------------- */

[data-widget_type^="st-product-gallery"] .stsb_grid_wrapper,
[data-widget_type^="st-product-images"] .stsb_grid_wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}

/* Con UNA sola imagen no hay rejilla que valga: ocupa el ancho completo.
   `:has` cuenta los hijos — un único `.stsb_grid_item` y ninguno más. */
[data-widget_type^="st-product-gallery"] .stsb_grid_wrapper:has(> .stsb_grid_item:only-child),
[data-widget_type^="st-product-images"] .stsb_grid_wrapper:has(> .stsb_grid_item:only-child) {
    grid-template-columns: 1fr !important;
}

[data-widget_type^="st-product-gallery"] .stsb_grid_item,
[data-widget_type^="st-product-images"] .stsb_grid_item {
    width: 100%;
}

[data-widget_type^="st-product-gallery"] .stsb_grid_item img,
[data-widget_type^="st-product-images"] .stsb_grid_item img {
    width: 100%;
    height: auto;
    /* Mismo fondito del catálogo, para que la ficha no rompa con la rejilla. */
    background: #fcf8f5;
}

/* Respaldo para navegadores sin `:has()`: con dos columnas y una sola imagen,
   al menos ocupa la mitad y no un tercio. */
@supports not selector(:has(*)) {
    [data-widget_type^="st-product-gallery"] .stsb_grid_wrapper {
        grid-template-columns: 1fr !important;
    }
}

/* --- Pestañas sin contenido: fuera ----------------------------------------
   La ficha muestra «Ingredientes y Seguridad» aunque ese producto no tenga
   nada que contar ahí. Una pestaña que se abre y no dice nada es peor que no
   tenerla: parece que la web está rota. El JS las oculta al medir su panel. */

.itb-tab-vacia { display: none !important; }

/* --- Descripción del producto: aire de lectura ---------------------------- */

[data-widget_type^="nested-tabs"] .e-n-tabs-content p,
[class*="e-n-tabs-content"] p {
    margin: 0 0 1rem;
    line-height: 1.7;
}

[data-widget_type^="nested-tabs"] .e-n-tabs-content h2,
[data-widget_type^="nested-tabs"] .e-n-tabs-content h3,
[class*="e-n-tabs-content"] h2,
[class*="e-n-tabs-content"] h3 {
    margin: 1.8rem 0 .7rem;
    line-height: 1.25;
}

[data-widget_type^="nested-tabs"] .e-n-tabs-content ul,
[data-widget_type^="nested-tabs"] .e-n-tabs-content ol,
[class*="e-n-tabs-content"] ul,
[class*="e-n-tabs-content"] ol {
    margin: 0 0 1.1rem;
    padding-left: 1.3rem;
}

[data-widget_type^="nested-tabs"] .e-n-tabs-content li,
[class*="e-n-tabs-content"] li { margin-bottom: .45rem; line-height: 1.65; }

/* Medida de lectura: la descripción a 1348px de ancho es ilegible. */
[data-widget_type^="nested-tabs"] .e-n-tabs-content > * > *,
[class*="e-n-tabs-content"] > * > * { max-width: 78ch; }

/* Rótulo «Conoce nuestros productos» en UNA línea.
   Venía partido en dos por un <br> dentro del contenido (el JS lo retira) y
   además se le impide romper. En pantallas muy estrechas sí puede partir: antes
   que desbordar, prefiere dos líneas. */
.itb-rotulo-productos {
    white-space: nowrap;
    text-wrap: nowrap;
}

@media (max-width: 420px) {
    .itb-rotulo-productos { white-space: normal; text-wrap: balance; }
}

/* Botón de portada: más cuerpo, trazo fino y más aire entre letras.
   13,12px en peso 700 se leía como una etiqueta; a este tamaño con peso ligero
   y el espaciado abierto queda como una llamada de marca, no como un botón de
   formulario. */
.itb-cta-video {
    font-size: clamp(.86rem, 1.1vw, 1rem) !important;
    font-weight: 300 !important;
    letter-spacing: .2em !important;
    padding: 1.05rem 2.6rem !important;
}

.itb-cta-video:hover,
.itb-cta-video:focus-visible {
    /* Al rellenarse de negro el trazo se percibe más grueso: se mantiene ligero. */
    font-weight: 300 !important;
    letter-spacing: .2em !important;
}

@media (max-width: 480px) {
    .itb-cta-video { padding: .95rem 1.8rem !important; letter-spacing: .16em !important; }
}

/* ===========================================================================
   MARCAS: rejilla de DOS FILAS, sin carrusel
   ===========================================================================
   18 marcas mostradas de 5 en 5 cada 1,5 s: para verlas todas hacían falta
   cuatro pasadas, y ninguna se leía porque el bloque no paraba. Con 9 columnas
   salen exactamente dos filas y se ven todas de un vistazo.

   Las imágenes son `small_default` de 98x98: se muestran a ese tamaño o por
   debajo, nunca ampliadas, o se verían borrosas.
   --------------------------------------------------------------------------- */

.itb-marcas {
    overflow: visible !important;
    padding-bottom: 0 !important;
}

.itb-marcas .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(9, 1fr) !important;
    gap: 1.4rem 1rem;
    /* Sin rastro del carrusel: ni desplazamiento ni transición. */
    transform: none !important;
    transition: none !important;
    width: 100% !important;
    height: auto !important;
}

.itb-marcas .swiper-slide {
    width: auto !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.itb-marcas .stsb_mm_image_wrapper,
.itb-marcas .e-con-inner,
.itb-marcas .elementor-widget-container {
    width: 100%;
    padding: 0 !important;
}

.itb-marcas .stsb_mm_image {
    display: block;
    width: 100%;
    max-width: 98px;   /* tamaño real del fichero: no se amplía */
    height: auto;
    margin: 0 auto;
    /* Los logos vienen en colores muy distintos; en gris la fila se lee como un
       conjunto y no como un mosaico. Recuperan su color al pasar por encima. */
    filter: grayscale(1);
    opacity: .62;
    transition: opacity .22s ease, filter .22s ease;
}

.itb-marcas .swiper-slide:hover .stsb_mm_image {
    filter: grayscale(0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .itb-marcas .stsb_mm_image { transition: none; }
}

/* Al estrechar, menos columnas; las dos filas exactas solo son posibles con las
   18 marcas y 9 columnas. */
@media (max-width: 1100px) {
    .itb-marcas .swiper-wrapper { grid-template-columns: repeat(6, 1fr) !important; }
}

@media (max-width: 767px) {
    .itb-marcas .swiper-wrapper { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem .7rem; }
}

@media (max-width: 420px) {
    .itb-marcas .swiper-wrapper { grid-template-columns: repeat(3, 1fr) !important; }
}

/* EL PADDING DE 46px, TERCERA APARICIÓN.
   ---------------------------------------------------------------------------
   Los contenedores `.e-con` de Elementor traen `padding: 0 46.08px`. Cuando el
   contenedor es ancho no se nota; cuando es una celda de rejilla, se come el
   contenido entero:
     · card de producto:  227px - 92 = 135  (foto al 52%)
     · slider categorías: 434px - 92 = 342  (imagen sin cubrir la caja)
     · logo de marca:     112px - 92 =  20  (logo de 98px mostrado a 20)
   Se anula dentro de MIS rejillas, que son celdas estrechas por definición.
   Fuera de ellas el padding se respeta: ahí sí cumple su función. */

.itb-marcas .e-con,
.itb-marcas .elementor-element,
.itb-marcas .e-con-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.itb-marcas .stsb_mm_image_wrapper,
.itb-marcas .e-con-inner,
.itb-marcas .elementor-widget-container,
.itb-marcas .elementor-2667 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 🥇 LA PROPIEDAD ES `padding-inline`, NO `padding-left/right`.
   ---------------------------------------------------------------------------
   Aquí estaba el motivo de que el arreglo del padding funcionara en unos sitios
   y en otros no. Elementor declara el relleno de sus contenedores con la
   propiedad LÓGICA `padding-inline`, y una declaración física —por mucho
   `!important` que lleve— no la anula: son propiedades distintas y la lógica
   gana si se declara después.

   Comprobado en vivo sobre el logo de marca: con `padding-left: 0 !important`
   seguía en 20px; con `padding-inline: 0` pasó a sus 98px reales.

   Se aplica a las tres rejillas donde el relleno se come la celda. */

.itb-marcas .e-con,
.itb-marcas .elementor-element,
.itb-marcas .e-con-inner,
.elementor-863 > .e-con,
.elementor-863 > .elementor-element.e-con,
.stsb-swiper-container .elementor-2165 > .e-con,
.stsb-swiper-container .elementor-2165 > .elementor-element.e-con {
    padding-inline: 0 !important;
    --padding-inline-start: 0px !important;
    --padding-inline-end: 0px !important;
}

/* Los logos recuperan su tamaño real; se centran en su celda. */
.itb-marcas .stsb_mm_image {
    max-width: 98px;
    margin-inline: auto;
}

/* ===========================================================================
   MÓVIL · correcciones medidas
   =========================================================================== */

@media (max-width: 991px) {
    /* La banda de aviso iba a `top: 64px` suponiendo un header de ese alto, y el
       header mide 0 en móvil: quedaba flotando separada de arriba. Se pega al
       borde, que es donde se espera. */
    .itb-aviso {
        top: 0 !important;
        min-height: 30px;
        padding: .3rem 2.2rem .3rem .6rem;
    }

    .itb-aviso__texto {
        flex-wrap: nowrap;          /* una sola línea */
        gap: .35rem;
        font-size: .66rem;
        letter-spacing: .01em;
        white-space: nowrap;
    }

    .itb-aviso__cerrar { width: 30px; height: 30px; font-size: 1.1rem; }

    body.itb-con-aviso { padding-top: 30px; }
}

@media (max-width: 767px) {
    /* Botón de portada: una sola línea y fondo negro (antes 3 líneas y
       transparente sobre el vídeo, que se leía mal en movimiento). */
    .itb-cta-video {
        display: inline-block;
        white-space: nowrap;
        background: #16110f !important;
        border-color: #16110f !important;
        color: #fff !important;
        font-size: .74rem !important;
        letter-spacing: .12em !important;
        padding: .9rem 1.4rem !important;
    }

    /* Franja de ventajas bajo el vídeo: aire y separadores limpios. */
    .itb-ventajas {
        margin: 1.2rem auto !important;
        width: calc(100% - 24px) !important;
        padding: .3rem 0 !important;
        gap: 0 !important;
    }

    .itb-ventaja {
        padding: .75rem .6rem !important;
        border-left: 0 !important;
        border-bottom: 1px solid #eee8e1;
    }

    /* Con 2 columnas: sin borde derecho en la última de cada fila ni borde
       inferior en la última fila. */
    .itb-ventaja:nth-child(odd) { border-right: 1px solid #eee8e1; }
    .itb-ventaja:nth-last-child(-n+1) { border-bottom: 0; }

    .itb-ventaja strong { font-size: .7rem; }
    .itb-ventaja span, .itb-ventaja a { font-size: .66rem; }

    /* Carruseles de producto: ancho completo y cards más anchas con separación
       real. Medido: el contenedor se quedaba en 258px de 390 y arrancaba en
       x=66, de ahí la sensación de que estaban desplazados a la derecha. */
    .stsb-swiper-container {
        width: 100% !important;
        padding-inline: 0 !important;
    }

    .stsb-swiper-container .swiper-slide { padding: 0 6px; }

    /* La card no debe recortar su propio botón. */
    .elementor-863 { overflow: visible; }
    .elementor-863 [data-widget_type^="pm-product-action-button"] { overflow: visible; }

    /* Buscador a pantalla completa: sin sombras ni adornos. */
    .itb-buscador,
    .itb-buscador__form,
    .itb-buscador__campo,
    .itb-buscador__cerrar {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .itb-buscador__cerrar { border-radius: 0; }
}

/* Menú lateral de móvil: maqueta limpia y «+» en lugar de la flecha. */
@media (max-width: 991px) {
    .e-n-mobile-menu-content,
    [class*="mobile-menu-content"] {
        padding: 0;
        background: #fff;
    }

    .e-n-mobile-menu-content a:not(.itb-menu-contacto),
    [class*="mobile-menu-content"] a:not(.itb-menu-contacto) {
        min-height: 52px;
        padding: 0 1.1rem;
        border-bottom: 1px solid #eee8e1;
        color: #16110f;
        font-size: .92rem;
        letter-spacing: .04em;
        text-decoration: none;
    }

    /* Fuera la flecha del acordeón; entra un signo «+» que se convierte en «–»
       al abrir, igual que en los filtros y en el FAQ: un solo lenguaje. */
    .e-n-mobile-menu-content .e-n-accordion-item-title-icon,
    [class*="mobile-menu-content"] .e-n-accordion-item-title-icon {
        position: relative;
        width: 18px;
        height: 18px;
    }

    .e-n-mobile-menu-content .e-n-accordion-item-title-icon svg,
    [class*="mobile-menu-content"] .e-n-accordion-item-title-icon svg,
    .e-n-mobile-menu-content .e-n-accordion-item-title-icon i,
    [class*="mobile-menu-content"] .e-n-accordion-item-title-icon i {
        display: none !important;
    }

    .e-n-mobile-menu-content .e-n-accordion-item-title-icon::after,
    [class*="mobile-menu-content"] .e-n-accordion-item-title-icon::after {
        content: "+";
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        font-weight: 300;
        line-height: 1;
        color: #16110f;
    }

    .e-n-mobile-menu-content details[open] .e-n-accordion-item-title-icon::after,
    [class*="mobile-menu-content"] details[open] .e-n-accordion-item-title-icon::after,
    .e-n-mobile-menu-content [aria-expanded="true"] .e-n-accordion-item-title-icon::after {
        content: "\2013";
    }
}

@media (max-width: 991px) {
    /* El botón de cookies quedaba DETRÁS de la barra inferior (z-index 9990) y de
       la banda de aviso. Se sube por encima de la barra y se sitúa justo sobre
       ella, donde no tapa contenido ni compite con los accesos de compra. */
    [class*="cookie"][class*="icon"],
    [class*="cookie-btn"],
    [class*="cookies-toggle"],
    [class*="cookie_float"],
    [id*="cookie"][class*="float"],
    #cookie-icon {
        z-index: 9995 !important;
        bottom: 72px !important;
    }

    /* El selector de orden se salía de la pantalla: se acota a su mitad de la
       barra y recorta el texto en vez de desbordar. */
    .itb-barra-listado__orden {
        min-width: 0;
        overflow: hidden;
    }

    .itb-barra-listado__orden select,
    .itb-barra-listado__orden .dropdown,
    .itb-barra-listado__orden [class*="sort"] {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .itb-barra-listado__orden > * {
        max-width: 100%;
        min-width: 0;
    }

    /* Nada dentro de la barra puede empujar hacia fuera. */
    .itb-barra-listado { max-width: 100%; overflow: hidden; }
    .itb-barra-listado__mitad { min-width: 0; }
}

/* La cesta de la barra inferior aparecía más tarde que el resto porque su icono
   depende de datos que llegan después. Se reserva su hueco desde el principio
   para que la barra no baile al completarse. */
.itb-barra__item { min-width: 0; }
.itb-barra__item svg { flex: 0 0 auto; }

/* Los DOS selectores de cantidad con el mismo aspecto.
   En la rejilla conviven el del tema (productos sin variantes, 3 cards) y el
   propio (los 21 restantes). El del tema venía sin borde, así que la primera
   card se veía distinta a sus vecinas. Medido: borde 0 contra 1px sólido. */

.elementor-863 .stsb_qty_wrap {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #d9d5cf;
    border-radius: 0;
    overflow: hidden;
}

.elementor-863 .stsb_qty_wrap button {
    background: #fff;
    border: 0;
    border-radius: 0;
    color: #16110f;
    cursor: pointer;
}

.elementor-863 .stsb_qty_wrap button:hover {
    background: #16110f;
    color: #fff;
}

.elementor-863 .stsb_qty_wrap input {
    background: #fff;
    border: 0;
    border-left: 1px solid #d9d5cf;
    border-right: 1px solid #d9d5cf;
    border-radius: 0;
    text-align: center;
    color: #16110f;
}

/* ===========================================================================
   SIN TEXTO JUSTIFICADO EN TODA LA WEB
   ===========================================================================
   Medidos 13 elementos justificados solo en una ficha. Sin partición de palabras
   —que el navegador no aplica en español por defecto— justificar abre ríos de
   espacio entre palabras, y con el word-spacing de 5px de la tienda el efecto se
   multiplica. Alineado a la izquierda siempre.
   --------------------------------------------------------------------------- */

p, li, div, span, td, dd, article, section,
.stsb_read_more_box, .stsb_pro_summary,
[class*="e-n-tabs-content"], [class*="description"] {
    text-align: left;
}

[style*="text-align: justify"],
[style*="text-align:justify"] {
    text-align: left !important;
}

/* Se respeta el centrado allí donde es una decisión de diseño. */
.itb-ventaja, .itb-ventaja p,
.itb-faq-cta, .itb-faq-cta p, .itb-faq-cta h2,
.itb-aviso, .itb-aviso__texto,
.itb-barra__item, .itb-barra-listado__mitad,
.itb-buscador, .itb-buscador__pista,
[class*="text-center"], .text-center {
    text-align: center;
}

/* ===========================================================================
   SLIDER DE CATEGORÍAS · tipografía fluida y aire en la franja
   ===========================================================================
   17px fijos: en una card de 436px se quedan pequeños y en una de 282 aprietan.
   El tamaño pasa a depender del ancho de la card, y el nombre deja de ir pegado
   al borde.
   --------------------------------------------------------------------------- */

.stsb-swiper-container .elementor-2165 .elementor-element-85568f9,
.stsb-swiper-container .elementor-2165 .e-con.e-child[data-element_type="container"] {
    padding: clamp(.75rem, 3.2%, 1.15rem) clamp(1rem, 5%, 1.5rem) !important;
    gap: .7rem;
}

.stsb-swiper-container .elementor-2165 .stsb_mini_category_name {
    font-size: clamp(.88rem, 4.4cqw, 1.15rem) !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stsb-swiper-container .elementor-2165 {
    container-type: inline-size;
}

/* El botón «Ver», SIEMPRE visible y proporcionado a la card. */
.stsb-swiper-container .elementor-2165 .stsb_cm_action_button_view {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    flex: 0 0 auto;
    font-size: clamp(.72rem, 3.6cqw, .95rem) !important;
    padding: 0 clamp(.7rem, 3.5cqw, 1.1rem) !important;
    min-height: clamp(1.9rem, 9cqw, 2.3rem);
}

/* ===========================================================================
   DESCRIPCIÓN DE LA FICHA EN MÓVIL
   =========================================================================== */

@media (max-width: 767px) {
    [class*="e-n-tabs-content"],
    [class*="e-n-tabs-content"] p,
    [class*="e-n-tabs-content"] li,
    .stsb_read_more_box,
    .stsb_read_more_box p {
        font-size: .92rem !important;
        line-height: 1.65 !important;
    }

    [class*="e-n-tabs-content"] h2,
    .stsb_read_more_box h2 { font-size: 1.15rem !important; }

    [class*="e-n-tabs-content"] h3,
    .stsb_read_more_box h3 { font-size: 1rem !important; }

    /* Los títulos de las pestañas también, o desbordan la fila. */
    [class*="e-n-tab-title"] { font-size: .82rem !important; }
}

/* Galería con MÁS DE UNA imagen: se indica que hay más.
   Con dos o más fotos, en móvil pasa a desplazamiento horizontal con una
   señal visual a los lados; en escritorio siguen viéndose todas en rejilla. */

@media (max-width: 767px) {
    [data-widget_type^="st-product-gallery"] .stsb_grid_wrapper:has(> .stsb_grid_item + .stsb_grid_item) {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 8px !important;
        /* Deja asomar la siguiente foto: la mejor pista de que hay más. */
        padding-right: 18%;
        scrollbar-width: none;
    }

    [data-widget_type^="st-product-gallery"] .stsb_grid_wrapper::-webkit-scrollbar { display: none; }

    [data-widget_type^="st-product-gallery"] .stsb_grid_wrapper:has(> .stsb_grid_item + .stsb_grid_item) > .stsb_grid_item {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }
}

/* Flechas indicadoras cuando hay más de una imagen (las pinta el JS). */
.itb-gal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: .6rem;
}

.itb-gal-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #fff;
    color: #16110f;
    border: 1px solid #cfc9c2;
    border-radius: 0;
    cursor: pointer;
}

.itb-gal-nav button:hover { background: #16110f; color: #fff; border-color: #16110f; }
.itb-gal-nav button:focus-visible { outline: 2px solid #16110f; outline-offset: 2px; }
.itb-gal-nav svg { width: 15px; height: 15px; }
.itb-gal-nav__cuenta { font-size: .78rem; color: #6b635c; min-width: 3.2rem; text-align: center; }

/* ===========================================================================
   VENTAJAS BAJO EL VÍDEO EN MÓVIL — UNA POR LÍNEA (5 filas)
   ===========================================================================
   A dos columnas los textos de distinta longitud descuadraban las alturas y la
   última garantía quedaba sola y descolgada. En una sola columna, con el icono
   a la izquierda, cada garantía se lee de un vistazo y la franja tiene ritmo.
   Va al final del fichero a propósito: gana por cascada a los bloques móviles
   anteriores sin tener que desactivarlos uno a uno. */

@media (max-width: 767px) {
    .itb-ventajas {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .itb-ventaja {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        gap: .8rem !important;
        padding: .8rem 1.1rem !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
        border-bottom: 1px solid #eee8e1 !important;
    }

    .itb-ventaja:last-child { border-bottom: 0 !important; }

    .itb-ventaja svg {
        width: 23px !important;
        height: 23px !important;
        flex: 0 0 23px;
    }

    /* Título y detalle en la misma línea mientras quepan. */
    .itb-ventaja p {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        flex-wrap: wrap;
        gap: .3rem .45rem !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .itb-ventaja strong { font-size: .79rem !important; }
    .itb-ventaja span, .itb-ventaja a { font-size: .74rem !important; }
}

/* ===========================================================================
   AVISO DE COOKIES (lgcookieslaw) — con la identidad de la tienda
   ===========================================================================
   Es lo PRIMERO que ve quien entra, y llegaba con dos botones verde lima
   (#8BC954) que no aparecen en ningún otro punto de la web: la primera
   impresión era la de un plugin sin vestir. Se pasa al negro y el crema de la
   casa, con esquina viva como el resto de botones. No se toca ni el texto ni
   la lógica de consentimiento: solo el vestido. */

.lgcookieslaw-banner {
    background: #16110f !important;
    color: #f4efe9 !important;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.lgcookieslaw-banner p,
.lgcookieslaw-banner span,
.lgcookieslaw-banner div { color: #f4efe9 !important; }

.lgcookieslaw-banner a:not(.lgcookieslaw-button) {
    color: #fff !important;
    text-underline-offset: 3px;
}

.lgcookieslaw-button-container {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.lgcookieslaw-button {
    background: transparent !important;
    color: #f4efe9 !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: .82rem !important;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: .78rem 1.4rem !important;
    flex: 1 1 auto;
    transition: background .18s ease, color .18s ease;
}

/* Aceptar es la acción principal: se destaca en sólido, la otra queda en filete. */
.lgcookieslaw-accept-button {
    background: #f4efe9 !important;
    color: #16110f !important;
    border-color: #f4efe9 !important;
    font-weight: 600;
}

.lgcookieslaw-accept-button:hover { background: #fff !important; }
.lgcookieslaw-reject-button:hover { background: rgba(255, 255, 255, .12) !important; }

/* El botón flotante que reabre el panel: pequeño e integrado, y POR ENCIMA de
   la barra inferior del móvil (antes quedaba detrás y no se podía pulsar). */
.lgcookieslaw-cookies-box,
#lgcookieslaw_cookies_box,
.lgcookieslaw-floating-button {
    background: #16110f !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    border-radius: 0 !important;
    z-index: 2147483000 !important;
}

@media (max-width: 991px) {
    .lgcookieslaw-banner { padding: 1rem .9rem !important; }
    .lgcookieslaw-banner p { font-size: .82rem !important; line-height: 1.55 !important; }
    .lgcookieslaw-button { font-size: .76rem !important; padding: .72rem 1rem !important; }

    /* La barra inferior fija mide 62px: el botón de cookies se sube por encima. */
    .lgcookieslaw-cookies-box,
    #lgcookieslaw_cookies_box,
    .lgcookieslaw-floating-button { bottom: 74px !important; }
}

/* Los dos últimos textos justificados de la web (un widget de Elementor y un
   <b> suelto en la ficha). El selector global no los alcanzaba porque el
   justify viene de una regla del tema con mayor especificidad. */
/* 🔴 NO usar `text-align: inherit` aquí. Se probó el 18/08 y disparó los
   justificados de 2 a 84: heredar del padre PROPAGA el justify de los
   contenedores en vez de anularlo. Lo que sirve es imponer `left` sobre
   quien lo trae, contenedor incluido. */
.elementor-widget-container,
.elementor-widget-container > div,
.elementor-widget-container p,
.elementor-widget-container li,
.elementor-widget-container span,
.elementor-widget-container b,
.elementor-widget-container strong { text-align: left !important; }

/* Lo que SÍ va centrado por diseño y no debe caer a la izquierda. */
.itb-ventaja,
.itb-faq-cta,
.itb-aviso,
.itb-aviso__texto,
.itb-barra__item,
.itb-buscador,
.itb-gal-nav,
.itb-gal-nav__cuenta,
.lgcookieslaw-button,
.elementor-widget-container .itb-aviso__texto { text-align: center !important; }

[style*="text-align:justify"],
[style*="text-align: justify"] { text-align: left !important; }

/* ===========================================================================
   FICHA EN MÓVIL — remates medidos el 18/08 sobre un iPhone de 390px
   =========================================================================== */

@media (max-width: 767px) {
    /* El selector de cantidad medía 39px y el botón 46: la pareja quedaba
       descuadrada. Se igualan por la altura del botón, que es la que manda. */
    .itb-qty,
    .itb-cantidad,
    .itb-qty input,
    .itb-cantidad input,
    .itb-qty button,
    .itb-cantidad button {
        height: 46px !important;
        min-height: 46px !important;
    }

    /* Las pestañas se salían de la pantalla y «Ingredientes y Seguridad»
       aparecía cortada a media palabra. Pasan a desfile horizontal con su
       propio scroll: la página no se mueve de lado y se llega a todas. */
    .stsb_tabs_wrapper .stsb_tabs_nav,
    .elementor-widget-st-product-tabs .e-n-tabs-heading,
    [data-widget_type^="st-product-tabs"] .e-n-tabs-heading {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        gap: .25rem;
    }

    .stsb_tabs_wrapper .stsb_tabs_nav::-webkit-scrollbar,
    [data-widget_type^="st-product-tabs"] .e-n-tabs-heading::-webkit-scrollbar { display: none; }

    .stsb_tabs_wrapper .stsb_tabs_nav > *,
    [data-widget_type^="st-product-tabs"] .e-n-tabs-heading > * {
        flex: 0 0 auto !important;
        white-space: nowrap;
        font-size: .8rem !important;
    }
}

/* Los últimos justificados vivos: la caja de descripción del tema
   (`.stsb_read_more_box`) y las listas y titulares que van DENTRO de ella —
   el justify llega del propio contenido guardado en la ficha, así que hay que
   alcanzarlo por descendencia. En columna estrecha el justificado abre calles
   blancas entre palabras y se lee peor; toda la web va en bandera izquierda. */
.stsb_read_more_box,
.stsb_read_more_box *,
.product-description,
.product-description * { text-align: left !important; }

/* ===========================================================================
   MENÚ LATERAL DEL MÓVIL — logo arriba y «+» en los desplegables
   =========================================================================== */

.itb-menu-cab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.15rem 1rem 1rem;
    border-bottom: 1px solid #eee8e1;
    margin-bottom: .4rem;
}

.itb-menu-cab a { display: inline-flex; align-items: center; }
.itb-menu-cab svg,
.itb-menu-cab img { max-width: 130px; height: auto; }

/* El «+» va al final del título, alineado a la derecha y con área pulsable
   suficiente (el icono original del tema era una flecha de 8px). */
.e-n-accordion-item[data-itb-menu] summary,
[data-itb-menu] .e-n-accordion-item-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.itb-mas {
    margin-left: auto;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1;
    color: #16110f;
    opacity: .75;
}

[data-itb-menu] .e-n-accordion-item {
    border-bottom: 1px solid #f0ebe5;
}

[data-itb-menu] .e-n-accordion-item-title {
    padding-block: .85rem !important;
}

/* ===========================================================================
   AVISO DE COOKIES — la clase del banner lleva un HASH
   ===========================================================================
   Medido el 18/08: el div es `lgcookieslaw-banner-<hash>`, NO
   `lgcookieslaw-banner`, y el módulo pinta el verde desde una regla
   `.lgcookieslaw-banner-<hash> .lgcookieslaw-button`, con más especificidad que
   la mía. Por eso el primer intento no cambió nada. Se ataca por subcadena y
   con `html body` delante para ganar la especificidad sin depender del orden. */

html body [class*="lgcookieslaw-banner"] {
    background: #16110f !important;
    color: #f4efe9 !important;
    border-top: 1px solid rgba(255, 255, 255, .14) !important;
}

html body [class*="lgcookieslaw-banner"] p,
html body [class*="lgcookieslaw-banner"] span,
html body [class*="lgcookieslaw-banner"] div { color: #f4efe9 !important; }

html body [class*="lgcookieslaw-banner"] a:not([class*="button"]) { color: #fff !important; }

html body [class*="lgcookieslaw-banner"] .lgcookieslaw-button,
html body .lgcookieslaw-button {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #f4efe9 !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html body [class*="lgcookieslaw-banner"] .lgcookieslaw-accept-button,
html body .lgcookieslaw-accept-button {
    background: #f4efe9 !important;
    background-color: #f4efe9 !important;
    color: #16110f !important;
    border-color: #f4efe9 !important;
}

/* Entrada de menú SIN submenú: sin marca de despliegue y sin el cursor de
   acordeón, para que se lea como lo que es, un enlace directo. */
[data-itb-menu] .e-n-accordion-item[data-itb-hoja] .e-n-accordion-item-title-icon { display: none !important; }
[data-itb-menu] .e-n-accordion-item[data-itb-hoja] summary { cursor: pointer; }

/* La cabecera manda al principio aunque el contenedor ordene por flex. */
.itb-menu-cab { order: -1 !important; }

.itb-menu-marca {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: .18em;
    color: #16110f !important;
    text-decoration: none;
}

/* ===========================================================================
   LOGO DEL MENÚ LATERAL — por CSS, no por DOM
   ===========================================================================
   Tres intentos por JS fallaron y merece la pena dejar escrito por qué:
     1. clonar el <svg> del header → el clon mide 0px (es un <use> de sprite),
     2. insertarlo antes del acordeón → se pintaba DEBAJO del menú,
     3. insertarlo dentro con `order: -1` → el contenedor tampoco lo respeta.
   Un pseudo-elemento del propio acordeón no depende de nada de eso: se pinta
   siempre el primero, dentro de la caja, y no hay clon que pueda salir vacío. */

[data-itb-menu]::before {
    content: 'HARPO';
    display: block;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .2em;
    color: #16110f;
    padding: 1.1rem .5rem 1rem;
    margin-bottom: .3rem;
    border-bottom: 1px solid #eee8e1;
}

/* La cabecera que montaba el JS deja de pintarse: la sustituye el pseudo. */
.itb-menu-cab { display: none !important; }

/* El buscador a pantalla completa: el campo va CENTRADO, que es lo pedido.
   Medido: el input salía pegado al borde superior (top 0) porque la capa no
   repartía el espacio vertical. */
.itb-buscador {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center !important;
}

.itb-buscador__caja,
.itb-buscador form,
.itb-buscador input[type="text"],
.itb-buscador input[type="search"] {
    width: min(680px, 88vw);
    max-width: 88vw;
}

@media (max-width: 767px) {
    .itb-buscador { justify-content: flex-start !important; padding-top: 18vh; }
}

/* ===========================================================================
   BUSCADOR: la X de cerrar por debajo de la franja de avisos
   ===========================================================================
   Medido a 1440px: la franja negra ocupa hasta y=38 y va a `z-index: 10300`,
   mientras la capa del buscador vive en 10100 — es decir, la franja se pinta
   ENCIMA. Con la X en `top: 18px` quedaba medio tapada y solo se podía pulsar
   su mitad inferior. Se baja lo justo para librarla con aire, y solo cuando la
   franja está en pantalla: si el visitante la ha cerrado, la X vuelve a su
   sitio en vez de quedarse flotando sin motivo. */

body.itb-con-aviso .itb-buscador__cerrar { top: 52px !important; }

@media (max-width: 991px) {
    /* En móvil la franja mide 30px, no 38: basta con menos desplazamiento. */
    body.itb-con-aviso .itb-buscador__cerrar { top: 42px !important; }
}

/* ===========================================================================
   BUSCADOR EN ESCRITORIO — línea más larga y desplegable domado
   ===========================================================================
   Medido a 1440px: el formulario ocupaba 680px teniendo 1440 de ancho, y el
   desplegable de Jolisearch salía en x=229 con 722px de ancho mientras el campo
   empezaba en x=380 — ni alineado ni del mismo ancho. Además medía 728px de
   alto bajo un campo centrado a media pantalla: no cabía, se salía por abajo y
   por eso al pasar el ratón por encima la página hacía ese scroll raro.

   Tres decisiones: el bloque sube (deja de estar centrado en vertical, que es
   lo que dejaba el desplegable sin sitio), la línea se ensancha a 1040px, y el
   desplegable se alinea con ella y scrollea DENTRO de sí mismo. */

@media (min-width: 768px) {
    .itb-buscador {
        justify-content: flex-start !important;
        padding-top: 15vh;
    }

    .itb-buscador__caja,
    .itb-buscador form,
    .itb-buscador input[type="text"],
    .itb-buscador input[type="search"] {
        width: min(1040px, 82vw);
        max-width: 82vw;
    }

    .itb-buscador form { font-size: 1.05rem; }
    .itb-buscador input { font-size: 1.15rem !important; }
}

/* --- El desplegable de Jolisearch --- */
.jolisearch-dropdown {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(1040px, 82vw) !important;
    max-width: 82vw !important;
    /* El scroll ocurre AQUÍ dentro, no en la página: es lo que quita el
       desplazamiento raro al pasar el ratón por encima. */
    max-height: min(56vh, 520px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: #fff !important;
    border: 1px solid #16110f !important;
    border-radius: 0 !important;
    box-shadow: 0 18px 40px rgba(22, 17, 15, .13) !important;
    scrollbar-width: thin;
}

.jolisearch-dropdown::-webkit-scrollbar { width: 8px; }
.jolisearch-dropdown::-webkit-scrollbar-thumb { background: #d6cec5; }
.jolisearch-dropdown::-webkit-scrollbar-track { background: #f7f3ee; }

.jolisearch-container { padding: 0 !important; margin: 0 !important; list-style: none; }

/* Cada resultado: fila legible, con la foto sobre el crema de la casa. */
.jolisearch-dropdown li {
    border-bottom: 1px solid #f0ebe5;
    padding: .55rem .85rem !important;
    margin: 0 !important;
}

.jolisearch-dropdown li:last-child { border-bottom: 0; }
.jolisearch-dropdown li:hover,
.jolisearch-dropdown li.selected { background: #faf7f4; }

.jolisearch-dropdown li img {
    background: #fcf8f5;
    mix-blend-mode: multiply;
    border: 1px solid #f0ebe5;
    border-radius: 0 !important;
}

.jolisearch-dropdown a { color: #16110f !important; text-decoration: none; }
.jolisearch-dropdown .jolisearch-price,
.jolisearch-dropdown [class*="price"] { font-weight: 700; color: #16110f !important; }

/* Encabezados de sección (Productos, Categorías, Marcas). */
.jolisearch-dropdown .jolisearch-header,
.jolisearch-dropdown [class*="title"]:not(a) {
    font-size: .68rem !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8a8078 !important;
    background: #faf7f4;
    padding: .5rem .85rem !important;
    border-bottom: 1px solid #f0ebe5;
}

/* ===========================================================================
   LISTA DE DESEOS DESACTIVADA EN TODA LA WEB (decisión del cliente, 18/08)
   ===========================================================================
   Se apaga por CSS y no desinstalando el módulo: es reversible en un minuto
   —basta borrar este bloque— y no toca la configuración de la tienda ni los
   datos ya guardados de quien tuviera listas creadas. Si la decisión se
   confirma, el paso siguiente es desactivar el módulo para ahorrar también su
   JS y su CSS. */

.wishlist-button-add,
.wishlist-button-product,
[class*="wishlist-button"],
.js-wishlist-button,
[data-wishlist],
.wishlist-list,
.wishlist-add-to-new,
[class*="stsb_wishlist"],
a[href*="wishlist"],
li[class*="wishlist"] { display: none !important; }

/* En móvil, la garantía de devolución muestra solo el titular: con «desde la
   recepción» se iba a dos líneas y descuadraba la franja. En escritorio, donde
   hay ancho de sobra, el detalle se mantiene. */
@media (max-width: 767px) {
    .itb-ventaja--corta span { display: none !important; }
}

/* 🔴 `display: flex !important` en `.itb-buscador` ANULA el atributo `hidden`.
   El cierre hace `capa.hidden = true`, que oculta vía `display: none`; con un
   `!important` por encima, la capa se quedaba abierta y la X no cerraba nada
   (medido en móvil: el clic llegaba al botón, `elementFromPoint` devolvía la
   propia X, y aun así seguía en pantalla). Esta regla debe ir DESPUÉS de
   cualquier `display` de la capa. */
.itb-buscador[hidden] { display: none !important; }

/* Sin sombra en la caja de resultados: el borde fino ya la separa del fondo. */
.jolisearch-dropdown { box-shadow: none !important; }

/* ===========================================================================
   SIN RECUADRO AL PULSAR (menú y barra inferior)
   ===========================================================================
   El borde que aparecía al seleccionar es el foco del navegador. NO se quita
   del todo: se quita cuando el foco viene de un toque o de un clic —que es lo
   que molesta— y se conserva para quien navega con el teclado, que sin él no
   sabría dónde está. Es lo que distingue `:focus` de `:focus-visible`. */

.itb-barra,
.itb-barra *,
[data-itb-menu],
[data-itb-menu] *,
.stsb_bar_item,
.stsb_bar_item * {
    -webkit-tap-highlight-color: transparent;
}

.itb-barra__item:focus:not(:focus-visible),
.itb-barra a:focus:not(:focus-visible),
.itb-barra button:focus:not(:focus-visible),
[data-itb-menu] a:focus:not(:focus-visible),
[data-itb-menu] summary:focus:not(:focus-visible),
[data-itb-menu] .e-n-accordion-item-title:focus:not(:focus-visible),
.stsb_bar_item:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* `<summary>` trae marco propio en varios navegadores. */
[data-itb-menu] summary { outline: none; }
[data-itb-menu] summary::-moz-focus-inner { border: 0; }

/* ===========================================================================
   MEGAMENÚ EN ESCRITORIO — reconstruido
   ===========================================================================
   Medido a 1440px: el contenido vivía en un `.e-con-inner` de 826px empezando
   en x=307, con las columnas apelotonadas. Resultado: «Maquillaje» y «FX» se
   solapaban («MaquillajFX»), «Pincelería» quedaba cortada bajo la imagen
   promocional y cada enlace se partía en dos líneas. Se lleva al ancho del
   sitio (1140, el mismo eje que el resto) y se reparte en columnas iguales. */

@media (min-width: 992px) {
    .e-n-tabs-content > .e-con,
    .e-n-tabs-content .e-con-inner {
        width: 100% !important;
        max-width: 1240px !important;
        margin-inline: auto !important;
        padding-inline: 2rem !important;
    }

    /* Las columnas reparten a partes iguales y la imagen tiene su sitio propio,
       en vez de montarse sobre la última columna de enlaces. */
    .e-n-tabs-content .e-con-inner {
        display: flex !important;
        align-items: flex-start !important;
        gap: 2rem !important;
    }

    .e-n-tabs-content .e-con-inner > .e-con,
    .e-n-tabs-content .e-con-inner > .e-child {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        padding-inline: 0 !important;
    }

    /* La columna que solo lleva la imagen no compite por el espacio del texto. */
    .e-n-tabs-content .e-con-inner > .e-con:has(> .elementor-widget-image),
    .e-n-tabs-content .e-con-inner > .e-child:has(.elementor-widget-image) {
        flex: 0 0 320px !important;
    }

    .e-n-tabs-content .e-con-inner img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* Títulos de columna: con aire debajo y sin posibilidad de solaparse. */
    .e-n-tabs-content h2,
    .e-n-tabs-content h3,
    .e-n-tabs-content .elementor-heading-title {
        font-size: 1rem !important;
        line-height: 1.3 !important;
        letter-spacing: .06em;
        margin: 0 0 .85rem !important;
        padding-bottom: .55rem;
        border-bottom: 1px solid #eee8e1;
        white-space: normal !important;
        overflow: visible !important;
    }

    .e-n-tabs-content a {
        font-size: .87rem !important;
        line-height: 1.5 !important;
        padding-block: .28rem !important;
        display: block;
        color: #2a2320 !important;
    }

    .e-n-tabs-content a:hover { color: #16110f !important; text-decoration: underline; text-underline-offset: 3px; }

    /* «Más» era gris casi ilegible: es un título de columna como los demás. */
    .e-n-tabs-content .elementor-heading-title { color: #16110f !important; }

    .e-n-tabs-content {
        border-top: 1px solid #eee8e1;
        box-shadow: 0 16px 34px rgba(22, 17, 15, .10);
        padding-block: 1.8rem 2.2rem !important;
        background: #fff !important;
    }
}

/* ===========================================================================
   SELECTOR DE CANTIDAD — una sola estética en toda la web
   ===========================================================================
   Aparece en la card, en la vista rápida, en la ficha y en el carrito, y cada
   sitio lo pintaba distinto (bordes que faltaban, alturas de 39 contra 46,
   flechas nativas del navegador en unos y botones propios en otros). Aquí se
   fija UNA sola forma para todos. */

.itb-qty,
.itb-cantidad,
.product-quantity .qty,
.bootstrap-touchspin {
    display: inline-flex !important;
    align-items: stretch !important;
    height: 46px !important;
    border: 1px solid #16110f !important;
    border-radius: 0 !important;
    overflow: hidden;
    background: #fff !important;
    box-shadow: none !important;
}

.itb-qty button,
.itb-cantidad button,
.bootstrap-touchspin button,
.btn-touchspin {
    width: 38px !important;
    min-width: 38px !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #16110f !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background .15s ease;
}

.itb-qty button:hover,
.itb-cantidad button:hover,
.bootstrap-touchspin button:hover { background: #f4efe9 !important; }

.itb-qty input,
.itb-cantidad input,
.product-quantity input.js-cart-line-product-quantity,
.bootstrap-touchspin input {
    width: 46px !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-left: 1px solid #efe9e2 !important;
    border-right: 1px solid #efe9e2 !important;
    border-radius: 0 !important;
    text-align: center !important;
    font-size: .95rem !important;
    font-weight: 600;
    color: #16110f !important;
    background: #fff !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}

/* Las flechas nativas duplicaban los botones propios. */
.itb-qty input::-webkit-outer-spin-button,
.itb-qty input::-webkit-inner-spin-button,
.itb-cantidad input::-webkit-outer-spin-button,
.itb-cantidad input::-webkit-inner-spin-button,
.bootstrap-touchspin input::-webkit-outer-spin-button,
.bootstrap-touchspin input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* En móvil, mismo alto que el botón de compra y algo más de dedo. */
@media (max-width: 767px) {
    .itb-qty,
    .itb-cantidad,
    .bootstrap-touchspin { height: 46px !important; }

    .itb-qty button,
    .itb-cantidad button,
    .bootstrap-touchspin button { width: 42px !important; min-width: 42px !important; }
}

/* ===========================================================================
   PANELES LATERALES DEL MÓVIL (cesta, menú) — por encima de la barra inferior
   ===========================================================================
   La barra fija mide 55px y se pinta con z-index 9990, por encima de los
   paneles (z 1001). El botón de tramitar el pedido quedaba cortado por ella.
   El panel reserva ese alto al final para que su último elemento quede libre. */

@media (max-width: 991px) {
    [data-itb-panel] {
        padding-bottom: 62px !important;
        box-sizing: border-box;
    }

    /* Si el panel tiene su propio scroll, el hueco va DENTRO del área que
       scrollea; si no, el último bloque nunca llega a subir. */
    [data-itb-panel] > .elementor-section-wrap,
    [data-itb-panel] > .e-con,
    [data-itb-panel] .elementor-widget-wrap { padding-bottom: 0 !important; }
}

/* ===========================================================================
   CESTA — botón de tramitar y maquetación de la página
   =========================================================================== */

.cart-detailed-actions .btn,
a[href*="pedido"].btn,
button[class*="checkout"],
.checkout .btn-primary,
#js-cart .btn-primary {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 52px;
    background: #16110f !important;
    color: #fff !important;
    border: 1px solid #16110f !important;
    border-radius: 0 !important;
    font-size: .86rem !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    box-shadow: none !important;
    white-space: nowrap;
}

.cart-detailed-actions .btn:hover,
#js-cart .btn-primary:hover { background: #000 !important; }

/* Un botón deshabilitado tiene que PARECERLO: en gris llegaba igual de negro
   que el activo y el cliente lo pulsaba sin efecto. */
.cart-detailed-actions .btn.disabled,
.cart-detailed-actions .btn[disabled],
#js-cart .btn-primary[disabled] {
    background: #efeae4 !important;
    color: #a39a92 !important;
    border-color: #e2dbd3 !important;
    cursor: not-allowed;
    opacity: 1 !important;
}

.cart-grid-body .card,
.cart-summary,
.cart-container {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 1px solid #e8e1d9 !important;
}

.cart-item { padding: .9rem 0 !important; border-bottom: 1px solid #f2ece5; }
.cart-item:last-child { border-bottom: 0; }

.cart-summary-line { display: flex; justify-content: space-between; gap: 1rem; }
.cart-total .value, .cart-summary .value { font-weight: 700; }

@media (max-width: 767px) {
    /* La página del carrito también queda bajo la barra fija. */
    body:has(#js-cart, .cart-grid) { padding-bottom: 70px; }
    .cart-grid-body, .cart-grid-right { width: 100% !important; }
}

/* El `padding-bottom` no bastó: el contenido interno del panel se coloca por su
   cuenta y el botón seguía cayendo bajo la barra. Se ACORTA el panel entero —
   que es lo que se pedía: que la cesta suba ese trozo— fijándole el borde
   inferior por encima de la barra. */
@media (max-width: 991px) {
    [data-itb-panel] {
        top: 0 !important;
        bottom: 55px !important;
        height: auto !important;
        max-height: none !important;
        padding-bottom: 0 !important;
        overflow-y: auto !important;
    }
}

/* ===========================================================================
   PASARELA DE PAGO — rehecha: minimalista, sin sombras, premium
   ===========================================================================
   Es la pantalla donde se cierra la compra y llegaba peor que ninguna otra:
   el menu del header se pintaba cortado y subrayado a media altura, los iconos
   de lupa/cuenta/cesta caian apilados en la esquina izquierda, los campos eran
   cajas enormes y el resumen tenia la foto mas grande que el propio total.

   Criterio: en el checkout se quita TODO lo que no lleve a pagar. Es el patron
   de las tiendas que convierten —header reducido a la marca, sin menu, sin
   distracciones— y ademas resuelve de raiz el header roto: no se arregla un
   menu que aqui no deberia estar. */

body#checkout .itb-barra,
body#checkout [class*="whatsapp"],
body#checkout .itb-anclaje-filtros { display: none !important; }

/* --- Header: solo la marca --- */
body#checkout .e-n-tabs,
body#checkout .e-n-tabs-heading,
body#checkout .e-n-tabs-content,
body#checkout .stsb_bar_item,
body#checkout .stsb_icon_wrapper,
body#checkout .stsb_header_label_item { display: none !important; }

body#checkout header,
body#checkout .stsb_header {
    border-bottom: 1px solid #eee8e1 !important;
    box-shadow: none !important;
    padding: 1.1rem 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

/* --- Estructura --- */
body#checkout #content-wrapper,
body#checkout .container {
    max-width: 1140px;
    margin-inline: auto;
}

body#checkout #checkout-summary,
body#checkout .card {
    background: #fff !important;
    border: 1px solid #e8e1d9 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body#checkout .checkout-step {
    border: 0 !important;
    border-bottom: 1px solid #eee8e1 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 1.6rem 0 !important;
    margin: 0 !important;
}

body#checkout .checkout-step:last-of-type { border-bottom: 0 !important; }

/* --- Cabecera de paso: el numero, elegante y sin circulo gris --- */
body#checkout .step-title {
    display: flex !important;
    align-items: center;
    gap: .85rem;
    font-size: 1.02rem !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 600 !important;
    color: #16110f !important;
    margin: 0 0 1.2rem !important;
    padding: 0 !important;
}

body#checkout .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    background: #16110f !important;
    color: #fff !important;
    border-radius: 0 !important;
    font-size: .85rem;
    font-weight: 600;
}

body#checkout .checkout-step:not(.-current) .step-title { color: #9a9089 !important; }
body#checkout .checkout-step:not(.-current) .step-number { background: #d8d1c9 !important; }

/* --- Campos: linea fina, sin sombra, con foco claro --- */
body#checkout .form-control,
body#checkout input[type="text"],
body#checkout input[type="email"],
body#checkout input[type="tel"],
body#checkout input[type="password"],
body#checkout select,
body#checkout textarea {
    width: 100% !important;
    max-width: 520px;
    height: 46px;
    padding: .7rem .9rem !important;
    border: 1px solid #d8d1c9 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    font-size: .92rem !important;
    color: #16110f !important;
    transition: border-color .15s ease;
}

body#checkout textarea { height: auto; min-height: 96px; }

body#checkout .form-control:focus,
body#checkout input:focus,
body#checkout select:focus {
    border-color: #16110f !important;
    outline: none !important;
    box-shadow: none !important;
}

body#checkout label,
body#checkout .form-control-label {
    font-size: .78rem !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b635c !important;
    font-weight: 600 !important;
    margin: 0 0 .35rem !important;
    padding: 0 !important;
}

body#checkout .form-group { margin-bottom: 1.05rem !important; }

/* --- Estados de validacion (los pinta itbValidarCheckout) --- */
body#checkout .form-control.itb-error,
body#checkout input.itb-error,
body#checkout select.itb-error {
    border-color: #b3261e !important;
    background: #fffafa !important;
}

body#checkout .itb-error-msg {
    display: block;
    margin-top: .3rem;
    font-size: .76rem;
    color: #b3261e;
    letter-spacing: .01em;
    text-transform: none;
}

/* --- Botones --- */
body#checkout .btn-primary,
body#checkout button[type="submit"] {
    background: #16110f !important;
    color: #fff !important;
    border: 1px solid #16110f !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 50px;
    padding: .8rem 2rem !important;
    font-size: .84rem !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
}

body#checkout .btn-primary:hover { background: #000 !important; }

body#checkout .btn-secondary,
body#checkout .btn-outline-secondary {
    background: #fff !important;
    color: #16110f !important;
    border: 1px solid #16110f !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* --- Invitado / iniciar sesion: pestanas, no enlaces sueltos --- */
body#checkout .nav-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #eee8e1 !important;
    margin-bottom: 1.4rem;
}

body#checkout .nav-tabs .nav-link {
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: .7rem 1.1rem !important;
    font-size: .84rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9a9089 !important;
    text-decoration: none !important;
}

body#checkout .nav-tabs .nav-link.active {
    color: #16110f !important;
    border-bottom-color: #16110f !important;
    font-weight: 600;
}

/* --- Resumen: la foto pequena, el total grande --- */
body#checkout #js-checkout-summary {
    position: sticky;
    top: 1.5rem;
    padding: 1.4rem !important;
}

body#checkout .media-list .media { padding: .6rem 0 !important; border-bottom: 1px solid #f2ece5; }

body#checkout #js-checkout-summary img {
    width: 62px !important;
    height: 62px !important;
    object-fit: contain;
    background: #fcf8f5;
    mix-blend-mode: multiply;
    border: 1px solid #f0ebe5;
}

body#checkout .product-name,
body#checkout .media-body a {
    font-size: .84rem !important;
    line-height: 1.35 !important;
    color: #16110f !important;
    text-decoration: none !important;
}

body#checkout .cart-summary-line {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between !important;
    gap: 1rem;
    padding: .35rem 0 !important;
    font-size: .88rem;
}

body#checkout .cart-summary-line .label { color: #6b635c !important; }
body#checkout .cart-summary-line .value { font-weight: 600; white-space: nowrap; }

body#checkout .cart-total {
    border-top: 1px solid #16110f !important;
    margin-top: .7rem !important;
    padding-top: .8rem !important;
}

body#checkout .cart-total .label,
body#checkout .cart-total .value {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #16110f !important;
    text-transform: none;
}

/* --- Codigo promocional: plegable discreto --- */
body#checkout .promo-code,
body#checkout .block-promo {
    background: #faf7f4 !important;
    border: 1px solid #eee8e1 !important;
    border-radius: 0 !important;
    padding: .9rem !important;
    margin-top: 1rem !important;
    box-shadow: none !important;
}

body#checkout .promo-code-button,
body#checkout .display-promo {
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
    font-size: .8rem !important;
    letter-spacing: .04em;
    color: #16110f !important;
    text-decoration: none !important;
    border-bottom: 1px solid #cfc9c2;
    padding-bottom: 2px;
}

body#checkout .promo-code form { display: flex; gap: .5rem; flex-wrap: wrap; }
body#checkout .promo-code input { flex: 1 1 auto; max-width: none !important; }
body#checkout .promo-code button { min-height: 46px; padding: .6rem 1.2rem !important; }
body#checkout .promo-code .alert { border-radius: 0 !important; }

/* --- Envio y pago: filas seleccionables --- */
body#checkout .delivery-option,
body#checkout .payment-option {
    display: flex !important;
    align-items: center;
    gap: .8rem;
    background: #fff !important;
    border: 1px solid #e2dbd3 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: .95rem 1.1rem !important;
    margin: 0 0 .6rem !important;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

body#checkout .delivery-option:hover,
body#checkout .payment-option:hover { border-color: #16110f !important; }

body#checkout .delivery-option:has(input:checked),
body#checkout .payment-option:has(input:checked) {
    border-color: #16110f !important;
    background: #faf7f4 !important;
}

body#checkout .delivery-option label,
body#checkout .payment-option label {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: .9rem !important;
    color: #16110f !important;
    margin: 0 !important;
    cursor: pointer;
}

/* --- Direcciones --- */
body#checkout .address-item {
    border: 1px solid #e2dbd3 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 1rem !important;
}

body#checkout .address-item.selected { border-color: #16110f !important; background: #faf7f4 !important; }

/* --- Movil --- */
@media (max-width: 767px) {
    body#checkout #js-checkout-summary { position: static; margin-top: 1.5rem; }
    body#checkout .form-control,
    body#checkout input,
    body#checkout select { max-width: none !important; }
    body#checkout .btn-primary { width: 100%; }
}

/* ===========================================================================
   BOTON «VER MI CESTA» — no puede quedar bajo la barra inferior
   ===========================================================================
   Mismo problema que el panel lateral: la barra fija de 55px se pinta encima
   del final de la pagina. Se reserva ese alto en la propia pagina del carrito
   y en el bloque de acciones, que es donde vive el boton. */

@media (max-width: 991px) {
    body#cart,
    body[id*="cart"] { padding-bottom: 70px !important; }

    .cart-detailed-actions,
    .checkout.cart-detailed-actions,
    .blockcart-modal .modal-footer { margin-bottom: 62px !important; }
}

/* ===========================================================================
   PIE — reparto de las cuatro columnas
   ===========================================================================
   La newsletter ocupaba 400px y dejaba 169px de hueco muerto antes de las tres
   listas, que se apretaban en 779px al otro lado. Ahora la newsletter toma un
   ancho fijo cómodo y las tres listas reparten el resto a partes iguales, así
   que ninguna estrangula el texto de la de al lado. */

[data-itb-pie] {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 3.5rem !important;
}

[data-itb-pie] > *:first-child {
    flex: 0 1 340px !important;
    min-width: 0;
}

[data-itb-pie-listas] {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 2.5rem !important;
    min-width: 0;
}

[data-itb-pie-listas] > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
}

@media (max-width: 991px) {
    [data-itb-pie] { flex-direction: column !important; gap: 2rem !important; }
    [data-itb-pie] > *:first-child { flex: 1 1 auto !important; }
    [data-itb-pie-listas] { flex-wrap: wrap; gap: 1.5rem !important; }
    [data-itb-pie-listas] > * { flex: 1 1 45% !important; }
}

@media (max-width: 575px) {
    [data-itb-pie-listas] > * { flex: 1 1 100% !important; }
}

/* El glifo de WhatsApp va relleno: sin esto hereda el trazo del resto de iconos
   de la barra y se pinta como una silueta hueca. */
.itb-barra__item svg path[fill="currentColor"] { stroke: none !important; }

/* ===========================================================================
   SLIDER DE CONTENIDO (Taller de Posticería) — columnas a la misma altura
   ===========================================================================
   Medido a 1440px: cada diapositiva reparte imagen y texto en dos columnas de
   674px, pero la foto se pintaba a 212x281 —su tamaño de archivo— dentro de una
   columna de 674x453. Resultado: una foto pequeña flotando arriba a la
   izquierda con un bloque de color el doble de alto al lado.
   La imagen pasa a llenar su columna y ambas igualan altura. */

.stsb-n-slider .swiper-slide,
.stsb-n-slider .swiper-slide > .e-con,
.stsb-n-slider .swiper-slide .e-con-inner {
    height: auto !important;
    align-items: stretch !important;
}

.stsb-n-slider .swiper-slide .elementor-widget-image,
.stsb-n-slider .swiper-slide .elementor-widget-image .elementor-widget-container {
    height: 100% !important;
    display: flex;
}

.stsb-n-slider .swiper-slide .elementor-widget-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
}

/* Las flechas, centradas bajo la diapositiva en vez de descolgadas a la
   derecha, y con la misma esquina viva que el resto de la web. */
.stsb-n-slider ~ .stsb_slider_nav,
.stsb-n-slider .stsb_slider_nav {
    display: flex !important;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
}

@media (max-width: 991px) {
    /* En vertical, la foto va encima del texto con una proporción estable: a
       `height: 100%` sobre un contenedor que ya no manda, se estiraba. */
    .stsb-n-slider .swiper-slide .e-con-inner { flex-direction: column !important; }

    .stsb-n-slider .swiper-slide .elementor-widget-image img {
        height: auto !important;
        aspect-ratio: 4 / 3;
    }

    .stsb-n-slider .swiper-slide .e-con-inner > * {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
}

/* 🔴 La foto no colgaba de un `elementor-widget-image` como supuse: vive en un
   swiper ANIDADO dentro de la columna izquierda, y ese swiper calculaba sus
   diapositivas a 212px —el ancho del archivo— dentro de un contenedor de 674.
   Por eso la primera regla no cambió nada. Cada uno de esos sliders anidados
   lleva UNA sola diapositiva, así que forzar el ancho no rompe ningún
   desplazamiento: no hay nada entre lo que desplazarse. */

.stsb-n-slider .swiper .swiper-slide,
.stsb-n-slider .stsb_swiper_block {
    width: 100% !important;
    height: 100% !important;
}

.stsb-n-slider .stsb_swiper_block picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.stsb-n-slider .stsb_swiper_block img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* El swiper anidado iguala la altura de la columna de texto de al lado. */
.stsb-n-slider .swiper-slide > .e-con > .e-con-inner { align-items: stretch !important; }

.stsb-n-slider .swiper.stsb-swiper-container {
    height: 100% !important;
    min-height: 380px;
}

.stsb-n-slider .swiper.stsb-swiper-container .swiper-wrapper { height: 100% !important; }

@media (max-width: 991px) {
    .stsb-n-slider .swiper.stsb-swiper-container { min-height: 0 !important; height: auto !important; }
    .stsb-n-slider .stsb_swiper_block img { height: auto !important; aspect-ratio: 3 / 4; }
}

/* ===========================================================================
   RESULTADOS: subcategorías con la estética de las tarjetas de categoría
   ===========================================================================
   Se pidió que se parezcan a las del carrusel de categorías: foto que cubre la
   caja, nombre sobre ella en un velo tenue y esquina viva. Antes eran cajas
   blancas con la imagen rota y el nombre debajo en gris. */

#subcategories li,
.subcategories-list li {
    position: relative;
    border: 0 !important;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

#subcategories li > a,
.subcategories-list li > a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

#subcategories .subcategory-image,
.subcategories-list .subcategory-image {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    background: #efe9e3;
}

#subcategories .subcategory-image img,
.subcategories-list .subcategory-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: normal;
}

#subcategories .subcategory-name,
.subcategories-list .subcategory-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Velo plano y de poca opacidad, no degradado: es lo que se decidió para el
       carrusel de categorías y aquí se mantiene el mismo criterio. */
    background: rgba(22, 17, 15, .42);
    color: #fff !important;
    border: 0 !important;
    font-weight: 300;
    letter-spacing: .12em;
    padding: .85rem .7rem !important;
}

/* ===========================================================================
   «VER MI CESTA» — anclado al fondo del panel, siempre a la vista
   ===========================================================================
   Medido en móvil (390x844): el botón caía en y=778-817 y la barra inferior
   empieza en 789. Con el panel ya acortado seguía asomando solo una franja de
   11px, y el resto quedaba fuera del área visible: para llegar a él había que
   adivinar que el panel tenía scroll. Un botón que decide la compra no puede
   depender de que el cliente descubra un scroll.

   Se ancla al fondo del propio panel: pase lo que pase con el largo de la
   lista, el botón está siempre en pantalla y por encima de la barra. */

@media (max-width: 991px) {
    [data-itb-panel] .elementor-button-wrapper {
        position: sticky;
        bottom: 0;
        z-index: 5;
        background: #fff;
        padding: .7rem 0 .9rem;
        margin: 0;
        box-shadow: 0 -10px 18px -12px rgba(22, 17, 15, .35);
    }

    [data-itb-panel] .elementor-button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        min-height: 48px;
    }
}

/* ===========================================================================
   «VER MI CESTA»: tercer intento, y el que funciona — con el porqué de los dos
   fallos anteriores, que es lo que evita repetirlos
   ===========================================================================
   Intento 1 — acortar el panel a 789px: el contenido NO se recolocó, se quedó
   igual y simplemente se cortó. El botón pasó de asomar 11px a no verse nada.
   Intento 2 — `position: sticky` en el envoltorio del botón: sticky se mueve
   dentro del área de SU padre, y ese padre mide 46px, o sea, cero recorrido.
   No pegó el botón a ninguna parte.

   Lo que sí funciona: devolver al panel su altura completa y empujar el
   CONTENIDO hacia arriba con un relleno inferior. El botón sube por encima de
   la barra por sí solo, sin depender de scroll, sticky ni recolocaciones. */

@media (max-width: 991px) {
    [data-itb-panel] {
        bottom: 0 !important;
        height: 100% !important;
    }

    /* El relleno va en el hijo, no en el panel: en el panel, el contenido
       interno lo ignoraba (fue el intento 1). */
    [data-itb-panel] > * { padding-bottom: 66px !important; }

    /* Se anula el sticky del intento 2. */
    [data-itb-panel] .elementor-button-wrapper {
        position: static !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}

/* Cuarto y definitivo: el relleno del hijo tampoco movió el botón (el contenido
   del panel no depende de ese flujo). Se sube el propio botón con un
   desplazamiento, que no depende de ningún contenedor intermedio. Es la única
   de las cuatro vías que no puede fallar por la estructura del tema. */
@media (max-width: 991px) {
    [data-itb-panel] > * { padding-bottom: 0 !important; }

    [data-itb-panel] .elementor-button-wrapper {
        transform: translateY(-70px);
        position: relative;
        z-index: 4;
    }
}

/* ===========================================================================
   PIE DEL PANEL DE FILTROS EN MÓVIL — selecciones y «Ver resultados»
   =========================================================================== */

.itb-filtros__pie {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #eee8e1;
    padding: .75rem .9rem 1rem;
    margin-top: .5rem;
    z-index: 3;
}

.itb-filtros__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .7rem;
    max-height: 92px;
    overflow-y: auto;
}

.itb-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #f4efe9;
    border: 1px solid #e2dbd3;
    border-radius: 0;
    padding: .35rem .55rem;
    font-size: .74rem;
    color: #16110f;
    cursor: pointer;
    max-width: 100%;
}

.itb-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itb-chip b { font-weight: 400; opacity: .6; }
.itb-chip:hover { border-color: #16110f; }

.itb-filtros__aplicar {
    display: block;
    width: 100%;
    min-height: 48px;
    background: #16110f;
    color: #fff;
    border: 1px solid #16110f;
    border-radius: 0;
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
}

.itb-filtros__aplicar:hover { background: #000; }

/* El panel necesita sitio abajo para su propio pie. */
.itb-filtros--abierto { padding-bottom: 0 !important; }

/* ===========================================================================
   FILTROS EN MÓVIL: capas — el panel POR ENCIMA de todo lo demás
   ===========================================================================
   Medido con el panel abierto: la caja existía (335x844 en x=0) y aun así el
   carrusel de categorías y la barra Filtros/Relevancia se pintaban por delante,
   y el fondo del panel dejaba ver la página. Era el orden de capas: los widgets
   de Elementor traen su propio `z-index` y ganaban al panel.

   Escala de capas de la tienda, para no volver a chocar:
     barra inferior      9990
     buscador            10100
     velo de filtros     10150
     panel de filtros    10200
     franja de avisos    10300   (siempre la más alta: es un aviso)
     botón de cookies    2147483000 (lo pone el módulo, fuera de esta escala) */

.itb-filtros {
    background: #fff !important;
    opacity: 1 !important;
}

.itb-filtros--abierto {
    z-index: 10200 !important;
    background: #fff !important;
    box-shadow: 0 0 36px rgba(22, 17, 15, .22);
}

/* El velo tapa TODO lo que no sea el panel, carruseles incluidos. */
body.itb-panel-abierto::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(22, 17, 15, .45);
    z-index: 10150;
}

/* Mientras el panel está abierto, nada de la página compite con él. */
body.itb-panel-abierto .itb-barra-listado,
body.itb-panel-abierto .stsb-n-slider,
body.itb-panel-abierto .swiper,
body.itb-panel-abierto .elementor-widget-update-0 { z-index: auto !important; }

body.itb-panel-abierto .itb-barra { z-index: 9990 !important; }

/* Y el propio contenido del panel por encima del velo. */
.itb-filtros--abierto > * { position: relative; z-index: 1; }

/* Con el panel ya colgando del <body>, se le fija posición y medidas propias:
   dentro de la columna las heredaba del contenedor y ahí ya no hay contenedor. */
@media (max-width: 991px) {
    body > .itb-filtros {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(335px, 88vw) !important;
        max-width: 88vw !important;
        height: 100% !important;
        margin: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        background: #fff !important;
        /* Cerrado, fuera de la pantalla; abierto, dentro. La transición hace que
           se lea como un cajón y no como una aparición brusca. */
        transform: translateX(-100%);
        transition: transform .22s ease;
        z-index: 10200 !important;
        display: block !important;
    }

    body > .itb-filtros.itb-filtros--abierto { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    body > .itb-filtros { transition: none; }
}

/* ===========================================================================
   HOJA DE ORDENACIÓN EN MÓVIL
   ===========================================================================
   Sube desde abajo, que es donde está el pulgar y donde el móvil espera este
   tipo de elección. Mismo tratamiento de capas que el panel de filtros: cuelga
   del <body> con z-index 10200, por encima de la barra inferior. */

.itb-orden {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10200;
    background: #fff;
    border-top: 1px solid #16110f;
    padding: 1rem 0 .6rem;
    transform: translateY(100%);
    transition: transform .22s ease;
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.itb-orden--abierto { transform: translateY(0); }

.itb-orden__titulo {
    margin: 0 0 .6rem;
    padding: 0 1.1rem;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8a8078;
}

.itb-orden__opcion {
    display: block;
    padding: .95rem 1.1rem;
    font-size: .95rem;
    color: #16110f !important;
    text-decoration: none !important;
    border-top: 1px solid #f2ece5;
}

.itb-orden__opcion:first-of-type { border-top: 0; }
.itb-orden__opcion:active { background: #faf7f4; }

.itb-orden__opcion--activa {
    font-weight: 700;
    background: #faf7f4;
}

/* La marca de la opción vigente: un punto, no un icono que haya que descifrar. */
.itb-orden__opcion--activa::after {
    content: '•';
    float: right;
    color: #16110f;
}

.itb-orden__cerrar {
    display: block;
    width: calc(100% - 2.2rem);
    margin: .8rem 1.1rem .4rem;
    min-height: 46px;
    background: #fff;
    color: #16110f;
    border: 1px solid #16110f;
    border-radius: 0;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .itb-orden { transition: none; }
}

/* En escritorio no hace falta: ahí el desplegable del tema tiene sitio. */
@media (min-width: 992px) {
    .itb-orden { display: none; }
}

/* ===========================================================================
   MENÚ LATERAL: menos aire y un solo filete
   ===========================================================================
   Medido con el menú abierto: las entradas de primer nivel ocupaban 56px y las
   de submenú 80px con el MISMO relleno (13,6px arriba y abajo) — los 24px de
   diferencia venían de márgenes internos del widget, no del relleno. Y cada
   entrada llevaba su filete, incluidas las de segundo nivel, lo que dibujaba
   una parrilla de líneas dentro de otra.
   Queda: filete solo entre las entradas de primer nivel, y el submenú con su
   propia sangría en vez de líneas para indicar que depende de la de arriba. */

[data-itb-menu] .e-n-accordion-item-title {
    padding-block: .62rem !important;
    margin: 0 !important;
}

[data-itb-menu] .e-n-accordion-item {
    margin: 0 !important;
}

/* Segundo nivel: sin filete y con sangría. */
[data-itb-menu] .e-n-accordion-item .e-n-accordion-item {
    border-bottom: 0 !important;
    padding-left: .9rem;
}

[data-itb-menu] .e-n-accordion-item .e-n-accordion-item .e-n-accordion-item-title {
    padding-block: .45rem !important;
    font-weight: 400;
}

/* Los widgets internos traían márgenes propios: son los 24px de más. */
[data-itb-menu] .e-n-accordion-item .elementor-widget-container,
[data-itb-menu] .e-n-accordion-item .e-con,
[data-itb-menu] .e-n-accordion-item .e-con-inner {
    margin-block: 0 !important;
    padding-block: 0 !important;
    row-gap: 0 !important;
}

[data-itb-menu] .e-n-accordion-item-content { padding-block: .15rem !important; }

/* El contenido del acordeón traía además su propio borde en algunos temas. */
[data-itb-menu] .e-n-accordion-item-content,
[data-itb-menu] .e-n-accordion-item-title-header { border: 0 !important; }

/* La X de cerrar del panel de filtros: sin recuadro y donde se espera. */
.itb-filtros__cerrar {
    border: 0 !important;
    background: transparent !important;
    font-size: 1.6rem;
    line-height: 1;
    padding: .3rem .5rem !important;
    margin: 0 0 .2rem auto !important;
    display: block;
    color: #16110f;
    cursor: pointer;
}

/* ===========================================================================
   FILTROS: casillas alineadas y cierre con marco completo
   ===========================================================================
   El texto de cada opción no cuadraba con su casilla en ningún tamaño: la
   casilla es un `<span class="custom-checkbox">` con el input dentro y el texto
   como hermano, sin nada que los alineara. Se resuelve poniendo la etiqueta en
   fila con alineación central, que además agranda el área pulsable. */

.itb-filtros .facet-label,
.itb-filtros label.facet-label {
    display: flex !important;
    align-items: center !important;
    gap: .6rem;
    width: 100%;
    margin: 0 !important;
    padding: .42rem 0 !important;
    font-size: .88rem;
    line-height: 1.3;
    color: #2a2320 !important;
    cursor: pointer;
}

.itb-filtros .custom-checkbox {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #b9b1a9;
    background: #fff;
    position: relative;
    top: 0;
}

.itb-filtros .custom-checkbox input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    opacity: 0;
    cursor: pointer;
}

/* La marca de seleccionado se dibuja aquí: el input va oculto para poder
   controlar el aspecto en todos los navegadores por igual. */
.itb-filtros .custom-checkbox input:checked + span,
.itb-filtros .custom-checkbox:has(input:checked)::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid #16110f;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.itb-filtros .custom-checkbox:has(input:checked) { border-color: #16110f; }

.itb-filtros .facet-label > span:not(.custom-checkbox) {
    flex: 1 1 auto;
    min-width: 0;
}

.itb-filtros .magnitude {
    color: #9a9089 !important;
    font-size: .8rem;
    margin-left: .25rem;
}

.itb-filtros li { list-style: none; margin: 0 !important; }
.itb-filtros ul { padding-left: 0 !important; margin: 0 !important; }

.itb-faceta--activa { font-weight: 600; }

/* La X de cerrar: marco completo, no medio filete. */
.itb-filtros__cerrar {
    border: 1px solid #d8d1c9 !important;
    background: #fff !important;
    width: 38px;
    height: 38px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0 !important;
    margin: .8rem .9rem .4rem auto !important;
    color: #16110f;
    cursor: pointer;
}

.itb-filtros__cerrar:hover { border-color: #16110f !important; }

.itb-filtros__limpiar {
    display: block;
    width: 100%;
    margin-top: .5rem;
    min-height: 42px;
    background: #fff;
    color: #16110f;
    border: 1px solid #d8d1c9;
    border-radius: 0;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.itb-filtros__limpiar:hover { border-color: #16110f; }
/* ===========================================================================
   CASILLAS DE FILTRO: una sola marca, no dos
   ===========================================================================
   Se veían con doble recuadro: el navegador pintaba su propia casilla nativa
   dentro del cuadro dibujado. Con `appearance: none` desaparece la nativa y
   queda solo la de la tienda. */

.itb-filtros input[type="checkbox"],
.itb-filtros input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 0 !important;
    background: transparent !important;
}

/* ===========================================================================
   CASILLA DE FILTRO — DEFINICIÓN ÚNICA Y FINAL
   ===========================================================================
   Esta sección sustituye a los intentos anteriores sobre `.custom-checkbox`.
   El marcado de PrestaShop es:
       <label class="facet-label">
         <span class="custom-checkbox"><input type="checkbox"><span></span></span>
         <a>Nombre</a> <span class="magnitude">(23)</span>
       </label>
   El `<span>` vacío que va DENTRO del input es el que el tema usa para pintar
   la marca. Se dibuja ahí, y no con un `::after` sobre el contenedor, que era
   lo que producía el doble recuadro. */

.itb-filtros .custom-checkbox {
    position: relative;
    display: inline-block !important;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #b9b1a9;
    background: #fff;
    box-sizing: border-box;
}

.itb-filtros .custom-checkbox > input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

/* La marca: un check dibujado con dos bordes, dentro del cuadro. */
.itb-filtros .custom-checkbox > input + span {
    position: absolute;
    left: 4px;
    top: 0;
    width: 6px;
    height: 11px;
    border: solid #16110f;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .12s ease;
}

.itb-filtros .custom-checkbox > input:checked + span { transform: rotate(45deg) scale(1); }
.itb-filtros .custom-checkbox:has(> input:checked) { border-color: #16110f; }

/* Se anula el ::after del intento anterior, que dibujaba una segunda marca. */
.itb-filtros .custom-checkbox::after { content: none !important; }

/* El nombre de la faceta es un enlace: aquí NO debe navegar (lo gobierna
   itbFiltrosSeleccion), así que se presenta como texto normal. */
.itb-filtros .facet-label a {
    color: #2a2320 !important;
    text-decoration: none !important;
    cursor: pointer;
}

/* ===========================================================================
   FACETAS — ESTÉTICA DEFINITIVA (sobre el marcado real de PrestaShop)
   ===========================================================================
   Marcado exacto de cada opción:
       <li><label class="facet-label" for="facet_input_51007_0">
             <span class="custom-checkbox">
               <input type="checkbox" data-search-url="...">
               <span><i class="material-icons checkbox-checked"></i></span>
             </span>
             <a class="_gray-darker search-link js-search-link">Accesorios
                <span class="magnitude">(23)</span></a>
           </label></li>

   Dos detalles que explican lo que se veía mal:
     · La marca de seleccionado es un icono de Material Icons. Si esa fuente no
       está cargada —y aquí no lo está— el navegador pinta el nombre del icono o
       un cuadro vacío: de ahí el «cuadrado raro». Se oculta el icono y la marca
       se dibuja con dos bordes, que no dependen de ninguna fuente.
     · El `href` del enlace es `/maquillaje&q=...` — con `&` y SIN `?`. Es una
       URL inválida, y es la que producía el 404 al pulsar. Por eso el filtrado
       se construye desde `data-search-url` y no desde el href. */

/* --- Título de sección --- */
.itb-facet__titulo,
.itb-filtros .facet-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 !important;
    padding: .85rem 0 !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #16110f !important;
    border-bottom: 1px solid #eee8e1;
    cursor: pointer;
    list-style: none;
}

.itb-facet__titulo::-webkit-details-marker { display: none; }

/* --- Lista: la clase `collapse` de Bootstrap la ocultaría --- */
.itb-filtros ul.collapse,
.itb-filtros ul {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    margin: .5rem 0 .9rem !important;
    padding: 0 !important;
    list-style: none;
}

.itb-filtros li { margin: 0 !important; padding: 0 !important; }

/* --- Fila de opción --- */
.itb-filtros .facet-label {
    display: flex !important;
    align-items: center !important;
    gap: .65rem !important;
    width: 100%;
    margin: 0 !important;
    padding: .4rem 0 !important;
    cursor: pointer;
    font-weight: 400;
}

.itb-filtros .facet-label:hover .search-link { color: #16110f !important; }

/* --- La casilla --- */
.itb-filtros .custom-checkbox {
    position: relative;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #b9b1a9;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .12s ease, background .12s ease;
}

.itb-filtros .custom-checkbox > input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    opacity: 0;
    cursor: pointer;
}

/* El icono de Material Icons no se usa: sin su fuente pinta un cuadro o el
   literal «checkbox-checked». */
.itb-filtros .custom-checkbox i.material-icons { display: none !important; }

/* La marca, dibujada con bordes: no depende de ninguna fuente. */
.itb-filtros .custom-checkbox > input + span {
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .12s ease;
}

.itb-filtros .custom-checkbox:has(> input:checked) {
    background: #16110f;
    border-color: #16110f;
}

.itb-filtros .custom-checkbox > input:checked + span { transform: rotate(45deg) scale(1); }

/* --- El nombre y su recuento --- */
.itb-filtros .search-link,
.itb-filtros .facet-label a {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: .3rem;
    font-size: .87rem !important;
    line-height: 1.35;
    color: #2a2320 !important;
    text-decoration: none !important;
    transition: color .12s ease;
}

.itb-filtros .magnitude {
    flex: 0 0 auto;
    font-size: .78rem !important;
    color: #a09890 !important;
    font-variant-numeric: tabular-nums;
}

/* La opción marcada se distingue sin recolocar nada (mismo peso de texto para
   que la lista no «salte» al seleccionar). */
.itb-filtros .facet-label:has(input:checked) .search-link { color: #16110f !important; }
.itb-filtros .facet-label:has(input:checked) .magnitude { color: #16110f !important; }

/* ===========================================================================
   🔴 CORRECCIÓN: el megamenú dejaba una banda blanca bajo el header
   ===========================================================================
   Al maquetar el megamenú le di al contenedor `.e-n-tabs-content` relleno,
   fondo blanco, filete y sombra. Pero ese contenedor existe SIEMPRE, también
   con el menú cerrado: el resultado era una franja blanca de ~65px pegada bajo
   la cabecera en todas las páginas.
   El vestido va en el PANEL ABIERTO, no en el contenedor que lo aloja. */

.e-n-tabs-content {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

/* Elementor marca con `aria-hidden="true"` los paneles que no están activos. */
.e-n-tabs-content > [aria-hidden="true"] {
    display: none !important;
    padding: 0 !important;
    border: 0 !important;
}

@media (min-width: 992px) {
    .e-n-tabs-content > *:not([aria-hidden="true"]) {
        background: #fff;
        border-top: 1px solid #eee8e1;
        box-shadow: 0 16px 34px rgba(22, 17, 15, .10);
        padding-block: 1.8rem 2.2rem !important;
    }
}

/* ===========================================================================
   SLIDER DE CATEGORÍAS: el nombre deja de ir pegado al borde
   ===========================================================================
   «ROSTRO» arrancaba a 15px del borde izquierdo de la tarjeta, muy justo para
   un rótulo sobre fotografía. Se le da un margen proporcional al ancho de la
   tarjeta, que además se mantiene al cambiar de tamaño. */

.stsb-swiper-container .elementor-2165 .stsb_cm_category_name,
.elementor-2165 .stsb_cm_category_name,
.stsb-swiper-container .elementor-2165 h2,
.stsb-swiper-container .elementor-2165 h3 {
    padding-left: clamp(1.1rem, 6%, 2rem) !important;
    padding-right: clamp(1.1rem, 6%, 2rem) !important;
}

/* ===========================================================================
   ⭐ BLOQUE CANÓNICO — SELECTOR DE CANTIDAD Y BOTÓN DE COMPRA
   ===========================================================================
   ESTE ES EL ÚNICO SITIO DONDE SE DEFINE SU ASPECTO. Si hay que cambiar una
   medida, un color o un borde, se cambia AQUÍ. No se añade una regla nueva en
   otra parte del fichero: así es como acabaron conviviendo tres anchos (95,
   118 y 130) y dos alturas (39 y 46) en la misma rejilla.

   Contexto de por qué hace falta forzarlo: la tienda pinta DOS selectores
   distintos —`.stsb_qty_wrap`, el del tema, en los productos sin variantes, y
   `.itb-qty`, el propio, en el resto—, y además el botón de compra lo genera
   un widget de Elementor con sus propias medidas. Sin una definición única y
   con prioridad, cada card se dibuja distinta.

   MEDIDAS ACORDADAS:
     · selector: 96 x 46 px, borde 1px #16110f, esquina viva
     · botones - / +: 30px de ancho, sin borde propio
     · casilla del número: el resto, centrada, negrita
     · botón de compra: 46px de alto (el mismo que el selector) y el ancho
       restante de la fila
   =========================================================================== */

html body .itb-qty,
html body .stsb_qty_wrap,
html body .itb-cantidad,
html body .bootstrap-touchspin,
html body .product-quantity .qty {
    display: inline-flex !important;
    align-items: stretch !important;
    /* Ancho acordado: 120px. Cambiar SOLO aqui. */
    flex: 0 0 120px !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #16110f !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html body .itb-qty button,
html body .stsb_qty_wrap button,
html body .itb-cantidad button,
html body .bootstrap-touchspin button,
html body .btn-touchspin,
html body .stsb_qty_minus,
html body .stsb_qty_plus {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #16110f !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .15s ease;
}

html body .itb-qty button:hover,
html body .stsb_qty_wrap button:hover,
html body .itb-cantidad button:hover { background: #f4efe9 !important; }

html body .itb-qty input,
html body .stsb_qty_wrap input,
html body .itb-cantidad input,
html body .bootstrap-touchspin input,
html body .product-quantity input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-left: 1px solid #efe9e2 !important;
    border-right: 1px solid #efe9e2 !important;
    border-radius: 0 !important;
    text-align: center !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    line-height: 44px !important;
    color: #16110f !important;
    background: #fff !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}

html body .itb-qty input::-webkit-outer-spin-button,
html body .itb-qty input::-webkit-inner-spin-button,
html body .stsb_qty_wrap input::-webkit-outer-spin-button,
html body .stsb_qty_wrap input::-webkit-inner-spin-button,
html body .bootstrap-touchspin input::-webkit-outer-spin-button,
html body .bootstrap-touchspin input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* El envoltorio del tema no impone sus medidas al selector. */
html body .stsb_flex_wrapper:has(.stsb_qty_wrap) {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
}

/* --- El botón de compra, a la misma altura y con el ancho restante --- */
html body .elementor-863 .stsb_pm_action_button_wrapper,
html body .itb-fila-compra {
    display: flex !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

html body .elementor-863 .stsb_pm_action_button_wrapper a,
/* 🔴 EL `:not()` NO ES DECORATIVO. El selector de cantidad vive DENTRO de este
   mismo widget, así que un selector como
   `[data-widget_type^="pm-product-action-button"] button`
   —sin exigir hijo directo— alcanzaba también a los botones `-` y `+`, y les
   imponía `flex: 1 1 0` con `width: auto`. Resultado medido: los botones del
   selector pasaban de sus 38px a 13, y el número quedaba con 118px dentro de un
   contenedor de 120. Aquí se excluyen por su clase. */
html body .elementor-863 .stsb_pm_action_button_wrapper button:not(.itb-qty__btn):not(.stsb_qty_minus):not(.stsb_qty_plus),
html body .elementor-863 [data-widget_type^="pm-product-action-button"] a,
html body .elementor-863 [data-widget_type^="pm-product-action-button"] button:not(.itb-qty__btn):not(.stsb_qty_minus):not(.stsb_qty_plus),
html body .itb-vista-rapida .btn-primary,
html body .product-add-to-cart .btn-primary,
html body button.add-to-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 0 !important;
    padding-inline: .4rem !important;
    font-size: .78rem !important;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* En móvil el dedo pide algo más de botón, pero la altura no cambia: la pareja
   selector + botón se mantiene alineada en todos los tamaños. */
@media (max-width: 767px) {
    html body .itb-qty button,
    html body .stsb_qty_wrap button { flex: 0 0 38px !important; width: 38px !important; min-width: 38px !important; }
    html body .itb-qty,
    html body .stsb_qty_wrap { flex: 0 0 120px !important; width: 120px !important; min-width: 120px !important; max-width: 120px !important; }
}

/* ===========================================================================
   FILTROS: el cursor de mano solo donde se puede pulsar
   ===========================================================================
   El panel entero mostraba la manita y aceptaba el clic en cualquier punto,
   porque el manejador está puesto sobre la caja completa. Pulsar en un hueco
   no hace nada, pero el cursor prometía que sí. Aquí se acota: mano únicamente
   sobre las opciones, los títulos plegables y los botones. */

html body .itb-filtros,
html body .itb-filtros section,
html body .itb-filtros ul,
html body .itb-filtros li,
html body .itb-filtros div { cursor: default; }

html body .itb-filtros .facet-label,
html body .itb-filtros .facet-label *,
html body .itb-filtros .custom-checkbox,
html body .itb-filtros .custom-checkbox *,
html body .itb-filtros summary,
html body .itb-filtros button,
html body .itb-filtros .itb-facet__titulo { cursor: pointer; }

/* ===========================================================================
   ⭐ CANÓNICO (2/2) — ALINEACIÓN DE LAS OPCIONES DE FILTRO
   ===========================================================================
   Medido: dentro de una fila de 40px, la casilla arrancaba a 5px del borde
   superior y el texto a 14px — nueve píxeles de desfase, visible a simple
   vista. Las reglas anteriores (especificidad 0,2,0) perdían contra las del
   tema, así que la alineación no llegaba a aplicarse.
   Se fuerza aquí, con `html body` delante, y en un solo sitio. */

html body .itb-filtros .facet-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .65rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding: .3rem 0 !important;
    line-height: 1.3 !important;
}

/* La casilla no crece ni se desplaza: tamaño fijo y centrada en su línea. */
html body .itb-filtros .custom-checkbox {
    position: relative !important;
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    top: 0 !important;
    border: 1px solid #b9b1a9;
    background: #fff;
    box-sizing: border-box !important;
}

/* El nombre, en la misma línea que la casilla y ocupando el resto. */
html body .itb-filtros .facet-label > a,
html body .itb-filtros .search-link {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    align-self: center !important;
    gap: .35rem !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-size: .87rem !important;
    color: #2a2320 !important;
    text-decoration: none !important;
}

html body .itb-filtros .magnitude {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-size: .78rem !important;
    color: #a09890 !important;
}

/* ===========================================================================
   ⭐ CANÓNICO (3/3) — POR QUÉ LOS BOTONES NO MEDÍAN IGUAL
   ===========================================================================
   Medido card por card en la rejilla: los botones salían a 71px en unas y 74
   en otras. No era el botón: eran DOS contenedores distintos.
       · `.stsb_pm_action_button_wrapper`      → 200px de ancho → botón 74
       · `.stsb_pm_action_button_add_to_cart`  → 197px de ancho → botón 71
   La regla anterior solo nombraba el primero, así que el segundo repartía
   sobre 3px menos. Con `flex: 1 1 0` el botón hereda esa diferencia.

   Arreglo: se normaliza el CONTENEDOR —cualquiera cuya clase empiece por
   `stsb_pm_action_button`— al ancho completo de la card. Igualado el
   contenedor, el botón sale idéntico en todas sin fijarle un ancho a mano,
   que se rompería en cuanto cambie el tamaño de la card. */

html body .elementor-863 [class^="stsb_pm_action_button"],
html body .elementor-863 [class*=" stsb_pm_action_button"],
html body .elementor-863 .stsb_pm_action_button_wrapper,
html body .elementor-863 .stsb_pm_action_button_add_to_cart {
    display: flex !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Y el botón toma el resto exacto de esa fila, ya idéntica en todas. */
html body .elementor-863 [class^="stsb_pm_action_button"] > a,
html body .elementor-863 [class^="stsb_pm_action_button"] > button,
html body .elementor-863 [class*=" stsb_pm_action_button"] > a,
html body .elementor-863 [class*=" stsb_pm_action_button"] > button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
}

/* ===========================================================================
   ⭐⭐ BLINDAJE FINAL — ESTE BLOQUE MANDA SOBRE CUALQUIER OTRO CSS
   ===========================================================================
   Va el último del fichero y usa la clase DUPLICADA (`.itb-qty.itb-qty`), que
   sube la especificidad sin necesidad de inventar ancestros. Combinado con
   `html body` y `!important`, ninguna hoja del tema ni de un módulo puede
   ganarle, ni aunque cargue después.

   Es la definición final del selector de cantidad. Si alguna vez vuelve a
   verse distinto en alguna card, el problema NO es que falte especificidad:
   será un selector nuevo del tema que hay que añadir a esta lista. */

html body .itb-qty.itb-qty,
html body .stsb_qty_wrap.stsb_qty_wrap,
html body .itb-cantidad.itb-cantidad {
    display: inline-flex !important;
    flex: 0 0 108px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    height: 46px !important;
    border: 1px solid #16110f !important;
    border-radius: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Los botones - y +: ancho fijo y SIN posibilidad de encogerse. La regla del
   botón de compra les imponía `flex: 1 1 0` y quedaban en 13px. */
html body .itb-qty.itb-qty > button,
html body .itb-qty.itb-qty .itb-qty__btn,
html body .stsb_qty_wrap.stsb_qty_wrap > button,
html body .stsb_qty_wrap.stsb_qty_wrap .stsb_qty_minus,
html body .stsb_qty_wrap.stsb_qty_wrap .stsb_qty_plus {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #16110f !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* El número, con el hueco que queda. */
html body .itb-qty.itb-qty > input,
html body .itb-qty.itb-qty .itb-qty__campo,
html body .stsb_qty_wrap.stsb_qty_wrap > input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-left: 1px solid #efe9e2 !important;
    border-right: 1px solid #efe9e2 !important;
    text-align: center !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    color: #16110f !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

/* El botón de compra: el resto de la fila y algo más largo, como se pidió. */
html body .elementor-863 [class*="stsb_pm_action_button"] > a,
html body .elementor-863 [class*="stsb_pm_action_button"] > button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 0 !important;
}

/* El campo del selector del TEMA tiene clase propia (`.stsb_pro_quantity`) y su
   regla ganaba a `> input`: medía 106px dentro de un contenedor de 108, así que
   empujaba los botones fuera. Se nombra explícitamente y con clase duplicada. */
html body .stsb_qty_wrap .stsb_pro_quantity.stsb_pro_quantity,
html body .stsb_qty_wrap input[type="text"],
html body .stsb_qty_wrap input[type="number"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-left: 1px solid #efe9e2 !important;
    border-right: 1px solid #efe9e2 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* 🔴 ÚLTIMA CAUSA del selector del tema descuadrado: sus botones `-` y `+` van
   con `position: absolute`. Al estar fuera del flujo, el flex no los cuenta y el
   campo del número se queda con los 108px enteros (medido: 106), con los botones
   montados encima. Devolviéndolos al flujo, los tres reparten como debe ser. */
html body .stsb_qty_wrap .stsb_qty_minus,
html body .stsb_qty_wrap .stsb_qty_plus,
html body .stsb_qty_wrap > button {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
}

/* ===========================================================================
   «FILTRAR POR»: fuera los filetes que sobran
   ===========================================================================
   Entre el título de sección, la lista, cada opción y el envoltorio había hasta
   cuatro líneas distintas apiladas. Queda UNA: la que separa una sección de
   filtros de la siguiente. */

html body .itb-filtros,
html body .itb-filtros section.facet,
html body .itb-filtros ul,
html body .itb-filtros li,
html body .itb-filtros .facet-label,
html body .itb-filtros .facet-title,
html body .itb-filtros .collapse,
html body .itb-filtros .itb-facet__buscar,
html body #search_filters,
html body #search_filters_wrapper {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* La única línea que se conserva: separador entre secciones. */
html body .itb-filtros section.facet + section.facet,
html body .itb-filtros details + details {
    border-top: 1px solid #eee8e1 !important;
    margin-top: .2rem !important;
    padding-top: .2rem !important;
}

/* El título de sección conserva su filete inferior, que es el que ordena la
   lectura; el resto de cajas, ninguno. */
html body .itb-filtros .itb-facet__titulo {
    border: 0 !important;
    border-bottom: 1px solid #eee8e1 !important;
}

/* Los filetes que separan el número de los botones van EN LOS BOTONES, no en el
   campo. Motivo: en el selector del tema el borde del input existe (medido:
   1px #efe9e2 en ambos) pero queda tapado por el fondo del botón contiguo, y la
   primera card del listado —la única con el selector del tema— se veía sin las
   dos líneas que sí tienen las demás. Puesto en el botón no hay nada que pueda
   solaparlo. */
html body .itb-qty .itb-qty__btn:first-child,
html body .itb-qty > button:first-child,
html body .stsb_qty_wrap .stsb_qty_minus,
html body .stsb_qty_wrap > button:first-of-type {
    border-right: 1px solid #efe9e2 !important;
}

html body .itb-qty .itb-qty__btn:last-child,
html body .itb-qty > button:last-child,
html body .stsb_qty_wrap .stsb_qty_plus,
html body .stsb_qty_wrap > button:last-of-type {
    border-left: 1px solid #efe9e2 !important;
}

/* Con la MISMA especificidad que el blindaje (clase duplicada), que si no le
   gana su propio `border: 0`. */
html body .stsb_qty_wrap.stsb_qty_wrap .stsb_qty_minus,
html body .itb-qty.itb-qty .itb-qty__btn:first-child {
    border: 0 !important;
    border-right: 1px solid #efe9e2 !important;
}

html body .stsb_qty_wrap.stsb_qty_wrap .stsb_qty_plus,
html body .itb-qty.itb-qty .itb-qty__btn:last-child {
    border: 0 !important;
    border-left: 1px solid #efe9e2 !important;
}

/* ===========================================================================
   FACETAS: una sola línea de separación, ni una más
   ===========================================================================
   Se acumulaban filetes de cuatro sitios distintos: el envoltorio del módulo,
   la sección de cada faceta, la lista y el propio `<details>`. Aquí se quitan
   todos y se deja únicamente el del título de sección. */

/* 🔴 AQUI HABIA UN COMODIN:  con .
   Quitaba los filetes sobrantes, si, pero tambien el borde de la CASILLA, que
   se quedaba invisible (17x17, fondo blanco, borde rgba(0,0,0,0)). Sustituido
   por la lista concreta de contenedores que si deben ir sin borde. */
html body .itb-filtros section.facet,
html body .itb-filtros ul,
html body .itb-filtros li,
html body .itb-filtros .facet-label,
html body .itb-filtros .collapse,
html body .itb-filtros details,
html body #search_filters,
html body #search_filters_wrapper {
    border-color: transparent !important;
}

html body .itb-filtros .itb-facet__titulo,
html body .itb-filtros .facet-title {
    border-bottom: 1px solid #eee8e1 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

/* La casilla sí conserva su marco: sin él no se ve dónde hay que pulsar. */
html body .itb-filtros .custom-checkbox {
    border: 1px solid #b9b1a9 !important;
}

html body .itb-filtros .custom-checkbox:has(> input:checked) {
    border-color: #16110f !important;
    background: #16110f !important;
}

/* Los filetes del selector de cantidad no son «bordes de faceta»: se reponen
   porque la regla de arriba los alcanzaría si el selector viviera dentro. */
html body .itb-filtros .itb-qty,
html body .itb-filtros .stsb_qty_wrap { border-color: #16110f !important; }

/* 🔴 La casilla VUELVE A VERSE. La limpieza de bordes de las facetas usaba
   `.itb-filtros * { border-color: transparent }` y alcanzaba también a la
   casilla: seguía ahí, con sus 17x17 y su fondo blanco, pero con el borde
   transparente — o sea, invisible. Se repone con clase duplicada para que gane
   a la regla del comodín pase lo que pase. */

html body .itb-filtros .custom-checkbox.custom-checkbox {
    border: 1px solid #8a8078 !important;
    border-color: #8a8078 !important;
    background: #fff !important;
    width: 17px !important;
    height: 17px !important;
    display: inline-block !important;
    position: relative !important;
    flex: 0 0 17px !important;
    box-sizing: border-box !important;
}

html body .itb-filtros .custom-checkbox.custom-checkbox:has(> input:checked) {
    background: #16110f !important;
    border-color: #16110f !important;
}

/* Y la marca blanca dentro, cuando está seleccionada. */
html body .itb-filtros .custom-checkbox.custom-checkbox > input:checked + span {
    border-color: #fff !important;
    transform: rotate(45deg) scale(1) !important;
}

html body .itb-filtros .facet-label:hover .custom-checkbox.custom-checkbox {
    border-color: #16110f !important;
}

/* El navegador no debe recolocar la vista por su cuenta cuando cambia la altura
   del listado: el anclaje automático es lo que producía el tirón. Se desactiva
   solo en la zona del listado, donde el reemplazo lo gobierna el JS. */
html body .stsb_grid_wrapper,
html body .itb-cargando,
html body #js-product-list { overflow-anchor: none; }

/* Mientras carga, la rejilla se atenúa un poco en vez de desaparecer: así no
   hay hueco en blanco ni cambio de altura perceptible. */
html body .itb-cargando { opacity: .55; transition: opacity .15s ease; pointer-events: none; }

/* ===========================================================================
   MENÚ LATERAL DEL MÓVIL — submenús a la izquierda, sin filetes, más compactos
   =========================================================================== */

/* Los submenús se alinean a la izquierda con una sangría clara y pierden los
   filetes: la jerarquía la marca la sangría, no una parrilla de líneas. */
html body [data-itb-menu] .e-n-accordion-item .e-n-accordion-item,
html body [data-itb-menu] .e-n-accordion-item-content .e-n-accordion-item {
    border: 0 !important;
    padding-left: 1rem !important;
    margin: 0 !important;
}

html body [data-itb-menu] .e-n-accordion-item .e-n-accordion-item .e-n-accordion-item-title,
html body [data-itb-menu] .e-n-accordion-item-content a {
    padding-block: .38rem !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    font-weight: 400 !important;
    font-size: .88rem !important;
    border: 0 !important;
}

html body [data-itb-menu] .e-n-accordion-item-content,
html body [data-itb-menu] .e-n-accordion-item-content * {
    border: 0 !important;
    text-align: left !important;
}

/* El filete solo entre entradas de PRIMER nivel. */
html body [data-itb-menu] > .e-n-accordion-item {
    border-bottom: 1px solid #f0ebe5 !important;
}

/* ===========================================================================
   DESPLEGABLE DEL BUSCADOR — sin retícula gris, fotos legibles, etiquetas rectas
   ===========================================================================
   Jolisearch pinta cada resultado con filetes por todas partes, miniaturas
   diminutas y etiquetas con esquinas y sombras propias. Aquí se lleva al mismo
   idioma que el resto de la tienda: una sola línea entre resultados, foto
   cuadrada sobre el crema del catálogo, y etiquetas rectangulares. */

html body .jolisearch-dropdown *,
html body .jolisearch-container * {
    border-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html body .jolisearch-dropdown li + li {
    border-top: 1px solid #f2ece5 !important;
}

/* Miniaturas: cuadradas, con aire y sobre el fondo de la casa; antes salían
   estiradas y a un tamaño en el que no se distinguía el producto. */
html body .jolisearch-dropdown img {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    object-fit: contain !important;
    background: #fcf8f5 !important;
    mix-blend-mode: multiply;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 3px !important;
}

/* Etiquetas rectangulares, sin el estilo propio del módulo. */
html body .jolisearch-dropdown .badge,
html body .jolisearch-dropdown [class*="label"],
html body .jolisearch-dropdown [class*="tag"],
html body .jolisearch-dropdown [class*="flag"] {
    display: inline-block !important;
    border-radius: 0 !important;
    background: #16110f !important;
    color: #fff !important;
    font-size: .6rem !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .25rem .5rem !important;
    border: 0 !important;
}

html body .jolisearch-dropdown .jolisearch-header,
html body .jolisearch-dropdown .jolisearch-title {
    background: #faf7f4 !important;
    border-bottom: 1px solid #f0ebe5 !important;
    font-size: .66rem !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8a8078 !important;
    padding: .5rem .85rem !important;
}

/* ===========================================================================
   MENÚ LATERAL: el LOGO oficial, no el nombre en texto
   ===========================================================================
   El pseudo-elemento con la palabra «HARPO» era un apaño para salir del paso
   cuando el clon del SVG salía vacío. Aquí se usa el logo real de la tienda
   (`logo-1764687277.jpg`) como fondo, con su proporción, y el texto se oculta
   dejándolo accesible para los lectores de pantalla. */

html body [data-itb-menu]::before {
    content: 'HARPO';
    display: block;
    height: 52px;
    margin: .3rem auto .4rem;
    background-image: url('/img/logo-1764687277.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-bottom: 1px solid #eee8e1;
    padding-bottom: 1rem;
    /* El texto sigue ahí para quien navega con lector de pantalla, pero no se
       pinta encima del logo. */
    font-size: 0;
    color: transparent;
}

/* El enlace invisible que hace pulsable el logo del menú. */
html body .itb-menu-inicio {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 68px;
    z-index: 2;
    display: block;
}

html body [data-itb-menu] { position: relative; }

/* ===========================================================================
   HOJA DE ORDENACIÓN: más alta y con el cierre de la casa
   ===========================================================================
   Se pidió más altura —las ocho opciones quedaban apretadas contra el borde—
   y que la X sea la misma que usa el resto de la web: cuadrada, con filete
   fino, arriba a la derecha. */

html body .itb-orden {
    padding: .9rem 0 1.1rem !important;
    max-height: 85vh !important;
    min-height: 58vh;
    border-top: 1px solid #16110f !important;
}

html body .itb-orden__titulo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 1.1rem .7rem !important;
    margin: 0 0 .4rem !important;
    border-bottom: 1px solid #f0ebe5;
    font-size: .74rem !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8a8078 !important;
}

/* La X: misma forma que la del buscador y la de los filtros. */
html body .itb-orden__x {
    order: 2;
    margin-left: auto;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 1px solid #d8d1c9 !important;
    border-radius: 0 !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    color: #16110f !important;
    cursor: pointer;
    padding: 0 !important;
}

html body .itb-orden__x:hover { border-color: #16110f !important; background: #faf7f4 !important; }

html body .itb-orden__opcion {
    padding: .82rem 1.1rem !important;
    font-size: .93rem !important;
}

/* ===========================================================================
   CARRUSEL DE CATEGORÍAS: el rótulo deja de ir pegado al borde
   ===========================================================================
   El nombre sobre el velo oscuro arrancaba a 15px del borde izquierdo de la
   tarjeta. Se le da una sangría proporcional al ancho, que aguanta cualquier
   tamaño de pantalla, y se centra verticalmente en su banda. */

html body .elementor-2165 .stsb_cm_category_name,
html body .elementor-2165 .stsb_cm_category_name a,
html body .elementor-2165 h2,
html body .elementor-2165 h3,
html body [class*="cm-category"] .stsb_cm_category_name {
    padding-left: clamp(1.1rem, 7%, 2.2rem) !important;
    padding-right: clamp(1.1rem, 7%, 2.2rem) !important;
    text-align: left !important;
}

/* Flecha sin recorrido: se ve apagada en vez de parecer rota. */
html body .itb-flecha--muerta {
    opacity: .35 !important;
    pointer-events: none;
    cursor: default !important;
}

/* ===========================================================================
   PÁGINA 404 — centrada y con salida
   ===========================================================================
   Una página de error es una bifurcación: quien llega ahí se va o sigue
   comprando. Se centra el contenido, se le da aire y se deja claro qué hacer
   después, en vez de un mensaje suelto pegado a la izquierda. */

body#pagenotfound #content-wrapper,
body#pagenotfound #main,
body.page-not-found #content-wrapper,
body#pagenotfound .page-content {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    max-width: 640px;
    margin-inline: auto !important;
    padding: clamp(2.5rem, 8vw, 5rem) 1.2rem !important;
    min-height: 46vh;
}

body#pagenotfound h1,
body.page-not-found h1 {
    font-size: clamp(1.5rem, 4.5vw, 2.2rem) !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 .8rem !important;
    text-align: center !important;
}

body#pagenotfound p,
body.page-not-found p {
    font-size: .98rem !important;
    line-height: 1.7 !important;
    color: #6b635c !important;
    text-align: center !important;
    margin: 0 0 1.4rem !important;
}

/* El buscador de la página de error, a un tamaño usable y centrado. */
body#pagenotfound .search-widget,
body#pagenotfound form,
body.page-not-found .search-widget {
    width: min(460px, 100%);
    margin: 0 auto 1.6rem !important;
}

body#pagenotfound input[type="text"],
body#pagenotfound input[type="search"] {
    width: 100% !important;
    height: 48px;
    border: 1px solid #d8d1c9 !important;
    border-radius: 0 !important;
    padding: 0 .9rem !important;
    font-size: .95rem;
}

/* Botones de salida: volver a la portada y ver el catálogo. */
body#pagenotfound .btn,
body#pagenotfound a.btn-primary,
body.page-not-found .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .8rem 1.8rem !important;
    background: #16110f !important;
    color: #fff !important;
    border: 1px solid #16110f !important;
    border-radius: 0 !important;
    font-size: .82rem !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none !important;
}

body#pagenotfound .btn:hover { background: #000 !important; }

/* Las listas de enlaces sugeridos, en línea y centradas. */
body#pagenotfound ul,
body.page-not-found ul {
    list-style: none;
    padding: 0 !important;
    margin: 1.2rem 0 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.2rem;
    justify-content: center;
}

body#pagenotfound li { margin: 0 !important; }

/* Los chips de filtros activos en móvil: se veían como botones vacíos porque la
   limpieza de bordes/colores del panel alcanzaba también a su texto. Aquí se les
   devuelve color y tamaño propios, con la clase duplicada para que ganen. */
html body .itb-chip.itb-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    max-width: 100%;
    background: #f4efe9 !important;
    border: 1px solid #cfc9c2 !important;
    border-radius: 0 !important;
    padding: .38rem .6rem !important;
    font-size: .76rem !important;
    line-height: 1.2 !important;
    color: #16110f !important;
    cursor: pointer;
}

html body .itb-chip.itb-chip > span {
    color: #16110f !important;
    font-size: .76rem !important;
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block !important;
}

html body .itb-chip.itb-chip > b {
    color: #16110f !important;
    opacity: .55;
    font-weight: 400 !important;
    font-size: .9rem !important;
    display: inline-block !important;
}

html body .itb-chip.itb-chip:hover { border-color: #16110f !important; background: #efe8e1 !important; }

/* El botón de aplicar y el de limpiar, con su texto visible. */
html body .itb-filtros__aplicar.itb-filtros__aplicar {
    background: #16110f !important;
    color: #fff !important;
    border: 1px solid #16110f !important;
    font-size: .82rem !important;
    letter-spacing: .1em;
    text-transform: uppercase;
}

html body .itb-filtros__limpiar.itb-filtros__limpiar {
    background: #fff !important;
    color: #16110f !important;
    border: 1px solid #cfc9c2 !important;
    font-size: .76rem !important;
}

/* ===========================================================================
   ⭐ MEGAMENÚ A MEDIDA — rejilla propia
   ===========================================================================
   Estructura real, medida a 1440px con el panel abierto:

       panel .................. 1240 x 425
         e-con-inner .......... 1176 x 360
           fila ............... 1112 x 320
             col Maquillaje ...   84px
             col FX ...........  134px
             col Posticería ...  119px
             col Aerografía ...  121px
             col «Más» ........   48px   ← por eso «Pincelería» salía cortada
             imagen ...........  506px   ← el 45% del panel para una foto

   Ni una sola columna medía lo mismo que otra y la imagen se llevaba casi la
   mitad. Aquí se impone una rejilla: las cinco columnas de enlaces reparten a
   partes iguales y la imagen toma un ancho fijo y razonable.

   El selector va por `[class*="elementor-widget-update"]` porque es la clase
   real de cada columna: `.e-con` —que es lo que se usaba antes— no existe en
   este nivel, y por eso las reglas anteriores no llegaban a aplicarse. */

@media (min-width: 992px) {
    /* La fila que contiene las columnas. */
    html body .e-n-tabs-content .e-con-inner > [class*="elementor-widget-update"] {
        display: flex !important;
        align-items: flex-start !important;
        gap: 1.6rem !important;
        width: 100% !important;
    }

    /* Cada columna de enlaces: mismo ancho, sin encogerse por su contenido. */
    html body .e-n-tabs-content .e-con-inner > [class*="elementor-widget-update"] > [class*="elementor-widget-update"] {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding-inline: 0 !important;
    }

    /* La columna que solo lleva la imagen no compite con el texto: ancho fijo. */
    html body .e-n-tabs-content [class*="elementor-widget-update"]:has(> .elementor-widget-image),
    html body .e-n-tabs-content [class*="elementor-widget-update"]:has(.elementor-widget-image) {
        flex: 0 0 300px !important;
        max-width: 300px !important;
    }

    html body .e-n-tabs-content .elementor-widget-image img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* Títulos de columna: con su filete y sin posibilidad de solaparse con el
       de al lado, que era lo que producía el «MaquillajFX». */
    html body .e-n-tabs-content h2,
    html body .e-n-tabs-content h3,
    html body .e-n-tabs-content h4,
    html body .e-n-tabs-content .elementor-heading-title {
        display: block !important;
        width: 100% !important;
        font-size: .95rem !important;
        line-height: 1.3 !important;
        letter-spacing: .05em;
        color: #16110f !important;
        margin: 0 0 .7rem !important;
        padding: 0 0 .5rem !important;
        border-bottom: 1px solid #eee8e1;
        white-space: normal !important;
        overflow-wrap: break-word;
    }

    /* Enlaces: uno por línea, legibles, sin partirse a mitad de palabra. */
    html body .e-n-tabs-content a {
        display: block !important;
        width: 100% !important;
        font-size: .85rem !important;
        line-height: 1.45 !important;
        padding: .26rem 0 !important;
        color: #2a2320 !important;
        text-decoration: none !important;
        overflow-wrap: break-word;
    }

    html body .e-n-tabs-content a:hover {
        color: #16110f !important;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* El panel abierto: ancho del sitio y aire suficiente. */
    html body .e-n-tabs-content > *:not([aria-hidden="true"]) {
        padding-block: 1.8rem 2.2rem !important;
    }

    html body .e-n-tabs-content .e-con-inner {
        max-width: 1240px !important;
        margin-inline: auto !important;
        padding-inline: 1.5rem !important;
    }
}

/* Remates del megamenú tras verlo montado:
   · «Más» salía en gris claro mientras los otros cuatro títulos iban en negro:
     es un título de columna como los demás y debe leerse igual.
   · La imagen se quedó en 167px al repartir por igual; se le da su ancho propio
     sin robárselo al texto. */
@media (min-width: 992px) {
    html body .e-n-tabs-content h2,
    html body .e-n-tabs-content h3,
    html body .e-n-tabs-content h4,
    html body .e-n-tabs-content .elementor-heading-title,
    html body .e-n-tabs-content .elementor-heading-title a {
        color: #16110f !important;
        font-weight: 600 !important;
    }

    /* La columna de la imagen: se reconoce porque contiene una <img> y ningún
       enlace de menú. */
    html body .e-n-tabs-content .e-con-inner > [class*="elementor-widget-update"] > [class*="elementor-widget-update"]:has(img) {
        flex: 0 0 268px !important;
        max-width: 268px !important;
    }

    html body .e-n-tabs-content [class*="elementor-widget-update"]:has(img) img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
}

/* ===========================================================================
   SUGERENCIAS DEL BUSCADOR EN DOS COLUMNAS
   ===========================================================================
   Izquierda: dónde buscar (categorías y marcas). Derecha: lo que más coincide
   (productos). Abajo: la salida a todos los resultados. */

html body .jolisearch-dropdown .itb-sug {
    display: grid !important;
    grid-template-columns: 240px 1fr;
    grid-template-areas: 'lado principal' 'pie pie';
    gap: 0 1.5rem;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
}

html body .itb-sug__lado {
    grid-area: lado;
    border-right: 1px solid #f0ebe5;
    padding: .6rem .9rem .8rem;
    min-width: 0;
}

html body .itb-sug__principal {
    grid-area: principal;
    padding: .6rem .9rem .8rem 0;
    min-width: 0;
}

html body .itb-sug__pie {
    grid-area: pie;
    border-top: 1px solid #f0ebe5;
    padding: .7rem .9rem;
    text-align: center;
    background: #faf7f4;
}

html body .itb-sug__ver {
    display: inline-block;
    padding: .6rem 1.4rem;
    background: #16110f !important;
    color: #fff !important;
    border: 1px solid #16110f;
    border-radius: 0;
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none !important;
}

html body .itb-sug__ver:hover { background: #000 !important; }

/* Dentro de cada lado, los resultados siguen siendo filas normales. */
html body .itb-sug li { list-style: none; border: 0 !important; }
html body .itb-sug .itb-sug__principal li + li { border-top: 1px solid #f7f2ec !important; }

html body .itb-sug .jolisearch-link {
    display: flex !important;
    align-items: center;
    gap: .7rem;
    padding: .45rem .3rem !important;
    color: #2a2320 !important;
    text-decoration: none !important;
}

html body .itb-sug .jolisearch-link:hover { background: #faf7f4; }

/* En el lado izquierdo no hay foto: las categorías y marcas van como lista. */
html body .itb-sug__lado .jolisearch-link { padding: .38rem .3rem !important; font-size: .85rem; }
html body .itb-sug__lado img { display: none !important; }

@media (max-width: 767px) {
    /* En móvil vuelve a una sola columna: 240px de lado no caben. */
    html body .jolisearch-dropdown .itb-sug {
        grid-template-columns: 1fr;
        grid-template-areas: 'principal' 'lado' 'pie';
    }

    html body .itb-sug__lado {
        border-right: 0;
        border-top: 1px solid #f0ebe5;
        padding: .6rem .9rem;
    }

    html body .itb-sug__principal { padding: .6rem .9rem; }
}

/* Remates del desplegable, vistos ya montado:
   · Los rótulos de sección llevaban un triangulito colgando (el «estilo raro»
     de Jolisearch). Fuera: etiqueta rectangular y punto.
   · El lado izquierdo tenía tanto aire que cuatro categorías ocupaban media
     pantalla, y los productos se quedaban en la mitad del panel.  */

html body .itb-sug .jolisearch-title::before,
html body .itb-sug .jolisearch-title::after,
html body .jolisearch-dropdown .jolisearch-title::before,
html body .jolisearch-dropdown .jolisearch-title::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
}

html body .itb-sug .jolisearch-title {
    display: block !important;
    background: #16110f !important;
    color: #fff !important;
    border-radius: 0 !important;
    font-size: .64rem !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .32rem .6rem !important;
    margin: 0 0 .5rem !important;
    width: fit-content;
    box-shadow: none !important;
}

html body .itb-sug .jolisearch-section { margin: .9rem 0 .2rem !important; padding: 0 !important; }
html body .itb-sug .jolisearch-section:first-child { margin-top: 0 !important; }

/* Lado izquierdo compacto: una línea por categoría. */
html body .itb-sug__lado li { margin: 0 !important; padding: 0 !important; }
html body .itb-sug__lado .jolisearch-link {
    padding: .3rem .2rem !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: .35rem;
}

html body .itb-sug__lado .jolisearch-link > * { margin: 0 !important; }

/* Los productos aprovechan todo el ancho de su columna. */
html body .itb-sug__principal li { margin: 0 !important; }
html body .itb-sug__principal .jolisearch-link {
    width: 100% !important;
    align-items: center !important;
    gap: .8rem !important;
    padding: .5rem .3rem !important;
}

html body .itb-sug__principal .jolisearch-link img {
    flex: 0 0 54px;
    margin: 0 !important;
}

/* El texto del producto en columna, ocupando el resto. */
html body .itb-sug__principal .jolisearch-link > *:not(img) {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
}

/* Altura del desplegable: cabe más sin llegar a tapar la pantalla. */
html body .jolisearch-dropdown {
    max-height: min(70vh, 620px) !important;
}

/* El logo del menú se veía cortado por arriba: el acordeón arranca pegado al
   borde del panel y su primera línea queda bajo la franja de avisos. Se le da
   aire suficiente y se asegura que la imagen entra entera. */
html body [data-itb-menu]::before {
    height: 46px !important;
    margin: 1.1rem auto .5rem !important;
    padding-bottom: 1rem !important;
    background-size: contain !important;
    background-position: center center !important;
}

html body [data-itb-menu] { padding-top: .2rem !important; }

/* El enlace invisible que lleva a la portada, ajustado al alto real del logo. */
html body .itb-menu-inicio {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 74px !important;
    z-index: 3 !important;
    display: block !important;
}

/* «Contacta con nosotros» al FINAL del menú, después de «Mis órdenes».
   Se pidió quitarlo o dejarlo al final: se deja, porque un acceso directo a
   contacto en un menú de tienda ayuda, pero sin competir con las secciones. */
html body [data-itb-menu] ~ * a[href*="contacto"],
html body [data-itb-panel] a[href*="contacto"]:not([data-itb-menu] a) {
    order: 99;
}

html body .itb-menu-pie,
html body [data-itb-panel] .elementor-widget-button:has(a[href*="contacto"]) {
    order: 99 !important;
    margin-top: auto !important;
    padding-top: 1rem;
}

/* Checkout: alturas uniformes. Medido en móvil: los campos salían a 46 y 44, y
   los botones a 50 y 60. En una pantalla de pago, esas diferencias se leen como
   descuido justo donde el cliente decide si sigue. */
html body#checkout input[type="text"],
html body#checkout input[type="email"],
html body#checkout input[type="tel"],
html body#checkout input[type="password"],
html body#checkout input[type="number"],
html body#checkout select {
    height: 46px !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
}

/* Las casillas de conformidad conservan su tamaño: no son campos de texto. */
html body#checkout input[type="checkbox"],
html body#checkout input[type="radio"] {
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
}

html body#checkout button[type="submit"],
html body#checkout .btn-primary,
html body#checkout .btn-secondary {
    height: 52px !important;
    min-height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-block: 0 !important;
}

/* ===========================================================================
   FILA DE COMPRA ADAPTATIVA — cuando la card es estrecha, dos líneas
   ===========================================================================
   Medido en tablet (768px): la rejilla pone cuatro columnas y cada card baja a
   **166px**. Con el selector fijo a 108, al botón le quedaban 32px: «Comprar»
   no cabía ni de lejos.

   En vez de atar el arreglo a un breakpoint —que se rompe en cuanto cambie el
   número de columnas—, se permite que la fila se parta: el botón lleva un ancho
   mínimo y, si no cabe junto al selector, salta a la línea de abajo y ocupa
   todo el ancho. Así funciona en cualquier tamaño de card, hoy y mañana. */

html body .elementor-863 [class*="stsb_pm_action_button"] {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
}

html body .elementor-863 [class*="stsb_pm_action_button"] > a,
html body .elementor-863 [class*="stsb_pm_action_button"] > button {
    flex: 1 1 96px !important;
    min-width: 96px !important;
}

/* Si el botón se ha ido a su propia línea, el selector ocupa la suya entera:
   dos elementos a media línea quedarían descolgados. */
/* La regla que estiraba el selector al 100%% en tablet se RETIRA: daba 273px
   dentro de una card de 166 (desbordaba). Basta con el salto de linea: el
   selector conserva sus 108 y el boton baja y ocupa el ancho que queda. */
@media (max-width: 991px) and (min-width: 768px) {
    html body .elementor-863 [class*="stsb_pm_action_button"] > a,
    html body .elementor-863 [class*="stsb_pm_action_button"] > button {
        flex: 1 1 100%% !important;
        max-width: 100%% !important;
    }
}