/* ============================================================ EIA CART — [eia_cart] shortcode styles ============================================================ */ /* ── Trigger ── */ .eia-cart-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: inherit; text-decoration: none; cursor: pointer; flex-shrink: 0; } .eia-cart-icon { display: block; flex-shrink: 0; } .eia-cart-count { position: absolute; top: 0; right: 0; min-width: 20px; height: 20px; padding: 0 5px; background: #e53e3e; color: #fff; font-size: 11px; font-weight: 700; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 20px; text-align: center; border-radius: 10px; transition: transform .2s ease, opacity .2s ease; pointer-events: none; user-select: none; } .eia-cart-count.is-empty { opacity: 0; transform: scale(0); pointer-events: none; } /* ── Overlay ── */ /* El overlay y el drawer se teleportan al via JS para que position:fixed siempre sea relativo al viewport, incluso cuando el shortcode está dentro de un header con transform/filter/will-change. */ .eia-cart-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100vh; background: rgba(0, 0, 0, .45); z-index: 99998; opacity: 0; transition: opacity .3s ease; } .eia-cart-overlay.is-visible { display: block; } .eia-cart-overlay.is-open { opacity: 1; } /* ── Drawer ── */ .eia-cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; height: 100vh; width: min(380px, 92vw); background: #fff; z-index: 99999; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); box-shadow: -4px 0 32px rgba(0, 0, 0, .14); } .eia-cart-drawer.is-open { transform: translateX(0); } /* Compensar admin bar */ .admin-bar .eia-cart-drawer { top: 32px; } @media (max-width: 782px) { .admin-bar .eia-cart-drawer { top: 46px; } } /* ── Drawer header ── */ .eia-cart-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; } .eia-cart-drawer__title { font-size: 1.05rem; font-weight: 600; color: #111827; margin: 0; } .eia-cart-drawer__close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: none; border: none; cursor: pointer; color: #6b7280; border-radius: 6px; transition: background .15s, color .15s; } .eia-cart-drawer__close:hover { background: #f3f4f6; color: #111827; } /* ── Drawer body — flex column, NO scroll propio ── */ .eia-cart-drawer__body { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 0; min-height: 0; } /* ── WooCommerce mini cart dentro del drawer ── */ .eia-cart-drawer__body .widget_shopping_cart_content { position: relative; /* necesario para que blockUI se posicione dentro del drawer */ display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; } .eia-cart-drawer__body .woocommerce-mini-cart { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 20px; margin: 0; list-style: none; min-height: 0; } /* Spinner de carga al eliminar producto (jQuery BlockUI) */ .eia-cart-drawer__body .blockOverlay { border-radius: 8px; background-color: rgba(255,255,255,.7) !important; } .eia-cart-drawer__body .blockMsg, .eia-cart-drawer__body .blockElement { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } .eia-cart-drawer__body .woocommerce-mini-cart__empty-message { text-align: center; padding: 40px 0; color: #9ca3af; font-size: .95rem; } /* * Carrito vacío duplicado con temas que enganchan 'woocommerce_after_mini_cart' * (ej. Astra): la plantilla core de WooCommerce siempre imprime su propio *

, y luego el hook del tema * agrega el suyo (con botón "seguir comprando") envuelto en su propio wrapper * (en Astra: .ast-mini-cart-empty). El tema normalmente oculta el mensaje * suelto con CSS propio, pero ese CSS está encapsulado a su contenedor nativo * del header — no al drawer de [eia_cart], que es intencionalmente * independiente del tema. Ocultamos el mensaje suelto solo cuando detectamos * que el tema ya agregó su propio bloque enriquecido justo después. */ .eia-cart-drawer__body .woocommerce-mini-cart__empty-message:has(+ .ast-mini-cart-empty) { display: none; } /* Fila de producto Estructura real WooCommerce: li > a.remove_from_cart_button | a(img+nombre) | span.quantity */ .eia-cart-drawer__body .woocommerce-mini-cart-item { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 8px; padding: 14px 0; border-bottom: 1px solid #f0f0f0; align-items: start; } /* Botón eliminar → columna derecha, centrado verticalmente */ .eia-cart-drawer__body .woocommerce-mini-cart-item > .remove_from_cart_button { grid-column: 2; grid-row: 1 / 3; align-self: center; } /* Link de producto (imagen + nombre) → columna izquierda, fila 1 */ .eia-cart-drawer__body .woocommerce-mini-cart-item > a:not(.remove_from_cart_button) { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 10px; text-decoration: none; color: #222; font-size: .9rem; font-weight: 500; line-height: 1.3; } /* Imagen dentro del link */ .eia-cart-drawer__body .woocommerce-mini-cart-item > a:not(.remove_from_cart_button) img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; flex-shrink: 0; display: block; } /* Cantidad × precio → columna izquierda, fila 2, indentado bajo el nombre */ .eia-cart-drawer__body .woocommerce-mini-cart-item > .quantity { grid-column: 1; grid-row: 2; padding-left: 70px; /* 60px img + 10px gap */ font-size: .875rem; color: #555; margin-top: 4px; } /* Precio en naranja */ .eia-cart-drawer__body .woocommerce-Price-amount, .eia-cart-drawer__body .woocommerce-Price-amount bdi { color: #e67e22; font-weight: 600; } /* Botón eliminar producto */ .eia-cart-drawer__body .remove_from_cart_button { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #d1d5db; color: #9ca3af; font-size: 14px; line-height: 1; text-decoration: none; transition: border-color .15s, color .15s, background .15s; flex-shrink: 0; } .eia-cart-drawer__body .remove_from_cart_button:hover { border-color: #e53e3e; color: #e53e3e; background: #fff5f5; } /* Subtotal — siempre visible, no hace scroll */ .eia-cart-drawer__body .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 12px; font-size: 1rem; font-weight: 600; color: #111; border-top: 1px solid #e5e7eb; margin-top: 0; flex-shrink: 0; } /* Botones de acción — siempre visibles, no hacen scroll */ .eia-cart-drawer__body .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 16px; flex-shrink: 0; } .eia-cart-drawer__body .woocommerce-mini-cart__buttons a { display: block; text-align: center; padding: 12px 16px; border-radius: 6px; font-weight: 600; font-size: .95rem; text-decoration: none; transition: opacity .15s; } /* Ambos botones en verde — igual al screenshot */ .eia-cart-drawer__body .woocommerce-mini-cart__buttons .button { background: #27ae60; color: #fff !important; border: none; } .eia-cart-drawer__body .woocommerce-mini-cart__buttons .checkout { background: #27ae60; color: #fff !important; } .eia-cart-drawer__body .woocommerce-mini-cart__buttons a:hover { background: #219a52; opacity: 1; }