:root{
  --mscm-text-light: rgba(13, 14, 18, 0.78);
  --mscm-text-light-hover: #0d0e12;
  --mscm-text-selected: rgba(232, 197, 23, 0.97);
  --mscm-text-dark: #ffffff;

  --mscm-divider-fade: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.14) 35%,
    rgba(0,0,0,0.14) 65%,
    rgba(0,0,0,0) 100%
  );

  --mscm-dur: 240ms;
  --mscm-ease: cubic-bezier(.2,.8,.2,1);
}

.ms-side-menu{
  position: relative;
  background: transparent;
  backdrop-filter: blur(2px);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  user-select: none;
}

/* schémy – JS prepisuje auto → light/dark */
.ms-side-menu.scheme-light .mscm-nav{ color: var(--mscm-text-light); }
.ms-side-menu.scheme-dark  .mscm-nav{ color: var(--mscm-text-dark);  }

.mscm-nav a{ color: inherit; text-decoration: none; }

.mscm-root{ list-style: none; margin:0; padding:0; }
.mscm-level{ list-style: none; margin:0; padding:0 0 0 16px; }

.mscm-item{ position: relative; }
.mscm-row{
  display: grid;
  grid-template-columns: 18px 60px 1fr; /* stĺpec pre kruh zarovnaný na 60px */
  gap: 10px;
  align-items: center;
  padding: 10px 8px;
  cursor: pointer;
  transition:
    background var(--mscm-dur) var(--mscm-ease),
    color var(--mscm-dur) var(--mscm-ease),
    transform var(--mscm-dur) var(--mscm-ease),
    box-shadow var(--mscm-dur) var(--mscm-ease);
  border-radius: 12px;
  will-change: transform;
}

/* caret */
.mscm-caret{
  width: 14px; height: 14px; display:inline-block;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: .6;
  transition: transform var(--mscm-dur) var(--mscm-ease), opacity var(--mscm-dur) var(--mscm-ease);
  cursor: pointer;
}
.mscm-caret--empty{ opacity:0; }

