:is( .wd-nav-header, .wd-nav-main, .wd-nav-mobile ):not( .wd-dis-act )
	> li.menu-item-has-children:is( .current-menu-ancestor, .current-menu-parent, .mb-nav-parent-active )
	> a {
	color: var(--nav-color-active);
	background-color: var(--nav-bg-active);
	box-shadow: var(--nav-shadow-active);
	border: var(--nav-border-active);
}

/* The underline nav styles keep their marker under the parent too. */
:is( .wd-nav-header, .wd-nav-main, .wd-nav-mobile )[class*="wd-style-underline"]
	> li.menu-item-has-children:is( .current-menu-ancestor, .current-menu-parent, .mb-nav-parent-active )
	> a .nav-link-text:after {
	width: 100%;
}

/*
 * The dropdown item itself.
 *
 * The theme already styles .current-menu-item, so this only has to cover the
 * item custom.js identified — a Custom Link WordPress could not label. Given
 * the same active colour as the theme's own, so the two are indistinguishable.
 */
:is( .wd-nav-header, .wd-nav-main, .wd-nav-mobile ):not( .wd-dis-act )
	li.mb-nav-child-active > a {
	color: var(--nav-color-active);
}

/* ===========================================================================
 * Navigation — highlight "Shop" while browsing products
 *
 * A separate rule because Shop has no dropdown, so it can never match the one
 * above. WooCommerce adds current_page_parent to the Shop item on a single
 * product page, and functions.php adds the same class on category and tag
 * archives, which WooCommerce itself does not cover.
 *
 * Underscores, not hyphens: that is the spelling WordPress and WooCommerce use
 * for this particular class.
 * ======================================================================== */

:is( .wd-nav-header, .wd-nav-main, .wd-nav-mobile ):not( .wd-dis-act )
	> li:is( .current_page_parent, .current_page_ancestor )
	> a {
	color: var(--nav-color-active);
	background-color: var(--nav-bg-active);
	box-shadow: var(--nav-shadow-active);
	border: var(--nav-border-active);
}

:is( .wd-nav-header, .wd-nav-main, .wd-nav-mobile )[class*="wd-style-underline"]
	> li:is( .current_page_parent, .current_page_ancestor )
	> a .nav-link-text:after {
	width: 100%;
}

