/* =========================================================================
   Koszyk / zamówienie / mini-koszyk – dane pozycji najmu.

   WooCommerce Blocks renderuje `item_data` jako elementy inline rozdzielone
   „ / ", przez co termin, punkt odbioru, stawka i usługi zlewają się w jeden
   ciąg. Zamieniamy to na czytelne wiersze „Etykieta: wartość".
   ========================================================================= */

.wc-block-components-product-details,
.wc-block-components-product-details.wc-block-components-product-details {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin-top: .6rem;
    line-height: 1.45;
}

/* każdy element danych na własnej linii */
.wc-block-components-product-details > span {
    display: block;
}

/* ukryj separator „ / " wstawiany pomiędzy elementami (zagnieżdżony w elemencie) */
.wc-block-components-product-details span[aria-hidden="true"] {
    display: none;
}

.wc-block-components-product-details__name {
    font-weight: 600;
    color: #08203a;
    margin-right: .25rem;
}

.wc-block-components-product-details__value {
    color: #33475b;
}

/* =========================================================================
   Checkout – proporcja kolumn formularz / podsumowanie 50/50.
   WooCommerce Block (SidebarLayout, wariant `is-large`) układa layout
   jako flex: formularz dostaje `flex-grow: 1` (flex-basis 0%), a sekcja
   podsumowania stałą `flex: 0 0 360px`. Samo ustawienie `width` nic nie
   daje – flex-basis/grow przejmują szerokość. Nadpisujemy flex-basis na
   50% / 50% kontenera. Próg >=782px odpowiada przełączeniu bloku na
   `is-large` (≥ medialnego wariantu dwukolumnowego); poniżej 782px blok
   układa się w jednej kolumnie, więc reguła go nie dotyczy.
   ========================================================================= */

@media (min-width: 782px) {
    .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout.is-large {
        column-gap: 0;
    }

    .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout.is-large .wc-block-components-main {
        flex: 0 0 50%;
        width: 50%;
        padding-right: 2%;
    }

    .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout.is-large .wc-block-components-sidebar {
        flex: 0 0 50%;
        width: 50%;
        padding-left: 2%;
    }
}

/* =========================================================================
   Checkout – podsumowanie zamówienia: opis najmu w pełnej szerokości pod
   wierszem produktu.
   Domyślnie WooCommerce wkłada `.wc-block-components-product-details`
   (📅 Termin, 📍 Odbiór, 💲 Stawka, 🎿 Usługi) głęboko w kolumnę opisu,
   obok ceny – wąska kolumna zawija ten opis mimo wolnego miejsca po prawej.
   Rozpłaszczamy opakowania (`display: contents`) tak, by elementy stały się
   bezpośrednimi dziećmi pozycji, i układamy pozycję jako siatkę:
       [obraz] [nazwa]            [cena]
       [ opis najmu – cała szerokość ]
   Działa osobno dla każdej pozycji (siatka per `.wc-block-components-order-summary-item`).
   Cena jednostkowa pod nazwą (`.wc-block-cart-item__prices`) jest ukryta –
   dla ilości 1 dublowała cenę z prawej kolumny (patrz niżej).
   ========================================================================= */

