/*
Theme Name: Betheme Child - Mayflux
Theme URI: https://mayflux-shop.test
Description: Tema hijo de Betheme para Mayflux Shop. Contiene las personalizaciones
             del proyecto para que sobrevivan a las actualizaciones del tema padre.
Author: Mayflux
Template: betheme
Version: 1.0.0
Text Domain: betheme-child
*/

/* ==========================================================================
   VISTA RAPIDA DE PRODUCTO (quick view)
   --------------------------------------------------------------------------
   Betheme declara en css/be.css, dentro del MISMO bloque:
       .mfn-popup .mfn-popup-content { max-height:80%; overflow:auto; ... overflow:hidden; }
   La segunda declaracion pisa a la primera, asi que el modal recorta el
   contenido sobrante sin mostrar barra de desplazamiento. El parche del tema
   (css/responsive.css) solo aplica dentro de @media (max-width:767px), por lo
   que en escritorio el modal se corta.
   ========================================================================== */

/* 1. Acotar la altura y devolver el scroll a la columna de texto */
.mfn-popup-quickview .mfn-popup-content,
.mfn-popup-quickview .mfn-popup-content-wrapper {
    max-height: min(80vh, 620px);
}

.mfn-popup-quickview .mfn-popup-content-wrapper {
    align-items: stretch;
}

.mfn-popup-quickview .mfn-popup-content-photos {
    overflow: hidden;
}

.mfn-popup-quickview .mfn-popup-content-text .mfn-popup-content-text-wrapper {
    max-height: min(80vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px 32px;
}

/* 2. El boton de compra nunca se corta: queda fijo al fondo de la columna */
.mfn-popup-quickview .mfn-product-add-to-cart {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    padding: 14px 0 4px;
    box-shadow: 0 -12px 16px -8px rgba(255, 255, 255, .95);
}

/* 3. Descripcion acotada a 2 lineas: el modal es para decidir, no para leer */
.mfn-popup-quickview .mfn-popup-content-text-wrapper .excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 20px;
}

/* 4. Jerarquia: el precio debe pesar tanto como el titulo */
.mfn-popup-quickview .mfn-popup-content-text-wrapper h3.heading {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 6px;
}

.mfn-popup-quickview .mfn-popup-content-text-wrapper p.price {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 14px;
}

/* 5. El aspa de cierre era dificil de ver sobre imagenes claras */
.mfn-popup-quickview .mfn-close-popup {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
}

/* 6. UNA SOLA TONALIDAD
   El modal mezclaba dos superficies: #F7F7F7 (la variable --mfn-woo-bg-box
   de Betheme, que es rgba(0,0,0,.03) sobre blanco) en la columna de la foto
   y el fondo general, y #FFFFFF en el panel de variaciones y la fila del
   carrito. Se unifica todo a blanco.
   No se toca .mfn-popup a secas: ahi vive la capa oscura de fondo. */
.mfn-popup-quickview .mfn-popup-content,
.mfn-popup-quickview .mfn-popup-content-wrapper,
.mfn-popup-quickview .mfn-popup-content-col,
.mfn-popup-quickview .mfn-popup-content-photos,
.mfn-popup-quickview .mfn-popup-content-text,
.mfn-popup-quickview .mfn-popup-content-text-wrapper,
.mfn-popup-quickview .mfn-quickview-slider,
.mfn-popup-quickview .mfn-qs-one,
.mfn-popup-quickview .mfn-variations-wrapper,
.mfn-popup-quickview form.cart,
.mfn-popup-quickview .product_meta {
    background: #fff;
}

/* En movil el tema ya fuerza scroll; se mantiene una sola columna */
@media only screen and (max-width: 767px) {
    .mfn-popup-quickview .mfn-popup-content,
    .mfn-popup-quickview .mfn-popup-content-wrapper,
    .mfn-popup-quickview .mfn-popup-content-text .mfn-popup-content-text-wrapper {
        max-height: 85vh;
    }
    .mfn-popup-quickview .mfn-popup-content-text .mfn-popup-content-text-wrapper {
        padding: 20px;
    }
}

/* ==========================================================================
   TONALIDAD UNICA EN TODO EL SITIO
   --------------------------------------------------------------------------
   Betheme declara #Subheader dos veces y la segunda pisa el ajuste de las
   Opciones del tema:
       #Subheader { background-color: rgba(255,255,255,1) }   <- opciones
       #Subheader { background-color: rgba(0,0,0,.02) }       <- cableada, gana
   Ese 2% de negro sobre blanco da #FAFAFA, y creaba una tercera franja entre
   la cabecera (#FFFFFF) y el cuerpo. Se fuerza blanco.
   ========================================================================== */
#Subheader {
    background-color: #fff;
}

/* La galeria del producto tambien traia su propio gris */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    background-color: #fff;
}

/* ==========================================================================
   FICHA DE PRODUCTO
   ========================================================================== */

/* La franja superior mostraba "Tienda" como titulo de pagina: es redundante
   (el nombre del producto ya va grande justo debajo) y consumia ~170px.
   Se oculta solo el titulo y se conserva la miga de pan, que si es navegacion. */
.single-product #Subheader .title {
    display: none;
}

.single-product #Subheader {
    padding-top: 18px;
    padding-bottom: 18px;
}

/* El ultimo elemento de la miga arrastraba un separador ">" sobrante */
#Subheader ul.breadcrumbs li:last-child span {
    display: none;
}

