.rightproduct {
    position: fixed;
    top: 0;
    height: 100%;
    overflow-y: scroll;
    background: #fff;
    transition: .5s;
    z-index: 7990;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    width: 1400px;
    right: -1400px
}

.rightproduct-active {
    right: 0
}

.rightproduct.show-right-slide {
    right: 0
}

/* Close button styles for modal */
.rightproduct .closebutton {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 7991;
    cursor: pointer;
}

.rightproduct .closefilter {
    font-size: 24px;
    color: #333;
    cursor: pointer;
    display: inline-block;
}

.rightproduct .closefilter:hover {
    color: #f78404;
}

/* Modal backdrop for outside click detection */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

/* Left modal backdrop for outside click detection */
.leftmodal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    z-index: 7990;
    cursor: pointer;
    pointer-events: auto;
}

/* Debug: Make backdrop more visible for testing */
.leftmodal-backdrop:hover {
    background: rgba(255, 0, 0, 0.1);
}

/* Ensure overlay is clickable when left modal is active */
.overlay.left-modal-active {
    z-index: 7990 !important;
}

/* Ensure signpading has proper positioning */
.rightproduct .signpading {
    position: relative;
    padding: 20px;
    min-height: 100vh;
    box-sizing: border-box;
    background: #fff;
}

.u-section-22 {
  background-image: none;
}

.u-section-22 .u-sheet-1 {
  min-height: 690px;
}

.u-section-22 .u-text-1 {
  font-size: 2.25rem;
  margin: 1px auto 0 0;
}

.u-section-22 .u-group-1 {
  min-height: 32px;
  height: auto;
  width: 186px;
  margin: -39px 0 0 auto;
}

.u-section-22 .u-container-layout-1 {
  padding: 0;
}

.u-section-22 .u-text-2 {
  font-size: 0.6875rem;
  text-transform: uppercase;
  text-decoration: underline !important;
  margin: 1px 2px 0 -2px;
}

.u-section-22 .u-group-2 {
  min-height: 30px;
  height: auto;
  width: 243px;
  margin: -7px 455px 0 auto;
}

.u-section-22 .u-container-layout-2 {
  padding-left: 0;
  padding-right: 0;
}

.u-section-22 .u-text-3 {
  margin: auto 2px 0 -2px;
}

.u-section-22 .u-text-4 {
  font-size: 0.875rem;
  margin: -15px auto 0 0;
}

.u-section-22 .u-layout-wrap-1 {
  margin-top: 1px;
  margin-bottom: 0;
}

.u-section-22 .u-layout-cell-1 {
  min-height: 632px;
}

.u-section-22 .u-container-layout-3 {
  padding: 0;
}

.u-section-22 .u-gallery-1 {
  height: 570px;
  margin-top: 0;
  margin-bottom: 0;
}

.u-section-22 .u-carousel-indicators-1 {
  position: absolute;
  bottom: 10px;
  width: auto;
  height: auto;
}

.u-section-22 .u-gallery-inner-1 {
  --gap: 0px;
}

.u-section-22 .u-carousel-item-1 {
  margin-right: 0;
}

.u-section-22 .u-over-slide-1 {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2));
  padding: 30px;
}

.u-section-22 .u-carousel-item-2 {
  margin-right: 0;
}

.u-section-22 .u-over-slide-2 {
  background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2));
  padding: 30px;
}

.u-section-22 .u-carousel-control-1 {
  position: absolute;
  left: 10px;
  width: 40px;
  height: 40px;
}

.u-section-22 .u-carousel-control-2 {
  position: absolute;
  right: 10px;
  width: 40px;
  height: 40px;
}

.u-section-22 .u-text-5 {
  --text-color-var: #f78404fa;
  font-size: 1.125rem;
  margin: -5px auto 0 0px;
}

.u-section-22 .u-text-6 {
  font-size: 1.5rem;
  margin: -28px 0 0 auto;
}

.u-section-22 .u-layout-cell-2 {
  min-height: 632px;
}

.u-section-22 .u-container-layout-4 {
  padding: 0;
}

.u-section-22 .u-group-3 {
  width: 599px;
  min-height: 181px;
  background-image: none;
  height: auto;
  margin: -31px auto 0 -157px;
}

