/* AC198: Home Projects only */

.ac198-stage{
 position:relative;
 width:100%;
 max-width:100%;
 min-width:0;
 margin:0;
}

.row.ac198-row{
 --ac198-gap:12px;
 width:100%!important;
 max-width:100%!important;
 min-width:0!important;
 margin:0!important;
 padding:5px!important;
 box-sizing:border-box!important;
 gap:var(--ac198-gap)!important;
 align-items:stretch!important;
}

.ac198-row.ac198-mode-grid{
 display:grid!important;
 grid-template-columns:
  repeat(var(--ac198-count),minmax(0,1fr))!important;
}

.ac198-row.ac198-mode-slider{
 display:flex!important;
 flex-wrap:nowrap!important;
 overflow-x:auto!important;
 overflow-y:hidden!important;
 scroll-snap-type:x mandatory;
 scrollbar-width:none;
 -webkit-overflow-scrolling:touch;
 scroll-behavior:smooth;
}

.ac198-row.ac198-mode-slider::-webkit-scrollbar{
 display:none;
}

.ac198-row > .ac198-item{
 float:none!important;
 display:block!important;
 min-width:0!important;
 max-width:100%!important;
 margin:0!important;
 padding:0!important;
 box-sizing:border-box!important;
}

.ac198-row.ac198-mode-slider > .ac198-item{
 flex:0 0 var(--ac198-basis)!important;
 width:var(--ac198-basis)!important;
 max-width:var(--ac198-basis)!important;
 scroll-snap-align:start;
}

