/* ============================================================
   DIMORRA — motywy kolekcji
   Ten sam układ co Dimorra Home, inna gra kolorami.

   theme-osiecka  — woda i fale: chłodna morska paleta (piana,
                    petrol, głębia) + animowane fale
   theme-luxury   — nokturn: czerń i złoto na tym samym układzie
   ============================================================ */

/* ------------------------------------------------------------
   OSIECKA — podmiana palety przez zmienne (strona zostaje jasna,
   więc cała semantyka kolorów działa bez zmian)
   ------------------------------------------------------------ */
body.theme-osiecka {
  --ivory: #edf3f2;
  --ivory-2: #dfeae8;
  --stone: #cbdcda;
  --ink: #0f1e21;
  --ink-70: #2f464a;
  --ink-50: #476165;
  --gold: #175f5b;    /* petrol — akcent (kontrast AA na pianie) */
  --gold-2: #7fbcb4;  /* jasna morska zieleń na ciemnych sekcjach */
  --dark: #0b191d;    /* głębia */
  --dark-2: #10262b;
  --paper-line: rgba(15, 30, 33, 0.15);
  --dark-line: rgba(237, 243, 242, 0.14);
}
body.theme-osiecka ::selection { background: var(--gold); color: var(--ivory); }

/* ------------------------------------------------------------
   FALE — dzielniki sekcji i animowane warstwy (GSAP przesuwa
   .wave__layer w pętli; svg jest 2x szerszy niż ekran)
   ------------------------------------------------------------ */
.waves {
  position: relative;
  height: clamp(60px, 9vw, 130px);
  overflow: hidden;
  pointer-events: none;
}
.waves--on-dark { background: var(--dark); }
.wave__layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  will-change: transform;
}
.wave__layer svg { width: 100%; height: 100%; display: block; }
.wave__layer--back { opacity: 0.45; }

/* fala doklejona do dołu hero */
.vhero .waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 3;
}

/* delikatne "unoszenie się" kart produktów na wodzie */
body.theme-osiecka .pcard__media > img { transition: transform 1.2s var(--ease-out); }

/* ------------------------------------------------------------
   LUXURY — nokturn: celowane nadpisania (kafle produktowe
   zostają kremowe, żeby multiply działał)
   ------------------------------------------------------------ */
body.theme-luxury {
  --lx-bg: #100d0a;
  --lx-text: #f3ecdd;
  --lx-muted: rgba(243, 236, 221, 0.62);
  --gold: #c8a35c;          /* na ciemnym tle jaśniejsze złoto jest AA */
  --paper-line: rgba(243, 236, 221, 0.16);
  background: var(--lx-bg);
  color: var(--lx-text);
}
body.theme-luxury .section { background: var(--lx-bg); }
body.theme-luxury .lead { color: var(--lx-muted); }
body.theme-luxury .section-title em { color: var(--gold); }
body.theme-luxury .filter-count,
body.theme-luxury .pinfo__type { color: var(--lx-muted); }

/* karty produktów: kremowy kafel na czerni, złota obwódka */
body.theme-luxury .pcard__media {
  background: #f6f2ea;
  border: 1px solid rgba(200, 163, 92, 0.4);
}
body.theme-luxury .pcard__body h3 { color: var(--lx-text); }
body.theme-luxury .pcard__body .sku { color: var(--lx-muted); }
body.theme-luxury .pcard__body .price { color: var(--gold); }
body.theme-luxury .pcard__tag { background: rgba(16, 13, 10, 0.75); color: var(--lx-text); }

/* przyciski liniowe na czerni */
body.theme-luxury .btn--line { border-color: rgba(243, 236, 221, 0.4); color: var(--lx-text); }
body.theme-luxury .btn--line::before { background: var(--lx-text); }
body.theme-luxury .btn--line:hover { color: var(--lx-bg); border-color: var(--lx-text); }

/* sekcja story na jeszcze głębszej czerni + złote linie */
body.theme-luxury .section--dark { background: #0a0806; }
body.theme-luxury .story__stats { border-top-color: rgba(200, 163, 92, 0.3); }

/* marquee ze złotą obwódką */
body.theme-luxury .marquee { border-block-color: rgba(200, 163, 92, 0.3); }

/* stopka spójna z resztą */
body.theme-luxury .footer { background: #0a0806; }