/* ============================================================
   INLOFF — EPO PERSONALIZADOR
   ============================================================
   Reskin completo del plugin ThemeComplete EPO (7.5.7.2) en PDP.
   - Cards por sección
   - Pills para radio buttons (modelo, tipografía, color)
   - Inputs/select/textarea con identidad de marca
   - Aviso HTML como alert box
   - Precios 0€ ocultos
   - Mobile-first: 16px font-size para evitar zoom iOS
   ============================================================ */


/* ------------------------------------------------------------
   1. CONTAINER + RESET
   ------------------------------------------------------------ */

.tc-extra-product-options.tm-extra-product-options {
    --tcgaprow: 14px;
    --tcgapcolumn: 14px;
    margin: 20px 0 24px;
    padding: 0;
    /* O2.1/transversal — el form usaba Nunito Sans (drift): el resto del
       sitio migró a Outfit en Área 1. Alineamos a la fuente global. */
    font-family: var(--inloff-font-sans, "Outfit", Helvetica, Arial, sans-serif);
    color: var(--inloff-text-primary, #1A1612);
}

/* Quita el ul de Flatsome */
.tc-extra-product-options ul.tm-extra-product-options-fields,
.tc-extra-product-options ul.tm-extra-product-options-fields > li {
    list-style: none !important;
    padding: 0;
    margin: 0;
}


/* ------------------------------------------------------------
   2. SECCIÓN = CARD
   ------------------------------------------------------------ */

/* O2.1 — Aligerar el formulario (decisión D3): se elimina la "caja por
   sección" (cream + borde + radius) que hacía sentir el personalizador como
   una pila de cajas administrativas. Ahora las secciones se separan por
   ritmo de espaciado + el label uppercase de sección + una hairline sutil
   entre secciones consecutivas. Jerarquía por tipografía, no por bordes.
   El aviso/alert conserva su propia caja (reglas .cpf-type-header más abajo,
   independientes de .cpf-section). */
.tc-extra-product-options .cpf-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0 0 32px;
    transition: opacity 0.2s ease;
}

/* Hairline de separación entre secciones consecutivas (no es un borde de
   caja: es un divisor editorial horizontal). El selector salta secciones
   ocultas para no dejar divisores huérfanos. */
.tc-extra-product-options .cpf-section + .cpf-section {
    border-top: 1px solid var(--inloff-border, #E5E0D5);
    padding-top: 32px;
}

/* Si la sección no tiene título y solo contiene un header HTML (aviso)
   → la sección es el alert box, no envolverla en otra card */
.tc-extra-product-options .cpf-section:has(> .tc-section-inner-wrap > .tc-row > .tc-section-fields > .tc-row > .cpf-type-header:only-child):not(:has(.tm-section-label)) {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 12px;
}


/* ------------------------------------------------------------
   3. TÍTULOS DE SECCIÓN
   ------------------------------------------------------------ */

.tc-extra-product-options .tm-section-label,
.tc-extra-product-options h2.tm-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--inloff-text-secondary, #5F5E5A);
    margin: 0 0 16px;
    line-height: 1.4;
    border: 0;
    padding: 0;
}

/* Acento heart editorial antes del título de sección: craft sutil de marca
   que ancla cada bloque sin romper la sobriedad (regla accent ≤10%). */
.tc-extra-product-options .tm-section-label::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: var(--inloff-heart, #C5A184);
}

.tc-extra-product-options .tm-section-label .tc-section-label-text {
    display: inline-block;
}


/* ------------------------------------------------------------
   4. ELEMENT LABELS (h3 por campo)
   ------------------------------------------------------------ */

.tc-extra-product-options .tm-epo-element-label,
.tc-extra-product-options h3.tm-epo-element-label {
    font-size: 14px !important;
    font-weight: 600;
    color: var(--inloff-navy, #1B2540);
    margin: 0 0 8px;
    line-height: 1.4;
    padding: 0;
    border: 0;
}

.tc-extra-product-options .tm-epo-element-label .tc-epo-element-label-text {
    color: var(--inloff-navy, #1B2540);
}

/* Required indicator */
.tc-extra-product-options .tm-epo-required {
    color: var(--inloff-danger, #A32D2D);
    margin-left: 2px;
    font-weight: 700;
}

/* Tooltip "?" icon: el plugin lo deja con .tm-hidden pero ocupa */
.tc-extra-product-options .tm-tooltip.tm-hidden {
    display: none !important;
}


/* ------------------------------------------------------------
   5. PRECIOS 0€ — OCULTOS
   ------------------------------------------------------------ */

/* Oculta toda columna de precio dentro del personalizador (todos los
   extras inloff son gratuitos). Si alguna vez hay extra de pago, añadir
   .inloff-epo-show-price al producto para reactivar. */
.tc-extra-product-options .tc-price-wrap {
    display: none !important;
}

.tc-extra-product-options.inloff-epo-show-price .tc-price-wrap {
    display: flex !important;
}

/* Oculta el totals form (siempre 0€) — vive como sibling, no child */
.tc-totals-form,
.tm-final-totals,
.tm-totals,
.tm-extra-product-options-totals,
form.cart > .tc-totals-form,
.product .tc-totals-form {
    display: none !important;
}

/* También el "Final Total" / "Options Amount" texts */
.tm-custom-price-totals,
.tc-final-totals {
    display: none !important;
}


/* ------------------------------------------------------------
   6. INPUTS (textfield, textarea, select, date, time)
   ------------------------------------------------------------ */

.tc-extra-product-options .tmcp-field.tm-epo-field,
.tc-extra-product-options input.tmcp-textfield,
.tc-extra-product-options textarea.tmcp-textarea,
.tc-extra-product-options select.tmcp-select,
.tc-extra-product-options input.tmcp-date,
.tc-extra-product-options input.tmcp-time {
    width: 100%;
    height: auto;
    min-height: 44px;
    padding: 11px 14px;
    background: #fff;
    border: 1.5px solid var(--inloff-border, #E5E0D5);
    border-radius: 8px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 15px;
    color: var(--inloff-text-primary, #1A1612);
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

/* iOS: 16px previene zoom al tap */
@media (max-width: 768px) {
    .tc-extra-product-options .tmcp-field.tm-epo-field,
    .tc-extra-product-options input.tmcp-textfield,
    .tc-extra-product-options textarea.tmcp-textarea,
    .tc-extra-product-options select.tmcp-select {
        font-size: 16px;
    }
}

/* Textarea: altura + resize vertical */
.tc-extra-product-options textarea.tmcp-textarea {
    min-height: 120px;
    line-height: 1.6;
    resize: vertical;
    padding: 12px 14px;
}

/* Placeholder */
.tc-extra-product-options .tmcp-field::placeholder,
.tc-extra-product-options .tmcp-textfield::placeholder,
.tc-extra-product-options .tmcp-textarea::placeholder {
    color: #8C8984;
    opacity: 1;
}

/* Focus state */
.tc-extra-product-options .tmcp-field.tm-epo-field:focus,
.tc-extra-product-options input.tmcp-textfield:focus,
.tc-extra-product-options textarea.tmcp-textarea:focus,
.tc-extra-product-options select.tmcp-select:focus {
    border-color: var(--inloff-heart, #C5A184);
    outline: none;
    box-shadow: 0 0 0 3px rgba(197, 161, 132, 0.18);
}

/* Hover state */
.tc-extra-product-options .tmcp-field.tm-epo-field:hover:not(:focus),
.tc-extra-product-options input.tmcp-textfield:hover:not(:focus),
.tc-extra-product-options textarea.tmcp-textarea:hover:not(:focus),
.tc-extra-product-options select.tmcp-select:hover:not(:focus) {
    border-color: var(--inloff-heart-light, #CAB397);
}


/* ------------------------------------------------------------
   7. SELECT — flecha custom
   ------------------------------------------------------------ */

.tc-extra-product-options select.tmcp-select {
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%231B2540' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-size: 16px;
}


/* ------------------------------------------------------------
   8. FIELD WRAPPERS — limpiar layout interno
   ------------------------------------------------------------ */

.tc-extra-product-options .tmcp-field-wrap,
.tc-extra-product-options .tmcp-field-wrap-inner {
    width: 100%;
    margin: 0;
    padding: 0;
}

.tc-extra-product-options .tc-field-label-wrap {
    padding: 0;
    width: 100%;
}

.tc-extra-product-options .tm-epo-field-label.fullwidth {
    margin: 0;
    padding: 0;
}

.tc-extra-product-options ul.tmcp-ul-wrap {
    margin: 0;
    padding: 0;
}


/* ------------------------------------------------------------
   9. RADIO BUTTONS → PILLS
   ------------------------------------------------------------ */

/* Container: flex-wrap row */
.tc-extra-product-options .tm-extra-product-options-radio,
.tc-extra-product-options .cpf-type-radio .tmcp-ul-wrap {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Cada opción: pill */
.tc-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio li.tmcp-field-wrap,
.tc-extra-product-options .cpf-type-radio ul.tmcp-ul-wrap li.tmcp-field-wrap,
.tc-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio li.tmcp-field-wrap.tcwidth-100 {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    -ms-flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0;
}

.tc-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-radio li.tmcp-field-wrap .tmcp-field-wrap-inner {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0;
    margin: 0;
}

/* Esconder radio nativo */
.tc-extra-product-options .tm-extra-product-options-radio input[type="radio"].tmcp-radio,
.tc-extra-product-options .cpf-type-radio input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0;
    top: 0;
}

/* Label como pill */
.tc-extra-product-options .tm-extra-product-options-radio li.tmcp-field-wrap label.tm-epo-field-label,
.tc-extra-product-options .cpf-type-radio li.tmcp-field-wrap label.tm-epo-field-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    background: #fff;
    border: 1.5px solid var(--inloff-border, #E5E0D5);
    border-radius: 8px;
    color: var(--inloff-text-primary, #1A1612);
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    margin: 0;
    width: auto;
}

/* Texto de la opción */
.tc-extra-product-options .tm-extra-product-options-radio li.tmcp-field-wrap .tc-label.tm-label,
.tc-extra-product-options .cpf-type-radio li.tmcp-field-wrap .tc-label.tm-label {
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font-weight: inherit;
}

/* Hover */
.tc-extra-product-options .tm-extra-product-options-radio li.tmcp-field-wrap:not(.tc-active) label.tm-epo-field-label:hover,
.tc-extra-product-options .cpf-type-radio li.tmcp-field-wrap:not(.tc-active) label.tm-epo-field-label:hover {
    border-color: var(--inloff-heart, #C5A184);
    background: #FFFEFA;
}

/* Estado seleccionado (plugin añade .tc-active al li) */
.tc-extra-product-options .tm-extra-product-options-radio li.tmcp-field-wrap.tc-active label.tm-epo-field-label,
.tc-extra-product-options .cpf-type-radio li.tmcp-field-wrap.tc-active label.tm-epo-field-label {
    background: var(--inloff-navy, #1B2540);
    border-color: var(--inloff-navy, #1B2540);
    color: #fff;
    box-shadow: 0 1px 2px rgba(27, 37, 64, 0.15);
}

/* Focus accesible vía keyboard */
.tc-extra-product-options .tm-extra-product-options-radio li.tmcp-field-wrap label.tm-epo-field-label:focus-within,
.tc-extra-product-options .cpf-type-radio li.tmcp-field-wrap label.tm-epo-field-label:focus-within {
    box-shadow: 0 0 0 3px rgba(197, 161, 132, 0.25);
}


/* ------------------------------------------------------------
   9.B IMAGE SWATCHES — radios/checkboxes con imagen por opción
   ------------------------------------------------------------
   Estructura HTML que el plugin renderiza con tc-mode-images:

   ul.tmcp-ul-wrap.tc-images-container
     li.tmcp-field-wrap.tc-mode-images
       .tmcp-field-wrap-inner
         .tc-field-label-wrap
           label.tm-epo-field-label
             span.tc-label-wrap               ← flex row por default
               span.tc-input-wrap (radio)
               img.tc-image.radio-image
               span.tc-label.radio-image-label
                 span.tc-label-inner
                   span.tc-label-text         ← "Arbolito"
                   span.tc-price-wrap         ← oculto por nuestro CSS
   ------------------------------------------------------------ */

/* Container: grid responsivo.
   - Base / pocas opciones: 2 columnas (colores y tipografías se ven mejor a 2-up).
   - Escritorio con 5+ opciones (catálogos largos tipo bola Harry Potter): 3
     columnas para que la lista no quede interminable. `:has(> li:nth-child(5))`
     cuenta las opciones sin tocar el markup del plugin (Baseline desde 2023).
   - Móvil: siempre 2 columnas → tap targets amplios para elegir con el dedo. */
.tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Yoyó (3107): su ÚNICO selector de imagen es el color (webp planos de color
   sólido). No son "modelos" que haya que ver grandes: se muestran como swatches
   compactos —tiles pequeñas alineadas a la izquierda— en móvil y escritorio, en
   vez de ocupar media fila cada uno. auto-fill de 84px deja los 3 en una línea. */
body.postid-3107 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container {
    grid-template-columns: repeat(auto-fill, 84px) !important;
    justify-content: start !important;
    gap: 12px !important;
}
body.postid-3107 .tc-extra-product-options li.tc-mode-images img.tc-image {
    width: 100% !important;
    height: auto !important;
    border-radius: 10px;
}

@media (min-width: 600px) {
    .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(5)) {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

/* Overrides por-producto: swatches en una sola línea en escritorio.
   `postid-<id>` es la clase que WP pone en el <body> de la ficha. Se scopea
   por producto (y no por nº de opciones) porque otros productos con el mismo
   nº de swatches pero anchos —p.ej. álbum, 4 espirales— se ven mejor a 2-up.
     · nordic (1947): 4 modelos → 4 columnas.
     · boli profe (2001): 3 diseños de caja → 3 columnas. */
@media (min-width: 600px) {
    body.postid-1947 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container {
        grid-template-columns: repeat(4, 1fr);
    }
    /* tarjeta-mensaje-mama (3232): 4 modelos en 1 fila en escritorio. */
    body.postid-3232 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container {
        grid-template-columns: repeat(4, 1fr);
    }
    body.postid-2001 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container {
        grid-template-columns: repeat(3, 1fr);
    }
    /* cuadros flor (2948 inicial, 2886 frase): SOLO el marco (3 acabados) a 3
       columnas; se scopea por nº de opciones (exactamente 3) para NO tocar el
       grid del metacrilato (2 opciones), que se queda a 2-up y equilibrado.
       pulsera profe (2015): SOLO el envoltorio (3 diseños) a 3 columnas, sin
       tocar joyero (2) ni charm (6). */
    body.postid-2948 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(3)):not(:has(> li:nth-child(4))),
    body.postid-2886 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(3)):not(:has(> li:nth-child(4))),
    body.postid-3127 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(3)):not(:has(> li:nth-child(4))),
    body.postid-1966 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(3)):not(:has(> li:nth-child(4))),
    body.postid-2015 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(3)):not(:has(> li:nth-child(4))),
    body.postid-1985 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(3)):not(:has(> li:nth-child(4))),
    body.postid-3146 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(3)):not(:has(> li:nth-child(4))),
    body.postid-2520 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(3)):not(:has(> li:nth-child(4))) {
        grid-template-columns: repeat(3, 1fr);
    }
    /* llaveros minimal (2526) + nuestra-boda (2495): los selects de imagen de
       2 opciones (tipografía) al tamaño de 3 columnas → 2 por fila más
       pequeños. Cualificado por exactamente-2 para no tocar otros grids. */
    body.postid-2526 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(2)):not(:has(> li:nth-child(3))),
    body.postid-2495 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(2)):not(:has(> li:nth-child(3))) {
        grid-template-columns: repeat(3, 1fr);
    }
    /* nuestra-boda (2495) + fotomaton-papa (2435): los 4 modelos → 1 fila. */
    body.postid-2495 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(4)):not(:has(> li:nth-child(5))),
    body.postid-2435 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(4)):not(:has(> li:nth-child(5))),
    body.postid-3184 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(4)):not(:has(> li:nth-child(5))),
    body.postid-3210 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(4)):not(:has(> li:nth-child(5))) {
        grid-template-columns: repeat(4, 1fr);
    }
    /* pulsera profe (2015) + pack (1985): el charm (7 opciones) → 4 por fila
       (la regla genérica 5+ lo dejaba a 3). :nth-child(5) toca SOLO el charm,
       no el joyero (2) ni el envoltorio (3). */
    body.postid-2015 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(5)),
    body.postid-1985 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(5)),
    body.postid-1952 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(5)) {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Guardas del libro de firmas (3102, 3146): 15 swatches de color → 5 por fila
   en escritorio (la etiqueta cabe en una línea y el color se aprecia bien), 3
   en móvil, con el chip a menos padding para que el color domine. Se cualifica
   con :has(li:nth-child(9)) para tocar SOLO el swatch de 15 (guardas), no el de
   3 opciones (modelo del libro, que va a 3-por-fila arriba) del mismo form. */
@media (min-width: 600px) {
    body.postid-3102 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(9)),
    body.postid-3146 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(9)) {
        grid-template-columns: repeat(5, 1fr);
    }
}
@media (max-width: 599px) {
    body.postid-3102 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(9)),
    body.postid-3146 .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container:has(> li:nth-child(9)) {
        grid-template-columns: repeat(3, 1fr);
    }
}
body.postid-3102 .tc-extra-product-options ul.tc-images-container:has(> li:nth-child(9)) img.tc-image,
body.postid-3146 .tc-extra-product-options ul.tc-images-container:has(> li:nth-child(9)) img.tc-image {
    padding: 10px 10px !important;
}

