/* ============================================================
   JB Toolkit — TopNav Module
   Full-width navigation bar with logo, menu, search, cart
   ============================================================ */

/* ── CSS Custom Properties ── */
/* On :root so mobile panels outside wrapper can also access them */
:root{
  --purple:#4c1da1;
  --lime:#91ff00;
  --white:#ffffff;
  --catbar-h:50px;
  --catbar-overlap:calc(var(--catbar-h) / 2);  /* 25px */
  --bar-h-top:90px;
  --bar-h-sticked:60px;
  --admin-bar:0px;
}
.admin-bar{ --admin-bar:32px; }
@media(max-width:782px){
  .admin-bar{ --admin-bar:46px; }
}

/* ============================================================
   TOPNAV — sticky wrapper
   ============================================================ */
.jb-topnav-sticky-wrapper{
  position:relative;z-index:99998;width:100%;
}
.jb-topnav-sticky-wrapper.is-sticked{
  position:fixed;top:0;left:0;width:100%;
  margin-top:var(--admin-bar);
}
.jb-topnav-placeholder{display:none}

/* ============================================================
   LAYER 1: TOPNAV BAR — phone, search
   Background layer. In sticked: backdrop-filter via ::before
   ============================================================ */
.jb-topnav-bar{
  width:100%;
  height:var(--bar-h-top);
  position:relative;
  z-index:1;
  background:var(--purple);
  display:flex;align-items:center;
  transition:height .4s ease, background-color .4s ease, box-shadow .4s ease;
}
.is-sticked .jb-topnav-bar{
  height:var(--bar-h-sticked);
  background:transparent;
  box-shadow:0 2px 12px rgba(76,29,161,.12);
}
.jb-topnav-bar::before{
  content:'';
  position:absolute;inset:0;
  z-index:-1;
  border-radius:0;
  opacity:0;
  background:rgba(255,255,255,.33);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:opacity .4s ease;
  pointer-events:none;
}
.is-sticked .jb-topnav-bar::before{
  opacity:1;
}

.jb-topnav-bar-inner{
  width:100%;height:100%;
  display:flex;align-items:center;
  justify-content:space-between;
  padding:0 20px;
  padding-bottom:30px;
  transition:padding-bottom .4s ease;
}
.is-sticked .jb-topnav-bar-inner{padding-bottom:0}

/* LEFT: phone */
.jb-topnav-left{
  display:flex;align-items:center;flex-shrink:0;
  margin-left:140px;
  transform:translateY(2px);
  transition:margin-left .4s ease, transform .4s ease;
}
.is-sticked .jb-topnav-left{margin-left:100px;transform:translateY(0)}

/* ============================================================
   LAYER 4: LOGO — highest z-index, own layer
   ============================================================ */
.jb-topnav-logo-layer{
  position:absolute;left:20px;top:0;
  z-index:4;
  width:220px;
  height:var(--bar-h-top);
  pointer-events:none;
  transition:height .4s ease, width .4s ease;
}
.is-sticked .jb-topnav-logo-layer{
  height:var(--bar-h-sticked);width:150px;
}
.jb-topnav-logo-link{
  display:block;
  position:absolute;left:0;top:0;
  width:100%;
  height:calc(var(--bar-h-top) - var(--catbar-overlap));
  pointer-events:auto;
  overflow:visible;
  transition:height .4s ease, opacity .25s ease;
}
.is-sticked .jb-topnav-logo-link{
  height:var(--bar-h-sticked);
}
.jb-topnav-logo-link:hover{opacity:0.8}
.jb-topnav-logo-link .logo-top,
.jb-topnav-logo-link .logo-sticked{
  position:absolute;left:0;top:0;
  height:var(--bar-h-top);
  width:auto;
  pointer-events:none;
  transition:opacity .8s ease, height .4s ease;
}
.is-sticked .jb-topnav-logo-link .logo-top,
.is-sticked .jb-topnav-logo-link .logo-sticked{
  height:var(--bar-h-sticked);
}
.jb-topnav-logo-link .logo-top{opacity:1}
.jb-topnav-logo-link .logo-sticked{opacity:0}
.is-sticked .jb-topnav-logo-link .logo-top{opacity:0}
.is-sticked .jb-topnav-logo-link .logo-sticked{opacity:1}

