/**
 * Vassart Products — styles shared by the "single product field" Elementor
 * widgets (widgets/class-product-*-widget.php). Registered (not enqueued)
 * per widget via get_style_depends(), so this only loads on pages that
 * actually use one of these widgets. Uses the same palette as
 * single-product.css so a product built with these widgets in Elementor
 * matches the legacy template's look.
 */

.vassart-field-widget-notice {
	padding: 10px 14px;
	border: 1px dashed #c2c2c2;
	border-radius: 4px;
	color: #757575;
	font-size: 13px;
}

/* Breadcrumb */
.vassart-widget-product-breadcrumb {
	font-size: 13px;
	color: #757575;
}

.vassart-widget-product-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vassart-widget-product-breadcrumb li {
	display: flex;
	align-items: center;
}

.vassart-widget-product-breadcrumb__sep {
	margin: 0 8px;
	color: #c2c2c2;
}

.vassart-widget-product-breadcrumb a {
	color: #757575;
	text-decoration: none;
}

.vassart-widget-product-breadcrumb a:hover {
	color: #ea5501;
	text-decoration: underline;
}

.vassart-widget-product-breadcrumb [aria-current='page'] {
	color: #1b1b1b;
	font-weight: 600;
}

/* Title / excerpt / description */
.vassart-widget-product-title a {
	color: inherit;
	text-decoration: none;
}

.vassart-widget-product-excerpt,
.vassart-widget-product-description {
	color: #1b1b1b;
	line-height: 1.7;
}

.vassart-widget-product-description--empty {
	color: #757575;
	font-style: italic;
}

/* Product Tab — a full-width row of equal-width square segments, where
 * each predefined field (see class-product-tabs-widget.php) renders
 * either directly below the nav ("Under Tab" mode, an exclusive accordion
 * between panels, with the active tab's title repeated as a heading above
 * its content) or inside a popup ("Popup" mode, marked with a small icon
 * on its tab). Only fields the admin enabled and that the current product
 * actually has a value for ever appear. */
.vassart-widget-product-tab__nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	margin-bottom: 28px;
	background: #e5e5e5;
}

/* Keeps a tab's button and its panel together in markup (so the tablet/
 * mobile accordion below can simply stack them) without affecting the
 * desktop grid: .group generates no box of its own, so .btn and .panel
 * act as if they were direct children of .nav. */
.vassart-widget-product-tab__group {
	display: contents;
}

.vassart-widget-product-tab__btn {
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 18px 20px;
	border: 0;
	border-radius: 0;
	background: #f2f2f2;
	color: #555;
	font-size: 15px;
	font-weight: 500;
	font-family: inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	max-width: 100%;
	overflow-wrap: break-word;
}

.vassart-widget-product-tab__btn:hover {
	background: #e6e6e6;
}

.vassart-widget-product-tab__btn.is-active {
	background: #4caf50;
	color: #fff;
	font-weight: 700;
}

.vassart-widget-product-tab__popup-icon {
	flex: 0 0 auto;
}

/* Accordion open/close chevron — desktop never shows it (the segmented
 * bar's own active/hover styling is enough there); tablet/mobile reveals
 * it on "Under Tab" buttons only, see the breakpoint below. */
.vassart-widget-product-tab__accordion-icon {
	display: none;
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.vassart-widget-product-tab__panel-heading {
	margin: 0 0 20px;
	color: #ea5501;
	font-size: 22px;
	font-weight: 700;
}

.vassart-widget-product-tab__panel {
	grid-row: 2;
	grid-column: 1 / -1;
}

.vassart-widget-product-tab__panel[hidden] {
	display: none;
}

/* Popup mode: a centred modal dialog over a dimmed backdrop, matching the
 * gallery lightbox's own body.vassart-modal-open scroll lock. */
.vassart-widget-product-tab__popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.vassart-widget-product-tab__popup[hidden] {
	display: none;
}

.vassart-widget-product-tab__popup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.vassart-widget-product-tab__popup-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 720px;
	max-height: 85vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 6px;
	padding: 32px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.vassart-widget-product-tab__popup-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: #f7f7f7;
	color: #444;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.vassart-widget-product-tab__popup-close:hover {
	background: #ea5501;
	color: #fff;
}

.vassart-widget-product-tab__popup-title {
	margin: 0 0 16px;
	padding-right: 32px;
	font-size: 20px;
	font-weight: 700;
}

body.vassart-modal-open {
	overflow: hidden;
}

