/* =============================================================
   HOVER MENU — Frontend Styles  v1.1
   ============================================================= */

/* ── Box-model reset inside overlay (prevent theme interference) */
.hm-overlay,
.hm-overlay * {
	box-sizing: border-box !important;
}
.hm-overlay p,
.hm-overlay h1,
.hm-overlay h2,
.hm-overlay h3,
.hm-overlay ul,
.hm-overlay li {
	margin: 0 !important;
	padding: 0 !important;
}

/* ── Overlay shell ────────────────────────────────────────── */
.hm-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 999999 !important;
	display: flex !important;
	overflow: hidden !important;
	pointer-events: none !important;
	visibility: hidden !important;
	font-family: inherit;
	background-color: #e8e5da; /* CSS fallback before JS sets it */
}
.hm-overlay.hm-open {
	pointer-events: all !important;
	visibility: visible !important;
}

/* ── Left: Image Panel ────────────────────────────────────── */
.hm-panel-images {
	width: 40% !important;
	min-width: 40% !important;
	height: 100vh !important;
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	flex-shrink: 0 !important;
	background-color: #1c1917 !important; /* dark bg separates image panel from nav panel */
	will-change: clip-path;
}

.hm-img-wrap {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
}

.hm-img-slot {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	will-change: clip-path;
	/* hidden — GSAP reveals bottom-to-top on hover (top axis: 100%→0%) */
	clip-path: inset(100% 0 0% 0);
}

/* ── Right: Nav Panel ─────────────────────────────────────── */
.hm-panel-nav {
	flex: 1 1 auto !important;
	height: 100vh !important;
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	padding: 48px 60px 48px 52px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	overscroll-behavior: contain !important;
	will-change: transform, opacity;
	background-color: inherit !important;
}

/* ── Close button ─────────────────────────────────────────── */
.hm-close {
	position: absolute !important;
	top: 40px !important;
	right: 48px !important;
	width: 36px !important;
	height: 36px !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	color: inherit !important;
	padding: 6px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	opacity: 0.6 !important;
	transition: opacity 0.2s, background 0.2s !important;
	line-height: 1 !important;
	z-index: 2 !important;
}
.hm-close:hover { opacity: 1 !important; background: rgba(0,0,0,0.06) !important; }
.hm-close svg { display: block !important; }

/* ── Nav inner ────────────────────────────────────────────── */
.hm-nav-inner {
	margin-top: 88px !important;
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
}

.hm-section-label {
	font-size: 10px !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	opacity: 0.45 !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	display: block !important;
}
/* Fix: .hm-overlay p { margin:0 } has higher specificity (0,1,1) than .hm-section-label (0,1,0)
   so we must use a two-class selector (0,2,0) to restore the margins */
.hm-overlay .hm-section-label {
	margin-bottom: 12px !important;
}
#hm-discover-label {
	margin-bottom: 28px !important;
}

/* ── Links grid ───────────────────────────────────────────── */
.hm-links {
	display: grid !important;
	grid-template-columns: 1fr 1fr; /* fallback — NO !important here: JS inline style must be able to override (1fr / 1fr 1fr / 1fr 1fr 1fr) */
	column-gap: 28px !important;
	row-gap: 0 !important;
	flex: 1 !important;
	align-content: start !important;
	list-style: none !important;
}

/* Each column is a vertical stack */
.hm-links-col {
	display: flex !important;
	flex-direction: column !important;
}

.hm-link-item {
	display: block !important;
	/* opacity & transform controlled entirely by GSAP — no CSS defaults */
	will-change: transform, opacity;
}

/* ── Heading item ─────────────────────────────────────────── */
.hm-heading-item {
	font-family: var(--hm-heading-font, inherit) !important;
	font-size: var(--hm-heading-size, 10px) !important;
	font-weight: var(--hm-heading-weight, 600) !important;
	letter-spacing: var(--hm-heading-spacing, 0.1em) !important;
	text-transform: uppercase !important;
	opacity: 0.45 !important;
	line-height: 1 !important;
	padding: 22px 0 8px !important;
	will-change: transform, opacity;
}
/* First heading in its column gets less top padding */
.hm-links-col .hm-heading-item:first-child {
	padding-top: 4px !important;
}

