#breadcrumb, .page-category, #cph_main_pnlNormal {
display: none;

}

#block-desktop {padding-right: 10px;}

h2.desktop-title {font-size: 30px;}

.specialty-title {text-transform: none !important;}

#Body {/*background-color: #EDEDED !important;*/ background: none;}

/*#content {margin-left: 12px !important;}*/
#bcca-desktop-ama {display: block;}
#bcca-mobile-ama {display: none;}
.for-your-home-member-rewards {display: none;}

@media only screen and (min-device-width: 768px) and (max-device-width: 1023px) {
    #content {
      left: -48px;
      width: 85%;
    }

    .home-page-top-items .slit-blocks_item:last-child {
        width: 75% !important;
    }

    .home-page-top-items .slit-blocks_item {
      height: 382px;
    }

    .home-section-two ul
    {
      margin-left: 45px;
    }
    .home-section-two ul li {
      margin-left: 1px;
      width: 298px !important;
    }

    .more-products li .content_block a {left: 27px;}

    .slick-list.draggable {margin-right: 10px;}
    .home-section-two li:nth-child(2) {
      margin-right: 5px;
    }
    
    .home-section-two li:nth-child(1) {
      margin-right: 5px;
    }

    .home-section-four li:nth-child(1) {
      margin-left: 55px !important;
      width: 428px !important;
    }

    .home-section-four li:nth-child(2) {
      margin-left: 45px !important;
      width: 428px !important;
    }

    .home-section-four li:nth-child(1) .content_block {
      position: relative;
      left: 55px !important;
    }

    .home-section-four li:nth-child(2) .content_block {
      position: relative;
      left: 35px !important;
     }

    .how-to-paint-stain {background: #fff !important; }
    .how-to-paint-stain .Colour-trend-col1 {width: 90px !important;}
    .how-to-paint-stain .Colour-trend-col2 {width: 55px !important;}
    .how-to-paint-stain .Colour-trend-col3 {width: 60px !important;}
    .how-to-paint-stain .Colour-trend-col4 {width: 77% !important; }
    .product-profile-custom .sf_colsOut.Colour-trend-col4 {
      width: 77% !important;
    }
    .h2-30 {
      font-size: 24px !important;
    }

 }
      

