/*
 * Afrimart blog — B2B publishing styles.
 *
 * Industrial procurement content is read to make a purchasing decision, not
 * browsed. Three rules follow from that and explain most of what is below.
 *
 * One: the page has its own shell width. The store's `container-fluid-lg`
 * runs edge to edge, and a 44rem column of prose inside a 1900px container
 * leaves half the screen empty between the article and the sidebar. The blog
 * sets `--ab-shell` and centres itself, so the prose column, the gutter and the
 * sidebar add up to the width of the page instead of floating in it.
 *
 * Two: everything that carries data gets its own treatment. A specification
 * table, a twenty-item procurement checklist, an at-a-glance summary and an FAQ
 * are four different objects, and the renderer tags each one so they can be
 * styled as what they are rather than all rendering as grey bullet points.
 *
 * Three: it must survive a phone. Nothing overflows the viewport; wide tables
 * scroll inside their own frame.
 *
 * Everything is scoped under .afrimart-blog so the rest of the store's
 * stylesheet is untouched.
 */

.afrimart-blog {
    --ab-ink: #12161d;
    --ab-ink-soft: #495366;
    --ab-ink-faint: #6b7686;
    --ab-rule: #e4e8ee;
    --ab-rule-strong: #c9d1dc;
    --ab-surface: #ffffff;
    --ab-surface-soft: #f6f8fa;
    --ab-surface-sunk: #eef2f6;
    --ab-ink-deep: #0d1b2a;
    --ab-accent: #0a7d55;
    --ab-accent-dark: #06603f;
    --ab-accent-soft: #e8f5ef;
    --ab-gold: #f2b807;

    /* The page shell, the standing column, and the gap between them. The prose
       column is whatever is left, which lands at roughly 46rem — about 90
       characters at the article's type size. */
    --ab-shell: 82rem;
    --ab-rail: 23rem;
    --ab-gutter: 2.75rem;
    --ab-measure: 54rem;

    --ab-radius: .75rem;
    --ab-radius-sm: .5rem;
    --ab-shadow: 0 1px 2px rgba(13, 27, 42, .04), 0 8px 24px -12px rgba(13, 27, 42, .12);

    color: var(--ab-ink);
    background: var(--ab-surface);
    font-variant-numeric: tabular-nums lining-nums;
}

/* The shell. Applied inside the store's container so the blog controls its own
   measure without touching the global layout. */
.ab-shell {
    width: 100%;
    max-width: var(--ab-shell);
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 576px) {
    .ab-shell {
        padding-inline: 1.5rem;
    }
}

/* Index pages have no standing column, so their card grid gets the extra
   width the article deliberately gives up. */
.ab-shell-wide {
    max-width: 82rem;
}

/* --------------------------------------------------------- reading progress */

.ab-progress {
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    z-index: 1030;
    background: transparent;
    pointer-events: none;
}

.ab-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--ab-accent), var(--ab-gold));
    transition: width .1s linear;
}

/* -------------------------------------------------------------- breadcrumbs */

.afrimart-blog .breadcrumb {
    font-size: .84rem;
    padding: 1.1rem 0 0;
    margin: 0;
}

.afrimart-blog .breadcrumb a {
    color: var(--ab-ink-faint);
    text-decoration: none;
}

.afrimart-blog .breadcrumb a:hover,
.afrimart-blog .breadcrumb a:focus-visible {
    color: var(--ab-accent-dark);
    text-decoration: underline;
}

.afrimart-blog .breadcrumb-item.active {
    color: var(--ab-ink-faint);
}

/* ------------------------------------------------------------------ header */

.ab-article-header {
    padding: 1.25rem 0 0;
}

.ab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ab-accent-dark);
    background: var(--ab-accent-soft);
    border-radius: 999px;
    padding: .32rem .8rem;
    text-decoration: none;
    line-height: 1.4;
}

.ab-eyebrow:hover,
.ab-eyebrow:focus-visible {
    color: #fff;
    background: var(--ab-accent);
}

.afrimart-blog h1.ab-title {
    font-size: clamp(1.85rem, 1.15rem + 2.6vw, 3rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.022em;
    margin: 1rem 0 .85rem;
    max-width: 20ch;
    max-width: min(100%, 24ch);
    color: var(--ab-ink);
    text-wrap: balance;
}

.ab-standfirst {
    font-size: clamp(1.06rem, .98rem + .38vw, 1.28rem);
    line-height: 1.55;
    color: var(--ab-ink-soft);
    max-width: var(--ab-measure);
    margin: 0 0 1.35rem;
    text-wrap: pretty;
}

/* Byline and article facts, separated by rules rather than by guesswork. */
.ab-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.35rem;
    font-size: .85rem;
    color: var(--ab-ink-faint);
    list-style: none;
    padding: 1rem 0;
    margin: 0;
    border-top: 1px solid var(--ab-rule);
    border-bottom: 1px solid var(--ab-rule);
}

