/* Site header: utility bar (links, green pills, pvm switch, language) above the main bar
   (logo, catalogue button + search, account icons + mini-cart). Shared by every page.
   The utility bar is its own strip above <header>, so the header (= the main bar) can stick by itself: the strip
   scrolls away and the bar's controls stay, floating (see "sticky" at the end). */
.site-topbar {
  position: relative;
  z-index: 21; /* its dropdowns open over the main bar */
  padding-top: 16px;
  background: var(--c-surface);
}
.site-header {
  --bar-pad-base: 10px; /* phones tighter (user 10-05); 24 from 768 */
  --bar-pad: var(--bar-pad-base);
  --row1-h: calc(36px + var(--sq)); /* logo + icons row below 480 (40px from 360); 48 from 480 */
  position: relative;
  z-index: 20;
  padding-block: var(--bar-pad);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--ease), box-shadow var(--ease), translate var(--ease);
}

/* ---- utility bar ---- */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "links settings" "pills pills";
  align-items: center;
  gap: 8px 16px;
}
.topbar__links { grid-area: links; display: flex; flex-wrap: wrap; align-items: center; gap: 0 calc(12px + var(--sq)); }
/* below 768 the pvm switch sits right of the links and the language one row down, level with the first pills
   (user 10-05); from 768 both sit together in the settings area */
.topbar__settings { display: contents; }
.topbar__settings > .vat-switch { grid-area: settings; justify-self: end; }
.topbar__settings > .dropdown { grid-area: pills; justify-self: end; align-self: start; }
.topbar__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-block: 4px;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
}
.topbar__link:hover { color: var(--c-text); }
.topbar__lang-name { display: none; }

/* below 768 the four pills sit in two rows, Montavimas + Dovanų kuponai, then Nuolaidos + Tapkite... (a forced
   break after the first pair; each row keeps its own widths). On the narrowest phones a long pill wraps on. */
.topbar__pills { grid-area: pills; display: flex; flex-wrap: wrap; gap: 4px; }
.topbar__pills > li { display: flex; order: 1; }
.topbar__pills > li:nth-child(even) { order: 3; }
.topbar__pills::after { content: ""; order: 2; flex-basis: 100%; margin-top: -4px; }
.topbar__pills .tag { padding-inline: 5px; }

.vat-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 16px;
}
.vat-switch__track {
  width: 32px;
  height: 16px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--c-border);
  transition: background var(--ease);
}
.vat-switch__track::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
  transition: translate var(--ease);
}
.vat-switch[aria-checked="true"] { color: var(--c-green); }
.vat-switch[aria-checked="true"] .vat-switch__track { background: var(--c-green); }
.vat-switch[aria-checked="true"] .vat-switch__track::after { translate: 16px 0; }

.flag { width: 26px; height: 14px; border-radius: 2px; } /* phones (user 10-05); 16x12 from 768. The files fill any box. */

/* ---- dropdowns (contacts, language) ---- */
.dropdown { position: relative; }
.dropdown__caret { transition: rotate var(--ease); }
[aria-expanded="true"] > .dropdown__caret { rotate: 180deg; }
.dropdown__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  box-shadow: var(--shadow-raised);
}
.dropdown__menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-md);
  line-height: 20px;
  white-space: nowrap;
}
.dropdown__menu a:hover { color: var(--c-green); }
.contacts-menu { width: min(317px, calc(100vw - 2 * var(--gutter))); padding: 16px; }
.contacts-menu .icon { width: 22px; height: 22px; color: var(--c-green); }
.contacts-menu a { font-size: var(--fs-tap-lg); line-height: 26px; overflow-wrap: anywhere; } /* phones ~35% bigger (user 10-05) */
.language-menu { left: auto; right: 0; width: max-content; padding: 12px; } /* its width from its content, not the narrow button */

