/**
 * Sitewide FRATO navbar — same look & behavior as home.php
 * Loaded from inc/navbar.php on every page.
 */

:root {
   --ht-accent: #b9a076;
   --ht-accent-rgb: 185, 160, 118;
   --ht-btn-hover: #e8ff7a;
   --ht-white: #ffffff;
   --ht-heading: #2F2A27;
}

/* Prefer static logo sitewide (gif only used briefly on home entrance if page CSS allows) */
header.header-area .gif-image {
   display: none !important;
}

header.header-area .logoas-image {
   display: block !important;
}

/* ── Dark gradient header (sticky + absolute) ── */
header.header-area.header_absolute:not(.is-sticky),
header.header-area.header_absolute.is-sticky,
header.header-area.header-sticky.is-sticky,
header.header-area.is-sticky,
header.header-area.is-sticky-new {
   background: linear-gradient(
      to bottom,
      rgba(10, 9, 8, .92) 0%,
      rgba(10, 9, 8, .8) 45%,
      rgba(10, 9, 8, .62) 78%,
      rgba(10, 9, 8, .5) 100%
   ) !important;
   background-color: transparent !important;
   border-color: transparent !important;
   box-shadow: none !important;
}

header.header-area.header_absolute:not(.is-sticky)::after,
header.header-area.header_absolute.is-sticky::after,
header.header-area.is-sticky::after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   top: 100%;
   height: 120px;
   background: linear-gradient(
      to bottom,
      rgba(10, 9, 8, .5) 0%,
      rgba(10, 9, 8, .28) 40%,
      rgba(10, 9, 8, .1) 72%,
      rgba(10, 9, 8, 0) 100%
   );
   pointer-events: none;
   z-index: 1;
}

/* FRATO typography */
header.header-area .navigation-menu > ul > li > a,
header.header-area .navigation-menu > ul > li > a > span {
   font-family: 'Montserrat', sans-serif !important;
   font-size: 15px !important;
   font-weight: 500 !important;
   letter-spacing: .18em;
   text-transform: uppercase;
}

header.header-area .navigation-menu-new > ul > li > a,
header.header-area .navigation-menu-new > ul > li > a > span {
   font-family: 'Montserrat', sans-serif !important;
   font-size: 13.5px !important;
   font-weight: 500 !important;
   letter-spacing: .16em;
   text-transform: uppercase;
}

header.header-area .top-logo-area,
header.header-area .header-area {
   border-color: transparent !important;
}

/* White text / icons */
header.header-area .navigation-menu > ul > li > a,
header.header-area .navigation-menu-new > ul > li > a,
header.header-area .desktop-header-icons > a,
header.header-area .desktop-header-icons i,
header.header-area .desktop-header-icons .ht-ico,
header.header-area .header-right-items a,
header.header-area .header-right-items i,
header.header-area .header-right-items .ht-ico,
header.header-area.is-sticky .navigation-menu > ul > li > a,
header.header-area.is-sticky .navigation-menu-new > ul > li > a,
header.header-area.is-sticky-new .navigation-menu-new > ul > li > a,
header.is-sticky .navigation-menu.navigation-menu-new > ul > li > a,
header.is-sticky-new .navigation-menu-new > ul > li > a {
   color: #fff !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 2px 14px rgba(0, 0, 0, .45);
}

/* White logo */
header.header-area .logoas-image,
header.header-area .logo > a > img.logoas-image,
header.header-area .logo img,
header.header-area #redirect_logo img,
header.header-area.is-sticky .logoas-image,
header.header-area.is-sticky .logo img {
   filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, .55)) !important;
}

header.header-area .sn-logo img,
header.header-area #sn-barcode-img,
header.header-area.is-sticky .sn-logo img,
header.header-area.is-sticky #sn-barcode-img {
   filter: invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, .55)) !important;
}

