/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
Text Domain:  woodmart
*/

/* -------------------------------------------------------------------------
   Pargatz Glasses: Dior-inspired scroll hero
   The JS adds .pargatz-dior-scroll-hero to the existing Elementor widget.
   No page content or WooCommerce markup is replaced.
------------------------------------------------------------------------- */

body.page-id-15 #main-content {
    padding-top: 0 !important;
}

@media (min-width: 992px) {
body.page-id-15 .pargatz-dior-scroll-hero {
	--dior-scene-height: calc(100vh + 420px);
	height: var(--dior-scene-height);
	margin-bottom: 0 !important;
	position: relative;
	z-index: 2;
}

body.page-id-15 .pargatz-dior-scroll-hero .wd-carousel-container,
body.page-id-15 .pargatz-dior-scroll-hero .wd-carousel-inner,
body.page-id-15 .pargatz-dior-scroll-hero .wd-carousel {
	height: 100%;
}

body.page-id-15 .pargatz-dior-scroll-hero .wd-carousel-container {
	position: sticky;
	top: 0;
	height: 100vh !important;
	display: flex;
	align-items: center;
	overflow: visible;
}

body.page-id-15 .pargatz-dior-scroll-hero .wd-carousel-inner {
	width: 100%;
	overflow: visible;
}

body.page-id-15 .pargatz-dior-scroll-hero .wd-carousel-wrap {
	position: relative;
	height: 100%;
	width: 100%;
	overflow: visible;
	transform: none !important;
}

body.page-id-15 .pargatz-dior-scroll-hero .pargatz-dior-video-layer {
	position: absolute;
	top: 50%;
	left: var(--dior-video-x, 10vw);
	width: var(--dior-video-w, 80vw);
	height: var(--dior-video-h, 60vh);
	z-index: 4;
	overflow: hidden;
	border-radius: 12px;
	opacity: 1;
	transform: translate3d(0, calc(-50% + var(--dior-video-y, 0px)), 0);
	transition: left 760ms cubic-bezier(.22, .61, .36, 1),
		width 760ms cubic-bezier(.22, .61, .36, 1),
		height 760ms cubic-bezier(.22, .61, .36, 1),
		opacity 260ms ease;
	pointer-events: none;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}

body.page-id-15 .pargatz-dior-scroll-hero .pargatz-dior-video-layer video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

body.page-id-15 .pargatz-dior-scroll-hero.is-condensed .pargatz-dior-video-layer {
	opacity: 0;
}

body.page-id-15 .pargatz-dior-scroll-hero .wd-carousel-item {
	position: absolute !important;
	top: 50%;
	left: var(--dior-x, 10vw);
	width: var(--dior-w, 30vw) !important;
	max-width: none !important;
	flex: 0 0 auto !important;
	height: var(--dior-h, auto);
	margin: 0 !important;
	opacity: var(--dior-opacity, 0);
	transform: translate3d(0, calc(-50% + var(--dior-y, 0px)), 0) scale(var(--dior-scale, 1));
	transform-origin: center center;
	transition: left 760ms cubic-bezier(.22, .61, .36, 1),
		width 760ms cubic-bezier(.22, .61, .36, 1),
		height 760ms cubic-bezier(.22, .61, .36, 1),
		opacity 300ms ease, transform 760ms cubic-bezier(.22, .61, .36, 1);
	will-change: left, width, height, opacity, transform;
	overflow: hidden;
}

body.page-id-15 .pargatz-dior-scroll-hero.is-condensed .wd-carousel-item {
	left: var(--dior-end-x, 10vw);
	width: var(--dior-end-w, 30vw) !important;
	height: var(--dior-end-h, auto);
	opacity: var(--dior-end-opacity, 1);
	transform: translate3d(0, calc(-50% + var(--dior-end-y, 0px)), 0) scale(1);
}

body.page-id-15 .pargatz-dior-scroll-hero .promo-banner,
body.page-id-15 .pargatz-dior-scroll-hero .main-wrapp-img,
body.page-id-15 .pargatz-dior-scroll-hero .banner-image,
body.page-id-15 .pargatz-dior-scroll-hero picture,
body.page-id-15 .pargatz-dior-scroll-hero picture img {
	width: 100%;
	height: 100%;
}

body.page-id-15 .pargatz-dior-scroll-hero .promo-banner {
	background: #111;
}

body.page-id-15 .pargatz-dior-scroll-hero .banner-image,
body.page-id-15 .pargatz-dior-scroll-hero picture img {
	object-fit: cover;
	object-position: center center;
}

body.page-id-15 .pargatz-dior-scroll-hero .promo-banner-wrapper:nth-child(n+4),
body.page-id-15 .pargatz-dior-scroll-hero .wd-carousel-navigation,
body.page-id-15 .pargatz-dior-scroll-hero .wd-nav-arrows,
body.page-id-15 .pargatz-dior-scroll-hero .wd-dots {
	display: none !important;
}

body.page-id-15 .pargatz-dior-scroll-hero .promo-banner-wrapper {
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}

/* Keep the following Elementor content from appearing beside the sticky hero. */
body.page-id-15 .pargatz-dior-scroll-hero + .elementor-widget-wd_products_tabs {
	position: relative;
	z-index: 3;
}

}