/* Legacy — kept hidden */
.jb-topnav-logo-mobile{display:none !important}

.jb-topnav-phone{
  display:flex;align-items:center;gap:6px;
  font-family:'Bayon',sans-serif !important;font-weight:700;font-size:18px;
  color:var(--white) !important;white-space:nowrap;letter-spacing:0.05em;
  text-decoration:none !important;
  transition:color .4s ease;
}
.jb-topnav-phone svg{width:18px;height:18px;fill:currentColor;flex-shrink:0}
.is-sticked .jb-topnav-phone{
  color:var(--purple) !important;
}

/* RIGHT: search */
.jb-topnav-right{
  display:flex;align-items:center;gap:14px;flex-shrink:0;
}

/* ============================================================
   LAYER 3: MAIN NAV — menu + cart
   ============================================================ */
.jb-topnav-nav{
  position:absolute;
  z-index:3;
  top:0;left:0;right:0;
  height:var(--bar-h-top);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  padding-bottom:27px;
  transition:height .4s ease, padding-bottom .4s ease;
}
.is-sticked .jb-topnav-nav{
  height:var(--bar-h-sticked);
  padding-bottom:0;
}
.jb-topnav-nav-center{
  position:relative;
  display:flex;align-items:center;gap:6px;
  pointer-events:auto;
}

/* ============================================================
   NAV LINKS
   ============================================================ */
.jb-topnav-menu{
  display:flex !important;align-items:center;gap:4px;
  list-style:none !important;margin:0 !important;padding:0 !important;
}
.jb-topnav-menu li{list-style:none !important}
.jb-topnav-menu > li{position:relative}
.jb-topnav-menu > li > a{
  display:flex !important;align-items:center;gap:4px;
  font-size:18px !important;font-weight:400;text-transform:uppercase;letter-spacing:.5px;
  color:var(--white) !important;padding:8px 12px !important;white-space:nowrap;
  text-shadow:none;text-decoration:none !important;
  transition:color .3s ease, text-shadow .3s ease, font-size .3s ease;
}
.jb-topnav-menu > li > a:hover,
.jb-topnav-menu > li.is-open > a{
  color:var(--lime) !important;
  text-shadow:0 0 1px rgba(0,0,0,0.4);
}
.is-sticked .jb-topnav-menu > li > a{color:var(--purple) !important;font-size:16px !important}
.is-sticked .jb-topnav-menu > li > a:hover,
.is-sticked .jb-topnav-menu > li.is-open > a{
  color:var(--lime) !important;
  text-shadow:0 0 1px rgba(0,0,0,0.4);
}

/* chevron on menu items with children */
.jb-topnav-menu > li.has-children > a::after{
  content:'';display:inline-block;flex-shrink:0;
  width:5px;height:5px;margin-left:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg) translateY(0px);opacity:.5;
  transition:opacity .25s ease, transform .3s ease;
}
.jb-topnav-menu > li.has-children:hover > a::after,
.jb-topnav-menu > li.has-children.is-open > a::after{
  opacity:1;transform:rotate(45deg) translateX(-3px) translateY(2px);
}

/* ============================================================
   CART WIDGET
   ============================================================ */
.jb-topnav-cart-wrap{
  position:relative;
}
.jb-topnav-cart-widget{
  display:flex !important;align-items:center;justify-content:center;
  width:40px;height:40px;cursor:pointer;
  color:var(--white) !important;
  text-decoration:none !important;
  transition:color .3s ease;
}
.jb-topnav-cart-widget:hover{color:var(--lime) !important}
.is-sticked .jb-topnav-cart-widget{color:var(--purple) !important}
.is-sticked .jb-topnav-cart-widget:hover{color:var(--lime) !important}
/* Cart icon — DIVI ETmodules font glyph */
.jb-topnav-cart-icon::before{
  content:'\E07A';
  font-family:'ETmodules' !important;
  font-size:18px;line-height:1;
  position:relative;top:4px;
  speak:never;-webkit-font-smoothing:antialiased;
}

