/* ============================================================
   SAUGNAC SEARCH — Personnalisations de l'affichage
   ============================================================ */


/* ── 1. APPARENCE GÉNÉRALE DU DROPDOWN ───────────────────── */

.dgwt-wcas-suggestions-wrapp {
    box-shadow:   0 0 20px rgba(0, 0, 0, .15) !important;
    border-radius: 10px !important;
    overflow-x:   hidden !important;
    max-height:   80vh !important;
    overflow-y:   auto !important;
    max-width:    100vw !important; /* contrer le width: 1200px injecté par FiboSearch */
}


/* ── 2. GRILLE 4 COLONNES ─────────────────────────────────── */

.dgwt-wcas-suggestions-wrapp:not([style*="display: none"]) {
    display:               grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap:            1px !important;
    row-gap:               0 !important;
    background-color:      #fff !important;
    align-content:         start !important;
}

/* Chaque produit = 1 cellule de la grille, fond blanc */
.dgwt-wcas-suggestions-wrapp > a.dgwt-wcas-suggestion-product {
    background-color: #ffffff !important;
    width:            100% !important;
    min-height:       80px !important;
    border-bottom:    1px solid #dfdfdf !important;
    box-shadow:       inset -1px 0 0 0 #e0e0e0 !important;
}

/* En-têtes, "Voir tous", "Aucun résultat" → pleine largeur */
.dgwt-wcas-suggestions-wrapp > span.dgwt-wcas-suggestion-headline,
.dgwt-wcas-suggestions-wrapp > span.dgwt-wcas-suggestion-headline-v2,
.dgwt-wcas-suggestions-wrapp > a.dgwt-wcas-suggestion-more,
.dgwt-wcas-suggestions-wrapp > .dgwt-wcas-suggestion-nores {
    grid-column:      1 / -1 !important;
    background-color: #ffffff !important;
    border-bottom:    1px solid #dfdfdf !important;
}

/* Survol */
.dgwt-wcas-suggestions-wrapp > a.dgwt-wcas-suggestion-product:hover,
.dgwt-wcas-suggestions-wrapp > a.dgwt-wcas-suggestion-product.dgwt-wcas-suggestion-selected {
    background-color: #f5f5f5 !important;
}


/* ── 3. IMAGE DU PRODUIT ──────────────────────────────────── */

.dgwt-wcas-si {
    width:           300px !important;
    min-width:       80px !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex-shrink:     0 !important;
}

.dgwt-wcas-si img {
    max-width:     100% !important;
    width:         auto !important;
    height:        auto !important;
    object-fit:    contain !important;
    border:        1px solid #eee !important;
    border-radius: 4px !important;
    padding:       3px !important;
}


/* ── 4. TITRE DU PRODUIT ──────────────────────────────────── */

.dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-title {
    font-size:   1.2em !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    font-family: "Roboto", Sans-serif;
}


/* ── 5. DESCRIPTION ───────────────────────────────────────── */

.dgwt-wcas-suggestions-wrapp .dgwt-wcas-sd {
    display:     block !important;
    white-space: normal !important;
    overflow:    visible !important;
    line-height: 1.4 !important;
    font-size:   1em !important;
    color:       #777 !important;
    margin-top:  4px !important;
    font-family: "Roboto", Sans-serif;
}


/* ── 6. EN-TÊTES DE GROUPE ────────────────────────────────── */

.dgwt-wcas-has-headings .dgwt-wcas-suggestion-headline .dgwt-wcas-st,
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-headline-v2 {
    font-size:      11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color:          #999 !important;
    padding:        6px 10px !important;
    background:     #fafafa !important;
    border-bottom:  1px solid #ebebeb !important;
}


/* ── 7. RESPONSIVE ────────────────────────────────────────── */

