/* One header for the portal and the catalog (batch 18, 03.10.2026, №136, UX-07/UX-10): logo, one search entry, the
   five sections, language, menu. Wide screens: everything in one row. Below 1240 px the sections take a second row on
   portal pages; catalog pages keep their category row instead and have the sections in the menu (as before).
   Phones: logo, the search button (the search dialog is the search entry there) and the menu. */
.site-header{position:relative;z-index:1100;display:flex;flex-wrap:nowrap;align-items:center;gap:20px;height:auto;min-height:64px;max-width:none;margin:0;padding:8px 40px;border-bottom:1px solid var(--c-line);background:var(--c-surface);box-sizing:border-box}
.site-header>.logo{flex-shrink:0;font-size:29px;font-weight:700;letter-spacing:-1.5px;line-height:1.1;white-space:nowrap;color:var(--c-ink)}
.site-header>.logo:hover{color:var(--c-ink)}
.site-header .header-search{flex:1 1 320px;min-width:0;max-width:540px;width:auto;margin:0}
.site-header .search{display:flex;align-items:center;gap:0;max-width:none;margin:0;padding:3px;border:1px solid var(--c-line-strong);border-radius:var(--r-pill);background:var(--c-surface)}
.site-header .search:focus-within{border-color:var(--c-primary-line)}
.site-header .search label{display:flex;flex-direction:column;min-width:0;padding:0 12px}
.site-header .search .search-field{flex:1 1 auto}
.site-header .search input{width:100%;padding:6px 0;border:0;background:transparent;font-size:var(--fs-ui);color:var(--c-ink)}
.site-header .header-search .city-field{display:flex;flex-direction:row;align-items:center;flex:0 0 150px;width:150px;padding:0 8px;border:1px solid var(--c-primary-line);border-radius:var(--r-pill);background:var(--c-primary-soft)}
.site-header .header-search .city-field select{width:100%;min-height:30px;padding:0;border:0;background:transparent;font-size:var(--fs-sm);color:var(--c-ink);cursor:pointer}
.site-header .search button{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;min-height:0;margin:0 0 0 4px;padding:0;border:0;border-radius:50%;background:var(--c-primary);color:var(--c-on-primary)}
.site-header .search button:hover{background:var(--c-primary-strong);color:var(--c-on-primary)}
.site-header .portal-nav{display:flex;align-items:center;flex-wrap:nowrap;gap:24px;margin:0 0 0 auto;padding:0;border:0;overflow:visible;font-size:var(--fs-base);font-weight:500;-webkit-mask-image:none;mask-image:none}
.site-header .portal-nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:0;color:var(--c-text);font-weight:500;white-space:nowrap;text-decoration:none}
.site-header .portal-nav a:hover,.site-header .portal-nav a[aria-current=page]{color:var(--c-primary)}
.site-header .portal-nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:1px;background:var(--c-primary)}
.site-header .language-switch{flex-shrink:0;margin:0}
.site-header .header-search-button{display:none}
.site-header .account-menu-button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:0;margin:0;padding:0;border:0;border-radius:var(--r-md);background:transparent;color:var(--c-primary)}
.site-header .header-search-button:hover,.site-header .account-menu-button:hover{background:var(--c-primary-soft);color:var(--c-primary)}
.site-header :is(a,button,input,select):focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.site-header .search input:focus-visible,.site-header .header-search .city-field select:focus-visible{outline:0}
.site-header .search:has(input:focus-visible),.site-header .header-search .city-field:has(select:focus-visible){outline:3px solid var(--c-primary);outline-offset:2px}
/* The menu lists the five sections on every page, one per row like the account links below them. */
.account-drawer .drawer-primary{display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;margin:20px 0 0;padding:0 0 12px;border-bottom:1px solid var(--c-line)}
.account-drawer .drawer-primary a{display:flex;align-items:center;min-height:48px;padding:10px 0;font-size:var(--fs-lg);color:var(--c-ink)}
.account-drawer .drawer-primary a[aria-current]{color:var(--c-primary)}
@media(max-width:1239px){
 .site-header{flex-wrap:wrap;row-gap:0;padding:8px 24px}
 .site-header>.logo{order:1}
 .site-header .header-search{order:2;flex:1 1 280px}
 .site-header .language-switch{order:3}
 .site-header .header-search-button{order:4}
 .site-header .account-menu-button{order:5}
 .site-header .portal-nav{order:6;flex:1 1 100%;margin:0;gap:28px}
 .catalog-site .site-header .portal-nav{display:none}
}
@media(max-width:700px){
 .site-header{gap:4px;min-height:56px;padding:6px 12px 0 16px}
 .catalog-site .site-header{padding-bottom:6px}
 .site-header>.logo{margin-right:auto;font-size:25px}
 .site-header .header-search,.site-header .language-switch{display:none}
 .site-header .header-search-button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:0;margin:0;padding:0;border:0;border-radius:var(--r-md);background:transparent;color:var(--c-primary)}
 .site-header .portal-nav{gap:26px;margin:0 -12px 0 -16px;padding:0 28px 0 16px;overflow-x:auto;scrollbar-width:none;font-size:var(--fs-base);border-top:1px solid var(--c-line);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
 .site-header .portal-nav::-webkit-scrollbar{display:none}
 .site-header .portal-nav a{min-height:48px}
 .site-header .portal-nav a[aria-current=page]::after{bottom:0}
}
@media(max-width:359px){.site-header>.logo{font-size:23px}.site-header .portal-nav{gap:20px;font-size:var(--fs-ui)}}

/* Search in the middle of the header (owner request 02.10.2026, «пошук по центру»). From 1240 px the header is three
   columns with equal sides, so the search field sits in the centre of the page. From 1880 px the sections, language and
   menu share the right column (all in one row; the Russian sections fit from 1869 px). 1240–1879 px: the right column
   keeps language and menu, the sections take a centred row of their own on portal pages; catalog pages have the
   category row and keep the sections in the menu, as below 1240 px. Below 1240 px nothing changes (the wrappers are
   display:contents there). */
.site-header .header-end,.site-header .header-tools{display:contents}
@media(min-width:1240px){
 .site-header{display:grid;grid-template-columns:1fr minmax(360px,520px) 1fr;align-items:center;column-gap:24px;row-gap:0}
 .site-header>.logo{grid-column:1;grid-row:1;justify-self:start}
 .site-header .header-search{grid-column:2;grid-row:1;width:100%;max-width:none;flex:none}
 .site-header .header-tools{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:12px}
 .site-header .portal-nav{grid-column:1/-1;grid-row:2;justify-content:center;margin:0;gap:28px}
 .catalog-site .site-header .portal-nav{display:none}
}
@media(min-width:1880px){
 /* Both sides are at least as wide as the sections + language + menu (measured 638 px uk, 659 px ru with the web
    font), so the search narrows (down to 360 px) instead of moving off-centre on 1880–1990 px screens. */
 .site-header{--hdr-side:650px;grid-template-columns:minmax(var(--hdr-side),1fr) minmax(360px,520px) 1fr}
 html[lang="ru"] .site-header{--hdr-side:672px}
 .site-header .header-end{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;justify-content:flex-end;gap:20px;min-width:var(--hdr-side);white-space:nowrap}
 .site-header .header-tools{grid-column:auto;grid-row:auto}
 .site-header .portal-nav,.catalog-site .site-header .portal-nav{display:flex;grid-column:auto;grid-row:auto;gap:20px}
}