/* =======================================================================
   Single Article (blog post) - editorial layer over stock Blocksy
   Following the gold/cream/espresso design system (DESIGN.md):
     accent:  #B86B0B       accent-soft: #C9A573
     ink:     #231508       ink-soft:    #6b5b4a
     cream:   #FFFCF2       line:        #e9ddc9

   No `font-family` is declared anywhere in this file - single posts inherit
   the parent Blocksy Customizer's role-based assignment (IBM Plex Sans Thai
   for body/headings), so no html[lang="th"] guard is required. Keep it that
   way; if a rule below ever needs its own font, pair it with the guard.

   Layout note: Blocksy renders single posts in the narrow container
   (--theme-narrow-container-max-width: 750px). Body text is constrained
   tighter than that (--sa-measure) so the reading line stays ~68 characters,
   while figures use the full column width - the slight "image wider than
   text" offset is intentional.
   ======================================================================= */

body.single-post {
    --sa-accent:     #B86B0B;
    --sa-accent-2:   #C9A573;
    --sa-ink:        #231508;
    --sa-ink-soft:   #6b5b4a;
    --sa-cream:      #FFFCF2;
    --sa-line:       #e9ddc9;

    --sa-measure:    68ch;
    --sa-radius:     12px;
    --sa-radius-lg:  14px;

    /* Standard card elevation from DESIGN.md */
    --sa-shadow:      0 1px 2px rgba(15,23,42,.04), 0 10px 24px rgba(15,23,42,.06);
    --sa-shadow-hover: 0 12px 28px rgba(35,21,8,.14);
}

/* ------------------------------------------------------------------ */
/*  1. HERO / HEADER                                                  */
/* ------------------------------------------------------------------ */
body.single-post .hero-section[data-type="type-1"] {
    padding-bottom: 4px;
}

/* Breadcrumbs sit above the meta row (element order set in the Customizer).
   Kept on one line: the trail's last item is the full article title, which
   is long enough here to wrap to three uppercase lines and swamp the H1. */
body.single-post .entry-header .ct-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    font-size: 12px;
    color: var(--sa-ink-soft);
    margin-bottom: 18px;
    white-space: nowrap;
    overflow: hidden;
}
body.single-post .entry-header .ct-breadcrumbs > span {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
body.single-post .entry-header .ct-breadcrumbs .last-item {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    --theme-text-transform: none;
    text-transform: none;
}
body.single-post .entry-header .ct-breadcrumbs .last-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
}
body.single-post .entry-header .ct-breadcrumbs a {
    color: var(--sa-ink-soft);
    text-decoration: none;
    transition: color .18s ease;
}
body.single-post .entry-header .ct-breadcrumbs a:hover {
    color: var(--sa-accent);
}
body.single-post .entry-header .ct-breadcrumbs .ct-separator {
    opacity: .5;
    margin: 0 6px;
}

/* Meta row: date + category, category promoted to a gold eyebrow pill */
body.single-post .entry-header .entry-meta {
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--sa-ink-soft);
}
body.single-post .entry-header .entry-meta .meta-date {
    color: var(--sa-ink-soft);
    letter-spacing: .01em;
}
body.single-post .entry-header .entry-meta .meta-categories a {
    display: inline-block;
    background: var(--sa-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 4px 11px;
    border-radius: 4px;
    text-decoration: none;
    transition: background .18s ease;
}
body.single-post .entry-header .entry-meta .meta-categories a:hover {
    background: var(--sa-ink);
}
/* Blocksy prints a "/" divider between meta items - redundant next to a pill */
body.single-post .entry-header .entry-meta[data-type*="slash"] li:not(:first-child)::before {
    display: none;
}

/* The Customizer sets a global `h1 { text-transform: uppercase }`, which is
   fine for short page titles but unreadable on 100+ character article
   headlines. Overridden for single posts only - other templates keep it. */
body.single-post .entry-header h1.page-title {
    color: var(--sa-ink);
    font-size: 34px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    --theme-text-transform: none;
    text-transform: none;
}

/* Byline (reading time), rendered after the title by
   amulet_article_render_byline(). It carries the gold rule that closes the
   header block - the same motif as the sidebar headings in
   blog-archive-redesign.css - so the header ends with one rule, not two. */
body.single-post .entry-header .sa-byline {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--sa-ink-soft);
    font-size: 13px;
}
body.single-post .entry-header .sa-byline svg {
    flex: 0 0 auto;
    color: var(--sa-accent);
}
body.single-post .entry-header .sa-byline::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    flex: 0 0 auto;
    background: var(--sa-accent);
    border-radius: 2px;
    margin-left: 4px;
}