/* Cart badge */
.jb-topnav-cart-badge{
  position:absolute;top:2px;right:0;
  min-width:19px;height:19px;
  background:var(--lime);color:#000 !important;
  font-family:'Bayon',sans-serif !important;font-size:12px;font-weight:400;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  padding-top:2px;
  pointer-events:none;
  line-height:1;
  border:3px solid #000;
  box-shadow:0 0 6px rgba(0,0,0,.6);
  text-decoration:none !important;
}

/* Mini-cart dropdown */
.jb-topnav-minicart{
  position:absolute;top:calc(100% + 5px);right:0;
  width:320px;
  border-radius:10px;
  background:rgba(255,255,255,.33);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);
  border-top:4px solid var(--lime);
  box-shadow:0px 12px 18px -6px rgba(76,29,161,.2);
  padding:16px;
  z-index:10;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(6px);
  transition:opacity .3s ease, visibility .3s ease, transform .3s ease;
}
.jb-topnav-minicart.is-open{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0);
}

/* WooCommerce mini-cart overrides inside topnav minicart */
.jb-topnav-minicart .woocommerce-mini-cart{
  list-style:none !important;margin:0 !important;padding:0 !important;
}
.jb-topnav-minicart .woocommerce-mini-cart-item{
  display:flex !important;align-items:center;gap:10px;
  padding:8px 0 !important;
  list-style:none !important;
}
.jb-topnav-minicart .woocommerce-mini-cart-item img{
  width:50px !important;height:50px !important;
  object-fit:cover;border-radius:6px;flex-shrink:0;
}
.jb-topnav-minicart .woocommerce-mini-cart-item + .woocommerce-mini-cart-item{
  border-top:1px solid rgba(0,0,0,.06);
}
.jb-topnav-minicart .woocommerce-mini-cart-item a{
  color:#000 !important;text-decoration:none !important;
  font-size:14px;
}
.jb-topnav-minicart .woocommerce-mini-cart-item .remove{
  color:rgba(0,0,0,.3) !important;font-size:16px !important;
  text-decoration:none !important;
}
.jb-topnav-minicart .woocommerce-mini-cart-item .remove:hover{
  color:#c00 !important;background:none !important;
}
.jb-topnav-minicart .woocommerce-mini-cart__total{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:10px !important;margin-top:10px !important;
  border-top:1px solid rgba(76,29,161,.1) !important;
  font-family:'Open Sans',sans-serif !important;font-size:14px;font-weight:600;
  color:#000 !important;
}
.jb-topnav-minicart .woocommerce-mini-cart__buttons{
  margin-top:12px !important;padding:0 !important;
}
.jb-topnav-minicart .woocommerce-mini-cart__buttons a{
  display:block !important;width:100%;margin:0 0 6px 0 !important;
  height:40px;padding:0 20px !important;border:none;border-radius:8px !important;
  background:#3a1679 !important;color:var(--white) !important;
  font-family:'Inter',sans-serif !important;font-size:14px !important;font-weight:700 !important;
  letter-spacing:0.16em;text-transform:uppercase;text-align:center;
  text-decoration:none !important;
  line-height:40px !important;
  transition:background .25s ease, color .25s ease;
}
.jb-topnav-minicart .woocommerce-mini-cart__buttons a:hover{
  background:var(--lime) !important;color:var(--purple) !important;
}
.jb-topnav-minicart .woocommerce-mini-cart__buttons a::after,
.jb-topnav-minicart .woocommerce-mini-cart__buttons a::before{
  display:none !important;content:none !important;
}
.jb-topnav-minicart .woocommerce-mini-cart__empty-message{
  font-size:14px;color:rgba(0,0,0,.4);text-align:center;padding:16px 0;
}

/* ============================================================
   SEARCH
   ============================================================ */