/* ==========================================================================
   SISTEMA DE RADIOS
   --------------------------------------------------------------------------
   El sitio mezclaba SIETE radios distintos (0, 3, 4, 5, 6, 8 y 16px) y los
   elementos mas visibles de la ficha estaban en cero: boton de compra,
   botones de variante, galeria y badge de oferta. De ahi la sensacion de
   "todo cuadrado".
   Se define una escala de tres pasos, reutilizando los valores que la demo
   ya usaba (8 y 16) para no introducir tonos nuevos.
   ========================================================================== */
:root {
    --uf-radius-sm: 8px;    /* badges, chips, meta */
    --uf-radius-md: 12px;   /* botones, variantes, cantidad */
    --uf-radius-lg: 16px;   /* tarjetas, galeria, imagenes */
}

/* --- Botones --- */
.woocommerce .single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt,
.mfn-popup-quickview .single_add_to_cart_button {
    border-radius: var(--uf-radius-md);
}

/* --- Botones de variante (1 TB, 13.3", 512 GB...) --- */
.mfn-vr-options.mfn-vr-labels li a,
.mfn-vr-options li a {
    border-radius: var(--uf-radius-md);
}

/* --- Cantidad --- */
.woocommerce .quantity,
.woocommerce div.product form.cart div.quantity {
    border-radius: var(--uf-radius-md);
    overflow: hidden;
}

/* --- Badge de oferta --- */
.woocommerce span.onsale,
.woocommerce span.onsale.onsale-label {
    border-radius: var(--uf-radius-sm);
}

/* --- Meta y SKU --- */
.woocommerce div.product .product_meta > span,
.mfn-popup-quickview .product_meta > span {
    border-radius: var(--uf-radius-sm);
}

/* --- Galeria e imagenes de producto --- */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images img,
.woocommerce ul.products li.product img,
.mfn-popup-quickview .mfn-qs-one img {
    border-radius: var(--uf-radius-lg);
}

/* --- Tarjetas de producto y de categoria --- */
.woocommerce ul.products li.product,
.shop_categories ul.products li.product-category a img {
    border-radius: var(--uf-radius-lg);
}

/* --- Campos de formulario y buscador --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.mfn-header-search input[type="text"] {
    border-radius: var(--uf-radius-md);
}

/* ==========================================================================
   MICROCOPY DE VARIANTES
   --------------------------------------------------------------------------
   En un producto variable WooCommerce deshabilita "Anadir al carrito" hasta
   elegir todas las variantes, pero no explica por que. Con variable-swatches
   activo Betheme ademas oculta la tabla nativa y con ella el enlace "Limpiar",
   asi que el usuario solo ve un boton palido y lo lee como "agotado".

   El contenedor .woocommerce-variation-add-to-cart es un flex de una sola
   linea. Meter el aviso como pseudo-elemento dentro del flujo lo convertia en
   un item mas: al 100%% comprimia el boton, y con flex-wrap partia la fila en
   tres. Se saca del flujo con posicionamiento absoluto y se reserva el hueco
   con padding-top, dejando la fila original intacta.
   ========================================================================== */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart-disabled,
.mfn-popup-quickview form.cart .woocommerce-variation-add-to-cart-disabled {
    position: relative;
    padding-top: 26px;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart-disabled::before,
.mfn-popup-quickview form.cart .woocommerce-variation-add-to-cart-disabled::before {
    content: "Elige las opciones para continuar";
    position: absolute;
    top: 0;
    left: 0;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    color: #6D73C0;
}

/* El boton deshabilitado debe leerse como "falta un paso", no como "agotado" */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button,
.mfn-popup-quickview form.cart .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button {
    opacity: .55;
    cursor: not-allowed;
}

/* ==========================================================================
   FICHA DE PRODUCTO ALINEADA A LA IZQUIERDA
   --------------------------------------------------------------------------
   Betheme centra todo el resumen en su estilo "default":
       .woocommerce .product.style-default .entry-summary { text-align:center }
   En una ficha de producto eso perjudica la lectura: el ojo pierde el punto de
   retorno en cada linea y la jerarquia entre titulo, precio y variantes se
   difumina. Son TRES reglas las que hay que revertir, y una es de flexbox.
   ========================================================================== */
.woocommerce .product.style-default .entry-summary,
.woocommerce .product.style-default .entry-summary .share-simple-wrapper,
.woocommerce .product.style-default .entry-summary .product_meta {
    text-align: left;
}

.woocommerce .product.style-default .entry-summary .mfn-variations-wrapper .mfn-vr {
    justify-content: flex-start;
}

.woocommerce .product.style-default .entry-summary .mfn-variations-wrapper .mfn-vr-row {
    justify-content: flex-start;
    gap: 16px;
}

.woocommerce .product.style-default .entry-summary .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 0;
}

/* ==========================================================================
   BARRA INFERIOR FIJA EN MOVIL
   --------------------------------------------------------------------------
   .mfn-footer-stickymenu es fija y se superpone al final del contenido: en la
   ficha tapaba la fila de categorias. Se reserva su altura al final del body.
   No se toca el widget de chat de mosend: lo inyecta JavaScript y no expone
   un selector estable en el HTML servido.
   ========================================================================== */
@media only screen and (max-width: 767px) {
    body:has(.mfn-footer-stickymenu) #Footer,
    body:has(.mfn-footer-stickymenu) .mfn-footer-stickymenu ~ #Footer {
        padding-bottom: 72px;
    }
    /* Respaldo para navegadores sin :has() */
    .mfn-footer-stickymenu {
        z-index: 9998;
    }
    #Footer {
        padding-bottom: 72px;
    }
}

