:root {
	--wd-text-font: "Satoshi", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 500;
	--wd-text-color: #767676;
	--wd-text-font-size: 16px;
	--wd-title-font: "Fraunces", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 500;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Satoshi", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: var(--wd-text-font);
	--wd-widget-title-font: "Satoshi", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 500;
	--wd-widget-title-transform: none;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Satoshi", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 500;
	--wd-header-el-transform: none;
	--wd-header-el-font-size: 16px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(67,56,202);
	--wd-alternative-color: rgb(63,94,222);
	--btn-default-bgcolor: rgb(36,36,36);
	--btn-default-bgcolor-hover: rgb(51,51,51);
	--btn-accented-bgcolor: rgb(67,56,202);
	--btn-accented-bgcolor-hover: rgb(51,42,163);
	--btn-font-weight: 500;
	--btn-transform: capitalize;
	--btn-font-size: 14px;
	--wd-form-brd-width: 1px;
	--notices-success-bg: rgb(67,150,67);
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: rgb(161,207,222);
	--wd-link-color-hover: rgb(145,186,199);
	--wd-sticky-btn-height: 95px;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg, :is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg :is(.wd-product,.wd-cat) {
	--wd-prod-bg:rgb(255,255,255);
	--wd-bordered-bg:rgb(255,255,255);
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 240px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(36,36,36);
	background-image: none;
}
html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
	font-size: 28px;
}
.whb-top-bar .wd-nav.wd-nav-secondary > li > a {
	font-size: 13px;
}
html .wd-nav-mobile > li > a {
	text-transform: none;
}
html .wd-nav-mobile .wd-sub-menu li a {
	text-transform: none;
}
html .product.wd-cat .wd-entities-title, html .product.wd-cat.cat-design-replace-title .wd-entities-title, html .wd-masonry-first .wd-cat:first-child .wd-entities-title {
	text-transform: none;
}
html table th {
	text-transform: none;
}
html .wd-checkout-steps {
	text-transform: none;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,247,248);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,247,248);
	background-image: none;
}
.single-product :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,247,248);
	background-image: none;
}
.woodmart-archive-blog :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,247,248);
	background-image: none;
}
.single-post :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,247,248);
	background-image: none;
}
.woodmart-archive-portfolio :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,247,248);
	background-image: none;
}
.single-portfolio :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,247,248);
	background-image: none;
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-bg: rgb(255,255,255);
}
.wd .product-label.onsale {
	background-color: rgb(201,123,74);
}
.wd .product-label.new {
	background-color: rgb(194,209,151);
}
.wd .product-label.featured {
	background-color: rgb(194,209,151);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}

@media (max-width: 1024px) {
	:root {
		--wd-sticky-btn-height: 95px;
	}
	html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
		font-size: 24px;
	}

}

@media (max-width: 768.98px) {
	:root {
		--wd-sticky-btn-height: 42px;
	}
	html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
		font-size: 22px;
	}

}
:root{
--wd-container-w: 1660px;
--wd-form-brd-radius: 5px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 5px;
}

@media (min-width: 1660px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: rgb(245,247,248);
}

@font-face {
	font-family: "Satoshi";
	font-weight: 500;
	font-display:swap;
	font-style: normal;
}

@font-face {
	font-family: "Satoshi";
	font-weight: 600;
	font-display:swap;
	font-style: normal;
}

/* =============================================================
   Wavel — consolidated custom CSS
   Merged from: WoodMart Global CSS + Customizer "Additional CSS" +
   WoodMart Dashboard CSS (September 2026). Rules that never matched an
   element, or that were overridden by a stronger rule, were removed;
   everything that was actually winning in the browser is kept at the
   same value, so nothing changes visually. Nested syntax was flattened
   so the header still styles correctly on older iOS Safari.
   Removed rules are listed at the bottom of this file.
   ============================================================= */

/* ---------- Slider ---------- */

.wd-slide-container {
	background-color: rgb(0 0 0 / 0.2);
}

/* Match the slider clip radius to the slide content card radius */
.wd-slider.wd-section-container .wd-carousel {
	border-radius: 24px !important;
}

/* ---------- Product grid ---------- */

/* Fix for: xtemos.com/forums/topic/products-are-not-displayed-in-ajax-mode-after-any-refresh/
   Re-test after each WoodMart update — this may no longer be needed. */
.wd-products .wd-product,
.wd-loop-footer.products-footer {
	visibility: visible !important;
}

