/* ==========================================================================
   Medanta Organics — Elementor custom widgets skin (Phase 6)
   Loads whenever Elementor is active (small payload, same principle as
   tokens.css). Markup itself comes from the plugin's widget templates
   (custom-store-functionality/templates/elementor/*.php); this is styling
   only, entirely token-driven - no new colours/spacing scale invented.
   ========================================================================== */

/* --- Homepage container alignment + section rhythm --------------------
   Every homepage band is built `boxed` (not `full_width`), so Elementor
   constrains .elementor-container to the kit's content width. Matching that
   width AND the gutter to the theme's own .mo-container is what puts every
   section on the exact same left/right edge as the header and footer -
   previously each section's content started at 10px and ran 1405px wide
   while the header sat at 112px/1200px, which is what made the page read as
   loosely arranged rather than gridded.

   Vertical rhythm (64/48/36px per breakpoint) is set in Elementor's own
   per-section padding settings by the homepage build script rather than a
   CSS class here: Elementor 4.2.4 does not emit a section's _css_classes
   when the section was saved through Document::save(), so a class-based
   rhythm would silently never apply. The build script defines those values
   in one helper, so the page still has a single source of truth. */
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--mo-container);
	padding-inline: var(--mo-gutter);
}

/* Elementor gives every populated column 10px of horizontal padding of its
   own. On top of the container gutter that pushed all Elementor content 10px
   inboard of the header and footer - a small number, but it is the difference
   between the page reading as gridded and reading as almost gridded. Zeroed
   horizontally only; the vertical part is left alone because the section
   rhythm is measured with it in place. */
.elementor-section.elementor-section-boxed > .elementor-container > .elementor-column > .elementor-element-populated {
	padding-left: 0;
	padding-right: 0;
}

/* Section title above a grid/carousel: the spec's 20-28px heading-to-content
   gap, replacing Elementor's own default heading margins. */
.elementor-widget-heading:not(:last-child) {
	margin-bottom: var(--mo-heading-gap);
}

/* --- Native Elementor "Heading" widget --------------------------------
   Used for this plugin's homepage section titles ("Shop by category",
   "Featured products", ...). Elementor generates its own per-page CSS file
   (post-<id>.css) and loads it AFTER this stylesheet, so an equal-specificity
   rule here can't win on source order alone; !important is used narrowly,
   only for the colour, specifically so the site's ink/heading-font tokens
   reliably win over Elementor's own default heading colour regardless of
   load order or how specific a given page's generated CSS turns out to be. */
.elementor-widget-heading .elementor-heading-title {
	color: var(--mo-color-ink) !important;
	font-family: var(--mo-font-heading);
	font-weight: var(--mo-weight-bold);
	line-height: var(--mo-leading-tight);
}

/* --- Product Grid widget -------------------------------------------
   The grid itself (ul.products) reuses the existing shop-loop CSS
   (.woocommerce ul.products, defined in woocommerce.css) because the
   widget's wrapper carries a "woocommerce" class for exactly that reason
   (see Elementor\Widgets\Product_Grid::render()). Only the optional
   column-count override needs its own rule here. */
.mo-product-grid[data-columns="2"] ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 769px) {
	.mo-product-grid[data-columns="3"] ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mo-product-grid[data-columns="4"] ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.mo-widget-notice {
	padding: var(--mo-space-4);
	color: var(--mo-color-muted);
	background: var(--mo-color-canvas-alt);
	border: 1px dashed var(--mo-color-line);
	border-radius: var(--mo-radius);
}

/* --- Product Categories widget ---------------------------------------
   Compact, equal-height cards (square image tile, name + count beneath).
   This row is a navigation aid sitting directly under the hero, so density
   matters more than editorial scale: a shopper should be able to scan every
   category at a glance. Columns step 2 -> 3 -> 4 -> the widget's own
   data-columns setting as space allows. */
.mo-category-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mo-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 560px) {
	.mo-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.mo-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.mo-category-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mo-category-grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mo-category-grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mo-category-grid[data-columns="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.mo-category-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--mo-space-2);
	height: 100%;
	padding: var(--mo-space-2);
	border-radius: var(--mo-radius-lg);
	background: var(--mo-color-surface);
	border: 1px solid var(--mo-color-line);
	color: inherit;
	text-decoration: none;
	transition: box-shadow var(--mo-transition), transform var(--mo-transition), border-color var(--mo-transition);
}
.mo-category-card__link:hover,
.mo-category-card__link:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--mo-shadow);
	border-color: var(--mo-color-primary-050);
}

