/** Shopify CDN: Minification failed

Line 87:0 Unexpected "}"
Line 125:11 Expected ":"

**/
/* ------------------- SM Updates ------------------- */



/* Sticky Add-to-cart button on product pages */


#essential-sticky-cart-form-mobile {
   padding: 25px 15px 15px 15px !important;  
   background: #F6F5F4 !important;
}

#essential-sticky-cart-form-mobile button {
   background: #102100 !important;
   margin: 20px;
   color: #F6F5F4 !important;
   border-radius: 10px !important;
}

/* Product block updates */

.product-block {text-align: left !important}
.product-block--sales-point {
    display: flex !important;
    align-items: center !important; /* Vertically centers the icon and text */
    justify-content: flex-start !important; /* Left aligns the content */
    text-align: left !important; /* Ensures text itself is left-aligned */
    margin: 0px !important;
}

.sales-points {margin: 5px 0px !important;}

.product-block--header {margin-bottom: 10px}




/* Announcement bar and Main Header on Mobile */ 

/* Mobile announcement bar - make thinner and keep content centered */
@media screen and (max-width: 768px) {
  /* Main announcement bar container 
  .announcement-bar {
    min-height: 30px !important;
    height: 30px !important;
    padding: 10px 0 !important;
    line-height: 20px !important; /* Match the height */
}

  .announcement-text {
    padding: 0px !importan; 
    font-size: 0.8em; 
    text-decoration:none;
  }
  
  .header-layout {
    display: flex !important;
    align-items: center !important;
    height: 35px !important;

}


.site-header__search .search__input {

  padding: 2px 5px !important;
  margin-top: 2px;
}
#SiteHeader > div.site-header__search-container.is-active > div > div > predictive-search > form > div.search__input-wrap > button {
    width: 30px !important;
    height: 30px !important;
    padding: 4px !important;
}

/* Scale down the icon inside the button */
#SiteHeader > div.site-header__search-container.is-active > div > div > predictive-search > form > div.search__input-wrap > button .icon {
    width: 20px !important;
    height: 20px !important;
}

}



/* Add-to-cart on Collection Grid */ 


.cleverapps-collections-add-to-cart-add-to-cart-button {
  margin-top: 2.5px !important;
  width: 60% !important; 
  border: 2px solid #000000 !important;
  height: 30px !important; 
  min-height: 30px !important; 
  font-size: 14px !important;
  padding: 2px 10px !important; 

}


.cleverapps-collections-add-to-cart-widget,
.cleverapps-collections-add-to-cart-button-super-container {
  padding-left: 0px !important;
  padding-right: 0px !important;
  flex-start: start !important;
}

.cleverapps-collections-add-to-cart-sold-out-button {
  margin-top: 2.5px !important;
  border-radius: 0 !important; 
  background: #F6F5F4 !important;
  border: 1px solid #b0b0b0 !important;
  font-size: 13px !important;
  color: #b0b0b0 !important;
  border-radius: 10px !important;
  width: 50% !important; 
  height: 30px !important; 
  font-family: 'Josefin Sans';
  min-height: 30px !important; 
  font-size 14px !important;
}

.grid-product__tag--sold-out {display: none}



@media screen and (max-width: 768px) {
.cleverapps-collections-add-to-cart-add-to-cart-button, .cleverapps-collections-add-to-cart-sold-out-button {
  font-size: 10px !important;
  width: 70% !important; 
  margin-top: 0px !important;
}

[data-context="featured-collection"] .cleverapps-collections-add-to-cart-add-to-cart-button, .cleverapps-collections-add-to-cart-sold-out-button {
width: 70% !important;
}

}


[data-context="featured-collection"] .cleverapps-collections-add-to-cart-widget {
padding-bottom: 0 !important;
}

