/* ---------- Mi selección: header, tarjetas y página ---------- */
.top nav .nav-sel { display: inline-flex; align-items: center; gap: 6px; }
.nav-sel b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg3); color: var(--muted); font-size: 11px; display: inline-grid; place-items: center; }
.nav-sel.has b { background: var(--red); color: #fff; }
@media (max-width: 480px) { .top nav .nav-how { display: none; } }

.card { position: relative; }
.card-link { display: block; text-decoration: none; color: inherit; }
.sel-btn { position: absolute; top: 8px; right: 8px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  background: rgba(11,11,11,.72); color: #fff; font-size: 20px; line-height: 1; display: grid; place-items: center; backdrop-filter: blur(4px); }
.sel-btn:hover { border-color: #fff; }
.sel-btn.on { background: var(--red); border-color: var(--red); }

.sel-page { max-width: 640px; }
.sel-list { display: grid; gap: 8px; margin-top: 24px; }
.sel-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 10px; background: var(--bg2); border: 1px solid var(--line); }
.sel-item img, .sel-item .noimg { width: 72px; height: 90px; object-fit: cover; background: var(--bg3); font-size: 12px; }
.sel-item.off img { filter: grayscale(1) brightness(.5); }
.sel-item .t { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.sel-item .s { font-size: 13px; color: var(--muted); }
.sel-item .price { font-weight: 700; margin-top: 2px; }
.sel-item .rm { width: 36px; height: 36px; border: 1px solid var(--line); background: none; border-radius: 50%; color: var(--muted); }
.sel-item .rm:hover { color: var(--fg); border-color: var(--fg); }
.sel-total { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.sel-total span { color: var(--muted); text-transform: uppercase; font-size: 13px; letter-spacing: .08em; }
.sel-total b { font-family: var(--display); font-weight: 400; font-size: 36px; }
.sel-page .danger { margin-top: 10px; }

/* ---------- Compartir ---------- */
.share { margin-top: 20px; }
.share-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.share-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn { border: 1px solid var(--line); background: var(--bg2); color: var(--fg); padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; }
.share-btn:hover { border-color: var(--fg); }

/* ---------- Elegir prendas para un drop ---------- */
.pick-filters { display: grid; gap: 10px; margin: 16px 0 12px; }
.pick-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.pick-bar span { margin-right: auto; }
.item.pick { grid-template-columns: 22px 56px 1fr; cursor: pointer; }
.item.pick input { width: 20px; height: 20px; accent-color: var(--red); }
.item.pick img, .item.pick .noimg { width: 56px; height: 70px; }
.item.pick.on { border-color: var(--red); }
.vacts { display: inline-flex; gap: 10px; align-items: center; }