/* ===== Новий вигляд шапки (11.11.2026): лого в блакитній плашці (F) + кнопки-плашки з тінню (M4) =====
   Вмикається/вимикається в адмінці: Налаштування → Банери й англійська версія → «Вигляд шапки». */

/* лого — блакитна плашка-кнопка «на головну» */
.hd-m4 .hd-logo{display:block;background:#E6F6FD;border-radius:16px;padding:6px 18px;transition:background .15s,box-shadow .15s}
@media (hover:hover){.hd-m4 .hd-logo:hover{background:#D6EFFB;box-shadow:0 3px 10px rgba(0,160,227,.18)}}
.hd-m4 .hd-logo:active{background:#CDEBF8}
.hd-m4 .hd-logo:focus-visible{outline:2px solid #00A0E3;outline-offset:2px}

/* рядок ЗЗР / Насіння / Добрива / РКД / пошук — окремі плашки */
.hd-m4 .hd-nav{border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important;gap:10px}
.hd-m4 .hd-nav-l{gap:10px}
.hd-m4 .hd-nav .nav-i>a{background:#E6F6FD!important;border:0!important;border-radius:12px!important;box-shadow:0 3px 8px rgba(4,38,58,.10);color:#04263A!important;transition:background .15s,box-shadow .15s,color .15s}
@media (hover:hover){.hd-m4 .hd-nav .nav-i>a:hover{background:#D6EFFB!important;color:#0077B6!important}}
.hd-m4 .hd-nav .nav-i.is-on>a{background:#00A0E3!important;color:#fff!important;box-shadow:0 4px 10px rgba(0,160,227,.35)}
.hd-m4 .nav-drop{border-radius:12px;top:calc(100% + 6px)}
.hd-m4 .hd-search{border:0!important;background:#E6F6FD;border-radius:12px;box-shadow:0 3px 8px rgba(4,38,58,.10)}
.hd-m4 .hd-search button{background:none!important;border-radius:12px!important;color:#04263A}
@media (hover:hover){.hd-m4 .hd-search button:hover{background:#D6EFFB!important;color:#0077B6}}
.hd-m4 .hd-search.is-open,.hd-m4 .hd-search:focus-within{background:#fff;box-shadow:0 0 0 2px #00A0E3,0 3px 8px rgba(4,38,58,.10)}

/* телефон і планшет */
@media (max-width:860px){
 .hd-m4 .hd-logo{padding:4px 10px;border-radius:14px}
 .hd-m4 .hd-nav{display:flex;flex-direction:row!important;flex-wrap:wrap;align-items:stretch;gap:6px;margin-top:2px}
 .hd-m4 .hd-nav-l{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex:1 1 0;min-width:0;order:1}
 .hd-m4 .nav-i{display:block!important}
 .hd-m4 .nav-i>a{height:42px!important;padding:0 2px!important;justify-content:center!important;font-size:11px!important;font-weight:800!important;letter-spacing:.02em;white-space:nowrap}
 .hd-m4 .nav-x,.hd-m4 .nav-drop{display:none!important}
 .hd-m4 .hd-search{order:2;flex:0 0 42px;width:42px!important;height:42px}
 .hd-m4 .hd-search input{flex:0 0 0;width:0;padding:0;opacity:0;height:42px}
 .hd-m4 .hd-search button{flex:0 0 42px;width:42px;height:42px}
 .hd-m4 .hd-search.is-open,.hd-m4 .hd-search:focus-within{flex:1 1 100%;width:auto!important}
 .hd-m4 .hd-search.is-open input,.hd-m4 .hd-search:focus-within input{flex:1 1 auto;width:auto;padding:0 0 0 14px;opacity:1}
 .hd-m4 .hd-nav:has(.hd-search.is-open) .hd-nav-l,.hd-m4 .hd-nav:has(.hd-search:focus-within) .hd-nav-l{display:none!important}
 .hd-m4 .hd-mm{order:3;flex:0 0 100%}
}
@media (max-width:400px){
 .hd-m4 .hd-logo{padding:3px 8px}
 .hd-m4 .nav-i>a{font-size:10px!important;letter-spacing:0}
 .hd-m4 .hd-nav,.hd-m4 .hd-nav-l{gap:5px}
}