/* ============================================================
   Kulsum Agro — Design tokens
   Same brand palette established for the site already (kept
   identical on purpose — this is our own brand, not borrowed).
   ============================================================ */
:root{
	--ka-green-950:#0E220A;
	--ka-green-900:#173a12;
	--ka-green-800:#1f4d19;
	--ka-green-700:#2a6a22;
	--ka-green:#38A000;
	--ka-green-light:#4FC814;
	--ka-green-50:#EEF8E8;
	--ka-green-100:#DCF0D0;

	--ka-amber:#F5A623;
	--ka-amber-dark:#D98A0D;
	--ka-discount:#D6273C;

	--ka-ink:#20241F;
	--ka-ink-soft:#4A5147;
	--ka-cream:#FBF9F2;
	--ka-cream-2:#F3EEE1;
	--ka-white:#FFFFFF;

	--ka-radius-sm:10px;
	--ka-radius:18px;
	--ka-radius-lg:28px;

	--ka-shadow-sm:0 2px 10px rgba(32,36,31,.06);
	--ka-shadow:0 10px 30px rgba(32,36,31,.10);
	--ka-shadow-lg:0 24px 60px rgba(32,36,31,.18);

	--ka-font-bn:'Hind Siliguri','Poppins',sans-serif;
	--ka-font-en:'Poppins','Hind Siliguri',sans-serif;

	--ka-ease:cubic-bezier(.22,1,.36,1);
	--ka-header-h:64px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	background:var(--ka-cream);
	color:var(--ka-ink);
	font-family:var(--ka-font-bn);
	font-size:16px;
	font-weight:600;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{
	font-family:var(--ka-font-bn);
	font-weight:700;
	line-height:1.2;
	margin:0 0 .5em;
}

.ka-container{
	max-width:1280px;
	margin-inline:auto;
	padding-inline:24px;
}

/* ============================================================
   Quantity stepper — wraps WooCommerce's plain number input with
   −/+ buttons (JS-injected in footer.php on any .quantity found,
   so this applies on the product page, cart, and anywhere else
   WooCommerce renders a quantity field). Native number-input
   spinners are tiny and unreliable to tap on mobile, this isn't.
   ============================================================ */
.quantity.ka-qty-stepper{
	display:inline-flex;
	align-items:stretch;
	border:1.5px solid var(--ka-green-100);
	border-radius:999px;
	overflow:hidden;
	background:var(--ka-white);
}
.quantity.ka-qty-stepper .qty{
	width:44px;
	height:100%;
	border:none !important;
	border-radius:0 !important;
	text-align:center;
	padding:0;
	font-family:var(--ka-font-bn);
	font-size:16px;
	font-weight:700;
	color:var(--ka-ink);
	-moz-appearance:textfield;
}
.quantity.ka-qty-stepper .qty::-webkit-inner-spin-button,
.quantity.ka-qty-stepper .qty::-webkit-outer-spin-button{
	-webkit-appearance:none;
	margin:0;
}
.ka-qty-btn{
	width:36px;
	flex:0 0 36px;
	border:none;
	background:var(--ka-green-50);
	color:var(--ka-green-700);
	font-size:18px;
	font-weight:700;
	line-height:1;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:background .15s ease;
	-webkit-tap-highlight-color:transparent;
}
.ka-qty-btn:hover{ background:var(--ka-green-100); }
.ka-qty-btn:active{ background:var(--ka-green-light); color:#fff; }

/* ============================================================
   Header — single row, fluid: logo | search (grows) | nav | icons.
   Built to genuinely hold its shape at any width/zoom instead of
   fighting a page-builder's fixed breakpoints — flex-wrap only
   engages the mobile layout below --ka-mobile-bp, nothing narrower
   than that has a "does it fit" question left unanswered.
   ============================================================ */
.ka-header{
	position:sticky;
	top:0;
	z-index:200;
	background:var(--ka-white);
	border-bottom:1px solid rgba(32,36,31,.08);
	transition:box-shadow .25s var(--ka-ease);
}
/* When logged into wp-admin, WordPress's own black admin bar is
   position:fixed at the real top:0 of the viewport — our sticky header's
   own top:0 then sticks BEHIND it once the page scrolls, so nav items get
   overlapped by whatever sits in the admin bar (e.g. the Rank Math SEO
   toolbar button). Match WordPress's own admin-bar height so the header
   sticks just below it instead. */
body.admin-bar .ka-header{
	top:32px;
}
@media (max-width:782px){
	body.admin-bar .ka-header{
		top:46px;
	}
}
.ka-header.is-scrolled{
	box-shadow:0 4px 20px rgba(32,36,31,.08);
}
.ka-header-inner{
	max-width:1280px;
	margin-inline:auto;
	padding:10px 24px;
	display:flex;
	align-items:center;
	gap:20px;
	min-height:var(--ka-header-h);
}
.ka-logo{
	display:flex;
	align-items:center;
	gap:8px;
	flex:0 0 auto;
	font-weight:700;
	font-size:18px;
	color:var(--ka-green-800);
}
.ka-logo img{ height:44px; width:auto; }
.ka-logo-text{ display:flex; flex-direction:column; line-height:1.15; }
.ka-logo-text small{
	font-size:10px;
	font-weight:600;
	color:var(--ka-ink-soft);
	letter-spacing:.04em;
}

.ka-search{
	flex:1 1 220px;
	min-width:180px;
	max-width:480px;
	display:flex;
	align-items:stretch;
	height:38px;
	border:1.5px solid var(--ka-green-100);
	border-radius:10px;
	overflow:hidden;
	background:var(--ka-white);
	transition:border-color .2s ease, box-shadow .2s ease;
}
.ka-search:focus-within{
	border-color:var(--ka-green);
	box-shadow:0 0 0 4px var(--ka-green-50);
}
.ka-search input{
	flex:1 1 auto;
	min-width:0;
	border:none;
	outline:none;
	padding:0 14px;
	font-family:var(--ka-font-bn);
	font-size:13.5px;
	background:transparent;
}
.ka-search button{
	flex:0 0 40px;
	border:none;
	background:var(--ka-green);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background .2s ease;
}
.ka-search button:hover{ background:var(--ka-green-700); }

.ka-nav{
	flex:0 1 auto;
	display:flex;
	align-items:center;
	gap:0;
	min-width:0;
}
.ka-nav a{
	position:relative;
	display:inline-flex;
	align-items:center;
	height:44px;
	padding:0 10px;
	font-size:15px;
	font-weight:700;
	white-space:nowrap;
	color:var(--ka-ink);
	white-space:nowrap;
	transition:color .2s ease;
}
.ka-nav a::after{
	content:"";
	position:absolute;
	left:14px;
	right:14px;
	bottom:8px;
	height:2px;
	background:var(--ka-green);
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .25s var(--ka-ease);
}
.ka-nav a:hover{ color:var(--ka-green-700); }
.ka-nav a:hover::after{ transform:scaleX(1); }

.ka-nav .current-menu-item > a,
.ka-nav .current_page_item > a,
.ka-nav .current-menu-ancestor > a,
.ka-nav .current_page_parent > a{ color:var(--ka-green-700); }
.ka-nav .current-menu-item > a::after,
.ka-nav .current_page_item > a::after,
.ka-nav .current-menu-ancestor > a::after,
.ka-nav .current_page_parent > a::after{ transform:scaleX(1); }

.ka-nav li{ position:relative; list-style:none; }
.ka-nav .sub-menu{ list-style:none; }
.ka-nav .sub-menu li{ list-style:none; }
.ka-nav .sub-menu{
	position:absolute;
	top:100%;
	left:0;
	min-width:200px;
	background:var(--ka-white);
	border-radius:var(--ka-radius-sm);
	box-shadow:var(--ka-shadow);
	padding:8px;
	opacity:0;
	visibility:hidden;
	transform:translateY(6px);
	transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.ka-nav li:hover > .sub-menu{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}
.ka-nav .sub-menu a{
	height:auto;
	padding:10px 12px;
	border-radius:8px;
	display:block;
	width:100%;
}
.ka-nav .sub-menu a::after{ display:none; }
.ka-nav .sub-menu a:hover{ background:var(--ka-green-50); }

.ka-header-icons{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	gap:16px;
}
.ka-header-icons a:not(.ka-header-call){
	display:flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border-radius:50%;
	color:var(--ka-ink);
	transition:background .2s ease, color .2s ease;
	position:relative;
}
.ka-header-icons a:not(.ka-header-call):hover{ background:var(--ka-green-50); color:var(--ka-green-700); }
.ka-cart-count{
	position:absolute;
	top:0;
	right:0;
	background:var(--ka-amber);
	color:var(--ka-ink);
	font-size:10.5px;
	font-weight:700;
	width:17px;
	height:17px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
}
.ka-header-call{
	display:inline-flex;
	align-items:center;
	gap:8px;
	height:40px;
	padding:0 16px;
	border-radius:10px;
	background:var(--ka-green);
	color:#fff;
	font-weight:700;
	font-size:13.5px;
	white-space:nowrap;
	transition:background .2s ease, transform .2s ease;
}
.ka-header-call:hover{ background:var(--ka-green-700); transform:translateY(-1px); }

.ka-mobile-toggle{
	display:none;
	flex:0 0 auto;
	width:40px;
	height:40px;
	border:none;
	background:transparent;
	align-items:center;
	justify-content:center;
}
/* JS injects one of these into every nav item that has a dropdown, but only
   the mobile menu (below --ka-mobile-bp) needs a tap target for it — desktop
   already opens dropdowns on :hover. Hidden by default so it doesn't render
   as an unstyled native <button> in the desktop nav; the mobile media query
   below switches it back on. */
.ka-submenu-caret{ display:none; }

/* ---- Mobile / narrow layout ------------------------------------ */
:root{ --ka-mobile-bp:860px; }
@media (max-width:860px){
	.ka-nav{
		display:none;
		position:fixed;
		top:var(--ka-header-h);
		left:0;
		right:0;
		bottom:0;
		background:var(--ka-white);
		flex-direction:column;
		align-items:stretch;
		gap:0;
		padding:8px 20px 24px;
		overflow-y:auto;
		z-index:199;
		box-shadow:0 12px 24px rgba(32,36,31,.12);
	}
	.ka-nav.is-open{ display:flex; }
	.ka-nav a{ height:auto; padding:14px 4px; border-bottom:1px solid var(--ka-green-100); }
	.ka-nav a::after{ display:none; }
	.ka-nav li{
		width:100%;
		display:flex;
		align-items:center;
		flex-wrap:wrap;
	}
	.ka-nav li > a{ flex:1 1 auto; }
	.ka-submenu-caret{
		flex:0 0 auto;
		width:40px;
		height:40px;
		display:flex;
		align-items:center;
		justify-content:center;
		background:transparent;
		border:none;
		color:var(--ka-ink-soft);
		transition:transform .2s ease;
		cursor:pointer;
	}
	.ka-submenu-caret.is-open{ transform:rotate(180deg); }
	.ka-nav .sub-menu{
		flex:1 0 100%;
		position:static;
		opacity:1;
		visibility:visible;
		transform:none;
		box-shadow:none;
		padding:0 0 0 16px;
		display:none;
	}
	.ka-nav li.is-submenu-open > .sub-menu{ display:block; }
	.ka-nav .sub-menu a{ border-bottom:1px solid var(--ka-green-100); }
	.ka-header-call span.ka-call-text{ display:none; }
	.ka-header-call{ width:40px; padding:0; justify-content:center; border-radius:50%; }
	.ka-mobile-toggle{ display:flex; }
	.ka-mobile-toggle .ka-icon-close{ display:none; }
	.ka-mobile-toggle.is-active .ka-icon-open{ display:none; }
	.ka-mobile-toggle.is-active .ka-icon-close{ display:block; }
	.ka-search{ order:4; flex-basis:100%; max-width:none; margin-top:10px; }
	.ka-header-inner{ flex-wrap:wrap; }
}

/* ============================================================
   Product card — shared by the homepage bestsellers section and the Shop page.
   ============================================================ */
.ka-product-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:20px;
}
.ka-product-card{
	position:relative;
	display:block;
	background:var(--ka-white);
	border-radius:var(--ka-radius);
	overflow:hidden;
	box-shadow:var(--ka-shadow-sm);
	transition:transform .3s var(--ka-ease), box-shadow .3s var(--ka-ease);
}
.ka-product-card:hover{ transform:translateY(-6px); box-shadow:var(--ka-shadow); }
.ka-product-badge{
	display:table;
	background:var(--ka-discount);
	color:var(--ka-white);
	font-size:12px;
	font-weight:700;
	padding:4px 10px;
	border-radius:6px;
	margin-bottom:8px;
}
.ka-product-card-media{ aspect-ratio:1/1; }
.ka-product-card-media img{ width:100%; height:100%; object-fit:cover; }
.ka-product-card-body{ padding:18px; }
.ka-product-card-body h3{
	font-size:15.5px;
	font-weight:600;
	margin:0 0 10px;
	color:var(--ka-ink);
	line-height:1.4;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.ka-product-price{ font-weight:700; color:var(--ka-green-700); font-size:16.5px; }
/* Bangla numerals (e.g. the "১০" in "১০ কেজি") render unclear below
   font-weight 700 in this font — product/category titles sit at 600, so the
   digit-only span ka_bn_bold_digits() wraps around them needs its own bump. */
.ka-bn-num{ font-weight:700; color:inherit; }
.ka-product-card-link{ display:block; }

/* ---- Quick "add to cart" button on product-grid cards ---- */
.ka-cart-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	width:calc(100% - 36px);
	margin:0 18px 18px;
	padding:10px 14px;
	background:var(--ka-green);
	color:#fff;
	font-size:13.5px;
	font-weight:700;
	border-radius:999px;
	transition:background .2s ease, opacity .2s ease;
}
.ka-cart-btn:hover{ background:var(--ka-green-700); }
.ka-cart-btn.loading{ opacity:.6; pointer-events:none; }
.ka-cart-btn.added::after{ content:"✓"; }
.ka-cart-btn + .added_to_cart{
	display:block;
	text-align:center;
	font-size:12.5px;
	margin:-10px 18px 14px;
	color:var(--ka-green-700);
	font-weight:600;
}

/* ---- Wishlist heart (product cards + single product page) ---- */
.ka-wishlist-heart{
	position:absolute;
	top:10px; right:10px;
	width:34px; height:34px;
	flex:0 0 auto;
	border:none;
	border-radius:50%;
	background:rgba(255,255,255,.92);
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 2px 8px rgba(0,0,0,.15);
	cursor:pointer;
	z-index:5;
	transition:transform .15s ease;
}
.ka-wishlist-heart:hover{ transform:scale(1.1); }
.ka-wishlist-heart svg{
	fill:none;
	stroke:var(--ka-ink-soft);
	stroke-width:1.8;
	transition:fill .15s ease, stroke .15s ease;
}
.ka-wishlist-heart.is-active svg{ fill:#e0245e; stroke:#e0245e; }
.ka-product-title-row{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
}
.ka-wishlist-heart-solo{
	position:static;
	width:42px; height:42px;
	background:var(--ka-white);
	box-shadow:var(--ka-shadow-sm);
}
.ka-wishlist-heart-solo svg{ width:22px; height:22px; }
.ka-wishlist-tab .ka-product-grid:empty{ display:none; }
.ka-wishlist-empty-msg{ text-align:center; color:var(--ka-ink-soft); padding:40px 0; font-size:15px; }
.ka-product-price del{ opacity:.5; font-weight:400; font-size:13.5px; margin-right:6px; }

@media (max-width:960px){
	.ka-product-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
	.ka-product-grid{ grid-template-columns:1fr 1fr; gap:14px; }
}

/* ============================================================
   Shop / category archive
   ============================================================ */
.ka-shop{ padding-block:40px 80px; }
.ka-breadcrumb{
	font-size:13.5px;
	color:var(--ka-ink-soft);
	display:flex;
	gap:8px;
	margin-bottom:14px;
}
.ka-breadcrumb a{ color:var(--ka-ink-soft); }
.ka-breadcrumb a:hover{ color:var(--ka-green-700); }
.ka-shop-head h1{ font-size:clamp(26px,3vw,38px); margin-bottom:24px; }
.ka-shop-filters{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-bottom:28px;
}
.ka-filter-chip{
	display:inline-flex;
	align-items:center;
	height:40px;
	padding:0 20px;
	border-radius:999px;
	border:1.5px solid var(--ka-green-100);
	background:var(--ka-white);
	color:var(--ka-ink);
	font-size:14px;
	font-weight:600;
	transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.ka-filter-chip:hover{ border-color:var(--ka-green); color:var(--ka-green-700); }
.ka-filter-chip.is-active{
	background:var(--ka-green);
	border-color:var(--ka-green);
	color:#fff;
}
.ka-shop-toolbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:14px;
	margin-bottom:24px;
	padding-bottom:18px;
	border-bottom:1px solid var(--ka-green-100);
}
.ka-shop-count{ font-size:14px; color:var(--ka-ink-soft); margin:0; }
.ka-shop-sort select{
	height:40px;
	padding:0 14px;
	border-radius:8px;
	border:1.5px solid var(--ka-green-100);
	background:var(--ka-white);
	font-family:var(--ka-font-bn);
	font-size:14px;
	color:var(--ka-ink);
}
.ka-shop-pagination{
	display:flex;
	justify-content:center;
	gap:8px;
	margin-top:48px;
}
.ka-shop-pagination .page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:40px;
	height:40px;
	padding:0 10px;
	border-radius:8px;
	border:1.5px solid var(--ka-green-100);
	color:var(--ka-ink);
	font-weight:600;
	font-size:14px;
}
.ka-shop-pagination .page-numbers.current{
	background:var(--ka-green);
	border-color:var(--ka-green);
	color:#fff;
}
.ka-shop-pagination .page-numbers:hover:not(.current){ border-color:var(--ka-green); color:var(--ka-green-700); }
.ka-shop-empty{ text-align:center; padding:60px 0; color:var(--ka-ink-soft); }
.ka-shop-empty p{ margin-bottom:20px; font-size:16px; }

/* ============================================================
   Floating WhatsApp button — site-wide, always visible
   ============================================================ */
.ka-chat-fab{
	position:fixed;
	right:20px; bottom:20px;
	z-index:9999;
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:12px;
}
.ka-chat-toggle{
	width:58px; height:58px;
	flex:0 0 auto;
	border:none;
	border-radius:50%;
	background:linear-gradient(135deg, #2CE065, #1DA851);
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 8px 24px rgba(37,211,102,.45), 0 2px 8px rgba(0,0,0,.18);
	cursor:pointer;
	position:relative;
	transition:transform .25s ease, box-shadow .25s ease;
}
.ka-chat-toggle::before{
	content:"";
	position:absolute;
	inset:-6px;
	border-radius:50%;
	border:2px solid rgba(37,211,102,.45);
	pointer-events:none;
}
.ka-chat-toggle:hover{
	transform:scale(1.08);
	box-shadow:0 10px 30px rgba(37,211,102,.55), 0 4px 12px rgba(0,0,0,.22);
}
.ka-chat-toggle-icon-close{ display:none; }
.ka-chat-fab.is-open .ka-chat-toggle-icon-chat{ display:none; }
.ka-chat-fab.is-open .ka-chat-toggle-icon-close{ display:block; }
@media (prefers-reduced-motion: no-preference){
	.ka-chat-toggle::before{ animation:ka-whatsapp-pulse 2.2s ease-out infinite; }
	@keyframes ka-whatsapp-pulse{
		0%{ transform:scale(1); opacity:.65; }
		100%{ transform:scale(1.4); opacity:0; }
	}
}
.ka-chat-options{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
}
.ka-chat-options[hidden]{ display:none; }
.ka-chat-option{
	width:52px; height:52px;
	flex:0 0 auto;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 6px 18px rgba(0,0,0,.2);
	transition:transform .2s ease;
}
.ka-chat-option:hover{ transform:scale(1.08); }
.ka-chat-option-whatsapp{ background:linear-gradient(135deg, #2CE065, #1DA851); }
.ka-chat-option-messenger{ background:linear-gradient(135deg, #00B2FF, #006AFF); }
.ka-chat-option-call{ background:linear-gradient(135deg, #2CE065, #1DA851); }
@media (max-width:480px){
	.ka-chat-fab{ right:14px; bottom:14px; }
	.ka-chat-toggle{ width:52px; height:52px; }
	.ka-chat-option{ width:48px; height:48px; }
}

/* ============================================================
   Footer — back to the original dark green brand backdrop. The earlier
   legibility problem wasn't the background after all — it was font-weight
   (needed 700, not 400-600) and using the muted ink-soft color instead of
   a strong one; both of those fixes are kept here on white/light text.
   ============================================================ */
.ka-footer-trust-strip{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:12px;
	padding-block:24px 16px;
	border-bottom:1px solid rgba(255,255,255,.1);
}
.ka-footer-trust-item{
	display:flex;
	align-items:center;
	gap:10px;
	background:transparent;
	color:#fff;
	border:1.5px solid rgba(255,255,255,.25);
	/* A narrower basis than the old 200px — at 200px, four items plus gaps
	   needed slightly more width than some viewports just above the 860px
	   breakpoint offered, so one item would wrap onto its own orphan line
	   before the 2-per-row rule kicked in. 170px always leaves enough room
	   for all four to share a row above that breakpoint. */
	flex:1 1 170px;
	padding:8px 16px 8px 8px;
	border-radius:999px;
	transition:border-color .25s var(--ka-ease), background .25s ease;
}
.ka-footer-trust-item:hover{
	border-color:rgba(255,255,255,.55);
	background:rgba(255,255,255,.06);
}
.ka-footer-trust-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:30px;
	height:30px;
	border-radius:50%;
	background:linear-gradient(135deg, var(--ka-green-light), var(--ka-green) 65%);
	flex-shrink:0;
}
.ka-footer-trust-icon svg{ color:#fff; }
.ka-footer-trust-item span:last-child{ font-size:13.5px; font-weight:700; line-height:1.4; }
.ka-newsletter{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	padding-block:16px 28px;
	border-bottom:1px solid rgba(255,255,255,.1);
}
.ka-newsletter-text h4{ color:#fff; font-size:20px; margin:0 0 6px; }
.ka-newsletter-text p{ color:#fff; font-weight:700; font-size:15px; margin:0; }
.ka-newsletter-actions{
	display:flex;
	align-items:center;
	gap:20px;
	flex-wrap:wrap;
}
/* One seamless pill (input fused directly into its button, no gap) — same
   pattern as the header search bar — so this reads as a single "enter and
   submit" unit, clearly separate from the Facebook button next to it,
   instead of three independent-looking controls in a row. */
.ka-newsletter-form{
	display:flex;
	align-items:stretch;
	height:46px;
	/* Deliberately NOT a full pill (999px) like the trust badges above —
	   two pill-shaped rows stacked back to back read as repetitive. A
	   softer rounded-rectangle keeps this looking like a form/input rather
	   than another badge, so the two sections read as visually distinct. */
	border-radius:var(--ka-radius-sm);
	overflow:hidden;
	background:var(--ka-white);
	box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.ka-newsletter-form input{
	flex:1 1 auto;
	min-width:180px;
	border:none;
	background:transparent;
	color:var(--ka-ink);
	font-weight:600;
	padding:0 18px;
	font-family:var(--ka-font-bn);
	font-size:14px;
}
.ka-newsletter-form input::placeholder{ color:var(--ka-ink-soft); }
.ka-newsletter-form input:focus{ outline:none; }
.ka-newsletter-form button{
	height:100%;
	padding:0 24px;
	border-radius:0;
	background:var(--ka-green);
	color:#fff;
	border:none;
	font-weight:700;
	font-size:14px;
	font-family:var(--ka-font-bn);
	cursor:pointer;
	flex-shrink:0;
	transition:background .2s ease;
}
.ka-newsletter-form button:hover{ background:var(--ka-green-700); }
.ka-newsletter-form button:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.ka-newsletter-msg{
	width:100%;
	margin:0;
	font-size:13px;
	color:var(--ka-green-light);
	display:none;
}
.ka-newsletter-msg.is-visible{ display:block; }
.ka-newsletter-msg.is-error{ color:#FCA5A5; }
.ka-fb-community-btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	height:44px;
	padding:0 22px;
	border-radius:var(--ka-radius-sm);
	background:#1877F2;
	color:#fff;
	font-weight:700;
	font-size:14px;
	white-space:nowrap;
	transition:transform .2s ease, background .2s ease;
}
.ka-fb-community-btn:hover{ background:#0d5fcc; transform:translateY(-2px); }
.ka-footer{
	background:var(--ka-green-900);
	color:#fff;
}
.ka-footer-grid{
	display:grid;
	grid-template-columns:1.5fr 1fr 1fr 1fr;
	gap:40px;
	padding-block:56px 48px;
}
.ka-footer-logo{
	display:inline-block;
	font-weight:700;
	font-size:20px;
	color:#fff;
	margin-bottom:6px;
}
/* display:block on the img removes the phantom few px of baseline/line-height
   whitespace inline images get under their bottom edge — without it, the gap
   below the logo was bigger than the margin value alone suggested. */
.ka-footer-logo img{ max-width:240px; height:auto; display:block; }
.ka-footer-brand p{ font-size:15.5px; font-weight:700; line-height:1.7; color:#fff; max-width:320px; margin-top:0; }
.ka-footer-social{ display:flex; gap:10px; margin-top:18px; }
.ka-footer-social a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:38px;
	border-radius:50%;
	background:rgba(255,255,255,.08);
	color:#fff;
	transition:background .2s ease, transform .2s ease;
}
.ka-footer-social a:hover{ background:var(--ka-green-light); transform:translateY(-2px); }
.ka-footer-col h4{
	color:#fff;
	font-size:15px;
	font-weight:700;
	margin:0 0 18px;
	padding-bottom:10px;
	border-bottom:2px solid var(--ka-green-light);
	display:inline-block;
}
.ka-footer-list{ display:flex; flex-direction:column; gap:11px; }
.ka-footer-list li{ font-size:15px; font-weight:700; color:#fff; }
.ka-footer-list a{ color:#fff; font-weight:700; transition:color .2s ease; }
.ka-footer-list a:hover{ color:var(--ka-green-light); }
.ka-footer-bottom{
	background:var(--ka-green-950);
	padding-block:18px;
}
.ka-footer-bottom p{
	margin:0;
	font-size:13px;
	font-weight:600;
	color:#fff;
	text-align:center;
}
.ka-footer-bottom-row{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:6px 16px;
}
.ka-footer-legal-links{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:13px;
}
.ka-footer-legal-links a{ color:rgba(255,255,255,.75); font-weight:600; }
.ka-footer-legal-links a:hover{ color:#fff; text-decoration:underline; }
.ka-footer-legal-links span{ color:rgba(255,255,255,.4); }

@media (max-width:860px){
	.ka-footer-grid{ grid-template-columns:1fr 1fr; }
	.ka-footer-trust-strip{ justify-content:flex-start; }
	.ka-footer-trust-item{ flex:1 1 45%; }
	.ka-newsletter{ flex-direction:column; align-items:flex-start; }
	.ka-newsletter-actions{ width:100%; }
	.ka-newsletter-form{ width:100%; }
	.ka-newsletter-form input{ flex:1 1 auto; min-width:0; }
}
@media (max-width:540px){
	.ka-footer-grid{ grid-template-columns:1fr; }
	.ka-footer-trust-item{ flex:1 1 100%; }
	.ka-newsletter-actions{ flex-direction:column; align-items:stretch; }
	.ka-newsletter-form input{ min-width:0; }
	.ka-newsletter-form button{ padding:0 16px; }
	.ka-fb-community-btn{ justify-content:center; }
}

/* ============================================================
   Motion — subtle premium reveal, respects reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
	.ka-reveal{
		opacity:0;
		transform:translateY(18px);
		transition:opacity .7s var(--ka-ease), transform .7s var(--ka-ease);
	}
	.ka-reveal.is-visible{ opacity:1; transform:none; }
}