.u-section-22 .u-container-layout-5 {
  padding-left: 0;
  padding-right: 0;
}

.u-section-22 .u-list-1 {
  width: 492px;
  margin: 15px auto 0 0;
}

.u-section-22 .u-repeater-1 {
  grid-template-columns: repeat(7, calc(14.2857% - 6px));
  min-height: 151px;
  --gap: 7px;
  grid-auto-columns: calc(14.2857% - 6px);
}

.u-section-22 .u-list-item-1 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-6 {
  padding: 0;
}

.u-section-22 .u-text-7 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-2 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-7 {
  padding: 0;
}

.u-section-22 .u-text-8 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-3 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-8 {
  padding: 0;
}

.u-section-22 .u-text-9 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-4 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-9 {
  padding: 0;
}

.u-section-22 .u-text-10 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-5 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-10 {
  padding: 0;
}

.u-section-22 .u-text-11 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-6 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-11 {
  padding: 0;
}

.u-section-22 .u-text-12 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-7 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-12 {
  padding: 0;
}

.u-section-22 .u-text-13 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-8 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-13 {
  padding: 0;
}

.u-section-22 .u-text-14 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-9 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-14 {
  padding: 0;
}

.u-section-22 .u-text-15 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-10 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-15 {
  padding: 0;
}

.u-section-22 .u-text-16 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-11 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-16 {
  padding: 0;
}

.u-section-22 .u-text-17 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-12 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-17 {
  padding: 0;
}

.u-section-22 .u-text-18 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-13 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-18 {
  padding: 0;
}

.u-section-22 .u-text-19 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-14 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-19 {
  padding: 0;
}

.u-section-22 .u-text-20 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-15 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-20 {
  padding: 0;
}

.u-section-22 .u-text-21 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-16 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-21 {
  padding: 0;
}

.u-section-22 .u-text-22 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-17 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-22 {
  padding: 0;
}

.u-section-22 .u-text-23 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-18 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-23 {
  padding: 0;
}

.u-section-22 .u-text-24 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-19 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-24 {
  padding: 0;
}

.u-section-22 .u-text-25 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-20 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-25 {
  padding: 0;
}

.u-section-22 .u-text-26 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-list-item-21 {
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
}

.u-section-22 .u-container-layout-26 {
  padding: 0;
}

.u-section-22 .u-text-27 {
  font-size: 0.625rem;
  margin: 7px 4px 0;
}

.u-section-22 .u-text-28 {
  line-height: 1.2;
  font-size: 0.875rem;
  margin: 0 auto 0 15px;
}

.u-section-22 .u-text-29 {
  line-height: 2;
  text-decoration: none solid rgb(17, 17, 17);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.875rem;
  margin: 12px auto 0 15px;
}

.u-section-22 .u-btn-1 {
  background-image: none;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 0.625rem;
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
  border-style: solid;
  margin: -8px auto 0 15px;
  padding: 15px 34px 16px 33px;
}

.u-section-22 .u-text-30 {
  line-height: 2;
  font-weight: 400;
  text-decoration: none solid rgb(17, 17, 17);
  margin: -67px 1px 0 135px;
}

.u-section-22 .u-text-31 {
  line-height: 2;
  font-weight: 400;
  text-decoration: none solid rgb(17, 17, 17);
  font-size: 0.75rem;
  margin: -6px auto 0 135px;
}

.u-section-22 .u-text-32 {
  line-height: 2;
  font-weight: 400;
  text-decoration: none solid rgb(17, 17, 17);
  font-size: 0.75rem;
  margin: 17px auto 0 37px;
}

.u-section-22 .u-btn-2 {
  background-image: none;
  box-shadow: 2px 2px 8px 0px rgba(128,128,128,1);
  margin: 20px auto 0;
}

.u-section-22 .u-btn-3 {
  background-image: none;
  box-shadow: 2px 2px 8px 0px rgba(128,128,128,1);
  font-size: 0.75rem;
  margin: 20px auto 0;
}

.u-section-22 .u-btn-4 {
  background-image: none;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  font-size: 1rem;
  margin: 20px auto 0;
}

.u-section-22 .u-btn-5 {
  background-image: none;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  font-size: 1rem;
  margin: 20px auto 0 187px;
}

