/* Greys and greens are zalgiris.lt's own palette, so the shared furniture - header,
   footer, panels - matches the main site rather than sitting a few degrees bluer. */
:root {
  --zg-bg: #001009;
  --zg-bg-soft: #192721;
  --zg-bg-soft-hover: #22302a;
  --zg-border: rgba(255, 255, 255, 0.1);
  --zg-text: #ffffff;
  --zg-text-muted: #cccfce;
  --zg-text-faint: #9ca3af;
  --zg-text-dim: #66706b;
  --zg-accent: #b1ff29;
  --zg-accent-hover: #8ecc21;
  /* Text and icons on the bright brand surfaces - lime and green. White clears 4.5:1 on
     neither of them, this clears it on both. */
  --zg-ink: #001009;
  --zg-green: #1ca256;
  --zg-green-hover: #16803f;
  /* The chat launcher's own green. Its white label only clears AA under the large text
     rule, which the launcher meets by setting both of its lines in bold above 18.66px. */
  --zg-green-cta: #33a256;
  --zg-font: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  /* The sidebar cards read as one set: white at the top washing into the brand green,
     lifted off the page the way the panels on zalgiris.lt are. */
  --zg-card-surface: linear-gradient(
    160deg,
    #ffffff 0%,
    #ffffff 38%,
    rgba(28, 162, 86, 0.13) 100%
  );
  --zg-card-border: rgba(28, 162, 86, 0.18);
  --zg-card-shadow: 0 12px 24px -10px rgba(0, 16, 9, 0.22),
    0 3px 8px -6px rgba(0, 16, 9, 0.16);
}
html {
  font-family: var(--zg-font);
}
html,
body {
  overflow-x: clip;
}

/* Every page hangs its content off a flex item, and a flex item refuses to shrink
   below the widest thing inside it. One long unbreakable label was enough to push the
   column past a narrow phone, where overflow-x: clip then cut the right edge off the
   whole page. Releasing the floor keeps the column inside the viewport and leaves any
   genuinely wide element to deal with its own overflow. */
.container.flex > .mx-auto {
  min-width: 0;
}
html.zg-scroll-locked,
html.zg-scroll-locked body {
  overflow: hidden;
}

html.zg-scroll-locked body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}
.Error-page__main-section {
  background-image: linear-gradient(180deg, rgba(28, 162, 86, 0.08), rgba(28, 162, 86, 0) 60%) !important;
}
.zg-lang-switcher {
  position: relative;
}

.zg-lang-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 7.5rem;
  padding: 6px 8px;
  border-radius: 9999px;
  border: 1px solid var(--zg-border);
  background-color: transparent;
  color: var(--zg-text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.zg-lang-switcher__current {
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.zg-lang-switcher__toggle:hover {
  border-color: var(--zg-accent);
}

.zg-lang-switcher__toggle:focus-visible {
  outline: 2px solid var(--zg-accent);
  outline-offset: 2px;
}

.zg-lang-switcher__toggle[aria-expanded='true'] {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--zg-accent);
}

.zg-lang-switcher__chevron {
  color: var(--zg-text-faint);
  transform: rotate(90deg);
  transition: transform 0.15s ease-in-out;
  flex-shrink: 0;
}

.zg-lang-switcher__toggle[aria-expanded='true'] .zg-lang-switcher__chevron {
  transform: rotate(-90deg);
  color: var(--zg-text);
}
.zg-lang-switcher__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 160px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background-color: var(--zg-bg-soft);
  border: 1px solid var(--zg-border);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}
.zg-lang-switcher__option {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--zg-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

a.zg-lang-switcher__option:hover,
a.zg-lang-switcher__option:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--zg-text);
}

a.zg-lang-switcher__option:focus-visible {
  outline: 2px solid var(--zg-accent);
  outline-offset: -2px;
}

.zg-lang-switcher__option.is-current {
  color: var(--zg-text);
  font-weight: 700;
  cursor: default;
}
/* In the drawer the switcher is the width of the panel, sits at its foot and opens in the
   flow rather than over the links, so the menu never has two layers on a 320px-wide
   surface. The colours are the ones above: the drawer is dark now, like the header it
   slides out of. */
.zg-lang-switcher--sidebar {
  margin-top: auto;
  padding-top: 1.5rem;
}

.zg-lang-switcher--sidebar .zg-lang-switcher__toggle {
  max-width: none;
  width: 100%;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 1rem;
}

.zg-lang-switcher--sidebar .zg-lang-switcher__panel {
  position: static;
  margin-top: 8px;
  box-shadow: none;
}
.zg-locale-banner {
  flex-wrap: wrap;
}

.zg-locale-banner__text {
  margin: 0;
}

.zg-locale-banner__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.zg-locale-banner__cta {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 9999px;
  background-color: #1ca256;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
}

.zg-locale-banner__cta:hover,
.zg-locale-banner__cta:focus-visible {
  background-color: #054a29;
  color: #fff;
}

.zg-locale-banner__cta:focus-visible {
  outline: 2px solid #054a29;
  outline-offset: 2px;
}

.zg-locale-banner__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background-color: transparent;
  color: #1ca256;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.zg-locale-banner__dismiss:hover {
  background-color: rgba(28, 162, 86, 0.12);
}

