/*
Theme Name:  Theratio Child
Theme URI:   https://vandergroff.pl
Description: Child theme for Theratio (OceanThemes). Custom styles and overrides for VanderGroff.pl.
Author:      Jarek
Template:    theratio
Version:     1.0.0
License:     GNU General Public License v2+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theratio-child
*/

/* Nadpisanie domyslnego koloru linkow z Bootstrap (#337ab7) */
a { color: #1a1a1a; }
a:hover, a:focus, a:active { color: #9f9e9e; }

/* Lista kategorii w natywnym archiwum WooCommerce (.widget-area) — wyglad jak
   strony-kolekcje (/arctic/): przezroczyste tlo, ciemny tekst, bez szarych boksow,
   licznik inline (nie absolutny). Selektory dorownuja specyficznoscia regulom motywu
   (theratio/style.css:3233/3250/3281, wzorzec '.widget ul:not(.recent-news) > li'),
   wiec child wygrywa kolejnoscia ladowania bez !important. */
.widget-area .widget_product_categories ul:not(.recent-news) > li {
    margin-bottom: 0;
}
.widget-area .widget_product_categories ul:not(.recent-news) > li a {
    display: inline;
    padding: 0;
    background: transparent;
    text-transform: none;
    font-size: 14px;
    color: #1a1a1a;
}
.widget-area .widget_product_categories ul:not(.recent-news) > li a:hover,
.widget-area .widget_product_categories ul:not(.recent-news) > li a:focus {
    background: transparent;
    color: #9f9e9e;
}
.widget-area .widget_product_categories ul:not(.recent-news) > li .count {
    position: static;
    right: auto;
    top: auto;
    float: none;
    color: #333;
    font-size: 14px;
}

/* Strona 404 — własny, czysty wygląd zamiast demowego obrazka wnętrza z motywu
   (theratio/style.css:7619 ustawiał bg-404.jpg). Ciemne tło spójne ze stopką/sekcjami,
   białe nagłówki (motyw/Elementor renderował je #1a1a1a = niewidoczne na ciemnym). */
.error-404 {
    background: #1a1a1a;
    text-align: center;
}
.error-404 .elementor-widget-container {
    text-align: center;
}
/* Duże „404" jako element wiodący. Selektor z .elementor-widget-container daje
   specyficzność (0,3,1) > reguły Elementora per-element (0,2,1) — wygrywa bez !important. */
.error-404 .elementor-widget-container h1.elementor-heading-title {
    color: #fff;
    font-size: 130px;
    font-weight: 200;
    line-height: 1;
    margin-bottom: 8px;
}
/* Podtytuł „Niestety! Nie znaleziono strony!" */
.error-404 .elementor-widget-container h2.elementor-heading-title {
    color: #fff;
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 1px;
}
.error-404 p {
    color: #b5b5b5;
}

/* ── Galeria nad stopką (strona główna #320, sekcja 7af3b21) ──
   Zastąpiła martwy widget portfolio (ipfilter_metro — typ ot_portfolio
   usunięty z wtyczką). Te same 5 zdjęć lifestyle co na produkcji.
   Natywny widget image-gallery + tu responsywny, równy układ:
   pełna szerokość, jednolita wysokość kafli (object-fit), hover-zoom. */
#mk-home-gallery .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0;
}
#mk-home-gallery .gallery br { display: none; }            /* czyść <br class=clear> klasycznej galerii */
/* 5 zdjęć: pierwsze (szerokie, hero) zajmuje 2 kolumny → siatka domknięta bez pustej komórki i bez duplikatu */
#mk-home-gallery .gallery-item:first-child { grid-column: span 2; }
#mk-home-gallery .gallery-item {
    width: 100% !important;                                 /* nadpisz inline width:33% WP, wypełnij kolumnę grida */
    max-width: 100% !important;                             /* Elementor .elementor-image-gallery daje max-width:33.33% — ucina kafel */
    margin: 0 !important;
    float: none !important;
    padding: 0;
}
#mk-home-gallery .gallery-icon,
#mk-home-gallery .gallery-icon a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}
#mk-home-gallery .gallery-icon {
    height: 340px;
    overflow: hidden;
}
#mk-home-gallery .gallery-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0 !important;                                   /* reset ramki domyślnej galerii */
    transition: transform .6s ease;
    display: block;
}
/* Galeria dekoracyjna — link usuniety (gallery_link=none), wiec hover-zoom na
   kontenerze .gallery-icon zamiast na <a> (ktorego juz nie ma). */
#mk-home-gallery .gallery-icon:hover img { transform: scale(1.06); }

@media (max-width: 1024px) {
    #mk-home-gallery .gallery { grid-template-columns: repeat(2, 1fr); }
    #mk-home-gallery .gallery-icon { height: 300px; }
}
@media (max-width: 600px) {
    #mk-home-gallery .gallery { grid-template-columns: 1fr; gap: 6px; }
    #mk-home-gallery .gallery-item:first-child { grid-column: auto; }   /* 1 kolumna: hero bez spanu */
    #mk-home-gallery .gallery-icon { height: 260px; }
}

/* ===== Strony prawne (Regulamin/Polityka/Dostawa/Zwroty/Płatności) =====
   Treść full-content była przyklejona do lewej krawędzi bez paddingu.
   Owijka .mk-legal-content (the_content filter w functions.php) =
   wycentrowana, czytelna kolumna z marginesami. */
