/* ============================================================
   Timiza Farm Machinery - HOMEPAGE & FOOTER (v5)
   ------------------------------------------------------------
   Loaded AFTER ui-v4.css. Everything here is additive: new
   `tfm-ag-*` classes for the rebuilt homepage and footer. Drop
   this file (dequeue 'tfm-Agro-home') and the previous design
   is still intact underneath.

   Direction - "the stock board".
   Timiza Agro is a yard in Naivasha with a painted signboard and
   a price list. The page borrows that: a board-green surface for
   the loud moments, stone-grey paper in between, prices set as a
   ruled list with tabular figures in an ochre that reads like
   paint, and the marked-down price in a signwriter's red.

   Deliberately unlike timizaAgromachinery.co.ke:
     Agro                        Agro
     ----                        ----
     centred section headers  -> left-aligned, rule above
     icon card grids          -> ruled index rows with counts
     full-bleed hero carousel -> static board hero + photo mosaic
     equal rounded cards      -> mixed weights, square corners
     green + gold             -> board green + ochre + signal red
     4-column footer          -> directory footer, 2 zones
   ============================================================ */

.tfm-ag {
    --ag-board: #123A34;
    --ag-board-deep: #0C2A25;
    --ag-board-line: rgba(238, 243, 238, 0.16);
    --ag-ink: #17231F;
    --ag-ink-soft: #4A5A54;
    --ag-paper: #F1F3F1;
    --ag-paper-warm: #E8EBE7;
    --ag-rule: #D3DAD5;
    --ag-ochre: #E09B12;
    --ag-ochre-deep: #B87A08;
    --ag-signal: #C2361B;
    --ag-chalk: #F4F7F3;
    --ag-wa: #1FA855;

    --ag-shell: min(1240px, 100%);
    --ag-gap: clamp(18px, 3vw, 34px);
}

/* ---------- shared shell ---------- */
.tfm-ag-shell {
    width: var(--ag-shell);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}

.tfm-ag-band { padding: clamp(44px, 6vw, 78px) 0; background: #fff; }
.tfm-ag-band--paper { background: var(--ag-paper); }
.tfm-ag-band--board { background: var(--ag-board); color: var(--ag-chalk); }
.tfm-ag-band--tight { padding: clamp(26px, 3.5vw, 40px) 0; }

/* Section heading: rule, then heading, then one line of plain talk.
   Left aligned with a wide right gutter - the opposite of the Agro
   site's centred header block. */
.tfm-ag-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px;
    border-top: 2px solid var(--ag-ink);
    padding-top: 14px;
    margin-bottom: clamp(22px, 3vw, 34px);
}
.tfm-ag-band--board .tfm-ag-head { border-top-color: var(--ag-ochre); }

.tfm-ag-head h2 {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: clamp(1.5rem, 3.4vw, 2.3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ag-ink);
    margin: 0 0 6px;
    max-width: 22ch;
}
.tfm-ag-band--board .tfm-ag-head h2 { color: var(--ag-chalk); }

.tfm-ag-head p {
    font-size: 0.98rem;
    color: var(--ag-ink-soft);
    max-width: 58ch;
    margin: 0;
}
.tfm-ag-band--board .tfm-ag-head p { color: rgba(244, 247, 243, 0.74); }

.tfm-ag-head-link {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ag-ink);
    border-bottom: 2px solid var(--ag-ochre);
    padding-bottom: 2px;
    white-space: nowrap;
}
.tfm-ag-head-link:hover { color: var(--ag-ochre-deep); }
.tfm-ag-band--board .tfm-ag-head-link { color: var(--ag-chalk); }

/* ---------- buttons ---------- */
.tfm-ag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--tfm-font-heading);
    font-weight: 700;
    font-size: 0.97rem;
    line-height: 1;
    padding: 15px 24px;
    border: 2px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tfm-ag-btn-solid { background: var(--ag-ochre); color: var(--ag-ink); border-color: var(--ag-ochre); }
.tfm-ag-btn-solid:hover { background: var(--ag-ochre-deep); border-color: var(--ag-ochre-deep); color: #fff; }
.tfm-ag-btn-dark { background: var(--ag-board); color: var(--ag-chalk); border-color: var(--ag-board); }
.tfm-ag-btn-dark:hover { background: var(--ag-board-deep); border-color: var(--ag-board-deep); }
.tfm-ag-btn-line { background: transparent; color: var(--ag-chalk); border-color: rgba(244, 247, 243, 0.5); }
.tfm-ag-btn-line:hover { background: rgba(244, 247, 243, 0.12); border-color: var(--ag-chalk); }
.tfm-ag-btn-ink { background: transparent; color: var(--ag-ink); border-color: var(--ag-ink); }
.tfm-ag-btn-ink:hover { background: var(--ag-ink); color: #fff; }
.tfm-ag-btn-wa { background: var(--ag-wa); color: #fff; border-color: var(--ag-wa); }
.tfm-ag-btn-wa:hover { background: #178543; border-color: #178543; }

/* ============================================================
   2. HERO - the painted board
   ============================================================ */
.tfm-ag-hero {
    background: var(--ag-board);
    color: var(--ag-chalk);
    padding: clamp(38px, 5.5vw, 74px) 0 0;
    position: relative;
    overflow: hidden;
}
.tfm-ag-hero::after {
    /* faint painted grain, so the board is not a flat rectangle */
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 12% 0%, rgba(224, 155, 18, 0.13), transparent 58%),
        radial-gradient(90% 70% at 100% 100%, rgba(0, 0, 0, 0.3), transparent 60%);
    pointer-events: none;
}
.tfm-ag-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(26px, 4vw, 56px);
    align-items: center;
}

.tfm-ag-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.86rem;
    font-weight: 650;
    color: var(--ag-ochre);
    margin-bottom: 16px;
}
.tfm-ag-hero-kicker::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--ag-ochre);
}

