/**
 * Mobile chrome (≤1023px) — Figma Home 1 header + footer.
 * Desktop (≥1024) is locked.
 */

@media (max-width: 1023px) {
    :root {
        --acme-header-pad-x: 1rem; /* 16px */
        --acme-header-top-h: 4.8125rem; /* 77px = 20 + 37 + 20 */
        --acme-footer-pad-x: 1rem;
        --acme-home1-icon: 2.3125rem; /* 37px hit box */
        --acme-home1-glyph: 1.5rem; /* 24px Figma glyph */
    }

    .acme-header__top {
        box-sizing: border-box !important;
        height: var(--acme-header-top-h) !important;
        min-height: var(--acme-header-top-h) !important;
        padding-block: 0 !important;
        padding-inline: var(--acme-header-pad-x) !important;
        border-bottom: 0 !important;
    }

    .acme-header__top-inner {
        position: relative !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "brand . actions"
            "search search search" !important;
        align-items: center !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        height: var(--acme-header-top-h) !important;
        min-height: var(--acme-header-top-h) !important;
        padding-block: 1.25rem !important; /* 20px — Figma py-20 */
        padding-inline: 0 !important;
    }

    .acme-header__brand {
        grid-area: brand !important;
        display: flex !important;
        align-items: center !important;
        position: static !important;
        z-index: 2 !important;
        min-width: 0 !important;
        width: auto !important;
        height: var(--acme-home1-icon) !important;
        gap: 0 !important;
    }

    .acme-header__brand .logo,
    .acme-header__brand a.logo,
    .acme-header__brand > a {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 9.80859375rem !important; /* 157px — 1.125× prior 139.5px */
        height: 2.7421875rem !important; /* 43.875px — 1.125× prior 39px */
        border: 0 !important;
        gap: 0 !important;
    }

    .acme-header__brand .logo img,
    .acme-header__brand > a img {
        display: block !important;
        width: 9.80859375rem !important;
        height: 2.7421875rem !important;
        object-fit: contain !important;
    }

    .acme-header__actions {
        grid-area: actions !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        z-index: 2 !important;
        width: auto !important;
        height: var(--acme-home1-icon) !important;
        gap: 1rem !important; /* 16px Figma */
    }

    .acme-header__customer {
        display: none !important;
    }

    .acme-header__search {
        grid-area: search !important;
        max-width: none !important;
        width: 100% !important;
        padding-bottom: 0.75rem !important;
    }

    .acme-header__search:not(.acme-header__search--open) {
        display: none !important;
        padding-bottom: 0 !important;
    }

    .acme-header__search--open {
        display: block !important;
    }

    .acme-header__search-toggle,
    .acme-header__cart,
    .acme-header__brand [x-data="initMobileMenu"] > button {
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: var(--acme-home1-icon) !important;
        height: var(--acme-home1-icon) !important;
        min-width: var(--acme-home1-icon) !important;
        min-height: var(--acme-home1-icon) !important;
        max-width: var(--acme-home1-icon) !important;
        max-height: var(--acme-home1-icon) !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        line-height: 0 !important;
        color: #000 !important;
        gap: 0 !important;
    }

    .acme-header__cart-icon {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: var(--acme-home1-glyph) !important;
        height: var(--acme-home1-glyph) !important;
        min-width: var(--acme-home1-glyph) !important;
        min-height: var(--acme-home1-glyph) !important;
    }

    .acme-header__search-toggle svg,
    .acme-header__cart svg,
    .acme-header__cart-icon svg,
    .acme-header__brand [x-data="initMobileMenu"] > button svg {
        display: block !important;
        width: var(--acme-home1-glyph) !important;
        height: var(--acme-home1-glyph) !important;
        min-width: var(--acme-home1-glyph) !important;
        min-height: var(--acme-home1-glyph) !important;
        max-width: var(--acme-home1-glyph) !important;
        max-height: var(--acme-home1-glyph) !important;
        flex-shrink: 0 !important;
    }

    .acme-header__cart-total {
        display: none !important;
    }

    .acme-header__cart,
    .acme-header__cart-icon {
        overflow: visible !important;
    }

    .acme-header__cart-badge {
        display: inline-flex !important;
        top: -0.35rem !important;
        right: -0.35rem !important;
        z-index: 2 !important;
    }

    /* ---- Footer: Figma Home 1 — cream brand, 3-up links, pill newsletter ---- */

    .acme-footer {
        padding: 0 !important;
        gap: 0 !important;
        background: #fff !important;
        border-top: 2px solid #e5e5e5 !important;
    }

    .acme-footer__inner {
        padding-inline: var(--acme-footer-pad-x, 1rem) !important;
        box-sizing: border-box !important;
        gap: 0 !important;
        max-width: none !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    /* Figma 1019-9045 — brand full-width left; 3 centered nav columns */
    .acme-footer__main {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1.25rem 0.5rem !important;
        align-items: start !important;
        padding: 1.5rem 0 0.5rem !important;
        width: 100% !important;
    }

    .acme-footer__brand {
        grid-column: 1 / -1 !important;
        max-width: none !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 0 0.5rem !important;
        background: transparent !important;
        gap: 1rem !important;
        text-align: left !important;
        align-items: flex-start !important;
    }

    .acme-footer__about {
        font-size: 0.875rem !important;
        line-height: 1.575rem !important;
        letter-spacing: 0.009375rem !important;
        max-width: none !important;
        color: #000 !important;
        text-align: left !important;
    }

    .acme-footer__contact {
        gap: 0.75rem !important;
        align-items: flex-start !important;
    }

    .acme-footer__contact li {
        min-height: 0 !important;
        font-size: 0.875rem !important;
        line-height: 1.3125rem !important;
        letter-spacing: 0.009375rem !important;
        color: #000 !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .acme-footer__social {
        gap: 0.5rem !important;
        justify-content: flex-start !important;
    }

    .acme-footer__social-link {
        width: 2rem !important;
        height: 2rem !important;
        border: 1px solid #000 !important;
        border-radius: 1rem !important;
    }

    .acme-footer__nav {
        display: flex !important;
        flex-direction: column !important;
        max-width: none !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0.25rem 0.15rem 0 !important;
        gap: 0.65rem !important;
        text-align: center !important;
        align-items: center !important;
    }

    .acme-footer__heading {
        margin: 0 0 0.5rem !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        letter-spacing: 0.105rem !important;
        text-transform: uppercase !important;
        color: #1f99ce !important;
        text-align: center !important;
    }

    .acme-footer__list {
        gap: 0.5rem !important;
        align-items: center !important;
        text-align: center !important;
    }

    .acme-footer__list a,
    .acme-footer__legal a {
        display: inline-block !important;
        min-height: 0 !important;
        font-size: 0.8125rem !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        letter-spacing: 0.009375rem !important;
        color: #000 !important;
        text-align: center !important;
    }

    .acme-footer__newsletter {
        flex: 0 0 auto !important;
        max-width: none !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 3rem 1rem 0 !important;
        background: #fff !important;
    }

    .acme-footer__newsletter-text {
        font-size: 0.875rem !important;
        line-height: 1.4rem !important;
        letter-spacing: 0.009375rem !important;
        margin: 0 0 0.875rem !important;
        color: #000 !important;
    }

    .acme-footer__newsletter-form {
        width: 100% !important;
        gap: 0.75rem !important;
    }

    .acme-footer__newsletter-input,
    .acme-footer__newsletter-btn {
        width: 100% !important;
        height: 2.375rem !important;
        min-height: 2.375rem !important;
        border-radius: 1.5rem !important;
    }

    .acme-footer__newsletter-input {
        border: 1px solid #000 !important;
        padding: 0.6rem 1.0625rem !important;
        background: #fff !important;
        color: #000 !important;
        font-size: 0.85rem !important;
    }

    .acme-footer__newsletter-btn {
        border: 0 !important;
        background: #1f99ce !important;
        color: #fff !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
    }

    .acme-footer__bottom {
        width: 100% !important;
        border-top: 1px solid #e5e5e5 !important;
        margin-top: 3rem !important;
        padding: 0.875rem 1rem 2rem !important;
        background: #fff !important;
    }

    .acme-footer__bottom-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.875rem !important;
        padding: 0 !important;
    }

    .acme-footer__copy {
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        line-height: 1.245rem !important;
        letter-spacing: 0.025rem !important;
        color: #000 !important;
    }

    .acme-footer__legal {
        flex-wrap: wrap !important;
        gap: 1.5rem !important;
    }

    .acme-footer__legal a {
        font-size: 0.75rem !important;
        line-height: 1.275rem !important;
        min-height: 0 !important;
        display: inline !important;
    }
}