/* W8Fit Product Template — "Performance Precision" design system
   Scoped entirely under .w8fit-product so it never leaks into the rest of the site. */

.w8fit-product {
	--w8fit-surface: #f4fafd;
	--w8fit-surface-muted: #f9fafb;
	--w8fit-surface-container: #e9eff2;
	--w8fit-surface-container-high: #e3e9ec;
	--w8fit-surface-lowest: #ffffff;
	--w8fit-on-surface: #161c1f;
	--w8fit-on-surface-variant: #3d494d;
	--w8fit-secondary: #555f6f;
	--w8fit-border-subtle: #e5e7eb;
	--w8fit-primary: #00677e;
	--w8fit-primary-container: #00bce4;
	--w8fit-on-primary: #ffffff;
	--w8fit-on-primary-container: #004758;
	--w8fit-discount-cyan: #00ccff;
	--w8fit-yellow: #ffdb00;
	--w8fit-yellow-hover: #e6c500;
	--w8fit-price: #2b657b;
	--w8fit-dark: #171c1f;
	--w8fit-dark-hover: #2a3237;
	--w8fit-font-heading: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	--w8fit-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
	--w8fit-radius-sm: 0.25rem;
	--w8fit-radius-md: 0.5rem;
	--w8fit-radius-lg: 0.75rem;
	--w8fit-radius-xl: 1rem;
	--w8fit-gutter: 24px;
	--w8fit-section-gap: 80px;
	--w8fit-container-max: 1800px;

	box-sizing: border-box;
	background: var(--w8fit-surface-lowest);
	color: var(--w8fit-on-surface);
	font-family: var(--w8fit-font-body);
	font-size: 16px;
	line-height: 1.5;
	max-width: var(--w8fit-container-max);
	margin: 0 auto;
	padding: 0 40px;
}

@media (max-width: 782px) {
	.w8fit-product {
		padding: 0 16px;
	}
}

.w8fit-product * {
	box-sizing: border-box;
}

.w8fit-product h1,
.w8fit-product h2,
.w8fit-product h3,
.w8fit-product h4,
.w8fit-product h5 {
	font-family: var(--w8fit-font-heading);
	color: var(--w8fit-on-surface);
	margin: 0 0 0.5em;
}

.material-symbols-outlined {
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
	vertical-align: middle;
	line-height: 1;
}

/* Breadcrumbs ------------------------------------------------------------ */

.w8fit-product__breadcrumbs {
	padding: 24px 0;
	font-size: 14px;
	color: var(--w8fit-secondary);
}

.w8fit-product__breadcrumbs .woocommerce-breadcrumb a {
	color: var(--w8fit-secondary);
	text-decoration: none;
}

.w8fit-product__breadcrumbs .woocommerce-breadcrumb a:hover {
	color: var(--w8fit-primary);
}

/* Main PDP grid ----------------------------------------------------------- */

.w8fit-product__container {
	display: grid;
	grid-template-columns: minmax(0,1fr);
	gap: var(--w8fit-gutter);
	align-items: start;
}

@media (min-width: 1024px) {
	.w8fit-product__container {
		grid-template-columns: minmax(0,7fr) minmax(0,5fr);
	}
}

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

/* The fullscreen image viewer (PhotoSwipe) is appended directly to <body>, outside
   .w8fit-product, with WooCommerce's z-index of 1500. The sitewide Simple Banner
   plugin bar (#simple-banner) is sticky at z-index 99999, so it sat on top of the
   open viewer. Lift the viewer above it (and above BeTheme's login modal, 100001). */
body .pswp {
	z-index: 100010 !important;
}

.w8fit-product__gallery {
	position: relative;
}

.w8fit-product__gallery .onsale {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	margin: 0;
	background: var(--w8fit-discount-cyan);
	color: var(--w8fit-on-primary-container);
	font-family: var(--w8fit-font-heading);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: var(--w8fit-radius-sm);
	min-width: 0;
	height: auto;
	line-height: 1;
}

