/* ================================= */
/* Joah Index  ===================== */
/* = Custom Classes ================ */
/* = Fonts ========================= */
/* = Variables ===================== */
/* = Black Bar ===================== */
/* = Header ======================== */
/* = Mobile Menu =================== */
/* = Footer ======================== */
/* = Pages ========================= */
/* = Home Page ===================== */
/* = Meet Joah Page ================ */
/* = Forgot Password Page ========== */
/* = Contact Page ================== */
/* = Rewards Page ================== */
/* = Categories ==================== */
/* = Products ====================== */
/* = How To Blog =================== */
/* = How To Blog - Blog Post ======= */
/* = Reviews Page ================== */
/* = Checkout Page ================= */
/* = Login Page Ends  ============== */
/* = Press Popup  ================== */
/* = Store Locator Page ============ */
/* = Owl Sliders =================== */
/* = Messages ====================== */
/* = Product Grid - Product Details  */
/* ================================= */

:root{
    --joah-green: #cddf81;
    --joah-dark-green: #8f9d58;
    --joah-blue: #a6d3e8;
    --joah-light-blue: #9ddaec;
    --joah-gold: #dcb853 ;
    --joah-pink: #efa1af;
    /* --joah-purple: #a49bc6; old */
    --joah-purple: #cca4cd;
    --joah-red: #f16178;
    --joah-peach: #ffc0b8;
    --joah-light-purple: #cca4cd;
    --joah-light-gray: #ddd;
    --baseText: "gotham-light";
    --btnText: "gotham-book";
    --scriptText: "phoenix-script";
    --container-width: 1100px;
}

body { line-height: 1;}
p{ line-height: 1.5; }


/* ================================= */
/* = Custom Classes  =============== */

.cat_mobile_banner, .cat_desktop_banner{
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.cat_desktop_banner,
img.hidden-sm, img.hidden-xs{
    display: none;
}

img.hidden-md, img.hidden-lg{
    display: block;
}

@media screen and (min-width: 768px) {
    .cat_desktop_banner,
    img.hidden-sm, img.hidden-xs{
        display: block;
    }
    .cat_mobile_banner,
    img.hidden-md, img.hidden-lg{
        display: none;
    }
}

.page-main a{
    color: var(--joah-red);
}

a.btn--solid__purple:hover,
a.btn--border__purple{
    border: 2px solid var(--joah-purple);
    color: #222;
    text-transform: uppercase;
    font-weight: 900;
    text-decoration: none;
    display: inline-block;
    padding: .5em 4em;
    font-family: var(--btnText);
}

a.btn--border__purple:hover,
a.btn--solid__purple{
    border: 2px solid var(--joah-purple);
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    text-decoration: none;
    display: inline-block;
    padding: .5em 4em;
    background: var(--joah-purple);
    font-family: var(--btnText);
}

a.btn--border__purple,
a.btn--solid__purple{
    font-size: 12px;
}

.littleredarrows{
    list-style: none;
}

.littleredarrows li::before{
    border-color: transparent var(--joah-pink);
    top: .75em;
    font-size: 15px;
}

.page-main a.roundbnt, .page-main .roundbtn {
    background-color: var(--joah-pink);
    border: 2px solid var(--joah-pink);
}

/* = Custom Classes  =============== */
/* ================================= */


/* = Black Bar - Cart ============== */

#custom_top_header .minicart-wrapper .action.showcart .counter.qty,
#minicart-content-wrapper .action.checkout{
    background-color: var(--joah-gold);
}

#minicart-content-wrapper .action.edit:before,
#minicart-content-wrapper .action.delete:before,
#minicart-content-wrapper .product-item-details .product-item-name a{
    color: var(--joah-gold);
}

#minicart-content-wrapper .update-cart-item{
    background-color: var(--joah-pink);
}

#minicart-content-wrapper a.action.viewcart{
    color: #222;
    font-family: var(--btnText);
    border: 2px solid var(--joah-purple);
}

@media screen and (min-width: 768px) {
    #custom_top_header .minicart-wrapper .action.showcart .counter.qty{
        background-color: transparent;
    }
    #custom_top_header .minicart-wrapper .action.showcart.active .counter.qty{
        background-color: var(--joah-gold);
    }
}

/* = Black Bar - Cart Ends ========== */


/* ================================= */
/* = Header  ======================= */

.page-header{
    background-image: url("/pub/media/wysiwyg/joah/theme/fancy-trim-graphic.png");
    background-position: center top;
    background-size: auto 60px;
    background-repeat: repeat-x;
}

.page-header .subscribe_form .action.subscribe.primary{
    background: var(--joah-gold);
}

@media screen and (min-width: 768px) {
    .page-header .logo{
      margin-top: -10px;
    }
}


/* = Header  ======================= */
/* ================================= */


/* ================================= */
/* = Menu  ========================= */

.nav-toggle{
    border-color: 2px solid var(--joah-gold);
    color: var(--joah-gold);
}

.nav-toggle::before{
    color: var(--joah-gold);
    margin-top: 13px;
}

.nav-sections-item-title {
    width: 50%;
}

@media screen and (max-width: 767px){
    .nav-toggle{
        margin-top: 40px;
    }

    #custom_top_header .minicart-wrapper {
        top: 120px;
    }

    .nav-sections-item-title{
        background: var(--joah-gold);
        border-bottom: 1px solid var(--joah-gold);
        padding-top: 30px;
    }

    .nav-sections-item-title a.nav-sections-item-switch{
        color: #fff;
    }

    .nav-sections-item-title.active a.nav-sections-item-switch{
        color: #222;
    }

    .navigation li.level0:last-child,
    .nav-sections .header.links{
        border-bottom: 1px solid var(--joah-gold);
    }

    .navigation .level0,
    .nav-sections .header.links li > a {
        border-top: 1px solid var(--joah-gold);
    }
    .navigation .level0.has-active > a:not(.ui-state-active){
        border-color: var(--joah-gold);
    }
}

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

    .navigation{
        border-top: 2px solid var(--joah-gold);
        border-bottom: 2px solid var(--joah-gold);
    }

    .navigation .parent .level-top::after,
    .navigation > ul > li > a::after {
        background: var(--joah-gold);
    }

    .navigation .level0 .submenu .active > a{
        border-style: none;
    }

    .navigation .submenu a:hover{
        color: var(--joah-red);
    }

    .navigation .level0.has-active > .level-top,
    .navigation .level0 a{
      display: block;
    }

    .navigation > ul > li{
        flex-basis: 17%;
    }

    .navigation > ul > li > a{
        padding: 0 25px;
    }

    .navigation .search-link{
        display: none;
    }
}

/* = Menu  ========================= */
/* ================================= */


/* ================================= */
/* = Footer  ======================= */

.page-footer{
    background: var(--joah-pink);
    border-color: var(--joah-gold);
}

.page-footer .cruelty-free-logo{
    background-image: url("/pub/media/wysiwyg/joah/theme/joah-spritesheet.png");
    background-size: 600px auto;
    background-repeat: no-repeat;
    display: block;
    text-indent: -1000em;
    background-position: -1px -225px;
    width: 60px;
    height: 105px;
    transform: scale(.8);
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .social-links-container--desktop .cruelty-free-logo{
        transform: scale(.6);
    }
}

@media screen and (min-width: 1000px) {
    .social-links-container--desktop .cruelty-free-logo{
        position: absolute;
        left: 180px;
        top: -35px;
    }
}


/* = Footer  ======================= */
/* ================================= */


/* ================================= */
/* = Pages ======================== */

.page-main h1, .page-main h2{
    font-family: var(--headingText);
}

/* = Pages ======================== */
/* ================================= */


/* ====================================== */
/* = Rewards Page  ====================== */

.cms-rewards .page-main h2{
    color: var(--joah-red);
}

.rewards-box{
    background: url("/pub/media/wysiwyg/ornabg.png");
    border: 1px solid  var(--joah-gold);
}

.member-benefits-box{
    background: url("/pub/media/wysiwyg/diamondsbg.png");
    border: 1px solid  var(--joah-gold);
}

.rewards-box h4, .cms-rewards h3{
    color: var(--joah-red);
}


.page-main .kiss-rewards-block a.primary.pink__btn,
.page-main .kiss-rewards-block a.btn--border,
.page-main .kiss-rewards-block a.primary.purple__btn:hover{
    border-width: 2px;
    border-color: var(--joah-purple);
    background-color: var(--joah-purple);
    color: #fff;
    font-size: 15px;
    text-decoration: none;
}


.page-main .kiss-rewards-block a.primary.purple__btn,
.page-main .kiss-rewards-block a.primary.pink__btn:hover{
    background-color: #fff;
    color: #222;
    border-width: 2px;
    font-size: 15px;
    border-color: var(--joah-purple);
    text-decoration: none;
}

/* = Rewards Page  ====================== */
/* ====================================== */


/* ================================= */
/* = Home Page  ==================== */

.cms-home .page-main{
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    max-width: 100%;
}
@media screen and (max-width: 767px) {
    .cms-home .page-main{
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 0;
        max-width: 100%;
    }
}

.cms-home .column.main{
    padding-bottom: 0;
}

/* = Home Page - Banners  ==================== */


.sales-banners div{
    border-bottom: 2px solid #fff;
}

.sales-banners a{
    display: block;
}

.sales-banners img{
    width: 100%;
    height: auto;
    display: block;
}

.sales-banners img.mobile{
    display: block;
}

.sales-banners img.desktop{
    display: none;
}

@media screen and (min-width: 768px) {
    .cms-home .page-main{
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
        padding-bottom: 0;
        max-width: 100%;
    }

    .sales-banners{
        display: grid;
        grid-template-areas:
        'l-banner l-banner l-banner l-banner'
        's-banner m-banner m-banner m-banner';
        grid-template-columns: auto auto auto auto;
    }

    .sales-banners .big-banner{
         grid-area: l-banner;
    }

    .sales-banners .smaller-banner{
         grid-area: s-banner;
         border-right: 1px solid #fff;
    }

    .sales-banners .small-banner{
         grid-area: m-banner;
         border-left: 1px solid #fff;
    }

    .sales-banners img.mobile{
        display: none;
    }

    .sales-banners img.desktop{
        display: block;
    }

}

