/* =========================================================================
   AgroSuste — Design Polish Layer
   Loaded last (see functions.php: agrosuste_polish_stylesheet).
   Reuses Elementor's own global color/typography CSS variables instead of
   hardcoding hex values, so any palette tweak made later in Elementor ->
   Site Settings keeps flowing through here automatically.
   ========================================================================= */

:root {
	/* Palette v2 — warm green + soft gold on a cream base, matched from
	   machambas-mz.lovable.app's design tokens (converted from their OKLCH
	   values to sRGB hex). Overriding Elementor's own global-color custom
	   properties here (not just the var() fallback below) makes the new
	   palette apply everywhere those globals are referenced site-wide —
	   every Elementor widget using a global color swatch, not only the
	   rules in this stylesheet. */
	--e-global-color-primary: #097F23;
	--e-global-color-secondary: #479C4D;
	--e-global-color-accent: #FBD35F;
	--e-global-color-text: #0E1F0F;
	--e-global-color-c9fba2c: #F1EFE0;
	--e-global-color-7549590: #471A00;

	/* semantic aliases onto the (now-overridden) Elementor kit colors */
	--ags-primary: var(--e-global-color-primary, #097F23);
	--ags-secondary: var(--e-global-color-secondary, #479C4D);
	--ags-accent: var(--e-global-color-accent, #FBD35F);
	--ags-text: var(--e-global-color-text, #0E1F0F);
	--ags-success: var(--e-global-color-fbc9f56, #3A8C5A);
	--ags-error: var(--e-global-color-244f261, #C94B4B);
	--ags-white: var(--e-global-color-374191d, #FFFFFF);
	--ags-bg-soft: var(--e-global-color-c9fba2c, #F1EFE0);
	--ags-black: var(--e-global-color-7549590, #471A00);
	--ags-bg-page: #FEFCF4;
	--ags-border: #DCE0D2;

	--ags-font-heading: var(--e-global-typography-primary-font-family, "Poppins"), sans-serif;
	--ags-font-body: var(--e-global-typography-text-font-family, "Inter"), sans-serif;

	/* fluid type scale */
	--ags-fs-xs: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
	--ags-fs-sm: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
	--ags-fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--ags-fs-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
	--ags-fs-xl: clamp(1.375rem, 1.22rem + 0.6vw, 1.75rem);
	--ags-fs-2xl: clamp(1.75rem, 1.42rem + 1.2vw, 2.5rem);
	--ags-fs-3xl: clamp(2.1rem, 1.6rem + 2vw, 3.25rem);

	/* spacing / radius / elevation / motion */
	--ags-space-xs: 0.5rem;
	--ags-space-sm: 1rem;
	--ags-space-md: 1.5rem;
	--ags-space-lg: clamp(2.5rem, 2rem + 2vw, 4rem);
	--ags-space-xl: clamp(4rem, 3rem + 4vw, 7rem);

	--ags-radius-sm: 8px;
	--ags-radius-md: 14px;
	--ags-radius-lg: 22px;
	--ags-radius-pill: 999px;

	--ags-shadow-sm: 0 2px 10px rgba(20, 40, 15, 0.07);
	--ags-shadow-md: 0 10px 28px rgba(20, 40, 15, 0.10);
	--ags-shadow-lg: 0 20px 48px rgba(20, 40, 15, 0.16);

	--ags-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ags-transition: 0.25s var(--ags-ease);
}

/* =========================================================================
   Base typography
   ========================================================================= */

body {
	background-color: var(--ags-bg-page);
	color: var(--ags-text);
	font-size: var(--ags-fs-base);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--ags-font-heading);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

h1, .elementor-widget-heading h1.elementor-heading-title { font-size: var(--ags-fs-3xl); }
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: var(--ags-fs-2xl); }
h3, .elementor-widget-heading h3.elementor-heading-title { font-size: var(--ags-fs-xl); }
h4, .elementor-widget-heading h4.elementor-heading-title { font-size: var(--ags-fs-lg); }

p, li, .elementor-widget-text-editor {
	font-family: var(--ags-font-body);
}

/* global responsive safety net — nothing should ever be able to force
   horizontal scroll on the page itself; embeds/tables get their own
   scroll container instead */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}

img, svg, video, iframe {
	max-width: 100%;
	height: auto;
}

table {
	max-width: 100%;
}

.elementor-widget-html iframe {
	width: 100%;
}

::selection {
	background: var(--ags-primary);
	color: var(--ags-white);
}

/* scrollbar (WebKit/Blink) — subtle brand touch */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ags-bg-soft); }
::-webkit-scrollbar-thumb {
	background: var(--ags-secondary);
	border-radius: var(--ags-radius-pill);
	border: 3px solid var(--ags-bg-soft);
}
::-webkit-scrollbar-thumb:hover { background: var(--ags-primary); }

/* =========================================================================
   Long-form content (legal pages, blog posts, institutional pages) —
   readable measure, generous rhythm between paragraphs/headings
   ========================================================================= */

.elementor-widget-text-editor .elementor-widget-container {
	max-width: 780px;
}

.elementor-widget-text-editor p {
	margin-bottom: var(--ags-space-sm);
}

.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3 {
	margin-top: var(--ags-space-md);
	margin-bottom: var(--ags-space-xs);
	color: var(--ags-primary);
}

.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
	margin: 0 0 var(--ags-space-sm);
	padding-left: 1.4em;
}

.elementor-widget-text-editor li {
	margin-bottom: 0.4em;
}

/* =========================================================================
   Links & focus
   ========================================================================= */

a { transition: color var(--ags-transition); }

a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--ags-accent) !important;
	outline-offset: 3px;
}

/* =========================================================================
   Buttons — Elementor, WooCommerce and native forms, unified
   ========================================================================= */

.elementor-button,
.elementor-button-link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce a.add_to_cart_button,
.woocommerce a.single_add_to_cart_button,
.woocommerce-page .checkout-button,
.wpcf7-submit,
input[type="submit"] {
	font-family: var(--ags-font-heading);
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: var(--ags-radius-pill);
	padding: 0.85em 1.9em;
	border: none;
	box-shadow: var(--ags-shadow-sm);
	transition: transform var(--ags-transition), box-shadow var(--ags-transition), background-color var(--ags-transition), color var(--ags-transition);
}

/* fallback color for any button above that doesn't already get a specific
   color from Elementor's own per-widget CSS (e.g. native WooCommerce
   add-to-cart buttons on shop/category archives, which had none at all and
   were falling back to browser/plugin default grey) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce a.add_to_cart_button,
.woocommerce a.single_add_to_cart_button {
	background-color: var(--ags-accent);
	color: var(--ags-black);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.add_to_cart_button:hover,
.woocommerce a.single_add_to_cart_button:hover {
	background-color: var(--ags-primary);
	color: var(--ags-white);
}

.elementor-button:hover,
.elementor-button-link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.add_to_cart_button:hover,
.woocommerce a.single_add_to_cart_button:hover,
.wpcf7-submit:hover {
	transform: translateY(-2px);
	box-shadow: var(--ags-shadow-md);
}

.elementor-button:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
	transform: translateY(0);
	box-shadow: var(--ags-shadow-sm);
}

/* outline / text-only button variants keep a crisp border instead of a shadow lift */
.elementor-button.elementor-button-link:not([style*="background"]) {
	box-shadow: none;
}

/* =========================================================================
   Cards — WooCommerce product loop, Jet Engine listing grid, icon boxes
   ========================================================================= */

.woocommerce ul.products li.product,
.jet-listing-grid__item,
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.eael-info-box {
	border-radius: var(--ags-radius-md);
	transition: transform var(--ags-transition), box-shadow var(--ags-transition);
}

.woocommerce ul.products li.product:hover,
.jet-listing-grid__item:hover,
.eael-info-box:hover {
	transform: translateY(-6px);
	box-shadow: var(--ags-shadow-md);
}

.woocommerce ul.products li.product {
	box-shadow: var(--ags-shadow-sm);
	overflow: hidden;
	background: var(--ags-white);
}

.woocommerce ul.products li.product img {
	border-radius: var(--ags-radius-md) var(--ags-radius-md) 0 0;
	transition: transform 0.5s var(--ags-ease);
}

.woocommerce ul.products li.product:hover img {
	transform: scale(1.05);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--ags-font-heading);
	font-weight: 600;
	color: var(--ags-text);
}

/* generic image hover lift, scoped so it doesn't touch logos/icons */
.elementor-widget-image:hover img,
.jet-listing-grid__item img:hover {
	transition: transform 0.5s var(--ags-ease);
}

/* =========================================================================
   Images everywhere — consistent framing (avatars, content photos, carousels)
   ========================================================================= */

/* team / avatar-style photos: force a uniform circular frame regardless of
   how each source photo was originally cropped, so mismatched crops read as
   one consistent set instead of ad-hoc cutouts */
.info-curta .elementor-widget-image img,
.elementor-widget-image img[width="150"][height="150"] {
	width: clamp(90px, 14vw, 140px);
	height: clamp(90px, 14vw, 140px);
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--ags-white);
	box-shadow: var(--ags-shadow-md);
	transition: transform var(--ags-transition), box-shadow var(--ags-transition);
}

