/* ==========================================================================
   Pricetracker Site Header — Bästa.nu
   Header bar, search, action icons, search autocomplete.
   ========================================================================== */

.pt-site-header {
    --ptsh-bg: #ffffff;
    --ptsh-text: #1b3152;
    --ptsh-muted: #6b7280;
    --ptsh-border: #e5e7eb;
    --ptsh-active-bg: #f3f4f6;
    --ptsh-accent: #1b3152;
    --ptsh-focus: #1d4ed8;
    --ptsh-inner-height: 80px;
    position: relative !important;
    z-index: 120 !important;
    background: var(--ptsh-bg) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

/* ---------- Header bar ---------- */
.pt-site-header__inner {
    display: grid !important;
    grid-template-columns: auto auto 1fr auto !important;
    align-items: center !important;
    gap: 0.75rem !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 clamp(0.75rem, 2vw, 2rem) !important;
    height: var(--ptsh-inner-height) !important;
}

/* ---------- Hamburger ---------- */
.pt-site-header__hamburger,
.pt-site-header__hamburger:hover,
.pt-site-header__hamburger:focus,
.pt-site-header__hamburger:focus-visible,
.pt-site-header__hamburger:active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.pt-site-header__hamburger-lines {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 22px !important;
}

.pt-site-header__hamburger-lines span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    border-radius: 1px !important;
    background: #1b3152 !important;
}

/* ---------- Brand ---------- */
.pt-site-header__brand { line-height: 0 !important; }

.pt-site-header__brand-link,
.pt-site-header__brand-link:hover,
.pt-site-header__brand-link:focus,
.pt-site-header__brand-link:active,
.pt-site-header__brand-link:visited {
    display: inline-flex !important; align-items: center !important;
    text-decoration: none !important; color: var(--ptsh-text) !important;
    line-height: 0 !important; transform: none !important; box-shadow: none !important;
    outline: none !important; border: 0 !important; background: transparent !important;
}

.pt-site-header__brand-link img,
.pt-site-header__brand-link svg {
    display: block !important; max-height: 48px !important; width: auto !important;
    height: auto !important; transform: none !important; box-shadow: none !important;
    transition: none !important;
}

.pt-site-header__brand-text { font-size: 1.3rem !important; font-weight: 700 !important; line-height: 1.1 !important; }

/* ---------- Search ---------- */
.pt-site-header__search-wrap { width: 100% !important; max-width: 520px !important; justify-self: center !important; position: relative !important; }

.pt-site-header__search {
    position: relative !important; display: flex !important; align-items: center !important;
    border: 1px solid var(--ptsh-border) !important; border-radius: 999px !important;
    background: #fff !important; box-shadow: none !important;
}

.pt-site-header__search:focus-within { border-color: #d1d5db !important; box-shadow: none !important; }

.pt-site-header__search input,
.pt-site-header__search input[type="search"] {
    width: 100% !important; min-width: 0 !important; border: 0 !important; outline: none !important;
    background: transparent !important; padding: 0.6rem 1rem !important; font-size: 0.9rem !important;
    color: var(--ptsh-text) !important; box-shadow: none !important; appearance: none !important;
}

.pt-site-header__search input:focus,
.pt-site-header__search input:focus-visible,
.pt-site-header__search input[type="search"]:focus,
.pt-site-header__search input[type="search"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.pt-site-header__search button[type="submit"],
.pt-site-header__search button[type="submit"]:hover,
.pt-site-header__search button[type="submit"]:focus {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 38px !important; height: 38px !important; flex-shrink: 0 !important; margin-right: 0.2rem !important;
    padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--ptsh-muted) !important;
    cursor: pointer !important; box-shadow: none !important; transform: none !important; border-radius: 0 !important;
}

.pt-site-header__search svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }

/* ---------- Action icons ---------- */
.pt-site-header__actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
    width: calc(84px + 0.5rem) !important;
    min-width: calc(84px + 0.5rem) !important;
    flex: 0 0 calc(84px + 0.5rem) !important;
    box-sizing: border-box !important;
}

.pt-site-header__action,
button.pt-site-header__action,
a.pt-site-header__action {
    position: relative !important; display: inline-flex !important; align-items: center !important;
    justify-content: center !important; width: 42px !important; height: 42px !important;
    min-width: 42px !important; min-height: 42px !important; max-width: 42px !important; max-height: 42px !important;
    padding: 0 !important; margin: 0 !important; flex: 0 0 42px !important;
    border: 1px solid var(--ptsh-border) !important; border-radius: 999px !important; background: #fff !important;
    color: var(--ptsh-text) !important; text-decoration: none !important; cursor: pointer !important;
    box-shadow: none !important; transform: none !important; appearance: none !important; outline: none !important;
}

