/** * Lumik Cart — Drawer side-cart * * Drawer que se desliza desde la derecha. Vive a nivel `` para * evitar problemas de stacking context con el header. * * Las clases CSS conservan el prefijo `zenth-cart-*` para alinearse * con la convención del Zenth Search Modal. * * @version 2.0.0 */ /* ============================================================ VARIABLES ============================================================ */ .zenth-cart-root { --zenth-cart-bg: #ffffff; --zenth-cart-text: #1a1a1a; --zenth-cart-text-muted: rgba(26, 26, 26, 0.55); /* Color de acento — sobrescribir desde el child theme */ --zenth-cart-accent: #2271b1; --zenth-cart-accent-on: #ffffff; --zenth-cart-overlay: rgba(0, 0, 0, 0.55); --zenth-cart-border: rgba(0, 0, 0, 0.08); --zenth-cart-hover: rgba(0, 0, 0, 0.04); --zenth-cart-error-bg: #b91c1c; --zenth-cart-error-fg: #ffffff; --zenth-cart-shadow: -16px 0 40px rgba(0, 0, 0, 0.15); --zenth-cart-radius: 12px; --zenth-cart-radius-sm: 8px; --zenth-cart-width: 420px; --zenth-cart-z: 999996; --zenth-cart-speed: 280ms; --zenth-cart-ease: cubic-bezier(0.32, 0.72, 0, 1); --zenth-cart-speed-close: 220ms; } /* ============================================================ ROOT (full viewport, fixed) ============================================================ */ .zenth-cart-root { position: fixed; inset: 0; z-index: var(--zenth-cart-z); pointer-events: none; visibility: hidden; transition: visibility 0s linear var(--zenth-cart-speed-close); font-family: inherit; color: var(--zenth-cart-text); } .zenth-cart-root.is-open { pointer-events: auto; visibility: visible; transition: visibility 0s linear 0s; } body.zenth-cart-body-lock { overflow: hidden; } /* ============================================================ OVERLAY ============================================================ */ .zenth-cart-overlay { position: absolute; inset: 0; background: var(--zenth-cart-overlay); opacity: 0; transition: opacity var(--zenth-cart-speed) var(--zenth-cart-ease); cursor: pointer; } .zenth-cart-root.is-open .zenth-cart-overlay { opacity: 1; } /* ============================================================ DRAWER ============================================================ */ .zenth-cart-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: var(--zenth-cart-width); max-width: 100vw; background: var(--zenth-cart-bg); box-shadow: var(--zenth-cart-shadow); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--zenth-cart-speed) var(--zenth-cart-ease); will-change: transform; } .zenth-cart-root.is-open .zenth-cart-drawer { transform: translateX(0); } /* ============================================================ HEADER ============================================================ */ .zenth-cart-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--zenth-cart-border); flex-shrink: 0; } .zenth-cart-drawer__title { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--zenth-cart-text); } .zenth-cart-drawer__close { display: inline-flex; align-items: center; background: transparent; border: 0; margin: 0; padding: 0.25rem 0.5rem; cursor: pointer; color: var(--zenth-cart-text-muted); transition: color 0.15s ease; } .zenth-cart-drawer__close:hover, .zenth-cart-drawer__close:focus-visible { color: var(--zenth-cart-text); } .zenth-cart-drawer__esc { font-family: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; padding: 0.25rem 0.5rem; border: 1px solid var(--zenth-cart-border); border-radius: var(--zenth-cart-radius-sm); background: var(--zenth-cart-bg); color: inherit; } /* ============================================================ BODY ============================================================ */ .zenth-cart-drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0; } /* ============================================================ ITEMS LIST ============================================================ */ .zenth-cart-items { list-style: none; margin: 0; padding: 0; } .zenth-cart-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.5rem; border-bottom: 1px solid var(--zenth-cart-border); transition: background-color 0.15s ease, opacity 0.2s ease, transform 0.2s ease; } .zenth-cart-item.is-removing { opacity: 0.4; transform: translateX(8px); pointer-events: none; } .zenth-cart-item.is-updating { opacity: 0.6; pointer-events: none; } .zenth-cart-item.is-updating .zenth-cart-item__qty-controls { animation: zenth-cart-pulse 1.2s ease-in-out infinite; } @keyframes zenth-cart-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Thumbnail */ .zenth-cart-item__thumb { display: block; width: 72px; height: 72px; border-radius: var(--zenth-cart-radius-sm); overflow: hidden; background: var(--zenth-cart-hover); flex-shrink: 0; } .zenth-cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .zenth-cart-item__thumb--placeholder { display: block; } /* Info */ .zenth-cart-item__info { min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; } .zenth-cart-item__title { font-size: 0.95rem; font-weight: 500; color: var(--zenth-cart-text); text-decoration: none; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .zenth-cart-item__title:hover { color: var(--zenth-cart-accent); } /* Variation data + custom meta (incluye "Mensaje para la tarjeta") */ .zenth-cart-item__meta { font-size: 0.8rem; line-height: 1.4; color: var(--zenth-cart-text-muted); } .zenth-cart-item__meta dl, .zenth-cart-item__meta .variation { margin: 0; padding: 0; } .zenth-cart-item__meta dt, .zenth-cart-item__meta .variation dt { display: inline; font-weight: 600; color: var(--zenth-cart-text); margin: 0; } .zenth-cart-item__meta dt::after { content: ': '; } .zenth-cart-item__meta dd, .zenth-cart-item__meta .variation dd { display: inline; margin: 0 0 0 0.15rem; } .zenth-cart-item__meta dd p { display: inline; margin: 0; } /* Bottom row: qty controls + price alineados */ .zenth-cart-item__bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.25rem; } /* Quantity controls */ .zenth-cart-item__qty-controls { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--zenth-cart-border); border-radius: var(--zenth-cart-radius-sm); overflow: hidden; } .zenth-cart-item__qty-btn { width: 28px; height: 28px; background: transparent; border: 0; margin: 0; padding: 0; font-size: 1rem; font-weight: 600; line-height: 1; color: var(--zenth-cart-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.15s ease; } .zenth-cart-item__qty-btn:hover:not(:disabled) { background: var(--zenth-cart-hover); } .zenth-cart-item__qty-btn:disabled { opacity: 0.5; cursor: not-allowed; } .zenth-cart-item__qty-value { min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 600; color: var(--zenth-cart-text); border-left: 1px solid var(--zenth-cart-border); border-right: 1px solid var(--zenth-cart-border); padding: 0 0.25rem; } /* Price */ .zenth-cart-item__price { font-size: 0.9rem; font-weight: 600; color: var(--zenth-cart-text); white-space: nowrap; } .zenth-cart-item__price .woocommerce-Price-amount { font-weight: 600; } /* Remove button */ .zenth-cart-item__remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: transparent; border: 0; margin: 0; padding: 0; color: var(--zenth-cart-text-muted); cursor: pointer; border-radius: 50%; transition: color 0.15s ease, background-color 0.15s ease; } .zenth-cart-item__remove:hover:not(:disabled), .zenth-cart-item__remove:focus-visible { color: var(--zenth-cart-text); background: var(--zenth-cart-hover); } .zenth-cart-item__remove svg { width: 18px; height: 18px; } .zenth-cart-item__remove:disabled { cursor: wait; opacity: 0.5; } /* ============================================================ EMPTY STATE ============================================================ */ .zenth-cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 3rem 1.5rem; text-align: center; min-height: 100%; } .zenth-cart-empty__icon { color: var(--zenth-cart-text-muted); opacity: 0.5; } .zenth-cart-empty__text { margin: 0; font-size: 1rem; color: var(--zenth-cart-text-muted); } .zenth-cart-empty__cta { background: var(--zenth-cart-accent); color: var(--zenth-cart-accent-on); border: 0; padding: 0.75rem 1.5rem; border-radius: var(--zenth-cart-radius-sm); font-size: 0.9rem; font-weight: 600; cursor: pointer; margin-top: 0.5rem; transition: opacity 0.15s ease, transform 0.15s ease; } .zenth-cart-empty__cta:hover { opacity: 0.9; } .zenth-cart-empty__cta:active { transform: scale(0.98); } /* ============================================================ FOOTER ============================================================ */ .zenth-cart-drawer__footer { flex-shrink: 0; padding: 1.25rem 1.5rem; border-top: 1px solid var(--zenth-cart-border); background: var(--zenth-cart-bg); } .zenth-cart-drawer__body--empty ~ .zenth-cart-drawer__footer { display: none; } /* Free shipping progress */ .zenth-cart-drawer__shipping-wrap:empty { display: none; } .zenth-cart-shipping { padding: 0.75rem 1rem; background: var(--zenth-cart-hover); border-radius: var(--zenth-cart-radius-sm); margin-bottom: 1rem; font-size: 0.85rem; } .zenth-cart-shipping__text { margin: 0; color: var(--zenth-cart-text); line-height: 1.4; } .zenth-cart-shipping__bar { height: 4px; background: var(--zenth-cart-border); border-radius: 2px; overflow: hidden; margin-top: 0.6rem; } .zenth-cart-shipping__bar-fill { height: 100%; background: var(--zenth-cart-accent); border-radius: 2px; transition: width 0.4s ease; } .zenth-cart-shipping--unlocked { background: var(--zenth-cart-accent); color: var(--zenth-cart-accent-on); display: flex; align-items: center; gap: 0.5rem; } .zenth-cart-shipping--unlocked .zenth-cart-shipping__text { color: var(--zenth-cart-accent-on); font-weight: 600; margin: 0; } /* Subtotal */ .zenth-cart-drawer__subtotal { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; } .zenth-cart-drawer__subtotal-label { font-size: 0.95rem; font-weight: 500; color: var(--zenth-cart-text-muted); } .zenth-cart-drawer__subtotal-amount { font-size: 1.15rem; font-weight: 700; color: var(--zenth-cart-text); transition: transform 0.2s ease; display: inline-block; } .zenth-cart-drawer__subtotal-amount.is-updated { animation: zenth-cart-subtotal-pulse 0.6s ease-out; } @keyframes zenth-cart-subtotal-pulse { 0% { transform: scale(1); color: var(--zenth-cart-text); } 40% { transform: scale(1.1); color: var(--zenth-cart-accent); } 100% { transform: scale(1); color: var(--zenth-cart-text); } } /* CTA buttons */ .zenth-cart-drawer__buttons { display: flex; flex-direction: column; gap: 0.5rem; } .zenth-cart-drawer__btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 1rem; border-radius: var(--zenth-cart-radius-sm); font-size: 0.95rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease; border: 1px solid transparent; } .zenth-cart-drawer__btn:active { transform: scale(0.99); } .zenth-cart-drawer__btn--secondary { background: transparent; color: var(--zenth-cart-text); border-color: var(--zenth-cart-border); } .zenth-cart-drawer__btn--secondary:hover { background: var(--zenth-cart-hover); color: var(--zenth-cart-text); } .zenth-cart-drawer__btn--primary { background: var(--zenth-cart-accent); color: var(--zenth-cart-accent-on); } .zenth-cart-drawer__btn--primary:hover { opacity: 0.92; color: var(--zenth-cart-accent-on); } /* ============================================================ LIVE REGION (visualmente oculto, accesible para SR) ============================================================ */ .zenth-cart-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ TOAST DE ERROR ============================================================ */ .zenth-cart-toast { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: 0.85rem 1rem; background: var(--zenth-cart-error-bg); color: var(--zenth-cart-error-fg); border-radius: var(--zenth-cart-radius-sm); font-size: 0.9rem; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; z-index: 2; } .zenth-cart-toast.is-visible { opacity: 1; transform: translateY(0); } /* ============================================================ FOCUS INDICATORS (a11y) ============================================================ */ .zenth-cart-drawer button:focus-visible, .zenth-cart-drawer a:focus-visible { outline: 2px solid var(--zenth-cart-accent); outline-offset: 2px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 480px) { .zenth-cart-root { --zenth-cart-width: 100vw; } .zenth-cart-drawer__header, .zenth-cart-item, .zenth-cart-drawer__footer { padding-left: 1.25rem; padding-right: 1.25rem; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .zenth-cart-drawer, .zenth-cart-overlay, .zenth-cart-item, .zenth-cart-item__remove, .zenth-cart-item__qty-btn, .zenth-cart-empty__cta, .zenth-cart-drawer__btn, .zenth-cart-drawer__close, .zenth-cart-drawer__subtotal-amount, .zenth-cart-shipping__bar-fill, .zenth-cart-toast { transition-duration: 0.01ms !important; animation: none !important; } }