/* FruitTrade — Figma Desktop 3 (node 90-56) */

:root {
	--ft-primary: #004D40;
	--ft-primary-hover: #00695a;
	--ft-primary-light: #E8F5E9;
	--ft-mint: #C8E6C9;
	--ft-bg: #F8F9FA;
	--ft-bg-warm: #F5F3EF;
	--ft-text: #1A1A1A;
	--ft-text-muted: #6B7280;
	--ft-white: #ffffff;
	--ft-border: #E5E7EB;
	--ft-radius: 12px;
	--ft-radius-lg: 20px;
	--ft-radius-xl: 24px;
	--ft-container: 1240px;
	--ft-shadow: 0 12px 40px rgba(0, 77, 64, 0.08);
}

body.ft-figma-body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	color: var(--ft-text);
	background: var(--ft-white);
	line-height: 1.5;
}

body.ft-figma-body #top,
body.ft-figma-body header:not(.ft-site-header),
body.ft-figma-body footer:not(.ft-site-footer) {
	display: none !important;
}

body.ft-figma-body .megaheader,
body.ft-figma-body #megaheader,
body.ft-figma-body .megamenu-wrapper {
	display: none !important;
}

body.ft-figma-body #content {
	padding: 0;
	margin: 0;
	
}

body.ft-figma-body .container {
	max-width: var(--ft-container);
}

body.ft-figma-body .ft-site-header,
body.ft-figma-body .ft-home,
body.ft-figma-body .ft-site-footer {
	font-family: 'Inter', sans-serif !important;
}

/* Announcement bar */
.ft-announce-bar {
	background: #1a1a1a;
	color: #fff;
	font-size: 13px;
	padding: 8px 0;
	position: relative;
	z-index: 9999;
}

.ft-announce-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	overflow: visible;
}

.ft-announce-social {
	display: none !important;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.ft-announce-icon-box {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,0.25);
	background: rgba(255,255,255,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.85);
	font-size: 13px;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s;
}

.ft-announce-icon-box:hover {
	background: rgba(255,255,255,0.18);
	border-color: rgba(255,255,255,0.5);
	color: #fff;
}