/* ------------------------------------------------------------------ */
/*  2. FEATURED IMAGE                                                 */
/* ------------------------------------------------------------------ */
body.single-post .ct-featured-image {
    margin: 4px 0 40px;
}
body.single-post .ct-featured-image .ct-media-container {
    border-radius: var(--sa-radius-lg);
    overflow: hidden;
    box-shadow: var(--sa-shadow);
}
body.single-post .ct-featured-image .ct-media-container img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ------------------------------------------------------------------ */
/*  2b. READING PROGRESS BAR                                          */
/*  Element is created by assets/js/article-enhancements.js, which     */
/*  bails out entirely under prefers-reduced-motion.                   */
/* ------------------------------------------------------------------ */
body.single-post .sa-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 9999;
    background: transparent;
    pointer-events: none;
}
body.single-post .sa-progress__fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--sa-accent-2), var(--sa-accent));
}

/* ------------------------------------------------------------------ */
/*  2c. TABLE OF CONTENTS                                             */
/*  Prepended into .entry-content by amulet_article_add_toc() when an  */
/*  article has 3 or more H2s.                                        */
/* ------------------------------------------------------------------ */
body.single-post .entry-content .sa-toc {
    background: var(--sa-cream);
    border: 1px solid var(--sa-line);
    border-left: 3px solid var(--sa-accent);
    border-radius: 0 var(--sa-radius) var(--sa-radius) 0;
    padding: 18px 22px;
    margin: 0 auto 2.4em;
}
body.single-post .entry-content .sa-toc__title {
    margin: 0 0 10px;
    color: var(--sa-ink-soft);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
body.single-post .entry-content .sa-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sa-toc;
}
body.single-post .entry-content .sa-toc__list li {
    counter-increment: sa-toc;
    margin: 0;
    padding: 5px 0 5px 26px;
    position: relative;
    font-size: 15px;
    line-height: 1.5;
}
body.single-post .entry-content .sa-toc__list li::before {
    content: counter(sa-toc);
    position: absolute;
    left: 0;
    top: 5px;
    width: 18px;
    text-align: center;
    color: var(--sa-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.9;
}
/* .sa-toc is repeated in the chain purely for specificity: the body-link rule
   in section 3 is `.entry-content a:not(.wp-block-button__link)`, which ties
   with a plain `.sa-toc__list a` and wins on source order, underlining every
   TOC entry. */
body.single-post .entry-content .sa-toc .sa-toc__list a {
    color: var(--sa-ink);
    text-decoration: none;
    transition: color .18s ease;
}
body.single-post .entry-content .sa-toc .sa-toc__list a:hover {
    color: var(--sa-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Anchor targets sit under the sticky header when jumped to. */
body.single-post .entry-content h2[id] {
    scroll-margin-top: 90px;
}

/* ------------------------------------------------------------------ */
/*  3. ARTICLE BODY                                                   */
/* ------------------------------------------------------------------ */
body.single-post .entry-content {
    color: var(--sa-ink);
    font-size: 18px;
    line-height: 1.85;
}

/* Text blocks hold the reading measure; media spans the full column. */
body.single-post .entry-content > * {
    max-width: var(--sa-measure);
    margin-left: auto;
    margin-right: auto;
}
body.single-post .entry-content > figure,
body.single-post .entry-content > .wp-block-image,
body.single-post .entry-content > .wp-block-gallery,
body.single-post .entry-content > .wp-block-embed,
body.single-post .entry-content > hr {
    max-width: 100%;
}

body.single-post .entry-content > p {
    margin: 0 0 1.4em;
}

/* Section headings.
   Two overrides are deliberate here:
   1. `text-transform: none` - same global uppercase h1/h2 rule as the title.
   2. `font-size ... !important` - existing posts were written with the block
      editor's "Medium" preset on their H2s, and the theme enforces that with
      `.has-medium-font-size { font-size: 20px !important }`. At 20px an H2 is
      indistinguishable from bold body text, which is what made these articles
      read as one flat wall. Heading scale belongs to the design system, so it
      wins over the per-block preset. */
body.single-post .entry-content h2,
body.single-post .entry-content h2.has-medium-font-size {
    color: var(--sa-ink);
    font-size: 27px !important;
    font-weight: 700;
    line-height: 1.35;
    margin: 2.2em 0 .7em;
    padding-top: 14px;
    border-top: 2px solid var(--sa-accent-2);
    --theme-text-transform: none;
    text-transform: none;
}
body.single-post .entry-content h2:first-child {
    margin-top: 0;
}
body.single-post .entry-content h3,
body.single-post .entry-content h3.has-medium-font-size {
    color: var(--sa-ink);
    font-size: 21px !important;
    font-weight: 700;
    line-height: 1.4;
    margin: 1.8em 0 .6em;
    --theme-text-transform: none;
    text-transform: none;
}
body.single-post .entry-content h4 {
    color: var(--sa-ink);
    font-size: 18px;
    margin: 1.6em 0 .5em;
    --theme-text-transform: none;
    text-transform: none;
}
body.single-post .entry-content strong {
    color: var(--sa-ink);
    font-weight: 700;
}

/* Body links - underlined so they read as links without relying on hue alone */
body.single-post .entry-content a:not(.wp-block-button__link) {
    color: var(--sa-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .18s ease;
}
body.single-post .entry-content a:not(.wp-block-button__link):hover {
    color: var(--sa-ink);
}

body.single-post .entry-content ul,
body.single-post .entry-content ol {
    margin: 0 auto 1.4em;
    padding-left: 1.3em;
}
body.single-post .entry-content li {
    margin-bottom: .5em;
}
body.single-post .entry-content ul li::marker {
    color: var(--sa-accent);
}
body.single-post .entry-content ol li::marker {
    color: var(--sa-accent);
    font-weight: 700;
}

/* In-content media */
body.single-post .entry-content figure.wp-block-image {
    margin: 2.4em auto;
}
body.single-post .entry-content figure.wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--sa-radius);
    box-shadow: var(--sa-shadow);
}
body.single-post .entry-content figcaption {
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sa-ink-soft);
}

body.single-post .entry-content blockquote {
    margin: 2em auto;
    padding: 20px 24px;
    background: var(--sa-cream);
    border-left: 3px solid var(--sa-accent);
    border-radius: 0 var(--sa-radius) var(--sa-radius) 0;
    color: var(--sa-ink);
    font-size: 19px;
    line-height: 1.7;
}
body.single-post .entry-content blockquote p:last-child {
    margin-bottom: 0;
}
body.single-post .entry-content blockquote cite {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: var(--sa-ink-soft);
    font-style: normal;
}

body.single-post .entry-content hr {
    border: 0;
    border-top: 1px solid var(--sa-line);
    margin: 2.6em auto;
}

body.single-post .entry-content table {
    border-collapse: collapse;
    width: 100%;
}
body.single-post .entry-content table th,
body.single-post .entry-content table td {
    border: 1px solid var(--sa-line);
    padding: 10px 14px;
    font-size: 16px;
}
body.single-post .entry-content table th {
    background: var(--sa-cream);
    color: var(--sa-ink);
    text-align: left;
}

/* ------------------------------------------------------------------ */
/*  3b. END-OF-ARTICLE SHOP CTA                                       */
/*  Rendered by amulet_article_render_shop_cta() on                   */
/*  blocksy:single:content:bottom. Uses the dark section treatment    */
/*  from DESIGN.md (ink background, cream text, gold accents), the    */
/*  same one the About Us promise block uses.                         */
/* ------------------------------------------------------------------ */
body.single-post .sa-cta {
    margin: 48px 0 8px;
    padding: 36px 30px 32px;
    background: var(--sa-ink);
    border-radius: var(--sa-radius-lg);
    position: relative;
    overflow: hidden;
}
/* Subtle warmth so the block doesn't read as a flat black slab -
   same ornamental gradient idea as the shop hero. */
body.single-post .sa-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(184,107,11,.16) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 15% 0%,  rgba(201,165,115,.08) 0%, transparent 60%);
    pointer-events: none;
}
body.single-post .sa-cta > * {
    position: relative;
    z-index: 1;
}

