/* ============================================================
   LUKE Company Store — Header & Nav (v3, airy single-surface)
   luke-header.css  (pairs with luke-header.js v3)
   v5 07/13/2026: category row RETIRED. One sticky white row:
   logo | SHOP mega-button (indigo, real mark) | Home/FAQ |
   search | account | cart. All categories open as a full-width
   MOSAIC MEGA PANEL (flat color tiles + real mark, sublinks on
   parents) built by luke-header.js from the hidden native nav.
   v4 07/13/2026: mosaic gradient ribbon across the very top.
   v3 07/13/2026: killed the stacked color-band layout. The old
   indigo utility strip is GONE (Home/FAQ move into the tab row
   via luke-header.js). One white surface: logo | search |
   balance | account | green cart. Categories = slim underlined
   tabs on white. Color now lives in the content, not the chrome.
   NO CSS custom properties (BrightSites pipeline strips them).
   TOKENS: green #00a082 · green-dark #007a63 · mint #e9f7f2 ·
   indigo #0b0d39 · ink #101223 · muted #5b6178 · line #e8eaf0
   Breakpoints: >=1025px desktop, <=1024px compact/hamburger.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

/* ---------- Old utility strip: gone on every size.
     Its account/cart UL is relocated into the logo row and its
     Home/FAQ links into the tab row by luke-header.js. ---------- */
.navbar-container { display: none !important; }