.ft-announce-text {
	display: none !important;
	align-items: center;
	gap: 10px;
	flex: 1;
	justify-content: center;
	color: rgba(255,255,255,0.9);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.ft-announce-nav {
	background: none;
	border: none;
	color: rgba(255,255,255,0.7);
	font-size: 18px;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
	transition: color 0.2s;
}

.ft-announce-nav:hover {
	color: #fff;
}

.ft-announce-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
@media only screen and (min-width: 992px) {
	.ft-announce-right {
    position: relative !important;
    left: 50% !important;
}

}


.ft-announce-account-link {
	display: flex;
	align-items: center;
	gap: 5px;
	color: rgba(255,255,255,0.85);
	text-decoration: none;
	font-size: 12px;
	font-weight: 500;
	transition: color 0.2s;
}

.ft-announce-account-link i {
	font-size: 13px;
	opacity: 0.8;
}

.ft-announce-account-link:hover {
	color: #fff;
}

.ft-announce-sep {
	color: rgba(255,255,255,0.3);
	font-size: 12px;
}

/* Language switcher — Figma pill style (flag + ENG + chevron) */
.ft-lang-switcher {
	display: flex;
	align-items: center;
	position: relative;
}

.ft-lang-switcher .pull-right {
	float: none !important;
}

.ft-lang-switcher form {
	margin: 0;
	padding: 0;
}

.ft-lang-switcher .btn-group {
	position: relative;
}

/* The main pill toggle button */
.ft-lang-switcher .btn.dropdown-toggle {
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 20px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px 4px 6px;
	height: 30px;
	display: flex !important;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s, border-color 0.2s;
	box-shadow: none;
	text-shadow: none;
	letter-spacing: 0.03em;
}

.ft-lang-switcher .btn.dropdown-toggle:hover,
.ft-lang-switcher .btn.dropdown-toggle:focus {
	background: rgba(255,255,255,0.18);
	border-color: rgba(255,255,255,0.5);
	outline: none;
	box-shadow: none;
}

/* Flag image inside button */
.ft-lang-switcher .btn.dropdown-toggle img.ft-lang-flag {
	width: 20px;
	height: 14px;
	object-fit: cover;
	border-radius: 3px;
	display: inline-block;
	flex-shrink: 0;
}

/* Short code text (ENG / ITA) */
.ft-lang-switcher .ft-lang-code {
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Chevron icon */
.ft-lang-switcher .ft-lang-chevron {
	font-size: 10px;
	color: rgba(255,255,255,0.7);
	margin-left: 2px;
}

/* Dropdown menu */
.ft-lang-switcher .dropdown-menu {
	min-width: 110px;
	background: #222;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 10px;
	padding: 6px 0;
	margin-top: 6px;
	z-index: 10000;
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
	box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.ft-lang-switcher .dropdown-menu > li > button {
	background: transparent;
	border: none;
	color: rgba(255,255,255,0.85);
	font-size: 12px;
	font-weight: 500;
	padding: 7px 14px;
	width: 100%;
	text-align: left;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: background 0.15s;
	border-radius: 0;
}

.ft-lang-switcher .dropdown-menu > li > button:hover {
	background: rgba(255,255,255,0.1);
	color: #fff;
}

.ft-lang-switcher .dropdown-menu > li > button img {
	width: 20px;
	height: 14px;
	object-fit: cover;
	border-radius: 3px;
	flex-shrink: 0;
}

/* Hide the default "Language" label text (before .name span) */
.ft-lang-switcher .btn.dropdown-toggle .name {
	display: none;
}

.ft-lang-switcher .btn.dropdown-toggle .hidden-xs {
	display: none !important;
}

/* Header */
.ft-site-header {
	background: var(--ft-white);
	border-bottom: 1px solid var(--ft-border);
	position: sticky;
	top: 0;
	z-index: 900;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Top row: logo (left) | search (center) | tools (right) */
.ft-header-top {
	display: flex;
	align-items: center;
	padding: 14px 0;
	gap: 16px;
}

.ft-logo {
	flex: 1;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* Bottom row: nav links */
.ft-header-nav-bar {
	border-top: 1px solid var(--ft-border);
	background: var(--ft-white);
}

.ft-main-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 36px;
	padding: 10px 0;
}

.ft-logo img {
	max-height: 110px;
	width: auto;
}

.ft-footer-logo-img {
	max-height: 90px;
	/* max-width: 140px; */
	width: auto;
}

.ft-logo h1 {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--ft-primary);
}

.ft-main-nav a {
	color: var(--ft-text);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s;
}

.ft-main-nav a:hover,
.ft-main-nav a.active {
	color: var(--ft-primary);
}

.ft-header-tools {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.ft-icon-btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--ft-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ft-primary);
	background: var(--ft-white);
	text-decoration: none;
	font-size: 16px;
}

.ft-icon-btn:hover {
	background: var(--ft-primary-light);
	border-color: var(--ft-mint);
}

/* Account outline button */
.ft-btn-account,
a.ft-btn-account {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 9px 20px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--ft-text) !important;
	text-decoration: none !important;
	border: 1.5px solid var(--ft-border) !important;
	transition: border-color 0.2s, color 0.2s !important;
	white-space: nowrap;
}

.ft-btn-account:hover,
a.ft-btn-account:hover {
	border-color: var(--ft-primary) !important;
	color: var(--ft-primary) !important;
}

.ft-btn-header,
a.ft-btn-header {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 10px 22px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border-radius: 999px !important;
	background: var(--ft-primary) !important;
	color: var(--ft-white) !important;
	text-decoration: none !important;
	border: none !important;
	white-space: nowrap;
}

.ft-btn-header:hover,
a.ft-btn-header:hover {
	background: var(--ft-primary-hover) !important;
	color: var(--ft-white) !important;
}

.ft-header-search-wrap {
	flex: 0 0 460px;
	max-width: 460px;
	display: flex;
	align-items: center;
}

/* Clean search bar — no Bootstrap table layout */
.ft-header-search-wrap #search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--ft-bg);
	border: 1.5px solid var(--ft-border);
	border-radius: 999px;
	padding: 5px 5px 5px 14px;
	transition: border-color 0.2s, box-shadow 0.2s;
	width: 100%;
	box-sizing: border-box;
}

.ft-header-search-wrap #search:focus-within {
	border-color: var(--ft-primary);
	box-shadow: 0 0 0 3px rgba(0, 77, 64, 0.1);
	background: #fff;
}

.ft-header-search-wrap #search .ft-si {
	color: #9CA3AF;
	font-size: 14px;
	flex-shrink: 0;
	pointer-events: none;
}

.ft-header-search-wrap #search input[name="search"] {
	border: none;
	outline: none;
	background: transparent;
	flex: 1;
	font-size: 14px;
	color: var(--ft-text);
	padding: 0;
	min-width: 0;
	height: 32px;
	font-family: inherit;
}

