/* pysiecminicart - ikona koszyka + panel podglądu. Namespace .pysiec-minicart*. */

.pysiec-minicart {
  --pysiec-minicart-bg: #fff;
  --pysiec-minicart-border: var(--pysiec-line-20, rgba(62, 47, 35, .2));
  --pysiec-minicart-text: var(--pysiec-text, #1a1a18);
  --pysiec-minicart-accent: var(--pysiec-brand, #b08858);
  --pysiec-minicart-accent-hover: var(--pysiec-brand-hover, #9b7346);
  --pysiec-minicart-espresso: var(--pysiec-espresso, #3e2f23);
  --pysiec-minicart-muted: #8a8172;

  position: relative;
}

/* Na mobile Koszyk jest już w stałym pasku na dole (_partials/mobile-tabbar.tpl,
   .pysiec-tabbar) - ta ikona w headerze byłaby zdublowana. Ten sam breakpoint co
   tabbar/kategorie/konto. Zgłoszone przez użytkownika, sesja 2026-09-20. */
@media (max-width: 991.98px) {
  .pysiec-minicart {
    display: none;
  }
}

.pysiec-minicart__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  background: var(--pysiec-minicart-accent);
  color: #fff;
  border: 0;
  border-radius: var(--pysiec-radius-pill, 999px);
  padding: 0 1.125rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
}

.pysiec-minicart__trigger:hover,
.pysiec-minicart__trigger:focus-visible {
  background: var(--pysiec-minicart-accent-hover);
}

/* Feedback na klik na czas requestu (renderCartModal, ~300-400ms) - bez tego
   przycisk wyglądał jak zawieszony. Sesja 2026-09-18. */
.pysiec-minicart__trigger.is-loading {
  cursor: default;
  opacity: 0.7;
}

.pysiec-minicart__trigger.is-loading .material-icons {
  animation: pysiec-minicart-spin 0.7s linear infinite;
}

@keyframes pysiec-minicart-spin {
  to {
    transform: rotate(360deg);
  }
}

.pysiec-minicart__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #fff;
  color: var(--pysiec-minicart-accent);
  font-size: 0.75rem;
  font-weight: 700;
}

/**
 * Drawer koszyka - 1:1 z surowego pliku źródłowego makiety (Pysiec Sklep.dc.html,
 * linie 2506-2609). Jedyny widok koszyka poza stroną /koszyk - zastąpił dawny
 * mały dropdown (.pysiec-minicart__panel) pod ikoną w headerze. Ta sama klasa
 * korzenia #pysiec-minicart-modal (JS jej szuka) obsługuje tryb "added" i "list"
 * (patrz $mode w modal.tpl).
 */

.pysiec-minicart-drawer {
  /* Wstrzykiwany przez JS prosto do <body> (poza .pysiec-minicart), więc
     zmienne z .pysiec-minicart nie są tu widoczne - bez własnej deklaracji
     var(--pysiec-minicart-*) bez fallbacku liczy się jako niezdefiniowana
     (np. przycisk "Zamawiam" wychodził biały tekst na przezroczystym tle).
     Sesja 2026-09-18. */
  --pysiec-minicart-bg: #fff;
  --pysiec-minicart-border: var(--pysiec-line-20, rgba(62, 47, 35, .2));
  --pysiec-minicart-text: var(--pysiec-text, #1a1a18);
  --pysiec-minicart-accent: var(--pysiec-brand, #b08858);
  --pysiec-minicart-accent-hover: var(--pysiec-brand-hover, #9b7346);
  --pysiec-minicart-espresso: var(--pysiec-espresso, #3e2f23);
  --pysiec-minicart-muted: #8a8172;

  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  justify-content: flex-end;
  background: rgba(26, 26, 24, .5);
  backdrop-filter: blur(3px);
}

.pysiec-minicart-drawer__panel {
  width: min(420px, 100%);
  height: 100%;
  background: var(--pysiec-bg, #faf8f3);
  border-left: 1px solid var(--pysiec-minicart-border);
  display: flex;
  flex-direction: column;
  /* Animacja wjazdu (transform + klasa .is-open przełączana w JS) usunięta -
     przy weryfikacji na żywo w tej sesji transform z wyższą specyficznością
     (.is-open .pysiec-minicart-drawer__panel) nie był brany pod uwagę przez
     silnik renderujący narzędzia przeglądarki mimo poprawnego CSS
     (potwierdzone: selektor pasował przez el.matches(), obie reguły w tym
     samym pliku bez @layer/!important) - nie ryzykuję utrzymywania czegoś
     niesprawdzonego w prawdziwej przeglądarce użytkownika dla czysto
     kosmetycznego efektu. Panel po prostu pojawia się od razu, tak jak
     poprzedni, mały modal. Sesja 2026-09-18. */
}

.pysiec-minicart-drawer__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px clamp(16px, 4vw, 24px) 16px;
}

.pysiec-minicart-drawer__mark {
  width: 34px;
  height: 34px;
  border-radius: var(--pysiec-radius-pill, 999px);
  background: var(--pysiec-accent-green, #8fa35c);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.pysiec-minicart-drawer__mark .material-icons {
  font-size: 18px;
}

/* Tryb "list" (koszyk pod ikoną w headerze) - licznik sztuk zamiast checkmarka,
   kolor marki zamiast zielonego "sukcesu". Makieta: drawerMarkBg #B08858. */
.pysiec-minicart-drawer__mark--count {
  background: var(--pysiec-minicart-accent);
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: 15px;
}

.pysiec-minicart-drawer__head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.pysiec-minicart-drawer__title {
  display: block;
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.pysiec-minicart-drawer__subtitle {
  display: block;
  font-size: 13px;
  color: rgba(62, 47, 35, .75);
  margin-top: 3px;
}

.pysiec-minicart-drawer__close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--pysiec-minicart-border);
  border-radius: var(--pysiec-radius-pill, 999px);
  background: transparent;
  color: var(--pysiec-minicart-espresso);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}

.pysiec-minicart-drawer__close:hover,
.pysiec-minicart-drawer__close:focus-visible {
  border-color: var(--pysiec-minicart-espresso);
  background: #fff;
}

.pysiec-minicart-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 clamp(16px, 4vw, 24px) 20px;
}

/* Jedna pozycja koszyka (makieta linie 2533-2550) - używana identycznie w
   trybie "added" i "list", patrz komentarz w modal.tpl. */
.pysiec-minicart-drawer__lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pysiec-minicart-drawer__line {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--pysiec-minicart-border);
  border-radius: 18px;
  padding: 12px;
}

.pysiec-minicart-drawer__line-img-link {
  flex: 0 0 auto;
}

.pysiec-minicart-drawer__line-img {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
  background: var(--pysiec-cream, #e8dcc5);
}

.pysiec-minicart-drawer__line-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pysiec-minicart-drawer__line-name {
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--pysiec-minicart-text);
  text-decoration: none;
}

.pysiec-minicart-drawer__line-name:hover,
.pysiec-minicart-drawer__line-name:focus-visible {
  color: var(--pysiec-minicart-accent);
}

.pysiec-minicart-drawer__line-attr {
  display: block;
  font-size: 12.5px;
  color: var(--pysiec-minicart-muted);
  margin-top: 2px;
}

.pysiec-minicart-drawer__line-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
}

.pysiec-minicart-drawer__line-qty {
  max-width: 6.5rem;
}

.pysiec-minicart-drawer__line-remove {
  border: 0;
  background: transparent;
  color: var(--pysiec-minicart-accent);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.pysiec-minicart-drawer__line-remove:hover,
.pysiec-minicart-drawer__line-remove:focus-visible {
  color: var(--pysiec-minicart-accent-hover);
}

.pysiec-minicart-drawer__line-remove.is-loading {
  pointer-events: none;
  opacity: 0.5;
}

.pysiec-minicart-drawer__line-gift {
  font-size: 12.5px;
  color: var(--pysiec-minicart-muted);
}

.pysiec-minicart-drawer__line-price {
  flex: 0 0 auto;
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: 15px;
}

/* Koszyk pusty (makieta linie 2553-2559). */
.pysiec-minicart-drawer__empty {
  background: #fff;
  border: 1px dashed var(--pysiec-minicart-border);
  border-radius: 20px;
  padding: 28px 20px;
  text-align: center;
}

.pysiec-minicart-drawer__empty-title {
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: 17px;
}

.pysiec-minicart-drawer__empty-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--pysiec-minicart-espresso);
  margin: 8px 0 16px;
}

.pysiec-minicart-drawer__empty-btn {
  width: auto;
  height: 46px;
  line-height: 46px;
  margin-top: 0;
  padding: 0 22px;
  display: inline-block;
}

.pysiec-minicart-drawer__ship {
  background: var(--pysiec-cream, #e8dcc5);
  border-radius: 20px;
  padding: 16px;
  margin-top: 12px;
}

.pysiec-minicart-drawer__ship-msg {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pysiec-minicart-espresso);
  line-height: 1.45;
}

.pysiec-minicart-drawer__ship-track {
  height: 7px;
  border-radius: var(--pysiec-radius-pill, 999px);
  background: var(--pysiec-bg, #faf8f3);
  margin-top: 10px;
  overflow: hidden;
}

.pysiec-minicart-drawer__ship-fill {
  height: 7px;
  border-radius: var(--pysiec-radius-pill, 999px);
  transition: width .3s ease;
}

.pysiec-minicart-drawer__suggest {
  margin-top: 22px;
}

.pysiec-minicart-drawer__suggest-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.pysiec-minicart-drawer__suggest-title {
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: 15px;
}

.pysiec-minicart-drawer__suggest-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.pysiec-minicart-drawer__suggest-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--pysiec-line-18, rgba(62, 47, 35, .18));
  border-radius: 16px;
  padding: 10px 12px;
}

.pysiec-minicart-drawer__suggest-img {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--pysiec-cream, #e8dcc5);
}

.pysiec-minicart-drawer__suggest-info {
  flex: 1 1 auto;
  min-width: 0;
}

.pysiec-minicart-drawer__suggest-name {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--pysiec-minicart-text);
  text-decoration: none;
}

