/* Public header: a compact, single-line navigation bar.
   It keeps the catalogue in view instead of spending the first screen on chrome. */
@media (min-width: 851px) {
  body:not(.is-tg-app) #main-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 56px;
    padding: 5px clamp(18px, 3vw, 48px);
    border-bottom-width: 2px;
    background: #20242c;
    box-shadow: 0 4px 14px rgba(28, 33, 42, .14);
  }

  body:not(.is-tg-app) #main-header .top-bar { display: contents; }
  body:not(.is-tg-app) #main-header .top-bar > :first-child {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    display: flex;
    align-items: center;
  }
  body:not(.is-tg-app) #main-header .logo {
    display: block;
    width: 42px;
    height: 34px;
    object-fit: cover;
    border-radius: 9px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .25);
  }
  body:not(.is-tg-app) #main-header .header-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    gap: 7px;
    min-width: max-content;
  }
  /* Language, currency, theme and account actions are one component on every
     public route.  Do not let a page-specific stylesheet turn one of them
     into plain text or a differently sized control. */
  body:not(.is-tg-app) #main-header .base-language-switch,
  body:not(.is-tg-app) #main-header .shared-language-switch,
  body:not(.is-tg-app) #main-header .currency-switch,
  body:not(.is-tg-app) #main-header .icon-btn,
  body:not(.is-tg-app) #main-header #user-badge {
    box-sizing:border-box;
    min-height:32px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    background:rgba(255,255,255,.10);
    color:#fff;
    font-weight:800;
  }
  body:not(.is-tg-app) #main-header .base-language-switch { display:flex; align-items:center; gap:5px; padding:0 12px; color:rgba(255,255,255,.52); font-size:11px; white-space:nowrap; }
  body:not(.is-tg-app) #main-header .base-language-switch a { color:rgba(255,255,255,.66); text-decoration:none; }
  body:not(.is-tg-app) #main-header .base-language-switch a[aria-current="true"] { color:#fff; }
  body:not(.is-tg-app) #main-header .shared-language-switch { display:flex; align-items:center; gap:5px; padding:0 12px !important; font-size:11px !important; }
  body:not(.is-tg-app) #main-header .shared-language-switch button { color:rgba(255,255,255,.66) !important; background:none !important; border:0 !important; font:inherit !important; padding:0 !important; cursor:pointer; }
  body:not(.is-tg-app) #main-header .shared-language-switch button.active { color:#fff !important; }
  body:not(.is-tg-app) #main-header .currency-switch { padding:0 28px 0 11px !important; outline:none; cursor:pointer; appearance:auto; }
  body:not(.is-tg-app) #main-header .currency-switch option { color:#171113; background:#fff; }
  body:not(.is-tg-app) #main-header #user-badge { display:inline-flex; align-items:center; padding:0 13px !important; }
  body:not(.is-tg-app) #main-header .desktop-nav {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 5px;
    max-width: none;
    margin: 0;
    min-width: 0;
    overflow: hidden;
  }
  body:not(.is-tg-app) #main-header .desktop-nav a {
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: rgba(255, 255, 255, .84);
    font-size: 11px;
    letter-spacing: .015em;
  }
  body:not(.is-tg-app) #main-header .desktop-nav a.active {
    border-color: rgba(230, 35, 35, .55);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(204, 0, 0, .22);
  }
  body:not(.is-tg-app) #main-header .desktop-nav a:hover:not(.active) {
    background: rgba(255,255,255,.09);
    color: #fff;
  }
  body:not(.is-tg-app) #main-header .header-actions .icon-btn { padding:0 11px; }
}

@media (min-width: 851px) and (max-width: 1170px) {
  body:not(.is-tg-app) #main-header { grid-template-columns: 68px auto 232px; padding-inline: 14px; }
  body:not(.is-tg-app) #main-header .logo { width: 38px; height: 32px; }
  body:not(.is-tg-app) #main-header .desktop-nav { gap: 2px; }
  body:not(.is-tg-app) #main-header .desktop-nav a { padding: 7px 8px; font-size: 10px; }
  body:not(.is-tg-app) #main-header .header-actions { gap: 4px; }
  body:not(.is-tg-app) #main-header #user-badge { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 9px !important; }
  body:not(.is-tg-app) #main-header .lang-switch { display: none !important; }
}


@media (max-width: 850px) {
  #main-header { padding-block: 7px; border-bottom-width: 2px; }
  #main-header .logo { height: 30px; width: 36px; object-fit: cover; border-radius: 8px; }
  #main-header .base-language-switch { display:flex; align-items:center; gap:3px; color:rgba(255,255,255,.65); font-size:11px; font-weight:800; white-space:nowrap; }
  #main-header .base-language-switch a { color:rgba(255,255,255,.72); text-decoration:none; }
  #main-header .base-language-switch a[aria-current="true"] { color:#fff; }
}