/* Header contacts: the phones block and the salons block with their panels. Colours are variables on
   .hc, a theme changes them with a more specific selector (.header .hc), as this file loads after
   the theme's styles. Computers (from 993px) open the panels on hover, tablets on a tap - both drop
   down under the block; phones (up to 767px) open them as a sheet over the whole screen. In the
   menu drawer's copy of the phones block its panel opens in place. */
.hc {
  --hc-accent: #e05a2b;
  --hc-ink: #1f1f1f;
  --hc-muted: #6b6b6b;
  --hc-line: #e8e8e8;
  --hc-soft: #f5f4f2;
  position: relative;
  color: var(--hc-ink);
  line-height: 1.3;
  cursor: auto;
}

/* Resets inside the blocks weigh as little as a tag (:where), so the rules below win over them */
:where(.hc) *,
:where(.hc) *::before,
:where(.hc) *::after {
  box-sizing: border-box;
}

:where(.hc) ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.hc) a {
  color: inherit;
  text-decoration: none;
}

:where(.hc) a:hover {
  color: var(--hc-accent);
}

:where(.hc) button {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

/* The block in the header: an icon and three lines of the same height in both blocks, so the two
   stand level - the big line (the number / "Адреси салонів"), a note, the visitor's city */
.hc-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.hc--shops .hc-head {
  width: 100%;
}

.hc-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  color: var(--hc-accent);
  background: var(--hc-soft);
  border-radius: 50%;
}

.hc-icon svg {
  width: 22px;
  height: 22px;
}

.hc-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hc-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 26px;
}

.hc-phone {
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: .2px;
  white-space: nowrap;
}

.hc-phone:hover {
  color: var(--hc-ink);
}

.hc-code {
  color: var(--hc-accent);
}

.hc-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  white-space: nowrap;
}

.hc-messengers {
  display: inline-flex;
  gap: 6px;
}

.hc-messenger {
  display: inline-flex;
  width: 24px;
  height: 24px;
  transition: transform .15s;
}

.hc-messenger:hover {
  transform: scale(1.12);
}

.hc-messenger svg,
.hc-chip svg {
  width: 100%;
  height: 100%;
}

.hc-note {
  font-size: 12px;
  line-height: 17px;
  color: var(--hc-muted);
}

.hc-city-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
  font-size: 13px;
  line-height: 19px;
}

.hc-toggle-city {
  color: var(--hc-muted);
}

/* The phone never breaks: where the city line has to wrap (the drawer of the menu), the city's
   name wraps at its hyphen and the phone keeps one line */
.hc-toggle-phone {
  flex: none;
  font-weight: 600;
  white-space: nowrap;
}

.hc-accent {
  font-weight: 600;
  color: var(--hc-accent);
}

/* The salons' count with its chevron is one piece: where the city line has to wrap, it wraps after
   the city's name (or at a hyphen in it), never inside "10 салонів" or before the chevron */
.hc-city-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.hc-chevron {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  color: var(--hc-accent);
  transition: transform .2s;
}

.hc.is-open .hc-chevron {
  transform: rotate(180deg);
}

/* The panels */
.hc-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  max-width: calc(100vw - 32px);
  margin-top: 10px;
  padding: 18px 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .05);
  cursor: auto;
}

/* Keeps the panel open while the pointer crosses the gap above it */
.hc-panel::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

/* Open by a click or a tap, or under the mouse on a computer (is-hover: the script shows the panel
   at once and keeps it a moment after the mouse leaves, so a slip on the way to it does not close
   it). A closed panel takes no room, so it never widens the page. */
.hc.is-open > .hc-panel,
.hc.is-hover > .hc-panel {
  display: block;
  animation: hc-show .12s ease;
}

.hc.is-hover .hc-chevron {
  transform: rotate(180deg);
}

@keyframes hc-show {
  from {
    opacity: 0;
  }
}

.hc-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hc-muted);
}

/* The phones panel: as tall as the room under it allows (the script measures it when it opens; this
   is the start), its body scrolls inside, so the bridge above the panel is not clipped and
   "Усі контакти" stays at the bottom */
.hc--phones .hc-panel {
  width: 580px;
  max-height: min(620px, calc(100vh - 200px));
  padding: 0;
}

.hc--phones.is-open > .hc-panel,
.hc--phones.is-hover > .hc-panel {
  display: flex;
  flex-direction: column;
}

.hc--phones .hc-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hc-panel-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hc-line);
}

.hc-panel-free .hc-phone {
  font-size: 21px;
}

