/* ============================================================
   PANAMAHUT24.DE — Mobile & Tablet Fix CSS v1.1
   Fecha: 2026-05-05

   INSTRUCCIONES:
   Cargado automáticamente por el módulo mobile-css de
   panamahut-master v1.1.0. No editar manualmente.

   IMPORTANTE:
   - Solo afecta móvil/tablet mediante @media queries
   - No modifica el diseño desktop (>849px)
   - Compatible con Flatsome 3.20.6 + WooCommerce
   - Compatible con TM Extra Product Options (ThemeComplete)
   - No edita archivos del tema

   CHANGELOG v1.1:
   - FIX CRÍTICO: Eliminado display:flex !important en .single_add_to_cart_button
     (causaba que TM EPO no pudiera ocultar el botón nativo en móvil)
   - FIX: Limitado display:block en table.variations td/th para no
     interferir con tablas de layout de EPO
   - NUEVO: Sección EPO_COMPAT con estilos móvil para TM Extra Product Options
   ============================================================ */


/* ===========================================================
   GRUPO A — CRÍTICO: Rompen la experiencia de compra
   =========================================================== */

/* A1 — TABLA DE TALLAS: Desbordamiento horizontal crítico
   Problema: table.tablepress width="723" sin wrapper → sale del viewport en móvil
   Fix: Envuelve la tabla en scroll horizontal */
@media (max-width: 768px) {
  .tablepress,
  table.tablepress {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
    font-size: 13px;
  }

  .tablepress thead th {
    white-space: normal;
    min-width: 90px;
    font-size: 12px;
    padding: 8px 6px;
  }

  .tablepress tbody td {
    padding: 7px 6px;
  }
}

/* A2 — CHATBOT: Posición para no cubrir botón "In den Warenkorb"
   Problema: chatbot fixed bottom:0 right:0 cubre el CTA en páginas de producto
   Fix: Añade margen inferior en móvil + ajusta posición en product pages */
@media (max-width: 768px) {
  #support-genix-chatbot-iframe-container {
    bottom: 12px !important;
    right: 8px !important;
    /* Margen para iOS home indicator */
    margin-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* En páginas de producto, sube el chatbot para no cubrir el ATC */
  .single-product #support-genix-chatbot-iframe-container {
    bottom: 16px !important;
  }
}

/* A3 — FILTROS DE TIENDA: Permitir filtro en móvil
   Problema: .category-filtering tiene show-for-medium → invisible en móvil
   Fix: Muestra el filtro en móvil con diseño scroll horizontal */
@media (max-width: 549px) {
  .category-filtering.category-filter-row.show-for-medium,
  .category-filtering.show-for-medium {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-bottom: 12px;
    gap: 6px;
    flex-wrap: nowrap;
    border-bottom: 1px solid #e8e4dc;
  }

  .category-filtering .cat-link {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 20px;
  }
}

/* A4 — CARRITO: Mostrar precios ocultos en móvil
   Problema: .shop_table .product-price y .product-subtotal ocultos en ≤549px
   Fix: Mostrar como bloque con etiqueta legible */
@media (max-width: 549px) {
  .shop_table .product-price,
  .shop_table .product-subtotal {
    display: table-cell !important;
  }

  /* Ajustar tabla de carrito para que quepa en móvil */
  .woocommerce-cart-form table.shop_table {
    font-size: 13px;
  }

  .shop_table .product-thumbnail {
    width: 60px;
  }

  .shop_table .product-thumbnail img {
    width: 50px;
    height: 50px;
    object-fit: cover;
  }
}

/* A5 — HERO BANNER: Altura excesiva en móvil
   Problema: padding-top:178-194px + header transparente 265px → banner ocupa 100% del viewport
   Fix: Reducir alturas de banner en móvil */
@media (max-width: 549px) {
  /* Banner principal de homepage */
  #banner-1356985636 {
    padding-top: 80px !important;
    min-height: 300px;
  }

  /* Ajustar todos los banners con padding-top excesivo */
  .banner[style*="padding-top: 17"],
  .banner[style*="padding-top: 29"] {
    padding-top: 60px !important;
  }

  /* Header transparente: reducir la compensación en páginas con banner */
  .has-transparent + .page-title:first-of-type,
  .has-transparent + #main > .page-title,
  .has-transparent + #main > div > .page-title {
    padding-top: 80px !important;
  }
}

