/*
 * Magia Flory — one storefront footer everywhere, 2026-08-16.
 *
 * The homepage dark-green footer is the canonical storefront footer. This file
 * is loaded after page-specific layers so catalog, content, account and auth
 * pages cannot restyle it independently.
 */

.site-footer {
  position: relative;
  padding: 85px 0 24px !important;
  overflow: hidden;
  color: var(--white, #fff) !important;
  border-top: 0 !important;
  background: var(--green-deep, #263a1e) !important;
}

.site-footer::before {
  position: absolute;
  inset: 0;
  content: "";
  background: url("../images/paper.webp") center / 800px repeat;
  opacity: .06;
  mix-blend-mode: screen;
  pointer-events: none;
}

.site-footer .container {
  width: min(calc(100% - 64px), var(--container)) !important;
  margin-inline: auto !important;
}

.site-footer .footer-top,
.site-footer .footer-bottom {
  position: relative;
  z-index: 1;
}

.site-footer .footer-top.container {
  display: grid !important;
  padding-top: 0 !important;
  padding-bottom: 70px !important;
  grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(145px, .8fr)) minmax(190px, 1.1fr) !important;
  align-items: start !important;
  gap: 45px !important;
}

.site-footer .footer-brand img {
  display: block;
  width: 240px !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 0 22px !important;
  opacity: 1 !important;
  filter: none !important;
}

.site-footer .footer-brand p {
  max-width: 300px;
  margin: 0 0 22px !important;
  color: rgba(255,255,255,.62) !important;
  font-size: .95rem !important;
  line-height: 1.6 !important;
}

.site-footer .socials {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  margin-top: 25px !important;
}

.site-footer .socials a {
  display: grid !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  place-items: center;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 50% !important;
  background: transparent !important;
  transition: color var(--transition), background var(--transition), transform var(--transition) !important;
}

.site-footer .socials svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor;
}

.site-footer .footer-top > div:not(.footer-brand) {
  display: flex !important;
  align-items: flex-start !important;
  flex-direction: column !important;
  gap: 11px !important;
}

.site-footer .footer-top h3 {
  margin: 5px 0 22px !important;
  color: #fff !important;
  font-family: var(--ui) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}

.site-footer .footer-top a,
.site-footer .footer-top span {
  color: rgba(255,255,255,.68) !important;
  font-size: .92rem !important;
  line-height: 1.45 !important;
  text-decoration: none;
}

.site-footer .footer-contact .footer-phone {
  color: #fff !important;
  font-family: var(--display) !important;
  font-size: 1.25rem !important;
}

.site-footer .footer-bottom.container {
  display: grid !important;
  min-height: 70px !important;
  padding: 0 !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  justify-content: stretch !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
  text-align: center !important;
}

.site-footer .footer-copyright {
  display: block !important;
  width: 100% !important;
  margin: 0 auto !important;
  color: rgba(255,255,255,.58) !important;
  font-size: .72rem !important;
  text-align: center !important;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer .footer-top a:hover {
    color: #fff !important;
  }

  .site-footer .socials a:hover {
    color: var(--green-deep, #263a1e) !important;
    background: #fff !important;
    transform: translateY(-2px) !important;
  }
}

.site-footer a:focus-visible {
  outline: 2px solid rgba(255,255,255,.72) !important;
  outline-offset: 4px;
}

@media (max-width: 1120px) {
  .site-footer .footer-top.container {
    grid-template-columns: minmax(230px, 1.3fr) repeat(2, minmax(160px, 1fr)) !important;
    gap: 40px 32px !important;
  }
}

@media (max-width: 760px) {
  .site-footer {
    padding-top: 65px !important;
  }

  .site-footer .container {
    width: min(calc(100% - 30px), var(--container)) !important;
  }

  .site-footer .footer-top.container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 35px 24px !important;
    padding-bottom: 52px !important;
  }

  .site-footer .footer-brand,
  .site-footer .footer-contact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .site-footer .container {
    width: min(calc(100% - 24px), var(--container)) !important;
  }

  .site-footer .footer-top.container {
    grid-template-columns: 1fr !important;
  }

  .site-footer .footer-brand,
  .site-footer .footer-contact {
    grid-column: auto;
  }

  .site-footer .footer-brand img {
    width: 210px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer *,
  .site-footer *::before,
  .site-footer *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}