.wd-products .wd-product img {
	aspect-ratio: 1;
	object-fit: contain;
}

/* ---------- Text on photo backgrounds ---------- */

.wavel-text-cosmetic-background::before,
.wavel-text-cosmetic-background-heavy::before {
	content: '';
	position: absolute;
	inset: -4px;
	z-index: -1;
	border-radius: 8px;
	background: hsla(0, 0%, 100%, .6);
}

.wavel-text-cosmetic-background-heavy::before {
	background: hsla(0, 0%, 100%, .8);
}

/* ============================================================
   Header V2 (Wavel landing look)
   ============================================================ */

.whb-header .whb-general-header .container {
	max-width: 1360px;
}

.whb-header .whb-general-header .whb-col-left {
	margin-left: 0 !important;
}

.whb-header .whb-general-header .whb-col-right {
	margin-right: 0 !important;
}

.whb-header .whb-general-header .wd-header-cart > a {
	padding-right: 0 !important;
}

/* ---------- Categories button ---------- */

.whb-header .wd-header-cats {
	width: auto;
}

.whb-header .wd-header-cats .menu-opener {
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	padding: 11px 16px !important;
	border: 1px solid #e4e4e9 !important;
	border-radius: 999px !important;
	color: #242424;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.whb-header .wd-header-cats .menu-opener:hover {
	background: #e9e9ef !important;
	border-color: #d6d6dd !important;
}

.whb-header .wd-header-cats .menu-opener-icon {
	color: #4338ca;
}

/* Gap between the label and the caret.
   Done with column-gap rather than by overriding the caret's
   margin-inline-start:auto — that auto is what pushes the arrow to the
   far edge on full-width category buttons, and overriding it would drag
   the arrow inward there. Gap adds the space only where the button is
   fit-content, so both button styles stay correct. */
.whb-row .wd-header-cats .menu-opener {
	column-gap: 10px;
}

.whb-row .wd-header-cats .menu-opener .menu-opener-icon {
	margin-inline-end: 0;
}

/* ---------- Categories dropdown + fly-outs ---------- */

.wd-header-cats .wd-dropdown {
	overflow: visible; /* fly-out sub-menus sit outside the panel */
	border-radius: 0 0 10px 10px !important;
	border-top: 3px solid #5a44d2 !important;
	box-shadow: 0 12px 36px rgba(0, 0, 0, .14) !important;
}

.wd-header-cats .menu > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 20px !important;
	border-left: 3px solid transparent;
	color: #333 !important;
	font-size: 14px;
	font-weight: 500;
	transition: color .2s, background .2s, padding-left .2s, border-left .2s;
}

.wd-header-cats .menu > li > a:hover {
	padding-left: 26px !important;
	border-left-color: #5a44d2;
	background-color: #f4f1ff !important;
	color: #5a44d2 !important;
}

.wd-header-cats .menu > li:not(:last-child) {
	border-bottom: 1px solid #f0f0f0;
}

/* ---------- Main navigation ---------- */

.whb-header .wd-header-main-nav .wd-nav {
	flex-wrap: nowrap;
}

.whb-header .wd-header-main-nav .wd-nav > li > a {
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
}

/* "Akcijos" highlighted */
.whb-header .wd-header-main-nav .menu-item-17969 > a {
	color: #c97b4a !important;
}

.whb-header .wd-header-main-nav .menu-item-17969 > a:hover {
	color: #b06934 !important;
}

.whb-header .wd-header-divider {
	height: 26px;
	margin: 0 6px;
}

/* ---------- Search ---------- */

.whb-header .wd-search-form form,
.whb-header .wd-search-form input[type="text"] {
	border-radius: 999px !important;
}

/* The theme insets the results panel by the pill radius
   (left/right: calc(var(--wd-form-brd-radius)/1.5)), leaving less width
   than .wd-suggestions-group's 240px minimum column, so suggestions were
   clipped. Anchor to the right edge and never allow it narrower than the field. */
.wd-header-search-form .wd-dropdown-results {
	left: auto;
	right: 0;
	width: 400px;
	min-width: 100%;
	max-width: calc(100vw - 32px);
	margin-top: 10px;
	border: 1px solid #E7E7EA;
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(36, 36, 36, .14);
}

.wd-header-search-form .wd-dropdown-results .wd-suggestion-content {
	min-width: 0;
}

/* Mobile header search: inset removed, kept full width */
.wd-header-search-form-mobile .wd-dropdown-results {
	left: 0;
	right: 0;
	width: auto;
}