.u-section-22 .u-group-4 {
  width: 92px;
  min-height: 123px;
  height: auto;
  box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.4);
  margin: -648px 20px 60px auto;
}

.u-section-22 .u-container-layout-27 {
  padding: 0;
}

.u-section-22 .u-image-1 {
  width: 91px;
}

@media (max-width: 1399px) {
  .u-section-22 .u-sheet-1 {
    min-height: 718px;
  }

  .u-section-22 .u-text-1 {
    margin-top: 0;
  }

  .u-section-22 .u-group-1 {
    height: auto;
  }

  .u-section-22 .u-group-2 {
    height: auto;
  }

  .u-section-22 .u-container-layout-2 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .u-section-22 .u-layout-cell-1 {
    background-position: 50% 50%;
    min-height: 553px;
  }

  .u-section-22 .u-group-3 {
    height: auto;
  }

  .u-section-22 .u-list-1 {
    width: 321px;
  }

  .u-section-22 .u-repeater-1 {
    grid-template-columns: calc(12.5% - 6.125px) calc(12.5% - 6.125px) calc(12.5% - 6.125px) calc(12.5% - 6.125px) calc(12.5% - 6.125px) calc(12.5% - 6.125px) calc(12.5% - 6.125px) calc(12.5% - 6.125px);
    min-height: 137px;
    grid-gap: 7px;
    grid-auto-columns: calc(14.285714285714286% - 6px);
  }

  .u-section-22 .u-text-30 {
    width: auto;
    margin-top: -62px;
    margin-right: 0;
    margin-left: 130px;
  }

  .u-section-22 .u-text-31 {
    width: auto;
    margin-top: -10px;
    margin-left: 130px;
  }

  .u-section-22 .u-text-32 {
    width: auto;
    margin-top: 16px;
    margin-left: 43px;
  }

  .u-section-22 .u-btn-5 {
    margin-left: auto;
  }

  .u-section-22 .u-group-4 {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
  }
}

@media (max-width: 1199px) {
  .u-section-22 .u-sheet-1 {
    min-height: 838px;
  }

  .u-section-22 .u-text-1 {
    font-size: 4.0625rem;
  }

  .u-section-22 .u-layout-cell-1 {
    min-height: 474px;
  }

  .u-section-22 .u-layout-cell-2 {
    min-height: 542px;
  }

  .u-section-22 .u-group-3 {
    width: 400px;
    margin-left: 0;
  }

  .u-section-22 .u-container-layout-5 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .u-section-22 .u-list-1 {
    width: 326px;
  }

  .u-section-22 .u-repeater-1 {
    min-height: 104px;
  }

  .u-section-22 .u-text-30 {
    margin-top: 20px;
    margin-left: 60px;
  }

  .u-section-22 .u-text-31 {
    margin-left: 60px;
  }
}

@media (max-width: 991px) {
  .u-section-22 .u-sheet-1 {
    min-height: 852px;
  }

  .u-section-22 .u-text-1 {
    font-size: 3.75rem;
    width: auto;
    margin-top: 7px;
  }

  .u-section-22 .u-group-1 {
    margin-top: -7px;
  }

  .u-section-22 .u-group-2 {
    margin-top: -19px;
    margin-right: 0;
  }

  .u-section-22 .u-text-3 {
    margin-top: 0;
  }

  .u-section-22 .u-text-4 {
    width: auto;
    margin-top: -32px;
  }

  .u-section-22 .u-layout-wrap-1 {
    margin-top: 13px;
  }

  .u-section-22 .u-layout-cell-1 {
    min-height: 747px;
  }

  .u-section-22 .u-text-5 {
    font-size: 0.75rem;
  }

  .u-section-22 .u-text-6 {
    font-size: 1rem;
    width: auto;
    margin-top: -19px;
  }

  .u-section-22 .u-layout-cell-2 {
    min-height: 747px;
  }

  .u-section-22 .u-group-3 {
    width: 233px;
  }

  .u-section-22 .u-container-layout-5 {
    padding-top: 4px;
    padding-bottom: 20px;
  }

  .u-section-22 .u-list-1 {
    width: 168px;
    margin-top: 0;
    margin-left: 4px;
  }

  .u-section-22 .u-repeater-1 {
    grid-template-columns: calc(25% - 5.25px) calc(25% - 5.25px) calc(25% - 5.25px) calc(25% - 5.25px);
    min-height: 283px;
    grid-auto-columns: calc(25% - 5.25px);
  }

  .u-section-22 .u-text-30 {
    margin-top: -3px;
    margin-right: -15px;
    margin-left: 15px;
  }

  .u-section-22 .u-text-31 {
    margin-left: 15px;
  }

  .u-section-22 .u-text-32 {
    margin-top: -1px;
    margin-left: 15px;
  }

  .u-section-22 .u-btn-2 {
    margin-top: 10px;
    margin-left: 20px;
  }

  .u-section-22 .u-btn-3 {
    margin-top: 21px;
  }

  .u-section-22 .u-btn-4 {
    margin-top: 13px;
    margin-left: 30px;
  }

  .u-section-22 .u-btn-5 {
    margin-top: 10px;
    margin-left: 30px;
  }

  .u-section-22 .u-group-4 {
    margin-top: -564px;
    margin-right: 0;
  }

  .u-section-22 .u-image-1 {
    height: 102px;
    width: 79px;
    left: auto;
    bottom: auto;
    right: auto;
    top: auto;
    margin: 21px 0 0 auto;
  }
}

