/* 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;
  /* Green text sitting on a card. The card surface below washes from white into
     rgba(28, 162, 86, 0.13), which composites to #e1f3e9 at its deepest - and the hover
     green only manages 4.34:1 on that. This clears 4.5:1 against the whole sweep, so
     green text on a card passes wherever the layout happens to put it. */
  --zg-green-on-card: #15793b;
  --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;
}
/* The same surface the list and the vote card carry, so the three cards stacked down this
   column read as one set rather than three components. The white fill goes with the
   gradient rather than being replaced by it: the gradient's last stop is a translucent
   green, and left over the stock grey it composites muddy instead of tinted. */
.Article_page__article-contact {
  align-items: center;
  text-align: center;
  background-color: #ffffff;
  background-image: var(--zg-card-surface);
  border: 1px solid var(--zg-card-border);
  box-shadow: var(--zg-card-shadow);
}

/* The row layout starts at lg, not md. Between the two the article column has given half
   its width to the table of contents, and the text plus both buttons on one line leaves
   the copy about 30px to live in. Stacked and centred is the same shape phones get. */
@media (min-width: 1024px) {
  .Article_page__article-contact {
    text-align: left;
  }
}

.zg-article-contact__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* The brand green proper is 3.3:1 on the card's white end, which is under AA for anything
   that is not large text. This one clears 4.5:1 across the card, so the heading can be
   sized freely without having to sit in the pale part of the gradient. */
.zg-article-contact__title {
  color: var(--zg-green-on-card);
  /* Sized to clear the buttons: they take a fixed 349px out of the row, which leaves the
     heading barely over 200px on the widest the article column ever gets. At 20px the
     Lithuanian title broke onto a second line at every desktop width. */
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.zg-article-contact__subtitle {
  color: #4b5563;
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* The pair wraps rather than shrinks. Below roughly 445px there is no longer room for both
   labels on one line, and two squashed buttons read worse than two stacked ones. Hiding
   the chat button with `display: none` also drops it out of here cleanly, which is what
   handleLiveChat does when no integration is configured. */
.zg-article-contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .zg-article-contact__actions {
    justify-content: flex-end;
  }
}

/* One rule for both controls: the chat trigger has to be a button because it opens a
   dialog, the mail one an anchor because it navigates, and they sit side by side. */
.zg-article-contact__button,
.zg-article-contact__button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Grows into whatever is left on its own line. Side by side there is nothing left over,
     so the two keep their natural widths; once they wrap they each take the full row
     rather than sitting centred at two different widths. */
  flex: 1 1 auto;
  max-width: 100%;
  padding: 12px 24px;
  border: none;
  border-radius: 9999px;
  background-color: #16803f;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  /* A label with nowhere left to go breaks instead of pushing the card past a 360px
     phone, and a broken label is centred rather than ragged. */
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  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;
  }
}