/* =====================================================
   HAHNE PRODUCTS MEGA MENU (reference design)
   White panel, col1 with icons + chevrons, red hover, 3 columns
   ===================================================== */

:root {
	--mega-red: #E30613;
	--mega-red-ref: #E60012;
}

.menu-item-has-mega {
	position: relative;
}

.menu-item-has-mega:hover .hahne-mega-menu {
	display: flex;
}

.nav {
	overflow: visible !important;
}

.nav li {
	white-space: nowrap;
}

.hahne-mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 600px;
	min-height: 280px;
	background: #fff;
	display: none;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
	z-index: 9999;
	flex-wrap: nowrap;
}

/* ----- Column 1: Primary categories ----- */
.mega-col.mega-cats {
	width: 240px;
	min-width: 240px;
	flex: 0 0 240px;
	background: #fff;
	padding: 0;
	border-right: 1px solid #eee;
}

.mega-cat {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	cursor: pointer;
	font-weight: 500;
	color: #000;
	transition: background 0.2s, color 0.2s;
}

.mega-cat:hover,
.mega-cat.mega-cat-active {
	background: var(--mega-red);
	color: #fff;
}

.mega-cat:hover .mega-cat-icon,
.mega-cat.mega-cat-active .mega-cat-icon {
	background-color: #fff;
}

.mega-cat-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	background-color: #333;
	transition: background 0.2s;
}

/* Icon shapes (reference: tile, drop, floor, wall, concrete) */
.mega-icon-tile {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='8' height='8' rx='1'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='8' height='8' rx='1'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;
}

