/* Offcanvas layout */
.ali-mobile-offcanvas { 
  width: min(92vw, 420px); 
  --accent: var(--accent-color, #0f6a5b);
  --bs-offcanvas-width: min(92vw, 420px);
  --bs-offcanvas-zindex: 20000; /* (1) above any header/mini-cart */
  background: var(--bs-body-bg);
}
@media (min-width: 576px) { .ali-mobile-offcanvas { width: 400px; } }

/* Tabs */
.ali-mobile-tabs .nav-link { color: var(--bs-body-color); }
.ali-mobile-tabs .nav-link.active {
  color: var(--accent-color);
  border-color: transparent transparent var(--accent-color);
}

/* Primary menu list */
.ali-mobile-primary > li > a {
  padding: .625rem .25rem;
  color: var(--bs-body-color);
}
.ali-mobile-primary a:hover { color: var(--accent-color); }

/* Category thumbnails */
.cat-thumb-wrap {
  inline-size: 28px; block-size: 28px; border-radius: 50%; overflow: hidden;
  display: inline-grid; place-items: center; background: rgba(0,0,0,.05);
}
.cat-thumb { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cat-thumb--top { inline-size: 24px; block-size: 24px; }
.cat-thumb--sm  { inline-size: 18px; block-size: 18px; }

/* Accordion look */
.ali-cats-accordion .accordion-button { gap: .5rem; }
.ali-cats-accordion .accordion-button:not(.collapsed) {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  box-shadow: none;
}

/* Child & grandchild links */
.ali-cats-children .list-group-item {
  border: 0; padding: .5rem .25rem; color: var(--bs-body-color);
}
.ali-child-title:hover,
.ali-grand-link:hover { color: var(--accent-color); }

/* Nested grand list spacing */
.ali-child-block + .ali-child-block { margin-top: .25rem; }
.ali-grand-wrap { margin-inline-start: 1.75rem; }

/* Smooth tab transitions */
.tab-pane { transition: opacity .2s ease, transform .2s ease; }
.tab-pane:not(.active) { opacity: 0; transform: translateY(6px); }
.tab-pane.active        { opacity: 1; transform: none; }


/* Kill legacy green pill + cross overlay */
#navmenu .mobile-nav-toggle { display: none !important; }
.mobile-nav-active { overflow: auto; } /* prevent any old 'body' locking from theme */


/* Neutral, borderless icon buttons */
.icon-btn{
  appearance: none;
  -webkit-appearance: none;
  inline-size: 40px; block-size: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0; line-height: 1;
  border-radius: 12px; cursor: pointer;
}
.icon-btn .bi{ font-size: 26px; line-height: 1; }

/* hover/focus (subtle) */
.icon-btn:hover{ background: rgba(0,0,0,.06); }
.icon-btn:focus{ outline: none; box-shadow: 0 0 0 2px rgba(0,0,0,.08) inset; }

/* active cue while offcanvas is open (optional) */
.icon-btn.is-active{
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  box-shadow: inset 0 0 0 2px var(--accent-color);
}

/* kill any legacy toggle visuals */
#navmenu .mobile-nav-toggle{ display: none !important; }


/* Strong reset ONLY for the header hamburger */
.header .icon-btn{
  all: unset;                 /* nuke UA + Woo button styles */
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 40px; block-size: 40px;
  border-radius: 12px;
  cursor: pointer;
  background: transparent;
  /* alignment with your other icons */
  vertical-align: middle; transform: translateY(1px);
}
.header .icon-btn .bi{ font-size: 26px; line-height: 1; }

/* nice hover/focus */
.header .icon-btn:hover{ background: rgba(0,0,0,.06); }
.header .icon-btn:focus{ outline: none; box-shadow: 0 0 0 2px rgba(0,0,0,.08) inset; }

/* when offcanvas is open (optional) */
.header .icon-btn.is-active{
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  box-shadow: inset 0 0 0 2px var(--accent-color);
}

/* kill your legacy green pill if any remains */
#navmenu .mobile-nav-toggle{ display: none !important; }


/* Z-index so offcanvas sits above everything (1) */
.ali-mobile-offcanvas{
  --accent: var(--accent-color, #0f6a5b);
  --bs-offcanvas-width: min(92vw, 420px);
  --bs-offcanvas-zindex: 20000;
}

/* Tabs: active = accent green (2) */
.ali-mobile-tabs .nav-link{ color: var(--bs-body-color); }
.ali-mobile-tabs .nav-link.active{
  color: var(--accent);
  border-color: transparent transparent var(--accent) transparent;
  font-weight: 600;
}

/* Primary menu links */
.ali-mobile-primary > li > a{
  padding: .6rem .25rem;
  color: var(--bs-body-color);
}
.ali-mobile-primary a:hover{ color: var(--accent); }

/* Icon thumbnails sized like menu icons (3) */
.cat-thumb-wrap{
  inline-size: 22px; block-size: 22px;
  border-radius: 50%; overflow: hidden;
  display: inline-grid; place-items: center;
  background: rgba(0,0,0,.05);
}
.cat-thumb{ inline-size: 100%; block-size: 100%; object-fit: cover; }
.cat-thumb--sm{ inline-size: 18px; block-size: 18px; }

/* Bootstrap accordion look preserved */
#pane-cats .accordion-button{ gap: .5rem; }
#pane-cats .accordion-button .ali-view-all{
  margin-inline-start: auto; text-decoration: none;
}
#pane-cats .accordion-button:not(.collapsed){
  color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 92%);
  box-shadow: none;
}

/* Children: simple indented nav links (4) — no list-group/table styling */
.ali-cat-children,
.ali-cat-grand{ list-style: none; margin: 0; padding: 0; }

.ali-cat-children > li{ margin-bottom: .25rem; }
.ali-cat-grand       > li{ margin-bottom: .2rem; }

/* indent levels */
.ali-cat-children{ padding-inline-start: 1rem; }
.ali-cat-grand   { padding-inline-start: 1.25rem; }

/* links keep Bootstrap nav-link feel but minimal */
.ali-cat-link,
.ali-grand-link{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .25rem;
  color: var(--bs-body-color);
  border-radius: .5rem;
}
.ali-cat-link:hover,
.ali-grand-link:hover{
  color: var(--accent);
  background: rgba(0,0,0,.04);
}