.blog-post-detail .article-tags .tag-link {
  display: inline-flex;
  white-space: nowrap;
  font-size: 0.6875rem;
  text-transform: uppercase;
  height: 31px;
  border-radius: 62px;
  padding: 0 14px;
  align-items: center;
  font-weight: 600;
  margin: 0 5px;
  border: 1px solid var(--color-border); }
  .blog-post-detail .article-tags .tag-link:hover, .blog-post-detail .article-tags .active.tag-link {
    color: #fff;
    background: var(--color-accent);
    border-color: var(--color-accent); }

.blog-post-detail .post-meta-wrapper {
  font-size: 0.875rem;
  opacity: 0.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 15px; }
  .blog-post-detail .post-meta-wrapper aside {
    display: inline-flex;
    margin: 0 15px 10px 0;
    position: relative; }
    .blog-post-detail .post-meta-wrapper aside:after {
      content: "";
      display: inline-block;
      width: 2px;
      height: 2px;
      border-radius: 1px;
      background: var(--color-body);
      opacity: 0.6;
      position: absolute;
      top: 50%;
      margin-top: -1px;
      right: -7px; }
    .blog-post-detail .post-meta-wrapper aside:last-child:after {
      content: none; }

.blog-post-detail .post-title {
  margin: 0 auto 40px; }
  @media only screen and (min-width: 768px) {
    .blog-post-detail .post-title {
      margin-bottom: 55px; } }
  .blog-post-detail .post-title .entry-title {
    margin-bottom: 30px; }

.blog-post-detail .featured-image {
  margin-left: -15px;
  margin-right: -15px;
  width: calc(100% + 30px);
  margin-bottom: 35px;
  text-align: center; }
  @media only screen and (min-width: 768px) {
    .blog-post-detail .featured-image {
      margin-bottom: 55px;
      margin-left: 0;
      margin-right: 0;
      width: 100%; 
      padding: 0 50px;
    }
  }

.blog-post-detail .post-excerpt-container {
  display: flex;
  flex-direction: column; }
  @media only screen and (min-width: 1068px) {
    .blog-post-detail .post-excerpt-container {
      flex-direction: row; } }
  .blog-post-detail .post-excerpt-container .post-excerpt {
    max-width: 570px;
    padding-right: 30px; }
    .blog-post-detail .post-excerpt-container .post-excerpt p {
      margin-bottom: 0; }
      @media only screen and (min-width: 1068px) {
        .blog-post-detail .post-excerpt-container .post-excerpt p {
          font-size: 1.25rem;
          line-height: 1.875rem; } }
  .blog-post-detail .post-excerpt-container .share-article {
    margin-top: 30px; }
    @media only screen and (min-width: 1068px) {
      .blog-post-detail .post-excerpt-container .share-article {
        margin-top: 0;
        margin-left: auto; } }

.blog-post-detail .post-content {
  margin-bottom: 30px; }
  .blog-post-detail .post-content p + h1,
  .blog-post-detail .post-content p + h2,
  .blog-post-detail .post-content p + h3,
  .blog-post-detail .post-content p + h4,
  .blog-post-detail .post-content p + h5,
  .blog-post-detail .post-content p + h6 {
    margin-top: 40px; }

.blog-post-detail .article-tags {
  margin-top: 30px; }
  .blog-post-detail .article-tags .tag-link {
    margin-left: 0; }

.blog-post-detail .share-article {
  text-align: left; }

.share-article {
  font-size: 0.8125rem;
  line-height: 1;
  margin-bottom: 25px; }
  .share-article svg {
    height: 16px;
    width: auto; }
    .share-article svg path {
      fill: var(--color-body); }
  .share-article label {
    display: block;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 14px; }
  .share-article a {
    display: inline-flex;
    align-items: center;
    margin-right: 14px;
    width: 24px;
    height: 24px;
    white-space: nowrap;
    color: var(--color-body); }


.article-content-wrapper h3 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
}


.terms-agreement {
    display: flex;
    flex-flow: row nowrap;
}

.terms-agreement #terms-agreement {
  width: auto;
}