.pysiec-minicart-drawer__suggest-name:hover {
  color: var(--pysiec-minicart-accent);
}

.pysiec-minicart-drawer__suggest-price {
  display: block;
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: 14px;
  margin-top: 3px;
}

.pysiec-minicart-drawer__suggest-add {
  width: 38px;
  height: 38px;
  border: 1px solid var(--pysiec-minicart-espresso);
  border-radius: var(--pysiec-radius-pill, 999px);
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  color: var(--pysiec-minicart-espresso);
}

.pysiec-minicart-drawer__suggest-add:hover,
.pysiec-minicart-drawer__suggest-add:focus-visible {
  background: var(--pysiec-minicart-accent);
  border-color: var(--pysiec-minicart-accent);
  color: #fff;
}

.pysiec-minicart-drawer__lapki {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(143, 163, 92, .14);
  border-radius: 14px;
  padding: 11px 13px;
  margin-top: 18px;
}

.pysiec-minicart-drawer__lapki-icon {
  width: 22px;
  height: 22px;
  border-radius: var(--pysiec-radius-pill, 999px);
  background: var(--pysiec-accent-green, #8fa35c);
  color: #fff;
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.pysiec-minicart-drawer__lapki-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--pysiec-minicart-espresso);
}

.pysiec-minicart-drawer__foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--pysiec-minicart-border);
  background: #fff;
  padding: 16px clamp(16px, 4vw, 24px) 20px;
}