.tfm-ag-hero h1 {
    font-family: var(--tfm-font-heading);
    font-weight: 900;
    font-size: clamp(2.15rem, 5.4vw, 3.9rem);
    line-height: 0.98;
    letter-spacing: -0.032em;
    color: var(--ag-chalk);
    margin: 0 0 18px;
    max-width: 14ch;
}
.tfm-ag-hero h1 em {
    font-style: normal;
    display: block;
    color: var(--ag-ochre);
}
.tfm-ag-hero-lede {
    font-size: clamp(1rem, 1.45vw, 1.12rem);
    line-height: 1.6;
    color: rgba(244, 247, 243, 0.8);
    max-width: 46ch;
    margin: 0 0 26px;
}

.tfm-ag-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

/* Ruled fact row - reads like the line under a price list, not like
   four identical stat cards. */
.tfm-ag-hero-facts {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--ag-board-line);
    padding-top: 18px;
    gap: 0;
}
.tfm-ag-hero-fact {
    padding: 0 20px 0 0;
    margin-right: 20px;
    border-right: 1px solid var(--ag-board-line);
}
.tfm-ag-hero-fact:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.tfm-ag-hero-fact strong {
    display: block;
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--ag-chalk);
    font-variant-numeric: tabular-nums;
}
.tfm-ag-hero-fact span { font-size: 0.8rem; color: rgba(244, 247, 243, 0.62); }

/* Photo mosaic - three real yard photos, offset, no carousel. */
.tfm-ag-hero-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    align-self: stretch;
    padding-bottom: clamp(38px, 5.5vw, 74px);
    align-content: center;
}
.tfm-ag-hero-shot {
    overflow: hidden;
    border-radius: 4px;
    background: var(--ag-board-deep);
    border: 1px solid var(--ag-board-line);
}
.tfm-ag-hero-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tfm-ag-hero-shot--tall { grid-row: span 2; min-height: 300px; }
.tfm-ag-hero-shot--wide { min-height: 145px; }

.tfm-ag-hero-note {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
    color: rgba(244, 247, 243, 0.72);
    border-left: 3px solid var(--ag-ochre);
    padding-left: 12px;
}

/* ============================================================
   3. SEARCH - one ruled line, not a floating card
   ============================================================ */
.tfm-ag-find { background: var(--ag-board-deep); padding: 0 0 clamp(22px, 3vw, 30px); }
.tfm-ag-find-form {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}
.tfm-ag-find-field { display: flex; align-items: center; flex: 1; gap: 10px; padding: 0 16px; min-width: 0; }
.tfm-ag-find-field i { color: var(--ag-ink-soft); font-size: 0.95rem; }
.tfm-ag-find-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ag-ink);
    padding: 16px 0;
}
.tfm-ag-find-form button { border-radius: 0; padding: 15px 26px; }

.tfm-ag-find-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    font-size: 0.84rem;
    color: rgba(244, 247, 243, 0.6);
}
.tfm-ag-find-hint {
    color: rgba(244, 247, 243, 0.88);
    border: 1px solid var(--ag-board-line);
    border-radius: 999px;
    padding: 5px 12px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.tfm-ag-find-hint:hover { border-color: var(--ag-ochre); color: var(--ag-ochre); }

/* ============================================================
   4. SCROLL RAILS
   ============================================================ */
.tfm-ag-rail-wrap { position: relative; }
.tfm-ag-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(212px, 1fr);
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    padding-bottom: 8px;
    scrollbar-width: thin;
}
/* Hidden by the rail script when everything already fits on screen. */
.tfm-ag-rail-nav[hidden] { display: none; }
.tfm-ag-rail > * { scroll-snap-align: start; }
.tfm-ag-rail::-webkit-scrollbar { height: 6px; }
.tfm-ag-rail::-webkit-scrollbar-thumb { background: var(--ag-rule); border-radius: 999px; }

.tfm-ag-rail-nav {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.tfm-ag-rail-btn {
    width: 42px;
    height: 42px;
    border: 2px solid var(--ag-ink);
    background: transparent;
    border-radius: 3px;
    color: var(--ag-ink);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.tfm-ag-rail-btn:hover { background: var(--ag-ink); color: #fff; }
.tfm-ag-band--board .tfm-ag-rail-btn { border-color: rgba(244, 247, 243, 0.45); color: var(--ag-chalk); }
.tfm-ag-band--board .tfm-ag-rail-btn:hover { background: var(--ag-chalk); color: var(--ag-board); }

/* ============================================================
   5. THE TWO COUNTERS - full-width rows, not twin cards
   ============================================================ */
.tfm-ag-counter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 3.5vw, 48px);
    align-items: center;
    padding: clamp(26px, 3.5vw, 40px) 0;
    border-bottom: 1px solid var(--ag-rule);
}
.tfm-ag-counter:last-child { border-bottom: 0; }
.tfm-ag-counter--flip .tfm-ag-counter-media { order: -1; }

.tfm-ag-counter-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 4px;
    background: var(--ag-paper-warm);
}
.tfm-ag-counter-media img { width: 100%; height: 100%; object-fit: cover; }

.tfm-ag-counter h3 {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: clamp(1.35rem, 2.6vw, 1.95rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: var(--ag-ink);
}
.tfm-ag-counter p { color: var(--ag-ink-soft); max-width: 48ch; margin: 0 0 16px; }

.tfm-ag-counter-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.tfm-ag-counter-tag {
    font-size: 0.8rem;
    color: var(--ag-ink);
    background: var(--ag-paper-warm);
    border-radius: 3px;
    padding: 5px 10px;
}
.tfm-ag-counter-tag:hover { background: var(--ag-ochre); }

.tfm-ag-counter-count {
    font-variant-numeric: tabular-nums;
    font-size: 0.86rem;
    color: var(--ag-ink-soft);
    margin-bottom: 16px;
}
.tfm-ag-counter-count b { color: var(--ag-ink); font-size: 1.05rem; }

/* ============================================================
   6. STOCK INDEX - a price list, not an icon grid
   ============================================================ */
.tfm-ag-index-group + .tfm-ag-index-group { margin-top: 34px; }
.tfm-ag-index-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 1.08rem;
    color: var(--ag-ink);
    margin: 0 0 4px;
}
.tfm-ag-index-title span { font-weight: 450; font-size: 0.85rem; color: var(--ag-ink-soft); font-variant-numeric: tabular-nums; }

