/* --------------------------------------------------------------
   Announcement
   -------------------------------------------------------------- */

.store-announcement {
    background:
        var(--color-primary);

    color:
        var(--color-text-inverse);
}


.store-announcement-inner {
    min-height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap:
        var(--space-3);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-weight-medium);

    letter-spacing:
        0.02em;
}


.store-announcement p {
    margin: 0;
}


@media (max-width: 600px) {

    .store-announcement-inner {
        min-height: 30px;

        justify-content: flex-start;

        overflow: hidden;

        white-space: nowrap;
    }


    .store-announcement-inner p:last-child,
    .store-announcement-inner span {
        display: none;
    }

}


/* --------------------------------------------------------------
   Storefront header
   -------------------------------------------------------------- */

.store-header {
    position: sticky;
    top: 0;

    z-index: 100;

    border-bottom:
        1px solid var(--color-border);

    background:
        rgb(245 241 231 / 94%);

    backdrop-filter:
        blur(16px);
}


.store-header-main {
    position: relative;
}


.store-header-inner {
    min-height: 76px;

    display: flex;
    align-items: center;

    gap:
        var(--space-10);
}


.store-brand {
    flex-shrink: 0;

    color:
        var(--color-text);

    font-size:
        1.5rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.1em;

    line-height: 1;
}


.store-nav {
    display: flex;
    align-items: center;

    gap:
        var(--space-6);

    margin-right: auto;
}


.store-nav a {
    position: relative;

    padding-block:
        var(--space-2);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-medium);
}


.store-nav a::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    background:
        var(--color-primary);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform var(--transition-fast);
}


.store-nav a:hover::after,
.store-nav a:focus-visible::after {
    transform:
        scaleX(1);

    transform-origin:
        left;
}


.store-header-actions {
    display: flex;
    align-items: center;

    gap:
        var(--space-2);
}


.store-header-action {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap:
        var(--space-2);

    padding:
        0 var(--space-3);

    border-radius:
        var(--radius-pill);

    background:
        transparent;

    color:
        var(--color-text);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-medium);

    white-space:
        nowrap;

    transition:
        background var(--transition-fast);
}


.store-header-action:hover {
    background:
        var(--color-primary-soft);
}




/* --------------------------------------------------------------
   Existing market selector integration
   -------------------------------------------------------------- */

.store-header .market-select {
    min-height: 40px;

    border-color:
        var(--color-border);

    background:
        var(--color-surface);
}


/* --------------------------------------------------------------
   Mobile navigation
   -------------------------------------------------------------- */

.store-mobile-bar {
    display: none;

    border-top:
        1px solid var(--color-border);
}


.store-mobile-bar-inner {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        var(--space-4);
}


.store-mobile-menu {
    display: inline-flex;
    align-items: center;

    gap:
        var(--space-2);

    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(--color-text);

    font-size:
        var(--font-size-sm);

    font-weight:
        var(--font-weight-medium);

    cursor: pointer;
}


.store-mobile-menu-icon {
    width: 18px;

    display: grid;

    gap: 5px;
}


.store-mobile-menu-icon span {
    display: block;

    width: 100%;
    height: 1px;

    background:
        currentColor;
}


.store-mobile-market {
    display: none;
}


.store-action-icon {
    width: 18px;
    height: 18px;

    flex-shrink: 0;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.store-mobile-navigation {
    position: static;
}


.store-mobile-navigation summary {
    list-style: none;
}


.store-mobile-navigation summary::-webkit-details-marker {
    display: none;
}


.store-mobile-panel {
    position: absolute;

    top: 100%;
    right: 0;
    left: 0;

    padding:
        var(--space-5)
        max(
            20px,
            calc(
                (100vw - var(--container-wide))
                / 2
            )
        )
        var(--space-6);

    border-top:
        1px solid var(--color-border);

    border-bottom:
        1px solid var(--color-border);

    background:
        var(--color-background);

    box-shadow:
        0 18px 40px
        rgb(23 25 22 / 8%);
}


.store-mobile-nav {
    display: grid;
}


.store-mobile-nav a {
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        var(--space-4);

    border-bottom:
        1px solid var(--color-border);

    font-size:
        var(--font-size-lg);

    font-weight:
        var(--font-weight-medium);
}


.store-mobile-account {
    padding-top:
        var(--space-5);
}


.store-mobile-account-action {
    width: 100%;

    min-height: 46px;

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius-pill);

    background:
        var(--color-surface);

    color:
        var(--color-text);

    font-weight:
        var(--font-weight-medium);

    cursor: pointer;
}


.store-mobile-navigation[open]
.store-mobile-menu-icon span:first-child {
    transform:
        translateY(3px)
        rotate(45deg);
}


.store-mobile-navigation[open]
.store-mobile-menu-icon span:last-child {
    transform:
        translateY(-3px)
        rotate(-45deg);
}


.store-mobile-menu-icon span {
    transition:
        transform var(--transition-fast);
}


/* --------------------------------------------------------------
   Intermediate responsive safeguard

   The definitive mobile navigation is implemented in 5B.2.
   -------------------------------------------------------------- */

@media (max-width: 1000px) {

    .store-header-inner {
        gap:
            var(--space-5);
    }


    .store-nav {
        gap:
            var(--space-4);
    }


    .store-header-actions {
        gap: 0;
    }

}


@media (max-width: 800px) {

    .store-header-inner {
        min-height: 64px;

        gap:
            var(--space-3);
    }


    .store-nav {
        display: none;
    }


    .store-header-actions {
        margin-left: auto;
    }


    .store-header-actions > .market-selector {
        display: none;
    }


    .store-header-action {
        display: none;
    }


    .store-search-action,
    .store-cart-action {
        display: inline-flex;
    }


    .store-search-action {
        padding-inline:
            var(--space-2);
    }


    .store-cart-action {
        padding-inline:
            var(--space-2);
    }


    .store-mobile-bar {
        display: block;
    }


    .store-mobile-market {
        display: block;
    }

}

@media (max-width: 420px) {
    .store-search-action,
    .store-cart-action {
        width: 38px;
        height: 38px;

        padding: 0;

        border:
            1px solid var(--color-border);

        border-radius:
            var(--radius-pill);
    }


    .store-search-action .store-action-label,
    .store-cart-action .store-action-label {
        display: none;
    }


    .store-action-icon {
        width: 17px;
        height: 17px;
    }
}

/* Checkout: navegação fora da área de preenchimento */
.checkout-layout .store-header {
    position: relative;
    top: auto;
}