/* ==========================================================================
   DISEÑO TRIPLE-A PRESTIGE - COMPLETO INTERACTIVO
   ========================================================================== */

body.page-template-page-template-blank, 
body.page-template-page-template-blank #page-container,
body.page-template-page-template-blank #main-content {
    background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%) !important;
}

.uws-app-viewport {
    position: fixed !important;
    top: 2vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 420px !important;
    height: 96vh !important;
    background-color: #f8fafc !important;
    border-radius: 30px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85) !important;
    z-index: 999999 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* Esterilización estricta Divi */
#uws-app-root, #uws-app-root *, #uws-app-root div, #uws-app-root span, #uws-app-root h2, #uws-app-root h3, #uws-app-root h4, #uws-app-root p, #uws-app-root img, #uws-app-root button, #uws-app-root nav, #uws-app-root a {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    float: none !important;
    box-shadow: none !important;
}

#uws-app-root { width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; }
.uws-app-viewport img { max-width: 100% !important; height: auto !important; display: block !important; }

/* Contenedor Intermedio de Scroll Independiente */
.uws-app-main-content {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    width: 100% !important;
    padding-bottom: 80px !important; /* Espacio para que la barra fija no pise contenido */
}
.uws-app-main-content::-webkit-scrollbar { display: none; }

/* --- Cabecera Glassmorphism --- */
#uws-app-root .uws-app-header {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
}

#uws-app-root .uws-app-logo { width: 44px !important; height: 44px !important; border-radius: 12px !important; overflow: hidden !important; flex-shrink: 0 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important; }
#uws-app-root .uws-app-logo img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
#uws-app-root .uws-app-brand-info h2 { font-size: 15px !important; font-weight: 800 !important; color: #0f172a !important; }
#uws-app-root .uws-app-brand-info p { font-size: 11px !important; color: #64748b !important; margin-top: 2px !important; font-weight: 500 !important; }

/* --- Banner Hero --- */
#uws-app-root .uws-app-hero { width: 90% !important; height: 135px !important; min-height: 135px !important; overflow: hidden !important; margin: 15px auto 5px auto !important; border-radius: 16px !important; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important; }
#uws-app-root .uws-app-hero img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* --- Cápsulas Categorías --- */
#uws-app-root .uws-cats-slider { display: flex !important; gap: 8px !important; padding: 15px 20px !important; overflow-x: auto !important; white-space: nowrap !important; }
#uws-app-root .uws-cats-slider::-webkit-scrollbar { display: none !important; }
#uws-app-root .uws-cat-item { background: #ffffff !important; padding: 7px 15px !important; border-radius: 10px !important; font-size: 12px !important; font-weight: 600 !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; cursor: pointer !important; }
#uws-app-root .uws-cat-item.active { background: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; }

/* --- Catálogo Grid --- */
#uws-app-root .uws-products-grid { padding: 10px 20px 20px 20px !important; width: 100% !important; }
#uws-app-root .layout-boutique { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
#uws-app-root .layout-boutique .uws-product-card { background: #ffffff !important; border-radius: 16px !important; overflow: hidden !important; border: 1px solid rgba(226, 232, 240, 0.8) !important; display: flex !important; flex-direction: column !important; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.02) !important; }
#uws-app-root .layout-boutique .prod-image { width: 100% !important; height: 125px !important; position: relative !important; overflow: hidden !important; }
#uws-app-root .layout-boutique .prod-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
#uws-app-root .layout-boutique .prod-details { padding: 12px !important; display: flex !important; flex-direction: column !important; flex-grow: 1 !important; }
#uws-app-root .layout-boutique .prod-title { font-size: 13px !important; font-weight: 700 !important; color: #1e293b !important; margin-bottom: 4px !important; }
#uws-app-root .layout-boutique .prod-desc { font-size: 10px !important; color: #64748b !important; margin-bottom: 12px !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
#uws-app-root .layout-boutique .prod-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: auto !important; }
#uws-app-root .price-sale { font-size: 14px !important; font-weight: 800 !important; color: #0f172a !important; }
#uws-app-root .price-regular.regular-crossed { font-size: 10px !important; color: #94a3b8 !important; text-decoration: line-through !important; }

#uws-app-root .uws-add-btn { background: var(--uws-primary-color) !important; color: #ffffff !important; border: none !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; display: flex !important; justify-content: center !important; align-items: center !important; cursor: pointer !important; }
#uws-app-root .badge-sale { position: absolute !important; top: 8px !important; left: 8px !important; background: #0f172a !important; color: #ffffff !important; font-size: 8px !important; font-weight: 700 !important; padding: 3px 6px !important; border-radius: 6px !important; }

/* ==========================================================================
   NUEVO: INTERFAZ DEL CARRITO DE COMPRAS PRÉMIUM
   ========================================================================== */
