.king-addons-satc { --ka-satc-bg: #ffffff; --ka-satc-text: #1f2933; --ka-satc-btn-bg: #1f2933; --ka-satc-btn-text: #ffffff; position: fixed; left: 0; right: 0; z-index: 9998; background: var(--ka-satc-bg); color: var(--ka-satc-text); box-shadow: 0 -2px 18px rgba(0, 0, 0, .12); transform: translateY(100%); transition: transform 260ms ease; } .king-addons-satc--bottom { bottom: 0; } .king-addons-satc--top { top: 0; bottom: auto; transform: translateY(-100%); box-shadow: 0 2px 18px rgba(0, 0, 0, .12); } .king-addons-satc.is-visible { transform: translateY(0); } .king-addons-satc__inner { display: flex; align-items: center; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 10px 20px; } .king-addons-satc__thumb img { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 4px; } .king-addons-satc__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .king-addons-satc__title { font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .king-addons-satc__price { font-size: .95em; } .king-addons-satc__button { flex: 0 0 auto; background: var(--ka-satc-btn-bg); color: var(--ka-satc-btn-text); padding: 12px 26px; border-radius: 4px; text-decoration: none; line-height: 1.2; } .king-addons-satc__button:hover, .king-addons-satc__button:focus { color: var(--ka-satc-btn-text); opacity: .9; } @media (max-width: 600px) { .king-addons-satc__inner { gap: 10px; padding: 8px 12px; } .king-addons-satc__thumb { display: none; } .king-addons-satc__button { padding: 10px 16px; } } @media (prefers-reduced-motion: reduce) { .king-addons-satc { transition: none; } }