/**
 * Variation configurator — child theme only (right-hand rail + dimmed backdrop).
 */

/* Summary: only “Configure” — neutralise parent theme flex on whole form */
body.tlb-variation-sidebar-active .woocommerce div.product .summary form.cart.tlb-variations-sidebar-mode {
	display: block !important;
	width: 100% !important;
	flex: none !important;
	max-width: none;
	position: relative;
	z-index: 0;
}

/**
 * While the rail is open, lift the product summary (and main column) above sticky headers /
 * Elementor so the fixed overlay stacks correctly when the drawer is nested in the form.
 */
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product .woocommerce div.product {
	position: relative;
	z-index: 100020;
	isolation: isolate;
}

html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product .woocommerce div.product .summary,
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product .woocommerce div.product .summary.entry-summary {
	/* Beats parent @media (min-width: 992px) `position: sticky` on summary-scrolling — sticky traps
	   `position: fixed` compositing so the gallery / ads-banner siblings paint above the overlay. */
	position: relative !important;
	top: auto !important;
	inset-block-start: auto !important;
	z-index: 100022;
	isolation: isolate;
}

/**
 * Siblings of the form inside `.summary` (rating, price, wishlist row, etc.): keep under the
 * form subtree so the full-viewport backdrop covers them.
 */
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product .woocommerce div.product .summary > *:not( form.variations_form ) {
	position: relative;
	z-index: 0 !important;
}

/**
 * Gallery is a direct child of `div.product` beside `.summary`; pin it low while configuring.
 */
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product .woocommerce div.product.summary-scrolling > .woocommerce-product-gallery {
	z-index: 0 !important;
	position: relative;
	isolation: isolate;
}

/**
 * Flexslider / zoom layers can sit in their own compositing stack above the dimmed overlay.
 */
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product .woocommerce div.product .woocommerce-product-gallery .flex-viewport,
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs,
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product .woocommerce div.product .woocommerce-product-gallery .flex-control-nav,
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product .woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger,
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product .woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper .zoomImg {
	position: relative !important;
	z-index: 0 !important;
}

/* Entire main column above sticky header / Elementor (header is usually a sibling before #main) */
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product #main {
	position: relative;
	z-index: 100030;
	isolation: isolate;
}

/**
 * Drawer lives inside `form.cart` which otherwise uses z-index:0 — that traps the fixed layer
 * below other nodes in `.summary`. While open, lift the form subtree above the CTA row.
 */
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product .woocommerce div.product .summary form.cart.tlb-variations-sidebar-mode {
	z-index: 999998 !important;
}

/**
 * Every direct child of `div.product` except `.summary` (gallery, tabs, bottom blocks): keep a low
 * stacking level so `.summary` + fixed drawer stay on top within the product context.
 */
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product .woocommerce div.product > *:not(.summary) {
	position: relative;
	z-index: 1 !important;
}

/* Anything after the product box in #primary (reviews, bottom strips) stays under the product stack */
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product #primary > div.product ~ * {
	position: relative;
	z-index: 0 !important;
}

/**
 * Elementor single-product layouts: image widgets often ship with high z-index for sliders.
 */
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product #primary .elementor-widget-woocommerce-product-images,
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product #primary .elementor-widget-image-gallery {
	position: relative;
	z-index: 1 !important;
}

/**
 * Elementor flex / section tree: gallery, icon lists, and text widgets often sit in sibling
 * `.elementor-element` / `.e-con` branches with inline z-index, so they paint above the fixed
 * drawer that lives inside the add-to-cart form. Flatten the whole #main Elementor stack, then
 * lift every subtree that contains our variations form (including columns + sections).
 * (Skip in the Elementor editor so the canvas is unchanged.)
 */
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product:not(.elementor-editor-active) #main .elementor-element,
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product:not(.elementor-editor-active) #main .e-con {
	position: relative;
	z-index: 1 !important;
}

html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product:not(.elementor-editor-active) #main .elementor-element:has( form#tlb-wc-variations-form ),
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product:not(.elementor-editor-active) #main .elementor-element:has( form.tlb-variations-sidebar-mode ),
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product:not(.elementor-editor-active) #main .e-con:has( form#tlb-wc-variations-form ),
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product:not(.elementor-editor-active) #main .e-con:has( form.tlb-variations-sidebar-mode ) {
	z-index: 999999 !important;
	isolation: isolate;
}

/* Shortcode / HTML widgets that wrap the form without .elementor-element on the same node */
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product:not(.elementor-editor-active) #main .elementor-widget-container:has( form.tlb-variations-sidebar-mode ) {
	position: relative;
	z-index: 999999 !important;
	isolation: isolate;
}