.mo-category-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--mo-radius);
	overflow: hidden;
	background: var(--mo-color-canvas-alt);
}
.mo-category-card__media img {
	width: 100%;
	height: 100%;
	/* contain, not cover: the supplied flat-lays are ~16:9, much wider than
	   this square tile, and a cover crop was cutting the ingredients arranged
	   toward the left/right edges of the composition. */
	object-fit: contain;
	display: block;
	transition: transform 450ms ease;
}
.mo-category-card__link:hover .mo-category-card__media img,
.mo-category-card__link:focus-visible .mo-category-card__media img {
	transform: scale(1.06);
}

.mo-category-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 var(--mo-space-1) var(--mo-space-1);
	text-align: center;
	margin-top: auto;
}
.mo-category-card__name {
	font-family: var(--mo-font-heading);
	font-weight: var(--mo-weight-bold);
	font-size: var(--mo-text-base);
	line-height: var(--mo-leading-snug);
	color: var(--mo-color-ink);
}
.mo-category-card__link:hover .mo-category-card__name { color: var(--mo-color-primary-600); }
.mo-category-card__count {
	font-size: var(--mo-text-xs);
	color: var(--mo-color-muted);
}

/* --- Hero Slider widget -----------------------------------------------
   Fixed height per breakpoint (not viewport-relative) so the banner has a
   strong presence without ever swallowing the whole screen. Inactive slides
   are hidden with visibility, not just opacity, so their CTA can't be
   reached by keyboard while off-screen. */
.mo-hero {
	position: relative;
	border-radius: var(--mo-radius-lg);
	overflow: hidden;
	background: var(--mo-color-canvas-alt);
}
/* The banners are 1920x1073 and carry their own headline, product shot and
   composition. Holding the track to a fixed 460px made it a 2.6:1 letterbox
   that cropped about a third of every image away, which is why the hero did
   not match the mockup. The track now follows the artwork's own ratio, and
   its section is the one full_width band on the page so it can run wider than
   the 1200px column.

   The viewport cap stops a very wide monitor turning the hero into a
   full-screen billboard; past that point object-fit crops, which is the
   normal trade and only bites above ~2400px. */
.mo-hero {
	max-width: var(--mo-container-wide);
	margin-inline: auto;
}
/* Fixed height per breakpoint, kept predictable so the hero never grows with
   the window until it fills most of the screen. The band's own ratio does not
   match the artwork's 1920x1073, so the image itself uses object-fit: contain
   (see .mo-hero__image) rather than cover - contain never crops, it only
   letterboxes, and the bars show .mo-hero's own canvas-alt background rather
   than bare transparency. Width stays definite so nothing can shrink it
   sideways. */
.mo-hero__track {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	height: 300px;
}
@media (min-width: 768px)  { .mo-hero__track { height: 420px; } }
@media (min-width: 1200px) { .mo-hero__track { height: 620px; } }
@media (min-width: 1600px) { .mo-hero__track { height: 720px; } }

.mo-hero__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 600ms ease, visibility 0s linear 600ms;
}
.mo-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 600ms ease, visibility 0s;
	z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
	.mo-hero__slide { transition: none; }
}

.mo-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* contain, not cover: the banners carry their own baked-in headline and
	   product shot, so cropping any edge to fill the band cuts real content
	   off. Letterboxing (top/bottom at most breakpoints, since the band is
	   proportionally wider than the artwork's 1920x1073) shows .mo-hero's
	   own canvas-alt background instead of empty transparency. */
	object-fit: contain;
}
/* Scrim weighted to the side the copy sits on, so white text stays legible
   over any photo rather than depending on a particular image's tones. */
.mo-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(28, 43, 39, 0.86) 0%, rgba(28, 43, 39, 0.62) 45%, rgba(28, 43, 39, 0.2) 100%);
}
.mo-hero__slide--align-center .mo-hero__scrim {
	background: linear-gradient(180deg, rgba(28, 43, 39, 0.4) 0%, rgba(28, 43, 39, 0.75) 100%);
}

.mo-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mo-space-3);
	width: 100%;
	max-width: 620px;
	padding: var(--mo-space-5) clamp(var(--mo-space-5), 4vw, var(--mo-space-10));
	color: #fff;
	text-align: left;
}
.mo-hero__slide--align-center { justify-content: center; }
.mo-hero__slide--align-center .mo-hero__content {
	align-items: center;
	text-align: center;
	margin-inline: auto;
}

.mo-hero__eyebrow {
	font-size: var(--mo-text-xs);
	font-weight: var(--mo-weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mo-color-accent-050);
}
.mo-hero__heading {
	margin: 0;
	font-family: var(--mo-font-heading);
	font-weight: var(--mo-weight-bold);
	font-size: var(--mo-text-3xl);
	line-height: var(--mo-leading-tight);
	color: #fff;
}
.mo-hero__text {
	margin: 0;
	max-width: 46ch;
	font-size: var(--mo-text-base);
	color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 767px) {
	.mo-hero__text { display: none; }
}

