.elementor-4228 .elementor-element.elementor-element-8097516{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-4228 .elementor-element.elementor-element-8097516, .elementor-4228 .elementor-element.elementor-element-8097516.thegem-e-con-layout-thegem{--content-width:1420px;}.elementor-4228 .elementor-element.elementor-element-17025e5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4228 .elementor-element.elementor-element-62f017e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4228 .elementor-element.elementor-element-2021cf1 > .elementor-widget-container{margin:0px 0px -4px 0px;}.elementor-4228 .elementor-element.elementor-element-2021cf1 .thegem-te-product-title{justify-content:left;text-align:left;}.elementor-4228 .elementor-element.elementor-element-2021cf1 .thegem-te-product-title .product-title{font-family:"Montserrat", Sans-serif;font-weight:700;text-transform:uppercase;}.elementor-4228 .elementor-element.elementor-element-83ab7a1{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-4228 .elementor-element.elementor-element-b9b7fc3{--divider-border-style:solid;--divider-color:var( --e-global-color-kadence1 );--divider-border-width:1px;}.elementor-4228 .elementor-element.elementor-element-b9b7fc3 .elementor-divider-separator{width:100%;}.elementor-4228 .elementor-element.elementor-element-b9b7fc3 .elementor-divider{padding-block-start:5px;padding-block-end:5px;}.elementor-4228 .elementor-element.elementor-element-9aa3da6 .elementor-button{font-size:25px;}.elementor-4228 .elementor-element.elementor-element-519acac{--divider-border-style:solid;--divider-color:var( --e-global-color-kadence1 );--divider-border-width:1px;}.elementor-4228 .elementor-element.elementor-element-519acac .elementor-divider-separator{width:100%;}.elementor-4228 .elementor-element.elementor-element-519acac .elementor-divider{padding-block-start:5px;padding-block-end:5px;}.elementor-4228 .elementor-element.elementor-element-d67430a{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-4228 .elementor-element.elementor-element-d67430a, .elementor-4228 .elementor-element.elementor-element-d67430a.thegem-e-con-layout-thegem{--content-width:1420px;}.elementor-4228 .elementor-element.elementor-element-d67430a.e-con{--align-self:center;}.elementor-4228 .elementor-element.elementor-element-1923ea6{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4228 .elementor-element.elementor-element-5166446{--divider-border-style:solid;--divider-color:var( --e-global-color-text );--divider-border-width:1px;}.elementor-4228 .elementor-element.elementor-element-5166446 .elementor-divider-separator{width:100%;}.elementor-4228 .elementor-element.elementor-element-5166446 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}@media(min-width:768px){.elementor-4228 .elementor-element.elementor-element-17025e5{--width:50%;}.elementor-4228 .elementor-element.elementor-element-62f017e{--width:50%;}}/* Start custom CSS for container, class: .elementor-element-1923ea6 *//* FORCE GRID TO OVERRIDE THEGEM FLEX WRAPPER */
.compatible-products-wrapper {
    width: 100% !important;
    display: block !important;
}

/* 6-COLUMN GRID */
.compatible-products-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 24px !important;
    margin-top: 20px !important;
}

/* CARD STYLING */
.compatible-product-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 18px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}

.compatible-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.1);
}

.compatible-product-divider {
    height: 2px;
    width: 40%;
    margin: 10px auto;
    background-color: #1a9ce2;
}

.compatible-product-title {
    font-size: 13px;
    text-transform: uppercase;
    color: #1a9ce2;
    font-weight: 600;
    margin-top: 10px;
}
/* Section Titles for Compatibility Blocks */
.compatible-section-title {
    font-size: 20px;       /* smaller */
    font-weight: 700;
    color: #1A9CE2;        /* Harmsco blue */
    margin: 20px 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Reduce spacing between groups */
.compatible-products-wrapper {
    margin-bottom: 25px;
}

/* Grid 6 columns */
.compatible-products-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 20px;
}/* End custom CSS */
/* === Compatible Products grid — independent of TheGem shop layout === */
.compatible-products-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 30px;
  margin-top: 40px;
}

/* six columns desktop, three tablet, two mobile */
.compatible-product-card {
  flex: 0 1 calc(16.66% - 30px);
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 15px;
  text-align: center;
  transition: all .3s ease;
}

@media (max-width: 1199px) {
  .compatible-product-card { flex: 0 1 calc(33.33% - 25px); }
}
@media (max-width: 767px) {
  .compatible-product-card { flex: 0 1 calc(50% - 20px); }
}

/* image & title */
.compatible-product-thumb img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.compatible-product-title {
  font-size: 14px !important;
  font-weight: 600;
  color: #1A9CE2;
  margin-top: 10px;
}

/* hover effect */
.compatible-product-card:hover {
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}