/** Shopify CDN: Minification failed

Line 541:0 Unexpected "}"

**/
@font-face {
  font-family: "alphina";
  src: url("/cdn/shop/files/GT-Alpina-Standard-Bold_Emily_Montes.woff?v=1727194474")
      format("woff"),
    url("/cdn/shop/files/GT-Alpina-Standard-Bold_Emily_Montes.woff2?v=1727194474")
      format("woff2");
}

@font-face {
  font-family: "simon";
  src: url("/cdn/shop/files/ABCSimonMono-Bold_Emily_Montes.woff?v=1727194654")
      format("woff"),
    url("/cdn/shop/files/ABCSimonMono-Bold_Emily_Montes.woff2?v=1727194654")
      format("woff2");
}

@font-face {
  font-family: "walsheim";
  src: url("/cdn/shop/files/GT-Walsheim-Medium_Emily_Montes.woff?v=1727194707")
      format("woff"),
    url("/cdn/shop/files/GT-Walsheim-Medium_Emily_Montes.woff2?v=1727194707")
      format("woff2");
}

@font-face {
  font-family: "walsheim-oblique";
  src: url("/cdn/shop/files/GT-Walsheim-Medium-Oblique_Emily_Montes.woff?v=1727194707")
      format("woff"),
    url("/cdn/shop/files/GT-Walsheim-Medium-Oblique_Emily_Montes.woff2?v=1727194707")
      format("woff2");
}

@font-face {
  font-family: "PPFormula";
  src: url("/cdn/shop/files/PPFormula-CondensedBlack_Emily_Montes.woff?v=1727195029")
      format("woff"),
    url("/cdn/shop/files/PPFormula-CondensedBlack_Emily_Montes.woff2?v=1727195029")
      format("woff2");
}

/* fonts */


h1 {
    font-weight: 100 !important;
  font-family: "PPFormula" !important;
  font-size: 80px !important;
  text-transform: uppercase;
  letter-spacing: 0em !important;
  line-height: 90px;
}

.h1 {
    font-weight: 100 !important;
  font-family: "PPFormula" !important;
  font-size: 80px !important;
  text-transform: uppercase;
  letter-spacing: 0em !important;
  line-height: 90px;
}

@media screen and (max-width: 800px) {
  .h1 {
            font-size: 57px !important;
        line-height: 56px;
  }
    h1 {
            font-size: 57px !important;
        line-height: 56px;
  }
}


h2 {
    font-weight: 100 !important;
  font-family: "alphina" !important;
  font-size: 45px;
    text-transform: inherit !important;
  letter-spacing: 0em !important;
  line-height: 50px;
  
}

.h2 {
  font-weight: 100 !important;
  font-family: "alphina";
  font-size: 45px;
  letter-spacing: 0em;
  line-height: 50px;
    text-transform: inherit !important;
}

@media screen and (max-width: 800px) {
  h2 {
        font-size: 36px !important;
        line-height: 38px;
  }
   .h2 {
        font-size: 36px !important;
        line-height: 38px;
  }
}

h3 {
    font-weight: 100 !important;
  font-family: "PPFormula" !important;
  font-size: 50px !important;
  text-transform: uppercase;
  letter-spacing: 0em !important;
  line-height: 55px;
}
.h3 {
    font-weight: 100 !important;
  font-family: "PPFormula" !important;
  font-size: 50px !important;
  text-transform: uppercase;
  letter-spacing: 0em !important;
  line-height: 55px;
}
@media screen and (max-width: 800px) {
  .h3 {
    font-size: 45px;
    line-height: 50px;
  }
}

h4 {
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0em !important;
  text-transform: inherit !important;
  font-size: 32px;
  line-height: 34px;
}

.h4 {
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0em !important;
  text-transform: inherit;
  font-size: 32px;
  line-height: 34px;
}

.h6 {
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em  !important;
}
h6 {
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em !important;
}

.h5 {
  font-family: "simon", mono !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 100 !important;
}

h5 {
  font-family: "simon", mono !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 100 !important;
}

p {
  font-family: "walsheim";
  font-size: 16px;
}

p em {
  font-family: "walsheim-oblique";
  font-size: 16px;
}

/* header */

p.prose.heading.is-selected {
  font-family: "walsheim";
  font-size: 16px;
  letter-spacing: 0em;
  text-transform: inherit;
  word-spacing: 0em;
}
.link-faded {
  color: #2d4e49;
}

/* add border in nav
@media screen and (min-width: 800px) {
.header{    
            padding-block-end: 0px;
padding-inline-start: 0px;
padding-inline-end: 0px;}
.header__secondary-nav {
        padding-right: 5em;}
      .header__primary-nav {

          padding: 10px;
          border-bottom: 5px solid #f0a0d0;}
}
*/






/*cart*/

.cart-count {
  padding-left: 10px !important;
}
/*.icon-search
{
  display: none;
}
*/
.icon-cart {
  display: none;
}
.header__cart-dot {
  display: none;
}

/*buttons*/

.button {
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-size: 15px;
  color: #2d4e49;
  font-style: normal;
  letter-spacing: 0.1em;
  border-radius: 17px;
  border: 3px solid #2d4e49;
  padding: 9px 16px;
}

.button.button--primary{
    color: #2d4e49 !important;
    border: 3px solid #2d4e49 !important;
}
.button.button--outline{
    color: #2d4e49 !important;
    border: 3px solid #2d4e49 !important;
}