.info-curta .elementor-widget-image:hover img,
.elementor-widget-image img[width="150"][height="150"]:hover {
	transform: translateY(-4px) scale(1.03);
	box-shadow: var(--ags-shadow-lg);
}

/* full-width content photography (non-avatar Elementor image widgets);
   the more specific .info-curta avatar rule above still wins for team photos */
.elementor-widget-image img {
	border-radius: var(--ags-radius-lg);
	box-shadow: var(--ags-shadow-sm);
}

/* Elementor / Essential Addons carousels and loop grids — uniform crop */
.elementor-widget-loop-carousel img,
.elementor-widget-n-carousel img,
.eael-loop-carousel img,
.swiper-slide img {
	border-radius: var(--ags-radius-md);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.elementor-widget-icon-box img {
	border-radius: var(--ags-radius-sm);
}

/* =========================================================================
   Elementor Loop Grid ("Card de produto" template, used for category
   showcases like the homepage's "Sementes"/"Milho" carousel). It's set to a
   fixed 3-column grid regardless of how little width its parent row hands
   it — next to a half-width hero image, each column shrinks to well under
   100px, forcing the title and even the "Comprar" button to wrap one
   word (or one letter) per line. Let the grid pick its own column count
   from the space it actually has instead of a hardcoded count.
   ========================================================================= */

/* switching this to flexbox (instead of trying to fight Elementor's own
   grid-template-columns / justify-content custom properties, which left
   phantom empty grid tracks between the two real cards) so wrapping and
   sizing behave predictably regardless of how many items exist */
.elementor-loop-container.elementor-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	grid-template-columns: none !important;
	gap: var(--ags-space-md) !important;
}

