/**
 * Glass Family Single Page Styles
 *
 * @package Plastpro
 * @since 1.0.0
 */

/* Breadcrumbs styles are now in shared breadcrumbs.css */

/* Ensure site-main allows overflow for sticky positioning */
body .site-main {
	overflow: visible;
}

/* Override site-container overflow-x for sticky positioning */
.glass-family-detail .site-container {
	overflow-x: visible;
}

/* Product Detail Section */
.glass-family-detail {
	padding: 1.5rem 0;
	background: #fff;
	overflow: visible; /* Allow sticky positioning to work */
}

.glass-family-detail-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5rem;
	align-items: start;
	overflow: visible; /* Allow sticky positioning to work */
}

/* Images Section */
.glass-family-images {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	position: -webkit-sticky; /* Safari support */
	position: sticky;
	top: calc(var(--masthead-h) + 1rem);
	align-self: start; /* Required for sticky to work in grid */
	z-index: 10; /* Ensure it stays above content when sticky */
}

.glass-family-main-image {
	width: 500px;
	height: 500px;
	overflow: hidden;
	flex-shrink: 0;
}

.glass-family-main-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.glass-family-thumbnails {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 100%;
	padding-left: 7rem;
}

.glass-family-thumbnail {
	width: 95px;
	height: 95px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color 0.3s ease;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f0;
}

.glass-family-thumbnail.active {
	border-color: var(--plastpro-orange, #E87722);
}

.glass-family-thumbnail img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Product Info Section */
.glass-family-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
}