/* = Home Page - Best Sellers  ==================== */

.best-sellers{
   margin: 0 auto;
}

.best-sellers h2{
    color: var(--joah-light-blue);
    text-align: center;
    font-size: 27px;
    padding-top: 1em;
    margin-bottom: 0;
    /* //padding-bottom: .5em; */
    padding-bottom: 1em;
    font-family: var(--headingText);
}

.best-sellers h2 .script{
    font-family: var(--scriptText);
    font-size: 1.2em; /*32.4px*/
}

.best-sellers .owl-slider{
    text-align: center;
    padding-bottom: 50px;
}

.best-sellers .products{
    margin-top: 0;
    margin-bottom: 30px;
}

.column.main .best-sellers .product-items{
    margin-left: 0;
}

.best-sellers .product-items.owl-slider img{
    width: 100%;
    height: auto;
}

.best-sellers .product-items.owl-carousel{
    padding-left: 0;
    padding-right: 0;
}

.best-sellers .product-item .price-box .price-label,
.best-sellers .products-slider .price-container .price{
     font-size: 12px;
}

@media screen and (min-width: 768px) {
      .best-sellers h2{
          font-size: 48px;
      }
      .best-sellers .product-item .price-box .price-label,
      .best-sellers .products-slider .price-container .price{
          font-size: 18px;
      }
}

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

    .best-sellers{
        padding-left: 20px;
        padding-right: 20px;
    }

}

/* = Home Page - Product Promotion  ==================== */

.product-promotion{
    margin: 0 auto;
    max-width: 2000px;
    text-align: center;
    font-size: 16px;
}

.product-promotion img{
    display: block;
    width: 100%;
    height: auto;
}

.product-promotion dt{
    margin-bottom: 0;
}

.product-promotion dd{
    margin-bottom: 30px;
}

.product-promotion h2{
    font-family: var(--headingText);
    font-size: 36px;
    padding-top: 1em;
    padding-bottom: .5em;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
}

.product-promotion p{
    font-family: var(--headingText);
    font-size: 16px;
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 1.5em;
}

.product-promotion  .product{
    padding-bottom: 10px;
    flex-basis: 50%;
    margin-bottom: 0;
}



@media screen and (min-width: 768px) {
    .product-promotion{
        display: flex;
        justify-content: center;
        padding: 24px 40px 0;
    }

    .product-promotion  .product{
        padding-bottom: 0;
        padding-left: 5px;
        padding-right: 5px;
        display: flex;
        flex-flow: column;
    }

    .product-promotion  .product dd h2{
        min-height: 133px;
    }

    .product-promotion  .product dd{
        display: flex;
        flex-flow: column;
        align-items: stretch;
        flex-grow: 1;
        position: relative;
        padding-bottom: 50px
    }



    .product-promotion  .product dd a{
        display: block;
        width: 330px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .product-promotion .btn--border__purple{
        font-size: 15px;
    }
    .product-promotion dd{
        margin-bottom: 0;
    }
}

@media screen and (min-width: 1060px) {
    .product-promotion  .product dd h2{
        min-height: auto;
    }
}


@media screen and (min-width: 1210px) {
    .product-promotion h2{
        font-size: 48px;
        padding-left: 0;
        padding-right: 0;
    }

    .product-promotion p{
        font-family: var(--headingText);
        font-size: 22px;

    }

    .product-promotion a.btn--border__purple{
         font-size: 15px;
    }
}

/* = Home Page - Shop the look  ==================== */

.shop-the-look{
    text-align: center;
    font-size: 16px;
}

.shop-the-look h2{
    color: var(--joah-light-blue);
    text-align: center;
    font-size: 24px;
    margin-bottom: 0;
    /* padding-top: 1em; */
    padding-bottom: 0;
    font-family: var(--headingText);
}

.shop-the-look h2 .script{
    font-family: var(--scriptText);
    font-size: 1.5em;/*36px*/
}

.shop-the-look p{
    color: var(--joah-light-blue);
    font-size: 15px;
    padding-top: .5em;
    padding-bottom: 1em;
    width: 15em;
    margin: 0 auto;
    font-family: var(--headingText);
}

.shop-the-look img{
    width: 100%;
    height: auto;
}

.shop-the-look--mobile{
    display: block;
}
.shop-the-look--mobile a{
    display: block;
    color: #fff;
    text-transform: uppercase;
}

.shop-the-look--mobile a:hover,
.shop-the-look--mobile a:active{
    text-decoration: none;
}

.shop-the-look--mobile span{
    background-color: var(--joah-pink);
    display: block;
    padding: .75em 0;
    font-family: var(--btnText);
    font-size: 5vw;
    line-height: 1;
}

.shop-the-look--mobile span.face-caption{
    background-color: var(--joah-green);
}

.shop-the-look--mobile span.eye-caption{
    background-color: var(--joah-purple);
}

.shop-the-look--mobile span.brow-caption{
    background-color: var(--joah-blue);
}

.shop-the-look--mobile span.face-caption{
    background-color: var(--joah-green);
}

.shop-the-look--mobile span.eye-caption{
    background-color: var(--joah-purple);
}

.shop-the-look--mobile span.brow-caption{
    background-color: var(--joah-blue);
}

.shop-the-look--mobile a:active span.face-caption,
.shop-the-look--mobile a:active span.eye-caption,
.shop-the-look--mobile a:active span.brow-caption,
.shop-the-look--mobile a:active span{
    background: var(--joah-red);
}

.shop-the-look-rollover{
    display: none;
    overflow: hidden;
}

.shop-the-look-rollover .item{
    display: block;
    flex-basis: 25%;
    position: relative;
}

.shop-the-look-rollover .item img{
    display: block;
}

@media screen and (min-width: 768px) {
    .shop-the-look{
        padding-top: 36px;
    }

    .shop-the-look--mobile{
        display: none;
    }

    .shop-the-look-rollover{
        display: flex;
        overflow: hidden;
    }

    .shop-the-look h2{
        font-size: 48px;
    }

    .shop-the-look p{
        font-size: 24px;
        width: 100%;
    }
    .shop-the-look--mobile{
        display: none;
    }
}

/* = Joah Hover Effects on Shop Joah Row =*/

.shop-the-look-link{
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.75);
    transition: .5s top;
    z-index: -1;
    opacity: 0;
}

.shop-the-look-link span.script{
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 9vw;
    display: block;
    text-shadow: 0 0 .1em rgba(0,0,0,.25);
    font-family: var(--scriptText);
}

.shop-the-look-link.brow__hover{
    background: rgba(166,211,232,.65);
}

.shop-the-look-link.lips__hover{
    background: rgba(239,161,175,.65);
}

.shop-the-look-link.face__hover{
    background: rgba(205,233,129,.65);
}

.shop-the-look-link.brushes__hover{
    background: rgba(255,192,184,.65);
}

.item.active  .shop-the-look-link, .item:hover .shop-the-look-link{
    z-index: 1;
    opacity: 1;
    transition: .5s opacity;
}

/* = Joah Hover Effects on Shop Joah Row ======= */


/* = Home Page - Meet Joah  ==================== */

.meet-joah-row{
    padding: 50px 20px;
    margin: 0 auto;
    max-width: var(--container-width);
}

.meet-joah-row__video-popup__thumb.shown
.meet-joah-row__video-container{
    display: block;
}

.meet-joah-row__video-popup__thumb img{
    display: block;
    width: 100%;
    height: auto;
}

.meet-joah-row__video-popup__thumb.shown img{
    display: none;
}

.meet-joah-row__video-container{
    display: none;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}

.meet-joah-row__video-container iframe {
    position: absolute;
    width: 100%!important;
    height: 100%!important;
    left: 0;
    top: 0;
}

.close-video-popup__btn{
    border: 1px solid #fff;
    background: #000;
    border-radius: 50%;
    width: 2em;
    height: 2em;
    font-size: 16px;
    position: absolute;
    z-index: 1000;
    top: 0;
    right: 0;
}

.close-video-popup__btn .close-icon{
    display: block;
}

