/* CSS spécifique page category */

/* page */
@media (min-width: 768px) {
  .col-md-3 {
    flex: 0 0 33% !important;
    max-width: 33% !important;
  }

  .col-md-9 {
    flex: 0 0 67% !important;
    max-width: 70% !important;
  }
}

@media (min-width: 1200px) {
  .col-md-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }

  .col-md-9 {
    flex: 0 0 75% !important;
    max-width: 75% !important;
  }
}

/* Menu catégories */
@media (min-width: 1200px) {
  .jpresta_mobile_menu_button,
  #jpresta_mobile_menu {
    display: none !important;
  }
}

/* 3) Rotation visuelle du chevron (on utilise l'icône "collapse" puisque "expand" est masquée) */
.jpresta_ps_facetedsearch_displayleftcolumn .collapse-icons .expand {
  display: inline-block;
  transition: transform .25s ease;
  transform: rotate(0deg);            /* état FERMÉ par défaut (pointe vers le bas) */
}

/* Quand c'est ouvert → remets droit (pointe vers le haut) */
.jpresta_ps_facetedsearch_displayleftcolumn
.facet-block:has(.title[aria-expanded="true"]) .collapse-icons .expand {
  transform: rotate(180deg);
}
/* ——— Forcer l’entête "mobile" à s’afficher aussi sur desktop ——— */
.jpresta_module.ps_facetedsearch #search_filters .facet-block > .title {
  display: flex !important;            /* remplace .d-md-none */
  align-items: center;
  justify-content: space-between;
}

/* Cacher définitivement les titres desktop d’origine */
.jpresta_module.ps_facetedsearch #search_filters .facet-block > .facet-title.d-none.d-md-block {
  display: none !important;
}

/* Icônes : on fait pivoter une seule chevron en fonction de l’état */
.jpresta_module.ps_facetedsearch #search_filters .facet-block > .title .collapse-icons i {
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.jpresta_module.ps_facetedsearch #search_filters .facet-block > .title.open .collapse-icons i {
  transform: rotate(180deg);
}

/* Contenu d’accordéon : on gère l’animation via height */
.jpresta_module.ps_facetedsearch #search_filters ul[id^="facet_"] {
  overflow: hidden;
  height: auto;                /* sera ajusté en JS au chargement */
  transition: height 0.26s ease, opacity 0.2s ease;
  opacity: 1;
}

/* État fermé (JS ajoute .is-collapsing) */
.jpresta_module.ps_facetedsearch #search_filters ul[id^="facet_"].is-collapsed {
  height: 0 !important;
  opacity: 0.0;
}

/* Optionnel : hover sur le header */
.jpresta_module.ps_facetedsearch #search_filters .facet-block > .title:hover {
  background: #f8fafc;
}

/* Garde ton style existant pour .title et .facet-label… */

/* 2) Annule le style Bootstrap "custom-control" qui masque les inputs */
#search_filters .custom-control-input {
  position: static !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  margin-right: 0.5rem !important;
}

/* 3) Désactive les pseudo-éléments Bootstrap du label */
#search_filters .custom-control-label::before,
#search_filters .custom-control-label::after {
  display: none !important;
  content: none !important;
}

/* 4) Clique confortable */
#search_filters .facet-label,
#search_filters .custom-control-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* ===========================
   Faceted Search – Modern UI (no CSS vars)
   Scope: .jpresta_module.ps_facetedsearch
   =========================== */

.jpresta_module.ps_facetedsearch {
  color: #1f2328;
}

/* Sidebar sticky (optionnel : commente si besoin) */
.jpresta_module.ps_facetedsearch .jblock-content {
  position: sticky;
  top: 16px;
}

/* Titre bloc "Filter By" */
.jpresta_module.ps_facetedsearch .jblock-title span {
  display: block;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
  font-weight: 600;
  padding: 8px 0 6px;
  color: #1f2328;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 10px;
}