.mk-legal-content {
    max-width: 880px;
    margin: 0 auto;
    padding: 55px 24px 80px;
    line-height: 1.75;
    color: #2a2a2a;
}
.mk-legal-content > :first-child { margin-top: 0; }
.mk-legal-content h2 { margin: 2.1em 0 .65em; line-height: 1.3; }
.mk-legal-content h3 { margin: 1.6em 0 .5em; }
.mk-legal-content p { margin: 0 0 1.1em; }
.mk-legal-content ul,
.mk-legal-content ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.mk-legal-content li { margin-bottom: .5em; }
.mk-legal-content a { text-decoration: underline; }

@media (max-width: 768px) {
    .mk-legal-content { padding: 35px 18px 55px; }
}

/* ===== Moje konto (logowanie/rejestracja + panel klienta) =====
   Ta sama owijka co prawne, ale szersza — 2 kolumny logowania/rejestracji
   i tabele zamówień. */
.mk-account-content {
    max-width: 1140px;
    margin: 0 auto;
    padding: 50px 24px 70px;
}
@media (max-width: 768px) {
    .mk-account-content { padding: 30px 18px 50px; }
}

/* ===== Social FB/IG na mobile/tablet (home) =====
   Widget #f69bfba (poziomy pasek INSTAGRAM/FACEBOOK) był pozycjonowany
   absolutnie sztywnym top:1348px w sekcji hero — na różnych telefonach hero
   ma inną wysokość, więc pasek "pływał" po treści. Kotwiczymy do DOŁU hero
   (bottom zamiast top), żeby zawsze siedział stabilnie nad dolną krawędzią. */
@media (max-width: 1024px) {
    .elementor-element-f69bfba {
        top: auto !important;
        bottom: 28px !important;
    }
}

/* MK: wiekszy odstep pod tytulem hero (RevSlider) na desktop/notebook (mobile bez zmian) */
@media (min-width:1025px){
  #SR7_1_1-1-1{ margin-top:24px !important; }   /* odstep tytul -> opis hero */
  #SR7_1_1-1-12{ margin-top:24px !important; }  /* odstep opis -> przycisk hero */
}

/* MK: nawigacja slidera hero (RevSlider "Home 1") — slider ma tylko 1 slajd, wiec
   strzalki (arrow-home-1) i bullet paginacji (sr7-bullets/sr7-bullet) nic nie robia,
   a bullet zaslania napis na mobile. Ukryte CSS-em. PRZYWROCENIE: usun te reguly
   (gdyby klient chcial wielo-slajdowy slider z nawigacja). Na stronie jest tylko ten
   jeden slider, wiec globalne .sr7-bullets/.sr7-bullet jest bezpieczne. */
.arrow-home-1 { display: none !important; }
.sr7-bullets,
.sr7-bullet { display: none !important; }

/* MK: przycisk "do gory" (#back-to-top). Motyw daje plaski szary kwadrat przy dolnej
   krawedzi (bottom:40px w stanie .show). Wg Jarka: okragly, wyzej (100px od dolu),
   polprzezroczyste ciemne tlo marki. Klase .show dodaje motyw po przewinieciu >500px. */
#back-to-top {
    width: 48px;
    height: 48px;
    line-height: 48px;                        /* = height -> centruje ikone w pionie */
    text-align: center;                       /* centruje ikone w poziomie */
    right: 40px;
    border-radius: 50%;                       /* okragly (48x48, rowne wymiary) */
    background: rgba(26, 26, 26, 0.55);        /* ciemne, polprzezroczyste (opacity) */
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
/* ikona: inline-block + vertical-align:middle -> zwezona do glifu i wysrodkowana
   (motyw dawal display:block + rotacje 90deg, przez co przepelniala box i lezala u gory) */
#back-to-top i {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-size: 16px;
    margin: 0;
}
#back-to-top:hover {
    background: rgba(26, 26, 26, 0.9);
}
#back-to-top.show {
    bottom: 100px;                            /* uniesiony: 100px od dolnej krawedzi */
}

/* MK: kafelki oferty (service-box) na home. Klik w zdjecie -> przekierowanie do
   kategorii (jak przycisk "SPRAWDZ"; obsluga w mk-header.js: blokuje lightbox motywu i
   nawiguje do href przycisku). Kursor "pointer" (klikalne). Ikona lupy ukryta (nie ma
   juz podgladu zdjecia). Hover-zoom obrazu zostaje, ale BEZ sciemniania (overlay off). */
.service-box .img-lgpopup { cursor: pointer; }
.service-box .img-lgpopup i { display: none; }
.service-box .image-box .overlay { display: none; }   /* bez ciemnego przyciemnienia na hover */

/* MK: strona wynikow wyszukiwania (body.search) nie ma baneru (.page-header) — navbar
   jest przezroczysty "light" nad biala trescia => biale logo/ikony sa niewidoczne.
   Dajemy navbarowi ciemne tlo marki (jak stan zescrollowany), zeby byl czytelny. */
body.search #site-header {
    background-color: #1a1a1a;
}
/* 30px odstepu miedzy navbarem a pierwszym wynikiem na desktopie. Na search
   .entry-content ma padding-top:90px (= wysokosc navbara, clearance); dodajemy 30px. */
@media (min-width: 992px) {
    body.search .entry-content { padding-top: 120px; }
}

/* MK: strona O NAS — 8px odstepu pod zdjeciem wnetrza (projekt-bez-nazwy-4, sofa+wazony)
   ktore stykalo sie z tym co ponizej (margin-bottom bylo 0). */
