/* ==========================================================================
   Atlas Sport — redesigned header
   Paired with atlas-header.php / atlas-header.js
   Mobile-first. Desktop layout kicks in at 993px, matching the theme.
   ========================================================================== */

.atlas-hd,
.atlas-hd *,
.atlas-hd *::before,
.atlas-hd *::after { box-sizing: border-box; }

.atlas-hd {
	--hd-green-dark: #0f5c30;
	--hd-green: #4caf3f;
	--hd-green-mid: #16653a;
	--hd-lime: #7ac943;
	--hd-ink: #21372a;
	--hd-muted: #9aa79c;
	--hd-chip: #f4f6f2;
	--hd-hairline: #eceee9;

	position: relative;
	width: 100%;
	background: #fff;
	color: var(--hd-ink);
	font-family: 'Open Sans', Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.atlas-hd a { color: inherit; text-decoration: none; }
.atlas-hd ul { margin: 0; padding: 0; list-style: none; }
.atlas-hd li::before { content: none !important; }
.atlas-hd__svg { display: block; width: 100%; height: 100%; }

/* --- utility strip (desktop only) --------------------------------------- */

.atlas-hd__utility { display: none; }

/* --- brand band --------------------------------------------------------- */

.atlas-hd__brandband {
	position: relative;
	/* No overflow:hidden here — it would clip the live-search dropdown that
	   hangs below the band. The hero photo is clipped by .atlas-hd__heroclip. */
	background: #fff;
	padding: 14px 20px 18px;
	z-index: 5; /* results dropdown paints above the nav bar below */
}

/* Hero photo and its wedge are a desktop-only flourish. */
.atlas-hd__heroclip,
.atlas-hd__hero,
.atlas-hd__wedge { display: none; }

.atlas-hd__brandinner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.atlas-hd__logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 0;
	flex: 1;
}
.atlas-hd__logo img { display: block; width: 100%; max-width: 330px; height: auto; }
.atlas-hd__tagline {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .075em;
	text-align: center;
	color: #2f7d34;
}

/* Logo + burger sit on one row; the row is created by the flex parent below. */
.atlas-hd__brandinner { align-items: stretch; }
.atlas-hd__brandinner > .atlas-hd__logo,
.atlas-hd__brandinner > .atlas-hd__burger {
	/* wrapped visually via order + the mobilerow below */
}

.atlas-hd__burger {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: #fff;
	color: #1a1a1a;
	cursor: pointer;
}
.atlas-hd__burger .atlas-hd__svg { width: 24px; height: 24px; }
.atlas-hd__burger--sticky { position: static; width: 44px; height: 44px; border-radius: 12px; }
.atlas-hd__burger--sticky .atlas-hd__svg { width: 21px; height: 21px; }

/* --- search ------------------------------------------------------------- */

.atlas-hd__search {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 12px 16px 12px 14px;
	border: 1px solid #e6eae1;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(24, 60, 32, .07);
}
.atlas-hd__searchicon { display: flex; flex: 0 0 auto; width: 21px; height: 21px; color: var(--hd-muted); }
.atlas-hd__search input[type="search"] {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.3;
	color: #3c4a41;
	text-overflow: ellipsis;
	-webkit-appearance: none;
	appearance: none;
}
.atlas-hd__search input:focus { outline: none; }
.atlas-hd__search input::placeholder { color: var(--hd-muted); opacity: 1; }
.atlas-hd__search input::-webkit-search-cancel-button { display: none; }

/* Live-search results dropdown (populated by atlas-header.js from the
   WooCommerce Store API once 3+ characters are typed). */
