/**
 * Homepage slider: render separate mobile / desktop CMS blocks.
 *
 * The home page (porto_home_5) renders two CMS blocks instead of a single
 * shared slider:
 *   - porto_homeslider_5_mobile  -> .faces-home-slider-mobile
 *   - porto_homeslider_5_desktop -> .faces-home-slider-desktop
 *
 * Visibility is toggled with CSS so both blocks ship in the markup but only the
 * relevant one is shown. The breakpoint matches Tailwind's `lg` (1024px).
 *
 * NOTE: this is a static asset (served as-is, not processed by Tailwind), so the
 * classes here are intentionally plain CSS rather than Tailwind utilities, which
 * would otherwise be purged because layout XML is not scanned by Tailwind.
 */
.faces-home-slider-mobile {
  display: block;
}

.faces-home-slider-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .faces-home-slider-mobile {
    display: none;
  }

  .faces-home-slider-desktop {
    display: block;
  }
}

/**
 * Empty product slider rule (no-flash, CSS-first).
 *
 * Mark each CMS/layout section wrapper with data-faces-section (or class
 * faces-product-section). When the slider has no products — or the widget renders
 * nothing — the section is hidden entirely (title + "Voir Plus" + slider).
 *
 * Requires a real .snap-slider inside the wrapper when products exist.
 * web/js/script.js is the fallback for browsers without :has() support.
 */
[data-faces-section]:not(:has(.snap-slider)),
.faces-product-section:not(:has(.snap-slider)) {
  display: none !important;
}