/**
 * Kalanto / M16 - wlasne style motywu, wszystkie w jednym pliku.
 *
 * Wczesniej byly trzy osobne arkusze (m16-mobile-forms, m16-breakpoints,
 * m16-listing) podpiete osobno w config/theme.yml. Scalone w jeden, zeby bylo
 * jedno miejsce na wlasne style motywu i jedno zapytanie mniej.
 *
 * Po edycji: skasowac config/themes/theme_ecolife/shop1.json i wyczyscic cache.
 */

/* =========================================================================
 * 1. Formularze na iOS (dawne m16-mobile-forms.css)
 * ====================================================================== */

@media (hover: none) and (pointer: coarse) {
    input:not([type]),
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    select,
    textarea,
    .form-control,
    .form-control-select {
        font-size: 16px;
    }
}

/* =========================================================================
 * 2. Prog widoku tabletowego 1366px (dawne m16-breakpoints.css)
 * ====================================================================== */

@media (min-width: 1025px) and (max-width: 1365.98px) {
    body:not(.elementor-editor-active) #header .elementor-hidden-tablet {
        display: none !important;
    }

    /* Sekcje nagłówka to elementy <section>, więc block jest ich naturalnym
       trybem wyświetlania - nie psujemy układu kolumn w środku. */
    body:not(.elementor-editor-active) #header .elementor-hidden-desktop {
        display: block !important;
    }

    /* Sekcja z szybką wyszukiwarką na stronie głównej stoi na dwóch kolumnach:
       pusta 16,7% robi miejsce na pionowe menu „Kategorie", a w 83,3% siedzi
       widget. Skoro poniżej 1366px kategorii już nie ma, pusta kolumna zostawia
       tylko dziurę po lewej - chowamy ją i oddajemy całą szerokość wyszukiwarce.
       Creative Elements robi to samo od 1024px w dół (własnym CSS-em), my tylko
       domykamy pas do 1366px.

       Kolumny wskazane po identyfikatorach z Creative Elements: sekcja pojlpao
       (pusta citkbrs + widget zrlmfsc). Po przebudowaniu tej sekcji w edytorze
       identyfikatory się zmienią i regułę trzeba będzie zaktualizować. */
    .elementor-element-pojlpao .elementor-element-citkbrs {
        display: none !important;
    }

    .elementor-element-pojlpao .elementor-element-zrlmfsc {
        width: 100% !important;
    }
}

/* =========================================================================
 * 3. Listing: opis kategorii i filtry fasetowe (dawne m16-listing.css)
 * ====================================================================== */

/* UWAGA na selektory w tej sekcji: kontener opisu ma w kodzie strony
   id="js-product-list-header", ale Creative Elements zmienia je zaraz po
   załadowaniu strony na "product-list-header"
   (`jQuery(function(l){l("#js-product-list-header").attr("id","product-list-header")})`
   na końcu modules/creativeelements/views/js/frontend.min.js). Reguły pisane
   pod tamto id przestawały pasować w momencie wykonania skryptu - dlatego
   zakres wyznacza tu `#main`, którego nikt nie rusza. */

/* Odstęp od stronicowania robimy wypełnieniem, nie marginesem: margines górny
   pierwszego dziecka zwija się z marginesem kontenera opisu, który nie ma ani
   obramowania, ani wypełnienia - i potrafi przez to zniknąć. Wypełnienie zawsze
   daje realne piksele.

   !important, bo motyw zeruje wypełnienie tego bloku regułą
   `.card.block-category { padding: 0 }` - selektor z identyfikatorem i tak
   wygrywa, ale tu wolimy nie zostawiać miejsca na niespodzianki. */
#main .block-category {
    margin-top: 0 !important;
    padding-top: 2.5rem !important;
}

/* Uwaga: w custom.css (koniec pliku) klient dołożył własne
   `div#category-description { margin-top: 2rem !important }`. Ono dokłada się
   do wypełnienia powyżej - jeśli odstęp wyjdzie za duży, to tamtą linię
   należy usunąć, nie tę regułę. */

/**
 * Typografia opisu kategorii - jeden kolor, jeden rozmiar, jeden rytm.
 *
 * Motyw traktował ten blok trzema regułami naraz i wychodził z tego miszmasz:
 *  - `.text-muted` na kontenerze dawało szary #7a7a7a, ale akapity miały własną
 *    regułę z ciemnym #253237 - akapity ciemne, punkty list szare;
 *  - `ul { list-style: none; padding-left: 0 }` z globalnych stylów motywu
 *    zdejmowało wypunktowanie i wcięcie, więc listy czytały się jak akapity;
 *  - akapity w opisie miały `margin-bottom: 0`, a nagłówki `margin-top: 0`,
 *    więc raz był odstęp (pierwszy akapit ma 1.25rem), a raz tekst kleił się
 *    do następnego śródtytułu.
 *
 * Reguły motywu mają identyfikator i dwie klasy, dlatego selektory poniżej
 * używają dwóch identyfikatorów (#main + #category-description) - inaczej by
 * przegrywały.
 */
