/** Shopify CDN: Minification failed

Line 1086:0 Expected "}" to go with "{"

**/
/* =========================
   BEST CRUISE SHIRTS
   Header + Mega Menu CSS (Clean, Consolidated)
   ========================= */


/* =========================
   1) HEADER WRAPPER BACKGROUND (Sand + Texture)
   ========================= */

.header-wrapper {
  background-color: #F4EBD0; /* Sand fallback */
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0.05)),
    url("https://cdn.shopify.com/s/files/1/0801/1386/0823/files/header-sand-texture.png?v=1767791945");
  background-repeat: repeat;
  background-size: 420px auto;
}

.header {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding-top: 8px;
  padding-bottom: 8px;
}


/* =========================
   2) TOP LEVEL NAV LINKS
   ========================= */

.header__menu-item {
  font-weight: 600;
  letter-spacing: -0.05px;
  text-transform: uppercase;
  font-size: 16px;
  padding: 18px 14px;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
  color:#0b3c5d;
  font-family:"Open Sans";
}

.header__menu-item:hover {
  opacity: 0.90;
}

/* Active/current menu item underline */
.header__active-menu-item {
  text-decoration: none !important;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  color:#0b3c5d;
}

/* Remove dropdown caret/chevron (Desktop & Mobile) */
.header__menu-item .icon-caret,
.header__menu-item .icon-chevron-down,
.header__menu-item svg[aria-hidden="true"],
.menu-drawer__menu-item .icon-caret,
.menu-drawer__menu-item .icon-chevron-down {
  display: none !important;
}


/* =========================
   3) MEGA MENU BASE STYLING
   ========================= */

/* Submenu container base */
.header__submenu {
  background: linear-gradient(180deg, #0b1d33 0%, #071423 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  padding: 34px 60px;
  margin-top: 6px;
}

/* Column headers */
.header__submenu h3,
.header__submenu .mega-menu__title {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 12px;
  color: #ffffff;
}

/* Default link color inside submenu */
.header__submenu .mega-menu__link--level-2,
.header__submenu .list-menu__item--link,
.header__submenu a {
  color: rgba(255,255,255,0.90);
}

/* Level 2 Headers (column titles) */
.header__submenu .mega-menu__link--level-2 {
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* Level 3 Links (items) baseline */
.header__submenu .mega-menu__link--level-3 {
  font-weight: 500;
  font-size: 14px;
  color: rgba(255,255,255,0.82);
  padding: 8px 0;
}

/* Hover for submenu links (baseline) */
.header__submenu a {
  transition: transform 0.18s ease, color 0.18s ease;
}
.header__submenu a:hover {
  color: #7fd1ff; /* icy blue */
  transform: translateX(2px);
}

/* Optional images inside mega menu */
.mega-menu__image {
  max-width: 180px;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}


/* =========================
   4) DESKTOP MEGA MENU LAYOUT + FULL WIDTH (990px+)
   ========================= */

@media screen and (min-width: 990px) {

  /* Richer background for desktop dropdown */
  .header__submenu {
    background:
      radial-gradient(circle at top left, rgba(30,64,175,0.08), transparent 40%),
      linear-gradient(180deg, #0b1d33 0%, #071423 100%);
    border-top: 1px solid rgba(255,255,255,0.12);
  }

  /* Ensure header sits above page content */
  .header-wrapper, .header {
    position: relative;
    z-index: 20;
  }

  /* Use full viewport width dropdown */
  .header details {
    position: static;
  }

  .header__submenu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 999 !important;
  }

  /* Center the inner content to a nice container width */
  .header__submenu .mega-menu__content,
  .header__submenu .list-menu {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* Column spacing */
  .mega-menu__list {
    gap: 34px;
    padding:0px !important;
  }

  /* Vertical separators between columns */
  .mega-menu__list > li:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.08);
    padding-right: 0px;
    margin-right: 4px;
  }




/* =========================
   5) HOVER-TO-OPEN MEGA MENU (Desktop Only)
   ========================= */

@media screen and (min-width: 990px) {

  /* Smooth animation defaults */
  .header__submenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }

  /* Open submenu on hover */
  .header details:hover > .header__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Keep dropdown on top while hovered */
  
}
.header details:hover {
    z-index: 50;
  }
/* Blue underline animation when menu is open */
details[open] > .header__menu-item {
  position: relative;
}
details[open] > .header__menu-item:after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  height: 2px;
  background: rgba(127, 209, 255, 0.85);
  border-radius: 999px;
}


/* =========================
   6) DESKTOP LINK “DRESS UP” (FIXED — no giant pill bars)
   ========================= */

