/*
  Laris 2026 — warstwa systemowa.

  Szkielet wartości pochodzi z arkusza shop.laris.ua (CS-Cart, motyw
  „laris”), żeby oba serwisy czytało się jak jedną firmę:

    grafit   #2d343c   309 wystąpień — kolor tekstu i ciemnych pasów
    tło      #f5f7f9    34           — tło stron
    linia    #e9edf1    54           — obramowania i separatory
    szary    #696e82    36           — tekst drugorzędny
    promień  10px      136           — karty; 5px drobne; 20px pigułki

  ALE akcent wiodący jest inny niż na referencji. Tam to turkus #14b8c8;
  tutaj — błękit z logotypu laris-perfect.pl, #1490ca. Zmiana na życzenie
  klienta i zgodna z tym, co na stronie już było: motyw nadrzędny maluje
  tym samym #1490ca burgera i etykietę bestsellera. Szczegóły i wyliczenia
  przy tokenach --l-brand niżej.

  Pomarańcz #f08200 zostaje z obecnej marki laris-perfect.pl — to jedyny
  kolor, którego referencja nie narzuca, a który klient ma już rozpoznawalny.
  Trzymamy go dla wezwań B2B, żeby nie zlewały się z błękitem sklepu.

  Plik nie nadpisuje szablonów — wyłącznie wygląd.
*/

:root {
  /* kolory */
  --l-ink: #2d343c;
  --l-ink-soft: #4a525c;
  --l-muted: #696e82;

  /* ——— błękit z logo ———

     Akcentem wiodącym jest teraz kolor wzięty wprost z logotypu
     laris-perfect.pl (/wp-content/uploads/2020/04/logo-laris.png), a nie
     turkus z referencyjnego shop.laris.ua. Policzone z samego pliku: litery
     „LARIS” i obrys trójkąta to #1490ca wraz z sąsiadami #158fca i #078cc8,
     razem około 11% nieprzezroczystych pikseli; jasne wypełnienie trójkąta
     to rodzina #97c9e9 … #e6f2f9.

     #1490ca był zresztą na stronie od zawsze — motyw nadrzędny maluje nim
     burgera i etykietę bestsellera. Turkus był tu obcy.

     Trzy stopnie, bo jeden kolor nie obsłuży wszystkiego:
       --l-brand       #1490ca  wypełnienia, obramowania, akcenty
       --l-brand-dark  #1073a2  napisy i najechania — 5,26:1 na bieli
                                i 4,89:1 na tle strony #f5f7f9
       --l-brand-tint  #e6f2f9  jasne podkłady; wzięty z logo, grafit na nim 11:1

     Sam #1490ca ma na bieli 3,58:1 — wystarcza dla obramowań i dużych
     wypełnień (próg 3:1), ale nie dla drobnego napisu. Stąd osobny stopień
     ciemny; to on naprawia jedenaście miejsc, w których poprzedni
     --l-teal-dark dawał 3,27:1. */
  --l-brand: #1490ca;
  --l-brand-dark: #1073a2;
  --l-brand-tint: #e6f2f9;
  /* Czwarty stopień istnieje z jednego powodu: skoro wypełnienia z napisem
     musiały zejść na --l-brand-dark, to najechanie potrzebuje czegoś jeszcze
     ciemniejszego — inaczej przycisk pod kursorem nie zmienia się wcale.
     Biel na nim 7,13:1. */
  --l-brand-deep: #0d5e83;

  /* Stare nazwy zostają jako aliasy — „teal” pada w arkuszach 59 razy
     i przepisywanie wszystkiego naraz tylko utrudniłoby czytanie różnicy.
     Nazwa mówi „turkus”, wartość jest błękitna: docelowo do przepisania,
     na dziś świadomy skrót. */
  --l-teal: var(--l-brand);
  --l-teal-dark: var(--l-brand-dark);
  --l-teal-tint: var(--l-brand-tint);

  /* Odnośniki i akcent pomocniczy — ten sam błękit, tylko ciemniejszy stopień.
     Wcześniej #2190c8 dawał 3,57:1, a przy najechaniu kontrast jeszcze SPADAŁ. */
  --l-blue: var(--l-brand-dark);
  --l-blue-tint: #e3f2fb;
  /* Pod biały napis — etykieta „Bestseller”. Biel na #1073a2 to 5,26:1. */
  --l-blue-deep: var(--l-brand-dark);
  --l-orange: #f08200;
  --l-orange-dark: #d97600;
  /* Pomarańcz jako NAPIS na jasnym tle. Sam #f08200 to 2,66:1, a nawet
     --l-orange-deep #b85f00 przechodzi tylko na bieli (4,49) i wykłada się
     na tle strony (4,18). Ten daje 5,21 i 4,85. */
  --l-orange-text: #a85700;
  /* Marka o ton głębiej — tylko pod biały napis. Biel na #f08200 daje 2,6:1
     i nie przechodzi progu czytelności; na #b85f00 — 4,8:1. */
  --l-orange-deep: #b85f00;

  --l-bg: #f5f7f9;
  --l-surface: #ffffff;
  --l-surface-2: #f7f7f7;
  --l-line: #e9edf1;
  --l-line-strong: #d9dee4;

  --l-ok: #1f7a4d;
  --l-warn: #b4531a;
  --l-err: #c0392b;

  /* promienie */
  --l-r-sm: 5px;
  --l-r: 10px;
  --l-r-pill: 30px;
  /* Wszystkie przyciski serwisu są pigułkami — patrz buttons.css. */
  --l-r-btn: 999px;
  /* Pola formularzy nie są pigułkami: przy wielowierszowym tekście
     zaokrąglenie zjadałoby pierwszy i ostatni znak. */
  --l-r-field: 10px;

  /* cienie */
  --l-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --l-shadow: 0 4px 18px rgba(0, 0, 0, .1);
  --l-shadow-lg: 0 10px 34px rgba(0, 0, 0, .14);

  /* odstępy */
  --l-gap: 20px;
  --l-section: 56px;

  /* typografia

     Krój nagłówkowy wzięty z referencji: shop.laris.ua pisze wszystkie
     nagłówki Manrope 700 (zmierzone na żywo). Wcześniej stał tu wąski
     Roboto Condensed i to on był powodem uwagi właściciela o wersalikach
     „несимметрично” — przy zwężonym kroju litery wąskie i szerokie idą
     w różnym rytmie. Szczegóły i pomiary w functions.php.

     Zapasowe kroje też szerokie, nie wąskie: gdyby Manrope nie dojechał,
     strona ma wyglądać tak samo, a nie wrócić do Arial Narrow. */
  --l-font-head: "Manrope", "Segoe UI", system-ui, Arial, sans-serif;
  --l-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --l-container: 1200px;
}