.ft-header-search-wrap #search input[name="search"]::placeholder {
	color: #9CA3AF;
}

.ft-header-search-wrap #search button {
	background: var(--ft-primary);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 0 18px;
	height: 34px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
	white-space: nowrap;
	flex-shrink: 0;
	font-family: inherit;
	line-height: 1;
}

.ft-header-search-wrap #search button:hover {
	background: var(--ft-primary-hover);
}

.ft-cart-wrap.hide {
	display: none;
}

/* Buttons */
.ft-btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s;
	text-align: center;
}

.ft-btn-primary,
a.ft-btn-primary {
	background: var(--ft-primary) !important;
	color: var(--ft-white) !important;
}

.ft-btn-primary:hover,
a.ft-btn-primary:hover {
	background: var(--ft-primary-hover) !important;
	color: var(--ft-white) !important;
}

.ft-btn-sm {
	padding: 8px 16px;
	font-size: 12px;
	border-radius: 8px;
}

.ft-btn-white,
a.ft-btn-white {
	background: var(--ft-white) !important;
	color: var(--ft-primary) !important;
}

.ft-btn-white:hover {
	background: var(--ft-primary-light) !important;
}

/* (bento overlay removed — replaced by ft-cat-card design) */

.ft-btn-card {
	display: block;
	width: 100%;
	background: var(--ft-primary);
	color: var(--ft-white) !important;
	padding: 10px 16px;
	border-radius: var(--ft-radius);
	font-size: 13px;
	text-align: center;
}

.ft-btn-card:hover {
	background: var(--ft-primary-hover);
	color: var(--ft-white) !important;
}

/* Hero — full-width admin banner slideshow */
body.ft-figma-body {
	overflow-x: hidden;
}

.ft-home {
	overflow-x: hidden;
}

.ft-hero-banner {
	display: none !important;
	padding: 0;
	margin: 0;
	background: transparent;
	position: relative;
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.ft-hero-slider {
	position: relative;
	width: 100%;
	line-height: 0;
}

.ft-hero-slide {
	display: none;
	width: 100%;
}

.ft-hero-slide.active {
	display: block;
}

.ft-hero-slide-inner {
	position: relative;
	width: 100%;
	height: clamp(420px, 52vw, 600px);
	overflow: hidden;
	background: #F0F0EA;
	display: flex;
	align-items: center;
}

/* Left-side gradient ensures overlay text is always readable */
.ft-hero-slide-inner::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 60%;
	background: linear-gradient(to right, rgba(240,240,234,0.92) 0%, rgba(240,240,234,0.7) 55%, transparent 100%);
	z-index: 1;
	pointer-events: none;
}

/* Image covers the full hero background */
.ft-hero-banner-link {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.ft-hero-banner-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	border: 0;
}

/* Standalone image (no link wrapper) — also full background */
.ft-hero-slide-inner > .ft-hero-banner-img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.ft-hero-overlay {
	position: absolute;
	z-index: 3;
	max-width: 50%;
	padding: 32px 40px;
	color: #111;
	pointer-events: none;
}

.ft-hero-overlay .ft-hero-overlay-btn,
.ft-hero-overlay a.ft-hero-overlay-btn {
	pointer-events: auto;
	position: relative;
	z-index: 5;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
}

.ft-overlay-left {
	left: var(--ft-ox, 8%);
	transform: translateY(var(--ft-oy, 0%));
}

.ft-overlay-center {
	left: 50%;
	transform: translate(calc(-50% + var(--ft-ox, 0%)), var(--ft-oy, 0%));
}

.ft-overlay-right {
	right: var(--ft-ox, 8%);
	left: auto;
	transform: translateY(var(--ft-oy, 0%));
}

.ft-overlay-v-top.ft-overlay-left,
.ft-overlay-v-top.ft-overlay-right {
	top: calc(8% + var(--ft-oy, 0%));
	transform: none;
}

.ft-overlay-v-top.ft-overlay-left {
	left: var(--ft-ox, 8%);
}

.ft-overlay-v-top.ft-overlay-right {
	right: var(--ft-ox, 8%);
	left: auto;
}

.ft-overlay-v-top.ft-overlay-center {
	top: calc(8% + var(--ft-oy, 0%));
	left: 50%;
	transform: translateX(-50%);
}

