/**
 * WooCommerce w stylistyce Systematica Hair.
 * Nadpisujemy domyślne style Woo tokenami motywu - bez własnych wartości kolorów.
 */

/* ---------------------------------------------------------- Lista produktów */

.woo .woocommerce-notices-wrapper:empty { display: none; }

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Woo dopina clearfixy przez ::before/::after - w gridzie zjadają komórki. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after,
.woocommerce div.product::before,
.woocommerce div.product::after { display: none !important; }

@media (min-width: 640px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) and (max-width: 1199px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } }

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	margin: 0 !important;
	padding: var(--space-sm);
	width: auto !important;
	float: none !important;
	background: var(--bg-surface);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	text-align: left;
}

.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-sm);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0 var(--space-2xs);
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	font-weight: 600;
	color: var(--text-primary);
}

.woo-card__short {
	margin: 0 0 var(--space-xs);
	padding: 0 var(--space-2xs);
	color: var(--text-secondary);
	font-size: var(--fs-body-sm);
}

.woocommerce ul.products li.product .price {
	padding: 0 var(--space-2xs);
	margin: auto 0 0;
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	font-weight: 700;
}
.woocommerce ul.products li.product .price del { color: var(--text-muted); font-weight: 400; }

/* Przyciski Woo = przyciski motywu */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-md) var(--space-lg);
	background: var(--accent);
	border-radius: var(--radius-sm);
	color: var(--text-on-accent);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1;
	text-transform: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover { background: var(--accent-hover); color: var(--text-on-accent); }

/* Cena i przycisk w jednym wierszu na dole karty - jak na ekranie Sklep. */
.woocommerce ul.products li.product {
	position: relative;
	padding-bottom: calc(var(--space-sm) + 44px);
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
	position: absolute;
	bottom: var(--space-sm);
}
.woocommerce ul.products li.product .price { left: var(--space-sm); }
.woocommerce ul.products li.product .button {
	right: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	font-size: var(--fs-body-sm);
}

.woocommerce a.button.wc-forward:not(.checkout-button),
.woocommerce .cart .button[name="update_cart"] {
	background: transparent;
	border: 1px solid var(--border-strong);
	color: var(--text-primary);
}

/* Sortowanie i licznik wyników */
.woocommerce .woocommerce-result-count { color: var(--text-muted); font-size: var(--fs-body-sm); }
.woocommerce .woocommerce-ordering select {
	padding: var(--space-xs) var(--space-sm);
	background: var(--bg-surface);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-sm);
}

/* Pasek zaufania */
.woo-trust { display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: center; }
.woo-trust__item { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); }

/* ----------------------------------------------------------- Karta produktu */

.woo-breadcrumb { margin-bottom: var(--space-lg); color: var(--text-muted); font-size: var(--fs-body-sm); }
.woo-breadcrumb a { color: var(--text-secondary); }

/* WooCommerce 11 dokłada własne tło przez style blokowe - zdejmujemy je. */
.woocommerce div.product {
	display: grid;
	gap: var(--space-2xl);
	background: transparent;
}
@media (min-width: 1024px) {
	.woocommerce div.product { grid-template-columns: 1fr 1fr; align-items: start; column-gap: var(--space-3xl); }
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells { grid-column: 1 / -1; }
}

.woocommerce div.product div.images { width: 100% !important; float: none !important; margin: 0 !important; }
.woocommerce div.product div.images img { border-radius: var(--radius-lg); }
.woocommerce div.product div.summary { width: 100% !important; float: none !important; margin: 0 !important; }

.woocommerce div.product .product_title { font-size: var(--fs-h2); margin-bottom: var(--space-sm); }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--text-primary);
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: 700;
	margin-bottom: var(--space-md);
}

.woocommerce div.product .woocommerce-product-details__short-description { color: var(--text-secondary); font-size: var(--fs-body-lg); }

.woocommerce .quantity .qty {
	width: 5rem;
	padding: var(--space-sm);
	background: var(--bg-surface);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-sm);
	text-align: center;
}

.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-lg) 0; }
.woocommerce div.product form.cart .button { flex: 1 1 12rem; }

.woo-meta-bar {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--border-default);
	color: var(--text-muted);
	font-size: var(--fs-body-sm);
}

.woocommerce div.product .product_meta { color: var(--text-muted); font-size: var(--fs-caption); }
.woocommerce div.product .product_meta a { color: var(--text-secondary); }

/* Zakładki opisu */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 var(--space-lg); display: flex; gap: var(--space-lg); border-bottom: 1px solid var(--border-default); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0; padding: 0;
	background: none;
	border: 0;
	border-radius: 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 {
	padding: var(--space-sm) 0;
	color: var(--text-secondary);
	font-weight: 600;
	border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--accent); border-bottom-color: var(--accent); }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: var(--fs-h3); }
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li { color: var(--text-secondary); }

.woocommerce .related > h2, .woocommerce .upsells > h2 { font-size: var(--fs-h3); margin-bottom: var(--space-lg); }

