/*
Theme Name: Galeria Płytek
Theme URI: https://galeriaplytek.pl
Description: Motyw potomny Storefront dla sklepu Galeria Płytek PP. System wizualny zgodny ze specyfikacją. Wykonanie: ZautomatyzujSię.
Author: ZautomatyzujSię
Author URI: https://zautomatyzujsie.com
Template: storefront
Version: 2.47.1
License: GNU General Public License v2 or later
Text Domain: galeria-plytek
*/

/* ==========================================================================
   Zmienne CSS systemu wizualnego (punkt 1 specyfikacji graficznej)
   ========================================================================== */

:root {
  /* 1.1 Kolory: ciepla paleta papierowa z ceglanym akcentem */
  --gp-kolor-tlo: #F7F3ED;
  --gp-kolor-karta-pole: #FFFDF8;
  --gp-kolor-pas-wyrozniony: #EDE6DB;
  --gp-kolor-obrys: #E2D9CC;
  --gp-kolor-obrys-mocny: #C4B8A6;
  --gp-kolor-tekst-glowny: #23201B;
  --gp-kolor-tekst-drugi: #57514A;
  --gp-kolor-tekst-pomocniczy: #756D64;
  --gp-kolor-tekst-wygaszony: #A09689;
  --gp-kolor-akcent: #AE4826;
  --gp-kolor-akcent-ciemny: #93381A;
  --gp-kolor-tlo-zaufanie: #1C1B19;
  --gp-kolor-zielony-etykieta: #2F5D4A;
  --gp-kolor-tlo-blokada: #F7ECE6;
  --gp-kolor-biel: #FFFDF8;
  --gp-kolor-czern-czysta: #000000;
  --gp-kolor-tekst-jasny-poboczny: rgba(255, 253, 248, 0.75);

  /* Cienie: zakaz cieni pod kartami. Jedyny cien dla menu i paska mobilnego */
  --gp-cien-panel: 0 8px 24px rgba(35, 32, 27, 0.10);
  --gp-cien-karta-mala: 0 4px 12px rgba(35, 32, 27, 0.05);
  --gp-cien-strzalka: 0 2px 8px rgba(35, 32, 27, 0.15);

  /* Gradienty i nakladki */
  /* Nakladka bohatera: miekkie wejscie po LEWEJ i miekkie wyjscie po PRAWEJ.
     Stara wersja trzymala pelne krycie az do 45 procent szerokosci, czyli
     335 px z 744, wiec blada plama zjadala polowe zdjecia. Teraz pelne krycie
     konczy sie na 4 procentach, a czyste zdjecie zaczyna sie na 26.
     Prawa krawedz zanika do tla strony, zeby zdjecie nie urywalo sie ostra
     linia na krawedzi kolumny, tylko przechodzilo w tlo. */
  --gp-gradient-bohater: linear-gradient(90deg, #F7F3ED 0%, rgba(247, 243, 237, 0.92) 4%, rgba(247, 243, 237, 0.45) 14%, rgba(247, 243, 237, 0) 26%, rgba(247, 243, 237, 0) 68%, rgba(247, 243, 237, 0.35) 84%, rgba(247, 243, 237, 0.78) 94%, #F7F3ED 100%);
  /* Na telefonie tekst lezy nad zdjeciem, wiec nakladka musi je przykryc,
     ale nie robic z niego mgly.

     Wzmacnialem ja do 0,96, bo pomiar pokazywal kontrast 2,24 i 1,04.
     Pomiar byl WADLIWY: brał najgorszy pojedynczy piksel z obszaru, wiec
     trafial raz w sama litere (kontrast tekstu z samym soba wynosi 1,00),
     a raz w antyaliasing kropki paginacji, czyli w piec pikseli na 6310.
     Rzetelny pomiar (piaty percentyl, z odrzuceniem pikseli tekstu) daje
     14,68 dla tekstu i 5,06 dla akcentu, i to JUZ PRZED wzmocnieniem.
     Wzmocnienie bylo wiec lekiem na chorobe narzedzia, nie strony. */
  --gp-gradient-bohater-mobil: linear-gradient(180deg, rgba(247, 243, 237, 0.88) 0%, rgba(247, 243, 237, 0.62) 55%, rgba(247, 243, 237, 0.15) 100%);
  --gp-gradient-kafel: linear-gradient(180deg, rgba(28, 27, 25, 0) 40%, rgba(28, 27, 25, 0.88) 100%);

  /* Nakladka tla (overlay tla pod panelem mobilnym i szuflada) */
  --gp-kolor-nakladka: rgba(35, 32, 27, 0.40);

  /* Mgla akcentu: pierscien fokusa na polach i przyciskach */
  --gp-kolor-akcent-mgla: rgba(174, 72, 38, 0.15);

  /* 1.2 Typografia */
  --gp-font-rodzina: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Rozmiary, interlinie, wagi i odstepy liter */
  --gp-tekst-h1-strony-rozmiar: 40px;
  --gp-tekst-h1-strony-interlinia: 1.18;
  --gp-tekst-h1-strony-waga: 600;
  --gp-tekst-h1-strony-odstep: 0.02em;

  --gp-tekst-h1-dzialu-rozmiar: 32px;
  --gp-tekst-h1-dzialu-interlinia: 1.25;
  --gp-tekst-h1-dzialu-waga: 600;
  --gp-tekst-h1-dzialu-odstep: 0.04em;

  --gp-tekst-h2-rozmiar: 22px;
  --gp-tekst-h2-interlinia: 1.40;
  --gp-tekst-h2-waga: 600;

  --gp-tekst-h3-rozmiar: 20px;
  --gp-tekst-h3-interlinia: 1.40;
  --gp-tekst-h3-waga: 600;

  --gp-tekst-h4-rozmiar: 18px;
  --gp-tekst-h4-interlinia: 1.40;
  --gp-tekst-h4-waga: 600;

  --gp-tekst-lead-rozmiar: 17px;
  --gp-tekst-lead-interlinia: 1.55;
  --gp-tekst-lead-waga: 400;

  --gp-tekst-glowny-rozmiar: 15px;
  --gp-tekst-glowny-interlinia: 1.55;
  --gp-tekst-glowny-waga: 400;

  --gp-tekst-mocny-rozmiar: 15px;
  --gp-tekst-mocny-interlinia: 1.55;
  --gp-tekst-mocny-waga: 600;

  --gp-tekst-maly-rozmiar: 14px;
  --gp-tekst-maly-interlinia: 1.55;
  --gp-tekst-maly-waga: 400;

  --gp-tekst-mikro-rozmiar: 13px;
  --gp-tekst-mikro-interlinia: 1.55;
  --gp-tekst-mikro-waga: 400;

  --gp-tekst-etykieta-rozmiar: 11px;
  --gp-tekst-etykieta-interlinia: 1.40;
  --gp-tekst-etykieta-waga: 500;
  --gp-tekst-etykieta-odstep: 0.08em;

  --gp-tekst-plakietka-rozmiar: 10px;
  --gp-tekst-plakietka-interlinia: 1.40;
  --gp-tekst-plakietka-waga: 600;
  --gp-tekst-plakietka-odstep: 0.08em;

  --gp-tekst-kwota-duza-rozmiar: 28px;
  --gp-tekst-kwota-duza-interlinia: 1.22;
  --gp-tekst-kwota-duza-waga: 700;

  --gp-tekst-kwota-pozycji-rozmiar: 20px;
  --gp-tekst-kwota-pozycji-interlinia: 1.40;
  --gp-tekst-kwota-pozycji-waga: 600;

  /* 1.3 Siatka i odstepy */
  --gp-szerokosc-desktop: 1440px;
  --gp-kontener-szerokosc: 1200px;
  --gp-margines-boczny-desktop: 120px;
  --gp-szerokosc-mobil: 390px;
  --gp-margines-boczny-mobil: 20px;
  --gp-kolumna-boczna: 380px;
  --gp-kolumna-filtry-katalog: 280px;
  --gp-odstep-kolumn: 40px;

  /* Skok odstepow: 4, 8, 12, 16, 20, 24, 32, 40, 48, 72 */
  --gp-sp-4: 4px;
  --gp-sp-8: 8px;
  --gp-sp-12: 12px;
  --gp-sp-16: 16px;
  --gp-sp-20: 20px;
  --gp-sp-24: 24px;
  --gp-sp-32: 32px;
  --gp-sp-40: 40px;
  --gp-sp-48: 48px;
  --gp-sp-56: 56px;
  --gp-sp-72: 72px;
  --gp-sp-80: 80px;
  --gp-sp-96: 96px;

  /* Rytm pionowy sekcji */
  --gp-rytm-sekcje: 72px;
  --gp-rytm-naglowek-tresc: 40px;
  --gp-rytm-karty: 20px;

  /* 1.4 Zaokraglenia */
  /* DWA PROMIENIE ZAMIAST PIECIU, 2026-09-07 (audyt anti-ui-slop).
     Pomiar strony glownej: 10 px w 33 miejscach, 6 px w 28, 3 px w 23,
     4 px w 11, 8 px w 4. Piec wartosci to nie system, tylko historia
     projektu. Zostaje 4 px dla drobiazgow (znacznik, plakietka, chip)
     i 8 px dla powierzchni (pole, przycisk, karta, pas, kafel). */
  --gp-promien-znacznik: 4px;
  --gp-promien-pole: 8px;
  --gp-promien-przycisk-sec: 8px;
  --gp-promien-plakietka: 4px;
  --gp-promien-chip: 4px;
  --gp-promien-przycisk-main: 8px;
  --gp-promien-karta: 8px;
  --gp-promien-pas: 8px;
  --gp-promien-kafel: 8px;
  --gp-promien-blok-duzy: 8px;
  --gp-promien-pelny: 9999px;

  /* ------------------------------------------------------------------
     RUCH: czasy i krzywe.

     Jeden slownik na caly sklep, zeby dwa komponenty nie animowaly tej
     samej rzeczy z rozna predkoscia. Liczby z researchu praktyk animacji
     (RESEARCH-ANIMACJE-GEMINI.md, 2026-09-09), sprawdzone pomiarem na tym
     sklepie.

     Kierunek: ruch ma potwierdzac precyzje interfejsu, a nie bawic.
     Nic nie trwa dluzej niz 400 ms, bo powyzej tej wartosci uzytkownik
     przestaje odbierac animacje jako reakcje, a zaczyna jako opoznienie.
     ------------------------------------------------------------------ */

  /* Mikroreakcja na klikniecie i najazd: krotsza od czasu reakcji na bodziec. */
  --gp-ruch-mikro: 90ms;
  /* Zmiana koloru, obrysu, podkreslenia. */
  --gp-ruch-krotki: 180ms;
  /* Zwijanie sekcji. */
  --gp-ruch-zwijanie: 200ms;
  /* Rozwijanie sekcji: o 50 ms dluzej niz zwijanie, bo tresc dopiero wchodzi. */
  --gp-ruch-rozwijanie: 250ms;
  /* Czas wejscia POJEDYNCZEGO elementu.
     640 ms, a nie 400: przy 400 ms i czterech elementach cale zdarzenie trwalo
     475 ms i zlewalo sie w jeden blysk. To jest ruch REDAKCYJNY, nie reakcja na
     klikniecie, wiec wolno mu trwac dluzej: granica 200 ms z wytycznych dotyczy
     odpowiedzi interfejsu na dzialanie uzytkownika, a nie wejscia tresci. */
  --gp-ruch-wejscie: 640ms;
  /* Odstep miedzy kolejnymi elementami kaskady.
     Encyklopedia designu (wiki, „Choreografia i Staggering") stawia DWA warunki:
     krok 20 do 30 ms ORAZ cala kaskada zamknieta w 250 ms. Pierwszy warunek jest
     pochodna drugiego i dotyczy SIATEK, gdzie elementow jest dwadziescia: tam
     krok 30 ms daje juz 600 ms i trzeba grupowac falami.
     Tu elementy sa CZTERY i nazwane. Przy kroku 25 ms roznica miedzy pierwszym
     a ostatnim wynosila 75 ms, czyli mniej, niz oko odbiera jako kolejnosc:
     wlasciciel zglosil to slowami „strasznie szybko, w setna sekundy nie widac".
     Krok 70 ms daje rozjazd 210 ms, czyli miesci sie w twardym limicie 250 ms
     i jest widoczny jako sekwencja, a nie jako jedno przenikanie. */
  --gp-ruch-kaskada-krok: 70ms;

  /* Wejscie: gwaltowny start, dlugie miekkie wyhamowanie. */
  --gp-krzywa-wejscie: cubic-bezier(0.16, 1, 0.3, 1);
  /* Rozwijanie: ruch rusza od razu po kliknieciu. */
  --gp-krzywa-rozwijanie: cubic-bezier(0.2, 0, 0, 1);
  /* Zwijanie: przyspiesza do konca, zeby nie przedluzac znikania. */
  --gp-krzywa-zwijanie: cubic-bezier(0.4, 0, 1, 1);

  /* Dystans, o ktory element podjezdza przy wejsciu. Encyklopedia stawia
     granice 12 do 16 px: wiecej sprawia, ze tekst ucieka spod wzroku
     w trakcie czytania naglowka. */
  --gp-ruch-przesuniecie: 16px;
}

/* ==========================================================================
   Odnosniki i typografia Storefront - nadpisanie fioletu na system wizualny
   ========================================================================== */
a,
.cat-links a,
.tags-links a,
.entry-content a,
.site-content a {
  color: var(--gp-kolor-akcent);
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

a:hover,
a:focus,
.cat-links a:hover,
.tags-links a:hover,
.entry-content a:hover,
.site-content a:hover,
.cat-links a:focus,
.tags-links a:focus,
.entry-content a:focus,
.site-content a:focus {
  color: var(--gp-kolor-akcent-ciemny);
  text-decoration: underline;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
.entry-title a,
.page-title a,
.entry-header h1 a,
.entry-header h2 a,
.entry-header h3 a,
.entry-header .entry-title a {
  color: inherit;
  text-decoration: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
.entry-title a:hover,
.page-title a:hover,
.entry-header h1 a:hover,
.entry-header h2 a:hover,
.entry-header h3 a:hover,
.entry-header .entry-title a:hover,
h1 a:focus,
h2 a:focus,
h3 a:focus,
h4 a:focus,
h5 a:focus,
h6 a:focus,
.entry-title a:focus,
.page-title a:focus,
.entry-header h1 a:focus,
.entry-header h2 a:focus,
.entry-header h3 a:focus,
.entry-header .entry-title a:focus {
  color: var(--gp-kolor-akcent);
  text-decoration: none;
}

.entry-meta a,
.entry-header .posted-on a,
.entry-header .post-author a,
.entry-header .post-comments a,
.byline a,
.comments-link a {
  color: var(--gp-kolor-tekst-pomocniczy);
  text-decoration: none;
}

.entry-meta a:hover,
.entry-header .posted-on a:hover,
.entry-header .post-author a:hover,
.entry-header .post-comments a:hover,
.byline a:hover,
.comments-link a:hover,
.entry-meta a:focus,
.entry-header .posted-on a:focus,
.entry-header .post-author a:focus,
.entry-header .post-comments a:focus,
.byline a:focus,
.comments-link a:focus {
  color: var(--gp-kolor-akcent);
  text-decoration: underline;
}