.e-loop-item {
	flex: 1 1 220px !important;
	max-width: 280px !important;
	width: auto !important;
	min-width: 0;
	border-radius: var(--ags-radius-md);
	overflow: hidden;
	box-shadow: var(--ags-shadow-sm);
	transition: transform var(--ags-transition), box-shadow var(--ags-transition);
}

.e-loop-item .elementor-widget-container,
.e-loop-item .elementor-element {
	width: 100% !important;
	max-width: 100% !important;
}

.e-loop-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--ags-shadow-md);
}

/* on very narrow phones, two 220px-min cards don't fit side by side even
   with shrinking allowed — force a clean single column instead of letting
   the second card overflow/clip against the global overflow-x:hidden */
@media (max-width: 480px) {
	.e-loop-item {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}

.e-loop-item .elementor-widget-button .elementor-button {
	white-space: normal;
	word-break: normal;
	overflow-wrap: break-word;
	width: 100%;
	text-align: center;
}

.e-loop-item .elementor-widget-jet-listing-dynamic-field,
.e-loop-item .elementor-widget-heading {
	text-align: center;
}

/* =========================================================================
   WooCommerce — price, sale badge, ratings, stock, swatches, quantity
   ========================================================================= */

.woocommerce span.onsale {
	background: var(--ags-accent);
	color: var(--ags-black);
	font-family: var(--ags-font-heading);
	font-weight: 700;
	border-radius: var(--ags-radius-pill);
	box-shadow: var(--ags-shadow-sm);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--ags-primary);
	font-family: var(--ags-font-heading);
	font-weight: 600;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	color: var(--ags-secondary);
	text-decoration: none;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	opacity: 0.55;
}

.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
	color: var(--ags-accent);
}

.woocommerce p.stock.in-stock { color: var(--ags-success); }
.woocommerce p.stock.out-of-stock { color: var(--ags-error); }

.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce table.shop_table input.qty,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"],
.woocommerce-page textarea,
.woocommerce-page select {
	border-radius: var(--ags-radius-sm);
	border: 1px solid var(--ags-border);
	transition: border-color var(--ags-transition), box-shadow var(--ags-transition);
}

.woocommerce-page input:focus,
.woocommerce-page textarea:focus,
.woocommerce-page select:focus,
.elementor-field-group input:focus,
.elementor-field-group textarea:focus {
	border-color: var(--ags-secondary) !important;
	box-shadow: 0 0 0 3px rgba(71, 156, 77, 0.18);
	outline: none;
}

/* variation swatches — active state ring in brand accent */
.wvs-archive-variations-wrapper .wvs-style-image.selected,
.wvs-single-variation-wrap .wvs-style-image.selected,
ul.variable-items-wrapper li.variable-item.selected {
	outline: 2px solid var(--ags-accent) !important;
	outline-offset: 2px;
}

/* quantity stepper buttons, if theme markup exposes them */
.woocommerce .quantity { border-radius: var(--ags-radius-sm); overflow: hidden; }

/* =========================================================================
   Forms (Elementor Form widget / Contact Form 7)
   ========================================================================= */

.elementor-field-group .elementor-field,
.elementor-field-textual {
	border-radius: var(--ags-radius-sm) !important;
	border: 1px solid var(--ags-border) !important;
	transition: border-color var(--ags-transition), box-shadow var(--ags-transition);
}

/* =========================================================================
   Header & navigation
   ========================================================================= */

.elementor-location-header {
	box-shadow: var(--ags-shadow-sm);
	position: relative;
	z-index: 999;
}

/* the header was built with a solid gold (accent) background, which also made
   the gold-colored mobile menu toggle icon disappear against it — same bug
   family as the white-on-white logo. Switch the header to a clean white
   surface (gold stays reserved for hover states, badges and small details)
   and give the toggle icon guaranteed contrast against either. */
.elementor-location-header,
.elementor-354 .elementor-element-2c09065,
.elementor-354 .elementor-element-22ce1e6,
.elementor-354 .elementor-element-483ff6c,
.elementor-354 .elementor-element-f7526c6 {
	background-color: rgba(254, 252, 244, 0.82) !important;
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
}

.elementor-menu-toggle,
.elementor-menu-toggle svg {
	color: var(--ags-primary) !important;
	fill: var(--ags-primary) !important;
}

.elementor-menu-toggle {
	border: 1px solid var(--ags-primary);
}

/* belt-and-suspenders: guarantee the logo is always rendered at a sane,
   visible size regardless of any container width collapsing responsively */
.elementor-widget-theme-site-logo img {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto;
	min-width: 40px;
}

