/*
  Laris 2026 — komponenty.

  Selektory celują w klasy motywu nadrzędnego (sklep) i WooCommerce,
  bo szablonów nie przepisujemy. Dzięki temu aktualizacja logiki
  w motywie nadrzędnym nie rozjeżdża wyglądu.
*/

/* ═══ pasek górny ═══ */

/* Kreski pod paskiem nie ma — patrz „bez linii pod spodem” przy
   .middle-nav-header niżej. Dzieliła biel na biel i nic nie wnosiła. */
.top .header-top {
  background: var(--l-surface);
  border-bottom: 0;
}

.top .header-top a {
  color: var(--l-ink-soft);
  font-size: 13px;
}

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

/* ═══ nagłówek ═══ */

/* Bez linii pod spodem.

   Klient: „в верхней части хедера у нас есть разные какие-то линии … под
   хедером есть какая-то такая полоска с тенью”. Były tu dwie kreski naraz —
   jedna pod paskiem informacyjnym, druga pod rzędem z logotypem — a każda
   dzieliła biel na biel. Na shop.laris.ua nie ma ani jednej: nagłówek jest
   biały, strona pod nim szara (--l-bg) i to samo w sobie wystarcza za
   granicę. Kreski zdejmujemy, rozdziela kolor. */
.middle-nav-header {
  background: var(--l-surface);
  padding: 14px 0;
  border-bottom: 0;
}

/* Wyszukiwarka pigułką — jeden z dwóch elementów, po których od razu
   poznaje się layout laris.ua (drugi to turkusowy przycisk katalogu).

   Obramowania w spoczynku nie ma (to była trzecia z „linii”, na które
   klient wskazywał): pigułka odcina się od bieli nagłówka samym
   wypełnieniem. Przezroczysta ramka zostaje po to, żeby fokus mógł ją
   pomalować, nie przesuwając przy tym zawartości o piksel. */
.search-top .search-form {
  display: flex;
  align-items: center;
  background: var(--l-surface-2);
  border: 1px solid transparent;
  border-radius: var(--l-r-pill);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* Jeden pierścień, nie dwa. Wcześniej fokus dawał obwódkę I 3-pikselową
   poświatę wokół niej — „ховер ещё дополнительный”. Zostaje sama obwódka
   w kolorze marki: widać ją wyraźnie, a nic się nie rozdyma. Usunąć jej
   nie można — bez widocznego fokusu pole jest nieosiągalne z klawiatury. */
.search-top .search-form:focus-within {
  border-color: var(--l-brand);
  box-shadow: none;
}

.search-top .search-field {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 13px 20px;
  font-size: 15px;
}

/* Fokus pokazuje TYLKO opakowanie — „.search-form:focus-within" wyżej.
   Wcześniej pole dostawało jeszcze własną obwódkę i wychodziły dwa pierścienie
   naraz: niebieski wokół pigułki i ciemny prostokąt w środku. Jeden komunikat
   wystarczy, a że siedzi na opakowaniu, obejmuje też przycisk „Szukaj". */
.search-top .search-field:focus-visible,
.search-top .search-field:focus {
  outline: none;
  box-shadow: none;
}

.search-top .search-submit {
  border: 0;
  border-radius: var(--l-r-pill);
  /* Błękit z logo (#1490ca) leży dokładnie pośrodku: grafit na nim daje
     3,52:1, biel 3,58:1 — żadne nie przechodzi progu 4,5:1 dla napisu.
     Sztuczka „ciemny napis na kolorze marki”, która ratowała pomarańcz
     i turkus, tutaj nie działa. Bierzemy więc ciemniejszy stopień tej samej
     rodziny i biały napis: 5,26:1. */
  background: var(--l-brand-dark);
  color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  margin: 4px;
  cursor: pointer;
  transition: background-color .18s ease;
}

.search-top .search-submit:hover {
  /* Nie --l-teal-dark: po zmianie palety to ten sam kolor co tło spoczynkowe,
     więc przycisk pod kursorem nie zmieniałby się wcale. */
  background: var(--l-brand-deep);
}

/* ikony konta / koszyka / ulubionych */

.navbar-shop-buttons a {
  color: var(--l-ink);
}

.navbar-shop-buttons .h-badge,
.navbar-shop-buttons .h-amount {
  /* Cyferki na kółku — drobny napis, więc ciemniejszy stopień. */
  background: var(--l-brand-dark);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 11px;
}

/* ═══ pasek kategorii ═══ */

.category-navbar {
  font-family: var(--l-font-body);
}

.category-navbar > nav > ul > li > a,
.category-navbar .menu-item > a {
  color: var(--l-ink);
  font-weight: 500;
  font-size: 15px;
  padding: 14px 0;
  transition: color .16s ease;
}

.category-navbar .menu-item > a:hover {
  color: var(--l-teal-dark);
}

/* aktywna gałąź podkreślana turkusem, nie zmianą tła —
   pasek zostaje lekki */
.category-navbar .current-menu-item > a,
.category-navbar .current-menu-parent > a {
  color: var(--l-teal-dark);
  box-shadow: inset 0 -2px 0 var(--l-teal);
}

.contact-us a {
  color: var(--l-ink);
  font-weight: 500;
}

.contact-us b {
  color: var(--l-teal-dark);
}

/* ═══ opinie klientów ═══

   Znacznik: front-page.php („laris-opinie”). Karuzela zastąpiona siatką —
   trzy karty równej wysokości zamiast trzech na trzech różnych poziomach. */
.laris-opinie-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.laris-opinia {
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
  box-shadow: var(--l-shadow-sm);
}

/* Cudzysłów zamiast ikonki: rysuje go font nagłówkowy, więc nie ma pliku
   do wczytania, a znak jest zawsze ostry. */
.laris-opinia-cudzyslow {
  display: block;
  height: 22px;
  margin-bottom: 2px;
  font-family: var(--l-font-head);
  font-size: 54px;
  line-height: 1;
  color: var(--l-teal-tint);
}

.laris-opinia-tekst {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--l-ink-soft);
}

