.image-wrap img:not([role=presentation]) {
  opacity: 1 !important;
}

/* Product Savings Banner */
.product-savings-banner {
  background: linear-gradient(90deg, #00D084 0%, #00B972 100%);
  padding: 10px 0;
  text-align: center;
}

.product-savings-banner__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.product-savings-banner__icon {
  width: 18px;
  height: 18px;
  color: white;
  flex-shrink: 0;
}

.product-savings-banner__text {
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

@media only screen and (max-width: 768px) {
  .product-savings-banner {
    padding: 8px 0;
  }
  
  .product-savings-banner__text {
    font-size: 12px;
  }
  
  .product-savings-banner__icon {
    width: 16px;
    height: 16px;
  }
}

body, button, input, select, textarea, div, p, a, span, label, strong, .h1, .h2, .h3, h1, h2, h3, .btn{
  font-family: 'Neue Haas Grotesk Display Pro Roman', sans-serif !important;
}
.headline-1, .headline-2, .headline-3, .h1, .h2, .h3, h1, h2, h3{
  letter-spacing: -.025em;
}
.page-width{
  max-width: 100%;
}
.font-600{
  font-weight: inherit;
}
.header-layout--right .header-item--navigation{
  justify-content: end;
}
.icon-cart{
  width: auto !important;
  height: auto !important;
}
.site-nav__link{
  padding: 7.5px 28px;
  letter-spacing: 1px;
}
.icon-cart path{
  stroke-width: 1px;
}
.cart-property:last-of-type {
    margin-bottom: 10px;
}
.header-layout{
}
.hero__subtitle-wrap .animation-cropper{
  display: flex;
  justify-content: space-between;
}
.hero__subtitle-wrap{
  margin-top: 18px;
  text-transform: uppercase;
}
.index-hero-section .hero__title{
  line-height: 1;  
}
.index-hero-section .hero__title p{
  line-height: 0.8;
  font-weight: inherit;
}
.index-hero-section .hero__subtitle .subheading{
  font-size: 24px;
  letter-spacing: .25em;
}
.d-flex{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.align-items_center{
  align-items: center;
}
.headline-4{
  font-size: 24px;
}
.btn{
  font-weight: inherit;
  font-size: 16px;
  line-height: 1.2;
  border-radius: 35px;
  min-width: 307px;
  letter-spacing: 0;
}
.product-checkout {
  background: #00b45d;
}
.index-custom-content-section .custom__item{
  margin-bottom: 0px;
}
.custom-headline-1{
  font-family: Morganite, sans-serif !important;
  line-height: 80%;
  letter-spacing: 10px;
  font-size: 150px !important;
}
@media screen and (max-width: 768px) {
  .custom-headline-1{
    font-size: 78px !important;
    letter-spacing: 5px;
  }
}
.index-custom-content-section .page-width{
  max-width: 1830px;
}
.text-vertical-top{
  align-items: flex-start;
}
.text-vertical-middle{
  align-items: center;
}
.text-vertical-bottom{
  align-items: flex-end;
}
.index-journey-section .h1{
  font-family: Morganite,sans-serif!important;
  line-height: 80%;
  letter-spacing: .02em;  
  margin-bottom: 40px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.index-journey-section .feature-row__item--overlap-images{
  display: none;
}
.index-journey-section .btn{
  margin-top: 20px;
  padding: 12px 40px;
  font-size: 22px;
  letter-spacing: 0;
  border-radius: 35px;
  font-weight: inherit;
}
.index-journey-section .rte{
  font-size: 24px;
  max-width: 480px;
  margin: auto;
}
.index-book-genesis-section .btn{
  font-size: 32px;
  letter-spacing: 0;
  font-weight: 500;
  border-radius: 40px;
  padding: 8px 40px 10px 40px;
}
.footer__item--newsletter .footer__item--newsletter__text{
  font-family: 'Celeste';
  font-weight: inherit;
  line-height: 120%;
}
.h-100{
  height: 100%;
}
.footer__newsletter{
  max-width: 100%;
}
.newsletter-validate-wrap{
  margin-top: 15px;
  display: flex;
  align-items: center;
}
.newsletter-validate-wrap a{
  text-decoration: underline;
}
.newsletter-btn-wrap{
  margin-top: 70px;
}
.newsletter-btn-wrap .btn{
  background: var(--colorFooterText);
  color: var(--colorFooter);
  font-size: 12px;
  max-width: 180px;
  min-width: auto;
  padding: 8px 15px;
}
.footer__newsletter-btn{
  position: relative;
  transform: none;
}
.newsletter-validate-wrap span{
  font-size: 12px;
}
.footer__item--newsletter__text p{
  font-family: Celeste !important;
}
.index-book-genesis-section .custom-headline-1{
  font-family: Morganite Bold !important;
}
.footer__newsletter-btn .btn:hover{
  background: var(--colorFooterText) !important;
}
.footer-bottom-menu{
  padding-top: 10px;
  border-top: 1px solid #fff;
  margin-top: 30px;
}
.footer-bottom-menu li{
  display: inline-block;
  margin-right: 30px;
}
.footer-bottom-menu li a{
  font-size: 18px;
  text-transform: uppercase;
}
.template-cart .header-layout--left .header-item--navigation{
  justify-content: end;
}
.index-custom-content-section .custom-headline-1{
  text-align: center;
}
@media only screen and (min-width: 769px){
  .page-full, .page-width{
    padding: 0 30px;
  }  
  .desktop-d-flex{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
  .header-item--icons .site-nav__link--icon{
    padding-right: 12px;
  }
  .desktop-w-60{
    max-width: 60%;
  }
  .site-header{
    padding: 15px 0;
  }
  .index-journey-section .feature-row{
    align-items: flex-start;
  }
  .index-journey-section .feature-row__text{
    flex: 0 1 100%;
  }
/*   .index-journey-section .feature-row__item--overlap-images{
    flex: 0 0 30%;
    display: block;
    position: relative;
  }
  .index-journey-section .feature-row__item--overlap-images>:first-child{
    transform: none;
    position: relative;
    z-index: 1;
  }
  .index-journey-section .feature-row__item--overlap-images>:last-child{
    position: relative;
    z-index: 2;
    left: -200px;
    margin-top: -135px;
  }
  .index-journey-section .feature-row__item--overlap-images>*{
    width: 100%;
    max-width: 360px;
  } */
  .promo-grid--space-top{
    padding-top: 100px;
  }
  .index-book-genesis-section .custom-headline-1{
    margin-bottom: 50px;
  }
  .footer__title{    
    letter-spacing: 0;
    margin-bottom: 30px;
  }
  .site-footer__linklist a{
    font-size: 24px;
    padding: 12px 0;
  }
  .mb-large{
    margin-bottom: 70px;
  }
  .site-footer-container{
    justify-content: space-between;
  }
  .site-footer input{
    max-width: 580px;
  }
  .footer__item--newsletter .footer__collapsible{
    flex-direction: column;
    display: flex;
    justify-content: space-between;
  }
  .site-footer{
    padding-top: 90px;
    padding-bottom: 60px;
  }
  .newsletter-bottom-text{
    font-size: 32px;
    line-height: 38px;
    text-transform: uppercase;
  }
  .template-cart .page-content{
    padding-top: 75px;
  }  
  .site-header__logo a{
    padding-top: 0!important;
  }
  .site-header__logo img{
    position: relative;
    left: 0;
    transform: none;
    width: 100%;
    top: 0;
  }
}

.free-shipping {
    font-weight: 600;
    letter-spacing: 0px;
    text-transform: uppercase;
    background: #00b45d;
    color: #fff;
    border: 1px solid #00b45d;
    padding: .5rem;
    text-align: center;
    border-radius: .4rem;
    margin-bottom: 25px !important;
    max-width: 307px;
    font-size: 14px;
}
.discount-info {
    font-weight: 600;
    letter-spacing: 0px;
    text-transform: uppercase;
    background: #00b45d;
    color: #fff;
    border: 1px solid #00b45d;
    padding: .5rem;
    text-align: center;
    border-radius: .4rem;
    margin-bottom: 25px !important;
    max-width: 307px;
    font-size: 14px;
}

@media only screen and (min-width: 1400px){
  .index-hero-section .hero__title{
    font-size: 193px !important;    
  }
  .hero__subtitle-wrap{
    padding: 0 8px;    
  }  
  .custom-headline-1{
    font-size: 240px !important;    
  }
  .index-journey-section .h1{
    font-size: 240px !important;
  }
  .index-book-genesis-section .custom-headline-1{
    font-size: 20em !important;
  }  
  .footer__item--newsletter .footer__item--newsletter__text{
    font-size: 64px;
  }
  .footer__title{
    font-size: 44px;  
  }  
  .site-footer input{
    font-size: 44px !important;
  }
}
@media only screen and (min-width: 1269px ) and (max-width: 1399px){
  .index-hero-section .hero__title{
    font-size: 10em !important;
  }
  .hero__subtitle-wrap{
    padding: 0 13px;
  } 
  .custom-headline-1{
    font-size: 9em !important;    
  }      
  .footer__item--newsletter .footer__item--newsletter__text{
    font-size: 3em;
  }  
  .footer__title{
    font-size: 36px;  
  }   
  .site-footer input{
    font-size: 44px !important;
  }  
}
@media only screen and (min-width: 1500px ) and (max-width: 1768px){
  .index-journey-section .h1{
    font-size: 10em;
  }  
  .index-book-genesis-section .custom-headline-1{
    font-size: 16em;
  }  
}
@media only screen and (min-width: 1269px ) and (max-width: 1499px){
  .index-journey-section .h1{
    font-size: 8em;
  }  
  .index-book-genesis-section .custom-headline-1{
    font-size: 10em;
  }  
}
@media only screen and (min-width: 1000px ) and (max-width: 1268px){
  .index-hero-section .hero__title{
    font-size: 8em !important;
  }
  .hero__subtitle-wrap{
    padding: 0 10px;
  } 
  .custom-headline-1{
    font-size: 8em !important;    
  }   
  .index-book-genesis-section .custom-headline-1{
    font-size: 8em;
  }  
  .footer__item--newsletter .footer__item--newsletter__text{
    font-size: 2.5em;
  }  
  .index-journey-section .h1{
    font-size: 6em;
  }  
  .footer__title{
    font-size: 32px;  
  }  
  .site-footer__linklist a{
    padding: 5px 0;
  }
  .site-footer input{
    font-size: 30px !important;
  }  
  .index-journey-section .rte{
    max-width: 480px;
  }
  .index-journey-section .btn{
    font-size: 20px;
    padding: 12px 30px;
  }
}
@media only screen and (min-width: 850px ) and (max-width: 999px){
  .index-hero-section .hero__title{
    font-size: 6em !important;
  }
  .hero__subtitle-wrap{
    padding: 0 8px;
  }  
  .index-book-genesis-section .custom-headline-1{
    font-size: 8em;
  }  
  .custom-headline-1{
    font-size: 3em !important;
  }
  .footer__title{
    font-size: 30px;  
  }  
  .footer__item--newsletter .footer__item--newsletter__text{
    font-size: 2em;
  }
  .site-footer input{
    font-size: 28px !important;
  }  
  .index-journey-section .btn{
    font-size: 18px;
    padding: 12px 25px;
  }  
  .index-journey-section .rte{
    max-width: 340px;
    font-size: 20px;
  }  
  .index-journey-section .h1{
    font-size: 5em;
  }
}
@media only screen and (min-width: 769px ) and (max-width: 849px){
  .custom-headline-1{
    font-size: 6em !important;
  }  
  .footer__title{
    font-size: 30px;  
  }  
  .site-footer__linklist a{
    padding: 5px 0;
  } 
  .footer__item--newsletter .footer__item--newsletter__text{
    font-size: 2em;
  }  
  .site-footer input{
    font-size: 26px !important;
  }  
/*   .index-journey-section .feature-row__item--overlap-images>:last-child{
    left: -100px;
    margin-top: -80px;
  }
  .index-journey-section .feature-row__item--overlap-images>*{
    max-width: 180px;
  } */
  .index-journey-section .btn{
    padding: 12px 20px;
    font-size: 16px;
  }
  .index-journey-section .h1{
    font-size: 4.5em;
  }
  .index-journey-section .rte{
    font-size: 22px;
    max-width: 390px;
  }
}
@media only screen and (min-width: 520px ) and (max-width: 849px){
  .index-hero-section .hero__title{
    font-size: 5em !important;
  }
  .hero__subtitle-wrap{
    padding: 0 5px;
  }  
}
@media only screen and (max-width: 519px){
  .index-hero-section .hero__title{
    font-size: 3.5em !important;
    line-height: 1;
  }  
}
.hero-disclaimer {
  font-size: 12px; 
  font-weight: 400; 
  line-height: 14px; 
  letter-spacing: 0px; 
  text-transform: uppercase; 
  margin-top: 5px;
}
@media only screen and (max-width: 768px) {
  .index-hero-section .hero--natural[data-natural] {
    padding-top: 50px;
  }
  .site-nav__link.site-nav__link--underline {
    font-size: 13px !important;
  }
  #shopify-section-header {
    z-index: 30;
    position: sticky;
    top: -1px;
    display: block;
  }
  .site-header__logo{
    margin: 0px;
  }
  .site-header__logo, .site-header__logo a, .site-header__logo img{
    width: 100%;
    height: auto;
  }
  .site-header{
    padding: 10px 0 0;
  }
  .site-header__logo a {
    width: 90px !important;
    padding-top: 0px !important;
  }
  .site-header__logo img{
    position: relative;
    left: 0px;
    transform: none;
  }
  .icon-hamburger{
    width: 34px !important;
  }
  .icon-hamburger path{
    stroke-width: 1px !important;
  }
  .site-nav__link{
    padding: 8px 8px;
  }
  .hero--natural[data-mobile-natural=false]{
    height: 915px !important;
  }
  /* .index-section--hero .hero__text-content.vertical-center{
    vertical-align: top;
    padding-top: 130px;
  } */
  .index-hero-section .hero__title p{
    font-size: 48px;
    line-height: 1;
  }
  .index-hero-section .hero__subtitle{
    font-size: 24px;
    text-transform: uppercase;
  }
  .index-custom-content-section .custom-headline-1{
    font-size: 90px;
    text-align: center;
  }
  .index-custom-content-section{
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .index-journey-section .h1{
    font-size: 100px;
  }
  .index-journey-section .rte{
    font-size: 18px;
    line-height: 22.4px;
  }
  .index-journey-section .btn{
    font-size: 15px;
    padding: 7px 20px;
  }
  .index-featured-image-section{
    padding: 0 20px;
  }
  .index-featured-image-section .promo-grid--space-top{
    padding-top: 70px;
  }
  .index-book-genesis-section{
    padding-top: 0px !important;
  }
  .index-book-genesis-section .custom-headline-1{
    font-size: 200px;
  }
  .index-book-genesis-section .btn{
    font-size: 15px;
    padding: 8px 20px;
    letter-spacing: 1px;
  }
  .site-footer-container{
    display: block;
  }
  .footer__item--newsletter__text p{
    font-size: 27px;
    line-height: 28.8px;
    text-align: left;
  }
  .site-footer{
    padding-top: 60px;
    padding-bottom: 40px;
  }
  .footer__newsletter-input{
    max-width: 100%;
    font-size: 24px !important;
  }
  .newsletter-validate-wrap{
    text-align: left;
  }
  .footer__newsletter{
    margin-top: 50px;
  }
  .newsletter-validate-wrap input[type=checkbox]{
    position: relative;
    top: -6px;
  }
  .newsletter-btn-wrap{
    text-align: left;
    margin-top: 40px;
  }
  .newsletter-bottom-text{
    display: none;
  }
  .footer-menu-block-wrap{
    display: flex;
    justify-content: space-between;
    text-align: left;
    padding-top: 30px;
  }
  .footer-menu-block-inner:last-child{
    flex: 0 1 30%;
  }
  .footer__title{
    max-width: 50%;
    line-height: 1;
    font-size: 24px;
    letter-spacing: 1px;
    text-align: left !important;
  }
  .site-footer .grid__item:after{
    display: none;
  }
  .site-footer__linklist a{
    font-size: 12px;
    text-transform: uppercase;
  }
  .footer__small-text{
    text-align: left;
    padding-top: 15px;
  }
  .footer-follow-us{
    text-align: left;
    padding: 60px 0;
    border-bottom: 1px solid #fff;
  }
  .footer-follow-us span{
    font-size: 24px;
    line-height: 29px;
  }
  .footer-bottom-menu .site-footer__linklist{
    text-align: left;
  }
  .footer-bottom-menu li{
    display: block;
    margin-right: 0;
  }
  .footer-bottom-menu li a{
    font-size: 12px;
  }
  .footer-bottom-menu{
    margin-top: 8px;
    border-top: none;
    border-bottom: 1px solid #fff;
    padding-bottom: 15px;
  }
  .template-cart .page-content{
    padding-top: 40px;
  }  
}
@media only screen and (max-width: 374px){
  .index-book-genesis-section .custom-headline-1{
    font-size: 185px;
  }
}


/*
/////////////////////////////////////////
//NEW LANDING CUSTOM STYLES
/////////////////////////////////////////
*/

/*

font-family: 'Neue Haas Grotesk Display Pro Medium', sans-serif !important;
font-family: 'Neue Haas Grotesk Display Pro Roman', sans-serif !important;  
font-family: 'Morganite', sans-serif !important;
font-family: 'Morganite Medium', sans-serif !important; 
font-family: 'Morganite Bold', sans-serif !important;

*/

/*HEADER*/

.site-header{
  box-shadow: none !important;
}

.header-wrapper--sticky{
  background: none;
}

.is-light .site-nav__link, .is-light .site-nav__link:hover {
    color: #101010;
}

.header-layout{
  border:0;
}

.header-wrapper {
    border-bottom: 1px solid;
}

/*MAIN BANNER*/

.index-hero-section .custom-hero-natural{
  height: inherit !important;
  padding: 0 !important;
}

.index-hero-section .hero{
  background-color: #E6E6E6 !important;
}

.index-hero-section .hero__text-wrap{
  color: #000000 !important;
}

.index-hero-section .slideshow__slide .hero__image-wrapper, 
.index-hero-section [data-aos=hero__animation] .hero__image-wrapper {
    transform: translate(0);
    transition: none;
    opacity: 1;
}

.index-hero-section .hero__text-shadow:before, 
.index-hero-section .hero__image-wrapper:before, 
.index-hero-section .hero__media:before{
 display: none !important; 
}

.index-hero-section .hero--natural[data-natural]{
  position: relative;
  top: inherit;
  left: inherit;
  right: inherit;
  bottom: inherit;
}

.index-hero-section .hero--natural[data-natural] .hero__text-content{
  padding: 0;
  padding-top: 120px;
}

.index-hero-section .hero--natural[data-natural] .hero__text-shadow{
  max-width: 900px;
  padding-top: 60px;
}

.index-hero-section .hero__title{
  font-size: 98px !important;
}

.index-hero-section .hero__title p{
  font-family: 'Neue Haas Grotesk Display Pro Medium', sans-serif !important;
}

.index-hero-section .hero__top-subtitle{
  font-size: 16px !important;
  letter-spacing: .25em !important;
}

.index-hero-section .hero__link .btn{
  border-radius: 5rem !important;
  line-height: 36px !important;
}

.index-hero-section .hero--natural[data-natural] .hero__text-shadow video, 
.index-hero-section .hero--natural[data-natural] .hero__text-shadow img{
  display: block;
  height: auto;
  margin: 10px auto 0;
  max-width: 100%;
}

/*MARQUEE*/

.section-custom-marquee .slb-custom-marquee{
  background-color: #2C2B2B;
  color: #ffffff;
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 96px;
  overflow-x: hidden;
}

.section-custom-marquee .slb-custom-marquee .slb-custom-track{
  left: 0;
  position: absolute;
  top: 0;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 32s linear infinite;
}

.section-custom-marquee .slb-custom-marquee .slb-custom-track .slb-custom-content{
  font-family: 'Neue Haas Grotesk Display Pro Medium', sans-serif !important;
  font-size: 32px;
  font-weight: inherit;
  line-height: 96px;
  text-transform: uppercase;
}

.section-custom-marquee .slb-custom-marquee .slb-custom-track span{
  background-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  height: 16px;
  margin: 0 58px;
  vertical-align: middle;
  width: 16px;
}

@keyframes marquee{
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/*FEATURED PRODUCT*/

.slb-custom-featured-product-section{
  margin: 0 !important;
}

.slb-custom-featured-product-section .page-content--product{
  padding-bottom: 120px;
  padding-top: 120px;
}

.slb-custom-featured-product-section .page-width{
  max-width: 1500px;
}

.slb-custom-featured-product-section .product-single__sticky{
  top: 0;
}

.slb-custom-featured-product-section .product__thumbs--below .product__thumb-item{
  max-width: 120px;
  width: 20%;
}

.slb-custom-featured-product-section .product-single__meta{
  padding-left: 26px !important;
}

.slb-custom-featured-product-section .product-single__meta{
    max-width: 580px !important;
}

.slb-custom-featured-product-section .featured-product-subtitle{
  font-size: 14px;
  margin-bottom: 20px;
}

.slb-custom-featured-product-section .product-single__title{
  font-family: 'Neue Haas Grotesk Display Pro Medium', sans-serif !important;
  font-size: 48px !important;
  font-weight: inherit;
  margin-bottom: 20px;
  max-width: inherit !important;
  width: 100%;
}

.slb-custom-featured-product-section .product-block .rte p{
  line-height: 2.2em;
}

.slb-custom-featured-product-section .product-block .rte p + p{
  margin-top: 36px;
}

.slb-custom-featured-product-section .slb-custom-rpoduct-featured-label-variant{
  margin-bottom: 10px;
}

.slb-custom-featured-product-section .variant-input-wrap label{
  border-radius: 4px;
  font-size: 16px;
  line-height: 40px;
  margin: 0;
  margin-right: 10px;
  padding: 0 15px;
  padding-right: 70px;
}

.slb-custom-featured-product-section .variant-input-wrap input[type=radio]+label{
    box-shadow: 0 0 0 1px #000000;
}

.slb-custom-featured-product-section .variant-input-wrap input[type=radio]+label::before{
  border: solid 1px #000000;
  border-radius: 50%;
  content: '';
  display: inline-block;
  height: 14px;
  margin-right: 8px;
  width: 14px;
}

.slb-custom-featured-product-section .variant-input-wrap input[type=radio]+label::after{
  background-color: #ffffff;
  border-radius: 50%;
  content: '';
  display: none;
  height: 6px;
  left: 19px;
  margin-top: -3px;
  position: absolute;
  top: 50%;
  width: 6px;
}

.slb-custom-featured-product-section .variant-input-wrap label {
    display: flex;
    align-items: center;
}


.slb-custom-featured-product-section .variant-input-wrap input[type=radio]:checked+label{
  background-color: #00B45D;
  box-shadow: 0 0 0 1px #00B45D;
  color: #ffffff;
}

.slb-custom-featured-product-section .variant-input-wrap input[type=radio]:checked+label::before{
  border: solid 1px #ffffff;
}

.slb-custom-featured-product-section .variant-input-wrap input[type=radio]:checked+label::after{
  display: block !important;
}

.slb-custom-featured-product-section .product-block--price{
  margin-bottom: 20px;
  margin-top: 0;
}

.slb-custom-featured-product-section .product__price{
  font-size: 40px !important;
  font-weight: inherit;
  line-height: 1em;
}

.slb-custom-featured-product-section .slb-custom-rpoduct-featured-shipping{
  margin-bottom: 36px;
}
.eu-uk-show {
  display:none;
}
.slb-custom-featured-product-section .product-block--atc, 
.slb-custom-featured-product-section .product-block--atc .product-block{
  margin: 0 !important;
}

.slb-custom-featured-product-section .accordian-product-tab{
  margin-top: 80px;
}

.slb-custom-featured-product-section .tab-content ul{
  margin: 0;
  padding-left: 1.2em;
}

/*FEATURED REVIEWS*/

.custom-section-featured-reviews{
  background-color: #F5F5F5;
}

.custom-section-featured-reviews .page-width{
  max-width: 1500px;
}

.custom-section-featured-reviews .grid{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.custom-section-featured-reviews .grid__item{
  min-width: 0;
}

.custom-section-featured-reviews-slide-title{
  font-family: 'Neue Haas Grotesk Display Pro Medium', sans-serif !important;
  font-size: 56px;
  font-weight: inherit;
  line-height: 1em;
  margin-bottom: 40px;
  max-width: 360px;
}

.custom-section-featured-reviews-slide-container{
  overflow: hidden;
  width: calc(100% + (50vw - 81.5%) + 40px);
}

.custom-section-featured-reviews-slide-item{
  background-color: #101010;
  color: #ffffff;
  cursor: grab;
  max-width: 360px;
  padding: 30px;
  width: 90vw;
}

.custom-section-featured-reviews-slide-item-stars{
  margin-bottom: 16px;
}

/* The stars live inside the aria-hidden span, so the flex row has to be on
   that span. Putting it on the wrapper leaves the block-level SVGs stacking
   vertically inside the span, which renders the rating as a column. */
.custom-section-featured-reviews-slide-item-stars span[aria-hidden]{
  align-items: center;
  display: flex;
  gap: 2px;
  line-height: 0;
}

.custom-section-featured-reviews-slide-item-stars svg{
  display: block;
}

.custom-section-featured-reviews-slide-item-title{
  font-size: 21px;
  line-height: 1em;
  margin-bottom: 20px;
}

.custom-section-featured-reviews-slide-item p{
  font-size: 16px;
  line-height: 1.6em;
  min-height: 8em;
  margin: 0;
}

.custom-section-featured-reviews-slide-item p + p{
  margin-top: 1em;
}

.custom-section-featured-reviews-slide-item-name{
  font-size: 21px;
  line-height: 1em;
  margin: 80px 0 0;
  padding-right: 24px;
  position: relative;
  text-align: right;
}

.custom-section-featured-reviews-slide-item-name img{
  height: auto;
  margin-top: -7px;
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
}

.custom-section-featured-reviews-slide-item + .custom-section-featured-reviews-slide-item{
  margin-left: 20px;
}

.grabbing .custom-section-featured-reviews-slide-item{
  cursor: grabbing;
}

.custom-section-featured-reviews-slide-progress{
  border-radius: 10px;
  background-color: #dfdfdf;
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 40px;
  overflow: hidden;
  background-image: linear-gradient(to right, #000, #000);
  background-repeat: no-repeat;
  background-size: 10% 100%;
  transition: background-size .4s ease-in-out;
}

/*FEATURED TEXT*/

.slb-custom-featured-text-container .featured-text-wrapper .headline-1{
  font-family: 'Neue Haas Grotesk Display Pro Medium', sans-serif !important;
  font-size: 220px;
  margin: 0;
}

.slb-custom-featured-text-container .featured-text-wrapper .headline-1 p{
  font-family: inherit !important;
}

.slb-custom-featured-text-container .featured-text-wrapper .d-flex{
  justify-content: space-between;
  margin-top: 56px;
}

/*ABOUT SECTION*/

#home-about-section .heading{
  font-family: Morganite Bold !important;
  font-size: 160px;
  letter-spacing: -.005em;
  margin: 0;
}

#home-about-section .second_line.heading{
  left: 0;
}

#home-about-section .featured-image-with-text-text__wrap .rte{
  margin: 160px 0 80px;
  max-width: 580px;
}

#home-about-section .featured-image-with-text-text__wrap .rte p{
  font-size: 18px;
  line-height: 2.2em;
}

#home-about-section .btn{
  border-radius: 5rem;
  font-size: 18px;
  line-height: 36px;
  padding: 8px 40px;
}

/*CUSTOM CONTENT*/

.index-custom-content-section .custom-headline-1{
  font-family: Morganite Bold !important;
  font-size: 180px;
  letter-spacing: -.005em;
  max-width: 720px;
  text-align: left;
}

/*CUSTOM IMAGE TEXT*/

.new-text-and-image-section{
  padding-left: 0;
  padding-right: 0;
}

.new-text-and-image-section,
.new-text-and-image-section .feature-row__item{
  min-width: 58%;
  flex: 0 1 58%;
  margin: 0;
}

.new-text-and-image-section .feature-row__text--right, 
.new-text-and-image-section .feature-row__text--left {
  min-width: 42%;
  flex: 0 1 42%;
}

.new-text-and-image-section .feature-row__text--right.text-left .h1{
  margin-left: auto;
  max-width: 340px;
}

.new-text-and-image-section div.h1 p {
    font-size: 40px !important;
    line-height: 1.2em !important;
    font-family: "Neue Haas Grotesk Display Pro Medium", sans-serif !important;
    letter-spacing: .1rem;
}

/*SECTION NEWSLETTER*/

.newsletter-section{
  padding: 140px 0;
}

.newsletter-section .page-width{
  max-width: 1300px;
}

.custom-newsletter-row{
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.custom-newsletter-row__item{
    flex: 0 1 50%;
    padding: 0;
}

.custom-newsletter-row__item + .custom-newsletter-row__item{
  max-width: 640px;
  padding-left: 40px;
}

.custom-newsletter-row .h1{
  font-family: 'Neue Haas Grotesk Display Pro Medium', sans-serif !important;
  font-size: 56px;
  font-weight: inherit;
  line-height: 1em;
  margin-bottom: 40px;
  max-width: 600px;
}

.custom-newsletter-row .rte{
  font-size: 24px;
  line-height: 1.5em;
  margin-bottom: 40px;
  max-width: 420px;
}

.custom-newsletter-row .newsletter__input-group{
  display: block;
  margin: 0 !important;
  max-width: 100%;
}

.custom-newsletter-row .input-group-field{
  border: none;
  border-bottom: solid 1px #ffffff;
  width: 100%;
}

.custom-newsletter-row .btn{
  background: #ffffff;
  border-radius: 5em !important;
  color: #000000;
  margin-top: 40px;
}

.custom-newsletter-row .btn:hover{
  color: #ffffff;
}

.custom-check-input{
  display: inline-block;
  position: relative;
  height: 30px;
  width: 30px;
  margin: 0;
  margin-right: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.custom-check-input input{
  position: absolute;
  opacity: 0;
  cursor: pointer;
  z-index: -1;
}

/* Create a custom checkbox */
.custom-check-input .checkmark{
  border: solid 1px #ffffff;
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: transparent;
}

/* On mouse-over, add a grey background color */
.custom-check-input:hover input ~ .checkmark{
  background-color: #101010;
}

/* When the checkbox is checked, add a blue background */
.custom-check-input input:checked ~ .checkmark{
  background-color: #ffffff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after{
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.custom-check-input input:checked ~ .checkmark:after{
  display: block;
}

/* Style the checkmark/indicator */
.custom-check-input .checkmark:after{
  left: 9px;
  top: 5px;
  width: 6px;
  height: 10px;
  border: solid #000000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*END TEXT*/

.index-book-genesis-section .custom-headline-1{
  font-size: 240px !important;
}

/*LEGAL PAGE*/

.template-page .shopify-section > .page-content{
    max-width: 560px;
    max-width: 65ch;
    margin: 0 auto;
    padding: 75px 20px;
}

/*FOOTER*/

.site-footer{
  padding-top: 90px;
  padding-bottom: 20px;
}

.footer__item--newsletter__text p{
  font-family: 'Neue Haas Grotesk Display Pro Medium', sans-serif !important;
  font-size: 32px;
  letter-spacing: -.03em;
  line-height: 1.2em;
  margin-bottom: 60px;
  max-width: 720px;
  text-transform: uppercase !important;
}

.footer__title{
  font-family: 'Neue Haas Grotesk Display Pro Medium', sans-serif !important;
  font-size: 32px;
  font-weight: inherit;
  letter-spacing: -.03em;
  line-height: 1.2em;
  max-width: 720px;
  text-transform: uppercase !important;
}

.site-footer .errors, .site-footer .form-error {
    color: #ffffff;
    background-color: transparent;
    border: none;
}

.newsletter-btn-wrap{
  margin-top: 32px;
}

.newsletter-btn-wrap .btn{
  max-width: inherit;
}

form+.footer__social:empty{display: none;}

.footer-bottom-container{
  margin-top: 80px;
}

.footer-bottom-menu{
  margin-top: 0;
}

.footer-bottom-menu li a{
  text-transform: inherit !important;
}

/*
/////////////////////////////////////////////
/////////////////////////////////////////////
RESPONSIVE
/////////////////////////////////////////////
/////////////////////////////////////////////
*/

@media screen and (max-width: 1280px){
  /*BIG SCREEN*/
  
  .slb-custom-featured-text-container .featured-text-wrapper .headline-1{
    font-size: 180px;
  }
  
}

/* DESKTOP - Center the navigation */
@media screen and (min-width: 769px) {
  .header-layout--left .header-item--navigation {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    flex: 1 !important;
  }
}

/* MOBILE - FLEX ROW LAYOUT */
@media screen and (max-width: 768px) {
  .site-header .page-width {
    padding: 0 7px !important;
  }
  
  /* Hide desktop nav */
  .header-layout--left .header-item--navigation {
    display: none !important;
  }
  
  /* Show mobile hamburger */
  .header-layout--left .header-item--mobile-nav {
    display: block !important;
  }
  
  /* Hide any other hamburger buttons (theme default) */
  .header-item--icons .js-drawer-open-nav,
  .header-item--icons .icon-hamburger {
    display: none !important;
  }
  
  /* FORCE SINGLE ROW FLEXBOX */
  .header-layout--left {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
  }
  
  /* Hamburger/Menu - LEFT */
  .header-layout--left .header-item--mobile-nav {
    order: 1 !important;
    flex: 0 0 auto !important;
  }
  
  /* Style MENU text */
  .site-nav__link--menu-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 7.5px 0 !important;
  }
  
  .site-nav__link--menu-text .menu-text {
    display: inline-block !important;
  }
  
  /* Logo - CENTER ABSOLUTE */
  .header-layout--left .header-item--logo {
    order: 2 !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
  }
  
  /* Cart - RIGHT */
  .header-layout--left .header-item--icons {
    order: 3 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
  
  /* DRAWER OPENS FROM LEFT */
  #NavDrawer {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important;
  }
  
  #NavDrawer.drawer--is-open {
    transform: translateX(0) !important;
  }
}

.slb-custom-rpoduct-featured-shipping {
    border: 1px solid;
    padding: .5rem;
    text-align: center;
    border-radius: .4rem;
    margin-bottom: 25px !important;
    max-width: 307px;
}
@media only screen and (max-width: 768px) {

  .index-hero-section .hero--natural[data-natural] .hero__text-content {
    padding: 0;
    padding-top: 20px;
  }

  .header-item--logo {
    width: 72px;
  }

  .header-layout--right .header-item--navigation {
    justify-content: center;
  }


  .product-checkout {
    width: 100%;
  }

  .product-block {
    width: 100% !important;
  }

  .header-layout{ }

  .index-hero-section .hero--natural[data-natural] .hero__text-shadow{
    padding-top: 5px;
  }

  .hero__text-content.vertical-center{
    vertical-align: inherit;
  }

  .hero--natural[data-mobile-natural=false]{
    height: auto !important;
  }

  .index-hero-section .animation-cropper{
    display: block;
  }

  .index-hero-section .hero__top-subtitle{
    font-size: 14px !important;
  }

  .index-hero-section .hero__title{
    font-size: 37px !important;
  }

  .index-hero-section .hero__title p{
    font-size: inherit !important;
  }

  .index-hero-section .hero__subtitle{
    font-size: 14px !important;
  }

  .hero__text-content .hero__link{
    margin-top: 10px;
  }

  .section-custom-marquee .slb-custom-marquee .slb-custom-track .slb-custom-content{
    font-size: 18px;
  }

  .section-custom-marquee .slb-custom-marquee{
    height: 60px;
  }

  .section-custom-marquee .slb-custom-marquee .slb-custom-track .slb-custom-content{
    line-height: 60px;
  }

  .section-custom-marquee .slb-custom-marquee .slb-custom-track span{
    height: 12px;
    margin: 0 24px;
    width: 12px;
  }

  .slb-custom-featured-product-section .page-content--product{
    padding-bottom: 80px;
    padding-top: 0;
  }

  .slb-custom-featured-product-section .product__main-photos .flickity-page-dots{
    display: none;
  }

  .slb-custom-featured-product-section .product__thumbs{
    display: block !important;
    margin: 0 0 40px;
  }

  .slb-custom-featured-product-section .product__thumbs--below .product__thumb-item{
    width: 33.3%;
  }

  .slb-custom-featured-product-section .product-single__meta{
    padding-left: 0 !important;
  }

  .slb-custom-featured-product-section .product-single__title{
    font-size: 32px !important;
    margin-bottom: 30px !important;
  }

  .index-featured-product-section .product-block{
    margin-bottom: 30px;
  }

  .slb-custom-featured-product-section .slb-custom-rpoduct-featured-label-variant{
    margin-bottom: 10px !important;
  }

  .slb-custom-featured-product-section .accordian-product-tab{
    margin-top: 50px;
  }

  .accordian-product-tab .tab-lists{
    display: block;
    overflow: auto;
    white-space: nowrap;
  }

  .accordian-product-tab .tab-lists li{
    display: inline-block;
  }

  .custom-section-featured-reviews .grid{
    flex-direction: column;
  }

  .custom-section-featured-reviews-slide-title{
    font-size: 40px;
  }

  .custom-section-featured-reviews-slide-container{
    width: calc(100% + 17px);
  }

  .custom-section-featured-reviews-slide-item{
    width: 85vw;
  }

  .custom-section-featured-reviews .grid__item{
    width: 100% !important;
  }

  .slb-custom-featured-text-container.featured-text-container{
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  
  .slb-custom-featured-text-container .featured-text-wrapper .headline-1{
    font-size: 48px;
  }

  .featured-image-with-text-wrap{
    display: flex !important;
    flex-direction: column !important;
  }

  .featured-image-with-text-wrap .featured-image-with-text-img__wrap{
    order: 1;
  }

  .featured-image-with-text-wrap .mobile-heading-wrap{
    order: 2;
  }

  .featured-image-with-text-wrap .featured-image-with-text-text__wrap{
    order: 3;
  }

  #home-about-section .heading{
    display: inline-block;
    font-size: 100px;
    margin: 0 5px;
  }

  #home-about-section .featured-image-with-text-text__wrap .rte{
    margin: 50px auto;
    max-width: inherit;
  }

  #home-about-section .featured-image-with-text-text__wrap .rte p{
    font-size: 16px;
  }

  .index-custom-content-section .custom-headline-1{
    font-size: 100px;
  }

  .new-text-and-image-section {
    padding-left: 17px;
    padding-right: 17px;
  }

  .new-text-and-image-section div.feature-row-wrapper{
        padding: 0 !important;
  }

  .new-text-and-image-section .feature-row{
    flex-direction: column;
  }

  .new-text-and-image-section .feature-row__text {
      order: 2;
      margin-top: 0;
      padding: 30px 20px 0;
  }

  .new-text-and-image-section .feature-row__text--left, 
  .new-text-and-image-section .feature-row__item {
    min-width: 100% !important;
    flex: 0 1 100% !important;
    margin: 0;
  }

  .new-text-and-image-section div.h1{
    font-size: 24px !important;
  }

  .new-text-and-image-section .feature-row__text--right.text-left .h1{
    margin-left: inherit;
    max-width: inherit;
  }

  .newsletter-section{
    padding: 60px 0;
  }

  .custom-newsletter-row{
    flex-direction: column;
  }

  .custom-newsletter-row__item{
    flex: 0 1 100%;
    width: 100%;
  }

  .custom-newsletter-row__item+.custom-newsletter-row__item{
    max-width: 100%;
    padding: 0;
  }

  .form__submit--large{
    display: inline-block;
  }

  .form__submit--small{
    display: none;
  }

  .custom-newsletter-row .h1{
    font-size: 32px;
  }

  .custom-newsletter-row .rte{
    font-size: 21px;
  }

  .index-featured-image-section{
    padding: 0;
  }

  .index-book-genesis-section{
    padding-bottom: 50px !important;
    padding-top: 50px !important;
  }

  .index-book-genesis-section .custom-headline-1{
    font-size: 90px !important;
  }

  .site-footer{
    padding-top: 40px;
    padding-bottom: 20px;
  }

  .footer__item--newsletter__text p{
    font-size: 24px;
  }

  .footer-bottom-menu li{
    font-size: 16px;
  }

  .footer-bottom-menu li a{
    font-size: inherit;
  }

  .footer__title{
    font-size: 24px;
  }

  .site-footer__linklist a{
    font-size: 16px;
  }

  .footer-menu-block-inner:last-child{
    flex: 0 1 45%;
  }

  .footer-follow-us{
    padding: 20px 0;
  }

  .footer-follow-us span{
    display: none !important;
  }

  .footer-bottom-container{
    margin-top: 40px;
  }

  .footer-bottom-menu{
    border: none;
  }
  
}

@media screen and (max-width: 480px){
  /*PHONE SMALL*/
}

@media screen and (max-width: 767px) and (orientation: portrait){
  /*PHONE PORTRAIT*/
}

@media screen and (max-width: 767px) and (orientation: landscape){
  /*PHONE LANDSCAPE*/
}

@media screen and (min-width: 768px) and (max-width: 1180px){
  /*LAPTOP*/

  .index-hero-section .hero__title{
    font-size: 122px !important;
  }

  .slb-custom-featured-product-section .product-single__meta{
    padding-left: 0 !important;
  }

  .slb-custom-featured-product-section .product-single__title{
    font-size: 32px !important;
  }

  .custom-section-featured-reviews-slide-title{
    font-size: 40px;
  }

  .custom-section-featured-reviews-slide-container{
    width: calc(100% + 30px);
  }
  
  .slb-custom-featured-text-container .featured-text-wrapper .headline-1{
    font-size: 160px;
  }

  #home-about-section .heading{
    font-size: 140px;
  }

  .index-custom-content-section .custom-headline-1{
    font-size: 160px;
  }

  .new-text-and-image-section div.h1{
    font-size: 32px !important;
  }

  .new-text-and-image-section .feature-row__text--right.text-left .h1{
    max-width: 280px;
  }

  .custom-newsletter-row .h1{
    font-size: 40px;
  }

  .index-book-genesis-section .custom-headline-1{
    font-size: 180px !important;
  }
  
}

@media screen and (min-width: 768px) and (max-width: 1023px){
  /*TABLET*/

  .index-hero-section .animation-cropper{
    display: block;
  }

  .index-hero-section .hero__title{
    font-size: 80px !important;
  }

  .slb-custom-featured-product-section .page-content--product{
    padding-bottom: 80px;
    padding-top: 0;
  }

  .slb-custom-featured-product-section .product__main-photos .flickity-page-dots{
    display: none;
  }

  .slb-custom-featured-product-section .product__thumbs{
    display: block !important;
    margin: 0 0 40px;
  }

  .slb-custom-featured-product-section .product-single__meta{
    padding-left: 0 !important;
  }

  .slb-custom-featured-product-section .product-single__title{
    font-size: 32px !important;
  }

  .custom-section-featured-reviews .grid{
    flex-direction: column;
  }

  .custom-section-featured-reviews-slide-title{
    font-size: 40px;
  }

  .custom-section-featured-reviews-slide-container{
    width: calc(100% + 17px);
  }

  .custom-section-featured-reviews .grid__item{
    width: 100% !important;
  }
  
  .slb-custom-featured-text-container .featured-text-wrapper .headline-1{
    font-size: 110px;
  }

  .featured-image-with-text-wrap{
    display: flex !important;
    flex-direction: column !important;
  }

  .featured-image-with-text-wrap .featured-image-with-text-img__wrap{
    order: 1;
  }

  .featured-image-with-text-wrap .mobile-heading-wrap{
    order: 2;
    text-align: center;
  }

  .featured-image-with-text-wrap .featured-image-with-text-text__wrap{
    order: 3;
    padding-top: 40px;
    text-align: center;
  }

  #home-about-section .heading{
    display: inline-block;
    font-size: 100px;
    margin: 0 5px;
    text-align: center;
  }

  #home-about-section .featured-image-with-text-text__wrap .rte{
    margin: 60px auto;
    text-align: center;
  }

  #home-about-section .btn_wrapper{
    text-align: center;
  }

  .index-custom-content-section .custom-headline-1{
    font-size: 120px;
  }

  .new-text-and-image-section {
    padding-left: 17px;
    padding-right: 17px;
  }

  .new-text-and-image-section .feature-row{
    flex-direction: column;
  }

  .new-text-and-image-section .feature-row__text {
      order: 2;
      margin-top: 0;
      padding: 30px 20px 0;
  }

  .new-text-and-image-section .feature-row__text--left, 
  .new-text-and-image-section .feature-row__item {
    min-width: 100% !important;
    flex: 0 1 100% !important;
    margin: 0;
  }

  .new-text-and-image-section div.h1{
    font-size: 32px !important;
  }

  .new-text-and-image-section .feature-row__text--right.text-left .h1{
    margin-left: inherit;
    max-width: inherit;
  }

  .newsletter-section{
    padding: 80px 0;
  }

  .custom-newsletter-row{
    flex-direction: column;
  }

  .custom-newsletter-row__item{
    flex: 0 1 100%;
    width: 100%;
  }

  .custom-newsletter-row__item+.custom-newsletter-row__item{
    max-width: 100%;
    padding: 0;
  }

  .form__submit--large{
    display: inline-block;
  }

  .form__submit--small{
    display: none;
  }

  .custom-newsletter-row .h1{
    font-size: 40px;
  }

  .index-featured-image-section{
    padding: 0;
  }

  .index-book-genesis-section{
    padding-bottom: 60px !important;
    padding-top: 60px !important;
  }

  .index-book-genesis-section .custom-headline-1{
    font-size: 140px !important;
  }

  .footer-bottom-container{
    margin-top: 40px;
  }

  .footer-bottom-menu{
    border: none;
  }
  
}

