/*
 * Kik Footer — Figma site chrome.
 * Desktop frame 11713:4908 (1600x646), mobile frame 11713:4961 (414x1198).
 *
 * Every value below comes from the two frames' own kik design variables. They
 * are redeclared as component-scoped properties instead of being read straight
 * from assets/kik-theme.css because that committed build output still carries
 * pre-token-sync values for several of the tokens this footer needs:
 * --kik-color-bg-inverse resolves to #000 (frames: #1e1e1e),
 * --kik-spacing-page-default to 124px above 768px (frames: 24px),
 * --kik-spacing-section-lg to 64/96px (frames: 48/72px),
 * --kik-spacing-section-md to 48/64px (frames: 32/48px),
 * --kik-spacing-section-sm to 32/48px (frames: 24/28px),
 * --kik-spacing-md to 8/16px (frames: 12/16px),
 * and --kik-color-text-tertiary is absent from it entirely.
 * Each property names the kik token it mirrors, so the footer renders to the
 * frames whether or not the shared stylesheet has been rebuilt.
 *
 * Two further notes on the Section this stylesheet dresses. The DOM is written
 * in desktop source order (brand, link columns, newsletter) and reordered here
 * for the mobile frame (brand, newsletter, link accordions), so one responsive
 * Section serves both breakpoints off one Shopify menu. And the newsletter is a
 * hand-written form rather than a Liquid `form` tag, because the renderer
 * pinned for this project does not admit that tag; the markup carries the same
 * action and the same hidden form_type/utf8 fields the tag would emit.
 */

.kik-footer {
  /* Mobile frame variables (kik tokens below 768px). */
  --kik-footer-bg: #1e1e1e; /* kik-color/bg/inverse */
  --kik-footer-text: #ffffff; /* kik-color/text/inverse */
  --kik-footer-muted: #afafaf; /* kik-color/text/tertiary */
  --kik-footer-accent: #cad66a; /* kik-color/bg/accent */
  --kik-footer-surface: #ffffff; /* kik-color/action/inverse, kik-color/bg/page */
  --kik-footer-divider: #e8e8e8; /* kik-color/border/subtle */
  --kik-footer-page-x: 16px; /* kik-spacing/page-default */
  --kik-footer-section-lg: 48px; /* kik-spacing/section-lg */
  --kik-footer-section-md: 32px; /* kik-spacing/section-md */
  --kik-footer-section-sm: 24px; /* kik-spacing/section-sm */
  --kik-footer-lg: 16px; /* kik-spacing/lg */
  --kik-footer-md: 12px; /* kik-spacing/md */
  --kik-footer-sm: 4px; /* kik-spacing/sm */
  --kik-footer-body-lg: 16px; /* kik-text/size/body-lg */
  --kik-footer-body-sm: 12px; /* kik-text/size/body-sm */
  --kik-footer-body-xsm: 11px; /* kik-text/size/body-xsm */

  display: block;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--kik-footer-bg);
  color: var(--kik-footer-text);
  font-family: var(--kik-text-font-body, "Inter", "Helvetica Neue", Arial, sans-serif);
  line-height: var(--kik-text-line-height-body, 1.6);
  padding-inline: var(--kik-footer-page-x);
  padding-block: var(--kik-footer-section-md);
}

@media (min-width: 768px) {
  .kik-footer {
    /* Desktop frame variables (kik tokens from 768px). */
    --kik-footer-page-x: 24px; /* kik-spacing/page-default */
    --kik-footer-section-lg: 72px; /* kik-spacing/section-lg */
    --kik-footer-section-md: 48px; /* kik-spacing/section-md */
    --kik-footer-section-sm: 28px; /* kik-spacing/section-sm */
    --kik-footer-lg: 24px; /* kik-spacing/lg */
    --kik-footer-md: 16px; /* kik-spacing/md */
    --kik-footer-sm: 8px; /* kik-spacing/sm */
    --kik-footer-body-lg: 18px; /* kik-text/size/body-lg */
    --kik-footer-body-sm: 14px; /* kik-text/size/body-sm */
    --kik-footer-body-xsm: 12px; /* kik-text/size/body-xsm */
  }
}

.kik-footer *,
.kik-footer *::before,
.kik-footer *::after {
  box-sizing: border-box;
}

.kik-footer a {
  color: inherit;
  text-decoration: none;
}

.kik-footer a:focus-visible,
.kik-footer button:focus-visible,
.kik-footer input:focus-visible {
  outline: var(--kik-color-focus-ring-width, 2px) solid var(--kik-color-focus-ring-inverse, #cad66a);
  outline-offset: var(--kik-color-focus-ring-offset, 2px);
}

.kik-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--kik-footer-section-lg);
  width: 100%;
  max-width: var(--kik-container-max-width, 1600px);
  margin-inline: auto;
}

