<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* ---------- Product images, rollover, description text, price and Shopify code -----------*/
.content h1 {text-align: center; padding: 40px 10px 0px 10px;} 
.content h2 {text-align: center; padding: 10px 10px 0px 10px; color: #000; padding-bottom: 8px; font-size: 1.6rem;}
.content p {text-align: center; font-size: 1.4rem;}
@media only screen and (max-width: 725px) {.content {padding: 10px 10px 0px 10px;}}  /* ---------- LOOK AT THIS, NOT SURE IT IS REQUIRED OR WANTED-----------*/
  

/* ---------- Spacer used to create space between content on page, may need to adjust separately for mobiles -----------*/    
.spacer {padding-top: 20px;} 
@media only screen and (max-width: 700px) {.spacer {padding-top11111111111: 0;}}   

/* ---------- Product images, rollover, description text, price and Shopify code -----------*/
.rollover {text-decoration: none;} 

.rollover:hover .main{max-height: 0px !important;}
.rollover:hover .alt{max-height: none !important;}
.description-spacer {padding-right: 15px;}
 
/* ---------- shopifybutton moved to styles.css -----------*/
/* .shopifybutton {margin:-44px 0 80px 20px; padding: 0 auto;} */

/* ---------- Padding bellow set images -----------*/
.cols4-container-skincaresets .alt{padding-bottom: 8px;} /*needs to be bellow alt image (instead of main), otherwise you end up with gap at top when you rollover */
.cols4-container-lipbutters .alt{padding-bottom: 8px;}
.cols-three .lip-butter-img{padding-bottom: 8px;}
.soap-set-image-main{padding-top:11px;}
.soap-set-image-alt{padding-bottom:8px;}


/* ----------Four Columns for the products---------- */    
.cols4outer *{box-sizing: border-box; } /* Includes padding and border within total width */    
.cols4outer {text-align: center; padding: 0 auto;} /* this doesn't center all the content, ie on 2nd row with just 2 entries - try to find a work around */
.cols4outer *{box-sizing: border-box; } /* Includes padding and border within total width */
.cols4outer1 {width: 50%; float: left; border111:1px solid #ccc; padding: 0% 0%;}
.cols4outer2 {width: 50%; float: left; border111:1px solid #ccc; padding: 0% 0%;}
.one4 {text-align: center; width: 50%; float: left; border111:1px solid #ccc; padding: 0% 1%;}
.two4 {width: 50%; float: left; border111:1px solid #ccc; padding: 0% 1%;}
.three4 {width: 50%; float: left; border111:1px solid #ccc; padding: 0% 1%}
.four4 {width: 50%; float: left; border111:1px solid #ccc; padding: 0% 1%;}

.one4inner, .two4inner, .three4inner, .four4inner {width: 325px; margin: 0 auto; border1111: 1px solid #000;}

.cols4outer:after {content: "";  display: table;  clear: both;} /* Clear floats after columns */

@media only screen and (max-width: 1400px) {.cols4outer1, .cols4outer2 {width: 100%; padding: 0% 0%; text-align: center;}}
@media only screen and (max-width: 700px) {.one4, .two4, .three4, .four4 {width: 100%; padding: 0% 0%; text-align: center;}}

.one4 p {padding-bottom: 30px;} 
.two4 p {padding-bottom: 30px;}    
.three4 p {padding-bottom: 30px;}  
.four4 p {padding-bottom: 30px;}

@media only screen and (min-width: 1401px) {.cols4-container-fullsoaps {padding-left: 3%}} /* moves all content to right a bit when 4 columns, allows for increased space on the right due to half-width soap */ 

/* ----------Controls width of the soaps content dependant on screen width - so doesn't automatically fill full screen width---------- */   
.cols4-container-fullsoaps {max-width: 68%; margin: 0 auto;}
@media only screen and (max-width: 2200px) {.cols4-container-fullsoaps {max-width: 86%;}}
@media only screen and (max-width: 1600px) {.cols4-container-fullsoaps {max-width: 100%;}}
@media only screen and (max-width: 1400px) {.cols4-container-fullsoaps {max-width: 80%;}}
@media only screen and (max-width: 900px) {.cols4-container-fullsoaps {max-width: 100%;}}
@media only screen and (max-width: 650px) {.cols4-container-fullsoaps {margin-left: -8px}} /* workaround, to fix issue that full-width soaps display too near right-hand border on mobile phones in portrait mode */

.cols4-container-halfsoaps {max-width: 68%; margin: 0 auto;}
@media only screen and (max-width: 2200px) {.cols4-container-halfsoaps {max-width: 86%;}}
@media only screen and (max-width: 1600px) {.cols4-container-halfsoaps {max-width: 100%;}}
@media only screen and (max-width: 1400px) {.cols4-container-halfsoaps {max-width: 80%;}}
@media only screen and (max-width: 900px) {.cols4-container-halfsoaps {max-width: 100%;}}  

.cols4-container-lipbutters {max-width: 68%; margin: 0 auto;}
@media only screen and (max-width: 2200px) {.cols4-container-lipbutters {max-width: 86%;}}
@media only screen and (max-width: 1600px) {.cols4-container-lipbutters {max-width: 100%;}}
@media only screen and (max-width: 1400px) {.cols4-container-lipbutters {max-width: 80%;}}
@media only screen and (max-width: 900px) {.cols4-container-lipbutters {max-width: 100%;}}

.cols4-container-faceoils {max-width: 68%; margin: 0 auto;}
@media only screen and (max-width: 2200px) {.cols4-container-faceoils {max-width: 86%;}}
@media only screen and (max-width: 1600px) {.cols4-container-faceoils {max-width: 100%;}}
@media only screen and (max-width: 1400px) {.cols4-container-faceoils {max-width: 80%;}}
@media only screen and (max-width: 900px) {.cols4-container-faceoils {max-width: 100%;}}

.cols4-container-skincaresets {max-width: 68%; margin: 0 auto;}
@media only screen and (max-width: 2200px) {.cols4-container-skincaresets {max-width: 86%;}}
@media only screen and (max-width: 1600px) {.cols4-container-skincaresets {max-width: 100%;}}
@media only screen and (max-width: 1400px) {.cols4-container-skincaresets {max-width: 80%;}}
@media only screen and (max-width: 900px) {.cols4-container-skincaresets {max-width: 100%;}}</pre></body></html>