@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation:landscape){
  /*PHONE BIG LANDSCAPE*/
  .hero__subtitle-wrap .animation-cropper{
    display: flex;
  }
  
  .slb-custom-featured-product-section .page-content--product {
    padding-bottom: 80px;
    padding-top: 80px;
  }
}

/* Section featured product - for product page */

.featured-product-subtitle{
  text-transform: uppercase;
  font-size: 16px;
}
/* .index-featured-product-section .product-single__title{
  font-weight: 600;
} */
.index-featured-product-section .product-single__meta{
  max-width: 700px;
  height: 100%;
}
.index-featured-product-section .product__price{
  font-size: 32px;
}
.index-featured-product-section .mb-10{
  margin-bottom: 10px !important;
}
.index-featured-product-section .product__quantity label{
  display: none;
}
.index-featured-product-section .js-qty__num{
  border: none;
}
.featured-product-links .inner-link{
  margin-right: 30px;
  font-size: 14px;
}
.featured-product-links .inner-link:last-child{
  margin-right: 0px;
}
.index-featured-product-section .grid{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin: 0 0 0 -40px;
}
.index-featured-product-section .grid__item{
  padding-left: 40px;
}
.product-block--atc, .product-block--quantity{
  display: inline-block;
}
.product-block--atc{
  margin-left: 30px;
}
.product-single__meta .rte{
  font-size: 16px;
}
.accordian-product-tab .tab-lists{
  margin: 0 0 15px;
  padding: 0;
  text-align: center;    
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.accordian-product-tab .tab-lists li{
  list-style: none;
  padding: 0 15px;
}
.accordian-product-tab .tab-lists li:first-child{
  padding-left: 0px;
}
.accordian-product-tab .tab-inner{
  padding-bottom: 5px;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0px;
}
.accordian-product-tab li:last-child .tab-inner{
  border-left: none;
}
.tab--active{
  border-bottom: 1px solid #000;
  font-weight: 600;
}    
.tab-inner-text{
  position: relative;
  text-transform: uppercase;
}
.tab-inner-text:after{
  content: "";
  position: absolute;
  left: 0;
  display: inline-block;
  width: 50%;
}
.tab--active .tab-inner-text{
  font-weight: 700;
}
.tab-content{
  display: none;
  font-size: 14px;
  line-height: 1.3;
}
.tab-content--active{
  display: block;
}
.tab-content table{
  border-spacing: 0px;
  max-width: 340px;
}
.tab-content td{
  padding: 0px;
  font-size: 12px;
  line-height: 14px;
}
.featured-product-image{
  width: 100%;
  height: auto;
}
.progress {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 10px;
  overflow: hidden;  
  background-color: #dfdfdf;
  background-image: linear-gradient(to right, black, black);
  background-repeat: no-repeat;
  background-size: 25% 100%;  
  transition: background-size .4s ease-in-out;
}
.grid.vs_feature_outer {
  display: inherit;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.for_desktop_only{
  display:none;
}
.for_mobile_only{
  display:block;
  margin-top:10px;
}
@media only screen and (min-width: 769px){
  .for_desktop_only{
    display:block;
  }
  .for_mobile_only{
    display:none;
  }
  .vs_pro_outer {
    position: relative;
  }
  .progress {
    display: block;
    width: 2px; /* Adjust the width as needed */
    height: 100%; /* Change height to 100% */
    position: absolute;
    right: -30px;
    top: 0;
    overflow: hidden;
    position: absolute;
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, black, black); /* Change to vertical gradient */
    background-repeat: no-repeat;
    background-size: 100% 25%; /* Change background-size to 100% 0 */    
    transition: background-size .4s ease-in-out;
  }  
}
@media only screen and (min-width: 1269px){
  .index-featured-product-section .product-single__meta{
    padding-left: 100px;    
  }
  .index-featured-product-section .product-single__title{
    font-size: 48px;
    max-width: 50%;
  }  
  .index-featured-product-section .mb-50{
    margin-bottom: 50px;
  }  
  .featured-product-links{
    margin-top: 50px;
  }
}

.product-single__meta .rte {
    font-size: 16px;
    margin-top: 30px;
}

.gift-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0;
}