/* kruh 60×60, obrázok 40×40 (žiadne presvitanie rohov) */
.mscm-thumb{ position: relative; width:60px; height:60px; display:inline-grid; place-items:center; }
.mscm-thumb-bg{
  position:absolute; inset:0; background:#fff; border-radius:999px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06) inset,
    0 4px 12px rgba(0,0,0,.12);
  transition: box-shadow var(--mscm-dur) var(--mscm-ease),
              transform var(--mscm-dur) var(--mscm-ease);
}
.mscm-thumb img{
  position:relative; width:40px; height:40px; object-fit:contain; z-index:1;
  transition: transform var(--mscm-dur) var(--mscm-ease);
}
.mscm-thumb--placeholder{ background: linear-gradient(135deg,#eee,#ddd); border-radius:999px; }

/* TEXT – pôvodná veľkosť + väčší odstup od obrázka */
.mscm-label{ display:inline-flex; align-items:center; gap:8px; margin-left:6px; }
.mscm-name{ font-size:14px; line-height:1.25; font-weight:500; }
.mscm-count{ opacity:.65; font-size:12px; }

/* hover/focus – text (silnejší, unifikovaný s efektom obrázka) */
.ms-side-menu.scheme-dark  .mscm-row:hover,
.ms-side-menu.scheme-dark  .mscm-row:focus{ color: var(--mscm-text-selected); }

.ms-side-menu.scheme-light .mscm-row:hover,
.ms-side-menu.scheme-light .mscm-row:focus{ color: var(--mscm-text-light-hover); }

/* zosilnený spoločný efekt na hover: kruh + obrázok + text */
.mscm-row:hover .mscm-thumb-bg,
.mscm-row:focus .mscm-thumb-bg{
  transform: translateY(-1.5px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.08) inset,
    0 9px 20px rgba(0,0,0,.20);
}
.mscm-row:hover .mscm-thumb img,
.mscm-row:focus .mscm-thumb img{ transform: scale(1.04); }

.mscm-row:hover .mscm-label .mscm-name,
.mscm-row:focus .mscm-label .mscm-name{
  font-weight:700;                      /* hrubšie pri hover */
  transform: translateY(-1px) scale(1.02);
  transition: transform var(--mscm-dur) var(--mscm-ease), font-weight var(--mscm-dur) var(--mscm-ease);
}
.mscm-row:hover .mscm-label,
.mscm-row:focus .mscm-label{
  transform: translateY(-1px) scale(1.02);
  transition: transform var(--mscm-dur) var(--mscm-ease);
}

/* aktívna kategória – výraznejšia */
.mscm-item.is-active > .mscm-row{
  color: var(--mscm-text-selected);
  font-weight: 700;
}

/* otvorené submenu – caret rotácia + jemný „pop“ efekt riadku */
.mscm-item.is-open > .mscm-row > .mscm-caret{ transform: rotate(45deg); opacity:1; }
.mscm-item.is-open > .mscm-row{ transform: translateX(2px); }

/* výška animácie podstromu */
.mscm-item.has-children > ul.mscm-level{
  overflow:hidden;
  transition: height var(--mscm-dur) var(--mscm-ease);
}

/* divider:
   - light: veľmi jemný FADE,
   - dark: úplne skryť.
*/
.mscm-divider{ border:0; height:1px; margin:6px 0; opacity:1; }
.ms-side-menu.scheme-light .mscm-divider{ background: var(--mscm-divider-fade); }
.ms-side-menu.scheme-dark  .mscm-divider{ display:none; }

/* bez divideru na poslednej položke */
ul.mscm-level > li:last-child > .mscm-divider,
ul.mscm-root  > li:last-child > .mscm-divider{ display:none; }

/* micro-klik efekt (JS pridá .js-pressed) */
.mscm-row.js-pressed{
  transform: scale(0.992);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}



/* ========================= HORIZONTÁLNA VARIANTA ========================= */
.ms-side-menu.mscm-horizontal { background: transparent; }

/* Top-level vedľa seba */
.ms-side-menu.mscm-horizontal .mscm-root{
  display:flex; flex-wrap:wrap; gap:8px 14px; padding:0; margin:0;
}
.ms-side-menu.mscm-horizontal .mscm-item{ position:relative; }
.ms-side-menu.mscm-horizontal .mscm-row{
  display:grid;
  grid-template-columns: 60px 1fr 18px; /* 60 = kruh, 1fr = text, 18 = caret vpravo */
  gap:10px; align-items:center;
  padding:10px 12px; border-radius:12px;
}


/* priradenie do stĺpcov (ak je poradie v HTML iné) */
.ms-side-menu.mscm-horizontal .mscm-thumb  { grid-column: 1; }
.ms-side-menu.mscm-horizontal .mscm-label  { grid-column: 2; white-space: nowrap; }
.ms-side-menu.mscm-horizontal .mscm-caret  { grid-column: 3; margin-left: 6px; }

/* nech sa nič neprelamuje do nového riadka */
.ms-side-menu.mscm-horizontal .mscm-row     { min-width: 0; }
.ms-side-menu.mscm-horizontal .mscm-label .mscm-name { white-space: nowrap; }



/* DROPDOWN (1. úroveň) – vždy biele submenu, nezávisle od schémy */
.ms-side-menu.mscm-horizontal .mscm-item > ul.mscm-level{
  position:absolute; left:0; top: calc(100% + 10px);
  min-width: 260px; max-width: min(88vw, 420px);
  background:#fff; color: var(--mscm-text-light);
  border-radius:14px; padding:8px; margin:0; z-index: 9999;
  box-shadow:
    0 10px 28px rgba(0,0,0,.18),
    0 1px 0 rgba(0,0,0,.04) inset;
  list-style:none;

  /* ovládame cez .is-open (nie cez [hidden]) */
  visibility:hidden; opacity:0; transform: translateY(6px);
  transition: opacity var(--mscm-dur) var(--mscm-ease),
             transform var(--mscm-dur) var(--mscm-ease),
             visibility 0s linear var(--mscm-dur);

  /* vypni výškovú animáciu z vertikálu */
  height:auto !important; overflow:visible;
}

/* zobrazenie (pri .is-open na parent LI) */
.ms-side-menu.mscm-horizontal .mscm-item.is-open > ul.mscm-level{
  visibility:visible; opacity:1; transform:none; transition-delay:0s;
}

/* vnorené levely vnútri dropdownu bez odsadenia */
.ms-side-menu.mscm-horizontal .mscm-item > ul.mscm-level .mscm-level{
  position: static; padding-left: 0;
}

/* kompaktnejšie náhľady v headeri */
.ms-side-menu.mscm-horizontal .mscm-thumb{ width:60px; height:60px; }
.ms-side-menu.mscm-horizontal .mscm-thumb img{ width:40px; height:40px; }






/* ====== HEADER MENU: kruhové obrázky + hover efekt ako v shortcodoch ====== */
/* === PLUGIN-HORIZONTAL-AUTO-MENU: kruh 60×60, obrázok 40×40, bez presvitania === */
nav[aria-label="PLUGIN-HORIZONTAL-AUTO-MENU"] .menu > li > a,
nav[aria-label="PLUGIN-HORIZONTAL-AUTO-MENU"] .sub-menu li > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), color .18s ease;
}

