/* ===========================================================================
   Mercado — footer. The one night surface, so the page closes rather than
   trailing off. Three bands: brand + direct channels, the link grid, and the
   bottom bar. Titles are white and full size; links sit a step back in grey
   and come forward on hover.
   =========================================================================== */

.footer {
  background: var(--night);
  color: var(--on-night);
  padding-block: var(--s8) var(--s5);
}

/* The floating contact buttons are fixed at the inline-end foot of the
   viewport. On a wide screen they would sit over the last column, so that
   side of the footer keeps clear of them. */
@media (min-width: 900px) {
  .footer > .wrap { padding-inline-end: max(var(--gutter), 88px); }
}

/* ---- top band ------------------------------------------------------------ */
.footer__top {
  display: grid;
  gap: var(--s6);
  padding-block-end: var(--s7);
  border-block-end: 1px solid var(--line-night);
}

@media (min-width: 900px) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--s8);
  }
}

.footer__brand { display: grid; gap: var(--s4); align-content: start; }

.footer .logo img { block-size: 46px; inline-size: auto; }

/* The site's footer wordmark is black on transparent: reversed out here. */
.footer .logo--mono img { filter: brightness(0) invert(1); }

.footer__tagline {
  margin: 0;
  max-inline-size: 34ch;
  font-size: var(--t-lede);
  line-height: var(--lh-head);
  color: var(--on-night-2);
  text-wrap: balance;
}

.footer__cta { display: grid; gap: var(--s3); justify-items: start; }

.footer__cta-title {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--on-night-2);
}

.footer__cta-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.footer__cta .btn { min-height: 48px; padding-inline: var(--s6); }
.footer__cta .btn .icon { inline-size: 18px; block-size: 18px; }

/* The outline pill for a dark ground. */
.btn--night {
  background: transparent;
  color: var(--on-night);
  border-color: rgb(255 255 255 / 0.32);
}

.btn--night:hover {
  background: var(--on-night);
  border-color: var(--on-night);
  color: var(--night);
}

/* ---- link grid ----------------------------------------------------------- */
.footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s7) var(--s6);
  padding-block: var(--s7);
}

.footer__col--contact { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr 1.6fr; gap: var(--s8); }
  .footer__col--contact { grid-column: auto; }
}

.footer__title {
  margin: 0 0 var(--s5);
  font-size: var(--t-body);
  font-weight: 700;
  line-height: var(--lh-head);
  color: var(--on-night);
}

.footer__list { display: grid; gap: var(--s3); }

.footer__list a {
  font-size: var(--t-sm);
  color: var(--on-night-2);
  transition: color var(--d-fast) var(--ease);
}

.footer__list a:hover,
.footer__list a:focus-visible { color: var(--on-night); }

/* Contact: an icon, a small label, and the value on its own line. */
.footer__contact { display: grid; gap: var(--s5); }

.footer__contact li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
}

.footer__contact .icon {
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 3px;
  color: var(--on-night-2);
}

.footer__contact a,
.footer__contact p {
  display: grid;
  gap: 2px;
  justify-items: start;
  margin: 0;
  font-size: var(--t-sm);
  color: var(--on-night);
}

.footer__contact-label {
  font-size: var(--t-micro);
  color: var(--on-night-2);
}

.footer__contact a > span:last-child {
  border-block-end: 1px solid transparent;
  transition: border-color var(--d-fast) var(--ease);
}

.footer__contact a:hover > span:last-child { border-block-end-color: var(--on-night); }

/* ---- bottom bar ---------------------------------------------------------- */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s6);
  padding-block-start: var(--s5);
  border-block-start: 1px solid var(--line-night);
  font-size: var(--t-micro);
  color: var(--on-night-2);
}

.footer__copy { margin: 0; }

/* Policy links. They wrap to their own row on a phone. */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
}

.footer__legal a {
  font-size: var(--t-micro);
  color: var(--on-night-2);
  transition: color var(--d-fast) var(--ease);
}

.footer__legal a:hover,
.footer__legal a:focus-visible { color: var(--on-night); }

.footer__top-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 600;
  color: var(--on-night);
}

.footer__top-link .icon { inline-size: 16px; block-size: 16px; }

@media (max-width: 899px) {
  .footer { padding-block-start: var(--s7); }
  .footer__bottom { flex-direction: column; align-items: flex-start; padding-inline-end: 60px; }
}

/* ---- floating contact ----------------------------------------------------
   Two channels, no labels, no pulse. They sit still until hovered. */
.quick {
  position: fixed;
  inset-block-end: var(--s5);
  inset-inline-end: var(--s5);
  z-index: var(--z-header);
  display: grid;
  gap: var(--s3);
}

.quick__btn {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  /* The light ring keeps the buttons visible over the dark hero and the
     footer; the drop shadow lifts them off the white pages. */
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18), 0 6px 18px rgb(0 0 0 / 0.18);
  transition: background-color var(--d-fast) var(--ease);
}

.quick__btn:hover { background: var(--brand); color: var(--on-brand); }
.quick__btn svg { inline-size: 20px; block-size: 20px; }

/* The plugins ship their own floating buttons. The theme renders both
   channels itself from the same numbers, so the plugin widgets are hidden to
   avoid a second stack — see inc/enqueue.php, which also drops their JS. */
body .nta_wa_button, body .nta-wa-widget,
body .cnb-single, body #callnowbutton,
body .ht-ctc, body .ht_ctc_chat { display: none !important; }

/* On a phone two stacked buttons sit on top of whatever is at the foot of the
   viewport. Keep the store's primary channel only; the phone number is one tap
   away in the drawer and in the footer.

   This block has to stay at the end of the file: .quick__btn--call is a single
   class and so ties with .quick__btn on specificity — order is what settles it. */
@media (max-width: 700px) {
  .quick { inset-block-end: var(--s4); inset-inline-end: var(--s4); gap: var(--s2); }
  .quick__btn { inline-size: 44px; block-size: 44px; }
  .quick__btn--call { display: none; }
}