.atlas-hd__search { position: relative; }
.atlas-hd__results {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	z-index: 80;
	max-height: 430px;
	overflow-y: auto;
	padding: 8px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 48px rgba(24, 60, 32, .2);
}
.atlas-hd__results[hidden] { display: none; }
.atlas-hd__result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 500;
	color: var(--hd-ink) !important;
}
.atlas-hd__result:hover { background: #f4f6f2; color: #2f7d34 !important; }
.atlas-hd__result img {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
	background: #f2f5ef;
}
.atlas-hd__noresult { padding: 14px; font-size: 15px; color: var(--hd-muted); }
.atlas-hd__resultsall {
	display: block;
	margin-top: 6px;
	padding: 11px 10px;
	border-top: 1px solid var(--hd-hairline);
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: #2f7d34 !important;
}

.atlas-hd__search--desktop { display: none; }

/* Search + quote chip share the row 50/50 on phones. */
.atlas-hd__mobilerow { display: flex; align-items: center; gap: 10px; }
.atlas-hd__mobilerow > * { flex: 1 1 0; min-width: 0; }

/* --- quote-list chip ---------------------------------------------------- */

.atlas-hd__quote {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 7px 7px 7px 16px;
	border: 1px solid #e6eae1;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(24, 60, 32, .07);
}
.atlas-hd__quoteglyph { display: flex; flex: 0 0 auto; width: 21px; height: 21px; color: var(--hd-ink); }
.atlas-hd__quotelabel {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--hd-ink);
}
.atlas-hd__quotecount {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--hd-lime);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}
.atlas-hd__quote--desktop,
.atlas-hd__quote--sticky { display: none; }

/* Icon-only variant, used in the sticky bar on phones. */
.atlas-hd__quoteicon {
	position: relative;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--hd-chip);
	color: var(--hd-ink);
}
.atlas-hd__quoteicon .atlas-hd__svg { width: 21px; height: 21px; }
.atlas-hd__quotedot {
	position: absolute;
	top: -2px;
	right: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--hd-lime);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

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

.atlas-hd__nav { display: none; }

.atlas-hd__mobilenav {
	background: #fff;
	border-top: 1px solid var(--hd-hairline);
	padding: 0 20px 8px;
}
.atlas-hd__mobilenav[hidden] { display: none; }
.atlas-hd__mobilenav .atlas-hd__navlist { display: flex; flex-direction: column; }
.atlas-hd__mobilenav .menu-item { margin: 0; }
.atlas-hd__mobilenav .menu-item > a {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 22px 0;
	border-bottom: 1px solid #f0f2ed;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--hd-ink);
}
/* Chevron on every mobile row, drawn in CSS so no extra markup is needed.
   Leaves point right (a link); parents point down and flip up when open. */
.atlas-hd__mobilenav .menu-item > a::after {
	content: '';
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-right: 2px solid #9aab9f;
	border-bottom: 2px solid #9aab9f;
	transform: rotate(-45deg);
	transition: transform .2s ease;
}
.atlas-hd__mobilenav .menu-item-has-children > a::after { transform: rotate(45deg); border-color: var(--hd-green-mid); }
.atlas-hd__mobilenav .menu-item-has-children.is-open > a::after { transform: rotate(225deg); }

/* Sub-menus collapse until their parent row is tapped open (JS toggles is-open). */
.atlas-hd__mobilenav .sub-menu { display: none; padding-left: 12px; }
.atlas-hd__mobilenav .menu-item.is-open > .sub-menu { display: block; }
.atlas-hd__mobilenav .sub-menu .menu-item > a { padding: 16px 0; font-weight: 500; font-size: 15px; }
.atlas-hd__mobilenav .sub-menu .sub-menu { padding-left: 14px; }

/* --- mobile footer: phone + social icons -------------------------------- */
.atlas-hd__mobilefoot { padding: 20px 0 10px; }
.atlas-hd__mobilephone {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 6px 0 16px;
	font-size: 20px;
	font-weight: 800;
	color: var(--hd-green-dark);
}
.atlas-hd__mobilephone .atlas-hd__phoneicon { display: flex; flex: 0 0 auto; width: 28px; height: 28px; color: var(--hd-green-mid); }
.atlas-hd__mobilephone .telbianca { color: var(--hd-green-dark) !important; text-decoration: none; }
.atlas-hd__mobilesocials { display: flex; gap: 12px; }
.atlas-hd__mobilesocials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: #f2f5ef;
	color: var(--hd-green-mid);
}
.atlas-hd__mobilesocials .atlas-hd__svg { width: 23px; height: 23px; }

/* The parent theme's mega-menu walker injects each category's DESCRIPTION into
   the menu link as <div class="icon-wrapper"><p>…</p></div>. We only want the
   name + thumbnail here, so drop those description blocks. */
.atlas-hd .icon-wrapper { display: none !important; }

/* --- category thumbnails ------------------------------------------------
   atlas_menu_category_thumb() (functions.php) injects a <span.atlas-cat-thumb>
   with the category image into every product_cat menu item. The theme's own
   rules for it are scoped to the parent-theme menu markup, so restyle it here
   as a small rounded tile that works in this header's dropdowns and mobile
   rows. */