@media (max-width: 640px){

      .paint-colours-feature-grid.common-problesm-solutions {
        /*grid-template-columns: 1fr !important;*/
        display: flex;
        flex-direction: column;
    }

    #header {
        border-bottom: none !important;
        height: 115px !important;
    }

    .slick-arrow.slick-prev {
      top: 130px;
      z-index: 2;
    }

    .slick-arrow.slick-next {
      right: 12px;
      top: 130px;
    }
    
    .specialty-title {
        margin: 0px !important; 
        }

        .home-page-top-items {
            padding-left: 37px;
            padding-right: 33px;
          }

        .paint-colours-title {
            padding: 0 35px;
            text-align: center;
        }

        .paint-colours-title {font-weight: bold;}
        
        .home-section-four .btn-yellow {
            position: relative;
            bottom: 54px;
            padding: 10px 70px;
            left: 40px;
        }

        .home-section-four ul li::before {
            content: " ";
          }

        .home-section-four ul li {
            margin-left: 13px;
            margin-right: 33px;
        }

        #home-banner-ul-list {margin-right: 33px; margin-left: 23px;}
        #home-banner-ul-list .banner-img img {
            height: 257px !important;
           }
        
        #home-banner-ul-list .banner-content {
            height: 255px !important;
        }

        .home-section-three ul li::before {
            content: " ";
          }

        .home-section-three .item-link {
            height: 65px;
        }

            .home-section-three .item-link .btn-yellow {
                position: relative;
                top: 15px;
                left: 10px !important;
            }

        .home-section-two ul li:last-child .description {
                display: none;
        }

        .blank-col {display: none;}

        .home-page-top-items div:nth-child(1) {
          height: 270px !important;
      }
      
      .home-page-top-items div:nth-child(2) {
              height: 230px !important;
              margin-bottom: 35px;
      }

     /* .home-section-four li:nth-child(2) .content_block{
        position: relative;
        right: 18px;
      }*/

      .banner-title {font-size: 16px;}
      a.technical {padding: 3px 10px;}
      .banner-content {padding-top: 0px;}

    .home-page .product-profile-custom .more-products-content-block {
        margin-bottom: 15px;
    }

    .home-section-two .custom-choose-btn {
        justify-content: center;
        display: flex;
        align-items: center;
    }

        .home-section-two .custom-choose-btn .btn-yellow {
            padding: 10px 15px;
            left: auto;
            width: auto;
        }

        .home-page-hero .home-page-hero__title 
        {
          text-align: left !important;
          font: normal normal bold 28px / 30px Lato !important;
          margin-bottom: 6px !important;
        }

        .home-page-hero .home-page-hero__content {
          text-align: left;
          margin-bottom: 0px;
          margin-top: 12px;
        }

        .home-page-hero {
          padding: 0px 0 30px !important;
        }
        .home-page-hero .home-page-hero__desc {
           max-width: 100% !important;
           padding: 0px 0px;
           margin-bottom: 0px;
        }

        .home-page-hero .home-page-hero__media {
          order: -1;
        }

        .home-page-hero__inner {
          gap:0px;
        }

        .specialty__title {
          margin: 0px 0 20px;
        }
       
        .home-narrative-banner {
          margin: 70px 0px 70px !important;
        }

        .home-buy-canadian {
          display: flex !important;
          flex-direction: column !important;
          overflow: hidden;
          margin-bottom: 13px !important;
          width: 100%;                    
          height: auto !important;
        }

        .home-buy-canadian .swatches-wrapper {
           order: 2;
            background: #ffffff !important;
            padding: 0 !important;
            display: block !important;
            position: relative;
          top: 10px;
        }

        .home-buy-canadian .buy-canadian-content {
          /*flex-direction: column !important;
          padding-top: 22px !important;
          padding-left: 30px !important;
          padding-bottom: 30px !important;
          gap: 0px !important;
*/
          order: 1;
          display: flex !important;
          flex-direction: column !important;
          
          justify-content: flex-start !important;
          background: #E0D7D0 !important;
          padding: 22px 30px 22px 30px !important;
          gap: 14px !important;
          
        }

        .home-buy-canadian .swatches {
          display: flex !important;
          flex-direction: column !important;
          gap: 5px;
          padding: 0 0 12px 0;
        }

        .home-buy-canadian .swatch {
          width: 100% !important;
          height: 26px !important;
          margin: 0px !important;
        }

        .home-buy-canadian .swatch-3 {            
            background: #C7CECB !important;
            height: 23px !important;
        }

        .home-buy-canadian .swatch-2 {                        
            height: 30px !important;
        }

        .home-buy-canadian .swatch-1 {            
            background: #AA8E78 !important;
            height: 35px !important;
        }

        .home-buy-canadian .buy-text {
          width: 100% !important;
        }

        .home-buy-canadian .buy-logo img  
        {
          width: 125px !important;
          height: 125px !important;
        }

        .paint-colours-title h2 {
              margin-top: 0px;
              text-align: center;
              font: normal normal bold 30px/34px Lato;
              letter-spacing: -0.3px;
              color: #000;
              opacity: 1;
        }

        .paint-colours-title p {
              margin-bottom: 0px;
              text-align: center;
              font: normal normal normal 14px/24px Source Sans Pro;
              letter-spacing: 0px;
              color: #646464;
              opacity: 1;
        }

        .home-fanclub-banner {
              margin: 70px 0px 30px !important;
              background-image: url("../png/fan-clb-background---mobile-2.png") !important;
              height: 463px !important;
        }

        .common-problesm-solutions .card--img {
          width: 100% !important;
          height: auto !important;
          margin-bottom: 10px;
        }

        .home-fanclub-banner .fanclub-content {
          padding: 37px 10px 170px !important;
          min-height: 470px;
        }

        .home-fanclub-banner .fanclub-left {
          margin-right: 0px !important;
        }

        .home-fanclub-banner .fanclub-middle {          
          text-align: center !important;
          font: normal normal bold 26px/34px Lato;
          letter-spacing: -0.26px;
          color: #000000;
          opacity: 1;
          margin-bottom: 15px;
        }

        .home-fanclub-banner .fanclub-sub {
          margin-top: 18px !important;
        }

        .home-fanclub-banner .fanclub-heading {
          margin: 0px !important;
        }

        /*****ffffffffffffff***/

    #bcca-desktop-ama {display: none !important;}
    
  h2.paint-blog-title {
    text-align: center !important;
  }

  .paint-colours-feature-grid .btn 
    {
      display: block !important;
      width: fit-content;
      margin: 20px auto 0;
    }

    /***************BCCA mobile section*****************/


  .bcaa-mobile-promo-banner{
    display:block;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 391 / 611;

    background-image: url("../png/bcaa-background---mobile.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    position: relative;
    margin-bottom: 30px;
  }

  /* overlay wrapper */
  .mobile-promo-content{
    position: absolute;
    inset: 0;
  }

  /* TEXT BLOCK placement (inside blue) */
  .mobile-promo-text{
    position: absolute;
    left: 50%;
    top: 10%;                /* move up/down here */
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
  }

  .mobile-promo-text a{
    text-decoration: none;
    color: #fff;
    display: inline-block;
  }

  .mobile-small{
    margin: 0;
    line-height: 1.15;
    font-size: clamp(14px, 4.2vw, 20px);
    font-weight: 600;
  }

  .mobile-save-percentage{
    display: block;
    margin: clamp(6px, 2vw, 10px) 0;
    line-height: 0.95;
    font-size: clamp(54px, 16vw, 92px);
    font-weight: 800;
  }

  /* LOGOS BLOCK placement (lower, on beige) */
  .mobile-promo-logos{
    position: absolute;
    left: 50%;
    top: 55%;                /* move up/down here */
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
  }

  .mobile-promo-logos a{
    display: inline-block;
  }

  #bcca-mobile-img-ama{
    width: min(92%, 360px);
    height: auto;
    display: block;
  }
 
    /***************End BCCA mobile section************************************/
  .card__tag 
  {
        width: 50%;
      text-align: center;
      margin-bottom: 0px !important;
  }

  .find-your-solution-audience {
    padding: 30px 0px 0px !important;
  }

    .find-your-solution-audience .audience-img 
    {
      width: 100% !important;
      height: 220px !important;
    }
    .find-your-solution-audience .audience-tag {
      margin-bottom: 0px !important;
      width: 224px;
      text-align:center;
    }

    .find-your-solution-audience .audience-img img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block;
    }

    .paint-colours-feature-grid.for-your-home-professionals .card-badge {
       margin-bottom: 0px !important;
    }

    .find-your-solution-audience .audience-grid{
      grid-template-columns: 1fr !important;  
      max-width: 100%; /* keeps it looking like your mobile screenshot */
      row-gap: 50px !important;
    }


    .find-your-solution-audience .audience-img {
        width: 100% !important;
        height: auto !important;        
        aspect-ratio:16/9 !important;   /* keeps image proportion */
        overflow:hidden;
        
    }

    .find-your-solution-audience .audience-img img 
    {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;

    }
}