.mo-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--mo-color-ink);
	cursor: pointer;
	transition: background var(--mo-transition);
}
.mo-hero__nav:hover { background: #fff; }
.mo-hero__nav--prev { left: var(--mo-space-3); }
.mo-hero__nav--next { right: var(--mo-space-3); }
@media (max-width: 559px) {
	.mo-hero__nav { display: none; }
}

.mo-hero__controls {
	position: absolute;
	right: var(--mo-space-4);
	bottom: var(--mo-space-3);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--mo-space-2);
}
.mo-hero__dots { display: flex; gap: 6px; }
.mo-hero__dot {
	width: 26px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: var(--mo-radius-pill);
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: background var(--mo-transition);
}
.mo-hero__dot.is-active { background: #fff; }
.mo-hero__playpause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	color: var(--mo-color-ink);
	cursor: pointer;
}
.mo-hero__playpause:hover { background: #fff; }
.mo-hero__playpause .mo-hero__icon-play { display: none; }
.mo-hero__playpause.is-paused .mo-hero__icon-play { display: block; }
.mo-hero__playpause.is-paused .mo-hero__icon-pause { display: none; }

/* No visible controls at all. The arrows and dots are gone from the markup
   entirely (the widget is saved with show_arrows and show_dots off), so the
   hero is nothing but artwork that advances on its own and loops.

   The pause button is the one thing kept, and it is hidden the way a skip
   link is: clipped to a single pixel until it takes keyboard focus, at which
   point it appears. Content that starts moving by itself and runs for more
   than five seconds needs *some* way to stop it (WCAG 2.2.2), and a control
   that only a keyboard or screen-reader user ever sees costs the design
   nothing while still being a real one. Autoplay is separately disabled
   outright for anyone who asks for reduced motion. */
.mo-hero__controls {
	position: absolute;
	right: var(--mo-space-4);
	bottom: var(--mo-space-3);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--mo-space-2);
}
.mo-hero__playpause {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 1px;
	height: 1px;
	/* The theme gives buttons a 44px min-height for touch targets; while this
	   one is clipped away it must not reserve that. */
	min-height: 0;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.mo-hero__playpause:focus-visible {
	position: static;
	width: 36px;
	height: 36px;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--mo-color-ink);
}

/* --- Product Carousel widget ------------------------------------------
   Scrolling is native (overflow-x + scroll-snap), so swipe/momentum come
   from the browser; product-carousel.js only drives the arrow buttons. */
/* The rail is its own scroll container, but its content width still
   propagated up and made the whole document scroll sideways by ~1270px.
   Clipping here stops that at the widget. `clip` rather than `hidden` so this
   never becomes a second scroll container, and the clip margin lets the
   prev/next arrows keep hanging 16px outside the box. */
.mo-product-carousel {
	position: relative;
	overflow: clip;
	overflow-clip-margin: 28px;
}
.mo-product-carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	margin-inline: calc(var(--mo-space-1) * -1);
	padding: var(--mo-space-1);
}
.mo-product-carousel__viewport::-webkit-scrollbar { display: none; }

/* The carousel reuses the shop loop's own <ul class="products"> markup, so
   the grid rules from woocommerce.css have to be overridden into a row. */
.mo-product-carousel .woocommerce ul.products,
.mo-product-carousel ul.products {
	display: flex;
	gap: var(--mo-card-gap);
	margin: 0;
	grid-template-columns: none;
}
.mo-product-carousel ul.products li.product {
	flex: 0 0 auto;
	width: calc(50% - (var(--mo-card-gap) / 2));
	scroll-snap-align: start;
}
@media (min-width: 768px) {
	.mo-product-carousel ul.products li.product { width: calc(33.333% - (var(--mo-card-gap) * 2 / 3)); }
}
@media (min-width: 1200px) {
	.mo-product-carousel ul.products li.product { width: calc(25% - (var(--mo-card-gap) * 3 / 4)); }
}

.mo-carousel-nav {
	position: absolute;
	top: calc(50% - var(--mo-space-6));
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--mo-color-line);
	border-radius: 50%;
	background: var(--mo-color-surface);
	color: var(--mo-color-ink);
	box-shadow: var(--mo-shadow-sm);
	cursor: pointer;
	transition: background var(--mo-transition), opacity var(--mo-transition);
}
.mo-carousel-nav:hover:not(:disabled) {
	background: var(--mo-color-primary);
	border-color: var(--mo-color-primary);
	color: #fff;
}
.mo-carousel-nav:disabled { opacity: 0; pointer-events: none; }
.mo-carousel-nav--prev { left: calc(var(--mo-space-4) * -1); }
.mo-carousel-nav--next { right: calc(var(--mo-space-4) * -1); }
/* Same treatment as the hero: the arrows only appear when the pointer is over
   the carousel or something inside it has keyboard focus. The rail autoplays
   and swipes, so in the resting state there is nothing hanging off its edges. */
