:root{
  --bsc-topbar-bg: var(--bsc-topbar-bg);
  --bsc-search-ring: var(--bsc-search-ring);
  --bsc-link-hover: var(--bsc-link-hover);
}
/* Customizer injection */
body:where(.wp-customizer) {}

/* Topbar */
.bsc-topbar { background:var(--bsc-topbar-bg); }
.bsc-topbar .btn { font-weight:600; }
span.bsc-offer-text {
    font-weight: bold;
}
/* Main header */
.bsc-header-main .navbar-brand img { max-height:48px; height:auto; }
.bsc-utility .menu-item a { padding:0 .5rem; color:#6c757d; text-decoration:none; }
.bsc-utility .menu-item a:hover { color:var(--bsc-link-hover); }

/* Search */
.bsc-search { position:relative; }
.bsc-search-input { border:2px solid var(--bsc-search-ring); border-right:0; border-radius:999px 0 0 999px; padding-left:1rem; height:48px; }
.bsc-search-btn { border:2px solid var(--bsc-search-ring); border-left:0; height:48px; border-radius:0 999px 999px 0; }
.bsc-search-btn .bi { font-size:1.25rem; }

/* Account dropdown */
.bsc-account .btn { height:48px; display:flex; align-items:center; gap:.35rem;    border-radius: 50px; }

/* Categories row */
.bsc-categories { background:#fff; }
.bsc-cats { gap:1.25rem; }
.bsc-cats .menu-item > a { display:inline-flex; align-items:center; gap:.5rem; color:#2b2b2b; text-decoration:none; padding:.25rem .25rem; white-space:nowrap; }
.bsc-cats .menu-item > a .bi { font-size:1.1rem;margin-right:0 !important; }
.bsc-cats .menu-item > a:hover { color:var(--bsc-link-hover); }

.menu-item.icon-food     > a::before { content:"\F2E7"; font-family:"bootstrap-icons"; }
.menu-item.icon-health   > a::before { content:"\F62A"; font-family:"bootstrap-icons"; }
.menu-item.icon-pets     > a::before { content:"\F6A7"; font-family:"bootstrap-icons"; }
.menu-item.icon-toys     > a::before { content:"\F1A9"; font-family:"bootstrap-icons"; }
.menu-item.icon-station  > a::before { content:"\F51D"; font-family:"bootstrap-icons"; }
.menu-item.icon-pack     > a::before { content:"\F4C1"; font-family:"bootstrap-icons"; }
.menu-item.icon-homeprod > a::before { content:"\F8D9"; font-family:"bootstrap-icons"; }
.menu-item.icon-electro  > a::before { content:"\F4F4"; font-family:"bootstrap-icons"; }
.menu-item.icon-homeapp  > a::before { content:"\F8F5"; font-family:"bootstrap-icons"; }
.bsc-cats .menu-item > a::before { margin-right:.4rem; font-size:1.05rem; }

/* Sticky elevation */
#bsc-header.position-sticky{ z-index:1030; background:#fff; }

/* Mobile: compress header */
@media (max-width: 575.98px){
  .bsc-topbar { padding:.35rem 0; }
  .bsc-header-main .navbar-brand img { max-height:40px; }
  .bsc-search-input, .bsc-search-btn { height:42px; }
  .bsc-utility { display:none !important; }
  .bsc-account .btn { height:42px; padding:.25rem .5rem; }
  .bsc-cats { gap:.85rem; }
}

/* Tablet: keep menus tidy */
@media (min-width: 576px) and (max-width: 991.98px){
  .bsc-utility { font-size:.9rem; }
  .bsc-cats { gap:1rem; }
}


/* Preheader: sits between blue promo and the main header */
.bsc-preheader { position:relative; z-index: 5; }
.bsc-preheader .bsc-preheader-menu .menu-item > a {
  color:#6c757d; text-decoration:none; padding:.25rem 0;
}
.bsc-preheader .bsc-preheader-menu .menu-item > a:hover { color: var(--bsc-link-hover, #0d6efd); }

/* Keep layers clean */
#bsc-header { position:relative; z-index: 4; background:#fff; }
#bsc-header.position-sticky{ z-index:1030; }

/* Small tweak so the “Categories” label matches screenshot scale */
.bsc-preheader strong { font-weight:600; }
.bsc-preheader .bi { font-size:.9rem; line-height:1; }

/* Make menu icons align nicely */
.nav .menu-item > a i { font-size:1.05rem; line-height:1; vertical-align:-.1em; }

/* Turn off old pseudo-element icons so we don't duplicate the new <i> icons */
.bsc-cats .menu-item > a::before,
.menu-item[class*="icon-"] > a::before {
  content: none !important;
}

/* Disable old ::before glyphs now that we inject real <i> icons */
.bsc-cats .menu-item > a::before,
.menu-item[class*="icon-"] > a::before { content: none !important; }


/* Keep preheader visible on mobile; tighten spacing */
.bsc-preheader { position:relative; z-index:5; }
.bsc-preheader .bsc-preheader-menu .menu-item > a {
  color:#6c757d; text-decoration:none; padding:.25rem 0;
}
.bsc-preheader .bsc-preheader-menu .menu-item > a:hover { color: var(--bsc-link-hover, #0d6efd); }

/* Offcanvas lists */
.bsc-mobile-cats > .menu-item > a,
.bsc-mobile-utility > .menu-item > a {
  padding:.5rem 0;
  color:#2b2b2b;
  text-decoration:none;
}
.bsc-mobile-cats > .menu-item > a:hover,
.bsc-mobile-utility > .menu-item > a:hover { color: var(--bsc-link-hover, #0d6efd); }

/* If you’re injecting <i> icons into menu items, align them nicely */
.bsc-mobile-cats .menu-item > a i,
.bsc-mobile-utility .menu-item > a i { font-size:1.1rem; margin-right:.5rem; }

/* Ensure main header stacks under preheader */
#bsc-header { position:relative; z-index:4; background:#fff; }
#bsc-header.position-sticky { z-index:1030; }

/* Mobile tweaks */
@media (max-width: 767.98px){
  .bsc-preheader { padding:.25rem 0; }
}

/* Preheader layout and spacing */
.bsc-preheader { position:relative; z-index:5; background:#fff; }
.bsc-preheader .container { padding-top:.35rem; padding-bottom:.35rem; }

/* Neutral link style for both left and right menus */
.bsc-preheader-link,
.bsc-preheader .bsc-preheader-menu .menu-item > a {
  color:#6c757d;                 /* grey like your desktop menu */
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.45rem;                    /* space between icon and text */
  line-height:1.2;
  padding:.25rem .25rem;
}
.bsc-preheader-link:hover,
.bsc-preheader .bsc-preheader-menu .menu-item > a:hover {
  color: var(--bsc-link-hover, #0d6efd);
}

/* Icon sizing/alignment */
.bsc-preheader i,
.bsc-preheader .menu-item > a i {
  font-size:1rem;
  line-height:1;
  vertical-align:middle;
}

/* Horizontal space between utility items on the right */
.bsc-preheader .bsc-preheader-menu { gap:1rem; }


/* ===== Header Categories dropdowns ===== */
.bsc-cats,
.bsc-cats * { list-style: none; }

.bsc-cats > li { position: relative; }

.bsc-cats li.menu-item-has-children > a::after{
  content:"▾";
  font-size:1.2em;
  margin-left:0;
  opacity:1;
      line-height: 1.2em;
}

/* panel */
.bsc-cats .sub-menu{
  position:absolute;
  left:0;
  top:100%;
  min-width:220px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:.5rem;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  padding:.5rem;
  display:none;
  z-index:1000;
}

/* show on hover/keyboard */
.bsc-cats li:hover > .sub-menu,
.bsc-cats li:focus-within > .sub-menu,
.bsc-cats li.open > .sub-menu{ display:block; }

/* links */
.bsc-cats .sub-menu a{
  display:block;
  padding:.4rem .55rem;
  border-radius:.35rem;
  white-space:nowrap;
  color:#1f2a38;
  text-decoration:none;
}
.bsc-cats .sub-menu a:hover,
.bsc-cats .sub-menu a:focus{
  background:rgba(13,110,253,.08);
  color:var(--bs-link-hover-color,#0865cf);
}

/* 3rd level flyout */
.bsc-cats .sub-menu .sub-menu{
  top:0;
  left:100%;
  margin-left:.25rem;
}

/* ensure top row items look like pills (optional, keep your current look) */
.bsc-cats > li > a{
  padding:.35rem .6rem;
  border-radius:.4rem;
  text-decoration:none;
}
.bsc-cats > li > a:hover{ background:rgba(0,0,0,.04); }


.sub-menu i {
    padding-right: 10px !important;
}

@media screen and (max-width:767px){
    .bsc-topbar a.btn {
    border-radius: 50px;
    padding: 5px;
    font-size: 10px;
    width: 100px;
}
}
/* =======================
   Mobile offcanvas menu
   ======================= */
#bscMobileMenu .offcanvas-header{
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
#bscMobileMenu .offcanvas-title{
  font-weight: 700;
  letter-spacing: .2px;
}

/* Sections */
#bscMobileMenu .section-title{
  font-size: .8rem;
  letter-spacing: .06em;
  color: #667085;
  margin: .25rem 0 .5rem;
  text-transform: uppercase;
}

#bscMobileMenu .offcanvas-body{
  padding: 1rem;
}

/* Base list look */
#bscMobileMenu .bsc-mobile-cats,
#bscMobileMenu .bsc-mobile-utility{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#bscMobileMenu .bsc-mobile-cats > li,
#bscMobileMenu .bsc-mobile-utility > li{
  margin: .15rem 0;
}

/* Row layout */
#bscMobileMenu .bsc-mobile-cats a,
#bscMobileMenu .bsc-mobile-utility a{
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .6rem;
  border-radius: .5rem;
  text-decoration: none;
  color: #1f2a38;
}

/* Icon next to text (from your icon picker) */
#bscMobileMenu .bsc-mobile-cats a > i,
#bscMobileMenu .bsc-mobile-utility a > i{
  font-size: 1.05rem;
  color: #0b3a66;               /* brand-ish */
  opacity: .9;
}

/* Hover / focus */
#bscMobileMenu .bsc-mobile-cats a:hover,
#bscMobileMenu .bsc-mobile-cats a:focus,
#bscMobileMenu .bsc-mobile-utility a:hover,
#bscMobileMenu .bsc-mobile-utility a:focus{
  background: rgba(13,110,253,.08); /* soft blue tint */
  color: var(--bs-link-hover-color, #0865cf);
}

/* Submenu container (collapsed by default) */
#bscMobileMenu .bsc-mobile-cats .sub-menu{
  display: none;
  padding-left: .75rem;
  margin: .25rem 0 .35rem .5rem;
  border-left: 2px solid rgba(0,0,0,.06);
}
#bscMobileMenu .bsc-mobile-cats .sub-menu a{
  padding: .4rem .5rem;
  border-radius: .4rem;
  font-size: .95rem;
}

/* Toggle caret button */
#bscMobileMenu .bsc-toggle{
  margin-left: auto;
  border: 0;
  background: transparent;
  width: 34px;
  height: 34px;
  border-radius: .4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #334155;
}
#bscMobileMenu .bsc-toggle:hover{ background: rgba(0,0,0,.05); }

/* Rotate when open */
#bscMobileMenu li.bsc-open > a .bsc-caret{
  transform: rotate(180deg);
}

/* Divider */
#bscMobileMenu hr{
  margin: 1rem 0;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* --- Offcanvas Mobile Menu: clean accordion look --- */

/* Nuke all default bullets/markers (some themes add them) */
#bscMobileMenu .bsc-mobile-cats,
#bscMobileMenu .bsc-mobile-cats ul,
#bscMobileMenu .bsc-mobile-cats li {
  list-style: none !important;
}
#bscMobileMenu .bsc-mobile-cats li::marker,
#bscMobileMenu .bsc-mobile-cats li::before {
  content: none !important;
}