.ab-meta li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.ab-meta li.is-author {
    font-weight: 650;
    color: var(--ab-ink);
}

.ab-meta svg {
    width: 1.05em;
    height: 1.05em;
    flex: none;
    color: var(--ab-ink-faint);
}

/* ------------------------------------------------------------------- image */

/*
 * The featured image is author-supplied and its shape is not knowable here: it
 * may be a 4.7:1 designed banner or a square product photograph. Cropping to a
 * fixed ratio would cut a banner in half, so the height follows the image and
 * is only clamped when the image is unusually tall.
 */
.ab-featured {
    margin: 1.75rem 0 0;
}

.ab-featured img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 30rem;
    object-fit: cover;
    object-position: center;
    border-radius: var(--ab-radius);
    background: var(--ab-surface-soft);
    border: 1px solid var(--ab-rule);
    box-shadow: 0 18px 50px -35px rgba(13, 27, 42, .45);
}

.ab-featured figcaption {
    font-size: .8rem;
    color: var(--ab-ink-faint);
    padding-top: .55rem;
}

/* ------------------------------------------------------------------ layout */

.ab-layout {
    display: grid;
    gap: 2.5rem;
    padding: 2.5rem 0 3.5rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1100px) {
    .ab-layout {
        grid-template-columns: minmax(0, 1fr) var(--ab-rail);
        gap: var(--ab-gutter);
        align-items: start;
    }
}

.ab-aside {
    align-self: start;
    min-width: 0;
}

