/**
 * HerbaShape.ch — homepage & chrome visual fixes (loaded last).
 */

/* ==========================================================================
   1. HERO "badge" (#385ae35) — the demo red ellipse was oversized & off-centre.
   Turn it into a clean, small green pill sitting neatly over the product.
   ========================================================================== */
.elementor-element-385ae35 .elementor-heading-title {
	background: var(--hs-green-mid, #4EA338) !important;
	background-image: none !important;
	color: #fff !important;
	font-size: clamp(1rem, 1.4vw, 1.35rem) !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	display: inline-block !important;
	width: auto !important;
	max-width: 90% !important;
	padding: .5em 1.1em !important;
	border-radius: 999px !important;
	box-shadow: 0 6px 18px rgba(0,0,0,.14) !important;
	white-space: normal !important;
}
.elementor-element-385ae35 {
	text-align: center !important;
}

/* ==========================================================================
   2. TOP CONTACT STRIP (#38d6c23) — light-green bar, tidy centred rows.
   ========================================================================== */
.elementor-element-38d6c23 {
	background-color: #eaf5e6 !important;
	padding: 10px 0 !important;
	border-bottom: 1px solid #d7ebd0 !important;
}
.elementor-element-38d6c23 .elementor-icon-list-items {
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap;
}
.elementor-element-38d6c23 .elementor-icon-list-item {
	display: flex !important;
	align-items: center !important;   /* vertical-centre the icon with its text */
}
.elementor-element-38d6c23 .elementor-icon-list-item > a,
.elementor-element-38d6c23 .elementor-icon-list-item > span {
	display: flex !important;
	align-items: center !important;
}
.elementor-element-38d6c23 .elementor-icon-list-icon {
	display: inline-flex !important;
	align-items: center !important;
	color: #2E6B27 !important;
}
.elementor-element-38d6c23 .elementor-icon-list-icon svg,
.elementor-element-38d6c23 .elementor-icon-list-icon i { color: #2E6B27 !important; fill: #2E6B27 !important; }
.elementor-element-38d6c23 .elementor-icon-list-text { color: #23421d !important; font-weight: 500; }

/* ==========================================================================
   3. FOOTER — the support email heading (#54b8fbf) rendered huge & wrapped.
   ========================================================================== */
.elementor-element-54b8fbf .elementor-heading-title,
.elementor-element-54b8fbf {
	font-size: 1.05rem !important;
	line-height: 1.4 !important;
	font-weight: 600 !important;
	word-break: break-word;
}
.elementor-element-54b8fbf .elementor-heading-title a { color: inherit !important; }

/* ==========================================================================
   4. "Explore our protein range" band — stop the left photo tiling.
   ========================================================================== */
.elementor-element-0b29ab1 {
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
}

/* ==========================================================================
   5. Header logo — show it is clickable (links to home).
   ========================================================================== */
#masthead .site-logo a,
#masthead a.hs-logo-link { display: inline-block; }

/* ==========================================================================
   6. Floating WhatsApp button.
   ========================================================================== */
.hs-wa-float {
	position: fixed; right: 18px; bottom: 18px; z-index: 99998;
	width: 56px; height: 56px; border-radius: 50%;
	background: #25D366; color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
	transition: transform .18s ease, box-shadow .18s ease;
}
.hs-wa-float:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 26px rgba(0,0,0,.3); color:#fff; }
.hs-wa-float svg { width: 30px; height: 30px; fill: #fff; }
@media (max-width: 600px){ .hs-wa-float{ right: 14px; bottom: 14px; width: 52px; height: 52px; } }

/* ==========================================================================
   7. Contact form.
   ========================================================================== */
.hs-contact-form { max-width: 640px; margin: 8px 0 0; }
.hs-contact-form .hs-field { margin-bottom: 16px; }
.hs-contact-form label { display:block; font-weight:600; margin-bottom:6px; color:#23421d; }
.hs-contact-form input, .hs-contact-form textarea {
	width:100%; padding:12px 14px; border:1px solid #cfe0c8; border-radius:8px;
	font: inherit; background:#fff; color:#1a1a1a;
}
.hs-contact-form input:focus, .hs-contact-form textarea:focus { outline:2px solid #4EA338; border-color:#4EA338; }
.hs-contact-form textarea { min-height:150px; resize:vertical; }
.hs-contact-form .hs-hp { position:absolute; left:-9999px; }
.hs-contact-form button {
	background: var(--hs-green-mid, #4EA338); color:#fff; border:0; border-radius:8px;
	padding:13px 26px; font-weight:600; font-size:1rem; cursor:pointer;
}
.hs-contact-form button:hover { background:#3C8330; }
.hs-form-note { padding:12px 16px; border-radius:8px; margin-bottom:18px; }
.hs-form-note--ok { background:#eaf6e6; border-left:4px solid #4EA338; }
.hs-form-note--err { background:#fdecec; border-left:4px solid #d64545; }

/* ==========================================================================
   8. CONTRAST PASS (WCAG AA).
   (a) White text on green buttons/panels: use the AA-safe #3C8330 (≈4.7:1)
       instead of #4A9D3F (3.4:1) or #4EA338 (3.2:1).
   (b) Lime hover text on the green nav sat at 2.2:1 — lighten it (keeps the
       green-yellow accent the brand wants, now ~AA-large legible).
   ========================================================================== */
:root { --hs-lime-bright: #E9F7D4; }

/* (a) add-to-cart circles, newsletter + contact buttons, ask-experts panel, hero badge */
.hs-newsletter button,
.hs-contact-form button,
.woocommerce ul.products li.product .button,
.woocommerce a.button.add_to_cart_button,
.elementor-element-385ae35 .elementor-heading-title,
.hs-btn--primary, a.hs-btn--primary {
	background-color: #3C8330 !important;
}
.woocommerce .button:hover, .hs-btn--primary:hover, .hs-newsletter button:hover, .hs-contact-form button:hover {
	background-color: #2E6B27 !important;
}

/* (b) nav hover / current — brighter lime text so it is actually readable on green */
.vertical-navigation .vertical-menu .menu > li:hover > a,
.vertical-navigation .vertical-menu .menu > li:hover > a .menu-title,
.vertical-navigation .vertical-menu .menu .sub-menu > li:hover > a,
.vertical-navigation .vertical-menu .menu .sub-menu > li:hover > a .menu-title,
.vertical-navigation ul.menu > li.current-menu-item > a,
.vertical-navigation ul.menu .sub-menu > li.current-menu-item > a,
.main-navigation ul.menu li.menu-item > a:hover,
.main-navigation ul.menu li.menu-item.current-menu-item > a {
	color: var(--hs-lime-bright) !important;
}

/* ==========================================================================
   9. TRUST STRIP (rendered right under the hero via [hs_trust_strip]).
   ========================================================================== */
.hs-trust {
	background: #f4f8f1; border-top: 1px solid #e0eeda; border-bottom: 1px solid #e0eeda;
}
.hs-trust__inner {
	max-width: 1200px; margin: 0 auto; padding: 14px 20px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 10px 34px;
}
.hs-trust__item {
	display: flex; align-items: center; gap: 9px;
	font-weight: 600; font-size: .95rem; color: #23421d;
}
.hs-trust__item svg { width: 20px; height: 20px; fill: none; stroke: #3C8330; stroke-width: 2; flex: 0 0 auto; }
@media (max-width: 720px){
	.hs-trust__inner { gap: 8px 20px; }
	.hs-trust__item { font-size: .82rem; }
}