/*remove effect*/
.button:hover {
/*  background-image: none !important;
  background-position: unset;*/

   color: #2d4e49 !important;
    border: 3px solid #2d4e49 !important;
      transition: 0.5 ease !important;

      --hover-gradient: linear-gradient(#8fb744, #8fb744);
}
.button {
    transition: none;


}


/* banner */


/* collection */
.product-card__quick-add-button{
  background: #cbd990;
  color: #2d4e49;
}


.circle-button {
  background: rgb(203 217 144);
}

.price-list{
    font-family: "simon", mono !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 100 !important;
}
.product-title.h6 {
  font-family: "walsheim" !important;
  font-size: 23px;
  letter-spacing: 0em !important;
  text-transform: inherit;
  line-height: 28px;
  font-weight: 100 !important;
}
.aspect-tall {
  aspect-ratio: 4 / 5;
}
.product-card__image {
  border-radius: 30px;
}

.features--zoom-image .zoom-image {
  transform-origin: center;
  transition: scale 100s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.collection-toolbar__button-container .text-xxs{
  font-size: 15px !important;
  color: #2d4e49;
  border-radius: 30px;
  font-family: gopher, sans-serif !important;
  letter-spacing: 0.1em;
  text-transform: uppercase !important;
  opacity: 1 !important;
}


/* image list */
#section-template--15861050441841__image_list_yw7bL4
  .c-image-list__nav-wrapper {
  align-items: center !important;
  display: grid;
  text-align: center;
  justify-content: center;
}

.c-image-list__nav--alignment-center:before {
  padding-bottom: 20px;
  margin: auto;
  display: flex;
  font-family: gopher, sans-serif !important;
  font-weight: 700;
  content: "Everything you need for crazy happy plants";
  font-style: normal;
  line-height: 32px;
  text-transform: inherit;
  font-size: 26px !important;
}
@media screen and (max-width: 800px) {
  .c-image-list__nav--alignment-center:before {
    line-height: 32px;
    width: 90%;
    font-size: 28px !important;
  }
}
.c-image-list__nav a span {
  line-height: 0 !important;
  font-size: 15px !important;
  color: #2d4e49;
  border-radius: 30px;
  font-family: gopher, sans-serif !important;
  letter-spacing: 0.1em;
  text-transform: uppercase !important;
}

@media screen and (min-width: 800px) {
  .c-image-list__nav li a {
    padding-bottom: 18px !important;
    padding-top: 10px !important;
  }
}

.c-image-list__nav a {
  line-height: 0 !important;
}

/* creater borders and hover colors */
.c-image-list__nav {
  gap: 10px !important;
  display: grid;
  width: 60%;
  margin: auto !important;
  padding: 3vw;
}

/* add colors */
.c-image-list__nav li {
  line-height: 0em;
  border: 3px solid #2d4e49;
  border-radius: 60px;
}

.c-image-list__nav li:first-child {
  background: #ccd891;
}

.c-image-list__nav li:nth-child(2) {
  background: #7185d6 !important;
}

.c-image-list__nav li:nth-child(3) {
  background: #f5a887 !important;
}

.c-image-list__nav li:nth-child(4) {
  background: #efd8e2 !important;
}
.c-image-list__nav li:nth-child(5) {
  background: #8fb744 !important;
}

/* image scrolling section with illustrations*/
@media screen and (min-width: 750px) {
  #shopify-section-template--15861050441841__images_with_text_scroll_VrcWwR
    h4:before {
    content: "";
        background-size: 90px 100px;
        height: 100px;
        width: 90px;
    position: absolute;
    left: 69%;
    margin-top: -110px;
    display: block;
    transform: translate(-50%);
    background-repeat: no-repeat !important;
    background-image: url(/cdn/shop/files/SouthsidePlants_IllustrationV02.png?v=1728359969);
  }

  #shopify-section-template--15861050441841__images_with_text_scroll_VrcWwR
    h5:before {
    content: "";
    background-size: 90px 100px;
    height: 100px;
    width: 90px;
    position: absolute;
    left: 69%;
    margin-top: -110px;
    display: block;
    transform: translate(-50%);
    background-repeat: no-repeat !important;
    background-image: url(/cdn/shop/files/SouthsidePlants_IllustrationV12.png?v=1728329355);
  }

  
}

/* list section mobile */
@media screen and (max-width: 800px) {
  .c-image-list__nav {
    display: grid !important;
    padding: 0vw;
  }

  .c-image-list__nav--alignment-center {
    padding: 5vw !important;
  }
}

/* multi column */
@media screen and (max-width: 700px) {
#section-template--16035229433969__power_section_BaiFwp{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  overflow-x: hidden !important;
    width: 99.9vw !important;
          margin-bottom: -3px !important;
  position: relative;
    background-image: url(/cdn/shop/files/SouthsidePlants_Web53.png?v=1730749101);
  
}
}




@media screen and (max-width: 700px) {
  #shopify-section-template--15861050441841__multi_column_bWy7me
    .section-stack {
    padding-left: 1.5em !important;
    padding-right: 1.5em !important;
  }

#section-template--16035229433969__power_section_BaiFwp .ss-grid-item__position--center {
    padding: 25px !important;
}
#section-template--16035229433969__power_section_BaiFwp  .ss-image-caption-wrapper {
    padding-left: 0;
    padding-right: 0;
}
  
}

/* two multi column products home */
    #shopify-section-template--15861050441841__multi_column_FnRmFm {
        --multi-column-columns-per-row: 2;
        --multi-column-column-width: 31vw !important;
    }


/* testimonial */
.c-slider__media {
        border-radius: 60px !important;
border: 8px solid #f0a0d0;}




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


  #section-template--16035229433969__slider_ptig4h p {
    font-size: 18px !important;
    line-height: 25px !important;
  }

 /* .c-slider__controls.c-slider__controls--position-left{
    padding: 0 65vw 7vw !important;
  }*/
}

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

}
.c-slider__media-position--right img {
  overflow: visible;
}

}


/* rache code*/


.c-slider .c-slider__arrows-nav {
    justify-content: space-between !important;
    margin: 0 !important;
 
}

.c-slider .c-slider__arrows-nav {
    padding: 0 !important;
   
}

.c-slider .c-slider__controls {
    padding: 0 3vw !important;
    position: absolute  !important;
    bottom: unset !important;
    top: 50%  !important;
    translate: 0 -50%  !important;
  
}
.c-slider__arrows-nav {
   
    justify-content: space-between !important;}



/*
#shopify-section-template--15861050441841__slider_RN84i8 .description.description-position--default:before {
    content: "";
    background-size: 137px 20px;
    height: 20px;
    width: 137px;
    position: absolute;
    left: 25%;
    margin-top: -50px;
    display: block;
    transform: translate(-50%);
    background-repeat: no-repeat !important;
    background-image: url(/cdn/shop/files/SouthsidePlants_Web15.png?v=1727719960);
  }

*/

/* footer */
.footer .link-faded {
  font-family: "simon", mono !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 100 !important;
  color: #f4f3ee;
}

.footer .link-faded:hover {
  color: #8fb744;
}

.footer .h6 {
  color: #ee9cc3;
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.footer h4 {
  color: #8fb744 !important;
}
.heading.text-subdued.text-xxs {
  font-family: "simon", mono !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 100 !important;
  color: #2d4e49;
}

/* footer spacing */
.footer {
  padding-block-end: 0;
}
.footer__aside {
  justify-content: left;
  background-color: #cbd990;
  padding: 20px 30px;
}

.footer .container {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

@media screen and (min-width: 800px) {
  .footer__block-list {
    padding: 50px;
    column-gap: 0rem;
    padding-left: 5vw;
    padding-right: 5vw;
  }
}
.footer__inner {
  row-gap: 0px;
}

@media screen and (max-width: 700px) {
  .footer__block-list {
    text-align: center;
    margin: auto;
  }
  .footer__block-list {
    padding: 30px 80px !important;
  }
  .footer__inner .constrained-image {
    position: relative;
    display: flex;
    margin: 0 auto;
  }
}

/*newsletter*/
.input,
.textarea,
.select {
  font-family: "simon", mono !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 100 !important;
  color: #f5f4ee;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 3px solid #f5f4ee;
}

/* side cart */
.drawer::part(header) {
  border-block-end: 1px solid #2d4e49;
}

:where(.modal, .drawer, .popover, .header-search)::part(close-button) {
  opacity: 1.6;
}

.text-subdued {
  color: #2d4e49;
}

.text-xs {
  font-family: "walsheim";
}
.link-faded-reverse {
  font-family: "walsheim";
}

.drawer::part(footer) {
  border-block-start: 1px solid #2d4e49;
}

.form-control > label {
  font-family: "walsheim" !important;
}

/* FAQ PAGE */
.animated-plus:after {
    width: 3px;
    background-color:rgb(203 217 144);
}
.animated-plus:before {
    height:3px;

    background-color:rgb(203 217 144);
}

.accordion {
    border-block-width: 3px;
    border-color: rgb(203 217 144);
}


.accordion__toggle.text-lg {
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
*,
:before,
:after {
  border-color: rgb(35 79 74);
}

/* wholesale */
#shopify-section-template--15911129153649__custom_liquid_XaGWrA {
  content: "";

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent !important;
  background-image: url(/cdn/shop/files/SouthsidePlants_Web24_c720993f-2b55-40eb-977d-aecd60615377.png?v=1728358688);
}
#shopify-section-template--15911129153649__custom_liquid_XaGWrA .color-scheme {
  background-color: transparent !important;
}

@media screen and (max-width: 800px) {
    #shopify-section-template--15911129153649__power_section_bCjDQX .ss-text__content.ss-grid-block {
        padding: 2rem !important;
    }
.ss-spacer{display: none;}}




