/* ============================================================ * OREM 2026 — Flyout de "Mi cuenta". * Desktop (≥993px): panel anclado al ícono, abre con hover-intent. * Móvil (<993px): bottom-sheet. * El panel se monta en y se posiciona por JS (position:fixed) * para no ser recortado por overflow/transform del header. * Usa los tokens globales #orem-brand-tokens (con fallback). * ============================================================ */ .orem-acct-panel { position: fixed; z-index: 100000; width: 300px; max-width: calc(100vw - 24px); background: #fff; color: var(--orem-ink, #2B2B2B); font-family: "Prompt", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; border: 1px solid var(--orem-champagne, #E8D8C5); border-radius: 12px; box-shadow: 0 14px 40px rgba(90, 20, 32, .18); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .18s ease, visibility .18s; } .orem-acct-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); } /* Caret (flecha) que ancla el panel al ícono de cuenta — patrón Amazon. * Es un elemento hermano montado en (NO dentro del panel, que tiene * overflow:hidden y lo recortaría). El JS lo centra bajo el ícono. Solo desktop. */ .orem-acct-caret { position: fixed; z-index: 100001; width: 14px; height: 14px; transform: rotate(45deg); background: #fff; border-top: 1px solid var(--orem-champagne, #E8D8C5); border-left: 1px solid var(--orem-champagne, #E8D8C5); opacity: 0; visibility: hidden; pointer-events: none; /* Sin transición: aparece junto con el panel. Una transición aquí se quedaba * "atascada" en el estado inicial (opacity:0) al togglear is-open desde JS. */ } .orem-acct-caret.is-open { opacity: 1; visibility: visible; } /* Logueado: la cima del panel es el header burdeos → el caret va burdeos. */ .orem-acct-caret.is-auth { background: var(--orem-burgundy, #5A1420); border-color: var(--orem-burgundy, #5A1420); } /* ============================================================ * Trigger del header: ícono + "Hola, " + chevron. * Convierte el ícono suelto en un menú que se LEE como desplegable. * Solo lo tocamos cuando el JS marca el link con .orem-acct-enhanced, * para no alterar links de cuenta que el tema use en otros lados. * ============================================================ */ .shoptimizer-myaccount > a.orem-acct-enhanced { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .orem-acct-trigger-label { font-family: "Prompt", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13.5px; font-weight: 500; line-height: 1; color: currentColor; } .orem-acct-chevron { width: 12px; height: 12px; flex: 0 0 12px; align-self: center; } /* El tema fuerza los del header a 24px de ALTO (para el ícono de persona), * lo que estiraba el chevron a 12×24 (flecha deformada, se veía desalineado). * Ganamos por especificidad + !important para dejarlo cuadrado 12×12. */ .shoptimizer-myaccount a svg.orem-acct-chevron { width: 12px !important; height: 12px !important; } /* Rota hacia arriba cuando el flyout está abierto (instantáneo: una transición * aquí se quedaba atascada al togglear aria-expanded, igual que en el caret). */ .shoptimizer-myaccount > a[aria-expanded="true"] .orem-acct-chevron { transform: rotate(180deg); } /* Desktop estrecho: conserva el chevron (señal de menú), oculta el nombre. */ @media (min-width: 993px) and (max-width: 1200px) { .orem-acct-trigger-label { display: none; } } /* Tablet/móvil: vuelve a ser solo ícono (el toque abre el bottom-sheet). */ @media (max-width: 992px) { .orem-acct-trigger-label, .orem-acct-chevron { display: none; } } .orem-acct-backdrop { position: fixed; inset: 0; z-index: 99999; background: rgba(43, 27, 30, .38); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; } .orem-acct-backdrop.is-open { opacity: 1; visibility: visible; } /* --- Encabezado (logueado) --- */ .orem-acct-head { display: block; text-decoration: none; background: var(--orem-burgundy, #5A1420); color: var(--orem-pearl, #FAF8F5); padding: 15px 16px; } .orem-acct-head:hover { background: var(--orem-burgundy-hover, #74182E); } .orem-acct-head:focus-visible { outline: 2px solid var(--orem-butter, #F3DA9E); outline-offset: -2px; } .orem-acct-hello { display: block; font-size: 15px; font-weight: 600; color: var(--orem-pearl, #FAF8F5); line-height: 1.25; } .orem-acct-pts { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--orem-butter, #F3DA9E); } .orem-acct-pts svg { flex: 0 0 15px; } .orem-acct-pts svg { width: 15px; height: 15px; } /* --- Grupos --- */ .orem-acct-groups { padding: 8px 6px; } .orem-acct-group + .orem-acct-group { border-top: 1px solid var(--orem-champagne, #E8D8C5); margin-top: 4px; padding-top: 4px; } .orem-acct-glabel { font-size: 11px; color: #9a8f86; padding: 6px 10px 3px; } .orem-acct-item { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 8px; color: var(--orem-ink, #2B2B2B); font-size: 13.5px; text-decoration: none; } .orem-acct-item svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--orem-burgundy, #5A1420); } .orem-acct-item .orem-acct-meta { margin-left: auto; font-size: 11px; color: #9a8f86; } .orem-acct-item:hover { background: var(--orem-silk, #F3E3D8); } .orem-acct-item:focus-visible { background: var(--orem-silk, #F3E3D8); outline: none; box-shadow: inset 0 0 0 2px var(--orem-burgundy, #5A1420); } /* --- Pie --- */ .orem-acct-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--orem-champagne, #E8D8C5); } .orem-acct-foot-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--orem-ink, #2B2B2B); text-decoration: none; } .orem-acct-foot-link svg { width: 16px; height: 16px; } .orem-acct-foot-link.is-wa { color: #1f7a44; } .orem-acct-foot-link:hover { text-decoration: underline; } /* --- Invitado (sin sesión) --- */ .orem-acct-guest { padding: 16px; } .orem-acct-btn { display: block; width: 100%; text-align: center; background: var(--orem-burgundy, #5A1420); color: var(--orem-pearl, #FAF8F5); border: 0; border-radius: 999px; padding: 12px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; } .orem-acct-btn:hover { background: var(--orem-burgundy-hover, #74182E); } .orem-acct-btn.is-secondary { background: transparent; color: var(--orem-burgundy, #5A1420); box-shadow: inset 0 0 0 2px var(--orem-burgundy, #5A1420); margin-top: 10px; } .orem-acct-btn.is-secondary:hover { background: var(--orem-champagne, #E8D8C5); } .orem-acct-hook { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--orem-champagne, #E8D8C5); font-size: 12.5px; color: var(--orem-ink, #2B2B2B); text-decoration: none; } .orem-acct-hook svg { width: 16px; height: 16px; color: var(--orem-burgundy, #5A1420); } /* handle + botón cerrar: solo visibles en modo sheet */ .orem-acct-handle { display: none; } .orem-acct-close { display: none; } /* ===== Bottom-sheet ===== * Se activa por la clase .is-sheet que pone el JS (según matchMedia), NO por * media query: así JS y CSS nunca discrepan (ej. touch-laptop hover:none + ancho). */ .orem-acct-panel.is-sheet { left: 0; right: 0; bottom: 0; top: auto !important; width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; transform: translateY(100%); transition: transform .26s cubic-bezier(.22, 1, .36, 1), visibility .26s; } .orem-acct-panel.is-sheet.is-open { transform: translateY(0); } .orem-acct-panel.is-sheet .orem-acct-handle { display: block; width: 38px; height: 4px; background: var(--orem-champagne, #E8D8C5); border-radius: 99px; margin: 9px auto 3px; } .orem-acct-panel.is-sheet .orem-acct-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 9px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--orem-champagne, #E8D8C5); color: var(--orem-burgundy, #5A1420); cursor: pointer; z-index: 1; } .orem-acct-panel.is-sheet .orem-acct-close svg { width: 18px; height: 18px; } .orem-acct-panel.is-sheet .orem-acct-item { padding: 12px 10px; font-size: 14.5px; }