/*** MM Complementary Products ***/
.mm-product-recommendations-block[data-intent=complementary]{
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: var(--bg-clr);
  padding: 24px;
  position: relative;
  @media (max-width: 767px){
    padding: 16px 12px;
    gap: 12px;
  }
  &.atc-active{
    .grid-product__link:after{
      content: unset;
    }
  }
  .flickity-enabled{
    position: static;
  }
  .flickity-button{
    top: unset;
    bottom: -10px;
    left: 20px;
    background: transparent;
    @media (max-width: 749px){
      bottom: -20px;
    }
    &:after{
      content: "";
      display: inline-block;
      width: 20px;
      height: 14px;
      background-repeat: no-repeat;
      background-size: contain;
      margin-left: 6px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 20 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.2243 0L12.5729 0.672015L18.2365 6.52407H0.476347H0V7.47593H18.2356L12.5729 13.327L13.2243 14L20 6.99905L13.2243 0Z' fill='black'/%3E%3C/svg%3E");
    }
    &.flickity-next{
      left: 60px;
      @media (min-width: 768px) and (max-width: 991px){
        top: 40px;
        right: 20px;
        left: inherit;
      }
      @media (max-width: 767px){
        left: calc(0% - 90px);
      }
    }
    &.flickity-previous{
      &:after{
        transform:rotate(180deg) translateY(0px)
      }
      @media  (min-width: 768px) and (max-width: 991px){
        top: 40px;
        left: unset;
        right: 60px;
      }
      @media (max-width: 767px){
        left: calc(0% - 130px);
      }
    }
    svg{
      display: none;
    }
  }
  .product-recommendations_content{
    .product-recommendations__title{
        font-family: Cardo;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 28.05px;
        letter-spacing: -0.75px;
        text-transform: capitalize;
        margin: 0;
        color: var(--title-clr);
        @media (max-width: 767px){
          font-size: 16px;
        }
    }
    .product-recommendations__description{
        color: var(--text-clr);
        font-family: "Josefin Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 300;
        line-height: 130%;
        margin-top: 12px;
        @media (max-width: 767px){
          font-size: 10px;
        }
    }
  }
  .product-recommendations__slide{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    @media (max-width: 767px){
      flex-wrap: nowrap;
    }
    .grid__item{
      padding: 0;
      margin: 0;
      max-width: calc(50% - 6px);
    }
  }
  .grid__item-image-wrapper{
    flex-direction: column;
    .grid-product__image-mask{
      width: 100%;
    }
    .quick-add-mm{
      width: 100%;
      .add-to-cart{
        color: #FFF;
        font-size: 12px;
        font-weight: 400;
        line-height: 1;
        background: var(--title-clr);
        border-radius: 88px;
        padding: 10px 14px;
        letter-spacing: 0.4px;
        width: 100%;
        text-align: center;
        @media (max-width: 767px){
          font-size: 10px;
          padding: 6px 10px;
        }
      }
    }
    .grid-product__meta{
      width: 100%;
      margin: 0;
      .jdgm-widget{
        display: none !important;
      }
      .grid-product__title{
        color: var(--text-clr);
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0.5px;
        @media (max-width: 767px){
          font-size: 13px;
          line-height: 120%;
        }
      }
      .grid-product__price{
        font-size: 15px;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0.5px;
        color: var(--text-clr);
        @media (max-width: 767px){
          font-size: 13px;
          line-height: 120%;
        }
      }
    }
  }
}