.tfm-ag-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    column-gap: clamp(20px, 3vw, 44px);
}
.tfm-ag-index-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ag-rule);
    color: var(--ag-ink);
    transition: color 0.15s ease;
}
.tfm-ag-index-row:hover { color: var(--ag-ochre-deep); }
.tfm-ag-index-row i { color: var(--ag-ink-soft); font-size: 0.88rem; width: 18px; text-align: center; }
.tfm-ag-index-row:hover i { color: var(--ag-ochre-deep); }
.tfm-ag-index-name { font-weight: 650; font-size: 0.94rem; }
.tfm-ag-index-dots { flex: 1; border-bottom: 1px dotted var(--ag-rule); min-width: 12px; margin-bottom: 4px; }
.tfm-ag-index-count { font-size: 0.82rem; color: var(--ag-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================
   7. HOW PAYING WORKS - a ledger (a real sequence, so numbered)
   ============================================================ */
.tfm-ag-pay {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: clamp(24px, 4vw, 52px);
    align-items: start;
}
.tfm-ag-ledger { border-top: 1px solid var(--ag-board-line); }
.tfm-ag-ledger-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--ag-board-line);
}
.tfm-ag-ledger-n {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--ag-ochre);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}
.tfm-ag-ledger-row h4 {
    font-family: var(--tfm-font-heading);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--ag-chalk);
    margin: 0 0 4px;
}
.tfm-ag-ledger-row p { font-size: 0.92rem; color: rgba(244, 247, 243, 0.72); margin: 0; max-width: 54ch; }

.tfm-ag-pay-aside { display: flex; flex-direction: column; gap: 14px; }
.tfm-ag-pay-terms {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--ag-board-line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--ag-board-deep);
    cursor: zoom-in;
    position: relative;
}
.tfm-ag-pay-terms img { width: 100%; display: block; }
.tfm-ag-pay-terms span {
    display: block;
    padding: 10px 12px;
    font-size: 0.82rem;
    color: rgba(244, 247, 243, 0.78);
    text-align: left;
}
.tfm-ag-pay-note {
    font-size: 0.88rem;
    color: rgba(244, 247, 243, 0.7);
    border-left: 3px solid var(--ag-ochre);
    padding-left: 12px;
}

/* ============================================================
   8. THE YARD - asymmetric mosaic, captions underneath
   ============================================================ */
.tfm-ag-yard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.tfm-ag-yard-shot {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: zoom-in;
    width: 100%;
}
.tfm-ag-yard-shot:first-child { grid-column: span 2; grid-row: span 2; }
.tfm-ag-yard-frame {
    overflow: hidden;
    border-radius: 4px;
    background: var(--ag-paper-warm);
    aspect-ratio: 4 / 3;
    margin-bottom: 8px;
}
.tfm-ag-yard-shot:first-child .tfm-ag-yard-frame { aspect-ratio: 1 / 1; }
.tfm-ag-yard-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.tfm-ag-yard-shot:hover .tfm-ag-yard-frame img { transform: scale(1.03); }
.tfm-ag-yard-cap { font-weight: 700; font-size: 0.88rem; color: var(--ag-ink); display: block; }
.tfm-ag-yard-sub { font-size: 0.8rem; color: var(--ag-ink-soft); display: block; }

.tfm-ag-yard-visit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--ag-rule);
    font-size: 0.94rem;
    color: var(--ag-ink-soft);
}
.tfm-ag-yard-visit strong { color: var(--ag-ink); }

/* ============================================================
   9. VOICES - quotes side by side, no carousel
   ============================================================ */
.tfm-ag-voices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(18px, 2.6vw, 32px);
}
.tfm-ag-voice {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 3px solid var(--ag-ochre);
    padding-top: 16px;
}
.tfm-ag-voice--staff { border-top-color: var(--ag-board); }
.tfm-ag-voice blockquote {
    margin: 0;
    font-size: 0.99rem;
    line-height: 1.6;
    color: var(--ag-ink);
}
.tfm-ag-voice-who { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.tfm-ag-voice-who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.tfm-ag-voice-name { font-weight: 700; font-size: 0.92rem; color: var(--ag-ink); display: block; }
.tfm-ag-voice-role { font-size: 0.8rem; color: var(--ag-ink-soft); display: block; }
.tfm-ag-voice-role a { color: var(--ag-ochre-deep); font-weight: 650; }

/* ============================================================
   10. CLOSING BAND
   ============================================================ */
.tfm-ag-close {
    background: var(--ag-board);
    color: var(--ag-chalk);
    padding: clamp(44px, 6vw, 80px) 0;
}
.tfm-ag-close-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}
.tfm-ag-close h2 {
    font-family: var(--tfm-font-heading);
    font-weight: 900;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--ag-chalk);
    margin: 0 0 14px;
    max-width: 16ch;
}
.tfm-ag-close p { color: rgba(244, 247, 243, 0.76); max-width: 46ch; margin: 0 0 22px; }
.tfm-ag-close-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.tfm-ag-close-lines { display: grid; gap: 0; border-top: 1px solid var(--ag-board-line); }
.tfm-ag-close-line {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid var(--ag-board-line);
    color: var(--ag-chalk);
}
.tfm-ag-close-line i { color: var(--ag-ochre); width: 20px; text-align: center; }
.tfm-ag-close-line span { font-size: 0.8rem; color: rgba(244, 247, 243, 0.6); display: block; }
.tfm-ag-close-line strong { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }

/* ============================================================
   FOOTER - a contact directory, not four equal columns
   ============================================================ */
.tfm-ag-footer {
    background: var(--ag-board-deep);
    color: var(--ag-chalk);
    /* the footer renders on every page, so it carries its own tokens */
    --ag-board: #123A34;
    --ag-board-deep: #0C2A25;
    --ag-board-line: rgba(238, 243, 238, 0.16);
    --ag-chalk: #F4F7F3;
    --ag-ochre: #E09B12;
    --ag-ochre-deep: #B87A08;
    --ag-signal: #C2361B;
    --ag-wa: #1FA855;
    --ag-shell: min(1240px, 100%);
}

/* Top band: one instruction and three ways to act on it. */
.tfm-ag-footer-help {
    background: var(--ag-board);
    border-bottom: 1px solid var(--ag-board-line);
    padding: clamp(26px, 3.5vw, 42px) 0;
}
.tfm-ag-footer-help-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: clamp(20px, 3vw, 44px);
    align-items: center;
}
.tfm-ag-footer-help h2 {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: clamp(1.3rem, 2.6vw, 1.85rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--ag-chalk);
    margin: 0 0 6px;
    max-width: 20ch;
}
.tfm-ag-footer-help p { color: rgba(244, 247, 243, 0.7); font-size: 0.94rem; margin: 0; max-width: 44ch; }

.tfm-ag-footer-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tfm-ag-footer-act {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 15px 16px;
    border: 1px solid var(--ag-board-line);
    border-radius: 4px;
    color: var(--ag-chalk);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tfm-ag-footer-act:hover { border-color: var(--ag-ochre); background: rgba(224, 155, 18, 0.08); }
.tfm-ag-footer-act i { color: var(--ag-ochre); font-size: 1.05rem; }
.tfm-ag-footer-act strong { font-weight: 700; font-size: 0.95rem; }
.tfm-ag-footer-act span { font-size: 0.8rem; color: rgba(244, 247, 243, 0.62); }

/* Main body: brand at the width it deserves, contacts as a directory. */
.tfm-ag-footer-main { padding: clamp(32px, 4.5vw, 56px) 0; }
.tfm-ag-footer-zones {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(28px, 4vw, 64px);
}

.tfm-ag-footer-mark { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tfm-ag-footer-mark img { height: 52px; width: auto; }
.tfm-ag-footer-word {
    font-family: var(--tfm-font-heading);
    font-weight: 900;
    letter-spacing: 0.04em;
    font-size: 1.25rem;
    color: var(--ag-chalk);
}
.tfm-ag-footer-blurb { color: rgba(244, 247, 243, 0.72); font-size: 0.92rem; line-height: 1.65; max-width: 46ch; margin: 0 0 18px; }

.tfm-ag-footer-promise {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--ag-signal);
    border-radius: 3px;
    padding: 9px 13px;
    font-size: 0.86rem;
    color: var(--ag-chalk);
    margin-bottom: 20px;
}
.tfm-ag-footer-promise b { color: var(--ag-ochre); font-variant-numeric: tabular-nums; }

.tfm-ag-footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tfm-ag-footer-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid var(--ag-board-line);
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ag-chalk);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.tfm-ag-footer-pill:hover { border-color: var(--ag-ochre); color: var(--ag-ochre); }
.tfm-ag-footer-pill--wa:hover { border-color: var(--ag-wa); color: var(--ag-wa); }

.tfm-ag-footer-sub { font-size: 0.78rem; color: rgba(244, 247, 243, 0.5); margin: 0 0 8px; }
.tfm-ag-footer-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tfm-ag-footer-tag {
    font-size: 0.8rem;
    color: rgba(244, 247, 243, 0.8);
    border: 1px solid var(--ag-board-line);
    border-radius: 3px;
    padding: 5px 9px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.tfm-ag-footer-tag:hover { border-color: var(--ag-ochre); color: var(--ag-ochre); }
.tfm-ag-footer-tag--all { border-color: var(--ag-ochre); color: var(--ag-ochre); font-weight: 700; }

/* Directory: label on the left, number on the right, ruled between. */
.tfm-ag-dir-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 2px solid var(--ag-ochre);
    padding-bottom: 8px;
    margin-bottom: 2px;
}
.tfm-ag-dir-head h3 {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--ag-chalk);
    margin: 0;
}
.tfm-ag-dir-head span { font-size: 0.8rem; color: rgba(244, 247, 243, 0.55); }

.tfm-ag-dir-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ag-board-line);
}
.tfm-ag-dir-label { font-size: 0.86rem; color: rgba(244, 247, 243, 0.66); }
.tfm-ag-dir-label b { display: block; color: var(--ag-chalk); font-weight: 650; font-size: 0.9rem; }
.tfm-ag-dir-value {
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--ag-chalk);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}
.tfm-ag-dir-value:hover { color: var(--ag-ochre); }
.tfm-ag-dir-value--wrap { white-space: normal; word-break: break-word; }

.tfm-ag-dir-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
.tfm-ag-dir-links a { font-size: 0.88rem; font-weight: 650; color: rgba(244, 247, 243, 0.82); }
.tfm-ag-dir-links a:hover { color: var(--ag-ochre); }

/* Bottom bar in three parts. */
.tfm-ag-footer-base { border-top: 1px solid var(--ag-board-line); padding: 18px 0 26px; }
.tfm-ag-footer-base-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 22px;
}
.tfm-ag-footer-base p { font-size: 0.82rem; color: rgba(244, 247, 243, 0.55); margin: 0; }
.tfm-ag-footer-legal { display: flex; gap: 18px; }
.tfm-ag-footer-legal a { font-size: 0.82rem; color: rgba(244, 247, 243, 0.68); }
.tfm-ag-footer-legal a:hover { color: var(--ag-ochre); }
.tfm-ag-footer-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 650;
    color: rgba(244, 247, 243, 0.68);
    border: 1px solid var(--ag-board-line);
    border-radius: 999px;
    padding: 7px 14px;
    background: transparent;
}
.tfm-ag-footer-top:hover { border-color: var(--ag-ochre); color: var(--ag-ochre); }

