/**
 * Product Specs — gallery + accordion (jdw-ee-product-specs).
 * Defaults aligned to Maddox product sticky specs band (1920 measure).
 */

.jdw-ee-ps {
	--jdw-ps-gap: 46px;
	--jdw-ps-icon: #f65e1e;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	gap: var(--jdw-ps-gap);
	box-sizing: border-box;
	width: 100%;
}

.jdw-ee-ps *,
.jdw-ee-ps *::before,
.jdw-ee-ps *::after {
	box-sizing: border-box;
}

/* ---- Gallery (left) ---- */

.jdw-ee-ps__gallery {
	flex: 1 1 0;
	min-width: 0;
	max-width: 600px;
	display: flex;
	flex-direction: column;
	/* Target .product-left-side stacks main + thumbs with thumbs padding-top 10px (not free space-between). */
	justify-content: flex-start;
	align-items: stretch;
}

/* Target .product-left-side.is-custom: keep the gallery visible while the
 * taller specifications accordion scrolls. The widget control supplies top. */
.jdw-ee-ps--gallery-sticky .jdw-ee-ps__gallery {
	position: sticky;
	top: 7rem;
}

/* Square stage: all slides absolute so the frame always stays full (target .main-photo-wrapper). */
.jdw-ee-ps__main {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	flex: 0 0 auto;
}

.jdw-ee-ps__slide {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	border: 0;
}

.jdw-ee-ps__slide.is-active {
	opacity: 1;
	z-index: 1;
}

/* Target .photo-thumbnails: padding-top 10px → 10px gap under main; thumbs space-between. */
.jdw-ee-ps__thumbs {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 10px 0 0;
	margin: 0;
	gap: 0;
	flex: 0 0 auto;
}

/* Thumbnail is an <a> — reset any theme/Elementor button styles. */
.jdw-ee-ps__thumb {
	display: block;
	width: 100px;
	height: 100px;
	padding: 0 !important;
	margin: 0;
	/* 2px always so active black border does not shift layout (target .thumbnail-photo). */
	border: 2px solid transparent !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	text-decoration: none !important;
	color: inherit !important;
	line-height: 0;
	cursor: pointer;
	flex: 0 0 auto;
	overflow: hidden;
	font-size: 0;
}

.jdw-ee-ps__thumb img,
.jdw-ee-ps__thumb .jdw-ee-ps__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border: 0;
	pointer-events: none;
}

/* Target current thumb: 2px solid black (Webflow interaction on .thumbnail-photo). */
.jdw-ee-ps__thumb.is-active {
	border-color: #000000 !important;
}

.jdw-ee-ps__thumb:focus-visible {
	outline: 2px solid #f65e1e;
	outline-offset: 2px;
}

/* ---- Content (right) ---- */

.jdw-ee-ps__content {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
}

.jdw-ee-ps__title-wrap {
	width: 100%;
	max-width: 400px;
	padding-left: 12px;
	align-self: center;
}

.jdw-ee-ps__title {
	margin: 0;
	font-family: "Suisse Intl", Suisseintl, system-ui, sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: #161616;
}

/* Specs accordion panel */

.jdw-ee-ps__panel {
	width: 100%;
	max-width: 400px;
	border-style: solid;
	border-color: #4f4e4c;
	border-width: 2px 2px 1px;
	background: transparent;
}

/* Target .accordion_wrap — div row + h4 title (not <button>). */
.jdw-ee-ps__item-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 16px;
	margin: 0;
	border: 0;
	border-bottom: 1px solid #161616;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	text-align: left;
	color: inherit;
	user-select: none;
}

/* Static title row (content-less item): same geometry, no affordance. */
.jdw-ee-ps__static-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 16px;
	margin: 0;
	border-bottom: 1px solid #161616;
	background: transparent;
	text-align: left;
	color: inherit;
}

.jdw-ee-ps__item-header:hover,
.jdw-ee-ps__item-header:focus {
	background: transparent;
	color: inherit;
	outline: none;
}

.jdw-ee-ps__item-header:focus-visible {
	outline: 2px solid #f65e1e;
	outline-offset: -2px;
}

/* Target h4.heading-style-h5 */
.jdw-ee-ps__item-title {
	display: block;
	margin: 0;
	padding: 0;
	font-family: "Suisse Intl", Suisseintl, system-ui, sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	color: #161616;
}

/* Plus / minus: orange bars like target accordion_icon */

.jdw-ee-ps__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 32px;
	flex: 0 0 auto;
}

