/* =========================================================
   industrio.online – TECH LIGHT UI (custom.css)
   Drupal 11 + Bootstrap Barrio (Bootstrap 5) + Commerce + Facets + Paragraphs
   GOALS:
   - Light background, technical typography, squared corners
   - NO SHADOWS anywhere
   - Header: clean links (NO borders), active = red underline only
   - Cart: same style as menu (NO border box)
   - Footer: clean grid, controlled wrapping (no ugly breaks)
   - Layout: wider than default (container widened)
   - Tables: classic bootstrap-like look via tokens
   - Admin (Claro) untouched
========================================================= */
/* =========================================================
   0) FRONTEND SCOPE + TOKENS
========================================================= */
body:not(.path-admin):not(.claro){
  --td-accent: #FF8C00;
  --td-accent-2: #ff3b3b;
  --td-accent-soft: rgba(255,0,0,0.08);
  --td-focus: 0 0 0 3px rgba(255,0,0,0.22);
  --td-gray-950: #0b0c0f;
  --td-gray-900: #111318;
  --td-gray-850: #161922;
  --td-bg: #ffffff;
  --td-surface: #ffffff;
  --td-surface-2: #f6f7f9;
  --td-text: rgba(15,17,21,0.86);
  --td-text-strong: rgba(15,17,21,0.92);
  --td-text-muted: rgba(15,17,21,0.64);
  --td-text-inv: rgba(255,255,255,0.86);
  --td-text-inv-strong: #ffffff;
  --td-text-inv-muted: rgba(255,255,255,0.62);
  --td-border: rgba(15,17,21,0.12);
  --td-border-soft: rgba(15,17,21,0.08);
  --td-border-inv: rgba(255,255,255,0.12);
  --td-radius: 6px;
  --td-radius-sm: 4px;
  --td-radius-xs: 3px;
  --td-font-sans: system-ui, -apple-system, "Open Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --td-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --td-font-size: 16px;
  --td-line-height: 1.65;
  --td-h1: 38px;
  --td-h2: 28px;
  --td-h3: 21px;
  --td-h4: 17px;
  --td-heading-weight: 900;
  --td-heading-letterspace: 0.25px;
  /* WIDE LAYOUT */
  --td-container-max: 1680px;
  --td-page-pad-x: 18px;
  --td-btn-height: 44px;
  --td-btn-radius: 6px;
  --td-topbar-bg: var(--td-gray-850);
  --td-mainbar-bg: var(--td-gray-900);
  --td-header-border: var(--td-border-inv);
  /* ---------------------------------------------------------
     TABLE TOKENS (meniš len tu)
  --------------------------------------------------------- */
  --td-table-font-family: var(--td-font-sans);
  --td-table-font-size: 15px;
  --td-table-line-height: 1.45;
  --td-table-bg: #ffffff;
  --td-table-header-bg: #f8f9fa;
  --td-table-zebra-bg: #fbfbfc;
  --td-table-hover-bg: #f3f4f6;
  --td-table-border: #dee2e6;
  --td-table-header-border: #dee2e6;
  --td-table-text: rgba(33,37,41,0.95);
  --td-table-header-text: rgba(33,37,41,0.98);
  --td-table-cell-pad-y: 0.6rem;
  --td-table-cell-pad-x: 0.75rem;
  --td-table-radius: 0px;
  --td-table-border-width: 1px;
  /* ---------------------------------------------------------
     FOOTER TOKENS (kontrola zalamovania)
  --------------------------------------------------------- */
  --td-footer-cols: 4;
  --td-footer-gap-x: 34px;
  --td-footer-gap-y: 18px;
  --td-footer-pad-top: 30px;
  --td-footer-pad-bottom: 18px;
  --td-footer-heading-size: 15px;
  --td-footer-text-size: 14px;
  --td-footer-line: rgba(255,255,255,0.12);
  /* ---------------------------------------------------------
     SIDEBAR TOKENS (kategoriálne menu)
  --------------------------------------------------------- */
  --td-sidebar-heading-size: 15px;
  --td-sidebar-link-size: 14px;
  --td-sidebar-sublink-size: 13.5px;
  --td-sidebar-link-pad-y: 8px;
  --td-sidebar-link-pad-x: 10px;
  --td-sidebar-indent: 14px;
  /* Bootstrap variables (frontend only) */
  --bs-body-font-family: var(--td-font-sans);
  --bs-body-font-size: var(--td-font-size);
  --bs-body-line-height: var(--td-line-height);
  --bs-body-color: var(--td-text);
  --bs-body-bg: var(--td-bg);
  --bs-primary: var(--td-accent);
  --bs-link-color: rgba(15,17,21,0.92);
  --bs-link-hover-color: var(--td-accent);
  --bs-border-color: var(--td-border);
  --bs-border-radius: var(--td-radius);
}
/* =========================================================
   1) GLOBAL BASE (frontend)
========================================================= */
body:not(.path-admin):not(.claro){
  font-family: var(--td-font-sans);
  background: var(--td-bg);
  color: var(--td-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* NO SHADOWS anywhere */
body:not(.path-admin):not(.claro) *,
body:not(.path-admin):not(.claro) *::before,
body:not(.path-admin):not(.claro) *::after{
  box-shadow: none !important;
  text-shadow: none !important;
}
/* focus */
body:not(.path-admin):not(.claro) :focus-visible{
  outline: none;
  box-shadow: var(--td-focus);
  border-radius: var(--td-radius-xs);
}
/* =========================================================
   1b) WIDE LAYOUT
========================================================= */
body:not(.path-admin):not(.claro) .container,
body:not(.path-admin):not(.claro) .container-sm,
body:not(.path-admin):not(.claro) .container-md,
body:not(.path-admin):not(.claro) .container-lg,
body:not(.path-admin):not(.claro) .container-xl,
body:not(.path-admin):not(.claro) .container-xxl{
  max-width: var(--td-container-max) !important;
  padding-left: var(--td-page-pad-x) !important;
  padding-right: var(--td-page-pad-x) !important;
}
body:not(.path-admin):not(.claro) .container-fluid{
  padding-left: var(--td-page-pad-x) !important;
  padding-right: var(--td-page-pad-x) !important;
}
/* =========================================================
   1c) TYPOGRAPHY
========================================================= */
body:not(.path-admin):not(.claro) h1,
body:not(.path-admin):not(.claro) h2,
body:not(.path-admin):not(.claro) h3,
body:not(.path-admin):not(.claro) h4,
body:not(.path-admin):not(.claro) h5,
body:not(.path-admin):not(.claro) h6{
  font-family: var(--td-font-mono);
  font-weight: var(--td-heading-weight);
  letter-spacing: var(--td-heading-letterspace);
  color: var(--td-text-strong);
}
body:not(.path-admin):not(.claro) h1{ font-size: var(--td-h1); line-height: 1.15; }
body:not(.path-admin):not(.claro) h2{ font-size: var(--td-h2); line-height: 1.2; }
body:not(.path-admin):not(.claro) h3{ font-size: var(--td-h3); line-height: 1.25; }
body:not(.path-admin):not(.claro) h4{ font-size: var(--td-h4); line-height: 1.3; }
body:not(.path-admin):not(.claro) a{
  color: rgba(15,17,21,0.92);
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
body:not(.path-admin):not(.claro) a:hover{
  color: var(--td-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--td-accent);
}
/* code blocks (keep tech) */
body:not(.path-admin):not(.claro) code,
body:not(.path-admin):not(.claro) pre,
body:not(.path-admin):not(.claro) kbd{
  font-family: var(--td-font-mono);
}
body:not(.path-admin):not(.claro) pre{
  background: var(--td-surface-2);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius);
  padding: 14px;
  overflow: auto;
}
body:not(.path-admin):not(.claro) code{
  background: rgba(255,0,0,0.06);
  border: 1px solid rgba(255,0,0,0.14);
  border-radius: var(--td-radius-xs);
  padding: 0 .35em;
}
/* =========================================================
   2) FORMS + BUTTONS
========================================================= */
body:not(.path-admin):not(.claro) .btn{
  min-height: var(--td-btn-height);
  border-radius: var(--td-btn-radius);
  font-weight: 900;
  letter-spacing: 0.2px;
  font-family: var(--td-font-mono);
}
body:not(.path-admin):not(.claro) .btn-primary{
  background: var(--td-accent);
  border-color: var(--td-accent);
}
body:not(.path-admin):not(.claro) .btn-primary:hover{
  background: var(--td-accent-2);
  border-color: var(--td-accent-2);
}
body:not(.path-admin):not(.claro) .btn-outline-primary{
  color: var(--td-accent);
  border-color: var(--td-accent);
}
body:not(.path-admin):not(.claro) .btn-outline-primary:hover{
  background: var(--td-accent-soft);
  color: var(--td-accent);
}
body:not(.path-admin):not(.claro) .form-control,
body:not(.path-admin):not(.claro) .form-select,
body:not(.path-admin):not(.claro) input,
body:not(.path-admin):not(.claro) textarea{
  border-radius: var(--td-radius);
  border-color: var(--td-border);
}
body:not(.path-admin):not(.claro) .form-control:focus,
body:not(.path-admin):not(.claro) .form-select:focus,
body:not(.path-admin):not(.claro) input:focus,
body:not(.path-admin):not(.claro) textarea:focus{
  border-color: rgba(255,0,0,0.45);
  box-shadow: var(--td-focus);
}
/* =========================================================
   3) HEADER – CLEAN (NO LINK BORDERS)
========================================================= */
body:not(.path-admin):not(.claro) #header,
body:not(.path-admin):not(.claro) #header *{
  font-family: var(--td-font-mono);
}
/* TOP BAR */
body:not(.path-admin):not(.claro) #navbar-top.navbar{
  background: var(--td-topbar-bg);
  border-bottom: 1px solid var(--td-header-border);
  padding: 8px 0;
}
body:not(.path-admin):not(.claro) #navbar-top .region-secondary-menu{ width: 100%; margin: 0; }
body:not(.path-admin):not(.claro) #navbar-top .field__item p{
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 10px;
  line-height: 1.25;
  font-size: 13px;
  color: var(--td-text-inv-muted);
}
body:not(.path-admin):not(.claro) #navbar-top .field__item p a{
  color: rgba(255,255,255,0.88);
  font-weight: 900;
  letter-spacing: 0.25px;
  text-decoration: none;
  padding: 2px 6px;
  border: 0 !important;
  background: transparent !important;
  border-radius: var(--td-radius-xs);
}
body:not(.path-admin):not(.claro) #navbar-top .field__item p a:hover{
  color: #fff;
  background: rgba(255,255,255,0.06) !important;
  text-decoration: none;
}
@media (max-width: 576px){
  body:not(.path-admin):not(.claro) #navbar-top .field__item p{
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 0 2px;
  }
  body:not(.path-admin):not(.claro) #navbar-top .field__item p a{ white-space: nowrap; }
}
/* MAIN BAR */
body:not(.path-admin):not(.claro) #navbar-main.navbar{
  background: var(--td-mainbar-bg);
  border-bottom: 1px solid var(--td-header-border);
  padding: 10px 0;
}
body:not(.path-admin):not(.claro) #navbar-main .navbar-brand img{ height: 38px; width: auto; }
body:not(.path-admin):not(.claro) #navbar-main .navbar-toggler{
  border: 1px solid var(--td-border-inv);
  border-radius: var(--td-radius-sm);
  padding: 8px 10px;
}
body:not(.path-admin):not(.claro) #navbar-main .navbar-toggler-icon{ filter: invert(1); opacity: 0.9; }
/* PRIMARY MENU - white text */
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .navbar-nav{
  align-items: center;
  gap: 16px;
}
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link{
  color: rgba(255,255,255,0.88) !important;
  font-weight: 900;
  letter-spacing: 0.28px;
  padding: 8px 2px;
  border: 0 !important;
  background: transparent !important;
  border-radius: var(--td-radius-xs);
  position: relative;
  text-decoration: none;
}
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link:hover{
  color: #fff !important;
  background: rgba(255,255,255,0.06) !important;
  text-decoration: none;
}
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link.is-active,
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link.active{
  color: #fff !important;
}
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link.is-active::after,
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link.active::after{
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 2px;
  background: var(--td-accent);
}
/* LANGUAGE SELECTOR - no border */
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-advancedlanguageselectorblock select{
  color: rgba(255,255,255,0.88);
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent;
  font-family: var(--td-font-mono);
}
body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-advancedlanguageselectorblock select:focus{
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
/* =========================================================
   3.3 CART – make it CLEAN like menu (NO border box)
========================================================= */
body:not(.path-admin):not(.claro) #block-circuitmaker-theme-cart{
  margin-left: 14px;
}
/* remove any box styling completely */
body:not(.path-admin):not(.claro) .cart--cart-block,
body:not(.path-admin):not(.claro) .cart-block--summary{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
/* style link like nav-link */
body:not(.path-admin):not(.claro) .cart-block--link__expand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border: 0 !important;
  background: transparent !important;
  border-radius: var(--td-radius-xs);
  text-decoration: none;
  color: rgba(255,255,255,0.88);
  font-family: var(--td-font-mono);
  font-weight: 900;
  letter-spacing: 0.28px;
}
body:not(.path-admin):not(.claro) .cart-block--link__expand:hover{
  color: #fff;
  background: rgba(255,255,255,0.06) !important;
  text-decoration: none;
}
/* count as plain text (no pill, no border) */
body:not(.path-admin):not(.claro) .cart-block--summary__count{
  font-size: 13px;
  font-weight: 900;
  color: rgba(255,255,255,0.88);
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
/* icon */
body:not(.path-admin):not(.claro) .cart-block--summary__icon img{
  width: 18px;
  height: 18px;
}
/* collapse */
@media (max-width: 1199.98px){
  body:not(.path-admin):not(.claro) #CollapsingNavbar.navbar-collapse{
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--td-radius-sm);
    background: rgba(255,255,255,0.03);
  }
  body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .navbar-nav{
    align-items: stretch;
    gap: 6px;
  }
  body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link{ padding: 10px 10px; }
  body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link.is-active::after,
  body:not(.path-admin):not(.claro) #block-bootstrap-barrio-subtheme-main-menu .nav-link.active::after{
    left: 10px;
    right: 10px;
    bottom: 6px;
  }
  body:not(.path-admin):not(.claro) #block-circuitmaker-theme-cart{
    margin-left: 0;
    margin-top: 8px;
  }
  body:not(.path-admin):not(.claro) .cart-block--link__expand{
    width: 100%;
    justify-content: flex-start;
    padding: 10px 10px;
  }
}
/* =========================================================
   4) TABLES – classic bootstrap-like
========================================================= */
body:not(.path-admin):not(.claro) table{
  width: 100%;
  border-collapse: collapse;
  background: var(--td-table-bg);
  color: var(--td-table-text);
  font-family: var(--td-table-font-family);
  font-size: var(--td-table-font-size);
  line-height: var(--td-table-line-height);
  border: var(--td-table-border-width) solid var(--td-table-border);
  border-radius: var(--td-table-radius);
}
body:not(.path-admin):not(.claro) table th,
body:not(.path-admin):not(.claro) table td{
  padding: var(--td-table-cell-pad-y) var(--td-table-cell-pad-x);
  border: var(--td-table-border-width) solid var(--td-table-border);
  vertical-align: top;
}
body:not(.path-admin):not(.claro) table thead th{
  background: var(--td-table-header-bg);
  color: var(--td-table-header-text);
  font-weight: 700;
  border-bottom: var(--td-table-border-width) solid var(--td-table-header-border);
}
body:not(.path-admin):not(.claro) table tbody tr:nth-child(even){
  background: var(--td-table-zebra-bg);
}
body:not(.path-admin):not(.claro) table tbody tr:hover{
  background: var(--td-table-hover-bg);
}
body:not(.path-admin):not(.claro) table code{
  font-family: var(--td-font-mono);
  font-size: 0.9em;
}
@media (max-width: 768px){
  body:not(.path-admin):not(.claro) table{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}
/* =========================================================
   5) FOOTER – fixed wrapping & clean columns
========================================================= */
body:not(.path-admin):not(.claro) footer.site-footer{
  background: var(--td-gray-900);
  color: var(--td-text-inv);
  border-top: 1px solid var(--td-footer-line);
  padding-top: var(--td-footer-pad-top);
  padding-bottom: var(--td-footer-pad-bottom);
}
/* remove footer frames */
body:not(.path-admin):not(.claro) footer.site-footer .block,
body:not(.path-admin):not(.claro) footer.site-footer .content,
body:not(.path-admin):not(.claro) footer.site-footer .field,
body:not(.path-admin):not(.claro) footer.site-footer .field__item{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* normalize footer region wrappers */
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__top > section.row.region{
  margin: 0 !important;
  padding: 0 !important;
  width: auto;
}
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__top .row{
  margin: 0 !important;
}
/* grid */
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__top{
  display: grid;
  grid-template-columns: repeat(var(--td-footer-cols), minmax(0, 1fr));
  column-gap: var(--td-footer-gap-x);
  row-gap: var(--td-footer-gap-y);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--td-footer-line);
}
/* headings: controlled to max 2 lines, no ugly breaks */
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__top h2{
  font-family: var(--td-font-mono);
  font-size: var(--td-footer-heading-size);
  font-weight: 900;
  letter-spacing: 0.25px;
  color: #fff;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--td-footer-line);
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* footer text + lists */
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__top .content,
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__top .field__item{
  font-size: var(--td-footer-text-size);
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
}
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__top ul{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__top li{
  margin: 8px 0;
}
/* links: keep neat, avoid weird wrapping */
body:not(.path-admin):not(.claro) footer.site-footer a{
  color: rgba(255,255,255,0.88);
  font-family: var(--td-font-mono);
  font-weight: 800;
  text-decoration: none;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
body:not(.path-admin):not(.claro) footer.site-footer a:hover{
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--td-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
/* bottom */
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__bottom{
  padding-top: 14px;
}
body:not(.path-admin):not(.claro) footer.site-footer .site-footer__bottom p{
  margin: 0;
  color: var(--td-text-inv-muted);
  font-size: 13px;
  font-family: var(--td-font-mono);
}
/* responsive footer */
@media (max-width: 992px){
  body:not(.path-admin):not(.claro){
    --td-footer-cols: 2;
    --td-footer-gap-x: 20px;
  }
}
@media (max-width: 576px){
  body:not(.path-admin):not(.claro){
    --td-footer-cols: 1;
    --td-h1: 30px;
    --td-h2: 24px;
  }
}
/* =========================================================
   6) SIDEBAR – CATEGORY MENU (left column, #sidebar_first)
   - vertical stacking (override Bootstrap .nav row flex)
   - mono font, squared corners, no shadows (inherited)
   - subtle dividers, light surfaces on hover
   - active = red/accent underline (matches header pattern)
========================================================= */
/* aside spacing */
body:not(.path-admin):not(.claro) #sidebar_first aside.section{
  padding-top: 8px;
}
/* block heading "Katalóg" */
body:not(.path-admin):not(.claro) #sidebar_first nav.block > h2,
body:not(.path-admin):not(.claro) #sidebar_first .block-menu > h2{
  font-family: var(--td-font-mono);
  font-size: var(--td-sidebar-heading-size);
  font-weight: 900;
  letter-spacing: 0.25px;
  color: var(--td-text-strong);
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--td-border);
  text-transform: uppercase;
}
/* TOP-LEVEL UL – force vertical, kill bootstrap .nav row flex */
body:not(.path-admin):not(.claro) #sidebar_first .nav{
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}
/* every list item full width */
body:not(.path-admin):not(.claro) #sidebar_first .nav-item,
body:not(.path-admin):not(.claro) #sidebar_first ul.menu > li{
  width: 100%;
  display: block;
}
/* dividers between top-level items (subtle technical look) */
body:not(.path-admin):not(.claro) #sidebar_first nav.block > ul.nav > li.nav-item{
  border-bottom: 1px solid var(--td-border-soft);
}
body:not(.path-admin):not(.claro) #sidebar_first nav.block > ul.nav > li.nav-item:last-child{
  border-bottom: 0;
}
/* nested UL – sub-categories */
body:not(.path-admin):not(.claro) #sidebar_first ul.menu{
  list-style: none;
  padding-left: var(--td-sidebar-indent);
  margin: 4px 0 8px;
  border-left: 1px solid var(--td-border-soft);
}
/* TOP-LEVEL link styling */
body:not(.path-admin):not(.claro) #sidebar_first .nav-link{
  display: block;
  width: 100%;
  padding: var(--td-sidebar-link-pad-y) var(--td-sidebar-link-pad-x);
  color: var(--td-text-strong);
  font-family: var(--td-font-mono);
  font-weight: 800;
  letter-spacing: 0.2px;
  font-size: var(--td-sidebar-link-size);
  border: 0 !important;
  background: transparent !important;
  border-radius: var(--td-radius-xs);
  text-decoration: none;
  position: relative;
  transition: color .15s ease, background-color .15s ease;
}
body:not(.path-admin):not(.claro) #sidebar_first .nav-link:hover{
  color: var(--td-accent);
  background: var(--td-surface-2) !important;
  text-decoration: none;
}
/* SUB-LEVEL links — slightly lighter weight + smaller, to differentiate */
body:not(.path-admin):not(.claro) #sidebar_first ul.menu a{
  display: block;
  width: 100%;
  padding: 6px var(--td-sidebar-link-pad-x);
  color: var(--td-text);
  font-family: var(--td-font-mono);
  font-weight: 600;
  letter-spacing: 0.15px;
  font-size: var(--td-sidebar-sublink-size);
  border: 0 !important;
  background: transparent !important;
  border-radius: var(--td-radius-xs);
  text-decoration: none;
  position: relative;
  transition: color .15s ease, background-color .15s ease;
}
body:not(.path-admin):not(.claro) #sidebar_first ul.menu a:hover{
  color: var(--td-accent);
  background: var(--td-surface-2) !important;
  text-decoration: none;
}
/* active-trail (parent of currently viewed leaf) — bold, no underline */
body:not(.path-admin):not(.claro) #sidebar_first .menu-item--active-trail > .nav-link,
body:not(.path-admin):not(.claro) #sidebar_first .menu-item--active-trail > a{
  color: var(--td-text-strong);
  font-weight: 900;
}
/* ACTIVE item — accent underline (same pattern as header primary menu) */
body:not(.path-admin):not(.claro) #sidebar_first .nav-link.is-active,
body:not(.path-admin):not(.claro) #sidebar_first .nav-link.active,
body:not(.path-admin):not(.claro) #sidebar_first ul.menu a.is-active{
  color: var(--td-text-strong);
  font-weight: 900;
}
body:not(.path-admin):not(.claro) #sidebar_first .nav-link.is-active::after,
body:not(.path-admin):not(.claro) #sidebar_first .nav-link.active::after,
body:not(.path-admin):not(.claro) #sidebar_first ul.menu a.is-active::after{
  content: "";
  position: absolute;
  left: var(--td-sidebar-link-pad-x);
  right: var(--td-sidebar-link-pad-x);
  bottom: 4px;
  height: 2px;
  background: var(--td-accent);
}
/* COLLAPSED BY DEFAULT — only top-level visible.
   Sub-categories sa rozbalia:
   - automaticky pri rodičovi na aktívnej vetve (.menu-item--active-trail)
   - alebo keď JS pridá .is-open (po kliknutí na šípku)
   --------------------------------------------------------- */
