/* Storefront shell: the single source for the header, footer and page container.
   Loaded on every storefront page; page stylesheets style only their <main>. */
.storefront {
  --storefront-wrap: min(1340px, calc(100% - 72px));
}

.storefront .wrap {
  width: var(--storefront-wrap);
}

/* A solid header with no backdrop-filter: Safari 26 tints the bars around the page
   from the background-color and backdrop-filter of a stuck top element. The blur
   added nothing anyway, as the background is opaque. */
.storefront header {
  position: sticky;
  z-index: 10;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: none;
  isolation: isolate;
}

/* Telegram's iOS in-app browser lets the scrolled page paint above its web view, behind
   its own controls, and WebKit clips the sticky header to the web view, so the header
   cannot cover that strip (Telegram-iOS issue #2347). There (html.telegram-browser, set
   in the layout) the page scrolls inside <body>, which clips its content to the web view.
   The document itself never scrolls, so Telegram's bar stays expanded. */
html.telegram-browser {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html.telegram-browser body {
  position: fixed;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  scroll-behavior: smooth;
  scroll-padding-top: var(--storefront-anchor-offset);
}

html.telegram-browser.panel-is-open body {
  overflow: hidden;
}

.storefront .header {
  height: 72px;
  align-items: center;
  gap: 48px;
}

.storefront .logo-image {
  display: block;
  height: 26px;
}

.storefront .header nav {
  align-items: center;
  align-self: center;
  gap: 28px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1;
  transform: translateY(-1px);
}

.storefront .header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.storefront .header-tools {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.storefront .header .icon-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
}

.storefront .logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;

  /* Оптическая компенсация: флажок `f` занимает верхние ~31% SVG, центр
     основного тела (orma) ниже центра бокса. */
  transform: translateY(-4px);
}

.storefront footer {
  margin-top: 30px;
  border-top: 1px solid var(--line);
}

.storefront footer .footer-main {
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, .9fr)) minmax(0, 1fr);
  gap: 32px;
  padding: 42px 0 36px;
}

.storefront .footer-brand,
.storefront .footer-column,
.storefront .footer-contact {
  min-width: 0;
}

.storefront .footer-brand {
  align-self: start;
}

.storefront .footer-nav {
  display: grid;
  gap: 2px;
}

.storefront .footer-nav a,
.storefront .footer-contact > a {
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.storefront .footer-contact {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.storefront .footer-contact > .footer-small {
  margin: 12px 0 0;
  font-size: 11px;
}

.storefront .footer-bottom {
  padding: 15px 0 18px;
}

@media (max-width: 1100px) {
  .storefront {
    --storefront-wrap: calc(100% - 56px);
  }

  .storefront .header {
    gap: 30px;
  }

  .storefront .header nav {
    gap: 18px;
    font-size: 12px;
  }
}

@media (max-width: 760px) {
  .storefront {
    --storefront-wrap: calc(100% - 32px);
  }

  .storefront .header {
    height: 64px;
    gap: 12px;
  }

  .storefront .logo-image {
    height: 24px;
  }

  .storefront .header-tools {
    gap: 0;
  }

  .storefront .header-tools .icon-btn {
    min-width: 38px;
    min-height: 38px;
  }

  .storefront .header-tools .icon-btn:nth-child(2) {
    display: inline-flex;
  }

  .storefront footer {
    margin-top: 26px;
  }

  .storefront footer .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 22px;
    padding: 31px 0 28px;
  }

  .storefront .footer-brand {
    grid-column: 1 / -1;
  }

  .storefront .footer-catalog,
  .storefront .footer-buyers {
    order: 0;
  }

  .storefront .footer-nav a,
  .storefront .footer-contact > a {
    min-height: 44px;
    font-size: 14px;
  }

  .storefront .footer-contact {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }

  .storefront .footer-contact > h3,
  .storefront .footer-contact > .footer-small {
    grid-column: 1 / -1;
  }

  .storefront .footer-contact > h3 {
    margin-bottom: 6px;
  }

  .storefront .footer-contact > .footer-small {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
  }

  .storefront .footer-bottom {
    display: grid;
    grid-template-areas: "copyright privacy";
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 20px;
    align-items: center;
    padding: 16px 0 max(24px, env(safe-area-inset-bottom));
    font-size: 12px;
  }

  .storefront .footer-copyright {
    grid-area: copyright;
  }

  .storefront .footer-bottom .footer-link {
    grid-area: privacy;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    margin: 0;
    font-size: 12px;
  }
}

/* Text for screen readers and search engines that the layout does not show. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}