/* Options tab content. */
.vassart-widget-product-tab__options-heading {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 700;
}

.vassart-widget-product-tab__options-desc {
	margin: 0 0 16px;
}

.vassart-widget-product-tab__options-desc > :last-child,
.vassart-widget-product-features__desc > :last-child {
	margin-bottom: 0;
}

.vassart-widget-product-tab__options-list {
	margin: 0 0 16px;
	padding-left: 20px;
}

/* Documentation (PDF) tab content. */
.vassart-widget-product-tab__pdf-frame {
	display: block;
	width: 100%;
	height: 70vh;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
}

.vassart-widget-product-tab__pdf-link {
	display: inline-block;
	margin-top: 16px;
	color: #ea5501;
	font-weight: 600;
	text-decoration: none;
}

.vassart-widget-product-tab__pdf-link:hover {
	text-decoration: underline;
}

@media (max-width: 1024px) {
	/* Tablet & mobile: same enabled/disabled fields, custom titles and
	 * Under Tab/Popup modes as desktop — only the layout changes. The
	 * segmented tab bar becomes a vertical accordion: each "Under Tab" tab
	 * is a full-width row whose panel opens directly beneath it (exactly
	 * one open at a time, Description open by default — same JS as
	 * desktop, just driven by a stacked layout instead of the grid above).
	 * "Popup" tabs stay as a plain full-width row that opens the same
	 * modal as on desktop; they never expand in place. */
	.vassart-widget-product-tab__nav {
		display: block;
		background: transparent;
	}

	.vassart-widget-product-tab__group {
		display: block;
		margin-bottom: 1px;
	}

	.vassart-widget-product-tab__btn {
		width: 100%;
		justify-content: space-between;
		text-align: left;
	}

	.vassart-widget-product-tab__btn:not(.vassart-widget-product-tab__btn--popup) .vassart-widget-product-tab__accordion-icon {
		display: inline-flex;
	}

	.vassart-widget-product-tab__btn.is-active .vassart-widget-product-tab__accordion-icon {
		transform: rotate(180deg);
	}

	.vassart-widget-product-tab__panel {
		padding-top: 20px;
	}

	.vassart-widget-product-tab__panel-heading {
		/* The accordion row above already shows this tab's title as its
		 * clickable heading — no need to repeat it inside the panel too. */
		display: none;
	}
}

@media (max-width: 600px) {
	.vassart-widget-product-tab__btn {
		padding: 12px 10px;
		font-size: 13px;
	}

	.vassart-widget-product-tab__popup-dialog {
		padding: 24px 20px;
		max-height: 90vh;
	}

	.vassart-widget-product-tab__pdf-frame {
		height: 50vh;
	}
}

/* Technical Specification table appended below another tab's content
 * ("Show Technical Specification" option on the Product Tab widget). */
.vassart-widget-product-tab__extra-spec {
	margin-top: 32px;
}

/* Image */
.vassart-widget-product-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* Image — optional hover magnifier. The zoom pane is an absolutely
 * positioned sibling of the image/link, filled with the full-resolution
 * photo as a background image; JS moves that background to track the
 * cursor and product-widgets.js only wires this up on hover-capable
 * pointer devices, so it's simply never shown on touch. */
.vassart-widget-product-image--zoom {
	position: relative;
	overflow: hidden;
	cursor: zoom-in;
}

.vassart-widget-product-image__zoom-pane {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.vassart-widget-product-image--zoom.is-zoomed .vassart-widget-product-image__zoom-pane {
	opacity: 1;
}

/* Image — optional click-to-open lightbox. The overlay itself reuses the
 * Product Gallery lightbox styles below; product-widgets.js moves it to
 * <body> so this wrapper's overflow:hidden can't clip it. */
.vassart-widget-product-image--lightbox {
	cursor: zoom-in;
}

/* Short link / documentation link */
.vassart-widget-product-short-link {
	font-size: 14px;
	color: #757575;
}

.vassart-widget-product-short-link a,
.vassart-widget-product-documentation-link {
	color: #ea5501;
	text-decoration: none;
}

.vassart-widget-product-short-link a:hover,
.vassart-widget-product-documentation-link:hover {
	text-decoration: underline;
}

/* Power / airflow */
.vassart-widget-product-power-airflow {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vassart-widget-product-power-airflow__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
}

.vassart-widget-product-power-airflow__label {
	font-weight: 600;
}

/* Features / options */
.vassart-widget-product-features__heading {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
}

.vassart-widget-product-features__desc {
	margin: 0 0 16px;
	color: #757575;
}

.vassart-widget-product-features__list {
	margin: 0 0 16px;
	padding-left: 20px;
}

.vassart-widget-product-features__list li {
	margin-bottom: 8px;
}

/* Specification table */
.vassart-spec-table-scroll {
	overflow-x: auto;
}

.vassart-spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.vassart-spec-table th,
.vassart-spec-table td {
	padding: 10px 14px;
	border: 1px solid #e2e2e2;
	white-space: nowrap;
}

.vassart-spec-table th {
	background: #f7f7f7;
	font-weight: 600;
	text-align: left;
}

.vassart-spec-table__pinned {
	position: sticky;
	left: 0;
	background: #fff;
}

.vassart-spec-table th.vassart-spec-table__pinned {
	background: #f7f7f7;
}

/* FAQ */
.vassart-widget-product-faq__item {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	padding: 20px 24px;
	margin-bottom: 16px;
}

.vassart-widget-product-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	font-size: 17px;
	color: #1b1b1b;
}

