/* domikigr.ru: the header of variant A on release 1 (WP hdr, ADR 0009; chunk header, assets/js/site/header.js; journal
   docs/upgrade/log/31-hdr.md). Port of the header parts of design/a-berezhnoe and site.css of release 2 (.mbar, .hdr,
   .nav, .drawer, .mini, .search), self-contained: every rule starts with the root class .dh that each top-level piece of
   the header carries (the skip link, the sprite, the sticky row, header.dh, #dh-end, the drawer) - nothing here touches
   html, body or any element of the page outside the header. The generic rules of main_global.css (reset, a, ul, input,
   button, a:hover opacity, button:focus outline) are answered inside .dh only.
   Fonts: those of the page (main_global.css @font-face): "rotondac" bold where variant A has Nunito 800 (menu, phone,
   buttons, slogan), "bliss_pro" where it has Golos Text. Colours: the palette AA of variant A (design/a-berezhnoe/
   README.md §5): sky #007DB2 (white text 4.59), link #00699B, green #3D8000 (white 4.90), terracotta #B44C30 (white
   5.23), yellow #FCD206 (ink #271203 12.23), muted #6B6872 (5.46).
   Widths - the breakpoints of release 1: up to 1000 px the compact header (sticky row + search and phone; the old header
   is compact there too), from 1001 px the header of the computer; the row is sticky only up to 800 px: from 801 px the
   column of release 1 (#sticky-sidebar) sticks to the top of the window (.sticky { position: fixed; top: 0 }) and a
   sticky row would cover it. No sticky row on the computer for the same reason. */