.ft-overlay-v-middle.ft-overlay-left {
	top: 50%;
	left: var(--ft-ox, 8%);
	transform: translateY(calc(-50% + var(--ft-oy, 0%)));
}

.ft-overlay-v-middle.ft-overlay-right {
	top: 50%;
	right: var(--ft-ox, 8%);
	left: auto;
	transform: translateY(calc(-50% + var(--ft-oy, 0%)));
}

.ft-overlay-v-middle.ft-overlay-center {
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% + var(--ft-ox, 0%)), calc(-50% + var(--ft-oy, 0%)));
}

.ft-overlay-v-bottom.ft-overlay-left {
	bottom: calc(12% - var(--ft-oy, 0%));
	left: var(--ft-ox, 8%);
	top: auto;
	transform: none;
}

.ft-overlay-v-bottom.ft-overlay-right {
	bottom: calc(12% - var(--ft-oy, 0%));
	right: var(--ft-ox, 8%);
	left: auto;
	top: auto;
	transform: none;
}

.ft-overlay-v-bottom.ft-overlay-center {
	bottom: calc(12% - var(--ft-oy, 0%));
	top: auto;
	left: 50%;
	transform: translateX(-50%);
}

.ft-hero-overlay-title {
	margin: 0 0 16px;
	font-weight: 800;
	color: #111;
	line-height: 1.1;
	text-shadow: none;
}

.ft-hero-overlay-text {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.6;
	color: #444;
	text-shadow: none;
}

.ft-overlay-size-sm .ft-hero-overlay-title {
	font-size: 30px;
}

.ft-overlay-size-md .ft-hero-overlay-title {
	font-size: 48px;
}

.ft-overlay-size-lg .ft-hero-overlay-title {
	font-size: 60px;
}

.ft-overlay-size-sm .ft-hero-overlay-text {
	font-size: 14px;
}

.ft-overlay-size-lg .ft-hero-overlay-text {
	font-size: 18px;
}

.ft-hero-banner .ft-hero-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	margin-top: 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.85);
}

.ft-hero-dots span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #D1D5DB;
}

.ft-hero-dots span.active {
	background: var(--ft-primary);
}

.ft-hero-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: #D1D5DB;
	cursor: pointer;
}

.ft-hero-dot.active {
	background: var(--ft-primary);
}

/* Hero prev/next arrows */
.ft-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.88);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: var(--ft-primary);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
	transition: background 0.2s, color 0.2s;
	padding: 0;
	line-height: 1;
}

.ft-hero-arrow:hover {
	background: var(--ft-primary);
	color: #fff;
}

.ft-hero-arrow.ft-hero-prev {
	left: 18px;
}

.ft-hero-arrow.ft-hero-next {
	right: 18px;
}

/* ============================================================
   Category Cards — Figma Design
   ============================================================ */
.ft-categories {
	display: none !important;
	padding: 40px 0 56px;
	background: var(--ft-white);
}

/* 3-column grid: large card left, stack of 2 center, tall card right */
.ft-cat-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}

/* Stack: two small cards stacked vertically */
.ft-cat-stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Base card style */
.ft-cat-card {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	position: relative;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.ft-cat-card:hover {
	box-shadow: 0 12px 32px rgba(0,0,0,0.12);
	transform: translateY(-2px);
	text-decoration: none;
}

/* Large card: taller — text top, image bottom-left */
.ft-cat-large {
	min-height: 420px;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
}

/* Tall card: 4th column, same height as large */
.ft-cat-tall {
	min-height: 420px;
}

/* Tall card — full background image */
.ft-cat-tall.ft-cat-bg-card {
	display: block;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.ft-cat-tall.ft-cat-bg-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 35%, rgba(0, 0, 0, 0.22) 100%);
	pointer-events: none;
	z-index: 0;
}

.ft-cat-tall.ft-cat-bg-card .ft-cat-body {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	padding: 24px 28px 28px;
	width: auto;
	max-width: 92%;
	flex: none;
	align-items: flex-start;
	text-align: left;
}

/* Small cards in the stack */
.ft-cat-small {
	flex: 1;
	min-height: 200px;
}

/* Text block (left side) — top-aligned */
.ft-cat-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	padding: 28px 0 28px 28px;
	flex: 1;
	z-index: 1;
}

/* Small uppercase tag */
.ft-cat-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4a6545;
	line-height: 1;
	margin: 0;
}

/* Bold category title */
.ft-cat-title {
	font-size: 22px;
	font-weight: 700;
	color: #1a2e1a;
	line-height: 1.25;
	margin: 0;
}

