@media screen and (max-width:1450px) {
    .container-fluid {
        min-width: 1024px;
    }
    .table_page td:first-child {
        width: auto;
    }
    .content_main {
        padding-left: 410px;
    }
    .item_nav__header {
        padding: 0 8px;
        font-size: 12px;
    }
    .home_link {
        margin-right: 10px;
    }
    .item_nav__header:hover, .item_nav__header.active, .item_nav__header:hover .link_menu__header, .item_nav__header.active .link_menu__header {
        font-size: 12px;
    }
    .link_menu__header {
        font-size: 12px;
    }
    .menu_right__header{
        margin-right: 15px;
        font-size: 12px;
    }
    .link_cart__header,.link_opov__header,.link_global__header,.link_exit__header{
        margin-right: 10px;
    }
    .info_block_right__balance{
        padding: 40px 55px;
    }
    
}
@media screen and (max-width:1169px) {
    .add_to_cart_-table{
        min-width: 95px;
        margin-left: 5px;
    }
    .content_main{
        padding-left: 5px;
    }
    .sitebar_left{
        width: 290px;
        display: none !important;

    }
    .title__sitebar{
        font-size: 14px;
    }
    .text_info__sitebar{
        font-size: 12px;
    }
    .yellow_text__sitebar{
        font-size: 12px;
    }
    .item_nav__header{
        line-height: normal;
        display: block;
        min-height: 72px;
        padding-top: 5px;
        text-align: center;
        
    }.menu_right__header{
        min-width: 75px;
    }
    .item_nav__header:hover, .item_nav__header.active{
        line-height: normal;
    }
}
/* ===== Mobile-first, accessible header & menu (CSS only) ===== */

/* Design tokens */
:root{
  --bg: #0f172a;            /* slate-900 */
  --bg-2:#111827;           /* gray-900 */
  --card:#111827;
  --text:#e5e7eb;           /* gray-200 */
  --muted:#9ca3af;          /* gray-400 */
  --brand:#22c55e;          /* green-500 */
  --line:#1f2937;           /* gray-800 */
  --ring:#2563eb;           /* blue-600 */
  --radius:14px;
  --gap:10px;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* Header layout */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(180deg,var(--bg),var(--bg-2));
  color:var(--text);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; gap:10px;
}

/* Brand */
.brand{
  display:flex; align-items:center; gap:10px; min-width:0;
}
.brand__logo{width:28px;height:28px;border-radius:8px;background:var(--brand)}
.brand__name{font-weight:700;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Actions (cart, profile, etc.) */
.actions{
  display:flex; align-items:center; gap:10px;
}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 6px;
  border-radius:999px; background:var(--brand); color:#001b0b; font-size:12px; font-weight:700;
}

/* Hamburger (checkbox hack) */
#menu-toggle{position:absolute; left:-9999px}
.hamburger{
  width:40px;height:40px;border-radius:10px; display:grid; place-items:center;
  background:#0b1222; border:1px solid var(--line); cursor:pointer;
}
.hamburger span, .hamburger::before, .hamburger::after{
  content:""; display:block; width:20px; height:2px; background:var(--text); border-radius:2px;
}
.hamburger::before{transform:translateY(-6px)}
.hamburger::after{transform:translateY(6px)}
/* Turn into X when open */
#menu-toggle:checked + label.hamburger::before{transform:translateY(0) rotate(45deg)}
#menu-toggle:checked + label.hamburger::after{transform:translateY(0) rotate(-45deg)}
#menu-toggle:checked + label.hamburger span{opacity:0}