@media (min-width: 640px){
    /***start new***/
    #header {
      border-bottom: none !important;
      /*height: 146px !important;*/
    }

    .h-w2 {
      height: 120px;
    }

    #main {
              padding-top: 0px;
    }

    #mainnav ul.L1 {
        position: relative;
        height: 0px;
    }
    /***end new***/
    .specialty-title {
        margin-top: 0px !important; font-size: 30px !important;
    }


        #home-banner-ul-list {margin: 0px; padding: 0px;}
        .home-match-colour {margin-top: 0px !important;}
        
        
        
        #home-banner-ul-list li {margin: 0px; padding: 0px;}    
        #subnav {display: none;}
        
       
        .health-safety-section {position: relative; left: -12px;}
    
        .home-page-top-items .slit-blocks_content {
            padding-left: 60px;
            padding-right: 40px;
            padding-top: 25px;
        }
    
        .home-page-top-items .slit-blocks_content div {
            height: initial;
          }
    
          .home-section-two .btn-yellow:hover {
            background: #000;
              background-color: rgb(0, 0, 0);
            border-color: #000;
            color: #fff !important;
          }
          
          .home-section-two li .content_block .btn-yellow {
            width: 235px;
            bottom: 65px;
          }      
          
          .home-section-store-locator {
            float: left;
            height: 295px;
            padding-left: 50px;
            padding-right: 0px;
         }
        
        .home-section-store-locator  .item-title {        
            font-size: 30px;
            font-weight: bold;
            /*margin-top: 45px;*/
        }
        
        
        .home-section-store-locator .item-summary {
            margin-bottom: 24px;
            
        }
    
        
        .home-page-top-items{
            display: flex;
            padding-right: 82px!important;
        }
        
        .home-page-top-items .slit-blocks_item:last-child {
            width: 100%;
            margin: 0px !important;
        }
        .home-page-top-items .slit-blocks_content {
            margin: 0 auto;
            display: block;
            width: 415px;
        }
        
        .home-page-top-items .slit-blocks_item {
            margin-bottom: 0px !important;
        }
        
        .home-section-three.more-products {
            display: flex;
            padding: 0 10px 0px 58px;
        }
        
        .home-section-three ul {
            width: 100%;
            margin: 0px;
        }
        
        .home-section-three li {
            width: 44%!important;
            margin: 0;
        }
        
        .home-section-three.more-products img.lazy {
            width: 500px!important;
        }
    
        .home-section-three li .content_block {
            margin: 0 auto;
            display: block;
            width: 330px;
            position: relative;
            top: 50px;
        }
        
        .home-section-three li:nth-child(1){
            margin-right: 0px;
        }
        
        .home-section-three ul li { padding-left: 0px;}
        
        .home-page-top-items p, .location-popular-title p {line-height: 1.5;}
        
        .home-section-three li:nth-child(2)
        {
        margin-left: 5px;
        }
    
        .home-section-two  li .i-o-image img {
            width: 318px !important;
            height: 295px;
        }
        
        .home-section-two .description {padding: 0px !important;}
        .home-section-three .description {padding: 0px !important;}
        .home-section-sep {
            clear: both;height: 80px;margin: 0px;padding: 0px;
        }
    
    
        .home-section-four .more-products {
            display: flex;
            padding: 0 10px 0px 58px;
          }
          
          .home-section-four ul {
            width: 100%;
            margin: 0px;
          }
          
          .home-section-four li:nth-child(1) {
            margin-right: 0px;
          }

          .home-section-four li:nth-child(1) .content_block{
            position: relative;
            left: 80px;
          }

          .home-section-four li:nth-child(2) .content_block{
            position: relative;
            left: 55px;
          }
          
          .home-section-four ul li {
            padding-left: 0px;
          }
          
          .home-section-fourli:nth-child(2) {
            margin-left: 5px;
          }
          
          .home-section-four ul li {
            padding-left: 0px;
          }
          
          .home-section-four img.lazy {
            width: 500px !important;
          }
          
          .home-section-four  li {
            width: 515px;
            float: left;
            margin-top: 0px !important;
            margin-left: 60px;
          }
          
          .paint-colours-title h2 {
            text-transform: none;
            color: #fff;
            font-size: 34px;
            line-height: 1;
            font-weight: 700;
            text-align: left;
            margin: 0px;
          }
    
          .paint-colours-title {
            padding-left: 25%;
            padding-right: 25%;
            text-align: center;
          }    
          
          .h2-30 {font-size: 30px !important;}

          .home-section-five ul li:first-child {text-align: right;}
          .home-section-five img {
            width: 440px !important;
          }
         
}          

