/* ==========================================================================
   Tutokupisz – Wishlist (Minimal Commerce v1.8)
   Układ: [Thumb | Treść (tytuł, cena, akcje)]
   Header 1:1 jak w mini-carcie, „Czytaj opis” = full width.
   ========================================================================== */

/* ===== Tokeny ============================================================ */
#tuto-wishlist {
  --ink:#0b1220;
  --muted:#5b687a;
  --accent:#2f6df6;
  --danger:#e53935;

  --bg:#ffffff;
  --tile-bg:#ffffff;
  --tile-brd:#e7ebf3;

  --radius:10px;
  --thumb:68px;

  --btn-h:32px;
  --btn-r:8px;

  --focus:0 0 0 3px color-mix(in oklab, var(--accent) 35%, #fff);

  --sp-1:6px;
  --sp-2:10px;
  --sp-3:12px;
  --sp-4:14px;

  --surface-subtle:#f7f8fb; /* zgodność z mini-cart */
}

/* ===== Overlay & Panel =================================================== */
#tuto-wishlist-overlay[hidden],
#tuto-wishlist[hidden] {
  display:none !important;
}
#tuto-wishlist-overlay {
  position:fixed;
  inset:0;
  background:rgba(9,13,23,.36);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease-out;
  z-index:100000;
}
#tuto-wishlist-overlay[data-open="1"] {
  opacity:1;
  pointer-events:auto;
}

#tuto-wishlist {
  position:fixed;
  top:0;
  right:0;
  height:100dvh;
  width:min(92vw, 392px);
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  transform:translateX(100%);
  transition:transform .2s ease;
  z-index:100001;
  box-shadow:0 10px 30px rgba(12,18,31,.16);
}
#tuto-wishlist[data-open="1"] {
  transform:none;
}
@media (max-width:480px) {
  #tuto-wishlist {
    width:100vw;
  }
}

/* ===== Header (spójny z mini-cart) ====================================== */
.tuto-wishlist-head {
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2);
  padding:14px 16px;
  background:#fff;
  border-bottom:1px solid color-mix(in oklab, var(--ink) 6%, #fff);
}
.tuto-wishlist-head h2 {
  margin:0;
  font:700 1.12rem/1.2 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
}
.tuto-wishlist-head__count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  font:800 .78rem/1 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:#1c2742;
  background:#f2f5fb;
  border:1px solid #e3e9f7;
}
.tuto-wishlist-close {
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  color:var(--muted);
  display:inline-grid;
  place-items:center;
  border-radius:12px;
  padding:6px;
  font-size:1.25rem;
  line-height:1;
  transition:
    transform .18s cubic-bezier(.2,.6,.2,1),
    background-color .18s,
    color .18s;
}
.tuto-wishlist-close:hover {
  background:var(--surface-subtle);
  color:var(--ink);
  transform:scale(1.02);
}
.tuto-wishlist-close:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 30%, #fff);
}

/* ===== Content =========================================================== */
#tuto-wishlist-content {
  flex:1;
  overflow:auto;
  padding:var(--sp-2);
  scrollbar-gutter:stable;
}
.tuto-wishlist__empty {
  padding:18px 8px;
  color:var(--muted);
  text-align:center;
  font-size:.95rem;
}

/* ===== Lista ============================================================= */
.tuto-wishlist-list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}

/* ===== KAFEL ============================================================= */
.tuto-wishlist-item {
  display:grid;
  grid-template-columns: var(--thumb) minmax(0,1.35fr) minmax(0,1fr);
  grid-template-rows:auto auto auto;
  column-gap:var(--sp-2);
  row-gap:var(--sp-1);
  align-items:start;
  padding:var(--sp-2);
  background:var(--tile-bg);
  border:1px solid var(--tile-brd);
  border-radius:var(--radius);
}
.tuto-wishlist-item:focus-within {
  outline:none;
  box-shadow:var(--focus);
}
@media (max-width:420px) {
  .tuto-wishlist-item {
    grid-template-columns: var(--thumb) minmax(0,1fr);
    grid-template-rows:auto auto auto auto;
  }
}

/* ===== THUMB ===== */
.tuto-wishlist-item__thumb {
  grid-column:1;
  grid-row:1 / span 2;
  width:var(--thumb);
  height:var(--thumb);
  border-radius:8px;
  overflow:hidden;
  display:block;
  background:#f4f6fa;
  align-self:center;
}
.tuto-wishlist-item__thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  backface-visibility:hidden;
}

/* ===== MAIN ===== */
.tuto-wishlist-item__title {
  grid-column:2 / -1;
  grid-row:1;
  display:block;
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  font-size:.98rem;
  line-height:1.26;
  overflow-wrap:break-word;
  word-break:break-word;
  margin-top:2px;
}
.tuto-wishlist-item__title:hover {
  text-decoration:underline;
}