@media (min-width: 1100px) {
    .ab-aside {
        position: sticky;
        top: 1.5rem;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

/* ------------------------------------------------------- reader summary */

.ab-learning {
    display: grid;
    grid-template-columns: 12.5rem minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--ab-rule);
    border-top: 3px solid var(--ab-gold);
    border-radius: var(--ab-radius);
    background: var(--ab-surface-soft);
}

.ab-learning-title {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

.ab-learning-title > span {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    color: var(--ab-ink-deep);
    background: rgba(242, 184, 7, .22);
    border-radius: 50%;
}

.ab-learning-title svg {
    width: 1.2rem;
    height: 1.2rem;
}

.ab-learning h2 {
    margin: .28rem 0 0;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 760;
    color: var(--ab-ink-deep);
}

.ab-learning ul {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ab-learning li {
    position: relative;
    padding-left: 1.25rem;
    color: var(--ab-ink-soft);
    font-size: .95rem;
    line-height: 1.48;
}

.ab-learning li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: var(--ab-accent);
}

/* ------------------------------------------------------- mobile actions */

.ab-mobile-actions {
    display: flex;
    gap: .7rem;
    margin-top: 1rem;
}

.ab-mobile-actions .ab-button {
    min-height: 2.85rem;
}

.ab-mobile-actions svg,
.ab-back-to-top svg {
    width: 1.15rem;
    height: 1.15rem;
}

@media (min-width: 1100px) {
    .ab-mobile-actions {
        display: none;
    }
}

/* ---------------------------------------------------------- enquiry form */

.ab-panel.ab-enquiry {
    overflow: hidden;
    padding: 0;
    border-top: 3px solid var(--ab-gold);
    box-shadow: var(--ab-shadow);
}

.ab-enquiry-heading {
    display: flex;
    gap: .8rem;
    padding: 1.15rem 1.2rem 1rem;
    color: #fff;
    background: var(--ab-ink-deep);
}

.ab-enquiry-icon {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    flex: none;
    color: var(--ab-gold);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
}

.ab-enquiry-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.ab-enquiry-heading h2 {
    margin: 0 0 .25rem;
    color: #fff;
    font-size: 1.08rem;
    line-height: 1.25;
    font-weight: 750;
}

.ab-enquiry-heading p {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: .82rem;
    line-height: 1.45;
}

.ab-enquiry-form {
    padding: 1.15rem 1.2rem 1.2rem;
}

.ab-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.ab-field {
    display: grid;
    gap: .35rem;
    margin: 0;
    min-width: 0;
}

.ab-field-wide {
    grid-column: 1 / -1;
}

.ab-field > span,
.ab-choice-group legend {
    color: var(--ab-ink-soft);
    font-size: .76rem;
    line-height: 1.35;
    font-weight: 680;
}

.ab-field b,
.ab-choice-group b {
    color: #b42318;
}

.ab-field input,
.ab-field textarea {
    width: 100%;
    min-height: 2.65rem;
    padding: .65rem .72rem;
    color: var(--ab-ink);
    background: #fff;
    border: 1px solid var(--ab-rule-strong);
    border-radius: .42rem;
    font: inherit;
    font-size: .86rem;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ab-field textarea {
    min-height: 6.5rem;
    resize: vertical;
}

.ab-field input:focus,
.ab-field textarea:focus {
    outline: none;
    border-color: var(--ab-accent);
    box-shadow: 0 0 0 3px rgba(10, 125, 85, .12);
}

.ab-field small,
.ab-field-error {
    color: #b42318;
    font-size: .73rem;
}

.ab-choice-group {
    min-width: 0;
    margin: 1rem 0 0;
    padding: 0;
    border: 0;
}

.ab-choice-group legend {
    margin-bottom: .45rem;
}

.ab-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem 1rem;
}

.ab-choice-row label {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    margin: 0;
    color: var(--ab-ink-soft);
    font-size: .8rem;
    line-height: 1.35;
    cursor: pointer;
}

.ab-choice-row input {
    accent-color: var(--ab-accent);
}

.ab-conditional {
    margin-top: .85rem;
}

.ab-conditional[hidden] {
    display: none;
}

.ab-enquiry-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    min-height: 2.9rem;
    margin-top: 1.1rem;
    padding: .7rem 1rem;
    color: #fff;
    background: var(--ab-accent);
    border: 0;
    border-radius: .48rem;
    font: inherit;
    font-size: .9rem;
    font-weight: 720;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.ab-enquiry-submit:hover,
.ab-enquiry-submit:focus-visible {
    background: var(--ab-accent-dark);
}

.ab-enquiry-submit:focus-visible {
    outline: 2px solid var(--ab-gold);
    outline-offset: 2px;
}

.ab-enquiry-submit:disabled {
    opacity: .7;
    cursor: wait;
}

.ab-enquiry-submit svg {
    width: 1.1rem;
    height: 1.1rem;
}

.ab-form-privacy {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .35rem;
    margin: .7rem 0 0;
    color: var(--ab-ink-faint);
    font-size: .7rem;
    line-height: 1.4;
    text-align: center;
}

.ab-form-privacy svg {
    width: .9rem;
    height: .9rem;
    flex: none;
}

.ab-form-alert {
    margin: .9rem 1.2rem 0;
    padding: .7rem .8rem;
    border-radius: .42rem;
    font-size: .8rem;
    line-height: 1.4;
}

.ab-form-alert.is-success {
    color: var(--ab-accent-dark);
    background: var(--ab-accent-soft);
}

.ab-form-alert.is-error {
    color: #8a271a;
    background: #fff1ef;
}

.ab-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

/* ---------------------------------------------------- dynamic sidebar cards */

.ab-details dl {
    margin: 0;
}

.ab-details dl > div {
    display: grid;
    grid-template-columns: 6.4rem minmax(0, 1fr);
    gap: .7rem;
    padding: .48rem 0;
    border-bottom: 1px solid var(--ab-rule);
    font-size: .82rem;
    line-height: 1.4;
}

.ab-details dl > div:last-child {
    border-bottom: 0;
}

.ab-details dt {
    color: var(--ab-ink-faint);
    font-weight: 550;
}

.ab-details dd {
    margin: 0;
    color: var(--ab-ink);
    font-weight: 650;
}

.ab-details a,
.ab-related-searches a {
    color: var(--ab-accent-dark);
    text-decoration: none;
}

.ab-reading-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-top: .85rem;
}

.ab-reading-tools button {
    padding: .52rem .4rem;
    color: var(--ab-ink-soft);
    background: var(--ab-surface-soft);
    border: 1px solid var(--ab-rule);
    border-radius: .4rem;
    font: inherit;
    font-size: .76rem;
    font-weight: 630;
    cursor: pointer;
}

.ab-reading-tools button:hover,
.ab-reading-tools button:focus-visible {
    color: var(--ab-accent-dark);
    border-color: var(--ab-accent);
}

.ab-related-searches {
    display: grid;
    gap: .1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ab-related-searches a {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .48rem 0;
    color: var(--ab-ink-soft);
    font-size: .82rem;
    line-height: 1.4;
}

.ab-related-searches a:hover,
.ab-related-searches a:focus-visible {
    color: var(--ab-accent-dark);
    text-decoration: underline;
    text-underline-offset: .14em;
}

.ab-related-searches svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    margin-top: .08rem;
    color: var(--ab-ink-faint);
}

.ab-back-to-top {
    position: fixed;
    right: clamp(1rem, 2vw, 2rem);
    bottom: clamp(1rem, 2vw, 2rem);
    z-index: 30;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    color: #fff;
    background: var(--ab-ink-deep);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(13, 27, 42, .22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(.6rem);
    cursor: pointer;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.ab-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* A large monitor should gain both measure and type size, not simply more
   empty white space around the same laptop-sized article. */
@media (min-width: 1500px) {
    .afrimart-blog {
        --ab-shell: 94rem;
        --ab-rail: 25rem;
        --ab-gutter: 3.5rem;
        --ab-measure: 61rem;
    }

    .afrimart-blog .breadcrumb {
        font-size: .95rem;
    }

    .afrimart-blog h1.ab-title {
        font-size: clamp(3.15rem, 2.3rem + 1.35vw, 4.35rem);
    }

    .ab-standfirst {
        font-size: 1.42rem;
        max-width: 58rem;
    }

    .ab-meta {
        font-size: .97rem;
    }

    .ab-content {
        font-size: 1.2rem;
        line-height: 1.76;
    }

    .ab-content > p:first-of-type {
        font-size: 1.35rem;
    }

    .ab-content h2 {
        font-size: clamp(1.85rem, 1.55rem + .45vw, 2.2rem);
    }

    .ab-content h3 {
        font-size: 1.55rem;
    }

    .ab-panel > h2,
    .ab-panel > h3 {
        font-size: .84rem;
    }

    .ab-toc,
    .ab-field input,
    .ab-field textarea {
        font-size: .95rem;
    }
}

@media (max-width: 1099.98px) {
    .ab-aside {
        border-top: 1px solid var(--ab-rule);
        padding-top: 2rem;
    }

    .ab-panel.ab-enquiry {
        max-width: 46rem;
    }
}

@media (max-width: 767.98px) {
    .ab-layout {
        padding-top: 1.8rem;
    }

    .ab-learning {
        grid-template-columns: minmax(0, 1fr);
        gap: .85rem;
        padding: 1.1rem;
    }

    .ab-mobile-actions .ab-button-primary {
        flex: 1;
    }
}

@media (max-width: 575.98px) {
    .afrimart-blog h1.ab-title {
        font-size: clamp(1.95rem, 1.5rem + 3.4vw, 2.45rem);
    }

    .ab-standfirst {
        font-size: 1.05rem;
    }

    .ab-meta {
        gap: .55rem 1rem;
        font-size: .8rem;
    }

    .ab-mobile-actions {
        position: sticky;
        top: .4rem;
        z-index: 20;
        padding: .45rem;
        margin-inline: -.45rem;
        background: rgba(255, 255, 255, .94);
        border-radius: .55rem;
        box-shadow: 0 7px 18px -16px rgba(13, 27, 42, .7);
        backdrop-filter: blur(10px);
    }

    .ab-mobile-actions .ab-button {
        padding-inline: .85rem;
        font-size: .88rem;
    }

    /* Keep the primary action comfortably tap-sized on narrow phones. Print
       remains available in Article details after the article. */
    .ab-mobile-actions .ab-button-quiet {
        display: none;
    }

    .ab-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ab-field-wide {
        grid-column: auto;
    }

    .ab-enquiry-form,
    .ab-enquiry-heading {
        padding-inline: 1rem;
    }
}

.ab-panel {
    border: 1px solid var(--ab-rule);
    border-radius: var(--ab-radius);
    padding: 1.15rem 1.2rem;
    margin-bottom: 1.15rem;
    background: var(--ab-surface);
}

.ab-panel > h2,
.ab-panel > h3 {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ab-ink-faint);
    margin: 0 0 .85rem;
}

/* --------------------------------------------------------- article content */

.ab-content {
    max-width: var(--ab-measure);
    font-size: 1.075rem;
    line-height: 1.7;
    color: var(--ab-ink);
    overflow-wrap: break-word;
}

.ab-content > *:first-child {
    margin-top: 0;
}

.ab-content p {
    margin: 0 0 1.15em;
    text-wrap: pretty;
}

/* The opening paragraph is the direct answer the article is written around, so
   it reads as a lead. The step down to body copy is deliberately small — the
   old 1.15rem lead against 1.0625rem body read as two unrelated typefaces. */
.ab-content > p:first-of-type {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--ab-ink);
    font-weight: 450;
    margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------------ sections */

/* Each H2 and the content beneath it is wrapped by the renderer, which is what
   gives the article visible joints instead of one undifferentiated column. */
.ab-section {
    margin: 2.75rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--ab-rule);
}

.ab-section:first-child {
    margin-top: 2rem;
}

.ab-content h2,
.ab-content h3,
.ab-content h4 {
    color: var(--ab-ink);
    font-weight: 730;
    letter-spacing: -0.014em;
    scroll-margin-top: 5rem;
    text-wrap: balance;
}

.ab-content h2 {
    font-size: clamp(1.4rem, 1.2rem + .62vw, 1.75rem);
    line-height: 1.22;
    margin: 0 0 .75em;
}

/* Inside a wrapped section the rule belongs to the section, not the heading. */
.ab-section > h2 {
    border-top: 0;
    padding-top: 0;
}

.ab-content h3 {
    font-size: clamp(1.12rem, 1.05rem + .34vw, 1.3rem);
    line-height: 1.3;
    margin: 1.9em 0 .5em;
}

.ab-content h4 {
    font-size: 1.04rem;
    margin: 1.6em 0 .45em;
}

/* A stray H1 in the body would compete with the article title. */
.ab-content h1 {
    font-size: clamp(1.4rem, 1.2rem + .62vw, 1.75rem);
    margin: 2.2em 0 .6em;
}

.ab-content ul,
.ab-content ol {
    margin: 0 0 1.3em;
    padding-left: 1.35em;
}

.ab-content li {
    margin-bottom: .5em;
}

.ab-content li::marker {
    color: var(--ab-accent);
    font-weight: 600;
}

/* Numbered process steps carry more weight than a plain list: they are how the
   article explains how the equipment actually works. */
.ab-content ol {
    counter-reset: ab-step;
    list-style: none;
    padding-left: 0;
}

.ab-content ol > li {
    counter-increment: ab-step;
    position: relative;
    padding-left: 3rem;
    margin-bottom: 1em;
    min-height: 2rem;
}

.ab-content ol > li::before {
    content: counter(ab-step);
    position: absolute;
    left: 0;
    top: -.1em;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ab-accent-soft);
    color: var(--ab-accent-dark);
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ab-content ol ol > li::before {
    background: var(--ab-surface-soft);
    color: var(--ab-ink-soft);
}

/* A bold lead-in opens most bullets in this format; it should read as a label. */
.ab-content li > strong:first-child {
    color: var(--ab-ink);
    font-weight: 680;
}

.ab-content blockquote {
    margin: 1.7em 0;
    padding: .1em 0 .1em 1.25rem;
    border-left: 3px solid var(--ab-accent);
    color: var(--ab-ink-soft);
    font-style: normal;
}

.ab-content a {
    color: var(--ab-accent-dark);
    text-decoration: underline;
    text-underline-offset: .16em;
    text-decoration-thickness: .07em;
    text-decoration-color: rgba(10, 125, 85, .4);
}

.ab-content a:hover,
.ab-content a:focus-visible {
    color: var(--ab-accent);
    text-decoration-color: currentColor;
}

.ab-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ab-radius-sm);
    margin: 1.6em 0;
}