/* Campos en fila (div_size, p.ej. w33-3 = 3 columnas) — fix GENERAL.
   El dropdown custom `.inloff-select` (y algún input) no encoge por debajo de
   su contenido (min-width:auto de los flex items) → desborda la celda y
   "solapa". Fix: min-width:0 en la celda + width 100% box-border en el campo.
   En móvil se apilan (columnas estrechas = ilegibles). */
.tc-extra-product-options .tcwidth-33-3 {
    min-width: 0 !important;
}
.tc-extra-product-options .tcwidth-33-3 .inloff-select,
.tc-extra-product-options .tcwidth-33-3 .inloff-select__trigger,
.tc-extra-product-options .tcwidth-33-3 input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
@media (max-width: 700px) {
    .tc-extra-product-options .tcwidth-33-3 {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .tc-extra-product-options ul.tmcp-ul-wrap.tc-images-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* Cada tile li: limpiar todo el sizing del plugin */
.tc-extra-product-options li.tmcp-field-wrap.tc-mode-images,
.tc-extra-product-options li.tmcp-field-wrap.tc-mode-color,
.tc-extra-product-options li.tmcp-field-wrap.tc-mode-images.tcwidth-100,
.tc-extra-product-options li.tmcp-field-wrap.tc-mode-images.tm-per-row,
.tc-extra-product-options li.tmcp-field-wrap.tc-mode-images.tmhexcolorimage-li-nowh {
    position: relative;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    -ms-flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Inner wrap */
.tc-extra-product-options .tc-mode-images .tmcp-field-wrap-inner,
.tc-extra-product-options .tc-mode-color .tmcp-field-wrap-inner {
    width: 100% !important;
    padding: 0;
    margin: 0;
    display: block;
}

.tc-extra-product-options .tc-mode-images .tc-field-label-wrap,
.tc-extra-product-options .tc-mode-color .tc-field-label-wrap {
    padding: 0 !important;
    margin: 0;
    width: 100%;
    display: block;
}

/* Label = tile card */
.tc-extra-product-options .tc-mode-images label.tm-epo-field-label,
.tc-extra-product-options .tc-mode-color label.tm-epo-field-label,
.tc-extra-product-options .tc-mode-images label.tm-epo-field-label.fullwidth,
.tc-extra-product-options .tc-mode-color label.tm-epo-field-label.fullwidth {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
    border: 1.5px solid var(--inloff-border, #E5E0D5);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 0;
}

/* tc-label-wrap: stack vertical (input hidden + img + texto) */
.tc-extra-product-options .tc-mode-images .tc-label-wrap,
.tc-extra-product-options .tc-mode-color .tc-label-wrap {
    display: block !important;
    flex-direction: column;
    width: 100% !important;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Input radio oculto (visualmente) */
.tc-extra-product-options .tc-mode-images .tc-input-wrap,
.tc-extra-product-options .tc-mode-color .tc-input-wrap {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: 0 !important;
    padding: 0 !important;
}

.tc-extra-product-options .tc-mode-images input[type="radio"],
.tc-extra-product-options .tc-mode-images input[type="checkbox"],
.tc-extra-product-options .tc-mode-color input[type="radio"],
.tc-extra-product-options .tc-mode-color input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
}

/* Imagen del swatch */
.tc-extra-product-options .tc-mode-images img.tc-image,
.tc-extra-product-options .tc-mode-images .radio-image,
.tc-extra-product-options .tc-mode-color img.tc-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
    background: var(--inloff-cream-light, #FBF6EB);
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    transition: transform 0.2s ease;
}

/* Texto label debajo de la imagen */
.tc-extra-product-options .tc-mode-images .radio-image-label,
.tc-extra-product-options .tc-mode-images .checkbox-image-label,
.tc-extra-product-options .tc-mode-images .tc-label.radio-image-label,
.tc-extra-product-options .tc-mode-color .radio-image-label {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff;
    border-top: 1px solid var(--inloff-border, #E5E0D5);
    transition: all 0.15s ease;
}

.tc-extra-product-options .tc-mode-images .tc-label-inner,
.tc-extra-product-options .tc-mode-color .tc-label-inner {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    padding: 7px 6px !important;
    margin: 0 !important;
    min-height: 0;
}

.tc-extra-product-options .tc-mode-images .tc-label-text,
.tc-extra-product-options .tc-mode-color .tc-label-text {
    display: block;
    color: var(--inloff-text-primary, #1A1612);
    font-family: "Nunito Sans", sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
    /* Nunca partir una palabra a mitad ("Aurora"→"Auror a"): solo saltar en
       los espacios. hyphens:none evita guiones automáticos. */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

/* Hover */
.tc-extra-product-options li.tmcp-field-wrap.tc-mode-images:not(.tc-active) label.tm-epo-field-label:hover,
.tc-extra-product-options li.tmcp-field-wrap.tc-mode-color:not(.tc-active) label.tm-epo-field-label:hover {
    border-color: var(--inloff-heart, #C5A184);
    box-shadow: 0 4px 12px rgba(27, 37, 64, 0.06);
    transform: translateY(-1px);
}

.tc-extra-product-options li.tmcp-field-wrap.tc-mode-images:not(.tc-active) label.tm-epo-field-label:hover img.tc-image {
    transform: scale(1.04);
}

/* Selected tile: ring navy */
.tc-extra-product-options li.tmcp-field-wrap.tc-mode-images.tc-active label.tm-epo-field-label,
.tc-extra-product-options li.tmcp-field-wrap.tc-mode-color.tc-active label.tm-epo-field-label {
    border-color: var(--inloff-navy, #1B2540);
    border-width: 2px;
    box-shadow: 0 0 0 1px var(--inloff-navy, #1B2540), 0 6px 16px rgba(27, 37, 64, 0.14);
    padding: 0 !important;
}

/* Active tile label area: invertido navy */
.tc-extra-product-options li.tmcp-field-wrap.tc-mode-images.tc-active .radio-image-label,
.tc-extra-product-options li.tmcp-field-wrap.tc-mode-color.tc-active .radio-image-label {
    background: var(--inloff-navy, #1B2540);
    border-top-color: var(--inloff-navy, #1B2540);
}

.tc-extra-product-options li.tmcp-field-wrap.tc-mode-images.tc-active .tc-label-text,
.tc-extra-product-options li.tmcp-field-wrap.tc-mode-color.tc-active .tc-label-text {
    color: #fff;
    font-weight: 600;
}

/* Indicador checkmark top-right cuando active */
.tc-extra-product-options li.tmcp-field-wrap.tc-mode-images.tc-active::after,
.tc-extra-product-options li.tmcp-field-wrap.tc-mode-color.tc-active::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 22px;
    height: 22px;
    background: var(--inloff-navy, #1B2540) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m4 8 3 3 5-6'/%3E%3C/svg%3E") center/14px no-repeat;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 3;
    pointer-events: none;
}

/* Quitar el price wrap dentro del label-inner (heredado del CSS general) */
.tc-extra-product-options .tc-mode-images .tc-price-wrap,
.tc-extra-product-options .tc-mode-color .tc-price-wrap {
    display: none !important;
}

/* Color swatch (sin imagen, solo color) — futura compat */
.tc-extra-product-options .tc-mode-color .tc-input-wrap.tmhexcolor {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    position: relative !important;
    margin: 0;
}

/* Contenedor de color-swatches → rejilla uniforme. Sin esto cada tile se
   dimensiona por el ancho de SU etiqueta (la más larga, p. ej. "Crema/Beige",
   salía gigante) y el último se estiraba. auto-fill = columnas iguales sin
   estirar el último. Genérico (pulsera 2015, pack 1985, cualquier nº). */
.tc-extra-product-options ul.tmcp-ul-wrap:has(> li.tmcp-field-wrap.tc-mode-color) {
    display: grid !important;
    /* TODAS las opciones en 1 sola fila, mismo ancho (auto-flow column reparte
       cada tile a 1fr de la anchura, sin envolver). */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* min-width:0 → el tile encoge a la celda (por defecto un grid item no baja de
   su min-content, lo que forzaba columnas gigantes). */
.tc-extra-product-options ul.tmcp-ul-wrap:has(> li.tc-mode-color) > li.tc-mode-color {
    min-width: 0 !important;
}


/* ------------------------------------------------------------
   10. CHECKBOXES — mismo patrón que pills pero con marca interna
   ------------------------------------------------------------ */

.tc-extra-product-options .tm-extra-product-options-checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.tc-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap,
.tc-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap.tcwidth-100 {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    -ms-flex: 0 0 auto !important;
    margin: 0 !important;
}

.tc-extra-product-options ul.tmcp-ul-wrap.tm-extra-product-options-checkbox li.tmcp-field-wrap .tmcp-field-wrap-inner {
    width: auto !important;
    flex: 0 0 auto !important;
}

.tc-extra-product-options .tm-extra-product-options-checkbox input[type="checkbox"].tmcp-checkbox {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
}

.tc-extra-product-options .tm-extra-product-options-checkbox li.tmcp-field-wrap label.tm-epo-field-label {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 16px;
    background: #fff;
    border: 1.5px solid var(--inloff-border, #E5E0D5);
    border-radius: 8px;
    color: var(--inloff-text-primary, #1A1612);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 0;
}

.tc-extra-product-options .tm-extra-product-options-checkbox li.tmcp-field-wrap.tc-active label.tm-epo-field-label {
    background: var(--inloff-navy, #1B2540);
    border-color: var(--inloff-navy, #1B2540);
    color: #fff;
}


/* ------------------------------------------------------------
   11. HEADER ELEMENT (aviso HTML como alert box)
   ------------------------------------------------------------ */

/* Header genérico: clean styling */
.tc-extra-product-options .cpf-type-header .tc-epo-label {
    margin: 0;
    padding: 0;
    border: 0;
}

.tc-extra-product-options .cpf-type-header .tc-epo-element-label-text {
    font-weight: 500;
    line-height: 1.5;
}

/* Cuando el header contiene HTML con color de aviso (rojo) → alert box.
   :has() detecta el inline style del YAML del aviso. */
.tc-extra-product-options .cpf-type-header:has(p[style*="d32f2f"]),
.tc-extra-product-options .cpf-type-header:has(p[style*="#d32f2f"]) {
    background: #FFF5F5;
    border: 1px solid #F8D7D7;
    border-left: 3px solid var(--inloff-danger, #A32D2D);
    border-radius: 8px;
    padding: 12px 16px;
}

.tc-extra-product-options .cpf-type-header:has(p[style*="d32f2f"]) .tc-element-inner-wrap,
.tc-extra-product-options .cpf-type-header:has(p[style*="#d32f2f"]) .tc-element-inner-wrap {
    padding: 0;
    margin: 0;
}

/* El <p> con color inline: respetamos el rojo pero ajustamos legibilidad */
.tc-extra-product-options .cpf-type-header p[style*="d32f2f"],
.tc-extra-product-options .cpf-type-header p[style*="#d32f2f"] {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    color: var(--inloff-danger, #A32D2D) !important;
    font-weight: 500 !important;
}


/* ------------------------------------------------------------
   12. ROW / GRID — limpiar padding interior plugin
   ------------------------------------------------------------ */

.tc-extra-product-options .tc-row {
    gap: 0;
    margin: 0;
}

.tc-extra-product-options .tc-section-inner-wrap .tc-row {
    gap: 0;
}

.tc-extra-product-options .tc-cell.tc-element-container {
    padding: 0;
}

.tc-extra-product-options .tm-extra-product-options-field {
    padding: 0;
}

/* Separación entre elementos dentro de una sección (cuando hay varios campos en
   la misma card, como "Personalización específica" con select + radios + radios) */
.tc-extra-product-options .cpf-section .tc-section-fields > .tc-row > .cpf-element + .cpf-element {
    margin-top: 18px;
}

.tc-extra-product-options .cpf-section .tc-row > .cpf-element + .cpf-element {
    margin-top: 18px;
}

/* Si el siguiente elemento es un header (aviso): margin mayor + visible separation */
.tc-extra-product-options .cpf-section .cpf-element + .cpf-type-header,
.tc-extra-product-options .cpf-section .cpf-type-header + .cpf-element {
    margin-top: 14px;
}


/* ------------------------------------------------------------
   13. ANIMACIONES — conditional show/hide
   ------------------------------------------------------------ */

.tc-extra-product-options .cpf-element[data-haslogic="1"],
.tc-extra-product-options .cpf-section[data-haslogic="1"] {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.tc-extra-product-options .cpf-element.inloff-epo-revealing,
.tc-extra-product-options .cpf-section.inloff-epo-revealing {
    animation: inloffEpoReveal 0.35s ease-out;
}

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


/* ------------------------------------------------------------
   14. VALIDACIÓN — errores
   ------------------------------------------------------------ */

.tc-extra-product-options .tc-validation-message,
.tc-extra-product-options .tm-error,
.tc-extra-product-options .tm-epo-error {
    color: var(--inloff-danger, #A32D2D);
    font-size: 13px;
    font-weight: 500;
    margin-top: 6px;
    padding: 0;
}

.tc-extra-product-options .tmcp-field.tm-error,
.tc-extra-product-options .tmcp-field.error,
.tc-extra-product-options .has-error .tmcp-field {
    border-color: var(--inloff-danger, #A32D2D) !important;
    box-shadow: 0 0 0 3px rgba(163, 45, 45, 0.12) !important;
}


/* ------------------------------------------------------------
   14.B CUSTOM DROPDOWN — base styling
   ------------------------------------------------------------
   Reemplaza el <select> nativo con un trigger + menú custom.
   ------------------------------------------------------------ */

/* Container del custom select */
.inloff-select {
    position: relative;
    display: block;
    width: 100%;
    font-family: "Nunito Sans", sans-serif;
    box-sizing: border-box;
}

/* Native <select> oculto (clase añadida por JS) */
.inloff-select__native {
    position: absolute !important;
    left: -9999px !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    visibility: hidden !important;
    z-index: -1 !important;
}

/* Trigger del dropdown (button visible) */
.inloff-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    background: #fff;
    border: 1.5px solid var(--inloff-border, #E5E0D5);
    border-radius: 8px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--inloff-text-primary, #1A1612);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

@media (max-width: 768px) {
    .inloff-select__trigger {
        font-size: 16px;
        min-height: 48px;
    }
}

.inloff-select__trigger:hover {
    border-color: var(--inloff-heart-light, #CAB397);
}

.inloff-select__trigger:focus,
.inloff-select.is-open .inloff-select__trigger {
    outline: none;
    border-color: var(--inloff-heart, #C5A184);
    box-shadow: 0 0 0 3px rgba(197, 161, 132, 0.18);
}

/* Texto del valor seleccionado dentro del trigger */
.inloff-select__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: inherit;
}

.inloff-select__value.is-placeholder {
    color: #8C8984;
    font-weight: 400;
}

/* Icono flecha */
.inloff-select__arrow {
    display: inline-flex;
    align-items: center;
    color: var(--inloff-navy, #1B2540);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.inloff-select.is-open .inloff-select__arrow {
    transform: rotate(180deg);
}

/* Menú desplegable (<ul>) — overlay flotante */
.tc-extra-product-options .inloff-select__menu,
.inloff-select .inloff-select__menu,
ul.inloff-select__menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: #fff !important;
    border: 1px solid var(--inloff-border, #E5E0D5) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(27, 37, 64, 0.14) !important;
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-inline-start: 0 !important;
    max-height: 280px !important;
    overflow: hidden auto !important;
    overscroll-behavior: contain;
    animation: inloffEpoSelectOpen 0.18s ease-out;
    box-sizing: border-box;
}

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

/* Opciones del menú — base styling */
.tc-extra-product-options .inloff-select__menu .inloff-select__option,
.inloff-select__menu .inloff-select__option,
ul.inloff-select__menu > li.inloff-select__option {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--inloff-text-primary, #1A1612);
    line-height: 1.4;
    user-select: none;
    transition: background 0.1s ease, color 0.1s ease;
    outline: none;
    position: relative;
    box-sizing: border-box;
    list-style: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Primera y última opción heredan el border-radius del menú para que el
   highlight full-width respete las esquinas redondeadas del contenedor */
.inloff-select__menu .inloff-select__option:first-child,
ul.inloff-select__menu > li.inloff-select__option:first-child {
    border-top-left-radius: 9px !important;
    border-top-right-radius: 9px !important;
}

.inloff-select__menu .inloff-select__option:last-child,
ul.inloff-select__menu > li.inloff-select__option:last-child {
    border-bottom-left-radius: 9px !important;
    border-bottom-right-radius: 9px !important;
}

@media (max-width: 768px) {
    .inloff-select__option {
        font-size: 15.5px;
        padding: 13px 18px;
    }
}

.inloff-select__option:hover,
.inloff-select__option:focus {
    background: var(--inloff-cream-light, #FBF6EB);
}

.inloff-select__menu .inloff-select__option.is-selected,
ul.inloff-select__menu > li.inloff-select__option.is-selected,
.tc-extra-product-options .inloff-select__menu .inloff-select__option.is-selected {
    background: var(--inloff-navy, #1B2540) !important;
    color: #fff !important;
    font-weight: 500 !important;
}

.inloff-select__menu .inloff-select__option.is-selected:hover,
.inloff-select__menu .inloff-select__option.is-selected:focus,
ul.inloff-select__menu > li.inloff-select__option.is-selected:hover,
ul.inloff-select__menu > li.inloff-select__option.is-selected:focus {
    background: var(--inloff-navy, #1B2540) !important;
    color: #fff !important;
}

.inloff-select__option.is-placeholder {
    color: #A8A5A0;
    cursor: default;
}

.inloff-select__option.is-placeholder:hover {
    background: transparent;
}

/* Placeholder seleccionado por default: NO aplicar el highlight navy
   (el placeholder no es una opción real, solo un estado vacío).
   Specificity reforzada para ganar sobre .tc-extra-product-options ...
   .is-selected (la regla anterior tiene 0,4,0 — esta debe igualar o superar). */
.tc-extra-product-options .inloff-select__menu .inloff-select__option.is-placeholder.is-selected,
.tc-extra-product-options ul.inloff-select__menu > li.inloff-select__option.is-placeholder.is-selected,
.inloff-select .inloff-select__menu .inloff-select__option.is-placeholder.is-selected {
    background: transparent !important;
    color: #A8A5A0 !important;
    font-weight: 400 !important;
}

.tc-extra-product-options .inloff-select__menu .inloff-select__option.is-placeholder.is-selected:hover,
.tc-extra-product-options .inloff-select__menu .inloff-select__option.is-placeholder.is-selected:focus,
.inloff-select .inloff-select__menu .inloff-select__option.is-placeholder.is-selected:hover,
.inloff-select .inloff-select__menu .inloff-select__option.is-placeholder.is-selected:focus {
    background: transparent !important;
    color: #A8A5A0 !important;
}

/* Esconder el <select> EPO nativo cuando ya está enhanced */
.tc-extra-product-options select.tmcp-select.inloff-select__native {
    background-image: none !important;
    padding: 0 !important;
}


/* ------------------------------------------------------------
   19. VALIDATION FEEDBACK — flash + toast
   ------------------------------------------------------------ */

.tc-extra-product-options .cpf-element.inloff-epo-flash,
.tc-extra-product-options .tc-is-required.inloff-epo-flash {
    animation: inloffEpoFlash 0.6s ease-out 2;
}

.tc-extra-product-options .cpf-element.inloff-epo-flash .tmcp-field,
.tc-extra-product-options .cpf-element.inloff-epo-flash .inloff-select__trigger,
.tc-extra-product-options .tc-is-required.inloff-epo-flash .tmcp-field,
.tc-extra-product-options .tc-is-required.inloff-epo-flash .inloff-select__trigger {
    border-color: var(--inloff-danger, #A32D2D) !important;
    box-shadow: 0 0 0 3px rgba(163, 45, 45, 0.18) !important;
}

@keyframes inloffEpoFlash {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(163, 45, 45, 0.06); }
}

.inloff-epo-toast {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--inloff-navy, #1B2540);
    color: #fff;
    border-radius: 12px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 8px 28px rgba(27, 37, 64, 0.32);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    text-align: left;
}

.inloff-epo-toast::before {
    content: "";
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%23F2E8D5' stroke-width='2'/%3E%3Cpath stroke='%23F2E8D5' stroke-linecap='round' stroke-width='2.4' d='M12 7v6'/%3E%3Ccircle cx='12' cy='16.5' r='1.2' fill='%23F2E8D5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.inloff-epo-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Desktop: toast más compacto, centrado abajo */
@media (min-width: 769px) {
    .inloff-epo-toast {
        left: 50%;
        right: auto;
        bottom: 40px;
        transform: translateX(-50%) translateY(20px);
        max-width: 420px;
        border-radius: 10px;
        font-size: 14px;
        padding: 12px 18px;
    }
    .inloff-epo-toast.is-visible {
        transform: translateX(-50%) translateY(0);
    }
}

/* Con «reducir movimiento»: el campo, sin parpadeo (se queda el borde rojo), y el
   aviso aparece sin subir. */
@media (prefers-reduced-motion: reduce) {
    .tc-extra-product-options .cpf-element.inloff-epo-flash,
    .tc-extra-product-options .tc-is-required.inloff-epo-flash {
        animation: none;
    }
    .inloff-epo-toast {
        transition: opacity 0.2s ease;
    }
}


/* ------------------------------------------------------------
   20. EDGE CASES
   ------------------------------------------------------------ */

/* Plugin a veces envuelve options en .tcwidth-100 inecesario */
.tc-extra-product-options .tm-extra-product-options-radio .tcwidth-100,
.tc-extra-product-options .tm-extra-product-options-checkbox .tcwidth-100 {
    width: auto;
}

/* Quita el divider visual del plugin (línea separadora antigua) */
.tc-extra-product-options .cpf-type-divider {
    display: none;
}

/* Si una sección entera solo contiene divider(s), ocultar toda la card.
   El selector :has() detecta divider sin ningún otro tipo de campo dentro. */
.tc-extra-product-options .cpf-section:has(.cpf-type-divider):not(:has(.cpf-type-select, .cpf-type-radio, .cpf-type-checkbox, .cpf-type-textfield, .cpf-type-textarea, .cpf-type-upload, .cpf-type-header, .cpf-type-date, .cpf-type-time, .cpf-type-multiple_file_upload, .cpf-type-product)) {
    display: none !important;
}


/* ------------------------------------------------------------
   21. UPLOAD FIELDS — Drag & Drop premium
   ------------------------------------------------------------ */

/* Reset agresivo de TODOS los ancestros del upload field para neutralizar
   márgenes negativos del plugin (`tc-row { margin: 0 -1em }`, etc.) */
.tc-extra-product-options .cpf-type-upload,
.tc-extra-product-options .cpf-type-upload .tc-element-inner-wrap,
.tc-extra-product-options .cpf-type-upload .tc-element-inner-wrap > .tc-row,
.tc-extra-product-options .cpf-type-upload .tc-element-container,
.tc-extra-product-options .cpf-type-upload ul.tmcp-ul-wrap,
.tc-extra-product-options .cpf-type-multiple_file_upload,
.tc-extra-product-options .cpf-type-multiple_file_upload .tc-element-inner-wrap,
.tc-extra-product-options .cpf-type-multiple_file_upload .tc-element-inner-wrap > .tc-row,
.tc-extra-product-options .cpf-type-multiple_file_upload .tc-element-container,
.tc-extra-product-options .cpf-type-multiple_file_upload ul.tmcp-ul-wrap {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    list-style: none !important;
}

/* Container interno: full width sin restricciones del plugin */
.tc-extra-product-options .cpf-type-upload .tmcp-field-wrap,
.tc-extra-product-options .cpf-type-upload .tmcp-field-wrap-inner,
.tc-extra-product-options .cpf-type-multiple_file_upload .tmcp-field-wrap,
.tc-extra-product-options .cpf-type-multiple_file_upload .tmcp-field-wrap-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.tc-extra-product-options .cpf-type-upload .tc-field-label-wrap,
.tc-extra-product-options .cpf-type-multiple_file_upload .tc-field-label-wrap {
    padding: 0 !important;
    width: 100%;
}

/* Label es el área completa de drag&drop (clic abre file picker nativo) */
.tc-extra-product-options .cpf-type-upload label.tm-epo-field-label,
.tc-extra-product-options .cpf-type-upload label.tm-epo-field-label.fullwidth,
.tc-extra-product-options .cpf-type-multiple_file_upload label.tm-epo-field-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 150px !important;
    padding: 28px 20px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 2px dashed var(--inloff-border, #E5E0D5) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    text-align: center !important;
    overflow: visible;
}

/* Icon de cloud-upload arriba del label */
.tc-extra-product-options .cpf-type-upload label.tm-epo-field-label::before,
.tc-extra-product-options .cpf-type-multiple_file_upload label.tm-epo-field-label::before {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%231B2540' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 16V8m0 0-3.5 3.5M12 8l3.5 3.5'/%3E%3Cpath stroke='%231B2540' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M20 16.5A4.5 4.5 0 0 0 17 8.05a6 6 0 0 0-11.65 1.79A4 4 0 0 0 6 17.5h2'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform 0.2s ease;
}

/* Texto del upload — el plugin pone "Choose file" hardcoded.
   JS lo vacía al inicializar; cuando tiene contenido (nombre archivo), se muestra como pill */
.tc-extra-product-options .cpf-type-upload .cpf-upload-text,
.tc-extra-product-options .cpf-type-multiple_file_upload .cpf-upload-text {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin-top: 4px;
    padding: 0;
    background: transparent;
    color: var(--inloff-text-primary, #1A1612);
    font-family: "Nunito Sans", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Si el span está vacío, no ocupa espacio (no muestra "Choose file" inicial) */
.tc-extra-product-options .cpf-type-upload .cpf-upload-text:empty,
.tc-extra-product-options .cpf-type-multiple_file_upload .cpf-upload-text:empty {
    display: none !important;
}

/* Estado base del cpf-upload-text — visible solo si tiene contenido (JS).
   Esto asegura que el reset no lo ahogue. */
.tc-extra-product-options .cpf-type-upload .cpf-upload-text,
.tc-extra-product-options .cpf-type-multiple_file_upload .cpf-upload-text {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
}

/* Reglas viejas de .cpf-upload-text como pill verde DESHABILITADAS — ahora
   la card del archivo se renderiza como sibling debajo del dropzone */
.tc-extra-product-options .cpf-type-upload label.tm-epo-field-label.has-file .cpf-upload-text,
.tc-extra-product-options .cpf-type-multiple_file_upload label.tm-epo-field-label.has-file .cpf-upload-text {
    /* sin estilos especiales — el dropzone se mantiene como estaba */
}

.tc-extra-product-options .cpf-type-upload label.tm-epo-field-label::after,
.tc-extra-product-options .cpf-type-multiple_file_upload label.tm-epo-field-label::after {
    content: "Arrastra tu archivo aquí o haz clic para seleccionar";
    display: block;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--inloff-navy, #1B2540);
    line-height: 1.4;
    max-width: 280px;
}

/* cpf-upload-wrap simplificado (solo contiene el input file oculto) */
.tc-extra-product-options .cpf-type-upload .cpf-upload-wrap,
.tc-extra-product-options .cpf-type-multiple_file_upload .cpf-upload-wrap {
    display: contents !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Reset NUCLEAR: cualquier descendiente del label (excepto input hidden,
   max file size caption, y el .cpf-upload-text que muestra el nombre del
   archivo cuando hay has-file) NO debe tener border/bg/icons propios */
.tc-extra-product-options .cpf-type-upload label.tm-epo-field-label > *:not(input):not(.cpf-upload-text),
.tc-extra-product-options .cpf-type-upload label.tm-epo-field-label *:not(input):not(.tc-max-file-size):not(.cpf-upload-text),
.tc-extra-product-options .cpf-type-multiple_file_upload label.tm-epo-field-label > *:not(input):not(.cpf-upload-text),
.tc-extra-product-options .cpf-type-multiple_file_upload label.tm-epo-field-label *:not(input):not(.tc-max-file-size):not(.cpf-upload-text) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Y quitar ::before/::after de descendientes (excepto el .cpf-upload-text
   que tiene su propio ::before con icono de archivo cuando has-file) */
.tc-extra-product-options .cpf-type-upload label.tm-epo-field-label *:not(.cpf-upload-text)::before,
.tc-extra-product-options .cpf-type-upload label.tm-epo-field-label *:not(.cpf-upload-text)::after,
.tc-extra-product-options .cpf-type-multiple_file_upload label.tm-epo-field-label *:not(.cpf-upload-text)::before,
.tc-extra-product-options .cpf-type-multiple_file_upload label.tm-epo-field-label *:not(.cpf-upload-text)::after {
    content: none !important;
    display: none !important;
}

/* Input file oculto pero accesible */
.tc-extra-product-options .cpf-type-upload input.tmcp-upload,
.tc-extra-product-options .cpf-type-upload input[type="file"],
.tc-extra-product-options .cpf-type-multiple_file_upload input.tmcp-upload,
.tc-extra-product-options .cpf-type-multiple_file_upload input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Foco de teclado: el input no se ve, así que el contorno lo lleva la zona de subida
   (también cuando la validación lleva el foco aquí). */
.tc-extra-product-options .cpf-type-upload label.tm-epo-field-label:has(input[type="file"]:focus-visible),
.tc-extra-product-options .cpf-type-multiple_file_upload label.tm-epo-field-label:has(input[type="file"]:focus-visible) {
    outline: 2px solid var(--inloff-navy, #1B2540);
    outline-offset: 2px;
}

/* Hover */
.tc-extra-product-options .cpf-type-upload label.tm-epo-field-label:hover,
.tc-extra-product-options .cpf-type-multiple_file_upload label.tm-epo-field-label:hover {
    border-color: var(--inloff-heart, #C5A184) !important;
    background: var(--inloff-cream-light, #FBF6EB) !important;
}

.tc-extra-product-options .cpf-type-upload label.tm-epo-field-label:hover::before,
.tc-extra-product-options .cpf-type-multiple_file_upload label.tm-epo-field-label:hover::before {
    transform: translateY(-2px);
}

/* Estado dragover (clase añadida por JS al arrastrar archivos encima) */
.tc-extra-product-options .cpf-type-upload label.tm-epo-field-label.is-dragover,
.tc-extra-product-options .cpf-type-multiple_file_upload label.tm-epo-field-label.is-dragover {
    border-color: var(--inloff-navy, #1B2540) !important;
    background: var(--inloff-cream, #F2E8D5) !important;
    box-shadow: inset 0 0 0 3px rgba(27, 37, 64, 0.06);
}

.tc-extra-product-options .cpf-type-upload label.tm-epo-field-label.is-dragover::before,
.tc-extra-product-options .cpf-type-multiple_file_upload label.tm-epo-field-label.is-dragover::before {
    transform: scale(1.1) translateY(-3px);
}

/* Estado con archivo cargado: el dropzone se mantiene neutro (sin cambios).
   La card del archivo se renderiza como sibling debajo. */

/* Cuando hay archivo: el dropzone se mantiene como está (no cambia de estado).
   La card del archivo aparece como sibling debajo (.inloff-upload-file-card). */

/* File card — aparece DEBAJO del dropzone con el archivo subido */
.inloff-upload-file-card {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    margin: 10px 0 0 !important;
    padding: 12px 14px !important;
    background: #fff !important;
    border: 1px solid var(--inloff-border, #E5E0D5) !important;
    border-radius: 10px !important;
    font-family: "Nunito Sans", sans-serif;
    box-shadow: 0 1px 3px rgba(27, 37, 64, 0.04);
    animation: inloffFileCardIn 0.2s ease-out;
    overflow: hidden;
}

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

.inloff-upload-file-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--inloff-cream-light, #FBF6EB);
    color: var(--inloff-navy, #1B2540);
    border-radius: 8px;
}

.inloff-upload-file-card__icon svg {
    width: 22px;
    height: 22px;
}

.inloff-upload-file-card__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inloff-upload-file-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--inloff-text-primary, #1A1612);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inloff-upload-file-card__size {
    font-size: 12px;
    color: var(--inloff-text-secondary, #5F5E5A);
    line-height: 1.2;
}

.inloff-upload-file-card__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--inloff-border, #E5E0D5);
    border-radius: 50%;
    color: var(--inloff-text-secondary, #5F5E5A);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.inloff-upload-file-card__remove:hover {
    background: var(--inloff-danger, #A32D2D);
    border-color: var(--inloff-danger, #A32D2D);
    color: #fff;
    transform: scale(1.05);
}

.inloff-upload-file-card__remove:active {
    transform: scale(0.95);
}

/* Max file size — más discreto y centrado */
.tc-extra-product-options .cpf-type-upload .tc-max-file-size,
.tc-extra-product-options .cpf-type-multiple_file_upload .tc-max-file-size {
    display: block;
    text-align: center;
    font-size: 12.5px;
    color: var(--inloff-text-secondary, #5F5E5A);
    margin-top: 10px !important;
    font-family: "Nunito Sans", sans-serif;
}

/* Preview area (si el plugin genera thumbnails después del upload) */
.tc-extra-product-options .tc-upload-preview {
    margin: 14px 0 0 !important;
    gap: 10px !important;
}

/* Mobile: ajustar padding y min-height */
@media (max-width: 768px) {
    .tc-extra-product-options .cpf-type-upload label.tm-epo-field-label,
    .tc-extra-product-options .cpf-type-multiple_file_upload label.tm-epo-field-label {
        min-height: 130px !important;
        padding: 22px 16px !important;
    }

    .tc-extra-product-options .cpf-type-upload label.tm-epo-field-label::before,
    .tc-extra-product-options .cpf-type-multiple_file_upload label.tm-epo-field-label::before {
        width: 38px;
        height: 38px;
    }

    .tc-extra-product-options .cpf-type-upload label.tm-epo-field-label::after,
    .tc-extra-product-options .cpf-type-multiple_file_upload label.tm-epo-field-label::after {
        font-size: 14px;
    }
}

/* Si el plugin imprime un wrap vacío de tooltip, quitar */
.tc-extra-product-options .tc-epo-style-space:empty {
    display: none;
}


/* ============================================================
   22. AUDIT POST-DROPDOWN/UPLOAD — fixes para otros tipos
   ============================================================
   Fixes preventivos para campos no validados visualmente:
   - date / time (inputs nativos HTML5 + datepicker JS del plugin)
   - checkboxes con imagen (multi-select tiles)
   - textfield / textarea (overflow, description)
   ============================================================ */


/* ---- 22.A DATE & TIME INPUTS ---------------------------- */

/* Icono calendar/clock al final del input para visual hint */
.tc-extra-product-options .cpf-type-date,
.tc-extra-product-options .cpf-type-time {
    position: relative;
}

.tc-extra-product-options .cpf-type-date .tmcp-field-wrap-inner,
.tc-extra-product-options .cpf-type-time .tmcp-field-wrap-inner {
    position: relative;
}

.tc-extra-product-options input.tmcp-date,
.tc-extra-product-options input.tmcp-time,
.tc-extra-product-options input[type="date"].tm-epo-field,
.tc-extra-product-options input[type="time"].tm-epo-field {
    padding-right: 44px !important;
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    cursor: pointer;
}

.tc-extra-product-options input.tmcp-date,
.tc-extra-product-options input[type="date"].tm-epo-field {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Crect width='18' height='17' x='3' y='5' rx='2' stroke='%231B2540' stroke-width='1.6'/%3E%3Cpath stroke='%231B2540' stroke-linecap='round' stroke-width='1.6' d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

.tc-extra-product-options input.tmcp-time,
.tc-extra-product-options input[type="time"].tm-epo-field {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%231B2540' stroke-width='1.6'/%3E%3Cpath stroke='%231B2540' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* Esconder el indicador feo de Chrome del input date/time nativo */
.tc-extra-product-options input[type="date"]::-webkit-calendar-picker-indicator,
.tc-extra-product-options input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    right: 0;
    width: 44px;
    height: 100%;
}

.tc-extra-product-options input[type="date"]::-webkit-inner-spin-button,
.tc-extra-product-options input[type="time"]::-webkit-inner-spin-button,
.tc-extra-product-options input[type="date"]::-webkit-clear-button,
.tc-extra-product-options input[type="time"]::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

/* Datepicker JS del plugin EPO (clase .tc-datepicker / similar) — si lo
   activan, hereda nuestros tokens via styling general */
.tm-extra-product-options .ui-datepicker,
.tm-extra-product-options .flatpickr-calendar {
    font-family: "Nunito Sans", sans-serif !important;
    border: 1px solid var(--inloff-border, #E5E0D5) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(27, 37, 64, 0.14) !important;
    padding: 6px !important;
}


/* ---- 22.B CHECKBOXES MULTI-SELECT CON IMAGEN ------------ */

/* Checkmark indicator para todos los checkboxes activos (no solo radio).
   Ya tenemos ::after en radios — replicamos para checkboxes. */
.tc-extra-product-options li.tmcp-field-wrap.tc-mode-images.tc-active input[type="checkbox"] ~ *,
.tc-extra-product-options li.tmcp-field-wrap.tc-mode-color.tc-active input[type="checkbox"] ~ * {
    pointer-events: none;
}

/* Asegurar que el checkmark indicator funciona también con checkboxes
   (el selector original solo tenía radio en algunos casos) */
.tc-extra-product-options ul.tm-extra-product-options-checkbox li.tmcp-field-wrap.tc-mode-images.tc-active::after,
.tc-extra-product-options ul.tm-extra-product-options-checkbox li.tmcp-field-wrap.tc-mode-color.tc-active::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 22px;
    height: 22px;
    background: var(--inloff-navy, #1B2540) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m4 8 3 3 5-6'/%3E%3C/svg%3E") center/14px no-repeat;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 3;
    pointer-events: none;
}

/* Checkboxes pills (sin imagen): ya estaban estilizados, pero el state
   activo no tenía suficiente specificity. Reforzamos. */
.tc-extra-product-options .tm-extra-product-options-checkbox li.tmcp-field-wrap.tc-active label.tm-epo-field-label {
    background: var(--inloff-navy, #1B2540) !important;
    border-color: var(--inloff-navy, #1B2540) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(27, 37, 64, 0.15);
}

.tc-extra-product-options .tm-extra-product-options-checkbox li.tmcp-field-wrap.tc-active label.tm-epo-field-label .tc-label,
.tc-extra-product-options .tm-extra-product-options-checkbox li.tmcp-field-wrap.tc-active label.tm-epo-field-label .tc-label-text {
    color: #fff !important;
}


/* ---- 22.C TEXTFIELD / TEXTAREA — descripciones + overflow ---- */

/* Description debajo del input (cuando el campo tiene description en YAML) */
.tc-extra-product-options .cpf-element .tm-epo-element-description,
.tc-extra-product-options .cpf-element .tc-description,
.tc-extra-product-options .cpf-element .epo-description {
    display: block;
    margin: 6px 0 0;
    font-size: 12.5px;
    font-style: italic;
    color: var(--inloff-text-secondary, #5F5E5A);
    line-height: 1.45;
}

.tc-extra-product-options .cpf-element .tm-epo-element-description i,
.tc-extra-product-options .cpf-element .tc-description i {
    font-style: italic;
}

/* Si el description tiene HTML inline con <i> tags */
.tc-extra-product-options .tm-epo-element-label + .tm-epo-element-description {
    margin-top: 0;
    margin-bottom: 8px;
}

/* Textfield: prevenir overflow horizontal con texto muy largo */
.tc-extra-product-options input.tmcp-textfield {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Textarea: max-width 100% y overflow correcto */
.tc-extra-product-options textarea.tmcp-textarea {
    max-width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Counter (si plugin pinta char count) */
.tc-extra-product-options .tm-epo-counter,
.tc-extra-product-options .tc-counter {
    display: block;
    text-align: right;
    margin-top: 4px;
    font-size: 11px;
    color: var(--inloff-text-secondary, #5F5E5A);
}


/* ---- 22.D MOBILE — date/time tap area ------------------- */

@media (max-width: 768px) {
    .tc-extra-product-options input.tmcp-date,
    .tc-extra-product-options input.tmcp-time,
    .tc-extra-product-options input[type="date"].tm-epo-field,
    .tc-extra-product-options input[type="time"].tm-epo-field {
        font-size: 16px;
        background-size: 20px;
        padding-right: 48px !important;
    }
}


/* ============================================================
   23. DATE PICKER MULTI-SELECT (día / mes / año)
   ============================================================
   El plugin renderiza un <label> con 3 <select> y 3 spans wrapper
   (tm-epo-date-day/-month/-year). El JS ahora los enhance como
   inloff-select. Aquí los colocamos en una row de 3 columnas. */

.tc-extra-product-options .tm-epo-datepicker-label-container,
.tc-extra-product-options .tm-epo-datepicker-label-container > label {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

/* Cada wrapper de select día/mes/año */
.tc-extra-product-options .tm-epo-datepicker-label-container .inloff-select,
.tc-extra-product-options .tm-epo-datepicker-label-container > select {
    width: 100% !important;
}

/* Ocultar el input date subyacente que el plugin renderiza junto a los selects */
.tc-extra-product-options input.tmcp-date.tm-epo-datepicker {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Mobile: stack vertical si el espacio es muy pequeño */
@media (max-width: 480px) {
    .tc-extra-product-options .tm-epo-datepicker-label-container,
    .tc-extra-product-options .tm-epo-datepicker-label-container > label {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }
}


/* ============================================================
   24. TIME PICKER popup del plugin EPO
   ============================================================
   El plugin renderiza un popup con sliders HORA/MINUTO al hacer
   tap en el input time. Le aplicamos styling de marca. */

.tm-extra-product-options .tm-epo-timepicker-popup,
.tc-time-picker-popup,
.flatpickr-calendar.hasTime,
[class*="timepicker-popup"] {
    font-family: "Nunito Sans", sans-serif !important;
    background: #fff !important;
    border: 1px solid var(--inloff-border, #E5E0D5) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(27, 37, 64, 0.18) !important;
    padding: 16px !important;
    color: var(--inloff-text-primary, #1A1612);
}

.tm-extra-product-options .tm-epo-timepicker-popup label,
.tc-time-picker-popup label,
[class*="timepicker-popup"] label {
    font-size: 12px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--inloff-text-secondary, #5F5E5A) !important;
}

/* Botón "HECHO" del timepicker */
.tm-extra-product-options .tm-epo-timepicker-popup button,
.tc-time-picker-popup button,
[class*="timepicker-popup"] button[type="button"] {
    background: var(--inloff-navy, #1B2540) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
}


/* ============================================================
   25. FIX DUPLICADO — ocultar wrapper visual del plugin
   ============================================================
   Cuando un <select> ya está enhanced como .inloff-select, el plugin
   a veces renderiza un .tc-input-wrap visible que parece otro input.
   Lo ocultamos cuando su select padre tiene la clase inloff-select__native. */

.tc-extra-product-options .tc-input-wrap:has(> select.inloff-select__native),
.tc-extra-product-options .tc-input-wrap:has(select.inloff-select__native) {
    display: contents !important;
}

/* Si el plugin envuelve el select en un span que crea su propio look
   tipo input (con padding/border), lo neutralizamos cuando hay enhance */
.tc-extra-product-options .inloff-select .tc-input-wrap,
.tc-extra-product-options .inloff-select .tc-label-wrap,
.tc-extra-product-options .inloff-select .tc-label-inner {
    display: contents !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* ============================================================
   23. CONFLICTS — plugins que envuelven <select> con UI propia
   ============================================================
   El plugin YITH Wishlist carga jquery.selectBox.css que envuelve
   los <select> con .selectBox wrappers. Esto creaba un duplicado
   visual junto a nuestro custom dropdown. Lo neutralizamos. */

/* Ocultar el wrapper de jquery.selectBox que rodea nuestros selects */
.tc-extra-product-options .selectBox,
.tc-extra-product-options .selectBox-arrow,
.tc-extra-product-options .selectBox-label,
.tc-extra-product-options a.selectBox {
    display: none !important;
}

/* Dropdown global de jquery.selectBox cuando se abre */
.selectBox-dropdown-menu:has(option) {
    display: none !important;
}

/* Si por algún plugin extra el <select> nativo se ve mostrar, forzar invisible
   cuando es child de .inloff-select */
.tc-extra-product-options .inloff-select > select,
.tc-extra-product-options .inloff-select select.tmcp-select,
.tc-extra-product-options .inloff-select select.tmcp-date-select {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}


/* ============================================================
   24. DATE PICKER — campo con 3 selects (Día/Mes/Año)
   ============================================================ */

/* Container de los 3 selects del date picker: grid 3 columnas */
.tc-extra-product-options .cpf-type-date .tm-epo-datepicker-label-container,
.tc-extra-product-options .cpf-type-date label.tm-epo-datepicker-label-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

@media (max-width: 480px) {
    .tc-extra-product-options .cpf-type-date .tm-epo-datepicker-label-container {
        grid-template-columns: 1fr 1.4fr 1.2fr;
        gap: 6px;
    }
}

/* Cuando los 3 selects del date estén dentro de .inloff-select wraps, alinear */
.tc-extra-product-options .cpf-type-date .inloff-select {
    margin: 0;
}


/* ============================================================
   25. TIME PICKER — pop-up jQuery UI timepicker custom
   ============================================================
   El plugin EPO envuelve el popup en .tm-ui-dp-container que tiene
   overflow hidden + altura limitada → corta el popup vertical y
   horizontalmente. Resolvemos liberando el container. */

/* Wrapper raíz del dialog jQuery UI del plugin EPO: deshabilitado.
   El input.tmcp-time se convierte a input[type=time] HTML5 nativo (JS).
   El picker nativo del browser maneja la UX. */
.ui-tm-datepicker,
div.ui-tm-datepicker {
    display: none !important;
}

/* Containers internos del wrapper: liberar overflow + altura para que el
   popup interior se vea completo */
.tm-ui-dp-wrap,
.tm-ui-dp,
.tm-ui-dp-container {
    overflow: visible !important;
    height: auto !important;
    width: 100% !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ui-tm-timepicker-div,
div.ui-tm-timepicker-div {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    background: #fff !important;
    border: 1px solid var(--inloff-border, #E5E0D5) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(27, 37, 64, 0.18) !important;
    padding: 20px 22px !important;
    min-width: 280px !important;
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    font-family: "Nunito Sans", sans-serif !important;
    box-sizing: border-box;
}

/* Backdrop oscuro detrás del dialog (modal feel) */
.ui-tm-datepicker::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    background: rgba(27, 37, 64, 0.35);
    z-index: -1;
    pointer-events: none;
}

/* Header con el tiempo grande "00:00" */
.ui-tm-timepicker-div .tm-ui-tp-title,
.ui-tm-timepicker-div .tm-ui-widget-header,
.ui-tm-timepicker-div .ui_tpicker_time {
    background: transparent !important;
    border: 0 !important;
    color: var(--inloff-navy, #1B2540) !important;
    font-family: "Nunito Sans", sans-serif !important;
    font-weight: 700;
    font-size: 24px;
    text-align: center;
    margin: 0 0 14px !important;
    padding: 0 !important;
}

/* Labels HORA / MINUTO */
.ui-tm-timepicker-div .ui-tpicker-grid-label,
.ui-tm-timepicker-div .ui_tpicker_hour_label,
.ui-tm-timepicker-div .ui_tpicker_minute_label {
    font-family: "Nunito Sans", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--inloff-text-secondary, #5F5E5A) !important;
    margin: 8px 0 6px !important;
    display: block !important;
}

/* Container sliders */
.ui-tm-timepicker-div .ui_tpicker_hour,
.ui-tm-timepicker-div .ui_tpicker_minute {
    margin: 0 0 12px !important;
    padding: 0 !important;
}

/* Slider track */
.ui-tm-timepicker-div .ui-slider {
    height: 6px !important;
    background: var(--inloff-cream, #F2E8D5) !important;
    border: 0 !important;
    border-radius: 999px !important;
    margin: 8px 0 !important;
}

/* Slider handle */
.ui-tm-timepicker-div .ui-slider-handle {
    width: 20px !important;
    height: 20px !important;
    background: var(--inloff-navy, #1B2540) !important;
    border: 0 !important;
    border-radius: 50% !important;
    top: -7px !important;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(27, 37, 64, 0.25);
}

.ui-tm-timepicker-div .ui-slider-handle:active {
    cursor: grabbing;
    transform: scale(1.1);
}

/* Botón "HECHO" */
.ui-tm-timepicker-div .ui-datepicker-buttonpane,
.ui-tm-timepicker-div .ui-timepicker-buttonpane {
    background: transparent !important;
    border: 0 !important;
    padding: 12px 0 0 !important;
    margin: 0 !important;
    text-align: right;
}

.ui-tm-timepicker-div .ui-state-default,
.ui-tm-timepicker-div button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 18px !important;
    background: var(--inloff-navy, #1B2540) !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-family: "Nunito Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ui-tm-timepicker-div .ui-state-default:hover,
.ui-tm-timepicker-div button:hover {
    background: var(--inloff-text-primary, #1A1612) !important;
}

/* Forzar TODOS los <dt>/<dd> del dl a ser visibles (el plugin aplica
   .ui_tpicker_unit_hide a algunos por error). */
.ui-tm-timepicker-div dl,
.ui-tm-timepicker-div .ui_tpicker_unit_hide {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
}

.ui-tm-timepicker-div .ui_tpicker_time_label.ui_tpicker_unit_hide,
.ui-tm-timepicker-div .ui_tpicker_time.ui_tpicker_unit_hide,
.ui-tm-timepicker-div .ui_tpicker_timezone_label,
.ui-tm-timepicker-div .ui_tpicker_timezone {
    display: none !important;
}

/* Asegurar que HORA y MINUTO siempre se ven aunque el plugin los oculte */
.ui-tm-timepicker-div .ui_tpicker_hour_label,
.ui-tm-timepicker-div .ui_tpicker_hour,
.ui-tm-timepicker-div .ui_tpicker_minute_label,
.ui-tm-timepicker-div .ui_tpicker_minute {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 0 12px !important;
}

/* Mobile: posicionar el popup como bottom sheet centrado */
@media (max-width: 768px) {
    .ui-tm-timepicker-div,
    div.ui-tm-timepicker-div {
        position: fixed !important;
        left: 16px !important;
        right: 16px !important;
        top: auto !important;
        bottom: 16px !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
        padding: 20px 22px !important;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        z-index: 10000 !important;
    }

    /* Backdrop oscuro para enfocar el popup en mobile */
    .ui-tm-timepicker-div::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(27, 37, 64, 0.35);
        z-index: -1;
        pointer-events: none;
    }
}


/* ============================================================
   26. DATEPICKER POP-UP — jQuery UI datepicker (epo theme)
   ============================================================ */

.ui-datepicker,
div.ui-datepicker,
.ui-tm-datepicker-div {
    position: absolute !important;
    z-index: 9999 !important;
    background: #fff !important;
    border: 1px solid var(--inloff-border, #E5E0D5) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(27, 37, 64, 0.18) !important;
    padding: 12px !important;
    font-family: "Nunito Sans", sans-serif !important;
    box-sizing: border-box;
}

.ui-datepicker .ui-datepicker-header,
.ui-datepicker-header {
    background: transparent !important;
    border: 0 !important;
    padding: 6px 4px 10px !important;
    margin: 0 !important;
    position: relative;
}

.ui-datepicker .ui-datepicker-title {
    color: var(--inloff-navy, #1B2540) !important;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    background: var(--inloff-cream-light, #FBF6EB) !important;
    border-radius: 6px !important;
    width: 28px;
    height: 28px;
    top: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: var(--inloff-cream, #F2E8D5) !important;
}

.ui-datepicker table {
    font-family: "Nunito Sans", sans-serif !important;
    font-size: 13px;
    margin: 0;
}

.ui-datepicker table th {
    font-weight: 600;
    color: var(--inloff-text-secondary, #5F5E5A);
    padding: 6px 0;
}

.ui-datepicker table td {
    padding: 2px;
}

.ui-datepicker table td a,
.ui-datepicker table td span {
    display: block;
    padding: 8px 0 !important;
    border-radius: 6px;
    text-align: center;
    background: transparent !important;
    border: 0 !important;
    color: var(--inloff-text-primary, #1A1612) !important;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ui-datepicker table td a:hover {
    background: var(--inloff-cream-light, #FBF6EB) !important;
}

.ui-datepicker table td.ui-datepicker-today a {
    background: var(--inloff-cream, #F2E8D5) !important;
    font-weight: 700;
}

.ui-datepicker table td.ui-state-active a,
.ui-datepicker table td a.ui-state-active,
.ui-datepicker table td .ui-state-active {
    background: var(--inloff-navy, #1B2540) !important;
    color: #fff !important;
    font-weight: 700;
}

.ui-datepicker table td.ui-datepicker-other-month a,
.ui-datepicker table td.ui-datepicker-other-month span {
    opacity: 0.35;
}


/* ============================================================
   23. TIME PICKER POPUP — contener overflow
   ============================================================ */

/* El plugin EPO usa un timepicker JS que genera un popup con sliders
   HORA / MINUTO. Por default sale del flow visual y se sale del card. */
.tm-epo-timepicker-container,
.tm-epo-timepicker,
.ui-timepicker-container,
.ui-timepicker-wrapper,
.flatpickr-time {
    font-family: "Nunito Sans", sans-serif !important;
    background: #fff !important;
    border: 1px solid var(--inloff-border, #E5E0D5) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(27, 37, 64, 0.16) !important;
    padding: 16px !important;
    z-index: 1000 !important;
    max-width: 320px;
}

.tm-epo-timepicker-container *,
.flatpickr-time * {
    font-family: "Nunito Sans", sans-serif !important;
}

/* Botón HECHO/Done del timepicker */
.tm-epo-timepicker-done,
.tm-epo-timepicker .done,
.flatpickr-confirm,
button[class*="timepicker"][class*="done"] {
    background: var(--inloff-navy, #1B2540) !important;
    color: #fff !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    border: 0 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    cursor: pointer;
    margin-top: 12px !important;
}

/* Labels HORA / MINUTO */
.tm-epo-timepicker label,
.tm-epo-timepicker .label {
    color: var(--inloff-text-secondary, #5F5E5A) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* Sliders del timepicker */
.tm-epo-timepicker input[type="range"],
.tm-epo-timepicker .ui-slider {
    accent-color: var(--inloff-navy, #1B2540);
}


/* ============================================================
   24. CUSTOM DROPDOWN — refuerzo ocultar native select
   ============================================================
   El plugin puede tener otros selects sin nuestra clase enhanced.
   Esta regla asegura que cualquier select MARCADO con
   .inloff-select__native queda completamente invisible. */

select.inloff-select__native,
.tc-extra-product-options select.inloff-select__native,
.cpf-element select.inloff-select__native,
.tmcp-field-wrap select.inloff-select__native {
    position: absolute !important;
    left: -9999px !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    max-height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    z-index: -1 !important;
    visibility: hidden !important;
    display: block !important; /* mantener "display" para que el form lo envíe */
}

/* Container del select wrap: position relative para overlay del menú */
.inloff-select {
    position: relative;
    display: block;
}


/* ============================================================
   25. DATE FIELD 3-SELECTS (Día/Mes/Año) — layout horizontal
   ============================================================
   Si el plugin renderiza date como 3 selects separados, los
   apilamos horizontalmente cuando los enhanceSelects los procese. */

.tc-extra-product-options .cpf-type-date .tmcp-field-wrap-inner > .cpf-upload-wrap,
.tc-extra-product-options .cpf-type-date .tm-epo-datepicker-label-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: stretch !important;
}

.tc-extra-product-options .cpf-type-date .inloff-select {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}


/* ============================================================
   26. NUCLEAR — eliminar listas huérfanas en selects/date
   ============================================================
   Si el plugin EPO renderiza un <ul><li> fallback que no es
   nuestro .inloff-select__menu, ocultarlo. Sólo nuestros menus
   y los grupos de radio/checkbox son válidos como <ul>. */

.tc-extra-product-options .cpf-type-select ul:not(.inloff-select__menu):not(.tmcp-ul-wrap):not(.tm-extra-product-options-radio):not(.tm-extra-product-options-checkbox),
.tc-extra-product-options .cpf-type-date ul:not(.inloff-select__menu):not(.tmcp-ul-wrap):not(.tm-extra-product-options-radio):not(.tm-extra-product-options-checkbox) {
    display: none !important;
}

/* Los selects nativos quedan ocultos con :where para alta specificity
   pero también via attribute selector. Triple-fold redundancy. */
.inloff-select > select,
.inloff-select__native,
select.inloff-select__native,
[class*="inloff-select"] > select {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
    clip-path: inset(50%) !important;
}

/* Time picker pop-up: position fixed centrado para evitar overflow */
.tm-epo-timepicker,
.tm-epo-timepicker-container.tm-epo-timepicker-popup {
    position: absolute !important;
    z-index: 99999 !important;
}

/* Asegurar que el contenedor del time field permite overflow visible */
.tc-extra-product-options .cpf-type-time,
.tc-extra-product-options .cpf-type-time .tmcp-field-wrap,
.tc-extra-product-options .cpf-type-time .tmcp-field-wrap-inner,
.tc-extra-product-options .cpf-type-time .tm-epo-timepicker-label-container {
    position: relative !important;
    overflow: visible !important;
}



/* ============================================================
   27. CUSTOM TIME PICKER — 2 dropdowns inloff-select (HH : MM)
   ============================================================ */

.inloff-timepicker {
    display: flex !important;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.inloff-timepicker__select,
.tc-extra-product-options .inloff-timepicker__select {
    flex: 1 1 0;
    min-width: 0;
}

/* Los selects internos heredan el styling .tmcp-select base, pero los
   forzamos a no tener icono de reloj/calendario (ya estamos dentro de un
   time picker, sería redundante) */
.tc-extra-product-options .inloff-timepicker__select.tmcp-select {
    background-image: none !important;
    padding-right: 14px !important;
}

.inloff-timepicker__separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    padding: 0 2px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--inloff-navy, #1B2540);
    line-height: 1;
    user-select: none;
}

/* Los wraps de .inloff-select dentro del timepicker mantienen su trigger
   completo (con su flecha SVG propia del custom dropdown JS) */
.inloff-timepicker .inloff-select {
    width: 100%;
    flex: 1 1 0;
    min-width: 0;
}


/* ------------------------------------------------------------
   13. OUTPUT TEXT — caja-aviso "Esperando info"
   ------------------------------------------------------------
   Campo `output_text` del builder, bajado a textfield EPO con clase
   `.inloff-output-text`. El input real va oculto (su value se envía y persiste
   al pedido); el JS pinta encima una caja-aviso `.inloff-notice`. Tono
   tranquilizador editorial, NO alerta agresiva. Borde completo, sin side-stripe.
   ------------------------------------------------------------ */

/* Ocultar el input/label nativos del campo de aviso (clase en wrapper o input).
   display:none NO impide el envío del value en HTML → EPO lo persiste igual. */
.tc-extra-product-options .inloff-output-text .tmcp-textfield,
.tc-extra-product-options input.tmcp-textfield.inloff-output-text,
.tc-extra-product-options input.inloff-output-text {
    display: none !important;
}

/* Ocultar el label vacío que envuelve el input oculto. EPO añade el sufijo
   `-div` a la clase del elemento en el wrapper .cpf-element, así que el label
   vive bajo `.inloff-output-text-div`. Sin esto, el label queda como flex item
   hermano del callout y este sale a media columna. */
.tc-extra-product-options .inloff-output-text-div .tm-epo-field-label,
.tc-extra-product-options .inloff-output-text-div .tc-epo-label,
.tc-extra-product-options .inloff-output-text-div > label {
    display: none !important;
}

.inloff-notice {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    gap: var(--inloff-s2, 16px);
    align-items: flex-start;
    padding: 15px 18px;
    border: 1px solid var(--inloff-cream-deep, #EFE7D9);
    background: var(--inloff-cream-warm, #F5EFE5);
    border-radius: var(--inloff-radius-sm, 8px);
    color: var(--inloff-ink-soft, #4A4A4A);
    /* Aparición suave al revelarse por lógica condicional (solo opacity/transform). */
    animation: inloff-notice-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.inloff-notice__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: var(--inloff-heart-dark, #AD8763);
}

.inloff-notice__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.inloff-notice__body {
    min-width: 0;
}

.inloff-notice__eyebrow {
    margin: 0 0 4px;
    font-family: var(--inloff-font-sans, "Outfit", Helvetica, Arial, sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--inloff-heart-dark, #AD8763);
}

.inloff-notice__text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    white-space: pre-line; /* respeta saltos de línea del aviso */
    color: var(--inloff-ink-soft, #4A4A4A);
}

/* Aviso aclaratorio de un campo (marcador `inloff-hint`): icono discreto +
   texto pegado al campo de arriba, sin recuadro ni antetítulo (enhanceOutputNotices). */
/* Selector con `.tc-extra-product-options` para ganar especificidad a las
   reglas de `p` del plugin. Margen negativo SOLO en el propio <p> (movimiento
   local dentro de su campo) → snug al dropdown sin tocar contenedores, así no
   arrastra la sección ni pisa el precio. El gap de fila del theme es 14px. */
.tc-extra-product-options .inloff-epo-hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: -12px 2px 0;
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: pre-line;
    color: var(--inloff-text-secondary, #5F5E5A);
}

.inloff-epo-hint__icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    color: var(--inloff-heart, #C5A184);
}

.inloff-epo-hint__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Variante amarilla del hint (marcador `inloff-hint--warn`): recuadro de aviso
   suave, para llamar la atención sobre una consecuencia (p. ej. envoltorio de
   celofán). A diferencia del hint neutro, SÍ lleva caja y margen normal. */
.tc-extra-product-options .inloff-epo-hint--warn {
    margin: 2px 2px 0;
    padding: 9px 12px;
    background: #FFF8E1;
    border: 1px solid #F1E1A4;
    border-radius: 10px;
    color: #6E5B1C;
}

.inloff-epo-hint--warn .inloff-epo-hint__icon {
    color: #C79A1E;
}

@keyframes inloff-notice-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .inloff-notice { animation: none; }
}

/* Variantes para el LASER CHECK (assets/js/inloff-epo.js showLaserNotice):
   el aviso se pinta DEBAJO del campo de subida, con tono según severidad. */
.inloff-notice--laser {
    margin-top: 12px;
}

/* Aviso ámbar: "puede necesitar revisión" (permite continuar). */
.inloff-notice--warn {
    border-color: #E8D9B0;
    background: #FBF3DF;
}
.inloff-notice--warn .inloff-notice__icon,
.inloff-notice--warn .inloff-notice__eyebrow {
    color: #B5852A;
}

/* Aviso rojo: "formato no admitido" (bloqueo). */
.inloff-notice--error {
    border-color: #E9C9C1;
    background: #FBEBE7;
}
.inloff-notice--error .inloff-notice__icon,
.inloff-notice--error .inloff-notice__eyebrow {
    color: #B4432E;
}


/* ============================================================
   UBICACIÓN — autocompletado OSM (Photon) + coordenadas
   ============================================================ */
.inloff-geo-anchor { position: relative; }

.inloff-geo-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1.5px solid var(--inloff-heart, #C5A184);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(27, 37, 64, 0.14);
    max-height: 260px;
    overflow-y: auto;
}
.inloff-geo-menu__item {
    padding: 9px 11px;
    border-radius: 7px;
    font-size: 0.92rem;
    line-height: 1.3;
    color: var(--inloff-text-primary, #1A1612);
    cursor: pointer;
}
.inloff-geo-menu__item:hover,
.inloff-geo-menu__item.is-active {
    background: var(--inloff-cream-light, #FBF6EB);
}
.inloff-geo-menu__attr {
    padding: 6px 11px 3px;
    font-size: 0.72rem;
    color: var(--inloff-text-secondary, #5F5E5A);
    letter-spacing: 0.02em;
    pointer-events: none;
}
/* Coordenadas: se rellenan solas, no editable en el front. */
.inloff-geo-coords__input {
    background: var(--inloff-cream-light, #FBF6EB);
    color: var(--inloff-text-secondary, #5F5E5A);
    font-variant-numeric: tabular-nums;
    cursor: default;
}


/* ============================================================
   FECHA — los 3 selects (día/mes/año) del datepicker EPO en fila
   ============================================================
   EPO renderiza el campo `date` como 3 <select data-tm-date> (los genera
   su JS tras el init del theme, por eso quedan nativos). A ancho completo
   caben en una sola línea; les damos aire y ancho natural. */
select[data-tm-date] {
    display: inline-block;
    width: auto;
    min-width: 4.75em;
    margin: 0 8px 6px 0;
    vertical-align: middle;
}


/* ============================================================
   CHECKBOX DE CONFIRMACIÓN — toggle con palometa (.inloff-toggle)
   ============================================================
   Un checkbox como fila: texto a la izquierda + control cuadrado que muestra
   una palometa (✓) al marcar. Anula el estilo de botón navy por defecto de
   los checkboxes. El check nativo sigue oculto; el cuadro lo dibuja
   .tc-input-wrap y el estado usa .tc-active (que EPO añade al <li>). */
.tc-extra-product-options ul.inloff-toggle-ul {
    display: block;
}
.tc-extra-product-options .inloff-toggle-ul li.tmcp-field-wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 0;
}
.tc-extra-product-options .inloff-toggle-ul li.tmcp-field-wrap label.tm-epo-field-label {
    display: block;
    width: 100%;
    min-height: 0;
    padding: 14px 16px;
    border: 1.5px solid var(--inloff-border, #E5E0D5);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(27, 37, 64, 0.05);
    transition: border-color 0.2s ease, background 0.2s ease,
                box-shadow 0.2s ease;
}
.tc-extra-product-options .inloff-toggle-ul li.tmcp-field-wrap:not(.tc-active) label.tm-epo-field-label:hover {
    border-color: var(--inloff-heart, #C5A184);
    background: #FFFEFA;
}
/* Fila: texto (izq) + control (der). */
.tc-extra-product-options .inloff-toggle-ul .tc-label-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}
.tc-extra-product-options .inloff-toggle-ul .tc-label {
    order: 1;
    flex: 1 1 auto;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--inloff-text-primary, #1A1612);
}
.tc-extra-product-options .inloff-toggle-ul .tc-epo-style-wrapper {
    order: 2;
    flex: 0 0 auto;
}
/* Control = caja redondeada. */
.tc-extra-product-options .inloff-toggle-ul .tc-input-wrap {
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 !important;
    border: 1.5px solid var(--inloff-border, #E5E0D5);
    border-radius: 9px;
    background: var(--inloff-cream-light, #FBF6EB);
    position: relative;
    transition: background 0.16s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Palometa (✓): rectángulo con dos bordes, rotado. */
.tc-extra-product-options .inloff-toggle-ul .tc-input-wrap::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 5px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) scale(0.3);
    opacity: 0;
    transition: opacity 0.16s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Marcado (.tc-active): caja navy + palometa; la fila NO se rellena de navy. */
.tc-extra-product-options .inloff-toggle-ul li.tmcp-field-wrap.tc-active label.tm-epo-field-label {
    background: var(--inloff-cream-light, #FBF6EB) !important;
    border-color: var(--inloff-navy, #1B2540) !important;
    color: var(--inloff-text-primary, #1A1612) !important;
    box-shadow: 0 3px 14px rgba(27, 37, 64, 0.09) !important;
}
/* El campo condicional (contenedor→celda→ul→li) NO debe recortar el borde ni
   la sombra superiores del toggle. */
.tc-extra-product-options .inloff-toggle-div,
.tc-extra-product-options .inloff-toggle-div .tc-element-inner-wrap,
.tc-extra-product-options .inloff-toggle-div .tc-row,
.tc-extra-product-options .inloff-toggle-div .tc-cell,
.tc-extra-product-options ul.inloff-toggle-ul,
.tc-extra-product-options .inloff-toggle-ul li.tmcp-field-wrap,
.tc-extra-product-options .inloff-toggle-ul .tmcp-field-wrap-inner {
    overflow: visible !important;
}
/* Aire arriba para separarlo del campo anterior. */
.tc-extra-product-options .inloff-toggle-div {
    margin-top: 6px;
    padding-top: 3px;
}
.tc-extra-product-options .inloff-toggle-ul li.tmcp-field-wrap.tc-active label.tm-epo-field-label .tc-label,
.tc-extra-product-options .inloff-toggle-ul li.tmcp-field-wrap.tc-active label.tm-epo-field-label .tc-label-text {
    color: var(--inloff-text-primary, #1A1612) !important;
}
.tc-extra-product-options .inloff-toggle-ul li.tmcp-field-wrap.tc-active .tc-input-wrap {
    background: var(--inloff-navy, #1B2540);
    border-color: var(--inloff-navy, #1B2540);
}
.tc-extra-product-options .inloff-toggle-ul li.tmcp-field-wrap.tc-active .tc-input-wrap::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}
/* Foco por teclado. */
.tc-extra-product-options .inloff-toggle-ul label.tm-epo-field-label:focus-within .tc-input-wrap {
    box-shadow: 0 0 0 3px rgba(197, 161, 132, 0.35);
}
/* Móvil: algo menos de padding y el texto puede envolver. */
@media (max-width: 480px) {
    .tc-extra-product-options .inloff-toggle-ul li.tmcp-field-wrap label.tm-epo-field-label {
        padding: 12px 14px;
    }
    .tc-extra-product-options .inloff-toggle-ul .tc-label-wrap {
        gap: 12px;
    }
}

/* ============================================================
   Contador de caracteres EPO (.tc-chars)
   EPO añade "N caracteres restantes" bajo todo campo con maxlength.
   Lo ocultamos por defecto y lo revelamos solo cerca del límite
   (inloff-epo.js `enhanceCharCounter`) para quitar ruido visual.
   ============================================================ */
.tc-extra-product-options .tc-chars {
    display: none;
}
.tc-extra-product-options .tc-chars.inloff-cc-show {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    line-height: 1.3;
    text-align: right;
    color: var(--inloff-text-secondary, #5F5E5A);
}
.tc-extra-product-options .tc-chars.inloff-cc-low {
    color: var(--inloff-danger, #A32D2D);
}

/* ============================================================
   EPO WIZARD POR PASOS (inloff-epo-wizard.js)
   Solo activo en productos "pack" (contenedor .inloff-wz). Inerte
   en el resto. Barra de progreso + un paso visible a la vez.
   ============================================================ */

/* El botón real de "Añadir al carrito" (y qty) se ocultan: el wizard
   los dispara desde el último paso. */
form.cart.inloff-wz-active .quantity,
form.cart.inloff-wz-active .single_add_to_cart_button {
    display: none !important;
}

/* Separación respecto al bloque de precio/título de arriba (padding, no
   margin, para que no colapse con el elemento anterior). */
.tc-extra-product-options.inloff-wz {
    padding-top: 34px;
}

/* --- Barra de progreso --- */
.tc-extra-product-options.inloff-wz .inloff-wz-progress {
    position: relative;
    margin: 0 0 30px;
}
.inloff-wz-track {
    position: absolute;
    top: 15px;
    left: var(--wz-inset, 12.5%);
    right: var(--wz-inset, 12.5%);
    height: 2px;
    background: var(--inloff-border, #E5E0D5);
    border-radius: 2px;
    z-index: 0;
}
.inloff-wz-fill {
    height: 100%;
    width: 0;
    background: var(--inloff-heart, #C5A184);
    border-radius: 2px;
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.inloff-wz-dots {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}
.inloff-wz-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    text-align: center;
    background: none;
    border: 0;
    cursor: default;
}
.inloff-wz-dot.is-done { cursor: pointer; }
.inloff-wz-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--inloff-cream-light, #FBF6EB);
    border: 1.5px solid var(--inloff-border, #E5E0D5);
    color: var(--inloff-text-secondary, #5F5E5A);
    font-size: 13px;
    font-weight: 700;
    transition: background 0.25s ease, border-color 0.25s ease,
        color 0.25s ease, box-shadow 0.25s ease;
}
.inloff-wz-lbl {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.25;
    color: var(--inloff-text-secondary, #5F5E5A);
    max-width: 92px;
}
.inloff-wz-dot.is-done .inloff-wz-num {
    background: var(--inloff-heart, #C5A184);
    border-color: var(--inloff-heart, #C5A184);
    color: #fff;
}
.inloff-wz-dot.is-active .inloff-wz-num {
    background: var(--inloff-navy, #1B2540);
    border-color: var(--inloff-navy, #1B2540);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(27, 37, 64, 0.10);
}
.inloff-wz-dot.is-active .inloff-wz-lbl {
    color: var(--inloff-navy, #1B2540);
}

/* --- Transición del paso al mostrarse --- */
@keyframes inloff-wz-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.tc-extra-product-options.inloff-wz .inloff-wz-step {
    animation: inloff-wz-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --- Navegación (Atrás / Continuar) --- */
.inloff-wz-nav { margin-top: 26px; }
.inloff-wz-error {
    min-height: 18px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    color: var(--inloff-danger, #A32D2D);
}
.inloff-wz-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.inloff-wz-back,
.inloff-wz-next {
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease,
        color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.inloff-wz-back {
    padding: 13px 22px;
    background: transparent;
    border-color: var(--inloff-border, #E5E0D5);
    color: var(--inloff-text-secondary, #5F5E5A);
}
.inloff-wz-back:hover {
    border-color: var(--inloff-navy, #1B2540);
    color: var(--inloff-navy, #1B2540);
}
.inloff-wz-next {
    flex: 1;
    padding: 14px 24px;
    background: var(--inloff-navy, #1B2540);
    color: #fff;
    box-shadow: 0 6px 16px rgba(27, 37, 64, 0.16);
}
.inloff-wz-next:hover {
    background: #223056;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(27, 37, 64, 0.22);
}
.inloff-wz-next.is-final {
    background: var(--inloff-heart, #C5A184);
    box-shadow: 0 6px 16px rgba(197, 161, 132, 0.30);
}
.inloff-wz-next.is-final:hover { background: #B8916F; }

/* --- Campo inválido dentro del paso --- */
.inloff-wz-invalid input,
.inloff-wz-invalid textarea,
.inloff-wz-invalid select,
.inloff-wz-invalid .inloff-select__trigger {
    border-color: var(--inloff-danger, #A32D2D) !important;
    box-shadow: 0 0 0 3px rgba(163, 45, 45, 0.12) !important;
}

/* --- Móvil: solo números; el título del paso lo da la cabecera de sección --- */
@media (max-width: 560px) {
    .inloff-wz-lbl { display: none; }
    .inloff-wz-num { width: 28px; height: 28px; font-size: 12px; }
    .inloff-wz-track { top: 13px; }
    .inloff-wz-btns { flex-wrap: wrap; }
    .inloff-wz-next { min-width: 60%; }
}

/* ============================================================
   Campos con unidad — peso (kg) / medida (cm)
   .inloff-unit envuelve el input; el sufijo va a la derecha y el
   mensaje de formato debajo cuando el valor no es válido.
   ============================================================ */
.inloff-unit { position: relative; display: block; }
.inloff-unit > input.tmcp-textfield { padding-right: 46px !important; }
.inloff-unit__suffix {
    position: absolute;
    top: 0;
    right: 1px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-weight: 700;
    color: #1B2540;
    pointer-events: none;
    opacity: .72;
}
.inloff-unit--invalid > input.tmcp-textfield {
    border-color: #B4432E !important;
    background: #FBEBE7;
}
.inloff-unit__msg {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.35;
    color: #B4432E;
}
.inloff-unit__msg:empty { display: none; }