/*******************************************************
 REFONTE 2026 - Bloc sous-categories (logos marques)
 Corrige la deformation liee aux attributs width/height
 (140x210 depuis le passage de medium_default en 2:3) :
 tuiles carrees, logo en object-fit: contain, jamais etire.
 Compatible CCC : pas de @import, pas de variables CSS.
 Prefixe "body" : gagne l'egalite de specificite face a
 category.css quel que soit l'ordre de concatenation.
********************************************************/

body #subcategories {
  border-top: 1px solid #ECEAE7;
  padding: 24px 0 8px;
  font-family: 'Hanken Grotesk', Arial, Helvetica, sans-serif; }

body #subcategories p.subcategory-heading {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #23262F;
  margin: 0 0 16px; }

/* ---------- grille responsive ---------- */
body #subcategories ul {
  margin: 0 0 24px !important;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; }
body #subcategories ul:before,
body #subcategories ul:after {
  content: none !important;
  display: none !important; }
body #subcategories ul li {
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0;
  text-align: center; }

/* ---------- tuile logo carree ---------- */
body #subcategories ul li .subcategory-image {
  padding: 0 0 10px; }
body #subcategories ul li .subcategory-image a {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 18px;
  background: #fff;
  border: 1px solid #ECEAE7;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(35,38,47,0.04);
  transition: box-shadow 0.5s cubic-bezier(0.32,0.72,0,1),
              transform 0.5s cubic-bezier(0.32,0.72,0,1),
              border-color 0.5s cubic-bezier(0.32,0.72,0,1); }

/* neutralise les attributs HTML width/height : logo entier, jamais deforme */
body #subcategories ul li .subcategory-image a img {
  width: 100%;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain;
  vertical-align: middle; }

/* ---------- hover : meme langage que les cartes produits ---------- */
@media (hover: hover) {
  body #subcategories ul li:hover .subcategory-image a {
    border: 1px solid #DAD7D2;
    padding: 18px;
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(35,38,47,0.05), 0 18px 32px -18px rgba(35,38,47,0.28); } }
/* annule l'ancien hover border 5px de category.css (hors media query) */
body #subcategories ul li:hover .subcategory-image a {
  border-width: 1px;
  padding: 18px; }

/* ---------- nom ---------- */
body #subcategories ul li h5 {
  margin: 0;
  padding: 0; }
body #subcategories ul li .subcategory-name {
  font: 600 13px/18px 'Hanken Grotesk', Arial, Helvetica, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #23262F;
  text-decoration: none; }
body #subcategories ul li .subcategory-name:hover {
  color: #6B6E78; }

/* ---------- mobile ---------- */
@media (max-width: 599px) {
  body #subcategories ul {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px; }
  body #subcategories ul li .subcategory-image a {
    padding: 12px;
    border-radius: 10px; }
  body #subcategories ul li:hover .subcategory-image a {
    padding: 12px; }
  body #subcategories ul li .subcategory-name {
    font-size: 11px;
    line-height: 15px; } }