#main #category-description {
    /* 0.875rem = tyle, ile mają akapity w całym sklepie (`p` w theme.css) */
    font-size: 0.875rem;
    line-height: 1.6;
    color: #253237;
}

#main #category-description p,
#main #category-description li,
#main #category-description span,
#main #category-description strong {
    font-size: inherit;
    color: inherit;
}

#main #category-description p,
#main #category-description ul,
#main #category-description ol {
    margin-bottom: 1rem;
}

#main #category-description ul,
#main #category-description ol {
    padding-left: 1.25rem;
    list-style: disc outside;
}

#main #category-description ol {
    list-style-type: decimal;
}

#main #category-description li {
    margin-bottom: 0.375rem;
}

#main #category-description h2,
#main #category-description h3,
#main #category-description h4 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.25;
    color: #253237;
}

#main #category-description h2 {
    font-size: 1.375rem;
}

#main #category-description h3 {
    font-size: 1.125rem;
}

#main #category-description h4 {
    font-size: 1rem;
}

/* Pierwszy i ostatni element bez zbędnego odstępu na krańcach bloku. */
#main #category-description > :first-child {
    margin-top: 0;
}

#main #category-description > :last-child {
    margin-bottom: 0;
}

/**
 * Nawigacja fasetowa: długie listy wartości (Szerokość, Adapter, Dla maszyn)
 * ciągnęły się w dół przez kilka ekranów. Od sześciu pozycji układamy je w
 * dwóch kolumnach. Krótsze listy zostają w jednej - to akurat te z długimi
 * nazwami (Kategorie, Marka, Czas realizacji), które w wąskim pasku bocznym
 * łamałyby się po dwa słowa w wierszu.
 *
 * Warunek na liczbę pozycji robi :has() - przeglądarki bez jego obsługi
 * (sprzed 2023) po prostu zostaną przy jednej kolumnie.
 */
#search_filters .facet > ul:has(> li:nth-child(6)) {
    columns: 2;
    column-gap: 1.25rem;
}

/* Pozycja nie może zostać przecięta na pół między kolumnami. */
#search_filters .facet > ul:has(> li:nth-child(6)) > li {
    break-inside: avoid;
}

/* Szablon wyszukiwania fasetowego ucina nazwy wielokropkiem
   (`overflow: hidden; text-overflow: ellipsis; white-space: nowrap`
   w themes/theme_ecolife/modules/ps_facetedsearch/views/dist/front.css).
   W dwóch kolumnach zaczęło to obcinać nawet krótkie wartości, więc pozwalamy
   nazwom zawijać się do drugiej linii - nic nie ginie. */
#search_filters .facet .facet-label a {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

/**
 * Tablet i węższy desktop: pasek filtrów musi pomieścić dwie kolumny wartości.
 *
 * Siatka motywu daje lewej kolumnie 25% już od 768px (`.col-md-3`), czyli na
 * tablecie w pionie ok. 195px - po odjęciu marginesów zostawało ~70px na
 * kolumnę i nazwy urywały się po kilku znakach. Poniżej 768px filtry i tak idą
 * na całą szerokość, a od 1200px kolumna jest dość szeroka sama z siebie.
 *
 * Identyfikator wygrywa z klasą siatki (.col-md-3 / .col-sm-4), więc wystarczy
 * podać samą szerokość - motyw używa tu zwykłego `width`, nie flexa.
 */
@media (min-width: 768px) and (max-width: 1199px) {
    #left-column {
        width: 40%;
    }

    #content-wrapper.left-column {
        width: 60%;
    }
}

/* =========================================================================
 * 4. Karta produktu
 * ====================================================================== */

/* „Brutto" obok ceny, nie pod nią. Cena (.product-price) jest już blokiem
   liniowym, sam dopisek był zwykłym <div>, więc spadał do nowej linii. */
#main .product-prices .tax-shipping-delivery-label {
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: baseline;
}

/**
 * Naklejka z cechami na zdjęciu produktu - wyglądem taka sama jak na
 * kafelkach listingu, ale style tamtej są przypięte do `.img_block`,
 * którego na karcie produktu nie ma, więc powtarzamy je tutaj.
 * Kotwicą jest `.product-cover-container` (motyw ma na nim position: relative).
 */
.product-cover-container .m16-cover-features {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    /* nie przechwytujemy kliknięć - pod spodem jest powiększanie zdjęcia */
    pointer-events: none;
}

.product-cover-container .m16-cover-features .product-tile-features {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-cover-container .m16-cover-features .product-tile-features li {
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.4;
    color: #555;
    white-space: nowrap;
}

.product-cover-container .m16-cover-features .ptf-name {
    color: #888;
}

.product-cover-container .m16-cover-features .ptf-value {
    font-weight: 700;
    color: #222;
}