/* Conteneur de tous les facets */
.jpresta_module.ps_facetedsearch #search_filters {
  display: grid;
  gap: 14px;
  padding-right: 10px;
}

/* --- Confinement à l'intérieur du conteneur parent --- */
.jpresta_module.ps_facetedsearch,
.jpresta_module.ps_facetedsearch * {
  box-sizing: border-box;
  max-width: 100%;
  padding: 0 0 0 2px;
}

/* Évite toute barre de scroll horizontale accidentelle */
.jpresta_module.ps_facetedsearch .content,
.jpresta_module.ps_facetedsearch .jblock,
.jpresta_module.ps_facetedsearch #search_filters {
  width: auto;
  max-width: 100%;
  overflow-x: hidden;
}

/* Les cartes et listes ne “débordent” pas avec leur padding/border */
.jpresta_module.ps_facetedsearch .facet-block,
.jpresta_module.ps_facetedsearch ul[id^="facet_"] {
  width: 100%;
  max-width: 100%;
}

/* Grilles “Colour” : colonnes flexibles qui ne dépassent jamais */
.jpresta_module.ps_facetedsearch #facet_20713,
.jpresta_module.ps_facetedsearch #facet_66652 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 992px) {
  .jpresta_module.ps_facetedsearch #facet_20713,
  .jpresta_module.ps_facetedsearch #facet_66652 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Lien de ligne : autorise le wrapping du texte et évite l’écrasement du compteur */
.jpresta_module.ps_facetedsearch .facet-label a {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere; /* gère les mots très longs */
  word-break: break-word;
}
.jpresta_module.ps_facetedsearch .facet-label .magnitude {
  flex: 0 0 auto; /* le pill ne rétrécit pas, le texte wrappe avant */
  max-width: 48%;
}

/* Inputs et swatches : n’empiètent pas sur la grille */
/* .jpresta_module.ps_facetedsearch .custom-checkbox,
.jpresta_module.ps_facetedsearch .custom-radio {
  max-width: 28px;
} */
.jpresta_module.ps_facetedsearch .custom-checkbox .color {
  max-width: 18px;
}

/* Titre mobile clicable : pas de débordement si icônes longues */
.jpresta_module.ps_facetedsearch .title {
  width: 100%;
  max-width: 100%;
}
.jpresta_module.ps_facetedsearch .title .facet-title {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Card facet */
.jpresta_module.ps_facetedsearch .facet-block {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 14px;
  padding: 5px;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
  overflow-x: auto;
}

/* Titres facet (desktop) */
.jpresta_module.ps_facetedsearch .facet-title {
  margin: 6px 8px 2px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2328;
}

/* Titres facet (mobile toggler) */
.jpresta_module.ps_facetedsearch .title {
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.jpresta_module.ps_facetedsearch .title .facet-title {
  margin: 0;
  font-weight: 600;
}
.jpresta_module.ps_facetedsearch .title .collapse-icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.8;
}
/* Icônes d’ouverture/fermeture (si même structure que ton HTML) */
.jpresta_module.ps_facetedsearch .collapse.show ~ .title .expand,
.jpresta_module.ps_facetedsearch .collapse:not(.show) ~ .title .collapse {
  display: none;
}

/* UL reset */
.jpresta_module.ps_facetedsearch ul[id^="facet_"] {
  list-style: none;
  margin: unset;
  padding: 6px;
  border-radius: 10px;
}

/* Élément de filtre (ligne) */
.jpresta_module.ps_facetedsearch .facet-label {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
}
.jpresta_module.ps_facetedsearch .facet-label:hover {
  background: #f6f7f9;
}

/* Lien & texte */
.jpresta_module.ps_facetedsearch .facet-label a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  color: #1f2328;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.35;
}

/* Compteur (pill) */
.jpresta_module.ps_facetedsearch .facet-label .magnitude {
  background: #eef2f6;
  color: #334155;
  border: 1px solid #e9ecef;
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1;
  padding: 6px 8px;
  margin-left: 8px;
}

