/** Shopify CDN: Minification failed

Line 2783:0 Unexpected "`"

**/
a:not(.a--no-hover-color):not(.btn){
  --color-a: var(--color-text-link-block, var(--color-accent-section, var(--color-text-link-main)));
}
a{
  color: var(--color-a, inherit);
  text-decoration: none;
  outline: 0;
  transition: color var(--duration-medium) var(--animation-bezier);
}
@media (min-width:1025px){
  a:not(.a--no-hover-color):not(.btn):hover{
    --color-a-hover: var(--color-text-link-hover-block, var(--color-accent-section, var(--color-text-link-hover-main)));
  }
  a:hover{
    color: var(--color-a-hover, inherit);
    text-decoration: underline;
  }
}
a.clear-underline{
  text-decoration: none;
}
a[href*="tel:"]{
  text-decoration: none;
}
a[href*="tel:"]:hover{
  color: var(--color-text,  var(--color-base-section, var(--color-base)));
}

h1,h2,h3,.h1,.h2,.h3{
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  color: var(--color-heading-block, var(--color-base-section, var(--color-heading-main)));
  line-height: var(--font-heading-line-height);
  word-break: break-word;
}
h4,h5,h6,.h4,.h5,.h6{
  font-family: var(--font-h4h5h6-family,var(--font-heading-family));
  font-style: var(--font-h4h5h6-style,var(--font-heading-style));
  font-weight: var(--font-h4h5h6-weight,var(--font-heading-weight));
  color: var(--color-heading-block, var(--color-base-section, var(--color-heading-main)));
  line-height: var(--font-heading-line-height);
  word-break: break-word;
}
.section-heading-text{
  color: var(--color-base-section, var(--color-heading-main));
}
.section-heading-desc-text{
  color: var(--color-base-section, var(--color-base));
}
.h1,.h2,.h3,.h4,.h5,.h6{
  margin: 0;
}
h1>a,h2>a,h3>a,h4>a,h5>a,h6>a,
.h1>a,.h2>a,.h3>a,.h4>a,.h5>a,.h6>a{
  color: var(--color-heading-block, var(--color-base-section, var(--color-heading-main)));
}
.subheading{
  color: var(--color-accent-section ,var(--color-subheading-main));
}
@media (min-width: 1025px){
  h1,h2{
  	--h-mt: var(--main-text-top-offset);
    --h-mb: var(--main-text-bottom-offset);
  }
}
@media (max-width: 1024px){
  h1,h2{
  	--h-mt: var(--main-text-top-offset);
    --h-mb: var(--main-text-bottom-offset);
  }
}
h1,.h1{
  font-size: calc(48px * var(--font-h1h2h3_scale, var(--font-heading-scale)));
}
h2,.h2{
  font-size: calc(40px * var(--font-h1h2h3_scale, var(--font-heading-scale)));
}
h1,h2{
  margin-top: var(--h-mt, 0);
  margin-bottom: var(--h-mb, 0);
}
h3,.h3{
  font-size: calc(32px * var(--font-h1h2h3_scale, var(--font-heading-scale)));
}
@media (max-width: 576px){
	h1,.h1{
	  font-size: calc(36px * var(--font-h1h2h3_scale, var(--font-heading-scale)));
	}
	h2,.h2{
	  font-size: calc(32px * var(--font-h1h2h3_scale, var(--font-heading-scale)));
	}
	h3,.h3{
	  font-size: calc(28px * var(--font-h1h2h3_scale, var(--font-heading-scale)));
	}
}
h4,.h4{
  font-size: calc(24px * var(--font-h4h5h6_scale, var(--font-heading-scale)));
}
h5,.h5{
  font-size: calc(19px * var(--font-h4h5h6_scale, var(--font-heading-scale)));
}
h6,.h6{
  font-size: calc(16px * var(--font-h4h5h6_scale, var(--font-heading-scale)));
}
h3,h4,h5,h6{
  --h-mt: var(--main-text-top-offset);
  --h-mb: var(--main-text-bottom-offset);
  margin-top: var(--h-mt);
  margin-bottom: var(--h-mb);
}
.body2{
  font-size: var(--font-body2-size);
  line-height: var(--font-body2-line-height);
  font-weight: var(--font-body-weight);
}
.body3{
  font-size: var(--font-body3-size);
  line-height: var(--font-body3-line-height);
  font-weight: var(--font-body-weight);
}
@media (max-width:1024px){
  .body3-st{
    font-size: var(--font-body3-size);
    line-height: var(--font-body3-line-height);
    font-weight: var(--font-body-weight);
  }
}
.body3-no-scale{
  font-size: var(--font-body3-size-no-scale);
  line-height: var(--font-body3-line-height);
  font-weight: var(--font-body-weight);
}
strong,b,.strong{
  --font-body-weight-bold-value: var(--font-body-weight-bold);
  font-weight: var(--font-body-weight-bold);
}
h1.strong,h2.strong,h3.strong,h4.strong,h5.strong,h6.strong,.h1.strong,.h2.strong,.h3.strong,.h4.strong,.h5.strong,.h6.strong,
h1 strong,h2 strong,h3 strong,h4 strong,h5 strong,h6 strong,.h1 strong,.h2 strong,.h3 strong,.h4 strong,.h5 strong,.h6 strong,
h1 b,h2 b,h3 b,h4 b,h5 b,h6 b,.h1 b,.h2 b,.h3 b,.h4 b,.h5 b,.h6 b{
  font-weight: var(--font-heading-weight);
}
p{
  margin: var(--main-text-top-offset) 0 0;
}
ul, ol{
  margin-top:var(--main-text-top-offset);
  margin-bottom:0;
  padding-left: 28px;
}
.unstyle-ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
a:empty, ul:empty, dl:empty, p:empty {
  display: none;
}

img{
  max-width: 100%;
  vertical-align: middle;
}
meta+img,p+img{
  max-width: 100%;
  vertical-align: middle;
  margin: var(--main-text-top-offset) 0 0;
}
p span img{
  max-width: 100%;
  vertical-align: middle;
}
button, button:active, button:focus {
  outline: none;
}
button {
  border: none;
}

