/* ============================================================
   mobile-footer.css — CORE mobile footer (<= 767px)
   ------------------------------------------------------------
   Collapse the multi-column footer link lists into tap-to-expand
   accordions so the footer is not an endless scroll on mobile.
   The contact block (about-us) stays open; only the link columns
   (my-account / customer-service / information / our-offers)
   become accordions. Neutral: spacing + --m-* tokens only.
   Accordion state is driven by mobile-header.js (.m-acc/.m-open).
   ============================================================ */
@media (max-width: 767.98px) {
    .footer .footer-middle .container > .row { display: block; }

    /* the copyright row (.footer-disclaimer in .footer-lower) was hidden behind
       the fixed bottom tab bar. The core body padding-bottom can't protect it:
       the theme's floats collapse <body>'s height (measured body bottom ~216px
       while the footer paints to 844px), so padding on body lands mid-page.
       Pad the footer itself — it is the last element in flow and its dark
       background makes the extra space seamless. */
    .footer { padding-block-end: calc(var(--m-bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
    .footer .footer-middle .column {
        width: 100%; float: none; margin: 0; padding: 0;
        border-block-end: 1px solid rgba(0, 0, 0, .1);
    }

    .footer .footer-middle .column .title {
        position: relative; margin: 0; padding-block: 14px; padding-inline-end: 28px;
    }
    .footer .footer-middle .column.m-acc > .title { cursor: pointer; }
    .footer .footer-middle .column.m-acc > .title::after {
        content: "\f107"; font: normal normal normal 16px/1 FontAwesome;
        position: absolute; inset-inline-end: 4px; inset-block-start: 50%;
        transform: translateY(-50%); transition: transform .2s ease;
    }
    .footer .footer-middle .column.m-acc.m-open > .title::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* collapsed list (smooth max-height reveal) */
    .footer .footer-middle .column.m-acc > .nav-list,
    .footer .footer-middle .column.m-acc > .list {
        overflow: hidden; max-height: 0; transition: max-height .25s ease;
    }
    .footer .footer-middle .column.m-acc.m-open > .nav-list,
    .footer .footer-middle .column.m-acc.m-open > .list {
        max-height: 70vh; padding-block-end: 10px;
    }

    /* comfortable tap rows for footer links */
    .footer .footer-middle .column .nav-list > li > a,
    .footer .footer-middle .column .list > li > a {
        min-height: 40px; display: flex; align-items: center;
    }

    /* lower bar: stack + center the credits/disclaimer */
    .footer .footer-lower [class*="col-"] {
        width: 100%; float: none; text-align: center; margin-block: 4px;
    }

    /* newsletter block renders ~419px wide (overflows the 390 viewport, gets clipped) —
       constrain it and make the email field full-width */
    .footer .newsletter-wrapper,
    .footer .block-newsletter,
    .footer .newsletter-subscribe-block,
    .footer .newsletter-email { max-width: 100%; box-sizing: border-box; }
    .footer #newsletter-email,
    .footer .newsletter-subscribe-block input[type="email"],
    .footer .newsletter-subscribe-block input[type="text"] {
        width: 100% !important; max-width: 100%; box-sizing: border-box; margin: 0 0 8px !important;
    }

    /* the rule above loses to simplex.styles.responsive.css's
       `#newsletter-subscribe-block #newsletter-email { width:180px !important;
       height:40px !important }` (two-ID specificity beats .footer + one ID even
       with equal !important) — the email field rendered 180×40px. Counter with
       .footer + BOTH ids and stack the field over a ≥44px subscribe button. */
    /* the newsletter column kept a desktop-ish 304px width on a 390px viewport
       (43px dead gold on each side) — let it span the row on mobile */
    .footer .footer-upper .newsletter-wrapper { width: 100%; float: none; }
    .footer .block-newsletter,
    .footer .block-newsletter .listbox { width: 100%; max-width: 100%; }
    .footer #newsletter-subscribe-block {
        display: flex !important; flex-direction: column; align-items: stretch;
        width: 100%;
    }
    /* simplex pins `margin:0 !important` on the field with two-ID specificity —
       win it back (.footer + two IDs) for the field↔button breathing space */
    .footer #newsletter-subscribe-block #newsletter-email {
        width: 100% !important; height: auto !important;
        min-height: var(--m-touch-min, 44px);
        margin: 0 0 10px !important;
    }
    /* stacked form: button matches the field width (a 144px pill under a
       full-width field reads unbalanced) */
    .footer #newsletter-subscribe-block #newsletter-subscribe-button,
    .footer #newsletter-subscribe-block .newsletter-subscribe-button {
        display: block; width: 100% !important;
        height: auto !important; min-height: var(--m-touch-min, 44px);
        margin: 0 !important; padding: 0 28px; box-sizing: border-box;
    }
}

/* footer "Search" link: redundant on mobile — the header search is always
   reachable (always-visible row or the search-toggle sheet). The <li> carries
   .footer-search-item from the Footer view (user 2026-06-06). */
@media (max-width: 767.98px) {
    .footer .footer-search-item { display: none !important; }
}