/* ============================================================
 * sidebar_v2.css — VirtueMart Categories Mega Menu
 * Owns its own classes (.v2-cat-*) — zero specificity wars with legacy.
 *
 * Behavior:
 *   - Top-level: vertical list in 240px white card
 *   - Hover top-level: opens 3-col mega panel with level-2 headers
 *   - Each level-2 has its level-3 list under (with orange underline)
 *   - Level-3 with children: shows »  + opens level-4 popout to right
 *   - Level-4 popout can have »  + level-5 popout
 *   - Auto-flip-left if popout would overflow viewport (handled by JS)
 *
 * Active state: when on a category page, the path from root to current
 * is highlighted (.is-ancestor + .is-current).
 *
 * Hides the legacy mod_vm_prod_cat_full output (#gi_cat).
 * ============================================================ */

/* Hide legacy mod_vm_prod_cat_full output. This CSS file only loads when
   V2 sidebar is active, so this rule is conditional by file presence. */
#gi_cat { display: none !important; }

.v2-cats {
  width: 240px;
  /* Force system font stack — match preview look (override any legacy font-family) */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13.5px;
  color: #1f2937;
  position: relative;
}
.v2-cats * {
  font-family: inherit !important;
}

.v2-cats-list,
.v2-cat-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.v2-cats-list {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-bottom: 4px solid #fb923c;   /* soft coral bottom stripe matches header */
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  overflow: visible;                   /* CRITICAL: keep visible so mega menu popouts can render outside the card */
  padding: 4px 0;
}

/* ── Header row "≡  ΚΑΤΗΓΟΡΙΕΣ" inside the card ─────────── */
/* Card has overflow:visible (so popouts work), so the header itself
   needs rounded corners that match the card's inner border radius
   (10px outer - 1px border = 9px inner). */
.v2-cats-list > .v2-cats-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  margin: -4px 0 4px 0;                /* fill above the list padding */
  background: #fb923c;                 /* soft coral — matches bottom stripe */
  color: #ffffff;
  font-size: 13px;                      /* +1px from preview comparison */
  font-weight: 800;                     /* extra bold for clearer definition */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.1;
  list-style: none;
  border-radius: 9px 9px 0 0;
  /* Slightly crisper text rendering on macOS/iOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.v2-cats-list > .v2-cats-header .v2-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 13px;
  flex: 0 0 auto;
}
.v2-cats-list > .v2-cats-header .v2-burger > span {
  display: block;
  height: 2px;
  width: 100%;
  background: #ffffff;
  border-radius: 2px;
}

/* ============================================================
   TOP-LEVEL ITEMS
   ============================================================ */
.v2-cats-list > .v2-cat-top {
  position: relative;
}
.v2-cats-list > .v2-cat-top + .v2-cat-top {
  border-top: 1px solid #f1f5f9;
}
.v2-cats-list > .v2-cat-top > a {
  display: flex;
  align-items: center;
  padding: 4px 14px;
  color: #1f2937;
  font-weight: 500;     /* preview-style — not bold */
  font-size: 13.5px;
  line-height: 1.3;
  text-decoration: none;
  transition: background .12s, color .12s, padding-left .12s;
  position: relative;
}
.v2-cats-list > .v2-cat-top:hover > a,
.v2-cats-list > .v2-cat-top.is-ancestor > a,
.v2-cats-list > .v2-cat-top.is-current > a {
  background: #f8fafc;
  color: #ea580c;
  padding-left: 18px;
}
.v2-cats-list > .v2-cat-top:hover > a::before,
.v2-cats-list > .v2-cat-top.is-ancestor > a::before,
.v2-cats-list > .v2-cat-top.is-current > a::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px; background: #ea580c;
}
/* Red bullet on top-level highlighted item (current OR ancestor of current) */
.v2-cats-list > .v2-cat-top.is-current > a::after,
.v2-cats-list > .v2-cat-top.is-ancestor > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dc2626;
  flex: 0 0 auto;
  margin-left: 8px;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
  /* Override the chevron ::after for has-children when also active */
  border: 0;
  transform: none;
  opacity: 1;
}

