/* ------------------------------------------------------------------------- */
/* This is only used for the pages that are also pulling in the older        */
/* stylesheet, i.e. client.css. Once everything has been updated and we are  */
/* no longer using client.css, we won't need this file either. When you      */
/* delete client.css, delete this too.                                       */
/* ------------------------------------------------------------------------- */

body.small-header-padding {
  padding-top: 89px;
}

.max-w-md {
  max-width: 448px;
}

.max-w-xl {
  max-width: 576px;
}

.max-w-8xl {
  max-width: 1440px;
}

.max-h-8 {
  max-height: 32px;
}

.p-1 {
  padding: 4px;
}

.p-1\.5 {
  padding: 6px;
}

.p-2\.5 {
  padding: 10px;
}

.p-6 {
  padding: 24px;
}

.p-12 {
  padding: 48px;
}

.pl-2 {
  padding-left: 8px;
}

.pl-10 {
  padding-left: 40px;
}

.pr-1\.5 {
  padding-right: 6px;
}

.pr-4 {
  padding-right: 16px;
}

.pr-10 {
  padding-right: 40px;
}

.pb-2 {
  padding-bottom: 8px;
}

.pb-4 {
  padding-bottom: 16px;
}

.pb-11 {
  padding-bottom: 44px;
}

.pt-4 {
  padding-top: 16px;
}

.pt-5 {
  padding-top: 20px;
}

.pt-14 {
  padding-top: 56px;
}

.px-3 {
  padding-left: 12px;
  padding-right: 12px;
}

.px-4 {
  padding-left: 16px;
  padding-right: 16px;
}

.px-6 {
  padding-left: 24px;
  padding-right: 24px;
}

.py-1 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.py-2\.5 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-4 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.py-6 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.ml-2\.5 {
  margin-left: 10px;
}

.mr-1 {
  margin-right: 4px;
}

.mr-2 {
  margin-right: 8px;
}

.mr-3\.5 {
  margin-right: 14px;
}

.mr-5 {
  margin-right: 20px;
}

.mr-8 {
  margin-right: 32px;
}

.mt-1\.5 {
  margin-top: 6px;
}

.mt-4 {
  margin-top: 16px;
}

.mt-8 {
  margin-top: 32px;
}

.mt-10 {
  margin-top: 40px;
}

.mt-12 {
  margin-top: 48px;
}

