/** Shopify CDN: Minification failed

Line 187:0 Unexpected "}"

**/
/* Home Page Index */
/* ======================*/
/* Fonts and Variables */
/*//////////////////// BANNER \\\\\\\\\\\\\\\\\\\\\\*/
/* Slideshow Section */
/* Heading Section */
/* Product Carousel Section */
/* Shop by Category Section */
/* Seen on Social Section */
/* Image Grid */
/* Load More Hover Grid */
/* Social Media Seciton */
/* KCC Foundation Banner */
/* Tablet View */


/* Fonts and Variables */

@import url("https://use.typekit.net/ert2ykm.css");
@import url('https://use.typekit.net/tfc6qkr.css');
@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400..900&display=swap');
@import url("https://use.typekit.net/iec1sye.css");
@import url("https://use.typekit.net/oam6dtl.css");
@import url("https://use.typekit.net/zlg4xao.css");
@import url("https://use.typekit.net/jnx4ema.css");
@import url("https://db.onlinewebfonts.com/c/17df18a81dbc8babe90f220320faefcc?family=OLD+SPORT+01+COLLEGE+NCV");
@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap'); /* Prata */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap'); /* Great Vibes */

@font-face {
    font-family: 'Branding SF';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("BrandingSF-NarrowSemiLight.ttf") format("truetype");
}

@font-face {
    font-family: 'Branding SF';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("BrandingSF-NarrowSemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "OLD SPORT 01 COLLEGE NCV";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("old-sport-01-college-ncv.ttf") format("truetype");
}
@font-face {
    font-family: "Fiorina Light";
    src: url('fiorinasubhead-light.ttf');
}

:root {
    --heading-font: 'georgiapro', sans-serif;
    --headingscriptfont: 'relation-one';
    --maven-pro: "Maven Pro", sans-serif;
    --bebas-neue-pro: "bebas-neue-pro", sans-serif;
    --branding-font-light: 'Branding SF', sans-serif;
    --branding-font-semibold: 'Branding SF', sans-serif;
    --seasonal-font: 'solitas-serif-normal', sans-serif;
    --bebas-neue-thin: "bebas-neue-pro", sans-serif;
    --bebas-neue-pro-2: "bebas-neue-pro", sans-serif;
    --homecoming-font: "OLD SPORT 01 COLLEGE NCV";
    --prata: "Prata", serif;
    --great-vibes: "Great Vibes", cursive;
    --brand-color: #60CDD7;
}

h1, h2, h3, p {
    font-family: var(--maven-pro);
}

/*//////////////////// BANNER \\\\\\\\\\\\\\\\\\\\\\*/

.top--heading :is(h2,p) {
    font-family: var(--bebas-neue-pro-2);
}
.top--heading h2 {
    font-size: 4.5vw;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1;
}

.top--heading p {
    font-size: 2vw;
    line-height: 1.3;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    letter-spacing: 0;
}

.bottom-banner :is(h2,p) {
    font-family: var(--bebas-neue-pro-2);
}

.bottom-banner h2 {
    font-size: 3.15vw;
    font-weight: 600;
    margin-bottom: 0.5em;
    line-height: 1;
}

.bottom-banner p {
    font-size: 1.3vw;
    line-height: 1.3;
    margin-bottom: 1.5em !important;
}

@media screen and (min-width: 768px) {
    .bottom-banner .__page-banner-text{
        width: 28% !important;
    }
    .bottom-banner .__page-banner-text.text-desktop-horizontal-position__right {
        left: 72% !important;
    }
}


@media screen and (max-width: 769px) {
    .top--heading h2 {
        font-size: 9vw;
        width: 80%;
        margin-right: auto;
        margin-left: auto; 
    }
    .top--heading h2 br {
        display: none;
    }
    .top--heading p {
        font-size: 4.5vw;
        margin-top: 0.5em;
    }
    .top-banner .button {
        min-height: 40px;
        font-size: 11px;
    }
    .bottom-banner h2 {
        font-size: 9vw;
        margin-bottom: 0.3em;
    }
    .bottom-banner p {
        font-size: 4.5vw;
        margin-bottom: 1em !important;
    }
    .bottom-banner .__page-banner-text{
        width: 100% !important;
        padding-top: 12px !important;
    }
    /* .bottom-banner .__page-banner-text.text-mobile-vertical-position__top {
        justify-content: space-between !important;
    } */
  
}



/* @media screen and (max-width: 767px) {
  /* stacked layout: let the image wrapper size to the image, not the slide */
  .kiss-slide:has(.kiss-slide__text-box.text-box__stacked) .kiss-slide__image { 
        height: auto; 
    }
  .kiss-slide:has(.kiss-slide__text-box.text-box__stacked) { 
        min-height: 0; 
        height: auto; 
    }

  /* keep the dash indicator below the slideshow instead of over the text */
  .kiss-slideshow:has(.text-box__stacked) + .kiss-slideshow__dots-container {
        top: 0 !important;
        margin-top: 0 !important;
        padding: 0 20px 8px;
    }
    .kiss-slideshow__button {
        margin-top: 0 !important;
    }
} */