/* ---------- Logo row: one clean white surface ---------- */
.header-container {
  border-bottom: none !important;
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 1040; /* everything in the chrome floats above content */
  background:
    radial-gradient(640px 130px at 88% 0%, rgba(0, 160, 130, .08), transparent 70%),
    radial-gradient(520px 130px at 30% 100%, rgba(36, 86, 230, .05), transparent 70%),
    linear-gradient(180deg, #f3faf8 0%, #ffffff 100%);
}
/* the theme puts Bootstrap's .border-bottom utility ON the element
   (1px #333 !important) — needs compound specificity to kill */
.header-container.border-bottom, .header-container.mx-auto { border-bottom: 0 none !important; }
.header-container.luke-stuck { box-shadow: 0 10px 24px rgba(11, 13, 57, .08); }
.header-container nav.header-navbar { padding-top: 14px; padding-bottom: 14px; }
/* (v5.1: ribbon + bottom hairline removed per Austin — the header now
   separates from the page by its soft mint wash + scrolled shadow only) */
/* the logo PNG has a baked-in white box — multiply melts it into the wash */
.header-container .navbar-brand img { mix-blend-mode: multiply; }

/* search: soft rectangle, flat green button */
.header-container input[type="search"],
.header-container input[type="text"] {
  border-radius: 12px 0 0 12px !important;
  border: 1.5px solid #dcefe9 !important;
  padding-left: 16px !important;
  background: #f4faf8 !important;
  font-family: 'Outfit', Arial, sans-serif !important;
  color: #101223 !important;
  transition: border-color .15s, box-shadow .15s;
}
.header-container input:focus {
  border-color: #00a082 !important;
  box-shadow: 0 0 0 3px rgba(0, 160, 130, .16) !important;
  outline: none !important;
  background: #fff !important;
}
.header-container .input-group .btn,
.header-container button[type="submit"] {
  border-radius: 0 12px 12px 0 !important;
  background: #00a082 !important;
  border-color: #00a082 !important;
  transition: background .15s;
}
.header-container .input-group .btn:hover,
.header-container button[type="submit"]:hover { background: #007a63 !important; border-color: #007a63 !important; }
.header-container .input-group .btn i,
.header-container .input-group .btn svg,
.header-container button[type="submit"] i,
.header-container button[type="submit"] svg { color: #fff !important; fill: #fff !important; }

/* ---------- Category row: RETIRED (v5) ----------
   Hidden at every size; it stays in the DOM only as the data
   source luke-header.js reads to build the Shop mega panel.
   (The compact hamburger flyout is unaffected.) ---------- */
.category-container { display: none !important; }

/* ---------- SHOP mega-button (logo row, built by luke-header.js) ---------- */
#luke-shop-wrap { display: flex; align-items: center; gap: 14px; margin-left: 26px; }
#luke-shop-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: #0b0d39; color: #fff; border: none; border-radius: 12px;
  padding: 12px 18px;
  font-family: 'Outfit', Arial, sans-serif; font-size: 13.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: background .15s;
  box-shadow: 0 4px 12px rgba(11, 13, 57, .18);
}
#luke-shop-btn:hover { background: #1a1e5c; }
#luke-shop-btn svg.mk { width: 16px; height: 16px; color: #00cfa5; }
#luke-shop-btn svg.cr { width: 11px; height: 11px; transition: transform .18s; }
#luke-shop-btn.open svg.cr { transform: rotate(180deg); }

/* Home/FAQ — quiet inline links beside the Shop button */
.luke-pages-inline { display: flex; align-items: center; gap: 2px; }
.luke-pages-inline a {
  font-family: 'Outfit', Arial, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #5b6178 !important;
  text-decoration: none !important;
  padding: 8px 9px;
  transition: color .15s;
}
.luke-pages-inline a:hover { color: #00a082 !important; }

/* ---------- SHOP mega panel: the mosaic, as navigation ---------- */
.luke-mega { position: absolute; top: 100%; left: 0; right: 0; display: none; z-index: 1060; }
.luke-mega.open { display: block; }
.luke-mega-card {
  max-width: 1400px; margin: 0 auto; padding: 20px;
  background: #fff;
  border: 1px solid #e8eaf0; border-top: none;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 30px 60px rgba(11, 13, 57, .22), 0 8px 20px rgba(11, 13, 57, .10);
  animation: lukeMega .2s ease-out;
}
@keyframes lukeMega { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.luke-mega-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 10px; }
.luke-mega-tile {
  position: relative; overflow: hidden; border-radius: 12px;
  padding: 16px 16px 14px; min-height: 78px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  transition: transform .16s, box-shadow .16s, filter .16s;
}
.luke-mega-tile:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 22px rgba(11, 13, 57, .22); }
.luke-mega-tile > svg { position: absolute; right: -10px; bottom: -10px; width: 52px; height: 52px; color: #fff; opacity: .2; pointer-events: none; }
.luke-mega-tile a.main {
  font-family: 'Outfit', Arial, sans-serif; font-size: 15px; font-weight: 700;
  color: #fff !important; text-decoration: none !important; line-height: 1.25;
}
.luke-mega-tile a.main::after { content: ''; position: absolute; inset: 0; } /* whole tile clickable */
.luke-mega-subs { display: flex; flex-wrap: wrap; gap: 2px 12px; position: relative; z-index: 1; }
.luke-mega-subs a { font-family: 'Outfit', Arial, sans-serif; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .85) !important; text-decoration: none !important; }
.luke-mega-subs a:hover { color: #fff !important; text-decoration: underline !important; }

/* ---------- Dropdown cards ---------- */
.dropdown-menu {
  background: #fff !important;
  border: 1px solid #e8eaf0 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(11, 13, 57, .14), 0 2px 8px rgba(11, 13, 57, .07) !important;
  padding: 8px 0 0 !important;
  margin-top: 0 !important;
  min-width: 220px;
  font-family: 'Outfit', Arial, sans-serif !important;
  overflow: hidden;
  animation: lukeDrop .18s ease-out;
  transform-origin: top;
}
@keyframes lukeDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.dropdown-menu .dropdown-item {
  color: #0b0d39 !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin: 0 8px;
  width: calc(100% - 16px);
  transition: background .12s, color .12s;
}
.dropdown-menu .dropdown-item > span.px-3 { font-weight: 400; color: #5b6178; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus { background: #e9f7f2 !important; color: #007a63 !important; }
.dropdown-menu .dropdown-item:hover > span.px-3 { color: #007a63; }
/* "Shop All" footer CTA — flat indigo block (relabeled by luke-header.js) */
.dropdown-menu .dropdown-item.border-top {
  border-top: none !important;
  margin: 8px 0 0 !important;
  border-radius: 0 !important;
  width: 100%;
  display: block;
  padding: 12px 20px !important;
  background: #0b0d39 !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
}
.dropdown-menu .dropdown-item.border-top:hover { background: #1a1e5c !important; color: #fff !important; }
.dropdown-menu .dropdown-item.disabled,
.dropdown-menu .dropdown-item[aria-disabled="true"] { color: #9aa1b5 !important; font-weight: 400 !important; }

/* ---------- Logo-row action cluster (#luke-right, built by luke-header.js) ---------- */
#luke-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
#luke-right form { margin: 0; width: 400px !important; flex: 0 1 400px; }
#luke-right .input-group { width: 100% !important; display: flex !important; flex-wrap: nowrap !important; }
#luke-right .input-group > input { width: auto !important; flex: 1 1 auto !important; min-width: 0; height: 44px !important; }
#luke-right .input-group .btn, #luke-right button { height: 44px !important; display: flex; align-items: center; }

.luke-acct { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.luke-acct .nav-link {
  color: #0b0d39 !important;
  font-family: 'Outfit', Arial, sans-serif !important;
  font-weight: 600;
  font-size: 14px !important;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px !important;
  border-radius: 11px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.luke-acct .nav-link:hover { background: #f2f3f6; color: #007a63 !important; }
.luke-avatar {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, #00a082, #0899b2);
  color: #fff; font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
/* tiny mark inside the balance chip (added by luke-header.js) */
.luke-bal-mk { display: inline-flex; align-items: center; }
.luke-bal-mk svg { width: 12px; height: 12px; display: block; }
/* balance chip — matched by link; LUKE uses /account/balance */
.luke-acct li:has(a[href*="account_balance"]) .nav-link,
.luke-acct li:has(a[href*="/account/balance"]) .nav-link { background: #e9f7f2; color: #007a63 !important; font-weight: 700; }
.luke-acct li:has(a[href*="account_balance"]) .nav-link:hover,
.luke-acct li:has(a[href*="/account/balance"]) .nav-link:hover { background: #d9f1e8; }
/* cart — the one solid green block in the chrome */
.luke-acct li:last-child .nav-link { background: linear-gradient(135deg, #00a082 0%, #00917d 100%) !important; color: #fff !important; padding: 10px 16px !important; border-radius: 11px; box-shadow: 0 5px 14px rgba(0, 160, 130, .3); }
.luke-acct li:last-child .nav-link:hover { background: linear-gradient(135deg, #007a63 0%, #00695c 100%) !important; color: #fff !important; box-shadow: 0 7px 18px rgba(0, 160, 130, .38); }
.luke-acct li:last-child .nav-link svg { width: 19px; height: 17px; flex: 0 0 auto; }

/* account dropdown pinned (kills Popper flicker) */
.luke-acct .nav-item.dropdown { position: relative; }
.luke-acct .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important; left: auto !important; bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  animation: lukeFade .15s ease-out !important;
}
@keyframes lukeFade { from { opacity: 0; } to { opacity: 1; } }

/* cart count badge + search toggle (compact only) */
.luke-badge { display: none; }
.luke-search-li { display: none; }
#luke-search-toggle {
  width: 38px; height: 38px; border-radius: 10px; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, color .15s;
}

/* ---------- Desktop 1025–1279: condense search ---------- */
@media (min-width: 1025px) and (max-width: 1279.98px) {
  #luke-right form { width: 260px !important; flex: 0 1 260px; }
  #luke-right { gap: 8px; }
}
@media (min-width: 1025px) and (max-width: 1119.98px) {
  #luke-right form { width: 210px !important; flex: 0 1 210px; }
  .luke-acct .luke-name { display: none; } /* avatar only when tight */
}

/* ============================================================
   COMPACT MODE — at or below 1024px
   ============================================================ */
@media (max-width: 1024.98px) {
  .category-container { display: none !important; }
  #luke-shop-wrap { display: none !important; }
  .luke-mega { display: none !important; }
  .header-container .headerLinks { display: none !important; }
  .header-container #mobile-slider-button { order: 0; flex: 1 1 0; display: inline-flex !important; justify-content: flex-start; }
  .header-container #mobile-slider-button { color: #00a082 !important; }
  .header-container #mobile-slider-button span { background: transparent !important; color: #00a082 !important; }
  .header-container #mobile-slider-button svg { stroke: #00a082; fill: #00a082; }
  .header-container #mobile-slider-button i { color: #00a082 !important; }
  .luke-acct > li:not(.luke-search-li):not(:last-child) { display: none !important; }
  .header-container nav.header-navbar > button.d-lg-none:not(#mobile-slider-button) { display: none !important; }

  /* row 1: hamburger | centered logo | actions */
  .header-container nav.header-navbar { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; padding-top: 10px; padding-bottom: 10px; }
  #luke-right { display: contents; }
  .header-container .navbar-brand { order: 1; flex: 0 1 auto; margin: 0; display: flex; justify-content: center; }
  .header-container .navbar-brand img { max-height: 42px; width: auto; }
  .luke-acct { order: 2; flex: 1 1 0; width: auto; justify-content: flex-end; gap: 8px; }
  .luke-acct li { display: flex; align-items: center; margin: 0 !important; }
  .luke-acct .nav-link { padding: 6px 8px !important; margin: 0 !important; }
  .luke-acct .dropdown-toggle::after { display: none; }

  /* row 2: search — hidden until toggled */
  #luke-right form { order: 3; flex: 1 1 100% !important; width: 100% !important; max-width: none; display: none !important; }
  nav.luke-search-open #luke-right form { display: flex !important; animation: lukeSearchIn .22s cubic-bezier(.2, .8, .3, 1); margin-top: 4px; }
  @keyframes lukeSearchIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
  #luke-right .input-group { box-shadow: 0 4px 12px rgba(11, 13, 57, .08); border-radius: 12px; }
  #luke-right .input-group > input { height: 36px !important; font-size: 13px !important; border-width: 1px !important; }
  #luke-right .input-group .btn, #luke-right button { height: 36px !important; }

  /* action pair: matching 38px green squares */
  #luke-search-toggle { background: #00a082; color: #fff; }
  #luke-search-toggle:hover { background: #007a63; color: #fff; }
  nav.luke-search-open #luke-search-toggle { background: #e9f7f2 !important; color: #0b0d39 !important; }
  .luke-search-li { display: flex; }

  .luke-acct .dropdown-toggle { width: 38px; height: 38px; padding: 0 !important; justify-content: center; border-radius: 10px !important; background: transparent !important; }
  .luke-acct .dropdown-toggle:hover { box-shadow: 0 0 0 3px rgba(0, 160, 130, .2); }
  .luke-avatar { width: 38px; height: 38px; font-size: 13.5px; border-radius: 10px; }
  .luke-acct .dropdown-toggle:hover .luke-avatar { background: #007a63; }

  /* balance lives in the account dropdown on compact */
  .luke-acct li:has(a[href*="account_balance"]),
  .luke-acct li:has(a[href*="/account/balance"]) { display: none; }

  /* account name hidden — avatar only */
  .luke-acct .luke-name { display: none; }

  /* cart: 38px green square, count badge instead of price text */
  .luke-cart-text { display: none; }
  .luke-acct li:last-child .nav-link { position: relative; width: 38px; height: 38px; min-width: 38px; padding: 0 !important; border-radius: 10px !important; justify-content: center; overflow: visible; box-shadow: none; }
  .luke-acct li:last-child .nav-link svg { width: 17px; height: 15px; }
  .luke-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 18px; height: 18px; border-radius: 7px;
    background: #0b0d39; color: #fff;
    font-size: 10.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px; border: 2px solid #fff;
  }
}

/* 992–1024 gap: un-hide the theme's slide panel only when its inline style shows it */
@media (min-width: 992px) and (max-width: 1024.98px) {
  .mobile-slider.d-lg-none:not([style*="display: none"]):not([style*="display:none"]) { display: block !important; }
  .mobile-slider-overlay:not([style*="display: none"]):not([style*="display:none"]) { display: block !important; }
}

/* small phones */
@media (max-width: 575.98px) {
  .header-container #mobile-slider-button { flex: 0 0 auto; }
  .header-container .navbar-brand { margin: 0 0 0 8px; justify-content: flex-start; }
  .luke-acct { flex: 1 1 0; }
}
@media (max-width: 399.98px) { .header-container .navbar-brand img { max-height: 32px; } }
@media (max-width: 299.98px) { .header-container .navbar-brand img { max-height: 26px; } }