/*
Theme Name: AeroPrint
Theme URI: https://aeroprint.talarowski.dev/
Description: Butikowy sklep WooCommerce dla marki lotniczej — minimalistyczny, premium, mobile-first. Warstwa prezentacji; logika sklepu (warianty, konsolidacja wysyłek, InPost, POD, VAT OSS, SEO) mieszka w mu-plugins.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: aeroprint
Tags: woocommerce, sklep, minimal, rwd
*/

/* =====================================================================
   KROJE — hostowane lokalnie, jeden plik zmienny na całą stronę.
   Nagłówki i tekst różni tylko oś szerokości (wdth): przeglądarka
   przycina żądaną wartość do zakresu z @font-face, więc sama nazwa
   rodziny wybiera szerokość. Fallbacki dopasowane metrycznie — podmiana
   kroju po pobraniu nie przesuwa układu (CLS = 0).
   ===================================================================== */
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo.woff2') format('woff2');
  font-weight: 400 700;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo Display';
  src: url('assets/fonts/archivo.woff2') format('woff2');
  font-weight: 400 700;
  font-stretch: 112%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 98.63%;
  ascent-override: 89.02%;
  descent-override: 21.29%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Display Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 116.13%;
  ascent-override: 75.61%;
  descent-override: 18.08%;
  line-gap-override: 0%;
}

/* =====================================================================
   TOKENY
   ===================================================================== */
:root {
  --font-naglowek: 'Archivo Display', 'Archivo Display Fallback', system-ui, sans-serif;
  --font-tekst: 'Archivo', 'Archivo Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Granat lotniczy jako kolor marki, kość słoniowa jako tło, mosiądz jako akcent. */
  --granat: #0b1f33;
  --granat-ciemny: #071422;
  --granat-jasny: #17395a;
  --kosc: #f6f3ec;
  --kosc-ciemna: #ebe5da;
  --biel: #ffffff;
  --mosiadz: #a8712c;      /* kontrast 4.6:1 na kości — bezpieczny dla tekstu */
  --mosiadz-jasny: #c99a53; /* tylko powierzchnie i obrysy, nie tekst */
  --tekst: #16202c;
  --tekst-slaby: #55606d;   /* 4.8:1 na kości */
  --linia: #d9d2c6;
  --sukces: #1f6b45;
  --alarm: #a8321f;

  --cien-1: 0 1px 2px rgba(11, 31, 51, .06), 0 2px 8px rgba(11, 31, 51, .05);
  --cien-2: 0 4px 12px rgba(11, 31, 51, .09), 0 12px 32px rgba(11, 31, 51, .08);

  --r-s: 4px;
  --r-m: 8px;
  --r-l: 16px;

  --szer-max: 1240px;
  --szer-waska: 760px;
  --luz: clamp(16px, 4vw, 32px);
  --sekcja-y: clamp(48px, 8vw, 96px);
}

/* =====================================================================
   PODSTAWY
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--kosc);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-naglowek);
  color: var(--granat);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(30px, 5.5vw, 52px); font-weight: 700; }
h2 { font-size: clamp(24px, 3.6vw, 36px); font-weight: 600; }
h3 { font-size: clamp(19px, 2.2vw, 22px); font-weight: 600; }

p { margin: 0 0 1em; }
img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--granat); text-decoration-color: rgba(168, 113, 44, .5); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--mosiadz); }

:focus-visible {
  outline: 3px solid var(--mosiadz);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

.ikona { width: 20px; height: 20px; flex: none; }
.ikona-xl { width: 64px; height: 64px; opacity: .35; }

/* `.screen-reader-text` obsługujemy razem z własną klasą: motyw nie ładuje globalnych stylów
   WordPressa (to one zwykle ukrywają tę klasę), a WooCommerce sypie nią w kasie i w wariantach.
   Bez tej reguły niewidoczne etykiety rozpychają układ w bok na telefonie. */
.tylko-dla-czytnika,
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Ukrycie przez clip zamiast `left:-9999px` — element poza kadrem potrafi rozpychać
   szerokość dokumentu, a to znaczy poziome przewijanie na telefonie. */
.link-pominiecia {
  position: absolute; top: 8px; left: 8px; z-index: 999;
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  background: var(--granat); color: var(--biel); padding: 12px 20px; border-radius: var(--r-m);
}
.link-pominiecia:focus { width: auto; height: auto; clip-path: none; }

