/*
 * Header chrome — Figma Component 18 (full 88px, node 2156:2249), Component 31 (compact sticky
 * 48px, node 2156:2778), Component 76 (mobile 84px, node 2431:7466), shop dropdown (2431:3885),
 * profile dropdown (2286:5368 light / 2431:4172 dark), mobile drawer (2431:4904 / 2431:5133).
 */
.pv-header__bar {
    background: var(--sodri-raudona);
    color: var(--balta);
}

.pv-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: var(--header-h);
}

.pv-header__bar--compact {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header-sticky);
}

/* The compact bar slides down instead of snapping in (Design-QA #18). The [hidden] attribute stays
   the single source of truth (sticky_header_controller toggles it) — only the UA's display:none is
   traded for an off-screen, non-interactive state so the transform has something to animate. */
.pv-header__bar--compact[hidden] {
    display: block;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
}

.pv-header__bar--compact {
    transition: transform .25s ease, opacity .25s ease, visibility .25s;
}

@media (prefers-reduced-motion: reduce) {
    .pv-header__bar--compact {
        transition: none;
    }
}

.pv-header__bar--compact .pv-header__inner {
    height: var(--header-h-compact);
}

.pv-header__nav--left {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    justify-self: start;
}

.pv-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    justify-self: end;
}

.pv-header__navlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: .7px;
    text-transform: uppercase;
    text-decoration: none;
}

/* Hover not drawn in Figma — footer shows underline as the link hover convention */
.pv-header__navlink:hover {
    text-decoration: underline;
}

.pv-header__lang {
    display: inline-flex;
    align-items: center;
    /* 2287:5869: LT text box ends x1300, chevron starts x1304. */
    gap: 4px;
    font-size: 14px;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.pv-header__person {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1);
}

.pv-header__burger {
    display: none;
    justify-self: start;
    padding: var(--space-2);
    margin-left: calc(-1 * var(--space-2));
    border: 0;
    background: none;
    cursor: pointer;
}

/* Logo lockup */
.pv-logo {
    display: inline-flex;
    align-items: center;
    /* Figma header lockup: mark↔wordmark gap ~20px (mark right 797 → wordmark 817.5). */
    gap: 20px;
    justify-self: center;
}

/* Cart pill — 65×32, fully rounded, grows with count (all headers) */
.pv-cart-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 65px;
    height: 32px;
    padding-inline: var(--space-3);
    border-radius: 32px;
    /* --ryski-raudona-band (white text 4.84:1) not raw --ryski-raudona (4.2:1 < AA). */
    background: var(--ryski-raudona-band);
    color: var(--balta);
    font-size: 14px;
    letter-spacing: .7px;
    text-decoration: none;
}

/* Dropdowns (shop nav / about nav / profile) */
.pv-dropdown {
    position: relative;
}

.pv-dropdown__menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: var(--z-dropdown);
    min-width: 234px;
    padding: var(--space-4) var(--space-3) var(--space-3);
    border-radius: var(--radius-card);
    background: var(--balta);
    box-shadow: var(--shadow-panel);
    /* Entrance replays each time the controller removes [hidden] (keyframe in base.css). */
    animation: pv-fade-down .18s ease-out;
}

.pv-dropdown--right .pv-dropdown__menu {
    left: auto;
    right: 0;
}

