.cs-hero {
    min-height: 600px;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, #3f82ff 0%, #2f6df6 100%);
}

.cs-hero-title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(36px, 4.5vw, 72px);
    line-height: 1.1;
    margin-bottom: 20px;
}

.cs-hero-subtitle {
    color: rgba(255,255,255,.85);
    font-size: 18px;
    margin-bottom: 40px;
}

.cs-search-card {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    max-width: 980px;
    margin: 0 auto;
    box-shadow: 0 20px 40px rgba(0,0,0,.2);
}

.cs-input-wrap {
    position: relative;
}

.cs-input-wrap i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 18px;
}

.cs-input {
    height: 56px;
    border-radius: 14px;
    padding-left: 46px;
    background: #f5f7fb;
    border: 0;
}

.cs-input:focus {
    box-shadow: 0 0 0 .25rem rgba(255,122,0,.15);
}

.cs-search-btn {
    height: 56px;
    border-radius: 14px;
    background: #ff7a00;
    border: 0;
    color: #fff;
    font-weight: 700;
}

.cs-search-btn:hover {
    background: #ff6a00;
}

.cs-popular {
    margin-top: 16px;
    font-size: 14px;
    color: #6b7280;
}

.cs-popular a {
    margin-left: 14px;
    color: #111827;
    font-weight: 600;
    text-decoration: none;
}

.cs-popular a:hover {
    text-decoration: underline;
}

.cs-cat-title {
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 6px;
}

.cs-cat-subtitle {
    color: #6b7280;
    font-size: 16px;
}

.cs-cat-card {
    display: block;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    padding: 28px 16px;
    text-decoration: none;
    border: 1px solid #eef0f4;
    transition: all .25s ease;
    height: 100%;
}

.cs-cat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

.cs-cat-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: #f2f5fa;
}

.cs-cat-name {
    font-weight: 600;
    font-size: 15px;
    color: #111827;
}

.cs-cat-count {
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
}

/* icon colors */
.blue i { color:#2563eb; }
.red i { color:#ef4444; }
.green i { color:#22c55e; }
.purple i { color:#8b5cf6; }
.pink i { color:#ec4899; }
.orange i { color:#f97316; }
.gray i { color:#6b7280; }
.indigo i { color:#6366f1; }
.teal i { color:#14b8a6; }
.dark i { color:#374151; }


/* Right block spacing */
.cs_header_actions{
  gap: 14px;               /* общий воздух между блоками */
}

/* Icons grouped with their own gap */
.cs_header_icons{
  display:flex;
  align-items:center;
  gap: 10px;               /* расстояние между иконками */
}

/* Category button */
.cs_btn_cat{
  background:#f2f6ff;
  color:#2563eb;
  border:1px solid #dbe7ff;
  font-weight:700;
  padding:10px 14px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.cs_btn_cat:hover{
  background:#eaf2ff;
  color:#1f55cf;
}

/* Icon button (чуть компактнее) */
.cs_icon_btn{
  width:38px;
  height:38px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#5b6776;
  text-decoration:none;
}
.cs_icon_btn:hover{
  background:#f5f7fb;
  color:#1d2b3a;
}

/* Add button (как было) */
.cs_btn_add{
  background:#ff7a00;
  color:#fff;
  font-weight:700;
  padding:10px 16px;
  border-radius:12px;
  box-shadow:0 8px 18px rgba(255,122,0,.25);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.cs_btn_add:hover{ background:#ff6a00; color:#fff; }

.cs_btn_plus{
  width:26px; height:26px;
  border-radius:8px;
  background:rgba(255,255,255,.2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
}

/* Flag spacing */
.cs_header_lang{
  display:flex;
  align-items:center;
  padding-left: 6px;        /* чтобы флаг не лип к кнопке */
}
.cs_lang img{
  height:18px;
  width:auto;
  display:block;
  opacity:.9;
}
.cs_lang:hover img{ opacity:1; }

.cs_logo img {
	height: 60px;
}


.cs_allcat_v3{
  background:#f8fafc; /* светлый фон как у примера */
}

.cs_allcat_head{
  padding-bottom: 18px;
}

.cs_allcat_title{
  font-weight: 800;
  font-size: 40px;
  margin: 0 0 6px;
  color:#0f172a;
}

.cs_allcat_subtitle{
  margin:0;
  font-size:16px;
  color:#64748b;
}

/* card */
.cs_catbox{
  background:#fff;
  border:1px solid #e7edf5;
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
  height:100%;
}

.cs_catbox_head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 18px;
  border-bottom:1px solid #eef2f7;
  background:#fbfdff;
}

.cs_catbox_icon{
  width:44px;
  height:44px;
  border-radius:12px;
  background:#eaf2ff;
  color:#2563eb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex:0 0 auto;
}

.cs_catbox_title{
  margin:0;
  font-weight: 800;
  font-size:18px;
  color:#0f172a;
}

/* list items */
.cs_catbox_list{
  display:flex;
  flex-direction:column;
}

.cs_catbox_item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  text-decoration:none;
  border-bottom:1px solid #eef2f7;
  transition: background .15s ease, color .15s ease;
}

.cs_catbox_item:last-child{
  border-bottom:0;
}

.cs_catbox_item_text{
  color:#0f172a;
  font-weight:600;
  font-size:15px;
}

.cs_catbox_item_arrow{
  color:#94a3b8;
  font-size:18px;
  transition: transform .15s ease, color .15s ease;
}

.cs_catbox_item:hover{
  background:#f2f6ff;
}

.cs_catbox_item:hover .cs_catbox_item_text{
  color:#1f55cf;
}

.cs_catbox_item:hover .cs_catbox_item_arrow{
  color:#1f55cf;
  transform: translateX(2px);
}