/* ============================================================
   La Manuli - wspólny arkusz (redesign v2)
   Tokeny 1:1 z lamanuli-tokens.css + dopisane z spec. rozdz. 2,
   reset, typografia, układ i komponenty współdzielone przez strony.
   Breakpointy (tylko w @media): 480 / 768 / 1000 / 1280.
   ============================================================ */

/* ---------- 1. Tokeny ---------- */
:root{
  /* kolor marki (bez zmian) */
  --blue:#68C5EF; --blue-soft:#EAF6FD; --blue-deep:#1B72A6; --blue-ink:#0E4D6E;
  --yellow:#FFE56A; --coral:#F490A2; --mint:#8BDDC0; --violet:#B79DEA;
  --ink:#33424E; --ink-soft:#5C6E7A; --bg:#FFFFFF; --bg-alt:#F6FBFE;
  --border-card:#E8F3FA; --border-subtle:#D0E8F5;
  --footer-bg:#0F3B55; --footer-text:#BFD9E8; --footer-muted:#8FB4C9;
  --notice-bg:#FFF8DC; --notice-text:#6B5712;

  /* tekst na żółci, "plastikowe" krawędzie, pastelowe saszetki */
  --yellow-ink:#5D4A00;
  --blue-edge:#3E9FCB;
  --yellow-edge:#E3C23A;
  --ghost-edge:#BFE3F6;
  --coral-soft:#FDE9ED;  --mint-soft:#E4F7EF;  --violet-soft:#F1EBFC;  --yellow-soft:#FFF8DC;  --peach-soft:#FFF1E6;
  --coral-edge:#F490A2;  --mint-edge:#8BDDC0;  --violet-edge:#B79DEA;  --yellow-soft-edge:#F2D35B; --peach-edge:#F7C38A;
  --focus:#1B72A6;
  --peg:#D0E8F5;
  --danger:#B42335;
  --success:#17785F;

  /* dopisane (spec. rozdz. 2, "Do dopisania") */
  --mint-ink:#1E6B47;        /* tekst na mięcie, chip aktywny (wodne) */
  --mint-line:#2A9A78;       /* drugi ton ikon na mięcie */
  --mint-select:#1E8A68;     /* pierścień zaznaczenia koloru (wodne) */
  --bg-mint:#F3FBF7;         /* tło strony narzędzia wodnego */
  --peg-water:#CDEFE2;       /* pin podkładki wodnej */
  --pad-water-edge:#BEE9D8;  /* obrys podkładki wodnej */
  --icon-accent:#2E8BBF;     /* drugi ton ikon - kontekstowy, nadpisywany lokalnie */
  /* gwiazdki najwyższego poziomu trudności (.stars--top, ponad 800 koralików): przejście malina - pomarańcz - złoto - turkus -
     niebieski - fiolet; każdy punkt przejścia ma kontrast co najmniej 3,6:1 na bieli i na pastelach kart */
  --star-1:#D62A55; --star-2:#C85A0A; --star-3:#A57200; --star-4:#0C8770; --star-5:var(--blue-deep); --star-6:#7652C8;

  /* typografia - skala (jedna reguła dla całego serwisu, opis w sekcji 3) */
  --font-head:"Nunito","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Nunito Sans","Segoe UI",system-ui,sans-serif;
  --fs-display: clamp(2.75rem, 1.83rem + 3.93vw, 5.25rem);   /* 44-84 px: TYLKO hero strony głównej */
  --fs-h1:      clamp(2rem, 1.72rem + 1.2vw, 2.75rem);       /* 32-44 px: H1 każdej innej strony */
  --fs-h1-tool: 1rem;                                        /* 16 px (24 px od 1000 px): wyjątek - kompaktowy H1 w nagłówku generatora */
  --fs-h2:      clamp(1.625rem, 1.35rem + 1.17vw, 2.375rem); /* 26-38 px: H2 sekcji (home, „O marce”, sekcje pod narzędziem) */
  --fs-h2-text: clamp(1.5rem, 1.3rem + .8vw, 2rem);          /* 24-32 px: H2 w treści i blokach podrzędnych (artykuł, strony tekstowe, SEO, FAQ, strona wzoru, pasek CTA) */
  --fs-h3:      clamp(1.25rem, 1.16rem + .39vw, 1.5rem);     /* 20-24 px: H3 */
  --fs-h4:      1.0625rem;                                   /* 17 px: tytuł małej karty, pytanie FAQ */
  --fs-lead:    clamp(1.0625rem, 1.02rem + .18vw, 1.1875rem);/* 17-19 px: lead pod H1 i pod H2 sekcji */
  --fs-text:    1.0625rem;                                   /* 17 px: tekst do czytania (artykuły, strony tekstowe, bloki SEO) */
  --fs-body:    1rem;                                        /* 16 px: tekst interfejsu, opisy kart, odpowiedzi FAQ, ramki */
  --fs-small:   .875rem;
  --fs-micro:   .8125rem;
  --lh-text:    1.7;                                         /* interlinia tekstu do czytania */
  --measure:    36rem;                                       /* miara tekstu: ok. 70 znaków przy 17 px, 75 przy 16 px */

  /* odstępy */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* kształt */
  --radius:22px; --radius-sm:14px; --radius-lg:32px; --radius-pill:999px;

  /* cienie */
  --shadow-card:0 10px 30px rgba(14,77,110,.08);
  --shadow-lift:0 22px 44px rgba(14,77,110,.14);
  --edge:5px;
  --edge-dense:2px;

  /* layout */
  --header-h:76px; --header-h-sm:64px;
  --container:1200px;
  --container-text:720px;
  --gutter: clamp(1rem, .6rem + 1.8vw, 2.5rem);
  --crumbs-before: clamp(4px, 2vw, 24px);    /* nagłówek serwisu -> okruszki (dopełnienie górne sekcji z okruszkami) */
  --crumbs-after:  clamp(2px, .8vw, 10px);   /* okruszki -> H1 / pierwsza treść */

  /* ruch */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-press:cubic-bezier(.34,1.56,.64,1);
  --dur-1:.12s;
  --dur-2:.22s;
  --dur-3:.4s;
  --dur-bead:.3s; --bead-stagger:8ms;
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h-sm) + 12px);
}
body{
  margin:0;
  min-width:320px;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  /* stopka zawsze przy dolnej krawędzi okna: krótkie strony (404, źródła grafik) na wysokim ekranie
     zostawiały pod stopką biały pas */
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}
body > main{ flex:1 0 auto; }
html.menu-open, html.menu-open body{ overflow:hidden; }
img{ display:block; max-width:100%; height:auto; }
svg{ overflow:visible; }
button, input, select, textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
ul, ol{ margin:0; padding:0; }
p, figure, blockquote{ margin:0; }
[hidden]{ display:none !important; }