/* Red bullet on level-2 column header when current/ancestor — right-aligned */
.v2-cat-mega > .v2-cat-l2.is-current > a::after,
.v2-cat-mega > .v2-cat-l2.is-ancestor > a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc2626;
  flex: 0 0 auto;
  margin-left: auto;            /* push to right edge, aligned with level-3/4/5 bullets */
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}
/* Make sure the level-2 label takes available width so bullet aligns right */
.v2-cat-mega > .v2-cat-l2 > a > .v2-cat-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* Red bullet on level-3 / level-4+ when current/ancestor — overrides » indicator */
.v2-cat-mega > .v2-cat-l2 > .v2-cat-children > .v2-cat-l3.is-current > a::after,
.v2-cat-mega > .v2-cat-l2 > .v2-cat-children > .v2-cat-l3.is-ancestor > a::after,
.v2-cat-popout > .v2-cat-deep.is-current > a::after,
.v2-cat-popout > .v2-cat-deep.is-ancestor > a::after {
  content: "" !important;        /* override the » content */
  width: 6px !important;
  height: 6px !important;
  padding: 0 !important;          /* important: no padding so bullet stays round */
  border: 0 !important;
  border-radius: 50% !important;
  background: #dc2626 !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  box-sizing: border-box !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18) !important;
  /* Cancel inherited » styling */
  font-size: 0 !important;
  font-weight: 400 !important;
  color: transparent !important;
  transform: none !important;
}
.v2-cat-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Top-level chevron — appears on has-children only */
.v2-cats-list > .v2-cat-top.has-children > a::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  flex: 0 0 auto;
  margin-left: 8px;
  opacity: 0.35;
  transition: opacity .12s, transform .12s;
}
.v2-cats-list > .v2-cat-top.has-children:hover > a::after {
  opacity: 1;
  transform: rotate(45deg) translate(2px, -2px);
}

/* ============================================================
   MEGA PANEL (level-2 container, opens on top-level hover)
   ============================================================ */
.v2-cat-mega {
  display: none;
  position: absolute;
  left: 248px;
  top: -16px;            /* opens slightly higher for diagonal-mouse forgiveness */
  width: 680px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  padding: 12px 14px 12px 24px;  /* extra left padding = hover bridge */
  margin-left: -10px;            /* visually pulls panel close to sidebar */
  z-index: 1000;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 14px;
  align-items: start;
}
.v2-cats-list > .v2-cat-top:hover > .v2-cat-mega {
  display: grid;
}

/* ============================================================
   LEVEL-2 (column blocks inside mega panel)
   ============================================================ */
.v2-cat-mega > .v2-cat-l2 {
  margin: 0 0 5px 0;
  padding: 0;
  position: relative;
}
.v2-cat-mega > .v2-cat-l2 > a {
  display: flex;
  align-items: center;
  padding: 0 3px 2px 0;       /* small right pad so bullet halo doesn't clip */
  margin: 0 0 3px 0;
  border: 0;
  border-bottom: 2px solid #ea580c;  /* orange underline UNDER text */
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  min-height: 18px;
  text-decoration: none;
  transition: color .12s;
}
.v2-cat-mega > .v2-cat-l2 > a:hover,
.v2-cat-mega > .v2-cat-l2.is-ancestor > a {
  color: #ea580c;
}
.v2-cat-mega > .v2-cat-l2 > a > .v2-cat-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   LEVEL-3 (sub-items under each level-2)
   ============================================================ */
