/* upmos-footer.css - externalized from Upmos Footer PHP.txt (lines 5245-7657)
   Same CSS, byte-for-byte. Generated 2026-06-19. Scoped to .upmos-ftr* */
/* ============================================================
   UPMOS Footer v2.46 - Gold Standard A++ (tablet portrait 4-col + side reshuffle)
   ============================================================ */
/* v2.6 #W3 + v2.7 #V4: scope isolation. Hide any .ftr-* element that
   escapes the .upmos-ftr-v1 footer scope. Layered defense:
     (a) Selectors-4 :not(<complex>) — modern browsers (Chrome 88+,
         Safari 14+, Firefox 84+).
     (b) Explicit page-content container selectors — works on every
         browser, catches the most common leak vectors (post_content
         paste, Elementor HTML widget, etc.).
     (c) JS scrubber at the bottom of the script bundle — DOM removal
         for stubborn orphans. */
[class^="ftr-"]:not(.upmos-ftr-v1):not(.upmos-ftr-v1 *),
[class*=" ftr-"]:not(.upmos-ftr-v1):not(.upmos-ftr-v1 *) {
  display: none !important;
}
/* v2.7 #V4a: explicit page-content suppression for browsers that don't
   support :not(<complex>). Hides .ftr-* classes anywhere they appear
   inside common WP/Elementor/Wolmart content containers. */
.entry-content [class^="ftr-"], .entry-content [class*=" ftr-"],
.post-content [class^="ftr-"],  .post-content [class*=" ftr-"],
.page-content [class^="ftr-"],  .page-content [class*=" ftr-"],
.elementor-widget-container [class^="ftr-"], .elementor-widget-container [class*=" ftr-"],
.elementor-widget-html [class^="ftr-"],      .elementor-widget-html [class*=" ftr-"],
.wp-block-html [class^="ftr-"], .wp-block-html [class*=" ftr-"] {
  display: none !important;
}

/* v2.18.1 #DD1 — DUPLICATE-FOOTER GUARD (last-line CSS defense).
   The PHP-side UPMOS_FTR_RENDERED constant guard prevents the closure
   from running twice within ONE add_action callback chain. But if the
   snippet is registered through TWO separate WPCode entries (e.g. an
   active duplicate plus the canonical one), each gets its own closure
   AND its own constant-guard scope on first execution — the second
   closure still ends up running its render block before the constant
   propagation matters in some edge cases (priority ties, `init`-time
   echoing, etc.).

   Defense: any second `.upmos-ftr-v1` element on the page is hidden.
   Pure CSS, zero runtime cost, can't be defeated by snippet load order.
   Real fix is to delete the duplicate WPCode snippet — see admin notes
   in the v2.18 release header. This rule keeps users from seeing the
   ghost footer until that cleanup happens. */
.upmos-ftr-v1 ~ .upmos-ftr-v1 {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

.upmos-ftr-v1 {
  --ftr-bg-main:        #004577;
  --ftr-bg-trust:       #003a66;  /* v2.0 #V1: trust strip — slightly darker than main */
  --ftr-bg-legal:       #42649b;
  /* v2.2 #R1: --ftr-bg-pay removed (Row P deleted). */
  --ftr-bg-copy:        #141511;
  --ftr-card-bg:        rgba(255,255,255,0.06);  /* v2.0 #V1: vendor-CTA card subtle lift */
  /* v2.2 #R3: content max-width — matches /shop page container so rendered
     content doesn't stretch edge-to-edge on wide monitors. Backgrounds
     remain full-width per row band (each <section> has 100% width); only
     the *-inner content containers center within this width. Override at
     :root level if shop-page max changes. */
  --ftr-content-max:    1400px;
  --ftr-text:           #ffffff;
  --ftr-text-soft:      rgba(255,255,255,0.86);
  --ftr-text-muted:     rgba(255,255,255,0.65);
  --ftr-rule:           rgba(255,255,255,0.18);
  --ftr-rule-strong:    rgba(255,255,255,0.32);
  --ftr-accent:         #FF5C00;
  --ftr-accent-hover:   #ffaa66;
  --ftr-disabled-bg:    #6b7280;
  --ftr-feedback-bg:    #41649b;
  --ftr-feedback-rule:  rgba(255,255,255,0.55);
  --ftr-radius-sm:      4px;
  --ftr-radius-md:      10px;
  --ftr-radius-lg:      18px;
  --ftr-radius-pill:    999px;
  --ftr-shadow-md:      0 6px 24px rgba(0,0,0,0.18);
  --ftr-shadow-lg:      0 12px 32px rgba(0,0,0,0.25);
  --ftr-anim-fast:      120ms;
  --ftr-anim:           200ms;
  --ftr-easing:         cubic-bezier(.2,.8,.25,1);
  /* v1.8 #1: --ftr-z-top removed; back-to-top apparatus deleted. */

  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ftr-text);
  line-height: 1.5;
  letter-spacing: -0.01em;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}