/*** MM Quantities ***/
.mm-quantities-wrapper{
  &.quantity-block .title{
    margin: 0 0 12px;
  }
  .title{
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 19.5px;
    letter-spacing: -0.75px;
    margin: 0 0 20px;
    text-transform: capitalize;
    .text-normal{
      font-weight: 500;
    }
    @media (max-width: 767px){
      font-size: 14px;
    }
  }
  .mm-quantities-blocks{
    display: flex;
    align-items: stretch;
    gap: 8px;
  }
  .quantity-block{
    flex: 1;
    display: flex;
    align-items: center;
    padding: 12px;
    gap: 8px;
    background-color: #F6F5F4;
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
    @media screen and (max-width: 1220px) and (min-width: 992px){
      padding: 12px 6px;
    }
    @media (max-width: 991px){
      flex-direction: column;
      text-align: center;
    }
  }
  .image-wrapper{
    max-width: 56px;
  }
  .quantity-title{
    color: #4F4F4F;
    font-family: "Josefin Sans";
    font-size: clamp(14px, 1.1vw, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0;
    @media (max-width: 767px){
      font-size: 14px;
    }
  }
  .quantity-pricing{
    color: #4F4F4F;
    font-family: "Josefin Sans";
    font-size: 14px;
    font-style: italic;
    font-weight: 300;
    line-height: 130%;
    margin: 0;
    @media (max-width: 767px){
      font-size: 12px;
    }
  }
  .tag{
    position: absolute;
    top: -12px;
    color: #1C4632;
    background: white;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-transform: capitalize;
    border: 1px solid #1C4632;
    border-radius: 32px;
    padding: 4px 9px;
  }
  .quantity-block:last-child{
    .tag{
      background: #1C4632;
      color: white;
    }
  }
  .quantity-block.active{
    border-color: #000;
    background: #FFF;
  }
}

.quick-product__btn.quick-view-icon{
  background: transparent;
  text-align: right;
  max-width: fit-content;
  left: unset;
  .icon--quick-view{
    width: 24px;
    height: 24px;
  }
}



/* ========== SEARCH HEADER (both MAABAE + CultureClub) ==========
     When search opens it reads as ONE solid full-width panel that continues
     the header colour — no grey body colour, no grey gap under the input,
     no dark page scrim. Panel bleeds edge-to-edge; result rows stay centered
     in the site's 1500px content column.
     STRUCTURE rules are template-agnostic; only COLOUR branches per brand. */

  /* ---- STRUCTURE (both templates) ---- */
  predictive-search { max-width: none; }

  .site-header__search .page-width {
    max-width: 1500px;
    margin: 0 auto;
    position: static;
  }

  predictive-search .search__results {
    margin-top: 0 !important;                 /* kill the 10px grey strip */
    left: 50%;
    right: auto;
    width: 100vw !important;
    margin-left: -50vw !important;            /* stretch to viewport edges */
    margin-right: 0 !important;
  }
  predictive-search .search__results > * {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 17px;
    padding-right: 17px;
  }
  predictive-search.is-active .predictive__screen {
    background: transparent !important;
  }

  /* ---- COLOUR: MAABAE (header colour) ---- */
  .maabae-template .site-header__search,
  .maabae-template .site-header__search .page-width,
  .maabae-template predictive-search,
  .maabae-template predictive-search .search__results {
    background-color: var(--colorNav) !important;
  }
  .maabae-template .site-header__search,
  .maabae-template .site-header__search .search__input,
  .maabae-template .site-header__search .search__input::placeholder,
  .maabae-template predictive-search .search__results,
  .maabae-template predictive-search .search__results a,
  .maabae-template predictive-search .search__results span,
  .maabae-template predictive-search .search__results p {
    color: var(--colorNavText);
  }
  .maabae-template .site-header__search .btn--search .icon path,
  .maabae-template .site-header__search .btn--close-search .icon path {
    stroke: var(--colorNavText) !important;
  }

  /* ---- COLOUR: CultureClub (maroon palette) ---- */
  .culture-club-template .site-header__search,
  .culture-club-template .site-header__search .page-width,
  .culture-club-template predictive-search,
  .culture-club-template predictive-search .search__results {
    background-color: var(--cc-panel) !important;
  }
  .culture-club-template predictive-search .search__results,
  .culture-club-template predictive-search .search__results a,
  .culture-club-template predictive-search .search__results span,
  .culture-club-template predictive-search .search__results p {
    color: var(--cc-accent) !important;
  }

/* ---- MOBILE: close the left gap so the panel is truly edge-to-edge ---- */
  @media only screen and (max-width: 768px) {
    .site-header__search-container.is-active,
    .site-header__search-container {
      left: 50% !important;
      right: auto !important;
      width: 100vw !important;
      margin-left: -50vw !important;
    }
    .site-header__search {
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      margin-left: 0 !important;
    }
    .site-header__search .page-width {
      padding-left: 17px !important;
      padding-right: 17px !important;
      max-width: 100% !important;
    }
    predictive-search .search__results {
      margin-top: 0 !important;
    }
    predictive-search .search__results > * {
      padding-left: 17px;
      padding-right: 17px;
    }
  }

  /* ---- DIVIDERS / BORDERS: follow brand colour ---- */
  .maabae-template .predictive-search-results h3 {
    border-color: #F6F5F4 !important;
  }
  .culture-club-template .predictive-search-results h3 {
    border-color: var(--cc-accent) !important;
  }
/* ---- SEARCH INPUT FIELD: rounded corners + dark brand border + dark text ---- */
  .site-header__search .search__input {
    border-radius: 6px !important;
    border: 1px solid;
  }
  .maabae-template .site-header__search .search__input {
    color: var(--colorNav) !important;
    border-color: var(--colorNav) !important;
  }
  .culture-club-template .site-header__search .search__input {
    color: var(--cc-panel) !important;
    border-color: var(--cc-panel) !important;
  }

  /* search (magnifier) icon = same dark brand colour */
  .maabae-template .site-header__search .btn--search .icon path {
    stroke: var(--colorNav) !important;
  }
  .culture-club-template .site-header__search .btn--search .icon path {
    stroke: var(--cc-panel) !important;
  }

  /* ---- "Show all results for..." button border ---- */
  .maabae-template .results__search-btn {
    border-color: #F6F5F4 !important;
  }
  .culture-club-template .results__search-btn {
    border-color: var(--cc-accent) !important;
  }

/* ---- TYPED vs PREDICTED suggestion text ----
     Markup: <span><mark>mad</mark>aliya two tone</span>
     Opacity compounds, so dim via COLOR not opacity. */
  .maabae-template .results--queries span {
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1 !important;
  }
  .maabae-template .results--queries mark {
    color: var(--colorNavText) !important;
    opacity: 1 !important;
  }
  .culture-club-template .results--queries span {
    color: rgba(240, 224, 130, 0.55) !important;
    opacity: 1 !important;
  }
  .culture-club-template .results--queries mark {
    color: var(--cc-accent) !important;
    opacity: 1 !important;
  }




/* ---- MOBILE: cart drawer ---- */

    /* ---- MOBILE: cart drawer full-screen (close the left gap) ---- */
  @media only screen and (max-width: 768px) {
    #CartDrawer.drawer--right {
      width: 100vw !important;
      max-width: 100% !important;
      right: -100vw !important;
    }
    #CartDrawer.drawer--right.drawer--is-open {
      transform: translateX(-100vw) !important;
    }
  }

      /* ---- MAABAE: cart drawer "Check Out" button (grey bg, dark green text) ---- */
    .maabae-template #CartDrawer .cart__checkout {
      background-color: #F6F5F4 !important;
      color: #102100 !important;
      border: 2px solid #102100 !important;
      transition: 0.3s;
    }
    .maabae-template #CartDrawer .cart__checkout:hover {
      background-color: #102100 !important;
      color: #F6F5F4 !important;
      border-color: #F6F5F4 !important;
    }

  /* Hide dynamic/quick checkout buttons (PayPal, G Pay, etc.) in the cart drawer only */
  #CartDrawer .additional-checkout-buttons {
    display: none !important;
  }
  

  /* ================= Featured collection "VIEW ALL" ================= */
    /* View-all always reads as a text link (uppercase, underline on hover), never a pill. */

    /* --- Shared text-link look (top-right, bottom, mobile tail) --- */
    [data-context="featured-collection"] .section-header__link.btn,
    [data-context="featured-collection"] .grid__item > a.btn,
    [data-context="featured-collection"] .grid-product__see-all {
      background: transparent !important;
      border: none !important;
      padding: 5 !important;
      min-width: 0 !important;
      color: inherit !important;
      font-size: 14px !important;
      letter-spacing: 0.5px !important;
      font-weight: 300;
      text-transform: uppercase !important;
      text-decoration: none !important;
      white-space: nowrap !important;
      box-shadow: none !important;
    }
    [data-context="featured-collection"] .section-header__link.btn:hover,
    [data-context="featured-collection"] .grid__item > a.btn:hover,
    [data-context="featured-collection"] .grid-product__see-all:hover {
      background: transparent !important;
      color: inherit !important;
      text-decoration: underline !important;
    }