.kik-footer__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Pillars ------------------------------------------------------------ */
/* Mobile wraps to a 2x2 grid of 183px cells (414 - 2x16 page padding, 16px
   gutter); desktop spreads the four pillars across one 48px-gapped row. */
.kik-footer__pillars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kik-footer-lg);
  width: 100%;
}

.kik-footer__pillar {
  display: flex;
  flex: 0 0 calc((100% - var(--kik-footer-lg)) / 2);
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: var(--kik-footer-sm);
  overflow: clip;
}

@media (min-width: 768px) {
  .kik-footer__pillars {
    flex-wrap: nowrap;
    gap: var(--kik-footer-section-md);
  }

  .kik-footer__pillar {
    flex: 1 0 0;
  }
}

.kik-footer__pillar-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.kik-footer__pillar-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kik-footer__pillar-title {
  font-size: var(--kik-footer-body-lg);
  font-weight: 700;
}

/* The arrow belongs to the accent state only — the frames draw it beside the
   heading the moment the pillar lights up. */
.kik-footer__pillar-arrow {
  display: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.kik-footer__pillar-text {
  font-size: var(--kik-footer-body-xsm);
}

.kik-footer__pillar--highlighted,
a.kik-footer__pillar:hover,
a.kik-footer__pillar:focus-visible {
  color: var(--kik-footer-accent);
}

.kik-footer__pillar--highlighted .kik-footer__pillar-arrow,
a.kik-footer__pillar:hover .kik-footer__pillar-arrow,
a.kik-footer__pillar:focus-visible .kik-footer__pillar-arrow {
  display: block;
}

/* --- Body --------------------------------------------------------------- */
.kik-footer__body {
  display: flex;
  flex-direction: column;
  gap: var(--kik-footer-section-sm);
  width: 100%;
}

@media (min-width: 768px) {
  .kik-footer__body {
    gap: var(--kik-footer-section-md);
  }
}

/* Mobile stacks brand, newsletter, then the link accordions; desktop keeps the
   source order (brand, link columns, newsletter) in one row. */
.kik-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--kik-footer-section-sm);
  width: 100%;
}

.kik-footer__brand {
  order: 1;
}

.kik-footer__newsletter {
  order: 2;
}

.kik-footer__columns {
  order: 3;
}

@media (min-width: 768px) {
  .kik-footer__top {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--kik-footer-section-md);
    overflow: clip;
  }

  .kik-footer__brand,
  .kik-footer__columns,
  .kik-footer__newsletter {
    order: 0;
  }
}

/* --- Brand column ------------------------------------------------------- */
.kik-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--kik-footer-md);
  width: 100%;
}

.kik-footer__logo {
  display: block;
  width: 172px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.kik-footer__brand-text {
  margin: 0;
  font-size: var(--kik-footer-body-xsm);
  color: var(--kik-footer-muted);
}

@media (min-width: 768px) {
  .kik-footer__brand {
    flex: 0 0 152px;
    width: 152px;
  }

  .kik-footer__logo {
    width: 100%;
  }
}

/* --- Link columns ------------------------------------------------------- */
.kik-footer__columns {
  display: flex;
  flex-direction: column;
  gap: var(--kik-footer-section-sm);
  width: 100%;
}

.kik-footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--kik-footer-md);
  width: 100%;
}

/* The heading row is a button at every breakpoint so the mobile accordion has
   a real control; above 768px kik-footer.js takes it out of the tab order and
   the panel is always open, so it reads as the plain column heading it is. */
.kik-footer__column-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kik-footer__column-title {
  font-size: var(--kik-footer-body-sm);
  font-weight: 700;
  color: var(--kik-footer-text);
}

.kik-footer__chevron {
  display: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.kik-footer__column-toggle[aria-expanded="false"] .kik-footer__chevron--closed,
.kik-footer__column-toggle[aria-expanded="true"] .kik-footer__chevron--open {
  display: block;
}

.kik-footer__column-links {
  display: flex;
  flex-direction: column;
  gap: var(--kik-footer-md);
  width: 100%;
}

.kik-footer__column-links[hidden] {
  display: none;
}

.kik-footer__link {
  font-size: var(--kik-footer-body-sm);
  color: var(--kik-footer-muted);
}

.kik-footer__link:hover {
  color: var(--kik-footer-text);
}

.kik-footer__link--current {
  font-weight: 700;
  color: var(--kik-footer-accent);
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

@media (min-width: 768px) {
  .kik-footer__columns {
    flex: 0 1 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--kik-footer-section-md);
    width: auto;
  }

  .kik-footer__column {
    flex: 0 0 152px;
    width: 152px;
    gap: var(--kik-footer-md);
    overflow: clip;
  }

  .kik-footer__column-toggle {
    cursor: default;
  }

  .kik-footer__chevron {
    display: none !important;
  }

  .kik-footer__column-links {
    gap: var(--kik-footer-sm);
  }
}

/* --- Newsletter --------------------------------------------------------- */
.kik-footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--kik-footer-md);
  width: 100%;
}