header.header-area .navigation-menu-new > ul,
header.header-area.is-sticky .navigation-menu-new > ul {
   border-top: 2px solid rgba(255, 255, 255, .55) !important;
}

/* Stacking */
header.header-area {
   z-index: 10001;
}

.offcanvas-minicart_wrapper.open {
   position: relative;
   z-index: 100000 !important;
}

.offcanvas-minicart_wrapper .offcanvas-menu-inner,
.offcanvas-minicart_wrapper.open .offcanvas-menu-inner {
   z-index: 100002 !important;
}

.offcanvas-minicart_wrapper .global-overlay,
.offcanvas-minicart_wrapper.open .global-overlay,
.global-overlay.overlay-open {
   z-index: 100001 !important;
}

body.ht-minicart-open header.header-area,
body.ht-minicart-open header.header-area.header_absolute,
body.ht-minicart-open header.header-area.is-sticky,
body.ht-minicart-open header.header-area.header-sticky.is-sticky,
body:has(.offcanvas-minicart_wrapper.open) header.header-area,
body:has(.offcanvas-minicart_wrapper.open) header.header-area.header_absolute,
body:has(.offcanvas-minicart_wrapper.open) header.header-area.is-sticky,
body:has(.offcanvas-minicart_wrapper.open) header.header-area.header-sticky.is-sticky {
   z-index: 0 !important;
   pointer-events: none !important;
}

body.ht-minicart-open header.header-area .desktop-header-icons,
body.ht-minicart-open header.header-area .header-right-items,
body:has(.offcanvas-minicart_wrapper.open) header.header-area .desktop-header-icons,
body:has(.offcanvas-minicart_wrapper.open) header.header-area .header-right-items {
   visibility: hidden !important;
   opacity: 0 !important;
}

.mobile-menu-overlay,
.mobile-menu-overlay.active {
   z-index: 100100 !important;
}

body.ht-mobile-menu-open header.header-area,
body.ht-mobile-menu-open header.header-area.header_absolute,
body.ht-mobile-menu-open header.header-area.is-sticky,
body:has(.mobile-menu-overlay.active) header.header-area,
body:has(.mobile-menu-overlay.active) header.header-area.header_absolute,
body:has(.mobile-menu-overlay.active) header.header-area.is-sticky {
   z-index: 0 !important;
   pointer-events: none !important;
}

body.ht-mobile-menu-open header.header-area .desktop-header-icons,
body.ht-mobile-menu-open header.header-area .header-right-items,
body:has(.mobile-menu-overlay.active) header.header-area .desktop-header-icons,
body:has(.mobile-menu-overlay.active) header.header-area .header-right-items {
   visibility: hidden !important;
   opacity: 0 !important;
}

@media (max-width: 767px) {
   .offcanvas-minicart_wrapper .offcanvas-menu-inner,
   .offcanvas-minicart_wrapper.open .offcanvas-menu-inner {
      width: min(100vw, 100%) !important;
      max-width: 100vw !important;
   }
}

/* Mega open — solid black header */
body.ht-nav-mega-open header.header-area,
body.ht-nav-mega-open header.header-area.header_absolute,
body.ht-nav-mega-open header.header-area.is-sticky {
   background: #050505 !important;
   border-color: transparent !important;
   box-shadow: none !important;
}

body.ht-nav-mega-open header.header-area::after {
   display: none !important;
}

body.ht-nav-mega-open header.header-area .navigation-menu > ul > li > a,
body.ht-nav-mega-open header.header-area .navigation-menu > ul > li > a > span,
body.ht-nav-mega-open header.header-area .navigation-menu-new > ul > li > a,
body.ht-nav-mega-open header.header-area .navigation-menu-new > ul > li > a > span,
body.ht-nav-mega-open header.header-area .desktop-header-icons > a,
body.ht-nav-mega-open header.header-area .desktop-header-icons i,
body.ht-nav-mega-open header.header-area .desktop-header-icons .ht-ico,
body.ht-nav-mega-open header.header-area .header-right-items a,
body.ht-nav-mega-open header.header-area .header-right-items i,
body.ht-nav-mega-open header.header-area .header-right-items .ht-ico {
   color: #fff !important;
   text-shadow: none !important;
}

