/* =========================================================
   IFP PRODUCT PAGE - Mobile Fixes (MÁXIMA ESPECIFICIDAD)
   - Selectores ultra-específicos para vencer a Astra
   - Todos los estilos con !important para máxima prioridad
   - EDITADO: elimina duplicados/pisados y corrige scroll horizontal de thumbs
   ========================================================= */

/* =========================================================
   MÓVIL: ≤768px
   ========================================================= */
@media (max-width: 768px) {

  /* 0) Nunca permitir que la página se ensanche */
  html, body{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 1) Cortar overflow en los padres donde se está “colando” el ancho
        (IMPORTANTE: aquí NO ponemos overflow:hidden en images/gallery para no matar el drag/scroll) */
  body.single-product .site-content,
  body.single-product .ast-container,
  body.single-product .content-area,
  body.single-product .site-main,
  body.single-product .woocommerce,
  body.single-product div.product,
  body.single-product div.product div.images,
  body.single-product div.product .woocommerce-product-gallery{
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* ===== TÍTULO DEL PRODUCTO ===== */
  body.single-product.woocommerce div.product h1.product_title.entry-title,
  body.single-product div.product h1.product_title.entry-title,
  h1.product_title.entry-title{
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }

  /* ===== PRECIO ===== */
  body.single-product.woocommerce div.product p.price,
  body.single-product div.product p.price,
  p.price{
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  body.single-product.woocommerce div.product p.price .woocommerce-Price-amount,
  body.single-product div.product p.price .woocommerce-Price-amount,
  p.price .woocommerce-Price-amount{
    font-size: 16px !important;
  }

  /* ===== DESCRIPCIÓN CORTA ===== */
  body.single-product.woocommerce div.product div.woocommerce-product-details__short-description,
  body.single-product div.product div.woocommerce-product-details__short-description,
  div.woocommerce-product-details__short-description{
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
  }

  body.single-product.woocommerce div.product div.woocommerce-product-details__short-description p,
  body.single-product div.product div.woocommerce-product-details__short-description p,
  div.woocommerce-product-details__short-description p{
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }

  /* ===== LISTA DE CARACTERÍSTICAS (CRÍTICO) ===== */
  body.single-product.woocommerce div.product div.woocommerce-product-details__short-description ul,
  body.single-product div.product div.woocommerce-product-details__short-description ul,
  div.woocommerce-product-details__short-description ul,
  .woocommerce-product-details__short-description ul{
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-left: 16px !important;
    margin-bottom: 12px !important;
  }

  body.single-product.woocommerce div.product div.woocommerce-product-details__short-description ul li,
  body.single-product div.product div.woocommerce-product-details__short-description ul li,
  div.woocommerce-product-details__short-description ul li,
  div.woocommerce-product-details__short-description li,
  .woocommerce-product-details__short-description li{
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }

  /* ===== CONTENEDOR SUMMARY ===== */
  body.single-product.woocommerce div.product div.summary.entry-summary,
  body.single-product div.product div.summary.entry-summary,
  div.summary.entry-summary{
    padding: 0 12px !important;
  }

  /* ===== VARIACIONES ===== */
  body.single-product.woocommerce div.product form.cart table.variations,
  body.single-product div.product form.cart table.variations,
  table.variations{
    margin-bottom: 14px !important;
    font-size: 13px !important;
  }

  body.single-product.woocommerce div.product form.cart table.variations tr,
  body.single-product div.product form.cart table.variations tr,
  table.variations tr{
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 10px !important;
  }

  body.single-product.woocommerce div.product form.cart table.variations td,
  body.single-product.woocommerce div.product form.cart table.variations th,
  body.single-product div.product form.cart table.variations td,
  body.single-product div.product form.cart table.variations th,
  table.variations td,
  table.variations th{
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
  }

  body.single-product.woocommerce div.product form.cart table.variations label,
  body.single-product div.product form.cart table.variations label,
  table.variations label{
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    display: block !important;
  }

  body.single-product.woocommerce div.product form.cart table.variations select,
  body.single-product div.product form.cart table.variations select,
  table.variations select{
    width: 100% !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
  }

  /* ===== FORMULARIO DE CARRITO ===== */
  body.single-product.woocommerce div.product form.cart,
  body.single-product div.product form.cart,
  form.cart{
    margin-bottom: 18px !important;
  }

  body.single-product.woocommerce div.product form.cart div.quantity,
  body.single-product div.product form.cart div.quantity,
  div.quantity{
    margin-bottom: 10px !important;
  }

  body.single-product.woocommerce div.product form.cart div.quantity input[type="number"],
  body.single-product div.product form.cart div.quantity input[type="number"],
  div.quantity input[type="number"]{
    width: 100% !important;
    max-width: 100px !important;
    font-size: 14px !important;
    padding: 10px !important;
    border-radius: 8px !important;
  }

  /* ===== BOTÓN AÑADIR AL CARRITO (CRÍTICO) ===== */
  body.single-product.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt,
  body.single-product div.product form.cart button.single_add_to_cart_button.button.alt,
  button.single_add_to_cart_button.button.alt,
  .single_add_to_cart_button{
    width: 100% !important;
    font-size: 14px !important;
    padding: 14px 20px !important;
    border-radius: 10px !important;
    margin-top: 8px !important;
    max-width: 100% !important;
  }

  /* ===== META DEL PRODUCTO ===== */
  body.single-product.woocommerce div.product div.product_meta,
  body.single-product div.product div.product_meta,
  div.product_meta{
    font-size: 12px !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
  }

  body.single-product.woocommerce div.product div.product_meta > span,
  body.single-product div.product div.product_meta > span,
  div.product_meta > span{
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
  }

  /* ===== TABS ===== */
  body.single-product.woocommerce div.product div.woocommerce-tabs.wc-tabs-wrapper,
  body.single-product div.product div.woocommerce-tabs.wc-tabs-wrapper,
  div.woocommerce-tabs.wc-tabs-wrapper{
    margin-top: 20px !important;
  }

  body.single-product.woocommerce div.product div.woocommerce-tabs ul.tabs.wc-tabs,
  body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs,
  ul.tabs.wc-tabs{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    padding-bottom: 10px !important;
  }

  body.single-product.woocommerce div.product div.woocommerce-tabs ul.tabs.wc-tabs li,
  body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs li,
  ul.tabs.wc-tabs li{
    flex: 1 1 auto !important;
    margin: 0 !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 8px !important;
    background: #fff !important;
  }

  body.single-product.woocommerce div.product div.woocommerce-tabs ul.tabs.wc-tabs li a,
  body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs li a,
  ul.tabs.wc-tabs li a{
    font-size: 12px !important;
    padding: 8px 10px !important;
    display: block !important;
    text-align: center !important;
  }

  body.single-product.woocommerce div.product div.woocommerce-tabs ul.tabs.wc-tabs li.active,
  body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs li.active,
  ul.tabs.wc-tabs li.active{
    background: #f3f4f6 !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
  }

  body.single-product.woocommerce div.product div.woocommerce-tabs div.woocommerce-Tabs-panel,
  body.single-product div.product div.woocommerce-tabs div.woocommerce-Tabs-panel,
  div.woocommerce-Tabs-panel{
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  body.single-product.woocommerce div.product div.woocommerce-tabs div.woocommerce-Tabs-panel h2,
  body.single-product div.product div.woocommerce-tabs div.woocommerce-Tabs-panel h2,
  div.woocommerce-Tabs-panel h2{
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }

  /* ===== PRODUCTOS RELACIONADOS ===== */
  body.single-product section.related.products,
  section.related.products{
    margin-top: 28px !important;
  }

  body.single-product section.related.products h2,
  section.related.products h2{
    font-size: 16px !important;
    margin-bottom: 14px !important;
  }

  /* FORZAR 2 COLUMNAS */
  body.single-product section.related.products ul.products,
  section.related.products ul.products,
  .related ul.products{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  body.single-product section.related.products ul.products li.product,
  section.related.products ul.products li.product,
  .related ul.products li{
    width: 100% !important;
    margin: 0 !important;
  }

  /* ===== BREADCRUMBS ===== */
  body.single-product nav.woocommerce-breadcrumb,
  nav.woocommerce-breadcrumb{
    font-size: 11px !important;
    margin-bottom: 14px !important;
  }

  /* ===== GALERÍA ===== */
  body.single-product.woocommerce div.product div.woocommerce-product-gallery,
  body.single-product div.product div.woocommerce-product-gallery,
  div.woocommerce-product-gallery{
    margin-bottom: 16px !important;
  }

  /* ===== CONTENEDOR PRINCIPAL ===== */
  body.single-product.woocommerce div.product,
  body.single-product div.product,
  div.product{
    padding: 0 12px !important;
  }

  /* =========================================================
     GALERÍA: thumbs en horizontal + scroll real (Woo/FlexSlider)
     ========================================================= */

  /* La columna de imágenes no puede crecer */
  body.single-product.woocommerce div.product div.images,
  body.single-product.woocommerce div.product div.woocommerce-product-gallery,
  body.single-product div.product div.images,
  body.single-product div.product div.woocommerce-product-gallery{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Thumbs: fila + scroll horizontal */
  body.single-product.woocommerce div.product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs,
  body.single-product div.product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;

    gap: 8px !important;
    padding: 10px 12px 12px 12px !important;
    margin: 10px 0 0 0 !important;

    /* Evita que el ancho total empuje al layout */
    contain: content !important;
  }

  body.single-product.woocommerce div.product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li,
  body.single-product div.product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li{
    flex: 0 0 72px !important;
    width: 72px !important;
    max-width: 72px !important;
  }

  body.single-product.woocommerce div.product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img,
  body.single-product div.product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img{
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Barra visible en navegadores WebKit (si el sistema la muestra) */
  body.single-product.woocommerce div.product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs::-webkit-scrollbar,
  body.single-product div.product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs::-webkit-scrollbar{
    height: 10px !important;
  }

  body.single-product.woocommerce div.product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs::-webkit-scrollbar-thumb,
  body.single-product div.product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.25) !important;
    border-radius: 999px !important;
  }

  /* Indicador visual (fade) para que se note que hay más aunque la barra no se vea */
  body.single-product .woocommerce-product-gallery{
    position: relative !important;
  }

  body.single-product .woocommerce-product-gallery::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 56px !important;
    pointer-events: none !important;
    background: linear-gradient(to right,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,0) 12%,
      rgba(255,255,255,0) 88%,
      rgba(255,255,255,1) 100%
    ) !important;
  }

  /* =========================================================
     Si estás usando tu galería IFP en móvil (ifp-mg)
     ========================================================= */
  body.single-product .ifp-mg__thumbs{
    display:flex !important;
    flex-wrap:nowrap !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;

    gap:8px !important;
    padding:10px 12px 12px 12px !important;
    margin-top:10px !important;

    contain: content !important;
  }

  body.single-product .ifp-mg__th{
    flex: 0 0 72px !important;
    width:72px !important;
    max-width:72px !important;
    display:block !important;
  }

  body.single-product .ifp-mg__thImg{
    width:72px !important;
    height:72px !important;
    object-fit:cover !important;
    display:block !important;
  }

  body.single-product .ifp-mg__thumbs::-webkit-scrollbar{
    height: 10px !important;
  }

  body.single-product .ifp-mg__thumbs::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.25) !important;
    border-radius: 999px !important;
  }

  /* Summary: asegurar que nada empuje */
  body.single-product .summary,
  body.single-product .summary *{
    max-width: 100% !important;
  }

  /* Tablas: permitir scroll interno */
  body.single-product table{
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
  }
}

