.tk-site-footer {
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
  --block-container-padding-inline: 0 !important;
  --block-container-padding-inline-tablet: 0 !important;
  --block-container-padding-inline-mobile: 0 !important;
  --block-container-margin-inline: 0 !important;
  --block-container-margin-inline-tablet: 0 !important;
  --block-container-margin-inline-mobile: 0 !important;
  --block-default-padding-inline: 0 !important;
  border-block-start: 1px solid var(--tk-color-border);
  background: var(--site-footer-bg, var(--tk-color-surface));
  color: var(--site-footer-text, var(--tk-color-text));
  font-family: var(--tk-font-body);
}

.tk-site-footer__main.tk-wrap,
.tk-site-footer__bottom .tk-wrap {
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--tk-gutter);
}

.tk-site-footer--dark {
  --site-footer-bg: #111225;
  --site-footer-text: #ffffff;
  --site-footer-accent: #8b8cf7;
  --site-footer-title: #ffffff;
  --site-footer-link: rgb(255 255 255 / 78%);
  border-block-start-color: rgb(255 255 255 / 10%);
}

.tk-site-footer__main {
  display: grid;
  grid-template-columns: minmax(180px, 0.95fr) minmax(240px, 1.45fr) minmax(220px, 0.9fr);
  gap: var(--site-footer-column-gap, 32px);
  align-items: start;
}

/* Without the newsletter/social zone the links take its track too. */
.tk-site-footer__main--no-engagement {
  grid-template-columns: minmax(180px, 1fr) minmax(240px, 3fr);
}

.tk-site-footer__brand {
  display: grid;
  gap: 12px;
}

.tk-site-footer__logo {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  color: var(--site-footer-title, inherit);
  font-family: var(--tk-font-heading);
  font-size: 24px;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
}

.tk-site-footer__logo img {
  display: block;
  max-height: 44px;
  max-width: 190px;
  object-fit: contain;
}

