/*
 * 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;
    /* Comp red, restored 2026-08-18 (pixel-match audit): the mobile frame's pill samples
       238,39,55 = #ee2737. Reverses the AA darkening (#dc2433, white 4.84:1 vs 4.2:1 < AA) —
       recorded trade-off, same call as the hero band in catalog.css. */
    background: var(--ryski-raudona);
    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;
    /* 24 / 16 / 22 from 2431:3885: the pill runs 202 wide at x16, the first row's box starts at
       y24 and the last one ends 22 short of the 144 panel — the bottom is deliberately not the
       top. (The account menu keeps its own 21/16/23 shell below.) */
    padding: var(--space-4) var(--space-3) 22px;
    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) {
    /* Client 2026-08-19: mobile header sticks like the desktop one. The FULL bar itself stays
       (no compact swap on mobile — Component 76 is the only mobile header); the wrapper is the
       sticky box so the bar can never scroll out of its parent's height. */
    .pv-header {
        position: sticky;
        top: 0;
        z-index: var(--z-header-sticky);
    }

    /* The drawer's top row must render the logo EXACTLY like the header row it covers —
       same 12px mark-wordmark gap and the same 4px optical centring — otherwise the lockup
       visibly jumps when the menu opens (client: "logo changes somehow"). */
    .pv-drawer__top {
        padding-top: 4px;
    }

    .pv-drawer__top .pv-logo {
        gap: 12px;
    }

    .pv-header__bar--full .pv-header__inner {
        height: var(--header-h-mobile);
        /* Content mid-line 44 from the band top, not 42: the comp's burger, monogram and pill all
           centre on y91 of a band at 47..131 (status bar 47 + the 84 band) — 44 down, 40 up. With
           border-box height 84, 4px of top padding centres the row in the remaining 80. */
        padding-top: 4px;
    }

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

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

    /* The mobile frame tightens the mark↔wordmark gap to 12 (ink: mark ends 142.5, text starts
       154.5) — the desktop's 20 made the centred lockup 8 wider and shifted the mark 4.5px left. */
    .pv-header__bar--full .pv-logo {
        gap: 12px;
    }

    /* 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. */
/* Account toggle carries a chevron like the LT switch. The gap is 8px, not the switch's 4px,
   because the online dot below is anchored at the glyph's right EDGE and overhangs its box by
   its full 4px width — it sits inside the gap, so a 4px gap left the dot touching the chevron.
   8px spends 4px on the dot and leaves the switch's 4px of actual air after it.

   The glyph is wrapped so ::after still measures from the GLYPH's box — anchoring to the button
   would drift the dot once the chevron widened it. */
.pv-header__profile-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pv-header__person--online {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.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);
}


/* Language switch (2026-08-19): trigger inherits the old .pv-header__lang look; the panel is
   the standard nav dropdown, right-aligned, narrow. */
.pv-header__lang-switch .pv-dropdown__menu {
    min-width: 72px;
}

.pv-header__lang-switch .pv-nav-menu a[aria-current='true'] {
    font-weight: 600;
}

.pv-drawer__lang {
    display: inline-flex;
    gap: var(--space-4);
}

.pv-drawer__lang-link {
    color: var(--balta);
    text-decoration: none;
    font-size: 14px;
    opacity: .6;
}

.pv-drawer__lang-link.is-active {
    opacity: 1;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}