.mo-carousel-nav {
	opacity: 0;
	pointer-events: none;
	transition: opacity 260ms ease, background var(--mo-transition);
}
.mo-product-carousel:hover .mo-carousel-nav:not(:disabled),
.mo-product-carousel:focus-within .mo-carousel-nav:not(:disabled),
.mo-blog-carousel:hover .mo-carousel-nav:not(:disabled),
.mo-blog-carousel:focus-within .mo-carousel-nav:not(:disabled) {
	opacity: 1;
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.mo-carousel-nav { transition: none; }
}
@media (max-width: 1023px) {
	/* No room to hang arrows outside the container - the row swipes instead. */
	.mo-carousel-nav { display: none; }
}

/* --- Media + Text widget ---------------------------------------------- */
.mo-media-text {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mo-space-5);
	align-items: center;
}
@media (min-width: 900px) {
	.mo-media-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mo-space-8); }
	/* Source order is always image-then-text (so mobile stacks predictably
	   and the reading order stays sane); the desktop swap is visual only. */
	.mo-media-text--media-right .mo-media-text__media { order: 2; }
}
.mo-media-text__media {
	border-radius: var(--mo-radius-lg);
	overflow: hidden;
	background: var(--mo-color-canvas-alt);
}
.mo-media-text__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	/* contain, not cover: the supplied photographs range from portrait
	   (~0.94:1) to wide (~1.57:1), never actually 4:3, so a cover crop was
	   cutting real content - a runner's head, a product's cap - off the top
	   or bottom depending on which photo landed here. The 4:3 box stays for
	   a predictable row height; the parent's own background (below) fills
	   whatever the image doesn't. */
	object-fit: contain;
	display: block;
}
.mo-media-text__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mo-space-3);
}
.mo-media-text__eyebrow {
	font-size: var(--mo-text-xs);
	font-weight: var(--mo-weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mo-color-primary-600);
}
.mo-media-text__heading {
	margin: 0;
	font-size: var(--mo-text-2xl);
}
.mo-media-text__text {
	margin: 0;
	color: var(--mo-color-body);
	max-width: 52ch;
}

/* --- Promo Banner widget ---------------------------------------------
   Three fixed colour presets, each already checked for text/background
   contrast (see docs/elementor-widgets.md) - no free colour picker, so an
   editor can never produce an inaccessible combination. */
.mo-promo-banner {
	position: relative;
	display: flex;
	align-items: center;
	/* A promo strip between product sections, not a second hero: keep it in
	   proportion to the rows above and below it. The image theme needs more
	   height for the photograph to read, so it overrides this below. */
	padding: var(--mo-space-6) var(--mo-gutter);
	border-radius: var(--mo-radius-lg);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	min-height: 180px;
}
.mo-promo-banner--align-center { justify-content: center; text-align: center; }
.mo-promo-banner--align-left { justify-content: flex-start; text-align: left; }

.mo-promo-banner__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--mo-space-4);
	max-width: 640px;
}
.mo-promo-banner--align-center .mo-promo-banner__content { align-items: center; }
.mo-promo-banner--align-left .mo-promo-banner__content { align-items: flex-start; }

.mo-promo-banner__heading {
	margin: 0;
	font-size: var(--mo-text-3xl);
	line-height: var(--mo-leading-tight);
}
.mo-promo-banner__text {
	margin: 0;
	font-size: var(--mo-text-lg);
	line-height: var(--mo-leading-body);
	max-width: 46ch;
}
.mo-promo-banner__button { min-height: 44px; }

/* Brand brown: white text on --mo-color-primary (#a25800) is 5.34:1 - AA. */
.mo-promo-banner--theme-brand {
	background-color: var(--mo-color-primary);
	color: #fff;
}
.mo-promo-banner--theme-brand .mo-promo-banner__heading,
.mo-promo-banner--theme-brand .mo-promo-banner__text { color: #fff; }
.mo-promo-banner--theme-brand .mo-promo-banner__button {
	background: #fff;
	color: var(--mo-color-primary-700);
	border-color: #fff;
}
.mo-promo-banner--theme-brand .mo-promo-banner__button:hover {
	background: var(--mo-color-primary-050);
	border-color: var(--mo-color-primary-050);
}

/* Leaf green: white text on --mo-color-accent (#336804) is 6.73:1 - AA/AAA
   (ink text only reaches 2.19:1 on this darker green, so white is required
   here - unlike the old amber accent, which needed ink text instead). */
.mo-promo-banner--theme-amber {
	background-color: var(--mo-color-accent);
	color: #fff;
}
.mo-promo-banner--theme-amber .mo-promo-banner__heading,
.mo-promo-banner--theme-amber .mo-promo-banner__text { color: #fff; }
.mo-promo-banner--theme-amber .mo-promo-banner__button {
	background: #fff;
	color: var(--mo-color-accent-600);
	border-color: #fff;
}
.mo-promo-banner--theme-amber .mo-promo-banner__button:hover {
	background: var(--mo-color-accent-050);
	border-color: var(--mo-color-accent-050);
}

/* Soft corner glows on the two flat-colour themes so a hero/promo banner
   reads as a designed surface rather than a plain rectangle. Not applied to
   the image theme, whose real background photo doesn't need decoration.
   Low-opacity white radial glow, behind the content (z-index 0), so text
   contrast is unaffected either way. */
.mo-promo-banner--theme-brand::after,
.mo-promo-banner--theme-amber::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 88% 15%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 34%),
		radial-gradient(circle at 8% 90%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 30%);
}