/* ——— podstawy ——— */

body {
  background-color: var(--l-bg);
  color: var(--l-ink);
  font-family: var(--l-font-body);
}

/* Treść stron leży na białym, tło strony zostaje szare —
   dzięki temu widać rytm sekcji, tak jak na laris.ua. */
.pagewhitecontent {
  background-color: transparent;
}

h1, h2, h3, h4, h5,
.laris-section-title {
  font-family: var(--l-font-head);
  color: var(--l-ink);
  letter-spacing: .01em;
}

/* Nagłówki sekcji na laris.ua są wersalikami, wąskie i mocne —
   to najbardziej rozpoznawalny element tamtego layoutu. */
/* Nagłówki stron i sekcji. Szablony motywu nadrzędnego wypisują je na kilka
   sposobów — „h1.offset-top” na podstronach, gołe „h3” w rzędzie z zakładkami
   („Polecamy”), własne klasy w sklepie — więc wszystkie warianty zbieramy tutaj.
   Bez tego jedna sekcja na stronie była wersalikami, a sąsiednia zwykłym
   tekstem, i strona wyglądała na złożoną z dwóch różnych motywów. */
.pagewhitecontent > .container > h3,
.pagewhitecontent > .container > .row-flex > h3,
.pagewhitecontent .header-section h3,
.woocommerce-products-header__title,
.woocommerce .page-title,
h1.page-title,
h1,
h1.offset-top,
.subpagecontent h2,
.txt-content h2,
.laris-section-title {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: .5px;
  margin: 0 0 24px;
}

a {
  color: var(--l-blue);
}

a:hover {
  color: var(--l-teal-dark);
}

/* ——— przyciski ——— */

/* Kształt przycisków ustawia buttons.css — tutaj tylko krój i grubość. */
.button-classic,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--l-font-body);
  font-weight: 600;
  letter-spacing: 0;
}

/* Wszystkie przyciski motywu nadrzędnego stoją na #1490ca z białym napisem
   (style.css:200) — czyli 3,58:1. To ten sam kolor, który wzięliśmy z logo
   na akcent, więc problem nie zniknie sam: trzeba zejść o stopień.
   Jedna reguła zamiast poprawiania każdego przycisku z osobna. */
.button-classic,
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt.checkout-button,
.woocommerce .cart .button,
.woocommerce .cart input.button,
#place_order,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wpcf7-submit {
  background-color: var(--l-brand-dark);
  color: #fff;
}

.button-classic:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wpcf7-submit:hover {
  background-color: var(--l-brand-deep);
  color: #fff;
}

