/* Zara Wear - overrides on top of the base stylesheet. */

:root {
  --zara-ink: #141414;
  --zara-muted: #6b6b6b;
  --zara-line: rgba(20, 20, 20, 0.12);
}

/* The rebuilt social grid has 4 cards, so give it its own column layout. */
.footer-social-card-block {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
}

/* Logo is an SVG wordmark: let it inherit the header's colour and stay crisp. */
.header-brand-logo {
  width: 100%;
  height: auto;
  color: var(--zara-ink);
}

.footer-title {
  letter-spacing: 0.02em;
}

/* Make sure the logo SVG inherits fill on dark footers too. */
.footer-social-card,
.footer-social-card:focus-visible {
  outline-offset: 3px;
}

/* WhatsApp card uses the brand green so it reads as its own channel. */
.footer-social-card[aria-label*="WhatsApp"] .footer-social-icon {
  color: #25d366;
}

/* Keep the four social cards aligned with the original 16:9 crop. */
.footer-social-image {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

/* Poster stand-ins for the removed background videos.
   Each replaced <video> kept the w-background-video wrapper, so mirror the
   original video rules to fill the box with a cover-fitted image. */
.zw-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: -100;
}

/* Belt-and-braces: the badge is removed from the JS bundle, but never let it
   render even if a cached copy of the runtime is used. */
.w-webflow-badge {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .footer-social-card-block {
    grid-template-columns: repeat(2, 1fr);
  }
}