/* ============================================================
   Card additions - the price drop on the standard product card
   ============================================================ */
.tfm-badge-drop {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #C2361B;
    color: #fff;
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    padding: 4px 7px;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
    z-index: 2;
}
.tfm-product-was {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-top: -2px;
}
.tfm-product-was s { font-size: 0.84rem; color: #7A8891; font-variant-numeric: tabular-nums; }
.tfm-product-save { font-size: 0.76rem; font-weight: 700; color: #C2361B; }

.tfm-qv-price-was { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 4px; }
.tfm-qv-price-was s { color: #7A8891; font-variant-numeric: tabular-nums; }
.tfm-qv-price-off {
    background: #C2361B;
    color: #fff;
    font-weight: 800;
    font-size: 0.76rem;
    padding: 3px 7px;
    border-radius: 3px;
}
.tfm-qv-price-save { font-size: 0.82rem; font-weight: 700; color: #C2361B; }

/* ============================================================
   7b. CROSS-BORDER LIVESTOCK DELIVERY
   ------------------------------------------------------------
   Sits on a board band directly after the two counters, where
   the reader has just met the livestock side of the yard. Two
   halves: the offer (three country plates, priced "Free" the
   way the tickets are priced) and the clearance checklist,
   numbered like the Lipa ledger because it is a real sequence.
   ============================================================ */
.tfm-ag-ship-map {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0 0 clamp(26px, 3.5vw, 42px);
    padding: 0;
}
.tfm-ag-ship-place {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 18px;
    background: var(--ag-board-deep);
    border: 1px solid var(--ag-board-line);
    border-left: 3px solid var(--ag-ochre);
    border-radius: 4px;
}
.tfm-ag-ship-plate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tfm-ag-ship-code {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 1.28rem;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--ag-ochre);
    font-variant-numeric: tabular-nums;
}
.tfm-ag-ship-free {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ag-wa);
    border-radius: 3px;
    padding: 4px 9px;
    line-height: 1;
}
.tfm-ag-ship-country {
    font-family: var(--tfm-font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--ag-chalk);
}
.tfm-ag-ship-note {
    font-size: 0.83rem;
    line-height: 1.45;
    color: rgba(244, 247, 243, 0.64);
}

/* Sub-heading inside the band: the same rule-then-heading idiom
   as .tfm-ag-head, one step quieter. */
.tfm-ag-ship-rule {
    border-top: 1px solid var(--ag-ochre);
    padding-top: 14px;
    margin-bottom: 8px;
}
.tfm-ag-ship-sub {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: clamp(1.12rem, 2.2vw, 1.5rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--ag-chalk);
    margin: 0 0 6px;
}
.tfm-ag-ship-lede {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(244, 247, 243, 0.74);
    max-width: 66ch;
    margin: 0;
}

/* The checklist. Two ruled columns on wide screens, one below. */
.tfm-ag-ship-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: clamp(22px, 3.5vw, 52px);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: tfm-ship;
}
.tfm-ag-ship-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid var(--ag-board-line);
}
.tfm-ag-ship-item::before {
    counter-increment: tfm-ship;
    content: counter(tfm-ship, decimal-leading-zero);
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ag-ochre);
    font-variant-numeric: tabular-nums;
}
.tfm-ag-ship-item h4 {
    font-family: var(--tfm-font-heading);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.28;
    color: var(--ag-chalk);
    margin: 0 0 4px;
}
.tfm-ag-ship-item p {
    font-size: 0.89rem;
    line-height: 1.5;
    color: rgba(244, 247, 243, 0.7);
    margin: 0;
    max-width: 52ch;
}

.tfm-ag-ship-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: clamp(22px, 3vw, 32px);
}
.tfm-ag-ship-foot p {
    flex: 1 1 340px;
    font-size: 0.89rem;
    line-height: 1.5;
    color: rgba(244, 247, 243, 0.72);
    border-left: 3px solid var(--ag-ochre);
    padding-left: 12px;
    margin: 0;
}

/* The counter's jump link down to the band above. */
.tfm-ag-counter-jump {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 14px;
    font-size: 0.87rem;
    font-weight: 650;
    line-height: 1.4;
    color: var(--ag-ink);
    border-bottom: 2px solid var(--ag-ochre);
    padding-bottom: 3px;
}
.tfm-ag-counter-jump i { color: var(--ag-ochre-deep); font-size: 0.82rem; }
.tfm-ag-counter-jump:hover { color: var(--ag-ochre-deep); }