/* the mini-cart toggle used a hand-picked green slightly off the brand's
   actual primary — align it so header/cart green reads as one color */
.elementor-location-header .elementor-menu-cart__toggle .elementor-button {
	background-color: var(--ags-primary) !important;
	/* the generic sitewide button shadow (--ags-shadow-sm) reads as too heavy
	   against this small pill's flat green fill — soften it just here rather
	   than lightening every button on the site */
	box-shadow: 0 1px 4px rgba(20, 40, 15, 0.12) !important;
}

.elementor-location-header .elementor-menu-cart__toggle .elementor-button:hover {
	box-shadow: 0 3px 8px rgba(20, 40, 15, 0.14) !important;
}

/* =========================================================================
   Header — structural rebuild
   The header markup mixes Font Awesome SVG icons (WhatsApp/phone/address/
   email) with a *different* icon font from the "icon-element" plugin
   (account/help icons) at wildly different optical sizes, sizes the two
   bars with rigid percentage widths that leave the sparse cart/account
   column floating in dead space, and never fixes vertical centering — the
   combination is exactly what reads as "not aligned, not professional".
   This section forces one consistent system across the whole header.
   ========================================================================= */

/* -- top info bar: compact, consistent icon+text pairing, evenly spaced -- */
.elementor-354 .elementor-element-2c09065 {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	border-bottom: 1px solid rgba(9, 127, 35, 0.08);
}

.elementor-354 .elementor-element-2c09065 .elementor-icon-list-items {
	align-items: center;
}

.elementor-354 .elementor-element-2c09065 .elementor-icon-list-item {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4em;
}

.elementor-354 .elementor-element-2c09065 .elementor-icon-list-icon,
.elementor-354 .elementor-element-2c09065 .elementor-icon-list-icon svg {
	width: 14px;
	height: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.elementor-354 .elementor-element-2c09065 .elementor-icon-list-icon i {
	font-size: 14px;
	line-height: 1;
}

.elementor-354 .elementor-element-2c09065 .elementor-icon-list-text,
.elementor-354 .elementor-element-2c09065 .elementor-icon-list-item a {
	font-size: var(--ags-fs-xs);
	color: var(--ags-text);
	letter-spacing: 0.01em;
}

.elementor-354 .elementor-element-2c09065 .elementor-icon-list-item:not(:last-child) {
	margin-right: var(--ags-space-sm);
}

/* -- main bar: logo / nav / cart+account, one flex row, gap-driven — the
   percentage widths (10% / 65% / 25%) leave the sparse cart+icons column
   floating with dead space on a wide screen; let flex-basis:auto + gap size
   everything by actual content instead */
.elementor-354 .elementor-element-f7526c6 > .e-con-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ags-space-md);
	padding-top: 10px;
	padding-bottom: 10px;
}

.elementor-354 .elementor-element-b09e3ce,
.elementor-354 .elementor-element-57a87bd,
.elementor-354 .elementor-element-39c4f4c {
	width: auto !important;
	max-width: none !important;
}

.elementor-354 .elementor-element-b09e3ce {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.elementor-354 .elementor-element-ac6a466 img {
	max-width: none !important;
	width: clamp(40px, 4vw, 56px) !important;
	height: auto !important;
}

.elementor-354 .elementor-element-57a87bd {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
}

/* gap/alignment only — never touch display here. Elementor already toggles
   this element's display between flex (horizontal desktop nav) and none
   (mobile/tablet, where only the hamburger + dropdown should show); an
   earlier version of this rule forced display:flex unconditionally, which
   defeated that toggle and showed the full horizontal menu AND the burger
   icon stacked on top of each other on small screens. */
.elementor-354 .elementor-nav-menu--main.elementor-nav-menu--layout-horizontal {
	align-items: center;
	gap: var(--ags-space-lg);
}

.elementor-354 .elementor-element-39c4f4c {
	flex: 0 0 auto;
	display: flex;
	/* Elementor's own responsive CSS switches this column to
	   --align-items:flex-end below 767px (see post-354.css), which is
	   exactly normal-phone width — force center back so the price/cart
	   pill stays level with the logo and menu toggle instead of dropping
	   to the bottom of the row. */
	align-items: center !important;
	gap: var(--ags-space-sm);
}

/* account/help icons: force them to the exact same optical size as the
   Font Awesome SVGs elsewhere in the header, regardless of which icon font
   rendered them, and give each a proper circular hit target like a real
   icon button instead of a bare, oddly-sized glyph */
.elementor-354 .elementor-element-379f2bd .elementor-icon-list-items {
	display: flex;
	align-items: center;
	gap: 6px;
}

.elementor-354 .elementor-element-379f2bd .elementor-icon-list-item a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ags-bg-soft);
	transition: background-color var(--ags-transition), transform var(--ags-transition);
}

.elementor-354 .elementor-element-379f2bd .elementor-icon-list-item a:hover {
	background: var(--ags-primary);
	transform: translateY(-2px);
}