.jb-topnav-search{
  display:flex;align-items:center;flex-shrink:0;height:40px;
  border-radius:10px;overflow:hidden;
  box-shadow:0 2px 10px 0 rgba(0,0,0,0.5);
  transition:box-shadow .3s ease;
}
.jb-topnav-search input{
  border:none !important;outline:none !important;
  font-family:'Open Sans',sans-serif !important;font-size:14px;
  padding:0 14px !important;height:40px;width:250px;
  background:rgba(255,255,255,0.6) !important;
  color:rgba(76,29,161,0.6);
  transition:background .3s ease, color .3s ease;
}
.jb-topnav-search input::placeholder{color:rgba(76,29,161,0.4)}
.jb-topnav-search input:focus{
  background:rgba(255,255,255,1.0) !important;
  color:rgba(76,29,161,1.0);
}
.jb-topnav-search input:focus::placeholder{color:rgba(76,29,161,0.4)}

.jb-topnav-search button{
  border:none !important;height:40px;
  font-family:'Inter',sans-serif !important;font-weight:700;font-size:14px;
  letter-spacing:0.16em;text-transform:uppercase;
  padding:0 20px !important;white-space:nowrap;
  background:#3a1679 !important;color:var(--white) !important;
  transition:background .25s ease, color .25s ease;
}
.jb-topnav-search button:hover{background:var(--lime) !important;color:var(--purple) !important}

/* sticked search */
.is-sticked .jb-topnav-search{
  box-shadow:0 2px 10px 0 rgba(76,29,161,0.5);
}
.is-sticked .jb-topnav-search input{
  background:rgba(76,29,161,0.1) !important;
  color:rgba(76,29,161,0.6);
}
.is-sticked .jb-topnav-search input:focus{
  background:rgba(255,255,255,1.0) !important;
  color:rgba(76,29,161,1.0);
}

/* ============================================================
   DROPDOWN PANELS — desktop text menu submenus
   ============================================================ */
.jb-topnav-dropdown{
  position:absolute;top:calc(100% + 3px);left:0;
  list-style:none !important;padding:10px !important;margin:0 !important;
  min-width:260px;max-width:400px;width:max-content;
  border-radius:10px;
  background:rgba(255,255,255,.33) !important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);
  border-top:4px solid var(--lime);
  box-shadow:0px 12px 18px -6px rgba(76,29,161,.2);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(6px);
  transition:opacity .3s ease, visibility .3s ease, transform .3s ease;
}
.jb-topnav-menu > li.is-open > .jb-topnav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0);
}
.jb-topnav-dropdown li{list-style:none !important}
.jb-topnav-dropdown li + li{
  margin-top:5px;padding-top:5px;
  border-top:1px solid rgba(0,0,0,.06);
}
.jb-topnav-dropdown li a{
  display:flex !important;align-items:center;
  padding:7px 4px !important;
  font-family:'Open Sans',sans-serif !important;font-size:16px;
  color:#000 !important;text-decoration:none !important;
  border-radius:6px;
  transition:background .2s ease, text-shadow .2s ease;
}
.jb-topnav-dropdown li a:hover{
  background:rgba(76,29,161,.2);
  text-shadow:0 1px 3px rgba(76,29,161,.25);
}

/* ============================================================
   CATBAR SLOT — replaces catbar-dummy from preview
   ============================================================ */
.jb-topnav-catbar-slot{
  width:95%;max-width:1600px;
  margin-left:auto;margin-right:auto;
  margin-top:calc(var(--catbar-overlap) * -1);
  position:relative;
  z-index:2;
  transition:margin-top .4s ease;
}
.is-sticked .jb-topnav-catbar-slot{
  margin-top:10px;
}

/* ============================================================
   MOBILE ICONS
   ============================================================ */