.tk-site-footer__brand p {
  max-width: 34ch;
  margin: 0;
  color: color-mix(in srgb, var(--site-footer-text, #111827) 72%, transparent);
  font-size: 14px;
  line-height: 1.65;
}

.tk-site-footer__links {
  display: grid;
  grid-template-columns: repeat(var(--site-footer-link-columns, auto-fit), minmax(120px, 1fr));
  gap: var(--site-footer-column-gap, 32px);
}

/* A forced column count shares the width instead of holding each column at
   120px, which would push a three- or four-column footer off a narrow screen. */
.tk-site-footer--split-columns .tk-site-footer__links {
  grid-template-columns: repeat(var(--site-footer-link-columns), minmax(0, 1fr));
}

.tk-site-footer__link-column {
  display: grid;
  /* Rows keep their height: a shorter column must not spread its links to
     match the tallest one. */
  align-content: start;
  gap: 10px;
}

.tk-site-footer__link-column h3,
.tk-site-footer__newsletter h3 {
  margin: 0;
  color: var(--site-footer-title, var(--tk-color-heading));
  font-size: 14px;
  font-weight: 800;
}

.tk-site-footer__link-column ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tk-site-footer__link-column a {
  color: var(--site-footer-link, color-mix(in srgb, var(--site-footer-text, #111827) 72%, transparent));
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.18s ease;
}

.tk-site-footer__link-column a:hover {
  color: var(--site-footer-accent, var(--tk-color-primary));
}

.tk-site-footer__engagement {
  display: grid;
  gap: 18px;
}

.tk-site-footer__newsletter {
  display: grid;
  gap: 10px;
}

.tk-site-footer__newsletter .tk-nl-form {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  gap: 8px;
  max-width: none;
  width: 100%;
}

.tk-site-footer__newsletter .tk-nl-input {
  min-width: 0;
  /* A fixed basis, not the input's intrinsic width, so the button stays beside it. */
  flex: 1 1 120px;
  border: 1px solid var(--site-footer-newsletter-input-border, var(--tk-color-border));
  border-radius: var(--tk-button-radius);
  background: var(--site-footer-newsletter-input-bg, color-mix(in srgb, var(--site-footer-bg, #ffffff) 92%, #ffffff));
  padding: 11px 12px;
  color: var(--site-footer-newsletter-input-text, inherit);
  font: inherit;
  height: auto;
  min-height: 43px;
}

/* The placeholder tracks the input's own resolved text colour (muted), so it
   stays legible on a light or dark footer in either theme. A template can pin
   it with --site-footer-newsletter-input-placeholder in its own customCss. */
.tk-site-footer__newsletter .tk-nl-input::placeholder {
  color: var(
    --site-footer-newsletter-input-placeholder,
    color-mix(in srgb, currentColor 55%, transparent)
  );
  opacity: 1;
}

.tk-site-footer__newsletter .tk-nl-btn {
  flex: 0 0 auto;
  border: 1px solid var(--site-footer-newsletter-button-border, transparent);
  border-radius: var(--tk-button-radius);
  background: var(--site-footer-newsletter-button-bg, var(--site-footer-accent, var(--tk-color-primary)));
  padding: 0 14px;
  color: var(--site-footer-newsletter-button-text, #ffffff);
  font-size: 13px;
  font-weight: 800;
  height: auto;
  min-height: 43px;
  cursor: pointer;
}

.tk-site-footer__newsletter .tk-nl-btn:hover {
  border-color: var(--site-footer-newsletter-button-hover-border, var(--site-footer-newsletter-button-border, transparent));
  background: var(--site-footer-newsletter-button-hover-bg, var(--site-footer-newsletter-button-bg, var(--site-footer-accent, var(--tk-color-primary))));
  color: var(--site-footer-newsletter-button-hover-text, var(--site-footer-newsletter-button-text, #ffffff));
}

/* The shared sheet removes the field's outline, and the Newsletter block's
   ring is scoped to its own form - so the footer draws its own. */
.tk-site-footer__newsletter .tk-nl-input:focus {
  border-color: var(--site-footer-accent, var(--tk-input-focus));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-footer-accent, var(--tk-input-focus)) 22%, transparent);
}

.tk-site-footer__newsletter .tk-nl-input:disabled,
.tk-site-footer__newsletter .tk-nl-btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.tk-site-footer__newsletter .tk-nl-status {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.tk-site-footer__newsletter .tk-nl-status--success {
  color: var(--tk-color-success);
}

.tk-site-footer__newsletter .tk-nl-status--error {
  color: var(--tk-color-danger);
}

.tk-site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tk-site-footer__socials a {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--tk-color-border);
  border-radius: var(--tk-button-radius);
  color: var(--site-footer-social, var(--site-footer-text, currentColor));
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    color 0.18s ease;
}

.tk-site-footer__socials a:hover {
  border-color: var(--site-footer-accent, var(--tk-color-primary));
  color: var(--site-footer-accent, var(--tk-color-primary));
}

.tk-site-footer__bottom {
  margin-block-start: 28px;
  border-block-start: 1px solid color-mix(in srgb, var(--site-footer-text, #111827) 14%, transparent);
  background: var(--site-footer-bottom-bg, transparent);
  color: var(--site-footer-bottom-text, color-mix(in srgb, var(--site-footer-text, #111827) 68%, transparent));
}

.tk-site-footer__bottom--credits-only {
  margin-block-start: 12px;
  border-block-start: none;
}

.tk-site-footer__bottom .tk-wrap {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  font-weight: 650;
  padding-block: 12px;
}

.tk-site-footer__developed-by {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  opacity: 0.85;
  transition: opacity 0.18s ease;
  user-select: none;
}

.tk-site-footer__developed-by:hover {
  opacity: 1;
}

.tk-site-footer__developed-by a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}

.tk-site-footer__developed-by a:hover {
  color: var(--site-footer-accent, var(--tk-color-primary));
}

.tk-site-footer__payments {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
}

@media (max-width: 640px) {
  .tk-site-footer__bottom .tk-wrap {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 10px;
  }
}

.tk-site-footer--centered .tk-site-footer__main,
.tk-site-footer--compact .tk-site-footer__main {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.tk-site-footer--centered .tk-site-footer__brand,
.tk-site-footer--compact .tk-site-footer__brand,
.tk-site-footer--centered .tk-site-footer__engagement,
.tk-site-footer--compact .tk-site-footer__engagement {
  justify-items: center;
}

.tk-site-footer--centered .tk-site-footer__links,
.tk-site-footer--compact .tk-site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Centered: a short stack in the middle - the name and a line about the
   store, then every link in one wrapping row between two hairlines (column
   titles dropped: stacked side by side, a long column of pages turned the
   footer into a tall narrow list), then the newsletter and the socials. */
.tk-site-footer--centered .tk-site-footer__main {
  gap: 32px;
}

.tk-site-footer--centered .tk-site-footer__brand p {
  max-width: 56ch;
}

.tk-site-footer--centered .tk-site-footer__link-column h3 {
  display: none;
}

.tk-site-footer--centered .tk-site-footer__links {
  box-sizing: border-box;
  width: 100%;
  max-width: 880px;
  gap: 12px 28px;
  padding-block: 24px;
  border-block: 1px solid color-mix(in srgb, var(--site-footer-text, #111827) 12%, transparent);
}

.tk-site-footer--centered .tk-site-footer__link-column,
.tk-site-footer--centered .tk-site-footer__link-column ul {
  display: contents;
}

/* The main grid centres its items, which shrinks each to its content: the
   zone gets a real width so the form inside has room - a percentage of a
   shrunk zone left the input at its 120px basis. */
.tk-site-footer--centered .tk-site-footer__engagement {
  width: min(100%, 440px);
}

.tk-site-footer--centered .tk-site-footer__newsletter {
  width: 100%;
  justify-items: center;
}

@media (max-width: 767px) {
  .tk-site-footer--centered .tk-site-footer__main {
    gap: 24px;
  }

  .tk-site-footer--centered .tk-site-footer__links {
    gap: 12px 20px;
    padding-block: 16px;
  }
}

.tk-site-footer--brandbar .tk-site-footer__brand {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  border-block-end: 1px solid var(--tk-color-border);
  padding-block-end: 20px;
}

.tk-site-footer--brandbar .tk-site-footer__links {
  grid-column: 1 / 3;
}

/* The bar's own colours come first: redefining the variables here would hide
   the ones set on the footer root, so the chosen bottom-bar colours are read
   through and the accent is only the fallback. */
.tk-site-footer--twotone .tk-site-footer__bottom {
  background: var(--site-footer-bottom-bg, var(--site-footer-accent, #111827));
  color: var(--site-footer-bottom-text, #ffffff);
  border-block-start: 0;
}

.tk-site-footer--compact .tk-site-footer__brand p,
.tk-site-footer--compact .tk-site-footer__newsletter {
  display: none;
}

.tk-site-footer--compact .tk-site-footer__bottom {
  margin-block-start: 14px;
}

/* Wordmark: the brand zone dissolves into the grid so its parts can sit apart -
   the about text heads the first row beside the links and the engagement zone,
   and the store's name runs the full width beneath them in display type. */
.tk-site-footer--wordmark .tk-site-footer__main {
  grid-template-columns: minmax(180px, 1fr) minmax(240px, 2fr) minmax(220px, 1fr);
}

.tk-site-footer--wordmark .tk-site-footer__main--no-engagement {
  grid-template-columns: minmax(180px, 1fr) minmax(240px, 3fr);
}

.tk-site-footer--wordmark .tk-site-footer__brand {
  display: contents;
}

.tk-site-footer--wordmark .tk-site-footer__brand p {
  grid-column: 1;
  grid-row: 1;
}

.tk-site-footer--wordmark .tk-site-footer__links {
  grid-column: 2;
  grid-row: 1;
}

.tk-site-footer--wordmark .tk-site-footer__engagement {
  grid-column: 3;
  grid-row: 1;
}

.tk-site-footer--wordmark .tk-site-footer__logo {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  margin-block-start: 16px;
  font-size: clamp(56px, 14vw, 200px);
  line-height: 0.95;
  overflow-wrap: anywhere;
}

/* Split: the brand and the engagement zone stack into one tinted panel on the
   start side (two cells, no gap between them), the link columns beside it. */
.tk-site-footer--split .tk-site-footer__main {
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.7fr);
  row-gap: 0;
}

.tk-site-footer--split .tk-site-footer__brand,
.tk-site-footer--split .tk-site-footer__engagement {
  grid-column: 1;
  padding-inline: 28px;
  background: color-mix(in srgb, var(--site-footer-text, #111827) 5%, transparent);
}

.tk-site-footer--split .tk-site-footer__brand {
  grid-row: 1;
  padding-block: 28px 16px;
  border-start-start-radius: var(--tk-card-radius, 16px);
  border-start-end-radius: var(--tk-card-radius, 16px);
}

.tk-site-footer--split .tk-site-footer__engagement {
  grid-row: 2;
  padding-block: 8px 28px;
  border-end-start-radius: var(--tk-card-radius, 16px);
  border-end-end-radius: var(--tk-card-radius, 16px);
}

.tk-site-footer--split .tk-site-footer__main--no-engagement .tk-site-footer__brand {
  padding-block-end: 28px;
  border-radius: var(--tk-card-radius, 16px);
}

.tk-site-footer--split .tk-site-footer__links {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

/* Inline: one slim row - the name, every link without its column title, the
   socials - for a store that needs a sign-off, not a sitemap. */
.tk-site-footer--inline .tk-site-footer__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.tk-site-footer--inline .tk-site-footer__brand p,
.tk-site-footer--inline .tk-site-footer__newsletter,
.tk-site-footer--inline .tk-site-footer__link-column h3 {
  display: none;
}

.tk-site-footer--inline .tk-site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.tk-site-footer--inline .tk-site-footer__link-column,
.tk-site-footer--inline .tk-site-footer__link-column ul {
  display: contents;
}

.tk-site-footer--inline .tk-site-footer__bottom {
  margin-block-start: 16px;
}

@media (max-width: 900px) {
  .tk-site-footer__main,
  .tk-site-footer--brandbar .tk-site-footer__brand {
    grid-template-columns: 1fr;
  }

  .tk-site-footer--brandbar .tk-site-footer__links {
    grid-column: auto;
  }

  /* Wordmark and split place their zones on a grid for wide screens; a
     single column takes them back in reading order, the wordmark last and the
     split panel kept whole above the links. */
  .tk-site-footer--wordmark .tk-site-footer__main,
  .tk-site-footer--wordmark .tk-site-footer__main--no-engagement,
  .tk-site-footer--split .tk-site-footer__main {
    grid-template-columns: 1fr;
  }

  .tk-site-footer--wordmark .tk-site-footer__brand p,
  .tk-site-footer--wordmark .tk-site-footer__links,
  .tk-site-footer--wordmark .tk-site-footer__engagement,
  .tk-site-footer--wordmark .tk-site-footer__logo,
  .tk-site-footer--split .tk-site-footer__brand,
  .tk-site-footer--split .tk-site-footer__engagement,
  .tk-site-footer--split .tk-site-footer__links {
    grid-column: auto;
    grid-row: auto;
  }

  .tk-site-footer--wordmark .tk-site-footer__logo,
  .tk-site-footer--split .tk-site-footer__links {
    order: 1;
  }

  .tk-site-footer--split .tk-site-footer__links {
    margin-block-start: 28px;
  }
}

@media (max-width: 767px) {
  .tk-site-footer__main,
  .tk-site-footer__links {
    gap: min(var(--site-footer-column-gap, 32px), 24px);
  }

  .tk-site-footer--split-columns .tk-site-footer__links {
    grid-template-columns: repeat(var(--site-footer-link-columns-mobile, 2), minmax(0, 1fr));
  }

  .tk-site-footer__newsletter .tk-nl-form,
  .tk-site-footer__bottom .tk-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .tk-site-footer--inline .tk-site-footer__main {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .tk-site-footer--inline .tk-site-footer__links {
    justify-content: center;
  }

  /* Stacked: the basis would become the input's height, so drop it. */
  .tk-site-footer__newsletter .tk-nl-input {
    flex: none;
  }

  .tk-site-footer__bottom .tk-wrap {
    align-items: center;
    justify-content: center;
    padding-block: 14px;
    text-align: center;
  }
}