/* Bareshoes.fr — « Sélections de l'accueil » (module bareshoes_selections).
   Design A : carte éditoriale + carrousel ; design B : bloc à onglets. Cartes produits du thème.
   Défilement natif (doigt, pavé tactile, flèches) ; sur téléphone, rangée qui défile du doigt. */

/* Comme les autres sections de l'accueil du thème : section flottante pleine largeur. */
.bhs-sel-zone { clear: both; float: left; width: 100%; }
.bhs-sel { clear: both; float: left; width: 100%; padding: 36px 0 20px; }
.bhs-sel [hidden] { display: none !important; }

/* Sur-titre (petit texte rose au-dessus du titre) */
.bhs-sel__surtitre {
  display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #d1005a;
}

/* ---------- Rangée de produits ---------- */
.bhs-sel__piste {
  --bhs-sel-ecart: 30px; --bhs-sel-n: 4;
  /* position: relative : les éléments posés en absolu dans les cartes restent dans la rangée (sinon la page déborde sur téléphone). */
  position: relative; clear: both; display: flex; gap: var(--bhs-sel-ecart); margin: 0; padding: 0 0 6px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bhs-sel__piste::-webkit-scrollbar { display: none; }
.bhs-sel__case {
  flex: 0 0 calc((100% - (var(--bhs-sel-n) - 1) * var(--bhs-sel-ecart)) / var(--bhs-sel-n));
  min-width: 0; scroll-snap-align: start;
}
/* Cartes du thème : pas de pastilles de coloris dans les sélections (choix d'Ophélie, 30/10). */
.bhs-sel .highlighted-informations { display: none !important; }
.bhs-sel .product-miniature { margin: 0; }
/* Prix aligné à gauche sous le nom, comme dans les listes de produits du thème (.product_list … .product-bottom). */
.bhs-sel .product-bottom { padding: 0 10px; text-align: left; }

/* ---------- Flèches ---------- */
.bhs-sel__nav { display: flex; gap: 8px; }
.bhs-sel__fl {
  width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid #dcdcdc; background: #fff; color: #141414;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s, opacity .2s;
}
.bhs-sel__fl svg { display: block; width: 18px; height: 18px; flex: 0 0 auto; }
.bhs-sel__fl:hover:not(:disabled) { border-color: #141414; background: #141414; color: #fff; }
.bhs-sel__fl:disabled { opacity: .35; cursor: default; }
.bhs-sel__fl:focus-visible { outline: 2px solid #ff0066; outline-offset: 2px; }

/* ---------- Lien « Voir tout » ---------- */
.bhs-sel__tout {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #222;
  border-bottom: 1px solid #222; padding-bottom: 2px; text-decoration: none; white-space: nowrap;
}
.bhs-sel__tout:hover, .bhs-sel__tout:focus { color: #ff0066; border-color: #ff0066; text-decoration: none; }
.bhs-sel__fleche { flex: 0 0 auto; transition: transform .25s; }
.bhs-sel__tout:hover .bhs-sel__fleche { transform: translateX(3px); }

/* ---------- Design A : carte éditoriale + carrousel ---------- */
.bhs-sel-a { display: grid; grid-template-columns: minmax(0, 370px) minmax(0, 1fr); gap: 30px; align-items: stretch; }
.bhs-sel-a__carte {
  position: relative; display: block; min-height: 440px; overflow: hidden; border-radius: 6px;
  background: #141414; color: #fff; text-decoration: none; isolation: isolate;
}
.bhs-sel-a__carte:hover, .bhs-sel-a__carte:focus { color: #fff; text-decoration: none; }
.bhs-sel-a__img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%;
  transform: scale(var(--bhs-sel-z, 1)); transition: transform .6s ease;
}
.bhs-sel-a__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%); }
.bhs-sel-a__carte--sans-image .bhs-sel-a__voile { display: none; }
.bhs-sel-a__textes {
  position: absolute; left: 28px; right: 28px; bottom: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
}
.bhs-sel-a__tag {
  display: inline-block; padding: 4px 10px; border-radius: 999px; background: #ff0066; color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.bhs-sel-a__titre { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: .3px; color: #fff; }
.bhs-sel-a__texte { font-size: 14px; font-weight: 500; line-height: 1.5; color: #f1f1f1; }
.bhs-sel-a__btn {
  margin-top: 8px; height: 44px; padding: 0 20px; border-radius: 4px; background: #fff; color: #141414;
  font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; transition: background-color .25s, color .25s;
}
@media (hover: hover) {
  a.bhs-sel-a__carte:hover .bhs-sel-a__img { transform: scale(calc(var(--bhs-sel-z, 1) * 1.04)); }
  a.bhs-sel-a__carte:hover .bhs-sel-a__btn { background: #ff0066; color: #fff; }
}
a.bhs-sel-a__carte:focus-visible { outline: 2px solid #ff0066; outline-offset: 3px; }
.bhs-sel-a__droite { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.bhs-sel-a__droite .bhs-sel__nav { justify-content: flex-end; margin-bottom: 18px; }
.bhs-sel-a__droite .bhs-sel__piste { --bhs-sel-n: 3; }

/* Design A sans carte : titre à gauche, « Voir tout » et flèches à droite */
.bhs-sel__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.bhs-sel__tete-textes { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; text-align: left; }
.bhs-sel__titre { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: .3px; line-height: 1.15; color: #141414; }
.bhs-sel__sous { font-size: 14px; font-weight: 500; color: #5c5c58; letter-spacing: .3px; }
.bhs-sel__tete-actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }

/* ---------- Design B : titre à gauche, onglets en pastilles à droite (1.0.2, proposition 1) ---------- */
.bhs-sel-b__tete { clear: both; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; text-align: left; }
.bhs-sel-b__titres { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.bhs-sel-b__titre { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: .3px; line-height: 1.2; color: #141414; }
.bhs-sel-b__sous { font-size: 14px; font-weight: 500; color: #808080; letter-spacing: .3px; }
.bhs-sel-b__onglets { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex: 0 1 auto; }
.bhs-sel-b__onglet {
  height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid #dcdcdc; background: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700; color: #141414; cursor: pointer; white-space: nowrap;
  transition: border-color .2s, background-color .2s, color .2s;
}
.bhs-sel-b__onglet:hover { border-color: #141414; }
.bhs-sel-b__onglet[aria-selected="true"] { background: #141414; border-color: #141414; color: #fff; }
.bhs-sel-b__onglet:focus-visible { outline: 2px solid #ff0066; outline-offset: 2px; }
.bhs-sel-b__panneau { clear: both; }
.bhs-sel-b__panneau:focus { outline: none; }
.bhs-sel-b__cadre { position: relative; }
/* Flèches posées sur les bords de la rangée, à hauteur des photos */
.bhs-sel-b__cadre .bhs-sel__nav { position: absolute; left: -22px; right: -22px; top: 0; height: 0; z-index: 3; justify-content: space-between; pointer-events: none; }
.bhs-sel-b__cadre .bhs-sel__fl { pointer-events: auto; position: relative; top: var(--bhs-sel-milieu, 140px); transform: translateY(-50%); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.bhs-sel-b__cadre .bhs-sel__fl:disabled { opacity: 0; pointer-events: none; }
.bhs-sel-b__pied { display: flex; justify-content: center; margin-top: 24px; }

/* ---------- Tablette ---------- */
@media (max-width: 1199px) {
  .bhs-sel-a { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .bhs-sel-a__droite .bhs-sel__piste { --bhs-sel-n: 2.5; }
  .bhs-sel__piste { --bhs-sel-ecart: 20px; --bhs-sel-n: 3.5; }
  .bhs-sel-b__cadre .bhs-sel__nav { left: -12px; right: -12px; }
}

/* ---------- Téléphone : rangée qui défile du doigt (choix d'Ophélie 3A) ---------- */
@media (max-width: 767px) {
  .bhs-sel { padding: 28px 0 10px; }
  .bhs-sel__piste,
  .bhs-sel-a__droite .bhs-sel__piste {
    --bhs-sel-ecart: 14px; --bhs-sel-n: 2.2;
    /* Jusqu'aux bords de l'écran : marge du thème sur téléphone = 10 px (vérifié sur le site de test). */
    margin: 0 -10px; padding: 0 10px 6px; scroll-padding: 0 10px;
  }
  .bhs-sel__nav, .bhs-sel-b__cadre .bhs-sel__nav { display: none; }
  .bhs-sel-a { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bhs-sel-a__carte { min-height: 280px; }
  .bhs-sel-a__textes { left: 20px; right: 20px; bottom: 20px; }
  .bhs-sel-a__titre, .bhs-sel__titre { font-size: 24px; }
  .bhs-sel__tete { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  .bhs-sel-b__tete { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 16px; }
  .bhs-sel-b__titre { font-size: 24px; }
  .bhs-sel-b__onglets {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -10px; padding: 0 10px;
    scrollbar-width: none;
  }
  .bhs-sel-b__onglets::-webkit-scrollbar { display: none; }
  .bhs-sel-b__onglet { flex: 0 0 auto; }
  .bhs-sel-b__pied { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .bhs-sel__piste { scroll-behavior: auto; }
  .bhs-sel-a__img, .bhs-sel__fleche, .bhs-sel__fl, .bhs-sel-a__btn { transition: none; }
}

/* 1.0.3 (30/10/2026) : cœur des favoris sur les cartes des sélections.
   Le thème ne dessine l'icône du cœur que dans les grilles « .product_list » (rayons) ;
   dans les sélections, le bouton apparaissait au survol comme un carré blanc vide. */
.bhs-sel .product-actions-main .wishlist span {
  display: block;
  position: relative;
  width: 17px;
  height: 17px;
  font-size: 0;
  line-height: 30px;
  background-color: #000;
  -webkit-mask-image: url(/themes/PRS03054/assets/img/megnor/wishlist.svg);
  mask-image: url(/themes/PRS03054/assets/img/megnor/wishlist.svg);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 17px;
  mask-size: 17px;
}

/* 1.0.4 (30/10/2026) : 2e photo au survol, comme dans les grilles des rayons.
   Le thème ne l'affiche que dans « article.product_item » (grilles) ; les cartes des sélections sont
   dans « article.bhs-sel__case ». Même effet que le thème (fondu + dépliement horizontal). */
@media (hover: hover) and (pointer: fine) {
  .bhs-sel__case:hover img.replace-2x {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    margin: 0 auto;
  }
}