/* ── Divider item ─────────────────────────────────────────── */
.hm-divider-item {
	height: 1px !important;
	background: currentColor !important;
	opacity: 0.15 !important;
	margin: 14px 0 !important;
	border: none !important;
	will-change: transform, opacity;
}

.hm-link-item a {
	font-size: var(--hm-link-size, clamp(20px, 2vw, 28px)) !important;
	font-weight: var(--hm-link-weight, 400) !important;
	font-family: var(--hm-link-font, inherit) !important;
	letter-spacing: var(--hm-link-spacing, -0.02em) !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	color: inherit !important;
	display: block !important;
	padding: 8px 0 !important;
	transition: opacity 0.25s ease !important;
	position: relative !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* Underline draw on hover */
.hm-link-item a::after {
	content: '' !important;
	position: absolute !important;
	bottom: 4px !important;
	left: 0 !important;
	width: 0 !important;
	height: 1px !important;
	background: currentColor !important;
	transition: width 0.3s ease !important;
}
.hm-link-item a:hover::after { width: 100% !important; }

/* Dim all / highlight active */
.hm-links.has-hover .hm-link-item a          { opacity: 0.3 !important; }
.hm-links.has-hover .hm-link-item.hm-active a { opacity: 1 !important; }

/* ── Footer ───────────────────────────────────────────────── */
.hm-footer {
	margin-top: 40px !important;
	/* opacity controlled entirely by GSAP */
	will-change: opacity;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

.hm-contact-row {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
}
.hm-contact-row a {
	font-size: 13px !important;
	color: inherit !important;
	text-decoration: none !important;
	opacity: 0.7 !important;
	transition: opacity 0.2s !important;
}
.hm-contact-row a:hover { opacity: 1 !important; }
.hm-contact-sep { opacity: 0.3 !important; font-size: 13px !important; }

.hm-social-row {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	flex-wrap: wrap !important;
}
.hm-social-row a {
	color: inherit !important;
	opacity: 0.6 !important;
	transition: opacity 0.2s, transform 0.2s !important;
	display: flex !important;
	align-items: center !important;
	text-decoration: none !important;
	background: none !important;
	border: none !important;
}
.hm-social-row a:hover { opacity: 1 !important; transform: translateY(-2px) !important; }
.hm-social-row svg { display: block !important; }

.hm-policies-link {
	font-size: 11px !important;
	letter-spacing: 0.04em !important;
	opacity: 0.4 !important;
	text-decoration: none !important;
	color: inherit !important;
	display: inline-block !important;
	transition: opacity 0.2s !important;
}
.hm-policies-link:hover { opacity: 0.8 !important; }

/* ── Mega Dropdown variant ────────────────────────────────── */
/*
 * Full-viewport-width bar that slides DOWN from the header —
 * exactly like a traditional ecommerce mega menu.
 */
.hm-overlay.hm-mega {
	/* All sizing/positioning driven by CSS variables set by JS */
	width:         var(--hm-mega-width,   100vw)              !important;
	left:          var(--hm-mega-left,    0px)                !important;
	transform:     var(--hm-mega-tf,      none)               !important;
	border-radius: var(--hm-mega-radius,  0 0 10px 10px)      !important;
	height: auto !important;
	top: 0 !important;              /* overridden by JS */
	box-shadow: 0 12px 48px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06) !important;
	overflow: hidden !important;
}
.hm-overlay.hm-mega .hm-panel-images {
	width: 32% !important;
	min-width: 32% !important;
	height: auto !important;        /* stretches to match nav via flex align-self */
	min-height: 240px !important;
	align-self: stretch !important;
}
.hm-overlay.hm-mega .hm-panel-nav {
	height: auto !important;        /* sizes naturally to content */
	max-height: calc(100vh - var(--hm-mega-top-offset, 80px) - 24px) !important;
	overflow-y: auto !important;
	overscroll-behavior: contain !important;
	padding: 28px 60px 28px 48px !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(0,0,0,0.12) transparent;
}
.hm-overlay.hm-mega .hm-panel-nav::-webkit-scrollbar       { width: 3px; }
.hm-overlay.hm-mega .hm-panel-nav::-webkit-scrollbar-track  { background: transparent; }
.hm-overlay.hm-mega .hm-panel-nav::-webkit-scrollbar-thumb  { background: rgba(0,0,0,0.12); border-radius: 2px; }
.hm-overlay.hm-mega .hm-nav-inner {
	margin-top: 36px !important;
}
.hm-overlay.hm-mega .hm-close {
	top: 14px !important;
	right: 24px !important;
	width: 28px !important;
	height: 28px !important;
}
/* Compact links — fits many items without scrolling */
.hm-overlay.hm-mega .hm-link-item a {
	font-size: var(--hm-link-size, clamp(13px, 1.1vw, 16px)) !important;
	padding: 5px 0 !important;
	letter-spacing: var(--hm-link-spacing, 0) !important;
}
.hm-overlay.hm-mega .hm-links {
	column-gap: 40px !important;
}
.hm-overlay.hm-mega .hm-footer {
	margin-top: 18px !important;
}
.hm-overlay.hm-mega .hm-section-label {
	font-size: 9px !important;
	margin-bottom: 10px !important;
}
@media (max-width: 900px) {
	.hm-overlay.hm-mega .hm-panel-images { width: 28% !important; min-width: 28% !important; }
	.hm-overlay.hm-mega .hm-panel-nav    { padding: 24px 32px 24px 28px !important; }
}
@media (max-width: 650px) {
	.hm-overlay.hm-mega .hm-panel-images { display: none !important; }
	.hm-overlay.hm-mega .hm-panel-nav    { height: auto !important; min-height: 260px !important; width: 100% !important; padding: 24px 24px !important; }
	.hm-overlay.hm-mega .hm-links        { grid-template-columns: 1fr !important; }
}

/* ═════════════════════════════════════════════════════════════
   LIST GRID MEGA  (.hm-lg-mega)
   Mega dropdown with list-grid layout — same rows as list_grid
   but slides down from header on hover (not full-screen).
   ════════════════════════════════════════════════════════════ */

.hm-overlay.hm-lg-mega {
	width:         var(--hm-mega-width,  100vw)         !important;
	left:          var(--hm-mega-left,   0px)           !important;
	transform:     var(--hm-mega-tf,     none)          !important;
	border-radius: var(--hm-mega-radius, 0 0 12px 12px) !important;
	height: auto !important;
	top: 0 !important;
	box-shadow: 0 12px 48px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06) !important;
	overflow: hidden !important;
}