.elementor-element-c7f214d { margin-bottom: 8px; }

/* MK: BLOG ukryty ze WSZYSTKICH menu (desktop + mobilne off-canvas) na razie — brak
   wpisow, pokazemy pozniej. Jedyne wystapienie: menu glowne #53, pozycja item_id 4570
   (klasa menu-item-4570). PRZYWROCENIE: usunac te regule. */
.menu-item-4570 { display: none !important; }

/* MK: O NAS — gdy sekcje sa zwiniete na pelna szerokosc (<=768), gorny blok tekstu
   (kol c955026) mial margin_tablet:0 (tekst wciety ~15px), a dolny (7f5884b) margin:60
   (tekst ~75px) -> rozne paddingi. Wyrownujemy gorny do dolnego (60px z obu stron).
   Zakres <=768 celowo: powyzej gorna kolumna ma max-width ~750 (wycentrowana), inna
   struktura niz dolna pelna -> tam nie dotykamy. */
@media (max-width: 768px) {
    .elementor-element-c955026 > .elementor-element-populated {
        margin-left: 60px !important;
        margin-right: 60px !important;
    }
}

/* MK: rowna wysokosc kafelkow oferty (ARCTIC/BLACK/GOLD/SAND) na home.
   W zakresie 1025-1279px dluzsze opisy (BLACK/GOLD/SAND) lamia sie do 3 linii,
   a ARCTIC ma 2 - przez co kafelek ARCTIC byl o ~20px nizszy i dolny wiersz sie
   rozjezdzal. Rezerwujemy staly slot 3 linii dla opisu w obu kolumnach kart,
   wiec wszystkie 4 kafelki maja te sama wysokosc i wiersze sa wyrownane.
   Powyzej 1280px wszystkie opisy mieszcza sie w 2 liniach i sa rowne same z siebie. */
@media (min-width:1025px) and (max-width:1279px){
  .elementor-element-159826b .service-box .info-box p,
  .elementor-element-742f0d9 .service-box .info-box p { min-height:60px; }
}

/* MK: tlo naglowka mobilnego. U GORY strony navbar jest PRZEZROCZYSTY (jak na
   desktop) - pokazuje hero. Dopiero po przewinieciu (klasa .is-stuck od Theratio)
   dostaje ciemne tlo marki, zeby biale logo bylo czytelne nad trescia. Transition
   z !important, bo Theratio nadpisuje transition na przyklejonym naglowku. */
@media (max-width:1024px){
  .elementor-2888 .elementor-element-04a6a8c{
    transition:top .35s cubic-bezier(.4,0,.2,1), background-color .3s ease, box-shadow .3s ease !important;
  }
  .elementor-2888 .elementor-element-04a6a8c.is-stuck{
    background-color:#1a1a1a !important;
    box-shadow:0 1px 12px rgba(0,0,0,.18);
  }
}

/* MK: badge koszyka - ujednolicenie koloru. Motyw daje inny styl badge dla naglowka
   przezroczystego (gora strony: ciemne tlo/biala cyfra) i przyklejonego (scroll:
   biale tlo/ciemna cyfra). Na naszym ciemnym navbarze ciemny badge u gory byl
   nieczytelny - wymuszamy BIALY badge (biale tlo, ciemna cyfra) w obu stanach. */
.site-header .count.octf_load_change_cart_count,
.header-mobile .count.octf_load_change_cart_count,
.is-fixed .count.octf_load_change_cart_count{
  background-color:#ffffff !important;
  color:#1a1a1a !important;
}

/* MK: mobile - reveal-on-scroll-up. Przyklejony (is-stuck) navbar jest DOMYSLNIE
   schowany nad gorna krawedzia (top:-100px) i pojawia sie dopiero przy scrollu w
   gore (klasa .mk-nav-show na <body> z JS). Dzieki temu przy scrollu w dol navbar
   NIE "miga" (nie pojawia sie na moment, zanim sie schowa). Chowamy przez `top`,
   nie `transform` - Theratio steruje transformem przyklejonego naglowka wlasnym
   skryptem, wiec transform nie animowal sie; `top` motyw zostawia -> plynnie sunie. */
@media (max-width:1024px){
  .elementor-2888 .elementor-element-04a6a8c.is-stuck{
    top:-100px !important;
  }
  body.mk-nav-show .elementor-2888 .elementor-element-04a6a8c.is-stuck{
    top:0 !important;
  }
}

/* MK: galeria na stronie glownej stykala sie ze stopka (0px). Dodajemy pod nia
   odstep rowny odstepowi miedzy zdjeciami (8px gutter), zeby ostatni rzad nie
   dotykal stopki. */
.elementor-element-ga11e01{ margin-bottom:8px; }

/* MK: stopka - naprawa duplikacji na telefonie (<768). Motyw ma osobny mobilny
   blok marki (sekcja 171877e: logo+tekst, bez social) i desktopowa srodkowa
   kolumne (9dded2f: logo+tekst+SOCIAL, wysrodkowana). Kolumna 9dded2f ma stara
   klase `hidden-phone`, ktora w tej wersji Elementora (breakpointy z md:768,
   dodatkowe breakpointy) nie generuje reguly CSS -> nie chowala sie na telefonie,
   przez co widoczne byly OBA bloki (duplikacja, mieszane wyrownanie).
   Deterministycznie: na telefonie chowamy mobilny duplikat i zostawiamy bogatszy
   wysrodkowany blok z ikonami social. */