@media screen and (min-width: 990px) {

  /* IMPORTANT:
     Undo any broad styling applied to .mega-menu__link
     (prevents full-width white pill bars) */
  .header__submenu .mega-menu__link {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    transform: none !important;
    color: inherit !important;
  }
  .header__submenu .mega-menu__link::before,
  .header__submenu .mega-menu__link::after {
    content: none !important;
  }

  /* Make Level 3 items look premium (chips) */
  .header__submenu .mega-menu__link--level-3 {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.92) !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    width: auto !important;
    max-width: 100%;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }

  .header__submenu .mega-menu__link--level-3:hover {
    background: rgba(127, 209, 255, 0.16) !important;
    border-color: rgba(127, 209, 255, 0.35) !important;
    color: #eaf7ff !important;
    transform: translateY(-1px);
  }

/* Only grid the INNER lists inside each column (not the column wrapper) */
@media screen and (min-width: 990px) {
  .header__submenu .mega-menu__list > li > ul,
  .header__submenu .mega-menu__list > li .mega-menu__list {
    display: grid;
    gap: 10px 12px;
    margin-top: 10px;
  }
}


  /* Keep Level 2 headers clean */
  .header__submenu .mega-menu__link--level-2 {
    display: inline-block !important;
    padding: 0 0 10px 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: rgba(255,255,255,0.95) !important;
  }

  /* OPTIONAL: featured chip (add class 'featured' to a link if you can) */
  .header__submenu .mega-menu__link--level-3.featured {
    background: linear-gradient(135deg, rgba(56,189,248,0.45), rgba(14,165,233,0.28)) !important;
    border-color: rgba(127,209,255,0.50) !important;
  }
}

@media screen and (min-width: 990px) {
  /* Center the main navigation */
  .header__inline-menu {
  left: 48%;
}


  /* Ensure header container allows absolute positioning */
  .header {
    position: relative;
  }
}

@media screen and (min-width: 990px) {
  /* Let the header span the full browser width (not the page-width container) */
  .header--middle-left .header__inline-menu {
        margin-left: 60PX;
        margin-top: 10px;
    }
}

/* =========================
   Mega Menu – Concept 3 (Icon-driven look)
   Dawn / Desktop only
   ========================= */
@media screen and (min-width: 990px) {

  /* The dropdown panel */
  .mega-menu__content,
  .header__submenu.mega-menu__content {
    background: #f7f3ee;              /* warm sand */
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
    padding: 28px 30px;
    overflow: hidden;
  }

  /* Make the inner layout a 3-column grid */
  .mega-menu__list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 26px;
    align-items: start;
  }

  /* Each top-level group/column */
  .mega-menu__list > li {
    padding: 0 18px;
    position: relative;
  }

  /* Vertical separators between columns */
  .mega-menu__list > li:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(0,0,0,.08);
  }

  /* Column heading (the parent link) */
  .mega-menu__list > li > a,
  .mega-menu__list > li > .mega-menu__link {
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    font-size: 15px;
    margin-bottom: 10px;
    display: inline-block;
  }

  /* Links within each column */
  .mega-menu__link,
  .mega-menu__link--level-2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    line-height: 1.2;
    transition: background-color .18s ease, transform .18s ease;
  }

  /* Hover state */
  .mega-menu__link:hover,
  .mega-menu__link--level-2:hover {
    background: rgba(11,79,108,.10); /* cruise blue tint */
    transform: translateY(-1px);
  }

  /* Keep the dropdown from becoming a giant slab */
  .mega-menu__content {
    max-width: 1100px;
    margin: 14px auto 0 auto;
  }

  /* Responsive: drop to 2 columns on smaller desktops */
  @media screen and (max-width: 1200px) {
    .mega-menu__list {
      grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
  }
}


/* ==========================================================
   Concept 3 Mega Menu (Icon-driven columns)
   Dawn (desktop)
   - 3 columns now
   - automatically supports 4 columns later
   ========================================================== */
