/* Compact desktop masthead; the existing phone/tablet header stays unchanged. */
.storefront-top { height: auto; }
.storefront-top.is-compact { border-bottom-color: #191919; }
.storefront-top .header-customer-info,
.storefront-top .header-compact-social { display: none; }
.storefront-top > .h1 > .header-tools > .header-search {
    height: 32px;
    min-width: 100px;
    border: 0;
    border-bottom: 1.5px solid #4f4b4e;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
}
.storefront-top > .h1 > .header-tools > .header-search input {
    width: 100%;
    height: 30px !important;
    min-width: 0;
    padding: 0 2px;
    box-sizing: border-box;
    background: transparent;
    font: 14px Arial, sans-serif;
    color: #29262a;
    border: 0;
    border-radius: 0;
}
.storefront-top .header-search input::placeholder { color: #827c82; }
.storefront-top > .h1 > .header-tools > .header-search:focus-within { border-color: #d92b7c; }
.storefront-top .header-tools > .header-action {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 30px;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #302d30;
    cursor: pointer;
}
.storefront-top > .h1 > .header-tools .j2 { display: block; width: 24px; height: 24px; margin: 0; flex: none; }
.storefront-top .header-tools > .header-action:hover { color: #d32779; }
.storefront-top :is(a,button):focus-visible { outline: 2px solid #d92b7c; outline-offset: 2px; }
.storefront-top .header-cart-guest { font-size: 13px; color: #4e454d; }
.storefront-top > .h1 > .zhang,
.storefront-top > .h1 > .zhang .k1 { font-weight: 600; }

@media (min-width: 769px) {
    .storefront-top { display: block !important; }
    .storefront-top > .h2 { display: flex; }
}

/* The expanded desktop header retains the contact block and the full brand mark. */
@media (min-width: 1200px) {
    .storefront-top:not(.is-compact) > .h1 { min-height: 120px; padding-top: 6px; padding-bottom: 6px; }
    .storefront-top:not(.is-compact) .header-tools > .header-search {
        flex: 0 1 180px;
        min-width: 120px;
        max-width: 180px;
        margin-left: auto;
    }
}

/* Compact mode is also the default below 1200px; logo size has a readable floor. */
.storefront-top.is-compact > .h1 {
    display: flex;
    align-items: center;
    gap: 24px;
    height: auto;
    min-height: 56px;
    padding: 2px 24px;
    box-sizing: border-box;
}
.storefront-top.is-compact > .h1 > .header-contact,
.storefront-top.is-compact > .h1 > .zhang { display: none; }
.storefront-top.is-compact > .h1 > .header-logo {
    flex: 0 0 164px;
    width: 164px;
    height: auto;
    margin: 0;
}
.storefront-top.is-compact .header-logo > a {
    display: block;
    width: 164px !important;
    max-width: none;
    height: auto !important;
}
.storefront-top.is-compact > .h1 > .header-tools {
    flex: 1;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    gap: 8px;
    justify-content: flex-end;
}
.storefront-top.is-compact .header-tools > .header-search {
    flex: 1;
    width: auto;
    min-width: 180px;
    max-width: 360px;
    margin: 0;
}
/* Keep social, search and customer actions together at the right. */
.storefront-top.is-compact.has-compact-social .header-compact-social {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
}
.storefront-top .header-compact-social > a { display: flex; align-items: center; justify-content: center; width: 28px; height: 36px; border-radius: 5px; }
.storefront-top .header-compact-social img { display: block; width: 24px; height: 24px; object-fit: contain; }
.storefront-top.is-compact .header-tools > .header-action { min-width: 36px; min-height: 40px; }
.storefront-top.is-compact .header-tools .j2 { width: 25px; height: 25px; margin: 0; }
.storefront-top.is-compact .header-customer-info {
    display: flex;
    flex: 0 1 auto;
    min-width: min-content;
    flex-flow: row wrap;
    align-items: center;
    gap: 3px 8px;
    line-height: 17px;
    font-size: 13px;
    color: #514952;
}
.storefront-top.is-compact .header-customer-info a { font-size: 14px; font-weight: 600; color: #df277d; text-decoration: underline; text-underline-offset: 2px; }
.storefront-top.is-compact .header-customer-info a:hover { color: #008cf2; text-decoration: underline; }
.storefront-top .header-customer-name { min-width: 0; max-width: 100%; overflow-wrap: anywhere; font-weight: 600; }
.storefront-top .header-customer-links { flex: none; white-space: nowrap; }
.storefront-top .header-customer-links::before { content: "·"; margin-right: 8px; color: #b5aab2; font-size: 12px; }
.storefront-top .header-customer-links > span { font-size: 12px; color: #b5aab2; }
.storefront-top.is-compact .header-cart { flex: none; gap: 8px; padding: 0 4px; }
.storefront-top.is-compact #showM { min-width: 82px; }
.storefront-top.is-compact #showM :is(.myCartNums,.myCartNums1) { font-size: 13px; line-height: 18px; }
.storefront-top #showM :is(.myCartNums,.myCartNums1) { color: #df277d; font-weight: 600; }
.storefront-top.is-compact > .h2 { min-height: 36px; gap: 0 12px; }
.storefront-top.is-compact > .h2 > .i1 { height: 36px; }
.storefront-top.is-compact > .h2 > .i1 > .ai1 { font-size: 14px; }
.storefront-top > .h2 > .i1::after { transition-property: width, left; }
.storefront-top.is-compact > .h2 { background: #191919; border-top-color: #191919; }
.storefront-top.is-compact > .h2 > .i1,
.storefront-top.is-compact > .h2 > .i1 > .ai1 { color: #fff; }
.storefront-top.is-compact > .h2 > .i1:hover > .ai1,
.storefront-top.is-compact > .h2 > .i1 > .ai1:focus-visible { color: #df277d; }
.storefront-top.is-compact > .h2 > .i1::after { background: #df277d; }

@media (min-width: 769px) and (max-width: 999px) {
    .storefront-top.is-compact > .h1 { gap: 12px; padding: 2px 16px; }
    .storefront-top.is-compact > .h1 > .header-logo { flex-basis: 144px; width: 144px; }
    .storefront-top.is-compact .header-logo > a { width: 144px !important; }
    .storefront-top.is-compact > .h1 > .header-tools { gap: 6px; }
}

@media (min-width: 769px) and (max-width: 1279px) {
    .storefront-top > .h2 { gap: 0 10px; min-height: 36px; padding: 3px 12px; }
    .storefront-top.is-compact > .h2 { gap: 0 10px; min-height: 34px; padding: 2px 12px; }
    .storefront-top > .h2 > .i1 { height: 32px; margin: 0; padding: 0 4px; }
    .storefront-top.is-compact > .h2 > .i1 { height: 30px; margin: 0; padding: 0 4px; }
    .storefront-top > .h2 > .i1 > .ai1,
    .storefront-top.is-compact > .h2 > .i1 > .ai1 { font-size: 14px; }

}

/* Keep the original mobile header, logo, search, welcome and cart arrangement. */
@media (max-width: 768px), (max-width: 1366px) and (hover: none) and (pointer: coarse) {
    .storefront-top { display: none !important; }
}
/* The temporary surface follows the masthead using compositor-only scaling. */
.storefront-top.header-is-animating { background: transparent; border-bottom-color: transparent; }
.storefront-top > .header-motion-surface {
    position: absolute;
    inset: 0;
    z-index: -1;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    transform-origin: top;
    pointer-events: none;
}
.storefront-top.is-compact > .header-motion-surface { border-bottom-color: #191919; }
@media (prefers-reduced-motion: reduce) {
    .storefront-top, .topDown { transition: none !important; }
}