@media (max-width: 1024px) {

	.category_home_slider .mb-cat-slider {
		display: flex;
		flex-wrap: nowrap;
		margin-inline: 0;
		padding-bottom: 4px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.category_home_slider .mb-cat-slider::-webkit-scrollbar {
		width: 0;
		height: 0;
		display: none;
	}

	/*
	 * Two cards per view.
	 *
	 * 50% each, so a pair fills the track exactly and the gutter between them
	 * comes from the padding WoodMart already puts on .wd-col — no gap to
	 * subtract and nothing to keep in step with the theme's spacing.
	 *
	 * Snapping to the START of a card, not its centre: centring is right when
	 * one card fills the view, but with two visible it would park a card in the
	 * middle and show half a card either side. Aligning to the start keeps the
	 * pairs whole.
	 */
	.category_home_slider .mb-cat-slider > .wd-col {
		flex: 0 0 50%;
		max-width: 50%;
		margin-bottom: 0;
		scroll-snap-align: start;
	}

	/*
	 * Equal boxes.
	 *
	 * The columns are already the same height — they are flex children and
	 * stretch. What was not stretching is .wd-cat-wrap, the bordered box you
	 * actually see: 201px under a one-line title, 226px under a two-line one,
	 * which is exactly the ragged edge in the screenshot. Filling the column
	 * makes every visible box identical.
	 */
	.category_home_slider .mb-cat-slider > .wd-col > .wd-cat-wrap {
		height: 100%;
	}

	.category_home_slider .mb-cat-slider .wd-cat-inner {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	/* The photograph takes the room that is left, and sits in the middle of it. */
	.category_home_slider .mb-cat-slider .wd-cat-thumb {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		justify-content: center;
		min-height: 0;
	}

	/*
	 * Reserve the picture's shape before it arrives.
	 *
	 * These thumbnails are lazy-loaded and carry no width or height, so until
	 * one lands its box is zero high and everything under it sits too far up;
	 * when it lands, the row grows and the page jumps. Measured on the home
	 * page that single image was the largest layout shift on the site, with a
	 * CLS of 0.42 against a 0.1 "good" threshold, and the console flags 25
	 * more lazy images with no dimensions behind it.
	 *
	 * A square ratio matches what WooCommerce generates for the thumbnail size
	 * (148x148 on this install), so the space held is the space taken and
	 * nothing moves when the file appears.
	 */
	.category_home_slider .mb-cat-slider .wd-cat-thumb img {
		aspect-ratio: 1 / 1;
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	/*
	 * Two lines are reserved for every name, whether it needs them or not.
	 * Without this "Basic Cases" sits a line lower than "Lens Protectors" and
	 * the photographs above them never line up across the slider.
	 */
	.category_home_slider .mb-cat-slider .wd-cat-content {
		flex: 0 0 auto;
	}

	.category_home_slider .mb-cat-slider .wd-entities-title {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 2.8em;
		margin-bottom: 0;
	}

	/*
	 * Belt and braces. Packery writes these three inline, and destroying it
	 * clears them — but if the plugin were ever missing or failed, an
	 * absolutely-positioned card would stack the whole track on top of itself.
	 * These are the only !important declarations in this file and they exist
	 * solely to beat inline styles, which nothing else can.
	 */
	.category_home_slider .mb-cat-slider > .wd-col {
		position: static !important;
		left: auto !important;
		top: auto !important;
	}
}

@media (prefers-reduced-motion: reduce) {

	.category_home_slider .mb-cat-slider {
		scroll-behavior: auto;
	}
}

/* ---------------------------------------------------------------------------
 * The category slider's dots.
 *
 * Built by custom.js with class names of our own, because .wd-nav-pagin belongs
 * to WoodMart's carousels and its scripts manage those. The look, though, is
 * borrowed properly: every colour and size below reads the same --wd-pagin-*
 * custom properties the theme's own dots use, so these match the hero slider
 * above them and follow any palette change made in Theme Settings.
 *
 * Hidden by default and only shown in the slider's own media query, so on
 * desktop — where the grid is a grid and there is nothing to page through —
 * they are not in the way.
 * ------------------------------------------------------------------------ */

.category_home_slider .mb-cat-dots {
	display: none;
}

@media (max-width: 1024px) {

	.category_home_slider .mb-cat-dots {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--wd-pagin-gap, 10px);
		margin-top: 20px;
		font-size: 0;
		line-height: 0;
	}

	.category_home_slider .mb-cat-dot {
		width: var(--wd-pagin-size, 10px);
		height: var(--wd-pagin-size, 10px);
		min-width: 0;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background-color: var(--wd-pagin-bg, var(--color-gray-300, rgba(0, 0, 0, 0.2)));
		box-shadow: none;
		font-size: 0;
		line-height: 0;
		text-transform: none;
		letter-spacing: normal;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
		transition: background-color 0.25s ease, width 0.25s ease;
	}

	.category_home_slider .mb-cat-dot:hover {
		background-color: var(--wd-pagin-bg-hover, var(--color-gray-800, rgba(0, 0, 0, 0.7)));
	}

	/* The one you are on: the theme's active colour, stretched to a pill so it
	   reads at a glance even for somebody who cannot tell the two tones apart. */
	.category_home_slider .mb-cat-dot.mb-cat-dot--on {
		width: calc(var(--wd-pagin-size, 10px) * 2.4);
		border-radius: calc(var(--wd-pagin-size, 10px) / 2);
		background-color: var(--wd-pagin-bg-act, var(--color-gray-800, rgba(0, 0, 0, 0.8)));
	}

	.category_home_slider .mb-cat-dot:focus-visible {
		outline: 2px solid var(--wd-pagin-bg-act, var(--color-gray-800, #333));
		outline-offset: 3px;
	}
}

@media (max-width: 768px) {

	.home_banner_slider .elementor-hidden-mobile {
		display: block;
	}
}

/* ---------------------------------------------------------------------------
 * Home banner — bring the height down on phones
 *
 * At 390px the slide measured 439px tall, but only 229px of that was content
 * (title 120, description 67, button 42). The other 210px was padding and gaps
 * carried over from the desktop layout:
 *
 *     35px  .wd-slide-container padding-top
 *     60px  the Elementor container's own padding-top
 *     20px  row gap under the title
 *     30px  row gap + margin under the description
 *     10px  container padding-bottom
 *     35px  .wd-slide-container padding-bottom
 *
 * On desktop that generosity reads as a wide, airy strip. On a phone the same
 * numbers make a block taller than it is wide, which is what looked wrong.
 * These rules shrink the spacing, not the content — nothing is hidden, moved or
 * resized except the title's line spacing, which tightens by a hair.
 *
 * min-height goes with it: the theme sets 420px on the slide, which would hold
 * the old height even after the padding came out.
 *
 * Phones only (max-width: 767px, Elementor's own mobile breakpoint), and every
 * selector is under .home_banner_slider, so no other slider or Elementor
 * container on the site is affected.
 * ------------------------------------------------------------------------ */

@media (max-width: 768px) {

	/*
	 * The theme's floor, which would otherwise hold the old height.
	 *
	 * !important is unavoidable here and is the only one in this block. The
	 * slider writes its per-breakpoint heights against its own element id —
	 * "#slider-96 .wd-slide { min-height: 420px }" — and an id outranks any
	 * number of classes, so no selector written here can win on specificity.
	 * Matching the id instead would tie this file to one slider's post id and
	 * break the day the banner is rebuilt.
	 */
	.home_banner_slider .wd-slide {
		min-height: 260px !important;
	}

	/*
	 * Asymmetric on purpose. The header sits OVER this banner — it is
	 * .whb-main-header, 60px tall, position:absolute, z-index 390, and the body
	 * carries the "overlap" class — so the first line of the title needs to
	 * start below it. Trimming the top padding to match the bottom put "Where
	 * Fashion" straight through the logo.
	 *
	 * 72px = the 60px header plus 12px of air. The old layout reserved 95px
	 * between them; this keeps the clearance and drops the rest.
	 *
	 * The 38px at the foot is the same idea at the other end. The slider's dots
	 * are position:absolute at bottom:15px, so they sit outside the flow and the
	 * button ran straight into them once the padding came down — they were
	 * overlapping by a pixel. 38px = 15 to the dots, 10 for the dots themselves,
	 * and 13 of air between them and the button.
	 */
	.home_banner_slider .wd-slide-container {
		padding-top: 72px;
		padding-bottom: 38px;
	}

	/*
	 * The outer Elementor container inside the slide.
	 *
	 * Its top margin was the 60px offender. Because .elementor around it has no
	 * padding or border, that margin collapsed straight through and pushed both
	 * elements down together — which is why the space looked like it belonged to
	 * the slide rather than to this container.
	 */
	.home_banner_slider .wd-slide-inner .e-con.e-parent {
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 14px;
		padding-bottom: 6px;
	}

	/* The stack between title, description and button. */
	.home_banner_slider .e-con-inner {
		row-gap: 12px;
	}

	/*
	 * Three lines of display type do not need 40px of leading on a phone.
	 *
	 * Four classes deep on purpose. Elementor writes its own responsive type as
	 * ".elementor-83 .elementor-element.elementor-element-f491042 .title", which
	 * is three classes; a shorter selector here simply loses and the leading
	 * never changes.
	 */
	.home_banner_slider .wd-slide-inner .elementor-element .title-wrapper .title {
		line-height: 1.16;
	}

	.home_banner_slider .elementor-widget-text {
		margin-bottom: 0;
	}
}

@media (width <= 1440px) {
	.container.wd-slide-container.content-fixed {
		--container-inline-distance: 5rem;
		--wd-container-w: min(1320px, 100% - var(--container-inline-distance));
	}
}
@media (width <= 578px) {
	.container.wd-slide-container.content-fixed {
		--container-inline-distance: 2rem;
	}
	.homebanner_custom_class {
		.home_banner_slider {
			.e-con-inner {
				/* padding-inline: 1.5rem !important; */
				.elementor-element.wd-animation:has(>p) {
					display: none;
				}
				.elementor-widget-container {
					margin-bottom: 8px !important;
				}
			}
		}
		.whb-overcontent .whb-main-header {
			position: relative;
		}
	}
	.globle_footer .wd-image img {
		object-fit: contain !important;
	}
}

.e-con[class*="wd-section-stretch"] {
	left: auto;

	/* min-width first: it pins the box open and would win over width alone.
	   Both values are Elementor's own defaults for .e-con. */
	min-width: 0;
	width: var(--width, 100%);
}

/* ===========================================================================
 * Single product — no red cross over unavailable swatches
 *
 * Woo Variation Swatches marks a swatch that cannot be combined with the
 * current selection by painting a red X across it:
 *
 *     .variable-item:not(.radio-variable-item).disabled .variable-item-contents::before,
 *     .variable-item:not(.radio-variable-item).no-stock  .variable-item-contents::before {
 *         content: " ";
 *         background-image: var(--wvs-cross);
 *     }
 *
 * Only the picture is dropped here, not the pseudo-element and not the state.
 * That box is also what carries the plugin's blur and dimming, and the item
 * keeps its own .disabled class, so an unavailable swatch still looks and
 * behaves exactly as it did — faded and unclickable — it simply is not crossed
 * out any more. Blanking the whole ::before, or the .disabled rules, would take
 * that away with it.
 *
 * Scope
 * -----
 * .single-product, WooCommerce's own body class, so this reaches the product
 * detail page and nothing else — the shop and category loops draw their
 * swatches with WoodMart's markup, which is untouched here.
 *
 * Note it is .single-product.woo-variation-swatches with no space: the plugin
 * puts its class on <body> too, so a descendant selector would be asking for
 * one inside the other and match nothing.
 *
 * The selectors carry one class more than the plugin's own (0,7,1 against
 * 0,6,1), so they win on specificity rather than on load order — which is what
 * makes them safe against WP-Optimize reordering the minified stylesheets.
 * ======================================================================== */

.single-product.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).disabled .variable-item-contents::before,
.single-product.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).disabled:hover .variable-item-contents::before,
.single-product.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).no-stock .variable-item-contents::before,
.single-product.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).no-stock:hover .variable-item-contents::before {
	background-image: none;
}

