:root{
  --twt-red:#410099; --twt-bg:#e9e9e9; --twt-panel:#fff; --twt-text:#0f0f0f;
}
@media (max-width: 991.98px){
  /* hide old mobile collapse + desktop mega */
  #header_main_menu, #mobile_header_main_menu { display:none !important; }
}

.twt-offcanvas{ position:fixed; inset:0; z-index:9999; display:none; }
.twt-offcanvas.is-open{ display:block; }
.twt-offcanvas__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.35); opacity:0; transition:opacity .22s; }
.twt-offcanvas.is-open .twt-offcanvas__overlay{ opacity:1; }
.twt-offcanvas__panel{ position:absolute; inset:0; background:var(--twt-bg); transform:translateX(-100%); transition:transform .28s; display:flex; flex-direction:column; }
.twt-offcanvas.is-open .twt-offcanvas__panel{ transform:translateX(0); }

.twt-offcanvas__header{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:14px 16px; }
.twt-offcanvas__title{ margin:0; text-align:center; font-size:34px; font-weight:900; }
.twt-offcanvas__back{ justify-self:start; background:none; border:0; color:var(--twt-text); font-weight:800; font-size:16px; padding:8px 6px; visibility:hidden; opacity:0; transition:opacity .18s; }
.twt-offcanvas__close{ justify-self:end; background:none; border:0; font-size:20px; padding:8px 6px; color:var(--twt-text); }
.twt-offcanvas.has-subview .twt-offcanvas__back{ visibility:visible; opacity:1; }

.twt-offcanvas__viewport{ position:relative; flex:1; overflow:hidden; background:var(--twt-panel); }
.twt-panels-track{ display:flex; height:100%; width:100%; transition:transform .28s; }
.twt-panel{ flex:0 0 100%; height:100%; overflow:auto; }
.twt-panel__inner{ padding:10px 16px 24px; }

/* Root list (big) */
.twt-level--root > li{ list-style:none; margin:0 0 20px; }
.twt-level--root > li > a{ display:block; text-decoration:none; color:var(--twt-text); font-weight:900; font-size:clamp(28px,7vw,48px); line-height:1.05; }
.twt-level--root > li.menu-item-has-children > a{ position:relative; padding-right:26px; }
.twt-level--root > li.menu-item-has-children > a::after{
  content:""; 
  position:absolute; 
  right:4px; 
  top:50%; 
  width:7px; 
  height:7px;
  border-right:2px solid var(--twt-red); 
  border-bottom:2px solid var(--twt-red); 
  transform:translateY(-50%) rotate(-45deg);
}

/* Sub-view */
.twt-subtitle{ font-size:26px; font-weight:900; margin:6px 0 18px; }
.twt-shopall{ font-size:24px; font-weight:900; color:var(--twt-text); text-decoration:none; display:block; margin:0 0 10px; }
.twt-sublist{ margin:10px 0; padding:0; border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); }
.twt-sublist li{ list-style:none; }
.twt-sublist a{ display:flex; align-items:center; justify-content:space-between; padding:16px 6px; text-decoration:none; color:#410099; font-size:16px; font-weight:800; border-bottom:1px solid rgba(0,0,0,.06); }
.twt-sublist li:last-child a{ border-bottom:0; }
/* Keep existing arrow for general sublist items */
.twt-sublist a::after{ content:""; width:7px; height:7px; transform:rotate(-45deg); }

/* Hide nested ULs; JS converts them to panels */
.twt-level ul.sub-menu{ display:none !important; }

/* Force a visible hamburger for our button */
#twt-hamburger{
  --burger-color: var(--twt-red);              
  color: var(--burger-color);
  border: 0;
  padding: 10px 10px;
}

#twt-hamburger .navbar-toggler-icon{
  background-image: none !important;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor) !important;
  background-repeat: no-repeat;
  background-size: 30px 2px, 30px 2px, 30px 2px;
  background-position: center 6px, center, center calc(100% - 6px);
  display: inline-block;
  width: 30px;
  height: 30px;
}

#twt-hamburger:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(227,30,36,.28);
  border-radius: 6px;
}

.header--dark #twt-hamburger{ --burger-color: #000; }

/* === NEW STYLES: 2nd-level accordion arrows + 3rd-level items black === */

/* 2nd-level links that have a submenu */
.twt-panel .twt-sublist > li > a {
  position: relative;
  padding-right: 20px; /* space for arrow */
  display: inline-block;
}

/* Add arrow for 2nd-level items */
.twt-panel .twt-sublist > li > ul {
  display: none; /* hidden by default */
}

/* Only show arrow for links that actually have a nested UL */
.twt-panel .twt-sublist > li:has(ul) > a:after {
  content: '▼';
  position: absolute;
  right: 5px;
  top: 45%;
  transform: translateY(-50%) rotate(-90deg);
  font-size: 0.6em;
  transition: transform 0.3s ease;
}

/* Rotate arrow when accordion open */
.twt-panel .twt-sublist > li > a.active:after {
  transform: translateY(-50%) rotate(0deg);
}

/* 3rd-level items */
.twt-panel .twt-sublist li ul li a {
  color: black !important; /* force black */
  padding-left: 10px; /* optional indent */
  display: block;
}

/* Footer section (fixed bottom links) */
.twt-offcanvas__footer {
  padding: 14px 16px 18px;
  background: var(--twt-bg);
  border-top: 1px solid rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.twt-footer-link {
  text-decoration: none;
  color: var(--twt-text);
  font-weight: 800;
  font-size: 16px;
  text-align: center;
  padding: 8px 0;
  transition: color 0.2s ease;
}

.twt-footer-link:hover {
  color: var(--twt-red);
}