/**
 * EMOBILITY FOR ALL - single product page (Phase 9).
 *
 * Registered alongside (and depends on) the Phase 5 design system stylesheet
 * (public.css) - only new component classes live here (gallery, lightbox,
 * purchase panel, specs table); every color, spacing, and type token comes
 * from public.css's :root custom properties, and the product card in the
 * "You May Also Like" grid reuses Phase 8's existing card styles untouched.
 *
 * Enqueued only on `/products/{product-slug}/` pages (see
 * Product_Single::maybe_enqueue_assets()).
 *
 * Breakpoints match public.css: sm 576  md 768  lg 992  xl 1200.
 */

.emobility-product {
	padding-block: var( --emobility-space-8 );
}

/* --- Main layout: gallery + summary -------------------------------------- */

.emobility-product__main {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	grid-template-areas:
		"gallery"
		"summary"
		"description";
	gap: var( --emobility-space-8 );
	margin-bottom: var( --emobility-space-12 );
}

@media ( min-width: 992px ) {
	.emobility-product__main {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
		/* Summary spans both rows of column 2 so it stays beside the gallery
		   AND the description below it - that tall spanned area is what lets
		   its `position: sticky` (below) keep price/Add to Cart in view while
		   a long description scrolls past in column 1. */
		grid-template-areas:
			"gallery summary"
			"description summary";
		align-items: start;
	}
}

/* --- Gallery -------------------------------------------------------------- */

.emobility-gallery {
	grid-area: gallery;
}

.emobility-gallery__main {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var( --emobility-color-surface-muted );
	border-radius: var( --emobility-radius-lg );
	overflow: hidden;
}

.emobility-gallery__zoom {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	background: none;
	border: none;
	cursor: zoom-in;
}

.emobility-gallery__zoom img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.emobility-gallery__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background: var( --emobility-color-surface );
	border: var( --emobility-border-width ) solid var( --emobility-color-border );
	border-radius: var( --emobility-radius-full );
	font-size: var( --emobility-text-xl );
	line-height: 1;
	color: var( --emobility-color-text );
	cursor: pointer;
	box-shadow: var( --emobility-shadow-sm );
}

.emobility-gallery__arrow:hover {
	color: var( --emobility-primary-600 );
	border-color: var( --emobility-primary-400 );
}

.emobility-gallery__arrow--prev {
	left: var( --emobility-space-3 );
}

.emobility-gallery__arrow--next {
	right: var( --emobility-space-3 );
}

.emobility-gallery__thumbs {
	display: flex;
	gap: var( --emobility-space-3 );
	margin-top: var( --emobility-space-4 );
	overflow-x: auto;
	padding-bottom: var( --emobility-space-2 );
}

/* On wider screens the reference design puts the thumbnail rail to the
   left of the main image instead of below it - `row-reverse` puts
   `.emobility-gallery__thumbs` (second in the markup) on the left and
   `.emobility-gallery__main` (first) on the right without reordering the
   DOM (keyboard/reading order stays main-image-first). */
@media ( min-width: 768px ) {
	.emobility-gallery {
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-start;
		gap: var( --emobility-space-4 );
	}

	.emobility-gallery__main {
		flex: 1 1 auto;
		min-width: 0;
	}

	.emobility-gallery__thumbs {
		flex: 0 0 auto;
		flex-direction: column;
		/* Shows 5 full thumbnails (each 4.5rem square, --emobility-space-3
		   gap between them) plus half of a 6th peeking beneath - a visual
		   cue that more images are scrollable - rather than either hiding
		   the 6th entirely or showing it in full. The scrollbar itself is
		   hidden (below) so it doesn't need reserved width. */
		width: 4.5rem;
		max-height: calc( 5 * 4.5rem + 5 * var( --emobility-space-3 ) + 2.25rem );
		margin-top: 0;
		padding-bottom: 0;
		overflow-x: hidden;
		overflow-y: auto;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* legacy Edge/IE */
	}

	.emobility-gallery__thumbs::-webkit-scrollbar {
		display: none; /* Chrome/Safari/Edge Chromium */
	}

	/* Fades the peeking 6th thumbnail toward transparent so it visibly
	   trails off rather than ending in a hard crop - only applied once a
	   6th thumbnail actually exists, so a 5-or-fewer-image gallery's last
	   (fully visible, nothing more to scroll to) thumbnail is never faded. */
	.emobility-gallery__thumbs:has( .emobility-gallery__thumb:nth-child( 6 ) ) {
		mask-image: linear-gradient( to bottom, black calc( 100% - 3rem ), transparent 100% );
		-webkit-mask-image: linear-gradient( to bottom, black calc( 100% - 3rem ), transparent 100% );
	}
}