.pt-site-header__action:hover, .pt-site-header__action:focus, .pt-site-header__action:active,
button.pt-site-header__action:hover, button.pt-site-header__action:focus,
a.pt-site-header__action:hover, a.pt-site-header__action:focus, a.pt-site-header__action:visited {
    background: #f9fafb !important; border-color: #d1d5db !important; color: var(--ptsh-text) !important;
    box-shadow: none !important; transform: none !important; text-decoration: none !important; outline: none !important;
}

.pt-site-header__action svg { width: 19px !important; height: 19px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; display: block !important; }

.pt-site-header__action-count {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #1b3152 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}

.pt-site-header__action-count[hidden] {
    display: none !important;
}

/* ---------- Mobile search toggle (hidden on desktop) ---------- */
/* Must beat `button.pt-site-header__action { display: inline-flex }` specificity */
.pt-site-header__inner button.pt-site-header__action.pt-site-header__action--search-toggle {
    display: none !important;
}

/* ---------- Mobile search bar ---------- */
.pt-mobile-search {
    overflow: hidden !important;
    max-height: 0 !important;
    transition: max-height .12s cubic-bezier(.4,0,.2,1) !important;
    background: var(--ptsh-bg, #fff) !important;
    border-bottom: 1px solid transparent !important;
    position: relative !important;
    z-index: 119 !important;
}
.pt-mobile-search.is-open { max-height: 80px !important; border-bottom-color: var(--ptsh-border, #e5e7eb) !important; }

.pt-mobile-search__inner {
    padding: .5rem clamp(0.75rem, 2vw, 2rem) !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    position: relative !important;
}

/* ==========================================================================
   Login Modal
   --------------------------------------------------------------------------
   MOVED OUT. The login/create-account modal (.pt-login-modal) design now
   lives in ONE place: assets/css/login-modal.css, enqueued for every
   logged-out frontend request by Assets::enqueueLoginModalAssets().
   Do NOT re-add .pt-login-modal rules here — cross-file specificity drift
   between this file and single-product-overrides.css is exactly what that
   refactor removed.
   ========================================================================== */

/* ==========================================================================
   Responsive — Header bar
   ========================================================================== */

@media (max-width: 1024px) {
    .pt-site-header { --ptsh-inner-height: 72px; }
    .pt-site-header__inner { grid-template-columns: auto 1fr auto !important; gap: .5rem !important; height: var(--ptsh-inner-height) !important; }
    .pt-site-header__search-wrap { display: none !important; }
    .pt-site-header__brand-link img, .pt-site-header__brand-link svg { max-height: 40px !important; }
    .pt-site-header__inner button.pt-site-header__action.pt-site-header__action--search-toggle {
        display: inline-flex !important;
    }
    .pt-site-header__actions {
        width: calc(126px + 1rem) !important;
        min-width: calc(126px + 1rem) !important;
        flex-basis: calc(126px + 1rem) !important;
    }
}

@media (max-width: 768px) {
    .pt-site-header { --ptsh-inner-height: 68px; }
}

@media (max-width: 480px) {
    .pt-site-header { --ptsh-inner-height: 64px; }
    .pt-site-header__inner { padding-left: .5rem !important; padding-right: .5rem !important; gap: .3rem !important; height: var(--ptsh-inner-height) !important; }
    .pt-site-header__action, button.pt-site-header__action, a.pt-site-header__action {
        width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important;
        max-width: 40px !important; max-height: 40px !important; flex: 0 0 40px !important;
    }
    .pt-site-header__action svg { width: 17px !important; height: 17px !important; }
    .pt-site-header__hamburger, .pt-site-header__hamburger:hover, .pt-site-header__hamburger:focus { width: 40px !important; height: 40px !important; }
    .pt-site-header__hamburger-lines { width: 20px !important; }
    .pt-site-header__actions {
        gap: .2rem !important;
        width: calc(80px + .2rem) !important;
        min-width: calc(80px + .2rem) !important;
        flex-basis: calc(80px + .2rem) !important;
    }
    /* Beat the base `button.pt-site-header__action` display rule. */
    .pt-site-header__actions button.pt-site-header__action.pt-site-header__action--favorites {
        display: none !important;
    }
    .pt-site-header__brand-link img, .pt-site-header__brand-link svg { max-height: 36px !important; }
}

/* ---------- Focus-visible ---------- */
.pt-site-header__hamburger:focus-visible,
.pt-site-header__action:focus-visible,
button.pt-site-header__action:focus-visible,
a.pt-site-header__action:focus-visible {
    outline: 2px solid var(--ptsh-focus) !important;
    outline-offset: 2px !important;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .pt-site-header__search,
    .pt-mobile-search { transition: none !important; }
}