.gift-toggle__text {
  font-size: 16px;
}

/* Toggle Switch Styles */
.switch {
  position: relative;
  display: inline-block;
  width: 46px;  /* Slightly smaller than original */
  height: 26px; /* Slightly smaller than original */
  margin-bottom: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px; /* Slightly smaller than original */
  width: 20px;  /* Slightly smaller than original */
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--color-primary, #00b45d); /* Use theme color if available */
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--color-primary, #00b45d);
}

input:checked + .slider:before {
  transform: translateX(20px); /* Adjusted for smaller size */
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Animation for checkout sections */
.product-checkout,
.continue-gift-card {
  transition: opacity 0.3s ease;
}

.checkout-select {
  display: none;
}

.product-checkout span {
  display: block;
  font-size: 10px;
  padding-top: 2px;
}

.product-checkout .add-to-cart__icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
  flex-shrink: 0;
}

.product-checkout .add-to-cart__text {
  font-size: inherit;
  padding-top: 0;
  display: inline;
  vertical-align: middle;
}

.continue-gift-card {
  display: none;
}


@media only screen and (max-width: 768px) {
  .header-wrapper {
    border-bottom: 1px solid;
    padding-bottom: 10px;
    background: #FFFFFF;
  }
  .checkout-buttons {
    transition: transform 0.3s ease-in-out;
  }

  .sticky-add-to-cart {
    display: flex;
  }
  
  .sticky-add-to-cart.is-visible .checkout-select {
    display: block;
  }

  .progress{
    height: 2px;
    background-size: 15% 100%;
    margin-top: 15px;
  }
  index-featured-product-section{
    padding-top: 30px;
  }
  .index-featured-product-section .product-single__meta{
    text-align: left;
    margin-top: 0;
  }
  .index-featured-product-section .product-single__title{
    font-size: 48px;
    max-width: 290px;
  }
  .index-featured-product-section .product-block{
    margin-bottom: 30px;
  }
  .index-featured-product-section .product-block--header{
    margin-bottom: 25px;
  }
  .index-featured-product-section .product-block--quantity, .index-featured-product-section .product-block--atc{
    margin-bottom: 25px;
  }
  .product-block--quantity .product-block, .product-block--atc .product-block{
    margin-bottom: 20px;
  }  
  .index-featured-product-section .product-block--price{
    margin-bottom: 30px;
    margin-top: 30px;
  }
}

