/* Header specific styles */
    :root{
      --bg:#f6f7fb;
      --bg-2:#ffffff;
      --txt:#101828;
      --muted:#6b7280;
      --brand:#2e6bff;
      --brand-2:#002381;
      --card:#ffffff;
      --stroke:#e5e7eb;
      --chip:#eef2ff;
      --success:#16a34a;
      --shadow:0 6px 20px rgba(16,24,40,.06);
      --radius:18px;
      --radius-lg:22px;
      --container:1200px;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{
      margin:0;
      background:var(--bg);
      color:var(--txt);
      font:14px/1.45 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      display:flex;
      flex-direction:column;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block;height:auto}

    .container{max-width:var(--container);margin-inline:auto;padding:0 16px}

    /* Header */
    .topbar{background:var(--bg-2);position:sticky;top:0;z-index:1000;box-shadow:var(--shadow)}
    .topbar-row{display:flex;align-items:center;gap:12px;padding:10px 0}
    .logo{display:flex;align-items:center;gap:8px;white-space:nowrap}
    .logo img{width:140px;height:auto}
    .logo small{display:none}
    .logo .brand{font-weight:700;color:var(--brand-2);font-size:20px;letter-spacing:.2px}

    .search-row{padding-bottom:10px}
    .search{position:relative;width:100%}
    .search input{width:100%;height:40px;border-radius:10px;border:1px solid var(--stroke);padding:0 44px 0 44px;background:#fff;font-size:14px}
    .search .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.7;width:18px;height:18px}

    .chip{display:inline-flex;align-items:center;gap:6px;background:var(--chip);color:#1e40af;border-radius:999px;border:1px solid #e0e7ff;padding:6px 10px;font-weight:500;white-space:nowrap;font-size:13px}
    .btn{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 12px;border:1px solid var(--stroke);background:#fff;cursor:pointer;font-size:13px;white-space:nowrap}
    .btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}

    /* Utility icons (inline SVG) */
    .icon-16{width:16px;height:16px}
    .icon-20{width:20px;height:20px}

    /* Mobile helpers */
    .only-desktop{display:block}
    .only-mobile{display:none}

    /* Desktop styles */
    @media (min-width: 769px) {
      .only-mobile { display: none !important; }
      .topbar-row { gap: 14px; padding: 12px 0; }
      .logo img { width: 180px; }
      .logo small { 
        display: block; 
        color: #6b7280; 
        font-size: 11px; 
        margin-top: -2px; 
      }
      .search { 
        flex: 1; 
        max-width: 500px; 
        margin: 0 20px;
      }
      .chip, .btn { font-size: 14px; padding: 8px 14px; }
    }

    /* Mobile styles */
    @media (max-width: 768px) {
      .only-mobile { display: block; }
      .only-desktop { display: none; }
      .logo img { width: 140px; }
      .topbar-row { 
        gap: 8px; 
        padding: 10px 0;
        align-items: flex-start;
      }
      .btn { 
        font-size: 13px; 
        padding: 6px 12px;
        margin-top: 2px;
      }
      
      /* Стили для описания под логотипом в мобильной версии */
      .logo small.only-mobile {
        display: block;
        color: #6b7280;
        font-size: 11px;
        line-height: 1.2;
        margin-top: 2px;
      }
      
      .login-btn {
        margin-left: auto;
      }
    }
    
    /* Accessibility improvements */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    
    /* Focus styles for accessibility */
    a:focus, button:focus, input:focus {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }
    
    /* Main content area */
    main {
      flex: 1 0 auto;
    }

    /* Category Bar */
    .catbar-container {
      background: var(--bg-2);
      border-bottom: 1px solid var(--stroke);
      padding: 16px 0;
    }
    .catbar-container2 {
      /*background: var(--bg-2);
      border-bottom: 1px solid var(--stroke);*/
      padding: 16px 0;
    }
    /* Десктоп версия - кнопки */
    .catbar-desktop {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .pill-btn {
      border-radius: 12px;
      background: #fff;
      padding: 10px 14px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow);
    }

    .pill-btn:hover {
      background: var(--chip);
      border-color: var(--brand);
      transform: translateY(-1px);
      box-shadow: var(--shadow);
    }

    /* Мобильная версия - иконки с подписью */
    .catbar-mobile {
      padding: 12px 0;
    }

    .categories-scroll {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 8px 0 12px;
    }

    .categories-scroll::-webkit-scrollbar {
      display: none;
    }

    .cat-mobile {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      flex: none;
      text-decoration: none;
      color: var(--txt);
      transition: transform 0.15s ease;
      width: 70px;
      min-height: 80px;
    }

    .cat-mobile:hover {
      transform: translateY(-2px);
    }

    .cat-mobile img {
      width: 70px;
      height: 70px;
      object-fit: contain;
      margin-bottom: 8px;
      flex-shrink: 0;
      border-radius: 10px;
    }

    .cat-text {
      font-size: 11px;
      font-weight: 500;
      text-align: center;
      line-height: 1.2;
      color: var(--txt);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 26px;
      max-height: 26px;
    }

    /* Адаптивность */
    @media (max-width: 768px) {
      .catbar-desktop {
        display: none;
      }
      .catbar-mobile {
        display: block;
      }
    }

    @media (min-width: 769px) {
      .catbar-desktop {
        display: flex;
      }
      .catbar-mobile {
        display: none;
      }
    }