/* ============================================================================
   tecservices.com.pa — Hoja de mejoras CSS
   Complemento del documento "auditoria-css-tecservices.md"

   Verificado contra el HTML y CSS servidos en producción el 17/08/2026:
     WoodMart 8.5.7 · WooCommerce 11.0.1 · Elementor 4.2.2
     FluentForm 6.2.12 · OneClick WhatsApp Order 1.1.2

   CÓMO APLICARLO
   Pega bloque por bloque, no todo de golpe, y revisa cada uno antes de
   seguir. Los bloques están numerados igual que el reporte.

   DÓNDE
   Tema hijo (recomendado) o el editor de SiteOrigin CSS que ya usas.

   CONTENIDO
   Bloques A-J: mejoras globales y por página.
   Al final, el bloque del botón "Comprar en WhatsApp", ya ajustado para
   heredar el radio de 35px del sistema del tema.

   Este archivo reemplaza cualquier CSS que tengas en SiteOrigin CSS.
   Vacía el editor de SiteOrigin al activar el plugin, o tendrás reglas
   duplicadas peleando entre sí.
   ============================================================================ */


/* ============================================================================
   BLOQUE A — GLOBAL
   ============================================================================ */

/* ----------------------------------------------------------------------------
   A.1 · FOCO VISIBLE DE TECLADO   ← la corrección de mayor impacto
   base.css de WoodMart aplica outline:none a todos los botones sin poner
   nada en su lugar. Esto lo devuelve, solo para navegación por teclado
   (:focus-visible no se dispara al hacer clic con el ratón).
   WCAG 2.4.7 · nivel AA
   ---------------------------------------------------------------------------- */

:is(a, button, input, select, textarea, [tabindex]):focus-visible,
:is(.btn, .button, [type="submit"], [type="button"]):focus-visible,
.wd-tools-element > a:focus-visible,
.wd-nav > li > a:focus-visible {
    outline: 3px solid #0a58ca !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

/* Sobre fondos oscuros (cabecera superpuesta, pie de página) */
.whb-color-light :is(a, button):focus-visible,
.footer-container :is(a, button):focus-visible {
    outline-color: #ffd400 !important;
}

/* Enlace "saltar al contenido" visible al recibir foco */
.skip-link:focus,
a[href="#main-content"]:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 10px 18px;
    background: #fff;
    clip: auto !important;
}


/* ----------------------------------------------------------------------------
   A.2 · UNIFICAR EL RADIO DE BORDE
   El tema ya usa 35px en --btn-default-brd-radius, --btn-accented-brd-radius
   y --wd-form-brd-radius, pero deja --btn-brd-radius sin definir, así que los
   botones de WooCommerce caen al 0px por defecto de base.css.
   Una línea unifica todo el sitio.
   ---------------------------------------------------------------------------- */

:root {
    --btn-brd-radius: 35px;

    /* Contraste del texto secundario: #767676 da 4.54:1 sobre blanco,
       justo en el límite de AA. Este da 5.3:1. */
    --wd-text-color: #6b6b6b;
}


/* ----------------------------------------------------------------------------
   A.3 · ANCLAS BAJO LA CABECERA FIJA
   Sin esto, cualquier enlace a #seccion deja el título tapado por el header.
   ---------------------------------------------------------------------------- */

:target,
[id]:not(body) {
    scroll-margin-top: calc(var(--wd-header-h, 90px) + 20px);
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}


/* ----------------------------------------------------------------------------
   A.4 · TIPOGRAFÍA — equilibrado de títulos
   El sitio carga Montserrat 400/600/800 y Lato 400/700. Los títulos largos
   de producto y de sección se parten de forma desigual; text-wrap: balance
   reparte las líneas. Degrada sin efecto en navegadores que no lo soportan.
   ---------------------------------------------------------------------------- */

h1, h2, h3,
.wd-entities-title,
.title.element-title {
    text-wrap: balance;
}

p, .wd-product-cats {
    text-wrap: pretty;
}


/* ----------------------------------------------------------------------------
   A.5 · RESPETO AL MOVIMIENTO REDUCIDO (global)
   El tema carga mod-animations-transform y el slider con distorsión.
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ----------------------------------------------------------------------------
   A.6 · BOTÓN FLOTANTE DE WHATSAPP
   El plugin lo fija en z-index 9999999 y bottom 20px. En móvil se solapa con
   la barra inferior del tema (sticky-toolbar-on). Esto lo levanta.
   ---------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    body.sticky-toolbar-on .floating_button {
        bottom: calc(var(--wd-sticky-toolbar-h, 60px) + 12px) !important;
    }
}


/* ============================================================================
   BLOQUE B — INICIO
   ============================================================================ */