@media only screen and (min-device-width: 360px) and (max-device-width: 640px)
{
    .home-section-two .sfitem .btn-yellow {
        text-align: center;
        font-size: 14px !important;
        left: auto;
    }

    /*.home-section-two .custom-choose-btn .btn-yellow {
        left: 0px !important;
    }*/

     /*.home-section-two ul li:nth-child(3) .content_block .btn-yellow {
      bottom: 210px !important;
     }*/
     /*.home-section-four .btn-yellow {
      left: 47px!important;
    }*/

    .home-section-three .sfitem .btn-yellow {
      bottom: 60px !important;
      /*left: 35px !important;*/
    }

    
}

@media only screen and (min-width: 320px) and (max-width: 359px)
{
  .home-page-top-items div:nth-child(1) {
    height: 445px !important;
   }

    .home-section-two .custom-choose-btn .btn-yellow:lang(fr) {
        padding: 10px 5px;
        left: auto;
        width: auto;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1219px)
{
  .product-profile-custom .m-w2.section-inner {
     width: 100% !important;
   }
   #content {
    margin-left: 0px !important;
   }

   .page-section {width: 100%;}

   .home-section-two li {width: 27% !important; margin-left: 34px;}
   .home-page-top-items .slit-blocks_item:last-child {width: 90%;}
   .home-section-four ul li:nth-child(2) {margin-left: 0px;}
   .page-section {padding: 0px;}
   
}

@media only screen and (min-width: 1172px) and (max-width: 1219px)
{
  .how-to-paint-stain .sf_colsOut.Colour-trend-col4 {    width: 78% !important;}
}

@media only screen and (min-width: 1083px) and (max-width: 1172px)
{
  .how-to-paint-stain .sf_colsOut.Colour-trend-col4 {    width: 77% !important;}
}

@media only screen and (min-width: 640px) and (max-width: 1082px)
{
  .how-to-paint-stain .sf_colsOut.Colour-trend-col4 {    width: 75% !important;}
}


@media only screen and (min-width: 1150px) and (max-width: 1204px)
{
  .home-section-four img.lazy {
    width: 465px !important;
   }
}

@media only screen and (min-width: 640px) and (max-width: 1149px)
{
  .home-section-four img.lazy {
    width: 470px !important;
   }

   .home-section-four li {margin-left: 50px;}
}

@media only screen and (min-width: 641px)  and (max-width: 767px){
  .home-section-two li:nth-child(1) {
    margin-right: 0px;
  }

  .home-section-two li {
    width: 290px !important;
    float: left;
    margin-top: 0px !important;
    margin-left: 10px;
   }
 
}

@media (max-width: 1079px)
{
  .home-section-four li {
    width: 480px;
   }
}

@media screen and (max-width: 980px){
  .how-to-paint-stain {
      background: #ffffff !important;
  }

  
}

@media screen and (max-width: 768px){
  .home-page-top-items {
    padding-left: 15px!important;
    padding-right: 33px;
}

.product-profile-custom .more-products {
  padding: 0px 24px;
  position: relative;
  left: -10px;
}
#home-banner-ul-list {
  margin-right: 33px;
  margin-left: 3px!important;
}

.home-section-four ul li {
  margin-left: 0px;
  margin-right: 33px;
/*  position: relative;
  left: -39px;*/
}

    .home-section-four .content_block {
        justify-content: center;
        display: flex;
    }

    .home-section-four .btn-yellow {
        position: relative;
        bottom: 54px;
        padding: 10px 15px;
        left: 0px !important;
    }

.how-to-paint-stain {
  position: relative;
  left: -10px;
  padding: 0!important;
}
.how-to-paint-stain .colour-trends-content {
  padding: 0 20px;
}

table.formTbl .submit, .btn-yellow, a.technical{
  line-height: 23px;
}

    #home-top-link a.technical {
        margin-top: 0px;
        color: #ffffff !important;
        background-color: #036fad;
        font-weight: 600;
        font-size: 18px;
        letter-spacing: .02em;
        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
        padding: 10px 20px;
    }
}

/***New home page changes **/

/* Page container (keeps everything centered like the screenshot) */
.home-page-section {
  max-width: 1096px;
  margin: 0 auto;
  padding: 0px;  
}

.home-page-title-section {
  text-align: center;
  padding-top: 50px;
}
/* ---------------- home-page-hero ---------------- */
.home-page-hero {  
  padding: 0px 0 80px;
}

.home-page-hero__inner {
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

.home-page-hero__content {
  flex: 0 0 328px; /* left column width */
  margin-top: 35px;
}

.home-page-hero__title {
  margin: 0 0 10px;
  text-transform: uppercase;

font: normal normal bold 42px/48px Lato;
letter-spacing: 0px;
color: #000000;
text-transform: uppercase;
opacity: 1;

}

.home-page-hero__desc {
  margin: 0 0 14px;
  font: normal normal normal 16px/24px Source Sans Pro;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
  max-width: 328px;
}

.home-page-hero__leaf {
  width: 70px;
  height: auto;
  display: block;
  margin-top: 6px;
}

.home-page-hero__media {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}

.home-page-hero__img {
  width: 100%;
max-width: 712px;
  height: 376px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

/* ---------------- SPECIALTY SECTION ---------------- */

.specialty__title {
  text-align: center;
  margin: 0px 0 0px;
  font: normal normal bold 30px/34px Lato;
  letter-spacing: -0.3px;
  color: #000000;
  opacity: 1;
}

/* 3-up grid */
.specialty__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  align-items: start;
}

/* Card */
.card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  border-radius: 2px;
}