/* ---------- Cart pill ---------- */

.whb-header .wd-header-cart .wd-tools-inner {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 42px;
	padding: 0 16px !important;
	border-radius: 999px !important;
	background: #242424 !important;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.whb-header .wd-header-cart:hover .wd-tools-inner {
	background: #4338ca !important;
}

.whb-header .wd-header-cart .wd-cart-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: static !important;
	top: auto !important;
	right: auto !important;
	min-width: 20px;
	height: 20px;
	margin-left: 2px;
	border-radius: 999px !important;
	background: #4338ca !important;
	color: #fff !important;
	font-weight: 700;
}

/* ---------- Header: mobile layout up to 1199px ----------
   WoodMart only switches to the mobile header at 1024px; the desktop
   header needs ~1190px, so between 1025–1199px the cart got cut off. */
@media (min-width: 1025px) and (max-width: 1199.98px) {
	.whb-header .whb-visible-lg { display: none; }
	.whb-header .whb-hidden-lg { display: flex; }
	.whb-header .whb-row.whb-hidden-mobile { display: none; }
	.whb-header:not(.whb-sticked) .whb-row.whb-hidden-desktop { display: block; }
	.whb-header .whb-top-bar-inner {
		height: var(--wd-top-bar-sm-h);
		max-height: var(--wd-top-bar-sm-h);
	}
	.whb-header .whb-general-header-inner,
	.whb-header.whb-sticked:not(.whb-clone) .whb-general-header-inner {
		height: var(--wd-header-general-sm-h);
		max-height: var(--wd-header-general-sm-h);
	}
	.whb-header .whb-header-bottom-inner {
		height: var(--wd-header-bottom-sm-h);
		max-height: var(--wd-header-bottom-sm-h);
	}
	.whb-header.whb-sticky-prepared { padding-top: var(--wd-header-sm-h); }
}

/* =============================================================
   REMOVED — and why
   -------------------------------------------------------------
   From Additional CSS:
   • .wd-header-cats .wd-cats-toggle (hover + transition)
       No such element in WoodMart 8.5 — the button is .menu-opener.
   • .wd-header-cats .wd-nav-cat > ul > li > a (in the shared selector list)
       No .wd-nav-cat element; the .menu > li > a half of the list is kept.
   • .wd-header-cats .sub-menu and .sub-menu li a
       WoodMart renders fly-outs as .wd-sub-menu, so none of these matched.
   • animation: cats-slide-in + @keyframes on .wd-header-cats .wd-dropdown
       The dropdown is always display:block (hidden with visibility/opacity),
       so the animation plays once at page load, while invisible, and never
       on open. WoodMart's own 0.4s opacity/transform transition is what runs.
   From WoodMart Custom CSS:
   • .wd-header-cats .wd-dropdown-cats { margin-top: 10px; border-radius: 16px }
       Both lose: WoodMart sets margin-top:0 !important, and the Additional CSS
       rule above sets the radius with !important. Dead either way.
       → If the 16px / 10px-gap look is what you want, change the
         .wd-header-cats .wd-dropdown block above instead.
   • .wd-search-field and input[type="search"] from the search selector list
       Neither exists in the header markup.
   From WoodMart Custom CSS → Dashboard tab:
   • .wd-header-cats .wd-dropdown { overflow: visible !important }
       Dashboard CSS only loads inside wp-admin, where there is no header
       category menu, so it never applied. The front end already gets
       overflow:visible from the rule above.
   ============================================================= */

/* =============================================================
   Shop sidebar: sticky filters (added 2026-09-12)
   -------------------------------------------------------------
   The filter column is ~995px while the product grid runs to
   3000px+, so the filters used to scroll away and leave an
   empty column. There is no WoodMart setting for this and
   Elementor's Sticky is a Pro feature, hence CSS.

   Targeted via :has() on the column that contains the sidebar
   widget rather than its Elementor element id, so it survives
   a layout rebuild. Browsers without :has() simply get the old
   non-sticky behaviour.

   top/max-height are derived from the 81px sticky header.
   ============================================================= */