/* ----------------------------------------------------------------------------
   B.1 · Aire entre los info-box y el bloque siguiente
   ---------------------------------------------------------------------------- */

.home .wd-info-box {
    padding-block: 8px;
}


/* ----------------------------------------------------------------------------
   B.2 · Cuadrícula de categorías — bajar el peso visual
   Son 24 categorías; si cada celda grita, compiten con los productos.
   ---------------------------------------------------------------------------- */

.home .wd-cat .wd-entities-title {
    font-size: 14px;
    line-height: 1.35;
    text-wrap: balance;
}

.home .wd-cat {
    transition: transform .2s ease;
}

.home .wd-cat:hover {
    transform: translateY(-3px);
}


/* ----------------------------------------------------------------------------
   B.3 · PARCHE TEMPORAL — ocultar contenido demo del tema
   Esto NO es la solución: hay que borrar esas secciones en Elementor.
   Sirve solo como tapón mientras las editas. Descomenta para activarlo y
   AJUSTA los selectores tras inspeccionar, porque los IDs de sección de
   Elementor cambian al editar.
   ---------------------------------------------------------------------------- */

/*
.home .testimonials,
.home .wd-testimonials {
    display: none;
}
*/

/* Banners con enlace muerto: al menos que no parezcan clicables. */
.home .wd-banner a[href="#"],
.home .banner-btn-wrapper a[href="#"] {
    cursor: default;
    pointer-events: none;
    opacity: .55;
}


/* ============================================================================
   BLOQUE C — TIENDA Y CATEGORÍAS
   Cuerpo: .woocommerce-shop  /  .tax-product_cat  (ambas .woodmart-archive-shop)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   C.1 · Barra lateral de filtros pegajosa
   /tienda/ tiene 48 widgets de filtro. Sin sticky, filtrar de nuevo obliga
   a recorrer toda la página hacia arriba.
   ---------------------------------------------------------------------------- */

@media (min-width: 1025px) {
    .woodmart-archive-shop .sidebar-container {
        position: sticky;
        top: calc(var(--wd-header-h, 90px) + 20px);
        align-self: start;
        max-height: calc(100vh - var(--wd-header-h, 90px) - 40px);
        overflow-y: auto;
        overflow-x: hidden;        /* mata la barra horizontal */
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-gutter: stable;  /* evita que el contenido salte */
        padding-right: 6px;        /* aire para que la barra no tape texto */
    }

    .woodmart-archive-shop .sidebar-container::-webkit-scrollbar {
        width: 6px;
    }

    .woodmart-archive-shop .sidebar-container::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, .18);
        border-radius: 3px;
    }
}

/* ----------------------------------------------------------------------------
   C.2 · Jerarquía del precio
   En tecnología se compara por precio. Merece más peso que la categoría.
   ---------------------------------------------------------------------------- */

.woodmart-archive-shop .wd-product .price,
.wd-products .wd-product .price {
    font-size: 17px;
    font-weight: 700;
    margin-block: 4px 2px;
}

.wd-products .wd-product-cats {
    font-size: 12px;
    letter-spacing: .2px;
    opacity: .85;
}


/* ----------------------------------------------------------------------------
   C.3 · Tarjeta de producto — separación y respiración
   ---------------------------------------------------------------------------- */

.woodmart-archive-shop .wd-product {
    padding-bottom: 4px;
}

.woodmart-archive-shop .wd-product .wd-entities-title {
    font-size: 14px;
    font-weight: 600;
}


/* ----------------------------------------------------------------------------
   C.4 · Botón "cargar más" y ordenamiento
   ---------------------------------------------------------------------------- */

.woodmart-archive-shop .wd-products-load-more .btn {
    min-width: 220px;
    min-height: 46px;
}

.woocommerce-ordering.wd-style-underline select {
    font-weight: 600;
}


/* ============================================================================
   BLOQUE D — FICHA DE PRODUCTO
   Cuerpo: .single-product
   ============================================================================ */

/* ----------------------------------------------------------------------------
   D.1 · El botón de WhatsApp es la única acción de compra: que se note
   ---------------------------------------------------------------------------- */

