/* FIAMO Mega Menu v4.1 — fluid width */
:root{
  --fmm-or:#E8620A;
  --fmm-or-h:#CF5208;
  --fmm-or-p:#FEF0E7;
  --fmm-dk:#1C1C1C;
  --fmm-tx:#2A2A2A;
  --fmm-mu:#717171;
  --fmm-bd:#E8E8E8;
  --fmm-bg:#FFFFFF;
  --fmm-sf:#F6F5F3;
  --fmm-pw:380px;
}

/* Root — fills 100% of its parent container */
.fmm-root{
  position:relative;
  display:block;
  width:100%;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:13px;
  line-height:1.4;
  /* Ensure root creates its own stacking context above theme elements */
  z-index:9999;
  isolation:isolate;
}

/* Sidebar — always 100% of the parent column/widget */
.fmm-sidebar{
  list-style:none;
  margin:0;
  padding:6px 0;
  background:var(--fmm-bg);
  border:1px solid var(--fmm-bd);
  border-radius:10px;
  width:100%;
  box-sizing:border-box;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  position:relative;
  z-index:10;
}

/* Group heading */
.fmm-group-row{
  padding:10px 16px 3px;
}
.fmm-group-divider{
  height:1px;
  background:var(--fmm-bd);
  margin:6px 12px;
}
.fmm-group-name{
  display:block;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--fmm-or);
  text-decoration:none;
}
.fmm-group-name:hover{opacity:.75;}

/* Sidebar item */
.fmm-item{position:static;}

/* Trigger */
.fmm-trigger{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px 8px 16px;
  color:var(--fmm-tx);
  text-decoration:none;
  border-left:3px solid transparent;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
  cursor:pointer;
  user-select:none;
}
.fmm-trigger:hover,
.fmm-item.fmm-open .fmm-trigger{
  background:var(--fmm-or-p);
  color:var(--fmm-or);
  border-left-color:var(--fmm-or);
}
.fmm-trigger-label{
  flex:1;
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.fmm-trigger-count{
  font-size:10px;
  color:var(--fmm-mu);
  background:var(--fmm-sf);
  border:1px solid var(--fmm-bd);
  padding:1px 6px;
  border-radius:20px;
  flex-shrink:0;
  transition:background .12s,color .12s,border-color .12s;
}
.fmm-item.fmm-open .fmm-trigger-count{
  background:var(--fmm-or-p);
  color:var(--fmm-or);
  border-color:rgba(232,98,10,.25);
}
.fmm-trigger-arrow{
  flex-shrink:0;
  color:var(--fmm-mu);
  display:flex;
  align-items:center;
  transition:color .12s;
}
.fmm-item.fmm-open .fmm-trigger-arrow{color:var(--fmm-or);}
.fmm-pos-right .fmm-trigger-arrow{transform:rotate(180deg);}

/* ---- PANEL ----
   Position: absolute, outside normal flow.
   Left/right offset is calculated in JS based on actual sidebar width,
   so we do NOT use calc(var(--fmm-sw) + 6px) anymore.
   JS sets panel.style.left (or right) dynamically.
   Width is fixed at --fmm-pw; can be overridden with CSS.
*/
.fmm-panel{
  position:fixed;
  top:0;
  left:-9999px;
  width:var(--fmm-pw);
  background:var(--fmm-bg);
  border:1px solid var(--fmm-bd);
  border-radius:10px;
  box-shadow:0 8px 40px rgba(0,0,0,.13),0 2px 10px rgba(0,0,0,.06);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1),visibility .18s;
  overflow:hidden;
  max-height:85vh;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--fmm-bd) transparent;
  z-index:20;
  /* default translate for left position */
  transform:translateX(-10px);
}
.fmm-pos-right .fmm-panel{
  transform:translateX(10px);
}
.fmm-panel::-webkit-scrollbar{width:4px;}
.fmm-panel::-webkit-scrollbar-thumb{background:var(--fmm-bd);border-radius:4px;}

/* Open state — panel is moved to body, so we use a direct class */
.fmm-panel.fmm-panel-open{
  opacity:1;
  visibility:visible;
  pointer-events:all;
  transform:translateX(0);
}

/* Panel header */
.fmm-panel-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:var(--fmm-sf);
  border-bottom:1px solid var(--fmm-bd);
}
.fmm-panel-img{
  width:48px;
  height:48px;
  border-radius:7px;
  background:var(--fmm-bd) center/cover no-repeat;
  flex-shrink:0;
}
.fmm-panel-title{
  display:block;
  font-size:14px;
  font-weight:700;
  color:var(--fmm-dk);
  margin-bottom:5px;
}
.fmm-panel-viewall{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  font-weight:600;
  color:var(--fmm-or);
  text-decoration:none;
  transition:gap .13s;
}
.fmm-panel-viewall:hover{gap:8px;}

/* Panel list */
.fmm-panel-list{
  list-style:none;
  margin:0;
  padding:6px 0 10px;
}
.fmm-panel-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  text-decoration:none;
  color:var(--fmm-tx);
  transition:background .1s ease,color .1s ease;
}
.fmm-panel-row:hover{
  background:var(--fmm-or-p);
  color:var(--fmm-or);
}
.fmm-row-img{
  width:34px;
  height:34px;
  border-radius:5px;
  background:var(--fmm-bd) center/cover no-repeat;
  flex-shrink:0;
}
.fmm-row-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--fmm-bd);
  flex-shrink:0;
  transition:background .1s,transform .1s;
}
.fmm-panel-row:hover .fmm-row-dot{
  background:var(--fmm-or);
  transform:scale(1.5);
}
.fmm-row-name{
  flex:1;
  font-size:13px;
  font-weight:500;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fmm-row-count,
.fmm-row-price{
  font-size:10.5px;
  color:var(--fmm-mu);
  background:var(--fmm-sf);
  border:1px solid var(--fmm-bd);
  padding:1px 6px;
  border-radius:20px;
  flex-shrink:0;
  white-space:nowrap;
}
.fmm-row-price{
  color:var(--fmm-or);
  font-weight:600;
  background:var(--fmm-or-p);
  border-color:rgba(232,98,10,.2);
}

/* Mobile — stack vertically, no floating panel */
@media(max-width:768px){
  .fmm-root{display:block;}
  .fmm-sidebar{border-radius:0;box-shadow:none;}
  .fmm-panel{
    position:relative !important;
    width:100% !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:all !important;
    max-height:none !important;
    min-height:0 !important;
    box-shadow:none;
    border:none;
    border-left:3px solid var(--fmm-or);
    border-radius:0;
    display:none;
    z-index:1 !important;
  }
  .fmm-panel.fmm-panel-open{display:block;}
  .fmm-trigger-arrow{display:none;}
}