/* ── (1) Calificación SOLO estrellas en el modal (catálogo + inicio) ───── */
.buyaca-app .bq-modal-rating-only,
#bq-catalog-modal .bq-modal-rating-only,
.buyaca-app .bq-qv-rating-only{
    display:flex; align-items:center; gap:7px; margin:10px 0 2px;
}
#bq-catalog-modal .bq-modal-rating-top{ margin:2px 0 12px; }
.buyaca-app .bq-modal-rating-stars,
#bq-catalog-modal .bq-modal-rating-stars{ display:inline-flex; gap:2px; line-height:0; }
.buyaca-app .bq-modal-rating-star{ fill:var(--bq-border, #d9dee5); }
.buyaca-app .bq-modal-rating-star.on{ fill:#f59e0b !important; }
.buyaca-app .bq-modal-rating-star.half{ fill:#f59e0b !important; opacity:.5; }
.buyaca-app .bq-modal-rating-star.off{ fill:var(--bq-border, #d9dee5) !important; }
.buyaca-app .bq-modal-rating-num,
#bq-catalog-modal .bq-modal-rating-num{ font-size:14px; font-weight:800; color:var(--bq-text-primary); }
.buyaca-app .bq-modal-rating-cnt,
#bq-catalog-modal .bq-modal-rating-cnt{ font-size:12px; font-weight:500; color:var(--bq-text-secondary); }
/* [FIX colores catálogo] El modal del catálogo está fuera de .buyaca-app, así que
   las estrellas no recibían el fill amarillo (salían negras) y el número/conteo no
   contrastaba. Reglas explícitas con color fijo. */
#bq-catalog-modal .bq-modal-rating-star{ fill:#d9dee5 !important; }
#bq-catalog-modal .bq-modal-rating-star.on{ fill:#f59e0b !important; }
#bq-catalog-modal .bq-modal-rating-star.half{ fill:#f59e0b !important; opacity:.5; }
#bq-catalog-modal .bq-modal-rating-star.off{ fill:#d9dee5 !important; }
#bq-catalog-modal .bq-modal-rating-num{ color:#1f2937 !important; }
#bq-catalog-modal .bq-modal-rating-cnt{ color:#6b7280 !important; }
.bq-dark #bq-catalog-modal .bq-modal-rating-num,
html:has(.buyaca-app:not(.bq-light-mode)) #bq-catalog-modal .bq-modal-rating-num{ color:#f3f4f6 !important; }
.bq-dark #bq-catalog-modal .bq-modal-rating-cnt,
html:has(.buyaca-app:not(.bq-light-mode)) #bq-catalog-modal .bq-modal-rating-cnt{ color:#9ca3af !important; }

/* ── (2) Tarjeta del catálogo: cerrar cualquier hueco residual ─────────── */
.buyaca-app .bq-cv2-product-grid{ align-items:start !important; }
.buyaca-app .bq-cv2-product-card{ align-self:start !important; }
.buyaca-app .bq-cv2-product-body{ padding-bottom:9px !important; }
.buyaca-app .bq-cv2-product-body > *:empty{ display:none !important; }
.buyaca-app .bq-cv2-price-row:empty{ display:none !important; }

/* ── (3) Precio antes (tachado) + descuento ───────────────────────────── */
.buyaca-app .bq-cv2-price-row,
.buyaca-app .bq-pc-price-row{
    display:flex; align-items:baseline; flex-wrap:wrap; gap:6px;
}
.buyaca-app .bq-cv2-product-regular,
.buyaca-app .bq-pc-regular,
#bq-catalog-modal .bq-slider-slide-regular{
    font-size:9px; font-weight:500; color:var(--bq-text-secondary);
    text-decoration:line-through; opacity:.75;
}
.buyaca-app .bq-cv2-product-disc,
.buyaca-app .bq-pc-disc,
#bq-catalog-modal .bq-slider-slide-disc{
    font-size:10.5px; font-weight:800; color:#16a34a;
    background:rgba(22,163,74,.12); padding:1px 6px; border-radius:6px; letter-spacing:.2px;
}
#bq-catalog-modal .bq-slider-slide-regular{ font-size:14px; margin-left:8px; }
#bq-catalog-modal .bq-slider-slide-disc{ font-size:12px; }

/* ── (5) Filtros de reseñas ───────────────────────────────────────────── */
.buyaca-app .bq-reviews-filter{
    display:flex; gap:8px; flex-wrap:wrap; padding:6px 0 12px; margin-top:4px;
    border-bottom:1px solid var(--bq-border-light, rgba(0,0,0,.07));
    margin-bottom:8px;
}
.buyaca-app .bq-reviews-filter-chip{
    font-size:12.5px; font-weight:600; font-family:inherit;
    padding:6px 14px; border-radius:100px; cursor:pointer;
    background:var(--bq-bg-elevated, rgba(0,0,0,.05));
    color:var(--bq-text-secondary);
    border:1px solid transparent; 
    transition:all .15s ease;
}
.buyaca-app .bq-reviews-filter-chip:hover{ color:var(--bq-text-primary); }
.buyaca-app .bq-reviews-filter-chip.is-active{
    background:var(--bq-primary); color:#fff;
}
.buyaca-app .bq-reviews-filter-empty{
    display:none; padding:24px 8px; text-align:center;
    font-size:13px; color:var(--bq-text-secondary); opacity:.8;
}

/* ── (5) Miniatura del objeto reseñado (producto/servicio o logo) ─────── */
.buyaca-app .bq-cv2-review-target{
    display:inline-flex; align-items:center; gap:7px;
    padding:3px 9px 3px 3px; margin-bottom:6px;
    background:var(--bq-bg-elevated, rgba(0,0,0,.04));
    border:1px solid var(--bq-border-light, rgba(0,0,0,.08));
    border-radius:100px; max-width:100%;
}
.buyaca-app .bq-cv2-review-target-img{
    width:22px; height:22px; border-radius:50%; object-fit:cover; flex-shrink:0;
    background:var(--bq-bg-card, #fff);
}
.buyaca-app .bq-cv2-review-target-img--ph{
    display:flex; align-items:center; justify-content:center;
    color:var(--bq-text-secondary); border:1px solid var(--bq-border-light, rgba(0,0,0,.08));
}
.buyaca-app .bq-cv2-review-target-name{
    font-size:11.5px; font-weight:700; color:var(--bq-text-primary);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    letter-spacing:-.01em;
}
.buyaca-app:not(.bq-light-mode) .bq-cv2-review-target,
.buyaca-app:not(.bq-light-mode) .bq-reviews-filter-chip{
    background:rgba(255,255,255,.08);
}

/* ═══════════════════════════════════════════════════════════════════════
 *  [FASE 2] MODAL DE PRODUCTO DEL CATÁLOGO — refinamiento visual
 * ═══════════════════════════════════════════════════════════════════════ */

/* (2.1) TIPOGRAFÍA: el modal SIEMPRE usa la fuente de interfaz (sans-serif). */
#bq-catalog-modal,
#bq-catalog-modal *,
#bq-catalog-modal .bq-slider-slide-name,
#bq-catalog-modal .bq-slider-slide-desc,
#bq-catalog-modal .bq-slider-slide-price,
#bq-catalog-modal .bq-slider-slide-cats,
#bq-catalog-modal .bq-slider-slide-body{
    font-family:'Poppins','Outfit','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
}

/* (2.2) PIE DEL MODAL: subir los botones Anterior/Siguiente y darles aire.
 *  Antes quedaban pegados al borde inferior de la pantalla. Mantenemos el pie
 *  anclado (sin hueco) y elevamos el contenido con padding inferior amplio. */
/* [v10.9] Regla obsoleta retirada: el pie ahora es flex-none anclado
   (ver bloque [v10.9] al final). Antes 'bottom:10px' + padding 24px dejaban
   un hueco/área blanca bajo los botones. */
#bq-catalog-modal .bq-slider-footer{
    gap:12px !important;
}
#bq-catalog-modal .bq-cat-prodnav{
    margin-top:10px !important;
    margin-bottom:0 !important;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
#bq-catalog-modal .bq-cat-prodnav button{
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 16px !important;
    border-radius:12px !important;
    font-size:13px; font-weight:700;
    border:1px solid var(--bq-m-border, rgba(0,0,0,0.10)) !important;
    background:var(--bq-bg-elevated, rgba(0,0,0,0.04)) !important;
    color:var(--bq-m-text) !important;
    cursor:pointer; transition:all .18s ease;
}
#bq-catalog-modal .bq-cat-prodnav button:hover{
    background:var(--bq-primary) !important;
    border-color:var(--bq-primary) !important;
    color:#fff !important;
}
#bq-catalog-modal .bq-cat-prodnav button:hover svg{ stroke:#fff !important; }
#bq-catalog-modal .bq-cat-prodnav-count{
    font-size:12px; font-weight:600;
    color:var(--bq-m-text-soft, var(--bq-text-secondary)) !important;
    white-space:nowrap;
}
/* [v10.9] Retirado el 'padding-bottom:120px' (era el ÁREA BLANCA bajo los
   CTAs). Con el layout flex el cuerpo ya no necesita ese relleno. */