.ab-content code {
    background: var(--ab-surface-soft);
    padding: .1em .35em;
    border-radius: .25rem;
    font-size: .92em;
}

.ab-content hr {
    border: 0;
    border-top: 1px solid var(--ab-rule);
    margin: 2.4em 0;
}

/* ------------------------------------------------------------- at a glance */

/*
 * The at-a-glance facts are label/value pairs, so the renderer emits a
 * description list and they are laid out as a specification card. This is the
 * first thing a skimming buyer reads, and as a plain bullet list it was
 * indistinguishable from the applications further down.
 */
.ab-keyfacts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0 0 1.5rem;
    padding: .35rem 1.25rem;
    border: 1px solid var(--ab-rule);
    border-left: 3px solid var(--ab-accent);
    border-radius: var(--ab-radius-sm);
    background: var(--ab-surface-soft);
}

.ab-keyfacts dt {
    grid-column: 1;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ab-ink-faint);
    padding-top: .85rem;
}

.ab-keyfacts dd {
    grid-column: 1;
    margin: 0;
    padding: .1rem 0 .85rem;
    font-size: 1rem;
    font-weight: 620;
    line-height: 1.45;
    color: var(--ab-ink);
    border-bottom: 1px solid var(--ab-rule);
}

.ab-keyfacts dd:last-child {
    border-bottom: 0;
}