.emobility-gallery__thumb {
	flex: 0 0 auto;
	width: 4.5rem;
	height: 4.5rem;
	padding: 0;
	border-radius: var( --emobility-radius-md );
	border: 2px solid var( --emobility-color-border );
	background: var( --emobility-color-surface-muted );
	overflow: hidden;
	cursor: pointer;
}

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

.emobility-gallery__thumb:hover {
	border-color: var( --emobility-primary-300 );
}

.emobility-gallery__thumb.is-active {
	border-color: var( --emobility-primary-600 );
}

.emobility-gallery--empty .emobility-gallery__placeholder,
.emobility-gallery--empty {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --emobility-color-surface-muted );
	border: 1px dashed var( --emobility-color-border );
	border-radius: var( --emobility-radius-lg );
}

.emobility-gallery--empty .emobility-icon--image {
	width: 3.5rem;
	height: 3.5rem;
	color: var( --emobility-gray-400 );
}

.emobility-icon--image {
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'%3E%3C/rect%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'%3E%3C/circle%3E%3Cpath d='M21 15l-5-5L5 21'%3E%3C/path%3E%3C/svg%3E" );
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'%3E%3C/rect%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'%3E%3C/circle%3E%3Cpath d='M21 15l-5-5L5 21'%3E%3C/path%3E%3C/svg%3E" );
}

/* --- Lightbox --------------------------------------------------------------- */

.emobility-lightbox {
	position: fixed;
	inset: 0;
	z-index: var( --emobility-z-modal );
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 15, 23, 42, 0.92 );
	padding: var( --emobility-space-8 );
}

.emobility-lightbox__img {
	max-width: 90vw;
	max-height: 85vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

.emobility-lightbox__close {
	position: absolute;
	top: var( --emobility-space-4 );
	right: var( --emobility-space-4 );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: rgba( 255, 255, 255, 0.1 );
	border: none;
	border-radius: var( --emobility-radius-full );
	color: var( --emobility-white );
	font-size: var( --emobility-text-2xl );
	line-height: 1;
	cursor: pointer;
}

.emobility-lightbox__close:hover {
	background: rgba( 255, 255, 255, 0.2 );
}

.emobility-lightbox__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	background: rgba( 255, 255, 255, 0.1 );
	border: none;
	border-radius: var( --emobility-radius-full );
	color: var( --emobility-white );
	font-size: var( --emobility-text-2xl );
	line-height: 1;
	cursor: pointer;
}

.emobility-lightbox__arrow:hover {
	background: rgba( 255, 255, 255, 0.2 );
}

.emobility-lightbox__arrow--prev {
	left: var( --emobility-space-4 );
}

.emobility-lightbox__arrow--next {
	right: var( --emobility-space-4 );
}

/* --- Summary / purchase panel ------------------------------------------------ */

.emobility-product__summary {
	display: flex;
	flex-direction: column;
	gap: var( --emobility-space-3 );
	grid-area: summary;
}

@media ( min-width: 992px ) {
	.emobility-product__summary {
		position: sticky;
		top: calc( var( --emobility-space-16 ) + var( --emobility-space-4 ) );
	}
}

.emobility-product__brand {
	display: inline-block;
	font-size: var( --emobility-text-xs );
	font-weight: var( --emobility-font-weight-semibold );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --emobility-primary-600 );
	text-decoration: none;
}

.emobility-product__title {
	margin: 0;
}

.emobility-product__sku {
	margin: 0;
}

.emobility-product__price {
	margin: var( --emobility-space-2 ) 0;
	flex-wrap: wrap;
}

.emobility-product__stock {
	display: flex;
	align-items: center;
	gap: var( --emobility-space-3 );
	margin: 0;
}

.emobility-product__form {
	display: flex;
	flex-direction: column;
	gap: var( --emobility-space-4 );
	padding-top: var( --emobility-space-2 );
}

.emobility-product__options {
	display: flex;
	flex-direction: column;
	gap: var( --emobility-space-4 );
}

.emobility-product__form .emobility-btn--lg {
	max-width: 320px;
}

@media ( max-width: 575px ) {
	.emobility-product__form .emobility-btn--lg {
		max-width: none;
	}
}

