/* BodyFrank navigation (loaded last): announcement bar, sticky glass header, sliding indicator, animated dropdowns, full-width mega menus. */
:root { --bf-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --nav-ink: #0f1115; --nav-muted: #5f6570; --nav-soft: #f4f4f5; }

/* ---------- announcement bar ---------- */
.bf-announce { position: relative; z-index: 61; background: var(--nav-ink); color: #fff; overflow: hidden; }
.bf-announce::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 40% 140% at 50% 0%, rgb(255 90 0 / 0.22), transparent 70%);
}
.bf-announce__inner { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 760px; height: 40px; margin: 0 auto; padding: 0 12px; }
.bf-announce__list { position: relative; flex: 1; height: 100%; margin: 0; padding: 0; list-style: none; }
.bf-announce__item {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap;
  opacity: 0; transform: translateY(100%); transition: opacity 0.45s var(--bf-ease), transform 0.55s var(--bf-ease); pointer-events: none;
}
.bf-announce__item.from-prev { transform: translateY(-100%); }
.bf-announce__item.is-active { opacity: 1; transform: none; pointer-events: auto; }
.bf-announce__item.leave-prev { opacity: 0; transform: translateY(-100%); }
.bf-announce__item.leave-next { opacity: 0; transform: translateY(100%); }
.bf-announce__item > svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #ff8a3d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bf-announce__short { display: none; }
.bf-announce__item a { display: inline-flex; align-items: center; gap: 4px; color: #fff !important; font-weight: 600; text-decoration: none !important; opacity: 0.7; transition: opacity 0.2s, gap 0.2s; }
.bf-announce__item a svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bf-announce__item a:hover { opacity: 1; gap: 7px; }
.bf-announce__nav {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: transparent !important; color: rgb(255 255 255 / 0.6) !important; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.bf-announce__nav:hover { background: rgb(255 255 255 / 0.1) !important; color: #fff !important; }
.bf-announce__nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- sticky glass header ---------- */
#header { position: sticky; top: 0; z-index: 60; background: rgb(255 255 255 / 0.86); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); transition: box-shadow 0.3s ease; }
.admin-bar #header { top: 32px; }
@media (max-width: 782px) { .admin-bar #header { top: 46px; } }
@media (max-width: 600px) { .admin-bar #header { top: 0; } }
#header [data-row] { background: transparent !important; }
#header [data-row] > .ct-container { transition: min-height 0.35s var(--bf-ease); }
#header [data-row*='middle'] { --height: 74px; }
#header [data-row*='bottom'] { --height: 50px; border-top: 1px solid rgb(15 17 21 / 0.06) !important; }
.bf-scrolled #header { box-shadow: 0 1px 0 rgb(15 17 21 / 0.06), 0 12px 32px -18px rgb(15 17 21 / 0.25) !important; }
.bf-scrolled #header [data-row*='middle'] { --height: 58px; }
.bf-scrolled #header [data-sticky*='yes'], .bf-scrolled #header .ct-sticky-container > div { box-shadow: none !important; }
#header .site-logo-container img { transition: max-height 0.35s var(--bf-ease); }
.bf-scrolled #header [data-device='desktop'] .site-logo-container img { max-height: 40px !important; }

/* Header icons: soft round hover */
#header [data-id='search'], #header [data-id='account'] .ct-account-item, #header [data-id='cart'] .ct-cart-item { border-radius: 999px; transition: background 0.2s; }
#header [data-id='search'] { width: 40px; height: 40px; display: grid !important; place-items: center; }
#header [data-id='search']:hover, #header [data-id='account'] .ct-account-item:hover { background: var(--nav-soft); }
#header [data-id='cart'] .ct-cart-item { padding: 8px 12px !important; }
#header [data-id='cart'] .ct-cart-item:hover { background: var(--nav-soft); }
#header [data-id='cart'] .ct-dynamic-count-cart { background: var(--nav-ink) !important; color: #fff !important; }

/* ---------- top-level menu ---------- */
#header [data-device='desktop'] [data-row*='bottom'] > .ct-container { position: relative; }
#header [data-id='menu'] > ul > li > a {
  font-family: 'Inter', system-ui, sans-serif !important; font-size: 0.92rem !important; font-weight: 600 !important; text-transform: none !important;
  letter-spacing: -0.005em !important; color: rgb(15 17 21 / 0.78) !important; transition: color 0.2s ease !important;
}
#header [data-id='menu'] > ul > li:hover > a, #header [data-id='menu'] > ul > li.ct-active > a,
#header [data-id='menu'] > ul > li[class*='current-menu'] > a, #header [data-id='menu'] > ul > li[class*='current_page'] > a { color: var(--nav-ink) !important; }
#header [data-id='menu'] > ul > li > a[href$='/sale/'] { color: #e8530b !important; }
#header [data-id='menu'] > ul > li > a[href$='/sale/']::before {
  content: ''; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #ff5a00;
  box-shadow: 0 0 0 0 rgb(255 90 0 / 0.5); animation: bf-pulse 2.2s ease-out infinite;
}
@keyframes bf-pulse { 0% { box-shadow: 0 0 0 0 rgb(255 90 0 / 0.5); } 70%, 100% { box-shadow: 0 0 0 7px rgb(255 90 0 / 0); } }
#header [data-id='menu'] > ul > li > a .ct-toggle-dropdown-desktop svg { transition: transform 0.3s var(--bf-ease); fill: currentColor !important; color: inherit !important; }
#header [data-id='menu'] > ul > li > a .ct-toggle-dropdown-desktop { color: inherit !important; }
#header [data-id='menu'] > ul > li:hover > a .ct-toggle-dropdown-desktop svg,
#header [data-id='menu'] > ul > li.ct-active > a .ct-toggle-dropdown-desktop svg { transform: rotate(180deg); }
#header [data-id='menu'] > ul > li::before, #header [data-id='menu'] > ul > li::after,
#header [data-id='menu'] > ul > li > a::after { display: none !important; }

/* Sliding indicator (positioned by brand-nav.js) */
.bf-nav-line {
  position: absolute; left: 0; bottom: 0; z-index: 2; height: 2px; width: 0; border-radius: 2px; background: var(--nav-ink); opacity: 0; pointer-events: none;
  transition: transform 0.45s var(--bf-ease), width 0.45s var(--bf-ease), opacity 0.25s ease;
}
.bf-nav-line.is-on { opacity: 1; }
.bf-nav-line.no-anim { transition: none; }

/* Page dim while a dropdown is open */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 59; pointer-events: none; opacity: 0;
  background: rgb(15 17 21 / 0.22); transition: opacity 0.35s ease;
}
body.bf-nav-open::after { opacity: 1; }

/* ---------- dropdowns ---------- */
#header [data-id='menu'] { --dropdown-top-offset: 0px; }
#header [data-id='menu'] .sub-menu {
  min-width: 250px; padding: 8px !important; border: 1px solid rgb(15 17 21 / 0.06) !important; border-radius: 18px !important; background: #fff !important;
  box-shadow: 0 40px 80px -24px rgb(15 17 21 / 0.28), 0 10px 24px -14px rgb(15 17 21 / 0.18) !important;
}
#header [data-id='menu'] > ul > li > .sub-menu { margin-top: 10px !important; transform-origin: top center; }
#header [data-id='menu'] > ul > li:not(.ct-active) > .sub-menu { transform: translate3d(0, 14px, 0) scale(0.985) !important; }
#header [data-id='menu'] > ul > li.ct-active > .sub-menu { transform: none !important; }
#header [data-id='menu'] > ul > li > .sub-menu { transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.4s var(--bf-ease) !important; }
/* Invisible bridge across the gap so the dropdown stays open while the pointer moves down */
#header [data-id='menu'] > ul > li > .sub-menu::before {
  content: '' !important; display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; top: -12px !important;
  width: auto !important; height: 12px !important; background: none !important; border-radius: 0 !important; transform: none !important;
}
/* Items fade in one after another */
#header [data-id='menu'] > ul > li > .sub-menu > li { transition: opacity 0.35s ease, transform 0.45s var(--bf-ease); }
#header [data-id='menu'] > ul > li:not(.ct-active) > .sub-menu > li { opacity: 0; transform: translate3d(0, 6px, 0); }
#header [data-id='menu'] > ul > li.ct-active > .sub-menu > li:nth-child(2) { transition-delay: 0.04s; }
#header [data-id='menu'] > ul > li.ct-active > .sub-menu > li:nth-child(3) { transition-delay: 0.08s; }
#header [data-id='menu'] > ul > li.ct-active > .sub-menu > li:nth-child(4) { transition-delay: 0.12s; }
#header [data-id='menu'] > ul > li.ct-active > .sub-menu > li:nth-child(5) { transition-delay: 0.16s; }
#header [data-id='menu'] > ul > li.ct-active > .sub-menu > li:nth-child(n+6) { transition-delay: 0.2s; }