.uws-cart-page-wrapper { padding: 20px !important; width: 100% !important; }
.uws-cart-title { font-size: 18px !important; font-weight: 800; color: #0f172a !important; margin-bottom: 20px !important; }

.uws-cart-items-list { display: flex !important; flex-direction: column !important; gap: 15px !important; margin-bottom: 25px !important; }
.uws-cart-item-row { background: #fff !important; border-radius: 16px !important; padding: 12px !important; border: 1px solid #e2e8f0 !important; display: flex !important; gap: 12px !important; align-items: center !important; }
.uws-cart-item-img { width: 55px !important; height: 55px !important; border-radius: 10px !important; overflow: hidden !important; flex-shrink: 0 !important; }
.uws-cart-item-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.uws-cart-item-info { flex-grow: 1 !important; }
.uws-cart-item-info h4 { font-size: 13px !important; font-weight: 700 !important; color: #0f172a !important; }
.uws-cart-item-info .item-meta { font-size: 10px !important; color: #64748b !important; margin: 2px 0 4px 0 !important; }
.uws-cart-item-info .item-price { font-size: 13px !important; font-weight: 800 !important; color: var(--uws-primary-color) !important; }

/* Selectores de Cantidad Dinámicos (- 1 +) */
.uws-cart-item-actions { flex-shrink: 0 !important; }
.uws-qty-selector { display: flex !important; align-items: center !important; background: #f1f5f9 !important; border-radius: 10px !important; padding: 4px !important; gap: 10px !important; }
.qty-btn { border: none !important; background: #fff !important; width: 24px !important; height: 24px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 700 !important; color: #0f172a !important; cursor: pointer !important; display: flex !important; justify-content: center !important; align-items: center !important; }
.qty-num { font-size: 13px !important; font-weight: 700 !important; color: #0f172a !important; min-width: 14px !important; text-align: center !important; }

.uws-cart-totals-box { background: #fff !important; border-radius: 16px !important; padding: 16px 20px !important; border: 1px solid #e2e8f0 !important; margin-bottom: 20px !important; }
.total-row { display: flex !important; justify-content: space-between !important; align-items: center !important; }
.total-row span { font-size: 14px !important; color: #64748b !important; font-weight: 500 !important; }
.total-row strong { font-size: 18px !important; color: #0f172a !important; font-weight: 800 !important; }

.uws-empty-cart-state { text-align: center !important; padding: 60px 20px !important; }
.uws-empty-cart-state svg { margin-bottom: 15px !important; display: inline-block !important; }
.uws-empty-cart-state h4 { font-size: 16px !important; font-weight: 700 !important; color: #334155 !important; }
.uws-empty-cart-state p { font-size: 12px !important; color: #64748b !important; margin-top: 6px !important; }

.uws-primary-btn { width: 100% !important; border: none !important; color: #fff !important; padding: 14px !important; border-radius: 14px !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; text-align: center !important; box-shadow: 0 10px 20px -6px rgba(16, 185, 129, 0.3) !important; }

/* ==========================================================================
   NUEVO: PANEL DE VARIACIONES ANIMADO (BOTTOM SHEET)
   ========================================================================== */
.uws-sheet-backdrop { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(15, 23, 42, 0.4) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; z-index: 999998 !important; }
.uws-bottom-sheet { position: absolute !important; bottom: -100% !important; left: 0 !important; width: 100% !important; background: #fff !important; border-radius: 24px 24px 0 0 !important; padding: 20px !important; z-index: 999999 !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.uws-bottom-sheet.open { bottom: 0 !important; }

.uws-sheet-handle { width: 40px !important; height: 4px !important; background: #cbd5e1 !important; border-radius: 2px !important; margin: 0 auto 15px auto !important; }
.uws-sheet-header h3 { font-size: 16px !important; font-weight: 800 !important; color: #0f172a !important; }
.uws-sheet-header p { font-size: 12px !important; color: #64748b !important; margin-top: 2px !important; }

.uws-sheet-body { padding: 20px 0 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }
.uws-sheet-var-block label { display: block !important; font-size: 12px !important; font-weight: 700 !important; color: #334155 !important; margin-bottom: 8px !important; }
.uws-sheet-options-row { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.uws-sheet-opt-pill { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; padding: 6px 14px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 600 !important; color: #475569 !important; cursor: pointer !important; }
.uws-sheet-opt-pill.selected { background: #0f172a !important; color: #fff !important; border-color: #0f172a !important; }
.uws-sheet-footer { padding-top: 10px !important; }

/* --- Barra Inferior de Navegación --- */
#uws-app-root .uws-bottom-nav { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 65px !important; background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-top: 1px solid rgba(226, 232, 240, 0.6) !important; display: flex !important; justify-content: space-around !important; align-items: center !important; z-index: 999997 !important; padding: 0 10px !important; }
#uws-app-root .uws-nav-item { display: flex !important; flex-direction: column !important; align-items: center !important; text-decoration: none !important; color: #64748b !important; gap: 4px !important; width: 60px !important; cursor: pointer !important; }
#uws-app-root .uws-nav-item span { font-size: 10px !important; font-weight: 600 !important; }
#uws-app-root .uws-nav-item.active { color: var(--uws-primary-color) !important; }
#uws-app-root .uws-nav-item.active svg { stroke: var(--uws-primary-color) !important; }
#uws-app-root .uws-nav-cart-wrapper { position: relative !important; }
#uws-app-root .uws-cart-counter-bubble { position: absolute !important; top: -5px !important; right: -8px !important; background: #ef4444 !important; color: #ffffff !important; font-size: 8px !important; font-weight: 700 !important; min-width: 14px !important; height: 14px !important; border-radius: 50% !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 0 3px !important; }

/* Responsive */
@media (max-width: 480px) {
    .uws-app-viewport { max-width: 100% !important; height: 100vh !important; top: 0 !important; left: 0 !important; transform: none !important; border-radius: 0 !important; }
    #uws-app-root .uws-app-hero { width: 100% !important; margin: 0 !important; border-radius: 0 !important; }
    #uws-app-root .uws-bottom-nav { position: fixed !important; }
}