/* =========================================================
   MÓVIL PEQUEÑO: ≤480px
   ========================================================= */
@media (max-width: 480px) {

  body.single-product.woocommerce div.product h1.product_title.entry-title,
  h1.product_title.entry-title{
    font-size: 16px !important;
  }

  body.single-product.woocommerce div.product p.price,
  p.price{
    font-size: 15px !important;
  }

  body.single-product section.related.products ul.products,
  section.related.products ul.products{
    grid-template-columns: 1fr !important;
  }

  body.single-product.woocommerce div.product div.woocommerce-tabs ul.tabs.wc-tabs,
  ul.tabs.wc-tabs{
    flex-direction: column !important;
  }

  body.single-product.woocommerce div.product div.woocommerce-tabs ul.tabs.wc-tabs li,
  ul.tabs.wc-tabs li{
    flex: 1 1 100% !important;
  }

  body.single-product.woocommerce div.product div.woocommerce-product-details__short-description ul,
  div.woocommerce-product-details__short-description ul{
    font-size: 11px !important;
  }

  body.single-product.woocommerce div.product div.woocommerce-product-details__short-description li,
  div.woocommerce-product-details__short-description li{
    font-size: 11px !important;
  }
}

/* =========================================================
   TABLET: 769px - 1024px
   ========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {

  body.single-product.woocommerce div.product h1.product_title.entry-title,
  h1.product_title.entry-title{
    font-size: 22px !important;
  }

  body.single-product.woocommerce div.product p.price,
  p.price{
    font-size: 18px !important;
  }

  body.single-product.woocommerce div.product div.woocommerce-product-details__short-description,
  div.woocommerce-product-details__short-description{
    font-size: 14px !important;
  }

  body.single-product.woocommerce div.product div.woocommerce-product-details__short-description ul,
  div.woocommerce-product-details__short-description ul{
    font-size: 13px !important;
  }
}