/**
 * Okushal flavour styles
 *
 * Driven by product_cat-{slug} (shop) and flavours-{slug} (recipes).
 * Colour tokens map to Elementor Site Settings globals (kit 6372).
 *
 * Copy into Elementor Custom CSS when iterating.
 */

/* -------------------------------------------------------------------------
   Elementor global aliases (names from Site Settings)
   ------------------------------------------------------------------------- */

:root {
	--oku-ppm-mint: var(--e-global-color-de2d69d, #63B76B);
	--oku-ppm-sage: var(--e-global-color-ab98524, #D8DFB3);
	--oku-ppm-green: var(--e-global-color-2655871, #AABC27);
	--oku-rn-red: var(--e-global-color-f836ccd, #D70F28);
	--oku-rn-magenta: var(--e-global-color-edf118c, #F90064);
	--oku-rn-orange: var(--e-global-color-1592a4c, #F08106);
	--oku-pll-lime: var(--e-global-color-a3bc412, #B5D16C);
	--oku-pll-lemon: var(--e-global-color-7ace055, #EBE65A);
	--oku-pll-maroon: var(--e-global-color-426799b, #90153F);
	--oku-gp-khaki: var(--e-global-color-088c32f, #8A7D31);
	--oku-gp-tan: var(--e-global-color-b8a0093, #D7994E);
	--oku-gp-yellow: var(--e-global-color-711552f, #FAD816);
	--oku-brand-red: var(--e-global-color-ac85095, #E30613);
	--oku-link-static: var(--e-global-color-63aaa12, #D46511);
	--oku-link-hover: var(--e-global-color-33d80c6, #A44319);
	--oku-sand: var(--e-global-color-b30ecf6, #FFF5DD);
	--oku-text-muted: var(--e-global-color-d0030ab, #97746B);
	--oku-pll-flavour-full: var(--e-global-color-846dab7, #fb8c95);
	--oku-pll-flavour-tint: var(--e-global-color-234c367, #fdc5ca);
	--oku-ppm-flavour-full: var(--e-global-color-6aaed68, #b0ce94);
	--oku-ppm-flavour-tint: var(--e-global-color-94efc2d, #d7e7c9);
	--oku-gp-flavour-full: var(--e-global-color-465c38c, #d5af65);
	--oku-gp-flavour-tint: var(--e-global-color-411f254, #ead7b2);
	--oku-rn-flavour-full: var(--e-global-color-1453b8f, #f48c1b);
	--oku-rn-flavour-tint: var(--e-global-color-57836de, #f9c58d);
}

.flavour-title span:nth-child(1) {
	color: var(--title-1);
}

.flavour-title span:nth-child(2) {
	color: var(--title-2);
}

.flavour-title span.amp {
	color: var(--title-amp);
}

.single-product .flavour-title span.amp {
	font-weight: 400;
}

.flavour-title span:last-child {
	color: var(--title-3);
}

/* -------------------------------------------------------------------------
   Gradient headline (multi-span, mixed global fonts)
   Wrapper: oku-gradient-text. Spans: gradfont-* (typography only — no colour).
   Match class names to Elementor Site Settings → Global Fonts.
   ------------------------------------------------------------------------- */

:root {
	--oku-gradient-text: linear-gradient(
		90deg,
		#b1d08f 0%,
		#b1d08f 21%,
		#b1d08f 32%,
		#f7cb07 54%,
		#fe4b22 72%,
		#fe4b22 85%,
		#fe4b22 100%
	);
}

.oku-gradient-text {
	display: block;
	width: 100%;
	text-align: center;
	background-image: var(--oku-gradient-text);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
}

.oku-gradient-text * {
	color: inherit;
	-webkit-text-fill-color: transparent;
	background: none !important;
	line-height: inherit;
	vertical-align: baseline;
}

.oku-gradient-text .spacer {
	display: inline-block;
	width: 100px;
	vertical-align: baseline;
}

@media (max-width: 767px) {
	.oku-gradient-text .spacer {
		width: 10vw;
	}
}

/* Heading levels — size on h*; inner gradfont-* spans inherit. */
.oku-gradient-text:is(h1, h2, h3, h4, h5, h6),
.oku-gradient-text :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-weight: inherit;
	line-height: 1.3em;
}

.oku-gradient-text:is(h1),
.oku-gradient-text :is(h1) {
	font-size: 48px;
	letter-spacing: -0.03em;
}

.oku-gradient-text:is(h2),
.oku-gradient-text :is(h2) {
	font-size: 39px;
	letter-spacing: -0.025em;
}

.oku-gradient-text:is(h3),
.oku-gradient-text :is(h3) {
	font-size: 29px;
}

.oku-gradient-text:is(h4),
.oku-gradient-text :is(h4) {
	font-size: 19px;
}

.oku-gradient-text:is(h5),
.oku-gradient-text :is(h5) {
	font-size: 15px;
}

.oku-gradient-text:is(h6),
.oku-gradient-text :is(h6) {
	font-size: 13px;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.oku-gradient-text .spacer {
		width: 60px;
	}

	.oku-gradient-text:is(h1),
	.oku-gradient-text :is(h1) {
		font-size: 38px;
		letter-spacing: -0.028em;
	}

	.oku-gradient-text:is(h2),
	.oku-gradient-text :is(h2) {
		font-size: 32px;
		letter-spacing: -0.024em;
	}

	.oku-gradient-text:is(h3),
	.oku-gradient-text :is(h3) {
		font-size: 24px;
	}

	.oku-gradient-text:is(h4),
	.oku-gradient-text :is(h4) {
		font-size: 17px;
	}

	.oku-gradient-text:is(h5),
	.oku-gradient-text :is(h5) {
		font-size: 14px;
	}

	.oku-gradient-text:is(h6),
	.oku-gradient-text :is(h6) {
		font-size: 13px;
	}
}

@media (max-width: 767px) {
	.oku-gradient-text:is(h1),
	.oku-gradient-text :is(h1) {
		font-size: clamp(1.75rem, 8.5vw, 2.25rem);
		letter-spacing: -0.028em;
	}

	.oku-gradient-text:is(h2),
	.oku-gradient-text :is(h2) {
		font-size: clamp(1.5rem, 7vw, 2rem);
		letter-spacing: -0.024em;
	}

	.oku-gradient-text:is(h3),
	.oku-gradient-text :is(h3) {
		font-size: clamp(1.25rem, 5.5vw, 1.5rem);
	}

	.oku-gradient-text:is(h4),
	.oku-gradient-text :is(h4) {
		font-size: clamp(1rem, 4.5vw, 1.15rem);
	}

	.oku-gradient-text:is(h5),
	.oku-gradient-text :is(h5) {
		font-size: clamp(0.9rem, 4vw, 1rem);
	}

	.oku-gradient-text:is(h6),
	.oku-gradient-text :is(h6) {
		font-size: clamp(0.85rem, 3.5vw, 0.95rem);
	}
}

.oku-gradient-text .gradfont-barlow-bold,
.gradfont-barlow-bold {
	font-family: "Barlow", sans-serif;
	font-weight: 800;
	font-style: normal;
}

.oku-gradient-text .gradfont-barlow-reg,
.gradfont-barlow-reg {
	font-family: "Barlow", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.oku-gradient-text .gradfont-barlow-light,
.gradfont-barlow-light {
	font-family: "Barlow", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.oku-gradient-text .gradfont-roboto-s-bold,
.gradfont-roboto-s-bold {
	font-family: "Roboto Serif", serif;
	font-weight: 700;
	font-style: italic;
}

.oku-gradient-text .gradfont-roboto-s-reg,
.gradfont-roboto-s-reg {
	font-family: "Roboto Serif", serif;
	font-weight: 400;
	font-style: italic;
}

.oku-gradient-text .gradfont-roboto-s-light,
.gradfont-roboto-s-light {
	font-family: "Roboto Serif", serif;
	font-weight: 300;
	font-style: italic;
}

.product_cat-prickly-pear-and-mint,
.flavours-prickly-pear-and-mint,
.product_cat-ginger-and-pineapple,
.flavours-ginger-and-pineapple,
.product_cat-pomegranate-lime-and-lemon,
.flavours-pomegranate-lime-and-lemon,
.product_cat-raspberry-and-naartjie,
.flavours-raspberry-and-naartjie {
	--oku-gradient-text: var(--flavour-price);
}

/* -------------------------------------------------------------------------
   Jet Smart Filters — flavour pills (Advanced → CSS Classes: oku-flavour-filter)
   ------------------------------------------------------------------------- */

.oku-flavour-filter .jet-checkboxes-list,
.jet-checkboxes-list[data-query-var="flavours"] {
	--oku-flavour-filter-border: color-mix(in srgb, var(--oku-text-muted) 35%, #fff);
	font-family: "Barlow", var(--e-global-typography-primary-font-family, sans-serif);
}

.elementor-widget-jet-smart-filters-checkboxes.oku-flavour-filter .jet-checkboxes-list,
.elementor-widget-jet-smart-filters-checkboxes .jet-checkboxes-list[data-query-var="flavours"] {
	font-family: "Barlow", var(--e-global-typography-primary-font-family, sans-serif);
}

.oku-flavour-filter .jet-checkboxes-list-wrapper,
.jet-checkboxes-list[data-query-var="flavours"] .jet-checkboxes-list-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 0.65rem;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.oku-flavour-filter .jet-checkboxes-list__row,
.jet-checkboxes-list[data-query-var="flavours"] .jet-checkboxes-list__row {
	display: inline-flex;
	align-items: center;
}

/* Off/on pill colour = --flavour-review-full (--oku-*-flavour-full) on each .flavours-{slug} row */
.oku-flavour-filter .jet-checkboxes-list__row[class*="flavours-"],
.jet-checkboxes-list[data-query-var="flavours"] .jet-checkboxes-list__row[class*="flavours-"] {
	--oku-flavour-filter-off: var(--flavour-review-full);
	--oku-flavour-filter-on: var(--flavour-review-full);
}

.oku-flavour-filter .jet-checkboxes-list__item,
.jet-checkboxes-list[data-query-var="flavours"] .jet-checkboxes-list__item {
	display: inline-flex;
	margin: 0;
	cursor: pointer;
}

.oku-flavour-filter .jet-checkboxes-list__input,
.jet-checkboxes-list[data-query-var="flavours"] .jet-checkboxes-list__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.oku-flavour-filter .jet-checkboxes-list__decorator,
.jet-checkboxes-list[data-query-var="flavours"] .jet-checkboxes-list__decorator {
	display: none !important;
}

.oku-flavour-filter .jet-checkboxes-list__button,
.jet-checkboxes-list[data-query-var="flavours"] .jet-checkboxes-list__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.35rem;
	margin: 0;
	font-family: inherit;
	background: #fff;
	border: 1.5px solid var(--oku-flavour-filter-off, var(--oku-flavour-filter-border));
	border-radius: 999px;
	box-shadow: none;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.oku-flavour-filter .jet-checkboxes-list__input:not(:checked) + .jet-checkboxes-list__button,
.jet-checkboxes-list[data-query-var="flavours"] .jet-checkboxes-list__input:not(:checked) + .jet-checkboxes-list__button {
	background: #fff;
	border-color: var(--oku-flavour-filter-off, var(--flavour-review-full));
}

.oku-flavour-filter .jet-checkboxes-list__label,
.jet-checkboxes-list[data-query-var="flavours"] .jet-checkboxes-list__label {
	font-family: "Barlow", var(--e-global-typography-primary-font-family, sans-serif) !important;
	font-weight: 600;
	font-size: clamp(0.75rem, 2.2vw, 0.9375rem);
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--oku-flavour-filter-off, var(--flavour-review-full, var(--oku-text-muted)));
	transition: color 0.15s ease;
}

.oku-flavour-filter
	.jet-checkboxes-list__input:not(:checked)
	+ .jet-checkboxes-list__button
	.jet-checkboxes-list__label,
.jet-checkboxes-list[data-query-var="flavours"]
	.jet-checkboxes-list__input:not(:checked)
	+ .jet-checkboxes-list__button
	.jet-checkboxes-list__label {
	color: var(--oku-flavour-filter-off, var(--flavour-review-full));
}

.oku-flavour-filter .jet-checkboxes-list__item:hover .jet-checkboxes-list__input:not(:checked) + .jet-checkboxes-list__button,
.jet-checkboxes-list[data-query-var="flavours"]
	.jet-checkboxes-list__item:hover
	.jet-checkboxes-list__input:not(:checked)
	+ .jet-checkboxes-list__button {
	border-color: var(--oku-flavour-filter-off, var(--flavour-review-full));
	background: color-mix(in srgb, var(--oku-flavour-filter-off, var(--flavour-review-full)) 8%, #fff);
}

.oku-flavour-filter .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button,
.jet-checkboxes-list[data-query-var="flavours"] .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button {
	background: var(--oku-flavour-filter-on, var(--oku-pll-maroon));
	border-color: var(--oku-flavour-filter-on, var(--oku-pll-maroon));
}

.oku-flavour-filter .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__label,
.jet-checkboxes-list[data-query-var="flavours"] .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__label {
	color: #fff;
	font-weight: 600;
}

.oku-flavour-filter .jet-checkboxes-list__input:focus-visible + .jet-checkboxes-list__button,
.jet-checkboxes-list[data-query-var="flavours"] .jet-checkboxes-list__input:focus-visible + .jet-checkboxes-list__button {
	outline: 2px solid var(--oku-flavour-filter-off, var(--oku-text-muted));
	outline-offset: 3px;
}

/*
 * Jet Smart Filters — map province pills
 * Auto: data-query-var="provinces"
 * Optional: Advanced → CSS Classes: oku-map-filter
 * Rest: oku-link-static · Hover: oku-link-hover
 */
.oku-map-filter .jet-checkboxes-list,
.jet-checkboxes-list[data-query-var="provinces"] {
	--oku-map-filter-off: var(--oku-link-static, #d46511);
	--oku-map-filter-on: var(--oku-link-static, #d46511);
	--oku-map-filter-hover: var(--oku-link-hover, #a44319);
	font-family: "Barlow", var(--e-global-typography-primary-font-family, sans-serif);
}

.oku-map-filter .jet-checkboxes-list-wrapper,
.jet-checkboxes-list[data-query-var="provinces"] .jet-checkboxes-list-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 0.65rem;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.oku-map-filter .jet-checkboxes-list__row,
.jet-checkboxes-list[data-query-var="provinces"] .jet-checkboxes-list__row {
	display: inline-flex;
	align-items: center;
}

.oku-map-filter .jet-checkboxes-list__item,
.jet-checkboxes-list[data-query-var="provinces"] .jet-checkboxes-list__item {
	display: inline-flex;
	margin: 0;
	cursor: pointer;
}

.oku-map-filter .jet-checkboxes-list__input,
.jet-checkboxes-list[data-query-var="provinces"] .jet-checkboxes-list__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.oku-map-filter .jet-checkboxes-list__decorator,
.jet-checkboxes-list[data-query-var="provinces"] .jet-checkboxes-list__decorator {
	display: none !important;
}

.oku-map-filter .jet-checkboxes-list__button,
.jet-checkboxes-list[data-query-var="provinces"] .jet-checkboxes-list__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.35rem;
	margin: 0;
	font-family: inherit;
	background: #fff;
	border: 1.5px solid var(--oku-map-filter-off) !important;
	border-color: var(--oku-map-filter-off) !important;
	border-radius: 999px;
	box-shadow: none;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.oku-map-filter .jet-checkboxes-list__label,
.jet-checkboxes-list[data-query-var="provinces"] .jet-checkboxes-list__label {
	font-family: "Barlow", var(--e-global-typography-primary-font-family, sans-serif) !important;
	font-weight: 600;
	font-size: clamp(0.75rem, 2.2vw, 0.9375rem);
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--oku-map-filter-off);
	transition: color 0.15s ease;
}

.oku-map-filter .jet-checkboxes-list__item:hover .jet-checkboxes-list__input:not(:checked) + .jet-checkboxes-list__button,
.jet-checkboxes-list[data-query-var="provinces"]
	.jet-checkboxes-list__item:hover
	.jet-checkboxes-list__input:not(:checked)
	+ .jet-checkboxes-list__button {
	border-color: var(--oku-map-filter-hover) !important;
	background: color-mix(in srgb, var(--oku-map-filter-hover) 8%, #fff);
}

.oku-map-filter .jet-checkboxes-list__item:hover .jet-checkboxes-list__input:not(:checked) + .jet-checkboxes-list__button .jet-checkboxes-list__label,
.jet-checkboxes-list[data-query-var="provinces"]
	.jet-checkboxes-list__item:hover
	.jet-checkboxes-list__input:not(:checked)
	+ .jet-checkboxes-list__button
	.jet-checkboxes-list__label {
	color: var(--oku-map-filter-hover);
}

.oku-map-filter .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button,
.jet-checkboxes-list[data-query-var="provinces"] .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button {
	background: var(--oku-map-filter-on);
	border-color: var(--oku-map-filter-on) !important;
}

.oku-map-filter .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__label,
.jet-checkboxes-list[data-query-var="provinces"] .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__label {
	color: #fff;
	font-weight: 600;
}

.oku-map-filter .jet-checkboxes-list__item:hover .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button,
.jet-checkboxes-list[data-query-var="provinces"]
	.jet-checkboxes-list__item:hover
	.jet-checkboxes-list__input:checked
	+ .jet-checkboxes-list__button {
	background: var(--oku-map-filter-hover);
	border-color: var(--oku-map-filter-hover) !important;
}

.oku-map-filter .jet-checkboxes-list__input:focus-visible + .jet-checkboxes-list__button,
.jet-checkboxes-list[data-query-var="provinces"] .jet-checkboxes-list__input:focus-visible + .jet-checkboxes-list__button {
	outline: 2px solid var(--oku-map-filter-off);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.oku-map-filter .jet-checkboxes-list-wrapper,
	.jet-checkboxes-list[data-query-var="provinces"] .jet-checkboxes-list-wrapper {
		gap: 0.35rem 0.4rem;
	}

	.oku-map-filter .jet-checkboxes-list__button,
	.jet-checkboxes-list[data-query-var="provinces"] .jet-checkboxes-list__button {
		padding: 0.3rem 0.8rem;
	}

	.oku-map-filter .jet-checkboxes-list__label,
	.jet-checkboxes-list[data-query-var="provinces"] .jet-checkboxes-list__label {
		font-size: 0.75rem;
	}
}

/* -------------------------------------------------------------------------
   Taste / flavour nav menu — same pills as filters
   Nav Menu widget: Advanced → CSS Classes: oku-flavour-menu
   Each menu item (Appearance → Menus): CSS Classes = flavours-{slug}
   ------------------------------------------------------------------------- */

.elementor-widget-nav-menu.oku-flavour-menu {
	font-family: "Barlow", var(--e-global-typography-primary-font-family, sans-serif);
}

.elementor-widget-nav-menu.oku-flavour-menu .elementor-nav-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 0.65rem;
}

.elementor-widget-nav-menu.oku-flavour-menu .elementor-nav-menu > .menu-item {
	display: inline-flex;
	margin: 0;
	padding: 0;
}

.elementor-widget-nav-menu.oku-flavour-menu .elementor-nav-menu > .menu-item[class*="flavours-"] {
	--oku-flavour-filter-off: var(--flavour-review-full);
	--oku-flavour-filter-on: var(--flavour-review-full);
}

.elementor-widget-nav-menu.oku-flavour-menu .elementor-nav-menu a.elementor-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.35rem;
	margin: 0;
	font-family: inherit;
	font-weight: 600;
	font-size: clamp(0.75rem, 2.2vw, 0.9375rem);
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	background: #fff;
	border: 1.5px solid var(--oku-flavour-filter-off, var(--flavour-review-full));
	border-radius: 999px;
	color: var(--oku-flavour-filter-off, var(--flavour-review-full));
	box-shadow: none;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.elementor-widget-nav-menu.oku-flavour-menu .elementor-nav-menu > .menu-item:not(.current-menu-item):not(.current-menu-ancestor) > a.elementor-item:hover,
.elementor-widget-nav-menu.oku-flavour-menu .elementor-nav-menu > .menu-item:not(.current-menu-item):not(.current-menu-ancestor) > a.elementor-item:focus {
	border-color: var(--oku-flavour-filter-off, var(--flavour-review-full));
	background: color-mix(in srgb, var(--oku-flavour-filter-off, var(--flavour-review-full)) 8%, #fff);
	color: var(--oku-flavour-filter-off, var(--flavour-review-full));
}

.elementor-widget-nav-menu.oku-flavour-menu .elementor-nav-menu > .menu-item.current-menu-item > a.elementor-item,
.elementor-widget-nav-menu.oku-flavour-menu .elementor-nav-menu > .menu-item.current-menu-ancestor > a.elementor-item,
.elementor-widget-nav-menu.oku-flavour-menu .elementor-nav-menu a.elementor-item.elementor-item-active {
	background: var(--oku-flavour-filter-on, var(--flavour-review-full));
	border-color: var(--oku-flavour-filter-on, var(--flavour-review-full));
	color: #fff;
}

.elementor-widget-nav-menu.oku-flavour-menu .elementor-nav-menu a.elementor-item:focus-visible {
	outline: 2px solid var(--oku-flavour-filter-off, var(--flavour-review-full));
	outline-offset: 3px;
}

/* Dropdown / mobile clone of the same menu */
.elementor-widget-nav-menu.oku-flavour-menu .elementor-nav-menu--dropdown .elementor-nav-menu {
	flex-direction: column;
	align-items: stretch;
}

.elementor-widget-nav-menu.oku-flavour-menu .elementor-nav-menu--dropdown a.elementor-item {
	justify-content: center;
}

@media (max-width: 767px) {
	.elementor-widget-nav-menu.oku-flavour-menu .elementor-nav-menu {
		gap: 0.35rem 0.4rem;
	}

	.elementor-widget-nav-menu.oku-flavour-menu .elementor-nav-menu a.elementor-item {
		padding: 0.3rem 0.8rem;
		font-size: 0.75rem;
	}
}

/* -------------------------------------------------------------------------
   Main header nav — top-level links only (not sub-menu, not oku-flavour-menu)
   Desktop: dark text · Hover: white text, no fill · Current: black bg + white text
   Mobile dropdown (top-level, not flavour pills): white text
   Elementor: widget Style → Space Between sets --e-nav-menu-horizontal-menu-item-margin
   ------------------------------------------------------------------------- */

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) {
	--oku-main-nav-item-margin: 0.85rem;
}

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .elementor-nav-menu--layout-horizontal .elementor-nav-menu > .menu-item:not(:first-child) > a.elementor-item {
	margin-inline-start: var(--e-nav-menu-horizontal-menu-item-margin, var(--oku-main-nav-item-margin)) !important;
}

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .elementor-nav-menu--layout-horizontal .elementor-nav-menu > .menu-item:not(:last-child) > a.elementor-item {
	margin-inline-end: var(--e-nav-menu-horizontal-menu-item-margin, var(--oku-main-nav-item-margin)) !important;
}

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .elementor-nav-menu--main .elementor-nav-menu > .menu-item > a.elementor-item,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item > a.elementor-item {
	display: inline-flex;
	align-items: center;
	padding: 0.25em 0.65em;
	background-color: transparent !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .elementor-nav-menu--main .elementor-nav-menu > .menu-item > a.elementor-item {
	color: #000 !important;
}

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item {
	display: block;
	width: 100%;
}

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item > a.elementor-item {
	display: flex !important;
	width: 100%;
	box-sizing: border-box;
	color: #fff !important;
	padding: 0.85em 1em !important;
}

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item:hover > a.elementor-item,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item.highlighted > a.elementor-item,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item.current-menu-item:hover > a.elementor-item,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item.current-menu-ancestor:hover > a.elementor-item,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item.current-menu-item.highlighted > a.elementor-item,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item.current-menu-ancestor.highlighted > a.elementor-item {
	background-color: var(--oku-brand-red, #e30613) !important;
	color: #fff !important;
}

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .elementor-nav-menu--main .elementor-nav-menu > .menu-item:not(.current-menu-item):not(.current-menu-ancestor):hover > a.elementor-item,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .elementor-nav-menu--main .elementor-nav-menu > .menu-item:not(.current-menu-item):not(.current-menu-ancestor).highlighted > a.elementor-item {
	background-color: transparent !important;
	color: #fff !important;
}

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .elementor-nav-menu--main .elementor-nav-menu > .menu-item.current-menu-item > a.elementor-item,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .elementor-nav-menu--main .elementor-nav-menu > .menu-item.current-menu-ancestor > a.elementor-item,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .elementor-nav-menu--main .elementor-nav-menu > .menu-item > a.elementor-item.elementor-item-active,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item.current-menu-item > a.elementor-item,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item.current-menu-ancestor > a.elementor-item,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item > a.elementor-item.elementor-item-active {
	background-color: #000 !important;
	color: #fff !important;
}

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .elementor-nav-menu--main .elementor-nav-menu > .menu-item.current-menu-item > a.elementor-item:hover,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .elementor-nav-menu--main .elementor-nav-menu > .menu-item.current-menu-ancestor > a.elementor-item:hover {
	background-color: #000 !important;
	color: #fff !important;
}

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .elementor-nav-menu--main .elementor-nav-menu > .menu-item > a.elementor-item .sub-arrow,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .elementor-nav-menu--main .elementor-nav-menu > .menu-item > a.elementor-item .sub-arrow svg,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item > a.elementor-item .sub-arrow,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu > .menu-item > a.elementor-item .sub-arrow svg {
	fill: currentColor;
}

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .elementor-nav-menu--main .elementor-nav-menu > .menu-item > a.elementor-item:focus-visible {
	outline: 2px solid var(--oku-brand-red);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Header sub-menus (Buy products, Taste pages) — flavour hover / active, not oku-flavour-menu lozenges
   .flavours-{slug} via nav_menu_css_class (depth ≥ 1; product + taste-* URLs).
   ------------------------------------------------------------------------- */

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .sub-menu .menu-item[class*="flavours-"] {
	--oku-flavour-filter-off: var(--flavour-review-full);
	--oku-flavour-filter-on: var(--flavour-review-full);
}

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .sub-menu .menu-item[class*="flavours-"] > a.elementor-sub-item {
	font-family: "Barlow", var(--e-global-typography-primary-font-family, sans-serif) !important;
	font-weight: 600;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0.65em 1.25em;
	color: var(--oku-flavour-filter-off, var(--flavour-review-full)) !important;
	background-color: transparent !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .sub-menu .menu-item[class*="flavours-"]:hover > a.elementor-sub-item,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .sub-menu .menu-item[class*="flavours-"].highlighted > a.elementor-sub-item,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .sub-menu .menu-item[class*="flavours-"].current-menu-item > a.elementor-sub-item,
.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .sub-menu .menu-item[class*="flavours-"] > a.elementor-sub-item.elementor-item-active {
	background-color: var(--oku-flavour-filter-on, var(--flavour-review-full)) !important;
	color: #fff !important;
}

.elementor-location-header .elementor-widget-nav-menu:not(.oku-flavour-menu) .sub-menu .menu-item[class*="flavours-"] > a.elementor-sub-item:focus-visible {
	outline: 2px solid var(--oku-flavour-filter-off, var(--flavour-review-full));
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Jet Maps listing popup — replace Google’s grey close.gif
   ------------------------------------------------------------------------- */

.jet-map-listing .jet-map-box {
	position: relative;
}

.jet-map-listing .jet-map-box::before {
	content: "";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 14px;
	height: 14px;
	z-index: 10000;
	pointer-events: none;
	background:
		linear-gradient(#fff, #fff) 50% 50% / 100% 2px no-repeat,
		linear-gradient(#fff, #fff) 50% 50% / 2px 100% no-repeat;
	transform: rotate(45deg);
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.jet-map-listing .jet-map-box:has(img.jet-map-close:hover)::before {
	opacity: 0.75;
	transform: rotate(45deg) scale(1.12);
}

.jet-map-listing .jet-map-box img.jet-map-close {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 28px;
	height: 28px;
	margin: 0 !important;
	padding: 0;
	float: none;
	opacity: 0;
	cursor: pointer;
	z-index: 10001;
}

/* -------------------------------------------------------------------------
   Shared card chrome
   ------------------------------------------------------------------------- */

.product-info-grid {
	position: relative;
	padding-left: 16px;
}

.product-info-grid::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: var(--flavour-bar);
}
.delivery-price-note::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: var(--flavour-bar, var(--oku-ppm-mint));
}

.price-grid span.woocommerce-Price-amount.amount {
	display: inline-block;
	background-image: var(--flavour-price) !important;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
}

.price-grid .woocommerce-Price-currencySymbol {
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	background: none !important;
}

/* Shop grid + taste/static pages: flash art from --flavour-buy-button on body or .flavours-* */
.buy-button-grid,
.oku-buy-button {
	width: 100px;
	height: 100px;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	flex-shrink: 0;
	display: block;
	background-color: transparent;
	background-image: var(--flavour-buy-button);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	text-decoration: none;
	border: none;
}

a.buy-button-grid,
a.oku-buy-button,
.elementor-button.buy-button-grid,
.elementor-button.oku-buy-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	cursor: pointer;
	background-color: transparent !important;
	background-image: var(--flavour-buy-button) !important;
}

.e-con.buy-button-grid,
.e-con.oku-buy-button,
.elementor-element.buy-button-grid,
.elementor-element.oku-buy-button {
	min-width: 100px;
	min-height: 100px;
}

.buy-button-grid span,
.oku-buy-button span {
	display: block;
	text-align: center;
	width: 100px;
	padding: 38px 0 0 0;
	color: #fff;
}

/* Single product Add to Cart widget — hide the "In stock" line; keep Out of stock */
.elementor-widget-woocommerce-product-add-to-cart .stock.in-stock {
	display: none;
}

/* Cart / mini-cart — uncropped bottle thumbs (okushal-cart-bottle in flavours.php) */
.woocommerce-cart-form td.product-thumbnail,
.woocommerce-cart-form td.product-thumbnail a {
	display: block;
	text-align: center;
}

.woocommerce-cart-form td.product-thumbnail img.okushal-cart-bottle-thumb,
.woocommerce-mini-cart img.okushal-cart-bottle-thumb,
.elementor-menu-cart__product-image img.okushal-cart-bottle-thumb {
	width: auto !important;
	max-width: 80px;
	height: auto !important;
	max-height: 160px;
	object-fit: contain;
}

/* Elementor menu cart: don’t clip tall thumbs in the image column */
.elementor-menu-cart__product-image {
	align-self: start;
	overflow: visible;
}

.elementor-menu-cart__product-image a {
	display: flex;
	justify-content: center;
	width: 100%;
}

.elementor-menu-cart__product-image img {
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: 160px;
	object-fit: contain;
}

/* Mini-cart: keep title + price together, vertically centred on the bottle */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product {
	position: relative;
	grid-template-rows: 1fr auto auto 1fr !important;
	row-gap: 0.2em;
	border-bottom: none !important;
	border-width: 0 !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-image {
	grid-row: 1 / -1;
	align-self: center;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name {
	grid-row: 2;
	align-self: end;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price {
	grid-row: 3;
	align-self: start !important;
	padding-top: 0;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove {
	top: 50% !important;
	bottom: auto !important;
	inset-inline-end: 10px;
	transform: translateY(-50%);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 9px;
	pointer-events: none;
	background-color: var(--divider-color, var(--e-global-color-text, #554742));
	-webkit-mask-image: var(--tribal-dots);
	mask-image: var(--tribal-dots);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
	-webkit-mask-position: center;
	mask-position: center;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal {
	position: relative;
	border: none !important;
	border-width: 0 !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal::before,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 9px;
	pointer-events: none;
	background-color: var(--subtotal-divider-color, var(--e-global-color-text, #554742));
	-webkit-mask-image: var(--tribal-dots);
	mask-image: var(--tribal-dots);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
	-webkit-mask-position: center;
	mask-position: center;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal::before {
	top: 0;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal::after {
	bottom: 0;
}

/*
 * Product & Taste page reviews — Advanced → CSS Classes: product-reviews-box
 * on the container OR Post Comments widget.
 * Colours: body product_cat-* / flavours-* (products, recipes, taste-* pages via flavours.php).
 */
.elementor-element.product-reviews-box.e-con,
.elementor-widget-post-comments.product-reviews-box > .elementor-widget-container {
	background-color: color-mix(
		in srgb,
		var(--flavour-review-tint, var(--oku-sand)) 10%,
		transparent
	) !important;
	border: 1px solid var(--flavour-review-full, var(--e-global-color-text, #554742)) !important;
	border-radius: 20px;
	box-sizing: border-box;
	padding: 30px;
}

.product-reviews-box .woocommerce-Reviews-title {
	color: var(--flavour-review-full, var(--e-global-color-text, #554742));
	font-weight: 700;
	text-transform: uppercase;
}

.product-reviews-box .woocommerce-Reviews .comment-reply-title {
	color: var(--e-global-color-text, #554742);
}

.product-reviews-box #commentform label {
	color: var(--oku-text-muted, var(--e-global-color-text, #554742));
}

.product-reviews-box #commentform input[type="text"],
.product-reviews-box #commentform input[type="email"],
.product-reviews-box #commentform textarea,
.product-reviews-box #commentform select#rating {
	background-color: #ffffff;
	border: 1px solid var(--flavour-review-full, var(--e-global-color-text, #554742));
	border-radius: 8px;
	outline: none;
}

.product-reviews-box #commentform input[type="text"]:focus,
.product-reviews-box #commentform input[type="email"]:focus,
.product-reviews-box #commentform textarea:focus,
.product-reviews-box #commentform select#rating:focus {
	border-color: var(--flavour-review-full, var(--e-global-color-text, #554742));
	outline: none;
	box-shadow: none;
}

.product-reviews-box {
	--oku-review-glass-empty: url("/wp-content/uploads/2026/09/oku-review-glass-1.svg");
	--oku-review-glass-full: url("/wp-content/uploads/2026/09/oku-review-glass-2.svg");
	--oku-review-glass-w: 0.85em;
	--oku-review-glass-h: 1.25em;
}

.product-reviews-box #commentform .comment-form-rating {
	min-height: 2.2em;
}

.product-reviews-box #commentform .comment-form-rating select#rating {
	display: none !important;
}

.product-reviews-box #commentform .comment-form-rating .stars a {
	position: relative;
	display: inline-block;
	width: var(--oku-review-glass-w);
	height: var(--oku-review-glass-h);
	margin-right: 0.2em;
	font-size: 26px;
	line-height: 1;
	text-indent: -999em;
	text-decoration: none;
	overflow: hidden;
	color: transparent;
}

.product-reviews-box #commentform .comment-form-rating .stars a::before {
	content: "" !important;
	font-family: inherit !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: 0;
	background-color: var(--flavour-review-full, var(--e-global-color-accent, #dac565));
	background-image: none;
	-webkit-mask-image: var(--oku-review-glass-empty);
	mask-image: var(--oku-review-glass-empty);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.product-reviews-box #commentform .comment-form-rating .stars:hover a::before,
.product-reviews-box #commentform .comment-form-rating .stars.selected a.active::before,
.product-reviews-box #commentform .comment-form-rating .stars.selected a:not(.active)::before {
	-webkit-mask-image: var(--oku-review-glass-full);
	mask-image: var(--oku-review-glass-full);
}

.product-reviews-box #commentform .comment-form-rating .stars:hover a:hover ~ a::before,
.product-reviews-box #commentform .comment-form-rating .stars.selected a.active ~ a::before {
	-webkit-mask-image: var(--oku-review-glass-empty);
	mask-image: var(--oku-review-glass-empty);
}

.product-reviews-box .star-rating {
	display: inline-block;
	float: none;
	overflow: hidden;
	position: relative;
	font-family: inherit;
	font-size: 26px;
	width: calc(5 * var(--oku-review-glass-w));
	height: var(--oku-review-glass-h);
	line-height: 1;
}

.product-reviews-box .star-rating span {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	padding-top: 1.5em;
	color: transparent;
}

.product-reviews-box .star-rating::before,
.product-reviews-box .star-rating span::before {
	content: "" !important;
	font-family: inherit !important;
	position: absolute;
	top: 0;
	left: 0;
	width: calc(5 * var(--oku-review-glass-w));
	height: 100%;
	background-color: var(--flavour-review-full, var(--e-global-color-accent, #dac565));
	background-image: none;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: var(--oku-review-glass-w) var(--oku-review-glass-h);
	mask-size: var(--oku-review-glass-w) var(--oku-review-glass-h);
}

.product-reviews-box .star-rating::before {
	-webkit-mask-image: var(--oku-review-glass-empty);
	mask-image: var(--oku-review-glass-empty);
}

.product-reviews-box .star-rating span::before {
	-webkit-mask-image: var(--oku-review-glass-full);
	mask-image: var(--oku-review-glass-full);
}

.product-reviews-box .commentlist,
.product-reviews-box ol.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.product-reviews-box .commentlist img.avatar {
	display: none;
}

.product-reviews-box .commentlist .comment-text,
.woocommerce .product-reviews-box #reviews #comments ol.commentlist li .comment-text {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 0 0 1.25rem;
	padding: 1.25rem 1.5rem;
	background-color: #fff;
	border: 1px solid var(--flavour-review-full, var(--e-global-color-text, #554742));
	border-color: var(--flavour-review-full, var(--e-global-color-text, #554742));
	border-radius: 8px;
	box-sizing: border-box;
}

.product-reviews-box .commentlist .comment-text .meta {
	order: 1;
	flex: 1 1 auto;
	margin: 0;
}

.product-reviews-box .commentlist .comment-text .star-rating {
	order: 2;
	float: none;
	margin: 0;
	font-size: 18px;
}

.product-reviews-box .commentlist .comment-text .description {
	order: 3;
	flex: 1 1 100%;
	margin: 0.35rem 0 0;
}

.product-reviews-box #commentform .form-submit .submit,
.product-reviews-box #commentform input#submit.submit {
	background-color: var(--flavour-review-full, var(--e-global-color-text, #554742)) !important;
	border: 0 !important;
	border-radius: 999px;
	color: #fff !important;
	padding: 0.65em 2em;
}

.product-reviews-box #commentform .form-submit .submit:hover {
	filter: brightness(0.92);
}

/*
 * Recolour an Image-widget SVG with --flavour-review-full (mask; black/dark SVG works best).
 * Advanced → CSS Classes: oku-flavour-svg
 * Optional override if the file path differs:
 *   --oku-flavour-svg: url("/wp-content/uploads/.../your.svg");
 */
.elementor-widget-image.oku-flavour-svg {
	--oku-flavour-svg: url("/wp-content/uploads/2026/09/free-deliver-3.svg");
}

.elementor-widget-image.oku-flavour-svg .elementor-widget-container {
	position: relative;
	line-height: 0;
	background-color: var(--flavour-review-full, var(--e-global-color-text, #554742));
	-webkit-mask-image: var(--oku-flavour-svg);
	mask-image: var(--oku-flavour-svg);
	/* Firefox treats external SVGs as luminance masks; black artwork then disappears. */
	-webkit-mask-mode: alpha;
	mask-mode: alpha;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.elementor-widget-image.oku-flavour-svg img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0;
	pointer-events: none;
}

/*
 * Contact Form 7 — Advanced → CSS Classes: oku-contact-form
 * on the Shortcode widget or its parent container.
 */
.oku-contact-form.e-con > .e-con-inner > .e-con,
.oku-contact-form.e-con > .e-con.e-child {
	background-color: color-mix(in srgb, var(--oku-sand, #FFF5DD) 90%, transparent) !important;
}
.oku-contact-form .wpcf7,
.oku-contact-form .wpcf7-form,
.oku-contact-form .wpcf7-form p,
.oku-contact-form .wpcf7-form label,
.oku-contact-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.oku-contact-form .wpcf7-form label {
	padding-bottom: 0.75em;
}

.oku-contact-form .wpcf7-form-control-wrap {
	margin-top: 0.4em;
}

.oku-contact-form .wpcf7-form input.wpcf7-text,
.oku-contact-form .wpcf7-form input.wpcf7-email,
.oku-contact-form .wpcf7-form input.wpcf7-tel,
.oku-contact-form .wpcf7-form input.wpcf7-url,
.oku-contact-form .wpcf7-form input.wpcf7-number,
.oku-contact-form .wpcf7-form textarea.wpcf7-textarea,
.oku-contact-form .wpcf7-form select.wpcf7-select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid var(--oku-gp-tan, #D7994E);
	border-radius: 8px;
	outline: none;
}

.oku-contact-form .wpcf7-form input.wpcf7-text:focus,
.oku-contact-form .wpcf7-form input.wpcf7-email:focus,
.oku-contact-form .wpcf7-form input.wpcf7-tel:focus,
.oku-contact-form .wpcf7-form input.wpcf7-url:focus,
.oku-contact-form .wpcf7-form input.wpcf7-number:focus,
.oku-contact-form .wpcf7-form textarea.wpcf7-textarea:focus,
.oku-contact-form .wpcf7-form select.wpcf7-select:focus {
	border-color: var(--oku-gp-tan, #D7994E);
	outline: none;
	box-shadow: none;
}

.oku-contact-form .wpcf7-form p:has(input.wpcf7-submit) {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	margin-right: 0;
	padding-right: 0;
	gap: 0;
}

.oku-contact-form .wpcf7-form .wpcf7-spinner {
	order: -1;
}

.oku-contact-form .wpcf7-form input.wpcf7-submit {
	background-color: var(--oku-link-static, #D46511);
	border: 0;
	border-radius: 0;
	color: #fff;
	font-family: "Barlow", var(--e-global-typography-primary-font-family, sans-serif);
	font-weight: 700;
	padding: 0.65em 2em;
}

.oku-contact-form .wpcf7-form input.wpcf7-submit:hover,
.oku-contact-form .wpcf7-form input.wpcf7-submit:focus {
	background-color: var(--oku-link-hover, #A44319);
	color: #fff;
}

/*
 * Product Nested Tabs — Advanced → CSS Classes: product-flavour-tabs
 * Inactive: full tint. Active + hover: flavour full.
 */
.elementor-widget-n-tabs.product-flavour-tabs {
	--oku-tab-pointer-size: 13px;
	--n-tabs-gap: calc(var(--oku-tab-pointer-size) + 10px);
	--n-tabs-title-background-color: var(
		--flavour-review-tint,
		var(--oku-sand)
	);
	--n-tabs-title-background-color-hover: var(
		--flavour-review-full,
		var(--e-global-color-text, #554742)
	);
	--n-tabs-title-background-color-active: var(
		--flavour-review-full,
		var(--e-global-color-text, #554742)
	);
	--n-tabs-title-color-hover: #fff;
	--n-tabs-title-color-active: #fff;
	--n-tabs-icon-color-hover: #fff;
	--n-tabs-icon-color-active: #fff;
}

/* Active tab: downward pointer (same colour as active tab / --flavour-review-full) */
.elementor-widget-n-tabs.product-flavour-tabs .e-n-tabs-heading {
	overflow: visible;
	padding-block-end: var(--oku-tab-pointer-size);
}

.elementor-widget-n-tabs.product-flavour-tabs
	.e-n-tab-title[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(-1 * var(--oku-tab-pointer-size));
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: var(--oku-tab-pointer-size) solid transparent;
	border-right: var(--oku-tab-pointer-size) solid transparent;
	border-top: var(--oku-tab-pointer-size) solid
		var(
			--flavour-review-full,
			var(--n-tabs-title-background-color-active, #554742)
		);
	pointer-events: none;
	z-index: 2;
}

/*
 * Product card radial tint (bottom-right → fade out).
 * Elementor container → Advanced → CSS Classes: flavour-card-radial
 * Remove the container’s Elementor gradient background when using this.
 *
 * JetEngine shop cards: listing item already has product_cat-{slug} — only add
 * flavour-card-radial on this container.
 *
 * Static shop columns (Fab Four): add flavour-card-radial plus the matching slug on
 * the same container, e.g. product_cat-ginger-and-pineapple
 *
 * Recipe listing (alt-image-rows): tint bottom-right on odd rows, bottom-left on even
 * (same swap as bg-grad-down).
 */
.flavour-card-radial {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	--flavour-radial-at: 100% 100%;
}

.flavour-card-radial::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		circle at var(--flavour-radial-at),
		var(--flavour-review-tint, var(--oku-sand)) 0%,
		#ffffff 38%,
		transparent 55%
	);
}

.flavour-card-radial > * {
	position: relative;
}

/*
 * Recipe garnish: paint radial on the card (not only ::before) so multiply can
 * use the gradient as backdrop without a solid tint patch behind the img.
 */
.flavour-card-radial:has(.flavour-image-multiply) {
	isolation: auto;
	overflow: hidden;
	background-color: #fff;
	background-image: radial-gradient(
		circle at var(--flavour-radial-at),
		var(--flavour-review-tint, var(--oku-sand)) 0%,
		#ffffff 38%,
		transparent 55%
	);
}

.flavour-card-radial:has(.flavour-image-multiply)::before {
	content: none;
}

/*
 * Recipe listing only: softer card radial (50% tint strength). Shop / reviews unchanged.
 * Listing Grid → alt-image-rows
 */
.alt-image-rows .flavour-card-radial {
	--flavour-recipe-radial-tint: color-mix(
		in srgb,
		var(--flavour-review-tint, var(--oku-sand)) 50%,
		transparent
	);
	/* Oval tint: center below the corner + shorter ellipse → clearer sooner at top */
	--flavour-radial-at-x: 100%;
	--flavour-radial-at-y: calc(100% + 12px);
	--flavour-recipe-radial-shape: 114% 88%;
}

.alt-image-rows .flavour-card-radial::before {
	background: radial-gradient(
		ellipse var(--flavour-recipe-radial-shape) at var(--flavour-radial-at-x) var(--flavour-radial-at-y),
		var(--flavour-recipe-radial-tint) 0%,
		#ffffff 38%,
		transparent 55%
	);
}

.alt-image-rows .flavour-card-radial:has(.flavour-image-multiply) {
	background-image: radial-gradient(
		ellipse var(--flavour-recipe-radial-shape) at var(--flavour-radial-at-x) var(--flavour-radial-at-y),
		var(--flavour-recipe-radial-tint) 0%,
		#ffffff 38%,
		transparent 55%
	);
}

/* PNG grad-down on listing cards (if used on the same container) */
.alt-image-rows .bg-grad-down {
	--oku-bg-grad-down-position-y: -6px;
	--oku-bg-grad-down-size-y: 196px;
}

/*
 * Secondary recipe garnish (dynamic image #2): multiply into the card radial tint.
 * Add class flavour-image-multiply on the Elementor container that wraps only
 * that image (not the main photo). Leave backgrounds empty on that column.
 */
.flavour-image-multiply.e-con,
.flavour-image-multiply.e-con > .e-con-inner {
	--background-color: transparent !important;
	--background-overlay: none !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.flavour-image-multiply .jet-listing-dynamic-image {
	display: inline-block;
	width: fit-content;
	max-width: 100%;
	background: transparent !important;
	background-color: transparent !important;
}

.flavour-image-multiply .elementor-widget-image .elementor-widget-container,
.flavour-image-multiply .elementor-widget-jet-listing-dynamic-image,
.flavour-image-multiply .elementor-widget-jet-listing-dynamic-image .elementor-widget-container,
.flavour-image-multiply .elementor-widget-image figure,
.flavour-image-multiply .jet-listing-dynamic-image__figure {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}

.flavour-image-multiply .elementor-widget-image img,
.flavour-image-multiply .jet-listing-dynamic-image__img {
	display: block;
	border-radius: 0 !important;
	mix-blend-mode: multiply;
}

.bg-grad {
	background-image: var(--flavour-bg-grad);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.bg-grad-down {
	position: relative;
	background-image: none;
	--oku-bg-grad-down-position-x: 0;
	--oku-bg-grad-down-position-y: 125px;
	--oku-bg-grad-down-size-x: 100%;
	--oku-bg-grad-down-size-y: 200px;
}

.bg-grad-down::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--flavour-bg-grad-down);
	background-repeat: no-repeat;
	background-position: var(--oku-bg-grad-down-position-x) var(--oku-bg-grad-down-position-y);
	background-size: var(--oku-bg-grad-down-size-x) var(--oku-bg-grad-down-size-y);
}

.bg-grad-down > * {
	position: relative;
	z-index: 1;
}

:root {
	--tribal-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet' overflow='visible' height='100%' viewBox='0 0 126 26' fill='black' stroke='none'%3E%3Cpath d='M3,10.2c2.6,0,2.6,2,2.6,3.2S4.4,16.5,3,16.5s-3-1.4-3-3.2S0.4,10.2,3,10.2z M18.8,10.2c1.7,0,3.2,1.4,3.2,3.2s-1.4,3.2-3.2,3.2c-1.7,0-3.2-1.4-3.2-3.2S17,10.2,18.8,10.2z M34.6,10.2c1.5,0,2.6,1.4,2.6,3.2s-0.5,3.2-1.9,3.2c-1.5,0-3.4-1.4-3.4-3.2S33.1,10.2,34.6,10.2z M50.5,10.2c1.7,0,3.2,1.4,3.2,3.2s-1.4,3.2-3.2,3.2c-1.7,0-3.3-0.9-3.3-2.6S48.7,10.2,50.5,10.2z M66.2,10.2c1.5,0,3.4,1.4,3.4,3.2s-1.9,3.2-3.4,3.2c-1.5,0-2.6-0.4-2.6-2.1S64.8,10.2,66.2,10.2z M82.2,10.2c1.7,0.8,2.6,1.4,2.6,3.2s-0.1,3.2-1.6,3.2c-1.5,0-3.7-1.4-3.7-3.2S80.5,9.4,82.2,10.2zM98.6,10.2c1.5,0,2.6,0.4,2.6,2.1s-1.2,4.2-2.6,4.2c-1.5,0-3.7-0.4-3.7-2.1S97.1,10.2,98.6,10.2z M113.4,10.2c1.2,0,2.2,0.9,2.2,3.2s-0.1,3.2-1.3,3.2s-3.1-1.4-3.1-3.2S112.2,10.2,113.4,10.2z'/%3E%3C/svg%3E");
	--tribal-dots-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet' overflow='visible' width='100%' viewBox='0 0 26 126' fill='black' stroke='none'%3E%3Cg transform='translate(26 0) rotate(90)'%3E%3Cpath d='M3,10.2c2.6,0,2.6,2,2.6,3.2S4.4,16.5,3,16.5s-3-1.4-3-3.2S0.4,10.2,3,10.2z M18.8,10.2c1.7,0,3.2,1.4,3.2,3.2s-1.4,3.2-3.2,3.2c-1.7,0-3.2-1.4-3.2-3.2S17,10.2,18.8,10.2z M34.6,10.2c1.5,0,2.6,1.4,2.6,3.2s-0.5,3.2-1.9,3.2c-1.5,0-3.4-1.4-3.4-3.2S33.1,10.2,34.6,10.2z M50.5,10.2c1.7,0,3.2,1.4,3.2,3.2s-1.4,3.2-3.2,3.2c-1.7,0-3.3-0.9-3.3-2.6S48.7,10.2,50.5,10.2z M66.2,10.2c1.5,0,3.4,1.4,3.4,3.2s-1.9,3.2-3.4,3.2c-1.5,0-2.6-0.4-2.6-2.1S64.8,10.2,66.2,10.2z M82.2,10.2c1.7,0.8,2.6,1.4,2.6,3.2s-0.1,3.2-1.6,3.2c-1.5,0-3.7-1.4-3.7-3.2S80.5,9.4,82.2,10.2zM98.6,10.2c1.5,0,2.6,0.4,2.6,2.1s-1.2,4.2-2.6,4.2c-1.5,0-3.7-0.4-3.7-2.1S97.1,10.2,98.6,10.2z M113.4,10.2c1.2,0,2.2,0.9,2.2,3.2s-0.1,3.2-1.3,3.2s-3.1-1.4-3.1-3.2S112.2,10.2,113.4,10.2z'/%3E%3C/g%3E%3C/svg%3E");
}

/*
 * Vertical tribal-dots rail.
 * Advanced → CSS Classes: tribal-divider
 * Colour follows --flavour-review-full on flavour pages.
 */
.tribal-divider {
	--tribal-divider-color: var(--flavour-review-full, var(--oku-gp-khaki));
	--tribal-divider-size: 10px;
	position: relative;
}

.tribal-divider::before {
	content: "";
	position: absolute;
	z-index: 2;
	pointer-events: none;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--tribal-divider-size);
	background-color: var(--tribal-divider-color);
	-webkit-mask-image: var(--tribal-dots-v);
	mask-image: var(--tribal-dots-v);
	-webkit-mask-repeat: repeat-y;
	mask-repeat: repeat-y;
	-webkit-mask-size: 100% auto;
	mask-size: 100% auto;
	-webkit-mask-position: center top;
	mask-position: center top;
}

@media (max-width: 1024px) {
	.tribal-divider::before {
		display: none;
		content: none;
	}
}

/*
 * Elementor Divider (tribal / pattern): ignore the widget colour.
 * Uses --flavour-review-full from product_cat-* / flavours-* on the page or card.
 * Optional class flavour-divider if you want the same on a divider outside those.
 */
.product_cat-prickly-pear-and-mint .elementor-element.elementor-widget-divider--separator-type-pattern,
.flavours-prickly-pear-and-mint .elementor-element.elementor-widget-divider--separator-type-pattern,
.product_cat-ginger-and-pineapple .elementor-element.elementor-widget-divider--separator-type-pattern,
.flavours-ginger-and-pineapple .elementor-element.elementor-widget-divider--separator-type-pattern,
.product_cat-pomegranate-lime-and-lemon .elementor-element.elementor-widget-divider--separator-type-pattern,
.flavours-pomegranate-lime-and-lemon .elementor-element.elementor-widget-divider--separator-type-pattern,
.product_cat-raspberry-and-naartjie .elementor-element.elementor-widget-divider--separator-type-pattern,
.flavours-raspberry-and-naartjie .elementor-element.elementor-widget-divider--separator-type-pattern,
.elementor-element.elementor-widget-divider.flavour-divider {
	--divider-color: var(--flavour-review-full) !important;
}

/* Shop 2x2: add class "tribal-cross" on the product Listing Grid widget */
.tribal-cross .jet-listing-grid__items {
	position: relative;
	overflow: hidden;
}

.tribal-cross .jet-listing-grid__items::before,
.tribal-cross .jet-listing-grid__items::after {
	content: "";
	position: absolute;
	z-index: 2;
	pointer-events: none;
	height: 9px;
	background-color: var(--e-global-color-text, #554742);
	-webkit-mask-image: var(--tribal-dots);
	mask-image: var(--tribal-dots);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
	-webkit-mask-position: center;
	mask-position: center;
}

.tribal-cross .jet-listing-grid__items::after {
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.tribal-cross .jet-listing-grid__items::before {
	left: 50%;
	top: 50%;
	width: 200%;
	transform: translate(-50%, -50%) rotate(90deg);
}

/*
 * Jet Dynamic Field → Display: inline wraps HTML in inline-flex (row), so multiple
 * block-editor <p class="wp-block-paragraph"> sit side-by-side. Stack them instead.
 */
.jet-listing-dynamic-field.display-inline:has(.wp-block-paragraph) {
	display: block;
	width: 100%;
	max-width: 100%;
}

.jet-listing-dynamic-field.display-inline .jet-listing-dynamic-field__inline-wrap:has(.wp-block-paragraph) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
}

.jet-listing-dynamic-field.display-inline
	.jet-listing-dynamic-field__inline-wrap:has(.wp-block-paragraph)
	p {
	width: 100%;
	max-width: 100%;
}

.jet-listing-dynamic-field.display-inline
	.jet-listing-dynamic-field__inline-wrap:has(.wp-block-paragraph)
	p:empty {
	display: none;
}

/*
 * Recipe title 3-tone bar (uploads/2026/09/flavbar-25-*.svg)
 * Listing Grid → Advanced → CSS Classes: alt-image-rows
 * Odd rows: bar before title · Even rows: bar after title
 */
.alt-image-rows .flavour-card-radial h2.jet-listing-dynamic-field__content {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	color: var(--title-1, inherit);
}

.alt-image-rows
	.jet-listing-grid__item[class*="flavours-"]
	.flavour-card-radial
	h2.jet-listing-dynamic-field__content::before,
.alt-image-rows
	.jet-listing-grid__item[class*="flavours-"]
	.flavour-card-radial
	h2.jet-listing-dynamic-field__content::after {
	content: "";
	flex-shrink: 0;
	width: clamp(4.5rem, 12vw, 7.5rem);
	height: clamp(0.65rem, 1.8vw, 1.0625rem);
	background: var(--flavour-flavbar) center / contain no-repeat;
}

.alt-image-rows
	.jet-listing-grid__item.oku-row-odd[class*="flavours-"]
	.flavour-card-radial
	h2.jet-listing-dynamic-field__content::after {
	content: none;
	width: 0;
	height: 0;
}

.alt-image-rows
	.jet-listing-grid__item.oku-row-even[class*="flavours-"]
	.flavour-card-radial
	h2.jet-listing-dynamic-field__content::before {
	content: none;
	width: 0;
	height: 0;
}

/*
 * Recipe hero photo (main dynamic image column, not garnish multiply)
 * Mobile: square · Tablet/desktop (≥768px): portrait crop
 */
.alt-image-rows
	.flavour-card-radial
	> .e-con-inner
	> .e-con:has(> .elementor-widget-jet-listing-dynamic-image):not(
		:has(.flavour-image-multiply)
	)
	.jet-listing-dynamic-image {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.alt-image-rows
	.flavour-card-radial
	> .e-con-inner
	> .e-con:has(> .elementor-widget-jet-listing-dynamic-image):not(
		:has(.flavour-image-multiply)
	)
	.jet-listing-dynamic-image__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * Recipe hero: white O overlay. Recipes Listing Grid only (alt-image-rows) —
 * not shop / product flavour-card-radial. Skips garnish (.flavour-image-multiply).
 */
.alt-image-rows .flavour-card-radial {
	--oku-recipe-hero-o-overlay: url("/wp-content/uploads/2026/09/oku-O-white-1.svg");
}

.alt-image-rows
	.flavour-card-radial
	> .e-con-inner
	> .e-con:not(:has(.flavour-image-multiply))
	> .elementor-widget-jet-listing-dynamic-image
	.elementor-widget-container {
	position: relative;
	isolation: isolate;
}

.alt-image-rows
	.flavour-card-radial
	> .e-con-inner
	> .e-con:not(:has(.flavour-image-multiply))
	> .elementor-widget-jet-listing-dynamic-image
	.jet-listing-dynamic-image {
	position: relative;
	z-index: 0;
}

.alt-image-rows
	.flavour-card-radial
	> .e-con-inner
	> .e-con:not(:has(.flavour-image-multiply))
	> .elementor-widget-jet-listing-dynamic-image
	.elementor-widget-container::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: var(--oku-recipe-hero-o-overlay) center / 88% no-repeat;
	opacity: 0.5;
}

.flavour-image-multiply .elementor-widget-jet-listing-dynamic-image .elementor-widget-container::after {
	content: none !important;
}

@media (min-width: 768px) {
	/*
	 * Garnish column: bottom of card content area, 50px inset (all rows).
	 * Parent row must stretch so “bottom” matches the hero column height.
	 */
	.alt-image-rows .flavour-card-radial > .e-con-inner {
		align-items: stretch !important;
	}

	.alt-image-rows
		.flavour-card-radial
		> .e-con-inner
		> .e-con:has(.jet-listing-dynamic-field):not(:has(> .elementor-widget-jet-listing-dynamic-image)) {
		align-self: stretch !important;
	}

	.alt-image-rows .flavour-card-radial .e-con:has(> .flavour-image-multiply):has(.jet-listing-dynamic-field) {
		align-items: stretch !important;
	}

	.alt-image-rows
		.flavour-card-radial
		.e-con:has(> .flavour-image-multiply):has(.jet-listing-dynamic-field)
		> *:not(.flavour-image-multiply) {
		align-self: flex-start !important;
	}

	.alt-image-rows .flavour-card-radial .flavour-image-multiply.e-con {
		--oku-recipe-garnish-bottom: 50px;
		justify-content: flex-end !important;
		--padding-bottom: var(--oku-recipe-garnish-bottom) !important;
		padding-bottom: var(--oku-recipe-garnish-bottom) !important;
	}

	.alt-image-rows .flavour-card-radial > .e-con-inner > .flavour-image-multiply.e-con {
		align-self: stretch !important;
	}

	.alt-image-rows
		.flavour-card-radial
		.e-con:has(> .flavour-image-multiply):has(.jet-listing-dynamic-field)
		> .flavour-image-multiply.e-con {
		align-self: flex-end !important;
	}

	.alt-image-rows .jet-listing-grid__item {
		overflow: visible;
	}

	.alt-image-rows .flavour-card-radial,
	.alt-image-rows .flavour-card-radial:has(.flavour-image-multiply) {
		overflow: visible;
	}

	.alt-image-rows
		.flavour-card-radial
		> .e-con-inner
		> .e-con:has(> .elementor-widget-jet-listing-dynamic-image):not(
			:has(.flavour-image-multiply)
		) {
		overflow: visible;
		align-self: start;
	}

	.alt-image-rows
		.flavour-card-radial
		> .e-con-inner
		> .e-con:has(> .elementor-widget-jet-listing-dynamic-image):not(
			:has(.flavour-image-multiply)
		)
		.jet-listing-dynamic-image {
		--oku-recipe-hero-bleed-total: 100px;
		aspect-ratio: 3 / 4;
		margin-block: calc(var(--oku-recipe-hero-bleed-total) / -2);
		position: relative;
		z-index: 2;
		border-radius: inherit;
	}
}

/* Recipe listing: add class "alt-image-rows" on the Listing Grid widget */
@media (min-width: 768px) {
	.alt-image-rows .jet-listing-grid__item.oku-row-even .bg-grad-down::before {
		transform: scaleX(-1);
	}

	.alt-image-rows .jet-listing-grid__item.oku-row-even .flavour-card-radial {
		--flavour-radial-at-x: 0%;
	}

	/*
	 * Even rows: [garnish | text] | hero (odd = hero | [text | garnish]).
	 * Template: hero col + wrapper col (79071c7) containing text + garnish siblings.
	 */
	.alt-image-rows
		.jet-listing-grid__item.oku-row-even
		.flavour-card-radial
		> .e-con-inner {
		flex-direction: row !important;
	}

	.alt-image-rows
		.jet-listing-grid__item.oku-row-even
		.flavour-card-radial
		> .e-con-inner
		> .e-con:has(.flavour-image-multiply):has(.jet-listing-dynamic-field) {
		order: 1;
		flex-direction: row-reverse !important;
		align-items: stretch;
		text-align: right;
	}

	.alt-image-rows
		.jet-listing-grid__item.oku-row-even
		.flavour-card-radial
		> .e-con-inner
		> .e-con:has(> .elementor-widget-jet-listing-dynamic-image):not(
			:has(.flavour-image-multiply)
		) {
		order: 2;
	}

	.alt-image-rows
		.jet-listing-grid__item.oku-row-even
		.flavour-card-radial
		> .e-con-inner
		> .e-con:has(.flavour-image-multiply)
		.jet-listing-dynamic-field {
		justify-content: flex-end;
	}

	.alt-image-rows
		.jet-listing-grid__item.oku-row-even
		.flavour-card-radial
		> .e-con-inner
		> .e-con:has(.flavour-image-multiply)
		.jet-listing-dynamic-field__content,
	.alt-image-rows
		.jet-listing-grid__item.oku-row-even
		.flavour-card-radial
		> .e-con-inner
		> .e-con:has(.flavour-image-multiply)
		.elementor-heading-title {
		text-align: right;
	}

	/* Garnish: Elementor uses padding-right on odd rows; mirror on even */
	.alt-image-rows
		.jet-listing-grid__item.oku-row-even
		.flavour-image-multiply.e-con {
		--padding-right: 0px !important;
		--padding-left: 50px !important;
		padding-right: 0 !important;
		padding-left: 50px !important;
	}

	/* Three direct columns (text / garnish / hero as siblings): reorder */
	.alt-image-rows
		.jet-listing-grid__item.oku-row-even
		.flavour-card-radial
		> .e-con-inner
		> .e-con:has(.jet-listing-dynamic-field):not(:has(.flavour-image-multiply)) {
		order: 1;
		text-align: right;
		align-items: flex-end;
	}

	.alt-image-rows
		.jet-listing-grid__item.oku-row-even
		.flavour-card-radial
		> .e-con-inner
		> .e-con.flavour-image-multiply,
	.alt-image-rows
		.jet-listing-grid__item.oku-row-even
		.flavour-card-radial
		> .e-con-inner
		> .e-con:has(.flavour-image-multiply):not(:has(.jet-listing-dynamic-field)) {
		order: 2;
	}

	.alt-image-rows
		.jet-listing-grid__item.oku-row-even
		.flavour-card-radial
		> .e-con-inner
		> .e-con:has(.jet-listing-dynamic-field):not(:has(.flavour-image-multiply))
		.jet-listing-dynamic-field {
		justify-content: flex-end;
	}

	.alt-image-rows
		.jet-listing-grid__item.oku-row-even
		.flavour-card-radial
		> .e-con-inner
		> .e-con:has(.jet-listing-dynamic-field):not(:has(.flavour-image-multiply))
		.jet-listing-dynamic-field__content {
		text-align: right;
	}

	/* Legacy two-column cards (no garnish): mirror row like before */
	.alt-image-rows
		.jet-listing-grid__item.oku-row-even
		.e-con-inner:not(:has(.flavour-image-multiply)) {
		flex-direction: row-reverse !important;
	}

	.alt-image-rows
		.jet-listing-grid__item.oku-row-even
		.e-con-inner:not(:has(.flavour-image-multiply))
		> .e-con:last-child {
		text-align: right;
		align-items: flex-end;
	}
}

/* -------------------------------------------------------------------------
   Prickly Pear & Mint
   oku-ppm-green / sage / mint
   ------------------------------------------------------------------------- */

.product_cat-prickly-pear-and-mint,
.flavours-prickly-pear-and-mint {
	--title-1: var(--oku-ppm-green);
	--title-2: var(--oku-ppm-green);
	--title-amp: var(--oku-pll-maroon);
	--title-3: var(--oku-ppm-mint);
	--flavour-review-full: var(--oku-ppm-flavour-full);
	--flavour-review-tint: var(--oku-ppm-flavour-tint);
	--flavour-price: linear-gradient(90deg, var(--oku-ppm-green) 10%, var(--oku-ppm-mint) 92%);
	--flavour-bar: var(--oku-ppm-mint);
	--flavour-flavbar: url("/wp-content/uploads/2026/09/flavbar-25-ppm.svg");
	--flavour-bg-grad: url("/wp-content/uploads/2026/09/prickly-pear-and-mint-bg-grad.png");
	--flavour-bg-grad-down: url("/wp-content/uploads/2026/09/prickly-pear-and-mint-bg-grad-down.png");
	--flavour-buy-button: url("/wp-content/uploads/2026/09/prickly-pear-and-mint-flash.svg");
}

/* -------------------------------------------------------------------------
   Ginger & Pineapple
   oku-gp-khaki / tan / yellow
   ------------------------------------------------------------------------- */

.product_cat-ginger-and-pineapple,
.flavours-ginger-and-pineapple {
	--title-1: var(--oku-gp-khaki);
	--title-2: var(--oku-gp-yellow);
	--title-amp: var(--oku-pll-maroon);
	--title-3: var(--oku-gp-yellow);
	--flavour-review-full: var(--oku-gp-flavour-full);
	--flavour-review-tint: var(--oku-gp-flavour-tint);
	--flavour-price: linear-gradient(90deg, var(--oku-gp-tan) 14%, var(--oku-gp-yellow) 87%);
	--flavour-bar: var(--oku-gp-yellow);
	--flavour-flavbar: url("/wp-content/uploads/2026/09/flavbar-25-gp.svg");
	--flavour-bg-grad: url("/wp-content/uploads/2026/09/ginger-pineapple-bg-grad.png");
	--flavour-bg-grad-down: url("/wp-content/uploads/2026/09/ginger-pineapple-bg-grad-down.png");
	--flavour-buy-button: url("/wp-content/uploads/2026/09/ginger-pineapple-flash.svg");
}

/* -------------------------------------------------------------------------
   Pomegranate Lime & Lemon
   oku-pll-maroon / lime / lemon
   ------------------------------------------------------------------------- */

.product_cat-pomegranate-lime-and-lemon,
.flavours-pomegranate-lime-and-lemon {
	--title-1: var(--oku-pll-maroon);
	--title-2: var(--oku-pll-lime);
	--title-amp: var(--oku-pll-maroon);
	--title-3: var(--oku-pll-lemon);
	--flavour-review-full: var(--oku-pll-flavour-full);
	--flavour-review-tint: var(--oku-pll-flavour-tint);
	--flavour-price: linear-gradient(90deg, var(--oku-pll-maroon) 20%, var(--oku-pll-lime) 56%, var(--oku-pll-lemon) 90%);
	--flavour-bar: var(--oku-pll-maroon);
	--flavour-flavbar: url("/wp-content/uploads/2026/09/flavbar-25-pll.svg");
	--flavour-bg-grad: url("/wp-content/uploads/2026/09/pomegranate-lime-lemon-bg-grad.png");
	--flavour-bg-grad-down: url("/wp-content/uploads/2026/09/pomegranate-lime-lemon-bg-grad-down.png");
	--flavour-buy-button: url("/wp-content/uploads/2026/09/pomegranate-lime-lemon-flash.svg");
}

/* -------------------------------------------------------------------------
   Raspberry & Naartjie
   oku-rn-red / magenta / orange
   ------------------------------------------------------------------------- */

.product_cat-raspberry-and-naartjie,
.flavours-raspberry-and-naartjie {
	--title-1: var(--oku-rn-red);
	--title-2: var(--oku-rn-orange);
	--title-amp: var(--oku-rn-magenta);
	--title-3: var(--oku-rn-orange);
	--flavour-review-full: var(--oku-rn-flavour-full);
	--flavour-review-tint: var(--oku-rn-flavour-tint);
	--flavour-price: linear-gradient(90deg, var(--oku-rn-red) 9%, var(--oku-rn-orange) 83%);
	--flavour-bar: var(--oku-rn-orange);
	--flavour-flavbar: url("/wp-content/uploads/2026/09/flavbar-25-rn.svg");
	--flavour-bg-grad: url("/wp-content/uploads/2026/09/raspberry-naartjie-bg-grad.png");
	--flavour-bg-grad-down: url("/wp-content/uploads/2026/09/raspberry-naartjie-bg-grad-down.png");
	--flavour-buy-button: url("/wp-content/uploads/2026/09/raspberry-naartjie-flash.svg");
}