/* ---- main bar ---- */
.mainbar {
  --row-shift: calc(var(--stuck-row-gap) - 10px); /* stuck, two rows: pull the second row up to that gap */
  position: relative; /* the KATEGORIJOS menu spans the bar */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px calc(12px + var(--sq));
}
.site-logo { /* as tall as the icon boxes below 480 (user 10-05) */
  display: grid;
  place-items: center;
  height: var(--row1-h);
  padding: 4px calc(8px + var(--sq));
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  box-shadow: var(--shadow-raised);
}
.site-logo img { width: calc(88px + 3.5 * var(--sq)); } /* 102px from 360 */
.mainbar__find {
  order: 2;
  flex: 1 1 100%;
  display: flex;
  gap: 16px;
  min-width: 0;
}
.catalog-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--c-btn-dark);
  color: #fff;
  box-shadow: var(--shadow-raised);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
}
.catalog-btn__label { display: none; }

/* KATEGORIJOS menu: one list of category groups in balanced columns (demo data; OpenCart's tree fills it) */
.catalog-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline: var(--gutter); /* the bar is a .container: line up with its content, not its padding */
  z-index: 30;
  max-height: min(70dvh, 640px);
  overflow-y: auto;
  padding: 24px 24px 8px;
  border-radius: var(--radius-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-lg);
}
.catalog-menu__group { padding-bottom: 16px; }
.catalog-menu__title { font-size: var(--fs-lg); font-weight: 600; line-height: 24px; }
.catalog-menu__sub { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.catalog-menu__sub a { color: var(--c-text-muted); font-size: var(--fs-md); line-height: 20px; }
.catalog-menu a:hover { color: var(--c-green); }

.search {
  position: relative; /* the search history opens under it */
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 48px;
  padding-inline: 12px;
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  box-shadow: var(--shadow-raised);
}
.search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-size: var(--fs-lg);
  line-height: 24px;
}
.search__input::placeholder { color: var(--c-text-muted); opacity: 1; }
.search__input:focus { outline: none; }
.search__input::-webkit-search-cancel-button { margin-inline-end: 16px; } /* the browser's clear x, away from the magnifier */
.search:focus-within { box-shadow: var(--shadow-raised), 0 0 0 2px var(--c-green); }
.search__submit { display: grid; place-items: center; width: 32px; height: 32px; color: var(--c-green); }

/* search history (the last searches; ctheme2.js fills, opens and closes it): v1's popover look, under the field
   (above the whole bar on phones, see the bottom bar) */
.search-history {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline: 0;
  z-index: 30;
  max-width: 620px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-lg);
}
.search-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 12px;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 20px;
}
.search-history__clear { display: inline-flex; align-items: center; gap: 4px; color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: 400; line-height: 16px; }
.search-history__clear:hover { color: var(--c-text); }
.search-history__list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.search-history__list li { display: flex; align-items: center; gap: 12px; border-radius: 10px; }
.search-history__list li:hover { background: var(--c-surface-muted); }
.search-history__query { flex: 1; min-width: 0; padding: 10px; overflow-wrap: anywhere; }
.search-history__remove { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-xs); color: var(--c-text-muted); }
.search-history__remove:hover { background: rgb(220 38 38 / 8%); color: var(--c-required); }

.header-actions { order: 1; display: flex; gap: calc(4px + var(--sq)); margin-left: auto; }

/* round-cornered white icon button: header actions, footer socials, wishlist */
.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(36px + var(--sq)); /* 40px from 360, 48 from 480 */
  height: calc(36px + var(--sq));
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--shadow-raised);
  transition: box-shadow var(--ease), translate var(--ease);
}
.icon-btn:hover { box-shadow: var(--shadow-hover); translate: 0 -2px; }
.icon-btn__count {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 4px;
  border-radius: var(--radius-pill);
  background: var(--c-green);
  color: #fff;
  font: 700 var(--fs-xs) / 15px var(--font-badge);
}

/* ---- mini-cart popup ---- */
.minicart { position: relative; }
.minicart__panel {
  position: absolute;
  top: calc(100% + 30px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(440px, calc(100vw - 2 * var(--gutter)));
  padding: 24px;
  border-radius: var(--radius-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-lg);
}
.minicart__list { display: flex; flex-direction: column; gap: 16px; }
.minicart__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
}
.minicart__thumb {
  width: 64px;
  height: 64px;
  padding: 4px;
  border-radius: var(--radius-xs);
  background: var(--c-surface-muted);
  object-fit: contain;
}
.minicart__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.minicart__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-md);
  line-height: 20px;
}
.minicart__name:hover { color: var(--c-green); }
.minicart__qty, .minicart__price span { font-size: var(--fs-sm); line-height: 16px; }
.minicart__price { display: flex; flex-direction: column; white-space: nowrap; }
.minicart__price strong { color: var(--c-green); font-size: var(--fs-lg); line-height: 19px; }
.minicart__total {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: var(--c-text-muted);
}
.minicart__total strong { color: var(--c-text); font-weight: 600; }