.close-video-popup__btn .close-icon:before{
    font-family: "luma-icons";
    content: "\e616";
    display: block;
    font-size: 12px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.close-video-popup__btn span{
    display: none;
}

.meet-joah-row__content {
    text-align: center;
}

.meet-joah-row__content h2{
    text-transform: uppercase;
    font-size: 36px;
    margin-top: 1em;
    font-family: var(--headingText);
    margin-bottom: 0;
}

.meet-joah-row__content h2:after{
    content: " ";
    display: block;
    background-image: url("/pub/media/wysiwyg/joah/theme/embelishment-hr.png");
    background-size: cover;
    background-position: center center;
    width: 180px;
    margin: 20px auto 0;
    min-height: 10px;
}

.meet-joah-row__content p{
  margin: auto;
  font-size: 15px;
  line-height: 1.75;
}

.meet-joah-row__content a{
    font-size: 12px;
}

@media screen and (min-width: 768px) {
    .meet-joah-row{
        display: flex;
        flex-flow: row-reverse;
        align-items: center;
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .meet-joah-row__video-popup__thumb{
        flex-basis: 50%;
    }

    .meet-joah-row__content{
        flex-basis: 50%;
    }

    .meet-joah-row__content h2{
        font-size: 48px;
        margin-top: 0;
        padding-bottom: .75em;
    }

    .meet-joah-row__content h2:after{
        width: 250px;
        min-height: 10px;
    }

    .meet-joah-row__content p{
         padding: 0 .5em 30px;
         width: 100%;
         font-size: 22px;
    }

    .meet-joah-row__content a{
        font-size: 15px;
    }
}

.yotpo-container{
    color: var(--joah-purple);
    text-align: center;
    text-transform: uppercase;
    font-family: var(--btnText);
    font-size: 14px;
}

.yotpo-container .instagram-icon{
    display: none;
}

.yotpo-slider-title-wrapper{
    display: none;
}

.yotpo-slider-wrapper{
      max-width: 100%!important;
      margin-bottom: -15px!important;
}

.yotpo-container .y-arrows .yotpo-icon{
    background-color: #fff!important;
}

@media screen and (min-width: 768px) {
    .yotpo-container{
        font-size: 24px;
    }
}

@media screen and (min-width: 2000px) {
    .yotpo-container{
        font-size: 36px;
    }
}

/* = Home Page  ==================== */
/* ================================= */


/* ================================= */
/* = Meet Joah Page  =============== */

.cms-meet-joah .page-main{
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    padding-top: 30px;
}

.cms-meet-joah .columns .column.main{
    padding-bottom: 0;
}

.cms-meet-joah .page-main h2{
    font-family: var(--headingText);
    text-transform: uppercase;
    color: var(--joah-red);
    font-size: 36px;
    text-align: center;
}

.cms-meet-joah .page-main p{
    font-size: 16px;
}

.cms-meet-joah h1.page-title{
    text-align: center;
    text-indent: -1000em;
    padding-bottom: 40px;
}

.cms-meet-joah h1.page-title:before{
    background: url("/pub/media/wysiwyg/joah/meet-joah-page/meet-joah-title.png") no-repeat center;
    background-size: cover;
    width: calc(100px * 2.5);
    height: calc(19px * 2.5);
    content: " ";
    display: block;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.cms-meet-joah h1.page-title:after{
    content: " ";
    display: block;
    background-image: url("/pub/media/wysiwyg/joah/theme/embelishment-hr.png");
    background-size: cover;
    background-position: center center;
    width: 180px;
    margin: 40px auto 0;
    min-height: 10px;
}

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

    .cms-meet-joah h1.page-title:before{
        width: calc(100px * 4);
        height: calc(19px * 4);
    }

    .cms-meet-joah h1.page-title:after{
        margin: 80px auto 0;
        width: 230px
    }

    .cms-meet-joah .page-main h2{
        font-size: 36px;
    }

    .cms-meet-joah .page-main p{
        font-size: 18px;
    }
}

@media screen and (min-width: 1000px) {
    .cms-meet-joah .page-main h2{
        font-size: 48px;
    }
}

.meet-joah-intro-row{
    background: url("/pub/media/wysiwyg/joah/meet-joah-page/joah-polaroid--mobile.png") no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    padding: 0 20px;
    padding-bottom: 110%;
}

@media screen and (min-width: 768px) {
    .meet-joah-intro-row{
        margin: 0 auto;
        width: 100%;
        max-width: var(--container-width);
        padding-bottom: 50px;
        padding-left: 50%;
        padding-top: 20px;
        background-position: top left;
        background-size: 40% auto;
    }
}

@media screen and (min-width: 1000px) {
    .meet-joah-intro-row{
        padding-left: 550px;
        background-size: 500px auto;
    }
}

.the-scoop-on-k-beauty:after{
    background-position: 40px -10px;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 117px;
    height: 452px;
    display: block;
    content: " ";
}
@media screen and (min-width: 450px) {
    .the-scoop-on-k-beauty:after{
        background-position: 18px top;
    }
}

.the-scoop-on-k-beauty{
    background: #ffd5dd;
    background: -moz-linear-gradient(top,  #ffd5dd 1%, #fffdfe 35%, #fffdfe 64%, #ffd5dd 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffd5dd 1%,#fffdfe 35%,#fffdfe 64%,#ffd5dd 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffd5dd 1%,#fffdfe 35%,#fffdfe 64%,#ffd5dd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-size: cover;
    padding: 25px 0;
    text-align: center;
    position: relative;
    margin-bottom: 30px;
}

.the-scoop-container{
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    position: relative;
}

.the-scoop-content{
    text-align: center;
}

.page-main .the-scoop-on-k-beauty h2{
    text-align: center;
    padding-bottom: .5em;
}

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


    .the-scoop-on-k-beauty{
        text-align: right;
        padding: 40px 0;
        padding-right: 0;
        margin-bottom: 50px;
    }

    .the-scoop-container{
        max-width: var(--container-width);
        padding-right: 20px;
        padding-left: 20px;
    }

    .page-main .the-scoop-on-k-beauty h2{
        padding-right: 0;
        margin-top: 0;
        text-align: right;
    }

    .the-scoop-container{
        height: 100%;
    }

    .the-scoop-content{
        padding-right: 0;
        width: 45%;
        text-align: right;
    }

    .the-scoop-on-k-beauty:after{
        background: url("/pub/media/wysiwyg/joah/meet-joah-page/the-scoop-products--desktop.png") no-repeat;
        background-position: right;
        background-size: cover;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateY(-50%);
        width: calc(384px * 1);
        height: calc(462px * 1);
        display: block;
        content: " ";
    }
}


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

    .page-main .the-scoop-on-k-beauty h2:before{
        width: calc(100px/1.5);
        height: calc(137px/1.5);
    }

    .the-scoop-on-k-beauty:after{
        width: calc(384px * 1.2);
        height: calc(462px * 1.2);
    }

}

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

    .the-scoop-on-k-beauty:before{
        width: 240px;
        height: 220px;
        top: -13px;
    }

    .the-scoop-on-k-beauty{
        text-align: right;
        padding-right: 0;
    }

    .the-scoop-on-k-beauty:after{
        width: calc(384px * 1.3);
        height: calc(462px * 1.3);
    }

}
.press-awards h2{
    padding-bottom: 0;
}

.press-awards h2:after{
    content: " ";
    display: block;
    background-image: url("/pub/media/wysiwyg/joah/theme/embelishment-hr.png");
    background-size: cover;
    background-position: center center;
    width: 180px;
    margin: 20px auto 0;
    min-height: 10px;
}

.press-images-slider ul{
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    width: calc(100% - 60px);
}

.press-images-slider .owl-carousel .owl-nav button.owl-prev{
    left: -20px;
}

.press-images-slider .owl-carousel .owl-nav button.owl-next{
    right: -20px;
}

.press-images-slider button{
    border: none;
    padding: 0;
    display: block;
}

.press-images-slider span{
    display: none;
}

.press-images-slider ul li{
    flex-basis: 20%;
    align-items: center;
    position: relative;
    display: flex;
    flex-flow: column;
    padding: 5px;
}

.press-images-slider ul li a{
    height: 100%;
    display: block;
    position: relative;
    justify-content: center;
    display: flex;
    flex-flow: column;
}

.press-images-slider ul.owl-carousel .owl-nav button.owl-prev,
.press-images-slider ul.owl-carousel .owl-nav button.owl-next{
    margin-top: 0;
}

.meet-joah-video{
    background: url("/pub/media/wysiwyg/joah/meet-joah-page/video-image--mobile.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 0;
    padding-bottom: 58%;
    position: relative;
}

.meet-joah-video button.play-video-btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: none;
    color: #fff;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    box-shadow: 0;
    overflow: hidden;
    text-indent: -1000em;
    border: none;
}

.meet-joah-video button.play-video-btn:before{
    width: 100px;
    height: 100px;
    background: url("/pub/media/wysiwyg/joah/meet-joah-page/play-icon.png");
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.meet-joah-video__container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 100%;
    max-height: 315px;
    width: 80%;
    max-width: 500px;
    display: none;
}


.meet-joah-video__container iframe{
    position: absolute;
    width: 100%!important;
    height: 100%!important;
    left: 0;
    top: 0;
}

.meet-joah-video.shown .meet-joah-video__container{
    display: block;
}

@media screen and (min-width: 768px) {
    .meet-joah-video{
        background: url("/pub/media/wysiwyg/joah/meet-joah-page/video-image--desktop.jpg");
        padding-bottom: 44%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .meet-joah-video button.play-video-btn{
        width: 200px;
        height: 200px;
    }
    .meet-joah-video button.play-video-btn:before{
        width: 200px;
        height: 200px;
    }
}


/* = Meet Joah Page  =============== */
/* ================================= */


/* ================================= */
/* = Search Page =================== */

.cms-search .simple-search-form .action.search,
.cms-search-joah .simple-search-form .action.search{
    background-color: var(--joah-purple);
    border-color: var(--joah-purple);
}

.cms-search .simple-search-form .action.search:hover,
.cms-search-joah .simple-search-form .action.search:hover{
    background-color: #fff;
    color: #222;
    border-color: var(--joah-purple);
}

/* = Search Page =================== */
/* ================================= */


/* ================================= */
/* = Advanced Search Page ========== */

.catalogsearch-advanced-index .action.primary{
    background-color: var(--joah-purple);
    border-color: var(--joah-purple);
}

.catalogsearch-advanced-index .action.primary:hover{
    background-color: #fff;
    color: #222;
    border-color: var(--joah-purple);
}

/* = Advanced Search Page ========== */
/* ================================= */


/* ================================= */
/* = Forgot Password Page ========== */

#form-validate button.action.submit.primary{
    background: var(--joah-purple);
    font-size: 12px;
    display: block;
    width: 280px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 768px) {
    #form-validate button.action.submit.primary{
        width: auto;
        font-size: 15px;
        margin-left: 0;
    }
}

/* = Forgot Password Page ========== */
/* ================================= */


/* = Checkout Success  ====================== */

.checkout-onepage-success .action.primary,
.checkout-onepage-success .continue{
    background-color: var(--joah-pink);
    border: 2px solid  var(--joah-pink);
    text-transform: uppercase;
    font-family: var(--btnText);
}

