/* =========================================================
   Skin: SEVER (по мотивам drevsever.ru)
   Палитра: белый + зелёный (сочный) + светло-зелёный + красные акценты
   Активируется: body.skin-sever
   ========================================================= */

body.skin-sever{
  --bg: #F2F4F3;          /* фон */
  --card: #FFFFFF;        /* карточки */
  --text: #1F2937;        /* основной текст */
  --muted: #6B7280;       /* вторичный текст */
  --border: rgba(31,41,55,.12);

  --green-900: #23411E;   /* тёмный зелёный */
  --green-800: #2F4B25;
  --green-700: #3A5F2D;
  --green-600: #4F7A34;
  --green-500: #5E8E34;
  --green-400: #94B352;   /* “фирменный” зелёный (со скрина) */
  --green-300: #A3C45E;   /* светлее */
  --green-200: #D0E2A8;

  --accent: #94B352;      /* основной акцент */
  --accent-2: #A3C45E;    /* вторичный */
  --danger: #E53935;      /* красный */
  --danger-2: #C62828;
  --gold: #D7A100;        /* золотой (точечные акценты) */
}

/* базовый фон/текст */
body.skin-sever{
  background: var(--bg);
  color: var(--text);
}

/* ссылки */
body.skin-sever a{
  color: #2E6B2F;
}
body.skin-sever a:hover{
  color: #1F5A26;
}

/* ===== Header ===== */
body.skin-sever .header-main{
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
body.skin-sever .brand-name{ color: var(--green-900); }
body.skin-sever .brand-sub{ color: var(--muted); }

/* search */
body.skin-sever .header-search input{
  background: #fff;
  border: 1px solid rgba(31,41,55,.18);
  color: var(--text);
}
body.skin-sever .header-search button{
  background: var(--green-700);
  color: #fff;
  border: 1px solid rgba(0,0,0,.08);
}
body.skin-sever .header-search button:hover{
  background: var(--green-800);
}

/* header buttons */
body.skin-sever .hbtn{
  border-color: rgba(31,41,55,.18);
}
body.skin-sever .hbtn-ghost{
  background: #fff;
  color: var(--green-900);
}
body.skin-sever .hbtn-ghost:hover{
  background: rgba(148,179,82,.10);
  border-color: rgba(148,179,82,.35);
}

/* WhatsApp в шапке должен быть заметным (не белым)
   ВАЖНО: привязываем стиль к классу .hbtn-wa, а не к ссылке wa.me,
   чтобы другие каналы (например, МАКС) не наследовали зелёную заливку. */
body.skin-sever .header-buttons .hbtn-wa{
  background: #25D366;
  color: #fff !important;
  border-color: rgba(37,211,102,.55);
  box-shadow: 0 12px 30px rgba(37,211,102,.20);
}
body.skin-sever .header-buttons .hbtn-wa:hover{
  filter: brightness(1.03);
}

/* МАКС — фиолетовый градиент как в официальном меню MAX */
/* МАКС — как цвет вашего меню */
body.skin-sever .header-buttons .hbtn-max{
  background: linear-gradient(180deg, #23411e 0%, #1b3317 100%);
  color:#fff !important;
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(35,65,30,.18);
}
body.skin-sever .header-buttons .hbtn-max:hover{
  filter: brightness(1.04);
}
body.skin-sever .hbtn-primary{
  background: var(--green-700);
  border-color: rgba(0,0,0,.10);
  color: #fff;
}
body.skin-sever .hbtn-primary:hover{
  background: var(--green-800);
}

/* ===== Navigation ===== */
body.skin-sever .main-navigation{
  background: linear-gradient(180deg, var(--green-700), var(--green-900));
  border-bottom: 1px solid rgba(0,0,0,.10);
}
body.skin-sever .main-navigation .nav-list > li > a{
  color: #fff;
  opacity: .95;
}
body.skin-sever .main-navigation .nav-list > li > a:hover{
  opacity: 1;
}


/* Megamenu panel */
body.skin-sever .megamenu{
  background: #fff;
  border: 1px solid rgba(31,41,55,.12);
  box-shadow: 0 16px 40px rgba(17,24,39,.10);
}
body.skin-sever .megamenu a{
  color: var(--text);
}
body.skin-sever .megamenu a:hover{
  color: var(--green-700);
}

/* ===== Hero ===== */
body.skin-sever .hero{
  position: relative;
  background:
    url("/assets/img/hero-bg-sever.jpg") center/cover no-repeat;
}

/* затемняющий/смывающий оверлей под текст (слева спокойнее) */
body.skin-sever .hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(35,65,30,.75) 0%,
    rgba(35,65,30,.25) 55%,
    rgba(35,65,30,.10) 100%
  );
  pointer-events:none;
}

body.skin-sever .hero .container{
  position: relative;
  z-index: 1;
}

body.skin-sever .hero h1,
body.skin-sever .hero .hero-title{
  color:#fff;
}