.mega-icon-water {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.32 0z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.32 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.mega-icon-floor {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='10' width='20' height='12' rx='1'/%3E%3Cline x1='2' y1='14' x2='22' y2='14'/%3E%3Cline x1='12' y1='10' x2='12' y2='22'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='10' width='20' height='12' rx='1'/%3E%3Cline x1='2' y1='14' x2='22' y2='14'/%3E%3Cline x1='12' y1='10' x2='12' y2='22'/%3E%3C/svg%3E") center/contain no-repeat;
}

.mega-icon-wall {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='4' width='8' height='16' rx='0'/%3E%3Crect x='14' y='4' width='8' height='16' rx='0'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='4' width='8' height='16' rx='0'/%3E%3Crect x='14' y='4' width='8' height='16' rx='0'/%3E%3C/svg%3E") center/contain no-repeat;
}

.mega-icon-concrete {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4'/%3E%3C/svg%3E") center/contain no-repeat;
}

.mega-icon-default {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.mega-cat-label {
	flex: 1;
}

.mega-cat-chevron {
	font-size: 18px;
	font-weight: 400;
	opacity: 0.8;
}

/* ----- Column 2 + 3 container ----- */
.mega-content {
	flex: 1;
	display: flex;
	min-width: 0;
}

.mega-panel {
	display: none;
	flex: 1;
	padding: 24px 28px;
	gap: 0;
	min-width: 0;
}

.mega-panel.active {
	display: flex !important;
}

/* Show first panel when none have .active (no-JS fallback and initial state) */
.mega-content:not(:has(.mega-panel.active)) .mega-panel:first-of-type {
	display: flex !important;
}

/* ----- Column 2: Subcategories ----- */
.mega-col.mega-subcats {
	width: 220px;
	min-width: 220px;
	flex: 0 0 220px;
	padding: 0 24px 0 0;
	border-right: 1px solid #eee;
}

.mega-subcat-group {
	margin-bottom: 16px;
}

.mega-subcat-title {
	font-weight: 700;
	font-size: 14px;
	color: #000;
	margin-bottom: 6px;
}

/* ----- Column 3: Products ----- */
.mega-col.mega-products {
	flex: 1;
	padding: 0 0 0 24px;
	min-width: 0;
}

.mega-product-group {
	margin-bottom: 20px;
}

.mega-product-group-title {
	font-weight: 700;
	font-size: 14px;
	color: #000;
	margin-bottom: 10px;
}

.mega-product {
	display: block;
	padding: 6px 0;
	color: #333;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s;
}

.mega-product:hover,
.mega-product-featured {
	color: var(--mega-red);
}

.mega-product:hover {
	text-decoration: none;
	color: var(--mega-red);
}

/* =====================================================
   CUSTOM HEADER MEGA (snippet: Products .mega-menu + Browse .browse-mega)
   Reference: hahne-website-design-Menu – 3 columns always visible on hover
   ===================================================== */

.menu-item-has-mega .mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 900px;
	min-width: 900px;
	background: #fff;
	display: none;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
	z-index: 9999;
}

.menu-item-has-mega:hover .mega-menu {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: stretch;
}

/* Products mega: all 3 columns visible when open (no JS hiding) */
.menu-item-has-mega .mega-menu .column {
	padding: 24px 20px;
	box-sizing: border-box;
}

.menu-item-has-mega .mega-menu .col-1 {
	width: 240px;
	min-width: 240px;
	flex-shrink: 0;
	border-right: 1px solid #eee;
}

.menu-item-has-mega .mega-menu .col-2 {
	width: 220px;
	min-width: 220px;
	background: #fff;
	flex-shrink: 0;
	border-right: 1px solid #eee;
	display: block !important;
}

.menu-item-has-mega .mega-menu .col-3 {
	flex: 1;
	min-width: 260px;
	display: block !important;
}

/* Browse mega (static: .mega-cat → .mega-subcats → .mega-products) */
.menu-item-browse {
	position: relative;
}

.menu-item-browse:hover .browse-mega {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: stretch;
}

.browse-mega {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 900px;
	min-width: 900px;
	background: #fff;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
	z-index: 9999;
}

.browse-mega .column {
	padding: 0px 20px;
	box-sizing: border-box;
}

.browse-mega .col-1 {
	width: 240px;
	min-width: 240px;
/* 	background: #f5f5f5; */
	flex-shrink: 0;
	border-right: 1px solid #eee;
}

.browse-mega .col-2 {
	width: 220px;
	min-width: 220px;
	background: #fff;
	flex-shrink: 0;
	border-right: 1px solid #eee;
	display: block !important;
}

.browse-mega .col-3 {
	flex: 1;
	min-width: 260px;
	display: block !important;
}

/* Column headings for selected category / subcategory */
.browse-mega .mega-col-heading {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.6px;
	color: #000 !important;
	color: #999999;
	margin: 8px 0 10px;
}

.browse-mega .mega-col3-heading {
	margin-bottom: 12px;
}

/* Column 2: only one .mega-subcats list visible at a time */
.browse-mega .mega-subcats {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

.browse-mega .mega-subcats.active {
	display: block !important;
}

/* Column 3: only one .mega-products list visible at a time */
.browse-mega .mega-products {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

.browse-mega .mega-products.active {
	display: block !important;
}

/* Col-1: categories with icon + chevron (reference design) */
/* COLUMN 1 LIST */
.menu-item-has-mega .mega-menu .col-1 ul{
list-style:none;
margin:0;
padding:0;
}

/* CATEGORY ROW */
.menu-item-has-mega .mega-menu .col-1 li{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 14px;
cursor:pointer;
font-weight:500;
color:#000;
transition:background .2s,color .2s;
}

/* LEFT GROUP (icon + text) */
.menu-item-has-mega .mega-menu .menu-left{
display:flex;
align-items:center;
gap:0px;
}

.menu-text{
padding-left:7px;
display:inline-block;
}

/* HOVER BACKGROUND */
.menu-item-has-mega .mega-menu .col-1 li:hover{
background:var(--mega-red);
color:#fff;
}

/* ICON CONTAINER */
.menu-item-has-mega .mega-menu .menu-icon{
width:22px;
height:22px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
}

/* ICON IMAGE */
.menu-item-has-mega .mega-menu .menu-icon img{
width:100%;
height:100%;
object-fit:contain;

/* RED DEFAULT */
filter:brightness(0) saturate(100%) invert(11%) sepia(94%) saturate(7489%) hue-rotate(357deg) brightness(93%) contrast(115%);

transition:filter .2s ease;
}

/* ICON HOVER */
.menu-item-has-mega .mega-menu .col-1 li:hover .menu-icon img{
filter:brightness(0) invert(1);
}

/* RIGHT CHEVRON */
.menu-item-has-mega .mega-menu .col-1 li::after{
content:"›";
font-size:20px;
font-weight:600;
color:#E3010F;
transition:color .2s ease;
}

/* CHEVRON HOVER */
.menu-item-has-mega .mega-menu .col-1 li:hover::after{
color:#333;
}

/* Col-2: sub-categories (bold, visible) */
.menu-item-has-mega .mega-menu .col-2 ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-item-has-mega .mega-menu .col-2 li {
	padding: 10px 0;
	cursor: pointer;
	font-weight: 500;
	font-size: 14px;
	color: #888888;
	transition: color 0.2s;
}

.menu-item-has-mega .mega-menu .col-2 li:hover {
	color: var(--mega-red);
}

/* Col-3: product links; only one .submenu visible at a time (JS toggles .active) */
.menu-item-has-mega .mega-menu .col-3 .submenu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-item-has-mega .mega-menu .col-3 .submenu.active {
	display: block !important;
}

/* Fallback: show first submenu when none have .active (e.g. before JS) */
.menu-item-has-mega .mega-menu .col-3:not(:has(.submenu.active)) .submenu:first-of-type {
	display: block;
}

.menu-item-has-mega .mega-menu .col-3 .submenu li {
	margin: 0;
	padding: 0;
}

.menu-item-has-mega .mega-menu .col-3 a {
	display: block;
	padding: 8px 0;
	color: #333;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s;
}

.menu-item-has-mega .mega-menu .col-3 a:hover {
	color: var(--mega-red);
}

/* Browse: Col 1 categories */
.browse-mega .mega-cats-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.browse-mega .mega-cat {
	padding: 7px 15px;
	cursor: pointer;
	font-weight: 500;
	color: #000;
	transition: background 0.2s, color 0.2s;
}

.browse-mega .mega-cat:hover {
	background: var(--mega-red);
	color: #fff;
}

/* icon container */
.menu-icon img{
width:22px;
height:22px;
object-fit:contain;
transition: filter 0.2s ease;
}

/* default = RED (#E3010F) */
.browse-mega .mega-cat .menu-icon img{
filter: invert(14%) sepia(98%) saturate(7426%) hue-rotate(352deg) brightness(93%) contrast(103%);
}

/* hover = WHITE */
.browse-mega .mega-cat:hover .menu-icon img{
filter: brightness(0) invert(1);
}

/* Browse: Col 2 subcategories */
.browse-mega .mega-subcat {
	padding: 10px 0;
	cursor: pointer;
	font-weight: 500;
	font-size: 14px;
	color: #888888;
	transition: color 0.2s;
}

.browse-mega .mega-subcat:hover {
	color: var(--mega-red);
}

/* Browse: Col 3 product links */
.browse-mega .mega-products li {
	margin: 0;
	padding: 0;
}

.browse-mega .mega-products a {
	display: block;
	padding: 8px 0;
	font-weight: 500;
	color: #888888;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s;
}

.browse-mega .mega-products a:hover {
	color: var(--mega-red);
}