/* WooCommerce w skórze prototypu.
   ————————————————————————————————————————————————————————————————
   Prototyp rysuje koszyk, zamówienie i konto własnym markupem
   (.in-koszyk-*, .in-zam-*, .in-acc-*), którego nie da się nałożyć na
   WooCommerce bez przepisania szablonów — a te trzymają bramki płatności,
   walidację i AJAX. Podmiana tego byłaby najkruchszym miejscem w całym
   motywie i psułaby się przy każdej aktualizacji Woo.

   Dlatego zostawiamy markup WooCommerce, a ubieramy go w tokeny i kształty
   z prototypu: karty zamiast tabel, pigułkowe przyciski, te same promienie,
   fonty i kolory. Plik NIE jest generowany z prototypu — pisany ręcznie. */

/* ——————————————————————————————— wspólne ——————————————————————————————— */

.woocommerce .in-wrap > h1 { margin-bottom: 28px; }

.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce-MyAccount-content label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--color-text-muted, #413B4D);
    margin: 0 0 7px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="tel"] {
    width: 100%;
    padding: 13px 16px;
    font: inherit;
    font-size: 15px;
    color: var(--color-text, #0B1220);
    background: var(--in-surface, #fff);
    border: 1px solid var(--color-border, #C6C4D8);
    border-radius: var(--radius-md, 8px);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-MyAccount-content input:focus {
    outline: none;
    border-color: var(--brand-primary, #643B81);
    box-shadow: 0 0 0 3px rgba(100, 59, 129, .14);
}

/* Przyciski — pigułka jak .in-btn w prototypie. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border: 0;
    border-radius: var(--radius-pill, 9999px);
    background: var(--brand-primary, #643B81);
    color: var(--brand-on-primary, #fff);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: filter .2s ease, background .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover { background: var(--brand-600, #55326e); color: #fff; filter: none; }

/* Przycisk drugorzędny (np. „Aktualizuj koszyk") — obrys zamiast wypełnienia. */
.woocommerce button[name="update_cart"],
.woocommerce .return-to-shop .button {
    background: transparent;
    color: var(--color-text, #0B1220);
    border: 1px solid rgba(11, 18, 32, .22);
}
.woocommerce button[name="update_cart"]:hover,
.woocommerce .return-to-shop .button:hover {
    background: var(--brand-50, #f3eff5);
    border-color: var(--brand-primary, #643B81);
    color: var(--brand-primary, #643B81);
}
.woocommerce button[name="update_cart"]:disabled { opacity: .45; }

/* Komunikaty Woo w stylu .in-note. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border: 1px solid var(--color-border, #C6C4D8);
    border-left-width: 3px;
    border-radius: var(--radius-lg, 12px);
    background: var(--in-surface, #fff);
    padding: 16px 20px;
    font-size: 15px;
    list-style: none;
}
.woocommerce-message { border-left-color: var(--brand-accent, #67B6C0); }
.woocommerce-info { border-left-color: var(--brand-secondary, #5E689A); }
.woocommerce-error { border-left-color: #b3261e; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

/* ——————————————————————————————— koszyk ——————————————————————————————— */

/* Tabela koszyka jako lista kart — na telefonie tabela i tak się rozjeżdża. */
.woocommerce table.shop_table {
    border: 0;
    border-collapse: separate;
    border-spacing: 0 12px;
    width: 100%;
}
.woocommerce table.shop_table .product-total {
    white-space: nowrap;
    text-align: right;
}
.woocommerce table.shop_table th {
    border: 0;
    padding: 0 14px 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #413B4D);
}
.woocommerce table.shop_table td {
    border: 0;
    border-top: 1px solid var(--color-border, #C6C4D8);
    border-bottom: 1px solid var(--color-border, #C6C4D8);
    background: var(--in-surface, #fff);
    padding: 18px 14px;
    vertical-align: middle;
}
.woocommerce table.shop_table tr td:first-child {
    border-left: 1px solid var(--color-border, #C6C4D8);
    border-radius: var(--radius-lg, 12px) 0 0 var(--radius-lg, 12px);
}
.woocommerce table.shop_table tr td:last-child {
    border-right: 1px solid var(--color-border, #C6C4D8);
    border-radius: 0 var(--radius-lg, 12px) var(--radius-lg, 12px) 0;
}
.woocommerce table.cart img { width: 72px; border-radius: var(--radius-md, 8px); }
.woocommerce table.cart .product-name a { color: var(--color-text, #0B1220); font-weight: 600; text-decoration: none; }
.woocommerce table.cart .product-name a:hover { color: var(--brand-primary, #643B81); }
.woocommerce a.remove {
    color: var(--color-text-muted, #413B4D) !important;
    font-weight: 400;
}
.woocommerce a.remove:hover { background: transparent !important; color: #b3261e !important; }

.woocommerce .quantity .qty {
    width: 72px;
    padding: 10px;
    text-align: center;
    border: 1px solid var(--color-border, #C6C4D8);
    border-radius: var(--radius-md, 8px);
    font: inherit;
}

/* Podsumowanie koszyka — karta jak .in-koszyk-sum w prototypie. */
.woocommerce .cart-collaterals .cart_totals {
    background: var(--in-surface, #fff);
    border: 1px solid var(--color-border, #C6C4D8);
    border-radius: var(--radius-xl, 20px);
    padding: 26px 28px;
}
.woocommerce .cart-collaterals .cart_totals h2 {
    font-size: var(--t-h5);
    margin: 0 0 16px;
}
.woocommerce .cart-collaterals .cart_totals table.shop_table { border-spacing: 0; }
.woocommerce .cart-collaterals .cart_totals td,
.woocommerce .cart-collaterals .cart_totals th {
    border: 0;
    background: transparent;
    padding: 10px 0;
    border-radius: 0;
}
.woocommerce .cart-collaterals .cart_totals tr.order-total td { font-size: 20px; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { width: 100%; justify-content: center; }

.woocommerce .coupon .input-text { max-width: 220px; }

/* ————————————————————————————— zamówienie ————————————————————————————— */

/* Dwie kolumny: dane po lewej, podsumowanie po prawej — układ z prototypu. */
@media (min-width: 992px) {
    .woocommerce-checkout form.checkout {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
        gap: 40px;
        align-items: start;
    }
    .woocommerce-checkout form.checkout #customer_details { grid-column: 1; }
    .woocommerce-checkout form.checkout #order_review_heading { display: none; }
    .woocommerce-checkout form.checkout #order_review { grid-column: 2; }
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }

.woocommerce-checkout h3 {
    font-size: var(--t-h5);
    margin: 0 0 18px;
}

.woocommerce-checkout #order_review {
    background: var(--in-surface, #fff);
    border: 1px solid var(--color-border, #C6C4D8);
    border-radius: var(--radius-xl, 20px);
    padding: 26px 28px;
}
.woocommerce-checkout #payment {
    background: transparent;
    border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
    border: 0;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    gap: 10px;
}
.woocommerce-checkout #payment ul.payment_methods li {
    border: 1px solid var(--color-border, #C6C4D8);
    border-radius: var(--radius-lg, 12px);
    padding: 14px 16px;
    background: var(--in-surface, #fff);
    transition: border-color .2s ease, background .2s ease;
}
.woocommerce-checkout #payment ul.payment_methods li:hover { border-color: var(--brand-primary, #643B81); }
.woocommerce-checkout #payment div.payment_box {
    background: var(--brand-50, #f3eff5);
    border-radius: var(--radius-md, 8px);
    font-size: 14px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #place_order { width: 100%; justify-content: center; }

/* ————————————————————————————— moje konto ————————————————————————————— */

/* Logowanie i rejestracja obok siebie — jak .in-acc w prototypie. */
@media (min-width: 860px) {
    .woocommerce-account:not(.logged-in) .woocommerce .u-columns.col2-set {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .woocommerce-account:not(.logged-in) .woocommerce .u-column1,
    .woocommerce-account:not(.logged-in) .woocommerce .u-column2 { width: 100%; float: none; }
}

.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
    border: 1px solid var(--color-border, #C6C4D8);
    border-radius: var(--radius-xl, 20px);
    background: var(--in-surface, #fff);
    padding: 28px 30px;
    margin: 0;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}
.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 11px 16px;
    border-radius: var(--radius-md, 8px);
    color: var(--color-text, #0B1220);
    text-decoration: none;
    font-size: 15px;
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--in-hover, rgba(0, 0, 0, .04)); }
.woocommerce-MyAccount-navigation li.is-active a {
    background: var(--brand-50, #f3eff5);
    color: var(--brand-primary, #643B81);
    font-weight: 600;
}

/* ⚠️ WooCommerce ustawia tu FLOATY selektorem `.woocommerce-account
   .woocommerce-MyAccount-navigation` (woocommerce-layout.css) — czyli DWIE klasy.
   Nasze wczesniejsze `.woocommerce-MyAccount-navigation { width:100%; float:none }`
   mialo jedna klase, wiec przegrywalo i menu dostawalo `width:30%`, a tresc
   `width:68%` — w siatce dawalo to kolumny obok siebie w zlych miejscach i
   tresc scisnieta do paska. Nadpisujemy selektorem TEJ SAMEJ dlugosci i
   dodatkowo ustawiamy pozycje w siatce wprost, zeby nic nie zalezalo od
   automatycznego rozkladania. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: auto;
    min-width: 0;
}
.woocommerce-account.logged-in .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
@media (min-width: 860px) {
    .woocommerce-account.logged-in .woocommerce {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 44px;
    }
    .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation {
        grid-column: 1; grid-row: 1;
    }
    .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
        grid-column: 2; grid-row: 1;
    }
}

/* ————————————————————————— nadpisania ostatniej instancji —————————————————
   WooCommerce (i wtyczki sklepu) definiują przyciski selektorami w rodzaju
   `.woocommerce #content input.button.alt`, które biją zwykłe `.woocommerce
   a.button`. Stąd przycisk „Przejdź do płatności" wychodził w kolorze #5BC0DE
   zamiast markowego fioletu. Podnosimy specyficzność przez `body`, zamiast
   sypać !important po całym pliku. */
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce a.button.alt,
body .woocommerce button.button.alt,
body .woocommerce input.button.alt,
body .woocommerce #respond input#submit {
    background: var(--brand-primary, #643B81);
    color: var(--brand-on-primary, #fff);
    border: 0;
    border-radius: var(--radius-pill, 9999px);
}
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .woocommerce a.button.alt:hover,
body .woocommerce button.button.alt:hover { background: var(--brand-600, #55326e); color: #fff; }

/* Drugorzędne wracają na obrys — kolejność ma znaczenie, więc po powyższym. */
body .woocommerce button[name="update_cart"],
body .woocommerce .return-to-shop .button,
body .woocommerce .coupon button.button {
    background: transparent;
    color: var(--color-text, #0B1220);
    border: 1px solid rgba(11, 18, 32, .22);
}
body .woocommerce button[name="update_cart"]:hover,
body .woocommerce .return-to-shop .button:hover,
body .woocommerce .coupon button.button:hover {
    background: var(--brand-50, #f3eff5);
    border-color: var(--brand-primary, #643B81);
    color: var(--brand-primary, #643B81);
}

/* „Przejdź do płatności" ma własną, mocniejszą regułę w arkuszu sklepu
   (`.woocommerce .wc-proceed-to-checkout a.checkout-button`) — stąd błękit
   #5BC0DE mimo nadpisań wyżej. Celujemy dokładnie w nią. */
body .woocommerce .wc-proceed-to-checkout a.checkout-button {
    background: var(--brand-primary, #643B81);
    color: var(--brand-on-primary, #fff);
    border-radius: var(--radius-pill, 9999px);
}
body .woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--brand-600, #55326e);
}

/* ————————————————————————— szuflada koszyka —————————————————————————
   Szablon mini-cart (woocommerce/cart/mini-cart.php) jest nadpisany w motywie:
   obraz jest OSOBNYM elementem <li>, nie wewnątrz <a>, dzięki czemu grid
   na <li> działa wprost. Dane dodatkowe (termin, dane uczestnika) nie
   pojawiają się w szufladzie — za wąska; szczegóły widać w koszyku. */
#in-cart .woocommerce-mini-cart,
#in-cart ul.cart_list {
    list-style: none;
    margin: 0;
    padding: 0;
}
#in-cart .woocommerce-mini-cart-item,
#in-cart ul.cart_list li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 0 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border, #C6C4D8);
    font-size: 14px;
    line-height: 1.5;
}
#in-cart .woocommerce-mini-cart-item::before { content: none; }
#in-cart ul.cart_list li img,
#in-cart .woocommerce-mini-cart-item img {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 64px;
    height: 64px;
    margin: 0;
    object-fit: cover;
    border-radius: var(--radius-md, 8px);
    float: none;
}
#in-cart .woocommerce-mini-cart-item .in-mc-name {
    grid-column: 2;
    grid-row: 1;
    color: var(--color-text, #0B1220);
    font-weight: 600;
    text-decoration: none;
}
#in-cart .woocommerce-mini-cart-item .quantity {
    grid-column: 2;
    grid-row: 2;
    color: var(--color-text-muted, #413B4D);
    font-size: 13px;
    margin-top: 2px;
}
#in-cart .woocommerce-mini-cart-item a.remove {
    grid-column: 3;
    grid-row: 1;
    position: static;
    font-size: 18px;
    line-height: 1;
}

/* Własna stopka panelu ma już kwotę i oba przyciski. */
#in-cart .woocommerce-mini-cart__total,
#in-cart .woocommerce-mini-cart__buttons { display: none; }

#in-cart .woocommerce-mini-cart__empty-message {
    margin: 24px 0;
    color: var(--color-text-muted, #413B4D);
}

/* ————————————————————————— zamówienie: układ ——————————————————————————
   Strona zamówienia jest zbudowana widżetem „Checkout" Elementora Pro, który
   owija formularz w `.e-checkout__container` z dwiema kolumnami. Układ dawał
   im CSS Elementora — a ten wycinamy, bo psuł przyciski i kolory. Dlatego
   kolumny opisujemy sami. Reguły dla gołego `form.checkout` zostają obok:
   po usunięciu Elementora zostanie sam shortcode i wtedy zadziałają one. */
@media (min-width: 992px) {
    .woocommerce-checkout form.checkout {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
        gap: 40px;
        align-items: start;
    }
    /* Gdy jest kontener Elementora, grid przenosi się na niego —
       sam formularz musi być blokiem, bo ma jedno dziecko (kontener). */
    .woocommerce-checkout form.checkout:has(> .e-checkout__container) {
        display: block;
    }
    .woocommerce-checkout form.checkout > .e-checkout__container {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
        gap: 40px;
        align-items: start;
    }
}
.woocommerce-checkout .e-checkout__column { min-width: 0; }
.woocommerce-checkout .e-sticky-right-column { position: sticky; top: 108px; }

/* Pola w dwóch kolumnach — jak „Dane do faktury" w prototypie. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
}
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row-full,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > p:only-child { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
}

/* ⚠️ WooCommerce trzyma te pola na floatach: `.woocommerce form .form-row-first
   { width: 47%; float: left }`. Kolumny robimy juz siatka wyzej, wiec te 47%
   liczylo sie OD KOLUMNY — pole „Imie" mialo polowe swojego miejsca. Zdejmujemy
   szerokosci i floaty selektorem o tej samej dlugosci, wiec wygrywa kolejnosc
   wczytania (nasz arkusz idzie po arkuszach Woo). */
.woocommerce-checkout form .form-row,
.woocommerce-checkout form .form-row-first,
.woocommerce-checkout form .form-row-last,
.woocommerce-checkout form .form-row-wide {
    width: auto;
    float: none;
    margin-left: 0;
    margin-right: 0;
}
.woocommerce-checkout form .form-row :is(input.input-text, textarea, select, .select2-container) {
    width: 100%;
}

/* Blok danych w karcie, tak jak .in-zam-box w prototypie. */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields {
    background: var(--in-surface, #fff);
    border: 1px solid var(--color-border, #C6C4D8);
    border-radius: var(--radius-xl, 20px);
    padding: 26px 28px;
    margin: 0 0 24px;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 { margin-top: 0; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { padding: 0; }

/* ———————————————————— zamówienie: metody płatności ————————————————————
   Bramki (Przelewy24, BLIK) dostają kafelek z logotypem po prawej. Logotypy
   przychodzą z wtyczki jako <img> bez rozmiaru — bez tego potrafią wejść
   w kilkusetpikselowej szerokości i rozpychają kolumnę. */
.woocommerce-checkout #payment ul.payment_methods li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
    grid-column: 1;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--brand-primary, #643B81);
}
/* ⚠️ Logotyp siedzi WEWNATRZ <label>, wiec `grid-column` na nim nic nie robilo —
   nie jest dzieckiem siatki. Dlatego obrazek spadal na linie bazowa tekstu
   i ladowal nisko przy prawej krawedzi. Robimy z etykiety wiersz flex:
   nazwa po lewej, logotyp po prawej, oba wysrodkowane w pionie. */
.woocommerce-checkout #payment ul.payment_methods li label {
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text, #0B1220);
    letter-spacing: 0;
    cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods li label img {
    flex: 0 0 auto;
    max-width: 168px;
    max-height: 40px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    float: none;
    object-fit: contain;
}
.woocommerce-checkout #payment ul.payment_methods li div.payment_box {
    grid-column: 1 / -1;
    margin: 4px 0 0;
}
/* Zaznaczona metoda — obrys w kolorze marki, żeby było widać wybór. */
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
    border-color: var(--brand-primary, #643B81);
    background: var(--brand-50, #f3eff5);
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: 18px 0; font-size: 14px; }
.woocommerce-checkout .woocommerce-privacy-policy-text p { font-size: 13px; color: var(--color-text-muted, #413B4D); }

/* ————————————————————————— karta produktu —————————————————————————
   Markup zostaje WooCommerce'owy (warianty, galeria, zakładki, opinie),
   zmieniamy tylko warstwę wizualną. Domyślny Woo daje m.in. zieloną cenę
   (#77a464) i nieostylowany <select> wariantu — obie rzeczy odstają od
   reszty serwisu. */
.woocommerce div.product { margin: 0; }

.woocommerce div.product .product_title {
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.15;
    margin: 0 0 18px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--brand-700, #46295a);
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 22px;
}
.woocommerce div.product p.price del { opacity: .5; font-weight: 400; font-size: 20px; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product div.images img { border-radius: var(--radius-xl, 20px); }
.woocommerce div.product div.summary { margin-bottom: 0; }

/* Wybór wariantu — ten sam kształt co pola formularzy. */
.woocommerce div.product form.cart .variations { margin-bottom: 18px; }
.woocommerce div.product form.cart .variations th.label { padding: 10px 0 6px; }
.woocommerce div.product form.cart .variations label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted, #413B4D);
}
.woocommerce div.product form.cart .variations select {
    width: 100%;
    min-width: 220px;
    padding: 12px 40px 12px 16px;
    font: inherit;
    font-size: 15px;
    background: var(--in-surface, #fff);
    border: 1px solid var(--color-border, #C6C4D8);
    border-radius: var(--radius-md, 8px);
}
.woocommerce div.product form.cart .reset_variations {
    font-size: 13px;
    color: var(--color-text-muted, #413B4D);
}

.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { flex: 1 1 100%; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
    display: flex;
    gap: 12px;
    align-items: center;
}
.woocommerce div.product form.cart div.quantity { margin: 0; }
.woocommerce div.product form.cart button.single_add_to_cart_button { flex: 0 0 auto; }
.woocommerce div.product form.cart button.disabled { opacity: .45; }

.woocommerce div.product .woocommerce-variation-price { margin-bottom: 14px; }

/* Metryczka (SKU, kategorie) — drobnym drukiem, nie jak treść. */
.woocommerce div.product .product_meta {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border, #C6C4D8);
    font-size: 13px;
    color: var(--color-text-muted, #413B4D);
}
.woocommerce div.product .product_meta a { color: var(--brand-primary, #643B81); }

/* Zakładki — podkreślenie zamiast pudełek Woo. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 40px 0 0;
    border-bottom: 1px solid var(--color-border, #C6C4D8);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 18px;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text-muted, #413B4D);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--brand-primary, #643B81);
    border-bottom-color: var(--brand-primary, #643B81);
}
.woocommerce div.product .woocommerce-tabs .panel { padding-top: 26px; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }

/* Produkty powiązane — te same kafelki co na liście sklepu. */
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 { margin: 48px 0 24px; }
.woocommerce .related.products ul.products,
.woocommerce .upsells.products ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 28px;
}
.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product { width: 100%; margin: 0; float: none; }
.woocommerce ul.products li.product img { border-radius: var(--radius-lg, 12px); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 18px;
    padding: 14px 0 6px;
}

/* ——— Podobne produkty ———————————————————————————————————————
   Sekcja jedzie kafelkami `.in-card` (woocommerce/single-product/related.php),
   więc domyślne style list Woo są tu zbędne — zostaje odstęp od karty produktu
   i cienka kreska, żeby było widać, gdzie kończy się opis. */
.in-related { border-top: 1px solid rgba(11, 18, 32, .12); margin-top: 8px; }
.in-related > .in-wrap > h2 { margin-bottom: 32px; }

/* Kafelek produktu bez zdjęcia. Woo wstawia w to miejsce szary „Symbol
   zastępczy" z ramką i ikoną aparatu — na lawendowym tle wygląda jak błąd
   wczytywania. Do czasu uzupełnienia zdjęć pokazujemy spokojne pole marki. */
.in-card-ph {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, rgba(100, 59, 129, .10), rgba(100, 59, 129, .03));
}

/* ——————————————————————————————— opinie ———————————————————————————————
   Moduł recenzji zostawał w domyślnej skórze Woo: szare zastępcze awatary,
   ramki wokół każdego wpisu i czarne gwiazdki. Markup zostaje (to komentarze
   WordPressa — zmiana szablonu psułaby moderację i odpowiedzi), zmieniamy
   wyłącznie warstwę wizualną.

   Odpowiedzi Olgi lecą jako `.children`, czyli zagnieżdżone komentarze —
   dostają wcięcie i inne tło, żeby na pierwszy rzut oka było widać, że to
   odpowiedź, a nie kolejna opinia klientki. */

#reviews .woocommerce-Reviews-title {
    font-family: var(--font-heading, inherit);
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.2;
    margin: 0 0 22px;
}

#reviews .commentlist {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#reviews .commentlist > li.review { margin: 0; }

#reviews .comment_container {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--color-border, #C6C4D8);
    border-radius: var(--radius-xl, 20px);
    padding: 20px 22px;
}

#reviews .comment_container img.avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    /* Domyślny „mystery man" z Gravatara jest szarym prostokątem — przygaszamy
       go i podkładamy kolor marki, żeby nie ciągnął wzroku bardziej niż treść. */
    background: var(--brand-50, #f3eff5);
    object-fit: cover;
}

#reviews .comment-text { flex: 1 1 auto; min-width: 0; }

#reviews .comment-text .star-rating {
    color: var(--brand-primary, #643B81);
    font-size: 15px;
    float: none;
    margin: 0 0 6px;
}

#reviews .comment-text p.meta {
    font-size: 14px;
    color: var(--color-text-muted, #413B4D);
    margin: 0 0 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}

#reviews .comment-text p.meta .woocommerce-review__author {
    color: var(--color-text, #0B1220);
    font-size: 15px;
}

#reviews .comment-text .woocommerce-review__verified {
    font-style: normal;
    font-size: 12px;
    letter-spacing: .03em;
    padding: 2px 8px;
    border-radius: var(--radius-pill, 9999px);
    background: var(--brand-50, #f3eff5);
    color: var(--brand-700, #46295a);
}

#reviews .comment-text .woocommerce-review__dash { display: none; }

#reviews .comment-text .description p { margin: 0 0 10px; }
#reviews .comment-text .description p:last-child { margin-bottom: 0; }

/* Odpowiedź Instytutu — wcięcie i inne tło zamiast kolejnej białej karty. */
#reviews .commentlist .children {
    list-style: none;
    margin: 14px 0 0;
    padding: 0 0 0 34px;
}

#reviews .commentlist .children .comment_container {
    background: var(--brand-50, #f3eff5);
    border-color: transparent;
    border-left: 3px solid var(--brand-300, #b29dc0);
    border-radius: var(--radius-lg, 12px);
}

@media (max-width: 600px) {
    #reviews .commentlist .children { padding-left: 14px; }
    #reviews .comment_container { padding: 16px; gap: 12px; }
}

/* ——— formularz opinii ——— */

#reviews #review_form_wrapper {
    background: #fff;
    border: 1px solid var(--color-border, #C6C4D8);
    border-radius: var(--radius-xl, 20px);
    padding: 26px 28px;
}

#reviews .comment-reply-title {
    display: block;
    font-family: var(--font-heading, inherit);
    font-size: 22px;
    line-height: 1.25;
    margin: 0 0 6px;
}

#reviews .comment-notes,
#reviews .required-field-message {
    font-size: 14px;
    color: var(--color-text-muted, #413B4D);
    margin: 0 0 20px;
}

#reviews .comment-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--color-text-muted, #413B4D);
    margin: 0 0 7px;
}

#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form textarea {
    width: 100%;
    padding: 12px 16px;
    font: inherit;
    font-size: 15px;
    color: var(--color-text, #0B1220);
    background: #fff;
    border: 1px solid var(--color-border, #C6C4D8);
    border-radius: var(--radius-md, 8px);
}

#reviews .comment-form textarea { min-height: 130px; resize: vertical; }

#reviews .comment-form input:focus-visible,
#reviews .comment-form textarea:focus-visible {
    outline: 2px solid var(--brand-primary, #643B81);
    outline-offset: 1px;
}

#reviews .comment-form > p,
#reviews .comment-form > div { margin: 0 0 18px; }

/* Gwiazdki wyboru oceny — Woo rysuje je znakami z własnego fontu w <a>. */
#reviews .comment-form-rating .stars a {
    color: var(--brand-300, #b29dc0);
    transition: color .15s ease;
}
#reviews .comment-form-rating .stars:hover a,
#reviews .comment-form-rating .stars.selected a.active,
#reviews .comment-form-rating .stars.selected a:not(.active) {
    color: var(--brand-primary, #643B81);
}

#reviews .comment-form-cookies-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
}
#reviews .comment-form-cookies-consent label {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
}
#reviews .comment-form-cookies-consent input { margin-top: 3px; }

#reviews .form-submit { margin-bottom: 0; }

#reviews .comment-form input.submit {
    display: inline-block;
    padding: 14px 30px;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    color: var(--brand-on-primary, #fff);
    background: var(--brand-primary, #643B81);
    border: 0;
    border-radius: var(--radius-pill, 9999px);
    cursor: pointer;
}
#reviews .comment-form input.submit:hover { background: var(--brand-600, #55326e); }

#reviews .woocommerce-noreviews {
    font-size: 15px;
    color: var(--color-text-muted, #413B4D);
    background: var(--brand-50, #f3eff5);
    border-radius: var(--radius-lg, 12px);
    padding: 16px 20px;
    margin: 0 0 28px;
}

/* ⚠️ Domyślne reguły Woo dla recenzji są bardzo specyficzne
   (`.woocommerce #reviews #comments ol.commentlist li .comment-text`) i nie da
   się ich pokryć samym `#reviews …`. Stąd poniższy blok o tej samej długości
   selektora — bez niego karta opinii ma DWIE ramki (zewnętrzną naszą i
   wewnętrzną Woo), a awatar wypada poza kartę, bo Woo ustawia go absolutnie. */

.woocommerce #reviews #comments ol.commentlist li img.avatar,
.woocommerce-page #reviews #comments ol.commentlist li img.avatar {
    position: static;
    float: none;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    background: var(--brand-50, #f3eff5);
    border-radius: 50%;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text,
.woocommerce-page #reviews #comments ol.commentlist li .comment-text {
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    background: transparent;
}

.woocommerce #reviews #comments ol.commentlist li,
.woocommerce-page #reviews #comments ol.commentlist li {
    margin: 0;
    padding: 0;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta,
.woocommerce-page #reviews #comments ol.commentlist li .comment-text p.meta {
    font-size: 14px;
    margin: 0 0 10px;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .star-rating,
.woocommerce-page #reviews #comments ol.commentlist li .comment-text .star-rating {
    float: none;
    margin: 0 0 6px;
}

/* ——— zdjęcie na karcie produktu ————————————————————————————————————————
   Galeria Woo skaluje obrazek do szerokości kolumny bez żadnego ograniczenia
   wysokości. Przy okładkach w pionie (kurs, e-book) zdjęcie potrafiło urosnąć
   na kilka ekranów i zepchnąć cenę oraz przycisk poniżej pierwszego widoku.
   Ograniczamy oba wymiary i wyśrodkowujemy — proporcje zostają. */
.woocommerce div.product .woocommerce-product-gallery {
    max-width: 520px;
    /* Dosunięte do PRAWEJ krawędzi kolumny (decyzja Bartka 25.08.2026) — bliżej
       tekstu po prawej, zamiast wisieć w środku pustej kolumny. */
    margin-inline: auto 0;
}
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img {
    max-height: 620px;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    object-fit: contain;
}
/* Miniatury pod zdjęciem głównym nie mogą dziedziczyć limitu wysokości. */
.woocommerce div.product .flex-control-thumbs img { max-height: none; }

/* ⚠️ ZDJĘCIA PRODUKTÓW — KWADRAT KADROWANY OD GÓRY.
   Zdjęcia sylwetkowe (mentoring z Olgą) są w poziomie i przy proporcji 4:3
   ucinało im głowę — kadr łapał środek kadru, czyli tors. Kwadrat z kotwicą
   przy GÓRNEJ krawędzi trzyma twarz w kadrze.
   ⚠️ Okładki książek i e-booków są PIONOWE — `cover` przyciąłby im dół, więc
   na stronie produktu zostają przy `contain` (klasa `.in-prod-okladka`
   ustawiana w karcie produktu). 20.08.2026 */
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    max-height: none;
    object-fit: cover;
    object-position: center top;
    border-radius: 18px;
}
.woocommerce div.product .flex-control-thumbs img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
}

/* ══════════════════════════════════════════════════════════════════════════
   WYBÓR WARIANTU JAKO LISTA WIERSZY
   ──────────────────────────────────────────────────────────────────────────
   Rozwijana lista pokazuje jedną pozycję naraz — przy trzech pakietach po
   kilkaset złotych klient nie widzi ani tego, ile ma opcji, ani czym się
   różnią cenami, dopóki jej nie rozwinie.

   ⚠️ <select> WooCommerce ZOSTAJE w kodzie strony, tylko go chowamy. To on jest
   polem formularza i na jego zdarzeniu `change` wisi cała mechanika wariantów
   (cena, zdjęcie, przycisk, dostępność). Wiersze tylko go przestawiają
   — patrz assets/js/warianty.js.

   Chowamy WYŁĄCZNIE listy atrybutów (`name` zaczyna się od `attribute_`).
   W tej samej tabeli wtyczka sn-gra-terminy dokłada wiersz z wyborem terminu
   gry i on ma zostać zwykłą listą.
   21.08.2026
   ══════════════════════════════════════════════════════════════════════════ */
.woocommerce div.product form.cart .variations select[name^="attribute_"] {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden;
}

/* Tabela wariantów przestaje być tabelą: etykieta idzie NAD listę, a nie obok.
   Przy nazwach w rodzaju „Pakiet kwartalny · 10 sesji" kolumna z podpisem
   zjadała jedną trzecią szerokości i wiersze robiły się ciasne. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    text-align: left;
}
.woocommerce div.product form.cart table.variations tr + tr { margin-top: 22px; }
.woocommerce div.product form.cart table.variations th.label label {
    display: block;
    margin: 0 0 10px;
    font-family: var(--font-body, sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-primary, #643B81);
}

.in-war { display: grid; gap: 10px; margin: 0; }

.in-war-poz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 15px 20px;
    font-family: var(--font-body, sans-serif);
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    color: var(--color-text, #0B1220);
    background: #fff;
    border: 1px solid var(--color-border, #C6C4D8);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.in-war-poz:hover { border-color: var(--brand-primary, #643B81); }
.in-war-poz:focus-visible {
    outline: 2px solid var(--brand-primary, #643B81);
    outline-offset: 2px;
}

/* Wybrany wiersz: obwódka w kolorze marki podbita cieniem wewnętrznym.
   `box-shadow: inset` zamiast grubszej ramki — grubsza ramka przesuwałaby
   treść wiersza o 1 px przy każdym kliknięciu. */
.in-war-poz.is-wybrany {
    border-color: var(--brand-primary, #643B81);
    box-shadow: inset 0 0 0 1px var(--brand-primary, #643B81);
    background: var(--brand-50, #F2F1F6);
}

.in-war-n { font-weight: 600; }
.in-war-c {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand-primary, #643B81);
    white-space: nowrap;
}
.in-war-c del { opacity: .55; font-weight: 400; margin-right: 6px; }
.in-war-c ins { text-decoration: none; }

.in-war-poz.is-niedostepny {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(1);
}

/* „Wyczyść" ma sens przy rozwijanej liście; przy wierszach wybór kasuje się
   powtórnym kliknięciem, więc odnośnik schodzi do roli przypisu. */
.woocommerce div.product form.cart .variations a.reset_variations {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--color-text-muted, #413B4D);
}

@media (max-width: 480px) {
    .in-war-poz { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ── Wiersz „Termin" gry (wtyczka sn-gra-terminy) ─────────────────────────
   Wtyczka wstrzykuje własny wiersz do tej samej tabeli i podkłada pod niego
   szare tło — miało odróżniać go od reszty, gdy tabela była tabelą. Po
   rozłożeniu wariantów na wiersze zostaje z tego szara plama pod polem.
   Zdejmujemy ją, a samo pole ubieramy jak nasze wiersze wariantów. */
/* ⚠️ Selektor musi być DŁUŻSZY niż w tamtej wtyczce. Ona też stawia
   `!important`, a swój <style> drukuje w kodzie strony — czyli PÓŹNIEJ niż nasz
   arkusz. Przy równej szczegółowości wygrywa późniejszy, więc krótkie
   `#sn-gra-termin-row td` (nawet z !important) przegrywało. */
.woocommerce div.product form.cart table.variations tr#sn-gra-termin-row th,
.woocommerce div.product form.cart table.variations tr#sn-gra-termin-row td {
    background-color: transparent !important;
}
/* Samo pole chowamy — termin też wybiera się wierszami (assets/js/warianty.js).
   Zostaje w kodzie strony, bo to ono jedzie w formularzu i to jego pilnuje
   walidacja wtyczki. */
#sn_gra_termin {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden;
}

/* Wiersze z dwuwierszowym opisem (termin gry): tytuł nad szczegółami. */
.in-war--opis .in-war-poz {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.in-war-sub {
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-muted, #413B4D);
}

/* Odnośnik „Wyczyść" chowamy. Miał sens przy rozwijanej liście, gdzie nie da
   się „odklikać" wyboru; w wierszach kolejne kliknięcie w zaznaczony wiersz
   sam wybór cofa (patrz assets/js/warianty.js). Zostawiony wchodził w cenę,
   bo siedzi w tej samej komórce co ostatnia lista wariantów. */
.woocommerce div.product form.cart table.variations { margin: 0 0 14px; }
/* ⚠️ Bez prefiksu `.woocommerce div.product`. Odnośnik stoi wprost w <form>,
   a na części kart produktów (np. gry) formularz w ogóle nie ma nad sobą
   kontenera z klasą `.woocommerce` — dłuższy selektor po prostu tam nie trafiał
   i „Wyczyść" dalej się pokazywało. */
form.variations_form a.reset_variations { display: none; }

/* ── Wyprzedany wariant ───────────────────────────────────────────────────
   WooCommerce zostawia wyprzedany wariant na liście opcji i blokuje dopiero
   przycisk zakupu — klient klikał więc w wiersz i dopiero wtedy dowiadywał
   się, że nie ma czego kupić. Wyszarzamy go od razu, tak samo jak wyprzedany
   pakiet w cenniku na podstronach.
   Zgłoszone przez Bartka 21.08.2026 */
.in-war-poz.is-brak {
    cursor: not-allowed;
    color: var(--color-text-muted, #413B4D);
    background: var(--brand-50, #F2F1F6);
    border-color: var(--color-border, #C6C4D8);
}
.in-war-poz.is-brak:hover { border-color: var(--color-border, #C6C4D8); }
.in-war-poz.is-brak .in-war-n,
.in-war-poz.is-brak .in-war-c { opacity: .55; }
.in-war-poz.is-brak .in-war-c { color: var(--color-text-muted, #413B4D); }

.in-war-tag {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 9px;
    border-radius: var(--radius-pill, 9999px);
    background: var(--brand-200, #C6C4D8);
    color: var(--color-text, #0B1220);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: middle;
    opacity: 1;
}

/* ⚠️ LUPKA NAD MENU. WooCommerce daje `.woocommerce-product-gallery__trigger`
   `z-index: 99`, a przyklejony nagłówek motywu ma 60 (`szkielet.css`) — więc
   lupka przebijała się NAD rozwiniętym menu. Zbijamy ją poniżej nagłówka;
   nad samym zdjęciem i tak zostaje, bo zdjęcie nie tworzy własnego kontekstu. */
/* ⚠️ SELEKTOR MUSI DORÓWNAĆ WOOCOMMERCE. Pierwsza wersja tej reguły miała
   `.woocommerce div.product .…__trigger` i PRZEGRYWAŁA, mimo że nasz plik
   ładuje się później: WooCommerce celuje w `.woocommerce div.product
   div.images .…__trigger`, czyli szczegółowiej, a szczegółowość bije
   kolejność. Powtarzamy ich selektor i dokładamy jedną klasę. */
.woocommerce div.product div.images.woocommerce-product-gallery .woocommerce-product-gallery__trigger { z-index: 2; }

/* ══════════════════════════════════════════════════════════════════════════
   „PODOBNE PRODUKTY" NA TELEFONIE — TAŚMA PRZEWIJANA W BOK
   ──────────────────────────────────────────────────────────────────────────
   Ten sam wzorzec co lista numeroterapeutek (`motyw.css`, blok `.in-people`):
   siatka zamienia się w elastyczny pas, przewijanie zatrzaskuje się na
   kartach, pasek przewijania schowany, a taśma wychodzi poza margines strony,
   żeby karty dojeżdżały do samej krawędzi ekranu.

   ⚠️ `grid-template-columns: none` jest konieczne — `.in-grid3` ustawia trzy
   kolumny, a sama zmiana `display` na `flex` NIE kasuje tej własności i przy
   niektórych przeglądarkach zostawia dziwne szerokości.

   ⚠️ `min-width: 0` na karcie — element w układzie elastycznym ma domyślnie
   `min-width: auto` i nie zejdzie poniżej szerokości własnej treści, przez co
   długie tytuły rozpychały karty ponad zadane 78%.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .in-related .in-grid3 {
        display: flex;
        grid-template-columns: none;
        flex-wrap: nowrap;
        gap: 16px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-inline: calc(-1 * var(--in-gut));
        padding-inline: var(--in-gut);
        scroll-padding-inline: var(--in-gut);
        scrollbar-width: none;
    }
    .in-related .in-grid3::-webkit-scrollbar { display: none; }

    /* 78% zamiast 100%: zza krawędzi wystaje kawałek następnej karty, inaczej
       nie widać, że jest co przewijać. */
    .in-related .in-grid3 > .in-card {
        flex: 0 0 78%;
        min-width: 0;
        scroll-snap-align: start;
    }
}

/* ⚠️ PUSTY WIERSZ POD WYSYŁKĄ PRZY KURIERZE.
   Wtyczka InPost wpina się w `woocommerce_review_order_after_shipping` i rysuje
   swój wiersz ZAWSZE, niezależnie od wybranej metody — a wybierak paczkomatu
   wypełnia go tylko przy paczkomacie. Zmierzone na kasie Instytutu:
     kurier    → <tr class="shipping paczkomaty-shipping"><td colspan="2"> </td></tr>
     paczkomat → ten sam wiersz, ale z <span id="paczkomat_id_wrapper"> w środku
   Czyli różnica to OBECNOŚĆ ELEMENTU w komórce, nie nazwa metody wysyłki.

   ⚠️ Celowo NIE sprawdzamy identyfikatora metody. Trasy pochodzą z Flexible
   Shipping (`flexible_shipping_single:6/8/9`), a wtyczka InPost decyduje po
   metadanych trasy, nie po jej nazwie — warunek na identyfikatorze rozjechałby
   się przy pierwszej zmianie konfiguracji wysyłki.

   ⚠️ `:empty` tu NIE zadziała: komórka zawiera biały znak, więc formalnie
   nie jest pusta. Dlatego pytamy o brak dziecka-elementu. */
tr.paczkomaty-shipping:not(:has(td > *)) { display: none; }