/* Mobilny duplikat marki (sekcja 171877e: logo+tekst, bez social) jest zbedny -
   srodkowy blok 9dded2f (logo+tekst+SOCIAL) obsluguje wszystkie szerokosci.
   Chowamy 171877e ZAWSZE (bez media query), zeby zaden boundary breakpointu (np.
   767 vs scrollbar) nie pozwolil mu sie pokazac. */
.elementor-element-171877e{ display:none !important; }

/* 60px odstepu nad wierszem linkow DOSTAWY/ZWROTY/... na WSZYSTKICH szerokosciach
   (inner-section a03e3a1, motyw dawal 20px). */
.elementor-element-a03e3a1{ margin-top:60px !important; }

/* Copyright wysrodkowany na WSZYSTKICH szerokosciach (motyw centrowal tylko na
   czesci breakpointow, na niektorych bylo do lewej). */
.elementor-element-0b7f025,
.elementor-element-0b7f025 .elementor-widget-container{ text-align:center !important; }

/* Stopka na tablet+mobile (<=1024px): kolumny w PIONIE i WYSRODKOWANE. Blok marki
   (logo+tekst+social) na gorze, potem KONTAKT, potem INFORMACJE. Zakres <=1024 (nie
   767) celowo - user mierzyl "767" a to bylo CSS 768 (tablet, uklad 3-kolumnowy);
   szerszy zakres eliminuje problem z granica breakpointu. Desktop (>=1025) bez zmian
   (3 kolumny w rzedzie). */
@media (max-width:1024px){
  .elementor-element-534845a .elementor-column{ width:100% !important; }
  .elementor-element-9dded2f{ display:flex !important; order:-1 !important; }
  /* wysrodkowanie KONTAKT + INFORMACJE (naglowki + pozycje list ikon) */
  .elementor-element-9d51a93, .elementor-element-152061b{ text-align:center !important; }
  .elementor-element-9d51a93 .elementor-heading-title,
  .elementor-element-152061b .elementor-heading-title{ text-align:center !important; }
  /* Centrowanie pozycji list: motyw centruje ZAWARTOSC KOTWICY (<a> = flex ikona+tekst)
     tylko w swoim mobile (<=767); my rozciagamy uklad do 1024, wiec sami centrujemy
     zarowno <li> (pozycje bez linku, np. adres) jak i <a> (linki tel/mailto/strony).
     text-align:center nadpisuje tez prawe wyrownanie w INFORMACJE. */
  .elementor-element-9d51a93 .elementor-icon-list-item,
  .elementor-element-152061b .elementor-icon-list-item,
  .elementor-element-7143c97 .elementor-icon-list-item,
  .elementor-element-9d51a93 .elementor-icon-list-item > a,
  .elementor-element-152061b .elementor-icon-list-item > a,
  .elementor-element-7143c97 .elementor-icon-list-item > a{
    justify-content:center !important;
    text-align:center !important;
  }
  /* pozioma lista DOSTAWY/ZWROTY/... - wysrodkuj caly rzad; motyw daje na <ul>
     justify-content:flex-end (prawo), przez co w pasmie 992-1024 byla do prawej. */
  .elementor-element-7143c97 .elementor-icon-list-items{ justify-content:center !important; }
  /* ~60px odstepu pod ikonami social przed KONTAKT */
  .elementor-element-66580c5{ margin-bottom:50px !important; }
  /* 60px odstepu nad sekcja INFORMACJE (kolumny stykaly sie 0px) */
  .elementor-element-152061b{ margin-top:60px !important; }
}

/* ============================================================
   #5 — Baner WSZYSTKICH podstron (globalnie .page-header)
   ------------------------------------------------------------
   Motyw renderuje baner .page-header o wysokosci 500px z tytulem
   wysrodkowanym w pionie (.dcell vertical-align:middle) + breadcrumbami
   pod tytulem, tlo (grafika stolu z wazonami) kadrowane center/cover.
   Wg projektu Jarka ("screen 1"): baner DUZO nizszy, tytul na GORZE,
   grafika przy PRAWEJ krawedzi, BEZ breadcrumbsow.
   ZAKRES: globalnie .page-header — Jarek (02.07): "na wszystkich tych
   stronach". Baner z ta sama grafika stolu (fallback theme option pheader_img)
   maja WSZYSTKIE podstrony: sklep, kategorie, koszyk, kasa, moje-konto,
   o-nas, kontakt, strony prawne, pojedynczy produkt, blog. Strona GLOWNA
   NIE ma .page-header (hero RevSlider) -> nietknieta.
   UWAGA na przyszlosc: KAZDA zmiana baneru = automatycznie na wszystkich
   tych stronach (jeden selektor .page-header). Trik kadrowania (112%/left)
   jest dopasowany do grafiki stolu — jesli ktoras strona dostanie INNY
   obraz baneru, trzeba to uwzglednic osobno. */
/* Navbar jest PRZEZROCZYSTY i NAKLADA sie na gore baneru (overlay ~90px desktop /
   ~70px mobile), wiec padding-top musi odsunac tytul PONIZEJ navbara — inaczej
   "NASZ ASORTYMENT" wpada pod logo. Grafika (stol z wazonami) kotwiczona w prawym
   DOLE, zeby stol byl widoczny na dole baneru jak na projekcie. */