/* ==========================================================================
   LOGO DEL PIE
   --------------------------------------------------------------------------
   Sustituye al bloque del telefono de la demo.
   Betheme fuerza el ancho de las imagenes SVG con:
       .image_item.image_frame.svg img { width:100% }      -> 3 clases
   Un selector de una sola clase pierde, y la variante con #Footer no sirve
   porque este pie es una plantilla de BeBuilder y no vive dentro de #Footer.
   Se iguala el contexto de Betheme y se suma la clase del elemento.
   ========================================================================== */
.mcb-item-ufpielogo .image_item.image_frame.svg,
.mcb-item-ufpielogo .image_item.image_frame.svg img {
    width: 170px;
    max-width: 100%;
    height: auto;
    display: block;
}

@media only screen and (max-width: 767px) {
    .mcb-item-ufpielogo .image_item.image_frame.svg,
    .mcb-item-ufpielogo .image_item.image_frame.svg img {
        width: 145px;
    }
}

/* ==========================================================================
   PAGINA 404
   --------------------------------------------------------------------------
   El texto "Verifica la direccion e intentalo de nuevo o" y el boton "ir al
   inicio" se renderizan en linea y se solapaban. Se separan y se alinean.
   ========================================================================== */
.error404 .error404-text,
#Error_404 .error404-text {
    display: block;
    margin-bottom: 14px;
}

.error404 .error404-text a,
.error404 .error404-text .button,
#Error_404 .button {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}

#Error_404 .error_pic,
.error404 .error_pic {
    max-width: 160px;
}

/* ==========================================================================
   FILTROS DE LA TIENDA EN MOVIL
   --------------------------------------------------------------------------
   La columna de filtros suma ~769px de alto (precio, marca, color,
   almacenamiento, tamano de pantalla, disponibilidad). En movil se apila
   encima de la rejilla y empuja los productos casi una pantalla completa
   hacia abajo. Se colapsa tras un boton, que es el patron habitual en
   comercio movil.
   El boton lo inyecta functions.php; aqui solo su aspecto y el plegado.
   ========================================================================== */
.uf-filtros-toggle {
    display: none;
}

@media only screen and (max-width: 767px) {
    .uf-filtros-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0 0 16px;
        padding: 13px 16px;
        border: 1px solid #E4E4EA;
        border-radius: var(--uf-radius-md, 12px);
        background: #fff;
        color: #0B1A48;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }

    .uf-filtros-toggle::after {
        content: "";
        width: 9px;
        height: 9px;
        border-right: 2px solid #2A27E9;
        border-bottom: 2px solid #2A27E9;
        transform: rotate(45deg) translateY(-2px);
        transition: transform .18s ease;
    }

    .uf-filtros-toggle[aria-expanded="true"]::after {
        transform: rotate(-135deg) translateY(-2px);
    }

    /* La columna de filtros arranca plegada */
    .column_sidebar_widget[data-uf-filtros="cerrado"] .widget,
    .column_sidebar_widget[data-uf-filtros="cerrado"] .mcb-column-inner > *:not(.uf-filtros-toggle) {
        display: none;
    }

    .column_sidebar_widget .mcb-column-inner {
        margin-bottom: 0;
    }
}


/* ==========================================================================
   10 · PÁGINAS LEGALES  (envíos, devoluciones, términos, privacidad)
   Marcado en wp-content/mu-plugins/urbanflux-datos-empresa.php + contenido
   clásico de las páginas. Contenedor: .uf-legal
   ========================================================================== */

.uf-legal {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 0 20px;
    font-size: 16px;
    line-height: 1.75;
    color: #2c3242;
}

.uf-legal p,
.uf-legal ul,
.uf-legal ol {
    margin: 0 0 18px;
}

.uf-legal a {
    color: #2a27e9;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.uf-legal a:hover {
    color: #0b1a48;
}

/* --- Cabecera del documento --- */

.uf-legal-meta {
    font-size: 13px;
    letter-spacing: .02em;
    color: #7a8194;
    padding-bottom: 18px;
    border-bottom: 1px solid #e8eaf0;
    margin-bottom: 26px !important;
}

.uf-legal-intro {
    font-size: 19px;
    line-height: 1.65;
    color: #0b1a48;
    margin-bottom: 32px !important;
}

/* --- Índice --- */

.uf-legal-indice {
    background: #f6f7fb;
    border-radius: var(--uf-radius-lg, 16px);
    padding: 26px 30px 20px;
    margin-bottom: 44px;
}

.uf-legal .uf-legal-indice ol {
    margin: 0 !important;
    padding: 0;
    list-style: none;
    counter-reset: uf-idx;
    columns: 2;
    column-gap: 34px;
}

.uf-legal .uf-legal-indice li {
    counter-increment: uf-idx;
    break-inside: avoid;
    padding: 4px 0 4px 26px;
    position: relative;
    font-size: 15px;
    line-height: 1.5;
}

.uf-legal .uf-legal-indice li::before {
    content: counter(uf-idx);
    position: absolute;
    left: 0;
    top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #2a27e9;
    background: #fff;
    border-radius: 50%;
    width: 19px;
    height: 19px;
    line-height: 19px;
    text-align: center;
}

.uf-legal .uf-legal-indice a {
    color: #0b1a48;
    text-decoration: none;
}

.uf-legal .uf-legal-indice a:hover {
    color: #2a27e9;
    text-decoration: underline;
}

/* --- Títulos --- */

.uf-legal h2 {
    font-size: 25px;
    line-height: 1.3;
    color: #0b1a48;
    margin: 52px 0 18px;
    padding-top: 26px;
    border-top: 2px solid #0b1a48;
    scroll-margin-top: 130px;
}

.uf-legal h2:first-of-type {
    margin-top: 0;
}