.checkout-onepage-success .action.primary:hover,
.checkout-onepage-success .continue:hover{
    background-color: #fff;
    border: 2px solid  var(--joah-light-purple);
    color: #222;
}

/* ================================= */
/* = Contact Page ================== */

.cms-contact .contact-us-banner{
    position: relative;
}

.cms-contact .contact-us-banner h1.caption {
    color: #FFF;
    text-align: center;
    font-size: 7vw;
    text-transform: uppercase;
    position: absolute;
    top: 62%;
    width: 80%;
    left: 10%;
}

.cms-contact .contact-us-banner h1.caption span{
    font-family: var(--scriptText);
    font-size: 1.8em;
    text-transform: capitalize;
    display: block;
}

@media screen and (min-width: 768px) {
    .cms-contact .contact-us-banner h1.caption {
        text-align: left;
        position: absolute;
        left: 60%;
        top: 50%;
        width: 40%;
        padding-right: 5%;
        transform: translateY(-50%);
        margin-top: 0;
        font-size: 2.75vw;
        text-transform: uppercase;
    }

    .cms-contact .contact-us-banner h1.caption span{
        font-size: 2.2em;
    }

}

.cms-contact .contactbutton{
    border: 2px solid var(--joah-purple);
    background-color: var(--joah-purple);
    color: #fff;
}

.cms-contact .contactbutton:hover {
    border: 2px solid var(--joah-purple);
    background-color: transparent;
    color: var(--joah-purple);
}

.cms-contact .contactpg-sidebox label,
.cms-contact .mobilecontactinfo a{
    color: var(--joah-pink);
    text-decoration: none;
}

.cms-contact .mobilecontactinfo a:hover{
    color: #222;
}

.cms-contact .contactbutton{
    border: 2px solid var(--joah-purple);
    background-color: var(--joah-purple);
    color: #fff;
}

.cms-contact .contactbutton:hover {
    border: 2px solid var(--joah-purple);
    background-color: none;
    color: var(--joah-puple);
}

.cms-contact .contactpg-sidebox label,
.cms-contact .mobilecontactinfo a{
    color: var(--joah-pink);
    text-decoration: none;
}

.contact-form{
    padding-bottom: 20px;
}

/* = Contact Page ================== */
/* ================================= */


/* ================================= */
/* = Categories  =================== */
.category-image img { width:100%; }
.product-labels{ background-color: var(--joah-pink); }

.catalog-category-view .page-title-wrapper{
    background: url("/pub/media/wysiwyg/joah/theme/category-title-bg.png");
    padding-bottom: 35%;
    height: 0;
    background-size: cover;
    position: relative;
}

.catalog-category-view #page-title-heading{
    font-family: var(--scriptText);
    text-transform: lowercase;
    font-size: 16vw;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 0;
    white-space: nowrap;
}

.catalog-category-view #page-title-heading:first-letter{
    text-transform: uppercase;
}

.catalog-category-view .category-description{
    //color: var(--joah-pink);
}

.catalog-category-view .category-description h2{
     font-family: var(--scriptText);
     font-size: 32px;
     padding-bottom: .25em;
}

/* = Categories - Breadcrumbs  =================== */

.breadcrumbs .items, .breadcrumbs .items a, .breadcrumbs .items a:hover{
    color: #222;
    text-transform: uppercase;
    line-height: 1;
    font-family: var(--btnText);
}

.breadcrumbs .item:not(:last-child)::after{
    content: "/";
    color: #222;
    line-height: 1;
    font-weight: bold;
    font-family: var(--btnText);
}

.catalog-product-view .breadcrumbs{
    padding: 30px 15px 25px;
    margin-bottom: 0;
}

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

    .breadcrumbs {
        display: block;
        padding: 20px 0 0 0;
    }

    .breadcrumbs li{
      padding-bottom: 5px;
    }

    .catalog-product-view .breadcrumbs{
        padding: 20px 15px 15px;
    }

}

@media screen and (min-width: 768px) {
    .breadcrumbs{
        padding: 20px 0 0 0;
    }
}

/* = Categories - Breadcrumbs End  ============== */


/* = Categories - Grid  ============== */

#layer-product-list{
    position: relative;
    display: flex;
    flex-flow: column;
}

#layer-product-list .category-description{
    order: 0;
    padding: 2.5em 0 0;
    margin-bottom: 0;
    font-size: 12px;
}

@media screen and (min-width: 768px) {
    #layer-product-list .category-description{
        padding: 30px 0;
    }
}

.catalog-category-view .column.main ol.product-items{
    justify-content:flex-start;
}

.catalogsearch-result-index .product-items li,
.catalog-category-view .product-items li{
    margin-bottom: 40px;
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
}

.catalog-category-view .product-item-info,
.catalog-category-view .product-item-info:hover,
.products-grid .product-item-info,
.products-grid .product-item-info:hover{
  padding-left: 0;
  padding-right: 0;
}

@media screen and (min-width: 768px) {
    .page-products .products-grid .product-item,
    .catalogsearch-result-index .product-items li,
    .catalog-category-view .product-items li{
        width: calc( 100% / 3 );
        margin-bottom: 40px;
    }
}

#layer-product-list .product-items{
    order: 3;
}

#layer-product-list .products-grid{
    margin: 0;
}

#layer-product-list .toolbar-products:nth-child(2){
    position: absolute;
    top: -3.5em;
    right: 0;
    font-size: 12px;
    order: 0;
    padding: 0;
    margin: 0;
    display: none;
}

#toolbar-amount{
    display: none;
}

#layer-product-list .toolbar-products{
    line-height: 1;
}

#layer-product-list .toolbar-products:nth-child(2) p{
    padding-bottom: 0;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-family: var(--btnText);
    padding: 0;
}

#layer-product-list .toolbar-products:first-child p:after{
    content: " Total";
}

@media screen and (min-width: 768px) {
    #layer-product-list .toolbar-products:nth-child(2){
        display: block;
    }
}

a.product-item-photo,
a.product-item-photo-hovered{
    display: block;
    width: calc(100% - 10px);
    left: 5px;
}

a.product-item-photo-hovered{
    left: 0;
}

.products-grid .product-item-inner a.action.primary,
.products-grid .product-item-inner .action.tocart.primary{
    color: var(--joah-purple);
    font-family: var(--btnText);
    border-radius: 0;
    display: block;
    border: solid 2px var(--joah-purple) ;
    background-color: transparent;
    width: calc(100% - 10px);
    margin: 0;
    font-size: 12px;
    padding: 7px 15px 6px 15px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

.products-grid .product-item-inner a.action.primary:hover,
.products-grid .product-item-inner .action.tocart.primary:hover{
    background: var(--joah-purple);
    border-color: var(--joah-purple);
    color: #fff;
    font-size: 12px;
    padding: 7px 15px 6px 15px;
}

@media screen and (min-width: 768px) {
    .catalog-category-view .page-title-wrapper{
        background: url("/pub/media/wysiwyg/joah/theme/category-title-bg--desktop.png");
        padding-bottom: 12%;
        height: 0;
        background-size: cover;
        position: relative;
    }

    .catalog-category-view #page-title-heading{
        font-size: 8vw;
    }

    .catalog-category-view  .toolbar-amount{
        text-align: right;
        float: none;
    }


    .products-grid .product-item-inner a.action.primary,
    .products-grid .product-item-inner .action.tocart.primary,
    .products-grid .product-item-inner a.action.primary:hover,
    .products-grid .product-item-inner .action.tocart.primary:hover{
         font-size: 15px;
    }

}

@media screen and (min-width: 1100px) {
    .catalog-category-view #page-title-heading{
        font-size: 86px;
    }
}

/* = Categories  Sidebar  =========== */

.sidebar-main .block-subtitle {
    display: none;
}

.filter-options-title{
    padding-left: 0;
}

.filter-options-item{
    border-bottom: none;
    font-size: 12px;
}

.filter-title strong{
    background: var(--joah-purple);
}

@media screen and (max-width: 767px) {
    .filter-options-item{
        font-size: 16px;
    }
}

@media screen and (min-width: 768px) {
    .page-layout-2columns-left .sidebar-main{
        padding-top: 25px;
    }
}

/* = Categories  Grid  =========== */

.product-item-name01{
    font-size: 12px;
    color: #222;
}

.product-item-name02{
    color: var(--joah-pink);
    font-size: 10px;
}

.catalog-category-view .product-items li{
    padding: 10px;
}

.price-container .price,
.products.grid .product-item-details .price-box,
.catalog-category-view .product-item-details .price-box{
    font-family: "gotham-medium";
    font-size: 12px;
}

.catalog-product-view .product-info-price .price-box .old-price .price-container .price,
.old-price, .products-slider .old-price {
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    color: #aaa;
    position: relative;
}

.old-price:after{
    content: " ";
    width: 100%;
    display: block;
    height: .1em;
    background: #aaa;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


@media screen and (min-width: 768px) {
    .price-container .price,
    .products.grid .product-item-details .price-box,
    .catalog-category-view .product-item-details .price-box{
        font-size: 18px;
    }
}

.page-products .products-grid .product-item{
    margin-left: 0;
    padding-bottom: 0;
}


/*= Load More Products Button ==========*/
#load-more-product{
    text-align: center;
    padding-top: 20px;
}

#load-more-product a#load-more-product-link{
    border: 2px solid var(--joah-purple);
    background-color: var(--joah-purple);
    color: #fff;
    font-family: var(--btnText);
    font-size: 12px;
    padding: .5em 4em;
    margin-top: 20px;
    display: inline-block;
    text-transform: uppercase;
}

#load-more-product:hover a#load-more-product-link:focus,
#load-more-product:hover a#load-more-product-link:hover {
    color: #222;
    background-color: #fff;
    text-decoration: none;
}
@media screen and (min-width: 768px) {
    #load-more-product a#load-more-product-link{
        font-size: 15px;n
    }
}