.jb-topnav-mobile-icons{
  display:none;align-items:center;gap:16px;
  transform:translateY(5px);
}
.jb-topnav-mobile-icons button{
  background:none !important;border:none !important;padding:4px;
  color:var(--white) !important;transition:color .25s ease;
}
.jb-topnav-mobile-icons button:hover,
.jb-topnav-mobile-icons button.is-active{color:var(--lime) !important}
.jb-topnav-mobile-icons button svg{width:24px;height:24px;fill:currentColor}
.jb-topnav-mobile-icons .jb-topnav-cart-icon::before{
  content:'\E07A';
  font-family:'ETmodules' !important;
  font-size:18px;line-height:1;
  position:relative;top:-1px;
  speak:never;-webkit-font-smoothing:antialiased;
}
.is-sticked .jb-topnav-mobile-icons button{color:var(--purple) !important}
.is-sticked .jb-topnav-mobile-icons button:hover,
.is-sticked .jb-topnav-mobile-icons button.is-active{color:var(--lime) !important}

/* Mobile cart badge */
.jb-mobile-cart-btn-wrap{position:relative}
.jb-mobile-cart-badge{
  position:absolute;top:-4px;right:-6px;
  min-width:19px;height:19px;
  background:var(--lime);color:#000 !important;
  font-family:'Bayon',sans-serif !important;font-size:12px;font-weight:400;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  padding-top:2px;
  pointer-events:none;line-height:1;
  border:3px solid #000;
  box-shadow:0 0 6px rgba(0,0,0,.6);
  text-decoration:none !important;
}

/* Mobile phone center */
.jb-topnav-phone-center{
  display:none;
  font-family:'Bayon',sans-serif !important;font-weight:700;font-size:18px;
  color:var(--white) !important;white-space:nowrap;letter-spacing:0.05em;
  text-decoration:none !important;
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,calc(-50% - 12px));
  transition:color .4s ease, transform .4s ease;
}
.is-sticked .jb-topnav-phone-center{
  color:var(--purple) !important;
  transform:translate(-50%,-50%);
}

/* ============================================================
   MOBILE SEARCH PANEL — glassmorphism dropdown
   ============================================================ */
.jb-topnav-mobile-search-panel{
  display:none;
  position:fixed;
  top:calc(var(--bar-h-top) - 35px + var(--admin-bar));
  left:50%;transform:translateX(-50%);
  width:95%;max-width:1600px;
  border-radius:10px;
  background:rgba(255,255,255,.33);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);
  border-top:4px solid var(--lime);
  box-shadow:0px 12px 18px -6px rgba(76,29,161,.2);
  padding:12px;
  z-index:100005;
  opacity:0;
  transition:opacity .3s ease, top .4s ease;
}
.jb-topnav-mobile-search-panel.is-sticked{
  top:calc(var(--bar-h-sticked) - 5px + var(--admin-bar));
}
.jb-topnav-mobile-search-panel.is-open{
  display:block;
  opacity:1;
}
.jb-topnav-mobile-search-panel .search-inner{
  display:flex;height:44px;
  border-radius:8px;overflow:hidden;
  box-shadow:0 2px 8px rgba(76,29,161,.15);
}
.jb-topnav-mobile-search-panel .search-inner input{
  flex:1;border:none !important;outline:none !important;
  font-family:'Open Sans',sans-serif !important;font-size:16px;
  padding:0 14px !important;height:44px;
  background:rgba(255,255,255,.6) !important;color:var(--purple);
}
.jb-topnav-mobile-search-panel .search-inner input::placeholder{color:rgba(76,29,161,0.4)}
.jb-topnav-mobile-search-panel .search-inner input:focus{
  background:rgba(255,255,255,1) !important;
}
.jb-topnav-mobile-search-panel .search-inner button{
  border:none !important;height:44px;
  font-family:'Inter',sans-serif !important;font-weight:700;font-size:13px;
  letter-spacing:0.14em;text-transform:uppercase;
  padding:0 18px !important;white-space:nowrap;
  background:#3a1679 !important;color:var(--white) !important;
  transition:background .25s ease, color .25s ease;
}
.jb-topnav-mobile-search-panel .search-inner button:hover{
  background:var(--lime) !important;color:var(--purple) !important;
}

/* ============================================================
   HAMBURGER NAV — replaces text menu at <=1359px (above 980px)
   ============================================================ */