.page-header {
    height: 260px;
    /* Grafika: prawy-dolny rog stolu (najbardziej wysuniety w prawo — w obrazie na
       ~89.4% szerokosci) ma DOTYKAC prawej krawedzi baneru na KAZDEJ szerokosci.
       Trik skala-niezmienny: skalujemy tlo do 112% szerokosci kontenera i kotwiczymy
       do LEWEJ (background-position:left) -> punkt 89.4% laduje dokladnie na prawej
       krawedzi niezaleznie od szerokosci ekranu (0.894 * 1.12 ≈ 1.0), a bezowy margines
       obrazu (~10.6%) wychodzi poza krawedz. Pion: na niskich/waskich ekranach obraz
       jest nizszy niz baner -> gora domalowana bezowym background-color (gora obrazu i
       tak jest jednolicie bezowa -> bezszwowo). Dol kotwiczony (bottom) — stol flush. */
    background-color: #cfbeaf;
    background-size: 112% auto;
    background-position: left bottom;
    background-repeat: no-repeat;
}
.page-header .dcell {
    vertical-align: top;
}
.page-header .container {
    padding-top: 64px;   /* clearuje przezroczysty navbar (~90px) razem z margin-top h1 (36) */
}
.page-header .page-title {
    font-size: 48px;
    margin-top: 72px;
}
.page-header .breadcrumbs {
    display: none;   /* bez breadcrumbsow w banerze podstron */
}
@media (max-width: 991px) {
    .page-header { height: 210px; }
    /* Tytul WYSRODKOWANY pionowo MIEDZY dolna krawedzia navbara a dolem banera (jak na
       desktopie - tyle samo miejsca do navbara co do dolu). NIE srodek calego banera (bo
       navbar overlay by wpychal tytul za wysoko). Trik: padding-top na .dcell = wysokosc
       navbara (71px na ≤991), wiec vertical-align:middle centruje w obszarze [71px, dol]. */
    .page-header .dcell { vertical-align: middle; padding-top: 71px; }
    .page-header .container { padding-top: 0; }
    .page-header .page-title { margin-top: 0; margin-bottom: 0; }  /* zero marginesow -> dokladny srodek regionu */
}
@media (max-width: 575px) {
    .page-header { height: 168px; }
    .page-header .page-title { font-size: 34px; }
}
/* Motyw daje .content-product-wrapper{padding:90px 0 110px} — 90px u gory to za
   duzo odstepu pod banerem (nad chipami). Scinamy gorny padding do 10px, dol
   (110px nad stopka) zostaje. Zakres: archiwa sklepu/kategorii. */
.woocommerce.archive .content-product-wrapper {
    padding-top: 10px;
}

/* ============================================================
   Baner karty produktu (ShopEngine single) -> wyglad jak podstrony (grafika stolu)
   ------------------------------------------------------------
   ShopEngine ma wlasny baner: sekcja Elementora #7ac180b (WSPOLNA dla 17 szablonow
   kategorii), tytul #6b1539d, breadcrumb #8f98db4. Domyslnie: wysoki (padding 259/250),
   margin-top:-500 (nachodzi na navbar), tlo per-kategoria, tytul ogromny na gorze +
   breadcrumbs. Ujednolicamy do wygladu podstron: grafika stolu, niski, tytul pod navbarem,
   BEZ breadcrumbsow. Jedna regula = wszystkie produkty (wspolne ID). !important bo Elementor
   generuje inline/wlasne reguly per-element. Tlo: url wzgledny (dziala po migracji). */
/* Na karcie produktu motyw renderuje TAKZE swoj .page-header z generycznym tytulem
   "PRODUKT" (page_title_product). Oryginalnie zakrywany przez baner ShopEngine (margin-top
   -500). Zostawiamy baner ShopEngine (ma prawdziwa nazwe produktu), motywowy chowamy. */
.single-product .page-header { display: none !important; }

.elementor-element-7ac180b {
    margin-top: 0 !important;
    /* padding-top = wysokosc navbara (91px desktop); flex+align-items:center centruje
       tytul PIONOWO w regionie [dol navbara, dol banera] — tak jak NASZ ASORTYMENT. */
    padding: 91px 0 0 0 !important;
    min-height: 260px !important;
    display: flex !important;
    flex-direction: column !important;      /* kolumna: kontener pelnej szerokosci */
    justify-content: center !important;      /* pion: srodek regionu [91px, dol] */
    background-color: #cfbeaf !important;
    background-image: url("/wp-content/uploads/2024/11/projekt-bez-nazwy-8.png") !important;
    background-size: 112% auto !important;
    background-position: left bottom !important;
    background-repeat: no-repeat !important;
}
/* Tytul NIE przy lewej krawedzi -> w kontenerze z marginesami bocznymi (jak .container
   w NASZ ASORTYMENT: max-width 1200 wysrodkowany + 15px padding). */