/* An in-page jump should not land the heading under the sticky
   header, and should not fly on reduced-motion machines. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.tfm-ag [id] { scroll-margin-top: 90px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
    .tfm-ag-hero-grid,
    .tfm-ag-pay,
    .tfm-ag-close-grid,
    .tfm-ag-footer-help-grid,
    .tfm-ag-footer-zones { grid-template-columns: minmax(0, 1fr); }

    .tfm-ag-hero-mosaic { padding-bottom: clamp(30px, 5vw, 56px); }
    .tfm-ag-counter { grid-template-columns: minmax(0, 1fr); }
    .tfm-ag-counter--flip .tfm-ag-counter-media { order: 0; }
    .tfm-ag-counter-media { order: -1; }
    .tfm-ag-yard { grid-template-columns: repeat(2, 1fr); }
    .tfm-ag-yard-shot:first-child { grid-column: span 2; grid-row: auto; }
    .tfm-ag-yard-shot:first-child .tfm-ag-yard-frame { aspect-ratio: 16 / 10; }
}

@media (max-width: 640px) {
    .tfm-ag-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .tfm-ag-ship-list { grid-template-columns: minmax(0, 1fr); }
    .tfm-ag-ship-foot .tfm-ag-btn { flex: 1 1 100%; }
    .tfm-ag-head-link { justify-self: start; }

    .tfm-ag-hero h1 { max-width: none; }
    .tfm-ag-hero-actions .tfm-ag-btn { flex: 1 1 100%; }
    .tfm-ag-hero-fact { padding-right: 14px; margin-right: 14px; }
    .tfm-ag-hero-fact strong { font-size: 1.25rem; }
    .tfm-ag-hero-shot--tall { min-height: 200px; }
    .tfm-ag-hero-shot--wide { min-height: 95px; }

    .tfm-ag-find-form { flex-wrap: wrap; }
    .tfm-ag-find-field { flex: 1 1 100%; }
    .tfm-ag-find-form button { flex: 1 1 100%; }

    .tfm-ag-rail { grid-auto-columns: minmax(168px, 1fr); }
    .tfm-ag-index { grid-template-columns: minmax(0, 1fr); }
    .tfm-ag-footer-acts { grid-template-columns: minmax(0, 1fr); }
    .tfm-ag-footer-base-grid { justify-content: flex-start; }
}

/* The plugin pins a mobile bottom nav to the viewport - keep the last
   band clear of it. */
@media (max-width: 768px) {
    .tfm-ag-footer-base { padding-bottom: 86px; }
}

@media (prefers-reduced-motion: reduce) {
    .tfm-ag-yard-shot:hover .tfm-ag-yard-frame img { transform: none; }
    .tfm-ag *, .tfm-ag-footer * { transition-duration: 0.01ms !important; }
}

/* Visible keyboard focus everywhere in the new sections. */
.tfm-ag a:focus-visible,
.tfm-ag button:focus-visible,
.tfm-ag input:focus-visible,
.tfm-ag-footer a:focus-visible,
.tfm-ag-footer button:focus-visible {
    outline: 3px solid var(--ag-ochre);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   Layout hooks and inline-element corrections.
   The ticket and directory markup uses <span> inside <a> (a link
   may not contain block-level children), so the spans that need
   to stack are given block display here.
   ------------------------------------------------------------ */
.tfm-ag-hero-words,
.tfm-ag-counter-words,
.tfm-ag-footer-brand,
.tfm-ag-footer-dir { min-width: 0; }

.tfm-ag-close-line > span { flex: 1; min-width: 0; }
.tfm-ag-close-line strong { color: var(--ag-chalk); display: block; }

/* The multi-number directory row wraps instead of forcing one line. */
.tfm-ag-dir-values {
    text-align: right;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px 6px;
    min-width: 0;
}
.tfm-ag-dir-values a {
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--ag-chalk);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tfm-ag-dir-values a:hover { color: var(--ag-ochre); }

/* ------------------------------------------------------------
   Cash-discount scope notes.
   The drop applies to outright purchase only, so anywhere a
   reduced price sits next to an instalment plan, the plan says
   which price it is written against.
   ------------------------------------------------------------ */
.tfm-product-finance-note {
    font-size: 0.72rem;
    color: #7A8891;
    margin-top: 2px;
    line-height: 1.3;
}
.tfm-qv-chip-note {
    background: #FBEDE9;
    color: #8E2814;
    border-color: #E8C5BC;
    font-weight: 600;
}
.tfm-lipa-cash-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed #D3DAD5;
}
.tfm-lipa-cash-note i { color: #C2361B; margin-top: 2px; }
.tfm-lipa-cash-note strong { color: #C2361B; font-variant-numeric: tabular-nums; }

/* ============================================================
   v6 REFINEMENT LAYER (3.13.0)
   ------------------------------------------------------------
   Same board green, ochre and paper - softer and more tactile.
   What the leading catalogues (Jumia KE, AgriEuro, Deere/Case
   dealer sites) have in common, applied to what we already had:
     - rounded cards with a little depth, lifting on hover, so it
       is obvious what is clickable (Baymard: clear hit areas)
     - a trust bar straight under the hero
     - photo tiles for categories instead of text-only rows
     - search inside the hero, not in a band below it
   Everything is a `tfm-ag-*` override, so dequeueing this file
   still falls back cleanly.
   ============================================================ */
.tfm-ag,
.tfm-ag-footer {
    --ag-radius: 14px;
    --ag-radius-sm: 9px;
    --ag-shadow-sm: 0 1px 2px rgba(18, 58, 52, 0.06), 0 2px 8px rgba(18, 58, 52, 0.05);
    --ag-shadow-md: 0 4px 10px rgba(18, 58, 52, 0.08), 0 14px 32px rgba(18, 58, 52, 0.1);
    --ag-shadow-lg: 0 18px 50px rgba(6, 22, 19, 0.28);
    --ag-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tfm-ag-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- section heads: eyebrow instead of a hard rule ---------- */
.tfm-ag-head { border-top: 0; padding-top: 0; }
.tfm-ag-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ag-ochre-deep);
    margin-bottom: 8px;
}
.tfm-ag-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}
.tfm-ag-band--board .tfm-ag-eyebrow { color: var(--ag-ochre); }
.tfm-ag-head h2 { max-width: 26ch; }

.tfm-ag-head-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 0;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(18, 58, 52, 0.06);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.tfm-ag-head-link::after {
    content: "\2192";
    transition: transform 0.2s var(--ag-ease);
}
.tfm-ag-head-link:hover { background: var(--ag-ochre); color: var(--ag-ink); }
.tfm-ag-head-link:hover::after { transform: translateX(3px); }
.tfm-ag-band--board .tfm-ag-head-link { background: rgba(244, 247, 243, 0.1); }
.tfm-ag-band--board .tfm-ag-head-link:hover { background: var(--ag-ochre); color: var(--ag-ink); }