/* (2.3) TABLA DE DETALLES (atributos: talla, color, modelo, marca…) */
#bq-catalog-modal .bq-prod-attrs, 
.bq-qv-prod-attrs{display:block !important;}
#bq-catalog-modal .bq-prod-attrs, .bq-qv-prod-attrs{
    margin:6px 0 14px;
    border:1px solid rgba(128,128,128,0.22);
    border-radius:14px;
    overflow:hidden;
    background:rgba(128,128,128,0.06);
    color:inherit;
}
#bq-catalog-modal .bq-prod-attrs-title, .bq-qv-prod-attrs .bq-prod-attrs-title{
    display:flex; align-items:center; gap:7px;
    padding:10px 14px;
    font-size:12.5px; font-weight:800; letter-spacing:.01em;
    color:inherit !important;
    border-bottom:1px solid rgba(128,128,128,0.20);
    background:rgba(128,128,128,0.07);
}
#bq-catalog-modal .bq-prod-attrs-title svg, .bq-qv-prod-attrs .bq-prod-attrs-title svg{ stroke:var(--bq-primary); flex-shrink:0; }
#bq-catalog-modal .bq-prod-attrs-row, .bq-qv-prod-attrs .bq-prod-attrs-row{
    display:flex; align-items:flex-start;
    padding:9px 14px;
    font-size:13px; line-height:1.4;
    border-bottom:1px solid rgba(128,128,128,0.14);
}
#bq-catalog-modal .bq-prod-attrs-row:last-child, .bq-qv-prod-attrs .bq-prod-attrs-row:last-child{ border-bottom:none; }
#bq-catalog-modal .bq-prod-attrs-key, .bq-qv-prod-attrs .bq-prod-attrs-key{
    flex:0 0 38%;
    font-weight:700;
    color:inherit !important; opacity:.65;
    text-transform:capitalize;
}
#bq-catalog-modal .bq-prod-attrs-val, .bq-qv-prod-attrs .bq-prod-attrs-val{
    flex:1 1 auto; min-width:0;
    font-weight:600;
    color:inherit !important;
    word-break:break-word;
}
/* Chip de color cuando el atributo es "color" */
#bq-catalog-modal .bq-prod-attrs-val .bq-attr-color-dot, .bq-qv-prod-attrs .bq-prod-attrs-val .bq-attr-color-dot{
    display:inline-block; width:13px; height:13px; border-radius:50%;
    margin-right:7px; vertical-align:-2px;
    border:1px solid rgba(128,128,128,0.5);
}