.elementor-element-7ac180b > .elementor-container {
    width: 100% !important;                  /* nie kurcz do contentu (flex-column) */
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.elementor-element-8f98db4 { display: none !important; }
/* Tytul produktu w TRESCI (widget 34e59ead, .product-title, 40px) mial line-height 24px
   (< font) -> przy zawijaniu na 2 linie tekst sie nakladal. Zwiekszamy do 1.15. */
.elementor-element-34e59ead .product-title,
.elementor-element-34e59ead h2 {
    line-height: 1.15 !important;
}   /* breadcrumb off */
.elementor-element-6b1539d .shopengine-single-product-title,
.elementor-element-6b1539d h1,
.elementor-element-6b1539d h2,
.elementor-element-6b1539d h3,
.elementor-element-6b1539d h4 {
    font-size: 48px !important;
    font-weight: 300 !important;         /* jak NASZ ASORTYMENT (ShopEngine dawal 500) */
    line-height: 1.4 !important;         /* jak NASZ ASORTYMENT (bylo 1.2) */
    letter-spacing: normal !important;   /* jak NASZ ASORTYMENT (bylo 0.1px) */
    color: #fff !important;
    margin: 0 !important;
}
@media (max-width: 991px) {
    .elementor-element-7ac180b { min-height: 210px !important; padding-top: 71px !important; }
    .elementor-element-6b1539d h1, .elementor-element-6b1539d h2,
    .elementor-element-6b1539d h3, .elementor-element-6b1539d h4 { font-size: 40px !important; }
}
@media (max-width: 575px) {
    .elementor-element-7ac180b { min-height: 168px !important; padding-top: 71px !important; }
    .elementor-element-6b1539d h1, .elementor-element-6b1539d h2,
    .elementor-element-6b1539d h3, .elementor-element-6b1539d h4 { font-size: 30px !important; }
}

/* ============================================================
   #8 — Chipy ("fasolki") kategorii nad lista produktow
   ------------------------------------------------------------
   Renderowane przez mk_shop_category_chips() (functions.php,
   hook woocommerce_before_shop_loop). Rzad pigulek-linkow: "Wszystkie"
   = sklep, pozostale = archiwa kategorii. Aktywna (.is-active) na ciemno.
   Przeladowanie strony (nie AJAX). */
.mk-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 40px 0 20px;   /* 40px nad chipami, 20px pod (nad paskiem sortowania) */
}
.mk-cat-chips .mk-chip {
    display: inline-block;
    padding: 2px 18px 0;
    border: 1px solid #ddd7cf;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 36px;
    color: #1a1a1a;
    background: transparent;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.mk-cat-chips .mk-chip:hover,
.mk-cat-chips .mk-chip:focus {
    background: #f3efe9;
    border-color: #c9b895;
    color: #1a1a1a;
}
.mk-cat-chips .mk-chip.is-active {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}
@media (max-width: 575px) {
    .mk-cat-chips { gap: 8px; margin-bottom: 20px; }
    .mk-cat-chips .mk-chip { padding: 2px 14px 0; font-size: 11px; }
}


/* ==== MK - przycisk powrotu na archiwach kategorii ==== */
.mk-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    position: relative;
    top: 22px;
    left: -7px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}
.mk-back-link:hover,
.mk-back-link:focus {
    color: #9f9e9e;
    gap: 12px;
}
.mk-back-link .mk-back-arrow {
    font-size: 18px;
    line-height: 1;
}
@media (max-width: 575px) {
    .mk-back-link { font-size: 11px; margin-bottom: 10px; }
}


/* MK - ukryj przelacznik TranslatePress na czas wpisywania tlumaczen EN */
.trp-floating-switcher, #trp-floater-ls, .trp-language-switcher.trp-floating-switcher { display: none !important; }

/* MK: navbar czytelny na podstronach (jasne kolekcje + bezowe banery).
   Home zachowuje przezroczysty naglowek nad ciemnym sliderem. */
body:not(.home) .site-header.header-transparent{ background-color:#1a1a1a !important; }

/* MK: odstep tresci produktu od naglowka. Naglowek jest position:absolute + dodalismy
   40px topbar, a motyw dawal .content-product-wrapper{padding-top:90px} liczony bez topbara
   -> tresc (galeria/tytul) ladowala dokladnie na dolnej krawedzi navbara. Tylko desktop
   (>=1025px); mobile ma wystarczajacy klirens. Dotyczy 63 produktow z szablonem default;
   arctic #4963 ma odrebny szablon (elementor_header_footer) - osobno. */
@media (min-width:1025px){
  body.single-product .content-product-wrapper{ padding-top:150px !important; }
}

/* MK: kasa — czyste, jasne pola platnosci zamiast domyslnego szaro-fioletowego dymka
   Woo/Stripe. Aktywna metoda: zlota ramka + cieple tlo. Rozwiniete pola: bialy panel
   bez trojkata. Select kraju spojny z inputami. */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment{
  background:#fff !important; border:1px solid #ece7dd; border-radius:10px;
}
.woocommerce-checkout #payment ul.payment_methods{ border:0 !important; padding:6px !important; }
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method{
  border:1px solid #ece7dd !important; border-radius:8px; margin:0 0 8px !important;
  padding:14px 16px !important; transition:border-color .2s, background .2s; overflow:hidden;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:last-child{ margin-bottom:0 !important; }
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked){
  border-color:#c9a96a !important; background:#faf7f1;
}
.woocommerce-checkout #payment ul.payment_methods li label{
  display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; margin:0; cursor:pointer;
}
.woocommerce-checkout #payment ul.payment_methods li input[type=radio]{ margin:0 4px 0 0; flex:0 0 auto; }
.woocommerce-checkout #payment ul.payment_methods li img{ max-height:24px; width:auto; }
.woocommerce-checkout #payment div.payment_box{
  background:#fff !important; border:1px solid #ece7dd; border-radius:8px;
  margin:10px 0 4px !important; padding:16px !important; box-shadow:none;
}
.woocommerce-checkout #payment div.payment_box::before{ display:none !important; }
/* select kraju — dopiecie do wysokosci/ramki inputow */
.woocommerce-checkout #billing_country_field .select2-container--default .select2-selection--single{
  height:44px; border:1px solid #ddd; border-radius:4px; display:flex; align-items:center;
}
.woocommerce-checkout #billing_country_field .select2-selection__arrow{ height:42px; }