.upmos-ftr-v1 *, .upmos-ftr-v1 *::before, .upmos-ftr-v1 *::after { box-sizing: border-box; }
.upmos-ftr-v1 a { text-decoration: none; color: inherit; transition: color var(--ftr-anim-fast) var(--ftr-easing); }
.upmos-ftr-v1 ul { list-style: none; margin: 0; padding: 0; }
.upmos-ftr-v1 img { max-width: 100%; display: block; }
.upmos-ftr-v1 picture { display: contents; }
.upmos-ftr-v1 button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.upmos-ftr-v1 .screen-reader-text {
  border: 0;
  clip: rect(1px,1px,1px,1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute; width: 1px; word-wrap: normal !important;
}

.upmos-ftr-v1 a:focus-visible,
.upmos-ftr-v1 button:focus-visible,
.upmos-ftr-v1 input:focus-visible,
.upmos-ftr-v1 summary:focus-visible {
  outline: 2px solid var(--ftr-accent);
  outline-offset: 3px;
  border-radius: var(--ftr-radius-sm);
}

.upmos-ftr-v1 .ftr-ext-icon {
  width: 12px; height: 12px;
  margin-left: 4px;
  vertical-align: -1px;
  display: inline-block;
  opacity: 0.75;
}

/* v1.8 #1: back-to-top sentinel CSS REMOVED — see HTML removal note above. */

/* ============== ROW A: Main ============== */
.upmos-ftr-v1 .ftr-main {
  background: var(--ftr-bg-main);
  position: relative;
  /* v2.1 #C1: compacted from 56/24/72 -> 36/24/44.
     v2.3 #X2: trust strip now sits ABOVE this row in the same color band,
     so the visual top spacing already comes from the trust strip — drop
     top padding to a small breathing room (6 px) so the logo doesn't
     bump against the trust cards. */
  /* v2.20 (2026-05-02): bottom padding 44 -> 18 px. The newsletter section
     above already provides 12 px of its own bottom padding, so 18 px of
     .ftr-main bottom padding gives a balanced ~30 px gap between the
     consent checkbox and the legal-link bar — instead of the previous
     ~56 px void the user flagged in the screenshot.
     v2.47 (2026-05-13): horizontal 24 -> 48 px on desktop so the orange
     UPMOS wordmark + trust-card row gets proper breathing room from the
     screen edge per user. The @media (max-width:1280px) override below
     stays at 24 px so mobile/tablet are unchanged.
     v2.48 (2026-05-13): top padding 6 -> 24 px on desktop per user —
     the wordmark was sitting flush against the top edge of the dark-blue
     band with no breathing room above the .ftr-main-top-row. 24 px matches
     the tablet/mobile inset already in place, restoring vertical rhythm
     on desktop without affecting narrower viewports. */
  padding: 24px 48px 18px;
  contain: layout style;
}
.upmos-ftr-simplified .ftr-main { display: none; }

/* v2.25 (2026-05-12) — Legal-links one-row guarantee on tablet
   ============================================================
   At tablet widths (~768-1024 px), the default desktop sizing
   (12.5 px font, 18 px gap, 22 px padding) overflows: the 8 legal
   links (Terms / Privacy / CA Notice / Cash Back / Cookie / Privacy
   Choices / Consumer Health / More Policies) wrap to 2 rows with the
   default `justify-content: space-between` producing an ugly stretched
   spacing on the second row. User wants them on a single row.
   Strategy: shrink font to 11.5 px and gap to 8 x 12 px — measured
   total width drops to ~880 px which fits comfortably inside the 980-
   1000 px viewport-minus-padding budget. flex-wrap: nowrap as belt-
   and-suspenders insurance against future link additions. */
@media (min-width: 761px) and (max-width: 1280px) {
  .upmos-ftr-v1 .ftr-legal-inner {
    flex-wrap: nowrap;
    gap: 6px 12px;
    padding: 10px 18px;
  }
  .upmos-ftr-v1 .ftr-legal-link,
  .upmos-ftr-v1 .ftr-legal-btn {
    font-size: 11.5px;
  }
}

/* v2.25 (2026-05-12) — Simplified-variant TABLET polish (audit fixes S1-S4)
   ============================================================
   On cart / checkout / edit-address / payment-methods pages, the
   .ftr-main band (logo + trust + nav + newsletter + CS + Social) is
   hidden via the rule above. That leaves the .ftr-legal links row and
   the .ftr-copy copyright row as the ENTIRE footer for those pages.
   Those two rows inherit the desktop sizing by default — 10 px vertical
   padding, justify-content: space-between, flex: 1 on the copy text —
   which reads thin and unbalanced when it's the only footer content.
   Tablet-specific overrides bring it to A+:
     S1: vertical padding bumped (10 -> 18 px on legal, 10 -> 14 px on
         copy) so the rows feel like a deliberate landing strip.
     S2: legal-inner switched from space-between to flex-start with a
         consistent 12 x 22 px gap. Wrapped links now pack uniformly
         instead of the last row stretching to fill.
     S3: copyright text loses its flex:1 stretch in simplified-mode and
         centers on its own narrow row, no more "lonely chunk pinned
         to one side" effect.
     S4: stronger top divider on .ftr-legal in simplified-mode (rgba
         0.06 -> 0.14) so the band visually anchors against the page
         content above.
   Scoped to .upmos-ftr-simplified AND the 761-1280 px viewport range
   so the public-site full footer (every other page) and mobile
   simplified rendering are unaffected. */
@media (min-width: 761px) and (max-width: 1280px) {
  .upmos-ftr-v1.upmos-ftr-simplified .ftr-legal {
    border-top-color: rgba(255, 255, 255, 0.14);
  }
  .upmos-ftr-v1.upmos-ftr-simplified .ftr-legal-inner {
    padding: 18px 22px;
    justify-content: flex-start;
    gap: 12px 22px;
  }
  .upmos-ftr-v1.upmos-ftr-simplified .ftr-copy-inner {
    padding: 14px 22px;
    justify-content: center;
  }
  .upmos-ftr-v1.upmos-ftr-simplified .ftr-copy-text {
    flex: 0 1 auto;
    min-width: 0;
  }
}

/* v2.5 #Z2: .ftr-main-top-row holds the logo + 4 trust cards on a single
   row. Logo on the left, trust cards taking remaining width. Wraps on
   narrower viewports via flex-wrap.
   v2.6 #W2: bottom margin 20 -> 36 px so trust strip has clear breathing
   room before the nav columns start. */
.upmos-ftr-v1 .ftr-main-top-row {
  max-width: var(--ftr-content-max, 1280px);
  /* v2.7 #V2: 36 -> 56 px (clear horizontal break between trust strip and nav cols) */
  margin: 0 auto 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}
.upmos-ftr-v1 .ftr-main-logo {
  /* v2.5 #Z2: now an inline flex item alongside the trust cards (was a
     centered block above .ftr-main-inner).
     v2.25 (2026-05-12): negative margin removed. The v2.20 -37 px hack
     compensated for the wreath PNG's 29.3% transparent padding on each
     side. The new horizontal wordmark logo (upmos-login-logo-orange.png)
     has tight bounds, so no offset is needed — the visible artwork
     already aligns with the column grid edge. */
  flex-shrink: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.upmos-ftr-v1 .ftr-main-logo img {
  /* v2.25 (2026-05-12): dimensions resized for the horizontal wordmark
     (native 448 x 118, 3.8:1 aspect). Was: 96 x 128 (1.33:1 wreath).
     38 px height (was 53 px in the first v2.25 pass — user feedback:
     too big) keeps the logo a balanced brand anchor at the top of the
     mobile footer without dominating the strip; 144 px max-width caps
     it for narrow viewports. The #upmos-logo-recolor filter (v2.5 #Z1,
     white->navy) is REMOVED — the wordmark is already orange so the
     filter would otherwise mangle any non-orange pixel (anti-alias
     edges, wordmark glyph fill).
     v2.47 (2026-05-13): desktop default 38x144 -> 32x121 px (~16%
     shrink) per user — wordmark was reading oversized vs the 5
     trust-card glyphs on the same .ftr-main-top-row. 3.8:1 native
     aspect preserved (32 height -> 122 width, capped 121). Tablet
     landscape (30x113 at 1024-1280) and tablet portrait (28x107 at
     <=900) overrides further down the file are unchanged. */
  height: 32px;
  width: auto;
  max-width: 121px;
  transition: opacity var(--ftr-anim-fast) var(--ftr-easing);
}
.upmos-ftr-v1 .ftr-main-logo a { display: inline-flex; align-items: center; }
.upmos-ftr-v1 .ftr-main-inner {
  /* v2.2 #R3: constrained to --ftr-content-max (matches /shop page).
     Background of .ftr-main is full-width via the parent <section>. */
  max-width: var(--ftr-content-max, 1280px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr)) minmax(280px, 360px);
  /* v2.8 #U3: single row (was auto auto). Row 2 was added in v1.7 to host
     the feedback widget; v2.7 moved that into Customer Service, leaving
     row 2 empty and creating an artificial vertical gap below the nav
     columns. Collapsing to a single row removes the gap. */
  grid-template-rows: auto;
  /* v2.1 #C1: 40/32 -> 24/24 */
  gap: 24px 24px;
  align-items: start;
  position: relative;
  z-index: 1;
}
/* v2.8 #U3: side cluster occupies single grid row (was rows 1-2). */
.upmos-ftr-v1 .ftr-side { grid-column: 5 / 6; }
.upmos-ftr-v1 .ftr-col { min-width: 0; }
/* All footer headings forced white — overrides theme body h2/h3 cascade.
   !important is required because Wolmart sets h2/h3 colors at body level
   with equal specificity, and our scoped selectors lose the cascade race. */
.upmos-ftr-v1 .ftr-col-title,
.upmos-ftr-v1 .ftr-side-h,
.upmos-ftr-v1 .ftr-app-h,
.upmos-ftr-v1 h2.ftr-col-title,
.upmos-ftr-v1 h3.ftr-side-h,
.upmos-ftr-v1 h3.ftr-app-h {
  color: #ffffff !important;
}
.upmos-ftr-v1 .ftr-col-title {
  font-weight: 800;
  /* v2.1 #C2: 16 -> 14; margin 14 -> 10 */
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.upmos-ftr-v1 .ftr-col-list li { margin: 0; padding: 0; }
/* v2.1 #C2: row gap 7 -> 5 */
.upmos-ftr-v1 .ftr-col-list li + li { margin-top: 5px; }
.upmos-ftr-v1 .ftr-col-list a {
  display: inline-block;
  /* v2.1 #C2: 14.5 -> 13.5 */
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ftr-text-soft);
  letter-spacing: -0.02em;
  padding: 1px 0;
  border-bottom: 1px solid transparent;
}
.upmos-ftr-v1 .ftr-col-list a[aria-current="page"] {
  color: var(--ftr-text);
  border-bottom-color: var(--ftr-accent);
}

.upmos-ftr-v1 .ftr-side {
  display: flex;
  flex-direction: column;
  /* v2.12 #M2: 12 -> 6 px between sections. Pulls Sell on Upmos
     directly under Customer Service with minimal break, and lifts
     Follow Us icons up correspondingly. */
  gap: 6px;
  align-items: flex-start;
}
.upmos-ftr-v1 .ftr-side-section { width: 100%; }
.upmos-ftr-v1 .ftr-side-h {
  margin: 0 0 8px;
  /* v2.1 #C3: 13 -> 12 */
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* v2.1 #C3: contact font 13.5 -> 12.5; gap 8 -> 6 */
.upmos-ftr-v1 .ftr-contact-list { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.upmos-ftr-v1 .ftr-contact-list li {
  display: flex; align-items: flex-start; gap: 9px;
  color: var(--ftr-text-soft); letter-spacing: -0.02em;
}
.upmos-ftr-v1 .ftr-contact-list li svg {
  width: 15px; height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.85;
}
.upmos-ftr-v1 .ftr-contact-list li a { color: var(--ftr-text-soft); border-bottom: 1px solid transparent; }
.upmos-ftr-v1 .ftr-contact-list li a:focus-visible { color: var(--ftr-text); }
.upmos-ftr-v1 .ftr-contact-list address { font-style: normal; }
/* v2.57 (2026-05-15): hours row forced single-line per user "I need on
   the footer section where it shows Mon-Sat 7AM-8PM CT I need that
   section to have 1 row this is on mobile viewing". The NBSP-glued
   source string is the primary mechanism (no break opportunities exist
   in the text itself); white-space: nowrap on the inner <span> is
   belt-and-suspenders so any future copy edit that reintroduces a
   regular space won't silently let the line wrap again. Scoped to
   the hours <li> only — phone / email / live-chat rows keep their
   default wrap behavior so long values don't overflow the column. */
.upmos-ftr-v1 .ftr-contact-hours span { white-space: nowrap; }

.upmos-ftr-v1 .ftr-newsletter-sub {
  /* v2.1 #C3: 12.5 -> 11.5 */
  font-size: 11.5px;
  color: var(--ftr-text-muted);
  margin: -2px 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.4;
}
.upmos-ftr-v1 .ftr-newsletter-row {
  display: flex; gap: 0;
  /* v2.1 #C3: 42 -> 38 */
  height: 38px;
  border-radius: var(--ftr-radius-sm);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.upmos-ftr-v1 .ftr-newsletter-input {
  flex: 1; min-width: 0;
  border: 0; outline: 0;
  padding: 0 10px;
  font: inherit; font-size: 13px;
  background: #fff; color: #141511;
  letter-spacing: -0.02em;
}
.upmos-ftr-v1 .ftr-newsletter-input::placeholder { color: rgba(20,21,17,0.55); }
.upmos-ftr-v1 .ftr-newsletter-btn {
  flex-shrink: 0;
  padding: 0 14px;
  /* v2.18 #G1: reverted v2.17 flip — Subscribe is the orange CTA. */
  background: var(--ftr-accent);
  color: #fff;
  font-weight: 700;
  /* v2.1 #C3: 13.5 -> 12.5 */
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background var(--ftr-anim-fast) var(--ftr-easing),
              color var(--ftr-anim-fast) var(--ftr-easing);
}
.upmos-ftr-v1 .ftr-newsletter-btn:disabled {
  background: var(--ftr-disabled-bg);
  color: #fff;
  cursor: not-allowed;
}
/* GDPR consent checkbox row — v2.1 #C3: tighter sizing */
.upmos-ftr-v1 .ftr-newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ftr-text-muted);
  letter-spacing: -0.01em;
  cursor: pointer;
}
.upmos-ftr-v1 .ftr-newsletter-consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 1px;
  width: 14px; height: 14px;
  accent-color: var(--ftr-accent);
  cursor: pointer;
}
.upmos-ftr-v1 .ftr-newsletter-msg {
  margin-top: 8px;
  font-size: 12.5px;
  min-height: 18px;
  line-height: 1.4;
}
.upmos-ftr-v1 .ftr-newsletter-msg.is-ok { color: #b3e6c0; }
.upmos-ftr-v1 .ftr-newsletter-msg.is-err { color: #ffb3b3; }
.upmos-ftr-v1 .ftr-newsletter-hp {
  position: absolute;
  left: -9999px; top: -9999px;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* v2.14 #K1 + v2.16 #I2: breathing room above the social section. The
   rest of the side cluster keeps the tight 6 px gap from v2.12; the
   social row gets an extra margin-top (14 -> 22 px in v2.16) so the
   icons drop further below the Sell on Upmos APPLY NOW button. */
.upmos-ftr-v1 .ftr-social-section {
  margin-top: 22px;
}

/* Social row — v2.3 #X3: plain icons, no card chrome.
   v2.4 #Y3: tighter spacing — 32x32 cells with 0 gap and 22x22 glyphs.
   Touch target = 32x32 (WCAG 2.1 AA, above the 24x24 minimum). For an
   AAA-strict surface, expand via ::before hit-padding. Hover intensifies
   opacity rather than shifting bg/border. */
.upmos-ftr-v1 .ftr-socials {
  display: flex;
  flex-wrap: wrap;
  /* v2.4 #Y3: 6 -> 0 (icons sit edge-to-edge, visual spacing comes from
     the centered glyph padding inside each 32x32 cell) */
  gap: 0;
}
.upmos-ftr-v1 .ftr-socials li { margin: 0; padding: 0; }
.upmos-ftr-v1 .ftr-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* v2.16 #I1: 26 -> 28 (small padding around the new 21px glyph) */
  width: 28px;
  height: 28px;
  /* v2.23 (2026-05-07) #7: WCAG 2.5.5 hit-target.
     v2.48 (2026-05-13): 44 -> 32 px per user — the AAA 44px box was
     stretching each visible 28px cell to a 44px transparent square,
     spacing the 7 social glyphs ~16px apart and breaking the icon row
     into a loose strip instead of a tight cluster. 32x32 still clears
     WCAG 2.5.5 AA (24x24 minimum) and the 21px SVG glyph stays centered
     inside the smaller hit area. Tightens the desktop row from ~308px
     total to ~224px (7 icons × 32px) so IG / FB / X / Pinterest /
     LinkedIn / YouTube / TikTok read as one social cluster. */
  min-width: 32px;
  min-height: 32px;
  /* v2.3 #X3: no card chrome — pure icon on parent bg */
  border-radius: 0;
  border: 0;
  background: transparent;
  color: #ffffff !important;
  opacity: 0.85;
  transition: opacity var(--ftr-anim-fast) var(--ftr-easing),
              transform var(--ftr-anim-fast) var(--ftr-easing);
}
/* v2.16 #I1: glyph 18 -> 21 px per user spec */
.upmos-ftr-v1 .ftr-social svg { width: 21px; height: 21px; }
/* Placeholder socials (no real URL yet): muted further to indicate inactivity */
.upmos-ftr-v1 .ftr-social-placeholder {
  cursor: default;
  opacity: 0.55;
}
.upmos-ftr-v1 .ftr-social-placeholder:hover { opacity: 0.7; }

.upmos-ftr-v1 .ftr-app { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.upmos-ftr-v1 .ftr-app-h {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.upmos-ftr-v1 .ftr-app-h .ftr-app-h-brand { font-weight: 800; color: var(--ftr-accent); }
.upmos-ftr-v1 .ftr-app-sub { font-size: 13px; color: var(--ftr-text-soft); letter-spacing: -0.01em; }
.upmos-ftr-v1 .ftr-app-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.upmos-ftr-v1 .ftr-app-badge {
  display: inline-block;
  border-radius: 8px;
  overflow: hidden;
  transition: transform var(--ftr-anim-fast) var(--ftr-easing),
              box-shadow var(--ftr-anim-fast) var(--ftr-easing);
}
.upmos-ftr-v1 .ftr-app-badge img,
.upmos-ftr-v1 .ftr-app-badge .ftr-app-svg { height: 44px; width: auto; display: block; object-fit: contain; }

/* v2.9 #Q2 + v2.11 #N2: Customer Service flex layout — text content
   on left, feedback widget on right, side-by-side. v2.11 tightened
   gap from 12/16 -> 6/12 px so the label sits "perfectly next to"
   the contact list with proper but compact spacing. */
.upmos-ftr-v1 .ftr-cs-section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 12px;
}
.upmos-ftr-v1 .ftr-cs-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* v2.10 #P1: feedback widget = single image, no text overlays.
   v2.12 #M1: lifted via negative margin-top so the label visually
   floats up into the empty space above the Customer Service heading
   line. Image width reduced 120 -> 100 px so the section's overall
   footprint is smaller. */
.upmos-ftr-v1 .ftr-feedback-widget {
  flex-shrink: 0;
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-width: 120px;
  line-height: 0; /* removes baseline gap under <img> */
  /* v2.12 #M1: lift the label visually above Customer Service heading line */
  margin-top: -6px;
  transition: opacity var(--ftr-anim-fast) var(--ftr-easing);
}
.upmos-ftr-v1 .ftr-feedback-img {
  /* v2.12 #M1: 120 -> 100 (smaller footprint) */
  width: 100px;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* ============== Stretched newsletter section (v2.10 #P2) ==============
   Full-width call-out below .ftr-main-inner. Best-practice horizontal
   layout: text on the left, form on the right. Wraps to stacked layout
   on phone via flex-wrap. */
.upmos-ftr-v1 .ftr-newsletter-stretch {
  max-width: var(--ftr-content-max, 1280px);
  /* v2.20.1 (2026-05-02): bottom padding pulled to 0 — the consent-checkbox
     row already provides its own ~6 px breathing room below the input,
     and we want the section to sit flush against the next .ftr-main bottom
     padding instead of stacking two pads. Top stays at 12 px so the border-
     top divider has clear space above the heading. */
  margin: 14px auto 0;
  padding: 12px 24px 0;
  border-top: 1px solid var(--ftr-rule);
}
.upmos-ftr-v1 .ftr-newsletter-stretch-inner {
  display: flex;
  flex-wrap: wrap;
  /* v2.21 (2026-05-02): user wants BOTH flex children — the left text
     block (heading + sub) and the right form block (email row + consent)
     — vertically centered relative to each other. flex-start (set in
     v2.20) pinned both to the top, which made the shorter text block
     hug the top while the taller form extended below it. center makes
     each block sit in the vertical middle of the row, so visually the
     heading drops down to align with the email input, and the consent
     line and the sub-copy bracket the row symmetrically. */
  align-items: center;
  /* v2.23.3 (2026-05-02): justify-content was space-between, which
     pinned the form to the right edge and left a big void between
     the GET THE LATEST DEALS text block and the email field. Per
     user, the form needs to sit IMMEDIATELY next to the text. With
     three flex children (All Access · text · form), flex-start packs
     them left-to-right with the existing 28 px column gap between
     each — no void in the middle of the row. Empty space (if any)
     collects at the right edge, where it's visually quiet. */
  justify-content: flex-start;
  gap: 10px 28px;
}
.upmos-ftr-v1 .ftr-newsletter-stretch-text {
  /* v2.23.3 (2026-05-02): flex-grow was 1 (filling remaining space),
     which combined with space-between pushed the form to the right
     edge. Drop grow to 0 so the text block takes natural width and
     the form can sit directly after it. min-width: 0 retained for
     long-string overflow safety. */
  flex: 0 1 auto;
  min-width: 0;
}
/* v2.23 (2026-05-02): All Access brand mark sitting to the LEFT of the
   GET THE LATEST DEALS heading inside the newsletter row. Mirrors
   .hdr-allaccess from the header (same SVG asset, same hover-fade)
   but scoped to the footer namespace. Width is capped at 96 px so the
   badge never extends past the orange wreath logo's visible width
   (~91 px) above it — keeps the left-column visual mass consistent
   between the trust-strip row and the newsletter row. flex-shrink: 0
   prevents the form on the right from squishing it. */
.upmos-ftr-v1 .ftr-allaccess {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  transition: opacity var(--ftr-anim-fast) var(--ftr-easing);
}
.upmos-ftr-v1 .ftr-allaccess img {
  /* v2.23.2 (2026-05-02): user requested another size bump — the
     40 px badge from v2.23.1 still read as a small inline mark next
     to the heading. 56 px puts the badge at ~58 % of the orange
     wreath logo's height above (96 px), giving it a clear visual
     anchor as a co-equal brand mark in the newsletter row instead
     of trying to match the text block height. SVG natural aspect
     80×24 → ~187 px wide at this height. max-width raised to 200 px
     so the natural width fits cleanly. */
  height: 56px;
  width: auto;
  max-width: 200px;
  display: block;
}
.upmos-ftr-v1 .ftr-newsletter-stretch-h {
  /* v2.20: 18 -> 16 px; tighter line-height; reduced bottom margin. */
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff !important;
  margin: 0 0 2px;
  line-height: 1.15;
}
.upmos-ftr-v1 .ftr-newsletter-stretch-text .ftr-newsletter-sub {
  /* v2.20: 13 -> 12 px; tighter line-height. */
  margin: 0;
  font-size: 12px;
  color: var(--ftr-text-soft);
  line-height: 1.3;
  max-width: 64ch;
}
.upmos-ftr-v1 .ftr-newsletter-form-stretch {
  /* v2.23.5 (2026-05-02): per user, the email entry was stretching
     much wider than needed — the placeholder "Your email address" only
     needs ~140 px to display, so a ~340 px form (input ~250 px + 90 px
     button) is comfortable without feeling stretched. */
  flex: 0 1 340px;
  max-width: 340px;
  min-width: 0;
  /* v2.23.7 (2026-05-02): the form was visually sitting ABOVE the
     text block's vertical middle because the .ftr-newsletter-msg
     status div inside the form was reserving ~26 px of "phantom"
     height even when empty (8 px margin-top + 18 px min-height) —
     so align-items: center on the inner row was centering a 66 px
     form box against a 57 px text block, parking the visible
     40 px email row at the top of the form. position:relative here
     anchors absolute children — see the .ftr-newsletter-msg rule
     scoped to this form, which floats the msg div BELOW the form
     box without contributing to form height. */
  position: relative;
}
/* v2.23.7 (2026-05-02): float the status message below the form
   instead of inside its flex height, so the form's effective box
   is just the 40 px email row. align-items: center on the inner
   row then perfectly centers the email row against the text
   block's vertical middle (sub-copy line). The .ftr-main
   padding-bottom (18 px) plus the legal bar's top margin gives
   adequate room below for a transient status message to render
   without crashing into the legal links. */
.upmos-ftr-v1 .ftr-newsletter-form-stretch .ftr-newsletter-msg {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin-top: 0;
}
/* v2.24 (2026-05-02): trust-seals badge at the right edge of the
   newsletter row. margin-left: auto consumes any remaining row
   space, parking the seals against the row's right edge — symmetric
   with the All Access badge anchored on the left. Height matches
   the 56 px All Access badge so both anchors read at the same
   visual scale. max-width caps the rendered image at 320 px so it
   never crowds the SUBSCRIBE button on narrow widths; flex-shrink:0
   protects it from being squeezed when the row's available space
   tightens. */
.upmos-ftr-v1 .ftr-trust-seals {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}
.upmos-ftr-v1 .ftr-trust-seals img {
  /* v2.24.2 (2026-05-02): source PNG swapped to Trusted-badges.png,
     a re-rendered composite where all three badges (Norton +
     TrustedSite + BBB) read at uniform internal sizes. New native
     dims 539×86 (6.27:1 aspect, vs the v2.24 image's 5.34:1).
     Keeping 40 px rendered height — at the new aspect that's
     ~251 px wide, so the cap was raised from 240 → 280 px to let
     the composite render at its natural width without being
     clipped. */
  height: 40px;
  width: auto;
  max-width: 280px;
  display: block;
}
/* v2.35: CS-section trust-seals copy — portrait only, hidden on desktop and landscape */
.upmos-ftr-v1 .ftr-trust-seals--cs { display: none; }
.upmos-ftr-v1 .ftr-newsletter-form-stretch .ftr-newsletter-row {
  /* v2.20: 46 -> 40 px (industry-standard form-input height; matches the
     trust-strip card height below it). */
  height: 40px;
}
.upmos-ftr-v1 .ftr-newsletter-form-stretch .ftr-newsletter-input {
  font-size: 13px;
  padding: 0 12px;
}
.upmos-ftr-v1 .ftr-newsletter-form-stretch .ftr-newsletter-btn {
  padding: 0 18px;
  font-size: 12px;
}
/* v2.23.4 (2026-05-02): consent row used to live inside
   .ftr-newsletter-form-stretch. The v2.20 selector above is retained as
   a no-op (no longer matches anything) for source-history clarity but
   produces no rules — the consent is now inside .ftr-newsletter-stretch-text
   below the sub-copy. The new selector below tightens the gap between
   the sub-copy and the consent line and keeps the consent's smaller
   font-size in the new location. */
.upmos-ftr-v1 .ftr-newsletter-stretch-text .ftr-newsletter-consent {
  margin-top: 6px;
  font-size: 10.5px;
}
/* old form-scoped rule retained as a no-op for clarity (no consent
   inside the form anymore). */
.upmos-ftr-v1 .ftr-newsletter-form-stretch .ftr-newsletter-consent {
  margin-top: 6px;
  font-size: 10.5px;
}

/* ============== Trust strip cards (v2.0 #T1, v2.5 #Z2 inline-with-logo) ==============
   v2.5: trust strip is no longer a standalone <section>. The .ftr-trust-inner
   <ul> renders inside .ftr-main-top-row as a flex sibling of .ftr-main-logo.
   The deep-navy band is provided by .ftr-main itself. */
.upmos-ftr-v1 .ftr-trust-inner {
  /* v2.5 #Z2: flex inline within the top-row container — takes remaining
     width after the logo. Cards lay out left-aligned with wrap. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px 28px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.upmos-ftr-v1 .ftr-trust-item {
  display: flex;
  align-items: center;
  /* v2.1 #C4: 14 -> 11 */
  gap: 11px;
  min-width: 0;
  /* v2.4 #Y1: cards stay natural width — no longer stretching to 1fr.
     flex-shrink:0 prevents the icon-+-text combo from wrapping awkwardly. */
  flex-shrink: 0;
}
.upmos-ftr-v1 .ftr-trust-item + .ftr-trust-item {
  position: relative;
}
.upmos-ftr-v1 .ftr-trust-item + .ftr-trust-item::before {
  content: "";
  position: absolute;
  /* v2.4 #Y1: separator centered in the new 32px column gap */
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--ftr-rule);
}
.upmos-ftr-v1 .ftr-trust-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* v2.1 #C4: 44 -> 36 */
  width: 36px;
  height: 36px;
  border-radius: var(--ftr-radius-md);
  background: var(--ftr-card-bg);
  border: 1px solid var(--ftr-rule);
  color: var(--ftr-accent);
  /* v2.21.6 (2026-05-02): added color to the transition list so the
     SVG strokes/fills (which use currentColor) animate smoothly when
     the hover state flips them from orange to white. */
  transition: background var(--ftr-anim-fast) var(--ftr-easing),
              border-color var(--ftr-anim-fast) var(--ftr-easing),
              color var(--ftr-anim-fast) var(--ftr-easing);
}
/* v2.1 #C4: 24 -> 20 */
.upmos-ftr-v1 .ftr-trust-icon svg { width: 20px; height: 20px; }
.upmos-ftr-v1 .ftr-trust-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.upmos-ftr-v1 .ftr-trust-h {
  /* v2.1 #C4: 14 -> 13 */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ftr-text);
  line-height: 1.2;
}
.upmos-ftr-v1 .ftr-trust-sub {
  /* v2.1 #C4: 12.5 -> 11.5 */
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ftr-text-soft);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-top: 1px;
}

/* ============== ROW B: Legal ============== */
.upmos-ftr-v1 .ftr-legal {
  background: var(--ftr-bg-legal);
  border-top: 1px solid rgba(0,0,0,0.06);
  contain: layout style;
}
.upmos-ftr-v1 .ftr-legal-inner {
  /* v2.2 #R3: constrained to --ftr-content-max (matches /shop page).
     Background of .ftr-legal is full-width via the parent <section>. */
  max-width: var(--ftr-content-max, 1280px);
  margin: 0 auto;
  /* v2.1 #C5: 18/24 -> 10/22; v2.70: 10 -> 5 px */
  padding: 5px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
}
.upmos-ftr-v1 .ftr-legal-link {
  /* v2.1 #C5: 14 -> 12.5 */
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ftr-text);
  letter-spacing: -0.02em;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
}
.upmos-ftr-v1 .ftr-legal-link[aria-current="page"] { border-bottom-color: var(--ftr-accent); }
.upmos-ftr-v1 .ftr-legal-link-icon { display: inline-flex; align-items: center; gap: 7px; }
/* v2.1 #C5: capriv 29x14 -> 26x12 */
.upmos-ftr-v1 .ftr-legal-capriv { width: 26px; height: 12px; object-fit: contain; display: block; flex-shrink: 0; }
.upmos-ftr-v1 .ftr-legal-btn {
  /* v2.21.3 (2026-05-02): Cookie Settings button must look + hover
     IDENTICALLY to the surrounding <a class="ftr-legal-link"> anchors.
     v2.21.2 left some properties to cascade resolution and there is a
     generic ".upmos-ftr-v1 button { border: 0; padding: 0; ... }" reset
     elsewhere in the stylesheet that competes for shared longhands. To
     remove all ambiguity, explicitly re-declare every property the
     anchor rule sets so the cascade is decided here. The :hover rule
     for .ftr-legal-btn is added below in the @media(hover) block so the
     underline-on-hover fires on the button regardless of element-type
     specificity quirks. */
  display: inline;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: inherit;
  white-space: nowrap;
  color: var(--ftr-text);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
  margin: 0;
}

/* v2.2/v2.3: payment-card CSS REMOVED entirely. v2.2 had migrated the cards
   into .ftr-trust-pay-* inside the trust strip; v2.3 deletes them altogether
   (DOM, CSS, PHP build, SVG variables, JSON-LD). No payment chrome on the
   rendered footer. */

/* ============== Vendor-CTA card (v2.0 #T3, v2.1 #C3 compact, v2.12 #M3 tighter) — sits inside .ftr-side ============== */
.upmos-ftr-v1 .ftr-vendor-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  /* v2.12 #M3: 12/14 -> 10/12 (slightly smaller box) */
  padding: 10px 12px;
  border: 1px solid var(--ftr-rule);
  background: var(--ftr-card-bg);
  border-radius: var(--ftr-radius-md);
}
/* v2.13 #L1: .ftr-vendor-cta-icon CSS REMOVED (storefront icon block
   dropped from the rendered DOM — headline alone carries meaning). */