.uf-legal h3 {
    font-size: 18px;
    line-height: 1.4;
    color: #0b1a48;
    margin: 34px 0 12px;
    scroll-margin-top: 130px;
}

/* --- Listas --- */

.uf-legal ul {
    list-style: none;
    padding-left: 0;
}

.uf-legal ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px;
}

.uf-legal ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2a27e9;
}

.uf-legal ol {
    padding-left: 20px;
}

.uf-legal ol li {
    margin-bottom: 9px;
    padding-left: 6px;
}

.uf-legal li::marker {
    color: #2a27e9;
    font-weight: 700;
}

/* --- Bloque destacado --- */

.uf-legal-destacado {
    background: #f2f2ff;
    border-left: 3px solid #2a27e9;
    border-radius: 0 var(--uf-radius-md, 12px) var(--uf-radius-md, 12px) 0;
    padding: 18px 24px;
    margin: 26px 0 !important;
    color: #0b1a48;
}

/* --- Tablas --- */

.uf-legal table.uf-tabla {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0 30px;
    font-size: 15px;
}

.uf-legal table.uf-tabla th,
.uf-legal table.uf-tabla td {
    text-align: left;
    padding: 13px 16px;
    border-bottom: 1px solid #e8eaf0;
    /* Betheme pinta un border-right en cada celda; aquí sobra. */
    border-right: none;
    vertical-align: top;
}

.uf-legal table.uf-tabla thead th {
    background: #0b1a48;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-bottom: none;
}

.uf-legal table.uf-tabla thead th:first-child { border-radius: var(--uf-radius-sm, 8px) 0 0 0; }
.uf-legal table.uf-tabla thead th:last-child  { border-radius: 0 var(--uf-radius-sm, 8px) 0 0; }

.uf-legal table.uf-tabla tbody th {
    font-weight: 600;
    color: #0b1a48;
    width: 34%;
}

.uf-legal table.uf-tabla tbody tr:last-child th,
.uf-legal table.uf-tabla tbody tr:last-child td { border-bottom: none; }

/* --- Firma --- */

.uf-legal-firma {
    margin-top: 46px !important;
    padding-top: 22px;
    border-top: 1px solid #e8eaf0;
    font-size: 13px;
    color: #7a8194;
}

/* --- Dato pendiente de entrega por el cliente --- */

.uf-pendiente {
    background: #fff4d6;
    color: #7a5600;
    border-bottom: 1px dashed #d8a400;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .92em;
    font-weight: 600;
    white-space: nowrap;
}

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

@media (max-width: 767px) {

    .uf-legal {
        font-size: 15.5px;
    }

    .uf-legal-intro {
        font-size: 17px;
    }

    .uf-legal-indice {
        padding: 20px 22px 16px;
        margin-bottom: 34px;
    }

    .uf-legal .uf-legal-indice ol {
        columns: 1;
    }

    .uf-legal h2 {
        font-size: 21px;
        margin-top: 40px;
        padding-top: 22px;
        scroll-margin-top: 90px;
    }

    .uf-legal h3 {
        scroll-margin-top: 90px;
    }

    /* La tabla se desplaza dentro de su caja, la página nunca en horizontal. */
    .uf-legal table.uf-tabla {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .uf-legal table.uf-tabla td,
    .uf-legal table.uf-tabla th {
        white-space: normal;
        min-width: 150px;
    }
}


/* ==========================================================================
   11 · FICHA TÉCNICA DE PRODUCTO
   Tabla generada en la descripción de cada producto. Misma especificidad
   reforzada que las tablas legales: Betheme trae
   `.style-simple table:not(.recaptchatable) th { background: none }` (0,2,2).
   ========================================================================== */

table.uf-ficha-tecnica {
    width: 100%;
    max-width: 640px;
    border-collapse: collapse;
    margin: 26px 0 28px;
    font-size: 15px;
    border: 1px solid #e8eaf0;
    border-radius: var(--uf-radius-md, 12px);
    overflow: hidden;
}

table.uf-ficha-tecnica th,
table.uf-ficha-tecnica td {
    text-align: left;
    padding: 12px 18px;
    border-bottom: 1px solid #eef0f5;
    border-right: none;
    vertical-align: top;
    background: none;
}

/* `.style-simple table:not(.recaptchatable) th {background:none}` (0,2,2) le
   gana a `table.uf-ficha-tecnica th` (0,1,2). El #Content de Betheme envuelve
   el contenido del producto, así que lo usamos para ganar el pulso. */
#Content table.uf-ficha-tecnica th {
    width: 38%;
    font-weight: 600;
    color: #0b1a48;
    background: #f8f9fc;
}

table.uf-ficha-tecnica tr:last-child th,
table.uf-ficha-tecnica tr:last-child td {
    border-bottom: none;
}

@media (max-width: 767px) {

    table.uf-ficha-tecnica {
        font-size: 14.5px;
    }

    table.uf-ficha-tecnica th,
    table.uf-ficha-tecnica td {
        padding: 10px 13px;
    }

    table.uf-ficha-tecnica th {
        width: 42%;
    }
}


/* ==========================================================================
   12 · PÁGINA 404
   Contenido en la página «Página no encontrada», asignada en
   Betheme → error404-page. Al definirla, Betheme deja de añadir la clase
   `body.default-404`, que era la que ocultaba cabecera y pie con
   `body.error404.default-404 header, ... footer { display: none }`.
   ========================================================================== */

.uf-404 {
    max-width: 660px;
    margin: 0 auto;
    padding: 30px 0 40px;
    text-align: center;
}

.uf-404-codigo {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #2a27e9;
    margin: 0 0 14px !important;
}

