/*  ───────────────────────────────────────────────────────────────
    AlterSearch – barre de recherche + menu d’autocomplétion
    IMPORTANT:
    - Desktop (>=768): widget replié par défaut, s’ouvre via .open
    - Mobile (<768): widget toujours visible (c’est le layout qui décide où il est)
    ───────────────────────────────────────────────────────────────*/

/*=========================================================
  0. VISIBILITÉ RESPONSIVE
=========================================================*/


@media (max-width: 767.98px) {
    .altersearch-widget{
        max-height:none;
        opacity:1;
        overflow:visible;
    }
}

/*=========================================================
  0bis. FIX : ton header-top est un panneau mobile, on le force visible en desktop
  (sinon : plus de logo/menu/panier/recherche en desktop)
=========================================================*/
@media (min-width: 768px){
    #nav-top-menu-mobile,
    #nav-top-menu-mobile[aria-hidden="true"]{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        transform:none !important;
        position:static !important;
        height:auto !important;
    }
}

/*=========================================================
  1. BARRE
=========================================================*/
.altersearch-widget{ position:relative; }

/*=========================================================
  2. INPUT + ICÔNE LOUPE
=========================================================*/
.altersearch-widget .input-with-icon{
    position:relative;
    margin:0 auto;
    max-width:1140px;
    padding:0;
}

.altersearch-widget .icon-inside-input{
    position:absolute;
    top:50%;
    right:1rem;
    width:18px;
    height:18px;
    transform:translateY(-50%);
    cursor:pointer;
    background:url("../img/search-icon.svg") center/contain no-repeat;
}

/* ASR-01 — loading state : the magnifier becomes a spinner while a suggestion
   request is in flight (class toggled by altersearch-v2.js). */
