/* HERO – delikatne przyciemnienie jak w shop.css */
.cart-hero{position:relative;background-image:var(--bg);background-position:center;background-size:cover}
.cart-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.08))}
.cart-hero .container{position:relative;z-index:1;min-height:260px;display:flex;align-items:center}
.cart-hero h1{color:#fff;font-size:40px;letter-spacing:.02em;margin:0}

/* KROKI (jasne kapsułki) */
.cart-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;text-align:center;margin:28px auto 6px}
.step{display:flex;flex-direction:column;align-items:center}
.step__circle{width:48px;height:48px;border-radius:50%;display:inline-grid;place-items:center;
  background:var(--panel-bg, #fff); color:var(--fg,#111); border:1px solid var(--panel-border, rgba(0,0,0,.12))}
.step__circle--muted{opacity:.55}
.step__label{margin-top:8px;color:var(--muted,#6b7280)}

/* LAYOUT */
.cart{display:grid;grid-template-columns:1fr 340px;gap:24px;margin:20px auto}
@media (max-width: 960px){ .cart{grid-template-columns:1fr} }

/* TABELA – jasny panel */
.cart__table{
  background:var(--panel-bg, #fff);
  color:var(--fg,#111);
  border:1px solid var(--panel-border, rgba(0,0,0,.10));
  border-radius:16px; overflow:hidden;
}
.t-head,.t-row{display:grid;grid-template-columns:1fr 160px 120px 120px 80px;align-items:center}
.t-head{
  background:color-mix(in srgb, var(--bg,#fff) 92%, #000 8%);
  color:color-mix(in srgb, var(--fg,#111) 70%, transparent);
  font-size:14px; padding:12px 16px; border-bottom:1px solid var(--panel-border, rgba(0,0,0,.10));
}
.t-row{padding:12px 16px; border-bottom:1px solid var(--panel-border, rgba(0,0,0,.08))}
.t-row:last-child{border-bottom:none}
.c{display:flex;align-items:center;gap:12px}
.c--prod img{width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid var(--panel-border, rgba(0,0,0,.12))}
.c--rm .rm{
  width:36px;height:36px;border:1px solid var(--panel-border, rgba(0,0,0,.12));
  background:#fff;color:var(--fg,#111);border-radius:10px;cursor:pointer
}
.c--rm .rm:hover{background:color-mix(in srgb, #2cc24a 10%, #fff 90%); border-color:color-mix(in srgb, #2cc24a 40%, #000 0%)}

/* QTY (jasne, spójne z shop.css) */
.qty__btn{
  min-width:32px;height:32px;border:1px solid var(--panel-border, rgba(0,0,0,.18));
  background:#fff;color:var(--fg,#111);border-radius:8px;cursor:pointer
}
.qty__input{
  width:56px;height:32px;text-align:center;border:1px solid var(--panel-border, rgba(0,0,0,.18));
  background:#fff;color:var(--fg,#111);border-radius:8px;margin:0 6px
}

/* POD TABELĄ: akcje */
.t-actions{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--panel-border, rgba(0,0,0,.10))}
.t-actions .btn{padding:.6rem .9rem;border-radius:10px}
.t-actions .btn--ghost{background:transparent;border:1px solid var(--panel-border, rgba(0,0,0,.18));color:var(--fg,#111)}

/* PODSUMOWANIE (panel z prawej) */
.summary{
  background:var(--panel-bg,#fff);color:var(--fg,#111);
  border:1px solid var(--panel-border, rgba(0,0,0,.10));border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px
}
.summary .row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}
.summary .total{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--panel-border, rgba(0,0,0,.10));font-size:20px;font-weight:800}
.summary .btn--order{width:100%;margin-top:6px}

/* RESPONSYWNOŚĆ */
@media (max-width: 680px){
  .t-head,.t-row{grid-template-columns:1fr 120px 100px 100px 64px}
  .c--prod span{font-size:14px}
}

/* Mały badge w nawigacji (jeśli używasz [data-cart-count]) */
[data-cart-count]{display:inline-flex;min-width:20px;height:20px;align-items:center;justify-content:center;
  background:#2cc24a;color:#0a0a0a;border-radius:9999px;font-size:12px;font-weight:800;padding:0 6px}


/* === RWD uzupełnienia – koszyk (2025-09-23) === */
@media (max-width: 560px){
  .cart__table{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cart__table > .t-head, .cart__table > #cart-rows{ min-width: 560px; }
}

/* === KOSZYK — pełne 5 kolumn + poziomy scroll na telefonie === */
@media (max-width: 768px) {
  /* kontener koszyka przewijalny w poziomie */
  .cart__table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* płynny scroll na iOS */
  }

  /* wiersze jako grid o stałym minimalnym szer., żeby wymusić overflow */
  .cart__table .t-head,
  .cart__table .t-row {
    display: grid;
    grid-template-columns:
      minmax(240px, 1fr)   /* Produkt */
      110px                /* Ilość (−, input, +) */
      120px                /* Cena */
      120px                /* Suma */
      74px;                /* Usuń / ikona */
    column-gap: 12px;
    align-items: center;

    /* KLUCZ: minimalna szerokość całego wiersza => pojawia się scroll */
    min-width: 664px; /* suma kolumn + gapy; dopasuj w razie czego */
  }

  /* nie pozwól, by "Produkt" rozpychał całość ponad min-width */
  .cart__table .c--prod { min-width: 0; }
  .cart__table .c--prod * {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Ilość – żeby się mieściła */
  .cart__table .qty__btn   { min-width: 32px; height: 32px; }
  .cart__table .qty__input { min-width: 54px; height: 32px; text-align: center; }

  /* wyrównania */
  .cart__table .c--price,
  .cart__table .c--sum { text-align: right; }

  /* nagłówek mniejszy, żeby nie zawijał */
  .cart__table .t-head { font-size: 13px; white-space: nowrap; }
}

/* bardzo wąskie ekrany — delikatnie ciaśniejsze kolumny */
@media (max-width: 390px) {
  .cart__table .t-head,
  .cart__table .t-row {
    grid-template-columns: minmax(220px,1fr) 100px 110px 110px 66px;
    column-gap: 10px;
    min-width: 606px;
  }
}

/* === KOSZYK: anty-overlap dla 5 kolumn przy poziomym scrollu === */
@media (max-width: 768px) {
  /* 1) Każdy wiersz i nagłówek ma stałą wysokość rzędu i nie ściska się */
  .cart__table .t-head,
  .cart__table .t-row {
    align-items: center;
    grid-auto-rows: minmax(48px, auto); /* ważne: zapobiega nakładaniu */
  }

  /* 2) Każda komórka jest flexem, treść stoi w swojej „ramce” */
  .cart__table .t-head > *,
  .cart__table .t-row  > * {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;              /* pozwala zawijać/wcinać długie nazwy */
    overflow: hidden;          /* nic nie wychodzi poza komórkę */
  }

  /* 3) Produkt może się zawijać (tylko ta kolumna) */
  .cart__table .c--prod * {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
  }

  /* 4) Ilość — zerujemy „stare” hacki i ustawiamy porządny układ */
  .cart__table .c--qty { 
    justify-content: center;
    gap: 6px;                  /* odstęp między − input + */
    flex-wrap: nowrap;
  }
  .cart__table .c--qty .qty__btn,
  .cart__table .c--qty .qty__input {
    position: static !important;  /* wyłącza absolute/relative sztuczki */
    float: none !important;
    margin: 0 !important;         /* usuwa ujemne marginesy */
    transform: none !important;   /* na wszelki wypadek */
    flex: 0 0 auto;
    height: 32px;
  }
  .cart__table .c--qty .qty__btn   { min-width: 32px; }
  .cart__table .c--qty .qty__input { min-width: 56px; text-align: center; }

  /* 5) Cena/Suma nie łamią się i trzymają się prawej */
  .cart__table .c--price,
  .cart__table .c--sum {
    justify-content: flex-end;
    white-space: nowrap;
  }

  /* 6) Kolumna Usuń ma sztywną szerokość, żeby ikona nie wpływała na layout */
  .cart__table .c--rm {
    justify-content: center;
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

/* bardzo wąskie: dopasowanie wysokości i minimalnych szerokości elementów */
@media (max-width: 390px) {
  .cart__table .t-head,
  .cart__table .t-row { grid-auto-rows: minmax(44px, auto); }
  .cart__table .c--qty .qty__btn   { min-width: 30px; height: 30px; }
  .cart__table .c--qty .qty__input { min-width: 52px; height: 30px; }
}

/* === KOSZYK: większy zakres kliknięcia dla - / + i brak ucinania === */
@media (max-width: 768px) {
  /* 1) Dajemy więcej miejsca kolumnie ILOŚĆ */
  .cart__table .t-head,
  .cart__table .t-row {
    /* jeśli masz już te same reguły wyżej – ta je nadpisze */
    grid-template-columns:
      minmax(240px, 1fr)   /* Produkt */
      140px                /* Ilość (by zmieścić 44/48px przyciski) */
      120px                /* Cena */
      120px                /* Suma */
      74px;                /* Usuń */
    min-width: 694px;      /* suma kolumn + gapy -> wymusza poziomy scroll */
  }

  /* 2) Komórka ilości nie może niczego ucinać */
  .cart__table .c--qty {
    overflow: visible;             /* ważne: nie obcinaj przycisków */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;                      /* odstęp między − input + */
  }

  /* 3) Przyciski: duży hit-area (zgodnie z 44px tap target) */
  .cart__table .qty__btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 44px;                   /* większy klik */
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    line-height: 1;                /* nie rozciągaj znaków */
    font-size: 20px;               /* czytelny +/− */
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

  /* 4) Input ilości – dopasowany do wysokich przycisków */
  .cart__table .qty__input {
    height: 44px;
    min-width: 64px;
    text-align: center;
    line-height: 44px;             /* pionowe wyśrodkowanie tekstu */
    box-sizing: border-box;
  }
}

/* bardzo wąskie – delikatne ściśnięcie, ale dalej nie ucina */
@media (max-width: 390px) {
  .cart__table .t-head,
  .cart__table .t-row {
    grid-template-columns: minmax(220px,1fr) 136px 110px 110px 66px;
    min-width: 642px;
  }
  .cart__table .qty__btn   { width: 40px; min-width: 40px; height: 40px; }
  .cart__table .qty__input { height: 40px; line-height: 40px; min-width: 60px; }
}