.pv-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* One row style across all three dropdowns — shop nav, "Apie mus" and the account menu (Design-QA
   #24: the account menu used its own radius/padding/hover colour and dark icons). */
.pv-nav-menu a,
.pv-profile-menu a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 30px;
    margin-bottom: var(--space-1);
    padding-inline: var(--space-3);
    border-radius: 15px;
    color: var(--juoda);
    font-size: 14px;
    letter-spacing: .7px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.pv-nav-menu li:last-child a {
    margin-bottom: 0;
}

.pv-nav-menu a:hover,
.pv-nav-menu a:focus-visible,
.pv-profile-menu a:hover,
.pv-profile-menu a:focus-visible {
    background: var(--neutrali-pilka);
}

/* Profile menu — 291px card, 5 rows (light default; dark variant inside the drawer).
   Figma 2286:5485 'Profilio meniu': 21px above the first row pill, 16px sides, 23px below the
   last — the nav dropdowns keep their own 16/12/12 shell. */
.pv-profile-menu {
    list-style: none;
    width: 291px;
    margin: 0;
    padding: 21px 16px 23px;
}

/* Rows are 32px pills r16 with 2px between them (nav menus stay 30/15/4); the icon sits 24px in
   with a 16px gap to the label. */
.pv-profile-menu a {
    height: 32px;
    margin-bottom: 2px;
    padding: 0 16px 0 24px;
    gap: 16px;
    border-radius: 16px;
}

/* Every glyph occupies the same 14×14 slot regardless of its natural size (2286:5485 keeps all
   five icon frames 14×14 and the labels at one fixed x), so narrower marks centre instead of
   pushing their label left. */
.pv-profile-menu__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

/* The row for the page the visitor is ON: --neutrali-pilka pill + red label/icon (the template
   swaps the icon asset; only light menus mark activity — the drawer variant never gets the class). */
.pv-profile-menu a.is-active {
    background: var(--neutrali-pilka);
    color: var(--ryski-raudona);
}

/* Desktop dropdown: the menu floats over the maroon header, so it needs its own white card —
   without a background the first row's dark text lands on the header bar (1.36:1). The --dark
   drawer variant lives elsewhere and keeps its own background.
   Anchoring (Figma 2286:5485): the panel's RIGHT edge lines up with the cart pill's right edge
   (both x1435), not with the person button — so the containing block is .pv-header__actions
   (position:relative below; the wrapper drops .pv-dropdown's own relative). Top: panel y79 in the
   88px bar; the actions box is the flex-centred 32px strip at y28..60 → 79 − 60 = 19px below it. */
/* Flex, not the default block: an inline-flex button inside a block wrapper is BASELINE-aligned in
   a text line box (~20px tall with the inherited leading), which pushed the 16px glyph 2px above
   the 44px header centre every other action sits on. Flex makes the wrapper hug the button. */
.pv-header__profile {
    position: static;
    display: flex;
    align-items: center;
}

.pv-header__actions {
    position: relative;
}

.pv-header__profile .pv-profile-menu {
    position: absolute;
    top: calc(100% + 19px);
    right: 0;
    z-index: var(--z-dropdown);
    background: var(--balta);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-panel);
    animation: pv-fade-down .18s ease-out;
}

.pv-profile-menu li:last-child a {
    margin-bottom: 0;
}

.pv-profile-menu--dark {
    background: var(--sodri-raudona);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-panel);
}

.pv-profile-menu--dark a {
    color: var(--balta);
}

.pv-profile-menu--dark a:hover,
.pv-profile-menu--dark a:focus-visible {
    background: var(--ryski-raudona);
    color: var(--balta);
}

/* Mobile drawer — full-screen takeover (2431:4904 guest / 2431:5133 logged in) */
.pv-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    overflow-y: auto;
    background: var(--sodri-raudona);
    color: var(--balta);
}

.pv-drawer[hidden] {
    display: none;
}

.pv-drawer__top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: var(--header-h-mobile);
}

.pv-drawer__top .pv-cart-pill {
    justify-self: end;
}

.pv-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    /* Only way out of a full-bleed drawer on touch, so the hit area is 44px; the negative margin
       keeps the 13px glyph on the design's x18.5 (2431:4904) instead of pushing it inward. */
    margin-left: -13px;
    border: 0;
    background: none;
    cursor: pointer;
}

.pv-drawer__divider {
    border: 0;
    border-top: 1px solid var(--linija-tamsi);
    margin: 0;
}

.pv-drawer__account {
    padding: var(--space-4) var(--container-pad);
}

/* Logged-in band: divider→divider is 62px in 2431:5133 — a 44px hit target plus 9px of air. The
   guest branch keeps 24px around its red button (2431:4904 draws a 100px band). */
.pv-drawer__account:has(.pv-drawer__account-toggle) {
    padding-block: 9px;
}

.pv-drawer__login {
    width: 100%;
    font-size: 16px;
    letter-spacing: .8px;
}

.pv-drawer__account-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--neutrali-pilka);
    cursor: pointer;
    font-size: 16px;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.pv-drawer__account-toggle img:last-child {
    transition: transform .15s ease;
}

.pv-drawer__account-toggle[aria-expanded="true"] img:last-child {
    transform: rotate(180deg);
}

