/* ============================================
   TIMIZA FARM MACHINERY - MAIN STYLESHEET
   ============================================ */

:root {
    --tfm-green: #176B3A;
    --tfm-green-dark: #0F4D29;
    --tfm-green-light: #ECF4EF;
    --tfm-orange: #F28C28;
    --tfm-orange-dark: #C86F18;
    --tfm-orange-light: #FEF2E6;
    --tfm-navy: #172019;
    --tfm-white: #FFFFFF;
    --tfm-gray-light: #F6F8F6;
    --tfm-gray: #E6EAE7;
    --tfm-gray-medium: #C9D2CC;
    --tfm-gray-dark: #6B7C72;
    --tfm-text: #16261C;
    --tfm-text-light: #47564D;
    --tfm-text-muted: #7C8B82;

    --tfm-font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --tfm-font-body: 'Barlow', 'Segoe UI', sans-serif;

    --tfm-container-max: 1200px;
    --tfm-container-padding: 0 20px;
    --tfm-radius-sm: 2px;
    --tfm-radius-md: 3px;
    --tfm-radius-lg: 4px;
    --tfm-radius-full: 999px;

    --tfm-shadow-sm: 0 1px 2px rgba(14, 30, 43, 0.08);
    --tfm-shadow-md: 0 2px 6px rgba(14, 30, 43, 0.12);
    --tfm-shadow-lg: 0 6px 18px rgba(14, 30, 43, 0.16);

    --tfm-transition: all 0.25s ease;
}

/* ---------- Reset ---------- */
.tfm-body, .tfm-body *, .tfm-body *::before, .tfm-body *::after { box-sizing: border-box; }
.tfm-body { font-family: var(--tfm-font-body); color: var(--tfm-text); line-height: 1.65; background: var(--tfm-white); font-size: 16px; -webkit-font-smoothing: antialiased; }
.tfm-body.tfm-no-scroll { overflow: hidden; }
.tfm-body img { max-width: 100%; height: auto; display: block; }
.tfm-body a { text-decoration: none; color: inherit; transition: var(--tfm-transition); }
.tfm-body ul { list-style: none; margin: 0; padding: 0; }
.tfm-body h1, .tfm-body h2, .tfm-body h3, .tfm-body h4 { font-family: var(--tfm-font-heading); color: var(--tfm-navy); line-height: 1.25; margin: 0; }
.tfm-body p { margin: 0; }
.tfm-body button { font-family: inherit; cursor: pointer; }

.tfm-container { max-width: var(--tfm-container-max); margin: 0 auto; padding: var(--tfm-container-padding); }
.tfm-text-accent { color: var(--tfm-orange); }
.tfm-bg-light { background: var(--tfm-gray-light); }

/* ---------- Preloader ---------- */
#tfm-preloader { position: fixed; inset: 0; background: var(--tfm-green-dark); z-index: 99999; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease, visibility 0.5s ease; }
#tfm-preloader.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }
.tfm-loader { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0; }
/* Ring that spins around the logo */
.tfm-loader-ring-wrap {
    position: relative;
    width: 120px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.tfm-loader-ring {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.10);
    border-top-color: var(--tfm-orange);
    border-right-color: rgba(242,140,40,0.4);
    animation: tfm-spin 1s cubic-bezier(0.4,0,0.6,1) infinite;
    width: 148px;
    height: 108px;
}
.tfm-loader-ring-inner {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.06);
    border-bottom-color: rgba(242,140,40,0.25);
    animation: tfm-spin-rev 1.6s linear infinite;
    width: 116px;
    height: 76px;
    top: 2px; left: 2px;
}
/* Logo image centred inside the ring */
.tfm-loader-logo-img {
    width: 120px;
    height: auto;
    max-height: 80px;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 2;
    border-radius: 6px;
    /* slight pulse so it feels alive */
    animation: tfm-logo-pulse 1.8s ease-in-out infinite;
}
.tfm-loader-tagline {
    color: rgba(255,255,255,0.55);
    font-family: var(--tfm-font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
@keyframes tfm-spin { to { transform: rotate(360deg); } }
@keyframes tfm-spin-rev { to { transform: rotate(-360deg); } }
@keyframes tfm-logo-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.88; transform: scale(0.97); }
}

/* ---------- WhatsApp float ---------- */
.tfm-whatsapp-float { position: fixed; bottom: 22px; right: 22px; width: 58px; height: 58px; background: #25D366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: var(--tfm-shadow-lg); z-index: 9998; animation: tfm-pulse 2.4s infinite; }
@keyframes tfm-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); } 70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }

/* ---------- Buttons ---------- */
.tfm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: var(--tfm-radius-full); font-weight: 600; font-size: 0.95rem; border: 2px solid transparent; transition: var(--tfm-transition); white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; }
.tfm-btn-primary { background: var(--tfm-green); color: #fff; }
.tfm-btn-primary:hover { background: var(--tfm-green-dark); transform: translateY(-2px); }
.tfm-btn-accent { background: var(--tfm-orange); color: #fff; }
.tfm-btn-accent:hover { background: var(--tfm-orange-dark); transform: translateY(-2px); }
.tfm-btn-outline { background: transparent; color: var(--tfm-green); border-color: var(--tfm-green); }
.tfm-btn-outline:hover { background: var(--tfm-green); color: #fff; }
.tfm-btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.tfm-btn-outline-light:hover { background: rgba(255,255,255,0.15); border-color: #fff; }
.tfm-btn-lg { padding: 16px 32px; font-size: 1rem; }
.tfm-btn-block { width: 100%; }
.tfm-btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* ---------- Header ---------- */
.tfm-header { position: sticky; top: 0; z-index: 999; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.05); }
.tfm-topbar { background: var(--tfm-navy); color: #C8DCD0; font-size: 0.78rem; }
.tfm-topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; gap: 12px; }
.tfm-topbar-item { display: flex; align-items: center; gap: 6px; }
.tfm-topbar-right { display: flex; gap: 18px; }
.tfm-topbar-right a { display: flex; align-items: center; gap: 6px; color: #C8DCD0; }
.tfm-topbar-right a:hover { color: var(--tfm-orange); }

.tfm-navbar { background: #fff; transition: var(--tfm-transition); }
.tfm-header.tfm-scrolled .tfm-navbar { box-shadow: var(--tfm-shadow-sm); }
.tfm-nav-wrapper { display: flex; align-items: center; gap: 20px; padding: 14px 20px; }
.tfm-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tfm-logo-badge { position: relative; background: var(--tfm-green-dark); color: #fff; font-family: var(--tfm-font-heading); font-weight: 800; font-size: 0.85rem; letter-spacing: 1px; padding: 8px 12px; border-radius: var(--tfm-radius-sm); box-shadow: 0 3px 0 var(--tfm-orange); }
.tfm-logo-text { font-family: var(--tfm-font-heading); font-weight: 700; font-size: 1.05rem; line-height: 1.15; white-space: nowrap; }
.tfm-logo-text-green { color: var(--tfm-green-dark); }
.tfm-logo-text-orange { color: var(--tfm-orange); }

.tfm-nav-menu { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; }
.tfm-nav-link { padding: 10px 16px; font-weight: 600; font-size: 0.95rem; color: var(--tfm-text); border-radius: var(--tfm-radius-full); }
.tfm-nav-link:hover, .tfm-nav-link.active { color: var(--tfm-green); background: var(--tfm-green-light); }
.tfm-nav-cta { flex-shrink: 0; }

.tfm-mobile-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: none; }
.tfm-mobile-toggle span { display: block; height: 2.5px; width: 100%; background: var(--tfm-navy); border-radius: 2px; transition: var(--tfm-transition); }
.tfm-mobile-toggle.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.tfm-mobile-toggle.active span:nth-child(2) { opacity: 0; }
.tfm-mobile-toggle.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero (light banner: white/green copy panel + full-bleed photo fading in from the right) ---------- */
.tfm-hero { position: relative; color: var(--tfm-text); overflow: visible; min-height: 480px; display: flex; align-items: center; background: var(--tfm-white); }
.tfm-hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tfm-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.2s ease; overflow: hidden; }
.tfm-hero-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.tfm-hero-slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(22px) saturate(1.25) brightness(1.12); transform: scale(1.18); }
/* The sharp, uncropped photo is confined to the right-hand zone of the hero so
   it never crowds the copy column, no matter each image's aspect ratio. The
   blurred bg layer above still fills the full hero for a seamless backdrop. */
.tfm-hero-slide img { position: absolute; z-index: 1; top: 0; bottom: 0; left: 40%; right: 0; width: 60%; height: 100%; object-fit: contain; object-position: center center; display: block; }
/* White-to-photo fade (left→right) so the copy panel sits on a clean light background while the
   machines stay fully visible and uncovered - no dark tint over the photo itself. */
.tfm-hero-slide-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, #fff 32%, rgba(255,255,255,0.94) 40%, rgba(255,255,255,0.62) 50%, rgba(255,255,255,0.12) 62%, rgba(255,255,255,0) 72%); }
.tfm-hero-slide-overlay::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 22%); }
/* Same clean light fade for every slide so the palette stays consistent across the carousel */
.tfm-hero-tint-1 .tfm-hero-slide-overlay,
.tfm-hero-tint-2 .tfm-hero-slide-overlay,
.tfm-hero-tint-3 .tfm-hero-slide-overlay { background: linear-gradient(90deg, #fff 0%, #fff 32%, rgba(255,255,255,0.94) 40%, rgba(255,255,255,0.62) 50%, rgba(255,255,255,0.12) 62%, rgba(255,255,255,0) 72%); }

.tfm-hero-container { position: relative; z-index: 2; padding-top: 52px; padding-bottom: 52px; width: 100%; }
.tfm-hero-panel { max-width: 560px; }
.tfm-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--tfm-green-dark); color: #fff; padding: 9px 18px; border-radius: var(--tfm-radius-full); font-size: 0.8rem; font-weight: 700; margin-bottom: 20px; box-shadow: var(--tfm-shadow-sm); }
.tfm-hero-badge i { color: #a9e3bd; }
.tfm-hero-title { font-size: clamp(1.9rem, 4.6vw, 2.9rem); font-weight: 800; color: var(--tfm-green-dark); margin-bottom: 18px; line-height: 1.14; }
.tfm-hero-title-brand { display: block; color: var(--tfm-orange); font-size: 1.3em; line-height: 1.05; }
.tfm-hero-tagline { font-size: 1.02rem; color: var(--tfm-text-light); margin-bottom: 28px; max-width: 480px; line-height: 1.6; }
.tfm-hero-tagline strong { color: var(--tfm-text); font-weight: 700; }
.tfm-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 0; }
.tfm-btn-white { background: #fff; color: var(--tfm-green-dark); border-color: var(--tfm-gray-medium); box-shadow: var(--tfm-shadow-sm); }
.tfm-btn-white i { color: #25D366; }
.tfm-btn-white:hover { background: var(--tfm-green-light); border-color: var(--tfm-green); transform: translateY(-2px); }

/* ---------- Hero carousel controls ---------- */
.tfm-hero-carousel-arrow { position: absolute; top: 45%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--tfm-green-dark); opacity: 0.9; color: #fff; border: none; z-index: 3; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: var(--tfm-transition); box-shadow: var(--tfm-shadow-sm); }
.tfm-hero-carousel-arrow:hover { background: var(--tfm-green); opacity: 1; }
.tfm-hero-carousel-prev { left: 16px; }
.tfm-hero-carousel-next { right: 16px; }
.tfm-hero-carousel-dots { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; z-index: 3; }
.tfm-hero-carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(15,42,26,0.25); border: none; padding: 0; transition: var(--tfm-transition); }
.tfm-hero-carousel-dot.active { background: var(--tfm-green-dark); width: 22px; border-radius: 4px; }

/* ---------- Hero feature bar (floating white card overlapping the bottom of the hero) ---------- */
.tfm-hero-feature-bar { position: relative; z-index: 5; margin-top: -44px; }
.tfm-hero-feature-card { background: #fff; border-radius: var(--tfm-radius-lg); box-shadow: var(--tfm-shadow-lg); padding: 22px 26px; display: flex; flex-wrap: wrap; }
.tfm-hero-feature-item { display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 150px; padding: 4px 16px; }
.tfm-hero-feature-item + .tfm-hero-feature-item { border-left: 1px solid var(--tfm-gray); }
.tfm-hero-feature-icon { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }
.tfm-hero-feature-icon.is-green { background: var(--tfm-green-light); color: var(--tfm-green); }
.tfm-hero-feature-icon.is-orange { background: var(--tfm-orange-light); color: var(--tfm-orange); }
.tfm-hero-feature-text { line-height: 1.3; }
.tfm-hero-feature-text strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--tfm-text); }
.tfm-hero-feature-text span { font-size: 0.78rem; color: var(--tfm-text-muted); }

/* ---------- Section ---------- */
.tfm-section { padding: 70px 0; }
.tfm-section-header { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.tfm-section-header h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 12px; }
.tfm-section-header p { color: var(--tfm-text-light); font-size: 1rem; }
.tfm-section-cta { text-align: center; margin-top: 40px; position: relative; z-index: 2; }
.tfm-section-cta .tfm-btn { position: relative; z-index: 2; pointer-events: auto; }

/* ---------- Category grid ---------- */
.tfm-category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tfm-category-card { background: #fff; border: 1.5px solid rgba(23,107,58,0.22); border-radius: var(--tfm-radius-lg); padding: 24px 16px; text-align: center; box-shadow: var(--tfm-shadow-sm); transition: var(--tfm-transition); opacity: 0; transform: translateY(16px); }
.tfm-category-card.tfm-in-view { opacity: 1; transform: translateY(0); }
.tfm-category-card:hover { transform: translateY(-4px); box-shadow: var(--tfm-shadow-md); border-color: var(--tfm-green); }
.tfm-category-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--tfm-green-light); color: var(--tfm-green); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto 14px; }
.tfm-category-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; }
.tfm-category-card span { font-size: 0.78rem; color: var(--tfm-text-muted); }

/* ---------- Product grid / card ---------- */
.tfm-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tfm-product-card { background: #fff; border: 1.5px solid rgba(23,107,58,0.22); border-radius: var(--tfm-radius-lg); overflow: hidden; box-shadow: var(--tfm-shadow-sm); transition: var(--tfm-transition); display: flex; flex-direction: column; opacity: 0; transform: translateY(16px); }
.tfm-product-card.tfm-in-view { opacity: 1; transform: translateY(0); }
.tfm-product-card:hover { box-shadow: var(--tfm-shadow-md); transform: translateY(-3px); }
.tfm-product-image { position: relative; aspect-ratio: 1 / 1; background: var(--tfm-gray-light); overflow: hidden; display: block; width: 100%; border: none; padding: 0; }
.tfm-badge-lipa { position: absolute; top: 10px; left: 10px; background: var(--tfm-orange); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 5px 10px; border-radius: var(--tfm-radius-full); }
.tfm-product-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tfm-product-category { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--tfm-green); font-weight: 700; }
.tfm-product-name { font-size: 0.92rem; font-weight: 700; line-height: 1.35; min-height: 2.5em; }
.tfm-product-price { font-size: 1.05rem; font-weight: 800; color: var(--tfm-orange-dark); }
.tfm-product-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.tfm-product-actions .tfm-btn { padding: 10px 14px; font-size: 0.82rem; }

/* ---------- Features grid ---------- */
.tfm-features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tfm-feature-card { background: #fff; border: 1px solid var(--tfm-gray); border-radius: var(--tfm-radius-lg); padding: 26px 20px; text-align: center; opacity: 0; transform: translateY(16px); transition: var(--tfm-transition); }
.tfm-feature-card.tfm-in-view { opacity: 1; transform: translateY(0); }
.tfm-feature-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--tfm-orange-light); color: var(--tfm-orange); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto 14px; }
.tfm-feature-card h4 { font-size: 1rem; margin-bottom: 8px; }
.tfm-feature-card p { font-size: 0.86rem; color: var(--tfm-text-light); }