/* Row = label + caret (already flex from earlier) */
/* Parent row: allow wrapping so submenu can drop below */
#bscMobileMenu .bsc-mobile-cats > li{
  display: flex;
  align-items: center;
  gap: .25rem;
  padding-left: 0;
  flex-wrap: wrap;          /* <-- key */
}

/* Make link take the row, caret stays on the row */
#bscMobileMenu .bsc-mobile-cats > li > a{
  flex: 1 1 auto;
  min-width: 0;
}

/* Caret button stays beside the link */
#bscMobileMenu .bsc-mobile-cats > li > .bsc-toggle{
  flex: 0 0 36px;
}

/* Force submenu to a new line under the row */
#bscMobileMenu .bsc-mobile-cats > li > .sub-menu{
  display: none;            /* toggled by JS */
  order: 2;                 /* after link+caret */
  flex-basis: 100%;         /* <-- forces next line */
  width: 100%;
  margin: .35rem 0 .25rem 0;
  padding: .25rem 0 .25rem .75rem;
  border-left: 2px solid rgba(0,0,0,.06);
}

/* Optional: tidy submenu items */
#bscMobileMenu .bsc-mobile-cats .sub-menu > li{
  margin: .1rem 0;
  padding-left: 0;
}


/* Parent state highlight */
#bscMobileMenu .bsc-mobile-cats > li.bsc-open > a{
  background: #f3f6fb;
}

