.productsThumb {
    width: 160px;
    height: 160px;
    object-fit: contain;
}

.productsPerlesRondesThumb {
    width: 200px;
    height: 160px;
    object-fit: cover;
    padding: 7px;
    box-sizing: border-box;
}

.productsPerlesFacetteesThumb {
    width: 200px;
    height: 160px;
    object-fit: cover;
    padding: 7px;
    box-sizing: border-box;
}

.productsBraceletsThumb {
    width: 190px;
    height: 160px;
    object-fit: contain;
}

.product-image-wrapper img.product-main-image {
    width: min(85%, 380px) !important;
    height: 380px !important;
    max-width: 85% !important;
    max-height: 380px !important;
    object-fit: contain !important;
}

.product-image-wrapper.portrait img.product-main-image {
    width: min(100%, 420px) !important;
    height: 520px !important;
    max-width: 100% !important;
    max-height: 520px !important;
}

.product-image-wrapper.landscape img.product-main-image {
    width: 95% !important;
    height: 340px !important;
    max-width: 95% !important;
    max-height: 340px !important;
}

@media only screen and (max-width: 800px) {
    .product-image-wrapper img.product-main-image,
    .product-image-wrapper.portrait img.product-main-image,
    .product-image-wrapper.landscape img.product-main-image {
        width: 100% !important;
        height: 300px !important;
        max-width: 100% !important;
        max-height: 300px !important;
    }
}

/* Échelle générale ~92% sur desktop (rendu plus compact, proche d'un zoom navigateur à 92%) */
@media (min-width: 1024px) {
    html {
        zoom: 0.92;
    }

    /* Barres de menu sombres un peu moins épaisses (catégories + onglets du header).
       NB: cibler uniquement les liens de 1er niveau de la barre (enfants directs),
       sinon les liens du méga-menu déroulant (.categoriesList a) héritent du height
       et toute la disposition du déroulant est cassée. */
    .computerNav,
    .computerNav > ul > li > a,
    .headerDropdownMenuText {
        height: 50px;
    }

    /* Grille catégories de l'accueil : viser 4 colonnes (gouttière réduite,
       sans toucher la largeur des cartes dont le bandeau titre est fixe à 324px) */
    .homeCategories {
        grid-gap: 50px 40px;
    }

    /* Pages catégorie : un tout petit peu plus d'air entre le descriptif du rayon
       et la barre d'onglets noire (40px -> 50px) */
    .pageCategoryDescription.active {
        margin-bottom: 50px;
    }
}

/* Plus d'air entre la barre de filtre et les premières photos (pages catégorie) */
.shopFilters {
    margin-bottom: 35px;
}

/* Rayon « Bracelets Pierre » (catégorie 16) : images un peu plus grandes dans leur
   cadre blanc (on rogne les marges blanches en agrandissant l'image, le cadre garde
   sa taille). Scopé à cette seule catégorie. */
.content[data-cat-level="1"][data-cat-id="16"] .productsThumbDiv {
    overflow: hidden;
}
.content[data-cat-level="1"][data-cat-id="16"] .productsThumb {
    transform: scale(1.1);
}
.content[data-cat-level="1"][data-cat-id="16"] .productsThumb:hover {
    transform: scale(1.18);
}

/* Images produit un peu plus grandes DANS leur bloc (le bloc 160px ne change pas,
   donc toujours 5 par ligne). On agrandit l'image et on rogne les marges blanches. */
.productsThumbDiv {
    overflow: hidden;
}
.productsThumb {
    transform: scale(1.05);
}
.productsThumb:hover {
    transform: scale(1.12);
}

/* Titres produit : remontés à 14px (13px jugé trop petit, demande 15/07) */
.productsTitle {
    font-size: 14px;
}

/* Texte de description des rayons et sous-rayons : une taille en plus (héritait 14px) */
.categoryDescCat {
    font-size: 15px;
}

/* Alignement vignettes produit : cartes alignées par le HAUT (align-items:center centrait
   verticalement les cartes de hauteurs differentes -> grille en zigzag, demande 15/07) */
.shopDivCat.active {
    align-items: start;
}

/* La ligne "Dès X€" (prix spéciaux) n'existe pas sur toutes les cartes : on réserve sa
   hauteur partout pour que "Fin de la promotion" et le bouton panier restent alignés */
.productKiloPrice {
    min-height: 24px;
}