/* Hallmark · macrostructure: Workbench (lista + panel) · tone: utilitario · anchor hue: cool (azul #125bc9)
 * Hallmark · pre-emit critique: P5 H5 E5 S4 R5 V4
 *
 * REDISEÑO de la página /request-quote/ (YITH Request a Quote).
 * La tabla pobre (✕ · foto · nombre · cantidad) se sustituye por TARJETAS
 * enriquecidas (SKU, categorías, variación, descripción) en 2 columnas: lista
 * a la izquierda + columna derecha (resumen + formulario) sticky en escritorio;
 * apila en móvil. Markup: woocommerce/request-quote-table.php (.yoo-rq-*).
 *
 * Colores/medidas vienen del Sistema de Diseño (yoo-extras/includes/tokens.css,
 * variables --yoo-*) con fallback al valor real. No escribir hex/px sueltos.
 */

/* ====================================================================
 * Neutralizar el padding/line-height que el tema añade a TODO <li>
 * (merto/css/reset.css:373 → `ol li,ul li {line-height:22px; padding:5px 0;}`),
 * que descuadraba nuestras tarjetas, badges y filas de resumen (todas son <li>).
 * Usamos :where() → especificidad CERO: anula el reset del tema pero NO pisa el
 * padding propio de cada componente (definido más abajo con clases). */
:where(.yith-request-a-quote-page .yoo-rq-list li,
       .yith-request-a-quote-page .yoo-rq-summary li,
       .yith-request-a-quote-page .yoo-rq-card__variation li) {
    padding: 0;
    line-height: normal;
}

/* ====================================================================
 * Layout: 2 columnas (lista | formulario + resumen) — DESDE RAÍZ, sin JS.
 *
 * El CF7/inquiry-form de YITH rompe el anidamiento de .ywraq-wrapper (cierra el
 * div antes de tiempo en el DOM parseado), así que el formulario y el resumen
 * acaban como hijos directos del ARTICLE de la página, hermanos de .ywraq-wrapper.
 * Por eso el grid lo ponemos en el .site-content > article (ancestro común real):
 *   article                              ← GRID
 *     ├── .ywraq-wrapper (con la lista)  → área "list"     (izquierda)
 *     ├── .yoo-rq-form-wrapper           → área "form"      (derecha-arriba)
 *     └── .yoo-rq-summary                → área "summary"   (derecha-abajo)
 * Colocado por el servidor en el primer render → sin JS, sin salto, sin pisado.
 * ==================================================================== */
/* Solo activamos el grid de 2 columnas cuando hay productos (el wrapper NO lleva
 * .ywraq-empty). Con :has() lo detectamos sin JS; si el navegador no soporta
 * :has(), cae a una sola columna (apilado), que sigue siendo correcto. */
.yith-request-a-quote-page .site-content > article:has(.ywraq-wrapper:not(.ywraq-empty)) {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    grid-template-areas:
        "list form"
        "list summary";
    grid-template-rows: auto auto;
    /* gap vertical 24px: respiro entre el formulario y el resumen (que son dos
     * tarjetas independientes en la columna derecha; la lista abarca ambas filas
     * a la izquierda, así que ese respiro solo se ve en la columna derecha).
     * Horizontal amplio (32px) para separar la lista de la columna derecha. */
    gap: var(--yoo-space-6, 24px) var(--yoo-space-8, 32px);
    align-items: start;
}
.yith-request-a-quote-page .site-content > article > .ywraq-wrapper {
    grid-area: list;
    min-width: 0;
}
.yith-request-a-quote-page .site-content > article > .yoo-rq-form-wrapper {
    grid-area: form;
    min-width: 0;
    align-self: start;
}
.yith-request-a-quote-page .site-content > article > .yoo-rq-summary {
    grid-area: summary;
    align-self: start;
}
/* El div vacío .ywraq-before-form que deja YITH dentro de la tabla. */
.yith-request-a-quote-page .ywraq-form-table-wrapper > .ywraq-before-form:empty { display: none; }
/* Reset de cualquier wrapper interno que limite el ancho de la lista. */
.yith-request-a-quote-page .ywraq-wrapper { display: block; }
.yith-request-a-quote-page .ywraq-form-table-wrapper { display: block; }

/* ====================================================================
 * Cabecera de la lista
 * ==================================================================== */
.yoo-rq-items__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--yoo-space-3, 12px);
    margin-bottom: var(--yoo-space-5, 20px);
    padding-bottom: var(--yoo-space-3, 12px);
    border-bottom: 2px solid var(--yoo-color-primary, #125bc9);
}
.yoo-rq-items__title {
    margin: 0;
    font-size: var(--yoo-font-size-xl, 22px);
    font-weight: var(--yoo-font-weight-bold, 700);
    color: var(--yoo-color-text, #1a1a1a);
}
.yoo-rq-items__count {
    font-size: var(--yoo-font-size-base, 14px);
    color: var(--yoo-color-text-subtle, #8a8f98);
    font-weight: var(--yoo-font-weight-medium, 500);
    white-space: nowrap;
}

/* ====================================================================
 * Lista de tarjetas
 * ==================================================================== */
.yoo-rq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--yoo-space-4, 16px);
}

/* Scope de página + .cart_item para ganar a las reglas del tema sobre .cart_item
 * (que ponían el padding vertical a 0). */