.single-product .summary .wa-shop-button,
.single-product div[class*="summary"] .wa-shop-button {
    display: flex !important;
    width: 100%;
    max-width: 420px;
    min-height: 52px;
    font-size: 16px !important;
    margin-block: 16px 8px;
    padding: 14px 24px !important;
}


/* ----------------------------------------------------------------------------
   D.2 · Selector de cantidad huérfano
   El botón de añadir al carrito está oculto globalmente, así que el campo
   de cantidad queda solo y sin sentido. Mientras se decide qué hacer con
   el carrito (ver punto 1.2 del reporte), esto lo oculta en la ficha.
   BORRA ESTE BLOQUE si reactivas el carrito.
   ---------------------------------------------------------------------------- */

.single-product form.cart .quantity {
    display: none;
}


/* ----------------------------------------------------------------------------
   D.3 · Barra inferior fija en móvil con precio + WhatsApp
   Evita volver a subir tras leer las especificaciones.
   ---------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .single-product .wd-sticky-btn,
    .single-product .wd-sticky-add-to-cart {
        --wd-sticky-btn-radius: 35px;
    }

    .single-product .summary .wa-shop-button {
        max-width: 100%;
    }
}


/* ----------------------------------------------------------------------------
   D.4 · Legibilidad de las especificaciones
   Los productos IWS/Intcomex traen descripciones densas.
   ---------------------------------------------------------------------------- */

.single-product .woocommerce-product-details__short-description,
.single-product .wd-content-area p,
.single-product .woocommerce-Tabs-panel p {
    line-height: 1.7;
    max-width: 68ch;
}

.single-product .shop_attributes th {
    font-weight: 600;
    width: 38%;
}

.single-product .shop_attributes tr:nth-child(odd) {
    background: rgba(0, 0, 0, .025);
}


/* ============================================================================
   BLOQUE E — BLOG
   Cuerpo: .blog · .woodmart-archive-blog
   ============================================================================ */

/* ----------------------------------------------------------------------------
   E.1 · Proporción uniforme de portadas
   El masonry con imágenes de distinta proporción produce un mosaico
   desigual. Si prefieres el masonry "real" y desordenado, borra este bloque.
   ---------------------------------------------------------------------------- */

.woodmart-archive-blog .post-image img,
.blog .post-image img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
}


/* ----------------------------------------------------------------------------
   E.2 · Legibilidad del artículo
   ---------------------------------------------------------------------------- */

.single-post .entry-content {
    font-size: 17px;
    line-height: 1.75;
}

.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol {
    max-width: 68ch;
}

.single-post .entry-content h2 {
    margin-top: 1.8em;
}


/* ============================================================================
   BLOQUE F — CONTACTO (FluentForm)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   F.1 · Alinear FluentForm con el sistema del tema
   El formulario usa su hoja por defecto (ffs_default) y no hereda el radio
   de 35px del tema, así que parece de otro sitio web.
   ---------------------------------------------------------------------------- */

