/* Cyber City · the buy bar at the foot of a phone's product page (theme inc/sticky-buy.php, Rayan 21 Oct 2026, plan A5).
   A dark panel in Day and Night (.ecc-ctx-panel: its primary button is lime), the test-ride page's bar's anatomy: fixed
   in its own box, the safe area kept, a lime pixel at its top corners. It rises when the buy box has scrolled away; the
   chat button and the cookie card move up above it while it shows. Up to 860 px only. */

.ecc-sbuy { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ecc-z-sticky); padding: 8px max(var(--ecc-gutter), env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(var(--ecc-gutter), env(safe-area-inset-left)); background: var(--ecc-panel); color: var(--ecc-on-panel); border-top: 1px solid color-mix(in srgb, var(--ecc-on-panel) 14%, transparent); box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .55); translate: 0 110%; transition: translate var(--ecc-d-base, .24s) var(--ecc-ease-out, ease); }
.ecc-sbuy[hidden] { display: none; }
.ecc-sbuy.is-on { translate: none; }
.ecc-sbuy::before, .ecc-sbuy::after { content: ""; position: absolute; top: -3px; width: 5px; height: 5px; border-radius: 1px; background: var(--ecc-lime); }
.ecc-sbuy::before { left: 0; }
.ecc-sbuy::after { right: 0; }
.ecc-sbuy__in { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; max-width: 46rem; margin: 0 auto; }
.ecc-sbuy__img { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 6px; background: var(--ecc-stage-studio); }
.ecc-sbuy__img img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ecc-sbuy__text { display: grid; gap: 2px; min-width: 0; margin: 0; }
.ecc-sbuy__name { overflow: hidden; color: var(--ecc-on-panel); font-size: 13.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.ecc-sbuy__meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
.ecc-sbuy__meta b { color: var(--ecc-lime); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ecc-sbuy__meta span { overflow: hidden; text-overflow: ellipsis; color: var(--ecc-on-panel-2); font: 500 10.5px/1.2 var(--ecc-f-mono); letter-spacing: .04em; text-transform: uppercase; }
.ecc-sbuy__meta span[hidden] { display: none; }
.ecc-sbuy__acts { display: flex; gap: 8px; }
.ecc-sbuy__acts[hidden], .ecc-sbuy__ask[hidden] { display: none; }
.ecc-sbuy .ecc-btn { min-height: 44px; white-space: nowrap; }
.ecc-sbuy .ecc-btn svg { flex: none; }
.ecc-sbuy__now { display: none; }
@media (min-width: 480px) { .ecc-sbuy__now { display: inline-flex; } }
@media (min-width: 861px) { .ecc-sbuy { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .ecc-sbuy { transition: none; } }
html[data-ecc-motion="paused"] .ecc-sbuy { transition: none; }
@media print { .ecc-sbuy { display: none !important; } }

/* what else sits at the foot moves up above the bar while it shows, so nothing is covered; the cookie card takes the
   foot itself while it is open (the bar waits for it, sticky-buy.js), as the chat button and the tray already do */
html.ecc-sbuy-on .ecc-chatbtn { bottom: calc(var(--ecc-sbuy-h, 64px) + 12px); }
html.ecc-sbuy-on .ecc-toasts { bottom: calc(var(--ecc-sbuy-h, 64px) + 12px); }