/**
 * Theme full-bleed grey bars (TheLuxuryBed): ::before on #reviews / related / comments uses
 * position:absolute + full viewport width. That layer can paint above the fixed variation drawer.
 * When the drawer is open, tuck those pseudo-elements behind their own section + below the drawer stack.
 *
 * Note: WooCommerce puts `single-product` on `body`, so selectors must be
 * `body.tlb-variation-sidebar-active.single-product` — not `body … .single-product` (descendant),
 * or these rules never match.
 */
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product #primary > #reviews,
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product #reviews,
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product .single-related-wrapper,
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product.product-style-v3 .comments-area {
	position: relative;
	z-index: 0;
	isolation: isolate;
}

html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product.product-style-v3 .comments-area:before,
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product .single-related-wrapper:before,
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product #primary > #reviews:before {
	z-index: -1 !important;
}

html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product.product-style-v6 .comments-area:before,
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product.product-style-v6 .single-related-wrapper:before {
	z-index: -1 !important;
}

html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product.product-style-v6 .comments-area,
html.tlb-drawer-open body.tlb-variation-sidebar-active.single-product.product-style-v6 .single-related-wrapper {
	isolation: isolate;
}

/**
 * Closed drawer must stack BELOW the CTA — otherwise the full-screen layer steals clicks
 * even with pointer-events:none in some browsers.
 */
.tlb-variation-drawer:not(.is-open) {
	z-index: 0;
}

/* Above flattened Elementor + theme mini-cart (.ts-sidebar-content ~99992). Panel stays inside form stack. */
.tlb-variation-drawer.is-open {
	z-index: 1000000 !important;
}

/* CTA sits above closed drawer */
.tlb-variation-summary-cta {
	position: relative;
	z-index: 3;
	max-width: none;
	isolation: isolate;
	margin: 2rem 0;
	padding: 0;
}

/* Plain row: black button + label */
.tlb-variation-summary-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.35rem;
}

.tlb-variation-summary-config-label {
	flex: 1 1 12rem;
	min-width: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: rgba(0, 0, 0, 0.72);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
}

/* Drawer shell */
.tlb-variation-drawer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	visibility: hidden;
	transition: visibility 0.35s linear;
}

.tlb-variation-drawer.is-open {
	pointer-events: auto;
	visibility: visible;
}

html.tlb-drawer-open {
	overflow: hidden;
}

/* Backdrop: blur + dim — reset button UA/theme hover lightening */
.tlb-variation-drawer__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: transparent;
	font-size: 0;
	line-height: 0;
	text-shadow: none;
	background: rgba(18, 18, 18, 0.42);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	transition: opacity 0.36s ease;
	filter: none;
	-webkit-filter: none;
}

.tlb-variation-drawer.is-open .tlb-variation-drawer__backdrop {
	opacity: 1;
}

/* Keep overlay identical on hover/focus/active (themes often brighten buttons) */
.tlb-variation-drawer.is-open .tlb-variation-drawer__backdrop:hover,
.tlb-variation-drawer.is-open .tlb-variation-drawer__backdrop:focus-visible,
.tlb-variation-drawer.is-open .tlb-variation-drawer__backdrop:active {
	background: rgba(18, 18, 18, 0.42) !important;
	opacity: 1 !important;
	filter: none !important;
	-webkit-filter: none !important;
	box-shadow: none !important;
	transform: none !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.tlb-variation-drawer__backdrop {
		background: rgba(18, 18, 18, 0.58);
	}

	.tlb-variation-drawer.is-open .tlb-variation-drawer__backdrop:hover,
	.tlb-variation-drawer.is-open .tlb-variation-drawer__backdrop:focus-visible,
	.tlb-variation-drawer.is-open .tlb-variation-drawer__backdrop:active {
		background: rgba(18, 18, 18, 0.58) !important;
	}
}

/* Right rail — full viewport height, slides in from the inline end */
.tlb-variation-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	z-index: 1;
	width: min(480px, 100%);
	max-width: 100%;
	height: 100%;
	max-height: 100dvh;
	padding-right: env(safe-area-inset-right, 0);
	background: #fff;
	box-shadow: -12px 0 48px rgba(0, 0, 0, 0.18);
	border-radius: 0;
	display: flex;
	flex-direction: column;
	transform: translate3d(calc(100% + 1px), 0, 0);
	transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
	overflow: hidden;
}

