/* =========================================================================
   Desktop nav overhaul — hover/click dropdowns for Shop and Account & Vendor.
   Mobile (<=782px) is untouched: the drawer system in mobile-nav.css
   already handles that, and this whole block only applies at >=783px.
   ========================================================================= */

.fmke-dnav { display: none; }

@media (min-width: 783px) {
  /* Hide Storefront's original flat primary menu at desktop only — it
     stays fully intact in the markup for mobile, which never sees this
     rule (mobile has its own drawer and never opens this menu anyway). */
  .main-navigation { display: none !important; }

  .fmke-dnav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
  }

  .fmke-dnav__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--fmke-dark, #1F3D2C);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-decoration: none !important;
    border-radius: 999px;
    transition: background .15s ease, color .15s ease;
  }
  .fmke-dnav__link svg { color: var(--fmke-primary, #FF6A00); flex: 0 0 auto; }
  .fmke-dnav__link:hover,
  .fmke-dnav__dropdown:hover .fmke-dnav__link,
  .fmke-dnav__dropdown.is-open .fmke-dnav__link {
    background: var(--fmke-primary-light, #FFF1E0);
    color: var(--fmke-primary, #FF6A00);
  }

  .fmke-dnav__link--shop {
    background: var(--fmke-primary, #FF6A00);
    color: #fff;
  }
  .fmke-dnav__link--shop svg { color: #fff; }
  .fmke-dnav__link--shop:hover { background: var(--fmke-primary-dark, #CC5500); color: #fff; }
  /* Keep the orange Shop pill orange while its dropdown is showing (the generic
     dropdown rule above would otherwise turn it pale with white-on-pale text). */
  .fmke-dnav__dropdown:hover .fmke-dnav__link--shop,
  .fmke-dnav__dropdown.is-open .fmke-dnav__link--shop,
  .fmke-dnav__dropdown:focus-within .fmke-dnav__link--shop {
    background: var(--fmke-primary-dark, #CC5500);
    color: #fff;
  }

  .fmke-dnav__dropdown { position: relative; }
  .fmke-dnav__dropdown .fmke-dnav__link svg:last-child { transition: transform .18s ease; }
  .fmke-dnav__dropdown:hover .fmke-dnav__link svg:last-child,
  .fmke-dnav__dropdown.is-open .fmke-dnav__link svg:last-child {
    transform: rotate(180deg);
  }

  .fmke-dnav__menu {
    position: absolute; top: 100%; left: 0; margin-top: 6px;
    min-width: 220px; background: #fff; border: 1px solid var(--fmke-border, #F0E4D8);
    border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.12);
    padding: 6px; display: flex; flex-direction: column; gap: 1px;
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 90;
  }
  /* Invisible bridge over the 6px gap so the menu doesn't close on the way down to it */
  .fmke-dnav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
  .fmke-dnav__dropdown:hover .fmke-dnav__menu,
  .fmke-dnav__dropdown.is-open .fmke-dnav__menu,
  .fmke-dnav__dropdown:focus-within .fmke-dnav__menu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }

  .fmke-dnav__menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 6px;
    color: var(--fmke-text, #1F3D2C); text-decoration: none !important;
    font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0;
  }
  .fmke-dnav__menu a:hover { background: var(--fmke-primary-light, #FFF1E0); }
  .fmke-dnav__menu a svg { color: var(--fmke-primary, #FF6A00); flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .fmke-dnav__menu, .fmke-dnav__dropdown svg { transition: none !important; }
}