/* Ulrich Product Suggestions 1.2.1 — compact, even grid. */
.umps-suggestions {
  width: 100%;
  clear: both;
  margin: 18px 0 6px;
  padding: 0;
  font-family: inherit;
}
.umps-suggestions .umps-section { margin: 0 0 24px; }
.umps-suggestions .umps-section:last-child { margin-bottom: 0; }
.umps-suggestions .umps-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 13px;
}
.umps-suggestions .umps-heading-mark {
  width: 4px;
  height: 23px;
  background: #e0002b;
  border-radius: 3px;
  flex: 0 0 4px;
}
.umps-suggestions .umps-heading h2 {
  margin: 0 !important;
  color: #1a1d23 !important;
  font-size: clamp(21px, 2vw, 26px) !important;
  line-height: 1.25 !important;
  letter-spacing: -.024em;
  font-weight: 750 !important;
}
/* 'row', 'products' and theme product-card sizing may add negative margins,
   fixed widths or Bootstrap columns. Neutralize only inside this module. */
.umps-suggestions .umps-grid.products.row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 14px !important;
  row-gap: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
.umps-suggestions .umps-grid > .umps-item {
  display: flex !important;
  flex: none !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: stretch !important;
}
.umps-suggestions .umps-grid > .umps-item > .product-miniature,
.umps-suggestions .umps-grid > .umps-item > .product-miniature .thumbnail-container {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (max-width: 1100px) {
  .umps-suggestions .umps-grid.products.row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 13px !important;
  }
}
@media (max-width: 767px) {
  .umps-suggestions { margin-top: 16px; }
  .umps-suggestions .umps-grid.products.row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .umps-suggestions .umps-heading h2 { font-size: 20px !important; }
  .umps-suggestions .umps-section { margin-bottom: 22px; }
}

/* V1.2.1 — Theme cards can have fixed widths / max-widths; reset these only
   inside suggestions. The grid controls the columns, not the miniature. */
body#product .umps-suggestions,
.umps-suggestions {width:100% !important;max-width:100% !important;}
body#product .umps-suggestions .umps-grid,
.umps-suggestions .umps-grid {display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;justify-items:stretch !important;justify-content:stretch !important;gap:16px !important;margin:0 !important;width:100% !important;}
body#product .umps-suggestions .umps-grid > .umps-item,
.umps-suggestions .umps-grid > .umps-item {display:block !important;float:none !important;flex:none !important;flex-basis:auto !important;min-width:0 !important;width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important;}
body#product .umps-suggestions .umps-item .product-miniature,
body#product .umps-suggestions .umps-item .product-miniature .thumbnail-container,
.umps-suggestions .umps-item .product-miniature,
.umps-suggestions .umps-item .product-miniature .thumbnail-container {display:block !important;float:none !important;box-sizing:border-box !important;min-width:0 !important;width:100% !important;max-width:100% !important;min-height:0 !important;margin:0 !important;}
body#product .umps-suggestions .umps-item .product-miniature .product-description,
.umps-suggestions .umps-item .product-miniature .product-description {width:100% !important;max-width:100% !important;}
body#product .umps-suggestions .umps-item .product-miniature img,
.umps-suggestions .umps-item .product-miniature img {max-width:100% !important;}
body#product .umps-suggestions .umps-heading h2,
.umps-suggestions .umps-heading h2 {font-size:23px !important;line-height:1.25 !important;}
@media (max-width:1100px){
 body#product .umps-suggestions .umps-grid,.umps-suggestions .umps-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media (max-width:767px){
 body#product .umps-suggestions .umps-grid,.umps-suggestions .umps-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;}
 body#product .umps-suggestions .umps-heading h2,.umps-suggestions .umps-heading h2{font-size:20px !important;}
}

/* V1.2.2: alignement et marges sur les écrans mobiles. */
@media (max-width: 767px) {
  body#product .umps-suggestions,
  .umps-suggestions {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px auto 12px !important;
    padding: 0 16px !important;
  }
  body#product .umps-suggestions .umps-section,
  .umps-suggestions .umps-section {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 26px !important;
  }
  body#product .umps-suggestions .umps-grid.products.row,
  .umps-suggestions .umps-grid.products.row {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }
  body#product .umps-suggestions .umps-grid > .umps-item,
  .umps-suggestions .umps-grid > .umps-item {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: stretch !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
  body#product .umps-suggestions .umps-item .product-miniature,
  .umps-suggestions .umps-item .product-miniature {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
  }
  body#product .umps-suggestions .umps-item .product-miniature .thumbnail-container,
  .umps-suggestions .umps-item .product-miniature .thumbnail-container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
  }
  .umps-suggestions .umps-heading { margin-bottom: 12px !important; }
  .umps-suggestions .umps-heading h2 { font-size: 19px !important; }
}
@media (max-width: 360px) {
  .umps-suggestions { padding-left: 12px !important; padding-right: 12px !important; }
  .umps-suggestions .umps-grid.products.row { gap: 9px !important; }
}