/* =============================================================================
   STYLES GENERIQUES DES BOUTONS / TITRES CATEGORIE
   -----------------------------------------------------------------------------
   Les couleurs spécifiques par catégorie sont gérées dynamiquement depuis
   l'admin (Produits > Catégories > champ "Couleur de la catégorie") et
   injectées dans <head> par includes/category-color.php.

   Ce fichier ne contient que la mise en forme commune (taille, padding,
   hover, etc.) — pas les couleurs.
   ============================================================================= */

/* Titre catégorie : pleine largeur, texte aligné à droite,
   bord arrondi côté droit uniquement, fond coloré (couleur de la catégorie). */
h1.product-category,
.product-category {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 24px;
    text-align: right;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}
.product-category .product-category-name {
    order: 1;
}
.product-category .product-category-logo {
    order: 2;
    max-height: 1.5em;
    width: auto;
    flex-shrink: 0;
}

.product-category-to-content,
.product-category-to-catalogue {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .2s ease;
    color: #fff;
}

.product-category-to-content:hover,
.product-category-to-catalogue:hover {
    opacity: .85;
    color: #fff;
}