.products .groupe-product-cat{
  width: 100% !important;
  overflow: visible !important;
  position: relative !important;
}

.products .wrapper-col-product-cat{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  margin-top: 20px !important;
  margin-left: -12px !important;
  margin-right: -12px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.products .wrapper-col-product-cat::-webkit-scrollbar{
  display: none !important;
}

.products .wrapper-col-product-cat .collection_list.col-link-product-cat{
  width: 25% !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  margin-bottom: 18px !important;
  flex: none !important;
  display: block !important;
}


.products .wrapper-col-product-cat .collection_list.col-link-product-cat:nth-child(5),
.products .wrapper-col-product-cat .collection_list.col-link-product-cat:nth-child(6),
.products .wrapper-col-product-cat .collection_list.col-link-product-cat:nth-child(7){
  width: 33.3333% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.products .wrapper-col-product-cat .collection_list.col-link-product-cat .collection_container{
  background: var(--clr-primary-white) !important;
  border-radius: 10px !important;
  box-shadow: 0px 0px 12px rgb(0 0 0 / 12%) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  text-align: center !important;
  position: relative !important;
  width: 100% !important;
}

.products .wrapper-col-product-cat .collection_list.col-link-product-cat .col-link-product-cat-background{
  width: 100% !important;
  height: 170px !important;
  overflow: hidden !important;
  position: relative !important;
  inset: auto !important;
  order: 0 !important;
}

.products .wrapper-col-product-cat .collection_list.col-link-product-cat .col-link-product-cat-background::after{
  display: none !important;
}

.products .wrapper-col-product-cat .collection_list.col-link-product-cat .col-link-product-cat-background img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.products .wrapper-col-product-cat .collection_list.col-link-product-cat .col-link-product-cat-title{
  margin-top: 18px !important;
  padding: 0 22px !important;
  font-family: var(--ff-heading) !important;
  font-weight: var(--fw-bold) !important;
  font-size: var(--fs-20) !important;
  line-height: var(--lh-1-25) !important;
  color: var(--fc-primary) !important;
  position: relative !important;
  height: auto !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  pointer-events: auto !important;
  order: 1 !important;
  z-index: auto !important;
  min-height:65px;
}

.products .wrapper-col-product-cat .collection_list.col-link-product-cat .col-link-product-cat-title::after{
  content: "" !important;
  display: block !important;
  width: 56px !important;
  height: 3px !important;
  background: var(--clr-accent) !important;
  margin: 12px auto 0 !important;
  border-radius: 2px !important;
}

.products .wrapper-col-product-cat .collection_list.col-link-product-cat .col-link-product-cat-text{
  margin-top: 12px !important;
  padding: 0 22px !important;
  font-family: var(--ff-body) !important;
  font-size: var(--fs-16) !important;
  line-height: var(--lh-1-55) !important;
  color: rgba(44,44,44,.75) !important;
  display: block !important;
  order: 2 !important;
}

.products .wrapper-col-product-cat .collection_list.col-link-product-cat .col-link-product-cat-tags{
  margin-top: 14px !important;
  padding: 0 22px 25px !important;
  font-family: var(--ff-body) !important;
  font-size: var(--fs-16) !important;
  line-height: var(--lh-1-4) !important;
  color: var(--clr-accent) !important;
  display: block !important;
  order: 3 !important;
}

.products .wrapper-col-product-cat .collection_list.col-link-product-cat .collection_container:hover{
  transform: none !important;
}

@media (max-width: 1100px){
  .products .wrapper-col-product-cat{
    justify-content: center !important;
  }

  .products .wrapper-col-product-cat .collection_list.col-link-product-cat{
    width: 50% !important;
    max-width: 520px !important;
    padding: 0 10px !important;
    margin-bottom: 18px !important;
  }

  .products .wrapper-col-product-cat .collection_list.col-link-product-cat:nth-child(5),
  .products .wrapper-col-product-cat .collection_list.col-link-product-cat:nth-child(6),
  .products .wrapper-col-product-cat .collection_list.col-link-product-cat:nth-child(7){
    width: 50% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 640px){
  .products .wrapper-col-product-cat{
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .products .wrapper-col-product-cat .collection_list.col-link-product-cat{
    width: 100% !important;
    max-width: 520px !important;
    padding: 0 !important;
    margin-bottom: 18px !important;
  }

  .products .wrapper-col-product-cat .collection_list.col-link-product-cat:nth-child(5),
  .products .wrapper-col-product-cat .collection_list.col-link-product-cat:nth-child(6),
  .products .wrapper-col-product-cat .collection_list.col-link-product-cat:nth-child(7){
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .products .wrapper-col-product-cat .collection_list.col-link-product-cat .col-link-product-cat-background{
    height: 190px !important;
  }
}




/* =========================================================
   AREA-2 — Structural Design Comparison
========================================================= */

/* Wrapper */
body.mt.products #area-2 .conventional_systems__groupe{
  width: 100% !important;
}

body.mt.products #area-2 .comparison-block-left-pos,
body.mt.products #area-2 .comparison-block-left-neg,
body.mt.products #area-2 .comparison-block-col{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Header (50/50) */
body.mt.products #area-2 .comparison-block-left-pos,
body.mt.products #area-2 .comparison-block-left-neg{
  width: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 8px 14px !important;
  box-sizing: border-box !important;
  background: var(--clr-primary-white, #ffffff) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--footer-text, #333333) !important;
}

body.mt.products #area-2 .comparison-block-left-pos{
  border-right: 1px solid var(--footer-text, #333333) !important;
  border-top-left-radius: var(--br-keyfact, 10px) !important;
}

body.mt.products #area-2 .comparison-block-left-neg{
  border-top-right-radius: var(--br-keyfact, 10px) !important;
}

body.mt.products #area-2 .comparison-block-left-pos .textcontent,
body.mt.products #area-2 .comparison-block-left-neg .textcontent{
  font-family: var(--ff-primary) !important;
  font-weight: var(--fw-bold, 700) !important;
  font-size: var(--fs-16) !important;
  line-height: var(--lh-1-2) !important;
  margin: 0 !important;
}

body.mt.products #area-2 .comparison-block-left-pos .textcontent{
  color: var(--clr-accent, #339933) !important;
}

body.mt.products #area-2 .comparison-block-left-neg .textcontent{
  color: var(--footer-text, #333333) !important;
}

/* Table wrapper */
body.mt.products #area-2 .comparison-block-col{
  width: 100% !important;
  background: var(--clr-primary-white, #ffffff) !important;
  border: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 0 12px rgba(0,0,0,.16) !important;

  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: var(--br-keyfact, 10px) !important;
  border-bottom-right-radius: var(--br-keyfact, 10px) !important;

  position: relative !important;
  margin-top: 0 !important;
}

/* Rows */
body.mt.products #area-2 .comparison-block-col .collection_list.col-prod-comparison{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.mt.products #area-2 .comparison-block-col
.collection_list.col-prod-comparison
.collection_container{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "title title"
    "pos   neg" !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--clr-primary-white, #ffffff) !important;
}

/* Row title */
body.mt.products #area-2 .comparison-block-col
.collection_list.col-prod-comparison
.col-prod-comparison-title{
  grid-area: title !important;
  width: 100% !important;
  text-align: center !important;
  font-family: var(--ff-primary) !important;
  font-weight: var(--fw-bold, 700) !important;
  font-size: var(--fs-14) !important;
  line-height: var(--lh-1-2) !important;
  color: var(--footer-text, #333333) !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  background: var(--clr-primary-light, #F2F2F2) !important;
  border: 0 !important;
}

/* Value cells */
body.mt.products #area-2 .comparison-block-col
.collection_list.col-prod-comparison
.col-prod-comparison-positiv-text,
body.mt.products #area-2 .comparison-block-col
.collection_list.col-prod-comparison
.col-prod-comparison-negativ-text{
  background: var(--clr-primary-white, #ffffff) !important;
  border: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  padding: 24px 18px 18px !important;
  min-height: 88px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Only middle divider line */
body.mt.products #area-2 .comparison-block-col
.collection_list.col-prod-comparison
.col-prod-comparison-negativ-text{
  border-left: 1px solid var(--footer-text, #333333) !important;
}

/* Text */
body.mt.products #area-2 .comparison-block-col
.collection_list.col-prod-comparison
.col-prod-comparison-positiv-text .textcontent,
body.mt.products #area-2 .comparison-block-col
.collection_list.col-prod-comparison
.col-prod-comparison-negativ-text .textcontent{
  font-family: var(--ff-body) !important;
  font-weight: var(--fw-regular, 400) !important;
  font-size: var(--fs-14) !important;
  line-height: 1.35 !important;
  color: var(--footer-text, #333333) !important;
  margin: 0 !important;
}

/* Icons */
body.mt.products #area-2 .comparison-block-col
.collection_list.col-prod-comparison
.col-prod-comparison-positiv-text::before{
  content: "" !important;
  display: block !important;
  width: 10px !important;
  height: 18px !important;
  border-right: 3px solid var(--clr-accent, #339933) !important;
  border-bottom: 3px solid var(--clr-accent, #339933) !important;
  transform: rotate(45deg) !important;
  margin-bottom: 10px !important;
}

/* X (stable) */
body.mt.products #area-2 .comparison-block-col
.collection_list.col-prod-comparison
.col-prod-comparison-negativ-text::before,
body.mt.products #area-2 .comparison-block-col
.collection_list.col-prod-comparison
.col-prod-comparison-negativ-text::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 26px !important;
  width: 18px !important;
  height: 3px !important;
  background: var(--footer-text, #333333) !important;
  transform-origin: center !important;
}

body.mt.products #area-2 .comparison-block-col
.collection_list.col-prod-comparison
.col-prod-comparison-negativ-text::before{
  transform: translateX(-50%) rotate(45deg) !important;
}

body.mt.products #area-2 .comparison-block-col
.collection_list.col-prod-comparison
.col-prod-comparison-negativ-text::after{
  transform: translateX(-50%) rotate(-45deg) !important;
}

/* push text below X */
body.mt.products #area-2 .comparison-block-col
.collection_list.col-prod-comparison
.col-prod-comparison-negativ-text{
  padding-top: 48px !important;
}

/* Smooth rows (instead of display:none) */
body.mt.products #area-2 .comparison-block-col .collection_list.col-prod-comparison{
  overflow: hidden !important;
  max-height: 500px !important; /* big enough for one row */
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: max-height 420ms ease, opacity 260ms ease, transform 260ms ease !important;
}

body.mt.products #area-2 .comparison-block-col .collection_list.col-prod-comparison.is-hidden-row{
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  pointer-events: none !important;
}
  
/* Unfold/Fold button */
body.mt.products #area-2 .comparison-unfold-btn{
  width: 100% !important;
  border: 0 !important;
  cursor: pointer !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;

  font-family: var(--ff-body) !important;
  font-size: var(--fs-16) !important;
  font-weight: var(--fw-bold, 700) !important;
  text-transform: lowercase !important;
  color: var(--footer-text, #333333) !important;

  background: var(--clr-primary-white, #ffffff) !important;
  position: relative !important;
  z-index: 10 !important;

  /* UNFOLD (collapsed) default padding */
  padding: 26px 0 !important;
}

/* FOLD (expanded) smaller paddings */
body.mt.products #area-2 .comparison-unfold-btn[aria-expanded="true"]{
  padding: 14px 0 !important;
}

/* Arrows next to text */
body.mt.products #area-2 .comparison-unfold-btn::before,
body.mt.products #area-2 .comparison-unfold-btn::after{
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-left: 1px solid var(--clr-accent, #339933) !important;
  border-top: 1px solid var(--clr-accent, #339933) !important;
  transform: rotate(-135deg) !important;
  flex: 0 0 auto !important;
}

/* Flip arrows on expanded */
body.mt.products #area-2 .comparison-unfold-btn[aria-expanded="true"]::before,
body.mt.products #area-2 .comparison-unfold-btn[aria-expanded="true"]::after{
  transform: rotate(45deg) !important;
}

/* Collapsed: place button a bit lower */
body.mt.products #area-2 .comparison-block-col.is-collapsed .comparison-unfold-btn{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -14px !important;
}

/* Fog above the button */
body.mt.products #area-2 .comparison-block-col.is-collapsed::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 35px !important;
  height: 80px !important;
  background: linear-gradient(
    to top,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.55) 55%,
    rgba(255,255,255,0) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 6 !important;
}

/* Remove dotted focus */
body.mt.products #area-2 .comparison-unfold-btn{
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.mt.products #area-2 .comparison-unfold-btn:focus,
body.mt.products #area-2 .comparison-unfold-btn:active,
body.mt.products #area-2 .comparison-unfold-btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

body.mt.products #area-2 .comparison-unfold-btn::-moz-focus-inner{
  border: 0 !important;
}

/* Safety */
body.mt.products #area-2 .comparison-block-col
.collection_list.col-prod-comparison
.collection_container:hover{
  transform: none !important;
}


/* Smooth unfold/fold */
body.mt.products #area-2 .comparison-block-col{
  transition: max-height 420ms ease, padding-bottom 420ms ease !important;
  will-change: max-height !important;
}

/* When collapsed, keep space for the button (so it doesn't jump) */
body.mt.products #area-2 .comparison-block-col.is-collapsed{
  padding-bottom: 70px !important;
}

/* Fade hidden rows (optional, looks nicer) */
body.mt.products #area-2 .comparison-block-col .collection_list.col-prod-comparison{
  transition: opacity 260ms ease, transform 260ms ease !important;
}

body.mt.products #area-2 .comparison-block-col .collection_list.col-prod-comparison.is-hidden-row{
  opacity: 0 !important;
  transform: translateY(-6px) !important;
}

