/**
 * WooCommerce overrides – Anna Oszajca
 * Covers: shop archive, single product, cart, checkout, my account, FunnelKit
 * Full implementation in Etap 2-3
 */

/* ─── Shop archive ───────────────────────────────────── */
.woocommerce ul.products li.product {
    text-align: center;
}

/* Product cards — shared styles for #sklep and #related-products */
#sklep .woocommerce ul.products li.product,
#related-products ul.products li.product {
    position: relative;
    padding: 0 0 22px; /* 22px ≈ pół wysokości buttonu */
    border: 1px solid var(--color-text-dark);
    background: transparent;
}

#sklep .woocommerce ul.products li.product .woocommerce-loop-product__title,
#sklep .woocommerce ul.products li.product h2,
#sklep .woocommerce ul.products li.product h3,
#related-products ul.products li.product .woocommerce-loop-product__title,
#related-products ul.products li.product h2,
#related-products ul.products li.product h3 {
    padding: 0.5em;
}

#sklep .woocommerce ul.products li.product .price,
#related-products ul.products li.product .price {
    display: block;
    padding: 0.5em;
}

#sklep .woocommerce ul.products li.product .button,
#related-products ul.products li.product .button {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    margin: 0;
    white-space: nowrap;
}

/* Loading state — FunnelKit-style spinner */
#sklep .woocommerce ul.products li.product .button.loading,
#related-products ul.products li.product .button.loading {
    opacity: 0.6;
    color: transparent !important;
    pointer-events: none;
}

#sklep .woocommerce ul.products li.product .button.loading::before,
#sklep .woocommerce ul.products li.product .button.loading::after,
#related-products ul.products li.product .button.loading::before,
#related-products ul.products li.product .button.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-bottom-color: var(--color-white);
    border-left-color: var(--color-white);
    background: none;
    box-shadow: none;
    animation: ao-spin 0.6s linear infinite;
    transform-origin: center;
    right: auto;
}

#sklep .woocommerce ul.products li.product .button.loading::before,
#related-products ul.products li.product .button.loading::before {
    display: none;
}

/* Ukryj "Zobacz koszyk" link po dodaniu do koszyka — używamy FunnelKit side cart */
.woocommerce a.added_to_cart {
    display: none !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    color: var(--color-text-dark);
}

.woocommerce ul.products li.product .price {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-dark);
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    font-weight: var(--weight-semibold);
}

.woocommerce ul.products li.product .price del {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ─── WooCommerce Buttons — unified with global .btn system ── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .product .button,
.woocommerce .products .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 0 !important;
    padding: var(--text-base) var(--space-8);
    transition: background-color var(--duration) var(--ease-out);
    cursor: pointer;
}

.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,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce .product .button:hover,
.woocommerce .products .button:hover {
    background-color: var(--color-primary-hover) !important;
    color: var(--color-white) !important;
}

/* ─── Single product ─────────────────────────────────── */
.woocommerce div.product .product_title {
    margin-bottom: var(--space-4);
}

.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-6);
}

.woocommerce div.product p.price {
    font-family: var(--font-body);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-dark);
}

/* ─── Cart ───────────────────────────────────────────── */
.woocommerce-cart .woocommerce table.shop_table {
    border-collapse: collapse;
    border: none;
}

.woocommerce-cart .woocommerce table.shop_table th {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
    border-bottom: var(--border-light);
}

.woocommerce-cart .woocommerce table.shop_table td {
    border-bottom: var(--border-light);
    padding: var(--space-4);
}

/* ─── Checkout ───────────────────────────────────────── */
.woocommerce-checkout .woocommerce form .form-row label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-dark);
}

.woocommerce-checkout .woocommerce form .form-row input.input-text,
.woocommerce-checkout .woocommerce form .form-row textarea,
.woocommerce-checkout .woocommerce form .form-row select {
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    transition: border-color var(--duration) var(--ease-out);
}

.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout .woocommerce form .form-row textarea:focus,
.woocommerce-checkout .woocommerce form .form-row select:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* ─── My Account ─────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-dark);
    border-radius: var(--radius-md);
    transition: background-color var(--duration) var(--ease-out);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: var(--color-gray-100);
    color: var(--color-primary);
}