@media (min-width: 640px) {
    .ab-keyfacts {
        grid-template-columns: 11rem minmax(0, 1fr);
        column-gap: 1.5rem;
        align-items: baseline;
    }

    .ab-keyfacts dt {
        grid-column: 1;
        padding: .9rem 0;
        border-bottom: 1px solid var(--ab-rule);
    }

    .ab-keyfacts dd {
        grid-column: 2;
        padding: .9rem 0;
    }

    .ab-keyfacts dt:nth-last-of-type(1) {
        border-bottom: 0;
    }
}

/* ----------------------------------------------------- specification tables */

/* Wide specification tables scroll inside their own frame. The page body must
   never scroll sideways on a phone, which is exactly what an unwrapped
   thirteen-row spec table used to do. */
.ab-table-scroll {
    margin: 1.7em 0;
    border: 1px solid var(--ab-rule);
    border-radius: var(--ab-radius-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
        linear-gradient(to right, var(--ab-surface) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to right, rgba(255, 255, 255, 0), var(--ab-surface) 70%) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(18, 22, 29, .1), transparent),
        radial-gradient(farthest-side at 100% 50%, rgba(18, 22, 29, .1), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 2.5rem 100%, 2.5rem 100%, .85rem 100%, .85rem 100%;
    background-attachment: local, local, scroll, scroll;
}

.ab-table-scroll:focus-visible {
    outline: 2px solid var(--ab-accent);
    outline-offset: 2px;
}

.ab-content table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: .945rem;
    line-height: 1.5;
    margin: 0;
}