.tlb-variation-drawer.is-open .tlb-variation-drawer__panel {
	transform: translate3d(0, 0, 0);
}

.rtl .tlb-variation-drawer__panel {
	right: auto;
	left: 0;
	padding-right: 0;
	padding-left: env(safe-area-inset-left, 0);
	box-shadow: 12px 0 48px rgba(0, 0, 0, 0.18);
	transform: translate3d(calc(-100% - 1px), 0, 0);
}

.rtl .tlb-variation-drawer.is-open .tlb-variation-drawer__panel {
	transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	.tlb-variation-drawer__panel {
		transition-duration: 0.01ms;
	}
}

/* Header */
.tlb-variation-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 1.25rem 1.35rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	flex-shrink: 0;
}

.tlb-variation-drawer__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

.tlb-variation-drawer__close {
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: 1.75rem;
	line-height: 1;
	padding: 0.25rem 0.5rem;
	color: inherit;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.tlb-variation-drawer__close:hover,
.tlb-variation-drawer__close:focus-visible {
	opacity: 1;
}

/* Scroll body — attribute selectors */
.tlb-variation-drawer__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 1.35rem 1.35rem 1rem;
	-webkit-overflow-scrolling: touch;
}

/* Footer — quantity + add to cart + variation details */
.tlb-variation-drawer__footer {
	flex-shrink: 0;
	padding: 1.15rem 1.35rem max(1.5rem, env(safe-area-inset-bottom));
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	background: #fff;
}

.tlb-variation-drawer__footer .single_variation_wrap {
	margin: 0;
	width: 100%;
}

/* Variation price / availability + cart row inside drawer */
body.tlb-variation-sidebar-active .woocommerce div.product .summary form.cart.tlb-variations-sidebar-mode .tlb-variation-drawer__footer .single_variation_wrap {
	display: block;
	width: 100%;
	margin: 0;
}

body.tlb-variation-sidebar-active .woocommerce div.product .summary form.cart.tlb-variations-sidebar-mode .tlb-variation-drawer__footer .woocommerce-variation {
	width: 100%;
	margin-bottom: 0.85rem;
}

body.tlb-variation-sidebar-active .woocommerce div.product .summary form.cart.tlb-variations-sidebar-mode .tlb-variation-drawer__footer .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	width: 100%;
	margin: 0;
	gap: 0;
}

body.tlb-variation-sidebar-active .woocommerce div.product .summary form.cart.tlb-variations-sidebar-mode .tlb-variation-drawer__footer .single_add_to_cart_button {
	flex: 1;
	min-width: 0;
	min-height: 48px;
}

body.tlb-variation-sidebar-active .woocommerce div.product .summary form.cart.tlb-variations-sidebar-mode .tlb-variation-drawer__footer .ts-buy-now-button {
	width: 100%;
	margin-top: 10px;
}

body.tlb-variation-sidebar-active .woocommerce div.product.sold-individually .summary form.cart.tlb-variations-sidebar-mode .tlb-variation-drawer__footer div.quantity {
	display: none;
}

/* Variation table inside drawer */
.tlb-variation-drawer__body table.variations {
	width: 100%;
	border: 0;
	margin: 0;
}

.tlb-variation-drawer__body table.variations tr {
	display: block;
	margin-bottom: 1.35rem;
}

.tlb-variation-drawer__body table.variations th.label {
	display: block;
	padding: 0 0 0.4rem;
	text-align: start;
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Parent `.variations tr > th.label { width: 90px }` squeezes labels in the drawer */
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	overflow-wrap: anywhere;
	word-break: normal;
}

.tlb-variation-drawer__body table.variations td.value {
	display: block;
	padding: 0;
	position: relative;
}

/**
 * Iconic swatches + theme `.ts-product-attribute` (TheLuxuryBed parent):
 * `.ts-product-attribute > .option.hidden { display: block !important; opacity: 0.4 }` creates one
 * visible row per term and hides the real swatch list. Hide the theme duplicate only when Iconic
 * renders `ul.iconic-was-swatches` in the same cell (class set in variation-sidebar.js).
 */
body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations td.value.tlb-value-has-iconic-swatches > .ts-product-attribute {
	display: none !important;
}

/**
 * Parent theme (TheLuxuryBed): `.woocommerce div.product form.cart .variations * { display: block }`
 * forces every Iconic `li` / `a` / inner node to block — one swatch per row, “broken” list.
 * Reset only inside the drawer and lay out Iconic as a wrapping flex grid; group labels = full row.
 */