/* ─── Notices ────────────────────────────────────────── */
.woocommerce-notices-wrapper ul.woocommerce-message,
.woocommerce-notices-wrapper ul.woocommerce-info,
.woocommerce-notices-wrapper ul.woocommerce-error {
    list-style: none;
    width: 100%;
    max-width: var(--container-xl);
    margin: var(--space-6) auto;
    padding: 10px 10px 10px 20px;
    border: 1px solid var(--color-gray-200);
    border-radius: 0;
    background: var(--color-primary-light);
    box-shadow: none;
    outline: none;
}

.woocommerce-notices-wrapper ul.woocommerce-message:focus,
.woocommerce-notices-wrapper ul.woocommerce-info:focus,
.woocommerce-notices-wrapper ul.woocommerce-error:focus,
.woocommerce-notices-wrapper ul.woocommerce-message:focus-visible,
.woocommerce-notices-wrapper ul.woocommerce-info:focus-visible,
.woocommerce-notices-wrapper ul.woocommerce-error:focus-visible {
    outline: none;
}

.woocommerce-notices-wrapper ul.woocommerce-error {
    background: #FBE9E9;
}

.woocommerce-notices-wrapper ul.woocommerce-message > li,
.woocommerce-notices-wrapper ul.woocommerce-info > li,
.woocommerce-notices-wrapper ul.woocommerce-error > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-5);
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-dark);
}

.woocommerce-notices-wrapper ul.woocommerce-message::before,
.woocommerce-notices-wrapper ul.woocommerce-info::before,
.woocommerce-notices-wrapper ul.woocommerce-error::before,
.woocommerce-notices-wrapper ul.woocommerce-message > li::before,
.woocommerce-notices-wrapper ul.woocommerce-info > li::before,
.woocommerce-notices-wrapper ul.woocommerce-error > li::before {
    display: none;
    content: none;
}

/* Notice buttons — layout overrides only, base styles from WC buttons above */
.woocommerce-notices-wrapper ul.woocommerce-message a.button,
.woocommerce-notices-wrapper ul.woocommerce-info a.button,
.woocommerce-notices-wrapper ul.woocommerce-error a.button,
.woocommerce-notices-wrapper ul.woocommerce-message a.button.wc-forward,
.woocommerce-notices-wrapper ul.woocommerce-info a.button.wc-forward,
.woocommerce-notices-wrapper ul.woocommerce-error a.button.wc-forward {
    flex-shrink: 0;
    margin: 0;
    float: none;
}

/* Elementor WC info notice — reset */
.e-wc-info-notice .woocommerce-info {
    background: transparent !important;
    border: none !important;
}

/* FunnelKit checkout — remove capitalize, smaller renewal text */
.wfacp_mini_cart_start_h .wfacp_order_summary_container .wfacp_mini_cart_reviews tr:not(.wfacp-saving-amount) td,
.wfacp_mini_cart_start_h .wfacp_order_summary_container .wfacp_mini_cart_reviews tr:not(.wfacp-saving-amount) th,
.wfacp_mini_cart_start_h span.amount {
    text-transform: none !important;
}

.wfacp_mini_cart_start_h .subscription-details {
    font-size: var(--text-sm) !important;
}

.recurring-total-header,
.recurring-total-header span,
.recurring-total-header small,
.recurring-total-schedule,
.recurring-total-schedule span,
.recurring-total-schedule small {
    font-size: 14px !important;
}

.wfacp_mini_cart_start_h .includes_tax,
.wfacp_mini_cart_start_h .includes_tax span {
    font-weight: 400 !important;
}

.wfacp_coupon_msg a,
.wfacp_showcoupon a {
    color: var(--color-primary) !important;
}

/* FunnelKit checkout — product removed notice */
body #wfacp-sec-wrapper .wfacp_product_restore_wrap,
body #wfacp-sec-wrapper .wfacp_product_restore_wrap *,
body .wfacp_mini_cart_start_h .wfacp_product_restore_wrap,
body .wfacp_mini_cart_start_h .wfacp_product_restore_wrap * {
    font-size: 14px !important;
    color: #D93030 !important;
}

/* FunnelKit checkout — error/info notices */
body #wfacp-sec-wrapper .woocommerce-error,
body #wfacp-sec-wrapper .woocommerce-error *,
body #wfacp-sec-wrapper .woocommerce-message,
body #wfacp-sec-wrapper .woocommerce-message *,
body #wfacp-sec-wrapper .woocommerce-info,
body #wfacp-sec-wrapper .woocommerce-info * {
    font-size: 14px !important;
    color: #D93030 !important;
}

