/* -----------------------------------------------------------
   Defend.IT Systems – Product Page Dark Mode
   product-dark.css
----------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

	/* ------------------------------
	   Hero Content Overlay
	------------------------------ */
	.hero-content {
		background: rgba(255, 255, 255, 0.08);
		color: var(--text-1);
	}

		.hero-content h1 {
			color: var(--text-1);
		}

	/* ------------------------------
	   Product Card Wrapper
	------------------------------ */
	.di-product-card {
		background-color: var(--surface-2);
		border: 1px solid var(--border-medium);
	}

	/* ------------------------------
	   Breadcrumbs
	------------------------------ */
	.breadcrumbs {
		color: var(--text-3);
	}

	.crumb {
		color: var(--text-1);
	}

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

	.crumb-separator {
		color: var(--text-3);
		opacity: .6;
	}

	/* ------------------------------
	   Product Main Layout
	------------------------------ */
	.description-frame {
		background: var(--surface-2);
		border: 1px solid var(--border-light);
		color: var(--text-1);
	}

		.description-frame p,
		.description-frame ul,
		.description-frame ol {
			color: var(--text-2);
		}

	/* ------------------------------
	   Carousel
	------------------------------ */
	.carousel-item img {
		box-shadow: 0 4px 16px rgba(0,0,0,0.45);
		background: var(--surface-2);
	}

	.carousel-control-prev-icon,
	.carousel-control-next-icon {
		background-color: rgba(255, 255, 255, 0.15);
	}

	.carousel-control-prev:hover .carousel-control-prev-icon,
	.carousel-control-next:hover .carousel-control-next-icon {
		background-color: rgba(255, 255, 255, 0.25);
	}

	/* ------------------------------
	   Image Gallery
	------------------------------ */
	.product-images .main-image img {
		background: var(--surface-2);
		box-shadow: 0 4px 12px rgba(0,0,0,0.45);
	}

	.thumbnail-strip .thumb {
		background: var(--surface-2);
		border: 1px solid var(--border-light);
	}

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

	/* ------------------------------
	   Product Summary
	------------------------------ */
	.short-desc {
		color: var(--text-2);
	}

	.price {
		color: var(--brand-secondary);
	}

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

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

	/* ------------------------------
	   Long Description
	------------------------------ */
	.product-description article {
		background: var(--surface-2);
		color: var(--text-1);
		box-shadow: 0 2px 6px rgba(0,0,0,0.35);
	}

	/* ------------------------------
	   Specifications Table
	------------------------------ */
	.spec-table {
		background: var(--surface-2);
		box-shadow: 0 2px 6px rgba(0,0,0,0.35);
	}

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

		.spec-table td {
			color: var(--text-2);
		}

	.spec-key {
		color: var(--text-1);
	}

	/* ------------------------------
	   Tags
	------------------------------ */
	.tag {
		background: var(--surface-2);
		color: var(--text-1);
		border: 1px solid var(--border-light);
	}

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

	/* ------------------------------
	   Product Grid
	------------------------------ */
	.product-card {
		background: var(--surface-2);
		box-shadow: 0 2px 6px rgba(0,0,0,0.35);
	}

		.product-card:hover {
			box-shadow: 0 4px 12px rgba(0,0,0,0.45);
		}

	.product-card-image {
		background: var(--surface-3);
	}

	.product-card-category {
		color: var(--text-3);
	}

	.product-card-summary {
		color: var(--text-2);
	}
}