/* ==========================================================================
   Nav v2 — sitewide restructure to the new flat nav + pill CTA.
   Loaded from header.blade.php on every page (deliberate exception — every
   redesign mockup shares this nav). Text stays white by default since the
   transparent header still sits over varying old-theme hero backgrounds on
   not-yet-redesigned pages; pages that fully adopt the new design (Home,
   Shop, Product) make the header solid + dark-text via their own CSS.
   ========================================================================== */

/* The original theme's nav was built for ~5 short items with 50px gaps
   between each — 7 flat items overflow that badly (confirmed by a real
   screenshot: the logo visually overlapped the last nav item). Tighten
   spacing and cap the logo so 7 items + logo + actions fit one row. */
.eg-menu__main-menu .navigation.inf-nav {
   font-family: 'Outfit', sans-serif;
   flex: 1 1 auto;
   min-width: 0;
}
.eg-menu__main-menu .navigation.inf-nav li:not(:last-child) {
   margin-right: 24px;
}
.eg-menu__main-menu .navigation.inf-nav li > a {
   text-transform: none;
   font-size: 15px;
   font-weight: 500;
   letter-spacing: 0;
   white-space: nowrap;
   position: relative;
   padding-bottom: 6px;
}
/* Current-page underline, as in the mockups (colour follows the link text,
   so it stays white over dark heroes and dark on cream headers). */
.eg-menu__main-menu .navigation.inf-nav li > a.is-active { font-weight: 600; }
.eg-menu__main-menu .navigation.inf-nav li > a.is-active::after {
   content: '';
   position: absolute;
   left: 0; right: 0; bottom: 0;
   height: 2px;
   background: currentColor;
}
.eg-menu__logo { flex-shrink: 0; margin: 0 32px 0 0; }
.eg-menu__logo img { max-height: 50px; width: auto; }
.eg-menu__header-actions { flex-shrink: 0; display: flex; align-items: center; gap: 20px; }
.eg-menu__header-actions .inf-nav-cta { margin-left: 4px; }

/* Mockup's header shows plain icons with no adjacent text label, and no
   secondary off-canvas hamburger next to the main nav. */
.eg-menu__header-user .user { display: none; }
.inf-nav-hide-offcanvas { display: none !important; }

/* Account dropdown: the theme sized it at 100% of the trigger, which is now a
   ~20px icon, so it collapsed into a narrow strip with wrapped text. Give it a
   real width and match the new look (cream card, Outfit, dark text) on every
   page — even over dark heroes, where the trigger icon is white. */
.eg-menu__header-user .eg-menu__signUp {
   width: max-content;
   min-width: 190px;
   right: -14px;
   padding: 10px 8px;
   background: #faf8f4;
   border: 1px solid #e7e0d2;
   border-radius: 12px;
   box-shadow: 0 14px 40px rgba(20, 14, 6, 0.22);
}
.eg-menu__header-user .eg-menu__signUp li,
.eg-menu__header-user .eg-menu__signUp li:last-child { margin: 0; padding: 0; }
.eg-menu__header-user .eg-menu__signUp li a,
.eg-menu__header-user .eg-menu__signUp li button {
   display: block;
   width: 100%;
   padding: 11px 14px;
   border: 0;
   border-radius: 8px;
   background: transparent;
   font-family: 'Outfit', sans-serif;
   font-size: 15px;
   font-weight: 500;
   line-height: 1.2;
   text-align: left;
   text-transform: none;
   white-space: nowrap;
   color: #1b1819 !important;
}
.eg-menu__header-user .eg-menu__signUp li a:hover,
.eg-menu__header-user .eg-menu__signUp li button:hover { background: #efe4d3; color: #1b1819 !important; }
.eg-menu__header-user .eg-menu__signUp form { margin: 0; }

/* Mockup icon order is search, account, cart — reorder visually via flex
   `order` rather than touching the @auth/@else markup structure. */
.eg-menu__header-search { order: 1; }
.eg-menu__header-user { order: 2; }
.eg-menu__header-cart { order: 3; }

.inf-nav-cta {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: #0d0b0a;
   color: #ffffff !important;
   font-family: 'Outfit', sans-serif;
   font-size: 14px;
   font-weight: 600;
   text-transform: none !important;
   padding: 12px 24px;
   border-radius: 999px;
   letter-spacing: 0 !important;
   transition: background .2s ease;
}
.inf-nav-cta:hover { background: #b9793d; color: #ffffff !important; }

@media (max-width: 1199px) {
   .inf-nav-cta { display: none; }
}

/* Mobile menu button: the page-level header rules turn every header svg path dark,
   which made the icon invisible on its black circle. Keep it white. */
.eg-header__mobile-toggler svg path { fill: #ffffff !important; }

/* Search field at the top of the mobile off-canvas menu */
.inf-mobile-search{ display:flex; align-items:stretch; height: 46px; margin: 4px 0 18px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; overflow:hidden; background: rgba(255,255,255,.08); }
.inf-mobile-search input{ flex:1; min-width:0; border:0; outline:none; background:transparent; padding: 0 18px; color:#fff; font-size: 14.5px; }
.inf-mobile-search input::placeholder{ color: rgba(255,255,255,.6); }
.inf-mobile-search button{ flex:0 0 46px; border:0; background:transparent; color:#fff; cursor:pointer; }
