/*
 * Kalyar Maju brand refinements.
 * Small, global touches that sit on top of Elementor-authored content —
 * intentionally minimal since layout/color/type are controlled from the
 * Elementor Kit and per-section styling.
 */

:root {
	--km-deep-green: #103228;
	--km-darkest-green: #0B241C;
	--km-lime: #C6F04E;
	--km-off-white: #F4F5F0;
	--km-mist: #EDEFE7;
	--km-body-text: #3B453D;
	--km-muted-text: #6F7D74;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--km-off-white);
	font-family: 'IBM Plex Sans', sans-serif;
}

a {
	transition: opacity .2s ease, color .2s ease;
}

::selection {
	background: var(--km-lime);
	color: var(--km-darkest-green);
}

a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible {
	outline: 2px solid var(--km-lime);
	outline-offset: 2px;
}

/* Product / gallery card hover lift (mirrors design comps) */
.km-hover-lift {
	transition: transform .2s ease, border-color .2s ease;
}
.km-hover-lift:hover {
	transform: translateY(-4px);
	border-color: var(--km-deep-green);
}

/* Fill + crop an image inside a fixed-height container (hero/about/product/
   team/gallery/flag image slots). */
.km-cover-img,
.km-cover-img .elementor-widget-container,
.km-cover-img .elementor-image {
	width: 100%;
	height: 100%;
}
.km-cover-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Sticky header nav (built as page content, not a theme-builder template).
   Elementor emits a per-element rule like `.elementor-element.elementor-
   element-{id}{position:relative}` which out-specificities a plain single
   class selector, so the position/sizing overrides below need !important to
   actually win the cascade. */
.km-sticky-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 50 !important;
}

/* Floating WhatsApp button. */
.km-whatsapp-fab {
	position: fixed !important;
	right: 24px !important;
	bottom: 24px !important;
	left: auto !important;
	top: auto !important;
	z-index: 60 !important;
	width: 60px !important;
	height: 60px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	box-shadow: 0 8px 24px rgba(11, 36, 28, .35);
	transition: transform .2s ease;
}
.km-whatsapp-fab:hover {
	transform: translateY(-3px) scale(1.04);
	opacity: 1;
}
.km-whatsapp-fab .elementor-icon,
.km-whatsapp-fab i {
	display: flex;
	align-items: center;
	justify-content: center;
}
.km-whatsapp-fab img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Product grid cards (Fruits/Vegetables). The card container has no explicit
   `width` control set in PHP, so Elementor's `content_width: full` gives it
   `.e-con-full { width: 100% }` — each card claims the whole flex row, so
   the parent's `flex-wrap: wrap` never gets a chance to actually wrap
   anything into columns. An explicit flex-basis forces a 3-up grid (2-up /
   1-up on smaller screens) instead of one full-width card per row. */
.km-product-card {
	flex: 0 1 calc(33.333% - 14px) !important;
	width: calc(33.333% - 14px) !important;
	max-width: calc(33.333% - 14px) !important;
}
@media (max-width: 900px) {
	.km-product-card {
		flex: 0 1 calc(50% - 10px) !important;
		width: calc(50% - 10px) !important;
		max-width: calc(50% - 10px) !important;
	}
}
@media (max-width: 560px) {
	.km-product-card {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Same root cause as .km-product-card above (no explicit width on a flex
   item whose parent has flex-wrap: wrap), affecting every other repeating
   grid on the page: BEST values, Major-imports flag cards, Team, Gallery,
   and the Contact info-box quad. Each gets an explicit flex-basis so the
   parent's flex-wrap can actually form rows instead of stacking one item
   per line. */
.km-value-card {
	/* No flex_gap was set in PHP, but the Elementor Kit's default container
	   gap (20px) still applies between items, so a flat 25% overflows the
	   row by 3 gaps and wraps the 4th card alone - subtract it like the
	   other grids below. */
	flex: 0 1 calc(25% - 15px) !important;
	width: calc(25% - 15px) !important;
	max-width: calc(25% - 15px) !important;
}
.km-import-card {
	flex: 0 1 calc(25% - 12px) !important;
	width: calc(25% - 12px) !important;
	max-width: calc(25% - 12px) !important;
}
.km-team-card {
	flex: 0 1 calc(20% - 15px) !important;
	width: calc(20% - 15px) !important;
	max-width: calc(20% - 15px) !important;
}
.km-gallery-tile {
	flex: 0 1 calc(25% - 11px) !important;
	width: calc(25% - 11px) !important;
	max-width: calc(25% - 11px) !important;
}
.km-contact-box {
	flex: 0 1 calc(50% - 0.5px) !important;
	width: calc(50% - 0.5px) !important;
	max-width: calc(50% - 0.5px) !important;
}
/* Product-page "More {Collection}" related-products strip: same root cause
   again (no explicit width, parent has flex-wrap: wrap), 4 equal columns
   with the same 20px gap accounted for as .km-value-card above. */
.km-related-card {
	flex: 0 1 calc(25% - 15px) !important;
	width: calc(25% - 15px) !important;
	max-width: calc(25% - 15px) !important;
}
@media (max-width: 900px) {
	.km-value-card,
	.km-import-card,
	.km-team-card {
		flex: 0 1 calc(50% - 9px) !important;
		width: calc(50% - 9px) !important;
		max-width: calc(50% - 9px) !important;
	}
	.km-gallery-tile,
	.km-related-card {
		flex: 0 1 calc(50% - 7px) !important;
		width: calc(50% - 7px) !important;
		max-width: calc(50% - 7px) !important;
	}
}
@media (max-width: 560px) {
	.km-value-card,
	.km-import-card,
	.km-team-card,
	.km-gallery-tile,
	.km-contact-box,
	.km-related-card {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Header nav: on narrow screens let the link row wrap instead of overflowing
   (no JS-driven hamburger yet — Elementor Pro's Nav Menu widget is the
   natural upgrade path once the client is on Pro). */
@media (max-width: 900px) {
	.km-nav-row {
		flex-wrap: wrap !important;
		row-gap: 14px !important;
	}
	.km-nav-links {
		flex-wrap: wrap !important;
		width: 100%;
		justify-content: flex-start !important;
	}
}