.card__img {
object-fit: cover;
  display: block;
  width: 328px;
  height: 295px;
}

/* Bottom label */
.card__tag {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  padding: 13px 18px;
  text-transform: uppercase;
  font: normal normal bold 18px/18px Source Sans Pro;
  letter-spacing: 0px;
  color: #000000;
  text-transform: uppercase;
  opacity: 1;

  /* subtle "button" look */

  white-space: nowrap;
}

/* Tag colors like screenshot */
.card__tag--home {
  background: #A8AD7B 0% 0% no-repeat padding-box;
box-shadow: 0px 0px 6px #00000080;
opacity: 1;
}

.card__tag--pro {
  /*background: rgba(245, 201, 0, 0.9);*/
  background: var(--professionals-e8ab2c) 0% 0% no-repeat padding-box;
background: #FFD200 0% 0% no-repeat padding-box;
box-shadow: 0px 0px 6px #00000080;
opacity: 1;
}

.card__tag--ind {
  /*background: rgba(164, 194, 210, 0.9);*/
  background: #8FACBF 0% 0% no-repeat padding-box;
box-shadow: 0px 0px 6px #00000080;
opacity: 1;
}

/* Hover */


  .card__tag:hover {
    color: #fff !important;
  }

  
  :root{
      /* Change these if needed */
      --banner-w: 1096px;
      --banner-h: 275px;
      --content-max-w: 520px;
      --pad: 24px;
    }

    .home-narrative-banner {
      width: min(100%, var(--banner-w));
      height: var(--banner-h);
      margin: 86px 0px 90px;

      /* Background image */
      background-image: url("../png/narrative-background.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      /* Layout for content */
      display: grid;
      place-items: center;

      /* Optional: keeps anything from overflowing */
      overflow: hidden;

      position: relative;
    }

    /* Optional overlay to improve readability */
    .home-narrative-banner::before{
      content:"";
      position:absolute;
      inset:0;
      background: rgba(255,255,255,0.25); /* tweak or remove */
      pointer-events:none;
    }

    .home-narrative-banner-content{
      position: relative; /* above overlay */
      width: min(var(--content-max-w), calc(100% - (var(--pad) * 2)));
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .home-narrative-banner-content img{
      width: 100%;
      height: auto;
      display: block;

      /* Optional: give it a little lift */
      filter: drop-shadow(0 8px 18px rgba(0,0,0,0.25));
    }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 980px) {
  .home-page-hero__inner {
    flex-direction: column;
    gap: 0px;
  }

  .home-page-hero__content {
    flex-basis: auto;
  }

  .home-page-hero__img {
    max-width: 100%;
    height: 240px;
  }

  .specialty__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .card__img {
    height: 240px;
  }
}

/**why buy Canadian***/

/* OUTER LAYOUT */
.home-buy-canadian {
  display: flex;
  overflow: hidden;
  margin-bottom: 10px;
  height: 250px;
}

/* LEFT SWATCH PANEL HAS WHITE BACKGROUND */
.home-buy-canadian .swatches-wrapper {
  background: #ffffff;           /* <<< white background */
  padding-right: 12px;            /* spacing around bars — matches screenshot */
  display: flex;
  align-items: stretch;
}

/* SWATCH ROW -> VERTICAL BARS SIDE-BY-SIDE */
.home-buy-canadian .swatches {
  display: flex;
  align-items: stretch;
}

/* Base bar style */
.home-buy-canadian .swatch {
  height: 100%;
  
}

/* Widths adjusted per screenshot (1 narrow + 2 wide) */
.home-buy-canadian .swatch-1 {
  width: 52px;
  background: #C7CECB;
}

.home-buy-canadian .swatch-2 {
  width: 70px;
  background: #B8B093;
  margin: 0 12px;                /* spacing between bars */
}

.home-buy-canadian .swatch-3 {
  width: 80px;
  background: #AA8E78;
}

/* BEIGE CONTENT AREA */
.home-buy-canadian .buy-canadian-content {
flex: 1;
  background: #E0D7D0;
  padding-top: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 55px;
  padding-left: 55px;
    gap: 72px;            /* distance between text + logo */
  justify-content: flex-start;  /* <<< FIX */
}

.home-buy-canadian .buy-text {
   width: 506px;
}

.home-buy-canadian .buy-text h2 {
  margin: 0 0 12px;
  text-align: left;
  font: normal normal bold 30px/34px Lato;
  letter-spacing: 0px;
  color: #3E3E3E;
  opacity: 1;
}

.home-buy-canadian .bullet-list {
  list-style: none;      /* remove default browser bullets */
  margin: 0;
  padding-left: 15px;
  margin: 0px !important;
}

.home-buy-canadian .bullet-list li {
  position: relative;    /* needed so ::before positions relative to li */
  overflow: initial !important;
  list-style: disc !important;
  padding-left: 0px !important;
  text-align: left;
  font: normal normal normal 14px/22px Source Sans Pro;
  letter-spacing: 0px;
  color: #000000;
  margin-top: 6px;
}

.home-buy-canadian .bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;              /* vertical alignment */
  width: 6px;            /* bullet width */
  height: 6px;           /* bullet height */
  border-radius: 50%;    /* make it a circle */
}