.emobility-product__meta {
	margin-top: var( --emobility-space-2 );
	padding-top: var( --emobility-space-4 );
	border-top: var( --emobility-border-width ) solid var( --emobility-color-border );
	font-size: var( --emobility-text-sm );
	display: flex;
	flex-direction: column;
	gap: var( --emobility-space-2 );
}

.emobility-product__meta a {
	color: var( --emobility-color-text );
	text-decoration: none;
}

.emobility-product__meta a:hover {
	color: var( --emobility-primary-600 );
}

.emobility-product__tags a:not( :last-child )::after {
	content: "";
}

/* --- Variation swatch groups ---------------------------------------------- */

/* "COLOUR" / "AIR CONDITIONING" / "CONTROL METHOD" - a small caps caption
   above each swatch row, distinct from .emobility-label's normal-case
   default (used elsewhere, e.g. the Quantity field) - scoped to
   .emobility-product__options so only these labels are affected. */
.emobility-product__options .emobility-label {
	font-size: var( --emobility-text-xs );
	font-weight: var( --emobility-font-weight-semibold );
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --emobility-color-text-muted );
}

.emobility-swatch-group {
	display: flex;
	flex-wrap: wrap;
	gap: var( --emobility-space-2 ) var( --emobility-space-3 );
	margin-top: var( --emobility-space-2 );
}

.emobility-swatch {
	padding: var( --emobility-space-2 ) var( --emobility-space-5 );
	background: var( --emobility-color-surface );
	border: 2px solid var( --emobility-primary-300 );
	border-radius: var( --emobility-radius-full );
	font-size: var( --emobility-text-sm );
	font-weight: var( --emobility-font-weight-semibold );
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var( --emobility-color-text );
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.emobility-swatch:hover:not( :disabled ):not( .is-selected ) {
	border-color: var( --emobility-primary-500 );
}

.emobility-swatch.is-selected {
	background: var( --emobility-accent-600 );
	border-color: var( --emobility-accent-600 );
	color: var( --emobility-white );
}

.emobility-swatch:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* --- Financing / pickup / contact / share ----------------------------------- */

.emobility-product__financing-note,
.emobility-product__pickup,
.emobility-product__contact-prompt {
	margin: 0;
}

.emobility-product__share {
	display: flex;
	gap: var( --emobility-space-3 );
	list-style: none;
	padding: 0;
	margin: 0;
}

.emobility-product__share a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: var( --emobility-border-width ) solid var( --emobility-color-border );
	border-radius: var( --emobility-radius-full );
	color: var( --emobility-color-text );
}

.emobility-product__share a:hover {
	color: var( --emobility-primary-600 );
	border-color: var( --emobility-primary-400 );
}

.emobility-product__share .emobility-icon {
	width: 1rem;
	height: 1rem;
}

/* --- Description accordion (description + specs + additional info) -------- */

.emobility-accordion {
	grid-area: description;
	margin-bottom: var( --emobility-space-12 );
	padding-top: var( --emobility-space-8 );
	border-top: var( --emobility-border-width ) solid var( --emobility-color-border );
}

.emobility-accordion__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 0 var( --emobility-space-4 );
	background: none;
	border: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.emobility-accordion__title {
	font-size: var( --emobility-text-lg );
	font-weight: var( --emobility-font-weight-semibold );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --emobility-color-heading );
}

.emobility-accordion__icon {
	transition: transform 0.2s ease;
}

.emobility-accordion__header[aria-expanded="true"] .emobility-accordion__icon {
	transform: rotate( 180deg );
}

.emobility-accordion__subheading {
	margin-top: var( --emobility-space-8 );
}

.emobility-specs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var( --emobility-text-sm );
}

.emobility-specs-table tr {
	border-bottom: var( --emobility-border-width ) solid var( --emobility-color-border );
}

.emobility-specs-table th,
.emobility-specs-table td {
	text-align: left;
	padding: var( --emobility-space-3 ) var( --emobility-space-4 ) var( --emobility-space-3 ) 0;
	vertical-align: top;
}

.emobility-specs-table th {
	width: 40%;
	color: var( --emobility-color-text-muted );
	font-weight: var( --emobility-font-weight-medium );
}

/* --- Related products --------------------------------------------------------- */

.emobility-product__related {
	padding-top: var( --emobility-space-8 );
	border-top: var( --emobility-border-width ) solid var( --emobility-color-border );
}

/* Loading state on the Add to Cart button while the AJAX request is in
   flight (see product.js). */
.js-emobility-pdp-add-to-cart.is-loading {
	opacity: 0.7;
	pointer-events: none;
}