.uf-404-titulo {
    font-size: clamp(1.9rem, 4.4vw, 2.6rem);
    line-height: 1.15;
    color: #0b1a48;
    margin: 0 0 16px !important;
}

.uf-404-texto {
    font-size: 17px;
    line-height: 1.6;
    color: #5b6478;
    margin: 0 auto 34px !important;
    max-width: 46ch;
}

/* --- Buscador --- */

.uf-404-buscador {
    display: flex;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto 30px;
}

.uf-404-buscador input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0 18px;
    font-size: 16px;
    color: #0b1a48;
    background: #fff;
    border: 1px solid #d9dde8;
    border-radius: var(--uf-radius-md, 12px);
}

.uf-404-buscador input[type="search"]:focus {
    outline: none;
    border-color: #2a27e9;
    box-shadow: 0 0 0 3px rgba(42, 39, 233, .13);
}

.uf-404-buscador button {
    flex: 0 0 auto;
    height: 52px;
    padding: 0 26px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: #2a27e9;
    border: none;
    border-radius: var(--uf-radius-md, 12px);
    cursor: pointer;
    transition: background .18s ease;
}

.uf-404-buscador button:hover { background: #120fbf; }

.uf-404-buscador button:focus-visible {
    outline: 2px solid #0b1a48;
    outline-offset: 2px;
}

/* --- Categorías --- */

.uf-404-o {
    font-size: 14px;
    color: #8a92a6;
    margin: 0 0 16px !important;
}

.uf-404-categorias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-bottom: 36px;
}

.uf-404-categorias a {
    display: inline-block;
    padding: 9px 17px;
    font-size: 14.5px;
    font-weight: 500;
    color: #0b1a48;
    background: #f2f4f9;
    border-radius: 999px;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.uf-404-categorias a:hover {
    background: #2a27e9;
    color: #fff;
}

.uf-404-categorias a.uf-404-todo {
    background: none;
    border: 1px solid #d9dde8;
    color: #5b6478;
}

.uf-404-categorias a.uf-404-todo:hover {
    border-color: #2a27e9;
    background: none;
    color: #2a27e9;
}

/* --- Pie del bloque --- */

.uf-404-ayuda {
    font-size: 14.5px;
    line-height: 1.65;
    color: #8a92a6;
    padding-top: 26px;
    border-top: 1px solid #e8eaf0;
    margin: 0 !important;
}

.uf-404-ayuda a { color: #2a27e9; }

@media (max-width: 767px) {

    .uf-404 { padding: 16px 0 26px; }

    .uf-404-texto { font-size: 16px; margin-bottom: 26px !important; }

    .uf-404-buscador {
        flex-direction: column;
        gap: 8px;
    }

    .uf-404-buscador button { width: 100%; }
}


/* ==========================================================================
   13 · PÁGINA DE CONTACTO
   Contenido clásico en la página 219 + formulario de Contact Form 7 (245).
   Los datos ({{whatsapp}}, {{email}}…) los inyecta el mu-plugin
   urbanflux-datos-empresa.php.
   ========================================================================== */

.uf-contacto {
    max-width: 880px;
    margin: 0 auto;
    padding-bottom: 20px;
}

.uf-contacto-intro {
    font-size: 18px;
    line-height: 1.6;
    color: #0b1a48;
    max-width: 56ch;
    margin: 0 0 34px !important;
}

.uf-contacto h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #0b1a48;
    margin: 0 0 16px;
}

/* --- Canales --- */

.uf-contacto-canales {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 44px;
}

.uf-canal {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 22px 24px;
    background: #f6f7fb;
    border-radius: var(--uf-radius-lg, 16px);
    text-decoration: none;
}

.uf-canal-etiqueta {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8a92a6;
}

.uf-canal-dato {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: #0b1a48;
    word-break: break-word;
}

.uf-canal-detalle {
    font-size: 14px;
    line-height: 1.5;
    color: #5b6478;
}

.uf-canal-principal {
    background: #2a27e9;
    transition: background .18s ease;
}

.uf-canal-principal .uf-canal-etiqueta { color: rgba(255, 255, 255, .72); }
.uf-canal-principal .uf-canal-dato     { color: #fff; }
.uf-canal-principal .uf-canal-detalle  { color: rgba(255, 255, 255, .88); }
.uf-canal-principal:hover              { background: #120fbf; }

/* --- Horario --- */

.uf-contacto-horario { margin-bottom: 44px; }

#Content table.uf-tabla-horario {
    width: 100%;
    max-width: 460px;
    border-collapse: collapse;
    margin: 0 0 12px;
    font-size: 15px;
}

#Content table.uf-tabla-horario th,
#Content table.uf-tabla-horario td {
    text-align: left;
    padding: 11px 0;
    border-bottom: 1px solid #edf0f7;
    border-right: none;
    background: none;
    font-weight: 400;
    color: #5b6478;
}

#Content table.uf-tabla-horario th {
    width: 55%;
    font-weight: 600;
    color: #0b1a48;
}

#Content table.uf-tabla-horario tr:last-child th,
#Content table.uf-tabla-horario tr:last-child td { border-bottom: none; }

.uf-nota-horario {
    font-size: 13.5px;
    color: #8a92a6;
    margin: 0 !important;
}

/* --- Formulario --- */

.uf-contacto-formulario {
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: var(--uf-radius-lg, 16px);
    padding: 30px 32px 26px;
    margin-bottom: 44px;
}

.uf-form-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

.uf-contacto .uf-campo { margin: 0 0 14px !important; }