/* ═══════════════════════════════════════════════════════════════════════
 *  [FIX] MODAL QV (home/vitrina): precio con descuento + tabla de detalles.
 *  Contraste automático: el texto hereda el color del modal (claro sobre
 *  oscuro / oscuro sobre claro); fondos y bordes en gris translúcido neutro.
 * ═══════════════════════════════════════════════════════════════════════ */
.buyaca-app .bq-qv-price-row{
    display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin:2px 0 4px;
}
/* [NUEVA ESTRUCTURA] Etiquetas (estados) en el modal */
.buyaca-app .bq-qv-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.buyaca-app .bq-qv-tag{
    display:inline-flex; align-items:center;
    font-size:11px; font-weight:800; letter-spacing:.02em;
    color:#fff; padding:4px 10px; border-radius:100px; line-height:1.2;
    
}
/* [item 8] Botones de acción del modal: que NO se desborden del contenedor */
.buyaca-app .bq-qv-cta-sticky{ box-sizing:border-box; max-width:100%; }
.buyaca-app .bq-qv-cta-sticky > *{ box-sizing:border-box; max-width:100%; }
.buyaca-app .bq-qv-cta-btn{ box-sizing:border-box; max-width:100%; width:100%; }
.buyaca-app .bq-qv-price-extra{ display:inline-flex; align-items:baseline; gap:8px; }
.buyaca-app .bq-qv-price-regular{
    color:inherit; opacity:.55; font-size:15px; font-weight:600; text-decoration:line-through;
}
.buyaca-app .bq-qv-price-disc{
    font-size:12px; font-weight:800; color:#16a34a;
    background:rgba(22,163,74,.14); padding:2px 8px; border-radius:7px; letter-spacing:.2px;
}
.buyaca-app .bq-qv-attrs{
    margin:10px 0 6px;
    border:1px solid rgba(128,128,128,0.22);
    border-radius:14px; overflow:hidden;
    background:rgba(128,128,128,0.06);
    color:inherit;
}
.buyaca-app .bq-qv-attrs-title{
    display:flex; align-items:center; gap:7px;
    padding:9px 14px;
    font-size:12.5px; font-weight:800; letter-spacing:.01em;
    color:inherit;
    border-bottom:1px solid rgba(128,128,128,0.20);
    background:rgba(128,128,128,0.07);
}
.buyaca-app .bq-qv-attrs-title svg{ stroke:var(--bq-primary, #3A59EF); flex-shrink:0; }
.buyaca-app .bq-qv-attrs-row{
    display:flex; align-items:flex-start;
    padding:9px 14px; font-size:13px; line-height:1.4;
    border-bottom:1px solid rgba(128,128,128,0.14);
}
.buyaca-app .bq-qv-attrs-row:last-child{ border-bottom:none; }
.buyaca-app .bq-qv-attrs-key{
    flex:0 0 38%; font-weight:700; color:inherit; opacity:.62; text-transform:capitalize;
}
.buyaca-app .bq-qv-attrs-val{
    flex:1 1 auto; min-width:0; font-weight:600; color:inherit; word-break:break-word;
}
.buyaca-app .bq-qv-attr-color-dot{
    display:inline-block; width:13px; height:13px; border-radius:50%;
    margin-right:7px; vertical-align:-2px; border:1px solid rgba(128,128,128,0.5);
}

/* (2.4) ETIQUETA DE ESTADO COMO DESPLEGABLE ESTÉTICO (formulario de producto) */
.bq-status-dd{ position:relative; }
.bq-status-dd-trigger{
    width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:11px 14px;
    border:1.5px solid var(--bq-border, #e5e7eb);
    border-radius:12px;
    background:var(--bq-bg-elevated, #fff);
    color:var(--bq-text-primary, inherit);
    font-family:inherit; font-size:14px; font-weight:600;
    cursor:pointer; transition:border-color .18s ease, box-shadow .18s ease;
    box-sizing:border-box;
}
.bq-status-dd-trigger:hover{ border-color:var(--bq-primary, #3A59EF); }
.bq-status-dd.open .bq-status-dd-trigger{
    border-color:var(--bq-primary, #3A59EF);
    
}
.bq-status-dd-current{ display:inline-flex; align-items:center; gap:9px; min-width:0; }
.bq-status-dd-current .bq-status-pill-dot{
    width:12px; height:12px; border-radius:50%; flex-shrink:0;
}
.bq-status-dd-current-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bq-status-dd-chev{ flex-shrink:0; transition:transform .2s ease; opacity:.7; }
.bq-status-dd.open .bq-status-dd-chev{ transform:rotate(180deg); }

.bq-status-dd-panel{
    display:none;
    /* [FIX] Inline (no absolute): evita que el panel se recorte dentro del
       formulario al editar. Empuja el contenido hacia abajo al abrir. */
    margin-top:6px;
    flex-direction:column; gap:4px;
    padding:6px;
    background:var(--bq-bg-card, var(--bq-bg-elevated, #fff));
    border:1.5px solid var(--bq-border, #e5e7eb);
    border-radius:14px;
    
}
.bq-status-dd.open .bq-status-dd-panel{ display:flex; }
.bq-status-dd-panel .bq-status-pill{
    width:100%;
    display:flex; align-items:center; gap:10px;
    padding:10px 12px;
    border-radius:10px;
    cursor:pointer; font-size:13.5px; font-weight:600;
    border:1px solid transparent;
    transition:background .15s ease;
}
.bq-status-dd-panel .bq-status-pill:hover{ background:var(--bq-bg-elevated, rgba(0,0,0,0.04)); }
.bq-status-dd-panel .bq-status-pill.is-active{
    background:rgba(58,89,239,0.10);
    border-color:rgba(58,89,239,0.30);
}
.bq-status-dd-panel .bq-status-pill .bq-status-pill-dot{
    width:12px; height:12px; border-radius:50%; flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  [FASE 3] MIGA DE PAN EN EL MODAL DE PRODUCTO (home / vitrina)
 * ═══════════════════════════════════════════════════════════════════════ */
.buyaca-app .bq-qv-breadcrumb{
    display:flex; align-items:center; flex-wrap:wrap; gap:4px;
    margin-bottom:8px;
    font-size:12px; line-height:1.2;
}
.buyaca-app .bq-qv-bc-item{
    display:inline-flex; align-items:center;
    font-family:inherit; font-weight:700; letter-spacing:.01em;
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.buyaca-app button.bq-qv-bc-biz{
    color:var(--bq-text-secondary);
    text-transform:uppercase; font-size:11px; letter-spacing:.04em;
    background:transparent; border:1px solid var(--bq-border, rgba(128,128,128,0.28));
    padding:3px 10px; border-radius:100px; cursor:pointer;
    transition:all .18s ease;
}
.buyaca-app button.bq-qv-bc-biz:hover{
    border-color:var(--bq-text-secondary); color:var(--bq-text-primary);
    background:rgba(128,128,128,0.10);
}
.buyaca-app button.bq-qv-bc-biz:disabled{ cursor:default; opacity:.85; }
.buyaca-app .bq-qv-bc-sep{ color:var(--bq-text-secondary); opacity:.6; flex-shrink:0; }
.buyaca-app button.bq-qv-bc-cat{
    border:1px solid var(--bq-primary, #3A59EF);
    background:rgba(58,89,239,0.08);
    color:var(--bq-primary, #3A59EF);
    padding:3px 11px; border-radius:100px;
    cursor:pointer; font-size:12px;
    transition:all .18s ease;
}
.buyaca-app button.bq-qv-bc-cat:hover{
    background:var(--bq-primary, #3A59EF); color:#fff;
}
.buyaca-app button.bq-qv-bc-cat:disabled{
    cursor:default; opacity:.85;
    border-color:var(--bq-border, rgba(0,0,0,.12));
    background:var(--bq-bg-elevated, rgba(0,0,0,.04));
    color:var(--bq-text-secondary);
}

/* ═════════════════════════════════════════════════════════════════════
 *  [v10.7] MODAL DE CATÁLOGO · PORT del Quick View de inicio
 *  ---------------------------------------------------------------------
 *  Reemplaza por completo la estética del modal de producto del catálogo
 *  tomando como referencia la ventana emergente de la página de inicio.
 *
 *  Qué resuelve:
 *   1) La ventana ya NO tiene bordes redondeados (escritorio y móvil).
 *   2) Las tarjetas "Descripción" y "Detalles" contrastan de verdad con el
 *      fondo (antes salían en negro porque, al inyectarse el modal fuera de
 *      .buyaca-app, var(--bq-bg-elevated) resolvía al valor OSCURO incluso
 *      en modo claro). Ahora usan el sistema --bq-m-* que sí cambia con el
 *      modo de página.
 *   3) Los botones de llamada a la acción quedan SIEMPRE fijos al pie de la
 *      pantalla: imagen arriba, cuerpo con scroll propio y pie anclado.
 *  Se conserva la MISMA estructura/contenido del catálogo (sin "Local de…").
 * ═════════════════════════════════════════════════════════════════════ */

/* — Overlay con desenfoque, idéntico al Quick View — */
#bq-catalog-modal.bq-modal-overlay{
    background: var(--bq-m-overlay, rgba(0,0,0,0.6)) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* — La ventana: SIN bordes redondeados, superficie y sombra del sistema — */
#bq-catalog-modal .bq-catalog-modal-content{
    border-radius: 0 !important;
    background: var(--bq-m-bg) !important;
    color: var(--bq-m-text) !important;
    
}

/* — Imagen al ras (sin esquinas redondeadas) — */
#bq-catalog-modal .bq-slider-slide-image{
    border-radius: 0 !important;
    background: var(--bq-m-bg-alt) !important;
}

/* — Cuerpo del producto: en flujo normal (sube con la imagen al hacer scroll) — */
#bq-catalog-modal .bq-slider-slide-body{
    padding: 18px 22px 18px !important;
    background: var(--bq-m-bg) !important;
    color: var(--bq-m-text) !important;
    display: block !important;
    overflow: visible !important;
    min-height: 0 !important;
}

/* ── LAYOUT [v11.0]: la VENTANA hace scroll (la imagen del carrusel SUBE junto
      con la información, como antes) y SOLO el pie de CTAs queda anclado abajo
      con position:sticky. Sin huecos: el pie es lo último del flujo. ── */
#bq-catalog-modal .bq-catalog-modal-content{
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
}
#bq-catalog-modal .bq-catalog-modal-content::-webkit-scrollbar{ display:none; }
/* El envoltorio dinámico no debe crear su propio scroll: que scrollee el content
   para que el pie sticky se ancle al fondo de la ventana en ambas variantes. */
#bq-catalog-modal .bq-catalog-modal-scroll{
    display:block !important;
    overflow:visible !important;
    max-height:none !important;
    height:auto !important;
}

/* Móvil: ventana a pantalla completa, imagen cuadrada arriba */
@media (max-width: 640px){
    #bq-catalog-modal .bq-catalog-modal-content{
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
    #bq-catalog-modal .bq-slider-slide-image{ aspect-ratio:1/1 !important; }
}
/* Escritorio/tablet: tarjeta centrada con alto fijo e imagen acotada */
@media (min-width: 641px){
    #bq-catalog-modal.bq-modal-overlay{ align-items:center !important; padding:16px !important; }
    #bq-catalog-modal .bq-catalog-modal-content{
        width:100% !important;
        max-width:560px !important;
        height:min(88vh, 780px) !important;
        max-height:88vh !important;
    }
    #bq-catalog-modal .bq-slider-slide-image{
        aspect-ratio:auto !important;
        height:min(50vh, 440px) !important;
    }
}

/* — PIE ANCLADO (sticky) con los CTAs: se queda abajo mientras el resto sube — */
#bq-catalog-modal .bq-slider-footer{
    position: sticky !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 10px 20px max(10px, env(safe-area-inset-bottom, 0px)) !important;
    background: var(--bq-m-bg) !important;
    border-top: 1px solid var(--bq-m-border) !important;
    border-radius: 0 !important;
    
    z-index: 12 !important;
}

/* — Mientras un modal de producto está abierto, ocultar la barra inferior
     y los botones flotantes: ESO era el "área blanca" que tapaba los CTAs
     (la barra de navegación es position:fixed con fondo blanco). — */
body.bq-modal-open .buyaca-bottom-nav,
body.bq-modal-open .bq-cart-fab,
body.bq-modal-open .bq-publish-fab,
body.bq-modal-open .bq-fab-publish,
body.bq-modal-open .bq-fab{
    display: none !important;
}

/* CTAs lado a lado, ancho completo, estética Quick View */
#bq-catalog-modal .bq-cat-cta-row{
    display:flex !important;
    gap:10px !important;
    width:100%;
    align-items:stretch !important;
}
#bq-catalog-modal .bq-cat-cta-row > .buyaca-btn{
    flex:1 1 0 !important;
    min-width:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px;
    padding:11px 14px !important;
    border-radius:12px !important;
    font-weight:700 !important;
    font-size:14px !important;
    letter-spacing:.1px;
    white-space:nowrap;
    transition:transform .15s ease, box-shadow .2s ease, background .2s;
}
#bq-catalog-modal .bq-cat-cta-row > .buyaca-btn:hover{ transform:translateY(-1px); }
#bq-catalog-modal .bq-cat-cta-row .buyaca-btn-primary,
#bq-catalog-modal .bq-cat-cta-row .bq-custom-url-btn{
    background: linear-gradient(135deg, var(--bq-primary), color-mix(in srgb, var(--bq-primary) 82%, #000)) !important;
    color: var(--bq-text-on-primary, #fff) !important;
    border:none !important;
    
}
#bq-catalog-modal .bq-cat-cta-row .buyaca-btn-outline{
    background: var(--bq-m-bg-alt) !important;
    color: var(--bq-m-text) !important;
    border:1.5px solid var(--bq-m-border) !important;
    
}
#bq-catalog-modal .bq-cat-cta-row .buyaca-btn-outline:hover{
    border-color:var(--bq-primary) !important;
    color:var(--bq-primary) !important;
    background:var(--bq-primary-light) !important;
}

/* — Tarjetas "Descripción" y "Detalles": CONTRASTE REAL (ya no negro) — */
#bq-catalog-modal .bq-qv-card,
#bq-catalog-modal .bq-qv-desc-card,
#bq-catalog-modal .bq-prod-attrs{
    background: var(--bq-m-bg-alt) !important;
    border:1px solid var(--bq-m-border) !important;
    border-radius:16px !important;
    color: var(--bq-m-text) !important;
}
#bq-catalog-modal .bq-qv-card-title,
#bq-catalog-modal .bq-prod-attrs-title{
    color: var(--bq-m-text) !important;
    background: transparent !important;
    border-bottom-color: var(--bq-m-border) !important;
}
#bq-catalog-modal .bq-qv-card-title svg,
#bq-catalog-modal .bq-prod-attrs-title svg{ stroke: var(--bq-primary) !important; }
#bq-catalog-modal .bq-qv-desc{ color: var(--bq-m-text-soft) !important; }
#bq-catalog-modal .bq-prod-attrs-row{ border-bottom-color: var(--bq-m-border) !important; }
#bq-catalog-modal .bq-prod-attrs-key{ color: var(--bq-m-text-soft) !important; opacity:1 !important; }
#bq-catalog-modal .bq-prod-attrs-val{ color: var(--bq-m-text) !important; }

/* — Tipografía y jerarquía igual al Quick View — */
#bq-catalog-modal .bq-slider-slide-name{
    font-size:21px !important;
    font-weight:800 !important;
    color: var(--bq-m-text) !important;
    line-height:1.3 !important;
    letter-spacing:-.3px !important;
    margin:0 0 8px !important;
}
#bq-catalog-modal .bq-slider-slide-price{
    font-size:24px !important;
    font-weight:800 !important;
    color: var(--bq-primary) !important;
    letter-spacing:-.5px;
    margin:0 0 14px !important;
}
#bq-catalog-modal .bq-slider-slide-cats,
#bq-catalog-modal .bq-slider-slide-date{ color: var(--bq-m-text-soft) !important; }
#bq-catalog-modal .bq-qv-cta-note{ color: var(--bq-m-text-dim) !important; }

/* — Navegación entre productos: dentro del pie, sobria — */
#bq-catalog-modal .bq-cat-prodnav{
    border-top:1px solid var(--bq-m-border) !important;
    margin-top:12px !important;
    padding-top:12px !important;
}