.zg-locale-banner__dismiss:focus-visible {
  outline: 2px solid #1ca256;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .zg-locale-banner__text {
    flex-basis: 100%;
  }
}
.zg-header {
  background-color: var(--zg-bg) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Nothing is painted behind the page, so the browser's white canvas is what shows through
   any seam. Pinned to the top the header is a composited fixed layer, and on phones it
   lands on a fraction of a device pixel often enough that a hairline of that white showed
   above it. This is a solid block of the header's own colour sitting just above the header
   and travelling with it, so the seam has the header's colour behind it instead. It is
   only drawn while the header is pinned - the strip is off screen there, whereas in the
   flow it would cover the bottom of the locale banner that sits above the header. */
.js-header.sticky-nav .zg-header {
  box-shadow: 0 -16px 0 0 var(--zg-bg) !important;
}
.zg-header .container {
  max-width: 1440px !important;
}

.zg-header .text-tertiary {
  color: var(--zg-text) !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}
.zg-header a.js-localized-link-title:hover .text-tertiary,
.zg-header a.js-localized-link-title:focus-visible .text-tertiary {
  color: #b1ff29 !important;
}
.zg-header #header-hp-link:hover .text-tertiary,
.zg-header #header-hp-link:focus-visible .text-tertiary {
  color: #b1ff29 !important;
}
.zg-header .bg-tertiary {
  background-color: var(--zg-border) !important;
}

.zg-header .js-header-height > a#skip-to-main-content {
  background-color: #fff;
}
.zg-header #mobile-sidebar-open svg path {
  fill: var(--zg-accent) !important;
}

.zg-header #mobile-sidebar-open:hover svg path,
.zg-header #mobile-sidebar-open:active svg path {
  fill: var(--zg-accent-hover) !important;
}
.zg-header .js-logo {
  flex-shrink: 0;
  gap: 0.75rem !important;
}

.zg-header__nav {
  display: none;
}

.zg-header .zg-header__desktop-actions {
  display: none !important;
  position: static !important;
  opacity: 1 !important;
  bottom: auto !important;
}

.zg-header .zg-header__mobile-actions {
  display: flex !important;
  position: static !important;
  opacity: 1 !important;
  bottom: auto !important;
}
.zg-header .zg-header__mobile-actions .Toggle {
  display: flex !important;
}

@media (min-width: 1440px) {
  .zg-header nav[aria-label='Main Menu'] {
    justify-content: center;
  }

  .zg-header__nav {
    display: flex;
    align-items: center;
    margin-inline-start: 1rem;
    margin-inline-end: 2rem;
  }

  .zg-header .zg-header__desktop-actions {
    display: flex !important;
    flex-grow: 0 !important;
  }

  .zg-header .zg-header__mobile-actions {
    display: none !important;
  }

  .zg-header .zg-header__mobile-actions .Toggle {
    display: none !important;
  }
}

/* Direct child only: the dropdown panels are lists inside this nav too, and they stack. */
.zg-header__nav > ul {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zg-header__nav a {
  color: var(--zg-text);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.zg-header__nav a:hover {
  color: var(--zg-accent);
}

.zg-header__nav-group {
  position: relative;
}

.zg-header__nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--zg-text);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
  white-space: nowrap;
  cursor: pointer;
}

.zg-header__nav-group.is-open .zg-header__nav-toggle,
.zg-header__nav-toggle:focus-visible {
  color: var(--zg-accent);
}

/* A tap leaves :hover behind on a touch screen, and on a control that stays put that
   reads as a second selected item. */
@media (hover: hover) {
  .zg-header__nav-toggle:hover {
    color: var(--zg-accent);
  }
}

.zg-header__nav-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease-in-out;
}

.zg-header__nav-group.is-open .zg-header__nav-chevron {
  transform: rotate(180deg);
}

/* zalgiris.lt hangs its menus a little below the bar on a panel a shade lighter than the
   header, so they read as sitting above the page rather than growing out of the nav. */
.zg-header__nav .zg-header__nav-panel {
  display: block;
  position: absolute;
  top: calc(100% + 0.875rem);
  inset-inline-start: -1rem;
  z-index: 60;
  min-width: 12rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  border-radius: 0.5rem;
  background-color: #0f1e18;
  box-shadow: 0 18px 32px -12px rgba(0, 0, 0, 0.55);
}

/* The last menu in the bar would otherwise run off the right edge on a 1440 screen. */
.zg-header__nav .zg-header__nav-panel--end {
  inset-inline-start: auto;
  inset-inline-end: -1rem;
}

.zg-header__nav .zg-header__nav-panel[hidden] {
  display: none;
}

.zg-header__nav-panel a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--zg-text);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.zg-header__nav-panel a:focus-visible {
  color: var(--zg-accent);
}

@media (hover: hover) {
  .zg-header__nav-panel a:hover {
    color: var(--zg-accent);
  }
}
.zg-header-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--zg-bg-soft);
  border: 1px solid var(--zg-border);
  border-radius: 9999px;
  padding: 0.5rem 1rem;
}
.zg-header-search[hidden] {
  display: none;
}

.zg-header-search__icon {
  flex-shrink: 0;
  color: var(--zg-text-faint);
}
.zg-header-search__form {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.zg-header-search input[type='search'] {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-family: inherit;
  color: var(--zg-text);
}

.zg-header-search input[type='search']::placeholder {
  color: var(--zg-text-faint);
}

.zg-header-search input[type='search']:focus {
  outline: none;
}
.zg-header-search input[type='search']::-webkit-search-decoration,
.zg-header-search input[type='search']::-webkit-search-cancel-button,
.zg-header-search input[type='search']::-webkit-search-results-button,
.zg-header-search input[type='search']::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}
.zg-header-search:focus-within {
  outline: 2px solid var(--zg-accent);
  outline-offset: 2px;
  border-radius: 9999px;
}
.zg-header-search zd-autocomplete-multibrand {
  display: block;
  margin-top: 8px;
  background-color: var(--zg-bg-soft);
  border: 1px solid var(--zg-border);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden;
  color: var(--zg-text);
}

.zg-header-search zd-autocomplete-title-multibrand {
  color: var(--zg-accent) !important;
}

.zg-header-search zd-autocomplete-title-multibrand:hover {
  color: var(--zg-accent-hover) !important;
}