.kik-footer__newsletter-heading {
  margin: 0;
  font-size: var(--kik-footer-body-sm);
  font-weight: 700;
}

.kik-footer__newsletter-text {
  margin: 0;
  font-size: var(--kik-footer-body-sm);
  color: var(--kik-footer-muted);
}

.kik-footer__newsletter-form {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0;
}

.kik-footer__email {
  flex: 1 0 0;
  min-width: 0;
  padding: 12px 16px; /* kik-spacing/12, kik-spacing/16 */
  border: 0;
  border-radius: var(--kik-radius-none, 0);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--kik-footer-text);
  font-family: inherit;
  font-size: var(--kik-footer-body-sm);
  line-height: inherit;
}

.kik-footer__email::placeholder {
  color: var(--kik-footer-text);
  opacity: 1;
}

.kik-footer__submit {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding-block: 12px; /* kik-spacing/12 */
  padding-inline: 0;
  border: 0;
  border-radius: var(--kik-radius-none, 0);
  background-color: var(--kik-footer-surface);
  cursor: pointer;
}

.kik-footer__submit img {
  display: block;
  width: 20px;
  height: 20px;
}

.kik-footer__social {
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

.kik-footer__social-link img {
  display: block;
  width: 24px;
  height: 24px;
}

@media (min-width: 768px) {
  .kik-footer__newsletter {
    flex: 1 0 0;
    min-width: 0;
    gap: var(--kik-footer-md);
  }

  .kik-footer__newsletter-text {
    width: 280px;
    max-width: 100%;
  }
}

/* --- Divider (mobile frame only) ---------------------------------------- */
.kik-footer__divider {
  width: 100%;
  height: 1px;
  background-color: var(--kik-footer-divider);
}

@media (min-width: 768px) {
  .kik-footer__divider {
    display: none;
  }
}

/* --- Bottom ------------------------------------------------------------- */
.kik-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kik-footer-section-sm);
  width: 100%;
}

@media (min-width: 768px) {
  .kik-footer__bottom {
    align-items: stretch;
    gap: var(--kik-footer-md);
  }
}

.kik-footer__locale-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.kik-footer__locales {
  display: flex;
  align-items: center;
  gap: var(--kik-footer-md);
}

.kik-footer__locale {
  display: flex;
  align-items: center;
  gap: 8px; /* kik-spacing/8 */
  font-size: var(--kik-footer-body-sm);
  color: var(--kik-footer-text);
}

.kik-footer__flag {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: cover;
}

.kik-footer__locale-chevron {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* The frames draw a white square holding the shared arrow glyph turned to
   point up — 24px on mobile, 32px on desktop. */
.kik-footer__to-top {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 4px 8px; /* kik-spacing/4, kik-spacing/8 */
  border: 0;
  border-radius: var(--kik-radius-none, 0);
  background-color: var(--kik-footer-surface);
  cursor: pointer;
}

.kik-footer__to-top img {
  display: block;
  width: 11px;
  height: 8px;
  transform: rotate(-90deg);
}

@media (min-width: 768px) {
  .kik-footer__to-top {
    width: 32px;
    height: 32px;
  }
}

.kik-footer__legal-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kik-footer-section-sm);
  width: 100%;
}

.kik-footer__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* kik-spacing/8 */
  font-size: var(--kik-footer-body-xsm);
  color: var(--kik-footer-muted);
}

.kik-footer__copyright {
  margin: 0;
}

.kik-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--kik-footer-md);
}

.kik-footer__legal-link:hover {
  color: var(--kik-footer-text);
}

.kik-footer__payments {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 8px; /* kik-spacing/8 */
  width: 100%;
  /* Mobile frame puts the card row above the legal text; desktop puts it at
     the right-hand end of the same line. */
  order: -1;
}

.kik-footer__payments img {
  display: block;
  width: 38px;
  height: 24px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .kik-footer__legal-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--kik-footer-lg);
    overflow: clip;
  }

  .kik-footer__legal {
    flex-direction: row;
    align-items: center;
    gap: var(--kik-footer-lg);
    font-size: var(--kik-footer-body-sm);
    white-space: nowrap;
  }

  .kik-footer__legal-links {
    gap: var(--kik-footer-lg);
    justify-content: flex-start;
  }

  .kik-footer__payments {
    flex-wrap: nowrap;
    width: auto;
    justify-content: flex-end;
    order: 0;
  }
}