/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://serava.africa
 Description:  Hello Elementor Child Theme for Serava Life Sciences
 Author:       Serava Life Sciences
 Author URI:   https://serava.africa
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/* ── Force Font Awesome 6 glyphs ──────────────────────────────
   Elementor bundles FA5 and enqueues it during render (after our FA6),
   so its .fas rule would win by cascade order. !important makes FA6 win
   regardless of order. The FA6 @font-face is loaded via assets/fa6. */
.fa, .fas, .fa-solid, .far, .fa-regular {
	font-family: "Font Awesome 6 Free" !important;
}
.fa, .fas, .fa-solid { font-weight: 900 !important; }
.far, .fa-regular { font-weight: 400 !important; }
.fab, .fa-brands {
	font-family: "Font Awesome 6 Brands" !important;
	font-weight: 400 !important;
}

/* ── Product card: shrink badge/chip to content width (inline pill) ── */
.sv-card-badge,
.sv-card-chip,
.sv-tag {
	align-self: flex-start !important;
	width: auto !important;
	max-width: 100%;
}

/* Vertically center pill text: tighten the line-box so glyphs sit in the middle
   of the symmetric padding instead of riding high. */
.sv-card-badge .elementor-heading-title,
.sv-card-chip .elementor-widget-container,
.sv-card-chip p,
.sv-tag .elementor-widget-container,
.sv-tag p {
	line-height: 1 !important;
	margin: 0 !important;
}
.sv-card-badge .elementor-heading-title {
	display: inline-block;
}