/* Background image: a fixed dark overlay guarantees white text stays
   readable regardless of which image an editor picks - never relying on
   the image's own colours for contrast. */
.mo-promo-banner--theme-image {
	background-color: var(--mo-color-ink);
	color: #fff;
	/* Taller than a solid-colour strip so the photograph is actually readable. */
	min-height: 300px;
	padding-block: var(--mo-space-8);
}
.mo-promo-banner--theme-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20, 30, 27, 0.55);
	z-index: 0;
}
.mo-promo-banner--theme-image .mo-promo-banner__heading,
.mo-promo-banner--theme-image .mo-promo-banner__text { color: #fff; }
.mo-promo-banner--theme-image .mo-promo-banner__button {
	/* White, not ink, on this green: 6.73:1 vs 2.19:1 - WCAG AA for normal text. */
	background: var(--mo-color-accent);
	color: #fff;
	border-color: var(--mo-color-accent);
}

@media (max-width: 480px) {
	.mo-promo-banner { padding: var(--mo-space-6) var(--mo-space-4); min-height: 260px; }
	.mo-promo-banner__heading { font-size: var(--mo-text-2xl); }
}

/* --- Trust Points widget -----------------------------------------------
   Entrance animation for this section is GSAP + ScrollTrigger, not the
   sitewide vanilla .mo-reveal system (see assets/js/trust-points-animate.js
   and inc/enqueue.php's conditional load) - .mo-trust-points__item starts
   at full opacity here on purpose; the JS itself sets the pre-animation
   state, so a page where GSAP fails to load (or prefers-reduced-motion)
   never has content hidden behind a CSS rule with no JS to reverse it. */
.mo-trust-points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mo-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 769px) {
	.mo-trust-points[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mo-trust-points[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mo-trust-points[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.mo-trust-points { grid-template-columns: 1fr; }
}

.mo-trust-points__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--mo-space-3);
	padding: var(--mo-space-6) var(--mo-space-5);
	background: var(--mo-color-surface);
	border: 1px solid var(--mo-color-line);
	border-radius: var(--mo-radius-lg);
	box-shadow: var(--mo-shadow-sm);
	transition: transform var(--mo-transition), box-shadow var(--mo-transition), border-color var(--mo-transition);
}
.mo-trust-points__item:hover {
	transform: translateY(-6px);
	box-shadow: var(--mo-shadow-lg);
	border-color: var(--mo-color-primary-050);
}
.mo-trust-points__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--mo-color-primary-050);
	border: 1px solid rgba(162, 88, 0, 0.18); /* --mo-color-primary tint */
	color: var(--mo-color-primary);
	font-size: var(--mo-text-2xl);
}
/* Alternate the brand's two logo colours (mark brown / leaf green) across
   items so a row of icons reads as designed, not a flat repeated badge. */
.mo-trust-points__item:nth-child(even) .mo-trust-points__icon {
	background: var(--mo-color-accent-050);
	border-color: rgba(45, 92, 4, 0.22); /* --mo-color-accent-600 tint */
	color: var(--mo-color-accent-600);
}
.mo-trust-points__heading {
	margin: 0;
	font-size: var(--mo-text-lg);
}
.mo-trust-points__text {
	margin: 0;
	color: var(--mo-color-muted);
	font-size: var(--mo-text-sm);
	max-width: 32ch;
}

/* --- Promo Banner: split treatment -------------------------------------
   Copy on a cream half, photograph bleeding to the panel edge on the other.
   Unlike the overlay themes there is no scrim, because no text ever sits on
   the photograph - which is also why that image is purely decorative. */