/* ---------- 3. Typografia ---------- */
/* Skala nagłówków i tekstu - jedna reguła, same tokeny (arkusze stron nie wpisują własnych rozmiarów):
     H1   --fs-display  tylko hero strony głównej (.hero__title)
          --fs-h1       każda inna strona: wzorniki, kategorie, strona wzoru, poradniki, artykuły, strony informacyjne, 404
          --fs-h1-tool  wyjątek: nagłówek generatora (.tool__title) - narzędzie ma się mieścić na ekranie
     H2   --fs-h2       nagłówek sekcji strony-wizytówki (domyślny)
          --fs-h2-text  H2 w treści i w blokach podrzędnych (klasa .section-title--sm albo reguła kontekstu)
     H3   --fs-h3       podtytuł w treści i tytuł dużej karty;  --fs-h4 tytuł małej karty i pytanie FAQ
     Tekst --fs-text (17 px, interlinia --lh-text) w artykułach, na stronach tekstowych i w blokach SEO;
           --fs-body (16 px) w interfejsie; --fs-lead dla leadu; miara tekstu --measure.
   Nagłówki-etykiety paneli („Spis treści”, pasek gry 404, tytuł okna) to etykiety interfejsu, nie stopnie skali. */
h1, h2, h3, h4{
  margin:0;
  font-family:var(--font-head);
  font-weight:900;
  color:var(--blue-ink);
  text-wrap:balance;
}
h1{ font-size:var(--fs-h1); line-height:1.1; letter-spacing:-.015em; overflow-wrap:break-word; }
h2{ font-size:var(--fs-h2); line-height:1.15; letter-spacing:-.01em; }
h3{ font-size:var(--fs-h3); line-height:1.25; font-weight:800; }
h4{ font-size:var(--fs-h4); line-height:1.25; font-weight:800; }
p, li, dd, figcaption, blockquote{ text-wrap:pretty; }
strong{ font-weight:700; color:var(--ink); }