.ft-cat-small .ft-cat-title {
	font-size: 18px;
}

/* "Apply for Access" pill button */
.ft-cat-btn {
	display: inline-block;
	background: #1a3a2a;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 10px 20px;
	border-radius: 50px;
	margin-top: 4px;
	transition: background 0.2s;
	white-space: nowrap;
}

.ft-cat-card:hover .ft-cat-btn {
	background: #2d5a3d;
}

/* Image wrapper — right side, bottom-aligned */
.ft-cat-img-wrap {
	flex-shrink: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	width: 45%;
	overflow: hidden;
}

.ft-cat-large .ft-cat-img-wrap {
	width: 65%;
	min-height: 0;
	flex: 1 1 auto;
	align-self: flex-start;
	align-items: flex-end;
	justify-content: flex-start;
	padding-left: 8px;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: auto;
	overflow: visible;
}

.ft-cat-large .ft-cat-img-wrap-left {
	order: 2;
}

.ft-cat-large .ft-cat-body {
	order: 1;
	padding: 28px 28px 8px 28px;
	justify-content: flex-start;
	flex: 0 0 auto;
	width: 100%;
}

.ft-cat-large .ft-cat-img {
	object-position: left bottom;
	width: 130%;
	max-width: none;
	height: auto;
	min-height: 360px;
	max-height: none;
	object-fit: contain;
	transform-origin: left bottom;
}

/* Product image — PNG cutouts from catalog/banners */
.ft-cat-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right bottom;
	display: block;
	transition: transform 0.35s ease;
}

.ft-cat-card:hover .ft-cat-img {
	transform: scale(1.05);
}

.ft-cat-large:hover .ft-cat-img {
	transform: scale(1.04);
	transform-origin: left bottom;
}

/* Products */
.ft-products-section {
	padding: 60px 0;
}

.ft-products-section-alt {
	background: var(--ft-bg);
}

.ft-section-title-left {
	font-size: 26px;
	font-weight: 700;
	color: var(--ft-text);
	margin: 0 0 28px;
	text-align: left;
}

/* Section header: title left, VIEW ALL right */
.ft-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
}

.ft-section-header .ft-section-title-left {
	margin: 0;
}