body.single-post .sa-cta__head {
    text-align: center;
    margin-bottom: 26px;
}
body.single-post .sa-cta__eyebrow {
    display: inline-block;
    color: var(--sa-accent-2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 10px;
}
body.single-post .sa-cta__title {
    color: var(--sa-cream);
    font-size: 24px;
    line-height: 1.3;
    margin: 0 0 8px;
    --theme-text-transform: none;
    text-transform: none;
}
body.single-post .sa-cta__sub {
    color: rgba(255,252,242,.72);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 46ch;
}

body.single-post .sa-cta__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
body.single-post .sa-cta__card {
    display: flex;
    flex-direction: column;
    background: var(--sa-cream);
    border-radius: var(--sa-radius);
    overflow: hidden;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
body.single-post .sa-cta__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
body.single-post .sa-cta__media {
    display: block;
    aspect-ratio: 1 / 1;
    background: #fff;
    overflow: hidden;
}
body.single-post .sa-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
body.single-post .sa-cta__card:hover .sa-cta__media img {
    transform: scale(1.05);
}
/* Deliberately NOT line-clamped. Several catalogue names share a long common
   prefix ("Phraya Yommarat ... Coin Silver Medal with ...") and diverge only
   past ~50 characters, so any clamp that fits the card renders two different
   products identically. Cards are grid items and stretch to a common height
   anyway, with the price pinned to the bottom by margin-top:auto. */
body.single-post .sa-cta__name {
    color: var(--sa-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    padding: 12px 12px 0;
}
body.single-post .sa-cta__price {
    padding: 8px 12px 14px;
    margin-top: auto;
    color: var(--sa-accent);
    font-size: 14px;
    font-weight: 700;
}
body.single-post .sa-cta__price del {
    color: var(--sa-ink-soft);
    font-weight: 400;
    margin-right: 5px;
}
body.single-post .sa-cta__price ins {
    text-decoration: none;
}

body.single-post .sa-cta__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto;
    padding: 12px 26px;
    background: var(--sa-accent);
    color: #fff;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}
body.single-post .sa-cta__all:hover {
    background: var(--sa-accent-2);
    color: var(--sa-ink);
    transform: translateY(-2px);
}
body.single-post .sa-cta__all svg {
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------ */
/*  4. TAGS                                                           */
/* ------------------------------------------------------------------ */
body.single-post .entry-tags {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--sa-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
body.single-post .entry-tags .ct-module-title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sa-ink-soft);
}
body.single-post .entry-tags .entry-tags-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body.single-post .entry-tags .entry-tags-items a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--sa-cream);
    border: 1px solid var(--sa-line);
    border-radius: 999px;
    color: var(--sa-ink-soft);
    font-size: 13px;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
body.single-post .entry-tags .entry-tags-items a:hover {
    background: var(--sa-accent);
    border-color: var(--sa-accent);
    color: #fff;
}
body.single-post .entry-tags .entry-tags-items a span {
    color: var(--sa-accent-2);
}
body.single-post .entry-tags .entry-tags-items a:hover span {
    color: #fff;
}

/* ------------------------------------------------------------------ */
/*  5. POST NAVIGATION                                                */
/*  The newest / oldest post legitimately has an empty prev or next    */
/*  slot, so the grid must not reserve space for a missing card.       */
/* ------------------------------------------------------------------ */
body.single-post .post-navigation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--sa-line);
}
body.single-post .post-navigation > div:empty {
    display: none;
}
/* Blocksy draws a 1px vertical divider down the centre of the nav
   (.post-navigation:after, left:50%) for its borderless 2-up layout. With
   bordered cards it is redundant, and once the grid wraps to one column it
   floats between the two cards as a stray line. */