/* ── Scrollable wrapper ───────────────────────────────────── */
.hm-lgm-inner {
	position: relative !important;
	width: 100% !important;           /* fill full overlay width — needed because overlay is display:flex */
	padding: 32px 52px 28px !important;
	max-height: calc(100vh - var(--hm-mega-top-offset, 80px) - 24px) !important;
	overflow-y: auto !important;
	overscroll-behavior: contain !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(0,0,0,0.12) transparent;
}
.hm-lgm-inner::-webkit-scrollbar       { width: 3px; }
.hm-lgm-inner::-webkit-scrollbar-track  { background: transparent; }
.hm-lgm-inner::-webkit-scrollbar-thumb  { background: rgba(0,0,0,0.12); border-radius: 2px; }

/* ── Close ────────────────────────────────────────────────── */
.hm-lgm-close {
	position: absolute !important;
	top: 14px !important;
	right: 20px !important;
	width: 28px !important;
	height: 28px !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	color: inherit !important;
	padding: 5px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	opacity: 0.5 !important;
	transition: opacity 0.2s, background 0.2s !important;
	z-index: 2 !important;
}
.hm-lgm-close:hover { opacity: 1 !important; background: rgba(0,0,0,0.06) !important; }
.hm-lgm-close svg   { display: block !important; }

/* ── 3-column grid ────────────────────────────────────────── */
.hm-lgm-cols {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr); /* JS overrides based on item count */
	gap: 0 40px !important;
}

.hm-lgm-col {
	display: flex !important;
	flex-direction: column !important;
	border-top: 1px solid rgba(128,128,128,0.15) !important;
}

/* ── Heading item ─────────────────────────────────────────── */
.hm-lgm-heading {
	font-size: 9px !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	opacity: 0.4 !important;
	font-weight: 600 !important;
	padding: 16px 0 6px !important;
	line-height: 1 !important;
}
.hm-lgm-col .hm-lgm-heading:first-child { padding-top: 4px !important; }