.ft-view-all {
	font-size: 13px;
	font-weight: 600;
	color: var(--ft-primary);
	text-decoration: none;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ft-view-all:hover {
	color: var(--ft-primary-dark, #003d33);
	text-decoration: underline;
}

/* Carousel outer wrapper — positions the side arrows */
.ft-carousel-wrap {
	position: relative;
	padding: 0 52px;
}

/* Horizontal flex carousel — hides scrollbar but stays scrollable via JS */
.ft-product-grid-4 {
	display: flex;
	overflow-x: hidden;
	scroll-behavior: smooth;
	gap: 22px;
}

/* Each card takes exactly 1/4 of the visible area (4 cards in one row) */
.ft-product-grid-4 .ft-product-card {
	flex: 0 0 calc(25% - 17px);
	min-width: 0;
}

.ft-product-card {
	background: var(--ft-white);
	border: 1px solid var(--ft-border);
	border-radius: var(--ft-radius-lg);
	overflow: hidden;
	transition: box-shadow 0.22s, transform 0.22s;
	display: flex;
	flex-direction: column;
}

.ft-product-card:hover {
	box-shadow: 0 8px 28px rgba(0,0,0,0.10);
	transform: translateY(-3px);
}

.ft-product-thumb {
	display: block;
	overflow: hidden;
	border-radius: var(--ft-radius-lg) var(--ft-radius-lg) 0 0;
}

.ft-product-thumb img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	border-radius: var(--ft-radius-lg) var(--ft-radius-lg) 0 0;
	transition: transform 0.3s;
}

.ft-product-card:hover .ft-product-thumb img {
	transform: scale(1.04);
}

.ft-product-info {
	padding: 14px 16px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ft-product-name {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 6px;
	line-height: 1.4;
}

.ft-product-name a {
	color: var(--ft-text);
	text-decoration: none;
}

.ft-product-name a:hover {
	color: var(--ft-primary);
}

.ft-product-rating {
	color: #F59E0B;
	font-size: 12px;
	margin-bottom: 6px;
}

.ft-product-price {
	font-size: 16px;
	font-weight: 700;
	color: var(--ft-primary);
	margin: 0 0 14px;
	flex: 1;
}

.ft-price-old {
	font-size: 13px;
	color: var(--ft-text-muted);
	font-weight: 400;
	text-decoration: line-through;
}

/* Carousel side-arrow buttons — sit inside .ft-carousel-wrap padding */
.ft-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1.5px solid var(--ft-border);
	background: var(--ft-white);
	color: var(--ft-primary);
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	padding: 0;
}

.ft-arrow[aria-label="Previous"] {
	left: 0;
}

.ft-arrow[aria-label="Next"] {
	right: 0;
}

.ft-arrow:hover {
	background: var(--ft-primary);
	border-color: var(--ft-primary);
	color: #fff;
	box-shadow: 0 4px 12px rgba(0,77,64,0.18);
}

.ft-arrow:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* Get More button row */
.ft-section-more {
	display: none;
	justify-content: center;
	margin-top: 36px;
}

.ft-btn-outline {
	display: inline-block;
	padding: 11px 36px;
	border-radius: 999px;
	border: 2px solid var(--ft-primary);
	color: var(--ft-primary);
	background: transparent;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.18s, color 0.18s;
}

.ft-btn-outline:hover {
	background: var(--ft-primary);
	color: #fff;
}

/* ============================================================
   Why FreshTrade — Figma overlay layout
   ============================================================ */
.ft-why {
	padding: 64px 0;
}

.ft-why-panel {
	background: #1b3d33;
	border-radius: 28px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1.2fr 1fr;
	align-items: stretch;
	min-height: 480px;
}

/* Left & right — stacked / overlapping image pairs */
.ft-why-visual {
	position: relative;
	min-height: 480px;
	background: #1b3d33;
	overflow: hidden;
}

.ft-why-visual-base {
	position: absolute;
	bottom: 0;
	width: 115%;
	height: 92%;
	object-fit: cover;
	object-position: center bottom;
	z-index: 1;
	display: block;
	border-radius: 16px;
}

.ft-why-visual-overlay {
	position: absolute;
	top: 10%;
	width: 46%;
	height: 52%;
	object-fit: cover;
	object-position: center;
	border-radius: 18px;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
	z-index: 2;
	display: block;
}

/* Left column — two similar-sized cards, closer together */
.ft-why-visual-left .ft-why-visual-base {
	left: 14%;
	bottom: 14%;
	width: 46%;
	height: 52%;
	top: auto;
	object-fit: cover;
	object-position: center;
	border-radius: 18px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

.ft-why-visual-left .ft-why-visual-overlay {
	top: 8%;
	right: auto;
	left: 36%;
	width: 46%;
	height: 52%;
}

/* Right column — mirror of left: two similar-sized cards, closer together */
.ft-why-visual-right .ft-why-visual-base {
	right: 14%;
	left: auto;
	bottom: 14%;
	width: 46%;
	height: 52%;
	top: auto;
	object-fit: cover;
	object-position: center;
	border-radius: 18px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

.ft-why-visual-right .ft-why-visual-overlay {
	top: 8%;
	left: auto;
	right: 36%;
	width: 46%;
	height: 52%;
}

/* Center — title + body */
.ft-why-content {
	padding: 48px 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.ft-why-title {
	font-size: 34px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 20px;
	line-height: 1.2;
}

.ft-why-title-brand {
	color: #FFE551;
}

.ft-why-desc {
	font-size: 15px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
	text-align: center;
	max-width: 420px;
}

/* Promo — full image background + overlaid text */
.ft-promo-banner {
	padding: 48px 0 72px;
}

.ft-promo-inner {
	position: relative;
	height: 380px;
	border-radius: var(--ft-radius-xl);
	overflow: hidden;
	background-color: #C5DCE8;
	background-size: cover;
	background-position: left center;
	background-repeat: no-repeat;
}

.ft-promo-content {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	padding: 56px 48px 56px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	box-sizing: border-box;
}

.ft-promo-title {
	font-size: 42px;
	font-weight: 700;
	color: var(--ft-primary);
	margin: 0 0 16px;
	line-height: 1.15;
	max-width: 400px;
}

.ft-promo-sub {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ft-text-muted);
	margin: 0 0 28px;
	max-width: 360px;
}

.ft-promo-btn {
	padding: 14px 36px;
	font-size: 15px;
}

/* Footer — Figma Desktop 3 */
.ft-site-footer {
	background: var(--ft-white);
	margin: 0;
	padding: 0;
}

.ft-footer-main {
	background: var(--ft-white);
	border-top: 1px solid var(--ft-border);
	padding: 40px 0 0;
}

.ft-footer-logo-col {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding-right: 8px;
}

.ft-footer-logo-link {
	display: block;
	line-height: 0;
}

.ft-footer-logo-img {
	max-height: 115px;
	width: auto;
	height: auto;
	display: block;
}

.ft-footer-grid {
	display: grid;
	grid-template-columns: 150px repeat(4, 1fr);
	gap: 28px 32px;
	align-items: start;
}

.ft-footer-col,
.ft-footer-social-col {
	align-self: start;

}
.ft-footer-social-col {
    align-self: start;
    display: none;
}

.ft-footer-grid:not(:has(.ft-footer-logo-col)) {
	grid-template-columns: repeat(4, 1fr);
}

.ft-footer-social-col .ft-footer-social {
	margin-top: 0;
	flex-wrap: nowrap;
	gap: 6px;
}

.ft-footer-social {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	align-items: center;
}

.ft-footer-social-link {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--ft-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	line-height: 1;
	flex-shrink: 0;
	transition: background 0.2s, transform 0.15s;
}

.ft-footer-social-link:hover {
	background: var(--ft-primary-hover);
	color: #fff;
	transform: translateY(-1px);
}

.ft-social-svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	display: block;
}

.ft-footer-col-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--ft-primary);
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 18px;
	line-height: 1.3;
}