/* ===========================================================================
 * Single product — readable "Additional information" table
 *
 * WoodMart lays this table out itself: the tbody is a grid whose column count
 * comes from --wd-attr-col (set to 2 for this page in Elementor), and each row
 * is a flex line:
 *
 *     .shop_attributes tbody { display: grid; grid-template-columns: repeat(var(--wd-attr-col, 1), 1fr) }
 *     .shop_attributes tr    { display: flex; justify-content: space-between }
 *     .shop_attributes td    { text-align: end }
 *
 * In a 615px wide column, space-between throws the value hard against the far
 * edge and text-align:end makes it ragged down the left, so "Style" sat alone
 * with a wide empty gap before "Regular, Wavy, With Zip Pocket", and the Color
 * list wrapped right-aligned. It reads as a broken table rather than a list of
 * attributes.
 *
 * The two-column layout was kept at first, on the grounds that it is the
 * page's own setting. That turned out to be wrong for any product with a
 * single attribute, where the lone row sits in column one and column two is
 * simply empty — a wide unexplained gap beside the value. The grid now comes
 * off entirely and the rows stack, which is right at any attribute count.
 *
 * Scope
 * -----
 * .product-custom-class (the child theme's own body class for product pages)
 * plus .woocommerce-product-attributes, which WooCommerce puts only on the
 * single product's table. Product cards in the loop render .shop_attributes
 * without that class, so the fw-button hover design keeps its own styling —
 * verified: this page carries exactly one such table and none inside a card.
 * ======================================================================== */

