/**
 * EB Products - product cards, grid, list and carousel.
 *
 * Shared by the related-products carousel on the product page, the
 * Product Listing Builder element and (later) the product finder.
 * Enqueued as "eb-products-cards"; the product page's own stylesheet
 * depends on it.
 */

/* ------------------------------------------------------------------ */
/* Grid                                                                */
/* ------------------------------------------------------------------ */
.eb-product-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
}
.eb-product-cards--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eb-product-cards--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eb-product-cards--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ------------------------------------------------------------------ */
/* Card                                                                */
/* ------------------------------------------------------------------ */
.eb-product-card { margin: 0; }
.eb-product-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;
	color: #1f2933;
	text-decoration: none;
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s;
}
a.eb-product-card-link:hover,
a.eb-product-card-link:focus { border-color: #00b3a7; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); color: #1f2933; text-decoration: none; }
a.eb-product-card-link:focus-visible { outline: 2px solid #00b3a7; outline-offset: 2px; }
.eb-product-card-image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 12px;
	background: #fff;
}
.eb-product-card-image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.eb-product-card-image.is-empty::before { content: ""; width: 40%; aspect-ratio: 1; border-radius: 50%; background: #e8ecef; }
/* No product photo: the company mark, smaller and quieter than a real photo */
.eb-product-card-image.is-placeholder img { max-width: 50%; max-height: 50%; opacity: 0.85; }
.eb-product-card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.eb-product-card-title { font-weight: 700; font-size: 1rem; line-height: 1.3; color: #1f2933; }
a.eb-product-card-link:hover .eb-product-card-title { color: #00b3a7; }
.eb-product-card-specs { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; color: #666; }
.eb-product-card-spec strong { color: #00b3a7; font-weight: 700; }
.eb-product-card-count { font-size: 0.85rem; color: #666; }
/* "Learn more" line at the foot of a card (Product Listing element) */
.eb-product-card-more { margin-top: auto; padding-top: 6px; font-size: 0.9rem; font-weight: 600; color: #00b3a7; }
.eb-product-card-more::after { content: " \2192"; }

/* ------------------------------------------------------------------ */
/* Carousel: native horizontal scroll with snap; no slider library     */
/* ------------------------------------------------------------------ */
.eb-product-carousel { position: relative; }
.eb-product-carousel[hidden] { display: none; }
.eb-product-carousel-track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 2px;
	padding: 4px 2px 12px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.eb-product-carousel-track::-webkit-scrollbar { display: none; }
.eb-product-carousel-track:focus-visible { outline: 2px solid #00b3a7; outline-offset: 2px; }
.eb-product-carousel-track > .eb-product-card {
	flex: 0 0 calc( ( 100% - 60px ) / 4 );
	min-width: 0;
	scroll-snap-align: start;
}
.eb-product-carousel--cols-2 .eb-product-carousel-track > .eb-product-card { flex-basis: calc( ( 100% - 20px ) / 2 ); }
.eb-product-carousel--cols-3 .eb-product-carousel-track > .eb-product-card { flex-basis: calc( ( 100% - 40px ) / 3 ); }
.eb-product-carousel-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 40px;
	height: 40px;
	margin-top: -26px;
	padding: 0;
	border: 1px solid #00b3a7;
	border-radius: 50%;
	background: #fff;
	color: #00b3a7;
	font-size: 26px;
	line-height: 36px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transition: background-color 0.2s, color 0.2s;
}
.eb-product-carousel-nav[hidden] { display: none; }
.eb-product-carousel-nav:hover,
.eb-product-carousel-nav:focus { background: #00b3a7; color: #fff; }
.eb-product-carousel-nav:focus-visible { outline: 2px solid #1f2933; outline-offset: 2px; }
.eb-product-carousel-nav.is-prev { left: -14px; }
.eb-product-carousel-nav.is-next { right: -14px; }

/* Controls below the track: progress bar on the left, arrows on the right */
.eb-product-carousel-controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 8px; }
.eb-product-carousel-progress { position: relative; flex: 0 1 220px; height: 4px; background: #e0e0e0; border-radius: 2px; overflow: hidden; }
.eb-product-carousel-progress-bar { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #1f2933; border-radius: 2px; }
.eb-product-carousel-arrows { display: flex; gap: 16px; }
.eb-product-carousel--bottom-nav .eb-product-carousel-nav {
	position: static;
	width: 40px;
	height: 40px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #1f2933;
	font-size: 30px;
	line-height: 40px;
	box-shadow: none;
}
.eb-product-carousel--bottom-nav .eb-product-carousel-nav[hidden] { display: block; visibility: visible; color: #c5cad0; cursor: default; }
.eb-product-carousel--bottom-nav .eb-product-carousel-nav:hover,
.eb-product-carousel--bottom-nav .eb-product-carousel-nav:focus { background: transparent; color: #00b3a7; }
.eb-product-carousel--bottom-nav .eb-product-carousel-nav[hidden]:hover { color: #c5cad0; }
.eb-product-carousel--bottom-nav .eb-product-carousel-nav.is-prev,
.eb-product-carousel--bottom-nav .eb-product-carousel-nav.is-next { left: auto; right: auto; }
.eb-product-carousel.is-single .eb-product-carousel-controls { display: none; }

/* ------------------------------------------------------------------ */
/* List: image on the left, a technical table on the right             */
/* ------------------------------------------------------------------ */
.eb-product-list { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; }
.eb-product-list-group { margin: 0 0 12px; }
.eb-product-list-group + .eb-product-list-group { margin-top: 28px; }
.eb-product-list-group-title { margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid #00b3a7; font-size: 1.25rem; }
.eb-product-list-group-title a { color: inherit; text-decoration: none; }
.eb-product-list-group-title a:hover,
.eb-product-list-group-title a:focus { color: #00b3a7; }
.eb-product-row {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 24px;
	margin: 0;
	padding: 20px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.eb-product-row:hover { border-color: #00b3a7; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }
.eb-product-row-image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: #fff;
}
.eb-product-row-image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.eb-product-row-image.is-placeholder img { max-width: 50%; max-height: 50%; opacity: 0.85; }
.eb-product-row-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.eb-product-row-title { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.eb-product-row-title a { color: #1f2933; text-decoration: none; }
.eb-product-row-title a:hover,
.eb-product-row-title a:focus { color: #00b3a7; }
.eb-product-row-table { width: 100%; max-width: 640px; border-collapse: collapse; font-size: 0.9rem; }
.eb-product-row-table th,
.eb-product-row-table td { padding: 6px 12px 6px 0; border-bottom: 1px solid #eef0f2; text-align: left; vertical-align: top; }
.eb-product-row-table th { width: 45%; font-weight: 400; color: #666; }
.eb-product-row-table td { color: #1f2933; font-weight: 600; }
.eb-product-row-table td .eb-product-row-unit { font-weight: 400; color: #666; }
.eb-product-row-table tr:last-child th,
.eb-product-row-table tr:last-child td { border-bottom: 0; }
.eb-product-row-more { margin-top: auto; font-size: 0.9rem; font-weight: 600; color: #00b3a7; text-decoration: none; }
.eb-product-row-more::after { content: " \2192"; }
.eb-product-row-more:hover,
.eb-product-row-more:focus { text-decoration: underline; color: #00b3a7; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media ( max-width: 1024px ) {
	.eb-product-cards--cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.eb-product-carousel-track > .eb-product-card,
	.eb-product-carousel--cols-4 .eb-product-carousel-track > .eb-product-card { flex-basis: calc( ( 100% - 40px ) / 3 ); }
}
@media ( max-width: 767px ) {
	.eb-product-cards--cols-3,
	.eb-product-cards--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.eb-product-carousel-track > .eb-product-card,
	.eb-product-carousel--cols-3 .eb-product-carousel-track > .eb-product-card,
	.eb-product-carousel--cols-4 .eb-product-carousel-track > .eb-product-card { flex-basis: calc( ( 100% - 20px ) / 2 ); }
	.eb-product-carousel-nav.is-prev { left: 4px; }
	.eb-product-carousel-nav.is-next { right: 4px; }
	.eb-product-row { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 16px; }
}
@media ( max-width: 480px ) {
	.eb-product-cards--cols-2,
	.eb-product-cards--cols-3,
	.eb-product-cards--cols-4 { grid-template-columns: minmax(0, 1fr); }
	.eb-product-carousel-track > .eb-product-card,
	.eb-product-carousel--cols-2 .eb-product-carousel-track > .eb-product-card,
	.eb-product-carousel--cols-3 .eb-product-carousel-track > .eb-product-card,
	.eb-product-carousel--cols-4 .eb-product-carousel-track > .eb-product-card { flex-basis: 78%; }
	.eb-product-row { grid-template-columns: minmax(0, 1fr); }
	.eb-product-row-image { max-width: 220px; margin: 0 auto; }
	.eb-product-row-table th { width: 50%; }
}