.elementor-354 .elementor-element-379f2bd .elementor-icon-list-icon {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* the "metriz-user" / "wppb-font-question" icon-font classes referenced by
   this widget have no matching @font-face anywhere on the site — confirmed
   by fetching the live page: nothing enqueues those fonts, so the <i> tags
   render completely empty (the visible symptom: two blank circles). Draw
   real icons with inline SVG instead of depending on a font that was never
   loaded. */
.elementor-354 .elementor-element-379f2bd .elementor-icon-list-icon i {
	display: inline-block;
	width: 16px;
	height: 16px;
	font-size: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: filter var(--ags-transition);
}

.elementor-354 .elementor-element-379f2bd .metriz-user {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23097F23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.elementor-354 .elementor-element-379f2bd .wppb-font-question {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23097F23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 0 1 5 0c0 1.7-2.5 2-2.5 3.5'/%3E%3Ccircle cx='12' cy='17' r='.4' fill='%23097F23' stroke='none'/%3E%3C/svg%3E");
}

.elementor-354 .elementor-element-379f2bd .elementor-icon-list-item a:hover .metriz-user {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.elementor-354 .elementor-element-379f2bd .elementor-icon-list-item a:hover .wppb-font-question {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 0 1 5 0c0 1.7-2.5 2-2.5 3.5'/%3E%3Ccircle cx='12' cy='17' r='.4' fill='%23FFFFFF' stroke='none'/%3E%3C/svg%3E");
}

/* the empty <span class="elementor-icon-list-text"></span> next to these two
   icons has no content but still exists in the DOM — make sure it can never
   introduce stray spacing */
.elementor-354 .elementor-element-379f2bd .elementor-icon-list-text:empty {
	display: none;
}

/* cart toggle button: align to the same button system as the rest of the
   site instead of Elementor's own default pill sizing */
.elementor-354 .elementor-menu-cart__toggle_button {
	display: inline-flex !important;
	align-items: center;
	gap: 0.5em;
	border-radius: var(--ags-radius-pill) !important;
}

/* with the nav-menu--main display fix above, only logo + burger-toggle +
   cart/account remain on the main row on mobile — that's little enough
   content to keep on ONE line, matching desktop, instead of the two-row
   stack it was collapsing into. The stacking wasn't a narrow-phone edge
   case: Elementor's own generated CSS sets --flex-wrap-mobile:wrap on
   this row for every screen <=767px (confirmed on the live post-354.css),
   so it wrapped on every normal phone, not just very small ones. Force
   nowrap and shrink each piece just enough to still fit at ~360px wide. */
@media (max-width: 767px) {
	.elementor-354 .elementor-element-f7526c6 > .e-con-inner {
		flex-wrap: nowrap !important;
		gap: 8px;
	}

	.elementor-354 .elementor-element-39c4f4c {
		flex-wrap: nowrap !important;
		gap: 6px;
	}

	.elementor-354 .elementor-element-ac6a466 img {
		width: 32px !important;
	}

	.elementor-menu-toggle {
		padding: 6px !important;
	}

	.elementor-354 .elementor-menu-cart__toggle_button {
		padding: 0.5em 0.8em !important;
		font-size: 12.5px !important;
	}

	.elementor-354 .elementor-element-379f2bd .elementor-icon-list-items {
		gap: 4px;
	}

	.elementor-354 .elementor-element-379f2bd .elementor-icon-list-item a {
		width: 28px;
		height: 28px;
	}

	.elementor-354 .elementor-element-379f2bd .elementor-icon-list-icon,
	.elementor-354 .elementor-element-379f2bd .elementor-icon-list-icon i {
		width: 14px;
		height: 14px;
	}
}

.elementor-nav-menu a {
	position: relative;
	font-family: var(--ags-font-heading);
	font-weight: 500;
	transition: color var(--ags-transition);
}

.elementor-nav-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 2px;
	background: var(--ags-accent);
	transition: width var(--ags-transition);
}

.elementor-nav-menu a:hover::after,
.elementor-nav-menu .elementor-item-active::after {
	width: 100%;
}

/* the header template had a fat-fingered 100px gap between mobile nav items
   and a 38px gap above the dropdown itself (visible in the generated
   post-354.css) — collapsing the mobile menu into an unusably tall,
   disconnected-looking list. Restore sane spacing. */
@media (max-width: 1024px) {
	.elementor-354 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child) {
		margin-bottom: 0 !important;
	}

	.elementor-354 .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown,
	.elementor-354 .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		margin-top: 8px !important;
	}

	.elementor-354 [class*="elementor-element-"] {
		--e-nav-menu-horizontal-menu-item-margin: 0.5rem;
	}
}

/* dropdown submenu — force a solid, elevated, correctly-stacked panel;
   Elementor's own generated CSS leaves background/z-index/overflow to the
   kit defaults, which is where "broken submenu" symptoms usually come from */
.elementor-nav-menu--dropdown {
	background: var(--ags-white) !important;
	border-radius: var(--ags-radius-md);
	box-shadow: var(--ags-shadow-lg);
	border: 1px solid rgba(0, 0, 0, 0.06);
	z-index: 9999 !important;
	min-width: 220px;
	/* Elementor toggles this open/closed via an inline max-height set by JS
	   and relies on overflow-y:auto to reveal items beyond that height —
	   overflow:hidden here (a previous version of this rule) clipped every
	   item after the first. Only touch overflow, never max-height/display,
	   so the open/close toggle itself keeps working. */
	overflow-y: auto !important;
	overflow-x: hidden;
}