.ac198-row .ac198-item .hom-pro{
 display:flex!important;
 flex-direction:column!important;
 align-items:stretch!important;
 width:100%!important;
 height:100%!important;
 min-height:0!important;
 margin:0!important;
 padding:0!important;
 overflow:hidden!important;
 box-sizing:border-box!important;
 border-radius:17px!important;
 border:1px solid #e2e8ee!important;
 background:var(--ac187-card-bg,#fff)!important;
 box-shadow:0 7px 19px rgba(20,45,70,.08)!important;
 text-align:left!important;
}

.ac198-row .hom-pro > img{
 display:block!important;
 width:100%!important;
 height:clamp(115px,18vw,210px)!important;
 max-width:100%!important;
 object-fit:contain!important;
 object-position:center!important;
 background:var(--ac187-image-bg,#fff)!important;
 padding:10px!important;
 margin:0!important;
 border:0!important;
 border-radius:0!important;
 box-sizing:border-box!important;
}

.ac198-row .hom-pro > h4{
 padding:12px 13px 5px!important;
 margin:0!important;
 font-size:clamp(13px,1.7vw,21px)!important;
 line-height:1.3!important;
 color:var(--ac187-title,#203650)!important;
 overflow-wrap:anywhere!important;
 text-align:left!important;
}

.ac198-row .hom-pro > p{
 flex:1 1 auto;
 padding:0 13px 13px!important;
 margin:0!important;
 font-size:clamp(11px,1.2vw,15px)!important;
 line-height:1.5!important;
 color:var(--ac187-description,#586879)!important;
 text-align:left!important;
}

.ac198-row .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:35px!important;
 margin:0 12px 13px!important;
 padding:8px 13px!important;
 border-radius:99px!important;
 border:1px solid #e0e5ea!important;
 background:var(--ac187-button-bg,#fff)!important;
 color:var(--ac187-button-text,#d97228)!important;
 font-size:clamp(10px,1.1vw,14px)!important;
 text-decoration:none!important;
 font-weight:700!important;
}

.ac198-toolbar{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:12px;
 margin:12px 0;
 padding:0 5px;
}

.ac198-heading h2{
 color:var(--ac187-heading,#203650)!important;
 font-size:clamp(20px,3vw,30px);
 margin:0;
}

.ac198-heading p{
 color:#67798a;
 font-size:14px;
 margin:4px 0 0;
}

.ac198-nav{
 display:flex;
 gap:9px;
 flex-shrink:0;
}

.ac198-nav button{
 display:grid;
 place-items:center;
 width:42px;
 height:42px;
 padding:0;
 border:1px solid #dbe5ec;
 border-radius:50%;
 background:#fff;
 color:#e37c37;
 font-size:26px;
 box-shadow:0 6px 16px #10203020;
 cursor:pointer;
}

.ac198-toolbar.ac198-right{
 flex-direction:column;
 align-items:flex-end;
}

.ac198-toolbar.ac198-left{
 flex-direction:column;
 align-items:flex-start;
}

.ac198-nav.ac198-split{
 position:absolute;
 z-index:8;
 top:50%;
 left:0;
 right:0;
 transform:translateY(-50%);
 justify-content:space-between;
 pointer-events:none;
 padding:0 4px;
}

.ac198-nav.ac198-split button{
 pointer-events:auto;
}

.ac198-dots{
 display:flex;
 justify-content:center;
 gap:7px;
 margin:12px 0 23px;
}

.ac198-dots button{
 width:9px;
 height:9px;
 border:0;
 padding:0;
 border-radius:99px;
 background:#c9d3de;
}

.ac198-dots button.active{
 width:23px;
 background:#188fa5;
}

@media(max-width:767px){
 .ac198-row .hom-pro > img{
  height:clamp(80px,32vw,155px)!important;
  padding:5px!important;
 }
 .ac198-row .hom-pro > h4{
  font-size:clamp(11px,3vw,16px)!important;
  padding:9px 7px 5px!important;
 }
 .ac198-row .hom-pro > p{
  font-size:clamp(10px,2.7vw,13px)!important;
  padding:0 7px 9px!important;
 }
 .ac198-row .hom-pro > a{
  font-size:11px!important;
  min-height:30px!important;
  margin:0 6px 8px!important;
  padding:6px 8px!important;
 }
 .ac198-row.ac198-count-4 .hom-pro > h4{
  font-size:10px!important;
 }
 .ac198-row.ac198-count-4 .hom-pro > p{
  font-size:9px!important;
 }
 .ac198-row.ac198-count-4 .hom-pro > a{
  font-size:9px!important;
  padding:5px!important;
 }
}

@media(prefers-reduced-motion:reduce){
 .ac198-row.ac198-mode-slider{
  scroll-behavior:auto;
 }
}



/* ==========================================
   AC-R199-DESKTOP-CLASSIC
   Desktop Classic Grid Width + Design Fix
   Does not affect mobile or Slider
   ========================================== */

@media screen and (min-width:768px) {

  /* Restore proper grid tracks */

  html body .row.ac198-row.ac198-mode-grid {

    display:grid !important;

    grid-template-columns:
      repeat(
        var(--ac198-count,4),
        minmax(0,1fr)
      ) !important;

    gap:18px !important;

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

    margin:0 !important;
    padding:12px 0 25px !important;

    align-items:stretch !important;
    justify-items:stretch !important;

    box-sizing:border-box !important;
  }

  /*
   * CRITICAL FIX:
   * Bootstrap .col-md-3 previously made each
   * grid item only 25% of its own grid track.
   */

  html body .row.ac198-row.ac198-mode-grid
  > .ac198-item {

    display:block !important;

    float:none !important;
    clear:none !important;

    flex:none !important;
    flex-basis:auto !important;

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

    height:auto !important;

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

    justify-self:stretch !important;
    align-self:stretch !important;

    grid-column:auto !important;

    box-sizing:border-box !important;
  }

  /* Restore classic white card appearance */

  html body .row.ac198-row.ac198-mode-grid
  > .ac198-item .hom-pro {

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;

    position:relative !important;
    float:none !important;

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

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

    margin:0 !important;
    padding:24px 17px 21px !important;

    background:#ffffff !important;

    border:1px solid #e9edf1 !important;
    border-radius:12px !important;

    box-shadow:
      0 7px 23px rgba(22,43,64,.09) !important;

    text-align:center !important;

    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  /* Original photo proportions */

  html body .row.ac198-row.ac198-mode-grid
  > .ac198-item .hom-pro > img {

    display:block !important;

    position:static !important;
    float:none !important;

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

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

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

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;

    transform:none !important;

    box-sizing:border-box !important;
  }

  /* Centered classic title */

  html body .row.ac198-row.ac198-mode-grid
  > .ac198-item .hom-pro > h4 {

    display:block !important;

    width:100% !important;

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

    color:#30343a !important;

    font-size:clamp(17px,1.6vw,23px) !important;
    line-height:1.3 !important;
    font-weight:700 !important;

    text-align:center !important;
    overflow-wrap:break-word !important;
  }

  /* Description */

  html body .row.ac198-row.ac198-mode-grid
  > .ac198-item .hom-pro > p {

    flex:1 1 auto !important;

    width:100% !important;

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

    color:#616b75 !important;

    font-size:clamp(13px,1.15vw,16px) !important;
    line-height:1.6 !important;

    text-align:center !important;
    overflow-wrap:break-word !important;
  }

  /* Original style Explore Now button */

  html body .row.ac198-row.ac198-mode-grid
  > .ac198-item .hom-pro > a {

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;

    width:auto !important;
    max-width:100% !important;
    min-height:42px !important;

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

    background:#1c2b42 !important;
    color:#ffffff !important;

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

    font-size:14px !important;
    line-height:1.3 !important;
    font-weight:700 !important;

    text-align:center !important;
    text-decoration:none !important;

    white-space:normal !important;

    box-sizing:border-box !important;
  }

  html body .row.ac198-row.ac198-mode-grid
  > .ac198-item .hom-pro > a:hover {

    background:#293f61 !important;
    border-color:#293f61 !important;
    color:#ffffff !important;
  }
}

/* Tighter desktop screens */

@media screen and (min-width:768px)
and (max-width:1050px) {

  html body .row.ac198-row.ac198-mode-grid {
    gap:12px !important;
  }

  html body .row.ac198-row.ac198-mode-grid
  > .ac198-item .hom-pro {

    padding:18px 11px !important;
  }

  html body .row.ac198-row.ac198-mode-grid
  > .ac198-item .hom-pro > img {

    width:135px !important;
    height:135px !important;
  }

  html body .row.ac198-row.ac198-mode-grid
  > .ac198-item .hom-pro > h4 {

    font-size:16px !important;
  }

  html body .row.ac198-row.ac198-mode-grid
  > .ac198-item .hom-pro > p {

    font-size:13px !important;
  }
}

/* END AC-R199-DESKTOP-CLASSIC */



/* AC-R200-ORIGINAL-MOBILE-PEEK */
/* Desktop has no R198 custom styling. */

@media screen and (max-width:767px) {

  html body .row.ac198-row.ac198-mode-slider {

    display:flex !important;
    flex-wrap:nowrap !important;

    justify-content:flex-start !important;
    align-items:stretch !important;

    gap:12px !important;

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

    margin:0 !important;
    padding:9px 9px 19px !important;

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

    scroll-snap-type:x mandatory;
    scroll-padding-left:9px;

    box-sizing:border-box !important;
  }

  html body .row.ac198-row.ac198-mode-slider
  > .ac198-item {

    display:block !important;

    float:none !important;
    clear:none !important;

    flex:0 0 86% !important;

    width:86% !important;
    max-width:86% !important;
    min-width:0 !important;

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

    scroll-snap-align:start;

    box-sizing:border-box !important;
  }

  /* Reuse the existing approved colors and card. */

  html body .row.ac198-row.ac198-mode-slider
  .hom-pro {

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;

    width:100% !important;
    height:100% !important;

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

    background:var(
      --ac187-card-bg,#ffe7d8
    ) !important;

    border:1px solid #e7e1dc !important;
    border-radius:24px !important;

    box-shadow:
      0 9px 25px rgba(25,48,67,.10) !important;

    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  html body .row.ac198-row.ac198-mode-slider
  .hom-pro > img {

    display:block !important;

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

    height:clamp(185px,59vw,235px) !important;

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

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

    background:var(
      --ac187-image-bg,#fff9ec
    ) !important;

    border:0 !important;
    border-radius:0 !important;

    box-sizing:border-box !important;
  }

  html body .row.ac198-row.ac198-mode-slider
  .hom-pro > h4 {

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

    color:var(
      --ac187-title,#292d34
    ) !important;

    font-size:clamp(18px,4.6vw,23px) !important;
    line-height:1.28 !important;

    overflow-wrap:break-word !important;
    text-align:left !important;
  }

  html body .row.ac198-row.ac198-mode-slider
  .hom-pro > p {

    flex:1 1 auto !important;

    margin:0 !important;
    padding:0 17px 19px !important;

    color:var(
      --ac187-description,#59697a
    ) !important;

    font-size:clamp(13px,3.6vw,16px) !important;
    line-height:1.55 !important;
    text-align:left !important;
  }

  html body .row.ac198-row.ac198-mode-slider
  .hom-pro > a {

    align-self:flex-start !important;

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

    margin:0 16px 20px !important;
    padding:9px 17px !important;

    border-radius:999px !important;

    background:var(
      --ac187-button-bg,#fff
    ) !important;

    color:var(
      --ac187-button-text,#d97228
    ) !important;

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

/* END AC-R200-ORIGINAL-MOBILE-PEEK */


/* AC-R201-MOBILE-CLEANUP */

.ac201-hidden-original{
 display:none!important;
}

@media(max-width:767px){

 html body .ac201-clean-shell{
  background:#fff!important;
  border:0!important;
  box-shadow:none!important;
 }

 html body .ac198-stage{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
 }

 html body .row.ac198-row.ac198-mode-slider{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:10px 9px 18px!important;
  gap:12px!important;
 }

 /* One full card plus a deliberately small
    preview edge of the next card. */

 html body .row.ac198-row.ac198-mode-slider
 > .ac198-item{
  flex:0 0 calc(100% - 43px)!important;
  width:calc(100% - 43px)!important;
  max-width:calc(100% - 43px)!important;
  min-width:0!important;
  overflow:visible!important;
 }

 html body .row.ac198-row.ac198-mode-slider
 .hom-pro{
  border-radius:23px!important;
  box-shadow:0 8px 20px rgba(26,48,71,.10)!important;
  overflow:hidden!important;
 }

 /* Move split arrows over the photo, not text. */

 html body .ac198-stage
 .ac198-nav.ac198-split{
  top:clamp(100px,31vw,135px)!important;
  transform:translateY(-50%)!important;
  padding:0 3px!important;
 }

 html body .ac198-stage
 .ac198-nav.ac198-split button{
  width:43px!important;
  height:43px!important;
  font-size:25px!important;
  border-radius:50%!important;
  box-shadow:0 4px 13px rgba(0,0,0,.14)!important;
 }

 html body .ac198-stage + .ac198-dots{
  background:transparent!important;
  margin:13px 0 20px!important;
 }
}

/* Desktop original Classic remains unchanged.
   Only selected desktop slider gets custom layout. */

@media(min-width:768px){

 html body .row.ac198-row.ac198-mode-slider
 > .ac198-item{
  min-width:0!important;
  max-width:var(--ac198-basis)!important;
  width:var(--ac198-basis)!important;
  flex:0 0 var(--ac198-basis)!important;
 }

 html body .row.ac198-row.ac198-mode-slider
 .hom-pro{
  border-radius:18px!important;
  overflow:hidden!important;
 }
}



/* AC-R202-TRANSPARENT-SLIDER */

/* Only slider outer surfaces.
   Individual card colors are preserved. */

html body .ac198-stage,
html body .ac201-clean-shell,
html body .ac198-toolbar,
html body .ac198-dots,
html body .row.ac198-row.ac198-mode-slider {

    background:transparent!important;
    background-image:none!important;

    border-color:transparent!important;
    box-shadow:none!important;
}

@media(max-width:767px) {

    html body .ac198-stage,
    html body .ac201-clean-shell {

        background:transparent!important;
        border:0!important;
        box-shadow:none!important;
    }

    html body .row.ac198-row.ac198-mode-slider {

        background:transparent!important;
        border:0!important;
        box-shadow:none!important;

        padding-top:8px!important;
        padding-bottom:14px!important;
    }

    html body .ac198-stage + .ac198-dots {

        background:transparent!important;
        border:0!important;
        box-shadow:none!important;
    }

    /* Keep approved card shadows and colors. */

    html body .row.ac198-row.ac198-mode-slider
    .hom-pro {

        box-shadow:
          0 8px 22px rgba(25,47,69,.10)!important;
    }
}