/* ==========================================================================
   GOLD BERG — MEGA MENU FIX   v1.1.1
   Target look: hamskintl.com — clean white dropdown, red column headers with
   red underline, dark-grey sub items turning red on hover.

   ==========================================================================
   v1.1.1 — ROOT CAUSE FIX (text duplicate / sub-menus page par phailna)
   ==========================================================================
   v1.0.0 me maine ye 2 ghaltiyan ki thin:

     1)  .nav-strip ul.mega-menu > li.mega-menu-flyout > .mega-sub-menu {
             display: block !important;          <-- BUG (ab hata diya)
         }
         Max Mega Menu flyout dropdowns ko `display: none` se chhupata hai
         aur hover par dikhata hai. Mera `display: block !important` us
         hiding ko tod deta tha -> page ke NEECHE saare flyout sub-menus
         khul kar overlap ho gaye. Yehi wo "duplicate text" ka dher tha
         (Golf Gloves, Cycling Gloves, Polo Shirts, Yoga Wear, Gym Clothing,
         Goalkeeper Gloves, Baseball Batting Gloves, Beekeeping Gloves ...).

     2)  .nav-strip ... > li.mega-menu-item > .mega-sub-menu {
             display: block !important;          <-- BUG (ab hata diya)
             position: static !important;
         }
         Isi se mega panel ke andar 3rd-level items zabardasti visible ho
         kar bahar nikal gaye the.

   v1.1.1 ka usool (RULE — is file me hamesha yaad rakho):
     *** Layout par KOI override nahi. ***
     Koi `display`, `position`, `visibility`, `opacity`, `width`,
     `min-width`, `max-width`, `left`, `right`, `top`, `z-index`,
     `grid-template` override — kisi bhi `.mega-sub-menu` par NAHI.

     Max Mega Menu apna show/hide aur apni columns khud sambhalta hai.
     Hum sirf wahi cheez theek karte hain jo tooti hui thi:
        - rang (color / background)
        - typography (font-size / weight / transform / letter-spacing)
        - border / underline
        - padding / margin (link ke andar, hiding ko affect nahi karta)
        - theme ki conflicting ::after / ::before hataana

   COLUMNS KAHAAN SE AAYENGE:
     Max Mega Menu ▸ Appearance ▸ Menus ▸ <item> ▸ Mega Menu tab ▸ Enable
     Phir Second Level ▸ "Mega Menu Columns" = 3.
     MMM khud `.mega-menu-row` / `.mega-menu-column` render karta hai —
     usi ko neeche style kiya gaya hai. CSS se grid force karna hi wo
     galti thi jo sab tod rahi thi.
   ========================================================================== */


/* ==========================================================================
   0) THEME BLEED NEUTRALISE  (asal bug ki jarr)
   --------------------------------------------------------------------------
   Theme goldberg / style.css line 84-96:
       .main-nav ul{display:flex;flex-wrap:wrap}                     (85)
       .main-nav li{position:relative}                               (86)
       .main-nav li>a{color:#fff; text-transform:uppercase;           (87)
                      padding:16px 18px; white-space:nowrap}
       .main-nav li>a::after{background:var(--red)}                   (88)
       .main-nav li.current-menu-item>a{background:var(--red)}        (90)

   `.main-nav li>a` DESCENDANT selector hai -> MMM ke HAR depth ke link par
   lagta tha:  safaid panel par safaid text, CAPS, bade gaps, laal bar.
   Neeche sirf wahi properties reset ki gayi hain. Layout untouched.
   ========================================================================== */
.nav-strip .mega-sub-menu,
.nav-strip .mega-sub-menu a.mega-menu-link,
.nav-strip .mega-sub-menu li.mega-menu-item {
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
}

/* theme ka laal ::after bar aur '›' ::before dropdown ke andar hataao */
.nav-strip .mega-sub-menu a.mega-menu-link::after,
.nav-strip .mega-sub-menu a.mega-menu-link::before,
.nav-strip .mega-sub-menu li.mega-menu-item::after,
.nav-strip .mega-sub-menu li.mega-menu-item::before {
	content: none !important;
	display: none !important;
}