/* ═════════════════════════════════════════════════════════════════════
 *  [Pedido] INSIGNIA DE VERIFICADO — se movió del logo (superpuesta en la
 *  esquina superior derecha) al final del nombre del negocio, en línea.
 * ═════════════════════════════════════════════════════════════════════ */
.buyaca-app .bq-cv2-logo-verified{
    position:static;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:20px; height:20px;
    flex:0 0 auto;
    background:none !important;
    border:none !important;
    border-radius:0 !important;
    animation:bqVerifPop .4s cubic-bezier(.22,1,.36,1);
}
.buyaca-app .bq-cv2-logo-verified svg{ display:block; width:100%; height:100%; }
@keyframes bqVerifPop{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* [Purga rediseño] El bloque "[v10.8] MENÚ DEL CATÁLOGO" (píldoras con
   prefijo html .buyaca-app) que vivía aquí se eliminó — competía con
   business-profile-v2.css y, peor, con header-filters-tabs-modal-v1110.css
   (especificidad aún mayor, también purgado). Única definición viva ahora:
   business-profile-v2.css. */

/* ── Tarjetas del catálogo: sombras, esquinas redondeadas y elevación al
      pasar el cursor (sensación de plataforma/web profesional) ── */
html .buyaca-app .bq-cv2-product-card{
    border-radius:5px !important;

    transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease !important;
}
html .buyaca-app .bq-cv2-product-card:hover{
    transform:translateY(-3px) !important;
    
}

/* ── Animación al cambiar de menú: el contenido entra con un fundido+ascenso ── */
html .buyaca-app .bq-cv2-tab-content,
html .buyaca-app [x-show][x-transition].bq-cv2-pane{
    animation:bqPaneIn .28s cubic-bezier(.22,1,.36,1);
}
html .buyaca-app .bq-cv2-product-grid > *{
    animation:bqCardIn .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes bqPaneIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
@keyframes bqCardIn{ from{ opacity:0; transform:translateY(10px) scale(.99); } to{ opacity:1; transform:translateY(0) scale(1); } }

/* Entrada escalonada de las tarjetas (sensación premium al abrir el catálogo) */
html .buyaca-app .bq-cv2-product-grid > *:nth-child(1){ animation-delay:.00s; }
html .buyaca-app .bq-cv2-product-grid > *:nth-child(2){ animation-delay:.04s; }
html .buyaca-app .bq-cv2-product-grid > *:nth-child(3){ animation-delay:.08s; }
html .buyaca-app .bq-cv2-product-grid > *:nth-child(4){ animation-delay:.12s; }
html .buyaca-app .bq-cv2-product-grid > *:nth-child(5){ animation-delay:.16s; }
html .buyaca-app .bq-cv2-product-grid > *:nth-child(6){ animation-delay:.20s; }

/* ═════════════════════════════════════════════════════════════════════
 *  [v10.9] TABLA DE "DETALLES" VACÍA — corrección definitiva.
 *  Una regla previa ('.bq-qv-prod-attrs{display:block !important}') ganaba al
 *  display:none que pone x-show de Alpine, forzando la tabla vacía a mostrarse.
 *  Aquí volvemos a permitir que x-show la oculte cuando no hay atributos.
 *  (En el modal del catálogo ya no se genera el elemento si no hay filas.)
 * ═════════════════════════════════════════════════════════════════════ */
.bq-qv-prod-attrs[style*="display: none"],
.bq-qv-prod-attrs[style*="display:none"],
.bq-prod-attrs[style*="display: none"],
.bq-prod-attrs[style*="display:none"]{ display:none !important; }

/* ═════════════════════════════════════════════════════════════════════
 *  [Pedido — rediseño estilo página] El nombre del negocio va PEGADO al
 *  logo, a la izquierda — ya no centrado. Antes esta regla ganaba la
 *  cascada por especificidad (html .buyaca-app .bq-cv2-name-row, con el
 *  elemento "html" sumando un punto extra) sobre el intento de
 *  alineación izquierda de business-profile-v2.css, así que el nombre
 *  seguía centrado pese a esa otra regla. Se corrige acá, en el origen.
 * ═════════════════════════════════════════════════════════════════════ */
html .buyaca-app .bq-cv2-name-row{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;
    gap:8px !important;
    padding-left:0 !important;
    padding-right:0 !important;
    flex-wrap:wrap !important;
}
html .buyaca-app .bq-cv2-name-group{
    justify-self:auto !important;
    justify-content:flex-start !important;
    flex:1 1 auto !important;
    min-width:0 !important;
}
html .buyaca-app .bq-cv2-name{ text-align:left !important; }
/* [Fase 1 rediseño] .bq-cv2-header-actions retirado del markup del perfil
   de negocio (Compartir/Reportar/Editar ahora en el cluster flotante sobre
   la portada) — la regla de grid-column:3 para ese contenedor quedó
   huérfana, se retira. La rejilla de .bq-cv2-name-group (abajo) no depende
   de ella y sigue intacta. */
/* Respeta el control de diseño "Disposición": izquierda / centro / derecha.
   (izquierda y centro ya existen vía layout_style; 'derecha' es opcional) */
html .buyaca-app.bq-vc-layout-left .bq-cv2-name-group{
    grid-column:1 / 2 !important;
    justify-self:start !important;
    justify-content:flex-start !important;
}
html .buyaca-app.bq-vc-layout-left .bq-cv2-name,
html .buyaca-app.bq-vc-layout-left .bq-cv2-name-row{ text-align:left !important; }
html .buyaca-app.bq-vc-name-right .bq-cv2-name-group{
    grid-column:2 / 4 !important;
    justify-self:end !important;
    justify-content:flex-end !important;
}

/* ═════════════════════════════════════════════════════════════════════
 *  [v10.9 · FASE 2] EDICIÓN DE PRODUCTO COMO MODAL ESTÉTICO.
 *  El formulario antes era un panel en línea; ahora abre como ventana
 *  centrada (hoja inferior en móvil) con fondo atenuado (truco box-shadow),
 *  cabecera y botonera fijas, e inputs con foco accesible.
 * ═════════════════════════════════════════════════════════════════════ */
/* [Fix v10.14.3] x-teleport (ver templates/business-profile.php) mueve el
 * modal y su overlay a ser hijos directos de <body>, escapando de CUALQUIER
 * contenedor ancestro con transform/filter que antes los "atrapaba" en un
 * contexto de apilamiento local (el bug de banner/header/CTA superpuestos).
 * Efecto secundario: al dejar de ser descendientes de .buyaca-app /
 * .buyaca-business-profile, pierden las variables de color de modo
 * claro/oscuro que esas clases redefinen (tokens.css y frontend.css). Se
 * replican aquí, usando como referencia html.bq-page-light/bq-page-dark
 * (marcador GLOBAL en <html>, ver el script anti-FOUC en class-buyaca-plugin.php,
 * que sigue aplicando sin importar dónde quede el modal en el DOM). */
html.bq-page-light .bq-prod-form-modal,
html.bq-page-light .bq-prod-form-overlay {
    --bq-text: #1a1a1a;
    --bq-text-primary: #1a1a1a;
    --bq-text-secondary: #4b5563;
    --bq-bg-card: #ffffff;
    --bq-bg-elevated: #ffffff;
    --bq-bg-surface: #f9fafb;
    --bq-border: #e5e7eb;
    --bq-border-light: #f3f4f6;
    --bq-ink: #14151A;
    --bq-bg: #ffffff;
    --bq-success: #1D9A6C;
    --bq-danger: #D8434B;
}
html.bq-page-dark .bq-prod-form-modal,
html.bq-page-dark .bq-prod-form-overlay {
    --bq-brand-text: #97A8FF;
    --bq-brand-dark: #6C7CFF;
    --bq-text: #F1F0ED;
    --bq-ink-soft: #A9ADB6;
    --bq-ink-faint: #6E7178;
    --bq-line: #2A2B30;
    --bq-line-strong: #35363D;
    --bq-surface: #1C1C20;
    --bq-ink: #F1F0ED;
    --bq-bg: #0F0F12;
    --bq-success: #34D399;
    --bq-danger: #F87171;
}
.bq-prod-form-modal,
.bq-prod-form-overlay {
    --bq-radius-sm: 10px;
    --bq-radius-md: 16px;
    --bq-radius-lg: 24px;
}
/* [v10.13] Overlay de fondo difuminado — la ventana de edición debe quedar
   sobrepuesta a TODO (incluye bottom-nav/FABs, ocultos vía .bq-modal-open en
   frontend.css) y estática; el fondo ya no queda interactivo ni visible. */
.bq-prod-form-overlay{
    position:fixed !important; inset:0 !important;
    z-index:100000 !important;
    background:rgba(15,17,23,.55) !important;
    -webkit-backdrop-filter:blur(6px) !important;
    backdrop-filter:blur(6px) !important;
}
.bq-prod-form-modal{
    /* [Fix v10.14.4] Al salir de .buyaca-app vía x-teleport, el modal deja
       de heredar font-family:var(--bq-font-family) (declarado en .buyaca-app,
       ver frontend.css) y cae al font-family por defecto del tema de
       WordPress — normalmente serif, de ahí el look "elegante" no deseado.
       Se declara aquí directamente, con la MISMA tipografía principal del
       sitio (DM Sans). */
    font-family: var(--bq-font-family, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
    position:fixed !important;
    top:50% !important; left:50% !important;
    transform:translate(-50%,-50%) !important;
    width:min(580px, 94vw) !important;
    max-width:580px !important;
    max-height:90vh !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    z-index:100001 !important;
    margin:0 !important;
    background:var(--bq-bg-card) !important;
    border:1px solid var(--bq-border, rgba(128,128,128,.18)) !important;
    border-radius:20px !important;
    padding:0 !important;
    
    scrollbar-width:thin;
    animation:bqFormPop .26s cubic-bezier(.22,1,.36,1);
}
@keyframes bqFormPop{
    from{ opacity:0; transform:translate(-50%,-46%) scale(.97); }
    to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
/* Cabecera fija dentro del modal */
.bq-prod-form-modal > div:first-child{
    position:sticky !important; top:0 !important; z-index:3;
    background:var(--bq-bg-card) !important;
    margin:0 !important;
    padding:18px 20px 14px !important;
    border-bottom:1px solid var(--bq-border, rgba(128,128,128,.16)) !important;
}
.bq-prod-form-modal > div:first-child h3{
    font-size:18px !important; font-weight:800 !important; letter-spacing:-.3px;
}
.bq-prod-form-modal #bq-product-form{ padding:18px 20px 20px !important; }
.bq-prod-form-modal .buyaca-form-group{ margin-bottom:16px !important; }
.bq-prod-form-modal .buyaca-form-label{
    font-weight:700 !important; font-size:13px !important;
    margin-bottom:6px !important; display:block;
}
.bq-prod-form-modal .buyaca-form-input,
.bq-prod-form-modal textarea.buyaca-form-input,
.bq-prod-form-modal select.buyaca-form-input{
    border-radius:12px !important;
    border:1.5px solid var(--bq-border, rgba(128,128,128,.2)) !important;
    padding:12px 14px !important;
    transition:border-color .18s ease, box-shadow .18s ease !important;
}
.bq-prod-form-modal .buyaca-form-input:focus,
.bq-prod-form-modal textarea.buyaca-form-input:focus,
.bq-prod-form-modal select.buyaca-form-input:focus{
    border-color:var(--bq-primary) !important;
    
    outline:none !important;
}
/* Botonera inferior fija (Guardar/Cancelar siempre visibles) */
.bq-prod-form-modal #bq-product-form > div:last-child{
    position:sticky !important; bottom:0 !important;
    background:linear-gradient(to top, var(--bq-bg-card) 78%, transparent) !important;
    padding:14px 0 6px !important; margin-top:10px !important;
    gap:10px !important;
}
.bq-prod-form-modal #bq-product-form > div:last-child .buyaca-btn{
    flex:1 1 0 !important; padding:13px !important;
    border-radius:12px !important; font-weight:800 !important;
}
@media (max-width:640px){
    .bq-prod-form-modal{
        top:auto !important; bottom:0 !important; left:0 !important;
        transform:none !important;
        width:100% !important; max-width:100% !important;
        max-height:94vh !important;
        border-radius:20px 20px 0 0 !important;
        animation:bqFormSheet .3s cubic-bezier(.16,1,.3,1);
    }
    @keyframes bqFormSheet{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
}

/* ═════════════════════════════════════════════════════════════════════
 *  [v11.0] PROMO SUAVE · Asistentes de catálogo (modo admin).
 *  Sin sombras, fondo muy sutil en el color principal, CTA llamativo.
 * ═════════════════════════════════════════════════════════════════════ */
.buyaca-app .bq-asist-promo{
    display:flex; align-items:center; gap:14px;
    background:linear-gradient(135deg,
        color-mix(in srgb, var(--bq-primary) 13%, transparent),
        color-mix(in srgb, var(--bq-primary) 5%, transparent));
    border:1px solid color-mix(in srgb, var(--bq-primary) 24%, transparent);
    border-radius:16px;
    padding:14px 40px 14px 16px;
    margin:0 0 16px;
    position:relative;
    
}
.buyaca-app .bq-asist-promo-ic{ font-size:22px; line-height:1; flex-shrink:0; }
.buyaca-app .bq-asist-promo-txt{ flex:1; min-width:0; font-size:13px; line-height:1.45; color:var(--bq-text-secondary); }
.buyaca-app .bq-asist-promo-txt strong{ display:block; font-size:14.5px; font-weight:800; color:var(--bq-text-primary); margin-bottom:3px; letter-spacing:-.2px; }
.buyaca-app .bq-asist-promo-txt b{ color:var(--bq-primary); font-weight:700; }
.buyaca-app .bq-asist-promo-cta{
    flex-shrink:0;
    background:var(--bq-primary); color:var(--bq-text-on-primary, #fff);
    border-radius:11px; padding:10px 18px; font-weight:800; font-size:13px;
    text-decoration:none; white-space:nowrap;
    transition:filter .15s ease, transform .15s ease;
}
.buyaca-app .bq-asist-promo-cta:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.buyaca-app .bq-asist-promo-x{
    position:absolute; top:8px; right:10px;
    background:none; border:none; cursor:pointer;
    font-size:19px; line-height:1; color:var(--bq-text-secondary); opacity:.55;
    width:24px; height:24px; border-radius:50%;
    transition:opacity .15s ease, background .15s ease;
}
.buyaca-app .bq-asist-promo-x:hover{ opacity:1; background:color-mix(in srgb, var(--bq-primary) 12%, transparent); }
@media (max-width:560px){
    .buyaca-app .bq-asist-promo{ flex-wrap:wrap; padding:14px 16px; }
    .buyaca-app .bq-asist-promo-cta{ width:100%; text-align:center; }
}

/* ═════════════════════════════════════════════════════════════════════
 *  [Pedido] "que se vean como si estuvieran puestos dos anuncios" — pila
 *  de dos promos (campañas encima, asistentes debajo). bq-promo-stack-peek
 *  es una tarjeta fantasma asomando 6px detrás/abajo de la visible, para
 *  insinuar que hay otra esperando sin duplicar contenido real.
 * ═════════════════════════════════════════════════════════════════════ */
.buyaca-app .bq-promo-stack{ position:relative; margin:0 0 16px; }
.buyaca-app .bq-promo-stack .bq-asist-promo{ margin:0; position:relative; z-index:1; }
.buyaca-app .bq-promo-stack-peek{
    position:absolute;
    left:10px; right:10px; bottom:-6px;
    height:100%;
    background:var(--bq-bg-elevated, color-mix(in srgb, var(--bq-primary) 8%, var(--bq-bg-card)));
    border:1px solid color-mix(in srgb, var(--bq-primary) 16%, transparent);
    border-radius:16px;
    opacity:.6;
    z-index:0;
}
.buyaca-app .bq-camp-promo .bq-asist-promo-ic{ font-size:20px; }