.zg-header-search--desktop {
  width: 200px;
}
.zg-header__desktop-actions {
  flex-shrink: 0;
  max-width: min(100%, 22rem);
  gap: 0.5rem !important;
}
.zg-header-search--mobile {
  display: none;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.75rem;
}

.zg-header-search--mobile[data-zg-header-search]:not([hidden]) {
  display: flex;
}

@media (min-width: 1440px) {
  .zg-header-search--mobile {
    display: none !important;
  }
}
/* No scrollbar of its own, at any length. A list too long to pin stops being pinned
   instead, so the column is always read by scrolling the page - which is the only thing
   that works once an article carries a heading per dropdown. The side padding is left
   over from the old scroll box and still gives the card room for its drop shadow. */
.Article_page__toc-sidebar {
  margin-top: 24px;
  max-height: none;
  overflow: visible;
  padding: 0 8px 16px;
}

/* Taller than the space it could be pinned in, so it travels with the page and every
   entry stays reachable. handleArticleSidebarLayout decides when this applies. */
.Article_page__toc-sidebar.is-in-flow {
  position: static;
}

/* The launcher is fixed over the bottom right corner of the viewport, which is where a
   pinned column ends. Reserving its footprint keeps the last card out from under it, and
   handleArticleSidebarLayout reads the same padding back to work out how much room the
   column has to be pinned in. */
body:has(.zg-chat-cta) .Article_page__toc-sidebar {
  padding-bottom: 7rem;
}

@media (max-width: 1439.98px) {
  body:has(.zg-header-search--mobile[data-zg-header-search]:not([hidden]))
    .Article_page__toc-sidebar {
    top: 158px;
  }
}

/* A viewport too short to hold the column steps the article down to the layout phones
   already get: the list above the body, the vote card under it, and the text across the
   full grid. Better than a sticky column the reader has to scroll on its own. */
body.zg-article-sidebar-inline .js-Article_page__toc-column {
  display: none;
}

body.zg-article-sidebar-inline .js-Article_page__toc-inline {
  display: block;
}

body.zg-article-sidebar-inline [data-section='Article'] {
  grid-column: span 12 / span 12;
}
.Article_page__tableOfContents {
  padding: 28px 24px;
  gap: 20px;
  background-image: var(--zg-card-surface);
  border-color: var(--zg-card-border);
  box-shadow: var(--zg-card-shadow);
}

/* The vote card moves in under the list on desktop. The stock layout puts the question
   and the buttons at opposite ends of a full width row, which has nowhere to go in a
   sidebar, so it stacks. */
.Article_page__toc-sidebar .Article_page__article-feedback {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 24px;
  margin-bottom: 0;
}

/* The same surface as the list it sits under, wherever it ends up: the card is the same
   card whether it is in the column, under the article on a short viewport, or on a phone.
   Overrides the flat grey `background` shorthand in style.css on cascade order alone.

   Once the vote is in, the card has said everything it has to say, so it fades out and
   gives the space back rather than sitting there thanking the reader for the rest of the
   visit. The class beats the .flex utility on the section without needing !important. */
.Article_page__article-feedback {
  background-color: #ffffff;
  background-image: var(--zg-card-surface);
  border: 1px solid var(--zg-card-border);
  box-shadow: var(--zg-card-shadow);
  transition: opacity 400ms ease;
}

.Article_page__article-feedback.zg-feedback-fading {
  opacity: 0;
}

.Article_page__article-feedback.zg-feedback-hidden {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .Article_page__article-feedback {
    transition: none;
  }
}

/* Sits on the tinted end of the gradient, so the stock white fill would read as a
   pale block rather than a plain button. */
.Article_page__show-all-button {
  background-color: transparent;
}

.Article_page__tableOfContents-content .mainItems {
  padding-top: 20px;
}

.Article_page__tableOfContents-content .mainItems:first-of-type {
  padding-top: 0;
}

.Article_page__tableOfContents-content.isHidden .mainItems:first-of-type {
  padding-top: 20px;
}

/* The stock list snaps between display none and block. Height and visibility can be
   transitioned, so the second half slides open instead - which matters now that
   reaching the fourth heading opens it on the reader's behalf rather than on a click. */
.Article_page__tableOfContents-content.isHidden {
  display: block;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  transition: height 320ms cubic-bezier(0.33, 1, 0.68, 1), visibility 0s linear 320ms;
  /* Keeps the active marker, which sits to the left of the text, inside the clip box.
     The negative margin cancels the padding, so the items stay where they were. */
  padding-inline-start: 20px;
  margin-inline-start: -20px;
}

.Article_page__tableOfContents.expanded .Article_page__tableOfContents-content.isHidden {
  visibility: visible;
  transition: height 320ms cubic-bezier(0.33, 1, 0.68, 1), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .Article_page__tableOfContents-content.isHidden {
    transition: none;
  }
}

.Article_page__tableOfContents-content .nestedItems {
  padding-top: 10px;
}

.Article_page__tableOfContents-content .mainItems + .nestedItems {
  margin-top: 10px;
}

.Article_page__tableOfContents-content .mainItems a,
.Article_page__tableOfContents-content .nestedItems a {
  position: relative;
  display: block;
  transition: color 0.15s ease;
}

/* Touch screens keep :hover on the last thing tapped, which would leave a second item
   looking current, so the hover colour is limited to real pointers. */
@media (hover: hover) {
  .Article_page__tableOfContents-content .mainItems a:hover,
  .Article_page__tableOfContents-content .nestedItems a:hover {
    /* #1ca256 is only 3.2:1 on white, so the darker green carries the text and the
       brighter one is left to the marker beside it. */
    color: var(--zg-green-hover);
  }
}