.home-buy-canadian .buy-logo img {
  width: 125px;
  height: 125px;
}

/***BCAA member**/
.bcaa-promo-banner {
  width: 100%;
  max-width: 1096px;
  height: 275px;
  margin: 0 auto;

  background-image: url("../png/bcaa-background.png");
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  padding: 0 40px;
  box-sizing: border-box;
}

.bcaa-promo-banner .promo-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bcaa-promo-banner .promo-text {
  margin-left: 100px;
}

 .bcaa-promo-banner .promo-content a {
  text-decoration:none;
 }

.bcaa-promo-banner .promo-text .small {
  text-align: left;
  font: normal normal bold 26px/34px Lato;
  letter-spacing: -0.26px;
  color: #FFFFFF;
  opacity: 1;
}

.bcaa-promo-banner .promo-text .save-percentage {
  text-align: left;
  font: normal normal bold 80px/80px Lato;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
}

.bcaa-promo-banner .promo-logos {
  flex-shrink: 0;
  margin-top: 64px;
  margin-bottom: 46px;
}

.bcaa-promo-banner .promo-logos img {
  max-width: 455px;
  max-height: 165px;
  height: auto;
  width: auto;
  display: block;
}

/****Paint Colours*****/
/* Page spacing (optional) */
.paint-colours-feature-grid {
  max-width: 1096px;
  margin: 0px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "topLeft topRight"
    "bottomLeft bottomRight";
  column-gap: 56px;
  margin-bottom: 60px;
}

.home-location-map {
  margin-bottom: 70px;
}
.for-your-home-professionals {
  padding: 22px 0px 0px;
}
.common-problesm-solutions {
  padding: 80px 96px;
}

.common-problesm-solutions .card--img {
  width: 425px;
  height: 295px;
}
/* Place items into grid areas */
.paint-colours-feature-grid > :nth-child(1) { grid-area: topLeft; }
.paint-colours-feature-grid > :nth-child(2) { grid-area: topRight; }
.paint-colours-feature-grid > :nth-child(3) { grid-area: bottomLeft; }
.paint-colours-feature-grid > :nth-child(4) { grid-area: bottomRight; }

/* Card base */
.paint-colours-feature-grid .card {
  background: #fff;
  border-radius: 2px;
}

/* Image cards */
.paint-colours-feature-grid .card--img-000 {
  position: relative;
  display: block;
  overflow: hidden;
  /*aspect-ratio: 16 / 9;         */ /* keeps a consistent tile look */
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  text-decoration: none;
}

.paint-colours-feature-grid .card--img {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible; /* important so button can sit below image */
    text-decoration: none;
    box-shadow: none;
}

.paint-colours-feature-grid .card--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 200ms ease;
}

/* Blue label on images */
.paint-colours-feature-grid .card-badge-000 {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 13px 18px;
  white-space: nowrap;
  background: #036FAD 0% 0% no-repeat padding-box;
  box-shadow: 0px 0px 6px #00000080;
  text-align: center;
  font: normal normal bold 18px/18px Source Sans Pro;
  letter-spacing: 0px;
  color: #FFFFFF;
  text-transform: uppercase;
  opacity: 1;
}

.paint-colours-feature-grid .card-badge {
    position: static;              /* remove overlay behavior */
    display: inline-block;
    margin-top: 10px;              /* space between image and button */
        padding: 13px 18px;
    white-space: nowrap;
    background: #036FAD 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 6px #00000080;
    text-align: center;
    font: normal normal bold 18px / 18px Source Sans Pro;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    opacity: 1;
    width: 220px;
}


/* Text card */
.paint-colours-feature-grid.common-problesm-solutions .card--text {
  padding: 40px 0px 0px 42px;
}

.home-location-map .card--text {
 margin-top: 63px;
}

.paint-colours-feature-grid .card--text h2 {
  margin: 0 0 10px 0;
  font: normal normal bold 30px/34px Lato;
  letter-spacing: -0.3px;
  color: #000000;
  opacity: 1;
}

.paint-colours-feature-grid .card--text p {
  margin: 0 0 18px 0;
  max-width: 420px;
  font: normal normal normal 14px/24px Source Sans Pro;
  letter-spacing: 0px;
  color: #646464;
  opacity: 1;
}

/* CTA button */
.paint-colours-feature-grid  .btn {
  display: inline-block;
  text-decoration: none;
  padding: 13px 20px;
  text-transform: uppercase;
  background: #036FAD 0% 0% no-repeat padding-box;
  box-shadow: 0px 0px 6px #00000080;
  font: normal normal bold 18px/18px Source Sans Pro;
  letter-spacing: 0px;
  color: #FFFFFF;
  text-transform: uppercase;
  opacity: 1;
}

.paint-colours-feature-grid .btn:hover {
  filter: brightness(0.95);
}

.paint-colours-feature-grid .card-badge:hover,
.paint-colours-feature-grid .btn:hover,
.home-fanclub-banner .fanclub-btn:hover {
  background-color: #003b5c;
  color: #fff !Important;
}