/* = Load More Products Button Ends ======== */
        padding: .5em 0;
        width: calc( 100% / 3 );
        text-align: center;
    }
}

/*= Load More Products Button ==========*/
#load-more-product{
    text-align: center;
    padding-top: 20px;
}

#load-more-product a#load-more-product-link{
    border: 2px solid var(--joah-purple);
    background-color: var(--joah-purple);
    color: #fff;
    font-family: var(--btnText);
    font-size: 12px;
    padding: .5em 4em;
    margin-top: 20px;
    display: inline-block;
    text-transform: uppercase;
}

#load-more-product:hover a#load-more-product-link:focus,
#load-more-product:hover a#load-more-product-link:hover {
    color: #222;
    background-color: #fff;
    text-decoration: none;
}
@media screen and (min-width: 768px) {
    #load-more-product a#load-more-product-link{
        font-size: 15px;n
    }
}

/* = Load More Products Button Ends ======== */
        padding: .5em 0;
        width: calc( 100% / 3 );
        text-align: center;
    }
}

/* = Categories = Pagination =============== */

#layer-product-list .field.limiter{
    display: none;
}

.products.wrapper ~ .toolbar .pages,
#layer-product-list .pages .pages-items{
    display: flex;
    justify-content: center;
    float: none;
}

#layer-product-list .pages-items .item{
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: 1px solid #222;
    overflow: hidden;
    color: #222;
}

#layer-product-list .pages-items .item span{
    color: #222;
}

.pages-item-next, .pages .action.next,
.pages strong.page{
    display: block;
    background-color: transparent;
}

.pages .action{
    box-shadow: none;
}

.pages a.page{
    display: block;
    position: relative;
    background-color: transparent;
}

.pages a.action.previous,
.pages a.action.next{
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    margin-left: 0;
    background-color: transparent;
}

.pages a.action.previous:before,
.pages a.action.next:before{
    margin-left: 0;
    display: block;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 12px;
}

#layer-product-list .pages-items .item.current{
    background-color: var(--joah-gold);
    border: 1px solid var(--joah-gold);
    color: #fff;
}

#layer-product-list .pages-items .item.current span{
    color: #fff;
}

.toolbar .pages{
    margin-top: 30px;
}

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

    .products.wrapper ~ .toolbar .pages{
        display: flex;
        justify-content: center;
        float: none;
    }

    .product-item-name01{
        font-size: 18px;
    }

    .product-item-name02{
        font-size: 14px;
    }

}

/* = Categories = Pagination =============== */

/* = Categories  =================== */
/* ================================= */


/* ================================= */
/* = Products  ===================== */
.catalog-product-view .column.main{
    margin-top: 0;
}

.catalog-product-view .fieldset{
    justify-content: space-between;
}

.catalog-product-view .box-tocart a.action.primary,
.catalog-product-view .box-tocart .action.tocart{
    background: var(--joah-light-purple);
    padding: 0 50px;
    border: 2px solid var(--joah-light-purple);
}

.catalog-product-view .box-tocart a.action.primary:hover,
.catalog-product-view .box-tocart .action.tocart:hover{
    background: #fff;
    color: #222;
    border-color: var(--joah-light-purple);
}

.catalog-product-view .product-add-form{
    position: relative;
    max-width: 305px;
    margin-left: auto;
    margin-right: auto;
}

.catalog-product-view  .page-main{
    padding-left: 0;
    padding-right: 0;
}

.catalog-product-view .product.media{
    margin-top: 0;
}

.catalog-product-view .page-title #product_title_01{
    font-family: var(--headingText);
    text-transform: uppercase;
    font-size: 18px;
    padding-bottom: .25em;
}

.catalog-product-view .page-title #product_title_02{
    font-size: 24px;
    text-transform: uppercase;
    font-weight: bold;
}

.catalog-product-view .product-add-form:after{
    display: block;
    content: " ";
    position: absolute;
    right: 0;
    bottom: 0;
    background: url("/pub/media/wysiwyg/joah/theme/cruelty-free-logo.png") no-repeat;
    background-size: cover;
    width: 40px;
    height: 67px;
}

.catalog-product-view .columns .column.main{
    padding-bottom: 0;
}

.catalog-product-view .product-info-main .yotpo.bottomLine.bottomline-position.yotpo-small {
    width: 100%;
    display: block;
    text-align: center;
    padding-bottom: 5px;
}

.catalog-product-view .product-info-main .yotpo .pull-left{
    text-align: center;
}

.catalog-product-view .product-info-main .text-m:after{
    background-image: url('/pub/media/wysiwyg/joah/product-detail/yotpo-pink-pen.png');
    background-size: 15px 14px;
    margin-left: 5px;
    display: inline-block;
    width: 15px;
    height: 14px;
    content:"";
}

.catalog-product-view .product-info-main .pull-left.text-m.ask-question{
    display: none;
}

.catalog-product-view .product-info-price .price-box .price-container .price{
    color: var(--joah-pink);
    font-family: var(--btnText);
}

.catalog-product-view .yotpo-default-button{
    width: 200px;
}

.yotpoBottomLine .yotpo.QABottomLine.yotpo-small{
    display: none
}

@media screen and (min-width: 768px) {
    .catalog-product-view .product-info-main .yotpo .pull-left,
    .catalog-product-view .product-info-main .yotpo.bottomLine.bottomline-position.yotpo-small {
        text-align: left;
    }

    .product-info-main,
    #product-detail-accordian__container{
      padding-left: 0;
    }

    .catalog-product-view .product-add-form{
        position: relative;
        max-width: 100%;
    }

    .catalog-product-view .product-info-price .price-box{
        padding-bottom: 5px;
    }

    .catalog-product-view .box-tocart{
        position: relative;
    }

    .catalog-product-view .fieldset{
        justify-content: flex-start;
    }

    .catalog-product-view .box-tocart:before{
       content: "bunny";
       position: absolute;
       left: 325px;
       bottom: -10px;
       background-image: url("/pub/media/wysiwyg/joah/theme/joah-spritesheet.png");
       background-size: 600px auto;
       background-repeat: no-repeat;
       display: block;
       text-indent: -1000em;
       background-position: -1px -225px;
       width: 60px;
       height: 105px;
       transform: scale(.7);
       margin: 0;
    }

    .catalog-category-view .product-items li{
        padding: 10px;
    }

    .catalog-product-view .swatch-attribute{
        text-align: left;
    }
}

@media screen and (min-width: 1024px) {
    .catalog-product-view .page-title #product_title_01{
        font-size: 36px;
    }
    .catalog-product-view .page-title #product_title_02{
        font-size: 48px;
    }

    .catalog-category-view .product-items li{
        padding: 10px;
    }

}

@media screen and (min-width: 1200px) {
    .catalog-product-view .page-title #product_title_01{
        font-size: 36px;
    }
    .catalog-product-view .page-title #product_title_02{
        font-size: 48px;
    }
    .catalog-product-view .product-info-price .price-box .price-container .price {
        font-size: 30px;
    }
}

.catalog-product-view .box-tocart div.mage-error[generated]{
    font-size: 10px;
    padding: .5em;
}

/* ================================= */
/* = Products = Swatches =========== */

.product-info-main{
    padding-left: 15px;
    padding-right: 15px;
}

.product-info-main .swatch-attribute-options{
    display: block;
    margin: 15px 0;
}

.product-info-main .swatch-opt{
    margin-top: 0;
    margin-bottom: 0;
}

.product-info-main .product-options-wrapper .swatch-option.image,
.product-info-main .product-options-wrapper .swatch-option.color {
    position: relative;
    min-width: 50px;
    height: 50px;
    border-radius: 40px;
    padding: 2px ;
    background-size: cover;
}

.product-info-main .product-options-wrapper .swatch-option.selected::after {
    content: '';
    width: 88%;
    height: 88%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.8);
}

.swatch-option-tooltip{
    display: none!important;
}

.swatch-attribute-label:after{
    content: ":";
}

.swatch-option.selected,
.swatch-option.image:not(.disabled):hover,
.swatch-option.color:not(.disabled):hover {
    outline: none;
    border: none;
}

.catalog-product-view .yotpo-main-widget{
    padding-top: 50px;
}

.catalog-product-view .yotpo.yotpo-main-widget:before{
    content: "our reviews";
    color: var(--joah-light-blue);
    font-family: var(--scriptText);
    font-size: 48px;
    padding-left: 15px;
    display: block;
    padding-bottom: 10px;
}

.product-options-bottom .swatch-attribute-selected-option{
    padding-left: 10px;
}

/* = Products = Swatches =========== */
/* ================================= */


/* ================================= */
/* = Products = Gallery ============ */

.video-container{
    margin-bottom: 10px;
}

.video-container .show-video-popup--btn{
    font-family: var(--btnText);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 12px;
}

.video-container .show-video-popup--btn:hover{
    text-decoration: none;
}

.video-container .fa-play-circle-o{
    content: url("/pub/media/wysiwyg/joah/product-detail/play-circle-border-icon.png");
    width: 40px;
    margin-left: 10px;
    margin-top: -3px;
}

#video--popup-container.shown #popup-inner{
    top: 50%;
    transform: translate(-50%,-50%);
}

#video--popup-container .popup-footer{
    padding: 0;
}

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

    .video-container .show-video-popup--btn{
        font-size: 16px;
    }

    .video-container .fa-play-circle-o{
        width: 50px;
        margin-left: 20px;
        margin-top: -5px;
    }
}

/* = Products = Gallery ============ */
/* ================================= */


/* ================================= */
/* = Products = Description ======== */

.product-info-main .box-tocart{
    margin-top: 10px;
    margin-bottom: 10px;
}

.catalog-product-view .product-info-main .product-add-form h2{
    text-align: left;
    padding-bottom: 0;
}

