/**
 * Single Product Page Styles
 *
 * Covers: page layout, gallery, product info, accordions,
 * infographics carousel, video section, you-may-like cards.
 * All selectors match template-parts/product/*.php class names.
 * Tokens from variables.css throughout — no hardcoded colors.
 *
 * @package Wayfinder
 */

/* ============================================================
   Page wrapper
   ============================================================ */

.product-page {
	max-width: 1400px;
	margin: 0 auto;
	padding: 2rem 3rem;
	background: #fff;
}

/* ============================================================
   Breadcrumbs
   ============================================================ */

.product-breadcrumbs {
	padding: 1rem 0 0.5rem;
	font-size: 0.8rem;
	color: #888;
}

.product-breadcrumbs .woocommerce-breadcrumb {
	color: #888;
}

.product-breadcrumbs .woocommerce-breadcrumb a {
	color: #888;
	text-decoration: none;
}

.product-breadcrumbs .woocommerce-breadcrumb a:hover {
	color: var(--color-navy);
}

/* ============================================================
   Top grid — gallery (55%) + info (45%)
   ============================================================ */

.product-page__top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
	padding: 2rem 0;
}

/*
 * min-width: 0 overrides CSS Grid's default min-width: auto.
 * Without it, grid children refuse to shrink below their
 * intrinsic content width and blow out the fr allocations.
 */
.product-page__gallery,
.product-page__info {
	min-width: 0;
}

.product-page__info {
	position: sticky;
	top: 80px;
	align-self: start;
}

/* ============================================================
   Sections below the top grid
   ============================================================ */

.product-video {
	width: 100%;
	max-width: 100%;
	margin: 0;
	position: relative;
	background: transparent;
	overflow: hidden;
	padding: 0;
}

.product-video--width-constrained {
	max-width: 1400px;
	margin: 0 auto;
	padding: 3rem;
}

.product-video--mp4 {
	aspect-ratio: 16 / 9;
}

.product-video--youtube {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.product-video__player {
	width:   100%;
	display: block;
}

/* ============================================================
   Gallery — left column
   ============================================================ */

.gallery {
	display: flex;
	flex-direction: column;
}

/* Thumbnail 2x2 grid — clicking opens Wayfinder Lightbox; JS pages through groups of 4 */
.gallery__thumbs {
	position: relative;
	overflow: visible;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.gallery__thumb {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	cursor: zoom-in;
	border: 2px solid transparent;
	border-radius: 4px;
	background: var(--color-card-bg);
	padding: 0;
	transition: border-color 0.15s ease;
}

/*
 * Explicit hidden rules — the JS sets element.hidden = true on non-active
 * pages. UA stylesheet [hidden]{display:none} can be overridden by author
 * CSS or global resets; these rules guarantee correct behaviour.
 */
.gallery__thumb[hidden],
.gallery__placeholder[hidden] {
	display: none;
}


/* ============================================================
   Wayfinder Lightbox
   ============================================================ */

body.wf-lightbox-open {
	overflow: hidden;
}

.wf-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: wf-lightbox-fade-in 0.15s ease;
}

@keyframes wf-lightbox-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.wf-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--lb-backdrop-opacity, 0.88));
}

.wf-lightbox__modal {
	position: relative;
	z-index: 1;
	width: 80vw;
	height: 80vh;
	max-width: 1200px;
	background: var(--lb-interior, #EDEDED);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.wf-lightbox__header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	background: var(--color-navy);
	color: #fff;
}

.wf-lightbox__counter {
	font-size: 0.875rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.03em;
}

.wf-lightbox__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: none;
	background: transparent;
	color: #fff;
	cursor: pointer;
	border-radius: 4px;
	padding: 0;
	transition: background 0.15s ease;
}

.wf-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.15);
}

.wf-lightbox__close:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

.wf-lightbox__stage {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: 0;
}

.wf-lightbox__canvas {
	position: relative;
	flex: 1 1 auto;
	height: 100%;
	overflow: hidden;
	cursor: zoom-in;
	user-select: none;
}

.wf-lightbox__canvas.is-zoomed {
	cursor: grab;
}