body.single-post .post-navigation::after {
    display: none;
}
body.single-post .post-navigation .nav-item-prev,
body.single-post .post-navigation .nav-item-next {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--sa-cream);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
/* The next card's DOM order is already mirrored ([item-content][figure]),
   so it only needs alignment - reversing the flex direction would undo the
   mirroring rather than create it. */
body.single-post .post-navigation .nav-item-next {
    text-align: right;
}
/* Blocksy spaces the thumbnail with margin-inline-*; the card uses `gap`. */
body.single-post .post-navigation figure {
    margin: 0;
}
body.single-post .post-navigation a:hover {
    transform: translateY(-4px);
    box-shadow: var(--sa-shadow-hover);
}
/* Blocksy caps the thumb with `max-width: var(--thumb-width)` (70px desktop,
   45px mobile), which would clamp the size set here. */
body.single-post .post-navigation .ct-media-container {
    flex: 0 0 64px;
    width: 64px;
    max-width: none;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    margin: 0;
}
body.single-post .post-navigation .ct-media-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.single-post .post-navigation .item-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sa-accent);
    margin-bottom: 4px;
}
body.single-post .post-navigation .item-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--sa-ink);
    font-size: 14px;
    line-height: 1.45;
}

/* ------------------------------------------------------------------ */
/*  6. RELATED ARTICLES                                               */
/* ------------------------------------------------------------------ */
body.single-post .ct-related-posts-container {
    background: var(--sa-cream);
    border-top: 1px solid var(--sa-line);
    margin-top: 56px;
    padding: 52px 0 60px;
}
body.single-post .ct-related-posts .ct-module-title {
    color: var(--sa-ink);
    font-size: 26px;
    margin-bottom: 32px;
    text-align: center;
}
body.single-post .ct-related-posts-items article > div {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
body.single-post .ct-related-posts-items article > div:hover {
    transform: translateY(-4px);
    box-shadow: var(--sa-shadow-hover);
}
body.single-post .ct-related-posts-items .ct-media-container {
    display: block;
    margin: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
body.single-post .ct-related-posts-items .ct-media-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
body.single-post .ct-related-posts-items article > div:hover .ct-media-container img {
    transform: scale(1.04);
}
body.single-post .ct-related-posts-items .entry-meta {
    margin: 16px 18px 8px;
    font-size: 12px;
    color: var(--sa-ink-soft);
    gap: 8px;
}
body.single-post .ct-related-posts-items .entry-meta .meta-categories a {
    color: var(--sa-accent);
    font-weight: 600;
    text-decoration: none;
}
body.single-post .ct-related-posts-items .related-entry-title {
    margin: 0 18px 18px;
    font-size: 16px;
    line-height: 1.45;
}
body.single-post .ct-related-posts-items .related-entry-title a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--sa-ink);
    text-decoration: none;
    transition: color .18s ease;
}
body.single-post .ct-related-posts-items .related-entry-title a:hover {
    color: var(--sa-accent);
}