.upmos-ftr-v1 .ftr-vendor-cta-h {
  margin: 0;
  /* v2.1 #C3: 14 -> 12.5 */
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff !important;
}
.upmos-ftr-v1 .ftr-vendor-cta-sub {
  margin: 0;
  /* v2.1 #C3: 12.5 -> 11.5 */
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ftr-text-soft);
  letter-spacing: -0.02em;
  line-height: 1.35;
}
/* v2.8 #U1: white-icon benefit list inside the vendor CTA card. Each row
   is a 16x16 SVG (currentColor → white) + a single short value-prop line.
   Sits between the sub copy and the Apply Now button. */
.upmos-ftr-v1 .ftr-vendor-cta-benefits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 6px;
  padding: 0;
  list-style: none;
  width: 100%;
}
.upmos-ftr-v1 .ftr-vendor-cta-benefit {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.upmos-ftr-v1 .ftr-vendor-cta-benefit svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #ffffff;
}

.upmos-ftr-v1 .ftr-vendor-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  /* v2.1 #C3: 8/14 -> 6/12 */
  padding: 6px 12px;
  /* v2.18 #G2: flipped — default WHITE bg + ORANGE text + ORANGE border;
     hover swaps to ORANGE bg + WHITE text (see hover block). */
  background: #ffffff;
  color: var(--ftr-accent) !important;
  border: 1px solid var(--ftr-accent);
  /* v2.1 #C3: 12.5 -> 11.5 */
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--ftr-radius-sm);
  text-decoration: none;
  transition: background var(--ftr-anim-fast) var(--ftr-easing),
              color var(--ftr-anim-fast) var(--ftr-easing),
              transform var(--ftr-anim-fast) var(--ftr-easing);
}

/* ============== ROW C: Copyright ============== */
.upmos-ftr-v1 .ftr-copy { background: var(--ftr-bg-copy); contain: layout style; }
.upmos-ftr-v1 .ftr-copy-inner {
  /* v2.2 #R3: constrained to --ftr-content-max (matches /shop page).
     Background of .ftr-copy is full-width via the parent <section>. */
  max-width: var(--ftr-content-max, 1280px);
  margin: 0 auto;
  /* v2.1 #C5: 14/24 -> 10/22
     v2.46 (2026-05-14): padding 10/22 -> 0/22 + line-height 1 + min-height
     16 across ALL viewports per user "the Special OFfer screen still is
     not matched with the black bar at the bottom match the top" — the
     v2.45 landscape-tablet-only override (1024-1280) wasn't firing on the
     user's actual viewport (1366+ landscape iPad or wider desktop). The
     header Special Offer bar (.hdr-announce) uses padding 0 + line-height
     1 + min-height 16; mirroring those here makes the Copyright bar
     collapse to the same vertical footprint everywhere so the two bars
     read as identical chrome top/bottom. Background + typography
     (#141511, 11.5px/400/-0.02em) already match. */
  padding: 0 22px;
  min-height: 16px;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  /* v2.1 #C5: 13 -> 11.5 */
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ftr-text-soft);
}
/* v2.23 (2026-05-07): all .ftr-copy-locale* rules removed — the locale
   switcher is gone (Polylang strip). The .ftr-copy-text rule below still
   applies; with the locale element gone the copyright <small> simply
   centers on its own row inside .ftr-copy-inner. */
.upmos-ftr-v1 .ftr-copy-text { flex: 1; text-align: center; min-width: 240px; }
/* v1.8 #P2: <small> wrapping copyright — keep its size identical to ftr-copy-inner */
.upmos-ftr-v1 small.ftr-copy-text { font-size: inherit; }

/* v1.8 #1: back-to-top button CSS REMOVED — see HTML removal note above. */

