/* Shared header: a single action group, laid out by CSS at the 360px boundary. */
.hdr .hdr__in { gap:clamp(12px,1.6vw,26px); }
.hdr .hdr__nav { gap:18px; margin:0; flex:1; min-width:0; }
.hdr__links { display:flex; align-items:center; gap:8px; margin-right:auto; }
.hdr .hdr__links > a, .hdr .hdr__buy {
  display:flex; align-items:center; justify-content:center; min-height:44px;
  padding:10px 8px; color:#fff; border-radius:var(--r-md);
  font-size:1rem; line-height:1.25; font-weight:500; white-space:nowrap;
}
.hdr .hdr__links > a:hover, .hdr .hdr__buy:hover { background:#ffffff18; }
.hdr__actions { display:flex; align-items:center; gap:10px; flex:none; }
.hdr .hdr__demo { display:flex; margin:0; padding:10px 18px; width:auto; }
.lang-switch { position:relative; flex:none; font-size:1rem; color:#fff; }
.lang-switch__button {
  list-style:none; display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 12px; border:1px solid #ffffff50;
  border-radius:var(--r-md); font:inherit; font-weight:700; cursor:pointer;
  background:#ffffff0b; line-height:1.25; user-select:none;
}
.lang-switch__button::-webkit-details-marker { display:none; }
.lang-switch__button:hover, .lang-switch[open] > summary { background:#ffffff20; border-color:var(--lime); }
.lang-switch__button:active { background:#ffffff30; }
.lang-switch__chevron { width:7px; height:7px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:translateY(-2px) rotate(45deg); }
.lang-switch[open] .lang-switch__chevron { transform:translateY(2px) rotate(225deg); }
.lang-switch__menu {
  position:absolute; top:calc(100% + 8px); right:0; z-index:60; margin:0;
  padding:6px; width:168px; max-width:calc(100vw - 32px); list-style:none;
  background:#fff; color:var(--ink); border:1px solid #dcebe2; border-radius:12px;
  box-shadow:0 12px 32px #0003;
}
.lang-switch:not([open]) > .lang-switch__menu { display:none; }
.hdr .lang-switch__menu a {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  min-height:44px; padding:10px 12px; border-radius:8px; color:var(--ink);
  font-size:1rem; line-height:1.3; white-space:nowrap;
}
.hdr .lang-switch__menu a:hover { background:#edf8e7; }
.hdr .lang-switch__menu a[aria-current] { background:#e6f5d8; color:#125f20; font-weight:700; }
.hdr .lang-switch__menu :focus-visible { outline-color:#198d13; outline-offset:-2px; }
@media (min-width:901px) and (max-width:1100px) {
  .hdr .hdr__in { gap:12px; }
  .hdr .hdr__nav { gap:12px; }
  .hdr__links { gap:0; }
  .hdr .hdr__whatsapp { font-size:1rem; gap:6px; }
  .hdr .hdr__demo { padding-inline:12px; }
}
@media (min-width:361px) and (max-width:900px) {
  .hdr .hdr__in { display:grid; grid-template-columns:auto 1fr auto; gap:8px 12px; padding-block:10px; }
  .hdr .logo { grid-column:1; grid-row:1; }
  .hdr .hdr__whatsapp { grid-column:2; grid-row:1; justify-self:end; margin:0; }
  .hdr .burger { grid-column:3; grid-row:1; }
  .hdr .hdr__nav { display:contents; visibility:visible; opacity:1; transform:none; }
  .hdr .hdr__actions { grid-column:1/-1; grid-row:2; justify-content:center; gap:12px; }
  .hdr .hdr__links {
    display:none; position:fixed; inset:var(--header-height,118px) 0 auto;
    padding:12px max(16px,var(--gutter)) 20px; margin:0; flex-direction:column; align-items:stretch;
    background:var(--green-dark); box-shadow:var(--sh-deep);
    max-height:calc(100dvh - var(--header-height,118px)); overflow-y:auto;
  }
  body.is-menu .hdr .hdr__links { display:flex; }
  .hdr .hdr__links > a { justify-content:flex-start; font-size:1.125rem; }
  :root { --header-height:118px; }
}
@media (min-width:600px) and (max-width:900px) {
  .hdr .hdr__in { grid-template-columns:auto 1fr auto auto; }
  .hdr .hdr__actions { grid-column:2; grid-row:1; justify-self:end; gap:8px; }
  .hdr .hdr__whatsapp { grid-column:3; }
  .hdr .hdr__whatsapp span { display:none; }
  .hdr .hdr__whatsapp { width:44px; justify-content:center; }
  .hdr .burger { grid-column:4; }
  :root { --header-height:76px; }
}
@media (max-width:360px) {
  .hdr .hdr__in { gap:6px; }
  .hdr .logo { font-size:1.65rem; }
  .hdr .hdr__whatsapp { margin-left:auto; gap:4px; font-size:1rem; }
  .hdr .hdr__nav {
    display:none; position:fixed; inset:var(--header-height,76px) 0 auto;
    padding:12px 16px 20px; margin:0; flex-direction:column; align-items:stretch; gap:6px;
    visibility:visible; opacity:1; transform:none; max-height:calc(100dvh - var(--header-height,76px));
    overflow-y:auto; background:var(--green-dark);
  }
  body.is-menu .hdr .hdr__nav { display:flex; }
  .hdr .hdr__links { flex-direction:column; align-items:stretch; margin:0; gap:6px; }
  .hdr .hdr__links > a, .hdr .hdr__buy { justify-content:flex-start; font-size:1.125rem; }
  .hdr .hdr__actions { flex-direction:column; align-items:stretch; gap:8px; }
  .hdr .hdr__demo { display:flex; width:100%; }
  .lang-switch__button { justify-content:space-between; }
  .lang-switch__menu { position:static; width:100%; max-width:none; margin-top:8px; }
}
/* Translated labels must grow with their content. */
html:not([lang=ru]) .mock :is(.badge,.pill,.field),
html:not([lang=ru]) .ui--mini :is(.badge,.pill,.field) { white-space:normal; }
html:not([lang=ru]) .ui--mini :is(.ui__h,.ui__h--lg) { overflow-wrap:normal; }
html:not([lang=ru]) .product-demo .pcardui__docs em { overflow-wrap:anywhere; }
html:not([lang=ru]) .checkout-phone__submit { white-space:normal; }
/* A horizontal menu avoids breaking long navigation words in the small preview. */
html:not([lang=ru]) #advantages .clear-demo { grid-template-columns:minmax(0,1fr); }
html:not([lang=ru]) #advantages .clear-demo__sidebar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
html:not([lang=ru]) #advantages .clear-demo__menu { display:flex; flex-wrap:wrap; gap:4px; margin-top:0; }
html:not([lang=ru]) #advantages .clear-demo__nav { white-space:nowrap; }
/* Keep complete Kazakh navigation words together in the dashboard preview. */
html[lang=kk] .dash__nav { white-space:nowrap; }
@media (min-width:769px) {
  html[lang=kk] .dash__side, html[lang=kk] .dash--sm .dash__side { width:148px; }
}
@container (max-width:740px) {
  html[lang=kk] .mock .dash__side { width:100%; }
}
@container(max-width:250px) {
  html[lang=en] .invoice-lines .ptable__r:not(.ptable__r--total)>:nth-child(2)::after { content:' pcs.'; }
  html[lang=en] .invoice-lines .ptable__r:not(.ptable__r--total)>:nth-child(3)::before { content:'Price: '; }
  html[lang=en] .invoice-lines .ptable__r:not(.ptable__r--total)>b::before { content:'Amount:'; }
  html[lang=kk] .invoice-lines .ptable__r:not(.ptable__r--total)>:nth-child(2)::after { content:' дана'; }
  html[lang=kk] .invoice-lines .ptable__r:not(.ptable__r--total)>:nth-child(3)::before { content:'Баға: '; }
  html[lang=kk] .invoice-lines .ptable__r:not(.ptable__r--total)>b::before { content:'Сома:'; }
}