/* ---- dimming: an open header popup (contacts, language, KATEGORIJOS, mini-cart) or the search history dims the page
   and the header (user 10-05). A fixed layer inside the popup's own stacking context, over everything there but the
   popup (z 30); a click on it is an outside click, so the popup closes. ---- */
.site-topbar:has([aria-expanded="true"])::before,
.site-header:has([aria-expanded="true"], .search-history:not([hidden]))::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 25;
  background: var(--c-dim);
  pointer-events: auto;
}
body:has(.site-header :is([aria-expanded="true"], .search-history:not([hidden]))) .site-topbar { z-index: 19; }
.search:has(.search-history:not([hidden])) { z-index: 30; } /* the field stays bright with its history */

/* ---- wider screens ---- */
@media (min-width: 480px) {
  .site-topbar { padding-top: 24px; }
  .site-header { --row1-h: 48px; }
  .site-logo { padding: 8px 12px; }
  .catalog-btn__label { display: inline; }
  .topbar__lang-name { display: inline; }
  .header-actions { gap: 16px; }
  .icon-btn { width: 48px; height: 48px; }
}
@media (min-width: 768px) {
  .site-header { --bar-pad-base: 24px; }
  .mainbar { --row-shift: calc(var(--stuck-row-gap) - 16px); row-gap: 16px; }
  .topbar__settings { grid-area: settings; display: flex; align-items: center; gap: 16px; }
  .topbar__pills { gap: 8px 16px; }
  .topbar__pills > li { order: 0; }
  .topbar__pills::after { content: none; }
  .topbar__pills .tag { padding-inline: 12px; }
  .flag { width: 16px; height: 12px; }
  .contacts-menu { padding: 24px; }
  .contacts-menu .icon { width: 16px; height: 16px; }
  .contacts-menu a { font-size: var(--fs-md); line-height: 20px; }
  .language-menu { padding: 24px; }
}
@media (min-width: 1024px) {
  .mainbar { --row-shift: 0px; flex-wrap: nowrap; gap: 24px; }
  .mainbar__find, .header-actions { order: 0; }
  .mainbar__find { flex-basis: auto; }
}
@media (min-width: 1280px) {
  .topbar { grid-template-columns: auto 1fr auto; grid-template-areas: "links pills settings"; }
}

/* ---- sticky: once the utility strip has scrolled away (site.js adds .is-stuck) only the bar's own controls stay,
   --stuck-ctl tall (28px, a third under 40), floating on a transparent bar --stuck-gap from the top edge, the two
   phone rows --stuck-row-gap apart (user decisions 10-05, over Figma's page-colour "Scroll header").
   Nothing changes size in the page flow, so nothing jumps: the padding grows by what the 48px controls shrink
   (--stuck-pad-add: two rows below 1024, one from 1024, split over top and bottom), the bar sticks with a negative
   top (its top padding slides out of view) and the second phone row is shifted up. Below 1024 the bar slides away
   while scrolling down (site.js: .is-scrolling-down) and returns on any scroll up. The transparent parts let clicks
   through to the page. Only on screens tall enough to spare it (not on phones held sideways).
   --header-stuck-h = what stays visible, keeps anchor targets clear of it. ---- */
