/*====================================== reset.css is here ========================================*/
*{margin:0; padding:0; box-sizing:border-box; }
table {	border-collapse:collapse; border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,th,var {font-style:normal; font-weight:normal; }
em {font-style:italic; font-weight:normal; }
strong {font-style:normal; font-weight:bold; }
figure {margin: 0;}
img{border:0;max-width: 100%;display: block;height: auto; padding: 10px 10px 10px 10px;}
ol,ul { list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;	font-weight:bold;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}
.md_clear{clear:both; font-size:1px;line-height:1px; display:block; height:0;}
header,nav,section,article,aside,footer,hgroup,figure {display: block; }
.clear:after {content: '';clear: both;font-size: 1px;line-height: 1px;display: block;height: 0;}
.clearfix:after {content: '';clear: both;font-size: 1px;line-height: 1px;display: block;height: 0;}
.transition {transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
.transform{transform: translateY(-50%);-webkit-transform: translateY(-50%);}
/**************************************************************************************/
/* Brand design tokens — update here to restyle the whole theme */
:root {
    --ccbc-blue:       #000096;
    --ccbc-dark:       #222222;
    --ccbc-nav-hover:  #6767b4;
    --ccbc-cart-btn:   #0066cc;
    --ccbc-cta-btn:    #486b94;
    --ccbc-gray-light: #f4f4f4;
}
/**************************************************************************************/
a {color:#000096;text-decoration:none;outline:0 none !important;margin: 0 auto;}
a:hover, a:focus { text-decoration:none; outline:0 none !important;}
h1 {font-size:20px;line-height:22px;color:#fff;font-weight:400;}
h2 {font-size: 60px;line-height:62px;letter-spacing: 0px; color: #ffffff;font-weight: 600;}
h3 {font-size:35px;line-height: 45px;color:#ffffff;}
h4 {font-size: 22px;line-height:24px;}
h5 {font-size:20px;line-height:22px;color:#fff;font-weight:400;}
h6 {}
p{font-size: 16px;line-height: 18px;color: #ffffff;}
/*--fonts--*/



/*---------------------------------------------------*/
html {height: 100%;}
body {color:#ffffff;font-family: 'Lato', sans-serif;font-size:15px;height:  100%;}
.flt_lt {float: left;display:inline;}
.flt_rt {float:right; display:inline;}
.text-right{text-align: right;}
/*-----------LayOut Start here-----------------------*/
.wrapper{background: #ffffff;max-width: 100%;width: 100%;margin: 0 auto;position: relative;transition: all ease-in-out 0.5s;-webkit-transition: all ease-in-out 0.5s;left: 0;}
.container{margin:0 auto;max-width: 1145px;}

/*------------------midway--------------------*/
            /*----index----*/

/*--header--*/
header{}
.header-top{background: #222222;padding: 13px 0 18px 0;}
.header-top p{font-size: 22px;line-height: 24px;color: #ffffff !important;text-align: right;font-family: 'Lato', sans-serif;font-weight: 400;padding: 0 24px 0 0;letter-spacing: 0px;}
.header-main{padding: 22px 0 0px 0; position: relative;}
.header-left{width: 50%;float: left;display: inline-block;z-index: 99999;position: relative;}
.header-left a{display: block;position: relative;z-index: 999;}
.header-left a:before{content: " ";background: url(../images/logo_top.png) no-repeat;position: absolute;top: -44px;left: -19px;width: 174px;height: 82px;}
.header-left a:after{content: " "; background: url(../images/logo_bottom.png) no-repeat;position: absolute;top: 119px;left: -14px;width: 174px;height: 82px;}
.header-left a img{position: relative; z-index: 999;}
.header-right{width: 50%;float: right;display: inline-block;text-align: right;}
.header-right-top.mobile{display: none;}
.header-right-top.static{display: block;}
.header-right-top{padding: 24px 0 28px 0;}
.header-right-top ul{display: flex;justify-content: flex-end;align-items: center;gap: 10px;flex-wrap: nowrap;}
.header-right-top ul li{display: flex;align-items: center;}
.header-right-top ul li a{font-size: 35px;line-height: 37px;color: #222222;font-family: 'Lato', sans-serif;font-weight: 400;padding: 0 0 0 1px;white-space: nowrap;}
.header-right-top ul li a.custom{font-size: 19px;line-height: 41px;color: #ffffff;font-family: 'Lato', sans-serif;font-weight: 400;background: #222222;height: 41px;display: block;padding: 0 14px;margin: 0;width: auto;white-space: nowrap;text-align: center;}
.header-right-top ul li a.cart-link{background: #0066cc;}
.header-right nav > ul{margin-left: auto;width: 94.4%;} 
.header-right nav > ul > li{float: left;display: inline-block;padding: 0 7px 11px 12px;position: relative;} 
.header-right nav > ul > li > a{font-size: 22px;line-height: 24px;color: #222222;text-align: right;font-family: 'Roboto', sans-serif; font-weight: 400; display: block;} 
.header-right nav > ul > li > a.active{color: #6767b4;}
.header-right nav > ul > li > a:hover{color: #6767b4;}
.header-right nav > ul > li:hover .drop_down{visibility: visible; opacity: 1;}
.headertel {padding-left: 0;}
.drop_down{background: rgba(32, 32, 32, 0.6);width: 188px;position: absolute;top: 100%;left: -9px;z-index: 99999;text-align: left;padding: 21px 26px 18px 26px; transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; opacity: 0; visibility: hidden;}
.drop_down ul{}
.drop_down ul li{ padding: 0 0 11px 0;}
.drop_down ul li a{font-family: 'Roboto', sans-serif;font-size: 22px;line-height: 24px;font-weight: normal;color: #ffffff;display: block;}
/*--banner starts here--*/
.banner{margin: 0 0 6px 0;position: relative;z-index: 0;}
.banner figure{
    line-height: 0;
}
.banner > figure > img{object-fit: cover;width: 100%;height: auto;margin: -20px 0 0 0;display: inline-block;}
.banner-main{position: absolute;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);left: 0;right: 0;margin: 0 auto;}
.banner-in{text-align: center;}
.banner-in figure{margin: 0 0 0 10px;}
.banner-in figure img{margin: -32px auto 0;}
.banner-in h2{font-size: 55px;line-height: 57px;color: #ffffff;font-family: 'Roboto', sans-serif;font-weight: 400;padding: 0 116px 5px 0px;}
.banner-in span{font-size: 40px;line-height: 42px;color: #ffffff;font-family: 'Roboto', sans-serif;font-weight: 400;display: block;padding: 0 0 0 77px;}
/*--banner ends here--*/
/*--what starts here--*/
.what{background: url(../images/what-bg.jpg) no-repeat #000050;width:100%;height: auto;margin: 0 auto;background-size: cover;position: relative;}
.what-main{padding: 24px 0 21px 0;}
.what-left{display: inline-block;float: left;width: 62%;padding: 30px 0 0 41px;}
.what-left p{font-size: 25px;line-height: 34px;color: #ffffff;font-family: 'Lato', sans-serif;font-weight: 400;display: block;padding: 0 18px 0 0;}
.what-left p span{font-size: 27px;letter-spacing: -0.3px;padding: 0 0 0 4px;}
.what-right{display: inline-block;float: right;width: 38%;padding: 0 0 0 5px;}
.what-right-left{display: inline-block;width: 32%;float: left;}
.what-right-left figure{}
.what-right-left figure img{}
.what-right-right{float: right;display: inline-block;width: 66%;padding: 26px 0 0 0;}
.what-right-right h3{font-size: 40px;line-height: 42px;color: #ffffff;font-family: 'Lato', sans-serif;font-weight: 400;}
.what-right-right h2{font-size: 60px;line-height: 62px;color: #ffffff;font-family: 'Lato', sans-serif;font-weight: 400;}
/*--what ends here--*/
/*--bio-reme starts here--*/
.bio-reme{background: #f4f4f4;/* margin: 23px 0px 20px 31px; */}
.bio-reme-main{
    padding: 0 0 0 30px;
}
.bio-reme-main ul{}
.bio-reme-main ul li{display: inline-block;width: 50%;float: left;}
.bio-reme-main ul li:only-child{width: 100%;}
.bio-reme-main ul li.pdg{padding: 0 0 0 58px;}
.bio-reme-left{display: inline-block;width: 52%;float: left;padding: 50px 0 0 10px;}
.bio-reme-left h2{font-size: 25px;line-height: 27px;color: #000096;font-family: 'Lato', sans-serif;font-weight: 300;padding: 34px 0 13px 3px;}
.bio-reme-left p{font-size: 20px;line-height: 24px;color: #212121;font-family: 'Lato', sans-serif;font-weight: 400;padding: 0 0px 9px 2px;letter-spacing: -0.1px;}
.bio-reme-left > a{font-size: 18px;line-height: 33px;color: #ffffff;font-family: 'Lato', sans-serif;font-weight: 400;padding: 0 0px 0 2px;background: #486b94;width: 120px;display: block;text-align: center;margin: 0;height: 36px;}
.bio-reme-right{display: inline-block;width: 48%;float: right;}
.bio-reme-right figure{}
.bio-reme-right figure img{margin: 0 auto 0 17px;}
.bio-reme-in{padding: 36px 0 66px 0;}
.pdg .bio-reme-left{width: 59.5%;padding: 53px 0 0 10px;}
.pdg .bio-reme-right{width: 40.5%;padding: 3px 0;}
/*--bio-reme ends here--*/
/*---- know starts here --*/
.know-main{background:url(../images/didyou-bg.jpg) no-repeat #000050;width: 100%;height:308px;background-size: cover;padding: 43px 0 40px 0;}
.know-in{padding: 0 48px 0 30px;}
.know-in-left{width:40%;float:left;padding: 27px 0 0 0;}
.know-in-leftcontent{float:left;width: 56%;}
.know-in-leftcontent h3{text-align: right;padding: 0 18px 0 0;}
.know-in-leftcontent h2{}
.know-in-leftlogo{float: left;}
.know-in-leftlogo figure{}
.know-in-leftlogo figure img{}
.know-in-right{float: right;width: 60%;padding: 0 0 0 45px;}
.know-in-right h3{font-family: 'Lato', sans-serif;color:#ffffff !important;font-weight: 400;padding: 0 0 20px 0;}
.know-in-right p{color:#ffffff !important;font-size:20px;line-height: 23px;font-family: 'Arial', sans-serif;padding:0 0 19px 0;height: inherit;}
.know-in-right a{display: block;width: 133px;height: 37px;line-height: 35px;text-align: center;color:#222222 !important;font-size:20px;font-weight:400;font-family: 'Lato', sans-serif;background:#fff;margin: 0 0 0 3px;}
.know-in-leftcontent h3,
.know-in-leftcontent h2 { color: #ffffff !important; }
/*-- know ends here --*/
/*-- drain start here --*/
.drain-left{float:left;padding: 7px 0 0 0;}
.drain-right{float:right;padding:50px 0 0 18px;}
/*.drain-main{margin: 26px 31px 20px 0px;}*/
.drain-in{padding: 0 0 0 24px;}
.drain-in ul{}
.drain-in ul li{width:50%;}
.drain-in ul li:nth-child(2){width:50%;}
.drain-content{padding:43px 0 55px 0;}
.drain-right h2{padding:9px 0 13px 8px;}
.drain-right p{padding: 0 4px 13px 7px;}
.drain-right a{margin: 0 0 0 8px;}
.drain-in ul li.pdg1{padding: 0 0 0 53px;}
.pdg .drain-left1{width: 50%;padding: 33px 0 0 0;}
.pdg .drain-right1{width: 50%;padding: 33px 0 0 0;}
.drain-right1 figure img{height:92px;object-fit: contain;}
.drain-right1 h2{padding: 14px 0 13px 0;letter-spacing: 0.5px;}
.drain-right1 p{padding: 0 0 8px 0;}
.drain-left1{overflow: hidden;}
.drain-left1 figure img{max-width: 80%;height: auto;width: auto;padding: 0;margin: 0 auto;}
/*-- drain ends here --*/
/*--Footer starts Here--*/
footer{}
.footer-top{background:#fff;padding: 12px 0 0 0;}
.footertop-in{padding: 0 0 0 0;align-items: center;display: flex;}
.footertop-left{width: 35.1%;float: left;}
.footertop-left a{display: block;margin: 0;text-align: left;position: relative;z-index: 9999;}
.footertop-left a:before{content: " ";background: url(../images/logo_top.png) no-repeat;position: absolute;top: 0;left: -28px;width: 174px;height: 82px;}
.footertop-left a:after{content: " ";background: url(../images/logo_bottom.png) no-repeat;position: absolute;top: 65px;left: -22px;width: 174px;height: 82px;}
.footertop-left a img{text-align: center;margin: 1px 9px;position: relative;z-index: 999;}
.footertop-right{width: 74.3%;float: right;padding: 20px 0 0 23px;}
.footertop-right h4{color:#111111;font-weight:400;margin: -8px 0 0 0;}
.footer-bottom{background:url(../images/footer_bottom.png) no-repeat top center #0a1a3a;padding: 58px 0 68px 0;margin: -29px 0 0 0;background-size: cover;}
.footerbottom-in{margin: 0 -100px 0 -13px;}
.footerbottom-left{width: 39.4%;float: left;padding: 13px 0 0 0;}
.footerbottom-left h5{letter-spacing: 0.2px;padding: 0 0 16px 0;color:#ffffff !important;}
.footerbottom-left > ul{}
.footerbottom-left > ul > li{width: 45.4%;float: left;}
.footerbottom-left > ul > li:nth-child(2){padding:0 0 0 8px;}
.information{}
.information address{}
.information address p{font-weight:300;color:#fff;font-size:20px;line-height: 24px;}
.information a{display: block;font-weight:300;color:#fff;font-size:20px;line-height: 24px;}
.information a.tel{padding: 0 0 24px 0;}
.footerbottom-right{width: 60.6%;float: right;padding: 0px 0 0 10px;}
.footerbottom-links{width: 100%;}
.footerbottom-links > ul{}
.footerbottom-links > ul > li{width: 19.33%;float: left;}
.footerbottom-links > ul > li:nth-child(3){width: 32.5%;padding: 0 0 0 14px;}
.footerbottom-links > ul > li:nth-child(4){width: 25%;padding: 0 21px 0 0;text-align: right !important;}
.footerbottom-links > ul > li:nth-child(4) .home > ul > li > a,
.footerbottom-links > ul > li:nth-child(4) .home > ul > li > h5 {
    text-align: right !important;
    display: block !important;
    width: 100% !important;
}
.home{}
.home > ul{}
.home > ul > li{display: block;padding: 0 0 2px 0;}
.home > ul > li > h5{display:inline-block;font-size:20px;line-height:22px;color:#ffffff;font-weight:400;}
.home > ul > li > a{display:inline-block;font-size:20px;line-height:22px;color:#ffffff;font-weight:400;}
.home > ul > li > a.customer{font-weight:300;padding: 0 0 18px 0;display: block;font-size:20px;line-height:22px;color:#ffffff;text-align:right;}
.home > ul > li > a.text-right{display: block;font-weight:300;font-size: 26px;line-height:28px;letter-spacing: -0.1px;padding: 0 0 11px 0;}
.home > ul > li > a.privacy{font-size: 20px;line-height:22px;}
/*--Footer ends Here--*/
.side_bar{display: none;}

/*--Inner page starts Here--*/
.inner_banner{margin: 0 0;}
.treatment{background: url(../images/treatment.png) no-repeat #f4f4f4; /* border-top: 28px solid #ffffff;border-left: 34px solid #ffffff;border-right: 34px solid #ffffff;border-bottom: 36px solid #ffffff; */}
.treatment_in{padding: 46px 0 30px 42px;}
.treatment_top{}
.treatment_top_left{width: 54%; float: left; display: inline-block;}
.treatment_top_left a {color: #000096;}
.treatment_top_left h1{font-size: 25px; line-height: 28px; color: #000096; font-weight: 400; letter-spacing: 0.54px; padding: 0 0 30px 0;}
.treatment_top_left h5{font-size: 25px; line-height: 28px; color: #000096; font-weight: 400; letter-spacing: 0.54px; padding: 0 0 30px 0;}
.subpage_top{}
.subpage_top_left{width: 100%; float: left; display: inline-block;}
.subpage_top_left a {color: #000096;}
.subpage_top_left h1{font-size: 25px; line-height: 28px; color: #000096; font-weight: 400; letter-spacing: 0.54px; padding: 0 0 30px 0;}
.subpage_top_left h5{font-size: 25px; line-height: 28px; color: #000096; font-weight: 400; letter-spacing: 0.54px; padding: 0 0 30px 0;}
.purposes_cnt{padding: 0 0 25px 0;}
.treatment_top{}
.purposes_cnt h6{font-size: 20px; line-height: 24px; font-weight: 700; color: #202020;padding: 0 0 23px 0; letter-spacing: 0.3px;}
.purposes_cnt ul{}
.purposes_cnt ul li{ margin-bottom: 0.5em; }
.purposes_cnt ul li a{font-size: 20px; line-height: 24px; font-weight: normal; color: #202020; letter-spacing: -0.2px;}
.treatment_top_right{width: 46%; display: inline-block; float: right; padding: 30px 0 0 7px;}
.treatment_top_right figure{}
.treatment_top_right figure img{}
.treatment_bottom{padding: 0 0 30px 0;}
.treatment_bottom h6{font-size: 20px; line-height: 24px; font-weight: 700; color: #202020;}
.treatment_bottom p{font-size: 20px; line-height: 1.4em; font-weight: normal; color: #202020; margin-bottom: 0.6em;}
.product_cnt{padding: 0 0 24px 0;}
.product_cnt h6{}
.product_cnt h2 {font-size: 23px; line-height: 20px; color: #000096; font-weight: 400; letter-spacing: 0.54px; padding: 0 0 10px 0;}
.product_cnt p{letter-spacing: -0.2px;}
.purposes_cnt span{font-size: 20px; line-height: 24px; font-weight: normal; color: #202020; display: block;}
.how_works{padding: 0 0 30px 0;}
.how_works p{font-size: 20px; line-height: 24px; font-weight: normal; color: #202020; letter-spacing: -0.1px; padding: 0 0 24px 0;}
.how_works p span{display: block;}
.how_works p.septic b{font-size: 21px;}

.happy {font-size: 30px;line-height:62px;letter-spacing: 0px; color: #000096 ;font-weight: 400;}

.column {
  float: left;
  width: 33.33%;
  padding-right: 22px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* =============================================================================
   CONTENT AREA LIST STYLING
   The global reset strips list-style and spacing. These rules restore readable
   list presentation inside page content regions only.
   ============================================================================= */
.treatment_bottom ul,
.treatment_bottom ol,
.product_cnt ul,
.product_cnt ol,
.entry ul,
.entry ol,
.woocommerce-product-details__short-description ul,
.woocommerce-product-details__short-description ol {
    list-style: disc;
    padding-left: 1.4em;
    margin: 0.6em 0 1em;
}
.treatment_bottom ol,
.product_cnt ol,
.entry ol,
.woocommerce-product-details__short-description ol {
    list-style: decimal;
}
.treatment_bottom ul li,
.treatment_bottom ol li,
.product_cnt ul li,
.product_cnt ol li,
.entry ul li,
.entry ol li,
.woocommerce-product-details__short-description ul li,
.woocommerce-product-details__short-description ol li {
    margin-bottom: 0.5em;
    line-height: 1.5;
    font-size: 20px;
    color: #202020;
}

/* =============================================================================
   404 PAGE
   ============================================================================= */
.ccbc-404 {
    padding: 20px 0 40px;
    text-align: center;
}
.ccbc-404 h1 {
    font-size: 48px;
    line-height: 1.1;
    color: var(--ccbc-blue) !important;
    font-weight: 600;
    margin-bottom: 16px;
}
.ccbc-404 > p {
    font-size: 20px;
    color: #444444 !important;
    margin-bottom: 32px;
}
.ccbc-404-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.ccbc-404-btn {
    display: inline-block;
    background-color: #486b94;
    color: #ffffff !important;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 12px 28px;
    border: 2px solid #486b94;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.ccbc-404-btn:hover {
    background-color: #3a5678 !important;
    border-color: #3a5678;
    color: #ffffff !important;
}
.ccbc-404-btn--outline {
    background-color: transparent;
    color: #486b94 !important;
}
.ccbc-404-btn--outline:hover {
    background-color: #486b94 !important;
    color: #ffffff !important;
}
.ccbc-404-search {
    max-width: 480px;
    margin: 0 auto;
}
.ccbc-404-search > p {
    font-size: 16px;
    color: #666666 !important;
    margin-bottom: 10px;
}
.ccbc-404-search .search-form {
    display: flex;
    gap: 8px;
}
.ccbc-404-search .search-field {
    flex: 1;
    padding: 10px 14px;
    font-size: 15px;
    border: 1px solid #aaaaaa;
    border-radius: 3px;
    color: #333333;
    background: #ffffff;
}
.ccbc-404-search .search-submit {
    background-color: #486b94;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 15px;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.ccbc-404-search .search-submit:hover {
    background-color: #3a5678;
}

/* WooCommerce product archive / category pages */
.wc-archive-content {
    max-width: 1060px;
    padding: 20px 0 30px 0;
}
.wc-archive-content ul.products {
    margin-right: 0;
}
.wc-archive-content ul.products li.product {
    box-sizing: border-box;
}

/* =============================================================================
   CONTENT AREA TEXT COLOR OVERRIDES
   Global typography defaults to white (for dark/hero backgrounds).
   The selectors below restore readable dark text for every light-background
   region: inner pages, WooCommerce shop/product/cart/checkout/account.
   ============================================================================= */

/* Shared dark-text reset — applies to all inner-page content wrappers */
.treatment_in,
.woocommerce-page .woocommerce,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
    color: #222222;
}

.treatment_in h1,
.treatment_in h2,
.treatment_in h3,
.treatment_in h4,
.treatment_in h5,
.treatment_in h6,
.treatment_in p,
.treatment_in a,
.treatment_in li,
.treatment_in td,
.treatment_in th,
.treatment_in label,
.treatment_in span:not(.woocommerce-Price-amount),
.treatment_in .woocommerce-breadcrumb,
.treatment_in .woocommerce-breadcrumb a,
/* Cart / Checkout / Account pages — same reset */
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3,
.woocommerce-page h4,
.woocommerce-page h5,
.woocommerce-page h6,
.woocommerce-page p,
.woocommerce-page label,
.woocommerce-page td,
.woocommerce-page th,
.woocommerce-page li,
.woocommerce-cart h1,
.woocommerce-cart h2,
.woocommerce-cart h3,
.woocommerce-cart p,
.woocommerce-cart label,
.woocommerce-cart td,
.woocommerce-cart th,
.woocommerce-checkout h1,
.woocommerce-checkout h2,
.woocommerce-checkout h3,
.woocommerce-checkout p,
.woocommerce-checkout label,
.woocommerce-checkout td,
.woocommerce-checkout th,
.woocommerce-account h1,
.woocommerce-account h2,
.woocommerce-account h3,
.woocommerce-account p,
.woocommerce-account label,
.woocommerce-account td,
.woocommerce-account th,
.woocommerce-account li {
    color: #222222;
}
.treatment_in a,
.woocommerce-page .woocommerce a,
.woocommerce-cart .woocommerce a,
.woocommerce-checkout .woocommerce a,
.woocommerce-account .woocommerce a {
    color: var(--ccbc-blue);
}
.treatment_in a:hover,
.woocommerce-page .woocommerce a:hover,
.woocommerce-cart .woocommerce a:hover,
.woocommerce-checkout .woocommerce a:hover,
.woocommerce-account .woocommerce a:hover {
    color: var(--ccbc-nav-hover);
}
/* WooCommerce UI elements that should keep their own colours */
.treatment_in .button,
.treatment_in .star-rating span,
.treatment_in .price ins,
.treatment_in .price del {
    color: inherit;
}
/* WooCommerce notice text — force dark so it's readable on light backgrounds */
.woocommerce-message {
    border-top-color: var(--ccbc-blue) !important;
}
.woocommerce-message,
.woocommerce-message a,
.woocommerce-error,
.woocommerce-error a,
.woocommerce-info,
.woocommerce-info a {
    color: #222222 !important;
}
/* "View cart" / action button inside notices */
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-info .button,
.woocommerce-info a.button {
    background-color: #486b94 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    padding: 8px 18px !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
}
.woocommerce-message .button:hover,
.woocommerce-message a.button:hover {
    background-color: #3a5678 !important;
    color: #ffffff !important;
}
/* Product loop titles & prices */
.treatment_in ul.products li.product .woocommerce-loop-product__title {
    color: #222222;
    line-height: 1.4;
}
.wc-block-grid__product-title {
    font-size: 17px !important;
    color: #222222 !important;
    line-height: 1.4 !important;
}
.treatment_in ul.products li.product .price {
    color: var(--ccbc-blue);
}
/* Single product */
.treatment_in .product_title.entry-title {
    color: #222222;
    font-size: 30px;
    line-height: 1.2;
}
.treatment_in .woocommerce-product-details__short-description p {
    color: #444444;
}
/* My Account — orders table */
.woocommerce-orders-table th,
.woocommerce-orders-table td,
.woocommerce-orders-table th a,
.woocommerce-orders-table td a,
.woocommerce-orders-table time,
.woocommerce-orders-table ins,
.woocommerce-orders-table del,
.woocommerce-orders-table .woocommerce-Price-amount {
    color: #222222 !important;
}

/* Guest login prompt — single product page */
.ccbc-login-prompt {
    margin: 16px 0 20px;
    padding: 16px 20px;
    background: #f5f5f5;
    border-left: 4px solid #222222;
    font-size: 18px;
    color: #222222;
    line-height: 1.5;
}
.ccbc-login-prompt p {
    color: #444444 !important;
}
.ccbc-login-prompt a {
    color: var(--ccbc-blue) !important;
    font-weight: 700;
    text-decoration: underline;
}
.ccbc-login-prompt a:hover {
    color: #222222 !important;
}

/* Guest login prompt — shop/category loop */
.ccbc-login-prompt-loop {
    display: block;
    margin-top: 8px;
    padding: 8px 14px;
    background: #222222;
    color: #ffffff !important;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    text-align: center;
    border-radius: 2px;
}
.ccbc-login-prompt-loop:hover {
    background: var(--ccbc-blue);
    color: #ffffff !important;
}

/* =============================================================================
   SINGLE PRODUCT PAGE — UI POLISH
   ============================================================================= */

/* --- Scent / variation select dropdown ------------------------------------ */
.treatment_in .variations select,
.treatment_in form.cart select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23486b94' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    border: 1px solid #aaaaaa !important;
    border-radius: 3px !important;
    color: #333333 !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    padding: 9px 36px 9px 12px !important;
    min-width: 220px !important;
    cursor: pointer !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.treatment_in .variations select:focus,
.treatment_in form.cart select:focus {
    border-color: #486b94 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08), 0 0 0 3px rgba(72,107,148,0.2) !important;
    outline: none !important;
}
.treatment_in table.variations {
    width: auto;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 20px;
    font-size: 15px;
    background: none;
}
.treatment_in table.variations th,
.treatment_in table.variations td {
    border: none !important;
    background: none !important;
    padding: 8px 16px 8px 0 !important;
    vertical-align: middle;
    font-weight: normal;
    color: #222222 !important;
}
.treatment_in table.variations th.label {
    white-space: nowrap;
    font-weight: 600;
    color: #222222 !important;
    font-size: 15px;
    padding-right: 20px !important;
}
.treatment_in table.variations th.label label {
    font-weight: 600;
    color: #222222;
    font-size: 15px;
    cursor: default;
}
.treatment_in .variations {
    margin-bottom: 20px;
}
.treatment_in .reset_variations {
    font-size: 13px;
    color: #486b94 !important;
    margin-left: 10px;
    text-decoration: underline;
}

/* --- Bulk pricing table ---------------------------------------------------- */
.treatment_in table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 15px;
    border: 1px solid #dddddd;
}
.treatment_in table th {
    background-color: #f4f4f4 !important;
    color: #222222 !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
    text-align: left !important;
    border-bottom: 2px solid #cccccc !important;
}
.treatment_in table td {
    padding: 10px 14px !important;
    border-bottom: 1px solid #e4e4e4 !important;
    color: #333333 !important;
    background-color: #ffffff !important;
}
/* Highlighted / active row */
.treatment_in table tr.active td,
.treatment_in table tr.current-discount td,
.treatment_in table tr.highlighted td,
.treatment_in table tr.tiered-pricing--active td,
.treatment_in table tbody tr:first-child td {
    color: #ffffff !important;
    font-weight: 600 !important;
}
.treatment_in table tr.tiered-pricing--active td span,
.treatment_in table tr.tiered-pricing--active td .woocommerce-Price-amount,
.treatment_in table tr.tiered-pricing--active td .woocommerce-Price-currencySymbol {
    color: #ffffff !important;
}
.treatment_in table tbody tr:hover td {
    background-color: #eef2f7 !important;
}
.treatment_in table tr.tiered-pricing--active:hover td {
    background-color: inherit !important;
}

/* --- Add to Cart button — matches site's #486b94 CTA style ---------------- */
.woocommerce .treatment_in .single_add_to_cart_button,
.treatment_in button.single_add_to_cart_button,
.treatment_in input[type="submit"].single_add_to_cart_button {
    background-color: #486b94 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
    padding: 10px 28px !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
    transition: background-color 0.2s ease !important;
    box-shadow: none !important;
}
.woocommerce .treatment_in .single_add_to_cart_button:hover,
.treatment_in button.single_add_to_cart_button:hover {
    background-color: #3a5678 !important;
}

/* Quantity input alongside the button */
.treatment_in .quantity input.qty {
    border: 1px solid #aaaaaa !important;
    border-radius: 3px !important;
    font-size: 15px !important;
    padding: 10px 8px;
    color: #222222;
    text-align: center !important;
    width: 60px !important;
    height: 40px !important;
    vertical-align: middle !important;
    color: #333333 !important;
    background-color: #ffffff !important;
}
.treatment_in .quantity input.qty:focus {
    border-color: #486b94 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(72, 107, 148, 0.2) !important;
}
.treatment_in form.cart {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* =============================================================================
   GUEST RESTRICTIONS — hide prices & short description via CSS fallback
   PHP hooks handle template output; this covers WC block REST-rendered output.
   WordPress adds .logged-in to body for authenticated users.
   ============================================================================= */
body:not(.logged-in) .wc-block-grid__product-price,
body:not(.logged-in) .wc-block-components-product-price,
body:not(.logged-in) .wp-block-woocommerce-product-price,
body:not(.logged-in) .woocommerce-product-details__short-description {
    display: none !important;
}

/* =============================================================================
   WOOCOMMERCE GLOBAL BUTTON OVERRIDES
   WooCommerce's own stylesheet loads after ours and resets button colours.
   !important is required throughout this block.
   ============================================================================= */

/* All WC buttons — base style matching site CTAs */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: #486b94 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    padding: 10px 24px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    box-shadow: none !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background-color: #3a5678 !important;
    color: #ffffff !important;
}

/* Proceed to Checkout (cart page) */
.woocommerce .wc-proceed-to-checkout a.checkout-button {
    background-color: #486b94 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    padding: 14px 32px !important;
    display: block !important;
    text-align: center !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #3a5678 !important;
}

/* Place Order (checkout page) */
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
    background-color: #486b94 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    padding: 14px 32px !important;
    width: 100% !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}
.woocommerce #payment #place_order:hover {
    background-color: #3a5678 !important;
}

/* Cart/Checkout/Account — form inputs and text */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
    color: #222222 !important;
}
.woocommerce-cart input,
.woocommerce-cart select,
.woocommerce-cart textarea,
.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-account input,
.woocommerce-account select,
.woocommerce-account textarea {
    color: #333333 !important;
    background-color: #ffffff !important;
}

/* Improve Stripe Checkout CC Fields */
#card-panel .Input {
	padding: 10px !important;
}
.Input, .p-FauxInput {
	padding: var(--p-spacing3) !important;
}
#Field-numberInput {
	padding: var(--p-spacing3) !important;
}

/* =============================================================================
   MY ACCOUNT
   ============================================================================= */
.woocommerce-MyAccount-navigation ul li a {
    font-size: 17px;
    color: var(--ccbc-blue);
    line-height: 1.8;
    display: block;
}
.woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--ccbc-nav-hover);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
    font-weight: 600;
    color: var(--ccbc-blue);
}

/* =============================================================================
   WOOCOMMERCE — MISC FIXES (consolidated from root style.css)
   ============================================================================= */

/* Product gallery opacity (WooCommerce sets opacity:0 until JS loads) */
.woocommerce div.product div.images.woocommerce-product-gallery {
    opacity: 1 !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    display: none !important;
}

/* Hide related products */
.related.products {
    display: none;
}

/* Base WooCommerce font */
.woocommerce {
    font-size: 20px;
    color: #222222;
}

/* Product page h1 */
.woocommerce .subpage_top_left h1 {
    font-size: 30px;
}

/* Price amount */
.woocommerce-Price-amount.amount {
    color: var(--ccbc-blue);
    font-size: 20px;
    margin-bottom: 2%;
    display: block;
}
/* Active pricing row keeps white text */
.price-rule-active .woocommerce-Price-amount.amount {
    color: #ffffff;
}

/* Quantity field */
.quantity {
    float: none !important;
    margin-bottom: 2% !important;
}
.woocommerce .quantity .qty {
    width: 60px;
    height: 40px;
    font-size: 20px;
}

/* Cart product image */
table.cart img,
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img {
    width: 75px;
    box-shadow: none;
}

/* Checkout h3 */
.product_cnt h3 {
    color: #222222;
}

/* Checkout form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    padding: 4%;
    font-size: 16px;
    border: 1px solid #999;
    border-radius: 2px;
}
.woocommerce form .form-row select {
    padding: 3%;
    font-size: 16px;
    border: 1px solid #999;
    border-radius: 2px;
}

/* Payment method icons */
.wc_payment_method img {
    display: unset;
}

/* Single product table cell */
.single td {
    padding-left: 5px !important;
}

/* Drop-down sub-menu depth styles */
.drop_down ul ul li a {
    font-size: 16px !important;
    line-height: 20px;
}
.drop_down ul ul {
    margin-top: 5px;
    margin-left: 10px;
    width: 100%;
}
.drop_down ul li a:hover {
    font-weight: bold;
}
.drop_down ul ul li {
    padding: 0 0 5px 0;
}

/* Login form */
#loginform input {
    font-size: 14px;
    padding: 1%;
}
#loginform p {
    margin-bottom: 20px;
}
#loginform #wp-submit {
    background-color: var(--ccbc-blue);
    color: #ffffff;
    border: none;
    min-width: 150px;
}

/* Ultimate Member — left-align register form */
.um-page-register .um {
    margin-left: 0 !important;
}

/* Plugin enu warning */
.enu_warning {
    background-color: #ffffff !important;
}

/* =============================================================================
   WORDPRESS CORE — IMAGE ALIGNMENT & ACCESSIBILITY
   ============================================================================= */
.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignnone { margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}