/* Mega Menu Image Section */
.main-navigation ul.menu ul li.menu-item-image {
    text-align: center;
    padding: 10px;
}

/* Image */
.main-navigation ul.menu ul li.menu-item-image img {
    display: block;
    width: 100%;
    border-radius: 8px;
    margin-bottom: 14px;
}

/* Wrapper */
.main-navigation ul.menu ul li.menu-item-image .menu-image-label {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Blog post label */
.main-navigation ul.menu ul li.menu-item-image .menu-image-tag {
    display: block;
    font-size: clamp(0.625rem,0.5615rem + 0.2033vw,0.6875rem);
    font-weight: 300;
    color: var(--nn-color-gray-text, #434343);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* Main title */
.main-navigation ul.menu ul li.menu-item-image .menu-image-title {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: var(--nn-color-gray-dark-text-alt, #231f20);
    margin-bottom: 4px;
}

/* Sub text */
.main-navigation ul.menu ul li.menu-item-image .menu-image-sub {
    display: block;
    font-size: clamp(0.6875rem,0.625rem + 0.25vw,0.75rem);
    font-weight: 300;
    color: var(--nn-color-gray-text, #434343);
}

/* Active/Current Menu Item Styling */
/* Show underline for current menu item (page you're on) - only the actual current page, not ancestors */
.menu-primary-menu-container > ul > li.current-menu-item > a span:before {
    transform: scale(1, 1);
    transform-origin: left center;
}

/* Ensure underline stays visible on hover for current items */
.menu-primary-menu-container > ul > li.current-menu-item:hover > a span:before {
    transform: scale(1, 1);
    transform-origin: left center;
}

/* Secondary Navigation - Active/Current Menu Item Styling */
@media (min-width: 993px) {
    /* Show underline for current menu item in secondary navigation.
       Direct child of .menu only so dropdown items (e.g. language switcher) don't get it. */
    .secondary-navigation .menu > li.current-menu-item > a:after,
    .secondary-navigation .menu > li.current_page_item > a:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0.875em;
        right: 0.875em;
        height: 1px;
        background-color: var(--nn-color-gray-lighter-medium, #ccc);
        transform: scale(1, 1);
    }

    /* Ensure underline stays visible on hover for current items */
    .secondary-navigation .menu > li.current-menu-item:hover > a:after,
    .secondary-navigation .menu > li.current_page_item:hover > a:after {
        transform: scale(1, 1);
    }
}

.wdr-od-message {
    font-size: clamp(0.75rem,0.623rem + 0.4065vw,0.875rem);
    margin-bottom: 0.25rem;
    color: var(--nn-color-gray-text-medium, #434343);
}

ul.products li.product .price {
    margin-bottom:0;
}
  
.menu-toggle {
	border-width: 0 !important;
}

.form-wppp-select.products-per-page{
    margin-right: 10px;
}
.form-wppp-select.products-per-page select{
    border: unset;
    box-shadow: unset;
}
.stock.in-stock{
    display: none;
}

ul.products li.product .price {
    font-weight: 400;
}

.cgkit-as-variation-price {
    padding-bottom: 0.75rem;
}
@media (max-width: 992px) {
    .mobile-filter.shoptimizer-mobile-toggle {
        margin-left: unset;
        width: 100%;
    }
    .form-wppp-select.products-per-page {
        margin-right: -50px;
    }
    .form-wppp-select.products-per-page select {
        width: 100%;
        padding: 0;
    }
}
/* Polylang language switcher in the secondary nav.
   Parent theme hides .secondary-navigation .sub-menu with no reveal rule,
   so we surface it on hover and via the .pll-open class toggled by JS. */
@media ( min-width: 993px ) {
	.secondary-navigation .pll-parent-menu-item.pll-open > .sub-menu,
	.secondary-navigation .pll-parent-menu-item:hover > .sub-menu {
		display: block;
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 100;
		min-width: 160px;
		background: #fff;
		border: 1px solid #eee;
		box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.08 );
	}
	.secondary-navigation .pll-parent-menu-item .sub-menu .menu-item {
		display: block;
		padding: 0;
		border: 0;
	}
	/* Higher specificity than .secondary-navigation .menu li:not(.ri) a
	   (which the parent theme uses to push the icon to top via padding-top:35px).
	   Vertical padding is uniform on every item so the .current-lang highlight
	   fills the whole slot — no separate li margin (which would leave a gap
	   the highlight can't cover). */
	.secondary-navigation .pll-parent-menu-item .sub-menu .menu-item a {
		padding: 8px 14px;
	}
	/* Highlight the currently selected language. .current-lang is added by
	   Polylang to the active language item — more reliable than current_page_item. */
	.secondary-navigation .pll-parent-menu-item .sub-menu .current-lang > a {
		font-weight: 600;
		background: #f5f5f5;
	}
	/* Parent globe icon sits in .icon-wrapper (absolutely positioned at top of
	   <a>) so it lines up with sibling SVG icons. Matches the 28px sizing the
	   per-language flag used before the globe replaced it.
	   max-width override: parent theme applies `max-width: 100%` to <img>
	   globally, which clamps the SVG's width to .icon-wrapper's intrinsic size
	   (~21.5px) while leaving height untouched — squashing the aspect ratio. */
	.secondary-navigation .pll-parent-menu-item .icon-wrapper img {
		width: 28px;
		height: 28px;
		max-width: none;
		display: block;
	}
	.secondary-navigation .pll-parent-menu-item .sub-menu a span {
		vertical-align: middle;
	}
}

.secondary-wrapper .filters.close-drawer {
	display: none;
}

/* Mobile language switcher (rendered after .shoptimizer-cart in .main-header).
   Desktop uses the version inside .secondary-navigation, so hide there. */
.pll-mobile-switcher {
	display: none;
}
@media (max-width: 992px) {
	/* Parent theme uses absolute positioning for header icons. Two layouts:
	   - 3 icons (Polylang active): search → my-account → cart → language
	   - 2 icons (no Polylang):     search → my-account → cart
	   The :has() rules only fire when .pll-mobile-switcher exists in the DOM,
	   so sites without Polylang keep the parent's tighter 2-icon spacing. */
	.pll-mobile-switcher {
		display: flex;
		align-items: center;
		position: absolute;
		top: 0;
		right: 20px;
		height: 100%;
		z-index: 2;
	}
	.main-header:has( .pll-mobile-switcher ) .shoptimizer-myaccount {
		right: 100px;
	}
	.main-header:has( .pll-mobile-switcher ) button.mobile-search-toggle.with-myaccount-icon {
		right: 140px;
	}
	/* Nudge cart down to vertically center against the 75px-tall mobile branding
	   row. Specificity boost: parent theme prints .main-header .site-header-cart
	   (0,2,0) inline in <head>, after our stylesheet — equal specificity loses
	   on source order. .site-header .main-header .site-header-cart (0,3,0) wins. */
	.site-header .main-header .site-header-cart {
		top: calc(-14px + 75px / 2);
	}
	.site-header .main-header .site-header-cart {
		right: 20px;
	}
	/* With Polylang active, the language switcher sits at right:20px, so push
	   the cart left to make room for it on its right. 60/100/140 gives equal
	   40px right-value intervals across cart → my-account → search. */
	.site-header .main-header:has( .pll-mobile-switcher ) .site-header-cart {
		right: 60px;
	}
	/* Shrink the basket-mode cart icon (parent default 28x28). */
	.shoptimizer-cart a.cart-contents .count {
		min-width: 22px;
		height: 22px;
		font-size: 10px;
		line-height: 18px;
	}
	.shoptimizer-cart a.cart-contents .count:after {
		width: 13px;
		height: 5px;
	}
	/* Specificity boost: Elementor's .elementor-kit-6 button (0,1,1) and
	   :hover/:focus (0,2,1) would otherwise paint a green/white pill here.
	   Width tuned to roughly match the cart/account/search icons so the gaps
	   between all four header icons read as even. */
	.pll-mobile-switcher button.pll-mobile-switcher__trigger,
	.pll-mobile-switcher button.pll-mobile-switcher__trigger:hover,
	.pll-mobile-switcher button.pll-mobile-switcher__trigger:focus {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 24px;
		height: 32px;
		padding: 0;
		background-color: transparent;
		border: 0;
		border-radius: 0;
		color: #111;
		font-family: inherit;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		cursor: pointer;
		line-height: 1;
	}
	/* Dropdown anchored to the trigger's right edge — same 20px margin from
	   viewport as the trigger itself, so it can't push past the right edge
	   and cause horizontal overflow on small screens. */
	.pll-mobile-switcher__dropdown {
		display: none;
		position: absolute;
		top: calc(100% + 4px);
		right: 0;
		z-index: 100;
		min-width: 160px;
		margin: 0;
		list-style: none;
		background: #fff;
		border: 0;
		border-radius: 4px;
		box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.1 );
	}
	.pll-mobile-switcher.pll-open > .pll-mobile-switcher__dropdown {
		display: block;
	}
	.pll-mobile-switcher__item {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.pll-mobile-switcher__item a {
		display: block;
		padding: 12px 16px;
		color: #111;
		font-size: 14px;
		text-decoration: none;
		white-space: nowrap;
		background: #fff;
	}
	.pll-mobile-switcher__item.current-lang > a {
		font-weight: 600;
		background: #f5f5f5;
	}
}
/* Tall mega-menu flyouts scroll instead of overflowing the viewport.
   Product columns (Skin Care ~30, Vitality ~28) exceed screen height on
   shorter viewports, cutting off lower items with no way to reach them.
   The max-height here is a safe fallback; mega-menu-scroll.js refines it per
   panel from its live top offset (the top promo bar / sticky header changes
   where the panel starts, so a single fixed reservation can't be right). */
   @media (min-width: 993px) {
    .main-navigation .sub-menu-wrapper > .container > ul.sub-menu {
        max-height: calc(100vh - 220px); /* fallback; JS overrides with exact value */
        overflow-y: auto;
        overscroll-behavior: contain;    /* don't scroll the page behind it */
        scrollbar-gutter: stable;        /* reserve scrollbar space so content doesn't shift */
    }

    /* Only the outermost panel scrolls; nested inline column lists (the
       per-category product columns inside the Shop mega menu) flow at natural
       height so the whole panel scrolls as one unit, not each column on its own. */
    .main-navigation .sub-menu-wrapper .sub-menu-wrapper > .container > ul.sub-menu {
        max-height: none;
        overflow: visible;
    }

    /* Slim, on-brand scrollbar */
    .main-navigation .sub-menu-wrapper > .container > ul.sub-menu {
        scrollbar-width: thin;
        scrollbar-color: var(--nn-color-gray-lighter-medium, #ccc) transparent;
    }
    .main-navigation .sub-menu-wrapper > .container > ul.sub-menu::-webkit-scrollbar {
        width: 6px;
    }
    .main-navigation .sub-menu-wrapper > .container > ul.sub-menu::-webkit-scrollbar-thumb {
        background: var(--nn-color-gray-lighter-medium, #ccc);
        border-radius: 3px;
    }

    /* Flat list in a full-width mega menu (menu item classes "full-width nn-flat-columns"):
       direct children flow down 5 columns instead of one flex column each.
       A height-capped multicol list overflows sideways, so the .container scrolls
       here instead of the ul (mega-menu-scroll.js caps the same element). */
    .main-navigation ul li.full-width.nn-flat-columns > .sub-menu-wrapper > .container {
        max-height: calc(100vh - 220px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: var(--nn-color-gray-lighter-medium, #ccc) transparent;
    }
    .main-navigation ul li.full-width.nn-flat-columns > .sub-menu-wrapper > .container > ul.sub-menu {
        display: block;
        max-height: none;
        overflow: visible;
        column-count: 5;
        column-gap: 0;
        column-rule: 1px solid #eee;
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
    }
    .main-navigation ul li.full-width.nn-flat-columns > .sub-menu-wrapper > .container > ul.sub-menu > li {
        display: block;
        width: auto;
        border: 0;
        break-inside: avoid;
    }
}
/* Primary nav "More" overflow (nav-more.js) */
#site-navigation ul.menu > li.nn-nav-more {
	display: none;
}

@media (min-width: 993px) {
	/* Before the first layout pass: one clipped line, never a wrapped menu */
	#site-navigation:not(.nn-nav-ready) {
		min-width: 0;
		overflow: hidden;
	}
	#site-navigation:not(.nn-nav-ready) ul.menu {
		white-space: nowrap;
	}

	#site-navigation ul.menu > li.nn-nav-moved {
		display: none;
	}
	#site-navigation ul.menu > li.nn-nav-more.nn-nav-more--shown {
		display: inline-block;
	}
	#site-navigation .nn-nav-more__trigger {
		cursor: pointer;
	}

	/* Current page moved into "More" */
	#site-navigation .menu-primary-menu-container > ul > li.nn-nav-more--active > a span:before {
		transform: scale(1, 1);
		transform-origin: left center;
	}

	/* Opens on hover or Enter/click, not just because the trigger has focus */
	#site-navigation ul.menu > li.nn-nav-more:not(.nn-nav-more--open):not(.visible) > .sub-menu-wrapper {
		visibility: hidden;
		opacity: 0;
		transform: scale(0.8);
	}
	#site-navigation ul.menu > li.nn-nav-more.nn-nav-more--open > .sub-menu-wrapper,
	#site-navigation ul.menu > li.nn-nav-more.visible > .sub-menu-wrapper {
		display: block;
		visibility: visible;
		z-index: 30;
		opacity: 1;
		transform: scale(1);
	}

	/* Right-aligned so the panel stays on screen */
	#site-navigation ul.menu > li.nn-nav-more > .sub-menu-wrapper > .container > ul.sub-menu {
		left: auto;
		right: 0;
	}

	#site-navigation li.nn-nav-more__entry[hidden] {
		display: none;
	}
	#site-navigation .nn-nav-more__label {
		display: block;
		padding: 0.3em 0.8em;
	}
	#site-navigation .nn-nav-more__heading > a,
	#site-navigation .nn-nav-more__heading > .nn-nav-more__label {
		font-weight: 600;
	}
	#site-navigation .nn-nav-more__child > a.sub-menu-link {
		padding-left: 1.6em;
	}
	#site-navigation li.nn-nav-more__entry:not([hidden]) ~ li.nn-nav-more__heading,
	#site-navigation li.nn-nav-more__child + li.nn-nav-more__item {
		margin-top: 0.6em;
	}
}