/* The section the reader is in. aria-current holds the state, so what is announced
   and what is highlighted cannot drift apart. */
.Article_page__tableOfContents-content .mainItems a[aria-current],
.Article_page__tableOfContents-content .nestedItems a[aria-current] {
  color: var(--zg-green-hover);
}

.Article_page__tableOfContents-content .mainItems a[aria-current]::before,
.Article_page__tableOfContents-content .nestedItems a[aria-current]::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 999px;
  background-color: var(--zg-green);
}

/* Marker sits in the card's own padding for top level items, and over the tree line
   for nested ones, so neither level shifts when the highlight moves. */
.Article_page__tableOfContents-content .mainItems a[aria-current]::before {
  inset-inline-start: -14px;
}

.Article_page__tableOfContents-content .nestedItems a[aria-current]::before {
  inset-inline-start: -18px;
}
.Article_page__article-translations-label {
  margin-right: 0;
}

.Article_page__article-translations a {
  color: #16803f;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.Article_page__article-translations a:hover {
  color: #0f5c2d;
}

.Article_page__article-translations a:focus-visible {
  outline: 2px solid #16803f;
  outline-offset: 2px;
  border-radius: 2px;
}
#header-hp-link svg {
  flex-shrink: 0;
}
.Article_page__article-contact {
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .Article_page__article-contact {
    text-align: left;
  }
}
.zg-article-contact__button,
.zg-article-contact__button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 24px;
  border-radius: 9999px;
  background-color: #16803f;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  /* The Lithuanian label is 314px on one line, wider than the room a 360px phone has
     once the card's padding is taken out, so it is allowed to break. */
  text-align: center;
  transition: background-color 0.2s ease-in-out;
}

.zg-article-contact__icon {
  flex-shrink: 0;
}
.zg-article-contact__button:hover {
  background-color: #0f5c2d;
  color: #fff;
}

.zg-article-contact__button:active {
  background-color: #0a4020;
  color: #fff;
}

.zg-article-contact__button:focus-visible {
  outline: 2px solid #16803f;
  outline-offset: 2px;
  color: #fff;
}
.zg-ikb-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(224, 47, 31, 0.35);
  background-color: rgba(224, 47, 31, 0.05);
  color: #9e1c10;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.zg-ikb-filter--results {
  margin-top: -1.25rem;
  margin-bottom: 1.5rem;
}

.zg-ikb-filter__input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: #e02f1f;
  cursor: pointer;
}

.zg-ikb-filter__icon {
  flex-shrink: 0;
  color: #9e1c10;
}

.zg-ikb-filter:focus-within {
  outline: 2px solid #e02f1f;
  outline-offset: 2px;
}

.zg-ikb-filter__count {
  margin-left: 0.25rem;
  color: #9e1c10;
  font-weight: 700;
}
.zg-ikb-suggestion-hidden {
  display: none !important;
}

.zg-ikb-suggest-empty {
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: #6c6d75;
}
/* The whole footer mirrors zalgiris.lt's: same container width, paddings, type scale
   and greys, so the two sites read as one. */
.zg-footer {
  background-color: var(--zg-bg);
  color: var(--zg-text-muted);
  padding: 2.5rem 2.5rem 1.5rem;
}

@media (min-width: 992px) {
  .zg-footer {
    padding: 5rem 1rem 2.5rem;
  }
}

.zg-footer a {
  color: inherit;
}

.zg-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.zg-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

/* Five equal columns with no gutter, as on zalgiris.lt: at this container width each
   column is wide enough that the link lists never run into the next one. */
@media (min-width: 992px) {
  .zg-footer__top {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }
}

.zg-footer__brand {
  display: flex;
  justify-content: center;
}

@media (min-width: 992px) {
  .zg-footer__brand {
    justify-content: flex-start;
  }
}

.zg-footer__logo-img {
  height: 4.5rem;
  width: auto;
}

.zg-footer__col-title {
  color: var(--zg-text);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 2rem;
  margin: 0 0 1rem;
}

.zg-footer__col-title--accent {
  color: var(--zg-accent);
}

.zg-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.zg-footer__col a {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--zg-text-muted);
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}
.zg-footer__col a:hover {
  color: var(--zg-text);
}

/* zalgiris.lt marks these links with colour alone; the underline stays for keyboard
   users, where the change of colour is easier to miss. */
.zg-footer__col a:focus,
.zg-footer__col a:focus-visible {
  color: var(--zg-text);
  text-decoration: underline;
}

