/*
Theme Name: CBJ Storefront
Author: Jacek Radecki
Description: Motyw potomny dla CBJ do sprzedaży badań laboratoryjnych
Version: 1.0
Template: storefront

This is the child theme for Storefront theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/
/* Lista produktów – układ w jednej kolumnie */
ul.products {
    display: block !important;
}

/* Każdy produkt w osobnym wierszu, 3 kolumny: Tytuł | Cena | Przycisk */
ul.products li.product {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr; /* Tytuł | Cena | Przycisk */
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    width: 100% !important;
    float: none !important;
}

/* Tytuł */
ul.products li.product .title-col h2.woocommerce-loop-product__title {
    margin: 0;
    font-size: 1.25rem;
    text-decoration: underline;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
}

/* Cena */
ul.products li.product .price-col {
    justify-self: end;
    text-align: right;
    font-weight: bold;
    font-size: 1rem;
    white-space: nowrap;
}

/* Przycisk */
ul.products li.product .button-col {
    justify-self: center;
    text-align: center;
}

/* Responsywność – na mobile układ pionowy */
@media (max-width: 768px) {
    ul.products li.product {
        grid-template-columns: 1fr;
        text-align: center;
    }
    ul.products li.product .title-col,
    ul.products li.product .price-col,
    ul.products li.product .button-col {
        justify-self: center;
        text-align: center;
    }
}

/* Ukryj formularz sortowania WooCommerce */
form.woocommerce-ordering {
    display: none !important;
}

/* Ujednolicenie wysokości elementów w pasku filtra */
.filter-bar select,
.filter-bar input[type="text"],
.filter-bar button {
    height: 40px;              /* wspólna wysokość */
    padding: 0 12px;           /* wewnętrzne marginesy */
    font-size: 1rem;           /* spójny rozmiar czcionki */
    line-height: 1.2;          /* wyrównanie tekstu */
    box-sizing: border-box;    /* uwzględnia padding w wysokości */
}

/* Opcjonalnie: wyrównanie przycisków do środka */
.filter-bar button {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ujednolicenie wyglądu przycisków w pasku filtra */
.filter-bar button {
    height: 40px;              /* taka sama wysokość jak select/input */
    padding: 0 16px;           /* wewnętrzne marginesy */
    font-size: 1rem;           /* spójny rozmiar czcionki */
    line-height: 1.2;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    /* kosmetyka */
    background-color: #a77556; /* kolor tła */
    color: #fff;               /* biały tekst */
    border: none;
    border-radius: 4px;        /* lekkie zaokrąglenie rogów */
    transition: background-color 0.2s ease;
}

.filter-bar button:hover {
    background-color: #005f8d; /* ciemniejszy niebieski przy hover */
}

/* Reset – inny kolor, żeby się odróżniał */
.filter-bar #resetBtn {
    background-color: #a77556;
}

.filter-bar #resetBtn:hover {
    background-color: #555;
}

/* Stylizacja przycisków "Zamów to badanie" */
ul.products li.product .button-col a.button {
    border-radius: 4px;       /* lekkie zaokrąglenie rogów */
    box-shadow: none !important; /* brak cieni */
    padding: 8px 16px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    text-align: center;

    /* użyj kolorów z motywu WooCommerce */
    background-color: var(--wc-primary, #a77556; 
    color: #fff;
    border: none;
    transition: background-color 0.2s ease;
}
/* odtąd */