.wf-lightbox__canvas.is-zoomed:active {
	cursor: grabbing;
}

/* FIX 4 — two stacked images; active fades in, inactive fades out */
.wf-lightbox__image {
	position: absolute;
	inset: 0;
	margin: auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	transform-origin: center center;
	opacity: 0;
	transition: opacity 200ms ease;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.wf-lightbox__image.is-active {
	opacity: 1;
}

.wf-lightbox__nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 3rem;
	height: 3rem;
	margin: 0 0.5rem;
	border: none;
	background: transparent;
	color: var(--color-navy);
	cursor: pointer;
	border-radius: 4px;
	padding: 0;
	transition: background 0.15s ease;
}

.wf-lightbox__nav:hover {
	background: rgba(43, 49, 87, 0.1);
}

.wf-lightbox__nav:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

.wf-lightbox__thumbs {
	flex: 0 0 auto;
	padding: 0.5rem;
	background: var(--lb-interior, #EDEDED);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wf-lightbox__thumbs-list {
	display: flex;
	gap: 0.375rem;
	justify-content: center;
}

.wf-lightbox__thumb {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	border: 2px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	background: var(--color-card-bg);
	padding: 0;
	transition: border-color 0.15s ease;
}

.wf-lightbox__thumb:hover {
	border-color: var(--color-navy);
}

.wf-lightbox__thumb.is-active {
	border-color: var(--color-orange);
}

.wf-lightbox__thumb:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

.wf-lightbox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 767px) {
	.wf-lightbox__modal {
		width: 100vw;
		height: 100dvh;
		max-width: none;
		border-radius: 0;
	}

	.wf-lightbox__nav {
		width: 2.5rem;
		height: 2.5rem;
		margin: 0 0.25rem;
	}
}

.gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gallery__thumb:hover,
.gallery__thumb.is-active {
	border-color: var(--color-navy);
}

.gallery__thumb:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

/* Placeholder tiles — fill the last page to keep the 2x2 grid even */
.gallery__placeholder {
	background: var(--color-card-bg);
	width: 100%;
	aspect-ratio: 3 / 4;
	display: block;
}

/* Gallery prev/next + dot pagination wrapper */
.gallery__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 0;
}

.gallery__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 4px;
	color: var(--color-navy);
	cursor: pointer;
	flex-shrink: 0;
	transition: color 0.2s, opacity 0.2s;
}

.gallery__nav svg {
	width: 14px;
	height: 14px;
}

.gallery__nav:hover:not(:disabled) {
	color: var(--color-orange);
}

.gallery__nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.gallery__nav:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

/* Dot pagination */
.gallery__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.gallery__dot {
	width: 24px;
	height: 6px;
	border-radius: 3px;
	border: none;
	background: #ccc;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s;
}

.gallery__dot.is-active,
.gallery__dot[aria-selected="true"] {
	background: var(--color-navy);
	width: 32px;
}

.gallery__dot:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

/* ============================================================
   Product info — right column
   ============================================================ */

.product-info {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Title */
.product__title {
	font-family: var(--font-heading);
	font-size: 2rem;
	text-transform: uppercase;
	margin: 0;
	color: var(--color-dark-text);
	letter-spacing: 0.01em;
}

/* SKU */
.product__sku {
	font-size: 13px;
	color: #888;
	margin: 0;
}

/* Price */
.product__price {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-dark-text);
	margin: 0;
}

.product__price .price ins {
	text-decoration: none;
}

.product__price .price del {
	opacity: 0.5;
	font-size: 0.85em;
}

/* Variant swatches */
.product__swatches-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.product__swatch-label {
	display: block;
	font-family: var(--font-heading);
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-dark-text);
	margin: 0;
}

.product__swatch-value {
	color: var(--color-dark-text);
	font-family: var(--font-heading);
}

