.hero-content {
	position: absolute;
	bottom: 2rem;
	left: 2rem;
	padding: 1.4rem 1.8rem;
	background: rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--brand-light);
	border-radius: 10px;
	max-width: 520px;
}
	.hero-content h1 {
	color: var(--brand-light);
	}

/* ------------------------------
   13. Product Page Layout
------------------------------ */
.di-product-card {
	background-color: #e9ecef; /* slightly darker grey */
	border-radius: 0.5rem;
	transition: all 0.25s ease;
	border: 1px solid transparent;
	position: relative;
	overflow: visible; /* IMPORTANT */
}


.product-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-xl) var(--space-md);
}

/* Base container */
.breadcrumbs {
	font-size: .9rem;
	margin-bottom: var(--space-md);
	color: #666;
	opacity: 0;
	transform: translateY(4px);
	animation: breadcrumbFadeIn .4s ease-out forwards;
}

.swatch {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid #ccc;
	display: inline-block;
	margin-right: 8px;
}


/* Fade-in animation */
@keyframes breadcrumbFadeIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Track */
.breadcrumbs-track {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	flex-wrap: nowrap;
	white-space: nowrap;
}

/* Crumbs */
.crumb {
	color: var(--brand-primary);
	text-decoration: none;
	position: relative;
	transition: color .2s ease, transform .2s ease;
}

	/* Hover micro-lift */
	.crumb:hover {
		color: var(--brand-secondary);
		transform: translateY(-1px);
	}

/* Chevron separator */
.crumb-separator {
	display: inline-flex;
	align-items: center;
	opacity: .6;
	transition: opacity .2s ease;
}

.crumb:hover + .crumb-separator {
	opacity: 1;
}

/* Separator animation */
.crumb-separator {
	color: #aaa;
	opacity: .7;
	transition: opacity .2s ease;
}

.crumb:hover + .crumb-separator {
	opacity: 1;
}

/* Main layout: images + summary */
.product-main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	margin-bottom: var(--space-xl);
}

.product-hero-image-wrapper {
	max-height: 480px;
	overflow: hidden;
	border-radius: 12px;
}

.description-frame {
	background: #f8f9fa; /* same light grey tone as spec alt rows */
	border: 1px solid #e2e2e2; /* subtle border */
	border-radius: 6px;
	padding: 20px 24px; /* tighter spacing */
	line-height: 1.55;
}

	/* Optional: tighten spacing inside markdown */
	.description-frame p,
	.description-frame ul,
	.description-frame ol {
		margin-bottom: 0.75rem;
	}