@media screen and (min-width: 990px) {

  /* Panel */
  .mega-menu__content,
  .header__submenu.mega-menu__content {
    background: #f7f3ee; /* warm sand */
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
    padding: 26px 28px;
    overflow: hidden;
  }

  /* Grid: default to 3 columns, but fluid */
  .mega-menu__list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 26px;
    align-items: start;
  }

  /* If you add a 4th column later, it will wrap nicely.
     If you WANT forced 4 columns on wide screens, see optional rule below. */

  /* Column container */
  .mega-menu__list > li {
    padding: 0 18px;
    position: relative;
    min-width: 0;
  }

  /* Vertical separators */
  .mega-menu__list > li:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(0,0,0,.08);
  }

  /* Column heading (top link) */
  .mega-menu__list > li > a,
  .mega-menu__list > li > .mega-menu__link {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .02em;
    text-transform: none;
    margin-bottom: 10px;
    display: inline-block;
    color:#0b1f33;
  }

   /* Column heading (top link) */
  .mega-menu__list > li > a::before,
  .mega-menu__list > li > .mega-menu__link::before {
    display: none;
  }


  

  /* Links */
  .mega-menu__link,
  .mega-menu__link--level-2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    text-decoration: none;
    line-height: 1.2;
    transition: background-color .18s ease, transform .18s ease;
  }

  .mega-menu__link:hover,
  .mega-menu__link--level-2:hover {
    background: rgba(11,79,108,.10); /* cruise blue tint */
    transform: translateY(-1px);
  }

  /* Make dropdown feel intentional, not a giant slab */
  .mega-menu__content {
    max-width: 1100px;
    margin: 14px auto 0 auto;
  }

  /* Icon base (we apply icons via link URL patterns below) */
  .mega-menu__link::before,
  .mega-menu__link--level-2::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-block;
    border-radius: 6px;
    background: rgba(11,79,108,.12);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 16px 16px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 16px 16px;
  }

  /* ==========================================================
     ICONS (edit handles to match YOUR collection URLs)
     Uses inline SVG masks (no extra files needed)
     ========================================================== */

  /* ==========================================================
   Mega Menu PNG icons (by collection handle in URL)
   - Uses your uploaded 24px PNGs from Shopify Files
   - Overrides the old ::before mask icons
   ========================================================== */
@media screen and (min-width: 990px) {

  /* Kill the old mask icon system */
  .mega-menu__link::before,
  .mega-menu__link--level-2::before {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background: transparent !important;
  }

  /* Turn the ::before into an image */
  .mega-menu__link::before,
  .mega-menu__link--level-2::before {
    content: "";
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    border-radius: 0;
  }

  /* ---- ICON MAP (match handles in the href) ---- */
  /* Replace each URL(...) with the full Shopify Files URL for that png */
/* ============================
   Alaska Cruise Shirts — Mega Menu Icons
   Replace the domain + filenames as needed
   ============================ */

/* ============================
   AlaskaCruiseShirts — Mega Menu Icons (NEW filenames)
   Paste into your theme CSS (or Custom CSS area)
   ============================ */

@media screen and (min-width: 990px) {

/* =========================================
   BEST CRUISE SHIRTS - MEGA MENU ICONS
   ========================================= */

/* ----------------------------
     SHOP ALL / MERCHANDISING
   ---------------------------- */
/* "Shop All Shirts" */
.mega-menu__link[href*="/collections/shop-all-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-all_shirts.png") !important; 
}

/* "Best Sellers" */
.mega-menu__link[href*="/collections/best-sellers"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-best-sellers.png") !important; 
}

/* "New Arrivals" */
.mega-menu__link[href*="/collections/new-arrivals"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-new-arrivals.png") !important; 
}

/* "2026 Cruise Shirts" */
.mega-menu__link[href*="/collections/cruise-2026-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-2026-cruise.png") !important; 
}


/* ----------------------------
     DESTINATIONS
   ---------------------------- */
/* "Alaska Cruise Shirts" */
.mega-menu__link[href*="/collections/alaska-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-alaska.png") !important; 
}

/* "Caribbean Cruise Shirts" */
.mega-menu__link[href*="/collections/caribbean-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-caribbean.png") !important; 
}

/* "Bahamas Cruise Shirts" */
.mega-menu__link[href*="/collections/bahamas-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-bahamas.png") !important; 
}

/* "Mexico Cruise Shirts" */
.mega-menu__link[href*="/collections/mexico-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-mexico.png") !important; 
}


/* ----------------------------
     APPAREL TYPES
   ---------------------------- */
/* "T-Shirts" */
.mega-menu__link[href*="/collections/best-cruise-t-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-tee.png") !important; 
}

/* "Tank Tops" */
.mega-menu__link[href*="/collections/best-cruise-tank-tops"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-tank.png") !important; 
}

/* "Long Sleeves" */
.mega-menu__link[href*="/collections/best-cruise-long-sleeves"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-longsleeve.png") !important; 
}

/* "3/4 Sleeve Shirts" */
.mega-menu__link[href*="/collections/best-cruise-three-quarter-sleeve-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-3-4sleeve.png") !important; 
}

/* "Sweatshirts" */
.mega-menu__link[href*="/collections/best-cruise-sweatshirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-sweatshirt.png") !important; 
}

