:root {
  --header-control-height: 44px;
}

@media (max-width: 768px) {
  :root {
    --header-height: calc(56px + env(safe-area-inset-top));
    --header-control-height: 40px;
  }

  header {
    padding-top: env(safe-area-inset-top);
  }

  .container {
    width: min(1180px, calc(100% - 20px));
  }

  .topbar {
    padding: var(--s3) 0;
    gap: var(--s3);
  }

  .brand {
    min-width: 0;
    flex: 1 1 auto;
    gap: var(--s3);
  }

  .brand h1 {
    font-size: var(--fs-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand small {
    display: none;
  }

  .mark {
    width: 32px;
    height: 32px;
    border-radius: var(--r1);
    flex-shrink: 0;
  }

  .actions {
    min-width: 0;
    gap: var(--s2);
    flex-shrink: 0;
  }

  .lang-switcher__select {
    width: clamp(74px, 22vw, 96px);
    padding: 0 var(--s4);
  }

  #cartBtn {
    padding: 0 var(--s5);
    gap: var(--s2);
  }

  #cartBtn > span:nth-child(2) {
    display: none;
  }

  #cartBtn .badge {
    min-width: 20px;
    height: 20px;
    font-size: var(--fs-xs);
  }
}

@media (max-width: 400px) {
  .lang-switcher__select {
    width: clamp(68px, 20vw, 82px);
    padding: 0 var(--s3);
  }

  #cartBtn {
    padding: 0 var(--s4);
  }
}