/* ---------- base inside the header ---------- */
.dh, .dh *, .dh *::before, .dh *::after { box-sizing: border-box; }
.dh { font: 400 14px/1.4 "bliss_pro", Arial, sans-serif; color: #fff; }
.dh :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
.dh :is(p, form) { margin: 0; padding: 0; }
.dh img { display: block; max-width: 100%; height: auto; border: 0; }
.dh svg { flex: none; }
.dh a { color: inherit; text-decoration: none; }
.dh a:hover { opacity: 1; }
.dh :is(button, input) { font: inherit; color: inherit; margin: 0; }
.dh button { cursor: pointer; background: none; border: 0; padding: 0; }
.dh :focus { outline: none; }
/* !important: main_global.css has a:hover, button:hover { outline: none !important } - the ring of the keyboard stays
   when the pointer rests on the focused control */
.dh :focus-visible { outline: 3px solid #fcd206 !important; outline-offset: 2px; border-radius: 4px; }
.dh :is(.dh-search, .dh-nav__sub, .dh-dnav details ul, .dh-drawer__mini, .dh-drawer__contacts) :focus-visible { outline-color: #00699b !important; }
.dh .dh-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dh .dh-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dh .dh-ico--sm { width: 20px; height: 20px; }
.dh .dh-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px; }
.dh.dh-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dh.dh-end { display: block; height: 0; overflow: hidden; }

/* the skip link: off screen until focused */
.dh.dh-skip { position: absolute; left: 8px; top: -80px; z-index: 120; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 8px; background: #fcd206; color: #271203; font-weight: bold; text-decoration: none; }
.dh.dh-skip:focus { top: 8px; }
.dh.dh-skip:focus-visible { outline-color: #00699b !important; }

/* the handset before a phone number: drawn by CSS, the link keeps only the number as its text (Alloka swaps the
   text of .phone_alloka); the handset of Feather Icons (MIT), colour --dh-ico */
.dh .dh-tel::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--dh-ico, currentColor); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7A2 2 0 0 1 22 16.9z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- buttons ---------- */
.dh .dh-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px;
  border: 0; border-radius: 999px; background: #3d8000; color: #fff; box-shadow: inset 0 -3px 0 rgb(0 0 0 / 16%);
  font: bold 15px/1.15 "rotondac", Arial, sans-serif; text-align: center; text-decoration: none; white-space: nowrap;
}
.dh .dh-btn:hover { background: #346e00; color: #fff; }
.dh .dh-ibtn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 999px; color: #fff; }
/* hover on the blue: a darker veil (a light one would take the white text below AA: 3.65 on #007DB2) */
.dh .dh-ibtn:hover { background: rgb(0 0 0 / 18%); }

/* ---------- the sticky row (up to 1000 px) ---------- */
.dh.dh-bar { position: relative; z-index: 50; background: #007db2; color: #fff; }
.dh .dh-bar__in { display: flex; align-items: center; gap: 4px; height: 56px; }
.dh .dh-bar__menu { margin-left: -8px; }
.dh .dh-bar__logo { display: flex; align-items: center; min-height: 44px; flex: none; }
.dh .dh-bar__logo img { width: 103px; height: 38px; }
.dh .dh-bar__tel { --dh-ico: #fcd206; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-height: 44px; padding: 0 6px; border-radius: 999px; font: bold 15px/1 "rotondac", Arial, sans-serif; white-space: nowrap; }
.dh .dh-bar__tel:hover, .dh .dh-bar__cart:hover { background: rgb(0 0 0 / 18%); }
.dh .dh-bar__cart { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-right: -8px; border-radius: 999px; }
.dh .dh-badge { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #fcd206; color: #271203; font: bold 13px/20px "rotondac", Arial, sans-serif; text-align: center; }
.dh .dh-badge[hidden] { display: none; }
@media (max-width: 800px) {
  .dh.dh-bar { position: sticky; top: 0; }
  .dh.dh-end { scroll-margin-top: 64px; }   /* the skip link: the start of the page below the sticky row */
}
@media (max-width: 379px) {   /* very narrow phones: the number is the label of the icon */
  .dh .dh-bar__tel { width: 44px; padding: 0; justify-content: center; gap: 0; font-size: 0; }
}

/* ---------- the header: the blue "sky" with a scalloped edge ---------- */
.dh.dh-hdr { position: relative; z-index: 40; margin: 0; padding: 2px 0 14px; background: #007db2; color: #fff; }
.dh.dh-hdr::after { /* the scalloped edge of the old header.png, as CSS: sky bumps under the band */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 9px; pointer-events: none;
  background: radial-gradient(circle at 50% 0, #007db2 8.4px, transparent 9px) 0 0 / 18px 9px repeat-x;
}
.dh .dh-hdr__logo, .dh .dh-hdr__slogan, .dh .dh-hdr__mail, .dh .dh-hdr__cb, .dh .dh-hdr__navwrap, .dh .dh-mini { display: none; }
.dh .dh-hdr__main { display: grid; gap: 8px; }
.dh .dh-hdr__contacts { display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; }
.dh .dh-hdr__tel { --dh-ico: #fcd206; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: bold 18px/1.2 "rotondac", Arial, sans-serif; white-space: nowrap; }
.dh .dh-hdr__meta { font-size: 14px; }
.dh .dh-hdr__hours { white-space: nowrap; }
.dh .dh-hdr__mail a { text-decoration: underline; text-decoration-color: rgb(255 255 255 / 55%); text-underline-offset: 0.18em; }

/* the search: the form of the old header */
.dh .dh-search { display: flex; align-items: stretch; height: 50px; padding: 3px; border-radius: 999px; background: #fff; box-shadow: inset 0 1px 3px rgb(0 0 0 / 18%); }
.dh .dh-search input { flex: 1; min-width: 0; height: auto; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: #3e3e3e; font-size: 16px; -webkit-appearance: none; appearance: none; }
.dh .dh-search input::placeholder { color: #6b6872; opacity: 1; }
.dh .dh-search input:focus-visible { outline-offset: -2px; }
.dh .dh-search button { flex: none; min-width: 84px; padding: 0 16px; border-radius: 999px; background: #00699b; color: #fff; font: bold 15px/1 "rotondac", Arial, sans-serif; }
.dh .dh-search button:hover { background: #004f75; }

/* the mini cart (computer: under the search; the classes of the contract - hdrMiniCart) */
.dh .dh-mini { flex-wrap: nowrap; align-items: center; gap: 0 14px; margin: 4px 0 0; white-space: nowrap; overflow: hidden; font-size: 14px; }
.dh .dh-mini a:not(.dh-btn) { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 55%); text-underline-offset: 0.18em; }
.dh .dh-mini .dh-btn { min-height: 44px; padding: 4px 16px; font-size: 14px; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 16%); }
.dh .dh-mini:not(.full) .dh-mini__order { display: none; }
.dh .dh-mini__sum[hidden] { display: none; }
.dh .dh-mini .rbl { font: inherit; }

/* ---------- the menu: the terracotta "board" (computer) ---------- */
.dh .dh-nav { position: relative; z-index: 30; margin-top: 12px; border-radius: 16px; background: #b44c30; box-shadow: inset 0 -4px 0 #8f3a22, 0 3px 6px rgb(0 0 0 / 18%); }
.dh .dh-nav::before { content: ""; position: absolute; inset: 5px 6px 8px; border: 1.5px dashed rgb(255 255 255 / 38%); border-radius: 11px; pointer-events: none; }
.dh .dh-nav__list { display: flex; padding: 6px 10px 9px; }
.dh .dh-nav__item { position: relative; display: flex; align-items: stretch; flex: 1 1 auto; }
.dh .dh-nav__item + .dh-nav__item::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; border-left: 1px solid rgb(0 0 0 / 18%); box-shadow: 1px 0 0 rgb(255 255 255 / 12%); }
.dh .dh-nav__link, .dh .dh-nav__toggle {
  display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 6px 0 10px; border: 0; background: none;
  color: #fff; font: bold 16px/1.1 "rotondac", Arial, sans-serif; text-decoration: none; white-space: nowrap;
}
.dh .dh-nav__link { flex: 1; justify-content: center; }
.dh .dh-nav__toggle { min-width: 44px; padding: 0; justify-content: center; }
.dh :is(.dh-nav__toggle, .dh-nav__link--btn) .dh-ico { width: 20px; height: 20px; }
.dh .dh-nav__link:hover, .dh .dh-nav__toggle:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.dh .dh-nav__item.is-active > .dh-nav__link { box-shadow: inset 0 -4px 0 #fcd206; }
.dh .dh-nav__sub { position: absolute; top: 100%; left: 0; z-index: 5; display: none; min-width: 260px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 6px 24px rgb(39 18 3 / 14%); }
.dh .dh-nav__sub a { display: flex; align-items: center; min-height: 44px; padding: 4px 12px; border-radius: 8px; color: #3e3e3e; font-size: 15px; line-height: 1.25; }
.dh .dh-nav__sub a:hover { background: #e8f5fc; color: #00699b; }
.dh .dh-nav__cap { padding: 10px 12px 2px; color: #b44c30; font: bold 14px/1.2 "rotondac", Arial, sans-serif; letter-spacing: 0.04em; }
.dh .dh-nav__item.is-open > .dh-nav__sub, .dh .dh-nav__item:not(.is-closed):hover > .dh-nav__sub, .dh .dh-nav__item:not(.is-closed):focus-within > .dh-nav__sub { display: block; }
.dh .dh-nav__item.is-open .dh-ico { transform: rotate(180deg); }
.dh .dh-nav__sub--mega { grid-template-columns: 1fr 1fr; gap: 0 16px; min-width: 560px; }
.dh .dh-nav__item.is-open > .dh-nav__sub--mega, .dh .dh-nav__item:not(.is-closed):hover > .dh-nav__sub--mega, .dh .dh-nav__item:not(.is-closed):focus-within > .dh-nav__sub--mega { display: grid; }
.dh .dh-nav__item:last-child .dh-nav__sub, .dh .dh-nav__item:nth-last-child(2) .dh-nav__sub { left: auto; right: 0; }

/* ---------- the drawer (up to 1000 px, the burger of the sticky row) ---------- */
.dh.dh-drawer { margin: 0; padding: 0 0 16px; width: min(420px, 100%); max-width: 100%; height: 100%; max-height: 100%; border: 0; background: #fbfbfb; color: #3e3e3e; overflow-y: auto; overscroll-behavior: contain; }
.dh.dh-drawer::backdrop { background: rgb(39 18 3 / 45%); }
.dh .dh-drawer__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 56px; padding: 0 12px 0 16px; background: #007db2; }
.dh .dh-drawer__head a { display: flex; align-items: center; min-height: 44px; }
.dh .dh-drawer__head img { width: 114px; height: 42px; }
.dh .dh-dnav { margin: 12px; padding: 6px; border-radius: 16px; background: #b44c30; box-shadow: inset 0 -3px 0 #8f3a22; }
.dh .dh-dnav > li + li { border-top: 1px dashed rgb(255 255 255 / 35%); }
.dh .dh-dnav summary, .dh .dh-dnav > li > a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 12px; color: #fff; font: bold 18px/1.2 "rotondac", Arial, sans-serif; text-decoration: none; cursor: pointer; list-style: none; }
.dh .dh-dnav summary::-webkit-details-marker { display: none; }
.dh .dh-dnav details[open] summary .dh-ico { transform: rotate(180deg); }
.dh .dh-dnav details ul { margin: 0 4px 8px; padding: 6px; border-radius: 12px; background: #fff; }
.dh .dh-dnav details a { display: flex; align-items: center; min-height: 44px; padding: 4px 12px; border-radius: 8px; color: #3e3e3e; font-size: 16px; line-height: 1.25; }
.dh .dh-dnav details a:hover { background: #e8f5fc; color: #00699b; }
.dh .dh-dnav .dh-nav__cap { padding-top: 12px; }
.dh .dh-drawer__mini { display: grid; gap: 2px; margin: 12px; }
.dh .dh-drawer__mini a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; color: #00699b; font-size: 16px; }
.dh .dh-drawer__mini a:hover { color: #004f75; }
.dh .dh-drawer__contacts { display: grid; gap: 8px; justify-items: start; margin: 12px; padding: 16px; border: 1px solid #e2e2e2; border-radius: 16px; background: #fff; font-size: 16px; }
.dh .dh-drawer__tel { --dh-ico: #0079ae; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #271203; font: bold 20px/1.2 "rotondac", Arial, sans-serif; white-space: nowrap; }
.dh .dh-drawer__contacts span a { display: inline-flex; align-items: center; min-height: 44px; color: #00699b; text-decoration: underline; }

/* ---------- the computer (from 1001 px: the header of release 1 is the wide one there) ---------- */
@media (min-width: 1001px) {
  .dh.dh-bar { display: none; }
  .dh.dh-hdr { padding: 0 0 14px; }
  .dh .dh-hdr__main { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding-top: 6px; }
  .dh .dh-hdr__logo { display: flex; align-items: center; }
  .dh .dh-hdr__logo img { width: 228px; height: 84px; }
  /* one line each, so the swap of the web fonts does not move the header */
  .dh .dh-hdr__slogan { display: block; margin: 0 0 8px; font: bold 13px/1.3 "rotondac", Arial, sans-serif; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dh .dh-mini, .dh .dh-mini.dnone { display: flex; }
  .dh .dh-mini.full { flex-wrap: wrap; overflow: visible; }
  .dh .dh-search { max-width: 680px; }
  .dh .dh-hdr__contacts { display: grid; justify-items: end; gap: 0; text-align: right; }
  .dh .dh-hdr__tel { font-size: 24px; }
  .dh .dh-hdr__meta { line-height: 1.5; }
  .dh .dh-hdr__hours, .dh .dh-hdr__mail { display: block; }
  .dh .dh-hdr__cb { display: inline-flex; margin-top: 4px; }
  .dh .dh-hdr__navwrap { display: block; }
  .dh.dh-drawer { display: none; }
}
/* 1001-1199 px: the seven items of the menu in one line - a smaller logo, the slogan may wrap, a narrower menu */
@media (min-width: 1001px) and (max-width: 1199px) {
  .dh .dh-hdr__main { gap: 16px; }
  .dh .dh-hdr__logo img { width: 190px; height: 70px; }
  .dh .dh-hdr__slogan { white-space: normal; overflow: visible; }
  .dh .dh-hdr__tel { font-size: 21px; }
  .dh .dh-nav__list { padding: 6px 6px 9px; }
  .dh .dh-nav__link { padding: 0 2px 0 6px; font-size: 14px; }
  .dh .dh-nav__link--btn { padding-right: 6px; }
}