.zg-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.zg-footer__social a {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: var(--zg-bg-soft);
  color: var(--zg-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.zg-footer__social a:hover {
  background-color: var(--zg-bg-soft-hover);
  color: var(--zg-text);
}

.zg-footer__social svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.zg-footer__divider {
  border-top: 1px solid var(--zg-border);
  margin: 2.5rem 0;
  padding-top: 2.5rem;
}

.zg-footer__newsletter {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 1.5rem;
}

.zg-footer__newsletter-title {
  color: var(--zg-text);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 2rem;
  margin: 0;
}

.zg-footer__newsletter-text {
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 0;
}

.zg-footer__newsletter-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.zg-footer__newsletter-input {
  width: 100%;
  padding: 0.75rem;
  border: 0;
  border-radius: 0.25rem;
  background-color: #f5f5f5;
  color: #0f1e18;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
}

.zg-footer__newsletter-input::placeholder {
  color: #22302a;
}

.zg-footer__newsletter-input:focus-visible {
  outline: 2px solid var(--zg-accent);
  outline-offset: 2px;
}

/* Matches zalgiris.lt's button: same 16px label and padding, so it lines up with the
   input rather than the smaller buttons elsewhere in the footer. Both classes are named
   because .zg-btn comes later in this file and would otherwise win. */
.zg-btn.zg-footer__newsletter-submit {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 0.625rem 1rem;
}

.zg-btn.zg-footer__newsletter-submit[disabled] {
  cursor: default;
  opacity: 0.5;
}

.zg-footer__newsletter-note,
.zg-footer__newsletter-status {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin: 0.5rem 0 0;
}

.zg-footer__newsletter-note a {
  text-decoration: underline;
}

.zg-footer__newsletter-note a:hover {
  color: var(--zg-text);
}

.zg-footer__newsletter-status:empty {
  display: none;
}

.zg-footer__newsletter-status--ok {
  color: var(--zg-accent);
}

.zg-footer__newsletter-status--error {
  color: #ff9e91;
}

@media (min-width: 992px) {
  .zg-footer__newsletter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2.5rem;
  }

  .zg-footer__newsletter-row {
    flex-direction: row;
    gap: 1rem;
  }
}

/* zalgiris.lt closes the contacts block with a rule as well, which is what separates it
   from the small print underneath. */
.zg-footer__contacts {
  border-bottom: 1px solid var(--zg-border);
  padding-bottom: 2.5rem;
}

.zg-footer__contacts-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.zg-footer__contacts-head h2 {
  color: var(--zg-text);
  font-weight: 800;
  font-size: 1.875rem;
  line-height: 2.25rem;
  margin: 0;
}

.zg-footer__contacts-head .zg-btn {
  font-size: 0.75rem;
  padding: 0.375rem 0.5rem;
}

@media (min-width: 992px) {
  .zg-footer__contacts-head h2 {
    font-size: 2.25rem;
    line-height: 2.75rem;
  }

  .zg-footer__contacts-head .zg-btn {
    font-size: 1rem;
    padding: 0.375rem 0.875rem;
  }
}

.zg-footer__contacts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 992px) {
  .zg-footer__contacts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 2.5rem;
  }
}

.zg-footer__contact p {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin: 0.5rem 0 0;
  color: var(--zg-text-muted);
}

/* Both selectors have to be on this rule: on its own the class loses to the rule above
   it, which is more specific. */
.zg-footer__contact p.zg-footer__contact-title {
  color: var(--zg-text);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 0 0 0.5rem;
}

@media (min-width: 992px) {
  .zg-footer__contact p.zg-footer__contact-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 1.25rem;
  }
}

.zg-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 992px) {
  .zg-footer__bottom {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
}

.zg-footer__legal-group {
  flex: 1 1 auto;
}

.zg-footer__legal {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--zg-text-dim);
  margin: 0.5rem 0 0;
  text-align: center;
}

.zg-footer__legal:first-child {
  margin-top: 0;
}

@media (min-width: 992px) {
  .zg-footer__legal {
    text-align: left;
  }
}

.zg-footer__legal a {
  color: inherit;
  text-decoration: underline;
}

.zg-footer__legal a:hover {
  color: var(--zg-text);
}

/* The store badges sit above the small print on phones, as they do on zalgiris.lt. */
.zg-footer__badges {
  display: flex;
  order: -1;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (min-width: 992px) {
  .zg-footer__badges {
    order: 0;
    justify-content: flex-end;
  }
}

.zg-footer__badges img {
  height: 2.5rem;
  width: auto;
}

.zg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 2px solid transparent;
  border-radius: 0.25rem;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.45rem 1rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.zg-btn--accent {
  background-color: var(--zg-accent);
  color: var(--zg-ink) !important;
}

.zg-btn--accent:hover {
  background-color: var(--zg-accent-hover);
  color: var(--zg-ink) !important;
}

.zg-btn--outline {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff !important;
}

.zg-btn--outline:hover {
  background-color: #ffffff;
  color: var(--zg-ink) !important;
}
.breadcrumbs {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  min-height: 0 !important;
}
.breadcrumbs li a:hover,
.breadcrumbs li a:focus-visible {
  color: var(--zg-green-hover);
}
.Article_page__article-body a,
.zg-cookie-consent__text a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The stock sheet gives both levels the same 18px, four pixels over the 14px body text,
   so a long article reads as one flat run: nothing announces a section, and a subsection
   looks exactly like the section holding it. Two steps instead, both kept under the h1 -
   which is 22px until 768px and 40px above it, hence the two sets. */
.Article_page__article-body h2,
.Article_page__article-body h3 {
  line-height: 1.35;
}
.Article_page__article-body h2 {
  font-size: 1.1875rem;
  font-weight: 700;
}
.Article_page__article-body h3 {
  font-size: 1.0625rem;
  font-weight: 600;
}
@media (min-width: 768px) {
  .Article_page__article-body h2 {
    font-size: 1.5rem;
  }
  .Article_page__article-body h3 {
    font-size: 1.1875rem;
  }
}

/* Every block in the body carries the same 28px below it, which left a heading sitting
   the same distance from the section it ends as from the one it opens. Harmless at 18px,
   but at this size it reads as floating between the two. Not on a leading heading: the
   body has overflow:hidden, so that margin would push the article down instead. */
.Article_page__article-body > h2:not(:first-child) {
  margin-top: 2.5rem;
}
a.variant-accent.appearance-fill,
a[data-variant='accent'][data-appearance='fill'],
button.variant-accent.appearance-fill,
button[data-variant='accent'][data-appearance='fill'],
a.variant-accent.appearance-fill:hover,
a[data-variant='accent'][data-appearance='fill']:hover,
button.variant-accent.appearance-fill:hover,
button[data-variant='accent'][data-appearance='fill']:hover {
  color: #062814 !important;
}

a.variant-accent.appearance-outline,
a[data-variant='accent'][data-appearance='outline'],
button.variant-accent.appearance-outline,
button[data-variant='accent'][data-appearance='outline'] {
  color: var(--zg-green-hover) !important;
}

a.variant-accent.appearance-outline:hover,
a[data-variant='accent'][data-appearance='outline']:hover,
button.variant-accent.appearance-outline:hover,
button[data-variant='accent'][data-appearance='outline']:hover {
  color: #062814 !important;
}
a.variant-accent,
a[data-variant='accent'],
button.variant-accent,
button[data-variant='accent'] {
  gap: 0.5rem;
}
.Banner__search input:placeholder-shown,
.Banner__search input:-moz-placeholder {
  border-color: #8d8e96;
}
.alert[data-variant='success'],
.SelfService-section__form--success-message {
  border-color: var(--zg-green-hover) !important;
}
#Article-page__share-icon,
#share-copy-link,
#close-dialog-btn,
.Article_page__article-body-codeBlock button {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#Article-page__share-icon:focus-visible,
#share-copy-link:focus-visible,
#close-dialog-btn:focus-visible,
.Article_page__article-body-codeBlock button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--zg-green-hover);
  border-radius: 4px;
}
/* Clears the sticky header, which is 104px tall and 158px once article pages put the
   search row in it. At 5rem a heading jumped to from the list landed behind the bar. */