/* Submenu: indented, stacked column, no bullets */
#bscMobileMenu .bsc-mobile-cats .sub-menu{
  display: none;                 /* toggled by JS */
  margin: .35rem 0 .25rem 0;
  padding: .25rem 0 .25rem .75rem;
  border-left: 2px solid rgba(0,0,0,.06);
}
#bscMobileMenu .bsc-mobile-cats .sub-menu > li{
  padding-left: 0;               /* remove any theme indent */
  margin: .1rem 0;
}
#bscMobileMenu .bsc-mobile-cats .sub-menu a{
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .5rem;
  border-radius: .4rem;
  text-decoration: none;
  color: #1f2a38;
  background: transparent;
}
#bscMobileMenu .bsc-mobile-cats .sub-menu a:hover,
#bscMobileMenu .bsc-mobile-cats .sub-menu a:focus{
  background: rgba(13,110,253,.08);
  color: var(--bs-link-hover-color, #0865cf);
}

/* Make sure the caret button stays separate from the link */
#bscMobileMenu .bsc-toggle{
  flex: 0 0 36px;
  border: 0;
  background: transparent;
  width: 36px; height: 36px;
  border-radius: .45rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: #334155;
}
#bscMobileMenu .bsc-toggle:hover{ background: rgba(0,0,0,.05); }
#bscMobileMenu li.bsc-open > .bsc-toggle .bsc-caret{
  transform: rotate(180deg);
  transition: transform .15s ease;
}

/* Ensure icons (from your icon picker) align and don’t inherit bullets */
#bscMobileMenu .bsc-mobile-cats a > i { font-size: 1.05rem; color:#0b3a66; opacity:.9; }


/* Offcanvas logo sizing */
#bscMobileMenu .bsc-offcanvas-logo img{
  max-height: 28px;      /* tweak as you like */
  width: auto;
  display: block;
}
#bscMobileMenu .offcanvas-title{
  line-height: 1;        /* keeps header compact */
}