/* =====================================================================
   UKŁAD
   ===================================================================== */
.kontener {
  width: min(100% - 2 * var(--luz), var(--szer-max));
  margin-inline: auto;
}
.kontener--waski { width: min(100% - 2 * var(--luz), var(--szer-waska)); }

.sekcja { padding-block: var(--sekcja-y); }
.sekcja-tytul { margin-bottom: .25em; }
.sekcja-opis { color: var(--tekst-slaby); margin: 0; max-width: 56ch; }

.sekcja-naglowek {
  display: flex; flex-wrap: wrap; gap: 16px 24px;
  align-items: end; justify-content: space-between;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.link-strzalka {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; text-decoration: none; color: var(--granat);
  border-bottom: 2px solid var(--mosiadz-jasny); padding-bottom: 2px;
  min-height: 44px;
}
.link-strzalka:hover { border-color: var(--mosiadz); }
.link-strzalka .ikona { width: 18px; height: 18px; transition: transform .2s ease; }
.link-strzalka:hover .ikona { transform: translateX(3px); }
.link-strzalka--wstecz .ikona { transform: rotate(180deg); }

.naglowek-strony {
  background: var(--granat);
  color: var(--kosc);
  padding-block: clamp(32px, 6vw, 64px);
}
.naglowek-strony h1 { color: var(--biel); margin-bottom: .3em; }
.naglowek-strony .lead, .naglowek-strony .lead p {
  color: rgba(246, 243, 236, .82); font-size: 18px; max-width: 62ch; margin: 0;
}
.naglowek-strony .wpis-data { color: var(--mosiadz-jasny); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }

/* =====================================================================
   PRZYCISKI I FORMULARZE
   ===================================================================== */
.przycisk,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px;
  font: 600 16px/1.2 var(--font-tekst);
  border-radius: var(--r-m); border: 2px solid transparent;
  background: var(--granat); color: var(--biel);
  text-decoration: none; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.przycisk:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
  background: var(--granat-jasny); color: var(--biel);
}
.przycisk:active { transform: translateY(1px); }

.przycisk--glowny { background: var(--mosiadz); border-color: var(--mosiadz); }
.przycisk--glowny:hover { background: #8f5f24; border-color: #8f5f24; }

.przycisk--obrys, .woocommerce a.button.wc-backward {
  background: transparent; color: var(--granat); border-color: var(--granat);
}
.przycisk--obrys:hover, .woocommerce a.button.wc-backward:hover { background: var(--granat); color: var(--biel); }

.przycisk--maly { min-height: 40px; padding: 8px 16px; font-size: 15px; }

input[type=text], input[type=email], input[type=tel], input[type=search], input[type=password],
input[type=number], select, textarea,
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
  width: 100%; min-height: 48px; padding: 11px 14px;
  font: 400 16px/1.4 var(--font-tekst); color: var(--tekst);
  background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-m);
}
textarea { min-height: 120px; }
input::placeholder, textarea::placeholder { color: #8b939d; }
input:focus, select:focus, textarea:focus { border-color: var(--granat); }

label { font-weight: 600; font-size: 15px; }

/* =====================================================================
   NAGŁÓWEK
   ===================================================================== */
.pasek-zapowiedzi {
  background: var(--granat-ciemny); color: rgba(246, 243, 236, .9);
  font-size: 14px; letter-spacing: .02em; text-align: center; padding: 8px 0;
}

.naglowek {
  position: sticky; top: 0; z-index: 60;
  background: rgba(246, 243, 236, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linia);
}
.naglowek-siatka {
  display: flex; align-items: center; gap: 12px;
  min-height: 68px;
  /* `min-width: 0` na elemencie zwijalnym — bez tego długie menu nie skraca się, tylko
     rozpycha nagłówek i całą stronę w bok. */
  min-width: 0;
}
.naglowek--przyklejony { box-shadow: var(--cien-1); }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--granat); min-width: 0; flex: none; }
.logo-sygnet { width: 38px; height: 38px; flex: none; color: var(--granat); }
.logo-tekst { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.logo-tekst strong { font-family: var(--font-naglowek); font-size: 20px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.logo-tekst span { font-size: 11.5px; color: var(--tekst-slaby); letter-spacing: .12em; text-transform: uppercase; }

.menu-glowne { display: none; margin-inline: auto; min-width: 0; }
.lista-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; }
.lista-menu a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 4px 10px; white-space: nowrap;
  font-weight: 500; text-decoration: none; color: var(--granat); border-radius: var(--r-s);
}
.lista-menu a:hover { background: var(--kosc-ciemna); }
.lista-menu .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--mosiadz); }
.lista-menu .sub-menu {
  position: absolute; display: none; min-width: 220px; margin-top: 4px; padding: 8px;
  list-style: none; background: var(--biel); border: 1px solid var(--linia);
  border-radius: var(--r-m); box-shadow: var(--cien-2);
}
.lista-menu li { position: relative; }
.lista-menu li:hover > .sub-menu, .lista-menu li:focus-within > .sub-menu { display: block; }