/* MK: mobilne menu nad topbarem. Panel #mmenu-wrapper (z9999) jest WEWNATRZ
   .site-header (position:absolute; z-index:999) -> jego z-index jest uwieziony w
   kontekscie stackingu headera (999), a topbar (.mk-topbar z1001) jest poza nim i
   malowal sie NAD strzalka zamkniecia menu. Przy otwartym menu (body.mmenu-active)
   podnosimy caly header nad topbar. Zakresowo -> stan normalny bez zmian. */
body.mmenu-active .site-header{ z-index:1002 !important; }

/* ============================================================
   MK: notyfikacje Woo — z niebieskiego na paletę (audyt 2.1 / 5.1)
   ------------------------------------------------------------
   „…dodano do koszyka", komunikaty info oraz pasek logowania na kasie
   („Masz już konto? Zaloguj się") miały domyślny niebieskawy styl Woo/motywu.
   Ujednolicamy: kremowe tło #faf7f1 + złota górna krawędź #c9a96a + ciemny
   tekst. Błędy (.woocommerce-error) celowo NIE ruszane (mają zostać alarmowe).
   Marker: MK: notyfikacje Woo */
.woocommerce-message,
.woocommerce-info,
.shopengine-woocommerce-info.woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
    background: #faf7f1 !important;
    border-top-color: #c9a96a !important;   /* Woo daje 3px górną krawędź w kolorze akcentu */
    color: #2a2a2a !important;
    box-shadow: none !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
    color: #c9a96a !important;
}
/* przyciski w notyfikacji („Zobacz koszyk" / „Zaloguj się") — spójne z paletą */
.woocommerce-message .button,
.woocommerce-info .button {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
    text-shadow: none !important;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
    background: #c9a96a !important;
    color: #1a1a1a !important;
    border-color: #c9a96a !important;
}

/* ============================================================
   MK: sklep 2-kolumnowy na mobile (audyt 2.3 / 7)
   ------------------------------------------------------------
   Natywne archiwum (ul.products.columns-3). Motyw na mobile dawał 1 kolumnę
   (li.product float:left, width≈100%). Robimy 2 kolumny (float, clear co drugą,
   4% rynny). Zakres ≤768px. Marker: MK: sklep 2-kol mobile */
@media (max-width: 768px) {
    .woocommerce ul.products li.product,
    ul.products.columns-3 li.product,
    ul.products li.product {
        width: 48% !important;
        margin: 0 4% 26px 0 !important;
        float: left !important;
        clear: none !important;
    }
    .woocommerce ul.products li.product:nth-child(2n),
    ul.products li.product:nth-child(2n) {
        margin-right: 0 !important;
    }
    .woocommerce ul.products li.product:nth-child(2n+1),
    ul.products li.product:nth-child(2n+1) {
        clear: left !important;
    }
    /* węższy kafel → mniejsze tytuły/ceny, żeby się mieściły */
    ul.products li.product .woocommerce-loop-product__title,
    ul.products li.product h2,
    ul.products li.product .product-title {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }
    ul.products li.product .price {
        font-size: 14px !important;
    }
}


/* MK: add-to-cart w siatce na mobile — na telefonie nie ma :hover, wiec przycisk
   „Dodaj do koszyka" pokazujemy na stale POD kaflem (zamiast ukrytego overlay z hovera).
   Desktop bez zmian (dalej hover nad zdjeciem). Dotyczy sklepu, kategorii i sekcji
   „Polecane" (wspolny markup ul.products). AJAX add-to-cart juz wlaczony. */
@media (max-width:768px){
  .woocommerce ul.products li.product .wrapper-add-to-cart,
  .woocommerce-page ul.products li.product .wrapper-add-to-cart{
    position:static !important; visibility:visible !important; opacity:1 !important;
    padding:10px 0 0 !important;
  }
  .woocommerce ul.products li.product .add_to_cart_button,
  .woocommerce ul.products li.product .added_to_cart,
  .woocommerce-page ul.products li.product .add_to_cart_button,
  .woocommerce-page ul.products li.product .added_to_cart{
    transform:none !important; -webkit-transform:none !important;
    width:100%; text-align:center; padding:12px 10px !important; font-size:13px !important;
  }
}


/* MK: drugie zdjecie na hover — kafel produktu (sklep/kategorie/Polecane).
   Drugie zdjecie (.mk-hover-img, wstrzykiwane w functions.php) lezy nad glownym,
   opacity 0 -> 1 na hover kafla. Mobile: ukryte (brak hovera). */
.woocommerce ul.products li.product .product-media > a{ position:relative; display:block; }
.woocommerce ul.products li.product .product-media img.mk-hover-img{
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s ease; z-index:1; pointer-events:none;
}
.woocommerce ul.products li.product:hover .product-media img.mk-hover-img{ opacity:1; }
.woocommerce ul.products li.product .product-media .onsale{ z-index:5; }
@media(max-width:768px){ .product-media img.mk-hover-img{ display:none; } }


