/** Shopify CDN: Minification failed

Line 1606:53 Unexpected "/"

**/
/**
 * MB Theme Styles
 * Brand-specific styles, typography, components, and custom elements
 */

/* ============================================================================
   CSS CUSTOM PROPERTIES
   ============================================================================ */

:root {
  /* Mobile-first (≈390px baseline) */
  --font-3xs: 2.31vw;  /* ~9px */
  --font-2xs: 2.564vw;  /* ~10px */
  --font-xs: 2.82vw;    /* ~11px */
  --font-rg: 4.10vw;   /* ~16px */
  /* New variables */
  --font-6xl: 15.38vw; /* ~60px */
  --font-5xl: 12.308vw; /* ~48px */
  --font-4xl: 10.256vw; /* ~40px */
  --font-3xl: 8.205vw; /* ~32px */
  --font-2-5xl: 7.18vw; /* ~28px */
  --font-2xl: 6.154vw; /* ~24px */
  --font-xl: 5.556vw; /* ~20px */
  --font-lg: 4.103vw;  /* ~16px */
  --font-md: 3.59vw;  /* ~14px */
  --font-sm: 3.077vw;  /* ~12px */

  --font-body--family: "neue-haas-grotesk-text", Helvetica, Arial, sans-serif;
  --font-accent--family: "ivyora-display", Georgia, serif;
  --berry-pink: #BF2465;
  --dark-purple: #2F2159;
  --heading-brown:#414042;
  --divider:#BBB2AA;
}

/* Tablet / small desktop */
@media (min-width: 750px) {
  :root {
    --font-3xs: 9px;   /* ~9px */
    --font-2xs: 10px;   /* ~10px */
    --font-xs: 11px;    /* ~11px */
    --font-rg: 16px;   /* ~16px */
    /* New variables */
    --font-6xl: 60px;
    --font-5xl: 48px;
    --font-4xl: 40px;
    --font-3xl: 32px;
    --font-2-5xl: 28px;
    --font-2xl: 24px;
    --font-xl: 20px;
    --font-lg: 16px;
    --font-md: 14px;
    --font-sm: 12px;
    /* Desktop Responsive, scaled from 1536px design */
    --font-smr: 0.78vw;  /* ~12px */
    --font-mdr: 0.91vw;  /* ~14px */
    --font-lr: 1.04vw;  /* ~16px */
    --font-xlr: 1.17vw;  /* ~18px */
    --font-4xlr: 2.6vw; /* ~40px */
    --font-5xlr: 3.13vw; /* ~48px */
    --font-6xlr: 3.91vw; /* ~60px */
    --font-7xlr: 4.69vw; /* ~72px */
  }
}

/* Large desktop */
/* 
@media (min-width: 1200px) {
  :root {
    --font-sm: 0.95vw;   
    --font-rg: 1.33vw;   
    --font-md: 1.50vw;   
    --font-lg: 1.83vw;   
    --font-xl: 2.91vw;   
    --font-2xl: 3.16vw;  
  }
}
 */

/* Optional hard cap for ultra-wide screens */
/* @media (min-width: 1600px) {
  :root {
    --font-xl: 46px;
    --font-2xl: 56px;
  }
} */


/* ============================================================================
   COLOR UTILITIES
   ============================================================================ */