.v2-cat-mega > .v2-cat-l2 > .v2-cat-children {
  padding: 2px 0 0 0;
}
.v2-cat-mega > .v2-cat-l2 > .v2-cat-children > .v2-cat-l3 {
  margin: 0;
  padding: 0;
  position: relative;
  line-height: 1.2;
}
.v2-cat-mega > .v2-cat-l2 > .v2-cat-children > .v2-cat-l3 > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 3px 0 0;        /* small right pad so bullet halo doesn't clip */
  color: #475569;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  /* No overflow:hidden — let ellipsis on .v2-cat-label handle truncation,
     and let the bullet's box-shadow halo render fully on the right. */
  transition: color .12s, padding-left .12s;
}
.v2-cat-mega > .v2-cat-l2 > .v2-cat-children > .v2-cat-l3 > a:hover,
.v2-cat-mega > .v2-cat-l2 > .v2-cat-children > .v2-cat-l3.is-current > a,
.v2-cat-mega > .v2-cat-l2 > .v2-cat-children > .v2-cat-l3.is-ancestor > a {
  color: #ea580c;
  padding-left: 6px;
}
.v2-cat-mega > .v2-cat-l2 > .v2-cat-children > .v2-cat-l3 > a > .v2-cat-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
/* » indicator on level-3 with-children */
.v2-cat-mega > .v2-cat-l2 > .v2-cat-children > .v2-cat-l3.has-children > a::after {
  content: "»";
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 6px;
  color: #ea580c;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  transition: transform .15s;
}
.v2-cat-mega > .v2-cat-l2 > .v2-cat-children > .v2-cat-l3.has-children:hover > a::after {
  transform: translateX(2px);
}

/* ============================================================
   LEVEL-4 + LEVEL-5 POPOUTS
   ============================================================ */
.v2-cat-popout {
  display: none;
  position: absolute;
  left: 100%;             /* no gap = continuous hover surface */
  top: -6px;
  width: 200px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.16), 0 4px 8px rgba(0,0,0,0.06);
  padding: 6px 10px 6px 12px;
  margin: 0;
  z-index: 1100;
}
/* Show on hover OR is-popout-open class (set by JS hover-intent) */
.v2-cat-l3.has-children:hover > .v2-cat-popout,
.v2-cat-l3.is-popout-open > .v2-cat-popout,
.v2-cat-deep.has-children:hover > .v2-cat-popout,
.v2-cat-deep.is-popout-open > .v2-cat-popout {
  display: block;
}
/* Header inside popout (parent label) */
.v2-cat-popout::before {
  content: attr(data-parent-label);
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #ea580c;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 3px;
  margin-bottom: 4px;
  line-height: 1.2;
  border-bottom: 1px solid #fed7aa;
}
/* Items inside popout */
.v2-cat-popout > .v2-cat-deep {
  margin: 0;
  padding: 0;
  position: relative;
  line-height: 1.2;
}
.v2-cat-popout > .v2-cat-deep > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 3px 0 0;        /* small right pad for bullet halo */
  color: #475569;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  transition: color .12s, padding-left .12s;
}
.v2-cat-popout > .v2-cat-deep > a:hover,
.v2-cat-popout > .v2-cat-deep.is-current > a,
.v2-cat-popout > .v2-cat-deep.is-ancestor > a {
  color: #ea580c;
  padding-left: 4px;
}
.v2-cat-popout > .v2-cat-deep > a > .v2-cat-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
/* » on popout items with children (level-4 → level-5) */
.v2-cat-popout > .v2-cat-deep.has-children > a::after {
  content: "»";
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 6px;
  color: #ea580c;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}

/* Auto-flip-left when popout would overflow viewport.
   JS adds .flip-left class on mouseenter if rect.right > viewport. */
.v2-cat-popout.flip-left {
  left: auto;
  right: 100%;
}

/* ── Firefox-only font-weight bump ───────────────────────────────────
 * Firefox renders Segoe UI at weight 500 noticeably lighter than Chrome
 * (DirectWrite vs Firefox's font hinting). Bump main category anchors
 * to 600 in Firefox only, so the visual weight matches Chrome.
 * @-moz-document url-prefix() targets only Firefox (Gecko engine). */
@-moz-document url-prefix() {
  .v2-cats-list > .v2-cat-top > a {
    font-weight: 600 !important;
  }
}