/* ---------- CTA section ---------- */
.tfm-cta-section { background: linear-gradient(135deg, var(--tfm-green-dark), var(--tfm-green)); padding: 60px 0; text-align: center; }
.tfm-cta-content h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 12px; }
.tfm-cta-content p { color: #DCEAE1; margin-bottom: 26px; max-width: 560px; margin-left: auto; margin-right: auto; }
.tfm-cta-buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Footer ---------- */
.tfm-footer { background: var(--tfm-navy); color: #c7d6cc; padding-top: 56px; }
.tfm-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding-bottom: 36px; }
.tfm-footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tfm-footer-logo .tfm-logo-text { color: #fff; }
.tfm-footer-desc { font-size: 0.86rem; line-height: 1.7; color: #A6B8AC; margin-bottom: 18px; }
.tfm-footer-social { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.tfm-social-link { display: inline-flex; align-items: center; gap: 10px; color: #A6B8AC; font-size: 0.84rem; }
.tfm-social-link:hover { color: #fff; }
.tfm-social-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: rgba(255,255,255,0.08); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.tfm-social-link:hover .tfm-social-icon { background: var(--tfm-orange); }
.tfm-footer-title { color: #fff; font-size: 0.92rem; font-weight: 700; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; }
.tfm-footer-links li { margin-bottom: 10px; }
.tfm-footer-links a { font-size: 0.86rem; color: #A6B8AC; }
.tfm-footer-links a:hover { color: var(--tfm-orange); }
.tfm-footer-contact li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: 0.86rem; color: #A6B8AC; }
.tfm-footer-contact i { color: var(--tfm-orange); margin-top: 3px; }
.tfm-footer-contact a { color: #A6B8AC; }
.tfm-footer-contact a:hover { color: var(--tfm-orange); }
.tfm-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 0; }
.tfm-footer-bottom-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 0.78rem; color: #8ea294; }
.tfm-footer-bottom-links { display: flex; gap: 18px; }
.tfm-footer-bottom-links a { color: #8ea294; }
.tfm-footer-bottom-links a:hover { color: var(--tfm-orange); }

/* ---------- Page hero (Shop / Contact) ---------- */
.tfm-page-hero { background: linear-gradient(135deg, var(--tfm-navy) 0%, var(--tfm-green-dark) 55%, var(--tfm-green) 100%); color: #fff; padding: 56px 0 46px; }
.tfm-page-hero .tfm-container { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tfm-page-hero-title { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin: 14px 0 12px; width: 100%; }
.tfm-page-hero-subtitle { color: #DCEAE1; max-width: 620px; margin: 0 auto; font-size: 0.98rem; width: 100%; }
.tfm-page-hero-breadcrumb { margin-top: 20px; font-size: 0.82rem; color: #C8DCD0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.tfm-page-hero-breadcrumb a { color: #fff; font-weight: 600; }
.tfm-page-hero-breadcrumb i { font-size: 0.65rem; }

/* ---------- Livestock marketplace ---------- */
.tfm-page-hero--livestock {
    background-image: linear-gradient(90deg, rgba(15,77,41,0.96) 0%, rgba(15,77,41,0.84) 48%, rgba(15,77,41,0.42) 100%), url('../data/livestock-images/dairy-cows/friesian-cow-with-calf.jpeg');
    background-size: cover;
    background-position: center 48%;
}
.tfm-page-hero--livestock .tfm-page-hero-title { max-width: 760px; }
.tfm-page-hero--livestock .tfm-hero-badge { background: var(--tfm-orange); }
.tfm-livestock-marketplace {
    margin: 28px 0 12px;
    padding: 30px;
    background: #fff;
    border-top: 4px solid var(--tfm-orange);
    box-shadow: var(--tfm-shadow-md);
}
.tfm-livestock-marketplace-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}
.tfm-livestock-marketplace-head h2 { font-size: clamp(1.45rem, 3vw, 2.15rem); margin: 8px 0 10px; }
.tfm-livestock-marketplace-head p { max-width: 680px; color: var(--tfm-text-light); font-size: 0.94rem; }
.tfm-livestock-marketplace-head .tfm-btn { flex-shrink: 0; }
.tfm-livestock-proof {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--tfm-gray);
    border-bottom: 1px solid var(--tfm-gray);
    margin-bottom: 24px;
}
.tfm-livestock-proof > div { padding: 15px 18px; }
.tfm-livestock-proof > div + div { border-left: 1px solid var(--tfm-gray); }
.tfm-livestock-proof strong { display: block; color: var(--tfm-green-dark); font-family: var(--tfm-font-heading); font-size: 1.55rem; line-height: 1; }
.tfm-livestock-proof span { display: block; color: var(--tfm-text-muted); font-size: 0.7rem; letter-spacing: 0.8px; margin-top: 5px; text-transform: uppercase; }
.tfm-livestock-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tfm-livestock-category { display: flex; min-width: 0; border: 1px solid var(--tfm-gray-medium); background: var(--tfm-gray-light); transition: var(--tfm-transition); }
.tfm-livestock-category:hover { border-color: var(--tfm-orange); transform: translateY(-3px); box-shadow: var(--tfm-shadow-sm); }
.tfm-livestock-category-image { width: 112px; min-width: 112px; overflow: hidden; background: var(--tfm-gray); }
.tfm-livestock-category-image img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; transition: transform 0.35s ease; }
.tfm-livestock-category:hover .tfm-livestock-category-image img { transform: scale(1.05); }
.tfm-livestock-category-body { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 14px 13px; }
.tfm-livestock-category-body strong { color: var(--tfm-navy); font-family: var(--tfm-font-heading); font-size: 1rem; }
.tfm-livestock-category-body small { color: var(--tfm-text-light); font-size: 0.75rem; line-height: 1.4; }
.tfm-livestock-category-link { color: var(--tfm-orange-dark); font-family: var(--tfm-font-heading); font-size: 0.73rem; font-weight: 700; margin-top: auto; text-transform: uppercase; }
.tfm-livestock-category-link i { margin-left: 4px; transition: transform 0.2s ease; }
.tfm-livestock-category:hover .tfm-livestock-category-link i { transform: translateX(3px); }
.tfm-shop-section--livestock .tfm-product-card { border-top: 3px solid var(--tfm-orange); }
.tfm-livestock-story { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; margin: 36px 0; padding: 32px; background: var(--tfm-gray-light); border-top: 4px solid var(--tfm-green); }
.tfm-livestock-story-copy h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 8px 0 14px; }
.tfm-livestock-story-copy > p { color: var(--tfm-text-light); max-width: 620px; }
.tfm-livestock-story-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 22px; }
.tfm-livestock-story-grid strong { color: var(--tfm-green-dark); font-family: var(--tfm-font-heading); font-size: 1.05rem; }
.tfm-livestock-story-grid p { color: var(--tfm-text-light); font-size: .86rem; margin-top: 4px; }
.tfm-livestock-story-images { display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 300px; }
.tfm-livestock-story-images img { width: 100%; height: 100%; object-fit: cover; min-height: 140px; }
.tfm-livestock-story-images img:first-child { grid-row: span 2; }
.tfm-livestock-offerings { margin: 46px 0 18px; }
.tfm-livestock-offering-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tfm-livestock-offering-grid article { padding: 22px 18px; border: 1px solid var(--tfm-gray); background: #fff; }
.tfm-livestock-offering-grid i { color: var(--tfm-orange); font-size: 1.45rem; margin-bottom: 12px; }
.tfm-livestock-offering-grid h3 { font-size: 1.05rem; margin-bottom: 7px; }
.tfm-livestock-offering-grid p { color: var(--tfm-text-light); font-size: .86rem; }

/* ---------- Farm Tours & Visits ---------- */
.tfm-tours-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; margin-bottom: 40px; }
.tfm-tours-intro-copy > p { color: var(--tfm-text-light); max-width: 560px; margin-top: 6px; }
.tfm-tours-intro-images { display: grid; grid-template-columns: 1.3fr .8fr; gap: 10px; min-height: 260px; }
.tfm-tours-intro-images img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.tfm-tours-packages-header { margin-bottom: 22px; }
.tfm-tour-package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tfm-tour-package-card { padding: 26px 22px; background: #fff; border: 1px solid var(--tfm-gray); border-top: 3px solid var(--tfm-orange); }
.tfm-tour-package-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tfm-green-light, #eef7ee); color: var(--tfm-green); font-size: 1.15rem; margin-bottom: 14px; }
.tfm-tour-package-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.tfm-tour-package-card p { color: var(--tfm-text-light); font-size: .87rem; margin-bottom: 12px; }
.tfm-tour-package-meta { display: block; color: var(--tfm-green-dark); font-family: var(--tfm-font-heading); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.tfm-tours-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--tfm-gray); }
.tfm-tours-cta p { color: var(--tfm-text-light); margin: 0; max-width: 480px; }

@media (max-width: 760px) {
    .tfm-livestock-marketplace { padding: 22px 16px; }
    .tfm-livestock-marketplace-head { align-items: flex-start; flex-direction: column; gap: 16px; }
    .tfm-livestock-marketplace-head .tfm-btn { width: 100%; }
    .tfm-livestock-proof { grid-template-columns: repeat(2, 1fr); }
    .tfm-livestock-proof > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--tfm-gray); }
    .tfm-livestock-proof > div:nth-child(4) { border-top: 1px solid var(--tfm-gray); }
    .tfm-livestock-category-grid { grid-template-columns: 1fr; }
    .tfm-livestock-story { grid-template-columns: 1fr; padding: 22px 16px; gap: 24px; }
    .tfm-livestock-story-images { min-height: 230px; }
    .tfm-livestock-offering-grid { grid-template-columns: repeat(2, 1fr); }
    .tfm-tours-intro { grid-template-columns: 1fr; gap: 22px; }
    .tfm-tours-intro-images { min-height: 200px; }
    .tfm-tour-package-grid { grid-template-columns: 1fr; }
    .tfm-tours-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .tfm-livestock-story-grid, .tfm-livestock-offering-grid { grid-template-columns: 1fr; }
    .tfm-livestock-story-images { grid-template-columns: 1fr 1fr; min-height: 190px; }
}

/* ---------- Shop filters ---------- */
.tfm-filter-btn { padding: 9px 16px; border-radius: var(--tfm-radius-full); border: 1.5px solid var(--tfm-gray-medium); background: #fff; color: var(--tfm-text-light); font-weight: 600; font-size: 0.82rem; transition: var(--tfm-transition); }
.tfm-filter-btn:hover { border-color: var(--tfm-green); color: var(--tfm-green); }
.tfm-filter-btn.active { background: var(--tfm-green); border-color: var(--tfm-green); color: #fff; }
.tfm-shop-empty { text-align: center; padding: 40px 20px; color: var(--tfm-text-muted); }

/* ---------- Lipa Mdogo page ---------- */
.tfm-lipa-hero { background: linear-gradient(135deg, var(--tfm-navy) 0%, var(--tfm-green-dark) 55%, var(--tfm-green) 100%); color: #fff; padding: 56px 0 60px; text-align: center; }
.tfm-lipa-hero h1 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; margin-bottom: 12px; }
.tfm-lipa-hero p { color: #DCEAE1; max-width: 560px; margin: 0 auto 22px; font-size: 0.95rem; }
.tfm-lipa-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tfm-lipa-badges span { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.15); padding: 9px 16px; border-radius: var(--tfm-radius-full); font-size: 0.8rem; font-weight: 600; }
.tfm-lipa-badges i { color: var(--tfm-orange); }

.tfm-lipa-section { padding-top: 0; margin-top: -32px; }
.tfm-lipa-narrow { max-width: 640px; }
.tfm-lipa-card { background: #fff; border-radius: var(--tfm-radius-lg); box-shadow: var(--tfm-shadow-md); padding: 22px; margin-bottom: 18px; }

.tfm-lipa-product-card { padding: 18px; }
.tfm-lipa-eyebrow { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--tfm-orange); margin-bottom: 10px; }

.tfm-lipa-notes-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tfm-lipa-notes-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: var(--tfm-text-light); line-height: 1.5; }
.tfm-lipa-notes-list i { color: var(--tfm-green); margin-top: 3px; flex-shrink: 0; }

.tfm-lipa-poster-card { text-align: center; }
.tfm-lipa-poster-card .tfm-terms-wrapper-compact { margin: 0 auto; }

/* Shared payment information block (Shop Now / Lipa Mdogo). */
.tfm-payment-card { background: var(--tfm-navy); border: 1px solid rgba(255,255,255,0.14); border-bottom: 3px solid var(--tfm-orange); border-radius: 0; box-shadow: none; color: #fff; }
.tfm-terms-section > .tfm-container > .tfm-payment-card { max-width: 640px; margin: 0 auto 24px; }
.tfm-payment-card-header { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 0; margin-bottom: 16px; }
.tfm-payment-card-icon { width: auto; height: auto; flex-shrink: 0; border-radius: 0; background: transparent; color: var(--tfm-orange); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: none; margin-top: 2px; }
.tfm-payment-card-header h3 { color: #fff; font-size: 0.98rem; margin-bottom: 8px; }
.tfm-payment-card-header p { color: #C8DCD0; font-size: 0.86rem; margin: 0; }

.tfm-payment-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.tfm-payment-highlight { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--tfm-radius-md); padding: 12px 14px; }
.tfm-payment-highlight-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,0.06); color: var(--tfm-orange); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.tfm-payment-highlight-label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--tfm-orange); margin-bottom: 3px; }
.tfm-payment-highlight-value { font-size: 0.98rem; font-weight: 800; color: #fff; line-height: 1.25; }

.tfm-payment-notes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.tfm-payment-note { display: flex; align-items: flex-start; gap: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--tfm-radius-md); padding: 12px 14px; }
.tfm-payment-note-icon { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: #fff; margin-top: 2px; }
.tfm-payment-note-icon-green { background: var(--tfm-green); }
.tfm-payment-note-icon-orange { background: var(--tfm-orange); }
.tfm-payment-note strong { display: block; font-size: 0.9rem; color: #fff; margin-bottom: 3px; }
.tfm-payment-note p { font-size: 0.83rem; color: #C8DCD0; line-height: 1.5; margin: 0; }

.tfm-payment-thanks { background: transparent; color: #C8DCD0; text-align: left; font-weight: 400; font-size: 0.86rem; border-radius: 0; padding: 0; line-height: 1.5; }
.tfm-payment-thanks .tfm-text-accent { font-weight: 800; }

@media (max-width: 480px) {
    .tfm-payment-highlights { grid-template-columns: 1fr; }
}

.tfm-lipa-cta-row { text-align: center; padding: 8px 0 4px; }
.tfm-lipa-cta-label { display: block; font-size: 0.9rem; color: var(--tfm-text-light); margin-bottom: 14px; }
.tfm-lipa-cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tfm-lipa-product-row { display: flex; align-items: center; gap: 14px; }
.tfm-lipa-product-row img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--tfm-radius-md); flex-shrink: 0; }
.tfm-lipa-product-row h3 { font-size: 1rem; margin-bottom: 6px; }
.tfm-lipa-cash-price { display: inline-block; background: var(--tfm-orange-light); color: var(--tfm-orange-dark); font-weight: 700; font-size: 0.8rem; padding: 4px 10px; border-radius: var(--tfm-radius-full); }

.tfm-lipa-plan-tabs { display: flex; gap: 10px; margin-bottom: 18px; }
.tfm-plan-tab { flex: 1; background: #fff; border: 1.5px solid var(--tfm-gray-medium); border-radius: var(--tfm-radius-md); padding: 12px 8px; text-align: center; font-weight: 700; font-size: 0.86rem; color: var(--tfm-text-light); transition: var(--tfm-transition); }
.tfm-plan-tab small { display: block; font-weight: 500; font-size: 0.68rem; color: var(--tfm-text-muted); margin-top: 2px; }
.tfm-plan-tab.active { background: var(--tfm-orange); border-color: var(--tfm-orange); color: #fff; }
.tfm-plan-tab.active small { color: rgba(255,255,255,0.85); }

.tfm-lipa-summary-card { background: linear-gradient(135deg, var(--tfm-green-dark), var(--tfm-green)); color: #fff; }
.tfm-lipa-summary-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 8px; }
.tfm-lipa-summary-top span { font-size: 0.8rem; color: #C8DCD0; }
.tfm-lipa-summary-top strong { font-size: 1.5rem; font-weight: 800; }
.tfm-lipa-summary-top strong small { font-size: 0.7rem; font-weight: 500; color: #C8DCD0; }
.tfm-lipa-summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tfm-lipa-summary-item { background: rgba(255,255,255,0.1); border-radius: var(--tfm-radius-md); padding: 12px; }
.tfm-lipa-summary-item span { display: block; font-size: 0.7rem; color: #C8DCD0; margin-bottom: 4px; }
.tfm-lipa-summary-item strong { font-size: 0.95rem; font-weight: 700; }
.tfm-lipa-note { margin-top: 16px; font-size: 0.78rem; color: #DCEAE1; display: flex; align-items: center; gap: 8px; }

.tfm-lipa-form-header { text-align: left; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--tfm-green); }
.tfm-lipa-form-header h3 { font-size: 1.15rem; margin-bottom: 6px; }
.tfm-lipa-form-header p { font-size: 0.84rem; color: var(--tfm-text-light); }
.tfm-lipa-form-note { text-align: center; font-size: 0.78rem; color: var(--tfm-text-muted); margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Shop Now page - "Amount to Pay" 40% deposit helper note */
.tfm-shopnow-amount-note { display: flex; align-items: flex-start; gap: 6px; font-size: 0.78rem; color: var(--tfm-text-light); margin-top: 8px; line-height: 1.5; }
.tfm-shopnow-amount-note i { color: var(--tfm-orange); margin-top: 2px; flex-shrink: 0; }

/* ---------- Forms (shared: Lipa Mdogo + Contact) ---------- */
.tfm-form-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tfm-form-group { margin-bottom: 16px; }
.tfm-form-group label { display: block; font-size: 0.82rem; font-weight: 700; margin-bottom: 7px; color: var(--tfm-text); }
.tfm-required { color: var(--tfm-orange); }
.tfm-form-group input, .tfm-form-group select, .tfm-form-group textarea {
    width: 100%; padding: 13px 14px; border: 1.5px solid var(--tfm-gray-medium); border-radius: var(--tfm-radius-sm);
    font-family: inherit; font-size: 16px; color: var(--tfm-text); background: #fff; transition: var(--tfm-transition); min-height: 48px;
}
.tfm-form-group input:focus, .tfm-form-group select:focus, .tfm-form-group textarea:focus { outline: none; border-color: var(--tfm-green); box-shadow: 0 0 0 3px rgba(23,107,58,0.12); }
.tfm-form-group textarea { resize: vertical; min-height: 90px; }
.tfm-input-error { border-color: #d9534f !important; box-shadow: 0 0 0 3px rgba(217,83,79,0.12) !important; }

/* ---------- Contact page ---------- */
.tfm-contact-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.tfm-contact-form-wrapper h2 { font-size: 1.4rem; margin-bottom: 8px; }
.tfm-contact-form-desc { color: var(--tfm-text-light); font-size: 0.9rem; margin-bottom: 24px; }
.tfm-contact-form-note { font-size: 0.78rem; color: var(--tfm-text-muted); margin-top: 12px; display: flex; align-items: center; gap: 6px; justify-content: center; }
.tfm-form-status { margin-top: 12px; font-size: 0.88rem; font-weight: 600; text-align: center; min-height: 1.2em; }
.tfm-status-success { color: var(--tfm-green); }
.tfm-status-error { color: #d9534f; }

.tfm-contact-info-card { background: #fff; border: 1px solid var(--tfm-gray); border-radius: var(--tfm-radius-lg); padding: 24px; box-shadow: var(--tfm-shadow-sm); margin-bottom: 20px; }
.tfm-contact-info-card h3 { font-size: 1.05rem; margin-bottom: 18px; }
.tfm-contact-info-item { display: flex; gap: 14px; margin-bottom: 18px; }
.tfm-contact-info-item:last-child { margin-bottom: 0; }
.tfm-contact-info-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--tfm-green-light); color: var(--tfm-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tfm-contact-info-item h4 { font-size: 0.9rem; margin-bottom: 4px; }
.tfm-contact-info-item p, .tfm-contact-info-item small { font-size: 0.85rem; color: var(--tfm-text-light); }
.tfm-contact-cta-card { background: linear-gradient(135deg, var(--tfm-green-dark), var(--tfm-green)); color: #fff; text-align: center; }
.tfm-contact-cta-card h3 { color: #fff; }
.tfm-contact-cta-card p { color: #DCEAE1; font-size: 0.86rem; margin-bottom: 16px; }

/* ---------- Product image / quick view trigger ---------- */
.tfm-img-wrap { position: relative; display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #eef1ee 25%, #f7f9f7 37%, #eef1ee 63%); background-size: 400% 100%; animation: tfm-shimmer 1.4s ease infinite; }
.tfm-img-wrap.tfm-img-loaded { animation: none; background: none; }
.tfm-img-wrap img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s ease; }
.tfm-img-wrap.tfm-img-loaded img { opacity: 1; }
@keyframes tfm-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.tfm-badge-gallery { position: absolute; top: 10px; right: 10px; background: rgba(15,42,26,0.65); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 4px 9px; border-radius: var(--tfm-radius-full); display: flex; align-items: center; gap: 5px; }
.tfm-quick-view-hint { position: absolute; inset: auto 0 0 0; background: linear-gradient(0deg, rgba(15,42,26,0.75), transparent); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 24px 12px 10px; text-align: center; opacity: 0; transform: translateY(6px); transition: var(--tfm-transition); pointer-events: none; }
.tfm-product-card:hover .tfm-quick-view-hint { opacity: 1; transform: translateY(0); }
.tfm-product-name.tfm-quick-view-trigger { cursor: pointer; background: none; border: none; text-align: left; padding: 0; font-family: inherit; }
.tfm-product-name.tfm-quick-view-trigger:hover { color: var(--tfm-green); }

/* ---------- Trust stats strip ---------- */
.tfm-stats-strip { background: var(--tfm-navy); padding: 26px 0; }
.tfm-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; text-align: center; }
.tfm-stat strong { display: block; color: var(--tfm-orange); font-family: var(--tfm-font-heading); font-size: 1.5rem; font-weight: 800; margin-bottom: 4px; }
.tfm-stat strong i { font-size: 1.3rem; }
.tfm-stat span { color: #C8DCD0; font-size: 0.76rem; font-weight: 600; }

/* ---------- Shop toolbar (search + filters, sticky) ---------- */
/* ---------- Shop result bar (compact, products stay dominant) ---------- */
.tfm-shop-resultbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; margin-bottom: 14px; border-bottom: 1px solid var(--tfm-gray); }
.tfm-shop-result-count { font-size: 0.86rem; color: var(--tfm-text-light); }
.tfm-shop-result-count strong { color: var(--tfm-navy); font-weight: 800; }
.tfm-shop-filter-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--tfm-radius-full); border: 1.5px solid var(--tfm-gray-medium); background: #fff; color: var(--tfm-text); font-weight: 700; font-size: 0.84rem; position: relative; }
.tfm-shop-filter-toggle:hover, .tfm-shop-filter-toggle.active { border-color: var(--tfm-green); color: var(--tfm-green); }
.tfm-shop-filter-badge { background: var(--tfm-orange); color: #fff; font-size: 0.68rem; font-weight: 800; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; }

.tfm-shop-filters-panel { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease; margin-bottom: 0; }
.tfm-shop-filters-panel.active { max-height: 400px; opacity: 1; margin-bottom: 24px; }
.tfm-shop-search { position: relative; margin-bottom: 14px; margin-top: 14px; }
.tfm-shop-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--tfm-text-muted); }
.tfm-shop-search input { width: 100%; padding: 13px 16px 13px 42px; border: 1.5px solid var(--tfm-gray-medium); border-radius: var(--tfm-radius-full); font-size: 16px; font-family: inherit; min-height: 48px; }
.tfm-shop-search input:focus { outline: none; border-color: var(--tfm-green); box-shadow: 0 0 0 3px rgba(23,107,58,0.12); }
.tfm-shop-filters { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Quick View modal ---------- */
.tfm-modal-overlay { position: fixed; inset: 0; background: rgba(15,42,26,0.6); backdrop-filter: blur(2px); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; }
.tfm-modal-overlay.active { opacity: 1; visibility: visible; }
.tfm-modal { background: #fff; border-radius: var(--tfm-radius-lg); max-width: 780px; width: 100%; max-height: 88vh; overflow-y: auto; position: relative; transform: translateY(16px); transition: transform 0.25s ease; }
.tfm-modal-overlay.active .tfm-modal { transform: translateY(0); }
.tfm-modal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(15,42,26,0.06); border: none; font-size: 1.4rem; line-height: 1; color: var(--tfm-text); z-index: 2; }
.tfm-modal-close:hover { background: var(--tfm-gray); }
.tfm-modal-body { display: flex; flex-direction: column; }
.tfm-modal-gallery { position: relative; background: var(--tfm-gray-light); }
.tfm-modal-gallery-stage { aspect-ratio: 4 / 3; }
.tfm-modal-gallery-stage img { width: 100%; height: 100%; object-fit: cover; }
.tfm-modal-gallery-nav { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; pointer-events: none; }
.tfm-modal-gallery-nav button { pointer-events: all; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; color: var(--tfm-navy); box-shadow: var(--tfm-shadow-sm); }
.tfm-modal-gallery-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.tfm-modal-gallery-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.6); border: none; padding: 0; }
.tfm-modal-gallery-dot.active { background: #fff; width: 20px; border-radius: 4px; }
.tfm-modal-info { padding: 22px; }
.tfm-modal-info h3 { font-size: 1.2rem; margin: 8px 0 10px; }
.tfm-qv-price-main { font-size: 1.4rem; font-weight: 800; color: var(--tfm-navy); margin-bottom: 10px; }
.tfm-qv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tfm-qv-chip { background: var(--tfm-green-light); color: var(--tfm-green-dark); font-size: 0.76rem; font-weight: 700; padding: 6px 12px; border-radius: var(--tfm-radius-full); }
.tfm-qv-description { font-size: 0.86rem; color: var(--tfm-text-light); line-height: 1.7; margin-bottom: 18px; }

/* ---------- Mobile bottom nav ---------- */
.tfm-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 997; background: #fff; border-top: 1px solid var(--tfm-gray); box-shadow: 0 -4px 20px rgba(15,42,26,0.08); padding-bottom: env(safe-area-inset-bottom, 0); }
.tfm-bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; font-size: 0.66rem; font-weight: 700; color: var(--tfm-text-muted); }
.tfm-bottom-nav-item i { font-size: 1.15rem; }
.tfm-bottom-nav-item.active { color: var(--tfm-green); }
.tfm-bottom-nav-whatsapp { color: #25D366; }

/* ---------- Testimonial carousel ---------- */
.tfm-testimonial-carousel { position: relative; max-width: 640px; margin: 0 auto; }
.tfm-testimonial-track { position: relative; aspect-ratio: 4 / 5; border-radius: var(--tfm-radius-lg); overflow: hidden; box-shadow: var(--tfm-shadow-md); background: var(--tfm-gray-light); }
.tfm-testimonial-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s ease; }
.tfm-testimonial-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.tfm-testimonial-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tfm-testimonial-prev { left: -14px; }
.tfm-testimonial-next { right: -14px; }
.tfm-testimonial-dots { position: absolute; bottom: 14px; }

/* ---------- Testimonial quote cards (mirrors WhatsApp review screenshots) ---------- */
.tfm-testimonial-carousel--cards { padding-bottom: 46px; }
.tfm-testimonial-carousel--cards .tfm-testimonial-dots { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; }
.tfm-testimonial-carousel--cards .tfm-hero-carousel-dot { background: var(--tfm-gray-medium); }
.tfm-testimonial-carousel--cards .tfm-hero-carousel-dot.active { background: var(--tfm-green); }
.tfm-testimonial-carousel--cards .tfm-testimonial-prev,
.tfm-testimonial-carousel--cards .tfm-testimonial-next { top: 40%; }
.tfm-testimonial-track--cards { aspect-ratio: auto; overflow: visible; background: transparent; box-shadow: none; border-radius: 0; }
.tfm-testimonial-track--cards .tfm-testimonial-slide { position: absolute; inset: 0; z-index: 0; }
.tfm-testimonial-track--cards .tfm-testimonial-slide.active { position: relative; z-index: 1; }
.tfm-testimonial-quote-card {
    background: var(--tfm-white);
    border-radius: var(--tfm-radius-lg);
    box-shadow: var(--tfm-shadow-md);
    padding: 40px 32px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tfm-testimonial-photo-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--tfm-radius-md); margin-bottom: 22px; background: var(--tfm-gray-light); }
.tfm-testimonial-product-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.tfm-testimonial-country {
    position: absolute; left: 12px; bottom: 12px;
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(15, 42, 26, 0.92); color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--tfm-radius-full);
    padding: 8px 13px; font-size: 0.78rem; font-weight: 700;
}
.tfm-testimonial-quote-mark {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 4rem;
    line-height: 1;
    color: var(--tfm-green);
    font-weight: 700;
    margin-bottom: 6px;
}
.tfm-testimonial-quote-text { font-size: 1.05rem; color: var(--tfm-text); line-height: 1.65; max-width: 480px; margin: 0 auto 24px; }
.tfm-testimonial-person { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.tfm-testimonial-track--cards .tfm-testimonial-avatar {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--tfm-green-light);
}
.tfm-testimonial-person-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.tfm-testimonial-name { font-family: var(--tfm-font-heading); font-weight: 700; color: var(--tfm-navy); font-size: 0.98rem; display: inline-flex; align-items: center; gap: 6px; }
.tfm-testimonial-verified { color: var(--tfm-green); font-size: 0.85rem; }
.tfm-testimonial-role { color: var(--tfm-text-muted); font-size: 0.82rem; }
.tfm-testimonial-stars { color: var(--tfm-orange); font-size: 0.8rem; letter-spacing: 2px; margin-top: 2px; }
.tfm-testimonial-product-label {
    display: block; width: 100%; margin-top: 22px; padding: 11px 14px;
    border: 1px solid rgba(23, 107, 58, 0.25); border-radius: var(--tfm-radius-md);
    background: var(--tfm-green-light); color: var(--tfm-text-muted);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
}
.tfm-testimonial-product-label strong { display: block; margin-top: 4px; color: var(--tfm-orange-dark); font-size: 0.88rem; letter-spacing: 0; text-transform: none; }

/* ---------- Recent deliveries carousel ---------- */
.tfm-recent-deliveries { margin-top: 36px; }
.tfm-recent-deliveries-label { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 0.8rem; font-weight: 700; color: var(--tfm-text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
.tfm-recent-deliveries-label i { color: var(--tfm-orange); }

.tfm-deliveries-carousel { position: relative; max-width: 920px; margin: 0 auto; }
.tfm-deliveries-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tfm-deliveries-track::-webkit-scrollbar { display: none; height: 0; }
.tfm-deliveries-slide { flex: 0 0 calc(33.333% - 10px); scroll-snap-align: start; scroll-snap-stop: always; }
.tfm-deliveries-slide img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
    border-radius: var(--tfm-radius-md); box-shadow: var(--tfm-shadow-sm);
    background: var(--tfm-gray-light);
}
.tfm-deliveries-prev { left: -18px; }
.tfm-deliveries-next { right: -18px; }
.tfm-deliveries-carousel .tfm-hero-carousel-arrow { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; }
.tfm-deliveries-carousel:hover .tfm-hero-carousel-arrow,
.tfm-deliveries-carousel:focus-within .tfm-hero-carousel-arrow { opacity: 1; visibility: visible; }
.tfm-deliveries-dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 16px; }
.tfm-deliveries-dots .tfm-hero-carousel-dot { background: var(--tfm-gray-medium); }
.tfm-deliveries-dots .tfm-hero-carousel-dot.active { background: var(--tfm-green); }

@media (max-width: 991px) {
    .tfm-deliveries-slide { flex-basis: calc(50% - 7px); }
}

@media (max-width: 767px) {
    .tfm-deliveries-slide { flex-basis: 78%; }
    .tfm-deliveries-carousel .tfm-hero-carousel-arrow { display: none; }
    .tfm-deliveries-prev { left: 6px; }
    .tfm-deliveries-next { right: 6px; }
}

/* ---------- Showcase video carousel ("See Us In Action") ---------- */
.tfm-video-carousel { position: relative; max-width: 380px; margin: 0 auto; }
.tfm-video-wrapper { position: relative; max-width: 380px; max-height: 640px; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: var(--tfm-radius-lg); overflow: hidden; box-shadow: var(--tfm-shadow-md); background: #000; }
.tfm-showcase-video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.tfm-video-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; z-index: 0; }
.tfm-video-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.tfm-video-carousel .tfm-hero-carousel-arrow { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; }
.tfm-video-carousel:hover .tfm-hero-carousel-arrow,
.tfm-video-carousel:focus-within .tfm-hero-carousel-arrow { opacity: 1; visibility: visible; }
.tfm-video-carousel-prev { left: 12px; }
.tfm-video-carousel-next { right: 12px; }
.tfm-video-carousel-dots { position: static; display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
.tfm-video-carousel-dots .tfm-hero-carousel-dot { background: var(--tfm-gray-medium); }
.tfm-video-carousel-dots .tfm-hero-carousel-dot.active { background: var(--tfm-green); width: 22px; }

@media (max-width: 767px) {
    .tfm-video-carousel .tfm-hero-carousel-arrow { display: none; }
}

/* ---------- Radio ad carousel ("Hear Us On Air") - mirrors the video carousel above, landscape aspect ---------- */
.tfm-radio-wrapper { max-width: 720px; max-height: none; aspect-ratio: 16 / 9; }
.tfm-radio-carousel .tfm-radio-carousel-prev { left: 12px; }
.tfm-radio-carousel .tfm-radio-carousel-next { right: 12px; }

@media (max-width: 767px) {
    .tfm-radio-carousel .tfm-hero-carousel-arrow { display: none; }
}

/* ---------- Livestock jukebox ("Select a Farm Video") ----------
   A dark green panel on the Farm Products branch of the shop: numbered
    playlist above the player. Every text colour here is
   declared explicitly rather than inherited, and the headings are repeated
   in the dark-surface legibility guard near the end of this file, because a
   host theme styling h2/h3/button would otherwise paint dark type onto a
   dark panel. */
.tfm-jukebox {
    margin: 0 0 28px;
    padding: 30px 26px 32px;
    border-radius: var(--tfm-radius-lg);
    background: linear-gradient(135deg, var(--tfm-green-dark) 0%, #123A22 55%, var(--tfm-navy) 100%);
    box-shadow: var(--tfm-shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.tfm-jukebox-hidden { display: none; }

.tfm-jukebox-head { text-align: center; margin-bottom: 26px; }
.tfm-jukebox-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--tfm-font-body);
    font-size: 0.74rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--tfm-orange);
    background: rgba(242, 140, 40, 0.14);
    border: 1px solid rgba(242, 140, 40, 0.42);
    border-radius: var(--tfm-radius-full);
    padding: 6px 15px; margin-bottom: 12px;
}
.tfm-jukebox-title {
    color: #fff;
    font-size: clamp(1.6rem, 3.6vw, 2.3rem);
    text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 8px;
}
.tfm-jukebox-sub { color: #C8DCD0; font-size: 0.94rem; max-width: 560px; margin: 0 auto; }

.tfm-jukebox-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }

.tfm-jukebox-list { display: flex; flex-direction: column; gap: 10px; }
.tfm-jukebox-slot {
    display: flex; align-items: center; gap: 16px; width: 100%;
    padding: 15px 18px; text-align: left;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-left: 3px solid transparent;
    border-radius: var(--tfm-radius-md);
    transition: var(--tfm-transition);
}
.tfm-jukebox-slot:hover,
.tfm-jukebox-slot:focus-visible {
    background: rgba(255, 255, 255, 0.11);
    border-left-color: var(--tfm-orange);
    transform: translateX(3px);
}
.tfm-jukebox-slot.active {
    background: rgba(242, 140, 40, 0.16);
    border-color: rgba(242, 140, 40, 0.5);
    border-left-color: var(--tfm-orange);
}
.tfm-jukebox-slot-num {
    flex-shrink: 0;
    font-family: var(--tfm-font-heading);
    font-size: 1.5rem; font-weight: 700; line-height: 1;
    color: var(--tfm-orange);
    min-width: 34px;
}
.tfm-jukebox-slot-label {
    flex: 1; min-width: 0;
    color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.3;
}
.tfm-jukebox-slot-play {
    flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff; font-size: 0.7rem;
    transition: var(--tfm-transition);
}
.tfm-jukebox-slot.active .tfm-jukebox-slot-play,
.tfm-jukebox-slot:hover .tfm-jukebox-slot-play { background: var(--tfm-orange); color: #fff; }

.tfm-jukebox-screen {
    position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: 560px;
    border-radius: var(--tfm-radius-md); overflow: hidden;
    background: #000; box-shadow: var(--tfm-shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.tfm-jukebox-video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.tfm-jukebox-now {
    display: flex; flex-direction: column; gap: 3px;
    margin-top: 14px; text-align: center;
}
.tfm-jukebox-now-label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--tfm-orange);
}
.tfm-jukebox-now-title { color: #fff; font-size: 1.02rem; font-weight: 600; line-height: 1.35; }

@media (max-width: 900px) {
    .tfm-jukebox-body { gap: 22px; }
    .tfm-jukebox-screen { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 575px) {
    .tfm-jukebox { padding: 24px 16px 26px; }
    .tfm-jukebox-slot { padding: 13px 14px; gap: 12px; }
    .tfm-jukebox-slot-label { font-size: 0.93rem; }
    .tfm-jukebox-slot-num { font-size: 1.3rem; min-width: 28px; }
}

/* ---------- Opening hours (footer + contact page) ----------
   One markup shape used on a dark footer and on a light contact card, so the
   colours are set per context rather than on the shared classes. */
.tfm-footer-hours-title { margin-top: 24px; display: flex; align-items: center; gap: 8px; }
.tfm-footer-hours-title i { color: var(--tfm-orange); }
.tfm-footer-hours li {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px;
    font-size: 0.84rem; line-height: 1.45;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.tfm-footer-hours li:last-child { border-bottom: 0; }
.tfm-footer-hours .tfm-hours-days { color: #C8DCD0; font-weight: 600; }
.tfm-footer-hours .tfm-hours-time { color: #A6B8AC; }
.tfm-footer-hours .tfm-hours-time-always { color: var(--tfm-orange); font-weight: 700; }

.tfm-hours-list { margin: 4px 0 10px; }
.tfm-hours-list li {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px;
    padding: 6px 0; font-size: 0.9rem; line-height: 1.45;
    border-bottom: 1px dashed var(--tfm-gray);
}
.tfm-hours-list li:last-child { border-bottom: 0; }
.tfm-hours-list .tfm-hours-days { color: var(--tfm-text); font-weight: 600; }
.tfm-hours-list .tfm-hours-time { color: var(--tfm-text-light); }
.tfm-hours-list .tfm-hours-time-always { color: var(--tfm-green); font-weight: 700; }
.tfm-contact-card-hours .tfm-contact-info-icon { background: var(--tfm-green); color: #fff; }

@media (max-width: 767px) {
    .tfm-testimonial-quote-card { padding: 32px 20px 24px; }
    .tfm-testimonial-quote-text { font-size: 0.96rem; }
}

/* ---------- CEO message (large photo, side-by-side) ---------- */
.tfm-ceo-section { background: var(--tfm-navy); overflow: hidden; }
.tfm-ceo-wrapper { display: flex; align-items: center; gap: 48px; }
.tfm-ceo-photo-col { flex: 0 0 380px; display: flex; justify-content: center; }
.tfm-ceo-photo-frame { position: relative; width: 100%; max-width: 380px; border-radius: var(--tfm-radius-lg); overflow: hidden; box-shadow: var(--tfm-shadow-lg); border: 5px solid var(--tfm-orange); aspect-ratio: 3 / 4; }
.tfm-ceo-photo-lg { width: 100%; height: 100%; object-fit: cover; display: block; }
.tfm-ceo-content-col { flex: 1 1 380px; min-width: 280px; color: #fff; }
.tfm-ceo-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--tfm-font-heading); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--tfm-orange); margin-bottom: 18px; }
.tfm-ceo-quote-lg { font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.65; color: #EEF3EF; margin-bottom: 22px; }
.tfm-ceo-signature { border-left: 3px solid var(--tfm-orange); padding-left: 16px; display: flex; flex-direction: column; gap: 3px; }
.tfm-ceo-name-lg { font-family: var(--tfm-font-heading); font-weight: 800; font-size: 1.1rem; color: #fff; }
.tfm-ceo-role-lg { font-size: 0.85rem; color: #A9BFB0; }
.tfm-ceo-phone-lg { font-size: 0.85rem; color: #DCEAE1; }
.tfm-ceo-phone-lg a { color: var(--tfm-orange); font-weight: 700; }

@media (max-width: 860px) {
    .tfm-ceo-wrapper { flex-direction: column; text-align: center; gap: 28px; }
    .tfm-ceo-photo-col { flex-basis: auto; }
    .tfm-ceo-photo-frame { max-width: 280px; margin: 0 auto; }
    .tfm-ceo-signature { border-left: none; border-top: 3px solid var(--tfm-orange); padding-left: 0; padding-top: 12px; align-items: center; }
    .tfm-ceo-eyebrow { justify-content: center; }
}

/* ---------- Lipa Mdogo terms grid ---------- */
.tfm-lipa-terms-grid { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 32px; }
.tfm-lipa-term-card { background: #fff; border: 1px solid var(--tfm-gray); border-radius: var(--tfm-radius-lg); padding: 22px 20px; flex: 1 1 calc(33.333% - 12px); min-width: 220px; }
.tfm-lipa-term-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--tfm-green-light); color: var(--tfm-green-dark); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 14px; }
.tfm-lipa-term-card h4 { font-size: 0.95rem; margin-bottom: 8px; }
.tfm-lipa-term-card p { font-size: 0.84rem; color: var(--tfm-text-light); line-height: 1.55; }
.tfm-terms-wrapper-compact { max-width: 320px; }

@media (max-width: 860px) {
    .tfm-lipa-term-card { flex-basis: calc(50% - 9px); }
}
@media (max-width: 560px) {
    .tfm-lipa-term-card { flex-basis: 100%; }
}

/* ---------- Terms & Conditions ---------- */
.tfm-terms-wrapper { max-width: 420px; margin: 0 auto; }
.tfm-terms-image-trigger { position: relative; display: block; width: 100%; border: none; padding: 0; border-radius: var(--tfm-radius-lg); overflow: hidden; box-shadow: var(--tfm-shadow-md); cursor: pointer; }
.tfm-terms-image-trigger img { width: 100%; height: auto; display: block; }
.tfm-terms-zoom-hint { position: absolute; inset: auto 0 0 0; background: linear-gradient(0deg, rgba(15,42,26,0.85), transparent); color: #fff; font-size: 0.78rem; font-weight: 700; padding: 20px 12px 10px; text-align: center; }
.tfm-lightbox-overlay { position: fixed; inset: 0; background: rgba(9,26,16,0.85); z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; }
.tfm-lightbox-overlay.active { opacity: 1; visibility: visible; }
.tfm-lightbox-overlay img { max-width: 100%; max-height: 90vh; border-radius: var(--tfm-radius-md); box-shadow: var(--tfm-shadow-lg); }
.tfm-lightbox-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 1.6rem; line-height: 1; }
.tfm-lightbox-close:hover { background: rgba(255,255,255,0.28); }

/* ============================================
   RESPONSIVE (additions)
   ============================================ */
@media (max-width: 767px) {
    .tfm-bottom-nav { display: flex; }
    .tfm-whatsapp-float { display: none; }
    .tfm-body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
    .tfm-shop-resultbar { padding: 10px 0; }
    .tfm-modal-gallery-stage { aspect-ratio: 1 / 1; }

    /* Quick View becomes a bottom sheet on mobile - easier to reach with a thumb */
    .tfm-modal-overlay { align-items: flex-end; padding: 0; }
    .tfm-modal { max-width: none; width: 100%; max-height: 85vh; border-radius: var(--tfm-radius-lg) var(--tfm-radius-lg) 0 0; transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom, 0px); }
    .tfm-modal-overlay.active .tfm-modal { transform: translateY(0); }
    .tfm-modal::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 4px; background: var(--tfm-gray-medium); z-index: 2; }
    .tfm-modal-close { top: 20px; }
    .tfm-modal-info { padding-top: 26px; }

    /* Larger, thumb-friendly tap targets throughout */
    .tfm-filter-btn, .tfm-shop-filter-toggle { min-height: 44px; }
    .tfm-plan-tab { min-height: 52px; }
}

@media (max-width: 420px) {
    .tfm-modal { max-height: 90vh; }
}

@media (min-width: 640px) {
    .tfm-stats-grid { grid-template-columns: repeat(4, 1fr); }
    .tfm-modal-body { flex-direction: row; }
    .tfm-modal-gallery { width: 45%; flex-shrink: 0; }
    .tfm-modal-gallery-stage { aspect-ratio: auto; height: 100%; }
    .tfm-modal-info { width: 55%; }
}

@media (max-width: 991px) {
    .tfm-mobile-menu-backdrop {
        position: fixed; inset: 0; background: rgba(9,26,16,0.55); backdrop-filter: blur(2px);
        z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease;
    }
    .tfm-mobile-menu-backdrop.active { opacity: 1; visibility: visible; }
    .tfm-nav-menu {
        position: fixed; top: 0; right: -100%; width: 78%; max-width: 320px; height: 100vh;
        background: var(--tfm-navy);
        flex-direction: column; align-items: stretch; justify-content: flex-start;
        padding: 100px 20px 24px; overflow-y: auto;
        box-shadow: -10px 0 40px rgba(0,0,0,0.25); border-left: 1px solid rgba(255,255,255,0.08);
        transition: right 0.35s ease; z-index: 1000; gap: 2px;
    }
    .tfm-nav-menu.active { right: 0; }
    .tfm-nav-link { display: block; padding: 14px 16px; color: var(--tfm-orange) !important; border-radius: var(--tfm-radius-sm); position: relative; z-index: 1; font-weight: 600; background: transparent; }
    .tfm-nav-link:hover { color: var(--tfm-orange) !important; background: rgba(255,255,255,0.12); }
    .tfm-nav-link.active { color: #ffffff !important; background: var(--tfm-green); font-weight: 700; box-shadow: 0 4px 14px rgba(23,107,58,0.4); }
    .tfm-mobile-toggle { display: flex; }
    .tfm-nav-cta { display: none; }
    .tfm-nav-item { position: relative; z-index: 1; }
    .tfm-topbar-item span { display: none; }
    .tfm-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
    .tfm-container { padding: 0 16px; }
    .tfm-topbar-inner { justify-content: flex-end; }
    .tfm-topbar-item { display: none; }
    /* On small screens the copy sits on a plain white top band (best contrast,
       zero reliance on the photo underneath); the machine photo + its
       crossfade/zoom motion fill the lower portion of the hero. */
    .tfm-hero { min-height: 560px; align-items: flex-start; }
    /* Confine the sharp photo to the reserved strip at the bottom of the hero
       (matches tfm-hero-container's padding-bottom below) so it can never
       climb up over the badge/heading/tagline, regardless of image aspect ratio. */
    /* Give the photo its own full-height slot, clearly above the feature
       section below it (only a small cosmetic tuck, not a real overlap). */
    .tfm-hero-slide img { top: auto; bottom: 0; left: 0; right: 0; height: 280px; width: 100%; object-position: center center; }
    .tfm-hero-slide-overlay { background: linear-gradient(to bottom, #fff 0%, #fff 55%, rgba(255,255,255,0.82) 60%, rgba(255,255,255,0.25) 65%, rgba(255,255,255,0) 70%) !important; }
    .tfm-hero-slide-overlay::after { display: none; }
    .tfm-hero-container { padding-top: 28px; padding-bottom: 280px; text-align: center; }
    .tfm-hero-panel { max-width: none; width: 100%; margin: 0 auto; }
    .tfm-hero-badge { margin-bottom: 12px; font-size: 0.72rem; padding: 6px 13px; }
    .tfm-hero-title { margin-bottom: 10px; font-size: clamp(1.5rem, 6.5vw, 2rem); }
    .tfm-hero-tagline { margin-left: auto; margin-right: auto; margin-bottom: 18px; font-size: 0.9rem; }
    .tfm-hero-actions { margin-bottom: 0; gap: 10px; }
    .tfm-hero-actions { justify-content: center; }
    .tfm-hero-actions .tfm-btn { flex: 0 1 auto; padding: 12px 18px; font-size: 0.86rem; white-space: nowrap; }
    .tfm-hero-carousel-arrow { width: 32px; height: 32px; font-size: 0.75rem; top: auto; bottom: 140px; transform: none; }
    #tfm-hero-carousel .tfm-hero-carousel-dots { bottom: 28px; }
    .tfm-hero-feature-bar { margin-top: -16px; position: relative; z-index: 6; }
    .tfm-hero-feature-card { flex-direction: column; padding: 14px 16px; gap: 2px; }
    .tfm-hero-feature-item { border-left: none !important; padding: 9px 4px; }
    .tfm-hero-feature-item + .tfm-hero-feature-item { border-top: 1px solid var(--tfm-gray); }
    .tfm-testimonial-prev { left: 8px; }
    .tfm-testimonial-next { right: 8px; }
    .tfm-section { padding: 48px 0; }
    .tfm-category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .tfm-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .tfm-product-name { font-size: 0.84rem; min-height: 2.3em; }
    .tfm-features-grid { grid-template-columns: 1fr; }
    .tfm-footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .tfm-lipa-summary-grid { grid-template-columns: 1fr; }
    .tfm-lipa-product-row { flex-direction: row; }
    .tfm-testimonial-quote-card { padding: 18px 16px 20px; }
    .tfm-testimonial-photo-wrap { margin-bottom: 18px; }
    .tfm-testimonial-quote-text { font-size: 0.94rem; }
    .tfm-cta-buttons .tfm-btn { width: 100%; }
    .tfm-form-row { grid-template-columns: 1fr; }
}

@media (min-width: 640px) {
    .tfm-form-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
    .tfm-hero { min-height: 600px; }
    .tfm-hero-container { padding-top: 70px; padding-bottom: 90px; }
    .tfm-category-grid { grid-template-columns: repeat(4, 1fr); }
    .tfm-product-grid { grid-template-columns: repeat(3, 1fr); }
    .tfm-features-grid { grid-template-columns: repeat(4, 1fr); }
    .tfm-contact-grid { grid-template-columns: 1.4fr 1fr; }
}

@media (min-width: 1024px) {
    .tfm-product-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 420px) {
    .tfm-category-grid { grid-template-columns: repeat(2, 1fr); }
    .tfm-product-grid { grid-template-columns: repeat(2, 1fr); }
    .tfm-product-actions .tfm-btn { font-size: 0.76rem; padding: 9px 10px; }
}

/* ============================================
   LOGO IMAGE STYLES
   Logo is 1024x1024 (square), so we constrain
   inside a fixed-dimension container to match
   the reference site (timizaagro.co.ke) sizing.
   ============================================ */

/* ---- Header nav logo (logo3 is 1536x1024, 3:2 ratio) ---- */
.tfm-logo-img-wrap { padding: 2px 0; }
.tfm-logo-img-container {
    display: flex;
    align-items: center;
    height: 46px;
    width: auto;
    max-width: 140px;
    flex-shrink: 0;
    overflow: hidden;
}
.tfm-logo-img {
    height: 46px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    display: block;
}

/* ---- Footer logo ---- */
.tfm-footer-logo a { display: inline-block; }
.tfm-footer-logo-img-container {
    display: flex;
    align-items: center;
    height: 52px;
    width: auto;
    max-width: 160px;
    overflow: hidden;
    background: rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 6px 10px;
}
.tfm-footer-logo-img {
    height: 40px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    display: block;
}

/* ---- Page-hero logo (shop, lipa-mdogo pages) ---- */
.tfm-page-hero-logo { display: flex; justify-content: center; margin-bottom: 16px; }
.tfm-page-logo-img-container {
    height: 56px;
    width: auto;
    max-width: 180px;
    overflow: hidden;
    background: rgba(255,255,255,0.92);
    border-radius: 8px;
    padding: 6px 12px;
}
.tfm-page-logo-img {
    height: 44px;
    width: auto;
    max-width: 156px;
    object-fit: contain;
    display: block;
}

/* ---- Section logo (lipa mdogo terms on homepage) ---- */
.tfm-section-logo-wrap { display: flex; justify-content: center; margin-bottom: 12px; }
.tfm-section-logo-img-container {
    height: 52px;
    width: auto;
    max-width: 170px;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    padding: 5px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.tfm-section-logo-img {
    height: 42px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    display: block;
}

/* ============================================
   SOCIAL ICONS - DEFAULT BRAND COLORS
   ============================================ */
.tfm-social-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: var(--tfm-transition); color: #fff !important; }
.tfm-social-facebook { background: #1877F2 !important; }
.tfm-social-facebook:hover { background: #0d5abf !important; transform: translateY(-3px); }
.tfm-social-tiktok { background: #010101 !important; }
.tfm-social-tiktok:hover { background: #333 !important; transform: translateY(-3px); }
.tfm-social-whatsapp { background: #25D366 !important; }
.tfm-social-whatsapp:hover { background: #1abe5a !important; transform: translateY(-3px); }

/* ============================================
   LIPA MDOGO FEATURE IMAGE
   ============================================ */
.tfm-lipa-feature-img-wrap { width: 100%; margin-bottom: 24px; border-radius: var(--tfm-radius-lg); overflow: hidden; box-shadow: var(--tfm-shadow-md); }
.tfm-lipa-feature-img { width: 100%; height: auto; display: block; object-fit: cover; border-radius: var(--tfm-radius-lg); }

/* ============================================
   SHOP NOW BUTTON - ENSURE ORANGE EVERYWHERE
   ============================================ */
.tfm-btn-accent { background: var(--tfm-orange) !important; color: #fff !important; border-color: var(--tfm-orange) !important; }
.tfm-btn-accent:hover { background: var(--tfm-orange-dark) !important; border-color: var(--tfm-orange-dark) !important; transform: translateY(-2px); }

/* ============================================
   FOOTER CONTACT - MULTIPLE PHONES
   ============================================ */
.tfm-footer-contact li span { line-height: 1.4; }
.tfm-footer-contact li a { color: #C8DCD0; }
.tfm-footer-contact li a:hover { color: var(--tfm-orange); }

/* ============================================
   MOBILE ADJUSTMENTS FOR LOGO
   ============================================ */
@media (max-width: 768px) {
    .tfm-logo-img-container { height: 36px; max-width: 110px; }
    .tfm-logo-img { height: 36px; max-width: 110px; }
    .tfm-footer-logo-img-container { height: 44px; max-width: 130px; padding: 5px 8px; }
    .tfm-footer-logo-img { height: 34px; max-width: 114px; }
    .tfm-page-logo-img-container { height: 46px; max-width: 150px; }
    .tfm-page-logo-img { height: 34px; max-width: 130px; }
    .tfm-section-logo-img-container { height: 44px; max-width: 140px; }
    .tfm-section-logo-img { height: 34px; max-width: 120px; }
}


/* ============================================
   HOME — DUAL POSTER ROW
   Side-by-side on desktop, stacked (Lipa Mdogo2 on top) on mobile
   ============================================ */
.tfm-home-posters-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 32px;
    align-items: start;
}

.tfm-home-poster-wrap {
    width: 100%;
}

/* Each poster button inherits the existing tfm-terms-wrapper style
   but stretches to fill its grid cell */
.tfm-home-poster-wrap .tfm-terms-image-trigger {
    width: 100%;
    display: block;
    position: relative;
    border-radius: var(--tfm-radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: var(--tfm-shadow-md);
    transition: var(--tfm-transition);
}

.tfm-home-poster-wrap .tfm-terms-image-trigger:hover {
    transform: translateY(-3px);
    box-shadow: var(--tfm-shadow-lg);
}

.tfm-home-poster-wrap .tfm-terms-image-trigger img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--tfm-radius-lg);
}

.tfm-home-poster-wrap .tfm-terms-zoom-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.55));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 18px 12px 10px;
    text-align: center;
    border-radius: 0 0 var(--tfm-radius-lg) var(--tfm-radius-lg);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tfm-home-poster-wrap .tfm-terms-image-trigger:hover .tfm-terms-zoom-hint,
.tfm-home-poster-wrap .tfm-terms-image-trigger:focus .tfm-terms-zoom-hint {
    opacity: 1;
}

/* Mobile: stack vertically, Lipa Mdogo2 above Terms */
@media (max-width: 640px) {
    .tfm-home-posters-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ============================================
   v1.9.0 ADDITIONS
   Homepage search, facility gallery, Lipa Mdogo
   terms restyle, deposit scheduling, and styles
   for sections that previously had markup but
   no rules of their own.
   ============================================ */

:root {
    --tfm-amber: #C2760B;
    --tfm-amber-light: #FEF4E4;
    --tfm-alert: #B3401F;
    --tfm-alert-light: #FCEDE8;
}

/* --------------------------------------------
   HOMEPAGE SEARCH BAND
   -------------------------------------------- */
.tfm-home-search-band {
    background: linear-gradient(180deg, var(--tfm-green-light) 0%, #fff 100%);
    border-bottom: 1px solid var(--tfm-gray);
    padding: 28px 0 26px;
}

.tfm-home-search { position: relative; max-width: 720px; margin: 0 auto; }

.tfm-home-search-label {
    display: block;
    text-align: center;
    font-family: var(--tfm-font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--tfm-navy);
    margin-bottom: 12px;
}

.tfm-home-search-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid var(--tfm-gray-medium);
    border-radius: var(--tfm-radius-full);
    padding: 6px 6px 6px 44px;
    box-shadow: var(--tfm-shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tfm-home-search-field:focus-within {
    border-color: var(--tfm-green);
    box-shadow: 0 0 0 3px rgba(23,107,58,0.14);
}
.tfm-home-search-field > i {
    position: absolute;
    left: 17px;
    color: var(--tfm-text-muted);
    pointer-events: none;
}
.tfm-home-search-field input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    color: var(--tfm-text);
    padding: 10px 0;
    min-height: 40px;
}
.tfm-home-search-field input:focus { outline: none; }
.tfm-home-search-field input::-webkit-search-cancel-button { display: none; }

.tfm-home-search-btn { flex-shrink: 0; padding: 11px 24px; border-radius: var(--tfm-radius-full); }

/* Suggestion dropdown */
.tfm-home-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--tfm-gray);
    border-radius: var(--tfm-radius-lg);
    box-shadow: var(--tfm-shadow-lg);
    overflow: hidden;
    z-index: 60;
    display: none;
}
.tfm-home-search-results.active { display: block; }

.tfm-home-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--tfm-gray-light);
    text-align: left;
    transition: background 0.15s ease;
}
.tfm-home-search-result:last-child { border-bottom: none; }
.tfm-home-search-result:hover,
.tfm-home-search-result.active { background: var(--tfm-green-light); }

.tfm-home-search-result img,
.tfm-home-search-noimg {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--tfm-radius-sm);
    object-fit: cover;
    background: var(--tfm-gray-light);
}
.tfm-home-search-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tfm-text-muted);
}
.tfm-home-search-result-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tfm-home-search-result-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--tfm-navy);
    line-height: 1.35;
}
.tfm-home-search-result-meta { font-size: 0.76rem; color: var(--tfm-text-muted); }
.tfm-home-search-none { padding: 16px; font-size: 0.86rem; color: var(--tfm-text-light); text-align: center; }

.tfm-home-search-shortcuts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.8rem;
    color: var(--tfm-text-muted);
}
.tfm-home-search-shortcuts a {
    background: #fff;
    border: 1px solid var(--tfm-gray-medium);
    border-radius: var(--tfm-radius-full);
    padding: 5px 13px;
    font-weight: 600;
    color: var(--tfm-text-light);
}
.tfm-home-search-shortcuts a:hover { border-color: var(--tfm-green); color: var(--tfm-green); background: var(--tfm-green-light); }

@media (max-width: 560px) {
    .tfm-home-search-field { padding-left: 40px; flex-wrap: wrap; }
    .tfm-home-search-btn { width: 100%; margin-top: 4px; }
}

/* --------------------------------------------
   LIPA MDOGO TERMS SECTION (restyled)
   -------------------------------------------- */
.tfm-terms-section {
    background:
        radial-gradient(circle at 12% 0%, rgba(23,107,58,0.07), transparent 45%),
        radial-gradient(circle at 88% 10%, rgba(242,140,40,0.08), transparent 45%),
        var(--tfm-gray-light);
    border-top: 1px solid var(--tfm-gray);
}

.tfm-terms-header { max-width: 660px; }
.tfm-terms-header h2 { position: relative; padding-bottom: 14px; }
.tfm-terms-header h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: var(--tfm-orange);
}

/* Closing help row */
.tfm-terms-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--tfm-gray);
    border-radius: var(--tfm-radius-lg);
    padding: 18px 22px;
    box-shadow: var(--tfm-shadow-sm);
}
.tfm-terms-help-text {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--tfm-text);
}
.tfm-terms-help-text i { color: var(--tfm-orange); font-size: 1.15rem; flex-shrink: 0; }

@media (max-width: 560px) {
    .tfm-terms-help { flex-direction: column; align-items: stretch; text-align: center; }
    .tfm-terms-help-text { justify-content: center; }
}

/* --------------------------------------------
   SHOP - ALWAYS-VISIBLE SEARCH + EMPTY STATE
   -------------------------------------------- */
.tfm-shop-searchbar { margin-bottom: 4px; }
.tfm-shop-search-primary { margin-top: 0; margin-bottom: 0; }
.tfm-shop-search-primary input { padding-right: 46px; box-shadow: var(--tfm-shadow-sm); }
.tfm-shop-search-primary input::-webkit-search-cancel-button { display: none; }

.tfm-shop-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: var(--tfm-gray-light);
    color: var(--tfm-text-light);
    font-size: 1.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tfm-shop-search-clear:hover { background: var(--tfm-gray); color: var(--tfm-text); }
.tfm-shop-search-clear[hidden] { display: none; }

.tfm-shop-empty {
    max-width: 480px;
    margin: 20px auto 0;
    padding: 34px 24px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--tfm-gray);
    border-radius: var(--tfm-radius-lg);
    box-shadow: var(--tfm-shadow-sm);
}
.tfm-shop-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--tfm-green-light);
    color: var(--tfm-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.tfm-shop-empty h3 { font-size: 1.05rem; margin-bottom: 8px; }
.tfm-shop-empty p { font-size: 0.88rem; color: var(--tfm-text-light); margin-bottom: 20px; }
.tfm-shop-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* --------------------------------------------
   PREVIOUSLY UNSTYLED SECTIONS
   -------------------------------------------- */

/* Shop section: keep the grid clear of the sticky bottom nav on mobile */
.tfm-shop-section { padding-top: 28px; }

/* Video / radio showcase sections */
.tfm-video-section .tfm-video-wrapper,
.tfm-radio-section .tfm-radio-wrapper {
    border-radius: var(--tfm-radius-lg);
    overflow: hidden;
    box-shadow: var(--tfm-shadow-md);
    background: var(--tfm-navy);
}
.tfm-video-carousel-dots,
.tfm-radio-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

/* Quick View gallery arrows */
.tfm-gallery-prev,
.tfm-gallery-next {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tfm-gallery-prev:hover,
.tfm-gallery-next:hover { background: #fff; color: var(--tfm-green); }

/* Homepage poster triggers */
.tfm-home-poster-trigger { cursor: zoom-in; }

/* Lipa Mdogo / Shop Now form cards */
.tfm-lipa-form-card { padding: 24px 22px; }
.tfm-lipa-form-header { margin-bottom: 20px; }
.tfm-lipa-form-header h3 { font-size: 1.08rem; margin-bottom: 6px; }
.tfm-lipa-form-header p { font-size: 0.86rem; color: var(--tfm-text-light); line-height: 1.55; }
.tfm-lipa-form .tfm-form-row { margin-bottom: 0; }
.tfm-lipa-form .tfm-form-group:last-of-type { margin-bottom: 20px; }

/* Contact page */
.tfm-contact-form { margin-top: 4px; }
.tfm-contact-form .tfm-form-row { margin-bottom: 0; }
.tfm-contact-info-wrapper { display: flex; flex-direction: column; }
.tfm-contact-info-wrapper .tfm-contact-info-card:last-child { margin-bottom: 0; }

@media (min-width: 992px) {
    .tfm-contact-info-wrapper { position: sticky; top: 100px; align-self: start; }
}

/* Footer structure */
.tfm-footer-top { padding-top: 4px; }
.tfm-footer-col { min-width: 0; }
.tfm-footer-company { max-width: 380px; }
.tfm-footer-company .tfm-footer-desc { max-width: 46ch; }

@media (max-width: 991px) {
    .tfm-footer-company { max-width: none; }
}

/* --------------------------------------------
   ACCESSIBILITY BASELINE
   -------------------------------------------- */
.tfm-body a:focus-visible,
.tfm-body button:focus-visible,
.tfm-body input:focus-visible,
.tfm-body select:focus-visible,
.tfm-body textarea:focus-visible {
    outline: 3px solid var(--tfm-orange);
    outline-offset: 2px;
}

.tfm-input-error { border-color: var(--tfm-alert) !important; }

@media (prefers-reduced-motion: reduce) {
    .tfm-body *,
    .tfm-body *::before,
    .tfm-body *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .tfm-facility-card:hover,
    .tfm-lipa-term-card:hover { transform: none; }
    .tfm-facility-card .tfm-facility-trigger:hover img { transform: none; }
}

/* ============================================
   v1.10.0 - COMPONENTS MIRRORED FROM TIMIZA AGRO
   Same structure and behaviour, rendered in the
   Timiza Farm palette (deep green / navy / amber
   orange) with its own header, accent bars and
   card shapes so the two storefronts stay
   visually distinct.
   ============================================ */

/* --------------------------------------------
   ORDER & PAYMENT TERMS CARD
   -------------------------------------------- */
.tfm-tc-card {
    max-width: 940px;
    margin: 0 auto 24px;
    background: #fff;
    border: 1px solid var(--tfm-gray);
    border-radius: var(--tfm-radius-lg);
    box-shadow: var(--tfm-shadow-md);
    overflow: hidden;
}

/* Farm uses a solid gradient header band rather than Agro's ruled header */
.tfm-tc-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 26px;
    background: linear-gradient(120deg, var(--tfm-navy) 0%, var(--tfm-green-dark) 60%, var(--tfm-green) 100%);
}
.tfm-tc-card-logo {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--tfm-radius-md);
    background: #fff;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--tfm-shadow-sm);
}
.tfm-tc-card-logo img { width: 100%; height: 100%; object-fit: contain; }
.tfm-tc-card-header-text h3 { color: #fff; font-size: 1.12rem; margin-bottom: 3px; }
.tfm-tc-card-header-text span { display: block; font-size: 0.82rem; color: #C8DCD0; line-height: 1.45; }

.tfm-tc-body { padding: 26px; }

/* Plans: white cards with a top accent bar, not Agro's tinted fills */
.tfm-tc-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 28px; }
.tfm-tc-plan {
    position: relative;
    background: #fff;
    border: 1px solid var(--tfm-gray);
    border-top: 4px solid var(--tfm-green);
    border-radius: var(--tfm-radius-md);
    padding: 22px 20px;
    box-shadow: var(--tfm-shadow-sm);
}
.tfm-tc-plan-accent { border-top-color: var(--tfm-orange); }

.tfm-tc-plan-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--tfm-radius-md);
    background: var(--tfm-green-light);
    color: var(--tfm-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 14px;
}
.tfm-tc-plan-accent .tfm-tc-plan-icon { background: var(--tfm-orange-light); color: var(--tfm-orange-dark); }

.tfm-tc-plan-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: var(--tfm-green-dark);
    background: var(--tfm-green-light);
    padding: 4px 11px;
    border-radius: var(--tfm-radius-full);
    margin-bottom: 10px;
}
.tfm-tc-plan-accent .tfm-tc-plan-tag { color: var(--tfm-orange-dark); background: var(--tfm-orange-light); }
.tfm-tc-plan h4 { font-size: 0.98rem; margin-bottom: 12px; color: var(--tfm-navy); line-height: 1.4; }

.tfm-tc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.tfm-tc-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; color: var(--tfm-text-light); line-height: 1.55; }
.tfm-tc-list li i { color: var(--tfm-green); margin-top: 4px; flex-shrink: 0; font-size: 0.78rem; }
.tfm-tc-plan-accent .tfm-tc-list li i { color: var(--tfm-orange-dark); }
.tfm-tc-list-warn { color: var(--tfm-alert) !important; font-weight: 600; }
.tfm-tc-list-warn i { color: var(--tfm-alert) !important; }

.tfm-tc-plan-note {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--tfm-gray-medium);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--tfm-green-dark);
    line-height: 1.5;
}

.tfm-tc-section { margin-bottom: 26px; }
.tfm-tc-section:last-child { margin-bottom: 0; }
.tfm-tc-section h4 { display: flex; align-items: center; gap: 9px; font-size: 0.98rem; color: var(--tfm-navy); margin-bottom: 10px; }
.tfm-tc-section h4 i { color: var(--tfm-orange); }
.tfm-tc-section-sub { font-size: 0.86rem; color: var(--tfm-text-muted); margin: 0 0 14px; }
.tfm-tc-section-sub-tight { margin: 12px 0 0; }

/* Keep the homepage payment details visually aligned with the trust strip. */
.tfm-tc-payment-section {
    background: var(--tfm-navy);
    border-bottom: 3px solid var(--tfm-orange);
    padding: 18px;
    margin-left: -22px;
    margin-right: -22px;
}
.tfm-tc-payment-section h4 { color: #fff; }
.tfm-tc-payment-section .tfm-tc-section-sub,
.tfm-tc-payment-section .tfm-tc-section-sub-tight { color: #C8DCD0; }
.tfm-tc-payment-section .tfm-tc-paybill-item { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
.tfm-tc-payment-section .tfm-tc-paybill-item span { color: var(--tfm-orange); }
.tfm-tc-payment-section .tfm-tc-paybill-item strong { color: #fff; }

.tfm-tc-paybill { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tfm-tc-paybill-item {
    background: var(--tfm-green-light);
    border: 1px solid rgba(23,107,58,0.16);
    border-radius: var(--tfm-radius-md);
    padding: 13px 16px;
}
.tfm-tc-paybill-item span {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--tfm-green-dark);
    margin-bottom: 4px;
}
.tfm-tc-paybill-item strong { font-size: 1.02rem; font-weight: 800; color: var(--tfm-navy); line-height: 1.25; }

.tfm-tc-chip-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.tfm-tc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid var(--tfm-gray-medium);
    color: var(--tfm-text);
    font-size: 0.84rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--tfm-radius-full);
}
.tfm-tc-chip i { color: var(--tfm-green); }

.tfm-tc-notes-list { grid-template-columns: repeat(2, 1fr); }

.tfm-tc-footer {
    padding: 20px 26px;
    background: var(--tfm-gray-light);
    border-top: 1px solid var(--tfm-gray);
    text-align: center;
}
.tfm-tc-footer strong {
    display: block;
    font-family: var(--tfm-font-heading);
    font-size: 1.05rem;
    color: var(--tfm-navy);
    margin-bottom: 4px;
}
.tfm-tc-footer span { display: block; font-size: 0.86rem; font-style: italic; color: var(--tfm-text-muted); }

@media (max-width: 760px) {
    .tfm-tc-body { padding: 20px 16px; }
    .tfm-tc-card-header { padding: 16px 18px; }
    .tfm-tc-plans { grid-template-columns: 1fr; }
    .tfm-tc-notes-list { grid-template-columns: 1fr; }
    .tfm-tc-paybill { grid-template-columns: 1fr; }
}

/* --------------------------------------------
   PAYMENT SCHEDULE - "Pay Now" / "Select a Later Date"
   -------------------------------------------- */
.tfm-paysched {
    --tfm-ps-accent: var(--tfm-green);
    --tfm-ps-accent-dark: var(--tfm-green-dark);
    --tfm-ps-accent-soft: var(--tfm-green-light);
    border: 1px solid var(--tfm-gray);
    border-radius: var(--tfm-radius-lg);
    background: #fff;
    padding: 18px;
    margin: 4px 0 0;
    box-shadow: var(--tfm-shadow-sm);
}
.tfm-paysched--orange {
    --tfm-ps-accent: var(--tfm-orange);
    --tfm-ps-accent-dark: var(--tfm-orange-dark);
    --tfm-ps-accent-soft: var(--tfm-orange-light);
}

.tfm-paysched-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.tfm-paysched-head-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tfm-ps-accent-soft);
    color: var(--tfm-ps-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
}
.tfm-paysched-head-text > strong { display: block; font-size: 0.9rem; font-weight: 800; color: var(--tfm-navy); margin-bottom: 3px; }
.tfm-paysched-head-text > span { display: block; font-size: 0.79rem; color: var(--tfm-text-muted); line-height: 1.45; }

.tfm-paysched-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tfm-paysched-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    background: var(--tfm-gray-light);
    border: 1.5px solid var(--tfm-gray-medium);
    border-radius: var(--tfm-radius-md);
    padding: 14px 40px 14px 14px;
    transition: var(--tfm-transition);
}
.tfm-paysched-option:hover { border-color: var(--tfm-ps-accent); background: #fff; }
.tfm-paysched-option.is-active {
    border-color: var(--tfm-ps-accent);
    background: var(--tfm-ps-accent-soft);
    box-shadow: 0 0 0 3px rgba(23,107,58,0.10);
}
.tfm-paysched-option-icon { font-size: 0.95rem; color: var(--tfm-ps-accent-dark); margin-bottom: 2px; }
.tfm-paysched-option-title { font-size: 0.88rem; font-weight: 800; color: var(--tfm-navy); line-height: 1.3; }
.tfm-paysched-option-sub { font-size: 0.73rem; color: var(--tfm-text-muted); line-height: 1.35; }
.tfm-paysched-option-tick {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--tfm-gray-medium);
    background: #fff;
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    transition: var(--tfm-transition);
}
.tfm-paysched-option.is-active .tfm-paysched-option-tick {
    background: var(--tfm-ps-accent);
    border-color: var(--tfm-ps-accent);
    color: #fff;
}

.tfm-paysched-panel { margin-top: 16px; animation: tfm-paysched-drop 0.28s ease-out; }
.tfm-paysched-panel[hidden] { display: none; }
@keyframes tfm-paysched-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tfm-paysched-summary {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 11px 14px;
    border-radius: var(--tfm-radius-md);
    background: var(--tfm-gray-light);
    font-size: 0.82rem;
    color: var(--tfm-text-light);
    line-height: 1.5;
}
.tfm-paysched-summary i { margin-top: 2px; flex-shrink: 0; }
.tfm-paysched-summary.is-set { background: var(--tfm-ps-accent-soft); color: var(--tfm-text); }
.tfm-paysched-summary.is-set i { color: var(--tfm-ps-accent-dark); }
.tfm-paysched-summary.is-set strong { color: var(--tfm-ps-accent-dark); font-weight: 800; }
.tfm-paysched-summary.is-error { background: var(--tfm-alert-light); color: var(--tfm-alert); font-weight: 600; }
.tfm-paysched-summary.is-error i { color: var(--tfm-alert); }

/* ---------- Calendar ---------- */
.tfm-calendar {
    border: 1px solid var(--tfm-gray);
    border-radius: var(--tfm-radius-md);
    overflow: hidden;
    background: #fff;
}
.tfm-calendar-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(120deg, var(--tfm-navy), var(--tfm-green-dark));
    color: #fff;
}
.tfm-calendar-title { font-family: var(--tfm-font-heading); font-weight: 800; font-size: 0.92rem; }
.tfm-calendar-nav {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}
.tfm-calendar-nav:hover:not(:disabled) { background: rgba(255,255,255,0.34); }
.tfm-calendar-nav:disabled { opacity: 0.3; cursor: not-allowed; }

.tfm-calendar-dow,
.tfm-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.tfm-calendar-dow { padding: 8px 8px 0; }
.tfm-calendar-dow span {
    text-align: center;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: var(--tfm-text-muted);
    padding-bottom: 4px;
}
.tfm-calendar-grid { gap: 4px; padding: 8px; }
.tfm-calendar-cell { aspect-ratio: 1 / 1; }
.tfm-calendar-blank { visibility: hidden; }
.tfm-calendar-day {
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    border-radius: var(--tfm-radius-sm);
    background: var(--tfm-gray-light);
    color: var(--tfm-text);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tfm-transition);
}
.tfm-calendar-day:hover:not(:disabled) {
    background: var(--tfm-ps-accent-soft);
    border-color: var(--tfm-ps-accent);
    color: var(--tfm-ps-accent-dark);
}
.tfm-calendar-day:disabled { color: var(--tfm-gray-medium); background: transparent; cursor: not-allowed; }
.tfm-calendar-day.is-selected {
    background: var(--tfm-ps-accent);
    border-color: var(--tfm-ps-accent);
    color: #fff;
    font-weight: 800;
    box-shadow: var(--tfm-shadow-sm);
}

.tfm-deposit-card .tfm-lipa-form-header { margin-bottom: 14px; }

@media (max-width: 560px) {
    .tfm-paysched { padding: 15px; }
    .tfm-paysched-options { grid-template-columns: 1fr; }
    .tfm-calendar-grid { gap: 3px; padding: 6px; }
    .tfm-calendar-day { font-size: 0.78rem; }
}

/* --------------------------------------------
   FACILITY CAROUSEL ("Come See Us")
   -------------------------------------------- */
.tfm-facility-carousel {
    position: relative;
    border-radius: var(--tfm-radius-lg);
    overflow: hidden;
    box-shadow: var(--tfm-shadow-lg);
    background: var(--tfm-navy);
}
.tfm-facility-stage { position: relative; aspect-ratio: 3 / 2; }

.tfm-facility-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    cursor: zoom-in;
}
.tfm-facility-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.tfm-facility-slide img { width: 100%; height: 100%; object-fit: cover; }
.tfm-facility-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(23,32,25,0.88) 0%, rgba(23,32,25,0.34) 34%, transparent 62%);
}

.tfm-facility-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 26px 26px 22px;
    text-align: left;
}
.tfm-facility-caption strong {
    display: block;
    font-family: var(--tfm-font-heading);
    font-size: 1.18rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    padding-bottom: 8px;
    position: relative;
}
.tfm-facility-caption strong::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 3px;
    border-radius: 2px;
    background: var(--tfm-orange);
}
.tfm-facility-caption span {
    display: block;
    font-size: 0.9rem;
    color: #DCEAE1;
    line-height: 1.55;
    max-width: 52ch;
}

.tfm-facility-zoom {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(23,32,25,0.8);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 7px 13px;
    border-radius: var(--tfm-radius-full);
    backdrop-filter: blur(2px);
}

.tfm-facility-carousel .tfm-hero-carousel-arrow {
    z-index: 3;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
}
.tfm-facility-carousel .tfm-hero-carousel-arrow:hover { background: var(--tfm-orange); border-color: var(--tfm-orange); }
.tfm-facility-prev { left: 16px; }
.tfm-facility-next { right: 16px; }

.tfm-facility-thumbs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
}
.tfm-facility-thumb {
    border: 2px solid transparent;
    border-radius: var(--tfm-radius-md);
    overflow: hidden;
    padding: 0;
    background: none;
    opacity: 0.62;
    transition: var(--tfm-transition);
}
.tfm-facility-thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tfm-facility-thumb:hover { opacity: 0.85; }
.tfm-facility-thumb.active { opacity: 1; border-color: var(--tfm-orange); }

.tfm-facility-visit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 22px;
    padding: 16px 20px;
    border: 1px solid var(--tfm-gray);
    border-radius: var(--tfm-radius-md);
    background: #fff;
}
.tfm-facility-visit > span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tfm-text);
}
.tfm-facility-visit i { color: var(--tfm-orange); }