.frm-fluent-form .ff-el-form-control {
    border-radius: var(--wd-form-brd-radius, 35px);
    border: 1px solid #e0e0e0;
    padding: 12px 20px;
    min-height: 46px;
    font-size: 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.frm-fluent-form textarea.ff-el-form-control {
    border-radius: 18px;
    min-height: 130px;
    padding-block: 14px;
}

.frm-fluent-form .ff-el-form-control:focus {
    border-color: var(--wd-primary-color, #0a58ca);
    box-shadow: 0 0 0 3px rgba(10, 88, 202, .12);
    outline: none;
}

.frm-fluent-form .ff-el-form-control:focus-visible {
    outline: 3px solid #0a58ca;
    outline-offset: 2px;
}

.frm-fluent-form .ff-el-input--label label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}

.frm-fluent-form .ff-btn-submit {
    border-radius: var(--btn-brd-radius, 35px);
    min-height: 48px;
    padding-inline: 32px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* Mensajes de error legibles y no solo por color (WCAG 1.4.1) */
.frm-fluent-form .error.text-danger {
    font-size: 13.5px;
    font-weight: 600;
    margin-top: 5px;
}

.frm-fluent-form .ff-el-is-error .ff-el-form-control {
    border-color: #c62828;
    background-image: none;
}


/* ============================================================================
   BLOQUE G — MI CUENTA Y CARRITO
   ============================================================================ */

/* ----------------------------------------------------------------------------
   G.1 · Formularios de login y registro
   ---------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-form input[type="text"],
.woocommerce-account .woocommerce-form input[type="email"],
.woocommerce-account .woocommerce-form input[type="password"] {
    border-radius: var(--wd-form-brd-radius, 35px);
    min-height: 46px;
    padding-inline: 20px;
}

@media (min-width: 769px) {
    .woocommerce-account .u-columns.col2-set {
        gap: 40px;
    }
}


/* ----------------------------------------------------------------------------
   G.2 · Tabla del carrito legible en móvil
   ---------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .woocommerce-cart .shop_table td {
        padding-block: 14px;
    }

    .woocommerce-cart .shop_table .product-name a {
        font-weight: 600;
        line-height: 1.4;
    }
}


/* ============================================================================
   BLOQUE H — PÁGINAS INFORMATIVAS
   ============================================================================ */

/* ----------------------------------------------------------------------------
   H.1 · "Cómo comprar" a ancho completo
   Esta página arrastra una barra lateral derecha heredada de la plantilla.
   Lo correcto es quitarla en los ajustes de la página; esto es el atajo.
   El ID 67142 corresponde a /comocomprar/.
   ---------------------------------------------------------------------------- */

.page-id-67142 .sidebar-container {
    display: none;
}

.page-id-67142 .content-area,
.page-id-67142 .site-content {
    width: 100%;
    max-width: 100%;
    flex-basis: 100%;
}


/* ----------------------------------------------------------------------------
   H.2 · Numeración del proceso de compra
   Los pasos 1-2-3-4 son una secuencia real, así que el número informa.
   ---------------------------------------------------------------------------- */

.page-id-67142 .wd-info-box .info-box-title {
    font-weight: 700;
}


/* ============================================================================
   BLOQUE I — PIE DE PÁGINA
   ============================================================================ */

/* ----------------------------------------------------------------------------
   I.1 · Revisar esta regla heredada
   En tu so-css actual existe:
       .footer-column.footer-column-2.wd-grid-col { display: inline; }
   display:inline sobre una columna de grid anula su comportamiento. Si no
   recuerdas por qué la pusiste, quítala y comprueba. Si la necesitas para
   evitar un salto, esta alternativa preserva el grid:
   ---------------------------------------------------------------------------- */

/*
.footer-column.footer-column-2.wd-grid-col {
    display: block;
}
*/


/* ----------------------------------------------------------------------------
   I.2 · Datos de contacto del pie más legibles
   ---------------------------------------------------------------------------- */

.footer-container .wd-list li {
    line-height: 1.7;
}

.footer-container a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ============================================================================
   BLOQUE J — IMPRESIÓN
   Los clientes B2B imprimen o guardan fichas de producto en PDF.
   ============================================================================ */

@media print {
    .whb-header,
    .footer-container,
    .floating_button,
    .wd-sidebar,
    .wd-prefooter,
    .sticky-toolbar,
    .wa-shop-button,
    .wd-buttons {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    .single-product .site-content {
        width: 100%;
        max-width: 100%;
    }

    /* Que las URLs de los enlaces sean visibles en papel */
    .entry-content a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        word-break: break-all;
    }
}
/* ============================================================
   TecComputer Services — Botón "Comprar en WhatsApp"
   Estilo pill · sin mayúsculas · texto centrado · alineado al fondo

   Verificado contra:
     · WoodMart 8.5.7  (base.css → :is(.btn,.button,…) con CSS vars)
     · OneClick WhatsApp Order 1.1.2 (main-style.css + CSS inline)

   Ubicación: Apariencia > Personalizar > CSS adicional
              o el style.css de tu tema hijo (recomendado)

   NOTA SOBRE !important
   Se usa solo donde el plugin ya declara !important y no hay
   alternativa. Cada caso está comentado con su motivo.
   ============================================================ */


/* ------------------------------------------------------------
   1. ALINEACIÓN AL FONDO DE LA TARJETA
   ------------------------------------------------------------ */

.wd-products .wd-product,
.wd-carousel .wd-product {
    height: 100%;
}

.wd-product > .wd-product-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wd-product > .wd-product-wrapper > .wd-product-thumb {
    flex: 0 0 auto;
}

/* Absorbe el espacio sobrante y empuja el botón abajo. */
.wd-product > .wd-product-wrapper > .wa-shop-button {
    margin-top: auto;
}

/* Slides del carrusel a la misma altura. */
.wd-carousel > .wd-carousel-item,
.wd-carousel-wrap > .wd-carousel-item {
    height: auto;
    align-self: stretch;
}


/* ------------------------------------------------------------
   2. EL BOTÓN
   ------------------------------------------------------------ */

.wd-product .wa-shop-button {

    /* --- Variables de WoodMart ---
       base.css lee text-transform:var(--btn-transform, uppercase)
       y border-radius:var(--btn-brd-radius, 0px). Redefinirlas aquí
       es más limpio que sobrescribir cada propiedad. */
    --btn-transform: none;          /* adiós mayúsculas */
    --btn-brd-radius: 35px;         /* hereda el sistema del tema */
    --btn-font-weight: 600;
    --btn-font-size: 14px;

    /* --- Caja ---
       display: el CSS inline del plugin fuerza inline-block. */
    display: flex !important;
    align-items: center;
    justify-content: center;        /* centra ícono + texto */
    gap: 7px;
    width: 100%;
    min-height: 44px;               /* área táctil mínima, WCAG 2.5.8 */
    margin-top: 12px;

    /* padding: el plugin lo pone en 0 con !important. */
    padding: 11px 18px !important;

    /* --- Tipografía --- */
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0 !important;   /* el plugin mete 0.5px, sobra sin mayúsculas */
    text-align: center;
    text-transform: none;           /* respaldo por si cambia la var */
    white-space: normal;

    /* --- Color y profundidad ---
       El plugin fija #25D366 con !important desde dos sitios
       (main-style.css y el CSS inline de sus ajustes).
       La sombra negra dura se reemplaza por uno verde suave. */
    background-color: #25d366 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(37, 211, 102, .32) !important;

    transition: background-color .2s ease,
                box-shadow .2s ease,
                transform .15s ease;
}


/* --- Ícono (::before con SVG en data-URI, 0.875em) --- */
.wd-product .wa-shop-button::before {
    flex: 0 0 auto;                 /* no se deforma al comprimirse */
    margin: 0 !important;           /* el plugin usa márgenes negativos */
    width: 1.05em;
}


/* --- Hover: el plugin repite el mismo verde, así que no hay
       feedback. Aquí sí oscurece. --- */
.wd-product .wa-shop-button:hover,
.wd-product .wa-shop-button:focus-visible {
    background-color: #1eb457 !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, .42) !important;
    transform: translateY(-1px);
}

.wd-product .wa-shop-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(37, 211, 102, .32) !important;
}


/* --- Foco visible para teclado (WCAG 2.4.7) --- */
.wd-product .wa-shop-button:focus-visible {
    outline: 3px solid #075e54;
    outline-offset: 2px;
}


/* --- Movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
    .wd-product .wa-shop-button {
        transition: none;
    }
    .wd-product .wa-shop-button:hover,
    .wd-product .wa-shop-button:active {
        transform: none;
    }
}


/* ------------------------------------------------------------
   3. RECOMENDADO — títulos a 2 líneas
   Sin esto el botón queda alineado, pero los precios y
   categorías siguen a alturas distintas entre tarjetas.
   Bórralo si prefieres títulos completos.
   ------------------------------------------------------------ */

.wd-products .wd-entities-title,
.wd-carousel .wd-entities-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: 2.8em;
    margin-bottom: 6px;
}