@media (max-width: 992px) {
    .dgwt-wcas-suggestions-wrapp:not([style*="display: none"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    /* Sur mobile : on abandonne la grille CSS (buggée avec flex items à contenu variable)
       au profit d'un empilement block classique */
    .dgwt-wcas-suggestions-wrapp:not([style*="display: none"]) {
        display:               block !important;
        width:                 100vw !important;
        max-width:             100vw !important;
        max-height:            100vh !important; /* plein écran sur mobile */
        left:                  0 !important;
    }

    .dgwt-wcas-search-wrapp {
        width: 90% !important;
    }

    /* Carte produit en colonne sur mobile */
    .dgwt-wcas-suggestions-wrapp > a.dgwt-wcas-suggestion-product {
        align-self:      start !important;   /* hauteur propre à chaque carte, pas la rangée grille */
        flex-direction:  column !important;
        align-items:     flex-start !important;
        justify-content: flex-start !important;
        height:          auto !important;
        min-height:      0 !important;
        overflow:        visible !important;
        padding:         10px 12px !important;
    }

    /* Image hauteur fixe réduite sur mobile (évite le reflow) */
    .dgwt-wcas-suggestions-wrapp > a.dgwt-wcas-suggestion-product .dgwt-wcas-si {
        width:      100% !important;
        height:     100px !important;
        max-height: 100px !important;
    }

    /* L'img incluse doit tenir bordure+padding dans les 100px du conteneur */
    .dgwt-wcas-suggestions-wrapp > a.dgwt-wcas-suggestion-product .dgwt-wcas-si img {
        box-sizing: border-box !important;
        max-height: 100% !important;
    }

    /* Contenu texte pleine largeur */
    .dgwt-wcas-suggestions-wrapp > a.dgwt-wcas-suggestion-product .dgwt-wcas-content-wrapp {
        width:      100% !important;
        height:     auto !important;
        overflow:   visible !important;
        max-height: none !important;
    }
}


/* ── 8. LAYOUT VERTICAL (image / titre / description / prix) ── */

.dgwt-wcas-suggestions-wrapp > a.dgwt-wcas-suggestion-product {
    flex-direction:  column !important;
    align-items:     center !important;
    justify-content: flex-start !important;
    padding:         12px 15px !important;
    min-height:      0 !important;
    height:          auto !important;
    overflow:        visible !important;
}

.dgwt-wcas-suggestions-wrapp > a.dgwt-wcas-suggestion-product .dgwt-wcas-si {
    width:         100% !important;
    min-width:     0 !important;
    height:        140px !important; /* hauteur fixe : évite le reflow au chargement de l'image */
    max-height:    140px !important;
    margin-bottom: 8px !important;
    flex-shrink:   0 !important;
    overflow:      hidden !important;
}

.dgwt-wcas-suggestions-wrapp > a.dgwt-wcas-suggestion-product .dgwt-wcas-si img {
    max-width:  100% !important;
    max-height: 100% !important;       /* ne déborde pas du conteneur */
    box-sizing: border-box !important; /* bordure+padding inclus dans la hauteur */
}

.dgwt-wcas-suggestions-wrapp > a.dgwt-wcas-suggestion-product .dgwt-wcas-content-wrapp {
    width:           100% !important;
    height:          auto !important;
    overflow:        visible !important;
    padding-left:    0 !important;
    flex-direction:  column !important;
    align-items:     flex-start !important;
    justify-content: flex-start !important;
    flex-grow:       1 !important; /* remplit l'espace restant sous l'image */
}

/* Conteneur du prix */
.dgwt-wcas-suggestions-wrapp > a.dgwt-wcas-suggestion-product .dgwt-wcas-meta {
    width:      100% !important;
    margin-top: 12px !important;
}

/* Prix centré */
.dgwt-wcas-suggestions-wrapp > a.dgwt-wcas-suggestion-product .dgwt-wcas-sp {
    display:         flex !important;
    flex-wrap:       wrap !important;
    justify-content: center !important;
    align-items:     baseline !important;
    align-content:   center !important;
    gap:             4px !important;
    text-align:      center !important;
    font-size:       1.5em !important;
    font-family:     "Roboto", Sans-serif;
    font-weight:     600;
}

.dgwt-wcas-suggestions-wrapp > a.dgwt-wcas-suggestion-product .dgwt-wcas-sp > * {
    display: inline !important;
}


/* ── 9. NO RESULTS ───────────────────────────────────────── */

.dgwt-wcas-suggestion-nores {
    font-family: "Roboto", Sans-serif !important;
    font-size:   1.2em !important;
    font-weight: 600 !important;
}


/* ── 10. SNIPPET CONTEXTUEL ───────────────────────────────── */

.dgwt-wcas-snippet {
    display:      block !important;
    margin-top:   6px !important;
    padding-left: 8px !important;
    border-left:  2px solid #D87F3F !important;
    font-size:    0.9em !important;
    font-style:   italic !important;
    color:        #888 !important;
    line-height:  1.4 !important;
    white-space:  normal !important;
    font-family:  "Roboto", Sans-serif;
}

.dgwt-wcas-snippet strong {
    color:       #D87F3F !important;
    font-weight: 600 !important;
    font-style:  normal !important;
}

.dgwt-wcas-snippet-label {
    font-style:     normal !important;
    font-size:      0.8em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color:          #bbb !important;
    margin-right:   2px !important;
}