/* =========================================================
   UBD Modular Bonito 1.8.0 · ETS Extra Options
   Capa exclusivamente visual. No oculta ni sustituye controles.
   ========================================================= */
html.ubd-product-ready body#product .block-product-attribute-custom {
    --ubd-eto-ink: #20383d;
    --ubd-eto-muted: #667b80;
    --ubd-eto-line: rgba(32, 56, 61, .10);
    --ubd-eto-orange: #f2ae69;
    --ubd-eto-coral: #ef9c7a;
    --ubd-eto-yellow: #f4d176;
    --ubd-eto-green: #b9d68f;
    --ubd-eto-mint: #91c8b4;
    width: 100% !important;
    margin: 16px 0 !important;
    padding: 16px !important;
    border: 1px solid var(--ubd-eto-line) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 14px 34px rgba(32, 56, 61, .07) !important;
    color: var(--ubd-eto-ink) !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom > .col-md-12 {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    float: none !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .form-group {
    margin: 0 0 12px !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .form-group h4 {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fff3e7 !important;
    color: var(--ubd-eto-ink) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .list-attribute-custom {
    display: grid !important;
    gap: 14px !important;
    width: 100% !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .from-group-option {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 13px !important;
    overflow: hidden !important;
    border: 1px solid var(--ubd-eto-line) !important;
    border-radius: 19px !important;
    background: #fbfaf8 !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .from-group-option > h5 {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 30px !important;
    margin: 0 0 10px !important;
    padding: 0 2px 9px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ubd-eto-line) !important;
    color: var(--ubd-eto-ink) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1px !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio,
html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox {
    position: relative !important;
    display: flex !important;
    min-width: 0 !important;
    min-height: 142px !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(32, 56, 61, .08) !important;
    border-radius: 17px !important;
    background: #fff4e8 !important;
    box-shadow: none !important;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :nth-child(5n + 2) {
    background: #fff0ea !important;
}
html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :nth-child(5n + 3) {
    background: #fff8dc !important;
}
html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :nth-child(5n + 4) {
    background: #f2f8e9 !important;
}
html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :nth-child(5n + 5) {
    background: #eaf7f2 !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio:hover,
html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(231, 146, 60, .34) !important;
    box-shadow: 0 10px 22px rgba(32, 56, 61, .08) !important;
}

@supports selector(:has(*)) {
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio:has(input:checked),
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox:has(input:checked) {
        border-color: #e7923c !important;
        box-shadow: 0 0 0 2px rgba(231, 146, 60, .14), 0 12px 24px rgba(32, 56, 61, .09) !important;
    }
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio > label,
html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox > label {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :is(.radio, .checkbox) > label > div:first-child {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 0 !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ets_input_group {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
    margin: 0 !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom img.ets_zoom_img {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.72) !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .attr-text {
    display: block !important;
    width: 100% !important;
    color: var(--ubd-eto-ink) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .product-discount {
    display: block !important;
    margin-top: 4px !important;
    color: var(--ubd-eto-muted) !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ets_attr_desc_small {
    width: 100% !important;
    margin: 7px 0 0 !important;
    padding: 7px 0 0 !important;
    border-top: 1px dashed rgba(32, 56, 61, .14) !important;
    color: var(--ubd-eto-muted) !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom select.form-control {
    min-height: 46px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--ubd-eto-line) !important;
    border-radius: 13px !important;
    background: #fff !important;
    color: var(--ubd-eto-ink) !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .attribute-custom-price {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 34px !important;
    margin: 12px 0 0 !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    background: #eef7f2 !important;
    color: var(--ubd-eto-ink) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ets_notification_ex {
    margin: 0 !important;
    padding: 9px 11px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: #fff8dc !important;
    color: var(--ubd-eto-ink) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}

/* Tablet: tres tarjetas por fila. */
@media (min-width: 700px) and (max-width: 1050px) {
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Móvil: dos filas horizontales y aproximadamente 2.5 opciones visibles. */
@media (max-width: 699px) {
    html.ubd-product-ready body#product .block-product-attribute-custom {
        margin: 12px 0 !important;
        padding: 12px !important;
        border-radius: 19px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .form-group h4 {
        min-height: 31px !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .from-group-option {
        padding: 11px 9px 10px !important;
        overflow: visible !important;
        border-radius: 17px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .from-group-option > h5 {
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
        font-size: 12px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track {
        display: grid !important;
        grid-template-columns: none !important;
        grid-template-rows: repeat(2, minmax(126px, auto)) !important;
        grid-auto-flow: column !important;
        grid-auto-columns: calc((100% - 20px) / 2.5) !important;
        gap: 9px 10px !important;
        width: calc(100% + 9px) !important;
        margin-right: -9px !important;
        padding: 1px 9px 7px 1px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: none !important;
        overscroll-behavior-inline: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track::-webkit-scrollbar {
        display: none !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio,
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox {
        min-height: 126px !important;
        padding: 8px 6px !important;
        border-radius: 15px !important;
        scroll-snap-align: start !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom img.ets_zoom_img {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        border-radius: 11px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .attr-text {
        font-size: 10.5px !important;
        line-height: 1.2 !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .product-discount,
    html.ubd-product-ready body#product .block-product-attribute-custom .ets_attr_desc_small {
        font-size: 9px !important;
    }
}

/* =========================================================
   1.8.1 · ETS Extra Options · tarjetas sólidas intensas
   Sin bordes, colores fuertes, texto blanco
   ========================================================= */
html.ubd-product-ready body#product .block-product-attribute-custom {
    --ubd-eto-card-1: #ea7e34;
    --ubd-eto-card-2: #df6d4f;
    --ubd-eto-card-3: #d5a523;
    --ubd-eto-card-4: #6eb347;
    --ubd-eto-card-5: #2da98d;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio,
html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox {
    border: 0 !important;
    background: var(--ubd-eto-card-1) !important;
    box-shadow: 0 12px 24px rgba(32,56,61,.12) !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :nth-child(5n + 2) {
    background: var(--ubd-eto-card-2) !important;
}
html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :nth-child(5n + 3) {
    background: var(--ubd-eto-card-3) !important;
}
html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :nth-child(5n + 4) {
    background: var(--ubd-eto-card-4) !important;
}
html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :nth-child(5n + 5) {
    background: var(--ubd-eto-card-5) !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio:hover,
html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox:hover {
    border-color: transparent !important;
    box-shadow: 0 16px 30px rgba(32,56,61,.16) !important;
}

@supports selector(:has(*)) {
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio:has(input:checked),
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox:has(input:checked) {
        box-shadow: 0 0 0 3px rgba(255,255,255,.92), 0 0 0 6px rgba(32,56,61,.12), 0 16px 30px rgba(32,56,61,.18) !important;
        transform: translateY(-1px) !important;
    }
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :is(.radio, .checkbox) > label {
    color: #fff !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :is(.radio, .checkbox) > label > div:first-child {
    gap: 9px !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom img.ets_zoom_img {
    background: rgba(255,255,255,.18) !important;
    box-shadow: none !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .attr-text,
html.ubd-product-ready body#product .block-product-attribute-custom .product-discount,
html.ubd-product-ready body#product .block-product-attribute-custom .ets_attr_desc_small,
html.ubd-product-ready body#product .block-product-attribute-custom .product-discount span,
html.ubd-product-ready body#product .block-product-attribute-custom .ets_attr_desc_small span,
html.ubd-product-ready body#product .block-product-attribute-custom .attribute-custom-price,
html.ubd-product-ready body#product .block-product-attribute-custom .attribute-custom-price * {
    color: #fff !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .product-discount {
    opacity: .95 !important;
    font-weight: 700 !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ets_attr_desc_small {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px dashed rgba(255,255,255,.32) !important;
    opacity: .92 !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .attribute-custom-price {
    background: rgba(255,255,255,.16) !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ets_input_group input,
html.ubd-product-ready body#product .block-product-attribute-custom .ets_input_group i,
html.ubd-product-ready body#product .block-product-attribute-custom .ets_input_group .fa,
html.ubd-product-ready body#product .block-product-attribute-custom .ets_input_group .material-icons {
    color: #fff !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ets_input_group {
    top: 8px !important;
    right: 8px !important;
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.22) !important;
    backdrop-filter: blur(2px) !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .from-group-option {
    background: #fbfaf8 !important;
}

@media (max-width: 699px) {
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio,
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox {
        min-height: 132px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .attr-text {
        font-size: 11px !important;
    }
}


/* =========================================================
   1.8.2 · Corrección de la capa blanca heredada
   product-polish-live-1.4.1.css imponía fondo blanco al label.
   Se neutraliza exclusivamente dentro de las tarjetas ETS.
   ========================================================= */
html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :is(.radio, .checkbox) > label.control-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :is(.radio, .checkbox) > label.control-label > div:first-child {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :is(.radio, .checkbox) :is(.attr-text, .product-discount, .product-discount strong, .ets_attr_desc_small, .attribute_price_save, .price) {
    color: #fff !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :is(.radio, .checkbox) .ets_attr_desc_small {
    background: transparent !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :is(.radio, .checkbox) img.ets_zoom_img {
    border: 0 !important;
    background: rgba(255,255,255,.16) !important;
    box-shadow: none !important;
}

/* =========================================================
   1.8.3 · Desaplastar tarjetas ETS
   Forzar ancho completo de cada card y columnas más cómodas
   ========================================================= */
html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track {
    align-items: stretch !important;
    justify-items: stretch !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio,
html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    float: none !important;
    flex: initial !important;
    align-self: stretch !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :is(.radio, .checkbox) > label,
html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :is(.radio, .checkbox) > label.control-label {
    width: 100% !important;
    max-width: none !important;
}

@media (min-width: 1200px) {
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio,
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox {
        min-height: 182px !important;
        padding: 12px 10px !important;
        border-radius: 20px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom img.ets_zoom_img {
        width: 86px !important;
        height: 86px !important;
        min-width: 86px !important;
        max-width: 86px !important;
        border-radius: 16px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .attr-text {
        font-size: 14px !important;
        line-height: 1.22 !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .product-discount,
    html.ubd-product-ready body#product .block-product-attribute-custom .ets_attr_desc_small {
        font-size: 11px !important;
    }
}

@media (min-width: 700px) and (max-width: 1199px) {
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 11px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio,
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox {
        min-height: 170px !important;
        padding: 11px 9px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom img.ets_zoom_img {
        width: 78px !important;
        height: 78px !important;
        min-width: 78px !important;
        max-width: 78px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .attr-text {
        font-size: 13px !important;
        line-height: 1.22 !important;
    }
}

@media (max-width: 699px) {
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track {
        grid-auto-columns: calc((100% - 18px) / 2.35) !important;
        gap: 10px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio,
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox {
        min-height: 142px !important;
        padding: 9px 8px !important;
        border-radius: 16px !important;
    }
}

/* =========================================================
   1.8.4 · Corrección real de ancho
   El track era hijo de un grid de dos columnas y ocupaba solo la primera.
   Ahora abarca todo el contenedor y las tarjetas crecen a lo ancho.
   ========================================================= */
html.ubd-product-ready body#product .block-product-attribute-custom .from-group-option > .ubd-eto-modular-track {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Escritorio: anchas y menos altas. */
@media (min-width: 1200px) {
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track {
        grid-template-columns: repeat(5, minmax(150px, 1fr)) !important;
        gap: 14px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio,
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox {
        min-height: 154px !important;
        height: auto !important;
        padding: 11px 12px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom img.ets_zoom_img {
        width: 74px !important;
        height: 74px !important;
        min-width: 74px !important;
        max-width: 74px !important;
    }
}

/* Tablet: cuatro tarjetas realmente anchas. */
@media (min-width: 700px) and (max-width: 1199px) {
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track {
        grid-template-columns: repeat(4, minmax(130px, 1fr)) !important;
        gap: 12px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio,
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox {
        min-height: 148px !important;
        height: auto !important;
        padding: 10px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom img.ets_zoom_img {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
    }
}

/* Móvil: dos filas, 2.4 opciones visibles y tarjetas menos altas. */
@media (max-width: 699px) {
    html.ubd-product-ready body#product .block-product-attribute-custom .from-group-option {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .from-group-option > h5,
    html.ubd-product-ready body#product .block-product-attribute-custom .from-group-option > .attribute-custom-price,
    html.ubd-product-ready body#product .block-product-attribute-custom .from-group-option > .ubd-eto-modular-track {
        grid-column: 1 !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track {
        grid-template-columns: none !important;
        grid-template-rows: repeat(2, 128px) !important;
        grid-auto-flow: column !important;
        grid-auto-columns: calc((100% - 18px) / 2.4) !important;
        gap: 10px !important;
        width: calc(100% + 8px) !important;
        max-width: none !important;
        margin-right: -8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio,
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 128px !important;
        height: 128px !important;
        padding: 8px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom img.ets_zoom_img {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .attr-text {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        font-size: 10.5px !important;
        line-height: 1.18 !important;
    }
}

/* =========================================================
   1.8.5 · Móvil: carrusel a todo el ancho, sin recorte externo
   ETS inyecta después un grid de dos columnas. Se neutraliza
   únicamente en pantallas móviles y se conservan sus controles.
   ========================================================= */
@media (max-width: 767px) {
    html.ubd-product-ready body#product .block-product-attribute-custom,
    html.ubd-product-ready body#product .block-product-attribute-custom > .col-md-12,
    html.ubd-product-ready body#product .block-product-attribute-custom .list-attribute-custom,
    html.ubd-product-ready body#product .block-product-attribute-custom .from-group-option {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        overflow: visible !important;
        contain: none !important;
        clip-path: none !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .from-group-option,
    html.ubd-product-ready body#product .block-product-attribute-custom .list-attribute-custom > .from-group-option {
        display: block !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .from-group-option > h5 {
        display: flex !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .from-group-option > .attribute-custom-price {
        width: auto !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .from-group-option > .ubd-eto-modular-track,
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track {
        display: grid !important;
        grid-template-columns: none !important;
        grid-template-rows: repeat(2, 132px) !important;
        grid-auto-flow: column !important;
        grid-auto-columns: clamp(136px, 39vw, 164px) !important;
        column-gap: 10px !important;
        row-gap: 10px !important;
        width: calc(100% + 20px) !important;
        max-width: calc(100% + 20px) !important;
        min-width: 0 !important;
        margin: 0 -10px !important;
        padding: 2px 10px 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        scroll-padding-inline: 10px !important;
        scrollbar-width: none !important;
        overscroll-behavior-inline: contain !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track::-webkit-scrollbar {
        display: none !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .radio,
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > .checkbox {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 132px !important;
        height: 132px !important;
        margin: 0 !important;
        padding: 8px !important;
        scroll-snap-align: start !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :is(.radio, .checkbox) > label.control-label {
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom img.ets_zoom_img {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .attr-text {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        max-height: 2.45em !important;
        overflow: hidden !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
}

/* =========================================================
   1.8.6 · Móvil: precio siempre visible antes del nombre
   Solo presentación; no altera valores ni controles ETS.
   ========================================================= */
@media (max-width: 767px) {
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :is(.radio, .checkbox) > label.control-label > div:first-child {
        justify-content: flex-start !important;
        gap: 5px !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom img.ets_zoom_img {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        flex: 0 0 52px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .attr-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        width: 100% !important;
        height: 43px !important;
        min-height: 43px !important;
        max-height: 43px !important;
        margin: 0 !important;
        overflow: hidden !important;
        color: #fff !important;
        font-size: 9.6px !important;
        font-weight: 800 !important;
        line-height: 1.12 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        -webkit-line-clamp: initial !important;
        -webkit-box-orient: initial !important;
    }

    /* El precio es hijo del nombre en ETS. Con flex se coloca arriba. */
    html.ubd-product-ready body#product .block-product-attribute-custom .attr-text > .product-discount {
        order: -1 !important;
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 13px !important;
        margin: 0 0 1px !important;
        padding: 0 !important;
        overflow: visible !important;
        color: #fff !important;
        font-size: 9.2px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: nowrap !important;
        opacity: .96 !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .attr-text > .product-discount strong,
    html.ubd-product-ready body#product .block-product-attribute-custom .attr-text > .product-discount span {
        color: #fff !important;
        font-size: inherit !important;
        line-height: inherit !important;
        white-space: nowrap !important;
    }

    /* La descripción extensa repite el nombre y consumía el espacio del precio. */
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :is(.radio, .checkbox) .ets_attr_desc_small {
        display: none !important;
    }
}

/* =========================================================
   1.8.7 · Descripción del extra seleccionado
   La descripción original permanece en ETS y solo se refleja debajo.
   ========================================================= */
html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-modular-track > :is(.radio, .checkbox) .ets_attr_desc_small {
    display: none !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-selected-details {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px 10px !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 11px 13px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: #fff3e7 !important;
    color: #20383d !important;
    box-shadow: inset 4px 0 0 #ea7e34 !important;
    animation: ubdEtoDetailsIn .18s ease both !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-selected-details[hidden] {
    display: none !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-selected-details-label {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    background: #ea7e34 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-selected-details-title {
    grid-column: 2 !important;
    margin: 0 !important;
    color: #20383d !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-selected-details-copy {
    grid-column: 2 !important;
    margin: 0 !important;
    color: #5f7075 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

@keyframes ubdEtoDetailsIn {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 699px) {
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-selected-details {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        margin-top: 9px !important;
        padding: 9px 10px !important;
        border-radius: 13px !important;
        box-shadow: inset 3px 0 0 #ea7e34 !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-selected-details-label {
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: start !important;
        min-height: 22px !important;
        padding: 4px 7px !important;
        font-size: 8px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-selected-details-title,
    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-selected-details-copy {
        grid-column: 1 !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-selected-details-title {
        font-size: 10.5px !important;
    }

    html.ubd-product-ready body#product .block-product-attribute-custom .ubd-eto-selected-details-copy {
        font-size: 10px !important;
        line-height: 1.35 !important;
    }
}