html {
  scroll-padding-top: 7rem;
}

:focus-visible {
  scroll-margin-top: 7rem;
}

@media (max-width: 1439.98px) {
  html:has(.zg-header-search--mobile[data-zg-header-search]:not([hidden])) {
    scroll-padding-top: 10.5rem;
  }

  html:has(.zg-header-search--mobile[data-zg-header-search]:not([hidden])) :focus-visible {
    scroll-margin-top: 10.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .animate-spin {
    animation: none;
  }
}
.js-Article_page__imgModal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  min-width: 24px;
  min-height: 24px;
  padding: 0.5rem;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.js-Article_page__imgModal-close:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.8), 0 0 0 4px #fff;
}
.Article_page__imgModal-img-wrapper img {
  max-width: 100%;
  max-height: calc(100vh - 4rem);
  width: auto;
  height: auto;
  object-fit: contain;
}
:focus-visible {
  outline-color: var(--zg-green-hover);
}
.Home-page__section__accordion__title:focus,
.Home-page__section__accordion__title:focus-visible,
.Home-page__section__accordion__title:hover,
.zg-accordion__category-title:focus,
.zg-accordion__category-title:focus-visible,
.zg-accordion__category-title:hover {
  color: var(--zg-green-hover) !important;
}
.Home-page__section__accordion__title:focus,
.Home-page__section__accordion__title:focus-visible,
.Home-page__section__accordion__title:hover {
  text-decoration: underline;
}
.Home-page__section__accordion__title {
  font-size: 1rem;
  line-height: 1.5;
}
[data-section='SearchBanner'] h1,
[data-section='QuickHelp'] h2 {
  font-weight: 700;
}

.Home-page__section__accordion__title:focus-visible,
.zg-accordion__category-title:focus-visible,
.zg-accordion__section-title:focus-visible,
.zg-accordion__article-link:focus-visible,
.zg-chat-cta:focus-visible {
  outline: 2px solid var(--zg-green-hover);
  outline-offset: 2px;
}
/* The theme's drawer is the stock light one, so on a site whose header and footer are
   near-black it slid out looking like a different product. It takes the same surface,
   hairlines and accent as the header it comes from, and the links become full-width rows
   so the list reads as one block instead of six pieces of floating text. */
.zg-sidebar {
  background-color: var(--zg-bg);
  border-inline-start: 1px solid var(--zg-border);
}

#sidebar {
  padding: 1rem 1.25rem 2rem;
}

.zg-sidebar__head {
  align-items: center;
  margin-bottom: 1rem !important;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--zg-border);
}

#sidebar-hp-link img {
  width: 2.25rem;
}

/* Same 40px circle as the footer's social buttons, so the close control reads as a button
   rather than a stray glyph next to the crest. */
#sidebar .sidebar-close-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
  margin-top: 0;
  border-radius: 9999px;
  background-color: var(--zg-bg-soft);
  color: var(--zg-text);
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

#sidebar .sidebar-close-trigger svg {
  width: 14px;
  height: 14px;
}

#sidebar .sidebar-close-trigger:hover,
#sidebar .sidebar-close-trigger:focus-visible {
  background-color: var(--zg-bg-soft-hover);
  color: var(--zg-accent);
}

/* The rhythm comes from the rows' own padding, so the utility margin on each item goes. */
#sidebar-nav > li > div {
  display: block;
  margin-bottom: 0 !important;
}

#sidebar-nav > li + li {
  border-top: 1px solid var(--zg-border);
}

#sidebar a.sidebar-item {
  display: block;
  padding: 0.875rem 0;
  color: var(--zg-text);
  font-size: 1.0625rem;
  font-weight: 600;
}

#sidebar-hp-link.sidebar-item {
  padding: 0;
}

#sidebar a.sidebar-item:hover,
#sidebar a.sidebar-item:focus-visible {
  color: var(--zg-accent);
  text-decoration: none;
}

/* The rows that open a submenu look like the rows that navigate, with the chevron pushed
   out to the edge where there is room for a thumb. */
#sidebar .zg-sidebar__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 0;
  border: 0;
  background: none;
  color: var(--zg-text);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5rem;
  text-align: start;
  cursor: pointer;
}

/* The open group keeps the accent so the colour on screen after a tap is the state of the
   menu rather than a hover the finger left behind. */
#sidebar .zg-sidebar__group-toggle[aria-expanded='true'],
#sidebar .zg-sidebar__group-toggle:focus-visible {
  color: var(--zg-accent);
}

@media (hover: hover) {
  #sidebar .zg-sidebar__group-toggle:hover {
    color: var(--zg-accent);
  }
}

.zg-sidebar__group-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease-in-out;
}

