/* ============================================================
   La Manuli - wzornik koralików WODNYCH, redesign v2
   Tylko różnice względem /css/library.css (ładowany po nim):
   miętowy akcent (zakładki, chipy, ramki kart, hero, zaznaczenie),
   siatka heksagonalna, kulki zamiast koralików z otworem.
   Przyciski bez zmian: btn--primary (niebieski) = narzędzia,
   btn--sun (żółty) = zakupy (lista zakupów, sklep). Tekst na mięcie: --mint-ink / --blue-ink.
   ============================================================ */

/* ---------- 0. Kulka wodna (CSS) i kolory kategorii ---------- */
/* --c ustawia JS (legenda) albo klasa kategorii (chip); color-mix z bezpiecznym fallbackiem */
.lmw-bead,
.lmw-browse .lib-cats .lib-chip__dot,
.lmw-browse .lib-cats .chip[aria-checked="true"] .lib-chip__dot{
  background:
    radial-gradient(circle at 33% 28%, rgba(255,255,255,.9) 0 8%, rgba(255,255,255,0) 17%),
    radial-gradient(circle at 40% 36%, var(--c, var(--mint)) 0, var(--c, var(--mint)) 100%);
  background:
    radial-gradient(circle at 33% 28%, rgba(255,255,255,.9) 0 8%, rgba(255,255,255,0) 17%),
    radial-gradient(circle at 40% 36%, color-mix(in srgb, var(--c, var(--mint)) 86%, #fff) 0, var(--c, var(--mint)) 48%, color-mix(in srgb, var(--c, var(--mint)) 74%, #000) 100%);
  box-shadow:0 1px 2px rgba(40,66,78,.28);
}
.lmw-bead.is-light{ box-shadow:0 1px 2px rgba(40,66,78,.28), inset 0 0 0 1px rgba(40,66,78,.14); }

.lmw-cat--all      { --c:#46C7B8; }
.lmw-cat--zwierzaki{ --c:#F89B3C; }
.lmw-cat--pojazdy  { --c:#4E8FE0; }
.lmw-cat--postacie { --c:#F58FC2; }
.lmw-cat--natura   { --c:#5FC07A; }
.lmw-cat--slodkosci{ --c:#E85AA0; }
.lmw-cat--symbole  { --c:#F0564B; }
.lmw-cat--fantazja { --c:#9A6FD0; }
.lmw-cat--kosmos   { --c:#2E63AE; }
.lmw-cat--swieta   { --c:#3C8F54; }
.lmw-cat--halloween{ --c:#D2761C; }
/* kategorie z kolejnych paczek - kolory z palety wodnej (bez nich kulka chipu miała domyślną miętę) */
.lmw-cat--jedzenie { --c:#A9744F; }
.lmw-cat--morze    { --c:#5BBCEC; }
.lmw-cat--sport    { --c:#2E8E82; }
.lmw-cat--emotki   { --c:#FBD94B; }

/* gradienty SVG kulek: kontener poza ekranem (nie display:none - gradienty muszą istnieć) */
.lmw-defs{ position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }

/* ---------- 1. Nawigacja: aktywny „Wzornik" w mięcie ---------- */
.site-nav__link.is-current{ background:var(--mint-soft); color:var(--mint-ink); }
.mobile-menu__link.is-current{ color:var(--mint-ink); }

/* ---------- 2. Hero: mięta + kropki w układzie heks (jak piny podkładki) ---------- */
.lib-hero--water{
  background-color:var(--mint-soft);
  background-image:
    radial-gradient(circle, var(--pad-water-edge) 2.2px, transparent 2.8px),
    radial-gradient(circle, var(--pad-water-edge) 2.2px, transparent 2.8px);
  background-size:22px 38px;
  background-position:0 0, 11px 19px;
}
.lib-hero--water .lib-counter{ box-shadow:0 3px 0 var(--pad-water-edge); }
.lib-hero--water .lib-counter__bead{
  background:
    radial-gradient(circle at 33% 28%, rgba(255,255,255,.9) 0 8%, rgba(255,255,255,0) 17%),
    radial-gradient(circle at 40% 36%, #B5ECE4 0, #46C7B8 48%, #2E8E82 100%);
  box-shadow:0 1px 2px rgba(40,66,78,.28);
}
.lib-hero--water .lib-counter__n:empty::before{ content:"\00a0\00a0"; }
.lib-hero--water .lib-search__icon{ color:var(--mint-ink); --icon-accent:var(--mint-line); }
.lib-hero--water .lib-search__input{ box-shadow:0 3px 0 var(--pad-water-edge); }
.lib-hero--water .lib-search__input:focus{ border-color:var(--mint-select); }

/* ---------- 3. Chipy, filtry, sortowanie ---------- */
.lmw-browse .chip{ border-color:var(--pad-water-edge); }
.lmw-browse .chip:hover{ background:var(--mint-soft); border-color:var(--mint-edge); color:var(--blue-ink); }
.lmw-browse .chip[aria-checked="true"],
.lmw-browse .chip[aria-pressed="true"]{
  background:var(--mint-ink);
  border-color:var(--mint-ink);
  color:#fff;
}
.lmw-browse .lib-cats .chip{ padding:0 14px 0 9px; }
.lmw-browse .lib-cats .lib-chip__dot{ width:18px; height:18px; }

.lmw-browse .lib-tools__toggle{ --icon-accent:var(--mint-line); }
.lmw-browse .lib-tools__toggle[aria-expanded="true"]{ background:var(--mint-soft); border-color:var(--mint-edge); }
.lmw-browse .lib-tools__badge{ background:var(--mint-ink); }
@media (max-width:767.98px){
  .lmw-browse .lib-panel{ background:var(--bg-mint); border-color:var(--mint-soft); }
}
.lmw-browse .lib-fgroup__label .icon{ color:var(--mint-ink); --icon-accent:var(--mint-line); }
.lmw-browse .lib-select::after{ border-top-color:var(--mint-ink); }
.lmw-browse .lib-select select{ border-color:var(--pad-water-edge); }
.lmw-browse .lib-select select:hover{ border-color:var(--mint-edge); }

/* ---------- 4. Karta wzoru wodnego ---------- */
.card--pattern.card--water{
  --tone-soft:#fff;
  --tone-edge:var(--mint-edge);
  gap:8px;
  background:#fff;
  border-color:var(--mint-edge);
}
.card--water .card__thumb{
  aspect-ratio:.94;
  padding:0;
  border-radius:var(--radius-sm);
  background-color:var(--tone-soft, var(--mint-soft));
  background-image:none;
}
.card--water .card__row{ padding-top:0; }
/* meta (gwiazdki trudności, kolory, czas) i gwiazdki w filtrze: 1:1 z library.css (.card__meta, .stars) */

/* pusty stan, „Wczytaj więcej" (po starcie JS siatka nie rezerwuje już 100vh) */
.lib-grid.is-ready:empty{ min-height:0; }
.lmw-browse .lib-empty{ background:var(--bg-mint); }
.lmw-empty__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.lmw-browse .lib-more__bar{ background:var(--mint-soft); }
.lmw-browse .lib-more__fill{ background:var(--mint-select); }

/* ---------- 5. Modal: podkładka z kulkami ---------- */
.modal--water .modal__cat{ border-color:var(--mint-edge); background:var(--mint-soft); color:var(--blue-ink); }
.modal--water .modal__close{ background:var(--mint-soft); color:var(--blue-ink); --icon-accent:var(--mint-ink); }
.modal--water .modal__close:hover{ background:#D3F1E4; }
.modal--water .modal__art{
  padding:clamp(8px, 1.4vw, 14px);
  border-color:var(--mint-edge);
  background:var(--mint-soft);
}
.modal--water .modal__board{ padding:0; border-radius:16px; }
.modal--water .modal__board svg{ aspect-ratio:105.8 / 113; }
.modal--water .modal__subtitle{ color:var(--mint-ink); }

.modal--water .lib-facts > li{ background:var(--bg-mint); color:var(--ink); }
.modal--water .lib-facts .icon{ color:var(--mint-ink); --icon-accent:var(--mint-line); }

.modal--water .lib-legend{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.modal--water .lib-legend > li{ gap:8px; padding-right:10px; background:var(--bg-mint); }
.lmw-bead{
  display:block;
  width:28px;
  height:28px;
  border-radius:50%;
}

/* ---------- 5b. Krok „Lista zakupów": miętowy akcent ---------- */
.modal--water .lib-shop__back{ color:var(--mint-ink); --icon-accent:var(--mint-line); }
.modal--water .lib-shop__back:hover{ background:var(--mint-soft); color:var(--mint-ink); }
.modal--water .lib-shop__art{ padding:6px; border-color:var(--mint-edge); background:var(--mint-soft); }
.modal--water .lib-shop__art .modal__board{ padding:0; border-radius:10px; }
@media (min-width:768px){
  .modal--water .lib-shop__art{ padding:10px; }
}
.modal--water .lib-shop__tip{ background:var(--mint-soft); color:var(--mint-ink); }
.modal--water .lib-shop__tip .icon{ color:var(--mint-ink); --icon-accent:var(--mint-line); }
.modal--water .lib-shop__table thead th{ color:var(--mint-ink); }
.modal--water .lib-shop__table tbody th,
.modal--water .lib-shop__table tbody td{ background:var(--bg-mint); }
.modal--water .lib-shop__color .lmw-bead{ flex:0 0 auto; }

/* ---------- 6. Sekcja SEO ---------- */
.lib-seo--water{ background:var(--bg-mint); }
/* FAQ w miętowej oprawie: wariant .faq--water z lm.css (klasa w HTML) */

@media (prefers-reduced-motion:reduce){
  .lmw-browse .lib-more__fill{ transition:none; }
  .card--water:active{ transform:none; }
}
/* lista zakupów wzornika wodnego: zdanie o zestawach zamiast kolumny opakowań */
.lib-shop__note{ margin:10px 0 0; font-size:var(--fs-small, .875rem); line-height:1.5; color:var(--ink-soft); }