/* Tablet View */

@media (min-width: 600px) and (max-width: 768px){ 
    .kiss-slide__text-box {
        left: 0% !important;
        width: 100% !important;
    }
    .top--heading h2 {
        font-size: 6.5vw;
    }
    .top--heading.hp-banner-3 h2 {
        font-size: 13vw;
    }
    .top--heading p {
        font-size: 3vw;
    }
    .top--heading.hp-banner-3 p {
        font-size: 3.6vw;
    }
    .top--heading.hp-banner-3 h2 {
        font-size: 13vw;
    }
}

@media screen and (width: 820px) and (height: 1180px) {

}
@media screen and (width: 1024px) and (height: 1366px) {

}

@media screen and (width: 912px) and (height: 1368px) {

}
@media screen and (width: 853px) and (height: 1280px) {

}

@media screen and (width: 1024px) and (height: 600px) {

}

@media screen and (width: 1280px) and (height: 800px) {

}


/*//////////////////// BANNER \\\\\\\\\\\\\\\\\\\\\\*/



/* Slideshow Section */

.kiss-slideshow__dots-container.use-dash-btns .kiss-slideshow__dots-container__dot {
    width: 60px !important;
}
.kiss-slideshow__dots-container.use-dash-btns .kiss-slideshow__dots-container__dot.dot--active .kiss-slideshow__button-icon {
    background-color: var(--brand-color) !important;
    height: 5.3px !important;
}
.kiss-slideshow__dots-container__dot .kiss-slideshow__button-icon {
    background-color: #fff !important;
    border: none !important;
}

@media screen and (max-width: 769px) {
    .kiss-slideshow__dots-container {
        margin-top: -72px !important;
    }
    .kiss-slideshow__dots-container__dot .kiss-slideshow__button-icon {
        background-color: #000 !important;
    }
}


/* Heading Section */

.kcc-heading h2 {
    font-family: var(--bebas-neue-pro-2);
    font-weight: 600;
    font-size: 3.5vw;
    text-transform: uppercase;
}

@media screen and (hover: hover) {
    .kcc-heading h2 a:hover {
        color: #999;
        box-shadow: none;
    }
}

@media screen and (max-width: 769px) {
    .kcc-heading .rich-text__blocks.center .rich-text__text {
        max-width: 100%;
    }
    .kcc-heading h2 {
        font-size: 9vw;
    }
    .kcc-heading h3 {
        font-size: 2.5vw;
        word-spacing: 10px;
    }
}



/* Product Carousel Section */

.kcc-product-carousel {
    padding-bottom: 2vw;
}
.product-slider__wrapper {
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 769px) {
    .product-slider__wrapper {
        margin-left: 20px;
        width: 90%;
    }

    .keen-slider {
        justify-content: flex-start;

    }
}

.card-information__text {
    font-size: calc(var(--font-heading-scale) * 1.8rem);
}



/* Product Education Section */ 


