/* ============================================================================
   Shop mega menu (inc/features/mega-menu.php) — wholesale v2.1.0
   Same stylesheet as the retail theme's hd-mega.css v1.7.4, plus the
   ".hd-mega__bottom--deals-only" rule (this site has no effect pills, so the
   View Our Deals button sits on the right of the bottom row by itself).
   ----------------------------------------------------------------------------
   The category bar under the header and its panels, as the Kadence Elements
   drew them: the sub-category buttons on the left, "<Category> Products" with
   the six product circles and Shop All on the right, "Shop by desired effect"
   with the effect pills and the red View our DEALS button along the bottom.

   Brand: Montserrat · DM Serif Display (buttons, pills) · teal #025960 ·
   orange #FC9E01 · red #FF0202 (deals) · the sage circle #BED5CF.

   Desktop bar (≥ 1025px): the bar's own typography / colours still come from
   the Customizer (Header → Secondary Navigation) — this file only adds the
   open-item colour, the hit area and the panels. The buttons, pills and the
   two action buttons have no hover state (owner's request); keyboard
   users get the focus ring. ≤ 1024px Kadence shows the mobile
   header instead; the ".hd-mega-m" rules at the end style the module's items
   inside Kadence's drawer (its toggles, borders and fonts stay Kadence's).
   ============================================================================ */

.hd-mega {
	--hdm-teal: #025960;
	--hdm-ink: #113d3c;
	--hdm-orange: #fc9e01;
	--hdm-red: #ff0202;
	--hdm-circle: #bed5cf;
	--hdm-tint: rgba(2, 89, 96, 0.19);
	--hdm-panel: #fff;
	--hdm-shadow: 0 2px 13px rgba(0, 0, 0, 0.1);
	--hdm-font: Montserrat, sans-serif;
	--hdm-serif: "DM Serif Display", serif;
	--hdm-edge: var(--global-content-edge-padding, 24px);
	--hdm-radius: 12px; /* the panel's bottom corners (v1.7.4) */
	--hdm-circle-size: 136px;
	--hdm-circle-gap: 20px;
}

/* --- Positioning context: the panel spans the row's container ------------
   Kadence positions the menu <ul> and every li.menu-item (for its dropdowns);
   both are reset here so the panel is placed against the row's
   .site-container — the full container width, like the element was. */
.site-container:has(.hd-mega) {
	position: relative;
}
.hd-mega .header-menu-container > ul.hd-mega__bar {
	position: static;
	flex-wrap: nowrap;
}
.hd-mega .header-menu-container > ul > li.hd-mega__item {
	position: static;
	margin: 0;
}
@supports not selector(:has(*)) {
	/* no :has(): the bar itself is the context (same width, 24px narrower edges) */
	.hd-mega .header-menu-container > ul.hd-mega__bar {
		position: relative;
	}
	.hd-mega {
		--hdm-edge: 0px;
	}
}
/* Hit area: the link reaches the row's top and bottom edges (the row is
   taller than the text), so the pointer never leaves the item on its way
   down into the panel. Horizontal padding, font and colours: Customizer. */
.hd-mega .header-menu-container > ul > li.menu-item > a.hd-mega__link {
	padding-top: 8px;
	padding-bottom: 8px;
	margin-top: -8px;
	margin-bottom: -8px;
	white-space: nowrap;
	cursor: pointer;
}
.hd-mega .header-menu-container > ul > li.menu-item > a.hd-mega__link:hover,
.hd-mega .header-menu-container > ul > li.menu-item.is-open > a.hd-mega__link,
.hd-mega .header-menu-container > ul > li.menu-item:focus-within > a.hd-mega__link {
	color: var(--hdm-orange);
}
.hd-mega .header-menu-container > ul > li.menu-item.is-current > a.hd-mega__link {
	color: var(--hdm-orange);
}
.hd-mega a:focus-visible,
.hd-mega button:focus-visible {
	outline: 2px solid var(--hdm-orange);
	outline-offset: 2px;
}

/* --- The panel -------------------------------------------------------------- */
.hd-mega__panel {
	position: absolute;
	left: var(--hdm-edge);
	right: var(--hdm-edge);
	top: 100%;
	z-index: 1000;
	background: var(--hdm-panel);
	border-radius: 0 0 var(--hdm-radius) var(--hdm-radius);
	box-shadow: var(--hdm-shadow);
	color: var(--hdm-teal);
	font-family: var(--hdm-font);
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	pointer-events: none;
}
/* An invisible strip above the panel bridges any gap between bar and panel. */
.hd-mega__panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 10px;
}
.hd-mega__item.is-open > .hd-mega__panel,
.hd-mega__item:focus-within > .hd-mega__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
	pointer-events: auto;
}
@media (hover: hover) {
	.hd-mega__item:hover > .hd-mega__panel {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
		pointer-events: auto;
	}
}
/* Escape closes an open panel until the pointer / focus leaves the item. */
.hd-mega__item.is-closed > .hd-mega__panel {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}
.hd-mega__panel *,
.hd-mega__panel *::before,
.hd-mega__panel *::after {
	box-sizing: border-box;
}
.hd-mega__panel :where(ul, p) {
	margin: 0;
	padding: 0;
}
.hd-mega__panel ul {
	list-style: none;
}
.hd-mega__panel a {
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.hd-mega__inner {
	padding: 40px 40px 36px;
}
.hd-mega__top {
	display: grid;
	grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
	gap: 32px;
	align-items: center;
}
.hd-mega__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-top: 32px;
}
/* No effect pills on this site: the deals button alone, on the right. */
.hd-mega__bottom--deals-only {
	justify-content: flex-end;
}

