/* ============================================================================
   LAYOUT — the page shell: header, navigation, page heads, footer.
   ========================================================================= */

/* ---- header ------------------------------------------------------------ */
.site-head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);
           backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.head-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
            gap:var(--s-2) var(--s-4);padding-block:var(--s-2);min-height:var(--head-h)}

/* nowrap + inline-flex: the mark and the wordmark are one lockup, never two lines */
.brand{display:inline-flex;align-items:center;white-space:nowrap;
       font-weight:800;font-size:1.25rem;color:var(--navy);letter-spacing:var(--track-display)}
.brand:hover{text-decoration:none}
/* margin, not flex gap: gap would also space the wordmark's own spans apart */
.brand-mark{color:var(--red);display:inline-flex;align-items:center;margin-right:6px}
.brand-mark .i{width:1.15em;height:1.15em}
.brand-accent{color:var(--accent)}
.brand-us{color:var(--red);margin-left:2px}
.brand.small{font-size:1.05rem}
.head-inner .brand{margin-right:auto;flex:0 0 auto}

/* Two pills + wordmark + burger do not fit a 390px bar — they overlapped. Below 1100px the
   pickers move into the navigation sheet, where they get full-width rows. */
/* flex:0 0 auto + the wrapping bar above: when brand + pickers + nav do not fit one row (the uk
   labels need ~1380px of a 1140px bar), the nav drops to its own row. Before, the pickers shrank
   to 7px and "Україна"/"Українська" printed over "Каталог" on every uk desktop page. */
.pickers{display:flex;align-items:center;gap:var(--s-2);min-width:0;flex:0 0 auto}
.pickers-nav{display:none}
/* the pickers' own gap spaces them; the pill margin made da wrap by 32px */
.pickers-head .dest-picker{margin-right:0}

.nav{display:flex;gap:17px;align-items:center;flex-wrap:nowrap;margin-left:auto}
.nav a{color:var(--navy);font-weight:600;font-size:.94rem;white-space:nowrap;line-height:1.2}
.nav a.on{color:var(--red)}
.nav .cta{background:var(--red);color:#fff;padding:10px 16px;border-radius:var(--r-sm)}
.nav .cta:hover{background:var(--red-2);text-decoration:none}
.nav .nav-icon{display:inline-flex;align-items:center;gap:var(--s-1)}
/* flex:0 0 auto — the destination picker grew until it pushed the burger off a 390px screen */
.nav-toggle{display:none;flex:0 0 auto;background:none;border:0;line-height:1;
            color:var(--navy);cursor:pointer;padding:6px 8px}
.nav-toggle .i{width:26px;height:26px}
@media(min-width:1101px){.nav .nav-icon-txt{display:none}.nav .nav-icon .i{width:1.15em;height:1.15em}}

/* "Ship to" destination picker — sits between the wordmark and the nav */
.dest-picker{display:inline-flex;align-items:center;gap:var(--s-1);margin-right:var(--s-4);
             flex:0 1 auto;min-width:0;background:var(--paper-2);border:1px solid var(--line);
             border-radius:var(--r-pill);padding:4px 8px 4px 11px;cursor:pointer}
.dest-picker:hover{border-color:var(--navy)}
.dest-picker .i{color:var(--muted)}
.dest-picker select{border:0;background:transparent;font-weight:700;font-size:var(--t-sm);
                    color:var(--navy);font-family:inherit;cursor:pointer;padding:2px;max-width:140px}
.dest-picker select:focus{outline:none}
.lang-picker select{max-width:96px}

/* The bar holds six links + brand + destination picker down to ~1100px; below that it becomes
   a sheet. (It used to switch at 900px, so 900–1440 rendered a wrapped, clipped nav; at 1024 the
   destination pill still overlapped the wordmark.) */
@media(max-width:1100px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
       align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);
       box-shadow:var(--shadow);padding:var(--s-2) var(--s-5) var(--s-4);
       max-height:calc(100vh - var(--head-h));overflow-y:auto}
  .nav.open{display:flex}
  .nav a{padding:13px 4px;border-bottom:1px solid var(--line);font-size:var(--t-base)}
  .nav a:last-of-type{border-bottom:0}
  .nav .cta{text-align:center;margin-top:10px;padding:13px 16px}
  .nav .nav-icon{justify-content:flex-start}
  .pickers-head{display:none}
  .pickers-nav{display:grid;gap:var(--s-2);padding:var(--s-2) 0 var(--s-3);
               border-bottom:1px solid var(--line);margin-bottom:var(--s-1)}
  .pickers-nav .dest-picker{margin-right:0;justify-content:space-between;padding:10px 14px}
  .pickers-nav select{max-width:none;flex:1;text-align:right}
  body.nav-open::after{content:"";position:fixed;inset:var(--head-h) 0 0;
                       background:rgba(10,37,64,.35);z-index:25}
}

/* ---- page head (interior hero) ----------------------------------------- */
.page-head{position:relative;background:var(--navy);color:#fff;
           padding:var(--sec-y) 0;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;background:var(--lane);pointer-events:none}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
                  background:var(--lane-edge);pointer-events:none}
.page-head>*{position:relative}
.page-head h1{color:#fff;margin:0 0 .3em}
.page-head .lede{color:var(--on-dark)}
.page-head .lede a{color:#8ec5ff}

/* ---- footer ------------------------------------------------------------ */
.site-foot{background:var(--ink);color:#b9c7d6;padding:var(--s-9) 0 var(--s-7)}
/* was 2 columns with one long link stack and a dead middle — now a real 4-column sitemap */
.foot-inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s-7);align-items:start}
.site-foot .brand{color:#fff}
.foot-about .muted{max-width:34ch;margin:.6em 0 0}
.foot-col{display:grid;gap:9px;align-content:start}
.foot-col h3{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:var(--track-caps);
             color:var(--muted-2);margin:0 0 2px;font-weight:700}
.foot-col a,.foot-links a{color:#b9c7d6;font-size:.93rem}
.foot-col a:hover{color:#fff}
.foot-links{display:grid;gap:var(--s-2)}
.foot-inner .tiny{grid-column:1/-1;border-top:1px solid #24313f;padding-top:var(--s-4);
                  margin-top:var(--s-4);color:var(--muted-2)}
@media(max-width:900px){
  .foot-inner{grid-template-columns:1fr 1fr;gap:var(--s-6)}
  .foot-about{grid-column:1/-1}
}
@media(max-width:520px){.foot-inner{grid-template-columns:1fr}}

/* ---- shared section furniture ------------------------------------------ */
.section-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
              gap:var(--s-3);margin-bottom:var(--s-1)}
.section-head .section-title{text-align:left;margin:0}
.section-sub{color:var(--muted);margin:.2em 0 var(--s-6)}
.prose{padding:var(--sec-y) 0}
.crumbs{font-size:var(--t-sm);color:var(--muted);margin-bottom:var(--s-2)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs span{margin:0 5px;opacity:.6}