.pysiec-minicart-drawer__totals {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13.5px;
  color: var(--pysiec-minicart-espresso);
}

.pysiec-minicart-drawer__totals-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.pysiec-minicart-drawer__grand-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 11px;
  margin-top: 11px;
  border-top: 1px solid var(--pysiec-minicart-border);
}

.pysiec-minicart-drawer__grand-total span:first-child {
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: 15px;
}

.pysiec-minicart-drawer__grand-total span:last-child {
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: 24px;
}

.pysiec-minicart-drawer__btn {
  display: block;
  text-align: center;
  border-radius: var(--pysiec-radius-pill, 999px);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}

.pysiec-minicart-drawer__btn--primary {
  width: 100%;
  height: 52px;
  line-height: 52px;
  margin-top: 14px;
  border: 0;
  background: var(--pysiec-minicart-accent);
  color: #fff;
  font-size: 15.5px;
}

.pysiec-minicart-drawer__btn--primary:hover,
.pysiec-minicart-drawer__btn--primary:focus-visible {
  background: var(--pysiec-minicart-accent-hover);
}

.pysiec-minicart-drawer__foot-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.pysiec-minicart-drawer__foot-row .pysiec-minicart-drawer__btn {
  flex: 1 1 0;
  min-width: 0;
  height: 46px;
  line-height: 44px;
  border: 1px solid var(--pysiec-minicart-border);
  background: transparent;
  color: var(--pysiec-minicart-espresso);
  font-size: 14px;
}

.pysiec-minicart-drawer__foot-row .pysiec-minicart-drawer__btn:hover,
.pysiec-minicart-drawer__foot-row .pysiec-minicart-drawer__btn:focus-visible {
  border-color: var(--pysiec-minicart-espresso);
  background: var(--pysiec-bg, #faf8f3);
}

@media (max-width: 480px) {
  .pysiec-minicart-drawer__panel {
    width: 100%;
  }
}