/* Footer. From the Phase 2 prototype (shared/site.css, "Footer"), with the old theme's content. */

.ft { background: #f7f8fc; border-top: 1px solid var(--line); margin-top: 64px; }
.ft__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 48px 32px; }
.ft__grid > * { min-width: 0; }
.ft h2 { font-size: var(--t-s); color: var(--muted); margin-bottom: 8px; }
.ft ul { list-style: none; }
.ft__col li a, .ft__social a { display: inline-block; min-height: 48px; padding-block: 12px; font-size: var(--t-s); line-height: 1.4; } /* inline, so an emoji in a label stays next to its words */

.ft__logo { display: inline-block; border-radius: 0; }
.ft__logo img { display: block; width: 170px; height: auto; }
/* site_info is editor content: address, contact lines, the 30-years badge and Customer Reviews'
   trust badge. WordPress turns its emoji (🇺🇸 📱) into <img class="emoji">, so only the other
   images get the badge size. */
.ft__info { margin-top: 16px; font-size: var(--t-s); }
.ft__info p + p { margin-top: 14px; }
.ft__info a { display: inline-block; padding-block: 12px; margin-block: -12px; } /* 48px tap height without spreading the lines apart */
.ft__info img:not(.emoji) { display: block; width: 120px !important; height: auto !important; margin-top: 4px; }
.ft__info img.emoji { display: inline !important; width: 1em !important; height: 1em !important; margin: 0 .25em 0 0 !important; vertical-align: -.1em !important; }
/* The trust badge ([cusrev_trustbadge]): its own CSS sizes it from the surrounding text, which is
   larger here than on the old site. Kept to its content's width, in the site font. */
.ft__info .cr-trustbadgef { margin-top: 16px; }
.ft__info .cr-badge { width: max-content !important; max-width: 100%; padding: 14px 16px !important; font-family: var(--font) !important; }
.ft__info .cr-badge .badge__store { font-family: var(--font) !important; font-size: var(--t-b) !important; }
.ft__info .cr-badge .verified__text, .ft__info .cr-badge .rating__store, .ft__info .cr-badge .rating__reviews { font-family: var(--font) !important; font-size: var(--t-xs) !important; }
.ft__info .cr-badge .badge__nowrap { white-space: normal !important; }
.ft__info .cr-badge .badge__stars { margin-bottom: 6px; }
.ft__social { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 12px; }

.ft__partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px 48px; padding-block: 24px; border-top: 1px solid var(--line); }
.ft__logos { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ft__logos li { display: grid; place-items: center; height: 48px; padding: 6px 10px; background: #fff; border: 1px solid var(--line); border-radius: 0; }
.ft__logos img { display: block; max-height: 34px; width: auto; }

.ft__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-block: 16px 32px; border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--muted); }

@media (max-width: 1023px) {
  .ft__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft__about { grid-column: 1 / -1; }
}
@media (max-width: 759px) {
  /* The three link lists two to a row, so the footer isn't one long column of links */
  .ft__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding-block: 32px 24px; }
}

/* Cookie Notice (Hu-manity) as a small bar at the bottom, in brand colours: its own are 13px text, green buttons
   with white text and a "×" labelled "No" that accepts. The settings that make it a real choice are in
   docs/seo-and-migration.md ("Cookie Notice"). While it shows, the product page's phone Add to cart bar steps aside, and the buttons keep clear of the chat tab. */
#cookie-notice { z-index: 90; background: var(--navy) !important; color: #fff; font: 400 var(--t-s)/1.45 var(--font); }
#cookie-notice .cookie-notice-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; max-width: var(--maxw); margin: 0 auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); color: #fff !important; text-align: left; }
#cookie-notice.cookie-notice-hidden .cookie-notice-container { display: none; }
#cookie-notice .cn-text-container { flex: 1 1 360px; margin: 0; font-size: 1.125rem; }
#cookie-notice .cn-buttons-container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#cookie-notice .cn-button:not(.cn-button-custom) { min-height: 48px; margin: 0; padding: 0 22px; border: 2px solid #fff; border-radius: var(--btn-radius); background: #fff !important; color: var(--navy) !important; font: var(--fw-m) var(--t-s)/1.2 var(--font); letter-spacing: 0; white-space: normal; }
#cookie-notice #cn-accept-cookie { border-color: var(--green); background: var(--green) !important; }
#cookie-notice #cn-more-info { padding: 0 6px; border-color: transparent; background: transparent !important; color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
#cookie-notice .cn-close-icon { display: none; }
#cookie-notice :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
body:has(#cookie-notice.cookie-notice-visible) .sbar { display: none; }
/* Tawk.to's "Send message" tab sits in the bottom right corner (204px wide, 167px on phones): the buttons keep clear of it */
body:has(iframe[title="Chat widget"]) #cookie-notice .cn-buttons-container { margin-right: 220px; }
@media (max-width: 759px) {
  body:has(iframe[title="Chat widget"]) #cookie-notice .cn-buttons-container { margin-right: 170px; }
}