.w8fit-product__gallery .woocommerce-product-gallery {
	/* WooCommerce's own woocommerce-layout.css sets div.product div.images
	   to width:48%; float:left for its legacy non-flex two-column layout.
	   That selector (.woocommerce div.product div.images) out-specifies a
	   plain 2-class selector here (3 classes + 2 types vs our 2 classes),
	   so !important is the pragmatic way to override a plugin default
	   rather than chasing its specificity. */
	width: 100% !important;
	float: none !important;
	display: flex;
	flex-direction: column-reverse;
	gap: 12px;
}

/* .flex-viewport (not .woocommerce-product-gallery__wrapper) is the actual
   flex item FlexSlider lays out — the wrapper is its inner sliding track,
   which FlexSlider gives a huge JS-computed inline width. Giving the
   viewport a real box here is what the wrapper/slides then measure against. */
.w8fit-product__gallery .flex-viewport {
	flex: 1;
	border-radius: var(--w8fit-radius-lg);
	overflow: hidden;
	background: #f2f2f2;
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
}

.w8fit-product__gallery .woocommerce-product-gallery__wrapper {
	height: 100%;
}

.w8fit-product__gallery .woocommerce-product-gallery__image {
	width: 100%;
	height: 100%;
}

.w8fit-product__gallery .woocommerce-product-gallery__image > a {
	display: block;
	width: 100%;
	height: 100%;
}

/* Show every image whole, centred both ways inside the square frame on light grey
   (letterboxed if landscape, pillarboxed if portrait) instead of cropping it.
   WooCommerce's .woocommerce div.product div.images img sets height:auto at much
   higher specificity, which pins non-square images to the top of the frame, so
   width/height need !important here. The zoom overlay image (.zoomImg) is excluded
   because WooCommerce sizes that one itself with inline styles. */
.w8fit-product__gallery .woocommerce-product-gallery__image img:not(.zoomImg) {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	object-position: center;
}

.w8fit-product__gallery .flex-control-thumbs {
	display: flex;
	flex-direction: row;
	flex-shrink: 0;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	/* WooCommerce's own rule sets overflow:hidden on this list at higher specificity,
	   which would stop shoppers scrolling a long thumbnail rail. */
	overflow-x: auto !important;
}

.w8fit-product__gallery .flex-control-thumbs li {
	/* WooCommerce's own woocommerce.css sets .flex-control-thumbs li to
	   width:25%; float:left for its default 4-per-row thumbnail grid;
	   float is dropped automatically once the parent is flex, but the
	   width isn't, and flex-basis:auto defers to it, so it still shrinks
	   every thumbnail to 25% of the rail. Override explicitly. */
	width: auto !important;
	float: none !important;
	list-style: none;
	flex: 0 0 auto;
}

.w8fit-product__gallery .flex-control-thumbs img {
	/* WooCommerce's .woocommerce div.product div.images img sets
	   width:100%; height:auto at higher specificity (3 classes + 3 types),
	   which against an auto-width li falls back to each image's native
	   file size (~300px) instead of a small thumbnail. */
	width: 64px !important;
	height: 64px !important;
	object-fit: cover;
	border-radius: var(--w8fit-radius-md);
	border: 2px solid transparent;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.w8fit-product__gallery .flex-control-thumbs img:hover,
.w8fit-product__gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--w8fit-discount-cyan);
}

@media (min-width: 1024px) {
	/* Two-column grid (thumbnail rail | main image) instead of a flex row, so the
	   rail can be made exactly as tall as the main image and scroll inside it,
	   however many thumbnails (images + video) the product has. */
	.w8fit-product__gallery .woocommerce-product-gallery {
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr);
		align-items: start;
	}

	.w8fit-product__gallery .flex-viewport {
		grid-column: 2;
		grid-row: 1;
	}

	.w8fit-product__gallery .flex-control-thumbs {
		grid-column: 1;
		grid-row: 1;
		flex-direction: column;
		width: 76px;
		/* contain:size stops the thumbnails' own height from stretching the row;
		   the rail then stretches to the main image's height and scrolls. */
		align-self: stretch;
		contain: size;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		scrollbar-width: thin;
	}

	.w8fit-product__gallery .flex-control-thumbs img {
		width: 100% !important;
		height: 76px !important;
	}
}