/* Stop CultureClub template colours bleeding into Klaviyo forms/popups */
  .culture-club-template [class*="kl-private-reset-css-"],
  .culture-club-template [class*="kl-private-reset-css-"] * {
    color: initial;
  } 

 /* Cart product thumbnails */
  .cart__image > .image-wrap {
    overflow: hidden;
    border-radius: 6px;
    background: transparent !important;
  }

  .cart__image > .image-wrap image-element,
  .cart__image > .image-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  .cart__image > .image-wrap img {
    display: block;
    object-fit: cover;
    object-position: center;
  }




/* ================================================================
   SM CART DRAWER RECOMMENDATIONS
   Source: Shopify Search & Discovery complementary products
   ================================================================ */

#CartDrawer [data-sm-cart-recommendations-mount][hidden] {
  display: none !important;
}

#CartDrawer [data-sm-cart-recommendations-mount][aria-busy="true"] {
  min-height: 1px;
}

/*
  Impulse does not lock the page behind the drawer on iOS Safari
  (theme.css sets .supports-touch.lock-scroll to overflow:initial there), so
  when the drawer's scroll region reaches its top or bottom edge iOS chains
  the swipe to the page underneath and the drawer feels stuck. Contain the
  scroll inside the drawer. The shorter the cart content, the more often the
  edges are hit, which is why this shows up after adding a recommendation.
*/
#CartDrawer .drawer__scrollable {
  overscroll-behavior-y: contain;
}

