/* Desktop header nav (parts/header-nav.php): "Visos prekės" category menu, quick-link pills, "Informacija" dropdown.
   Hidden ≤1100 px, where the drawer menu takes over. */
.header__main { gap: 28px; }
.hnav { position: relative; display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; }

/* Shared pill look */
.catnav__btn, .hnav__pill, .infonav__btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-white); color: var(--c-navy); font: inherit; font-size: 15px; font-weight: 650; white-space: nowrap; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.hnav__pill:hover, .infonav__btn:hover { border-color: var(--c-navy); }

.catnav__btn { padding: 0 20px 0 16px; border: 2px solid var(--c-navy); font-weight: 700; }
.catnav__btn .icon { width: 20px; height: 20px; }
.catnav__btn:hover, .catnav__btn[aria-expanded="true"] { background: var(--c-navy); color: var(--c-white); }

.hnav__pills { display: flex; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.hnav__pill--sale { border-color: var(--c-tomato); background: var(--c-tomato); color: var(--c-white); font-weight: 700; }
.hnav__pill--sale:hover { border-color: var(--c-tomato-dark); background: var(--c-tomato-dark); }

/* Category panel: list on the left, subcategories of the hovered category on the right */
.catnav__panel { position: absolute; top: calc(100% + 15px); left: 0; z-index: 60; display: grid; grid-template-columns: 280px minmax(0, 1fr); width: min(1060px, calc(100vw - 2 * var(--gutter) - 140px)); min-height: 400px; overflow: hidden; border: 1px solid var(--c-line); border-radius: 0 0 var(--radius) var(--radius); background: var(--c-white); box-shadow: 0 24px 48px rgba(31, 42, 68, .16); }
.catnav__panel[hidden] { display: none; }
.catnav__list { margin: 0; padding: 10px 0; list-style: none; border-right: 1px solid var(--c-line); }
.catnav__cat { display: flex; align-items: center; gap: 12px; padding: 9px 18px; font-size: 15px; font-weight: 600; color: var(--c-navy); transition: background-color .15s var(--ease); }
.catnav__cat.is-active, .catnav__cat:hover { background: var(--c-cream); }
.catnav__cat.is-active { box-shadow: inset 3px 0 0 var(--c-tomato); }
.catnav__thumb { flex: none; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: var(--c-sand); }
.catnav__thumb img { width: 100%; height: 100%; object-fit: cover; }
.catnav__name { flex: 1; min-width: 0; }
.catnav__arrow { width: 16px; height: 16px; color: var(--c-muted); transform: rotate(-90deg); }
.catnav__sep { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--c-line); }
.catnav__cat--plain .icon { width: 22px; height: 22px; margin-inline: 5px; color: var(--c-navy-soft); }

.catnav__sub { padding: 24px 28px 28px; background: var(--c-cream); }
.catnav__sub[hidden] { display: none; }
.catnav__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line); }
.catnav__title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--c-navy); }
.catnav__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.catnav__item { display: flex; align-items: center; gap: 12px; height: 100%; padding: 10px 12px; border-radius: var(--radius-s); background: var(--c-white); box-shadow: 0 0 0 1px var(--c-line); transition: box-shadow .15s var(--ease), transform .15s var(--ease); }
.catnav__item:hover { box-shadow: 0 0 0 1px var(--c-line-strong), var(--shadow); transform: translateY(-1px); }
.catnav__img { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; background: var(--c-sand); }
.catnav__img img { width: 100%; height: 100%; object-fit: cover; }
.catnav__item-name { display: block; font-size: 15px; font-weight: 650; line-height: 1.3; color: var(--c-navy); }
.catnav__item:hover .catnav__item-name { color: var(--c-tomato-dark); }
.catnav__count { display: block; margin-top: 2px; font-size: 13px; color: var(--c-muted); }

/* Dim the page while the category panel is open */
.hnav__scrim { position: fixed; inset: var(--hnav-top, 0) 0 0 0; z-index: 49; background: rgba(31, 42, 68, .35); }
.hnav__scrim[hidden] { display: none; }

/* Informacija */
.infonav { position: relative; margin-left: auto; }
.infonav__btn { border-color: transparent; background: transparent; }
.infonav__chev { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.infonav__btn[aria-expanded="true"] { border-color: var(--c-line-strong); }
.infonav__btn[aria-expanded="true"] .infonav__chev { transform: rotate(180deg); }
.infonav__panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 280px; margin: 0; padding: 6px 0; list-style: none; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); box-shadow: 0 16px 40px rgba(31, 42, 68, .14); }
.infonav__panel[hidden] { display: none; }
.infonav__panel li + li { border-top: 1px solid var(--c-line); }
.infonav__link { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 15px; font-weight: 550; color: var(--c-navy); }
.infonav__link:hover { background: var(--c-cream); color: var(--c-tomato-dark); }
.infonav__link--icon .icon { width: 20px; height: 20px; color: var(--c-navy-soft); }

@media (max-width: 1280px) {
  .header__main { gap: 20px; }
  .hnav__pills li:nth-child(n+3) { display: none; }
  .catnav__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) { .hnav { display: none; } }

/* "Informacija" in the dark top bar (parts/header-info.php) */
.topbar .infonav { margin-left: 0; }
.topbar .infonav__btn { height: 34px; padding: 0 10px; border: 0; background: transparent; color: #E4E7EE; font-size: 15px; font-weight: 600; }
.topbar .infonav__btn:hover, .topbar .infonav__btn[aria-expanded="true"] { background: rgba(255, 255, 255, .12); color: var(--c-white); }
.topbar .infonav__panel { top: calc(100% + 7px); white-space: normal; }
.topbar .infonav__link { color: var(--c-navy); }
.topbar .infonav__link:hover { color: var(--c-tomato-dark); }