.product__swatches {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.product__swatches-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.swatch--image {
	display: block;
	width: 80px;
	height: 80px;
	border: 2px solid #e0e0e0;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.2s;
}

.swatch--image:hover {
	border-color: var(--color-navy);
}

.swatch--active {
	border-color: var(--color-navy) !important;
}

.swatch--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.swatch__placeholder {
	width: 100%;
	height: 100%;
	background: var(--color-card-bg);
}

/* Amazon buy button */
.btn--amazon {
	display: block;
	width: 100%;
	padding: 1rem;
	background: var(--color-orange);
	color: #fff;
	text-align: center;
	font-family: var(--font-heading);
	font-size: 1.25rem;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	box-sizing: border-box;
}

.btn--amazon:hover {
	background: #e56a2e;
}

.btn--amazon:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 3px;
}

/* NEW badge — teal circle overlapping top-left of first image tile */
.gallery__thumb--first {
	position: relative;
	overflow: visible;
}

.badge--new {
	position: absolute;
	top: -12px;
	right: -12px;
	left: auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-teal);
	color: #fff;
	font-family: var(--font-heading);
	font-size: 1rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	pointer-events: none;
}

/* Description label */
.product__desc-label {
	font-family: var(--font-heading);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-dark-text);
	margin: 0 0 0.5rem;
	border-top: 1px solid #e0e0e0;
	padding-top: 1rem;
}

/* Description + Read More */
.product__description {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.product__desc-short {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--color-dark-text);
	margin: 0;
}

.product__desc-short.is-hidden {
	display: none;
}

.product__desc-full {
	display: none;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--color-dark-text);
	margin: 0;
}

.product__desc-full.is-expanded {
	display: block;
}

.product__read-more-btn {
	background: none;
	border: none;
	padding: 0;
	margin-top: 0.25rem;
	color: var(--color-orange);
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	text-align: left;
}

/* ============================================================
   Accordion tabs (Specs / Materials / Instructions)
   ============================================================ */

.product__accordion {
	border-top: 1px solid #e0e0e0;
}

.product__accordion:last-of-type {
	border-bottom: 1px solid #e0e0e0;
}

.product__accordion-trigger {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 1rem 0;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--font-heading);
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-dark-text);
	text-align: left;
}

.product__accordion-trigger:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
	border-radius: 2px;
}

.product__accordion-icon {
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1;
	flex-shrink: 0;
}

.product__accordion-panel {
	padding: 0 0 1rem;
	font-size: 0.9rem;
	line-height: 1.6;
}

.product__accordion-panel[hidden] {
	display: none;
}

.product__accordion-panel dl {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 0.25rem 1rem;
	margin: 0;
}

.product__accordion-panel dt {
	font-weight: 700;
}

.product__accordion-panel dd {
	margin: 0;
}

.product__accordion-content {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--color-dark-text);
}

.product__accordion-content p { margin: 0 0 var(--space-sm); }
.product__accordion-content ul,
.product__accordion-content ol {
	margin: 0 0 var(--space-sm);
	padding-left: var(--space-lg);
}

.product-description__bullets {
	list-style: disc;
	list-style-position: outside;
	padding-left: 1.5em;
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--color-dark-text);
}

.product-description__bullets li {
	margin-bottom: 0.25rem;
}

/* ============================================================
   Infographics carousel
   ============================================================ */

.infographics {
	padding: 3rem;
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
	background: #fff;
}

.infographics__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
}

.infographics__title {
	font-family: var(--font-heading);
	font-size: 1.75rem;
	letter-spacing: 0.01em;
	margin: 0;
	color: var(--color-dark-text);
}

.infographics__nav-wrap {
	display: flex;
	gap: 0.5rem;
}

.infographics__nav {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--color-navy);
	background: transparent;
	color: var(--color-navy);
	cursor: pointer;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s;
	padding: 0;
}

.infographics__nav:hover {
	background: var(--color-navy);
	color: #fff;
}

.infographics__nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.infographics__nav:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

.infographics__nav[hidden] {
	display: none;
}

.infographics__track {
	display: flex;
	gap: 24px;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

.infographic-card {
	flex: 0 0 calc((100% - 48px) / 3);
	min-width: 0;
}

.infographic-card__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: 0.75rem;
}

.infographic-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.infographic-card__label {
	font-family: var(--font-heading);
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 0.25rem;
	color: var(--color-dark-text);
}