@media (max-width: 700px) {
    .tfm-facility-stage { aspect-ratio: 4 / 3; }
    .tfm-facility-caption { padding: 20px 16px 16px; }
    .tfm-facility-caption strong { font-size: 1rem; }
    .tfm-facility-caption span { font-size: 0.82rem; }
    .tfm-facility-thumbs { gap: 7px; }
    .tfm-facility-visit { flex-direction: column; align-items: stretch; text-align: center; }
    .tfm-facility-visit > span { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .tfm-facility-slide { transition: none; }
    .tfm-paysched-panel { animation: none; }
}

/* Section wrapper for the yard carousel - the carousel itself carries the
   visual weight, so this only needs to hold the rhythm between the navy CEO
   section above and the tinted testimonials below. */
.tfm-facility-section { background: #fff; }

/* --------------------------------------------
   CONTACT PAGE - details below the message form
   The form now runs full width with the contact
   cards stacked underneath it rather than in a
   side column.
   -------------------------------------------- */
.tfm-contact-form-wrapper { max-width: 760px; margin: 0 auto; }
.tfm-contact-form-wrapper h2 { text-align: center; }
.tfm-contact-form-wrapper .tfm-contact-form-desc { text-align: center; }

.tfm-contact-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-items: start;
}
.tfm-contact-details-grid .tfm-contact-info-card { margin-bottom: 0; height: 100%; }
.tfm-contact-details-grid .tfm-contact-info-item { margin-bottom: 0; }

.tfm-contact-details-grid .tfm-contact-info-item p { margin-bottom: 4px; }
.tfm-contact-details-grid .tfm-contact-info-item p a { font-weight: 600; color: var(--tfm-text); }
.tfm-contact-details-grid .tfm-contact-info-item p a:hover { color: var(--tfm-green); }
.tfm-contact-details-grid .tfm-contact-info-item small { display: block; margin-top: 6px; color: var(--tfm-text-muted); }

/* Name above the number, so it's clear whose line it is */
.tfm-contact-person { font-weight: 700; color: var(--tfm-navy) !important; margin-bottom: 6px !important; }

.tfm-contact-card-location { grid-column: span 2; }
.tfm-contact-card-whatsapp .tfm-contact-info-icon { background: rgba(37,211,102,0.14); color: #128C4B; }

.tfm-contact-directions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--tfm-green);
}
.tfm-contact-directions:hover { color: var(--tfm-orange); }