@media (min-width: 1025px) {
  .e-con-inner > .elementor-element:has(> .elementor-widget-wd_sidebar) {
    align-self: flex-start;
    position: sticky;
    top: 97px;
    max-height: calc(100vh - 113px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d7d7dd transparent;
    padding-right: 4px;
  }

  .e-con-inner > .elementor-element:has(> .elementor-widget-wd_sidebar)::-webkit-scrollbar {
    width: 6px;
  }

  .e-con-inner > .elementor-element:has(> .elementor-widget-wd_sidebar)::-webkit-scrollbar-thumb {
    background: #d7d7dd;
    border-radius: 3px;
  }

  .e-con-inner > .elementor-element:has(> .elementor-widget-wd_sidebar)::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* =============================================================
   Shop sidebar: price filter overflow (added 2026-09-13)
   -------------------------------------------------------------
   jQuery UI gives each slider handle width:30px with margin-left:-15px,
   so the handles overhang both ends of the track. The sticky sidebar
   above uses overflow-y:auto, and per spec that makes overflow-x compute
   to auto as well, so the right-hand overhang produced a horizontal
   scrollbar. Insetting the track by half a handle keeps both inside.
   ============================================================= */
.widget_price_filter .price_slider.ui-slider {
	margin-left: 15px;
	margin-right: 15px;
}



/* =============================================================
   Wavel — DARK THEME (v1)
   Everything below is scoped to body.wavel-dark / html.wavel-dark.
   With that class absent the site renders exactly as before.
   Preview: add ?wavel-theme=dark to any URL (?wavel-theme=light clears it).
   ============================================================= */

body.wavel-dark {
	--wavel-bg: #14151a;
	--wavel-surface: #1b1d24;
	--wavel-field: #22242d;
	--wavel-brd: rgba(255, 255, 255, .12);
	--wavel-brd-strong: rgba(255, 255, 255, .22);
	--wavel-accent: #7c6df7;
	--wavel-accent-hover: #9186ff;

	/* WoodMart's own tokens */
	--wd-main-bgcolor: #14151a;
	--wd-primary-color: #7c6df7;
	--wd-form-bg: #22242d;
	--wd-form-color: rgba(255, 255, 255, .9);
	--wd-form-brd-color: rgba(255, 255, 255, .12);
	--wd-form-placeholder-color: rgba(255, 255, 255, .45);
	--wd-prod-bg: #1b1d24;
	--btn-default-bgcolor: #2a2d37;
	--btn-default-bgcolor-hover: #343845;
	--btn-default-color: rgba(255, 255, 255, .9);
	--btn-default-color-hover: #fff;
	--btn-accented-bgcolor: #7c6df7;
	--btn-accented-bgcolor-hover: #9186ff;
}

/* ---------- Page shell ---------- */

html.wavel-dark {
	background-color: #14151a;
	color-scheme: dark;
}

body.wavel-dark {
	background-color: var(--wavel-bg);
}

body.wavel-dark :is(.wd-page-content, .wd-page-title),
body.wavel-dark.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header),
body.wavel-dark.single-product :is(.wd-page-content, .whb-header),
body.wavel-dark.woodmart-archive-blog :is(.wd-page-content, .whb-header),
body.wavel-dark.single-post :is(.wd-page-content, .whb-header),
body.wavel-dark.woodmart-archive-portfolio :is(.wd-page-content, .whb-header),
body.wavel-dark.single-portfolio :is(.wd-page-content, .whb-header),
body.wavel-dark:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: var(--wavel-bg);
}

/* ---------- Header ---------- */

body.wavel-dark .whb-main-header .whb-row,
body.wavel-dark .whb-header .whb-row.whb-with-bg,
body.wavel-dark .whb-sticked .whb-row {
	background-color: rgba(20, 21, 26, .92) !important;
	border-color: var(--wavel-brd) !important;
}

body.wavel-dark .whb-header .wd-header-cats .menu-opener {
	border-color: var(--wavel-brd-strong) !important;
	background: transparent !important;
	color: rgba(255, 255, 255, .92);
}

body.wavel-dark .whb-header .wd-header-cats .menu-opener:hover {
	background: rgba(255, 255, 255, .08) !important;
	border-color: rgba(255, 255, 255, .32) !important;
}

body.wavel-dark .whb-header .wd-header-cats .menu-opener-icon {
	color: var(--wavel-accent);
}

body.wavel-dark .wd-header-cats .wd-dropdown {
	border-top-color: var(--wavel-accent) !important;
	background-color: var(--wavel-surface);
	box-shadow: 0 12px 36px rgba(0, 0, 0, .5) !important;
}

body.wavel-dark .wd-header-cats .menu > li > a {
	color: rgba(255, 255, 255, .82) !important;
}

