/**
 * WooCommerce – dodatkowe style
 * Główne responsive + cart fixy są w style.css
 * Tu: drobne nadpisania WC defaults
 */

/* =============================================
   BREADCRUMB
   ============================================= */
.zo-breadcrumb {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.zo-breadcrumb a { color: var(--muted); text-decoration: none; }
.zo-breadcrumb a:hover { color: var(--pink); }

/* =============================================
   ORDERING / COUNT BAR
   ============================================= */
.woocommerce-result-count { color: var(--muted); font-size: 14px; margin-bottom: 20px; }

.woocommerce-ordering select {
	border: 2px solid var(--line);
	border-radius: 12px;
	padding: 10px 16px;
	font-family: var(--font-main);
	font-size: 14px;
	color: var(--text);
	background: var(--white);
	cursor: pointer;
	max-width: 100%;
}
.woocommerce-ordering select:focus { outline: none; border-color: var(--pink); }

/* =============================================
   PRODUCT COLUMNS OVERRIDE
   Nadpisuje WooCommerce domyślne width:70.75% i float:left
   ============================================= */

/* Resetuj WC float-based layout globalnie */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { display: none !important; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.home-products ul.products li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce-page ul.products.columns-3 li.product,
.woocommerce ul.products.columns-2 li.product,
.woocommerce-page ul.products.columns-2 li.product,
.woocommerce ul.products.columns-4 li.product,
.woocommerce-page ul.products.columns-4 li.product {
	width: auto !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	clear: none !important;
}

.woocommerce .products.columns-4,
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr) !important; }
.woocommerce .products.columns-3,
.woocommerce ul.products.columns-3,
.home-products ul.products { grid-template-columns: repeat(3, 1fr) !important; }
.woocommerce .products.columns-2,
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr) !important; }
.woocommerce .products.columns-1,
.woocommerce ul.products.columns-1 { grid-template-columns: 1fr !important; }

@media (max-width: 980px) {
	.woocommerce .products.columns-3,
	.woocommerce ul.products.columns-3,
	.woocommerce .products.columns-4,
	.woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
	.woocommerce .products,
	.woocommerce ul.products,
	.woocommerce .products.columns-3,
	.woocommerce ul.products.columns-3,
	.woocommerce .products.columns-2,
	.woocommerce ul.products.columns-2,
	.woocommerce .products.columns-4,
	.woocommerce ul.products.columns-4 { grid-template-columns: 1fr !important; }
}

/* =============================================
   PRODUCT GALLERY THUMBNAILS
   ============================================= */
.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 12px;
}
.woocommerce div.product div.images .flex-control-thumbs li { width: 72px !important; float: none; }
.woocommerce div.product div.images .flex-control-thumbs li img {
	border-radius: 10px;
	border: 2px solid transparent;
	transition: border-color .2s;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active { border-color: var(--pink); }

/* =============================================
   SALE BADGE
   ============================================= */
.woocommerce span.onsale {
	background: var(--pink) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 6px 14px !important;
	font-size: 12px !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	min-height: auto !important;
	min-width: auto !important;
	line-height: 1.3 !important;
}

/* =============================================
   CHECKOUT FORMS
   ============================================= */
.woocommerce form .form-row { margin-bottom: 16px; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 99%;
	max-width: 99%;
	box-sizing: border-box;
	padding: 14px 18px;
	border: 2px solid var(--line);
	border-radius: 14px;
	font-family: var(--font-main);
	font-size: 15px;
	color: var(--text);
	background: var(--white);
	transition: border-color .2s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline: none; border-color: var(--pink); }

.woocommerce form .form-row label { font-weight: 800; font-size: 14px; margin-bottom: 6px; display: block; }

/* =============================================
   PAYMENT BOX
   ============================================= */
.woocommerce #payment {
	background: var(--cream);
	border-radius: var(--radius);
	padding: 24px;
	overflow: hidden;
	width: 99%;
	max-width: 99%;
	box-sizing: border-box;
}

.woocommerce #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 20px; }
.woocommerce #payment ul.payment_methods li { padding: 12px 0; border-bottom: 1px solid var(--line); }

/* =============================================
   ORDER REVIEW
   ============================================= */
.woocommerce-checkout-review-order-table { width: 99%; border-collapse: collapse; box-sizing: border-box; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	word-break: break-word;
	box-sizing: border-box;
}

/* =============================================
   MY ACCOUNT
   ============================================= */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none; padding: 0; margin: 0 0 28px;
	display: flex; gap: 8px; flex-wrap: wrap;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block; padding: 10px 18px;
	border: 2px solid var(--line); border-radius: 999px;
	color: var(--text); font-weight: 800; font-size: 14px;
	text-decoration: none; transition: .2s;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--pink); border-color: var(--pink); color: #fff;
}