/* Drawer nav */
.nav-drawer{
  position:fixed; inset:0 0 0 auto; /* right side drawer */
  width:min(92vw,420px); max-width:100%;
  translate:100% 0; transition:translate .3s ease;
  background:var(--card); color:var(--text);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column; height:100dvh;
}
#menu-toggle:checked ~ .nav-drawer{translate:0 0}
.nav-header{
  padding:14px 14px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.nav-body{
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding:8px;
  display:flex; flex-direction:column; gap:8px;
}

/* Top-level items */
.menu{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.menu > li{
  background:#0c1426; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.menu__link{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:14px; font-weight:600;
}
.menu__subtitle{color:var(--muted); font-weight:500}

/* Accordion submenus using <details> (recommended markup):
   <li><details><summary>Title</summary><ul class="submenu">…</ul></details></li>
*/
.menu details{background:#0c1426}
.menu summary{
  list-style:none; cursor:pointer; padding:14px; font-weight:700;
  display:flex; align-items:center; justify-content:space-between;
}
.menu summary::-webkit-details-marker{display:none}
.menu details[open] summary{background:#0e1a31}
.menu details summary::after{
  content:"▾"; font-size:14px; color:var(--muted); transition:transform .2s ease;
}
.menu details[open] summary::after{transform:rotate(180deg)}

/* Submenu list */
.submenu{
  list-style:none; margin:0; padding:6px;
  display:grid; gap:6px;
  grid-template-columns:1fr;            /* 1 column on mobile */
  max-height:60vh; overflow:auto;
}
.submenu a{
  display:block; padding:12px; border-radius:10px; background:#0b1222;
  border:1px solid var(--line);
  font-weight:600; color:var(--text);
}
.submenu a:active{scale:.98}

/* Utility chips (e.g., “NON VBV BINS”) */
.chip{
  display:inline-block; font-size:12px; font-weight:700;
  padding:6px 10px; background:#0b1222; border:1px solid var(--line);
  border-radius:999px; color:var(--text);
}

/* Right-side quick menu (Profile/Balance) usable as its own dropdown */
.quick-menu{position:relative}
.quick-toggle{display:flex; align-items:center; gap:6px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#0b1222}
.quick-panel{
  position:absolute; right:0; top:calc(100% + 8px); min-width:240px;
  background:#0b1222; border:1px solid var(--line); border-radius:12px; padding:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:none;
}
.quick-menu:focus-within .quick-panel,
.quick-menu:hover .quick-panel{display:block}
.quick-panel a{display:block; padding:10px 12px; border-radius:10px}
.quick-panel a:hover{background:#0e1a31}

/* Balance pill */
.balance{
  padding:6px 10px; border:1px dashed var(--line); border-radius:10px; color:var(--muted);
}

/* Footer area inside drawer (e.g., language, support) */
.nav-footer{
  margin-top:auto; padding:10px; border-top:1px solid var(--line);
  display:flex; gap:8px; flex-wrap:wrap;
}

/* ===== Larger screens ===== */
@media (min-width: 992px){
  .header-inner{padding:12px 18px}
  .hamburger{display:none}
  /* Desktop: show a horizontal bar instead of drawer */
  .nav-drawer{
    position:static; translate:0 0; height:auto; width:auto; border-left:0;
    background:transparent; color:inherit;
  }
  .nav-header{display:none}
  .nav-body{
    padding:0; overflow:visible; flex-direction:row; align-items:center; gap:12px;
  }
  .menu{flex-direction:row; align-items:stretch; gap:10px}
  .menu > li{background:transparent; border:0}
  .menu details{position:relative}
  .menu summary{padding:10px 12px; border-radius:10px}
  .menu details[open] summary{background:#0e1a31}
  .submenu{
    position:absolute; left:0; top:calc(100% + 8px);
    grid-template-columns:repeat(2,minmax(220px,1fr)); /* 2 cols on desktop */
    background:#0b1222; border:1px solid var(--line); border-radius:12px; padding:8px;
    max-height:60vh; min-width:min(80vw,560px);
    box-shadow:0 12px 36px rgba(0,0,0,.45);
  }
}

/* ===== Accessibility focus styles ===== */
a:focus-visible, button:focus-visible, summary:focus-visible, .quick-toggle:focus-visible{
  outline:3px solid var(--ring); outline-offset:2px; border-radius:10px;
}