/*
 * WC Category Mega Menu (WCCMM)
 * Desktop: "mimovrste/shoppster" style dropdown:
 *  - orange bar header
 *  - left column of root categories with icons + mini caret
 *  - hover/focus on root swaps right flyout panel (3–4 columns)
 * Mobile: accordion
 *
 * Note: Storefront (and many themes) apply aggressive styles to nav UL/LI.
 * We hard-reset list styles INSIDE the WCCMM panel to keep layout stable.
 */

.wccmm{ position:relative; }

/* Storefront tweak: tighter vertical padding for standard navigation links */
.main-navigation ul li a{
  padding:8px 0;
}

/* Toggle button (orange, square corners) */
.wccmm__toggle{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  border:0;
  border-radius:0;
  padding:.75rem 1rem;
  background:#ff5400;
  color:#fff;
  cursor:pointer;
  line-height:1;
  font-weight:700;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.wccmm__toggle:hover{ filter:brightness(.98); }
.wccmm__toggle:focus{ outline:2px solid rgba(0,0,0,.35); outline-offset:2px; }
.wccmm__toggle-ico,
.wccmm__toggle-caret{ display:inline-flex; }
.wccmm__toggle-ico svg,
.wccmm__toggle-caret svg{ display:block; }

/* Panel container */
.wccmm__panel{
  position:absolute;
  left:0;
  top:calc(100% + .55rem);
  z-index:99999;
  width:min(1120px, 96vw);
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:0;
  box-shadow:0 22px 60px rgba(0,0,0,.20);
  overflow:hidden;
}

/* Hard resets (prevents Storefront/main-navigation floats & inline menus) */
.wccmm__panel, .wccmm__panel *{ box-sizing:border-box; }
.wccmm__panel ul,
.wccmm__panel li{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  display:block !important;
}
.wccmm__panel a{ text-decoration:none; }

.wccmm__empty,
.wccmm__subempty{
  padding:1rem;
  color:rgba(0,0,0,.72);
}

/* Desktop vs mobile wrappers */
.wccmm__desktop{ display:block; }
.wccmm__mobile{ display:none; }

/* Orange bar header inside dropdown (like shoppster) */
.wccmm__bar{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.8rem 1rem;
  background:#ff5400;
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
}
.wccmm__barico{ display:inline-flex; }
.wccmm__barico svg{ display:block; }

/* Mega layout */
.wccmm__mega{
  display:flex;
  min-height:360px;
}

/* Left column (root categories) */
.wccmm__roots{
  width:320px;
  border-right:1px solid rgba(0,0,0,.07);
  background:#fff;
  padding:.4rem;
}

.wccmm__rootlink{
  display:flex !important;
  align-items:center;
  gap:.65rem;
  padding:.62rem .65rem;
  border-radius:0;
  color:inherit;
}
.wccmm__rootlink:hover{ background:rgba(0,0,0,.05); }
.wccmm__rootitem.is-active .wccmm__rootlink{ background:rgba(0,0,0,.07); }
.wccmm__roottext{ flex:1; font-weight:650; }

/* Mini arrow (small, subtle) */
.wccmm__mini-arrow{ opacity:.65; display:inline-flex; }
.wccmm__mini-arrow svg{ display:block; }

/* Icons */
.wccmm__icon{
  width:1.25rem;
  height:1.25rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}
.wccmm__icon svg{ display:block; }
.wccmm__icon.dashicons{ font-size:18px; width:18px; height:18px; line-height:18px; }

/* Right flyout panel */
.wccmm__panels{
  flex:1;
  min-width:0;
  padding:1.1rem 1.2rem 1.2rem;
  background:#fff;
}

.wccmm__panelhead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.85rem; }
.wccmm__paneltitle{ font-weight:800; color:inherit; }
.wccmm__paneltitle:hover{ text-decoration:underline; }

/* Subcategory grid (3–4 columns) */
.wccmm__subgrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(170px, 1fr));
  gap:1rem 1.35rem;
}
@media (min-width: 1120px){
  .wccmm__subgrid{ grid-template-columns:repeat(4, minmax(170px, 1fr)); }
}

.wccmm__group{ min-width:0; }
.wccmm__grouptitle{
  display:none;
}

.wccmm__sublinks,
.wccmm__subsublist{ list-style:none; }

.wccmm__sublink{
  display:inline-block;
  padding:.18rem 0;
  color:inherit;
  opacity:.92;
}
.wccmm__sublink:hover{ text-decoration:underline; }

.wccmm__subsublink{
  display:inline-block;
  padding:.1rem 0;
  color:inherit;
  opacity:.72;
  font-size:.92em;
}
.wccmm__subsublink:hover{ text-decoration:underline; }

/* Mobile accordion */
@media (max-width: 799px){
  .wccmm__panel{
    position:static;
    width:100%;
    margin-top:.6rem;
    border-radius:0;
    box-shadow:none;
  }
  .wccmm__toggle{ width:100%; justify-content:space-between; }
  .wccmm__desktop{ display:none; }
  .wccmm__mobile{ display:block; padding:.6rem .6rem .85rem; }

  .wccmm__nav{ max-height:none; overflow:visible; }

  .wccmm__row{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:.6rem;
    padding:.6rem .45rem;
    border-radius:0;
  }
  .wccmm__row:hover{ background:rgba(0,0,0,.04); }
  .wccmm__link{ color:inherit; }
  .wccmm__link:hover{ text-decoration:underline; }

  .wccmm__expander{
    border:0;
    background:#2f2f2f00;
    cursor:pointer;
    border-radius:0px;
    padding:.25rem .35rem;
    color:black;
  }
  .wccmm__expander:focus{ outline:2px solid rgba(0,0,0,.35); outline-offset:2px; }

  .wccmm__children{ padding-left:1.35rem; }
}

/* If opened by default (or toggled), ensure hidden attr is overridden */
.wccmm.is-open .wccmm__panel[hidden]{ display:block; }