.naglowek-akcje { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.akcja {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 44px; height: 44px; color: var(--granat); background: none; border: 0; cursor: pointer;
  text-decoration: none; border-radius: var(--r-m);
}
.akcja:hover { background: var(--kosc-ciemna); }
.licznik-koszyka {
  position: absolute; top: 4px; right: 2px;
  min-width: 19px; height: 19px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--mosiadz); color: var(--biel);
  font-size: 11px; font-weight: 700; border-radius: 999px;
}

.przelacznik-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; background: none; color: var(--granat); cursor: pointer; border-radius: var(--r-m);
}
.przelacznik-menu .ikona-zamknij { display: none; }
.przelacznik-menu[aria-expanded="true"] .ikona-menu { display: none; }
.przelacznik-menu[aria-expanded="true"] .ikona-zamknij { display: block; }

.panel-szukania { border-top: 1px solid var(--linia); background: var(--biel); padding: 16px 0; }
.szukajka { display: flex; gap: 8px; }
.szukajka button {
  min-width: 48px; min-height: 48px; display: grid; place-items: center;
  background: var(--granat); color: var(--biel); border: 0; border-radius: var(--r-m); cursor: pointer;
}

.menu-mobilne { border-top: 1px solid var(--linia); background: var(--biel); padding: 12px 0 20px; }
.lista-menu-mobilna { list-style: none; margin: 0 0 16px; padding: 0; }
.lista-menu-mobilna a {
  display: block; padding: 12px 4px; min-height: 44px;
  font-size: 18px; font-weight: 500; text-decoration: none; color: var(--granat);
  border-bottom: 1px solid var(--kosc-ciemna);
}
.lista-menu-mobilna .sub-menu { list-style: none; margin: 0; padding-left: 16px; }
.lista-menu-mobilna .sub-menu a { font-size: 16px; color: var(--tekst-slaby); }

/* Przełącznik walut (mu-plugin i18n/OSS).
   Na telefonie pasek nagłówka nie mieści logo, waluty i trzech akcji naraz — waluta
   i wyszukiwarka przenoszą się do menu, zamiast rozpychać stronę w bok. */
.naglowek-akcje .przelacznik-walut,
.naglowek-akcje .akcja--szukaj { display: none; }
.menu-mobilne .przelacznik-walut { margin-bottom: 16px; }
.menu-mobilne .przelacznik-walut select {
  border-color: var(--linia); background-color: var(--biel); padding-right: 32px;
}
.przelacznik-walut { display: flex; align-items: center; }
.przelacznik-walut select {
  min-height: 40px; width: auto; padding: 6px 28px 6px 10px;
  font-size: 14px; font-weight: 600; background-color: transparent; border-color: transparent;
}
.przelacznik-walut select:hover { background-color: var(--kosc-ciemna); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  background: linear-gradient(160deg, var(--granat) 0%, var(--granat-ciemny) 100%);
  color: var(--kosc);
  padding-block: clamp(40px, 7vw, 88px);
  position: relative; overflow: hidden;
}
/* Delikatna siatka nawigacyjna w tle — czytelny motyw lotniczy bez obrazka do pobrania. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(201, 154, 83, .12) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(201, 154, 83, .12) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 72%);
}
.hero-siatka { display: grid; gap: clamp(28px, 5vw, 56px); position: relative; z-index: 1; }
.hero-nadtytul {
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mosiadz-jasny); margin-bottom: 12px;
}
.hero-tytul { color: var(--biel); margin-bottom: .35em; }
.hero-tekst { color: rgba(246, 243, 236, .85); font-size: 18px; max-width: 52ch; }
.hero-akcje { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 20px; }
.hero-fakty { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hero-fakty li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(246, 243, 236, .8); }
.hero-fakty .ikona { width: 18px; height: 18px; color: var(--mosiadz-jasny); }

.hero-obraz { position: relative; }
.hero-foto {
  width: 100%; border-radius: var(--r-l);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  aspect-ratio: 4 / 3; object-fit: cover;
}
.hero-zastepczy {
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  border: 1px dashed rgba(201, 154, 83, .4); border-radius: var(--r-l); color: var(--mosiadz-jasny);
}
.hero-plakietka {
  position: absolute; left: 16px; bottom: 16px;
  background: rgba(246, 243, 236, .95); color: var(--granat);
  padding: 10px 16px; border-radius: var(--r-m); box-shadow: var(--cien-2);
  display: grid; gap: 2px;
}
.hero-plakietka-etykieta { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mosiadz); font-weight: 700; }
.hero-plakietka-tekst { font-weight: 600; font-size: 15px; }

/* =====================================================================
   SEKCJE STRONY GŁÓWNEJ
   ===================================================================== */
