/* AN Marketplace — Power Tools Toolbar/rail/quick-look additions live inside .anmkt-market, so they inherit its real CSS custom properties directly — no duplication needed there. Only the fixed-position compare tray is appended to (to escape .anmkt-market's overflow:hidden, exactly the clipping issue noted for the Immersive Layer's companion orb), so that one gets its own local copy of the same token values. */ /* ---------- Toolbar: sort + region row ---------- */ .anpt-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; } .anpt-select { font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--ink-soft, #cfd6e0); background: var(--glass-2, rgba(255,255,255,.09)); border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 99px; padding: 8px 14px; cursor: pointer; outline: none; transition: border-color .2s ease, color .2s ease; } .anpt-select:hover, .anpt-select:focus-visible { color: var(--ink, #f4f7fb); border-color: rgba(255,255,255,.3); } .anpt-saved-toggle { font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--ink-soft, #cfd6e0); background: var(--glass-2, rgba(255,255,255,.09)); border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 99px; padding: 8px 14px; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; } .anpt-saved-toggle.is-active { background: linear-gradient(135deg, var(--cobalt, #5b8cff), var(--emerald, #34d399)); color: #06140f; border-color: transparent; } /* ---------- Card additions: wishlist heart + compare pill ---------- */ .anpt-heart { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; background: rgba(5,7,13,.55); border: 1px solid var(--line, rgba(255,255,255,.14)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink, #f4f7fb); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s ease, color .2s ease; } .anpt-heart:hover { transform: scale(1.08); } .anpt-heart.is-saved { color: #ff6b6b; } .anpt-heart.is-saved svg path { fill: currentColor; } .anpt-compare-btn { margin-top: 8px; width: 100%; font-family: inherit; font-size: .74rem; font-weight: 600; color: var(--ink-soft, #cfd6e0); background: var(--glass-2, rgba(255,255,255,.09)); border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 10px; padding: 7px; cursor: pointer; transition: color .2s ease, border-color .2s ease; } .anpt-compare-btn.is-added { color: var(--cobalt, #5b8cff); border-color: var(--cobalt, #5b8cff); } /* ---------- Recently viewed rail ---------- */ .anpt-recent { margin: 4px 0 22px; } .anpt-recent__label { margin: 0 0 8px; font-size: .78rem; font-weight: 600; color: var(--ink-faint, rgba(244,247,251,.4)); text-transform: uppercase; letter-spacing: .04em; } .anpt-recent__rail { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .anpt-recent__rail::-webkit-scrollbar { display: none; } /* ---------- Quick Look share row ---------- */ .anpt-share-row { display: flex; gap: 10px; margin-top: 12px; } .anpt-share-btn { flex: 1; font-family: inherit; font-size: .8rem; font-weight: 600; text-align: center; color: var(--ink, #f4f7fb); background: var(--glass-2, rgba(255,255,255,.09)); border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 10px; padding: 10px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: border-color .2s ease; } .anpt-share-btn:hover { border-color: rgba(255,255,255,.32); } .anpt-share-btn.anpt-copied { color: var(--emerald, #34d399); border-color: var(--emerald, #34d399); } /* ---------- Compare tray (fixed, appended to ) ---------- */ :root { --anpt-ink: #f4f7fb; --anpt-glass: rgba(20, 24, 34, .88); --anpt-line: rgba(255, 255, 255, .14); --anpt-cobalt: #5b8cff; --anpt-emerald: #34d399; --anpt-shadow: 0 24px 60px -20px rgba(0, 0, 0, .65); --anpt-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", sans-serif; } .anpt-tray { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 9997; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: var(--anpt-glass); border: 1px solid var(--anpt-line); border-radius: 99px; box-shadow: var(--anpt-shadow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-family: var(--anpt-font); color: var(--anpt-ink); } .anpt-tray[hidden] { display: none; } .anpt-tray__count { font-size: .84rem; font-weight: 600; } .anpt-tray__view { font-family: inherit; font-size: .82rem; font-weight: 700; color: #06140f; background: linear-gradient(135deg, var(--anpt-cobalt), var(--anpt-emerald)); border: none; border-radius: 99px; padding: 9px 18px; cursor: pointer; } .anpt-tray__clear { background: none; border: none; color: rgba(244,247,251,.5); font-size: 16px; cursor: pointer; padding: 4px; } /* ---------- Compare modal (fixed, appended to ) ---------- */ .anpt-modal-scrim { position: fixed; inset: 0; z-index: 9999; background: rgba(4,6,10,.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .anpt-modal-scrim.anpt-open { opacity: 1; pointer-events: auto; } .anpt-modal { width: 100%; max-width: 640px; max-height: 82vh; overflow-y: auto; background: var(--anpt-glass); border: 1px solid var(--anpt-line); border-radius: 20px; padding: 22px; font-family: var(--anpt-font); color: var(--anpt-ink); box-shadow: var(--anpt-shadow); transform: scale(.96); transition: transform .25s ease; } .anpt-modal-scrim.anpt-open .anpt-modal { transform: scale(1); } .anpt-modal h3 { margin: 0 0 14px; font-size: 1.1rem; } .anpt-modal table { width: 100%; border-collapse: collapse; font-size: .84rem; } .anpt-modal th, .anpt-modal td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--anpt-line); vertical-align: top; } .anpt-modal th { color: rgba(244,247,251,.5); font-weight: 600; white-space: nowrap; } .anpt-modal-close { display: block; margin: 16px auto 0; font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--anpt-ink); background: rgba(255,255,255,.09); border: 1px solid var(--anpt-line); border-radius: 99px; padding: 9px 20px; cursor: pointer; } @media (prefers-reduced-motion: reduce) { .anpt-modal-scrim, .anpt-modal, .anpt-heart, .anpt-tray { transition: none; } }