#header [data-id='menu'] .sub-menu .ct-menu-link {
  position: relative; padding: 11px 14px !important; border-radius: 12px !important; color: var(--nav-ink) !important; font-size: 0.92rem !important;
  font-weight: 500 !important; letter-spacing: -0.005em !important; text-transform: none !important; transition: background 0.2s ease, color 0.2s ease !important;
}
#header [data-id='menu'] > ul > li:not(.bf-mega) > .sub-menu .ct-menu-link::after {
  content: ''; width: 14px; height: 14px; margin-left: auto; padding-left: 16px; opacity: 0; transform: translateX(-6px);
  background: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition: opacity 0.2s ease, transform 0.3s var(--bf-ease);
}
#header [data-id='menu'] .sub-menu .ct-menu-link:hover,
#header [data-id='menu'] .sub-menu li.current-menu-item > .ct-menu-link { background: var(--nav-soft) !important; color: var(--nav-ink) !important; padding-left: 14px !important; }
#header [data-id='menu'] > ul > li:not(.bf-mega) > .sub-menu .ct-menu-link:hover::after { opacity: 1; transform: none; }

/* ---------- full-width mega menus ---------- */
#header [data-id='menu'] > ul > li.bf-mega { position: static !important; }
#header [data-id='menu'] > ul > li.bf-mega > .sub-menu,
#header [data-id='menu'] > ul > li.bf-mega:nth-child(2) > .sub-menu {
  left: 0 !important; right: 0 !important; top: 100% !important; width: auto !important; margin-inline: 0 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 340px !important; gap: 4px 28px !important; padding: 30px 30px 30px 36px !important; border-radius: 22px !important;
}
#header [data-id='menu'] > ul > li.bf-mega:nth-child(2) > .sub-menu { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr) 340px !important; }
#header [data-id='menu'] > ul > li.bf-mega > .sub-menu::after {
  grid-column: -2 !important; grid-row: 1 / span 4 !important; min-height: 280px !important; border-radius: 16px !important;
  background: url('/wp-content/uploads/2026/10/hero-products.webp') center 62% / 108% auto no-repeat,
    radial-gradient(ellipse at 50% 55%, rgb(255 138 0 / 0.28), transparent 70%), linear-gradient(160deg, #1a1d23, #0f1115) !important;
}
#header [data-id='menu'] > ul > li.bf-mega:nth-child(2) > .sub-menu::after {
  background: url('/wp-content/uploads/2026/10/cat-bars-snacks.webp') center / 118% auto no-repeat,
    radial-gradient(ellipse at 50% 55%, rgb(255 138 0 / 0.28), transparent 70%), linear-gradient(160deg, #1a1d23, #0f1115) !important;
}
#header [data-id='menu'] > ul > li.bf-mega > .sub-menu > li > .ct-menu-link {
  padding: 6px 0 10px !important; margin-bottom: 4px !important; border: 0 !important; border-radius: 0 !important; background: none !important;
  font-family: 'Inter', sans-serif !important; font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: var(--nav-muted) !important; font-style: normal !important;
}
#header [data-id='menu'] > ul > li.bf-mega > .sub-menu > li > .ct-menu-link:hover { color: var(--nav-ink) !important; background: none !important; }
#header [data-id='menu'] > ul > li.bf-mega .sub-menu .sub-menu {
  min-width: 0; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