body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations ul.iconic-was-swatches {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	align-content: flex-start !important;
	gap: 0.5rem 0.6rem !important;
	list-style: none !important;
	margin: 0.35rem 0 0.85rem !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations ul.iconic-was-swatches.iconic-was-swatches--stacked {
	display: flex !important;
}

body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations ul.iconic-was-swatches > li.iconic-was-swatches__label {
	display: block !important;
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	clear: none;
	margin: 1.1rem 0 0.35rem !important;
	padding: 0.55rem 0 0 !important;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.65);
	list-style: none !important;
	line-height: 1.35;
}

body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations ul.iconic-was-swatches > li.iconic-was-swatches__label:first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: 0 !important;
}

body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations ul.iconic-was-swatches > li.iconic-was-swatches__item {
	display: flex !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: top !important;
	list-style: none !important;
	line-height: 0 !important;
}

body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations li.iconic-was-swatches__item.iconic-was-swatches__item--hidden,
body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations li.iconic-was-swatches__label.iconic-was-swatches__item--hidden {
	display: none !important;
}

body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations ul.iconic-was-swatches .iconic-was-swatch {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: auto !important;
	line-height: 0 !important;
	text-decoration: none !important;
}

body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations ul.iconic-was-swatches .iconic-was-swatch__container {
	display: block !important;
	position: relative;
	/* Must stay above Iconic’s `.iconic-was-swatch::before` border layer (z-index:10); we had z-index:2 which hid all thumbnails */
	z-index: 20;
	max-width: 100%;
	box-sizing: border-box !important;
}

body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations ul.iconic-was-swatches .iconic-was-swatch__graphic {
	display: block !important;
	box-sizing: border-box !important;
}

body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations ul.iconic-was-swatches .iconic-was-swatch__graphic--image,
body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations ul.iconic-was-swatches .iconic-was-swatch__graphic img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	opacity: 1 !important;
	visibility: visible !important;
	object-fit: cover;
}

body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations ul.iconic-was-swatches .iconic-was-swatch__text {
	display: none !important;
}

/* Image swatch tiles: consistent tile size in grid (Iconic inline width/height still apply to container) */
body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations ul.iconic-was-swatches.iconic-was-swatches--image-swatch .iconic-was-swatch__container {
	min-width: 48px;
	min-height: 48px;
}

/* Clear link: not a full-width block row */
body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations td.value > a.reset_variations {
	display: inline-flex !important;
	width: auto !important;
	margin-top: 0.75rem !important;
	position: static !important;
	left: auto !important;
	bottom: auto !important;
	transform: none !important;
	clear: both;
}

/* Iconic slider mode: do not force flex on Flickity-enabled lists */
body.tlb-variation-sidebar-active .tlb-variation-drawer__body table.variations ul.iconic-was-swatches.flickity-enabled {
	display: block !important;
}

.tlb-variation-drawer__body select {
	width: 100%;
	min-height: 48px;
	padding: 0.55rem 0.85rem;
	font-size: 1rem;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 4px;
	background-color: #fff;
}

.tlb-variation-drawer__body .reset_variations {
	display: inline-block;
	margin-top: 0.85rem;
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Configure button — plain solid black, inline next to label */
body.tlb-variation-sidebar-active .tlb-variations-sidebar-mode .tlb-open-variation-drawer.button {
	position: relative;
	z-index: 4;
	display: inline-block;
	width: auto;
	flex: 0 0 auto;
	margin: 0;
	padding: 0.85rem 1.25rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.75rem;
	line-height: 1.3;
	cursor: pointer;
	pointer-events: auto;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	border-radius: 0;
	border: none !important;
	color: #fff !important;
	background: #0a0a0a !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease;
	filter: none !important;
	-webkit-filter: none !important;
}

body.tlb-variation-sidebar-active .tlb-variations-sidebar-mode .tlb-open-variation-drawer.button:hover {
	color: #fff !important;
	background: #000 !important;
	filter: none !important;
	-webkit-filter: none !important;
	box-shadow: none !important;
}

body.tlb-variation-sidebar-active .tlb-variations-sidebar-mode .tlb-open-variation-drawer.button:active {
	background: #141414 !important;
	transform: none;
}

body.tlb-variation-sidebar-active .tlb-variations-sidebar-mode .tlb-open-variation-drawer.button:focus-visible {
	outline: 2px solid #0a0a0a;
	outline-offset: 3px;
	box-shadow: none !important;
}

@media print {
	.tlb-variation-drawer,
	.tlb-variation-summary-cta {
		display: none !important;
	}
}