/* Podpis dociśnięty do dołu karty — przy różnej długości opinii nazwiska
   stoją w rzędzie na jednej linii. */
.laris-opinia-autor {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.laris-opinia-autor img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--l-bg);
  object-fit: cover;
}

.laris-opinia-imie {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--l-ink);
}

/* ═══ kafle działów na stronie głównej ═══

   Znacznik: front-page.php („laris-kafle-kat”). Poprzednie wydanie stało na
   klasach motywu nadrzędnego i miało trzy usterki naraz: obrazek bez ramki
   i bez proporcji, nazwa działu zlana z listą serii w jedną szarą kolumnę
   i „Więcej” w każdym kaflu na innej wysokości. */
.laris-kafle-kat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.laris-kafel-kat {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
  box-shadow: var(--l-shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.laris-kafel-kat:hover {
  box-shadow: var(--l-shadow);
  border-color: var(--l-line-strong);
  transform: translateY(-2px);
}

/* Ramka zdjęcia jak na kartach towaru: szare pole, „contain”, mnożenie —
   dzięki temu pliki na białym tle wtapiają się w kafel, a wyrób nie jest
   przycinany ani rozciągany. */
.laris-kafel-kat-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 108px;
  width: 108px;
  height: 108px;
  padding: 6px;
  background: var(--l-bg);
  border-radius: var(--l-r-sm);
  overflow: hidden;
}

.laris-kafel-kat-foto img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Kolumna tekstu jest elastyczna, żeby „Więcej” dało się docisnąć do dołu
   kafla — wtedy w rzędzie stoi w jednej linii, niezależnie od tego, ile
   serii ma dział. */
.laris-kafel-kat-tekst {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 108px;
}

.laris-kafel-kat-nazwa {
  margin: 0 0 12px;
  font-family: var(--l-font-head);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.laris-kafel-kat-nazwa a {
  color: var(--l-ink);
}

.laris-kafel-kat-nazwa a:hover {
  color: var(--l-teal-dark);
}

/* Serie pigułkami, nie listą.

   Wydanie trzecie. Klient: „эти три карточки я бы как-то ещё по-другому
   переделал … мне ещё сильно это не нравится”. Zmierzone: kafle mają po
   225 px wysokości, a serii w nich odpowiednio 5, 1 i 4 — w środkowym
   („Grzejniki wodne”, jedna seria CLASSIC) pod nazwą zostawało 90 px pustki,
   bo „Więcej” było dociśnięte do dołu. Pionowa lista pokazuje ten brak
   wprost: trzy kafle obok siebie, w jednym pięć wierszy, w drugim jeden.

   Pigułki zawijają się w rzędy i wypełniają szerokość, więc kafel z jedną
   serią wygląda na skończony, a nie na pusty. Przy okazji każda seria staje
   się celem wielkości palca, a nie wierszem tekstu wysokim na 22 px. */
.laris-kafel-kat-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.laris-kafel-kat-lista li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.laris-kafel-kat-lista a {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--l-line);
  border-radius: var(--l-r-btn);
  background: var(--l-bg);
  color: var(--l-ink-soft);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.laris-kafel-kat-lista a:hover {
  background: var(--l-brand-tint);
  border-color: var(--l-brand);
  color: var(--l-brand-dark);
}

.laris-kafel-kat-wiecej {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 12px;
  color: var(--l-teal-dark);
  font-size: 14px;
  font-weight: 600;
}

.laris-kafel-kat-ile {
  color: var(--l-muted);
  font-weight: 500;
}

.laris-kafel-kat-strzalka {
  transition: transform .16s ease;
}

.laris-kafel-kat-wiecej:hover .laris-kafel-kat-strzalka {
  transform: translateX(3px);
}

@media (max-width: 479px) {
  .laris-kafel-kat {
    gap: 14px;
    padding: 14px;
  }

  .laris-kafel-kat-foto {
    flex-basis: 84px;
    width: 84px;
    height: 84px;
  }

  .laris-kafel-kat-tekst {
    min-height: 84px;
  }
}

/* ═══ karty produktu ═══ */

.woocommerce ul.products li.product,
ul.products li.product {
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
  padding: 16px;
  box-shadow: var(--l-shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease;
  position: relative;
}

/* Motyw nadrzędny na najechanie zamalowuje CAŁY kafelek na niebiesko
   (style.css:1150) i wybiela tytuł, cenę oraz przycisk. Na jasnej siatce
   wygląda to jak usterka: jeden kafelek nagle staje się plamą koloru,
   a zdjęcie produktu zostaje na białym tle w środku. Zostawiamy biel,
   a reakcję na kursor robimy cieniem i ramką — jak na shop.laris.ua. */
.woocommerce ul.products li.product:hover,
ul.products li.product:hover {
  background-color: var(--l-surface);
  border-color: var(--l-line-strong);
  box-shadow: var(--l-shadow);
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product:hover h2,
.woocommerce ul.products li.product:hover h3,
.woocommerce ul.products li.product:hover .price,
.woocommerce ul.products li.product:hover .price ins,
ul.products li.product:hover h2,
ul.products li.product:hover h3 {
  color: var(--l-ink);
}

.woocommerce ul.products li.product:hover .price del {
  color: var(--l-muted);
}

/* Zdjęcie towaru bez zaokrąglenia rogów.

   Klient: „закругления на картинках”. Zaokrąglenie miało 5 px i na białym
   zdjęciu było niewidoczne — ale kadr dostaje w catalog.css własne tło
   („background: var(--l-surface)”, bo zdjęcia stoją na „object-fit:
   contain” i nie wypełniają ramki). Na białej karcie widać więc szary
   prostokąt ze ściętymi rogami, a nie zdjęcie: rogi rysuje podkład,
   nie towar.

   Zaokrąglenie zostaje tam, gdzie jest RAMKĄ: sama karta (10 px), pigułki,
   przyciski. Zdjęcie ramką nie jest. */
.woocommerce ul.products li.product img,
ul.products li.product img {
  border-radius: 0;
  mix-blend-mode: multiply; /* białe tła zdjęć wtapiają się w kartę */
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
  font-family: var(--l-font-body);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--l-ink);
  text-transform: none;
  /* Bez min-height — motyw nadrzędny ma na karcie stałą wysokość i druga
     linijka tytułu była ucinana. Zamiast rezerwować miejsce, pozwalamy
     tytułowi płynąć i wyrównujemy karty siatką. */
  overflow: visible;
  /* Motyw nadrzędny daje nazwie 30 px wyściółki u góry (style.css:1232),
     a na telefonie 15 px z każdej strony (style.css:2413). Przy kresce
     nad nazwą to był najgrubszy pusty pas na karcie — zostawiamy kreskę,
     wyściółkę ścinamy do 10 px. */
  padding: 10px 0 0;
  border-top: 1px solid var(--l-line);
  margin-bottom: 4px;
}

/* „!important” tu nie jest kaprysem: wysokość nazwy dopisuje SKRYPT motywu
   nadrzędnego. „theme.js” mierzy najwyższą nazwę w siatce i wstrzykuje do
   <head> arkusz „.prodCont-N li.product h2 { height: … }” — czyli regułę,
   która stoi po naszym arkuszu i przy równej wadze wygrywa.
   Ta wysokość jest teraz zbędna: karty wyrównuje siatka, a cenę trzyma na
   dole „margin-top: auto”. Zostawiona dokładałaby do każdej karty tyle
   pustego miejsca, ile ma najdłuższa nazwa w rzędzie. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  height: auto !important;
}

.woocommerce ul.products li.product .price,
ul.products li.product .price {
  font-family: var(--l-font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--l-ink);
}

.woocommerce ul.products li.product .price del {
  color: var(--l-muted);
  font-size: 15px;
  font-weight: 400;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--l-err);
}

/* Okrągły turkusowy przycisk koszyka w rogu karty — znak rozpoznawczy
   kart produktu na laris.ua.

   Selektor celowo z „a.button”: motyw nadrzędny ma regułę
   „.woocommerce ul.products li.product a.button” (style.css:1161), która
   przy krótszym selektorze wygrywała specyficznością mimo późniejszego
   wczytania arkusza. Stąd dopisane a.button i klasa produktu. */
.woocommerce ul.products li.product a.button.add_to_cart_button,
.woocommerce ul.products li.product a.button.product_type_simple,
.woocommerce ul.products li.product a.button.ajax_add_to_cart {
  /* Prawy dolny róg karty, na wysokości wiersza ceny (catalog.css).
     Wcześniej przycisk stał w normalnym przepływie i zabierał własny
     wiersz — 54 px pustego pasa na każdej karcie. Wtedy „position:
     absolute” było wykluczone, bo motyw nadrzędny liczył wysokość karty
     inaczej niż wysokość treści i koło lądowało na środku, w poprzek
     tytułu. Po przejściu siatki na „display: grid” karta jest zwykłym
     polem siatki: dół karty to dół karty, więc przypięcie działa. */
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  /* Kółko, nie przycisk z podpisem: w tym motywie treścią odnośnika jest
     CENA (dlatego motyw nadrzędny chował ją przez text-indent). Odsłonięcie
     podpisu dawało drugą cenę na kafelku, więc zostaje ikona — jak na
     shop.laris.ua. Wcześniej kółko było puste: ikonę rysuje pseudoelement,
     a motyw nadrzędny trzyma go w „opacity: 0” do najechania (style.css:1174)
     — stąd „co to za kółka”. */
  display: block;
  margin: 0;
  width: 42px;
  height: 42px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--l-teal);
  color: transparent;
  font-size: 0;
  border: 0;
  overflow: hidden;
  text-indent: -9999px;
  /* Cień w kolorze marki. Wcześniej stała tu rgba(20, 184, 200) — turkus
     z pierwszej wersji palety, którego na stronie już nie ma. */
  box-shadow: 0 2px 8px rgba(20, 144, 202, .32);
  transition: background-color .18s ease, box-shadow .18s ease, transform .14s ease;
}

/* Ikona koszyka: widoczna zawsze, bez fontu ikonowego i bez pliku.
   Nadpisujemy tu wszystko, czym motyw nadrzędny animował swój wózek —
   przesunięcie, skalę i przezroczystość.

   ── „filter: none” to nie ostrożność na zapas ──
   Klient: „добавить в корзину иконка сломана по цветам”, i widać to
   wyłącznie na telefonie. Motyw nadrzędny poniżej 992 px barwi ikonę
   filtrem:

     .woocommerce ul.products li.product a.button:after {
       filter: invert(46%) sepia(31%) saturate(1819%) hue-rotate(162deg)
               brightness(93%) contrast(89%) }        (style.css:2249)

   Filtr istniał po to, żeby CZARNY plik „cart.svg” motywu nadrzędnego stał
   się błękitny na białym tle kafla. My rysujemy własną ikonę i rysujemy ją
   BIAŁĄ, bo leży na pełnym błękitnym kółku. Ta sama kąpiel robi z bieli
   dokładnie ten sam błękit, co z czerni — więc ikona znikała w tle
   przycisku. Zmierzone na 390 px: „filter: invert(0.46) sepia(0.31)
   saturate(18.19) hue-rotate(162deg)…” na naszym „::after”.

   Nasze reguły były o jedną klasę szczegółowsze i wygrywały wszystkie
   właściwości, których dotykały — tej jednej nie dotykały wcale, więc
   przechodziła. */
.woocommerce ul.products li.product a.button.add_to_cart_button::after,
.woocommerce ul.products li.product a.button.product_type_simple::after,
.woocommerce ul.products li.product a.button.ajax_add_to_cart::after,
.woocommerce ul.products li.product:hover a.button.add_to_cart_button::after,
.woocommerce ul.products li.product:hover a.button.ajax_add_to_cart::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  margin: 0;
  opacity: 1;
  transform: none;
  filter: none;
  text-indent: 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

/* Najechanie na KAFELEK — przycisk tylko lekko wychodzi na wierzch.
   Kolor zostaje ten sam, bo inaczej nie ma czym pokazać najechania na sam
   przycisk: dotąd oba stany były jednym prawidłem, więc kółko robiło się
   ciemne od najechania gdziekolwiek na kartę i pod kursorem nie zmieniało
   się już wcale („nie ma hovera na koszyk”). */
.woocommerce ul.products li.product:hover a.button.add_to_cart_button,
.woocommerce ul.products li.product:hover a.button.ajax_add_to_cart,
.woocommerce ul.products li.product:hover a.button.product_type_simple {
  padding: 0;
  box-shadow: 0 4px 14px rgba(20, 144, 202, .42);
}

/* Najechanie na SAM przycisk — ciemniejszy stopień i wyraźne powiększenie.
   Ten selektor musi stać po prawidle kafelka i mieć nie mniejszą
   specyficzność, inaczej przegra przy najechaniu (kursor na przycisku to
   zawsze także kursor na kafelku). */
.woocommerce ul.products li.product a.button.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button.ajax_add_to_cart:hover,
.woocommerce ul.products li.product a.button.product_type_simple:hover,
.woocommerce ul.products li.product:hover a.button.add_to_cart_button:hover,
.woocommerce ul.products li.product:hover a.button.ajax_add_to_cart:hover,
.woocommerce ul.products li.product:hover a.button.product_type_simple:hover {
  background: var(--l-brand-deep);
  padding: 0;
  transform: scale(1.09);
  box-shadow: 0 6px 18px rgba(13, 94, 131, .5);
}

/* Naciśnięcie — kółko się „wciska”. Bez tego na dotyku nie widać reakcji
   w ogóle: tam najechania nie ma, jest tylko dotknięcie. */
.woocommerce ul.products li.product a.button.add_to_cart_button:active,
.woocommerce ul.products li.product a.button.ajax_add_to_cart:active,
.woocommerce ul.products li.product a.button.product_type_simple:active {
  transform: scale(.94);
  box-shadow: 0 2px 6px rgba(13, 94, 131, .45);
}

/* Fokus rysujemy samym „outline”, bez poświaty na box-shadow: przycisk stoi
   na „overflow: hidden” (trzyma schowaną cenę odsuniętą text-indentem),
   a poświata cienia zostałaby przez to obcięta. Obrys rysuje się na zewnątrz
   i obcięciu nie podlega. */
.woocommerce ul.products li.product a.button.add_to_cart_button:focus-visible,
.woocommerce ul.products li.product a.button.ajax_add_to_cart:focus-visible,
.woocommerce ul.products li.product a.button.product_type_simple:focus-visible {
  background: var(--l-brand-deep);
  outline: 3px solid var(--l-ink);
  outline-offset: 3px;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product a.button.add_to_cart_button,
  .woocommerce ul.products li.product a.button.ajax_add_to_cart,
  .woocommerce ul.products li.product a.button.product_type_simple {
    transition: background-color .18s ease, box-shadow .18s ease;
  }

  .woocommerce ul.products li.product a.button.add_to_cart_button:hover,
  .woocommerce ul.products li.product a.button.ajax_add_to_cart:hover,
  .woocommerce ul.products li.product a.button.product_type_simple:hover {
    transform: none;
  }
}

/* Motyw nadrzędny dokłada do przycisków efekt wypełnienia na :before —
   w okrągłym przycisku wygląda to jak biała plama, więc go zdejmujemy. */
.woocommerce ul.products li.product a.button.add_to_cart_button::before,
.woocommerce ul.products li.product a.button.ajax_add_to_cart::before {
  content: none;
}

/* ═══ „Dlaczego warto kupić” ═══

   Sekcja stała dotąd na siatce motywu nadrzędnego: tekst na jedną trzecią
   szerokości, zdjęcie na dwie trzecie. Sześć powodów zakupu u producenta
   ściskało się w wąskim słupku, a dwie trzecie ekranu zajmowała fotografia
   call center — czyli obrazek mówiący o obsłudze telefonicznej przy liście
   mówiącej o produkcji, gwarancji i kontroli jakości.

   Teraz pół na pół, a powody idą kaflami po dwa w rzędzie. */

.laris-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 48px;
  align-items: center;
}

.laris-why-tekst {
  min-width: 0;
}

.laris-why-tekst h2 {
  margin: 0 0 26px;
}

.laris-why-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.laris-why-lista li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
  font-size: 15px;
  line-height: 1.35;
  color: var(--l-ink);
}