/* ------------------------------------------------------------------ Koszyk */

.woocommerce table.shop_table {
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	border-collapse: separate;
	overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--bg-elevated); color: var(--text-secondary); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .06em; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { padding: var(--space-md); border-color: var(--border-default); }
.woocommerce table.shop_table img { width: 72px; border-radius: var(--radius-sm); }

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--bg-elevated);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
}
.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading { font-size: var(--fs-h3); }

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: flex; width: 100%; }

/* ---------------------------------------------------- Kasa, konto, formularze */

.woocommerce form .form-row { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.woocommerce form .form-row label { color: var(--text-secondary); font-size: var(--fs-body-sm); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	padding: var(--space-sm) var(--space-md);
	background: var(--bg-surface);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	height: auto;
}
.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--accent);
}

.woocommerce-checkout .col2-set { display: grid; gap: var(--space-xl); }
@media (min-width: 1024px) { .woocommerce-checkout .col2-set { grid-template-columns: 1fr 1fr; } }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: auto !important; float: none !important; }

.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--accent-subtle); color: var(--accent); }

@media (min-width: 1024px) {
	.woocommerce-account .woocommerce-MyAccount-navigation { width: 26%; }
	.woocommerce-account .woocommerce-MyAccount-content { width: 70%; }
}

/* Komunikaty */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top: 0;
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-sm);
	background: var(--accent-subtle);
	color: var(--text-primary);
}
.woocommerce-error { border-left-color: #a12020; background: #fdecec; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--accent); }

/* Logowanie i rejestracja - węższe karty, jak na ekranach Logowanie/Rejestracja. */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 60rem; margin-inline: auto; }
.woocommerce-account:not(.logged-in) .u-columns { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) {
	.woocommerce-account:not(.logged-in) .u-columns { grid-template-columns: 1fr 1fr; }
}
.woocommerce-account:not(.logged-in) .u-columns > div { width: auto !important; float: none !important; }
.woocommerce form.login,
.woocommerce form.register {
	margin: 0;
	padding: var(--space-xl);
	background: var(--bg-elevated);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
}
.woocommerce-account h2 { font-size: var(--fs-h3); margin-bottom: var(--space-md); }
.woocommerce form.login .button,
.woocommerce form.register .button { width: 100%; }
.woocommerce-LostPassword { margin-top: var(--space-md); font-size: var(--fs-body-sm); }

/* --------------------------------------------------------------- Bestseller */

.section--bestseller { background: var(--bg-elevated); }

.bestseller { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 900px) { .bestseller { grid-template-columns: 5fr 7fr; gap: var(--space-3xl); } }

.bestseller__media { border-radius: var(--radius-xl); overflow: hidden; }
.bestseller__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.bestseller__body { display: grid; gap: var(--space-md); justify-items: start; }
.bestseller__title { margin: 0; font-size: var(--fs-h2); }
.bestseller__lead { margin: 0; color: var(--text-secondary); font-size: var(--fs-body-lg); }
.bestseller__price {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: 700;
}

/* ------------------------------------------------------- Kroki zakupu */

.kroki-zakupu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
	margin: 0 0 var(--space-2xl);
	padding: 0;
}

.kroki-zakupu__krok {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	color: var(--text-muted);
	font-size: var(--fs-body-sm);
}

.kroki-zakupu__znak {
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	border: 1px solid var(--border-default);
	font-size: var(--fs-caption);
	font-weight: 600;
}

.kroki-zakupu__krok--biezacy { color: var(--text-primary); font-weight: 600; }
.kroki-zakupu__krok--biezacy .kroki-zakupu__znak { background: var(--accent); border-color: var(--accent); color: var(--white); }
.kroki-zakupu__krok--zrobiony { color: var(--accent); }
.kroki-zakupu__krok--zrobiony .kroki-zakupu__znak { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent-on-subtle); }

/* Polecane produkty pod pustym koszykiem */
.section--polecane { padding-top: var(--space-2xl); }
.section--polecane .section__head { margin-bottom: var(--space-xl); }

/* ------------------------------------------------------- Pusty koszyk */

.koszyk-pusty {
	max-width: 34rem;
	margin-inline: auto;
	display: grid;
	gap: var(--space-md);
	justify-items: center;
	text-align: center;
	padding-block: var(--space-xl);
}
.koszyk-pusty__ikona { margin: 0; font-size: 2.5rem; line-height: 1; }
.koszyk-pusty__tytul { margin: 0; font-size: var(--fs-h2); }
/* Domyślny komunikat Woo zastępujemy własnym układem. */
.woocommerce-cart .cart-empty.woocommerce-info { display: none; }

/* Link rozwijający pole kuponu - domyślnie ma 20 px wysokości. */
.woocommerce-form-coupon-toggle a,
.woocommerce-info a.showcoupon {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* Dekoracja sekcji bestsellera nad kolumną ze zdjęciem, nie nad tytułem. */
.section--bestseller .deco--pixels { top: 12px; right: auto; left: 12px; }