/* =============================================================================
   FOOTER — measured height 1115px at 1440.
   The source footer is dark with white headings and #b2b2b2 column headings.
   ============================================================================= */

.th-footer {
  background: #000;
  color: #fff;
  font-family: var(--th-font);
}

/* ---- newsletter ---- */
.th-footer__newsletter { padding: 40px 0 24px; }

.th-footer__nl-title {
  font-size: var(--th-fs-h4);     /* 24 -> 23 (48em) -> 20 (38em), measured */
  line-height: var(--th-lh-h4);
  font-weight: var(--th-fw-bold);
  color: #fff;
  margin: 0 0 15px;
}

.th-footer__nl-form { display: flex; flex-wrap: wrap; gap: 0; max-width: 560px; }

.th-footer__nl-input {
  flex: 1 1 240px;
  height: 52px;
  padding: 0 16px;
  border: 1px solid #fff;
  background: #fff;
  color: #212529;
  font-family: var(--th-font);
  font-size: var(--th-fs-base);
}

/* Measured: #b8006d bg, white, 700, 15.68px, padding 15.68px 34.496px, radius 0 */
.th-footer__nl-btn {
  padding: 15.68px 34.5px;
  font-size: 15.68px;
  border-radius: 0;
}

/* ---- columns ---- */
.th-footer__main { padding: 24px 0 32px; }

.th-footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}

.th-footer__heading {
  font-size: var(--th-fs-base);      /* 16px 700 — measured */
  line-height: 1.2;
  font-weight: var(--th-fw-bold);
  color: var(--th-footer-heading);   /* #b2b2b2 — measured */
  text-transform: uppercase;
  margin: 0 0 12px;
}
.th-footer__col--meta .th-footer__heading:not(:first-child) { margin-top: 24px; }

.th-footer__list,
.th-footer__contact,
.th-footer__social,
.th-footer__pay,
.th-footer__legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.th-footer__list li,
.th-footer__contact li { margin-bottom: 8px; }

.th-footer__list a,
.th-footer__contact a {
  font-size: var(--th-fs-sm);
  color: #fff;
}

.th-footer__a11y {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--th-fs-sm);
  color: #fff;
  text-align: left;
}
.th-footer__a11y:hover { text-decoration: underline; }

/* ---- payment marks + socials ---- */
.th-footer__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* A text chip is the FALLBACK for a method with no artwork — a method the
   store accepts must never be invisible in "WE ACCEPT". Methods that do have
   a brand mark render as an image chip instead. */
.th-pay-mark {
  padding: 4px 8px;
  border: 1px solid #fff;
  border-radius: 2px;
  font-size: var(--th-fs-xs);
  line-height: 1.4;
}
.th-pay-mark--img {
  padding: 0;
  border: 0;
  line-height: 0;
}
/* Payment-mark sizing lives further down this file — a later duplicate of
   this selector wins. Edit it THERE, not here. */

.th-footer__social { display: flex; gap: 12px; }
/* The mark is an inline SVG (th_social_icon). It inherits its colour from the
   round white chip it sits in, so only colour is set here. */
