/** Shopify CDN: Minification failed

Line 450:0 "@charset" must be the first rule in the file
Line 1614:21 Expected identifier but found whitespace
Line 1614:23 Unexpected "{"
Line 1614:33 Expected ":"
Line 1709:21 Expected identifier but found whitespace
Line 1709:23 Unexpected "{"
Line 1709:33 Expected ":"

**/
/* ============================================================
   SATOSHI FONT — Self-hosted via Shopify CDN 12Mra2026
   ============================================================ */
@font-face {
  font-family: 'Satoshi';
  src: url('/cdn/shop/files/Satoshi-Regular.woff2?v=1773281623') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/cdn/shop/files/Satoshi-Medium.woff2?v=1773281623') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/cdn/shop/files/Satoshi-Bold.woff2?v=1773281623') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/cdn/shop/files/Satoshi-Light.woff2?v=1780280253') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* Theme-wide Satoshi override */
body,
p, li, span, div, input, button, select, textarea,
.btn, .navtext, .product__price,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4,
.product-single__title,
.section-header__title {
  font-family: 'Satoshi', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4,
.product-single__title {
  font-weight: 700;
}
/* Product title for desktop */
  @media screen and (min-width: 769px) {
    .template-product .product-single__title {
      font-size: 22px;
      line-height: 1.2;
    }
  }

  /* Product title for mobile */
  @media screen and (max-width: 768px) {
    .template-product .product-single__title {
      font-size: 16px;
      line-height: 1.2;
    }
  }



.accordion-title h1,h2,h3,h4 {
  text-transform:none;
}

/* .video-flex-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}
video-flex-container .parkour-video-img--container {
  flex: 1;
  position: relative;
} */

/* GR - 20 Aug '21 */

.product-full-width-video {
  max-width: 100%;
}

/* GR - 26 Aug '21 */
.benefits.benefit-row1, .benefits.benefit-row2 {
  padding-left: 30px;
  padding-right: 30px;
}

@media screen and (max-width: 768px) {
  .benefits.benefit-row1, .benefits.benefit-row2 {
    padding-left: 10px;
    padding-right: 10px;
  }
}
/*				Custom Image-Text-1			*/

.gr-container {
/*   min-height: 100vh; */
  align-content: center;
  display: block;
  overflow-x: hidden;
}
.custom-text-image-section .gr-container{
	overflow-x: inherit;
}
.gr-image {
  position: absolute;
}

.gr-container .btn, .gr-container .btn:hover {
    background-color: #fff !important;
    color: #000 !important;
  	animation: fade-in 2s ease 1.3s forwards;
}

.gr-image, .gr-image > img {
    width: 100%;
}

#shopify-section-1630503223244537f8 {
    margin-top: 0px;
}

@media (min-width: 1281px) {
  #shopify-section-1630503223244537f8 {
    margin-top: 0px;
  }
}

@media (min-width: 769px) {
  .gr-mobile-img {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 1000px) {
  .gr-container {
/*   	min-height: 60vh; */
  }
}

.gr-desktop-img {
    display: block;  	
}

@media (max-width: 768px) {
  .gr-desktop-img {
    display: none;
  }
  
  .gr-container .hero__title {
    font-size: 23px;
}
  
  .gr-container {
/*     min-height: auto; */
    align-content: end;
    overflow-y: hidden;
}
  
  .gr-image {
    position: relative;
}
  
  .gr-container .hero__text-wrap {
/*     margin-top: -180px; */
}
}

/*				Slide Animation				*/

.gr-image {
    translate: 400px;
    animation: fade 0.5s forwards;
    animation-delay: 0.5s;
}

.gr-container .hero__title {
  transform: translateY(100px);
  opacity: 0;
  animation: slide 0.5s forwards;
  animation-delay: 1s;
}

.gr-container .hero__subtitle {
  transform: translateY(100px);
  opacity: 0;
  animation: slide 0.5s forwards;
  animation-delay: 1.2s;
}

.gr-container .hero__link {
  transform: translateY(100px);
  opacity: 0;
  animation: slide 0.5s forwards;
  animation-delay: 1.4s;
}


@keyframes fade {
    100% { translate: 0; }
}

@keyframes slide {
    100% { transform: translate(0px); opacity: 1; }
}

@media screen and (max-width: 798px) {
  .medium-up--one-half {
    width: 100% !important;
  }
}
/*				Product Benefits				*/
.benefit-row1 {
  padding-top: 35px;
}
.benefit-row2 {
  margin-bottom: 30px;
}
.benefits .col-ts-3 {
  flex-basis: 20%;
  flex-grow: 0;
  flex-shrink: 1;
  margin: auto;
}
.benefits .inner-box {
  display: flex;
  align-items: center;
  justify-content: left;
}
.benefits .inner-box img {
  max-width: 40px;
}
.benefits .inner-box span {
  font-size: 0.9rem;
}
.row-ts.collapse-tab {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding-bottom: 35px;
  flex-wrap: nowrap;
}
.benefits .col-ts-3 {
  flex-basis: 50%;
}
@media screen and (max-width: 768px) 
{
  .benefit-row1 {
    padding-bottom: 30px;
  }
  .benefit-row1 .col-ts-3
  {
    padding-top:5px;
    padding-bottom:5px;
  }
  .row-ts.collapse-tab {
    flex-wrap: wrap;
    padding-bottom: 0;
  }
  .row-ts.collapse-tab:last-of-type {
    padding-bottom: 35;
  }
  .benefits .inner-box {
    justify-content: left;
  }
}
.row-ts { 
  padding-bottom: 30px;
}
.row-ts h2 {
  text-align: center;
}


/* Task 1 --  AB */
@media screen and (max-width: 520px) 
{
	.hero__text-content.vertical-center.horizontal-right.mobile__vertical-bottom.mobile__horizontal-center
	{
		vertical-align: bottom;
	    text-align: center;
	}
    .product-block.product-block--sales-point .sales-point .icon-and-text {
      justify-content: flex-start;
      text-align: left;
    }
}


.alternate-article-template .section-header {
    text-align: left;
}

.product-block-faq .collapsible-content.collapsible-content--all.is-open
{
  height:auto !important;
}

 
/* Disable Sale tags on Collection thumbnails - Now done in product-grid
.grid-product__tag--sale {
    display: none;
}  */ 
/* product-custom-images */

.product-logos-container-wrapper {
/*   border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9; */
  width: 100%;
}
.product-logos-container {
  width: 95%;
  min-width: 900px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  max-width: 1200px;
/*   margin-top: 25px;
  margin-bottom: 25px; */
}
.product-logo-container {
  flex-basis: 25%;
/*   border-right: 1px solid #d9d9d9; */
  text-align: center;
  padding: 10px 28px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
/* .product-logo-container:last-of-type {
  border-right: none;
  border-bottom: none;
} */
.product-logo-container img {
  width: auto;
  height: auto;
  margin-bottom: 0;
  max-width: 120px;
  margin-right: 10px;
}
.product-logo-title {
  text-align: left;
  margin-bottom: 5px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.product-logo-text {
  text-align: left;
  color: #808080;
  font-size: 12px;
  margin-bottom: 0;
}
.product-images-full {
  width: 100%;
  text-align: center;
}
.product-images-half-wrapper {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}
.product-images-full img, .product-images-half img {
  height: 115vh;
  object-fit: cover;
  object-position: center;
}
.product-images-half {
  width: 50%;
  flex-basis: 50%;
}
@media screen and (max-width: 1007px) {
  .product-logos-container {
    flex-wrap: wrap;
    min-width: unset;
    width: 50%;
    min-width: 486px;   
    
  }
  .product-logo-container {
    flex-basis: 50%;
    border-top: none;
    padding-left: 0;
    padding-right: 0;
  }
/*   .product-logo-container:nth-of-type(even) {
    border-right: none;
  } */
}
@media screen and (max-width: 520px) {
  .product-logos-container {
    min-width: initial;
    width: auto;
  }
  .product-logo-container {
    flex-basis: 50%;
    justify-content: left;
  }
}

.product-additional-container-wrapper {
  .product-logo-container {
    flex-basis: 33%;
    padding: 30px 58px;
  }
  .product-logo-title {
    font-family: "Din Next";
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ffffff;
  }
  .product-logo-text {
    font-family: "Din Next";
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0px;
    color: #ffffff;
    line-height: 20px;
  }
}
/*   Turn Google Captcha Off
  } */
.grecaptcha-badge {
    display: none !important;
}

/*   Landing Page Sections */
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
  background: #fff url('./ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
  font-family: 'slick';
  font-weight: normal;
  font-style: normal;

  src: url('./fonts/slick.eot');
  src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}


/*bang landing page*/
.bang-landing-page{
  margin:0 auto;
  max-width:1920px;
}
/*bang header*/
.bang-header .announcement-slider{
  display:flex;
  align-items:center;
  justify-content: center;
}
.bang-header .announcement-slider__slide{
  width:auto;
  margin-right:20px;
}
.bang-header .grid{
  display: flex;
  align-items: center;
}
.bang-header .header__button .btn{
  padding: 6px 10px;
  font-size: 13px;
}
.bang-header .header__item.header__logo,
.bang-header .header__item.header__button{
  width: 25%;
}
.bang-header .header__item.header__announcement{
  width: 50%;
}
.bang-header .header__item .site-header__logo{
  margin:0;
}

.bang-header .header__button{
  text-align: right;
}
/*brag bar*/
.brag-bar-slider{
  margin: 0 auto;
  max-width: 900px;
  padding: 10px 0;
}
.brag-bar-slider .slick-track{
  display: flex;
  align-items: center;
  justify-content: center;
}
.brag-bar-item {
  text-align:center;
}
.brag-bar-item img {
  margin: 0 auto;
}
.brag-bar-slider .slick-next {
  right: 25px;
  z-index: 9999;
}
.brag-bar-slider .slick-next:before {
  content: '';
  display: block;
  width:10px;
  height:20px;
  background: url('next.svg') no-repeat;
  opacity: 1;
} 
.brag-bar-slider .slick-prev {
  left: 25px;
  z-index: 9999;
}
.brag-bar-slider .slick-prev:before {
  content: '';
  display: block;
  width:10px;
  height:20px;
  background: url('prev.svg') no-repeat;
  opacity: 1;
} 
/*bang icons list*/
.desktop-hide{
  display:none;
}
.bang-icons-list-container{
  text-align:center;
}
.bang-icons-list-wrapper{
  padding:75px 0;
}
.bang-icons-list{
  display: flex;
  flex-wrap: wrap;
}
.bang-icons-list-item{
  width:25%;
  padding:0 25px;
  margin-bottom: 20px;
}
.bang-icons-button{
  margin-top:75px;
}
/*image with text 3*/
.image-with-text-3 h2{
  font-size: 53px;
}
.image-with-text-3 h3{
  font-size: 48px;
}
.image-with-text-3 h2,
.image-with-text-3 h3{
  margin-bottom: 30px;
}
.image-with-text-3 .rate{
  margin-bottom: 20px;
}
.image-with-text-3 .grid__item{
  width: 50%;
  padding:0;
}
.section-inner{
  align-items: center;
  display: flex;
}
.image-with-text-3 .item-text{
  padding: 0 5% 0 27%;
}
.image-with-text-3 #left.section-inner .item-text{
  padding: 0 27% 0 5%;
}
.image-with-text-3 .item-img{
  margin-bottom: -4px;
}
.image-with-text-3 #left.section-inner{
  flex-direction: row-reverse;
}
.image-with-text-3 .rate{
  display: flex;
  line-height: 22px;
}
.image-with-text-3 .rate .rate_icon{
  margin-right:10px;
}
.score {
  display: block;
  font-size: 22px;
  position: relative;
  overflow: hidden;
}

.score-wrap {
  display: inline-block;
  position: relative;
  height: 22px;
}

.score .stars-active {
  color: #EEBD01;
  position: relative;
  z-index: 10;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.score .stars-inactive {
  color: #EEBD01;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-stroke: initial;
  /* overflow: hidden; */
}
.image-with-text-3 .text-width-img{
  display: flex;
}
.image-with-text-3 .text-width-img img{
  max-width: 150px;
  margin-left: 45px;
}
.image-with-text-3 .zero{
  display: flex;
  align-items: center;
  height: 40px;
  overflow: hidden;
}
.image-with-text-3 .zero svg{
  max-width: 160px;
}
.image-with-text-3 .bullet{
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}
.image-with-text-3 .bullet .bullet_item{
  margin: 3px 10px;
  display: inline-flex;
  align-items: center;
  margin-bottom:10px;
}
.image-with-text-3 .bullet .bullet_item .icon{
  margin-right:5px;
}
.image-with-text-3 .bullet .bullet_item p{
  margin-bottom:0;
}

/*image with text 4*/
.image-with-text-4 .grid__item{
  width: 50%;
  padding:0;
}
.section-inner{
  align-items: center;
  display: flex;
}
.image-with-text-4 .item-text{
  padding: 0 5%;
}
.image-with-text-4 .item-img{
  margin-bottom: -4px;
}
/*image with text 5*/
.image-with-text-5 .grid{
  margin: 0 0 0 0;
}
.image-with-text-5 .grid__item{
  width: 50%;
  padding:0;
}
.section-inner{
  align-items: center;
  display: flex;
}
#left.section-inner{
  flex-direction: row-reverse;
}
.image-with-text-5 .item-text{
  padding: 0 5%;
  display: flex;
}
.image-with-text-5 .full-width .item-text{
  padding: 0 10%;
}
.item-number{
  font-size:36px;
  padding-right:30px;
}
.image-with-text-5 .item-img{
  margin-bottom: -4px;
}
.image-with-text-5 .text.desktop-hidden{
  display:none;
}
/*comparison section*/
.comparison-section .section-heading{
  text-align:center;
}
.comparison-section .comparison-table{
  margin:35px auto;
  max-width:980px;
  padding:30px 60px;
  background:#fff;
}
.comparison-section .grid{
  margin-bottom:5px;
  display: flex;
}
.comparison-section .grid .grid__item{
  width: 33.333%;
  padding: 10px 0 5px 0;
  flex: 1;
  min-height:60px;
  display: inline-flex;
  align-items: center;
}
.comparison-section .grid .grid__item.column-1,
.comparison-section .grid .grid__item.column-2{
  text-align:center;
  justify-content: center;
}
.comparison-section .grid .grid__item.column-1 img,
.comparison-section .grid .grid__item.column-2 img{
  max-width:28px;
}
.comparison-table-top .column-1{
  font-size: 35px;
  font-weight: bold;
}
.comparison-section .comparison-table-bottom,
.comparison-section .section-footer{
  text-align:center;
}
.comparison-section .comparison-table-bottom .grid__item {
  justify-content: center;
  font-size:15px;
  color: rgb(127, 128, 130);
}
/*Faq*/
.bang-landing-page .collapsible-trigger__icon--circle{
  border-color: #2c2c2c;
}
.desktop-only{
  display:block;
}
.mobile-only{
  display:none;
}
@media only screen and (min-width: 769px){
  .faq-section{
    padding: 75px 0;
    margin: 0;
  }
  .site-header__logo img {
    left: 95px;
  }
}
@media only screen and (max-width: 1170px){
  .image-with-text-3 .text-width-img {
    align-items: center;
  }
  .image-with-text-3 .text-width-img img {
    max-width: 150px;
    margin-left: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 768px){
  .image-with-text-3 .item-text {
    padding: 25px 5% 25px 10%;
  }
  .image-with-text-3 .text-width-img {
    align-items: center;
  }
  .image-with-text-3 .text-width-img img {
    max-width: 116px;
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px){
  .bang-header .header__button .btn {
    padding: 5px 10px;
    font-size: 12px;
    text-transform: inherit;
  }
  .desktop-only{
    display:none;
  }
  .mobile-only{
    display:block;
  }
  .bang-header .grid{
    margin-left: 0px;
  }
  .bang-header .header__item.header__logo,
  .bang-header .header__item.header__button{
    width: 50%;
    padding: 10px 0 8px 0;
  }
  .bang-header .announcement-slider__slide {
    margin-right: 0px;
  }
  .site-header__logo-link {
    margin: 0;
  }
  .brag-bar-item img {
    max-width: 200px;
  }
  .desktop-hide{
    display:none;
  }
  .bang-icons-list-wrapper{
    padding:50px 0;
  }
  .bang-icons-list {
    flex-direction: row;
  }
  .bang-icons-list-item{
    padding:0 25px;
  }
  .bang-icons-button{
    margin-top:50px;
  }
  .bang-icons-button.desktop-hide {
    display: inline-block;
    margin:0 0 50px 0;
  }
  .image-with-text-3 #left.section-inner{
    flex-direction: column;
  }
  #mb-img-bottom .image-with-text-3 #left.section-inner,
  #mb-img-bottom .image-with-text-3 #right.section-inner{
    flex-direction: column-reverse;
  }
  .image-with-text-3 .grid__item{
    width: 100%;
    margin-bottom:30px;
  }
  .image-with-text-3 .item-text{
    padding:0 0 35px 17px;
  }
  .image-with-text-3 #left.section-inner .item-text,
  .image-with-text-3 #right.section-inner .item-text{
    padding:20px 15px 30px 30px;
  }
  .image-with-text-4 .grid__item{
    width: 100%;
  }
  .image-with-text-4 .item-text{
    padding:0 0 35px 17px;
  }
  .image-with-text-4 .item-img{
    margin: 0 -17px;
  }
  .image-with-text-5 .grid__item{
    width: 100%;
  }
  .image-with-text-5 .full-width .item-text{
    padding:20px 15px 30px 30px;
  }
  .image-with-text-5 .item-text{
    padding:0 0 35px 0;
  }
  .image-with-text-5 .text.mobile-hidden{
    display:none;
  }
  .image-with-text-5 .text.desktop-hidden{
    display:block;
    padding:20px 15px 40px 32px;
  }

  #left.section-inner,
  .section-inner {
    flex-direction: column;
  }
  #mb-img-top   .section-inner {
    flex-direction: column-reverse;
  }
  .faq-section{
    padding: 40px 0;
    margin: 0;
  }
  .comparison-section .comparison-table{
    padding: 30px 5px 30px 30px;
    font-size:15px;
  }
  .comparison-table-top .column-1{
    font-size: 20px;
    font-weight: bold;
  }
  .bang-landing-page .btn{
    font-size: 11px;
  }
  .image-with-text-3 .text-width-img img {
    margin-left: 0px;
  }
  .image-with-text-3 h2{
    font-size: 40px;
  }
  .image-with-text-3 h3{
    font-size: 33px;
  }
}
/* Arrows */
.slick-prev,
.slick-next
{
  font-size: 0;
  line-height: 0;

  position: absolute;
  top: 50%;

  display: block;

  width: 20px;
  height: 20px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);

  cursor: pointer;

  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
  color: transparent;
  outline: none;
  background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
  opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
  opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
  font-family: 'slick';
  font-size: 20px;
  line-height: 1;

  opacity: .75;
  color: white;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
  left: -25px;
}
[dir='rtl'] .slick-prev
{
  right: -25px;
  left: auto;
}
.slick-prev:before
{
  content: '←';
}
[dir='rtl'] .slick-prev:before
{
  content: '→';
}