/* Checkbox / Radio */
.jpresta_module.ps_facetedsearch .custom-checkbox,
.jpresta_module.ps_facetedsearch .custom-radio {
  position: relative;
  width: 20px;
  height: 20px;
  display: flex;
  place-items: center;
  justify-content: space-between;
}

.jpresta_module.ps_facetedsearch .facet .custom-checkbox:has(.color) {
  position: relative;
  width: 30%;
  height: 20px;
  display: flex;
  place-items: center;
  justify-content: space-between;
}

#search_filters .facet .facet-label a {
  white-space: normal;
}

#search_filters .facet .facet-label .custom-checkbox,
#search_filters .facet .facet-label .custom-radio {
  top: unset;
}



.su-os-track input {
  width: 100%;
}

/* Piste unique */
.su-price-track {
  position: relative;
  height: 28px;
  margin: 10px 6px 14px;
}
.su-price-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  background: #e5e7eb; /* piste grise unique */
  border-radius: 999px;
}

/* Segment actif (ton JS règle left/right en %) */
.su-price-active {
  position: absolute;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  background: #0075ff; /* couleur du segment sélectionné */
  border-radius: 999px;
  left: 0;
  right: 100%;
  pointer-events: none;
}

.su-price-track input {
  border: unset !important;
}

/* Superposition parfaite des 2 range + piste native masquée */
.su-price-track .su-range {
  position: absolute;
  inset: 0; /* top:0 right:0 bottom:0 left:0 */
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent !important;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none; /* on ne clique que sur les thumbs */
  outline: none;
  border: 0;
}
/* masquer la piste native */
.su-price-track .su-range::-webkit-slider-runnable-track {
  background: transparent;
  height: 4px;
  border: 0;
}
.su-price-track .su-range::-moz-range-track {
  background: transparent;
  height: 4px;
  border: 0;
}
.su-price-track .su-range::-ms-track {
  background: transparent;
  color: transparent;
  border: 0;
}

/* Poignées (clickables) */
.su-price-track .su-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0075ff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #0075ff;
  margin-top: -6px; /* centre sur piste 4px */
  cursor: pointer;
  pointer-events: auto; /* clics autorisés */
}
.su-price-track .su-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0075ff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #0075ff;
  cursor: pointer;
  pointer-events: auto;
}

/* Empilement : la poignée "max" au-dessus si chevauchement */
.su-price-track .su-range-min {
  z-index: 2;
}
.su-price-track .su-range-max {
  z-index: 3;
}

/* (facultatif anciens Edge/IE) */
.su-price-track .su-range::-ms-fill-lower,
.su-price-track .su-range::-ms-fill-upper {
  background: transparent;
}

.jpresta_module.ps_facetedsearch .custom-checkbox input,
.jpresta_module.ps_facetedsearch .custom-radio input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid #e9ecef;
  border-radius: 5px; /* radio override plus bas */
  background: #ffffff;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background 0.18s ease;
}
.jpresta_module.ps_facetedsearch .custom-radio input {
  border-radius: 999px;
}

.jpresta_module.ps_facetedsearch .custom-checkbox input:focus-visible,
.jpresta_module.ps_facetedsearch .custom-radio input:focus-visible,
.jpresta_module.ps_facetedsearch .facet-label a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
  border-color: #0ea5e9;
  border-radius: 10px;
}

