/* Shared header chrome + the phone menu sheet.
   Desktop keeps the full nav; phones get: logo · cart · menu. */

/* Keep the page from shifting sideways: always reserve the scrollbar gutter, and
   never let a stray element make the page draggable left/right.
   (clip, not hidden — hidden would break position:sticky inside the page.) */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter: stable){ html{overflow-y:scroll} }
#page,#app{overflow-x:clip}
@supports not (overflow-x: clip){ #page,#app{overflow-x:hidden} }

/* one calm accent for the whole site — solid, never a gradient */
[data-lk]{--lk-ok:#12B981;--lk-okTint:rgba(18,185,129,.11);--lk-okLine:rgba(18,185,129,.5);
  --lk-cta:#12B981;--lk-ctaFg:#04231A;--lk-ctaHov:#16C88C}
[data-lk="light"]{--lk-ok:#0E9C74;--lk-okTint:rgba(14,156,116,.10);--lk-okLine:rgba(14,156,116,.45);
  --lk-cta:#0E9C74;--lk-ctaFg:#FFFFFF;--lk-ctaHov:#0BAF80}

/* the single coloured button of the site */
.ctaBtn{background:var(--lk-cta)!important;color:var(--lk-ctaFg)!important;border:none!important;
  box-shadow:none;transition:background .15s ease}
.ctaBtn:hover{background:var(--lk-ctaHov)!important}


/* ---- language picker (same markup in the app and the server-rendered pages) ---- */
.langWrap{position:relative;display:inline-flex}
.langBack{position:fixed;inset:0;z-index:60}
.langMenu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:61;min-width:186px;
  background:var(--lk-elev,#131926);border:1px solid var(--lk-line2);border-radius:14px;padding:6px;
  box-shadow:0 20px 46px rgba(4,7,12,.5);display:flex;flex-direction:column;gap:2px}
.langMenu .langOpt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:10px 12px;border:none;border-radius:10px;background:transparent;color:var(--lk-text2);
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:start}
.langMenu .langOpt:hover{background:var(--lk-surface);color:var(--lk-text)}
.langMenu .langOpt.on{color:var(--lk-ok);background:var(--lk-okTint)}
.langMenu .langCode{font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--lk-dim2)}
.chev{flex:0 0 auto;opacity:.75;transition:transform .16s ease}
.chev.up{transform:rotate(180deg)}
/* phone sheet: the language row behaves like the desktop picker — tap to expand */
.msheet .mrow button.mlangBtn.open{border-color:var(--lk-line3);color:var(--lk-text)}
.mlangs{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.mlangs button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:13px 14px;border-radius:12px;border:1px solid transparent;background:var(--lk-surface);
  color:var(--lk-text2);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;text-align:start}
.mlangs button.on{border-color:var(--lk-okLine);color:var(--lk-ok);background:var(--lk-okTint)}

.hnav{display:flex;align-items:center;margin-inline-start:6px}
/* the secondary links (guide, support) step aside before the bar gets crowded —
   they are still one tap away in the menu sheet */
@media (max-width:1060px){ .hidesm{display:none!important} }
.menuBtn{display:none!important}
.msheet{display:none}

@media (max-width:900px){
  /* one clean row: logo, cart, menu — everything else lives in the sheet */
  .hdr .wrap.hrow{padding-top:9px!important;padding-bottom:9px!important;min-height:0!important;
    gap:8px!important;flex-wrap:nowrap!important}
  .hnav{display:none!important}
  .hspace{display:block!important;flex:1}
  .hactions{margin-inline-start:auto;gap:8px!important;flex-wrap:nowrap!important}
  .hactions .onlyBig{display:none!important}
  .cartLabel{display:none}
  .menuBtn{display:inline-flex!important}
  .dotcom{display:none!important}
}


/* ---- floating support button ----
   One quiet capsule: the Telegram glyph plus a status word. At rest it borrows the
   page's own hairline styling; on hover it becomes Telegram blue and the word
   changes from the status (Online) to where the click goes (Telegram). */
.lkSup{position:fixed;inset-inline-end:22px;bottom:22px;z-index:80;
  display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 17px;border-radius:99px;
  text-decoration:none;font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:.1px;
  color:var(--lk-text2,#CBD2E0);
  background:var(--lk-elev,rgba(19,25,38,.82));
  border:1px solid var(--lk-line2,rgba(255,255,255,.12));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 6px 20px rgba(4,10,20,.28);
  -webkit-tap-highlight-color:transparent;
  transition:transform .32s cubic-bezier(.2,.8,.3,1),background .3s ease,border-color .3s ease,
             color .3s ease,box-shadow .32s ease}

/* it cannot read the page's theme variables from <body>, so it mirrors them */
.lkSup[data-theme="light"]{color:#2C3444;background:rgba(255,255,255,.9);
  border-color:rgba(16,21,30,.13);box-shadow:0 6px 20px rgba(16,21,30,.13)}

.lkSupIco{display:inline-flex;color:#2AABEE;transition:color .3s ease,transform .5s cubic-bezier(.4,0,.2,1)}

/* the two words share one cell, so the capsule never resizes */
.lkSupWords{display:inline-grid;line-height:1;overflow:hidden;height:13px}
.lkSupWords>span{grid-area:1/1;white-space:nowrap;
  transition:transform .34s cubic-bezier(.2,.85,.3,1),opacity .26s ease}
.lkSupWords .w2{transform:translateY(13px);opacity:0}

.lkSup:hover,.lkSup:focus-visible{
  transform:translateY(-3px);color:#fff;border-color:transparent;
  background:linear-gradient(145deg,#2AABEE,#229ED9);
  box-shadow:0 14px 30px rgba(34,158,217,.38)}
.lkSup:hover .lkSupIco,.lkSup:focus-visible .lkSupIco{color:#fff;transform:translate(2px,-2px)}
.lkSup:hover .lkSupWords .w1,.lkSup:focus-visible .lkSupWords .w1{transform:translateY(-13px);opacity:0}
.lkSup:hover .lkSupWords .w2,.lkSup:focus-visible .lkSupWords .w2{transform:translateY(0);opacity:1}
.lkSup:active{transform:translateY(-1px) scale(.98)}

@media (max-width:640px){
  .lkSup{inset-inline-end:15px;bottom:calc(15px + env(safe-area-inset-bottom));
    height:40px;padding:0 15px;gap:8px;font-size:12px}
  .lkSup.lkSupUp{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .lkSup,.lkSupIco,.lkSupWords>span{transition:none}
}

/* ---- the sheet ---- */
.msheet.open{display:block;position:fixed;inset:0;z-index:95;background:rgba(4,6,10,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.msheet .mpanel{position:absolute;top:0;left:0;right:0;background:var(--lk-elev,#131926);
  border-bottom:1px solid var(--lk-line2);border-radius:0 0 22px 22px;
  padding:10px 14px calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 26px 70px rgba(0,0,0,.55);animation:mSheetIn .18s ease-out;
  max-height:92vh;overflow-y:auto}
@keyframes mSheetIn{from{transform:translateY(-14px);opacity:.3}to{transform:none;opacity:1}}

.msheet .mtop{display:flex;align-items:center;gap:10px;padding:6px 4px 12px;
  border-bottom:1px solid var(--lk-line)}
.msheet .mtop .mname{font-weight:700;font-size:15px;color:var(--lk-text)}
.msheet .mtop .mmail{font-size:12px;color:var(--lk-dim2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msheet .mava{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#39424F,#141A24);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:0 0 auto}
.msheet .mclose{margin-inline-start:auto;width:34px;height:34px;border-radius:11px;border:1px solid var(--lk-line2);
  background:var(--lk-surface);color:var(--lk-dim);font-size:19px;line-height:1;cursor:pointer;flex:0 0 auto}

.msheet .mlink{display:flex;align-items:center;gap:12px;padding:14px 10px;border-radius:13px;
  color:var(--lk-text);font-size:15.5px;font-weight:600;text-decoration:none}
.msheet .mlink:active{background:var(--lk-surface)}
.msheet .mlink .mval{margin-inline-start:auto;color:var(--lk-dim);font-size:13.5px;font-weight:700}
.msheet .mrow{display:flex;gap:10px;margin-top:12px;padding-top:14px;border-top:1px solid var(--lk-line)}
.msheet .mrow button,.msheet .mrow a{flex:1;height:44px;border-radius:13px;border:1px solid var(--lk-line2);
  background:var(--lk-surface);color:var(--lk-text2);font-size:13.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-family:inherit}
.msheet .msignin{display:flex;align-items:center;justify-content:center;height:46px;border-radius:13px;
  background:var(--lk-acc);color:var(--lk-accFg);font-weight:800;font-size:14.5px;border:none;width:100%;
  cursor:pointer;font-family:inherit;margin-top:4px}