.catalog-product-view .product-info-main .product-add-form h2 strong{
    font-family: var(--btnText);
}

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

    .catalog-product-view .product-info-main .product-add-form h2{
        font-size: 18px;
    }

    .catalog-product-view .box-tocart .action.tocart {
        background: var(--joah-light-purple);
        padding: 0 50px;
        font-size: 18px;
        padding: 0 5em;
        height: 2.3em;
    }

    .catalog-product-view .field.qty .control,
    .catalog-product-view .fieldset .control .input-text.qty{
        font-size: 21px;
        height: 2em;
    }

    .catalog-product-view .fieldset .control .input-text.qty{
        width: 2em;
        font-size: 21px;
    }

    .catalog-product-view .fieldset .control #minusQty{
        font-size: 21px;
        width: 2em;
    }

    .catalog-product-view .fieldset .control #addQty{
        font-size: 21px;
        width: 2em;
    }

    .catalog-product-view .box-tocart::before{
        left: 500px
    }

}

#product-detail-accordian__container{
    padding-left: 15px;
    padding-right: 15px;
}

#product-detail-accordian__container .panel-title button:after{
    background: var(--joah-light-purple);
}

#product-detail-accordian__container .panel{
    border: none;
}

.block.related{
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 30px;
}

.block.related .owl-carousel {
    padding-left: 0;
    padding-right: 0;
}

.block.related #block-related-heading{
    font-size: 27px;
    color: var(--joah-light-blue);
    text-align: center;
    display: block;
}

.block.related #block-related-heading span{
    font-family: var(--scriptText);
    font-size: 1.2em; /*32.4*/
}

@media screen and (min-width: 1200px) {
    .block.related #block-related-heading{
        font-size: 42px;
        text-align: left;
    }
}

.block.related .action.select{
    color: var(--joah-pink);
}

.block.related .action.select:hover{
    color: #222;
    text-decoration: none;
}

.yotpo .yotpo-review .yotpo-header .yotpo-icon-profile,
.catalog-product-view .yotpo .yotpo-default-button{
    background: var(--joah-pink)!important;
}

.catalog-product-view  .yotpo-display-wrapper  .yotpo-small-box,
.catalog-product-view  .yotpo-display-wrapper  .yotpo-star-distribution{
    display: none;
}

/* = Products = Description ======== */
/* ================================= */

/* ============================================= */
/* = Products = Related Products Slider ======== */

.product-items.owl-carousel .action.primary{
    color: var(--joah-purple);
    font-family: var(--btnText);
    border-radius: 0;
    display: block;
    border: solid 2px var(--joah-purple);
    background-color: transparent;
    width: 100%;
    margin: 0;
    font-size: 12px;
    left: 0;
    padding: 7px 15px 6px 15px;
    position: absolute;
}

.product-items.owl-carousel .action.primary:hover{
    background: var(--joah-purple);
    border: 2px solid var(--joah-purple);
    color: #fff;
}

@media screen and (min-width: 768px) {
    .product-items.owl-carousel .action.primary{
        font-size: 15px;
    }
    .products-grid.products-related .product-items.owl-carousel .product-item-name{
        font-size: 18px;
    }
}

/* = Products = Related Products Slider ======== */
/* ============================================= */

/* ================================= */
/* = How To Blog =================== */

.mpblog-post-index .mp-blog-rss, .mpblog-post-index .mp-post-info,
.trending-now, .mpblog-post-index .sidebar{
    display: none;
}

@media screen and (min-width: 768px) {
    .mpblog-post-index.page-layout-2columns-right .column.main,
    .mpblog-post-index .mp-6, .mpblog-post-index .mp-xs-12{
        width: 100%;
        float: none;
    }
}

.mpblog-post-index .page-main{
    padding-top: 0;
    display: grid;
    grid-template-areas:
    'breadcrumbs'
    'title'
    'messages'
    'content';
    grid-template-columns: auto;
}

.mpblog-post-index  .page-title-wrapper{
    grid-area: title;
}

.mpblog-post-index  .page-title-wrapper h1{
    padding-left: 0;
    padding-bottom: 1em;
    padding-top: 0;
}

.mpblog-post-index .page-title{
    text-transform: uppercase;
    text-align: left;
    color: var(--joah-light-blue);
}

.mpblog-post-index .breadcrumbs{
    width: 100%;
    grid-area: breadcrumbs;
}

.mpblog-post-index .page.messages{
    grid-area: messages;
}

.mpblog-post-index .columns{
    grid-area: content;
}

.mpblog-post-index .col-mp{
    float: none;
    padding: 0;
}

.mpblog-post-index .post-item-wraper{
    padding: 0!important;
    border: 1px solid var(--joah-gold);
}

.mpblog-post-index .post-item-wraper:hover {
    border: 1px solid var(--joah-gold);
    box-shadow: none;
}

.mpblog-post-index .post-image{
    min-height: auto;
}

.mpblog-post-index .post-image img.img-responsive{
    height: auto;
    width: 100%;
    position: static;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    border: none;
    display: block;
}

.mpblog-post-index h2.mp-post-title {
    text-transform: uppercase;
    font-family: var(--btnText);
    font-size: 16px;
}

.mpblog-post-index h2.mp-post-title a{
    color: #222;
}

.mpblog-post-index .post-short-description p{
    font-size: 15px;
    padding-bottom: 2em;
}

.mpblog-post-index .post-short-description p:empty {
    height: 0;
    padding: 0;
    display: none;
}

.mpblog-post-index .post-info-wraper{
    padding-bottom: 20px;
}

.mpblog-post-index a.mp-read-more{
    background: var(--joah-purple);
    border: 2px solid var(--joah-purple);
    color: #fff;
    font-family: var(--btnText);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 12px;
    padding: .5em 4em;
    text-decoration: none;
}

.mpblog-post-index a.mp-read-more:hover{
    background: #fff;
    border: 2px solid var(--joah-purple);
    color: #222;
}

.mpblog-post-index .mp-footer{
    display: none;
}

.mpblog-post-index .columns .column.main{
    padding-bottom: 0;
}

.mpblog-post-index .pager p.toolbar-amount{
    padding: 0;
}

.mpblog-post-index .pager span.toolbar-number{
    display: block;
}

.mpblog-post-index.page-layout-2columns-left .column.main{
    width: 100%;
    float: none;
}

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

    .mpblog-post-index .post-item-wraper{
        display: flex;
        align-items: stretch;
    }

    .mpblog-post-index .post-image{
        flex-basis: 50%;
        width: 50%;
        min-width: 50%;
        display: block;
        height: auto;
        overflow: hidden;
        position: relative;
    }

    .mpblog-post-index .post-image img.img-responsive{
        height: 100%;
        width: auto;
        max-width: none;
        position: absolute;
        right: auto;
        bottom: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        margin: auto;
        border: none;
        display: block;
    }

    .mpblog-post-index .post-info-wraper{
        flex-basis: 50%;
    }

    .mpblog-post-index .post-info-wraper{
        padding: 30px 30px 60px 30px;
        position: relative;
    }

    .mpblog-post-index h2.mp-post-title {
        text-transform: uppercase;
        font-family: var(--btnText);
        font-size: 28px;
    }

    .mpblog-post-index .post-short-description p{
        font-size: 15px;
    }

    .mpblog-post-index a.mp-read-more{
        font-size: 15px;
        display: block;
        position: absolute;
        right: 20px;
        bottom: 20px;
    }

}

@media screen and (min-width: 1100px) {
    .mpblog-post-index .post-image img.img-responsive{
        top: auto;
        left: auto;
        transform: translate(0,0);
        position: static;
        display: block;
        object-fit: cover;
        width: 100%;
        height:100%;
    }
}

/* = How To Blog =================== */
/* ================================= */


/* ================================= */
/* = How To Blog = Post ============ */

.mpblog-post-view .mp-blog-rss, .mpblog-post-view .mp-sidebar.mpcss,
.mpblog-post-view .blog_header, .mpblog-post-view .sidebar-main,
.mpblog-post-view .sidebar-additional{
    display: none;
}

.mpblog-post-view .column.main{
    padding-bottom: 10px;
}

.mpblog-post-view .page-main{
    display: grid;
    grid-template-areas:
    'breadcrumbs'
    'date'
    'title'
    'messages'
    'content';
    grid-template-columns: auto;
}

.mpblog-post-view .page-main{
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

.mpblog-post-view .page-main .page-title-wrapper{
    grid-area: title;
    color: var(--joah-purple);
    padding-bottom: 30px;
    padding-top: 10px;
}

.mpblog-post-view .mp-post-date{
    display: block;
    text-align: center;
    position: relative;
    grid-area: date;
}

.mpblog-post-view .mp-post-date:before {
    content: " . ";
    height: 2px;
    display: block;
    background: var(--joah-purple);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: -1;
}

.mpblog-post-view .mp-post-date .blog-date{
    display: inline-block;
    font-family: var(--scriptText);
    color: var(--joah-light-blue);
    font-size: 24px;
    background: #fff;
    padding: 0 1em;
}

.mpblog-post-view .page-main > .page-title-wrapper .page-title{
    display: block;
}

.mpblog-post-view .page-main .page-title-wrapper h1{
    padding: 0 15px;
    font-size: 24px;
}

@media screen and (min-width: 768px) {
    .mpblog-post-view .page-main .page-title-wrapper h1{
        text-align: center;
        font-size: 36px;
    }
}

.mpblog-post-view .page-main .breadcrumbs{
    padding-left: 15px;
    padding-right: 15px;
    grid-area: breadcrumbs;
    width: 100%;
}

.mpblog-post-view .page-main page.messages{
    grid-area: messages;
}

.mpblog-post-view.page-layout-2columns-left .column.main{
    width: 100%;
    float: none;
    margin: 0 auto;
}

.mpblog-post-view .block-blog-related.topic-list.mpcss{
    width: 100%!important;
}

.mpblog-post-view .post-view-image{
    float: none;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 40px;
}

.mpblog-post-view p{
    padding-bottom: 40px;
}

.mpblog-post-view p:last-child{
    padding-bottom:0;
}

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

    .mpblog-post-view .post-view-image{
        max-width: 800px;
        margin: 0 auto 40px auto;
    }

    .mpblog-post-view.page-layout-2columns-right .column.main{
        width: 79.16666667%;
        float: none;
        margin: 0 auto;
    }

    .mpblog-post-view .related-content-container .post-image{
        min-height: auto;
    }

}

