/* Filtre Taille en pastilles depliees + compactage mobile du bloc filtres — Japean.
   S'applique par-dessus les facettes natives (ps_facetedsearch), sans les remplacer. */

/* 1) la section Taille est ouverte d'office et son en-tete devient un simple titre */
.japean-catalog-filters .jp-size-open .accordion-button{
  pointer-events:none;background:none;box-shadow:none;padding-bottom:6px;
}
.japean-catalog-filters .jp-size-open .accordion-button::after{display:none;}

/* 2) les options de taille en pastilles */
.japean-catalog-filters .jp-size-open .accordion-body{padding-top:2px;}
.jp-size-chips{display:flex;flex-wrap:wrap;gap:7px;}
.jp-size-chips .search-filters__link,
.jp-size-chips a.js-search-link{
  display:inline-flex;align-items:baseline;gap:4px;
  min-width:42px;justify-content:center;
  padding:8px 12px;border:1px solid #d5d5dc;border-radius:8px;
  background:#fff;color:#141416;text-decoration:none;
  font-size:14px;font-weight:600;line-height:1;white-space:nowrap;
  transition:border-color .12s,background .12s,color .12s;
}
.jp-size-chips a:hover{border-color:#141416;}
/* pastille active (facette selectionnee) */
.jp-size-chips a.jp-chip-on{background:#141416;border-color:#141416;color:#fff;}
/* compteur discret */
.jp-size-chips .search-filters__magnitude{font-size:11px;font-weight:400;opacity:.55;}
/* tailles enfants / rares : reléguées visuellement */
.jp-size-chips a.jp-chip-rare{opacity:.55;font-weight:500;}

@media(max-width:768px){
  /* 3) compactage : le bloc filtres prend moins de hauteur avant les produits */
  .japean-catalog-filters{gap:8px;}
  .jp-size-chips{gap:6px;}
  .jp-size-chips .search-filters__link{padding:7px 10px;font-size:13.5px;min-width:38px;}
  /* les autres accordeons restent compacts */
  .japean-catalog-filters .accordion-button{padding-top:8px;padding-bottom:8px;font-size:14px;}
}

/* tailles rares repliees derriere un "+N" pour ne pas repousser les produits */
.jp-size-chips.jp-has-rare a.jp-chip-rare{display:none;}
.jp-size-chips.jp-show-rare a.jp-chip-rare{display:inline-flex;}
.jp-size-more{
  padding:8px 11px;border:1px dashed #b9b9c2;border-radius:8px;background:#fff;
  color:#666;font-size:13px;font-weight:600;line-height:1;cursor:pointer;
}
.jp-size-more:hover{border-color:#141416;color:#141416;}
@media(max-width:768px){
  .jp-size-more{padding:7px 10px;font-size:12.5px;}
}

/* --- compactage mobile de l'en-tete de categorie : remonter les produits --- */
@media(max-width:768px){
  /* le bloc d'intro garde son texte (valeur SEO) mais respire moins */
  .japean-category-hero{padding-top:14px !important;padding-bottom:10px !important;}
  .japean-category-hero__title{margin-bottom:6px !important;}
  /* le paragraphe d'intro est tronque a 2 lignes, depliable au tap */
  .japean-category-hero__text,
  .japean-category-hero p{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;margin-bottom:6px;
  }
  .japean-category-hero.jp-hero-open .japean-category-hero__text,
  .japean-category-hero.jp-hero-open p{-webkit-line-clamp:unset;overflow:visible;}
  .jp-hero-toggle{
    background:none;border:none;padding:2px 0;color:#666;
    font-size:12.5px;text-decoration:underline;cursor:pointer;
  }
  /* fil d'ariane plus compact */
  .japean-bc{padding-top:6px !important;padding-bottom:6px !important;}
}

/* --- banniere de categorie compactee sur mobile ---
   Objectif : remonter les produits au-dessus de la ligne de flottaison.
   L'image reste (identite visuelle), sa hauteur est simplement reduite. */
@media(max-width:768px){
  /* la banniere : on neutralise min-height (une regle plus specifique impose 300px)
     et on borne la hauteur. L'image de fond reste, simplement moins haute. */
  .japean-category-hero,
  body.page-category .japean-category-hero,
  .category__header .japean-category-hero{
    aspect-ratio:auto !important;
    min-height:150px !important;
    height:150px !important;
    max-height:150px !important;
    overflow:hidden;
  }
  .japean-category-hero__shade{min-height:0 !important;height:auto !important;}
  .japean-category-hero__content{padding-top:10px !important;padding-bottom:10px !important;}
  .japean-category-hero__title{font-size:1.35rem !important;line-height:1.2 !important;}
}

/* --- banniere categorie : meme breakpoint que le theme (767.98px) pour gagner la cascade.
   Le theme impose min-height:300px dans @media(max-width:767.98px). --- */
@media (max-width: 767.98px){
  .japean-category-hero,
  .category__header .japean-category-hero,
  body.page-category .japean-category-hero,
  .japean-category-hero.japean-category-hero--dark,
  .japean-category-hero.japean-category-hero--light{
    aspect-ratio:auto !important;
    min-height:150px !important;
    height:150px !important;
    max-height:150px !important;
    overflow:hidden !important;
  }
  .japean-category-hero__shade{min-height:0 !important;height:auto !important;}
  .japean-category-hero__content{padding-top:10px !important;padding-bottom:12px !important;}
  .japean-category-hero__title{font-size:1.3rem !important;line-height:1.2 !important;}
}

/* --- neutralise le style INLINE du template : `body.page-category .japean-category-hero
   { min-height:300px !important }`. On monte la specificite (html body + 2 classes). --- */
@media (max-width: 767.98px){
  html body.page-category .japean-category-hero.japean-category-hero--dark,
  html body.page-category .japean-category-hero.japean-category-hero--light,
  html body.page-category .category__header .japean-category-hero,
  html body .category__header .japean-category-hero{
    min-height:150px !important;
    height:150px !important;
    max-height:150px !important;
    aspect-ratio:auto !important;
    overflow:hidden !important;
  }
}