/* Hide e_marker on checkout notices */
body #wfacp-sec-wrapper .e_marker,
body #wfacp-sec-wrapper .woocommerce-error::before,
body #wfacp-sec-wrapper .woocommerce-message::before,
body #wfacp-sec-wrapper .woocommerce-info::before {
    display: none !important;
}

/* ─── Breadcrumbs ────────────────────────────────────── */
.woocommerce .woocommerce-breadcrumb {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-6);
}

.woocommerce .woocommerce-breadcrumb a {
    color: var(--color-gray-500);
}

.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--color-primary);
}

/* ─── Star rating ────────────────────────────────────── */
.woocommerce .star-rating {
    color: var(--color-warning);
}

/* ─── FunnelKit payment method spacing ───────────────── */
body #wfacp-e-form #payment ul.payment_methods li.wc_payment_method,
body .wfacp_main_form #payment ul.payment_methods li.wc_payment_method {
    padding: var(--space-4) var(--space-5);
}

/* ─── FunnelKit payment method description indent ────── */
body #wfacp-e-form #payment ul.payment_methods li.wc_payment_method div.payment_box,
body .wfacp_main_form #payment ul.payment_methods li.wc_payment_method div.payment_box {
    padding-left: 32px;
}

/* ─── FunnelKit checkout validation ──────────────────── */
body #wfacp-sec-wrapper span.wfacp_inline_field_error,
body #wfacp-sec-wrapper .checkout-inline-error-message {
    font-size: var(--text-base);
    font-weight: var(--weight-bold) !important;
    color: var(--color-error) !important;
    margin-top: var(--space-2) !important;
}

/* ─── FunnelKit overrides ────────────────────────────── */
.fkcart-panel {
    font-family: var(--font-body);
}

.fkcart-panel .fkcart-checkout-button {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--color-primary);
    border-radius: 0;
}

.fkcart-panel .fkcart-checkout-button:hover {
    background-color: var(--color-primary-hover);
}

/* ─── Single Product Hero ────────────────────────────── */
.product-hero {
	padding-block: var(--space-16);
	background: var(--color-white);
}

@media (max-width: 1024px) {
	.product-hero {
		padding-block: var(--space-12);
	}
}

@media (max-width: 767px) {
	.product-hero {
		padding-block: var(--space-10);
	}
}

.product-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-12);
	align-items: center;
}
@media (max-width: 768px) {
	.product-hero__grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

}

.product-hero__title {
	font-size: var(--text-4xl);
	margin: 0 0 var(--space-5);
}

@media (max-width: 1024px) {
	.product-hero__title {
		font-size: var(--text-3xl);
	}
}

@media (max-width: 767px) {
	.product-hero__title {
		font-size: var(--text-2xl);
	}
}

.product-hero__desc,
.product-hero__desc p {
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-gray-600);
	line-height: var(--leading-normal);
	margin-bottom: var(--space-6);
}

.product-hero__desc p:last-child {
	margin-bottom: 0;
}

.product-hero__price {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	color: var(--color-text-dark);
}

.product-hero__price del {
	color: var(--color-gray-400);
	font-weight: var(--weight-normal);
	font-size: var(--text-lg);
}

.product-hero__price ins {
	text-decoration: none;
}

.product-hero__image {
	width: 100%;
}

.product-hero__img {
	width: 100%;
	height: auto;
}

/* Add to cart form – remove WC clearfix ::before that creates gap */
.product-hero__actions .cart {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.woocommerce div.product .product-hero__actions .cart::before,
.woocommerce div.product .product-hero__actions .cart::after {
	display: none;
}

.woocommerce div.product .product-hero__actions .cart {
	margin-bottom: 0;
}

/* Hero actions: stack vertically with "lub" separator */
.product-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	margin-top: var(--space-4);
}

/* Hide stray <br> between form and TubaPay */
.product-hero__actions > br {
	display: none;
}

/* TubaPay installment – plain text info below cart button */
.product-hero__actions [class*="tubapay"],
.product-hero__actions .tubapay-product-info {
	order: 10;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	max-width: none !important;
	text-align: left !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	color: var(--color-gray-500) !important;
	cursor: default !important;
}

