/* ==========================================================================
   Koszyk — nowy wygląd (makieta: szare, mocno zaokrąglone karty + czarne przyciski-pigułki)

   Plik ładowany WYŁĄCZNIE na stronie koszyk/index.html, zaraz po css/style.css.
   Wszystkie reguły są zawężone do `body.cart-page`, więc nic poza koszykiem się nie zmienia
   (profil, adresy, kupony itd. korzystają z tych samych klas w style.css i zostają jak były).

   Wymiary policzone z makiety (szerokość telefonu ≈ 390 px).
   ========================================================================== */
.cart-page {
  --cart-card: #ececec;      /* tło kart */
  --cart-field: #d9d9d9;     /* pola, plakietki, miejsce na zdjęcie */
  --cart-red: #d93a3a;       /* ikona kosza / komunikaty „brak danych” */
  --cart-red-soft: #f4bcbc;  /* tło przycisku usuwania */
  --cart-radius-xl: 46px;    /* karta produktu, podsumowanie */
  --cart-radius-lg: 28px;    /* karty Dane odbiorcy / Dostawa */
  --cart-radius-md: 15px;    /* stepper ilości, kosz */
  --cart-gap: 16px;
}
/* --- Nowe ikony (maski, kolor = background-color) --- */
.icon-mask.icon-id-card { -webkit-mask-image: url("../assets/id-card.svg"); mask-image: url("../assets/id-card.svg"); }
.icon-mask.icon-cursor { -webkit-mask-image: url("../assets/cursor-click.svg"); mask-image: url("../assets/cursor-click.svg"); }
.icon-mask.icon-angle { -webkit-mask-image: url("../assets/angle-down.svg"); mask-image: url("../assets/angle-down.svg"); }
.icon-mask.icon-trash { -webkit-mask-image: url("../assets/trash.svg"); mask-image: url("../assets/trash.svg"); }
/* --- Nagłówek strony --- */
.cart-page .container { padding: 0 25px 28px; }
.cart-page .breadcrumbs {
  display: block;
  padding: 14px 0 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 30px;
}
.cart-page .breadcrumbs a:hover { opacity: 0.6; }
.cart-page .cart-head { margin: 4px 0 19px; }
.cart-page .cart-head .page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.02em;
}
.cart-page .cart-count { display: none; }
/* --- Układ --- */
.cart-page .cart-layout { gap: var(--cart-gap); }
.cart-page .cart-main { gap: var(--cart-gap); }
.cart-page .cart-card {
  padding: 0;
  border: 0;
  border-radius: var(--cart-radius-lg);
  background: var(--cart-card);
}
/* Lista produktów nie ma własnej karty — każdy produkt jest osobną kartą. */
.cart-page .cart-card-items {
  padding: 0;
  border-radius: 0;
  background: none;
}
.cart-page .cart-list { gap: var(--cart-gap); }
@media (min-width: 900px) {
.cart-page .cart-layout { grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; }
.cart-page .cart-card { padding: 0; }
.cart-page .cart-card-items { padding: 0; }
.cart-page .cart-aside { position: sticky; top: 16px; }

}
/* ==========================================================================
   Karta produktu
   ========================================================================== */
