/* Panel «Agregaste al carrito» (addons 1.1.418; 1.1.421 tarjetas compartidas). Celular: hoja inferior. Escritorio: modal. * Fuera de RUCSS por handle (WC_Orem_Reco_Panel::rocket_conservar_css): el HTML anónimo no trae * el contenido del panel. Toda regla que pone display lleva su guarda [hidden]. */ .orem-reco-panel[hidden], .orem-reco-panel [hidden] { display: none !important; } .orem-reco-panel { position: fixed; inset: 0; z-index: 2147482000; /* debajo del banner de consentimiento (2147483000) */ display: flex; align-items: flex-end; justify-content: center; background: rgba( 20, 10, 14, .45 ); font-family: inherit; color: #2b2b2b; } .orem-reco-panel__caja { position: relative; width: 100%; max-height: 88vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba( 0, 0, 0, .18 ); outline: none; animation: orem-rp-sube .22s ease-out; } .orem-reco-panel__cuerpo { overflow-y: auto; padding: 20px 16px 8px; } #orem-reco-panel .orem-reco-panel__cerrar { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; background: transparent; font-size: 26px; line-height: 1; color: #555; cursor: pointer; } /* Confirmación */ #orem-reco-panel .orp-conf { display: flex; gap: 12px; align-items: center; padding-right: 36px; } #orem-reco-panel .orp-conf__img img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; } #orem-reco-panel .orp-conf__titulo { margin: 0 0 2px; font-weight: 700; font-size: 16px; color: var( --orem-burgundy, #6b1d33 ); } #orem-reco-panel .orp-check { display: inline-block; margin-right: 2px; } #orem-reco-panel .orp-conf__nombre { margin: 0; font-size: 14px; line-height: 1.35; } /* «¿Lo personalizamos?» de lo que acaba de agregar: lo primero después de la confirmación (no en el carrito lateral). Campo y botón de 44 px de alto y texto de 16 px (iOS no hace zoom); en celular, botón debajo del campo a todo lo ancho. */ #orem-reco-panel .orc-caja.orp-perso { margin: 14px 0 0; padding: 12px 14px 12px; background: #fff7f9; border: 1.5px solid #f1b7c7; border-radius: 12px; } #orem-reco-panel .orp-perso .orc-perso { margin: 0; padding: 0; border: 0; } #orem-reco-panel .orp-perso .orc-perso__q { margin: 0 0 8px; font-size: 14px; font-weight: 600; line-height: 1.3; color: #4c1520; } #orem-reco-panel .orp-perso .orc-perso__fila { flex-direction: row; gap: 8px; align-items: stretch; } #orem-reco-panel .orp-perso .orc-perso__fila input[type="text"] { height: 44px; padding: 0 16px; font-size: 16px; letter-spacing: .04em; } #orem-reco-panel .orp-perso .orc-perso__fila input[type="text"] { flex: 1 1 auto; width: auto; } #orem-reco-panel .orp-perso .orc-perso__ok { flex: 0 0 auto; width: auto; min-height: 44px; padding: 0 18px; font-size: 14px; white-space: nowrap; } #orem-reco-panel .orp-perso .orc-perso__nota { margin: 6px 0 0; font-size: 12px; } #orem-reco-panel .orp-perso .orc-perso-listo { margin: 0; font-size: 14px; } #orem-reco-panel .orp-perso .orc-error { font-size: 12.5px; } @media (max-width: 520px) { #orem-reco-panel .orp-perso .orc-perso__fila { flex-direction: column; } #orem-reco-panel .orp-perso .orc-perso__fila input[type="text"], #orem-reco-panel .orp-perso .orc-perso__ok { flex: 0 0 auto; width: 100%; } } /* Complementos: tarjetas compartidas (reco-tarjetas.css). Aquí solo su lugar en el panel. */ #orem-reco-panel .orc-caja { margin: 16px 0 4px; } /* Pie */ .orem-reco-panel__pie { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px calc( 12px + env( safe-area-inset-bottom, 0px ) ); border-top: 1px solid var( --orem-champagne, #e8d8c5 ); } #orem-reco-panel .orem-reco-panel__seguir, #orem-reco-panel .orem-reco-panel__pagar { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; } #orem-reco-panel .orem-reco-panel__seguir { border: 1.5px solid var( --orem-burgundy, #6b1d33 ); background: #fff; color: var( --orem-burgundy, #6b1d33 ); } #orem-reco-panel .orem-reco-panel__pagar { border: 1.5px solid var( --orem-burgundy, #6b1d33 ); background: var( --orem-burgundy, #6b1d33 ); color: #fff; } #orem-reco-panel .orem-reco-panel__pagar:hover, #orem-reco-panel .orem-reco-panel__pagar:focus { color: #fff; } /* Escritorio: modal centrado; complementos en dos filas de tres (tarjeta vertical). */ @media ( min-width: 768px ) { .orem-reco-panel { align-items: center; padding: 24px; } .orem-reco-panel__caja { max-width: 720px; border-radius: 16px; animation-name: orem-rp-aparece; } .orem-reco-panel__cuerpo { padding: 24px 24px 8px; } .orem-reco-panel__pie { padding: 16px 24px 20px; } /* Filas de 3 (de 4 si son 4) del mismo alto; la última fila, centrada. Dentro de cada tarjeta, la frase y * el nombre reservan dos renglones y el botón va abajo: precios y botones quedan alineados. */ #orem-reco-panel .orc-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } #orem-reco-panel .orc-lista > .orc-card { flex: 0 0 calc( ( 100% - 20px ) / 3 ); } #orem-reco-panel .orc-lista[data-n="4"] > .orc-card { flex-basis: calc( ( 100% - 30px ) / 4 ); } #orem-reco-panel .orc-card { display: flex; flex-direction: column; margin: 0; } #orem-reco-panel .orc-fila { display: flex; flex-direction: column; align-items: stretch; gap: 6px; flex: 1 1 auto; } #orem-reco-panel .orc-img img { width: 100%; height: auto; aspect-ratio: 4 / 3; } #orem-reco-panel .orc-info { display: flex; flex-direction: column; flex: 1 1 auto; } #orem-reco-panel .orc-frase, #orem-reco-panel .orc-frase:empty { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; } #orem-reco-panel .orc-nombre { min-height: 2.5em; } #orem-reco-panel .orc-accion { margin-top: auto; text-align: left; } #orem-reco-panel .orc-btn { width: 100%; } #orem-reco-panel .orc-listo { align-items: stretch; width: 100%; text-align: center; } #orem-reco-panel .orc-perso__fila { flex-direction: column; } #orem-reco-panel .orc-lista.orc-lista--rejilla { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } } /* Mientras el panel está abierto: fuera la barra fija de compra y el botón de WhatsApp * (mismo patrón que la hoja de EE. UU., usa-modo.css). */ body.orem-reco-panel-abierto #cgkit-mobile-commercekit-sticky-atc, body.orem-reco-panel-abierto .commercekit_sticky-atc, body.orem-reco-panel-abierto .button-whatsapp { display: none !important; } @keyframes orem-rp-sube { from { transform: translateY( 24px ); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes orem-rp-aparece { from { transform: scale( .97 ); opacity: 0; } to { transform: none; opacity: 1; } } @media ( prefers-reduced-motion: reduce ) { .orem-reco-panel__caja { animation: none; } } /* El tema pinta todo