@media (max-width: 768px) {
    .wd-products .wd-entities-title,
    .wd-carousel .wd-entities-title {
        -webkit-line-clamp: 3;
        line-clamp: 3;
        min-height: 4.2em;
    }
}


/* ------------------------------------------------------------
   4. Neutraliza los estados de "añadido al carrito" que
   WooCommerce aplica por la clase add_to_cart_button del botón.
   Bórralo si corriges el PHP y quitas esa clase.
   ------------------------------------------------------------ */

.wd-product .wa-shop-button.added,
.wd-product .wa-shop-button.loading {
    opacity: 1;
    pointer-events: auto;
}

.wd-product .wa-shop-button.added + .added_to_cart {
    display: none !important;
}
/* ============================================================================
   tecservices.com.pa — Mejoras de móvil y tablet
   Complemento de "auditoria-movil-tablet.md"

   Este archivo se AÑADE a tec-mejoras.css, no lo reemplaza.
   Si usas el plugin, pega el contenido al final de
   assets/css/tec-mejoras.css

   Puntos de corte usados aquí:
     ≤ 767px   teléfono          (alineado con Elementor tras devolverlo a 767)
     768–1024  tablet
     ≥ 1025px  escritorio        (breakpoint lg de WoodMart)
   ============================================================================ */