/*
  Keep the cart products and recommendations in the same normal-flow scroll
  region. The footer remains a fixed sibling managed by Impulse.
*/
#CartDrawer [data-sm-cart-recommendations-mount]:not([hidden]) {
  position: static;
  order: 99;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  margin-top: 48px;
  padding: 0;
  overflow: visible;
}

/*
  Hold a consistent recommendation start position for short carts. Once the
  cart lines exceed this space, their natural height pushes the widget down.
*/
#CartDrawer .drawer__scrollable:has(> [data-sm-cart-recommendations-mount]:not([hidden])) > [data-products] {
  flex: 0 0 auto;
  min-height: clamp(160px, 27vh, 220px);
}

#CartDrawer [data-sm-cart-recommendations-mount]:not([hidden]) > .sm-cart-recommendations {
  position: static;
  width: 100%;
}

#CartDrawer .sm-cart-recommendations {
  --sm-cart-recommendations-bg: #102100;
  --sm-cart-recommendations-ink: #f6f5f4;
  --sm-cart-recommendations-divider: rgba(246, 245, 244, 0.45);
  margin-top: 0;
  padding: 0;
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  background: var(--sm-cart-recommendations-bg);
  color: var(--sm-cart-recommendations-ink);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

/* MAABAE outlined card: dark-green drawer background with cream details. */
.maabae-template #CartDrawer .sm-cart-recommendations {
  --sm-cart-recommendations-bg: #102100;
  --sm-cart-recommendations-ink: #f6f5f4;
  --sm-cart-recommendations-divider: rgba(246, 245, 244, 0.45);
}

/* CultureClub outlined card: navy drawer background with yellow details. */
.culture-club-template #CartDrawer .sm-cart-recommendations {
  --sm-cart-recommendations-bg: #131737;
  --sm-cart-recommendations-ink: #f2f08e;
  --sm-cart-recommendations-divider: rgba(242, 240, 142, 0.45);
}

#CartDrawer .sm-cart-recommendations__tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border-bottom: 1px solid var(--sm-cart-recommendations-divider);
}

#CartDrawer .sm-cart-recommendations__tab {
  appearance: none;
  flex: 0 0 auto;
  margin: 0 0 -1px !important;
  padding: 12px 0 10px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--sm-cart-recommendations-ink) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  opacity: 0.62;
  cursor: pointer;
}

#CartDrawer .sm-cart-recommendations__tab[aria-selected="true"] {
  border-bottom-color: var(--sm-cart-recommendations-ink) !important;
  opacity: 1;
}

/* With one intent, extend the thick active rule across the full widget. */
#CartDrawer .sm-cart-recommendations__tab:only-child {
  flex: 1 1 100%;
  width: 100%;
}

#CartDrawer .sm-cart-recommendations__tab:hover {
  opacity: 1;
}

#CartDrawer .sm-cart-recommendations__tab:focus-visible {
  outline: 1px solid var(--sm-cart-recommendations-ink);
  outline-offset: -3px;
}

#CartDrawer .sm-cart-recommendations__panel[hidden] {
  display: none !important;
}

#CartDrawer .sm-cart-recommendations__products {
  display: block;
}

#CartDrawer .sm-cart-recommendations__card {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--sm-cart-recommendations-divider);
  color: inherit;
}

#CartDrawer .sm-cart-recommendations__card:last-child {
  border-bottom: 0;
}

#CartDrawer .sm-cart-recommendations__image-link {
  display: block;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.14);
}

#CartDrawer .sm-cart-recommendations__image,
#CartDrawer .sm-cart-recommendations__image--placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

#CartDrawer .sm-cart-recommendations__details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  column-gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 2px 0;
}

#CartDrawer .sm-cart-recommendations__product-title {
  grid-column: 1;
  grid-row: 1;
  display: block;
  color: var(--sm-cart-recommendations-ink) !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
  text-decoration: none;
}

#CartDrawer .sm-cart-recommendations__product-title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

#CartDrawer .sm-cart-recommendations__price {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 6px;
  color: var(--sm-cart-recommendations-ink) !important;
  font-size: 13px;
  line-height: 1.2;
}

#CartDrawer .sm-cart-recommendations__compare-price {
  color: var(--sm-cart-recommendations-ink) !important;
  opacity: 0.65;
}

#CartDrawer .sm-cart-recommendations__price span {
  color: var(--sm-cart-recommendations-ink) !important;
}

#CartDrawer .sm-cart-recommendations__action {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: 0;
  padding: 0;
}