/* Video in the gallery (WooCommerce "Product gallery videos"): letterbox it centred
   inside the square viewer instead of stretching or cropping it. */
.w8fit-product__gallery .woocommerce-product-gallery__image video {
	display: block;
	/* Another rule forces height:auto on <video> at higher specificity, which pins it
	   to the top of the frame, so size it explicitly (same fix as the images above). */
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	object-position: center;
	background: transparent;
}

/* Gallery video controls (built by w8fit-product.js): play/pause, mute, volume -/+ and a level
   indicator, in a pill at the bottom of the video slide, both in the page gallery and in the
   lightbox (which sits outside .w8fit-product__gallery, so these rules aren't scoped to it). WooCommerce ships the video with no
   controls at all, so this is what lets a visitor unmute it. BeTheme and WooCommerce both restyle
   <button>, so the reset is explicit. */
.w8fit-product__gallery .woocommerce-product-gallery__video,
.woocommerce-product-gallery__photoswipe-video-wrapper {
	position: relative;
}

.w8fit-vc {
	position: absolute;
	left: 50%;
	bottom: 16px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	transform: translateX(-50%);
	background: rgba(22, 28, 31, 0.85);
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.w8fit-vc .w8fit-vc__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.w8fit-vc .w8fit-vc__btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.w8fit-vc .w8fit-vc__btn:focus-visible {
	outline: 2px solid var(--w8fit-discount-cyan);
	outline-offset: 1px;
}

.w8fit-vc .w8fit-vc__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.w8fit-vc .w8fit-vc__btn .material-symbols-outlined {
	font-size: 22px;
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Divider after play/pause, and the volume level between - and +. */
.w8fit-vc__mute {
	margin-right: 4px !important;
}

.w8fit-vc__level {
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 0 4px;
}

.w8fit-vc__level i {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
}

.w8fit-vc__level i.is-on {
	background: var(--w8fit-discount-cyan);
}

/* Video thumbnail: WooCommerce supplies only its grey placeholder image, so darken
   it and overlay a play icon. The "is-video" class is added in w8fit-product.js. */
.w8fit-product__gallery .flex-control-thumbs li.is-video {
	position: relative;
}

/* No poster set: darken WooCommerce's grey placeholder. With a poster (.has-poster)
   the image is shown as-is, with just the play icon over it. */
.w8fit-product__gallery .flex-control-thumbs li.is-video:not(.has-poster) img {
	filter: brightness(0.25);
	background: #000;
}

.w8fit-product__gallery .flex-control-thumbs li.is-video::after {
	content: "play_arrow";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--w8fit-discount-cyan);
	color: #004758;
	font-family: "Material Symbols Outlined";
	font-size: 22px;
	line-height: 1;
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
	pointer-events: none;
}

/* Summary column ------------------------------------------------------------ */

.w8fit-product__summary {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (min-width: 1024px) {
	.w8fit-product__summary {
		position: sticky;
		top: 24px;
	}
}

.w8fit-product__summary .star-rating {
	color: var(--w8fit-discount-cyan);
	font-size: 16px;
}

.w8fit-product__summary .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.w8fit-product__summary .woocommerce-review-link {
	color: var(--w8fit-secondary);
	font-size: 14px;
	text-decoration: none;
}

.w8fit-product__summary .product_title {
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.01em;
}

@media (min-width: 782px) {
	.w8fit-product__summary .product_title {
		font-size: 32px;
	}
}

.w8fit-product__summary .price,
.w8fit-product__summary .price .woocommerce-Price-amount,
.w8fit-product__summary .price ins,
.w8fit-product__summary .woocommerce-variation-price .price,
.w8fit-product__summary .woocommerce-variation-price .woocommerce-Price-amount {
	color: var(--w8fit-price) !important;
}

.w8fit-product__summary .price {
	font-family: var(--w8fit-font-heading);
	font-size: 24px;
	font-weight: 600;
}

.w8fit-product__summary .price del,
.w8fit-product__summary .price del .woocommerce-Price-amount {
	color: var(--w8fit-secondary) !important;
	opacity: 0.7;
	font-size: 0.75em;
}

.w8fit-product__summary .price ins {
	text-decoration: none;
}

.w8fit-buy-box-badge {
	display: inline-block;
	width: fit-content;
	margin: 4px 0 0;
	background: var(--w8fit-surface-container-high);
	color: var(--w8fit-on-surface-variant);
	font-family: var(--w8fit-font-heading);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: var(--w8fit-radius-sm);
}

/* Variations form ------------------------------------------------------------ */

.w8fit-product__summary .variations_form {
	border-top: 1px solid var(--w8fit-border-subtle);
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.w8fit-variations-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.w8fit-variations-header__label {
	font-family: var(--w8fit-font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.w8fit-variations-header__guide {
	font-family: var(--w8fit-font-heading);
	font-weight: 700;
	font-size: 12px;
	color: var(--w8fit-primary);
	text-decoration: underline;
}

.w8fit-product__summary table.variations {
	/* BeTheme's own variable-swatches feature hides the real variations
	   table sitewide via .mfn-variable-swatches .variations_form
	   .variations{display:none} (3 classes). We removed its competing
	   swatch injector in the template, so force the real table visible. */
	display: block !important;
	width: 100%;
	border: 0;
}

.w8fit-product__summary table.variations tbody,
.w8fit-product__summary table.variations tr,
.w8fit-product__summary table.variations th,
.w8fit-product__summary table.variations td {
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	text-align: left;
}

.w8fit-product__summary table.variations th.label {
	display: none;
}

.w8fit-product__summary table.variations select.w8fit-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.w8fit-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.w8fit-product__summary .w8fit-swatch {
	flex: 1 1 0;
	min-width: 120px;
	min-height: 58px;
	padding: 0 20px;
	background: #fff;
	border: 1px solid #bec9cd;
	border-radius: var(--w8fit-radius-sm);
	box-shadow: none;
	font-family: var(--w8fit-font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--w8fit-on-surface-variant);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* hover: darker teal outline */
.w8fit-product__summary .w8fit-swatch:hover {
	background: #fff;
	border-color: #2b657b;
	color: var(--w8fit-on-surface-variant);
}

/* selected: 2px cyan outline (1px border + 1px inset ring, so the box never shifts) on a pale fill */
.w8fit-product__summary .w8fit-swatch.is-selected,
.w8fit-product__summary .w8fit-swatch.is-selected:hover {
	background: #f0f4f8;
	border-color: #54b9e0;
	box-shadow: inset 0 0 0 1px #54b9e0;
	color: var(--w8fit-on-surface-variant);
}

.w8fit-product__summary .w8fit-swatch:focus-visible {
	outline: 2px solid #2b657b;
	outline-offset: 2px;
}

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

a.reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--w8fit-secondary);
}

/* Quantity stepper + Add to Bag (one row) ------------------------------------------------------------ */

/* WooCommerce and BeTheme both style .quantity / .qty (float, margin, white input
   background, 15px 30px padding), at higher specificity than a plain class rule,
   so the properties they also set are marked !important here. */

.woocommerce-variation-add-to-cart,
.w8fit-product__summary form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}

.w8fit-product__summary .quantity {
	display: flex !important;
	align-items: stretch;
	flex: 0 0 auto;
	float: none !important;
	margin: 0 !important;
	width: 116px;
	height: 60px;
	background: var(--w8fit-dark) !important;
	border-radius: var(--w8fit-radius-sm);
	overflow: hidden;
}

.w8fit-product__summary .quantity .qty {
	flex: 1 1 auto;
	min-width: 0;
	width: 40px !important;
	height: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #fff !important;
	font-family: var(--w8fit-font-heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.w8fit-product__summary .quantity .qty::-webkit-outer-spin-button,
.w8fit-product__summary .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.w8fit-product__summary .w8fit-qty-btn {
	flex: 0 0 38px;
	width: 38px;
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #fff !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.w8fit-product__summary .w8fit-qty-btn:hover {
	background: var(--w8fit-dark-hover) !important;
}

.w8fit-qty-btn .material-symbols-outlined {
	font-size: 18px;
}

.w8fit-product__summary .single_add_to_cart_button {
	flex: 1 1 0;
	min-width: 0;
	width: auto !important;
	height: 60px;
	margin: 0 !important;
	padding: 0 24px !important;
	background: var(--w8fit-yellow);
	color: var(--w8fit-on-surface);
	border: 0;
	border-radius: var(--w8fit-radius-sm);
	font-family: var(--w8fit-font-heading);
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

/* Alternative payment methods (WooPayments express checkout / PayPal): the widget adds 16px margins
   top and bottom and the cart form adds 32px below itself; the summary column's own 20px gap already
   spaces the blocks, so zero those out. */
.woocommerce .type-product .wcpay-express-checkout-wrapper {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.w8fit-product__summary form.cart {
	margin-bottom: 0 !important;
}

/* Express checkout (Apple Pay / Google Pay) while no variation is chosen: grey it out the way
   PayPal's own plugin greys PayPal/Venmo (.ppcp-disabled = grayscale + not-allowed + no pointer
   events on its children). The buttons are black, which a grayscale filter alone leaves unchanged,
   so fade them as well; that lands on the same mid-grey as the Venmo button. The
   .is-selection-needed flag is set on the summary column by w8fit-product.js. */
.w8fit-product__summary .wcpay-express-checkout-wrapper {
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.w8fit-product__summary.is-selection-needed .wcpay-express-checkout-wrapper {
	filter: grayscale(100%);
	opacity: 0.5;
	cursor: not-allowed;
}

.w8fit-product__summary.is-selection-needed .wcpay-express-checkout-wrapper * {
	pointer-events: none;
}

/* Anything else injected into the cart row (plugin buttons) gets its own full-width line. */
.woocommerce-variation-add-to-cart > :not(.quantity):not(.single_add_to_cart_button):not(input),
.w8fit-product__summary form.cart:not(.variations_form) > :not(.quantity):not(.single_add_to_cart_button):not(input) {
	flex: 1 1 100%;
}

.single_add_to_cart_button:hover {
	background: var(--w8fit-yellow-hover);
}

.single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.woocommerce-variation-price {
	font-size: 20px;
	font-weight: 600;
}

.woocommerce-variation-availability {
	font-size: 13px;
	color: var(--w8fit-secondary);
}

/* Highlights row ------------------------------------------------------------ */

.w8fit-highlights {
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 16px;
	margin-top: 8px;
	padding-top: 24px;
	border-top: 1px solid var(--w8fit-border-subtle);
}

.w8fit-highlights__item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.w8fit-highlights__icon {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 12px;
	background: var(--w8fit-surface-container);
	color: var(--w8fit-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.w8fit-highlights__label {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

/* Technical features row ------------------------------------------------------------ */

.w8fit-technical-features {
	margin-top: var(--w8fit-section-gap);
	padding: 48px 0;
	border-top: 1px solid var(--w8fit-border-subtle);
	border-bottom: 1px solid var(--w8fit-border-subtle);
}

.w8fit-technical-features__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: var(--w8fit-gutter);
	text-align: center;
}

@media (min-width: 782px) {
	.w8fit-technical-features__grid {
		grid-template-columns: repeat(4, minmax(0,1fr));
	}
}

.w8fit-technical-features__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.w8fit-technical-features__item .material-symbols-outlined {
	font-size: 32px;
	color: var(--w8fit-primary);
}

.w8fit-technical-features__item h3 {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0;
}

.w8fit-technical-features__item p {
	font-size: 14px;
	color: var(--w8fit-secondary);
	max-width: 220px;
	margin: 0;
}

/* Video showcase ------------------------------------------------------------ */

/* Lets the video block's "Buy It Now" button land the buy box below the sticky site banner/header. */
#w8fit-buy-box {
	scroll-margin-top: 120px;
}

.w8fit-video {
	margin-top: var(--w8fit-section-gap);
}

.w8fit-video__inner {
	display: grid;
	grid-template-columns: minmax(0,1fr);
	gap: 32px;
	align-items: center;
	background: var(--w8fit-dark);
	color: #fff;
	border-radius: 24px;
	padding: 24px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@media (min-width: 1024px) {
	.w8fit-video__inner {
		grid-template-columns: minmax(0,2fr) minmax(0,1fr);
		padding: 40px;
	}
}

.w8fit-video__player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: #000;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.w8fit-video__player iframe,
.w8fit-video__player video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Static thumbnail + play button standing in for the iframe until clicked.
   BeTheme and WooCommerce both restyle <button>, so the reset is explicit. */
.w8fit-video .w8fit-video__play {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #000;
	box-shadow: none;
	cursor: pointer;
}

.w8fit-video__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease, opacity 0.2s ease;
}

.w8fit-video__play:hover .w8fit-video__thumb {
	transform: scale(1.03);
}

.w8fit-video__play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: -36px 0 0 -36px;
	border-radius: 50%;
	background: var(--w8fit-discount-cyan);
	color: #004758;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
	transition: transform 0.15s ease;
}

.w8fit-video__play:hover .w8fit-video__play-icon {
	transform: scale(1.1);
}

.w8fit-video__play:focus-visible {
	outline: 3px solid var(--w8fit-discount-cyan);
	outline-offset: -3px;
}

.w8fit-video__play-icon .material-symbols-outlined {
	font-size: 40px;
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.w8fit-video__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.w8fit-video__label {
	color: var(--w8fit-discount-cyan);
	font-family: var(--w8fit-font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* two classes so these beat the generic .w8fit-product h3 colour/margin rule */
.w8fit-video .w8fit-video__heading {
	color: #fff;
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}

.w8fit-video__rule {
	display: block;
	width: 64px;
	height: 4px;
	background: var(--w8fit-discount-cyan);
}

.w8fit-video .w8fit-video__text {
	color: #bcc9ce;
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

.w8fit-video .w8fit-video__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
	padding: 16px 24px;
	background: var(--w8fit-discount-cyan);
	color: #004758;
	border-radius: var(--w8fit-radius-md);
	font-family: var(--w8fit-font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
	transition: filter 0.15s ease;
}

.w8fit-video .w8fit-video__button:hover {
	filter: brightness(1.1);
	color: #004758;
}

.w8fit-video__button .material-symbols-outlined {
	font-size: 18px;
}

/* Tabs + bento panel ------------------------------------------------------------ */

.w8fit-product__details {
	display: grid;
	grid-template-columns: minmax(0,1fr);
	gap: var(--w8fit-gutter);
	margin-top: var(--w8fit-section-gap);
}

@media (min-width: 1024px) {
	.w8fit-product__details {
		grid-template-columns: minmax(0,8fr) minmax(0,4fr);
		align-items: start;
	}
}

/* WooCommerce's own woocommerce.css styles these as decorative "pill" tabs
   (bordered, background-colored li's with ::before/::after corner shapes)
   at higher specificity (.woocommerce div.product .woocommerce-tabs ul.tabs...
   is 4 classes + 4 types vs our 3+3), so every property it also sets needs
   an explicit !important override here to get the flat underline design. */

.w8fit-product__tabs .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	list-style: none;
	margin: 0 0 32px !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--w8fit-border-subtle);
}

.w8fit-product__tabs .woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	display: block !important;
	position: static !important;
}

.w8fit-product__tabs .woocommerce-tabs ul.tabs li::before,
.w8fit-product__tabs .woocommerce-tabs ul.tabs li::after {
	content: none !important;
}

.w8fit-product__tabs .woocommerce-tabs ul.tabs li a {
	display: block !important;
	padding: 14px 20px !important;
	font-family: var(--w8fit-font-heading);
	font-weight: 600 !important;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--w8fit-secondary) !important;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.w8fit-product__tabs .woocommerce-tabs ul.tabs li a:hover {
	color: var(--w8fit-primary) !important;
}

.w8fit-product__tabs .woocommerce-tabs ul.tabs li.active {
	background: transparent !important;
}

.w8fit-product__tabs .woocommerce-tabs ul.tabs li.active a {
	color: var(--w8fit-on-surface) !important;
	font-weight: 700 !important;
	border-bottom-color: var(--w8fit-discount-cyan);
}

.w8fit-product__tabs .woocommerce-tabs .panel {
	font-size: 16px;
	line-height: 1.7;
	color: var(--w8fit-on-surface);
}

.w8fit-product__tabs .woocommerce-tabs .panel > p:first-of-type {
	font-size: 18px;
	line-height: 1.7;
}

/* Headings inside tab content: BeTheme's global h2/h3 sizes are far too large for
   a body-copy panel, so set a modest scale (higher specificity than the theme). */
.w8fit-product__tabs .woocommerce-tabs .panel h2 {
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	margin: 32px 0 12px;
}

.w8fit-product__tabs .woocommerce-tabs .panel h3 {
	font-size: 18px;
	line-height: 1.35;
	font-weight: 700;
	margin: 24px 0 8px;
}

.w8fit-product__tabs .woocommerce-tabs .panel > h2:first-child,
.w8fit-product__tabs .woocommerce-tabs .panel > h3:first-child {
	margin-top: 0;
}

.w8fit-product__tabs .woocommerce-tabs .panel ul {
	display: grid;
	grid-template-columns: minmax(0,1fr);
	gap: 16px 32px;
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}

@media (min-width: 782px) {
	.w8fit-product__tabs .woocommerce-tabs .panel ul {
		grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	}
}

.w8fit-product__tabs .woocommerce-tabs .panel ul li {
	position: relative;
	padding-left: 20px;
	list-style: none;
}

.w8fit-product__tabs .woocommerce-tabs .panel ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--w8fit-discount-cyan);
}

.w8fit-measurement {
	background: var(--w8fit-surface-muted);
	border: 1px solid var(--w8fit-border-subtle);
	border-radius: var(--w8fit-radius-lg);
	padding: 32px;
}

.w8fit-measurement__list {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.w8fit-measurement__row {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid var(--w8fit-border-subtle);
}

/* The generic .panel ul / li rules above (2-column grid, indent, a dot 0.55em from the top)
   are meant for plain bullet lists and also apply here.

   Each row is label | value, and either can wrap onto several lines. Both sides start at the
   top of the row and share one line-height, so their first lines always line up, and the dot
   is centred on that first line. It is positioned from the same two variables the row uses for
   its padding and line-height, so changing either one can't throw the dot out of line:
   dot top = padding + half a line - half the 6px dot. */
.w8fit-measurement__row {
	--w8fit-row-pad: 12px;
	--w8fit-row-lh: 1.7;
	align-items: flex-start;
	gap: 16px;
	padding-top: var(--w8fit-row-pad);
	padding-bottom: var(--w8fit-row-pad);
	line-height: var(--w8fit-row-lh);
}

.w8fit-product__tabs .woocommerce-tabs .panel ul.w8fit-measurement__list li::before {
	top: calc(var(--w8fit-row-pad) + (var(--w8fit-row-lh) * 0.5em) - 3px);
}

.w8fit-measurement__label {
	color: var(--w8fit-secondary);
	flex: 0 1 auto;
	max-width: 50%;
	overflow-wrap: anywhere;
}

.w8fit-measurement__value {
	font-weight: 600;
	flex: 1 1 0%;
	min-width: 0;
	text-align: right;
	overflow-wrap: anywhere;
}

.w8fit-bento {
	background: var(--w8fit-primary);
	color: #fff;
	border-radius: var(--w8fit-radius-xl);
	min-height: 300px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 32px;
}

.w8fit-bento__image {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.w8fit-bento__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.3;
	mix-blend-mode: overlay;
}

.w8fit-bento__content {
	position: relative;
	z-index: 1;
}

.w8fit-bento__content h4 {
	color: #fff;
	font-size: 20px;
}

.w8fit-bento__content p {
	opacity: 0.9;
	font-size: 14px;
	margin: 0 0 16px;
}

.w8fit-bento__content a {
	color: #fff;
	font-family: var(--w8fit-font-heading);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: underline;
}

/* Lifestyle section ------------------------------------------------------------ */

.w8fit-lifestyle {
	margin-top: var(--w8fit-section-gap);
	position: relative;
	min-height: 380px;
	border-radius: var(--w8fit-radius-xl);
	overflow: hidden;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	background-color: var(--w8fit-dark);
}

@media (min-width: 782px) {
	.w8fit-lifestyle {
		min-height: 480px;
	}
}

.w8fit-lifestyle::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

.w8fit-lifestyle__content {
	position: relative;
	z-index: 1;
	color: #fff;
	max-width: 560px;
	padding: 40px;
}

.w8fit-lifestyle__content h2 {
	color: #fff;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

@media (min-width: 782px) {
	.w8fit-lifestyle__content h2 {
		font-size: 44px;
	}
}

.w8fit-lifestyle__content p {
	opacity: 0.9;
	font-size: 16px;
	margin: 0 0 24px;
}

.w8fit-lifestyle__button {
	display: inline-block;
	background: var(--w8fit-primary-container);
	color: var(--w8fit-on-primary-container);
	padding: 16px 32px;
	font-family: var(--w8fit-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	border-radius: var(--w8fit-radius-sm);
}

/* Performance grid ------------------------------------------------------------ */

.w8fit-performance {
	margin-top: var(--w8fit-section-gap);
	margin-bottom: var(--w8fit-section-gap);
}

.w8fit-performance__heading {
	text-align: center;
	margin-bottom: 48px;
}

.w8fit-performance__heading h2 {
	font-size: 28px;
}

.w8fit-performance__heading::after {
	content: "";
	display: block;
	width: 80px;
	height: 4px;
	background: var(--w8fit-discount-cyan);
	margin: 16px auto 0;
}

.w8fit-performance__grid {
	display: grid;
	grid-template-columns: minmax(0,1fr);
	gap: var(--w8fit-gutter);
}

@media (min-width: 782px) {
	.w8fit-performance__grid {
		grid-template-columns: repeat(3, minmax(0,1fr));
	}
}

.w8fit-performance__card {
	background: var(--w8fit-surface-muted);
	border: 1px solid var(--w8fit-border-subtle);
	border-radius: var(--w8fit-radius-lg);
	padding: 32px;
}

.w8fit-performance__card .material-symbols-outlined {
	color: var(--w8fit-primary);
	font-size: 40px;
	margin-bottom: 16px;
	display: block;
}

.w8fit-performance__card h3 {
	font-size: 20px;
}

.w8fit-performance__card p {
	color: var(--w8fit-secondary);
	margin: 0;
}