:root {
	--wd-text-font: "Mulish", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(92,92,92);
	--wd-text-font-size: 16px;
	--wd-title-font: "Mulish", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 400;
	--wd-title-transform: inherit;
	--wd-title-color: rgb(38,38,38);
	--wd-entities-title-font: "Mulish", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 400;
	--wd-entities-title-transform: inherit;
	--wd-entities-title-color: rgb(0,0,0);
	--wd-entities-title-color-hover: rgb(237, 56, 117);
	--wd-alternative-font: "Mulish", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Mulish", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 400;
	--wd-widget-title-transform: inherit;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Mulish", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: capitalize;
	--wd-header-el-font-size: 16px;
	--wd-brd-radius: 25px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(227,32,97);
	--wd-alternative-color: #fbbc34;
	--btn-default-font-family: "Mulish", Arial, Helvetica, sans-serif;
	--btn-default-font-weight: 400;
	--btn-default-transform: inherit;
	--btn-default-font-size: 15px;
	--btn-default-bgcolor: rgb(227,32,97);
	--btn-default-bgcolor-hover: rgb(255,102,156);
	--btn-accented-transform: none;
	--btn-accented-bgcolor: rgb(227,32,97);
	--btn-accented-bgcolor-hover: rgb(255,102,156);
	--wd-form-brd-width: 1px;
	--notices-success-bg: rgb(227,32,97);
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: rgb(51,51,51);
	--wd-link-color-hover: #242424;
}
.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-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: #ffffff;
	background-image: none;
}
.bread-row .wd-el-page-heading .entry-title {
	font-weight: 500;
	font-size: 24px;
	line-height: 42px;
	color: rgb(38,38,38);
}
.mg-info .btn.btn-style-link {
	font-weight: 400;
	font-size: 15px;
	text-transform: inherit;
	color: rgb(227,32,97);
}
.mg-info .btn.btn-style-link:hover {
	color: rgba(227,32,97,0.5);
}
.wd-dropdown-cats .wd-nav-vertical > li > a {
	font-weight: 400;
	font-size: 16px;
}
.wd-dropdown-cats .wd-nav-vertical > li > a:hover {
	color: rgb(255,255,255);
}
.wd-single-add-cart form.cart .button,  .top-bar-btn.btn {
	font-size: 14px;
	text-transform: none;
}
.mg-blog-sidebar .woodmart-recent-posts .recent-posts-time, .mg-blog-sidebar .woodmart-recent-posts .recent-posts-comment {
	font-size: 12px;
	color: rgb(38,38,38);
}
.mg-blog-sidebar .woodmart-recent-posts .recent-posts-time:hover, .mg-blog-sidebar .woodmart-recent-posts .recent-posts-comment:hover {
	color: rgb(227,32,97);
}
.mg-blog-sidebar .widget_categories ul li {
	font-size: 12px;
}
.mg-empty-cart .wd-empty-block-title, .wd-empty-wishlist .wd-empty-block-title, .wd-empty-compare .wd-empty-block-title {
	font-weight: 700;
	font-size: 40px;
	color: rgb(227,32,97);
}
.mg-cart-totals .shop_table th, .mg-cart-totals .shop_table td, .mg-cart-totals .woocommerce-shipping-methods label {
	color: rgb(0,0,0);
}
.mg-cart-table .shop_table thead th, .mg-cart-table .product-name a, .mg-cart-table .fgpb-auto-product-item .product-name {
	font-weight: 700;
	font-size: 12px;
}
.mg-cart-table .product-price .amount, .mg-cart-table .product-subtotal .amount, .mg-cart-table .quantity .qty {
	font-size: 14px;
}
.mg-cart-table .product-price .amount, .mg-cart-table .product-subtotal .amount, .mg-cart-table .quantity .minus, .mg-cart-table .quantity .plus {
	color: rgb(227,32,97);
}
.mg-cart-table .product-price .amount:hover, .mg-cart-table .product-subtotal .amount:hover, .mg-cart-table .quantity .minus:hover, .mg-cart-table .quantity .plus:hover {
	color: rgb(227,32,97);
}
.wd-compare-table .compare-field {
	font-weight: 600;
	font-size: 16px;
	color: rgb(0,0,0);
}
.wd-compare-table .compare-value {
	font-weight: 400;
	font-size: 14px;
	color: rgb(38,38,38);
}
.wd-compare-table .wd-entities-title {
	font-weight: 400;
	font-size: 12px;
	color: rgb(0,0,0);
}
.wd-my-account-sidebar .woocommerce-MyAccount-title {
	font-weight: 800;
	font-size: 16px;
	text-transform: uppercase;
	color: rgb(41,43,49);
}
.wd-my-account-sidebar .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link > a {
	font-weight: 600;
	font-size: 16px;
	color: rgb(41,43,49);
}
.wd-wishlist-head .title {
	font-weight: 500;
	font-size: 24px;
	text-transform: uppercase;
	color: rgb(41,43,49);
}
.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
	--wd-arrow-size: 40px;
	--wd-arrow-icon-size: 15px;
	--wd-arrow-color: rgb(38,38,38);
	--wd-arrow-color-hover: rgba(38,38,38,0.5);
	--wd-arrow-color-dis: rgb(38,38,38);
	--wd-arrow-radius: 100px;
	--wd-arrow-brd-color: rgb(38,38,38);
	--wd-arrow-brd: 1px solid;
}
.wd-nav-scroll {
	--wd-nscroll-height: 3px;
	--wd-nscroll-bg: rgb(227,227,227);
	--wd-nscroll-drag-bg: rgb(225,86,107);
}
.wd .product-label.onsale {
	background-color: rgb(227,32,98);
}
.wd .product-label.new {
	background-color: rgb(243,126,49);
	color: rgb(255,255,255);
}
.wd .product-label.featured {
	background-color: rgb(113,0,15);
	color: rgb(255,255,255);
}
.wd .product-label.out-of-stock {
	background-color: rgb(48,190,176);
	color: rgb(255,255,255);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}

