/* =====================================================================
   HEADER.CSS — ТОЛЬКО мобильная адаптация шапки metall41.ru
   ---------------------------------------------------------------------
   Десктопная версия НЕ переопределяется вообще: ни одного правила
   вне @media (max-width: 991px) и ни одного правила для уже
   существующих классов (.logo_metall, .phone, .header-search,
   .head_right, .cart, .big_menu, .header-nav__link, .submenu и т.п.)
   здесь нет. Всё, что видно на десктопе, как и раньше задаёт ваш
   style.css — этот файл его не трогает.

   Единственные правила ВНЕ медиазапроса — это display:none по
   умолчанию для НОВЫХ элементов (кнопки бургера/поиска/звонка,
   нижняя панель, блок контактов в шторке), которых в оригинальной
   десктопной вёрстке никогда не было, так что скрывать их безопасно:
   это не переопределяет ничего существующего.

   Брейкпоинт: 992px. Цвет акцентов внутри новых мобильных элементов —
   #0042a2 (точный синий из logo.webp).
   ===================================================================== */

:root{
  --mc-primary:      #0042a2;
  --mc-primary-dark: #002f74;
  --mc-primary-tint: #e8eefb;
  --mc-dark:         #0a1626;
  --mc-accent:       #ff6a00;
  --mc-text:         #16202c;
  --mc-text-soft:    #64707c;
  --mc-border-soft:  #eef1f5;
  --mc-shadow:       0 18px 44px rgba(10,22,38,.18), 0 2px 10px rgba(10,22,38,.07);
  --mc-radius-sm:    8px;
  --mc-radius-pill:  999px;
  --mc-transition:   .2s ease;
  --hdr-height:      60px;
}

/* ── Новые элементы, которых нет в исходной десктопной вёрстке —
   скрыты по умолчанию, показываются только внутри мобильного
   медиазапроса ниже. Это не переопределяет НИЧЕГО существующего. ── */
.hdr-call-btn,
.hdr-burger,
.hdr-search-toggle,
.hdr-search-back,
.hdr-catalog-bar,
.hdr-generic-toggle,
.mob-drawer__contacts,
.mob-bottom-nav{ display: none; }

/* Иконки без SVG-зависимостей — используются только внутри новых
   элементов выше, самостоятельно ничего не показывают и не задевают
   существующую вёрстку. */
.hdr-x-icon{ position: relative; display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; }
.hdr-x-icon::before, .hdr-x-icon::after{ content:""; position: absolute; top:50%; left:50%; width:16px; height:2px; background: currentColor; border-radius: 2px; }
.hdr-x-icon::before{ transform: translate(-50%,-50%) rotate(45deg); }
.hdr-x-icon::after{ transform: translate(-50%,-50%) rotate(-45deg); }
.hdr-chevron-icon{ display: inline-block; width: 9px; height: 9px; flex: 0 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 1px; transform: rotate(-45deg); transition: transform var(--mc-transition); }
li.is-open > .hdr-generic-toggle .hdr-chevron-icon{ transform: rotate(45deg); }

body.hdr-nav-open{ overflow: hidden; } /* включается только мобильным JS, на десктопе класс никогда не добавляется */