.terms-agreement label {
  flex-grow: 10;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: #707477;
}

.terms-agreement label a {
 color: #707477; 
}

.signup-container h2,
h4#recommended {
  font-size: 18px;
  line-height: 36px;
  font-weight: 300;
  margin-bottom: 10px;
}



.template-article-eam-post .blog-posts .row .columns {
  display: none;
}

.template-article-eam-post .blog-posts .row .columns:nth-child(1), 
.template-article-eam-post .blog-posts .row .columns:nth-child(2),
.template-article-eam-post .blog-posts .row .columns:nth-child(3),
.template-article-eam-post .blog-posts .row .columns:nth-child(4){
  display: block;
}

.hidden-recommendations .recommended-article-eam-content {
    padding-bottom: 0;
    font-size: 15px;
    padding-left: 15px;
    position: relative;
}

.hidden-recommendations p.recommended-article-eam-title {
    margin-bottom: 10px;
}

.recommended-articles-eam.hidden-recommendations {
    border: 1px solid rgba(204,204,204,1);
    padding: 10px 0;
}

.hidden-recommendations .recommended-article-eam-content::before {
    content: '.';
    position: absolute;
    left: 0;
    top: -33px;
    font-weight: bold;
    font-size: 40px;
}

.recommended-articles-eam.hidden-recommendations .recommended-article-eam-list {
  padding-left: 20px;
  padding-right: 20px;
}

.recommended-articles-eam.hidden-recommendations #recommended {
  font-weight: 500;
  border-bottom: 1px solid rgba(204,204,204,1);
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.article-content-wrapper h1{
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: 0;
}