/*
 * The grid comes off the tbody.
 *
 * The theme lays the rows out as a grid of --wd-attr-col columns, set to 2 for
 * this page. That is fine for a product with several attributes and wrong for
 * one with a single attribute: the row takes the first column, the second
 * stays empty, and the value is left stranded halfway across the page with a
 * wide blank beside it -- which is what the gap on the lens protector is.
 *
 * As plain rows the table is as wide as it needs to be and no wider, whatever
 * the attribute count. The column-gap and the negative margin-bottom the theme
 * pairs with the grid go with it, since neither means anything now.
 */
.product-custom-class .woocommerce-product-attributes tbody {
	display: block;
	margin-bottom: 0;
	column-gap: 0;
}

.product-custom-class .woocommerce-product-attributes tr {
	justify-content: flex-start;
}

.product-custom-class .woocommerce-product-attributes th {
	flex: 0 0 auto;
}

/*
 * A common label width lines the two columns' values up with each other. Only
 * from the desktop breakpoint up: the grid keeps its two columns on a phone,
 * where they are about 170px wide, and reserving 90px of that for the label
 * would leave the value in a strip barely wide enough for one word.
 */
@media (min-width: 1025px) {

	.product-custom-class .woocommerce-product-attributes th {
		min-width: 90px;
	}
}

.product-custom-class .woocommerce-product-attributes td {
	flex: 1 1 auto;
	text-align: start;
}

.wd-products.wd-products {
	align-items: stretch;
}

.wd-products .wd-product .product-wrapper {
	height: 100%;
}

.wd-products .wd-product .product-element-bottom {
	flex: 1 1 auto;
}

/*
 * No min-height on the title.
 *
 * It reserved two lines whether a title needed them or not, which left a gap
 * above the price on every short-titled card. The theme already clips titles
 * to two lines itself (its title-line-two setting, via max-height and
 * overflow), so the height was being fixed twice over.
 *
 * Cards still line up: .price below carries margin-top:auto, which collects
 * the leftover room at the bottom of the column regardless of title length.
 */

/*
 * No min-height on the category line either, for the same reason as the title
 * above: it reserved two lines on every card whether the categories needed
 * them or not, which is the gap that was left between the categories and the
 * price. The live site carries neither rule.
 */

/*
 * The bottom of the column. Everything above it keeps the spacing the theme
 * gives it; only the leftover room collects here, which is what makes a card
 * with no swatches line up with one that has them.
 */
.wd-products .wd-product .price {
	margin-top: auto;
}


.wd-page-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wd-page-wrapper > .wd-page-content {
	flex: 1 0 auto;
}

.wd-page-wrapper > .wd-footer {
	flex-shrink: 0;
}


.wd-page-title {
	position: relative;
}

.wd-page-title::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.5) 0%,
		rgba(0, 0, 0, 0.3) 55%,
		rgba(0, 0, 0, 0.5) 100%
	);
	pointer-events: none;
}

/* The words go above the scrim that was just put over the picture. */
.wd-page-title > .container {
	position: relative;
	z-index: 3;
}

.mb-flip-bar {
	--mb-flip-bar-h: 24px;

	position: relative;
	z-index: 1;
	padding: 8px 15px;
	background-color: #111;
	color: #fff;
}

/*
 * The one-line window. overflow:hidden is what limits the strip to a single
 * message; without it the whole stack would be on screen at once.
 */
.mb-flip-bar__viewport {
	height: var(--mb-flip-bar-h);
	overflow: hidden;
}

/*
 * The stack. It is taller than the window and moves as one piece — the script
 * only ever sets a translateY on this element, never on a message.
 */
.mb-flip-bar__track {
	display: flex;
	flex-direction: column;
	will-change: transform;
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Each message is exactly one window tall, so a whole number of steps always
 * leaves one message centred in the window and never half of two.
 */
.mb-flip-bar__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--mb-flip-bar-h);
	min-height: var(--mb-flip-bar-h);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.mb-flip-bar__track--jump {
	transition: none;
}

.mb-flip-bar--single .mb-flip-bar__viewport {
	height: auto;
}

.mb-flip-bar--single .mb-flip-bar__item {
	height: auto;
	white-space: normal;
}

@media (max-width: 480px) {

	.mb-flip-bar {
		padding-inline: 10px;
	}

	.mb-flip-bar__item {
		font-size: 11px;
		letter-spacing: 0;
	}
}

@media (min-width: 700px) {

	.mb-flip-bar {
		padding: 10px 20px;
	}
}

/*
 * Someone who has asked their system for less motion still gets every message —
 * the script keeps changing them, this just removes the travel between them.
 */
@media (prefers-reduced-motion: reduce) {

	.mb-flip-bar__track {
		transition: none;
	}
}

.mb-ig-share {
	position: relative;
}

/*
 * Placed by assets/js/custom.js in viewport coordinates, not by these rules.
 *
 * It used to be an absolutely positioned box hanging off the button, which
 * worked on the product page and broke in the quick view popup: the share row
 * there sits inside .summary-inner, a scrolling container, so the panel was
 * clipped by it and what escaped landed over the Buy now button. Fixed
 * positioning answers both — a fixed box is laid out against the viewport and
 * an ancestor's overflow does not cut it — and the script then keeps it beside
 * its button and inside the screen. z-index clears the popup, whose wrapper is
 * 1103 and whose content is 1105.
 */