.uf-contacto input[type="text"],
.uf-contacto input[type="tel"],
.uf-contacto input[type="email"],
.uf-contacto select,
.uf-contacto textarea {
    width: 100%;
    padding: 13px 16px;
    font-family: inherit;
    font-size: 15.5px;
    color: #0b1a48;
    background: #fff;
    border: 1px solid #d9dde8;
    border-radius: var(--uf-radius-md, 12px);
}

.uf-contacto textarea { min-height: 130px; resize: vertical; }

.uf-contacto input:focus,
.uf-contacto select:focus,
.uf-contacto textarea:focus {
    outline: none;
    border-color: #2a27e9;
    box-shadow: 0 0 0 3px rgba(42, 39, 233, .13);
}

.uf-consentimiento {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 14px;
    line-height: 1.55;
    color: #5b6478;
    margin: 4px 0 20px !important;
}

.uf-consentimiento .wpcf7-list-item { margin: 0 8px 0 0; }

.uf-contacto .uf-enviar { margin: 0 !important; }

.uf-contacto input[type="submit"] {
    padding: 15px 34px;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    color: #fff;
    background: #2a27e9;
    border: none;
    border-radius: var(--uf-radius-md, 12px);
    cursor: pointer;
    transition: background .18s ease;
}

.uf-contacto input[type="submit"]:hover { background: #120fbf; }

/* --- Atajos --- */

.uf-atajos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.uf-atajos a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    border: 1px solid #e6e9f2;
    border-radius: var(--uf-radius-md, 12px);
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}

.uf-atajos a:hover { border-color: #2a27e9; background: #fafaff; }

.uf-atajos strong { font-size: 15.5px; font-weight: 600; color: #0b1a48; }
.uf-atajos span   { font-size: 13.5px; line-height: 1.5; color: #8a92a6; }

/* --- Firma --- */

.uf-contacto-firma {
    margin: 44px 0 0 !important;
    padding-top: 22px;
    border-top: 1px solid #e8eaf0;
    font-size: 13px;
    color: #8a92a6;
}

@media (max-width: 767px) {

    .uf-contacto-intro { font-size: 16.5px; }

    .uf-form-fila { grid-template-columns: 1fr; }

    .uf-contacto-formulario { padding: 22px 20px 20px; }

    .uf-contacto input[type="submit"] { width: 100%; }
}


/* ==========================================================================
   14 · TEXTO DE MARCA EN EL PIE
   Item plain_text (uid uftxtpie1) insertado bajo el logo en la plantilla de
   pie 58. Betheme lo pinta como `.desc` dentro de `.mcb-item-uftxtpie1`.
   ========================================================================== */

.mcb-item-uftxtpie1 .desc {
    max-width: 34ch;
    margin: 14px 0 4px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #6b7387;
}

.mcb-item-uftxtpie1 .desc a {
    color: #2a27e9;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mcb-item-uftxtpie1 .desc a:hover {
    color: #120fbf;
}

@media (max-width: 767px) {

    .mcb-item-uftxtpie1 .desc {
        max-width: none;
        margin-top: 12px;
        font-size: 14px;
    }
}


/* ==========================================================================
   15 · BANNER PRINCIPAL DEL HOME
   Item html (uid ufhero1) en la sección 0 de la página 9.
   Franja oscura a sangre completa, enfocada a gaming y tecnología.
   ========================================================================== */

.uf-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 520px at 76% 42%, rgba(42, 39, 233, .48), transparent 62%),
        radial-gradient(620px 420px at 12% 88%, rgba(42, 39, 233, .18), transparent 68%),
        linear-gradient(128deg, #080d28 0%, #0b1a48 52%, #141b40 100%);
    color: #fff;
    /* Anula el ancho del contenedor de Betheme: el banner va a sangre. */
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
}

.uf-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 40px;
    max-width: 1220px;
    margin: 0 auto;
    padding: 68px 40px 72px;
}

/* --- Texto --- */

.uf-hero-eyebrow {
    margin: 0 0 18px !important;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8f9bff;
}

.uf-hero-titulo {
    margin: 0 0 20px !important;
    font-size: clamp(2.3rem, 4.6vw, 3.55rem);
    line-height: 1.05;
    letter-spacing: -.025em;
    font-weight: 700;
    color: #fff;
    text-wrap: balance;
}

.uf-hero-titulo em {
    font-style: normal;
    color: #8f9bff;
}

.uf-hero-sub {
    margin: 0 0 32px !important;
    max-width: 46ch;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .76);
}

/* --- Botones --- */

.uf-hero-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 34px;
}

.uf-hero .uf-hero-cta,
.uf-hero .uf-hero-cta2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    padding: 0 32px;
    border-radius: var(--uf-radius-md, 12px);
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.uf-hero .uf-hero-cta {
    background: #2a27e9;
    color: #fff;
}

.uf-hero .uf-hero-cta:hover {
    background: #4b48ff;
}

.uf-hero .uf-hero-cta2 {
    background: none;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .3);
}

.uf-hero .uf-hero-cta2:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .08);
}

.uf-hero a:focus-visible {
    outline: 2px solid #8f9bff;
    outline-offset: 3px;
}

/* --- Puntos de confianza --- */

.uf-hero-puntos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

.uf-hero-puntos li {
    position: relative;
    padding-left: 20px;
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .68);
}

.uf-hero-puntos li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2a27e9;
    box-shadow: 0 0 0 3px rgba(42, 39, 233, .28);
}

/* --- Figura --- */

.uf-hero-figura {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uf-hero-figura::before {
    content: "";
    position: absolute;
    /* Centrado sobre el canvas, no sobre la caja de la figura: esta última es
       más ancha y dejaba el halo desplazado a la derecha de la esfera. */
    top: 50%;
    left: 50%;
    width: min(74%, 400px);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(88, 84, 255, .5) 0%, rgba(48, 44, 200, .16) 44%, rgba(42, 39, 233, 0) 72%);
    filter: blur(18px);
}