/* Column 1: the sub-category buttons */
.hd-mega__links ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 300px;
}
.hd-mega__btn {
	display: block;
	padding: 5px 16px;
	border-radius: 3px;
	background: var(--hdm-teal);
	color: #fff;
	font-family: var(--hdm-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	text-align: center;
}
.hd-mega__btn:hover,
.hd-mega__btn:focus {
	background: var(--hdm-teal);
	color: #fff;
}

/* Column 2: heading, circles, Shop All */
.hd-mega__products {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	min-width: 0;
}
.hd-mega__title {
	font-family: var(--hdm-font);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--hdm-teal);
	text-align: center;
}
.hd-mega__carousel {
	position: relative;
	width: 100%;
	max-width: calc(5 * var(--hdm-circle-size) + 4 * var(--hdm-circle-gap));
}
.hd-mega__track {
	display: flex;
	gap: var(--hdm-circle-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}
.hd-mega__track::-webkit-scrollbar {
	display: none;
}
.hd-mega__product {
	flex: 0 0 var(--hdm-circle-size);
	width: var(--hdm-circle-size);
	scroll-snap-align: start;
}
.hd-mega__product a {
	position: relative;
	display: block;
	width: var(--hdm-circle-size);
	height: var(--hdm-circle-size);
	border-radius: 50%;
	background: var(--hdm-circle);
	overflow: hidden;
}
.hd-mega__product a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--hdm-tint);
	pointer-events: none;
}
.hd-mega__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	transition: transform 0.25s ease;
}
.hd-mega__product a:hover .hd-mega__img,
.hd-mega__product a:focus-visible .hd-mega__img {
	transform: scale(1);
}
.hd-mega__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 32px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.8);
	color: #000;
	opacity: 0.75;
	cursor: pointer;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
}
.hd-mega__arrow:hover,
.hd-mega__arrow:focus-visible {
	opacity: 1;
	background: #fff;
	color: #000;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.hd-mega__arrow--prev {
	left: -4px;
}
.hd-mega__arrow--next {
	right: -4px;
}
.hd-mega__arrow svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.hd-mega__carousel[data-no-scroll] .hd-mega__arrow {
	display: none;
}
.hd-mega__shop {
	display: inline-block;
	min-width: 200px;
	padding: 7px 17px;
	border-radius: 20px;
	background: var(--hdm-orange);
	color: #fff;
	font-family: var(--hdm-serif);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	text-align: center;
}
.hd-mega__shop:hover,
.hd-mega__shop:focus {
	background: var(--hdm-orange);
	color: #fff;
}

/* Bottom row: effects + deals */
.hd-mega__effects {
	min-width: 0;
}
.hd-mega__subtitle {
	font-family: var(--hdm-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--hdm-teal);
	margin-bottom: 16px;
}
.hd-mega__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
}
.hd-mega__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--hdm-teal);
	color: #fff;
	font-family: var(--hdm-serif);
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}
.hd-mega__pill:hover,
.hd-mega__pill:focus {
	background: var(--hdm-teal);
	color: #fff;
}
.hd-mega__pill-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	fill: currentColor;
}
.hd-mega__deals {
	flex: 0 0 auto;
}
.hd-mega__deals-btn {
	display: inline-block;
	min-width: 200px;
	padding: 7px 17px;
	border-radius: 20px;
	background: var(--hdm-red);
	color: #fff;
	font-family: var(--hdm-serif);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	text-align: center;
	white-space: nowrap;
}
.hd-mega__deals-btn:hover,
.hd-mega__deals-btn:focus {
	background: var(--hdm-red);
	color: #fff;
}

/* Narrow desktops (1025–1200px): tighter grid, buttons full width */
@media (max-width: 1200px) {
	.hd-mega__top {
		grid-template-columns: minmax(200px, 1fr) minmax(0, 2.4fr);
		gap: 24px;
	}
	.hd-mega__title {
		font-size: 28px;
	}
	.hd-mega__btn {
		font-size: 17px;
	}
}

/* ============================================================================
   Inside Kadence's mobile drawer (≤ 1024px): the module's items
   ============================================================================ */
#mobile-drawer .hd-mega-m__products {
	border-bottom: 1px solid var(--global-palette1, #025960);
}
#mobile-drawer .hd-mega-m__scroll {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 10px 8px 12px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
#mobile-drawer .hd-mega-m__scroll::-webkit-scrollbar {
	display: none;
}
#mobile-drawer .hd-mega-m__scroll li {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: start;
}
#mobile-drawer .hd-mega-m__product {
	position: relative;
	display: block;
	width: 72px;
	height: 72px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #bed5cf;
	overflow: hidden;
}
#mobile-drawer .hd-mega-m__product::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(2, 89, 96, 0.19);
	pointer-events: none;
}
#mobile-drawer .hd-mega-m__product img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#mobile-drawer .hd-mega-m__shop {
	padding: 12px 8px 16px;
	border-bottom: 1px solid var(--global-palette1, #025960);
}
#mobile-drawer .hd-mega-m__shop-btn {
	display: inline-block;
	width: auto;
	padding: 9px 24px;
	border: 0;
	border-radius: 999px;
	background: #fc9e01;
	color: #fff;
	font-family: "DM Serif Display", serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}
#mobile-drawer .hd-mega-m__shop-btn:hover,
#mobile-drawer .hd-mega-m__shop-btn:focus {
	background: #fc9e01;
	color: #fff;
}
#mobile-drawer .hd-mega-m__fx a {
	display: flex;
	align-items: center;
	gap: 10px;
}
#mobile-drawer .hd-mega-m__icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.hd-mega__panel,
	.hd-mega__panel a,
	.hd-mega__img {
		transition: none;
	}
	.hd-mega__track,
	#mobile-drawer .hd-mega-m__scroll {
		scroll-behavior: auto;
	}
}