/* Znacznik rysowany tłem, nie znakiem — ten sam, co na stronach tekstowych,
   żeby oba miejsca czytało się jak jeden serwis. */
.laris-why-lista li::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--l-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%231073a2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.laris-why-btn {
  display: inline-block;
}

.laris-why-foto {
  min-width: 0;
}

/* Bez cienia. Przy poprzednim kadrze — wyrobach stojących NA BIELI — cień
   pod zdjęciem nie wyglądał jak uniesiona karta, tylko jak szara smuga
   doklejona do dołu (klient: „снизу серая тень, которая не убрана”).
   Teraz stoi tu fotografia z hali, która ma własne krawędzie, więc cień
   tym bardziej niepotrzebny. */

/* Zdjęcie siedzi w „picture” (WebP + zapasowy JPEG) — bez tej reguły element
   zostaje liniowy i ramka pod nim łapie kilka pikseli odstępu od linii pisma. */
.laris-why-foto picture {
  display: block;
}

/* Bez zaokrąglenia — klient trzeci raz o tym samym: „не убрал
   закругление!!!”. Zasada dla całego serwisu jest od teraz jedna:
   ZDJĘCIE MA PROSTE ROGI. Zaokrąglenie zostaje przy elementach, które są
   ramką albo klawiszem — karta towaru, pigułka wariantu, przycisk. */