.sekcja--obieg { background: var(--biel); }
.kroki { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; counter-reset: krok; }
.kroki li { padding-top: 16px; border-top: 2px solid var(--kosc-ciemna); }
.krok-numer {
  display: block; font-family: var(--font-naglowek); font-size: 14px; font-weight: 700;
  letter-spacing: .1em; color: var(--mosiadz); margin-bottom: 8px;
}
.kroki h3 { margin-bottom: .35em; }
.kroki p { color: var(--tekst-slaby); margin: 0; font-size: 15.5px; }

.kategorie { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.kategoria a {
  display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 18px;
  background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-l);
  padding: 16px; text-decoration: none; box-shadow: var(--cien-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.kategoria a:hover { transform: translateY(-2px); box-shadow: var(--cien-2); }
.kategoria-obraz { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-m); overflow: hidden; background: var(--kosc-ciemna); }
.kategoria-obraz img { width: 100%; height: 100%; object-fit: cover; }
.kategoria-opis strong { display: block; font-family: var(--font-naglowek); font-size: 19px; color: var(--granat); }
.kategoria-opis span { color: var(--tekst-slaby); font-size: 14px; }

.atuty { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.atuty li { background: var(--biel); border-radius: var(--r-l); padding: 24px; border: 1px solid var(--linia); }
.atut-ikona {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px;
  background: var(--granat); color: var(--mosiadz-jasny); border-radius: var(--r-m);
}
.atuty h3 { font-size: 18px; margin-bottom: .4em; }
.atuty p { color: var(--tekst-slaby); font-size: 15.5px; margin: 0; }

.sekcja--cytat { background: var(--granat); color: var(--kosc); }
.sekcja--cytat blockquote { margin: 0; max-width: 68ch; }
.sekcja--cytat p {
  font-family: var(--font-naglowek); font-size: clamp(21px, 3vw, 30px); line-height: 1.35;
  color: var(--biel); margin-bottom: .6em;
}
.sekcja--cytat cite { font-style: normal; color: var(--mosiadz-jasny); letter-spacing: .1em; text-transform: uppercase; font-size: 13px; }

.wpisy { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.wpis a { display: block; text-decoration: none; color: inherit; }
.wpis-obraz { display: block; border-radius: var(--r-m); overflow: hidden; margin-bottom: 14px; }
.wpis-obraz img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.wpis-data { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mosiadz); }
.wpis h2, .wpis h3 { font-size: 20px; margin: 6px 0 .4em; }
.wpis p { color: var(--tekst-slaby); font-size: 15.5px; margin: 0; }
.wpis a:hover h2, .wpis a:hover h3 { text-decoration: underline; text-decoration-color: var(--mosiadz); }

/* =====================================================================
   SKLEP — KATALOG
   ===================================================================== */
.okruszki { background: var(--biel); border-bottom: 1px solid var(--linia); font-size: 14px; padding: 10px 0; color: var(--tekst-slaby); }
.okruszki a { color: var(--tekst-slaby); text-decoration: none; }
.okruszki a:hover { color: var(--granat); text-decoration: underline; }
.okruszki-sep { padding: 0 8px; opacity: .5; }

.strona-sklep { padding-bottom: var(--sekcja-y); }
.strona-sklep .woocommerce-notices-wrapper:not(:empty) { margin-top: 24px; }

.woocommerce .woocommerce-result-count { color: var(--tekst-slaby); font-size: 14px; margin: 24px 0 0; }
.woocommerce .woocommerce-ordering { margin: 12px 0 0; }
.woocommerce .woocommerce-ordering select { min-height: 44px; width: auto; }

ul.products, .siatka-produktow {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; gap: clamp(16px, 3vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.karta {
  display: flex; flex-direction: column;
  background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-l);
  overflow: hidden; box-shadow: var(--cien-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.karta:hover { transform: translateY(-3px); box-shadow: var(--cien-2); }
.karta-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.karta-obraz { position: relative; background: var(--kosc-ciemna); }
.karta-obraz img { width: 100%; aspect-ratio: 1 / 1.414; object-fit: cover; }
.karta-tresc { padding: 16px 18px 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.karta-kategoria { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mosiadz); margin: 0; }
.karta-tytul { font-size: 18px; margin: 2px 0 4px; }
.karta-warianty { font-size: 13.5px; color: var(--tekst-slaby); margin: 0; }
.karta-cena { font-family: var(--font-naglowek); font-size: 19px; font-weight: 700; color: var(--granat); margin: 8px 0 0; }
.karta-cena del { color: var(--tekst-slaby); font-weight: 400; font-size: 16px; margin-right: 6px; }
.karta-cena ins { text-decoration: none; }
.karta-cena-od { font-size: 13px; font-weight: 500; color: var(--tekst-slaby); margin-right: 4px; }
.karta-akcje { padding: 0 18px 18px; }
.karta-akcje .button { width: 100%; }

.znaczki { position: absolute; top: 12px; left: 12px; display: grid; gap: 6px; z-index: 2; }
.znaczek {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--granat); color: var(--biel);
}
.znaczek--promocja { background: var(--alarm); }
.znaczek--nowosc { background: var(--sukces); }
.znaczek--pod { background: var(--mosiadz); }

/* =====================================================================
   SKLEP — KARTA PRODUKTU
   ===================================================================== */
.woocommerce div.product { padding-top: 32px; }
.woocommerce div.product .product_title { margin-bottom: .2em; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
  font-family: var(--font-naglowek); font-size: 28px; font-weight: 700; color: var(--granat); margin: 8px 0 16px;
}
.woocommerce div.product p.price del { color: var(--tekst-slaby); font-size: 20px; font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--tekst-slaby); }

.woocommerce div.product form.cart { margin: 20px 0; display: grid; gap: 14px; }
/* Tabela wariantów Woo rozkłada się na blok — inaczej komórka z listą i odnośnikiem
   „Wyczyść” trzyma się w jednym wierszu i rozpycha kartę produktu na telefonie. */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
  display: block; width: 100%; max-width: 100%; border-collapse: collapse;
}
.woocommerce div.product form.cart .variations td { padding: 0 0 12px; }
.woocommerce div.product form.cart .variations label { display: block; margin-bottom: 6px; }
/* WooCommerce daje liście wariantów `min-width: 75%` i `margin-right: 1em` (miejsce na odnośnik
   „Wyczyść”). Przy szerokości 100% ten margines wystawał poza kontener i to on dokładał
   16 px poziomego przewijania na telefonie — odnośnik i tak schodzi u nas do nowej linii. */
.woocommerce div.product form.cart .variations select {
  width: 100%; min-width: 0; max-width: 100%; margin: 0;
}
.woocommerce div.product form.cart .reset_variations { display: inline-block; margin-top: 6px; font-size: 14px; }
.woocommerce div.product form.cart .quantity { display: inline-flex; }
.woocommerce div.product form.cart .quantity .qty { width: 88px; text-align: center; }
.woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; }

.fakty { list-style: none; margin: 20px 0; padding: 18px; display: grid; gap: 12px; background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-l); }
.fakty li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--tekst); }
.fakty .ikona { color: var(--mosiadz); margin-top: 2px; }