/* MK: kolor tekstu w polach formularzy — z zbyt jasnego na blisko-czarny.
   Dotyczy kasy, formularza kontaktowego (CF7) i wszystkich inputów na stronie. */
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],
input[type=url],input[type=search],input[type=date],textarea,select,
.input-text,.woocommerce input.input-text,.woocommerce textarea,.woocommerce select,
.wpcf7-form input,.wpcf7-form textarea,.wpcf7-form select,
.select2-selection__rendered{ color:#1a1a1a !important; }
input::placeholder,textarea::placeholder{ color:#8a8a8a !important; }

/* ============================================================
   MK: notyfikacja „dodano do koszyka" — pionowe wyśrodkowanie
   ------------------------------------------------------------
   Domyślnie .woocommerce-message = block; tekst (węzeł) i ikona (::before
   absolutna, top:14px) siedziały u góry, a przycisk „Zobacz koszyk"
   (float:right, 48px) rozciągał box → tekst/ikona nad środkiem.
   Flex + align-items:center wyrównuje tekst i przycisk w pionie;
   przycisk na prawo przez margin-left:auto (zamiast float); ikonę
   ::before centrujemy top:50% + translateY. Dotyczy TYLKO
   .woocommerce-message — .woocommerce-info (paski info/logowania) bez zmian.
   Marker: MK: msg vcenter */
.woocommerce-message {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.woocommerce-message a.button {
    margin-left: auto !important;   /* przycisk do prawej — wyzsza specyficznosc bije regule motywu; pomija pusty node */
    float: none !important;
}
.woocommerce-message::before {
    top: 50% !important;
    transform: translateY(-50%);
}

/* ============================================================
   MK: koszyk — wiersz akcji (pole kuponu + „Zaktualizuj koszyk")
   ------------------------------------------------------------
   Przy szerokościach ~769–980px .coupon (float:left, ~508px) + przycisk
   „Zaktualizuj koszyk" (inline-block) nie mieściły się w jednej linii i
   przycisk spadał pod spód, wyrównany do prawej. Flex z justify-content:
   space-between układa je obok siebie z odstępem; pole kuponu może się
   kurczyć (min-width:0) na ciaśniejszych ekranach. Zakres ≥769px — poniżej
   motyw ma własny (działający) układ, nie ruszamy. Marker: MK: koszyk actions */
@media (min-width: 769px) {
    /* td.actions ZOSTAJE table-cell (display:flex na td rozsypuje tabele produktow!)
       -> uklad na floatach: kupon float:left (ograniczony), update float:right, clearfix. */
    .woocommerce-cart-form .actions {
        text-align: left;
    }
    .woocommerce-cart-form .actions::after {
        content: "";
        display: block;
        clear: both;
    }
    .woocommerce-cart-form .actions .coupon {
        float: left;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        max-width: calc(100% - 210px);   /* miejsce na „Zaktualizuj koszyk" + odstep */
        box-sizing: border-box;
    }
    .woocommerce-cart-form .actions .coupon #coupon_code {
        flex: 1 1 auto;
        min-width: 90px;
        width: auto;
    }
    .woocommerce-cart-form .actions .coupon button[name="apply_coupon"] {
        flex: 0 0 auto;
    }
    .woocommerce-cart-form .actions button[name="update_cart"],
    .woocommerce-cart-form .actions input[name="update_cart"] {
        float: right;
        margin: 0;
    }
}

/* ============================================================
   MK: strona O NAS (#1958) — 3 poprawki
   ------------------------------------------------------------
   (a) usuniety bezowy baner .page-header („O NAS") + top padding tresci,
       zeby nie wpadla pod ciemny (absolutny) navbar (dol ~131/123px).
   (b) mobile: mniejsze paddingi kolumn Elementora (druga kolumna byla
       wcieta ~60-75px po bokach przez „column-gap-extended").
   (c) margines pod .mk-onas-maker („Jesteśmy producentem") = jak na gorze,
       zeby nie sklejala sie z sekcja „Odkryj naszą kolekcję...".
   Marker: MK: onas fixes */
body.page-id-1958 .page-header { display: none !important; }
body.page-id-1958 .elementor-1958 { padding-top: 100px; }
.mk-onas-maker { margin-bottom: 40px !important; }

@media (max-width: 768px) {
    body.page-id-1958 .elementor-1958 { padding-top: 80px; }
    body.page-id-1958 .elementor-1958 .elementor-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.page-id-1958 .elementor-1958 .elementor-element-populated {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .mk-onas-maker { margin-bottom: 28px !important; }
}

/* ============================================================
   MK: sklep bez sidebara „KATEGORIE" — nawigacja robia „fasolki"
   (WSZYSTKIE/WAZONY) na gorze, wiec lista kategorii w bocznym pasku
   jest zbedna. Ukrywamy #primary-sidebar i rozszerzamy tresc na
   pelna szerokosc. Zakres: strona /sklep/ (body.woocommerce-shop).
   Marker: MK: sklep bez sidebara */
body.woocommerce-shop #primary-sidebar.shop-sidebar,
body.tax-product_cat #primary-sidebar.shop-sidebar { display: none !important; }
body.woocommerce-shop .content-area.col-lg-9,
body.tax-product_cat .content-area.col-lg-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* ============================================================
   MK: sklep bez bezowego banera .page-header (wazon na stole).
   Analogicznie do O NAS: ukrywamy baner + top padding wrappera tresci,
   zeby nie wpadla pod ciemny (absolutny) navbar (dol ~131/123px).
   Zakres: strona /sklep/ (body.woocommerce-shop). Marker: MK: sklep bez banera */
body.woocommerce-shop .page-header { display: none !important; }
body.woocommerce-shop .content-product-wrapper { padding-top: 100px !important; }
@media (max-width: 768px) {
    body.woocommerce-shop .content-product-wrapper { padding-top: 80px !important; }
}