/** Shopify CDN: Minification failed

Line 164:28 Unexpected "{"
Line 164:37 Expected ":"
Line 164:43 Unexpected ","

**/
.article-products {
  padding: calc(var(--section-gap) * var(--fluid-1-5)) 0 0;
  border-top: 1px solid rgba(var(--text-color)/0.15);
}

.article-products__cards {
  transition: opacity 0.5s ease;
  opacity: 1;
}
.is-loading .article-products__cards {
  opacity: 0;
}

.comment footer {
  font-style: italic; /* Tailwind not working */
}

@media (min-width: 1024px) {
  .article__image {
    width: var(--viewport-width);
    max-width: 800px;
    margin-inline-start: calc(50% - 400px);
  }
}

/* =============================================
   Plant & Plot — Step 43: Blog Listing Page
   Article card grid, tag pills, read-more CTA
   ============================================= */

/* Blog page wrapper */
.cc-main-blog {
  background-color: var(--pp-warm-white);
}

/* Tag filter pills */
.cc-main-blog .pill {
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.cc-main-blog .pill:hover,
.cc-main-blog .pill.active {
  background-color: var(--pp-forest-green);
  color: #fff;
  border-color: var(--pp-forest-green);
}

/* Article card image: rounded corners + zoom on hover */
.cc-main-blog .card-corners {
  border-radius: 10px;
  overflow: hidden;
}
.cc-main-blog .media-hover-effect img {
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cc-main-blog article:hover .media-hover-effect img {
  transform: scale(1.04);
}

/* Article card title */
.cc-main-blog article h2 a,
.cc-main-blog article h3 a {
  color: var(--pp-charcoal);
  letter-spacing: -0.015em;
  text-decoration: none;
  transition: color 0.18s ease;
}
.cc-main-blog article h2 a:hover,
.cc-main-blog article h3 a:hover {
  color: var(--pp-forest-green);
}

/* Article meta (date, author) */
.cc-main-blog .text-theme-heading.uppercase {
  color: var(--pp-slate);
  font-size: 0.8rem;
  letter-spacing: 0.07em;
}

/* Article excerpt */
.cc-main-blog .rte.reading-width {
  color: var(--pp-slate);
  line-height: 1.7;
}

/* Read More button */
.cc-main-blog .btn.btn--secondary {
  border-color: rgba(61, 107, 79, 0.4);
  color: var(--pp-forest-green);
}
.cc-main-blog .btn.btn--secondary:hover {
  border-color: var(--pp-forest-green);
  background-color: rgba(61, 107, 79, 0.05);
}

/* =============================================
   Plant & Plot — Step 44: Article / Post Page
   Hero image, body prose, tags, social share, comments
   ============================================= */

/* Article page wrapper */
.cc-main-article {
  background-color: var(--pp-warm-white);
}

/* Article body prose */
.cc-main-article .article .rte {
  color: var(--pp-slate);
  line-height: 1.8;
  font-size: 1.0625rem;
}
.cc-main-article .article .rte h2,
.cc-main-article .article .rte h3,
.cc-main-article .article .rte h4 {
  color: var(--pp-charcoal);
  letter-spacing: -0.02em;
  margin-top: 2em;
}
.cc-main-article .article .rte blockquote {
  border-left: 3px solid var(--pp-forest-green);
  padding-left: 1.25em;
  color: var(--pp-slate);
  font-style: italic;
}
.cc-main-article .article .rte a {
  color: var(--pp-forest-green);
  text-underline-offset: 3px;
}

/* Article hero image */
.cc-main-article .article__image {
  border-radius: 10px;
  overflow: hidden;
}

/* Article tag pills */
.cc-main-article .pill {
  border-radius: 999px;
  font-size: 0.8125rem;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.cc-main-article .pill:hover {
  background-color: var(--pp-forest-green);
  color: #fff;
  border-color: var(--pp-forest-green);
}

/* Social share heading */
.cc-main-article .social-share__heading {
  color: var(--pp-charcoal);
  font-size: 0.875rem;
}

/* Comments panel */
.cc-main-article #comments-{{ article.id }},
.cc-main-article [id^="comments-"] {
  background-color: rgba(168, 197, 170, 0.08);
  border-radius: 12px;
}
.cc-main-article .comment {
  border-bottom: 1px solid rgba(61, 107, 79, 0.1);
  padding-bottom: 1em;
}
.cc-main-article .comment__author {
  color: var(--pp-forest-green);
  font-weight: 600;
}

/* Comment form inputs */
.cc-main-article .input {
  border-color: rgba(61, 107, 79, 0.25);
  border-radius: 6px;
}
.cc-main-article .input:focus {
  border-color: var(--pp-forest-green);
  box-shadow: 0 0 0 3px rgba(61, 107, 79, 0.12);
  outline: none;
}

/* Comment submit button */
.cc-main-article .btn.btn--primary {
  background-color: var(--pp-forest-green);
  border-color: var(--pp-forest-green);
  min-height: 48px;
}
.cc-main-article .btn.btn--primary:hover {
  background-color: #2e5239;
  border-color: #2e5239;
}

/* =============================================
   Plant & Plot — Step 45: Featured Blog Section
   Section heading, article cards, view-all CTA
   ============================================= */

/* Featured blog wrapper */
.cc-featured-blog {
  background-color: var(--pp-warm-white);
  padding-top: max(48px, 5vw);
  padding-bottom: max(56px, 5.5vw);
}

/* Section heading accent rule */
.cc-featured-blog .section__heading {
  letter-spacing: -0.02em;
  color: var(--pp-charcoal);
}
.cc-featured-blog .section__heading::after {
  content: '';
  display: block;
  width: 2.75rem;
  height: 2px;
  background-color: var(--pp-sage-light);
  margin: 0.45em auto 0;
}

/* Featured blog article images */
.cc-featured-blog .card-corners {
  border-radius: 10px;
  overflow: hidden;
}
.cc-featured-blog .media-hover-effect img {
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cc-featured-blog article:hover .media-hover-effect img {
  transform: scale(1.04);
}

/* Featured blog article titles */
.cc-featured-blog h3 a,
.cc-featured-blog .h5 a {
  color: var(--pp-charcoal);
  letter-spacing: -0.015em;
  text-decoration: none;
  transition: color 0.18s ease;
}
.cc-featured-blog h3 a:hover,
.cc-featured-blog .h5 a:hover {
  color: var(--pp-forest-green);
}

/* Featured blog excerpt text */
.cc-featured-blog .rte {
  color: var(--pp-slate);
  line-height: 1.7;
  font-size: 0.9375rem;
}

/* "View all" CTA */
.cc-featured-blog .btn.btn--secondary {
  border-color: rgba(61, 107, 79, 0.4);
  color: var(--pp-forest-green);
}
.cc-featured-blog .btn.btn--secondary:hover {
  border-color: var(--pp-forest-green);
  background-color: rgba(61, 107, 79, 0.05);
}