.tuto-wishlist-item__price {
  grid-column:2 / -1;
  grid-row:2;
  display:flex;
  align-items:baseline;
  gap:6px;
  flex-wrap:wrap;
  color:var(--ink);
  margin-top:1px;
}
.tuto-wishlist-item__price .price {
  font-size:.90rem;
  font-weight:400;
  line-height:1.2;
  white-space:nowrap;
}
.tuto-wishlist-item__price del {
  opacity:.55;
  text-decoration:line-through;
}
.tuto-wishlist-item__price ins {
  text-decoration:none;
  font-weight:400;
}
.tuto-wishlist-item__price .price bdi,
.tuto-wishlist-item__price ins bdi {
  font-weight:400;
  font-size:inherit;
  line-height:inherit;
}

.tuto-wishlist-item .stock.in-stock,
.tuto-wishlist-item__price .tuto-stock--in {
  display:none !important;
}

.tuto-wishlist-item__actions {
  grid-column:2 / -1;
  grid-row:3;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:2px;
}

#tuto-wishlist .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  height:var(--btn-h);
  padding:0 12px;
  border-radius:var(--btn-r);
  border:1px solid var(--tile-brd);
  background:#fff;
  color:var(--ink);
  font:500 .86rem/1 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
}
#tuto-wishlist .btn:hover {
  background:#f6f8fc;
}
#tuto-wishlist .btn:focus-visible {
  outline:none;
  box-shadow:var(--focus);
}
#tuto-wishlist .btn[disabled],
#tuto-wishlist .btn.is-busy {
  opacity:.55;
  cursor:not-allowed;
}

#tuto-wishlist .btn--icon-sm {
  width:var(--btn-h);
  padding:0;
}
#tuto-wishlist .btn .btn__icon {
  width:14px;
  height:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#tuto-wishlist .btn .btn__icon svg {
  width:14px !important;
  height:14px !important;
  display:block !important;
  fill:currentColor !important;
  stroke:currentColor !important;
  max-width:none !important;
  max-height:none !important;
}

/* ===== READMORE ===== */
.tuto-wishlist-item__readmore {
  grid-column:1;
  grid-row:3;
  justify-self:start;
  appearance:none;
  border:1px solid var(--tile-brd);
  background:#fff;
  color:var(--accent);
  height:28px;
  padding:0 10px;
  border-radius:8px;
  cursor:pointer;
  font:600 .80rem/1 system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
.tuto-wishlist-item__readmore:hover {
  background:#f6f8fc;
}
.tuto-wishlist-item__readmore:focus-visible {
  outline:none;
  box-shadow:var(--focus);
}
.tuto-wishlist-item__readmore--close {
  grid-column:auto;
  grid-row:auto;
  margin-top:8px;
}

/* ===== OPIS ===== */
.tuto-wishlist-item__desc {
  grid-column:1 / -1;
  grid-row:4;
  margin-top:8px;
  padding:10px 12px;
  border:1px solid var(--tile-brd);
  border-radius:8px;
  background:#fafcff;
  color:var(--ink);
  font-size:.92rem;
  line-height:1.5;
}
.tuto-wishlist-item__desc > :first-child {
  margin-top:0;
}
.tuto-wishlist-item__desc > :last-child {
  margin-bottom:0;
}
@media (max-width:420px) {
  .tuto-wishlist-item__thumb {
    grid-row:1 / span 2;
  }
  .tuto-wishlist-item__readmore {
    grid-row:3;
  }
  .tuto-wishlist-item__desc {
    grid-row:4;
  }
}

/* ===== Skeleton ========================================================== */
.tuto-wishlist-item.is-skeleton {
  background:#f3f5f9;
  border:1px solid #e8edf6;
}
.sk {
  display:block;
  border-radius:8px;
  background:linear-gradient(90deg,#eef2f7 25%,#e6edf6 37%,#eef2f7 63%);
  background-size:400% 100%;
  animation:sk 1.1s infinite;
}
.sk-thumb {
  width:var(--thumb);
  height:var(--thumb);
}
.sk-line {
  height:12px;
  width:70%;
}
.sk-line--short {
  width:46%;
}
@keyframes sk {
  0% { background-position:100% 0; }
  100% { background-position:-100% 0; }
}

/* ===== SVG sanity ======================================================== */
#tuto-wishlist svg {
  max-width:none !important;
  height:auto;
}

/* ===== Modyfikatory ====================================================== */
#tuto-wishlist.wl--compact {
  --thumb:62px;
  --sp-1:4px;
  --sp-2:8px;
  --btn-h:30px;
}
#tuto-wishlist.wl--roomy {
  --thumb:76px;
  --sp-2:12px;
  --sp-3:14px;
  --btn-h:34px;
}