/*
/////////////////////////////////////////////
CART DRAWER IMPROVEMENTS (ODDIT)
/////////////////////////////////////////////
*/

/* Remove default padding from drawer scrollable */
#CartDrawer .drawer__scrollable {
  padding: 0 !important;
  /* Prevent layout shift when scrollbar appears/disappears with 3+ items.
     scrollbar-gutter: stable reserves scrollbar width even when not scrolling,
     so the content area width stays consistent. */
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* Thin, unobtrusive scrollbar for WebKit browsers */
#CartDrawer .drawer__scrollable::-webkit-scrollbar {
  width: 4px;
}
#CartDrawer .drawer__scrollable::-webkit-scrollbar-track {
  background: transparent;
}
#CartDrawer .drawer__scrollable::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}
#CartDrawer .drawer__scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Use overlay scrollbar when supported to avoid width steal entirely */
@supports (overflow-y: overlay) {
  #CartDrawer .drawer__scrollable {
    overflow-y: overlay !important;
    scrollbar-gutter: auto;
  }
}

/* The carousel now sits inside .drawer__scrollable, which is itself a flex
   column, so flex-shrink: 0 still earns its place: it stops the carousel being
   squeezed by the item list and lets the container scroll instead. The footer is
   outside the scrollable and must never shrink, or the checkout button clips. */