body.wavel-dark .wd-header-cats .menu > li > a:hover {
	border-left-color: var(--wavel-accent);
	background-color: rgba(124, 109, 247, .16) !important;
	color: #fff !important;
}

body.wavel-dark .wd-header-cats .menu > li:not(:last-child) {
	border-bottom-color: rgba(255, 255, 255, .08);
}

/* "Akcijos" — the light-mode terracotta is too dim on dark */
body.wavel-dark .whb-header .wd-header-main-nav .menu-item-17969 > a {
	color: #e8a06a !important;
}

body.wavel-dark .whb-header .wd-header-main-nav .menu-item-17969 > a:hover {
	color: #f2b487 !important;
}

body.wavel-dark .wd-search-dropdown,
body.wavel-dark .autocomplete-suggestions {
	border-color: var(--wavel-brd) !important;
	background-color: var(--wavel-surface) !important;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .55) !important;
}

/* Cart pill — #242424 vanishes against a dark header */
body.wavel-dark .whb-header .wd-header-cart .wd-tools-inner {
	background: var(--wavel-accent) !important;
	color: #fff !important;
}

body.wavel-dark .whb-header .wd-header-cart:hover .wd-tools-inner {
	background: var(--wavel-accent-hover) !important;
}

body.wavel-dark .whb-header .wd-header-cart .wd-cart-number {
	background: rgba(0, 0, 0, .4) !important;
	color: #fff !important;
}

/* ---------- Surfaces ---------- */

body.wavel-dark .wd-product .product-wrapper,
body.wavel-dark .wd-entities-list .wd-entity-item,
body.wavel-dark article.post .article-inner {
	background-color: var(--wavel-surface);
}

/* Shop-template sidebar container (Elementor hardcodes #FFFFFF) */
body.wavel-dark .elementor-465 .elementor-element.elementor-element-1cedb53a:not(.elementor-motion-effects-element-type-background) {
	background-color: var(--wavel-surface);
}

body.wavel-dark .e-con-inner > .elementor-element:has(> .elementor-widget-wd_sidebar) {
	scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

body.wavel-dark .e-con-inner > .elementor-element:has(> .elementor-widget-wd_sidebar)::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .22);
}

/* ---------- Product images keep a light plate ---------- */
/* Roughly a third of the catalogue has baked-in white backgrounds, so
   plating every image keeps the grid consistent instead of half the
   cards floating and half boxed. */

body.wavel-dark .wd-product .product-element-top,
body.wavel-dark .wd-product .product-image-link {
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
}

body.wavel-dark.single-product .woocommerce-product-gallery__image,
body.wavel-dark.single-product .wd-carousel-product-gallery img {
	background-color: #fff;
	border-radius: 8px;
}

/* ---------- Forms ---------- */

body.wavel-dark :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], select, textarea) {
	background-color: var(--wavel-field) !important;
	border-color: var(--wavel-brd) !important;
	color: rgba(255, 255, 255, .9) !important;
}

body.wavel-dark ::placeholder {
	color: rgba(255, 255, 255, .45);
}

body.wavel-dark [class*="wd-header-search-form"] .wd-style-with-bg {
	background-color: var(--wavel-field) !important;
}

body.wavel-dark .price_slider_wrapper .ui-slider {
	background-color: rgba(255, 255, 255, .14);
}

/* ---------- Cart, checkout, account ---------- */

body.wavel-dark :is(.cart_totals, .woocommerce-checkout-review-order, .woocommerce-MyAccount-navigation, .wd-order-summary, table.shop_table) {
	background-color: var(--wavel-surface);
	border-color: var(--wavel-brd);
}

body.wavel-dark table :is(th, td) {
	border-color: var(--wavel-brd);
}

body.wavel-dark :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	background-color: var(--wavel-surface);
	color: rgba(255, 255, 255, .88);
}

/* ---------- Popups and dropdowns ---------- */

body.wavel-dark :is(.wd-popup, .wd-dropdown, .wd-dropdown-menu, .wd-side-hidden) {
	background-color: var(--wavel-surface);
}


/* ---------- Dark theme: follow-up fixes ---------- */

/* Header nav + tool icons. The header builder writes --nav-color and
   --wd-header-el-color inline, so these need a higher-specificity override
   rather than a token change. */

body.wavel-dark .whb-header .wd-header-nav .wd-nav {
	--nav-color: rgba(255, 255, 255, .88);
	--nav-color-hover: #fff;
}