.jdw-ee-ps__icon-h,
.jdw-ee-ps__icon-v {
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: var(--jdw-ps-icon, #f65e1e);
	transform: translate(-50%, -50%);
}

/* Horizontal bar (always visible) — target accordion_icon ~20×5 */
.jdw-ee-ps__icon-h {
	width: 20px;
	height: 5px;
}

/* Vertical bar (plus only when closed) — target accordion_vertical-line ~5×20 */
.jdw-ee-ps__icon-v {
	width: 5px;
	height: 20px;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.jdw-ee-ps__item.is-open .jdw-ee-ps__icon-v {
	opacity: 0;
	transform: translate(-50%, -50%) scaleY(0);
}

.jdw-ee-ps__item-panel {
	overflow: hidden;
}

.jdw-ee-ps__item-panel[hidden] {
	display: none;
}

/* Target: rich text pad 16px 0, body 18px / 1.4 */
.jdw-ee-ps__item-body {
	padding: 16px;
	font-family: "Suisse Intl", Suisseintl, system-ui, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	color: #161616;
}

.jdw-ee-ps__item-body p {
	margin: 0 0 16px;
	font-size: inherit;
	line-height: inherit;
}

.jdw-ee-ps__item-body p:last-child {
	margin-bottom: 0;
}

.jdw-ee-ps__item-body ul {
	margin: 0;
	padding-left: 1.25em;
	list-style: disc;
}

.jdw-ee-ps__item-body li {
	margin: 0 0 0.15em;
	font-size: 16px;
	line-height: 1.4;
}

/* ---- Breakpoints ----
 * Target:
 * - ≤1024 still often side-by-side with ~600px gallery; Elementor tablet is column layout for this widget.
 * - ≤767 / mobile: full-width square main; thumbs single row, gap 8px, horizontal scroll (not wrap stack).
 */

/* Elementor tablet (and below): stack; gallery must be full width (override Style gallery_width %). */
@media (max-width: 1024px) {
	.jdw-ee-ps {
		flex-direction: column;
		align-items: stretch;
		--jdw-ps-gap: 32px;
	}

	.jdw-ee-ps__gallery {
		position: static;
		top: auto !important;
		flex: 0 0 auto !important;
		flex-basis: auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.jdw-ee-ps__main {
		width: 100%;
		aspect-ratio: 1 / 1;
	}

	.jdw-ee-ps__slide {
		object-fit: cover !important;
	}

	/* Keep one row of 100px thumbs; space-between when they fit. */
	.jdw-ee-ps__thumbs {
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		gap: 0;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		padding-top: 10px;
	}

	.jdw-ee-ps__thumb {
		width: 100px;
		height: 100px;
		flex: 0 0 auto;
	}

	.jdw-ee-ps__content {
		align-items: stretch;
		width: 100%;
	}

	.jdw-ee-ps__title-wrap,
	.jdw-ee-ps__panel {
		max-width: 100%;
		align-self: stretch;
	}

	/* Accordion item titles: 24px on tablet (PC stays 28px).
	 * !important beats Elementor post CSS typography from Style panel. */
	.elementor-widget-jdw-ee-product-specs .jdw-ee-ps__item-title {
		font-size: 24px !important;
	}
}

/* Phone: match target .product-left-side (align-items:center) + .photo-thumbnails
 * (row, gap 8px, horizontal scroll). Thumbnail group is centered under the main image. */
@media (max-width: 767px) {
	.jdw-ee-ps {
		--jdw-ps-gap: 24px;
	}

	.jdw-ee-ps__gallery {
		width: 100% !important;
		max-width: 100% !important;
		align-items: center;
	}

	.jdw-ee-ps__main {
		width: 100%;
		max-width: 100%;
		aspect-ratio: 1 / 1;
	}

	.jdw-ee-ps__slide {
		/* Target mobile first image uses contain; cover still fills square stage cleanly. */
		object-fit: cover !important;
	}

	.jdw-ee-ps__thumbs {
		display: flex;
		flex-wrap: nowrap !important;
		/* Center thumb group under main (target mobile). Full width + justify center
		 * centers the row; overflow-x scrolls when 6×100px exceeds the stage. */
		justify-content: center !important;
		align-items: center;
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		gap: 8px !important;
		column-gap: 8px !important;
		row-gap: 0 !important;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		padding-top: 10px;
		box-sizing: border-box;
	}

	.jdw-ee-ps__thumb {
		width: 100px;
		height: 100px;
		min-width: 100px;
		flex: 0 0 auto !important;
		margin: 0 !important;
	}

	.jdw-ee-ps__title {
		font-size: 28px;
	}

	/* Accordion: title 18px, body/content 16px (PC/tablet defaults unchanged above). */
	.elementor-widget-jdw-ee-product-specs .jdw-ee-ps__item-title {
		font-size: 18px !important;
	}

	.elementor-widget-jdw-ee-product-specs .jdw-ee-ps__item-body,
	.elementor-widget-jdw-ee-product-specs .jdw-ee-ps__item-body p,
	.elementor-widget-jdw-ee-product-specs .jdw-ee-ps__item-body li {
		font-size: 16px !important;
	}
}