/* ================================================
   📱 shop-mobile.css — Responsive boutique Tyshara
   Version mobile pour splitview-wrapper, navigator, produits
   ================================================ */

@media (max-width: 48rem) {

  /* 🌿 Structure splitview mobile : vertical */
  .tyshara-splitview {
    display: block !important;
    padding: 0 var(--space-sm);
           box-sizing: border-box;
  }

  .splitview-sidebar,
  .splitview-content {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
         box-sizing: border-box;
    display: block !important;
  }

  .splitview-sidebar {
    margin-bottom: var(--space-md);
  }

  /* 🌟 Navigator : boutons lisibles */
  .tyshara-navigator .nav-title {
    font-size: var(--fs-md);
    padding: var(--space-xs) 0;
  }

  .tyshara-navigator .nav-button,
  .tyshara-navigator .capsule-button {
    font-size: var(--fs-sm);
    padding: var(--space-xs) var(--space-sm);
    margin: var(--space-xxs) 0;
    display: inline-block;
  }

  .tyshara-navigator .nav-toggle {
    margin-top: var(--space-xs);
  }

  /* 🛍 Grille produits Swiper mobile */
  .tyshara-shop-products {
    overflow-x: hidden;
  }

  .tyshara-product-grid.swiper-container {
    width: 100% !important;
    overflow: visible !important;
  }

  .tyshara-product-grid .swiper-wrapper {
    flex-wrap: nowrap !important;
    gap: var(--space-sm);
    padding-inline: var(--space-sm);
  }

  .tyshara-product-grid .swiper-slide {
    width: 80vw;
    max-width: 300px;
    flex: 0 0 auto;
  }

  .tyshara-product-grid .ty-product-card {
    width: 100%;
    margin-inline: auto;
  }

  /* ⬅️➡️ Flèches navigation Swiper */
  .swiper-button-prev,
  .swiper-button-next {
    display: none !important;
  }

  /* 🧾 Message "aucun produit" */
  .tyshara-feedback {
    font-size: var(--fs-sm);
    padding: var(--space-md);
    text-align: center;
  }
}
  /* ✅ Anti-chevauchement : annule les hauteurs forcées du desktop */
  .tyshara-splitview,
  .splitview-content,
  .tyshara-product-grid.swiper-container {
    height: auto !important;
    min-height: 0 !important;
  }
/* ✅ Patch mobile : class-guidances-model */
.open-guidances-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);         /* espace vertical entre les blocs */
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft); /* ou autre selon ton thème */
  width: 100%;
  box-sizing: border-box;
}

.open-guidances-modal > * {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-bg-pale); /* facultatif */
  font-size: var(--fs-sm);
}