/* ── Static-copy repairs ───────────────────────────────────────────────
   These sites were Nuxt apps. We strip the JS bundle (it hydrates, fails
   against static hosting, and swaps the page for BrandCrowd's 500 screen),
   which leaves a few components that relied on JS for their layout.

   1. Swiper carousels: the slide content IS server-rendered, but without
      Swiper's JS the wrapper never gets a height or transform, so the
      section renders as a blank band. Lay the slides out statically.
   2. Mobile menu: hidden by default and opened by JS. See static-fix.js.
────────────────────────────────────────────────────────────────────── */

/* --- Carousels become a simple responsive row --- */
.swiper {
  overflow: visible !important;
  height: auto !important;
}
.swiper-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  transform: none !important;
  height: auto !important;
  gap: 2rem;
  justify-content: center;
  align-items: stretch;
}
.swiper-slide {
  width: auto !important;
  height: auto !important;
  flex: 1 1 320px;
  max-width: 520px;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
/* Pagination dots and arrows do nothing without JS — hide rather than
   leave dead controls the visitor can click. */
.swiper-pagination,
.swiper-button-next,
.swiper-button-prev {
  display: none !important;
}

/* --- Menu panel built by static-fix.js ---
   The site's own dropdown-menu--mobile ships empty (Vue filled it on click),
   so we build our own and style it here. */
.sf-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99999;
  display: none;
  flex-direction: column;
  min-width: 220px;
  max-width: 80vw;
  max-height: 100vh;
  overflow-y: auto;
  padding: 4.5rem 1.25rem 1.5rem;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.35);
}
.sf-menu.sf-menu-open { display: flex; }
.sf-menu a {
  display: block;
  padding: 0.85rem 0.25rem;
  font-size: 1.05rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}
.sf-menu a:last-child { border-bottom: 0; }
.sf-menu a:hover { opacity: 0.7; }