.mo-promo-banner--theme-split {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 0;
	padding: 0;
	min-height: 0;
	background-color: var(--mo-color-canvas-alt);
	background-size: cover;
	background-position: left center;
	color: var(--mo-color-body);
	overflow: hidden;
}
@media (min-width: 900px) {
	.mo-promo-banner--theme-split { grid-template-columns: 1fr 1fr; }
}
.mo-promo-banner--theme-split .mo-promo-banner__content {
	max-width: none;
	align-items: flex-start;
	text-align: left;
	padding: var(--mo-space-8) var(--mo-gutter);
	gap: var(--mo-space-4);
}
.mo-promo-banner--theme-split .mo-promo-banner__heading {
	font-size: var(--mo-text-4xl);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--mo-color-primary-700);
}
.mo-promo-banner--theme-split .mo-promo-banner__text {
	font-size: var(--mo-text-lg);
	color: var(--mo-color-body);
	max-width: 30ch;
}
.mo-promo-banner--theme-split .mo-promo-banner__button {
	background: var(--mo-color-primary);
	color: #fff;
	border-color: var(--mo-color-primary);
}
.mo-promo-banner--theme-split .mo-promo-banner__button:hover {
	background: var(--mo-color-primary-700);
	border-color: var(--mo-color-primary-700);
}
.mo-promo-banner__side {
	position: relative;
	align-self: stretch;
	min-height: 260px;
}
.mo-promo-banner__side-track {
	position: relative;
	width: 100%;
	height: 100%;
}
.mo-promo-banner__side-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Crossfade only applies once there is more than one photo (see the
   template) - a single still image keeps rendering exactly as before,
   fully opaque with no transition, so this cannot regress any existing
   single-photo banner. */
.mo-promo-banner__side--slider .mo-promo-banner__side-image {
	opacity: 0;
	visibility: hidden;
	transition: opacity 900ms ease, visibility 0s linear 900ms;
}
.mo-promo-banner__side--slider .mo-promo-banner__side-image.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 900ms ease, visibility 0s;
	z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
	.mo-promo-banner__side--slider .mo-promo-banner__side-image { transition: none; }
}

/* --- Why Us Grid -------------------------------------------------------
   Six-column bento: the title and the first card share the top row (3 + 3),
   the remaining three split the bottom row (2 + 2 + 2). Below 900px it drops
   to two columns and then one, because a 2-of-6 tile at phone width is a
   sliver rather than a card. */
.mo-why-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mo-card-gap);
}
@media (min-width: 620px) {
	.mo-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.mo-why-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	/* Top row is always the title beside the first card, in halves. */
	.mo-why-grid__title,
	.mo-why-grid__card--1 { grid-column: span 3; }
	/* Bottom row divides by however many cards are left, so removing one does
	   not leave a gap where the missing tile used to be. */
	.mo-why-grid[data-cards="4"] .mo-why-grid__card--2,
	.mo-why-grid[data-cards="4"] .mo-why-grid__card--3,
	.mo-why-grid[data-cards="4"] .mo-why-grid__card--4 { grid-column: span 2; }
	.mo-why-grid[data-cards="3"] .mo-why-grid__card--2,
	.mo-why-grid[data-cards="3"] .mo-why-grid__card--3 { grid-column: span 3; }
	.mo-why-grid[data-cards="2"] .mo-why-grid__card--2 { grid-column: span 6; }
}

.mo-why-grid__title,
.mo-why-grid__card {
	position: relative;
	display: flex;
	border-radius: var(--mo-radius-lg);
	overflow: hidden;
	min-height: 240px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.mo-why-grid__title {
	align-items: center;
	padding: var(--mo-space-6);
	background-color: var(--mo-color-surface);
}
.mo-why-grid__title-text {
	margin: 0;
	max-width: 8ch;
	font-size: var(--mo-text-4xl);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--mo-color-primary-700);
}

.mo-why-grid__card {
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--mo-space-3);
	padding: var(--mo-space-5);
	color: #fff;
}
.mo-why-grid__icon {
	width: 52px;
	height: 52px;
	object-fit: contain;
	align-self: flex-end;
	margin-bottom: auto;
}
.mo-why-grid__heading {
	margin: 0 0 var(--mo-space-2);
	font-size: var(--mo-text-xl);
	text-transform: uppercase;
	color: inherit;
}
.mo-why-grid__text {
	margin: 0;
	font-size: var(--mo-text-sm);
	line-height: var(--mo-leading-body);
	color: inherit;
	max-width: 36ch;
}

/* Photo-backed card: a scrim guarantees the text clears contrast whatever
   the photograph underneath happens to be - the same reasoning as the promo
   banner image theme. */
.mo-why-grid__card--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 30, 27, 0.05) 30%, rgba(20, 30, 27, 0.62) 100%);
}
.mo-why-grid__card--image > * { position: relative; z-index: 1; }

/* White on --mo-color-primary-700 (#713e00) is 8.6:1 - AAA. */
.mo-why-grid__card--dark { background-color: var(--mo-color-primary-700); }
/* White on --mo-color-primary (#a25800) is 5.34:1 - AA. */
.mo-why-grid__card--amber { background-color: var(--mo-color-primary); }

.mo-why-grid__card--photo { padding: 0; background-color: var(--mo-color-canvas-alt); }
.mo-why-grid__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Blog Grid: carousel -------------------------------------------------
   Every card the same size and treatment, scrolling horizontally - the same
   pattern as the product carousel, on the page's normal light background
   rather than the brand brown the previous lead+grid layout used. */