.elementor-nav-menu--dropdown .elementor-item {
	color: var(--ags-text) !important;
	white-space: nowrap;
	transition: background-color var(--ags-transition), color var(--ags-transition);
}

.elementor-nav-menu--dropdown .elementor-item:hover {
	background: var(--ags-bg-soft);
	color: var(--ags-primary) !important;
}

/* mobile menu drawer — frosted glass panel above everything else */
.elementor-nav-menu--dropdown.elementor-nav-menu__container,
.e--pointer-none ~ .elementor-nav-menu--layout-dropdown .elementor-nav-menu__container {
	background: rgba(255, 255, 255, 0.9) !important;
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
}

@media (max-width: 1024px) {
	.elementor-354 .elementor-nav-menu--main {
		background: rgba(255, 255, 255, 0.92) !important;
		-webkit-backdrop-filter: blur(20px) saturate(160%);
		backdrop-filter: blur(20px) saturate(160%);
		box-shadow: var(--ags-shadow-lg);
		border-radius: var(--ags-radius-md);
	}

	.elementor-nav-menu--main .elementor-nav-menu > li > a {
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}
}

/* mini-cart dropdown panel — same glass treatment as the nav submenu */
.elementor-menu-cart__container {
	background: rgba(255, 255, 255, 0.92) !important;
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	box-shadow: var(--ags-shadow-lg) !important;
	border-radius: var(--ags-radius-md) !important;
}

/* =========================================================================
   Floating WhatsApp / chatbot buttons — were oversized (50px and 80px,
   the latter literally labelled "VERSÃO GRANDE" in its own source) with no
   relation to the rest of the UI. Bring both to one consistent scale and
   give them a modern frosted-glass surface instead of flat green discs.
   !important is required: both widgets set size via inline styles / their
   own late-loading <style> blocks, which otherwise outrank this stylesheet.
   ========================================================================= */

.ht-ctc-chat {
	transform: scale(0.72);
	transform-origin: bottom right;
}

.ht-ctc-chat .ht_ctc_style.ht_ctc_chat_style {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: 50%;
	box-shadow: var(--ags-shadow-lg);
}

#chatbot-toggle {
	width: 56px !important;
	height: 56px !important;
	font-size: 24px !important;
	background: rgba(37, 211, 102, 0.75) !important;
	-webkit-backdrop-filter: blur(10px) saturate(180%);
	backdrop-filter: blur(10px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	box-shadow: var(--ags-shadow-lg) !important;
}

#chatbot-window {
	background: rgba(229, 221, 213, 0.85) !important;
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
}

@media (max-width: 768px) {
	.ht-ctc-chat {
		transform: scale(0.6);
	}

	#chatbot-toggle {
		width: 48px !important;
		height: 48px !important;
		font-size: 20px !important;
	}

	#agrosuste-chatbot {
		bottom: 12px !important;
		left: 12px !important;
	}

	.ht-ctc-chat {
		bottom: 12px !important;
		right: 12px !important;
	}
}

/* =========================================================================
   Shop archive — responsive product grid
   ========================================================================= */

.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: var(--ags-space-md) !important;
	margin: 0 0 var(--ags-space-lg) !important;
}

.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.woocommerce ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product > a:not(.woocommerce-LoopProduct-link) {
	padding-left: var(--ags-space-sm);
	padding-right: var(--ags-space-sm);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin-top: var(--ags-space-sm);
}

.woocommerce ul.products li.product .price {
	margin-bottom: var(--ags-space-sm);
}

.woocommerce ul.products li.product .button {
	margin: 0 var(--ags-space-sm) var(--ags-space-sm);
}

.woocommerce-result-count,
.woocommerce-ordering {
	font-family: var(--ags-font-body);
	color: var(--ags-text);
}

/* =========================================================================
   Single product page
   ========================================================================= */

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--ags-space-lg);
	align-items: start;
}

.woocommerce div.product div.images {
	position: sticky;
	top: var(--ags-space-md);
}

.woocommerce div.product div.images img {
	border-radius: var(--ags-radius-lg);
	box-shadow: var(--ags-shadow-md);
}

.woocommerce div.product .summary.entry-summary {
	display: flex;
	flex-direction: column;
	gap: var(--ags-space-xs);
}

.woocommerce div.product .summary.entry-summary .product_title {
	font-size: var(--ags-fs-2xl);
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ags-space-sm);
	margin: var(--ags-space-sm) 0;
}

.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: var(--ags-space-lg);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--ags-border);
	display: flex;
	gap: var(--ags-space-md);
	list-style: none;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--ags-font-heading);
	font-weight: 600;
	color: var(--ags-text);
	padding: var(--ags-space-xs) 0;
	display: inline-block;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ags-primary);
	border-bottom: 2px solid var(--ags-accent);
}

.related.products,
.upsells.products {
	margin-top: var(--ags-space-xl);
}

.related.products > h2,
.upsells.products > h2 {
	font-size: var(--ags-fs-2xl);
	margin-bottom: var(--ags-space-md);
}

/* =========================================================================
   Cart & Checkout
   ========================================================================= */