.hc-hours {
  margin-top: 6px;
  font-size: 12px;
  color: var(--hc-muted);
}

.hc-hours span,
.hc-shop-hours span {
  display: block;
}

.hc-panel-messengers {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.hc-panel-messengers .hc-label {
  margin-bottom: 0;
}

.hc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--hc-line);
  border-radius: 999px;
}

.hc-chip svg {
  width: 18px;
  height: 18px;
}

.hc-chip:hover {
  color: var(--hc-ink);
  border-color: var(--hc-accent);
}

.hc-cities {
  columns: 2;
  column-gap: 20px;
}

.hc-group {
  break-inside: avoid;
}

.hc-city {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 6px;
}

/* A long city name goes to two lines - after its hyphen (Кам'янець-/Подільський) - rather than push
   its phone into the next column; the phone keeps one line */
.hc-city span {
  min-width: 0;
}

.hc-city a {
  flex: none;
  white-space: nowrap;
}

.hc-city a {
  font-weight: 600;
}

.hc-city.is-town {
  padding-left: 20px;
  font-size: 12.5px;
}

/* A city with towns stands apart from the next one */
.hc-city.is-town:last-child {
  margin-bottom: 6px;
}

.hc-city.is-town span {
  color: var(--hc-muted);
}

.hc-city.is-current {
  background: var(--hc-soft);
}

.hc-city.is-current span {
  font-weight: 700;
  color: var(--hc-ink);
}

.hc-city.is-current a {
  color: var(--hc-accent);
}

.hc-panel-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hc-line);
}

.hc-email {
  font-size: 13px;
  font-weight: 600;
}

.hc-extra img {
  max-width: 100%;
  height: auto;
}

/* The salons panel: the cities on the left and the salons of the chosen one on the right, each
   column scrolls on its own. No overflow: hidden here - it would clip the bridge above the panel. */
.hc--shops .hc-panel {
  width: 780px;
  padding: 0;
}

.hc-sheet-head {
  display: none;
}

.hc-shops {
  display: flex;
  height: min(470px, calc(100vh - 240px));
  min-height: 260px;
}

.hc-rail {
  flex: 0 0 230px;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--hc-soft);
  border-top-left-radius: 10px;
}

.hc-rail-city {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  font-size: 14px;
  border-radius: 6px;
}

.hc-rail-city.is-town {
  padding-left: 22px;
  font-size: 13px;
}

.hc-rail-city:hover {
  color: var(--hc-accent);
}

.hc-rail-city.is-active {
  font-weight: 700;
  color: var(--hc-accent);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.hc-count {
  min-width: 22px;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--hc-muted);
  background: #fff;
  border-radius: 999px;
}

.hc-rail-city.is-active .hc-count {
  color: #fff;
  background: var(--hc-accent);
}

/* The scroll bar of the row of cities in the sheet (the script moves it); hidden elsewhere */
.hc-rail-track {
  display: none;
}

.hc-panes {
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hc-pane {
  display: none;
}

.hc-pane.is-active {
  display: block;
}

.hc-pane-head {
  margin-bottom: 12px;
}

.hc-pane-title {
  font-size: 17px;
  font-weight: 700;
}

.hc-shop-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hc-shop {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid var(--hc-line);
  border-radius: 8px;
}

.hc-shop-name {
  font-weight: 700;
  color: var(--hc-accent);
}

.hc-shop-hours {
  font-size: 12px;
  color: var(--hc-muted);
}

.hc-shop-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 3px;
}

.hc-shop-phone {
  font-weight: 600;
  white-space: nowrap;
}

.hc-route {
  font-weight: 600;
  color: var(--hc-accent);
}

.hc-more {
  display: block;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hc-accent);
  border-top: 1px solid var(--hc-line);
}

.hc--phones .hc-more {
  flex: 0 0 auto;
}

/* Narrow computers, tablets and phones: the blocks go without their round icons */
@media (max-width: 1199px) {
  .hc-icon {
    display: none;
  }
}

/* Tablets (up to 992px): the panels drop down on a tap; the phones panel stays above the page's
   bottom bar */
@media (max-width: 992px) {
  .hc-panel::before {
    display: none;
  }

  .hc--phones .hc-panel {
    max-height: min(70vh, 640px);
  }
}

/* A sheet over the whole screen. Phones (up to 767px) open both panels this way, and so does a
   button elsewhere on the page (data-hc-open): while open, the panel moves to the end of the body
   into a copy of the block's wrapper, .hc-host - the theme's header is a layer of its own, under
   the page's floating buttons. The topmost layer: widgets that take it too (OCFilter's "Фільтр"
   button) come earlier in the page, so the sheet, added last, covers them. */