.ab-content thead th {
    position: sticky;
    top: 0;
    background: var(--ab-surface-sunk);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ab-ink-soft);
    white-space: nowrap;
    border-bottom: 1px solid var(--ab-rule-strong);
}

.ab-content th,
.ab-content td {
    padding: .72rem .9rem;
    border-bottom: 1px solid var(--ab-rule);
    text-align: left;
    vertical-align: top;
}

.ab-content tbody tr:last-child th,
.ab-content tbody tr:last-child td {
    border-bottom: 0;
}

.ab-content tbody tr:nth-child(even) {
    background: rgba(246, 248, 250, .7);
}

/* The prompt asks for a right-aligned "Verified value" column; numbers line up
   when they are tabular. */
.ab-content td[align="right"],
.ab-content th[align="right"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ab-content tbody th:first-child,
.ab-content tbody td:first-child {
    font-weight: 640;
    color: var(--ab-ink);
    white-space: nowrap;
}

/* In the specification table the third column is the buyer note — guidance
   about the value, not the value itself, so it reads one step quieter. */
.ab-section-specs tbody td:nth-child(2) {
    font-weight: 620;
}

.ab-section-specs tbody td:nth-child(3) {
    color: var(--ab-ink-soft);
    font-size: .89rem;
    min-width: 12rem;
}

@media (max-width: 575.98px) {
    .ab-content table {
        min-width: 30rem;
        font-size: .9rem;
    }

    .ab-content th,
    .ab-content td {
        padding: .58rem .68rem;
    }

    .ab-content tbody th:first-child,
    .ab-content tbody td:first-child {
        white-space: normal;
    }
}

.ab-table-hint {
    display: none;
    font-size: .78rem;
    color: var(--ab-ink-faint);
    padding: .35rem .1rem 0;
}

@media (max-width: 767.98px) {
    .ab-table-hint {
        display: block;
    }
}

/* -------------------------------------------------------------- checklist */

/*
 * Twenty procurement items in a single narrow column is a wall of text. In two
 * ticked columns it is something a buyer can run an eye down and take to a
 * supplier meeting.
 */
.ab-checklist {
    list-style: none;
    padding: 1.15rem 1.25rem;
    margin: 0 0 1.4rem;
    border: 1px solid var(--ab-rule);
    border-radius: var(--ab-radius-sm);
    background: var(--ab-surface-soft);
    column-gap: 2rem;
    font-size: .98rem;
}

@media (min-width: 700px) {
    .ab-checklist {
        columns: 2;
    }
}

.ab-checklist li {
    position: relative;
    padding-left: 1.65rem;
    margin: 0 0 .62em;
    line-height: 1.5;
    break-inside: avoid;
}

.ab-checklist li::marker {
    content: none;
}

.ab-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .42em;
    width: .95rem;
    height: .55rem;
    border-left: 2px solid var(--ab-accent);
    border-bottom: 2px solid var(--ab-accent);
    transform: rotate(-45deg);
}

/* --------------------------------------------------------------------- FAQ */

.ab-section-faq .ab-faq-item {
    border: 1px solid var(--ab-rule);
    border-radius: var(--ab-radius-sm);
    padding: 1.15rem 1.25rem .35rem;
    margin-bottom: .85rem;
    background: var(--ab-surface);
    transition: border-color .15s ease;
}

.ab-section-faq .ab-faq-item:hover {
    border-color: var(--ab-rule-strong);
}

.ab-section-faq .ab-faq-item > h3,
.ab-section-faq .ab-faq-item > h4 {
    margin: 0 0 .6rem;
    font-size: 1.06rem;
    line-height: 1.35;
    padding-left: 1.8rem;
    position: relative;
}