.mb-ig-share__panel {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 260px;
	max-width: calc(100vw - 20px);
	padding: 10px;
	border-radius: 6px;
	background-color: #242424;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	text-align: start;
	cursor: default;
}

.mb-ig-share__panel__title {
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
}

/*
 * The type selector is what makes this stick. WoodMart styles form fields with
 * input[type=text], which outranks a lone class, so the panel's field was
 * inheriting the theme's full-height transparent form input instead — a faint
 * line of text on the dark panel rather than the white strip it is meant to be.
 * Every property the theme sets there is therefore answered here.
 */
.mb-ig-share__panel input.mb-ig-share__panel__url {
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 6px 8px;
	border: 0;
	border-radius: 4px;
	background-color: #fff;
	color: #242424;
	font-size: 11px;
	line-height: 1.4;
	direction: ltr;
	text-align: left;
	text-overflow: ellipsis;
}

.mb-ig-share__panel__actions {
	display: flex;
	gap: 6px;
}

.mb-ig-share__panel__btn {
	flex: 1 1 auto;
	padding: 5px 8px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0);
	color: #fff;
	font-size: 11px;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.mb-ig-share__panel__btn:hover,
.mb-ig-share__panel__btn:focus {
	background-color: rgba(255, 255, 255, 0.14);
}

.mb-ig-share__panel__btn--go {
	border-color: rgba(0, 0, 0, 0);
	background-color: #c13584;
}

.mb-ig-share__panel__btn--go:hover,
.mb-ig-share__panel__btn--go:focus {
	background-color: #a72c70;
}

.elementor-element-61ec326.elementor-element-61ec326 {
	position: relative;
	min-width: calc(100vw - var(--wd-scroll-w, 0px));
	width: calc(100vw - var(--wd-scroll-w, 0px));
	left: calc(50% - 50vw + var(--wd-scroll-w, 0px) / 2);
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.single-product .wd-collapsible-content.e-con,
.single-product .wd-collapsible-content.elementor-column > .elementor-widget-wrap {
	max-height: none !important;
	overflow: visible;

	/*
	 * transform:none, deliberately.
	 *
	 * The theme sets translate3d(0,0,0) on this element in
	 * woo-categories-loop-old.css -- a GPU-layer hint that does nothing
	 * visible but does create a stacking context. The product image blends
	 * against that context instead of against this circle's background, so
	 * mix-blend-mode:multiply had nothing grey to work with and the white JPEG
	 * background showed as a white square inside the circle.
	 *
	 * Removing the transform lets the blend reach the background beneath it.
	 * Repeated below at a higher specificity than the theme's own rule, which
	 * is .category-grid-item .wd-cat-thumb and can win on load order.
	 *
	 * overflow stays visible for the same reason: overflow:hidden would clip
	 * the hover scale neatly, but it also creates a stacking context and takes
	 * the blend down with it. The scale is kept inside the circle by giving the
	 * picture room to grow into instead -- see the padding on the image below.
	 */
	transform: none;
}

.home .wd-cats .category-grid-item .wd-cat-thumb,
.home .wd-cats .wd-cat .wd-cat-thumb {
	transform: none;
}

.single-product .wd-collapsible-content.e-con:not(.wd-opened)::after,
.single-product .wd-collapsible-content.elementor-column:not(.wd-opened) > .elementor-widget-wrap::after {
	content: none;
}

.wd-footer .e-con:has(.cmf-footer) {
	/* The layout's own rule for this container has the same weight and is
	   loaded after this file, so the two are marked to settle it. */
	--padding-top: 16px !important;
	--padding-bottom: 16px !important;
}

/* Full width: the shortcode widget is a flex item in the footer row and
   would otherwise shrink to its contents. The footer holds no other
   shortcode widget, so this reaches only this one. */
.wd-footer .elementor-widget-shortcode {
	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
}

.wd-footer .elementor-shortcode {
	width: 100%;
}

.cmf-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: clamp(24px, 3vw, 48px);
	row-gap: 18px;
	width: 100%;
	padding: 0;
	font-family: var(--wd-text-font, inherit);
}

/*
 * The logo and the icon take equal shares of what is left over, so the links
 * between them land on the middle of the page rather than the middle of the
 * gap — the logo being 148px wide and the icon 20px would otherwise push them
 * off to the right.
 */
.cmf-footer__logo {
	order: 1;
	flex: 1 1 auto;
	line-height: 0;
}

.cmf-footer__logo img {
	width: auto;
	max-width: 148px;
	height: auto;
}

.cmf-footer__nav {
	order: 2;
	flex: 0 1 auto;
	min-width: 0;
}

.cmf-footer__social {
	order: 3;
	display: flex;
	flex: 1 1 0;
	justify-content: flex-end;
	min-width: 0;
	line-height: 0;
}

/* Its own line, under a hairline, the way the reference sets its copyright
   apart from everything above it. */
.cmf-footer__copyright {
	order: 4;
	flex: 0 0 100%;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
	color: var(--wd-text-color, rgba(255, 255, 255, 0.6));
	opacity: 0.75;
}

.cmf-footer__copyright p {
	margin: 0;
}

.cmf-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--wd-link-color, currentColor);
	transition: color 0.15s ease, opacity 0.15s ease;
}

.cmf-footer__social-link:hover,
.cmf-footer__social-link:focus {
	color: var(--wd-link-color-hover, currentColor);
	opacity: 0.85;
}