/* Responsive */
@media (max-width: 640px) {
  .paint-colours-feature-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topLeft"
      "topRight"
      "bottomLeft"
      "bottomRight";
    gap: 22px;
  }

  .paint-colours-feature-grid.home-location-map {
    gap: 0px;
  } 

  .paint-colours-feature-grid.for-your-home-professionals{
      row-gap: 35px !important;
        margin-top: 20px;
        padding-top: 0px;
        margin-bottom: 0px;
  }

  .paint-colours-feature-grid.common-problesm-solutions 
  {
    padding: 0px !important;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 40px;
  }

  .paint-colours-feature-grid .card--text p 
  {
      max-width: 340px;
  }

  .paint-colours-feature-grid.common-problesm-solutions .btn 
  {
    display: block;
    width: fit-content;
    margin: 0px auto 0;
  }
  .paint-colours-feature-grid .card--text {
    padding: 0 !important;
  }

  .paint-colours-feature-grid.common-problesm-solutions .card--text
  {
    order: -1;
    margin-bottom: 10px;
  }
  .paint-colours-feature-grid.home-location-map .card--text
  {
  margin-top: 9px;
  }

  .paint-colours-feature-grid .card--text h2 {
    text-align: center;
  }

  .home-location-map {
    margin-bottom: 70px;
  }
    
    
}

/******Fan Club********/
.home-fanclub-banner {
  width: 100%;
  max-width: 1096px;
  height: 275px;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;

  background-image: url("../png/fan-club-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  position: relative;
  overflow: hidden;
  margin-top: 60px;
}


.home-fanclub-banner .fanclub-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0px;
  padding: 81px 96px 103px;
}

/* Left side */
.home-fanclub-banner .fanclub-left {
  min-width: 232px;
  margin-right: 56px;
}

.home-fanclub-banner .fanclub-title {
  font-size: 40px;
  font-weight: 800;
  margin: 0 0 8px 0;
  letter-spacing: 1px;
}

.home-fanclub-banner .fanclub-tag {
  display: inline-block;
  background: #000;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 14px;
  letter-spacing: 1px;
}

/* Middle text */
.home-fanclub-banner .fanclub-middle {
  flex: 1;
}

.home-fanclub-banner .fanclub-sub {
  margin: 0;
  font: normal normal bold 26px/34px Lato;
letter-spacing: -0.26px;
color: #000000;
opacity: 1;

}

.home-fanclub-banner .fanclub-heading {
  margin: 5px 0 0 0;
  font: normal normal bold 40px/48px Lato;
letter-spacing: 0px;
color: #000000;
opacity: 1;
}

/* Button */
.home-fanclub-banner .fanclub-btn {
    white-space: nowrap;
    display: inline-block;
    margin-top: 0px;    
    padding: 13px 20px;
    text-decoration: none !important;
    background: #036FAD 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 6px #00000080;
    opacity: 1;
    text-align: center;
    font: normal normal bold 18px / 18px Source Sans Pro;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
}

.home-fanclub-banner .fanclub-btn:hover {
  filter: brightness(0.95);
}

/******new home design ************/

.cp-home-top-hero{
  padding:0px 35px;
  text-align:center;
  padding-top: 12px;
}

.cp-home-top-hero .hero-container{
  max-width:1022px;
  margin:auto;
  /*position:relative;*/
}

.cp-home-top-hero .hero-heading {
    display: inline-grid;
    grid-template-columns: auto minmax(0, auto);
    align-items: center;
    column-gap: 12px;
    max-width: 100%;
    margin-bottom: 10px;
}

.cp-home-top-hero .hero-title{
  /*
  margin-bottom: 10px;
  margin-top: 0px;
  text-align: center;
  font: normal normal bold 42px/48px Lato;
  letter-spacing: 0px;
  color: #000000;
  text-transform: uppercase;
  opacity: 1;
  */
      min-width: 0;
    margin: 0;
    font: normal normal bold 42px/48px Lato;
    text-align: left;
    color: #000;
    text-transform: uppercase;
}

.cp-home-top-hero .hero-text{
  text-align: center;
  font: normal normal normal 16px/24px Source Sans Pro;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
  padding: 0px;
  margin: 0px;
}

.cp-home-top-hero .canada-icon{
  /*
  width:40px;
  height:40px;
  position:absolute;
  right: 245px;
  top: 5px;
  */
      display: block;
    width: clamp(28px, 4vw, 40px);
    height: auto;
}

/* MOBILE */
@media (max-width:768px){

  .cp-home-top-hero .canada-icon {
    position:static;
    display:block;
    margin:0 auto 20px;
    width:35px;
    height:35px;
  }

  .cp-home-top-hero .hero-title{
    text-align: center;
    font: normal normal bold 34px/48px Lato;
    letter-spacing: 0px;
    color: #000000;
    text-transform: uppercase;
    opacity: 1;
    margin-bottom: 20px !important;
  }

  .cp-home-top-hero .hero-text{
    text-align: center;
    font: normal normal normal 16px/24px Source Sans Pro;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
  }

  .cp-home-top-hero {
    padding: 0px 0px;
    text-align: center;
  }

}

/*********second slide *****/
/* section spacing */
.find-your-solution-audience {
  padding: 16px 0px 0px;  
}