.vassart-widget-product-faq__question::-webkit-details-marker {
	display: none;
}

.vassart-widget-product-faq__question::after {
	content: '+';
	flex-shrink: 0;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: #1b1b1b;
}

.vassart-widget-product-faq__item[open] .vassart-widget-product-faq__question {
	color: #e2231c;
}

.vassart-widget-product-faq__item[open] .vassart-widget-product-faq__question::after {
	content: '\2212';
	color: #e2231c;
}

.vassart-widget-product-faq__answer {
	margin-top: 14px;
	color: #757575;
	font-size: 15px;
	line-height: 1.7;
}

/* Video */
.vassart-widget-product-video__player {
	display: block;
	width: 100%;
	border-radius: 4px;
}

.vassart-widget-product-video__embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.vassart-widget-product-video__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 4px;
}

/* Quote button */
.vassart-widget-product-quote-button {
	display: inline-block;
	padding: 14px 28px;
	background: #ea5501;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

.vassart-widget-product-quote-button:hover {
	background: #c94700;
	color: #fff;
}

/* Gallery grid + lightbox */
.vassart-widget-product-gallery__grid {
	display: grid;
	grid-template-columns: repeat(var(--vassart-gallery-columns, 4), 1fr);
	gap: 12px;
}

.vassart-widget-product-gallery__item {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 4px;
}

.vassart-widget-product-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.vassart-widget-product-gallery__item:hover img {
	transform: scale(1.05);
}

/* Elementor's own default image lightbox look: the full-resolution photo
 * floats directly on a near-opaque dark backdrop (no card), a small
 * "current / total" counter sits top-left, a plain close icon top-right,
 * thin chevron arrows either side, and an optional caption below the
 * image — all plain icons with no button/circle background, only a color
 * change on hover. */
.vassart-widget-product-gallery__lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.92);
	padding: 60px 24px 24px;
}

.vassart-widget-product-gallery__lightbox[hidden] {
	display: none;
}

.vassart-widget-product-gallery__lightbox-counter {
	position: absolute;
	top: 20px;
	left: 24px;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.vassart-widget-product-gallery__lightbox-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 100%;
	max-height: 100%;
}

.vassart-widget-product-gallery__lightbox-image {
	display: block;
	max-width: min(86vw, 1100px);
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.vassart-widget-product-gallery__lightbox-caption {
	margin: 0;
	color: #d9d9d9;
	font-size: 14px;
	text-align: center;
}

.vassart-widget-product-gallery__lightbox-caption:empty {
	display: none;
}

.vassart-widget-product-gallery__close,
.vassart-widget-product-gallery__arrow {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0;
	color: #fff;
	cursor: pointer;
	transition: color 0.2s ease;
}

.vassart-widget-product-gallery__close:hover,
.vassart-widget-product-gallery__arrow:hover {
	color: #ea5501;
}

.vassart-widget-product-gallery__close {
	top: 16px;
	right: 20px;
	width: 40px;
	height: 40px;
	z-index: 1;
}

.vassart-widget-product-gallery__arrow {
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
}

.vassart-widget-product-gallery__arrow--prev {
	left: 16px;
}

.vassart-widget-product-gallery__arrow--next {
	right: 16px;
}

.vassart-widget-product-gallery__arrow-icon {
	display: block;
}

@media (max-width: 600px) {
	.vassart-widget-product-gallery__lightbox {
		padding: 48px 12px 16px;
	}

	.vassart-widget-product-gallery__lightbox-image {
		max-width: 92vw;
		max-height: 68vh;
	}

	.vassart-widget-product-gallery__lightbox-counter {
		top: 14px;
		left: 12px;
		font-size: 13px;
	}

	.vassart-widget-product-gallery__close {
		top: 8px;
		right: 10px;
		width: 34px;
		height: 34px;
	}

	.vassart-widget-product-gallery__arrow {
		width: 36px;
		height: 36px;
	}

	.vassart-widget-product-gallery__arrow--prev {
		left: 6px;
	}

	.vassart-widget-product-gallery__arrow--next {
		right: 6px;
	}
}

/* Related products carousel — same card treatment (angled corner, bottom
 * gradient overlay, badge + title, hover-reveal arrow button) as the
 * Product Category Listing widget's cards; see product-category-listing.css. */
.vassart-widget-related-carousel__header {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
}

.vassart-widget-related-carousel__arrows {
	display: flex;
	gap: 8px;
}

.vassart-widget-related-carousel__arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: #f7f7f7;
	color: #616161;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.vassart-widget-related-carousel__arrow-icon {
	display: block;
}