@media (max-width: 768.98px) {
	.bread-row .wd-el-page-heading .entry-title {
		font-size: 16px;
	line-height: 32px;
	}
	.mg-empty-cart .wd-empty-block-title, .wd-empty-wishlist .wd-empty-block-title, .wd-empty-compare .wd-empty-block-title {
		font-size: 28px;
	}
	.wd-my-account-sidebar .woocommerce-MyAccount-title {
		font-size: 20px;
	}

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

@media (min-width: 1330px) {
[data-vc-full-width]:not([data-vc-stretch-content]),
:is(.vc_section, .vc_row).wd-section-stretch {
padding-left: calc((100vw - 1330px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
padding-right: calc((100vw - 1330px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
}
}



.btn.btn-style-link:not(#_):not(#_) {
	--btn-brd-color: var(--btn-color, currentColor);
	--btn-brd-width: 1px;
}

/* Header counters: orange badge (redefine WoodMart var locally) */
.whb-header .wd-tools-count {
	--wd-primary-color: #F37D33;
}

/* Header search: hide placeholder text, typed text stays pink */
.searchform.wd-style-4 input.s::placeholder {
	color: transparent;
}

/* Copyrights css */
.wd-copyrights:not(#_):not(#_) {
	margin-inline: 20px;
	margin-bottom: 20px;
	padding-block: 40px;
	border-radius: 0 0 20px 20px;
	background: #E32061;
	color: #FFFFFF;
	border:none
}
.wd-copyrights a:not(#_):not(#_) { color: #FFFFFF; }
.wd-copyrights .container:not(#_):not(#_) {
	max-width: none;
	padding-inline: 50px;
}

/* Header glass: only within the content container, not full width */
/* .whb-general-header .container,
.whb-header-bottom .container {
	position: relative;
} */

.whb-general-header .container::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(2px) saturate(160%);
}

/* Search in the bottom row is shown only when the header is sticky */
.whb-header:not(.whb-sticked) .whb-header-bottom .wd-header-search {
  display: none;
}

/* Catalog dropdown + mega menus: light glass (drawn on ::before so nested menus keep their own blur) */
.wd-header-cats .wd-dropdown-cats:not(#_),
.wd-header-cats .wd-dropdown-cats .wd-dropdown-menu:not(#_) {
	background: transparent;
	isolation: isolate;
	border: 1px solid rgba(227, 32, 97, 0.25);
	border-radius: 20px;
	box-shadow: 0 12px 40px rgba(227, 32, 97, 0.1);
}

.wd-header-cats .wd-dropdown-cats::before,
.wd-header-cats .wd-dropdown-cats .wd-dropdown-menu::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.7);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
}

/* Mega menu: solid white on the right (image area), fading into glass on the left */
.wd-header-cats .wd-dropdown-cats .wd-dropdown-menu::before {
	background: linear-gradient(to left, #fff 50%, rgba(255, 255, 255, 0.5));
}


.wd-single-add-cart form.cart button.single_add_to_cart_button.loading:not(:hover)::after {
	border-top-color: var(--wd-primary-color);
	border-left-color: var(--wd-primary-color);
}


/* Button Catalog */
.wd-header-cats .menu-opener:not(#_):not(#_) {
	gap: 7px;
	width: 120px;
	min-width: 0;
	height: 40px;
	border-radius: 33px;
	background-color: #E32061;
	text-transform:capitalize;
}

.wd-header-cats:not(#_):not(#_) {
	display: flex;
	align-items: center;
}

.wd-header-cats .menu-opener::after,
.wd-header-cats .menu-opener::before {
	display: none;
}
.wd-header-cats .menu-opener .menu-opener-icon {
	display: flex;
	margin: 0;
}


/* Button's wishlist, compare  */
.wd-empty-wishlist .wd-empty-block-btn,
.wd-empty-compare .wd-empty-block-btn {
	min-width: 160px;
}


/* Custom btn 'see all in row' */
.see-all-btn.btn {
	gap: 12px;
	/* 	transition: all .2s ease-out; */
}
.see-all-btn.btn:not(#_):not(#_):hover {
	color: #E32061;
	border-color: #E32061;
	background-color: #fff;
}
.see-all-btn.btn:not(#_):not(#_):active {
	color: #fff;
	background-color: #E32061;
}
.see-all-btn.btn:hover img {
	filter: brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(4172%) hue-rotate(327deg) brightness(92%) contrast(93%);
}
.see-all-btn.btn:active img {
	filter: brightness(0) invert(1);
}


/* Home page FAQ – bigger spacing between items (default 20px stays on other pages) */
.faq-home .wd-accordion:not(#_) { --wd-accordion-spacing: 14px; }


/* Transform badge ( text block) */
.badge-mg {
	transform: rotate(-8deg);
}

/* Catalog dropdown */
.wd-dropdown-cats:not(#_):not(#_) {
	border: 1px solid #C3C3C3;
	border-radius: 20px 0 0 20px;
}
.wd-dropdown-cats .wd-dropdown-menu:not(#_):not(#_) {
	border: 1px solid #C3C3C3;
	border-radius: 0 20px 20px 0;
	box-shadow: none;
}

/* Menu vars: no borders, side padding, colors, icon size */
.wd-dropdown-cats .wd-nav-vertical:not(#_):not(#_) {
	--nav-border: none;
	--nav-pd: 0 20px;
	--nav-color: #262626;
	--nav-color-hover: #fff; 
	--nav-bg-hover: #E32061;
	--nav-img-width: 20px;
	--nav-img-height: 20px;
}
.wd-dropdown-cats .wd-nav-vertical > li > a:not(#_):not(#_) {
	min-height: 40px;
}
/* Rounded corners follow the dropdown shape */
.wd-dropdown-cats .wd-nav-vertical > li:first-child > a:not(#_):not(#_) {
	border-radius: 20px 0 0 0;
}
.wd-dropdown-cats .wd-nav-vertical > li:last-child > a:not(#_):not(#_) {
	border-radius: 0 0 0 20px;
}
.wd-dropdown-cats .wd-nav-img:not(#_):not(#_) {
	margin-inline-end: 12px;
	transition: filter .2s;
}
/* Icon white on pink bg: hovered and opened item */
.wd-dropdown-cats .wd-nav-vertical > li:hover > a .wd-nav-img:not(#_):not(#_),
.wd-dropdown-cats .wd-nav-vertical > li.wd-opened > a .wd-nav-img:not(#_):not(#_) {
	filter: brightness(0) invert(1); 
}
/* Chevron white on pink bg: hovered and opened item */
.wd-dropdown-cats .wd-nav-vertical > li:hover > a:not(#_):not(#_),
.wd-dropdown-cats .wd-nav-vertical > li.wd-opened > a:not(#_):not(#_) {
	--nav-chevron-color: #fff;
}


/* Page Title */
.wd-page-title .wd-page-title-bg img {
	object-fit: contain;
	object-position: right center;
}

.wd-page-title .wd-page-title-bg {
	background: linear-gradient(90deg, #FFFFFF 0%, #F9C1DB 100%);
	border-radius: 20px;
}

.wd-page-title {
	max-width: 1440px;
	margin: auto
}


/* Reset theme offset and center radio with its label */
.mg-cart-totals .woocommerce-shipping-methods input.shipping_method {
	top: 0;
	align-self: center;
}


/* Info box — pill subtitle */
.mg-info .info-box-subtitle:not(#_):not(#_) {
	padding: 4px 22px;
	border: 1px solid #262626;
	border-radius: 50px;
	transform: rotate(-6deg);
}

.mg-info .info-box-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.mg-info--rev .info-box-subtitle:not(#_):not(#_) {
	margin:20px 0px;
	transform: rotate(6deg);
}
.mg-info--rev .info-box-title {
	order: -1;
}


/* Global Css */
.btn.btn-style-bordered:not(#_):not(#_) {
	--btn-brd-width: 1px;
}

.row-inset {
	--inset: 20px;
	/* Fallback 0px so calc() is valid before theme JS sets these vars */
	--wd-stretch-width: calc(100vw - var(--wd-scroll-w, 0px) - var(--wd-sticky-nav-w, 0px) - var(--inset) * 2);
	--wd-stretch-left: calc((50% - 50vw + var(--wd-sticky-nav-w, 0px) / 2 + var(--wd-scroll-w, 0px) / 2) + var(--wd-row-spacing, 0px) + var(--inset));
}

u:not(#_):not(#_) {
	color:var(--wd-primary-color);
	text-decoration: none;
}

/* Buton with border */
.btn.mg-tilt-badge{
	outline: 1px solid #262626;
	transform: rotate(-5deg);
}

/* Outer stretched section: side gaps only */
.mg-footer-wrap:not(#_):not(#_) {
	padding: 0 20px 20px;
}

/* Footer: section is the positioning context for the absolute gif column */
.mg-footer-wrap:not(#_):not(#_) {
	position: relative;
}

/* Page heading row (custom) */
.bread-row {
	position: relative;
	overflow: hidden;
}
.bread-bg {
	position: absolute;
	right: 0;
}
.bread-row > .wpb_column:not(.bread-bg) {
	position: relative;
	z-index: 2;
}
.bread-bg .wd-image img {
	min-height:180px;
	object-position: right center;
}
.bread-row .wd-el-page-heading .entry-title,
.bread-row .title-wrapper,
.pill-title {
	padding: 0px 20px;
	border: 1px solid #000000;
	border-radius: 50px;
	background-color: #ffffff;
	transform: rotate(-5deg);
}
.bread-row > .wpb_column:not(.bread-bg) .wpb_wrapper {
	display: flex;
	align-items: center;
}


/* Contact map height */
.contact-map {
	height: 420px;
}


/* Prefooter — desktop */
.mg-claim:not(#_):not(#_) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 60px;
}
.mg-claim:not(#_):not(#_) .mg-claim__ico {
	height: 120px;
}
.mg-claim:not(#_):not(#_) .mg-claim__ico--girls {
	height: 260px;
}
/* Lato bold words */
.mg-claim:not(#_):not(#_) :is(.mg-claim__pink, .mg-claim__dark) {
	font-family: Lato, sans-serif;
	font-weight: 700;
}
.mg-claim:not(#_):not(#_) .mg-claim__pink { font-size: 80px; color: #e32061; }
.mg-claim:not(#_):not(#_) .mg-claim__dark { font-size: 70px; color: #262626; }

/* serif words — must stay below .pink so it overrides font for .serif.pink */
.mg-claim:not(#_):not(#_) .mg-claim__serif {
	font-family: Alice, serif;
	font-weight: 400;
	font-size: 73px;
	color: #262626;
}
.mg-claim:not(#_):not(#_) .mg-claim__serif.mg-claim__pink {
	color: #e32061;
}

/* Footer column */
.column1.vc_col-md-2 {
	width: 12%;
}


/* Store card base (moved from WPBakery Design Options) */
.store-cards .vc_column-inner {
	background-color: #fff;
}
/* Store card: same fast transition for background, text, links and icon */
.store-cards .vc_column-inner,
.store-cards .info-box-title,
.store-cards .info-box-inner,
.store-cards .info-box-inner a,
.store-cards img {
	transition: all .15s ease;
}
/* Store card hover: brand background */
.store-cards .vc_column-inner:hover {
	background-color: #E32061;
}
/* Title, text and links turn white (text-fill-color overrides WoodMart ID-based color) */
.store-cards .vc_column-inner:hover .info-box-title,
.store-cards .vc_column-inner:hover .info-box-inner,
.store-cards .vc_column-inner:hover .info-box-inner a {
	-webkit-text-fill-color: #fff;
}
/* Store card hover: icon turns white */
.store-cards .vc_column-inner:hover img {
	filter: brightness(0) invert(1);
}



/* Apply form — Moonglow page Become a partner */
.mg-apply p {
	display: contents;
}
.mg-apply {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mg-apply .mg-row-3 {
	display: flex;
	gap: 14px;
}
.mg-apply .mg-row-3 .wpcf7-form-control-wrap {
	flex: 1 1 0;
}

.mg-apply input[type="text"]:not(#_):not(#_),
.mg-apply input[type="email"]:not(#_):not(#_),
.mg-apply input[type="tel"]:not(#_):not(#_),
.mg-apply input[type="url"]:not(#_):not(#_),
.mg-apply select:not(#_):not(#_),
.mg-apply textarea:not(#_):not(#_) {
	width: 100%;
	padding: 12px 25px;
	border: 1px solid #C3C3C3;
	border-radius: 50px;
	background-color: #FFFFFF;
	font-size: 12px;
	font-weight: 400;
	color: #262626;
	box-shadow: none;
}

.mg-apply textarea:not(#_):not(#_) {
	height: 150px;
	border-radius: 20px;
	resize: none;
}

.mg-apply ::placeholder {
	color: #767676;
	opacity: 1;
}

.mg-apply select:not(#_):not(#_) {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='2'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 14px;
}

.mg-apply .mg-subtitle {
	margin: 10px 0 0;
	font-size: 18px;
	font-weight: 700;
	color: #262626;
}

/* Upload area */
.mg-apply .mg-upload {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 160px;
	padding: 24px;
	border: 1px solid #E5E5E5;
	border-radius:20px;
	cursor: pointer;
	height: 195px;
	text-align: center;
}

.mg-apply .mg-upload.is-dragover {
	border-color: #E32061;
	background-color: #FEF5F8;
}

.mg-apply .mg-upload input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.mg-apply .mg-upload-text {
	font-family: "Lato", sans-serif;
	font-size: 12px;
	line-height: 15px;
	color: #767676;
}

.mg-apply .mg-browse {
	font-weight: 700;
	color: #E32061;
}

.mg-apply .mg-upload-name {
	font-size: 12px;
	color: #262626;
}

/* Submit */
.mg-apply .mg-submit:not(#_):not(#_) {
	align-self: flex-start;
	min-height: 32px;
	padding: 0 22px;
	border: none;
	border-radius: 33px;
	background-color: #E32061;
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	color: #FFFFFF;
}

.mg-apply .wpcf7-not-valid {
	border-color: #E32061;
}

/* Gif position - footer */
.mg-footer-gif:not(#_):not(#_) {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 430px;
}


/* Shop sorting: customizable native select */
.woocommerce-ordering .orderby,
.woocommerce-ordering .orderby::picker(select) {
	appearance: base-select;
}
/* WoodMart already draws its own arrow as bg image */
.woocommerce-ordering .orderby::picker-icon {
	display: none;
}
/* Dropdown panel */
.woocommerce-ordering .orderby::picker(select) {
	padding: 5px 0;
	border: 1px solid #C3C3C3;
	border-radius: 10px;
}
/* Options: brand pink for hover and selected */
.woocommerce-ordering .orderby option:hover,
.woocommerce-ordering .orderby option:checked {
	background-color: #E32061;
	color: #fff;
}
/* Dropdown panel: align to select's right edge, grow to the left */
.woocommerce-ordering .orderby::picker(select) {
	position-area: bottom span-left;
}



/* Add to cart — loop item: SVG icon */
.mg-add-btn .wd-add-btn:not(#_):not(#_),
.mg-add-btn .add-to-cart-loop:not(#_):not(#_) {
	width: 100%;
}
.mg-add-btn:not(#_):not(#_),
.mg-add-btn .wd-action-text:not(#_):not(#_) {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.mg-add-btn .add-to-cart-loop:not(#_):not(#_) {
	min-height: 26px;
}
.mg-add-btn .wd-action-icon:not(#_):not(#_) {
	position: absolute;
	top: 50%;
	right: 18px;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	background: url("/wp-content/uploads/2026/09/add-to-bag.svg") center/contain no-repeat;
}
.mg-add-btn .wd-action-icon::before { display: none; }
.mg-add-btn .wd-check-icon:not(#_):not(#_) {
	width: 14px;
	height: 14px;
	background: #FFBCD4;
}
.mg-add-btn:has(.added):not(#_):not(#_) {
	border-color: #D0034C;
	background-color: #D0034C;
}
.mg-add-btn :is(.add-to-cart-loop:hover, .added, .wd-hover-parent:hover *) .wd-action-text:not(#_):not(#_) {
	--wd-action-text-color: #FFFFFF;
}
.mg-add-btn .add-to-cart-loop:not(#_):not(#_)::after,
.mg-add-btn .wd-action-icon:not(#_):not(#_)::after {
	border-left-color: #fff;
}
/* Loading state: hide bag icon, recolor WoodMart spinner to white */
.mg-add-btn .loading .wd-action-icon:not(#_):not(#_) {
	background: none;
}


/* Blog custom */
.wd-post .wd-post-content {
	align-items: flex-start;
	text-align: left;
	gap: 0;
}
.wd-post .wd-post-img img {
	width: 100%;
	aspect-ratio: 404 / 270;
	object-fit: cover;
}

/* Title & excerpt: clamp to 2 lines */
.wd-post :is(.wd-post-title, .wd-post-excerpt) {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wd-post .wd-post-title {
	min-height: 60px; 
	color: #262626;
}
.wd-post .wd-post-excerpt {
	margin-top: 12px;
	color: #bbb;
}
/* Read more: full-width pill button pinned to card bottom */
.wd-post .wd-post-read-more {
	align-self: stretch;
	margin-top: auto;
	padding-top: 10px;
}
.wd-post .wd-post-read-more a {
	display: grid;
	place-content: center;
	min-height: 35px;
	border: 1px solid #000;
	border-radius: 25px;
	color: #262626;
	text-transform: none;
}

/* Floating decor behind calculator ('Check offers!' row) */
.mg-float__item {
	position: absolute;
	animation: mg-float 5s ease-in-out infinite;
}

/* position + flight vector (--x, --y, --r) and own rhythm per item */
.mg-float__item--1 { top: 18%; left: -20%; width: 200px; --x: 14px; --y: -12px; --r: -20deg; } /* nail polish */
.mg-float__item--2 { top: -8%; right: -30%; width: 230px; --x: 18px; --y: 16px; --r: 18deg; animation-duration: 6s; animation-delay: -2s; } /* compact */
.mg-float__item--3 { bottom: 6%; right: -40%; width: 280px; --x: -16px; --y: 20px; --r: -16deg; animation-duration: 6s; animation-delay: -4s; } /* lip pencil */

/* float back and forth along each item's vector */
@keyframes mg-float {
	50% { transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}

/* calculator and badges above decor */
.calc-col .wd-image,
.calc-col .text-mg1,
.calc-col .text-mg2 {
	position: relative;
	z-index: 1;
}

.calc-col .text-mg1,
.calc-col .text-mg2 {
	width: fit-content;
}
.calc-col .text-mg1 {
	transform: translateX(0px) rotate(-8deg);
}
.calc-col .text-mg2 {
	transform: translateX(50px) rotate(8deg);
}


/* My account nav: active item in brand color with white text */
.wd-builder-off .wd-my-account-sidebar .woocommerce-MyAccount-navigation ul > li.is-active > a {
	color: #fff;
	background-color: #E32061;
}
.wd-builder-off .wd-my-account-sidebar .woocommerce-MyAccount-navigation ul > li:not(.is-active) > a:hover {
	color: #E32061;
	background-color: #FFBCD4;
}

/* My account dashboard: custom SVG icons instead of theme font icons */
.wd-nav-my-acc .wd-my-acc-loyalty_reward { --wd-my-acc-nav-icon: url(/wp-content/uploads/2026/10/beautycoins-premii-2-1.svg); }
.wd-nav-my-acc .wd-my-acc-orders { --wd-my-acc-nav-icon: url(/wp-content/uploads/2026/10/beautycoins-premii-3.svg); }
.wd-nav-my-acc .wd-my-acc-wc-smart-coupons { --wd-my-acc-nav-icon: url(/wp-content/uploads/2026/10/beautycoins-premii-4.svg); }
.wd-nav-my-acc .wd-my-acc-edit-account { --wd-my-acc-nav-icon: url(/wp-content/uploads/2026/10/beautycoins-premii-5.svg); }
.wd-nav-my-acc .wd-my-acc-customer-logout { --wd-my-acc-nav-icon: url(/wp-content/uploads/2026/10/beautycoins-premii-6.svg); }
.wd-nav-my-acc .wd-my-acc-wishlist { --wd-my-acc-nav-icon: url(/wp-content/uploads/2026/10/beautycoins-premii-7.svg); }
.wd-nav-my-acc .wd-my-acc-price-tracker { --wd-my-acc-nav-icon: url(/wp-content/uploads/2026/10/beautycoins-premii-8.svg); }
.wd-nav-my-acc .wd-my-acc-waitlist { --wd-my-acc-nav-icon: url(/wp-content/uploads/2026/10/beautycoins-premii-9.svg); }
.wd-nav-my-acc .wd-my-acc-edit-address { --wd-my-acc-nav-icon: url(/wp-content/uploads/2026/10/beautycoins-premii-10.svg); }
.wd-nav-my-acc .wd-my-acc-angro { --wd-my-acc-nav-icon: url(/wp-content/uploads/2026/10/beautycoins-premii-11.svg); }

/* My account dashboard: icon box matches SVG frame ratio (225x195) */
.wd-builder-off .wd-nav-my-acc .wd-nav-icon::before {
	content: "";
	width: 60px;
	height: 60px;
	background: var(--wd-my-acc-nav-icon) center / contain no-repeat;
}

/* My account dashboard: brand-colored hover via theme nav variables */
.wd-builder-off .wd-nav-my-acc.wd-icon-top {
	--nav-bg-hover: #FFF0F5;
	--nav-color-hover: #E32061;
	--nav-shadow-hover: 0 4px 4px rgba(227, 32, 97, .2);
}
.wd-nav-my-acc > li > a:hover {
	transform: translateY(-3px);
}



/* Empty states (cart, wishlist, compare): column layout so the icon can be moved below the text */
.wd-empty-block,
.mg-empty-cart .wd-wpb {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

/* Empty states: unwrap title so its icon (::before) becomes a separate flex item */
.wd-empty-block .wd-empty-block-title,
.mg-empty-cart .wd-empty-block-title {
	display: contents;
}

/* Empty states: icon after the text */
.wd-empty-block .wd-empty-block-title::before,
.mg-empty-cart .wd-empty-block-title::before {
	order: 1;
	margin: 0;
}

/* Empty states: button last */
.wd-empty-block .wd-empty-block-btn,
.mg-empty-cart .return-to-shop {
	order: 2;
}

/* Empty states: spacing is handled by gap */
.wd-empty-block .wd-empty-block-text,
.mg-empty-cart .wd-empty-block-text,
.mg-empty-cart .return-to-shop {
	margin: 0;
}


/* Center the BeautyCoin price horizontally and align icon with the number */
/* .price:has(img[src*="beautycoin"]) {
display: flex;
justify-content: center;
gap: 4px;
} */


/* Empty cart: hide empty notices wrapper so it doesn't add an extra gap */
/* .mg-empty-cart .woocommerce-notices-wrapper:empty {
display: none;
}
*/


/* ======== Style Product Category Page ============= */
/* Moonglow - PRODUCT ARCHIVE. Woodmart layout 795 "Products archive".
* Author: Resolve IT - https://resolveit.md/
*
* This is the RESIDUE of a design-options migration, not a stylesheet. Owner, 2026-09-21:
* "use this layout and move all possible css into wp backery components". Every declaration
* that a WPBakery or Woodmart parameter can express is a parameter on layout 795 now; what
* is left here is what no parameter in this stack can say. Each block below records which,
* so the next session does not re-try a route that was already measured and refused.
*
* 2026-09-21, SECOND PASS - THE CARD IS THE SECTION NOW. The hero used to be one row holding
* one column holding everything. The owner split it into a breadcrumb row and an icon/title
* row, and ruled that "section will include all inner elements", so the frame, the radius and
* the gradient moved from the row up onto the `vc_section`. `.moonglow-cat-row` NO LONGER
* EXISTS - a rule written against it matches nothing. The two replacements are
* `.moonglow-cat-bar` (the breadcrumb row) and `.moonglow-cat-band` (the icon/title row).
*
* WHERE THE HERO'S LOOK LIVES, element by element:
*   vc_section  .moonglow-cat-section  css: margin-left/right 0  +  1px #c3c3c3 frame
*                                           +  20px radius          <- THE CARD
*                                      woodmart_gradient_switch + woodmart_color_gradient
*                                      responsive_spacing: 12px radius on mobile
*                                      vertical_content_position: middle  (this is what makes
*                                           the section a flex column - the band's `flex: 1`
*                                           below is inert without it)
*   vc_row      .moonglow-cat-bar      nothing left; it is a plain row holding the breadcrumb
*   vc_column   (bar's)                css: padding-top 0; vertical_alignment: center
*   breadcrumb                         css: padding + margin + the divider rule
*                                      responsive_spacing: mobile padding
*                                      width_desktop/tablet/mobile: 100%
*   vc_row      .moonglow-cat-band     nothing; the CSS below makes it eat the leftover height
*   vc_column   .moonglow-cat-hero     vertical_alignment: center
*   page heading                       css: THE PILL - padding, white fill, 2px frame, radius
*                                      typography_font_size / _line_height, title_color
*                                      width_*: auto, responsive_spacing: mobile padding
*   rit_category_icon                  nothing - the element declares no design box
*   rit_category_bg_image              nothing - ditto
*
* WHAT `vertical_alignment: center` BUYS, and what it costs. Setting it makes Woodmart add
* `wd-enabled-flex` to the column, whose own rule is
* `> .vc_column-inner > .wpb_wrapper{display:flex;flex-wrap:wrap}`, and the value emits
* `align-items: center` onto the same node. So four declarations are a setting an editor can
* see and change in the panel.
* The cost is one rule, the icon's width below: the SAME theme stylesheet also says
* `.wd-enabled-flex > .vc_column-inner > .wpb_wrapper > *:not(.wd-enabled-width):not(.inline-element){width:100%}`,
* i.e. every child of a flex column is full width unless it carries a Width setting. The
* title has one (`width_desktop`), so it is excluded and native. `rit_category_icon` has no
* Width param to set, so the icon has to say `width: auto` here.
*
* THE TITLE PILL IS NATIVE. It used to be drawn twice: the owner's design box put a 2px frame
* and a 40px radius on the element's WRAPPER, while the stylesheet drew a second, white,
* rotated pill on the heading inside it. Adding the padding and the white fill to that same
* design box collapses the two into one - and dimensionally it is the inner pill that
* survives, to the pixel: text 86.46 + 104 padding + 4 border = 194.46 x 61.5, exactly what
* the inner pill measured before. Only the rotation is left here, because no design box has
* `transform`.
*
* WHAT IS NOT IN THIS FILE AND WAS IN ITS PREDECESSOR: the toolbar pill, the filters-sidebar
* card, the FAQ card and the product-card button. Layout 795 is Woodmart's stock "Products
* archive" body with the Moonglow hero pasted above it - none of those wrappers exist on it,
* so their rules would match nothing. They are still in `css/category-archive.css`, which
* belongs to the drafted layout 793, if they are ever wanted back.
*/

/* THE CARD, and all three of these are here because no parameter expresses them.
*
* `position` is the artwork's containing block: `.rit-category-bg` is absolutely positioned
* and must resolve against the CARD, not against whichever row it happens to sit in. The
* gradient's own `.wd-row-gradient-enable{position:relative}` would supply it today, but that
* is a side effect of a switch the owner can turn off, and the artwork must not depend on it.
*
* `overflow` clips the artwork to the 20px radius. It is safe to write only because the
* section's `woodmart_disable_overflow` is "0": the theme's own
* `:is(.vc_row,.vc_section).wd-disable-overflow{overflow:visible !important}` would beat this
* rule outright if that switch were ever turned on.
*
* `min-height` used to be the row's `min_height` param, and the owner's report of it was
* exactly right: that param is not responsive, so a 195px floor meant for the desktop card
* was also forcing 195px on a 390px phone. There is no per-device variant to reach for.
* `min_height` is WPBakery's own `type=number`, one value, written as an INLINE style
* attribute - which beats every stylesheet rule that is not `!important`. So it could not be
* softened from here either; it had to be cleared on the element and restated inside a band.
* (On `vc_section` the param is SCHEMA_ONLY as well, so it is doubly not the route.)
*
* THE ROUTE THAT LOOKS NATIVE AND IS A TRAP, recorded so it is not re-tried:
* `responsive_spacing` would carry it. Its builder (fields/vc-functions.php:132-146) is fully
* generic - any key becomes `key: value !important` on `html .wd-rs-` - and it has a desktop
* band as well as tablet and mobile, so a per-device `min-height` really would work and really
* would beat the inline style. It is still wrong: the Design-options panel serialises only ITS
* OWN inputs (margin, padding, border radius, border width), so the first time an editor opens
* that tab and saves, the key is dropped silently (NOTES #312). A setting that vanishes when
* someone looks at it is the least maintainable option, not the most.
*
* `min-width: 768.99px` is the complement of the mobile band at the bottom of this file, so
* the floor and the icon's mobile sizing change at the same pixel. Below it the card is as
* tall as its content until the mobile pass sets a deliberate value.
*
* WHAT THE FLOOR IS FOR: it is the whole card, breadcrumb bar included (owner ruling,
* 2026-09-21). On Outlet the content already reaches it. It exists for the ten categories with
* no icon and no artwork, where the content is 110 and the card would otherwise be half
* height - and, with the band rule below, it is also what the title is centred against. */
.moonglow-cat-section {
	position: relative;
	overflow: hidden;
}

@media (min-width: 768.99px) {
	.moonglow-cat-section {
		min-height: 195px;
	}
}

/* THE BAR MUST NOT BECOME THE ARTWORK'S CONTAINING BLOCK. `.vc_row` and `.wpb_column` are
* both `position: relative` out of the box, so the absolutely-positioned artwork would resolve
* against the breadcrumb's own column and cover 49 of the card's 195 pixels. Making the two
* static is safe only because the gradient moved off this row: a `.wd-fill` needs its parent
* positioned, and there no longer is one here. */
.moonglow-cat-section .moonglow-cat-bar,
.moonglow-cat-section .moonglow-cat-bar > .wpb_column {
	position: static;
}

/* THE FIX THE OWNER ASKED FOR, 2026-09-21: "handle cases when category will not have icon and
* title should remain in center and align left".
*
* The band takes every pixel the breadcrumb bar did not, so its content is centred against the
* card rather than stacked under the bar. That is a property of the SECTION's flex layout and
* there is no row-level param for it: `vc_row` has `content_placement`, which sets
* `align-items` INSIDE the row, not how the row itself grows inside its parent.
*
* The chain is four nodes deep because each one has to stop being auto-height: the row is the
* section's flex item, the column is the row's, `.vc_column-inner` is the column's, and
* `.wpb_wrapper` - which the `vertical_alignment: center` param already made
* `display:flex; align-items:center` - is the one that finally centres the icon and the title.
*
* WHY THIS AND NOT `align-content` ON A SINGLE FLAT COLUMN, which was the shape before today:
* with the breadcrumb at `width: 100%` it owns its own flex line, and `align-content` (whose
* initial value is already `stretch`) distributes the spare height across BOTH lines - which
* moves the breadcrumb's divider off the top of the card. Splitting the bar from the band is
* what keeps the divider pinned while the title centres. */
.moonglow-cat-section .moonglow-cat-band {
	display: flex;
	flex: 1 1 auto;
}

.moonglow-cat-section .moonglow-cat-band > .moonglow-cat-hero {
	display: flex;
}

.moonglow-cat-section .moonglow-cat-band > .moonglow-cat-hero > .vc_column-inner {
	display: flex;
	flex: 1 1 auto;
}

.moonglow-cat-section .moonglow-cat-band > .moonglow-cat-hero > .vc_column-inner > .wpb_wrapper {
	flex: 1 1 auto;
}

/* REPLACES THE -26px OVERLAP (owner, 2026-09-21: "same treatment either way"). The design used
* to tuck the pill under the bell's right edge with `margin-inline-start: -26px`, applied
* through an adjacent-sibling selector so it could not reach a category with no icon. The
* owner retired the overlap, which means the spacing is now unconditional and a plain gap
* says it: with no icon there is no gap to apply, and the pill is the first item on the line,
* flush against the column's padding. Tune this one number if the bell sits too close. */
.moonglow-cat-hero > .vc_column-inner > .wpb_wrapper {
	column-gap: 16px;
}

/* THIS is what keeps the text off the artwork, and it was red-proved: remove the z-index and
* breadcrumb, icon and title all disappear behind the picture. The `z-index: 0` on the artwork
* itself is documentation; this is the mechanism. `position: relative` is its prerequisite,
* because z-index does nothing on a static box. No param expresses either (`wd_z_index` exists
* on columns and rows, not on these elements). The breadcrumb needs its own selector now that
* it is no longer a descendant of `.moonglow-cat-hero`. */
.moonglow-cat-bar .wd-el-breadcrumbs,
.moonglow-cat-hero .rit-category-icon,
.moonglow-cat-hero .wd-el-page-heading {
	position: relative;
	z-index: 1;
}

/* The icon's own breathing room: 100 + 22 + 22 = 144, which is what the band measures on a
* category that has one. `rit_category_icon` has no `css` box to hold any of it.
* `flex: 0 0 auto` stops a long category name squeezing the bell on a narrow container. */
.moonglow-cat-hero .rit-category-icon {
	flex: 0 0 auto;
	padding: 22px 0 22px 3px;
	margin-bottom: 0;
	line-height: 0;
}

/* THE ONE RULE THAT EXISTS ONLY BECAUSE THE COLUMN IS NATIVELY FLEX, and it needs its
* specificity spelled out. Woodmart's own rule is
* `.wd-enabled-flex > .vc_column-inner > .wpb_wrapper > *:not(.wd-enabled-width):not(.inline-element)`,
* which weighs (0,5,0) - three classes plus one for each `:not()` argument - so the obvious
* `.moonglow-cat-hero .rit-category-icon` at (0,2,0) loses silently and the bell goes full
* width, pushing the title onto its own line. Repeating a class we own is the sanctioned way
* to buy specificity (owner rule 4: never an id, and rule 5: never `!important`); three copies
* plus the two ancestors is (0,6,0) and wins outright rather than on document order. */
.moonglow-cat-hero > .vc_column-inner > .wpb_wrapper > .rit-category-icon.rit-category-icon.rit-category-icon {
	width: auto;
}

/* Caps the HEIGHT and leaves the width free, because a category icon is whatever shape its
* owner uploaded - a plain `height` flattens a 182x166 icon to 182x48. `.rit-category-icon-img`
* is the class the shortcode puts on all three of its branches (inline SVG, attachment image,
* bare-URL fallback), so this reaches an SVG icon too. */
.moonglow-cat-hero .rit-category-icon img,
.moonglow-cat-hero .rit-category-icon-img {
	width: auto;
	max-height: 100px;
}

/* The only part of the pill that is not a parameter. The angle was measured off the design
* export rather than eyeballed - a least-squares fit to the label's top edge over 95 columns
* gives -4.47deg. */
.moonglow-cat-hero .wd-el-page-heading {
	transform: rotate(-4.5deg);
}

/* Out of the flow, so the artwork fills the CARD and the text sits on top of it. No element
* parameter expresses "take this out of the flow", and `rit_category_bg_image` has no design
* box in any case. Scoped to the section, not to `.moonglow-cat-hero`, because since
* 2026-09-21 the artwork and the title live in different rows.
*
* `inset: -1px` covers the card's own 1px frame; there is deliberately NO `width: 100%` any
* more - it would re-resolve the box against the containing block's width and undo the
* left/right stretch that `inset` sets, which mattered the moment the card grew taller than
* one row.
*
* THE ARTWORK IS ITS COLUMN'S LAST CHILD, deliberately (owner, 2026-09-18): declared first, an
* absolutely-positioned element covers its siblings in the WPBakery backend editor, where
* nothing is absolute and everything draws in document order. It costs the front end nothing,
* because an out-of-flow element's stacking is decided by z-index, not by document order. */
.moonglow-cat-section .rit-category-bg {
	position: absolute;
	inset: -1px;
	z-index: 0;
	margin-bottom: 0;
}

/* `display: contents` makes the `picture` vanish as a box and hands its layout straight to the
* image, so the fill rules below size against the absolutely-positioned wrapper rather than a
* static inline one. The `picture` is there because the mobile background is swapped in MARKUP,
* not by a media query: the WPCode snippet emits a `source` at `max-width: 768.98px` carrying
* the `title_image_mobile` term meta, so the browser downloads one file. */
.moonglow-cat-section .rit-category-bg picture {
	display: contents;
}

/* `contain` and `right center` are the design's: the artwork sits against the right edge and
* the gradient stays clear on the left, where the text goes. `cover` fills the card and drops
* the title onto the busiest part of the picture. object-position, never background-position -
* this is a real image, rendered through the theme's own woodmart_otf_get_image_html(). */
.moonglow-cat-section .rit-category-bg img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right center;
}

/* Woodmart's own mobile band is 768.98px (inc/functions.php:87-96) - the same number the
* picture's `media` condition uses, so the artwork swaps file at exactly the width the rest of
* the hero changes shape.
*
* THE TITLE'S MOBILE SIZE AND PADDING ARE NOT HERE - they are the heading element's own
* `typography_font_size` (mobile) and `responsive_spacing` (mobile), which
* vc-functions.php:166 wraps in `@media (max-width: 767.98px)`. That is one pixel tighter than
* this block, so a 768.00-768.98px sliver keeps the desktop pill while the icon has already
* shrunk. Known, unreachable on a real device, and preferred to the alternative: kept here,
* the design box's `!important` would have outranked them and the mobile values would never
* have applied at all.
*
* THIS BLOCK IS THE 2026-09-18 MOBILE BEHAVIOUR CARRIED FORWARD UNCHANGED. The mobile pass
* against `Figma Assets/Moonglow/design/Mobile/` is the next piece of work. */
@media (max-width: 768.98px) {
	.moonglow-cat-hero .rit-category-icon {
		padding: 14px 0 14px 2px;
	}

	.moonglow-cat-hero .rit-category-icon img,
	.moonglow-cat-hero .rit-category-icon-img {
		max-height: 70px;
	}
}





/* FAQ card – border/padding that lived in the HTML block column */
.product-faq {
	padding: 10px 30px;
	border: 1px solid #C3C3C3;
	border-radius: 20px;
}

/* Remove theme bottom margin inside card */
.product-faq .wd-accordion { margin-bottom: 0; }

/* Fallback: question style from block settings */
.product-faq .wd-accordion-title-text {
	color: #e32061;
	font-size: 18px;
}

/* Fallback: answer style from block settings */
.product-faq .wd-accordion-content {
	color: #262626;
	font-size: 15px;
}

/* Space between videos and FAQ */
.product-video { margin-bottom: 50px; }

/* Vertical 9:16 videos – WoodMart doesn't generate ratio CSS for dynamic elements */
.product-video .wd-el-video.wd-with-aspect-ratio {
	--wd-aspect-ratio: 9 / 16;
	aspect-ratio: 9 / 16;
	height: auto;
}

/* Iframe fills the 9:16 box */
.product-video .wd-el-video.wd-with-aspect-ratio iframe {
	aspect-ratio: 9 / 16;
	width: 100%;
	height: 100%;
}


/* My Account: hide TV image + page heading column for guests (language-independent) */
body.woocommerce-account:not(.logged-in) .bread-row > .wpb_column:has(.wd-el-page-heading) {
	display: none;
}
/* My Account (guests): remove breadcrumbs divider that doubles the row's bottom border */
body.woocommerce-account:not(.logged-in) .bread-row .vc_column-inner:has(.wd-el-breadcrumbs) {
	border-bottom-width: 0 !important;
}

/* Carousel keeps 220px from init – let it follow video height */
.product-video .wd-carousel-wrap { height: auto !important; }

@media (min-width: 768px) {
	/* Fewer than 4 videos – center them instead of leaving empty space on the right */
	.product-video--few .wd-carousel-wrap { justify-content: center; }
}

@media (max-width: 767px) {
	/* Mobile spacing and answer line height from block settings */
	.product-faq { padding: 10px 15px; }
	.product-faq .wd-accordion-content { line-height: 20px; }
}

/* Arrow icon becomes white on button hover */
.mg-mega-bottom:hover .wd-btn-icon img { filter: brightness(0) invert(1); }




/* ==========================================================
* HEADER SEARCH
========================================================== */

/* Search icon: active state icon fades in when search is open */
.wd-header-search.wd-display-full-screen .wd-tools-icon:after {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	font-size: var(--wd-tools-icon-width, var(--wd-tools-icon-base-width));
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	content: url('/wp-content/uploads/2026/08/active-search.svg');
}

.wd-search-opened .wd-header-search.wd-display-full-screen .wd-tools-icon:after {
	opacity: 1;
}

/* Search popup: centered, wide as hero, glass effect with soft pink border */
.wd-search-full-screen:not(#_) {
	left: 50% !important;
	transform: translate(-50%, 0%) !important;
	width: min(1330px, calc(100vw - 40px));
	height: 550px;
	padding: 16px !important;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.45));
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	border: 1px solid rgba(227, 32, 97, 0.35);
	border-radius: 20px;
	box-shadow: 0 12px 40px rgba(227, 32, 97, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Inner wrappers: transparent so the glass shows through, thin pink scrollbar */
.wd-search-full-screen :is(.wd-search-results, .wd-dropdown-results, .wd-scroll-content):not(#_) {
	background: transparent;
	scrollbar-width: thin;
	scrollbar-color: rgba(227, 32, 97, 0.5) transparent;
}

/* Search input: frosted, brand pink border */
.wd-search-full-screen .searchform:not(#_) {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 40px;
	padding: 6px 14px !important;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid #E32061 !important;
	border-radius: 20px;
}

.wd-search-full-screen.wd-scroll .searchform :is(input.s, input[type="text"]) {
	color: #262626;
	font-size: 14px;
	text-align: left;
}

.wd-search-full-screen .searchform input.s::placeholder {
	color: rgba(38, 38, 38, 0.5);
}

/* Close button inside the input */
html body .wd-search-full-screen .wd-close-search.wd-style-icon {
	position: absolute;
	top: 26px;
	inset-inline-end: 30px;
	z-index: 2;
	--wd-action-icon-size: 18px;
	--wd-action-w: 18px;
	--wd-action-h: 18px;
}

/* Left column (suggestions): stays in place while products scroll */
.wd-search-full-screen .wpb_column:has(.mega-menu-list) {
	position: sticky;
	top: 0;
	align-self: flex-start;
}

/* Column titles: "Sugestii" / "Produse" */
.wd-search-full-screen .wd-products-element .wd-el-title {
	padding: 0 0 12px 0;
	border-bottom: 1px solid #E5E8E4;
	margin-bottom: 10px;
}

/* Suggestions: title and items aligned with the same side padding */
.wd-search-full-screen .mega-menu-list > li > a {
	padding: 0 10px 12px !important;
}

.wd-search-full-screen .sub-sub-menu li {
	border-top: 1px solid #E5E8E4;
}

.wd-search-full-screen .sub-sub-menu li > a {
	padding: 12px 10px;
}

/* Product rows: anchor for own chevron, room for it on the right */
.wd-search-full-screen .wd-products-element .wd-product {
	position: relative;
	padding-right: 30px;
	cursor: pointer;
}

.wd-search-full-screen .wd-products-element .product-wrapper {
	align-items: center;
}

.wd-search-full-screen .wd-products-element :is(.wd-entities-title, .product-title, .price) {
	font-size: 14px;
	color: #262626;
}

/* Chevron on the right of each product row */
.wd-search-full-screen .wd-products-element .wd-product::after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-right: 1.5px solid #E32061;
	border-bottom: 1.5px solid #E32061;
	transform: rotate(-45deg);
}

/* Rows: pink hover highlight (suggestion title excluded) */
.wd-search-full-screen :is(.wd-products-element .wd-product, .sub-sub-menu li > a) {
	border-radius: 12px;
	transition: background-color 0.2s ease;
}

.wd-search-full-screen :is(.wd-products-element .wd-product, .sub-sub-menu li > a):hover {
	background-color: rgba(227, 32, 97, 0.08);
}@media (min-width: 1025px) {
	.whb-general-header .container::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(2px) saturate(160%);
}

/* Catalog dropdown + mega menus: light glass (drawn on ::before so nested menus keep their own blur) */
.wd-header-cats .wd-dropdown-cats:not(#_),
.wd-header-cats .wd-dropdown-cats .wd-dropdown-menu:not(#_) {
	background: transparent;
	isolation: isolate;
	border: 1px solid rgba(227, 32, 97, 0.25);
	border-radius: 20px;
	box-shadow: 0 12px 40px rgba(227, 32, 97, 0.1);
}

.wd-header-cats .wd-dropdown-cats::before,
.wd-header-cats .wd-dropdown-cats .wd-dropdown-menu::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.7);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
}

/* Mega menu: solid white on the right (image area), fading into glass on the left */
.wd-header-cats .wd-dropdown-cats .wd-dropdown-menu::before {
	background: linear-gradient(to left, #fff 50%, rgba(255, 255, 255, 0.5));
}
}

@media (max-width: 576px) {
	/* Mobile header: offset over the slider (Figma), not when sticky */
.whb-header:not(.whb-sticked) .whb-main-header {
	margin: 35px 15px 0;
}

/* Mobile categories menu: icons 26x26 via theme variables (no !important needed) */
.mobile-nav .mobile-categories-menu .wd-nav-img {
	--nav-img-width: 26px;
	--nav-img-height: 26px;
}

/* Mobile categories menu: top-level items per Figma */
body .mobile-nav .mobile-categories-menu > li > a {
	min-height: 45px;
	gap: 10px;
	font-size: 11px;
}


/* Reserve space for the custom top offset once WoodMart makes the header absolute */
.whb-header.whb-sticky-prepared {
	padding-bottom: 35px;
}


/* Mobile sticky: full-width semi-transparent bar */
.whb-sticked .whb-row.whb-general-header {
	background-color: rgba(255, 255, 255, .5);
}

/* Sticky header: pin the popup right under the bar (overrides WoodMart's inline top) */
body:has(.whb-sticked) .wd-search-full-screen:not(#_) {
	margin-top: 0;
	top: 65px !important;
}

/* Drop the rounded bar styles when sticky */
.whb-sticked .whb-general-header .whb-general-header-inner {
	border: 0;
	border-radius: 0;
}

/* Gap between phone button row and header box */
.whb-header .whb-top-bar {
	margin-bottom: 14px;
}

/* Mobile header row: bordered box around menu, logo and search */
.whb-general-header .whb-general-header-inner {
	padding: 0 10px;
	border: 1px solid #2626261A;
	border-radius: 20px;
}

/* Mobile menu icon (Design 7): rounded square instead of circle */
.whb-header .wd-header-mobile-nav.wd-design-7 .wd-tools-icon {
	border-radius: 10px;
}

/* Mobile top bar: phone button stretched to full width (Figma 320 fill) */
.wd-button-wrapper:has(.top-bar-btn),
.top-bar-btn.btn {
	width: 100%;
}

/* Phone icon white */
.top-bar-btn img {
	filter: brightness(0) invert(1);
}

/* Mobile: smaller floating decor */
.mg-float__item--1 { width: 100px; }
.mg-float__item--2 { width: 120px; right: -5%; }
.mg-float__item--3 { width: 110px; right: -5%; }


/* Accordion: item spacing */
.wd-accordion.wd-style-simple:not(#_) {
	--wd-accordion-spacing: 10px;
}

/* Claim block: spacing, icon height, unified 40px text */
.mg-claim:not(#_):not(#_) {
	gap: 0 25px;
}
.mg-claim:not(#_):not(#_) :is(.mg-claim__ico, .mg-claim__ico--girls) {
	height: 90px;
}
/* .serif.pink inside :is() raises specificity to 2 classes — beats desktop .serif.pink */
.mg-claim:not(#_):not(#_) :is(.mg-claim__pink, .mg-claim__dark, .mg-claim__serif, .mg-claim__serif.mg-claim__pink) {
	font-size: 40px;
}


/* Social icons */
.wd-social-icons:not(#_) {
	--wd-social-icon-size: 28px;
	gap: 20px; 
}

/* Footer column 'extra menu' */
.column1.vc_col-md-2 {
	width: 100%;
}

/* Mobile: offset from footer bottom instead of top */
.mg-footer-gif:not(#_):not(#_) {
	top: auto;
	bottom: 350px;
	width: 280px;
}

/* Text block 'become a partner' */
.pill-title {
	font-size: 24px !important;
}
.mg-terms p:has(.pill-title) + p {
	display: none;
}
.mg-terms p {
	margin-bottom: 14px;
	line-height: 1.4;
}

/* Contact form */
.mg-apply .mg-row-3 {
	flex-direction: column;
}

/* CF7 auto <br> between fields become flex items and add extra gaps — hide them */
.mg-apply .mg-row-3 br {
	display: none;
}

.mg-apply textarea:not(#_):not(#_) {
	min-height: 0; /* reset WoodMart's min-height, otherwise it overrides height */
	height: 120px;
}

/* Upload area */
.mg-apply .mg-upload {
	height: 160px;
}

/* Smaller logos on mobile – !important needed to override inline height */
img[alt="payment_methods"] { height: 18px !important; }


/* Mobile: smaller floating decor (.calc-col prefix beats later-loaded page CSS) */
.calc-col .mg-float__item--1 { width: 120px; left:-10%;}
.calc-col .mg-float__item--2 { width: 120px; right: -4%; top:0%;}
.calc-col .mg-float__item--3 { width: 140px; right: -15%; bottom: 16%;  }


/* Mobile: smaller map */
.contact-map {
	height: 360px;
}

.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form textarea {
	height: 42px;
	min-height: 42px;
}


/* Mobile: let empty-block text flow without forced line break */
.wd-empty-block-text br { display: none; }

/* Video play button size – same for all video elements on the site */
.wd-el-video .wd-el-video-play-btn { font-size: 50px; }

/* Content takes all free width, but not narrower than 110px */
.mrg .info-box-content {
	flex: 1;
	min-width: 110px;
}

/* Wrap long nickname only when it really overflows */
.mrg .info-box-title {
	overflow-wrap: break-word;
}

.bread-bg .wd-image img {
	min-height:170px;

}

/* Social icons */
.single .wd-social-icons:not(#_) {
	--wd-social-icon-size: 24px;
	gap: 10px; 
}

.moonglow-cat-section .wd-collapsible-content:not(.wd-opened) > .vc_column-inner > .wpb_wrapper::after {
	content: ""; 
	height: 80px;
	background-image: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(253, 244, 249) 30%, rgb(253, 230, 240) 60%, rgb(249, 193, 219) 100%);
}
.moonglow-cat-section .wd-collapsible-content:not(.wd-opened) .wd-collapsible-button {
	bottom: 15px;
}


/* Stretch text block to container width instead of its content width */
.mg-info .info-box-inner {
	align-self: stretch;
	min-width: 0;
}

/* Mobile menu: replace font icons with images */
.mobile-nav .wd-nav-mobile .menu-item-account > a::before {
	content: url(/wp-content/uploads/2026/09/log-icon.svg);
}

.mobile-nav .wd-nav-mobile .menu-item-wishlist > a::before {
	content: url(/wp-content/uploads/2026/09/wishlist-icon.svg);
}


/* Search popup: start below the mobile header so the header icon stays visible */
.wd-search-full-screen:not(#_) {
	margin-top: 40px;
}
/* Show native close button inside the search input on mobile */
.wd-search-full-screen .wd-close-search:not(#_) {
	display: flex;
}

/* Mobile sticky toolbar: replace font icons with custom SVGs */
.wd-toolbar .wd-toolbar-shop .wd-tools-icon { --wd-tools-icon: url(/wp-content/uploads/2026/10/catalog-icon.svg); }
.wd-toolbar .wd-header-wishlist .wd-tools-icon { --wd-tools-icon: url(/wp-content/uploads/2026/10/icon-wishlist.svg); }
.wd-toolbar .wd-header-cart .wd-tools-icon.wd-icon-alt { --wd-tools-icon: url(/wp-content/uploads/2026/10/icon-cosul.svg); }
.wd-toolbar .wd-header-my-account .wd-tools-icon { --wd-tools-icon: url(/wp-content/uploads/2026/10/icon-account.svg); }

/* Same size for all mobile toolbar icons */
.wd-toolbar .wd-tools-element .wd-tools-icon:before {
	content: "";
	width: 16px;
	height: 16px;
	background: var(--wd-tools-icon) center / contain no-repeat;
}
}