/* Шапка в стиле маркетплейса — общая для главной и посадочных
   (templates/_hd.html). Цвета и шрифт — переменные из style.css. */

.hd{background:#fff;position:sticky;top:0;z-index:40;box-shadow:0 1px 0 var(--line)}
.hd__in{display:flex;align-items:center;gap:14px;height:72px}
.hd .logo img{height:30px}
.hd svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.hd__catalog{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;
  border-radius:12px;background:var(--green);color:#fff;font-weight:700;text-decoration:none;
  margin-left:10px;flex:none;transition:background .15s}
.hd__catalog:hover{background:#15803D}
.hd__search{flex:1;display:flex;height:44px;border:2px solid var(--green);border-radius:12px;
  overflow:hidden;background:#fff;min-width:0}
.hd__search input{flex:1;min-width:0;border:0;padding:0 14px;font:inherit;font-size:15px;color:var(--ink);outline:none}
.hd__search input::placeholder{color:#9CA3AF}
.hd__search button{width:56px;border:0;background:var(--green);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.hd__search button:hover{background:#15803D}
.hd__icons{display:flex;gap:4px;flex:none}
.hd__icons a{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:68px;padding:6px 6px;border-radius:10px;color:var(--ink);text-decoration:none;
  font-size:11.5px;font-weight:500}
.hd__icons a:hover{color:var(--green);background:var(--soft-bg)}
.hd__icons b{position:absolute;top:1px;right:9px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--green);color:#fff;font-size:10.5px;line-height:18px;
  text-align:center;font-weight:700;box-shadow:0 0 0 2px #fff}
.hd__quick{border-top:1px solid var(--line)}
.hd__quick-in{display:flex;align-items:center;gap:6px;height:40px;overflow-x:auto;
  scrollbar-width:none;white-space:nowrap}
.hd__quick-in::-webkit-scrollbar{display:none}
.hd__quick-lbl{color:var(--muted);font-size:13px;margin-right:4px;flex:none}
.hd__quick a{flex:none;color:var(--ink);font-size:13px;text-decoration:none;padding:5px 11px;
  border-radius:16px;background:var(--bg);transition:background .15s,color .15s}
.hd__quick a:hover{background:var(--green-bg);color:var(--green)}


@media (max-width:1100px){
  .hd__icons a span{display:none}
  .hd__icons a{min-width:44px}
}

@media (max-width:720px){
  /* Две строки: логотип и «Ваша база», под ними каталог и поиск. */
  .hd__in{display:grid;grid-template-columns:44px minmax(0,1fr) auto;
    grid-template-areas:"logo logo icons" "cat search search";
    height:auto;padding:10px 0 10px;gap:8px 8px;align-items:center}
  .hd .logo{grid-area:logo}
  .hd .logo img{height:26px}
  .hd__icons{grid-area:icons;justify-self:end}
  .hd__icons a:not(.hd__cart){display:none}
  .hd__icons a{min-width:40px;padding:4px 8px 2px}
  .hd__icons b{top:-4px;right:-4px}
  .hd__catalog{grid-area:cat;margin-left:0;padding:0;width:44px;justify-content:center;height:44px}
  .hd__catalog span{display:none}
  .hd__search{grid-area:search}
  .hd__search input{font-size:14px;padding:0 10px}
  .hd__search button{width:48px}
  .hd__quick-in{height:38px}
  .hd__quick-lbl{display:none}
}