#header [data-id='menu'] > ul > li.bf-mega .sub-menu .sub-menu .ct-menu-link {
  display: inline-flex !important; padding: 6px 0 !important; border-radius: 0 !important; background: none !important;
  font-size: 0.95rem !important; font-weight: 500 !important; color: var(--nav-ink) !important; transition: transform 0.25s var(--bf-ease), color 0.2s !important;
}
#header [data-id='menu'] > ul > li.bf-mega .sub-menu .sub-menu .ct-menu-link:hover { transform: translateX(4px); color: #e8530b !important; background: none !important; padding-left: 0 !important; }

/* ---------- mobile off-canvas ---------- */
#offcanvas .ct-panel-content::before, #offcanvas .ct-panel-inner::before { display: none !important; }
#offcanvas .ct-panel-actions { padding-top: 14px; }
#offcanvas .ct-toggle-close {
  display: grid !important; place-items: center; width: 40px !important; height: 40px !important; border-radius: 50% !important;
  background: #f4f4f5 !important; color: #0f1115 !important; opacity: 1 !important; transition: background 0.2s, transform 0.3s var(--bf-ease);
}
#offcanvas .ct-toggle-close:hover { background: #e9e9eb !important; transform: rotate(90deg); }
#offcanvas .ct-toggle-close svg { width: 14px; height: 14px; fill: currentColor !important; }
#offcanvas [data-id='mobile-menu'] > ul > li { opacity: 0; transform: translateX(16px); transition: opacity 0.35s ease, transform 0.45s var(--bf-ease); }
#offcanvas.active [data-id='mobile-menu'] > ul > li { opacity: 1; transform: none; }
#offcanvas.active [data-id='mobile-menu'] > ul > li:nth-child(2) { transition-delay: 0.05s; }
#offcanvas.active [data-id='mobile-menu'] > ul > li:nth-child(3) { transition-delay: 0.1s; }
#offcanvas.active [data-id='mobile-menu'] > ul > li:nth-child(4) { transition-delay: 0.15s; }
#offcanvas.active [data-id='mobile-menu'] > ul > li:nth-child(5) { transition-delay: 0.2s; }
#offcanvas.active [data-id='mobile-menu'] > ul > li:nth-child(6) { transition-delay: 0.25s; }
#offcanvas.active [data-id='mobile-menu'] > ul > li:nth-child(n+7) { transition-delay: 0.3s; }
#offcanvas [data-id='mobile-menu'] > ul > li > a, #offcanvas .mobile-menu > ul > li > a,
#offcanvas [data-id='mobile-menu'] > ul > li > .ct-sub-menu-parent > a { font-size: 1.35rem !important; font-weight: 700 !important; letter-spacing: -0.02em !important; padding-block: 14px !important; }
#offcanvas [data-id='mobile-menu'] .sub-menu a { font-size: 1rem !important; font-weight: 500 !important; color: var(--nav-muted) !important; }
#offcanvas [data-id='mobile-menu'] a[href$='/sale/'] { color: #e8530b !important; }
#offcanvas .ct-toggle-dropdown-mobile, #offcanvas .ct-toggle-dropdown-mobile svg { color: var(--nav-ink) !important; fill: currentColor !important; }

@media (max-width: 689px) {
  .bf-announce__inner { height: 36px; gap: 4px; padding: 0 4px; }
  .bf-announce__item { font-size: 0.74rem; gap: 7px; }
  .bf-announce__item a, .bf-announce__long { display: none; }
  .bf-announce__short { display: inline; }
  .bf-announce__nav { width: 24px; height: 24px; }
  #header [data-row*='middle'] { --height: 64px; }
  .bf-scrolled #header [data-row*='middle'] { --height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-announce__item, .bf-nav-line, #header [data-id='menu'] .sub-menu, #header [data-id='menu'] .sub-menu > li { transition: none !important; }
  #header [data-id='menu'] > ul > li > a[href$='/sale/']::before { animation: none; }
}

/* Product gallery sticks below the sticky header */
@media (min-width: 990px) { .single-product .woocommerce-product-gallery { top: 146px !important; } }