/* "Hoodies" */
.mega-menu__link[href*="/collections/best-cruise-hoodies"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-hoodie.png") !important; 
}

/* "Women's Shirts" */
.mega-menu__link[href*="/collections/best-cruise-womens-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-womens.png") !important; 
}

/* "Ladies Tank" */
.mega-menu__link[href*="/collections/best-cruise-ladies-tanks"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-ladies-tank.png") !important; 
}

/* "Premium Tee" */
.mega-menu__link[href*="/collections/best-cruise-premium-tee"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-premium.png") !important; 
}

/* "Comfort Color" */
.mega-menu__link[href*="/collections/best-cruise-comfort-colors"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-comfort.png") !important; 
}

/* "V-Neck Tee" */
.mega-menu__link[href*="/collections/best-cruise-v-neck-tee"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-v-neck.png") !important; 
}


/* ----------------------------
     THEMES / GROUPS
   ---------------------------- */
/* "Classic Cruise Shirts" */
.mega-menu__link[href*="/collections/classic-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-classic-cruise.png") !important; 
}

/* "Funny Cruise Shirts" */
.mega-menu__link[href*="/collections/funny-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-funny-cruise.png") !important; 
}

/* "Family Cruise Shirts" */
.mega-menu__link[href*="/collections/family-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-family.png") !important; 
}

/* "Group & Squad Shirts" */
.mega-menu__link[href*="/collections/group-squad-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-group.png") !important; 
}

/* "Couples Cruise Shirts" */
.mega-menu__link[href*="/collections/couples-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-couples-cruise.png") !important; 
}

/* "Matching Cruise Shirts" */
.mega-menu__link[href*="/collections/matching-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-matching.png") !important; 
}

/* "Birthday Cruise Shirts" */
.mega-menu__link[href*="/collections/birthday-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-birthday-cruise.png") !important; 
}

/* "Retirement Cruise Shirts" */
.mega-menu__link[href*="/collections/retirement-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-retirement-cruise.png") !important; 
}

/* "Most Likely To Cruise" */
.mega-menu__link[href*="/collections/most-likely-to-cruise"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-most-likely.png") !important; 
}

/* "Pool Deck Humor" */
.mega-menu__link[href*="/collections/pool-deck-humor"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-pool-deck.png") !important; 
}

/* "Drinking & Party Tees" */
.mega-menu__link[href*="/collections/drinking-party-tees"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-party.png") !important; 
}


/* ----------------------------
     NEW OCCASIONS (Added)
   ---------------------------- */
/* "First Cruise Shirts" - (Using Classic icon as placeholder if you don't have icon-first-cruise.png) */
.mega-menu__link[href*="/collections/first-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-classic-cruise.png") !important; 
}

/* "Anniversary Cruise Shirts" - (Using Couples icon) */
.mega-menu__link[href*="/collections/anniversary-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-anniversary.png") !important; 
}

/* "Graduation Cruise Shirts" - (Using Party icon) */
.mega-menu__link[href*="/collections/graduation-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-graduation.png") !important; 
}

/* "Honeymoon Cruise Shirts" - (Using Couples icon) */
.mega-menu__link[href*="/collections/honeymoon-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-couples-cruise.png") !important; 
}

/* "Girls Trip Cruise Shirts" - (Using Party icon) */
.mega-menu__link[href*="/collections/girls-trip-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-girls-trip.png") !important; 
}

/* "Friends Trip Cruise Shirts" - (Using Group icon) */
.mega-menu__link[href*="/collections/friends-trip-cruise-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-friends-trip.png") !important; 
}

/* "Bachelorette / Bachelor Shirts" - (Using Party icon) */
.mega-menu__link[href*="/collections/bachelorette-bachelor-shirts"]::before { 
    background-image: url("https://bestcruiseshirts.com/cdn/shop/files/icon-bachelorette.png") !important; 
}