.product-hero-image {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.carousel-inner {
	max-width: 600px; /* controls the width */
	margin: 0 auto; /* centers the carousel */
}

.carousel-item img {
	max-height: 350px; /* controls the height */
	width: auto; /* prevents stretching */
	margin: 0 auto; /* centers the image */
	object-fit: contain; /* keeps full image visible */
	border-radius: 12px;
}

.carousel-zoom {
	transition: transform 0.3s ease;
	cursor: zoom-in;
}

	.carousel-zoom:hover {
		transform: scale(1.15);
	}

.carousel-item img {
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.carousel-item {
	padding: 10px 0;
}

/* Make carousel arrows high‑contrast */
.carousel-control-prev-icon,
.carousel-control-next-icon {
	filter: invert(1) brightness(200%);
	opacity: 0.9;
}

/* Optional: add a subtle circular background for visibility */
.carousel-control-prev,
.carousel-control-next {
	width: 48px;
	height: 48px;
	top: 50%;
	transform: translateY(-50%);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
	background-color: rgba(0, 0, 0, 0.55); /* dark circle */
	border-radius: 50%;
	padding: 12px;
}

/* Hover effect for clarity */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
	background-color: rgba(0, 0, 0, 0.85);
}

/* ------------------------------
   14. Image Gallery
------------------------------ */

.product-images {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	max-width: 480px;
	margin: 0 auto;
}

	.product-images .main-image {
		width: 100%;
		max-width: 480px; /* keeps image at a sane size */
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

		.product-images .main-image img {
			width: 100%;
			height: auto;
			object-fit: contain;
			border-radius: var(--radius-md);
			box-shadow: 0 4px 12px rgba(0,0,0,0.08);
			background: white;
			padding: var(--space-sm);
		}

.thumbnail-strip {
	display: flex;
	gap: var(--space-sm);
	overflow-x: auto;
	padding-bottom: var(--space-xs);
}

	.thumbnail-strip .thumb {
		width: 80px;
		height: 80px;
		object-fit: contain;
		border-radius: var(--radius-sm);
		background: white;
		padding: var(--space-xs);
		border: 1px solid #e1e1e1;
		cursor: pointer;
		transition: var(--transition-fast);
	}

		.thumbnail-strip .thumb:hover {
			border-color: var(--brand-secondary);
			box-shadow: 0 2px 6px rgba(0,0,0,0.08);
		}

		


/* ------------------------------
   15. Product Summary (Right Column)
------------------------------ */

.product-summary h1 {
	font-size: 2rem;
	margin-bottom: var(--space-sm);
}

.short-desc {
	font-size: 1.05rem;
	color: #444;
	margin-bottom: var(--space-md);
}

.price {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--brand-secondary);
	margin-bottom: var(--space-md);
}

.datasheet-link {
	display: inline-block;
	margin-top: var(--space-sm);
	color: var(--brand-primary);
	font-weight: 600;
	text-decoration: none;
	transition: var(--transition-fast);
}

	.datasheet-link:hover {
		color: var(--brand-secondary);
	}

/* ------------------------------
   16. Long Description
------------------------------ */

.product-description {
	margin-bottom: var(--space-xl);
}

	.product-description article {
		background: var(--brand-light);
		padding: var(--space-lg);
		border-radius: var(--radius-md);
		box-shadow: 0 2px 6px rgba(0,0,0,0.04);
	}

	/* Markdown headings inside description */
	.product-description h2,
	.product-description h3 {
		margin-top: var(--space-md);
	}

/* ------------------------------
   17. Specifications Table
------------------------------ */

.product-specs {
	margin-bottom: var(--space-xl);
}

.spec-table {
	width: 100%;
	border-collapse: collapse;
	background: white;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

	.spec-table tr:nth-child(even) {
		background: var(--brand-light);
	}

	.spec-table td {
		padding: var(--space-sm) var(--space-md);
		font-size: .95rem;
	}

.spec-key {
	font-weight: 600;
	color: var(--brand-primary);
	width: 35%;
}

/* ------------------------------
   18. Tags
------------------------------ */

.product-tags {
	margin-bottom: var(--space-xl);
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.tag {
	background: var(--brand-light);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	font-size: .85rem;
	text-decoration: none;
	color: var(--brand-primary);
	border: 1px solid #e1e1e1;
	transition: var(--transition-fast);
}

	.tag:hover {
		background: white;
		border-color: var(--brand-secondary);
		color: var(--brand-secondary);
		box-shadow: 0 2px 6px rgba(0,0,0,0.06);
	}

/* ------------------------------
   18. Product Grid
------------------------------ */

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--space-lg);
	margin-top: var(--space-lg);
}

.product-card {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	transition: transform .15s ease, box-shadow .15s ease;
}

	.product-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 4px 12px rgba(0,0,0,0.12);
	}

.product-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.product-card-image {
	width: 100%;
	height: 180px;
	object-fit: contain;
	background: #f7f7f7;
}

.product-card-body {
	padding: var(--space-md);
}

.product-card-title {
	font-size: 1.1rem;
	margin-bottom: var(--space-sm);
}

.product-card-category {
	font-size: .85rem;
	color: #777;
	margin-bottom: var(--space-sm);
}

.product-card-summary {
	font-size: .9rem;
	color: #555;
}