/* theme: .main-nav li{position:relative} — MMM ke liye bekaar, saaf karo */
.nav-strip .mega-sub-menu li.mega-menu-item {
	margin: 0;
	padding: 0;
}

/* theme: ul{list-style:none} — confirm */
.nav-strip ul.mega-menu,
.nav-strip ul.mega-sub-menu,
.nav-strip ul.mega-menu li,
.nav-strip ul.mega-sub-menu li {
	list-style: none;
}


/* ==========================================================================
   1) PANEL = CLEAN WHITE   (Fix #1 — dropdown laal tha)
   Sirf rang / border / shadow. Koi display/position NAHI.
   ========================================================================== */
.nav-strip .mega-sub-menu {
	background-color: var(--gbmmf-panel, #ffffff) !important;
	background-image: none !important;
}

/* Sirf TOP-LEVEL panel (mega + flyout) ko border-top + shadow */
.nav-strip ul.mega-menu > li.mega-menu-megamenu > .mega-sub-menu,
.nav-strip ul.mega-menu > li.mega-menu-flyout > .mega-sub-menu {
	border: 0 !important;
	border-top: 3px solid var(--gbmmf-accent, #C41E3A) !important;
	box-shadow: 0 18px 45px rgba(15, 26, 55, .18) !important;
}

/* Nested panels apna border/shadow na banayen — parent ke andar flat rahen */
.nav-strip ul.mega-menu > li.mega-menu-megamenu .mega-sub-menu .mega-sub-menu {
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* MMM ka block/widget title bhi saaf */
.nav-strip .mega-sub-menu .widget,
.nav-strip .mega-sub-menu .widget_text,
.nav-strip .mega-sub-menu .mega-block-title {
	background: transparent !important;
	color: var(--gbmmf-header, #C41E3A) !important;
	margin: 0 0 14px 0 !important;
	padding: 0 !important;
}


/* ==========================================================================
   2) TOP-LEVEL NAV BAR LINKS  (navy patti par safaid text)
   ========================================================================== */
.nav-strip ul.mega-menu > li.mega-menu-item > a.mega-menu-link {
	color: #ffffff !important;
	background-color: transparent !important;
	text-transform: uppercase !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 1.2px !important;
	padding: 16px 18px !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.nav-strip ul.mega-menu > li.mega-menu-item > a.mega-menu-link:hover,
.nav-strip ul.mega-menu > li.mega-menu-item > a.mega-menu-link:focus {
	color: #ffffff !important;
	background-color: rgba(255, 255, 255, .08) !important;
}

/* Laal background sirf CURRENT item par (theme line 90 ka safe version) */
.nav-strip ul.mega-menu > li.mega-current-menu-item > a.mega-menu-link,
.nav-strip ul.mega-menu > li.mega-current-menu-ancestor > a.mega-menu-link {
	background-color: var(--gbmmf-accent, #C41E3A) !important;
	color: #ffffff !important;
}


/* ==========================================================================
   3) COLUMN HEADERS = RED TEXT + RED UNDERLINE   (Fix #3 ka visual hissa)
   --------------------------------------------------------------------------
   HEADER pehchaan: mega panel ke andar wo item jiske apne children hon
   (MMM us par class `mega-menu-item-has-children` lagata hai) —
   yaani "Jackets and Vests", "Pants and Accessories", "Protective Wear",
   "Casual Wear", "Sports Kits", "Active Wear".
   Yeh selector depth-independent hai, is liye MMM ke column wrappers
   (.mega-menu-row / .mega-menu-column) ho ya na ho — dono me chalta hai.
   ========================================================================== */
.nav-strip ul.mega-menu > li.mega-menu-megamenu .mega-sub-menu li.mega-menu-item-has-children > a.mega-menu-link {
	color: var(--gbmmf-header, #C41E3A) !important;
	text-transform: uppercase !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 2px !important;
	line-height: 1.2 !important;
	padding: 0 0 10px 0 !important;
	margin: 0 0 14px 0 !important;
	display: inline-block !important;
	width: auto !important;
	background-color: transparent !important;
	border: 0 !important;
	border-bottom: 2px solid var(--gbmmf-accent, #C41E3A) !important;
	white-space: nowrap !important;
	transition: color .22s ease !important;
}

.nav-strip ul.mega-menu > li.mega-menu-megamenu .mega-sub-menu li.mega-menu-item-has-children > a.mega-menu-link:hover,
.nav-strip ul.mega-menu > li.mega-menu-megamenu .mega-sub-menu li.mega-menu-item-has-children > a.mega-menu-link:focus {
	color: var(--gbmmf-accent, #C41E3A) !important;
	filter: brightness(.82);
}

/* Header par MMM ka arrow halka rakho (reference me arrow nahi dikhta) */
.nav-strip ul.mega-menu > li.mega-menu-megamenu .mega-sub-menu li.mega-menu-item-has-children > a.mega-menu-link > .mega-indicator {
	display: none !important;
}


/* ==========================================================================
   4) SUB ITEMS = #333 -> hover #C41E3A   (Fix #4)
   ITEM pehchaan: mega panel ke andar wo item jiske apne children NA hon —
   yaani "Ladies Leather Jackets", "Leather Point", "Leather Bibs",
   "Work Trousers" waghera.
   ========================================================================== */
.nav-strip ul.mega-menu > li.mega-menu-megamenu .mega-sub-menu li.mega-menu-item:not(.mega-menu-item-has-children) > a.mega-menu-link {
	color: var(--gbmmf-item, #333333) !important;
	text-transform: none !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	line-height: 1.4 !important;
	padding: 6px 0 !important;
	margin: 0 !important;
	display: block !important;
	width: 100% !important;
	background-color: transparent !important;
	border: 0 !important;
	white-space: normal !important;
	transition: color .22s ease, padding-left .22s ease !important;
}

.nav-strip ul.mega-menu > li.mega-menu-megamenu .mega-sub-menu li.mega-menu-item:not(.mega-menu-item-has-children) > a.mega-menu-link:hover,
.nav-strip ul.mega-menu > li.mega-menu-megamenu .mega-sub-menu li.mega-menu-item:not(.mega-menu-item-has-children) > a.mega-menu-link:focus,
.nav-strip ul.mega-menu > li.mega-menu-megamenu .mega-sub-menu li.mega-current-menu-item > a.mega-menu-link {
	color: var(--gbmmf-accent, #C41E3A) !important;
	background-color: transparent !important;
	padding-left: 5px !important;
}

/* MMM ke column wrappers — sirf spacing, layout nahi */
.nav-strip ul.mega-menu > li.mega-menu-megamenu .mega-menu-column {
	padding: 0 17px !important;
}

.nav-strip ul.mega-menu > li.mega-menu-megamenu .mega-menu-row {
	padding: 0 !important;
	margin: 0 !important;
}

/* Top-level mega panel ke andar ka padding (hiding ko affect nahi karta) */
.nav-strip ul.mega-menu > li.mega-menu-megamenu > .mega-sub-menu {
	padding: 30px 9px !important;
}


/* ==========================================================================
   5) FLYOUT DROPDOWN KE ITEMS  (non-mega, jaise Home / About ke children)
   --------------------------------------------------------------------------
   *** SIRF RANG AUR SPACING. display KO HAATH NAHI LAGAYA. ***
   v1.0.0 me yahan `display: block !important` tha — wahi page ke neeche
   saare sub-menus khol kar text duplicate kar raha tha.
   ========================================================================== */
.nav-strip ul.mega-menu > li.mega-menu-flyout > .mega-sub-menu {
	padding: 14px 0 !important;
}

.nav-strip ul.mega-menu > li.mega-menu-flyout .mega-sub-menu li.mega-menu-item > a.mega-menu-link {
	color: var(--gbmmf-item, #333333) !important;
	text-transform: none !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	padding: 10px 18px !important;
	border-left: 3px solid transparent !important;
	background-color: transparent !important;
}

.nav-strip ul.mega-menu > li.mega-menu-flyout .mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover,
.nav-strip ul.mega-menu > li.mega-menu-flyout .mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus {
	color: var(--gbmmf-accent, #C41E3A) !important;
	background-color: #f5f6fa !important;
	border-left-color: var(--gbmmf-accent, #C41E3A) !important;
	padding-left: 22px !important;
}

/* Flyout ke andar bhi theme ka laal bar / '›' na aaye */
.nav-strip ul.mega-menu > li.mega-menu-flyout .mega-sub-menu a.mega-menu-link::after,
.nav-strip ul.mega-menu > li.mega-menu-flyout .mega-sub-menu a.mega-menu-link::before {
	content: none !important;
	display: none !important;
}


/* ==========================================================================
   6) ARROWS / INDICATORS
   ========================================================================== */
.nav-strip ul.mega-menu > li.mega-menu-item > a.mega-menu-link > .mega-indicator {
	color: inherit !important;
	background: transparent !important;
	margin-left: 6px;
}


/* ==========================================================================
   7) MOBILE  (theme ka breakpoint 992px)
   --------------------------------------------------------------------------
   Theme: @media(max-width:992px){ .menu-toggle{display:flex}
                                   .main-nav{display:none}
                                   .main-nav.active{display:block} }
   Yeh behaviour THEEK hai — plugin ka JS `.active` toggle karta hai.
   Is liye yahan `.main-nav` par koi display override NAHI kiya gaya
   (v1.0.0 me yeh galti thi). Sirf colours dark panel ke liye.
   ========================================================================== */
@media (max-width: 992px) {

	/* theme ka laal ::after bar mobile par bhi hataao */
	.nav-strip ul.mega-menu > li.mega-menu-item > a.mega-menu-link::after {
		content: none !important;
		display: none !important;
	}

	.nav-strip ul.mega-menu > li.mega-menu-item > a.mega-menu-link {
		padding: 14px 20px !important;
		border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
	}

	/* Mega panel dark */
	.nav-strip ul.mega-menu > li.mega-menu-megamenu > .mega-sub-menu {
		background-color: #152244 !important;
		border-top: 0 !important;
		box-shadow: none !important;
		padding: 18px 22px !important;
	}

	/* Headers mobile par halke laal */
	.nav-strip ul.mega-menu > li.mega-menu-megamenu .mega-sub-menu li.mega-menu-item-has-children > a.mega-menu-link {
		color: #ff6b72 !important;
		border-bottom-color: #ff6b72 !important;
	}

	/* Items safaid-ish (dark panel par) */
	.nav-strip ul.mega-menu > li.mega-menu-megamenu .mega-sub-menu li.mega-menu-item:not(.mega-menu-item-has-children) > a.mega-menu-link {
		color: #dde0ec !important;
		padding: 7px 0 !important;
	}

	.nav-strip ul.mega-menu > li.mega-menu-megamenu .mega-sub-menu li.mega-menu-item:not(.mega-menu-item-has-children) > a.mega-menu-link:hover {
		color: #ffffff !important;
	}

	.nav-strip ul.mega-menu > li.mega-menu-megamenu .mega-menu-column {
		padding: 0 !important;
	}

	/* Flyout bhi dark */
	.nav-strip ul.mega-menu > li.mega-menu-flyout > .mega-sub-menu {
		background-color: #152244 !important;
	}

	.nav-strip ul.mega-menu > li.mega-menu-flyout .mega-sub-menu li.mega-menu-item > a.mega-menu-link {
		color: #dde0ec !important;
		padding: 10px 30px !important;
	}
}


/* ==========================================================================
   8) LAST-RESORT GUARD
   ========================================================================== */
.nav-strip .mega-sub-menu a.mega-menu-link {
	text-shadow: none !important;
}