/**
 * Header block — main header row.
 * Author: Hehocom — https://hehocom.fr
 *
 * Tokens consumed from themes/hummingbird/assets/css/heho.css.
 * No hardcoded brand colors — pro palette swap via [data-heho-theme="pro"]
 * works out of the box on any descendant module that opts in
 * (e.g. the hehopro CTA hooked into displayHeaderPro).
 */

.hehoblocks-header {
    width: 100%;
    background-color: var(--heho-color-bg);
    padding: var(--heho-space-5) 0;
    color: var(--heho-color-text);
    font-family: var(--heho-font-primary);
}

.hehoblocks-header__container {
    max-width: var(--heho-container-max);
    margin: 0 auto;
    padding-inline: var(--heho-container-padding-x-lg);
    display: flex;
    align-items: center;
    gap: var(--heho-space-7);
}

/* ─── Logo ─────────────────────────────────────────────────────────── */

.hehoblocks-header__logo a {
    display: inline-flex;
    align-items: center;
    height: 3.125rem; /* 50px */
}

.hehoblocks-header__logo img,
.hehoblocks-header__logo .logo {
    height: 100%;
    width: auto;
    max-width: 18.75rem; /* 300px */
    display: block;
}

/* ─── Search ───────────────────────────────────────────────────────── */

.hehoblocks-header__search {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    min-width: 0;
    border-radius: var(--heho-radius-sm);
    overflow: hidden;
    border: 1px solid var(--heho-color-border-medium);
    background-color: var(--heho-color-bg-soft);
}

.hehoblocks-header__search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 3.75rem; /* 60px */
    padding: 1rem 1.5rem;
    border: 0;
    background: transparent;
    font-size: var(--heho-font-size-base);
    color: var(--heho-color-text);
    outline: none;
}

.hehoblocks-header__search-input::placeholder {
    color: var(--heho-color-text-faded);
}

.hehoblocks-header__search-submit {
    width: 3.75rem;
    height: 3.75rem;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--heho-color-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.hehoblocks-header__search-submit:hover,
.hehoblocks-header__search-submit:focus-visible {
    background-color: var(--heho-color-text);
    color: var(--heho-color-bg);
}

.hehoblocks-header__search-submit .material-icons {
    font-size: 1.5rem;
}

/* ─── Right cluster ────────────────────────────────────────────────── */

.hehoblocks-header__right {
    display: flex;
    align-items: center;
    gap: var(--heho-space-7);
    flex: 0 0 auto;
}

/* Vertical divider between sign-in and the tax switcher. Replaces the
 * semantic-misused <hr> in the legacy markup. */
.hehoblocks-header__divider {
    width: 2px;
    height: 2rem;
    background-color: var(--heho-color-border-medium);
    flex: 0 0 auto;
}

/* ─── Tax switcher placeholder ─────────────────────────────────────── */

.hehoblocks-header__tax-switcher--placeholder {
    display: inline-flex;
    align-items: center;
    gap: var(--heho-space-2);
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    height: 1.875rem; /* 30px */
    border-radius: var(--heho-radius-pill);
    background-color: var(--heho-color-primary-light-2);
    color: var(--heho-color-primary);
    font-size: var(--heho-font-size-xs);
    font-weight: var(--heho-font-weight-bold);
    cursor: default;
}

.hehoblocks-header__tax-switcher-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background-color: var(--heho-color-primary);
    display: inline-block;
}

/* ─── Express CTA ──────────────────────────────────────────────────── */

.hehoblocks-header__express {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    height: 3.75rem;
    color: var(--heho-color-text);
    text-decoration: none;
}

.hehoblocks-header__express-icon {
    width: 2.8125rem; /* 45px */
    height: 2.8125rem;
    border-radius: var(--heho-radius-sm);
    background-color: var(--heho-color-bg-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--heho-color-text);
}

.hehoblocks-header__express-icon svg {
    width: auto;
    height: 1.75rem; /* 28px */
    display: block;
}

.hehoblocks-header__express-label {
    font-size: 0.625rem;
    font-weight: var(--heho-font-weight-semibold);
    color: var(--heho-color-text);
    letter-spacing: 0.02em;
}

.hehoblocks-header__express--placeholder {
    opacity: 0.55;
    cursor: not-allowed;
}

.hehoblocks-header__express--placeholder:hover,
.hehoblocks-header__express--placeholder:focus-visible {
    color: var(--heho-color-text);
}

/* ─── Sign-in widget host ──────────────────────────────────────────── */

.hehoblocks-header__signin {
    display: inline-flex;
    align-items: center;
}

.hehoblocks-header__signin .user-info a {
    color: var(--heho-color-primary);
    font-weight: var(--heho-font-weight-semibold);
    text-decoration: none;
}

.hehoblocks-header__signin .user-info a:hover,
.hehoblocks-header__signin .user-info a:focus-visible {
    color: var(--heho-color-primary-hover);
    text-decoration: underline;
}

/* ─── Mini-cart host ───────────────────────────────────────────────── */

.hehoblocks-header__cart {
    display: inline-flex;
    align-items: center;
}

.hehoblocks-header__cart .blockcart,
.hehoblocks-header__cart .header-block {
    background-color: var(--heho-color-primary-light-3);
    border-radius: var(--heho-radius-sm);
    width: 3.75rem;
    height: 3.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--heho-color-primary);
    position: relative;
}

.hehoblocks-header__cart a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.hehoblocks-header__cart .header-block__badge,
.hehoblocks-header__cart .cart-products-count {
    position: absolute;
    top: -3px;
    right: -7px;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    border-radius: 50%;
    background-color: var(--heho-color-primary);
    color: var(--heho-color-bg);
    border: 1px solid var(--heho-color-bg);
    font-size: 0.8125rem;
    font-weight: var(--heho-font-weight-bold);
    line-height: 1.25rem;
    text-align: center;
}

/* ─── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .hehoblocks-header__container {
        gap: var(--heho-space-4);
        justify-content: space-between;
    }
    .hehoblocks-header__divider,
    .hehoblocks-header__tax-switcher,
    .hehoblocks-header__express {
        display: none !important;
    }
    .hehoblocks-header__right {
        gap: var(--heho-space-4);
    }
}

@media (max-width: 768px) {
    .hehoblocks-header__search {
        display: none;
    }
}

@media (max-width: 480px) {
    .hehoblocks-header__logo a {
        height: 2rem; /* 32px */
    }
    .hehoblocks-header__cart .blockcart,
    .hehoblocks-header__cart .header-block {
        background-color: transparent;
        width: auto;
        height: auto;
    }
    .hehoblocks-header__cart .material-icons,
    .hehoblocks-header__cart img {
        font-size: 1.5rem;
        height: 1.5rem;
    }
    .hehoblocks-header__cart .header-block__badge,
    .hehoblocks-header__cart .cart-products-count {
        top: 4px;
        right: -4px;
        min-width: 0.875rem;
        height: 0.875rem;
        font-size: 0.625rem;
        line-height: 0.875rem;
    }
}