#videoplaceholder{
    display: block;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    height: auto;
}

.mpblog-post-view .post-list-content{
    padding-left: 0;
    padding-right: 0;
}

.mpblog-post-view .post-post_content{
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 0;
}

.mpblog-post-view .block-blog-related.topic-list.mpcss{
    width: 100%!important;
}

.mpblog-post-view .block-blog-related.topic-list.mpcss > h2{
    padding-left: 15px;
    padding-right: 15px;
    color: var(--joah-light-blue);
    text-transform: uppercase;
    font-size: 24px;
}

.mpblog-post-view .mp-post-info{
    display: none;
}

.mpblog-post-view hr{
    display: none;
}

.mpblog-post-view .products-used-container{
    padding-left: 15px;
    padding-right: 15px;
}

.mpblog-post-view .products-used-container h2{
    color: var(--joah-light-blue);
    font-size: 26px;
}

.mpblog-post-view .products-used-container h2 .script{
    font-family: var(--scriptText);
    font-size: 1.5em;
}

.mpblog-post-view .related-content-container .post-list-item{
    margin-bottom: 10px;
}

.mpblog-post-view .related-content-container .post-item-wraper:hover{
    border: none;
    box-shadow: none;
}

.mpblog-post-view .related-content-container .post-item-wraper{
    padding: 0!important;
    border: none;
}

.mpblog-post-view .related-content-container .post-image{
    display: none;
}

.mpblog-post-view .related-content-container .post-info-wraper{
    padding: 0;
    display: block;
}

.mpblog-post-view .related-content-container .mp-post-title{
    padding-bottom: 0;
}

.mpblog-post-view .related-content-container .mp-post-title a{
    padding-bottom: 0;
    color: #fff;
    background: var(--joah-purple);
    display: block;
    font-family: var(--btnText);
    padding: .5em 1em;
    font-size: 15px;
    text-decoration: none;
}

.mpblog-post-view .related-content-container .mp-post-title a:hover{
    text-decoration: none;
}

@media screen and (min-width: 768px) {
    .mpblog-post-view .related-content-container{
        display: flex;
        justify-content: center;
    }

    .mpblog-post-view .related-content-container .post-list-item{
        flex-basis: calc(100%/3);
        width: calc(100%/3);
        padding: 0 10px;
    }

    .mpblog-post-view .related-content-container .post-image{
        display: block;
    }

    .mpblog-post-view .related-content-container .post-image img.img-responsive{
        display: block;
        min-height: auto;
        width: 100%;
        height: auto;
        margin: 0 0 10px 0;
        position: static;
    }

    .mpblog-post-view .related-content-container .mp-post-title{
        text-align: center;
    }

    .mpblog-post-view .related-content-container .mp-post-title a{
        background: none;
        color: var(--joah-purple);
        padding: 0;
        font-size: 16px;
    }
}

/* = How To Blog = Post ============ */
/* ================================= */


/* ================================= */
/* = Reviews Page ============ */

.yotpo .yotpo-pager .yotpo-page-element.yotpo-active {
  background-color: var(--joahgold);
}

/* ================================= */
/* = Reviews Page  ============ */


/* ================================= */
/* = Checkout Page ================= */
.cart-container{
    padding-left: 15px;
    padding-right: 15px;
}

.checkout-cart-index .page-main > .page-title-wrapper .page-title{
    color: var(--joah-red);
    text-transform: uppercase;
}

@media only screen and (min-width: 768px){
  .checkout-cart-index .page-main > .page-title-wrapper .page-title{
      color: var(--joah-red);
      font-size: 36px;
  }
}

.checkout-cart-index #discount-coupon-form .actions-toolbar .action.primary{
    background: var(--joah-pink);
    padding: .44em 2em;
    font-size: 15px;
    border: 2px solid var(--joah-pink);
}

.checkout-cart-index #discount-coupon-form .actions-toolbar .action.primary:hover{
    background: #fff;
    color: #222;
    border: 2px solid var(--joah-purple);
}

.checkout-cart-index .form-cart button.action.update{
    color: #222;
    padding: .44em 2em;
    font-size: 15px;
    font-family: var(--btnText);
    border: 2px solid var(--joah-purple);
}

.checkout-cart-index .form-cart button.action.update:hover{
    background: var(--joah-purple);
    color: #fff;
}

/* = Checkout Page = Shipping Form ============== */

.opc-estimated-wrapper .minicart-wrapper .action.showcart .counter.qty{
    background: var(--joah-gold);
}

.methods-shipping .actions-toolbar .action.primary,
#customer-email-fieldset .action.login.primary,
.checkout-cart-index .form-login .action.primary{
    background: var(--joah-gold);
}

.opc-progress-bar-item._active > span::before,
.opc-progress-bar-item._active::before{
    background: var(--joah-gold);
    border-color: var(--joah-gold);
}

.opc-progress-bar-item._active > span::after{
    border-color: var(--joah-gold);
}

.opc-progress-bar-item > span:after{
    padding-top: 3px;
}

#shipping-method-buttons-container .action.continue{
    background: var(--joah-gold);
}

.shipping-information-title .action-edit{
    top: 0;
}

/* = Checkout Page = Shipping Form Ends ========== */


.opc-wrapper .shipping-address-item.selected-item::after{
    background: var(--joah-gold);
}

.opc-wrapper .shipping-address-item.selected-item{
    border: 2px solid var(--joah-gold);
}

.checkout-cart-index .cart-summary .checkout-methods-items .action.primary.checkout{
    background: var(--joah-purple);
    padding: .44em 2em;
    font-size: 15px;
    border: 2px solid var(--joah-purple);
    display: inline-block;
    width: auto;
    line-height: 1;
}

.checkout-cart-index .cart-summary .checkout-methods-items .action.primary.checkout:hover{
    background: #fff;
    color: #222;
}

.checkout-payment-method .payment-method-content > .actions-toolbar > .primary .action.primary{
    background: var(--joah-purple);
    border: 2px solid var(--joah-purple);
}


#discount-form .action-apply, #reward-points-form .action-apply{
    border-color: var(--joah-purple);
    background: var(--joah-purple);
    color: #fff;
    padding: .44em 2em;
    font-size: 15px;
    box-shadow: none;
}

.cart-discount .block > .title{
    padding-left: 0;
}

.cart-discount .block .content{
    padding-left: 0;
}

.cart-discount .fieldset.coupon{
    display: block;
}

.cart-discount .actions-toolbar{
    width: auto;
    display: block;
}

.cart-discount .fieldset.coupon .field{
    margin-bottom: 20px;
    display: block;
}

.actions-toolbar > .primary{
    text-align: left;
}

/* = Checkout Page Ends ============ */
/* ================================= */


/* ================================= */
/* = Account Pages ================= */

.block-collapsible-nav .item.current strong,
.block-collapsible-nav .item.current a{
    border-color: var(--joah-pink);
}

.form-edit-account .actions-toolbar .action.primary,
.form-address-edit .actions-toolbar .action.primary {
    background: var(--joah-pink);
    border: 2px solid var(--joah-pink);
}

.form-edit-account .actions-toolbar .action.primary:hover,
.form-address-edit .actions-toolbar .action.primary:hover{
    background: #fff;
    border: 2px solid var(--joah-light-purple);
}

/* = Account Pages ================= */
/* ================================= */


/* ================================= */
/* = Login Page  =================== */

.customer-account-login .form-login button.login{
    background-color: transparent;
    border: 2px solid var(--joah-purple);
    text-transform: uppercase;
    color: #222;
    font-family: var(--btnText);
}

.customer-account-login .block-new-customer .actions-toolbar > .primary{
    text-align: left;
}

.customer-account-login .block-new-customer .actions-toolbar > .primary a.action.create.primary{
    background-color: var(--joah-pink);
    text-transform: uppercase;
    font-family: var(--btnText);
    border-radius: 0;
    border: 0;
}

/* = Login Page Ends  ============== */
/* ================================= */


/* = Removed Item Confirmation popup ======== */

.modal-popup.confirm._show   .action-dismiss{
    border: 2px solid var(--joah-purple);
    background: none;
    text-transform: uppercase;
    color: #222;
    border-radius: 0;
    margin-right: 10px;
    box-shadow: none;
}

.modal-popup.confirm._show  .action-accept{
    background-color: var(--joah-gold);
    color: #fff;
    border: 2px solid var(--joah-gold);
    border-radius: 0;
}

/* = Removed Item Confirmation popup ======== */


/* ================================= */
/* = Press Popup =================== */

.press-popup{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.75);
    display: block;
    z-index: -1000;
}

.press-popup *{
    transition: all .5s;
}

.press-popup.shown{
    display: block;
}

.press-popup__inner{
    background: #fff;
    position: relative;
    box-shadow: 0 3px 9px rgba(0,0,0,.75);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: top .5s .25s;
    max-width: 80%;
    text-align: center;
    padding: 20px;
    margin-left: 5px;
    margin-right: 5px;
}

.press-popup .close-popup_btn{
   border-radius: 0;
   background: none;
   color: #FFF;
   font-family: "gotham-light", sans-serif;
   font-size: 17px;
   border: none;
   position: absolute;
   top: -50px;
   right: -50px;
   box-shadow: none;
   width: 50px;
   height: 50px;
}

.press-popup .close-popup_btn .screen-reader-text{
    display: none;
}

.press-popup .close-popup_btn .close-icon:before{
    content: "\e616";
    font-family: 'luma-icons';
    display: block;
    font-style: normal;
    color: #fff;
}

