/* =========================================================================
PEPTAGEN LAB — WooCommerce (styl minimalistyczny, profesjonalny)
Hairline zamiast grubych ramek, miękkie cienie przy hover.
========================================================================= */
/* --- Siatka produktów ------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid !important;
gap: var(--space-5);
grid-template-columns: repeat(2, 1fr);
margin: 0 0 var(--space-8);
padding: 0;
list-style: none;
}
@media (min-width: 720px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); } }
/* WooCommerce dodaje clearfix ::before/::after — w gridzie stają się one
komórkami i tworzą puste luki. Wyłączamy je. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product,
.woocommerce ul.products li.product::before { width: auto !important; margin: 0 !important; float: none !important; }
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last { clear: none !important; }
.woocommerce ul.products li.product {
position: relative;
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
box-shadow: none;
padding: var(--space-4);
display: flex; flex-direction: column;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
text-align: left;
}
.woocommerce ul.products li.product:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.woocommerce ul.products li.product img { border-radius: var(--radius-md); margin-bottom: var(--space-4); background: var(--color-bg-alt); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-400);
color: var(--pep-ink); padding: 0; margin: 0 0 var(--space-2);
}
.woocommerce ul.products li.product .price {
font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--color-text); font-size: var(--fs-500);
margin-bottom: var(--space-4); display: block; font-variant-numeric: tabular-nums;
}
.woocommerce ul.products li.product .price del { color: var(--color-text-muted); font-weight: 400; font-size: var(--fs-400); opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .star-rating { font-size: 0.8em; margin-bottom: var(--space-3); color: var(--pep-gold-500); }
.woocommerce ul.products li.product .button { margin-top: auto; }
/* Odznaka promocji — subtelna, płaska */
.woocommerce span.onsale {
background: var(--pep-beige-100); color: var(--pep-gold-700);
border: 0; border-radius: var(--radius-pill);
font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-300);
min-height: auto; min-width: auto; padding: 0.3em 0.75em; line-height: 1.4;
top: var(--space-3); left: var(--space-3); right: auto; margin: 0;
}
/* --- Przyciski Woo → styl motywu ------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: 0;
background: var(--color-primary); color: #fff;
border: 1px solid transparent; border-radius: var(--radius-md);
box-shadow: none;
padding: 0.72em 1.3em;
transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--color-primary-hover); color: #fff; box-shadow: var(--shadow-md); transform: translateY(-1px); }
/* Wariant „outline" dla przycisków drugorzędnych Woo (np. Wyczyść) */
.woocommerce a.button.wc-backward,
.woocommerce .cart .button[name="update_cart"] {
background: #fff; color: var(--color-primary); border-color: var(--color-line-strong);
}
.woocommerce a.button.wc-backward:hover,
.woocommerce .cart .button[name="update_cart"]:hover { background: var(--pep-beige-100); color: var(--pep-gold-700); box-shadow: none; transform: none; }
.woocommerce .button.added::after { margin-left: 0.4em; }
/* --- Strona produktu -------------------------------------------------- */
.woocommerce div.product .product_title { font-family: var(--font-display); letter-spacing: var(--tracking-tight); }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--color-text); font-family: var(--font-display); font-weight: var(--fw-bold); }
.woocommerce div.product .woocommerce-tabs ul.tabs { border: 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom: 1px solid var(--color-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--color-primary); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--color-text-soft); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--color-text); }
.woocommerce .quantity input.qty { border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); padding: 0.5em; }
/* --- Komunikaty ------------------------------------------------------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
border-top: 3px solid var(--color-primary);
border-radius: var(--radius-md);
background: var(--color-bg-alt);
font-family: var(--font-body);
box-shadow: none;
}
.woocommerce-message { border-top-color: var(--pep-success); }
.woocommerce-error { border-top-color: var(--pep-danger); }
/* --- Pola formularzy -------------------------------------------------- */
/* Uwaga na specyficzność: WooCommerce styluje pola przez
`.woocommerce form .form-row .input-text` (3 klasy). Sam `textarea`
(2 klasy) przegrywał z tą regułą i pole uwag dostawało ciemną,
obcą ramkę — stąd wariant `textarea.input-text`. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row textarea.input-text,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container--default .select2-selection--single {
border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
padding: 0.68em 0.85em; font-family: var(--font-body);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row textarea.input-text:focus,
.woocommerce form .form-row select:focus { border-color: var(--color-primary); box-shadow: var(--shadow-focus); outline: none; }
/* --- Koszyk / tabele -------------------------------------------------- */
.woocommerce table.shop_table { border: 1px solid var(--color-line); border-radius: var(--radius-lg); border-collapse: separate; overflow: hidden; }
.woocommerce table.shop_table th { font-family: var(--font-display); font-weight: var(--fw-semibold); }
.woocommerce-cart-form .button, .wc-proceed-to-checkout .button { font-weight: var(--fw-semibold); }
/* --- Katalog: pasek sortowania / wyników ----------------------------- */
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { color: var(--color-text-muted); font-size: var(--fs-300); }
.woocommerce .woocommerce-ordering select { border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); padding: 0.4em 0.6em; }
/* =========================================================================
Layout sklepu: kontener + opcjonalny sidebar (widgety filtrów)
========================================================================= */
.shop-layout { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) {
.shop-layout:has(.shop-sidebar) { grid-template-columns: minmax(0, 1fr) 280px; }
}
.shop-sidebar .widget { border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); background: #fff; }
.shop-sidebar .widget-title, .shop-sidebar .widget h4 { font-family: var(--font-display); font-size: var(--fs-400); margin: 0 0 var(--space-3); }
.shop-sidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.shop-sidebar a { color: var(--color-text-soft); }
.shop-sidebar a:hover { color: var(--color-text); }
/* Tytuł strony katalogu i breadcrumb */
.woocommerce-products-header { margin-bottom: var(--space-6); }
.woocommerce-products-header__title { margin-bottom: var(--space-2); }
.woocommerce .woocommerce-breadcrumb {
font-size: var(--fs-300); color: var(--color-text-muted);
margin: 0 0 var(--space-4); font-family: var(--font-body);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--color-text-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--pep-gold-700); }
.breadcrumb-sep { margin: 0 0.45em; opacity: 0.55; }
/* Opis kategorii */
.woocommerce .term-description { max-width: 68ch; color: var(--color-text-soft); }
/* =========================================================================
Paginacja (katalog)
========================================================================= */
.woocommerce nav.woocommerce-pagination { margin-top: var(--space-6); }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
display: grid; place-items: center;
min-width: 40px; height: 40px; padding: 0 0.6em;
border: 1px solid var(--color-line-strong); border-radius: var(--radius-md);
font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-400);
color: var(--color-text-soft); background: #fff;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--pep-beige-050); color: var(--color-text); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
/* =========================================================================
Karta produktu (single product)
========================================================================= */
.single-product div.product { display: block; }
.woocommerce div.product div.images { margin-bottom: var(--space-6); }
.woocommerce div.product div.images img { border-radius: var(--radius-lg); }
.woocommerce div.product div.images .flex-control-thumbs { margin-top: var(--space-3); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto !important; float: none !important; }
.woocommerce div.product div.images .flex-control-thumbs img { border-radius: var(--radius-sm); border: 1px solid var(--color-line); cursor: pointer; opacity: 0.7; transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover { opacity: 1; border-color: var(--pep-beige-500); }
.woocommerce div.product .summary .woocommerce-product-details__short-description { color: var(--color-text-soft); }
.woocommerce div.product .summary .price { font-size: var(--fs-600); margin-bottom: var(--space-4); }
.woocommerce div.product .summary form.cart { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; margin-bottom: var(--space-5); }
.woocommerce div.product .summary form.cart .button { padding-block: 0.9em; }
.woocommerce div.product .product_meta { font-size: var(--fs-300); color: var(--color-text-muted); padding-top: var(--space-4); border-top: 1px solid var(--color-line); display: grid; gap: var(--space-1); }
.woocommerce div.product .product_meta a { color: var(--pep-gold-700); }
/* Nota badawcza */
.product-disclaimer {
display: flex; align-items: flex-start; gap: var(--space-3);
background: var(--pep-beige-050); border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
font-size: var(--fs-300); color: var(--color-text-soft);
margin-bottom: var(--space-4);
}
.product-disclaimer svg { flex: none; color: var(--pep-gold-700); margin-top: 2px; }
/* Zakładki opisu */
.woocommerce div.product .woocommerce-tabs { margin-top: var(--space-8); }
.woocommerce div.product .woocommerce-tabs .panel { margin-top: var(--space-5); color: var(--color-text-soft); }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: var(--fs-600); }
/* Produkty powiązane / up-sells */
.woocommerce .related > h2, .woocommerce .upsells > h2 {
font-size: var(--fs-700); text-align: center; margin: var(--space-10) 0 var(--space-6);
}
/* Recenzje */
.woocommerce #reviews #comments ol.commentlist { padding: 0; }
.woocommerce #reviews #comments ol.commentlist li .comment-text {
border: 1px solid var(--color-line); border-radius: var(--radius-md);
}
.woocommerce #reviews #comments ol.commentlist li img.avatar { border-radius: var(--radius-pill); border: 0; background: var(--pep-beige-100); }
.woocommerce p.stars a { color: var(--pep-gold-500); }
/* =========================================================================
Steppery ilości (+/−)
========================================================================= */
.quantity.has-steppers { display: inline-flex; align-items: stretch; border: 1px solid var(--color-line-strong); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.quantity.has-steppers input.qty { border: 0 !important; border-radius: 0; width: 3.2em; text-align: center; font-family: var(--font-body); font-weight: 600; -moz-appearance: textfield; }
.quantity.has-steppers input.qty::-webkit-outer-spin-button,
.quantity.has-steppers input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-step {
border: 0; background: var(--pep-beige-050); color: var(--color-text);
width: 2.4em; font-size: var(--fs-400); font-weight: 600; cursor: pointer;
transition: background var(--dur) var(--ease);
}
.qty-step:hover { background: var(--pep-beige-100); }
/* =========================================================================
Koszyk
========================================================================= */
.woocommerce-cart .shop_table img { border-radius: var(--radius-sm); }
.woocommerce-cart table.cart td.actions .coupon .input-text {
border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
padding: 0.6em 0.85em; width: 150px;
}
.woocommerce .cart_totals {
border: 1px solid var(--color-line); border-radius: var(--radius-lg);
padding: var(--space-5);
}
.woocommerce .cart_totals h2 { font-size: var(--fs-600); margin-top: 0; }
.woocommerce .cart_totals table.shop_table { border: 0; }
.wc-proceed-to-checkout .checkout-button { display: flex; justify-content: center; }
.woocommerce-cart .cross-sells > h2 { font-size: var(--fs-600); margin: var(--space-8) 0 var(--space-5); }
/* Pusty koszyk */
.cart-empty.woocommerce-info { text-align: center; }
.woocommerce .return-to-shop { text-align: center; margin-top: var(--space-5); }
/* =========================================================================
Checkout
========================================================================= */
.woocommerce-checkout h3 { font-size: var(--fs-600); margin-top: var(--space-6); }
.woocommerce-checkout #order_review_heading { margin-top: var(--space-8); }
.woocommerce-checkout #order_review {
border: 1px solid var(--color-line); border-radius: var(--radius-lg);
padding: var(--space-5);
}
.woocommerce-checkout #order_review table.shop_table { border: 0; }
.woocommerce-checkout #payment { background: var(--pep-beige-050); border-radius: var(--radius-md); }
.woocommerce-checkout #payment div.payment_box { background: #fff; border-radius: var(--radius-sm); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce form .form-row label { font-size: var(--fs-300); font-weight: var(--fw-medium); color: var(--color-text-soft); }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--pep-danger); }
/* Strona podziękowania */
.woocommerce-order .woocommerce-thankyou-order-received {
font-family: var(--font-display); font-size: var(--fs-600); font-weight: var(--fw-semibold);
color: var(--pep-success); margin-bottom: var(--space-5);
}
.woocommerce ul.order_details {
display: flex; flex-wrap: wrap; gap: var(--space-4);
border: 1px solid var(--color-line); border-radius: var(--radius-lg);
padding: var(--space-5); margin: 0 0 var(--space-6);
}
.woocommerce ul.order_details li { border: 0; padding: 0 var(--space-5) 0 0; margin: 0; }
/* =========================================================================
KOSZYK — układ dwukolumnowy z przyklejonym podsumowaniem
========================================================================= */
@media (min-width: 1000px) {
.woocommerce-cart .woocommerce {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: var(--space-6);
align-items: start;
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .shipping-progress,
.woocommerce-cart .woocommerce > .cross-sells,
.woocommerce-cart .woocommerce > .recently-viewed { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
.woocommerce-cart .cart-collaterals { grid-column: 2; position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }
}
/* Tabela koszyka jako lista kart.
overflow:visible cofa `overflow:hidden` z .shop_table (potrzebne tam do
zaokrąglenia rogów) — inaczej obcinana jest prawa ramka przycisku
„Zaktualizuj koszyk", który stoi przy samej krawędzi wiersza akcji. */
.woocommerce-cart table.cart { border: 0; overflow: visible; }
.woocommerce-cart table.cart thead { display: none; }
.woocommerce-cart table.cart tbody tr.cart_item {
display: grid;
grid-template-columns: 92px minmax(0, 1fr) auto;
grid-template-areas: "img info remove" "img qty price";
gap: var(--space-2) var(--space-4);
align-items: center;
padding: var(--space-4);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
margin-bottom: var(--space-3);
background: #fff;
}
.woocommerce-cart table.cart tbody tr.cart_item td { border: 0; padding: 0; }
.woocommerce-cart table.cart td.product-thumbnail { grid-area: img; }
.woocommerce-cart table.cart td.product-thumbnail img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--radius-md); }
.woocommerce-cart table.cart td.product-name { grid-area: info; font-family: var(--font-display); font-weight: var(--fw-semibold); }
.woocommerce-cart table.cart td.product-name a { color: var(--color-text); }
.woocommerce-cart table.cart td.product-name .variation { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-300); color: var(--color-text-muted); margin: var(--space-1) 0 0; }
.woocommerce-cart table.cart td.product-quantity { grid-area: qty; }
.woocommerce-cart table.cart td.product-subtotal { grid-area: price; justify-self: end; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-500); font-variant-numeric: tabular-nums; }
.woocommerce-cart table.cart td.product-price { display: none; }
.woocommerce-cart table.cart td.product-remove { grid-area: remove; justify-self: end; align-self: start; }
.woocommerce-cart table.cart td.product-remove a.remove {
width: 30px; height: 30px; line-height: 28px;
border-radius: var(--radius-pill);
background: var(--pep-beige-050); color: var(--color-text-muted) !important;
font-size: 1.1rem;
}
.woocommerce-cart table.cart td.product-remove a.remove:hover { background: var(--pep-danger); color: #fff !important; }
/* Wiersz akcji: kupon + aktualizacja */
.woocommerce-cart table.cart tr:not(.cart_item) td.actions {
display: flex; flex-wrap: wrap; gap: var(--space-3);
align-items: center; justify-content: space-between;
border: 0; padding: var(--space-4) 0 0;
}
.woocommerce-cart table.cart td.actions .coupon { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.woocommerce-cart table.cart td.actions .coupon label { display: none; }
/* Podsumowanie */
.woocommerce-cart .cart_totals { background: var(--pep-beige-050); border-color: transparent; }
.woocommerce-cart .cart_totals table.shop_table { width: 100%; }
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
background: transparent; padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-line);
vertical-align: top;
}
/* Etykieta po lewej, kwota po prawej — inaczej kolumny zlewają się ze sobą.
Etykieta może się zawijać, kwota nie: przy dużych sumach („28 054,00 zł")
złamanie linii w środku liczby jest nieczytelne. */
.woocommerce-cart .cart_totals table.shop_table th {
width: 40%; text-align: left;
font-weight: var(--fw-medium); color: var(--color-text-soft);
}
.woocommerce-cart .cart_totals table.shop_table td {
text-align: right; font-variant-numeric: tabular-nums;
}
.woocommerce-cart .cart_totals .woocommerce-Price-amount,
.woocommerce-checkout #order_review .woocommerce-Price-amount,
.woocommerce-cart table.cart td.product-subtotal .woocommerce-Price-amount {
white-space: nowrap;
}
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td { border-bottom: 0; padding-top: var(--space-4); font-size: var(--fs-500); }
.woocommerce-cart .cart_totals tr.order-total th { align-self: center; }
.woocommerce-cart .cart_totals tr.order-total .amount { font-family: var(--font-display); font-weight: var(--fw-bold); }
/* „w tym X VAT" to dopisek, nie druga kwota w tej samej linii */
.woocommerce-cart .cart_totals .includes_tax,
.woocommerce-checkout #order_review .includes_tax {
display: block; margin-top: var(--space-1);
font-size: var(--fs-300); font-weight: 400;
color: var(--color-text-muted);
}
/* Lista metod dostawy bez punktorów i marginesów listy */
.woocommerce-cart .cart_totals ul#shipping_method,
.woocommerce-checkout #order_review ul#shipping_method {
list-style: none; margin: 0; padding: 0; text-align: right;
}
.woocommerce-cart .cart_totals ul#shipping_method li,
.woocommerce-checkout #order_review ul#shipping_method li { margin: 0 0 var(--space-1); }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .shipping-calculator-button { font-size: var(--fs-300); color: var(--color-text-muted); }
.wc-proceed-to-checkout { padding-top: var(--space-4) !important; }
.wc-proceed-to-checkout .checkout-button { padding-block: 0.95em !important; font-size: var(--fs-400) !important; }
@media (max-width: 560px) {
.woocommerce-cart table.cart tbody tr.cart_item {
grid-template-columns: 72px minmax(0, 1fr) auto;
}
.woocommerce-cart table.cart td.product-thumbnail img { width: 72px; height: 72px; }
}
/* =========================================================================
ZAMÓWIENIE (checkout) — formularz + przyklejone podsumowanie
========================================================================= */
@media (min-width: 1000px) {
/* Dwie kolumny: dane klienta | podsumowanie. Podsumowanie jest opakowane
w .checkout-aside (inc/woocommerce.php), więc nagłówek i tabela trzymają
się razem w jednej komórce siatki. */
.woocommerce-checkout form.checkout {
display: grid;
grid-template-columns: minmax(0, 1fr) 400px;
gap: var(--space-8);
align-items: start;
}
.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; }
.woocommerce-checkout form.checkout > .checkout-aside {
grid-column: 2;
position: sticky; top: calc(var(--header-h) + var(--space-4));
}
.woocommerce-checkout form.checkout .col2-set { display: grid; gap: var(--space-5); }
.woocommerce-checkout form.checkout .col2-set .col-1,
.woocommerce-checkout form.checkout .col2-set .col-2 { width: 100% !important; float: none !important; }
/* Clearfix .col2-set też stałby się elementem siatki (dwa puste rzędy
= dwie zbędne przerwy). Kasujemy TYLKO tutaj — poniżej 1000 px
kolumny WooCommerce nadal pływają i clearfix jest im potrzebny. */
.woocommerce-checkout form.checkout .col2-set::before,
.woocommerce-checkout form.checkout .col2-set::after {
content: none !important;
display: none !important;
}
}
.woocommerce-checkout .checkout-aside > #order_review_heading { margin: 0 0 var(--space-4); }
/* Pola adresowe: „imię/nazwisko" i „kod/miasto" obok siebie.
WooCommerce robi to floatami, które motyw zeruje — stąd własna siatka. */
@media (min-width: 600px) {
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 var(--space-4);
}
.woocommerce form .form-row-first { grid-column: 1; }
.woocommerce form .form-row-last { grid-column: 2; }
.woocommerce form .form-row-wide,
.woocommerce form .form-row.notes,
.woocommerce form .form-row.create-account { grid-column: 1 / -1; }
}
.woocommerce form .form-row { float: none !important; width: auto !important; margin: 0 0 var(--space-4); }
.woocommerce form .form-row label { display: block; margin-bottom: var(--space-1); }
.woocommerce form .form-row .woocommerce-input-wrapper { display: block; width: 100%; }
.woocommerce form .form-row abbr.required { border: 0; text-decoration: none; color: var(--pep-danger); }
.woocommerce form .form-row label.checkbox { display: flex; gap: var(--space-2); align-items: flex-start; }
.woocommerce-checkout #customer_details h3 { margin-top: 0; }
.woocommerce-checkout #order_review { background: var(--pep-beige-050); border-color: transparent; }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td { background: transparent; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); }
.woocommerce-checkout #order_review tr.order-total th,
.woocommerce-checkout #order_review tr.order-total td { border-bottom: 0; font-size: var(--fs-500); }
.woocommerce-checkout #order_review tr.order-total .amount { font-family: var(--font-display); font-weight: var(--fw-bold); }
/* Tabela podsumowania: nazwa po lewej, kwota po prawej */
.woocommerce-checkout #order_review table.shop_table { width: 100%; }
.woocommerce-checkout #order_review table.shop_table th.product-name,
.woocommerce-checkout #order_review table.shop_table td.product-name { text-align: left; }
.woocommerce-checkout #order_review table.shop_table th.product-total,
.woocommerce-checkout #order_review table.shop_table td.product-total,
.woocommerce-checkout #order_review tfoot td { text-align: right; font-variant-numeric: tabular-nums; }
.woocommerce-checkout #order_review tfoot th { text-align: left; font-weight: var(--fw-medium); color: var(--color-text-soft); }
.woocommerce-checkout #order_review thead th {
font-size: var(--fs-300); text-transform: uppercase; letter-spacing: var(--tracking-wide);
color: var(--color-text-muted); font-weight: var(--fw-medium);
}
.woocommerce-checkout #order_review td.product-name .product-quantity {
font-weight: var(--fw-semibold); color: var(--color-text-muted);
}
/* Metody płatności i dostawy to listy — bez punktorów i wcięcia */
.woocommerce-checkout #payment { margin-top: var(--space-4); }
.woocommerce-checkout #payment ul.payment_methods {
list-style: none; margin: 0; padding: var(--space-4) 0;
border-bottom: 1px solid var(--color-line);
}
/* WooCommerce dokleja do clearfix (::before/::after o display:table).
Gdy motyw robi z siatkę, te pseudoelementy STAJĄ SIĘ elementami
siatki: zajmują pierwszą kolumnę, przez co radio ląduje w drugiej
kolumnie, a etykieta spada do drugiego rzędu. Ten sam mechanizm dawał
wcześniej pustą lukę w siatce produktów. */
.woocommerce-checkout #payment ul.payment_methods > li::before,
.woocommerce-checkout #payment ul.payment_methods > li::after {
content: none !important;
display: none !important;
}
/* Radio i label to RODZEŃSTWO w , nie zagnieżdżenie. Gdyby label dostał
display:block/flex, spadłby pod radio.
Flex, nie grid: bramki płatności wstrzykują własny markup (ikony, spany),
a siatka o sztywnych torach wypchnęłaby taki element do kolejnego rzędu.
Flex po prostu go zmieści obok. */
.woocommerce-checkout #payment ul.payment_methods > li {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--space-1) var(--space-2);
margin: 0 0 var(--space-3);
}
.woocommerce-checkout #payment ul.payment_methods > li > label { flex: 1 1 auto; }
/* Opis metody zawsze od nowej linii, pełną szerokością. */
.woocommerce-checkout #payment ul.payment_methods > li > .payment_box { flex: 0 0 100%; }
.woocommerce-checkout #payment ul.payment_methods > li:last-child { margin-bottom: 0; }
.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"] { margin: 0; }
.woocommerce-checkout #payment ul.payment_methods label {
margin: 0; font-weight: var(--fw-medium); cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods label img { max-height: 24px; width: auto; }
.woocommerce-checkout #payment div.payment_box {
margin: var(--space-2) 0 0; padding: var(--space-3);
font-size: var(--fs-300); color: var(--color-text-soft);
}
.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }
.woocommerce-checkout #order_review ul#shipping_method li {
display: flex; gap: var(--space-2); align-items: center; justify-content: flex-end;
}
.woocommerce-checkout #order_review ul#shipping_method label { margin: 0; cursor: pointer; }
.woocommerce-checkout #payment div.form-row.place-order { padding: var(--space-4) 0 0; margin: 0; }
.woocommerce-checkout #place_order { width: 100%; padding-block: 0.95em !important; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: var(--fs-300); }
/* Pusty koszyk — czytelny stan */
.woocommerce .cart-empty {
text-align: center; font-size: var(--fs-500);
background: transparent; border-top: 0; padding: var(--space-8) 0 var(--space-4);
}
.woocommerce .cart-empty::before { display: none; }
.woocommerce .return-to-shop { text-align: center; margin-bottom: var(--space-10); }
/* =========================================================================
MOJE KONTO — układ oparty na gridzie (zamiast kruchych floatów Woo)
========================================================================= */
.woocommerce-account .woocommerce {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
align-items: start;
}
@media (min-width: 900px) {
.woocommerce-account:not(.woocommerce-account--logged-out) .woocommerce {
grid-template-columns: 264px minmax(0, 1fr);
gap: var(--space-8);
}
}
/* Neutralizacja floatów i szerokości z domyślnego CSS Woo */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
width: 100% !important;
float: none !important;
margin: 0 !important;
}
/* --- Nawigacja konta ---------------------------------------------------- */
.woocommerce-MyAccount-navigation {
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-3);
background: #fff;
position: sticky;
top: calc(var(--header-h) + var(--space-4));
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.woocommerce-MyAccount-navigation ul li a {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-400);
color: var(--color-text-soft);
text-decoration: none;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.woocommerce-MyAccount-navigation ul li a:hover { background: var(--pep-beige-050); color: var(--color-text); }
.woocommerce-MyAccount-navigation ul li.is-active a { background: var(--pep-ink); color: #fff; }
/* Wylogowanie wyróżnione na dole */
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--color-line);
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--pep-danger); }
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: #FBEDEC; color: var(--pep-danger); }
/* --- Treść konta -------------------------------------------------------- */
.woocommerce-MyAccount-content { color: var(--color-text-soft); min-width: 0; }
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { color: var(--color-text); margin-top: 0; }
.woocommerce-MyAccount-content mark,
.woocommerce-MyAccount-content strong { background: none; color: var(--color-text); font-weight: var(--fw-semibold); }
/* Tabela zamówień jako karty */
.woocommerce-account .woocommerce-orders-table { border: 0; display: block; }
.woocommerce-account .woocommerce-orders-table thead { display: none; }
.woocommerce-account .woocommerce-orders-table tbody { display: grid; gap: var(--space-3); }
.woocommerce-account .woocommerce-orders-table tbody tr {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-5);
background: #fff;
}
@media (min-width: 640px) {
/* 4 kolumny danych + osobna kolumna na akcję, żeby przycisk został
w tym samym wierszu, a nie zawijał się pod pierwszą komórkę */
.woocommerce-account .woocommerce-orders-table tbody tr {
grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
align-items: center;
}
}
.woocommerce-account .woocommerce-orders-table tbody td {
border: 0; padding: 0; text-align: left;
font-size: var(--fs-400); color: var(--color-text);
}
.woocommerce-account .woocommerce-orders-table td::before {
content: attr(data-title);
display: block;
font-family: var(--font-display); font-size: var(--fs-300); font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: var(--tracking-wide);
color: var(--color-text-muted);
margin-bottom: 3px;
}
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { grid-column: 1 / -1; }
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before { display: none; }
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button { width: 100%; justify-content: center; }
@media (min-width: 640px) {
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { grid-column: auto; }
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button { width: auto; }
}
/* Adresy */
.woocommerce-account .woocommerce-Addresses {
display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin: 0;
}
@media (min-width: 720px) { .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } }
.woocommerce-account .woocommerce-Address {
width: 100% !important; float: none !important;
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-5);
background: #fff;
}
.woocommerce-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.woocommerce-account .woocommerce-Address-title h2, .woocommerce-account .woocommerce-Address-title h3 { margin: 0; font-size: var(--fs-500); }
.woocommerce-account .woocommerce-Address-title .edit { color: var(--pep-gold-700); font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-300); }
.woocommerce-account address { font-style: normal; line-height: 1.7; color: var(--color-text-soft); }
/* Formularz danych konta */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin: var(--space-6) 0;
}
.woocommerce-account .woocommerce-EditAccountForm legend {
font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-500);
padding-inline: var(--space-2);
color: var(--color-text);
}
/* --- Logowanie i rejestracja -------------------------------------------- */
.woocommerce-account:not(.logged-in) .woocommerce {
max-width: 960px;
margin-inline: auto;
}
.woocommerce-account .u-columns.col2-set {
display: grid; gap: var(--space-5); grid-template-columns: 1fr; width: 100%;
}
@media (min-width: 820px) { .woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr 1fr; } }
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 { width: 100% !important; float: none !important; }
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin: 0;
background: #fff;
}
.woocommerce form.login .form-row,
.woocommerce form.register .form-row { padding: 0; margin-bottom: var(--space-4); }
.woocommerce form.login label,
.woocommerce form.register label {
display: block; margin-bottom: var(--space-1);
font-size: var(--fs-300); font-weight: var(--fw-medium); color: var(--color-text-soft);
}
.woocommerce form.login input.input-text,
.woocommerce form.register input.input-text { width: 100%; min-height: 48px; }
.woocommerce form.login .button,
.woocommerce form.register .button { width: 100%; justify-content: center; min-height: 48px; }
.woocommerce form.login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.woocommerce-LostPassword { margin: var(--space-3) 0 0; font-size: var(--fs-300); }
.woocommerce-privacy-policy-text { font-size: var(--fs-300); color: var(--color-text-muted); }
/* Nagłówki kolumn logowanie/rejestracja */
.woocommerce-account .u-columns h2 { font-size: var(--fs-600); margin-bottom: var(--space-4); }