.hc.hc-host > .hc-panel {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
}

.hc-host > .hc-panel::before {
  display: none;
}

.hc-host .hc-sheet-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--hc-line);
}

.hc-sheet-title {
  font-size: 17px;
  font-weight: 700;
}

.hc-sheet-head .hc-note {
  flex: 1 1 auto;
}

.hc-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
}

.hc-close svg {
  width: 22px;
  height: 22px;
}

/* ... the phones: everything under the head scrolls */
.hc-host .hc-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hc-host .hc-city {
  padding: 7px 8px;
  font-size: 15px;
}

.hc-host .hc-city.is-town {
  font-size: 14px;
}

/* ... the salons: the cities as a row of tabs, the salons of the chosen one under it */
.hc-host .hc-shops {
  flex: 1 1 auto;
  flex-direction: column;
  height: auto;
  min-height: 0;
}

.hc-host .hc-rail {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  padding: 10px 16px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  border-radius: 0;
  scrollbar-width: none;
}

/* A thin orange bar under the tabs shows that the row scrolls and how much of it is in view (a
   phone's own scroll bar shows only while scrolling and takes no colour) */
.hc-host .hc-rail-track {
  display: block;
  flex: 0 0 auto;
  position: relative;
  height: 3px;
  margin: 0 16px 8px;
  background: var(--hc-line);
  border-radius: 3px;
}

.hc-host .hc-rail-track.is-full {
  visibility: hidden;
}

.hc-rail-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--hc-accent);
  border-radius: 3px;
}

.hc-host .hc-panes {
  border-top: 1px solid var(--hc-line);
}

.hc-host .hc-rail::-webkit-scrollbar {
  display: none;
}

.hc-host .hc-rail li {
  flex: 0 0 auto;
}

.hc-host .hc-rail-city,
.hc-host .hc-rail-city.is-town {
  padding: 6px 8px 6px 12px;
  font-size: 14px;
  white-space: nowrap;
  border: 1px solid var(--hc-line);
  border-radius: 999px;
}

.hc-host .hc-rail-city.is-active {
  color: #fff;
  background: var(--hc-accent);
  border-color: var(--hc-accent);
  box-shadow: none;
}

.hc-host .hc-count {
  background: var(--hc-soft);
}

.hc-host .hc-rail-city.is-active .hc-count {
  color: var(--hc-accent);
  background: #fff;
}

.hc-host .hc-panes {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px;
}

.hc-host .hc-shop {
  font-size: 14px;
}

.hc-host .hc-more {
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 16px;
  text-align: center;
}

/* Narrow sheets: one column of cities and of salons */
@media (max-width: 575px) {
  .hc-host .hc-panel-top {
    flex-direction: column;
  }

  .hc-host .hc-cities {
    columns: 1;
  }

  .hc-host .hc-shop-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A copy of the phones block in the menu drawer: the panel opens in place under the city line,
   without the number and the messengers the block already shows */
.dmenu-drawer .hc--phones .hc-panel {
  position: static;
  width: auto;
  max-width: none;
  max-height: none;
  overflow: visible;
  margin: 10px 0 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.dmenu-drawer .hc--phones .hc-sheet-head,
.dmenu-drawer .hc--phones .hc-panel-free .hc-phone,
.dmenu-drawer .hc--phones .hc-panel-free .hc-note,
.dmenu-drawer .hc--phones .hc-panel-messengers {
  display: none;
}

.dmenu-drawer .hc--phones .hc-panel-top {
  margin-bottom: 10px;
  padding-bottom: 0;
  border-bottom: 0;
}

.dmenu-drawer .hc--phones .hc-hours {
  margin-top: 0;
}

.dmenu-drawer .hc--phones .hc-cities {
  columns: 1;
}

.dmenu-drawer .hc--phones .hc-sheet-body {
  padding: 0;
  overflow: visible;
}

/* ... and without "Усі контакти" (the drawer has its own links) */
.dmenu-drawer .hc--phones .hc-more {
  display: none;
}

/* Narrow places - the drawer and the sheet: a long city name breaks at its hyphen
   (Івано-/Франківськ), the phone stays whole */
.dmenu-drawer .hc-city span,
.hc-host .hc-city span {
  min-width: 0;
  white-space: normal;
}

.dmenu-drawer .hc--phones .hc-city {
  padding: 6px 8px;
  font-size: 14px;
}

/* The page under the open sheet does not scroll */
html.hc-locked,
html.hc-locked body {
  overflow: hidden;
}