/* Napisy błękitem na jasnym tle. Motyw nadrzędny wpisuje tu #1490ca
   na sztywno (style.css:159) — jako napis to 3,58:1 na bieli i 3,33:1
   na tle strony. Kolor zostaje w rodzinie, schodzi tylko o stopień. */
.bluetxt,
.bluetxt a,
a.bluetxt {
  color: var(--l-brand-dark);
}

/* Ostatnia pozycja belki kategorii — u nas „E-katalog” — jest wyróżniona
   pomarańczem (style.css: .category-navbar ul.menu > li:last-child a).
   Jako napis na bieli to 2,66:1; ten sam pomarańcz, o stopień głębiej. */
.category-navbar ul.menu > li:last-child a {
  color: var(--l-orange-text);
}

/* Rozwijana lista języków ma u nadrzędnego ciemne tło #252525
   (style.css:515), a napis dziedziczył nasz grafitowy — 1,94:1.
   Na ciemnym piszemy bielą. */
.menu-language-switcher-container .menu-item-has-children ul.sub-menu a,
.menu-language-switcher-container .menu-item-has-children ul.sub-menu span {
  color: #fff;
}

/* Główna akcja sklepu — błękit z logo. Ciemniejszy stopień, nie podstawowy:
   na samym #1490ca biały napis ma 3,58:1, a to przycisk z tekstem. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button {
  background-color: var(--l-brand-dark);
  border-color: var(--l-brand-dark);
  color: #fff;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
  background-color: var(--l-brand-deep);
  border-color: var(--l-brand-deep);
  color: #fff;
}

/* ——— pola formularzy ——— */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
select,
textarea {
  border-radius: var(--l-r-field);
  border: 1px solid var(--l-line-strong);
  background: var(--l-surface);
  font-family: var(--l-font-body);
}

/* ——— dostępność ——— */

/* Obwódka fokusu jest dwukolorowa i to nie ozdoba.
   Żaden pojedynczy kolor nie wystarcza na całym serwisie: grafit ma 12,6:1
   na białym, ale 1,22:1 na ciemnej stopce (#252525); turkus odwrotnie —
   6,36:1 na stopce i tylko 2,41:1 na białym, czyli poniżej progu 3:1
   dla elementów sterujących (WCAG 1.4.11). Ciemny rdzeń z białą otoczką
   widać na jednym i na drugim.

   Wcześniej pola formularzy dostawały obwódkę w kolorze --l-teal-tint
   (#e3f6fb) — 1,11:1 na białym, czyli praktycznie nic. */
:root {
  --l-focus: var(--l-ink);
  --l-focus-halo: #ffffff;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--l-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--l-focus-halo);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--l-focus);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ——— szarości odziedziczone po motywie nadrzędnym ——— */

/* Trzy miejsca, w których nadrzędny motyw używa szarości zbyt jasnej,
   żeby ją przeczytać. Nie mają związku ze zmianą palety — były tu wcześniej —
   ale skoro i tak przechodzimy po kontraście, domykamy je razem.
   --l-muted (#696e82) daje 5,06:1 na bieli. */
/* Przekreślona stara cena. Kolor dziedziczą elementy w środku, a wtyczka
   walut wkłada tam <bdi> — sam <del> nie wystarczy, stąd potomkowie. */
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del *,
.woocommerce div.product p.price del,
.woocommerce div.product del,
.woocommerce div.product del *,
.woocommerce .price del,
.woocommerce .price del * {
  color: var(--l-muted);   /* było #868686 — 3,64:1 */
}

/* Daty wpisów nie mają żadnej klasy — nadrzędny ma gołe „time { color: #999 }”,
   więc celujemy tak samo gołym selektorem. */
time,
.entry-date,
.sidebar-posts time,
.news-item time {
  color: var(--l-muted);   /* było #999 — 2,85:1 */
}

/* Karta produktu — cztery szarości nadrzędnego motywu, wszystkie poniżej
   progu. Najgorsza to kod produktu: #bababa na tle strony daje 1,81:1,
   czyli napis prawie niewidoczny, a to jedyne miejsce, gdzie kupujący
   hurtowo znajdzie symbol do zamówienia. */
.breadcrumb span,
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
.prduct-sku,
.product_meta,
.lovebutton,
span.lovebutton {
  color: var(--l-muted);
}

/* „Na stanie” — zieleń nadrzędna #388e3c to 3,83:1 na tle strony.
   Nasza --l-ok jest ciemniejsza i przechodzi. */
.woocommerce div.product p.stock.in-stock,
p.stock.in-stock {
  color: var(--l-ok);
}

/* Stopka stoi na grafitowym #2d343c, więc tu odwrotnie — trzeba jaśniej. */
footer .copyright,
.footer-bottom p,
.copyright p {
  color: #b0b0b0;          /* było #959595 — 4,20:1; teraz 5,81:1 */
}