.slick-next
{
  right: -25px;
}
[dir='rtl'] .slick-next
{
  right: auto;
  left: -25px;
}
.slick-next:before
{
  content: '→';
}
[dir='rtl'] .slick-next:before
{
  content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
  margin-bottom: 30px;
}

.slick-dots
{
  position: absolute;
  bottom: -25px;

  display: block;

  width: 100%;
  padding: 0;
  margin: 0;

  list-style: none;

  text-align: center;
}
.slick-dots li
{
  position: relative;

  display: inline-block;

  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;

  cursor: pointer;
}
.slick-dots li button
{
  font-size: 0;
  line-height: 0;

  display: block;

  width: 20px;
  height: 20px;
  padding: 5px;

  cursor: pointer;

  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
  outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
  opacity: 1;
}
.slick-dots li button:before
{
  font-family: 'slick';
  font-size: 6px;
  line-height: 20px;

  position: absolute;
  top: 0;
  left: 0;

  width: 20px;
  height: 20px;

  content: '•';
  text-align: center;

  opacity: .25;
  color: black;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
  opacity: .75;
  color: black;
}
/* Slider */
.slick-slider
{
  position: relative;

  display: block;
  box-sizing: border-box;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list
{
  position: relative;

  display: block;
  overflow: hidden;

  margin: 0;
  padding: 0;
}
.slick-list:focus
{
  outline: none;
}
.slick-list.dragging
{
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track
{
  position: relative;
  top: 0;
  left: 0;

  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
  display: table;

  content: '';
}
.slick-track:after
{
  clear: both;
}
.slick-loading .slick-track
{
  visibility: hidden;
}

.slick-slide
{
  display: none;
  float: left;

  height: 100%;
  min-height: 1px;
}
[dir='rtl'] .slick-slide
{
  float: right;
}
.slick-slide img
{
  display: block;
}
.slick-slide.slick-loading img
{
  display: none;
}
.slick-slide.dragging img
{
  pointer-events: none;
}
.slick-initialized .slick-slide
{
  display: block;
}
.slick-loading .slick-slide
{
  visibility: hidden;
}
.slick-vertical .slick-slide
{
  display: block;

  height: auto;

  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}
/*   Landing Page Sections End */
.bubbles-section {
  overflow-x: scroll;
  padding: 20px 10px;
}
.bubbles-row {
  display: flex;
  flex-direction: row;
  width: fit-content;
  margin: auto;
}
.bubble-set {
  padding: 0px 5px;
}
.bubble-set a {
  display: flex;
  flex-direction: column;
}
.bubble-img-wrapper {
  width: 85px;
  display: block;
  margin: auto;
}
.bubble-img-wrapper img {
  width: 65px;
  display: block;
  margin: auto;
  border-radius: 50%;
}
.bubble-text-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin-top: 10px;
}
.bubble-text-wrapper p {
  text-align: center;
  color: #000;
  font-size: 12px;
  margin: 0;
  text-transform: uppercase;
}
.announcement-bar-block .top-header-area ul {
  margin: 0;
}
.announcement-bar-block .top-header-area ul li,
.top-header-static ul li{
  margin: 0 10px;
  text-transform: uppercase;
  font-size: 14px;
  list-style: none;
}
.announcement-bar-block .top-header-area ul li span.bloc-dot,
.top-header-static ul li span.bloc-dot{
  margin-right: 5px;
}
.announcement-bar-block .top-header-area{
  display: flex;
  align-items: center;
}
.top-header-static ul {
  display: flex;
  margin: 0;
}
.top-header-static {
  display: flex;
  align-items: center;
  justify-content: center;
}
ul.logoSlider {
  opacity: 0;
}
ul.logoSlider.slick-initialized.slick-slider + .top-header-static {
  display: none;
}
p.swatches-label {
  text-transform: none;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  font-family: 'Prompt';
}
p.swatches-label.first-label {
  margin-top: 5px;
}
.logoSlider .slick-track{
	display: flex;
  	align-items: center;
}
/*						Custom Collection Header						*/

.custom-collection-header-image {
  position: relative;
  
}
.custom-collection-header-image .collection-featured-image img {
  width: 100%;
  display: block;
}
.custom-collection-header-image .collection-featured-image {
  width: 100%;
}
.featured-collection-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  width: 100%;
}
.subcollection-buttons-section ul.subcollection-buttons-block {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
}
.subcollection-buttons-section ul.subcollection-buttons-block li {
  list-style: none;
}
.featured-collection-content h2 {
  margin-bottom: 10px;
}
.featured-collection-content .collection-subheading-block {
  margin-bottom: 25px;
}
.subcollection-buttons-section ul.subcollection-buttons-block li a {
  display: inline-block;
  background-color: #e3e3e3;
  color: #2c2c2c;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 30px;
  margin: 2px 4px;
  width: max-content;
}
.subcollection-buttons-section.button-blocks-mobile{
  display: none;
}
.custom-collection-header-image .collection-metafield-image-block picture img {
  width: 100%;
  display: block;
}
.subcollection-buttons-section ul.subcollection-buttons-block li.active a,
.subcollection-buttons-section ul.subcollection-buttons-block a:hover {
    background-color: #2c2c2c;
    color: #ffffff;
  transition: 0.3 ease-in-out;
}
/* width */
.subcollection-buttons-section ul.subcollection-buttons-block::-webkit-scrollbar {
  width: 2px;
  height: 5px;
}

.subcollection-buttons-section ul.subcollection-buttons-block::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #2c2c2c;
}
.subcollection-buttons-section ul.subcollection-buttons-block::-webkit-scrollbar-thumb {
  background: #2c2c2c; 
  border-radius: 10px;
  height: 5px;  
}


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


  .subcollection-buttons-section ul.subcollection-buttons-block{
    overflow-x: scroll;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    justify-content: center;
    padding-bottom: 8px;
    scrollbar-color: dark;
  }
}
@media only screen and (max-width:768px){
  .subcollection-buttons-section.button-blocks-mobile {
    display: block;
    margin-top: 10px;
  }
  .subcollection-buttons-section ul.subcollection-buttons-block li a {
    background-color: #e3e3e3;
    font-weight: bold;
    text-align: center;
    padding: 12px 15px;
  }

}


/*						Additional Blogs						*/

.addblogs-heading {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

@media (min-width: 769px) {
  .addblogs-column {
    max-width: 32%;
    text-align: center;
    font-weight: bold;
    margin: 15px;
  }

  .addblogs-container {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .addblogs-column {
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
  }
}
.image-with-text-heading-block {
    margin-bottom: 30px;
}
.image-with-text-6 div.rate {
    display: flex;
}

.image-with-text-6 div.rate span.rate_icon {
  margin-right: 10px;
}
.image-with-text-6 div.rate {
  display: flex;
  margin-bottom: 10px;
}

.stock-alert-block-section .stock-alert-item {
  display: flex;
  justify-content: center;
  padding: 10px;
  background-color: #fff2c6;
  border: 1px solid #dec675;
  font-size: 14px;
}
.item-img img {
  display: block;
  width: 100%;
}
button.slick-arrow {
  position: absolute;
  z-index: 99;
  background-color: #002168;
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
button.slick-icons.slick-arrow svg {
  fill: #ffffff;
  font-size: 18px;
  width: 18px;
  height: 18px;
}
button.image-button_prev.slick-icons.slick-arrow {
  left: 20px;
}
button.image-button_next.slick-icons.slick-arrow {
  right: 20px;
}
button.image-button_prev.slick-icons.slick-arrow svg{
  transform: rotate(180deg);
}
.product-single__meta .product-block a {
  font-weight: 600;
  text-decoration: underline;
}

/*						Product Swatches						*/
.color-swatch{
  height:26px;
  width:26px;
}
 
/*						Okendo Display Heading on Home Page Carousel						*/
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-heading {
    display: block !important;
}

/*	Text Columns Custom Section	*/
.textcolumns-block-section .section-header {
  margin-bottom: 20px;
}
.textcolumns-block-section .section-desc {
  max-width: 768px;
  margin: 0 auto 60px;
} 

.preorder-message 
{

font-size: 15px!important;
background: #ffffff!important;
color: #000!important;
text-align: center!important;
padding: 3px 6px;
}
.preorder-message:not(.active) {display:none;}
div#custom-add-to-cart-button-group-id.preorder button
{
background: #E4572E!important;
color: #fff!important;
border: 1px solid #E4572E!important;
}
div#custom-add-to-cart-button-group-id.preorder .preorder-message 
{
display:block;
}

/*						Featured Product Section						*/
.featured-secton-wrap-block {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
}
.featured-secton-wrap-block .wrap-index-section {
    width: calc(33.33% - 20px);
    margin: 0;
}
.featured-secton-wrap-block .wrap-index-section .grid__item.medium-up--one-half.product-single__sticky {
  width: 100%;
  position: inherit;
}
.featured-secton-wrap-block .wrap-index-section .grid__item.medium-up--one-half {
  width: 100%;
}

.featured-secton-wrap-block .wrap-index-section .page-content.page-content--product .page-width {
  padding: 0;
}
.featured-secton-wrap-block .wrap-index-section .grid__item.medium-up--one-half.product-single__sticky .product__thumbs {
  display: none;
}
.featured-secton-wrap-block .wrap-index-section .grid__item.medium-up--one-half .product-single__meta {
  padding: 0;
  padding-top: 50px;
}
.featured-secton-wrap-block .wrap-index-section .grid__item.medium-up--one-half .product-single__meta h1.h2.product-single__title {
  font-size: 24px;
}
.featured-secton-wrap-block .wrap-index-section .page-content.page-content--product {
  padding: 0;
}
.featured-secton-wrap-block-main {
    padding: 60px 0 40px;
    background-color: {{ settings.product_featured_bg }};
}
.custom-product-reviews-block {
    margin-bottom: 10px;
}
.featured-secton-wrap-block .wrap-index-section .product-label-block {
    position: absolute;
    top: 0;
    padding: 5px 10px;
    font-size: 14px;
    text-transform: uppercase;
}
.featured-secton-wrap-block .wrap-index-section .product-label-block p {
    margin: 0;
}
.featured-secton-wrap-block .wrap-index-section .grid--product-images--partial {
    position: relative;
}
@media only screen and (max-width:768px){
.featured-secton-wrap-block .wrap-index-section {
  width: 100%;
  margin: 20px 0;
}
.featured-secton-wrap-block .wrap-index-section .grid__item.medium-up--one-half .product-single__meta {
    text-align: left;
}
}

.featured-secton-wrap-block .image-wrap .animate-me, 
.featured-secton-wrap-block .image-wrap .lazyloaded:not([role=presentation]), 
.featured-secton-wrap-block .image-wrap svg 
{
    animation: fade-in 1s cubic-bezier(.26,.54,.32,1) 0s forwards;
}  

/*
@media only screen and (min-width:768px){
  .featured-secton-wrap-block .flickity-viewport
  {
  	height: 450px !important;
  }
}
*/
@media only screen and (max-width:767px){
.featured-secton-wrap-block .wrap-index-section .grid__item.medium-up--one-half .product-single__meta {
    padding: 10px 0 0;
}
}


/* Featured Product Section - 4	*/
.featured-secton-wrap-block-4 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
}
.featured-secton-wrap-block-4 .wrap-featured-4 {
    width: calc(25% - 20px);
    margin: 0;
}
.featured-secton-wrap-block-4 .wrap-featured-4 .grid__item.medium-up--one-half.product-single__sticky {
  width: 100%;
  position: inherit;
}
.featured-secton-wrap-block-4 .wrap-featured-4 .grid__item.medium-up--one-half {
  width: 100%;
}

.featured-secton-wrap-block-4 .wrap-featured-4 .page-content.page-content--product .page-width {
  padding: 0;
}
.featured-secton-wrap-block-4 .wrap-featured-4 .grid__item.medium-up--one-half.product-single__sticky .product__thumbs {
  display: none;
}
.featured-secton-wrap-block-4 .wrap-featured-4 .grid__item.medium-up--one-half .product-single__meta {
  padding: 0;
  padding-top: 50px;
}
.featured-secton-wrap-block-4 .wrap-featured-4 .grid__item.medium-up--one-half .product-single__meta h1.h2.product-single__title {
  font-size: 24px;
}
.featured-secton-wrap-block-4 .wrap-featured-4 .page-content.page-content--product {
  padding: 0;
}
.featured-secton-wrap-block-main-4 {
    padding: 60px 0 40px;
    background-color: {{ settings.product_featured_bg }};
}
.custom-product-reviews-block {
    margin-bottom: 10px;
}
.featured-secton-wrap-block-4 .wrap-featured-4 .product-label-block {
    position: absolute;
    top: 0;
    padding: 5px 10px;
    font-size: 14px;
    text-transform: uppercase;
}
.featured-secton-wrap-block-4 .wrap-featured-4 .product-label-block p {
    margin: 0;
}
.featured-secton-wrap-block-4 .wrap-featured-4 .grid--product-images--partial {
    position: relative;
}
@media only screen and (max-width:768px){
.featured-secton-wrap-block-4 .wrap-featured-4 {
  width: calc(50% - 20px);
  margin:0;
}
.featured-secton-wrap-block-4 .wrap-featured-4 .grid__item.medium-up--one-half .product-single__meta {
    text-align: left;
}
}

.featured-secton-wrap-block-4 .image-wrap .animate-me, 
.featured-secton-wrap-block-4 .image-wrap .lazyloaded:not([role=presentation]), 
.featured-secton-wrap-block-4 .image-wrap svg 
{
    animation: fade-in 1s cubic-bezier(.26,.54,.32,1) 0s forwards;
}

/*
@media only screen and (min-width:768px){
  .featured-secton-wrap-block-4 .flickity-viewport
  {
  	height: 335px !important;
  }
}
*/
@media only screen and (max-width:767px){
.featured-secton-wrap-block-4 .wrap-featured-4 .grid__item.medium-up--one-half .product-single__meta {
    padding: 10px 0 0;
}
}



/***Custom Slider***/
.custom-slider { padding: 50px 0;}
.custom-slider-inner {   margin: 0 auto;}
.custom-slider-slide { width: 100%;}
.custom-slider-image img { object-fit: cover; width: 100%;  object-position: center;}
.custom-slider-text { text-align: center; margin-top: 20px;}

@media(max-width:768px){
  .mbl{display:block;}
  .dsk{display:none;}
  .custom-slider-inner { margin: 0 auto; max-width: 100% !important;}
   } 

@media(min-width:769px){
  .mbl{display:none;}
  .dsk{display:block;}
  .custom-slider-inner { margin: 0 auto; max-width: 100% !important;}
   } 

.static-marquee-header {
    justify-content: center;
}
.static-marquee-header ul.logoSlider-static li {
    font-size: 16px;
    font-weight: 600;
}

.sales-point-block.product-block.product-block--sales-point ul.sales-points span.icon-and-text span {
    font-size: 14px;
}
.inventory--preorder .icon--inventory:after, .inventory--preorder .icon--inventory:before {
    background: red;
}
/* Promotion Grid Mobile*/
.mobile-promotion-grid-block .slick-list { padding:0 25% 0 0 !important;}
.mobile-promotion-grid-block .slick-arrow 
{ 
background: rgb(255,255,255,0.8);
border-radius: 50%;
}
.mobile-promotion-grid-block .slick-arrow:hover 
{
background: rgb(255,255,255,1);  
}
.mobile-promotion-grid-block .slick-arrow:before
{
    font-family:roboto;
    color: #000;
    opacity:1;
}
.mobile-promotion-grid-block .slick-prev 
{
  left: 20px;  
}
.mobile-promotion-grid-block .slick-next 
{
  right: 20px;  
}

@media only screen and (min-width: 481px) and (max-width: 767px)
{
 .mobile-promotion-grid-block .promo-grid__container { min-height:420px }
}
@media only screen and (min-width: 361px) and (max-width: 480px)
{
 .mobile-promotion-grid-block .promo-grid__container { min-height:320px }
}
@media only screen and (max-width: 360px)
{
 .mobile-promotion-grid-block .promo-grid__container { min-height:260px }
}
body:not(.template-collection) .modal-quick-container > .quick-close {
  display: none;
}
@media screen and (min-width: 1165px) and (max-width: 1234px) {
  .site-nav__link {
    padding: 7.5px 10px;
  }
}
@media screen and (min-width: 1070px) and (max-width: 1164px) {
  .site-nav__link {
    padding: 7.5px 4px;
  }
}
.above-product-title {
  font-weight: 600;
  letter-spacing: normal;
  line-height: normal;
}
#AnnouncementSlider[data-compact="false"] > .announcement-slider__slide > .announcement-text {
  display: inline-block;
  vertical-align: middle;
}
#AnnouncementSlider[data-enabled-slide="false"][data-compact=false] {
  display: flex;
  max-width: 700px;
  justify-content: space-between;
  margin: auto;
}
#AnnouncementSlider[data-enabled-slide="false"][data-compact=false] .announcement-slider__slide {
  max-width: 33%;
  width: auto;
  flex: unset;
  flex-grow: 0;
  padding: 0 1rem;
} 
#AnnouncementSlider[data-enabled-slide="false"][data-compact=false] > .announcement-slider__slide > .announcement-text {
  display: inline-block;
  vertical-align: middle;
}
#AnnouncementSlider[data-enabled-slide="false"][data-compact=false] > .announcement-slider__slide {
  display: flex;
  gap: 4px;
}
@media screen and (max-width: 768px) {
  #AnnouncementSlider[data-enabled-slide=false][data-compact=false] > .announcement-slider__slide {
      display: flex;
      align-items: center;
      display: flex;
      flex-grow: 0;
      margin-right: .75rem;
      max-width: 33%;
      padding: 0;
  }
  #AnnouncementSlider[data-enabled-slide=false][data-compact=false] > .announcement-slider__slide > .announcement-text {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    padding-left: 1rem;
  }
}
.cart__checkout-wrapper.d-flex {
    margin-top: 20px;
    display: flex;
    gap: 1rem;
}
.announcement-image {
  min-width: 20px;
}
.announcement-image img {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/***********************************************************************************/
.DynamicAccordion_Tab_Details.active {
transition: max-height .5s ease;
max-height: 40px;
}
.DynamicAccordion_Tab_Details.active {
position: relative;
}
.DynamicAccordion_Tab_Details {
transition: max-height .5s ease;
overflow: hidden;
max-height: 1000px;
padding: 0;
border: none;
color: #333;
margin-top: -3rem;
}
.DynamicAccordion_Tab_Details::after {
opacity: 0;
}
.DynamicAccordion_Tab_Details.active::after {
content: " ";
display: block;
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 76px;
background-image: linear-gradient(0, #FFFFFF, rgba(248,248,248,0));
opacity: 1;
transition: opacity .3s ease;
pointer-events: none;
}
.DynamicAccordion_Tab_Footer {
display: block;
}
.DynamicAccordion_Tab_Footer > span, 
.DynamicAccordion_Tab_Footer footer > span {
display: inline-block;
margin: 4px 0 6px 0;
padding: 0 10px;
border: 1px solid #e15a1d;
color: #e15a1d;
border-radius: 4px;
font-size: 13px;
line-height: 29px;
cursor: pointer;
user-select: none;
font-weight: bold;
}
.DynamicAccordion_Tab_Footer .open {
display: none;
}
.DynamicAccordion_Tab_Footer.active .open {
display: inline-block;
}
.DynamicAccordion_Tab_Footer.active .closed {
display: none;
}

@media screen and (min-width: 768px) {
.DynamicAccordion_Tab_Footer {
margin-bottom: 1rem;
}
}

/* Expand text*/
#expand-content {
    width: 98%;
    margin: auto;
    padding: 20px;
  
}

#expand-content a {
    color: blue;
    text-decoration: none;
    cursor: pointer;
}