.woocommerce div.product .woocommerce-tabs { margin-top: 40px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--linia);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  font-weight: 600; text-decoration: none; color: var(--tekst-slaby); border-bottom: 3px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--granat); border-bottom-color: var(--mosiadz); }
.woocommerce table.shop_attributes { width: 100%; border-collapse: collapse; }
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linia); font-size: 15px;
}
.woocommerce table.shop_attributes th { width: 40%; color: var(--tekst-slaby); font-weight: 600; }
.woocommerce table.shop_attributes p { margin: 0; }

.woocommerce .related > h2, .woocommerce .upsells > h2 { margin-top: 48px; }

/* Galeria produktu */
.woocommerce div.product div.images { margin-bottom: 24px; }
.woocommerce div.product div.images img { border-radius: var(--r-l); }
.woocommerce div.product div.images .flex-control-thumbs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 10px; }
.woocommerce div.product div.images .flex-control-thumbs li { width: 80px; }
.woocommerce div.product div.images .flex-control-thumbs img { border-radius: var(--r-s); cursor: pointer; }

/* =====================================================================
   KOSZYK, KASA, KONTO
   ===================================================================== */
.woocommerce-cart .strona-sklep, .woocommerce-checkout .strona-sklep, .woocommerce-account .strona-sklep { padding-top: 32px; }