body.skin-sever .hero p,
body.skin-sever .hero .hero-subtitle{
  color: rgba(255,255,255,.92);
}

/* ===== Cards / sections ===== */
body.skin-sever .card,
body.skin-sever .catalog-card,
body.skin-sever .product-card,
body.skin-sever .project-card{
  background: var(--card);
  border: 1px solid rgba(31,41,55,.12);
  box-shadow: 0 10px 28px rgba(17,24,39,.06);
}
body.skin-sever .section,
body.skin-sever section{
  background: transparent;
}

/* ===== Buttons (универсально) ===== */
body.skin-sever .btn,
body.skin-sever button,
body.skin-sever input[type="submit"]{
  border-radius: 12px;
}
body.skin-sever .btn-primary,
body.skin-sever .button-primary{
  background: var(--green-700);
  color: #fff;
  border: 1px solid rgba(0,0,0,.10);
}
body.skin-sever .btn-primary:hover,
body.skin-sever .button-primary:hover{
  background: var(--green-800);
}
body.skin-sever .btn-outline,
body.skin-sever .button-outline{
  background: #fff;
  color: var(--green-900);
  border: 1px solid rgba(31,41,55,.18);
}
body.skin-sever .btn-outline:hover,
body.skin-sever .button-outline:hover{
  background: rgba(148,179,82,.12);
  border-color: rgba(148,179,82,.35);
}

/* ===== Badges / price tags ===== */
body.skin-sever .badge-danger,
body.skin-sever .tag-danger{
  background: var(--danger);
  color: #fff;
}
body.skin-sever .badge-gold,
body.skin-sever .tag-gold{
  background: var(--gold);
  color: #111827;
}

/* ===== Footer ===== */
body.skin-sever footer,
body.skin-sever .site-footer{
  background: linear-gradient(180deg, var(--green-900), #1A2E16);
  color: rgba(255,255,255,.92);
}
body.skin-sever footer a,
body.skin-sever .site-footer a{
  color: rgba(255,255,255,.92);
}
body.skin-sever footer a:hover,
body.skin-sever .site-footer a:hover{
  color: #fff;
  text-decoration: underline;
}

/* Поиск в шапке для skin-sever: делаем видимым на белом фоне */
body.skin-sever .header-search input[type="search"],
body.skin-sever .header-search input[type="text"]{
  background: rgba(148, 179, 82, 0.10);
  border: 1px solid rgba(35, 65, 30, 0.22);  /* тёмно-зелёный с прозрачностью */
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
  color: #1f2937;
}

body.skin-sever .header-search input::placeholder{
  color: rgba(31, 41, 55, 0.55);
}

/* Фокус: понятная активность */
body.skin-sever .header-search input:focus{
  outline: none;
  border-color: rgba(148, 179, 82, 0.9);
  box-shadow: 0 0 0 3px rgba(148, 179, 82, 0.25), 0 6px 18px rgba(17, 24, 39, 0.08);
}

/* Кнопка поиска — чтобы поле “читалось” даже в плотной шапке */
body.skin-sever .header-search button{
  background: #23411E;
  color: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
}

body.skin-sever .header-search button:hover{
  filter: brightness(1.05);
}

/* ===== Topbar (Sever): все ссылки белые ===== */
body.skin-sever .topbar{
  /* если у тебя topbar тёмная/зелёная — оставь как есть; если нет, можно раскомментировать: */
  /* background: linear-gradient(180deg, var(--green-700), var(--green-900)); */
  color: rgba(255,255,255,.95);
}

body.skin-sever .topbar a,
body.skin-sever .topbar .topbar-link,
body.skin-sever .topbar .topbar-left a,
body.skin-sever .topbar .topbar-right a{
  color: rgba(255,255,255,.95) !important;
}

body.skin-sever .topbar a:hover,
body.skin-sever .topbar .topbar-link:hover{
  color: #fff !important;
  text-decoration: underline;
}

/* если есть иконки в topbar */
body.skin-sever .topbar svg{
  fill: currentColor;
  stroke: currentColor;
}





/* доп.опции */
body.skin-sever .extras{
  margin-top: 22px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70));
  border: 1px solid rgba(31,41,55,.10);
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
  text-align: left;
}
body.skin-sever .extras .extras-head h3{
  margin: 0 0 6px;
  color: var(--green-900);
  letter-spacing: -0.01em;
}
body.skin-sever .extras .extras-head p{
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.5;
}
body.skin-sever .extras-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.skin-sever .extra-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(148,179,82,.14);
  border: 1px solid rgba(148,179,82,.22);
  color: var(--green-900);
  font-weight: 600;
  line-height: 1;
}
body.skin-sever .extra-chip::before{
  content: "+";
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(35,65,30,.12);
  color: var(--green-900);
  font-weight: 800;
}
body.skin-sever .extras-actions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}