/* A6 — PRODUCTO: Stacking de columnas gallery + summary
   Problema: .product-gallery.col.large-5 sin clase small → no stackea en <420px
   Fix: Forzar stacking en móvil */
@media (max-width: 549px) {
  .single-product .product-gallery.col.large-5,
  .single-product div.product .col.large-5,
  .single-product div.product .col.large-7,
  .single-product .summary.col {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .single-product div.product {
    flex-direction: column;
  }
}


/* ===========================================================
   GRUPO B — IMPORTANTE: Mejoras visuales significativas
   =========================================================== */

/* B1 — BOTÓN ADD TO CART: Touch target mínimo 44px
   Problema: El botón puede tener padding insuficiente para dedos
   Fix: Asegurar altura mínima de 48px y ancho completo

   ⚠️  NOTA COMPATIBILIDAD TM EPO (v1.1):
   TM Extra Product Options oculta este botón nativo con display:none
   y lo reemplaza con su propio botón validado. Por eso NO se usa
   display:flex !important aquí — hacerlo anula el ocultamiento de EPO
   y permite añadir al carrito sin rellenar los campos requeridos del sombrero.
   El centrado de contenido del botón se maneja vía flex en el tema (Flatsome). */
@media (max-width: 768px) {
  button.single_add_to_cart_button,
  .single_add_to_cart_button.button {
    min-height: 48px !important;
    width: 100% !important;
    font-size: 16px !important;
    padding: 12px 20px !important;
    /* display: flex eliminado en v1.1 — compatibilidad con TM EPO */
    align-items: center;
    justify-content: center;
    margin-top: 12px;
  }

  /* Botón de carrito en shop/archive (no afecta TM EPO) */
  .product .add_to_cart_button,
  .product .button.product_type_simple,
  .product .button.product_type_variable {
    min-height: 40px;
    font-size: 13px;
  }
}

/* B2 — CANTIDAD: Input más grande en móvil
   Problema: .quantity input[type=number] → width:2em en móvil (muy pequeño)
   Fix: Aumentar tamaño del campo y botones +/- */
@media (max-width: 549px) {
  .quantity input[type="number"],
  .quantity .qty {
    width: 50px !important;
    min-height: 44px !important;
    font-size: 16px !important;
    text-align: center;
    padding: 4px 8px !important;
  }

  .quantity {
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

/* B3 — VARIACIONES WOOCOMMERCE: Selects de talla más usables en táctil
   Problema: select de variaciones sin altura mínima → difícil de pulsar
   Fix: Asegurar altura y tamaño de texto

   ⚠️  NOTA COMPATIBILIDAD TM EPO (v1.1):
   display:block en table.variations td/th se mantiene acotado a la tabla
   de variaciones nativa de WooCommerce (.variations). TM EPO usa su propio
   contenedor .tc_extra_product_options y NO hereda esta regla. */
@media (max-width: 768px) {
  .variations select,
  .woocommerce-variation-add-to-cart select,
  table.variations select {
    min-height: 44px !important;
    font-size: 16px !important; /* Evita zoom automático en iOS */
    padding: 8px 12px !important;
    width: 100% !important;
    border-radius: 4px;
  }

  table.variations {
    width: 100%;
  }

  /* Sólo celdas de la tabla de variaciones nativa — no afecta tablas EPO */
  .woocommerce-product-details__short-description ~ form table.variations td,
  .woocommerce-product-details__short-description ~ form table.variations th,
  div.product > form.cart table.variations td,
  div.product > form.cart table.variations th {
    display: block;
    width: 100%;
  }

  table.variations td.label {
    padding-bottom: 4px;
    font-weight: 600;
  }
}

/* B4 — LOGO: Tamaño ajustado en móvil
   Problema: Logo width:200px puede ser demasiado ancho en 375px
   Fix: Reducir proporcionalmente */
@media (max-width: 549px) {
  #logo {
    width: 150px !important;
  }

  #logo img {
    max-height: 55px !important;
  }
}

/* B5 — CHECKOUT: Botón de pago prominente en móvil
   Problema: Botón de pago puede no ser suficientemente visible
   Fix: Ancho completo y altura táctil */
@media (max-width: 768px) {
  #place_order,
  .woocommerce-checkout #place_order {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 17px !important;
    padding: 14px 24px !important;
  }

  .wc-proceed-to-checkout .checkout-button {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    display: block !important;
    text-align: center;
  }
}