/* =============================================
   EMPTY CART
   ============================================= */
.woocommerce-cart .cart-empty { text-align: center; padding: 60px 20px; font-size: 20px; color: var(--muted); }
.woocommerce-cart .return-to-shop { text-align: center; margin-top: 20px; }

/* =============================================
   RELATED / UPSELLS
   ============================================= */
.related.products,
.upsells.products,
.cross-sells {
	/* Wyrwij z gridu single product i ułóż jako blok pod nim */
	display: block !important;
	grid-column: 1 / -1;
	width: 100% !important;
	max-width: 100% !important;
	margin-top: 56px;
	margin-bottom: 0;
	clear: both;
	float: none !important;
	box-sizing: border-box;
}

.related.products h2,
.upsells.products h2,
.cross-sells h2 {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 400;
	margin: 0 0 28px 0;
	text-align: center;
	width: 100%;
	display: block;
}

/* Grid produktów wewnątrz sekcji related/upsell */
.related.products ul.products,
.upsells.products ul.products,
.cross-sells ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 28px !important;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	box-sizing: border-box !important;
}

.related.products ul.products li.product,
.upsells.products ul.products li.product,
.cross-sells ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
	box-sizing: border-box !important;
}

@media (max-width: 980px) {
	.related.products ul.products,
	.upsells.products ul.products,
	.cross-sells ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 640px) {
	.related.products ul.products,
	.upsells.products ul.products,
	.cross-sells ul.products {
		grid-template-columns: 1fr !important;
	}
}

/* =============================================
   HERO – zdjęcie produktu
   ============================================= */
.hero-visual .hero-image {
	width: 100%;
	max-width: 520px;
	height: 420px;
	object-fit: contain;
	object-position: center bottom;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	display: block;
	margin: 0 auto;
}
@media (max-width: 980px) {
	.hero-visual .hero-image { max-width: 100%; height: 260px; }
}

/* =============================================
   FIX: WooCommerce Blocks – sidebar layout
   Domyślne 65% wychodzi poza ekran, 60% mieści się
   ============================================= */

.wc-block-components-sidebar-layout .wc-block-components-main {
	box-sizing: border-box;
	margin: 0;
	padding-right: 4.5283018868%;
	padding-left: 7px;
	width: 60% !important;
}

.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	box-sizing: border-box;
	width: 38% !important;
}

/* Pełna szerokość na mobile */
@media (max-width: 768px) {
	.wc-block-components-sidebar-layout .wc-block-components-main,
	.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		width: 100% !important;
		padding-right: 0 !important;
	}
}

/* =============================================
   FIX: Blokowy checkout – padding-left 7px
   ============================================= */
.wp-block-woocommerce-checkout {
	container-type: inline-size;
	margin: 0;
	padding-top: 24px;
	width: 100%;
	padding-left: 7px;
	box-sizing: border-box;
}

/* =============================================
   FIX: Single product – summary width + mobile
   ============================================= */

/* Desktop – poszerz summary z 48% do 78% */
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
	float: none !important;
	width: 100% !important;
	clear: none;
}

/* Cały product div – grid zamiast float */
.woocommerce div.product,
.woocommerce #content div.product {
	display: grid !important;
	grid-template-columns: 1fr 1.2fr !important;
	gap: 48px !important;
	align-items: start;
	float: none !important;
	width: 100% !important;
}

/* Gallery zajmuje lewą kolumnę, summary prawą */
.woocommerce div.product div.woocommerce-product-gallery {
	float: none !important;
	width: 100% !important;
	clear: none;
}

/* Tabs i related – pełna szerokość pod gridem */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product #reviews {
	grid-column: 1 / -1;
}

/* ── MOBILE (≤ 640px) ── */
@media (max-width: 640px) {

	/* Jedna kolumna – gallery nad, summary pod */
	.woocommerce div.product,
	.woocommerce #content div.product {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	/* Gallery nie zasłania tytułu – wymuś kolejność */
	.woocommerce div.product div.woocommerce-product-gallery {
		order: 0;
	}

	.woocommerce div.product div.summary {
		order: 1;
		width: 100% !important;
	}

	/* Tytuł produktu zawsze widoczny */
	.woocommerce div.product h1.product_title,
	.woocommerce div.product .product_title {
		font-size: 26px !important;
		margin-top: 0 !important;
	}

	/* Galeria – ogranicz wysokość na mobile */
	.woocommerce div.product div.woocommerce-product-gallery img {
		max-height: 320px;
		object-fit: contain;
		width: 100%;
	}
}

/* ── TABLET (641px – 980px) ── */
@media (min-width: 641px) and (max-width: 980px) {
	.woocommerce div.product,
	.woocommerce #content div.product {
		grid-template-columns: 1fr 1fr !important;
		gap: 28px !important;
	}
}