.mo-blog-grid__heading {
	margin: 0 0 var(--mo-heading-gap);
	font-size: var(--mo-text-3xl);
	text-transform: uppercase;
	color: var(--mo-color-primary-700);
}

/* Same rail-clipping reasoning as .mo-product-carousel: the scroll content's
   width must not propagate up and widen the document. */
.mo-blog-carousel {
	position: relative;
	overflow: clip;
	overflow-clip-margin: 28px;
}
.mo-blog-carousel__viewport {
	display: flex;
	gap: var(--mo-card-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	margin-inline: calc(var(--mo-space-1) * -1);
	padding: var(--mo-space-1);
}
.mo-blog-carousel__viewport::-webkit-scrollbar { display: none; }

.mo-blog-card {
	flex: 0 0 auto;
	width: calc(85% - (var(--mo-card-gap) * 0.15));
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: var(--mo-color-surface);
	border: 1px solid var(--mo-color-line);
	border-radius: var(--mo-radius-lg);
	overflow: hidden;
}
@media (min-width: 640px) {
	.mo-blog-card { width: calc(50% - (var(--mo-card-gap) / 2)); }
}
@media (min-width: 1024px) {
	.mo-blog-card { width: calc(33.333% - (var(--mo-card-gap) * 2 / 3)); }
}

.mo-blog-card__media {
	display: block;
	background: var(--mo-color-canvas-alt);
}
.mo-blog-card__media img,
.mo-blog-card__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	/* contain: several posts reuse photos from other sections (a product
	   bottle plus a person, closer to 1:1 or portrait) that a 16:10 cover
	   crop was cutting into rather than a purpose-shot 16:10 blog photo. */
	object-fit: contain;
	transition: transform 450ms ease;
}
.mo-blog-card__media:hover img { transform: scale(1.04); }
.mo-blog-card__placeholder { background: var(--mo-color-canvas-alt); }

.mo-blog-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--mo-space-2);
	padding: var(--mo-space-5);
}
.mo-blog-card__title {
	margin: 0;
	font-size: var(--mo-text-lg);
	line-height: var(--mo-leading-snug);
}
.mo-blog-card__title a { color: var(--mo-color-ink); text-decoration: none; }
.mo-blog-card__title a:hover { text-decoration: underline; }

.mo-blog-card__excerpt {
	margin: 0;
	font-size: var(--mo-text-sm);
	color: var(--mo-color-body);
}
.mo-blog-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mo-space-3);
	margin-top: auto;
	padding-top: var(--mo-space-2);
	font-size: var(--mo-text-xs);
	letter-spacing: 0.06em;
}
.mo-blog-card__date { color: var(--mo-color-muted); }
.mo-blog-card__more {
	color: var(--mo-color-primary-600);
	text-decoration: none;
	font-weight: var(--mo-weight-bold);
}
.mo-blog-card__more:hover { text-decoration: underline; }

.mo-blog-grid__actions {
	margin: var(--mo-space-6) 0 0;
	text-align: center;
}
.mo-blog-grid__button { min-width: 180px; justify-content: center; }

/* --- Design pass: pill navigation ---------------------------------------
   The nav links sit inside a single rounded container rather than floating
   on the bar, which is what visually separates them from the search pill
   beside them. */
@media (min-width: 769px) {
	.mo-primary-nav-wrap {
		flex: 0 1 auto;
		margin-inline: auto;
		padding: var(--mo-space-2) var(--mo-space-5);
		border-radius: var(--mo-radius-pill);
		background: var(--mo-color-canvas-alt);
	}
	.mo-primary-nav { gap: var(--mo-space-2) var(--mo-space-4); }
	.mo-primary-nav a {
		padding: var(--mo-space-1) var(--mo-space-2);
		border-radius: var(--mo-radius-pill);
		font-size: var(--mo-text-sm);
		white-space: nowrap;
	}
	.mo-primary-nav a:hover,
	.mo-primary-nav .current-menu-item > a {
		background: var(--mo-color-surface);
		color: var(--mo-color-primary-700);
	}
}

/* --- Design pass: footer --------------------------------------------------
   Brand brown rather than ink, social row, and the wordmark bleeding off the
   bottom edge. */
.mo-site-footer {
	position: relative;
	background: var(--mo-color-primary-700);
	color: #f0e4d4;
	overflow: hidden;
}
.mo-site-footer a { color: #fff; }
.mo-footer-brand__text { color: #e6d7c4; }

.mo-footer-social {
	display: flex;
	gap: var(--mo-space-2);
	margin-top: var(--mo-space-4);
	padding: 0;
	list-style: none;
}
.mo-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--mo-radius);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	transition: background var(--mo-transition);
}
.mo-footer-social a:hover { background: rgba(255, 255, 255, 0.24); }
.mo-footer-social svg { width: 20px; height: 20px; display: block; }


