/*
Theme Name: Hello Elementor Child — ION 2026
Theme URI: https://alpha.keemarketing.solutions
Description: Child theme for the ION (Innovative Organic Nursery) 2026 redesign. Carries the brand design tokens (colors + Fraunces/Inter fonts) and custom CSS/JS.
Author: KEE Marketing
Template: hello-elementor
Version: 0.2.0
Text Domain: hello-elementor-child
*/

/* ==========================================================================
   ION 2026 design tokens — sampled from wiki/ion-homepage-full.png
   Mirror of the Elementor global Kit so custom CSS and non-Elementor areas
   stay in sync. See wiki/tasks/0003-homepage-redesign.md.

   NOTE (2026-07-10): everything expressible as Elementor styling now lives in
   Elementor itself — atomic local styles (incl. tablet/mobile variants and
   :hover states) on atomic elements, native settings on classic widgets. This
   file keeps ONLY what Elementor cannot express: pseudo-elements/classes on
   plugin markup, descendant selectors into WooCommerce/Swiper/Form internals,
   the classic header widgets, full-bleed tricks, clip-paths and gradients.
   ========================================================================== */
:root {
	--ion-green:        #123320; /* forest green — header/footer, headings, nav */
	--ion-green-2:      #1b4a2e; /* lighter forest — hovers */
	--ion-cream:        #fbf7ee; /* page background, cards */
	--ion-cream-2:      #fdfbf4; /* header bar, search field */
	--ion-red:          #b23a2f; /* brick red — CTAs, accents, active nav */
	--ion-red-2:        #9a2f26; /* red hover */
	--ion-sage:         #5b6b4e; /* muted text, borders, tagline */
	--ion-text:         #454b3f; /* body copy */
	--ion-gold:         #d9a94b; /* hero gradient warm accent (decorative) */
	--ion-border:       #e2ddce; /* hairline borders on cream */

	--ion-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--ion-font-body:    "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Base — applies site-wide; Elementor widgets that set their own fonts win. */
body {
	background-color: var(--ion-cream);
	color: var(--ion-text);
	font-family: var(--ion-font-body);
}

/* Kill the phantom horizontal scrollbar. The ION Story full-bleed band uses
   width:100vw (which includes the vertical scrollbar width) and off-screen
   carousel slides can poke past the edge; clip horizontal overflow at the root.
   overflow-x:clip has no scroll-container side effects (header is static). */
html, body {
	overflow-x: hidden;
	overflow-x: clip;
	max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ion-font-display);
	color: var(--ion-green);
}

/* ==========================================================================
   Header search bar — mockup: rounded warm-beige field + inset green button
   Applied to the Elementor Search widget via the .ion-search CSS class.
   (Classic widget — plugin internals, stays in CSS.)
   ========================================================================== */
.ion-search .elementor-search-form {
	background: #ebe6d8;
	border: 1px solid #d9d2be;
	border-radius: 12px;
	padding: 5px;
	overflow: hidden;
}
/* Kill the input/container's own (white) background so the beige shows through. */
.ion-search .elementor-search-form__container,
.ion-search .elementor-search-form__input {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
.ion-search .elementor-search-form__input {
	color: var(--ion-green);
	font-family: var(--ion-font-body);
	font-size: 15px;
	padding-left: 14px;
}
.ion-search .elementor-search-form__input::placeholder {
	color: #8a8b76;
	opacity: 1;
}
/* Button radius must hold across all states (Elementor resets it on hover). */
.ion-search .elementor-search-form__submit,
.ion-search .elementor-search-form__submit:hover,
.ion-search .elementor-search-form__submit:focus,
.ion-search .elementor-search-form__submit:active {
	border-radius: 8px !important;
	min-width: 46px;
	margin-left: 5px;
	color: var(--ion-cream-2);
	transition: background 0.15s ease;
}
.ion-search .elementor-search-form__submit {
	background: #345d41;
}
.ion-search .elementor-search-form__submit:hover {
	background: var(--ion-green);
}

/* ==========================================================================
   Logo (ION-Logo-green.png) — .ion-logo HTML widget (inline markup, stays).
   Sized to the header search-bar height (58px) and centered on its axis.
   ========================================================================== */
.ion-logo {
	display: inline-flex;
	align-items: center; /* center within the 58px band */
	height: 58px; /* match .ion-search .elementor-search-form height */
	text-decoration: none;
	line-height: 1;
}
.ion-logo__img {
	height: 58px;
	width: auto;
	display: block;
}

/* ==========================================================================
   Primary nav (Elementor nested-menu, .ion-nav) — classic widget internals.
   ========================================================================== */
.ion-nav .e-n-menu-title-text {
	font-family: var(--ion-font-body) !important;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ion-green) !important;
	transition: color 0.15s ease;
}
.ion-nav .e-n-menu-title-container:hover .e-n-menu-title-text {
	color: var(--ion-red) !important;
}
/* Highlight the Spring 2026 Preorder item in brick red (matched by its link). */
.ion-nav a.e-n-menu-title-container[href*="preorder"] .e-n-menu-title-text {
	color: var(--ion-red) !important;
}

