/* ======================================================================
   UBD Visual UX · ETS PEEK 1.6.4
   Producto móvil: 2 filas + 2.5 tarjetas visibles + scroll horizontal.

   IMPORTANTE
   - Selectores verificados contra el DOM real guardado el 2026-09-11.
   - Esta capa existe para imponerse de forma acotada sobre la regla tardía
     del tema ubd-stability-0.6.4.9 que fuerza ETS a 2 columnas hasta 1024px.
   - No cambia HTML, inputs, names, values, data-price, eventos ni JS de ETS.
   ====================================================================== */

@media (max-width: 767px) {
  /* Evita que el contenedor del grupo corte la media tarjeta de pista. */
  html.ubd-product-ready body#product.ubd-modular-page
  .block-product-attribute-custom
  .list-attribute-custom
  > .from-group-option.ubd-eto-modularized[data-ubd-eto-ready="1"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    contain: none !important;
    clip-path: none !important;
  }

  /*
   * Selector exacto del track ETS real:
   * .from-group-option.ubd-eto-modularized[data-ubd-eto-ready="1"]
   *   > .ubd-eto-modular-track[role="group"]
   *
   * 2 filas: cada columna contiene dos extras.
   * 2.5 visibles: dos tarjetas completas + media tercera.
   */
  html.ubd-product-ready body#product.ubd-modular-page
  .block-product-attribute-custom
  .list-attribute-custom
  > .from-group-option.ubd-eto-modularized[data-ubd-eto-ready="1"]
  > .ubd-eto-modular-track[role="group"] {
    display: grid !important;
    grid-template-columns: none !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: calc((100% - 20px) / 2.5) !important;
    grid-auto-rows: auto !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 2px 0 9px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    scroll-padding-inline: 0 !important;
    scrollbar-width: none !important;
    overscroll-behavior-inline: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html.ubd-product-ready body#product.ubd-modular-page
  .block-product-attribute-custom
  .list-attribute-custom
  > .from-group-option.ubd-eto-modularized[data-ubd-eto-ready="1"]
  > .ubd-eto-modular-track[role="group"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Sólo dimensiones de celda; la apariencia de la tarjeta sigue siendo la actual. */
  html.ubd-product-ready body#product.ubd-modular-page
  .block-product-attribute-custom
  .list-attribute-custom
  > .from-group-option.ubd-eto-modularized[data-ubd-eto-ready="1"]
  > .ubd-eto-modular-track[role="group"]
  > :is(.radio, .checkbox)[data-ubd-eto-card] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
  }
}