.wp-block-woocommerce-checkout .wc-block-components-order-summary__content {
    display: block;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "image name    price"
        "details details details";
    column-gap: 1em;
    row-gap: .35em;
    align-items: start;
    margin-bottom: 1.75rem;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item:last-child {
    margin-bottom: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description,
.wp-block-woocommerce-checkout .wc-block-components-product-metadata {
    display: contents;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image {
    grid-area: image;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
    grid-area: name;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__total-price {
    grid-area: price;
}

.wp-block-woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-details {
    grid-area: details;
}

/* =========================================================================
   Zduplikowana cena jednostkowa pod nazwą produktu.
   WooCommerce Blocks renderuje w podsumowaniu zamówienia ORAZ w tabeli
   koszyka zarówno cenę jednostkową (`.wc-block-cart-item__prices`, pod
   nazwą), jak i cenę pozycji w osobnej kolumnie po prawej
   (`.wc-block-components-order-summary-item__total-price` /
   `.wc-block-cart-item__total`). Przy ilości 1 obie są identyczne.
   Ukrywamy cenę jednostkową, zostawiając tylko kolumnę po prawej.
   Objęte: checkout, koszyk ORAZ wysuwany mini-koszyk (drawer). Mini-koszyk
   ma inny przodek (`.wc-block-mini-cart__drawer`, bez `.wc-block-cart`),
   dlatego kontenery łączymy przez `:is()`. Selektory mają wyższą
   specyficzność niż reguły WooCommerce
   (`table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices`).
   ========================================================================= */

:is(.wc-block-cart, .wc-block-mini-cart__drawer) .wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item .wc-block-cart-item__prices {
    display: none;
}

/* =========================================================================
   Koszyk + wysuwany mini-koszyk – ten sam układ pozycji co podsumowanie
   zamówienia (checkout). Tabela pozycji (`table.wc-block-cart-items` z
   `tbody` i komórkami `td`) trzyma opis najmu w wąskiej kolumnie środkowej
   (na mobile ~132px). Rozpłaszczamy tabelę do bloków i każdy wiersz pozycji
   układamy jako siatkę – identycznie jak w zamówieniu:
       [obraz] [nazwa produktu] [cena]
       [ opis najmu – cała szerokość ]
       [ usuń ]
   plus odstęp między pozycjami. Działa na desktopie i mobile, w koszyku
   (`.wc-block-cart`) i w mini-koszyku (`.wc-block-mini-cart__drawer`).

   Specyficzność: WooCommerce ma własny grid mobilny, np.
   `.is-mobile table.wc-block-cart-items .wc-block-cart-items__row
   .wc-block-cart-item__quantity` (4 klasy + element) oraz grid w
   mini-koszyku. Dlatego przodka piszemy jako
   `:is(.wc-block-cart, .wc-block-mini-cart__drawer)` (liczy się jak klasa),
   a wiersz podwajamy (`.wc-block-cart-items__row.wc-block-cart-items__row`),
   by przebić reguły WooCommerce niezależnie od breakpointu.
   ========================================================================= */

:is(.wc-block-cart, .wc-block-mini-cart__drawer) .wc-block-cart-items,
:is(.wc-block-cart, .wc-block-mini-cart__drawer) .wc-block-cart-items tbody {
    display: block;
}

:is(.wc-block-cart, .wc-block-mini-cart__drawer) .wc-block-cart-items thead {
    display: none;
}

:is(.wc-block-cart, .wc-block-mini-cart__drawer) .wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "image name    price"
        "details details details"
        "actions actions actions";
    column-gap: 1em;
    row-gap: .35em;
    align-items: start;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--wc-separator-color, color-mix(in srgb, currentColor 20%, transparent));
    padding-bottom: 1.75rem;
}

:is(.wc-block-cart, .wc-block-mini-cart__drawer) .wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row:last-child {
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0;
}

:is(.wc-block-cart, .wc-block-mini-cart__drawer) .wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row .wc-block-cart-item__image {
    grid-area: image;
}

:is(.wc-block-cart, .wc-block-mini-cart__drawer) .wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row .wc-block-cart-item__product,
:is(.wc-block-cart, .wc-block-mini-cart__drawer) .wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row .wc-block-cart-item__wrap,
:is(.wc-block-cart, .wc-block-mini-cart__drawer) .wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row .wc-block-components-product-metadata {
    display: contents;
}

:is(.wc-block-cart, .wc-block-mini-cart__drawer) .wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row .wc-block-components-product-name {
    grid-area: name;
}

:is(.wc-block-cart, .wc-block-mini-cart__drawer) .wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row .wc-block-components-product-details {
    grid-area: details;
}

:is(.wc-block-cart, .wc-block-mini-cart__drawer) .wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row .wc-block-cart-item__total {
    grid-area: price;
}

:is(.wc-block-cart, .wc-block-mini-cart__drawer) .wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row .wc-block-cart-item__quantity {
    grid-area: actions;
}

/* =========================================================================
   Wysuwany mini-koszyk (drawer) – poszerzenie.
   WooCommerce ustawia szerokość przez zmienną CSS `--drawer-width`
   (`:root { --drawer-width: 480px }` w `wc-blocks-style-inline-css`).
   Nadpisujemy ją selektorem `:root:root` (specyficzność wyższa niż `:root`,
   niezależnie od kolejności arkuszy). `--neg-drawer-width` przeliczy się sam.
   Na mobile szerokość i tak ogranicza `max-width: 100%`.
   ========================================================================= */

:root:root {
    --drawer-width: 560px;
}

/* =========================================================================
   Nagłówek (szablon site-header – wspólny dla wszystkich stron).
   Selektory mają specyficzność wyższą niż inline'owe reguły kolumn
   Greenshift wyświetlane w <style> po headzie.

   - Desktop: ikona koszyka bliżej wyszukiwarki produktów – pole wyszukiwania
     wypełnia swoją kolumnę, a ikona koszyka przylega do lewej krawędzi
     własnej kolumny (zamiast być centrowana w 15% kolumnie).
   - Mobile: wyszukiwarka z marginesami po bokach zamiast pełnej szerokości.
   ========================================================================= */
@media (min-width: 768px) {
    #gspb_row-id-gsbp-6c34bc4 #gspb_col-id-gsbp-33882cd .wp-block-search {
        width: 100%;
    }

    #gspb_row-id-gsbp-6c34bc4 #gspb_col-id-gsbp-a1d920c {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    #gspb_row-id-gsbp-6c34bc4 #gspb_col-id-gsbp-9a6a897 .wp-block-search {
        width: calc(100% - 40px);
        margin: 0 auto;
    }
}