.pasek-wysylki { background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-l); padding: 14px 18px; margin-bottom: 20px; }
.pasek-wysylki p { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.pasek-tor { height: 8px; background: var(--kosc-ciemna); border-radius: 999px; overflow: hidden; }
/* Skala zamiast szerokości: zmiana `width` przelicza układ przy każdej klatce, `transform` idzie
   po stronie kompozytora. Wypełnienie podaje PHP jako `--wypelnienie` (0–1). */
.pasek-tor span {
  display: block; height: 100%; width: 100%; background: var(--mosiadz);
  transform: scaleX(var(--wypelnienie, 0)); transform-origin: left center;
  transition: transform .3s ease;
}
.pasek-wysylki--pelny .pasek-tor span { background: var(--sukces); }

.woocommerce table.shop_table {
  width: 100%; border-collapse: collapse; background: var(--biel);
  border: 1px solid var(--linia); border-radius: var(--r-l); overflow: hidden;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
  padding: 14px 16px; border-bottom: 1px solid var(--kosc-ciemna); text-align: left; font-size: 15.5px; vertical-align: middle;
}
.woocommerce table.shop_table th { font-family: var(--font-naglowek); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-slaby); }
.woocommerce table.shop_table img { width: 64px; border-radius: var(--r-s); }
.woocommerce table.shop_table .product-remove a.remove {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
  color: var(--alarm); text-decoration: none; font-size: 20px; line-height: 1;
}
.woocommerce table.shop_table .product-remove a.remove:hover { background: rgba(168, 50, 31, .1); }

.woocommerce .cart-collaterals { margin-top: 28px; }
.woocommerce .cart_totals h2, .woocommerce-checkout #order_review_heading { font-size: 22px; }
.woocommerce .cart_totals table, .woocommerce-checkout-review-order-table { background: var(--biel); }
.woocommerce .cart_totals .order-total .amount { font-family: var(--font-naglowek); font-size: 22px; }

.woocommerce .woocommerce-shipping-methods, .woocommerce ul#shipping_method { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.woocommerce ul#shipping_method li { display: flex; align-items: center; gap: 8px; }

.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
  background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-l); padding: 20px; margin-bottom: 24px;
}
.woocommerce form .form-row { margin: 0 0 16px; }
.woocommerce-checkout #payment { background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-l); padding: 20px; }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; border: 0; }
.woocommerce-checkout #payment ul.payment_methods li { padding: 12px; border: 1px solid var(--linia); border-radius: var(--r-m); }
.woocommerce-checkout #payment div.payment_box { background: var(--kosc); border-radius: var(--r-m); padding: 12px; font-size: 14.5px; margin-top: 10px; }
.woocommerce-checkout #payment div.payment_box p { margin: 0; }

