/* ============================================================================
   Шапка и подвал сайта, версия 2026. Файл подключается из header.php сразу
   после wp_head, поэтому перекрывает объединённый CSS темы по порядку.
   В Figma подвал тёмной карточкой внутри белой страницы, на сайте был белый.
   Шапка тоже разошлась с макетом: строка поиска не растягивалась, стояли
   переключатель валюты и иконки у телефона с почтой, ряд был ниже макетного.
   Разметка footer.php почти не тронута, чтобы не потерять поля ACF,
   меню WordPress и категории WooCommerce.
   ============================================================================ */


/* ============================ ШАПКА ============================ */
/* Поиск. Тема держала фиксированные 280 px и голубую подложку #D1EAFF,
   в макете поле белое с тонкой рамкой и занимает весь свободный ряд.
   Ширину держал не .asp_w, а вложенный .asp_w_container: правило било мимо. */
.main_header #header_search{width:100%}
.main_header .search-main_header{flex:1 1 auto;width:100%;min-width:0}
.main_header .search-main_header .asp_w,
.main_header .search-main_header .asp_w_container,
.main_header .search-main_header .probox{width:100% !important;max-width:none !important}
.main_header .search-main_header .probox{background:#FFFFFF !important;
  border:1px solid #E4E4E7 !important;border-radius:999px !important;box-shadow:none !important}
.main_header .search-main_header input{width:100% !important}

/* Переключатель валюты макетом не предусмотрен. */
.main_header .head_main_btn.cg-24{display:none !important}

/* Телефон и почта в макете набраны текстом, без кружков-иконок.
   Иконки Telegram и WhatsApp остаются: они и есть содержимое ссылок. */
.main_header a[href^="tel:"].head_phone > img,
.main_header a[href^="mailto:"].head_phone > img{display:none !important}

/* Размеры ряда трогаем только на десктопе: двухрядная шапка живёт от 1200,
   ниже у темы своя компактная разметка, и туда лезть незачем.
   nowrap обязателен: с новыми полями «Открыть каталог» ломался на две строки. */
@media (min-width:1200px){
  .main_header .btn-catalog,
  .main_header .btn-cart{min-height:56px;display:inline-flex;align-items:center;
    justify-content:center;white-space:nowrap;border-radius:12px}
  .main_header .btn-catalog{padding:0 26px}
  .main_header .btn-cart{padding:0 18px}
  .main_header .search-main_header,
  .main_header .search-main_header .asp_w_container,
  .main_header .search-main_header .probox{height:56px !important}
  .main_header .search-main_header input{height:54px}
  .main_header #logo img{height:60px;width:auto}

  /* Разделитель между рядами. В теме на нём инлайновый opacity:.1, поэтому
     линии фактически не было. Инлайн перебивается только через !important. */
  .main_header hr{border:0 !important;border-top:1px solid #E4E4E7 !important;
    opacity:1 !important;margin:10px 0 0 !important}
}

/* ---------- Мобильная шапка ---------- */
/* В макете один ряд: знак, телефон с графиком, мессенджеры, бургер.
   Тема держала телефон и мессенджеры отдельным рядом с классом d-none,
   поэтому на мобильной оставались только знак и бургер. Ряд показан,
   бургер вынесен абсолютом вправо, чтобы порядок совпал с макетом. */
@media (max-width:1199.98px){
  #mobile .container{position:relative;display:flex;align-items:center;gap:12px;padding-right:54px}
  #mobile .container > div:first-child{flex:0 0 auto;width:auto}
  #mobile .container > div:first-child > div{width:auto !important}
  #mobile .catalog_btns{position:absolute;right:12px;top:50%;transform:translateY(-50%);margin:0}
  #mobile .head_btn--mob{display:flex !important;flex:1 1 auto;justify-content:flex-end;
    gap:10px;padding:0 !important;min-width:0}
  /* Почта в мобильном макете не показана: телефон плюс мессенджеры. */
  #mobile .head_btn--mob a[href^="mailto:"]{display:none !important}
  #mobile .head_btn--mob a[href^="tel:"]{gap:8px;min-width:0}
  #mobile .head_phone__num{display:flex;flex-direction:column;line-height:1.15;min-width:0}
  #mobile .head_phone__num{font:600 15px/1.2 Rubik,sans-serif;color:#1A1A1A;white-space:nowrap}
  #mobile .head_phone__hours{font:400 10.5px/1.3 Rubik,sans-serif;color:#6B6B76;white-space:nowrap}
  #mobile .head_btn--mob img{width:26px;height:26px}
  #mobile .head_btn--mob a[href^="tel:"] img{width:18px;height:18px}
  #mobile .logo-small_header img{height:38px;width:auto}
}
/* На самых узких телефон уводит бургер за край: график прячем. */
@media (max-width:359.98px){
  #mobile .head_phone__hours{display:none}
  #mobile .head_phone__num{font-size:13.5px}
}

/* ============================ ПОДВАЛ ============================ */
.sse-f26{background:#FFFFFF !important;padding:22px 0}
/* карточка: в макете 1396 при экране 1440, внутренние поля 50 и 40, радиус 30 */
.sse-f26 > .container{background:#111111;border-radius:30px;
  padding:40px 50px !important;max-width:min(1396px,calc(100% - 44px)) !important}

/* логотип. Линии под ним в макете нет, прячем её */
.sse-f26 .logo_footer{height:66px;width:auto}
.sse-f26 .line-footer{display:none !important}

/* реквизиты */
.sse-f26 .sse-group-footer-col p{color:#FFFFFF;font:400 16px/24px Rubik,sans-serif;margin:0 0 4px}
.sse-f26 .sse-group-footer-col p strong{font-weight:600}

/* заголовки колонок */
.sse-f26 .h6,.sse-f26 a.h6{color:#FFFFFF !important;font:500 18px/22.5px Rubik,sans-serif}

/* ссылки колонок */
.sse-f26 a.text-dark{color:#B9B9BE !important;font:400 15px/22.5px Rubik,sans-serif}
.sse-f26 a.text-dark:hover{color:#FFFFFF !important}

/* Телефон и почта. Правило шло до .text-dark и проигрывало ему по порядку:
   на бою выходило 400 15/22.5 #B9B9BE вместо макетных 500 15/21 #A9A9A9. */
.sse-f26 a.phone,.sse-f26 a.text-dark.phone{color:#A9A9A9 !important;
  font:500 15px/21px Rubik,sans-serif !important;letter-spacing:-.35px}
.sse-f26 a.phone:hover,.sse-f26 a.text-dark.phone:hover{color:#FFFFFF !important}

/* строка про оферту и копирайт */
.sse-f26 > .container > .d-flex p{color:#FFFFFF;font:400 16px/24px Rubik,sans-serif}
/* ссылки политики и возврата: 15 px серым, а не 18 px заголовочным */
.sse-f26 > .container > .d-flex .d-flex a.h6{color:#A9A9A9 !important;
  font:400 15px/18.75px Rubik,sans-serif !important}
.sse-f26 > .container > .d-flex .d-flex a.h6:hover{color:#FFFFFF !important}

@media (max-width:767px){
  .sse-f26{padding:12px 0}
  .sse-f26 > .container{border-radius:18px;padding:28px 20px !important;
    max-width:calc(100% - 24px) !important}
  .sse-f26 .logo_footer{height:48px}
}