.altersearch-widget.as-loading .icon-inside-input{
    background-image:none;
    border:2px solid rgba(255,255,255,0.3);
    border-top-color: var(--as-white, #fff);
    border-radius:50%;
    cursor:default;
    animation:as-spin .6s linear infinite;
}

@keyframes as-spin{
    to{ transform:translateY(-50%) rotate(360deg); }
}

/* ASR follow-up — honest degraded state for the autocomplete. Shown by
   altersearch-v2.js only when the suggestion endpoint reports unavailable:true
   (catalogue query failed server-side). Self-contained amber notice pill so it
   stays legible on any header background; hidden by default. */
.altersearch-hint{
    margin-top:6px;
    padding:6px 10px;
    border-radius:6px;
    font-size:13px;
    line-height:1.3;
    color:#7a4f00;
    background:#fff4e0;
    border:1px solid #f0d28a;
}
.altersearch-hint[hidden]{ display:none; }

.altersearch-widget .input-with-icon input{
    width:100%;
    height: var(--as-input-height-md, 44px);
    background: rgba(255, 255, 255, 0.06);
    color: var(--as-white, #fff);

    padding: 0 44px 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--as-radius-small, 3px);
    font-size: 14px;
    line-height: 1.4;
    transition: border-color var(--as-transition-fast, 120ms ease),
                box-shadow var(--as-transition-fast, 120ms ease),
                background-color var(--as-transition-fast, 120ms ease);
}

.altersearch-widget .input-with-icon input::placeholder{
    color: rgba(255, 255, 255, 0.65);
}

.altersearch-widget .input-with-icon input:hover{
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
}

.altersearch-widget .input-with-icon input:focus,
.altersearch-widget .input-with-icon input:focus-visible{
    outline: none;
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--as-amaranth, #E62249);
    box-shadow: 0 0 0 3px var(--as-amaranth-soft, rgba(230, 34, 73, .22));
}

/*=========================================================
  3. MENU RÉSULTATS (jQuery UI)
=========================================================*/
.ui-autocomplete.ui-menu{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;

    position:absolute!important;
    width:1100px;
    max-width:100%;
    background:#EDEDF3;

    padding:0 30px;
    overflow-y:auto;
    max-height:calc(100vh - 120px);
    scrollbar-width:thin;
    scrollbar-color:#0F0F0F #EDEDF3;

    border-top-left-radius:0;
    border-top-right-radius:0;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
}

.ui-autocomplete.ui-menu .ui-menu-item{
    width:48%;
    max-width:500px;
    height:168px;
    margin:15px 5px;
    list-style:none;
    border:none;
}

.ui-autocomplete.ui-menu .ui-menu-item:hover{ cursor:pointer; }

.ui-autocomplete.ui-menu.animate-in{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

.ui-autocomplete.ui-menu.search-fixed{
    position:fixed !important;
    top:60px;
}

/*=========================================================
  4. ITEMS
=========================================================*/
.altersearch-widget .ui-menu .ui-menu-item{
    width:45%;
    max-width:500px;
    height:168px;
    margin:8px;
    list-style:none;
    border:none;
}

.as-item{
    display:flex;
    gap:14px;
    height:168px;
    border-radius:6px;
    background:linear-gradient(158.53deg,#000 20.53%,#202020 85.89%);
    padding:0;
    position:relative;
    transition:background .18s ease, opacity .18s ease;
}

.as-item .thumb{
    flex:0 0 168px;
    padding:0!important;
    background:#fff;
    border-bottom-left-radius:5px;
    border-top-left-radius:5px;
}

.as-item .thumb img{
    width:100%;
    border-bottom-left-radius:5px;
    border-top-left-radius:5px;
}

.as-item .as-meta{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#fff;
}

.as-item .name{
    font-size:16px;
    font-weight:500;
    color:#fff;
    padding:0!important;
}

.as-item .brand{
    font-size:13px;
    opacity:.6;
    text-transform:uppercase;
    margin-bottom:6px;
    color:#777777;
}

.as-item .price{
    color:#ff214f;
    font-weight:500;
    font-size:20px;
}

.ui-autocomplete.ui-menu:has(.as-item:hover) .as-item:not(:hover){
    opacity:.3;
    transition:opacity .18s ease;
}

.ui-autocomplete.ui-menu .as-item:hover{
    opacity:1 !important;
    background:#fff !important;
}

.ui-autocomplete.ui-menu .as-item:hover .name{ color:#000; }
.ui-autocomplete.ui-menu .as-item:hover .brand{ color:#777; opacity:1; }

/*=========================================================
  4 ter. PILLS FORMAT / PG-VG
  - Style délégué à alterbadge (.ab-badge.ab-badge--primary)
  - On gère ici uniquement le layout (flex + gaps) et l'espace
    vis-à-vis du prix.
=========================================================*/
.as-item .as-pills{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:6px 0 12px;
}

@media (max-width: 991px){
    .as-item .as-pills{ margin:4px 0 8px; gap:4px; }
}

/* bouton “Afficher tout” */
.as-show-all-link{
    display:inline-block;
    padding:12px 18px;
    font-size:16px;
    font-weight:500;
    text-transform:uppercase;
    color:#fff!important;
    background:linear-gradient(180deg, #000000 0%, #202020 100%);
    border-radius:7px;
}
.as-show-all-link:hover{ background:#E62249; }

/*=========================================================
  4 bis. AJOUTER AU PANIER (injecté JS)
=========================================================*/
.addtocart-btn{
    position:absolute;
    bottom:10px;
    right:10px;
    width:50px;
    height:50px;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    background:#E62249;
    justify-content:center;
    align-items:center;
    border-radius:5px;
}

.as-item:hover .addtocart-btn{
    opacity:1;
    pointer-events:auto;
}

.addtocart-btn img{ width:27px; height:36px; }
.ui-autocomplete.ui-menu .as-item:hover .addtocart-btn{ display:flex; }
.addtocart-btn:hover{ transform:scale(1.08); }
/*=========================================================
  5. UTILITAIRES
=========================================================*/
body.no-scroll{ overflow:hidden!important; }
.bg-focus{ background:#000!important; }

/* IMPORTANT: ces 2 règles doivent être SCOPÉES au megamenu, sinon ça casse les autres instances */
.mm_extra_item .altersearch-widget{
    max-height:none !important;
    height:auto;
    opacity:1 !important;
    overflow:visible !important;
}
.mm_extra_item .altersearch-widget .input-with-icon{
    padding:0;
}

/* scrollbar webkit */
.ui-autocomplete::-webkit-scrollbar{ width:6px; }
.ui-autocomplete::-webkit-scrollbar-track{ background:#000; }
.ui-autocomplete::-webkit-scrollbar-thumb{ background:#fff; border-radius:3px; }

::-ms-input-placeholder{ color:#fff; }

/*=========================================================
  6. TOPBAR CATEGORIES (injecté JS)
=========================================================*/
.as-topbar{
    width:100%;
    display:flex;
    align-items:center;
    gap:16px;
    margin:32px 0;
}

.as-cats{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    gap:30px;
    overflow:hidden;
    background:#EDEDF3;
    scroll-behavior:smooth;
}

.as-cats::-webkit-scrollbar{ height:6px; background:#EDEDF3; }
.as-cats::-webkit-scrollbar-thumb{ background:#0F0F0F; border-radius:3px; }

.as-cat-link{
    white-space:nowrap;
    padding:10px 0;
    background:none;
    color:#0F0F0F;
    border-bottom:2px solid #E62249;
    font-size:16px;
    font-weight:500;
    transition:color .18s;
}
.as-cat-link:hover{ color:#E62249; }

.as-show-all{ flex:0 0 auto; }

.as-cat-arrow{
    flex:0 0 auto;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#f5f5f5;
    color:#0F0F0F;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    font-size:18px;
    user-select:none;
    transition:.18s;
}
.as-cat-arrow:hover{ background:#E62249; color:#fff; }
.as-cat-arrow.disabled{ display:none!important; }

/*=========================================================
  7. FIX DOUBLONS ALTERSEARCH
  - Mobile: on masque la search "extra" du megamenu
  - On masque la search qui se colle sous #wrapper
=========================================================*/
@media (max-width: 767.98px){
    .ets_mm_megamenu .mm_extra_item.mm_display_search_default{ display:none !important; }
}

/* la "search sous #wrapper" (selon thème/modules, elle apparaît à la racine) */
#wrapper > .altersearch-widget,
#page > .altersearch-widget,
main > .altersearch-widget{
    display:none !important;
}
/* =========================================================
   AlterSearch : éviter les doublons
   - On garde:
     • la recherche du megamenu (slot / extra item) en desktop
     • la barre homepage dans .mobile-search-home en mobile
   - On masque:
     • tout widget AlterSearch qui apparait "sous #wrapper"
========================================================= */

/* 1) le widget injecté "sous #wrapper" (hors header) */
#wrapper .altersearch-widget,
#content-wrapper .altersearch-widget{
    display:none !important;
}

/* 2) mais on autorise ceux qui sont dans le header */
#header .altersearch-widget{
    display:block !important;
}

/* 3) mobile: on masque la search "extra item" du megamenu (celle en trop) */
@media (max-width: 767px){
    .ets_mm_megamenu .mm_extra_item.mm_display_search_default{
        display:none !important;
    }
}
 #mobile-search-trigger{display: none}

 @media(max-width: 991px){
     .ui-autocomplete.ui-menu{ background: linear-gradient(180deg, #000 0%, #0F0F0F 100%);padding: 16px}
     .ui-autocomplete.ui-menu .ui-menu-item{width: 100%; height: auto;}
     .as-cats{background: none}
     .as-cat-link{color:#ffffff!important;}

     /* Cards : autoriser la hauteur à s'adapter au contenu (name + brand + pills + prix)
        — 90px imposait des chevauchements quand les pills s'ajoutent. */
     .as-item{ height: auto; min-height: 110px; padding: 8px; gap: 12px; }
     .as-item,.as-item .thumb img{height: auto}
     .as-item .thumb{ flex: 0 0 90px; height: 100%; max-height: 110px; }
     .as-item .thumb img{ width:100%; height:100%; max-height:110px; object-fit:contain; }
     .as-item .as-meta{ width: 100%; gap: 2px; padding-right: 4px; }
     .as-item .name{ font-size: 14px; line-height: 1.2; }
     .as-item .brand{ font-size: 11px; margin-bottom: 2px; }
     .as-item .price{ font-size: 16px; }

     /* Pills compactes sur mobile pour ne pas exploser la card */
     .as-item .as-pills{ margin: 2px 0 4px; gap: 4px; }
     .as-item .ab-badge{
         font-size: 11px;
         padding: 1px 6px;
         line-height: 1.4;
         border-radius: 3px;
     }

     /* Topbar mobile : AFFICHER TOUT sur sa propre ligne (full width align right)
        + tabs scrollables horizontalement en dessous. Sur écran étroit le bouton
        écrasait les tabs (1 seul visible + flèche). On masque les flèches en
        mobile : le scroll natif tactile suffit. */
     .as-topbar{ flex-wrap: wrap; gap: 8px; margin: 16px 0; }
     .as-show-all{ flex: 1 1 100%; display: flex; justify-content: flex-end; order: 0; }
     .as-cats{ flex: 1 1 100%; order: 1; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
     .as-cats::-webkit-scrollbar{ display: none; }
     .as-cat-arrow{ display: none !important; }
     .as-show-all-link{ padding: 8px 14px; font-size: 13px; }
 }

.ui-widget-content a{font-family: 'Brockmann', sans-serif;}
/* ──────────────────────────────────────────────────────────────────────
   ASR-09 — editorial sources on the full results page.
   Secondary to the product grid: rendered below it, in light cards on the
   page's grey background, clearly separated by a top rule + section labels.
   ────────────────────────────────────────────────────────────────────── */
.altersearch-editorial{
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #DCDCE4;
}
.altersearch-editorial-section{ margin-bottom: 28px; }
.altersearch-editorial-section:last-child{ margin-bottom: 0; }
.altersearch-editorial-title{
    font-family: 'Brockmann', sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 14px;
    color: #1A1A1A;
}
.altersearch-editorial-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.altersearch-editorial-item{
    background: #FFFFFF;
    border: 1px solid #E6E6EE;
    border-radius: 8px;
    padding: 14px 16px;
}
.altersearch-editorial-link{
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    color: #1A1A1A;
}
.altersearch-editorial-link:hover .altersearch-editorial-heading{ text-decoration: underline; }
.altersearch-editorial-badge{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 4px;
    background: #F0F0F6;
    color: #555;
}
.altersearch-editorial-threads .altersearch-editorial-badge{ background: #E8F1FF; color: #1f5fae; }
.altersearch-editorial-heading{
    font-weight: 600;
    line-height: 1.3;
}
.altersearch-editorial-excerpt{
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
}
.altersearch-editorial-meta{
    margin: 6px 0 0;
    font-size: 12px;
    color: #888;
}
@media (max-width: 767px){
    .altersearch-editorial-list{ grid-template-columns: 1fr; }
}

/* ============================================================
   Lot 2b — faceted results layout (alterfilters sidebar + results)
   The sidebar markup + look come from alterfilters' filter-bar.css ; this only
   lays out the two columns. Desktop ≥ 992px = sidebar + main side by side ;
   below that the sidebar column is hidden (the mobile drawer lands in 2b.3).
   ============================================================ */
.altersearch-layout { display: block; }
.altersearch-layout__main { min-width: 0; }

@media (min-width: 992px){
    .altersearch-layout--faceted{
        display: flex;
        align-items: flex-start;
        gap: 24px;
    }
    .altersearch-layout--faceted .altersearch-layout__sidebar{
        flex: 0 0 268px;
        max-width: 268px;
    }
    .altersearch-layout--faceted .altersearch-layout__main{
        flex: 1 1 auto;
    }
}

/* Lot 2b.3 — AJAX swap loading state: dim the layout and block further clicks
   while a fetch is in flight (a newer click still supersedes the pending one). */
.altersearch-layout.is-loading{
    opacity: .55;
    pointer-events: none;
    transition: opacity .12s ease;
}

/* Mobile drill-down trigger — hidden on desktop (the sidebar shows there). */
.altersearch-mobile-filter{ display: none; }

@media (max-width: 991.98px){
    /* Desktop facet column hidden on mobile — the alterfilters drill-down drawer
       (filter-bar-mobile.js) reads the still-in-DOM #search_filters on open. */
    .altersearch-layout__sidebar{ display: none; }

    .altersearch-mobile-filter{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin: 0 0 16px;
        padding: 12px 16px;
        border: 1px solid var(--as-amaranth, #E62249);
        border-radius: 10px;
        background: #fff;
        color: var(--as-amaranth, #E62249);
        font-weight: 600;
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
    }
    .altersearch-mobile-filter .material-icons{ font-size: 20px; }
    .altersearch-mobile-filter:active{
        background: var(--as-amaranth, #E62249);
        color: #fff;
    }
}

/* ============================================================
   Polish — honest empty / unavailable states (faceted search)
   .altersearch-empty renders when a query (optionally + facets) matches no
   product ; .altersearch-unavailable is the DB-down variant. Both shipped as a
   bare <p> with no style — this gives them an intentional, centered card so a
   0-result screen reads as deliberate rather than broken, and offers a reset
   path when facets are the cause. Tokens mirror filter-bar / the mobile button.
   ============================================================ */
.altersearch-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 48px 24px;
    margin: 8px 0 24px;
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #fafafa;
    color: #555;
}
.altersearch-empty__icon{
    font-size: 44px;
    line-height: 1;
    color: var(--as-amaranth, #E62249);
    opacity: .65;
}
.altersearch-empty__text{
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}
.altersearch-empty__reset{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 10px 18px;
    border: 1px solid var(--as-amaranth, #E62249);
    border-radius: 10px;
    background: var(--as-white, #fff);
    color: var(--as-amaranth, #E62249);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background var(--as-transition-fast, 120ms ease),
                color var(--as-transition-fast, 120ms ease);
}
.altersearch-empty__reset .material-icons{ font-size: 18px; }
.altersearch-empty__reset:hover,
.altersearch-empty__reset:focus{
    background: var(--as-amaranth, #E62249);
    color: var(--as-white, #fff);
}
/* DB-down variant — amber accent signals "transient, retry" (distinct from the
   neutral "no match"), matching the autocomplete unavailable hint / loyalty pill. */
.altersearch-unavailable{
    border-color: #f0d8a8;
    background: #fdf6e9;
}
.altersearch-unavailable .altersearch-empty__icon{
    color: #b8860b;
    opacity: 1;
}
.altersearch-unavailable .altersearch-empty__text{
    color: #7a5400;
}