/* AC186 HOME PROJECTS — scoped slider design */

.ac186-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:14px 0 17px;
  padding:0 4px;
}

.ac186-toolbar h2 {
  color:#203650;
  font-size:clamp(22px,3vw,30px);
  line-height:1.2;
  margin:0 0 5px;
  font-weight:700;
}

.ac186-toolbar p {
  margin:0;
  color:#64758a;
  font-size:14px;
}

.ac186-arrows {
  display:flex;
  gap:8px;
  flex-shrink:0;
}

.ac186-arrows button {
  width:42px;
  height:42px;
  padding:0;
  border:1px solid #e0e6ed;
  border-radius:50%;
  color:#e97c32;
  background:#fff;
  font-size:27px;
  box-shadow:0 5px 15px rgba(0,0,0,.10);
  cursor:pointer;
}

.ac186-arrows button:disabled {
  opacity:.4;
  cursor:default;
}

html body .row.ac186-carousel {
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:16px !important;
  align-items:stretch !important;

  width:100% !important;
  max-width:100% !important;

  margin:0 !important;
  padding:8px 4px 16px !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;

  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;

  box-sizing:border-box !important;
}

html body .row.ac186-carousel::-webkit-scrollbar {
  display:none;
}

html body .row.ac186-carousel > .ac186-slide {
  display:block !important;
  float:none !important;
  flex:0 0 calc((100% - 32px)/3) !important;

  width:calc((100% - 32px)/3) !important;
  max-width:calc((100% - 32px)/3) !important;
  min-width:0 !important;

  margin:0 !important;
  padding:0 !important;

  scroll-snap-align:start;
  box-sizing:border-box !important;
}

html body .row.ac186-carousel .hom-pro {
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;

  position:relative !important;
  top:auto !important;
  left:auto !important;
  float:none !important;
  transform:none !important;

  width:100% !important;
  height:100% !important;
  min-height:0 !important;

  margin:0 !important;
  padding:0 !important;

  background:linear-gradient(
    180deg,#fff9ec 0%,#ffe7d8 100%
  ) !important;

  border:1px solid #eadfd2 !important;
  border-radius:22px !important;

  box-shadow:0 11px 25px rgba(26,44,65,.10) !important;

  overflow:hidden !important;
  box-sizing:border-box !important;
  text-align:left !important;
}

html body .row.ac186-carousel .hom-pro > img {
  display:block !important;
  position:static !important;

  width:100% !important;
  max-width:100% !important;
  height:210px !important;

  margin:0 !important;
  padding:18px !important;

  object-fit:contain !important;
  object-position:center !important;

  background:#fff8e9 !important;
  border-radius:0 !important;

  transform:none !important;
  box-sizing:border-box !important;
}

html body .row.ac186-carousel .hom-pro > h4 {
  margin:0 !important;
  padding:20px 20px 9px !important;

  color:#292d34 !important;
  font-size:23px !important;
  line-height:1.24 !important;
  font-weight:700 !important;
  text-align:left !important;
}

html body .row.ac186-carousel .hom-pro > p {
  flex:1 1 auto;

  margin:0 !important;
  padding:0 20px 20px !important;

  color:#59697a !important;
  font-size:15px !important;
  line-height:1.6 !important;
  text-align:left !important;
}

html body .row.ac186-carousel .hom-pro > a {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:flex-start !important;

  width:auto !important;
  min-height:43px !important;

  margin:0 20px 22px !important;
  padding:10px 20px !important;

  color:#d97228 !important;
  background:#fff !important;

  border:1px solid #f0d5bf !important;
  border-radius:999px !important;

  font-size:15px !important;
  font-weight:700 !important;
  text-decoration:none !important;
}

.ac186-dots {
  display:flex;
  justify-content:center;
  gap:8px;
  margin:12px 0 24px;
}

.ac186-dots button {
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:99px;
  background:#c9d3df;
  cursor:pointer;
}

.ac186-dots button.active {
  width:24px;
  background:#188ca1;
}

@media(max-width:1023px) {
  html body .row.ac186-carousel > .ac186-slide {
    flex-basis:calc((100% - 16px)/2) !important;
    width:calc((100% - 16px)/2) !important;
    max-width:calc((100% - 16px)/2) !important;
  }
}

@media(max-width:639px) {
  html body .row.ac186-carousel {
    gap:12px !important;
    padding:8px 7px 18px !important;
  }

  html body .row.ac186-carousel > .ac186-slide {
    flex:0 0 88% !important;
    width:88% !important;
    max-width:88% !important;
  }

  html body .row.ac186-carousel .hom-pro > img {
    height:185px !important;
    padding:15px !important;
  }

  html body .row.ac186-carousel .hom-pro > h4 {
    font-size:21px !important;
  }

  .ac186-toolbar {
    padding:0 7px;
  }

  .ac186-arrows button {
    width:39px;
    height:39px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html body .row.ac186-carousel {
    scroll-behavior:auto;
  }
}