.infographic-card__body {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-dark-text);
	margin: 0;
}

/* ============================================================
   Product video section
   ============================================================ */

.product-video__figure {
	position: relative;
	margin: 0;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.product-video__poster {
	position: absolute;
	inset: 0;
}

.product-video__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.3);
	border: none;
	cursor: pointer;
	color: #fff;
	font-size: 64px;
	transition: background 0.15s ease;
}

.product-video__play:hover {
	background: rgba(0, 0, 0, 0.5);
}

.product-video__play:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: -4px;
}

.product-video__embed {
	position: absolute;
	inset: 0;
}

.product-video__embed[hidden] {
	display: none;
}

.product-video--image .product-video__figure {
	aspect-ratio: auto;
}

.product-video--image .product-video__img {
	position: static;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* ============================================================
   You May Like
   ============================================================ */

.you-may-like {
	padding: 3rem 3rem;
	background: #fff;
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
}

.you-may-like__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
}

.you-may-like__title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	letter-spacing: 0.08em;
	margin: 0;
	color: var(--color-dark-text);
}

.you-may-like__nav {
	display: flex;
	gap: var(--space-sm);
}

.yml-nav {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--color-navy);
	background: transparent;
	color: var(--color-navy);
	cursor: pointer;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	padding: 0;
}

.yml-nav:hover {
	background: var(--color-navy);
	color: #fff;
}

.yml-nav:focus-visible {
	outline: 2px solid var(--color-orange);
	outline-offset: 2px;
}

/* Cards — 4-column grid */
.you-may-like__track {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

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

.product-card__image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-card-bg);
}

.product-card__image img,
.product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.product-card a:hover .product-card__img,
.product-card a:hover .product-card__image img {
	transform: scale(1.03);
}

.product-card__info {
	padding: 1rem;
}

.product-card__title {
	font-size: 0.9rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
	color: var(--color-dark-text);
	line-height: 1.3;
}

.product-card__price {
	font-size: 0.9rem;
	color: var(--color-dark-text);
	margin: 0;
}

.product-card__variants {
	font-style: italic;
	font-size: 14px;
	color: #888;
	margin: 0;
}

/* ============================================================
   Spec Sheet Download Link
   ============================================================ */

.product-specs__download {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.product-specs__download-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-orange, #FF7A3D);
	text-decoration: none;
	font-family: var(--font-body, 'Roboto', sans-serif);
	font-weight: 600;
	font-size: 14px;
}

.product-specs__download-link:hover {
	color: var(--color-navy, #2B3157);
	text-decoration: underline;
}

.product-specs__download-link svg {
	flex-shrink: 0;
}

/* ============================================================
   Responsive — tablet (768px – 1023px)
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
	.product-page__top {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-lg);
	}

	.product-page__info {
		top: 70px;
	}

	.infographic-card {
		flex: 0 0 calc((100% - 24px) / 2);
	}

	.you-may-like__track {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   Responsive — mobile (< 768px)
   ============================================================ */

@media (max-width: 767px) {
	.product-page {
		padding: 1rem;
	}

	.product-page__top {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.product-page__info {
		position: static;
	}

	.gallery__thumbs {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.gallery__thumbs::-webkit-scrollbar {
		display: none;
	}

	/* Full-width single-image carousel slide */
	.gallery__thumb {
		flex: 0 0 100%;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 4;
		scroll-snap-align: start;
	}

	/* PHP marks images at index >= 4 as hidden; on mobile they must be
	   in the scroll track (hidden only by offset, not display:none). */
	.gallery__thumb[hidden] {
		display: block;
	}

	/* Placeholder tiles are only needed to fill the desktop 2x2 grid. */
	.gallery__placeholder {
		display: none;
	}

	.infographics {
		padding: 2rem 1rem;
	}

	.infographic-card {
		flex: 0 0 100%;
	}

	.infographics__nav-wrap {
		display: none;
	}

	.you-may-like__track {
		grid-template-columns: repeat(2, 1fr);
	}

	.btn--amazon {
		width: 100%;
	}
}