/* Drawer variant of the profile menu (account.png / 2431:5133): full-width rows straight on the
   maroon panel — not the desktop card — at the drawer's own 16px type and 46px pitch. */
.pv-drawer .pv-profile-menu {
    width: auto;
    padding: 0 var(--container-pad);
    border-radius: 0;
    box-shadow: none;
}

.pv-drawer .pv-profile-menu a {
    height: 44px;
    margin-bottom: 2px;
    padding-inline: 0;
    border-radius: 22px;
    font-size: 16px;
    letter-spacing: .8px;
}

/* Expanding the account list replaces the MENIU section — the drawer shows one at a time, and the
   red heading swaps with it (account.png). The list's [hidden] flag is the controller's state. */
.pv-drawer__label--account {
    display: none;
}

.pv-drawer__account-region:has(.pv-profile-menu:not([hidden])) .pv-drawer__label--account {
    display: block;
}

.pv-drawer__account-region:has(.pv-profile-menu:not([hidden])) ~ .pv-drawer__label,
.pv-drawer__account-region:has(.pv-profile-menu:not([hidden])) ~ .pv-drawer__nav,
.pv-drawer__account-region:has(.pv-profile-menu:not([hidden])) ~ .pv-drawer__lang {
    display: none;
}

.pv-drawer__label {
    margin: 32px var(--container-pad) 18px;
    color: var(--ryski-raudona);
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 1.6px;
    font-weight: 300;
    text-transform: uppercase;
}

.pv-drawer__nav ul {
    list-style: none;
    margin: 0;
    padding: 0 var(--container-pad);
}

/* Row pitch 43px ≈ 16px text + vertical padding */
.pv-drawer__nav a {
    display: block;
    padding: 10px 0;
    color: var(--balta);
    font-size: 16px;
    letter-spacing: .8px;
    text-transform: uppercase;
    text-decoration: none;
}

.pv-drawer__nav a:hover {
    text-decoration: underline;
}

.pv-drawer__lang {
    display: inline-flex;
    margin: var(--space-6) var(--container-pad);
}

.pv-drawer__deco {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 156px;
    pointer-events: none;
}

/* Breakpoints — single mobile header ≤768px, desktop chrome above */
@media (max-width: 768px) {
    .pv-header__bar--full .pv-header__inner {
        height: var(--header-h-mobile);
    }

    .pv-header__bar--full .pv-logo__mark {
        width: 23px;
        height: 32px;
    }

    .pv-header__bar--full .pv-logo__wordmark {
        width: 88px;
        height: 20px;
    }

    /* Hide scoped to the header bars — the drawer keeps its LT indicator (2431:4904) */
    .pv-header__bar .pv-header__lang,
    .pv-header__nav--left,
    .pv-header__person,
    .pv-header__profile {
        display: none;
    }

    /* Sole nav opener at this width, so it carries a 44px hit area; the negative margin keeps the
       18px glyph on the design's x16 gutter (Component 76). */
    .pv-header__burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        margin-left: -13px;
    }

    /* Cart pill is the only route to the cart on mobile (A5). The painted 65×32 pill is correct per
       Component 76 — only the hit area grows, via an overlay that leaves geometry untouched. */
    .pv-cart-pill {
        position: relative;
    }

    .pv-cart-pill::after {
        content: "";
        position: absolute;
        inset: -6px -4px;
    }

    /* No compact variant on mobile — one header (Component 76) */
    .pv-header__bar--compact {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .pv-drawer {
        display: none !important;
    }
}

/* Logged-in indicator (Figma 2286:5136 Group 5096): a 4px --taskas-online dot whose left edge
   touches the 12×16 person glyph's right edge, 6px down from its top — beside the head, not on
   the shoulder. Drawn here rather than swapped for another SVG so the header keeps one white
   person asset, and so the dot lands identically on both the compact and full bars.
   Offsets are measured from the element's CENTRE, not its top-left: the glyph is centred in the
   box, but the two carriers pad differently (the full bar's button has none, the compact bar's
   link has 4px), so top/left anchoring put the dot in a different place on each. From the centre:
   dot left = glyph right = 50% + 6, dot top = glyph top + 6 = 50% − 2. */
.pv-header__person--online {
    position: relative;
}

.pv-header__person--online::after {
    content: '';
    position: absolute;
    left: calc(50% + 6px);
    top: calc(50% - 2px);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--taskas-online);
}