{{-- Styles des cartes du catalogue : pastille de rayon adaptative et bouton
     favoris. Partagés par la grille (accueil, boutique) et la liste de
     souhaits du compte acheteur. --}}
@once
    <style>
        /* Pastille de rayon (Restauration, Sur mesure, Locations). Le thème place
           le <span> du badge en absolu, ce qui empêche la largeur de suivre le
           texte : on le repasse en flux pour que la pastille s'adapte au libellé,
           quelle que soit la langue. */
        .single-shopping-card-one .thumbnail-preview .badge.card-label-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: auto;
            height: 45px;
            padding: 0 12px;
            background: #C3AD66;
            border-radius: 4px;
        }

        .single-shopping-card-one .thumbnail-preview .badge.card-label-badge span {
            position: static;
            top: auto;
            left: auto;
            padding-top: 8px;
            white-space: nowrap;
        }

        /* Quand la carte porte déjà la pastille de remise en haut à gauche,
           le rayon passe à droite pour ne pas la recouvrir. */
        .single-shopping-card-one .thumbnail-preview .badge.card-label-badge.is-right {
            left: auto;
            right: 12px;
        }

        /* Ligne « restaurateur » / « ville » : main.css lui donne un fond noir et
           du padding sur un élément inline, si bien qu'un texte long se casse en
           deux pavés décalés qui débordent sur les voisins. En inline-block, le
           texte passe à la ligne à l'intérieur d'une seule pastille. */
        .single-shopping-card-one .body-content .availability {
            display: inline-block;
            max-width: 100%;
            margin: 6px 0 2px;
            padding: 5px 10px;
            font-size: 12.5px;
            line-height: 1.45;
            text-align: center;
            vertical-align: middle;
            overflow-wrap: anywhere;
        }

        @media only screen and (max-width: 767px) {
            .single-shopping-card-one .body-content .availability {
                font-size: 11.5px;
                padding: 5px 8px;
            }
        }

        .single-shopping-card-one .body-content .availability i {
            margin-right: 5px;
        }

        /* Bouton favoris des cartes du catalogue. Reprend les règles que main.css
           attachait à l'id #home-wishlit-product-grid, en classe pour pouvoir
           l'utiliser sur les quatre types de cartes sans dupliquer l'id. */
        .card-wishlist-btn {
            background-color: #C3AD66;
            display: block;
            height: 30px;
            border-radius: 6px;
            border: 1px solid #C3AD66;
            width: 60%;
            margin-left: auto;
            margin-right: auto;
            cursor: pointer;
            transition: 0.3s ease;
        }

        /* Le bouton est en block : il porte lui-même l'espace qui le sépare des
           étoiles (avant, un <br> suivi d'une marge négative de -18px faisait
           chevaucher les deux). */
        .single-shopping-card-one .body-content .card-wishlist-btn {
            margin-top: 4px;
            margin-bottom: 8px;
        }

        .card-wishlist-btn .wishlist-icon {
            color: #ffffff;
            padding-top: 6px;
        }

        .card-wishlist-btn:hover {
            background: transparent;
        }

        .card-wishlist-btn:hover .wishlist-icon {
            color: #000000;
        }
    </style>
@endonce