.cart-page .cart-item {
  display: grid;
  grid-template-columns: 119px minmax(0, 1fr);
  gap: 6px;
  padding: 10px 12px 10px 11px;
  border: 0;
  border-radius: var(--cart-radius-xl);
  background: var(--cart-card);
}
.cart-page .cart-item + .cart-item { border-top: 0; }
.cart-page .cart-item-image {
  width: 119px;
  height: 119px;
  aspect-ratio: auto;
  border: 0;
  border-radius: 37px;
  background: var(--cart-field);
}
.cart-page .cart-item-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-page .cart-item-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.cart-page .cart-item-text { min-width: 0; }
.cart-page .cart-item-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #000;
}
.cart-page .cart-item-price {
  text-align: left;
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #000;
}
.cart-page .cart-item-meta {
  margin: 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #0d0d0d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-page .cart-item-bottom {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 7px;
  margin-top: 4px;
  padding: 0;
}
/* Stepper ilości: strzałka w dół · liczba · strzałka w górę */
.cart-page .qty-stepper {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 97px;
  height: 36px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--cart-radius-md);
  background: var(--cart-field);
}
.cart-page .qty-stepper button {
  display: grid;
  place-items: center;
  width: 29px;
  height: 36px;
  border-radius: 12px;
  background: none;
  transition: transform 0.1s ease, opacity 0.15s ease;
}
.cart-page .qty-stepper button:hover { background: none; opacity: 0.6; }
.cart-page .qty-stepper button:active { transform: scale(0.85); }
.cart-page .qty-stepper .icon-mask { width: 18px; height: 18px; background-color: #000; }
.cart-page .qty-stepper .qty-up .icon-mask { transform: rotate(180deg); }
.cart-page .qty-stepper span {
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  color: #000;
}
/* Usuwanie: czerwona ikona kosza na różowym tle */
.cart-page .cart-item-remove {
  display: grid;
  place-items: center;
  width: 41px;
  height: 36px;
  margin: 0;
  border-radius: var(--cart-radius-md);
  background: var(--cart-red-soft);
  color: var(--cart-red);
  transition: transform 0.1s ease, filter 0.15s ease;
}
.cart-page .cart-item-remove:hover { background: var(--cart-red-soft); filter: brightness(0.96); }
.cart-page .cart-item-remove:active { transform: scale(0.92); }
.cart-page .cart-item-remove .icon-mask { width: 20px; height: 20px; background-color: var(--cart-red); }
@media (max-width: 340px) {
.cart-page .cart-item { grid-template-columns: 100px minmax(0, 1fr); }
.cart-page .cart-item-image { width: 100px; height: 100px; border-radius: 30px; }

}
/* ==========================================================================
   Karty zwijane: Dane odbiorcy, Dostawa
   ========================================================================== */
.cart-page .cart-card-collapsible { border-radius: var(--cart-radius-lg); }
.cart-page .cart-card-toggle {
  min-height: 69px;
  padding: 0 22px 0 25px;
  gap: 29px;
}
.cart-page .cart-card-toggle:focus-visible { border-radius: var(--cart-radius-lg); }
.cart-page .cart-card-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: none;
}
.cart-page .cart-card-icon .icon-mask { width: 32px; height: 32px; background-color: #000; }
.cart-page .cart-card-icon .icon-marker { width: 30px; height: 30px; }
.cart-page .cart-card-titles { gap: 1px; }
.cart-page .cart-card-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: -0.01em;
  color: #000;
}
.cart-page .cart-card-sub {
  font-size: 11px;
  font-weight: 400;
  line-height: 17px;
  color: #4a4a4a;
}
.cart-page .cart-card-sub.is-missing { color: #d64a4e; }
/* Strzałka w prawo (angle-down obrócona); po rozwinięciu wskazuje w dół */
.cart-page .cart-card-chevron {
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 0;
  background: none;
}
.cart-page .cart-card-toggle:hover .cart-card-chevron { background: none; }
.cart-page .cart-card-collapsible.is-open .cart-card-chevron { transform: none; }
.cart-page .cart-card-chevron .icon-mask {
  width: 19px;
  height: 19px;
  background-color: #000;
  transform: rotate(-90deg);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.cart-page .cart-card-collapsible.is-open .cart-card-chevron .icon-mask { transform: rotate(0deg); }
.cart-page .cart-collapse-inner { padding: 0 25px; }
.cart-page .cart-card-collapsible.is-open .cart-collapse-inner { padding: 2px 25px 25px; }
.cart-page .cart-card-note { color: #4a4a4a; font-size: 11.5px; }
/* Pola formularza w otwartych kartach */
.cart-page .addr-field label { color: #000; font-size: 10px; }
.cart-page .addr-field input {
  padding: 14px 18px;
  border: 0;
  border-radius: 18px;
  background: var(--cart-field);
  color: #000;
  font-size: 12px;
}
.cart-page .addr-field input::placeholder { color: #7c7c7c; }
.cart-page .addr-field input:hover { background: #d3d3d3; }
.cart-page .addr-field input:focus { background: #d3d3d3; box-shadow: 0 0 0 2px #000; }
.cart-page .cart-card-recipient .addr-field input:disabled { background: #e0e0e0; color: #6b6b6b; }
.cart-page .balance-recipient .addr-field input { background: var(--cart-field); }
.cart-page .addr-option {
  border: 2.5px solid transparent;
  border-radius: 24px;
  background: #fff;
}
.cart-page .addr-option:hover { border-color: #b9b9b9; }
.cart-page .addr-option.is-selected { border-color: #000; background: #fff; box-shadow: none; }
.cart-page .addr-add { border: 2px dashed #b3b3b3; border-radius: 24px; }
.cart-page .addr-add:hover { border-color: #000; background: transparent; }
.cart-page .addr-btn-ghost { border: 0; background: var(--cart-field); }
.cart-page .addr-btn-ghost:hover { background: #cdcdcd; }
.cart-page .addr-check-box { border-color: #9d9d9d; }
.cart-page .addr-link { color: #4a4a4a; }
/* Metody dostawy: białe kafle, wybrany ma czarną ramkę */
.cart-page .dm-card { border-color: transparent; }
.cart-page .dm-card:hover { border-color: #b9b9b9; }
.cart-page .dm-card.is-selected, .cart-page .dm-card.is-selected:hover { border-color: #000; }
.cart-page .dm-info small { color: #8a8a8a; }
/* Bramka „Zaloguj się, aby kupić” (gość) */
.cart-page .cart-gate { padding: 24px 25px 26px; }
.cart-page .cart-gate .cart-card-head h2 { font-size: 13px; font-weight: 700; }
.cart-page .cart-gate .cart-card-icon { width: 28px; height: 28px; }
.cart-page .cart-gate .cart-card-icon .icon-mask { width: 22px; height: 22px; }
.cart-page .cart-gate .cart-card-note { color: #4a4a4a; }
.cart-page .license-info {
  margin: 0;
  padding: 16px 20px;
  border-radius: var(--cart-radius-lg);
  background: var(--cart-card);
  color: #4a4a4a;
}
/* ==========================================================================
   Podsumowanie
   ========================================================================== */
.cart-page .cart-summary-card {
  padding: 28px 25px 25px;
  border-radius: var(--cart-radius-xl);
}
.cart-page .cart-summary-card .summary-title {
  margin: 0 0 25px;
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: -0.01em;
  color: #000;
}
/* Kod rabatowy: szare pole + czarny przycisk z ikoną kliknięcia */
.cart-page .cart-summary-card .promo-row { display: flex; gap: 10px; margin: 0; }
.cart-page .cart-summary-card .promo-row input {
  flex: 1;
  min-width: 0;
  height: 43px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--cart-field);
  color: #000;
  font-size: 11px;
}
.cart-page .cart-summary-card .promo-row input::placeholder { color: #7c7c7c; }
.cart-page .cart-summary-card .promo-row input:focus { background: #d3d3d3; box-shadow: 0 0 0 2px #000; }
.cart-page .promo-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 74px;
  height: 43px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #000;
  transition: transform 0.1s ease, opacity 0.15s ease;
}
.cart-page .promo-btn:hover { background: #000; border-color: #000; opacity: 0.85; }
.cart-page .promo-btn:active { transform: scale(0.94); }
.cart-page .promo-btn .icon-mask { width: 21px; height: 21px; background-color: #fff; }
.cart-page .cart-summary-card .promo-msg { margin: 10px 0 0; padding-left: 16px; font-size: 11px; }
.cart-page .promo-chips { margin: 12px 0 0; }
.cart-page .promo-chip { border-color: #000; background: transparent; }
.cart-page .promo-chip:hover { background: #000; }
.cart-page .promo-lock {
  margin: 0;
  border: 0;
  border-radius: 22px;
  background: var(--cart-field);
  color: #4a4a4a;
}
/* Wiersze: Produkty / Wysyłka / Razem — wszystkie tak samo, pogrubione, wersaliki */
.cart-page .summary-rows { margin-top: 24px; }
.cart-page .cart-summary-card .summary-row, .cart-page .cart-summary-card .summary-row.is-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 39px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #000;
}
.cart-page .cart-summary-card .summary-row .value, .cart-page .cart-summary-card .summary-row.is-total .value {
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #000;
  white-space: nowrap;
}
.cart-page .cart-summary-card .summary-row.is-discount .value { color: var(--cart-red); }
.cart-page .summary-row em { margin-left: 6px; font-size: 9px; font-weight: 600; text-transform: none; color: var(--cart-red); opacity: 1; }
.cart-page .summary-note {
  margin: 4px 0;
  border-radius: 16px;
  background: var(--cart-field);
  color: #4a4a4a;
}
/* ==========================================================================
   Przycisk płatności — czarna pigułka POD kartą podsumowania
   ========================================================================== */
.cart-page .cart-cta { margin-top: var(--cart-gap); }
.cart-page .checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 63px;
  padding: 0 24px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cart-page .checkout-btn .icon-mask { width: 21px; height: 21px; background-color: #fff; }
.cart-page .checkout-btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cart-page .cart-cta .checkout-error {
  margin-top: 12px;
  text-align: center;
  color: var(--cart-red);
  font-size: 12px;
  line-height: 1.5;
}
.cart-page .cart-card.is-shaking { border-color: transparent; }

/* Kwota obniżki z promocji „1 + 1 gratis”: czerwony napis, po którym przejeżdża biały świetlny pasek.
   Dwie warstwy tła przycięte do liter: biały pasek (animowany) nad stałą czerwienią. */
.cart-page .cart-summary-card .summary-row.is-discount .value.bogo-shine {
  color: transparent;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.98) 50%, transparent 60%) 100% 0 / 300% 100% no-repeat,
    linear-gradient(var(--cart-red), var(--cart-red)) 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: bogo-amount-sweep 3.4s ease-in-out infinite;
}
@keyframes bogo-amount-sweep {
  0%        { background-position: 100% 0, 0 0; }
  55%, 100% { background-position: 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cart-page .cart-summary-card .summary-row.is-discount .value.bogo-shine { animation: none; }
}