/* Checkmark Material icon déjà présent dans .ps-shown-by-js */
.jpresta_module.ps_facetedsearch .custom-checkbox .ps-shown-by-js,
.jpresta_module.ps_facetedsearch .custom-radio .ps-shown-by-js {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.jpresta_module.ps_facetedsearch
  .custom-checkbox
  input:checked
  + .ps-shown-by-js,
.jpresta_module.ps_facetedsearch .custom-radio input:checked + .ps-shown-by-js {
  opacity: 1;
  transform: scale(1);
}
.jpresta_module.ps_facetedsearch .custom-checkbox input:checked,
.jpresta_module.ps_facetedsearch .custom-radio input:checked {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

/* Ligne “sélectionnée” (supporte :has) */
.jpresta_module.ps_facetedsearch label.facet-label:has(input:checked) {
  background: #f8f9fb; /* approximation douce */
  box-shadow: inset 0 0 0 1px #e9ecef;
}

/* Swatches Couleurs */
.jpresta_module.ps_facetedsearch .custom-checkbox .color {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: inline-block;
}
.jpresta_module.ps_facetedsearch .custom-checkbox .texture {
  background-size: cover;
  background-position: center;
}

/* Grille compacte pour facets "Colour" (si beaucoup d’options) */
.jpresta_module.ps_facetedsearch .facet-block:has(#facet_20713),
.jpresta_module.ps_facetedsearch .facet-block:has(#facet_66652) {
  padding-bottom: 8px;
}
.jpresta_module.ps_facetedsearch #facet_20713,
.jpresta_module.ps_facetedsearch #facet_66652 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
@media (min-width: 992px) {
  .jpresta_module.ps_facetedsearch #facet_20713,
  .jpresta_module.ps_facetedsearch #facet_66652 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.jpresta_module.ps_facetedsearch #facet_20713 li,
.jpresta_module.ps_facetedsearch #facet_66652 li {
  margin: 0; /* grid gère l’espacement */
}

/* Barre des filtres actifs (chips) – si tu actives l’affichage */
.jpresta_module.ps_facetedsearch #js-active-search-filters {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 2px;
}
.jpresta_module.ps_facetedsearch #js-active-search-filters .filter-block {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef2f6;
  color: #334155;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.85rem;
}
.jpresta_module.ps_facetedsearch
  #js-active-search-filters
  .filter-block
  .close {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  cursor: pointer;
}

/* État disabled */
.jpresta_module.ps_facetedsearch li[disabled],
.jpresta_module.ps_facetedsearch input[disabled] ~ .ps-shown-by-js,
.jpresta_module.ps_facetedsearch input[disabled] ~ a {
  opacity: 0.5;
  cursor: not-allowed !important;
}

/* Petites finitions */
.jpresta_module.ps_facetedsearch .facet-block + .facet-block {
  margin-top: 0;
}
.jpresta_module.ps_facetedsearch .facet-label a._gray-darker {
  color: #1f2328;
}
.jpresta_module.ps_facetedsearch .facet-label a._gray-darker:hover {
  text-decoration: none;
}

.sub-category .category-miniature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /*background: radial-gradient(
    circle at 50% 50%,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.38) 20%,
    rgba(0, 0, 0, 0.22) 30%,
    rgba(0, 0, 0, 0.1) 40%,
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0) 60%
  );*/

  background-image: linear-gradient(
    to top,
    transparent,
    transparent 68%,
    rgba(0, 0, 0, 0.6) 98%
  );
}


.sub-category .category-miniature{
  position:relative;
  display:inline-flex;
  align-items:center;
  color:#fff;
  border:3px solid transparent;

  /* bord cuivre à transitions douces */
  
}