/* ---------- buttons ---------- */
.tfm-ag-btn {
    border-radius: var(--ag-radius-sm);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
                transform 0.2s var(--ag-ease), box-shadow 0.2s ease;
}
.tfm-ag-btn:hover { transform: translateY(-1px); }
.tfm-ag-btn:active { transform: none; }
.tfm-ag-btn-solid { box-shadow: 0 6px 18px rgba(224, 155, 18, 0.28); }
.tfm-ag-btn-solid:hover { box-shadow: 0 10px 24px rgba(184, 122, 8, 0.32); }
.tfm-ag-btn-wa { box-shadow: 0 6px 18px rgba(31, 168, 85, 0.25); }

/* ---------- hero ---------- */
.tfm-ag-hero { padding-bottom: clamp(70px, 8vw, 110px); }
.tfm-ag-hero-mosaic { padding-bottom: 0; }
.tfm-ag-hero h1 { margin-bottom: 16px; }
.tfm-ag-hero .tfm-ag-hero-lede { margin-bottom: 24px; }

.tfm-ag-hero-find {
    max-width: 560px;
    border-radius: var(--ag-radius-sm);
    box-shadow: var(--ag-shadow-lg);
    padding: 5px;
    gap: 5px;
}
.tfm-ag-hero-find .tfm-ag-find-field { padding: 0 12px; }
.tfm-ag-hero-find .tfm-ag-find-field input { padding: 12px 0; }
.tfm-ag-hero-find button { border-radius: 6px; padding: 13px 22px; box-shadow: none; }
.tfm-ag-hero-find button:hover { transform: none; box-shadow: none; }
.tfm-ag-hero .tfm-ag-find-hints { margin: 12px 0 26px; }

.tfm-ag-hero-shot {
    border-radius: var(--ag-radius);
    border: 0;
    box-shadow: var(--ag-shadow-lg);
}
.tfm-ag-hero-shot img { transition: transform 0.6s var(--ag-ease); }
.tfm-ag-hero-shot:hover img { transform: scale(1.04); }
.tfm-ag-hero-shot--tall { min-height: 340px; }
.tfm-ag-hero-shot--wide { min-height: 165px; }
.tfm-ag-hero-note { margin-top: 4px; }

/* ---------- trust bar: a white card overlapping the hero ---------- */
.tfm-ag-trust {
    position: relative;
    z-index: 2;
    background: linear-gradient(transparent 50%, #fff 50%);
    margin-top: clamp(-56px, -5vw, -40px);
}
.tfm-ag-trust-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #fff;
    border-radius: var(--ag-radius);
    box-shadow: var(--ag-shadow-md);
}
.tfm-ag-trust-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    position: relative;
}
.tfm-ag-trust-item + .tfm-ag-trust-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: var(--ag-rule);
}
.tfm-ag-trust-item > i {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--ag-board);
    background: rgba(224, 155, 18, 0.16);
}
.tfm-ag-trust-item .fa-whatsapp { color: var(--ag-wa); background: rgba(31, 168, 85, 0.12); }
.tfm-ag-trust-item > span { font-size: 0.8rem; line-height: 1.4; color: var(--ag-ink-soft); min-width: 0; }
.tfm-ag-trust-item strong {
    display: block;
    font-family: var(--tfm-font-heading);
    font-weight: 750;
    font-size: 0.93rem;
    color: var(--ag-ink);
    margin-bottom: 1px;
}

/* ---------- shop by line: photo tiles ---------- */
.tfm-ag-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}
.tfm-ag-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ag-rule);
    border-radius: var(--ag-radius);
    overflow: hidden;
    color: var(--ag-ink);
    transition: transform 0.25s var(--ag-ease), box-shadow 0.25s ease, border-color 0.25s ease;
}
.tfm-ag-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--ag-shadow-md);
    border-color: transparent;
    color: var(--ag-ink);
}
.tfm-ag-tile-img {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ag-paper-warm);
}
.tfm-ag-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--ag-ease);
}
.tfm-ag-tile:hover .tfm-ag-tile-img img { transform: scale(1.06); }
.tfm-ag-tile-body { display: block; padding: 12px 14px 14px; }
.tfm-ag-tile-name {
    display: block;
    font-family: var(--tfm-font-heading);
    font-weight: 750;
    font-size: 0.97rem;
    line-height: 1.25;
}
.tfm-ag-tile-meta {
    display: block;
    margin-top: 3px;
    font-size: 0.78rem;
    color: var(--ag-ink-soft);
    font-variant-numeric: tabular-nums;
}
/* Arrow sits on the photo's corner and slides in on hover, so the
   name and price line keep the full width of the tile. */
.tfm-ag-tile-go {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--ag-ink);
    background: var(--ag-ochre);
    box-shadow: var(--ag-shadow-sm);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.2s ease, transform 0.25s var(--ag-ease);
}
.tfm-ag-tile:hover .tfm-ag-tile-go,
.tfm-ag-tile:focus-visible .tfm-ag-tile-go { opacity: 1; transform: none; }

/* ---------- rails ---------- */
.tfm-ag-rail { gap: 16px; padding: 4px 2px 12px; }
.tfm-ag-rail--cards { grid-auto-columns: minmax(250px, 1fr); }
.tfm-ag-rail-nav { justify-content: flex-end; margin-top: 10px; }
.tfm-ag-rail-btn {
    border-radius: 50%;
    border-width: 1px;
    border-color: var(--ag-rule);
    background: #fff;
    box-shadow: var(--ag-shadow-sm);
}
.tfm-ag-rail-btn:hover { border-color: var(--ag-ink); }
.tfm-ag-band--board .tfm-ag-rail-btn { background: transparent; box-shadow: none; }