.yith-request-a-quote-page li.yoo-rq-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: var(--yoo-space-4, 16px);
    align-items: start;
    padding: var(--yoo-space-4, 16px) !important;
    background: var(--yoo-color-surface, #fff);
    border: 1px solid var(--yoo-color-line, #e9ecf1);
    border-radius: var(--yoo-radius-lg, 12px);
    box-shadow: var(--yoo-shadow-xs, 0 1px 2px rgba(16,24,40,.04));
    transition: box-shadow var(--yoo-transition-base, .22s ease),
                transform var(--yoo-transition-base, .22s ease),
                border-color var(--yoo-transition-base, .22s ease);
}
.yoo-rq-card:hover {
    box-shadow: var(--yoo-shadow-md, 0 8px 24px rgba(16,24,40,.10));
    border-color: var(--yoo-color-line-strong, #d4d8e0);
    transform: translateY(-2px);
}

/* Imagen */
.yoo-rq-card__media {
    width: 96px;
    height: 96px;
    border-radius: var(--yoo-radius-md, 8px);
    overflow: hidden;
    background: var(--yoo-color-surface-2, #f3f5f9);
    flex: 0 0 auto;
}
.yoo-rq-card__media a,
.yoo-rq-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cuerpo */
.yoo-rq-card__body { min-width: 0; }
.yoo-rq-card__title {
    margin: 0 0 var(--yoo-space-2, 8px);
    font-size: var(--yoo-font-size-lg, 18px);
    line-height: var(--yoo-line-height-tight, 1.2);
    font-weight: var(--yoo-font-weight-semibold, 600);
}
.yoo-rq-card__title a {
    color: var(--yoo-color-text, #1a1a1a);
    text-decoration: none;
    transition: color var(--yoo-transition-fast, .16s ease);
}
.yoo-rq-card__title a:hover { color: var(--yoo-color-primary, #125bc9); }

/* Meta: SKU (chip) + categorías */
.yoo-rq-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--yoo-space-2, 8px);
    margin-bottom: var(--yoo-space-2, 8px);
}
.yoo-rq-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    background: var(--yoo-color-surface-2, #f3f5f9);
    border-radius: var(--yoo-radius-pill, 999px);
    font-size: var(--yoo-font-size-xs, 11px);
    font-weight: var(--yoo-font-weight-semibold, 600);
    color: var(--yoo-color-text-body, #333);
    white-space: nowrap;
}
.yoo-rq-chip__k {
    color: var(--yoo-color-text-subtle, #8a8f98);
    font-weight: var(--yoo-font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.yoo-rq-card__cats {
    font-size: var(--yoo-font-size-sm, 13px);
    color: var(--yoo-color-text-muted, #6b7280);
    min-width: 0;
}
.yoo-rq-card__cats a {
    color: var(--yoo-color-text-muted, #6b7280);
    text-decoration: none;
}
.yoo-rq-card__cats a:hover { color: var(--yoo-color-primary, #125bc9); }

/* Variación elegida */
/* Opciones elegidas: CHIPS clave·valor (auditoría Hallmark 2026-07-02).
 * Una píldora por atributo — la clave en tenue, el valor en tinta con un
 * separador de punto medio dibujado; hairline + superficie suave. */
.yoo-rq-card__variation {
    list-style: none;
    margin: 2px 0 var(--yoo-space-2, 8px);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.yoo-rq-card__variation li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 3px 10px;
    border: 1px solid var(--yoo-color-line, #e9ecf1);
    background: var(--yoo-color-surface-2, #f3f5f9);
    border-radius: var(--yoo-radius-pill, 999px);
    font-size: var(--yoo-font-size-sm, 13px);
    line-height: 1.45;
}
.yoo-rq-card__var-k {
    color: var(--yoo-color-text-muted, #6b7280);
    font-weight: var(--yoo-font-weight-medium, 500);
}
.yoo-rq-card__var-k::after {
    content: '·';
    margin: 0 6px;
    color: var(--yoo-color-line-strong, #d4d8e0);
}
.yoo-rq-card__var-v {
    color: var(--yoo-color-text, #1a1a1a);
    font-weight: var(--yoo-font-weight-semibold, 600);
}

/* Descripción corta */
.yoo-rq-card__desc {
    margin: 0;
    font-size: var(--yoo-font-size-sm, 13px);
    line-height: var(--yoo-line-height-base, 1.5);
    color: var(--yoo-color-text-subtle, #8a8f98);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Acciones: eliminar (arriba) + cantidad (abajo) */
.yoo-rq-card__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--yoo-space-4, 16px);
    align-self: stretch;
    flex: 0 0 auto;
}
.yoo-rq-card__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--yoo-radius-circle, 50%);
    background: var(--yoo-color-surface-2, #f3f5f9);
    color: var(--yoo-color-text-subtle, #8a8f98);
    font-size: 20px;
    line-height: 1 !important;   /* el tema fuerza line-height alto → descentraba el × */
    text-align: center;
    text-decoration: none !important;
    padding: 0;
    flex: 0 0 auto;
    transition: background-color var(--yoo-transition-fast, .16s ease),
                color var(--yoo-transition-fast, .16s ease);
}
.yoo-rq-card__remove:hover {
    background: var(--yoo-color-danger, #b42318);
    color: #fff;
}

.yoo-rq-card__qty {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.yoo-rq-card__qty-label {
    font-size: var(--yoo-font-size-xs, 11px);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--yoo-color-text-subtle, #8a8f98);
    font-weight: var(--yoo-font-weight-semibold, 600);
}
/* Caja de cantidad — RESPETA el patrón del tema: .number-button es relative con
 * los iconos −/+ como :before/:after y los .minus/.plus reales en position:
 * absolute (izq/der). El input ocupa todo el ancho con padding lateral para no
 * solaparse. NO lo convertimos a flex-celdas (eso ponía el número debajo del −).
 * Solo afinamos tamaño/colores/borde. */
.yoo-rq-card__qty .quantity {
    display: inline-block;
    width: 100px;
}
.yoo-rq-card__qty .number-button {
    width: 100px !important;
    height: 38px;
    position: relative;
    border: 1px solid var(--yoo-color-line-strong, #d4d8e0);
    border-radius: var(--yoo-radius-sm, 6px);
    background: var(--yoo-color-surface, #fff);
    overflow: hidden;
}
/* Iconos −/+ del tema (pseudo-elementos) algo mayores y legibles. */
.yoo-rq-card__qty .number-button:before,
.yoo-rq-card__qty .number-button:after {
    width: 32px !important;
    font-size: 11px !important;
    color: var(--yoo-color-text-body, #333) !important;
    z-index: 1;
}
/* Botones −/+ reales (absolute encima de los iconos). Mantenemos su position. */
.yoo-rq-card__qty .minus,
.yoo-rq-card__qty .plus {
    width: 32px !important;
    height: 36px !important;
    line-height: 36px !important;
    z-index: 2;
    background: transparent !important;
    cursor: pointer;
    transition: background-color var(--yoo-transition-fast, .16s ease);
}
.yoo-rq-card__qty .minus:hover,
.yoo-rq-card__qty .plus:hover {
    background: var(--yoo-color-primary-soft, #eaf1fd) !important;
}
/* Número central: ancho completo con padding lateral para dejar hueco a los
 * botones absolutos. Centrado, misma altura, sin spinners nativos. */
.yoo-rq-card__qty .quantity input.qty,
.yoo-rq-card__qty input.qty {
    width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 32px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: var(--yoo-font-size-base, 14px) !important;
    font-weight: var(--yoo-font-weight-semibold, 600) !important;
    color: var(--yoo-color-text, #1a1a1a) !important;
    background: transparent !important;
    -moz-appearance: textfield;
}
.yoo-rq-card__qty input.qty::-webkit-outer-spin-button,
.yoo-rq-card__qty input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.yoo-rq-card__qty input.qty:focus-visible {
    outline: 2px solid var(--yoo-color-primary, #125bc9);
    outline-offset: -2px;
}
.yoo-rq-qty-fixed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    font-weight: var(--yoo-font-weight-semibold, 600);
    color: var(--yoo-color-text, #1a1a1a);
}

/* ====================================================================
 * Acciones de lista (vaciar / actualizar)
 * ==================================================================== */
.yoo-rq-list-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--yoo-space-3, 12px);
    margin-top: var(--yoo-space-5, 20px);
}
.yoo-rq-list-actions__left {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yoo-space-2, 8px);
}

/* ====================================================================
 * Botones. Scope de página + !important en color/fondo/borde para ganar a los
 * estilos del tema sobre input[type=submit] y .button (que volvían negro el
 * "Actualizar lista"). El resto de propiedades sin !important.
 * ==================================================================== */
.yith-request-a-quote-page .yoo-rq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--yoo-space-2, 8px);
    width: auto;
    padding: 11px 18px !important;
    border-radius: var(--yoo-radius-md, 8px) !important;
    font-size: var(--yoo-font-size-base, 14px) !important;
    font-weight: var(--yoo-font-weight-semibold, 600);
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: background-color var(--yoo-transition-fast, .16s ease),
                color var(--yoo-transition-fast, .16s ease),
                border-color var(--yoo-transition-fast, .16s ease),
                transform .1s ease;
}
.yith-request-a-quote-page .yoo-rq-btn:active { transform: translateY(1px); }
.yith-request-a-quote-page .yoo-rq-btn--primary {
    background: var(--yoo-color-primary, #125bc9) !important;
    color: var(--yoo-color-primary-contrast, #fff) !important;
}
.yith-request-a-quote-page .yoo-rq-btn--primary:hover {
    background: var(--yoo-color-primary-hover, #0f4ea8) !important;
    color: #fff !important;
}
.yith-request-a-quote-page .yoo-rq-btn--ghost {
    background: var(--yoo-color-surface, #fff) !important;
    color: var(--yoo-color-text-body, #333) !important;
    border-color: var(--yoo-color-line-strong, #d4d8e0) !important;
}
.yith-request-a-quote-page .yoo-rq-btn--ghost:hover {
    border-color: var(--yoo-color-primary, #125bc9) !important;
    color: var(--yoo-color-primary, #125bc9) !important;
}
.yoo-rq-btn:focus-visible {
    outline: 2px solid var(--yoo-color-primary, #125bc9);
    outline-offset: 2px;
}

/* ====================================================================
 * Columna derecha: formulario (arriba) + resumen (abajo)
 * ==================================================================== */
/* ---- DOS TARJETAS SEPARADAS (columna derecha) ----
 * Antes iban "fundidas" en un panel continuo (gap 0), pero en escritorio
 * quedaban PEGADAS (queja del cliente 2026-07-17): el formulario y el resumen
 * parecían amontonados sin aire. Ahora son DOS tarjetas independientes con
 * borde/redondeo/sombra completos y un respiro constante entre ellas (el gap
 * lo pone el grid del article, ver abajo). Da ritmo y claridad. */
.yith-request-a-quote-page .yoo-rq-form-wrapper {
    border-radius: var(--yoo-radius-lg, 12px);
    border: 1px solid var(--yoo-color-line, #e9ecf1);
    box-shadow: var(--yoo-shadow-sm, 0 1px 3px rgba(16,24,40,.08));
}
.yoo-rq-summary {
    background: var(--yoo-color-surface, #fff);
    border: 1px solid var(--yoo-color-line, #e9ecf1);
    border-radius: var(--yoo-radius-lg, 12px);
    box-shadow: var(--yoo-shadow-sm, 0 1px 3px rgba(16,24,40,.08));
    padding: var(--yoo-space-6, 24px);
}
.yoo-rq-summary__head { margin-bottom: var(--yoo-space-5, 20px); }
.yoo-rq-summary__title {
    margin: 0 0 var(--yoo-space-2, 8px);
    font-size: var(--yoo-font-size-xl, 22px);
    font-weight: var(--yoo-font-weight-bold, 700);
    color: var(--yoo-color-text, #1a1a1a);
    line-height: var(--yoo-line-height-tight, 1.2);
}
.yoo-rq-summary__subtitle {
    margin: 0;
    font-size: var(--yoo-font-size-sm, 13px);
    line-height: var(--yoo-line-height-base, 1.5);
    color: var(--yoo-color-text-muted, #6b7280);
}
/* Scope de página (.yith-request-a-quote-page) en filas y badges → especificidad
 * alta que gana SIEMPRE al reset del tema `ol li,ul li {padding:5px 0}`. */
.yith-request-a-quote-page .yoo-rq-summary__rows {
    list-style: none;
    margin: 0 0 var(--yoo-space-4, 16px);
    padding: 0;
    border-top: 1px solid var(--yoo-color-line, #e9ecf1);
}
.yith-request-a-quote-page .yoo-rq-summary__rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--yoo-space-3, 12px) 0 !important;
    line-height: 1.3 !important;
    border-bottom: 1px solid var(--yoo-color-line, #e9ecf1);
}
.yoo-rq-summary__k {
    font-size: var(--yoo-font-size-sm, 13px);
    color: var(--yoo-color-text-muted, #6b7280);
}
.yoo-rq-summary__v {
    font-size: var(--yoo-font-size-lg, 18px);
    font-weight: var(--yoo-font-weight-bold, 700);
    color: var(--yoo-color-text, #1a1a1a);
}
.yith-request-a-quote-page .yoo-rq-summary__badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--yoo-space-2, 8px);
}
.yith-request-a-quote-page .yoo-rq-summary__badges li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px !important;
    line-height: 1.2 !important;
    background: var(--yoo-color-primary-soft, #eaf1fd);
    color: var(--yoo-color-primary-active, #0d47a1);
    border-radius: var(--yoo-radius-pill, 999px);
    font-size: var(--yoo-font-size-xs, 11px);
    font-weight: var(--yoo-font-weight-semibold, 600);
}

/* ====================================================================
 * Formulario de datos "Enviar la solicitud".
 * Lo imprime el plugin en .yith-ywraq-mail-form-wrapper (hermano de la tabla).
 * Lo vestimos como una tarjeta-panel coherente, en la columna derecha (arriba).
 * ==================================================================== */
.yith-request-a-quote-page .yoo-rq-form-wrapper {
    background: var(--yoo-color-surface, #fff);
    border: 1px solid var(--yoo-color-line, #e9ecf1);
    border-radius: var(--yoo-radius-lg, 12px);
    box-shadow: var(--yoo-shadow-sm, 0 1px 3px rgba(16,24,40,.08));
    padding: var(--yoo-space-6, 24px);
}
/* El título "Enviar la solicitud" lo imprime YITH como <h3> DENTRO de
 * .yith-ywraq-mail-form-wrapper (no como hijo directo de .yoo-rq-form-wrapper),
 * así que hay que apuntar a él a través de ese wrapper. Sin esto, el <h3>
 * salía pegado a los campos usando el margen por defecto del tema. */
.yith-request-a-quote-page .yoo-rq-form-wrapper h3,
.yith-request-a-quote-page .yoo-rq-form-wrapper .yith-ywraq-mail-form-wrapper > h3 {
    margin: 0 0 var(--yoo-space-5, 20px);
    font-size: var(--yoo-font-size-xl, 22px);
    font-weight: var(--yoo-font-weight-bold, 700);
    color: var(--yoo-color-text, #1a1a1a);
    line-height: var(--yoo-line-height-tight, 1.2);
}
.yith-request-a-quote-page .yoo-rq-form-wrapper .form-row,
.yith-request-a-quote-page .yoo-rq-form-wrapper p {
    margin: 0 0 var(--yoo-space-4, 16px);
}
.yith-request-a-quote-page .yoo-rq-form-wrapper label {
    display: block;
    margin-bottom: 5px;
    font-size: var(--yoo-font-size-sm, 13px);
    font-weight: var(--yoo-font-weight-semibold, 600);
    color: var(--yoo-color-text-body, #333);
}
.yith-request-a-quote-page .yoo-rq-form-wrapper input[type="text"],
.yith-request-a-quote-page .yoo-rq-form-wrapper input[type="email"],
.yith-request-a-quote-page .yoo-rq-form-wrapper input[type="tel"],
.yith-request-a-quote-page .yoo-rq-form-wrapper textarea,
.yith-request-a-quote-page .yoo-rq-form-wrapper select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--yoo-color-line, #e9ecf1);
    border-radius: var(--yoo-radius-md, 8px);
    font-size: var(--yoo-font-size-base, 14px);
    line-height: 1.4;
    color: var(--yoo-color-text, #1a1a1a);
    background: var(--yoo-color-surface-3, #f5f6f8);
    box-sizing: border-box;
    transition: border-color var(--yoo-transition-fast, .16s ease),
                box-shadow var(--yoo-transition-fast, .16s ease),
                background-color var(--yoo-transition-fast, .16s ease);
}
.yith-request-a-quote-page .yoo-rq-form-wrapper input::placeholder,
.yith-request-a-quote-page .yoo-rq-form-wrapper textarea::placeholder {
    color: var(--yoo-color-text-subtle, #8a8f98);
}
.yith-request-a-quote-page .yoo-rq-form-wrapper textarea { min-height: 130px; resize: vertical; }
.yith-request-a-quote-page .yoo-rq-form-wrapper input:focus,
.yith-request-a-quote-page .yoo-rq-form-wrapper textarea:focus,
.yith-request-a-quote-page .yoo-rq-form-wrapper select:focus,
.yith-request-a-quote-page .yoo-rq-form-wrapper input:focus-visible,
.yith-request-a-quote-page .yoo-rq-form-wrapper textarea:focus-visible {
    outline: none;
    background: var(--yoo-color-surface, #fff);
    border-color: var(--yoo-color-primary, #125bc9);
    box-shadow: 0 0 0 3px var(--yoo-color-primary-soft, #eaf1fd);
}
/* Botón "Enviar tu solicitud": azul de marca, ancho completo. !important para
 * ganar al estilo negro del tema. */
.yith-request-a-quote-page .yoo-rq-form-wrapper button[type="submit"],
.yith-request-a-quote-page .yoo-rq-form-wrapper input[type="submit"],
.yith-request-a-quote-page .yoo-rq-form-wrapper .button {
    width: 100% !important;
    padding: 14px 20px !important;
    background: var(--yoo-color-primary, #125bc9) !important;
    color: var(--yoo-color-primary-contrast, #fff) !important;
    border: 0 !important;
    border-radius: var(--yoo-radius-md, 8px) !important;
    font-size: var(--yoo-font-size-md, 15px) !important;
    font-weight: var(--yoo-font-weight-bold, 700) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer;
    transition: background-color var(--yoo-transition-fast, .16s ease);
}
.yith-request-a-quote-page .yoo-rq-form-wrapper button[type="submit"]:hover,
.yith-request-a-quote-page .yoo-rq-form-wrapper input[type="submit"]:hover,
.yith-request-a-quote-page .yoo-rq-form-wrapper .button:hover {
    background: var(--yoo-color-primary-hover, #0f4ea8) !important;
}

/* ====================================================================
 * Campo "Tipo de cliente" (select) + select2 (YITH lo mejora con selectWoo).
 *
 * YITH encola selectWoo/select2 sobre el <select>; el widget resultante
 * (.select2-container) NO respeta el ancho y provocaba scroll horizontal.
 * Lo contenemos al 100% y le damos el mismo aspecto que los inputs.
 * ==================================================================== */
.yith-request-a-quote-page .yoo-rq-form-wrapper .select2-container {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}
.yith-request-a-quote-page .yoo-rq-form-wrapper .select2-container--default .select2-selection--single {
    height: auto;
    min-height: 46px;
    padding: 6px 8px;
    border: 1px solid var(--yoo-color-line, #e9ecf1);
    border-radius: var(--yoo-radius-md, 8px);
    background: var(--yoo-color-surface-3, #f5f6f8);
    display: flex;
    align-items: center;
}
.yith-request-a-quote-page .yoo-rq-form-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 6px;
    color: var(--yoo-color-text, #1a1a1a);
    line-height: 1.4;
}
.yith-request-a-quote-page .yoo-rq-form-wrapper .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--yoo-color-text-subtle, #8a8f98);
}
.yith-request-a-quote-page .yoo-rq-form-wrapper .select2-container--default.select2-container--focus .select2-selection--single,
.yith-request-a-quote-page .yoo-rq-form-wrapper .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--yoo-color-primary, #125bc9);
    box-shadow: 0 0 0 3px var(--yoo-color-primary-soft, #eaf1fd);
    background: var(--yoo-color-surface, #fff);
}
/* El <select> nativo también se contiene (por si select2 no llega a cargar). */
.yith-request-a-quote-page .yoo-rq-form-wrapper select {
    max-width: 100%;
}
/* Cuando select2 SÍ carga, oculta el <select> original con la clase
 * .select2-hidden-accessible. Nuestro `select{width:100%}` de arriba lo estira a
 * position:absolute y DESBORDA la página (scroll horizontal). Restauramos el
 * patrón canónico de select2: colapsar ese select a 1px fuera de flujo. */
.yith-request-a-quote-page .yoo-rq-form-wrapper select.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    border: 0 !important;
    min-height: 0 !important;
}

/* ====================================================================
 * Grid de dos columnas para los campos emparejados (desktop).
 *
 * Usamos CSS Grid con áreas automáticas SOLO sobre los .form-row de campos, sin
 * envolver los bloques especiales (registro nativo YITH, card de cuenta) que
 * deben ocupar fila completa. Grid (no flex) evita el desbordamiento que daban
 * los bloques de ancho fijo de WooCommerce en contexto flex.
 * ==================================================================== */
@media (min-width: 620px) {
    .yith-request-a-quote-page .yoo-rq-form-wrapper #yith-ywraq-default-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 var(--yoo-space-4, 16px);
        align-items: start;
    }
    /* Por defecto TODO ocupa las dos columnas (fila completa). */
    .yith-request-a-quote-page .yoo-rq-form-wrapper #yith-ywraq-default-form > * {
        grid-column: 1 / -1;
        min-width: 0;
    }
    /* Solo los campos marcados col-6 ocupan UNA columna. */
    .yith-request-a-quote-page .yoo-rq-form-wrapper #yith-ywraq-default-form > .form-row.merto-rq-col-6 {
        grid-column: span 1;
    }
    .yith-request-a-quote-page .yoo-rq-form-wrapper .merto-rq-heading {
        margin-top: var(--yoo-space-3, 12px);
    }
    .yith-request-a-quote-page .yoo-rq-form-wrapper .merto-rq-heading--first {
        margin-top: 0;
    }
}

/* ====================================================================
 * Estado vacío
 * ==================================================================== */
/* Estado vacío: UN SOLO panel premium (en .ywraq-before-form, la caja interior).
 * IMPORTANTE: el wrapper exterior (.ywraq-wrapper/.ywraq-empty) NO lleva recuadro
 * — antes lo llevaba también y salía DOBLE CAJA. */
.yith-request-a-quote-page .ywraq-before-form {
    border: 1px solid var(--yoo-color-line, #e9ecf1) !important;
    border-radius: var(--yoo-radius-lg, 16px) !important;
    background: var(--yoo-color-surface-2, #f7f8fa) !important;
    box-shadow: 0 1px 2px rgba(20, 24, 31, .04), 0 12px 30px -22px rgba(20, 24, 31, .18) !important;
}
/* Caja exterior (wrapper) e interior (.yoo-rq-empty): SIN recuadro propio. */
.yith-request-a-quote-page .ywraq-wrapper.ywraq-empty,
.yith-request-a-quote-page .ywraq-empty,
.yith-request-a-quote-page .ywraq-form-table-wrapper,
.yith-request-a-quote-page .ywraq-before-form .yoo-rq-empty {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.yoo-rq-empty {
    text-align: center;
    padding: var(--yoo-space-8, 32px) var(--yoo-space-5, 20px);
    max-width: 460px;
    margin: 0 auto;
}
/* Icono del vacío en cápsula azul suave (más intencional que el trazo suelto) */
.yoo-rq-empty__icon {
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--yoo-color-primary-soft, #eaf1fd);
}
.yoo-rq-empty__icon {
    display: inline-flex;
    color: var(--yoo-color-primary, #125bc9);
    margin-bottom: var(--yoo-space-4, 16px);
}
.yoo-rq-empty__icon--ok { color: var(--yoo-color-success, #2e7d32); }
.yoo-rq-empty__title {
    margin: 0 0 var(--yoo-space-2, 8px);
    font-size: var(--yoo-font-size-xl, 22px);
    font-weight: var(--yoo-font-weight-bold, 700);
    color: var(--yoo-color-text, #1a1a1a);
}
.yoo-rq-empty__text {
    margin: 0 0 var(--yoo-space-5, 20px);
    font-size: var(--yoo-font-size-md, 15px);
    line-height: var(--yoo-line-height-base, 1.5);
    color: var(--yoo-color-text-muted, #6b7280);
}

/* ====================================================================
 * Responsive
 *
 * IMPORTANTE — el grid de 2 columnas vive en `.site-content > article`
 * (NO en .ywraq-form-table-wrapper). El media query antiguo apuntaba al
 * contenedor equivocado, así que en tablet la página NUNCA colapsaba a una
 * columna: el formulario y el resumen quedaban aplastados en la franja
 * derecha (~35%). Aquí se corrige apuntando al contenedor real y se apila
 * lista → formulario → resumen en un flujo vertical continuo.
 * ==================================================================== */

/* Guarda anti-scroll horizontal a nivel de página (los chips/variaciones y el
 * grid pueden empujar el ancho en pantallas estrechas). `clip`, no `hidden`,
 * para no crear un contenedor de scroll que rompa position:sticky/anclas. */
.yith-request-a-quote-page,
.yith-request-a-quote-page body { overflow-x: clip; }

/* -------------------------------------------------------------------
 * TABLET Y ABAJO (≤ 992px): una sola columna, apilado list → form → summary.
 * Se apunta al MISMO selector que el grid de escritorio para desactivarlo.
 * ------------------------------------------------------------------- */
@media (max-width: 992px) {
    /* Apilado con FLEX (no block) para poder reordenar: el DOM va
     * lista → formulario → resumen. En móvil/tablet el ORDEN LÓGICO de una
     * SOLICITUD es: ve tus productos → resumen tranquilizador → deja tus datos
     * → envía. Por eso el orden visual es LISTA → RESUMEN → FORMULARIO(+CTA).
     * (Rediseño móvil 2026-07-17: antes era FORMULARIO → LISTA → RESUMEN, que
     * ponía el formulario vacío ANTES de ver lo que se pide y dejaba el resumen
     * huérfano al final.) El markup no se toca; solo el orden visual. */
    .yith-request-a-quote-page .site-content > article:has(.ywraq-wrapper:not(.ywraq-empty)) {
        display: flex;
        flex-direction: column;
    }
    .yith-request-a-quote-page .site-content > article > .ywraq-wrapper       { order: 1; }
    .yith-request-a-quote-page .site-content > article > .yoo-rq-summary       { order: 2; }
    .yith-request-a-quote-page .site-content > article > .yoo-rq-form-wrapper { order: 3; }

    .yith-request-a-quote-page .site-content > article > .ywraq-wrapper,
    .yith-request-a-quote-page .site-content > article > .yoo-rq-form-wrapper,
    .yith-request-a-quote-page .site-content > article > .yoo-rq-summary {
        width: 100%;
    }
    /* Al apilar, el formulario y el resumen dejan de estar "fundidos" en columna:
     * el panel unificado se separa en tarjetas independientes con bordes/redondeos
     * completos. Orden visual LISTA → RESUMEN → FORMULARIO: un respiro constante
     * (--yoo-space-6) SEPARA cada bloque, dando ritmo vertical sin saltos. */
    .yith-request-a-quote-page .site-content > article > .yoo-rq-form-wrapper {
        border: 1px solid var(--yoo-color-line, #e9ecf1);
        border-radius: var(--yoo-radius-lg, 12px);
        margin: var(--yoo-space-6, 24px) 0 0;
        padding-bottom: var(--yoo-space-6, 24px);
    }
    .yith-request-a-quote-page .yoo-rq-summary {
        position: static;
        border: 1px solid var(--yoo-color-line, #e9ecf1);
        border-top: 1px solid var(--yoo-color-line, #e9ecf1);
        border-radius: var(--yoo-radius-lg, 12px);
        margin: var(--yoo-space-6, 24px) 0 0;
    }
}

/* -------------------------------------------------------------------
 * MÓVIL (≤ 560px): tarjeta a 2 filas (media+body / acciones a lo ancho) y
 * afinado de cabeceras, acciones de lista y controles táctiles.
 * ------------------------------------------------------------------- */
@media (max-width: 560px) {
    .yith-request-a-quote-page li.yoo-rq-card {
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-areas:
            "media body"
            "actions actions";
        gap: var(--yoo-space-3, 12px);
    }
    .yoo-rq-card__media { grid-area: media; width: 72px; height: 72px; }
    .yoo-rq-card__body { grid-area: body; }
    .yoo-rq-card__actions {
        grid-area: actions;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid var(--yoo-color-line, #e9ecf1);
        padding-top: var(--yoo-space-3, 12px);
    }
    /* Cantidad en fila (etiqueta al lado de la caja) para ganar altura. */
    .yoo-rq-card__qty {
        flex-direction: row;
        align-items: center;
        gap: var(--yoo-space-2, 8px);
    }

    /* Cabecera de lista: título y contador se apilan si no caben, sin desbordar. */
    .yoo-rq-items__head {
        flex-wrap: wrap;
        gap: var(--yoo-space-1, 4px) var(--yoo-space-3, 12px);
    }
    .yoo-rq-items__title { font-size: var(--yoo-font-size-lg, 18px); }

    /* Acciones de lista (vaciar / actualizar): a lo ancho y apiladas para que
     * cada botón sea cómodamente pulsable (mín. ~44px de alto de zona táctil). */
    .yoo-rq-list-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .yoo-rq-list-actions__left { flex-direction: column; }
    .yith-request-a-quote-page .yoo-rq-list-actions .yoo-rq-btn,
    .yith-request-a-quote-page .yoo-rq-list-actions input[type="submit"].yoo-rq-btn {
        width: 100%;
        justify-content: center;
    }

    /* Paneles derechos a padding algo menor en móvil para aprovechar ancho. */
    .yith-request-a-quote-page .yoo-rq-form-wrapper { padding: var(--yoo-space-4, 16px); }
    .yith-request-a-quote-page .yoo-rq-summary {
        padding: var(--yoo-space-5, 20px);
    }

    /* ---- Formulario más COMPACTO en móvil ----
     * Título con algo menos de aire, campos más juntos, textarea más bajo e
     * inputs con menos padding vertical. Da una caja más contenida sin sacrificar
     * legibilidad ni zona táctil. */
    .yith-request-a-quote-page .yoo-rq-form-wrapper h3,
    .yith-request-a-quote-page .yoo-rq-form-wrapper .yith-ywraq-mail-form-wrapper > h3 {
        margin-bottom: var(--yoo-space-3, 12px);
        font-size: var(--yoo-font-size-lg, 18px);
    }
    .yith-request-a-quote-page .yoo-rq-form-wrapper .form-row,
    .yith-request-a-quote-page .yoo-rq-form-wrapper p {
        margin-bottom: var(--yoo-space-3, 12px);
    }
    .yith-request-a-quote-page .yoo-rq-form-wrapper input[type="text"],
    .yith-request-a-quote-page .yoo-rq-form-wrapper input[type="email"],
    .yith-request-a-quote-page .yoo-rq-form-wrapper input[type="tel"],
    .yith-request-a-quote-page .yoo-rq-form-wrapper textarea,
    .yith-request-a-quote-page .yoo-rq-form-wrapper select {
        padding: 10px 12px;
    }
    .yith-request-a-quote-page .yoo-rq-form-wrapper textarea { min-height: 96px; }
    .yith-request-a-quote-page .yoo-rq-form-wrapper button[type="submit"],
    .yith-request-a-quote-page .yoo-rq-form-wrapper input[type="submit"],
    .yith-request-a-quote-page .yoo-rq-form-wrapper .button {
        padding: 12px 20px !important;
    }
}

/* -------------------------------------------------------------------
 * MÓVIL ESTRECHO (≤ 380px): la imagen no aporta a este ancho — se oculta y la
 * tarjeta pasa a una sola columna para dar todo el ancho al contenido.
 * ------------------------------------------------------------------- */
@media (max-width: 380px) {
    .yith-request-a-quote-page li.yoo-rq-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "body"
            "actions";
    }
    .yoo-rq-card__media { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .yoo-rq-card,
    .yoo-rq-btn,
    .yoo-rq-card__remove { transition: none !important; }
    .yoo-rq-card:hover { transform: none; }
}

/* ====================================================================
 * MÓVIL (fix 2026-07-13): separación título↔caja + padding de la caja.
 * ==================================================================== */
@media (max-width: 767px) {
    /* 1) El H1 "Solicita un presupuesto" (está en .breadcrumb-title-wrapper, NO
     *    en .site-content) quedaba pegado a la caja de abajo. Se separa dando
     *    margen al wrapper del título. */
    .yith-request-a-quote-page .breadcrumb-title-wrapper {
        margin-bottom: var(--yoo-space-5, 20px) !important;
    }
    .yith-request-a-quote-page .breadcrumb-title h1.page-title,
    .yith-request-a-quote-page .breadcrumb-title .entry-title {
        margin-bottom: var(--yoo-space-2, 8px) !important;
    }

    /* 2) La caja (before-form / panel del vacío) tenía 30px de padding: mucho
     *    en móvil. Se reduce y se evita el padding acumulado del interior. */
    .yith-request-a-quote-page .ywraq-before-form {
        padding: var(--yoo-space-4, 16px) !important;
    }
    .yith-request-a-quote-page .ywraq-before-form .yoo-rq-empty {
        padding: var(--yoo-space-4, 16px) var(--yoo-space-2, 8px) !important;
    }
}

/* ====================================================================
 * En /solicita/ NO tiene sentido el botón flotante "Solicitar presupuesto"
 * (ya estás en la página) → ocultarlo. (Fix 2026-07-13; reforzado 2026-07-17.)
 *
 * IMPORTANTE: el módulo floating-message imprime su propio CSS en wp_footer con
 * `.yoo-floating-message.yoo-fm-form-mode { display:none !important }` en media
 * query — misma especificidad que nuestra regla pero MÁS TARDE en la cascada, así
 * que el botón burbuja se colaba en móvil y se solapaba con el mini-carrito
 * (queja del cliente). Subimos especificidad (body + ID) para ganar SIEMPRE y
 * cubrimos todas las variantes (burbuja, popup, form-mode, contenedor). */
body.yith-request-a-quote-page #yoo-floating-message,
body.yith-request-a-quote-page .yoo-floating-message,
body.yith-request-a-quote-page .yoo-floating-message.yoo-fm-form-mode,
body.yith-request-a-quote-page .yoo-fm-bubble,
body.yith-request-a-quote-page .yoo-fm-popup,
body.yith-request-a-quote-page [class*="yoo-fm-bubble"],
body.yith-request-a-quote-page [class*="yoo-floating-message"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ====================================================================
 * Formulario CF7 alineado en ANCHO: los campos (nombre, apellidos, correo,
 * mensaje…) y el botón de enviar ocupan el MISMO ancho (100% del contenedor).
 * El CF7 (.wpcf7) puede quedar FUERA de .yoo-rq-form-wrapper (YITH rompe el
 * anidamiento), así que se apunta por sus clases dentro de la página.
 * (Fix 2026-07-13.)
 * ==================================================================== */
.yith-request-a-quote-page .wpcf7 .wpcf7-form-control-wrap,
.yith-request-a-quote-page .wpcf7 input.wpcf7-text,
.yith-request-a-quote-page .wpcf7 input.wpcf7-email,
.yith-request-a-quote-page .wpcf7 input.wpcf7-tel,
.yith-request-a-quote-page .wpcf7 input.wpcf7-number,
.yith-request-a-quote-page .wpcf7 textarea.wpcf7-textarea,
.yith-request-a-quote-page .wpcf7 select.wpcf7-select,
.yith-request-a-quote-page .wpcf7 input[type="text"],
.yith-request-a-quote-page .wpcf7 input[type="email"],
.yith-request-a-quote-page .wpcf7 input[type="tel"],
.yith-request-a-quote-page .wpcf7 textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block;
}
/* El botón de enviar CF7: mismo ancho que los campos (bloque completo). */
.yith-request-a-quote-page .wpcf7 .wpcf7-submit,
.yith-request-a-quote-page .wpcf7 input[type="submit"],
.yith-request-a-quote-page .wpcf7 button[type="submit"] {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block;
}
/* Los <p> que CF7 mete alrededor de cada campo no deben limitar el ancho. */
.yith-request-a-quote-page .wpcf7 form > p,
.yith-request-a-quote-page .wpcf7-form p {
    width: 100%;
}

/* ====================================================================
 * Quitar la ilustración decorativa (documento/hoja con "+") que YITH pone
 * como ::before de .ywraq-before-form: se solapaba con nuestro candado.
 * (Fix 2026-07-13.)
 * ==================================================================== */
.yith-request-a-quote-page .ywraq-before-form::before,
.yith-request-a-quote-page .ywraq-before-form::after {
    content: none !important;
    background: none !important;
    display: none !important;
}

/* ====================================================================
 * Separación título↔caja en TODOS los anchos (antes solo móvil): el H1
 * "Solicita un presupuesto" está en .breadcrumb-title-wrapper y quedaba
 * pegado a la caja de abajo en escritorio. (Fix 2026-07-13.)
 * ==================================================================== */
.yith-request-a-quote-page .breadcrumb-title-wrapper {
    margin-bottom: var(--yoo-space-6, 24px) !important;
}

/* ████████████████████████████████████████████████████████████████████
 * REDISEÑO MÓVIL /solicita/ — 2026-07-17 (Hallmark · Workbench)
 *
 * Auditoría del estado LLENO en móvil (antes NUNCA revisado por no poder
 * rellenar el presupuesto por script). Problemas corregidos aquí:
 *  1. Orden invertido (formulario vacío ANTES de la lista) → ahora
 *     lista → resumen → formulario+CTA (ver bloque @media 992 arriba).
 *  2. Chips de variación que se rompían con textos largos → filas <dl>.
 *  3. "×" ambigua para eliminar → icono papelera + etiqueta "Quitar".
 *  4. Inputs a 14px (zoom iOS) → 16px en móvil + estados focus/error.
 *  5. Bloques sueltos sin ritmo → intro con 3 pasos + respiración constante.
 *  6. Banner promocional voluminoso → compacto y con cierre táctil 44px.
 * Namespace: .yoo-rq-* (aislado). Tokens --yoo-* con fallback real.
 * ████████████████████████████████████████████████████████████████████ */

/* ====================================================================
 * 1. INTRO + PROGRESIÓN DE 3 PASOS
 * Compacta, tranquilizadora, arriba del todo de la columna de lista.
 * ==================================================================== */
.yith-request-a-quote-page .yoo-rq-intro {
    margin: 0 0 var(--yoo-space-5, 20px);
}
.yith-request-a-quote-page .yoo-rq-intro__lead {
    margin: 0 0 var(--yoo-space-4, 16px);
    font-size: var(--yoo-font-size-md, 15px);
    line-height: var(--yoo-line-height-base, 1.5);
    color: var(--yoo-color-text-body, #333);
}
.yith-request-a-quote-page .yoo-rq-intro__lead strong {
    color: var(--yoo-color-text, #1a1a1a);
    font-weight: var(--yoo-font-weight-bold, 700);
}
/* Progresión: 3 pasos con círculo numerado. Grid de 3 columnas iguales para
 * que aguante 320px sin romperse; el conector es un hairline entre círculos. */
.yith-request-a-quote-page .yoo-rq-steps {
    list-style: none;
    margin: 0;
    padding: var(--yoo-space-4, 16px) var(--yoo-space-4, 16px) var(--yoo-space-3, 12px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--yoo-space-2, 8px);
    background: var(--yoo-color-surface-2, #f3f5f9);
    border: 1px solid var(--yoo-color-line, #e9ecf1);
    border-radius: var(--yoo-radius-lg, 12px);
}
.yith-request-a-quote-page .yoo-rq-steps li.yoo-rq-step {
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    line-height: normal;
}
/* Conector hairline entre pasos (no en el último). */
.yith-request-a-quote-page .yoo-rq-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 14px;
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
    height: 2px;
    background: var(--yoo-color-line-strong, #d4d8e0);
}
.yoo-rq-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--yoo-radius-circle, 50%);
    background: var(--yoo-color-surface, #fff);
    border: 2px solid var(--yoo-color-line-strong, #d4d8e0);
    color: var(--yoo-color-text-subtle, #8a8f98);
    font-size: var(--yoo-font-size-sm, 13px);
    font-weight: var(--yoo-font-weight-bold, 700);
    position: relative;
    z-index: 1;
}
.yoo-rq-step.is-current .yoo-rq-step__num {
    background: var(--yoo-color-primary, #125bc9);
    border-color: var(--yoo-color-primary, #125bc9);
    color: var(--yoo-color-primary-contrast, #fff);
}
.yoo-rq-step__label {
    font-size: var(--yoo-font-size-xs, 11px);
    line-height: 1.3;
    color: var(--yoo-color-text-muted, #6b7280);
    font-weight: var(--yoo-font-weight-semibold, 600);
    overflow-wrap: anywhere;
}
.yoo-rq-step.is-current .yoo-rq-step__label {
    color: var(--yoo-color-text, #1a1a1a);
}

/* ====================================================================
 * 2. VARIACIÓN como FILAS etiqueta/valor (no chips que rompen)
 * <dl> con la etiqueta en tenue arriba y el valor en tinta debajo; los
 * valores largos ("Pack GRIS – 10 uds.(Ø50) y 10 uds. (Ø70)") fluyen a
 * varias líneas sin desbordar. Reemplaza al .yoo-rq-card__variation antiguo.
 * ==================================================================== */
.yith-request-a-quote-page dl.yoo-rq-card__variation {
    margin: 2px 0 var(--yoo-space-2, 8px);
    padding: var(--yoo-space-2, 8px) var(--yoo-space-3, 12px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px var(--yoo-space-3, 12px);
    align-items: baseline;
    background: var(--yoo-color-surface-2, #f3f5f9);
    border: 1px solid var(--yoo-color-line, #e9ecf1);
    border-radius: var(--yoo-radius-md, 8px);
}
.yith-request-a-quote-page dl.yoo-rq-card__variation .yoo-rq-card__var-k {
    margin: 0;
    font-size: var(--yoo-font-size-xs, 11px);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--yoo-color-text-subtle, #8a8f98);
    font-weight: var(--yoo-font-weight-bold, 700);
    white-space: nowrap;
    padding-top: 1px;
}
.yith-request-a-quote-page dl.yoo-rq-card__variation .yoo-rq-card__var-k::after { content: none; }
.yith-request-a-quote-page dl.yoo-rq-card__variation .yoo-rq-card__var-v {
    margin: 0;
    font-size: var(--yoo-font-size-sm, 13px);
    line-height: 1.4;
    color: var(--yoo-color-text, #1a1a1a);
    font-weight: var(--yoo-font-weight-semibold, 600);
    overflow-wrap: anywhere;
}

/* ====================================================================
 * 3. Botón ELIMINAR con icono + etiqueta "Quitar" (no "×" ambigua)
 * ==================================================================== */
.yith-request-a-quote-page .yoo-rq-card__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: var(--yoo-radius-md, 8px);
    background: var(--yoo-color-surface-2, #f3f5f9);
    color: var(--yoo-color-text-muted, #6b7280);
    font-size: var(--yoo-font-size-sm, 13px);
    font-weight: var(--yoo-font-weight-semibold, 600);
    line-height: 1 !important;
    text-decoration: none !important;
    transition: background-color var(--yoo-transition-fast, .16s ease),
                color var(--yoo-transition-fast, .16s ease);
}
.yith-request-a-quote-page .yoo-rq-card__remove .yoo-rq-card__remove-icon { flex: 0 0 auto; }
.yith-request-a-quote-page .yoo-rq-card__remove:hover,
.yith-request-a-quote-page .yoo-rq-card__remove:focus-visible {
    background: var(--yoo-color-accent-soft, #fdecea);
    color: var(--yoo-color-danger, #b42318);
}
.yith-request-a-quote-page .yoo-rq-card__remove:focus-visible {
    outline: 2px solid var(--yoo-color-danger, #b42318);
    outline-offset: 2px;
}

/* ====================================================================
 * 4. RESUMEN: línea "qué pasa después"
 * ==================================================================== */
.yith-request-a-quote-page .yoo-rq-summary__next {
    display: flex;
    align-items: flex-start;
    gap: var(--yoo-space-2, 8px);
    margin: 0 0 var(--yoo-space-4, 16px);
    padding: var(--yoo-space-3, 12px);
    background: var(--yoo-color-surface-2, #f3f5f9);
    border-radius: var(--yoo-radius-md, 8px);
    font-size: var(--yoo-font-size-sm, 13px);
    line-height: var(--yoo-line-height-base, 1.5);
    color: var(--yoo-color-text-body, #333);
}
.yith-request-a-quote-page .yoo-rq-summary__next-icon {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--yoo-color-primary, #125bc9);
}

/* ====================================================================
 * 5. BANNER PROMOCIONAL compacto — SOLO en esta página (scope estricto,
 * es un componente GLOBAL del tema: no se toca su markup ni fuera de aquí).
 * ==================================================================== */
.yith-request-a-quote-page .ts-coupon-wrapper {
    padding-block: var(--yoo-space-3, 12px);
}

/* ====================================================================
 * 6. Guarda dura anti-zoom iOS: TODOS los campos de la página a ≥16px en
 * móvil (los inputs nativos de YITH venían a 14px). Se aplica al scope de
 * página para cubrir formulario YITH + tarjeta de cuenta + cantidad.
 * ==================================================================== */
@media (max-width: 767px) {
    .yith-request-a-quote-page .yoo-rq-form-wrapper input[type="text"],
    .yith-request-a-quote-page .yoo-rq-form-wrapper input[type="email"],
    .yith-request-a-quote-page .yoo-rq-form-wrapper input[type="tel"],
    .yith-request-a-quote-page .yoo-rq-form-wrapper input[type="password"],
    .yith-request-a-quote-page .yoo-rq-form-wrapper input[type="number"],
    .yith-request-a-quote-page .yoo-rq-form-wrapper textarea,
    .yith-request-a-quote-page .yoo-rq-form-wrapper select,
    .yith-request-a-quote-page .msa-card input,
    .yith-request-a-quote-page .yoo-rq-card__qty input.qty {
        font-size: 16px !important;   /* anti-zoom iOS — regla no negociable */
    }
    /* Los pasos: en 320px las etiquetas caben mejor algo más pequeñas. */
    .yith-request-a-quote-page .yoo-rq-steps { padding-inline: var(--yoo-space-3, 12px); }
}

/* ====================================================================
 * 7. Estado de ERROR del formulario YITH (WooCommerce marca .woocommerce-invalid).
 * No dependemos solo del color: borde + icono textual implícito por el asterisco.
 * ==================================================================== */
.yith-request-a-quote-page .yoo-rq-form-wrapper .woocommerce-invalid input,
.yith-request-a-quote-page .yoo-rq-form-wrapper .woocommerce-invalid textarea,
.yith-request-a-quote-page .yoo-rq-form-wrapper input[aria-invalid="true"] {
    border-color: var(--yoo-color-danger, #b42318) !important;
    background: var(--yoo-color-accent-soft, #fdecea) !important;
}
.yith-request-a-quote-page .yoo-rq-form-wrapper .woocommerce-invalid input:focus,
.yith-request-a-quote-page .yoo-rq-form-wrapper .woocommerce-invalid textarea:focus {
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .15) !important;
}
/* Campos obligatorios: el asterisco de WC en color de marca, no rojo agresivo. */
.yith-request-a-quote-page .yoo-rq-form-wrapper .required,
.yith-request-a-quote-page .yoo-rq-form-wrapper label .required {
    color: var(--yoo-color-primary, #125bc9);
    text-decoration: none;
    border: 0;
}

/* ====================================================================
 * 8. CTA "Enviar tu solicitud": estado disabled/loading (anti doble envío).
 * El JS de YITH añade .loading/disabled al enviar; damos feedback claro.
 * ==================================================================== */
.yith-request-a-quote-page .yoo-rq-form-wrapper input[type="submit"]:disabled,
.yith-request-a-quote-page .yoo-rq-form-wrapper button[type="submit"]:disabled,
.yith-request-a-quote-page .yoo-rq-form-wrapper .button.loading,
.yith-request-a-quote-page .yoo-rq-form-wrapper input[type="submit"].loading {
    opacity: .7 !important;
    cursor: progress !important;
}
.yith-request-a-quote-page .yoo-rq-form-wrapper input[type="submit"]:focus-visible,
.yith-request-a-quote-page .yoo-rq-form-wrapper button[type="submit"]:focus-visible {
    outline: 2px solid var(--yoo-color-primary, #125bc9);
    outline-offset: 2px;
}

/* ====================================================================
 * 9. Ritmo entre cabecera de intro y la lista en móvil.
 * ==================================================================== */
@media (max-width: 560px) {
    .yith-request-a-quote-page .yoo-rq-intro { margin-bottom: var(--yoo-space-4, 16px); }
    /* La etiqueta de "Quitar" se mantiene visible (no icono solo) — accesible. */
    .yith-request-a-quote-page .yoo-rq-card__remove { padding: 8px 12px; }
}

/* ====================================================================
 * 10. prefers-reduced-motion: sin transición en los nuevos interactivos.
 * ==================================================================== */
@media (prefers-reduced-motion: reduce) {
    .yith-request-a-quote-page .yoo-rq-card__remove { transition: none !important; }
}

/* ====================================================================
 * 11. ARMONÍA DEL FORMULARIO (feedback cliente 2026-07-17)
 *
 * Problema: WooCommerce envuelve cada campo en <p class="form-row"> con un
 * padding lateral de 15px que NO afecta al título (h3) ni a la tarjeta de
 * cuenta. Resultado: el título quedaba al borde, los campos y el botón
 * aparecían METIDOS ~15px y más ESTRECHOS (306px) que la tarjeta de cuenta
 * (336px) → todo descuadrado. Aquí igualamos el eje izquierdo y el ancho:
 *   - título, filas de campo, inputs, textarea, tarjeta de cuenta y botón
 *     comparten el MISMO borde izquierdo y el MISMO ancho (100% del panel).
 *   - el botón "Enviar tu solicitud" ocupa el 100% (antes 306px).
 * ==================================================================== */
/* 1) Anular el padding lateral de las filas de campo de WooCommerce. */
.yith-request-a-quote-page .yoo-rq-form-wrapper .form-row,
.yith-request-a-quote-page .yith-ywraq-mail-form-wrapper .form-row,
.yith-request-a-quote-page .yoo-rq-form-wrapper form > p,
.yith-request-a-quote-page .yith-ywraq-mail-form-wrapper form > p {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
}
/* 2) Título "Enviar la solicitud" alineado con los campos (mismo eje, sin
 *    quedar "pegado": el aire lo da el padding del panel, no un margen suelto). */
.yith-request-a-quote-page .yoo-rq-form-wrapper h3,
.yith-request-a-quote-page .yith-ywraq-mail-form-wrapper > h3 {
    padding-left: 0;
    padding-right: 0;
}
/* 3) Inputs, textarea y select ocupan el 100% del panel (flush con el título). */
.yith-request-a-quote-page .yoo-rq-form-wrapper input[type="text"],
.yith-request-a-quote-page .yoo-rq-form-wrapper input[type="email"],
.yith-request-a-quote-page .yoo-rq-form-wrapper input[type="tel"],
.yith-request-a-quote-page .yoo-rq-form-wrapper input[type="number"],
.yith-request-a-quote-page .yoo-rq-form-wrapper textarea,
.yith-request-a-quote-page .yoo-rq-form-wrapper select {
    width: 100% !important;
    box-sizing: border-box;
}
/* 4) Botón "Enviar tu solicitud": 100% del ancho del panel (armónico con los campos). */
.yith-request-a-quote-page .yoo-rq-form-wrapper .raq-send-request-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}
.yith-request-a-quote-page .yoo-rq-form-wrapper input[type="submit"],
.yith-request-a-quote-page .yoo-rq-form-wrapper button[type="submit"],
.yith-request-a-quote-page .yoo-rq-form-wrapper .raq-send-request,
.yith-request-a-quote-page .yoo-rq-form-wrapper .button {
    width: 100% !important;
    box-sizing: border-box;
    display: block;
}
/* 5) La tarjeta de cuenta (.msa-card) también a ancho completo, flush con lo demás. */
.yith-request-a-quote-page .yoo-rq-form-wrapper .msa-card,
.yith-request-a-quote-page .msa-card {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
}

/* ====================================================================
 * 12. BARRA CTA STICKY MÓVIL (feedback cliente 2026-07-17)
 *
 * Con muchos productos el formulario/CTA queda muy abajo. Esta barra fija
 * (solo móvil, solo con productos) da un atajo SIEMPRE accesible al envío.
 * NO envía: hace scroll al formulario (evita doble submit). La muestra/oculta
 * el JS (js/solicita-sticky.js) según la visibilidad del CTA real y el teclado.
 * Respeta safe-area-inset-bottom (iPhone) y prefers-reduced-motion.
 * ==================================================================== */
.yoo-rq-stickybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60; /* por encima del contenido, por debajo de modales de auth (~1000). */
    background: var(--yoo-color-surface, #fff);
    border-top: 1px solid var(--yoo-color-line, #e9ecf1);
    box-shadow: 0 -6px 20px -8px rgba(16, 24, 40, .18);
    padding: var(--yoo-space-3, 12px) var(--yoo-space-4, 16px);
    /* respeto de la zona segura inferior (iPhone con barra de gestos). */
    padding-bottom: calc(var(--yoo-space-3, 12px) + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    opacity: 0;
    transition: transform var(--yoo-transition-base, .22s ease),
                opacity var(--yoo-transition-base, .22s ease);
    will-change: transform;
}
.yoo-rq-stickybar.is-visible {
    transform: translateY(0);
    opacity: 1;
}
.yoo-rq-stickybar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--yoo-space-3, 12px);
    max-width: 720px;
    margin: 0 auto;
}
.yoo-rq-stickybar__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    flex: 0 0 auto;
}
.yoo-rq-stickybar__count {
    font-size: var(--yoo-font-size-lg, 18px);
    font-weight: var(--yoo-font-weight-bold, 700);
    color: var(--yoo-color-text, #1a1a1a);
}
.yoo-rq-stickybar__label {
    font-size: var(--yoo-font-size-xs, 11px);
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--yoo-color-text-subtle, #8a8f98);
    font-weight: var(--yoo-font-weight-semibold, 600);
}
.yith-request-a-quote-page .yoo-rq-stickybar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--yoo-space-2, 8px);
    flex: 1 1 auto;
    min-height: 48px;      /* zona táctil cómoda (>44px). */
    padding: 12px 20px;
    border: 0;
    border-radius: var(--yoo-radius-md, 8px);
    background: var(--yoo-color-primary, #125bc9);
    color: var(--yoo-color-primary-contrast, #fff);
    font-size: var(--yoo-font-size-md, 15px);
    font-weight: var(--yoo-font-weight-bold, 700);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--yoo-transition-fast, .16s ease);
}
.yith-request-a-quote-page .yoo-rq-stickybar__cta:hover {
    background: var(--yoo-color-primary-hover, #0f4ea8);
}
.yith-request-a-quote-page .yoo-rq-stickybar__cta:focus-visible {
    outline: 2px solid var(--yoo-color-primary-contrast, #fff);
    outline-offset: -4px;
}
/* La barra solo tiene sentido en móvil/tablet (donde el layout apila). En
 * escritorio el formulario está siempre visible a la derecha → nunca aparece. */
@media (min-width: 993px) {
    .yoo-rq-stickybar { display: none !important; }
}
/* Colchón inferior para que la barra NUNCA tape el final del contenido (el
 * último bloque antes del footer). Solo cuando la barra puede aparecer (móvil)
 * y hay productos (.ywraq-with-form). */
@media (max-width: 992px) {
    .yith-request-a-quote-page .site-content:has(.ywraq-with-form) {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}
@media (prefers-reduced-motion: reduce) {
    .yoo-rq-stickybar { transition: opacity .12s ease; transform: none; }
    .yoo-rq-stickybar:not(.is-visible) { opacity: 0; }
}