.laris-why-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--l-line);
  border-radius: 0;
}

@media (max-width: 991px) {
  .laris-why-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  /* Na wąskim ekranie zdjęcie idzie NAD tekst: inaczej trzeba przewinąć
     całą listę, zanim w ogóle zobaczy się, o czyjej produkcji mowa. */
  .laris-why-foto {
    order: -1;
  }
}

@media (max-width: 599px) {
  .laris-why-lista {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ═══ „Wyroby Laris we wnętrzach” ═══

   Blok przeniesiony z shop.laris.ua. Tam: pięć kolumn, w trzech po jednym
   wysokim kadrze, w dwóch po dwa niższe, odstęp 16 px, kadrowanie „cover”,
   bez zaokrągleń.

   Wysokość całości bierze się z proporcji siatki, a nie z wysokości zdjęć.
   Dzięki temu kolumna z jednym kadrem i kolumna z dwoma zawsze kończą się
   równo — przy liczeniu wysokości ze zdjęć różniły się o kilka pikseli
   i dolna krawędź bloku była poszarpana. */

.laris-galeria {
  /* Blok stoi tuż pod ciemnym pasem z licznikami — bez odstępu nagłówek
     kleił się do jego krawędzi. */
  padding: 56px 0;
}

.laris-galeria .laris-galeria-tytul {
  margin: 0 0 24px;
}

.laris-galeria-siatka {
  display: flex;
  gap: 16px;
  /* 1680 × 472 — proporcja bloku na referencji. */
  aspect-ratio: 1680 / 472;
  /* Sufit szerokości, żeby nie rozciągać plików ponad ich rozmiar.
     Pliki mają teraz 306 px szerokości — patrz niżej, dlaczego nie 324.
     Przy 1594 px na pięć kolumn z odstępami po 16 px wypada dokładnie
     306 px na kadr, czyli jeden do jednego; szerzej obraz zaczynałby
     się rozmywać.

     ── skąd 306 zamiast 324 ──
     Klient dwa razy: „закругления на картинках ты не убрал”. I miał rację,
     bo w CSS ich nie było — sprawdzone, „border-radius: 0px” i na kadrze,
     i na obrazie. ZAOKRĄGLENIE SIEDZI W SAMYCH PLIKACH: rendery przyszły
     z ośmioma pikselami ściętego rogu, a wcześniejsza sesja tylko podłożyła
     pod te rogi ton kafla (#f7f7f7) zamiast je usunąć — czarne kliny
     zniknęły, zaokrąglenie zostało. Zmierzone na wszystkich siedmiu
     plikach: jasna zalewka sięga 6–8 px od krawędzi.

     Dlatego pliki są przycięte o 9 px z każdej strony, 324 → 306.
     Kadr rysuje „object-fit: cover”, więc zmiana proporcji niczego nie
     przesuwa, a rogi są od tej pory zwykłym zdjęciem. Przy okazji wszystkie
     siedem schudło z 297 do 159 KB (zapis progresywny, jakość 88). */
  max-width: 1594px;
  margin: 0 auto;
}

.laris-galeria-kol {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Kadr niczego nie otwiera — powód przy laris_galeria_blok() w PHP:
   pliki mają 324 px i powiększone byłyby miękkie. Stąd zwykły kursor,
   brak „:focus-visible” i brak podglądu na pełny ekran. Zostaje samo
   powolne przybliżenie pod kursorem: blok ma wyglądać na żywy, ale
   nie obiecywać kliknięcia. */
.laris-galeria-kadr {
  display: block;
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--l-surface-2);
}

.laris-galeria-kadr img {
  transition: transform .4s ease;
}

.laris-galeria-kadr:hover img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .laris-galeria-kadr:hover img {
    transform: none;
  }
}

.laris-galeria-kadr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Na wąskim ekranie pięć kolumn robi się paskami po pięćdziesiąt pikseli.
   Opakowania kolumn znikają („display: contents”), a kadry stają się
   bezpośrednimi elementami siatki — każdy z własną proporcją. */
@media (max-width: 991px) {
  .laris-galeria-siatka {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    aspect-ratio: auto;
  }

  .laris-galeria-kol {
    display: contents;
  }

  .laris-galeria-kadr {
    aspect-ratio: 324 / 225;
  }

  .laris-galeria-kadr--wysoki {
    aspect-ratio: 324 / 472;
    grid-row: span 2;
  }
}

@media (max-width: 599px) {
  .laris-galeria {
    padding-bottom: 36px;
  }

  .laris-galeria-siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* etykiety promocji */

.woocommerce span.onsale {
  background: var(--l-orange);
  border-radius: var(--l-r-btn);
  font-family: var(--l-font-body);
  font-weight: 600;
  min-width: auto;
  min-height: auto;
  padding: 4px 10px;
  line-height: 1.4;
}

/* ═══ karta produktu — strona pojedyncza ═══ */

.woocommerce div.product .product_title {
  font-family: var(--l-font-head);
  font-weight: 700;
  text-transform: uppercase;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--l-font-head);
  font-size: 30px;
  font-weight: 700;
  color: var(--l-ink);
}

/* ═══ Omnibus: najniższa cena z 30 dni ═══

   Znaczniki i wyliczenie: inc/omnibus.php. To informacja wymagana prawem,
   więc musi być czytelna — ale nie może konkurować z ceną, bo nie jest
   ceną do zapłaty. Stąd drobny stopień i nasza szarość (5,06:1 na bieli),
   a nie jaśniejsza. */
.laris-omnibus {
  margin: 6px 0 0;
  color: var(--l-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.laris-omnibus-kwota {
  font-weight: 600;
  white-space: nowrap;
}

/* Procent obniżki. Właściciel: „омнибус должен показывать и проценты
   скидки”. Liczony od ceny omnibusowej, nie od regularnej — dlaczego,
   w inc/omnibus.php przy laris_omnibus_procent().

   Wyróżniony, ale nie krzyczący: to nadal jest przypis pod ceną, a nie
   drugi cennik. Biel na #b85f00 daje 4,8:1. */
.laris-omnibus-procent {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: var(--l-r-btn);
  background: var(--l-orange-deep);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.laris-omnibus--kafel .laris-omnibus-procent {
  margin-left: 3px;
  padding: 0 5px;
}

/* Na karcie towaru zdanie mieści się w wierszu i stoi tuż pod ceną. */
.laris-omnibus--karta {
  margin: 8px 0 14px;
  font-size: 13px;
}

/* Na kaflu w katalogu miejsca jest mało: kafel ma 350 px wysokości i cenę
   przyklejoną do dołu razem z kółkiem koszyka. Zdanie idzie NAD ten rząd,
   drobniej, i tylko na kaflach z przeceną — a tych jest dwanaście.

   „order” jest obowiązkowy. Wnętrze kafla to kolumna flex, w której
   kolejność ustawiają wyłącznie te liczby (catalog.css: zdjęcie 1, nazwa 2,
   liczba kolorów 3, cena 4). Bez własnej element dostaje zero i wychodzi
   na samą górę — przy pierwszej wykładce napis wylądował na zdjęciu
   i na etykiecie „Promocja!”. Ta sama liczba, co cena, plus wcześniejszy
   priorytet haka w PHP, stawiają go dokładnie nad ceną.

   „margin-top: auto” przejmujemy od ceny: to ono dociska parę do dołu
   kafla. Gdyby zostało na obu, wolne miejsce podzieliłoby się między nie
   i napis odjechałby na środek karty. */
.laris-omnibus--kafel {
  order: 4;
  margin: 0 0 4px;
  margin-top: auto;
  padding: 0 8px;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.woocommerce ul.products li.product > a:has(.laris-omnibus--kafel) .price {
  margin-top: 0;
}

/* ═══ liczniki ═══

   Pas jest jasny, bez zdjęcia. Powód i pomiary — przy znaczniku
   w front-page.php. Tutaj tylko domykamy to, co zostało po motywie
   nadrzędnym: czarną powłokę „:before” i biały napis, który na jasnym
   podkładzie zniknąłby zupełnie. */
.counters-row {
  background: var(--l-brand-tint);
  color: var(--l-ink);
}

/* Powłoka ma „position:absolute” i wypełnia cały pas — bez tego na
   podkładzie marki zostałaby czarna płachta o kryciu 70%. */
.counters-row::before {
  content: none;
}

.counters-row .counter {
  font-family: var(--l-font-head);
}

/* Kreska między licznikami: nadrzędny rysuje ją #7a7c80 pod biały napis
   na ciemnym. Na jasnym podkładzie to grubo za mocno. */
.counters-row .counter:nth-child(1)::after,
.counters-row .counter:nth-child(2)::after {
  background-color: rgba(16, 115, 162, .22);
  height: 74px;
}

.counters-row .counter span {
  color: var(--l-brand-dark);
  font-weight: 700;
  /* Nadrzędny daje 50 px z odstępem 20 px pod spodem — przy jasnym pasie
     liczba może być mocniejsza, bo to ona jest treścią. */
  font-size: 46px;
  line-height: 1.05;
  margin-bottom: 10px;
}

/* ═══ stopka ═══ */

footer,
.footer,
.lg100.footer {
  background: var(--l-ink);
  color: rgba(255, 255, 255, .78);
}

footer a,
.footer a {
  color: rgba(255, 255, 255, .78);
}

footer a:hover,
.footer a:hover {
  color: var(--l-teal);
}

footer h4,
.footer h4 {
  color: #fff;
  font-family: var(--l-font-head);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ═══ opinie klientów ═══ */

.slider-clients .slider-article-content,
.slider-news .slider-article-content {
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
  padding: 22px;
  box-shadow: var(--l-shadow-sm);
  height: 100%;
}

.grey-content {
  background: transparent;
}

/* ═══ telefony ═══ */

@media (max-width: 767px) {
  .pagewhitecontent > .container > h3,
  .laris-section-title {
    font-size: 22px;
  }

  .woocommerce ul.products li.product .add_to_cart_button,
  ul.products li.product .add_to_cart_button {
    width: 40px;
    height: 40px;
    right: 12px;
    bottom: 12px;
  }
}