.mo-site-footer__bar { border-top-color: rgba(255, 255, 255, 0.16); }
.mo-site-footer__copy { color: #e6d7c4; }

/* --- Design pass: section headings ---------------------------------------
   The design sets every band title in uppercase brand brown. Applied through
   CSS rather than by typing the titles in capitals, so a screen reader still
   receives ordinary sentence-case words.

   font-family needs !important for the same reason the colour does, and it is
   not belt-and-braces: Elementor's generated kit stylesheet (post-11.css)
   loads AFTER this file and sets Roboto, so without it every section title on
   the page - the largest type in the design - silently rendered in Roboto
   while everything around it used the brand face. */
.elementor-widget-heading .elementor-heading-title {
	color: var(--mo-color-primary-700) !important;
	font-family: var(--mo-font-heading) !important;
	font-weight: var(--mo-weight-bold) !important;
	text-transform: uppercase;
	letter-spacing: -0.005em;
}

/* --- Design pass: "View more" button under the product grid -------------- */
.elementor-widget-button .elementor-button {
	background: var(--mo-color-primary);
	color: #fff;
	border-radius: var(--mo-radius-pill);
	padding: 0.7em 2.4em;
	font-family: var(--mo-font-heading);
	font-weight: var(--mo-weight-bold);
	font-size: var(--mo-text-base);
	min-height: 44px;
}
.elementor-widget-button .elementor-button:hover {
	background: var(--mo-color-primary-700);
	color: #fff;
}
.elementor-widget-button:not(:first-child) { margin-top: var(--mo-space-5); }

/* --- Design pass: hero is artwork -----------------------------------------
   These four banners already carry their own headline, product shot and
   message baked into the image. Overlaying the widget's own copy on top
   would double it up and fight the artwork, so the hero renders image-only
   here; the widget still supports text slides for anyone who wants them. */
/* Artwork-only slides render no content box at all - see the hero template. */

/* --- Design pass: corrections after comparing against the mockup ---------- */


/* Copyright sits to the right of the bar in the design. */
.mo-site-footer__bar { display: flex; justify-content: flex-end; }
@media (max-width: 559px) {
	.mo-site-footer__bar { justify-content: flex-start; }
}

/* The mockup shows the carousel arrows permanently, unlike the hero, which
   shows only its dots. Overriding the shared hide-until-hover rule here
   rather than deleting it, because the hero still relies on it. */
.mo-carousel-nav { opacity: 1; pointer-events: auto; }
.mo-carousel-nav:disabled { opacity: 0; pointer-events: none; }
/* The footer logo is the white-knockout asset, so it needs no filter: the
   supplied PNG has a white background rather than an alpha channel, and
   inverting it turned the whole rectangle white against the brown. */
.mo-footer-logo-link { display: inline-block; }
.mo-footer-logo {
	max-height: 84px;
	max-width: 300px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
/* At 300px wide this lockup filled three quarters of a phone screen. */
@media (max-width: 560px) {
	.mo-footer-logo { max-height: 60px; max-width: 215px; }
}

/* --- Footer marquee ------------------------------------------------------
   An oversized scrolling wordmark across the bottom of the footer. The track
   holds two identical runs and shifts left by exactly half its own width, so
   run two arrives precisely where run one started and the loop has no seam.
   The whole strip is aria-hidden in the markup - it is the brand name a dozen
   times over, which is decoration, not content. */
.mo-footer-marquee {
	margin-top: var(--mo-space-6);
	/* Cancels the footer's own bottom padding so the wordmark runs off the
	   bottom edge of the page, as it does in the mockup, rather than sitting
	   neatly above a strip of empty brown. */
	margin-bottom: calc(var(--mo-section-py) * -1);
	overflow: hidden;
	/* Fades the strip at both ends instead of letting a word be sliced
	   mid-letter by the viewport edge. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.mo-footer-marquee__track {
	display: flex;
	width: max-content;
	animation: mo-marquee 46s linear infinite;
}
.mo-footer-marquee__run {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
	padding-right: clamp(2rem, 5vw, 5rem);
}
/* The oversized wordmark, set in the brand gold. That colour is sampled
   straight from the mockup - #a25800 on the footer brown - which is the
   primary token, so it is referenced rather than repeated as a literal. */
.mo-footer-marquee__word {
	flex: 0 0 auto;
	font-family: var(--mo-font-heading);
	font-weight: var(--mo-weight-bold);
	font-size: clamp(3.5rem, 11vw, 11rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--mo-color-primary);
	white-space: nowrap;
	user-select: none;
}

@keyframes mo-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Pausing on hover gives a mouse user a way to stop it; the reduced-motion
   rule below is what actually matters for anyone who has asked for less. */
.mo-footer-marquee:hover .mo-footer-marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.mo-footer-marquee__track { animation: none; }
}