/* Status niesie kolor obrysu i kropki, nie gruba krecha przy krawędzi — komunikat ma być
   czytelny, a nie krzykliwy. Kropka zostaje widoczna także przy wyłączonych kolorach tła. */
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error {
  --status: var(--mosiadz);
  list-style: none; background: var(--biel);
  border: 1px solid color-mix(in srgb, var(--status) 45%, var(--linia));
  border-radius: var(--r-m); box-shadow: var(--cien-1);
  padding: 14px 18px; margin: 0 0 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--status);
}
.woocommerce .woocommerce-message { --status: var(--sukces); }
.woocommerce .woocommerce-error { --status: var(--alarm); }
.woocommerce .woocommerce-message .button, .woocommerce .woocommerce-info .button { margin-left: auto; }

.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: inline-flex; min-height: 44px; align-items: center; padding: 8px 14px;
  background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-m); text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--granat); color: var(--biel); border-color: var(--granat); }

/* Wybór paczkomatu (InPost) */
.ap-geowidget { background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-l); padding: 16px; margin: 16px 0; }
.ap-geowidget h3 { font-size: 17px; margin-bottom: .4em; display: flex; align-items: center; gap: 8px; }
.ap-geowidget .ikona { color: var(--mosiadz); }
.ap-geowidget-wybor { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ap-geowidget-wybrany { font-weight: 600; }
.ap-geowidget-podpowiedz { color: var(--tekst-slaby); font-size: 14px; margin: 8px 0 0; }
.ap-geowidget-lista { display: grid; gap: 8px; margin: 12px 0 0; max-height: 260px; overflow-y: auto; }
.ap-geowidget-lista button {
  display: grid; gap: 2px; text-align: left; width: 100%; padding: 10px 12px; min-height: 44px;
  background: var(--kosc); border: 1px solid var(--linia); border-radius: var(--r-m); cursor: pointer; font: inherit;
}
.ap-geowidget-lista button:hover { border-color: var(--mosiadz); }
.ap-geowidget-lista strong { font-size: 15px; }
.ap-geowidget-lista span { font-size: 13.5px; color: var(--tekst-slaby); }

/* =====================================================================
   TREŚCI STATYCZNE
   ===================================================================== */
.strona-tresc { padding-block: clamp(32px, 5vw, 56px); }
.proza { font-size: 17px; }
.proza h2 { margin-top: 1.6em; }
.proza h3 { margin-top: 1.4em; }
.proza ul, .proza ol { padding-left: 1.3em; }
.proza li { margin-bottom: .4em; }
.proza table { width: 100%; border-collapse: collapse; margin: 1.5em 0; background: var(--biel); }
.proza th, .proza td { padding: 10px 12px; border: 1px solid var(--linia); text-align: left; font-size: 15.5px; }
.proza th { background: var(--kosc-ciemna); font-family: var(--font-naglowek); }
.proza blockquote {
  margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--mosiadz);
  color: var(--tekst-slaby); font-size: 18px;
}
.wpis-okladka { margin: 0 0 28px; }
.wpis-okladka img { border-radius: var(--r-l); width: 100%; }
.nawigacja-wpisow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linia); }

.strona-404 { padding-block: clamp(48px, 8vw, 96px); text-align: center; }
.strona-404 .szukajka { max-width: 460px; margin: 24px auto; }
.strona-404 .hero-akcje { justify-content: center; }
.kod-bledu { font-family: var(--font-naglowek); font-size: clamp(64px, 14vw, 128px); font-weight: 700; color: var(--mosiadz-jasny); line-height: 1; margin: 0; }

.strona-lista { padding-block: clamp(32px, 5vw, 56px); }
.wpisy--lista { grid-template-columns: 1fr; }
.woocommerce-pagination ul, .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 32px 0 0; padding: 0; }
.woocommerce-pagination a, .woocommerce-pagination span, .nav-links a, .nav-links span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 6px 12px;
  background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-m); text-decoration: none;
}
.woocommerce-pagination .current, .nav-links .current { background: var(--granat); color: var(--biel); border-color: var(--granat); }

/* =====================================================================
   STOPKA
   ===================================================================== */
