/* Bareshoes.fr — barre de recherche. Charte du thème : encre #141414, rose #ff0066, gris chaud #f3f3f1, filets #e4e4e4, Manrope.
   Ordinateur : « pilule » qui s'étire vers la gauche, menu « ton sur ton ». Téléphone (< 992 px) : plein écran. */

/* ---- Le champ du thème, repris en main ---- */
body.bhs-actif #cpsearch_content_result,
body.bhs-actif #search_block_top .select-wrapper,
body.bhs-actif #searchbox .btn-primary { display: none !important; }
body.bhs-actif #search_block_top { position: relative; }
body.bhs-actif .searchtoggle { display: block !important; }
body.bhs-actif #searchbox { height: 100% !important; margin: 0 !important; padding: 0 !important; display: block; }
body.bhs-actif .cpsearch-main { height: 100% !important; position: relative; display: flex !important; align-items: center; }
body.bhs-actif .cpsearch-main::before { content: ""; position: absolute; left: 16px; top: 50%; width: 17px; height: 17px; margin-top: -9px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); }
body.bhs-actif .cpsearch-main { width: 100% !important; max-width: none !important; }
body.bhs-actif #search_query_top { margin: 0 !important; height: 100% !important; width: 100% !important; max-width: none !important; flex: 1 1 auto; align-self: stretch; line-height: normal !important;
  border: 0 !important; box-shadow: none !important; background: transparent !important; outline: 0;
  font-family: Manrope, Arial, sans-serif; font-size: 15px; font-weight: 600; color: #141414; caret-color: #ff0066; padding: 0 18px 0 44px !important; }