/* ═════════════════════════════════════════════════════════════════════
   ВСЁ ОСТАЛЬНОЕ — ТОЛЬКО НИЖЕ 992px. Десктоп это не видит вообще.
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px){

  .header_middle_center{ padding: 10px 0; gap: 10px 12px; flex-wrap: nowrap; }

  .logo_metall{ order: 1; }
  .logo_metall .log1 img{ height: 38px; }
  .logo_metall .log3{ display: none; }

  .clients_info,
  .phone, .card_rop, .icon-btns-row, .head_right{ display: none; } /* переезжают в выезжающую панель / нижние кнопки */

  .hdr-call-btn, .hdr-search-toggle, .hdr-burger{
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    flex-shrink: 0; transition: background var(--mc-transition);
  }
  .hdr-call-btn{ order: 3; background: #25d366; color: #fff; margin-left: auto; }
  .hdr-search-toggle{ order: 4; background: var(--mc-primary-tint); color: var(--mc-primary-dark); }
  .hdr-burger{ order: 5; background: var(--mc-primary-tint); color: var(--mc-primary-dark); flex-direction: column; gap: 4px; }
  .hdr-burger span{ display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .22s ease, opacity .22s ease; }
  .hdr-burger[aria-expanded="true"], .hdr-search-toggle[aria-expanded="true"]{ background: var(--mc-primary); color: #fff; }
  .hdr-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .hdr-burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
  .hdr-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  /* ── Поиск: полноэкранный оверлей. !important — чтобы десктопные
     свойства .header-search (заданные вашим style.css) не могли
     просочиться на мобильную ширину. ── */
  .header-search{
    position: fixed !important;
    inset: 0 !important;
    max-width: none !important; width: auto !important; height: auto !important; margin: 0 !important;
    border: 0; border-radius: 0;
    padding: calc(env(safe-area-inset-top,0px) + 14px) 14px 14px calc(env(safe-area-inset-top,0px) + 14px + 46px);
    background: #fff;
    display: flex !important;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    gap: 8px;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform .28s cubic-bezier(.25,.46,.45,.94), opacity .28s ease, visibility .28s;
    z-index: 1300;
  }
  .header-search.is-open{ transform: translateY(0); opacity: 1; pointer-events: auto; visibility: visible; }
  .header-search .search_input{
    flex: 1 1 auto; min-width: 0; height: 44px;
    border: 1.5px solid var(--mc-border-soft); border-radius: var(--mc-radius-sm);
    padding: 0 14px; font-size: 14px; color: var(--mc-text); outline: none;
  }
  .search_button{
    flex: 0 0 auto; height: 44px; padding: 0 18px;
    background: var(--mc-primary); color: #fff;
    font-weight: 600; font-size: 13.5px; border-radius: var(--mc-radius-sm);
  }
  .hdr-search-back{
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: calc(env(safe-area-inset-top,0px) + 14px); left: 14px;
    width: 38px; height: 38px; color: var(--mc-text); background: #fff;
    z-index: 1301; opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .28s ease, visibility .28s;
  }
  .hdr-search-back.is-open{ opacity: 1; pointer-events: auto; visibility: visible; }
  .search_five_res{ position: static !important; width: 100%; flex: 1 1 100%; margin-top: 8px; border-radius: 0; box-shadow: none; max-height: none; overflow-y: auto; }

  /* ═══ Выезжающая панель (каталог + разделы): справа, под шапкой ═══ */
  .big_menu{
    position: fixed !important; top: var(--hdr-height, 64px); right: 0; left: auto;
    width: min(380px, 90vw);
    height: calc(100% - var(--hdr-height, 64px));
    background: #fff; color: var(--mc-text);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.25,.46,.45,.94);
    z-index: 1100; box-shadow: var(--mc-shadow);
  }
  .big_menu.is-open{ transform: translateX(0); }
  .menu_center{ padding: 0 !important; max-width: none !important; }
  .mainmenu{ flex-direction: column; }
  .main_menu, .second_ul{ flex-direction: column; width: 100%; }

  .header-nav__link{ background: var(--mc-primary-tint); color: var(--mc-primary-dark); padding: 15px 20px; width: 100%; justify-content: space-between; }
  .header-nav__link::after{ content:""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--mc-transition); }
  #hdrCatalogToggle[aria-expanded="true"]::after{ transform: rotate(45deg); }

  .menu_link{ color: var(--mc-text); padding: 15px 20px; border-bottom: 1px solid var(--mc-border-soft); width: 100%; }
  .menu_link::after{ display: none; }

  /* ── Каталог: собственная полноэкранная панель. !important — чтобы
     десктопное hover-правило из вашего style.css не могло перебить
     открытие/закрытие на мобильной ширине. ── */
  .submenu{
    display: none !important;
    position: fixed !important; inset: 0 !important;
    box-shadow: none; min-width: 0; max-height: none; border-radius: 0;
    background: #fff; z-index: 1150; overflow-y: auto; flex-direction: column;
  }
  .submenu.is-open{ display: flex !important; }

  .hdr-catalog-bar{ display: flex; position: sticky; top: 0; z-index: 2; background: var(--mc-primary-tint); }
  .hdr-catalog-bar__close{ display: flex; align-items: center; gap: 8px; width: 100%; padding: 16px 20px; color: var(--mc-primary-dark); font-size: 15px; font-weight: 700; justify-content: space-between; }

  .submenu > li{ display: flex; flex-wrap: wrap; align-items: center; }
  .submenu > li > a, .submenu > li > *:first-child{ flex: 1; padding: 13px 20px; border-bottom: 1px solid var(--mc-border-soft); font-size: 15px; }
  .submenu li:hover > a{ background: transparent; }

  .hdr-generic-toggle{
    display: flex; align-items: center; justify-content: center;
    width: 48px; align-self: stretch; border-bottom: 1px solid var(--mc-border-soft);
    color: var(--mc-text-soft); flex-shrink: 0;
  }

  .submenu ul{
    display: none;
    position: static; box-shadow: none; min-width: 0; max-height: none; border-radius: 0;
    width: 100%; background: #f6f8fa;
  }
  .submenu li.is-open > ul{ display: block; }
  .submenu ul a{ padding: 12px 20px 12px 40px; border-bottom: 1px solid var(--mc-border-soft); font-size: 14px; }

  /* затемнение фона */
  .hdr-overlay{ position: fixed; top: var(--hdr-height, 64px); left: 0; right: 0; bottom: 0; background: rgba(10,18,30,.45); opacity: 0; pointer-events: none; transition: opacity var(--mc-transition); z-index: 1050; }
  .hdr-overlay.is-open{ opacity: 1; pointer-events: auto; }

  /* ── Блок контактов вверху выезжающей панели ── */
  .mob-drawer__contacts{
    display: flex; flex-direction: column; gap: 10px;
    padding: 20px 22px;
    background: linear-gradient(135deg, #0a2a5c 0%, var(--mc-dark) 100%);
  }
  .mob-drawer__phone{ font-size: 21px; font-weight: 700; color: #fff; }
  .mob-drawer__messengers{ display: flex; align-items: center; gap: 10px; }
  .mob-drawer__messengers a{
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.14);
    transition: background var(--mc-transition);
  }
  .mob-drawer__messengers a:hover{ background: rgba(255,255,255,.24); }
  .mob-drawer__messengers img{ width: 18px; height: 18px; object-fit: contain; }
  .mob-drawer__address{ display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; color: #c7d7ee; }
  .mob-drawer__address svg{ flex: 0 0 auto; margin-top: 1px; }

  /* ═══ Нижняя мобильная панель: Главная / Каталог / Корзина / Избранное / Меню ═══ */
  body{ padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .mob-bottom-nav{
    display: flex; align-items: stretch;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 60px;
    background: #fff;
    border-top: 1px solid var(--mc-border-soft);
    box-shadow: 0 -6px 20px rgba(10,22,38,.1);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mob-bottom-nav__item{
    position: relative;
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 6px 4px 0;
    color: var(--mc-text-soft);
    font-size: 10.5px;
    transition: color var(--mc-transition);
    -webkit-tap-highlight-color: transparent;
  }
  .mob-bottom-nav__item:active{ color: var(--mc-primary); }
  .mob-bottom-nav__item--cart{ color: var(--mc-primary); font-weight: 600; }
  .mob-bottom-nav__cart-circle{
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    margin-top: -20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a5fd0 0%, var(--mc-primary) 60%, var(--mc-primary-dark) 100%);
    box-shadow: 0 8px 18px rgba(0,66,162,.38), 0 0 0 4px #fff;
    transition: transform .15s ease;
  }
  .mob-bottom-nav__item--cart:active .mob-bottom-nav__cart-circle{ transform: scale(.93); }
  .mob-bottom-nav__icon-wrap{ position: relative; display: flex; }
  .mob-bottom-nav__badge{
    position: absolute; top: -3px; right: -3px;
    min-width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-accent);
    color: #fff; font-size: 10px; font-weight: 700;
    box-shadow: 0 0 0 2px #fff;
  }
  .mob-bottom-nav__badge:empty{ display: none; }

  /* Доступность — только внутри мобильного контекста */
  .hdr-call-btn:focus-visible, .hdr-burger:focus-visible, .hdr-search-toggle:focus-visible,
  .hdr-search-back:focus-visible, .mob-bottom-nav__item:focus-visible,
  .hdr-generic-toggle:focus-visible, .hdr-catalog-bar__close:focus-visible{
    outline: 2px solid var(--mc-primary); outline-offset: 2px;
  }
}

@media (min-width: 992px){
  .mob-bottom-nav, .hdr-overlay, .hdr-call-btn, .hdr-search-toggle, .hdr-search-back, .hdr-catalog-bar, .hdr-generic-toggle{ display: none !important; }
}

@media (max-width: 380px){
  .logo_metall .log1 img{ height: 34px; }
  .big_menu{ width: 100vw; }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce){
  .hdr-burger, .hdr-call-btn, .hdr-search-toggle, .header-search, .hdr-search-back,
  .big_menu, .submenu, .hdr-overlay, .hdr-generic-toggle .hdr-chevron-icon{
    transition-duration: .001ms !important;
  }
}