.press-popup  .close-popup_btn .screen-reader-text{
    display: none;
}

.press-popup__inner h1{
    font-size: 30px;
    padding-bottom: 10px;
}

.press-popup__inner h1 .script{
    color: var(--joah-red);
    font-family: var(--scriptText);
}

.page-main .press-popup__inner p{
    font-size: 15px;
}

.popup__read-more-link{
    text-align: center;
    padding-top: 10px;
}
.popup__read-more-link a{
    text-align: center;
    border: 2px solid var(--joah-purple);
    color: var(--joah-purple);
    padding: .5em 3em;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    font-family: var(--btnText);
}

.popup__read-more-link a:hover{
    border: 2px solid var(--joah-purple);
    background-color: #fff;
    color: #222;
}

/* animation for press popup */
.press-popup:not(.shown),
.press-popup:not(.shown) .popup_inner{
    opacity: 0;

}
.press-popup.shown,
.press-popup.shown .popup_inner{
    opacity: 1;
    transition: opacity .5s;
    z-index: 1;
}
.press-popup.shown .popup_inner,
.press-popup:not(.shown) .popup_inner{
    transition-delay: .5s;
}

/* = Press Popup =================== */
/* ================================= */


/* ================================= */
/* = Store Locator Page  =========== */

.cms-cvs-store-locator .page-main{
    padding-top: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.cms-cvs-store-locator #bh-sl-user-location,
.cms-cvs-store-locator .bh-sl-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 20px;
    padding-right: 20px;
}

h1.bh-sl-title{
    background-color: var(--joah-light-purple);
    color: #fff;
    font-family: var(--scriptText);
    text-align: center;
    margin-bottom: .5em;
    font-size: 10vw;
    padding: 1em;
}

#bh-sl-user-location .form-input label{
    flex-basis: 100%;
    font-family: var(--btnText);
    color: var(--joah-pink);
    font-size: 18px;
}

.bh-sl-container .bh-sl-loc-list .list-details .list-content{
    line-height: 1.5;
}

#bh-sl-user-location #bh-sl-submit{
    font-family: var(--btnText);
}

#bh-sl-user-location .form-input{
    display: flex;
    max-width: 700px;
    margin: 0 auto;
    flex-wrap: wrap;
}

#bh-sl-user-location .form-input label{
    flex-basis: 100%;
}

#bh-sl-user-location #bh-sl-address{
    flex-basis: 100%;
    height: auto;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid var(--joah-gold);
}

#bh-sl-user-location #bh-sl-address:placeholder{
    font-family: var(--baseText);
}

#bh-sl-user-location #bh-sl-submit{
    flex-basis: 100%;
}

@media only screen and (min-width: 768px){
    h1.bh-sl-title{
        /* font-size: 5vw; */
        font-size: 80px;
        padding: .4em;
    }

    #bh-sl-user-location #bh-sl-address{
        flex-basis: 60%;
        margin-right: 6%;
        margin-bottom: 0;
        height: auto;
    }

    #bh-sl-user-location #bh-sl-submit{
        flex-basis: 34%;
    }

}

.bh-sl-container .bh-sl-loc-list .list-label{
    background-color: var(--joah-gold);
    width: 20px;
    height: 20px;
    text-align: center;
    margin-top: 10px;
    padding-top: 3px;
}

#bh-sl-submit{
    text-transform: uppercase;
    background-color: var(--joah-light-purple);
    border-color: var(--joah-light-purple);
    font-family: var(--btnText);
    border-radius: 0;
    color: #fff;
    box-shadow: none;
}


@media only screen and (min-width: 768px){
    .bh-sl-container{
       display: flex;
    }
    .leftform{
        width: 30%;
    }
}

.bh-sl-loc-list .list {
    padding-top: 20px;
    padding-left: 0;
}

.bh-sl-loc-list .list li{
    background-color: transparent!important;
    padding-bottom: 20px;
}

.loc-directions{
    padding-top: 20px;
}

.loc-name{ color: var(--joah-pink);  }

.loc-directions a{
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    color: #222;
    display: block;
    font-size: 12px;
    padding: .5em 1em;
    text-align: center;
    font-family: var(--btnText);
    border: 2px solid var(--joah-purple);
}

.loc-directions a:hover{
    background-color: var(--joah-purple);
    color: #fff;
}

/* = Store Locator Page Ends ======= */
/* ================================= */


/* ================================= */
/* = Owl Sliders =================== */

.owl-carousel .owl-nav button.owl-prev:before,
.owl-carousel .owl-nav button.owl-next:before{
    color: var(--joah-gold);
}

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

    .owl-carousel{
        position: relative;
        padding-left: 60px;
        padding-right: 60px;
    }

    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel .owl-nav button.owl-next{
        margin-top: -60px;
    }

    .owl-carousel .owl-nav button.owl-prev::before,
    .owl-carousel .owl-nav button.owl-next::before{
        font-size: 40px;
    }

}

.product-items.owl-carousel .products{
    padding-left: 0;
    padding-right: 0;
}

.product-items.owl-carousel .owl-nav{
    display: none;
}


/* = Owl Sliders =================== */
/* ================================= */


/* ====================================== */
/* = Messages ========================= */

.message.success{
    background: var(--joah-pink);
}

.message.notice{
    background: var(--joah-light-purple);
}

.message.success > :first-child::before{
    margin-top: -15px;

}

/* = Messages ========================= */
/* ====================================== */


/* ====================================== */
/* = Product Grid - Product Details ===== */

/* yotpo stars */
.yotpo .pull-left{ float: none!important; }
.product-item-details .yotpo-stars,
.yotpo-yotpo-is-enabled .product-item-details .yotpo-stars{
  display: block;
  margin-top: 5px!important;
  margin-bottom: 5px!important;
}

.yotpo div{ line-height: 1; }
.yotpo-yotpo-is-enabled .yotpo-stars{ margin-left: auto!important; }
.yotpo.bottomLine.yotpo-small, .yotpo-yotpo-is-enabled div.yotpo.bottomLine{
    padding-left: 0;
    margin-right: auto;
    margin-left: auto!important;
    width: 62px;
    white-space: nowrap;
    display: block; float: none;
    font-size: 12px;
}

.yotpo-default-button.write-review-button.write-first-review-button{
    background: var(--joah-pink)!important;
}

.yotpo.bottomLine .yotpo-bottomline .yotpo-icon-half-star,
.yotpo.bottomLine .yotpo-bottomline .yotpo-icon-empty-star,
.yotpo.bottomLine .yotpo-bottomline .yotpo-icon-star,
.catalog-product-view .yotpo .yotpo-first-review .yotpo-first-review-stars .yotpo-icon-star,
.yotpo .yotpo-first-review.yotpo-first-review-stars.yotpo-icon-star{
    color: #fec600!important;
    font-size: 12px!important;
}

.yotpo .yotpo-default-button, .yotpo input[type="button"].yotpo-default-button{
   background-color: var(--joah-pink)!important;
}

.text-m.write-review-btn-hidden{
    display: none!important;
}

.catalog-product-view .yotpo-default-button {
    min-width: 220px!important;
    width: 220px!important;
}

@media only screen and (min-width: 768px){
    .yotpo.bottomLine.yotpo-small, .yotpo-yotpo-is-enabled div.yotpo.bottomLine,
    .yotpo-yotpo-is-enabled .yotpo-stars{
        margin-left: auto!important;
        margin-right: auto!important;
    }

    .catalog-product-view .product-info-main .yotpo.bottomLine.bottomline-position.yotpo-small,
    .yotpo.bottomLine.yotpo-small, .yotpo-yotpo-is-enabled div.yotpo.bottomLine{
        margin-right: auto!important;
        margin-left: auto!important;
        width: 62px!important;
    }

    #maincontent .yotpo .yotpo-default-button,
    #maincontent .yotpo input[type="button"].yotpo-default-button{
         background-color: var(--joah-pink)!important;
    }

    .yotpo.bottomLine.yotpo-small, .yotpo-yotpo-is-enabled div.yotpo.bottomLine{
        margin-right: auto!important;
        width: 62px;
    }

    .catalog-product-view .product-info-main .yotpo.bottomLine.bottomline-position.yotpo-small{
       margin-left: 0!important;
    }
}

.product-item-details  div.yotpo.bottomLine.bottomline-position{
  margin-right: auto !important;
}
/* yotpo stars end */

/* price, name and layout */
.product-item-details .product-item-name,
.products-grid .product-item-actions {
    margin: 0;
}

.product-item-details .actions-secondary{
    display: none;
}

.product-item-details{
    padding-top: 10px;
}

.block.related .product-item-details{
    padding-bottom: 35px;
}
@media only screen and (min-width: 640px){
    .block.related .product-item-details{
        padding-bottom: 25px;
    }
}

.product-item-details .product-item-name br{
    display: none;
}

.product-item-details .product-image-container{
    display: block;
}

.product-item-details p{
    line-height: 1;
}

.product-item-details .product-item-name a{
    text-decoration: none;
}

.product-item-details .product-item-name01{
    font-size: 12px;
    font-family: "gotham-medium";
    color: #222;
    display: block;
    padding:0 0 .2em 0;
}

.product-item-details .product-item-name01{
    display: block;
}

.product-item-details .product-item-name02,
.product-item-details .product-item-name03{
    font-size: 10px;
    text-transform: none;
    font-family: "gotham-medium";
    color: var(--joah-pink);
    padding:0 0 .2em 0;
    display: inline-block;
}

@media only screen and (min-width: 768px){
    .product-item-name{
        padding-top: 20px;
    }

    .product-item-details .product-item-name01{
        font-size: 18px;
    }

    .product-item-details .product-item-name02,
    .product-item-details .product-item-name03{
        font-size: 15px;
    }
}


/* = Product Grid - Product Details ===== */
/* ====================================== */