body.wavel-dark .whb-header .wd-tools-element {
	--wd-header-el-color: rgba(255, 255, 255, .88);
	--wd-header-el-color-hover: #fff;
}

/* Elementor containers with a hardcoded #FFFFFF background. The theme's
   colour tokens cannot reach these, so each is listed explicitly.
   NOTE: rebuilding one of these sections in Elementor changes its id and
   it will need re-adding here. */

body.wavel-dark .elementor-2643 .elementor-element.elementor-element-2658fd7,
body.wavel-dark .elementor-486 .elementor-element.elementor-element-958b8dd {
	background-color: var(--wavel-surface) !important;
}

/* The single-product gallery column stays light on purpose: it is the
   image plate, matching the plated cards in the product grid. */


/* Elements WoodMart marks as "dark text on a light surface" — page titles
   and menu dropdowns. In dark mode they should inherit the page's
   light-on-dark tokens rather than forcing their own. */

body.wavel-dark :is(.wd-page-title, .wd-dropdown-menu, .wd-sub-menu, .menu-opener).color-scheme-dark {
	--wd-title-color: inherit;
	--wd-text-color: inherit;
	--wd-link-color: inherit;
	--color-white: inherit;
	--color-gray-100: inherit;
	--color-gray-200: inherit;
	--color-gray-300: inherit;
	--color-gray-400: inherit;
	--color-gray-500: inherit;
	--color-gray-600: inherit;
	--color-gray-700: inherit;
	--color-gray-800: inherit;
	--color-gray-900: inherit;
	--color-black-rgb: inherit;
	--bgcolor-white: inherit;
	--bgcolor-white-rgb: inherit;
	--bgcolor-black-rgb: inherit;
	--bgcolor-gray-100: inherit;
	--bgcolor-gray-200: inherit;
	--bgcolor-gray-300: inherit;
	--brdcolor-gray-200: inherit;
	--brdcolor-gray-300: inherit;
	--brdcolor-gray-400: inherit;
	--brdcolor-gray-500: inherit;
}

/* Homepage trust bar: both lines carry inline colours from an HTML widget. */

body.wavel-dark .elementor-2643 .elementor-element-2658fd7 .elementor-widget-container > div:nth-child(1) {
	color: rgba(255, 255, 255, .92) !important;
}

body.wavel-dark .elementor-2643 .elementor-element-2658fd7 .elementor-widget-container > div:nth-child(2) {
	color: rgba(255, 255, 255, .6) !important;
}

/* The homepage "Patarimai" pull-quote card stays light on purpose: it is a
   designed editorial panel, like the brand banners. */


/* ---------- Dark theme: contrast pass ---------- */

/* Homepage "Patarimai" section header sits directly on the page background. */

body.wavel-dark .elementor-2643 .elementor-element-bbec9b1 .elementor-heading-title {
	color: #9186ff !important;
}

body.wavel-dark .elementor-2643 .elementor-element-97079bb .elementor-heading-title {
	color: #fff !important;
}

body.wavel-dark .elementor-2643 .elementor-element-6e0eb4b {
	color: rgba(255, 255, 255, .7) !important;
}

/* Shop result count (custom element). */

body.wavel-dark .wavel-result-count__range {
	color: rgba(255, 255, 255, .92) !important;
}

/* Single product: reviews panel is a white Elementor widget container. */

body.wavel-dark .elementor-486 .elementor-element.elementor-element-b51ee8d > .elementor-widget-container {
	background-color: var(--wavel-surface) !important;
}

/* Social share label. */

body.wavel-dark .wd-social-icons .wd-label {
	color: rgba(255, 255, 255, .7);
}


/* ---------- Dark theme: sweep pass ---------- */

/* Product gallery images get the same light plate as the grid cards.
   Without it, transparent and dark product shots vanish against the dark
   panel in quick view. */

body.wavel-dark .woocommerce-product-gallery__image,
body.wavel-dark .wd-gallery-images .wd-carousel-item,
body.wavel-dark .wd-gallery-thumb .wd-carousel-item {
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
}


/* ---------- Theme toggle button ---------- */
/* Markup is injected by the Code Snippets entry "Dark mode: toggle button".
   The bottom-toolbar variant carries WoodMart's own wd-toolbar-label class, so
   its layout, weight and colour come from the theme at every breakpoint and are
   not re-derived here. Only the header variant is styled explicitly, to match
   the .wd-header-my-account element beside it. */

