/* Shared controls, with Christmas microphone placement kept in its own stylesheet. */
html {
  --collecto-header-inset: max(16px, calc(var(--theme-gutter, var(--christmas-gutter, 0px)) + 4px));
  --collecto-toolbar-top: 22px;
}

body:has(> header, .site-header) .collecto-nav-controls {
  right: var(--collecto-header-inset) !important;
}

html:not([data-collecto-skin="christmas"]) body #collectoVoice {
  position: absolute;
  inset: var(--collecto-toolbar-top) calc(var(--collecto-header-inset) + 101px) auto auto;
}

html:not([data-collecto-skin="christmas"]) body #collectoVoicePanel {
  inset: 52px -101px auto auto;
  width: min(350px, calc(100vw - 32px));
}

html:not([data-collecto-skin="christmas"]) body #collectoVoiceToggle {
  font-size: 0 !important;
}

html:not([data-collecto-skin="christmas"]) body #collectoVoiceToggle::before {
  content: '';
  width: 25px;
  height: 25px;
  background: url('/assets/skins/voice-silver.svg') center / contain no-repeat;
}

html body :is(header, .site-header) .top-actions:has(:is(#siteLanguage, select[data-site-language])) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
}

html body :is(label.site-language, label.language-picker):has(:is(#siteLanguage, select[data-site-language])) {
  display: inline-flex !important;
  justify-content: center;
  width: fit-content !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body :is(#siteLanguage, select[data-site-language]) {
  background-image: url('/assets/skins/language-globe.webp') !important;
  background-repeat: no-repeat !important;
  background-size: 22px 22px !important;
  background-position: left 8px center !important;
  padding-inline: 35px 14px !important;
}

html[dir="rtl"] body :is(#siteLanguage, select[data-site-language]) {
  background-position: right 8px center !important;
}

@media (min-width: 701px) {
  html:not([data-collecto-skin]) body > header:has(> .top-actions) > .top-actions {
    margin-right: 142px;
  }
}

@media (max-width: 700px) {
  html { --collecto-toolbar-top: 24px; }
  html:not([data-collecto-skin]) body:not(:has(> header, .site-header)) > .season-shell {
    padding-top: 60px;
  }
  html[data-collecto-skin]:not([data-collecto-skin="christmas"]) {
    --collecto-toolbar-top: 75px;
  }
  html[data-collecto-skin]:not([data-collecto-skin="christmas"]) body:not(:has(> header, .site-header)) {
    --collecto-toolbar-top: 38px;
  }
  html:not([data-collecto-skin="christmas"]) body #collectoVoice {
    inset: var(--collecto-toolbar-top) calc(var(--collecto-header-inset) + 100px) auto auto;
  }
  html:not([data-collecto-skin="christmas"]) body #collectoVoiceToggle {
    width: 42px;
    height: 42px;
    min-height: 42px;
  }
  html:not([data-collecto-skin="christmas"]) body #collectoVoicePanel {
    inset: 50px -100px auto auto;
  }
}

@media (max-width: 650px) {
  html[data-collecto-skin="christmas"] {
    --collecto-header-inset: max(19px, calc(var(--christmas-gutter) + 1px));
  }
  html[data-collecto-skin="christmas"] body:has(> header, .site-header) .collecto-nav-controls {
    gap: clamp(0px, calc(115px - 84px - var(--collecto-header-inset)), 8px) !important;
  }
}