/*
 * 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;
    gap: 6px;
    font-size: 14px;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.pv-header__person {
    display: inline-flex;
    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) */
.pv-profile-menu {
    list-style: none;
    width: 291px;
    margin: 0;
    padding: var(--space-4) var(--space-3) var(--space-3);
}

/* 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. */
.pv-header__profile .pv-profile-menu {
    position: absolute;
    top: calc(100% + 12px);
    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;
    }
}