.zg-sidebar__group-toggle[aria-expanded='true'] .zg-sidebar__group-chevron {
  transform: rotate(180deg);
}

.zg-sidebar__submenu {
  display: flex;
  flex-direction: column;
  margin: 0 0 0.75rem;
  padding: 0 0 0 0.875rem;
  list-style: none;
  border-inline-start: 1px solid var(--zg-border);
}

.zg-sidebar__submenu[hidden] {
  display: none;
}

#sidebar .zg-sidebar__submenu a.sidebar-item {
  padding: 0.5rem 0;
  color: var(--zg-text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
}

#sidebar .zg-sidebar__submenu a.sidebar-item:focus-visible {
  color: var(--zg-accent);
}

@media (hover: hover) {
  #sidebar .zg-sidebar__submenu a.sidebar-item:hover {
    color: var(--zg-accent);
  }
}
.zg-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.25rem 0.625rem;
  white-space: nowrap;
}

/* White on the standard green is only 3.3:1, which is what made the label wash out at
   11px. The darker green of the pair carries white at 5:1 and still reads as the same
   brand chip next to the article titles. */
.zg-badge--promoted {
  background-color: var(--zg-green-hover);
  color: #ffffff;
}
.zg-accordion__category-title {
  cursor: pointer;
  background-color: #fff;
}

.zg-accordion__chevron {
  transition: transform 0.2s ease-in-out;
  flex-shrink: 0;
}

.zg-accordion__category-title[aria-expanded='true'] .zg-accordion__chevron,
.zg-accordion__section-title[aria-expanded='true'] .zg-accordion__chevron {
  transform: rotate(90deg);
}

.zg-accordion__panel {
  padding: 0.75rem 0.5rem 0.5rem 1rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}
.zg-accordion__panel.is-open {
  max-height: 2000px;
  opacity: 1;
}

.zg-accordion__panel--sections {
  border-left: 2px solid var(--zg-green);
  margin-left: 1.5rem;
}

.zg-accordion__section-list,
.zg-accordion__article-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zg-accordion__section-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  background-color: #fff;
  color: #171717;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

.zg-accordion__section-title:hover {
  border-color: var(--zg-green);
  color: var(--zg-green-hover);
}

.zg-accordion__panel--articles {
  border-left: 2px solid var(--zg-accent-hover, #8ecc21);
  margin-left: 1.25rem;
  padding-left: 1rem;
}

.zg-accordion__article-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: #171717;
  text-decoration: none;
}

.zg-accordion__article-link:hover {
  background-color: #f7f7f8;
  text-decoration: underline;
}

.zg-accordion__state {
  color: #6b7280;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}
.zg-chat-cta {
  position: fixed;
  z-index: 40;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.5rem 0.875rem 0.75rem;
  border-radius: 9999px;
  border: none;
  /* Near enough the green the messenger paints its own header with, so the launcher and
     the panel it opens read as one thing. White on it is 3.3:1, so both lines below are
     set in bold above 18.66px, where AA asks for 3:1 rather than 4.5:1. */
  background-color: var(--zg-green-cta);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(51, 162, 86, 0.45);
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  animation: zg-chat-cta-pulse 2.6s ease-in-out infinite;
}

/* Darkens rather than lightens: the label is white, so anything paler than the resting
   green would drop the button under 3:1. */
.zg-chat-cta:hover,
.zg-chat-cta:focus-visible {
  background-color: var(--zg-green-hover);
  transform: translateY(-2px);
  animation-play-state: paused;
}

.zg-chat-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.18);
}

.zg-chat-cta__icon img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.zg-chat-cta__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  text-align: left;
}

/* Both lines are bold and over 18.66px so they count as large text against the green.
   Size alone separates them; dropping the second line's weight would fail it. */
.zg-chat-cta__title {
  font-weight: 700;
  font-size: 1.375rem;
}

.zg-chat-cta__subtitle {
  font-weight: 700;
  font-size: 1.1875rem;
}