.woocommerce-cart-form,
.woocommerce-checkout-review-order,
.woocommerce-checkout #order_review {
	background: var(--ags-white);
	border-radius: var(--ags-radius-lg);
	box-shadow: var(--ags-shadow-sm);
	padding: var(--ags-space-md);
}

.woocommerce table.shop_table {
	border: none;
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce table.shop_table th {
	font-family: var(--ags-font-heading);
	color: var(--ags-primary);
	border-bottom: 2px solid var(--ags-bg-soft);
}

.woocommerce table.shop_table td {
	border-top: 1px solid var(--ags-bg-soft);
}

.woocommerce-cart .cart-collaterals .cart_totals {
	background: var(--ags-bg-soft);
	border-radius: var(--ags-radius-lg);
	padding: var(--ags-space-md);
}

.woocommerce-cart .cart-collaterals .cart_totals .order-total .amount {
	color: var(--ags-primary);
	font-family: var(--ags-font-heading);
	font-weight: 700;
	font-size: var(--ags-fs-lg);
}

.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: var(--ags-space-lg);
	align-items: start;
}

.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
	position: sticky;
	top: var(--ags-space-md);
}

.woocommerce form .form-row label {
	font-family: var(--ags-font-body);
	font-weight: 500;
	font-size: var(--ags-fs-sm);
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	font-size: var(--ags-fs-lg);
	margin-bottom: var(--ags-space-sm);
}

.woocommerce-checkout #payment {
	background: var(--ags-bg-soft);
	border-radius: var(--ags-radius-md);
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: var(--ags-space-xs) var(--ags-space-sm);
}

.woocommerce-checkout #payment div.payment_box {
	border-radius: var(--ags-radius-sm);
	background: var(--ags-white);
}

/* =========================================================================
   Notices — success / error / info banners
   ========================================================================= */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
p.cart-empty.woocommerce-info {
	border-radius: var(--ags-radius-md);
	border: none;
	box-shadow: var(--ags-shadow-sm);
	font-family: var(--ags-font-body);
}

.woocommerce-message { border-left: 4px solid var(--ags-success); }
.woocommerce-error { border-left: 4px solid var(--ags-error); }
.woocommerce-info { border-left: 4px solid var(--ags-secondary); }

.woocommerce-message::before { color: var(--ags-success); }
.woocommerce-error::before { color: var(--ags-error); }
.woocommerce-info::before { color: var(--ags-secondary); }

/* =========================================================================
   My Account
   ========================================================================= */

.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--ags-bg-soft);
	border-radius: var(--ags-radius-lg);
	padding: var(--ags-space-sm) 0;
	margin-right: var(--ags-space-md);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--ags-space-xs) var(--ags-space-md);
	font-family: var(--ags-font-heading);
	font-weight: 500;
	color: var(--ags-text);
	transition: background-color var(--ags-transition), color var(--ags-transition);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: rgba(71, 156, 77, 0.08);
	color: var(--ags-primary);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--ags-primary);
	color: var(--ags-white);
	border-radius: var(--ags-radius-sm);
}

.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--ags-white);
	border-radius: var(--ags-radius-lg);
	box-shadow: var(--ags-shadow-sm);
	padding: var(--ags-space-md);
}

.woocommerce-form-login,
.woocommerce-form-register {
	background: var(--ags-white);
	border-radius: var(--ags-radius-lg);
	box-shadow: var(--ags-shadow-sm);
	padding: var(--ags-space-md);
}

.u-columns.col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ags-space-lg);
}

/* =========================================================================
   Section rhythm
   ========================================================================= */

.elementor-section,
.e-con.e-parent {
	scroll-margin-top: 2rem;
}

/* =========================================================================
   Motion & accessibility
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   Responsive tweaks — aligned to the kit's own breakpoints (768 / 1025)
   ========================================================================= */

@media (max-width: 1024px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	.woocommerce div.product {
		grid-template-columns: 1fr;
	}

	.woocommerce div.product div.images {
		position: static;
	}

	.woocommerce-checkout .col2-set {
		grid-template-columns: 1fr;
	}

	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		position: static;
	}
}

@media (max-width: 768px) {
	.elementor-button,
	.woocommerce a.button,
	.woocommerce button.button {
		width: 100%;
		text-align: center;
	}

	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--ags-space-sm) !important;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: 100%;
		margin-right: 0;
		margin-bottom: var(--ags-space-sm);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		white-space: nowrap;
	}

	.u-columns.col2-set {
		grid-template-columns: 1fr;
	}

	.woocommerce table.shop_table_responsive tr td::before {
		font-family: var(--ags-font-heading);
		font-weight: 600;
		color: var(--ags-primary);
	}
}

@media (max-width: 480px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr !important;
	}
}

.e-loop-item:not(.swiper-slide) { display: block !important; }
.e-loop-item .elementor-element-74530bf,
.e-loop-item .e-con-inner {
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
}

/* Elementor's own Loop Carousel widget (Swiper-based) fails to initialize
   here — its instance never sizes/positions the slides, so the section
   renders blank. Rather than depend on that JS at all, this is rebuilt as
   a self-contained horizontal-scroll carousel: native CSS scroll-snap does
   the sliding (works even with zero JS), and a small script in functions.php
   (agrosuste_carousel_arrows) wires the existing prev/next buttons to it.
   Guaranteed to work regardless of what Elementor's own script does. */