.glass-family-header {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.glass-family-header .glass-family-title {
	margin-bottom: 1rem;
}

.glass-family-category {
	font-family: var(--plastpro-font-family, 'Montserrat', sans-serif);
	font-size: var(--font-size-small);
	font-weight: 700;
	line-height: 22px;
	color: var(--plastpro-gray, #7C878E);
	text-transform: uppercase;
	margin: 0;
}

.glass-family-title {
	font-family: var(--plastpro-font-family, 'Montserrat', sans-serif);
	font-size: var(--font-size-h2);
	font-weight: 700;
	line-height: 22px;
	color: #000;
	margin: 0;
}

.glass-family-code {
	font-family: var(--plastpro-font-family, 'Montserrat', sans-serif);
	font-size: var(--font-size-large);
	font-weight: 400;
	line-height: 22px;
	color: #000;
	margin: 0;
	text-transform: uppercase;
}

.glass-family-description {
	font-family: var(--plastpro-font-family, 'Montserrat', sans-serif);
	font-size: var(--font-size-large);
	font-weight: 400;
	line-height: 24px;
	color: #000;
	margin: 0;
}

.glass-family-description p {
	margin: 0 0 1rem 0;
}

.glass-family-description p:last-child {
	margin-bottom: 0;
}

/* Privacy Level */
.glass-family-privacy {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.glass-family-privacy-label-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.glass-family-privacy-arrow {
	width: 16px;
	height: 16px;
	color: #999;
	flex-shrink: 0;
}

.glass-family-privacy-label {
	font-family: var(--plastpro-font-family, 'Montserrat', sans-serif);
	font-size: var(--font-size-xs);
	font-weight: 700;
	line-height: 13px;
	color: #000;
	text-transform: uppercase;
	margin: 0;
	text-align: center;
}

.glass-family-privacy-image {
	margin-bottom: 1rem;
	text-align: center;
	width: 100%;
}

.glass-family-privacy-image img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.glass-family-privacy-scale {
	display: flex;
	gap: 2px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.glass-family-privacy-point {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: transform 0.2s ease;
}

.glass-family-privacy-point:hover {
	transform: scale(1.05);
}

.glass-family-privacy-point.active {
	transform: scale(1.1);
}

.glass-family-privacy-square {
	display: block;
	width: 28px;
	height: 28px;
}

.glass-family-privacy-point.active .glass-family-privacy-square {
	display: none;
}

.glass-family-privacy-square-active {
	display: block;
	width: 40px;
	height: 40px;
	position: relative;
	z-index: 1;
}

/* CTA Section styles are now in shared find-a-dealer.css */

/* Lite Design and Size Options Section (inside column 2) */
.glass-family-lite-options {
	margin-top: 2rem;
	padding-bottom: 2rem;
	width: 100%;
}

.glass-family-lite-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
	width: 100%;
}

.glass-family-lite-header-line {
	flex: 1;
	height: 1px;
	background: #E0E0E0;
}

.glass-family-lite-select {
	font-family: var(--plastpro-font-family, 'Montserrat', sans-serif);
	font-size: var(--font-size-xs);
	font-weight: 700;
	line-height: 13px;
	color: #000;
	text-transform: uppercase;
	white-space: nowrap;
	text-align: center;
}

.glass-family-section-title {
	font-family: var(--plastpro-font-family, 'Montserrat', sans-serif);
	font-size: var(--font-size-large);
	font-weight: 700;
	line-height: 22px;
	color: var(--plastpro-black, #1D252D);
	text-transform: uppercase;
	margin: 0 0 1.5rem 0;
}

.glass-family-lite-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1rem;
	max-width: 100%;
}

.glass-family-lite-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
	opacity: 0.5;
	filter: grayscale(100%);
}

.glass-family-lite-item:hover {
	opacity: 0.7;
	filter: grayscale(50%);
}

.glass-family-lite-item.selected {
	opacity: 1;
	filter: grayscale(0%);
	transform: scale(1.1);
}

.glass-family-lite-cutout-image {
	width: 45px;
	height: 95px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.glass-family-lite-cutout-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.glass-family-lite-size {
	font-family: var(--plastpro-font-family, 'Montserrat', sans-serif);
	font-size: var(--font-size-xs);
	font-weight: 400;
	line-height: 16px;
	color: #7C878E;
	text-align: center;
	margin: 0;
	transition: color 0.3s ease;
}

.glass-family-lite-item.selected .glass-family-lite-size {
	color: var(--plastpro-orange, #E87722);
}

/* Specifications section styles are now in shared product-specs-tabs.css */

/* Glass family specific styles for specification file link */
.glass-family-specification-file {
	margin-bottom: 1rem;
}

.glass-family-spec-link {
	font-family: var(--plastpro-font-family, 'Montserrat', sans-serif);
	font-size: var(--font-size-h6);
	font-weight: 400;
	line-height: 24px;
	color: var(--plastpro-orange, #E87722);
	text-decoration: none;
	transition: color 0.3s ease;
}

.glass-family-spec-link:hover {
	color: #C65F1A;
	text-decoration: underline;
}

/* Door Series Section */
.glass-family-door-series {
	width: 100%;
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid #E0E0E0;
}

.glass-family-series-group {
	margin-bottom: 3rem;
	width: 100%;
	padding-bottom: 3rem;
	border-bottom: 1px solid #E0E0E0;
}

.glass-family-series-group:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.glass-family-series-title {
	font-family: var(--plastpro-font-family, 'Montserrat', sans-serif);
	font-size: var(--font-size-small);
	font-weight: 400;
	line-height: 22px;
	color: var(--plastpro-black, #1D252D);
	text-transform: uppercase;
	margin: 0 0 1rem 0;
}

.glass-family-door-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(67px, 1fr));
	gap: 1rem;
	max-width: 100%;
}

.glass-family-door-item {
	width: 67px;
	height: 150px;
	overflow: hidden;
}

.glass-family-door-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Responsive */
@media (max-width: 1024px) {
	.glass-family-detail-wrapper {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	
	.glass-family-images {
		position: static;
	}
	
	.glass-family-main-image {
		width: 100%;
		max-width: 500px;
	}
	
	.glass-family-privacy-label {
		text-align: left;
	}
	
	.glass-family-privacy-bar {
		justify-content: flex-start;
	}
	
	.glass-family-lite-header {
		max-width: 100%;
		margin-right: 0;
		padding-right: 0;
	}
	
}

@media (max-width: 768px) {
	.glass-family-lite-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.glass-family-door-grid {
		grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
	}
}

@media (max-width: 480px) {
	.glass-family-lite-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}