/* ---------- Select ---------- */

.sel-head {

  display: grid;

  gap: 10px;

  margin-bottom: 28px

}



.sel-head h2 {

  font-size: clamp(1.9rem, 6vw, 2.8rem);

  font-weight: 800;

  letter-spacing: -.02em

}



.sel-head p {

  color: var(--ink-soft);

  max-width: 36rem

}



.group {

  margin-bottom: 28px;

  display: grid;

  gap: 12px

}



.cards {

  display:grid;

  gap:16px;

  grid-template-columns:

    repeat(auto-fill,minmax(min(100%,18rem),1fr));

}



.card {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  background: var(--surface);

  border: 1.5px solid var(--line);

  border-radius: var(--radius);

  padding: 16px;

  cursor: pointer;

  transition: border-color .2s, background .2s, transform .15s

}



.card:hover {

  border-color: var(--accent)

}



.card:active {

  transform: scale(.985)

}



.card.on {

  border-color: var(--accent);

  background: var(--accent-soft)

}



.sr {

  position: absolute;

  opacity: 0;

  width: 1px;

  height: 1px;

  pointer-events: none

}



.card-text {

  display: grid;

  gap: 2px;

  min-width: 0

}



.card-text b {

  font-weight: 600;

  font-size: 1rem

}



.card-text small {

  color: var(--ink-soft);

  font-size: .85rem;

  line-height: 1.35

}



.switch {

  flex: none;

  width: 46px;

  height: 28px;

  border-radius: 999px;

  background: var(--surface-2);

  border: 1.5px solid var(--line);

  position: relative;

  transition: background .2s, border-color .2s

}



.switch::after {

  content: "";

  position: absolute;

  top: 3px;

  left: 3px;

  width: 19px;

  height: 19px;

  border-radius: 50%;

  background: var(--ink-soft);

  transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), background .2s

}



.card.on .switch {

  background: var(--accent);

  border-color: var(--accent)

}



.card.on .switch::after {

  transform: translateX(18px);

  background: var(--accent-ink)

}



.sr:focus-visible~.switch {

  outline: 3px solid var(--accent);

  outline-offset: 3px

}



.err {

  background: var(--danger-soft);

  color: var(--danger);

  border-radius: 12px;

  padding: 12px 16px;

  margin-bottom: 20px;

  font-weight: 500

}



.sel-pad {

  height: 6.5rem

}



.bar {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 5;

  background: var(--surface);

  border-top: 1px solid var(--line);

  box-shadow: var(--shadow);

  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px))

}



.bar-in {

  max-width: 56rem;

  margin-inline: auto;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 12px;

  justify-content: space-between

}



.count {

  display: flex;

  align-items: baseline;

  gap: 8px

}



.count strong {

  font-family: var(--font-display);

  font-size: 1.75rem;

  font-weight: 800;

  font-variant-numeric: tabular-nums;

  line-height: 1

}



.count span {

  color: var(--ink-soft);

  font-size: .9rem

}



.bar-actions {

  display: flex;

  gap: 8px;

  flex-wrap: wrap

}