/* Header utility actions: scoped override loaded after index.css. */
.header-actions .language-selector {
    display: none !important;
}

.mobile-top-actions,
.mobile-back-link,
.mobile-page-link {
    display: none;
}

@media (min-width: 769px) {
    .header-top .container {
        height: 44px;
    }

    .header-actions {
        gap: 10px;
    }

    .header-actions .header-action-button {
        display: inline-flex;
        min-height: 42px;
        padding: 0 18px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid #62656b;
        border-radius: 11px;
        background: transparent;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        box-shadow: none;
        transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
    }

    .header-actions .header-action-button i,
    .header-actions .header-action-icon {
        color: inherit;
        font-size: 15px;
    }

    .header-actions .header-action-icon {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .header-actions .header-action-button.btn-promotion {
        border-color: #d6a900;
        color: #e0b100;
    }

    .header-actions .header-action-button.btn-order,
    .header-actions .header-action-button.btn-login,
    .header-actions .header-action-button.btn-account {
        border-color: #62656b;
        background: transparent;
        color: #fff;
    }

    .header-actions .header-action-button:hover {
        border-color: #8b8e94;
        background: rgba(255, 255, 255, .07);
        color: #fff;
        transform: translateY(-1px);
    }

    .header-actions .header-action-button.btn-promotion:hover {
        border-color: #f0bf00;
        background: rgba(224, 177, 0, .1);
        color: #f0bf00;
    }

    .header-actions .header-action-button:focus-visible {
        outline: 3px solid rgba(255, 255, 255, .3);
        outline-offset: 3px;
    }

    .header-actions .header-action-button.btn-promotion:focus-visible {
        outline-color: rgba(224, 177, 0, .42);
    }

    .header-actions .header-user-action {
        margin: 0;
    }
}

@media (min-width: 769px) and (max-width: 1199.98px) {
    .header-top .container > .search-bar {
        width: clamp(210px, 26vw, 300px);
    }

    .header-actions {
        gap: 6px;
    }

    .header-actions .header-action-button {
        min-height: 40px;
        padding-right: 11px;
        padding-left: 11px;
        gap: 6px;
        font-size: 13px;
    }

    .header-actions .header-action-button i,
    .header-actions .header-action-icon {
        font-size: 13px;
    }

    .header-actions .header-action-icon {
        width: 14px;
        height: 14px;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    .header-actions {
        gap: 5px;
    }

    .header-actions .header-action-button {
        min-height: 38px;
        padding-right: 8px;
        padding-left: 8px;
        gap: 5px;
        font-size: 12px;
    }

    .header-actions .header-action-button i,
    .header-actions .header-action-icon {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .header-actions {
        display: none !important;
    }

    .header-top {
        padding: 9px 0 5px;
    }

    .header-top .container {
        min-height: 40px;
        padding-right: 15px;
        padding-left: 15px;
    }

    .mobile-top-actions {
        display: flex;
        margin-left: auto;
        align-items: center;
        gap: 8px;
    }

    .mobile-top-button {
        display: inline-flex;
        min-height: 36px;
        padding: 0 14px;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 18px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-top-button.is-promotion {
        border: 1px solid #f4c900;
        background: linear-gradient(180deg, #fff36a 0%, #ffc62f 68%, #e9a900 100%);
        color: #3b3000;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
    }

    .mobile-top-button.is-promotion i,
    .mobile-top-button.is-promotion .mobile-top-icon {
        color: #d98700;
        font-size: 14px;
    }

    .mobile-top-icon {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-top-button.is-order {
        min-width: 68px;
        background: #e60027;
        color: #fff;
    }

    .mobile-top-button:focus-visible,
    .mobile-back-link:focus-visible,
    .mobile-page-link:focus-visible,
    .search-area.mobile-search-area .user-icon:focus-visible {
        outline: 2px solid rgba(255, 255, 255, .42);
        outline-offset: 2px;
    }

    .search-area.mobile-search-area {
        display: grid;
        grid-template-columns: 28px auto minmax(0, 1fr) 40px;
        gap: 8px;
        padding: 6px 15px 12px;
        align-items: center;
    }

    .mobile-back-link,
    .mobile-page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    .mobile-back-link {
        width: 28px;
        height: 42px;
        font-size: 18px;
    }

    .mobile-back-link svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-page-link {
        min-width: 38px;
        height: 42px;
        font-size: 16px;
        font-weight: 600;
        white-space: nowrap;
    }

    .search-area.mobile-search-area .search-bar {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .search-area.mobile-search-area .user-icon {
        width: 40px;
        height: 40px;
        margin: 0;
        background: #b8bbc0;
        color: #242424;
        font-size: 17px;
    }

    .search-area.mobile-search-area .user-icon::before {
        content: none;
    }

    .search-area.mobile-search-area .user-icon svg {
        width: 22px;
        height: 22px;
        fill: #242424;
        stroke: #242424;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

    .app-header .main-nav {
        display: none !important;
    }
}

@media (max-width: 359.98px) {
    .mobile-top-actions {
        gap: 6px;
    }

    .mobile-top-button {
        min-height: 34px;
        padding-right: 10px;
        padding-left: 10px;
        font-size: 11px;
    }

    .mobile-top-button.is-order {
        min-width: 60px;
    }

    .search-area.mobile-search-area {
        grid-template-columns: 24px auto minmax(0, 1fr) 36px;
        gap: 6px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .mobile-back-link {
        width: 24px;
    }

    .search-area.mobile-search-area .user-icon {
        width: 36px;
        height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-actions .header-action-button {
        transition: none;
    }
}