.tfm-contact-details .tfm-contact-cta-card {
    max-width: 640px;
    margin: 26px auto 0;
    text-align: center;
}

@media (max-width: 900px) {
    .tfm-contact-details-grid { grid-template-columns: repeat(2, 1fr); }
    .tfm-contact-card-location { grid-column: span 2; }
}
@media (max-width: 600px) {
    .tfm-contact-details-grid { grid-template-columns: 1fr; }
    .tfm-contact-card-location { grid-column: span 1; }
}

/* --------------------------------------------
   REQUIREMENTS CARD (Loan Requirements / Shop Now)
   Full-bleed coloured header with a step eyebrow,
   icon tile and a tinted form body, so the form
   reads as a step in the flow rather than a plain
   white box. Farm palette: deep green for Lipa
   Mdogo, amber for Shop Now.
   -------------------------------------------- */
.tfm-req-card {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--tfm-gray);
    position: relative;
}
.tfm-req-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tfm-green) 0%, var(--tfm-green-dark) 45%, var(--tfm-orange) 100%);
    z-index: 2;
}

.tfm-req-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 22px 20px;
    color: #fff;
    position: relative;
}
.tfm-req-card--lipa .tfm-req-header { background: linear-gradient(135deg, var(--tfm-navy) 0%, var(--tfm-green-dark) 55%, var(--tfm-green) 100%); }
.tfm-req-card--shop .tfm-req-header { background: linear-gradient(135deg, var(--tfm-orange-dark) 0%, var(--tfm-orange) 100%); }