.article-content-wrapper h2{
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: 0;
}
.article-content-wrapper h3{
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0;
}
.article-content-wrapper h4{
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}
.article-content-wrapper h5{
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
}
.article-content-wrapper h6{
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
}
.author-bio{
  margin-top: 40px;
  border-top: 1px solid #e5e5e5;
  padding: 20px 0;
  display: flex;
  gap: 20px;
}
.author-bio .author-photo{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}
.author-info{
  flex:1;
}
.author-info .author-name{
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 5px;
  line-height: 1.2;
}
.author-info .author-description{
  font-size: 14px;
  line-height: 1.5;
}
@media screen and (max-width: 769px) {
  .article-content-wrapper h1{
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: 0;
  }
  
  .article-content-wrapper h2{
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .article-content-wrapper h3{
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .article-content-wrapper h4{
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .article-content-wrapper h5{
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .article-content-wrapper h6{
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0;
  }

}

@media screen and (max-width: 640px) {
  .author-bio{
    gap: 10px;
  }
}
@media screen and (max-width: 440px) {
  .author-bio{
    flex-direction: column;
    gap: 10px;
  }
}

/* ============================================================
   Shop The Post (sidebar + in-content variants)
   ============================================================ */
.shop-the-post {
  position: relative;
  margin-bottom: 24px;
  padding: 18px 16px 20px;
  background: #ECE7F0;
  border-radius: 12px;
  font-family: inherit;
  box-sizing: border-box;
}

.shop-the-post__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.shop-the-post__title {
  margin: 0;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 500;
  color: #1a2a4a;
  letter-spacing: -0.01em;
  font-family: inherit;
}

.shop-the-post__arrows {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.shop-the-post__arrow {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #1a2a4a;
  border-radius: 50%;
  color: #1a2a4a;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.shop-the-post__arrow:hover {
  background: #1a2a4a;
  color: #fff;
}
.shop-the-post__arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.shop-the-post__arrow svg {
  width: 12px;
  height: 12px;
}

.shop-the-post__swiper {
  overflow: hidden;
}

.shop-the-post__slide {
  height: auto;
  display: flex;
}

.shop-the-post__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 14px 14px 16px;
  box-sizing: border-box;
}

.shop-the-post__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.shop-the-post__name {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  color: #1a2a4a;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-the-post__name:hover {
  text-decoration: underline;
}

/* Override theme-wide link color/underline that targets
   .article-content-wrapper a !important (see eam-blog-post.css). */
.article-content-wrapper .shop-the-post__name,
.article-content-wrapper .shop-the-post__btn,
.article-content-wrapper .shop-the-post__media {
  color: #1a2a4a !important;
  text-decoration: none !important;
}
.article-content-wrapper .shop-the-post__name span,
.article-content-wrapper .shop-the-post__btn span {
  text-decoration: none !important;
}
.article-content-wrapper .shop-the-post__name:hover {
  text-decoration: underline !important;
}
.article-content-wrapper .shop-the-post__btn:hover {
  color: #fff !important;
}

.shop-the-post__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #1a2a4a;
}
.shop-the-post__rating .rating-stars {
  gap: 0;
}
.shop-the-post__rating .rating-stars__display {
  gap: 1px;
}
.shop-the-post__rating-num {
  font-size: 12px;
  color: #1a2a4a;
}

.shop-the-post__price {
  font-size: 16px;
  font-weight: 500;
  color: #1a2a4a;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}
.shop-the-post__price-compare {
  color: #888;
  font-weight: 400;
  font-size: 13px;
}

.shop-the-post__media {
  position: relative;
  display: block;
  width: 100%;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin-bottom: 14px;
}
.shop-the-post__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.shop-the-post__badge {
  position: absolute;
  top: 8px;
  right: 0;
  background: #b65129;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 6px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-radius: 2px 0 0 2px;
  line-height: 1;
}

.shop-the-post__desc {
  font-size: 12px;
  line-height: 1.45;
  color: #555;
  margin-bottom: 12px;
}
.shop-the-post__desc .metafield-rich_text_field {
  display: contents;
}
.shop-the-post__desc ul,
.shop-the-post__desc ol {
  margin: 0;
  padding-left: 16px;
}
.shop-the-post__desc li + li {
  margin-top: 2px;
}
.shop-the-post__desc p {
  margin: 0 0 4px;
}
.shop-the-post__desc p:last-child {
  margin-bottom: 0;
}

.shop-the-post__btn {
  display: block;
  margin-top: auto;
  width: 100%;
  padding: 12px 10px;
  background: #ECE7F0;
  color: #1a2a4a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.shop-the-post__btn:hover {
  background: #1a2a4a;
  color: #fff;
}

/* Sidebar variant (desktop only) – shown above "In this article" TOC */
.shop-the-post--sidebar {
  display: block;
  padding: 14px 12px 16px;
}
.shop-the-post--sidebar .shop-the-post__title {
  font-size: 22px;
}
.shop-the-post--sidebar .shop-the-post__card {
  padding: 12px;
}

/* In-content variant (mobile only) – shown after article content */
.shop-the-post--content {
  display: none;
  margin: 24px 0 16px;
}

@media screen and (max-width: 749px) {
  .shop-the-post--sidebar {
    display: none;
  }
  .shop-the-post--content {
    display: block;
  }
}

/* ============================================================
   Desktop sidebar sticky (Shop The Post card only)
   The product card stays pinned while scrolling the article body.
   The "In this article" TOC scrolls naturally beneath it so no
   inner scrollbar is needed.

   IMPORTANT: We do NOT set align-self: flex-start on the sidebar
   column. The parent .row is a flex container with the default
   align-items: stretch, which stretches .article-sidebar-content
   to the full row height (= article body length). A sticky child
   can only stick within the bounds of its parent, so stretching
   the parent is what allows the card to remain pinned all the way
   to the end of the article.
   ============================================================ */
@media screen and (min-width: 750px) {
  .shop-the-post--sidebar {
    position: sticky;
    /* The theme has both a sticky announcement bar and a sticky header.
       Their heights are written to CSS vars by JS (see app.js
       setHeaderHeight + announcement-bar.liquid). Stack both so the
       card pins below the full sticky stack with a 20px gap. */
    top: calc(var(--announcement-height, 0px) + var(--header-height, 80px) + 20px);
    z-index: 1;
  }

  /* Disable the TOC's own sticky so it flows naturally below the card. */
  .article-sidebar-content .in-this-article.desktop-only {
    position: static;
    top: auto;
  }
}

/* ============================================================
   Three-column desktop layout (≥1024px)
   Layout: [left meta sidebar 25%] [article body 50%] [shop the post 25%]

   Below 1024px the original two-column layout is preserved
   (`.article-left-sidebar` is hidden and the JS in main-article.liquid
   keeps the meta blocks inside `.article-sidebar-content`).
   ============================================================ */
.article-row > .article-left-sidebar {
  display: none;
}

@media screen and (min-width: 1024px) {
  .article-row > .article-left-sidebar {
    display: block;
  }

  /* Three-column desktop layout — true gutter via flex `gap`.
     Ratio: 22 / 54 / 24 of the *remaining* width after subtracting the
     two 48px gaps. Using `gap` instead of column padding means the inner
     content area of each column stays equal to the column's full width,
     so the sticky product card on the right can use 100% of its column
     and its content (title, BESTSELLER ribbon, etc.) is not clipped.

     The right column is intentionally a bit wider (24% vs left's 22%) to
     give the product card title room to breathe — its label tends to be
     longer than the left-side TOC items. */
  .blog-post-detail--wrapper .article-row {
    /* `.post-content` is itself a flex container with `gap: 50px` (legacy
       2-column setup). With only one flex child here (`.article-row`), the
       row would shrink-wrap to its content width — making the right side
       look unbalanced because `flex-basis` percentages on the columns then
       resolve against an undersized parent. Force the row to fill the
       available width so the rightmost column lands on `.post-content`'s
       right edge, and the visual margin around the card matches the left. */
    flex: 1 1 auto;
    width: 100%;
    column-gap: 48px;
  }

  .blog-post-detail--wrapper .article-row > .article-left-sidebar {
    flex: 0 0 calc((100% - 96px) * 0.22);
    max-width: calc((100% - 96px) * 0.22);
    width: calc((100% - 96px) * 0.22);
  }
  .blog-post-detail--wrapper .article-row > .article-sidebar-content {
    flex: 0 0 calc((100% - 96px) * 0.24);
    max-width: calc((100% - 96px) * 0.24);
    width: calc((100% - 96px) * 0.24);
  }
  .blog-post-detail--wrapper .article-row > .article-content-wrapper-con {
    flex: 0 0 calc((100% - 96px) * 0.54);
    max-width: calc((100% - 96px) * 0.54);
    width: calc((100% - 96px) * 0.54);
  }

  /* The social share container (.post-excerpt-container) is moved into the
     left column at this breakpoint by the section JS. Reset its constrained
     width so it can sit naturally at the top of the column, and clear the
     mobile/tablet sticky 100vh height that would otherwise create a huge
     vertical whitespace below the share icons. */
  .article-left-sidebar > .post-excerpt-container {
    max-width: 100%;
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
  }
  .article-left-sidebar > .post-excerpt-container .share-article {
    position: static;
    height: auto;
    top: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 0;
    gap: 8px;
  }

  /* Reclaim the 80px right padding that was reserved for the social share
     rail in the original 2-column layout — the rail now lives in the left
     sidebar, so the article body can use the full column width. */
  .article-row .article-content-wrapper {
    padding-right: 0;
  }

  /* Visual divider between the left "In this article" TOC and the article
     body. A thin 1px hairline on the right edge of the TOC; padding pushes
     the TOC text away from the line so it doesn't feel cramped. */
  .article-left-sidebar .in-this-article.desktop-only {
    border-right: 1px solid #e5e5e5;
    padding-right: 16px;
  }

  /* Give the main reading column more breathing room on large screens.
     The default `.post-content` max-width (1380px) is clamped further on
     wider viewports so the 3 columns don't end up cramped. */
  .post-content.page-content-width.rte {
    max-width: 1380px;
  }
}

@media screen and (min-width: 1440px) {
  .post-content.page-content-width.rte {
    max-width: 1500px;
  }
}

/* ============================================================
   Wide content overflow handling
   Tables (and other intrinsically-wide blocks) authored in the
   blog admin can exceed the narrower middle column. Allow them
   to scroll horizontally inside their own viewport instead of
   blowing out the layout.
   ============================================================ */
.article-content-wrapper table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}