/* ===== Footer CTA (sticky) ============================================== */
.tuto-wishlist-footer {
  position:sticky;
  bottom:0;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-2);
  padding:var(--sp-2);
  border-top:1px solid var(--tile-brd);
  background:#fff;
}
.tuto-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  width:100%;
  min-height:36px;
  padding:.42rem .68rem;
  border-radius:10px;
  border:1px solid var(--tile-brd);
  background:#fff;
  color:var(--ink);
  font:500 .86rem/1.15 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  text-decoration:none;
}
.tuto-btn .btn__icon svg {
  width:14px !important;
  height:14px !important;
  display:block !important;
}
.tuto-btn.primary {
  background:#f3f6ff;
  border-color:#dbe6ff;
  color:color-mix(in oklab, var(--accent) 98%, #0b1220);
}
.tuto-btn.primary:hover {
  background:#edf3ff;
}
.tuto-btn.outline {
  background:#fff;
  color:var(--ink);
}

/* ===== FIX 1: serce – neutralne, po kliknięciu czerwone z delikatnym glosem ===== */
/* Dotyczy tylko serca z klasy .tuto-iconbtn--heart (loop / header / grid). */

/* Stan bazowy: neutralny, jak ikona koszyka. */
.tuto-iconbtn--heart[data-wishlist-toggle],
.tuto-iconbtn--heart[data-wishlist-toggle] .btn__icon,
.tuto-iconbtn--heart[data-wishlist-toggle] svg,
.tuto-iconbtn--heart[data-wishlist-toggle] svg * {
  color:var(--ink,#0f172a);
  fill:currentColor;
  stroke:currentColor;
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

.tuto-iconbtn--heart[data-wishlist-toggle] {
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--ink,#0f172a) 14%, #fff);
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.06);
}

/* Hover: delikatne podbicie, wciąż neutralne. */
.tuto-iconbtn--heart[data-wishlist-toggle]:hover {
  background:#f6f8fc;
  border-color:color-mix(in oklab, var(--ink,#0f172a) 22%, #fff);
  transform:translateY(-1px);
}

/* Stan aktywny: serce czerwone + bardzo delikatny czerwony „glow” w tle. */
.tuto-iconbtn--heart[data-wishlist-toggle].is-active,
.tuto-iconbtn--heart[data-wishlist-toggle][aria-pressed="true"] {
  background:
    radial-gradient(
      circle at 50% 50%,
      color-mix(in oklab, var(--promo,#ef4444) 14%, #fff) 0,
      color-mix(in oklab, var(--promo,#ef4444) 4%, #fff) 45%,
      #ffffff 80%
    );
  border-color: color-mix(in oklab, var(--promo,#ef4444) 70%, #fff);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--promo,#ef4444) 45%, #fff),
    0 2px 6px rgba(239,68,68,.25);
}

.tuto-iconbtn--heart[data-wishlist-toggle].is-active .btn__icon,
.tuto-iconbtn--heart[data-wishlist-toggle][aria-pressed="true"] .btn__icon,
.tuto-iconbtn--heart[data-wishlist-toggle].is-active svg,
.tuto-iconbtn--heart[data-wishlist-toggle][aria-pressed="true"] svg,
.tuto-iconbtn--heart[data-wishlist-toggle].is-active svg *,
.tuto-iconbtn--heart[data-wishlist-toggle][aria-pressed="true"] svg * {
  color:var(--promo,#ef4444);
  fill:currentColor;
  stroke:currentColor;
}

/* Dla pewności: gdyby w panelu bocznym pojawiło się serce z tą klasą. */
#tuto-wishlist .tuto-iconbtn--heart[data-wishlist-toggle] {
  border-radius:999px;
}

/* ==========================================================================
   TOAST NOTIFICATIONS (Powiadomienia)
   Wzorowane na logice koszyka, ale z akcentem czerwonym (serce).
   ========================================================================== */

.tuto-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100002;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none; /* Żeby nie blokować klikania pod spodem */
}

.tuto-toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  max-width: 320px;
  padding: 14px 18px;
  background: var(--surface, #fff);
  color: var(--ink, #0f172a);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04);
  border: 1px solid var(--tile-brd, #e7ebf3);
  pointer-events: auto;
  overflow: hidden;
  
  /* Animacja wjazdu */
  animation: tutoToastIn 0.35s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
  will-change: transform, opacity;
}

/* Stan: Wyjście (dodawane przez JS) */
.tuto-toast.is-hiding {
  animation: tutoToastOut 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Wskaźnik koloru (Kropka / Pasek) */
.tuto-toast::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 1. Dodano (Aktywne) - Czerwony */
.tuto-toast.toast--added::before {
  background-color: var(--danger, #e53935);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger, #e53935) 20%, transparent);
}

/* 2. Usunięto - Szary */
.tuto-toast.toast--removed::before {
  background-color: var(--muted, #5b687a);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--muted, #5b687a) 20%, transparent);
}

.tuto-toast__content {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Pasek czasu (opcjonalny, znika z czasem) */
.tuto-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--danger, #e53935);
  width: 100%;
  transform-origin: left;
  animation: tutoToastTimer 3s linear forwards;
}
.tuto-toast.toast--removed .tuto-toast__progress {
  background: var(--muted, #5b687a);
}

@keyframes tutoToastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tutoToastOut {
  to { opacity: 0; transform: translateY(-10px) scale(0.95); }
}

@keyframes tutoToastTimer {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Mobile: na dole ekranu, pełna szerokość minus marginesy */
@media (max-width: 480px) {
  .tuto-toast-container {
    left: 16px;
    right: 16px;
    bottom: 20px;
    align-items: center;
  }
  .tuto-toast {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
  }
}