.atlas-hd .atlas-cat-thumb {
	display: inline-flex;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	overflow: hidden;
	background: #f2f5ef;
}
.atlas-hd .atlas-cat-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- sticky bar --------------------------------------------------------- */

.atlas-hd__sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 66px;
	padding: 0 16px;
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: saturate(150%) blur(8px);
	backdrop-filter: saturate(150%) blur(8px);
	border-bottom: 1px solid #e6e8e3;
	box-shadow: 0 6px 20px rgba(24, 60, 32, .08);
	transform: translateY(-100%);
	opacity: 0;
	/* Slide + fade together, with a slight ease-out so it settles rather than
	   snapping. Only transform/opacity animate, so this stays on the compositor. */
	transition: transform .32s cubic-bezier(.22, .61, .36, 1),
		opacity .22s ease;
	will-change: transform;
	pointer-events: none;
}
.atlas-hd__sticky.is-pinned {
	transform: none;
	opacity: 1;
	pointer-events: auto;
}
.atlas-hd__stickylogo { display: block; flex: 0 0 auto; width: 150px; }
.atlas-hd__stickylogo img { display: block; width: 100%; height: auto; }
.atlas-hd__sticky .atlas-hd__navlist { display: none; }
.atlas-hd__stickyright { display: flex; align-items: center; gap: 16px; margin-left: auto; flex: 0 0 auto; }

