/* 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 flag sits in .icon-wrapper (absolutely positioned at top of <a>)
	   so it lines up with sibling SVG icons. !important required: Polylang
	   stamps inline width/height on the <img>. The SVGs are already round
	   (circle-flags), so no border-radius/object-fit needed. */
	.secondary-navigation .pll-parent-menu-item .icon-wrapper img {
		width: 28px !important;
		height: 28px !important;
		display: block;
	}
	.secondary-navigation .pll-parent-menu-item .sub-menu img {
		display: inline-block;
		width: 18px !important;
		height: 18px !important;
		vertical-align: middle;
	}
	.secondary-navigation .pll-parent-menu-item .sub-menu a span {
		margin-left: 0.7em;
		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 → language → cart
	   - 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: 55px;
		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, and 5px further inward from the edge to match the new spacing.
	   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;
	}
	/* 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. */
	.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: 32px;
		height: 32px;
		padding: 0 6px;
		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;
	}
	.pll-mobile-switcher__trigger img {
		display: block;
		width: 20px;
		height: 20px;
	}
	.pll-mobile-switcher__dropdown {
		display: none;
		position: absolute;
		top: calc(100% + 4px);
		right: -50px;
		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: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 16px;
		color: #111;
		font-size: 14px;
		text-decoration: none;
		white-space: nowrap;
		background: #fff;
	}
	.pll-mobile-switcher__item a img {
		display: block;
		width: 20px;
		height: 20px;
		flex-shrink: 0;
	}
	.pll-mobile-switcher__item.current-lang > a {
		font-weight: 600;
		background: #f5f5f5;
	}
}