.jb-topnav-ham-btn{
  display:none;
  background:none !important;border:none !important;padding:8px;
  color:var(--white) !important;cursor:pointer;
  transition:color .3s ease;
}
.jb-topnav-ham-btn:hover{color:var(--lime) !important}
.jb-topnav-ham-btn svg{width:24px;height:24px;fill:currentColor}
.is-sticked .jb-topnav-ham-btn{color:var(--purple) !important}
.is-sticked .jb-topnav-ham-btn:hover{color:var(--lime) !important}

/* Dropdown panel — catbar-style */
.jb-topnav-ham-panel{
  display:none;
  position:absolute;
  top:100%;left:50%;transform:translateX(-50%);
  width:max-content;min-width:320px;max-width:90vw;
  border-radius:10px;
  background:rgba(255,255,255,.33);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);
  border-top:4px solid var(--lime);
  box-shadow:0px 12px 18px -6px rgba(76,29,161,.2);
  padding:10px;
  z-index:10;
  opacity:0;
  transition:opacity .3s ease;
}
.jb-topnav-ham-panel.is-open{
  display:block;
  opacity:1;
}

/* ── Shared ham-menu styles — modelled on catbar panel ──
      Differences from catbar:
      1. Font: Open Sans (not Bayon)
      2. Panel border-top: lime (not purple)
   ── */
.ham-menu-list{list-style:none !important;margin:0 !important;padding:0 !important}
.ham-menu-item{list-style:none !important;position:relative}
.ham-menu-item + .ham-menu-item{margin-top:3px;padding-top:3px;border-top:1px solid rgba(0,0,0,.06)}

/* ── ITEM ROW — matches .jb-catbar-panel .jb-item-row ── */
.ham-item-row{
  display:flex;align-items:center;min-height:38px;
  transition:opacity .25s ease;
}
.ham-item-row a{
  flex:1;min-width:0;display:flex;align-items:center;
  padding:7px 4px !important;
  font-family:'Open Sans',sans-serif !important;font-size:16px;font-weight:400;
  text-transform:uppercase;
  line-height:1.2;color:#000 !important;text-decoration:none !important;
  white-space:normal;border-radius:6px;
  transition:background .18s ease, text-shadow .18s ease;
}
.ham-item-row a:hover{
  background:rgba(76,29,161,.2);
  text-shadow:0 1px 3px rgba(76,29,161,.25);
}

/* ── TOGGLE — matches .jb-catbar-panel .jb-toggle ── */
.ham-toggle-btn{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:36px;
  cursor:pointer;border:none !important;background:transparent !important;padding:0;flex-shrink:0;
}
.ham-toggle-icon{
  width:26px;height:26px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(0,0,0,.15);color:#000;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.ham-toggle-icon::after{
  content:'';display:block;width:6px;height:6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translate(-1px,-1px);
  transition:transform .3s ease;
}
.ham-menu-item.is-sub-open > .ham-item-row .ham-toggle-btn .ham-toggle-icon{
  background:#000;border-color:#000;color:#fff;
}
.ham-menu-item.is-sub-open > .ham-item-row .ham-toggle-btn .ham-toggle-icon::after{
  transform:rotate(45deg) translate(-1px,-1px);
}

/* ── SUBMENU — slides open (matches catbar panel sub-menu) ── */
.ham-submenu{
  list-style:none !important;margin:0 !important;padding:0 !important;
  max-height:0;overflow:hidden;
  transition:max-height .3s ease, opacity .25s ease;
  opacity:0;
}
.ham-menu-item.is-sub-open > .ham-submenu{
  max-height:600px;opacity:1;overflow:visible;
  margin:4px -10px 0 0 !important;
  padding:10px !important;
  background:rgba(255,255,255,.33);
  border-radius:10px;
  border-top:4px solid var(--lime);
  border-left:1px solid rgba(255,255,255,.5);
  border-right:1px solid rgba(255,255,255,.5);
  border-bottom:1px solid rgba(255,255,255,.5);
}
.ham-submenu > li + li{margin-top:3px;padding-top:3px;border-top:1px solid rgba(0,0,0,.05)}
.ham-submenu li{display:flex;align-items:center;min-height:38px;list-style:none !important}
.ham-submenu li a{
  flex:1;min-width:0;display:flex;align-items:center;
  padding:7px 4px !important;
  font-family:'Open Sans',sans-serif !important;font-size:14px;font-weight:400;
  color:#000 !important;text-decoration:none !important;
  white-space:normal;border-radius:6px;
  transition:background .18s ease, text-shadow .18s ease;
}
.ham-submenu li a:hover{
  background:rgba(76,29,161,.2);
  text-shadow:0 1px 3px rgba(76,29,161,.25);
}