/* Responsive */
@media (max-width: 992px){
  body.mt.products #area-2 .comparison-block-col.is-collapsed .comparison-unfold-btn{
    bottom: -12px !important;
  }
}

@media (max-width: 640px){
  body.mt.products #area-2 .comparison-block-left-pos,
  body.mt.products #area-2 .comparison-block-left-neg{
    padding: 8px 10px !important;
  }
}







/* Our advantages */

.wrapp-col-advantages{
  width: 100%;
  margin: 0 -12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.wrapp-col-advantages .collection_list.col-advantages{
  width: 25%;
  padding: 0 12px;
  box-sizing: border-box;
}

.wrapp-col-advantages .collection_container{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.wrapp-col-advantages .col-advantages-icon{
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
}

.wrapp-col-advantages .col-advantages-icon img{
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

.wrapp-col-advantages .col-advantages-title{
  position: relative;
  margin-left: 18px;
  padding-left: var(--sp-xxxl);
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-large);
  color: var(--fc-primary);
  line-height: 1.4;
}

.wrapp-col-advantages .col-advantages-title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 60px;
  background: #333333;
}

@media (max-width: 1100px){
  .wrapp-col-advantages .collection_list.col-advantages{
    width: 50%;
    margin-bottom: 40px;
  }
}

@media (max-width: 640px){
  .wrapp-col-advantages{
    margin: 0;
  }

  .wrapp-col-advantages .collection_list.col-advantages{
    width: 100%;
    padding: 0;
    margin-bottom: 40px;
  }
}



/* =========================================================
   PRODUCTS – FACTS COMPARISON (CONTENT)
   Scope: body.mt.products #content #position
========================================================= */

/* Image rounding */
body.mt.products
#content
.container#position
.facts-comparison__image
.imgcontent{
  border-radius: var(--br-keyfact) !important;
  overflow: hidden !important;
}

body.mt.products
#content
.container#position
.facts-comparison__image
img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

body.mt.products
#content
.container#position
.facts-comparison__textblock{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Title */
.facts-comparison__title{
  font-family: var(--ff-primary);
  font-weight: var(--fw-bold);
  font-size: var(--fs-26);
  line-height: var(--lh-1-25);
  margin: 0;
}

.facts-comparison__title::after{
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: var(--clr-accent);
  margin: 10px 0 0;
  border-radius: 2px;
}

/* Text */
.facts-comparison__text{
  margin-top: 18px;
  margin-bottom: 35px;
  font-size: var(--fs-16);
  line-height: var(--lh-1-6);
  color: var(--fc-body, #333);
}

/* Responsive */
@media (max-width: 992px){
  body.mt.products
  #content
  .facts-comparison__textblock{
    justify-content: flex-start !important;
    margin-top: 18px !important;
  }
}



/* body.mt.products
#area-6.main-screen.grey{
  background-color: var(--clr-primary-white) !important;
} */

body.mt.products
#area-6.main-screen{
  padding: 2rem 0 !important;
}

/* AREA-5: bottom padding */
body.mt.products
#area-5.main-screen{
  padding-bottom: 2rem !important;
}

/* AREA-9: top padding */
body.mt.products
#area-9.main-screen{
  padding-top: 2rem !important;
}