/* ── Divider ──────────────────────────────────────────────── */
.hm-lgm-divider {
	height: 1px !important;
	background: currentColor !important;
	opacity: 0.1 !important;
	margin: 8px 0 !important;
	border: none !important;
}

/* ── Single row — list_grid style ────────────────────────── */
.hm-lgm-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	padding: 11px 10px !important;
	border-bottom: 1px solid rgba(128,128,128,0.12) !important;
	text-decoration: none !important;
	color: inherit !important;
	background: transparent !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease !important;
	will-change: transform, opacity;
}
.hm-lgm-row:hover { background-color: rgba(128,128,128,0.06) !important; }

/* ── Title clip (overflow hidden for flip animation) ──────── */
.hm-lgm-row-title {
	overflow: hidden !important;
	flex: 1 !important;
}

.hm-lgm-title-clip {
	position: relative !important;
	display: block !important;
}

.hm-lgm-title-a,
.hm-lgm-title-b {
	display: block !important;
	font-size: var(--hm-link-size, clamp(13px, 1.3vw, 18px)) !important;
	font-weight: var(--hm-link-weight, 400) !important;
	font-family: var(--hm-link-font, inherit) !important;
	letter-spacing: var(--hm-link-spacing, -0.01em) !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	will-change: transform !important;
}

.hm-lgm-title-b {
	position: absolute !important;
	inset: 0 !important;
	font-weight: 700 !important;
}

/* ── Thumbnail strip (multiple images, like list_grid) ────── */
.hm-lgm-row-images {
	display: flex !important;
	gap: 5px !important;
	align-items: center !important;
	justify-content: flex-end !important;
}

.hm-lgm-thumb {
	width: clamp(38px, 3.6vw, 52px) !important;
	height: clamp(38px, 3.6vw, 52px) !important;
	border-radius: 4px !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	flex-shrink: 0 !important;
	will-change: transform, opacity !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
	.hm-lgm-inner { padding: 24px 32px 20px !important; }
	.hm-lgm-cols  { gap: 0 24px !important; }
}
@media (max-width: 650px) {
	.hm-lgm-inner { padding: 20px 20px 16px !important; }
	.hm-lgm-cols  { grid-template-columns: 1fr !important; gap: 0 !important; }
	.hm-lgm-col   { border-top: none !important; }
	.hm-lgm-col:first-child { border-top: 1px solid rgba(128,128,128,0.15) !important; }
}

/* ═════════════════════════════════════════════════════════════
   LIST GRID MODE  (.hm-list-grid)
   Full-screen vertical list — hover reveals thumbnail + title flip
   ════════════════════════════════════════════════════════════ */