.ab-section-faq .ab-faq-item > h3::before,
.ab-section-faq .ab-faq-item > h4::before {
    content: "Q";
    position: absolute;
    left: 0;
    top: .05em;
    width: 1.3rem;
    height: 1.3rem;
    display: grid;
    place-items: center;
    border-radius: .3rem;
    background: var(--ab-accent-soft);
    color: var(--ab-accent-dark);
    font-size: .72rem;
    font-weight: 800;
}

.ab-section-faq .ab-faq-item p {
    color: var(--ab-ink-soft);
    font-size: 1rem;
    margin-bottom: .85rem;
}

/* ------------------------------------------------------------------ sources */

.ab-section-sources {
    font-size: .92rem;
    color: var(--ab-ink-soft);
}

.ab-section-sources h2 {
    font-size: 1.05rem;
}

/* -------------------------------------------------------------- product CTA */

/*
 * Prominent, and deliberately not the same colour as anything in the article:
 * the reader should be able to tell at a glance where the editorial stops and
 * the commercial invitation starts.
 */
.ab-cta {
    margin: 3rem 0 0;
    padding: 1.75rem 1.85rem;
    border-radius: var(--ab-radius);
    background: var(--ab-ink-deep);
    color: #fff;
    box-shadow: var(--ab-shadow);
}

.ab-cta h2 {
    font-size: 1.28rem;
    font-weight: 730;
    line-height: 1.3;
    margin: 0 0 .55rem;
    border: 0;
    padding: 0;
    color: #fff;
}

.ab-cta p {
    color: rgba(255, 255, 255, .78);
    margin: 0 0 1.25rem;
    font-size: .98rem;
    line-height: 1.6;
    max-width: 42rem;
}

.ab-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.ab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .72rem 1.25rem;
    border-radius: var(--ab-radius-sm);
    font-weight: 650;
    font-size: .95rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ab-button-primary {
    background: var(--ab-accent);
    color: #fff;
}

.ab-button-primary:hover,
.ab-button-primary:focus-visible {
    background: #0b8f60;
    color: #fff;
}

.ab-cta .ab-button-quiet {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
}

.ab-cta .ab-button-quiet:hover,
.ab-cta .ab-button-quiet:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.ab-button-quiet {
    background: var(--ab-surface);
    color: var(--ab-ink);
    border-color: var(--ab-rule-strong);
}

.ab-button-quiet:hover,
.ab-button-quiet:focus-visible {
    border-color: var(--ab-accent);
    color: var(--ab-accent-dark);
}

.ab-button:focus-visible,
.ab-eyebrow:focus-visible,
.ab-content a:focus-visible,
.ab-toc a:focus-visible,
.ab-share a:focus-visible {
    outline: 2px solid var(--ab-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------- share */

.ab-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 2.25rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ab-rule);
}

.ab-share span {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ab-ink-faint);
    margin-right: .25rem;
}

.ab-share a,
.ab-share button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .85rem;
    border: 1px solid var(--ab-rule);
    border-radius: 999px;
    background: var(--ab-surface);
    font-size: .85rem;
    font-weight: 550;
    color: var(--ab-ink-soft);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.ab-share a:hover,
.ab-share button:hover,
.ab-share a:focus-visible,
.ab-share button:focus-visible {
    border-color: var(--ab-accent);
    color: var(--ab-accent-dark);
}

.ab-share svg {
    width: 1em;
    height: 1em;
}

/* --------------------------------------------------------- contents / aside */

/*
 * One continuous rail with the active section marked, rather than a stack of
 * disconnected dashes. The rail is what tells the reader how far through a
 * two-thousand-word specification article they are.
 */
.ab-toc {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .875rem;
    line-height: 1.4;
    border-left: 2px solid var(--ab-rule);
}

.ab-toc li {
    margin: 0;
}

.ab-toc a {
    color: var(--ab-ink-soft);
    text-decoration: none;
    display: block;
    padding: .42rem .7rem;
    margin-left: -2px;
    border-left: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.ab-toc a:hover,
.ab-toc a:focus-visible {
    color: var(--ab-accent-dark);
    border-left-color: var(--ab-rule-strong);
}

.ab-toc a.is-active {
    color: var(--ab-accent-dark);
    font-weight: 650;
    border-left-color: var(--ab-accent);
}

.ab-toc .lvl-3 a {
    padding-left: 1.5rem;
    font-size: .82rem;
}

.ab-product-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ab-product-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: var(--ab-radius-sm);
    background: var(--ab-surface-soft);
    margin-bottom: .7rem;
    padding: .4rem;
}

.ab-product-card strong {
    display: block;
    font-size: .93rem;
    line-height: 1.4;
    margin-bottom: .4rem;
    color: var(--ab-ink);
}

.ab-product-card span {
    font-size: .85rem;
    font-weight: 600;
    color: var(--ab-accent-dark);
}