.uf-hero-figura img {
    position: relative;
    width: 100%;
    max-width: 460px;
    height: auto;
    transform: rotate(-8deg);
    filter: drop-shadow(0 28px 45px rgba(0, 0, 0, .55));
}

/* El núcleo geodésico lo pinta js/uf-hero.js. El canvas necesita una caja con
   medida propia: sin `height` explícito colapsaría a la altura por defecto. */
.uf-hero-canvas {
    position: relative;
    display: block;
    width: 100%;
    max-width: 470px;
    aspect-ratio: 1 / 1;
    /* Reserva de altura para navegadores sin aspect-ratio. */
    min-height: 300px;
}

/* --- Tablet --- */

@media (max-width: 1023px) {

    .uf-hero-inner {
        gap: 26px;
        padding: 54px 30px 58px;
    }

    .uf-hero-figura img { max-width: 330px; }
    .uf-hero-canvas { max-width: 340px; }
}

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

@media (max-width: 767px) {

    .uf-hero-inner {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 40px 22px 44px;
        text-align: left;
    }

    /* La foto va primero: entra por los ojos y luego se lee la promesa. */
    .uf-hero-figura {
        order: -1;
        margin-bottom: 6px;
    }

    .uf-hero-figura img {
        max-width: 240px;
        transform: rotate(-6deg);
    }

    .uf-hero-canvas {
        max-width: 250px;
        min-height: 200px;
    }

    .uf-hero-sub {
        font-size: 16px;
        margin-bottom: 26px !important;
    }

    .uf-hero-acciones {
        gap: 10px;
        margin-bottom: 26px;
    }

    .uf-hero .uf-hero-cta,
    .uf-hero .uf-hero-cta2 {
        flex: 1 1 100%;
        height: 50px;
    }

    .uf-hero-puntos {
        gap: 8px 0;
        flex-direction: column;
    }
}

/* --- El banner trae su propio fondo y aire: la sección que lo envuelve no
       debe añadir relleno, o aparece una franja blanca sobre y bajo la franja
       oscura. Medido: la sección traía 40px arriba y 56px abajo, más 40px de
       margen inferior en la columna. --- */

.mcb-item-ufhero1,
.mcb-item-ufhero1 .mcb-column-inner {
    margin-bottom: 0 !important;
}

.mcb-section:has(.uf-hero) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.mcb-wrap-ufherowrap > .mcb-wrap-inner {
    margin-bottom: 0 !important;
}

/* Los tres puntos caben en una línea si se aprieta un poco la medida. */

.uf-hero-puntos {
    gap: 9px 22px;
}

.uf-hero-puntos li {
    font-size: 13.5px;
}


/* ==========================================================================
   16 · SECCIÓN «PRODUCTOS POR ENCARGO» DEL HOME
   Item html (uid ufencargo1). Ocupa el hueco que dejaron las secciones de
   demo eliminadas y explica el diferenciador real del negocio.
   ========================================================================== */

.uf-encargo {
    /* La sección va a ancho completo (width_switcher: full), así que el aire
       lateral tiene que ponerlo este bloque: sin él, en móvil el texto y las
       tarjetas quedan pegados al borde de la pantalla. */
    max-width: 1188px;
    margin: 0 auto;
    padding: 8px 24px 12px;
}

.uf-encargo-cabecera {
    max-width: 62ch;
    margin-bottom: 44px;
}

.uf-encargo-eyebrow {
    margin: 0 0 14px !important;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #2a27e9;
}

.uf-encargo-titulo {
    margin: 0 0 16px !important;
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #0b1a48;
    text-wrap: balance;
}

.uf-encargo-sub {
    margin: 0 !important;
    font-size: 17px;
    line-height: 1.6;
    color: #5b6478;
}

/* --- Pasos --- */

.uf-encargo-pasos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin: 0 0 34px !important;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.uf-encargo-pasos li {
    position: relative;
    margin: 0;
    padding: 28px 28px 26px;
    background: #f6f7fb;
    border-radius: var(--uf-radius-lg, 16px);
}

.uf-encargo-pasos li::before { content: none; }

.uf-paso-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #2a27e9;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.uf-encargo-pasos h3 {
    margin: 0 0 8px !important;
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.35;
    color: #0b1a48;
}

.uf-encargo-pasos p {
    margin: 0 !important;
    font-size: 15px;
    line-height: 1.6;
    color: #5b6478;
}

/* --- Pie --- */

.uf-encargo-pie {
    margin: 0 !important;
    padding: 20px 24px;
    background: #f2f2ff;
    border-left: 3px solid #2a27e9;
    border-radius: 0 var(--uf-radius-md, 12px) var(--uf-radius-md, 12px) 0;
    font-size: 15px;
    line-height: 1.6;
    color: #0b1a48;
}

.uf-encargo-pie a {
    color: #2a27e9;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

@media (max-width: 767px) {

    .uf-encargo {
        padding-left: 22px;
        padding-right: 22px;
    }

    .uf-encargo-cabecera { margin-bottom: 30px; }
    .uf-encargo-sub { font-size: 16px; }

    .uf-encargo-pasos {
        /* `auto-fit minmax(260px,1fr)` todavía mete dos columnas por debajo de
           768px y deja el tercer paso solo, con un hueco al lado. En móvil los
           tres van uno debajo de otro. */
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 26px !important;
    }

    .uf-encargo-pasos li { padding: 22px 22px 20px; }

    .uf-encargo-pie a { white-space: normal; }
}


/* ==========================================================================
   17 · CATÁLOGO CON POCOS PRODUCTOS
   Mientras la tienda arranca, una rejilla de 3 o 4 columnas con uno o dos
   productos deja la fila coja y dos tercios de hueco. Con 3 productos o
   menos la fila se centra. En cuanto haya un cuarto, vuelve la rejilla
   normal de Betheme sin tocar nada.
   ========================================================================== */

#Content ul.products:not(:has(> li.product:nth-child(4))) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
    height: auto !important;
}