body:not(.path-admin):not(.claro) #sidebar_first ul.menu{
  display: none;
}
body:not(.path-admin):not(.claro) #sidebar_first .menu-item--active-trail > ul.menu,
body:not(.path-admin):not(.claro) #sidebar_first li.is-open > ul.menu{
  display: block;
}
/* parent <li> with children — relative position so toggle button can absolute-position */
body:not(.path-admin):not(.claro) #sidebar_first li.has-children{
  position: relative;
}
/* leave space on the right of parent link for the toggle button */
body:not(.path-admin):not(.claro) #sidebar_first li.has-children > .nav-link,
body:not(.path-admin):not(.claro) #sidebar_first li.has-children > a{
  padding-right: 36px;
}
/* the toggle button injected by JS — sits on the right edge of parent link */
body:not(.path-admin):not(.claro) #sidebar_first .td-toggle{
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--td-text-muted);
  cursor: pointer;
  user-select: none;
  border: 0;
  background: transparent;
  border-radius: var(--td-radius-xs);
  transition: transform .2s ease, color .15s ease, background-color .15s ease;
  z-index: 1;
}
body:not(.path-admin):not(.claro) #sidebar_first .td-toggle:hover{
  color: var(--td-accent);
  background: var(--td-surface-2);
}
/* rotated state when expanded */
body:not(.path-admin):not(.claro) #sidebar_first li.is-open > .td-toggle,
body:not(.path-admin):not(.claro) #sidebar_first li.menu-item--active-trail > .td-toggle{
  transform: rotate(90deg);
  color: var(--td-accent);
}
/* responsive: on tablets/phones the sidebar comes above content (Barrio order-first) — give it bottom separator */
@media (max-width: 768px){
  body:not(.path-admin):not(.claro) #sidebar_first{
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--td-border);
  }
}