#CartDrawer .cart-upsell-carousel {
  flex-shrink: 0;
}

#CartDrawer .drawer__footer {
  flex-shrink: 0;
}

/* Add padding to cart products only */
.cart__products-wrapper {
  padding: 0 20px !important;
}

/* Cart notes wrapper with padding */
.cart__notes-wrapper {
  padding: 0 20px !important;
}

/* Fix z-index layering */
.drawer__fixed-header {
  z-index: 10 !important;
}

.cart-progress {
  position: relative !important;
  z-index: 5 !important;
}

/* Hide progress bar and upsells when cart is empty */
.drawer.is-empty .cart-progress,
.drawer.is-empty .cart-upsell-carousel,
.drawer.is-empty .drawer__footer {
  display: none !important;
}

/* Ensure empty state shows properly */
.drawer.is-empty .drawer__cart-empty {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.drawer.is-empty .drawer__inner {
  display: none !important;
}

/* Empty cart state */
.cart-empty-state {
  text-align: center;
  padding: 40px 30px;
  max-width: 300px;
  margin: 0 auto;
}

.cart-empty-state__icon {
  margin-bottom: 20px;
  color: #ccc;
}

.cart-empty-state__icon svg {
  width: 56px;
  height: 56px;
  stroke-width: 0.8;
}

.cart-empty-state__title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cart-empty-state__text {
  font-size: 14px;
  color: #777;
  line-height: 1.6;
  margin: 0 0 24px;
}

.cart-empty-state__cta {
  display: inline-block;
  padding: 14px 32px;
  background: #1a1a1a;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 60px;
  transition: background 0.2s ease;
}

.cart-empty-state__cta:hover {
  background: #333;
}


/* 1. Cart title with item count */
.drawer__title {
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

/* 2. Progress block: free-shipping meter + volume tier ladder.
   One padded container for both. They were two separately padded bars (71px +
   52px) and with a 9-item cart the item list was left 85px, less than one
   cart-item card, so the shopper's own products rendered sliced. The padding,
   background and border now live here once; the children own only their meter
   and one line of text. */
.cart-progress {
  padding: 12px 20px 10px;
  background: #f8f8f8;
  border-bottom: 1px solid #e8e8e1;
}

/* Gap between the two meters, named explicitly rather than `> * + *`: the tier
   snippet also emits a <script> into this wrapper, and for Australia the
   shipping meter is absent so the ladder is the only child and must not be
   pushed down. */
.cart-progress > .cart-free-shipping-bar + .cart-volume-bar {
  margin-top: 8px;
}

/* The shipping meter keeps its class and its data-shipping-* hooks because
   assets/theme.js queries them by name, but its padding, background and border
   moved to .cart-progress above. It carries only its track and its text now. */
.cart-free-shipping-bar__progress {
  width: 100%;
  height: 8px;
  background: #e8e8e1;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 6px;
}

.cart-free-shipping-bar__fill {
  height: 100%;
  background: #00b45d;
  transition: width 0.3s ease;
  border-radius: 10px;
}

.cart-free-shipping-bar__text {
  font-size: 12px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cart-free-shipping-bar__text strong {
  color: #00b45d;
}

.cart-free-shipping-bar--complete .cart-free-shipping-bar__fill {
  background: #00b45d;
  width: 100% !important;
}

.cart-free-shipping-bar--complete .cart-free-shipping-bar__text {
  color: #00b45d;
}

/* 2b. Volume tier ladder, inside .cart-progress.
   Discrete segments rather than a width fill: the metric is a book COUNT with a
   top tier of 3, so a continuous fill would have four possible widths and would
   read as a duplicate of the shipping meter directly above it. #00a053 is the
   discount green already used by .cart-upsell-carousel__tier-pct.
   No padding, background or border here: .cart-progress owns those. */
.cart-volume-bar__track {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.cart-volume-bar__seg {
  flex: 1 1 0;
  height: 8px;
  background: #e8e8e1;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

.cart-volume-bar__seg.is-reached {
  background: #00a053;
}

.cart-volume-bar__text {
  font-size: 12px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Exactly one message is visible. display:none on the message also removes any
   descendant, so neither Intelligems arm inside an inactive state can leak. */
.cart-volume-bar__msg {
  display: none;
}

.cart-volume-bar__msg.is-active {
  display: block;
}

.cart-volume-bar__msg strong {
  color: #00a053;
}

/* 3. Product titles - 2 lines max */
.cart__item-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.4 !important;
  max-height: 2.8em !important;
}

/* 4. Trash icon next to title */
.cart__item-title {
  position: relative !important;
}

.cart__item-name {
  padding-right: 30px !important;
}

.cart__item-remove {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  padding: 2px !important;
  color: #000000 !important;
  opacity: 0.6 !important;
  transition: opacity 0.2s ease !important;
}

.cart__item-remove:hover {
  opacity: 1 !important;
}

.cart__item-remove svg {
  display: block !important;
}

/* 5. Cart Upsell Carousel */
.cart-upsell-carousel {
  padding: 16px 0 12px;
  background: #f7f7f5;
  border-top: 1px solid #e5e5e0;
  overflow: hidden;
}

.cart-upsell-carousel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 12px;
}

.cart-upsell-carousel__title {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  margin: 0 !important;
  color: #1a1a1a;
}

.cart-upsell-carousel__header-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cart-upsell-carousel__subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.cart-upsell-carousel__tier {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.cart-upsell-carousel__tier-pct {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #00a053;
  background: rgba(0, 160, 83, 0.08);
  padding: 2px 6px;
  border-radius: 2px;
  line-height: 1.3;
}

.cart-upsell-carousel__tier-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c0c0b8;
  flex-shrink: 0;
}

.cart-upsell-carousel__nav {
  display: flex;
  gap: 6px;
}

.cart-upsell-carousel__arrow {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #c8c8c3;
  border-radius: 50%;
  color: #1a1a1a;
  transition: all 0.2s ease;
  padding: 0;
  cursor: pointer;
}

.cart-upsell-carousel__arrow:hover:not(:disabled) {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}

.cart-upsell-carousel__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.cart-upsell-carousel__track {
  display: flex;
  gap: 10px;
  padding: 2px 20px 2px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-padding-inline-start: 20px;
}

.cart-upsell-carousel__track::-webkit-scrollbar {
  display: none;
}

.cart-upsell-carousel__card {
  flex: 0 0 255px;
  width: 255px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  transition: box-shadow 0.2s ease;
  border: 1px solid #e8e8e3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cart-upsell-carousel__card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: #d5d5d0;
}

.cart-upsell-carousel__image {
  display: block;
  flex: 0 0 92px;
  width: 92px;
  height: auto;
  overflow: hidden;
  background: #f0f0ed;
}

.cart-upsell-carousel__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-upsell-carousel__info {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.cart-upsell-carousel__product-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  margin-bottom: 2px;
  text-decoration: none;
  display: block;
  letter-spacing: 0.01em;
}

.cart-upsell-carousel__product-title:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cart-upsell-carousel__price {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #555;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.cart-upsell-carousel__price--has-discount {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.cart-upsell-carousel__price--original {
  text-decoration: line-through;
  color: #999;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.cart-upsell-carousel__price--discounted {
  color: #00a053;
  font-weight: 700 !important;
  font-size: 15px !important;
}

.cart-upsell-carousel__discount-label {
  font-size: 9px;
  color: #388E3C;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  line-height: 1.2;
}

.cart-upsell-carousel__swatches {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}

.cart-upsell-carousel__swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
}

.cart-upsell-carousel__swatch:hover {
  transform: scale(1.15);
  border-color: rgba(0, 0, 0, 0.3);
}

.cart-upsell-carousel__swatch.is-selected {
  outline: 1.5px solid #1a1a1a;
  outline-offset: 2px;
}

.cart-upsell-carousel__select {
  padding: 3px 6px;
  border: 1px solid #d5d5d0;
  border-radius: 4px;
  font-size: 10px;
  width: 100%;
  cursor: pointer;
  margin-bottom: 6px;
  background: #fff;
}

.cart-upsell-carousel__add {
  width: 100%;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: transparent;
  color: #1a1a1a;
  border: 1px solid #1a1a1a;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cart-upsell-carousel__add:hover {
  background: #1a1a1a;
  color: #fff;
}

.cart-upsell-carousel__add:disabled {
  border-color: #ccc;
  color: #ccc;
  background: transparent;
  cursor: default;
}

.cart-upsell-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px 0;
}

.cart-upsell-carousel__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}

.cart-upsell-carousel__dot.is-active {
  background: #1a1a1a;
  width: 16px;
  border-radius: 3px;
}

@media only screen and (min-width: 769px) {
  .cart-upsell-carousel__card {
    flex: 0 0 275px;
    width: 275px;
  }
}

@media screen and (max-width: 370px) {
  .cart-upsell-carousel__card {
    flex: 0 0 200px;
    width: 200px;
  }
  .cart-upsell-carousel__image {
    flex: 0 0 64px;
    width: 64px;
  }
}

/* Upgrade card styles */
.cart-upsell-carousel__card--upgrade {
  border-color: #1a1a1a;
}

.cart-upsell-carousel__image {
  position: relative;
}

.cart-upsell-carousel__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #1a1a1a;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 2px;
  line-height: 1.4;
  text-transform: uppercase;
}

.cart-upsell-carousel__add--upgrade {
  background: #1a1a1a !important;
  color: #fff !important;
  border-color: #1a1a1a !important;
}

.cart-upsell-carousel__add--upgrade:hover {
  background: #333 !important;
  border-color: #333 !important;
}

.cart-upsell-carousel__add.is-loading {
  background: #1a1a1a !important;
  color: #fff !important;
  border-color: #1a1a1a !important;
  pointer-events: none;
}

.cart-upsell-carousel__add.is-success {
  background: #00b45d !important;
  color: #fff !important;
  border-color: #00b45d !important;
  pointer-events: none;
}

.cart-upsell-carousel__add.is-error {
  background: #dc2626 !important;
  color: #fff !important;
  border-color: #dc2626 !important;
}

@keyframes upgrade-spin {
  to { transform: rotate(360deg); }
}

.upgrade-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: upgrade-spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