.mb-1 {
  margin-bottom: 4px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mb-6 {
  margin-bottom: 24px;
}

.mb-7 {
  margin-bottom: 28px;
}

.mb-12 {
  margin-bottom: 48px;
}

.my-1 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.my-1\.5 {
  margin-top: 6px;
  margin-bottom: 6px;
}

.my-5 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.my-16 {
  margin-top: 64px;
  margin-bottom: 64px;
}

.-ml-4 {
  margin-left: -16px;
}

.-mt-4 {
  margin-top: -16px;
}

.text-xxs {
  font-size: 9px;
  line-height: 16px;
}

.text-xs {
  font-size: 12px;
  line-height: 16px;
}

.text-sm {
  font-size: 14px;
  line-height: 20px;
}

.text-base {
  font-size: 16px;
  line-height: 24px;
}

.text-lg,
.text-xl {
  line-height: 28px;
}

.text-lg {
  font-size: 18px;
}

.text-xl {
  font-size: 20px;
}

.text-2xl {
  font-size: 24px;
  line-height: 32px;
}

.text-3xl {
  font-size: 30px;
  line-height: 36px;
}

.text-4xl {
  font-size: 36px;
  line-height: 40px;
}

.leading-tight {
  line-height: 1.25;
}

@media (min-width: 1024px) {
  .lg\:text-4xl {
    font-size: 36px;
    line-height: 40px;
  }
  
  .lg\:text-5xl {
    font-size: 48px;
    line-height: 1;
  }
  
  .lg\:leading-tight {
    line-height: 1.25;
  }
}

.w-4 {
  width: 16px;
}

.w-8 {
  width: 32px;
}

.w-28 {
  width: 112px;
}

.w-32 {
  width: 128px;
}

.w-56 {
  width: 224px;
}

.w-full-28 {
  width: calc(100% - 112px);
}

.h-4 {
  height: 16px;
}

.h-20 {
  height: 80px;
}

.h-150 {
  height: 600px;
}

.-right-2 {
  right: -8px;
}

.-top-1 {
  top: -4px;
}

.tracking-wider {
  letter-spacing: .8px;
}

.dt-nav-link {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .8px;
  padding-bottom: 25px;
}

.dt-nav-plant-care-link,
.dt-nav-promo-link {
  padding-bottom: 27px;
}

.dt-nav-plant-care-link span,
.dt-nav-promo-link span {
  line-height: 1;
  font-size: 12px;
  letter-spacing: .8px;
  border-radius: 6px;
  padding: 6px;
}

.mobile-navigation,
.border-t,
.border-r,
.border-b,
.border-l,
.dt-subnav,
.dt-nav-link {
  border-style: solid;
}

.plant-care-videos-slider .swiper-slide h3 {
  font-family: Versailles,Palatino,Georgia,Times,serif;
}

.accordion-content p {
  margin-bottom: 16px;
}

.leading-none {
  line-height: 1;
}

.search {
  position: absolute;
  top: 89px;
  padding-top: 0;
  border-style: solid;
  height: 100vh;
}

/* Cart / Checkout related */

@media (max-width: 812px) {
  .checkout-layout .usps {
    margin-top: 89px;
  }
}

.checkout-layout__content {
  padding-top: 0;
}

.remove-button svg,
.checkout-steps__step svg {
  display: inline;
}





@media (min-width: 450px) {
  .sx\:text-4xl {
    font-size: 36px;
    line-height: 40px;
  }
}





@media (min-width: 640px) {
  .sm\:mt-0 {
    margin-top: 0;
  }

  .sm\:px-4 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .sm\:p-8 {
    padding: 32px;
  }

  .sm\:px-8 {
    padding-left: 32px;
    padding-right: 32px;
  }

  .sm\:pb-0 {
    padding-bottom: 0;
  }

  .sm\:pb-8 {
    padding-bottom: 32px;
  }

  .sm\:py-8 {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .sm\:mb-6 {
    margin-bottom: 24px;
  }

  .sm\:mb-8 {
    margin-bottom: 32px;
  }

  .sm\:border-t,
  .sm\:border-r,
  .sm\:border-b,
  .sm\:border-l {
    border-style: solid;
  }
}





@media (min-width: 768px) {
  .md\:p-10 {
    padding: 40px;
  }

  .md\:px-10 {
    padding-left: 40px;
    padding-right: 40px;
  }

  .md\:py-10 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .md\:mb-16 {
    margin-bottom: 64px;
  }

  .md\:text-5xl {
    font-size: 48px;
    line-height: 1;
  }

  .md\:w-32 {
    width: 128px;
  }

  .md\:-top-14 {
    top: -56px;
  }

  .md\:text-base {
    font-size: 16px;
    line-height: 24px;
  }

  .md\:border-t,
  .md\:border-r,
  .md\:border-b,
  .md\:border-l {
    border-style: solid;
  }
  
  .md\:max-w-8xl-half {
    max-width: 720px;
  }
}





@media (min-width: 1024px) {
  body.small-header-padding {
    padding-top: 127px;
  }

  .lg\:px-12 {
    padding-left: 48px;
    padding-right: 48px;
  }

  .lg\:pb-12 {
    padding-bottom: 48px;
  }

  .lg\:pt-6 {
    padding-top: 24px;
  }

  .lg\:pt-24 {
    padding-top: 96px;
  }
  
  .lg\:pl-12 {
      padding-left: 48px;
  }
  
  .lg\:pl-32 {
      padding-left: 128px;
  }

  .lg\:pr-8 {
    padding-right: 32px;
  }
  
  .lg\:pr-32 {
      padding-right: 128px;
  }

  .lg\:my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .lg\:w-40 {
    width: 160px;
  }

  .lg\:w-80 {
    width: 320px;
  }

  .lg\:right-24 {
    right: 96px;
  }

  .lg\:-top-24 {
    top: -96px;
  }

  .lg\:border-t,
  .lg\:border-r,
  .lg\:border-b,
  .lg\:border-l {
    border-style: solid;
  }

  .lg\:max-w-4xl {
    max-width: 896px;
  }

  .lg\:w-full-80 {
      width: calc(100% - 320px);
  }

  .search {
    top:  127px;
  }

  #main-header.small-header .desktop-navigation {
    padding-right: calc(64px + 60px);
  }

  #main-header.small-header .dt-nav-link {
    padding-top: 28px;
  }

  #main-header.small-header .menu-grid-buttons {
    top: 21px;
    right: 48px;
  }

  #main-header.small-header .search {
    top: 72px;
    height: calc(100vh - 72px);
  }
  
}





@media (min-width: 1280px) {
  .dt-nav-link {
    margin-left: 12px;
    margin-right: 12px;
  }

  .dt-nav-plant-care-link {
    margin-left: 16px;
    margin-right: 16px;
  }

  .dt-nav-plant-care-link span {
    padding-left: 10px;
    padding-right: 10px;
  }
}





.crowdfunding-banner {
  margin-top: 0;
}

.w-72 {
  width: 288px;
}

.-mx-6 {
  margin-left: 24px;
  margin-right: 24px;
}

@media (min-width: 640px) {
  .sm\:-mx-8 {
    margin-left: 32px;
    margin-right: 32px;
  }
}

@media (min-width: 768px) {
  .md\:mx-16 {
    margin-left: 64px;
    margin-right: 64px;
  }
}

@media (min-width: 1024px) {
  .lg\:mx-24 {
    margin-left: 96px;
    margin-right: 96px;
  }
}

.text-orange {
  color: var(--orange) !important;
}

.hover\:text-yellow:hover {
    color: var(--yellow) !important;
}

.main-layout__main {
  margin-top: 0 !important;
}