/* (optionnel) micro rotation au hover pour un reflet vivant */
.sub-category .category-miniature{ transition:background .25s ease; }
.sub-category .category-miniature:hover{
  background:
    linear-gradient(#0000,#0000) padding-box,
    /* couche 1 : dégradé cuivre appliqué AU NIVEAU border-box */
    conic-gradient(
      from 8deg,
      #90603a 0deg,
      #b97a53 12deg,
      #d69b78 24deg,
      #e9b996 36deg,
      #ffd9bd 46deg,   /* bande de lumière */
      #dfa786 58deg,
      #b87450 90deg,
      #9a603f 120deg,
      #d49a78 156deg,
      #f1c8a9 170deg,  /* 2e highlight */
      #b77551 200deg,
      #955e3c 232deg,
      #c68866 266deg,
      #f0c6a6 286deg,  /* micro éclat */
      #a36844 316deg,
      #90603a 360deg
    ) border-box;
}

/* Conteneur : masque le débordement pendant le zoom */
.sub-category .category-miniature {
  overflow: hidden;
}

/* Image : prépare l’animation */
.sub-category .category-miniature img {
  display: block;               /* évite l’espace inline */
  width: 100%;
  height: 100%;
  object-fit: cover;            /* couvre le cadre sans déformer */
  transform: scale(1);          /* état initial */
  transition: transform .45s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
}

/* Hover : ne zoome QUE l’image */
.sub-category .category-miniature:hover img {
  transform: scale(1.06);       /* ajuste 1.04–1.12 selon l’effet souhaité */
}

/* Accessibilité clavier (optionnel) */
.sub-category .category-miniature:focus-visible img {
  transform: scale(1.06);
}

/* Réduit l’animation si l’utilisateur préfère */
@media (prefers-reduced-motion: reduce) {
  .sub-category .category-miniature img {
    transition: none;
  }
}

/* Zone du nom (ancrée en bas, au-dessus de l'overlay) */
.sub-category .cm-name {
  z-index: 2; /* au-dessus du halo */
}

/* Lien du titre */
.sub-category .cm-name a {
  /* légère ombre pour lisibilité sans assombrir l’image */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Responsif */
@media (min-width: 576px) {
  .sub-category .cm-name a {
    font-size: 15px;
  }
}
@media (min-width: 992px) {
  .sub-category .cm-name a {
    font-size: 16px;
  }
}

/* ---------- Catégories / tuiles ---------- */
body .col-3.sub-category {
  -ms-flex: 0 0 100%;
  -webkit-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-bottom: 3%;
}

.category-miniature {
  width: fit-content;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

@media (min-width: 768px) {
  .col-3.sub-category {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (min-width: 1025px) {
  .col-3.sub-category {
    flex: 0 0 33.33333% !important;
    max-width: 33.33333% !important;
  }
}

#jpresta_block_category .category-miniature img {
  max-width: 277px !important;
  height: auto !important;
}
body .cm-name {
  position: absolute !important;
  top: 5% !important;
  color: #ffffff !important;
  justify-content: center;
  width: 100%;
}

#jpresta_block_category .category-miniature .cm-name {
  text-align: left;
  padding-left: 15px;
}
.cm-name a {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

#jpresta_block_category .category-description {
  margin: 0 0 0 0 !important;
}
/* .category-sunglasses .category-description {
    font-weight: 400 !important;
    font-size: .845rem !important;
    line-height: 1.6rem !important;
} */
.category-description {
    font-weight: 400 !important;
    font-size: 1rem !important;
    line-height: 1.6rem !important;
}

/* .category-golf .category-description {
    font-weight: 400 !important;
    font-size: .9rem !important;
    line-height: 1.6rem !important;
} */
/* div#jpresta_block_category div div div:nth-child(2) {
    max-height: 200px;
} */

@media (min-width: 992px) {
  #jpresta_block_category .category-description {
    margin: 0 295px 0 0 !important; /* comme l’original desktop */
  }
}

/* blocs de fond illustrés */
body .col-12 > div[style*="background"] {
  -webkit-border-radius: 16px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background-position: right top !important;
  background-size: contain !important;
}

.category-description {
  padding-top: 75%;
}

@media (min-width: 1200px) {
  body .col-12 > div[style*="background"] {
    -webkit-border-radius: 16px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  .category-description {
    padding-top: unset;
  }
}
/* panneau texte secondaire (2e enfant) */
/* .category-sunglasses #jpresta_block_category .row .col-12 > *:nth-child(2), .category-golf #jpresta_block_category .row .col-12 > *:nth-child(2), .category-watches #jpresta_block_category .row .col-12 > *:nth-child(2) {
  background-color: #f5f5f5 !important;
  padding: 15px 10px !important;
} */



#jpresta_block_category .row .col-12 > *:nth-child(2) {
  background-color: #f5f5f5 !important;
  padding: 25px !important;
}

/* product */
.pm-flag.out_of_stock {
	display: none;
}