/* ============================================
   COMPACT MOBILE UPSELL CAROUSEL
   Standard mobile: max-width 749px
   ============================================ */
@media screen and (max-width: 749px) {
  .cart-progress {
    padding: 10px 20px 8px;
  }
  .cart-volume-bar__text,
  .cart-free-shipping-bar__text {
    font-size: 11px;
  }
  .cart-upsell-carousel {
    padding: 10px 0 8px;
  }
  .cart-upsell-carousel__header {
    padding: 0 16px;
    margin-bottom: 8px;
  }
  .cart-upsell-carousel__header-text {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .cart-upsell-carousel__title {
    font-size: 11px !important;
    letter-spacing: 1px !important;
  }
  .cart-upsell-carousel__subtitle {
    gap: 6px;
  }
  .cart-upsell-carousel__tier {
    font-size: 9px;
    gap: 3px;
  }
  .cart-upsell-carousel__tier-pct {
    font-size: 8px;
    padding: 1px 4px;
  }
  .cart-upsell-carousel__tier-sep {
    width: 2px;
    height: 2px;
  }
  .cart-upsell-carousel__arrow {
    width: 24px;
    height: 24px;
  }
  .cart-upsell-carousel__arrow svg {
    width: 12px;
    height: 12px;
  }
  .cart-upsell-carousel__track {
    gap: 8px;
    padding: 1px 16px;
    scroll-padding-inline-start: 16px;
  }
  .cart-upsell-carousel__card {
    flex: 0 0 220px;
    width: 220px;
    border-radius: 5px;
  }
  .cart-upsell-carousel__image {
    flex: 0 0 72px;
    width: 72px;
  }
  .cart-upsell-carousel__info {
    padding: 6px 10px;
  }
  .cart-upsell-carousel__product-title {
    font-size: 12px !important;
    line-height: 1.3;
    margin-bottom: 1px;
  }
  .cart-upsell-carousel__price {
    font-size: 10px !important;
    margin-bottom: 3px;
  }
  .cart-upsell-carousel__price--has-discount {
    margin-bottom: 2px;
  }
  .cart-upsell-carousel__price--original {
    font-size: 10px !important;
  }
  .cart-upsell-carousel__price--discounted {
    font-size: 12px !important;
  }
  .cart-upsell-carousel__add {
    padding: 0;
    min-height: 44px;
    font-size: 10px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cart-upsell-carousel__dots {
    padding: 6px 16px 0;
    gap: 5px;
  }
  .cart-upsell-carousel__dot {
    width: 4px;
    height: 4px;
  }
  .cart-upsell-carousel__dot.is-active {
    width: 12px;
  }
  .cart-upsell-carousel__badge {
    top: 4px;
    left: 4px;
    font-size: 7px;
    padding: 1px 4px;
  }
}

/* ============================================
   EXTRA COMPACT FOR SHORT VIEWPORTS
   max-width 749px AND max-height 700px
   ============================================ */
@media screen and (max-width: 749px) and (max-height: 700px) {
  .cart-progress {
    padding: 8px 20px 6px;
  }
  .cart-progress > .cart-free-shipping-bar + .cart-volume-bar {
    margin-top: 6px;
  }
  .cart-volume-bar__seg,
  .cart-free-shipping-bar__progress {
    height: 6px;
  }
  .cart-volume-bar__track,
  .cart-free-shipping-bar__progress {
    margin-bottom: 4px;
  }
  .cart-volume-bar__text,
  .cart-free-shipping-bar__text {
    font-size: 10px;
    letter-spacing: 0.3px;
  }
  .cart-upsell-carousel {
    padding: 6px 0 4px;
  }
  .cart-upsell-carousel__header {
    margin-bottom: 5px;
  }
  .cart-upsell-carousel__title {
    font-size: 10px !important;
    letter-spacing: 0.8px !important;
  }
  .cart-upsell-carousel__subtitle {
    display: none;
  }
  .cart-upsell-carousel__arrow {
    width: 22px;
    height: 22px;
  }
  .cart-upsell-carousel__track {
    padding: 1px 16px 0;
  }
  .cart-upsell-carousel__card {
    flex: 0 0 200px;
    width: 200px;
    border-radius: 4px;
  }
  .cart-upsell-carousel__image {
    flex: 0 0 64px;
    width: 64px;
  }
  .cart-upsell-carousel__info {
    padding: 4px 8px;
  }
  .cart-upsell-carousel__product-title {
    font-size: 11px !important;
    line-height: 1.2;
    margin-bottom: 0;
  }
  .cart-upsell-carousel__price {
    font-size: 10px !important;
    margin-bottom: 2px;
  }
  .cart-upsell-carousel__price--discounted {
    font-size: 11px !important;
  }
  .cart-upsell-carousel__add {
    min-height: 44px;
    font-size: 10px;
    letter-spacing: 0.8px;
  }
  .cart-upsell-carousel__dots {
    display: none;
  }
}

/* 6. Shipping message with positive framing */
/* 6. Shipping message with positive framing.
   Compact: this row restates what the progress block at the top of the drawer
   already shows, so it keeps the information but not the 82px it used to cost
   (15px padding + 15px margins + two borders). */
.cart__shipping-message {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 0 !important;
  border-top: 1px solid #e8e8e1 !important;
  border-bottom: 1px solid #e8e8e1 !important;
  margin: 8px 0 !important;
}

.cart__shipping-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.cart__shipping-value {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #00b45d !important;
}

/* 7. Checkout button with lock icon */
.cart__checkout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 16px 24px !important;
  min-height: 52px !important;
}

.cart__checkout .icon-lock {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/*
/////////////////////////////////////////////
PRODUCT PAGE IMPROVEMENTS (ODDIT)
/////////////////////////////////////////////
*/

/* 1. Green Savings Banner Above Images - FULL WIDTH */
.product-savings-banner {
  background: #00b45d;
  color: #ffffff;
  text-align: center;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.product-savings-banner svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 2. Product Tags Overlay on Image */
.product__main-photos {
  position: relative;
}

.product-tags-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-tag {
  background: rgba(255, 255, 255, 0.95);
  color: #000000;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
  max-width: max-content;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.product-tag--limited {
  background: #000000;
  color: #ffffff;
}

.product-tag--translation {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e8e8e1;
}

/* 3a. Zoom Cursor on Product Images */
[data-product-images] .product-main-slide .photoswipe__image {
  cursor: zoom-in;
}

/* 3. Zoom Icon Indicator */
.product-zoom-indicator {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.9);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.product__main-photos:hover .product-zoom-indicator {
  opacity: 1;
}

.product-zoom-indicator svg {
  width: 20px;
  height: 20px;
  color: #000000;
}

/* 4. Thumbnails - Mobile: Horizontal Below, Desktop: Vertical Beside */
/* Mobile - Horizontal thumbnails below main image */
@media only screen and (max-width: 768px) {
  .product__thumbs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
  }

  .product__thumbs--below,
  .product__thumbs--beside {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .product__thumb-item {
    flex: 0 0 auto !important;
    width: 80px !important;
    max-width: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .product__thumbs-scroller {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    overflow: visible !important;
  }
}

/* Desktop - Vertical thumbnails beside (left of) main image */
@media only screen and (min-width: 769px) {
  /* Increase thumbnail width */
  .product__thumbs--beside {
    flex: 0 0 100px !important;
    max-width: 100px !important;
    width: 100px !important;
    align-self: stretch !important;
  }
  
  .product__thumbs--beside.product__thumbs-placement--left {
    margin-right: 20px !important;
  }

  /* Thumbnail scroller - absolutely positioned to match container height */
  .product__thumbs--beside .product__thumbs-scroller {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
  }
  
  /* Smooth scrollbar */
  .product__thumbs--beside .product__thumbs-scroller::-webkit-scrollbar {
    width: 4px;
  }
  
  .product__thumbs--beside .product__thumbs-scroller::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
  }

  /* Individual thumbnail items */
  .product__thumbs--beside .product__thumb-item {
    width: 100% !important;
    max-width: 100px !important;
    margin-bottom: 15px !important;
  }
  
  .product__thumbs--beside .product__thumb-item:last-child {
    margin-bottom: 0 !important;
  }
}

/* Hide carousel dot indicators */
.product-slideshow .flickity-page-dots,
.flickity-page-dots {
  display: none !important;
}

/* 5. Left-Aligned Content */
.product-breadcrumb-wrapper {
  text-align: left !important;
  opacity: 0.6 !important;
  margin-bottom: 12px !important;
}

.product-breadcrumb-wrapper .breadcrumbs {
  justify-content: flex-start !important;
}

/* Force left alignment for all product content */
.product-single__meta {
  text-align: left !important;
}

.product-single__title,
.product-block,
.product-block--price,
.product__price,
.product-features-list {
  text-align: left !important;
}

/* 6. Free Shipping Badge Next to Price */
.product-price-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.product-shipping-badge {
  display: inline-block !important;
  background: #00b45d !important;
  color: #ffffff !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-radius: 20px !important;
  margin: 0 !important;
}

.volume-discount-incentive {
  width: 100%;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #666;
  letter-spacing: 0.3px;
}

.volume-discount-incentive .volume-divider {
  color: #ccc;
  margin: 0 6px;
  vertical-align: middle !important;
}

/* 7. Product Features List Below Price */
.product-features-list {
  margin: 20px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: left !important;
}

.product-features-list li {
  font-size: 16px !important;
  line-height: 1.8 !important;
  padding-left: 20px !important;
  position: relative !important;
  margin-bottom: 2px !important;
  text-align: left !important;
}

.product-features-list li:before {
  content: "•" !important;
  position: absolute !important;
  left: 0 !important;
  font-weight: 400 !important;
  color: #000000 !important;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
  .product-savings-banner {
    font-size: 12px;
    padding: 10px 15px;
  }
  
  .product-tags-overlay {
    top: 15px;
    left: 15px;
    gap: 6px;
  }
  
  .product-tag {
    padding: 6px 12px;
    font-size: 11px;
  }
  
  .product-zoom-indicator {
    width: 36px;
    height: 36px;
    bottom: 15px;
    right: 15px;
  }
  
  .product-shipping-badge {
    display: block;
    margin-left: 0;
    margin-top: 10px;
    text-align: center;
    max-width: 200px;
  }

  .volume-discount-incentive {
    font-size: 12px;
    text-align: center;
  }

  .product-features-list {
    margin-top: 15px;
  }
  
  .product-features-list li {
    font-size: 13px;
  }
}

/*
/////////////////////////////////////////////
BUY BOX IMPROVEMENTS (ODDIT)
/////////////////////////////////////////////
*/

/* 2. Show selected variant next to label */
.variant__label-info {
  font-weight: 600 !important;
  color: #000000 !important;
}

/* 3. Color swatches - make fully rounded */
.color-swatch {
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
}

/* 4. Quantity Card Selectors - CRO Optimized */
.quantity-card-selector {
  margin: 20px 0;
}

.quantity-card-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin-bottom: 16px;
}

.quantity-cards {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  max-width: 480px !important;
  align-items: stretch;
}

/* A flex column with min-width:0 is load-bearing, not cosmetic. With the default
   min-width:auto a card cannot shrink below the min-content width of its price
   row, so `flex: 1 1 0` never equalises: the tiers carrying "<s>$398.00</s>
   $318.40" push wider than the single-price tier. Measured on live iOS Safari at
   402px the three cards came out 95.6 / 131.7 / 120.7 and the qty labels sat up
   to 43px apart. min-width:0 lets flex do its job; the price row wraps instead. */
.quantity-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  max-width: 150px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
  border: 1.5px solid #e0ddd8;
  border-radius: 4px;
  padding: 16px 10px 14px;
  background: #fff;
}

.quantity-card:hover {
  border-color: #bbb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.quantity-card.active {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 1px #1a1a1a;
  background: #fafaf8;
}

/* Checkmark on active card */
.quantity-card.active::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: #00b45d;
  border-radius: 50%;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}


/* The image box must be locked to a ratio, never derived from the asset. With
   `height: auto` alone, a replaced element whose tentative height exceeds
   max-height gets its WIDTH recomputed from the intrinsic ratio (CSS2.1 10.4),
   so a portrait cover rendered narrower than a square one and the cards stopped
   lining up. A specified aspect-ratio is clamped by max-height without touching
   the explicit width, so the box is identical on every card whatever the asset:
   the 1-up variant image and the 2_copies / 3_copies metafield images mix
   portrait (1024x1380) and square (1024x1024) on the same page today. */
.quantity-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  max-height: 140px;
  object-fit: contain;
  margin-bottom: 10px;
  display: block;
  border: 0;
  transition: transform 0.25s ease;
}

.quantity-card:hover img {
  transform: scale(1.03);
}


/* Badges - premium gold system */
.quantity-card-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 10px;
  color: #ffffff;
  z-index: 2;
  white-space: nowrap;
}

