/* =====================================================================
   smacznejkawusi.pl, wspólna "rama" strony (header/footer/sekcje)
   Ładowane na index.php, generator.php, galeria.php, czyli wszędzie
   tam, gdzie działa inc/layout_top_nowy.php + inc/layout_bottom_nowy.php.
   Kolory/kontury/cienie/komponenty bazowe: design/tokens.css.
   Style specyficzne dla jednej strony siedzą w jej własnym pliku
   (strona-glowna.css / generator.css / galeria.css).
   ===================================================================== */

*{box-sizing:border-box}
p{margin:0}

/* ---------- pasek oferty ---------- */
.pasek-oferty{background:var(--czerwien);border-bottom:var(--kontur);font-size:14px;font-weight:600}
.pasek-oferty .kontener{display:flex;gap:12px;align-items:center;justify-content:center;padding:9px 20px;flex-wrap:wrap}
.pasek-oferty a{color:var(--atrament);text-underline-offset:3px}

/* ---------- nagłówek ---------- */
.gora{background:var(--papier);border-bottom:var(--kontur);position:sticky;top:0;z-index:20}
.gora .kontener{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;padding-top:12px;padding-bottom:12px}
.znak{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit}
.znak-nazwa{font-family:var(--display);font-size:21px;letter-spacing:.02em}
.taby{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.ikony{display:flex;align-items:center;gap:12px}
.koszyk{display:flex;align-items:center;gap:7px;background:var(--mieta);border:var(--kontur);border-radius:var(--promien);
  padding:7px 13px;font-family:inherit;font-size:13px;font-weight:700;text-decoration:none;color:var(--atrament);
  cursor:pointer;box-shadow:var(--cien-maly)}
.koszyk .kropka{width:19px;height:19px;border-radius:50%;background:var(--czerwien);border:1.5px solid var(--atrament);
  font-size:11px;display:grid;place-items:center}

/* ---------- naklejki dekoracyjne (SVG inline, dowolna sekcja) ---------- */
.naklejka{position:absolute;pointer-events:none}

/* ---------- nagłówek sekcji, wspólny dla wszystkich stron ---------- */
section.blok{padding:56px 0;position:relative}
.naglowek-bloku{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.naglowek-bloku h2{font-size:clamp(30px,4vw,44px)}
.naglowek-bloku p{font-size:15px;max-width:52ch;margin-top:8px;font-weight:500}

/* ---------- stopka ---------- */
footer{background:var(--atrament);color:var(--papier);border-top:var(--kontur);padding:40px 0 30px}
footer .kontener{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:26px}
footer h4{font-family:var(--display);color:var(--musztarda);font-size:18px;margin:0 0 8px;text-transform:uppercase}
footer a{color:var(--papier);text-decoration:none;display:block;padding:3px 0;font-size:14px;font-weight:500}
footer a:hover{color:var(--mieta)}
footer p{font-size:14px;font-weight:500;max-width:38ch}

footer .stopka-dol{margin-top:26px;padding-top:16px;border-top:1px solid var(--papier);opacity:.6}
footer .stopka-dol p{margin:0;max-width:none;font-size:12px;font-weight:600;text-align:right}
footer .stopka-dol a{display:inline;padding:0;font-size:inherit;text-decoration:underline}

@media(max-width:920px){
  .taby{order:3;width:100%;margin-left:0;overflow-x:auto}
  footer .kontener{grid-template-columns:1fr}
  footer .stopka-dol p{text-align:left}
}