/* about */

#shopify-section-template--16035230089329__slideshow_nHgGtf .h1{
  font-family: "walsheim" !important;
  font-size: 16px !important;
  text-transform: inherit;
  color: #2d4e49;
  line-height: 25px;
}
@media screen and (max-width: 800px) {#shopify-section-template--16035230089329__slideshow_nHgGtf .h6 {
   font-size: 57px !important;
        line-height: 56px !important;
}}

#shopify-section-template--16035230089329__slideshow_nHgGtf .h6 {
  color: #8fb744;
  font-weight: 100 !important;
  font-family: "PPFormula" !important;
  font-size: 80px;
  text-transform: uppercase;
  letter-spacing: 0em !important;
  line-height: 90px;
}
/*two column about 

@media screen and (min-width: 800px) {
#shopify-section-template--15914398613617__multi_column_3cPRFP {
  .multi-column__item {
    padding: 4em;
    margin: auto;
  }
  .section-spacing {
    padding-block-start: 0em;
    padding-block-end: 0em;
  }
  .multi-column__item {
    border-left: 4px solid #cbd990;
  }

  .multi-column__item:nth-child(2) {
    border-right: 4px solid #cbd990;
  }
  
}
}

@media screen and (max-width: 800px) { 
#shopify-section-template--15914398613617__multi_column_3cPRFP {
.multi-column__item {
    padding: 1em;}

.section-spacing {
    padding-block-start: calc(var(--section-vertical-spacing-override, var(--section-vertical-spacing)) + var(--section-vertical-spacing-block-start-compensation, 0px));
   padding-block-end: 0em;
  }


}}*/

/* two multi column about  */
    #shopify-section-template--15914398613617__multi_column_3cPRFP{
    
    }

/* product page*/
.price-list--product  .h4{
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em !important;
}
.shopify-installments span{
  font-family: "walsheim" !important;
  font-size: 16px;
}


.h-stack .gap-1{
  font-family: "simon", mono !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 100 !important;
  color: #2d4e49;
}
label.block-swatch  {
  font-family: "simon", mono !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 100 !important;
  color: #2d4e49;
}


/* adjust layout of inline items*/
@media screen and (min-width: 800px) { 

.product-info__block-list>:not(:last-child):not([data-block-type="quantity-selector"]):not([data-block-type="buy-buttons"]) {
    display: inline-flex;
    padding-right: 1.5em;}


.product-info__block-item:is([data-block-type=vendor],[data-block-type=title],[data-block-type=sku],[data-block-type=price]){
    display: inline-flex;
    padding-right: 7em !important;}

}

/*
.product-info__block-list>:not(:nth-child(1)) {
    margin-block-start: var(--product-info-gap);
    display: inline-flex;
      padding-left: 20px;
}

.product-info__block-item:nth-child(4){
    margin-block-start: var(--product-info-gap);
    display: inline-flex;
      padding-left: 20px;
}
*/



/*bullet list*/
ul{
  font-family: "walsheim" !important;
  font-size: 16px;
  }









/* product list page*/
span.text-with-icon.justify-center{
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}



