/* =========================================================== DEPORTES JIMMY — CARRITO FLOTANTE (v8.20) ----------------------------------------------------------- El círculo del carrito y el panel que se despliega. Antes esto vivía dentro de shop.css y solo se encendía en móvil; ahora es su propia hoja porque se usa en todo el sitio. Reglas de la casa: · Rojo de marca, sombra baja y ancha (parece que flota, no que está pegado con cinta). · No tapa nada importante: se aparta del botón de WhatsApp. · El panel entra desde abajo en móvil y desde la derecha en escritorio — que es de donde el ojo lo espera en cada uno. =========================================================== */ /* ----------------------------------------------------------- 1. EL BOTÓN ----------------------------------------------------------- */ .dj-cart-fab-wrap { position: fixed; right: 16px; bottom: 16px; z-index: 1000; } /* Carrito vacío: no hay nada que enseñar. Se va con una transición para que no dé un salto seco al vaciarlo. */ .dj-cart-fab-wrap.is-empty { opacity: 0; visibility: hidden; transform: scale(0.6) translateY(10px); pointer-events: none; } .dj-cart-fab-wrap.is-full { opacity: 1; visibility: visible; transform: none; } .dj-cart-fab-wrap { transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1), visibility .25s; } .dj-cart-fab { display: flex; align-items: center; justify-content: center; position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--dj-red, #FF0000); color: #fff; border: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .28), 0 2px 5px rgba(0, 0, 0, .18); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .18s ease, box-shadow .18s ease; } .dj-cart-fab:hover, .dj-cart-fab:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .34), 0 3px 7px rgba(0, 0, 0, .2); } .dj-cart-fab:active { transform: translateY(0) scale(.95); } .dj-cart-fab .dj-cart-count { position: absolute; top: -4px; right: -4px; background: var(--dj-black-soft, #111); color: #fff; font-size: .68rem; font-weight: 800; line-height: 1; min-width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); } /* Latido al agregar algo: dura un momento y se quita solo. Es el acuse de recibo — "sí, se metió en el carrito". */ @keyframes dj-fab-bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 65% { transform: scale(.95); } 100% { transform: scale(1); } } .dj-cart-fab.is-bump { animation: dj-fab-bump .5s ease; } /* El aviso corto que sale al lado al agregar ("Agregado") */ .dj-cart-fab__toast { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(8px); background: var(--dj-black-soft, #111); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; padding: 8px 13px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .dj-cart-fab__toast.is-on { opacity: 1; transform: translateY(-50%) translateX(0); } /* Enganche por si algún día se añade un botón de WhatsApp flotante (hoy el de WhatsApp vive en la cabecera): con la clase en el , el carrito se sube y no se montan. */ body.has-dj-wa-float .dj-cart-fab-wrap { bottom: 84px; } /* ----------------------------------------------------------- 2. EL PANEL ----------------------------------------------------------- */ .dj-shop-cart-drawer { position: fixed; left: 0; right: 0; bottom: 0; max-height: 80vh; background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .22); z-index: 1002; transform: translateY(100%); transition: transform .32s cubic-bezier(.22, .61, .36, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; } .dj-shop-cart-drawer.is-open { transform: translateY(0); } .dj-shop-cart-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(0, 0, 0, .08); position: sticky; top: 0; background: #fff; z-index: 2; } .dj-shop-cart-drawer__header h3 { font-family: var(--dj-font-display); text-transform: uppercase; margin: 0; font-size: 1.1rem; letter-spacing: .01em; } .dj-shop-cart-drawer__close { background: none; border: none; font-size: 1.9rem; line-height: 1; cursor: pointer; color: var(--dj-black-soft, #111); padding: 0 4px; } .dj-shop-cart-drawer__close:hover { color: var(--dj-red, #FF0000); } .dj-shop-cart-drawer__body { padding: 16px 20px 26px; } .dj-shop-cart-drawer .dj-mini-cart { background: transparent; padding: 0; } .dj-shop-cart-drawer .dj-mini-cart__title { display: none; } .dj-shop-cart-drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1001; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; } .dj-shop-cart-drawer-overlay.is-open { opacity: 1; visibility: visible; } /* Con el panel abierto, la página de detrás no se mueve. */ body.dj-drawer-open { overflow: hidden; } /* ----------------------------------------------------------- 3. ESCRITORIO — el panel entra por la derecha ----------------------------------------------------------- */ @media (min-width: 1025px) { .dj-cart-fab-wrap { right: 24px; bottom: 24px; } .dj-cart-fab { width: 60px; height: 60px; } .dj-shop-cart-drawer { left: auto; top: 0; bottom: 0; width: 400px; max-width: 92vw; max-height: none; border-radius: 0; transform: translateX(100%); box-shadow: -10px 0 30px rgba(0, 0, 0, .18); display: flex; flex-direction: column; } .dj-shop-cart-drawer.is-open { transform: translateX(0); } .dj-shop-cart-drawer__body { flex: 1; overflow-y: auto; } } /* ----------------------------------------------------------- v9.9.15 — QUE ABRIR EL CARRITO NO EMBORRONE LA CABECERA (iOS) ----------------------------------------------------------- `will-change` no es adorno aquí: le dice a Safari que cree la capa del panel ANTES de animarlo. Cuando la capa se crea en el momento del gesto, el iPhone rehace también las capas de alrededor —la cabecera pegajosa entre ellas— y a veces las rasteriza a menor resolución: eso es el logo "borroso como con desenfoque gaussiano". `overscroll-behavior: contain` corta el otro efecto raro del iPhone: al llegar al final de la lista del carrito, el gesto se contagiaba a la página de detrás y todo daba un tirón. ----------------------------------------------------------- */ .dj-shop-cart-drawer { will-change: transform; overscroll-behavior: contain; } .dj-shop-cart-drawer-overlay { will-change: opacity; }