.ab-product-card:hover strong {
    color: var(--ab-accent-dark);
}

/* ------------------------------------------------------------------- cards */

.ab-card-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.ab-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ab-rule);
    border-radius: var(--ab-radius);
    overflow: hidden;
    background: var(--ab-surface);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.ab-card:hover,
.ab-card:focus-within {
    border-color: var(--ab-rule-strong);
    transform: translateY(-2px);
    box-shadow: var(--ab-shadow);
}

.ab-card-image {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--ab-surface-soft);
}

.ab-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ab-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.05rem 1.15rem 1.2rem;
}

.ab-card-category {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ab-accent-dark);
    margin-bottom: .45rem;
}

.ab-card h2,
.ab-card h3 {
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 700;
    margin: 0 0 .5rem;
    text-wrap: pretty;
}

.ab-card h2 a,
.ab-card h3 a {
    color: var(--ab-ink);
    text-decoration: none;
}

.ab-card h2 a:hover,
.ab-card h3 a:hover,
.ab-card h2 a:focus-visible,
.ab-card h3 a:focus-visible {
    color: var(--ab-accent-dark);
    text-decoration: underline;
}

.ab-card p {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--ab-ink-soft);
    margin: 0 0 1rem;
}

.ab-card-meta {
    margin-top: auto;
    font-size: .8rem;
    color: var(--ab-ink-faint);
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .8rem;
}

/* ------------------------------------------------------------------ listing */

.ab-listing-header {
    padding: 2rem 0 1.75rem;
    border-bottom: 1px solid var(--ab-rule);
    margin-bottom: 2.25rem;
}

.ab-listing-header h1 {
    font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: .75rem 0 .7rem;
    max-width: 22ch;
    text-wrap: balance;
}

.ab-listing-header p {
    max-width: var(--ab-measure);
    color: var(--ab-ink-soft);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

.ab-category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.ab-panel .ab-category-nav {
    margin: 0;
}

.ab-category-nav a {
    display: inline-block;
    padding: .35rem .85rem;
    border: 1px solid var(--ab-rule);
    border-radius: 999px;
    font-size: .85rem;
    color: var(--ab-ink-soft);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.ab-category-nav a:hover,
.ab-category-nav a:focus-visible,
.ab-category-nav a[aria-current="page"] {
    border-color: var(--ab-accent);
    color: var(--ab-accent-dark);
    background: var(--ab-accent-soft);
}

.ab-section-heading {
    font-size: 1.3rem;
    font-weight: 730;
    letter-spacing: -0.014em;
    margin: 3rem 0 1.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--ab-rule);
}

.ab-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ab-ink-faint);
    border: 1px dashed var(--ab-rule-strong);
    border-radius: var(--ab-radius);
}

/* --------------------------------------------------------------- a11y bits */

.ab-skip {
    position: absolute;
    left: -9999px;
}

.ab-skip:focus {
    position: static;
    display: inline-block;
    margin: .5rem 0;
    padding: .5rem .9rem;
    background: var(--ab-accent);
    color: #fff;
    border-radius: .4rem;
}

@media (prefers-reduced-motion: reduce) {
    .afrimart-blog * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }

    .ab-card:hover {
        transform: none;
    }
}

@media screen and (min-width: 1500px) {
    .afrimart-blog .ab-content {
        font-size: 1.2rem;
        line-height: 1.76;
    }

    .afrimart-blog .ab-content > p:first-of-type {
        font-size: 1.35rem;
    }

    .afrimart-blog .ab-content h2 {
        font-size: clamp(1.85rem, 1.55rem + .45vw, 2.2rem);
    }

    .afrimart-blog .ab-content h3 {
        font-size: 1.55rem;
    }

    .afrimart-blog .ab-panel > h2,
    .afrimart-blog .ab-panel > h3 {
        font-size: .84rem;
    }

    .afrimart-blog .ab-toc {
        font-size: .95rem;
    }
}

@media print {
    .ab-aside,
    .ab-cta,
    .ab-share,
    .ab-progress,
    .ab-category-nav {
        display: none;
    }

    .ab-mobile-actions,
    .ab-back-to-top,
    .ab-reading-tools {
        display: none !important;
    }

    .afrimart-blog {
        --ab-shell: none;
    }

    .ab-layout {
        grid-template-columns: minmax(0, 1fr);
        padding: 0;
    }

    .ab-content,
    .ab-shell {
        max-width: none;
        padding-inline: 0;
    }

    .ab-checklist {
        columns: 2;
        background: none;
    }

    .ab-table-scroll {
        overflow: visible;
    }

    .ab-content table {
        min-width: 0;
    }
}