.elementor-widget-loop-carousel .swiper,
.elementor-widget-loop-carousel .elementor-loop-container,
.elementor-widget-loop-carousel .elementor-widget-container,
.elementor-widget-loop-carousel {
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
}

.elementor-widget-loop-carousel .swiper-wrapper {
	display: flex !important;
	flex-wrap: nowrap !important;
	position: static !important;
	transform: none !important;
	height: auto !important;
	gap: var(--ags-space-md) !important;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scroll-padding-left: 4px;
	padding: 4px 4px 1rem;
	-webkit-overflow-scrolling: touch;
}

.elementor-widget-loop-carousel .swiper-wrapper::-webkit-scrollbar {
	height: 8px;
}
.elementor-widget-loop-carousel .swiper-wrapper::-webkit-scrollbar-track {
	background: var(--ags-bg-soft);
	border-radius: var(--ags-radius-pill);
}
.elementor-widget-loop-carousel .swiper-wrapper::-webkit-scrollbar-thumb {
	background: var(--ags-secondary);
	border-radius: var(--ags-radius-pill);
}

.elementor-widget-loop-carousel .swiper-slide {
	position: static !important;
	transform: none !important;
	opacity: 1 !important;
	scroll-snap-align: start;
	flex: 0 0 auto !important;
	width: clamp(210px, 22vw, 270px) !important;
	max-width: none !important;
	height: auto !important;
	display: block !important;
}

.elementor-widget-loop-carousel .elementor-cta {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--ags-radius-md);
	overflow: hidden;
	box-shadow: var(--ags-shadow-sm);
	background: var(--ags-white);
	transition: transform var(--ags-transition), box-shadow var(--ags-transition);
}
.elementor-widget-loop-carousel .elementor-cta:hover {
	transform: translateY(-4px);
	box-shadow: var(--ags-shadow-md);
}
.elementor-widget-loop-carousel .elementor-cta__bg-wrapper {
	position: relative !important;
	min-height: 160px !important;
	flex: 0 0 auto;
}
.elementor-widget-loop-carousel .elementor-cta__bg {
	background-size: cover !important;
	background-position: center !important;
	min-height: 160px;
}
.elementor-widget-loop-carousel .elementor-cta__bg-overlay {
	display: none !important;
}
.elementor-widget-loop-carousel .elementor-cta__content {
	position: relative;
	z-index: 2;
	padding: var(--ags-space-sm);
	text-align: center;
}
.elementor-widget-loop-carousel .elementor-cta__title {
	color: var(--ags-primary) !important;
	-webkit-text-fill-color: var(--ags-primary) !important;
	-webkit-text-stroke: 0 !important;
	font-size: var(--ags-fs-lg) !important;
}
.elementor-widget-loop-carousel .elementor-cta__button {
	display: inline-block;
	margin-top: var(--ags-space-xs);
	background: var(--ags-primary) !important;
	color: var(--ags-white) !important;
	border-radius: var(--ags-radius-pill);
	padding: 0.6em 1.4em;
	font-size: var(--ags-fs-sm);
}

/* prev/next arrow buttons — re-styled to match the site's button system,
   wired up by agrosuste_carousel_arrows() in functions.php */
.elementor-widget-loop-carousel .swiper-button-prev,
.elementor-widget-loop-carousel .swiper-button-next {
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ags-white) !important;
	box-shadow: var(--ags-shadow-md);
	color: var(--ags-primary) !important;
	cursor: pointer;
	z-index: 5;
	transition: background-color var(--ags-transition), transform var(--ags-transition);
}
.elementor-widget-loop-carousel .swiper-button-prev:hover,
.elementor-widget-loop-carousel .swiper-button-next:hover {
	background: var(--ags-primary) !important;
	color: var(--ags-white) !important;
}
.elementor-widget-loop-carousel .swiper-button-prev { left: -14px; }
.elementor-widget-loop-carousel .swiper-button-next { right: -14px; }
.elementor-widget-loop-carousel .swiper-button-prev:after,
.elementor-widget-loop-carousel .swiper-button-next:after {
	font-family: sans-serif;
	font-size: 18px;
	font-weight: 700;
}
.elementor-widget-loop-carousel .swiper-button-prev:after { content: "\2039"; }
.elementor-widget-loop-carousel .swiper-button-next:after { content: "\203A"; }
.elementor-widget-loop-carousel .swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}
.elementor-widget-loop-carousel .swiper-pagination {
	display: none !important;
}
.elementor-widget-loop-carousel {
	position: relative;
	padding: 0 40px;
}

@media (max-width: 600px) {
	.elementor-widget-loop-carousel {
		padding: 0 8px;
	}
	.elementor-widget-loop-carousel .swiper-button-prev,
	.elementor-widget-loop-carousel .swiper-button-next {
		display: none !important;
	}
}

/* Shop category archive pages: the category banner (image+title) and the
   product grid were rendering side by side as flex row siblings. Stack them
   — banner full-width on top, products full-width below — which also gives
   the product grid far more room to breathe at any viewport size. */
.elementor-location-archive {
	display: flex !important;
	flex-direction: column !important;
}