/* Standard product card, when it sits on the homepage */
.tfm-ag .tfm-product-card {
    border-radius: var(--ag-radius);
    border-color: var(--ag-rule);
    overflow: hidden;
    transition: transform 0.25s var(--ag-ease), box-shadow 0.25s ease, border-color 0.25s ease;
}
.tfm-ag .tfm-product-card:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: var(--ag-shadow-md);
}
.tfm-ag .tfm-product-card .tfm-btn { border-radius: var(--ag-radius-sm); }

/* ---------- counters ---------- */
.tfm-ag-counter-media {
    border-radius: var(--ag-radius);
    box-shadow: var(--ag-shadow-md);
}
.tfm-ag-counter-media img { transition: transform 0.6s var(--ag-ease); }
.tfm-ag-counter:hover .tfm-ag-counter-media img { transform: scale(1.03); }
.tfm-ag-counter-tag {
    border-radius: 999px;
    padding: 6px 12px;
    transition: background-color 0.2s ease;
}

/* ---------- livestock delivery + paying ---------- */
.tfm-ag-ship-place { border-radius: var(--ag-radius-sm); }
.tfm-ag-ledger-n {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    padding-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    background: rgba(224, 155, 18, 0.14);
}
.tfm-ag-pay-terms { border-radius: var(--ag-radius); }

/* ---------- yard ---------- */
.tfm-ag-yard-frame { border-radius: var(--ag-radius); }

/* ---------- voices: cards on the paper band ---------- */
.tfm-ag-voice {
    background: #fff;
    border-radius: var(--ag-radius);
    border-top: 0;
    padding: 22px 22px 20px;
    box-shadow: var(--ag-shadow-sm);
    position: relative;
}
.tfm-ag-voice::before {
    content: "\201C";
    font-family: Georgia, serif;
    font-size: 3.2rem;
    line-height: 0.6;
    height: 22px;
    color: var(--ag-ochre);
}
.tfm-ag-voice--staff::before { color: var(--ag-board); }

/* ---------- stock list + closing ---------- */
.tfm-ag-index-row { border-radius: 0; }
.tfm-ag-close-line { transition: padding-left 0.2s var(--ag-ease); }
.tfm-ag-close-line:hover { padding-left: 6px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
    .tfm-ag-trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tfm-ag-trust-item:nth-child(3)::before { display: none; }
    .tfm-ag-hero-find { max-width: none; }
}

@media (max-width: 640px) {
    .tfm-ag-hero { padding-bottom: 64px; }
    .tfm-ag-hero-find { flex-wrap: nowrap; }
    .tfm-ag-hero-find .tfm-ag-find-field { flex: 1 1 auto; }
    .tfm-ag-hero-find button { flex: none; padding: 12px 16px; }
    .tfm-ag-hero-shot--tall { min-height: 220px; }
    .tfm-ag-hero-shot--wide { min-height: 105px; }

    .tfm-ag-trust-list { grid-template-columns: minmax(0, 1fr); padding: 4px 6px; }
    .tfm-ag-trust-item { padding: 12px 10px; }
    .tfm-ag-trust-item + .tfm-ag-trust-item::before {
        display: block;
        top: 0;
        bottom: auto;
        left: 10px;
        right: 10px;
        width: auto;
        height: 1px;
    }
    .tfm-ag-trust-item > i { width: 38px; height: 38px; font-size: 1rem; }

    .tfm-ag-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tfm-ag-tile-body { padding: 10px 10px 12px; }
    .tfm-ag-tile-name { font-size: 0.88rem; }
    .tfm-ag-tile-go { display: none; }

    .tfm-ag-rail--cards { grid-auto-columns: minmax(220px, 82%); }
    .tfm-ag-voice { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .tfm-ag-tile:hover,
    .tfm-ag .tfm-product-card:hover,
    .tfm-ag-btn:hover { transform: none; }
    .tfm-ag-tile:hover .tfm-ag-tile-img img,
    .tfm-ag-hero-shot:hover img,
    .tfm-ag-counter:hover .tfm-ag-counter-media img { transform: none; }
}

/* ============================================================
   v7 (3.14.0) - "Order from home" steps band
   ------------------------------------------------------------
   Four numbered steps on the board surface, sitting between the
   best sellers rail and the two counters. The checkout button in
   its footer is shown by the cart script only once the cart has
   something in it (see [data-tfm-cart-when-filled] in cart.css).
   ============================================================ */
.tfm-ag-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    counter-reset: none;
}
.tfm-ag-step {
    position: relative;
    padding: 22px 20px 20px;
    border: 1px solid var(--ag-board-line);
    border-radius: var(--ag-radius-sm);
    background: rgba(244, 247, 243, 0.05);
}
.tfm-ag-step-n {
    position: absolute;
    top: 16px;
    right: 18px;
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1;
    color: rgba(244, 247, 243, 0.14);
    font-variant-numeric: tabular-nums;
}
.tfm-ag-step > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--ag-ochre);
    color: var(--ag-ink);
    font-size: 1.05rem;
    margin-bottom: 14px;
}
.tfm-ag-step h3 {
    margin: 0 0 6px;
    font-family: var(--tfm-font-heading);
    font-size: 1.08rem;
    font-weight: 750;
    color: var(--ag-chalk);
}
.tfm-ag-step p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: rgba(244, 247, 243, 0.74); }

.tfm-ag-steps-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: clamp(22px, 3vw, 30px);
}

@media (max-width: 980px) {
    .tfm-ag-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .tfm-ag-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .tfm-ag-step { padding: 16px 16px 16px 74px; min-height: 76px; }
    .tfm-ag-step > i { position: absolute; left: 16px; top: 16px; margin: 0; }
    .tfm-ag-step-n { font-size: 1.5rem; top: 14px; right: 14px; }
    .tfm-ag-steps-foot .tfm-ag-btn { flex: 1 1 100%; }
}