/**
 * 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; }
}