/* ============================================================
   MOBILE MINI-CART — fixed panel
   ============================================================ */
.jb-topnav-mobile-minicart{
  display:none;
  position:fixed;
  top:calc(var(--bar-h-top) - 35px + var(--admin-bar));right:10px;
  width:320px;max-width:90vw;
  border-radius:10px;
  background:rgba(255,255,255,.33);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);
  border-top:4px solid var(--lime);
  box-shadow:0px 12px 18px -6px rgba(76,29,161,.2);
  padding:16px;
  z-index:100004;
  opacity:0;
  transition:opacity .3s ease, top .4s ease;
}
.jb-topnav-mobile-minicart.is-sticked{
  top:calc(var(--bar-h-sticked) - 5px + var(--admin-bar));
}
.jb-topnav-mobile-minicart.is-open{
  display:block;
  opacity:1;
}
/* WooCommerce overrides for mobile minicart — inherit from desktop */
.jb-topnav-mobile-minicart .woocommerce-mini-cart{
  list-style:none !important;margin:0 !important;padding:0 !important;
}
.jb-topnav-mobile-minicart .woocommerce-mini-cart-item{
  display:flex !important;align-items:center;gap:10px;
  padding:8px 0 !important;list-style:none !important;
}
.jb-topnav-mobile-minicart .woocommerce-mini-cart-item img{
  width:50px !important;height:50px !important;
  object-fit:cover;border-radius:6px;flex-shrink:0;
}
.jb-topnav-mobile-minicart .woocommerce-mini-cart-item + .woocommerce-mini-cart-item{
  border-top:1px solid rgba(0,0,0,.06);
}
.jb-topnav-mobile-minicart .woocommerce-mini-cart-item a{
  color:#000 !important;text-decoration:none !important;font-size:14px;
}
.jb-topnav-mobile-minicart .woocommerce-mini-cart-item .remove{
  color:rgba(0,0,0,.3) !important;font-size:16px !important;text-decoration:none !important;
}
.jb-topnav-mobile-minicart .woocommerce-mini-cart-item .remove:hover{
  color:#c00 !important;background:none !important;
}
.jb-topnav-mobile-minicart .woocommerce-mini-cart__total{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:10px !important;margin-top:10px !important;
  border-top:1px solid rgba(76,29,161,.1) !important;
  font-family:'Open Sans',sans-serif !important;font-size:14px;font-weight:600;
  color:#000 !important;
}
.jb-topnav-mobile-minicart .woocommerce-mini-cart__buttons{
  margin-top:12px !important;padding:0 !important;
}
.jb-topnav-mobile-minicart .woocommerce-mini-cart__buttons a{
  display:block !important;width:100%;margin:0 0 6px 0 !important;
  height:40px;padding:0 20px !important;border:none;border-radius:8px !important;
  background:#3a1679 !important;color:var(--white) !important;
  font-family:'Inter',sans-serif !important;font-size:14px !important;font-weight:700 !important;
  letter-spacing:0.16em;text-transform:uppercase;text-align:center;
  text-decoration:none !important;line-height:40px !important;
  transition:background .25s ease, color .25s ease;
}
.jb-topnav-mobile-minicart .woocommerce-mini-cart__buttons a:hover{
  background:var(--lime) !important;color:var(--purple) !important;
}
.jb-topnav-mobile-minicart .woocommerce-mini-cart__buttons a::after,
.jb-topnav-mobile-minicart .woocommerce-mini-cart__buttons a::before{
  display:none !important;content:none !important;
}