.color-base{color: #5A5357;}
.color-primary{color: #7160BA;}
.color-secondary{color: #B78AD2;}
.color-berry-pink{color: var(--berry-pink);}

body{
  font-family: var(--font-body--family);
  font-size: var(--font-rg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/*
li{
  font-size: var(--font-md);
  @media screen and (min-width: 750px){
    font-size: var(--font-lg);
  }
}*/ 

.section{
  position: initial;
}
@media screen and (max-width: 749px) {
  .section.section-mobile-bleed-right {
    --full-page-grid-with-margins: var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) + var(--page-margin));
  }
}

/* 
.section-wrapper {
  z-index: 0;
} */

.section-panel-flex {
    display: flex;
    height: 100%;
    flex-direction: column;
    position: inherit;
    /*z-index: 1;*/
    padding: 2.75rem 0;
}
.section-panel-flex:empty,
.section-panel-flex:has(> div:only-child:empty){ display: none; }

@media (min-width: 1600px) {
  .section > div {
      width: 1600px;
      margin-left: auto;
      margin-right: auto;
      max-width: 100%;
  }
}

main:first-child .section-panel-flex {
    margin: 0 0 2rem;
}

.layout-panel-flex, .group {
    display: flex;
    height: auto;
    flex-direction: column;
    gap: 1rem;
    column-gap: var(--gap-4xl);
    position: relative;
    /*flex: 1;*/
    width: 100%;
}

/* When direction-row is applied, add column gap */
.layout-panel-flex.direction-row,
.section-panel-flex.direction-row {
    column-gap: var(--gap);
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */
h1, h2, h3, h4, h5, h6{
  margin-top: 0;
  font-weight: 400;
  font-family: var(--font-accent--family);
  letter-spacing: 0.01em;
  font-variant-numeric: lining-nums;
  line-height: 1.3;
}

.page-title, h1{
  font-size: var(--font-5xl);
  font-weight: 400;
  margin-bottom: .5rem;
  @media screen and (max-width: 750px){
    font-size: var(--font-3xl);
  }
}

.section-title, h2{
  font-size: var(--font-3xl);
  font-family: var(--font-accent--family);
  font-weight: 400;
  @media screen and (min-width: 750px){
    font-size: var(--font-5xl);
  }
}

.hidden-footer {
  display: none !important;
}

.hidden-header {
  display: none !important;
}

#RegisterForm-form-error.errors,
#RegisterForm-email-error.errors {
  color: #a986c7;
  padding: 12px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  max-width: 100vw;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

#RegisterForm-form-error.errors a,
#RegisterForm-email-error.errors a {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: inherit;
}

.group-title, h3{
  font-size: var(--font-xl);
  font-weight: 400;
  margin-bottom: .5rem;
  color: #000;
  @media screen and (min-width: 750px){
    font-size: var(--font-3xl);
  }
}
h3 + hr{
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: 8px;
  width: calc(100% + (var(--margin-lg) * 2));
  border: 0;
  border-bottom: 1px solid var(--divider);
}

h4{
  font-size: var(--font-xl);
  font-weight: 500;
  margin-bottom: .5rem;
}

h5{
  font-size: var(--font-md);
  font-weight: 500;
  margin-bottom: 0;
}

p{
  font-weight: 400;
  margin-bottom: inherit;
    margin-block-start: 0;
}

.text-standard{
  font-size: var(--font-md);
}

.text-bigger{
  font-size: var(--font-lg);
}

.text-2xl{
  font-size: var(--font-2xl);
}

.text-bold{
  font-size: var(--font-md);
  font-weight: 500;
}

.text-bolder{
  font-size: var(--font-md);
  font-weight: 700;
}

.text-accent{
  font-family: var(--font-accent--family);
}

.text-body{
  font-family: var(--font-body--family);
}

.strong{
  font-weight: 700;
}

.active-subscription-selected .hide-for-active-login{
  display: none !important;
}

.green-pill{
  background: #E6EAC5;
  padding: 3px 16px;
  display: inline-block;
  border-radius: 16px;
  font-weight: 700;
  font-size: var(--font-size--sm);
}

.disclaimer{
    font-size: var(--font-sm);
}

.text-small{
  font-size: var(--font-sm);
  line-height: 1.2;
}

.text-smallstrong{
  font-size: var(--font-sm);
  font-family: var(--font-body--family);
  font-weight: 500;
  line-height: 1.2;
  color: #000;
}

.product-name{
  font-family: var(--font-accent--family);
  font-weight: 400;
  line-height: 1.2;
  color: var(--heading-brown);
  font-size: var(--font-xl);
  @media screen and (min-width: 750px){
    font-size: var(--font-2xl);
  }
}

.product-tag{
    display: block;
    /*letter-spacing: 9%;*/
    font-weight: 400;
    padding-top: 1.2vw;
    text-transform: uppercase;
    font-size: var(--font-sm);
    color: var(--heading-brown);
  @media screen and (min-width: 750px){
    font-size: var(--font-md);
    /*letter-spacing: 2px;*/
    padding-top: 4px;
  }
}
.product-size{
  font-size: var(--font-sm);
  padding: 0.2rem 0;
  display: block;
}

.pdp-product-name{
  font-family: var(--font-accent--family);
  font-weight: 400;
  color: #5a5357;
  line-height: 1.2;
  color: black;
  font-size: var(--font-2xl);
  @media screen and (min-width: 750px){
    font-size: var(--font-3xl);
  }
}

.pdp-product-tag{
    display: block;
    letter-spacing: 1.5px;
    font-weight: 400;
    text-transform: uppercase;
    font-size: var(--font-sm);
    padding: 15px 0 8px;
  @media screen and (min-width: 750px){
    font-size: var(--font-md);
  }
}

/* Product benefits */
.pdp-benefits-lists { 
  list-style-type: none; 
  padding: 0; 
  margin: 0; 
}

.pdp-benefits-item { 
  display: flex; 
  align-items: center; 
  font-size: var(--font-md); 
  gap: 0.4rem;
  margin: .3rem 0;
}

/* Styles the image icon directly */
.pdp-benefit-icon { 
  width: 20px; 
  height: 20px; 
  flex-shrink: 0; 
  margin-top: 2px; 
}
.pdp-benefits-mobile-only{
  display: none;
  @media screen and (max-width: 750px){
    display: block;
  }
}

/*.product-savings{
    background-color: var(--berry-pink);
    color: #fff;
    position: absolute;
    top: -.75rem;
    left: 1rem;
    z-index: 1000;
    padding: .25rem .5rem;
    font-weight: 700;
    font-size: var(--font-md);
}*/

.anchor-top{

}

.title-prefix{
    font-size: 50%;
}

.banner-primary{
    font-size: var(--font-h1--family);
    text-transform: capitalize;
    font-style: italic;
    margin-bottom: 0;
}

.banner-secondary{
    font-size: var(--font-h2--size);
    color: #7160BA;
    font-weight: 400;
    letter-spacing: 1vw;
}

.banner-jumbo{
    font-size: var(--font-3xl);
    align-items: center;
    justify-content: center;
    line-height: .9;
    position: relative;
    color: #7160BA;
    font-weight: 500;
}

.banner-minor{
    font-size: var(--font-2xs);
    font-weight: 500;
    line-height: 1.2;
}

.testimonial-list .resource-list__item > div, .testimonial-list .resource-list__item > div > .layout-panel-flex {
  height: 100%;
}

.testimonial-list slideshow-slide{
  content-visibility: visible;
}

.testimonial{
  padding: var(--padding-md);
}

@media screen and (max-width: 750px) {
  slideshow-container slideshow-slide:first-child .testimonial.resource-list__item {
    padding-left: 0;
  }
}

.quote{
  font-family: var(--font-accent--family);
  font-size: var(--font-2xl);
}

.claim{
  font-size: var(--font-5xl);
  font-family: var(--font-accent--family);
}

.ba-claim{ padding-bottom: 16px; }
.ba-claim:not(:last-child){
  border-bottom: 1px solid var(--divider);
}

.title-check{
  align-items: center;  
  cursor: pointer;
  display: flex;
  font-family: var(--font-accent--family);
  font-size: var(--font-xl);
  justify-content: space-between;
  padding: 1rem 0;
  width: auto;
}

.title-check::before{
  content: "\2713";
  float: left;
  margin-right: 1rem;
  font-size: var(--font-2xl);
  font-family: var(--font-body--family);
  color: var(--berry-pink);
}

.text-inline{
  display: inline-block;
}

.product-benefits {
    row-gap: .25rem;
}

h1:has(.metafield-multi_line_text_field),
h2:has(.metafield-multi_line_text_field),
h3:has(.metafield-multi_line_text_field),
h4:has(.metafield-multi_line_text_field),
h5:has(.metafield-multi_line_text_field),
h6:has(.metafield-multi_line_text_field),
p:has(.metafield-multi_line_text_field){
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  font-family: inherit;
}

.richtext h1,
.richtext h2,
.richtext h3,
.richtext h4,
.richtext h5,
.richtext h6,
.richtext p
{
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  font-family: inherit;
}
.richtext h3{
  line-height: 1.2;
  color:#414042;
}
.richtext h2,
.richtext p,
.metafield-rich_text_field p{
  margin-bottom: inherit;
}
/* ============================================================================
   BASE ELEMENT OVERRIDES
   ============================================================================ */

hr{
    
    border-color: var(--divider);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin: 0;
    width: 100%; 
    border-top: 0;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
}

ul{
  margin-block-start: .25rem;
  padding-inline-start: 2rem;
}

a{
  /*width: fit-content;*/
}

a.primary{
  border-bottom: solid 1px;
}

a.smallstrong{
  font-size: var(--font-size--sm);
  font-weight: 500;
  border-bottom: solid 1px;
  
}

.header-logo__image{
  margin-bottom: 0;
}
@media screen and (max-width: 1000px){
  .header-logo__image{ max-height: 27px; }
}

img {
    height: fit-content;
}

img.icon{
  width: revert-layer;
  margin-bottom: 0;
}

svg{
  display: inline;
}

.nowrap{
  white-space: nowrap;
}

.nolink{
  cursor: unset;
}

.header-menu .menu-list__link-title {
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

/* ============================================================================
   Sections
   ============================================================================ */
.billboard
{
  min-height: 177vw;
}

@media screen and (min-width: 750px){
  .billboard{
    min-height: 45vw;
  }
}

.billboard-tall
{
  min-height: 200vw;
}

@media screen and (min-width: 750px){
  .billboard-tall{
    min-height: 40vw;
  }
}

.billboard-normal
{
  min-height: 128.889vw;
}

@media screen and (min-width: 750px){
  .billboard-normal{
    min-height: 45vw;
  }
}

.video-billboard{
  min-height: 55vw;
}

/* ============================================================================
   BUTTONS & LINKS
   ============================================================================ */

button,.forgot-wrap a {
  font-size: var(--font-md);
  font-family: var(--font-body--family);
  color: #000000;
}

.button-small{
  padding: .25rem 1rem;
}

.btn-accordion-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    font-family: var(--font-accent--family);
    font-size: var(--font-xl);
    padding: 1rem 0;
    border: none;
    border-bottom: solid 1px;
    background-color: transparent;
    text-decoration: none;
}

.link-container{
  text-decoration: none;
}

.link{
  border: none;
  background-color: transparent;
}

.link-small{
  font-size: var(--font-sm) !important;
  text-align: left;
  width: fit-content;
}

button.link-small{
  border: none;
  background: none;
  padding-left: 0;
  padding-right: 0;
}

.text {
  background-color: transparent;
  border: none;
}

.underline{
  background-color: transparent;
  border: none;
  text-decoration: underline;
}

.medium{
  font-weight: 500;
}

.uppercase{
  text-transform: uppercase;
}

a.link-smallstrong{
  font-size: var(--font-sm);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  background-position: 0 1px;
}

.link-with-right-chevron{
  align-items: center;  
  cursor: pointer;
  display: flex;
  font-family: var(--font-accent--family);
  font-size: var(--font-xl);
  justify-content: space-between;
  padding: 1rem 0;
  width: auto;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--divider);
  background-color: transparent;
  @media screen and (min-width: 750px){
    font-size: var(--font-2xl);
  }
}

.link-with-right-chevron::after{
  content: "\203A";
  float: right;
  margin-right: 16px;
  font-size: 1.7em;
  line-height: 0.7em;
  font-family: var(--font-body--family);

}

.quick-view{
  border: none;
  background: transparent;
  display: inline-block;
  font-weight: 500;
  padding-left: 0;
  padding-right: 0;
  width: fit-content;
  align-self: flex-start;
  cursor: pointer;
  color: black;
  text-decoration: underline;
  text-underline-offset: 6px;
  font-weight: 500;
  padding-bottom: 10px;
}
gift-option .quick-view{ align-self: flex-end; }

.tag{
  padding: .25rem .5rem;
  font-size: var(--font-sm);
  font-weight: 500;
  z-index: 1;
  text-transform: uppercase;
  font-weight: bold;
  width: fit-content;
  @media screen and (min-width: 750px){
    padding: .5rem .75rem;
  }
}

/* ============================================================================
   LAYOUT COMPONENTS
   ============================================================================ */

.group-block-content {
    column-gap: var(--gap);
}

.details__header .link-group-heading{
  margin-bottom: 0;
}

@media (max-width: 749px) {
  .bleed_right {
    margin-right: calc(-1 * var(--padding-lg));
  }
}

@media (min-width: 750px) and (max-width: 1199px) {
  .bleed_right_tablet {
    margin-right: calc(-1 * var(--padding-4xl));
  }
}

@media (min-width: 1200px) {
  .bleed_right_desktop {
    margin-right: calc(-1 * var(--padding-6xl));
  }
}


.burst{
  position: absolute;
  border-radius: 50%;
  gap:0;
}

/* Last column auto-fills remaining space to handle gap overflow */
.direction-row > [class^="col"]:last-child,
.direction-row > [class*="-col"]:last-child {
    /* flex: 1 1 auto;
    width: auto; */
}

.flex-grow{
    flex: 1;
}

.group-block{
    column-gap: 0;
    position: unset;
}

.background-full{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.background-media{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mb-background-media__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mb-background-media__image--mobile-cover { object-fit: cover; }
.mb-background-media__image--mobile-contain { object-fit: contain; }
.mb-background-media__image--mobile-fill { object-fit: fill; }

@media screen and (max-width: 749px){
  body img.mb-background-media__image--mobile-bottom {
      height: auto;
      bottom: 0;
      position: absolute;
  }
}

@media screen and (min-width: 750px) {
  .mb-background-media__image--tablet-cover { object-fit: cover; }
  .mb-background-media__image--tablet-contain { object-fit: contain; }
  .mb-background-media__image--tablet-fill { object-fit: fill; }
}

@media screen and (min-width: 1200px) {
  .mb-background-media__image--desktop-cover { object-fit: cover; }
  .mb-background-media__image--desktop-contain { object-fit: contain; }
  .mb-background-media__image--desktop-fill { object-fit: fill; }
}

.background-media ~*{
  z-index: 1;
}

 .layout-panel-flex:has(.background-media) > div {
    z-index: 1;
}

.background-media img{
    height: 100%;
}

.radio-button{
  display: flex;
  align-items: center;
}

.radio-button > label, .radio-button > .radio-button-label{
  font-weight: bold;
  line-height: 1.2;
  /* margin-left: .5rem; */
}

.radio-button p {
    margin-bottom: 0;
}

input[type="radio"] {
  margin-top: 0;
  margin-right: .5rem;
}

slideshow-slide > * {
    grid-area: 1/1;
}

slideshow-slide:has(> .background-media) {
    display: grid;
}

slideshow-slide:has(> .background-media) > * {
    grid-area: 1 / 1;
}

slideshow-slide .background-media{
  width: 100%;
  height: auto;
  object-fit: cover;
  z-index: 0;
}

/* Hidden by default */
.sticky-footer {
  display: none;
  border: solid 1px #00000021;
}

/* When active */
.sticky-footer-show.sticky-footer, .sticky-footer-show .sticky-footer-always {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 6;
}

html:has(.sticky-footer-show)::after { /* BASIC STICKY FOOTER */
  content: "";
  display: block;
  background-color: #ffd9c4;
  height: 15vw;
}

html:has(span[data-tc-sticky-product-name])::after, html:has(span[data-tc-pdp-sticky-product-name])::after{ /* STICKY FOOTER WITH A PRODUCT NAME */
  height: 30vw;
}

@media (min-width: 750px) {
  html:has(.sticky-footer-show)::after {
      height: 60px;
  }
  html:has(span[data-tc-sticky-product-name])::after, html:has(span[data-tc-pdp-sticky-product-name])::after{
    height: 70px;
  }
}

/* ============================================================================
   PRODUCT COMPONENTS
   ============================================================================ */

.mb-product-price-block{
  display: flex;
  flex-wrap: wrap;
  height: fit-content;
  align-items: baseline;
  font-size: var(--font-md);
}

.mb-product-price-block.text-right{
  justify-content: flex-end;
  align-items: baseline;
}

.mb-product-price {
    font-weight: bold;
}

.mb-product-price-slash{
    position: relative;
    width: fit-content;
    margin-right: .45rem;
    font-size: var(--font-sm);
}

.header-shop-menu.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
}

.mb-product-price-slash:after{
  border-bottom-style: solid;
  border-bottom-width: 1px;
  content: "" !important;
  left: 0;
  position: absolute;
  top: 50%;
  width: 100%;
}

.mb-product-price-free{
  color: var(--berry-pink);
  font-weight: bold;
  font-size: 2.564vw;
  @media screen and (min-width: 750px){
    font-size: var(--font-md);
  }
}

.with_subscription, .with_membership{
  font-weight: 400;
  font-size: var(--font-sm);
  display: block;
  width: 100%;
}

.price-strikeout {
  text-decoration: line-through;
  font-size: var(--font-sm);
  font-weight: normal;
  margin-right: .45rem
}

.purchase-option-group{
  display: contents;
}

.purchase-option-group .buy-buttons-block{
  display: block;
}

.purchase-option:has(.purchase-option-input:checked) .sticky-footer {
    z-index: 7;
}

/* Purchase Options - Radio Button Based */
.purchase-option {
  /*column-gap: 0;
  position: relative;
  width: 100%;*/
}

.purchase-option-label {
    /*cursor: pointer;
    display: flex;
    height: auto;
    flex-direction: column;
    column-gap: var(--gap-lg);
    position: relative;
    border: solid 1px gray;*/
}

.purchase-option[data-option] {
  display: none;
}
.purchase-option[data-option][data-active] {
  display: flex !important;
}

.purchase-option > label{
    display: inherit;
    flex-direction: inherit;
    align-items: inherit;
    justify-content: inherit;
    width: 100%;
}
.purchase-option > label ul{
  margin-bottom: 0;
}

.purchase-option-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.purchase-option-input {
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.purchase-option-title {
  font-weight: 600;
  flex: 1;
}

.purchase-option.purchase-option-label:has(.purchase-option-input:checked) {
  border: 1px solid black;
}

.purchase-option:has(.purchase-option-input:focus-visible) .purchase-option-label {
  outline: 2px solid var(--color-foreground);
  outline-offset: 2px;
}

.purchase-option.toggle{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--padding-sm);
  opacity: .6;
  border: solid 1px;
  align-items: center;
  cursor: pointer;
}

.purchase-option.toggle label{
  justify-content: inherit;
  display: flex;
  cursor: inherit;
}

.purchase-option.toggle[data-active]{
  font-weight: bold;
  opacity: 1;
}
button.tooltip-link{
  padding: 0;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .1rem;
  font-weight: 500;
  border-bottom: 1px solid black;
}
.product-card .tag{
  position: absolute;
  top: 0;
  left: auto;
}

.product-savings.tag {
    padding: .25rem .5rem;  
    position: absolute;
    left: unset;
    top: -1.2rem;
}

[data-template="product"] div:has(> .purchase-option .product-savings.tag), .quickview div:has(> .purchase-option .product-savings.tag) {
  margin-top: 1rem;
}

[data-template="product"] .purchase-option:has(.product-savings.tag){
    margin-top: 0;
}

[data-template="product"] .purchase-option, .quickview .purchase-option{
  border: 1px solid gray;
  padding: 1rem;
}

[data-template="product"] .purchase-option:has(.purchase-option-input:checked) {
  border: 1px solid black;
}

[data-template="product"] .purchase-option .tag{
  top: -1.2rem;
  left: unset;
}

.hide-radio-input .purchase-option-input {
  display: none;
}

/* More details link */
button[data-view="view-details"]{
  font-weight: 500;
}
gift-option {
  position: relative;
  font-size: var(--font-size--sm);
}

.gift-option-label {
  padding: .5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid gray;
  gap: .5rem;
}

.gift-option-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.gift-option-input {
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.gift-option-title {
  font-weight: 600;
  flex: 1;
}

.gift-option-content {
  /* Content area below the radio + title */
}

.purchase-option:has(.purchase-option-input:checked) gift-option:has(.gift-option-input:checked) .gift-option-label {
  border: 1px solid black;
}

.purchase-option:has(.purchase-option-input:checked) gift-option:has(.gift-option-input:focus-visible) .gift-option-label {
  outline: 2px solid var(--color-foreground);
  outline-offset: 2px;
}

/* Hide add-to-cart components within purchase/gift options */
.purchase-option add-to-cart-component,
.purchase-option .rc-container-wrapper,
product-form-component .rc-container-wrapper{
  display: none;
}

.product-grid__item {
    overflow: hidden;
}

.marketing-ad{
  height: 100%;
  margin-top: 15px;
  gap: 0;
  font-size: var(--font-3xl);

}
@media screen and (max-width: 749px) {
  .marketing-ad{
    margin-top: 20px;
    font-size: var(--font-xl);
  }
  .marketing-ad img{
    padding-inline-start: max(var(--padding-md), var(--padding-inline-start));
    padding-inline-end: max(var(--padding-md), var(--padding-inline-end));
  }
}
.marketing-ad h3,
.marketing-ad a{
  padding: 0 var(--padding-sm) var(--padding-sm) 0;
  color: #fff;
}
.product-benefit{
  display: flex;
  align-items: center;
}

/* ============================================================================
   MEDIA COMPONENTS
   ============================================================================ */

deferred-media{
    height: auto;
}

slideshow-slides{
    display: flex;
    grid-auto-flow: column;
    gap: var(--gap); /* optional: matches JS assumption below */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

.block--slideshow{
    width:100%;
}

slideshow-arrows .slideshow-control {
  opacity: 1;
}

slideshow-controls[controls-on-media] {
    position: relative;
}

slideshow-controls[controls-on-media]:has(.slideshow-controls__dots,.slideshow-controls__counter) {
    --color-foreground: #323232;
}

:is(.slideshow-controls__dots,.slideshow-controls__counter) button {
    --color: rgb(47 47 47);
}

/* ============================================================================
   TOGGLE SWITCH
   ============================================================================ */

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

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

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

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

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

/* ============================================================================
   LINK GROUPS
   ============================================================================ */

.link-group{
    display: flex;
    flex-wrap: nowrap !important;
    padding: 0;
    margin: 0;
    list-style: none;
}

.link-group li{
  margin: .25rem 0;
}
.link-group li a{
  font-size: var(--font-sm);
  @media screen and (min-width: 750px){
    font-size: var(--font-md);
  }
}

.link-group.direction-row li{
  margin: 0 .25rem;
}

@media screen and (min-width: 750px){
  .link-group.md-direction-row li{
    margin: 0 .5rem;
  }
}

@media screen and (min-width: 1200px){
  .link-group.lg-direction-row li{
    margin: 0 .5rem;
  }
}

.pill{
    margin: .25rem;
    border-radius: 16px;
    border: none;
    box-shadow: none;
    padding: .5rem 1.5rem;
    text-align: center;
    text-decoration: none;
    font-size: var(--font-sm);
    text-transform: capitalize;
}

a.button.pill.active {
    background-color: #000;
    color: #fff;
}

/* footer links */
footer .link-group .pill{
  padding: .2rem 0;
  display: block;
  margin-left: 0;
  border: none;
}
.link-group.fill-available li{
    width: -webkit-fill-available;
}

.shopify-section-group-footer-group accordion-custom li{
  padding: 0 0 .75rem 0;
}

.shopify-section-group-footer-group accordion-custom li a{
  text-decoration: none;
}

/* ============================================================================
   USERWAY ACCESSIBILITY
   ============================================================================ */

body .uwy.userway_p1 .userway_buttons_wrapper{
    left: 3.5rem !important;
    right: auto !important;
    bottom: 2rem !important;
    top: auto !important;
}

/* ============================================================================
   SHOPIFY DESIGN MODE
   ============================================================================ */

.shopify-design-mode quick-add-dialog{
    position: fixed;
    z-index: 10;
}

.shopify-design-mode [data-qv-root] {
  z-index: 1000;
}
/*
.shopify-design-mode dialog[open]:after {
  content: "";
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.25;
  z-index: -1;
}

.shopify-design-mode .quick-add-modal__content {
  background-color: #fff;
}
*/
/* ============================================================================
   VIEW AS (Sidebar/Modal/Tooltip)
   ============================================================================ */

.dialog-drawer {
  position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(480px, 92vw);
    height: 100%;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    padding: var(--padding-lg);
    overflow-y: auto;
    padding: 0;
    border: none;
    background-color: #fff;
}

.dialog-drawer .section-panel-flex {
  padding: .5rem 0;
}

.sidebar .dialog-drawer{
  overflow-x: hidden;
}
.sidebar.key-ingredients dialog.dialog-drawer,
.sidebar.full-ingredients dialog.dialog-drawer{
  background: #fff;
}
.sidebar_title{
  font-family: var(--font-accent--family);
  font-size: var(--font-xl);
  margin: 1rem;
  @media screen and (min-width: 750px){
    font-size: var(--font-2xl);
  }
}

.mb-key-ingredients-item {
  width: 100%;
}


.sidebar .close-button svg{
  width: 1.25rem;
  height: 1.25rem;
}

.dialog-header{
    display: flex;
    align-items: center;
    padding: .5rem;
    border-bottom: 1px solid var(--divider);
    justify-content: space-between;
}

.dialog-body{
  padding: .5rem 0 3rem;
}

.dialog-title{
  font-size: var(--font-xl);
  margin-bottom: 0;
}

.tooltip {
  border-radius: var(--style-border-radius-popover);
  margin: 0;
  width: max-content;
  max-width: min(400px, 90vw);
  box-shadow: var(--shadow-popover);
  border: var(--style-border-popover);
  background-color: var(--color-background);
  padding: var(--padding-md);
  top: calc(anchor(bottom) + 0.5rem);
  left: anchor(left);
}

@supports not (position-anchor: --mb-tooltip) {
  .tooltip {
    top: auto;
    left: auto;
  }
}

* Flexbox aligns the text and the icon horizontally */
.tooltip-link {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* Spaces the text and the image */
  padding: 10px 20px;
}

/* Generates the image slot right after the button text */
.tooltip-link::after {
  content: ""; 
  display: inline-block;
  width: 16px; /* Define your icon's custom width */
  height: 16px; /* Define your icon's custom height */
  background-image: url('//mb-stg.myshopify.com/cdn/shop/files/info-circle.png');
  background-size: contain;
  background-repeat: no-repeat;
}

/* ============================================================================
   QUICK VIEW MODAL
   ============================================================================ */

.quick-add-modal__content {
  padding: var(--padding-xl);
}

.close-button{
  outline: none;
}

/* ============================================================================
   ACCORDION
   ============================================================================ */
/*
  .accordion {
    flex: 1;
    width: 100%;
  }
*/
  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  accordion-custom details.details{
      border-bottom: 1px solid var(--divider);
  }

  accordion-custom details[open] {
    padding-bottom: 1rem;
  }

  .accordion .details__header >*:not(.svg-wrapper) {
    width: 85%;
}

  /* hide border bottom for footer accordion */
  footer accordion-custom details.details, .footer accordion-custom details.details{ border-bottom: none;}
  /*  */

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-style: var(--summary-font-style);
    font-weight: 700;
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);

  }
    .accordion .details__header h4{
      font-weight: 400;
    }

/* ============================================================================
   TABS
   ============================================================================ */
   .tabs__nav{display:flex;overflow: auto;scrollbar-width: none; padding-right: var(--margin-xl);}
   .tabs__nav.justify-content-center{justify-content:center;}
.tabs__nav button{border: none; border-bottom:1px solid;padding:0 1.5rem .75rem;background:none;font-size:var(--font-xl);cursor:pointer;color: var(--color-foreground);}
.tabs__nav button.tabs__tab--active{border-bottom:2px solid #000;font-weight:bold;}
.tabs__panel{padding-top: var(--margin-md); padding-bottom: var(--margin-md); padding-left: 0; padding-right: 0; }
.tabs__panel:not(.tabs__panel--active){display:none;}

/* Gift Option UI Update */
.gift-group-title{    margin-bottom: .5rem;
    font-size: var(--font-sm);
    display: inline-block;}

.gift-option-card{border:1px solid #DAD4CE;padding:.6rem;background:#fff;position:relative;}
.gift-option-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;}
.gift-option-card-radio-title{display:flex;align-items:center;gap:0.75rem;}
.gift-option-card-title{font-weight:500;font-size:14px;}
.gift-option-card-price{font-weight:500;white-space:nowrap;font-size:12px;}
.gift-option-card-compare-price{text-decoration:line-through;color:#858585;}
.gift-option-card-free{color:var(--berry-pink);font-weight:bold;}
.gift-option-card-body{display:flex;gap:1rem;align-items:flex-start;}
.gift-option-card-image{flex-shrink:0;}
.gift-option-card-image img{display:block;max-height:65px;}
.gift-option-card-info{flex:1;display:flex;flex-direction:column;}
.gift-option-card-description{font-size:var(--font-sm);line-height:1.4;margin-bottom:0.5rem;}
.gift-option-card-footer{position:absolute;bottom:10px;align-self:flex-end;}
.gift-option-card-more-details{font-size:11px;font-weight:700;border-bottom:1px solid var(--berry-pink);color:#000;text-transform:uppercase;text-decoration:none;}
gift-option:has(.gift-option-input:checked) .gift-option-card{background-color:#fff;border:1px solid #000;}
.purchase-option .gift-group{width:100%;}
.purchase-option:has(.purchase-option-input:checked) .gift-group{display:block;}
.gift-option-input{margin:0;width:1.25rem;height:1.25rem;accent-color:black;}


/* ============================================================================
   MB ICON COMPONENT
   ============================================================================ */

.mb-icon-wrapper {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}
.product-benefits-item svg.mb-icon-wrapper{
  min-width: 20px;
}

/* Ensure paths inherit currentColor - let individual attributes control fill vs stroke */
.mb-icon-wrapper path,
.mb-icon-wrapper circle,
.mb-icon-wrapper rect,
.mb-icon-wrapper line,
.mb-icon-wrapper polyline,
.mb-icon-wrapper polygon {
  color: inherit;
}


[hidden] {
  display: none !important;
}



/* ============================================================================
    CART DRAWER
  =====================================================================p======*/
.cart-drawer__items .cart-items__table-row .cart-items__remove-button {
  display: flex;
  justify-content: start;
  align-items: center;
  grid-area: item-remove;
  margin-top: 10px;
}

/* For subscription toggle inside the cart drawer */
.cart-items__subscription-toggle {
  grid-area: quick-actions;
  display: flex;
  /* justify-content: flex-start; */
  align-items: center;
  gap: 8px;
  margin-top: 10px;

  .switch {
    width: 40px;
    height: 21px;
  }

  .slider::before {
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
  }

  span {
    white-space: nowrap;
    font-size: 14px;
    line-height: 1;
  }

  span:last-child {
    display: flex;
    align-items: center;
  }

  input:checked + .slider {
    background-color: #2d2d2d;
  }

  input:checked+.slider:before {
    transform: translate(18px);
  }

  svg {
    width: 16px;
    height: 16px;
    display: block;
  }
}

mb-subscription-toggle > input:disabled + .slider {
  cursor: not-allowed;
  opacity: 0.5;
}

.active-subscription-selected .cart-items__subscription-toggle {
  display: none !important;
}

.md-direction-row.md-halign-between {
  justify-content: space-between;
}
.md-direction-column.md-halign-between {
  justify-content: space-between;
}
.lg-direction-row.lg-halign-between {
  justify-content: space-between;
}
.lg-direction-column.lg-halign-between {
  justify-content: space-between;
}

/* ============================================================================
    PERSONALIZATION MASK
  ============================================================================ */

/* Hide personalized containers while personalization pipeline runs */
.mb-personalization-pending [data-personalization-container] {
  visibility: hidden !important;
  opacity: 0 !important;
}

.mb-personalization-pending [data-conditional-personalization] {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Optimistic client-side pick: reveal immediately for UX while the container
   remains a target for the authoritative server-validated re-check. */
.mb-personalization-pending [data-conditional-personalization][data-conditional-client-resolved='true'] {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Progressive reveal: show high-priority sections once they are ready.
   Use contains-match for load-priority because some personalized sections
   currently render quoted metadata values (e.g. "'high'"). */
.mb-personalization-pending.mb-personalization-high-ready [data-personalization-container][data-load-priority*='high']:not([data-personalization-hidden]) {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Immediate reveal path: once a personalized section is injected and tagged,
   allow it to paint without waiting for full pipeline completion. */
.mb-personalization-pending [data-personalization-container][data-personalized-rendered='true']:not([data-personalization-hidden]) {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Show sections once personalization is complete */
.mb-personalization-ready [data-personalization-container] {
  visibility: visible !important;
  opacity: 1 !important;
  transition: opacity 0.2s ease-in-out;
}

.mb-personalization-ready [data-conditional-personalization] {
  visibility: visible !important;
  opacity: 1 !important;
  transition: opacity 0.2s ease-in-out;
}

/* ============================================================================
    YOTPO WIDGETS
  ============================================================================ */
.yotpo-sr-bottom-line-score, .yotpo-sr-bottom-line-text {
    color: inherit !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    font-family: inherit !important;
}

.yotpo-sr-bottom-line-summary {
    flex-direction: row !important;
}
.yotpo-distribution-row__list-item{
  text-align: left;
}

.yotpo-filters-container + .yotpo-border-smooth { /* HIDE A DOUBLE LINE */
    display: none !important;
}

p.yotpo-sr-bottom-line-text.yotpo-sr-bottom-line-text--right-panel, span.yotpo-sr-bottom-line-text.yotpo-sr-bottom-line-text--right-panel {
    padding-top: 1.5px !important;
}
/* Hide review count in shop page only */
[data-template*="collection"] .yotpo-sr-bottom-line-text {
  display: none;
}

.yotpo-sr-vertical-border,
.yotpo-reviews-carousel-header,
#yotpo-headline-reviews,
.yotpo-head,
.yotpo-reviews-carousel-bottomline-seo{
    display: none !important;
}

.yotpo-bottom-line-summary{ gap: 16px; }

.yotpo-sr-bottom-line-summary svg{
  height: 12px;
  width: 12px;
}
.yotpo-widget-instance .yotpo-reviews-star-ratings-widget{
  margin-bottom: 0;
  justify-content: left !important;
}
body .yotpo-display-s .yotpo-head{ margin-top: 0; }

/* UPDATES FOR PDPS  */

body .yotpo-display-l .yotpo-main-layout .yotpo-head .yotpo-headline, body .yotpo-display-m .yotpo-main-layout .yotpo-head .yotpo-headline {
  font-family: var(--font-accent--family);
  font-weight: 400;
  font-size: 32px;
}

body .yotpo-verified-icon-wrapper{
    top: 21px;
    left: 0px;
}
body .yotpo-bottom-line .yotpo-bottom-line-left-panel.yotpo-bottom-line-score{
  font-family: var(--font-accent--family) !important;
  color: var(--heading-brown) !important;
}
body span.yotpo-reviewer-verified-buyer-text.unselectable{ color: var(--heading-brown); }

body .yotpo-progress-bar .yotpo-progress-bar-score{
  background: var(--heading-brown);
}
body .yotpo-star-distribution-index-wrapper .yotpo-star-distribution-index, body .yotpo-star-distribution-value{
  color: var(--heading-brown);
}

body .yotpo-new-review-btn-wrapper #yotpo-main-widget-btn{
  border: 1px solid var(--dark-purple);
  color: var(--dark-purple);
  background: transparent;
  text-transform: uppercase;
  padding: 0 32px;
}

body .yotpo-bottom-line .yotpo-bottom-line-right-panel{ margin-left: 0; }
body .yotpo-bottom-line .yotpo-summary-section .yotpo-bottom-line-summary, body .yotpo-bottom-line .yotpo-summary-section .yotpo-reviews-summary-button {
    flex-direction: column;
    align-items: flex-start;
}

body .yotpo-review-rating-title{ display: block !important; }
.yotpo-star-rating.yotpo-review-star-rating{ margin-bottom: 8px; }
body .yotpo-star-distribution-index-wrapper{ width: 34px; }
.ugc-storefront-widgets-tabs-container.yotpo-seo-page-tabs{ display: none; }
body .yotpo-display-l .yotpo-review:not(.yotpo-media-modal-review) .yotpo-review-center-panel .yotpo-review-rating-title .yotpo-review-title{ margin-left: 0; }


/* ============================================================================
    VARIANT SWATCHES
  ============================================================================ */
/* .variant-option__button-label {
    min-width: 44px !important;
    border-radius: 50%;
    width: 45px !important;
    padding: 0;
} */

.variant-option__button-label__pill{
    transform: unset;
}

.variant-option__button-label__text{
  display: none;
}

.variant-option__button-label:has(:checked):hover{
  background-color: unset;
}

.variant-option__button-label:has(input[value="Blond"])
.variant-option__button-label__pill
{
    --color-selected-variant-background: #e3c196;
    --color-selected-variant-hover-background: #e3c196;
}

.variant-option__button-label:has(input[value="Dark Blond / Light Brunette"])
.variant-option__button-label__pill
{
    --color-selected-variant-background: #b68e73;
    --color-selected-variant-hover-background: #b68e73;
}

.variant-option__button-label:has(input[value="Medium Brunette"])
.variant-option__button-label__pill
{
    --color-selected-variant-background: #a57d62;
    --color-selected-variant-hover-background: #a57d62;
}

.variant-option__button-label:has(input[value="Dark Brunette"])
.variant-option__button-label__pill
{
    --color-selected-variant-background: #805f52;
    --color-selected-variant-hover-background: #805f52;
}

.variant-option__button-label:has(input[value="Auburn"])
.variant-option__button-label__pill
{
    --color-selected-variant-background: #8c5a41;
    --color-selected-variant-hover-background: #8c5a41;
}

.variant-option__button-label:has(input[value="Black"])
.variant-option__button-label__pill
{
    --color-selected-variant-background: #4b4141;
    --color-selected-variant-hover-background: #4b4141;
}

.variant-selected-option__button-label__text{
  display: none;
}

.variant-option__button-label:has([data-current-checked="true"]) .variant-selected-option__button-label__text{
  display: block;
}

/* ============================================================================
    MB BUTTON CLASS (ADD TO CART: Loading state)
  ============================================================================*/

universal-add-to-cart.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.cart-qty-error {
  color: red;
  font-size: 13px;
  margin-top: .5rem;
  margin-bottom: .5rem;
  text-align: center;
}

.mb-button.loading {
  pointer-events: none;
  opacity: 0.5;
}

universal-add-to-cart.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  
  width: 30px;
  height: 30px;
  border: 5px solid #FFF;
  border-bottom-color: transparent !important;
  border-radius: 50%;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
} 

/* Default container for section 
  .section-container .section {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
    @media screen and (min-width: 750px) {
    .section-container .section {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }
  @media screen and (min-width: 1200px) {
    .section-container .section {
      padding-left: 4rem;
      padding-right: 4rem;
    }
  }
  /* Default container for section end */ 
  /* Hide container style for sections inside side drawer */
  .dialog-drawer .section-container .section {
    padding-left: 0;
    padding-right: 0;
  }
  /* Hide container style for sections inside side drawer end */



/* ============================================================================
    CONFIRMATION POPUP
  ============================================================================*/
  .confirm-modal{
    background: white;
    text-align: center;
  }
  .button-confirm{
    margin: 0 auto 8px;
    width: 260px;
    outline: 0;
  }
  p.title-suffix{
    margin-bottom: 0;
    color:#414042;
    letter-spacing: 10%;
    font-weight: 500;
    font-size: 3.333vw;
    @media screen and (min-width: 750px){
      font-size: var(--font-lg);
    }
  }

  /* OLP FAQ */
  .mb-product-faq{
    width: 100%;
    margin: auto;
  }

  /* Billboard burst */
  .burst{
    position: absolute;
    z-index: 1;
  }





  /* ============================================================================
    PREUPSELL STYLES
  ============================================================================*/
  .preupsell-nothanks{
    text-decoration: underline;
    font-weight: 700;
    white-space: nowrap;

    @media screen and (min-width: 750px){
      text-decoration: none;
      width: 330px;
      background: white;
      border: 1px solid black;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 46px;
      border-radius: 45px;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 1.4px;
    }
  }

  .preupsell-upgrade.btn{
    letter-spacing: 1.4px;
    padding: 12px 30px;
    white-space: nowrap;

    @media screen and (min-width: 750px){
      width: 330px;
    }
  }


  
/* BA CROSSFADE SECTION */
.ba-crossfade-container {
  position: relative;
  width: 100%;
  height: 75vw;
  max-height: 370px;
}
.ba-crossfade-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-crossfade-container .top-img {
  clip-path: inset(0 0 0 0); 
  animation: none;
}

/* enable animation for visible BA slides */
slideshow-slide[aria-hidden="false"] .ba-crossfade-container .top-img {
  animation: wipe-back-forth 4s infinite alternate forwards linear;
}

@media screen and (min-width: 640px) and (max-width: 1200px){
  .ba-crossfade-container {
    max-width: 33vw;
    max-height: 23vw;
  }
}
@media screen and (max-width: 639px){
  .ba-crossfade-container { max-width: 100%; }
}

@keyframes wipe-back-forth {
  0% { clip-path: inset(0 0 0 0);  }
  20% { clip-path: inset(0 0 0 0);  }
  80% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}
/* B&A video slider */
.resource-list__carousel slideshow-slide.resource-list__slide video{
  width: 100%;
}
/* Testimonial heading stars */
svg.testimonial-stars{
  width: auto;
  margin: 0 6px;
  g{
    fill: #414042;
    stroke: #414042;
  }
  path{
    stroke: #414042;
  }
}
/* Global videos width fix */
video{
  width: 100%;
}
/* PDP product gallery thumbnail fix */
@media (max-width: 749px){
  .product-information__media .slideshow-controls__thumbnails{
    margin-left: 0;
    padding-left: 4px;
  }
  .product-information__media .slideshow-controls__thumbnails .slideshow-control{
    width: clamp(58px,7vw,var(--thumbnail-width));
  }
}
/* FAQ title font-weight */
.accordion .details__header.faq-title-text{
  font-weight: 500;
}
/* footer links padding fix */
@media (max-width: 749px){
  .link-group-accordion-mobile accordion-custom details[open]{
    padding-bottom: 0;
  }
}

/* Accessibility, TC and Privay policy Page */
.accessibility-info .go-to-top,
.privacy-policy-page #topBack,
.terms-container .back-to-top{
  padding-top: 1.3rem;
  text-align: center;
}
.accessibility-info a,
.shopify-policy__body a{
  color: #321783;
}
.shopify-policy__container{
  max-width: 100vw;
  @media (min-width: 749px){
    max-width: 90vw;
  }
}
.shopify-policy__body strong{
  font-weight: 500;
}
.shopify-policy__title h1{
  display: none;
}
.shopify-policy__body p{
  margin-bottom: 1rem;
}
.shopify-policy__body  table.privacy-policy.unstriped tr,
.shopify-policy__body  table.privacy-policy.unstriped td,
.shopify-policy__body  table.privacy-policy.unstriped th{
  border: 1px solid black;
} 
.shopify-policy__body h2{
  font-size: var(--font-2xl);
  font-weight: 500;
}
.terms-container h3{
  font-size: var(--font-xl);
  font-weight: 500;
}
/* PDP related products slide  */
.resource-list__carousel slideshow-slide:first-child product-card .product-card__content{
  @media screen and (max-width: 749px) {
    margin-left: 0 !important;
  }
}
/*  */
.pdp-prod-description{
  font-size: var(--font-md);
  @media screen and (min-width: 750px) {
    font-size: var(--font-lg);
  }
}


/* STICKY FOOTER FIX */
@media screen and (max-width: 750px) {

  /* for mobile only - move userway up when sticky footer containing purchase options and product tiles is shown*/    
  body:has(.purchase-option .sticky-footer-show) .uwy .userway_buttons_wrapper{
      transform: translateY(-320%); 
  }
  
  /* for mobile only - move userway up when simple sticky footer is shown */
  body:has(.sticky-footer-show) .uwy .userway_buttons_wrapper{
      transform: translateY(-120%); 
  }
  
  /* Keep UserWay above the Truyo banner.  */
  html.truyo-banner-visible .uwy .userway_buttons_wrapper{
      transform: translateY(-140px);
  }

  .sticky-footer{
      transition: transform 0.4s ease-out;
  }

}

/* Desktop: UserWay also overlaps the Truyo banner (~47px tall at 1440px width). */
@media screen and (min-width: 750px) {
  html.truyo-banner-visible .uwy .userway_buttons_wrapper{
      transform: translateY(-60px);
  }
}

/* Keep the sticky CTA flush above the Truyo banner  */
.sticky-footer-show.sticky-footer:not(#truyo-consent-module) {
  transform: translateY(calc(-1 * var(--truyo-banner-height, 0px))) !important;
}

/* Keep UserWay above the combined sticky CTA + Truyo stack when both are visible — */
@media screen and (max-width: 749px) {
  html.truyo-banner-visible:has(.sticky-footer-show.sticky-footer:not(#truyo-consent-module)) .uwy .userway_buttons_wrapper{
      transform: translateY(calc(-1 * (var(--truyo-banner-height, 132px) + var(--mb-sticky-panel-height, 141px) + 7px)));
  }
}
@media screen and (min-width: 750px) {
  html.truyo-banner-visible:has(.sticky-footer-show.sticky-footer:not(#truyo-consent-module)) .uwy .userway_buttons_wrapper{
      transform: translateY(calc(-1 * (var(--truyo-banner-height, 47px) + var(--mb-sticky-panel-height, 72px) + 7px)));
  }
}



/* IMAGE ANIMATION FOR ROTATING BILLBOARD */
@keyframes imageToggle {
  0%, 50% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.rotating-top-pic{
  animation: imageToggle 8s steps(1) infinite;
}


/* SECTION OVERFLOW MAINLY FOR BILLBOARD FREE GIFTS THAT OVERFLOW */
.shopify-section:has(.billboard), .shopify-section:has(.full-width) {
    overflow-y: hidden;
}

/* DOLLAR SUPERSTAR */
.dollar{
  top: -0.3em;
  font-size: .75em;
  font-family: "Times New Roman";
  position: relative;
}

body .full-width > .section-panel-flex{ width: 100%; }

/* IF A BILLBOARD HAS A CTA, CLICKING THE BILLBOARD WILL CLICK THE CTA, SO GIVE IT THE HAND CURSOR */
.billboard:has(.button){ cursor: pointer; }

/* Remove display property for conditonal component */
.conditional-container,
.conditional-item{
  display: contents;
}