/* ------------------------------------------------------------------ */
/*  7. COMMENTS                                                       */
/* ------------------------------------------------------------------ */
body.single-post .ct-comments-container {
    padding: 56px 0 8px;
}
body.single-post .ct-comments .comment-reply-title {
    color: var(--sa-ink);
    font-size: 22px;
    margin-bottom: 8px;
}
body.single-post .ct-comments .comment-notes {
    font-size: 13px;
    color: var(--sa-ink-soft);
    margin-bottom: 22px;
}
body.single-post .ct-comments .comment-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sa-ink);
}
body.single-post .ct-comments .comment-form input[type="text"],
body.single-post .ct-comments .comment-form input[type="email"],
body.single-post .ct-comments .comment-form input[type="url"],
body.single-post .ct-comments .comment-form textarea {
    background: var(--sa-cream);
    border: 1px solid var(--sa-line);
    border-radius: 8px;
    color: var(--sa-ink);
    transition: border-color .18s ease, box-shadow .18s ease;
}
body.single-post .ct-comments .comment-form input:focus,
body.single-post .ct-comments .comment-form textarea:focus {
    border-color: var(--sa-accent);
    box-shadow: 0 0 0 3px rgba(184,107,11,.12);
    outline: none;
}
body.single-post .ct-comments .comment-form .required {
    color: var(--sa-accent);
}
/* The Website field adds friction and attracts spam on a commerce site. */
body.single-post .ct-comments .comment-form-field-input-url {
    display: none;
}
body.single-post .ct-comments .comment-form-cookies-consent label {
    font-weight: 400;
    font-size: 13px;
    color: var(--sa-ink-soft);
}
body.single-post .ct-comments .form-submit button.submit {
    background: var(--sa-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 12px 28px;
    font-weight: 600;
    transition: background .18s ease;
}
body.single-post .ct-comments .form-submit button.submit:hover {
    background: var(--sa-ink);
    color: var(--sa-cream);
}

/* ------------------------------------------------------------------ */
/*  8. RESPONSIVE                                                     */
/* ------------------------------------------------------------------ */
@media (max-width: 999px) {
    body.single-post .entry-header h1.page-title {
        font-size: 32px;
        max-width: none;
    }
    body.single-post .ct-related-posts .ct-module-title {
        font-size: 23px;
    }
}

@media (max-width: 689px) {
    body.single-post .entry-header h1.page-title {
        font-size: 26px;
        line-height: 1.3;
    }
    body.single-post .entry-header h1.page-title::after {
        margin-top: 18px;
    }
    body.single-post .entry-content {
        font-size: 17px;
        line-height: 1.8;
    }
    body.single-post .entry-content h2 {
        font-size: 22px;
    }
    body.single-post .entry-content h3 {
        font-size: 19px;
    }
    body.single-post .entry-content blockquote {
        padding: 16px 18px;
        font-size: 17px;
    }
    body.single-post .ct-featured-image {
        margin-bottom: 30px;
    }
    body.single-post .ct-featured-image .ct-media-container img {
        aspect-ratio: 3 / 2;
    }
    /* Post navigation.
       Blocksy tags the nav titles `ct-hidden-sm` (display:none !important
       below 689.98px), which leaves both cards showing nothing but a
       thumbnail and the word PREVIOUS / NEXT over a tall empty box. The
       title is the only part that says where the link goes, so it is
       restored and the two cards are aligned the same way - a mirrored
       right-aligned card reads badly once the grid is a single column. */
    body.single-post .post-navigation {
        gap: 12px;
        margin-top: 32px;
        padding-top: 24px;
    }
    body.single-post .post-navigation .item-title.ct-hidden-sm {
        display: -webkit-box !important;
    }
    body.single-post .post-navigation .nav-item-next {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }
    /* Put the thumbnail first without flex-direction: row-reverse, which
       would also invert what justify-content: flex-start means. */
    body.single-post .post-navigation .nav-item-next .ct-media-container {
        order: -1;
    }
    body.single-post .post-navigation .ct-media-container {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
    }
    body.single-post .post-navigation .item-title {
        font-size: 13px;
    }
    body.single-post .ct-related-posts-container {
        margin-top: 40px;
        padding: 36px 0 42px;
    }

    /* Shop CTA: three product cards do not survive a 350px column, so the
       grid becomes a two-up with the third card spanning the second row. */
    body.single-post .sa-cta {
        margin-top: 36px;
        padding: 28px 18px 26px;
    }
    body.single-post .sa-cta__title {
        font-size: 20px;
    }
    body.single-post .sa-cta__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    body.single-post .sa-cta__grid > :nth-child(3):last-child {
        grid-column: 1 / -1;
    }
    body.single-post .sa-cta__grid > :nth-child(3):last-child .sa-cta__media {
        aspect-ratio: 16 / 9;
    }
    body.single-post .sa-cta__all {
        width: 100%;
    }
}

/* ------------------------------------------------------------------ */
/*  9. ACCESSIBILITY                                                  */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    body.single-post .post-navigation a:hover,
    body.single-post .ct-related-posts-items article > div:hover {
        transform: none;
    }
    body.single-post .ct-related-posts-items article > div:hover .ct-media-container img {
        transform: none;
    }
}