/* "lub" separator */
.product-hero__actions [class*="tubapay"]::before,
.product-hero__actions .tubapay-product-info::before {
	content: 'lub ';
	display: inline;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-gray-500);
	line-height: 1;
	margin-bottom: 0;
}

/* TubaPay tekst lowercase ("Podziel" → "podziel") */
.product-hero__actions [class*="tubapay"],
.product-hero__actions .tubapay-product-info {
	text-transform: lowercase !important;
	color: var(--color-gray-500) !important;
}

/* Sold individually – hide empty quantity wrapper (removes flex gap) */
.sold-individually .product-hero__actions .cart .quantity {
	display: none;
}

/* Quantity input */
.product-hero__actions .quantity .qty {
	width: 64px;
	height: 54px;
	padding: 0 var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--color-text-dark);
	text-align: center;
	background: var(--color-white);
	border: 1px solid var(--color-gray-300);
	border-radius: 0;
	-moz-appearance: textfield;
}

.product-hero__actions .quantity .qty::-webkit-inner-spin-button,
.product-hero__actions .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.product-hero__actions .quantity .qty:focus {
	border-color: var(--color-primary);
	outline: none;
}

/* Add to cart button — inherits all styles from global WC button rules above */

/* Loading state — przycisk lekko wyblaknięty + spinner wycentrowany (styl FunnelKit) */
.woocommerce .product-hero__actions .single_add_to_cart_button {
	position: relative;
}

.woocommerce .product-hero__actions .single_add_to_cart_button.loading {
	opacity: 0.6;
	color: transparent !important;
	pointer-events: none;
}

.woocommerce .product-hero__actions .single_add_to_cart_button.loading::before,
.woocommerce .product-hero__actions .single_add_to_cart_button.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border-radius: 50%;
	border: 2px solid transparent;
	border-bottom-color: var(--color-white);
	border-left-color: var(--color-white);
	background: none;
	box-shadow: none;
	animation: ao-spin 0.6s linear infinite;
	transform-origin: center;
	right: auto;
}

.woocommerce .product-hero__actions .single_add_to_cart_button.loading::before {
	display: none;
}

@keyframes ao-spin {
	to { transform: rotate(360deg); }
}

/* ─── Product Description ────────────────────────────── */
.product-description {
	border-top: var(--border-light);
}

/* Single product wrapper – no WC default padding */
.single-product-content {
	margin: 0;
	padding: 0;
}

/* Product description full-bleed – override any WC wrapper padding */
.product-description img {
	display: block;
	max-width: 100%;
}

/* ─── Related Products ──────────────────────────────── */
.related-products {
	position: relative;
	margin-top: var(--space-16);
	padding-block: var(--space-20);
	background: var(--color-bg-warm);
}

@media (max-width: 1024px) {
	.related-products {
		padding-block: var(--space-12);
	}
}

@media (max-width: 767px) {
	.related-products {
		padding-block: var(--space-10);
	}
}

.related-products > .container {
	position: relative;
	z-index: 1;
}

.related-products__deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.related-products__blob {
	position: absolute;
	left: -80px;
	top: 50%;
	transform: translateY(calc(-45% - 100px));
	width: min(900px, 65vw);
	height: auto;
	z-index: 0;
}

.related-products__dots {
	position: absolute;
	right: 60px;
	top: 50px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 0;
}

.related-products__dots span {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #B4AEAB;
	display: block;
}

@media (max-width: 767px) {
	.related-products__deco { display: none; }
}

.related-products__title {
	text-align: center;
	font-size: var(--text-5-5xl);
	margin: 0 0 var(--space-12);
}

@media (max-width: 1024px) {
	.related-products__title {
		margin-bottom: var(--space-8);
	}
}

@media (max-width: 767px) {
	.related-products__title {
		font-size: var(--text-3xl);
	}
}

.related-products__title span {
	font-family: var(--font-accent);
	font-style: italic;
	font-weight: var(--weight-normal);
}

@media (max-width: 767px) {
	#related-products ul.products[class*="columns-"] {
		display: grid !important;
		grid-template-columns: 1fr;
	}
	#related-products ul.products li.product {
		width: 100% !important;
	}
}