.smallcaps{
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

    .content-over-media h1 {
      color: #f4f3ee;
    }

.quantity-selector__input{  font-family: "simon", mono !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 100 !important;
  color: #2d4e49;
}
.jdgm-rev-widg__title {
    line-height: 30px !important;}

.jdgm-rev__title{
  font-family: "walsheim" !important;
  font-size: 16px;
}

.jdgm-paginate__page.jdgm-curt{
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.removable-facet{
  font-family: "walsheim" !important;
  font-size: 16px;
}

.collection-toolbar {
    box-shadow: 0 1px rgb(46 78 73), 0 -1px rgb(46 78 73);}


.checkbox-control{
  font-family: "walsheim" !important;
  font-size: 16px;
}
span.reversed-link{
  font-family: "walsheim" !important;
  font-size: 16px;
}

.text-sm{
  font-family: "walsheim" !important;
  font-size: 16px;
}
.block-swatch,
.quantity-selector {
  border-width: 3px;
  border-radius: 17px;
  border-color: #cbd990;
}
.product-info__block-item:is(
    [data-block-type="vendor"],
    [data-block-type="title"],
    [data-block-type="sku"],
    [data-block-type="price"]
  ) {
  --product-info-gap: 0rem;
}
.jdgm-prev-badge__text{
  font-family: "walsheim" !important;
  font-size: 16px;
}
/* link in bio
#shopify-section-sections--15861050998897__footer {
  display: none;
}*/


.blog-post-card__info .h4 {
  font-weight: 100 !important;
  letter-spacing: 0em !important;
    font-family: "alphina" !important;
  font-size: 28px;
  text-transform: inherit;
  letter-spacing: 0em;
  line-height: 32px !important;
}










/* reviews */
.jdgm-rev-widg__header{
          font-size: 36px !important;
        line-height: 38px !important;
}
.jdgm-paginate__page.jdgm-curt {
    font-weight: normal;
    font-size: 100% !important;}

.jdgm-histogram__bar-content {
    background: #f0dae3 !important;
}
.jdgm-rev-widg__summary-text{
  font-family: "walsheim" !important;
  font-size: 16px;
}

.jdgm-rev__author{
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.jdgm-sort-dropdown{
  font-family: "walsheim" !important;
  font-size: 16px;
}

.jdgm-histogram__row{
  font-family: "walsheim" !important;
  font-size: 16px;
}

.jdgm-widget-actions-wrapper{
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
a.jdgm-write-rev-link {
    border: 2px solid;
  background-color: transparent !important;
  border-radius: 30px;
}
.jdgm-widget label{
  font-family: "walsheim" !important;
  font-size: 16px;
}
.jdgm-form__reviewer-name-format-dropdown{
  font-family: "walsheim" !important;
  font-size: 16px;
}

.jdgm-all-reviews-widget, .jdgm-rev-widg {
    border: 0px solid #f4f3ee !important;}



.jdgm-quest, .jdgm-rev {
    border-top: 2px solid #f4f3ee !important;}

.jdgm-histogram {

    border-left: 0px solid #f4f3ee!important;
    border-right: 0px solid #f4f3ee !important;}

.jdgm-sort-dropdown{
    border: 2px solid #f4f3ee !important;}

@media screen and (min-width: 800px) {
.jdgm-all-reviews-widget, .jdgm-rev-widg {
    padding: 24px;
    width: 80%;
    margin: auto !important; }
}





/* checkout */
.order-summary__header th{
  opacity: 1;
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.text-end{
  opacity: 1;
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.h-stack.justify-start.gap-2{
  opacity: 1;
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.blog-post-card__read-more {
  font-family: "walsheim" !important;
  font-size: 16px;
}



section#shopify-section-template--16407109009521__slideshow_rCgaE8 .slideshow__next-section-button {
    display: none;
}
.metafield-rich_text_field ol li {
    font-size: initial;
    font-family: "walsheim";
}
/*Klaviyo form on keiki paste */
html {
    scroll-behavior: smooth;
}
#shopify-block-AbjdGZnNRY1o4d09FU__klaviyo_email_marketing_sms_form_embed_block_cRnbhJ h2 {
  line-height: 35px !important;
  text-transform: inherit !important; 
  
}
.product-info__block-item[data-block-type="variant-picker"] {
    margin: 0 !important;
    width: 100%;
}
.product-info__block-item[data-block-type="description"] {
    margin-bottom: 0;
}
.product-info__block-item:empty {
    display: none;
}
.variant-picker__option :checked+.block-swatch {
    background: #F5A886;
}
.variant-picker__option legend {
    display: none;
}
@media(max-width:800px){
  details.accordion__disclosure.group h2 {
    font-size: inherit !important;
  }
  .kl-private-reset-css-Xuajs1 h2 {
    line-height: 42px !important;
  }
}

/* ======================================================================
   MOBILE MENU — Shop categories are inlined into the main list, so the
   standalone links that follow (Create a Kit, Wholesale) need a break.
   ====================================================================== */
.header-sidebar__linklist-item--separated {
  border-block-start: 1px solid rgb(var(--text-color) / 0.15);
  margin-block-start: 0.75rem;
  padding-block-start: 0.75rem;
}


/* ======================================================================
   CART — kit line items
   The kit stays one grouped line at its discounted total, but lists the
   products it contains with thumbnails so the contents are obvious.
   ====================================================================== */
.line-item__components {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.line-item__component {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.line-item__component-media {
  flex: none;
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgb(var(--text-color) / 0.12);
}

.line-item__component-title {
  font-size: var(--text-xs);
  line-height: 1.3;
}

.line-item__component-variant:before,
.line-item__component-quantity:before {
  content: " · ";
}

/* ======================================================================
   CART DRAWER — mobile
   Tighter rows so a multi-item cart stays compact, and a footer that
   clears the iOS home indicator (the checkout button is already pinned:
   the drawer is a grid of header / scrolling body / footer).
   ====================================================================== */
@media screen and (max-width: 999px) {
  .cart-drawer__items {
    gap: 1rem;
  }

  .cart-drawer::part(footer) {
    padding-block-end: calc(var(--drawer-footer-padding-block) + env(safe-area-inset-bottom, 0px));
  }
}


/* ======================================================================
   BUILD A KIT — mobile pinned summary
   On mobile the Oxify kit sidebar renders after all 16 products, so while
   browsing you cannot see what is in your kit, how close you are to the
   discount, the total, or the CTA. Pin it to the bottom of the screen as a
   compact bar that expands to the full summary. Desktop is untouched.

   The open/closed flag lives on <html> (.ss-kit-expanded) so React
   re-rendering the sidebar cannot wipe it. !important is needed because the
   bundle app injects its own stylesheet into <head> at runtime, i.e. after
   this file, so equal-specificity rules would otherwise lose the cascade.
   ====================================================================== */
@media screen and (max-width: 999px) {
  .oxify-bb-kit-sidebar {
    position: fixed !important;
    inset-inline: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 300 !important;
    width: auto !important;
    max-width: none !important;
    max-height: 88vh !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    background: rgb(var(--background)) !important;
    box-shadow: 0 -4px 20px rgb(0 0 0 / 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease-in-out !important;
    pointer-events: none !important;
  }

  html.ss-kit-has-items .oxify-bb-kit-sidebar {
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .oxify-bb-kit-sidebar-inner {
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
  }

  /* Keep the bar slim: the theme h3 is 50px, far too tall for a pinned bar. */
  .oxify-bb-kit-header .h3 {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }

  /* The header doubles as the expand/collapse control. */
  .oxify-bb-kit-header {
    cursor: pointer;
    position: relative;
    padding-inline-end: 2rem;
    margin-block-end: 0.75rem !important;
  }

  .oxify-bb-kit-header:after {
    content: "";
    position: absolute;
    inset-inline-end: 0.25rem;
    top: 0.4em;
    width: 0.6rem;
    height: 0.6rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(-135deg);
    transition: transform 0.2s ease-in-out;
  }

  /* Collapsed: keep the bar to progress + total + CTA. */
  .oxify-bb-kit-subtitle,
  .oxify-bb-kit-items {
    display: none !important;
  }

  html.ss-kit-expanded .oxify-bb-kit-header:after {
    transform: rotate(45deg);
  }

  html.ss-kit-expanded .oxify-bb-kit-subtitle {
    display: block !important;
  }

  html.ss-kit-expanded .oxify-bb-kit-items {
    display: flex !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
  }

  /* Let the last products scroll clear of the pinned bar. */
  .oxify-bb-products-section {
    padding-block-end: 16rem !important;
  }
}


/* ======================================================================
   KLAVIYO FLOATING TEASER (the "S." badge)
   Klaviyo renders it with an inline z-index of 90000, so it floated over
   the cart drawer, the mobile menu and the pinned kit bar. An !important
   declaration in a stylesheet outranks a non-important inline style.

   z-index 100 puts it above page content but below the pinned kit bar
   (300) and both drawers (999). The theme sets .lock on <html> whenever
   the cart drawer or mobile menu is open, which is the hook for hiding
   the badge outright while either is open.
   ====================================================================== */
[class*="kl-teaser-"] {
  z-index: 100 !important;
}

html.lock [class*="kl-teaser-"] {
  display: none !important;
}


/* ======================================================================
   CART DRAWER — free shipping bar pinned to the top of the scroll area
   The drawer body is the scroll container, and the bar is its first
   child, so sticky top:0 keeps it in view while the items scroll under.
   ====================================================================== */
.cart-drawer .free-shipping-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgb(var(--background));
  background-image: var(--background-gradient);
}

/* ======================================================================
   CART PAGE — pinned checkout on mobile
   On desktop the total and checkout button sit in view beside the items.
   On mobile they fall below the fold, so pin the recap to the bottom of
   the viewport the way the cart drawer's footer already behaves.
   ====================================================================== */
@media screen and (max-width: 699px) {
  /* Fixed rather than sticky: the recap's parent (.cart-footer) sits at the very
     bottom of the page, and a sticky box can never be painted outside its parent,
     so it would only appear once you had already scrolled to it. */
  .cart-page .cart-recap {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 200;
    gap: 0.25rem;
    padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: rgb(var(--background));
    background-image: var(--background-gradient);
    border-block-start: 1px solid rgb(var(--text-color) / 0.15);
    box-shadow: 0 -4px 20px rgb(0 0 0 / 0.12);
  }

  .cart-page .cart-recap [type="submit"] {
    margin-block-start: 0.5rem;
  }

  /* Keep the last cart row clear of the pinned bar. */
  .cart-page {
    padding-block-end: 12rem;
  }
}


/* Notice shown in the kit builder when editing a kit already in the cart. */
.ss-kit-editing-note {
  margin-block-end: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: rgb(203 217 144 / 0.35);
  font-size: var(--text-xs);
  line-height: 1.35;
}








/* ============================================================
   PRODUCT INFO — new block styling (social proof, savings,
   countdown deal, payment icons, trust badges)
   Uses the site's existing fonts/colors (gopher, walsheim,
   forest #2d4e49, sage #8fb744/#cbd990, coral #f5a886)
   ============================================================ */

/* 1. Social proof — "38 bought this week" */
.social-proof-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgb(245 168 134 / 0.25);
  color: #c1592f;
  font-family: "gopher", sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

.social-proof-badge:before {
  content: "\1F525"; /* 🔥 */
  font-size: 11px;
}

/* 2. Savings badge — "You save X%" */
.savings-badge {
  display: inline-flex;
  align-items: center;
  background: #f5a886;
  color: #2d4e49;
  font-family: "gopher", sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

/* 3. Countdown deal card */
.deal-countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background: rgb(203 217 144 / 0.35);
  border: 2px solid #cbd990;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  width: 100%;
}

.deal-countdown__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.deal-countdown__label {
  font-family: "gopher", sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #2d4e49;
  margin: 0;
}

.deal-countdown__timer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.deal-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #2d4e49;
  color: #fff;
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  min-width: 2.75rem;
}

.deal-countdown__unit span {
  font-family: "gopher", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

.deal-countdown__unit small {
  font-size: 9px;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-top: 2px;
  font-family: "gopher", sans-serif;
}

.deal-countdown__sep {
  font-weight: 700;
  color: #2d4e49;
}

@media screen and (max-width: 480px) {
  .deal-countdown {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 4. Payment icons row */
.product-info__block-item[data-block-type="payment-icons"] .payment-methods {
  gap: 0.75rem;
}

.payment-methods__icon {
  height: 24px;
  width: auto;
}

/* 5. Trust badges row (3 columns: icon, title, subtitle) */
.trust-badges-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  width: 100%;
  text-align: center;
}

.trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.trust-badge img {
  width: 24px;
  height: 24px;
}

.trust-badge__title {
  font-family: "gopher", sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2d4e49;
  margin: 0;
}

.trust-badge__subtitle {
  font-family: "walsheim";
  font-size: 12px;
  color: rgb(45 78 73 / 0.65);
  margin: 0;
}

@media screen and (max-width: 480px) {
  .trust-badges-row {
    /* grid-template-columns: 1fr; */
    gap: 1rem;
  }
}








/* Styles the row created by qty-atc-restructure.liquid.
   Add to Cart fills remaining space beside the compact qty selector;
   anything left in the old buy-buttons block (Shop Pay, Buy it now)
   naturally sits below as its own full-width block. */
.ss-qty-atc-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: 0.75rem;
}

.ss-qty-atc-row > button[type="submit"] {
  flex: 1;
}







/* Quantity selector, Add to Cart, and Shop Pay/accelerated checkout are
   now rendered as direct siblings inside <buy-buttons> natively by
   buy-buttons.liquid (include_quantity_selector: true) — no JS needed.
   Flex-wrap puts qty + Add to Cart on the first row, and the payment
   button spans full width below. */
.qty-add-row buy-buttons {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.qty-add-row buy-buttons > .v-stack {
  flex: none;
}

.qty-add-row buy-buttons > button[type="submit"] {
  flex: 1;
  min-width: 140px;
}

.qty-add-row buy-buttons > .shopify-payment-button {
  flex: 1 1 100%;
}

.qty-add-row {
  display: block !important;
}






/* Description — collapsed to ~3 lines with a "Show more" / "Show less"
   toggle. Pure CSS (checkbox hack), no JS needed. */
.product-description-toggle {
  position: relative;
}

.product-description-toggle__content {
  max-height: 12.5em;
  overflow: hidden;
  position: relative;
  transition: max-height 0.3s ease;
}

.product-description-toggle__content:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5em;
  background: linear-gradient(to bottom, transparent, rgb(var(--background)));
  pointer-events: none;
}

.product-description-toggle__checkbox:checked ~ .product-description-toggle__content {
  max-height: 1000px;
}

.product-description-toggle__checkbox:checked ~ .product-description-toggle__content:after {
  display: none;
}

.product-description-toggle__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: #2d4e49;
}

.product-description-toggle__label:after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.product-description-toggle__checkbox:checked ~ .product-description-toggle__label:after {
  transform: rotate(-135deg);
}

.product-description-toggle__less {
  display: none;
}

.product-description-toggle__checkbox:checked ~ .product-description-toggle__label .product-description-toggle__more {
  display: none;
}

.product-description-toggle__checkbox:checked ~ .product-description-toggle__label .product-description-toggle__less {
  display: inline;
}



.product-info__block-item[data-block-type="trust-badges"],
.product-info__block-item[data-block-type="payment-icons"],
 .product-info__block-item[data-block-type="title"]{
  display: block !important;
}

.product-info__block-item[data-block-type="price"]{
  padding-right: 2em !important;
}

.product-info__block-item[data-block-type="variant-picker"]{
  /* padding-right: 2em !important; */
  margin-bottom: 30px !important;
}
.product-info__block-item[data-block-type="variant-picker"]:empty {
  margin-bottom: 0 !important;
}

@media screen and (min-width: 800px){
.product-info__block-item[data-block-type="variant-picker"]:empty ~ .product-info__block-item[data-block-type="price"] {
  margin-top: -2em !important;
}
}
.product-info__block-item[data-block-type="description"]{
  margin-bottom: 20px;
}

.product-info__block-item[data-block-type="payment-icons"]{
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.product-info__block-item[data-block-type="savings-badge"]{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.product-info__block-item[data-block-type="quantity-selector-buy-buttons"]{
  margin-top: 0 !important;
}

.payment-methods{
  justify-content: center;
}

.price-list--product .h4{
  font-size: 35px;
}

.price-list.price-list--product .h5{
  font-size: 16px;
}

.shopify-payment-button {
  border-radius: 17px !important;
}

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-border-radius: 17px !important;
}






.product-card__add-to-cart-wrapper {
  width: 100%;
  margin-top: 10px;
}

.product-card__add-to-cart {
  width: 100%;
}





/* Delivery frequency options — side by side instead of stacked list */
.group_list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0 !important;
}

.group_list li {
  flex: 1 1 45%;
  min-width: 140px;
  list-style: none;
}

/* Auto-renew text, once moved inside the box by the script below */
.toggle_card .shopify_subscriptions_app_policy {
  padding: 0.75rem 1rem !important;
  margin: 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 0.8em;
}


#shopify-buyer-consent{
  display: none !important;
}


a.line-item__component-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.oxify-bb-product-title{
  background: none !important;
}
@media screen and (max-width: 699px){
.shopify-section--related-products .product-list--carousel {
        --product-list-card-width: min(160px, 65%) !important;
      }

    .shopify-section--related-products  .product-title.h6{
      font-size: 18px !important;
      line-height: 23px !important
    }
}

/* ======================================================================
   WHOLESALE CASE DETAILS
   Units per case, per-unit price and preorder flag. Rendered by
   snippets/wholesale-case.liquid on wholesale product pages and cards;
   outputs nothing at all for retail products.
   ====================================================================== */
.wholesale-case {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin-block-start: 0.35rem;
  font-size: var(--text-sm);
  line-height: 1.4;
}

.wholesale-case__qty {
  font-weight: 600;
  color: rgb(var(--text-color));
}

.wholesale-case__unit {
  color: rgb(var(--text-color) / 0.65);
}

.wholesale-case__backorder {
  flex-basis: 100%;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--text-color) / 0.8);
}

.wholesale-case--card {
  gap: 0.15rem 0.5rem;
  font-size: var(--text-xs);
  margin-block-start: 0.25rem;
}

/* ======================================================================
   WHOLESALE FREE SHIPPING TIER BAR
   The retail bar fills toward a dollar threshold; the wholesale one fills
   in three steps, one per DIFFERENT product, because that is the rule --
   quantity of a single product never advances it.
   ====================================================================== */
.free-shipping-bar__progress--tiers {
  overflow: visible;
}

.free-shipping-bar__tick {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 3px;
  margin-inline-start: -1.5px;
  background: rgb(var(--background));
  border-radius: var(--rounded-full);
}

/* Shouted in capitals this read as a heading -- "1 OF 3 DIFFERENT PRODUCTS" -- sitting above a
   sentence that says the same thing. As a quiet caption it reads as the progress note it is. */
.free-shipping-bar__tier-count {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgb(var(--text-color) / 0.55);
}

.free-shipping-bar--tiers.is-complete .free-shipping-bar__tier-count {
  color: rgb(var(--success-text));
}

/* ======================================================================
   PRODUCT CARD ALIGNMENT (collection, search and any product-list grid)
   Titles wrap to one or two lines, which pushed the rating and button to
   different heights across a row. The info area now fills the card, and
   everything after the title/price block is pushed to the bottom, so the
   rating and button line up across every card in a row.
   ====================================================================== */
product-list .product-card {
  align-self: stretch; /* product-list sets align-items: start, so cards wouldn't fill the row */
  grid-template-rows: auto 1fr;
}

product-list .product-card__info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

product-list .product-card__info > :first-child {
  margin-block-end: auto;
}

/* Wholesale case line on the product page sat flush against the quantity /
   Add to cart row. */
.wholesale-case:not(.wholesale-case--card) {
  margin-block-end: 1.25rem;
}

/* ======================================================================
   WHOLESALE LANDING PAGE CTAs (Order Wholesale Direct panel)
   ====================================================================== */
/* The space above APPLY matches the space above the pink button underneath it (0.5rem, desktop and phone). */
.wholesale-cta {
  margin-block-start: 0.5rem;
}

/* Clear separation between "Apply" and the returning-customer block. */
.wholesale-cta__existing {
  margin-block-start: 1.4rem;
}

.wholesale-cta__note {
  margin-block-end: 0.6rem;
}

/* The site's pink button (same colour as "Notify me"). */
.button.wholesale-cta__pink {
  --button-background: 240 160 208;
}

.wholesale-cta__faire {
  margin-block-start: 2.25rem;
  font-size: var(--text-sm);
}

/* ======================================================================
   WHOLESALE IDENTIFIER STRIP (under the nav on wholesale product/collection pages)
   ====================================================================== */
.wholesale-identifier {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  padding: 0.6rem 1rem;
  background: #cbd990;
  color: #2d4e49;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

/* On a phone the three parts wrap into an uneven block with dots stranded at the ends, so each
   one takes its own line and the separators go. The free-shipping line is dropped as well: the
   announcement bar above already carries it, and two lines keep the strip slim. */
@media screen and (max-width: 767px) {
  .wholesale-identifier {
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    line-height: 1.35;
  }

  .wholesale-identifier > [aria-hidden="true"]{
    display: none;
  }
}

/* ======================================================================
   WHOLESALE PRODUCT PAGE
   ====================================================================== */
.wholesale-pricing {
  display: grid;
  gap: 0.2rem;
  margin-block-end: 1.25rem;
}

.wholesale-pricing p {
  margin: 0;
}

.wholesale-pricing__preorder,
.wholesale-line__preorder {
  justify-self: start;
  margin-block-start: 0.5rem !important;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #f0dae3;
  color: #2d4e49;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wholesale-qty-label {
  margin: 0 0 0.35rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2d4e49;
}

.wholesale-details {
  margin-block-start: 0.75rem;
}

/* ======================================================================
   WHOLESALE CART LINES
   ====================================================================== */
.wholesale-line__cases {
  margin: 0;
}

.wholesale-line__preorder {
  display: inline-block;
}

/* ======================================================================
   WHOLESALE PRODUCTS PAGE: CATEGORY BUTTONS
   ====================================================================== */
.wholesale-categories {
  padding-block: 2rem 0.5rem;
  background: #f4f3ee; /* same cream as the product grid below, not a white strip */
}

.wholesale-categories__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.wholesale-categories__button {
  padding: 0.6rem 1.1rem;
  border: 3px solid #2d4e49;
  border-radius: 17px;
  background: var(--cat, #f4f3ee);
  color: var(--cat-text, #2d4e49);
  font-family: "gopher", sans-serif; /* the site's button face */
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.wholesale-categories__button:hover {
  transform: translateY(-2px);
}

.wholesale-categories__button:focus-visible {
  outline: 3px solid #2d4e49;
  outline-offset: 3px;
}

.wholesale-categories__button.is-active {
  background: #2d4e49;
  color: #f4f3ee;
}

.wholesale-categories__empty {
  margin-block-start: 2rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .wholesale-categories__button { transition: none; }
  .wholesale-categories__button:hover { transform: none; }
}

/* ======================================================================
   WHOLESALE APPLICATION (registration page)
   Full-width brand green, matching the pink contact form on the Wholesale page.
   ====================================================================== */
.wholesale-application {
  background: var(--wholesale-application-background, #cbd990);
  color: #2d4e49;
  padding-block: clamp(3rem, 7vw, 6rem);
}

.wholesale-application__inner {
  max-width: 820px;
  margin-inline: auto;
  display: grid;
  gap: 2.5rem;
}

/* Everything in this column is left aligned, per the build document. */
.wholesale-application__intro,
.wholesale-application__before,
.wholesale-application__signin {
  text-align: left;
}

/* "Apply for a wholesale account" -> GT Alpina Bold. */
.wholesale-application__intro .h2 {
  font-family: "alphina", Georgia, serif !important;
  font-weight: 700;
}

/* "Before you apply" -> Gopher Bold, set as the document writes it rather than the theme's 50px caps. */
.wholesale-application__before .h3 {
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-size: 32px !important;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: none;
}

.wholesale-application__before ul {
  padding-inline-start: 1.25rem;
}

.wholesale-application__signin {
  font-size: var(--text-base);
}

.wholesale-application__signin a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* SureCust form: let it use the full column and our typography instead of the app defaults. */
.wholesale-application .onst-registration-form,
.wholesale-application .onst-registration-form-container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  font-family: inherit;
  color: #2d4e49;
}

/* SureCust adds its own form-name heading and a small sign-in line; the section supplies both. */
.wholesale-application .onst-registration-form-container > :is(h2.title, p.subtitle),
.wholesale-application .onst-backtologin {
  display: none !important;
}

.wholesale-application .onst-registration-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]), select, textarea) {
  width: 100%;
  padding: 0.85rem 0.5rem;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 3px solid #2d4e49 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #2d4e49 !important;
  font-family: "walsheim", sans-serif !important;
  font-size: 15px !important;
  letter-spacing: normal;
  text-transform: none;
}

/* An untouched dropdown reads as an empty field, the same as the inputs beside it, rather than
   looking filled in with whichever option happens to be first. */
.wholesale-application .onst-registration-form select.is-placeholder {
  color: rgb(45 78 73 / 0.7) !important;
}

/* Dropdown options come from the browser's own list, so they need the family set on them too. */
.wholesale-application .onst-registration-form select,
.wholesale-application .onst-registration-form select option {
  font-family: "walsheim", sans-serif !important;
  font-weight: 400 !important;
  text-transform: none;
}

.wholesale-application .onst-registration-form :is(input, select, textarea)::placeholder {
  color: rgb(45 78 73 / 0.7);
}

.wholesale-application .onst-registration-form :is(input, select, textarea):focus {
  outline: none;
  border-bottom-color: #f4f3ee !important;
}

.wholesale-application .onst-registration-form label {
  color: #2d4e49;
  font-family: "walsheim", sans-serif;
}

.wholesale-application .onst-registration-form :is(button, input[type="submit"]) {
  width: 100%;
  margin-block-start: 1rem;
  padding: 0.9rem 1.5rem;
  border: 3px solid #2d4e49 !important;
  border-radius: 17px !important;
  background: #2d4e49 !important;
  color: #f4f3ee !important;
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Phones: one swipeable row of category buttons instead of a tall stack that pushes the products down. */
@media screen and (max-width: 699px) {
  .wholesale-categories__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0.25rem 0.75rem;
    scrollbar-width: none;
  }

  .wholesale-categories__list::-webkit-scrollbar {
    display: none;
  }

  .wholesale-categories__button {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* ======================================================================
   ACCOUNT FORMS (login, sign up, reset password, activate, addresses)
   The global .input rule is cream (#f5f4ee) for the newsletter field on the
   dark-green footer. On these light pages that made typed text and field
   lines nearly invisible, so they use the brand dark green here.
   ====================================================================== */
:is(.shopify-section--main-customers-login,
    .shopify-section--main-customers-register,
    .shopify-section--main-customers-reset-password,
    .shopify-section--main-customers-activate-account,
    .shopify-section--main-customers-addresses) :is(.input, .textarea, .select) {
  color: #2d4e49;
  border-bottom-color: #2d4e49;
}

:is(.shopify-section--main-customers-login,
    .shopify-section--main-customers-register,
    .shopify-section--main-customers-reset-password,
    .shopify-section--main-customers-activate-account,
    .shopify-section--main-customers-addresses) :is(.input, .textarea, .select)::placeholder {
  color: rgb(45 78 73 / 0.55);
}

/* ======================================================================
   WHOLESALE ROUND 4 (client feedback 2026-09-22)
   ====================================================================== */

/* Wholesale page: same spacing after SHOP WHOLESALE as after APPLY; APPLY left-aligned on phones. */
.wholesale-cta__faire {
  margin-block-start: 1.9rem !important; /* matches the ~30px gap after APPLY */
}

@media screen and (max-width: 699px) {
  /* The text column centres its children on phones; stretch the button rows so they start where the text does. */
  .wholesale-cta,
  .wholesale-cta__existing {
    align-self: stretch !important;
    margin-inline: 0 !important;
  }

  .wholesale-cta,
  .wholesale-cta__existing .button-group {
    justify-content: flex-start !important;
  }
}

/* ======================================================================
   CART PAGE HEADING
   ======================================================================
   With items in it the cart page switches to the blush colour scheme, which left the PP Formula
   heading pink on pink. GT Alpina in the deep green reads cleanly on every scheme. */
.shopify-section--main-cart .section-header :is(h1, h2),
.shopify-section--main-cart h1 {
  font-family: "alphina", Georgia, serif !important;
  font-size: 45px !important;
  line-height: 1.1;
  text-transform: none;
  color: #2d4e49 !important;
}

@media screen and (max-width: 800px) {
  .shopify-section--main-cart .section-header :is(h1, h2),
  .shopify-section--main-cart h1 {
    font-size: 36px !important;
  }
}

/* Green wholesale bar: "SOUTHSIDE WHOLESALE" links back to the wholesale catalogue. */
.wholesale-identifier__home {
  color: inherit;
  text-decoration: none;
}

.wholesale-identifier__home:hover,
.wholesale-identifier__home:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Product page pricing: one bold unit-economics line, MSRP and SKU in the quieter style. */
.wholesale-pricing__case {
  font-weight: 700;
  color: #2d4e49;
}

/* On a phone all three parts do not fit the column and "per case" was being clipped, so it takes
   its own line and the separator in front of it goes. */
@media screen and (max-width: 767px) {
  .wholesale-pricing__percase {
    display: block;
  }

  .wholesale-pricing__sep {
    display: none;
  }
}

.wholesale-pricing__meta {
  font-size: var(--text-sm);
  color: rgb(45 78 73 / 0.75);
}

/* Tighter "Quantity (cases)" -> selector, and Add to cart -> reminder. */
.wholesale-qty-label {
  margin-block-end: -0.65rem !important;
}

/* Product cards: pricing styled like the product page, case picker beside Add to cart. */
.wholesale-card-pricing {
  display: grid;
  gap: 0.15rem;
  justify-items: center;
  text-align: center;
}

.wholesale-card-pricing p {
  margin: 0;
}

.wholesale-card-pricing__unit {
  font-weight: 700;
  color: #2d4e49;
}

.wholesale-card-pricing__meta {
  font-size: var(--text-sm);
  color: rgb(45 78 73 / 0.75);
}

.wholesale-card-pricing__preorder {
  margin-block-start: 0.35rem !important;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #f0dae3;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wholesale-card-buy {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}

.wholesale-card-buy .quantity-selector {
  flex: 0 0 auto;
}

.wholesale-card-buy .product-card__add-to-cart {
  flex: 1 1 auto;
  min-width: 0;
}

/* Cart: line total with the per-case price beside it; minimum-order status. */
.wholesale-line__price {
  margin: 0;
}

.wholesale-line__total {
  font-weight: 700;
}

.wholesale-line__each {
  color: rgb(45 78 73 / 0.75);
  font-size: var(--text-sm);
}

.wholesale-minimum {
  margin: 0;
  font-size: var(--text-sm);
  color: #2d4e49;
}

.wholesale-minimum--met {
  font-weight: 700;
}

/* Escaped rather than a literal tick, so the character survives any editor that rewrites the file. */
.wholesale-minimum--met::before {
  content: "\2713\00a0";
}

/* Application form: Gopher Bold section headings. */
.wholesale-application .wholesale-form-heading {
  flex: 0 0 100%;
  width: 100%;
  margin: 1.75rem 0 0.25rem;
  font-family: "gopher", sans-serif !important;
  font-weight: 100;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: #2d4e49;
}

.wholesale-application .onst-register-form-fields > .wholesale-form-heading:first-child {
  margin-block-start: 0;
}

.wholesale-application .wholesale-form-field--titled label {
  display: none !important; /* SureCust's own stylesheet forces its labels visible */
}

.wholesale-application .onst-registration-form :is(button, input[type="submit"]) {
  font-family: "gopher", sans-serif !important;
  font-weight: 700;
}

/* ======================================================================
   SUBSCRIPTION WIDGET (Seal Subscriptions)
   ======================================================================
   The store moved from Shopify Subscriptions to Seal, which draws completely
   different markup, so the old rules further up this file (.toggle_card,
   .tab_label, .shopify_subscriptions_app_*) no longer match anything.

   This block puts the same design back on Seal's markup: one card with a
   3px deep-green border and a 21px radius, the two purchase options as rows
   inside it, fern green on the selected row, moss on hover, and the brand
   typeface throughout. */

.sealsubs-target-element,
.sealsubs-container {
  width: 100% !important;
  font-family: "walsheim", sans-serif;
}

/* Breathing room between the price and the widget */
.sealsubs-target-element {
  margin-block-start: 0.9rem;
}

/* The original design had no caption above the card. */
#seal-purchase-options-label,
.sls-purchase-options-label {
  display: none !important;
  margin-block-end: 0.5rem;
  font-family: "gopher", sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #2d4e49 !important;
}

/* The card */
.sls-purchase-options-container {
  background: transparent !important;
  border: 3px solid #234f4a !important;
  border-radius: 21px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* The two options sit side by side as tabs, the way the old widget did */
.sls-purchase-options-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

.sls-option-container {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 1rem 1.25rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease-in-out;
}

/* Divider between the tabs */
.sls-option-container + .sls-option-container {
  border-inline-start: 3px solid #234f4a !important;
}

/* The frequency panel the script builds under both tabs */
.seal-subscribe-panel {
  flex: 1 1 100% !important;
  order: 2;
  padding: 0.85rem 1.25rem !important;
  border-top: 3px solid #234f4a !important;
  background: rgb(var(--background));
}

.seal-subscribe-panel:empty {
  display: none !important;
}

.seal-subscribe-panel[hidden] {
  display: none !important;
}

.sls-widget-branding {
  flex: 1 1 100% !important;
  order: 3;
}

.sls-option-container:not(.sls-active):hover {
  background: #8fb744 !important;
  cursor: pointer;
}

.sls-option-container:not(.sls-active):hover :is(label, .sls-selling-plan-group-name) {
  color: #fff !important;
}

.sls-option-container.sls-active {
  background: #cbd990 !important;
}

/* Name over price inside each tab, so neither wraps mid-phrase */
.sls-label-container .sls-selling-plan-group-first-line {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}

/* Option name */
.sls-selling-plan-group-name {
  font-family: "walsheim", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #2d4e49 !important;
  cursor: pointer;
}

/* The tabs carry no radio of their own -- the whole tab is the control, as before. */
.sls-option-container .seal-col-radio {
  display: none !important;
}

.sls-option-container .seal-row {
  width: 100% !important;
}

/* Radio: Seal draws its own span, so style that rather than the hidden input */
.sls-custom-radio {
  width: 18px !important;
  height: 18px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: 0 0 0 1.5px rgb(35 79 74 / 0.5) !important;
  border-radius: 100% !important;
}

.sls-option:checked + .sls-custom-radio,
.sls-active .sls-custom-radio {
  background: #2d4e49 !important;
  box-shadow: 0 0 0 1.5px #234f4a !important;
  border: 3px solid #cbd990 !important;
}

/* Delivery frequency, shown in the panel under the tabs */
.sls-selling-plan-group-options {
  margin: 0 !important;
}

.sls-selling-plan-group-options :is(label, select, input) {
  font-family: "walsheim", sans-serif !important;
  font-size: 14px !important;
  color: #2d4e49 !important;
}

.sls-selling-plan-group-options select {
  padding: 0.35rem 0.5rem !important;
  background: rgb(255 255 255 / 0.65) !important;
  border: 2px solid #234f4a !important;
  border-radius: 10px !important;
}

/* Prices inside the widget follow the theme's price styling */
.sls-price-container {
  font-family: "walsheim", sans-serif !important;
  color: #2d4e49 !important;
}

.sls-price-container s,
.sls-compare-at-price {
  opacity: 0.5 !important;
  text-decoration: line-through !important;
}

/* "Subscription details" link under the card */
.sls-more-info-container {
  margin-block-start: 0.75rem !important;
}

.sls-more-info-container :is(a, .sls-subscription-details-label) {
  font-family: "walsheim", sans-serif !important;
  font-size: 14px !important;
  color: rgb(45 78 73 / 0.75) !important;
}

/* Seal's credit line, hidden at the client's request. Seal offers this as a setting on their paid
   plans -- worth switching off there too, so it never reappears if this stylesheet is bypassed. */
.sls-widget-branding {
  display: none !important;
}

/* ---- panel contents: "Delivery frequency" and the list of frequencies ---- */
.seal-panel-heading {
  margin-block-end: 0.6rem;
  font-family: "walsheim", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #2d4e49;
}

.seal-freq-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.6rem;
}

.seal-freq-option {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-family: "walsheim", sans-serif;
  font-size: 15px;
  color: #2d4e49;
  text-align: start;
  cursor: pointer;
}

.seal-freq-radio {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  box-shadow: 0 0 0 1.5px rgb(35 79 74 / 0.5);
}

.seal-freq-option.is-selected .seal-freq-radio {
  background: #2d4e49;
  box-shadow: 0 0 0 1.5px #234f4a;
  border: 3px solid #cbd990;
}

.seal-freq-option.is-selected .seal-freq-text {
  font-weight: 600;
}

/* ---- the auto-renew line, inside the panel under the radios ---- */
.seal-panel-note {
  margin-block-start: 0.7rem;
  font-family: "walsheim", sans-serif;
  font-size: 13px;
  color: rgb(45 78 73 / 0.7);
}

/* ---- Seal's details link, the only thing left under the card ---- */
.seal-footnote {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-block-start: 0.5rem;
}

.seal-footnote:empty {
  display: none;
}

.seal-footnote .sls-more-info-container {
  margin: 0 !important;
}

.seal-footnote .sls-sub-icon {
  display: none !important;
}

/* Prices sit under the option name, compare-at struck through */
.sls-price-container {
  font-size: 14px !important;
}

.sls-price-container s,
.sls-price-container del,
.sls-compare-at-price {
  opacity: 0.55 !important;
  text-decoration: line-through !important;
}

/* One-time price shown struck through beside the subscription price */
.seal-compare-at {
  margin-inline-start: 0.45rem;
  opacity: 0.55;
  text-decoration: line-through;
}

/* ======================================================================
   "BUY IT NOW" FALLBACK BUTTON
   ======================================================================
   theme.css resets this button with `all: revert`, so whenever Shopify cannot
   show the Shop Pay wallet (no Shop Pay session, blocked script, some previews)
   the customer gets a raw browser button. This gives it the theme's outline
   button styling instead. */

.shopify-payment-button__button--unbranded {
  display: block !important;
  width: 100% !important;
  padding: 9px 16px !important;
  background: transparent !important;
  color: #2d4e49 !important;
  border: 3px solid #2d4e49 !important;
  border-radius: 17px !important;
  font-family: "gopher", sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background: #cbd990 !important;
}

.shopify-payment-button__more-options {
  font-family: "walsheim", sans-serif;
}

/* Space above the green divider matches the space below it (the accordion's own 20px padding). */
.product-info__block-item:has(.wholesale-related-group:not(:empty)) {
  margin-block-end: 16px !important;
}

/* Most products have no spray/refill pair, so the block renders empty. Collapsing it keeps the
   divider tight under Add to cart instead of leaving 40px of nothing. */
.product-info__block-item:has(.wholesale-related-group:empty) {
  margin-block: 0 !important;
}


.product-info__block-item:has(.wholesale-details) {
  margin-block-start: 0 !important;
}

.wholesale-details {
  margin-block-start: 0 !important;
}

/* Cross-links between sprays and their refill packets, directly under Add to cart.
   Sized to match the "$10.98 / unit - Case of 12 - $131.76 per case" line above. */
/* Empty on every product without a spray/refill pair, which is most of them. */
.wholesale-related-group:empty {
  display: none;
}

.wholesale-related-group:not(:empty) {
  margin-block-start: -1.6rem;
}

/* On a phone that pull-up puts the line hard against Add to cart. The button is full width there,
   so the line needs room under it rather than to be tucked up beside it. */
@media screen and (max-width: 767px) {
  .wholesale-related-group:not(:empty) {
    margin-block-start: 0;
    padding-block-start: 0rem;
  }
}

.wholesale-related {
  margin: 0.35rem 0 0;
  font-size: var(--text-base);
  line-height: 1.45;
  color: #2d4e49;
}

.wholesale-related a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Seal's yellow "SAVE 10%" pill: the discount is already spelled out in the option name and the
   struck-through price, so the badge is hidden. */
.sls-savings-badge {
  display: none !important;
}

/* ======================================================================
   MOBILE HEADER
   ====================================================================== */
/* The account icon pushed the header onto a second line on a phone. Sign-in lives at the bottom
   of the menu drawer instead, so the icon is only needed from tablet up. */
@media screen and (max-width: 767px) {
  .header__account-link {
    display: none;
  }
}