body.bhs-actif #search_query_top::placeholder { color: #767676; font-weight: 500; }
body.bhs-actif #search_query_top::-webkit-search-cancel-button { display: none; }
.bhs-fermer { display: none; border: 0; background: none; font: 700 14px Manrope, Arial, sans-serif; color: #141414; cursor: pointer; padding: 10px 12px; white-space: nowrap; }
.bhs-fermer:hover, .bhs-fermer:focus-visible { color: #ff0066; }

/* ---- Ordinateur : la pilule ---- */
@media (min-width: 992px) {
  body.bhs-actif .searchtoggle { position: absolute !important; top: -9px !important; right: -8px !important; left: auto !important;
    height: 44px !important; width: 44px !important; border-radius: 999px; background: #fff; border: 1.5px solid transparent; overflow: hidden;
    opacity: 0; pointer-events: none; z-index: 20 !important; box-shadow: 0 0 0 rgba(20, 20, 20, 0);
    transition: width .42s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, border-color .3s ease, box-shadow .3s ease; }
  body.bhs-ouvert .searchtoggle { width: min(460px, 42vw) !important; opacity: 1; pointer-events: auto; border-color: #141414;
    box-shadow: 0 6px 18px rgba(20, 20, 20, .08); }
  /* dégradé blanc qui fond la pilule dans le menu */
  body.bhs-actif #search_block_top::before { content: ""; position: absolute; top: -9px; height: 44px; right: calc(min(460px, 42vw) - 8px); width: 140px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 85%); opacity: 0; pointer-events: none; transition: opacity .35s ease; z-index: 19; }
  body.bhs-ouvert #search_block_top::before { opacity: 1; }
  /* le menu passe au second plan, « ton sur ton » */
  body.bhs-actif #_top_main_menu .top-menu > li > a, body.bhs-actif .bhs-lang { transition: color .35s ease, letter-spacing .35s ease, opacity .35s ease; }
  body.bhs-ouvert #_top_main_menu .top-menu > li > a { color: #c9c7c1 !important; letter-spacing: .02em; }
  body.bhs-ouvert .bhs-lang { opacity: 0; pointer-events: none; }
  /* menu fixe (quand on fait défiler la page) : le champ entier est affiché à droite, aligné sur la colonne de contenu ;
     gris clair au repos, il s'élargit vers la gauche et passe en blanc bordé d'encre quand on l'utilise */
  #header .header-top-main:not(.fixed) > .bhs-fixe { display: none; } /* filet de sécurité : jamais hors du menu fixe */
  .bhs-fixe { position: absolute; top: 50%; right: max(15px, calc((100% - var(--bhs-cont, 1170px)) / 2)); transform: translateY(-50%); width: 320px; height: 36px; z-index: 30; }
  .bhs-fixe #search_block_top { position: relative; width: 320px; height: 36px; float: none; padding: 0; margin: 0; }
  .bhs-fixe .search_button { opacity: 0 !important; pointer-events: none !important; }
  body.bhs-actif .bhs-fixe .searchtoggle { top: 0 !important; right: 0 !important; height: 36px !important; width: 320px !important; opacity: 1; pointer-events: auto;
    background: #f3f3f1; border-color: #f3f3f1; cursor: text; }
  body.bhs-actif .bhs-fixe .searchtoggle:hover { border-color: #d6d3ce; }
  body.bhs-ouvert .bhs-fixe .searchtoggle { width: min(460px, 42vw) !important; background: #fff; border-color: #141414; }
  body.bhs-actif .bhs-fixe #search_block_top::before { top: 0; height: 36px; right: min(460px, 42vw); }
  body.bhs-actif .bhs-fixe #search_query_top { font-size: 14px; padding-right: 12px !important; }
}

/* ---- Panneau des suggestions ---- */
.bhs-voile { position: fixed; left: 0; right: 0; bottom: 0; top: var(--bhs-haut, 140px); background: rgba(20, 20, 20, .32); z-index: 9998; }
.bhs-panneau { position: fixed; left: 0; right: 0; top: var(--bhs-haut, 140px); background: #fff; z-index: 9999; border-top: 1px solid #e4e4e4;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .10); font-family: Manrope, Arial, sans-serif; color: #141414; max-height: calc(100vh - var(--bhs-haut, 140px)); overflow: auto; overscroll-behavior: contain; }
.bhs-voile[hidden], .bhs-panneau[hidden] { display: none; }
body.bhs-ouvert .bhs-panneau { animation: bhsMonte .32s cubic-bezier(.2, .8, .2, 1) both; }
body.bhs-ouvert .bhs-voile { animation: bhsFondu .32s ease both; }
@keyframes bhsMonte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bhsFondu { from { opacity: 0; } to { opacity: 1; } }

.bhs-in { max-width: 1170px; margin: 0 auto; padding: 28px 15px 32px; }
.bhs-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.bhs-grille2 { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; }
.bhs-gauche section + section { margin-top: 24px; }
.bhs-h { margin: 0 0 14px; font: 800 12px/1.3 Manrope, Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #141414;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bhs-note { font-weight: 600; letter-spacing: 0; text-transform: none; color: #5e5e5e; }
.bhs-effacer { border: 0; background: none; padding: 6px 0; font: 600 12px Manrope, Arial, sans-serif; color: #5e5e5e; text-decoration: underline; cursor: pointer; text-transform: none; letter-spacing: 0; }
.bhs-effacer:hover { color: #ff0066; }
.bhs-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.bhs-pastille { border: 1px solid #d6d3ce; border-radius: 22px; padding: 10px 16px; font-size: 14px; font-weight: 600; line-height: 1.2;
  color: #141414 !important; text-decoration: none !important; background: #fff; transition: border-color .15s, background .15s; }
.bhs-pastille:hover, .bhs-pastille:focus-visible { border-color: #141414; background: #f3f3f1; }
.bhs-pastille.bhs-noire { background: #141414; color: #fff !important; border-color: #141414; }
.bhs-ligne { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #efefeb; font-size: 15px; color: #141414 !important; text-decoration: none !important; }
.bhs-ligne svg { color: #767676; flex-shrink: 0; }
.bhs-ligne:hover, .bhs-ligne:focus-visible { color: #ff0066 !important; }
.bhs-sugg span { color: #767676; font-size: 13px; }
.bhs-vide { margin: 0; font-size: 14px; color: #5e5e5e; }
.bhs-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bhs-type { background: #f3f3f1; border-radius: 10px; padding: 13px 14px; font-size: 14px; font-weight: 700; color: #141414 !important; text-decoration: none !important; }
.bhs-type:hover, .bhs-type:focus-visible { background: #e6e4e0; }
.bhs-produits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; }
.bhs-produit { display: flex; gap: 12px; align-items: center; color: #141414 !important; text-decoration: none !important; padding: 6px; border-radius: 10px; }
.bhs-produit:hover, .bhs-produit:focus-visible { background: #f7f7f4; }
.bhs-produit img, .bhs-img-vide { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: #f3f3f1; flex-shrink: 0; display: block; }
.bhs-infos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bhs-marque { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #5e5e5e; }
.bhs-nom { font-size: 14px; font-weight: 700; line-height: 1.3; }
.bhs-prix { font-size: 14px; font-weight: 800; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.bhs-prix s { font-weight: 500; color: #767676; }
.bhs-etat { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.bhs-ok { background: #e7f2e9; color: #1d5a2c; }
.bhs-ep { background: #f3ece6; color: #7a3b12; }
.bhs-tout { display: inline-block; margin-top: 18px; background: #141414; color: #fff !important; text-decoration: none !important; border-radius: 24px; padding: 12px 22px; font-size: 14px; font-weight: 700; }
.bhs-tout:hover, .bhs-tout:focus-visible { background: #ff0066; }
.bhs-info { display: flex; gap: 14px; align-items: flex-start; background: #f3f3f1; border-radius: 12px; padding: 16px 20px; margin-bottom: 22px; max-width: 760px; font-size: 14px; color: #3a3a3a; }
.bhs-info b { display: block; font-size: 15px; color: #141414; margin-bottom: 2px; }
.bhs-info svg { flex-shrink: 0; color: #141414; }
.bhs-aide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 22px; padding: 12px 16px; border: 1px solid #e4e4e4; border-radius: 12px; }
.bhs-aide-titre { font-size: 13px; font-weight: 800; color: #5e5e5e; }
.bhs-aide-lien { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: #141414 !important; text-decoration: underline !important; text-underline-offset: 3px; }
.bhs-aide-lien:hover, .bhs-aide-lien:focus-visible { color: #ff0066 !important; }
.bhs-panneau a:focus-visible, .bhs-panneau button:focus-visible { outline: 2px solid #ff0066; outline-offset: 2px; }

/* ---- Téléphone : plein écran (« Focus ») ---- */
@media (max-width: 991px) {
  body.bhs-actif .searchtoggle { display: none !important; }
  body.bhs-ouvert { overflow: hidden; }
  body.bhs-ouvert .searchtoggle { display: flex !important; align-items: center; gap: 4px; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
    width: auto !important; height: 64px !important; padding: 10px 6px 10px 12px; background: #fff; border-bottom: 1px solid #e4e4e4; z-index: 10001 !important;
    animation: bhsFondu .25s ease both; }
  body.bhs-ouvert #searchbox { flex: 1; height: 44px !important; border: 1.5px solid #141414; border-radius: 999px; }
  body.bhs-ouvert #search_query_top { font-size: 16px !important; }
  body.bhs-ouvert .bhs-fermer { display: block; }
  .bhs-voile { top: 0; background: #fff; z-index: 10000; }
  .bhs-panneau { top: 64px; bottom: 0; max-height: none; border-top: 0; box-shadow: none; z-index: 10000; }
  .bhs-in { padding: 18px 16px 40px; }
  .bhs-grille, .bhs-grille2 { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .bhs-produits { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .bhs-pastille { padding: 12px 16px; }
  .bhs-ligne { padding: 13px 0; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  body.bhs-actif .searchtoggle, body.bhs-actif #search_block_top::before, .bhs-panneau, .bhs-voile,
  body.bhs-actif #_top_main_menu .top-menu > li > a { transition: none !important; animation: none !important; }
}