body.ht-nav-mega-open header.header-area .logoas-image,
body.ht-nav-mega-open header.header-area .logo > a > img.logoas-image,
body.ht-nav-mega-open header.header-area .logo img,
body.ht-nav-mega-open header.header-area #redirect_logo img {
   filter: brightness(0) invert(1) !important;
}

body.ht-nav-mega-open header.header-area .sn-logo img,
body.ht-nav-mega-open header.header-area #sn-barcode-img {
   filter: invert(1) !important;
}

body.ht-nav-mega-open header.header-area .navigation-menu-new > ul {
   border-top-color: rgba(255, 255, 255, .22) !important;
}

.navigation-menu-new > ul > li.has-children > a {
   cursor: pointer;
}

.navigation-menu-new > ul > li.has-children.submenu-open > a,
.navigation-menu-new > ul > li.has-children.submenu-open > a span:not(.ht-nav-caret),
body.ht-nav-mega-open header.header-area .navigation-menu-new > ul > li.has-children.submenu-open > a,
body.ht-nav-mega-open header.header-area .navigation-menu-new > ul > li.has-children.submenu-open > a span:not(.ht-nav-caret) {
   color: var(--ht-accent) !important;
}

.navigation-menu-new > ul > li.has-children.submenu-open > a .ht-nav-caret,
body.ht-nav-mega-open header.header-area .navigation-menu-new > ul > li.has-children.submenu-open > a .ht-nav-caret {
   border-color: var(--ht-accent) !important;
}

/* Dark megamenu panel (home style) */
.megamenu.megamenu--mega.ht-mega {
   top: var(--ht-nav-mega-top, 148px) !important;
   height: calc(100vh - var(--ht-nav-mega-top, 148px)) !important;
   border-top: 1px solid rgba(255, 255, 255, .12) !important;
   background: #050505 !important;
   box-shadow: none !important;
   z-index: 10000 !important;
}

.ht-mega-bubbles {
   position: absolute;
   inset: 0;
   z-index: 0;
   overflow: hidden;
   pointer-events: none;
}

.ht-mega-bubble {
   position: absolute;
   left: var(--b-left);
   top: var(--b-top);
   width: var(--b-size);
   height: var(--b-size);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 50%;
   background: radial-gradient(circle at 28% 28%, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04) 58%, transparent 72%);
   box-shadow: inset 0 0 16px rgba(255, 255, 255, .08);
   opacity: 0;
   animation: htMegaBubble var(--b-dur) linear infinite;
   animation-delay: var(--b-delay);
}

.ht-mega-bubble:nth-child(3n) {
   border-color: rgba(var(--ht-accent-rgb), .22);
   background: radial-gradient(circle at 28% 28%, rgba(var(--ht-accent-rgb), .24), rgba(var(--ht-accent-rgb), .05) 58%, transparent 72%);
}

@keyframes htMegaBubble {
   0% {
      opacity: 0;
      transform: translate3d(0, 40px, 0) scale(.7);
   }
   14% { opacity: .55; }
   50% {
      opacity: .72;
      transform: translate3d(16px, -72px, 0) scale(1);
   }
   88% { opacity: .24; }
   100% {
      opacity: 0;
      transform: translate3d(-12px, -200px, 0) scale(1.12);
   }
}

.ht-mega-panel {
   position: relative;
   z-index: 2;
   display: grid !important;
   grid-template-columns: 1fr !important;
   gap: 0;
   width: min(100%, 1480px);
   min-height: auto;
   margin: 0 auto;
   padding: 0 !important;
}

.ht-mega-media,
.ht-mega-intro {
   display: none !important;
}