.vassart-widget-related-carousel__arrow:hover:not(:disabled) {
	background: #ea5501;
	color: #fff;
}

.vassart-widget-related-carousel__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.vassart-widget-related-carousel__viewport {
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.vassart-widget-related-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.vassart-widget-related-carousel__track {
	display: flex;
	gap: 16px;
}

.vassart-widget-related-carousel__item {
	/* Exactly "Products Per Slide" cards fill one viewport width, gap
	 * included, so the Next/Prev arrows page one full slide at a time. */
	flex: 0 0 calc( ( 100% - ( var( --vassart-related-per-slide, 4 ) - 1 ) * 16px ) / var( --vassart-related-per-slide, 4 ) );
	min-width: 160px;
}

@media (max-width: 900px) {
	.vassart-widget-related-carousel__item {
		/* Cap at 3 per slide on tablets regardless of the admin setting, so
		 * cards never get squeezed narrower than they're readable. */
		flex-basis: calc( ( 100% - 32px ) / 3 ) !important;
	}
}

@media (max-width: 600px) {
	.vassart-widget-related-carousel__item {
		flex-basis: calc( ( 100% - 16px ) / 2 ) !important;
	}
}

@media (max-width: 420px) {
	.vassart-widget-related-carousel__item {
		flex-basis: 84% !important;
	}
}

.vassart-widget-related-carousel__card {
	position: relative;
	display: block;
	aspect-ratio: 0.87;
	background-size: cover;
	background-position: center;
	background-color: #1b1b1b;
	clip-path: polygon(0% 0%, 88% 0%, 100% 10%, 100% 100%, 0% 100%);
	text-decoration: none;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.35s ease;
}

.vassart-widget-related-carousel__card:hover {
	transform: scale(1.02);
}

.vassart-widget-related-carousel__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(4, 4, 35, 0.84) 0%, rgba(4, 4, 35, 0) 63%);
}

.vassart-widget-related-carousel__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 0 16px 20px;
	transition: transform 0.3s ease;
}

.vassart-widget-related-carousel__card:hover .vassart-widget-related-carousel__content,
.vassart-widget-related-carousel__card:focus-within .vassart-widget-related-carousel__content {
	transform: translateY(-52px);
}

.vassart-widget-related-carousel__badge {
	display: inline-block;
	padding: 6px 14px;
	background: #ea5501;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	border-radius: 999px;
}

.vassart-widget-related-carousel__title {
	display: block;
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

.vassart-widget-related-carousel__button {
	position: absolute;
	left: 16px;
	bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #ea5501;
	color: #fff;
	opacity: 0;
	transform: translateY(10px) scale(0.85);
	transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

.vassart-widget-related-carousel__card:hover .vassart-widget-related-carousel__button,
.vassart-widget-related-carousel__card:focus .vassart-widget-related-carousel__button,
.vassart-widget-related-carousel__card:focus-within .vassart-widget-related-carousel__button {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.vassart-widget-related-carousel__card:hover .vassart-widget-related-carousel__button {
	background: #fff;
	color: #ea5501;
}

.vassart-widget-related-carousel__button-icon {
	display: block;
}

.vassart-widget-related-carousel__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* Product image: fixed box, full image visible (no crop) */
.vassart-widget-product-image {
  height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vassart-widget-product-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: 700px !important;
  object-fit: contain !important;
  object-position: center;
}