.tyshara-splitview {
  display: flex;
  max-width: 1200px;
  gap: 2rem;
  box-sizing: border-box;
    margin-top:0 !important;      /* chevauche le margin-section du thème */
  align-items:flex-start !important; /* supprime l’align-center généré */
  height:60vh;        
}

/* Sidebar occupe toute la hauteur disponible */
.splitview-sidebar {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
    flex:0 0 280px;               /* largeur fixe (même valeur qu’actuelle) */
  max-height:60vh;
  overflow-y:auto;
}

/* Composants internes (titres + filtres) doivent se contraindre */
.splitview-sidebar > * {
  flex: 0 0 auto;
  max-height: calc(60vh - 4rem); /* Ajustement conservateur */
  overflow: hidden;
}

/* Content à droite, prend le reste de l’espace */
.splitview-content {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Grille produits dans swiper : adapte sa hauteur */
.tyshara-product-grid.swiper-container {
  flex: 1;
  height: 100%; /* Contraint à splitview-content */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ✅ PATCH Swiper – Harmonisation de l'affichage des produits */
.swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;                /* Ne pas forcer de retour à la ligne */
  align-items: stretch;             /* Pour occuper toute la hauteur du slide */
  gap: 2rem;                        /* Espace entre les vignettes */
  padding: 0 2rem 1rem;             /* Espacement horizontal + bas */
  height: auto;                     /* Laisse les slides s’adapter */
  box-sizing: border-box;          /* Évite tout débordement inattendu */
}


/* Slides à taille responsive dans l’espace dispo */
.swiper-slide {
  flex-shrink: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  box-sizing: border-box;
}

/* 3. titres + boutons un chouïa plus compacts (optionnel, test) */
#tyshara-shop-navigator .nav-title{font-size:1.4rem;}
#tyshara-shop-navigator .nav-button,
#tyshara-shop-navigator .capsule-button{font-size:.82rem;padding:.3rem .6rem;}
/* =========================================================
   PATCH ÉTAPE 2 — Harmonisation des vignettes produits
   Fichier : patch-tyshara.css  (ou dans le Customizer > CSS)
   ========================================================= */

/* ---------- 2-A. Cartes : gabarit fixe, sans puces ---------- */
.tyshara-product-grid li.product,
.tyshara-product-grid .swiper-slide{
  /* même gabarit sur desktop & tablette ; OK pour Swiper */
  width:220px !important;
  max-width:220px;
  height:360px;
  list-style:none;         /* enlève les puces Woo */
  display:flex !important; /* pour aligner le contenu */
  flex-direction:column;
  justify-content:space-between;
}

.tyshara-product-grid li.product img{
  width:100%;
  height:180px;            /* image  --> 180 px de haut */
  object-fit:cover;
  border-radius:1rem;
}

/* ---------- 2-B. Titres / prix ---------- */
.tyshara-product-grid .woocommerce-loop-product__title{
  font-size:1rem;
  line-height:1.3;
  margin:0.8rem 0 0.4rem;
  height:2.6em;           /* ↳ 2 lignes maxi */
  overflow:hidden;
}

/* ---------- 2-C. Bouton ---------- */
.tyshara-product-grid .button.add_to_cart_button{
  margin-top:auto;        /* pousse le bouton en bas de carte */
}

/* ---------- 2-D. Swiper : largeur disponible ---------- */
/* 1/3 (sidebar 280 px) + gap (3 rem) –> le reste pour Swiper */
.tyshara-splitview{align-items:flex-start;}   /* aligne les deux blocs en haut */
@media(min-width:1024px){
  .splitview-content{
    max-width:calc(100% - 280px - 3rem);
  }
}

/* Espacement interne de la bande Swiper */
#tyshara-swiper-products .swiper-wrapper{
  padding:0 2rem;
}

/* ---------- 2-E. Navigation Swiper ---------- */
#products-prev,
#products-next{
  top:50%;                        /* centre verticalement */
  transform:translateY(-50%);
}
/* z-index 1100 pour passer par-dessus les cartes */
#products-prev,
#products-next,
.swiper-button-prev,
.swiper-button-next{
  z-index:1100;
}

/* ---------- 2-F. Mobile : 1-2 cartes visibles ---------- */
@media(max-width:768px){
  .tyshara-product-grid li.product,
  .tyshara-product-grid .swiper-slide{
    width:68vw !important;        /* 1 carte quasi plein écran */
    max-width:68vw;
  }
}
/* =========================================================
   PATCH ÉTAPE 2-bis — Réglages internes de la vignette
   ========================================================= */

/* 1. Image produit : carré 150 × 150, bien contenue */
.tyshara-product-grid li.product img{
  width:150px !important;
  height:150px !important;
  margin:0 auto 0.75rem;      /* centre + petit espace sous l’image */
  border-radius:1rem;
  object-fit:cover;
}

/* 2. Titre : resserré */
.tyshara-product-grid .woocommerce-loop-product__title{
  margin:0 0 0.4rem;          /* supprime le 0.8rem haut */
  font-size:0.95rem;
}

/* 3. Prix : plus proche du titre */
.tyshara-product-grid .price{
  margin:0 0 0.8rem;
  font-size:0.95rem;
}

/* 4. Bouton : plus compact & encore lisible */
.tyshara-product-grid .button.add_to_cart_button{
  width:90%;
  padding:0.45rem 0.6rem;
  font-size:0.85rem;
  line-height:1.2;
  border-radius:1.4rem;
  background:#d9d6de;               /* soft lilac */
}
.tyshara-product-grid .button.add_to_cart_button:hover{
  background:#c6c3cb;
}