/* B6 — CARRITO: Stacking de columnas resumen
   Problema: .col-1.large-6 y .col-2.large-6 sin clase small → side-by-side en móvil
   Fix: Stack vertical en móvil */
@media (max-width: 549px) {
  .col-1.large-6.col,
  .col-2.large-6.col {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* B7 — TIPOGRAFÍA: Escala más legible en móvil
   Problema: h2 a 1.2em es muy pequeño en móvil; box-text al 85% puede ser ilegible
   Fix: Mejorar escala tipográfica */
@media (max-width: 549px) {
  h1 {
    font-size: 1.6em !important;
    line-height: 1.25;
  }

  h2 {
    font-size: 1.35em !important;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.15em !important;
  }

  .box-text {
    font-size: 92% !important;
  }

  /* Reducir texto hero muy grande en 375px */
  .is-xxlarge {
    font-size: 1.8em !important;
  }

  .is-xlarge {
    font-size: 1.4em !important;
  }

  /* Texto res-text de banners: escala mínima */
  .res-text {
    font-size: 10px !important;
  }
}

/* B8 — PRODUCT GRID: Mejora de 2 columnas en móvil
   Problema: small-columns-2 con nombres de sombreros largos → texto cortado
   Fix: Tamaños optimizados para 2 cols en 375px */
@media (max-width: 549px) {
  .products.small-columns-2 .product .woocommerce-loop-product__title {
    font-size: 12px !important;
    line-height: 1.3;
    /* Máximo 2 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .products.small-columns-2 .product .price {
    font-size: 13px !important;
    font-weight: 700;
  }

  .products.small-columns-2 .product {
    padding: 0 4px;
  }

  /* Imagen de producto: altura fija para consistencia */
  .products.small-columns-2 .product .box-image {
    min-height: 140px;
  }
}

/* B9 — RESULT COUNT: Mostrar en móvil
   Problema: .woocommerce-result-count.hide-for-medium invisible en móvil
   Fix: Mostrar count simplificado */
@media (max-width: 549px) {
  .woocommerce-result-count.hide-for-medium {
    display: block !important;
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
  }
}

/* B10 — BANNER LAYERS: Prevenir scroll horizontal
   Problema: .banner-layers tiene overflow:auto en móvil → scroll inesperado
   Fix: Clip horizontal */
@media (max-width: 768px) {
  .banner-layers {
    overflow: hidden !important;
  }

  /* Reposicionar texto de banner que usa y95 (95% desde arriba) */
  .banner-layer.y95,
  .banner-layer[class*="y9"] {
    top: auto !important;
    bottom: 15% !important;
    transform: none !important;
  }
}

/* B11 — GALERÍA DE PRODUCTO: Thumbnails navegables
   Problema: 30 thumbnails en slide ocupa demasiado espacio
   Fix: Limitar área visible y permitir scroll táctil */
@media (max-width: 768px) {
  .woocommerce-product-gallery {
    width: 100% !important;
    margin-bottom: 24px !important;
  }

  .woocommerce-product-gallery .flex-viewport {
    border-radius: 4px;
    overflow: hidden;
  }
}


/* ===========================================================
   GRUPO C — PULIDO: Detalles de calidad y UX fina
   =========================================================== */

/* C1 — HEADER TOP: Información útil en barra superior
   Mejora: Asegurar legibilidad del header-top en tablet */
@media (max-width: 768px) {
  .header-top {
    font-size: 12px;
    padding: 4px 0;
  }
}

/* C2 — INPUTS FORMULARIOS: Prevenir zoom automático iOS
   iOS hace zoom cuando font-size del input < 16px
   Fix: Asegurar 16px en todos los inputs de formulario */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* C3 — WC TABS PRODUCTO: Mejor UX en tabs de producto
   Mejora: Tab activo más visible, espaciado táctil */
@media (max-width: 768px) {
  .woocommerce-tabs .wc-tabs li a {
    padding: 10px 14px !important;
    font-size: 13px;
  }

  .woocommerce-tabs .panel {
    padding: 16px 0 !important;
  }
}

/* C4 — BREADCRUMBS: Legibles en móvil
   Mejora: Font-size adecuado y posible wrapping */
@media (max-width: 549px) {
  .breadcrumbs {
    font-size: 11px;
    white-space: normal;
    overflow: visible;
  }
}

/* C5 — CARRITO: Botón de actualizar carrito
   Mejora: Botón más táctil */
@media (max-width: 549px) {
  .woocommerce-cart-form .actions .button {
    min-height: 44px;
    font-size: 14px;
  }

  .coupon .button,
  .coupon input[type="text"] {
    min-height: 44px;
    font-size: 14px;
  }
}

/* C6 — CROSS-SELLS Y UPSELLS: Layout en móvil
   Problema: cross-sells overflow:hidden puede cortar productos
   Fix: Scroll horizontal para productos relacionados */
@media (max-width: 549px) {
  .cross-sells {
    overflow: visible !important;
  }

  .cross-sells .products,
  .upsells .products {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 12px;
  }

  .cross-sells .products .product,
  .upsells .products .product {
    flex: 0 0 160px;
    min-width: 160px;
  }
}

/* C7 — PRODUCT META: Mejor legibilidad
   Mejora: Espaciado y tamaño en info meta del producto */
@media (max-width: 549px) {
  .product_meta {
    font-size: 12px;
    margin-top: 16px;
  }

  .product_meta > span {
    display: block;
    margin-bottom: 4px;
  }

  .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
  }
}

/* C8 — SAFE AREA iOS: Márgenes para iPhone con notch/dynamic island
   Fix: Respetar safe-area de iOS en footer y chatbot */
@media (max-width: 549px) {
  .absolute-footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* C9 — TABLA INTERNACIONAL HUTGRÖSSEN: Scroll indicator
   Mejora: Añadir sombra de scroll para indicar contenido scrollable */
@media (max-width: 768px) {
  .tablepress-table-description {
    position: relative;
  }

  /* Indicador visual de scroll en tabla */
  .tablepress {
    box-shadow: inset -8px 0 8px -4px rgba(0,0,0,0.15);
  }
}

/* C10 — CHATBOT: Margen inferior iOS
   Mejora: Complemento al fix A2 para iOS con gesture bar */
@media (max-width: 768px) {
  #support-genix-chatbot-iframe-container {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* C11 — SEARCH BAR: Usabilidad en móvil
   Mejora: Si el buscador está disponible en móvil, asegurar tamaño táctil */
@media (max-width: 549px) {
  .searchform input[type="search"],
  .ux-search-box input[type="search"] {
    min-height: 44px;
    font-size: 16px !important;
    padding: 8px 16px;
  }

  .searchform .searchsubmit,
  .ux-search-box .searchsubmit {
    min-height: 44px;
    min-width: 44px;
  }
}

/* C12 — ORDENAR PRODUCTOS (SHOP): Select más táctil
   Mejora: El select de ordenación más usable con el dedo */
@media (max-width: 549px) {
  form.woocommerce-ordering select {
    min-height: 40px !important;
    font-size: 14px !important;
    padding: 6px 10px !important;
    max-width: 100%;
    width: auto;
  }
}


/* ===========================================================
   GRUPO EPO_COMPAT — Compatibilidad TM Extra Product Options
   Añadido en v1.1 para garantizar usabilidad móvil del
   configurador de sombreros (ThemeComplete EPO, Codecanyon #7908619)
   =========================================================== */

/* EPO-1 — CONTENEDOR PRINCIPAL EPO: Layout en móvil
   TM EPO inyecta .tc_extra_product_options dentro del form de producto.
   En móvil garantizamos que ocupe el ancho completo. */
@media (max-width: 768px) {
  .tc_extra_product_options,
  .tc-extra-product-options-container,
  .woocommerce div.product form.cart .tc_extra_product_options {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* EPO-2 — CAMPOS EPO: Touch targets adecuados
   Inputs, selects y textareas dentro de campos EPO */
@media (max-width: 768px) {
  .tc_extra_product_options input[type="text"],
  .tc_extra_product_options input[type="email"],
  .tc_extra_product_options input[type="number"],
  .tc_extra_product_options input[type="url"],
  .tc_extra_product_options textarea,
  .tc_extra_product_options select {
    min-height: 44px !important;
    font-size: 16px !important; /* Evita zoom automático iOS */
    padding: 8px 12px !important;
    width: 100% !important;
    box-sizing: border-box;
    border-radius: 4px;
  }

  .tc_extra_product_options textarea {
    min-height: 80px !important;
  }
}

/* EPO-3 — SWATCH / COLOR / IMAGEN selectors de EPO
   Swatches de color/imagen para selección de variante del sombrero */
@media (max-width: 549px) {
  .tc_extra_product_options .tc_element .tc-label-image-container,
  .tc_extra_product_options .tc_element .tc-color-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Cada swatch mínimo 44×44px para toque cómodo */
  .tc_extra_product_options .tc_element .tc-label-image-container label,
  .tc_extra_product_options .tc_element .tc-color-container label {
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
  }
}

/* EPO-4 — BOTÓN EPO (el que reemplaza al nativo): Tamaño táctil
   TM EPO reemplaza button.single_add_to_cart_button con su propio botón
   que tiene los campos EPO validados. Este sí queremos grande y visible. */
@media (max-width: 768px) {
  /* Botón submit propio de TM EPO */
  .tc_extra_product_options .tc_buy_button button,
  .tc_extra_product_options .tc_buy_button input[type="submit"],
  .woocommerce div.product form.cart .tc_extra_product_options .tc_buy_button .single_add_to_cart_button,
  .epo_custom_submit_button,
  .tc_epo_buy_button {
    min-height: 52px !important;
    width: 100% !important;
    font-size: 16px !important;
    padding: 14px 20px !important;
    display: block !important; /* Visible — este ES el botón de TM EPO */
    text-align: center;
    box-sizing: border-box;
    margin-top: 12px;
  }
}

/* EPO-5 — ETIQUETAS DE CAMPO EPO: Legibilidad
   Mejora las etiquetas de los campos de configuración del sombrero */
@media (max-width: 549px) {
  .tc_extra_product_options .tc-label,
  .tc_extra_product_options label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
  }

  /* Descripción/tooltip de campo EPO */
  .tc_extra_product_options .tc-epo-description {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
  }
}

/* EPO-6 — CHECKBOXES Y RADIOS EPO: Touch target
   Checkboxes y radios en grupos de selección del sombrero */
@media (max-width: 768px) {
  .tc_extra_product_options input[type="checkbox"],
  .tc_extra_product_options input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin-right: 8px;
    cursor: pointer;
  }

  /* Wrapper de radio/checkbox: area táctil completa */
  .tc_extra_product_options .tc_element .tc_label_wrap {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
  }
}

/* EPO-7 — PRECIO TOTAL EPO: Visible y prominente
   Cuando EPO muestra el precio total configurado */
@media (max-width: 768px) {
  .tc_extra_product_options .tc_epo_totals,
  .tc_extra_product_options .tc-totals-container,
  .woocommerce div.product .tc_extra_product_options .epo-price-display {
    font-size: 18px !important;
    font-weight: 700;
    padding: 12px 0;
    border-top: 1px solid #e8e4dc;
    margin-top: 12px;
  }
}

/* EPO-8 — SECCIONES/GRUPOS EPO: Separación visual
   TM EPO agrupa campos en secciones; en móvil añadimos separación */
@media (max-width: 549px) {
  .tc_extra_product_options .tc_element {
    margin-bottom: 16px;
  }

  .tc_extra_product_options .tc_element:last-child {
    margin-bottom: 0;
  }
}


/* ============================================================
   FIN MOBILE_FIX_CSS v1.1

   Para aplicar: Gestionado automáticamente por panamahut-master
   Total: ~32 correcciones originales + 8 reglas EPO_COMPAT
   Breakpoints usados: 549px (mobile), 768px (tablet)
   No afecta ningún elemento en ≥ 850px (desktop)

   CAMBIOS v1.1 vs v1.0:
   ✓ FIX CRÍTICO B1: Eliminado display:flex !important → compatible TM EPO
   ✓ FIX B3: Restringido display:block solo a tabla variaciones nativa
   ✓ NUEVO EPO_COMPAT: 8 reglas móvil específicas para TM Extra Product Options
   ============================================================ */