/* Product card info-line label ("Crops:" / "Diseases:") */
.sv-il-label { font-weight: 600; color: var(--e-global-color-serava-charcoal, #1f2937); }

/* ── Product card (native-widget rebuild, loop-item-build.php): image zoom on hover.
   .sv-card-media IS the background-image element itself; .sv-product-card (the card
   root) has overflow:hidden so the scaled image clips to the card's rounded corners
   instead of spilling out. Hover is bound to the whole card, not just the image, so
   the effect also fires when hovering the body text below the photo. ── */
.sv-card-media {
	transition: transform .4s ease;
	transform-origin: center;
}
.sv-product-card:hover .sv-card-media {
	transform: scale(1.06);
}

/* ── Product loop card (mu-plugin "full" design) rendered inside the Elementor loop grid ──
   The card markup comes from [serava_product_loop_card]; it normally inherits CSS vars from
   the old .serava-product-archive-page wrapper (absent in the Elementor context), so define
   them on the card itself. Also stretch the shortcode widget so cards fill the grid cell. */
.serava-product-loop-card {
	--serava-action: #123a6f;
	--serava-action-hover: #0d2f5c;
	--serava-charcoal: #1f2a37;
	--serava-leaf: #4fa23a;
}
.serava-loop-card-wrap,
.serava-loop-card-wrap > .elementor-widget-shortcode,
.serava-loop-card-wrap .elementor-shortcode {
	height: 100%;
}
/* bottom-anchor the View product button so it aligns across equal-height cards
   (more specific than the mu-plugin's .serava-product-loop-card__link margin-top:4px) */
.serava-product-loop-card__body .serava-product-loop-card__link { margin-top: auto; }

/* ── Archive hero breadcrumb: links inherit hero light tone (not default link color) ── */
.sv-breadcrumb a,
.sv-breadcrumb a:visited { color: rgba(255,255,255,0.85) !important; text-decoration: none; transition: color .15s; }
.sv-breadcrumb a:hover { color: #fff !important; text-decoration: underline; }

/* ── Archive quick-filter chip toolbar ── */
.sv-archive-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--e-global-color-serava-line, #dbe3dc); margin-bottom: 18px; }
.sv-chip { padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; border: 1.5px solid var(--e-global-color-serava-line, #dbe3dc); background: #fff; color: var(--e-global-color-serava-charcoal, #1f2937); cursor: pointer; transition: border-color .15s, color .15s, background .15s; white-space: nowrap; text-decoration: none; }
.sv-chip:hover { border-color: var(--e-global-color-serava-leaf, #4fa23a); color: var(--e-global-color-serava-leaf, #4fa23a); }
.sv-chip.active { background: var(--e-global-color-serava-leaf, #4fa23a); color: #fff; border-color: var(--e-global-color-serava-leaf, #4fa23a); }
.sv-toolbar-search { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--e-global-color-serava-soft, #f6f8f2); border: 1.5px solid var(--e-global-color-serava-line, #dbe3dc); border-radius: 20px; padding: 6px 14px; }
.sv-toolbar-search i { color: var(--e-global-color-serava-muted, #586760); font-size: 13px; }
.sv-toolbar-search input { border: none; background: transparent; outline: none; font-size: 13px; color: var(--e-global-color-serava-charcoal, #1f2937); width: 150px; }
.sv-toolbar-count { font-size: 13px; color: var(--e-global-color-serava-muted, #586760); white-space: nowrap; }
@media (max-width: 600px) { .sv-toolbar-search { margin-left: 0; } }

/* ══ Off-canvas filters (≤1024). Desktop keeps the inline sidebar; at the collapse point
   the "Filters" toolbar button opens the sidebar as a slide-in panel + backdrop, so the
   long CROPS/DISEASE lists no longer stack on top of the grid. Chrome (head/foot/backdrop)
   is injected by serava-filters.js; the form itself is the same one the AJAX filters use. ══ */
/* off-canvas chrome is hidden on desktop (inline sidebar shows the filters normally).
   !important because Hello Elementor reset.css `[type="button"]` ties the .sv-filters-toggle
   class at equal specificity and would otherwise win on load order (documented gotcha). */
.sv-filters-toggle, .sv-filters-head, .sv-filters-foot, .sv-filters-backdrop { display: none !important; }

@media (max-width: 1024px) {
	/* toolbar → single scrollable row, Filters button pinned left */
	.sv-archive-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; }
	.sv-archive-toolbar::-webkit-scrollbar { display: none; }
	.sv-filters-toggle {
		display: inline-flex !important; align-items: center; gap: 8px; flex: 0 0 auto;
		position: sticky; left: 0; z-index: 2;
		padding: 8px 16px !important; border-radius: 20px !important; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
		border: 1.5px solid var(--e-global-color-serava-navy, #123a6f) !important;
		background: var(--e-global-color-serava-navy, #123a6f) !important; color: #fff !important;
	}
	.sv-filters-toggle i { font-size: 13px; }
	.sv-filters-toggle__badge {
		display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
		border-radius: 9px; background: var(--e-global-color-serava-leaf, #4fa23a); color: #fff; font-size: 11px; font-weight: 700;
	}

	/* collapse the sidebar column, give the grid the full row */
	.serava-filters-wrapper { flex: 0 0 0 !important; width: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }
	.serava-filters-wrapper + .e-con { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; }

	/* the filter form → off-canvas slide-in panel */
	.serava-filters {
		position: fixed !important; top: 0 !important; left: 0 !important; z-index: 100000 !important;
		width: min(86vw, 340px) !important; height: 100% !important; max-height: 100% !important;
		margin: 0 !important; border-radius: 0 !important; background: #fff !important;
		box-shadow: 0 0 50px rgba(15,23,20,0.28) !important; overflow-y: auto;
		transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
	}
	body.sv-filters-open .serava-filters { transform: translateX(0); }
	.serava-filters .serava-filters__inner { padding: 8px 20px 16px !important; }

	/* injected header / footer / backdrop */
	.sv-filters-head {
		position: sticky; top: 0; z-index: 1; background: #fff;
		display: flex !important; align-items: center; justify-content: space-between;
		padding: 18px 20px; border-bottom: 1px solid var(--e-global-color-serava-line, #dbe3dc);
	}
	.sv-filters-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--e-global-color-serava-navy, #123a6f); }
	.sv-filters-close { background: none !important; border: 0 !important; font-size: 24px; line-height: 1; color: var(--e-global-color-serava-muted, #586760) !important; cursor: pointer; padding: 2px 6px !important; }
	.sv-filters-foot {
		position: sticky; bottom: 0; background: #fff; display: flex !important; gap: 10px;
		padding: 14px 20px; border-top: 1px solid var(--e-global-color-serava-line, #dbe3dc);
	}
	.sv-filters-foot .sv-filters-done { flex: 1; padding: 12px !important; border: 0 !important; border-radius: 10px !important; background: var(--e-global-color-serava-leaf, #4fa23a) !important; color: #fff !important; font-weight: 700; font-size: 14px; cursor: pointer; }
	.sv-filters-foot .sv-filters-clear { padding: 12px 16px !important; border-radius: 10px !important; border: 1.5px solid var(--e-global-color-serava-line, #dbe3dc) !important; background: #fff !important; color: var(--e-global-color-serava-muted, #586760) !important; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-flex !important; align-items: center; }
	.sv-filters-backdrop { display: block !important; position: fixed; inset: 0; z-index: 99999; background: rgba(15,23,20,0.45); opacity: 0; visibility: hidden; transition: opacity .3s; }
	body.sv-filters-open .sv-filters-backdrop { opacity: 1; visibility: visible; }
	body.sv-filters-open { overflow: hidden; }
}

/* ── Single product: facts bar ── */
.sv-facts-bar { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--e-global-color-serava-line, #dbe3dc); border-radius: 10px; overflow: hidden; background: #fff; }
.sv-fact { padding: 16px 18px; border-right: 1px solid var(--e-global-color-serava-line, #dbe3dc); display: flex; flex-direction: column; gap: 4px; }
.sv-fact:last-child { border-right: none; }
.sv-fact-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--e-global-color-serava-muted, #586760); }
.sv-fact-value { font-size: 14px; font-weight: 700; color: var(--e-global-color-serava-navy, #123a6f); }
@media (max-width: 900px) { .sv-facts-bar { grid-template-columns: repeat(2, 1fr); } .sv-fact:nth-child(2n){border-right:none;} }

/* ── Single product: application table ── */
.sv-app-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 14px; }
.sv-app-table th { text-align: left; background: var(--e-global-color-serava-soft, #f6f8f2); padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--e-global-color-serava-muted, #586760); border-bottom: 1px solid var(--e-global-color-serava-line, #dbe3dc); }
.sv-app-table td { padding: 12px 14px; border-bottom: 1px solid var(--e-global-color-serava-line, #dbe3dc); color: var(--e-global-color-serava-charcoal, #1f2937); vertical-align: top; }
.sv-app-table tr:last-child td { border-bottom: none; }
.sv-app-table td strong { color: var(--e-global-color-serava-navy, #123a6f); font-weight: 700; }

/* ── Single product: tabs ── */
.sv-tab-nav { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--e-global-color-serava-line, #dbe3dc); margin-bottom: 22px; }
/* color needs !important too: [type="button"] in hello-elementor's reset.css is the
   same specificity (0,1,0) as this class selector since our <button type="button">
   matches it, and reset.css wins that tie by load order — leaving inactive tabs pink
   (#c36) instead of muted-gray. */
.sv-tab-btn { background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; outline: none; padding: 12px 16px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--e-global-color-serava-muted, #586760) !important; cursor: pointer; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.sv-tab-btn:hover { color: var(--e-global-color-serava-navy, #123a6f) !important; }
.sv-tab-btn.active { color: var(--e-global-color-serava-navy, #123a6f) !important; border-bottom: 2px solid var(--e-global-color-serava-leaf, #4fa23a) !important; }
.sv-tab-panel { display: none; font-size: 15px; line-height: 1.7; color: var(--e-global-color-serava-muted, #586760); }
.sv-tab-panel.active { display: block; }
.sv-tab-panel p { margin-bottom: 12px; }
.sv-tab-panel h2, .sv-tab-panel h3 { color: var(--e-global-color-serava-navy, #123a6f); margin: 18px 0 8px; font-weight: 800; }
.sv-tab-panel ul { margin: 0 0 12px 18px; }
.sv-tab-panel li { margin-bottom: 6px; }

/* Hide chips/lines whose dynamic content resolved empty (e.g. nutrition has no group) */
.sv-card-chip:has(> .elementor-widget-container:empty),
.sv-infoline:has(> .elementor-widget-container:empty) { display: none !important; }

/* ── Product enquiry modal (hand-rolled, see serava-filters.js + serava_enquiry_modal
   shortcode — Elementor's native Popup Builder needs JS that never loads on these
   theme-builder-injected CPT pages, so this is a plain overlay+panel instead) ── */
.sv-modal { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 24px; }
.sv-modal.is-open { display: flex; }
.sv-modal__overlay { position: absolute; inset: 0; background: rgba(18,58,111,0.55); }
.sv-modal__panel { position: relative; width: 100%; max-width: 620px; max-height: calc(100vh - 48px); overflow-y: auto; background: #fff; border-radius: 12px; padding: 36px; box-shadow: 0 24px 60px rgba(23,34,29,0.25); }
.sv-modal__close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: none; background: var(--e-global-color-serava-soft, #f6f8f2); border-radius: 50%; font-size: 20px; line-height: 1; color: var(--e-global-color-serava-muted, #586760); cursor: pointer; }
.sv-modal__close:hover { background: var(--e-global-color-serava-line, #dbe3dc); }
.sv-modal__title { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: var(--e-global-color-serava-navy, #123a6f); }
.sv-modal__sub { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--e-global-color-serava-muted, #586760); }
body.sv-modal-open { overflow: hidden; }

/* Enquiry modal form — floating / notched-outline label style ("SaaS-style", option 3),
   2026-07-02. Layout (after Company/Farm removed): Full Name (1) full-width row 1, Phone
   (3) + Email (4) paired row 2, Message (5) full-width row 3. Each field's label sits ON
   its top border (a white notch cutting the outline); focus turns the border + label leaf
   green with a soft green ring; submit is a solid navy full-width button. Form id 369 is
   stable (create-enquiry-form.php reuses the post by title), so the #wpforms-369-field_N
   IDs are safe to target. */
.sv-modal__panel .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; margin-top: 8px; }
.sv-modal__panel #wpforms-369-field_1-container,
.sv-modal__panel #wpforms-369-field_5-container { grid-column: 1 / -1; }
.sv-modal__panel .wpforms-field-hidden { display: none !important; }

.sv-modal__panel .wpforms-field { position: relative; margin: 0 !important; padding: 0 !important; }
.sv-modal__panel .wpforms-field-label {
	position: absolute; top: -8px; left: 10px; z-index: 2; margin: 0; padding: 0 5px;
	background: #fff;
	/* !important: WPForms' own .wpforms-field-label ships font-size:16px/font-weight:700 at
	   equal specificity but loads after the child theme, so it wins the cascade without this.
	   Same override justification as .wpforms-field-medium / the submit button in this block. */
	font-size: 11px !important; font-weight: 500 !important; line-height: 1.4 !important;
	color: var(--e-global-color-serava-muted, #586760); transition: color .15s;
}
.sv-modal__panel .wpforms-field:focus-within > .wpforms-field-label { color: var(--e-global-color-serava-leaf, #4fa23a); }
.sv-modal__panel .wpforms-required-label { color: #c0492e; border: 0; }

.sv-modal__panel .wpforms-field input,
.sv-modal__panel .wpforms-field textarea {
	width: 100%; max-width: 100% !important;
	border: 1px solid var(--e-global-color-serava-line, #dbe3dc); border-radius: 8px; background: #fff;
	padding: 13px 14px; font-size: 14px; color: var(--e-global-color-serava-charcoal, #1f2937);
	transition: border-color .15s, box-shadow .15s;
}
.sv-modal__panel .wpforms-field textarea { min-height: 92px; resize: vertical; }
.sv-modal__panel .wpforms-field input::placeholder,
.sv-modal__panel .wpforms-field textarea::placeholder { color: #b7bfba; }
.sv-modal__panel .wpforms-field input:focus,
.sv-modal__panel .wpforms-field textarea:focus {
	outline: none; border-color: var(--e-global-color-serava-leaf, #4fa23a); box-shadow: 0 0 0 3px rgba(79,162,58,0.12);
}
.sv-modal__panel .wpforms-field input.wpforms-error,
.sv-modal__panel .wpforms-field textarea.wpforms-error { border-color: #d63638; }
/* WPForms' inline "this field is required" error sits inside the grid cell, below the input */
.sv-modal__panel .wpforms-field .wpforms-error { font-size: 11px; margin-top: 4px; }

/* Smart phone field: intl-tel-input wraps the <input type=tel> in .iti at runtime and adds
   its own left padding to clear the flag button — force the wrapper full-width and keep a
   left inset so the number never rides under the flag. */
.sv-modal__panel .wpforms-field-phone .iti { display: block; width: 100%; }
.sv-modal__panel .wpforms-field-phone input { padding-left: 52px; }

.sv-modal__panel .wpforms-field-description { margin-top: 6px; font-size: 12px; color: #8a938c; }

.sv-modal__panel .wpforms-submit-container { margin-top: 22px; }
.sv-modal__panel button.wpforms-submit {
	width: 100%; border: 0 !important; border-radius: 8px !important;
	background: var(--e-global-color-serava-navy, #123a6f) !important; color: #fff !important;
	padding: 14px 20px !important; font-size: 14px !important; font-weight: 500 !important;
	cursor: pointer; transition: background .15s;
}
.sv-modal__panel button.wpforms-submit:hover { background: #0d2f5c !important; }

/* ── Contact page form (.sv-contact-form on the WPForms widget, form 313) — 2026-07-02:
   restyled to match the Enquiry modal's floating / notched-outline label look (per user),
   in a 2-column grid. Products-of-interest field removed; Primary Crop(s) is now a modern
   (choices.js) multiselect. Same label/input/focus rules as .sv-modal__panel, scoped here. ── */
.sv-contact-form .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; margin-top: 8px; }
/* Primary crop multiselect (7) and Message (9) span both columns; paired rows are
   Name|Company, Phone|Email, Country|Role, Preferred|Best-time. */
.sv-contact-form #wpforms-313-field_7-container,
.sv-contact-form #wpforms-313-field_9-container { grid-column: 1 / -1; }
/* "What would you like to do?" reason select (field class set in the builder; also the
   hook initContactCtas uses to preselect from the quick-CTA pills / topic cards) */
.sv-contact-form .sv-reason-field { grid-column: 1 / -1; }
.sv-contact-form .wpforms-field-hidden { display: none !important; }

.sv-contact-form .wpforms-field { position: relative; margin: 0 !important; padding: 0 !important; }
.sv-contact-form .wpforms-field-label {
	position: absolute; top: -8px; left: 10px; z-index: 2; margin: 0 !important; padding: 0 5px;
	background: #fff;
	font-size: 11px !important; font-weight: 500 !important; line-height: 1.4 !important;
	color: var(--e-global-color-serava-muted, #586760); transition: color .15s;
}
.sv-contact-form .wpforms-field:focus-within > .wpforms-field-label { color: var(--e-global-color-serava-leaf, #4fa23a); }
.sv-contact-form .wpforms-required-label { color: #c0492e; border: 0; }

.sv-contact-form input[type="text"],
.sv-contact-form input[type="email"],
.sv-contact-form input[type="tel"],
.sv-contact-form select,
.sv-contact-form textarea {
	width: 100%; max-width: 100% !important;
	border: 1px solid var(--e-global-color-serava-line, #dbe3dc); border-radius: 8px; background: #fff;
	padding: 13px 14px; font-size: 14px; color: var(--e-global-color-serava-charcoal, #1f2937);
	transition: border-color .15s, box-shadow .15s;
}
.sv-contact-form textarea { min-height: 120px; resize: vertical; }
.sv-contact-form input::placeholder, .sv-contact-form textarea::placeholder { color: #b4bfc4; }
.sv-contact-form input:focus, .sv-contact-form select:focus, .sv-contact-form textarea:focus {
	outline: none; border-color: var(--e-global-color-serava-leaf, #4fa23a); box-shadow: 0 0 0 3px rgba(79,162,58,0.12);
}
.sv-contact-form input.wpforms-error, .sv-contact-form select.wpforms-error, .sv-contact-form textarea.wpforms-error { border-color: #d63638; }
.sv-contact-form .wpforms-field .wpforms-error { font-size: 11px; margin-top: 4px; }

/* Smart phone field (same intl-tel-input handling as the modal) */
.sv-contact-form .wpforms-field-phone .iti { display: block; width: 100%; }
.sv-contact-form .wpforms-field-phone input { padding-left: 52px; }
.sv-contact-form .wpforms-field-description { margin-top: 6px; font-size: 12px; color: #8a938c; }

/* Modern (choices.js) crops multiselect — match the rounded/green-focus aesthetic, leaf
   green tags for selected crops. */
.sv-contact-form .choices { margin: 0; }
.sv-contact-form .choices__inner {
	min-height: 48px; border: 1px solid var(--e-global-color-serava-line, #dbe3dc); border-radius: 8px;
	background: #fff; padding: 8px 10px 4px; font-size: 14px; transition: border-color .15s, box-shadow .15s;
}
.sv-contact-form .choices.is-focused .choices__inner,
.sv-contact-form .choices.is-open .choices__inner {
	border-color: var(--e-global-color-serava-leaf, #4fa23a); box-shadow: 0 0 0 3px rgba(79,162,58,0.12);
}
/* !important: choices.js's own stylesheet loads after the child theme and colors selected
   tags its default cyan/blue at equal specificity — force the leaf-green brand color. */
.sv-contact-form .choices__list--multiple .choices__item {
	background: var(--e-global-color-serava-leaf, #4fa23a) !important; border-color: var(--e-global-color-serava-leaf, #4fa23a) !important;
	border-radius: 6px; font-size: 12.5px; font-weight: 500; padding: 4px 8px; margin: 2px 4px 2px 0;
}
.sv-contact-form .choices__list--multiple .choices__item.is-highlighted { background: #3d8a2c !important; border-color: #3d8a2c !important; }
.sv-contact-form .choices__list--multiple .choices__item .choices__button { border-left-color: rgba(255,255,255,0.5); }
.sv-contact-form .choices__input { background: transparent; font-size: 14px; margin: 0; padding: 4px; }
.sv-contact-form .choices__list--dropdown { border: 1px solid var(--e-global-color-serava-line, #dbe3dc); border-radius: 8px; }
.sv-contact-form .choices__list--dropdown .choices__item--selectable.is-highlighted { background: #eef4e9; }
.sv-contact-form .choices__placeholder { color: #b4bfc4; opacity: 1; }

/* Full-width navy submit (matching the Enquiry modal's look/feel) */
.sv-contact-form .wpforms-submit-container { margin-top: 20px; }
.sv-contact-form button.wpforms-submit {
	width: 100%; border: 0 !important; border-radius: 8px !important;
	background: var(--e-global-color-serava-navy, #123a6f) !important; color: #fff !important;
	padding: 14px 20px !important; font-size: 14px !important; font-weight: 700 !important;
	cursor: pointer; transition: background .15s;
}
.sv-contact-form button.wpforms-submit:hover { background: #0d2f5c !important; }
@media (max-width: 600px) {
	.sv-contact-form .wpforms-field-container { grid-template-columns: 1fr; }
}

/* ── Header "Enquire Now" CTA (.sv-header-cta) — un-hidden on tablet/mobile 2026-07-02 so
   the primary conversion action stays reachable on phones. Compact padding/size at
   ≤767px so logo + hamburger + CTA fit the row without wrapping; the header flex row is
   allowed to shrink the CTA before wrapping. Needs a real-device visual confirm. ── */
@media (max-width: 1024px) {
	.sv-header-cta .elementor-button { padding: 10px 18px !important; font-size: 13px !important; }
}
@media (max-width: 767px) {
	.sv-header-cta .elementor-button { padding: 8px 13px !important; font-size: 12px !important; }
	/* keep logo | (hamburger + CTA) on one line, let items shrink not wrap */
	.elementor-location-header .sv-header-cta { flex-shrink: 1; }
}

/* ── Live product search (.sv-psearch — REST-backed AJAX, products only). Used on the 404
   page. 2026-07-02. ── */
.sv-psearch { position: relative; width: 100%; max-width: 520px; }
.sv-psearch__bar { display: flex; align-items: center; gap: 8px; position: relative; }
.sv-psearch__icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--e-global-color-serava-muted, #586760); font-size: 14px; pointer-events: none; }
.sv-psearch__input {
	flex: 1; min-width: 0; height: 48px; padding: 0 14px 0 40px;
	border: 1px solid var(--e-global-color-serava-line, #dbe3dc); border-radius: 8px; background: #fff;
	font-family: inherit; font-size: 14px; color: var(--e-global-color-serava-charcoal, #1f2937);
	transition: border-color .15s, box-shadow .15s;
}
.sv-psearch__input::placeholder { color: #b4bfc4; }
.sv-psearch__input:focus { outline: none; border-color: var(--e-global-color-serava-leaf, #4fa23a); box-shadow: 0 0 0 3px rgba(79,162,58,0.12); }
.sv-psearch__btn {
	/* !important: Hello Elementor's reset.css styles [type="submit"] at equal specificity and
	   wins the tie by load order (same issue as .sv-tab-btn), rendering the button unstyled/pink. */
	flex-shrink: 0; height: 48px; padding: 0 22px; border: 0 !important; border-radius: 8px; cursor: pointer;
	background: var(--e-global-color-serava-leaf, #4fa23a) !important; color: #fff !important; font-family: inherit; font-size: 14px; font-weight: 700;
	transition: background .15s;
}
.sv-psearch__btn:hover { background: #3d8a2c !important; }
.sv-psearch__results {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
	background: #fff; border: 1px solid var(--e-global-color-serava-line, #dbe3dc); border-radius: 10px;
	box-shadow: 0 12px 30px rgba(23,34,29,0.12); overflow: hidden; max-height: 340px; overflow-y: auto;
}
.sv-psearch__item {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 11px 16px; text-decoration: none; border-bottom: 1px solid #f0f3ee;
}
.sv-psearch__item:last-child { border-bottom: 0; }
.sv-psearch__item:hover, .sv-psearch__item.is-active { background: #f2f7ee; }
.sv-psearch__name { font-size: 14px; font-weight: 600; color: var(--e-global-color-serava-navy, #123a6f); }
.sv-psearch__cat { flex-shrink: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--e-global-color-serava-leaf, #4fa23a); background: #eef4e9; padding: 3px 9px; border-radius: 20px; }
.sv-psearch__empty { padding: 14px 16px; font-size: 13px; color: var(--e-global-color-serava-muted, #586760); }

/* ── Archive infinite scroll (serava-filters.js): pagination replaced by load-on-scroll.
   .sv-infinite is added by JS to the loop-grid container, so with JS OFF the real
   pagination still shows (progressive enhancement). 2026-07-02. ── */
.sv-infinite .elementor-pagination { display: none !important; }

/* ══ Navigation: sleek mega menu (desktop) + polished mobile drawer. 2026-07-02.
   The "Crop Protection" submenu is upgraded by serava-filters.js (initMegaMenu) into a
   designed panel — icon tile + descriptor + product count per item + a "View all" footer.
   Overrides Elementor's stock dropdown (incl. its charcoal hover). ══ */
.elementor-nav-menu--main .sv-mega {
	width: 480px !important; max-width: 92vw; padding: 8px !important; margin-top: 10px !important;
	border: 1px solid #e6ebe4 !important;
	border-radius: 14px !important; overflow: hidden;
	box-shadow: 0 18px 44px rgba(18,58,111,0.16) !important; background: #fff !important;
}
/* Transparent hover-bridge over the 10px gap so moving cursor from the item into the
   panel doesn't drop the :hover (the panel is offset below the menu row). */
.elementor-nav-menu--main .menu-item-has-children > .sv-mega::before {
	content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.elementor-nav-menu--main .sv-mega .menu-item { margin: 0 !important; }
.elementor-nav-menu--main .sv-mega a.elementor-sub-item {
	display: flex !important; align-items: center; gap: 14px; height: auto !important; white-space: normal !important;
	padding: 11px 12px !important; border-radius: 10px !important;
	color: var(--e-global-color-serava-charcoal, #17221d) !important; background: transparent !important; transition: background .12s;
}
.elementor-nav-menu--main .sv-mega a.elementor-sub-item:hover,
.elementor-nav-menu--main .sv-mega a.elementor-sub-item:focus { background: #f2f7ee !important; }
.sv-mega__ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: #eef4e9; color: #3b7d24; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; transition: background .12s; }
.sv-mega a.elementor-sub-item:hover .sv-mega__ico { background: #e2efd9; }
.sv-mega__txt { display: flex; flex-direction: column; flex: 1; line-height: 1.32; }
.sv-mega__name { font-size: 14px; font-weight: 700; color: var(--e-global-color-serava-charcoal, #17221d); }
.sv-mega__desc { font-size: 12px; font-weight: 400; color: var(--e-global-color-serava-muted, #586760); }
.sv-mega__count { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--e-global-color-serava-leaf, #4fa23a); background: #eef4e9; padding: 3px 9px; border-radius: 20px; }
.elementor-nav-menu--main .sv-mega .sv-mega__foot { border-top: 1px solid #eef1ec !important; margin-top: 4px !important; }
.elementor-nav-menu--main .sv-mega .sv-mega__foot a {
	display: flex !important; align-items: center; justify-content: space-between; gap: 8px;
	padding: 12px 14px !important; font-size: 13px; font-weight: 700; color: var(--e-global-color-serava-navy, #123a6f) !important; background: transparent !important;
}
.elementor-nav-menu--main .sv-mega .sv-mega__foot a:hover { color: var(--e-global-color-serava-leaf, #4fa23a) !important; }
.sv-mega__foot a i { color: var(--e-global-color-serava-leaf, #4fa23a); font-size: 12px; }

/* ══ Mobile: hamburger + full-width drawer (≤1024, Elementor's mobile breakpoint).
   The stock header wraps (logo row-1, nav row-2) and renders the menu as a narrow
   in-flow block — this rebuilds it into one clean bar + a proper drop-down drawer. ══ */
@media (max-width: 1024px) {
	/* ── Header bar: ONE row — logo left · compact CTA + burger right ── */
	.elementor-element-hdrinner1 > .e-con-inner {
		flex-wrap: nowrap !important; flex-direction: row !important;
		align-items: center !important; justify-content: space-between !important;
	}
	.elementor-element-hdrlogo01 { flex: 0 0 auto !important; }
	.elementor-element-hdrnavc01 {
		display: flex !important; flex-direction: row !important; align-items: center !important;
		justify-content: flex-end !important; gap: 12px !important;
		width: auto !important; flex: 0 0 auto !important;
	}
	/* CTA compact, sits to the LEFT of the burger */
	.elementor-element-hdrcta001 { order: -1 !important; flex: 0 0 auto !important; }
	.elementor-element-hdrcta001 .elementor-button { padding: 9px 15px !important; font-size: 13px !important; }

	/* ── Toggle (hamburger / X) ── */
	.elementor-location-header .elementor-menu-toggle {
		background: transparent !important; border: 0 !important; padding: 4px !important;
		display: inline-flex !important; align-items: center !important; color: var(--e-global-color-serava-navy, #123a6f) !important;
	}
	.elementor-location-header .elementor-menu-toggle svg { fill: var(--e-global-color-serava-navy, #123a6f) !important; width: 30px !important; height: 30px !important; }
	.elementor-location-header .elementor-menu-toggle i { color: var(--e-global-color-serava-navy, #123a6f) !important; font-size: 28px !important; }

	/* ── Drawer: full-width panel dropping below the fixed header bar ── */
	nav.elementor-nav-menu--dropdown {
		position: fixed !important; top: 76px !important; left: 0 !important; right: 0 !important;
		width: 100vw !important; max-width: 100vw !important;
		max-height: calc(100vh - 76px) !important; overflow-y: auto !important;
		margin: 0 !important; padding: 6px 0 16px !important;
		background: #fff !important; border-top: 1px solid #eef1ec !important; border-radius: 0 !important;
		box-shadow: 0 22px 40px rgba(23,34,29,0.18) !important;
	}
	nav.elementor-nav-menu--dropdown > ul { width: 100% !important; }

	/* ── Top-level rows ── */
	.elementor-nav-menu--dropdown a.elementor-item {
		display: flex !important; align-items: center !important; justify-content: space-between !important;
		padding: 16px 24px !important; font-size: 16px !important; font-weight: 600 !important;
		color: var(--e-global-color-serava-charcoal, #17221d) !important; background: #fff !important;
		border-bottom: 1px solid #f3f5f1 !important; line-height: 1.3 !important;
	}
	/* current page */
	.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active { color: var(--e-global-color-serava-leaf, #4fa23a) !important; }
	/* OPEN parent (SmartMenus .highlighted) + hover/focus — replaces the dark #3f444b
	   default that rendered dark-on-dark; use a light green tint with navy text */
	.elementor-nav-menu--dropdown a.elementor-item.highlighted,
	.elementor-nav-menu--dropdown a.elementor-item:hover,
	.elementor-nav-menu--dropdown a.elementor-item:focus {
		background: #f2f7ec !important; color: var(--e-global-color-serava-navy, #123a6f) !important;
	}
	/* expand caret — flush right, rotates when open */
	.elementor-nav-menu--dropdown a.elementor-item .sub-arrow {
		margin: 0 !important; width: auto !important; height: auto !important; background: transparent !important; flex-shrink: 0;
	}
	.elementor-nav-menu--dropdown a.elementor-item .sub-arrow i { font-size: 14px !important; color: var(--e-global-color-serava-muted, #586760) !important; transition: transform .18s; }
	.elementor-nav-menu--dropdown a.elementor-item.highlighted .sub-arrow i { transform: rotate(180deg); color: var(--e-global-color-serava-leaf, #4fa23a) !important; }

	/* ── Sub-items (Fungicides / Herbicides / Insecticides) ── */
	.elementor-nav-menu--dropdown a.elementor-sub-item {
		padding: 13px 24px 13px 46px !important; font-size: 15px !important; font-weight: 500 !important;
		background: #f7faf3 !important; color: #3a473f !important; border-bottom: 1px solid #eef1ec !important;
	}
	.elementor-nav-menu--dropdown a.elementor-sub-item:hover,
	.elementor-nav-menu--dropdown a.elementor-sub-item.highlighted { color: var(--e-global-color-serava-leaf, #4fa23a) !important; background: #eef4e6 !important; }
}

/* Small phones: logo + CTA + burger is ~356px, snug on 360px screens — trim the
   logo and CTA a touch so the single header row never overflows. (Reasoned from
   measured widths; test viewport here floors at 662px so ≤420 isn't eye-verified.) */
@media (max-width: 420px) {
	/* Header must fit FOUR items now (logo · CTA · burger · search icon) — measured at a
	   341px client width: logo 132 + CTA 101 + burger 38 + search 40 + 3×12 gaps = 347px
	   vs 293px available inside hdrinner1's 24px side padding. Trim everything. */
	.elementor-element-hdrinner1 { padding-left: 14px !important; padding-right: 14px !important; }
	.elementor-element-hdrlogo01 img { max-width: 112px !important; height: auto !important; }
	.elementor-element-hdrnavc01 { gap: 7px !important; }
	.elementor-element-hdrcta001 .elementor-button { padding: 7px 10px !important; font-size: 12px !important; }
	.sv-hsearch-btn { width: 34px; height: 34px; font-size: 14px; }
	.elementor-nav-menu--dropdown a.elementor-item { padding-top: 15px !important; padding-bottom: 15px !important; }
}
@media (max-width: 360px) {
	.elementor-element-hdrinner1 { padding-left: 10px !important; padding-right: 10px !important; }
	.elementor-element-hdrlogo01 img { max-width: 104px !important; }
	.elementor-element-hdrcta001 .elementor-button { padding: 6px 8px !important; }
}

/* ══ Mobile polish pass (≤767px) — 2026-07-06. From a 390px-viewport audit of the
   live site: (1) homepage stats strip stacked 1-col with stray column-divider
   borders and mixed center/left alignment → centered 2×2 grid, dividers off,
   label line-height tightened (measured 2.5× on 11px caps); (2) archive hero
   mini-stat counters wrapped 3+1 → tidy 2×2 (structural :has() covers all four
   CPT archive templates 308–311 without per-template IDs); (3) .sv-tab-nav
   titles wrapped 2/2/1 rows → single swipeable row (standard mobile tab
   pattern); (4) contact form card: 32px padding left fields ~257px wide on a
   390px screen → 22/18px. ══ */
@media (max-width: 767px) {
	/* 1 ── homepage stats: centered 2×2 */
	.elementor-element-1bd9ee33 { flex-direction: row !important; flex-wrap: wrap !important; gap: 28px 0 !important; }
	.elementor-element-1bd9ee33 > .e-con {
		width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important;
		border-left: 0 !important; border-right: 0 !important; padding: 0 12px !important; text-align: center;
	}
	.elementor-element-1bd9ee33 .elementor-counter-title,
	.elementor-element-1bd9ee33 .elementor-widget-text-editor,
	.elementor-element-1bd9ee33 .elementor-heading-title { text-align: center !important; }
	.elementor-element-1bd9ee33 .elementor-counter-title { line-height: 1.45 !important; margin-top: 2px; }
	.elementor-element-1bd9ee33 .elementor-widget-text-editor { font-size: 13px; line-height: 1.5; }

	/* 2 ── archive hero mini-stats: 2×2 */
	.elementor-location-archive .e-con:has(> .elementor-widget-counter) { flex-wrap: wrap !important; gap: 14px 0 !important; }
	.elementor-location-archive .e-con:has(> .elementor-widget-counter) > .elementor-widget-counter {
		width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important;
	}

	/* 3 ── product tabs (.sv-tab-nav): one swipeable row instead of wrapping */
	.sv-tab-nav { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.sv-tab-nav::-webkit-scrollbar { display: none; }
	.sv-tab-btn { white-space: nowrap; flex: 0 0 auto; }

	/* 4 ── contact form card: give the fields room */
	.elementor-element-38e687e0 { padding: 22px 18px !important; }
}

/* ══ Header live product search (.sv-hsearch-*) — 2026-07-06, review feedback item 4.
   A magnifier button injected by serava-filters.js (initHeaderSearch) before the header
   CTA; toggles a full-width panel under the header holding the same .sv-psearch box the
   404 page uses. Buttons carry !important on background/border because Hello Elementor's
   reset.css styles [type="button"] at equal specificity and wins the tie by load order
   (same trap as .sv-tab-btn / .sv-psearch__btn). ══ */
.sv-hsearch-btn {
	background: transparent !important; border: 0 !important; cursor: pointer;
	width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--e-global-color-serava-navy, #123a6f) !important; font-size: 16px;
	transition: background .15s;
}
.sv-hsearch-btn:hover, body.sv-hsearch-open .sv-hsearch-btn { background: #f2f7ee !important; }
.sv-hsearch-panel {
	position: fixed; top: 76px; left: 0; right: 0; z-index: 9990;
	background: #fff; border-bottom: 1px solid #e6ebe4;
	box-shadow: 0 18px 34px rgba(23, 34, 29, 0.14);
	padding: 16px clamp(16px, 4vw, 32px);
}
.sv-hsearch-panel .sv-psearch { max-width: 560px; margin: 0 auto; }

/* ══ Contact conversion CTAs (.sv-quickcta pills + clickable .sv-topic-card) —
   2026-07-06, review feedback item 5 ("bookings are just a form"). Injected by
   serava-filters.js (initContactCtas); pills preselect the form's reason select
   (WPForms field class sv-reason-field) and scroll to the form. Same [type="button"]
   reset-tie !importants as the other sv-* buttons. ══ */
.sv-quickcta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.sv-quickcta__btn {
	background: #eef4e9 !important; border: 1px solid #dbe8d2 !important; cursor: pointer;
	border-radius: 24px !important; padding: 9px 18px !important;
	font-family: inherit; font-size: 13px !important; font-weight: 700 !important;
	color: var(--e-global-color-serava-navy, #123a6f) !important;
	transition: background .15s, border-color .15s;
}
.sv-quickcta__btn:hover {
	background: var(--e-global-color-serava-leaf, #4fa23a) !important;
	border-color: var(--e-global-color-serava-leaf, #4fa23a) !important; color: #fff !important;
}
.sv-topic-card { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.sv-topic-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(23, 34, 29, 0.10); }
.sv-topic-card:focus-visible { outline: 2px solid var(--e-global-color-serava-leaf, #4fa23a); outline-offset: 2px; }