/* ============================================================
   MOBILE HAMBURGER PANEL — right-aligned
   ============================================================ */
.jb-topnav-mobile-ham-panel{
  display:none;
  position:fixed;
  top:calc(var(--bar-h-top) - 35px + var(--admin-bar));right:10px;
  width:max-content;min-width:280px;max-width:90vw;
  border-radius:10px;
  background:rgba(255,255,255,.33);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);
  border-top:4px solid var(--lime);
  box-shadow:0px 12px 18px -6px rgba(76,29,161,.2);
  padding:10px;
  z-index:100003;
  opacity:0;
  transition:opacity .3s ease, top .4s ease;
}
.jb-topnav-mobile-ham-panel.is-sticked{
  top:calc(var(--bar-h-sticked) - 5px + var(--admin-bar));
}
.jb-topnav-mobile-ham-panel.is-open{
  display:block;
  opacity:1;
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media(max-width:1499px){
  .jb-topnav-menu > li > a{padding:8px 8px !important}
  .jb-topnav-search input{width:170px}
}

@media(max-width:1359px){
  /* Hide text menu, show hamburger + cart */
  .jb-topnav-menu{display:none !important}
  .jb-topnav-ham-btn{display:flex}

  /* Both panels: fixed, centered in viewport */
  .jb-topnav-ham-panel{
    position:fixed !important;
    top:calc(var(--bar-h-top) - 35px + var(--admin-bar));
    left:50% !important;right:auto !important;
    transform:translateX(-50%) !important;
    transition:opacity .3s ease, top .4s ease;
  }
  .is-sticked .jb-topnav-ham-panel{
    top:calc(var(--bar-h-sticked) - 5px + var(--admin-bar));
  }
  .jb-topnav-minicart{
    position:fixed !important;
    top:calc(var(--bar-h-top) - 35px + var(--admin-bar));
    left:50% !important;right:auto !important;
    transform:translateX(-50%);
    opacity:0;visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease, top .4s ease;
  }
  .is-sticked .jb-topnav-minicart{
    top:calc(var(--bar-h-sticked) - 5px + var(--admin-bar));
  }
  .jb-topnav-minicart.is-open{
    opacity:1;visibility:visible;
    transform:translateX(-50%);
  }
  /* Ham-desktop cart icon: 2px higher than full desktop */
  .jb-topnav-cart-icon::before{
    top:2px;
  }
}

@media(max-width:980px){
  /* Hide desktop nav, search, desktop phone */
  .jb-topnav-nav{display:none !important}
  .jb-topnav-ham-btn{display:none !important}
  .jb-topnav-ham-panel{display:none !important}
  .jb-topnav-search{display:none !important}
  .jb-topnav-phone{display:none !important}

  /* Show mobile icons and centered phone */
  .jb-topnav-mobile-icons{display:flex}
  .jb-topnav-phone-center{display:block}

  .jb-topnav-bar-inner{
    justify-content:space-between;gap:10px;
    position:relative;
  }

  .jb-topnav-left{flex:0 0 auto;margin-left:0 !important;transform:none !important}
  .jb-topnav-right{flex:0 0 auto;gap:0}

  /* Mobile sticked: admin-bar offset handled globally above */
}

/* ============================================================
   PHONE BREAKPOINT — ≤768px
   ============================================================ */
@media(max-width:768px){

  /* Logo 20px to the left */
  .jb-topnav-logo-layer{
    left:0 !important;
  }

  /* Minimal gaps between mobile icons */
  .jb-topnav-mobile-icons{
    gap:4px !important;
  }
  .jb-topnav-mobile-icons button{
    padding:2px !important;
  }

  /* Hide phone number in top (non-sticked) state */
  .jb-topnav-phone-center{
    display:none !important;
  }

  /* Sticked state: show phone but hide handset icon + remove letter-spacing */
  .is-sticked .jb-topnav-phone-center{
    display:block !important;
    letter-spacing:0 !important;
  }
  .is-sticked .jb-topnav-phone-center svg{
    display:none !important;
  }
}