.section-background--small{
  --section-background-spacing: var(--sections-top-spacing--small);
  --section-background-spacing-mobile: var(--sections-top-spacing--small-mobile);
}
.section-background--medium{
  --section-background-spacing: var(--sections-top-spacing--medium);
  --section-background-spacing-mobile: var(--sections-top-spacing--medium-mobile);
}
.section-background--normal{
  --section-background-spacing: var(--sections-top-spacing);
  --section-background-spacing-mobile: var(--sections-top-spacing-mobile);
}
.section-background{
  padding-top: var(--section-background-spacing, 0);
  padding-bottom: var(--section-background-spacing, 0);
  padding-left: 0;
  padding-right: 0;
  background: var(--color-section-background-custom, var(--color-section-background));
}
.background__horizontal-line{
  width:100%;
  height:1px;
  background:var(--color-lines);
}
.section-background--no-color{
  background: unset;
}
@media(min-width: 577px){
  [class*="page-wi"] .section-background{
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media(max-width: 576px){
  .section-background{
    padding-top: var(--section-background-spacing-mobile, 0);
    padding-bottom: var(--section-background-spacing-mobile, 0);
  }
  [class*="page-"].section-background--mobile-width{
    padding-left: 0;
    padding-right: 0;
  }
  [class*="page-wi"] .section-background{
    padding-left: var(--grid-padding);
    padding-right:var(--grid-padding);
    border-radius:0;
  }
  .background__page-padding0{
    --grid-padding: 0;
  }
}

.border__radius,
.image--radius img{
  border-radius: var(--radius);
}

.section-heading-elements{
  display:flex;
  flex-direction:column;
  gap:16px;
}
@media (min-width:1025px){
  .heading-with-button{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "b c";
  }
  .heading-with-button.text-center{
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "a b c";
  }
  .heading-with-button>*:first-child{
    grid-area:b;
  }
  .heading-with-button>*:last-child{
    text-align:right;
    grid-area:c;
    margin-top: auto;
  }
  .section-heading-elements+.secondary-btn__container{
    justify-content: flex-end!important;
  }
}
@media (max-width:1024px){
  .heading-with-button>*:last-child{
    display: none;
  }
}

.mt3{margin-top:3px;}
.mt5{margin-top:5px;}
.mt6{margin-top:6px;}
.mt8{margin-top:8px;}
.mt10{margin-top:10px;}
.mt13{margin-top:13px;}
.mt15{margin-top:15px;}
.mt16{margin-top:var(--main-text-section-top-offset);}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.page-content__mockup .section-heading-container+*,
.section-heading-container:not(.section-heading-container--no-bt)+*,
.mt40{margin-top:40px;}
.mb8{margin-bottom:8px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb16{margin-bottom:16px;}
.mb20{margin-bottom:20px;}
.mb25{margin-bottom:25px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mt-first-0>*:first-child{margin-top:0;}
.text-center{text-align: center !important;}
.text-left{text-align: left !important;}
.text-right{text-align: right !important;}
.nomargin{margin: 0;}
.mt--first-child-0 > *:first-child{margin-top:0;}
.mb--last-child-0 > *:last-child{margin-bottom:0;}
.text-uppercase{text-transform: uppercase !important;}
.justify-content-center{justify-content: center !important;}
.justify-content-end{justify-content: flex-end !important;}
.align-items-start{align-items: flex-start !important;}
.align-items-center{align-items: center !important;}
.align-items-end{align-items: flex-end !important;}
.align-self-center{align-self: center !important;}
.align-self-end{align-self: flex-end !important;}
.display-block{display: block;}
.display-flex{display: flex;}
.display-flex--column{flex-direction:column;}
.display-inline-flex{display: inline-flex;}
.justify-content-between{justify-content: space-between;}
.position-relative{position: relative;}
.hidden, .hide{display: none !important;}
.body-bold-weight{font-weight: var(--font-body-weight-bold);}
.visibility-hidden{
  visibility: hidden;
  display: none !important;
}
.visibility-hidden:first-child+*:not(.visibility-hidden){
  margin-top: 0;
}
@media (max-width:1024px){
  .hide-st{
    display:none;
  }
}
.mt0{margin-top: 0px;}
.mb0{margin-bottom: 0px;}
@media (min-width:577px){
  .mt--first-child-0-desktop > *:first-child{margin-top:0;}
}

blockquote{
  background: rgba(var(--color-base-rgb),.05);
  border-radius: var(--radius);
  padding: 30px;
  margin: var(--main-text-top-offset) 0 0;
}
blockquote>:first-child{
  margin: 0;
}

svg.theme-icon path,
svg.theme-icon rect{
  fill: var(--color-text-icons-block, var(--color-base-section, var(--color-text-icons-main)));
}
svg > *{
  transition: fill var(--duration-medium) var(--animation-bezier);
}
.placeholder__svg--bg{
  position: relative;
  overflow: hidden;
  width: 100%;
}
.placeholder__svg--bg-none{
  background: rgba(0,0,0,0);
}
.icon-as-image img{
  width:var(--icon-image-width, 40px);
  height:auto;
}

.placeholder__svg--bg svg{
  display: flex;
  width: 100%;
  height: auto;
}
tag-image{
  display:flex;
  width:100%;
}
.image-hover-box__container{
  display:block;
  position:relative;
  overflow:hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  height: max-content;
  z-index:0;
}
.image-hover-box{
  display:block;
  position:relative;
  border-radius: var(--custom-image-radius, var(--radius));
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  z-index:0;
}
.image-hover-box>*{
  pointer-events:none;
}
.change-to__small-radius .product-card swiper-slider,
.change-to__small-radius .image-hover-box,
.image-hover-box__small-radius{
  border-radius: var(--radius-image);
}
.image-hover-box--circle{
  border-radius: 50%!important;
}
@media (min-width:577px){
  .image-aspratio-round--desktop{
    border-radius: 50%!important;
  }
}
@media (max-width:576px){
  .image-aspratio-round--mobile{
    border-radius: 50%!important;
  }
}

summary {
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
[style*="--aspect-ratio"]{
  position: relative;
  overflow: hidden;
  width: 100%;
  z-index:0;
}
[style*="--aspect-ratio"] img,
[style*="--aspect-ratio"].placeholder__svg--bg svg{
  backface-visibility: hidden;
  transform: translateZ(0);
  object-fit: cover;
  object-position: var(--media-object-position, center);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:0;
}
.image-fit-contain [style*="--aspect-ratio"] img{
  object-fit: contain;
}
[style*="--aspect-ratio"]:before{
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(100%/(0 + var(--aspect-ratio, 1 / 1)));
  transition: background 1s var(--animation-bezier);
}
[style*="--aspect-ratio"].bg-preloader:before{
  background:var(--color-image-preloader-bg);
}
[style*="--aspect-ratio"].bg-preloader:has(.image-loaded):before{
  background:transparent; 
}
@media (max-width: 576px){
  [style*="--aspect-ratio-mobile"]:before{
    --aspect-ratio: var(--aspect-ratio-mobile);
  }
}
@media (min-width: 1025px){
  .image-hover01 .image-hover-box>*,
  .image-hover01-personal .image-hover-personal-element .image-hover-box>*{
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }
  .image-hover01:not(.image-hover01-rotate-personal):hover .image-hover-box>*,
  .image-hover01-personal:hover .image-hover-personal-element  .image-hover-box>*{
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  .image-hover01.image-hover01-rotate:hover .image-hover-box>*,
  .image-hover01.image-hover01-rotate-personal:hover .image-hover-personal-element  .image-hover-box>*{
    -webkit-transform: scale(1.2) rotate(-10deg);
    transform: scale(1.2) rotate(-10deg);
  }
  .image-hover02 .image-hover-box img,
  .image-hover02-personal .image-hover-personal-element .image-hover-box img,
  .image-hover02 .image-hover-box svg{
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }
  .image-hover02:hover .image-hover-box img,
  .image-hover02-personal:hover .image-hover-personal-element  .image-hover-box img,
  .image-hover02:hover .image-hover-box svg{
    max-width:116%;
    width:116%;
    height:116%;
  }
  .image-hover03 .image-hover-box>*,
  .image-hover03-personal .image-hover-personal-element .image-hover-box>*{
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }
  .image-hover03:hover .image-hover-box>*,
  .image-hover03-personal:hover .image-hover-personal-element  .image-hover-box>*{
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  .image-hover04 .image-hover-box img,
  .image-hover04-personal .image-hover-personal-element .image-hover-box img,
  .image-hover04 .image-hover-box svg{
    max-width:116%;
    width:116%;
    height:116%;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }
  .image-hover04:hover .image-hover-box img,
  .image-hover04-personal:hover .image-hover-personal-element  .image-hover-box img,
  .image-hover04:hover .image-hover-box svg{
    max-width:100%;
    width:100%;
    height:100%;
  }
  .image-hover05 .image-hover-box img,
  .image-hover05-personal .image-hover-personal-element .image-hover-box img,
  .image-hover05 .image-hover-box svg{
    left: 0;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }
  .image-hover05:hover .image-hover-box img,
  .image-hover05-personal:hover .image-hover-personal-element  .image-hover-box img,
  .image-hover05:hover .image-hover-box svg{
    left: -30px;
  }
  [class*="image-hover05"] img,
  [class*="image-hover05"] .placeholder__svg--bg svg{
    width: calc(100% + 30px);
    max-width:unset;
  }
  .image-hover06 .image-hover-box>*:after,
  .image-hover06-personal .image-hover-personal-element .image-hover-box>*:after{
    position: absolute;
    top: 0;
    left: -150%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
  }
  .image-hover06:hover .image-hover-box>*:after,
  .image-hover06-personal:hover .image-hover-personal-element  .image-hover-box>*:after{
    -webkit-animation: shine .75s;
    animation: shine .75s;
  }
  @-webkit-keyframes shine {
    1% {
      left: -100%;
    }
    100% {
      left: 125%;
    }
  }
  @keyframes shine {
    1% {
      left: -100%;
    }
    100% {
      left: 125%;
    }
  }
}

table{
  overflow:hidden;
  border: 0;
  padding: 0;
  background: none;
  border-collapse: separate;
  border-spacing: 0;
  border-radius:var(--radius-table);
  width: 100%;
  text-align: left;
  border: var(--border);
  --border: 1px solid var(--color-lines);
  word-break: break-word;
}
.scroll-table-mobile:not(:only-child) table,
table:not(:only-child){
  margin-top:var(--main-text-top-offset);
}
dd,dl{
  margin:0;
}
th{
  font-weight:var(--font-body-weight-bold);
}
td{
  font-weight:var(--font-body-weight);
  border:none;
}
table.rounded-corners th:not(:last-child),
table.rounded-corners td:not(:last-child) {
  border-right: var(--border);
}
table>thead>tr:not(:last-child)>th,
table>thead>tr:not(:last-child)>td,
table>tbody>tr:not(:last-child)>th,
table>tbody>tr:not(:last-child)>td,
table>tfoot>tr:not(:last-child)>th,
table>tfoot>tr:not(:last-child)>td,
table>thead:not(:last-child)>tr>th,
table>thead:not(:last-child)>tr>td,
table>tbody:not(:last-child)>tr>th,
table>tbody:not(:last-child)>tr>td,
table>tfoot:not(:last-child)>tr>th,
table>tfoot:not(:last-child)>tr>td,
table>tr:not(:last-child)>td,
table>tr:not(:last-child)>th,
table>thead:not(:last-child),
table>tbody:not(:last-child),
table>tfoot:not(:last-child) {
  border-bottom: var(--border);
}
table th:not(:last-child),
table td:not(:last-child){
  border-right: var(--border);
}
td, th {
  padding:10px;
}
table h1, table h2, table h3, table h4, table h5, table h6{
  margin-top: 0;
  margin-bottom: 0;
}
table thead{
  text-align: left;
}
@media (max-width:576px){
  .scroll-table-mobile{
    overflow-y: hidden;
    overflow-x: auto;
    width: calc(100% + 15px);
    padding-right:20px;
  }
  .scroll-table-mobile table{
    width: max-content!important;
    min-width: 100%;
    max-width: 767px;
  }
}
.page-content__mockup img{
  border-radius:var(--radius);
}
.page-content__mockup iframe{
  display:block;
  border-radius: var(--radius);
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  margin-top:var(--main-text-top-offset);
}
.page-content__mockup p iframe{
  margin-top:0;
}

.link{
  --color-link-text:var(--color-link-button-block, var(--color-accent-section, var(--color-link-button)));
  --color-link-icon:var(--color-link-button-icon-block, var(--color-accent-section, var(--color-link-button-icon)));
  --color-link-text-hover:var(--color-link-button-block-hover, var(--color-base-section, var(--color-link-button-hover)));
  --color-link-icon-hover:var(--color-link-button-icon-block-hover, var(--color-base-section, var(--color-link-button-icon-hover)));
  cursor: pointer;
  display: inline-flex;
  gap:5px;
  align-items: center;
  border: none;
  box-shadow: none;
  text-decoration: none;
  background-color: transparent;
  position:relative;
  padding: 0;
  margin: 0;
  text-decoration: none;
  color:var(--color-link-text);
  font-family:var(--font-body-family);
  font-style:var(--font-body-style);
  font-size:var(--font-body3-size);
  line-height:var(--font-body3-line-height);
  transition: color var(--duration-medium) var(--animation-bezier);
}
.link.link--medium{
  font-size: var(--font-body2-size);
  line-height: var(--font-body2-line-height);
  gap:8px;
}
.link.link--big{
  font-size: calc(19px * var(--font-h4h5h6_scale, var(--font-heading-scale)));
  font-family: var(--font-h4h5h6-family,var(--font-heading-family));
  font-style: var(--font-h4h5h6-style,var(--font-heading-style));
  font-weight: var(--font-h4h5h6-weight,var(--font-heading-weight));
  line-height: var(--font-heading-line-height);
}
.link--max-content{
  width:max-content;
}
.link svg{
  flex: 0 0 auto;
}
.link svg path{
  fill: var(--color-link-icon);
}
.link.link-hover-span span{
  position:relative;
}
.link:not(.link-hover-span):before,
.link.link-hover-span span:before{
  content: "";
  position: absolute;
  width: 0;
  height:var(--animation-underline-thin);
  left: 0;
  top: 100%;
  background: var(--color-link-text-hover);
  transition: width var(--duration-medium) var(--animation-bezier);
  pointer-events:none;
}
.link.link--no-underline:before,
.link.link--no-underline span:before{
  content:none;
}
.link.link-hover-span span span:before{
  content: none;
}
.link.link-hover-span--underline span:before{
  width: 100%;
  background: var(--color-link-text);
}
.heading-color-block-main,
.heading-color-block-hover{
  --color-heading-block:var(--color-heading-link-block, var(--color-base-section, var(--color-heading-main)));
  color:var(--color-heading-block);
}
.heading-color-block-main.animation-underline{
  --color-hover:var(--color-heading-block);
}
@media (min-width: 1025px){
  .heading-color-block-hover {
    transition: color var(--duration-medium) var(--animation-bezier);
  }
  .heading-color-block-hover.animation-underline{
    --color-hover:var(--color-heading-hover-block, var(--color-accent-section, var(--color-accent)));
  }
  .hover-area:hover .link:not(.native-hover),
  .link:not(:empty):not(.empty):hover{
    text-decoration:none;
    color:var(--color-link-text-hover);
  }
  .heading-color-block-hover:hover,
  .hover-area:hover .heading-color-block-hover:not(.native-hover){
    text-decoration:none;
    color:var(--color-heading-hover-block, var(--color-accent-section, var(--color-accent)));
  }
  .hover-area:hover .link:not(.native-hover) svg path,
  .link:hover svg path{
    fill:var(--color-link-icon-hover);
  }
  .hover-area:hover .link:not(.native-hover):not(.link-hover-span):hover:before,
  .link:not(.link-hover-span):hover:before,
  .hover-area:hover .link.link-hover-span:not(.native-hover):hover span:before,
  .link.link-hover-span:hover span:before{
    text-decoration: none;
    width: 100%;
  }
  .link.link-hover-span--underline:hover span:before{
    width: 0%;
  }
}
.link.active,
.link.link-active{
  color:var(--color-link-text-hover);
}
.link.active svg path,
.link.link-active svg path{
  fill:var(--color-link-icon-hover);
}
.link.link-hover-span.active span:before,
.link.link-hover-span.link-active span:before{
  text-decoration: none;
  width: 100%;
}
.link__base-to_accent-color{
  --color-link-text: var(--color-link-button-block-inverse, var(--color-base-section, var(--color-base)));
  --color-link-icon: var(--color-link-button-icon-block-inverse, var(--color-base-section, var(--color-base)));
  --color-link-text-hover: var(--color-link-button-block-inverse-hover, var(--color-accent-section, var(--color-accent)));
  --color-link-icon-hover: var(--color-link-button-icon-block-inverse-hover, var(--color-accent-section, var(--color-accent)));
}

.btn{
  --background: var(--color-button-block, var(--color-accent-section, var(--color-button_main, var(--color-accent))));
  --color:var(--color-button-text_main, var(--color-base));
  --border:var(--color-button-border_main);
  --background-hover: var(--color-button-hover-block, var(--color-base-section, var(--color-button-hover_main, var(--color-base))));
  --background-program-hover: var(--background-hover);
  --color-hover:var(--color-button-text-hover_main, var(--color-accent));
  --border-hover:var(--color-button-border-hover_main);
  --border-width:var(--border-button-width_main);
  --border-width-hover:var(--border-button-width-hover_main);
  --icon:var(--color-button-icon_main, var(--color-base));
  --icon-hover:var(--color-button-icon-hover_main, var(--color-accent));
  --button-opacity-hover:var(--color-button-opacity-hover_main);
  --shadow-button-current:var(--shadow-button_main);
  --shadow-button-current-hover:var(--shadow-button-hover_main);
  --self-border-width:var(--border-button-width-value_main);
  --height:var(--button-height);
  --height-mobile:var(--button-height-mob);
  position: relative;
  display: inline-flex;
  vertical-align:top;
  justify-content: center;
  align-items:center;
  text-align:center;
  font-family: var(--font-button-family, var(--font-body-family));
  font-style: var(--font-button-style, var(--font-body-style));
  font-weight: var(--font-button-weight);
  font-size: calc(14px * var(--font-button_scale, var(--font-body-scale)));
  line-height: var(--font-body2-line-height);
  height:var(--height);
  background: transparent;
  color: var(--color);
  border-radius: var(--radius-button);
  padding: 0 25px 0;
  width: auto;
  text-decoration: none;
  cursor: pointer;
  box-shadow:var(--shadow-button-current);
  transition: color var(--duration-medium) var(--animation-bezier),
              box-shadow var(--duration-medium) var(--animation-bezier);
}
.btn-font{
  font-family: var(--font-button-family, var(--font-body-family));
  font-style: var(--font-button-style, var(--font-body-style));
  font-weight: var(--font-button-weight);
  font-size: calc(14px * var(--font-button_scale, var(--font-body-scale)));
  line-height: var(--font-body2-line-height);
}
.btn>*{
  position:relative;
  z-index:1;
}
.btn-small-width{
  width:max-content;
}
.btn__texts{
  pointer-events:none;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  height:calc(var(--height) - var(--self-border-width) * 2);
  z-index:1;
}
.btn--large{
  --height:var(--button-height-big);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
}
.btn--border{
  --background: var(--color-button-block_secondary, var(--color-button_secondary, var(--color-body-background)));
  --color:var(--color-button-text_secondary, var(--color-accent-section, var(--color-accent)));
  --border:var(--color-button-border_secondary-block, var(--color-accent-section, var(--color-button-border_secondary, var(--color-accent))));
  --background-hover: var(--color-button-hover-block_secondary, var(--color-accent-section, var(--color-button-hover_secondary, var(--color-accent))));
  --color-hover:var(--color-button-text-hover_secondary, var(--color-base));
  --border-hover:var(--color-button-border-hover_secondary);
  --border-width:var(--border-button-width_secondary);
  --border-width-hover:var(--border-button-width-hover_secondary);
  --icon:var(--color-button-icon_secondary, var(--color-accent-section, var(--color-accent)));
  --icon-hover:var(--color-button-icon-hover_secondary, var(--color-base));
  --button-opacity-hover:var(--color-button-opacity-hover_secondary);
  --shadow-button-current:var(--shadow-button_secondary);
  --shadow-button-current-hover:var(--shadow-button-hover_secondary);
  --self-border-width:var(--border-button-width-value_secondary);
}
.btn--tabs{
  --background: var(--color-button-block_tabs, var(--color-button_tabs, var(--color-secondary-background)));
  --color:var(--color-button-text-block_tabs, var(--color-base-section, var(--color-button-text_tabs, var(--color-base))));
  --border:var(--color-button-border_tabs, var(--color-secondary-background));
  --background-hover: var(--color-button-hover-block_tabs, var(--color-base-section, var(--color-button-hover_tabs, var(--color-base))));
  --color-hover:var(--color-button-text-hover_tabs);
  --border-hover:var(--color-button-border-hover_tabs);
  --border-width:var(--border-button-width_tabs);
  --border-width-hover:var(--border-button-width-hover_tabs);
  --icon:var(--color-button_tabs-icon, var(--color));
  --icon-hover:var(--color-button-hover_tabs-icon, var(--color-hover));
  --button-opacity-hover:var(--color-button-opacity-hover_tabs);
  --shadow-button-current:unset;
  --shadow-button-current-hover:unset;
  --self-border-width:var(--border-button-width-value_tabs);
}
.btn--tabs.active{
  --background: var(--color-button-hover-block_tabs, var(--color-base-section, var(--color-button-hover_tabs, var(--color-base))));
  --color:var(--color-button-text-hover_tabs);
  --icon:var(--color-button-hover_tabs-icon, var(--color-button-text-hover_tabs));
  --border:var(--color-button-border-hover_tabs);
  --border-width:var(--border-button-width-hover_tabs);
  --button-opacity:var(--color-button-opacity-hover_tabs);
  cursor: default;
  pointer-events: none;
}
.btn--checkout{
  --radius-button:var(--radius-button-product-page);
  --background: var(--color-button-block, var(--color-accent-section, var(--color-button_checkout, var(--color-accent))));
  --color:var(--color-button-text_checkout, var(--color-accent));
  --border:var(--color-button-border_checkout, var(--color-accent));
  --background-hover: var(--color-button-hover-block, var(--color-base-section, var(--color-button-hover_checkout, var(--color-base))));
  --color-hover:var(--color-button-text-hover_checkout, var(--color-base));
  --border-hover:var(--color-button-border-hover_checkout);
  --border-width:var(--border-button-width_checkout);
  --border-width-hover:var(--border-button-width-hover_checkout);
  --icon:var(--color-button-icon_checkout, var(--color-accent));
  --icon-hover:var(--color-button-icon-hover_checkout, var(--color-base));
  --button-opacity-hover:var(--color-button-opacity-hover_checkout);
  --shadow-button-current:var(--shadow-button_checkout);
  --shadow-button-current-hover:var(--shadow-button-hover_checkout);
  --self-border-width:var(--border-button-width-value_checkout);
  --height:var(--button-height-big);
}
.btn--addtocart-page{
  --radius-button:var(--radius-button-product-page);
  --background: var(--color-button-block_addtocart, var(--color-accent-section, var(--color-button_addtocart, var(--color-accent))));
  --color:var(--color-button-text_addtocart, var(--color-accent));
  --border:var(--color-button-border_addtocart, var(--color-accent));
  --background-hover: var(--color-button-hover-block_addtocart, var(--color-base-section, var(--color-button-hover_addtocart, var(--color-base))));
  --color-hover:var(--color-button-text-hover_addtocart, var(--color-base));
  --border-hover:var(--color-button-border-hover_addtocart);
  --border-width:var(--border-button-width_addtocart);
  --border-width-hover:var(--border-button-width-hover_addtocart);
  --icon:var(--color-button-icon_addtocart, var(--color-accent));
  --icon-hover:var(--color-button-icon-hover_addtocart, var(--color-base));
  --button-opacity-hover:var(--color-button-opacity-hover_addtocart);
  --shadow-button-current:var(--shadow-button_addtocart);
  --shadow-button-current-hover:var(--shadow-button-hover_addtocart);
  --self-border-width:var(--border-button-width-value_addtocart);
}
.btn span>svg{
  max-width:20px;
  max-height:20px;
}
.btn svg path{
  fill: var(--icon);
  transition: fill var(--duration-medium) var(--animation-bezier);
}
.btn:hover{
  text-decoration: none;
}
.btn__top-text,
.btn__bottom-text{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.btn__top-text>svg,
.btn__bottom-text>svg{
  flex:0 0 auto;
}
.btn__no-shadow{
  box-shadow:unset;
}
.btn:before,
.btn:after{
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius: var(--radius-button);
  background: var(--background-hover);
  z-index:0;
  opacity:0;
  transition: all var(--duration-medium) var(--animation-bezier);
  border: var(--border-width) solid var(--border);
}
.btn:after{
  border: var(--border-width-hover) solid var(--border-hover);
}
.btn:before{
  background: var(--background);
  opacity:1;
  transition: none;
}
.secondary-btn__container{
  display: flex;
  flex-wrap:wrap;
  gap:15px;
}
@media (min-width:1025px){
  .hover-area:hover .btn:not(.native-hover),
  .btn:hover{
    color: var(--color-hover);
    box-shadow:var(--shadow-button-current-hover);
  }
  .hover-area:hover .btn:not(.native-hover) svg path,
  .btn:hover svg path{
    fill: var(--icon-hover);
  }
  .hover-area:hover .btn:not(.native-hover):before,
  .btn:hover:before{
    opacity:0;
    transition: all var(--duration-medium) 100ms var(--animation-bezier);
  }
  .hover-area:hover .btn:not(.native-hover):after,
  .btn:hover:after{
    opacity:1;
  }
  .btn__transition-text .btn__top-text.is-visible {
    position: relative;
    top: 0;
    padding-bottom: 1px;
  }
  .btn__transition-text .btn__bottom-text.is-hidden {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding-bottom: 1px;
    color: var(--color-hover);
  }
  svg~.btn__bottom-text.is-hidden{
    left: 30px;
  }
  .btn__transition-text .btn__bottom-text,
  .btn__transition-text .btn__top-text {
    transition: top 0.4s, transform 0.4s;
  }
  .hover-area:hover .btn__transition-text:not(.native-hover) .btn__bottom-text.is-hidden,
  .btn__transition-text:hover .btn__bottom-text.is-hidden {
    top: 50%;
    transform: translate(0, -50%);
  }
  .hover-area:hover .btn__transition-text:not(.native-hover) .btn__top-text.is-visible,
  .btn__transition-text:hover .btn__top-text.is-visible {
    top: -20em;
  }
}
@media (min-width:577px){
  .btn-wide{
    width:100%;
    max-width:var(--button-width-wide);
  }
  .btn-wide2{
    min-width:var(--button-width-wide);
    max-width:100%;
  }
}
@media (max-width:1024px){ 
  .btn__bottom-text.is-hidden {
    display:none;
  }
  .w-t-full{
    width:100%;
    max-width:100%;
  }
}
@media (max-width:576px){
  .btn{
    --height:var(--height-mobile);
  }
  .btn--large,.btn--checkout{
    --height:var(--button-height-big-mob);
  }
  .btn-wide-mob,
  .btn-wide,
  .btn-wide2{
    width:100%;
  }
}
.btn[aria-disabled=true]{
  cursor: not-allowed;
  opacity:.3;
}
.link[aria-disabled=true]{
  cursor: not-allowed;
  opacity: .5;
  pointer-events: none;
}
.separate-line{
  height:1px;
  background:var(--color-lines);
  width:100%;
}

.animation-underline{
  --color-hover:var(--color-animation-underline,var(--color-accent-section, var(--color-accent)));
  display: inline-flex;
  position: relative;
  text-decoration: none;
}
.animation-underline:before{
  content: "";
  position: absolute;
  width: 0;
  height: var(--animation-underline-thin);
  left: 0;
  top: 100%;
  background: var(--color-hover);
  transition: width var(--duration-medium) var(--animation-bezier);
  pointer-events:none;
}
.animation-underline--active:before{
  width: 100%;
}
@media (min-width: 1025px){
  .animation-underline:hover{
    text-decoration:none;
  }
  .hover-area:hover .animation-underline:not(.native-hover):before,
  .animation-underline:hover:before{
    text-decoration: none;
    width: 100%;
  }
  .hover-area:hover .animation-underline:not(.native-hover):not(.default-state):hover:before{
    text-decoration: none;
    width: 0;
  }
  .button-transition-up>*,
  a.transition-up>*{
    position:relative;
    transition: all 0.20s ease-out;
  }
  .button-transition-up:hover>*,
  a.transition-up:hover>*{
    transform: translateY(-5px);
  } 
}
.badges__container{
  display:flex;
  gap:3px;
  flex-wrap:wrap;
  pointer-events:none;
  font-weight: var(--font-body-weight-bold);
}
.badges__container--gap5{
  gap:5px;
}
.badges__container .badges-item__menu{
  margin-left:0;
}
.badges-item__small{
  border-radius:var(--radius-badge);
  font-size:10px;
  padding: 2px 5px 3px;
}
.badges-item__medium{
  border-radius:var(--radius-badge);
  font-size:12px;
  padding: 7px 12px;
  width:max-content;
}
.badges-item__menu{
  display:inline-flex;
  margin-left:5px;
  vertical-align: middle;
  background:var(--auto-accent-color-bg);
  color:var(--auto-accent-color-text);
}

.overflow-hidden-mobile,
.overflow-hidden-tablet,
.overflow-hidden {
  overflow: hidden;
}
@media (min-width: 1025px){
  .hide-desktop{
    display:none !important;
  }
}
@media (max-width: 1024px){
  .hide-mobile-xl-st{
    display:none !important;
  }
}

terms_and_condition-checkbox{
  display:block;
}
terms_and_condition-checkbox:not(.checked)+*,
terms_and_condition-checkbox:not(.checked)~.cart__dynamic-checkout-buttons {
  pointer-events: none;
  opacity: .3;
}

.accent-color{
  color:var(--color-accent-section, var(--color-accent));
}
.accent-to-base-color{
  color:var(--color-base);
}
.w-full {width:100%;}
.h-full {height:100%;}
@media (min-width:577px){
  .h-full-desktop-tablet {height:100%;}
}
@media (max-width:576px){
  .w-full-mobile {
    width:100%;
  }
}
.shopify-challenge__message{
  margin:0 0 30px;
}
.shopify-challenge__container .shopify-challenge__button{
  margin:40px auto 0;
}
.shopify-challenge__container{
  margin:200px auto;
}

.section__richtext__editor>:first-child{
  margin-top:0;
}
.section__richtext__editor h1,
.section__richtext__editor h2,
.section__richtext__editor h3,
.section__richtext__editor h4,
.section__richtext__editor h5,
.section__richtext__editor h6{
  margin: 0;
}
.section__richtext__editor ul,
.section__richtext__editor ol{
  margin:0;
  padding:0 0 0 40px;
  max-width: max-content;
}
.text-center .section__richtext__editor ul,
.text-center .section__richtext__editor ol,
.text-center.section__richtext__editor ul,
.text-center.section__richtext__editor ol{
  margin-left: auto;
  margin-right: auto;
}
.section__richtext__editor>*:not(:first-child){
  margin-top:16px;
}
.section__richtext__editor.section__richtext__editor--mt10>*:not(:first-child){
  margin-top:10px;
}

.loading-overlay__spinner{
  position:absolute;
  width: 20px;
  height: 20px;
  display: inline-flex;
  z-index: 1;
}
.loading > *:not(.loading-overlay__spinner){
  opacity: 0;
  visibility: hidden;
}
.spinner {
  animation: rotator 1.4s linear infinite;
}
@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
.path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: var(--color-loader, var(--color-base-section, var(--color-base)));
  animation: dash 1.4s ease-in-out infinite;
}
.btn .path {
  stroke: var(--icon-hover);
}
@media screen and (forced-colors: active) {
  .path{
    stroke: CanvasText;
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(450deg);
  }
}
@media (hover:hover){
  .modal-close-animation svg{
    transition: transform var(--duration-medium) cubic-bezier(0.5, -0.33, 0.26, 1.19);
  }
  .modal-close-animation:hover svg{
    transform: rotate(90deg);
  }
}

.themeloader_container {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:100;
  opacity:0;
  visibility:hidden;
  transition: opacity var(--duration-medium) var(--animation-bezier),
              visibility var(--duration-medium) var(--animation-bezier);
}
.themeloader_container--absolute {
  position:absolute;
}
@media (min-width:1025px){
  .themeloader_container {
    left:var(--left, 0);
    right:var(--right, 0);
  }
}
.themeloader_container.loading_now {
  opacity:1;
  visibility:visible;
}
.themeloader_container__content{
  transform: scale(.7);
}
.themeloader {
  -webkit-animation: rotate 1.2s linear infinite normal;
          animation: rotate 1.2s linear infinite normal;
  position: relative;
  transform-origin: 50% 50%;
  transform: scale(0.7);
}
.themeloader__ball {
  height: 1.75rem;
  left: -0.875rem;
  position: absolute;
  top: -0.875rem;
  transform-origin: 50% 50%;
  width: 1.75rem;
}
.themeloader__ball:nth-of-type(2) {
  transform: rotate(120deg);
}
.themeloader__ball:nth-of-type(3) {
  transform: rotate(240deg);
}
.themeloader__ball::after {
  -webkit-animation: moveAndScale 0.6s ease-in-out infinite alternate;
          animation: moveAndScale 0.6s ease-in-out infinite alternate;
  background-color: var(--color-accent);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  transform-origin: 50% 50%;
}

@-webkit-keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes moveAndScale {
  0%, 15% {
    transform: translateY(0) scale(0.65);
  }
  100% {
    transform: translateY(-150%) scale(1);
  }
}
@keyframes moveAndScale {
  0%, 15% {
    transform: translateY(0) scale(0.65);
  }
  100% {
    transform: translateY(-150%) scale(1);
  }
}
.big-svg-icon svg{
  width:40px;
  height:40px;
}
.big-svg-icon__opacity-20{
  opacity:0.2;
}
.color-error{
  color:var(--color-error);
}

*:focus {
  outline: 0;
}
*:focus-visible:not(textarea):not(input):not(select){
  outline: 4px solid #0909FF;
  outline-offset: 3px;
}
.breadcrumb-background{
  background:var(--color-breadcrumb-background, transparent);
}
@media (min-width:1025px){
  .breadcrumb .breadcrumb-background-boxed{
    padding-left:20px;
    padding-right:20px;
    border-radius:var(--radius);
    background:var(--color-breadcrumb-background, transparent);
  }
}
@media (max-width:1024px){
  .breadcrumb:has(.breadcrumb-background-boxed){
    background:var(--color-breadcrumb-background, transparent);
  }
}
.breadcrumb__container{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 5px;
  column-gap: 21px;
  padding:18px 0;
  color:var(--color-breadcrumb-text, var(--color-base));
}
.breadcrumb li {
  position:relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}
.breadcrumb li:not(:last-child):before {
  content:"";
  display:flex;
  position:absolute;
  right:-11px;
  width:1px;
  height:15px;
  background:var(--color-breadcrumb-line, var(--color-lines));
}
.breadcrumb__container__home svg path{
  fill: var(--color-breadcrumb-text, var(--color-base));
}
.breadcrumb__container__home:hover svg path{
  fill: var(--color-breadcrumb-text-hover, var(--color-accent));
}
.breadcrumb .link{
    --color-link-text: var(--color-breadcrumb-text, var(--color-base));
    --color-link-text-hover: var(--color-breadcrumb-text-hover, var(--color-accent));
}
body:has(header .page-wide) .breadcrumb .page-width{
  width: 100%;
  max-width: unset;
  margin-left: unset;
  margin-right: unset;
}
@media (min-width:1025px){
  .content-for-layout .shopify-policy__container{
    max-width: calc(var(--page-width) * 2 / 3);
    width: calc(var(--page-width) * 2 / 3);
  }
}
.index-top-spacing-none+[class*="top-spacing"]{
  margin-top:0;
}
.footer__content{
  margin-top: auto;
}
shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--radius-button);
  --shopify-accelerated-checkout-button-block-size:50px;
}
.cart-notification__content shopify-accelerated-checkout,
.cart-notification__content shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size:40px;
}
@media(min-width:1025px){
  .text-center-desktop{text-align: center !important;}
  .justify-content-center-desktop{justify-content: center !important;}
}
@media(min-width:577px){
  
  .product-card-name-size{
    font-size:var(--product-name-size);
  }
}
@media(max-width:576px){
  .product-card-name-size{
    font-size:var(--product-name-size-mobile);
  }
}

.shopify-section-clip{
  overflow-x:clip;
}

/* ==============================
   MARIPOSAS SON COLOMBIA
   CSS FINAL AJUSTADO
   Tipografías más finas, títulos moderados y secciones centradas
   ============================== */

:root {
  --msc-verde: #568688;
  --msc-coral: #F99D75;
  --msc-verde-suave: #B7D9B7;
  --msc-amarillo: #F2C949;

  /* Escala ajustada: antes estaba demasiado grande */
  --msc-h1: clamp(34px, 3.7vw, 56px);
  --msc-h2: clamp(26px, 2.45vw, 38px);
  --msc-h3: clamp(18px, 1.45vw, 25px);
  --msc-h4: clamp(16px, 1.22vw, 22px);
  --msc-h5: clamp(14px, 1.05vw, 18px);
  --msc-body: clamp(13px, .9vw, 15px);
  --msc-small: clamp(11px, .78vw, 13px);
}

/* Tipografía general */
body,
p,
span,
li,
label,
input,
textarea,
select {
  font-family: var(--font-body-family, 'Quicksand', sans-serif) !important;
  color: var(--msc-verde);
}

/* Links */
a,
.link {
  font-family: var(--font-body-family, 'Quicksand', sans-serif);
  color: var(--color-a, var(--msc-verde));
}

/* Quitar capitalización automática en títulos */
h1,
h2,
h3,
h4,
h5,
h6,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.heading,
.main-heading,
.section-heading,
.section-title,
.title,
.title-wrapper .title,
.rich-text__heading,
.banner__heading,
.slideshow__heading,
.image-banner__heading,
.collection-hero__title,
.product__title,
.card__heading,
.block-heading,
.block__heading,
[class*="heading"],
[class*="title"] {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Botones */
.button,
.btn,
button,
.shopify-payment-button__button,
.banner__buttons .button,
.slideshow__buttons .button {
  font-family: var(--font-body-family, 'Quicksand', sans-serif) !important;
  text-transform: none !important;
  letter-spacing: .02em !important;
}

/* H1 / hero principal */
h1,
.h1,
.banner__heading,
.slideshow__heading,
.image-banner__heading {
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif) !important;
  font-size: var(--msc-h1) !important;
  line-height: 1.04 !important;
  font-weight: var(--font-heading-weight, 500) !important;
  color: var(--msc-verde) !important;
}

/* H2 / títulos de secciones */
h2,
.h2,
.main-heading,
.section-heading,
.section-title,
.title-wrapper .title,
.rich-text__heading,
.collection-hero__title {
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif) !important;
  font-size: var(--msc-h2) !important;
  line-height: 1.08 !important;
  font-weight: var(--font-heading-weight, 500) !important;
  color: var(--msc-verde) !important;
}

/* H3 */
h3,
.h3 {
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif) !important;
  font-size: var(--msc-h3) !important;
  line-height: 1.18 !important;
  font-weight: 500 !important;
  color: var(--msc-verde) !important;
}

/* H4 / H5 moderados */
h4,
.h4,
[id*="shopify-section"] h4,
[id*="shopify-section"] .h4 {
  font-size: var(--msc-h4) !important;
  line-height: 1.22 !important;
  color: var(--msc-verde) !important;
}

h5,
.h5,
[id*="shopify-section"] h5,
[id*="shopify-section"] .h5 {
  font-size: var(--msc-h5) !important;
  line-height: 1.25 !important;
  color: var(--msc-verde) !important;
}

/* Textos descriptivos */
.main-desc,
.section-description,
.banner__text,
.slideshow__text,
.rte,
.rte p,
.product__description,
.card__information p,
.section-heading-desc-text {
  font-family: var(--font-body-family, 'Quicksand', sans-serif) !important;
  font-size: var(--msc-body) !important;
  line-height: 1.48 !important;
  color: var(--msc-verde);
}

/* Títulos pequeños de secciones personalizadas */
[id*="shopify-section"] .main-heading,
[id*="shopify-section"] .section-heading,
[id*="shopify-section"] .rich-text__heading,
[id*="shopify-section"] .title-wrapper .title {
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif) !important;
  font-size: var(--msc-h2) !important;
  line-height: 1.08 !important;
  color: var(--msc-verde) !important;
  text-transform: none !important;
}

/* Productos: mantener legibles pero no gigantes */
.product-card-wrapper .card__heading,
.card-wrapper .card__heading,
.product__title,
.product-card-title,
.card-information__text,
.product-card__title,
.product-item__title,
.product-title {
  font-family: var(--font-body-family, 'Quicksand', sans-serif) !important;
  font-size: clamp(11.5px, .82vw, 13.5px) !important;
  line-height: 1.28 !important;
  font-weight: 500 !important;
  color: var(--msc-verde) !important;
  text-transform: none !important;
}

.price,
.price *,
.product-card .price,
.card-information .price {
  font-size: clamp(11.5px, .82vw, 13.5px) !important;
  line-height: 1.25 !important;
  color: var(--msc-verde) !important;
}

/* Botones de tema */
.btn,
.button,
.shopify-payment-button__button {
  --color-button-block: var(--msc-verde);
  --color-button-text_main: #ffffff;
  --color-button-border_main: var(--msc-verde);
  --color-button-hover-block: var(--msc-coral);
  --color-button-text-hover_main: #ffffff;
  --color-button-border-hover_main: var(--msc-coral);
  font-size: clamp(11px, .78vw, 13px) !important;
}

/* No bloquear colores internos del banner de temporada */
.msc-season-banner__button {
  background: var(--msc-button-bg) !important;
  border-color: var(--msc-button-bg) !important;
  color: var(--msc-button-text) !important;
}

.msc-season-banner__button:hover {
  background: var(--msc-button-hover-bg) !important;
  border-color: var(--msc-button-hover-bg) !important;
  color: var(--msc-button-hover-text) !important;
}

/* Quitar espacios entre menú y hero */
body.template-index .content-for-layout,
body.template-index #MainContent,
body.template-index main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

[id*="hero_transformacion_mariposas"],
[id*="hero_transformacion_mariposas"] .section-background,
[id*="hero_transformacion_mariposas"] [class*="section-background"],
[id*="hero_transformacion_mariposas"] [class*="top-spacing"],
[id*="hero_transformacion_mariposas"] .banner,
[id*="hero_transformacion_mariposas"] .banners {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================================
   HOME · Ajuste general de jerarquía
========================================================= */

body.template-index h1,
body.template-index .h1 {
  font-size: clamp(34px, 3.5vw, 54px) !important;
}

body.template-index h2,
body.template-index .h2,
body.template-index .section-heading,
body.template-index .main-heading,
body.template-index .section-title,
body.template-index .title-wrapper .title {
  font-size: clamp(25px, 2.35vw, 36px) !important;
  line-height: 1.08 !important;
}

body.template-index h3,
body.template-index .h3 {
  font-size: clamp(17px, 1.35vw, 24px) !important;
}

body.template-index p,
body.template-index li {
  font-size: clamp(12.5px, .86vw, 14.5px) !important;
  line-height: 1.42 !important;
}

/* =========================================================
   HOME · Encuentra el regalo ideal / Categorías Loto
   Corrige caja corrida hacia la izquierda y centra contenido
========================================================= */

.msc-categories-loto {
  text-align: center !important;
}

.msc-categories-loto .msc-categories-loto__inner {
  width: min(100% - 40px, 1240px) !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

.msc-categories-loto .msc-categories-loto__heading {
  text-align: center !important;
  max-width: 720px !important;
  width: 100% !important;
  margin: 0 auto 22px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.msc-categories-loto .msc-categories-loto__heading *,
.msc-categories-loto .msc-categories-loto__subheading,
.msc-categories-loto .msc-categories-loto__title,
.msc-categories-loto .msc-categories-loto__desc,
.msc-categories-loto .msc-categories-loto__desc * {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.msc-categories-loto .msc-categories-loto__subheading {
  font-size: clamp(10.5px, .75vw, 12px) !important;
  line-height: 1.25 !important;
  margin-bottom: 5px !important;
  letter-spacing: .03em !important;
}

.msc-categories-loto .msc-categories-loto__title {
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif) !important;
  font-size: clamp(24px, 2.1vw, 32px) !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  max-width: 720px !important;
}

.msc-categories-loto .msc-categories-loto__desc {
  max-width: 520px !important;
  margin-top: 7px !important;
  font-size: clamp(11.5px, .78vw, 13px) !important;
  line-height: 1.35 !important;
}

.msc-categories-loto .msc-categories-loto__slider-wrap {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.msc-categories-loto .msc-categories-loto__grid {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  align-items: start !important;
}

.msc-categories-loto .msc-category-card {
  text-align: center !important;
}

.msc-categories-loto .msc-category-card__link {
  display: block !important;
  text-align: center !important;
}

.msc-categories-loto .msc-category-card__content {
  padding: 8px 4px 0 !important;
  text-align: center !important;
}

.msc-categories-loto .msc-category-card__content *,
.msc-categories-loto .msc-category-card__title,
.msc-categories-loto .msc-category-card__description,
.msc-categories-loto .msc-category-card__description * {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.msc-categories-loto .msc-category-card__title {
  font-family: var(--font-heading-family, 'Fraunces', Georgia, serif) !important;
  font-size: clamp(12.5px, .84vw, 14.5px) !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
  margin-bottom: 3px !important;
}

.msc-categories-loto .msc-category-card__description {
  max-width: 205px !important;
  font-size: clamp(9.8px, .68vw, 11.5px) !important;
  line-height: 1.25 !important;
}

/* =========================================================
   HOME · Beneficios / diferenciales
========================================================= */

body.template-index [class*="benefit"] h3,
body.template-index [class*="trust"] h3,
body.template-index [class*="benefit"] .h5,
body.template-index [class*="trust"] .h5 {
  font-size: clamp(13px, .95vw, 16px) !important;
  line-height: 1.18 !important;
}

body.template-index [class*="benefit"] p,
body.template-index [class*="trust"] p {
  font-size: clamp(10.8px, .72vw, 12.5px) !important;
  line-height: 1.28 !important;
}

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

/* Quitar espacio blanco entre diferenciales finales y footer */
.shopify-section:has(.msc-final-differentials) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.shopify-section:has(.msc-final-differentials) + .shopify-section,
.shopify-section:has(.msc-final-differentials) + footer,
.footer,
.footer__content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Si el tema agrega espacio al último módulo antes del footer */
body.template-index .content-for-layout > .shopify-section:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================================
   Mobile
========================================================= */

@media screen and (max-width: 749px) {
  :root {
    --msc-h1: clamp(28px, 7.5vw, 38px);
    --msc-h2: clamp(23px, 6.2vw, 31px);
    --msc-h3: clamp(17px, 4.4vw, 22px);
    --msc-h4: clamp(15px, 3.8vw, 19px);
    --msc-h5: clamp(13px, 3.4vw, 17px);
    --msc-body: 13px;
  }

  h1,
  .h1,
  .banner__heading,
  .slideshow__heading,
  .image-banner__heading {
    font-size: var(--msc-h1) !important;
    line-height: 1.05 !important;
  }

  h2,
  .h2,
  .main-heading,
  .section-heading,
  .section-title,
  .title-wrapper .title,
  .rich-text__heading {
    font-size: var(--msc-h2) !important;
    line-height: 1.08 !important;
  }

  h3,
  .h3,
  .block-heading,
  .block__heading,
  .card__heading {
    font-size: var(--msc-h3) !important;
  }

  h4,
  .h4,
  [id*="shopify-section"] h4,
  [id*="shopify-section"] .h4 {
    font-size: var(--msc-h4) !important;
    line-height: 1.2 !important;
  }

  h5,
  .h5,
  [id*="shopify-section"] h5,
  [id*="shopify-section"] .h5 {
    font-size: var(--msc-h5) !important;
    line-height: 1.22 !important;
  }

  .msc-categories-loto .msc-categories-loto__inner {
    width: min(100% - 24px, 1240px) !important;
  }

  .msc-categories-loto .msc-categories-loto__heading {
    max-width: 340px !important;
    margin-bottom: 18px !important;
  }

  .msc-categories-loto .msc-categories-loto__title {
    font-size: clamp(22px, 6.2vw, 30px) !important;
    line-height: 1.08 !important;
  }

  .msc-categories-loto .msc-categories-loto__desc {
    font-size: 11.8px !important;
    line-height: 1.32 !important;
    max-width: 320px !important;
  }

  .msc-categories-loto .msc-category-card__title {
    font-size: 11.5px !important;
    line-height: 1.12 !important;
  }

  .msc-categories-loto .msc-category-card__description {
    font-size: 9.8px !important;
    line-height: 1.22 !important;
    max-width: 150px !important;
  }
}


/* Botón Añadir al carrito - texto e ícono blanco */
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full,
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full *,
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full span,
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full svg,
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full svg path {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Fondo del botón */
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full {
  background-color: #F99D75 !important;
  border-color: #F99D75 !important;
}

/* Hover */
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full:hover,
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full:hover *,
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full:hover span,
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full:hover svg,
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full:hover svg path {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full:hover {
  background-color: #568688 !important;
  border-color: #568688 !important;
}


/* =========================================================
   MARIPOSAS SON COLOMBIA · CORRECCIÓN GLOBAL BOTONES TEXTO BLANCO V3
   Objetivo:
   - Evitar textos turquesa sobre fondos turquesa o naranja.
   - Forzar texto e íconos blancos en CTAs y botones principales.
   - No afectar controles de cantidad, paginación, filtros ni botones icon-only.
========================================================= */

/* 1) Botones principales del theme / Wokiee */
.btn:not(.quantity__button):not(.pagination__item):not(.slider-button):not(.facets__button):not(.search__button),
.button:not(.quantity__button):not(.pagination__item):not(.slider-button):not(.facets__button):not(.search__button),
.shopify-payment-button__button,
.product-form__submit,
.btn--addtocart-page,
.add-to-cart,
.button--add-to-cart,
.product-form button[type="submit"],
.product-form__buttons button[type="submit"],
.cart__checkout-button,
.checkout-button,
.contact__button button,
.newsletter-form__button,
.customer button,
button[name="add"],
button[type="submit"].btn,
a.btn,
a.button,
[class*="btn--"]:not(.quantity__button):not(.pagination__item):not(.slider-button),
[class*="button--"]:not(.quantity__button):not(.pagination__item):not(.slider-button) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 2) Textos internos, spans animados e íconos SVG dentro de botones */
.btn:not(.quantity__button):not(.pagination__item):not(.slider-button):not(.facets__button):not(.search__button) *,
.button:not(.quantity__button):not(.pagination__item):not(.slider-button):not(.facets__button):not(.search__button) *,
.shopify-payment-button__button *,
.product-form__submit *,
.btn--addtocart-page *,
.add-to-cart *,
.button--add-to-cart *,
.product-form button[type="submit"] *,
.product-form__buttons button[type="submit"] *,
.cart__checkout-button *,
.checkout-button *,
.contact__button button *,
.newsletter-form__button *,
.customer button *,
button[name="add"] *,
button[type="submit"].btn *,
a.btn *,
a.button *,
[class*="btn--"]:not(.quantity__button):not(.pagination__item):not(.slider-button) *,
[class*="button--"]:not(.quantity__button):not(.pagination__item):not(.slider-button) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* 3) Estados hover, focus y active: siempre blanco */
.btn:not(.quantity__button):not(.pagination__item):not(.slider-button):not(.facets__button):not(.search__button):hover,
.btn:not(.quantity__button):not(.pagination__item):not(.slider-button):not(.facets__button):not(.search__button):focus,
.btn:not(.quantity__button):not(.pagination__item):not(.slider-button):not(.facets__button):not(.search__button):active,
.button:not(.quantity__button):not(.pagination__item):not(.slider-button):not(.facets__button):not(.search__button):hover,
.button:not(.quantity__button):not(.pagination__item):not(.slider-button):not(.facets__button):not(.search__button):focus,
.button:not(.quantity__button):not(.pagination__item):not(.slider-button):not(.facets__button):not(.search__button):active,
.shopify-payment-button__button:hover,
.shopify-payment-button__button:focus,
.shopify-payment-button__button:active,
.product-form__submit:hover,
.product-form__submit:focus,
.product-form__submit:active,
.btn--addtocart-page:hover,
.btn--addtocart-page:focus,
.btn--addtocart-page:active,
.add-to-cart:hover,
.add-to-cart:focus,
.add-to-cart:active,
.button--add-to-cart:hover,
.button--add-to-cart:focus,
.button--add-to-cart:active,
.cart__checkout-button:hover,
.cart__checkout-button:focus,
.cart__checkout-button:active,
.checkout-button:hover,
.checkout-button:focus,
.checkout-button:active,
button[name="add"]:hover,
button[name="add"]:focus,
button[name="add"]:active,
a.btn:hover,
a.btn:focus,
a.btn:active,
a.button:hover,
a.button:focus,
a.button:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 4) Refuerzo para textos internos en hover/focus/active */
.btn:not(.quantity__button):not(.pagination__item):not(.slider-button):not(.facets__button):not(.search__button):hover *,
.btn:not(.quantity__button):not(.pagination__item):not(.slider-button):not(.facets__button):not(.search__button):focus *,
.btn:not(.quantity__button):not(.pagination__item):not(.slider-button):not(.facets__button):not(.search__button):active *,
.button:not(.quantity__button):not(.pagination__item):not(.slider-button):not(.facets__button):not(.search__button):hover *,
.button:not(.quantity__button):not(.pagination__item):not(.slider-button):not(.facets__button):not(.search__button):focus *,
.button:not(.quantity__button):not(.pagination__item):not(.slider-button):not(.facets__button):not(.search__button):active *,
.product-form__submit:hover *,
.product-form__submit:focus *,
.product-form__submit:active *,
.btn--addtocart-page:hover *,
.btn--addtocart-page:focus *,
.btn--addtocart-page:active *,
.add-to-cart:hover *,
.add-to-cart:focus *,
.add-to-cart:active *,
.button--add-to-cart:hover *,
.button--add-to-cart:focus *,
.button--add-to-cart:active *,
.cart__checkout-button:hover *,
.cart__checkout-button:focus *,
.cart__checkout-button:active *,
.checkout-button:hover *,
.checkout-button:focus *,
.checkout-button:active *,
button[name="add"]:hover *,
button[name="add"]:focus *,
button[name="add"]:active *,
a.btn:hover *,
a.btn:focus *,
a.btn:active *,
a.button:hover *,
a.button:focus *,
a.button:active * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* 5) Botones por configuración de color del theme.
   Cuando el theme usa variables CSS para texto del botón, también las forzamos. */
.btn,
.button,
.shopify-payment-button__button,
.product-form__submit,
.btn--addtocart-page,
.cart__checkout-button,
.checkout-button,
a.btn,
a.button {
  --color-button-text: #ffffff !important;
  --color-button-text_main: #ffffff !important;
  --color-button-text-hover_main: #ffffff !important;
  --color-button-icon-main: #ffffff !important;
  --color-button-icon-hover-main: #ffffff !important;
  --color-button-text2: #ffffff !important;
  --color-button-text-hover2: #ffffff !important;
  --color-button-icon2: #ffffff !important;
  --color-button-icon-hover2: #ffffff !important;
}

/* 6) Botones personalizados de Mariposas / páginas internas */
.msc-mm-btn,
.msc-mm-btn *,
.msc-season-banner__button,
.msc-season-banner__button *,
.msc-categories-loto a[class*="button"],
.msc-categories-loto a[class*="button"] *,
.msc-duo a,
.msc-duo a *,
.msc-final-differentials a,
.msc-final-differentials a *,
[class*="mariposas"] .btn,
[class*="mariposas"] .btn *,
[class*="mariposas"] .button,
[class*="mariposas"] .button *,
[class*="mariposas"] a[class*="btn"],
[class*="mariposas"] a[class*="btn"] *,
[class*="mariposas"] a[class*="button"],
[class*="mariposas"] a[class*="button"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* 7) Botones de banners, featured collections y blog */
[data-section-type*="banner"] .btn,
[data-section-type*="banner"] .btn *,
[data-section-type*="banner"] .button,
[data-section-type*="banner"] .button *,
.banner .btn,
.banner .btn *,
.banner .button,
.banner .button *,
.banners .btn,
.banners .btn *,
.banners .button,
.banners .button *,
.featured-collection .btn,
.featured-collection .btn *,
.featured-collection .button,
.featured-collection .button *,
.blog-posts .btn,
.blog-posts .btn *,
.blog-posts .button,
.blog-posts .button * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* 8) NO tocar controles que deben mantener otro color */
.quantity,
.quantity *,
.quantity__button,
.quantity__button *,
.quantity__input,
.pagination,
.pagination *,
.slider-button,
.slider-button *,
.facets__button,
.facets__button *,
.search__button,
.search__button *,
.header__icon,
.header__icon *,
.menu-drawer__close-button,
.menu-drawer__close-button * {
  -webkit-text-fill-color: currentColor !important;
}

/* 9) Botón añadir al carrito específico por clase detectada */
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full,
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full *,
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full span,
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full svg,
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full svg path {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full:hover,
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full:hover *,
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full:hover span,
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full:hover svg,
.product-form__submit.btn.btn--addtocart-page.btn__transition-text.w-full:hover svg path {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}


/* =========================================================
   MARIPOSAS SON COLOMBIA · CORRECCIÓN FONDOS BOTONES HOME V4
   Problema corregido:
   - Botones con texto blanco pero fondo blanco/transparente.
   - Botón "Ver todos los productos" en "Los más buscados".
   - CTAs principales del home que no toman bien el color del módulo.
   ========================================================= */

/* 1) Featured collection: Los más buscados / Experiencias para empresas
   Forzamos SOLO los CTAs de sección, no los iconos de producto. */
[id*="featured_favoritos_mariposas"] .btn:not(.slider-button):not(.pagination__item):not([class*="quick"]):not([class*="wishlist"]):not([class*="compare"]):not([class*="quantity"]),
[id*="featured_favoritos_mariposas"] .button:not(.slider-button):not(.pagination__item):not([class*="quick"]):not([class*="wishlist"]):not([class*="compare"]):not([class*="quantity"]),
[id*="featured_favoritos_mariposas"] a.btn,
[id*="featured_favoritos_mariposas"] a.button,
[id*="featured_favoritos_mariposas"] a[href*="/collections"]:not([href*="/products"]):not(.full-unstyled-link):not(.card__heading a),
[id*="featured_collection"] .btn:not(.slider-button):not(.pagination__item):not([class*="quick"]):not([class*="wishlist"]):not([class*="compare"]):not([class*="quantity"]),
[id*="featured_collection"] .button:not(.slider-button):not(.pagination__item):not([class*="quick"]):not([class*="wishlist"]):not([class*="compare"]):not([class*="quantity"]),
[id*="featured_collection"] a.btn,
[id*="featured_collection"] a.button,
[id*="featured_collection"] a[href*="/collections"]:not([href*="/products"]):not(.full-unstyled-link):not(.card__heading a) {
  background: #568688 !important;
  background-color: #568688 !important;
  border-color: #568688 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  box-shadow: none !important;
}

/* Texto interno del CTA de featured collection */
[id*="featured_favoritos_mariposas"] .btn:not(.slider-button):not(.pagination__item):not([class*="quick"]):not([class*="wishlist"]):not([class*="compare"]) *,
[id*="featured_favoritos_mariposas"] .button:not(.slider-button):not(.pagination__item):not([class*="quick"]):not([class*="wishlist"]):not([class*="compare"]) *,
[id*="featured_favoritos_mariposas"] a[href*="/collections"]:not([href*="/products"]):not(.full-unstyled-link):not(.card__heading a) *,
[id*="featured_collection"] .btn:not(.slider-button):not(.pagination__item):not([class*="quick"]):not([class*="wishlist"]):not([class*="compare"]) *,
[id*="featured_collection"] .button:not(.slider-button):not(.pagination__item):not([class*="quick"]):not([class*="wishlist"]):not([class*="compare"]) *,
[id*="featured_collection"] a[href*="/collections"]:not([href*="/products"]):not(.full-unstyled-link):not(.card__heading a) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Hover para esos CTAs */
[id*="featured_favoritos_mariposas"] .btn:not(.slider-button):not(.pagination__item):not([class*="quick"]):not([class*="wishlist"]):not([class*="compare"]):hover,
[id*="featured_favoritos_mariposas"] .button:not(.slider-button):not(.pagination__item):not([class*="quick"]):not([class*="wishlist"]):not([class*="compare"]):hover,
[id*="featured_favoritos_mariposas"] a[href*="/collections"]:not([href*="/products"]):not(.full-unstyled-link):not(.card__heading a):hover,
[id*="featured_collection"] .btn:not(.slider-button):not(.pagination__item):not([class*="quick"]):not([class*="wishlist"]):not([class*="compare"]):hover,
[id*="featured_collection"] .button:not(.slider-button):not(.pagination__item):not([class*="quick"]):not([class*="wishlist"]):not([class*="compare"]):hover,
[id*="featured_collection"] a[href*="/collections"]:not([href*="/products"]):not(.full-unstyled-link):not(.card__heading a):hover {
  background: #F99D75 !important;
  background-color: #F99D75 !important;
  border-color: #F99D75 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 2) Si el theme pinta el botón con pseudo-elementos, también los corregimos. */
[id*="featured_favoritos_mariposas"] .btn::before,
[id*="featured_favoritos_mariposas"] .btn::after,
[id*="featured_favoritos_mariposas"] .button::before,
[id*="featured_favoritos_mariposas"] .button::after,
[id*="featured_collection"] .btn::before,
[id*="featured_collection"] .btn::after,
[id*="featured_collection"] .button::before,
[id*="featured_collection"] .button::after {
  background-color: #568688 !important;
  border-color: #568688 !important;
}

/* 3) Botones CTA generales del home que NO son controles ni iconos */
.template-index .shopify-section a.btn:not(.slider-button):not(.pagination__item):not([class*="quick"]):not([class*="wishlist"]):not([class*="compare"]):not([class*="icon"]),
.template-index .shopify-section a.button:not(.slider-button):not(.pagination__item):not([class*="quick"]):not([class*="wishlist"]):not([class*="compare"]):not([class*="icon"]),
.template-index .shopify-section button.btn:not(.slider-button):not(.pagination__item):not([class*="quick"]):not([class*="wishlist"]):not([class*="compare"]):not([class*="icon"]) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 4) Botones tipo secundario del home:
   si quedan en blanco/transparente, les damos fondo turquesa. */
.template-index .btn--secondary,
.template-index .button--secondary,
.template-index .btn-secondary,
.template-index .secondary-button,
.template-index a[class*="secondary"]:not(.slider-button):not(.pagination__item) {
  background-color: #568688 !important;
  border-color: #568688 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.template-index .btn--secondary *,
.template-index .button--secondary *,
.template-index .btn-secondary *,
.template-index .secondary-button *,
.template-index a[class*="secondary"]:not(.slider-button):not(.pagination__item) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* 5) Botones naranja de banners / temporada: texto blanco, fondo naranja */
.msc-season-banner__button,
[id*="banner_temporada"] .btn,
[id*="banner_temporada"] .button,
[id*="banner_temporada"] a[class*="btn"],
[id*="banner_temporada"] a[class*="button"] {
  background-color: #F99D75 !important;
  border-color: #F99D75 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.msc-season-banner__button:hover,
[id*="banner_temporada"] .btn:hover,
[id*="banner_temporada"] .button:hover,
[id*="banner_temporada"] a[class*="btn"]:hover,
[id*="banner_temporada"] a[class*="button"]:hover {
  background-color: #568688 !important;
  border-color: #568688 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 6) Protección: no alterar producto, flechas, dots, búsqueda, cantidad o header */
.product-card-wrapper .btn,
.product-card-wrapper .button,
.card-wrapper .btn,
.card-wrapper .button,
.slider-button,
.slider-button *,
.pagination__item,
.pagination__item *,
.quantity,
.quantity *,
.quantity__button,
.quantity__button *,
.header__icon,
.header__icon *,
.search__button,
.search__button * {
  background-color: initial !important;
  -webkit-text-fill-color: currentColor !important;
}


/* =========================================================
   MARIPOSAS SON COLOMBIA · UBICACIÓN FINAL BOTÓN ESCRÍBENOS V5
   Corrige el botón "Escríbenos" en el módulo de ubicación.
   Problema: texto blanco sobre fondo blanco / transparente.
========================================================= */

/* Módulo ubicación final: primer botón "Cómo llegar" */
[id*="mariposas_ubicacion_final"] a.btn:first-of-type,
[id*="mariposas_ubicacion_final"] a.button:first-of-type,
[id*="mariposas_ubicacion_final"] .btn:first-of-type,
[id*="mariposas_ubicacion_final"] .button:first-of-type,
[id*="ubicacion"] a.btn:first-of-type,
[id*="ubicacion"] a.button:first-of-type {
  background-color: #568688 !important;
  border-color: #568688 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Módulo ubicación final: segundo botón "Escríbenos" */
[id*="mariposas_ubicacion_final"] a.btn:nth-of-type(2),
[id*="mariposas_ubicacion_final"] a.button:nth-of-type(2),
[id*="mariposas_ubicacion_final"] .btn:nth-of-type(2),
[id*="mariposas_ubicacion_final"] .button:nth-of-type(2),
[id*="ubicacion"] a.btn:nth-of-type(2),
[id*="ubicacion"] a.button:nth-of-type(2),
[id*="ubicacion"] .btn:nth-of-type(2),
[id*="ubicacion"] .button:nth-of-type(2),
[id*="mariposas_ubicacion_final"] .btn + .btn,
[id*="mariposas_ubicacion_final"] .button + .button,
[id*="ubicacion"] .btn + .btn,
[id*="ubicacion"] .button + .button {
  background-color: #F99D75 !important;
  border-color: #F99D75 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Texto, spans e íconos internos de ambos botones */
[id*="mariposas_ubicacion_final"] a.btn *,
[id*="mariposas_ubicacion_final"] a.button *,
[id*="mariposas_ubicacion_final"] .btn *,
[id*="mariposas_ubicacion_final"] .button *,
[id*="ubicacion"] a.btn *,
[id*="ubicacion"] a.button *,
[id*="ubicacion"] .btn *,
[id*="ubicacion"] .button * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Hover: ambos botones mantienen texto blanco */
[id*="mariposas_ubicacion_final"] a.btn:hover,
[id*="mariposas_ubicacion_final"] a.button:hover,
[id*="mariposas_ubicacion_final"] .btn:hover,
[id*="mariposas_ubicacion_final"] .button:hover,
[id*="ubicacion"] a.btn:hover,
[id*="ubicacion"] a.button:hover,
[id*="ubicacion"] .btn:hover,
[id*="ubicacion"] .button:hover {
  background-color: #568688 !important;
  border-color: #568688 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

[id*="mariposas_ubicacion_final"] a.btn:hover *,
[id*="mariposas_ubicacion_final"] a.button:hover *,
[id*="mariposas_ubicacion_final"] .btn:hover *,
[id*="mariposas_ubicacion_final"] .button:hover *,
[id*="ubicacion"] a.btn:hover *,
[id*="ubicacion"] a.button:hover *,
[id*="ubicacion"] .btn:hover *,
[id*="ubicacion"] .button:hover * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}


/* =========================================================
   MARIPOSAS SON COLOMBIA · BOTÓN DERECHO UBICACIÓN SECONDARY V6
   Botón derecho "Escríbenos"
   Clase: msc-location-banner__button msc-location-banner__button--secondary
========================================================= */

.msc-location-banner__button.msc-location-banner__button--secondary,
a.msc-location-banner__button.msc-location-banner__button--secondary,
button.msc-location-banner__button.msc-location-banner__button--secondary {
  background-color: #F99D75 !important;
  border-color: #F99D75 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

.msc-location-banner__button.msc-location-banner__button--secondary *,
a.msc-location-banner__button.msc-location-banner__button--secondary *,
button.msc-location-banner__button.msc-location-banner__button--secondary * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.msc-location-banner__button.msc-location-banner__button--secondary:hover,
a.msc-location-banner__button.msc-location-banner__button--secondary:hover,
button.msc-location-banner__button.msc-location-banner__button--secondary:hover,
.msc-location-banner__button.msc-location-banner__button--secondary:focus,
a.msc-location-banner__button.msc-location-banner__button--secondary:focus,
button.msc-location-banner__button.msc-location-banner__button--secondary:focus {
  background-color: #568688 !important;
  border-color: #568688 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

.msc-location-banner__button.msc-location-banner__button--secondary:hover *,
a.msc-location-banner__button.msc-location-banner__button--secondary:hover *,
button.msc-location-banner__button.msc-location-banner__button--secondary:hover *,
.msc-location-banner__button.msc-location-banner__button--secondary:focus *,
a.msc-location-banner__button.msc-location-banner__button--secondary:focus *,
button.msc-location-banner__button.msc-location-banner__button--secondary:focus * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* =========================================================
   AJUSTES MARIPOSARIO MÓVIL
   - Centrar botón "Cotizar experiencia"
   - Hacer módulos full width / sin márgenes
========================================================= */

/* ---------- 1. Botón centrado ---------- */
.msc-mm-hero__actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap;
  width: 100%;
  margin: 24px auto 0 auto !important;
  text-align: center;
  gap: 12px;
}

.msc-mm-hero__actions .msc-mm-btn {
  margin: 0 !important;
}

/* Si solo quieres forzar específicamente el primer botón */
.msc-mm-hero__actions .msc-mm-btn--coral {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- 2. Utilidad full bleed ---------- */
.msc-mm-hero__claim,
.msc-mm-hero__image-wrap,
.msc-mm-benefits,
.msc-mm-formats__bar,
.msc-mm-figures,
.msc-mm-gallery__bar,
.msc-mm-cta {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* ---------- 3. Hero más ancho / sin cajón angosto ---------- */
.msc-mm-hero__image {
  width: 100% !important;
  max-width: none !important;
  min-height: clamp(380px, 52vw, 660px);
}

/* ---------- 4. Quitar márgenes laterales a secciones clave ---------- */
.msc-mm-benefits,
.msc-mm-figures,
.msc-mm-cta {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- 5. Contenedores internos un poco más amplios ---------- */
.msc-mm-benefits__grid,
.msc-mm-formats__grid,
.msc-mm-gallery__grid,
.msc-mm-audiences .msc-mm-container,
.msc-mm-process .msc-mm-container,
.msc-mm-cta__inner {
  width: min(100% - 48px, 1280px) !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- 6. Barras de color de lado a lado ---------- */
.msc-mm-benefits__bar,
.msc-mm-formats__bar,
.msc-mm-figures__bar,
.msc-mm-gallery__bar {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* ---------- 7. La galería puede respirar más ---------- */
.msc-mm-gallery__grid {
  width: min(100% - 40px, 1320px) !important;
  max-width: 1320px !important;
}

/* ---------- 8. CTA final realmente ancho ---------- */
.msc-mm-cta__inner {
  width: min(100% - 48px, 1320px) !important;
  max-width: 1320px !important;
}

/* ---------- 9. Responsive ---------- */
@media (max-width: 749px) {
  .msc-mm-benefits__grid,
  .msc-mm-formats__grid,
  .msc-mm-gallery__grid,
  .msc-mm-audiences .msc-mm-container,
  .msc-mm-process .msc-mm-container,
  .msc-mm-cta__inner {
    width: min(100% - 24px, 100%) !important;
  }

  .msc-mm-hero__actions {
    flex-direction: column;
  }

  .msc-mm-hero__actions .msc-mm-btn {
    width: 100%;
    max-width: 320px;
  }
}




/* Espacio general antes del footer - reducido */
#MainContent,
main[role="main"],
.main-content {
  padding-bottom: 35px !important;
}

/* Más aire en página de carrito - reducido */
.template-cart #MainContent,
.template-cart main[role="main"],
.template-cart .main-content,
.template-cart .cart-page,
.template-cart .cart,
.template-cart .cart__items {
  padding-bottom: 45px !important;
}

/* Separación visual superior del footer - reducido */
footer,
.footer,
.shopify-section-group-footer-group {
  margin-top: 20px !important;
}

/* Footer con aire interno reducido */
footer,
.footer {
  padding-top: 25px !important;
  padding-bottom: 20px !important;
}
```

Si solo quieres aplicarlo en carrito, usa este:


/* Espacio inferior solo en carrito - reducido */
.template-cart #MainContent,
.template-cart main[role="main"],
.template-cart .main-content,
.template-cart .cart-page,
.template-cart .cart,
.template-cart .cart__items {
  padding-bottom: 50px !important;
}

.template-cart footer,
.template-cart .footer,
.template-cart .shopify-section-group-footer-group {
  margin-top: 25px !important;
}

/* Datos de facturación en carrito */
.msc-billing-fields {
  margin: 34px 0 28px;
  padding: 24px;
  background: #F7F5F2;
  border: 1px solid rgba(86, 134, 136, 0.18);
  border-radius: 16px;
}

.msc-billing-fields h3 {
  margin: 0 0 6px;
  font-family: Fraunces, serif;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 500;
  color: #568688;
}

.msc-billing-fields p {
  margin: 0 0 18px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(47, 61, 59, 0.72);
}

.msc-billing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.msc-billing-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.msc-billing-field--full {
  grid-column: 1 / -1;
}

.msc-billing-field label {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #568688;
}

.msc-billing-field input,
.msc-billing-field select {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid rgba(86, 134, 136, 0.28);
  border-radius: 10px;
  background: #ffffff;
  color: #2F3D3B;
  font-family: Inter, sans-serif;
  font-size: 14px;
  box-sizing: border-box;
}

.msc-billing-field input:focus,
.msc-billing-field select:focus {
  outline: none;
  border-color: #45B497;
  box-shadow: 0 0 0 3px rgba(69, 180, 151, 0.14);
}

@media screen and (max-width: 749px) {
  .msc-billing-fields {
    padding: 18px;
    margin: 26px 0 22px;
  }

  .msc-billing-grid {
    grid-template-columns: 1fr;
  }
}

/* Editor de mensaje personalizado en carrito */
.msc-cart-message-editor {
  margin-top: 14px;
  padding: 14px;
  background: #F7F5F2;
  border: 1px solid rgba(86, 134, 136, 0.18);
  border-radius: 13px;
  max-width: 520px;
}

.msc-cart-message-editor label {
  display: block;
  margin-bottom: 7px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #568688;
}

.msc-cart-message-textarea {
  display: block;
  width: 100%;
  min-height: 82px;
  padding: 11px 12px;
  border: 1px solid rgba(86, 134, 136, 0.28);
  border-radius: 10px;
  background: #ffffff;
  color: #2F3D3B;
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
}

.msc-cart-message-textarea:focus {
  outline: none;
  border-color: #45B497;
  box-shadow: 0 0 0 3px rgba(69, 180, 151, 0.14);
}

.msc-cart-message-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
}

.msc-cart-message-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: #45B497;
  color: #ffffff;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.msc-cart-message-save:hover {
  background: #568688;
}

.msc-cart-message-save:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.msc-cart-message-status {
  font-family: Inter, sans-serif;
  font-size: 12px;
  color: rgba(47, 61, 59, 0.68);
}

@media screen and (max-width: 749px) {
  .msc-cart-message-editor {
    padding: 12px;
    margin-top: 12px;
  }

  .msc-cart-message-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}


/* =========================================================
   MSC · FIX VARIANTE SELECCIONADA EN COLLECTIONS
   Corrige fondo blanco + letra blanca
   ========================================================= */

/* Estado normal: opciones NO seleccionadas */
body.template-collection label.btn.btn-variant-smallcard {
  --background: grey !important;
  --background-hover: black !important;
  --color: #568688 !important;
  --color-hover: #568688 !important;
  --border: rgba(86, 134, 136, 0.45) !important;
  --border-hover: #568688 !important;

  background: grey !important;
  background-color: grey !important;
  color: #568688 !important;
  -webkit-text-fill-color: #568688 !important;
  border: 1px solid rgba(86, 134, 136, 0.45) !important;
}

/* Texto de opciones NO seleccionadas */
body.template-collection label.btn.btn-variant-smallcard span,
body.template-collection label.btn.btn-variant-smallcard .variant__btn_text {
  color: #568688 !important;
  -webkit-text-fill-color: #568688 !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Capa del botón normal */
body.template-collection label.btn.btn-variant-smallcard::before,
body.template-collection label.btn.btn-variant-smallcard::after {
  background: #568688 !important;
  background-color: #568688 !important;
  border-color: rgba(86, 134, 136, 0.45) !important;
}

/* Estado seleccionado: fondo de color */
body.template-collection input[type="radio"]:checked + label.btn.btn-variant-smallcard {
  --background: #568688 !important;
  --background-hover: #568688 !important;
  --color: #ffffff !important;
  --color-hover: #ffffff !important;
  --border: #568688 !important;
  --border-hover: #568688 !important;

  background: #568688 !important;
  background-color: #568688 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #568688 !important;
}

/* Capa del botón seleccionado */
body.template-collection input[type="radio"]:checked + label.btn.btn-variant-smallcard::before,
body.template-collection input[type="radio"]:checked + label.btn.btn-variant-smallcard::after {
  background: #568688 !important;
  background-color: #568688 !important;
  border-color: #568688 !important;
  opacity: 1 !important;
}

/* Texto de la opción seleccionada */
body.template-collection input[type="radio"]:checked + label.btn.btn-variant-smallcard span,
body.template-collection input[type="radio"]:checked + label.btn.btn-variant-smallcard .variant__btn_text {
  color: grey !important;
  -webkit-text-fill-color: black !important;
  position: relative !important;
  z-index: 10 !important;
}


.product-form__container__card {
  display: none !important;
  flex-wrap: wrap;
  gap: 5px;
}