.header-navbar-info {
    position: absolute;
    display: none;
    left: -200px;
    min-width: 400px;
    background: var(--white-color);
    box-shadow: 1px 1px 11px #bfbfbf;
    z-index: 10;
}

.header-top-info:hover .header-navbar-info {
    display: block !important;
}

.header-navbar-info a, .header-navbar-info p {
    color: var(--text-color);
}

.header-navbar-info-title {
    font-size: var(--text-sm);
    font-weight: bold;
    margin: 0;
}

.header-navbar-info-phone {
    font-size: var(--text-2xl);
    font-weight: bold;
}

.header-navbar-info-content {
    font-size: var(--text-sm);
}

.header-navbar-info-button {
    background-color: var(--green-500-color);
    border: none;
}

.header-navbar-info-button:hover,
.header-navbar-info-button:active,
.header-navbar-info-button:focus {
    background-color: var(--green-600-color);
}

.header-navbar-info-button span {
    font-size: var(--text-3xl);
}

.cart .header-navbar-info {
    text-align: center;
    box-shadow: none;
    padding: 0 !important;
}

.cart .header-navbar-info-button {
    display: none !important;
}

/* Medium ≥ 767px */
@media (max-width: 767px) {
    .header-navbar-info {
        display: block;
        min-width: auto;
        position: initial;
        box-shadow: inset 1px 1px 11px #bfbfbf;
    }

    .header-navbar-info a {
        color: var(--text-color);
    }

    .header-navbar-info-title {
        font-size: var(--text-sm);
        font-weight: bold;
        margin: 0;
    }

    .header-navbar-info-phone {
        font-size: var(--text-2xl);
        font-weight: bold;
    }

    .header-navbar-info-content {
        font-size: var(--text-sm);
    }
}