/* ============================================================================
   M1 · EVITAR EL ZOOM AUTOMÁTICO DE iOS EN CAMPOS DE FORMULARIO
   ---------------------------------------------------------------------------
   IMPORTANTE: aplica esto EN EL MISMO DESPLIEGUE que el arreglo del viewport.

   Safari en iOS hace zoom al enfocar cualquier campo con font-size < 16px.
   Hasta ahora user-scalable=no lo suprimía. Al desbloquear el zoom (correcto
   por accesibilidad) ese comportamiento vuelve, y la página salta cada vez
   que el usuario toca el buscador o un campo del formulario de contacto.

   16px es el mínimo exacto: con 15.9px iOS todavía hace zoom.
   ========================================================================= */

@media (max-width: 1024px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    textarea,
    select,
    .wd-search-form input,
    .frm-fluent-form .ff-el-form-control,
    .woocommerce-form input {
        font-size: 16px !important;
    }
}


/* ============================================================================
   M3 · BOTÓN FLOTANTE DE WHATSAPP SOBRE LA BARRA INFERIOR
   ---------------------------------------------------------------------------
   La barra de WoodMart mide 55px (opt-bottom-toolbar.css) y el plugin fija
   el botón a bottom:20px con z-index 9999999, así que se dibuja encima del
   ícono de "Mi cuenta".
   ========================================================================= */

@media (max-width: 1024px) {

    body.sticky-toolbar-on .floating_button {
        bottom: calc(55px + env(safe-area-inset-bottom, 0px) + 14px) !important;
    }

    /* La etiqueta emergente del botón sube con él. */
    body.sticky-toolbar-on .label-container {
        bottom: calc(55px + env(safe-area-inset-bottom, 0px) + 27px) !important;
    }
}

/* Si desactivas la barra inferior, esto lo devuelve a su sitio. */
@media (max-width: 1024px) {
    body:not(.sticky-toolbar-on) .floating_button {
        bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }
}


/* ============================================================================
   M4 · BOTÓN "COMPRAR EN WHATSAPP" EN TARJETAS ESTRECHAS
   ---------------------------------------------------------------------------
   Rejilla móvil: 2 columnas, gap 10px. En un teléfono de 360px cada tarjeta
   mide ~160px y el texto del botón no cabe en una línea.
   ========================================================================= */

@media (max-width: 767px) {

    .wd-products .wa-shop-button,
    .wd-carousel .wa-shop-button {
        font-size: 12.5px !important;
        font-weight: 600;
        padding: 10px 8px !important;
        gap: 4px;
        min-height: 42px;
        line-height: 1.25;
    }

    .wd-products .wa-shop-button::before,
    .wd-carousel .wa-shop-button::before {
        width: .95em;
    }

    /* Menos aire vertical dentro de la tarjeta */
    .wd-products .wd-product .price {
        font-size: 15px;
        margin-block: 3px 0;
    }

    .wd-products .wd-product-cats {
        font-size: 11px;
    }
}

/*
   ALTERNATIVA: una sola columna en pantallas muy estrechas.
   Da tarjetas de ~330px, texto cómodo y botón holgado, a costa de ver
   menos productos por pantalla. Descomenta para probarla.

@media (max-width: 420px) {
    .wd-products.wd-grid-g {
        --wd-col-sm: 1;
    }
}
*/


/* ============================================================================
   M7 · DOS COLUMNAS EN TABLET ESTRECHA
   ---------------------------------------------------------------------------
   El rango md mantiene 3 columnas hasta 768px, lo que deja tarjetas de
   ~240px para títulos de cuatro líneas de especificaciones.
   ========================================================================= */

@media (min-width: 768px) and (max-width: 900px) {

    .wd-products.wd-grid-g {
        --wd-col-md: 2;
    }
}


/* ============================================================================
   M8 · IMAGEN ROTA EN EL MENÚ
   ---------------------------------------------------------------------------
   El elemento "Accessories" tiene <img class="wd-nav-img"> SIN atributo src,
   que los navegadores pintan como ícono de imagen rota.

   PARCHE. La solución es borrar ese elemento en Apariencia → Menús.
   ========================================================================= */