:root {
  --stuck-gap: 8px;
  --stuck-row-gap: 2px;
  --stuck-ctl: 28px;
  --stuck-pad-add: calc(48px - var(--stuck-ctl));
  --header-stuck-h: calc(var(--stuck-gap) + 2 * var(--stuck-ctl) + var(--stuck-row-gap));
}
@media (min-width: 1024px) {
  :root { --stuck-pad-add: calc((48px - var(--stuck-ctl)) / 2); --header-stuck-h: calc(var(--stuck-gap) + var(--stuck-ctl)); }
}
@media (min-height: 500px) {
  html { scroll-padding-top: calc(var(--header-stuck-h) + 16px); }
  .site-header { position: sticky; top: calc(var(--stuck-gap) - var(--bar-pad)); }
  .site-header.is-stuck {
    --bar-pad: calc(var(--bar-pad-base) + var(--stuck-pad-add));
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }
  .site-header.is-stuck :is(.site-logo, .mainbar__find, .header-actions) { pointer-events: auto; }
  .site-header.is-stuck :is(.site-logo, .catalog-btn, .search, .icon-btn) { height: var(--stuck-ctl); border-radius: var(--radius-xs); }
  .site-header.is-stuck .site-logo { padding: 4px 8px; }
  .site-header.is-stuck .site-logo img { width: 72px; }
  .site-header.is-stuck .catalog-btn { padding: 0 8px; }
  .site-header.is-stuck .search { padding-inline: 8px; }
  .site-header.is-stuck .search__input { line-height: 20px; }
  .site-header.is-stuck .search__submit { width: 24px; height: 24px; }
  .site-header.is-stuck :is(.search__submit, .icon-btn) .icon { width: 18px; height: 18px; }
  .site-header.is-stuck .icon-btn { width: var(--stuck-ctl); }
  .site-header.is-stuck .icon-btn__count { min-width: 16px; height: 16px; padding-inline: 3px; font-size: 9px; line-height: 16px; }
  .site-header.is-stuck :is(.catalog-btn, .search, .catalog-menu) { translate: 0 var(--row-shift); }
  .site-header.is-stuck.is-scrolling-down { translate: 0 -100%; } /* phones and tablets only, see below */
}
@media (min-width: 1024px) {
  .site-header.is-stuck.is-scrolling-down { translate: none; }
}

/* ---- phones: the stuck bar sits at the bottom of the screen, 2px from the edge, the search row lowest (user 10-05).
   The header keeps its height in the page (nothing jumps) while its bar is fixed at the bottom. Scrolling down slides
   the bar away, any scroll up brings it back; popups and the search history open upwards; while the search has focus
   the rows part to 12px and the bar rises to 12px above the edge. An open popup keeps the whole bar bright. ---- */
@media (min-height: 500px) and (not (min-width: 768px)) {
  html { scroll-padding-top: 16px; }
  .site-header.is-stuck { height: calc(2 * var(--bar-pad-base) + var(--row1-h) + 10px + 48px); }
  .site-header.is-stuck .mainbar {
    position: fixed;
    inset-inline: 0;
    bottom: 2px;
    row-gap: var(--stuck-row-gap);
    transition: translate var(--ease), bottom var(--ease);
  }
  .site-header.is-stuck :is(.catalog-btn, .search, .catalog-menu) { translate: none; }
  .site-header.is-stuck.is-scrolling-down { translate: none; }
  .site-header.is-stuck.is-scrolling-down .mainbar { translate: 0 calc(100% + 2px); }
  .site-header.is-stuck :is(.catalog-menu, .minicart__panel) { top: auto; bottom: calc(100% + 12px); }
  .site-header.is-stuck .search { position: static; }
  .site-header.is-stuck .search-history { top: auto; bottom: calc(100% + 12px); inset-inline: var(--gutter); max-width: none; }
  .site-header.is-stuck .mainbar:has(.search__input:focus) { row-gap: 12px; bottom: 12px; }
  .site-header.is-stuck .mainbar:has([aria-expanded="true"], .search-history:not([hidden])) { z-index: 26; }
}

/* ---- back to top: a small half-transparent button in the bottom-right corner, shown only after a scroll down
   while the bar is stuck (it follows <header> in the partial); any scroll up hides it. 20px to see, with a 40px
   invisible hit area around it. After the media queries so its size wins over .icon-btn's. ---- */
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: 24px;
  z-index: 19; /* under the header's popups */
  width: 20px;
  height: 20px;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ease), visibility var(--ease), box-shadow var(--ease), translate var(--ease);
}
.to-top::before { content: ""; position: absolute; inset: -10px; }
.to-top .icon { width: 12px; height: 12px; }
.site-header.is-stuck.is-scrolling-down ~ .to-top { opacity: 0.5; visibility: visible; }
.site-header.is-stuck.is-scrolling-down ~ .to-top:is(:hover, :focus-visible) { opacity: 1; }