/* ============================================================
   LUKE Company Store — Hamburger Flyout Redesign
   luke-nav-flyout.css  (pairs with snippets/cpp/cpp_nav_flyout.liquid)
   Pairs with luke-header.css (load first).
   v2 07/13/2026: LUKE flavor — flat colors, squared corners, Outfit.
   NO CSS custom properties (BrightSites pipeline strips :root vars).
   ============================================================ */

/* panel: floating white card, hugs content, never full page height */
.mobile-slider {
  background: #fff !important;
  width: min(330px, 86vw) !important;
  box-shadow: 0 0 0 1px #e3ebe9, 12px 0 40px rgba(0, 45, 64, .18) !important;
  border-radius: 0 18px 18px 0;
  padding: 0 !important;
  height: auto !important;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}
/* old theme triangle decoration */
.mobile-slider::before { display: none !important; }
/* frosted overlay */
.mobile-slider-overlay { background: rgba(0, 24, 32, .45) !important; backdrop-filter: blur(3px); }

.luke-fly { font-family: 'Outfit', Arial, sans-serif; padding: 14px 14px 22px; }
.luke-fly-head { display: flex; align-items: center; padding: 10px 8px 14px; border-bottom: 2px solid #00a082; margin-bottom: 12px; }
.luke-fly-title { font-size: 19px; font-weight: 700; color: #0b0d39; letter-spacing: .02em; }

/* staggered entrance (restarts each open because display toggles) */
.luke-fly-group, .luke-fly-solo, .luke-fly-pages { animation: lukeFlyIn .34s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--d, 0ms); }
@keyframes lukeFlyIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }

/* category accordion groups */
.luke-fly-group { border-radius: 12px; margin-bottom: 4px; overflow: hidden; transition: background .15s; }
.luke-fly-group.open { background: #eff6f3; }
.luke-fly-parent { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: none; cursor: pointer; padding: 13px 12px; font-family: inherit; font-size: 15.5px; font-weight: 700; color: #0b0d39; letter-spacing: .02em; }
.luke-fly-parent:hover { color: #00a082; }
.luke-fly-chev { transition: transform .25s ease; color: #93a7a2; flex: 0 0 auto; }
.luke-fly-group.open .luke-fly-chev { transform: rotate(180deg); color: #00a082; }
.luke-fly-kids { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.2, .8, .3, 1); }
.luke-fly-kids-inner { padding: 0 8px 10px; }
.luke-fly-kid { display: block; padding: 8px 10px; border-radius: 8px; color: #3d5866; font-size: 14.5px; text-decoration: none; transition: background .12s, color .12s; }
.luke-fly-kid.lvl1 { font-weight: 600; color: #1a1e5c; }
.luke-fly-kid.lvl2 { padding-left: 24px; font-weight: 400; position: relative; }
.luke-fly-kid.lvl2::before { content: ''; position: absolute; left: 12px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #00a082; transform: translateY(-50%); opacity: .6; }
.luke-fly-kid:hover { background: rgba(0, 160, 130, .07); color: #00a082; }
.luke-fly-shopall { display: block; margin: 8px 2px 2px; padding: 10px; text-align: center; border-radius: 10px; background: #00a082; color: #fff !important; font-weight: 700; font-size: 14px; letter-spacing: .04em; text-decoration: none; box-shadow: 0 4px 10px rgba(0, 160, 130, .3); transition: filter .15s; }
.luke-fly-shopall:hover { filter: brightness(1.07); }

/* categories without children */
.luke-fly-solo { display: block; padding: 13px 12px; border-radius: 12px; font-size: 15.5px; font-weight: 700; color: #0b0d39; text-decoration: none; letter-spacing: .02em; transition: background .12s, color .12s; }
.luke-fly-solo:hover { background: rgba(0, 160, 130, .07); color: #00a082; }

/* page links: chip grid */
.luke-fly-pages { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e3ebe9; }
.luke-fly-pages-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.luke-fly-page { display: flex; align-items: center; justify-content: center; padding: 10px 8px; border-radius: 10px; background: #eff6f3; border: 1px solid #e3ebe9; color: #0b0d39; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.luke-fly-page:hover { background: rgba(0, 160, 130, .07); border-color: #00a082; color: #00a082; }

/* ---- account section (compact mode moves header account controls here) ---- */
.luke-fly-acct { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e3ebe9; animation: lukeFlyIn .34s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--d, 0ms); }
.luke-fly-acct-h { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b8078; margin: 0 8px 10px; }
.luke-fly-auth { display: flex; gap: 8px; padding: 0 2px; }
.luke-fly-auth-btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 11px 8px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; border: 1.5px solid #00a082; color: #00a082; transition: background .15s, color .15s; }
.luke-fly-auth-btn:hover { background: rgba(0, 160, 130, .07); }
.luke-fly-auth-btn.primary { background: #00a082; border-color: transparent; color: #fff; box-shadow: 0 4px 10px rgba(0, 160, 130, .3); }
.luke-fly-auth-btn.primary:hover { filter: brightness(1.07); color: #fff; }
.luke-fly-hello { display: flex; align-items: center; gap: 10px; padding: 2px 8px 10px; font-size: 15px; font-weight: 700; color: #0b0d39; }
.luke-fly-av { width: 34px; height: 34px; border-radius: 50%; background: #00a082; color: #fff; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.luke-fly-acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.luke-fly-acct-link { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 8px; border-radius: 10px; background: #eff6f3; border: 1px solid #e3ebe9; color: #0b0d39; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.luke-fly-acct-link:hover { background: rgba(0, 160, 130, .07); border-color: #00a082; color: #00a082; }
.luke-fly-acct-link.out { color: #b23b3b; background: #fdf3f3; border-color: #f3dddd; }