#CartDrawer .sm-cart-recommendations__action .qai-trigger {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 92px;
  margin: 0;
  padding: 8px 16px 6px !important;
  border: 1px solid var(--sm-cart-recommendations-ink) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--sm-cart-recommendations-ink) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
}

#CartDrawer .sm-cart-recommendations__action .qai-trigger:hover,
#CartDrawer .sm-cart-recommendations__action .qai-trigger:focus-visible {
  background: var(--sm-cart-recommendations-ink) !important;
  color: var(--sm-cart-recommendations-bg) !important;
  border-color: var(--sm-cart-recommendations-ink) !important;
  filter: none;
}

#CartDrawer .sm-cart-recommendations__action .qai-trigger.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

/* Keep the checkout note directly beneath the left-aligned subtotal label. */
#CartDrawer .drawer__footer > .cart__item-sub.cart__item-row {
  margin-bottom: 3px;
}

#CartDrawer .drawer__footer > .cart__item-row.text-center {
  margin-bottom: 14px;
  text-align: left !important;
}

#CartDrawer .drawer__footer > .cart__item-row.text-center small {
  display: block;
  text-align: left;
}

/* Pull the checkout action closer to the note and give it more presence. */
#CartDrawer .cart__checkout-wrapper {
  margin-top: 10px;
}

#CartDrawer .cart__checkout {
  min-height: 60px;
  padding-top: 17px !important;
  padding-bottom: 17px !important;
}

@media only screen and (max-width: 480px) {
  #CartDrawer .sm-cart-recommendations {
    margin-top: 0;
    padding: 0;
  }

  #CartDrawer .sm-cart-recommendations__card {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
  }

  #CartDrawer .sm-cart-recommendations__image-link {
    width: 100px;
    height: 100px;
  }

  #CartDrawer .sm-cart-recommendations__product-title {
    font-size: 14px;
  }

  #CartDrawer .sm-cart-recommendations__action .qai-trigger {
    min-width: 82px;
    padding: 7px 12px 5px !important;
  }
}

/* ================================================================
   KLAVIYO "GET 10% OFF" TEASER (form RgKMgX)
   Klaviyo renders the tab as a fixed, -90deg-rotated div with inline
   styles, so overrides need !important. Notes: docs/projects/website/notes.md
   ================================================================ */

/* 1. Hide the tab while the cart or nav drawer is open (mobile only). */
@media only screen and (max-width: 768px) {
  html.js-drawer-open .kl-teaser-RgKMgX,
  html.js-drawer-open [class*="kl-teaser-"] {
    display: none !important;
  }
}

/* 2. Start the tab 1/3 down the screen on mobile (desktop stays centred).
      translate(-100%) makes `top` the tab's top edge. */
@media only screen and (max-width: 768px) {
  .kl-teaser-RgKMgX {
    top: 33.333% !important;
    transform: rotate(-90deg) translate(-100%, 0) !important;
  }
}

/* 3. Dismiss X: tucked inside the corner, no circle, thinner stroke.
      The tab is rotated, so bottom/right here = visual top/right. */
.kl-teaser-RgKMgX button.klaviyo-close-form {
  bottom: 4px !important;
  right: 4px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.kl-teaser-RgKMgX button.klaviyo-close-form circle {
  fill: none;
  stroke: none;
}

.kl-teaser-RgKMgX button.klaviyo-close-form path {
  stroke-width: 1.25;
}

/* ================================================================
   ESSENTIAL STICKY ADD TO CART: mobile bar hidden until 100vh scrolled
   Replace the previous version of this block at the end of
   assets/sm-custom.css. Requires assets/sm-sticky-atc-gate.js (marks the
   bar with data-sm-sticky-bar and toggles html.sm-past-100vh).
   The app sets opacity/visibility via its own classes
   (opacity: var(--opacity) etc.) in a stylesheet injected AFTER
   sm-custom.css, so a bare attribute selector lost the tie. Anchoring to
   the app's #sticky-cart-portal container plus !important wins.
   Uses opacity/visibility rather than transform so it never fights the
   app's own show/hide animation. Verified 2026-09-03 on the September
   Refresh v1 preview. Notes: docs/projects/website/notes.md
   ================================================================ */
@media only screen and (max-width: 767px) {
  #sticky-cart-portal [data-sm-sticky-bar] {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s !important;
  }
  html.sm-past-100vh #sticky-cart-portal [data-sm-sticky-bar] {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.25s ease, visibility 0s !important;
  }
}