.ht-mega-links {
   display: grid !important;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
   gap: 28px 48px !important;
   padding: clamp(12px, 2vh, 28px) 0 0 !important;
   align-content: start;
}

.ht-mega-links .subcategory-element {
   color: #fff !important;
   font-size: clamp(15px, 1.35vw, 19px) !important;
   font-weight: 700 !important;
   letter-spacing: .08em;
   text-transform: uppercase;
}

.ht-mega-links .subcategory-element::after {
   background: rgba(255, 255, 255, .22) !important;
}

.ht-mega-links .subcategory-element:hover::after {
   background: var(--ht-accent) !important;
}

.ht-mega-links .ht-mega-col ul li a {
   color: rgba(255, 255, 255, .62) !important;
   font-size: 14px !important;
}

.ht-mega-links .ht-mega-col ul li a:hover {
   color: #fff !important;
}

/* Mobile header */
@media (max-width: 991px) {
   header.header-area.homepage-mobile-header:not(.is-sticky),
   header.header-area.header_absolute:not(.is-sticky),
   header.header-area.homepage-mobile-header.is-sticky,
   header.header-area.header_absolute.is-sticky,
   header.header-area.is-sticky {
      background: linear-gradient(
         to bottom,
         rgba(10, 9, 8, .92) 0%,
         rgba(10, 9, 8, .8) 45%,
         rgba(10, 9, 8, .62) 78%,
         rgba(10, 9, 8, .5) 100%
      ) !important;
      box-shadow: none !important;
   }

   header.header-area.header_absolute:not(.is-sticky)::after,
   header.header-area.header_absolute.is-sticky::after,
   header.header-area.is-sticky::after {
      height: 70px;
   }

   header.header-area .mobile-view i,
   header.header-area .mobile-view .ht-ico,
   header.header-area .mobile-view-white-page i,
   header.header-area .mobile-view-white-page .ht-ico,
   header.header-area .mobile-navigation-icon i,
   header.header-area .mobile-navigation-icon .ht-ico {
      color: #fff !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 2px 14px rgba(0, 0, 0, .45);
   }
}

/* Cart badges + scroll-top */
.header-cart .item-counter,
.item-counter {
   background-color: var(--ht-accent) !important;
   color: #fff !important;
}

.scroll-top {
   background-color: var(--ht-accent) !important;
   color: var(--ht-heading) !important;
   border: 1px solid rgba(47, 42, 39, .12);
   box-shadow: 0 10px 28px rgba(47, 42, 39, .16);
   backdrop-filter: blur(8px);
}

.scroll-top:hover {
   background-color: var(--ht-btn-hover) !important;
   color: #111 !important;
   box-shadow: 0 12px 32px rgba(var(--ht-accent-rgb), .28);
   transform: translateY(-2px);
}

.scroll-top i,
.scroll-top .ht-ico,
.scroll-top .arrow-top,
.scroll-top .arrow-bottom {
   color: inherit !important;
}

.scroll-top.wp {
   background: transparent !important;
   border: 0 !important;
   color: inherit !important;
   box-shadow: 0 10px 28px rgba(37, 211, 102, .35) !important;
   overflow: hidden;
   padding: 0 !important;
}

.scroll-top.wp:hover {
   background: transparent !important;
   color: inherit !important;
   transform: translateY(-2px) scale(1.04);
   box-shadow: 0 14px 32px rgba(37, 211, 102, .45) !important;
}

/* Icon polish */
.desktop-header-icons .ht-ico,
.header-right-side .ht-ico {
   width: 23px;
   height: 23px;
   filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

.desktop-header-icons > a,
.header-right-side .header-right-items > a {
   position: relative;
   min-width: 36px;
   min-height: 36px;
   border-radius: 50%;
   transition: background .3s ease, transform .3s ease;
}

.desktop-header-icons > a:hover,
.header-right-side .header-right-items > a:hover {
   background: rgba(255, 255, 255, .1);
}