@media screen and (min-width: 990px) {
  /* icon box size */
  .mega-menu__link::before,
  .mega-menu__link--level-2::before {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  /* actual PNG scaling */
  .mega-menu__link::before,
  .mega-menu__link--level-2::before {
    background-size: 18px 18px !important; /* <- change to 16px if you want smaller */
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  /* optional: tighten spacing between icon + label */
  .mega-menu__link,
  .mega-menu__link--level-2 {
    gap: 8px !important;  /* was 10px */
  }
}







  /* Small-screen desktop: 2 columns */
  @media screen and (max-width: 1200px) {
    .mega-menu__list {
      grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
  }
}
@media screen and (min-width: 990px) {
  /* Turn OFF the dark full-width background for Concept 3 */
  .header__submenu {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* Keep the dropdown centered nicely */
  .mega-menu__content {
    margin-top: 14px !important;
  }
}

  .header .header__submenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }




  /* STOCK CSS FOR MEGA MENU   */


  .mega-menu {
  position: static;
}

.mega-menu__content {
  background-color: rgb(var(--color-background));
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  left: 0;
  overflow-y: auto;
  padding-bottom: 3rem;
  padding-top: 3rem;
  position: absolute;
  right: 0;
  top: 100%;
}

.shopify-section-header-sticky .mega-menu__content {
  max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem);
}

.header-wrapper--border-bottom .mega-menu__content {
  border-top: 0;
}

.js .mega-menu__content {
  opacity: 0;
  transform: translateY(-1.5rem);
}

.mega-menu[open] .mega-menu__content {
  opacity: 1;
  transform: translateY(0);
}

.mega-menu__list {
  display: grid;
  gap: 1.8rem 2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  padding: 0px;
}

.mega-menu__link {
  color: rgba(var(--color-foreground), 0.75);
  display: block;
  line-height: calc(1 + 0.3 / var(--font-body-scale));
  padding-bottom: 0.6rem;
  padding-top: 0.6rem;
  text-decoration: none;
  transition: text-decoration var(--duration-short) ease;
  word-wrap: break-word;
  font-size: 15px;
  font-weight: 600;
}

.mega-menu__link--level-2 {
  font-weight: bold;
}

.header--top-center .mega-menu__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0;
}



.mega-menu__link:hover,
.mega-menu__link--active {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  font-size: 14px;
  font-weight: 600;
}

.mega-menu__link--active:hover {
  text-decoration-thickness: 0.2rem;
}

.mega-menu .mega-menu__list--condensed {
  display: block;
}

.mega-menu__list--condensed .mega-menu__link {
  font-weight: normal;
}


@media screen and (min-width: 990px) {
  header-menu .mega-menu__content {
    max-width: 1100px;
    margin: 14px auto 0;
  }
}




@media screen and (min-width: 990px) {
  /* Mega menu panel */
  .header .mega-menu__content {
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(2, 6, 23, 0.18);
    border: 1px solid rgba(15, 23, 42, 0.10);
    overflow: hidden;
  }

  /* Inner padding (tighten a bit) */
  .header .mega-menu__list {
    padding: 22px 26px;
    gap: 22px;
  }

  /* Column headings */
  .header .mega-menu__list > li > a.mega-menu__link--level-2 {
    font-weight: 800;
    letter-spacing: 0.02em;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  }

  /* Link rows */
  .header .mega-menu__link.link {
    border-radius: 10px;
    transition: background-color .15s ease, transform .15s ease;
    letter-spacing: -0.05px;
  }

  .header .mega-menu__link.link:hover {
    background: rgba(2, 132, 199, 0.08); /* soft “cruise blue” hover */
    transform: translateY(-1px);
  }

  /* Icons (if you use ::before icons) */
  .header .mega-menu__link::before {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.95;
  }
}



/* ==========================================================
   Flamingo (Dawn) Mega Menu — Hover to Open (Desktop)
   Put this at the END of your CSS file
   ========================================================== */
@media screen and (min-width: 990px) {

  /* Ensure full-width positioning works */
  .header details.mega-menu { 
    position: static; 
  }

  /* Default hidden state (matches Dawn behavior) */
  .header details.mega-menu > .mega-menu__content {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }

  /* Open on hover + keyboard focus */
  .header details.mega-menu:hover > .mega-menu__content,
  .header details.mega-menu:focus-within > .mega-menu__content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 999;
  }

  /* Keep the hovered menu above adjacent items */
  .header details.mega-menu:hover {
    z-index: 50;
  }
}

/* ==========================================================
   FORCE Dawn mega menu to open on HOVER (Desktop)
   Paste at the very bottom of your CSS
   ========================================================== */
@media screen and (min-width: 990px) {

  /* Make sure the header can layer above content */
  .header-wrapper, .header { position: relative; z-index: 50; }

  /* Ensure details isn't constrained */
  header-menu details.mega-menu { position: static; }

  /* Force the dropdown panel to exist (not display:none) */
  header-menu details.mega-menu > .mega-menu__content {
    display: block !important;          /* key line */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) !important;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
    z-index: 999 !important;
  }

  /* Show on hover or keyboard focus */
  header-menu details.mega-menu:hover > .mega-menu__content,
  header-menu details.mega-menu:focus-within > .mega-menu__content {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* Still show when clicked open */
  header-menu details.mega-menu[open] > .mega-menu__content {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* Do not allow summary to be non-interactive */
  header-menu details.mega-menu > summary { pointer-events: auto !important; }
}