.hm-overlay.hm-list-grid {
	display: block !important;
	overflow: auto !important;
	overflow-y: auto !important;             /* overlay itself scrolls — replaces overflow:hidden */
	overflow-x: hidden !important;
	overscroll-behavior: contain !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.hm-overlay.hm-list-grid::-webkit-scrollbar       { width: 4px; }
.hm-overlay.hm-list-grid::-webkit-scrollbar-track  { background: transparent; }
.hm-overlay.hm-list-grid::-webkit-scrollbar-thumb  { background: rgba(0,0,0,0.15); border-radius: 2px; }

/* ── Inner content wrapper — NOT the scroll container ────── */
.hm-lg-wrap {
	min-height: 100vh !important;  /* at least full viewport for short lists */
	flex-shrink: 0 !important;     /* KEY: don't compress when content > 100vh — lets overlay scroll */
	overflow: visible !important;
	display: flex !important;
	flex-direction: column !important;
}

/* ── Close button ─────────────────────────────────────────── */
.hm-lg-close {
	position: fixed !important;
	top: 36px !important;
	right: 48px !important;
	width: 40px !important;
	height: 40px !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	color: inherit !important;
	padding: 8px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	opacity: 0.5 !important;
	transition: opacity 0.2s, background 0.2s !important;
	z-index: 10 !important;
}
.hm-lg-close:hover { opacity: 1 !important; background: rgba(0,0,0,0.06) !important; }
.hm-lg-close svg   { display: block !important; }

/* ── Rows container ───────────────────────────────────────── */
.hm-lg-rows {
	flex: 1 0 auto !important;  /* grow for short lists, never compress for long lists */
	border-top: 1px solid rgba(128,128,128,0.15) !important;
	margin-top: 88px !important;
}

/* ── Single row ───────────────────────────────────────────── */
.hm-lg-row {
	display: grid !important;
	grid-template-columns: 1fr auto !important;
	align-items: center !important;
	gap: 24px !important;
	padding: 18px 80px !important;
	border-bottom: 1px solid rgba(128,128,128,0.15) !important;
	cursor: pointer !important;
	text-decoration: none !important;
	color: inherit !important;
	background: transparent !important;
	transition: background-color 0.25s ease !important;
	will-change: transform, opacity;
}
.hm-lg-row:hover {
	background-color: rgba(128,128,128,0.07) !important;
}

/* ── Title clip (overflow hidden for the flip animation) ───── */
.hm-lg-row-title {
	overflow: hidden !important;
}

.hm-lg-title-clip {
	position: relative !important;
	display: block !important;
}

.hm-lg-title-a,
.hm-lg-title-b {
	display: block !important;
	font-size: var(--hm-link-size, clamp(1.8rem, 3.6vw, 3.2rem)) !important;
	font-weight: var(--hm-link-weight, 400) !important;
	font-family: var(--hm-link-font, inherit) !important;
	letter-spacing: var(--hm-link-spacing, -0.02em) !important;
	line-height: 1.1 !important;
	text-transform: uppercase !important;
	will-change: transform !important;
}

/* title-b sits directly on top of title-a — clipped by parent overflow:hidden */
.hm-lg-title-b {
	position: absolute !important;
	inset: 0 !important;
	font-weight: 700 !important;
}

/* ── Thumbnail strip ──────────────────────────────────────── */
.hm-lg-row-images {
	display: flex !important;
	gap: 8px !important;
	align-items: center !important;
	justify-content: flex-end !important;
	min-width: clamp(60px, 6vw, 88px) !important;
}

.hm-lg-thumb {
	width: clamp(60px, 6vw, 88px) !important;
	height: clamp(60px, 6vw, 88px) !important;
	border-radius: 6px !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	flex-shrink: 0 !important;
	will-change: transform, opacity !important;
}

/* ── Footer ───────────────────────────────────────────────── */
.hm-lg-footer {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 20px !important;
	padding: 28px 80px !important;
	border-top: 1px solid rgba(128,128,128,0.15) !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
	.hm-lg-row      { padding: 16px 36px !important; }
	.hm-lg-footer   { padding: 24px 36px !important; }
}
@media (max-width: 650px) {
	.hm-lg-rows     { margin-top: 64px !important; }
	.hm-lg-row      { padding: 14px 24px !important; gap: 14px !important; }
	.hm-lg-close    { top: 18px !important; right: 20px !important; }
	.hm-lg-footer   { padding: 20px 24px !important; }
	.hm-lg-title-a,
	.hm-lg-title-b  { font-size: clamp(1.5rem, 7vw, 2.2rem) !important; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
	.hm-panel-images { width: 36% !important; min-width: 36% !important; }
	.hm-panel-nav    { padding: 40px 36px 36px 32px !important; }
}
@media (max-width: 650px) {
	.hm-panel-images { display: none !important; }
	.hm-panel-nav    { width: 100% !important; padding: 32px 28px !important; }
	/* Stack all columns vertically on mobile */
	.hm-links        { grid-template-columns: 1fr !important; }
	.hm-link-item a  { font-size: var(--hm-link-size, 24px) !important; }
	.hm-nav-inner    { margin-top: 72px !important; }
	.hm-close        { top: 24px !important; right: 20px !important; }
}

/* ── Scroll Indicator ──────────────────────────────────────── */
.hm-lg-scroll-indicator {
	position: fixed !important;
	bottom: 32px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	z-index: 1000000 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
	color: inherit !important;
	opacity: 0;
	pointer-events: none !important;
	transition: opacity 0.3s ease, transform 0.3s ease !important;
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.15em !important;
	font-weight: 500 !important;
}

.hm-lg-scroll-indicator.hm-visible {
	opacity: 0.7;
}

.hm-lg-scroll-indicator.hm-visible:hover {
	opacity: 1;
}

.hm-scroll-arrow {
	width: 20px !important;
	height: 20px !important;
	animation: hm-bounce 2s infinite !important;
}

@keyframes hm-bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(6px);
	}
	60% {
		transform: translateY(3px);
	}
}