/* Noria footer (desktop-home.jpg / mobile-home.jpg bottom): ink background, sand NORIA lockup, the newsletter mini-form,
   the gold badge over the top edge. The legal row under it is ours (D-012). */
@layer components {
  .site-footer {
    position: relative;
    margin-top: 5.5rem;
    padding: 5.5rem var(--noria-edge) 2rem;
    background: var(--noria-ink);
    color: var(--noria-sand);

    a { color: inherit; }
    a:hover { color: var(--noria-gold); }
    :focus-visible { outline-color: var(--noria-sand); }
  }

  .site-footer__badge {
    position: absolute;
    top: 0;
    left: 65.5%;
    width: 10.5rem;
    height: auto;
    translate: 0 -50%;
  }

  .site-footer__main,
  .site-footer__bottom,
  .site-footer__legal {
    width: min(100%, calc(var(--noria-page) - 2 * var(--noria-edge)));
    margin-inline: auto;
  }

  .site-footer__main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
  }

  .site-footer__brand { flex: 1 1 30rem; }

  .site-footer__wordmark {
    display: block;
    width: min(40.75rem, 100%);
    height: auto;
    aspect-ratio: 396.3 / 77.26;
  }

  .site-footer__tagline { display: inline-block; margin: 1.75rem 0 0; vertical-align: middle; }

  .site-footer__social { display: inline-flex; margin: 1.75rem 0 0 3.25rem; vertical-align: middle; }

  .site-footer__hair-serum {
    display: block;
    width: 9.25rem;
    height: auto;
    aspect-ratio: 235.9 / 19.43;
  }

  .site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5.5rem;
    margin-top: -0.5rem;
    padding-right: 26%;
  }

  .site-footer__rule {
    width: 8.75rem;
    height: 2px;
    background: var(--noria-gold);
  }

  .site-footer__copyright {
    margin: 0;
    font-size: var(--noria-text-small);
    line-height: 1.4;
    letter-spacing: 0.13em;

    em { font-weight: 600; }
  }

  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(229 213 204 / 0.25);
    font-size: var(--noria-text-small);
  }

  .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;

    a, button { display: inline-block; padding-block: 0.5rem; }
  }

  .site-footer__consent-link {
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;

    &[hidden] { display: none; }
  }

  .site-footer__company { margin: 0; color: rgb(229 213 204 / 0.85); }

  .site-footer__switchers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
  }

  .site-header__currency {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .site-header__currency-select,
  .site-header__currency-submit {
    width: auto;
    padding: 0.375rem 0.75rem;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    cursor: pointer;
  }

  .site-header__currency-select option { color: var(--noria-ink); }

  @media (max-width: 63.99rem) {
    .site-footer { padding-top: 6.5rem; text-align: center; }
    .site-footer__badge { left: auto; right: var(--noria-gutter); width: 7.5rem; }
    .site-footer__main { flex-direction: column-reverse; align-items: center; gap: 3rem; }
    .site-footer__brand { flex: none; width: 100%; }
    .site-footer__wordmark { width: min(20rem, 100%); margin-inline: auto; }
    .site-footer__hair-serum { margin-inline: auto; }
    .site-footer__tagline, .site-footer__social { display: flex; justify-content: center; margin-inline: auto; }
    .site-footer__bottom { justify-content: center; padding: 0; margin-top: 2.5rem; }
    .site-footer__rule { display: none; }
    .site-footer__legal { flex-direction: column; align-items: center; }
    .site-footer__links { justify-content: center; }
  }
}