/* Kelluva ostopalkki (partials/osta-palkki.php): ruudun alareunan keskellä, osta-palkki.js lisää .is-visible.
   Työpöydällä palkki jättää vasemman pikavalikon (.qcta-rail) ja oikean alakulman Kipinän vapaaksi.
   Alle 1024 px:n näytöllä palkki ottaa mobiilin yhteydenottopalkin (.mcta) paikan, kun se on näkyvissä. */
.osta-palkki {
  position: fixed; left: 50%; bottom: 24px; z-index: 150; width: min(760px, calc(100% - 32px));
  display: flex; align-items: center; gap: 28px; padding: 20px 18px 20px 32px; border-radius: 28px;
  color: #fff; border: 1px solid rgba(255, 255, 255, 0.1); font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(233, 30, 133, 0.28) 0%, transparent 55%),
    radial-gradient(90% 140% at 0% 100%, rgba(245, 128, 36, 0.2) 0%, transparent 60%),
    linear-gradient(160deg, var(--navy-deeper) 0%, #0f1535 100%);
  box-shadow: 0 4px 12px rgba(15, 21, 53, 0.18), 0 30px 60px -18px rgba(15, 21, 53, 0.65);
  transform: translate(-50%, calc(100% + 40px)); opacity: 0; visibility: hidden;
  transition: transform .42s cubic-bezier(0.22, 1, 0.36, 1), opacity .25s ease, visibility 0s linear .42s;
}
.osta-palkki.is-visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
/* Evästepaneeli on samassa kohdassa ruudun alareunassa: palkki odottaa valintaa. */
body:has(#analytics-consent:not([hidden])) .osta-palkki { transform: translate(-50%, calc(100% + 40px)); opacity: 0; visibility: hidden; }
.osta-palkki-copy { flex: 1; min-width: 0; }
.osta-palkki .op-short { display: none; }
.osta-palkki p { margin: 0; }
.osta-palkki-title { font-size: 19px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.25; color: #fff; }
.osta-palkki-price { margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.66); }
.osta-palkki-price strong { margin-right: 8px; font-size: 16px; font-weight: 900; color: var(--orange-soft); }
.osta-palkki .osta-palkki-cta { flex: none; padding: 15px 26px; font-size: 15px; color: #fff; text-decoration: none; white-space: nowrap; }
.osta-palkki-close {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; margin-left: -12px;
  border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, 0.6); cursor: pointer;
}
.osta-palkki-close:hover, .osta-palkki-close:focus-visible { background: rgba(255, 255, 255, 0.1); color: #fff; }
@media (min-width: 1024px) {
  .osta-palkki { width: min(760px, calc(100vw - 360px)); }
}
@media (max-width: 1023px) {
  .osta-palkki { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: min(520px, calc(100% - 24px)); }
  body:has(.osta-palkki.is-visible) .mcta.is-visible { transform: translateY(calc(100% + 28px)); opacity: 0; visibility: hidden; }
}
@media (max-width: 640px) {
  .osta-palkki { gap: 12px; padding: 14px 10px 14px 20px; border-radius: 22px; }
  .osta-palkki-title { font-size: 16px; }
  .osta-palkki-price { margin-top: 3px; }
  .osta-palkki .op-long { display: none; }
  .osta-palkki .op-short { display: inline; }
  .osta-palkki-price span { display: none; }
  .osta-palkki .osta-palkki-cta { padding: 12px 16px; font-size: 14px; }
  .osta-palkki .osta-palkki-cta svg { display: none; }
  .osta-palkki-close { width: 32px; height: 32px; margin-left: -6px; }
}
@media (prefers-reduced-motion: reduce) { .osta-palkki { transition: none; } }