@media (prefers-reduced-motion: reduce) {
	body.page-id-15 .pargatz-dior-scroll-hero .wd-carousel-item {
		transition: none;
	}
	body.page-id-15 .pargatz-dior-scroll-hero .pargatz-dior-video-layer {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Single product: place variation swatches around the product gallery.
   The WooCommerce variation form remains intact; only its visual layout
   changes on desktop. Below 992px WoodMart keeps its original layout.
------------------------------------------------------------------------- */
@media (min-width: 992px) {
	body.single-product .elementor-element-faf80bc .elementor-element-d4e4bea {
	position: static;
}

	body.single-product .elementor-element-faf80bc form.variations_form {
	position: static;
}

	body.single-product .elementor-element-faf80bc form.variations_form > table.variations {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	margin: 0;
	display: block;
	z-index: 5;
}

	body.single-product .elementor-element-faf80bc form.variations_form > table.variations > tbody {
	position: static;
	display: block;
}

	body.single-product .elementor-element-faf80bc form.variations_form > table.variations > tbody > tr {
	position: absolute;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background: transparent;
}

/* Frame color: below the gallery, aligned to its bottom-right corner. */
	body.single-product .elementor-element-faf80bc form.variations_form > table.variations > tbody > tr:has(select[name="attribute_pa_color-montura"]) {
	top: 500px;
	left: -350px;
	width: 320px;
}

	body.single-product .elementor-element-faf80bc form.variations_form > table.variations > tbody > tr:has(select[name="attribute_pa_color-montura"]) > th {
	flex: 0 0 auto;
	margin: 0 16px 0 0;
	padding: 0;
	white-space: nowrap;
}

	body.single-product .elementor-element-faf80bc form.variations_form > table.variations > tbody > tr:has(select[name="attribute_pa_color-montura"]) > td {
	flex: 1 1 auto;
	width: auto;
	padding: 0;
}

	body.single-product .elementor-element-faf80bc form.variations_form > table.variations > tbody > tr:has(select[name="attribute_pa_color-montura"]) .wd-swatches-product {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 14px;
	margin: 0;
}

/* Filter color: vertical rail to the left of the gallery. */
	body.single-product .elementor-element-faf80bc form.variations_form > table.variations > tbody > tr:has(select[name="attribute_pa_vista-filtro"]) {
	top: 45px;
    /* JavaScript aligns this rail to the actual left edge of the gallery. */
    left: -740px;
	width: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

	body.single-product .elementor-element-faf80bc form.variations_form > table.variations > tbody > tr:has(select[name="attribute_pa_vista-filtro"]) > th {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

	body.single-product .elementor-element-faf80bc form.variations_form > table.variations > tbody > tr:has(select[name="attribute_pa_vista-filtro"]) > td {
	width: 100%;
	padding: 0;
}

	body.single-product .elementor-element-faf80bc form.variations_form > table.variations > tbody > tr:has(select[name="attribute_pa_vista-filtro"]) .wd-swatches-product {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0;
}

	/* Filter thumbnails: show the complete image, not a cropped square. */
	body.single-product .elementor-element-faf80bc form.variations_form > table.variations > tbody > tr:has(select[name="attribute_pa_vista-filtro"]) .wd-swatch {
		width: 72px !important;
		height: 58px !important;
		border-radius: 0 !important;
		background: transparent !important;
		border: 0;
	}

	body.single-product .elementor-element-faf80bc form.variations_form > table.variations > tbody > tr:has(select[name="attribute_pa_vista-filtro"]) .wd-swatch-bg {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		border-radius: 0;
	}

	body.single-product .elementor-element-faf80bc form.variations_form > table.variations > tbody > tr:has(select[name="attribute_pa_vista-filtro"]) .wd-swatch :is(img, picture) {
		width: auto !important;
		height: auto !important;
		max-width: 72px !important;
		max-height: 58px !important;
		object-fit: contain !important;
		border-radius: 0 !important;
	}

tbody.single-product .elementor-element-faf80bc form.variations_form > table.variations .wd-swatch {
	margin: 0;
}
}