.cmf-footer__social-link svg {
	display: block;
	width: 20px;
	height: 20px;
}

.cmf-footer__nav .cmf-footer__menu {
	flex-wrap: wrap;
	justify-content: center;
	column-gap: clamp(16px, 1.8vw, 26px);
	row-gap: 8px;
}

/* Two sets of links, one shown at a time — the full set here, this site's
   own four pages on a phone. */
.cmf-footer__menu--mobile {
	display: none;
}

/*
 * Below this the row cannot hold the logo, eight links and the icon without
 * them running into each other, so the bar stacks and centres instead. It is
 * above Elementor's own tablet breakpoint for that reason — the number is the
 * width the content needs, not the width of any particular device.
 */
@media (max-width: 1199px) {

	/*
	 * Still a wrapping row rather than a column, which is what lets the logo
	 * and the Instagram icon share the first line: the two of them are sized
	 * to their contents and the links and copyright each take a full line, so
	 * the bar reads logo + icon, links, copyright.
	 */
	.cmf-footer {
		justify-content: center;
		column-gap: 14px;
		row-gap: 14px;
		text-align: center;
	}

	.cmf-footer__logo,
	.cmf-footer__social {
		flex: 0 0 auto;
		width: auto;
		min-width: 0;
	}

	.cmf-footer__social {
		justify-content: center;
	}

	.cmf-footer__nav,
	.cmf-footer__copyright {
		flex: 0 0 100%;
		width: 100%;
	}

	/*
	 * Stacked, the icon belongs beside the logo rather than after the links,
	 * so the two of them are put next to each other in the order — the wide
	 * layout has the nav between them.
	 */
	.cmf-footer__logo {
		order: 1;
	}

	.cmf-footer__social {
		order: 2;
	}

	.cmf-footer__nav {
		order: 3;
	}

	.cmf-footer__copyright {
		order: 4;
	}
}

@media (max-width: 768px) {

	.cmf-footer {
		column-gap: 12px;
		row-gap: 12px;
	}

	.cmf-footer__menu--desktop {
		display: none;
	}

	.cmf-footer__menu--mobile {
		display: flex;
	}

	.cmf-footer__copyright {
		padding-top: 14px;
		font-size: 13px;
	}
}

/* Small phones: the copyright line is one long unbreakable-looking string, so
   it is stepped down rather than allowed to run past the edge. */
@media (max-width: 480px) {

	.cmf-footer__copyright {
		font-size: 12px;
	}
}
@media (min-width: 1025px) {
	.wrapper-custom {
		main#main-content {
			align-items: flex-start;
		}
		.wd-sidebar.sidebar-container.wd-grid-col {
			position: sticky;
			top: 72px;
		}
	}
}
/* CSS to remove box-shadow from product list */
.wd-product.wd-hover-tiled .wd-product-wrapper.product-wrapper {
	box-shadow: none;
}

/* ===========================================================================
 * Home categories — circular cards, as on the theme demo
 *
 * Same markup as the demo at woodmart.xtemos.com/accessories; only two
 * settings differed — a 50% thumb radius, and no border on the grid.
 *
 * Two constraints shape the rest, and are why this is not simpler:
 *
 *   - The thumbnails are JPEGs with real white backgrounds, so the white is
 *     hidden with mix-blend-mode. Blending breaks if any ancestor makes a
 *     stacking context, which rules out overflow:hidden on the circle and the
 *     translate3d the theme sets there.
 *   - With no clipping, the hover scale is kept inside the circle by the
 *     image's own padding rather than by the circle's edge.
 *
 * Scoped to .home, so the shop and category archives keep the theme's design.
 * ======================================================================== */

.home .wd-cats .wd-cat,
.home .wd-cats .category-grid-item {
	--wd-cat-brd-radius: 50%;

	/* The theme caps the thumb at this; a plain width loses to it. */
	--wd-cat-img-width: min(100%, 190px);
}

.home .wd-cats .wd-cat-thumb,
.home .wd-cats .category-grid-item .wd-cat-thumb {
	width: min(100%, 190px);
	max-width: min(100%, 190px);
	margin-inline: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: #f4f2f0;

	/* Both would isolate the blend. See the note above. */
	overflow: visible;
	transform: none;
}

.home .wd-cats .wd-cat-image {
	display: block;
}

/* padding is what contains the hover scale, since nothing clips it. */
.home .wd-cats .wd-cat-thumb img {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 20%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.4s ease;
}

/*
 * Hover: the product grows, nothing else moves. The theme scales the anchor
 * instead, which would isolate the blend, so it is held still here.
 */
.home .wd-cats .wd-cat:hover .wd-cat-image,
.home .wd-cats .category-grid-item:hover .wd-cat-image {
	transform: none;
}

.home .wd-cats .wd-cat:hover .wd-cat-thumb img,
.home .wd-cats .category-grid-item:hover .wd-cat-thumb img {
	transform: scale(1.08);
}

.home .wd-cats .wd-cat-inner .wd-entities-title {
	margin-top: 18px;
	color: #333;
	font-size: 17px;
	font-weight: 600;
}

