/**
 * EB Products - single product page.
 * Enqueued only on single eb_product views by EB_Products_Template_Loader.
 * Accent colour: #00b3a7.
 */

.eb-product-page { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }

/* 1. Top: images | info */
.eb-product-top { display: flex; flex-wrap: wrap; gap: 40px; }
.eb-product-media,
.eb-product-info { flex: 1 1 460px; min-width: 300px; }

.eb-product-featured-image img { width: 100%; height: auto; display: block; }
/* No product photo: the company mark, centred on a white square (same placeholder as the cards) */
.eb-product-featured-placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: #fff; border: 1px solid #eef1f3; }
.eb-product-featured-image .eb-product-featured-placeholder img { width: 40%; max-width: 220px; height: auto; opacity: 0.85; }
.eb-product-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.eb-product-gallery-thumb img { width: 80px; height: 80px; object-fit: cover; display: block; }

/* Title: product name big, the variant as a smaller line under it (both inside the H1) */
.eb-product-title { margin: 0 0 20px; }
.eb-product-title-name { display: block; }
.eb-product-title-variant {
	display: block;
	margin-top: 4px;
	font-size: 0.55em;
	font-weight: 400;
	line-height: 1.3;
	color: #555;
}

/* Part number, series and technology under the title */
.eb-product-meta { margin: 0 0 28px; font-size: 0.9rem; color: #666; line-height: 1.6; }
.eb-product-meta p { margin: 0; }
.eb-product-term-value { color: #00b3a7; }
.eb-product-terms { display: flex; flex-direction: column; gap: 4px; color: #00b3a7; }
.eb-product-term-label { font-weight: 400; color: #1f2933; }
.eb-product-terms a { color: #00b3a7; text-decoration: none; }
.eb-product-terms a:hover,
.eb-product-terms a:focus { text-decoration: underline; }

.eb-product-excerpt { margin-bottom: 0; }

/* Actions: inquiry 60%, read more 40%, equal space above and below */
.eb-product-actions { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; margin: 24px 0; }
.eb-product-actions .eb-product-inquiry,
.eb-product-actions .eb-product-read-more { text-align: center; }
.eb-product-inquiry {
	display: inline-block;
	padding: 10px 22px;
	border: 2px solid #00b3a7;
	border-radius: 30px;
	background-color: #00b3a7;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s;
}
.eb-product-inquiry:hover,
.eb-product-inquiry:focus { background-color: #008f86; border-color: #008f86; color: #fff; text-decoration: none; }
.eb-product-inquiry:focus-visible { outline: 3px solid #1f2933; outline-offset: 2px; }
.eb-product-read-more {
	display: inline-block;
	padding: 8px 20px;
	border: 2px solid #00b3a7;
	border-radius: 30px;
	color: #00b3a7;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.eb-product-read-more:hover,
.eb-product-read-more:focus {
	background-color: #00b3a7;
	color: #fff;
}

/* Key stats - design rework pending (backlog C10). */
/* Key facts strip: plain columns divided by a 2px company-colour line; a tile without a value is not rendered at all. */
.eb-product-facts {
	display: flex;
	flex-wrap: wrap;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.eb-product-fact {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 4px 20px;
}
.eb-product-fact:first-child { padding-left: 0; }
.eb-product-fact + .eb-product-fact { border-left: 2px solid #00b3a7; }
.eb-product-fact-body { display: flex; flex-direction: column; min-width: 0; }
.eb-product-fact-label {
	font-size: 0.75rem;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #666;
	margin-bottom: 4px;
}
.eb-product-fact-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; line-height: 1.25; }
.eb-product-fact-value strong { font-size: 1.5rem; font-weight: 700; color: #00b3a7; }
.eb-product-fact-unit { font-size: 0.9rem; color: #00b3a7; }
.eb-product-fact-freq {
	font-size: 0.75rem;
	color: #00b3a7;
	font-weight: 600;
}
.eb-product-fact-value + .eb-product-fact-value { margin-top: 2px; }

/* 2. Variant selector - full width, below images, above the tabs */
.eb-product-variants { margin-top: 40px; overflow-x: auto; }
.eb-product-variant-table { width: 100%; border-collapse: collapse; }
.eb-product-variant-table th {
	text-align: left;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #666;
	padding: 8px 10px;
	border-bottom: 1px solid #e0e0e0;
}
.eb-product-variant-table td {
	padding: 12px 10px;
	border-bottom: 1px solid #e0e0e0;
	vertical-align: middle;
}
.eb-product-variant-table .eb-product-variant-partnumber-col { text-align: right; white-space: nowrap; }
.eb-product-variant-table td.eb-product-variant-partnumber-col { font-weight: 600; }

.eb-product-variant-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}
a.eb-product-variant-link:hover,
a.eb-product-variant-link:focus { color: #00b3a7; }
.eb-product-variant-link.is-unavailable { color: #999; }

.eb-product-variant-radio {
	display: inline-block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #00b3a7;
	box-sizing: border-box;
}
.eb-product-variant-radio.is-checked { background: radial-gradient( circle, #00b3a7 0 35%, transparent 40% ); }
.is-unavailable .eb-product-variant-radio { border-color: #ccc; }

.eb-product-variant-row.is-active { background-color: rgba( 0, 179, 167, 0.06 ); }
.eb-product-variant-row.is-active .eb-product-variant-link { font-weight: 600; }

/* 3. Tabs */
.eb-product-tabs { margin-top: 48px; }
.eb-product-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 24px;
}
.eb-product-tab-btn {
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	padding: 12px 20px;
	font-size: 0.95rem;
	font-weight: 600;
	color: #666;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.eb-product-tab-btn:hover,
.eb-product-tab-btn:focus { color: #00b3a7; }
.eb-product-tab-btn.is-active {
	color: #00b3a7;
	border-bottom-color: #00b3a7;
}

.eb-product-tab-panel[hidden] { display: none; }
.eb-product-tab-panel h3 { margin-top: 0; }

/* Related products: heading + dropdown, then one carousel per relation (only the chosen one is shown) */
.eb-product-related { margin-top: 48px; padding-top: 24px; border-top: 1px solid #e0e0e0; }
.eb-product-related-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.eb-product-related-title { margin: 0; }
.eb-product-related-filter { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 0.9rem; color: #666; }
.eb-product-related-filter select.eb-product-related-select {
	min-width: 240px;
	max-width: 100%;
	height: auto;
	min-height: 42px;
	line-height: 1.4;
	padding: 8px 36px 8px 12px;
	box-sizing: border-box;
	border: 1px solid #cfd6db;
	border-radius: 6px;
	background-color: #fff;
	color: #1f2933;
	font-size: 0.9rem;
}
.eb-product-related-select:focus-visible { outline: 2px solid #00b3a7; outline-offset: 2px; }
.eb-product-related-only { margin: 0; font-size: 0.9rem; color: #666; }

/* Cards, grid and carousel live in eb-product-cards.css (shared with the Product Listing element) */
@media ( max-width: 480px ) {
	.eb-product-related-select { min-width: 0; width: 100%; }
	.eb-product-related-filter { width: 100%; }
}

.eb-product-tech-table { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.eb-product-tech-table th,
.eb-product-tech-table td {
	text-align: left;
	padding: 10px;
	border-bottom: 1px solid #e0e0e0;
}
.eb-product-tech-table th { width: 40%; color: #666; font-weight: 600; }

.eb-product-tech-freeform { margin-bottom: 32px; }

.eb-spec-unit-select { margin-left: 8px; }

/* Keyboard focus - visible on every interactive element of the page */
.eb-product-page a:focus-visible,
.eb-product-tab-btn:focus-visible,
.eb-product-tab-panel:focus-visible,
.eb-spec-unit-select:focus-visible {
	outline: 2px solid #00b3a7;
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.eb-product-read-more,
	.eb-product-tab-btn { transition: none; }
}

/* Phones: the theme's content area already has its own side padding; the columns stack, the tab strip scrolls
   sideways instead of wrapping into three rows, the variant table becomes a list and the unit dropdowns move
   under their values. */
@media ( max-width: 600px ) {
	.eb-product-page { padding: 24px 0 32px; }
	.eb-product-top { gap: 28px; }
	.eb-product-media,
	.eb-product-info { flex-basis: 100%; min-width: 0; }
	.eb-product-title { margin-bottom: 14px; }
	.eb-product-meta { margin-bottom: 20px; }

	.eb-product-fact { flex-basis: 100%; padding: 12px 0; }
	.eb-product-fact + .eb-product-fact { border-left: 0; border-top: 2px solid #00b3a7; }
	.eb-product-actions { grid-template-columns: 1fr; margin: 20px 0; }
	.eb-product-inquiry,
	.eb-product-read-more { display: block; }

	/* Variant selector as a list: one block per variant, part number labelled underneath the text. */
	.eb-product-variants { margin-top: 32px; overflow-x: visible; }
	.eb-product-variant-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect( 0 0 0 0 ); }
	.eb-product-variant-table,
	.eb-product-variant-table tbody { display: block; width: 100%; }
	.eb-product-variant-table tr {
		display: block;
		padding: 10px 0;
		border-bottom: 1px solid #e0e0e0;
	}
	.eb-product-variant-table td { display: block; padding: 0; border: 0; }
	.eb-product-variant-table td.eb-product-variant-partnumber-col {
		padding: 2px 0 0 28px;
		text-align: left;
		font-size: 0.85rem;
		color: #666;
		white-space: normal;
	}
	.eb-product-variant-table td.eb-product-variant-partnumber-col::before {
		content: attr( data-label ) ": ";
		font-weight: 400;
	}
	.eb-product-variant-row.is-active { background: none; }
	.eb-product-variant-link { display: flex; align-items: flex-start; gap: 12px; line-height: 1.4; }
	.eb-product-variant-radio { margin-top: 3px; }

	/* Tabs: one scrollable row */
	.eb-product-tabs { margin-top: 36px; }
	.eb-product-tabs-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-bottom: 20px;
	}
	.eb-product-tabs-nav::-webkit-scrollbar { display: none; }
	.eb-product-tab-btn { flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; font-size: 0.9rem; }

	/* Specification table */
	.eb-product-tech-table th,
	.eb-product-tech-table td { padding: 8px 6px; font-size: 0.95rem; }
	.eb-product-tech-table th { width: 42%; padding-left: 0; }
	.eb-spec-unit-select { display: block; margin: 6px 0 0; max-width: 100%; }

	.eb-product-related { margin-top: 36px; }
}