.kcc-product-education h2 {
    font-weight: 600;
    font-size: 2.32vw;
    text-transform: uppercase;
    margin-bottom: 0;
}
.kcc-product-education p {
    font-size: 1.05vw;
    margin-top: 0.3em;
}
.kcc-product-education  .text-column-right{
    padding: 0 1vw 2vw 4vw;
}
.kcc-product-education  .text-column-left {
    padding: 0 4vw 2vw 1vw;
}
.text-column-right .multicolumn-card,
.text-column-left .multicolumn-card  {
    row-gap: 3rem;
    justify-content: center;
}
.kcc-product-education  .text-column-left {
    text-align: right;
}
.text-column-right .row {
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 15px;
    margin-top: 1.5em;
}
.text-column-right .fixer-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.text-column-right .fixer-icon img {
    width: 5vw;
}
.text-column-right .ingredients-text {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.text-column-right .ingredients-text p {
    font-size: .63vw;
    line-height: 1;
    text-transform: uppercase;
}
.text-column-right .bottom-text h3 {
    display: inline-block;
    font-size: 1.25vw;
    font-weight: 600;
    border-bottom: 0;
    background-image: linear-gradient(90deg, #68CFD9 0.28%, #7398CF 45.62%, #7C7CBA 76.33%, #8072B3 99.93%);
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: 0 100%;
    width: 27%;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 0;
}
.text-column-right .bottom-text h3 strong {
    font-size: 2.5vw;
    font-weight: 600;
}
.text-column-right .bottom-text p {
    font-size: .62vw;
    margin-top: 0.5em;
}

@media screen and (max-width: 769px){
    .kcc-product-education .text-column-left {
        order: 1;
    }
    .kcc-product-education .text-column-right,
    .kcc-product-education .text-column-left {
        padding: 25px 15px;
        text-align: center;
    }
    .text-column-right .multicolumn-card, 
    .text-column-left .multicolumn-card {
        row-gap: 1rem;
    }
    .kcc-product-education :is(h2, h3, p),
    .kcc-product-education .bottom-text {
        text-align: center;
    }
    .kcc-product-education h2 {
        font-size: 9.5vw;
        margin-top: 0;
    }
    .kcc-product-education p {
        font-size: 3.35vw;
    }
    .text-column-right .bottom-text h3 strong {
        font-size: 10.5vw;
    }
    .text-column-right .bottom-text h3 {
        font-size: 5.15vw;
        background-size: 100% 2px;
        width: 55%; 
        margin-top: 0;
    }
    .text-column-right .bottom-text p {
        font-size: 3vw;
        line-height: 1;
    }
    .text-column-right .row,
    .text-column-right .fixer-icon {
        flex-direction: column;
    }
    .text-column-right .row {
        gap: 15px;
        padding-top: 2vw;
    }
    .text-column-right .fixer-icon img {
        width: 36vw;
    }
    .text-column-right .ingredients-text p {
        text-align: center;
        font-size: 3.7vw;
    }
}

/* Product Education Section -- New */ 

.kcc-product-education .multicolumn-card:has(.ingredient-banner--oils){ 
    background-color: rgb(195, 214, 40); 
}
.kcc-product-education .multicolumn-card:has(.castile-banner){ 
    background-color: rgb(34, 212, 209); 
}
.kcc-product-education .multicolumn-card > .multicolumn-card__info{ 
    /* padding-bottom: 24px;  */
    text-align: center; 
}
.ingredient-banner--oils :is(h1,h2,h3,p),
.castile-banner :is(h1,h2,h3,p) {
    font-family: var(--bebas-neue-pro-2) !important;
}

.ingredient-banner--oils {
    background: #c3d628;
    color: #29471f;
    text-align: center;
    padding-bottom: 2vw;
}

.ingredient-banner--oils h2 {
    margin: 0 0 20px;
    color: inherit;
    font-size: 3.8vw;
    font-weight: 700;
    line-height: 1.1;
}

.ingredient-banner--oils .ingredient-banner__items {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(35px, 3vw, 100px);
}

.ingredient-banner--oils .ingredient-banner__item {
    /* width: min(180px, 42%); */
    width: 25%;
}

.ingredient-banner--oils img {
    display: block;
    width: 100%;
    /* height: 90px !important; */
    height: 9vw !important;
    margin: 0 auto 8px;
    object-fit: contain;
}

.ingredient-banner--oils h3 {
    margin: 0 0 2px;
    color: inherit;
    font-size: 1.4vw;
    line-height: 1.2;
}

.ingredient-banner--oils p {
    margin: 0;
    font-size: 1.02vw;
    line-height: 1.3;
}

@media screen and (max-width: 769px) {
    .ingredient-banner--oils {
      padding-inline: 12px;
    }
    .ingredient-banner--oils h2 {
        font-size: 8vw;
    }
    .ingredient-banner--oils .ingredient-banner__item {
        width: 40%;
    }
    .ingredient-banner--oils .ingredient-banner__items {
      flex-direction: column;
      align-items: center;
      gap: 20px;
      margin-bottom: 2em;
    }
    
    .ingredient-banner--oils img {
      height: 30vw !important;
    }

    .ingredient-banner--oils h3 {
      font-size: 6vw;
    }

    .ingredient-banner--oils p {
      font-size: 4vw;
    }
}

.castile-banner {
    background: #22d4d1;
    color: #172c2c;
    text-align: center;
    padding-bottom: 2vw;
}

.castile-banner h2 {
    margin: 0 0 20px;
    color: inherit;
    font-size: 3.8vw;
    font-weight: 700;
    line-height: 1.1;
}

.castile-banner__items {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    gap: clamp(15px, 3vw, 30px);
    max-width: 81%;
    margin: 0 auto;
}

.castile-banner__item img {
    display: block;
    width: 8vw !important;
    height: 9vw !important;
    margin: 0 auto 8px;
    object-fit: contain;
}

.castile-banner__item h3 {
    margin: 0 0 3px;
    color: inherit;
    font-size: 1.4vw;
    line-height: 1.2;
}

.castile-banner__item p {
    margin: 0;
    font-size: 1.02vw;
    line-height: 1.3;
}

@media screen and (max-width: 769px) {
    .castile-banner {
      padding-inline: 12px;
    }
    .castile-banner h2 {
        font-size: 8vw;
    }
    .castile-banner__items {
      grid-template-columns: repeat(1, 1fr);
      gap: 20px;
      margin-bottom: 2em;
    }

    .castile-banner__item img {
      width: 30vw !important;
      height: 30vw !important;
    }

    .castile-banner__item h3 {
      font-size: 6vw;
    }

    .castile-banner__item p {
      font-size: 4vw;
    }
}

@media screen and (min-width: 768px) {
    .kcc-product-education .kiss-grid__item > .multicolumn-card {
        height: 100%;
        flex-direction: column;
    }
    .kcc-product-education .multicolumn-card > .media-wrapper,
    .kcc-product-education .multicolumn-card > .text_before_column {
        /* flex: 1 1 auto; */
        min-height: 0;
    }
    .kcc-product-education .media-wrapper .image-animate,
    .kcc-product-education .media-wrapper picture {
        display: block;
        height: 100%;
    }
    .kcc-product-education .media-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .kcc-product-education .text_before_column > section {
        height: 100%;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 769px) {
    .kcc-product-education .multicolumn-card:has(.ingredient-banner--oils),
    .kcc-product-education .multicolumn-card:has(.castile-banner){ 
        padding: 8vw 0;
    }
    .kcc-product-education .kiss-grid__item:nth-child(1){
        order: 1;
    }
    .kcc-product-education .kiss-grid__item:nth-child(2){
        order: 2;
    }
    .kcc-product-education .kiss-grid__item:nth-child(3){
        order: 4;
    }
    .kcc-product-education .kiss-grid__item:nth-child(4){
        order: 3;
    }
}


/* KCC Asia — homepage category tiles & promise banner (Asia scaffold) */

.kcc-cat-tile{display:block;position:relative;overflow:hidden;text-decoration:none;color:inherit;background:#f6f6f4;}
.kcc-cat-tile__media{aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f6f6f4;}
.kcc-cat-tile__media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.kcc-cat-tile:hover .kcc-cat-tile__media img{transform:scale(1.04);}
.kcc-cat-tile__media--solid{aspect-ratio:1/1;}
.kcc-cat-tile__label{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 100%);}
.kcc-cat-tile__label h3{margin:0;color:#fff;font-size:1em;letter-spacing:.02em;text-transform:uppercase;}
.kcc-promise{max-width:640px;margin:0 auto;text-align:center;padding:48px 20px;color:#fff;}
.kcc-promise h2{color:#fff;margin-top:0;}
.kcc-promise p{color:#e6e6e6;}
.kcc-promise .button{margin-top:16px;display:inline-block;}