.home .wd-cats .wd-cat-inner .wd-entities-title a:hover {
	color: var(--wd-primary-color, #2e6bc6);
}

.home .wd-cats .wd-cat-inner mark,
.home .wd-cats .wd-cat-inner .wd-cat-count {
	background-color: transparent;
	color: #777;
	font-size: 14px;
}

/* The demo has no rule between cells; the circles carry the layout. */
.home .wd-cats.products-bordered-grid-ins .wd-cat-wrap,
.home .wd-cats.products-bordered-grid .wd-cat-wrap {
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.home .wd-cats .wd-cat-thumb img,
	.home .wd-cats .wd-cat:hover .wd-cat-thumb img,
	.home .wd-cats .category-grid-item:hover .wd-cat-thumb img {
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   "Buy now" on product cards
   ---------------------------------------------------------------------------
   The button is printed inside the theme's own .wd-add-btn container, so the
   reveal-on-hover animation, the button skin and the responsive behaviour all
   come from the active product layout for free. Only the stacking below the
   "Add to cart" and the icon-layout variant need adding here. */

.wd-product .wd-add-btn > .wd-loop-buy-now {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 6px;
}

/* Layouts that centre the hover buttons over the image lay their children out
   inline; make room so the two buttons read as a stack, not a row. */
.wd-product.wd-hover-button .wd-add-btn,
.wd-product.wd-hover-buttons-on-hover .wd-add-btn {
	display: flex;
	flex-direction: column;
}

/* Icon layouts (Tiled, Icons on hover) have no text button to sit beside, so
   the Buy now is drawn as its own bar across the bottom of the image. The skin
   comes from the theme's accent button variables, so it follows whatever is set
   under Theme settings > Styles and colors. */
.wd-product .wd-buy-now-overlay {
	position: absolute;
	inset-inline: 10px;
	bottom: 10px;
	z-index: 3;
	display: flex;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.wd-product:hover .wd-buy-now-overlay,
.wd-product:focus-within .wd-buy-now-overlay {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.wd-product .wd-buy-now-overlay > .wd-loop-buy-now {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--btn-accented-height, var(--btn-height, 42px));
	border-radius: var(--btn-accented-brd-radius);
	color: var(--btn-accented-color);
	box-shadow: var(--btn-accented-box-shadow);
	background-color: var(--btn-accented-bgcolor);
	font-size: var(--btn-accented-font-size, var(--btn-font-size, 13px));
	font-weight: var(--btn-accented-font-weight, var(--btn-font-weight, 600));
	font-family: var(--btn-accented-font-family, var(--btn-font-family, inherit));
	text-transform: var(--btn-accented-transform, var(--btn-transform, uppercase));
}

.wd-product .wd-buy-now-overlay > .wd-loop-buy-now:hover {
	color: var(--btn-accented-color-hover);
	box-shadow: var(--btn-accented-box-shadow-hover);
	background-color: var(--btn-accented-bgcolor-hover);
}

/* Tablets have no hover, so the bar stays on there — the same call the theme
   makes for its own hover buttons below 1025px. */
@media (min-width: 769px) and (max-width: 1024px) {
	.wd-product .wd-buy-now-overlay {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* No Buy now on phones — the cards are small enough that a second permanently
   visible button crowds out the title and price. Desktop and tablet keep it.
   This hides the button, it does not disable it: the markup and the checkout
   redirect behind it are untouched, so widening the viewport brings it back. */
@media (max-width: 768.98px) {
	.wd-product .wd-buy-now-overlay,
	.wd-product .wd-add-btn > .wd-loop-buy-now {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wd-product .wd-buy-now-overlay {
		transition: none;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   "Guaranteed Safe Checkout" badge on the product page
   ---------------------------------------------------------------------------
   Replaces the Elementor image widget that pointed at a demo attachment which
   exists on none of the sites. Boxed like the WoodMart demo strip so it still
   reads as a trust badge rather than a stray logo. */

.wd-safe-checkout {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.wd-safe-checkout .wd-safe-checkout-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border: 1px solid var(--brdcolor-gray-300, #e6e6e6);
	border-radius: var(--wd-brd-radius, 4px);
	background-color: #fff;
}

.wd-safe-checkout .wd-safe-checkout-badge img {
	display: block;
	width: auto;
	height: 22px;
}

/* Product description height CSS */

/*
 * Thumbnails: change how many fit, not how wide each one is.
 *
 * The strip is a carousel whose slot widths are written onto the elements by
 * the theme's own script, from a column count it keeps in --wd-col-lg. That
 * count is 4, which on a 714px strip is the 181px slot each thumbnail sat in.
 *
 * Two earlier attempts got this wrong, both instructive. Capping the image
 * height left the slot untouched, so the picture shrank inside a box that did
 * not and the row spread out. Forcing the slot width with !important made the
 * row look right but left the script scrolling by its own arithmetic: it still
 * believed the slots were 181px, so a page of four scrolled 724px through a
 * row only 728px long and ran off into blank space.
 *
 * Setting the count instead keeps the script's measurements and the rendering
 * in agreement, because the count is what it measures from. Six across the
 * desktop strip gives a thumbnail near 120px -- large enough to read, small
 * enough not to rival the picture above it -- and the theme's own gap is left
 * exactly as it was.
 *
 * !important only because the count is written inline on the element, which no
 * selector can outrank on its own. The value is the same kind of thing the
 * theme itself sets, not a fight with it.
 *
 * Only where the strip runs along the bottom. The same count on a left-hand
 * strip is how many thumbnails stack up the side rather than across, so
 * raising it there shrinks them instead: measured at 45px beside a 360px
 * picture, which is smaller than the theme's own and no use to anybody. That
 * layout is already in proportion and is left alone.
 */
@media (min-width: 1025px) {

	.single-product .thumbs-position-bottom .wd-gallery-thumb .wd-carousel {
		--wd-col-lg: 6 !important;
	}
}

/*
 * One square box per thumbnail, whatever shape the picture is.
 *
 * The slots are all the same width, but the pictures keep their own
 * proportions, so a gallery holding one portrait image among square ones ends
 * up with a single tall thumbnail and a strip stretched to match it. Measured
 * on the waterproof pouch: its first image is 148x194 where the other eight
 * are 148x148, which drew that thumbnail 145px tall against 111px and left 34px
 * of empty strip beside every other one.
 *
 * A square aspect-ratio on the image settles it at the source: the box is the
 * same for all of them and the strip takes one predictable height.
 *
 * contain, not cover. The odd image out is letterboxed inside its square and
 * keeps its shape; cropping it to fill would cut the top and bottom off the
 * only picture on the page that is framed differently, which is usually the
 * one worth seeing whole.
 */
.single-product .thumbs-position-bottom .wd-gallery-thumb .wd-carousel-item img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: contain;
}

@media (min-width: 1025px) {

	.single-product .wd-single-gallery .wd-gallery-images .wd-carousel-item {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.single-product .wd-single-gallery .wd-gallery-images .wd-carousel-item img {
		/*
		 * The floor. Below roughly 760px of viewport the cap would keep
		 * shrinking the picture -- 300px on a 580px window, barely larger than
		 * the thumbnails under it. It stops here and the page scrolls instead,
		 * which is the right trade on a short screen.
		 */
		min-height: 360px;
		max-height: calc(100vh - 400px);
		width: auto;
		max-width: 100%;
		margin-inline: auto;
		object-fit: contain;
	}
}

/*
 * Hold the gallery in view while the details scroll.
 *
 * Now that the gallery is the shorter of the two columns it has room to
 * travel, which is the whole condition for sticky: a column exactly as tall
 * as its row has nowhere to go and simply scrolls away. Measured on this
 * layout: 205px of travel, pinned from scroll 168 to 373 and released at the
 * foot of the column, which is the behaviour wanted.
 *
 * align-items on the row is what makes it possible. Elementor stretches its
 * columns to equal height by default, and a stretched column is its row's
 * height, so there is no room to move; flex-start lets the gallery keep its
 * own height and leaves the difference as travel.
 *
 * 769px, not 1025: below that this layout stacks the picture above the
 * details, where a sticky gallery would pin itself over the description as
 * the reader scrolls past it. Measured on staging -- side by side at 769px,
 * stacked at 768px -- so the query starts exactly where the columns do.
 */
@media (min-width: 769px) {

	.single-product .elementor-element-119703e > .e-con-inner {
		align-items: flex-start;
	}

	.single-product .elementor-element-35d4530 {
		position: sticky;
		top: 30px;
		align-self: flex-start;
	}
}

/*
 * Put the mobile menu's row divider back under an active item.
 *
 * Two rules near the top of this file give an active parent its colours and
 * then set the border shorthand. --nav-border-active resolves to none, so all
 * four borders come off the link. In the header that is what is wanted.
 *
 * The mobile menu is different: there the theme draws each row's divider as a
 * border-bottom on the link itself. Removing the border removes the divider
 * with it -- but the arrow opener sitting beside the link carries its own
 * matching border, and that one survives. The result was a line running under
 * the opener only and stopping short beneath the rest of the active row.
 *
 * Both active states are covered, matching the two rules above between them.
 * Only the bottom edge is restored, and only in the mobile menu, so the
 * active item keeps the rest of its treatment and the header is untouched.
 */
.wd-nav-mobile:not( .wd-dis-act )
	> li:is(
		.menu-item-has-children.current-menu-ancestor,
		.menu-item-has-children.current-menu-parent,
		.menu-item-has-children.mb-nav-parent-active,
		.current_page_parent,
		.current_page_ancestor
	)
	> a {
	border-bottom: 1px solid var(--brdcolor-gray-300);
}

@media (max-width: 575.98px) {

	.woocommerce-variation-add-to-cart,
	form.cart:not(.variations_form) {
		flex-wrap: nowrap !important;
	}

	.woocommerce-variation-add-to-cart > .quantity,
	form.cart:not(.variations_form) > .quantity {
		flex: 0 0 auto !important;
	}

	.woocommerce-variation-add-to-cart .single_add_to_cart_button,
	.woocommerce-variation-add-to-cart .wd-buy-now-btn,
	form.cart:not(.variations_form) .single_add_to_cart_button,
	form.cart:not(.variations_form) .wd-buy-now-btn {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		padding-inline: 10px !important;
		white-space: nowrap !important;
	}
}

@media (max-width: 359.98px) {

	.woocommerce-variation-add-to-cart > .quantity,
	form.cart:not(.variations_form) > .quantity {
		width: 40px !important;
		min-width: 40px !important;
	}

	.woocommerce-variation-add-to-cart .single_add_to_cart_button,
	.woocommerce-variation-add-to-cart .wd-buy-now-btn,
	form.cart:not(.variations_form) .single_add_to_cart_button,
	form.cart:not(.variations_form) .wd-buy-now-btn {
		padding-inline: 6px !important;
		font-size: 12px !important;
	}
}