#Content ul.products:not(:has(> li.product:nth-child(4))) > li.product {
    float: none;
    width: min(340px, 100%);
    margin-left: 0;
    margin-right: 0;
}


/* ==========================================================================
   18 · LOGO DENTRO DEL NÚCLEO DEL BANNER
   ========================================================================== */

.uf-hero-figura {
    position: relative;
}

.uf-hero-figura img.uf-hero-marca {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    max-width: 172px;
    height: auto;
    pointer-events: none;
    /* Doble sombra: una cerrada que lo despega de las aristas y otra abierta
       que lo asienta sobre el halo azul. */
    filter:
        drop-shadow(0 0 10px rgba(6, 10, 34, .85))
        drop-shadow(0 0 34px rgba(10, 14, 45, .6));
}

@media (max-width: 1023px) {
    .uf-hero-figura img.uf-hero-marca { max-width: 128px; }
}

@media (max-width: 767px) {
    .uf-hero-figura img.uf-hero-marca { max-width: 96px; }
}


/* ==========================================================================
   19 · PESTAÑA DE DESCRIPCIÓN DEL PRODUCTO
   El contenido arrancaba pegado al subrayado de la pestaña y se estiraba a
   todo el ancho del contenedor: unos 140 caracteres por línea, ilegible.
   ========================================================================== */

.single-product .section.the_content .the_content_wrapper {
    max-width: 76ch;
    margin: 0 auto;
    padding: 34px 24px 10px;
}

.single-product .section.the_content .the_content_wrapper > *:first-child {
    margin-top: 0;
}

.single-product .section.the_content .the_content_wrapper p,
.single-product .section.the_content .the_content_wrapper li {
    line-height: 1.7;
}

.single-product .section.the_content .the_content_wrapper ul {
    margin-bottom: 20px;
}

@media (max-width: 767px) {

    .single-product .section.the_content .the_content_wrapper {
        padding: 26px 20px 8px;
    }
}


/* ==========================================================================
   20 · TÍTULO DEL PRODUCTO EN LAS REJILLAS
   Betheme lo pinta a 24 px, tamaño de titular. Con nombres reales de 60
   caracteres se comía la tarjeta en cuatro líneas y empujaba el precio fuera
   de vista. Aplica al home, a la tienda, a las categorías y a la búsqueda.
   ========================================================================== */

#Content .mfn-woo-product-title,
#Content .mfn-woo-product-title a {
    font-size: 17px;
    line-height: 1.38;
    font-weight: 600;
    letter-spacing: -.005em;
}

#Content .mfn-woo-product-title {
    margin-bottom: 10px;
    /* Tres líneas como máximo: así todas las tarjetas de una fila miden igual
       y el precio queda siempre a la misma altura. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Reserva de las tres líneas para que los precios se alineen aunque un
       nombre ocupe una sola. */
    min-height: calc(17px * 1.38 * 2);
}

@media (max-width: 767px) {

    #Content .mfn-woo-product-title,
    #Content .mfn-woo-product-title a {
        font-size: 15.5px;
    }

    #Content .mfn-woo-product-title {
        min-height: calc(15.5px * 1.38 * 2);
    }
}


/* ==========================================================================
   21 · CAJA UNIFORME PARA LA IMAGEN DE PRODUCTO
   Las piezas gráficas de los proveedores vienen en proporciones distintas
   (1:1, 1.02:1, 16:9). Sin normalizar, cada tarjeta mide distinto y los
   precios quedan a alturas diferentes dentro de la misma fila.
   Se usa `contain` y no `cover` a propósito: son infografías con texto, y
   recortarlas se comería datos del producto.
   ========================================================================== */

#Content li.product img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    /* `cover`: la imagen llena la tarjeta entera, sin franjas.
       A cambio recorta lo que sobra — en las piezas apaisadas se pierden los
       laterales. Si el proveedor manda las fotos en cuadrado, no se recorta
       nada y esta regla sigue valiendo igual. */
    object-fit: cover;
    object-position: center;
    background: #f6f7fb;
    border-radius: var(--uf-radius-md, 12px);
}

/* El envoltorio de Betheme fija alturas propias en algunos casos. */
#Content li.product .image_frame,
#Content li.product .image_wrapper,
#Content li.product .product-image {
    height: auto;
}


/* ==========================================================================
   22 · TÍTULO DEL PRODUCTO EN LA TIENDA Y LAS CATEGORÍAS
   El archivo usa `h5.title` (20 px) en vez del `.mfn-woo-product-title` del
   home. Se igualan para que el catálogo se lea igual en todas partes.
   ========================================================================== */

#Content .mfn-li-product-row-title .title,
#Content li.product h5.title {
    font-size: 17px;
    line-height: 1.38;
    font-weight: 600;
    letter-spacing: -.005em;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(17px * 1.38 * 2);
}

@media (max-width: 767px) {

    #Content .mfn-li-product-row-title .title,
    #Content li.product h5.title {
        font-size: 15.5px;
        min-height: calc(15.5px * 1.38 * 2);
    }
}