/* KRUH (60x60) – žiadne presvitanie rohov */
nav[aria-label="PLUGIN-HORIZONTAL-AUTO-MENU"] .mscm-thumb {
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 9999px;
  overflow: hidden;
  background: #fff; /* čisté pozadie kruhu */
  box-shadow: 0 1px 0 rgba(0,0,0,.04) inset, 0 2px 8px rgba(0,0,0,.08);
}

/* OBRÁZOK (40x40) – presne v strede, bez zaoblenia a bez presvitania */
nav[aria-label="PLUGIN-HORIZONTAL-AUTO-MENU"] .mscm-thumb-img {
  width: 40px;
  height: 40px;
  object-fit: contain; /* ochrana pri netypických pomeroch */
  border-radius: 0;    /* žiadne rohy na obrázku */
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}


/* Text + caret v JEDNOM riadku */
nav[aria-label="PLUGIN-HORIZONTAL-AUTO-MENU"] .mscm-label-text{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  width:auto !important;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
}


/* Caret, ktorý téma vkladá ako .ct-toggle-dropdown-desktop – sprav inline */
nav[aria-label="PLUGIN-HORIZONTAL-AUTO-MENU"] .mscm-label-text .ct-toggle-dropdown-desktop{
  display:inline-flex !important;
  position:static !important;
  align-items:center;
  margin-left:8px !important;
  float:none !important;
  clear:none !important;
  line-height:1;
  width:auto !important;
  height:auto !important;
  vertical-align:middle;
}
/* nech SVG nezväčšuje riadok */
nav[aria-label="PLUGIN-HORIZONTAL-AUTO-MENU"] .ct-toggle-dropdown-desktop .ct-icon{
  display:block;
}

/* pre istotu – aj samotný <a> drž ako jeden riadok (ikona + text + caret) */
nav[aria-label="PLUGIN-HORIZONTAL-AUTO-MENU"] .menu > li > a,
nav[aria-label="PLUGIN-HORIZONTAL-AUTO-MENU"] .sub-menu li > a{
  display:inline-flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
}


/* Hover efekt ako v shortcodoch: obrázok mierne priblížiť, text jemne posunúť */
nav[aria-label="PLUGIN-HORIZONTAL-AUTO-MENU"] .menu > li > a:hover .mscm-thumb-img,
nav[aria-label="PLUGIN-HORIZONTAL-AUTO-MENU"] .sub-menu li > a:hover .mscm-thumb-img {
  transform: scale(1.08);
}
nav[aria-label="PLUGIN-HORIZONTAL-AUTO-MENU"] .menu > li > a:hover .mscm-label-text,
nav[aria-label="PLUGIN-HORIZONTAL-AUTO-MENU"] .sub-menu li > a:hover .mscm-label-text {
  transform: translateX(3px);
  opacity: .96;
}

/* Submenu vždy biele */
nav[aria-label="PLUGIN-HORIZONTAL-AUTO-MENU"] .sub-menu {
  background: #fff !important;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 1px 0 rgba(0,0,0,.04) inset;
}