.quantity-card-badge.save-10,
.quantity-card-badge.save-20,
.quantity-card-badge.save-25 {
  background: #00b45d;
  box-shadow: 0 2px 6px rgba(0, 180, 93, 0.3);
}

.quantity-card-qty {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

/* De-emphasize 1-copy price to favor multi-copy */
.quantity-card[data-quantity="1"] .quantity-card-price {
  font-weight: 500;
  color: #444;
}

/* Bottom-anchored so the price baselines align across cards even when one tier
   wraps to two lines and another does not. */
.quantity-card-price {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-top: auto;
  padding-top: 6px;
}

.quantity-card-price s {
  color: #b0b0b0;
  font-size: 12px;
  font-weight: 400;
  margin-right: 3px;
  text-decoration-color: #ccc;
}

.quantity-card-price-single {
  font-size: 15px;
  font-weight: 500;
  color: #444;
}

.quantity-card-price-original {
  font-size: 14px;
  color: #b0b0b0;
  margin-bottom: 2px;
}

.quantity-card-price-original s {
  text-decoration: line-through;
  text-decoration-color: #ccc;
}

.quantity-card-price-discounted {
  font-size: 24px;
  font-weight: 700;
  color: #000;
  margin-bottom: 2px;
}

.quantity-card-savings {
  font-size: 12px;
  font-weight: 500;
  color: #00a053;
  margin-top: 2px;
  letter-spacing: 0.02em;
}


/* 5. Simplified Gift Toggle */
.gift-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 15px 0 !important;
}

.gift-toggle__text {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
}

.gift-toggle__text svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* 6. ADD TO CART button styling is already handled */

/* 7. Delivery ETA */
.product-delivery-eta {
  text-align: center;
  font-size: 13px;
  margin: 12px 0;
  padding: 10px;
  background: #f8f8f8;
  border-radius: 6px;
}

.product-delivery-eta strong {
  font-weight: 700;
}

/* 8. Sales points styling */
.product__policies.sales-points {
  margin-top: 20px;
}

/* Mobile - keep flex row */
@media screen and (max-width: 768px) {
  .quantity-cards {
    flex-direction: row !important;
    gap: 10px !important;
  }
  
  .quantity-card {
    flex: 1 1 33.333%;
  }
  
  .quantity-card-qty {
    font-size: 16px;
  }
  
  .quantity-card-price {
    font-size: 16px;
  }

  /* At 116px card width the struck total and the offer total cannot share a
     line, so break between them deliberately rather than letting the wrap
     land mid-number. Desktop has room and stays inline. */
  .quantity-card-price s {
    display: block;
    margin-right: 0;
  }
  
  .quantity-card-savings {
    font-size: 13px;
  }
}

/* =============================================================================
   BYBLE ACCORDION v3.0 - Pure CSS with Beautiful Transitions
   ============================================================================= */

/* Theme wrapper reset */
.product-block--tab {
  margin: 0 !important;
  padding: 0 !important;
}

/* Accordion container */
details.byble-acc {
  display: block;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e5e5e5;
  background: transparent;
}

.product-block--tab:first-of-type details.byble-acc {
  border-top: 1px solid #e5e5e5;
}

/* Hide native marker */
details.byble-acc summary {
  list-style: none;
}

details.byble-acc summary::-webkit-details-marker {
  display: none;
}

details.byble-acc summary::marker {
  display: none;
}

/* Header - the clickable row */
summary.byble-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  transition: opacity 0.25s ease;
}

summary.byble-acc__head:hover {
  opacity: 0.6;
}

/* Title with icon */
.byble-acc__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a1a1a;
}

/* Icon container */
.byble-acc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #1a1a1a;
}

.byble-acc__icon svg {
  width: 16px;
  height: 16px;
}

/* Plus/Minus indicator with smooth transition */
.byble-acc__plus {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.byble-acc__plus::before,
.byble-acc__plus::after {
  content: "";
  position: absolute;
  background-color: #1a1a1a;
  border-radius: 1px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Horizontal line (minus) */
.byble-acc__plus::before {
  width: 14px;
  height: 1.5px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* Vertical line (makes the plus) */
.byble-acc__plus::after {
  width: 1.5px;
  height: 14px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* Open state - vertical line rotates to horizontal */
details.byble-acc[open] .byble-acc__plus::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

/* Animation wrapper (grid-template-rows transition for smooth height) */
.byble-acc__body-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.35s ease;
  overflow: hidden;
}

.byble-acc[open] > .byble-acc__body-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
}

.byble-acc__body-wrap > .byble-acc__body {
  min-height: 0;
}

/* Content area */
.byble-acc__body {
  padding: 0 0 24px 0;
  margin: 0;
}

/* Override theme margins */
.byble-acc__body.rte,
.product-single__meta .byble-acc__body.rte {
  margin-top: 0 !important;
}

.byble-acc__body > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Content styling */
.byble-acc__body.rte {
  font-size: 14px;
  line-height: 1.75;
  color: #444;
}

.byble-acc__body.rte p {
  margin: 0 0 16px;
}

.byble-acc__body.rte p:last-child {
  margin-bottom: 0;
}

.byble-acc__body.rte ul,
.byble-acc__body.rte ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.byble-acc__body.rte li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.byble-acc__body.rte li:last-child {
  margin-bottom: 0;
}

.byble-acc__body.rte ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #1a1a1a;
}

.byble-acc__body.rte strong {
  font-weight: 600;
  color: #1a1a1a;
}

/* Tables */
.byble-acc__body.rte table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.byble-acc__body.rte table tr {
  border-bottom: 1px solid #f0f0f0;
}

.byble-acc__body.rte table tr:last-child {
  border-bottom: none;
}

.byble-acc__body.rte table td {
  padding: 14px 0;
  font-size: 14px;
  vertical-align: top;
}

.byble-acc__body.rte table td:first-child {
  font-weight: 500;
  color: #1a1a1a;
  width: 40%;
}

/* Mobile adjustments */
@media only screen and (max-width: 768px) {
  summary.byble-acc__head {
    padding: 18px 0;
  }

  .byble-acc__title {
    font-size: 12px;
    gap: 10px;
  }

  .byble-acc__icon {
    width: 16px;
    height: 16px;
  }

  .byble-acc__body {
    padding: 0 0 20px 0;
  }

  .byble-acc__body.rte {
    font-size: 13px;
  }
}

/* ============================================================
   ADD TO CART BUTTON - Font Fix
   Overrides the global Roman font reset (line 49) and .btn
   font-weight: inherit (line 115). Uses maximum specificity
   + !important + last-in-cascade position to guarantee the win.
   ============================================================ */
body .payment-buttons .checkout-buttons button.btn.btn--full.add-to-cart.product-checkout,
body .payment-buttons .checkout-buttons button.btn.btn--full.add-to-cart.product-checkout span.add-to-cart__text,
body .payment-buttons .checkout-buttons button.btn.btn--full.add-to-cart.product-checkout [data-add-to-cart-text] {
  font-family: 'Neue Haas Grotesk Display Pro Medium', sans-serif !important;
  font-weight: 500 !important;
  -webkit-text-stroke: 0.3px currentColor !important;
  letter-spacing: 0.08em !important;
  font-size: 15px !important;
  color: #fff !important;
  text-rendering: optimizeLegibility !important;
}

/* ============================================================
   AFTERPAY BADGE
   Official Afterpay logo + dynamic "4 payments of $X" messaging.
   Contexts: product, cart, cart-drawer, footer.
   ============================================================ */
.afterpay-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.3;
}

.afterpay-badge__icon {
  height: 16px;
  width: auto;
  flex-shrink: 0;
}

.afterpay-badge__message {
  font-size: 13px;
  color: #555;
}

.afterpay-badge__price {
  color: #000;
  font-weight: 700;
}

/* Product page */
.afterpay-badge--product {
  margin: 10px 0 4px;
  padding: 8px 0;
}

/* Cart page */
.afterpay-badge--cart {
  justify-content: center;
  margin: 8px 0;
  padding: 6px 0;
}

/* Cart drawer - centered above checkout button */
.afterpay-badge--cart-drawer {
  justify-content: center;
  padding: 8px 0 4px;
}

/* Condensed for the drawer: these two payment lines are always rendered
   (snippets/cart-drawer.liquid), so their padding is pure fixed cost above the
   checkout button, taken from the item list. */
#CartDrawer .afterpay-badge--cart-drawer {
  padding: 4px 0 2px;
}

#CartDrawer .cashapp-badge--cart-drawer {
  padding: 2px 0;
}

#CartDrawer .cart__checkout-wrapper {
  margin-top: 12px !important;
}

#CartDrawer .drawer__footer .cart__item-sub:first-of-type {
  margin-bottom: 10px !important;
}

/* Footer - logo only, inline with payment icons */
.afterpay-badge--footer {
  display: inline-flex;
  vertical-align: middle;
  margin: 0 4px;
}

.afterpay-badge--footer .afterpay-badge__icon {
  height: 14px;
}

@media only screen and (max-width: 768px) {
  .afterpay-badge--product {
    margin: 8px 0 2px;
  }

  .afterpay-badge__icon {
    height: 14px;
  }

  .afterpay-badge__message {
    font-size: 12px;
  }
}

/* ============================================================
   CASHAPP PAY BADGE
   Official CashApp Pay logo + "or pay with" messaging.
   ============================================================ */
.cashapp-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.3;
}

.cashapp-badge__icon {
  height: 16px;
  width: auto;
  flex-shrink: 0;
}

.cashapp-badge__message {
  font-size: 13px;
  color: #555;
}

.cashapp-badge--product {
  margin: 4px 0;
  padding: 4px 0;
}

.cashapp-badge--cart {
  justify-content: center;
  margin: 4px 0;
  padding: 4px 0;
}

.cashapp-badge--cart-drawer {
  justify-content: center;
  padding: 4px 0;
}

.cashapp-badge--footer {
  display: inline-flex;
  vertical-align: middle;
  margin: 0 4px;
}

.cashapp-badge--footer .cashapp-badge__icon {
  height: 14px;
}

@media only screen and (max-width: 768px) {
  .cashapp-badge__icon {
    height: 14px;
  }

  .cashapp-badge__message {
    font-size: 12px;
  }
}

/* ============================================================
   Byble Book Stand — Clear variant swatch (premium acrylic)
   Overrides the inline `background-color: clear` fallback that
   falls through to transparent/white and becomes visually
   indistinguishable from the White swatch. Scoped to the stand
   product only so no other "Clear" variant in the catalog is
   affected.
   ============================================================ */
[data-product-handle="byble-book-stand"] .color-swatch--clear {
  background-image:
    radial-gradient(
      circle at 28% 22%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0) 38%
    ),
    linear-gradient(
      135deg,
      #eef3f6 0%,
      #f7f9fa 40%,
      #e3ebf0 72%,
      #f2f4f6 100%
    ) !important;
  background-color: #f2f4f6 !important;
  border: 1px solid #b8c2cc !important;
  box-shadow:
    inset 0 1px 1.5px rgba(255, 255, 255, 0.9),
    inset -1px -2px 3px rgba(50, 70, 90, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.06);
  color: transparent !important;
}

[data-product-handle="byble-book-stand"] .variant-input input[type=radio][value="Clear"] + label.color-swatch--clear:hover {
  background-image:
    radial-gradient(
      circle at 28% 22%,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0) 42%
    ),
    linear-gradient(
      135deg,
      #f2f6f8 0%,
      #fbfcfd 40%,
      #e8eef3 72%,
      #f5f7f9 100%
    ) !important;
  border-color: #8b9aa7 !important;
}

[data-product-handle="byble-book-stand"] .variant-input-wrap input[type=radio][value="Clear"]:checked + label.color-swatch--clear {
  border-color: #1a1a1a !important;
  box-shadow:
    inset 0 1px 1.5px rgba(255, 255, 255, 0.9),
    inset -1px -2px 3px rgba(50, 70, 90, 0.15),
    0 0 0 2px #1a1a1a !important;
}

/* ============================================================
   Site header — horizontal breathing room (mobile only)
   Desktop header is fine as-is. Mobile was previously pinned to
   the viewport edge via `padding: 0 7px !important` on
   `.site-header .page-width`. Bump to ~16-24px fluid.
   ============================================================ */
@media screen and (max-width: 768px) {
  .site-header .page-width {
    padding: 0 clamp(16px, 4vw, 24px) !important;
  }
}

/* ============================================================
   Cart Drawer — Byble Book Stand Upsell
   Visible when cart has a Byble book but not the Stand.
   Lives inside #CartDrawer (light theme: cream surface on white).
   ============================================================ */
.cart-stand-upsell-drawer {
  margin: 16px 16px 20px;
  padding: 18px 18px 20px;
  background: #f7f5f1;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  color: #1a1a1a;
}

.cart-stand-upsell-drawer[hidden] {
  display: none;
}

.cart-stand-upsell-drawer__header {
  margin-bottom: 14px;
}

