/** * cart.css — Estilos del Carrito de Compras * Rodio Divi Child v2.0 * * SELECTORES VERIFICADOS contra HTML real de rodiostore.com/carrito/ * (inspeccionado el 30-Mar-2026) * * Estructura confirmada del DOM: * body.rodio-wc-cart-block * .container > #content-area > #left-area > article.post-9 * h1.entry-title.main_title ← título de página (Divi) * .entry-content * div[data-block-name="woocommerce/cart"].wp-block-woocommerce-cart * .wc-block-components-sidebar-layout.wc-block-cart.wp-block-woocommerce-filled-cart-block * .wc-block-components-main.wc-block-cart__main.wp-block-woocommerce-cart-items-block * table.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block * thead > tr.wc-block-cart-items__header * tbody > tr.wc-block-cart-items__row * td.wc-block-cart-item__image * td.wc-block-cart-item__product * .wc-block-cart-item__wrap * a.wc-block-components-product-name * .wc-block-cart-item__prices * span.wc-block-formatted-money-amount.wc-block-components-product-price__value * .wc-block-components-product-metadata * .wc-block-cart-item__quantity * .wc-block-components-quantity-selector * button.wc-block-cart-item__remove-link * td.wc-block-cart-item__total * .wc-block-cart-item__total-price-and-sale-badge-wrapper * .wc-block-components-sidebar.wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block * .wp-block-woocommerce-cart-order-summary-block * h2.wc-block-cart__totals-title * .wp-block-woocommerce-cart-order-summary-coupon-form-block.wc-block-components-totals-wrapper * .wp-block-woocommerce-cart-order-summary-totals-block * .wc-block-components-totals-wrapper * .wc-block-components-totals-item.wc-block-components-totals-footer-item * .wc-block-cart__submit.wp-block-woocommerce-proceed-to-checkout-block * .wc-block-cart__submit-container * a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained * * DISEÑO OBJETIVO (imágenes 1 y 2): * - Fondo gris claro en toda la página * - Título "Carrito de Compras" en teal (#00B3A6), bold * - Cards de productos: fondo blanco, borde gris, borde redondeado, sombra en hover * - Imagen: 80x80px, redondeada * - Nombre: negro bold, no link visible * - Precio unitario: gris pequeño * - Subtotal: teal bold grande * - Stepper: fondo gris, botones +/−, input centrado * - Botón eliminar: X gris, rojo en hover * - Sidebar: card blanca, "Resumen del carrito", filas subtotal/impuesto/total * - Botón checkout: azul sólido, ancho completo, ícono bolsa * - Trust badges con íconos en círculos verde/azul */ /* ───────────────────────────────────────────────────────────────────────────── * SCOPE: Solo aplica en .rodio-wc-cart-block (clase en ) * ───────────────────────────────────────────────────────────────────────────── */ /* =========================================================================== * 1. FONDO DE LA PÁGINA * ========================================================================== */ .rodio-wc-cart-block { background-color: var(--rodio-gray-50) !important; } .rodio-wc-cart-block #page-container, .rodio-wc-cart-block #main-content, .rodio-wc-cart-block .container { background-color: var(--rodio-gray-50); } /* =========================================================================== * 2. BREADCRUMBS * ========================================================================== */ #rodio-cart-breadcrumb { font-size: 0.8rem; color: #6b7280; margin-bottom: 0.5rem; line-height: 1.4; } #rodio-cart-breadcrumb a { color: #6b7280; text-decoration: none; } #rodio-cart-breadcrumb a:hover { text-decoration: underline; } #rodio-cart-breadcrumb span:last-child { font-weight: 600; color: #374151; } /* =========================================================================== * 3. TÍTULO DE PÁGINA * Divi renderiza: h1.entry-title.main_title con texto "Carrito" * functions.php lo reemplaza por "Carrito de Compras" * ========================================================================== */ .rodio-wc-cart-block h1.entry-title, .rodio-wc-cart-block h1.main_title { font-size: 1.5rem !important; font-weight: 700 !important; color: var(--rodio-teal) !important; margin-bottom: 1.25rem !important; line-height: 1.3 !important; } /* =========================================================================== * 3. LAYOUT DEL BLOQUE CART * Divi mete el bloque dentro de #left-area + .entry-content * Necesitamos que el sidebar y el contenido se muestren en 2 columnas * ========================================================================== */ /* Resetear restricciones de ancho que Divi impone */ .rodio-wc-cart-block #left-area { width: 100% !important; float: none !important; } .rodio-wc-cart-block .entry-content { max-width: 100% !important; } /* El bloque cart ya tiene layout sidebar por defecto en WC Blocks. Ajustamos el gap y proporciones: 2/3 + 1/3 */ .rodio-wc-cart-block .wc-block-components-sidebar-layout { gap: 1.25rem !important; align-items: flex-start !important; margin-bottom: 0 !important; /* anula el margin-bottom: 3em del @container de WC Blocks */ } .rodio-wc-cart-block .wc-block-components-main { flex: 2 !important; min-width: 0; } .rodio-wc-cart-block .wc-block-components-sidebar { flex: 1 !important; min-width: 280px; position: sticky !important; top: 1.5rem !important; } /* =========================================================================== * 4. TABLA DE PRODUCTOS → CARDS * La tabla nativa se transforma en cards individuales por fila * usando display:block en la tabla y flex en cada fila * ========================================================================== */ /* Ocultar thead (columnas "Producto / Detalles / Total") */ .rodio-wc-cart-block .wc-block-cart-items__header { display: none !important; } /* Tabla: dejar de ser tabla visualmente */ .rodio-wc-cart-block table.wc-block-cart-items { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; border: none !important; background: transparent !important; width: 100% !important; } .rodio-wc-cart-block table.wc-block-cart-items tbody { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; } /* Cada fila = una card */ .rodio-wc-cart-block .wc-block-cart-items__row { display: flex !important; align-items: flex-start !important; gap: 1rem !important; background-color: #ffffff !important; border: 1px solid var(--rodio-gray-200) !important; border-radius: var(--rodio-radius-lg) !important; padding: 1rem !important; position: relative !important; transition: box-shadow var(--rodio-transition) !important; width: 100% !important; box-sizing: border-box !important; } .rodio-wc-cart-block .wc-block-cart-items__row:hover { box-shadow: var(--rodio-shadow-md) !important; } /* =========================================================================== * 5. CELDA IMAGEN * td.wc-block-cart-item__image → 80×80px, redondeada * ========================================================================== */ .rodio-wc-cart-block td.wc-block-cart-item__image { display: block !important; flex-shrink: 0 !important; width: 5rem !important; /* 80px */ height: 5rem !important; padding: 0 !important; border: none !important; vertical-align: top !important; } .rodio-wc-cart-block td.wc-block-cart-item__image a { display: block !important; width: 5rem !important; height: 5rem !important; background-color: var(--rodio-gray-50) !important; border: 1px solid var(--rodio-gray-200) !important; border-radius: var(--rodio-radius) !important; overflow: hidden !important; } .rodio-wc-cart-block td.wc-block-cart-item__image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: var(--rodio-radius) !important; } /* =========================================================================== * 6. CELDA DETALLES DEL PRODUCTO * td.wc-block-cart-item__product → flex column, ocupa el espacio restante * ========================================================================== */ .rodio-wc-cart-block td.wc-block-cart-item__product { display: block !important; flex: 1 !important; padding: 0 !important; border: none !important; min-width: 0 !important; vertical-align: top !important; } .rodio-wc-cart-block .wc-block-cart-item__wrap { display: flex !important; flex-direction: column !important; height: 100% !important; } /* Nombre del producto: negro bold, sin estilo de link */ .rodio-wc-cart-block a.wc-block-components-product-name { font-size: 1rem !important; font-weight: 600 !important; color: var(--rodio-gray-900) !important; text-decoration: none !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin-bottom: 0.125rem !important; line-height: 1.4 !important; text-transform: none !important; } .rodio-wc-cart-block a.wc-block-components-product-name:hover { color: var(--rodio-teal) !important; } /* Precio unitario (debajo del nombre) */ .rodio-wc-cart-block .wc-block-cart-item__prices { margin-bottom: 0.5rem !important; } .rodio-wc-cart-block .wc-block-cart-item__prices .wc-block-components-product-price, .rodio-wc-cart-block .wc-block-cart-item__prices .wc-block-formatted-money-amount { font-size: 0.75rem !important; color: var(--rodio-gray-600) !important; font-weight: 400 !important; } .rodio-wc-cart-block .wc-block-cart-item__prices .wc-block-formatted-money-amount::before { content: 'Precio: ' !important; font-weight: 500 !important; } /* Descripción / metadata (SKU, variaciones) */ .rodio-wc-cart-block .wc-block-components-product-metadata { font-size: 0.75rem !important; color: var(--rodio-gray-600) !important; margin-bottom: 0.5rem !important; } .rodio-wc-cart-block .wc-block-components-product-metadata p { margin: 0 !important; font-size: 0.75rem !important; color: var(--rodio-gray-600) !important; /* Truncar descripción larga */ display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* =========================================================================== * 7. CANTIDAD + BOTÓN ELIMINAR * .wc-block-cart-item__quantity contiene: * .wc-block-components-quantity-selector (stepper) * button.wc-block-cart-item__remove-link (SVG basura) * ========================================================================== */ .rodio-wc-cart-block .wc-block-cart-item__quantity { display: flex !important; align-items: center !important; gap: 0.75rem !important; margin-top: auto !important; padding-top: 0.75rem !important; } /* Label "Cantidad:" antes del stepper via pseudo */ .rodio-wc-cart-block .wc-block-cart-item__quantity::before { content: 'Cantidad:' !important; font-size: 0.75rem !important; font-weight: 500 !important; color: var(--rodio-gray-600) !important; white-space: nowrap !important; flex-shrink: 0 !important; } /* Stepper: fondo gris, borde, rounded */ .rodio-wc-cart-block .wc-block-components-quantity-selector { display: flex !important; align-items: center !important; background-color: var(--rodio-gray-50) !important; border: 1px solid var(--rodio-gray-200) !important; border-radius: var(--rodio-radius) !important; overflow: hidden !important; height: 1.75rem !important; gap: 0 !important; } /* Botones − y + */ .rodio-wc-cart-block .wc-block-components-quantity-selector__button { width: 1.75rem !important; height: 1.75rem !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; color: var(--rodio-gray-600) !important; cursor: pointer !important; padding: 0 !important; font-size: 1rem !important; transition: color var(--rodio-transition), background var(--rodio-transition) !important; flex-shrink: 0 !important; line-height: 1 !important; } .rodio-wc-cart-block .wc-block-components-quantity-selector__button:hover { color: var(--rodio-teal) !important; background-color: #ffffff !important; } .rodio-wc-cart-block .wc-block-components-quantity-selector__button:disabled { opacity: 0.4 !important; cursor: not-allowed !important; } /* Input de cantidad */ .rodio-wc-cart-block .wc-block-components-quantity-selector__input { width: 2.5rem !important; height: 1.75rem !important; text-align: center !important; font-size: 0.875rem !important; font-weight: 700 !important; color: var(--rodio-gray-900) !important; background: transparent !important; border: none !important; border-left: 1px solid var(--rodio-gray-200) !important; border-right: 1px solid var(--rodio-gray-200) !important; outline: none !important; box-shadow: none !important; padding: 0 !important; -moz-appearance: textfield !important; } .rodio-wc-cart-block .wc-block-components-quantity-selector__input::-webkit-inner-spin-button, .rodio-wc-cart-block .wc-block-components-quantity-selector__input::-webkit-outer-spin-button { -webkit-appearance: none !important; } /* Botón eliminar (SVG papelera nativo de WC Blocks) */ .rodio-wc-cart-block button.wc-block-cart-item__remove-link { position: absolute !important; top: 1rem !important; right: 1rem !important; width: 1.75rem !important; height: 1.75rem !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; border-radius: 6px !important; cursor: pointer !important; color: var(--rodio-gray-400) !important; padding: 0 !important; transition: color var(--rodio-transition), background var(--rodio-transition) !important; } .rodio-wc-cart-block button.wc-block-cart-item__remove-link:hover { color: var(--rodio-red-500) !important; background-color: var(--rodio-red-50) !important; } /* Ícono SVG del botón eliminar */ .rodio-wc-cart-block button.wc-block-cart-item__remove-link svg { width: 1rem !important; height: 1rem !important; display: block !important; } /* =========================================================================== * 8. CELDA TOTAL (subtotal por producto) * td.wc-block-cart-item__total → posicionada absolutamente al lado derecho * ========================================================================== */ .rodio-wc-cart-block td.wc-block-cart-item__total { display: block !important; border: none !important; padding: 0 !important; /* Posicionar abajo a la derecha del producto */ position: absolute !important; bottom: 1rem !important; right: 3.5rem !important; /* deja espacio para el botón eliminar */ text-align: right !important; vertical-align: bottom !important; } .rodio-wc-cart-block .wc-block-cart-item__total-price-and-sale-badge-wrapper { display: flex !important; flex-direction: column !important; align-items: flex-end !important; } /* Subtotal en teal bold grande */ .rodio-wc-cart-block td.wc-block-cart-item__total .wc-block-components-product-price, .rodio-wc-cart-block td.wc-block-cart-item__total .wc-block-formatted-money-amount { font-size: 1.125rem !important; font-weight: 700 !important; color: var(--rodio-teal) !important; } /* =========================================================================== * 9. SIDEBAR / RESUMEN DEL CARRITO — card contenedora * ========================================================================== */ .rodio-wc-cart-block .wc-block-components-sidebar.wc-block-cart__sidebar, .rodio-wc-cart-block .wp-block-woocommerce-cart-totals-block { background-color: #ffffff !important; border: 1px solid var(--rodio-gray-200) !important; border-radius: var(--rodio-radius-lg) !important; padding: 1.25rem !important; } /* ── Título: de "TOTAL DEL CARRITO" (caps/grande) a "Resumen del carrito" ── */ .rodio-wc-cart-block h2.wc-block-cart__totals-title, .rodio-wc-cart-block .wp-block-woocommerce-cart-order-summary-heading-block { font-size: 1.125rem !important; font-weight: 700 !important; color: var(--rodio-gray-900) !important; text-transform: none !important; /* elimina ALL CAPS de WC Blocks */ letter-spacing: 0 !important; margin-bottom: 1rem !important; margin-top: 0 !important; border: none !important; padding: 0 !important; line-height: 1.4 !important; } /* JS cambia el texto del título — este estilo ya garantiza el formato visual */ /* =========================================================================== * 10. FILAS DE TOTALES (Subtotal / Impuestos / Total) * ========================================================================== */ /* Wrapper de filas — sin borde extra */ .rodio-wc-cart-block .wc-block-components-totals-wrapper { border: none !important; padding: 0 !important; margin: 0 !important; } /* Cada fila genérica */ .rodio-wc-cart-block .wc-block-components-totals-item { display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 0.875rem !important; color: var(--rodio-gray-700) !important; padding: 0.625rem 0 !important; border: none !important; border-bottom: none !important; margin: 0 !important; background: transparent !important; } .rodio-wc-cart-block .wc-block-components-totals-item__label { font-weight: 400 !important; color: var(--rodio-gray-700) !important; } .rodio-wc-cart-block .wc-block-components-totals-item__value { font-weight: 600 !important; text-align: right !important; color: var(--rodio-gray-700) !important; } .rodio-wc-cart-block .wc-block-components-totals-item__value .wc-block-formatted-money-amount, .rodio-wc-cart-block .wc-block-components-totals-item__value .woocommerce-Price-amount { font-weight: 600 !important; color: var(--rodio-gray-700) !important; } /* ── Fila TOTAL (footer) — separador + texto bold + precio teal ── */ .rodio-wc-cart-block .wc-block-components-totals-footer-item { border-top: 1px solid var(--rodio-gray-200) !important; border-bottom: none !important; margin-top: 0.375rem !important; padding-top: 0.75rem !important; padding-bottom: 0.25rem !important; font-size: 1rem !important; font-weight: 700 !important; color: var(--rodio-gray-900) !important; background: transparent !important; } .rodio-wc-cart-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-weight: 700 !important; color: var(--rodio-gray-900) !important; font-size: 1rem !important; } /* Precio del total en teal bold */ .rodio-wc-cart-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--rodio-teal) !important; font-size: 1.125rem !important; font-weight: 700 !important; } .rodio-wc-cart-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value .wc-block-formatted-money-amount, .rodio-wc-cart-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value .wc-block-formatted-money-amount bdi { font-size: 1.125rem !important; font-weight: 700 !important; color: var(--rodio-teal) !important; } /* ── Descripción bajo el total: "Incluyendo $X de impuestos" + "Shipping..." ── * En el HTML real: .wc-block-components-totals-footer-item-tax-value (teal) * .wc-block-components-totals-footer-item-shipping (gris) * ── */ .rodio-wc-cart-block .wc-block-components-totals-item__description { width: 100% !important; font-size: 0.75rem !important; color: var(--rodio-gray-500) !important; margin-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .rodio-wc-cart-block .wc-block-components-totals-item__description p { margin: 0 !important; font-size: 0.75rem !important; color: var(--rodio-gray-500) !important; font-weight: 400 !important; /* quita el bold de "Shipping will be calculated..." */ } /* "Shipping will be calculated at checkout" — quitar bold y corregir idioma via JS */ .rodio-wc-cart-block .wc-block-components-totals-footer-item-shipping { font-weight: 400 !important; color: var(--rodio-gray-500) !important; font-size: 0.75rem !important; } /* Precio de impuestos en teal dentro de la descripción */ .rodio-wc-cart-block .wc-block-components-totals-footer-item-tax-value { color: var(--rodio-teal) !important; font-weight: 600 !important; } /* Fila "Impuestos estimados" inyectada por JS — hereda estilos de totals-item pero el valor se muestra en el mismo gris que Subtotal (no teal) */ .rodio-wc-cart-block .rodio-tax-row { display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 0.875rem !important; color: var(--rodio-gray-700) !important; padding: 0.625rem 0 !important; border: none !important; margin: 0 !important; background: transparent !important; } .rodio-wc-cart-block .rodio-tax-row .wc-block-components-totals-item__label { font-weight: 400 !important; color: var(--rodio-gray-700) !important; } .rodio-wc-cart-block .rodio-tax-row .wc-block-components-totals-item__value { font-weight: 600 !important; color: var(--rodio-gray-700) !important; text-align: right !important; } .rodio-wc-cart-block .rodio-tax-row .wc-block-formatted-money-amount, .rodio-wc-cart-block .rodio-tax-row .woocommerce-Price-amount, .rodio-wc-cart-block .rodio-tax-row bdi { font-weight: 600 !important; color: var(--rodio-gray-700) !important; font-size: 0.875rem !important; } /* =========================================================================== * 11. CUPÓN — minimizar presencia visual (no es parte del diseño Figma) * ========================================================================== */ .rodio-wc-cart-block .wp-block-woocommerce-cart-order-summary-coupon-form-block { border-top: none !important; border-bottom: 1px solid var(--rodio-gray-200) !important; padding: 0.5rem 0 !important; margin-bottom: 0.5rem !important; } .rodio-wc-cart-block .wc-block-components-totals-coupon { padding: 0 !important; border: none !important; margin: 0 !important; } /* Botón "Add coupons" → estilo discreto teal */ .rodio-wc-cart-block .wc-block-components-panel__button, .rodio-wc-cart-block [role="button"].wc-block-components-panel__button { font-size: 0.8125rem !important; color: var(--rodio-teal) !important; background: none !important; border: none !important; cursor: pointer !important; padding: 0.25rem 0 !important; display: flex !important; align-items: center !important; gap: 0.25rem !important; font-weight: 500 !important; text-decoration: none !important; width: 100% !important; justify-content: space-between !important; } .rodio-wc-cart-block .wc-block-components-panel__button:hover { color: var(--rodio-teal-dk) !important; } .rodio-wc-cart-block .wc-block-components-panel__button-icon { width: 1.25rem !important; height: 1.25rem !important; flex-shrink: 0 !important; } /* =========================================================================== * 12. BOTÓN CHECKOUT "Proceder al pago" * Selector real: a.wc-block-components-button.wp-element-button * .wc-block-cart__submit-button.contained * ========================================================================== */ .rodio-wc-cart-block .wc-block-cart__submit-container { margin-top: 1.25rem !important; } .rodio-wc-cart-block a.wc-block-cart__submit-button, .rodio-wc-cart-block .wc-block-cart__submit-button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; width: 100% !important; padding: 0.875rem 1.25rem !important; background-color: var(--rodio-blue) !important; color: #ffffff !important; border: none !important; border-radius: var(--rodio-radius) !important; font-size: 1rem !important; font-weight: 700 !important; cursor: pointer !important; text-align: center !important; text-decoration: none !important; box-shadow: 0 4px 12px var(--rodio-blue-shadow) !important; transition: background-color var(--rodio-transition), box-shadow var(--rodio-transition) !important; line-height: 1 !important; letter-spacing: 0 !important; border-bottom: none !important; } .rodio-wc-cart-block a.wc-block-cart__submit-button:hover, .rodio-wc-cart-block .wc-block-cart__submit-button:hover { background-color: var(--rodio-blue-dk) !important; color: #ffffff !important; box-shadow: 0 6px 16px var(--rodio-blue-shadow) !important; text-decoration: none !important; border-bottom: none !important; } /* Texto del botón (WC Blocks lo envuelve en .wc-block-components-button__text) */ .rodio-wc-cart-block .wc-block-cart__submit-button .wc-block-components-button__text { color: #ffffff !important; font-size: 1rem !important; font-weight: 700 !important; } /* SVG ícono inyectado por JS */ .rodio-wc-cart-block .rodio-checkout-icon { flex-shrink: 0 !important; } /* Nota de envío inyectada por JS bajo el botón */ .rodio-wc-cart-block #rodio-shipping-note { font-size: 0.75rem !important; color: var(--rodio-gray-500) !important; text-align: center !important; margin-top: 0.75rem !important; margin-bottom: 0 !important; font-weight: 400 !important; } /* =========================================================================== * 13. TRUST BADGES (inyectados por cart.js entre cupón y totales) * ========================================================================== */ .rodio-trust-badges { display: flex !important; flex-direction: column !important; gap: 0.625rem !important; /* Posición: debajo de la nota de envío, con separador arriba */ padding: 0.875rem 0 0 !important; margin-top: 0.5rem !important; border-top: 1px solid var(--rodio-gray-200) !important; border-bottom: none !important; } .rodio-trust-badge { display: flex !important; align-items: center !important; gap: 0.625rem !important; font-size: 0.8125rem !important; color: var(--rodio-gray-600) !important; } .rodio-trust-badge__icon { width: 1.875rem !important; height: 1.875rem !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .rodio-trust-badge__icon svg { width: 1rem !important; height: 1rem !important; display: block !important; } .rodio-trust-badge__icon--green { background-color: var(--rodio-green-100) !important; color: var(--rodio-green-600) !important; } .rodio-trust-badge__icon--blue { background-color: var(--rodio-blue-100) !important; color: var(--rodio-blue-600) !important; } /* =========================================================================== * 14. TEXTO "El costo de envío..." dentro del bloque de totales * (bloque wp-block-woocommerce-cart-order-summary-totals-block) * ========================================================================== */ .rodio-wc-cart-block .wp-block-woocommerce-cart-order-summary-totals-block p { font-size: 0.75rem !important; color: var(--rodio-gray-500) !important; text-align: center !important; margin: 0.5rem 0 !important; font-weight: 400 !important; } /* =========================================================================== * 15. NOTICES / MENSAJES DE WOOCOMMERCE * ========================================================================== */ .rodio-wc-cart-block .wc-block-components-notices__snackbar, .rodio-wc-cart-block .wc-block-components-notice-banner { border-radius: var(--rodio-radius) !important; font-size: 0.875rem !important; margin-bottom: 1rem !important; } /* =========================================================================== * 16. RESPONSIVE * ========================================================================== */ @media (max-width: 780px) { .rodio-wc-cart-block .wc-block-components-sidebar-layout { flex-direction: column !important; } .rodio-wc-cart-block .wc-block-components-sidebar { position: static !important; min-width: unset !important; width: 100% !important; } .rodio-wc-cart-block td.wc-block-cart-item__total { position: static !important; text-align: left !important; padding-top: 0.5rem !important; } .rodio-wc-cart-block .wc-block-cart-items__row { flex-wrap: wrap !important; padding-bottom: 1.5rem !important; /* espacio para el botón eliminar absoluto */ } } @media (max-width: 480px) { .rodio-wc-cart-block td.wc-block-cart-item__image, .rodio-wc-cart-block td.wc-block-cart-item__image a { width: 4rem !important; height: 4rem !important; } } /* =========================================================================== * 17. RESETEAR ESTILOS DE DIVI QUE INTERFIEREN * ========================================================================== */ /* Divi a veces aplica border-bottom a los links */ .rodio-wc-cart-block .wp-block-woocommerce-cart a { border-bottom: none !important; } /* Divi puede dar color azul a todos los links */ .rodio-wc-cart-block a.wc-block-components-product-name { color: var(--rodio-gray-900) !important; } /* Resetear estilos de table que Divi o el tema heredado puedan agregar */ .rodio-wc-cart-block table.wc-block-cart-items, .rodio-wc-cart-block table.wc-block-cart-items thead, .rodio-wc-cart-block table.wc-block-cart-items tbody, .rodio-wc-cart-block table.wc-block-cart-items tr, .rodio-wc-cart-block table.wc-block-cart-items td, .rodio-wc-cart-block table.wc-block-cart-items th { border-collapse: unset !important; border-spacing: 0 !important; } /* Quitar padding de article de Divi si existe */ .rodio-wc-cart-block article.post-9 .entry-content { padding: 0 !important; } /* =========================================================================== * 18. WISHLIST DWE — botón "Guardar para después" * Inyectado por cart.js antes de .wc-block-cart-item__quantity * (debajo del nombre/descripción del producto, encima de la cantidad). * ========================================================================== */ .rodio-wc-cart-block .rodio-wishlist-row { display: flex !important; align-self: flex-start !important; padding-top: 0 !important; margin-top: 0.375rem !important; margin-bottom: 0.375rem !important; border-top: none !important; } /* ── Botón base: siempre teal + corazón outline, ignora estado DWE ── */ .rodio-wc-cart-block .rodio-wish-btn, .rodio-wc-cart-block .rodio-wish-btn.wishlisted, .rodio-wc-cart-block .rodio-wish-btn.dwe_added_to_wishlist, .rodio-wc-cart-block .rodio-wish-btn.dwe_move_to_wishlist_button { display: inline-flex !important; align-items: center !important; gap: 0.375rem !important; font-size: 0.75rem !important; font-weight: 600 !important; color: var(--rodio-teal) !important; text-decoration: none !important; border: none !important; border-bottom: none !important; background: none !important; padding: 0 !important; cursor: pointer !important; transition: color var(--rodio-transition) !important; line-height: 1 !important; opacity: 1 !important; /* evita que DWE lo atenúe al deshabilitar */ pointer-events: auto !important; /* evita que DWE lo desactive con disabled */ } .rodio-wc-cart-block .rodio-wish-btn:hover, .rodio-wc-cart-block .rodio-wish-btn.wishlisted:hover { color: var(--rodio-teal-dk) !important; border-bottom: none !important; text-decoration: none !important; } /* ── Corazón SVG: siempre outline teal, nunca rojo/filled ── */ .rodio-wc-cart-block .rodio-wish-btn svg, .rodio-wc-cart-block .rodio-wish-btn.wishlisted svg, .rodio-wc-cart-block .rodio-wish-btn.dwe_added_to_wishlist svg, .rodio-wc-cart-block .rodio-wish-btn.dwe_move_to_wishlist_button svg { width: 0.875rem !important; height: 0.875rem !important; flex-shrink: 0 !important; fill: none !important; /* siempre outline */ stroke: var(--rodio-teal) !important; color: var(--rodio-teal) !important; transition: stroke var(--rodio-transition) !important; } .rodio-wc-cart-block .rodio-wish-btn:hover svg, .rodio-wc-cart-block .rodio-wish-btn.wishlisted:hover svg { stroke: var(--rodio-teal-dk) !important; } /* ── Anular TODOS los estilos que DWE inyecta con su propio CSS ── */ .rodio-wc-cart-block .dwe_wishlist_button_wrapper { display: none !important; /* oculta el wrapper DWE si llega a renderizarse en la card */ } /* Prevenir que DWE llene el corazón en cualquier selector que use */ .rodio-wc-cart-block .rodio-wish-btn path { fill: none !important; stroke: currentColor !important; } /* =========================================================================== * 19. WRAPPER SECCIONES EXTRA (bajo el bloque cart) * ========================================================================== */ .rodio-cart-extra-sections { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.25rem; } /* Estilos comunes: card blanca con borde */ .rodio-wc-cart-block .rodio-saved-later, .rodio-wc-cart-block .rodio-carousel-section { background: #ffffff; border: 1px solid var(--rodio-gray-200); border-radius: var(--rodio-radius-lg); padding: 1rem; } /* Espacio entre la sección recomendados y el footer */ .rodio-wc-cart-block .rodio-carousel-section.rodio-recommended { margin-bottom: 5rem; } /* =========================================================================== * 20. TÍTULOS DE SECCIÓN * ========================================================================== */ .rodio-wc-cart-block .rodio-section-title { font-size: 1rem; font-weight: 700; color: var(--rodio-gray-900); margin: 0; line-height: 1.3; display: flex; align-items: center; gap: 0.4rem; } .rodio-wc-cart-block .rodio-section-count { font-weight: 400; font-size: 0.9375rem; color: var(--rodio-gray-500); } .rodio-wc-cart-block .rodio-section-title-wrap { display: flex; align-items: center; gap: 0.5rem; } .rodio-wc-cart-block .rodio-section-icon { width: 1.25rem; height: 1.25rem; color: var(--rodio-teal); flex-shrink: 0; } /* =========================================================================== * 21. GUARDADOS PARA DESPUÉS — grid de cards * ========================================================================== */ .rodio-wc-cart-block .rodio-saved-later > .rodio-section-title { margin-bottom: 1rem; } .rodio-wc-cart-block .rodio-saved-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; } .rodio-wc-cart-block .rodio-saved-item { background: var(--rodio-gray-50); border: 1px solid var(--rodio-gray-200); border-radius: var(--rodio-radius); padding: 0.75rem; display: flex; gap: 0.75rem; transition: box-shadow var(--rodio-transition); position: relative; } .rodio-wc-cart-block .rodio-saved-item:hover { box-shadow: var(--rodio-shadow-md); } .rodio-wc-cart-block .rodio-saved-item__image { flex-shrink: 0; width: 4rem; height: 4rem; background: #fff; border: 1px solid var(--rodio-gray-200); border-radius: var(--rodio-radius); overflow: hidden; } .rodio-wc-cart-block .rodio-saved-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .rodio-wc-cart-block .rodio-saved-item__details { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-right: 1.5rem; /* espacio para el botón eliminar absoluto */ } .rodio-wc-cart-block .rodio-saved-item__name { font-size: 0.875rem !important; font-weight: 500 !important; color: var(--rodio-gray-900) !important; margin: 0 0 0.25rem !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rodio-wc-cart-block .rodio-saved-item__price { font-size: 1rem; font-weight: 700; color: var(--rodio-teal); margin-bottom: 0.5rem; } .rodio-wc-cart-block .rodio-saved-item__price .woocommerce-Price-amount { font-weight: inherit; color: inherit; font-size: inherit; } .rodio-wc-cart-block .rodio-saved-item__price ins { text-decoration: none; } .rodio-wc-cart-block .rodio-saved-item__price del { font-size: 0.75rem; color: var(--rodio-gray-400); font-weight: 400; margin-right: 0.25rem; } .rodio-wc-cart-block .rodio-saved-item__actions { margin-top: auto; display: flex; gap: 0.5rem; align-items: center; padding-right: 0; /* el btn eliminar ya no ocupa espacio en el flujo */ } /* Botón "Mover al carrito" */ .rodio-wc-cart-block .rodio-btn-move-cart { flex: 1; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.375rem !important; padding: 0.375rem 0.5rem !important; background: var(--rodio-teal) !important; color: #fff !important; font-size: 0.75rem !important; font-weight: 600 !important; border-radius: var(--rodio-radius) !important; text-decoration: none !important; border: none !important; border-bottom: none !important; transition: background var(--rodio-transition) !important; white-space: nowrap; line-height: 1 !important; } .rodio-wc-cart-block .rodio-btn-move-cart:hover { background: var(--rodio-teal-dk) !important; color: #fff !important; text-decoration: none !important; border-bottom: none !important; } .rodio-wc-cart-block .rodio-btn-move-cart svg { width: 0.875rem !important; height: 0.875rem !important; flex-shrink: 0 !important; } /* Botón eliminar de guardado */ .rodio-wc-cart-block .rodio-btn-remove-saved { position: absolute; top: 0.25rem; right: 0.25rem; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 6px; color: var(--rodio-gray-400); cursor: pointer; padding: 0; transition: color var(--rodio-transition), background var(--rodio-transition); } .rodio-wc-cart-block .rodio-btn-remove-saved:hover { color: var(--rodio-red-500); background: var(--rodio-red-50); } .rodio-wc-cart-block .rodio-btn-remove-saved svg { width: 0.875rem; height: 0.875rem; } /* =========================================================================== * 22. CAROUSEL — base compartida para ambas secciones * ========================================================================== */ .rodio-wc-cart-block .rodio-carousel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .rodio-wc-cart-block .rodio-carousel-nav { display: flex; gap: 0.375rem; flex-shrink: 0; } .rodio-wc-cart-block .rodio-carousel-btn { width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; background: var(--rodio-gray-100); border: none; border-radius: var(--rodio-radius); cursor: pointer; color: var(--rodio-gray-600); padding: 0; transition: background var(--rodio-transition); } .rodio-wc-cart-block .rodio-carousel-btn:hover { background: var(--rodio-gray-200); } .rodio-wc-cart-block .rodio-carousel-btn svg { width: 0.875rem; height: 0.875rem; } .rodio-wc-cart-block .rodio-carousel-track { display: flex; gap: 0.5rem; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0.25rem; } .rodio-wc-cart-block .rodio-carousel-track::-webkit-scrollbar { display: none; } /* =========================================================================== * 23. TARJETA RECOMENDADOS — layout horizontal compacto * Replica: w-52, flex-row, imagen 64px cuadrada + info a la derecha * ========================================================================== */ .rodio-wc-cart-block .rodio-rec-card { flex-shrink: 0; width: 13rem; background: var(--rodio-gray-50); border: 1px solid var(--rodio-gray-200); border-radius: var(--rodio-radius); transition: box-shadow var(--rodio-transition); } .rodio-wc-cart-block .rodio-rec-card:hover { box-shadow: var(--rodio-shadow-md); } .rodio-wc-cart-block .rodio-rec-card__inner { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem; } .rodio-wc-cart-block .rodio-rec-card__image { flex-shrink: 0; width: 4rem; height: 4rem; background: #fff; border: 1px solid var(--rodio-gray-200); border-radius: var(--rodio-radius); overflow: hidden; } .rodio-wc-cart-block .rodio-rec-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .rodio-wc-cart-block .rodio-rec-card__info { flex: 1; min-width: 0; } .rodio-wc-cart-block .rodio-rec-card__name { font-size: 0.75rem !important; font-weight: 500 !important; color: var(--rodio-gray-900) !important; margin: 0 0 0.25rem !important; line-height: 1.3 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-transform: none !important; } .rodio-wc-cart-block .rodio-rec-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.375rem; margin-top: 0.25rem; } .rodio-wc-cart-block .rodio-rec-card__price { font-size: 0.875rem; font-weight: 700; color: var(--rodio-teal); flex: 1; min-width: 0; } .rodio-wc-cart-block .rodio-rec-card__price .woocommerce-Price-amount { font-weight: inherit; color: inherit; font-size: inherit; } .rodio-wc-cart-block .rodio-rec-card__price ins { text-decoration: none; } .rodio-wc-cart-block .rodio-rec-card__price del { font-size: 0.625rem; color: var(--rodio-gray-400); font-weight: 400; } /* Botón ícono agregar al carrito (recomendados) */ .rodio-wc-cart-block .rodio-btn-add-cart-sm { flex-shrink: 0; width: 1.5rem; height: 1.5rem; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--rodio-teal) !important; color: #fff !important; border: none !important; border-bottom: none !important; border-radius: 6px !important; text-decoration: none !important; transition: background var(--rodio-transition) !important; } .rodio-wc-cart-block .rodio-btn-add-cart-sm:hover { background: var(--rodio-teal-dk) !important; color: #fff !important; text-decoration: none !important; border-bottom: none !important; } .rodio-wc-cart-block .rodio-btn-add-cart-sm svg { width: 0.75rem; height: 0.75rem; } /* =========================================================================== * 24. TARJETA VISTO RECIENTEMENTE — layout vertical con imagen grande * Replica: w-56, imagen 144px tall, hover scale, badges overlay * ========================================================================== */ .rodio-wc-cart-block .rodio-rv-card { flex-shrink: 0; width: 14rem; background: var(--rodio-gray-50); border: 1px solid var(--rodio-gray-200); border-radius: var(--rodio-radius); padding: 0.75rem; transition: box-shadow var(--rodio-transition); } .rodio-wc-cart-block .rodio-rv-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); } .rodio-wc-cart-block .rodio-rv-card__image { position: relative; width: 100%; height: 9rem; background: #fff; border: 1px solid var(--rodio-gray-200); border-radius: var(--rodio-radius); overflow: hidden; margin-bottom: 0.75rem; } .rodio-wc-cart-block .rodio-rv-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .rodio-wc-cart-block .rodio-rv-card:hover .rodio-rv-card__image img { transform: scale(1.05); } /* Eye badge — esquina superior derecha */ .rodio-wc-cart-block .rodio-rv-card__eye { position: absolute; top: 0.5rem; right: 0.5rem; width: 1.75rem; height: 1.75rem; background: rgba(255,255,255,.9); backdrop-filter: blur(4px); border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; } .rodio-wc-cart-block .rodio-rv-card__eye svg { width: 0.875rem; height: 0.875rem; color: var(--rodio-gray-600); } /* Corazón wishlist — esquina superior izquierda */ .rodio-wc-cart-block .rodio-rv-card__fav { position: absolute; top: 0.5rem; left: 0.5rem; width: 1.75rem; height: 1.75rem; background: rgba(255,255,255,.9); backdrop-filter: blur(4px); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; padding: 0; transition: background var(--rodio-transition); } .rodio-wc-cart-block .rodio-rv-card__fav:hover { background: rgba(255,255,255,1); } .rodio-wc-cart-block .rodio-rv-card__fav svg { width: 0.875rem; height: 0.875rem; color: var(--rodio-gray-600); transition: fill var(--rodio-transition), color var(--rodio-transition); } .rodio-wc-cart-block .rodio-rv-card__fav.dwe_added_to_wishlist svg { fill: var(--rodio-red-500); color: var(--rodio-red-500); } .rodio-wc-cart-block .rodio-rv-card__name { font-size: 0.875rem !important; font-weight: 600 !important; color: var(--rodio-gray-900) !important; margin: 0 0 0.5rem !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 2.5rem; } .rodio-wc-cart-block .rodio-rv-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .rodio-wc-cart-block .rodio-rv-card__price { font-size: 1rem; font-weight: 700; color: var(--rodio-teal); } .rodio-wc-cart-block .rodio-rv-card__price .woocommerce-Price-amount { font-weight: inherit; color: inherit; font-size: inherit; } .rodio-wc-cart-block .rodio-rv-card__price ins { text-decoration: none; } .rodio-wc-cart-block .rodio-rv-card__price del { font-size: 0.75rem; color: var(--rodio-gray-400); font-weight: 400; } /* Botón "Agregar" con texto (vistos recientemente) */ .rodio-wc-cart-block .rodio-btn-add-cart { display: inline-flex !important; align-items: center !important; gap: 0.375rem !important; padding: 0.375rem 0.6rem !important; background: var(--rodio-teal) !important; color: #fff !important; font-size: 0.75rem !important; font-weight: 600 !important; border-radius: var(--rodio-radius) !important; text-decoration: none !important; border: none !important; border-bottom: none !important; transition: background var(--rodio-transition) !important; white-space: nowrap; line-height: 1 !important; } .rodio-wc-cart-block .rodio-btn-add-cart:hover { background: var(--rodio-teal-dk) !important; color: #fff !important; text-decoration: none !important; border-bottom: none !important; } .rodio-wc-cart-block .rodio-btn-add-cart svg { width: 0.75rem !important; height: 0.75rem !important; flex-shrink: 0 !important; } /* =========================================================================== * 25. RESPONSIVE: secciones extra * ========================================================================== */ @media (max-width: 780px) { .rodio-wc-cart-block .rodio-saved-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .rodio-wc-cart-block .rodio-saved-grid { grid-template-columns: 1fr; } .rodio-wc-cart-block .rodio-rv-card { width: 11rem; } .rodio-wc-cart-block .rodio-rec-card { width: 11rem; } }