/* ==========================================================================
   Hero — everything is native now except the two-tone accent span (descendant
   markup inside the e-heading html-v3 content).
   ========================================================================== */
.ion-hero__title .ion-hero__accent {
	color: var(--ion-red);
	font-style: italic;
}

/* Buttons — pill shape, colors, fit-content width and :hover are all native
   local styles per button. Only non-expressible guards remain. */
.ion-btn {
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Trust bar — native except the underlined span (descendant markup). */
.ion-trustbar__text .ion-underline {
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 700;
}

/* ==========================================================================
   Product card (Loop Item template "ION Product Card", .ion-card)
   Card box/body/pills/typography are native. What remains: featured-image
   internals, the PREORDER badge pseudo, link resets, the bottom-pinned
   add-to-cart (WooCommerce plugin markup) and Swiper pagination.
   ========================================================================== */
.ion-preorder__grid .swiper-slide {
	height: auto;
	padding: 0 12px;
	box-sizing: border-box;
}
/* media + PREORDER badge */
.ion-card__img {
	position: relative;
	display: block;
}
.ion-card__img img {
	display: block;
	width: 100%;
	height: 168px;
	object-fit: cover;
}
.ion-preorder__grid .ion-card__img::before {
	content: "PREORDER";
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--ion-red);
	color: var(--ion-cream);
	font-family: var(--ion-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 5px 10px;
	border-radius: 6px;
	z-index: 1;
}
.ion-card__title a {
	color: inherit !important;
	text-decoration: none !important;
}
/* Select Options button (WooCommerce loop add-to-cart markup) */
.ion-card__btn {
	margin-top: auto !important;
	padding-top: 6px;
}
.ion-card__btn a,
.ion-card__btn a.button {
	display: block !important;
	width: 100% !important;
	text-align: center;
	background: var(--ion-green) !important;
	color: var(--ion-cream) !important;
	font-family: var(--ion-font-body) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	letter-spacing: 0.01em !important;
	padding: 13px 18px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	transition: background 0.15s ease;
}
.ion-card__btn a:hover,
.ion-card__btn a.button:hover {
	background: var(--ion-green-2) !important;
}
/* carousel pagination — green dots below the slider */
.ion-preorder__grid .swiper-pagination,
.ion-preorder__grid .swiper-pagination-bullets {
	position: static !important;
	left: 0 !important;
	transform: none !important;
	width: 100% !important;
	margin-top: 26px;
	display: flex !important;
	justify-content: center !important;
	gap: 9px;
}
.ion-preorder__grid .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	margin: 0 !important;
	background: var(--ion-green) !important;
	opacity: 0.28;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.ion-preorder__grid .swiper-pagination-bullet-active {
	opacity: 1;
	transform: scale(1.15);
}

/* utility */
.ion-hide { display: none !important; }

/* ==========================================================================
   Guarantee + testimonials — band bg/padding are native (classic container
   settings); the jagged clip-path is not expressible there. Testimonial
   CARDS are plugin markup: the native background control only paints
   __content, so the card shell + footer layout stay here.
   ========================================================================== */
.elementor-element-b517b0b {
	clip-path: polygon(0 22px, 5% 0, 10% 22px, 15% 0, 20% 22px, 25% 0, 30% 22px, 35% 0, 40% 22px, 45% 0, 50% 22px, 55% 0, 60% 22px, 65% 0, 70% 22px, 75% 0, 80% 22px, 85% 0, 90% 22px, 95% 0, 100% 22px, 100% 100%, 0 100%);
}
/* testimonials wrapper is a classic container (renders no custom classes) */
.elementor-element-0051d17 {
	max-width: 1280px !important;
	margin: 0 auto !important;
	padding: 8px 20px 0 !important;
}
/* testimonial cards — shell + layout (typography/colors are native settings) */
.elementor-element-0051d17 .elementor-testimonial {
	background: var(--ion-cream) !important;
	border-radius: 14px;
	padding: 26px 26px 22px !important;
	text-align: left;
	height: 100%;
	box-sizing: border-box;
	display: flex !important;
	flex-direction: column;   /* so the footer can pin to the bottom, aligned across cards */
}
.elementor-element-0051d17 .elementor-testimonial__content {
	position: relative;
	background: transparent !important;
	padding: 0 !important;
}
.elementor-element-0051d17 .elementor-testimonial__content::before {
	content: "★★★★★";
	display: block;
	color: var(--ion-gold);
	font-size: 14px;
	letter-spacing: 2px;
	margin-bottom: 12px;
}
.elementor-element-0051d17 .elementor-testimonial__content::after {
	display: none;   /* kill the default speech-bubble arrow */
}
.elementor-element-0051d17 .elementor-testimonial__footer {
	display: flex !important;
	align-items: center;         /* avatar vertically centered against name+title */
	justify-content: flex-start !important; /* flush to the card's left edge */
	gap: 14px;
	margin: auto 0 0 0 !important; /* pin footer to the card bottom; no left indent */
	padding: 30px 0 0 0 !important; /* extra breathing room above the footer */
	text-align: left;
}
.elementor-element-0051d17 .elementor-testimonial__image {
	margin: 0 !important;     /* kill the widget's image_gap; flex gap handles spacing */
	flex: 0 0 auto;
}
.elementor-element-0051d17 .elementor-testimonial__image img {
	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;
	object-fit: cover;
	display: block;
}
.elementor-element-0051d17 .elementor-testimonial__cite {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-style: normal;       /* <cite> italicises by default */
}
/* Nav arrows pushed out of the card row into the forest gutter. Safe because
   there are exactly 3 slides at 3-per-view (Swiper doesn't loop/clone), so the
   swiper has no off-screen slides to leak when un-clipped. */
.elementor-element-0051d17 .elementor-main-swiper {
	overflow: visible !important;
}
.elementor-element-0051d17 .elementor-swiper-button {
	color: var(--ion-cream) !important;
}
.elementor-element-0051d17 .elementor-swiper-button-prev {
	left: -54px !important;
}
.elementor-element-0051d17 .elementor-swiper-button-next {
	right: -54px !important;
}

/* ==========================================================================
   For Commercial Growers — section layout/columns are native; only the
   classic image-widget internals (object-fit stretch trick + caption) stay.
   ========================================================================== */
.ion-comm__img,
.ion-comm__img img {
	width: 100% !important;
	margin: 0 !important;
}
.ion-comm__img img {
	height: 100% !important;
	min-height: 360px;
	object-fit: cover !important;
	border-radius: 14px !important;
	display: block;
}

/* ==========================================================================
   Growing help (.ion-grow) — inner centering/paddings/cards are native;
   the soil gradient + jagged clip-path and the classic-widget internals stay.
   ========================================================================== */
.ion-grow {
	background: linear-gradient(180deg, #3d2c1e 0%, #241a12 100%) !important;
	/* jagged (torn-soil) top AND bottom edges */
	clip-path: polygon(
		0 22px, 5% 0, 10% 22px, 15% 0, 20% 22px, 25% 0, 30% 22px, 35% 0, 40% 22px, 45% 0, 50% 22px, 55% 0, 60% 22px, 65% 0, 70% 22px, 75% 0, 80% 22px, 85% 0, 90% 22px, 95% 0, 100% 22px,
		100% calc(100% - 22px), 95% 100%, 90% calc(100% - 22px), 85% 100%, 80% calc(100% - 22px), 75% 100%, 70% calc(100% - 22px), 65% 100%, 60% calc(100% - 22px), 55% 100%, 50% calc(100% - 22px), 45% 100%, 40% calc(100% - 22px), 35% 100%, 30% calc(100% - 22px), 25% 100%, 20% calc(100% - 22px), 15% 100%, 10% calc(100% - 22px), 5% 100%, 0 calc(100% - 22px)
	);
}
/* guide cards sit in classic containers — equalize their widths */
.ion-grow__grid > * {
	flex: 1 1 0 !important;
	min-width: 0;
	display: flex;
}
.ion-guide__img,
.ion-guide__img img {
	width: 100% !important;
	margin: 0 !important;
	display: block;
}
.ion-guide__img img {
	height: 172px;
	object-fit: cover;
}
/* "Learn More →" gold text link (classic button widget internals) */
.ion-guide__link a,
.ion-guide__link .elementor-button {
	background: transparent !important;
	color: var(--ion-gold) !important;
	font-family: var(--ion-font-body) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	padding: 4px 0 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	display: inline-flex;
	align-items: center;
	text-decoration: none !important;
}
.ion-guide__link .elementor-button-icon,
.ion-guide__link .elementor-button-content-wrapper > .elementor-button-icon {
	display: none !important;   /* hide the button's built-in arrow; use our own */
}
.ion-guide__link a::after,
.ion-guide__link .elementor-button::after {
	content: " →";
	white-space: pre;
}
.ion-guide__link a:hover,
.ion-guide__link .elementor-button:hover {
	color: #e8bd67 !important;
}

/* ==========================================================================
   Best Sellers — wrapper + tab styling + grid gaps are native. Left here:
   the widget's flex sizing in the header row and the tab-list ul reset
   (plugin markup).
   ========================================================================== */
.ion-bs__tabs {
	flex: 0 0 auto !important;
	width: auto !important;
}
.ion-bs__tabs .e-filter,
.ion-bs__tabs ul {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.ion-bs__tabs .e-filter-item {
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

/* ==========================================================================
   Shop by Berry — tiles/labels/typography are native. Stays: classic image
   widget absolute-fill, the scrim + hover-zoom (pseudo/descendants), the
   grid children (classic containers) and baseline alignment (no atomic enum).
   ========================================================================== */
.ion-berry__grid > * {
	flex: 1 1 0 !important;
	min-width: 0;
	display: flex;
}
.ion-berry {
	text-decoration: none !important;
}
.ion-berry__img,
.ion-berry__img img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
}
.ion-berry__img img {
	object-fit: cover !important;
	transition: transform 0.4s ease;
}
.ion-berry:hover .ion-berry__img img {
	transform: scale(1.05);
}
/* dark scrim for legibility */
.ion-berry::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(18, 51, 32, 0.78) 0%, rgba(18, 51, 32, 0.28) 34%, rgba(18, 51, 32, 0) 60%);
	z-index: 1;
}
.ion-berry__label {
	align-items: baseline !important;   /* not an atomic align-items enum */
}
.ion-berry__count {
	white-space: nowrap;
}

/* ==========================================================================
   The ION Story — layout/stats/typography are native. Stays: the full-bleed
   beige band (pseudo) and the classic image-widget internals.
   ========================================================================== */
.ion-story::before {   /* full-bleed warm-beige background */
	content: "";
	position: absolute;
	inset: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	background: #eae1cf;
	z-index: -1;
}
.ion-story__img {
	display: flex !important;
	width: 100% !important;
	margin: 0 !important;
}
.ion-story__img > .elementor-widget-container,
.ion-story__img figure,
.ion-story__img a {
	display: flex !important;
	width: 100% !important;
	margin: 0 !important;
}
.ion-story__img img {
	width: 100% !important;
	height: 100% !important;
	min-height: 340px;
	object-fit: cover !important;
	border-radius: 14px !important;
	display: block;
}

/* ==========================================================================
   Newsletter (.ion-news) — section/text-column layout + form colors are
   native. Stays: the classic image widget (flex-basis + aspect ratio) and
   the Form-widget internals Elementor has no controls for (field padding/
   height, placeholder, vertical centering).
   ========================================================================== */
.ion-news__media {
	flex: 0 0 46% !important;
}
.ion-news__media .elementor-widget-container {
	aspect-ratio: 3 / 2;
}
.ion-news__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
.ion-news__form {
	width: 100%;
	max-width: 640px;
	margin-top: 10px;
}
.ion-news__form .elementor-field-group {
	margin: 0;
}
.ion-news__form input.elementor-field {
	padding: 15px 18px !important;
	height: auto !important;
}
.ion-news__form input.elementor-field::placeholder {
	color: #9a9788;
	opacity: 1;
}
.ion-news__form .elementor-field-group,
.ion-news__form .elementor-form-fields-wrapper {
	align-items: center;
}
.ion-news__form .elementor-button {
	height: 60px;                /* match the input height so they center-align vertically */
	white-space: nowrap;
	transition: background 0.15s ease;
}

/* ==========================================================================
   Footer 2026 (#473) — icon-list colors/spacing + form colors are native.
   Stays: link colors inside text-editors, paragraph rhythm, and Form-widget
   layout internals.
   ========================================================================== */
.elementor-element-foutr a,
.elementor-element-foutr .elementor-icon-list-text {
	color: #d5dccb;   /* link base colour so email / phone / legal links are visible on forest */
	line-height: inherit;
	transition: color 0.15s ease;
}
/* hover effect — links go gold (icon-list text lives in an inner span, so target it too) */
.elementor-element-foutr a:hover,
.elementor-element-foutr a:hover .elementor-icon-list-text,
.elementor-element-foutr .elementor-icon-list-item:hover .elementor-icon-list-text {
	color: var(--ion-gold) !important;
}
/* icon-list links inherited a 50px line-height from the column context */
.elementor-element-foutr .elementor-icon-list-item,
.elementor-element-foutr .elementor-icon-list-item a,
.elementor-element-foutr .elementor-icon-list-text {
	line-height: 1.4 !important;
}
/* Get in Touch (text-editor) — tighten the line spacing */
.elementor-element-foutr .elementor-element-fctb p {
	margin: 0 0 8px !important;
}
.elementor-element-foutr .elementor-element-fctb p:last-child {
	margin-bottom: 0 !important;
}
/* subscribe form (Elementor Form widget) — layout internals */
.elementor-element-foutr .ion-foot__form {
	max-width: 400px;
}
.elementor-element-foutr .ion-foot__form .elementor-form-fields-wrapper {
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
}
.elementor-element-foutr .ion-foot__form .elementor-field-group-email {
	flex: 1 1 auto;
	width: auto;
	max-width: none;
}
.elementor-element-foutr .ion-foot__form .elementor-field-type-submit {
	flex: 0 0 auto;
	width: auto;
}
.elementor-element-foutr .ion-foot__form input.elementor-field {
	width: 100% !important;
	padding: 13px 15px !important;
	height: 48px !important;
}
.elementor-element-foutr .ion-foot__form input.elementor-field::placeholder {
	color: rgba(251, 247, 238, 0.5);
	opacity: 1;
}
.elementor-element-foutr .ion-foot__form .elementor-button {
	height: 48px;
	white-space: nowrap;
	transition: background 0.15s ease;
}

/* ==========================================================================
   Responsive — only for rules that live in this file (classic-widget
   internals and plugin markup). Everything else is native breakpoint
   variants / responsive widget settings in Elementor.
   ========================================================================== */
@media (max-width: 1024px) {
	/* testimonials: below desktop the swiper must clip (2/1 per view means
	   real off-screen slides), and the gutter arrows have no gutter */
	.elementor-element-0051d17 .elementor-main-swiper {
		overflow: hidden !important;
	}
	.elementor-element-0051d17 .elementor-swiper-button {
		display: none !important;
	}
	/* footer: long email address must break, not overflow its column */
	.elementor-element-foutr .elementor-element-fctb a {
		overflow-wrap: anywhere;
	}
}

@media (max-width: 767px) {
	/* header: logo scales down with the compact mobile header */
	.ion-logo,
	.ion-logo__img {
		height: 44px;
	}
	/* story/commercial photos: size by ratio instead of column height */
	.ion-story__img img,
	.ion-comm__img img {
		min-height: 0;
		height: auto !important;
		aspect-ratio: 3 / 2;
	}
	/* best sellers: tabs align left once the header stacks */
	.ion-bs__tabs .e-filter,
	.ion-bs__tabs ul {
		justify-content: flex-start;
	}
	/* newsletter image column: full width once stacked */
	.ion-news__media {
		flex: 0 0 auto !important;
		width: 100%;
	}
}