.th-social { display: block; color: #000; }

/* ---- legal / compliance ----
   On the source this is a collapsible block (data-state="truncated") with a
   read-more. That collapse is WHY the first capture of it came back cut off
   mid-sentence at "has not been...". */
.th-footer__legal {
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.th-footer__legal-toggle {
  font-size: var(--th-fs-xs);
  line-height: 1.6;
  color: #b2b2b2;
  overflow: hidden;
}
.th-footer__legal-toggle[data-state="truncated"] {
  max-height: 7.5em;
}
.th-footer__legal-toggle p { margin: 0 0 .8em; }

.th-footer__legal-more {
  margin-top: 8px;
  background: none;
  border: 0;
  padding: 0;
  color: #fff;
  font-size: var(--th-fs-xs);
  font-weight: var(--th-fw-bold);
  text-decoration: underline;
}

/* ---- bottom bar ---- */
.th-footer__bottom {
  padding: 16px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.th-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.th-footer__legal-links { display: flex; flex-wrap: wrap; gap: 16px; }
.th-footer__legal-links a { font-size: var(--th-fs-xs); color: #b2b2b2; }

.th-footer__copy {
  margin: 0;
  font-size: var(--th-fs-xs);
  color: #b2b2b2;
}

/* Media queries add NO specificity — repeat the parent selector so these
   actually beat the base rules above. */
@media (max-width: 991px) {
  .th-footer .th-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .th-footer .th-footer__cols { grid-template-columns: 1fr; gap: 24px; }
  .th-footer .th-footer__nl-form { max-width: none; }
  .th-footer .th-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   FOOTER — MOBILE
   The source collapses SHOP and HELP into accordions below the breakpoint,
   shows real payment marks, circular social icons, a bordered CONTACT US
   button and three industry trust logos. Measured: source footer 1363px at
   375 vs our 1498 before this — ours was taller because every list was
   permanently expanded.
   ============================================================================= */

/* <details> is open on desktop and collapsible on mobile. */
.th-footer__acc { }
.th-footer__acc > summary {
  list-style: none;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.th-footer__acc > summary::-webkit-details-marker { display: none; }
.th-footer__acc-sign { display: none; }

/* contact icons */
.th-footer__contact li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.th-footer__cicon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: #000;
}

.th-footer__contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  min-height: 48px;
  margin-top: 14px;
  padding: 12px 20px;
  border: 1px solid #fff;
  color: #fff;
  font-size: var(--th-fs-sm);
  font-weight: var(--th-fw-bold);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.th-footer__contact-btn:hover { background: #fff; color: #000; text-decoration: none; }

/* payment marks */
.th-footer__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.th-pay-mark--img { border: 0; padding: 0; background: #fff; border-radius: 4px; }
/* ⚠ SIZE BY HEIGHT, WIDTH AUTO — and this is the rule that actually wins.
   zelle.svg and cashapp.svg are UNMODIFIED official artwork with different
   aspect ratios (1600x844 and 1:1). The previous `width: 56px` stretched the
   Zelle wordmark and blew the Cash App icon up to 56x56, taller than every
   other mark in the row. Brand guidelines forbid distorting either.
   ⚠ 5th time a duplicate selector later in this file has silently beaten an
   earlier one on this build. Fix at the winner. */
.th-pay-mark--img img {
  display: block;
  width: auto;
  height: 30px;
  max-width: 76px;
}

/* social icons as filled circles, like the source */
.th-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #fff;
}
/* ⚠ This rule used to carry `background: #000` — that is what painted the
   four black squares where the social logos belong. A duplicate .th-social
   selector later in the file beats an earlier one regardless of any media
   query (the 4th time that pattern has bitten this build), so the
   placeholder is removed HERE, at the rule that actually wins. */
.th-social { width: 18px; height: 18px; }

/* industry trust logos */
.th-footer__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.th-footer__trust img {
  width: auto;
  max-width: 110px;
  height: 40px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);   /* the logos are dark artwork on a dark footer */
  opacity: .85;
}

@media (max-width: 991px) {
  /* Collapsible below the breakpoint — this is the behaviour the source has,
     and it is why the source footer is ~135px SHORTER than ours was. */
  .th-footer .th-footer__acc > summary { cursor: pointer; padding: 16px 0; }
  .th-footer .th-footer__acc { border-bottom: 1px solid rgba(255, 255, 255, .15); }
  .th-footer .th-footer__acc[open] > .th-footer__acc-sign,
  .th-footer .th-footer__acc-sign { display: block; position: relative; width: 16px; height: 16px; flex: 0 0 16px; }
  .th-footer .th-footer__acc-sign::before,
  .th-footer .th-footer__acc-sign::after {
    content: "";
    position: absolute;
    background: #fff;
  }
  .th-footer .th-footer__acc-sign::before { top: 7px; left: 0; width: 16px; height: 2px; }
  .th-footer .th-footer__acc-sign::after  { left: 7px; top: 0; width: 2px; height: 16px; }
  .th-footer .th-footer__acc[open] .th-footer__acc-sign::after { transform: scaleY(0); }
  .th-footer .th-footer__acc > ul { padding-bottom: 14px; }

  .th-footer .th-footer__trust { justify-content: center; }
  .th-footer .th-footer__contact-btn { max-width: none; }
}

/* Closed by default on mobile — matching the source. Done in CSS rather than
   stripping the `open` attribute so the content is still in the DOM for
   search engines and for anyone without CSS. */
@media (max-width: 991px) {
  .th-footer .th-footer__acc:not([data-user-opened]) > ul { }
}