/** * Rockbros — Carrito lateral (drawer) * ============================================================================ * Depende de header-redesign.css solo por los tokens (--rb-border, --rb-font, * --rb-text-muted). El markup lo genera inc/carrito/rb-cart.php. * * APILAMIENTO: el drawer se imprime en wp_footer, a nivel de , así que NO * queda atrapado por el stacking context de .rb-header (sticky, z-index 100). * El z-index alto es para ganarle a la burbuja de WhatsApp (joinchat) y a la * hoja del buscador (100000/100001), no al header. * ========================================================================== */ .rb-cart-drawer__overlay { position: fixed; inset: 0; z-index: 100020; background: rgba( 0, 0, 0, .45 ); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } body.rb-cart-open .rb-cart-drawer__overlay { opacity: 1; visibility: visible; } .rb-cart-drawer { position: fixed; top: 0; right: 0; z-index: 100021; display: flex; flex-direction: column; width: min( 420px, 100vw ); height: 100%; background: #fff; font-family: var( --rb-font, "Barlow", sans-serif ); box-shadow: -4px 0 24px rgba( 0, 0, 0, .12 ); transform: translateX( 100% ); transition: transform .28s cubic-bezier( .4, 0, .2, 1 ); will-change: transform; } body.rb-cart-open .rb-cart-drawer { transform: translateX( 0 ); } /* Se respeta la preferencia del sistema: sin deslizamiento, solo aparece. */ @media ( prefers-reduced-motion: reduce ) { .rb-cart-drawer, .rb-cart-drawer__overlay { transition: none; } } .rb-cart-drawer__inner { display: flex; flex-direction: column; height: 100%; min-height: 0; /* deja que el scroll viva en la lista, no en el panel */ } /* Aviso efímero dentro del drawer (ej. "Solo quedan X"). Va FUERA de __inner (que se reemplaza en cada reconciliación) → como hijo directo de .rb-cart-drawer. */ .rb-cart-aviso { position: absolute; top: 74px; left: 16px; right: 16px; z-index: 5; padding: 10px 14px; border-radius: 8px; background: var( --rb-black, #1A1A1A ); color: #fff; font-size: 13px; line-height: 1.35; text-align: center; box-shadow: 0 6px 18px rgba( 0, 0, 0, .22 ); opacity: 0; transform: translateY( -8px ); pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .rb-cart-aviso.is-visible { opacity: 1; transform: translateY( 0 ); } /* Error bajo el botón "Añadir al carrito" de la ficha (stock insuficiente). Esta hoja se carga site-wide, así que el estilo está disponible en la ficha. */ .rb-add-error { margin: 10px 0 0; padding: 9px 12px; border-radius: 6px; background: #FDECEC; color: #B3261E; font-size: 13px; line-height: 1.35; } @media ( prefers-reduced-motion: reduce ) { .rb-cart-aviso { transition: none; } } .rb-cart-drawer.is-cargando { cursor: progress; } .rb-cart-drawer.is-cargando .rb-cart-lista { opacity: .55; pointer-events: none; } /* ========================================================================== Cabecera ========================================================================== */ .rb-cart-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; padding: 18px 20px; border-bottom: 1px solid var( --rb-border, #E6E6E6 ); } .rb-cart-drawer__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var( --rb-black, #1A1A1A ); } .rb-cart-drawer__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var( --rb-black, #1A1A1A ); color: #fff; font-size: 12px; font-weight: 600; } .rb-cart-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var( --rb-black, #1A1A1A ); cursor: pointer; } /* Astra pinta `button:hover` de verde con especificidad (0,1,1); hay que igualarla o el ícono de cerrar se pone verde con texto blanco. */ .rb-cart-drawer__close:hover, .rb-cart-drawer__close:focus, .rb-cart-drawer__close:active { background: #F2F2F2; color: var( --rb-black, #1A1A1A ); } /* ========================================================================== Barra de envío gratis ========================================================================== */ .rb-cart-envio { flex: 0 0 auto; padding: 14px 20px; border-bottom: 1px solid var( --rb-border, #E6E6E6 ); background: #FAFAFA; } .rb-cart-envio__texto { margin: 0 0 8px; font-size: 13px; line-height: 1.35; color: var( --rb-black, #1A1A1A ); } .rb-cart-envio__track { height: 6px; border-radius: 3px; background: #E4E4E4; overflow: hidden; } .rb-cart-envio__fill { display: block; height: 100%; border-radius: 3px; background: var( --rb-green-price, #40A234 ); transition: width .3s ease; } .rb-cart-envio.is-complete .rb-cart-envio__texto { font-weight: 600; color: var( --rb-green-price, #40A234 ); } /* ========================================================================== Lista de productos (única zona con scroll) ========================================================================== */ .rb-cart-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0; padding: 0; list-style: none; } .rb-cart-item { display: flex; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #F0F0F0; } .rb-cart-item.is-cargando { opacity: .5; } /* Colapso al eliminar (UI optimista): la fila se va de la vista al instante, sin esperar los ~850 ms del servidor. El alto lo fija el JS antes de animar. */ .rb-cart-item--saliendo { overflow: hidden; opacity: 0; padding-top: 0; padding-bottom: 0; border-bottom-color: transparent; transition: height .2s ease, opacity .16s ease, padding .2s ease; } @media ( prefers-reduced-motion: reduce ) { .rb-cart-item--saliendo { transition: none; } } .rb-cart-item__foto { flex: 0 0 78px; width: 78px; } .rb-cart-item__foto img { display: block; width: 100%; height: auto; /* Reserva de espacio: sin esto la lista salta al cargar las miniaturas. */ aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; background: #F6F6F6; } .rb-cart-item__datos { flex: 1 1 auto; min-width: 0; } .rb-cart-item__nombre { margin: 0 0 4px; font-size: 14px; line-height: 1.3; font-weight: 500; } .rb-cart-item__nombre a { color: var( --rb-black, #1A1A1A ); text-decoration: none; } .rb-cart-item__nombre a:hover { text-decoration: underline; } .rb-cart-item__meta { margin-bottom: 6px; font-size: 12px; color: var( --rb-text-muted, #6B6B6B ); } .rb-cart-item__meta p { margin: 0; } .rb-cart-item__fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; } .rb-cart-item__precio { font-size: 14px; font-weight: 700; color: var( --rb-black, #1A1A1A ); white-space: nowrap; } /* Stepper de cantidad */ .rb-cart-qty { display: inline-flex; align-items: center; border: 1px solid var( --rb-border, #E6E6E6 ); border-radius: 20px; overflow: hidden; } .rb-cart-qty__btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: var( --rb-black, #1A1A1A ); font-size: 16px; line-height: 1; cursor: pointer; } .rb-cart-qty__btn:hover, .rb-cart-qty__btn:focus, .rb-cart-qty__btn:active { background: #F2F2F2; color: var( --rb-black, #1A1A1A ); } .rb-cart-qty__valor { min-width: 26px; text-align: center; font-size: 14px; font-weight: 600; } .rb-cart-item__quitar { margin-top: 6px; padding: 0; border: 0; background: none; color: var( --rb-text-muted, #6B6B6B ); font-size: 12px; text-decoration: underline; cursor: pointer; } .rb-cart-item__quitar:hover, .rb-cart-item__quitar:focus { background: none; color: var( --rb-sale, #D0021B ); } /* ========================================================================== Pie: subtotal + acciones ========================================================================== */ .rb-cart-drawer__pie { flex: 0 0 auto; padding: 16px 20px calc( 16px + env( safe-area-inset-bottom ) ); border-top: 1px solid var( --rb-border, #E6E6E6 ); background: #fff; } .rb-cart-subtotal { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; font-size: 15px; } .rb-cart-subtotal strong { font-size: 19px; font-weight: 700; } .rb-cart-drawer__nota { margin: 0 0 12px; font-size: 12px; color: var( --rb-text-muted, #6B6B6B ); } .rb-cart-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 12px 18px; border-radius: 4px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; text-align: center; } .rb-cart-btn--primario { background: var( --rb-black, #1A1A1A ); color: #fff; } .rb-cart-btn--primario:hover, .rb-cart-btn--primario:focus { background: #333; color: #fff; } .rb-cart-btn--secundario { margin-top: 8px; background: none; color: var( --rb-black, #1A1A1A ); text-decoration: underline; min-height: 40px; text-transform: none; font-weight: 500; letter-spacing: 0; } .rb-cart-btn--secundario:hover, .rb-cart-btn--secundario:focus { color: var( --rb-text-muted, #6B6B6B ); } /* ========================================================================== Estado vacío ========================================================================== */ .rb-cart-drawer__vacio { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 32px 24px; text-align: center; color: var( --rb-text-muted, #6B6B6B ); } .rb-cart-drawer__vacio svg { color: #D8D8D8; } .rb-cart-drawer__vacio-titulo { margin: 8px 0 16px; font-size: 18px; font-weight: 600; color: var( --rb-black, #1A1A1A ); } .rb-cart-drawer__vacio .rb-cart-btn { max-width: 260px; } .rb-cart-drawer__vacio-cuenta { margin: 18px 0 0; font-size: 13px; line-height: 1.5; } .rb-cart-drawer__vacio-cuenta a { color: var( --rb-black, #1A1A1A ); text-decoration: underline; } /* ========================================================================== Móvil ========================================================================== */ @media ( max-width: 600px ) { .rb-cart-drawer { width: 100vw; } .rb-cart-drawer__head { padding: 14px 16px; } .rb-cart-item { padding: 14px 16px; } .rb-cart-envio { padding: 12px 16px; } .rb-cart-drawer__pie { padding: 14px 16px calc( 14px + env( safe-area-inset-bottom ) ); } .rb-cart-item__foto { flex-basis: 68px; width: 68px; } }