.cart-stand-upsell-drawer__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: "Neue Haas Grotesk Display Pro Medium", "HelveticaNeue", helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0 0 4px;
  letter-spacing: 0.005em;
  line-height: 1.25;
}

.cart-stand-upsell-drawer__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #00b45d;
  color: #ffffff;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.cart-stand-upsell-drawer__badge svg {
  flex: 0 0 auto;
}

.cart-stand-upsell-drawer__subtitle {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #6b6b6b;
}

.cart-stand-upsell-drawer__body {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  align-items: start;
}

.cart-stand-upsell-drawer__media img {
  width: 92px;
  height: 92px;
  display: block;
  object-fit: cover;
  border-radius: 3px;
  background: #ffffff;
}

.cart-stand-upsell-drawer__details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.cart-stand-upsell-drawer__pricing {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.cart-stand-upsell-drawer__price-bundle {
  font-family: "Neue Haas Grotesk Display Pro Medium", "HelveticaNeue", helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.cart-stand-upsell-drawer__price-original {
  font-size: 13px;
  color: #9b9b9b;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.cart-stand-upsell-drawer__swatches {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cart-stand-upsell-drawer__swatch {
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  flex: 0 0 auto;
}

.cart-stand-upsell-drawer__swatch:hover:not([disabled]):not(.is-selected) {
  border-color: rgba(0, 0, 0, 0.45);
}

.cart-stand-upsell-drawer__swatch.is-selected {
  border-color: #1a1a1a;
  border-width: 2px;
  transform: scale(1.06);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.cart-stand-upsell-drawer__swatch[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.cart-stand-upsell-drawer__swatch-inner {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  display: block;
}

.cart-stand-upsell-drawer__swatch--black .cart-stand-upsell-drawer__swatch-inner {
  background: #0a0a0a;
}

.cart-stand-upsell-drawer__swatch--white .cart-stand-upsell-drawer__swatch-inner {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.cart-stand-upsell-drawer__swatch--clear .cart-stand-upsell-drawer__swatch-inner {
  background-image:
    radial-gradient(
      circle at 28% 22%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0) 38%
    ),
    linear-gradient(
      135deg,
      #eef3f6 0%,
      #f7f9fa 40%,
      #e3ebf0 72%,
      #f2f4f6 100%
    );
  border: 1px solid rgba(80, 100, 120, 0.18);
  box-shadow:
    inset 0 1px 1.5px rgba(255, 255, 255, 0.9),
    inset -1px -2px 3px rgba(50, 70, 90, 0.16);
}

.cart-stand-upsell-drawer__add {
  width: 100%;
  padding: 12px 16px;
  background: #1a1a1a;
  color: #ffffff;
  border: none;
  font-family: "Neue Haas Grotesk Display Pro Medium", "HelveticaNeue", helvetica, arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 4px;
  transition: background 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.cart-stand-upsell-drawer__add:hover:not([disabled]) {
  background: #2e2e2e;
}

.cart-stand-upsell-drawer__add[disabled] {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.45);
  cursor: not-allowed;
}

.cart-stand-upsell-drawer__add .hidden {
  display: none;
}

/* Default (desktop): show full price-reinforced copy, hide short version */
.cart-stand-upsell-drawer__add-text-short {
  display: none;
}
.cart-stand-upsell-drawer__add-text-full {
  display: inline;
}

/* Mobile / small tablet: ultra-compact horizontal layout. Target ~110px
   total height (vs ~250px desktop). Layout becomes a single body row:
   [image 48] | [price + swatches stacked] | [ADD button inline-right].
   The header (title + badge) sits compact above the row. Subtitle and
   price-original are sacrificed -- the badge already carries the savings,
   the bundle price ($69) is what matters at decision time. */
@media (max-width: 600px) {
  .cart-stand-upsell-drawer {
    margin: 12px 12px 16px;
    padding: 10px 12px 12px;
  }
  .cart-stand-upsell-drawer__header {
    margin-bottom: 6px;
  }
  .cart-stand-upsell-drawer__title {
    font-size: 13px;
    gap: 8px;
  }
  .cart-stand-upsell-drawer__subtitle {
    /* Decorative copy is dropped on mobile -- the drawer is task-oriented
     * at this size; the SAVE $30 badge IS the value prop. */
    display: none;
  }
  .cart-stand-upsell-drawer__badge {
    font-size: 9px;
    padding: 2px 6px 2px 5px;
    letter-spacing: 0.07em;
  }

  /* Body is now 3 columns: image | details | ADD button. ADD is inline,
   * not a full-width row below -- saves ~50px vertical. The button still
   * keeps a 44px tap height because it stretches to match the row. */
  .cart-stand-upsell-drawer__body {
    grid-template-columns: 48px 1fr auto;
    gap: 10px;
    align-items: center;
  }
  .cart-stand-upsell-drawer__media img {
    width: 48px;
    height: 48px;
  }
  .cart-stand-upsell-drawer__details {
    gap: 6px;
  }
  .cart-stand-upsell-drawer__price-bundle {
    font-size: 14px;
  }
  .cart-stand-upsell-drawer__price-original {
    font-size: 12px;
  }

  /* Mobile: swatches are hidden and Black is the default. Picking a
   * different color is a desktop affordance -- on mobile we trade the
   * color picker for vertical real estate. The shopper who wants White
   * or Clear can use the PDP. */
  .cart-stand-upsell-drawer__swatches {
    display: none;
  }

  /* ADD button: inline-right, width auto. Height comes from align-items
   * stretch on the body row (matches image + details column). Short copy
   * "ADD" is shown via the .add-text-short span (full copy hidden). */
  .cart-stand-upsell-drawer__add {
    width: auto;
    min-height: 44px;
    padding: 0 16px;
    margin-top: 0;
    font-size: 11px;
    letter-spacing: 0.14em;
    align-self: stretch;
    white-space: nowrap;
  }
  .cart-stand-upsell-drawer__add-text-short {
    display: inline;
  }
  .cart-stand-upsell-drawer__add-text-full {
    display: none;
  }
}

/* Very narrow phones (≤ 360px): drop image to 40px and tighten gaps so
   the row still fits the ADD button comfortably. */
@media (max-width: 360px) {
  .cart-stand-upsell-drawer {
    padding: 10px;
  }
  .cart-stand-upsell-drawer__body {
    grid-template-columns: 40px 1fr auto;
    gap: 8px;
  }
  .cart-stand-upsell-drawer__media img {
    width: 40px;
    height: 40px;
  }
  .cart-stand-upsell-drawer__swatches {
    gap: 6px;
  }
  .cart-stand-upsell-drawer__add {
    padding: 0 12px;
  }
}

/* Featured image with text: mirrored band.
   Opt-in via the section's "Image on the right" setting. Desktop only, because
   below 769px the layout is already forced to a single column (image, heading,
   text) and reversing it there would put the image after the copy. */
@media screen and (min-width: 769px) {
  .featured-image-with-text-wrap--invert {
    flex-direction: row-reverse;
  }
}

/* Non-colour variant buttons (Size on the Everyday Bible Cover).

   The theme only ever styled the colour-swatch variant of this label. The plain
   branch inherited `box-shadow: 0 0 0 1px var(--colorBorder)` with `padding: 0`
   and, critically, NO `:checked` rule at all, so the glyphs sat flush against a
   hairline box and the selected value was computationally identical to the
   unselected one (measured: same background, colour, weight, shadow and border).
   That is a purchase-blocking defect, not a cosmetic one: the shopper cannot see
   which size they picked.

   Scoped with :not(.color-swatch) so the 40x40 round swatches on the Cover, the
   Stand and the book PDPs are provably untouched. Geometry and states mirror
   .quantity-card directly below the selector, so the two read as siblings. */
.variant-input-wrap label:not(.color-swatch) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 11px 18px;
  margin: 0 8px 10px 0;
  border: 1.5px solid #e0ddd8;
  border-radius: 4px;
  box-shadow: none;
  background: #fff;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.variant-input-wrap label:not(.color-swatch):hover {
  border-color: #bbb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.variant-input-wrap input:checked + label:not(.color-swatch) {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 1px #1a1a1a;
  background: #fafaf8;
}

/* The real radio is clipped to 1px, so keyboard users get no focus ring from it.
   Put the ring on the label the input actually controls. */
.variant-input-wrap input:focus-visible + label:not(.color-swatch) {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

/* Sold-out strike: the theme draws a rotated 1px rule through the label. Keep it
   readable now the box is taller than the text it crosses. */
.variant-input-wrap label:not(.color-swatch).disabled {
  color: #9a9a95;
  border-color: #ecece6;
}

/* Inline dimensions under the Size selector. Reads the same custom.dimensions
   metafield as the SIZING tab, so the shopper gets the measurement for the size
   they just clicked without opening the accordion. Every size is in the DOM and
   only .is-active shows, so the correct one is visible before JS runs. */
.size-dimensions {
  display: flex;
  align-items: center;
  gap: 6px;
  /* The theme gives .variant-input-wrap margin-bottom: -12px, which pulled this
     line 2px ABOVE the pill row and made the ruler icon touch SMALL's border.
     Measured: pill bottom 67.2, box top 65.2. Push back to real air. */
  margin: 8px 0 14px;
  font-size: 13px;
  line-height: 1.3;
  color: #6b6b66;
  letter-spacing: 0.01em;
}

.size-dimensions__icon {
  flex: 0 0 auto;
  color: #9a9a95;
}

.size-dimensions__item {
  display: none;
  font-variant-numeric: tabular-nums;
}

.size-dimensions__item.is-active {
  display: inline;
}
/* Star rating summary near price (NVO-960). Metafield-driven, hidden
   until rating_value/review_count are set, so no empty state renders. */
.product-star-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.product-star-rating__wrap {
  position: relative;
  display: inline-block;
  /* Lucide SVGs, not glyphs: no font-size or letter-spacing. line-height 0
     stops the inline box adding descender space under the icons. */
  line-height: 0;
}

.product-star-rating__base,
.product-star-rating__fill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.product-star-rating__base {
  color: #d9d6cf;
}

.product-star-rating__fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  /* Review yellow, not the theme's old #c9a96e. That tan was inherited from a
     scaffold that never rendered, and against white it reads as a washed-out
     decorative flourish rather than a rating. Deliberately NOT the brand orange
     #E15800 either: that reads as a brand accent, and a rating star has to be
     instantly legible AS a rating. */
  color: #FFB400;
}

/* The fill row is clipped by a percentage width, so its icons must keep their
   full size and be cut off. Without flex:0 0 auto they shrink to fit instead,
   which silently turns a 60% rating into five squashed stars. */
.product-star-rating__fill .lucide-icon {
  flex: 0 0 auto;
}

.product-star-rating__text {
  font-size: 13px;
  color: #6b6b66;
}

.product-star-rating__count {
  color: #9a9a95;
}

/* Brand-level social proof under the price (NVO-990): five stars plus the
   reader count, mirroring Dylan's paid-social creative. Shares the
   .product-star-rating scale and colour above, so if real per-product review
   data ever replaces this row the treatment does not visibly change. */
.social-proof-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Bottom margin, not just top: the price follows immediately and sits flush
     against this row without it. */
  margin: 2px 0 10px;
}

/* Lucide star SVGs, not text glyphs, so no font-size or letter-spacing here.
   Colour is inherited: lucide-icon.liquid is rendered with fill and stroke set
   to currentColor, so this one declaration drives both. */
.social-proof-stars__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  /* Same review yellow as .product-star-rating__fill. Keep the two in step. */
  color: #FFB400;
}

.social-proof-stars__stars .lucide-icon {
  display: block;
}

.social-proof-stars__text {
  font-size: 13px;
  color: #6b6b66;
}

/* Accepted-payment icons under the add-to-cart button (NVO-964).
   .inline-list and .payment-icons already carry the shared list resets in
   theme.css.liquid, including `.payment-icons li { margin: 0 4px }`, so this
   only handles placement and sizing.

   There is deliberately NO colour treatment here. A `grayscale`/`contrast`
   filter was shipped once and rejected: it is a brand-compliance violation for
   every mark in the row, and it flattened them into a 175-220 luminance band
   that read as disabled rather than intentional. See the long comment in
   snippets/payment-icons.liquid before adding any filter, opacity or recolour
   to these marks. */
.payment-icons--product {
  display: flex;
  flex-wrap: wrap;
  /* Left-aligned, not centred. This row lives in `.product-block` (627px on
     desktop) while the add-to-cart button's own container is narrower, so
     centring would float the icons off the button's axis and off the Afterpay
     and CashApp lines above them, which are also left-aligned. */
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  /* Bottom margin matters: the gift section follows immediately and without it
     the hint text sits flush against the icons. */
  margin: 10px 0 18px;
}

.payment-icons--product li.icon--payment {
  margin: 0;
  line-height: 0;
}

.payment-icons--product svg {
  display: block;
  height: 22px;
  width: auto;
}