#expand-content a:hover {
    text-decoration: underline;
}

/* Font Sizes for Mobile 
  @media screen and (max-width: 768px) {
    .h2, h2 {
      font-size: 18px !important;;
      line-height: 1.2 !important;;
    }
    h1, h1 {
      font-size: 22px !important;;
      line-height: 1.2 !important;;
    }
  }
*/
/* Hide Quick View Button Collections Page */
.quick-product__btn {
  display:none !important; 
}

/* CD Sanket  */
.read_more_less{height: 290px; overflow: hidden;}
.product_description_read_more_text { text-decoration: underline; cursor: pointer; font-weight: 600;}
.cart__checkout-wrapper .view-cart{ background-color: transparent; border: 1px solid #6fa836; color: #333;}
@media screen and (max-width: 767px){
.read_more_less{ height: 500px;}
.header-layout .header-item--logo{ justify-content: center; width: 100%; flex: auto;}
}

/* CD Shubham */
.custom-collection-header-image{ height: 150px;}

/* CD code */
.showing_option_on_grid .variant-input-wrap .swatches-label { margin: 6px 0; }
.showing_option_on_grid .variant-input-wrap label {margin-bottom: 4px;}

.bundle_product_opener { position: fixed; top: 80%; transform: translateY(-50%); right: 2%; z-index: 2; box-shadow: 0 0 5px #000; background-color: #ffffff; border-radius: 5px; padding: 2px 4px; cursor: pointer; transition: 0.35s; }
.bundle_product_opener:hover { box-shadow: 0 0 10px #000; }

.select_ATC_variant_main .qty_ATC_inner { background-color: #333; border-radius: 50px; color: #fff; text-align: center; }
.select_ATC_variant_main .qty_ATC_inner .qty_btn_inner { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
.select_ATC_variant_main .qty_ATC_inner>* { padding: 8px 14px; }
.select_ATC_variant_main .qty_ATC_inner * { font-size: 16px; font-weight: bold; cursor: pointer; vertical-align: middle;}
.select_ATC_variant_main .qty_ATC_inner.qty_hide .qty_btn_inner, 
.select_ATC_variant_main .qty_ATC_inner:not(.qty_hide ) .atc_btn_JS{ display: none !important; }
.select_ATC_variant_main .qty_ATC_inner .atc_btn_JS { transition: all .3s linear; cursor: pointer; }
.select_ATC_variant_main .qty_ATC_inner svg { width: 12px; height: auto; }

.bundle_popup_content {background-color: #f2f2f2; padding: 5px;}
.bundle_popup_content:not(.sidebar_active) {position: fixed; top: 80%; transform: translateY(-50%); right: -100%; background-color: #fff; z-index: 999; width: 100%; max-width: 500px; transition: 0.5s; border: 1px solid #1433a3;}
.bundle_popup_content.active:not(.sidebar_active) {right: 0;}
.bundle_popup_content .bundle_popup_box .bundle_popup_header { padding: 10px; /* background-color: #1433a3; color: #fff; */ display: flex; flex-wrap: nowrap; align-items: center; }
.bundle_popup_content .bundle_popup_box .bundle_popup_header .popup_title { flex: 1; text-align: center; font-weight: bold; }
.bundle_popup_content .bundle_popup_box .close{ cursor: pointer; }
.bundle_popup_content .bundle_popup_box .close svg { width: 20px; height: auto; vertical-align: middle; fill: #fff; }
.bundle_popup_content .bundle_popup_box .bundle_popup_data_inner { padding: 10px; display: flex; flex-direction: column; gap: 10px; height: 100%; max-height: 100px; overflow: auto;}
.bundle_popup_content .bundle_popup_box .bundle_popup_data_inner .cart_item_inner { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; line-height: normal; }
.bundle_popup_content .bundle_popup_box .bundle_popup_data_inner .cart_item_inner .cart_item_price_remove { flex: 0 auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; }
.bundle_popup_content .bundle_popup_box .bundle_popup_data_inner .cart_item_inner .cart_item_title {flex: 1;}
.bundle_popup_content .bundle_popup_box .bundle_popup_data_inner .cart_item_inner .cart_item_price { display: flex; flex-direction: column; gap: 2px; }
.bundle_popup_content .bundle_popup_box .bundle_popup_data_inner .cart_item_inner .cart_item_remove { cursor: pointer; }
.bundle_popup_content .bundle_popup_box .bundle_popup_data_inner .cart_item_inner .cart_item_remove svg { width: 16px; height: auto; vertical-align: middle; }
.bundle_popup_content .bundle_popup_box .bundle_popup_final { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 10px; border-top: 3px solid #8696b7; /* background-color: #1433a3; color: #fff; */ } 
.bundle_popup_content .bundle_popup_box .bundle_popup_final * { font-size: 14px; } 
.bundle_popup_content .bundle_popup_box .bundle_popup_final .cart_drawer { padding: 6px 16px; letter-spacing: 1px; }
.bundle_popup_content .bundle_popup_box .bundle_popup_final .cart_drawer_open_JS.disabled { cursor: not-allowed; }

.collection-content.bundle_page_main .collection-grid__wrapper .grid.grid--uniform { display: flex; flex-wrap: wrap; }
.collection-content.bundle_page_main .collection-grid__wrapper .grid.grid--uniform .grid-product { display: flex; flex-direction: column; }
.collection-content.bundle_page_main .collection-grid__wrapper .grid.grid--uniform .grid-product .select_ATC_variant_main { display: flex; flex-wrap: nowrap; align-items: flex-end; flex: 1; }
.collection-content.bundle_page_main .collection-grid__wrapper .grid.grid--uniform .grid-product .select_ATC_variant_main .qty_ATC_inner { width: 100%; }

@media screen and (min-width: 769px) {
  .collection-content.bundle_page_main #CollectionAjaxContent .page-width>.grid {display: flex;flex-wrap: wrap;gap: 20px;margin: 0;}
  .collection-content.bundle_page_main #CollectionAjaxContent .page-width>.grid .grid__item--sidebar { display: none; }
  .collection-content.bundle_page_main #CollectionAjaxContent .page-width>.grid .bundle_popup_content_main_inner { width: calc(25% - 10px); }
  .collection-content.bundle_page_main #CollectionAjaxContent .page-width>.grid .grid__item--content { width: calc(75% - 10px); margin: 0; padding: 0; }
  .bundle_popup_content.sidebar_active { position: sticky; top: 0; /* border-left: 1px solid #1433a3; border-right: 1px solid #1433a3; */ }
  .bundle_popup_content.sidebar_active .bundle_popup_box .bundle_popup_data_inner { max-height: 60vh; }
}

@media screen and (max-width: 768px){
  .bundle_popup_content.sidebar_active {position: fixed; left: 50%; transform: translateX(-50%); bottom: -100%; background-color: #fff; width: calc(100% - 20px); max-width: 500px; transition: 0.5s; border: 1px solid #1433a3; z-index: 2;}
  .bundle_popup_content.sidebar_active.active {bottom: 75px;}
  .bundle_popup_content.sidebar_active .bundle_popup_box .bundle_popup_data_inner { max-height: 50vh; }
  .bundle_opener_btn {position: fixed; bottom: -100%; left: 50%; transform: translateX(-50%); width: calc(100% - 20px); background-color: #6fa836; color: #fff; padding: 10px; font-weight: 600; transition: 0.35s; display: flex; align-items: center; justify-content: center; gap: 4px;z-index: 2; } 
  .bundle_opener_btn.show_button { bottom: 10px; }
  .bundle_opener_btn .arrow { width: 100%; max-width: 14px; font-size: 0; transition: 0.35s; }
  .bundle_opener_btn.show_button.active .arrow {transform: scale(-1);}
  .bundle_opener_btn .arrow svg { width: 100%; height: auto; vertical-align: middle; }
  .bundle_opener_btn .arrow svg path { fill: #fff; }
  .bundle_page_main .color-swatch {width: 0; height: 0; padding: 15px; margin-left: 1px !important; margin-right: 1px !important;}
  .select_ATC_variant_main .qty_ATC_inner>* { padding: 8px; }
  .pre-order-txt {font-size: 12px !important;}
}

@media screen and (max-width: 520px){
  .bundle_page_main .color-swatch{padding: 8px; margin-left: 1px !important; margin-right: 1px !important;}
  .bundle_page_main .color-swatch:before{bottom: -2px; left: -2px; right: -2px; top: -2px;}  
}


/* Safari Colour Swatch Fix */
.variant-input-wrap label{
  box-shadow: none;
}
.variant-input-wrap input[type=radio]:checked+label{
  outline: 2px solid var(--colorTextBody);
  box-shadow: none;
}
.color-swatch {
    transition: outline .1s ease;
}


.title-price-wrap, .title-price-wrap-mobile{
  display: flex;
  flex-wrap: wrap;
}


.title-price-wrap-mobile .product-block--header, .title-price-wrap .product-block--header{
  width: 70%;
  margin-top: -3px;
}

.title-price-wrap-mobile .product-block--price, .title-price-wrap .product-block--price{
  width: 30%;
}


.new-product-template .product-single__title{
  margin-bottom: 5px;
}


.new-product-template .product__price--compare, .new-product-template .product__price.on-sale{
   padding-right: 0px;
}

.new-product-template .product__price{
   margin-right: 0px;
}


@media screen and (min-width: 769px) {
.template-product .product-single__title{
  font-size: 30px;
}

.new-product-template .junip-product-summary-star{
      width: 19px;
    }
    .new-product-template .junip-product-summary-review-count {
    font-size: 16px;
}
}

@media screen and (max-width: 768px) {
    .new-product-template .product-single__title {
        font-size: 24px;
    }
    .new-product-template .junip-product-summary-star{
      width: 18px;
    }
    .new-product-template .junip-product-summary-review-count {
    font-size: 15px;
}
}

.title-price-wrap .product-block,
.title-price-wrap-mobile .product-block{
   margin-bottom: 0px;
}
.title-price-wrap-mobile{
margin: 15px 0px 10px;
}

.title-price-wrap .product-block--price,
.title-price-wrap-mobile .product-block--price{
  margin-top: 0px;
}

.title-price-wrap-mobile .product__price{
  float: right;
}

@media screen and (min-width: 768px){
.title-price-wrap-mobile{
   display: none;
}
}


@media screen and (max-width: 768px){
.title-price-wrap-mobile{
   text-align: left;
}
.title-price-wrap{
  display: none;
}
}



.new-product-template .product-block--price{
  display: flex;
  flex-direction: column;
  text-align: right;
}
/* VARIANT LABEL CUSTOMIZATIONS */
.product label:not(.variant__button-label):not(.text-label),
.product .label,
#ProductSection label:not(.variant__button-label):not(.text-label),
#ProductSection .label,
[data-section-type="product"] label:not(.variant__button-label):not(.text-label),
[data-section-type="product"] .label {
  font-size: 0.8em !important;
  letter-spacing: 0 !important;  /* Remove character spacing */
  text-transform: capitalize !important;
}

/* Also target variant labels specifically */
label.variant__label {
  letter-spacing: 0 !important;
}

/* Target any label in the variant wrapper */
.variant-wrapper label {
  letter-spacing: 0 !important;
}

/* =============================================================
   BUNDLE BUILDER
   Section: sections/bundle-builder.liquid
   JS: assets/bundle-builder.js (loaded in theme.liquid)
   Version: 1.2
   All styles scoped to .bb-* — zero collision risk with theme.
   ============================================================= */

/* ─── Visually hidden utility (for radio inputs) ──────────────────────── */
.bb-section .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION WRAPPER
═══════════════════════════════════════════════════════════════════════ */
.bb-section {
  padding: 40px 0 60px;
  position: relative;
}

.bb-no-collection-warning {
  padding: 40px 20px;
  text-align: center;
  background: #fff8e1;
  border: 1px dashed #f0c040;
  border-radius: 8px;
  margin: 20px;
}

/* ── Section header ── */
.bb-section-header {
  text-align: center;
  margin-bottom: 32px;
  padding: 0 20px;
}

.bb-heading {
  font-family: var(--typeHeaderPrimary, var(--typeBasePrimary, serif));
  font-size: clamp(24px, 4vw, 36px);
  font-weight: var(--typeHeaderWeight, 700);
  letter-spacing: var(--typeHeaderSpacing, -0.02em);
  color: var(--colorTextBody, #1a1a1a);
  margin: 0 0 8px;
}

.bb-subheading {
  font-size: 16px;
  color: var(--colorTextBody, #1a1a1a);
  opacity: 0.7;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT: GRID + SIDEBAR
═══════════════════════════════════════════════════════════════════════ */
.bb-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
  overflow: visible;
}

/* Prevent sidebar from overflowing viewport */
.bb-sidebar {
  min-width: 0;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   TIER BADGES (above grid)
═══════════════════════════════════════════════════════════════════════ */
.bb-tier-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.bb-tier-heading {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--colorTextBody, #1a1a1a);
  opacity: 0.6;
  margin-right: 4px;
}

.bb-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--colorBg2, #f3f3f3);
  border: 1px solid var(--colorBorder, #e0e0e0);
  border-radius: 20px;
  font-size: 13px;
  color: var(--colorTextBody, #1a1a1a);
}

.bb-tier-badge strong {
  color: var(--colorBtnPrimary, #1a1a1a);
}

.bb-tier-badge-label {
  background: var(--colorBtnPrimary, #1a1a1a);
  color: var(--colorBtnPrimaryText, #fff);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 10px;
}

/* ── Flash message ── */
.bb-flash-message {
  display: none;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 12px;
}

.bb-flash-message--visible {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT GRID
═══════════════════════════════════════════════════════════════════════ */
.bb-grid {
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bb-grid--2col { grid-template-columns: repeat(2, 1fr); }
.bb-grid--3col { grid-template-columns: repeat(3, 1fr); }
.bb-grid--4col { grid-template-columns: repeat(4, 1fr); }

/* ═══════════════════════════════════════════════════════════════════════
   PRODUCT CARD
═══════════════════════════════════════════════════════════════════════ */
.bb-card {
  background: var(--colorCardBg, #fff);
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.bb-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* Active state when items have been staged from this card */
.bb-card--added {
  border-color: var(--colorBtnPrimary, #1a1a1a);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

.bb-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Card image ── */
.bb-card-image-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--colorBg2, #f5f5f5);
  aspect-ratio: 1 / 1;
}

.bb-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

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

.bb-card-img-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--colorBg2, #f0f0f0);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Badges ── */
.bb-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 2;
}

.bb-card-badge--sale {
  background: var(--colorSaleBadge, #e53935);
  color: #fff;
}

.bb-card-badge--soldout {
  background: rgba(0,0,0,0.5);
  color: #fff;
}

/* ── Card info ── */
.bb-card-info {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.bb-card-reviews {
  line-height: 1;
}

.bb-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--colorTextBody, #1a1a1a);
  text-decoration: none;
  line-height: 1.3;
}

.bb-card-title:hover {
  text-decoration: underline;
}

.bb-card-price {
  font-size: 14px;
  color: var(--colorTextBody, #1a1a1a);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bb-card-price-compare {
  text-decoration: line-through;
  opacity: 0.5;
  font-size: 13px;
}

.bb-card-price-current {
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   VARIANT SELECTOR
═══════════════════════════════════════════════════════════════════════ */
.bb-variants {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bb-variant-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bb-variant-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--colorTextBody, #1a1a1a);
  opacity: 0.7;
}

.bb-variant-selected-label {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.bb-variant-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Text buttons (size, etc.) — only applies to non-swatch options ── */
.bb-variant-label-el {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--colorBorder, #d0d0d0);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--colorCardBg, #fff);
  color: var(--colorTextBody, #1a1a1a);
  user-select: none;
}

/* Swatch labels: no border/padding — the inner span handles all visual styling */
.bb-variant-inputs--swatches .bb-variant-label-el {
  display: inline-block;
  border: none;
  background: none;
  padding: 0;
  min-width: unset;
  height: auto;
  border-radius: 0;
  cursor: pointer;
}

.bb-variant-label-el:hover {
  border-color: var(--colorTextBody, #1a1a1a);
}

/* Text option selected state */
.bb-variant-inputs:not(.bb-variant-inputs--swatches) .bb-variant-input:checked + .bb-variant-label-el {
  border-color: var(--colorTextBody, #1a1a1a);
  border-width: 2px;
  background: var(--colorTextBody, #1a1a1a);
  color: var(--colorCardBg, #fff);
}

/* ── Colour swatches — let Impulse's color-swatch class handle rendering ──
   We only handle the selected state (checked radio → tag--active equivalent)
   and unavailable state. Impulse's theme.css sets size, background, box-shadow.
   custom.css already overrides size to 26px sitewide — we match that.
── */

/* Selected state — input:checked → sibling label → child span.color-swatch */
.bb-variant-input:checked + .bb-variant-label-el .color-swatch {
  box-shadow: 0 0 0 2px var(--colorTextBody, #1a1a1a) !important;
}

/* Hover state */
.bb-variant-input-wrap:hover .color-swatch {
  box-shadow: 0 0 0 1px var(--colorTextBody, #1a1a1a);
}

/* Unavailable — strike-through diagonal */
.bb-variant--unavailable {
  opacity: 0.4;
  cursor: not-allowed;
  position: relative;
}

.bb-variant--unavailable::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--colorTextBody, #1a1a1a);
  transform: rotate(-45deg);
  opacity: 0.4;
  z-index: 3;
}

/* ═══════════════════════════════════════════════════════════════════════
   ADD TO BUNDLE BUTTON + STEPPER
═══════════════════════════════════════════════════════════════════════ */
.bb-atc-btn {
  width: 100%;
  padding: 11px 16px;
  background: var(--colorBtnPrimary, #1a1a1a);
  color: var(--colorBtnPrimaryText, #fff);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
  margin-top: auto;
  letter-spacing: 0.02em;
}

.bb-atc-btn:hover:not(:disabled) {
  opacity: 0.88;
  transform: translateY(-1px);
}

.bb-atc-btn:disabled,
.bb-atc-btn--soldout {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ── Qty Stepper ── */
.bb-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  border: 2px solid var(--colorBtnPrimary, #1a1a1a);
  border-radius: 6px;
  overflow: hidden;
  margin-top: auto;
}

.bb-qty-minus,
.bb-qty-plus {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
  color: var(--colorTextBody, #1a1a1a);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.bb-qty-minus:hover,
.bb-qty-plus:hover {
  background: var(--colorBg2, #f5f5f5);
}

.bb-qty-display {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--colorTextBody, #1a1a1a);
}

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════════════ */
.bb-sidebar {
  position: sticky;
  top: 20px;
  align-self: start;
}

.bb-sidebar-inner {
  background: var(--colorCardBg, #fff);
  border: 1px solid var(--colorBorder, #e8e8e8);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bb-sidebar-title {
  font-family: var(--typeHeaderPrimary, serif);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--colorTextBody, #1a1a1a);
}

/* ── Tier rows ── */
.bb-sidebar-tiers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--colorBorder, #e8e8e8);
  padding-top: 12px;
}

.bb-tier-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--colorTextBody, #1a1a1a);
  opacity: 0.55;
  background: transparent;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.bb-tier-row--active {
  opacity: 1;
  background: var(--colorBg2, #f3f3f3);
  border-color: var(--colorBtnPrimary, #1a1a1a);
}

.bb-tier-row-badge {
  display: inline-block;
  background: var(--colorBtnPrimary, #1a1a1a);
  color: var(--colorBtnPrimaryText, #fff);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 8px;
  margin-right: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.bb-tier-row {
  flex-wrap: nowrap;
  gap: 4px;
}

.bb-tier-row-label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.bb-tier-row-pct {
  font-weight: 700;
}

/* ── Progress bar ── */
.bb-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bb-progress-bar {
  height: 6px;
  background: var(--colorBorder, #e8e8e8);
  border-radius: 3px;
  overflow: hidden;
}

.bb-progress-fill {
  height: 100%;
  background: var(--colorBtnPrimary, #1a1a1a);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.bb-progress-text {
  font-size: 12px;
  color: var(--colorTextBody, #1a1a1a);
  opacity: 0.7;
  margin: 0;
  line-height: 1.4;
}

/* ── Items list ── */
.bb-sidebar-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  border-top: 1px solid var(--colorBorder, #e8e8e8);
  padding-top: 12px;
}

.bb-sidebar-empty {
  font-size: 13px;
  color: var(--colorTextBody, #1a1a1a);
  opacity: 0.5;
  margin: 0;
  line-height: 1.5;
  text-align: center;
  padding: 8px 0;
}

.bb-sidebar-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
}

.bb-sidebar-item-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.bb-sidebar-item-title {
  color: var(--colorTextBody, #1a1a1a);
  line-height: 1.3;
  word-break: break-word;
}

.bb-sidebar-item-qty {
  font-size: 12px;
  opacity: 0.6;
}

.bb-sidebar-item-price {
  font-weight: 600;
  color: var(--colorTextBody, #1a1a1a);
  white-space: nowrap;
}

/* ── Pricing rows ── */
.bb-sidebar-pricing {
  border-top: 1px solid var(--colorBorder, #e8e8e8);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bb-pricing-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--colorTextBody, #1a1a1a);
}

.bb-pricing-row--total {
  font-weight: 700;
  font-size: 16px;
  padding-top: 6px;
  border-top: 1px solid var(--colorBorder, #e8e8e8);
}

.bb-pricing-discount {
  color: #2e7d32;
  font-weight: 600;
}

.bb-discount-note {
  font-size: 11px;
  opacity: 0.55;
  margin: 4px 0 0;
  line-height: 1.4;
  font-style: italic;
}

/* ── Finalise CTA ── */
.bb-finalise-btn {
  width: 100%;
  padding: 14px 16px;
  background: var(--colorBtnPrimary, #1a1a1a);
  color: var(--colorBtnPrimaryText, #fff);
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.bb-finalise-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.bb-finalise-btn--ready:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.bb-finalise-btn--loading {
  opacity: 0.6;
  cursor: wait;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM BAR
═══════════════════════════════════════════════════════════════════════ */
.bb-mobile-bar {
  display: none; /* only shown on mobile via media query below */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--colorCardBg, #fff);
  border-top: 1px solid var(--colorBorder, #e8e8e8);
  padding: 12px 16px;
  /* Must be above theme elements (2147483647) and Reamaze chat (2147483647)
     but below Unicorn cart drawer (9999) — we use 10000 to sit just above Unicorn */
  z-index: 2147483647;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

/* On mobile the bar is ALWAYS visible — not dependent on item count */
@media (max-width: 768px) {
  .bb-mobile-bar {
    display: block;
  }
}

/* Subtle inactive state when nothing staged yet */
.bb-mobile-bar:not(.bb-mobile-bar--visible) .bb-mobile-bar-info {
  opacity: 0.5;
}

.bb-mobile-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}

.bb-mobile-bar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bb-mobile-bar-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--colorTextBody, #1a1a1a);
  display: flex;
  align-items: center;
  gap: 6px;
}

.bb-mobile-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--colorBtnPrimary, #1a1a1a);
  color: var(--colorBtnPrimaryText, #fff);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

.bb-mobile-total {
  font-size: 12px;
  opacity: 0.65;
  color: var(--colorTextBody, #1a1a1a);
}

.bb-finalise-btn--mobile {
  width: auto;
  padding: 12px 20px;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE DRAWER
═══════════════════════════════════════════════════════════════════════ */
.bb-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2147483646;
}

.bb-mobile-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--colorCardBg, #fff);
  border-radius: 16px 16px 0 0;
  z-index: 2147483647;
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bb-mobile-drawer--open {
  transform: translateY(0);
}

.bb-mobile-drawer--open ~ .bb-drawer-overlay,
.bb-drawer-overlay:has(~ .bb-mobile-drawer--open) {
  display: block;
}

/* Fix: show overlay when drawer is open */
.bb-mobile-drawer--open + .bb-drawer-overlay,
.bb-section:has(.bb-mobile-drawer--open) .bb-drawer-overlay {
  display: block;
}

.bb-mobile-drawer-inner {
  padding: 20px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bb-mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bb-drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--colorTextBody, #1a1a1a);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.bb-drawer-close:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   PAGE SUMMARY SECTION
═══════════════════════════════════════════════════════════════════════ */
.bb-summary-section-wrapper {
  padding: 40px 0;
}

.bb-summary-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
}

.bb-summary-heading {
  font-family: var(--typeHeaderPrimary, serif);
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 700;
  color: var(--colorTextBody, #1a1a1a);
  margin: 0 0 6px;
  text-align: center;
}

.bb-summary-subheading {
  text-align: center;
  font-size: 15px;
  opacity: 0.65;
  color: var(--colorTextBody, #1a1a1a);
  margin: 0 0 28px;
}

.bb-summary-body {
  background: var(--colorCardBg, #fff);
  border: 1px solid var(--colorBorder, #e8e8e8);
  border-radius: 12px;
  overflow: hidden;
}

.bb-summary-list {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bb-summary-empty {
  text-align: center;
  opacity: 0.5;
  font-size: 14px;
  color: var(--colorTextBody, #1a1a1a);
  padding: 12px 0;
  margin: 0;
}

.bb-summary-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bb-summary-section-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--colorTextBody, #1a1a1a);
  opacity: 0.6;
  margin: 0 0 4px;
}

.bb-summary-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--colorTextBody, #1a1a1a);
  gap: 12px;
}

.bb-summary-item-name {
  flex: 1;
  min-width: 0;
}

.bb-summary-item-price {
  font-weight: 600;
  white-space: nowrap;
}

.bb-summary-discount-note {
  font-size: 12px;
  color: #2e7d32;
  font-weight: 600;
}

.bb-summary-section-subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  padding-top: 8px;
  border-top: 1px dashed var(--colorBorder, #e8e8e8);
  color: var(--colorTextBody, #1a1a1a);
  opacity: 0.75;
}

.bb-summary-totals {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--colorBorder, #e8e8e8);
  background: var(--colorBg2, #fafafa);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .bb-layout {
    grid-template-columns: 1fr 260px;
    gap: 20px;
  }

  .bb-grid--4col {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  /* Stack layout — sidebar hides, mobile bar takes over */
  .bb-layout {
    grid-template-columns: 1fr;
  }

  .bb-sidebar {
    display: none;
  }

  .bb-grid--3col,
  .bb-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Padding so last card isn't hidden behind the fixed mobile bar (approx 70px) */
  .bb-grid-wrap {
    padding-bottom: 100px;
  }

  .bb-section {
    padding-bottom: 0;
  }

  /* Drawer overlay shown when drawer is open */
  .bb-mobile-drawer--open ~ .bb-drawer-overlay {
    display: block;
  }
}

@media (max-width: 480px) {
  .bb-grid--2col,
  .bb-grid--3col,
  .bb-grid--4col {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .bb-layout {
    padding: 0 12px;
  }

  .bb-card-info {
    padding: 10px;
    gap: 6px;
  }

  .bb-card-title {
    font-size: 13px;
  }

  .bb-tier-badges {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.1 CARD EXTRAS
═══════════════════════════════════════════════════════════════════════ */

/* ── Metafield label badge ── */
.bb-card-badge--meta {
  background: var(--colorTextBody, #1a1a1a);
  color: var(--colorCardBg, #fff);
}

/* ── Metafield message ── */
.bb-card-message {
  font-size: 12px;
  color: var(--colorTextBody, #1a1a1a);
  opacity: 0.6;
  margin: 0;
  line-height: 1.4;
  min-height: 1.4em;
}

.bb-card-message--spacer {
  visibility: hidden;
}

/* ── View product link (always-on) ── */
.bb-card-product-link {
  display: inline-block;
  font-size: 12px;
  color: var(--colorTextBody, #1a1a1a);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.6;
  transition: opacity 0.15s;
  margin-top: 2px;
}

.bb-card-product-link:hover {
  opacity: 1;
}

/* ── Learn More toggle ── */
.bb-learn-more {
  border-top: 1px solid var(--colorBorder, #e8e8e8);
  padding-top: 10px;
  margin-top: 4px;
  position: relative;
}

.bb-learn-more-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  gap: 8px;
}

.bb-learn-more-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--colorTextBody, #1a1a1a);
}

.bb-learn-more-icon {
  flex-shrink: 0;
  color: var(--colorTextBody, #1a1a1a);
  transition: transform 0.2s ease;
}

.bb-learn-more-btn[aria-expanded="true"] .bb-learn-more-icon {
  transform: rotate(45deg);
}

/* ── Learn More panel ── */
.bb-learn-more-panel {
  margin-top: 10px;
  background: var(--colorBg2, #f7f7f5);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bb-learn-more-panel[hidden] {
  display: none;
}

.bb-learn-more-content {
  font-size: 13px;
  color: var(--colorTextBody, #1a1a1a);
  line-height: 1.6;
  opacity: 0.85;
}

/* Handle richtext output — paragraphs, lists */
.bb-learn-more-content p {
  margin: 0 0 6px;
}

.bb-learn-more-content p:last-child {
  margin-bottom: 0;
}

.bb-learn-more-content ul,
.bb-learn-more-content ol {
  padding-left: 16px;
  margin: 4px 0;
}

.bb-learn-more-content li {
  margin-bottom: 3px;
  font-size: 13px;
  line-height: 1.5;
}

.bb-view-product-link {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--colorTextBody, #1a1a1a);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s;
}

.bb-view-product-link:hover {
  opacity: 0.7;
}

/* ── Card height consistency when message shown ── */
.bb-card-info {
  /* Ensures cards in the same row align at the ATC button */
  justify-content: flex-start;
}

/* ── Swatch image rendering ──
   Neutralise Impulse's ::before and ::after overlays.
   Impulse uses ::before to draw an inset border which covers the image.
   On unavailable variants it draws a diagonal via ::after.
   We handle both states ourselves via box-shadow and opacity.
── */
.bb-swatch::before,
.bb-swatch::after {
  display: none !important;
  content: none !important;
}

/* Also target when inside our unavailable label */
.bb-variant--unavailable .bb-swatch::before,
.bb-variant--unavailable .bb-swatch::after {
  display: none !important;
  content: none !important;
}

.bb-swatch {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

.bb-swatch[data-swatch-name="white"],
.bb-swatch[data-swatch-name="pearl"],
.bb-swatch[data-swatch-name="cream"],
.bb-swatch[data-swatch-name="ivory"],
.bb-swatch[data-swatch-name="pebble"] {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.2 COLOUR PICKER MODAL
═══════════════════════════════════════════════════════════════════════ */

/* ── Modal trigger button on card ── */
.bb-modal-trigger {
  width: 100%;
  padding: 11px 16px;
  background: var(--colorBtnPrimary, #1a1a1a);
  color: var(--colorBtnPrimaryText, #fff);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
  margin-top: auto;
  text-align: center;
  letter-spacing: 0.01em;
}

.bb-modal-trigger:hover {
  opacity: 0.85;
}

/* Selected state — shows confirmation text */
.bb-modal-trigger--selected {
  background: transparent;
  color: var(--colorTextBody, #1a1a1a);
  border: 2px solid var(--colorTextBody, #1a1a1a);
  font-size: 13px;
}

.bb-modal-trigger--selected:hover {
  opacity: 0.7;
}

/* ── Backdrop ── */
.bb-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2147483640;
}

.bb-modal-backdrop--visible {
  display: block;
}

/* ── Modal container ── */
.bb-colour-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2147483641;
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  background: var(--colorCardBg, #fff);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.bb-colour-modal[hidden] {
  display: none;
}

/* ── Modal header ── */
.bb-colour-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 0.5px solid var(--colorBorder, #e8e8e8);
  flex-shrink: 0;
}

.bb-colour-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--colorTextBody, #1a1a1a);
}

.bb-colour-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--colorTextBody, #1a1a1a);
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}

.bb-colour-modal-close:hover {
  opacity: 1;
}

/* ── Modal body — scrollable variant rows ── */
.bb-colour-modal-body {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}

/* ── Individual variant row ── */
.bb-modal-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 20px;
  transition: background 0.15s;
}

.bb-modal-row:hover {
  background: var(--colorBg2, #f7f7f5);
}

.bb-modal-row--selected {
  background: var(--colorBg2, #f7f7f5);
}

.bb-modal-row--unavailable {
  opacity: 0.4;
}

/* ── Row swatch ── */
.bb-modal-row-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-modal-row-swatch .color-swatch,
.bb-modal-row-swatch .bb-swatch {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Row info ── */
.bb-modal-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bb-modal-row-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--colorTextBody, #1a1a1a);
}

.bb-modal-row-price {
  font-size: 13px;
  color: var(--colorTextBody, #1a1a1a);
  opacity: 0.6;
}

/* ── Row stepper ── */
.bb-modal-row-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--colorBorder, #d0d0d0);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.bb-modal-row--selected .bb-modal-row-stepper {
  border-color: var(--colorTextBody, #1a1a1a);
}

.bb-modal-minus,
.bb-modal-plus {
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  font-size: 18px;
  font-weight: 300;
  cursor: pointer;
  color: var(--colorTextBody, #1a1a1a);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  flex-shrink: 0;
}

.bb-modal-minus:hover,
.bb-modal-plus:hover {
  background: var(--colorBg2, #f0f0f0);
}

.bb-modal-qty {
  min-width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--colorTextBody, #1a1a1a);
}

.bb-modal-soldout {
  padding: 0 10px;
  font-size: 12px;
  color: var(--colorTextBody, #1a1a1a);
  opacity: 0.4;
}

/* ── Modal footer ── */
.bb-colour-modal-footer {
  border-top: 0.5px solid var(--colorBorder, #e8e8e8);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  background: var(--colorCardBg, #fff);
}

.bb-modal-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bb-modal-summary-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--colorTextBody, #1a1a1a);
}

.bb-modal-summary-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--colorTextBody, #1a1a1a);
}

.bb-modal-confirm {
  padding: 12px 24px;
  background: var(--colorBtnPrimary, #1a1a1a);
  color: var(--colorBtnPrimaryText, #fff);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.bb-modal-confirm:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.bb-modal-confirm--ready:hover {
  opacity: 0.85;
}

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
  .bb-colour-modal {
    /* Same centred overlay on mobile — just with 16px margin all sides */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
  }

  .bb-modal-row {
    padding: 12px 16px;
    gap: 12px;
  }

  .bb-colour-modal-footer {
    flex-wrap: wrap;
    gap: 12px;
  }

  .bb-modal-confirm {
    width: 100%;
    text-align: center;
  }
}


/* ============================================================
   ZL-READMORE — Universal read more / read less utility
   Usage: wrap content in <div class="zl-readmore">
          with a pre-rendered <div class="zl-readmore__body
          zl-readmore__body--clamped zl-readmore__body--lines-N">
          inside. JS attaches the toggle button.
   JS: assets/zl-readmore.js (loaded globally via theme.liquid)
   ============================================================ */

/* Clamped (collapsed) state */
.zl-readmore__body--clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Line count modifiers — add more as needed */
.zl-readmore__body--lines-2 { -webkit-line-clamp: 2; }
.zl-readmore__body--lines-4 { -webkit-line-clamp: 4; }
.zl-readmore__body--lines-6 { -webkit-line-clamp: 6; }

/* Expanded state */
.zl-readmore__body--expanded {
  display: block;
  overflow: visible;
}

/* Body typography */
.zl-readmore__body {
  font-family: 'Satoshi', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: #1A1A1A;
  transition: all 0.25s ease;
}

/* Richtext child resets */
.zl-readmore__body p {
  margin: 0 0 0.5em;
}
.zl-readmore__body p:last-child {
  margin-bottom: 0;
}
.zl-readmore__body ul,
.zl-readmore__body ol {
  margin: 0.5em 0;
  padding-left: 1.4em;
}

/* Toggle button */
.zl-readmore__toggle {
  background: none;
  border: none;
  padding: 8px 0 0;
  margin: 0;
  cursor: pointer;
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #1A1A1A;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.15s ease;
}
.zl-readmore__toggle:hover {
  opacity: 0.7;
}

/* Chevron rotation when expanded */
.zl-readmore__chevron {
  transition: transform 0.25s ease;
}
.zl-readmore__toggle[aria-expanded="true"] .zl-readmore__chevron {
  transform: rotate(180deg);
}

/* ============================================================
   ZL UNIVERSAL PRODUCT CARD + FEATURED COLLECTION SECTION
   Append this block to the END of assets/custom.css

   BREAKPOINTS (hardcoded, matching Impulse convention)
     Mobile/tablet: max-width 768px
     Desktop:       min-width 769px

   AUDIT: 2026-03
   - Removed all font-family declarations (inherits from theme global)
   - Added keyboard focus styles (:focus-visible)
   - Added swatch sold-out state
   - Added secondary image hover suppression after swatch selection
   - Moved section static CSS here from inline <style> block
   - Fixed mobile swatch selector
   - Added editorial tile styles
   ============================================================ */

/* ── Card container ── */
.zl-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Image zone ── */
.zl-card__img-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.zl-card__img-wrap {
  position: relative;
  overflow: hidden;
  background: #f5f5f3;
  border-radius: 6px;
}

.zl-card__img-wrap--square { aspect-ratio: 1 / 1; }
.zl-card__img-wrap--portrait34 { aspect-ratio: 3 / 4; }
.zl-card__img-wrap--portrait23 { aspect-ratio: 2 / 3; }

.zl-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

.zl-card__img--secondary {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
}

.zl-card__img-wrap:hover .zl-card__img--secondary {
  opacity: 1;
}

/* Issue 14: When a swatch has been selected, suppress the secondary
   image hover so the swatch-selected image stays visible.
   The JS adds .zl-card--swatch-selected to the card on swatch interaction.
   If this causes unexpected behaviour, remove or adjust this rule. */
.zl-card--swatch-selected .zl-card__img-wrap:hover .zl-card__img--secondary {
  opacity: 0;
}

.zl-card__img-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #f0f0ee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zl-card__img-placeholder svg {
  width: 40%;
  opacity: 0.3;
}

/* ── Badge ── */
.zl-card__badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 2;
  background: #1A1A1A;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.zl-card__badge--soldout {
  background: #6A717F;
}

/* ── Info zone ── */
.zl-card__info {
  padding: 10px 4px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ── Reviews ── */
.zl-card__reviews {
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.2;
}

.zl-card__reviews a {
  text-decoration: none;
  color: inherit;
}

/* ── Title ── */
.zl-card__title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: 2px;
}

.zl-card__title:hover {
  opacity: 0.7;
}

/* ── Subtitle ── */
.zl-card__subtitle {
  font-size: 13px;
  font-weight: 400;
  color: #6A717F;
  margin: 0 0 6px;
  line-height: 1.4;
}

/* ── Price ── */
.zl-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}

.zl-card__price--current {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
}

.zl-card__price--compare {
  font-size: 13px;
  font-weight: 400;
  color: #6A717F;
  text-decoration: line-through;
}

/* ── Stat pills ── */
.zl-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.zl-card__pill {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 40px;
  background: #f5f5f3;
  color: #4a4a4a;
  border: 0.5px solid #e8e3dd;
  line-height: 1.3;
}

/* ── Dropdown (Learn More) ── */
.zl-card__dropdown {
  border-top: 1px solid #e8e3dd;
  padding-top: 8px;
  margin-bottom: 8px;
}

.zl-card__dropdown-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: #1A1A1A;
}

.zl-card__dropdown-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.zl-card__dropdown-btn[aria-expanded="true"] .zl-card__dropdown-icon {
  transform: rotate(45deg);
}

.zl-card__dropdown-btn[aria-expanded="true"] .zl-dd-v {
  display: none;
}

.zl-card__dropdown-panel {
  margin-top: 8px;
  background: #f7f7f5;
  border-radius: 8px;
  padding: 12px;
}

.zl-card__dropdown-panel[hidden] {
  display: none;
}

.zl-card__dropdown-content {
  font-size: 13px;
  color: #4a4a4a;
  line-height: 1.6;
}

.zl-card__dropdown-content p {
  margin: 0 0 6px;
}

.zl-card__dropdown-content p:last-child {
  margin-bottom: 0;
}

.zl-card__dropdown-content ul,
.zl-card__dropdown-content ol {
  padding-left: 16px;
  margin: 4px 0;
}

.zl-card__dropdown-content li {
  margin-bottom: 3px;
  font-size: 13px;
  line-height: 1.5;
}

.zl-card__dropdown-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #1A1A1A;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.zl-card__dropdown-link:hover {
  opacity: 0.7;
}

/* ── Swatches ── */
.zl-card__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-bottom: 8px;
}

.zl-card__swatch {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #e8e3dd;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  transition: border-color 0.15s;
}

.zl-card__swatch--active,
.zl-card__swatch:hover {
  border-color: #1A1A1A;
}

/* Sold-out swatch: greyed out with diagonal strike */
.zl-card__swatch--soldout {
  opacity: 0.4;
  cursor: default;
  position: relative;
}

.zl-card__swatch--soldout::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 0.5px),
    #1A1A1A calc(50% - 0.5px),
    #1A1A1A calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  opacity: 0.6;
}

.zl-card__swatch-overflow {
  font-size: 11px;
  font-weight: 500;
  color: #6A717F;
}

/* ── ATC button ── */
.zl-card__atc-form {
  margin-top: auto;
}

.zl-card__atc-btn {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 40px;
  background: #1A1A1A;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: auto;
}

.zl-card__atc-btn:hover {
  opacity: 0.85;
}

.zl-card__atc-btn--soldout {
  background: #6A717F;
  cursor: not-allowed;
}

.zl-card__atc-btn--link {
  background: transparent;
  color: #1A1A1A;
  border: 1px solid #1A1A1A;
}

.zl-card__atc-btn--link:hover {
  background: #1A1A1A;
  color: #fff;
}

/* ── Keyboard accessibility ── */
.zl-card__swatch:focus-visible,
.zl-card__dropdown-btn:focus-visible,
.zl-card__atc-btn:focus-visible,
.zl-card__title:focus-visible,
.zl-card__dropdown-link:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
}

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
  .zl-card__title {
    font-size: 13px;
  }

  .zl-card__subtitle {
    font-size: 12px;
  }

  .zl-card__price--current {
    font-size: 14px;
  }

  .zl-card__pill {
    font-size: 10px;
    padding: 2px 6px;
  }

  .zl-card__swatch {
    width: 18px;
    height: 18px;
  }

  .zl-card__badge {
    font-size: 10px;
    padding: 3px 8px;
  }
}
/* ============================================================
   ZL FEATURED COLLECTION SECTION
   Static rules (moved from inline <style> block).
   Dynamic padding stays inline in the section file.
   ============================================================ */

.zl-fc__header {
  margin-bottom: 24px;
}

.zl-fc__heading {
  font-size: 28px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 6px;
  line-height: 1.2;
}

.zl-fc__subheading {
  font-size: 15px;
  font-weight: 400;
  color: #6A717F;
  margin: 0;
  line-height: 1.5;
  max-width: 640px;
}

.zl-fc__grid {
  display: grid;
  grid-template-columns: repeat(var(--zl-fc-mobile-cols, 2), 1fr);
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (min-width: 769px) {
  .zl-fc__grid {
    grid-template-columns: repeat(var(--zl-fc-desktop-cols, 3), 1fr);
    gap: 24px;
  }
}

.zl-fc__item {
  list-style: none;
}

.zl-fc__view-all {
  text-align: center;
  margin-top: 32px;
}

.zl-fc__view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #1A1A1A;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.zl-fc__view-all-link:hover {
  opacity: 0.7;
}


/* ============================================================
   EDITORIAL TILES
   Promotional/content tiles that sit in the product grid.
   Rendered twice (desktop position + mobile position).
   CSS shows the correct one per breakpoint.

   THREE MODES:
     Mode 1 - Brand gradient (.zl-fc__ed-inner--brandmark)
              No image. CSS gradient bg. Icon + heading + richtext subtext.
              Centred vertically. Fills full grid row height on desktop.
              Min-height on mobile for breathing room.

     Mode 2 - Image with optional text overlay (default .zl-fc__ed-inner)
              Image fills container via object-fit cover.
              Optional heading + subtext anchored to bottom with scrim.
              Fills full grid row height on desktop (align-self stretch).
              Min-height on mobile.

     Mode 3 - Image only (.zl-fc__ed-inner--image-only)
              Image present, no heading or subtext from metaobject.
              Square aspect-ratio matching product card image dimensions.
              Text may be baked into the image externally (content policy).
              Design images at 800x800px. Safe zone 100px from all edges.
   ============================================================ */

/* -- Visibility toggle -- */
.zl-fc__ed--mobile {
  display: none;
}

@media (max-width: 768px) {
  .zl-fc__ed--desktop {
    display: none;
  }
  /* Default: sits in a single grid cell, same footprint as a normal product
     tile (2026-08 - was unconditionally full-width before; the --zl-ed-mobile-span:
     full rule below is now the only way to get the old full-width band back). */
  .zl-fc__ed--mobile {
    display: block;
  }
}

/* -- Column span -- */
@media (min-width: 769px) {
  .zl-fc__item--editorial .zl-fc__ed-inner {
    grid-column: span var(--zl-ed-desktop-span, 1);
  }
  .zl-fc__item--editorial:has(.zl-fc__ed-inner[style*="--zl-ed-desktop-span: 2"]) {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .zl-fc__ed--mobile.zl-fc__item--editorial:has(.zl-fc__ed-inner[style*="--zl-ed-mobile-span: full"]) {
    grid-column: 1 / -1;
  }
}

/* -- Tile container: base (Mode 2 - image with optional overlay) --
   align-self: stretch makes the tile fill the full grid row height
   on desktop, matching product card image + info zone combined.
   -------------------------------------------------------- */
.zl-fc__ed-inner {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  height: 100%;
  min-height: 200px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* -- Mode 1: Brand gradient --
   Fills full grid row height via align-self stretch.
   Content centred vertically. No image.
   -------------------------------------------------------- */
.zl-fc__ed-inner--brandmark {
  justify-content: center !important;
  align-items: center;
  text-align: center;
  transition: filter 0.25s ease;
}

.zl-fc__ed-inner--brandmark:hover {
  filter: brightness(1.08);
}

/* -- Mode 3: Image only --
   2026-08: now sizes exactly like Mode 2 (fills the full grid row height,
   matching a real product card's photo + swatches/title/price zone combined)
   instead of the old fixed 1:1 square. A bare square consistently came up
   shorter than its neighbours once real cards had swatches/subtitle/price
   under the photo, leaving a gap. No CSS override needed here any more -
   this class exists only so the hover-zoom rule below can still exclude it;
   sizing comes from the base .zl-fc__ed-inner rule.
   Image prep: design at roughly 2:3 (width:height) - e.g. 1000x1500px -
   to comfortably cover a card whose photo is a 1:1 square plus a swatches +
   2-line-subtitle + price info zone beneath it (measured live: a 379px-wide
   card with a standardised 2-line subtitle runs ~552px tall, which is just
   inside a 2:3 box - the small margin is intentional cover-crop buffer).
   Keep the essential subject centred, away from the top/bottom ~10%, since
   object-fit: cover may trim slightly more or less depending on the exact
   row height (title/swatch presence still causes minor variance).
   -------------------------------------------------------- */

/* -- Image fill -- */
.zl-fc__ed-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* -- Scrim for text readability over images -- */
.zl-fc__ed-scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

/* -- Text overlay: anchored to bottom (Mode 2) -- */
.zl-fc__ed-overlay {
  position: relative;
  z-index: 2;
  padding: 20px;
  width: 100%;
}

/* -- Text overlay: centred (Mode 1 brand gradient) -- */
.zl-fc__ed-overlay--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  width: 100%;
}

/* -- Icon zone (Mode 1 only) -- */
.zl-fc__ed-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  opacity: 0.9;
}

.zl-fc__ed-icon svg {
  width: 40px;
  height: 40px;
  display: block;
  fill: currentColor;
}

/* -- Heading: default (Mode 2 image overlay) -- */
.zl-fc__ed-heading {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 4px;
}

/* -- Heading: larger for Mode 1 brand gradient -- */
.zl-fc__ed-heading--lg {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

/* -- Subtext: default -- */
.zl-fc__ed-subtext {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  opacity: 0.85;
}

/* -- Subtext: richtext rendered via metafield_tag --
   !important overrides Impulse rte class on all element types.
   -------------------------------------------------------- */
.zl-fc__ed-subtext--rt p,
.zl-fc__ed-subtext--rt ul,
.zl-fc__ed-subtext--rt ol {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: inherit !important;
  margin: 0 0 6px !important;
  opacity: 0.9;
}

.zl-fc__ed-subtext--rt p:last-child,
.zl-fc__ed-subtext--rt ul:last-child,
.zl-fc__ed-subtext--rt ol:last-child {
  margin-bottom: 0 !important;
}

.zl-fc__ed-subtext--rt strong {
  font-weight: 700 !important;
  color: inherit !important;
}

.zl-fc__ed-subtext--rt ul,
.zl-fc__ed-subtext--rt ol {
  padding-left: 18px !important;
}

.zl-fc__ed-subtext--rt li {
  font-size: 13px !important;
  color: inherit !important;
  line-height: 1.5 !important;
  margin-bottom: 2px !important;
}

/* Mode 1: slightly larger richtext body */
.zl-fc__ed-inner--brandmark .zl-fc__ed-subtext--rt p,
.zl-fc__ed-inner--brandmark .zl-fc__ed-subtext--rt li {
  font-size: 15px !important;
  opacity: 1;
}

.zl-fc__ed-inner--brandmark .zl-fc__ed-subtext--rt strong {
  font-size: 15px !important;
}

/* -- Link styles -- */
.zl-fc__ed-link {
  color: inherit;
  text-decoration: none;
}

/* Full-tile clickable overlay */
.zl-fc__ed-link--full {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* -- Hover: scale image on Mode 2 tiles -- */
.zl-fc__ed-inner:not(.zl-fc__ed-inner--brandmark):not(.zl-fc__ed-inner--image-only):hover .zl-fc__ed-img {
  transform: scale(1.03);
  transition: transform 0.3s ease;
}

/* -- Mobile tile adjustments -- */
@media (max-width: 768px) {
  .zl-fc__ed-inner {
    min-height: var(--zl-ed-mobile-min-h, 250px);
    align-self: auto;
  }

  /* 2026-08: Mode 3 no longer forces a square on mobile either - it inherits
     the same min-height/align-self as Mode 2 above, so it matches a real
     product tile's footprint now that it sits in a single mobile grid cell
     instead of always spanning full width. */

  .zl-fc__ed-inner--brandmark {
    min-height: var(--zl-ed-mobile-min-h, 250px);
  }

  .zl-fc__ed-heading {
    font-size: 16px;
  }

  .zl-fc__ed-heading--lg {
    font-size: 22px;
  }

  .zl-fc__ed-overlay {
    padding: 16px;
  }

  .zl-fc__ed-overlay--center {
    padding: 20px 16px;
  }
}
/* ============================================================
   ZOOMLITE BLOG COMPONENTS
   Inline HTML components for article body content.
   Writers paste these snippets in HTML mode in the Shopify
   article editor. CSS here renders them on the live site.

   Components:
     1.  TOC (table of contents)
     2.  Key takeaway box
     3.  Callout box (tip / info / warn)
     4.  Comparison table
     5.  Product card
     6.  FAQ block
     7.  Article body - editorial template typography
     8.  Hero text block
     9.  Left-right feature block
     10. Dark strip
     11. Card row
     12. Dark feature block
   ============================================================ */


/* ============================================================
   1. TABLE OF CONTENTS
   Usage: after intro, before key takeaway. Required if over
   800 words. Guide articles only.
============================================================ */

.zlblog-toc {
  background: #F5F3EE;
  border: 1px solid #E0DDD8;
  border-radius: 10px;
  padding: 18px 20px;
  margin: 40px 0;
}

.zlblog-toc__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9CA3AF;
  margin-bottom: 10px;
}

.zlblog-toc ol {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.zlblog-toc ol li {
  font-size: 14px;
}

.zlblog-toc ol li a {
  color: #1A1A1A;
  text-decoration: none;
  font-weight: 500;
  text-underline-offset: 3px;
}

.zlblog-toc ol li a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 749px) {
  .zlblog-toc {
    margin: 28px 0;
  }
}

/* ============================================================
   2. KEY TAKEAWAY BOX
   Usage: after TOC, before first H2. Required on all Guide
   articles.
============================================================ */

.zlblog-takeaway {
  background: #1A1A1A;
  color: #ffffff;
  padding: 24px 28px;
  margin: 28px 0;
}

.zlblog-takeaway__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 12px;
}

.zlblog-takeaway__title {
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 16px;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.zlblog-takeaway ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zlblog-takeaway ul li {
  display: flex;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
}

.zlblog-takeaway ul li::before {
  content: '\2713';
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  flex-shrink: 0;
  margin-top: 1px;
}


/* ============================================================
   3. CALLOUT BOX
   Usage: inside or after any step. Max 2 per article.
   2026-06 - Redesigned: warm monochrome, no icon, thin border.

   Variants:
     .zlblog-callout--tip    practical advice
     .zlblog-callout--info   facts or context
     .zlblog-callout--warn   mistakes to avoid
============================================================ */

.zlblog-callout {
  padding: 20px 24px;
  border-left: 1px solid;
  margin: 40px 0;
  background: #F7F6F4;
}

.zlblog-callout--tip  { border-color: #7A7670; }
.zlblog-callout--info { border-color: #1A1A1A; }
.zlblog-callout--warn { border-color: #C49A2A; }

.zlblog-callout__icon {
  display: none;
}

.zlblog-callout__body {
  display: block;
}

.zlblog-callout__title {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: #1A1A1A;
  line-height: 1.3;
}

.zlblog-callout__text {
  font-size: 0.95rem;
  color: #2a2e33;
  line-height: 1.65;
  margin: 0;
}

.zlblog-callout__text a {
  color: #1A1A1A;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(26,26,26,0.35);
}

.zlblog-callout__text a:hover {
  text-decoration-color: #1A1A1A;
}

.zlblog-callout__text strong {
  font-weight: 500;
  color: #1A1A1A;
}

@media screen and (max-width: 749px) {
  .zlblog-callout {
    padding: 16px 18px;
    margin: 28px 0;
  }
}


/* ============================================================
   4. COMPARISON TABLE
   Usage: inside a step when comparing options.
   ALWAYS keep the .zlblog-table-wrap div -- it handles mobile
   horizontal scrolling.
============================================================ */

.zlblog-table-wrap {
  overflow-x: auto;
  margin: 28px 0;
  border: 1px solid rgba(10,11,13,0.1);
}
.zlblog-table-wrap .zlblog-table {
  table-layout: auto; /* overrides Impulse's base .rte table{table-layout:fixed}, 
                          which was fighting the wrap div's horizontal-scroll design */
}

.zlblog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: #ffffff;
}

.zlblog-table thead tr {
  background: #1A1A1A;
  color: #ffffff;
}

.zlblog-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.zlblog-table thead th:first-child {
  width: 38%;
}

.zlblog-table tbody tr:nth-child(odd) {
  background: #F7F6F4;
}

.zlblog-table tbody tr:nth-child(even) {
  background: #ffffff;
}

.zlblog-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(10,11,13,0.07);
  color: #1A1A1A;
  vertical-align: top;
  line-height: 1.55;
}

.zlblog-table tbody tr:last-child td {
  border-bottom: none;
}

.zlblog-table tbody td:first-child {
  font-weight: 500;
  color: #1A1A1A;
}

.zlblog-table .tick {
  color: #2a7a2a;
  font-weight: 600;
}

.zlblog-table .cross {
  color: #9a2a2a;
  font-weight: 600;
}

@media screen and (max-width: 749px) {
  .zlblog-table {
    font-size: 0.82rem;
  }
  .zlblog-table thead th,
  .zlblog-table tbody td {
    padding: 10px 12px;
  }
}


/* ============================================================
   5. PRODUCT CARD
   Usage: after the step where product is first relevant.
   One per article maximum. Place mid-article, not at the end.
   2026-06 - Redesigned: thin border, no shadow, text CTA.

   HTML structure:
   <a class="zlblog-product-card" href="URL">
     <div class="zlblog-product-card__img"><img src="..." alt="..."></div>
     <div class="zlblog-product-card__body">
       <span class="zlblog-product-card__label">Eyebrow</span>
       <span class="zlblog-product-card__name">Product Name</span>
       <span class="zlblog-product-card__desc">Short description.</span>
     </div>
     <span class="zlblog-product-card__cta">View &rarr;</span>
   </a>
============================================================ */

.zlblog-product-card,
a.zlblog-product-card,
.rte a.zlblog-product-card,
.article__body a.zlblog-product-card {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  border: 1px solid rgba(10,11,13,0.12) !important;
  margin: 32px 0;
  background: #ffffff;
  text-decoration: none !important;
  color: inherit;
  transition: border-color 0.15s;
  overflow: hidden;
}

.zlblog-product-card:hover {
  border-color: #1A1A1A !important;
}

.zlblog-product-card__img {
  background: #F0F0F0;
  overflow: hidden;
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zlblog-product-card__img img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center;
  display: block;
  flex-shrink: 0;
}

.zlblog-product-card__body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.zlblog-product-card__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7A7670;
  text-decoration: none !important;
}

.zlblog-product-card__name {
  font-size: 1.05rem;
  font-weight: 500;
  color: #1A1A1A;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-decoration: none !important;
}

.zlblog-product-card__desc {
  font-size: 0.88rem;
  color: #7A7670;
  line-height: 1.5;
  margin-top: 2px;
  text-decoration: none !important;
}

.zlblog-product-card__footer {
  display: none;
}

.zlblog-product-card__cta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1A1A1A;
  white-space: nowrap;
  border-bottom: 1px solid #1A1A1A;
  padding-bottom: 2px;
  margin: 0 24px;
  flex-shrink: 0;
  text-decoration: none !important;
  align-self: center;
}

@media (max-width: 600px) {
  .zlblog-product-card,
  a.zlblog-product-card,
  .rte a.zlblog-product-card,
  .article__body a.zlblog-product-card {
    flex-direction: column;
    align-items: stretch;
  }
  .zlblog-product-card__img {
    width: 100%;
    height: 160px;
  }
  .zlblog-product-card__img img {
    width: 100%;
    height: 160px;
  }
  .zlblog-product-card__cta {
    display: none;
  }
  .zlblog-product-card__body {
    padding: 14px 16px;
  }
}


/* ============================================================
   6. FAQ BLOCK
   Usage: after the last step, before related articles section.
   Required on all Guide articles. Uses native HTML details and
   summary -- no JavaScript needed.
   2026-06 - Redesigned: warm monochrome, no blue, clean toggle.

   HTML structure:
   <div class="zlblog-faq">
     <div class="zlblog-faq__label">Frequently asked questions</div>
     <details>
       <summary>Question text here</summary>
       <div class="faq-body"><p>Answer text here.</p></div>
     </details>
   </div>
============================================================ */

.zlblog-faq {
  margin: 40px 0;
}

.zlblog-faq__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7A7670;
  margin-bottom: 16px;
}

.zlblog-faq details {
  border-top: 1px solid rgba(10,11,13,0.1);
  margin: 0;
}

.zlblog-faq details:last-child {
  border-bottom: 1px solid rgba(10,11,13,0.1);
}

.zlblog-faq summary {
  padding: 18px 0;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #1A1A1A;
  user-select: none;
  letter-spacing: -0.01em;
  line-height: 1.35;
  gap: 16px;
}

.zlblog-faq summary::-webkit-details-marker {
  display: none;
}

.zlblog-faq summary::marker {
  display: none;
}

.zlblog-faq summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: #7A7670;
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.15s;
}

.zlblog-faq details[open] summary::after {
  content: '\2212';
  color: #1A1A1A;
}

.zlblog-faq details[open] summary {
  color: #1A1A1A;
}

.zlblog-faq .faq-body {
  padding: 0 0 20px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #2a2e33;
  margin: 0;
}

.zlblog-faq .faq-body p {
  margin: 0 0 12px;
}

.zlblog-faq .faq-body p:last-child {
  margin-bottom: 0;
}

.zlblog-faq .faq-body a {
  color: #1A1A1A;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(26,26,26,0.35);
}

.zlblog-faq .faq-body a:hover {
  text-decoration-color: #1A1A1A;
}

@media screen and (max-width: 749px) {
  .zlblog-faq summary {
    padding: 16px 0;
    font-size: 0.95rem;
  }
  .zlblog-faq { margin: 28px 0; }
  .zlblog-faq .faq-body {
    font-size: 0.9rem;
    padding-bottom: 16px;
  }
}


/* ============================================================
   7. ARTICLE BODY TYPOGRAPHY - Editorial Template
   Scoped to .alternate-article-template only. Does not affect
   any other article templates or pages.
   2026-06
============================================================ */

.alternate-article-template .article__body.rte p {
  font-size: 1.08rem;
  line-height: 1.75;
  color: #1A1A1A;
  margin-bottom: 24px;
  font-weight: 400;
}

.alternate-article-template .article__body.rte h1 {
  font-size: clamp(2rem,4vw,3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #1A1A1A;
  margin: 60px 0 20px;
}

.alternate-article-template .article__body.rte h2 {
  font-size: clamp(1.5rem,2.2vw,1.85rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1A1A1A;
  margin: 60px 0 20px;
}

.alternate-article-template .article__body.rte h3 {
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #1A1A1A;
  margin: 32px 0 12px;
}

.alternate-article-template .article__body.rte h4 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: #1A1A1A;
  margin: 24px 0 8px;
}

.alternate-article-template .article__body.rte h5,
.alternate-article-template .article__body.rte h6 {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7A7670;
  margin: 20px 0 8px;
}

.alternate-article-template .article__body.rte a {
  color: #1A1A1A;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(26,26,26,0.35);
  transition: text-decoration-color 0.15s;
  border-bottom: none; /* cancels Impulse's base .rte a border-bottom underline */
}
.alternate-article-template .article__body.rte a:after {
  content: none;
}

.alternate-article-template .article__body.rte a:hover {
  text-decoration-color: #1A1A1A;
}

.alternate-article-template .article__body.rte strong,
.alternate-article-template .article__body.rte b {
  font-weight: 500;
  color: #1A1A1A;
}

.alternate-article-template .article__body.rte em,
.alternate-article-template .article__body.rte i {
  font-style: italic;
  color: #2a2e33;
}

.alternate-article-template .article__body.rte blockquote {
  margin: 44px 0;
  padding: 28px 0 28px 28px;
  border-left: 1px solid #b8bcc0;
  border-top: none;
  border-right: none;
  border-bottom: none;
  background: none;
  font-size: clamp(1.2rem,2.2vw,1.5rem);
  font-weight: 300;
  line-height: 1.45;
  color: #2a2e33;
  letter-spacing: -0.01em;
  font-style: normal;
}

.alternate-article-template .article__body.rte blockquote p {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin-bottom: 0;
}

.alternate-article-template .article__body.rte ul {
  margin: 0 0 24px 0;
  padding-left: 20px;
  list-style: disc;
}

.alternate-article-template .article__body.rte ul li {
  font-size: 1.08rem;
  line-height: 1.75;
  color: #1A1A1A;
  margin-bottom: 8px;
  padding-left: 6px;
}

.alternate-article-template .article__body.rte ol {
  margin: 0 0 24px 0;
  padding-left: 20px;
  list-style: decimal;
}

.alternate-article-template .article__body.rte ol li {
  font-size: 1.08rem;
  line-height: 1.75;
  color: #1A1A1A;
  margin-bottom: 8px;
  padding-left: 6px;
}

.alternate-article-template .article__body.rte code {
  font-family: monospace;
  font-size: 0.88em;
  font-weight: 400;
  background: #f0f0f0;
  color: #1A1A1A;
  padding: 2px 6px;
  border-radius: 3px;
}

.alternate-article-template .article__body.rte pre {
  background: #15181c;
  color: #b8bcc0;
  padding: 24px 28px;
  overflow-x: auto;
  margin: 32px 0;
  border-radius: 0;
  border-left: 2px solid #3a4a5c;
}

.alternate-article-template .article__body.rte pre code {
  font-family: monospace;
  font-size: 0.85rem;
  line-height: 1.65;
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
}

.alternate-article-template .article__body.rte hr {
  border: none;
  border-top: 1px solid rgba(10,11,13,0.1);
  margin: 48px 0;
}

.alternate-article-template .article__body.rte img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 40px auto;
}

.alternate-article-template .article__body.rte figure {
  margin: 40px 0;
}

.alternate-article-template .article__body.rte figcaption {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7A7670;
  text-align: right;
  margin-top: 10px;
}

.alternate-article-template .article__body.rte table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 0.92rem;
}

.alternate-article-template .article__body.rte th {
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7A7670;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(10,11,13,0.15);
}

.alternate-article-template .article__body.rte td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(10,11,13,0.07);
  color: #1A1A1A;
  line-height: 1.55;
  vertical-align: top;
}

.alternate-article-template .article__body.rte tr:last-child td {
  border-bottom: none;
}

@media screen and (max-width: 749px) {
  .alternate-article-template .article__body.rte h2 {
    font-size: 1.5rem;
    margin: 44px 0 16px;
  }
  .alternate-article-template .article__body.rte h3 {
    font-size: 1.08rem;
    margin: 24px 0 10px;
  }
  .alternate-article-template .article__body.rte blockquote {
    padding: 20px 0 20px 20px;
    font-size: 1.15rem;
  }
  .alternate-article-template .article__body.rte pre {
    padding: 18px 16px;
  }
  .alternate-article-template .article__body.rte table {
    font-size: 0.82rem;
  }
  .alternate-article-template .article__body.rte th,
  .alternate-article-template .article__body.rte td {
    padding: 10px 10px;
  }
}


/* ============================================================
   8. HERO TEXT BLOCK
   Usage: opening block of editorial/brand articles.
   Eyebrow is optional -- omit the span when not needed.
============================================================ */

.zlblog-hero {
  padding: clamp(48px,8vw,96px) clamp(28px,4vw,56px);
  max-width: 620px;
  margin: 0 auto;
}

.zlblog-hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9CA3AF;
  display: block;
  margin-bottom: 14px;
  text-align: left;
}

.zlblog-hero__body {
  font-size: 15px;
  line-height: 1.75;
  color: #4B5563;
  font-weight: 400;
  text-align: left;
}

.zlblog-hero__body p {
  margin: 0;
  color: #4B5563;
}

.zlblog-hero__body p + p {
  margin-top: 10px;
}


/* ============================================================
   9. LEFT-RIGHT FEATURE BLOCK
   Usage: alternating text + media sections.
   Default: text left, media right.
   Reverse: add zlblog-feature--reverse for media left, text right.
   Badge: include .zlblog-feature__badge when numbered sequence needed.
   Media: use zlblog-feature__media for both img and video elements.
   Note: background forced to white to prevent rte alternating
   section backgrounds bleeding in.
============================================================ */

.zlblog-feature {
  padding: clamp(40px,6vw,64px) clamp(20px,5vw,60px);
  background: #ffffff;
}

.zlblog-feature__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px,4vw,56px);
  align-items: stretch;
}

.zlblog-feature--reverse .zlblog-feature__content {
  order: 2;
}

.zlblog-feature--reverse .zlblog-feature__media-wrap {
  order: 1;
}

.zlblog-feature__content {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.zlblog-feature__media-wrap {
  display: flex;
  align-items: stretch;
}

.zlblog-feature__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #1C1C1C;
  background: #ffffff;
  border: 1px solid #E0DDD8;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-bottom: 12px;
  text-align: center;
  align-self: flex-start;
  list-style: none;
}

/* Suppress rte ordered list counter bleeding onto badge */
.zlblog-feature__badge::before {
  content: none !important;
}

/* Override component 7 rte h2 colour -- must match specificity */
.alternate-article-template .article__body.rte .zlblog-feature__heading {
  font-size: clamp(20px,2.5vw,26px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #1C1C1C;
  margin: 0 0 12px 0;
  text-align: left;
}

.zlblog-feature__heading {
  font-size: clamp(20px,2.5vw,26px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #1C1C1C;
  margin: 0 0 12px 0;
  text-align: left;
}

.zlblog-feature__body {
  font-size: 15px;
  line-height: 1.8;
  color: #4B5563;
  font-weight: 400;
  text-align: left;
}

/* Override component 7 rte p colour -- must match specificity */
.alternate-article-template .article__body.rte .zlblog-feature__body p {
  margin: 0;
  color: #4B5563;
  font-size: 15px;
  margin-bottom: 0;
}

.zlblog-feature__body p {
  margin: 0;
  color: #4B5563;
}

.zlblog-feature__body p + p {
  margin-top: 12px;
}

.zlblog-feature__media {
  width: 100%;
  height: 100%;
  min-height: 280px;
  border-radius: 6px;
  display: block;
  object-fit: cover;
  border: 1px solid #E0DDD8;
}

@media (max-width: 768px) {
  .zlblog-feature__inner {
    grid-template-columns: 1fr;
  }
  .zlblog-feature__media {
    min-height: 220px;
    height: 260px;
  }
  .zlblog-feature--reverse .zlblog-feature__content {
    order: 2;
  }
  .zlblog-feature--reverse .zlblog-feature__media-wrap {
    order: 1;
  }
}


/* ============================================================
   10. DARK STRIP
   Usage: full-width dark section for callout statements,
   product range intros, or brand moments. Text only, centred.
   Eyebrow is optional -- omit the span when not needed.
   For dark section with image use component 12 (zlblog-dark-feature).
   Note: double selectors on heading and p override component 7
   rte typography rules which have higher base specificity.
============================================================ */

.zlblog-dark-strip {
  background: #15181C;
  padding: clamp(36px,5vw,52px) clamp(20px,5vw,60px);
  text-align: center;
}

.zlblog-dark-strip__inner {
  max-width: 620px;
  margin: 0 auto;
}

.zlblog-dark-strip__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: block;
  margin-bottom: 10px;
}

/* Double selector + !important to beat component 7 rte h2 specificity */
.alternate-article-template .article__body.rte .zlblog-dark-strip__heading,
.zlblog-dark-strip .zlblog-dark-strip__heading {
  font-size: clamp(20px,2.5vw,28px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #ffffff !important;
  margin: 0 0 10px 0;
}

.zlblog-dark-strip__body {
  font-size: 15px;
  line-height: 1.8;
  font-weight: 400;
  max-width: 480px;
  margin: 0 auto;
}

/* Double selector + !important to beat component 7 rte p specificity */
.alternate-article-template .article__body.rte .zlblog-dark-strip__body p,
.zlblog-dark-strip .zlblog-dark-strip__body p {
  margin: 0;
  color: rgba(255,255,255,0.55) !important;
  font-size: 15px;
  margin-bottom: 0;
}

.zlblog-dark-strip .zlblog-dark-strip__body p + p {
  margin-top: 10px;
}


/* ============================================================
   11. CARD ROW
   Usage: three-column product card grid for editorial articles.
   For a single product recommendation use component 5
   (zlblog-product-card).
   Cards link to individual product pages.
============================================================ */

.zlblog-card-row {
  padding: clamp(56px,8vw,80px) clamp(20px,5vw,60px);
  border-top: 1px solid #E0DDD8;
}

.zlblog-card-row__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.zlblog-card-row__header {
  text-align: center;
  margin-bottom: clamp(28px,4vw,44px);
}

.zlblog-card-row__heading {
  font-size: clamp(22px,2.8vw,30px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #1C1C1C;
  margin: 0 0 6px 0;
}

.zlblog-card-row__subheading {
  font-size: 14px;
  color: #9CA3AF;
  margin: 0;
}

.zlblog-card-row__grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(16px,2.5vw,24px);
}

.zlblog-card-row__card {
  border: 1px solid #E0DDD8;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  text-decoration: none;
  color: #1C1C1C;
  display: block;
  transition: box-shadow 0.2s;
}

.zlblog-card-row__card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.zlblog-card-row__card-img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  background: #F5F3EE;
}

.zlblog-card-row__card-body {
  padding: 16px 18px 20px;
}

.zlblog-card-row__card-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #F5F3EE;
  color: #4B5563;
  border: 1px solid #E0DDD8;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
}

.zlblog-card-row__card-name {
  font-size: 15px;
  font-weight: 700;
  color: #1C1C1C;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.zlblog-card-row__card-meta {
  font-size: 13px;
  color: #9CA3AF;
  font-weight: 400;
  margin-bottom: 8px;
}

.zlblog-card-row__card-price {
  font-size: 15px;
  font-weight: 700;
  color: #042C53;
}

@media (max-width: 600px) {
  .zlblog-card-row__grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}


/* ============================================================
   12. DARK FEATURE BLOCK
   Usage: two-column dark background section.
   Text left, image right.
   Eyebrow is optional -- omit the span when not needed.
   Eyebrow colour: #A5E2FF (rgb 165 226 255).
   For dark text-only centred block use component 10
   (zlblog-dark-strip).
   Note: margin-top on the wrapper div handles spacing when
   adjacent to dark strip since the article editor inserts
   elements between blocks breaking CSS sibling selectors.
   Add style="margin-top:4px" to the wrapper div when placing
   directly after a dark strip block.
============================================================ */

.zlblog-dark-feature {
  background: #15181C;
  padding: clamp(48px,7vw,72px) clamp(20px,5vw,60px);
}

.zlblog-dark-feature__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px,4vw,56px);
  align-items: center;
}

.zlblog-dark-feature__content {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.zlblog-dark-feature__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A5E2FF;
  display: block;
  margin-bottom: 10px;
}

/* Double selector + !important to beat component 7 rte h2 specificity */
.alternate-article-template .article__body.rte .zlblog-dark-feature__heading,
.zlblog-dark-feature .zlblog-dark-feature__heading {
  font-size: clamp(20px,2.5vw,26px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #ffffff !important;
  margin: 0 0 12px 0;
  text-align: left;
}

.zlblog-dark-feature__body {
  font-size: 15px;
  line-height: 1.8;
  font-weight: 400;
  text-align: left;
}

/* Double selector + !important to beat component 7 rte p specificity */
.alternate-article-template .article__body.rte .zlblog-dark-feature__body p,
.zlblog-dark-feature .zlblog-dark-feature__body p {
  margin: 0;
  color: rgba(255,255,255,0.55) !important;
  font-size: 15px;
  margin-bottom: 0;
}

.zlblog-dark-feature .zlblog-dark-feature__body p + p {
  margin-top: 12px;
}

.zlblog-dark-feature__media-wrap {
  display: flex;
  align-items: stretch;
}

.zlblog-dark-feature__media {
  width: 100%;
  height: 100%;
  min-height: 280px;
  border-radius: 6px;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.1);
}

@media (max-width: 768px) {
  .zlblog-dark-feature__inner {
    grid-template-columns: 1fr;
  }
  .zlblog-dark-feature__media {
    min-height: 220px;
    height: 260px;
  }
}


/* ============================================================
   END OF ZOOMLITE BLOG COMPONENTS
============================================================ */

/* ============================================================
   REVIEWS ROW - Junip summary sizing inside info card sublabel
   ============================================================ */
.zl-info-card__sub--reviews .junip-product-summary-star {
  width: 13px !important;
  height: 13px !important;
  padding: 0 !important;
}

.zl-info-card__sub--reviews .junip-product-summary-star svg {
  width: 13px !important;
  height: 13px !important;
}

.zl-info-card__sub--reviews .junip-product-summary-review-count {
  font-size: 13px;
  color: #7A7670;
  margin-left: 4px;
}

/* ============================================================
   JUNIP - Custom review summary (header zone)
   ============================================================ */
.zl-review-summary {
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #1A1A1A;
  margin-bottom: 8px;
  cursor: pointer;
}

.zl-rs-stars-wrap {
  position: relative;
  display: inline-block;
  font-size: 15px;
  line-height: 1;
}

.zl-rs-stars-outline {
  display: inline-block;
  color: #e0d8cc;
  letter-spacing: 1px;
}

.zl-rs-stars-filled {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #C49A2A;
  letter-spacing: 1px;
}

.zl-review-summary__rating {
  font-weight: 500;
  color: #1A1A1A;
}

.zl-review-summary__text {
  color: #1A1A1A;
  font-size: 13px;
}

.zl-rs-stars-outline svg {
  color: #e0d8cc;
}

.zl-rs-stars-filled svg {
  color: #C49A2A;
}

/* ============================================================
   ZL CONTENT MODAL -- trigger + block content
   Used by sections/zl-content-modal.liquid
   ============================================================ */

/* Section wrapper + on-page intro stack */
.zl-cm {
  display: block;
  padding-top: var(--zl-cm-pad-top, 40px);
  padding-bottom: var(--zl-cm-pad-bottom, 40px);
}

.zl-cm__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
}
.zl-cm.zl-cm--left   .zl-cm__intro { align-items: flex-start; text-align: left; }
.zl-cm.zl-cm--center .zl-cm__intro { align-items: center; text-align: center; margin: 0 auto; }
.zl-cm.zl-cm--right  .zl-cm__intro { align-items: flex-end; text-align: right; margin-left: auto; }

.zl-cm__intro-heading {
  font-size: var(--zl-cm-heading-size, 28px);
  font-weight: 700;
  line-height: 1.2;
  color: #1A1A1A;
  letter-spacing: -0.01em;
  margin: 0;
}
.zl-cm__intro-text {
  font-size: var(--zl-cm-body-size, 15px);
  line-height: 1.6;
  color: #4A4A4A;
  margin: 0;
}
.zl-cm__intro-text p { margin: 0 0 8px; }
.zl-cm__intro-text p:last-child { margin-bottom: 0; }

.zl-cm__intro .zl-cm__trigger-link,
.zl-cm__intro .zl-cm__trigger-btn {
  margin-top: 4px;
}

/* Pill button trigger */
.zl-cm__trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border: none;
  border-radius: 40px;
  background: #1A1A1A;
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease;
}
.zl-cm__trigger-btn:hover { opacity: 0.88; }

/* Text link trigger */
.zl-cm__trigger-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  background: none;
  border: none;
  color: #1A1A1A;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}
.zl-cm__trigger-link svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Modal content blocks (inside zl-modal__body) */
.zl-modal__body .zl-cm__eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7A7670;
  margin: 0 0 6px;
}
.zl-modal__body .zl-cm__heading {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: #1A1A1A;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.zl-modal__body .zl-cm__body {
  margin: 0 0 16px;
}

/* Modal CTA button (block) */
.zl-modal__body .zl-cm__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 40px;
  background: #1A1A1A;
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  margin-top: 4px;
  transition: opacity 0.15s ease;
}
.zl-modal__body .zl-cm__cta:hover { opacity: 0.88; }
/* ============================================================
   ZL MODAL -- shared drawer shell (global)
   Bottom sheet on mobile, centred dialog on desktop.
   Used by: snippets/zl-modal.liquid, opened via zl-modal.js
   Consumers: PDP info cards, zl-content-modal section, any page
   ============================================================ */

 /* ── ZL Modal -- desktop: centred dialog, mobile: bottom sheet ── */
  .zl-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }
  .zl-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .zl-modal {
    position: fixed;
    bottom: 0;
    left: 5%;
    right: 5%;
    z-index: 9999;
    background: #fff;
    border-radius: 20px 20px 0 0;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -4px 32px rgba(0,0,0,0.15);
  }
  .zl-modal.is-open {
    transform: translateY(0);
  }
  @media screen and (min-width: 768px) {
    .zl-modal {
      top: 50%;
      left: 50%;
      bottom: auto;
      right: auto;
      width: 50%;
      max-width: 640px;
      max-height: 80vh;
      border-radius: 16px;
      transform: translate(-50%, -40%);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease;
      box-shadow: 0 8px 48px rgba(0,0,0,0.18);
    }
    .zl-modal.is-open {
      transform: translate(-50%, -50%);
      opacity: 1;
      pointer-events: auto;
    }
    .zl-modal__handle-bar {
      display: none;
    }
  }
  .zl-modal__handle-bar {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    cursor: grab;
  }
  .zl-modal__handle-bar::after {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #d0cdc8;
  }
  .zl-modal__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 14px;
    border-bottom: 1px solid #D8D1CA;
  }
  .zl-modal__title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.01em;
  }
  .zl-modal__close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e8e3dd;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
  }
  .zl-modal__close:hover { background: #e8e4dc; }
  .zl-modal__close svg {
    width: 14px;
    height: 14px;
    stroke: #1a1a1a;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
  }
  .zl-modal__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 20px 40px;
    overscroll-behavior: contain;
  }
  .zl-modal__body h2,
  .zl-modal__body h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
  }
  .zl-modal__body p {
    font-size: 14px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0 0 16px;
  }
  .zl-modal__body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
  }
  .zl-modal__body ul li {
    font-size: 14px;
    line-height: 1.6;
    color: #4a4a4a;
    padding: 5px 0 5px 18px;
    position: relative;
  }
  .zl-modal__body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #6D6A4E;
  }
  .zl-modal__body .zl-modal-specs {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
  }
  .zl-modal__body .zl-modal-specs tr {
    border-bottom: 1px solid #D8D1CA;
  }
  .zl-modal__body .zl-modal-specs tr:last-child {
    border-bottom: none;
  }
  .zl-modal__body .zl-modal-specs td {
    padding: 9px 0;
    font-size: 13px;
    line-height: 1.4;
    vertical-align: top;
  }
  .zl-modal__body .zl-modal-specs td:first-child {
    color: #4a4a4a;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
    font-weight: 500;
    width: 40%;
    padding-right: 12px;
  }
  .zl-modal__body .zl-modal-specs td:last-child {
    color: #1a1a1a;
    font-weight: 500;
  }
  .zl-modal__section-heading {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6D6A4E;
    margin: 0 0 10px;
  }
  .zl-modal__divider {
    border: none;
    border-top: 1px solid #D8D1CA;
    margin: 20px 0;
  }
 /* ============================================================
   ZL KIT INFO TABS (zl-kit-info.liquid) - v1.4 - 2026-07
   Tabs on desktop, single-open accordion on mobile.
   Content rendered once; chrome switched by breakpoint.
   Scoped to .zl-ki. Panels open via .zl-ki__item--open (JS).
   ============================================================ */

.zl-ki {
  padding: 40px 0 56px;
}

.zl-ki__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.zl-ki__heading {
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

/* -- Desktop tablist: hidden on mobile -- */
.zl-ki__tabs {
  display: none;
}

/* -- Accordion items (mobile baseline) -- */
.zl-ki__items {
  border-top: 1px solid #ECEAE6;
}

.zl-ki__item {
  border-bottom: 1px solid #ECEAE6;
}

.zl-ki__acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #1A1A1A;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.zl-ki__chev {
  flex: 0 0 auto;
  color: #7A7670;
  transition: transform 0.2s ease;
}

.zl-ki__item--open .zl-ki__chev {
  transform: rotate(180deg);
}

.zl-ki__panel {
  display: none;
  padding: 0 2px 22px;
  font-size: 15px;
  line-height: 1.6;
  color: #1A1A1A;
}

.zl-ki__item--open .zl-ki__panel {
  display: block;
}

/* Impulse rte overrides inside panels */
.zl-ki .zl-ki__panel p,
.zl-ki .zl-ki__panel li {
  font-size: 15px;
  color: #1A1A1A;
}

.zl-ki .zl-ki__panel ul {
  padding-left: 20px;
  margin: 12px 0 0;
}

.zl-ki .zl-ki__panel li {
  margin-bottom: 6px;
}

/* -- Kit information (custom.whats_included richtext) -- */
.zl-ki__kit-summary {
  margin: 0;
}

/* -- Shipping & Returns panel (PDP-mirrored copy) -- */
.zl-ki__sub-heading {
  font-family: 'Satoshi', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 8px;
}

.zl-ki__divider {
  border: 0;
  border-top: 1px solid #ECEAE6;
  margin: 18px 0;
}

.zl-ki__table {
  border-collapse: collapse;
  margin: 10px 0;
}

.zl-ki__table td {
  padding: 5px 18px 5px 0;
  font-size: 15px;
  color: #1A1A1A;
  border-bottom: 1px solid #ECEAE6;
}

.zl-ki__note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: #7A7670;
}

.zl-ki .zl-ki__note p {
  font-size: 13px;
  color: #7A7670;
  margin: 0 0 6px;
}

.zl-ki__help-link {
  font-size: 13px;
  margin: 12px 0 0;
}

.zl-ki__help-link a {
  color: #7A7670;
  text-decoration: underline;
}

.zl-ki__help-link a:hover {
  color: #1A1A1A;
}

/* Retained for pages saved on v1.0 markup */
.zl-ki__ship-block + .zl-ki__ship-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #ECEAE6;
}

/* ==============================================
   Desktop: tablist replaces accordion heads
   ============================================== */
@media (min-width: 769px) {

  .zl-ki__tabs {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid #ECEAE6;
    margin-bottom: 26px;
  }

  .zl-ki__tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 12px 2px 14px;
    cursor: pointer;
    font-family: 'Satoshi', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #7A7670;
    transition: color 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .zl-ki__tab:hover {
    color: #1A1A1A;
  }

  .zl-ki__tab[aria-selected="true"] {
    color: #1A1A1A;
    border-bottom-color: #1A1A1A;
  }

  .zl-ki__acc-head {
    display: none;
  }

  .zl-ki__items {
    border-top: 0;
  }

  .zl-ki__item {
    border-bottom: 0;
  }

  .zl-ki__panel {
    padding: 0;
  }

}
/* ============================================================
   ZL STORY BLOCK - rotating promo stamp overlay
   Set the section's Anchor ID to "story-stamp" to switch it on.
   ============================================================ */
.zl-story-block[data-anchor="story-stamp"] .zl-sb__media-wrap::after{
  content:"";
  position:absolute;
  top:18px;
  right:18px;
  width:120px;
  height:120px;
  z-index:3;
  pointer-events:none;
  background:url("/cdn/shop/files/zl-story-stamp.svg?v=1783663126") center/contain no-repeat;
  animation:zl-stamp-spin 24s linear infinite;
}

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

@media (prefers-reduced-motion:reduce){
  .zl-story-block[data-anchor="story-stamp"] .zl-sb__media-wrap::after{
    animation:none;
  }
}
/* ============================================================
   ZL PDP INFO ROWS (2026-style) on the CUSTOM product template
   ------------------------------------------------------------
   Copied 2026-08 from main-product-2026's section-scoped styles
   so snippets/zl-pdp-row.liquid renders identically inside
   main-product-custom (.product-section wrapper). The 2026
   section keeps its own scoped copy (wins on specificity, same
   values). Dedupe when custom products fold into 2026.
   ============================================================ */
.product-section .zl-info-cards {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.product-section .product-block:has(.zl-info-cards) {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.product-section .zl-info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  background: transparent;
  cursor: pointer;
  border: none;
  border-top: 1px solid #D8D1CA;
  border-bottom: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.product-section .product-block:has(.zl-info-cards):not(:has(+ .product-block:has(.zl-info-cards))) .zl-info-card:last-child {
  border-bottom: 1px solid #D8D1CA;
}
.product-section .product-block:has(.zl-info-cards) + .product-block:has(.zl-info-cards) .zl-info-card:first-child {
  border-top: none;
}
.product-section .zl-info-card:hover,
.product-section .zl-info-card:focus-visible {
  opacity: 0.7;
  outline: none;
}
.product-section .zl-info-card__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-section .zl-info-card__icon svg {
  width: 16px;
  height: 16px;
  stroke: #6D6A4E;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.product-section .zl-info-card__body {
  flex: 1;
  min-width: 0;
}
.product-section .zl-info-card__label {
  font-size: 14px;
  font-weight: 500;
  color: #020611;
  line-height: 1.3;
}
.product-section .zl-info-card__sub {
  font-size: 13px;
  font-weight: 400;
  color: #6A717F;
  margin-top: 2px;
  line-height: 1.4;
}
.product-section .zl-info-card__cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding-right: 0;
  transition: transform 0.3s ease;
}
.product-section .zl-info-card__cta svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #6A717F;
  stroke-width: 1.5;
  transition: stroke 0.2s ease, transform 0.3s ease;
}
.product-section .zl-info-card__cta::after {
  display: none;
}
.product-section .zl-info-card.open .zl-info-card__cta svg {
  transform: rotate(180deg);
}
.product-section .zl-info-card:hover .zl-info-card__cta svg {
  stroke: #020611;
}
.product-section .zl-acc-block {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.product-section .zl-acc-trigger {
  width: 100%;
}
.product-section .zl-acc-trigger[aria-expanded="true"] .zl-info-card__cta svg {
  transform: rotate(180deg);
}
.product-section .zl-acc-body {
  overflow: hidden;
}
.product-section .zl-acc-body[hidden] {
  display: none;
}
.product-section .zl-acc-content {
  padding: 4px 0 16px 36px;
  font-size: 14px;
  line-height: 1.65;
  color: #3a3a3a;
  text-align: left; /* the custom template centres its buy-box column on mobile; 2026 shows this left-aligned */
}
.product-section .zl-acc-content p {
  margin: 0 0 10px;
}
.product-section .zl-acc-content p:last-child {
  margin-bottom: 0;
}
.product-section .zl-acc-content--highlights ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-section .zl-acc-content--highlights li {
  position: relative;
  padding-left: 15px;
  font-size: 14px;
  line-height: 1.5;
  color: #1A1A1A;
  text-align: left;
}
.product-section .zl-acc-content--highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6D6A4E;
}
@media screen and (max-width: 767px) {
  .product-section .zl-info-card {
    padding: 10px 0;
  }
  .product-section .zl-acc-content {
    padding-left: 28px;
  }
}