@media (max-width: 767px) {
  .u-section-22 .u-sheet-1 {
    min-height: 590px;
  }

  .u-section-22 .u-layout-cell-1 {
    min-height: 621px;
  }

  .u-section-22 .u-text-6 {
    margin-top: -28px;
  }

  .u-section-22 .u-layout-cell-2 {
    min-height: 100px;
  }

  .u-section-22 .u-container-layout-4 {
    padding-right: 30px;
  }

  .u-section-22 .u-container-layout-5 {
    padding: 0 30px;
  }

  .u-section-22 .u-repeater-1 {
    grid-template-columns: calc(50% - 3.5px) calc(50% - 3.5px);
    min-height: 1066px;
    grid-auto-columns: calc(50% - 3.5px);
  }
}

@media (max-width: 575px) {
  .u-section-22 .u-sheet-1 {
    min-height: auto;
    padding-top: 0px !important;
  }

  .u-section-22 .u-text-1 {
    font-size: 2.70833rem;
    margin-top: 20px;
  }

  .u-section-22 .u-group-1 {
    margin-top: 10px;
    margin-right: -16px;
  }

  .u-section-22 .u-group-2 {
    margin-top: 10px;
    margin-right: auto;
    margin-left: 0;
  }

  .u-section-22 .u-text-4 {
    margin-top: 10px;
    margin-right: 0;
  }

  .u-section-22 .u-layout-wrap-1 {
    margin-top: 20px;
  }

  .u-section-22 .u-layout-cell-1 {
    min-height: auto;
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  .u-section-22 .u-gallery-1 {
    height: 300px;
  }

  .u-section-22 .u-text-5 {
    width: auto;
    margin-top: 10px;
    margin-right: 0;
  }

  .u-section-22 .u-text-6 {
    margin-top: 5px;
  }

  .u-section-22 .u-layout-cell-2 {
    min-height: 400px !important;
    width: 100% !important;
  }

  .u-section-22 .u-container-layout-4 {
    padding-right: 0;
  }

  .u-section-22 .u-group-3 {
    min-height: auto;
    margin-top: 0;
    width: 70% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: left !important;
  }

  .u-section-22 .u-container-layout-5 {
    padding-right: 20px;
    padding-left: 20px;
  }

  .u-section-22 .u-repeater-1 {
    grid-template-columns: repeat(4, 1fr);
    min-height: auto;
    grid-auto-columns: 1fr;
    gap: 5px;
  }

  .u-section-22 .u-text-28 {
    margin-top: 10px;
  }

  .u-section-22 .u-text-30 {
    margin-top: 10px;
    margin-right: 0;
    margin-left: 80px;
  }

  .u-section-22 .u-text-31 {
    margin-top: 5px;
    margin-right: 0;
    margin-left: 80px;
  }

  .u-section-22 .u-text-32 {
    margin-top: 10px;
    margin-left: 21px;
  }

  .u-section-22 .u-btn-2 {
    margin-top: 15px;
    margin-left: 2px;
    padding: 8px 96px 9px 94px;
  }

  .u-section-22 .u-btn-3 {
    padding: 10px 42px 10px 40px;
  }

  .u-section-22 .u-btn-4 {
    border-style: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.75rem;
    margin-left: 0;
    padding: 10px 82px 10px 81px;
  }

  .u-section-22 .u-btn-5 {
    margin-top: 12px;
    margin-left: 77px;
  }

  .u-section-22 .u-group-4 {
    margin-top: -205px !important;
    margin-bottom: 20px;
    position: relative !important;
    float: right !important;
    margin-right: 5px !important;
    width: 25% !important;
    clear: none !important;
  }
  
  /* Clear floats after blue box and door image */
  .u-section-22 .u-layout-cell-2::after {
    content: "";
    display: table;
    clear: both;
  }
}

/* Responsive modal styles for different device types */
@media (max-width: 1199px) {
  .rightproduct {
    width: 90%;
    right: -90%;
  }
  
  .rightproduct.show-right-slide,
  .rightproduct-active {
    right: 5%;
  }
}

@media (max-width: 991px) {
  .rightproduct {
    width: 95%;
    right: -95%;
  }
  
  .rightproduct.show-right-slide,
  .rightproduct-active {
    right: 2.5%;
  }
  
  /* Larger close button for tablet touch */
  .rightproduct .closefilter {
    font-size: 28px;
    padding: 5px;
  }
  
  .rightproduct .closebutton {
    top: 15px;
    right: 20px;
  }
}

@media (max-width: 767px) {
  .rightproduct {
    width: 100%;
    right: -100%;
  }
  
  .rightproduct.show-right-slide,
  .rightproduct-active {
    right: 0;
  }
  
  /* Even larger close button for mobile touch */
  .rightproduct .closefilter {
    font-size: 32px;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .rightproduct .closebutton {
    top: 10px;
    right: 10px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Disable AJAX modal functionality on mobile - remove productslide class behavior */
@media (max-width: 768px) {
  .productslide-desktop {
    pointer-events: auto !important;
  }
  
  /* Ensure mobile users get normal link behavior */
  .productslide {
    pointer-events: auto !important;
  }
  
  /* General mobile page optimizations */
  body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Ensure all sections start from top without gaps */
  section {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Remove any default spacing from containers */
  .u-clearfix {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure sheet containers don't create white space */
  .u-section-22 .u-sheet-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
  }
  
  /* Mobile fixes for color swatches and blue box */
  .u-section-22 .u-group-3 {
    min-height: 400px !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 0 auto !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    float: right !important;
  }
  
  .u-section-22 .u-container-layout-5 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .u-section-22 .u-list-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  .u-section-22 .u-repeater-1 {
    grid-template-columns: repeat(4, 1fr) !important;
    min-height: auto !important;
    gap: 5px !important;
    grid-auto-columns: 1fr !important;
  }
  
  /* Smaller color swatches */
  .u-section-22 .u-list-item-1,
  .u-section-22 .doorpagegroup {
    min-height: 50px !important;
    height: 50px !important;
    max-height: 50px !important;
  }
  
  .u-section-22 .u-container-layout-7,
  .u-section-22 .doorpage {
    min-height: 50px !important;
    height: 50px !important;
    padding: 2px !important;
  }
  
  .u-section-22 .u-text-9,
  .u-section-22 .doorpage p {
    font-size: 0.5rem !important;
    margin: 2px !important;
    padding: 2px !important;
    line-height: 1.1 !important;
  }
  
  /* Adjust buttons and text for mobile */
  .u-section-22 .u-text-28 {
    margin: 10px auto 0 0 !important;
    font-size: 0.8rem !important;
  }
  
  .u-section-22 .u-btn-1 {
    margin: 5px auto 0 0 !important;
    padding: 10px 15px !important;
    font-size: 0.6rem !important;
  }
  
  .u-section-22 .u-text-30 {
    margin: -50px 0 0 80px !important;
    font-size: 0.75rem !important;
  }
  
  .u-section-22 .u-btn-2,
  .u-section-22 .u-btn-3 {
    margin: 10px auto 0 !important;
    padding: 8px 20px !important;
    font-size: 0.7rem !important;
  }
  
  .u-section-22 .u-btn-4 {
    margin: 10px auto 0 !important;
    font-size: 0.65rem !important;
    padding: 8px 15px !important;
  }
}

/* Additional mobile fixes for very small screens */
@media (max-width: 480px) {
  /* Remove extra spacing on very small screens */
  .u-section-1 .u-sheet-1 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  
  .u-section-22 .u-text-1 {
    font-size: 1.5rem !important;
    padding-top: 5px !important;
  }
  
  .u-section-22 .u-gallery-1 {
    height: 250px !important;
  }
  
  .u-section-22 .u-group-3 {
    width: 70% !important;
    max-width: 70% !important;
    margin: 5px 0 0 0 !important;
    padding: 8px !important;
    float: left !important;
  }
  
  /* Position door image for very small screens */
  .u-section-22 .u-group-4 {
    margin-top: -205px !important;
    margin-bottom: 20px !important;
    position: relative !important;
    float: right !important;
    margin-right: 5px !important;
    width: 25% !important;
    clear: none !important;
  }
  
  .u-section-22 .u-layout-cell-2 {
    min-height: 400px !important;
  }
  
  .u-section-22 .u-list-1 {
    max-width: 100% !important;
    margin: 5px 0 0 0 !important;
  }
  
  .u-section-22 .u-repeater-1 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
  }
  
  /* Even smaller color swatches for very small screens */
  .u-section-22 .u-list-item-1,
  .u-section-22 .doorpagegroup {
    min-height: 45px !important;
    height: 45px !important;
    max-height: 45px !important;
  }
  
  .u-section-22 .u-container-layout-7,
  .u-section-22 .doorpage {
    min-height: 45px !important;
    height: 45px !important;
    padding: 1px !important;
  }
  
  .u-section-22 .u-text-9,
  .u-section-22 .doorpage p {
    font-size: 0.45rem !important;
    margin: 1px !important;
    padding: 1px !important;
  }
}

/* Ensure proper mobile layout for the main container */
@media (max-width: 768px) {
  /* Fix excessive spacing above header */
  .u-section-1 {
    margin-top: 0 !important;
    padding-top: 0px !important;
  }
  
  .u-section-1 .u-sheet-1 {
    min-height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  
  .u-section-1 .u-group-1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Fix section 22 spacing */
  .u-section-22 {
    margin-top: 0 !important;
    padding-top: 0px !important;
  }
  
  .u-section-22 .u-sheet-1 {
    min-height: auto !important;
    padding-top: 20px !important;
  }
  
  .u-section-22 .u-text-1 {
    margin-top: 0 !important;
    padding-top: 10px !important;
  }
  
  /* Make image gallery 100% width on mobile */
  .u-section-22 .u-layout-cell-1 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    min-height: auto !important;
    margin: 0 0 20px 0 !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
  }
  
  .u-section-22 .u-container-layout-3 {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .u-section-22 .u-gallery-1 {
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;
    margin: 0 !important;
  }
  
  .u-section-22 .u-layout-cell-2 {
    min-height: auto !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
  }
  
  .u-section-22 .u-container-layout-4 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Make sure the blue box expands with content and is positioned correctly */
  .u-section-22 .u-group-3 {
    width: 70% !important;
    max-width: 70% !important;
    margin: 0 !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    min-height: auto !important;
    float: left !important;
  }
  
  .u-section-22 .u-container-layout-5 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
  }
  
  /* Ensure layout wrap takes full width and removes white space */
  .u-section-22 .u-layout-wrap-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  
  .u-section-22 .u-layout {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  .u-section-22 .u-layout-row {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Remove any negative margins that might cause positioning issues */
  .u-section-22 .u-group-1,
  .u-section-22 .u-group-2 {
    margin: 10px 0 !important;
    position: relative !important;
  }
  
  /* Position door image next to blue box */
  .u-section-22 .u-group-4 {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    position: relative !important;
    float: right !important;
    margin-right: 10px !important;
    width: 25% !important;
    clear: none !important;
  }
  
  /* Clear floats after blue box and door image */
  .u-section-22 .u-layout-cell-2::after {
    content: "";
    display: table;
    clear: both;
  }
}