.stopka { background: var(--granat); color: rgba(246, 243, 236, .82); padding-top: clamp(40px, 6vw, 72px); margin-top: auto; }
.stopka-siatka { display: grid; gap: 32px; padding-bottom: 40px; }
.stopka .logo, .stopka h2, .stopka strong { color: var(--biel); }
.stopka .logo-tekst span { color: var(--mosiadz-jasny); }
.stopka-opis { font-size: 15.5px; max-width: 40ch; }
.stopka-tytul { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--mosiadz-jasny) !important; margin-bottom: 14px; }
.stopka a { color: rgba(246, 243, 236, .85); text-decoration: none; }
.stopka a:hover { color: var(--biel); text-decoration: underline; }
.stopka-menu, .stopka-kontakt, .stopka-fakty, .stopka-social { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stopka-menu a, .stopka-kontakt a { display: inline-flex; align-items: center; min-height: 32px; }
.stopka-fakty li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.stopka-fakty .ikona { color: var(--mosiadz-jasny); }
.stopka-social { grid-auto-flow: column; justify-content: start; gap: 16px; margin-top: 16px; }
.stopka-adres { font-style: normal; font-size: 15px; margin-top: 14px; line-height: 1.7; }
.stopka-dol { border-top: 1px solid rgba(246, 243, 236, .14); padding: 18px 0; font-size: 14px; }
.stopka-dol .kontener { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.stopka-dol p { margin: 0; }
.stopka-demo { color: rgba(246, 243, 236, .55); }

/* =====================================================================
   PANEL AKCEPTACJI (widok w kokpicie WP jest stylowany osobno)
   ===================================================================== */
.pusto { color: var(--tekst-slaby); }

/* =====================================================================
   BREAKPOINTY
   ===================================================================== */
/* Najwęższe telefony (320 px): logo, menu i dwie ikony mieszczą się dopiero po zdjęciu podpisu
   i ścieśnieniu odstępów. Cele dotykowe zostają 42 px — powyżej progu WCAG 2.2 (2.5.8: 24 px). */
@media (max-width: 400px) {
  .logo-tekst span { display: none; }
  .logo-sygnet { width: 32px; height: 32px; }
  .logo-tekst strong { font-size: 18px; }
  .naglowek-siatka { gap: 4px; }
  .akcja, .przelacznik-menu { width: 42px; }
}

@media (min-width: 600px) {
  .kroki, .atuty, .wpisy, .kategorie { grid-template-columns: repeat(2, 1fr); }
  .stopka-siatka { grid-template-columns: repeat(2, 1fr); }
  .woocommerce div.product form.cart .single_add_to_cart_button { width: auto; min-width: 220px; }
}

@media (min-width: 900px) {
  body { font-size: 17.5px; }
  .naglowek-akcje .przelacznik-walut { display: flex; }
  .naglowek-akcje .akcja--szukaj { display: inline-flex; }
  .hero-siatka { grid-template-columns: 1.05fr .95fr; align-items: center; }
  .kroki { grid-template-columns: repeat(4, 1fr); }
  .atuty { grid-template-columns: repeat(4, 1fr); }
  .kategorie { grid-template-columns: repeat(3, 1fr); }
  .kategoria a { grid-template-columns: 1fr; text-align: center; padding: 22px; }
  .kategoria-obraz { aspect-ratio: 4 / 3; }
  .wpisy { grid-template-columns: repeat(3, 1fr); }
  .wpisy--lista { grid-template-columns: repeat(2, 1fr); }
  .stopka-siatka { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }

  .woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: start; }
  .woocommerce div.product div.images { grid-column: 1; margin: 0; }
  .woocommerce div.product .summary { grid-column: 2; margin: 0; }
  .woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related, .woocommerce div.product .up-sells { grid-column: 1 / -1; }

  .woocommerce-cart-form { float: none; }
  .woocommerce .cart-collaterals { display: flex; justify-content: flex-end; }
  .woocommerce .cart-collaterals .cart_totals { width: min(100%, 420px); }
  .woocommerce-checkout .col2-set { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul { gap: 8px; }
}

@media (min-width: 1100px) {
  /* Siedem pozycji menu, logo, waluta i trzy ikony mieszczą się w jednym pasku dopiero tutaj —
     niżej zostaje menu rozwijane, bo inaczej nagłówek rozpycha stronę. */
  .menu-glowne { display: block; }
  .przelacznik-menu { display: none; }
  .menu-mobilne { display: none !important; }

  .woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start; }
  .woocommerce-checkout form.checkout .col2-set { grid-column: 1; grid-template-columns: 1fr; }
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review { grid-column: 2; }
}

@media print {
  .naglowek, .stopka, .pasek-zapowiedzi, .karta-akcje, .hero-akcje { display: none !important; }
  body { background: #fff; color: #000; }
}