@keyframes zg-chat-cta-pulse {
  0%,
  100% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(51, 162, 86, 0.45);
  }
  50% {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 10px rgba(51, 162, 86, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zg-chat-cta {
    animation: none;
  }
}

@media (max-width: 640px) {
  .zg-chat-cta {
    right: 1rem;
    bottom: 1rem;
    padding: 0.625rem;
  }

  .zg-chat-cta__icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .zg-chat-cta__text {
    display: none;
  }
}
body.zg-cookie-consent-open .zg-chat-cta {
  bottom: 7.5rem;
}

@media (max-width: 640px) {
  body.zg-cookie-consent-open .zg-chat-cta {
    bottom: 9.5rem;
  }
}
.zg-chat-panel {
  position: fixed;
  z-index: 50;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  width: 23.75rem;
  max-width: calc(100vw - 2rem);
  height: 35rem;
  max-height: calc(100vh - 3rem);
  overflow: hidden;
  border-radius: 1rem;
  background-color: #ffffff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.zg-chat-panel[hidden] {
  display: none;
}
.zg-chat-panel--warming {
  left: -200vw;
  right: auto;
  visibility: hidden;
  pointer-events: none;
}
.zg-chat-panel__close {
  position: absolute;
  z-index: 1;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background-color: var(--zg-green);
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.zg-chat-panel__close:hover {
  background-color: var(--zg-green-hover);
}
.zg-chat-panel__close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.zg-chat-panel__close img {
  filter: brightness(0) invert(1);
}
.zg-chat-panel--error .zg-chat-panel__close:focus-visible {
  outline-color: #2a2b32;
}
.zg-chat-panel__embed {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-height: 0;
}
.zg-chat-panel__sentinel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  outline: none;
}
.zg-chat-panel__welcome {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 5.5rem 2rem;
  pointer-events: none;
  text-align: center;
}

.zg-chat-panel__welcome[hidden] {
  display: none;
}

.zg-chat-panel__welcome-title {
  margin: 0;
  color: #2a2b32;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.zg-chat-panel__welcome-text {
  margin: 0;
  color: #6b7280;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.zg-chat-panel__error {
  margin: 0;
  padding: 3.25rem 1.25rem 1.25rem;
  color: #2a2b32;
  font-size: 0.875rem;
  line-height: 1.5;
}

.zg-chat-panel__error a {
  color: var(--zg-green);
  text-decoration: underline;
}
body.zg-chat-open .zg-chat-cta {
  display: none;
}

@media (max-width: 640px) {
  .zg-chat-panel {
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
}
body.zg-cookie-consent-open .zg-chat-panel {
  bottom: 7.5rem;
  max-height: calc(100vh - 9rem);
}

@media (max-width: 640px) {
  body.zg-cookie-consent-open .zg-chat-panel {
    bottom: 0;
    max-height: none;
  }
}
.zg-cookie-consent {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--zg-bg);
  border-top: 1px solid var(--zg-border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
}

.zg-cookie-consent[hidden] {
  display: none;
}

.zg-cookie-consent__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.zg-cookie-consent__text {
  flex: 1 1 20rem;
  color: var(--zg-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

.zg-cookie-consent__text a {
  color: var(--zg-accent);
  text-decoration: underline;
}

.zg-cookie-consent__text a:hover {
  color: var(--zg-accent-hover);
}

.zg-cookie-consent__actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.zg-cookie-consent__actions .zg-btn {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .zg-cookie-consent__inner {
    padding: 1rem;
  }

  .zg-cookie-consent__actions {
    width: 100%;
  }

  .zg-cookie-consent__actions .zg-btn {
    flex: 1 1 0;
  }
}

.hero-container {
  background-color: var(--zg-bg);
}

/* The photo, its height and its padding all live on this inner band rather than on the
   section, because the theme's sticky-header script writes an inline padding-top on
   [data-index='1'] to make up for the header leaving the flow: the section has to be
   free to grow by the header's height, or the page jumps mid-scroll. Keeping the band
   out of that means the image is never rescaled, which is what made it flicker and
   re-render on every scroll direction change on phones. The strip the padding opens up
   above the band only exists once the header has scrolled away, so it stays off screen.
   min-height reserves the band before the image decodes. */
.hero-container__band {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 300px;
  flex-direction: column;
  justify-content: center;
  /* The narrow asset is cropped to roughly a phone band's ratio, so cover shows the
     whole frame and 50% simply keeps it centred. */
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: clamp(2rem, 5vw, 2.75rem);
  padding-bottom: clamp(2rem, 5vw, 2.75rem);
}

/* Very slight brand tint over the whole band, plus a soft scrim that only darkens the
   middle, where the heading sits over the arena lights. */
.hero-container__band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(
    95% 62% at 50% 42%,
    rgba(0, 18, 9, 0.7) 0%,
    rgba(0, 18, 9, 0.42) 50%,
    rgba(0, 18, 9, 0) 100%
  );
  background-color: rgba(0, 40, 20, 0.1);
}

.hero-container__inner {
  position: relative;
  width: 100%;
}

/* The overlay is deliberately light, so the heading carries its own contrast
   against the arena lighting behind it. */
.hero-container__heading {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 16px rgba(0, 0, 0, 0.7);
}

.hero-container .Banner__search input {
  background-color: #fff;
}

.hero-container .zg-ikb-filter {
  background-color: #fdecea;
  border-color: rgba(224, 47, 31, 0.45);
}

.hero-container .zg-ikb-filter:focus-within {
  outline-color: #fff;
}

.hero-container + [data-section='Categories'] {
  padding-top: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 768px) {
  /* The wide asset keeps the photo's full width and is pre-cropped to the band's
     height, so cover scales it to the viewport width and never magnifies it. 31%
     is where that slice lands on the scoreboard, smoke and court. The band itself
     stays short, in the spirit of the reference layout: taller than the content on
     small laptops, never past 420px on wide screens. */
  .hero-container__band {
    background-position: 50% 31%;
    min-height: clamp(320px, 24vw, 420px);
  }

  .hero-container__band::before {
    background-image: radial-gradient(
      62% 68% at 50% 40%,
      rgba(0, 18, 9, 0.58) 0%,
      rgba(0, 18, 9, 0.34) 50%,
      rgba(0, 18, 9, 0) 100%
    );
  }
}

/* Promo banners between the category accordion and the popular questions. The
   QuickHelp section below carries its own py-16, so only the top needs spacing. */
.zg-promo {
  padding-top: clamp(2.5rem, 6vw, 4rem);
}

.zg-promo__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.zg-promo__card {
  position: relative;
  display: block;
  overflow: hidden;
  /* The banners are cropped to 21/10 on zalgiris.lt; matching it keeps the artwork
     framed the way it was designed and reserves the space before the image loads. */
  aspect-ratio: 21 / 10;
  border-radius: 0.5rem;
  background-color: var(--zg-bg);
  transition: opacity 0.3s ease-in-out;
  /* Lets the label track the card's own width, which changes between the one and
     two column layouts independently of the viewport. */
  container-type: inline-size;
}

.zg-promo__card:hover {
  opacity: 0.8;
}

.zg-promo__card:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--zg-green-hover);
}

.zg-promo__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

/* The player artwork sits on the left of both banners, so the label goes right. */
.zg-promo__title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 2rem;
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-size: clamp(1.5rem, 6.5cqw, 3rem);
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

@media (min-width: 1024px) {
  .zg-promo__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .zg-promo__title {
    padding-inline-end: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zg-promo__card {
    transition: none;
  }
}