.wavel-theme-toggle .wavel-theme-toggle__btn {
	display: flex;
	align-items: center;
	justify-content: center;
}

.wavel-theme-toggle .wavel-theme-toggle__icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.wavel-theme-toggle .wavel-icon {
	display: block;
	width: 20px;
	height: 20px;
}

/* Sun shows while dark (click returns to light); moon while light. */

.wavel-theme-toggle .wavel-icon-sun {
	display: none;
}

body.wavel-dark .wavel-theme-toggle .wavel-icon-sun {
	display: block;
}

body.wavel-dark .wavel-theme-toggle .wavel-icon-moon {
	display: none;
}

/* Header: same 40px box, 10px padding and hover colour as the tools beside it.
   The icon sits at 18px because WoodMart's 20px glyphs carry internal padding. */

.whb-col-right .wavel-theme-toggle .wavel-theme-toggle__btn {
	height: 40px;
	padding: 0 10px;
	color: var(--wd-header-el-color, #333);
	transition: color .25s ease;
}

.whb-col-right .wavel-theme-toggle .wavel-theme-toggle__btn:hover {
	color: var(--wd-header-el-color-hover, rgba(51, 51, 51, .6));
}

.whb-col-right .wavel-theme-toggle .wavel-icon {
	width: 18px;
	height: 18px;
}

.whb-col-right .wavel-theme-toggle .wavel-theme-toggle__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Toolbar: a stroked SVG reads lighter than WoodMart's solid glyphs, so the
   stroke is thickened to sit at the same visual weight. */

.wd-toolbar .wavel-theme-toggle .wavel-icon {
	stroke-width: 2.25;
}

/* WoodMart gives each toolbar item flex: 1 0 20%, so a sixth item (shop pages
   add "Filtrai") overflows and the toggle scrolls off-screen. A zero basis lets
   them share the width evenly whatever the count. */

.wd-toolbar:has(.wavel-theme-toggle) > a,
.wd-toolbar:has(.wavel-theme-toggle) > div {
	flex-basis: 0;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   Wavel — DARK THEME fixes (Sept 2026, post WoodMart 8.6 review)
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* More Elementor containers with a hardcoded #FFFFFF background:
   cart layout (634), checkout form layout (643), checkout top content (639),
   contact page (2646). Without these, labels/headings were white on white. */
body.wavel-dark .elementor-634 .elementor-element.elementor-element-430f4c1,
body.wavel-dark .elementor-634 .elementor-element.elementor-element-19874b26,
body.wavel-dark .elementor-643 .elementor-element.elementor-element-2f48ae0a,
body.wavel-dark .elementor-643 .elementor-element.elementor-element-27470d2d,
body.wavel-dark .elementor-639 .elementor-element.elementor-element-6f5032ac,
body.wavel-dark .elementor-639 .elementor-element.elementor-element-60206f08,
body.wavel-dark .elementor-2646 .elementor-element.elementor-element-e19c3f1 {
	background-color: var(--wavel-surface) !important;
}

/* Checkout: order-review widget panel (#FFFFFF on the widget container). */
body.wavel-dark .elementor-643 .elementor-element.elementor-element-d2d451f > .elementor-widget-container {
	background-color: var(--wavel-surface) !important;
}

/* Checkout: payment method description box (#F9F9F9 in the layout). */
body.wavel-dark .woocommerce-checkout .payment_box {
	background-color: var(--wavel-field) !important;
}
body.wavel-dark .woocommerce-checkout .payment_box::before {
	border-bottom-color: var(--wavel-field) !important;
}

/* Klix bank tiles stay light on purpose - keep their bank names dark. */
body.wavel-dark .spell-payment-group__item,
body.wavel-dark .spell-payment-group__item .spell-payment-method__text {
	color: #242424 !important;
}

/* Mobile shop: icon-only sort dropdown. The dark form-field rule made the
   select text visible over the icon; hide it again like in light mode. */
@media (max-width: 768.98px) {
	body.wavel-dark .woocommerce-ordering.wd-ordering-mb-icon select {
		color: transparent !important;
		background-color: transparent !important;
		border-color: transparent !important;
	}
	body.wavel-dark .woocommerce-ordering.wd-ordering-mb-icon select option {
		color: rgba(255, 255, 255, .9);
		background-color: var(--wavel-surface);
	}
	body.wavel-dark .woocommerce-ordering.wd-ordering-mb-icon::after {
		color: rgba(255, 255, 255, .9);
	}
}

/* Homepage slogan H1 ("Grožis, kurį norisi jausti"): Elementor grey #54595F
   was too dim on the dark background. */
body.wavel-dark .elementor-2643 .elementor-element.elementor-element-7e353d3 .woodmart-title-container {
	color: rgba(255, 255, 255, .72) !important;
}

/* ==== A11Y: colour contrast fixes (WCAG 2.1 AA) – appended Sept 2026 ==== */

/* -- Light mode -- */
body:not(.wavel-dark) {
	--wd-text-color: #636369;  /* body text (was #767676 = 4.2:1 on the #f5f7f8 page background) */
	--color-gray-500: #636369; /* per-page links, secondary text */
}
body:not(.wavel-dark) .wd-breadcrumbs {
	--wd-link-color: #636369;  /* breadcrumbs (was #767676 = 4.2:1 on #f5f7f8) */
	color: #636369;
}
body:not(.wavel-dark) :is(.wd-product-cats, .wd-product-brands-links, .wd-product-sku) {
	--wd-link-color: #6b6b73; /* product card category/brand links (was #a5a5a5 = 2.5:1) */
}
body:not(.wavel-dark) .price del {
	color: #6b6b73; /* crossed-out old price (was #bbbbbb = 1.9:1) */
}
body:not(.wavel-dark) .whb-header .wd-header-main-nav .menu-item-17969 > a {
	color: #a3582a !important; /* "Akcijos" menu link (was #c97b4a = 3.2:1) */
}
body:not(.wavel-dark) [style*="color:#8A8A92" i] {
	color: #6a6a72 !important; /* homepage trust bar sub-text (was 3.4:1) */
}
body:not(.wavel-dark) article.entry-content {
	--wd-link-color: #4338ca;       /* page/article links (shampoo guide, terms, delivery) (was #a1cfde = 1.6:1) */
	--wd-link-color-hover: #312a9e;
}
body:not(.wavel-dark) article.entry-content p a:not([class]) {
	text-decoration: underline;     /* inline links must not rely on colour alone */
	text-underline-offset: 2px;
}

/* -- Both modes -- */
.elementor-2643 .elementor-element.elementor-element-828ed18 {
	color: #6a6a72; /* "6 min skaitymo" on the Patarimai card, card stays light (was 3.4:1) */
}
.wd .product-label.onsale {
	background-color: #a3582a; /* sale badge, white text (was 3.3:1) */
}
/* Hero slide eyebrows (brand name + series), slides stay light in dark mode */
.wd-slider [style*="color:#8A7A66" i] { color: #675947 !important; }
.wd-slider [style*="color:#A9557B" i] { color: #93446a !important; }
.wd-slider [style*="color:#5F8494" i] { color: #456a7b !important; }

/* -- Dark mode -- */
body.wavel-dark {
	--wd-primary-color: #9d93fa;            /* accent as TEXT: prices, active menu item (was #7c6df7 = 4.3:1) */
	--btn-accented-bgcolor: #5b4ce0;        /* accent as BUTTON background with white text (was 3.9:1) */
	--btn-accented-bgcolor-hover: #4c3dd4;
}
body.wavel-dark .btn-color-primary {
	--btn-bgcolor: #5b4ce0;                 /* Elementor primary buttons, e.g. "Daugiau produktų" */
	--btn-bgcolor-hover: #4c3dd4;
}
body.wavel-dark .wd-check-icon {
	background-color: #5b4ce0;              /* count badges and "added" checkmarks with white glyphs */
}
body.wavel-dark .wavel-result-count {
	color: #8e8e96;                         /* "1–24 iš 628 prekių" (was #6b6b6b on #14151a = 3.4:1) */
}
body.wavel-dark .whb-header .wd-header-cart .wd-tools-inner {
	background: #5b4ce0 !important;
}
body.wavel-dark .whb-header .wd-header-cart:hover .wd-tools-inner {
	background: #4c3dd4 !important;
}

/* Links inside shop/category/brand descriptions: theme link colour #a1cfde is only 1.6:1 on the light background (moved here from a snippet, Sept 2026) */
.term-description a:not([class]),
.wd-term-desc a:not([class]) {
	color: #4338ca;
	text-decoration: underline;
	text-underline-offset: 2px;
}
body.wavel-dark .term-description a:not([class]),
body.wavel-dark .wd-term-desc a:not([class]) {
	color: #9d93fa;
}