/* ============================================================================
   Site header (flyer style) — shared by BOTH layouts (app + home-redesign).
   Self-contained: does NOT depend on Bootstrap or app.css. Hand-edited (no SCSS
   source — like tt.css / bbnew.css / home-redesign.css). Namespaced `sh-` to
   avoid clashes with the legacy header (app.css) and the flyer page (hr-*).
   ============================================================================ */

.sh-topbar{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(160%) blur(8px);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid #e2ebe6;
  font-family:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.sh-topbar *{box-sizing:border-box;}
.sh-inner{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 16px;
}
/* brand may shrink (min-width:0) so the actions never get pushed off-screen */
.sh-brand{display:flex;align-items:center;gap:9px;flex:0 1 auto;min-width:0;text-decoration:none;}
.sh-logo{height:40px;width:auto;display:block;flex:0 0 auto;}
.sh-word{font-weight:900;font-size:21px;line-height:1;letter-spacing:.2px;color:#15583c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sh-word-tld{color:#1f9d63;}

/* actions (lang + burger) never shrink and stay fully visible at the right edge */
.sh-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.sh-lang{display:flex;gap:2px;background:#e8f4ee;border-radius:999px;padding:3px;}
.sh-lang a{font-size:12px;font-weight:800;text-decoration:none;color:#5f7268;padding:5px 9px;border-radius:999px;line-height:1;}
.sh-lang a.active{background:#fff;color:#15583c;box-shadow:0 1px 3px rgba(0,0,0,.08);}

.sh-burger{
  width:42px;height:42px;border:1px solid #e2ebe6;border-radius:11px;background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;padding:0;
}
.sh-burger span,.sh-burger span::before,.sh-burger span::after{
  content:"";display:block;width:18px;height:2px;background:#10251a;border-radius:2px;position:relative;
}
.sh-burger span::before{position:absolute;top:-6px;left:0;}
.sh-burger span::after{position:absolute;top:6px;left:0;}

/* ---- slide-in drawer (same on all breakpoints) ----
   z-index kept ABOVE the cookie-consent banner (z-index:100000 in app.css) and any
   other overlay, otherwise they cover the bottom rows of the open menu. Height uses
   dvh (falls back to vh) so the full menu fits with the mobile browser UI bars. */
.sh-drawer-overlay{position:fixed;inset:0;background:rgba(16,37,26,.45);opacity:0;visibility:hidden;transition:opacity .25s;z-index:100050;}
.sh-drawer-overlay.open{opacity:1;visibility:visible;}
.sh-drawer{
  position:fixed;top:0;right:0;width:88%;max-width:380px;background:#fff;z-index:100051;
  height:100vh;height:100dvh;
  transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:-12px 0 30px rgba(0,0,0,.18);
  font-family:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.sh-drawer *{box-sizing:border-box;}
.sh-drawer.open{transform:translateX(0);}
.sh-drawer svg{display:block;}

.sh-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #e2ebe6;}
.sh-drawer-title{font-weight:800;font-size:16px;color:#15583c;}
.sh-drawer-close{width:34px;height:34px;border:none;background:#e8f4ee;border-radius:10px;font-size:22px;line-height:1;color:#15583c;cursor:pointer;}

.sh-drawer-cat-label{display:flex;align-items:center;gap:8px;padding:14px 18px 12px;font-size:13px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#15583c;background:#e8f4ee;}

.sh-drawer-row{display:flex;align-items:center;gap:12px;padding:12px 18px;text-decoration:none;color:#10251a;border-bottom:1px solid #e2ebe6;font-size:15px;}
.sh-drawer-row:hover{background:#f6faf8;}
.sh-drawer-row .sh-thumb{width:40px;height:40px;flex:0 0 auto;border-radius:9px;background:#f1f6f3;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#15583c;}
.sh-drawer-row .sh-thumb img{max-width:100%;max-height:100%;object-fit:contain;}
.sh-drawer-row .sh-label{flex:1;font-weight:600;}
.sh-drawer-row.cat .sh-label{font-weight:700;}
.sh-drawer-row .sh-chev{flex:0 0 auto;color:#4cb98a;}
.sh-drawer-divider{height:8px;background:#e8f4ee;}
.sh-drawer-pages{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 16px);}
.sh-drawer-pages .sh-drawer-row .sh-label{color:#15583c;}

.sh-drawer-row.hygiene{background:#e8f4ee;}
.sh-drawer-row.hygiene .sh-thumb{background:#fff;color:#1f9d63;}
.sh-drawer-row.hygiene .sh-label{font-weight:800;color:#15583c;display:flex;flex-direction:column;gap:2px;}
.sh-drawer-row.hygiene .sh-label small{font-weight:600;font-size:11.5px;color:#5f7268;line-height:1.25;}

/* phones: shrink the wordmark so logo + PL EN RU + burger fit on one line */
@media (max-width:480px){
  .sh-word{font-size:16px;}
  .sh-logo{height:34px;}
  .sh-inner{padding:8px 12px;}
}
/* very narrow phones: drop the wordmark, keep the logo mark only */
@media (max-width:340px){
  .sh-word{display:none;}
  .sh-lang a{padding:5px 7px;}
}

/* MOBILE ONLY: on desktop (>=768px, Bootstrap md) the legacy header is shown instead. */
@media (min-width:768px){
  .sh-topbar,.sh-drawer,.sh-drawer-overlay{display:none !important;}
}