.tfm-req-header-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: var(--tfm-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.tfm-req-card--lipa .tfm-req-header-icon { background: var(--tfm-orange); }
.tfm-req-card--shop .tfm-req-header-icon { background: var(--tfm-green-dark); }

.tfm-req-header-text { min-width: 0; }
.tfm-req-header-eyebrow {
    display: block;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 5px;
}
.tfm-req-header h3 { color: #fff; font-size: 1.18rem; margin-bottom: 6px; }
.tfm-req-header p { font-size: 0.85rem; color: rgba(255, 255, 255, 0.9); line-height: 1.5; }

.tfm-req-body {
    padding: 24px 22px 22px;
    background: linear-gradient(180deg, var(--tfm-gray-light) 0%, #fff 140px);
}
.tfm-req-body .tfm-form-group input,
.tfm-req-body .tfm-form-group select,
.tfm-req-body .tfm-form-group textarea { background: #fff; }
.tfm-req-body .tfm-form-group label { color: var(--tfm-navy); }

@media (max-width: 560px) {
    .tfm-req-header { padding: 20px 17px 17px; gap: 13px; }
    .tfm-req-header-icon { width: 40px; height: 40px; font-size: 1rem; }
    .tfm-req-header h3 { font-size: 1.05rem; }
    .tfm-req-body { padding: 20px 17px 18px; }
}

/* --------------------------------------------
   FORM SUB-HEADING (the "Loan Guarantor" group)
   Splits a long requirements form into labelled
   groups without breaking it into separate cards.
   -------------------------------------------- */
.tfm-form-subhead {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 10px 0 18px;
    padding-top: 20px;
    border-top: 1px dashed var(--tfm-gray-medium);
}
.tfm-form-subhead-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--tfm-green-light);
    color: var(--tfm-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
}
.tfm-form-subhead-text > strong {
    display: block;
    font-family: var(--tfm-font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--tfm-navy);
    margin-bottom: 2px;
}
.tfm-form-subhead-text > span {
    display: block;
    font-size: 0.78rem;
    color: var(--tfm-text-muted);
    line-height: 1.45;
}
/* Inside the tinted requirements body the rule needs a touch more contrast */
.tfm-req-body .tfm-form-subhead { border-top-color: rgba(23,107,58,0.22); }

/* --------------------------------------------
   THEME COLOUR ON REMAINING PLAIN ELEMENTS
   -------------------------------------------- */

/* Status messages were plain coloured text and a stray hex red; make them
   tinted pills using the theme tokens. */
.tfm-form-status:empty { display: none; }
.tfm-form-status {
    padding: 11px 14px;
    border-radius: var(--tfm-radius-md);
    line-height: 1.5;
}
.tfm-status-success {
    color: var(--tfm-green-dark);
    background: var(--tfm-green-light);
    border: 1px solid rgba(23,107,58,0.24);
}
.tfm-status-error {
    color: var(--tfm-alert);
    background: var(--tfm-alert-light);
    border: 1px solid rgba(179,64,31,0.24);
}

/* Reassurance notes under the forms - lock/shield icon in brand green */
.tfm-lipa-form-note i,
.tfm-contact-form-note i { color: var(--tfm-green); }

/* Placeholders were near-black in some browsers */
.tfm-form-group input::placeholder,
.tfm-form-group textarea::placeholder { color: var(--tfm-text-muted); opacity: 1; }

/* Selection and hover polish in brand colours */
.tfm-body ::selection { background: var(--tfm-green-light); color: var(--tfm-green-dark); }
.tfm-form-group input:hover:not(:focus),
.tfm-form-group select:hover:not(:focus),
.tfm-form-group textarea:hover:not(:focus) { border-color: var(--tfm-green); }

/* --------------------------------------------
   CONTACT PAGE - social links + WhatsApp buttons
   -------------------------------------------- */
.tfm-contact-social-links { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.tfm-contact-social-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--tfm-text);
}
.tfm-contact-social-link i {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--tfm-green-light);
    color: var(--tfm-green-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: var(--tfm-transition);
}
.tfm-contact-social-link:hover { color: var(--tfm-green); }
.tfm-contact-social-link:hover i { background: var(--tfm-green); color: #fff; }

/* One full-width button per WhatsApp line, stacked, each naming the number
   it dials. .tfm-btn sets white-space: nowrap globally, which clips these
   longer labels on narrow phones - so wrapping is re-enabled here and the
   line-height tightened for the two-line case. */
.tfm-contact-wa-buttons { display: flex; flex-direction: column; gap: 12px; }
.tfm-contact-wa-buttons .tfm-btn {
    width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    padding-left: 18px;
    padding-right: 18px;
}
.tfm-contact-wa-buttons .tfm-btn i { flex-shrink: 0; }

/* ============================================
   TEXT ON DARK SURFACES - LEGIBILITY GUARD
   --------------------------------------------
   Every surface below paints text over a dark navy/green/orange
   background. The plugin already sets the right colours, but those
   declarations are single-class (0,1,0) and a theme heading or link rule
   such as `.site-content h1` (0,1,1) outranks them - which is what left
   "Shop All Machines" and "Contact Us" dark on the green banner.

   Headings and links are the real risk: themes style h1-h6 and `a`
   explicitly, while paragraphs usually just inherit the container colour
   and are already safe. So this guard targets exactly those, scoped
   through <body class="tfm-body"> for specificity and marked important.

   -webkit-text-fill-color and background-clip are reset as well: a theme
   using gradient-clipped headings renders text transparent no matter what
   `color` says, so setting the colour alone would not be enough.

   Anything added to a dark background later should be added to this list.
   ============================================ */

.tfm-body .tfm-page-hero h1,
.tfm-body .tfm-page-hero h2,
.tfm-body .tfm-page-hero h3,
.tfm-body .tfm-lipa-hero h1,
.tfm-body .tfm-lipa-hero h2,
.tfm-body .tfm-cta-section h2,
.tfm-body .tfm-cta-section h3,
.tfm-body .tfm-ceo-section h2,
.tfm-body .tfm-ceo-section h3,
.tfm-body .tfm-ceo-section h4,
.tfm-body .tfm-footer h3,
.tfm-body .tfm-footer h4,
.tfm-body .tfm-footer .tfm-footer-title,
.tfm-body .tfm-lipa-summary-card h3,
.tfm-body .tfm-lipa-summary-card h4,
.tfm-body .tfm-contact-cta-card h3,
.tfm-body .tfm-req-header h3,
.tfm-body .tfm-tc-card-header h3,
.tfm-body .tfm-calendar-bar .tfm-calendar-title,
.tfm-body .tfm-jukebox h2,
.tfm-body .tfm-jukebox .tfm-jukebox-title,
.tfm-body .tfm-jukebox .tfm-jukebox-slot-label,
.tfm-body .tfm-jukebox .tfm-jukebox-now-title,
.tfm-body .tfm-facility-caption strong {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}

/* The two page banners carry the largest type - a hairline shadow keeps
   them readable if a theme ever lightens the gradient behind them. */
.tfm-body .tfm-page-hero h1,
.tfm-body .tfm-lipa-hero h1 { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }

/* Supporting copy in the banners and dark cards */
.tfm-body .tfm-page-hero .tfm-page-hero-subtitle,
.tfm-body .tfm-lipa-hero p,
.tfm-body .tfm-cta-section .tfm-cta-content p,
.tfm-body .tfm-contact-cta-card p,
.tfm-body .tfm-req-header p,
.tfm-body .tfm-jukebox .tfm-jukebox-sub,
.tfm-body .tfm-facility-caption span {
    color: #DCEAE1 !important;
    -webkit-text-fill-color: #DCEAE1 !important;
}

/* The jukebox numbers, eyebrow and "Now Playing" label are deliberate accents.
   They sit inside <button> elements, which themes style aggressively, so they
   are pinned here alongside the white text above. */
.tfm-body .tfm-jukebox .tfm-jukebox-eyebrow,
.tfm-body .tfm-jukebox .tfm-jukebox-slot-num,
.tfm-body .tfm-jukebox .tfm-jukebox-now-label {
    color: var(--tfm-orange) !important;
    -webkit-text-fill-color: var(--tfm-orange) !important;
}
.tfm-body .tfm-jukebox .tfm-jukebox-slot-play { color: #fff !important; -webkit-text-fill-color: #fff !important; }

.tfm-body .tfm-ceo-section .tfm-ceo-quote-lg { color: #EEF3EF !important; -webkit-text-fill-color: #EEF3EF !important; }
.tfm-body .tfm-payment-thanks { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.tfm-body .tfm-tc-card-header .tfm-tc-card-header-text span { color: #C8DCD0 !important; -webkit-text-fill-color: #C8DCD0 !important; }

/* Links on dark backgrounds, excluding buttons - those carry their own
   fill and border colours and must not be flattened to a text colour. */
.tfm-body .tfm-page-hero a:not(.tfm-btn),
.tfm-body .tfm-lipa-hero a:not(.tfm-btn),
.tfm-body .tfm-ceo-section a:not(.tfm-btn) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.tfm-body .tfm-topbar a:not(.tfm-btn) { color: #C8DCD0 !important; -webkit-text-fill-color: #C8DCD0 !important; }
.tfm-body .tfm-topbar a:not(.tfm-btn):hover { color: var(--tfm-orange) !important; -webkit-text-fill-color: var(--tfm-orange) !important; }
.tfm-body .tfm-footer .tfm-footer-links a:not(.tfm-btn),
.tfm-body .tfm-footer .tfm-footer-contact a:not(.tfm-btn) { color: #A6B8AC !important; -webkit-text-fill-color: #A6B8AC !important; }
.tfm-body .tfm-footer .tfm-footer-links a:not(.tfm-btn):hover,
.tfm-body .tfm-footer .tfm-footer-contact a:not(.tfm-btn):hover { color: var(--tfm-orange) !important; -webkit-text-fill-color: var(--tfm-orange) !important; }
.tfm-body .tfm-footer .tfm-social-icon { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.tfm-body .tfm-footer .tfm-footer-hours .tfm-hours-days { color: #C8DCD0 !important; -webkit-text-fill-color: #C8DCD0 !important; }
.tfm-body .tfm-footer .tfm-footer-hours .tfm-hours-time { color: #A6B8AC !important; -webkit-text-fill-color: #A6B8AC !important; }
.tfm-body .tfm-footer .tfm-footer-hours .tfm-hours-time-always,
.tfm-body .tfm-footer .tfm-footer-hours-title i { color: var(--tfm-orange) !important; -webkit-text-fill-color: var(--tfm-orange) !important; }

/* Contact cards use the shared dark-card treatment, so keep every detail
    readable against that background, including phone links and opening hours. */
.tfm-body .tfm-contact-details-grid .tfm-contact-info-card p,
.tfm-body .tfm-contact-details-grid .tfm-contact-info-card small { color: #C8DCD0 !important; -webkit-text-fill-color: #C8DCD0 !important; }
.tfm-body .tfm-contact-details-grid .tfm-contact-info-card p a,
.tfm-body .tfm-contact-details-grid .tfm-contact-directions { color: var(--tfm-orange) !important; -webkit-text-fill-color: var(--tfm-orange) !important; }
.tfm-body .tfm-contact-details-grid .tfm-contact-info-card p a:hover,
.tfm-body .tfm-contact-details-grid .tfm-contact-directions:hover { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.tfm-body .tfm-contact-details-grid .tfm-hours-list .tfm-hours-days { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.tfm-body .tfm-contact-details-grid .tfm-hours-list .tfm-hours-time { color: #C8DCD0 !important; -webkit-text-fill-color: #C8DCD0 !important; }
.tfm-body .tfm-contact-details-grid .tfm-hours-list .tfm-hours-time-always { color: var(--tfm-orange) !important; -webkit-text-fill-color: var(--tfm-orange) !important; }

/* Deliberate accents that must survive the rules above */
.tfm-body .tfm-stats-strip .tfm-stat strong,
.tfm-body .tfm-ceo-section .tfm-ceo-eyebrow { color: var(--tfm-orange) !important; -webkit-text-fill-color: var(--tfm-orange) !important; }
.tfm-body .tfm-stats-strip .tfm-stat span { color: #C8DCD0 !important; -webkit-text-fill-color: #C8DCD0 !important; }
.tfm-body .tfm-ceo-section .tfm-ceo-role-lg { color: #A9BFB0 !important; -webkit-text-fill-color: #A9BFB0 !important; }
.tfm-body .tfm-req-header .tfm-req-header-eyebrow { color: rgba(255, 255, 255, 0.75) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.75) !important; }
.tfm-body .tfm-lipa-summary-card .tfm-lipa-summary-top span,
.tfm-body .tfm-lipa-summary-card .tfm-lipa-summary-item span { color: #C8DCD0 !important; -webkit-text-fill-color: #C8DCD0 !important; }

/* Buttons keep their own colours everywhere, including inside dark sections */
.tfm-body .tfm-btn-accent { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.tfm-body .tfm-btn-primary { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.tfm-body .tfm-btn-outline-light { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ============================================
   BUSINESS BRANCHES - Machinery vs Farm Products
   Steel blue carries machinery, harvest gold carries livestock, so the
   colour alone tells you which side of the business a card or tab is.
   ============================================ */
.tfm-branches-section { background: #fff; }
.tfm-branch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.tfm-branch-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 28px 26px;
    background: #fff;
    border: 1px solid var(--tfm-gray);
    border-radius: var(--tfm-radius-lg);
    box-shadow: var(--tfm-shadow-sm);
    overflow: hidden;
    transition: var(--tfm-transition);
}
.tfm-branch-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: var(--tfm-green);
}
.tfm-branch-card--farm-products::before { background: var(--tfm-orange); }
.tfm-branch-card:hover { transform: translateY(-4px); box-shadow: var(--tfm-shadow-lg); border-color: var(--tfm-green); }
.tfm-branch-card--farm-products:hover { border-color: var(--tfm-orange); }

.tfm-branch-card-icon {
    width: 58px; height: 58px; border-radius: var(--tfm-radius-md);
    background: var(--tfm-green-light); color: var(--tfm-green);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin-bottom: 18px;
}
.tfm-branch-card--farm-products .tfm-branch-card-icon { background: var(--tfm-orange-light); color: var(--tfm-orange-dark); }
.tfm-branch-card h3 { font-size: 1.3rem; margin-bottom: 8px; color: var(--tfm-navy); }
.tfm-branch-card > p { font-size: 0.92rem; color: var(--tfm-text-light); line-height: 1.6; margin-bottom: 18px; flex-grow: 1; }

.tfm-branch-card-meta { display: flex; gap: 22px; padding: 14px 0; border-top: 1px solid var(--tfm-gray); margin-bottom: 14px; }
.tfm-branch-card-meta span { font-size: 0.82rem; color: var(--tfm-text-muted); }
.tfm-branch-card-meta strong {
    display: block; font-family: var(--tfm-font-heading);
    font-size: 1.25rem; font-weight: 800; color: var(--tfm-navy);
}
.tfm-branch-card-cta { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 0.92rem; color: var(--tfm-green); }
.tfm-branch-card--farm-products .tfm-branch-card-cta { color: var(--tfm-orange-dark); }
.tfm-branch-card-cta i { transition: transform 0.25s ease; }
.tfm-branch-card:hover .tfm-branch-card-cta i { transform: translateX(4px); }

/* Shop: branch tabs, current scope always obvious */
.tfm-branch-tabs {
    display: flex; gap: 10px; margin-bottom: 14px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tfm-branch-tabs::-webkit-scrollbar { display: none; }
.tfm-branch-tab {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    flex: 1 1 0; min-width: max-content;
    padding: 13px 20px;
    background: #fff; border: 1.5px solid var(--tfm-gray-medium);
    border-radius: var(--tfm-radius-md);
    font-family: inherit; font-size: 0.92rem; font-weight: 700;
    color: var(--tfm-text-light); white-space: nowrap;
    transition: var(--tfm-transition);
}
.tfm-branch-tab:hover { border-color: var(--tfm-green); color: var(--tfm-green); }
.tfm-branch-tab.active { background: var(--tfm-green); border-color: var(--tfm-green); color: #fff; box-shadow: var(--tfm-shadow-sm); }
.tfm-branch-tab[data-branch="farm-products"]:hover { border-color: var(--tfm-orange-dark); color: var(--tfm-orange-dark); }
.tfm-branch-tab[data-branch="farm-products"].active { background: var(--tfm-orange-dark); border-color: var(--tfm-orange-dark); color: #fff; }

.tfm-branch-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 20px; padding: 0 7px;
    border-radius: var(--tfm-radius-full);
    background: var(--tfm-gray-light); color: var(--tfm-text-muted);
    font-size: 0.72rem; font-weight: 800;
}
.tfm-branch-tab.active .tfm-branch-tab-count { background: rgba(255,255,255,0.22); color: #fff; }

.tfm-badge-branch {
    position: absolute; top: 10px; left: 10px;
    background: var(--tfm-orange-dark); color: #fff;
    font-size: 0.68rem; font-weight: 700; padding: 5px 10px;
    border-radius: var(--tfm-radius-full);
}
.tfm-product-price-poa { font-size: 1rem; font-style: italic; color: var(--tfm-orange-dark); }

@media (max-width: 760px) {
    .tfm-branch-grid { grid-template-columns: 1fr; gap: 16px; }
    .tfm-branch-card { padding: 24px 20px 22px; }
    .tfm-branch-card h3 { font-size: 1.14rem; }
    .tfm-branch-tab { flex: 0 0 auto; padding: 11px 16px; font-size: 0.86rem; }
}
.tfm-branch-tab-label { display: inline; }

/* ============================================
   INDUSTRIAL TREATMENT (Farm Machinery only)
   --------------------------------------------
   Agro keeps the soft, rounded, warm-tinted look. Farm takes the opposite
   register: condensed uppercase headings, squared corners, hairline rules
   instead of soft shadows, and left-aligned section headers. The research
   on industrial/B2B commerce points the same way - structured grids and
   type-led hierarchy that make technical detail scannable.
   Tokens above already squared the geometry; this block changes the
   surface treatment and typographic rhythm. Markup is untouched.
   ============================================ */

/* ---------- Typography: condensed, uppercase, tightly tracked ---------- */
.tfm-body h1, .tfm-body h2, .tfm-body h3 {
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
}
.tfm-body h1 { letter-spacing: 0.2px; }
.tfm-body h4 { text-transform: none; letter-spacing: 0; font-weight: 600; }
/* Product names stay sentence case - uppercase would hurt scanning here */
.tfm-body .tfm-product-card h3,
.tfm-body .tfm-branch-card h3 { text-transform: none; letter-spacing: 0; }

/* ---------- Section headers: left-aligned under a rule ---------- */
.tfm-section-header {
    text-align: left;
    max-width: 760px;
    margin-left: 0;
    padding-top: 18px;
    border-top: 3px solid var(--tfm-navy);
    position: relative;
}
.tfm-section-header::after {
    content: "";
    position: absolute;
    top: -3px; left: 0;
    width: 84px; height: 3px;
    background: var(--tfm-orange);
}
.tfm-section-header p { margin-left: 0; }
/* The terms heading had a centred underline that no longer fits */
.tfm-terms-header h2::after { left: 0; transform: none; }

/* ---------- Buttons: squared, uppercase, engineered ---------- */
.tfm-btn {
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    font-family: var(--tfm-font-heading);
    font-size: 0.95rem;
}
.tfm-btn-lg { letter-spacing: 1px; }

/* ---------- Chips and filters: squared, not pills ---------- */
.tfm-filter-btn,
.tfm-branch-tab,
.tfm-tc-chip,
.tfm-home-search-shortcuts a,
.tfm-badge-lipa,
.tfm-badge-branch,
.tfm-hero-badge,
.tfm-tc-plan-tag,
.tfm-branch-tab-count {
    border-radius: 2px;
}
.tfm-filter-btn,
.tfm-branch-tab {
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-family: var(--tfm-font-heading);
}
.tfm-badge-lipa, .tfm-badge-branch {
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

/* ---------- Cards: flat panels with hairline rules ---------- */
.tfm-product-card {
    border: 1px solid var(--tfm-gray-medium);
    box-shadow: none;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.tfm-product-card:hover {
    transform: translateY(-2px);
    border-color: var(--tfm-green);
    box-shadow: var(--tfm-shadow-sm);
}
/* Category label above the product name reads as a spec field */
.tfm-product-category {
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--tfm-green);
}
.tfm-product-price {
    font-family: var(--tfm-font-heading);
    letter-spacing: 0.3px;
}

.tfm-category-card,
.tfm-branch-card,
.tfm-lipa-card,
.tfm-tc-card,
.tfm-contact-info-card,
.tfm-facility-card {
    border: 1px solid var(--tfm-gray-medium);
}
.tfm-category-card:hover { border-color: var(--tfm-green); }

/* ---------- Inputs: square fields ---------- */
.tfm-form-group input,
.tfm-form-group select,
.tfm-form-group textarea,
.tfm-shop-search input,
.tfm-home-search-field { border-radius: 2px; }
.tfm-home-search-field { border-radius: 2px; }
.tfm-home-search-btn { border-radius: 2px; }

/* ---------- Stats strip: rules between figures, not floating text ---------- */
.tfm-stats-strip .tfm-stat + .tfm-stat { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.tfm-stats-strip .tfm-stat strong { font-family: var(--tfm-font-heading); letter-spacing: 0.5px; }
.tfm-stats-strip .tfm-stat span { text-transform: uppercase; letter-spacing: 1.1px; font-size: 0.7rem; }

/* ---------- Hero: hard-edged panel with a gold rule ---------- */
.tfm-hero-panel {
    border-radius: 2px;
    border-left: 4px solid var(--tfm-orange);
    backdrop-filter: none;
}

/* ---------- Footer + header: squared, tracked ---------- */
.tfm-footer h4 { text-transform: uppercase; letter-spacing: 1.2px; font-size: 0.82rem; }
.tfm-social-icon { border-radius: 2px; }

@media (max-width: 700px) {
    .tfm-section-header { padding-top: 14px; }
    .tfm-section-header::after { width: 60px; }
    .tfm-btn { letter-spacing: 0.5px; font-size: 0.9rem; }
}

/* ---------- Hero trust ticks (brief §4) ---------- */
.tfm-hero-ticks { background: var(--tfm-navy); border-bottom: 3px solid var(--tfm-orange); }
.tfm-hero-ticks ul {
    list-style: none; margin: 0; padding: 14px 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 20px;
}
.tfm-hero-ticks li {
    display: flex; align-items: center; gap: 9px;
    font-size: 0.82rem; font-weight: 600; color: #fff;
    text-transform: uppercase; letter-spacing: 0.6px;
    font-family: var(--tfm-font-heading);
}
.tfm-hero-ticks li i {
    flex-shrink: 0; width: 18px; height: 18px; border-radius: 2px;
    background: var(--tfm-orange); color: var(--tfm-navy);
    display: flex; align-items: center; justify-content: center; font-size: 0.6rem;
}
@media (max-width: 780px) {
    .tfm-hero-ticks ul { grid-template-columns: repeat(2, 1fr); padding: 12px 0; }
    .tfm-hero-ticks li { font-size: 0.72rem; letter-spacing: 0.3px; }
}

/* ---------- Shop sort + price bar (brief §8) ---------- */
.tfm-shop-sortbar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.tfm-shop-sort { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; }
.tfm-shop-sort > span {
    font-family: var(--tfm-font-heading); font-size: 0.76rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; color: var(--tfm-text-muted); flex-shrink: 0;
}
.tfm-shop-sort select {
    flex: 1; min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--tfm-gray-medium); border-radius: 2px;
    background: #fff; font-family: inherit; font-size: 15px; color: var(--tfm-text);
}
.tfm-shop-sort select:focus { outline: none; border-color: var(--tfm-green); box-shadow: 0 0 0 3px rgba(23,107,58,0.12); }

/* ---------- Shop by business goal (brief §13) ---------- */
.tfm-goals-section { background: var(--tfm-gray-light); }
.tfm-goal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tfm-goal-card {
    display: flex; flex-direction: column;
    padding: 22px 20px; background: #fff;
    border: 1px solid var(--tfm-gray-medium); border-radius: var(--tfm-radius-md);
    transition: var(--tfm-transition);
}
.tfm-goal-card:hover { border-color: var(--tfm-green); transform: translateY(-2px); box-shadow: var(--tfm-shadow-sm); }
.tfm-goal-icon {
    width: 44px; height: 44px; margin-bottom: 14px; border-radius: 2px;
    background: var(--tfm-green-light); color: var(--tfm-green);
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.tfm-goal-card h3 { font-size: 0.98rem; margin-bottom: 7px; text-transform: none; letter-spacing: 0; }
.tfm-goal-card p { font-size: 0.84rem; color: var(--tfm-text-light); line-height: 1.55; flex-grow: 1; margin-bottom: 14px; }
.tfm-goal-meta {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--tfm-font-heading); font-size: 0.76rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px; color: var(--tfm-orange-dark);
}
.tfm-goal-card:hover .tfm-goal-meta i { transform: translateX(3px); }
.tfm-goal-meta i { transition: transform 0.2s ease; }

@media (max-width: 1000px) { .tfm-goal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .tfm-goal-grid { grid-template-columns: 1fr; } }

/* ---------- Lipa Mdogo: four numbered steps (brief §11) ---------- */
.tfm-lipa-steps-section { background: #fff; }
.tfm-lipa-steps {
    list-style: none; margin: 0 0 28px; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
    counter-reset: none;
}
.tfm-lipa-steps li {
    position: relative; padding: 24px 20px 20px;
    background: var(--tfm-gray-light);
    border: 1px solid var(--tfm-gray-medium);
    border-top: 3px solid var(--tfm-green);
    border-radius: var(--tfm-radius-md);
}
.tfm-lipa-step-num {
    display: block; font-family: var(--tfm-font-heading);
    font-size: 1.9rem; font-weight: 700; line-height: 1;
    color: var(--tfm-orange); margin-bottom: 10px;
}
.tfm-lipa-steps h3 { font-size: 0.98rem; margin-bottom: 7px; text-transform: none; letter-spacing: 0; }
.tfm-lipa-steps p { font-size: 0.85rem; color: var(--tfm-text-light); line-height: 1.55; }
.tfm-lipa-steps-cta { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1000px) { .tfm-lipa-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
    .tfm-lipa-steps { grid-template-columns: 1fr; gap: 12px; }
    .tfm-lipa-steps-cta .tfm-btn { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   v2.3 - Category rail, About Us, category grid split by branch
   Squared corners, condensed uppercase labels, green and orange:
   the same idiom as the rest of this stylesheet, not the Agro one.
   ============================================================ */

/* ---------- Header category rail ---------- */
.tfm-catrail {
    background: #fff;
    border-top: 1px solid var(--tfm-gray);
    border-bottom: 2px solid var(--tfm-gray);
    overflow: hidden;
    max-height: 56px;
    transition: max-height 0.25s ease, opacity 0.2s ease;
}
/* Folds away once the visitor starts scrolling, so it never eats the screen */
.tfm-header.tfm-scrolled .tfm-catrail { max-height: 0; opacity: 0; border-bottom-color: transparent; }

.tfm-catrail-inner {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tfm-catrail-inner::-webkit-scrollbar { display: none; }

.tfm-catrail-link,
.tfm-catrail-group {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 2px;
    font-family: var(--tfm-font-heading);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
}
a.tfm-catrail-link { color: var(--tfm-text-light); }
.tfm-catrail-link i { color: var(--tfm-green); font-size: 0.8rem; }
a.tfm-catrail-link:hover { background: var(--tfm-green-light); color: var(--tfm-green-dark); }

/* Group labels keep the two sides of the business apart in one scroll */
.tfm-catrail-group { color: #fff; }
.tfm-catrail-group i { color: inherit; font-size: 0.78rem; }
.tfm-catrail-group--machinery { background: var(--tfm-green); }
.tfm-catrail-group--livestock { background: var(--tfm-orange); }
.tfm-catrail-group + .tfm-catrail-link { margin-left: 2px; }

a.tfm-catrail-all { background: var(--tfm-navy); color: #fff; }
.tfm-catrail-all i { color: var(--tfm-orange); }
a.tfm-catrail-all:hover { background: var(--tfm-green-dark); color: #fff; }
a.tfm-catrail-lipa { margin-left: auto; background: var(--tfm-orange-light); color: var(--tfm-orange-dark); }
.tfm-catrail-lipa i { color: var(--tfm-orange); }
a.tfm-catrail-lipa:hover { background: var(--tfm-orange); color: #fff; }
.tfm-catrail-lipa:hover i { color: #fff; }

/* ---------- About Us ---------- */
.tfm-about-section { background: #fff; }
.tfm-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}
.tfm-about-kicker {
    display: block;
    font-family: var(--tfm-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--tfm-orange);
    margin-bottom: 8px;
}
.tfm-about-copy .tfm-section-header { margin-bottom: 22px; }
.tfm-about-copy p {
    color: var(--tfm-text-light);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 16px;
}
.tfm-about-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.tfm-about-offer {
    background: var(--tfm-gray-light);
    border: 1px solid var(--tfm-gray-medium);
    border-top: 3px solid var(--tfm-orange);
    border-radius: var(--tfm-radius-md);
    padding: 24px 22px;
}
.tfm-about-offer h3 {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
}
.tfm-about-offer-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--tfm-text);
    padding: 9px 0;
    border-bottom: 1px dashed var(--tfm-gray-medium);
}
.tfm-about-offer-list li:last-child { border-bottom: none; }
.tfm-about-offer-list i {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    border-radius: 2px;
    background: var(--tfm-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
}
.tfm-about-figure { margin: 18px 0 0; }
.tfm-about-figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--tfm-gray-medium);
}
.tfm-about-figure figcaption {
    margin-top: 8px;
    font-family: var(--tfm-font-heading);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--tfm-text-muted);
}

/* ---------- Shop by category, split by branch ---------- */
.tfm-cat-branch + .tfm-cat-branch { margin-top: 40px; }
.tfm-cat-branch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--tfm-gray);
}
.tfm-cat-branch-head h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.tfm-cat-branch-head h3 i {
    width: 30px;
    height: 30px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #fff;
    background: var(--tfm-green);
}
.tfm-cat-branch--farm-products .tfm-cat-branch-head h3 i { background: var(--tfm-orange); }
a.tfm-cat-branch-all {
    font-family: var(--tfm-font-heading);
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--tfm-green);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
a.tfm-cat-branch-all:hover { color: var(--tfm-orange-dark); }
.tfm-cat-branch-all i { font-size: 0.72rem; }

@media (min-width: 700px) {
    .tfm-category-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1000px) {
    .tfm-category-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 901px) {
    /* Wrapped, not scrolled: on a wide screen the livestock half of the rail
       was simply off the right-hand edge, which is the thing being fixed. */
    /* The full machinery list wraps to three or four rows - give it room,
       it still folds to nothing the moment the page scrolls. */
    .tfm-catrail { max-height: 260px; }
    .tfm-catrail-inner { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
    /* The auto margin pushed this onto a row of its own once wrapping began */
    a.tfm-catrail-lipa { margin-left: 0; }
}

@media (max-width: 900px) {
    .tfm-about-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 700px) {
    .tfm-catrail-inner { padding: 8px 16px; }
    .tfm-catrail-link, .tfm-catrail-group { font-size: 0.78rem; padding: 6px 10px; }
    .tfm-catrail-lipa { margin-left: 0; }
    .tfm-about-copy p { font-size: 0.94rem; }
    .tfm-about-actions .tfm-btn { flex: 1 1 100%; justify-content: center; }
    .tfm-cat-branch-head h3 { font-size: 1.02rem; }
    .tfm-cat-branch + .tfm-cat-branch { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .tfm-catrail { transition: none; }
}

/* ============================================================
   v2.3.1 - Lipa Mdogo calculator, branch badge, single poster
   ============================================================ */

/* ---------- Lipa Mdogo payment calculator ---------- */
.tfm-lipa-calc {
    margin-top: 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 28px;
    align-items: start;
    background: var(--tfm-white);
    border: 1px solid var(--tfm-gray-medium);
    border-top: 3px solid var(--tfm-orange);
    border-radius: var(--tfm-radius-md);
    padding: 26px 24px;
    scroll-margin-top: 120px;
}
.tfm-lipa-calc-intro { padding-top: 22px; }
.tfm-lipa-calc-intro h3 {
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}
.tfm-lipa-calc-intro p { color: var(--tfm-text-light); font-size: 0.95rem; }

.tfm-lipa-calc-label {
    display: block;
    font-family: var(--tfm-font-heading);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--tfm-text-muted);
    margin-bottom: 7px;
}
.tfm-lipa-calc-select {
    width: 100%;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--tfm-gray-medium);
    border-radius: 2px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    color: var(--tfm-text);
}
.tfm-lipa-calc-select:focus {
    outline: none;
    border-color: var(--tfm-green);
    box-shadow: 0 0 0 3px rgba(23, 107, 58, 0.12);
}

.tfm-lipa-calc-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 18px;
}
.tfm-lipa-calc-figures > div {
    background: var(--tfm-gray-light);
    border: 1px solid var(--tfm-gray);
    border-radius: 2px;
    padding: 12px 14px;
}
.tfm-lipa-calc-figures > div.is-highlight {
    background: var(--tfm-orange-light);
    border-color: rgba(242, 140, 40, 0.4);
}
.tfm-lipa-calc-figures dt {
    font-family: var(--tfm-font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--tfm-text-muted);
    margin-bottom: 3px;
}
.tfm-lipa-calc-figures dd {
    margin: 0;
    font-family: var(--tfm-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tfm-navy);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.tfm-lipa-calc-figures .is-highlight dd { color: var(--tfm-orange-dark); }
.tfm-lipa-calc-apply { width: 100%; }
.tfm-lipa-calc-note {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--tfm-text-muted);
    text-align: center;
}

/* ---------- Branch badge ----------
   It sat in orange-dark, a shade off the orange "Enquire & Buy" button
   directly below it, so the two read as the same control twice. Solid
   brand green separates the label from the action. */
.tfm-badge-branch { background: var(--tfm-navy); color: #fff; }

/* The Terms & Conditions poster is gone, so this row carries one image */
.tfm-home-posters-row { grid-template-columns: minmax(0, 620px); justify-content: center; }

@media (max-width: 860px) {
    .tfm-lipa-calc { grid-template-columns: 1fr; gap: 20px; padding: 22px 18px; }
}
@media (max-width: 460px) {
    .tfm-lipa-calc-figures { grid-template-columns: 1fr; }
    .tfm-lipa-calc-figures dd { font-size: 1.15rem; }
}

/* ---------- Lipa Mdogo badge ----------
   Same problem as the branch badge, one branch over: a solid orange tag
   sitting above a solid orange "Shop Now" button read as the same control
   twice. A white tag with an orange keyline still belongs to the Lipa
   palette but is unmistakably a label, not something to press - and it
   stays legible over the dark and the bright product photos alike. */
.tfm-badge-lipa {
    background: var(--tfm-green);
    color: #fff;
    border: 1.5px solid var(--tfm-green-dark);
    box-shadow: 0 1px 3px rgba(14, 30, 43, 0.18);
}

/* ---------- Yard gallery, now directly under About Us ----------
   Two white sections back to back merged into one long page; the light
   tint gives the gallery its own edge without adding a rule. */
.tfm-facility-section { background: var(--tfm-gray-light); }

/* ============================================
   STORE-WIDE DISCOUNT + REGIONAL DELIVERY (2.10.0)
   ============================================ */

/* ---------- Was/now pricing ----------
   The struck-through original sits beside the live price everywhere a price
   is shown: product cards, Quick View, Shop Now and Lipa Mdogo. It is
   deliberately quieter than the price it replaces. */
.tfm-product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.tfm-price-now { font-weight: 800; }
.tfm-price-was {
    text-decoration: line-through;
    color: var(--tfm-text-muted);
    font-weight: 600;
    font-size: 0.82em;
    letter-spacing: 0;
}
.tfm-price-off {
    display: inline-block;
    background: var(--tfm-orange-light);
    color: var(--tfm-orange-dark);
    border: 1px solid rgba(242, 140, 40, 0.45);
    border-radius: var(--tfm-radius-sm);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    padding: 2px 7px; margin-left: 4px;
}
.tfm-qv-discount {
    display: inline-block;
    background: var(--tfm-orange); color: #fff;
    border-radius: var(--tfm-radius-sm);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;
    padding: 3px 8px; vertical-align: middle;
}
/* Sits opposite the Lipa Mdogo badge so the two never collide. */
.tfm-badge-discount {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    background: var(--tfm-orange); color: #fff;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;
    padding: 5px 10px; border-radius: 2px;
}
.tfm-product-card--livestock .tfm-badge-discount { text-transform: none; }

@media (max-width: 575px) {
    .tfm-badge-discount { top: 46px; right: 10px; }
    .tfm-product-card--livestock .tfm-badge-discount { top: 10px; }
}

/* ---------- Promo bar ---------- */
.tfm-promo-bar { background: linear-gradient(135deg, var(--tfm-orange) 0%, var(--tfm-orange-dark) 100%); padding: 16px 0; }
.tfm-promo-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; text-align: center; }
.tfm-promo-tag {
    flex-shrink: 0;
    background: #fff; color: var(--tfm-green-dark);
    font-family: var(--tfm-font-heading);
    font-size: 1.15rem; font-weight: 800; letter-spacing: 1px;
    padding: 7px 16px; border-radius: 2px;
}
.tfm-promo-text { color: #fff; font-size: 0.95rem; max-width: 640px; }
.tfm-promo-text strong { color: #173F2B; }
.tfm-promo-bar .tfm-btn-accent { background: var(--tfm-green-dark) !important; border-color: var(--tfm-green-dark) !important; color: #fff !important; }
.tfm-promo-bar .tfm-btn-accent:hover { background: var(--tfm-navy) !important; border-color: var(--tfm-navy) !important; }

/* ---------- Regional delivery ---------- */
.tfm-section-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.74rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--tfm-green); margin-bottom: 10px;
}
.tfm-regional-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.tfm-regional-card {
    background: #fff; border: 1px solid var(--tfm-gray-medium);
    border-top: 3px solid var(--tfm-green);
    border-radius: var(--tfm-radius-md); padding: 22px 20px; text-align: center;
}
.tfm-regional-flag { font-size: 2rem; line-height: 1; display: block; margin-bottom: 10px; }
.tfm-regional-card h3 { font-size: 1.15rem; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.6px; }
.tfm-regional-card p { color: var(--tfm-text-light); font-size: 0.9rem; }

.tfm-regional-legal {
    background: #fff; border: 1px solid var(--tfm-gray-medium);
    border-left: 4px solid var(--tfm-orange);
    border-radius: var(--tfm-radius-md); padding: 26px 24px;
}
.tfm-regional-legal-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.tfm-regional-legal-icon {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--tfm-orange-light); color: var(--tfm-orange-dark); font-size: 1.1rem;
}
.tfm-regional-legal-head h3 { font-size: 1.25rem; margin-bottom: 6px; }
.tfm-regional-legal-head p { color: var(--tfm-text-light); font-size: 0.93rem; }
.tfm-regional-legal-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tfm-regional-legal-action {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; background: var(--tfm-green-light);
    border: 1px solid rgba(23, 107, 58, 0.18); border-radius: var(--tfm-radius-md);
}
.tfm-regional-legal-action .tfm-regional-flag { flex-shrink: 0; margin: 0; font-size: 1.8rem; }
.tfm-regional-legal-action h4 { color: var(--tfm-green-dark); font-size: 1rem; margin: 0 0 2px; }
.tfm-regional-legal-action p { color: var(--tfm-text-light); font-size: 0.82rem; line-height: 1.4; }
.tfm-regional-legal-action .tfm-btn { flex-shrink: 0; margin-left: auto; white-space: nowrap; }
.tfm-regional-legal-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.tfm-regional-legal-col h4 {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--tfm-green); margin-bottom: 12px;
}
.tfm-regional-legal-col h4 i { color: var(--tfm-orange); }
.tfm-regional-legal-col ul { display: flex; flex-direction: column; gap: 11px; }
.tfm-regional-legal-col li {
    position: relative; padding-left: 18px;
    font-size: 0.9rem; line-height: 1.55; color: var(--tfm-text-light);
}
.tfm-regional-legal-col li::before {
    content: ""; position: absolute; left: 0; top: 0.6em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--tfm-green);
}
.tfm-regional-legal-col li strong { color: var(--tfm-text); }
.tfm-regional-legal-note {
    margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--tfm-gray);
    font-size: 0.88rem; line-height: 1.6; color: var(--tfm-text-light);
}
.tfm-regional-legal-note i { color: var(--tfm-orange); margin-right: 6px; }
.tfm-regional-legal-note a { color: var(--tfm-green); font-weight: 700; text-decoration: underline; }

@media (max-width: 860px) {
    .tfm-regional-grid { grid-template-columns: 1fr; }
    .tfm-regional-legal-actions { grid-template-columns: 1fr; }
    .tfm-regional-legal-cols { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 575px) {
    .tfm-promo-bar-inner { flex-direction: column; }
    .tfm-regional-legal { padding: 20px 16px; }
    .tfm-regional-legal-head { flex-direction: column; gap: 12px; }
    .tfm-regional-legal-action { align-items: flex-start; flex-wrap: wrap; }
    .tfm-regional-legal-action .tfm-btn { width: 100%; margin-left: 0; justify-content: center; }
}

/* Explanatory content cards use the shared How to pay visual language. */
.tfm-feature-card,
.tfm-contact-info-card,
.tfm-lipa-term-card,
.tfm-branch-card,
.tfm-goal-card,
.tfm-regional-card,
.tfm-regional-legal {
    background: var(--tfm-gray-light);
    border-color: var(--tfm-gray-medium);
    color: var(--tfm-text);
}

.tfm-feature-card h4,
.tfm-contact-info-card h3,
.tfm-contact-info-card h4,
.tfm-lipa-term-card h4,
.tfm-branch-card h3,
.tfm-goal-card h3,
.tfm-regional-card h3,
.tfm-regional-legal-head h3 {
    color: var(--tfm-green-dark);
}

.tfm-feature-card p,
.tfm-contact-info-card p,
.tfm-lipa-term-card p,
.tfm-branch-card > p,
.tfm-branch-card-meta span,
.tfm-goal-card p,
.tfm-regional-card p,
.tfm-regional-legal-head p,
.tfm-regional-legal-col li,
.tfm-regional-legal-note {
    color: var(--tfm-text-light);
}

.tfm-feature-icon,
.tfm-contact-info-icon,
.tfm-lipa-term-icon,
.tfm-goal-icon,
.tfm-regional-legal-icon {
    background: rgba(255,255,255,0.08);
    color: var(--tfm-orange);
}

.tfm-branch-card-meta { border-top-color: rgba(255,255,255,0.14); }
.tfm-branch-card-meta strong { color: #fff; }
.tfm-branch-card-cta,
.tfm-regional-legal-col h4,
.tfm-regional-legal-note a { color: var(--tfm-orange); }
.tfm-regional-legal-action { background: #fff; border-color: var(--tfm-gray); }
.tfm-regional-legal-action h4 { color: var(--tfm-green-dark); }
.tfm-regional-legal-action p { color: var(--tfm-text-light); }
.tfm-regional-legal-col li::before { background: var(--tfm-green); }
.tfm-regional-legal-col li strong { color: var(--tfm-text); }
.tfm-regional-legal-note { border-top-color: var(--tfm-gray); }

/* =====================================================================
   v2.13.0 - LIGHT GREEN THEME + LIVESTOCK BRANCH (Naivasha pattern)
   ---------------------------------------------------------------------
   1. One light green surface replaces the dark navy/green bands and the
      grey tints, so home and every inner page share one background
      language. The footer, the video jukebox screen and form step headers
      stay dark on purpose.
   2. Livestock: softer, rounder cards and buttons, "Book Now" + "Order via
      WhatsApp" on every animal, and the booking modal.
   Everything here is scoped under .tfm-body and placed last so it wins
   over the older dark-surface guard without new !important wars beyond
   the ones that guard already forces.
   ===================================================================== */

:root {
    --tfm-leaf: #E9F4E3;          /* main light green section surface */
    --tfm-leaf-soft: #F3F9EF;     /* lighter tint for alternating bands */
    --tfm-leaf-card: #DDEED5;     /* cards sitting on white */
    --tfm-leaf-line: #C7DFBC;     /* hairlines on green surfaces */
    --tfm-leaf-ink: #0F4D29;      /* headings on light green */
    --tfm-wa: #1E9E52;            /* WhatsApp action green, AA with white */
    --tfm-wa-dark: #167A3F;
    --tfm-lv-radius: 14px;
    --tfm-lv-radius-sm: 10px;
    --tfm-lv-shadow: 0 1px 2px rgba(15, 77, 41, 0.06), 0 8px 24px -12px rgba(15, 77, 41, 0.22);
}

/* ---------- 1. Light green surfaces ---------- */
.tfm-body .tfm-bg-light,
.tfm-body .tfm-facility-section,
.tfm-body .tfm-goals-section { background: var(--tfm-leaf-soft); }

/* "Why choose us" - Free Delivery / Installation / Training / Lipa Mdogo */
.tfm-body .tfm-feature-card {
    background: var(--tfm-leaf);
    border: 1px solid var(--tfm-leaf-line);
    border-radius: 6px;
    color: var(--tfm-text);
    box-shadow: none;
}
.tfm-body .tfm-feature-card:hover { border-color: var(--tfm-green); }
.tfm-body .tfm-feature-icon {
    background: #fff;
    color: var(--tfm-orange);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.55);
}
.tfm-body .tfm-feature-card h4 { color: var(--tfm-orange-dark); font-family: var(--tfm-font-heading); font-size: 1.2rem; font-weight: 700; }
.tfm-body .tfm-feature-card p { color: var(--tfm-text-light); font-size: 0.95rem; }

/* Other explanatory cards that inherited the half-dark treatment */
.tfm-body .tfm-goal-card,
.tfm-body .tfm-regional-card,
.tfm-body .tfm-regional-legal,
.tfm-body .tfm-lipa-term-card { background: #fff; border-color: var(--tfm-leaf-line); }
.tfm-body .tfm-branch-card { background: #fff; }
.tfm-body .tfm-goal-icon,
.tfm-body .tfm-regional-legal-icon,
.tfm-body .tfm-lipa-term-icon { background: var(--tfm-leaf); color: var(--tfm-green); }
.tfm-body .tfm-branch-card-meta { border-top-color: var(--tfm-leaf-line); }
.tfm-body .tfm-branch-card-meta strong { color: var(--tfm-leaf-ink); }
.tfm-body .tfm-branch-card-cta { color: var(--tfm-green); }
.tfm-body .tfm-branch-card--farm-products .tfm-branch-card-cta { color: var(--tfm-orange-dark); }
.tfm-body .tfm-regional-legal-col h4 { color: var(--tfm-green); }

/* Trust ticks bar under the hero */
.tfm-body .tfm-hero-ticks { background: var(--tfm-leaf); border-bottom: 1px solid var(--tfm-leaf-line); border-top: 1px solid var(--tfm-leaf-line); }
.tfm-body .tfm-hero-ticks li { color: var(--tfm-leaf-ink); }
.tfm-body .tfm-hero-ticks li i { background: var(--tfm-green); color: #fff; }

/* Stats strip */
.tfm-body .tfm-stats-strip { background: var(--tfm-leaf); border-top: 1px solid var(--tfm-leaf-line); border-bottom: 1px solid var(--tfm-leaf-line); }
.tfm-body .tfm-stats-strip .tfm-stat + .tfm-stat { border-left-color: var(--tfm-leaf-line); }
.tfm-body .tfm-stats-strip .tfm-stat strong { color: var(--tfm-leaf-ink) !important; -webkit-text-fill-color: var(--tfm-leaf-ink) !important; }
.tfm-body .tfm-stats-strip .tfm-stat strong .fa-whatsapp { color: var(--tfm-wa); }
.tfm-body .tfm-stats-strip .tfm-stat span { color: var(--tfm-text-light) !important; -webkit-text-fill-color: var(--tfm-text-light) !important; }

/* Plain page banners (machinery shop, contact, Shop Now, Lipa Mdogo).
   The livestock banner keeps its photo. */
.tfm-body .tfm-page-hero:not(.tfm-page-hero--livestock),
.tfm-body .tfm-lipa-hero {
    background: radial-gradient(120% 90% at 100% 0%, #D8ECCD 0%, rgba(216, 236, 205, 0) 60%), var(--tfm-leaf);
    color: var(--tfm-text);
    border-bottom: 1px solid var(--tfm-leaf-line);
}
.tfm-body .tfm-page-hero:not(.tfm-page-hero--livestock) h1,
.tfm-body .tfm-page-hero:not(.tfm-page-hero--livestock) h2,
.tfm-body .tfm-lipa-hero h1,
.tfm-body .tfm-lipa-hero h2 {
    color: var(--tfm-leaf-ink) !important;
    -webkit-text-fill-color: var(--tfm-leaf-ink) !important;
    text-shadow: none;
}
.tfm-body .tfm-page-hero:not(.tfm-page-hero--livestock) .tfm-page-hero-subtitle,
.tfm-body .tfm-lipa-hero p {
    color: var(--tfm-text-light) !important;
    -webkit-text-fill-color: var(--tfm-text-light) !important;
}
.tfm-body .tfm-page-hero:not(.tfm-page-hero--livestock) .tfm-page-hero-breadcrumb { color: var(--tfm-text-muted); }
.tfm-body .tfm-page-hero:not(.tfm-page-hero--livestock) a:not(.tfm-btn),
.tfm-body .tfm-lipa-hero a:not(.tfm-btn) { color: var(--tfm-green) !important; -webkit-text-fill-color: var(--tfm-green) !important; }
.tfm-body .tfm-page-hero:not(.tfm-page-hero--livestock) .tfm-lipa-badges span,
.tfm-body .tfm-lipa-hero .tfm-lipa-badges span { background: #fff; border: 1px solid var(--tfm-leaf-line); color: var(--tfm-leaf-ink); }

/* Closing call-to-action band */
.tfm-body .tfm-cta-section { background: var(--tfm-leaf); border-top: 1px solid var(--tfm-leaf-line); }
.tfm-body .tfm-cta-section h2,
.tfm-body .tfm-cta-section h3 { color: var(--tfm-leaf-ink) !important; -webkit-text-fill-color: var(--tfm-leaf-ink) !important; }
.tfm-body .tfm-cta-section .tfm-cta-content p { color: var(--tfm-text-light) !important; -webkit-text-fill-color: var(--tfm-text-light) !important; }
.tfm-body .tfm-cta-section .tfm-btn-outline-light { color: var(--tfm-green) !important; -webkit-text-fill-color: var(--tfm-green) !important; border-color: var(--tfm-green); background: #fff; }
.tfm-body .tfm-cta-section .tfm-btn-outline-light:hover { background: var(--tfm-green); color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* CEO message */
.tfm-body .tfm-ceo-section { background: var(--tfm-leaf); }
.tfm-body .tfm-ceo-content-col { color: var(--tfm-text); }
.tfm-body .tfm-ceo-section .tfm-ceo-quote-lg { color: var(--tfm-text) !important; -webkit-text-fill-color: var(--tfm-text) !important; }
.tfm-body .tfm-ceo-section .tfm-ceo-name-lg,
.tfm-body .tfm-ceo-section h2,
.tfm-body .tfm-ceo-section h3,
.tfm-body .tfm-ceo-section h4 { color: var(--tfm-leaf-ink) !important; -webkit-text-fill-color: var(--tfm-leaf-ink) !important; }
.tfm-body .tfm-ceo-section .tfm-ceo-role-lg,
.tfm-body .tfm-ceo-section .tfm-ceo-phone-lg { color: var(--tfm-text-light) !important; -webkit-text-fill-color: var(--tfm-text-light) !important; }
.tfm-body .tfm-ceo-section .tfm-ceo-eyebrow { color: var(--tfm-orange-dark) !important; -webkit-text-fill-color: var(--tfm-orange-dark) !important; }
.tfm-body .tfm-ceo-section a:not(.tfm-btn) { color: var(--tfm-orange-dark) !important; -webkit-text-fill-color: var(--tfm-orange-dark) !important; }

/* Terms & Conditions card header */
.tfm-body .tfm-tc-card-header { background: var(--tfm-leaf); border-bottom: 1px solid var(--tfm-leaf-line); }
.tfm-body .tfm-tc-card-header h3 { color: var(--tfm-leaf-ink) !important; -webkit-text-fill-color: var(--tfm-leaf-ink) !important; }
.tfm-body .tfm-tc-card-header .tfm-tc-card-header-text span { color: var(--tfm-text-light) !important; -webkit-text-fill-color: var(--tfm-text-light) !important; }

/* Contact page: light cards, dark readable text (the old guard made the
   text pale on a pale card). */
.tfm-body .tfm-contact-details-grid .tfm-contact-info-card { background: #fff; border-color: var(--tfm-leaf-line); box-shadow: none; }
.tfm-body .tfm-contact-details-grid .tfm-contact-info-card h4 { color: var(--tfm-leaf-ink); }
.tfm-body .tfm-contact-details-grid .tfm-contact-info-card p,
.tfm-body .tfm-contact-details-grid .tfm-contact-info-card small { color: var(--tfm-text-light) !important; -webkit-text-fill-color: var(--tfm-text-light) !important; }
.tfm-body .tfm-contact-details-grid .tfm-contact-info-card p a { color: var(--tfm-text) !important; -webkit-text-fill-color: var(--tfm-text) !important; }
.tfm-body .tfm-contact-details-grid .tfm-contact-info-card p a:hover,
.tfm-body .tfm-contact-details-grid .tfm-contact-directions,
.tfm-body .tfm-contact-details-grid .tfm-contact-directions:hover { color: var(--tfm-green) !important; -webkit-text-fill-color: var(--tfm-green) !important; }
.tfm-body .tfm-contact-details-grid .tfm-hours-list .tfm-hours-days { color: var(--tfm-text) !important; -webkit-text-fill-color: var(--tfm-text) !important; }
.tfm-body .tfm-contact-details-grid .tfm-hours-list .tfm-hours-time { color: var(--tfm-text-light) !important; -webkit-text-fill-color: var(--tfm-text-light) !important; }
.tfm-body .tfm-contact-details-grid .tfm-hours-list .tfm-hours-time-always { color: var(--tfm-green) !important; -webkit-text-fill-color: var(--tfm-green) !important; }
.tfm-body .tfm-contact-details-grid .tfm-contact-info-icon { background: var(--tfm-leaf); color: var(--tfm-green); }
.tfm-body .tfm-contact-cta-card { background: var(--tfm-leaf); border: 1px solid var(--tfm-leaf-line); color: var(--tfm-text); box-shadow: none; }
.tfm-body .tfm-contact-cta-card h3 { color: var(--tfm-leaf-ink) !important; -webkit-text-fill-color: var(--tfm-leaf-ink) !important; }
.tfm-body .tfm-contact-cta-card p { color: var(--tfm-text-light) !important; -webkit-text-fill-color: var(--tfm-text-light) !important; }

.tfm-contact-order-card {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px 22px;
    max-width: 900px; margin: 22px auto 0; padding: 22px 24px;
    background: #fff; border: 1px solid var(--tfm-leaf-line); border-left: 4px solid var(--tfm-orange);
    border-radius: 6px;
}
.tfm-contact-order-icon {
    width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--tfm-orange-light); color: var(--tfm-orange-dark); font-size: 1.3rem;
}
.tfm-body .tfm-contact-order-copy h3 { font-size: 1.2rem; margin-bottom: 4px; color: var(--tfm-leaf-ink); }
.tfm-contact-order-copy p { color: var(--tfm-text-light); font-size: 0.92rem; }
.tfm-contact-order-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) {
    .tfm-contact-order-card { grid-template-columns: 1fr; text-align: left; }
    .tfm-contact-order-actions .tfm-btn { flex: 1 1 100%; }
}

/* ---------- Buttons added in 2.13 ---------- */
.tfm-body .tfm-btn-whatsapp { background: var(--tfm-wa); color: #fff !important; -webkit-text-fill-color: #fff !important; border-color: var(--tfm-wa); }
.tfm-body .tfm-btn-whatsapp:hover { background: var(--tfm-wa-dark); border-color: var(--tfm-wa-dark); transform: translateY(-2px); }
.tfm-body .tfm-btn-glass {
    background: rgba(255, 255, 255, 0.14); color: #fff !important; -webkit-text-fill-color: #fff !important;
    border-color: rgba(255, 255, 255, 0.55); backdrop-filter: blur(4px);
}
.tfm-body .tfm-btn-glass:hover { background: #fff; color: var(--tfm-leaf-ink) !important; -webkit-text-fill-color: var(--tfm-leaf-ink) !important; }
.tfm-body button.tfm-btn { cursor: pointer; font-family: var(--tfm-font-heading); line-height: 1.2; }
.tfm-body .tfm-btn:focus-visible,
.tfm-body button:focus-visible,
.tfm-body a:focus-visible,
.tfm-body select:focus-visible,
.tfm-body summary:focus-visible { outline: 3px solid var(--tfm-orange); outline-offset: 2px; }

/* Skip link */
.tfm-skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 100000;
    background: var(--tfm-green); color: #fff !important; padding: 10px 16px; border-radius: 4px; font-weight: 700;
}
.tfm-skip-link:focus { top: 12px; }

/* Bottom nav "Order" slot is a <button> on livestock pages */
.tfm-body button.tfm-bottom-nav-item { background: none; border: 0; font-family: inherit; cursor: pointer; }
.tfm-body .tfm-bottom-nav-order { color: var(--tfm-orange-dark); }
.tfm-body .tfm-bottom-nav-order i {
    width: 40px; height: 40px; margin-top: -18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--tfm-orange); color: #fff; font-size: 1rem;
    box-shadow: 0 6px 16px -4px rgba(200, 111, 24, 0.6); border: 3px solid #fff;
}

/* =====================================================================
   2. LIVESTOCK BRANCH
   ===================================================================== */

/* Rounder, friendlier geometry across the livestock views */
.tfm-is-livestock .tfm-btn,
.tfm-product-card--livestock .tfm-btn,
.tfm-book-overlay .tfm-btn,
.tfm-contact-order-card .tfm-btn,
.tfm-modal .tfm-lv-assure ~ .tfm-product-actions .tfm-btn { border-radius: var(--tfm-lv-radius-sm); }

/* Livestock photo banner with its own actions */
.tfm-body .tfm-page-hero--livestock {
    background-image: linear-gradient(100deg, rgba(10, 52, 28, 0.94) 0%, rgba(15, 77, 41, 0.82) 50%, rgba(15, 77, 41, 0.35) 100%), url('../data/livestock-images/dairy-cows/friesian-cow-with-calf.jpeg');
    padding: 64px 0 54px;
}
.tfm-page-hero--livestock .tfm-container { align-items: flex-start; text-align: left; }
.tfm-page-hero--livestock .tfm-page-hero-subtitle { margin: 0; max-width: 600px; }
.tfm-page-hero--livestock .tfm-page-hero-breadcrumb { justify-content: flex-start; }
.tfm-page-hero--livestock .tfm-hero-badge { background: rgba(242, 140, 40, 0.95); border-radius: 999px; }
.tfm-page-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.tfm-hero-assurances { justify-content: flex-start; margin-top: 18px; }
.tfm-page-hero--livestock .tfm-hero-assurances span { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; }
@media (max-width: 575px) {
    .tfm-body .tfm-page-hero--livestock { padding: 42px 0 36px; }
    .tfm-page-hero-actions .tfm-btn { flex: 1 1 100%; }
    .tfm-hero-assurances span { font-size: 0.74rem; padding: 7px 12px; }
}

/* Marketplace block header actions */
.tfm-livestock-marketplace { border-radius: var(--tfm-lv-radius); border-top: 0; box-shadow: var(--tfm-lv-shadow); background: #fff; border: 1px solid var(--tfm-leaf-line); }
.tfm-livestock-marketplace-actions { display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0; }
.tfm-livestock-category { border-radius: var(--tfm-lv-radius-sm); overflow: hidden; background: var(--tfm-leaf-soft); border-color: var(--tfm-leaf-line); }
.tfm-livestock-proof strong { color: var(--tfm-leaf-ink); }
@media (max-width: 760px) {
    .tfm-livestock-marketplace-actions { width: 100%; }
    .tfm-livestock-marketplace-actions .tfm-btn { flex: 1 1 100%; }
}

/* ---------- Livestock product card ---------- */
.tfm-body .tfm-product-card--livestock {
    border: 1px solid var(--tfm-leaf-line);
    border-top: 1px solid var(--tfm-leaf-line);
    border-radius: var(--tfm-lv-radius);
    box-shadow: var(--tfm-lv-shadow);
    background: #fff;
}
.tfm-body .tfm-shop-section--livestock .tfm-product-card--livestock { border-top: 1px solid var(--tfm-leaf-line); }
.tfm-body .tfm-product-card--livestock:hover { border-color: var(--tfm-green); transform: translateY(-3px); }
.tfm-product-card--livestock .tfm-product-image { aspect-ratio: 4 / 3; }
.tfm-product-card--livestock .tfm-product-body { gap: 9px; padding: 16px 16px 18px; }
.tfm-lv-chip {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--tfm-leaf); color: var(--tfm-leaf-ink);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2px;
}
.tfm-lv-chip i { color: var(--tfm-green); font-size: 0.7rem; }
.tfm-body .tfm-product-card--livestock .tfm-product-name { font-family: var(--tfm-font-heading); font-size: 1.12rem; font-weight: 700; min-height: 0; color: var(--tfm-navy); cursor: pointer; }
.tfm-lv-summary { color: var(--tfm-text-light); font-size: 0.86rem; line-height: 1.5; }
.tfm-body .tfm-lv-assure { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 0; }
.tfm-lv-assure li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; color: var(--tfm-leaf-ink); }
.tfm-lv-assure i { color: var(--tfm-green); }
.tfm-lv-price {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--tfm-leaf-line);
}
.tfm-lv-price-label { width: 100%; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--tfm-text-muted); }
.tfm-lv-price .tfm-price-now { font-family: var(--tfm-font-heading); font-size: 1.28rem; font-weight: 700; color: var(--tfm-leaf-ink); line-height: 1.2; }
.tfm-lv-actions { padding-top: 4px; }
.tfm-body .tfm-lv-actions .tfm-btn { padding: 12px 14px; font-size: 0.88rem; text-transform: none; letter-spacing: 0.2px; }
.tfm-product-card--livestock .tfm-badge-discount { border-radius: 999px; }
.tfm-product-card--livestock .tfm-quick-view-hint { font-size: 0.78rem; }
@media (max-width: 575px) {
    .tfm-product-card--livestock .tfm-product-body { padding: 12px 12px 14px; }
    .tfm-lv-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.8rem; }
    .tfm-body .tfm-product-card--livestock .tfm-product-name { font-size: 1rem; }
    .tfm-lv-assure li:nth-child(2) { display: none; }
    .tfm-lv-price .tfm-price-now { font-size: 1.05rem; }
    .tfm-body .tfm-lv-actions .tfm-btn { padding: 11px 8px; font-size: 0.8rem; gap: 6px; }
}

/* Quick View - livestock chips */
.tfm-modal-info .tfm-lv-assure { margin: 8px 0 12px; }

/* ---------- Livestock sections (below the grid, and /delivery/) ---------- */
.tfm-lv-section { background: #fff; }
.tfm-lv-section--tint { background: var(--tfm-leaf); }
.tfm-lv-head { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.tfm-lv-head--compact { margin-bottom: 22px; }
.tfm-body .tfm-lv-head h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem); color: var(--tfm-leaf-ink);
    text-transform: none; letter-spacing: 0; margin: 6px 0 12px; line-height: 1.15;
}
.tfm-lv-head p { color: var(--tfm-text-light); font-size: 1rem; }
.tfm-lv-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    background: #fff; border: 1px solid var(--tfm-leaf-line);
    color: var(--tfm-green); font-size: 0.8rem; font-weight: 700;
}
.tfm-lv-section--tint .tfm-lv-eyebrow { background: #fff; }
.tfm-lv-section:not(.tfm-lv-section--tint) .tfm-lv-eyebrow { background: var(--tfm-leaf); border-color: transparent; }

/* Numbered steps: a genuine sequence, so numbers are earned */
.tfm-body ol.tfm-lv-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: none;
    position: relative;
}
.tfm-lv-steps li {
    position: relative; padding: 26px 22px 22px;
    background: #fff; border: 1px solid var(--tfm-leaf-line);
    border-radius: var(--tfm-lv-radius); box-shadow: var(--tfm-lv-shadow);
}
.tfm-lv-section:not(.tfm-lv-section--tint) .tfm-lv-steps li { background: var(--tfm-leaf-soft); box-shadow: none; }
.tfm-lv-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--tfm-green); color: #fff;
    font-family: var(--tfm-font-heading); font-size: 1.15rem; font-weight: 700;
    margin-bottom: 14px;
}
.tfm-lv-step-icon { position: absolute; top: 24px; right: 22px; color: var(--tfm-orange); font-size: 1.3rem; opacity: 0.85; }
.tfm-body .tfm-lv-steps h3 { font-size: 1.15rem; text-transform: none; letter-spacing: 0; color: var(--tfm-leaf-ink); margin-bottom: 8px; }
.tfm-lv-steps p { color: var(--tfm-text-light); font-size: 0.9rem; line-height: 1.55; }
@media (max-width: 1000px) { .tfm-body ol.tfm-lv-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
    .tfm-body ol.tfm-lv-steps { grid-template-columns: 1fr; gap: 12px; }
    .tfm-lv-steps li { padding: 18px 18px 18px 70px; }
    .tfm-lv-step-num { position: absolute; left: 18px; top: 18px; margin: 0; }
    .tfm-lv-step-icon { display: none; }
}

/* The two actions + promises under the steps (screenshot 2) */
.tfm-lv-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.tfm-lv-cta-row--start { justify-content: flex-start; margin-top: 26px; }
.tfm-body .tfm-lv-cta-row .tfm-btn-outline { background: #fff; }
.tfm-body .tfm-lv-cta-row .tfm-btn-outline:hover { background: var(--tfm-green); }
.tfm-body .tfm-lv-trust {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin: 20px 0 0; padding: 0; list-style: none;
}
.tfm-lv-trust--start { justify-content: flex-start; }
.tfm-lv-trust li {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 8px 14px; border-radius: 999px;
    background: #fff; border: 1px solid var(--tfm-leaf-line);
    font-size: 0.84rem; font-weight: 600; color: var(--tfm-leaf-ink);
}
.tfm-lv-trust i { color: var(--tfm-orange); }
@media (max-width: 575px) {
    .tfm-lv-cta-row .tfm-btn { flex: 1 1 100%; }
    .tfm-lv-trust li { font-size: 0.78rem; padding: 7px 12px; }
}

/* Story */
.tfm-body .tfm-livestock-story { margin: 0; padding: 0; background: none; border: 0; }
.tfm-body .tfm-livestock-story-copy h2 { color: var(--tfm-leaf-ink); text-transform: none; letter-spacing: 0; font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 10px 0 14px; }
.tfm-body .tfm-lv-checklist { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 4px; }
.tfm-lv-checklist li { display: flex; gap: 10px; align-items: flex-start; color: var(--tfm-text); font-size: 0.95rem; }
.tfm-lv-checklist i {
    flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--tfm-leaf); color: var(--tfm-green); font-size: 0.66rem;
}
.tfm-livestock-story-grid > div { padding: 14px 16px; border-radius: var(--tfm-lv-radius-sm); background: var(--tfm-leaf-soft); border: 1px solid var(--tfm-leaf-line); }
.tfm-livestock-story-images button { padding: 0; border: 0; background: none; border-radius: var(--tfm-lv-radius-sm); overflow: hidden; cursor: zoom-in; min-height: 140px; }
.tfm-livestock-story-images button:first-child { grid-row: span 2; }
.tfm-body .tfm-livestock-story-images img { border-radius: 0; height: 100%; transition: transform 0.4s ease; }
.tfm-livestock-story-images button:hover img { transform: scale(1.04); }
.tfm-livestock-story-images img:first-child { grid-row: auto; }

/* Offer tiles */
.tfm-body .tfm-livestock-offering-grid { gap: 16px; }
.tfm-lv-offer {
    display: flex; flex-direction: column; gap: 8px; padding: 24px 20px;
    background: #fff; border: 1px solid var(--tfm-leaf-line); border-radius: var(--tfm-lv-radius);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.tfm-lv-offer:hover { border-color: var(--tfm-green); transform: translateY(-3px); }
.tfm-lv-offer-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--tfm-orange-light); color: var(--tfm-orange-dark); font-size: 1.2rem; margin-bottom: 4px; }
.tfm-body .tfm-lv-offer h3 { font-size: 1.12rem; text-transform: none; letter-spacing: 0; color: var(--tfm-leaf-ink); }
.tfm-lv-offer p { color: var(--tfm-text-light); font-size: 0.88rem; }

/* Tours */
.tfm-body .tfm-tours-intro-copy h2 { color: var(--tfm-leaf-ink); text-transform: none; letter-spacing: 0; font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 10px 0 12px; }
.tfm-body .tfm-lv-plan { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.tfm-lv-plan li { display: flex; gap: 10px; align-items: center; color: var(--tfm-text); font-size: 0.92rem; }
.tfm-lv-plan i { color: var(--tfm-green); width: 16px; }
.tfm-tours-intro-images img { border-radius: var(--tfm-lv-radius-sm); }
.tfm-body .tfm-tour-package-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--tfm-leaf-line); border-top: 1px solid var(--tfm-leaf-line);
    border-radius: var(--tfm-lv-radius); background: var(--tfm-leaf-soft);
}
.tfm-body .tfm-tour-package-card h3 { text-transform: none; letter-spacing: 0; color: var(--tfm-leaf-ink); font-size: 1.15rem; }
.tfm-tour-package-card p { flex-grow: 1; }
.tfm-tour-package-icon { background: #fff; }
.tfm-lv-link-btn {
    align-self: flex-start; margin-top: 16px; padding: 0; border: 0; background: none;
    color: var(--tfm-orange-dark); font-family: var(--tfm-font-heading); font-weight: 700; font-size: 0.95rem;
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.tfm-lv-link-btn i { transition: transform 0.2s ease; }
.tfm-lv-link-btn:hover i { transform: translateX(3px); }
.tfm-body .tfm-tours-cta { border-top-color: var(--tfm-leaf-line); }

/* FAQ */
.tfm-lv-faq-wrap { max-width: 860px; }
.tfm-lv-faq { display: flex; flex-direction: column; gap: 10px; }
.tfm-lv-faq details { background: #fff; border: 1px solid var(--tfm-leaf-line); border-radius: var(--tfm-lv-radius-sm); overflow: hidden; }
.tfm-lv-faq details[open] { border-color: var(--tfm-green); }
.tfm-lv-faq summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 18px 20px; font-weight: 700; color: var(--tfm-leaf-ink); font-size: 1rem;
}
.tfm-lv-faq summary::-webkit-details-marker { display: none; }
.tfm-lv-faq summary i {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--tfm-leaf); color: var(--tfm-green); font-size: 0.75rem;
    transition: transform 0.25s ease;
}
.tfm-lv-faq details[open] summary i { transform: rotate(45deg); background: var(--tfm-green); color: #fff; }
.tfm-lv-faq details p { padding: 0 20px 18px; color: var(--tfm-text-light); font-size: 0.95rem; line-height: 1.65; }

/* Closing band */
.tfm-lv-closing { background: var(--tfm-leaf); border-top: 1px solid var(--tfm-leaf-line); padding: 52px 0; }
.tfm-lv-closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.tfm-body .tfm-lv-closing h2 { color: var(--tfm-leaf-ink); text-transform: none; letter-spacing: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 8px; }
.tfm-lv-closing p { color: var(--tfm-text-light); max-width: 560px; }
.tfm-lv-closing-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.tfm-body .tfm-lv-closing .tfm-btn-outline { background: #fff; }
.tfm-body .tfm-lv-closing .tfm-btn-outline:hover { background: var(--tfm-green); }
@media (max-width: 575px) { .tfm-lv-closing-actions, .tfm-lv-closing-actions .tfm-btn { width: 100%; } }

/* ---------- /delivery/ page ---------- */
.tfm-lv-page-hero {
    background: radial-gradient(90% 120% at 0% 0%, #DCEFD2 0%, rgba(220, 239, 210, 0) 55%), var(--tfm-leaf);
    border-bottom: 1px solid var(--tfm-leaf-line);
    padding: 44px 0 56px;
}
.tfm-lv-page-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; }
.tfm-lv-crumbs { font-size: 0.82rem; color: var(--tfm-text-muted); margin-bottom: 16px; display: flex; gap: 8px; align-items: center; }
.tfm-lv-crumbs a { color: var(--tfm-green); font-weight: 600; }
.tfm-lv-crumbs i { font-size: 0.6rem; }
.tfm-body .tfm-lv-page-hero h1 {
    color: var(--tfm-leaf-ink); text-transform: none; letter-spacing: -0.2px;
    font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.06; margin: 14px 0 16px;
}
.tfm-lv-page-hero-copy > p { color: var(--tfm-text-light); font-size: 1.04rem; max-width: 560px; }
.tfm-lv-page-hero-media { margin: 0; position: relative; }
.tfm-lv-page-hero-media img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(15, 77, 41, 0.55);
}
.tfm-lv-page-hero-media figcaption {
    position: absolute; left: 16px; bottom: 16px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.94); color: var(--tfm-leaf-ink); font-size: 0.82rem; font-weight: 700;
}
.tfm-lv-page-hero-media figcaption i { color: var(--tfm-orange); }
@media (max-width: 900px) {
    .tfm-lv-page-hero-grid { grid-template-columns: 1fr; gap: 28px; }
    .tfm-lv-page-hero { padding: 30px 0 40px; }
}

.tfm-body .tfm-lv-counties {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.tfm-lv-counties button {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 11px 14px; border-radius: var(--tfm-lv-radius-sm);
    background: #fff; border: 1px solid var(--tfm-leaf-line);
    font-family: inherit; font-size: 0.92rem; font-weight: 600; color: var(--tfm-text); text-align: left; cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.tfm-lv-counties button i { color: var(--tfm-green); font-size: 0.8rem; }
.tfm-lv-counties button:hover { border-color: var(--tfm-green); background: var(--tfm-green); color: #fff; }
.tfm-lv-counties button:hover i { color: #fff; }
@media (max-width: 480px) { .tfm-body .tfm-lv-counties { grid-template-columns: repeat(2, 1fr); } .tfm-lv-counties button { font-size: 0.84rem; padding: 10px 11px; } }

.tfm-lv-border {
    display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: center;
    margin-top: 30px; padding: 22px 24px; background: #fff;
    border: 1px solid var(--tfm-leaf-line); border-left: 4px solid var(--tfm-orange); border-radius: var(--tfm-lv-radius-sm);
}
.tfm-body .tfm-lv-border h3 { text-transform: none; letter-spacing: 0; color: var(--tfm-leaf-ink); font-size: 1.2rem; margin-bottom: 4px; }
.tfm-lv-border p { color: var(--tfm-text-light); font-size: 0.92rem; }
.tfm-lv-border-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tfm-lv-border-link {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
    background: var(--tfm-leaf-soft); border: 1px solid var(--tfm-leaf-line); font-weight: 700; font-size: 0.88rem; color: var(--tfm-leaf-ink);
}
.tfm-lv-border-link .fa-whatsapp { color: var(--tfm-wa); }
.tfm-lv-border-link:hover { border-color: var(--tfm-wa); }
@media (max-width: 760px) { .tfm-lv-border { grid-template-columns: 1fr; } }

.tfm-lv-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.tfm-lv-gallery button { padding: 0; border: 0; background: var(--tfm-leaf); border-radius: var(--tfm-lv-radius-sm); overflow: hidden; aspect-ratio: 4 / 5; cursor: zoom-in; }
.tfm-lv-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.tfm-lv-gallery button:hover img { transform: scale(1.04); }

/* =====================================================================
   3. BOOKING MODAL
   ===================================================================== */
.tfm-book-overlay {
    position: fixed; inset: 0; z-index: 10050;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(10, 36, 20, 0.55); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity 0.22s ease;
}
.tfm-book-overlay[hidden] { display: none; }
.tfm-book-overlay.active { opacity: 1; }
.tfm-book-dialog {
    position: relative; width: 100%; max-width: 620px; max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
    background: #fff; border-radius: 18px; overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(10, 36, 20, 0.5);
    transform: translateY(14px) scale(0.985); transition: transform 0.24s cubic-bezier(.2,.8,.2,1);
}
.tfm-book-overlay.active .tfm-book-dialog { transform: none; }
.tfm-book-head {
    display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: flex-start;
    padding: 20px 22px 18px; background: var(--tfm-leaf); border-bottom: 1px solid var(--tfm-leaf-line);
}
.tfm-book-head-icon {
    width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: var(--tfm-wa); color: #fff; font-size: 1.35rem;
}
.tfm-body .tfm-book-head h2 { font-size: 1.4rem; color: var(--tfm-leaf-ink); text-transform: none; letter-spacing: 0; margin: 0 0 4px; line-height: 1.2; }
.tfm-book-head p { color: var(--tfm-text-light); font-size: 0.88rem; line-height: 1.45; }
.tfm-book-close {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--tfm-leaf-line); background: #fff;
    color: var(--tfm-text); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem;
}
.tfm-book-close:hover { background: var(--tfm-green); color: #fff; border-color: var(--tfm-green); }
.tfm-book-form { overflow-y: auto; padding: 18px 22px 20px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.tfm-book-form[hidden] { display: none; }
.tfm-book-selected {
    display: flex; gap: 14px; align-items: center; margin-bottom: 16px; padding: 10px;
    border: 1px solid var(--tfm-leaf-line); border-radius: 12px; background: var(--tfm-leaf-soft);
}
.tfm-book-selected[hidden] { display: none; }
.tfm-book-selected img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.tfm-book-selected div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tfm-book-selected-cat { font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--tfm-green); }
.tfm-book-selected strong { font-family: var(--tfm-font-heading); font-size: 1.08rem; color: var(--tfm-navy); line-height: 1.25; }
.tfm-book-selected-price { font-weight: 700; color: var(--tfm-orange-dark); font-size: 0.9rem; }
.tfm-book-fieldset { border: 0; margin: 0 0 6px; padding: 0; min-width: 0; }
.tfm-book-fieldset[hidden] { display: none; }
.tfm-book-fieldset legend {
    padding: 0; margin-bottom: 10px; font-size: 0.74rem; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase; color: var(--tfm-text-muted);
}
.tfm-book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.tfm-book-span-2 { grid-column: 1 / -1; }
.tfm-book-grid [hidden] { display: none; }
.tfm-body .tfm-book-form .tfm-form-group { margin-bottom: 13px; }
.tfm-body .tfm-book-form .tfm-form-group input,
.tfm-body .tfm-book-form .tfm-form-group select,
.tfm-body .tfm-book-form .tfm-form-group textarea {
    width: 100%; min-height: 46px; padding: 11px 13px; font-size: 16px; /* 16px stops iOS zoom */
    border: 1px solid var(--tfm-gray-medium); border-radius: 10px; background: #fff; color: var(--tfm-text); font-family: inherit;
}
.tfm-body .tfm-book-form .tfm-form-group textarea { min-height: 70px; resize: vertical; }
.tfm-body .tfm-book-form .is-invalid { border-color: #C0392B !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14) !important; }
.tfm-optional { font-weight: 500; color: var(--tfm-text-muted); }
.tfm-book-stepper { display: flex; align-items: stretch; border: 1px solid var(--tfm-gray-medium); border-radius: 10px; overflow: hidden; background: #fff; }
.tfm-book-stepper button { width: 46px; border: 0; background: var(--tfm-leaf-soft); color: var(--tfm-green); cursor: pointer; }
.tfm-book-stepper button:hover { background: var(--tfm-leaf); }
.tfm-body .tfm-book-form .tfm-book-stepper input { border: 0; border-radius: 0; text-align: center; min-height: 44px; -moz-appearance: textfield; }
.tfm-book-stepper input::-webkit-outer-spin-button,
.tfm-book-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tfm-book-error {
    margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px;
    background: #FDECEA; color: #8E2A1F; font-size: 0.88rem; font-weight: 600;
}
.tfm-book-error[hidden] { display: none; }
.tfm-book-actions { position: sticky; bottom: -20px; margin: 4px -22px -20px; padding: 14px 22px 18px; background: linear-gradient(180deg, rgba(255,255,255,0.85), #fff 30%); }
.tfm-book-note { margin-top: 10px; font-size: 0.78rem; color: var(--tfm-text-muted); text-align: center; }
.tfm-book-note i { color: var(--tfm-green); margin-right: 4px; }
.tfm-book-done { padding: 36px 26px 30px; text-align: center; outline: none; }
.tfm-book-done[hidden] { display: none; }
.tfm-book-done-icon {
    width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--tfm-leaf); color: var(--tfm-green); font-size: 1.6rem;
    animation: tfm-book-pop 0.4s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes tfm-book-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.tfm-body .tfm-book-done h3 { font-size: 1.4rem; color: var(--tfm-leaf-ink); text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
.tfm-book-done p { color: var(--tfm-text-light); max-width: 420px; margin: 0 auto 20px; }
.tfm-book-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Phones: bottom sheet */
@media (max-width: 640px) {
    .tfm-book-overlay { align-items: flex-end; padding: 0; }
    .tfm-book-dialog { max-width: none; max-height: 92vh; border-radius: 20px 20px 0 0; transform: translateY(40px); }
    .tfm-book-dialog::before {
        content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
        border-radius: 4px; background: rgba(15, 77, 41, 0.25); z-index: 2;
    }
    .tfm-book-head { padding: 20px 16px 14px; gap: 12px; }
    .tfm-book-head-icon { width: 38px; height: 38px; font-size: 1.15rem; }
    .tfm-body .tfm-book-head h2 { font-size: 1.2rem; }
    .tfm-book-form { padding: 14px 16px 16px; }
    .tfm-book-grid { grid-template-columns: 1fr; }
    .tfm-book-actions { margin: 4px -16px -16px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0)); bottom: -16px; }
    .tfm-book-done-actions .tfm-btn { flex: 1 1 100%; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .tfm-body *, .tfm-body *::before, .tfm-body *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .tfm-body .tfm-product-card, .tfm-body .tfm-feature-card, .tfm-body .tfm-category-card { opacity: 1 !important; transform: none !important; }
}

/* ---------- 2.13 polish ---------- */
.tfm-body .tfm-lv-trust.tfm-lv-trust--start { justify-content: flex-start; }
/* Card pair: solid "Book Now", outlined WhatsApp - one primary action */
.tfm-body .tfm-lv-actions .tfm-btn-whatsapp {
    background: #fff; color: var(--tfm-wa-dark) !important; -webkit-text-fill-color: var(--tfm-wa-dark) !important;
    border: 1.5px solid var(--tfm-wa);
}
.tfm-body .tfm-lv-actions .tfm-btn-whatsapp:hover { background: var(--tfm-wa); color: #fff !important; -webkit-text-fill-color: #fff !important; }
.tfm-body #tfm-quick-view-body .tfm-btn { text-transform: none; letter-spacing: 0.2px; }
.tfm-body #tfm-quick-view-body .tfm-btn-whatsapp { background: #fff; color: var(--tfm-wa-dark) !important; -webkit-text-fill-color: var(--tfm-wa-dark) !important; border: 1.5px solid var(--tfm-wa); }
@media (max-width: 639px) {
    .tfm-body .tfm-stats-strip .tfm-stat:nth-child(2n+1) { border-left: 0; }
}
@media (max-width: 400px) {
    .tfm-body .tfm-lv-actions .tfm-btn { white-space: normal; line-height: 1.2; min-height: 44px; padding: 10px 6px; }
}

/* =====================================================================
   2.13.0 - SPECIAL OFFERS + PRIVACY / TERMS PAGES
   ===================================================================== */
.tfm-offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tfm-offer-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid var(--tfm-leaf-line); border-radius: var(--tfm-lv-radius);
    box-shadow: var(--tfm-lv-shadow); transition: border-color 0.2s ease, transform 0.2s ease;
}
.tfm-offer-card:hover { border-color: var(--tfm-orange); transform: translateY(-3px); }
.tfm-offer-media { position: relative; aspect-ratio: 16 / 9; background: var(--tfm-leaf); overflow: hidden; }
.tfm-offer-media img { width: 100%; height: 100%; object-fit: cover; }
.tfm-offer-tag {
    position: absolute; top: 12px; left: 12px;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--tfm-orange); color: #fff; font-size: 0.76rem; font-weight: 700;
    box-shadow: 0 4px 12px -4px rgba(200, 111, 24, 0.6);
}
.tfm-offer-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; flex: 1; }
.tfm-body .tfm-offer-body h3 { font-size: 1.3rem; text-transform: none; letter-spacing: 0; color: var(--tfm-leaf-ink); }
.tfm-offer-blurb { color: var(--tfm-text-light); font-size: 0.9rem; }
.tfm-body .tfm-offer-lines { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--tfm-lv-radius-sm); background: var(--tfm-leaf-soft); }
.tfm-offer-lines li { display: flex; gap: 10px; align-items: flex-start; }
.tfm-offer-qty {
    flex-shrink: 0; min-width: 38px; height: 26px; padding: 0 6px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tfm-green); color: #fff; font-family: var(--tfm-font-heading); font-weight: 700; font-size: 0.9rem;
}
.tfm-offer-line-label { display: flex; flex-direction: column; font-size: 0.88rem; font-weight: 600; color: var(--tfm-text); line-height: 1.35; }
.tfm-offer-line-label small { font-weight: 500; color: var(--tfm-text-muted); font-size: 0.78rem; }
.tfm-offer-perk { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 700; color: var(--tfm-orange-dark); }
.tfm-offer-price { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--tfm-leaf-line); }
.tfm-offer-price-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--tfm-text-muted); }
.tfm-offer-price strong { font-family: var(--tfm-font-heading); font-size: 1.45rem; font-weight: 700; color: var(--tfm-leaf-ink); line-height: 1.15; }
.tfm-offer-price strong.tfm-offer-price-ask { font-size: 1.2rem; }
.tfm-offer-price s { color: var(--tfm-text-muted); font-size: 0.85rem; }
.tfm-offer-price small { font-size: 0.78rem; color: var(--tfm-green); font-weight: 600; }
.tfm-offer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.tfm-body .tfm-offer-actions .tfm-btn { border-radius: var(--tfm-lv-radius-sm); padding: 11px 10px; font-size: 0.86rem; text-transform: none; letter-spacing: 0.2px; }
.tfm-body .tfm-offer-actions .tfm-btn-whatsapp { background: #fff; color: var(--tfm-wa-dark) !important; -webkit-text-fill-color: var(--tfm-wa-dark) !important; border: 1.5px solid var(--tfm-wa); }
.tfm-body .tfm-offer-actions .tfm-btn-whatsapp:hover { background: var(--tfm-wa); color: #fff !important; -webkit-text-fill-color: #fff !important; }
.tfm-offers-more { display: flex; justify-content: center; margin-top: 28px; }
.tfm-body .tfm-offers-more .tfm-btn { background: #fff; border-radius: var(--tfm-lv-radius-sm); }
.tfm-body .tfm-offers-more .tfm-btn:hover { background: var(--tfm-green); }
@media (max-width: 1000px) { .tfm-offer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
    .tfm-offer-grid { grid-template-columns: 1fr; gap: 14px; }
    .tfm-offer-media { aspect-ratio: 2 / 1; }
}

/* ---------- Privacy Policy / Terms of Service ---------- */
.tfm-legal { background: #fff; }
.tfm-legal-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
.tfm-legal-toc {
    position: sticky; top: 150px;
    padding: 20px; border-radius: var(--tfm-lv-radius); background: var(--tfm-leaf-soft); border: 1px solid var(--tfm-leaf-line);
}
.tfm-legal-updated { font-size: 0.78rem; font-weight: 700; color: var(--tfm-text-muted); margin-bottom: 12px; }
.tfm-body .tfm-legal-toc ol { list-style: decimal; padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.tfm-legal-toc li { font-size: 0.88rem; color: var(--tfm-text-muted); }
.tfm-legal-toc a { color: var(--tfm-text); font-weight: 600; }
.tfm-legal-toc a:hover { color: var(--tfm-green); }
.tfm-legal-switch { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tfm-leaf-line); font-size: 0.86rem; font-weight: 700; color: var(--tfm-green) !important; }
.tfm-legal-body { max-width: 760px; }
.tfm-legal-section { scroll-margin-top: 150px; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--tfm-gray); }
.tfm-body .tfm-legal-section h2 { font-size: 1.35rem; text-transform: none; letter-spacing: 0; color: var(--tfm-leaf-ink); margin-bottom: 12px; }
.tfm-legal-section h2 span { color: var(--tfm-orange); margin-right: 4px; }
.tfm-legal-section p, .tfm-legal-section li { font-size: 1rem; line-height: 1.7; color: var(--tfm-text); }
.tfm-legal-section p + p { margin-top: 12px; }
.tfm-body .tfm-legal-section ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.tfm-legal-section ul li { position: relative; padding-left: 20px; }
.tfm-legal-section ul li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--tfm-green); }
.tfm-legal-section a, .tfm-legal-contact p a { color: var(--tfm-green); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.tfm-legal-contact {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
    padding: 22px 24px; border-radius: var(--tfm-lv-radius); background: var(--tfm-leaf); border: 1px solid var(--tfm-leaf-line);
}
.tfm-body .tfm-legal-contact h2 { font-size: 1.3rem; text-transform: none; letter-spacing: 0; color: var(--tfm-leaf-ink); margin-bottom: 4px; }
.tfm-legal-contact p { color: var(--tfm-text-light); }
.tfm-legal-contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tfm-body .tfm-legal-contact .tfm-btn { border-radius: var(--tfm-lv-radius-sm); }
.tfm-body .tfm-legal-contact .tfm-btn-outline { background: #fff; }
.tfm-contact-form-note a, .tfm-book-note a { color: var(--tfm-green); font-weight: 700; text-decoration: underline; }
@media (max-width: 900px) {
    .tfm-legal-grid { grid-template-columns: 1fr; gap: 24px; }
    .tfm-legal-toc { position: static; }
    .tfm-legal-contact-actions, .tfm-legal-contact-actions .tfm-btn { width: 100%; }
}

/* =====================================================================
   2.15.0 - PHOTO BANNERS (home + machinery mirror the livestock banner)
   ===================================================================== */

/* ---------- Homepage hero: full-bleed photo, dark green veil, text on top ---------- */
.tfm-body .tfm-hero { min-height: 560px; background: var(--tfm-green-dark); color: #fff; }
.tfm-body .tfm-hero-slide-bg { display: none; }
.tfm-body .tfm-hero-slide img {
    inset: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 55%;
}
.tfm-body .tfm-hero-slide-overlay,
.tfm-body .tfm-hero-tint-1 .tfm-hero-slide-overlay,
.tfm-body .tfm-hero-tint-2 .tfm-hero-slide-overlay,
.tfm-body .tfm-hero-tint-3 .tfm-hero-slide-overlay {
    background: linear-gradient(100deg, rgba(10, 52, 28, 0.94) 0%, rgba(15, 77, 41, 0.82) 45%, rgba(15, 77, 41, 0.30) 100%);
}
.tfm-body .tfm-hero-slide-overlay::after { background: linear-gradient(to top, rgba(10, 52, 28, 0.45) 0%, rgba(10, 52, 28, 0) 30%); }
.tfm-body .tfm-hero-container { padding-top: 72px; padding-bottom: 96px; }
.tfm-body .tfm-hero-panel { max-width: 640px; border: 0; padding: 0; background: none; box-shadow: none; }
.tfm-body .tfm-hero .tfm-hero-badge { background: rgba(242, 140, 40, 0.95); color: #fff; border-radius: 999px; }
.tfm-body .tfm-hero .tfm-hero-badge i { color: #fff; }
.tfm-body .tfm-hero .tfm-hero-title {
    color: #fff !important; -webkit-text-fill-color: #fff !important;
    font-size: clamp(2rem, 4.8vw, 3.2rem); line-height: 1.08; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.tfm-body .tfm-hero .tfm-hero-tagline { color: #E4F0E7; max-width: 560px; font-size: 1.05rem; }
.tfm-body .tfm-hero .tfm-hero-tagline strong { color: #fff; }
.tfm-body .tfm-hero .tfm-hero-actions .tfm-btn { border-radius: var(--tfm-lv-radius-sm); }
.tfm-body .tfm-hero .tfm-hero-assurances { justify-content: flex-start; margin-top: 20px; }
.tfm-body .tfm-hero .tfm-hero-assurances span { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.24); color: #fff; }
.tfm-body .tfm-hero .tfm-hero-assurances i { color: var(--tfm-orange); }
.tfm-body .tfm-hero-carousel-arrow { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(4px); }
.tfm-body .tfm-hero-carousel-arrow:hover { background: var(--tfm-orange); border-color: var(--tfm-orange); }
.tfm-body .tfm-hero .tfm-hero-carousel-dots { bottom: 58px; }
.tfm-body .tfm-hero .tfm-hero-carousel-dot { background: rgba(255, 255, 255, 0.45); }
.tfm-body .tfm-hero .tfm-hero-carousel-dot.active { background: #fff; }
@media (max-width: 767px) {
    .tfm-body .tfm-hero { min-height: 0; }
    .tfm-body .tfm-hero-container { padding-top: 44px; padding-bottom: 84px; }
    .tfm-body .tfm-hero-slide-overlay,
    .tfm-body .tfm-hero-tint-1 .tfm-hero-slide-overlay,
    .tfm-body .tfm-hero-tint-2 .tfm-hero-slide-overlay,
    .tfm-body .tfm-hero-tint-3 .tfm-hero-slide-overlay { background: linear-gradient(180deg, rgba(10, 52, 28, 0.86) 0%, rgba(15, 77, 41, 0.9) 100%); }
    .tfm-body .tfm-hero-actions .tfm-btn { flex: 1 1 100%; }
    .tfm-body .tfm-hero-carousel-arrow { display: none; }
    .tfm-body .tfm-hero .tfm-hero-assurances span { font-size: 0.74rem; padding: 7px 12px; }
}

/* ---------- Machinery shop banner: same treatment, machinery photo ---------- */
.tfm-body .tfm-page-hero--machinery {
    background-image: linear-gradient(100deg, rgba(10, 52, 28, 0.94) 0%, rgba(15, 77, 41, 0.82) 50%, rgba(15, 77, 41, 0.35) 100%), url('../images/banner/03-banner-3.jpg');
    background-size: cover;
    background-position: center 40%;
}

/* ---------- Delivery page: one hero photo, or a pair for "both" ---------- */
.tfm-lv-page-hero-media--pair { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 12px; }
.tfm-lv-page-hero-media--pair img { aspect-ratio: auto; height: 100%; min-height: 320px; }
.tfm-lv-page-hero-media--pair img:nth-child(2) { margin-top: 36px; height: calc(100% - 36px); }
@media (max-width: 575px) {
    .tfm-lv-page-hero-media--pair img { min-height: 200px; }
    .tfm-lv-page-hero-media--pair img:nth-child(2) { margin-top: 20px; height: calc(100% - 20px); }
}
.tfm-body .tfm-lv-gallery-title {
    display: flex; align-items: center; gap: 10px;
    margin: 30px 0 14px; font-size: 1.15rem; text-transform: none; letter-spacing: 0; color: var(--tfm-leaf-ink);
}
.tfm-body .tfm-lv-gallery-title:first-of-type { margin-top: 0; }
.tfm-lv-gallery-title i { color: var(--tfm-orange); }
/* The slide photo carries z-index:1 from the original split layout, so the
   veil must sit above it or the text loses its contrast. */
.tfm-body .tfm-hero-slide-overlay { z-index: 2; }
@media (max-width: 400px) {
    .tfm-body .tfm-lv-actions .tfm-btn { white-space: normal; }
}
/* Phones: the old split layout pinned a 280px photo under white text with an
   !important white veil. Undo it so the photo fills the banner behind the text. */
@media (max-width: 767px) {
    .tfm-body .tfm-hero { align-items: stretch; }
    .tfm-body .tfm-hero-slide img { top: 0; bottom: 0; height: 100%; object-position: center center; }
    .tfm-body .tfm-hero .tfm-hero-slide-overlay { background: linear-gradient(180deg, rgba(10, 52, 28, 0.80) 0%, rgba(15, 77, 41, 0.92) 100%) !important; }
    .tfm-body .tfm-hero-container { padding-top: 40px; padding-bottom: 84px; text-align: left; }
    .tfm-body .tfm-hero .tfm-hero-title { font-size: clamp(1.7rem, 8vw, 2.2rem); }
    .tfm-body .tfm-hero .tfm-hero-tagline { margin-left: 0; font-size: 0.95rem; }
    .tfm-body .tfm-hero-actions { justify-content: flex-start; }
    .tfm-body .tfm-hero-actions .tfm-btn { flex: 1 1 100%; }
}