a{
  color:var(--blue-deep);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
a:hover{ color:var(--blue-ink); text-decoration-thickness:2px; }
a:active{ color:var(--blue-ink); }

:focus-visible{
  outline:3px dashed var(--focus);
  outline-offset:3px;
}
:focus:not(:focus-visible){ outline:none; }
[tabindex="-1"]:focus{ outline:none; }

.lead{ font-size:var(--fs-lead); line-height:1.6; }
.eyebrow{
  font:800 var(--fs-micro)/1.2 var(--font-head);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  min-height:44px;
  font:800 1rem/1.3 var(--font-head);
  color:var(--blue-deep);
  text-decoration:underline;
  text-underline-offset:4px;
}
.text-link:hover{ color:var(--blue-ink); }

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- 4. Układ ---------- */
.container{
  width:min(var(--container), 100% - 2 * var(--gutter));
  margin-inline:auto;
}
.section{ padding-block:var(--section-y); }
.section--alt{ background:var(--bg-alt); }
.section--blue{ background:var(--blue-soft); }
.section--mint{ background:var(--mint-soft); }
.section-head{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  max-width:var(--container-text);
}
.section-head p{
  font-size:var(--fs-lead);
  line-height:1.6;
  color:var(--ink-soft);
}
.section-title--sm{ font-size:var(--fs-h2-text); }

/* ---------- 5. Ikony (sprite /assets/icons.svg) ---------- */
.icon{
  display:inline-block;
  flex:0 0 auto;
  width:24px;
  height:24px;
  fill:currentColor;
  vertical-align:middle;
}
.icon--20{ width:20px; height:20px; }
.icon--18{ width:18px; height:18px; }

/* ---------- 6. Skip link ---------- */
.skip-link{
  position:absolute;
  left:12px;
  top:-80px;
  z-index:1000;
  min-height:44px;
  padding:0 18px;
  display:flex;
  align-items:center;
  border-radius:var(--radius-pill);
  background:var(--blue-ink);
  color:#fff;
  font:900 15px/1 var(--font-head);
  text-decoration:none;
  box-shadow:0 6px 16px rgba(14,77,110,.3);
}
.skip-link:focus, .skip-link:focus-visible{
  top:12px;
  color:#fff;
  outline:3px dashed var(--yellow);
  outline-offset:2px;
}

/* ---------- 7. Przyciski .btn ---------- */
.btn{
  --btn-bg:#fff;
  --btn-bg-hover:var(--blue-soft);
  --btn-fg:var(--blue-ink);
  --btn-edge:transparent;
  --btn-edge-w:4px;
  --btn-border:transparent;
  --icon-accent:currentColor;   /* na wypełnionym przycisku ikona jednotonowa */
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  min-height:48px;
  padding:0 20px;
  border:2px solid var(--btn-border);
  border-radius:var(--radius-pill);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font:900 1rem/1.15 var(--font-head);
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 var(--btn-edge-w) 0 var(--btn-edge);
  transition:transform var(--dur-1) var(--ease-press), box-shadow var(--dur-1) var(--ease-press), background-color var(--dur-2) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{
  background:var(--btn-bg-hover);
  color:var(--btn-fg);
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow:0 calc(var(--btn-edge-w) + 2px) 0 var(--btn-edge);
}
.btn:active{
  transform:translateY(var(--btn-edge-w));
  box-shadow:0 0 0 var(--btn-edge);
}
.btn:focus-visible{ outline:3px dashed var(--focus); outline-offset:3px; }
.btn:disabled,
.btn[aria-disabled="true"]{
  background:#E3E8EC;
  color:var(--ink-soft);
  border-color:#C3CDD4;
  box-shadow:none;
  transform:none;
  cursor:not-allowed;
}
.btn[aria-busy="true"]{ cursor:progress; }
.btn[aria-busy="true"] > .icon{ display:none; }
.btn[aria-busy="true"]::before{
  content:"";
  width:16px;
  height:16px;
  border-radius:50%;
  border:3px solid currentColor;
  border-right-color:transparent;
  animation:lm-spin .8s linear infinite;
}
@keyframes lm-spin{ to{ transform:rotate(360deg); } }

.btn--primary{
  --btn-bg:var(--blue);
  --btn-bg-hover:#7DCEF2;
  --btn-fg:var(--blue-ink);
  --btn-edge:var(--blue-edge);
  padding:0 22px 0 18px;
}
.btn--primary:focus-visible{ outline-color:var(--blue-ink); }
.btn--sun{
  --btn-bg:var(--yellow);
  --btn-bg-hover:#FFEB85;
  --btn-fg:var(--yellow-ink);
  --btn-edge:var(--yellow-edge);
  padding:0 22px 0 18px;
}
.btn--ghost{
  --btn-bg:#fff;
  --btn-bg-hover:var(--blue-soft);
  --btn-fg:var(--blue-deep);
  --btn-edge:var(--ghost-edge);
  --btn-border:var(--blue);
}
.btn--icon{ width:44px; min-height:44px; padding:0; --btn-bg:var(--blue-soft); --btn-bg-hover:#D6EEFA; }
.btn--lg{ min-height:54px; padding:0 26px 0 20px; --btn-edge-w:5px; }
.btn--sm{ min-height:44px; padding:0 16px; font-size:.9375rem; --btn-edge-w:3px; }
.btn--block{ display:flex; width:100%; }
.btn--wrap{ white-space:normal; }

/* ---------- 8. Chip ---------- */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:0 14px;
  border:2px solid var(--border-subtle);
  border-radius:var(--radius-pill);
  background:#fff;
  color:var(--blue-ink);
  font:800 var(--fs-small)/1 var(--font-head);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.chip:hover{ background:var(--blue-soft); border-color:var(--blue); color:var(--blue-ink); text-decoration:none; }
.chip:active{ transform:translateY(2px); }
.chip__n{ font-weight:700; opacity:.85; font-variant-numeric:tabular-nums; }
.chip.is-active,
.chip[aria-current="page"],
.chip[aria-checked="true"],
.chip[aria-pressed="true"]{
  background:var(--blue-deep);
  border-color:var(--blue-deep);
  color:#fff;
}
.chip:disabled,
.chip[aria-disabled="true"]{
  background:#F2F4F6;
  border-color:#E3E8EC;
  color:var(--ink-soft);
  cursor:not-allowed;
}
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  list-style:none;
}

/* ---------- 9. Karta i "plastikowa" krawędź ---------- */
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:2px solid var(--border-card);
  border-radius:var(--radius);
  overflow:hidden;
}
/* zabawka: twarda krawędź pod kartą (cień bez rozmycia) */
.toy{
  --toy-edge-w:6px;
  --toy-edge:var(--border-subtle);
  --toy-bg:#fff;
  position:relative;
  background:var(--toy-bg);
  border:2px solid var(--toy-edge);
  border-radius:var(--radius);
  box-shadow:0 var(--toy-edge-w) 0 var(--toy-edge);
}
.toy--blue{   --toy-edge:var(--blue);              --toy-soft:var(--blue-soft); }
.toy--yellow{ --toy-edge:var(--yellow-soft-edge);  --toy-soft:var(--yellow-soft); }
.toy--peach{  --toy-edge:var(--peach-edge);        --toy-soft:var(--peach-soft); }
.toy--coral{  --toy-edge:var(--coral-edge);        --toy-soft:var(--coral-soft); }
.toy--mint{   --toy-edge:var(--mint-edge);         --toy-soft:var(--mint-soft); }
.toy--violet{ --toy-edge:var(--violet-edge);       --toy-soft:var(--violet-soft); }
.toy--tinted{ --toy-bg:var(--toy-soft); }
:where(a.toy){ display:block; }
a.toy{
  color:inherit;
  text-decoration:none;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
a.toy:hover{
  color:inherit;
  transform:translateY(-3px);
  box-shadow:0 calc(var(--toy-edge-w) + 3px) 0 var(--toy-edge);
}
a.toy:active{
  transform:translateY(calc(var(--toy-edge-w) - 1px));
  box-shadow:0 1px 0 var(--toy-edge);
  transition-duration:var(--dur-1);
}

/* ---------- 10. Koralik dekoracyjny .bead ---------- */
.bead{
  --c:var(--blue);
  --bead-hole:var(--blue-soft);
  --bead-size:32px;
  display:block;
  flex:0 0 auto;
  width:var(--bead-size);
  height:var(--bead-size);
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.72) 0 11%, transparent 14%),
    radial-gradient(circle, var(--bead-hole) 0 20%, var(--c) 24%);
  box-shadow:inset 0 -1.5px 0 rgba(0,0,0,.12);
}
.bead--white{ box-shadow:inset 0 0 0 1.5px #C9DCE8; }
/* płaski koralik-pierścień (numery kroków, kropki list) */
.bead-ring{
  --c:var(--blue);
  --bead-hole:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:16px;
  height:16px;
  border-radius:50%;
  background:radial-gradient(circle, var(--bead-hole) 0 26%, var(--c) 30%);
}
.bead-string{
  display:flex;
  align-items:center;
  gap:4px;
}
/* paleta sznurka (kolejność z makiety) */
.bead-string > .bead:nth-child(11n+1){ --c:#5BB6E6; }
.bead-string > .bead:nth-child(11n+2){ --c:#FCE352; }
.bead-string > .bead:nth-child(11n+3){ --c:#F65BA0; }
.bead-string > .bead:nth-child(11n+4){ --c:#84D944; }
.bead-string > .bead:nth-child(11n+5){ --c:#8468D0; }
.bead-string > .bead:nth-child(11n+6){ --c:#F2F2EF; box-shadow:inset 0 0 0 1.5px #C9DCE8; }
.bead-string > .bead:nth-child(11n+7){ --c:#F4711E; }
.bead-string > .bead:nth-child(11n+8){ --c:#FBBA1C; }
.bead-string > .bead:nth-child(11n+9){ --c:#E12028; }
.bead-string > .bead:nth-child(11n+10){ --c:#2FB89A; }
.bead-string > .bead:nth-child(11n+11){ --c:#2E4F9E; }
/* sznurek pastelowy (marka) */
.bead-string--brand > .bead:nth-child(5n+1){ --c:var(--blue); }
.bead-string--brand > .bead:nth-child(5n+2){ --c:var(--yellow); }
.bead-string--brand > .bead:nth-child(5n+3){ --c:var(--coral); }
.bead-string--brand > .bead:nth-child(5n+4){ --c:var(--mint); }
.bead-string--brand > .bead:nth-child(5n+5){ --c:var(--violet); }
.bead-string--brand > .bead{ box-shadow:none; }

/* ---------- 11. Fala (separator sekcji) ---------- */
.wave{
  display:block;
  width:100%;
  height:clamp(24px, 4vw, 48px);
  line-height:0;
  pointer-events:none;
}
.wave svg{ display:block; width:100%; height:100%; }
.wave path{ fill:var(--wave-fill, var(--bg)); }
.wave--flip{ transform:scaleY(-1); }

/* ---------- 12. Nagłówek .site-header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--header-h-sm);
  background:var(--blue-soft);
}
.site-header__row{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.site-logo{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  color:var(--blue-ink);
  text-decoration:none;
}
.site-logo:hover{ color:var(--blue-ink); }
.site-logo img{ width:38px; height:38px; }
.site-logo__text{ display:flex; flex-direction:column; gap:2px; }
.site-logo__name{ font:900 17px/1 var(--font-head); color:var(--blue-ink); white-space:nowrap; }
.site-logo__tag{ display:none; font:700 12px/1 var(--font-head); color:var(--ink); white-space:nowrap; }

.site-nav{ display:none; }
.site-header__actions{ display:flex; align-items:center; gap:8px; }
.site-header__shop{ min-height:44px; padding:0 14px 0 12px; gap:6px; font-size:14px; --btn-edge-w:3px; }
.site-header__shop-long{ display:none; }

.nav-toggle{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 3px 0 var(--border-subtle);
  text-decoration:none;
}
.nav-toggle span{ display:block; width:18px; height:3px; border-radius:2px; background:var(--blue-ink); }
.nav-toggle:active{ transform:translateY(3px); box-shadow:none; }

/* nawigacja w pigułce (od 1000 px) */
.site-nav__list{
  display:flex;
  align-items:center;
  gap:2px;
  padding:5px;
  list-style:none;
  background:#fff;
  border-radius:var(--radius-pill);
  box-shadow:0 3px 0 var(--border-subtle);
}
.site-nav__list > li{ position:relative; }
.site-nav__link{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:0 clamp(9px, 1.1vw, 14px);
  border:0;
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--ink);
  font:800 clamp(14px, 1.25vw, 15px)/1 var(--font-head);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.site-nav__link:hover{ background:var(--blue-soft); color:var(--blue-ink); }
.site-nav__link:focus-visible{ outline-offset:-3px; }
.site-nav__link[aria-current="page"]{ background:var(--blue-soft); color:var(--blue-ink); }

/* dropdown: przycisk aria-expanded + lista linków */
.nav-dd__btn::after{
  content:"";
  width:0;
  height:0;
  margin-top:2px;
  border:5px solid transparent;
  border-top-color:currentColor;
  border-bottom-width:0;
  transition:transform var(--dur-2) var(--ease-out);
}
.nav-dd__btn[aria-expanded="true"]{ background:var(--blue-deep); color:#fff; }
.nav-dd__btn[aria-expanded="true"]::after{ transform:rotate(180deg); }
.nav-dd__menu{
  display:none;
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  z-index:60;
  width:300px;
  margin-left:-150px;
  padding:8px;
  list-style:none;
  border-radius:var(--radius);
  background:#fff;
  box-shadow:0 12px 30px rgba(14,77,110,.18), 0 4px 0 var(--border-subtle);
}
.nav-dd.is-open .nav-dd__menu{ display:flex; flex-direction:column; gap:2px; }
/* bez JS: menu otwiera fokus wewnątrz */
html:not(.js) .nav-dd:focus-within .nav-dd__menu{ display:flex; flex-direction:column; gap:2px; }
.nav-dd__item{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:8px 12px;
  border-radius:16px;
  color:var(--blue-ink);
  text-decoration:none;
}
.nav-dd__item:hover{ background:#F5F9FC; color:var(--blue-ink); }
.nav-dd__item:focus-visible{ outline-offset:-3px; }
.nav-dd__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:12px;
  background:var(--blue-soft);
  color:var(--blue-ink);
}
.nav-dd__icon--mint{ background:var(--mint-soft); color:var(--mint-ink); --icon-accent:var(--mint-line); }
.nav-dd__text{ display:flex; flex-direction:column; gap:4px; }
.nav-dd__title{ font:900 15px/1.1 var(--font-head); }
.nav-dd__sub{ font:700 12px/1.2 var(--font-body); color:var(--ink-soft); }

/* ---------- 13. Menu mobilne (dialog, poniżej 1000 px) ---------- */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  flex-direction:column;
  background:#fff;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.mobile-menu.is-open{ display:flex; }
html:not(.js) .mobile-menu:target{ display:flex; }
.mobile-menu__bar{
  flex:0 0 auto;
  height:var(--header-h-sm);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--gutter);
  background:var(--blue-soft);
}
.mobile-menu__close{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--blue-ink);
  color:#fff;
  --icon-accent:#fff;
}
.mobile-menu__close:hover{ color:#fff; background:#0B3D58; }
.mobile-menu__close:focus-visible{ outline-color:var(--blue-ink); }
.mobile-menu__nav{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  padding:12px var(--gutter) 24px;
}
.mobile-menu__list{ list-style:none; display:flex; flex-direction:column; gap:4px; }
.mobile-menu__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:52px;
  padding:0 12px;
  border-radius:16px;
  color:var(--blue-ink);
  font:900 17px/1.1 var(--font-head);
  text-decoration:none;
  cursor:pointer;
  list-style:none;
}
.mobile-menu__link::-webkit-details-marker{ display:none; }
.mobile-menu__link::after{ content:"\203A"; font-size:22px; line-height:1; color:var(--blue-deep); }
.mobile-menu__link:hover{ background:var(--blue-soft); color:var(--blue-ink); }
.mobile-menu__link:focus-visible{ outline-offset:-3px; }
details.mobile-menu__group > summary.mobile-menu__link::after{
  content:"";
  border:6px solid transparent;
  border-top-color:var(--blue-deep);
  border-bottom-width:0;
  transition:transform var(--dur-2) var(--ease-out);
}
details.mobile-menu__group[open] > summary.mobile-menu__link{ background:var(--blue-soft); }
details.mobile-menu__group[open] > summary.mobile-menu__link::after{ transform:rotate(180deg); }
.mobile-menu__sub{ list-style:none; display:flex; flex-direction:column; gap:2px; padding:4px 0 6px 24px; }
.mobile-menu__sub a{
  display:flex;
  align-items:center;
  min-height:44px;
  font:800 15px/1.2 var(--font-head);
  color:var(--blue-deep);
  text-decoration:none;
}
.mobile-menu__sub a:hover{ text-decoration:underline; }
.mobile-menu__shop{ margin-top:auto; }

/* ---------- 14. Stopka .site-footer ---------- */
.site-footer{
  --focus:#FFE56A;
  --icon-accent:var(--blue);
  background:var(--footer-bg);
  color:var(--footer-text);
  padding:clamp(40px, 5vw, 64px) 0 28px;
  font-size:14px;
  line-height:1.55;
}
.site-footer a:not(.btn){ color:var(--footer-text); }
.site-footer a:not(.btn):hover{ color:#fff; }
.site-footer .nowrap{ white-space:nowrap; }
.site-footer__inner{ display:flex; flex-direction:column; gap:32px; }
.site-footer__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap:28px 32px;
}
.site-footer__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.site-footer__logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:18px;
  background:#fff;
}
.site-footer__logo img{ width:52px; height:52px; }
.site-footer__tagline{ max-width:300px; font:800 15px/1.45 var(--font-head); color:#fff; }
.site-footer__contact a:not(.btn){ display:inline-block; padding-block:13px; margin-block:-13px; color:#fff; }
.site-footer__brand .btn{ --btn-fg:var(--blue-ink); }
.site-footer__brand .btn:focus-visible{ outline-color:var(--yellow); }
.site-footer__col{ display:flex; flex-direction:column; gap:2px; }
.site-footer__col h3{ margin:0 0 4px; font:900 15px/1.2 var(--font-head); color:#fff; }
.site-footer__col ul{ list-style:none; display:flex; flex-direction:column; }
.site-footer__col li a,
.site-footer__more summary{
  display:flex;
  align-items:center;
  gap:4px;
  min-height:44px;
  color:var(--footer-text);
  text-decoration:none;
}
.site-footer__col li a:hover{ color:#fff; text-decoration:underline; }
.site-footer__more summary{ cursor:pointer; list-style:none; gap:6px; }
.site-footer__more summary::-webkit-details-marker{ display:none; }
.site-footer__more summary::after{
  content:"";
  border:4px solid transparent;
  border-top-color:currentColor;
  border-bottom-width:0;
  margin-top:2px;
  transition:transform var(--dur-2) var(--ease-out);
}
.site-footer__more summary:hover{ color:#fff; }
.site-footer__more[open] summary::after{ transform:rotate(180deg); }
.site-footer__more ul{ padding:0 0 6px 14px; border-left:2px solid rgba(191,217,232,.2); }
.site-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  padding-top:20px;
  border-top:1px solid rgba(191,217,232,.2);
  font-size:13px;
}
.site-footer__legal{ display:flex; align-items:center; min-height:44px; }
/* „Ustawienia cookies” - przycisk wyglądający jak link stopki (widoczny, gdy działa zgoda na statystyki, js/site.js) */
.site-footer__cookies{ padding:0; border:0; background:none; color:var(--footer-text); font:inherit; cursor:pointer; }
.site-footer__cookies:hover{ color:#fff; text-decoration:underline; }
.site-footer__cookies[hidden]{ display:none; }

/* ---------- Zgoda na pliki cookie (baner, js/site.js) ---------- */
.consent{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:98;
  width:min(520px, calc(100vw - 32px));
  padding:16px 18px;
  border:2px solid var(--blue-soft);
  border-radius:18px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 12px 30px rgba(14,77,110,.25);
}
.consent__title{ margin:0 0 6px; font:900 17px/1.2 var(--font-head); color:var(--blue-ink); }
.consent__text{ margin:0 0 12px; font-size:14px; line-height:1.5; }
.consent__btns{ display:flex; flex-wrap:wrap; gap:8px; }
.consent__btns .btn{ flex:1 1 140px; }
.consent__btns .btn[hidden]{ display:none; }
.consent__wybor{ margin:0 0 12px; padding:0; border:0; display:grid; gap:8px; }
.consent__wybor[hidden]{ display:none; }
.consent__opcja{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:2px solid var(--blue-soft); border-radius:12px; font-size:14px; line-height:1.45; cursor:pointer; }
.consent__opcja input{ flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--blue-ink); }
.consent__opcja:focus-within{ outline:3px solid var(--blue-ink); outline-offset:2px; }
@media print{ .consent{ display:none; } }
.site-footer__social{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.site-footer__social a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 14px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:700;
  text-decoration:none;
}
.site-footer__social a:hover{ background:rgba(255,255,255,.16); color:#fff; }
/* tablet: marka w pełnym rzędzie, pod nią trzy kolumny linków (auto-fit zostawiał „Poradniki” same w drugim rzędzie) */
@media (min-width:768px) and (max-width:999.98px){
  .site-footer__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .site-footer__brand{ grid-column:1 / -1; }
}
@media (min-width:1000px){
  .site-footer__grid{
    grid-template-columns:minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    column-gap:48px;
  }
  .site-footer__brand{ gap:16px; }
  .site-footer__tagline{ max-width:360px; }
}

/* ---------- 15. Karuzela (wspólna) ---------- */
.carousel{ display:flex; flex-direction:column; gap:clamp(16px, 2vw, 24px); }
.carousel__viewport{
  position:relative;
  margin-inline:calc(-1 * var(--gutter));
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gutter);
  scrollbar-width:none;
  border-radius:24px;
}
.carousel__viewport::-webkit-scrollbar{ display:none; }
.carousel__viewport:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px var(--focus); }
.carousel__viewport.is-dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.carousel__track{
  display:flex;
  gap:clamp(14px, 1.6vw, 20px);
  width:max-content;
  padding:6px var(--gutter) 14px;
  list-style:none;
}
.carousel__track > li{ scroll-snap-align:start; }
.carousel__track img{ -webkit-user-drag:none; user-select:none; }
.carousel__progress{
  height:4px;
  border-radius:2px;
  background:rgba(14,77,110,.1);
  overflow:hidden;
}
.carousel__bar{
  display:block;
  height:100%;
  width:25%;
  border-radius:2px;
  background:var(--blue-deep);
  transform-origin:0 50%;
}
.carousel__nav{ display:none; gap:6px; }
.carousel__arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:2px solid var(--blue);
  border-radius:50%;
  background:#fff;
  color:var(--blue-deep);
  --icon-accent:var(--blue);
  transition:background-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-press);
}
.carousel__arrow:hover{ background:var(--blue-soft); }
.carousel__arrow:active{ transform:translateY(2px); }
.carousel__arrow:disabled{ opacity:.4; cursor:default; transform:none; background:#fff; }

/* ---------- 16. Okruszki .breadcrumbs ---------- */
/* Jeden komponent na wszystkich stronach (wzorniki, kategorie, strony wzorów, poradniki, artykuły, strony
   informacyjne, generatory). Znaczniki:
     nav.breadcrumbs[aria-label="Okruszki"] > ol.breadcrumbs__list > li > a | span[aria-current="page"]
     pierwszy link: a.breadcrumbs__home > svg.breadcrumbs__icon + span.breadcrumbs__home-label
   Zawsze przy lewej krawędzi kontenera (pod logo). Rząd ma 44 px (cel dotykowy linków), sekcja-gospodarz daje
   padding-top:var(--crumbs-before), a komponent sam trzyma odstęp do H1 (--crumbs-after).
   Na telefonie ze „Strony głównej” zostaje ikona domu, podpis wraca od 768 px. */
.breadcrumbs{
  display:flex;
  align-items:center;
  min-height:44px;
  margin-bottom:var(--crumbs-after);
}
.breadcrumbs__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 6px;
  min-width:0;
  list-style:none;
  font:700 var(--fs-micro)/1.3 var(--font-body);
  color:var(--ink-soft);
}
.breadcrumbs__list > li{ display:flex; align-items:center; gap:6px; min-width:0; }
.breadcrumbs__list > li + li::before{ content:"\203A"; font-size:15px; line-height:1; color:var(--ink-soft); }
.breadcrumbs a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  color:var(--blue-deep);
  text-decoration:none;
}
/* pole dotyku krótkich linków (np. „Lato”) ma co najmniej 44 px szerokości bez rozpychania odstępów w rzędzie */
.breadcrumbs a::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:max(100%, 44px);
  transform:translateX(-50%);
}
.breadcrumbs a:hover{ color:var(--blue-ink); text-decoration:underline; }
.breadcrumbs__icon{ flex:0 0 auto; width:18px; height:18px; }
.breadcrumbs__home{ gap:6px; min-width:44px; margin-inline:-13px; }   /* ikona 18 px w polu 44 px: krawędź ikony równo z krawędzią kontenera */
.breadcrumbs__home-label{
  position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
@media (min-width:768px){
  .breadcrumbs__home{ min-width:0; margin-inline:0; justify-content:flex-start; }
  .breadcrumbs__home-label{ position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; clip-path:none; white-space:normal; }
}

/* ---------- 17. FAQ .faq ---------- */
/* Jeden komponent w całym serwisie (artykuły, generatory, wzorniki, strony wzorów). Znaczniki:
     div.faq > h2|h3 + div.faq__list > details.faq__item > summary + p
   Karta z koralikiem przed pytaniem i znakiem „+” / „-” po prawej. Nagłówek bloku trzyma swój poziom
   (h2: --fs-h2-text, h3: --fs-h3). Wariant miętowy stron wodnych: .faq--water (zmienia tylko zmienne). */
.faq{
  --faq-edge:var(--border-card);
  --faq-mark:var(--blue-deep);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.faq > h2{ font-size:var(--fs-h2-text); line-height:1.15; }
.faq > h3{ font-size:var(--fs-h3); line-height:1.25; color:var(--blue-ink); }
.faq__list{ display:flex; flex-direction:column; gap:8px; }
.faq__item{
  --c:var(--blue);
  padding:0 16px;
  border:2px solid var(--faq-edge);
  border-radius:18px;
  background:#fff;
}
.faq__item:nth-child(6n+2){ --c:var(--mint); }
.faq__item:nth-child(6n+3){ --c:var(--coral); }
.faq__item:nth-child(6n+4){ --c:var(--violet); }
.faq__item:nth-child(6n+5){ --c:var(--peach-edge); }
.faq__item:nth-child(6n+6){ --c:var(--yellow-soft-edge); }
.faq__item summary{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding-block:8px;
  cursor:pointer;
  list-style:none;
  font:800 var(--fs-h4)/1.35 var(--font-head);
  color:var(--blue-ink);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::before{
  content:"";
  flex:0 0 22px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0 26%, var(--c) 30%);
}
.faq__item summary::after{
  content:"";
  flex:0 0 14px;
  width:14px;
  height:14px;
  margin-left:auto;
  background:
    linear-gradient(var(--faq-mark), var(--faq-mark)) center / 100% 3px no-repeat,
    linear-gradient(var(--faq-mark), var(--faq-mark)) center / 3px 100% no-repeat;
}
.faq__item[open] summary::after{
  background:linear-gradient(var(--faq-mark), var(--faq-mark)) center / 100% 3px no-repeat;
}
.faq__item summary:focus-visible{ outline-offset:2px; border-radius:12px; }
.faq__item p{ max-width:34em; margin:0 0 16px 34px; font-size:var(--fs-body); line-height:1.65; color:var(--ink); }
.faq__item p a{ font-weight:700; }
/* wąski telefon: odpowiedź na całą szerokość karty (wcięcie pod koralik zostawiało ok. 30 znaków w wierszu) */
@media (max-width:479.98px){
  .faq__item p{ margin-left:0; }
}
.faq--water{ --faq-edge:var(--peg-water); --faq-mark:var(--mint-ink); }

/* ---------- 18. Ramka .callout ---------- */
/* Jedna ramka w całym serwisie: wskazówka i uwaga (żółta, domyślna) oraz informacja (.callout--info, błękit).
   Znaczniki: div.callout[role="note"] > span.callout__icon (ikona z /assets/icons.svg) + p */
.callout{
  --callout-bg:var(--yellow-soft);
  --callout-edge:var(--yellow-soft-edge);
  --callout-ink:var(--yellow-ink);
  --callout-accent:#B8860B;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px;
  border:2px solid var(--callout-edge);
  border-radius:var(--radius);
  background:var(--callout-bg);
  font-size:var(--fs-body);
  line-height:1.65;
}
.callout--info{
  --callout-bg:var(--blue-soft);
  --callout-edge:var(--border-subtle);
  --callout-ink:var(--blue-deep);
  --callout-accent:#2E8BBF;
}
.callout__icon{
  flex:0 0 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  background:#fff;
  color:var(--callout-ink);
  --icon-accent:var(--callout-accent);
}
.callout__icon .icon{ width:26px; height:26px; }
.callout p{ min-width:0; max-width:var(--measure); color:var(--ink); }

/* ---------- 19. Breakpointy ---------- */
@media (min-width:480px){
  .site-header__shop{ padding:0 16px 0 12px; }
}
@media (min-width:1000px){
  :root{ --fs-h1-tool:1.5rem; }
  html{ scroll-padding-top:calc(var(--header-h) + 12px); }
  .site-header{ height:var(--header-h); }
  .site-logo{ gap:12px; }
  .site-logo img{ width:46px; height:46px; }
  .site-logo__name{ font-size:19px; }
  .site-nav{ display:block; }
  .nav-toggle{ display:none; }
  .mobile-menu, .mobile-menu.is-open, html:not(.js) .mobile-menu:target{ display:none; }
  .site-header__shop{ min-height:46px; padding:0 clamp(14px, 1.6vw, 20px) 0 clamp(12px, 1.3vw, 16px); font-size:15px; --btn-edge-w:4px; }
  .site-header__shop-long{ display:inline; }
  .site-header__shop-short{ display:none; }
  .carousel__nav{ display:flex; }
}
@media (min-width:1280px){
  .site-logo__tag{ display:block; }
}

/* ---------- Gwiazdki najwyższego poziomu trudności (.stars--top) ----------
   JEDNA definicja dla wzornika, stron wzorów i kategorii oraz generatora (ten plik ładują wszystkie).
   Skala prasowanek ma 4 poziomy: do 100 koralików, 101-500, 501-800 i ponad 800. Poziomy 1-3 to zwykłe gwiazdki
   w jednym kolorze na trzech miejscach (SVG .stars w library.css, np. dwie pełne i jedna szara). Poziom 4 to CZTERY
   gwiazdki z przesuwającym się przejściem kolorów - czwarta gwiazdka i ruch pokazują poziom ponad zwykłą skalę.
   Znacznik (js/library.js: starsTop, gen_pattern_pages.py: stars_top, js/generator.js: starsTopHtml):
     <span class="stars stars--top" aria-hidden="true"><span class="stars__g"></span></span>
   Tło z przejściem jest przycięte maską jednej gwiazdki powtarzaną 4 razy w poziomie (/assets/star-mask.svg, kształt
   jak w starsSvg). Przejście ma 2 okresy na 400% szerokości - przesunięcie o 66,667% to dokładnie jeden okres,
   więc pętla nie ma szwu. Bez ruchu (prefers-reduced-motion) zostaje nieruchome przejście.
   Szerokość = 4/3 szerokości zwykłych gwiazdek (48 px przy 36 px); mniejsze i większe warianty kart i chipów
   filtra są w library.css obok rozmiarów .stars. */
/* .stars.stars--top (dwie klasy): szerokość 4 gwiazdek musi wygrać z ogólnym .stars{ width:36px } z library.css */
.stars.stars--top{ position:relative; display:inline-block; flex:0 0 auto; width:48px; height:12px; vertical-align:-2px; }   /* vertical-align: tylko w tekście (statystyki kreatora) */
.stars--top > .stars__g{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:100%;
  -webkit-mask-image:url(/assets/star-mask.svg);
  mask-image:url(/assets/star-mask.svg);
  -webkit-mask-repeat:repeat-x;
  mask-repeat:repeat-x;
  -webkit-mask-position:0 50%;
  mask-position:0 50%;
  -webkit-mask-size:25% 100%;
  mask-size:25% 100%;
  background-image:linear-gradient(90deg,
    var(--star-1), var(--star-2), var(--star-3), var(--star-4), var(--star-5), var(--star-6),
    var(--star-1), var(--star-2), var(--star-3), var(--star-4), var(--star-5), var(--star-6), var(--star-1));
  background-size:400% 100%;
  background-position:0 0;
  animation:lm-stars-top 4.5s linear infinite;
}
@keyframes lm-stars-top{ from{ background-position:0 0; } to{ background-position:66.6667% 0; } }
@media (prefers-reduced-motion:reduce){
  .stars--top > .stars__g{ animation:none; }
}

/* ---------- 20. Ruch ograniczony ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- Plakietka „AI” na ilustracjach stworzonych z pomocą AI (strona główna, generator) ---------- */
.ai-badge{
  position:absolute;
  right:8px;
  bottom:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(20,35,45,.68);
  color:#fff;
  font:900 10px/1 var(--font-head);
  text-decoration:none;
}
.ai-badge:hover{ background:rgba(20,35,45,.88); color:#fff; }
.ai-badge::before{ content:""; position:absolute; inset:-8px; }