/* Blog post reading layout, shared by every post under /blog.
   Same layout as /blog/shopify-bfcm-apps and /blog/set-up-shopify-preorders-with-claude-chatgpt,
   which keep their own copy of these rules inline. */

/* Body text */
.blog-template_rtf p,.blog-template_rtf li{font-size:18px;line-height:1.7;letter-spacing:0;color:#2e1f3c}
.blog-template_rtf p{margin:0 0 20px}
.blog-template_rtf strong{font-weight:600;color:#150322}
.blog-template_rtf > :first-child{margin-top:0}

/* Headings */
.blog-template_rtf h2{font-size:30px;line-height:1.2;letter-spacing:-.02em;margin:56px 0 16px}
.blog-template_rtf h3{font-size:20px;line-height:1.35;margin:36px 0 8px}
.blog-template_rtf h4{font-size:18px;line-height:1.4;font-weight:600;margin:28px 0 8px}
.blog-template_rtf h2 + h3,.blog-template_rtf h2 + p + h3{margin-top:24px}
.blog-template_rtf h3 + h4{margin-top:16px}

/* Lists */
.blog-template_rtf ul,.blog-template_rtf ol{margin:0 0 24px;padding-left:22px}
.blog-template_rtf li{margin-bottom:10px;padding-left:4px}
.blog-template_rtf li::marker{color:#8700d3}
.blog-template_rtf li p{margin:0}

/* Images, captions, quotes (top/bottom margins only, so centred images stay centred) */
.blog-template_rtf figure{margin-top:40px !important;margin-bottom:48px !important}
.blog-template_rtf figcaption{font-size:14px;line-height:1.5;color:#6b5a7a;margin-top:12px;text-align:left}
.blog-template_rtf figure.w-richtext-align-center figcaption{text-align:center}
.blog-template_rtf blockquote{font-size:17px;line-height:1.65;padding:20px 24px;border-radius:0 12px 12px 0;margin:0 0 32px;color:#150322}
.blog-template_rtf blockquote p:last-child{margin-bottom:0}

/* Table of contents */
.blog-template_sticky-sidebar .toc_link{font-size:14px !important;line-height:1.45 !important;font-weight:400 !important;color:#4a3a58 !important;margin-bottom:10px !important}
.blog-template_sticky-sidebar .toc_link.w--current{color:#8700d3 !important;font-weight:500 !important}
.blog-template_sticky-sidebar .toc_link-wrapper.h3{display:none !important}
.blog-template_sticky-sidebar .toc_list{max-height:clamp(220px,calc(100vh - 400px),60vh) !important}

/* Sidebar install card */
.post-cta-card{margin:32px 0 0;padding:32px 0 0;border-top:1px solid #e5e7eb}
.post-cta-card_title{margin:0 0 4px;font-size:16px;line-height:1.35;font-weight:600;color:#150322}
.post-cta-card_text{margin:0 0 12px;font-size:14px;line-height:1.45;color:#2e1f3c}
.post-cta-card_button{display:inline-block;background:#150322;color:#fff !important;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;line-height:1.2;text-decoration:none}
.post-cta-card_button:hover{background:#8700d3}

/* Page frame: shorter header band, author box under the article */
.blog-template_bottom{flex-direction:column;align-items:flex-start;gap:24px;margin-top:56px}
.section.is-white > .padding-global.padding-bottom-xxlarge{padding-bottom:64px}
.section.is-white + .section.is-white > .padding-global.padding-section-large{padding-top:64px}
.blog-template_wrap{margin-top:16px}
.section_blog-template{min-height:0;padding-bottom:120px}
@media (min-width:480px){.section_blog-template{padding-bottom:176px}}
@media (min-width:768px){.section_blog-template{padding-bottom:216px}}

/* Desktop: 280px contents column, 80px gap, article, all within 1080px */
@media (min-width:992px){
  .blog-template_content,.blog-template_grid{max-width:1080px;margin-left:auto;margin-right:auto}
  .blog-template_grid{grid-template-columns:280px minmax(0,1fr) !important;column-gap:80px !important}
  .blog-template_rtf p,.blog-template_rtf li{font-size:19px}
}
@media (max-width:991px){.blog-template_sticky-sidebar .toc_list{max-height:40vh !important}}
@media (max-width:767px){
  .blog-template_rtf p,.blog-template_rtf li{font-size:17px}
  .blog-template_rtf h2{font-size:26px;margin-top:48px}
}

/* Comparison tables */
.blog-template_rtf table{display:block;overflow-x:auto;width:100%;border-collapse:collapse;margin:0 0 20px;font-size:16px;line-height:1.5}
.blog-template_rtf th,.blog-template_rtf td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;border-bottom:1px solid #e5e7eb;color:#2e1f3c}
.blog-template_rtf th{font-weight:600;color:#150322;border-bottom:2px solid #150322;white-space:nowrap}
.blog-template_rtf td:first-child{font-weight:600;color:#150322}