.wd-nav-img:not([src]),
.wd-nav-img[src=""] {
    display: none !important;
}


/* ============================================================================
   M10 · ÁREAS TÁCTILES DE 44px
   ---------------------------------------------------------------------------
   Amplía el área activa sin cambiar el tamaño visual del ícono.
   WCAG 2.5.8 (Target Size, Minimum) · nivel AA
   ========================================================================= */

@media (max-width: 1024px) {

    .wd-tools-element > a,
    .wd-toolbar-item > a,
    .wd-nav-mobile > li > a,
    .wd-header-mobile-nav > a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* Las opciones del menú desplegable necesitan altura para el pulgar */
    .wd-nav-mobile > li > a {
        justify-content: flex-start;
        padding-block: 12px;
    }

    /* Enlaces del pie separados entre sí */
    .footer-container .wd-list li a,
    .footer-container .menu li a {
        display: inline-block;
        padding-block: 8px;
    }
}


/* ============================================================================
   M11 · ÁREA SEGURA DEL iPHONE
   ---------------------------------------------------------------------------
   La barra inferior fija no reserva espacio para el indicador de inicio de
   los iPhone con muesca.
   ========================================================================= */

@media (max-width: 1024px) {

    .wd-toolbar {
        padding-bottom: env(safe-area-inset-bottom, 0px);
        height: auto;
        min-height: 55px;
    }

    /* Que el contenido de la página no quede oculto tras la barra */
    body.sticky-toolbar-on .wd-page-wrapper {
        padding-bottom: calc(55px + env(safe-area-inset-bottom, 0px));
    }
}


/* ============================================================================
   EXTRAS DE MÓVIL
   ============================================================================ */

/* ----------------------------------------------------------------------------
   E1 · Prevenir desbordamiento horizontal
   La causa más común son tablas, iframes y elementos con ancho fijo.
   Si en algún dispositivo aparece scroll lateral, este bloque lo acota.
   ---------------------------------------------------------------------------- */

@media (max-width: 767px) {

    html,
    body {
        overflow-x: hidden;
    }

    img,
    video,
    iframe,
    table {
        max-width: 100%;
    }
}


/* ----------------------------------------------------------------------------
   E2 · Tabla del carrito legible en pantalla estrecha
   ---------------------------------------------------------------------------- */

@media (max-width: 767px) {

    .woocommerce-cart .shop_table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .woocommerce-cart .shop_table .product-name a {
        font-weight: 600;
        line-height: 1.4;
        font-size: 14px;
    }
}


/* ----------------------------------------------------------------------------
   E3 · Ficha de producto — el botón de WhatsApp a ancho completo
   Es la única acción de compra, así que en móvil ocupa todo el ancho.
   ---------------------------------------------------------------------------- */

@media (max-width: 767px) {

    .single-product .wa-shop-button {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 50px;
        font-size: 15px !important;
        padding: 14px 18px !important;
    }
}


/* ----------------------------------------------------------------------------
   E4 · Títulos de sección más contenidos
   El "Servicios" del encabezado de página se sirve a tamaño de escritorio.
   ---------------------------------------------------------------------------- */

@media (max-width: 767px) {

    .page-title .entry-title,
    .wd-page-title .entry-title {
        font-size: clamp(28px, 8vw, 44px);
        line-height: 1.15;
    }

    .wd-page-title {
        padding-block: 36px;
    }
}


/* ----------------------------------------------------------------------------
   E5 · Títulos de producto en móvil
   El CSS principal los recorta a 3 líneas por debajo de 768px. Con 2 columnas
   estrechas, 2 líneas se ve más ordenado. Descomenta si lo prefieres.
   ---------------------------------------------------------------------------- */

/*
@media (max-width: 767px) {
    .wd-products .wd-entities-title,
    .wd-carousel .wd-entities-title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        min-height: 2.8em;
        font-size: 13px;
    }
}
*/


/* ----------------------------------------------------------------------------
   E6 · Menú móvil desplegable — respiración
   ---------------------------------------------------------------------------- */

@media (max-width: 1024px) {

    .wd-nav-mobile .wd-nav-opener {
        min-width: 48px;
        min-height: 48px;
    }

    .mobile-nav .wd-nav-mobile > li {
        border-bottom: 1px solid rgba(0, 0, 0, .06);
    }
}