/* =====================================================================
   VIANEK — identyfikacja wizualna (nadpisuje tokeny i detale style.css / pages.css / cookies.css).
   Ładowany jako ostatni arkusz (uchwyt vn-identity). Właściciel pliku: agent identyfikacji (A2).

   Kierunek: układ i rytm sylveco.pl, charakter Vianek:
   - ciepłe, złamane tło (papier) zamiast bieli, ciepła czerń logo (#1D1D1B) zamiast czystej czerni,
   - Poppins (krój, który klienci znają z vianek.mom) w lekkich odmianach w nagłówkach,
   - jeden stonowany akcent: śliwka (pochodna różu/fuksji z listka w logo i z ikony Vianek),
   - kafelki i galeria produktu na pastelu z koloru produktu (--tint), bez ornamentów i wzorów.
   ===================================================================== */

:root {
  /* tło i tekst */
  --paper: #F2EBEB;            /* różowoszare tło strony */
  --soft: #EBE1E1;             /* sekcje/pola o ton ciemniejsze */
  --ink: #1D1D1B;              /* ciepła czerń (kolor logo) */
  --muted: #5A5654;            /* tekst drugoplanowy: ~5:1 na --paper */
  --line: #D3C5C6;             /* cienkie linie */
  --card: #FFFFFF;             /* białe karty/panele (pola formularzy) */

  /* akcent i kolory marki */
  --accent: #7A2E5A;           /* śliwka: przyciski po najechaniu, promocje, cena promocyjna, focus */
  --accent-ink: #5E2245;       /* śliwka ciemniejsza */
  --accent-soft: #F1E6EC;      /* jasne tło akcentu */
  --vn-rose: #DE9EA0;          /* róż z ikony Vianek (favicon) */
  --vn-leaf-brand: #DD27A3;    /* listek w oryginalnym logo */
  --footer: #1D1C1A;           /* stopka: ciepła głęboka czerń */

  /* pastelowe tła (cieplejsze odpowiedniki tintów sylveco; używane, gdy rdzeń poda var(--t-*)) */
  --t-blush: #F5E6E3;
  --t-lilac: #ECE5EE;
  --t-powder: #E3EBEF;
  --t-sage: #E4EADF;
  --t-peach: #F7E7DA;
  --t-butter: #F4EDD6;
  --tint-fallback: #D8D2C8;    /* produkt bez koloru: neutralny ciepły beż */
  --tint-mix: 15%;             /* starsze przeglądarki: ile koloru produktu trafia do tła zdjęcia */
  --tint-l: .955;              /* jasność pastelu (oklch) */
  --tint-c: .026;              /* maks. nasycenie pastelu (oklch) */

  --f: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

/* Poppins jest szerszy od Josta: skala o 1/16 mniejsza utrzymuje podobną długość wierszy i menu */
html { font-size: 93.75%; }
body { background: var(--paper); color: var(--ink); }
::selection { background: var(--accent); color: #fff; }

h1, h2 { font-weight: 300; letter-spacing: -.035em; }
h1 em, h2 em { font-style: italic; font-weight: 300; }
.label { letter-spacing: .2em; }
.hero-title { font-size: clamp(3.2rem, 8.4vw, 9.6rem); line-height: .94; letter-spacing: -.05em; }

/* focus: wyraźny, w kolorze akcentu na jasnym tle; biały na zdjęciach */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site-header:not(.solid) :focus-visible, .hero :focus-visible, .cat :focus-visible, .cat-hero :focus-visible, .site-footer :focus-visible { outline-color: #fff; }

::-webkit-scrollbar-thumb { background: var(--ink); }

/* ---------- logo (inline SVG, currentColor) ---------- */
.wordmark { display: inline-flex; align-items: center; letter-spacing: 0; line-height: 0; font-size: 0; color: inherit; }
.vn-logo { display: block; width: 128px; height: auto; fill: currentColor; stroke: currentColor; stroke-width: .35; stroke-linejoin: round; stroke-linecap: round; overflow: visible; transition: opacity .25s; }
.vn-logo .vn-leaf { fill: var(--vn-leaf, currentColor); stroke: var(--vn-leaf, currentColor); }
.wordmark:hover .vn-logo { opacity: .7; }
/* nad zdjęciem: biały znak, odrobinę grubszy, z miękkim cieniem — cienkie linie nie giną na jasnym zdjęciu */
.js .site-header:not(.solid) .vn-logo { stroke-width: .55; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35)); }
/* pełny nagłówek: listek w kolorze z oryginalnego logo */
.site-header.solid, .no-hero .site-header, html:not(.js) .site-header, .site-header.menu-open { --vn-leaf: currentColor; }
.foot-brand .wordmark { color: #fff; }
.foot-brand .vn-logo { width: 150px; }
@media (max-width: 1560px) and (min-width: 1021px) { .vn-logo { width: 118px; } }
@media (max-width: 1180px) and (min-width: 1021px) { .vn-logo { width: 100px; } }
@media (max-width: 1020px) {
  .header-in .wordmark { padding-left: 0; justify-self: center; }
  .vn-logo { width: 104px; }
}

/* ---------- nagłówek ---------- */
.site-header { background: var(--paper); border-bottom-color: var(--line); }
.js .site-header.solid, .js .no-hero .site-header { background: rgba(242, 235, 235, .5); -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px); }
.js .site-header:not(.solid) { background: transparent; }
.js .no-hero .site-header:not(.solid) { background: rgba(242, 235, 235, .5); }
.js .site-header.menu-open { background: var(--paper); }
.nav-trigger, .nav-link { font-weight: 500; letter-spacing: clamp(.08em, .7vw, .14em); }
@media (max-width: 1560px) and (min-width: 1021px) {
  .nav-trigger, .nav-link { font-size: .75rem; letter-spacing: clamp(.05em, .45vw, .12em); }
}
@media (max-width: 1280px) and (min-width: 1021px) {
  .nav-trigger, .nav-link { font-size: .6875rem; }
}
.hero-card { background: var(--paper); }
form.search input { font-weight: 300; }
.mega { background: var(--paper); box-shadow: 0 30px 50px rgba(29, 29, 27, .10); }
.bottomnav { background: rgba(242, 235, 235, .96); border-top-color: var(--line); }

/* ---------- przyciski i linki ---------- */
.btn { letter-spacing: .16em; background: var(--ink); border-color: var(--ink); }
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.link:hover { opacity: 1; color: var(--accent); }

/* ---------- kafelek produktu: zdjęcie na pastelu z koloru produktu ---------- */
.ptile { background: #fff; border-color: var(--line); }
.pdp-stage, .pdp-thumbs button {
  --tc: var(--tint, var(--tint-fallback));
  background-color: var(--t-blush);
  background-color: color-mix(in oklab, var(--tc) var(--tint-mix), var(--paper));
}
/* Nowsze przeglądarki: każdy kolor (surowy z meta produktu albo już pastelowy) sprowadzony do tej samej jasności
   i przygaszonego nasycenia — wszystkie kafelki mają równy, spokojny ton, bez krzykliwych różów i błękitów. */
@supports (color: oklch(from red l c h)) {
  .pdp-stage, .pdp-thumbs button { background-color: oklch(from var(--tc) var(--tint-l) min(c, var(--tint-c)) h); }
}
/* lekkie światło od góry: kolor gęstnieje ku dołowi, zdjęcie stoi na tle zamiast w płaskim prostokącie */
.ptile .tp-media { background: #fff; }
.ptile .tp-media img { mix-blend-mode: multiply; }
.tp-brand { color: var(--muted); letter-spacing: .16em; }
.tp-name { letter-spacing: 0; }
.tp-name small { color: var(--muted); }
.tp-price:has(del) { color: var(--accent); }
.tp-price del, .pdp-price del { color: var(--muted); }
.pdp-price:has(del) b { color: var(--accent); }
.tp-add { background: var(--ink); border-color: var(--ink); letter-spacing: .14em; }
a.tp-add:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.tp-add.is-off { background: transparent; color: var(--muted); border-color: var(--line); }

/* plakietki: bazowo ciepła czerń; warianty po klasach (prośba do rdzenia: is-sale / is-new / is-best) */
.tp-badges span { background: var(--ink); color: #fff; letter-spacing: .14em; padding: 6px 9px 5px; }
.tp-badges .is-sale { background: var(--accent); color: #fff; }
.tp-badges .is-new { background: var(--ink); color: #fff; }
.tp-badges .is-best { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* gwiazdki w formularzu opinii: nieaktywne min. 3:1 do tła (WCAG 1.4.11), aktywne w ciepłej czerni */
.rv-stars label { color: #8F887D; }
.stars { background: linear-gradient(90deg, var(--ink) calc(var(--r) * 20%), #D6D0C7 0); -webkit-background-clip: text; background-clip: text; }

/* ---------- karta produktu: galeria na kolorze produktu ---------- */
.pdp-stage > img.is-pack, .pdp-thumbs .is-pack img { mix-blend-mode: multiply; }
.pdp-thumbs { border-top-color: var(--paper); }
.pdp-thumbs button { border-right-color: var(--paper); }
.pdp-thumbs button.is-on::after { border-color: var(--ink); }
.pdp-prev, .pdp-next { background: var(--paper); }
.pdp-prev:hover, .pdp-next:hover { background: var(--ink); color: #fff; }
.pdp-count { background: rgba(248, 246, 242, .9); }

/* ---------- sekcje ---------- */
.news { background: var(--footer); }
.news-card { background: rgba(242, 235, 235, .96); }
.fprice input { background: var(--card); }

/* ---------- stopka ---------- */
.site-footer { background: linear-gradient(180deg, #8B7A7E 0%, #4A4144 38%, #1B1819 72%, #0C0B0B 100%); color: #F3EEEE; }
.fcol-h { border-bottom-color: rgba(237, 234, 229, .28); }

/* ---------- pasek górny (Strefa wiedzy / komunikaty) ---------- */
body .sq-topbar { background: var(--accent); color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: .8125rem; letter-spacing: .01em; }
body .sq-topbar:hover { background: var(--accent-ink); color: #fff; }
body .sq-topbar:focus-visible { outline-color: #fff; outline-offset: -4px; }

/* ---------- formularze ---------- */
input, select, textarea { accent-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .vn-logo { transition: none; }
}

/* długie tytuły banerów list (np. „SYLVECO DERMO”) nie zasłaniają produktów na zdjęciu */
@media (min-width: 761px) { .cat-hero h1.is-long { font-size: clamp(3rem, 5.6vw, 6.2rem); } }

/* =====================================================
   MENU NA KOMPUTERZE: szuflada wysuwana z lewej krawędzi
   (na telefonie bez zmian — menu pod nagłówkiem)
   ===================================================== */
@media (min-width: 1021px) {
  .site-header { z-index: 60; }
  .header-in { gap: clamp(18px, 2vw, 36px); }
  .burger { position: relative; z-index: 72; display: inline-flex; align-items: center; gap: 12px; height: 44px; margin-left: -6px; padding: 0 6px; background: none; border: 0; color: inherit; cursor: pointer; font: 500 .75rem/1 var(--f); letter-spacing: .18em; text-transform: uppercase; }
  .burger::before { content: ""; width: 24px; height: 9px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: transform .35s var(--ease), border-color .2s; }
  .burger::after { content: "Menu"; }
  .burger span { display: none; }
  .site-header.menu-open .burger { color: var(--ink); text-shadow: none; }
  .site-header.menu-open .burger::after { content: "Zamknij"; }
  .site-header.menu-open .burger::before { width: 20px; height: 20px; margin: 0 2px; border: 0; background: linear-gradient(45deg, transparent calc(50% - .75px), currentColor calc(50% - .75px), currentColor calc(50% + .75px), transparent calc(50% + .75px)), linear-gradient(-45deg, transparent calc(50% - .75px), currentColor calc(50% - .75px), currentColor calc(50% + .75px), transparent calc(50% + .75px)); }
  /* rozmycie tła nagłówka tworzy blok zawierający dla position:fixed — przy otwartej szufladzie wyłączone */
  .site-header.menu-open { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  form.search { margin-left: 0; }
  .header-in .tools { margin-left: auto; }
  /* logo VIANEK na środku nagłówka, MENU po lewej, wyszukiwarka i ikony po prawej */
  .header-in { position: relative; }
  .header-in .wordmark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
  .burger { margin-left: 0; }

  .nav {
    position: fixed; z-index: 71; top: 0; bottom: 0; left: 0; flex: none;
    width: min(500px, 92vw); padding-top: var(--vn-nav-top, var(--hh));
    background: #fff; color: var(--ink); text-shadow: none;
    box-shadow: 24px 0 60px rgba(0, 0, 0, .14);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .45s var(--ease), visibility 0s .45s;
  }
  .site-header.menu-open .nav { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s 0s; }
  .nav-top { display: block; padding: 8px 40px 40px; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-trigger, .nav-link { width: 100%; height: auto; padding: 1.15rem 0; justify-content: flex-start; gap: 16px; font-size: .8125rem; letter-spacing: .16em; }
  .nav-trigger .ic, .nav-link .ic { display: block; }
  .nav-trigger::after { margin-left: auto; }
  .nav-trigger::before, .nav-link::before { display: none; }
  .nav-trigger:hover, .nav-link:hover { opacity: .65; }
  .has-mega.open > .nav-trigger::after { margin: 0 0 0 auto; }

  .mega { position: static; max-height: none; overflow: visible; box-shadow: none; border-top: 0; opacity: 1; visibility: visible; transform: none; display: none; transition: none; background: transparent; }
  .has-mega.open > .mega { display: block; animation: fade .3s var(--ease); }
  .mega-inner { max-width: none; padding: 0 0 16px; }
  .rail { display: block; min-height: 0; }
  .rail-item { display: block; }
  .rail-btn, .rail-link a { padding: .9rem 0 .9rem 14px; border-left: 3px solid var(--line); margin-bottom: 4px; }
  .rail-item.is-active .rail-btn { background: transparent; border-left-color: var(--line); }
  .rail-btn:hover, .rail-link a:hover { background: var(--soft); }
  .rail-item.is-open .rail-btn { border-left-color: var(--ink); }
  .rail-item.is-open .rail-btn::after { transform: rotate(135deg); }
  .rail-item.is-active .rail-panel { display: none; }
  .rail-item.is-open .rail-panel { display: block; padding: 8px 0 18px 17px; animation: fade .3s var(--ease); }
  .rail-panel h3 { font-size: 1.4rem; margin-bottom: 1rem; }
  .nav .cols, .nav .cols-brands { grid-template-columns: 1fr 1fr; gap: 22px 24px; }
  .nav .col-needs { grid-column: 1 / -1; }
  .nav .menu-quiz { max-width: none; grid-column: 1 / -1; }
  .mega-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; padding: .6rem 0 .8rem 17px; background: transparent; justify-content: start; }
  .mega-foot a { margin: 0; padding: .7rem 0; line-height: 1.3; }

  html.nav-lock, html.nav-lock body { overflow: hidden; }
  .scrim { z-index: 59; background: rgba(8, 8, 8, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .scrim.on { pointer-events: auto; }
}
@media (min-width: 1021px) and (prefers-reduced-motion: reduce) {
  .nav, .site-header.menu-open .nav { transition: none; }
}

/* ikona menu: 3 kreski (telefon i komputer); po otwarciu krzyżyk */
@media (max-width: 1020px) {
  .burger { gap: 6px; }
  .site-header.menu-open .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .site-header.menu-open .burger span:nth-child(2) { transform: none; opacity: 0; }
  .site-header.menu-open .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .burger span { transition: transform .35s var(--ease), opacity .2s; }
}
@media (min-width: 1021px) {
  .burger::before { height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
}

/* komputer: napis MENU pod ikoną */
@media (min-width: 1021px) {
  .burger { flex-direction: column; justify-content: center; gap: 6px; height: auto; min-height: 44px; padding: 4px 6px; font-size: .625rem; letter-spacing: .2em; }
  .burger::after { margin-right: -.2em; }
}

/* Serie Vianek: zdjęcia na białym tle, bez kolorowej maski z koloru produktu */
.vs-media { background: transparent; }
/* packshoty serii mają własny margines w pliku */
.vs-media img { width: 92%; height: 92%; mix-blend-mode: normal; }