/* ===================================================================
   AGRISTAR SUPPLEMENTAL CSS - v2.0
   Covers all Tailwind v4 classes missing from compiled tailwind.css
   Load AFTER tailwind.css for full visual fidelity.
   =================================================================== */

/* === Theme Colors: Updated scheme (header uses #1b5e20 not #2d5a27) === */
.bg-primary-green { background-color: #1b5e20 !important; }
.bg-primary-light { background-color: #2e7d32 !important; }
.bg-primary-dark  { background-color: #0a2e0c !important; }
.text-primary-green { color: #1b5e20 !important; }
.text-primary-light { color: #2e7d32 !important; }
.text-primary-dark  { color: #0a2e0c !important; }
.text-accent-green  { color: #4ade80 !important; }
.border-primary-green { border-color: #1b5e20 !important; }
.border-primary-light { border-color: #2e7d32 !important; }
.border-primary-dark  { border-color: #0a2e0c !important; }
.bg-accent-green { background-color: #4ade80 !important; }
.bg-emerald-400  { background-color: #34d399 !important; }

/* === Hover States === */
.hover\:bg-primary-dark:hover   { background-color: #0a2e0c !important; }
.hover\:bg-primary-green:hover  { background-color: #1b5e20 !important; }
.hover\:text-primary-green:hover{ color: #1b5e20 !important; }
.hover\:text-accent-green:hover { color: #4ade80 !important; }
.hover\:text-white:hover        { color: #ffffff !important; }
.hover\:bg-white\/10:hover      { background-color: rgba(255,255,255,0.10) !important; }
.hover\:-translate-y-0\.5:hover { transform: translateY(-0.125rem); }
.hover\:-translate-y-1:hover    { transform: translateY(-0.25rem); }
.hover\:-translate-y-2:hover    { transform: translateY(-0.5rem); }

/* === Group hover === */
.group:hover .group-hover\:scale-110   { transform: scale(1.1); }
.group:hover .group-hover\:translate-x-2 { transform: translateX(0.5rem); }
.group:hover .group-hover\:opacity-60  { opacity: 0.6; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:rotate-6    { transform: rotate(6deg) scale(1.1); }

/* === Active States === */
.active\:scale-95:active { transform: scale(0.95); }

/* === Shadows === */
.shadow-primary-green\/20 { box-shadow: 0 10px 25px -5px rgba(27,94,32,0.25); }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15)); }
.drop-shadow-md  { filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07)) drop-shadow(0 2px 2px rgba(0,0,0,0.06)); }

/* === Background Opacity / Alpha === */
.bg-white\/5  { background-color: rgba(255,255,255,0.05) !important; }
.bg-white\/10 { background-color: rgba(255,255,255,0.10) !important; }
.bg-white\/20 { background-color: rgba(255,255,255,0.20) !important; }
.bg-black\/60 { background-color: rgba(0,0,0,0.60)       !important; }
.bg-slate-900\/40 { background-color: rgba(15,23,42,0.40) !important; }
.bg-slate-900\/60 { background-color: rgba(15,23,42,0.60) !important; }
.bg-slate-900\/70 { background-color: rgba(15,23,42,0.70) !important; }
.bg-slate-900\/80 { background-color: rgba(15,23,42,0.80) !important; }
.bg-slate-900\/90 { background-color: rgba(15,23,42,0.90) !important; }
.bg-primary-green\/5  { background-color: rgba(27,94,32,0.05) !important; }
.bg-primary-green\/10 { background-color: rgba(27,94,32,0.10) !important; }
.bg-primary-green\/20 { background-color: rgba(27,94,32,0.20) !important; }
.bg-primary-green\/30 { background-color: rgba(27,94,32,0.30) !important; }
.bg-primary-light\/20 { background-color: rgba(46,125,50,0.20) !important; }
.bg-\[\#25d366\]  { background-color: #25D366 !important; }

/* === Border Opacity === */
.border-white\/5  { border-color: rgba(255,255,255,0.05); }
.border-white\/10 { border-color: rgba(255,255,255,0.10); }
.border-white\/20 { border-color: rgba(255,255,255,0.20); }
.border-slate-200\/50      { border-color: rgba(226,232,240,0.50); }
.border-primary-green\/10  { border-color: rgba(27,94,32,0.10); }
.border-primary-green\/20  { border-color: rgba(27,94,32,0.20); }
.border-primary-green\/30  { border-color: rgba(27,94,32,0.30); }

/* === Text Opacity === */
.text-white\/90           { color: rgba(255,255,255,0.90) !important; }
.text-accent-green\/80    { color: rgba(74,222,128,0.80) !important; }
.text-primary-green\/5    { color: rgba(27,94,32,0.05) !important; }

/* === Backdrop Blur === */
.backdrop-blur-sm  { -webkit-backdrop-filter: blur(4px);  backdrop-filter: blur(4px); }
.backdrop-blur-md  { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.backdrop-blur-lg  { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.backdrop-blur-xl  { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

/* === Large Blur (decorative orbs) === */
.blur-\[120px\] { filter: blur(120px); }
.blur-3xl       { filter: blur(64px); }
.blur-xl        { filter: blur(24px); }

/* === Gradients === */
.bg-gradient-to-b  { background-image: linear-gradient(to bottom,      var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.bg-gradient-to-r  { background-image: linear-gradient(to right,        var(--tw-gradient-stops)); }

.from-slate-900\/60 { --tw-gradient-from: rgba(15,23,42,0.60); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15,23,42,0)); }
.from-slate-900\/90 { --tw-gradient-from: rgba(15,23,42,0.90); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15,23,42,0)); }
.via-slate-900\/40  { --tw-gradient-stops: var(--tw-gradient-from), rgba(15,23,42,0.40), var(--tw-gradient-to, rgba(15,23,42,0)); }
.via-slate-900\/70  { --tw-gradient-stops: var(--tw-gradient-from), rgba(15,23,42,0.70), var(--tw-gradient-to, rgba(15,23,42,0)); }
.to-slate-900       { --tw-gradient-to: #0f172a; }
.to-slate-900\/80   { --tw-gradient-to: rgba(15,23,42,0.80); }
.from-\[\#25d366\]  { --tw-gradient-from: #25D366; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, #0a2e0c); }
.to-\[\#128c7e\]    { --tw-gradient-to: #128C7E; }

/* === Animate-in (entrance animations) === */
@keyframes agri-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes agri-slide-up { from { opacity:0; transform: translateY(1rem); } to { opacity:1; transform: translateY(0); } }
.animate-in               { animation: agri-fade-in 0.5s ease-out both; }
.fade-in                  { animation: agri-fade-in 0.5s ease-out both; }
.slide-in-from-bottom-4   { animation: agri-slide-up 0.6s ease-out both; }

/* === Letter-spacing extras === */
.tracking-tighter      { letter-spacing: -0.05em; }
.tracking-\[0\.2em\]   { letter-spacing: 0.2em; }
.tracking-\[0\.3em\]   { letter-spacing: 0.3em; }
.tracking-\[0\.2em\]   { letter-spacing: 0.2em; }

/* === Line-height extras === */
.leading-\[0\.9\] { line-height: 0.9; }
.leading-\[1\.1\] { line-height: 1.1; }

/* === Font heading === */
.font-heading { font-family: 'Outfit', sans-serif; }

/* === Text size extras === */
.text-7xl           { font-size: 4.5rem; line-height: 1; }
.text-8xl           { font-size: 6rem;   line-height: 1; }
.text-\[10px\]      { font-size: 10px;   line-height: 1.4; }
.text-\[1\.8rem\]   { font-size: 1.8rem; }

/* === Rounded extras === */
.rounded-3xl         { border-radius: 1.5rem; }
.rounded-\[3rem\]    { border-radius: 3rem; }
.rounded-\[2rem\]    { border-radius: 2rem; }
.rounded-\[2\.5rem\] { border-radius: 2.5rem; }

/* === Sizing extras === */
.h-\[60vh\]  { height: 60vh; }
.h-\[75vh\]  { height: 75vh; }
.min-h-screen { min-height: 100vh; }
.max-w-5xl   { max-width: 64rem; }
.max-w-7xl   { max-width: 80rem; }
.w-\[50\%\]  { width: 50%; }
.h-\[50\%\]  { height: 50%; }

/* === Padding extras === */
.py-32  { padding-top: 8rem;  padding-bottom: 8rem; }
.py-40  { padding-top: 10rem; padding-bottom: 10rem; }
.py-48  { padding-top: 12rem; padding-bottom: 12rem; }
.py-24  { padding-top: 6rem;  padding-bottom: 6rem; }
.px-10  { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-5   { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1   { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.p-1\.5 { padding: 0.375rem; }

/* === Margin extras === */
.mb-32 { margin-bottom: 8rem; }
.mb-24 { margin-bottom: 6rem; }
.mb-20 { margin-bottom: 5rem; }
.mt-24 { margin-top: 6rem; }

/* === Gap extras === */
.gap-20 { gap: 5rem; }
.gap-24 { gap: 6rem; }
.gap-32 { gap: 8rem; }
.gap-10 { gap: 2.5rem; }

/* === Space-y === */
.space-y-10 > * + * { margin-top: 2.5rem; }
.space-y-6  > * + * { margin-top: 1.5rem; }

/* === Order extras === */
.order-2     { order: 2; }
.order-first { order: -9999; }

/* === Line-clamp === */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* === Overflow extras === */
.overflow-x-hidden { overflow-x: hidden; }
.overflow-hidden   { overflow: hidden; }

/* === Flex extras === */
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow     { flex-grow: 1; }
.items-start   { align-items: flex-start; }

/* === Aspect ratio === */
.aspect-square  { aspect-ratio: 1 / 1; }
.aspect-\[4\/3\]{ aspect-ratio: 4 / 3; }

/* === Decorative position === */
.top-\[-10\%\]    { top: -10%; }
.left-\[-10\%\]   { left: -10%; }
.bottom-\[-10\%\] { bottom: -10%; }
.right-\[-10\%\]  { right: -10%; }
.-translate-y-1\/2{ transform: translateY(-50%); }
.translate-x-1\/2 { transform: translateX(50%); }
.right-8 { right: 2rem; }
.bottom-8{ bottom: 2rem; }

/* === Transitions === */
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-opacity   { transition-property: opacity; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.duration-500 { transition-duration: 500ms; }

/* === Misc === */
.pointer-events-none { pointer-events: none; }
.whitespace-nowrap   { white-space: nowrap; }
.cursor-pointer      { cursor: pointer; }
.italic              { font-style: italic; }

/* === Responsive breakpoints === */
@media (min-width: 640px) {
    .sm\:text-5xl     { font-size: 3rem; line-height: 1; }
    .sm\:text-base    { font-size: 1rem; line-height: 1.5rem; }
    .sm\:text-xs      { font-size: 0.75rem; line-height: 1rem; }
    .sm\:flex-row     { flex-direction: row; }
    .sm\:gap-6        { gap: 1.5rem; }
    .sm\:justify-start{ justify-content: flex-start; }
    .sm\:h-40         { height: 10rem; }
    .sm\:h-48         { height: 12rem; }
}
@media (min-width: 768px) {
    .md\:text-5xl      { font-size: 3rem; line-height: 1; }
    .md\:text-7xl      { font-size: 4.5rem; line-height: 1; }
    .md\:text-4xl      { font-size: 2.25rem; line-height: 2.5rem; }
    .md\:grid-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:flex-row      { flex-direction: row; }
    .md\:mb-12         { margin-bottom: 3rem; }
    .md\:p-6           { padding: 1.5rem; }
    .md\:p-8           { padding: 2rem; }
    .md\:p-10          { padding: 2.5rem; }
    .md\:p-12          { padding: 3rem; }
    .md\:py-32         { padding-top: 8rem; padding-bottom: 8rem; }
    .md\:py-3          { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .md\:h-48          { height: 12rem; }
    .md\:h-60          { height: 15rem; }
    .md\:rounded-2xl   { border-radius: 1rem; }
    .md\:gap-8         { gap: 2rem; }
}
@media (min-width: 1024px) {
    .lg\:text-7xl    { font-size: 4.5rem; line-height: 1; }
    .lg\:text-8xl    { font-size: 6rem;   line-height: 1; }
    .lg\:text-6xl    { font-size: 3.75rem; line-height: 1; }
    .lg\:text-5xl    { font-size: 3rem;   line-height: 1; }
    .lg\:text-4xl    { font-size: 2.25rem; line-height: 2.5rem; }
    .lg\:text-2xl    { font-size: 1.5rem; line-height: 2rem; }
    .lg\:text-xl     { font-size: 1.25rem; line-height: 1.75rem; }
    .lg\:h-\[75vh\]  { height: 75vh; }
    .lg\:py-48       { padding-top: 12rem; padding-bottom: 12rem; }
    .lg\:py-40       { padding-top: 10rem; padding-bottom: 10rem; }
    .lg\:py-24       { padding-top: 6rem;  padding-bottom: 6rem; }
    .lg\:px-8        { padding-left: 2rem; padding-right: 2rem; }
    .lg\:p-16        { padding: 4rem; }
    .lg\:mb-12       { margin-bottom: 3rem; }
    .lg\:mb-8        { margin-bottom: 2rem; }
    .lg\:mb-0        { margin-bottom: 0; }
    .lg\:gap-12      { gap: 3rem; }
    .lg\:gap-16      { gap: 4rem; }
    .lg\:gap-20      { gap: 5rem; }
    .lg\:gap-24      { gap: 6rem; }
    .lg\:gap-32      { gap: 8rem; }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:col-span-1  { grid-column: span 1 / span 1; }
    .lg\:col-span-2  { grid-column: span 2 / span 2; }
    .lg\:hidden      { display: none !important; }
    .lg\:flex        { display: flex !important; }
    .lg\:grid        { display: grid !important; }
    .lg\:order-1     { order: 1; }
    .lg\:order-2     { order: 2; }
    .lg\:order-last  { order: 9999; }
    .lg\:h-16        { height: 4rem; }
    .lg\:w-12        { width: 3rem; }
    .lg\:h-12        { height: 3rem; }
    .lg\:text-left   { text-align: left; }
    .lg\:aspect-square { aspect-ratio: 1 / 1; }
}

/* === Slate & Emerald Palette Extras === */
.bg-slate-900 { background-color: #0f172a !important; }
.bg-slate-950 { background-color: #020617 !important; }
.bg-slate-800 { background-color: #1e293b !important; }
.bg-slate-50  { background-color: #f8fafc !important; }
.bg-slate-100 { background-color: #f1f5f9 !important; }
.text-slate-900 { color: #0f172a !important; }
.text-slate-950 { color: #020617 !important; }
.text-slate-800 { color: #1e293b !important; }
.text-slate-700 { color: #334155 !important; }
.text-slate-600 { color: #475569 !important; }
.text-slate-500 { color: #64748b !important; }
.text-slate-400 { color: #94a3b8 !important; }
.text-slate-300 { color: #cbd5e1 !important; }
.text-slate-200 { color: #e2e8f0 !important; }
.text-slate-100 { color: #f1f5f9 !important; }

.bg-emerald-50  { background-color: #ecfdf5 !important; }
.bg-emerald-100 { background-color: #d1fae5 !important; }
.bg-emerald-500 { background-color: #10b981 !important; }
.text-emerald-300 { color: #6ee7b7 !important; }
.text-emerald-400 { color: #34d399 !important; }
.text-emerald-500 { color: #10b981 !important; }
.border-emerald-100 { border-color: #d1fae5 !important; }
.border-emerald-200 { border-color: #a7f3d0 !important; }
.max-h-\[600px\] { max-height: 600px; }
.max-h-\[620px\] { max-height: 620px; }
.object-top { object-position: top; }

/* === Line Clamp Utilities === */
.line-clamp-1 {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.line-clamp-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* === Drop Shadows for Products === */
.drop-shadow-md { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08)) !important; }
.drop-shadow-lg { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.12)) !important; }
.drop-shadow-xl { filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.15)) !important; }

/* === Universal Image & Layout Fill Utilities === */
.w-full { width: 100% !important; }
.min-w-full { min-width: 100% !important; }
.h-full { height: 100% !important; }
.object-cover { object-fit: cover !important; }
.object-contain { object-fit: contain !important; }
.object-center { object-position: center center !important; }
.object-top { object-position: top center !important; }

/* === Social Brand Colors === */
.bg-brand-whatsapp { background-color: #25D366 !important; color: #ffffff !important; }
.bg-brand-facebook { background-color: #1877F2 !important; color: #ffffff !important; }
.bg-brand-twitter  { background-color: #000000 !important; color: #ffffff !important; }
.bg-brand-linkedin { background-color: #0A66C2 !important; color: #ffffff !important; }

.text-brand-whatsapp { color: #25D366 !important; }
.text-brand-facebook { color: #1877F2 !important; }
.text-brand-twitter  { color: #000000 !important; }
.text-brand-linkedin { color: #0A66C2 !important; }