/* DESKTOP: 3 across */
.find-your-solution-audience .audience-grid{
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  align-items: start;
}

/* card */
.find-your-solution-audience .audience-card{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* image block */
.find-your-solution-audience .audience-img{
  width: 328px;
  height: 200px;
  overflow:hidden;
}

.find-your-solution-audience .audience-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* label under image (the colored “button”) */
.find-your-solution-audience .audience-tag{
  margin-top: 20px;
  padding: 10px 22px;  
  display:inline-block;  
   box-shadow: 0px 0px 6px #00000080;
  text-align: center;
  font: normal normal bold 18px/18px Source Sans Pro;
  letter-spacing: 0px;
  color: #000000;
  text-transform: uppercase;
  opacity: 1;
  width: 224px;
}

.find-your-solution-audience .audience-tag:hover {
  color: #fff !important;
}

/* colors like screenshot */
.find-your-solution-audience .tag-yellow { background:#FFD200; color:#000; }
.find-your-solution-audience .tag-blue{ background:#8FACBF; color:#000; }
.find-your-solution-audience .tag-olive{ background:#A8AD7B; color:#000; }

/* hover */
.find-your-solution-audience .audience-card:hover .audience-img img{
  transform: scale(1.03);
  transition: transform .25s ease;
}
.find-your-solution-audience .audience-img img{
  transition: transform .25s ease;
}


/*********************************/

@media (max-width: 640px) {
  .home-fanclub-banner .fanclub-content {
    flex-direction: column;    
  }

  .home-fanclub-banner .fanclub-banner {
    padding: 40px 30px;
  }
}

@media (max-width: 1220px)
{
  .home-page-section {
      max-width: 90% !important;
  }
  .paint-colours-feature-grid.common-problesm-solutions .card--text {
      padding: 0px 0px 0px 0px;
      grid-area: auto;
  }

  .common-problesm-solutions {
      padding: 80px 0px;
  }

}

/* ---------------- RESPONSIVE ---------------- */
@media (min-width: 768px) and (max-width: 1023px) {
      .home-page-section {
        max-width: 100% !important;
    }

    .home-page-hero__inner {
        flex-direction: row;
        gap: 30px;
    }

    .specialty__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;

    }

    .home-page-hero__content {
        margin-top: 0px; 
    }

    .home-buy-canadian .buy-canadian-content
    {
        gap:5px;
        padding-left: 20px;
    }


    #content {
      float: none !important;
      position: static !important;
      left: auto !important;

      width: auto !important;
      max-width: 870px;   /* pick what you want on tablet */
      flex: 1 1 auto;
    }

    .day-spa-section img {
      width: 100%;
    }

}

/******new 001******/
 
.home-cp-solution-card-grid {
  max-width: 1096px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px;
  padding: 0px 0px;
  margin-bottom: 48px;
  margin-top: 32px;
}

.home-cp-solution-card-grid .info-card {
  background: transparent;
  text-align: center;
}

.home-cp-solution-card-grid .info-card img {
  width: 100%;
  height: 295px;
  object-fit: cover;
  display: block;
  margin-bottom: 17px;
}


.home-cp-solution-card-grid .info-card h2 {
  margin: 0 0 15px;
  text-align: left;
font: normal normal bold 30px/34px Lato;
letter-spacing: -0.3px;
color: #000000;
opacity: 1;
}

.home-cp-solution-card-grid .info-card p {
  margin: 0 0 15px;
  text-align: left;
font: normal normal normal 14px/24px Source Sans Pro;
letter-spacing: 0px;
color: #646464;
opacity: 1;  
  min-height: 48px;
}

.home-cp-solution-card-grid .learn-btn {
  display: inline-block;
  text-decoration: none;
  padding: 13px 20px;
  text-transform: uppercase;
  background: #036FAD 0% 0% no-repeat padding-box;
  box-shadow: 0px 0px 6px #00000080;
  font: normal normal bold 18px/18px Source Sans Pro;
  letter-spacing: 0px;
  color: #FFFFFF;
  text-transform: uppercase;
  opacity: 1;
}

.home-cp-solution-card-grid  .learn-btn:hover {
  background-color: #003b5c;
  color: #fff !Important;
}

.paint-problem-solution-mb-section {
  display: none;
}

/******************/

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

    #wrapper,
    .w-w1,
    .w-w2,
    #main,
    #main .section-inner {
        overflow: visible !important;
    }

}

.home-style #wrapper {
    overflow: visible !important;
}

/* FULL WIDTH BAND */
.paint-problem-solution-desktop-section {
    position: relative;
    z-index: 2;
    padding: 25px 0;
    background: #E8E7E5;

    /* 🔑 FULL WIDTH BREAKOUT */
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
}

/* CONTENT stays centered */
.paint-problem-solution-desktop-section .home-page-section {
    max-width: 1096px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 2;
}

@media (max-width: 640px) {
    .cp-home-top-hero .hero-heading {
        grid-template-columns: 1fr;
        justify-items: center;        
    }

    .cp-home-top-hero .hero-title {
        text-align: center;
        order: 2;
    }

    .cp-home-top-hero .canada-icon {
      order: 1;
    }

    
  .day-spa-section {
      max-width: 90% !important;
      margin: 0 auto;
      padding: 0px;
  }

}