/* ==========================================================================
   Listy zakupów
   --------------------------------------------------------------------------
   Gęsta tabela wierszowa: ikona listy, miniatura, marka z nazwą i EAN-em,
   cena regularna, ilość, cena klienta, przycisk do koszyka.
   ========================================================================== */

.cb-list__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.cb-list__count { color: var(--cb-ink-muted); font-size: var(--cb-fs-body); }

/* Siatka wspólna dla nagłówka i wierszy — jedna definicja kolumn, żeby
   nagłówki nie rozjechały się z treścią przy każdej zmianie. */
.cb-list__head,
.cb-list__row {
  display: grid;
  grid-template-columns: 40px 72px minmax(0, 1fr) 130px 148px 130px 56px;
  align-items: center;
  gap: 16px;
}

.cb-list__head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cb-line);
  font-size: var(--cb-fs-micro);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cb-ink-muted);
}

.cb-list__row {
  padding: 16px 0;
  border-bottom: 1px solid var(--cb-line);
}

.cb-list__row:hover { background: var(--cb-brand-050); }
.cb-list__row--gone { opacity: .6; }

/* ——— Usunięcie z listy ——— */

.cb-list__remove {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--cb-accent);
  padding: 6px;
  line-height: 0;
}

.cb-list__remove:hover { color: var(--cb-accent-hover); }

/* ——— Miniatura ——— */

.cb-list__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--cb-surface-alt);
  border-radius: var(--cb-radius);
  overflow: hidden;
}

.cb-list__media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* ——— Opis ——— */

.cb-list__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cb-list__brand {
  font-size: var(--cb-fs-micro);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cb-ink-muted);
}

.cb-list__name { color: var(--cb-ink); font-size: var(--cb-fs-body); line-height: 1.4; }
.cb-list__name:hover { color: var(--cb-brand-600); }
.cb-list__ean { font-size: var(--cb-fs-micro); color: var(--cb-ink-muted); }

/* ——— Ceny ——— */

.cb-list__rrp { color: var(--cb-ink-muted); }
.cb-list__price { color: var(--cb-accent); font-weight: 700; font-size: var(--cb-fs-lead); }

/* ——— Stopka ——— */

.cb-list__footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 32px;
}

/* ——————————————————————————————————————————————— Responsywność */

@media (max-width: 1023px) {
  .cb-list__head,
  .cb-list__row { grid-template-columns: 32px 56px minmax(0, 1fr) 110px 120px 110px 48px; gap: 12px; }
  .cb-list__price { font-size: var(--cb-fs-body); }
}

@media (max-width: 767px) {
  /* Wiersz zamienia się w kartę: miniatura i opis u góry, ceny i ilość
     pod spodem z etykietami. */
  .cb-list__head { display: none; }

  .cb-list__row {
    grid-template-columns: 56px minmax(0, 1fr) 40px;
    grid-template-areas:
      "media info remove"
      "rrp   rrp  rrp"
      "qty   qty  qty"
      "price price price"
      "cart  cart cart";
    gap: 8px 12px;
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius);
    padding: 16px;
    margin-bottom: 16px;
  }

  .cb-list__media  { grid-area: media; }
  .cb-list__info   { grid-area: info; }
  .cb-list__remove { grid-area: remove; justify-self: end; }
  .cb-list__rrp    { grid-area: rrp; }
  .cb-list__qty    { grid-area: qty; }
  .cb-list__price  { grid-area: price; }
  .cb-list__action { grid-area: cart; }

  .cb-list__rrp::before,
  .cb-list__qty::before,
  .cb-list__price::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: var(--cb-fs-micro);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cb-ink-muted);
  }

  .cb-list__action .cb-btn { width: 100%; }
  .cb-list__footer { flex-direction: column; }
  .cb-list__footer .cb-btn { width: 100%; }
}