/* Nákup: průvodce v kartičkách */
@media (max-width: 900px) { .is-checkout .site-main { padding-bottom: 110px !important; } }
.co { width: min(720px, 100% - 32px); margin: 0 auto; }
.co-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.co-back { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: #fff; font-size: 20px; flex: none; }
.co-back:hover { border-color: var(--pink); text-decoration: none; }
.co-event { display: flex; align-items: center; gap: 12px; min-width: 0; }
.co-event img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex: none; }
.co-event b { font-family: var(--display); font-size: 24px; letter-spacing: 1px; display: block; line-height: 1; }
.co-event span { font-size: 13px; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.co-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 3px solid rgba(255,255,255,.12); color: var(--muted); font-size: 12px; font-weight: 600; transition: border-color .3s, color .3s; }
.co-steps li i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; background: rgba(255,255,255,.08); flex: none; }
.co-steps li.on { border-top-color: var(--pink); color: #fff; }
.co-steps li.on i { background: linear-gradient(135deg, var(--pink), var(--violet)); box-shadow: 0 0 12px rgba(255,43,214,.6); }
.co-steps li.done { border-top-color: var(--blue); color: var(--blue); cursor: pointer; }
.co-steps li.done i { background: var(--blue); color: #06121a; }
@media (max-width: 520px) { .co-steps li span { display: none; } .co-steps li { justify-content: center; } }
.co-cards { position: relative; }
.co-card { display: none; padding: 26px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.co-card.active { display: grid; gap: 14px; animation: coIn .45s cubic-bezier(.2,.8,.2,1); }
.co-card.leaving { animation: coOut .3s ease forwards; }
@keyframes coIn { from { opacity: 0; transform: translateX(40px) scale(.98); } }
@keyframes coOut { to { opacity: 0; transform: translateX(-40px) scale(.98); } }
.co-card h2 { font-size: 32px; margin: 0; }
.co-card > p { margin: -6px 0 0; }
.co-types { display: grid; gap: 10px; }
.co-type { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.co-type::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.co-type.sel { border-color: var(--c); box-shadow: 0 0 20px rgba(255,43,214,.2); }
.co-type.off { opacity: .5; }
.co-type-name { display: flex; align-items: center; gap: 10px; }
.co-type-name b { font-family: var(--display); font-size: 24px; color: var(--pink); }
.co-holders { display: grid; gap: 12px; }
.holder { padding: 14px; border-radius: 16px; background: rgba(124,58,237,.1); border: 1px dashed rgba(124,58,237,.5); display: grid; gap: 10px; animation: coIn .35s; }
.holder-title { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.gift-toggle { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #ddd6f3; cursor: pointer; }
.gift-toggle input { width: 18px; height: 18px; accent-color: var(--pink); }
.gift-field { display: none; }
.gift-field.on { display: block; animation: coIn .3s; }
.ffield { position: relative; }
.ffield .input { padding-top: 22px; padding-bottom: 8px; }
.ffield label { position: absolute; left: 14px; top: 15px; color: var(--muted); font-size: 15px; pointer-events: none; transition: top .2s, font-size .2s, color .2s; }
.ffield .input:focus + label, .ffield .input:not(:placeholder-shown) + label { top: 6px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--blue); }
.co-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.co-nav .btn:only-child { margin-left: auto; }
.co-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(11,6,23,.92); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.co-bar b { font-family: var(--display); font-size: 28px; color: var(--pink); margin: 0 10px; }
.co-bar[hidden] { display: none; }
@media (max-width: 900px) { .has-tabbar.is-checkout .tabbar { display: none; } .has-tabbar.is-checkout { padding-bottom: 0; } }
@media (min-width: 901px) { .co-bar { display: none; } }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.summary-row small { color: var(--muted); display: block; font-size: 12px; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); z-index: 90; padding: 12px 18px; border-radius: 999px; background: #1b0f33; border: 1px solid var(--pink); color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.co-event > div { min-width: 0; flex: 1; }
.co-event b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co, .co-cards, .co-card { min-width: 0; max-width: 100%; }
@media (max-width: 700px) {
  .co-head { flex-direction: column; text-align: center; }
  .co-event { flex-direction: column; }
  .co-event span { white-space: normal; }
  .co-type { flex-direction: column; text-align: center; }
  .co-type-name { justify-content: center; }
  .co-nav { flex-direction: column; }
  .holder-title, .gift-toggle { justify-content: center; }
  .co-card h2, .co-card > p { text-align: center; }
}
@media (max-width: 700px) {
  .co-nav { flex-direction: column-reverse; gap: 10px; }
  .co-nav .btn { width: 100%; justify-content: center; }
  .co-type { gap: 14px; padding: 16px; }
  .co-type .qty { width: 100%; justify-content: center; gap: 14px; }
  .co-type .qty button { width: 48px; height: 48px; font-size: 22px; }
  .co-type .qty output { min-width: 40px; font-size: 22px; }
  .co-card { padding: 20px 16px; }
  .co-steps { gap: 4px; }
  .holder { text-align: center; }
  .two { grid-template-columns: 1fr; }
  .summary-row { flex-direction: column; align-items: center; text-align: center; }
}
/* Pořadí: Pokračovat první, Zpět za ním (PC vedle sebe, mobil pod sebou) */
.co-nav { justify-content: flex-start; }
.co-nav .btn:only-child { margin-left: 0; }
.co-back-list { justify-content: center; }
@media (max-width: 700px) {
  .co-nav { flex-direction: column; }
  .co-back { display: none; }
}