/* ============================================================
   BOLTON Signal — tpl-product.css
   LAYOUT for single product + shop/category archives.
   - Single product: 2-col (gallery left / summary right) on desktop.
   - Shop / category: optional sidebar + product grid columns.
   - Category archive header.
   Skin (colours, borders, button language) lives in 06-woocommerce.css
   (@layer woocommerce). This file is structure/positioning only.
   Conditionally enqueued on is_product/is_shop/is_product_taxonomy/
   is_cart/is_checkout. Tokens only. Dark-first.
   ============================================================ */
@layer templates {

	/* ----------------------------------------------------------
	   Shop / archive page chrome
	   ---------------------------------------------------------- */
	.woocommerce .woocommerce-products-header {
		margin-bottom: var(--bx-sp-40);
	}
	.woocommerce .woocommerce-products-header__title,
	.woocommerce-page:not(.single) .page-title {
		margin: 0 0 var(--bx-sp-20);
		font-size: var(--bx-fs-2xl);
		line-height: var(--bx-lh-tight);
		color: var(--bx-contrast);
	}

	/* Category / taxonomy archive description + thumbnail (the archive header) */
	.woocommerce .term-description,
	.woocommerce-page .term-description {
		max-width: 70ch;
		margin-bottom: var(--bx-sp-40);
		color: var(--bx-contrast-midtone);
		line-height: var(--bx-lh-body);
	}

	/* Result-count / ordering toolbar sits on one row on desktop */
	.woocommerce .woocommerce-result-count { float: none; margin: 0; }
	.woocommerce .woocommerce-ordering { float: none; margin: 0; }
	.woocommerce-page .wc-shell > .woocommerce-result-count,
	.woocommerce-page .wc-shell > form.woocommerce-ordering { display: inline-block; }

	@media (min-width: 700px) {
		.woocommerce .woocommerce-result-count { display: inline-block; }
		.woocommerce .woocommerce-ordering { float: right; }
	}

	/* ----------------------------------------------------------
	   Shop / archive: product grid columns
	   (loop_shop_columns filter is set to 3 in inc/woocommerce.php)
	   ---------------------------------------------------------- */
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		display: grid;
		gap: var(--bx-sp-40);
		grid-template-columns: 1fr;
		margin-top: var(--bx-sp-40);
	}
	/* Defensive: cancel Woo's float/percentage widths so the grid governs */
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		width: auto !important;
		float: none !important;
		margin: 0 !important;
	}
	.woocommerce ul.products li.product::before,
	.woocommerce ul.products li.product::after { content: none; }

	@media (min-width: 560px) {
		.woocommerce ul.products,
		.woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); }
	}
	@media (min-width: 992px) {
		.woocommerce ul.products,
		.woocommerce-page ul.products,
		.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
		.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
		.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
	}

	/* ----------------------------------------------------------
	   Optional shop sidebar (widgets / filters) beside the grid.
	   Activates only when a .woocommerce-sidebar / #secondary exists.
	   ---------------------------------------------------------- */
	.wc-shell.has-sidebar {
		display: grid;
		gap: var(--bx-sp-50);
		grid-template-columns: 1fr;
	}
	@media (min-width: 992px) {
		.wc-shell.has-sidebar {
			grid-template-columns: minmax(0, 1fr) 280px;
			align-items: start;
		}
	}
	.wc-shell .widget-area,
	.wc-shell .woocommerce-sidebar {
		display: grid;
		gap: var(--bx-sp-40);
	}
	.wc-shell .widget,
	.wc-shell .wc-block-filter-wrapper {
		padding: var(--bx-sp-40);
		background: var(--bx-surface);
		border: var(--bx-border-hair);
		border-radius: var(--bx-radius-lg);
	}
	.wc-shell .widget .widgettitle,
	.wc-shell .widget h2,
	.wc-shell .widget h3 {
		margin: 0 0 var(--bx-sp-30);
		font: 600 var(--bx-fs-sm)/1 var(--bx-font-mono);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--bx-accent-strong);
	}
	.wc-shell .widget ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: 0.4rem;
	}
	.wc-shell .widget ul li a { color: var(--bx-contrast-midtone); text-decoration: none; }
	.wc-shell .widget ul li a:hover { color: var(--bx-accent-strong); }
	.wc-shell .widget ul li .count { color: var(--bx-steel-dim); font-family: var(--bx-font-mono); font-size: var(--bx-fs-xs); }

	/* Brand / category filter widget chips reuse .chip rhythm where output as lists */
	.wc-shell .widget_product_categories ul ul { margin-left: 0.9rem; padding-top: 0.4rem; }

	/* ----------------------------------------------------------
	   SINGLE PRODUCT: 2-column layout (gallery | summary)
	   ---------------------------------------------------------- */
	.woocommerce div.product {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--bx-sp-50);
		align-items: start;
	}
	@media (min-width: 768px) {
		.woocommerce div.product {
			grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
			gap: clamp(var(--bx-sp-40), 4vw, var(--bx-sp-60));
		}
	}

	/* Gallery (left) */
	.woocommerce div.product div.images {
		width: auto;
		float: none;
		margin: 0;
		grid-column: 1;
	}
	.woocommerce div.product div.images img {
		width: 100%;
		height: auto;
		background: var(--bx-navy-deep);
		border: var(--bx-border-hair);
		border-radius: var(--bx-radius-lg);
	}
	.woocommerce div.product div.images .woocommerce-product-gallery__wrapper { margin: 0; }
	.woocommerce div.product div.images .flex-control-thumbs {
		display: flex;
		flex-wrap: wrap;
		gap: var(--bx-sp-20);
		margin: var(--bx-sp-30) 0 0;
		padding: 0;
		list-style: none;
	}
	.woocommerce div.product div.images .flex-control-thumbs li {
		width: 72px;
		margin: 0;
	}
	.woocommerce div.product div.images .flex-control-thumbs img {
		border-radius: var(--bx-radius);
		opacity: 0.65;
		cursor: pointer;
		transition: opacity var(--bx-dur-1) var(--bx-ease), border-color var(--bx-dur-1) var(--bx-ease);
	}
	.woocommerce div.product div.images .flex-control-thumbs img:hover,
	.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
		opacity: 1;
		border-color: var(--bx-accent-strong);
	}
	/* Gallery zoom/trigger control kept usable */
	.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
		top: var(--bx-sp-20);
		right: var(--bx-sp-20);
	}

	/* Summary (right) — make it a flex column so RFQ-first ordering (06 §7) works */
	.woocommerce div.product div.summary,
	.woocommerce div.product .entry-summary {
		width: auto;
		float: none;
		margin: 0;
		grid-column: 2;
		display: flex;
		flex-direction: column;
		gap: var(--bx-sp-20);
	}
	@media (max-width: 767.98px) {
		.woocommerce div.product div.summary,
		.woocommerce div.product .entry-summary { grid-column: 1; }
	}

	/* Tabs / related span the full width beneath the two columns */
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells,
	.woocommerce div.product .woocommerce-product-gallery + .woocommerce-tabs {
		grid-column: 1 / -1;
	}

	/* Related-products grid columns (mirrors shop columns) */
	.woocommerce .related ul.products,
	.woocommerce .upsells ul.products {
		display: grid;
		gap: var(--bx-sp-40);
		grid-template-columns: 1fr;
	}
	@media (min-width: 560px) {
		.woocommerce .related ul.products,
		.woocommerce .upsells ul.products { grid-template-columns: repeat(2, 1fr); }
	}
	@media (min-width: 992px) {
		.woocommerce .related ul.products,
		.woocommerce .upsells ul.products { grid-template-columns: repeat(4, 1fr); }
	}

	/* ----------------------------------------------------------
	   Cart / checkout layout (functional spacing only)
	   ---------------------------------------------------------- */
	@media (min-width: 992px) {
		.woocommerce-cart .cart-collaterals .cart_totals { width: 42%; float: right; }
		.woocommerce-cart .cart-collaterals .cross-sells { width: 52%; float: left; }
		.woocommerce-checkout .col2-set,
		.woocommerce .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bx-sp-50); }
		.woocommerce-checkout .col2-set .col-1,
		.woocommerce-checkout .col2-set .col-2,
		.woocommerce .col2-set .col-1,
		.woocommerce .col2-set .col-2 { width: auto; float: none; }
	}

	/* My-account: navigation beside content on desktop */
	@media (min-width: 768px) {
		.woocommerce-account .woocommerce-MyAccount-navigation { width: 30%; float: left; }
		.woocommerce-account .woocommerce-MyAccount-content { width: 66%; float: right; }
	}

	/* ----------------------------------------------------------
	   Reduced motion
	   ---------------------------------------------------------- */
	@media (prefers-reduced-motion: reduce) {
		.woocommerce div.product div.images .flex-control-thumbs img { transition: none; }
	}
}