.atlas-hd__iconbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hd-chip);
	color: var(--hd-ink);
	cursor: pointer;
	flex: 0 0 auto;
}
.atlas-hd__iconbtn .atlas-hd__svg { width: 20px; height: 20px; }
.atlas-hd__iconbtn:hover { background: #eaeee6; }

.atlas-hd__sticky .atlas-hd__quoteicon { display: flex; }

.atlas-hd__stickysearch {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 14px 16px;
	background: rgba(255, 255, 255, .98);
	border-bottom: 1px solid #e6e8e3;
	box-shadow: 0 10px 24px rgba(24, 60, 32, .10);
}
.atlas-hd__stickysearch[hidden] { display: none; }
.atlas-hd__stickysearch .atlas-hd__search--desktop { display: flex; }

/* No padding compensation on purpose: adding it the moment the bar pins shoved
   the whole page down by the bar's height in one frame, which was the jump you
   felt. The bar only pins after the header has scrolled away, so it simply
   overlays the page like any sticky header. */

/* ==========================================================================
   Desktop (≥993px)
   ========================================================================== */

@media (min-width: 993px) {

	/* --- utility strip --- */
	.atlas-hd__utility {
		display: flex;
		align-items: stretch;
		height: 66px;
		background: linear-gradient(90deg, #f2f7ee 0%, #eef5e9 100%);
	}
	.atlas-hd__utilityleft {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 40px;
		min-width: 0;
		padding-left: 40px;
	}
	.atlas-hd__socials { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
	.atlas-hd__socials a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 21px;
		height: 21px;
		color: var(--hd-green-mid);
		transition: color .16s ease;
	}
	.atlas-hd__socials a:hover { color: var(--hd-green); }

	.atlas-hd__perks { display: flex; align-items: center; gap: 40px; min-width: 0; }
	.atlas-hd__perks li {
		display: flex;
		align-items: center;
		gap: 11px;
		margin: 0;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.2;
		white-space: nowrap;
		color: #274b33;
	}
	.atlas-hd__perkicon { display: flex; flex: 0 0 auto; width: 25px; height: 25px; color: var(--hd-green-mid); }

	.atlas-hd__phone {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 0 32px;
		background: var(--hd-green-dark);
		color: #fff;
		flex: 0 0 auto;
	}
	.atlas-hd__phoneicon { display: flex; flex: 0 0 auto; width: 32px; height: 32px; opacity: .95; }
	.atlas-hd__phonetext { display: flex; flex-direction: column; gap: 2px; }
	.atlas-hd__phonetext strong,
	.atlas-hd__phonenum { font-size: 21px; font-weight: 800; line-height: 1; letter-spacing: .005em; color: #fff !important; text-decoration: none; }
	.atlas-hd__phonenum:empty { min-height: 21px; }
	.atlas-hd__phonetext span { font-size: 13px; font-weight: 400; line-height: 1; color: #c9e3d0; }

	.atlas-hd__offer {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 0 34px;
		background: var(--hd-green);
		color: #fff !important; /* beat the theme's global a:hover orange */
		font-size: 19px;
		font-weight: 700;
		white-space: nowrap;
		flex: 0 0 auto;
		transition: background-color .16s ease;
	}
	.atlas-hd__offer:hover { background: #45a239; color: #fff !important; }
	.atlas-hd__offericon { display: flex; flex: 0 0 auto; width: 27px; height: 27px; }
	.atlas-hd__offerarrow { display: flex; flex: 0 0 auto; width: 25px; height: 25px; margin-left: 6px; }

	/* --- brand band --- */
	.atlas-hd__brandband { height: 166px; padding: 0; }

	.atlas-hd__heroclip {
		display: block;
		position: absolute;
		inset: 0;
		overflow: hidden;
		/* The banner is set as a background here (from an inline style) so it
		   always renders; #f4f9f0 shows through wherever the photo does not. */
		background-color: #f4f9f0;
		background-repeat: no-repeat;
		background-size: cover;
		/* Anchor to the bottom edge so the band shows the playground and lawn
		   rather than the empty sky above them. */
		background-position: 50% 100%;
	}
	/* width + translateX are set inline from ATLAS_HEADER_HERO_ZOOM / _X. */
	.atlas-hd__heroshift {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
	}
	.atlas-hd__hero {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* Match the background layer: clip to the bottom of the photo. */
		object-position: 50% 100%;
	}
	.atlas-hd__wedge {
		display: block;
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(103deg,
			#f4f9f0 0%,
			#f4f9f0 26%,
			rgba(244, 249, 240, .94) 33%,
			rgba(244, 249, 240, 0) 48%);
	}

	.atlas-hd__brandinner {
		flex-direction: row;
		align-items: center;
		gap: 0;
		height: 100%;
		padding: 0 40px;
		pointer-events: none;
	}
	.atlas-hd__logo {
		width: 520px;
		max-width: 46%;
		flex: 0 0 auto;
		pointer-events: auto;
	}
	.atlas-hd__logo img { max-width: none; }
	.atlas-hd__tagline { font-size: 14px; margin-top: -2px; white-space: nowrap; }

	.atlas-hd__burger,
	.atlas-hd__mobilerow,
	.atlas-hd__mobilenav { display: none !important; }

	.atlas-hd__search--desktop {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		max-width: 380px;
		margin-left: 48px;
		gap: 12px;
		padding: 13px 18px 13px 24px;
		border: 0;
		box-shadow: 0 14px 40px rgba(24, 60, 32, .16);
		pointer-events: auto;
	}
	.atlas-hd__search--desktop .atlas-hd__searchicon { width: 22px; height: 22px; }
	.atlas-hd__search--desktop input[type="search"] { font-size: 15px; }
}

@media (min-width: 993px) {

	/* --- main nav --- */
	.atlas-hd__nav {
		display: flex;
		align-items: center;
		height: 80px;
		padding: 0 40px;
		background: #fff;
		border-top: 1px solid var(--hd-hairline);
		box-shadow: 0 1px 0 #e6e8e3;
	}
	.atlas-hd__nav .atlas-hd__navlist {
		display: flex;
		align-items: center;
		gap: 32px;
		min-width: 0;
	}
	.atlas-hd__nav .menu-item { margin: 0; flex: 0 0 auto; }
	.atlas-hd__nav .menu-item > a {
		display: flex;
		align-items: center;
		gap: 7px;
		padding: 8px 0;
		font-size: 20px;
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
		color: var(--hd-ink);
		transition: color .16s ease;
	}
	.atlas-hd__nav .menu-item > a:hover { color: #2f7d34; }
	/* Caret only on items that actually have children. */
	.atlas-hd__nav .menu-item-has-children > a::after {
		content: '';
		flex: 0 0 auto;
		width: 8px;
		height: 8px;
		margin-bottom: 3px;
		border-right: 2px solid #3f5546;
		border-bottom: 2px solid #3f5546;
		transform: rotate(45deg);
	}

	/* Dropdowns */
	.atlas-hd__nav .menu-item-has-children { position: relative; }
	.atlas-hd__nav .sub-menu {
		position: absolute;
		top: 100%;
		left: -14px;
		z-index: 40;
		min-width: 260px;
		padding: 10px 0;
		background: #fff;
		border-radius: 14px;
		box-shadow: 0 18px 40px rgba(24, 60, 32, .16);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .16s ease, transform .16s ease, visibility .16s;
	}
	/* Dropdowns open on CLICK (JS toggles is-open) — hover-open caused panels
	   to pop up whenever scrolling slid the nav under a stationary cursor. */
	.atlas-hd__nav .menu-item-has-children.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	/* Caret flips while its panel is open. */
	.atlas-hd__nav .menu-item-has-children.is-open > a::after,
	.atlas-hd__sticky .menu-item-has-children.is-open > a::after {
		transform: rotate(225deg);
		margin-bottom: -2px;
	}
	.atlas-hd__nav .sub-menu a {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 11px 20px;
		font-size: 16px;
		font-weight: 500;
		color: var(--hd-ink);
	}
	.atlas-hd__nav .sub-menu a:hover { background: #f4f6f2; color: #2f7d34; }

	/* Product-category dropdown: two columns so a long category list stays a
	   compact panel rather than a very tall single column. */
	.atlas-hd__nav .atlas-hd__catmenu {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2px 6px;
		min-width: 540px;
		padding: 12px;
	}
	.atlas-hd__nav .atlas-hd__catmenu a { padding: 9px 12px; border-radius: 10px; }

	/* ---- Mega-menu: a top-level dropdown that itself contains sub-menus lays
	   its direct children out as columns; the nested sub-menus become static
	   lists inside each column (matching the old Produse mega-menu). ---- */
	.atlas-hd__nav .atlas-hd__navlist > .menu-item-has-children > .sub-menu {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 10px 34px;
		left: -14px;
		/* A fixed wide band (not shrink-to-fit): columns stretch to fill it. */
		width: min(1400px, 95vw);
		max-width: none;
		padding: 30px 38px;
	}
	/* Each column stretches so the panel reads full-width. */
	.atlas-hd__nav .atlas-hd__navlist > .menu-item-has-children > .sub-menu > .menu-item,
	.atlas-hd__sticky .atlas-hd__navlist > .menu-item-has-children > .sub-menu > .menu-item {
		flex: 1 1 0;
		min-width: 172px;
	}
	/* …except the featured-product column, which keeps its card width. */
	.atlas-hd__nav .atlas-hd__navlist > .menu-item-has-children > .sub-menu > .menu-item:has(.atlas-hd__feat),
	.atlas-hd__sticky .atlas-hd__navlist > .menu-item-has-children > .sub-menu > .menu-item:has(.atlas-hd__feat) {
		flex: 0 0 auto;
	}

	/* Featured product card (the [product id="…"] menu item) — last column. */
	.atlas-hd__feat { display: flex; flex-direction: column; gap: 11px; width: 250px; }
	.atlas-hd__feat a { display: block; }
	.atlas-hd__featimg { border-radius: 14px; overflow: hidden; background: #f2f5ef; }
	.atlas-hd__featimg img { display: block; width: 100%; height: auto; }
	.atlas-hd__feattitle { font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--hd-green-dark) !important; }
	.atlas-hd__featbtn {
		text-align: center;
		white-space: nowrap !important; /* beat the mega-menu wrap rule above */
		padding: 12px 14px;
		border-radius: 11px;
		background: var(--hd-green);
		color: #fff !important;
		font-size: 14px;
		font-weight: 700;
		transition: background-color .16s ease;
	}
	/* Scoped as tightly as the generic `.sub-menu a:hover` rule above, which
	   would otherwise wash the button out with its pale hover background. */
	.atlas-hd__nav .sub-menu a.atlas-hd__featbtn,
	.atlas-hd__sticky .sub-menu a.atlas-hd__featbtn {
		background: var(--hd-green);
		color: #fff !important;
	}
	.atlas-hd__nav .sub-menu a.atlas-hd__featbtn:hover,
	.atlas-hd__sticky .sub-menu a.atlas-hd__featbtn:hover {
		background: #3d9241;
		color: #fff !important;
	}
	/* The image/title links must not pick up the pale row hover either. */
	.atlas-hd__nav .sub-menu a.atlas-hd__featimg:hover,
	.atlas-hd__nav .sub-menu a.atlas-hd__feattitle:hover,
	.atlas-hd__sticky .sub-menu a.atlas-hd__featimg:hover,
	.atlas-hd__sticky .sub-menu a.atlas-hd__feattitle:hover { background: none; }
	.atlas-hd__nav .sub-menu a.atlas-hd__feattitle:hover,
	.atlas-hd__sticky .sub-menu a.atlas-hd__feattitle:hover { color: #2f7d34 !important; }
	/* Mega-menu links may wrap (the top-level nav sets nowrap, which clips long
	   column headings like "Echipamente fitness de exterior"). */
	.atlas-hd__nav .atlas-hd__navlist > .menu-item-has-children > .sub-menu a,
	.atlas-hd__sticky .atlas-hd__navlist > .menu-item-has-children > .sub-menu a {
		white-space: normal;
	}
	.atlas-hd__nav .atlas-hd__navlist > .menu-item-has-children > .sub-menu a > span,
	.atlas-hd__sticky .atlas-hd__navlist > .menu-item-has-children > .sub-menu a > span { min-width: 0; }
	/* Column heading (the depth-1 link) */
	.atlas-hd__nav .atlas-hd__navlist > .menu-item-has-children > .sub-menu > .menu-item > a,
	.atlas-hd__sticky .atlas-hd__navlist > .menu-item-has-children > .sub-menu > .menu-item > a {
		font-size: 16px;
		font-weight: 700;
		line-height: 1.25;
		color: var(--hd-green-dark);
		padding: 6px 8px 8px;
		align-items: flex-start;
	}
	/* Nested (depth-2) sub-menus: static lists, not hover fly-outs */
	.atlas-hd__nav .atlas-hd__navlist > .menu-item-has-children > .sub-menu .sub-menu,
	.atlas-hd__sticky .atlas-hd__navlist > .menu-item-has-children > .sub-menu .sub-menu {
		position: static;
		display: block;
		width: auto;
		min-width: 0;
		padding: 0;
		background: none;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.atlas-hd__nav .atlas-hd__navlist > .menu-item-has-children > .sub-menu .sub-menu a,
	.atlas-hd__sticky .atlas-hd__navlist > .menu-item-has-children > .sub-menu .sub-menu a {
		font-size: 15px;
		font-weight: 500;
		padding: 8px;
	}
	/* Caret on a mega parent stays put; the panel itself is the affordance. */
	.atlas-hd__nav .atlas-hd__navlist > .menu-item-has-children > .sub-menu .menu-item-has-children > a::after,
	.atlas-hd__sticky .atlas-hd__navlist > .menu-item-has-children > .sub-menu .menu-item-has-children > a::after { content: none; }

	.atlas-hd__quote--desktop {
		display: flex;
		margin-left: auto;
		gap: 13px;
		padding: 11px 14px 11px 20px;
		border: 0;
		background: var(--hd-chip);
		box-shadow: none;
		flex: 0 0 auto;
		transition: background-color .16s ease;
	}
	.atlas-hd__quote--desktop:hover { background: #eaeee6; }
	.atlas-hd__quote--desktop .atlas-hd__quoteglyph { width: 25px; height: 25px; }
	.atlas-hd__quote--desktop .atlas-hd__quotelabel { flex: 0 0 auto; font-size: 18px; white-space: nowrap; }
	.atlas-hd__quote--desktop .atlas-hd__quotecount { width: 30px; height: 30px; font-size: 15px; }

	/* --- sticky bar --- */
	.atlas-hd__sticky {
		height: 74px;
		gap: 24px;
		padding: 0 34px;
	}
	.atlas-hd__stickylogo { width: 170px; }
	.atlas-hd__sticky .atlas-hd__navlist {
		display: flex;
		align-items: center;
		gap: 20px;
		min-width: 0;
	}
	.atlas-hd__sticky .menu-item { margin: 0; flex: 0 0 auto; }
	.atlas-hd__sticky .menu-item > a {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
		color: var(--hd-ink);
	}
	.atlas-hd__sticky .menu-item > a:hover { color: #2f7d34; }
	.atlas-hd__sticky .menu-item-has-children > a::after {
		content: '';
		flex: 0 0 auto;
		width: 7px;
		height: 7px;
		margin-bottom: 3px;
		border-right: 2px solid #3f5546;
		border-bottom: 2px solid #3f5546;
		transform: rotate(45deg);
	}
	/* Dropdowns in the sticky bar: the same mega panel as the main nav, but
	   anchored to the fixed bar itself (li stays static) and centered. The list
	   and its parent items stretch to the bar's full height so the hover zone
	   has no dead gap above the panel. */
	.atlas-hd__sticky .atlas-hd__navlist { align-self: stretch; align-items: stretch; }
	/* Every item is a stretched flex box with its label centered — otherwise a
	   stretched li renders its link text stuck to the top of the bar. */
	.atlas-hd__sticky .atlas-hd__navlist > .menu-item {
		display: flex;
		align-items: center;
	}
	.atlas-hd__sticky .atlas-hd__navlist > .menu-item-has-children > .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 40;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 10px 34px;
		width: min(1400px, 95vw);
		padding: 30px 38px;
		background: #fff;
		border-radius: 0 0 18px 18px;
		box-shadow: 0 24px 44px rgba(24, 60, 32, .18);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .16s ease, transform .16s ease, visibility .16s;
	}
	.atlas-hd__sticky .atlas-hd__navlist > .menu-item-has-children.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.atlas-hd__sticky .sub-menu a {
		display: flex;
		align-items: center;
		gap: 12px;
		color: var(--hd-ink);
	}
	.atlas-hd__sticky .sub-menu a:hover { color: #2f7d34; }

	.atlas-hd__stickyright { gap: 12px; }
	.atlas-hd__iconbtn { width: 42px; height: 42px; }
	.atlas-hd__sticky .atlas-hd__quoteicon,
	.atlas-hd__burger--sticky { display: none; }
	.atlas-hd__quote--sticky {
		display: flex;
		gap: 10px;
		padding: 9px 11px 9px 16px;
		border: 0;
		background: var(--hd-chip);
		box-shadow: none;
		flex: 0 0 auto;
	}
	.atlas-hd__quote--sticky:hover { background: #eaeee6; }
	.atlas-hd__quote--sticky .atlas-hd__quotelabel { flex: 0 0 auto; font-size: 16px; white-space: nowrap; }

	/* While the sticky bar is pinned it is the only navigation: fade the in-flow
	   nav row out rather than cutting it (visibility keeps the layout, so
	   nothing jumps and its dropdowns cannot open underneath). */
	.atlas-hd__nav {
		transition: opacity .22s ease, visibility .22s;
	}
	body.atlas-hd-pinned .atlas-hd__nav {
		opacity: 0;
		visibility: hidden;
	}
}

/* 993–1240px: the nav + chip are tight at the design's widest — shrink both. */
@media (min-width: 993px) and (max-width: 1240px) {
	.atlas-hd__utilityleft { gap: 26px; padding-left: 24px; }
	.atlas-hd__perks { gap: 24px; }
	.atlas-hd__perks li { font-size: 14px; }
	.atlas-hd__phone { padding: 0 20px; }
	.atlas-hd__phonetext strong,
	.atlas-hd__phonenum { font-size: 19px; }
	.atlas-hd__offer { padding: 0 22px; font-size: 17px; }
	.atlas-hd__offerarrow { display: none; }
	.atlas-hd__brandinner { padding: 0 24px; }
	.atlas-hd__search--desktop { margin-left: 34px; }
	.atlas-hd__nav { padding: 0 24px; }
	.atlas-hd__nav .atlas-hd__navlist { gap: 20px; }
	.atlas-hd__nav .menu-item > a { font-size: 17px; }
	.atlas-hd__quote--desktop .atlas-hd__quotelabel { font-size: 16px; }
	.atlas-hd__sticky { gap: 16px; padding: 0 20px; }
	.atlas-hd__sticky .atlas-hd__navlist { gap: 14px; }
	.atlas-hd__sticky .menu-item > a { font-size: 15px; }
	.atlas-hd__quote--sticky .atlas-hd__quotelabel { display: none; }
}

/* Very wide screens: cover-scaling turns the band into a razor-thin crop of
   the photo, so no anchor alone can frame the playground. Give the band more
   height (more of the photo fits) and anchor just above the bottom edge. */
@media (min-width: 1800px) {
	.atlas-hd__brandband { height: 210px; }
	.atlas-hd__heroclip { background-position: 50% 88%; }
	.atlas-hd__hero { object-position: 50% 88%; }
}
@media (min-width: 2600px) {
	.atlas-hd__brandband { height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
	.atlas-hd *,
	.atlas-hd__sticky { transition: none !important; }
}