/* ============== Hover (gated) ============== */
@media (hover: hover) {
  .upmos-ftr-v1 .ftr-main-logo a:hover img { opacity: 0.85; }
  /* v2.23 (2026-05-02): match the header's All Access hover cue. */
  .upmos-ftr-v1 .ftr-allaccess:hover { opacity: 0.85; }
  .upmos-ftr-v1 .ftr-col-list a:hover {
    color: var(--ftr-text);
    border-bottom-color: var(--ftr-accent);
  }
  .upmos-ftr-v1 .ftr-contact-list li a:hover {
    color: var(--ftr-text);
    border-bottom-color: var(--ftr-accent);
  }
  /* v2.18 #G1: reverted to original darker-orange hover. */
  .upmos-ftr-v1 .ftr-newsletter-btn:not(:disabled):hover { background: #e55400; }
  /* v2.3 #X3: plain-icon hover — opacity + slight scale (no bg/border shift) */
  .upmos-ftr-v1 .ftr-social:hover {
    opacity: 1;
    transform: scale(1.08);
  }
  .upmos-ftr-v1 .ftr-app-badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--ftr-shadow-md);
  }
  /* v2.10 #P1: feedback widget hover — slight opacity nudge on the
     image-only widget (no text elements left to recolor). */
  .upmos-ftr-v1 .ftr-feedback-widget:hover { opacity: 0.85; }
  .upmos-ftr-v1 .ftr-legal-link:hover { border-bottom-color: var(--ftr-text); }
  /* v2.21.3 (2026-05-02): explicit hover rule for the Cookie Settings
     <button>. The .ftr-legal-link:hover above already targets it (the
     button has both classes), but a button-specific selector eliminates
     any chance of a competing element-type rule (.upmos-ftr-v1 button)
     winning the border-bottom-color cascade. Same hover color (white)
     as the anchor links. */
  .upmos-ftr-v1 .ftr-legal-btn:hover { border-bottom-color: var(--ftr-text); }
  /* v2.23 (2026-05-07): .ftr-copy-locale-list hover rule removed (Polylang strip). */
  /* v2.0/v2.3 hover gates (payment-card hover removed in v2.3).
     v2.21.6 (2026-05-02): user wants the trust-strip icon tiles to
     flip to a SOLID ORANGE background with a WHITE icon on hover (was
     a soft tinted background + orange icon). All four SVGs use
     stroke="currentColor" / fill="currentColor", so changing the CSS
     `color` property on .ftr-trust-icon flips every painted stroke
     and fill in the SVG to white in one shot — no SVG markup edits
     needed. */
  .upmos-ftr-v1 .ftr-trust-item:hover .ftr-trust-icon {
    background: var(--ftr-accent);
    border-color: var(--ftr-accent);
    color: #ffffff;
  }
  /* v2.18 #G2: hover flips to ORANGE bg + WHITE text (the inverse of
     the new white/orange default). */
  .upmos-ftr-v1 .ftr-vendor-cta-btn:hover {
    background: var(--ftr-accent);
    color: #ffffff !important;
    transform: translateY(-1px);
  }
}