.ft-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ft-footer-col ul li {
	margin-bottom: 10px;
}

.ft-footer-col ul li a {
	font-size: 14px;
	color: var(--ft-text-muted);
	text-decoration: none;
	transition: color 0.2s;
	line-height: 1.55;
}

.ft-footer-col ul li a:hover {
	color: var(--ft-primary);
}

.ft-footer-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ft-footer-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
	font-size: 14px;
	color: var(--ft-text-muted);
	line-height: 1.55;
}

.ft-footer-contact-list li a {
	color: var(--ft-text-muted);
	text-decoration: none;
	transition: color 0.2s;
}

.ft-footer-contact-list li a:hover {
	color: var(--ft-primary);
}

.ft-contact-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ft-primary-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ft-primary);
}

.ft-footer-newsletter p {
	font-size: 14px;
	color: var(--ft-text-muted);
	margin: 0 0 16px;
	line-height: 1.6;
	max-width: 320px;
}

.ft-newsletter-form {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 10px;
	max-width: 100%;
}

.ft-newsletter-input {
	flex: 1;
	min-width: 0;
	padding: 12px 16px;
	border: 1.5px solid var(--ft-border);
	border-radius: 999px;
	font-size: 14px;
	font-family: inherit;
	background: var(--ft-white);
	color: var(--ft-text);
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.ft-newsletter-input:focus {
	outline: none;
	border-color: var(--ft-primary);
}

.ft-newsletter-btn {
	width: auto;
	flex-shrink: 0;
	padding: 12px 24px;
	white-space: nowrap;
}

.ft-footer-bottom {
	background: var(--ft-primary-light);
	border-top: 1px solid #d4ead8;
	padding: 18px 0;
}

.ft-footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.ft-footer-copyright {
	margin: 0;
	font-size: 13px;
	color: #4a6b55;
	line-height: 1.5;
}

.ft-footer-bottom-right {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.ft-footer-payment {
	display: none;
	align-items: center;
	gap: 10px;
}

.ft-footer-payment img {
	max-height: 28px;
	width: auto;
	display: block;
}

.ft-footer-bottom-social {
	display: flex;
	gap: 8px;
}

.ft-footer-bottom-social a:hover {
	background: var(--ft-primary);
	border-color: var(--ft-primary);
	color: var(--ft-white);
}

.ft-footer-social-section {
	margin-top: 8px;
	padding-top: 28px;
	border-top: 1px solid var(--ft-border);
}

.ft-footer-social-col .ft-footer-social-section {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* Legacy .ft-social support */
.ft-social {
	display: flex;
	gap: 10px;
}

.ft-social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ft-white);
	border: 1px solid var(--ft-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ft-primary);
	text-decoration: none;
}

.ft-social a:hover {
	background: var(--ft-primary);
	color: var(--ft-white);
}

/* Responsive */
@media (max-width: 991px) {
	.ft-promo-inner {
		height: clamp(280px, 70vw, 380px);
		background-size: cover;
		background-position: left center;
	}

	.ft-promo-content {
		position: relative;
		width: 100%;
		padding: 32px 28px 36px;
		background: rgba(209, 232, 230, 0.92);
	}

	.ft-promo-title {
		font-size: 30px;
		margin-bottom: 12px;
	}

	.ft-promo-sub {
		font-size: 14px;
		margin-bottom: 20px;
	}

	.ft-hero-slide-inner {
		height: clamp(220px, 50vw, 380px);
	}

	.ft-overlay-size-md .ft-hero-overlay-title {
		font-size: 30px;
	}

	.ft-overlay-size-lg .ft-hero-overlay-title {
		font-size: 36px;
	}

	.ft-hero-overlay {
		max-width: 92vw;
		padding: 12px 16px;
	}

	/* Category cards — tablet */
	.ft-cat-grid {
		grid-template-columns: 1fr;
	}

	.ft-cat-large {
		min-height: 320px;
	}

	.ft-cat-stack {
		flex-direction: row;
	}

	.ft-cat-small {
		min-height: 180px;
	}

	.ft-why-panel {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.ft-why-content {
		order: 1;
		padding: 32px 24px 28px;
	}

	.ft-why-visual-left {
		order: 2;
		min-height: 240px;
		height: 240px;
	}

	.ft-why-visual-right {
		order: 3;
		min-height: 240px;
		height: 240px;
	}

	.ft-why-visual-overlay {
		width: 40%;
		height: 48%;
	}

	.ft-why-title {
		font-size: 28px;
	}

	.ft-footer-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 24px;
	}

	.ft-footer-logo-col {
		grid-column: 1 / -1;
		padding-right: 0;
		margin-bottom: 4px;
	}

	.ft-footer-social-col {
		grid-column: 1 / -1;
	}

	.ft-product-grid-4 .ft-product-card {
		flex: 0 0 calc(50% - 11px);
	}

	.ft-carousel-wrap {
		padding: 0 44px;
	}

	.ft-main-nav {
		display: none;
	}

	.ft-header-search-wrap {
		display: none;
	}
}

/* Tablet/small desktop (576–991px): show search and nav */
@media (min-width: 576px) and (max-width: 991px) {
	.ft-header-search-wrap {
		display: flex;
		flex: 0 0 300px;
		max-width: 300px;
	}

	.ft-main-nav {
		display: flex;
		gap: 20px;
	}

	.ft-header-top {
		padding: 10px 0;
	}
}

@media (max-width: 575px) {
	.ft-product-grid-4 .ft-product-card {
		flex: 0 0 calc(100% - 0px);
	}

	.ft-carousel-wrap {
		padding: 0 38px;
	}

	.ft-cat-stack {
		flex-direction: column;
	}

	.ft-cat-title {
		font-size: 16px;
	}

	.ft-cat-img {
		max-height: 120px;
	}

	.ft-footer-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.ft-footer-logo-col {
		grid-column: auto;
	}

	.ft-footer-bottom-inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 12px;
	}

	/* On mobile: keep image as full background, adjust text overlay */
	.ft-hero-slide-inner {
		height: clamp(320px, 60vw, 480px);
		flex-direction: column;
		justify-content: center;
		padding-top: 0;
	}

	.ft-hero-banner-link,
	.ft-hero-slide-inner > .ft-hero-banner-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.ft-hero-slide-inner::before {
		width: 100%;
		background: linear-gradient(to bottom, rgba(240,240,234,0.85) 0%, rgba(240,240,234,0.5) 60%, transparent 100%);
	}

	.ft-hero-overlay {
		position: absolute;
		max-width: 90%;
		padding: 24px 20px 16px;
		left: 5% !important;
		right: auto !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
	}
}

/* =============================================
   BATCH INFORMATION SECTION (legacy markup)
   ============================================= */

.batch-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	padding: 16px;
}

.batch-card {
	border: 1px solid #e0e8e0;
	border-radius: 8px;
	padding: 14px 16px;
	background: #fff;
}

.batch-card .list-unstyled {
	margin: 0;
	padding: 0;
	list-style: none;
}

.batch-card .list-unstyled li {
	padding: 4px 0;
	font-size: 14px;
	line-height: 1.5;
	color: #333;
	border-bottom: 1px solid #f0f4f0;
}

.batch-card .list-unstyled li:last-child {
	border-bottom: none;
}

@media (max-width: 767px) {
	.batch-list {
		grid-template-columns: 1fr;
		padding: 12px;
	}
}
.ft-footer-col:last-child {
    display: none !important;
}
.ft-footer-col:nth-of-type(4) {
  all: unset; display: none !important;
}