/* ============== Responsive ============== */
@media (max-width: 1280px) {
  /* v2.25 (2026-05-12): top padding 6 -> 24 px (audit fix #A). The 6 px
     legacy value made sense when the trust strip lived ABOVE .ftr-main
     as a standalone section (v2.3 #X2). v2.5 #Z2 moved the trust strip
     INSIDE .ftr-main as a top-row sibling of the logo, so the strip
     now needs its own header inset. 24 px matches Material / iOS
     container-top defaults. */
  .upmos-ftr-v1 .ftr-main { padding: 24px 24px 18px; }
  .upmos-ftr-v1 .ftr-main-inner { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .upmos-ftr-v1 .ftr-side {
    grid-column: 1 / -1;
    grid-row: 2;  /* drop below nav cols on tablet/desktop-narrow */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 32px;
    padding-top: 28px;
    border-top: 1px solid var(--ftr-rule);
  }
  .upmos-ftr-v1 .ftr-side-section { width: 100%; }
  /* v2.25 (2026-05-12): Social row sits alone on grid-row 2 when the
     apps tile is unrendered, leaving CS + Vendor on row 1 and a lonely
     Social column to their right on row 2 (audit fix #C). Span Social
     across both grid columns so the social cluster lands as its own
     full-width row below CS + Vendor — reads cleaner than a stranded
     icon column. */
  .upmos-ftr-v1 .ftr-side .ftr-social-section { grid-column: 1 / -1; }
  /* v2.7 #V3: standalone .ftr-feedback responsive override removed —
     the widget is now a one-line link inside the Customer Service
     section and inherits its layout. */
  /* v2.0/v2.4/v2.5: trust strip wraps naturally inside .ftr-main-top-row;
     separator on first wrapped item is hidden */
  .upmos-ftr-v1 .ftr-trust-inner { gap: 12px 24px; }
  .upmos-ftr-v1 .ftr-trust-item:nth-child(odd) + .ftr-trust-item::before { display: none; }

  /* v2.25 (2026-05-12): newsletter side padding zeroed on tablet so its
     content (All Access logo, GET THE LATEST DEALS, email input, trust
     seals) shares the same left/right inset as the nav cols and side
     cluster above it (audit fix #B). Without this, newsletter sat at
     20+24 = 44 px from screen edge while everything else sat at the
     .ftr-main inset. Top stays 12 px for the border-top divider's
     breathing room. */
  .upmos-ftr-v1 .ftr-newsletter-stretch { padding-left: 0; padding-right: 0; }

  /* v2.25 (2026-05-12): trust seals on tablet sit on their own row
     (flex-basis: 100%) pinned to the FAR RIGHT (justify-content:
     flex-end) per user preference — balances visually against the
     left-aligned email form above. Margin-top adds form-to-
     supplementary separation. */
  .upmos-ftr-v1 .ftr-trust-seals {
    flex-basis: 100%;
    justify-content: flex-end;
    margin-top: 16px;
  }
}

/* v2.25 (2026-05-12) — Tablet landscape: restore 5-col desktop layout
   ============================================================
   MUST come AFTER the @media (max-width: 1280px) block above — both
   rule sets target the same selectors (.ftr-main-inner grid template,
   .ftr-side grid placement, .ftr-trust-inner flex behavior) at equal
   specificity, so source order resolves the cascade. This block lives
   here, not in the v2.25 "audit fixes" section earlier in the file,
   precisely so the cascade lands on landscape-orientation values.

   Per user feedback on iPad landscape: the v1.x-v2.24 behavior of
   collapsing to 4-col nav + full-width side cluster on row 2 looks
   incomplete on a wide landscape tablet — Customer Service / feedback
   widget / Sell on Upmos card stretched across the bottom, lots of
   empty space to the right of MEMBERSHIPS in the nav grid. Restoring
   the 5-col desktop layout at iPad-landscape widths fills that empty
   space with the side cluster, exactly mirroring the desktop visual
   rhythm. Trade-off: at tablet PORTRAIT (768-1023 px) we still drop
   to the 4-col + full-width-side fallback so the side cluster doesn't
   crowd the nav cols. User has acknowledged this portrait/landscape
   discontinuity is the right call (matches Native iOS app behavior,
   see #M20).

   Plus: force the 5 trust-badge cards onto a single row at tablet
   landscape (was 4-on-row-1 + 1-on-row-2 wrap). flex-wrap: nowrap +
   flex: 1 1 0 on each card forces equal-width packing into the
   available row width. */
@media (min-width: 1024px) and (max-width: 1280px) and (orientation: landscape) {
  /* Restore 5-col grid: 4 nav cols (1fr each) + side cluster column
     (clamped 220-280 px so it doesn't dominate at narrower iPad
     landscape widths like the 1024 px iPad Air 9.7"). */
  .upmos-ftr-v1 .ftr-main-inner {
    grid-template-columns: repeat(4, minmax(0,1fr)) minmax(220px, 280px);
  }
  /* v2.43 (2026-05-13): orange UPMOS wordmark scaled down at tablet
     landscape per user — desktop default 38x144 read too large in the
     1024-1280 landscape band where .ftr-main-top-row also has to fit
     the 5 trust-badge cards on the same row. 30 px height (~21%
     smaller) preserves brand legibility while giving the trust cards
     more breathing room. max-width 113 px keeps the wordmark's native
     3.8:1 aspect ratio (118 native = 30 rendered -> width scales 448
     -> 114). Slightly larger than portrait's 28x107 since landscape
     has more horizontal slack overall. */
  .upmos-ftr-v1 .ftr-main-logo img { height: 30px; max-width: 113px; }
  /* Side cluster back in col 5, vertical stack inside. Overrides
     the v1.x <=1280 rule that put it on row 2 spanning all cols. */
  .upmos-ftr-v1 .ftr-side {
    grid-column: 5 / 6;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 0;
    border-top: 0;
  }
  /* v2.25 #M17(C) at <=1280 made .ftr-social-section span both cols
     of the side cluster's 2-col grid; that grid is gone here, so unset. */
  .upmos-ftr-v1 .ftr-side .ftr-social-section {
    grid-column: auto;
  }

  /* Feedback widget placement (v2.30 #M26): user wants Your Feedback
     Matters INLINE with the Customer Service text AND pulled LEFT so
     it sits adjacent to (not flushed to the far edge of) the CS text.
     Override .ftr-cs-text from `flex: 1 1 auto` (grow-fills column) to
     `flex: 0 1 auto` (shrink to content). With justify-content: flex-
     start, text takes natural width and widget sits IMMEDIATELY to
     its right with a 4 px gap — visually clustered as one unit on
     the left of col-5, rest of column is quiet whitespace.
     Widget 104 px wide; image aspect (~2:1) keeps height ~50 px,
     well within the CS text block's ~68 px height, so no extra
     vertical space is introduced. v2.30: gap tightened 10 -> 4 px
     so the widget sits closer to (not just adjacent to) the CS text. */
  .upmos-ftr-v1 .ftr-cs-section {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    /* v2.46 (2026-05-13): gap 4 -> 18 px per user — YFM widget was
       reading "glued" to the Customer Service column. 18 px gives
       comfortable breathing room while keeping both on a single row
       within the narrow col-5 side-cluster. */
    gap: 18px;
  }
  .upmos-ftr-v1 .ftr-cs-text {
    flex: 0 1 auto;
    min-width: 0;
  }
  .upmos-ftr-v1 .ftr-feedback-widget {
    align-self: center;
    flex-shrink: 0;
    max-width: 110px;
    margin-top: 0;
  }
  .upmos-ftr-v1 .ftr-feedback-img { width: 104px; }

  /* Social icons (v2.27 #M23): user wants the cluster compacted MORE
     in landscape — at v2.25 32x32 cells with a centered 21 px glyph
     left ~5.5 px of internal padding on each side (~11 px between
     adjacent glyphs), which still read sparse. Drop cell to 28x28
     so internal padding shrinks to ~3.5 px each side (~7 px between
     adjacent glyphs) — tight cluster, glyphs still legible.
     7 cells * 28 = 196 px fits the narrowest 220 px landscape iPad
     column with breathing room. WCAG 2.5.5 (AAA, 44x44) is relaxed
     here in favor of visual density per user spec; 28x28 still
     exceeds the WCAG 2.5.8 minimum-target (24x24, AA).
     v2.47 (2026-05-15): -1 px per user "decrease the social media
     icons by 1 px" on tablet landscape. 28 -> 27. 7 * 27 = 189 px,
     still inside the 220 px col floor. WCAG 2.5.8 (24x24 AA) still
     met.
     v2.47b (2026-05-15): another -1 px per user repeat ask. 27 -> 26.
     7 * 26 = 182 px. WCAG 2.5.8 (24x24 AA) still met with 2 px to
     spare.
     v2.59 (2026-05-15): -2 px per user "Decrease the size of the
     social media icons by 2 px on the footer tablet landscape".
     26 -> 24. 7 * 24 = 168 px (well inside the 220 px col floor;
     more whitespace in col 5 lets the YFM widget + CS text breathe).
     Lands the cell exactly on the WCAG 2.5.8 AA floor (24x24) — no
     spare, so any further shrink would drop below the AA minimum
     target. The 21 px SVG glyph stays put: 21/24 = ~87.5% fill,
     ~1.5 px internal padding each side, the cluster reads tighter
     without clipping the glyphs.
     v2.60 (2026-05-15): two follow-on adjustments per user "please
     space it out a little bit and lower the twitter pinterest
     linked in by 1 px".
       (1) Cluster spacing: gap 0 -> 4 on .ftr-socials so the seven
           cells sit ~4 px apart instead of edge-to-edge. New total
           cluster width 7 * 24 + 6 * 4 = 192 px (still inside the
           220 px landscape col-5 floor with ~28 px of headroom).
           Reads as a properly-spaced row rather than the prior
           dense strip — easier to differentiate adjacent glyphs
           at the new 24 px cell size.
       (2) Optical balancing on X / Pinterest / LinkedIn: glyph SVG
           21 -> 20 for those three keys only (mirrors the existing
           per-channel sizing pattern at line ~5912 used for
           Facebook +4 and Instagram +2 sitewide). X, Pinterest, and
           LinkedIn glyphs ship with less internal viewBox padding
           than Facebook / Instagram / YouTube / TikTok, so on the
           shrunken 24 px cell they read slightly larger than the
           other channels; a -1 px trim lands them visually flush.
           Cell stays at 24 px for all 7 — only the SVG glyph size
           changes, keeping cluster row-height uniform. */
  .upmos-ftr-v1 .ftr-socials {
    justify-content: flex-start;
    gap: 4px;
    padding: 0;
    margin: 0;
  }
  .upmos-ftr-v1 .ftr-social {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
  }
  .upmos-ftr-v1 .ftr-social[data-upmos-social="x"] svg,
  .upmos-ftr-v1 .ftr-social[data-upmos-social="pinterest"] svg,
  .upmos-ftr-v1 .ftr-social[data-upmos-social="linkedin"] svg {
    width: 20px;
    height: 20px;
  }

  /* Newsletter heading (v2.25 #M24): 16 -> 13 px. Tightens the GET
     THE LATEST DEALS / All Access block enough that the 3 trust seals
     (Norton + TrustedSite + BBB) can sit on the same row as the email
     input + Subscribe button rather than wrapping to a new row.
     Sub-copy and consent line follow the same shrink for vertical
     rhythm. */
  .upmos-ftr-v1 .ftr-newsletter-stretch-h { font-size: 13px; }
  .upmos-ftr-v1 .ftr-newsletter-stretch-text .ftr-newsletter-sub { font-size: 11px; }
  .upmos-ftr-v1 .ftr-newsletter-consent { font-size: 11px; }

  /* v2.44 (2026-05-13): tablet-landscape newsletter row re-anchored per
     user. New visual order LEFT -> RIGHT:
       [ALL ACCESS (larger)] [GET THE LATEST DEALS heading+consent]
       [email form (narrower)] ... [trust seals far-right via
       margin-left:auto, unchanged from v2.25 #M25].
     v2.30 #M27 had pushed the form to the LEFT and ALL ACCESS to the
     RIGHT via flex `order` overrides; this reverts to source DOM
     order (AllAccess > text > form > seals) for the first three items
     and keeps the trust seals at order:4. Form no longer grows — it
     reads as a clustered email widget rather than a stretched bar:
     flex:0 1 auto + max-width 280 caps the input so it sits compact
     next to the text block. ALL ACCESS bumped 32 -> 44 px (back to
     the v2.32 size) so the brand mark anchors the row's left corner
     with proper visual weight. */
  .upmos-ftr-v1 .ftr-allaccess              { order: 1; }
  .upmos-ftr-v1 .ftr-allaccess img {
    height: 44px;
    max-width: 152px;
  }
  .upmos-ftr-v1 .ftr-newsletter-stretch-text { order: 2; }
  .upmos-ftr-v1 .ftr-newsletter-form-stretch {
    /* v2.45 (2026-05-13): email input widened on tablet landscape per
       user — v2.44's 280px cap felt cramped. 360px gives the input
       enough room for typical address strings without forcing the
       trust seals to wrap. */
    order: 3;
    margin-right: 0;
    flex: 0 1 auto;
    max-width: 360px;
    min-width: 260px;
  }
  .upmos-ftr-v1 .ftr-newsletter-form-stretch .ftr-newsletter-input {
    padding: 0 10px;
  }
  .upmos-ftr-v1 .ftr-trust-seals             { order: 4; }
  .upmos-ftr-v1 .ftr-newsletter-stretch-inner { gap: 10px 16px; }

  /* Trust seals same-row placement (v2.25 #M25): override the <=1280
     rule above that sets flex-basis: 100% (full row). On tablet
     landscape the form row has room for All Access + text + form +
     seals on one horizontal line — flex-basis: auto + margin-left:
     auto puts them at the right edge of that row. */
  .upmos-ftr-v1 .ftr-trust-seals {
    flex-basis: auto;
    margin-left: auto;
    margin-top: 0;
    justify-content: flex-end;
  }
  .upmos-ftr-v1 .ftr-trust-seals img { height: 32px; max-width: 200px; }

  /* Trust badges: 5 cards on one row, equal-width packing. .ftr-
     trust-item's base flex-shrink:0 is the reason wrap happened —
     override to flex:1 so cards distribute the available width. */
  .upmos-ftr-v1 .ftr-trust-inner {
    flex-wrap: nowrap;
    gap: 6px 12px;
  }
  .upmos-ftr-v1 .ftr-trust-item {
    flex: 1 1 0;
    min-width: 0;
  }
  /* When cards shrink, text inside .ftr-trust-text needs to stay
     readable. Allow heading wrap, keep sub on its own line. */
  .upmos-ftr-v1 .ftr-trust-text { min-width: 0; }
  .upmos-ftr-v1 .ftr-trust-h,
  .upmos-ftr-v1 .ftr-trust-sub {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* v2.45 (2026-05-14): Copyright bar collapsed to match the header's
     Special Offer bar height per user "the 2026 Upmos Inc Copyright
     container to match the top of the container where it shows Special
     Offer: Free Shipping". Base .ftr-copy-inner uses padding 10/22 +
     default line-height — that's ~30 px tall. The header announcement
     bar uses padding 0 + line-height 1 + min-height 16 — about half
     the vertical footprint. We mirror that here: padding 0/22,
     line-height 1, min-height 16. Background + typography (#141511,
     11.5px/400/-0.02em) already match across the two bars. */
  .upmos-ftr-v1 .ftr-copy-inner {
    padding: 0 22px;
    min-height: 16px;
    line-height: 1;
  }

  /* v2.47 (2026-05-15): policies bar height -1 px per user "decrease
     the policies height container by 1 px" at tablet landscape. Base
     .ftr-legal-inner padding is 10/22; 9.5/22 trims exactly 1 px off
     the rendered height (0.5 px top + 0.5 px bottom, browser sub-
     pixel rounded). Horizontal padding + gap unchanged so the 6-link
     row still sits comfortably between the side rails. */
  .upmos-ftr-v1 .ftr-legal-inner { padding: 4.5px 22px; } /* v2.70: 9.5 -> 4.5 px */

  /* v2.47 (2026-05-15): "EXPLORE OUR STORY" forced onto a single line
     at tablet landscape per user. Default .ftr-col-title is 14 px
     uppercase 800-weight + letter-spacing 0.06em (~161 px wide) which
     wraps inside the ~150-160 px nav-col width at the 1024-1280
     landscape band. Drop font-size 14 -> 12.5 and letter-spacing
     0.06 -> 0.04em so EXPLORE OUR STORY fits comfortably in one line
     across the band, with white-space:nowrap as belt-and-suspenders
     against the col floor. The other three column titles (HELP CENTER,
     SERVE WITH US, MEMBERSHIPS) are shorter and fit either way. */
  .upmos-ftr-v1 .ftr-col-title {
    font-size: 12.5px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  /* v2.25 (2026-05-12): top padding 6 -> 24 px (audit fix #A). Same
     reason as the <=1280px override above — the trust strip now lives
     INSIDE .ftr-main and needs proper header inset. */
  .upmos-ftr-v1 .ftr-main { padding: 24px 20px 18px; }
  /* v2.32 (2026-05-12): tablet portrait nav cols 2x2 -> 1x4 per user.
     At iPad portrait widths (768-810 px viewport, ~720-770 px content),
     4 nav cols × ~155 px + 3 × 14 px gaps fit comfortably with the
     long-link wrap behavior intact ("Future Investor Relations" etc.
     wrap to 2 lines as expected). Column gap tightened 20 -> 14 px
     so the 4-col grid breathes without overflowing the content box. */
  .upmos-ftr-v1 .ftr-main-inner { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px 14px; }
  /* v2.25 (2026-05-12): logo stays LEFT-aligned on mobile per user
     preference (centering was tried briefly and reverted). The edge-
     spacing concern is now handled at the .ftr-main padding level (24
     px at <=760px, 22 px at <=480px), so the left-flushed logo no
     longer reads "edge-crowded". Bottom margin gives breathing room
     before the trust-badge column below. */
  .upmos-ftr-v1 .ftr-main-logo { margin: 0 0 18px; justify-content: flex-start; }
  /* v2.39: orange wordmark smaller at portrait (38px desktop → 28px) */
  .upmos-ftr-v1 .ftr-main-logo img { height: 28px; max-width: 107px; }
  .upmos-ftr-v1 .ftr-side { grid-column: 1 / -1; grid-row: auto; }

  /* v2.32 #M31 (2026-05-12): tablet portrait side-cluster reshuffle
     per user — social icons row moves from spanning both cols to col
     2 row 2 (UNDER Sell on Upmos CTA). The CS section + feedback
     widget stay top-left; Sell on Upmos CTA stays top-right with
     social icons stacked beneath it. Newsletter cluster (outside
     .ftr-side, below) anchors bottom-left via #M28. Override the
     <=1280 rule above that sets .ftr-social-section grid-column:
     1 / -1 (full-width row). Also lift the v2.14 margin-top:22 px on
     .ftr-social-section so it visually attaches to the CTA card. */
  .upmos-ftr-v1 .ftr-side .ftr-cs-section     { grid-column: 1; grid-row: 1; }
  .upmos-ftr-v1 .ftr-side .ftr-vendor-cta     { grid-column: 2; grid-row: 1; }
  .upmos-ftr-v1 .ftr-side .ftr-social-section {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }

  /* v2.31 #M28 (2026-05-12): tablet PORTRAIT (and mobile) newsletter
     polish per user — the All Access cluster + GET THE LATEST DEALS
     heading + email form should anchor to the BOTTOM-LEFT corner of
     the footer band (not centered). UI/UX best practice for stacked
     mobile forms: left-edge alignment matches the rest of the
     side-cluster content above (Customer Service heading, Sell on
     Upmos card, social icons row), giving a single consistent left
     reading rail.
     1) margin-top 24 px on .ftr-newsletter-stretch separates the All
        Access cluster from the social icons cluster above.
     2) justify-content: flex-start on the inner row anchors the
        All Access logo + heading + form to the row's LEFT edge.
     3) text-align: left inside the text block so heading + sub +
        consent line read left-aligned (matches form input below). */
  .upmos-ftr-v1 .ftr-newsletter-stretch { margin-top: 24px; }
  /* v2.39 (2026-05-13): portrait newsletter row — ALL ACCESS left of heading,
     email form pushed to the right via margin-left:auto. align-items:center
     keeps the logo and text block on a shared midline. Trust seals bottom-left
     under Customer Service (col1 row2, justify-self:start, 44px tall).
     Subtitle hidden at portrait; consent checkbox left-aligned.
     Orange wordmark shrunk 38→28px. */
  .upmos-ftr-v1 .ftr-newsletter-stretch-inner {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
  .upmos-ftr-v1 .ftr-newsletter-stretch-text { text-align: left; flex: 1 1 auto; min-width: 0; }
  /* v2.49 (2026-05-15): +2 px per user "increase All Access brand at
     the bottom on portrait by 2 px". 32 -> 34 px; max-width raised
     proportionally 110 -> 117 px so the SVG's ~3.4:1 aspect ratio
     keeps native scaling without clipping. */
  /* v2.54 (2026-05-15): +2 px per user — All Access matches the
     phone-viewport bump so the brand mark reads at consistent
     scale across both mobile breakpoints. 34 -> 36; max-width
     117 -> 124 (proportional to 3.4:1 native aspect).
     v2.55 (2026-05-15): another +2 px per user. 36 -> 38; max-width
     124 -> 131.
     v2.58 (2026-05-15): another +2 px per user. 38 -> 40; max-width
     131 -> 138 (3.4:1 native aspect preserved). */
  .upmos-ftr-v1 .ftr-allaccess img { height: 40px; max-width: 138px; }
  .upmos-ftr-v1 .ftr-newsletter-form-stretch { margin-left: auto; flex: 0 1 auto; max-width: none; min-width: 150px; }
  /* v2.39: trust seals—nl hidden; cs copy pinned bottom-left (col1 row2), larger image */
  .upmos-ftr-v1 .ftr-trust-seals--nl { display: none; }
  .upmos-ftr-v1 .ftr-trust-seals--cs {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: end;
    justify-content: flex-start;
    /* v2.42 (2026-05-13): reset margin-left:auto inherited from base
       .ftr-trust-seals (which pins seals to the RIGHT edge of the
       desktop newsletter row). As a grid item, margin-left:auto
       overrides justify-self:start and pushes the badges to the
       right of col 1; reset to 0 so they pin to the FAR LEFT under
       Customer Service per user 2026-05-13. */
    margin-left: 0;
  }
  .upmos-ftr-v1 .ftr-trust-seals--cs img { height: 34px; max-width: 224px; }
  /* v2.38: hide subtitle at portrait so the email input fits on the heading row;
     consent checkbox restored (left-aligned) */
  .upmos-ftr-v1 .ftr-newsletter-sub { display: none; }
  .upmos-ftr-v1 .ftr-newsletter-stretch-text .ftr-newsletter-consent { justify-content: flex-start; }

  /* v2.29 #M29 (2026-05-12): social cluster compacted at tablet
     portrait per user. Cell 44x44 (base min-target) -> 28x28 with
     gap 0 so 7 icons read as a tight cluster instead of a sparse row
     spanning the full side-cluster width. Stays left-aligned to match
     the rest of the side-cluster content above. */
  .upmos-ftr-v1 .ftr-socials {
    gap: 0;
    padding: 0;
    margin: 0;
    justify-content: flex-start;
  }
  .upmos-ftr-v1 .ftr-social {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }

  /* v2.29 #M30 (2026-05-12): trust badges row (Free Shipping / Easy
     Returns / Secure Checkout / Cash Back Rewards / Redeem $2500
     Brands) at tablet portrait — user reported misalignment. Force
     centered horizontal layout with tight gap so all 5 cards either
     fit on one row OR wrap symmetrically (3 + 2 centered). Card icon
     sizes pulled in 36 -> 30 px and text -> 12 px / 10.5 px so the
     5-card composite reads at ~600 px total instead of ~750 px,
     giving 100+ px of slack at the narrowest portrait tablet (768 px
     iPad mini). nth-child(odd) separator-hide rule from the <=1280
     block keeps inherited; explicit separator-hide for first-of-row
     handled by ::before's :first-child + nth-child(odd) chain. */
  .upmos-ftr-v1 .ftr-trust-inner {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
  }
  .upmos-ftr-v1 .ftr-trust-item {
    flex: 0 0 auto;
  }
  .upmos-ftr-v1 .ftr-trust-icon { width: 30px; height: 30px; }
  .upmos-ftr-v1 .ftr-trust-icon svg { width: 17px; height: 17px; }
  .upmos-ftr-v1 .ftr-trust-h { font-size: 12px; }
  .upmos-ftr-v1 .ftr-trust-sub { font-size: 10.5px; }
  /* v2.33 (2026-05-13): legal + copyright bars tightened at portrait tablet per user
     "last section blue height needs to be decreased" and "that is how I want it for
     both containers". Base rule uses 10px vertical padding (same for both rows), but
     at tablet-portrait the 6 legal links wrap to a second row, making the blue bar
     appear double-height vs the compact copyright bar. Dropping to 6px padding +
     11px font (matching copyright text size) fits all 6 links on one row at 768 px+
     and visually aligns both bars. */
  .upmos-ftr-v1 .ftr-legal-inner { padding: 6px 14px; gap: 4px 10px; font-size: 11px; }
  .upmos-ftr-v1 .ftr-copy-inner  { padding: 6px 14px; }

  /* v2.49 (2026-05-15): "GET THE LATEST DEALS" heading -3 px on
     tablet portrait per user. Base .ftr-newsletter-stretch-h is
     16 px; at portrait the row stacks (All Access logo + heading +
     form share a tight vertical rhythm) and a smaller heading reads
     better against the cluster's compressed vertical scale. 16 ->
     13 px matches the portrait .ftr-col-title scale (line ~5239)
     for visual consistency across nav-col and newsletter headings. */
  .upmos-ftr-v1 .ftr-newsletter-stretch-h { font-size: 13px; }

  /* v2.54 (2026-05-15): Customer Service column reflowed at tablet
     portrait per user screenshot. v2.49 had placed YFM to the LEFT
     of CS text inline (flex-direction: row, widget order:1, text
     order:2). User screenshot shows YFM rendering OUTSIDE the
     dark-blue band, visually disconnected from Customer Service.
     New layout: YFM stacks UNDERNEATH the CS contact list within
     the same .ftr-cs-section box, so the whole CS column reads
     top-to-bottom as [heading > contact list > YFM badge]. The
     .ftr-cs-section then occupies col 1 of the .ftr-side 2-col
     grid (per the #M31/v2.32 rule at line 5072), with Sell on
     Upmos still pinned to col 2 — exactly matching the "side by
     side with Sell on Upmos" target the user asked for.
     Implementation:
       - flex-direction: column so children stack vertically
       - align-items: flex-start so YFM hugs the left edge under
         the CS heading (rather than centering)
       - order: 1 on .ftr-cs-text + order: 2 on .ftr-feedback-widget
         keeps source order intact for SR readers; explicit orders
         protect against any future inherited rule that would flip
         them
       - margin-top: 10 px on the widget separates it from the
         contact list above without overstating the gap */
  .upmos-ftr-v1 .ftr-cs-section {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
  }
  .upmos-ftr-v1 .ftr-cs-text { order: 1; flex: 1 1 auto; min-width: 0; width: 100%; }
  .upmos-ftr-v1 .ftr-feedback-widget {
    order: 2;
    flex-shrink: 0;
    margin-top: 10px;
  }
}

/* v2.41 (2026-05-13): trust seals pinned BOTTOM-LEFT for ALL tablet-spanning
   viewports, regardless of CSS orientation. v2.40 only fired at
   orientation:portrait, but a desktop browser window resized to roughly
   1700x900 still triggers <=1280 (2-col side cluster collapses to full
   width) WHILE being wider than tall (CSS-landscape) — so the v2.40
   portrait rule didn't apply and badges stayed centered on the newsletter
   row via the --nl copy.
   New query: (max-width: 1023 ANY orientation) OR (1024-1280 PORTRAIT
   only). The portrait constraint at 1024-1280 is the surgical exclusion
   that keeps the @media (1024-1280) and (orientation: landscape) 5-col
   desktop layout intact at iPad-landscape sizes (where .ftr-side becomes
   a narrow col 5 and these grid-placement rules would be no-ops anyway). */
@media (max-width: 1023px),
       (min-width: 1024px) and (max-width: 1280px) and (orientation: portrait) {
  .upmos-ftr-v1 .ftr-side .ftr-cs-section     { grid-column: 1; grid-row: 1; }
  .upmos-ftr-v1 .ftr-side .ftr-vendor-cta     { grid-column: 2; grid-row: 1; }
  .upmos-ftr-v1 .ftr-side .ftr-social-section { grid-column: 2; grid-row: 2; margin-top: 0; }
  .upmos-ftr-v1 .ftr-trust-seals--nl { display: none; }
  .upmos-ftr-v1 .ftr-trust-seals--cs {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: end;
    justify-content: flex-start;
    /* v2.42 (2026-05-13): reset inherited margin-left:auto so badges
       pin to the FAR LEFT of col 1 instead of drifting right. */
    margin-left: 0;
  }
  .upmos-ftr-v1 .ftr-trust-seals--cs img { height: 34px; max-width: 224px; }
}

@media (max-width: 760px) {
  /* v2.25 (2026-05-12): side padding 16 -> 24 px after second-pass user
     feedback (logo + trust badges + nav lists still felt edge-crowded
     at 20 px). 24 px is a comfortable mobile-container default and
     matches common UI-kit specs (iOS / Material both lean 24 px). Top
     padding 6 -> 28 px: the 6 px legacy value was set in v2.3 #X2 when
     the trust strip was ABOVE .ftr-main (no internal top padding
     needed). With v2.25 #M8 returning the logo + trust strip to the
     TOP slot inside .ftr-main, the logo needs proper breathing room
     from the band's top edge. 28 px reads as a comfortable header
     inset on mobile. Bottom stays at 16 px. */
  .upmos-ftr-v1 .ftr-main { padding: 28px 24px 16px; }
  /* v2.32 (2026-05-12): mobile (<=760 px) reverts to 2-col grid — the
     <=900 rule above sets 4-col for iPad portrait, but at phone widths
     4 nav cols don't have enough room for readable link wrapping.
     2-col stays the right call here. */
  .upmos-ftr-v1 .ftr-main-inner { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 18px; }
  .upmos-ftr-v1 .ftr-col-title { font-size: 13px; margin-bottom: 8px; }
  .upmos-ftr-v1 .ftr-col-list a { font-size: 13px; }
  .upmos-ftr-v1 .ftr-app-h { font-size: 17px; }
  .upmos-ftr-v1 .ftr-app-badge img { height: 38px; }
  .upmos-ftr-v1 .ftr-side { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* v2.38: phone — restore newsletter trust-seals, hide CS copy; restore subtitle */
  .upmos-ftr-v1 .ftr-trust-seals--cs { display: none; }
  .upmos-ftr-v1 .ftr-trust-seals--nl { display: inline-flex; }
  .upmos-ftr-v1 .ftr-newsletter-sub { display: block; }
  .upmos-ftr-v1 .ftr-legal-inner { padding: 8px 14px; justify-content: flex-start; gap: 6px 14px; }
  .upmos-ftr-v1 .ftr-legal-link { font-size: 12px; }
  .upmos-ftr-v1 .ftr-copy-inner { padding: 10px 14px; font-size: 11px; flex-direction: column; }
  .upmos-ftr-v1 .ftr-copy-text { text-align: center; }
  /* v2.0/v2.1/v2.3/v2.4/v2.5: phone — top row stacks (logo above trust),
     trust cards stack one-per-row */
  .upmos-ftr-v1 .ftr-main-top-row { gap: 10px 16px; }
  .upmos-ftr-v1 .ftr-trust-inner { flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
  .upmos-ftr-v1 .ftr-trust-item { width: 100%; }
  .upmos-ftr-v1 .ftr-trust-item + .ftr-trust-item::before { display: none; }
  .upmos-ftr-v1 .ftr-trust-item + .ftr-trust-item { padding-top: 8px; border-top: 1px solid var(--ftr-rule); }
  /* v2.47 (2026-05-15): mobile nav-block layout — supersedes v2.46.
     User: "fix the footer switch Serve with us for the social media
     icons" — i.e. swap Serve and the social cluster relative to the
     screenshot the user captured.
     Target phone layout (≤640px, where v2.36 turns .ftr-main into a
     2-col grid):
       row 1: Explore | Serve
       row 2: Help    | Social icons
       row 3: Memberships
     v2.46's `order:`-based reshuffle is dropped here — explicit grid
     placement at the ≤640 breakpoint (added inside the v2.36 block
     below) is more deterministic than fighting source-order +
     auto-placement, and avoids the corner-case where the auto-
     placement algorithm collides with .ftr-social-section's explicit
     grid-column:2/-1.
     For 641-760px (small tablet, .ftr-main-inner is its own 2-col
     grid via v2.32 — social-section sits in .ftr-side, not in the
     nav grid), source order Explore/Help/Serve/Memberships is fine
     as-is, so no order rules at this breakpoint. */

  /* v2.47 (2026-05-15): vertical breathing room on the Sell on Upmos
     CTA card per user "Sell on Upmos should be stretched a bit to
     where it still stays vertical on the mobile viewing". v2.12 #M3
     tightened padding to 10/12 for desktop density; on phone that
     squeezes the SELL ON UPMOS title hard against the top edge and
     bunches the benefits list. Bump padding 10/12 → 18/14 and inner
     gap 4 → 8 so the title clearly seats under top-padding and the
     bullets/button breathe. Card stays vertical (column flex) — only
     the box grows taller. */
  .upmos-ftr-v1 .ftr-vendor-cta { padding: 18px 14px; gap: 8px; }
}
@media (max-width: 480px) {
  /* v2.25 (2026-05-12): side padding 14 -> 22 px on very-narrow phones
     after second-pass feedback. Top 6 -> 24 px so the logo at the top
     of .ftr-main (per v2.25 #M8) has comfortable header inset even on
     small phones. */
  .upmos-ftr-v1 .ftr-main { padding: 24px 22px 14px; }
  .upmos-ftr-v1 .ftr-main-inner { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* v2.7 #V3: feedback responsive override removed (widget is now an inline link). */
  .upmos-ftr-v1 .ftr-app-badges { gap: 8px; }
  .upmos-ftr-v1 .ftr-newsletter-row { height: 40px; }
  /* v2.0/v2.1/v2.3: trust icons reflow gracefully on phone
     (payment-card phone overrides removed in v2.3) */
  .upmos-ftr-v1 .ftr-trust-icon { width: 32px; height: 32px; }
  .upmos-ftr-v1 .ftr-trust-icon svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .upmos-ftr-v1 *, .upmos-ftr-v1 *::before, .upmos-ftr-v1 *::after {
    transition: none !important;
    animation: none !important;
  }
  .upmos-ftr-v1 .ftr-app-badge:hover,
  .upmos-ftr-v1 .ftr-social:hover,
  .upmos-ftr-v1 .ftr-vendor-cta-btn:hover { transform: none; }
}

@media (prefers-contrast: more) {
  .upmos-ftr-v1 {
    --ftr-text-soft:    rgba(255,255,255,1);
    --ftr-text-muted:   rgba(255,255,255,0.92);
    --ftr-rule:         rgba(255,255,255,0.55);
    --ftr-rule-strong:  rgba(255,255,255,0.85);
  }
  .upmos-ftr-v1 .ftr-col-list a { color: #fff; border-bottom: 1px solid var(--ftr-rule); }
  /* v2.3 #X3: in high-contrast mode, lift social-icon opacity to full */
  .upmos-ftr-v1 .ftr-social { opacity: 1; }
  .upmos-ftr-v1 .ftr-legal-link { border-bottom: 1px solid var(--ftr-rule); }
  /* v2.0/v2.3: opaque text + bold borders on trust + vendor-CTA
     (payment-card high-contrast rule removed in v2.3) */
  .upmos-ftr-v1 .ftr-trust-icon { background: rgba(255,255,255,0.12); border-color: var(--ftr-rule); }
  .upmos-ftr-v1 .ftr-vendor-cta { border-color: var(--ftr-rule); background: rgba(255,255,255,0.10); }
}

/* v2.25 (2026-05-12): honor prefers-reduced-transparency (iOS 16+ /
   macOS Ventura+ / Windows "Reduce transparency" setting). Some users
   experience reading difficulty with semi-transparent overlays. Flip
   --ftr-card-bg and --ftr-rule to fully opaque alternatives so the
   vendor CTA card border, feedback bg, and divider lines render solid
   instead of as alpha blends. */
@media (prefers-reduced-transparency: reduce) {
  .upmos-ftr-v1 {
    --ftr-card-bg:        rgba(255,255,255,1);
    --ftr-rule:           rgba(255,255,255,0.6);
    --ftr-rule-strong:    rgba(255,255,255,0.9);
  }
  .upmos-ftr-v1 .ftr-vendor-cta { background: rgba(255,255,255,0.08); }
}

/* v2.25 (2026-05-12): print stylesheet rewritten. v1.x hid the entire
   footer on print. Better practice: keep legal links + copyright on
   paper (Terms / Privacy / Cookie Settings provide reader provenance
   and contact-to-correction information that should survive printing),
   hide marketing chrome (newsletter, social, trust strip, vendor CTA,
   app badges, feedback widget — none of that prints meaningfully).
   Black-on-white forced for ink savings. */
@media print {
  .upmos-ftr-v1 .ftr-main { display: none !important; }
  .upmos-ftr-v1 .ftr-legal,
  .upmos-ftr-v1 .ftr-copy {
    background: transparent !important;
    color: #000 !important;
    border-top: 1px solid #000 !important;
  }
  .upmos-ftr-v1 .ftr-legal-link,
  .upmos-ftr-v1 .ftr-legal-btn,
  .upmos-ftr-v1 .ftr-copy-text,
  .upmos-ftr-v1 .ftr-copy-text * {
    color: #000 !important;
    border-bottom-color: #000 !important;
  }
  .upmos-ftr-v1 .ftr-legal-capriv { filter: grayscale(100%) !important; }
}

/* v1.9 #C7: dark mode COMPLETED. v1.8 only overrode 3 vars; the rest
   stayed light-themed. Now every footer-scoped color responds to the
   user's OS-level dark preference. Brand orange stays bright; backgrounds
   deepen; rules brighten for separation; feedback card uses a lifted
   dark-blue-grey rather than the lighter day variant. */
@media (prefers-color-scheme: dark) {
  .upmos-ftr-v1 {
    --ftr-bg-main:        #002b4a;
    --ftr-bg-trust:       #002238;  /* v2.0 dark variant */
    --ftr-bg-legal:       #2c4a78;
    /* v2.2 #R1: --ftr-bg-pay removed (Row P deleted). */
    --ftr-bg-copy:        #0a0a09;
    --ftr-card-bg:        rgba(255,255,255,0.04);
    --ftr-text:           #f6f6f5;
    --ftr-text-soft:      rgba(246,246,245,0.86);
    --ftr-text-muted:     rgba(246,246,245,0.62);
    --ftr-rule:           rgba(255,255,255,0.32);
    --ftr-rule-strong:    rgba(255,255,255,0.55);
    --ftr-disabled-bg:    #4a4f5a;
    --ftr-feedback-bg:    #2c4360;
    --ftr-feedback-rule:  rgba(255,255,255,0.42);
  }
  /* Newsletter input on dark: slight off-white so the white card doesn't
     glare against the deeper main bg. */
  .upmos-ftr-v1 .ftr-newsletter-input {
    background: #f1f1ee;
    color: #141511;
  }
  /* v2.23 (2026-05-07): .ftr-copy-locale-list dark-mode rule removed (Polylang strip). */
  /* v2.3: payment-card dark-mode rule removed (cards deleted entirely). */
}

/* ============================================================
   v2.20 (2026-05-05) — A+ MOBILE REORGANIZATION
   ============================================================
   - 4 nav-col link lists become native <details> accordions on mobile
   - Desktop layout unchanged (CSS forces always-open + non-interactive
     summary so visual is identical to the v2.18 4-col grid)
   - Mobile flex-reorders .ftr-main: newsletter -> link cols -> trust strip
   - Legal links stack cleanly on phones (was ragged with Complianz toggle)
   - Print stylesheet expands all accordion sections
   ============================================================ */

/* All viewports: hide native disclosure marker, normalize summary display */
.upmos-ftr-v1 .ftr-col-details { padding: 0; margin: 0; }
.upmos-ftr-v1 .ftr-col-details > summary {
  list-style: none;
  display: block;
}
/* v2.23 (2026-05-07) #11: consolidated cross-browser marker reset.
   ::-webkit-details-marker = old WebKit / Safari; ::marker = modern
   spec (Chrome 89+, Firefox 86+, Safari 17.5+). Keep both selectors so
   no UA paints the default disclosure triangle. */
.upmos-ftr-v1 .ftr-col-details > summary::-webkit-details-marker,
.upmos-ftr-v1 .ftr-col-details > summary::marker {
  display: none;
  content: '';
}

/* Desktop (>=761px): always-expanded, summary non-interactive — identical
   to the v2.18 h2 + ul grid item visually.
   v2.23 (2026-05-07) #3: pointer-events:none on the summary kills the
   click-toggle that could otherwise collapse the list. v2.21 forced [open]
   on the markup so this rule is purely belt-and-suspenders, but without
   it a stray click + a future browser change could leave the list collapsed
   despite the [open] attribute. */
@media (min-width: 761px) {
  .upmos-ftr-v1 .ftr-col-details > .ftr-col-list { display: block !important; }
  .upmos-ftr-v1 .ftr-col-details > summary {
    pointer-events: none;
    cursor: default;
  }
}

/* v2.25 (2026-05-12) — Native-iOS-app-style landscape behavior.
   ============================================================
   On landscape orientation (iPad in landscape, larger tablets), force
   the 4 footer nav columns to render as fully-expanded inline lists
   with NO collapse toggle and NO + glyph indicator — matches the
   Amazon iOS app pattern of swapping accordion-on-portrait for fully-
   visible menus the moment the device rotates to landscape.
   This is largely a belt-and-suspenders addition: at iPad landscape
   the viewport is always >=1024 px CSS and thus already hits the
   `@media (min-width: 761px)` rule above. The explicit orientation
   match documents the intent and protects against:
     1. Device / browser combos that misreport CSS width
     2. Future iOS Safari behaviour changes
     3. Browser zoom states that drop reported width below 760 in
        landscape (the @media (orientation) check sticks regardless)
   Trade-off acknowledged: portrait iPad mini-class devices (744 px
   CSS in portrait, 1133 px CSS in landscape) will visibly hop from
   accordion to inline during rotation. That's the same hop Amazon
   shows. The visual continuity loss is the explicit cost of getting
   native-app feel in landscape.
   margin-bottom on summary preserves visual rhythm between the column
   heading and its first link — the inert summary still needs to read
   as a heading, not as a wedged-flush-against-list label. */
@media (orientation: landscape) and (min-width: 600px) {
  .upmos-ftr-v1 .ftr-col-details > .ftr-col-list { display: block !important; }
  .upmos-ftr-v1 .ftr-col-details > summary {
    pointer-events: none !important;
    cursor: default !important;
    padding: 0 !important;
    min-height: 0 !important;
    border-top: 0 !important;
    margin-bottom: 10px !important;
    display: block !important;
  }
  .upmos-ftr-v1 .ftr-col-details > summary::after {
    display: none !important;
    content: '' !important;
  }
}

/* Mobile (<=760px): collapsible accordion. Closed by default; tap summary
   to expand. + becomes – when [open]. 44px tap target + 1px divider. */
@media (max-width: 760px) {
  .upmos-ftr-v1 .ftr-col-details:not([open]) > .ftr-col-list { display: none; }
  .upmos-ftr-v1 .ftr-col-details > summary {
    cursor: pointer;
    position: relative;
    padding: 14px 36px 14px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.12);
    margin: 0 !important;
  }
  .upmos-ftr-v1 .ftr-col-details > summary::after {
    content: '+';
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    font-size: 22px; font-weight: 300; line-height: 1;
    transition: transform 180ms ease;
  }
  .upmos-ftr-v1 .ftr-col-details[open] > summary::after { content: '–'; }
  .upmos-ftr-v1 .ftr-col-details[open] > .ftr-col-list { padding: 4px 0 14px; }
  /* Override the v2.1 #C2 `margin: 0 0 10px` on .ftr-col-title — no extra
     margin needed when summary is the row anchor. */
  .upmos-ftr-v1 .ftr-col-title { margin: 0 !important; }

  /* Reorder .ftr-main direct children: newsletter first, link cols second,
     logo+trust strip third. Vendor / social / apps stay inside the side
     cluster of .ftr-main-inner; this rule reorders the BLOCK siblings. */
  .upmos-ftr-v1 .ftr-main {
    display: flex;
    flex-direction: column;
  }
  .upmos-ftr-v1 .ftr-newsletter-stretch { order: 1; }
  .upmos-ftr-v1 .ftr-main-inner       { order: 2; }
  .upmos-ftr-v1 .ftr-main-top-row     { order: 3; }
}

/* ============================================================
   v2.25 (2026-05-12) — Mobile reorganization + tight social cluster
   ============================================================
   Customer Service block and the social-icon row are lifted out of the
   .ftr-side cluster on mobile and re-ordered to sit AFTER the logo +
   trust-badges strip — making them the bridge between the policies
   row and the legal links. Achieved by setting .ftr-main-inner and
   .ftr-side to display:contents so their direct children participate
   in .ftr-main's flex container, and assigning each section its own
   `order:` value. Desktop layout is unaffected (this block only fires
   inside @media (max-width: 760px)). */
@media (max-width: 760px) {
  .upmos-ftr-v1 .ftr-main-inner,
  .upmos-ftr-v1 .ftr-side { display: contents; }

  /* Re-establish vertical rhythm now that .ftr-main-inner's own gap
     (the 20-22 px from the v2.20 mobile rules) is gone. */
  .upmos-ftr-v1 .ftr-main { gap: 18px; }

  /* Mobile order:
       1. Logo + trust badges (Free Shipping / Easy Returns / Secure
          Checkout / Cash Back / Redeem) — moved to the TOP of the
          mobile footer per user feedback (was at the bottom in v2.20).
       2. Newsletter
       3. 4 nav columns (Explore / Help / Customer Serve / Memberships)
       4. Sell on Upmos CTA
       5. Apps badges block (if rendered — bare .ftr-side-section)
       6. Customer Service (lifted from side cluster, sits below apps)
       7. Social icons (lifted from side cluster, sits tight under CS) */
  .upmos-ftr-v1 .ftr-main-top-row           { order: 1; }
  .upmos-ftr-v1 .ftr-newsletter-stretch     { order: 2; }
  .upmos-ftr-v1 .ftr-col                    { order: 3; }
  .upmos-ftr-v1 .ftr-vendor-cta             { order: 4; }
  .upmos-ftr-v1 .ftr-side-section:not(.ftr-cs-section):not(.ftr-social-section):not(.ftr-vendor-cta) { order: 5; }
  .upmos-ftr-v1 .ftr-cs-section             { order: 6; }
  .upmos-ftr-v1 .ftr-social-section         { order: 7; }

  /* The v2.14 #K1 / v2.16 #I2 margin-top: 22px on .ftr-social-section
     was for breathing room above the social row INSIDE the side cluster
     (under the Sell on Upmos APPLY NOW button). With the row pulled out
     to its own bottom slot, we WANT the social row to sit tight under
     the Customer Service block so the two read as one cohesive bottom
     unit — not two separated sections. Negative margin shrinks the
     effective gap from 18 px (the .ftr-main flex gap) down to ~6 px,
     visually clustering CS + Social. */
  .upmos-ftr-v1 .ftr-social-section { margin-top: -12px; }

  /* v2.25 (2026-05-12): align the newsletter section's contents
     (All Access logo / GET THE LATEST DEALS heading / email input /
     Norton-TrustedSite-BBB trust seals) with the rest of the .ftr-main
     children (Customer Service heading, Social icons, nav cols).
     The desktop base rule sets padding: 12px 24px 0 on .ftr-newsletter-
     stretch, which stacks its own 24 px side padding ON TOP of .ftr-
     main's 24 px — newsletter content sat 48 px from the screen edge
     while CS/Social sat at 24 px. Zero side padding on mobile so the
     two share the same left/right insets. Top padding kept at 12 px
     for the border-top divider's breathing room. */
  .upmos-ftr-v1 .ftr-newsletter-stretch { padding-left: 0; padding-right: 0; }

  /* Tight, LEFT-aligned social cluster on phones. Was (v2.24): 44 px
     AAA tap cells edge-to-edge spanning the full row, which read sparse.
     New: 32 x 32 cells, ZERO gap, flush-LEFT (justify-content:flex-start)
     so the row lines up with the "CUSTOMER SERVICE" heading's left edge
     directly above it — reads as one block. 32 px sits above the WCAG
     2.5.8 AA tap-target minimum (24 x 24), so the row stays thumb-
     friendly. 7 icons * 32 = 224 px total, hugging the left side.
     margin-left: -5px compensates for the 21 px glyph being centered
     inside its 32 px cell — without this offset, the FIRST icon's
     visible glyph would sit ~5 px right of the heading's left edge,
     making the row look misaligned. Negative-margin shift pulls the
     entire cluster left so Instagram's glyph aligns flush with the
     CUSTOMER SERVICE heading. */
  /* v2.58 (2026-05-15): social cluster pinned to the BOTTOM-RIGHT at
     ≤760 viewports per user screenshot — was still left-aligned + 2-row
     wrapping at this breakpoint because the v2.55 right-alignment was
     only added to the ≤640 block. Mirror rules here so the same single-
     row right-aligned cluster renders across the entire mobile range
     (641-760 tablet portrait AND ≤640 phone). align-self: flex-end
     pushes the section to the right edge of .ftr-main's flex column;
     width:auto + flex:0 0 auto sizes the cluster to its content (7 ×
     28 = 196 px) so it doesn't span full width; margin/padding reset
     so the rightmost icon sits flush against the footer's right inset. */
  .upmos-ftr-v1 .ftr-social-section {
    align-self: flex-end !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .upmos-ftr-v1 .ftr-socials {
    justify-content: flex-end !important;
    padding: 0;
    margin: 0 !important;
    gap: 0;
  }
  /* v2.54 (2026-05-15): -2 px per user "decrease the icons size to
     2 px" so the 7 social glyphs (IG / FB / X / Pinterest / LinkedIn /
     YouTube / TikTok) fit on a single row. 32 -> 30: 7 × 30 = 210 px
     vs 7 × 32 = 224 px previous. 30 x 30 still clears WCAG 2.5.8 AA
     (24 x 24 minimum).
     v2.55 (2026-05-15): another -1 px per user. 30 -> 29; 7 × 29 =
     203 px. WCAG 2.5.8 AA (24 x 24) still met with 5 px to spare.
     v2.58 (2026-05-15): another -1 px per user. 29 -> 28; 7 × 28 =
     196 px. WCAG 2.5.8 AA (24 x 24) still met with 4 px to spare. */
  .upmos-ftr-v1 .ftr-social {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
}

/* v2.48 (2026-05-15) — Mobile (≤640 px) Gold Standard rebuild.
   User: "audit this and do an A+ Gold Standard UI/UX best practices
   reorder in this section" + "increase the All Access brand by 3 px,
   this is all on mobile".

   PROBLEM with v2.36 + v2.47 (now both superseded by this block):
   v2.36 promoted .ftr-main to a CSS Grid (2 cols) with display:
   contents on .ftr-main-inner + .ftr-side flattening the four .ftr-
   cols, .ftr-cs-section, .ftr-vendor-cta, .ftr-social-section, and
   .ftr-newsletter-stretch into the same grid. v2.47 then placed
   .ftr-cols at explicit grid-row 1/2/3. CSS Grid auto-placement of
   full-width sections (grid-column: 1/-1) interacted badly with
   those explicit row claims — items collided in the same cells and
   rendered VISUALLY STACKED ON TOP OF EACH OTHER (user screenshot
   showed EXPLORE OUR STORY overprinting CUSTOMER SERVICE, and
   SERVE WITH US overprinting SELL ON UPMOS).

   FIX: at the phone breakpoint, abandon CSS Grid for the footer
   sections entirely and use flex column with explicit `order:`
   values. Deterministic single-column stack, zero placement
   collisions. This is the industry-standard mobile footer pattern
   (Amazon, Apple, Nike, Target all use single-column flex stacks
   on phones).

   GOLD STANDARD MOBILE SEQUENCE (top to bottom):
     1. Logo + trust-badges strip   (.ftr-main-top-row)
     2. Newsletter                  (.ftr-newsletter-stretch)
     3. Sell on Upmos vendor CTA    (.ftr-vendor-cta)
     4. Customer Service            (.ftr-cs-section)
     5. Explore Our Story (col-1)   (.ftr-main-inner .ftr-col:nth(1))
     6. Help Center      (col-2)   (.ftr-main-inner .ftr-col:nth(2))
     7. Serve With Us    (col-3)   (.ftr-main-inner .ftr-col:nth(3))
     8. Memberships      (col-4)   (.ftr-main-inner .ftr-col:nth(4))
     9. Social icons row            (.ftr-social-section)
    10. Apps badges (if rendered)   (other .ftr-side-section)
   .ftr-legal + .ftr-copy sit BELOW .ftr-main as siblings — unchanged.

   Why this order is "best practice":
   - Top: brand mark + trust signals (instant credibility)
   - Newsletter capture early (the highest-converting CTA on most
     ecommerce footers — see Baymard Institute footer studies)
   - Vendor CTA next (UPMOS's primary monetization surface for
     marketplace recruitment)
   - Customer Service before nav (users seeking support first scan
     for phone/chat/email — burying it under nav adds friction)
   - Nav accordions stacked (collapsed +) so users scan headings
     fast; tap to expand only what they need (saves screen real
     estate vs. expanded lists)
   - Social last (lowest priority on a transactional retail footer
     per Baymard; engagement, not conversion)
   - Apps badges after social (if/when iOS/Android stores live) */
@media (max-width: 640px) {
  /* Undo v2.36's display:grid — back to flex column. !important on
     display so the cascade definitely lands here over the v2.36
     rule still in the file's @media tree (we're replacing v2.36's
     behavior at this breakpoint, not just augmenting it). */
  .upmos-ftr-v1 .ftr-main {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
    row-gap: 18px !important;
  }

  /* Reset every grid placement that v2.36 / v2.47 set so .ftr-cols
     and .ftr-social-section render as full-width flex children
     instead of trying to be grid items. */
  .upmos-ftr-v1 .ftr-main-inner .ftr-col,
  .upmos-ftr-v1 .ftr-main-inner .ftr-col:nth-of-type(1),
  .upmos-ftr-v1 .ftr-main-inner .ftr-col:nth-of-type(2),
  .upmos-ftr-v1 .ftr-main-inner .ftr-col:nth-of-type(3),
  .upmos-ftr-v1 .ftr-main-inner .ftr-col:nth-of-type(4) {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100%;
  }
  .upmos-ftr-v1 .ftr-social-section {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    margin-top: 0 !important;
  }

  /* Order tiers — Gold Standard mobile sequence. !important so the
     cascade definitively overrides v2.25's order rules (3 / 4 / 5 / 6)
     for the same selectors at the broader <=760 breakpoint. */
  .upmos-ftr-v1 .ftr-main-top-row                                                                       { order: 1 !important; }
  .upmos-ftr-v1 .ftr-newsletter-stretch                                                                 { order: 2 !important; }
  .upmos-ftr-v1 .ftr-vendor-cta                                                                         { order: 3 !important; }
  .upmos-ftr-v1 .ftr-cs-section                                                                         { order: 4 !important; }
  .upmos-ftr-v1 .ftr-main-inner .ftr-col:nth-of-type(1)                                                 { order: 5 !important; }
  .upmos-ftr-v1 .ftr-main-inner .ftr-col:nth-of-type(2)                                                 { order: 6 !important; }
  .upmos-ftr-v1 .ftr-main-inner .ftr-col:nth-of-type(3)                                                 { order: 7 !important; }
  .upmos-ftr-v1 .ftr-main-inner .ftr-col:nth-of-type(4)                                                 { order: 8 !important; }
  .upmos-ftr-v1 .ftr-social-section                                                                     { order: 9 !important; }
  .upmos-ftr-v1 .ftr-side-section:not(.ftr-cs-section):not(.ftr-social-section):not(.ftr-vendor-cta)    { order: 10 !important; }

  /* v2.55 (2026-05-15): social cluster moved to the RIGHT side per
     user screenshot — should sit under MEMBERSHIPS column on a single
     row instead of left-aligned under EXPLORE OUR STORY where it was
     wrapping 5+2. In the v2.48 ≤640 flex-column layout, .ftr-social-
     section is a flex child with order: 9 (after the 4 nav cols).
     align-self: flex-end positions it at the END of the flex cross-
     axis (right edge of the column). width: auto + flex: 0 0 auto
     overrides any inherited stretch behavior so the cluster sizes to
     its content (7 × 29 = 203 px) rather than spanning full width.
     The -5 px negative margin from the old left-flush layout is
     dropped — when right-aligned, the glyph's centered position in
     its cell looks correct flush against the right margin.
     padding-right matches the .ftr-main inset so the rightmost icon
     sits visually under MEMBERSHIPS column's right edge. */
  /* v2.59f (2026-05-15): right-align rebuild. User reported the v2.55
     align-self: flex-end approach was rendering LEFT-aligned on the
     live mobile site. Root cause: depending on whether .ftr-side
     / .ftr-main-inner's `display: contents` propagates through every
     browser pass, .ftr-social-section may render as a regular block
     (full-width) instead of a content-sized flex item — in which
     case align-self has no visible effect. New approach: let the
     section be full-width block (works either way), then push the
     inner .ftr-socials cluster right via `width: fit-content` +
     `margin-left: auto`. This works for ALL parent display modes
     (flex item, grid item, plain block). */
  .upmos-ftr-v1 .ftr-social-section {
    align-self: stretch !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    /* v2.59g (2026-05-15): pull cluster closer to the bottom-right
       corner per user "I need the social icons moved under
       memberships but closer to the bottom right corner". .ftr-main
       has padding: 24px 22px 14px at ≤640 (line 5436), so the right
       inner edge sits 22 px from the screen edge. Negative
       margin-right: -14px tugs the section 14 px past that inset
       (leaving an 8 px safety buffer from the actual screen edge so
       glyph anti-aliasing doesn't clip on devices with rounded
       corners). Negative margin-top: -6px tightens the gap to
       Memberships from 18 px (.ftr-main row-gap) to 12 px so the
       cluster reads "grouped under" Memberships rather than as its
       own row. */
    margin: -6px -14px 0 0 !important;
  }
  .upmos-ftr-v1 .ftr-socials {
    display: flex !important;
    justify-content: flex-end !important;
    /* v2.59d (2026-05-15): 0 -> 4 px gap per user "space out the
       social icons a little bit" (mobile). 7 icons × 21 px + 6 gaps
       × 4 px = 171 px total — still fits any phone viewport. */
    gap: 4px;
    /* v2.59e (2026-05-15): single-row guarantee per user "put it all
       in one row". Base .ftr-socials rule (line ~4122) sets
       flex-wrap: wrap, which causes the visible 6+1 wrap. */
    flex-wrap: nowrap !important;
    /* v2.59f (2026-05-15): right-shift the entire ul. width:
       fit-content makes the ul size to its 7-icon content (~171 px);
       margin-left: auto then absorbs all remaining horizontal space,
       pushing the cluster flush to the right edge of the parent.
       This is the rock-solid way to right-align a block-level child
       regardless of whether the parent is flex / grid / plain
       block. */
    width: fit-content !important;
    margin: 0 0 0 auto !important;
    padding: 0;
  }
  /* v2.55 (2026-05-15): -1 px per user "decrease the size of the
     social media icons by 1 px". 30 -> 29 (7 × 29 = 203 px). WCAG
     2.5.8 AA (24 x 24) still satisfied with 5 px to spare.
     v2.58 (2026-05-15): another -1 px per user. 29 -> 28 (7 × 28 =
     196 px). WCAG 2.5.8 AA (24 x 24) still met.
     v2.59 (2026-05-15): -2 px per user "lower the social media icons
     to 2 px". 28 -> 26 (7 × 26 = 182 px). WCAG 2.5.8 AA (24 x 24)
     still met with 2 px to spare.
     v2.59b (2026-05-15): absolute set per user "lower the social
     media icons to 23". 26 -> 23 (7 × 23 = 161 px). NOTE: 23 < WCAG
     2.5.8 AA 24 px tap-target minimum — falls 1 px below AA. The
     base rule's min-width/min-height:32 (line 4144) is overridden
     here at mobile, so the actual hit zone IS 23×23. Per explicit
     user instruction.
     v2.59c (2026-05-15): absolute set per user "lower the social
     media icons to 21 px". 23 -> 21 (7 × 21 = 147 px). NOTE: 21 is
     3 px below WCAG 2.5.8 AA (24x24). Also: base SVG glyph is 21 px
     (line 4156), Facebook optical 25 (line 5871), Instagram 23 (line
     5875) — FB and IG glyphs will visually overflow the 21 px cell
     by 2 px each side, but the parent .ftr-socials has no overflow
     clip, so they remain fully visible. Per explicit user
     instruction. */
  .upmos-ftr-v1 .ftr-social {
    width: 21px;
    height: 21px;
    min-width: 21px;
    min-height: 21px;
  }

  /* v2.59d (2026-05-15): per-icon -1 px on X / Pinterest / LinkedIn
     per user "I need X lowered by 1 px, Pinterest lowered by 1 px,
     LinkedIn lowered by 1 px. These are the only social icons I need
     lowered" (mobile). Mirrors the same tablet-landscape rule at
     line ~5003 — at mobile the default svg glyph (line 4156) is 21
     px; drop these three to 20 px so X / Pinterest / LinkedIn read
     slightly smaller than IG (23), FB (25), YouTube (21), TikTok
     (21). Cell remains 21×21 — glyph just sits with 0.5 px padding
     each side. */
  .upmos-ftr-v1 .ftr-social[data-upmos-social="x"] svg,
  .upmos-ftr-v1 .ftr-social[data-upmos-social="pinterest"] svg,
  .upmos-ftr-v1 .ftr-social[data-upmos-social="linkedin"] svg {
    width: 20px;
    height: 20px;
  }

  /* All Access brand mark +3 px on phone per user "increase the All
     Access brand by 3 px, this is all on mobile". v2.32's <=900 rule
     sets 32 px / 110 px max-width; bump to 35 px / 120 px at <=640
     so the mark anchors the newsletter row with stronger visual
     weight. Native SVG aspect (~3.4:1) preserved by the height-led
     scale; max-width raised proportionally to 120 px so the wider
     mark fits without clipping.
     v2.54 (2026-05-15): +2 px per user "increase All Access brand by
     2 px". 35 -> 37; max-width 120 -> 127 (proportional to native
     3.4:1 aspect: 37 height × 3.4 ≈ 126 width, capped 127).
     v2.55 (2026-05-15): another +2 px per user repeat ask. 37 -> 39;
     max-width 127 -> 134 (3.4:1 aspect preserved).
     v2.58 (2026-05-15): another +2 px per user. 39 -> 41; max-width
     134 -> 141 (3.4:1 aspect preserved).
     v2.59 (2026-05-15): +3 px per user "increase the All Access brand
     to 3 px". 41 -> 44; max-width 141 -> 150 (3.4:1 aspect: 44 × 3.4
     ≈ 149.6 → 150). */
  .upmos-ftr-v1 .ftr-allaccess img {
    height: 44px;
    max-width: 150px;
  }
}

/* Optical sizing for Facebook + Instagram (all viewports).
   v2.30 (2026-05-12): per user, Facebook bumped 23 -> 25 and Instagram
   added at 23 (+2 over the 21 base). The Facebook glyph sits inside
   more viewBox padding than X / TikTok / YouTube / Pinterest /
   LinkedIn, so a larger bump brings it to visual parity; Instagram's
   outline-stroke also benefits from the +2 to read at a comparable
   visual weight per user preference. */
.upmos-ftr-v1 .ftr-social[data-upmos-social="facebook"] svg {
  width: 25px;
  height: 25px;
}
.upmos-ftr-v1 .ftr-social[data-upmos-social="instagram"] svg {
  width: 23px;
  height: 23px;
}

/* v2.25 (2026-05-12): Trust seals (Norton + TrustedSite + BBB composite
   image, .ftr-trust-seals) LEFT-aligned on mobile so the trio lines up
   with the "Your email address" input above. On desktop, margin-left:
   auto pins the trio to the right edge of the newsletter row; that
   right-pin doesn't make sense on mobile after the form wraps. Override
   at <=760px: take a full row (flex-basis: 100%) and flex-start the
   inline-flex contents so the composite image hugs the same left edge
   as the email input (.ftr-newsletter-input above it).

   margin-top: 16px gives a clear vertical separation from the email
   field above (16 + the parent's 10 px row gap = ~26 px effective
   spacing). That's in the UI/UX sweet-spot for "related-but-distinct"
   form-to-supplementary-content separation (16-24 px per Material
   spec; iOS HIG ~20 px). Less than 16 makes the seals feel glued to
   the form; more than 32 disconnects them. */
@media (max-width: 760px) {
  .upmos-ftr-v1 .ftr-trust-seals {
    margin: 16px 0 0;
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

/* v2.69: Turnstile widget removed from newsletter form — mobile CSS rule no longer needed. */

/* Legal-row clean stack at <=480px. Was: flex-wrap with ragged 3/2/2/1
   pattern when Complianz inserted its consent toggle mid-row. Now: every
   link on its own row, full-width, comfortable 6px vertical padding,
   13px font for thumb-friendly scan. */
@media (max-width: 480px) {
  .upmos-ftr-v1 .ftr-legal-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px 16px !important;
  }
  .upmos-ftr-v1 .ftr-legal-link {
    padding: 8px 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    /* v2.22: explicit left-align so the Complianz <button> "Cookie Settings"
       (which inherits browser-default text-align:center on <button>) lines
       up with the surrounding <a> links. Same rule applied to all legal
       items keeps the visual rhythm consistent regardless of underlying
       element type. */
    text-align: left !important;
    width: 100% !important;
  }
  .upmos-ftr-v1 .ftr-legal-link:last-child { border-bottom: 0; }

  /* v2.47 (2026-05-15): scope the orange "current page" indicator to
     the policy title text only on phone — per user "remove this long
     underline and put it only under the policy title". The base rule
     `.ftr-legal-link[aria-current="page"] { border-bottom-color:
     var(--ftr-accent) }` (line ~4508) paints the link's bottom
     border orange. On desktop the link is auto-width so the border
     hugs the text; at <=480 the link is `width: 100%` (above), which
     stretches the border into a full-row orange bar between rows.
     Override: keep the row divider at the same faint white as the
     non-current rows, and underline only the text glyphs via
     text-decoration so the active-page mark sits exactly under the
     policy title. */
  .upmos-ftr-v1 .ftr-legal-link[aria-current="page"] {
    border-bottom-color: rgba(255,255,255,0.10) !important;
    text-decoration: underline;
    text-decoration-color: var(--ftr-accent);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
  }
}

/* v2.25 (2026-05-12): the v2.20 print rule that force-expanded the nav
   accordions on paper is removed. The new print rule above hides .ftr-
   main entirely (which contains those accordions), so this override
   was a dead no-op. */