/* PURISCO button system (PDK v0.10.0, Meir 2026-10-08; design canvas https://claude.ai/artifact/DeHE2SjTz5sSWNFiJTr66X).
   1. Chevron button (.purisco-chev): primary CTA, colour option C.
   2. Arrow / icon swap (.purisco-swap): the icon leaves in its direction while an identical copy comes in.
   3. Simple buttons (.purisco-fill): colour rises from below (or wipes in the arrow's direction), 7px corners.
   4. Site mapping: which existing buttons take which treatment.
   One radius for every button and field: 7px. Motion: shape 440ms, colour 320ms, cubic-bezier(.2,.7,.2,1). */

:root {
	--pb-r: 7px;
	--pb-blue: #0A6ED4;
	--pb-sky: #A9D8FF;
	--pb-navy: #08294F;
	--pb-line: #C9D6E6;
	--pb-ease: cubic-bezier(.2, .7, .2, 1);
	--pb-shape: 440ms;
	--pb-color: 320ms;
	--pb-lag: 60ms;
}
@media (prefers-reduced-motion: reduce) {
	:root { --pb-shape: 0ms; --pb-color: 0ms; --pb-lag: 0ms; }
}

/* ---------- 1. Chevron button ---------- */
.purisco-chev-wrap { display: flex; }
.purisco-chev {
	--pch-h: 44px; --pch-aw: 50px; --pch-r: var(--pb-r); --pch-icon: 18px; --pch-n: 8px;
	/* Brand colours only (Meir 2026-10-08 20:11/20:22): rest = navy body + sky arrow block; hover = the two swap. */
	--pch-body: #08294F; --pch-text: #FFFFFF; --pch-arrow: #A9D6F7; --pch-icon-c: #08294F;
	--pch-body-h: #A9D6F7; --pch-text-h: #08294F; --pch-arrow-h: #08294F; --pch-icon-c-h: #A9D6F7;
	--pch-ring: var(--pb-blue);
	/* Grid, not flex: Safari sizes a max-content flex row with a negative margin ~18px too narrow (arrow spilled outside). */
	position: relative; box-sizing: border-box; display: inline-grid; grid-auto-flow: column; grid-template-columns: minmax(0, auto) calc(var(--pch-aw) - 10px); align-items: stretch; flex: 0 1 auto;
	width: var(--pch-w-force, var(--pch-w, max-content)); max-width: 100%; height: var(--pch-h); min-height: 0;
	margin: 0; padding: 0; border: 0; border-radius: var(--pch-r); background: none; box-shadow: none;
	font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: normal; text-decoration: none; text-transform: none;
	cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
.purisco-chev__body, .purisco-chev__arrow {
	box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: var(--pch-r);
	transition: clip-path var(--pb-shape) var(--pb-ease), background-color var(--pb-color) var(--pb-ease), color var(--pb-color) var(--pb-ease);
}
.purisco-chev__body {
	flex: 1 1 auto; min-width: 0; padding: 0 24px 0 16px; /* literal values: Safari mis-sizes max-content with calc() padding */
	background: var(--pch-body); color: var(--pch-text);
	clip-path: polygon(0 0, calc(100% - var(--pch-n)) 0, calc(100% - 2 * var(--pch-n)) 50%, calc(100% - var(--pch-n)) 100%, 0 100%);
}
.purisco-chev__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.purisco-chev__arrow {
	flex: 0 0 var(--pch-aw); margin-left: -10px; padding-left: 8px;
	background: var(--pch-arrow); color: var(--pch-icon-c);
	clip-path: polygon(var(--pch-n) 0, 100% 0, 100% 100%, var(--pch-n) 100%, 0 50%);
}
.purisco-chev.is-on .purisco-chev__body, .purisco-chev:focus-visible .purisco-chev__body {
	background: var(--pch-body-h); color: var(--pch-text-h);
	clip-path: polygon(0 0, calc(100% - var(--pch-n)) 0, 100% 50%, calc(100% - var(--pch-n)) 100%, 0 100%);
}
.purisco-chev.is-on .purisco-chev__arrow, .purisco-chev:focus-visible .purisco-chev__arrow {
	background: var(--pch-arrow-h); color: var(--pch-icon-c-h);
	clip-path: polygon(var(--pch-n) 0, 100% 0, 100% 100%, var(--pch-n) 100%, calc(2 * var(--pch-n)) 50%);
}
/* Arrow side = left: the button is mirrored, the text is not. */
.purisco-chev--left { grid-template-columns: calc(var(--pch-aw) - 10px) minmax(0, auto); }
.purisco-chev--left .purisco-chev__arrow { order: -1; }
.purisco-chev--left .purisco-chev__body { padding: 0 16px 0 24px; clip-path: polygon(var(--pch-n) 0, 100% 0, 100% 100%, var(--pch-n) 100%, calc(2 * var(--pch-n)) 50%); }
.purisco-chev--left .purisco-chev__arrow { margin-left: 0; margin-right: -10px; padding-left: 0; padding-right: 8px; clip-path: polygon(0 0, calc(100% - var(--pch-n)) 0, 100% 50%, calc(100% - var(--pch-n)) 100%, 0 100%); }
.purisco-chev--left.is-on .purisco-chev__body, .purisco-chev--left:focus-visible .purisco-chev__body { clip-path: polygon(var(--pch-n) 0, 100% 0, 100% 100%, var(--pch-n) 100%, 0 50%); }
.purisco-chev--left.is-on .purisco-chev__arrow, .purisco-chev--left:focus-visible .purisco-chev__arrow { clip-path: polygon(0 0, calc(100% - var(--pch-n)) 0, calc(100% - 2 * var(--pch-n)) 50%, calc(100% - var(--pch-n)) 100%, 0 100%); }
.purisco-chev .purisco-swap { --psw-d: 30px; width: 24px; height: 24px; }
.purisco-chev .purisco-swap svg, .purisco-chev .purisco-chev__svg { width: var(--pch-icon); height: var(--pch-icon); }
/* The default arrow is stroke-only; Elementor's button rules fill SVGs inside <button>, which drew a white wedge in the form arrow. */
html:root body .purisco-chev svg.purisco-chev__svg, html:root body .purisco-chev svg.purisco-chev__svg path { fill: none !important; stroke: currentColor; }
.purisco-chev:focus { outline: none; }
.purisco-chev:focus-visible { outline: 2px solid var(--pch-ring); outline-offset: 4px; }
.purisco-chev.is-press { filter: brightness(.94); }
.purisco-chev > .purisco-spot { display: none !important; }
.purisco-on-blue .purisco-chev, .purisco-carousel .purisco-chev, .elementor-element.e-con[data-settings*="background"] .purisco-chev--onDark { --pch-ring: #FFFFFF; }
/* Without JavaScript the pointer still gets the state change (CSS hover only on real hover devices). */
@media (hover: hover) {
	html:not(.purisco-btn-js) .purisco-chev:hover .purisco-chev__body { background: var(--pch-body-h); color: var(--pch-text-h); }
	html:not(.purisco-btn-js) .purisco-chev:hover .purisco-chev__arrow { background: var(--pch-arrow-h); color: var(--pch-icon-c-h); }
}

/* Chevron inside Elementor's own <button>/<a> (form submit, upgraded by buttons.js): drop the Kit pill. */
html:root body .elementor-button.purisco-chev,
html:root body .elementor-button.purisco-chev:hover,
html:root body .elementor-button.purisco-chev:focus,
html:root body .elementor-button.purisco-chev:active {
	display: inline-grid; align-items: stretch; justify-content: stretch; gap: 0;
	padding: 0; min-height: 0; height: var(--pch-h); border: 0; border-radius: var(--pch-r); background: none !important; color: inherit; transform: none; box-shadow: none; line-height: 1.25;
}
html:root body .elementor-form .elementor-button.purisco-chev { width: max-content; }
html:root body.elementor-kit-6 .elementor-form .elementor-button.purisco-chev[type=submit], html:root body .elementor-form .elementor-button.purisco-chev.elementor-size-md { padding: 0; min-height: 0; height: var(--pch-h); font-size: 15px; font-weight: 500; }
html:root body .elementor-form-waiting .purisco-chev { cursor: default; opacity: .75; }

/* ---------- 2. Icon swap ---------- */
.purisco-swap {
	--psw-d: calc(100% + 8px); --psw-x: 1; --psw-y: 0;
	position: relative; display: inline-grid; place-items: center; overflow: hidden; flex: none; vertical-align: middle; line-height: 0;
}
.purisco-swap[data-swap="left"] { --psw-x: -1; }
.purisco-swap[data-swap="up"] { --psw-x: 0; --psw-y: -1; }
.purisco-swap[data-swap="down"] { --psw-x: 0; --psw-y: 1; }
.purisco-swap__a, .purisco-swap__b { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; line-height: 0; }
.purisco-swap__b { transform: translate(calc(var(--psw-x) * -1 * var(--psw-d)), calc(var(--psw-y) * -1 * var(--psw-d))); }
.purisco-swap.is-go .purisco-swap__a { animation: purisco-swap-out var(--pb-shape) var(--pb-ease) both; }
.purisco-swap.is-go .purisco-swap__b { animation: purisco-swap-in var(--pb-shape) var(--pb-ease) both; }
@keyframes purisco-swap-out { from { transform: translate(0, 0); } to { transform: translate(calc(var(--psw-x) * var(--psw-d)), calc(var(--psw-y) * var(--psw-d))); } }
@keyframes purisco-swap-in { from { transform: translate(calc(var(--psw-x) * -1 * var(--psw-d)), calc(var(--psw-y) * -1 * var(--psw-d))); } to { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .purisco-swap.is-go .purisco-swap__a, .purisco-swap.is-go .purisco-swap__b { animation: none; } }

/* ---------- 3. Simple buttons: colour fill ---------- */
.purisco-fill {
	--pb-bg: #FFFFFF; --pb-fg: var(--pb-navy); --pb-bd: var(--pb-line); --pb-fill-c: var(--pb-blue); --pb-fg-h: #FFFFFF; --pb-bd-h: var(--pb-blue);
	position: relative; isolation: isolate; overflow: hidden;
}
.purisco-fill::before {
	content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	background: var(--pb-fill-c); transform: scaleY(0); transform-origin: 50% 100%;
	transition: transform var(--pb-shape) var(--pb-ease) var(--pb-lag);
}
.purisco-fill--x::before { transform: scaleX(0); transform-origin: 0 50%; }
.purisco-fill--x.purisco-fill--rev::before { transform-origin: 100% 50%; }
.purisco-fill.is-on::before, .purisco-fill:focus-visible::before, .purisco-fill.is-copied::before { transform: none; }
.purisco-fill.is-press { filter: brightness(.94); }

/* Variants for Elementor Button widgets: add the class to the widget (Advanced › CSS Classes). */
html:root body .purisco-sb .elementor-button {
	--pb-bg: #FFFFFF; --pb-fg: var(--pb-navy); --pb-bd: var(--pb-line); --pb-fill-c: var(--pb-blue); --pb-fg-h: #FFFFFF; --pb-bd-h: var(--pb-blue);
	min-height: 44px; padding: 0 18px; border: 1px solid var(--pb-bd); border-radius: var(--pb-r); background: var(--pb-bg); color: var(--pb-fg);
	font-size: 15px; font-weight: 500; transform: none;
	transition: color var(--pb-color) var(--pb-ease) var(--pb-lag), border-color var(--pb-color) var(--pb-ease);
}
html:root body .purisco-sb--inverse .elementor-button { --pb-bg: var(--pb-blue); --pb-fg: #FFFFFF; --pb-bd: var(--pb-blue); --pb-fill-c: #FFFFFF; --pb-fg-h: var(--pb-blue); }
html:root body .purisco-sb--ghost .elementor-button { --pb-bg: transparent; }
html:root body .purisco-sb .elementor-button:hover, html:root body .purisco-sb .elementor-button:focus { background: var(--pb-bg); color: var(--pb-fg); transform: none; }
html:root body .purisco-sb .elementor-button.is-on, html:root body .purisco-sb .elementor-button:focus-visible, html:root body .purisco-sb .elementor-button.is-copied { color: var(--pb-fg-h); border-color: var(--pb-bd-h); }
html:root body .purisco-sb .elementor-button .elementor-button-content-wrapper { gap: 10px; }

/* ---------- 4. Site mapping ---------- */

/* Text links (.purisco-link): the arrow swaps instead of the 4px nudge. */
html:root body .purisco-link .elementor-button-icon, html:root body .purisco-link .elementor-button:hover .elementor-button-icon,
html:root body .purisco-link .elementor-button:focus-visible .elementor-button-icon { transform: none; }

/* 404 "Browse ingredients": ghost simple button (transparent → blue). */
html:root body .purisco-404__browse.purisco-link .elementor-button {
	--pb-bg: transparent; --pb-fg: var(--pb-navy); --pb-bd: var(--pb-line); --pb-fill-c: var(--pb-blue); --pb-fg-h: #FFFFFF; --pb-bd-h: var(--pb-blue);
	min-height: 44px; padding: 0 18px; border: 1px solid var(--pb-bd); border-radius: var(--pb-r); background: transparent; color: var(--pb-fg); font-weight: 500; text-decoration: none;
	transition: color var(--pb-color) var(--pb-ease) var(--pb-lag), border-color var(--pb-color) var(--pb-ease);
}
html:root body .purisco-404__browse .elementor-button, html:root body .purisco-404__browse .elementor-button .elementor-button-text { text-decoration: none !important; }
html:root body .purisco-404__browse.purisco-link .elementor-button.is-on, html:root body .purisco-404__browse.purisco-link .elementor-button:focus-visible { color: #FFFFFF; border-color: var(--pb-blue); }

/* Contact "Copy": light simple button, copy icon left of the text, "Copied" + check after copying. */
html:root body .purisco-copy .elementor-button {
	--pb-bg: #FFFFFF; --pb-fg: var(--pb-navy); --pb-fill-c: var(--pb-blue); --pb-fg-h: #FFFFFF;
	min-height: 36px; height: 36px; padding: 0 14px; border: 1px solid var(--pb-line); border-radius: var(--pb-r); background: #FFFFFF; color: var(--pb-navy);
	font-size: 14px; font-weight: 500; transform: none;
	transition: color var(--pb-color) var(--pb-ease) var(--pb-lag), border-color var(--pb-color) var(--pb-ease);
}
html:root body .purisco-copy .elementor-button:hover, html:root body .purisco-copy .elementor-button:focus { background: #FFFFFF; color: var(--pb-navy); }
html:root body .purisco-copy .elementor-button.is-on, html:root body .purisco-copy .elementor-button:focus-visible, html:root body .purisco-copy .elementor-button.is-copied { color: #FFFFFF; border-color: var(--pb-blue); }
html:root body .purisco-copy .elementor-button-content-wrapper { gap: 8px; align-items: center; }
html:root body .purisco-copy .purisco-copy__icon { display: inline-flex; }
html:root body .purisco-copy .purisco-copy__icon svg { width: 16px; height: 16px; }

/* Footer "Back to top": icon only, up arrow in a 7px square (light simple button). */
html:root body .purisco-link--small .elementor-button[href="#top"] {
	--pb-fill-c: var(--pb-blue);
	width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center;
	border: 1px solid var(--pb-line); border-radius: var(--pb-r); background: #FFFFFF; color: var(--pb-navy);
	transition: color var(--pb-color) var(--pb-ease) var(--pb-lag), border-color var(--pb-color) var(--pb-ease);
}
html:root body .purisco-link--small .elementor-button[href="#top"] .elementor-button-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html:root body .purisco-link--small .elementor-button[href="#top"]:hover, html:root body .purisco-link--small .elementor-button[href="#top"]:focus { background: #FFFFFF; color: var(--pb-navy); }
html:root body .purisco-link--small .elementor-button[href="#top"].is-on, html:root body .purisco-link--small .elementor-button[href="#top"]:focus-visible { color: #FFFFFF; border-color: var(--pb-blue); }

/* Related cards (single page, Meir 2026-10-08 19:13): same as the home carousel cards: "View Ingredient" text + arrow,
   the arrow swaps while the card is hovered; Save sits on the image (loop 115, Save widget placement top right). */
html:root body .purisco-card-r__cta .elementor-button-icon { transform: none; }
html:root body .purisco-card-r.is-on .purisco-card-r__cta .elementor-button { color: #085EBD; }

/* Catalog rows (Meir 2026-10-08 19:11): "View Ingredient" = text + arrow (no circle, no chevron); the arrow swaps while the row is hovered. */
html:root body .purisco-row__cta .purisco-chev { --pch-w: 230px; }
html:root body.elementor-kit-6 .purisco-row__cta .elementor-button-icon,
html:root body.elementor-kit-6 .purisco-row:hover .purisco-row__cta .elementor-button-icon,
html:root body.elementor-kit-6 .purisco-row:focus-within .purisco-row__cta .elementor-button-icon { width: auto; height: auto; border: 0; border-radius: 0; background: none; color: inherit; transform: none; }
html:root body.elementor-kit-6 .purisco-row__cta .elementor-button { color: var(--pb-blue); gap: 10px; }
html:root body.elementor-kit-6 .purisco-row.is-on .purisco-row__cta .elementor-button { color: #085EBD; }

/* Carousel: arrows are 56px squares; white wipes in the arrow's direction, the arrow turns navy and swaps. */
html:root body .purisco-carousel .purisco-carousel__prev, html:root body .purisco-carousel .purisco-carousel__next {
	--pb-fill-c: #FFFFFF;
	border-radius: var(--pb-r); color: #FFFFFF; transition: color var(--pb-color) var(--pb-ease) var(--pb-lag), border-color var(--pb-color) var(--pb-ease), opacity 200ms;
}
html:root body .purisco-carousel .purisco-carousel__prev:not(:disabled):hover, html:root body .purisco-carousel .purisco-carousel__next:not(:disabled):hover,
html:root body .purisco-carousel .purisco-carousel__prev:focus, html:root body .purisco-carousel .purisco-carousel__next:focus { background: transparent; }
html:root body .purisco-carousel .purisco-carousel__prev.is-on, html:root body .purisco-carousel .purisco-carousel__next.is-on,
html:root body .purisco-carousel .purisco-carousel__prev:focus-visible, html:root body .purisco-carousel .purisco-carousel__next:focus-visible { color: var(--pb-navy); border-color: #FFFFFF; }
html:root body .purisco-carousel .purisco-carousel__prev:disabled::before, html:root body .purisco-carousel .purisco-carousel__next:disabled::before { transform: scaleX(0); }
/* Carousel cards: "View Ingredient" text + arrow; the arrow swaps while the card is hovered. */
html:root body .purisco-carousel .purisco-card__link svg, html:root body .purisco-carousel .purisco-card:hover .purisco-card__link svg { transform: none; }
/* Carousel final card: the chevron button. */
html:root body .purisco-carousel .purisco-cta .purisco-chev { --pch-ring: #FFFFFF; margin-top: clamp(24px, 2.2vw, 36px); width: var(--pch-w, max-content); padding-left: 0 !important; padding-right: 0 !important; padding-top: 0; padding-bottom: 0; min-height: 0; background: none; gap: 0; }

/* Save buttons (light = white → blue, dark on images = transparent → white). Colours stay editable in the widgets. */
html:root body .purisco-save { --pss-fill: var(--pss-blue, #0A6ED4); position: relative; isolation: isolate; overflow: hidden; transition: color var(--pb-color) var(--pb-ease) var(--pb-lag), border-color var(--pb-color) var(--pb-ease), background-color var(--pb-color) var(--pb-ease); }
html:root body .purisco-save::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--pss-fill); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--pb-shape) var(--pb-ease) var(--pb-lag); pointer-events: none; }
html:root body .purisco-save .purisco-swap, html:root body .purisco-save > .purisco-bm { order: 2; }
html:root body .purisco-save--dark { --pss-fill: #FFFFFF; }
html:root body .purisco-save.is-on:not([aria-pressed="true"])::before, html:root body .purisco-save:focus-visible:not([aria-pressed="true"])::before { transform: none; }
html:root body .purisco-save.is-on:not([aria-pressed="true"]), html:root body .purisco-save:focus-visible:not([aria-pressed="true"]) { color: var(--pss-fg-h); border-color: var(--pss-border-h); }
html:root body .purisco-save.is-on:not([aria-pressed="true"]) .purisco-bm, html:root body .purisco-save:focus-visible:not([aria-pressed="true"]) .purisco-bm { --pss-knock: var(--pss-fill); }

/* Header "Saved" (Meir 19:03 + 19:16): no frame, but the background still fills blue from below on hover (like the other
   simple buttons) and the bookmark swaps up. */
html:root body .purisco-saved-entry, html:root body .purisco-saved-entry:hover, html:root body .purisco-saved-entry:focus, html:root body .purisco-saved-entry:active { --pse-border: transparent; --pse-bg: transparent; --pse-bg-h: transparent; --pse-border-h: transparent; background: transparent; border-color: transparent; }
html:root body .purisco-saved-entry { position: relative; isolation: isolate; overflow: hidden; transition: color var(--pb-color) var(--pb-ease) var(--pb-lag); }
html:root body .purisco-saved-entry::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--pb-blue); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--pb-shape) var(--pb-ease) var(--pb-lag); pointer-events: none; }
html:root body .purisco-saved-entry.is-on, html:root body .purisco-saved-entry:focus-visible { color: #FFFFFF; }
html:root body .purisco-saved-entry.is-on::before, html:root body .purisco-saved-entry:focus-visible::before { transform: none; }
html:root body .purisco-saved-entry.is-on .purisco-bm { --pss-knock: var(--pb-blue); }
html:root body .purisco-saved-entry.is-on .purisco-saved-entry__count { background: #FFFFFF; color: var(--pb-blue); }

/* Carousel Save: the Kit carousel shield (button:focus → transparent) left a just-unsaved Save see-through until the next click. */
html:root body .purisco-carousel .purisco-save:focus, html:root body .purisco-carousel .purisco-save:hover, html:root body .purisco-carousel .purisco-save:active { background-color: var(--pss-bg); }
html:root body .purisco-carousel .purisco-save[aria-pressed="true"]:focus, html:root body .purisco-carousel .purisco-save[aria-pressed="true"]:active { background-color: var(--pss-bg-on); }

/* Catalog search "go": white, hover = today's blue rising from below. Filters toggle: icon right of the text. */
html:root body .purisco-cf-search__go {
	position: relative; isolation: isolate; overflow: hidden;
	border: 1px solid var(--pb-line) !important; border-radius: var(--pb-r) !important; background: #FFFFFF !important; color: var(--pb-navy) !important;
	transition: color var(--pb-color) var(--pb-ease) var(--pb-lag), border-color var(--pb-color) var(--pb-ease);
}
html:root body .purisco-cf-search__go::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pb-blue); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--pb-shape) var(--pb-ease) var(--pb-lag); }
html:root body .purisco-cf-search__go.is-on, html:root body .purisco-cf-search__go:focus-visible { color: #FFFFFF !important; border-color: var(--pb-blue) !important; }
html:root body .purisco-cf-search__go.is-on::before, html:root body .purisco-cf-search__go:focus-visible::before { transform: none; }
html:root body .purisco-cf-toggle { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--pb-r); transition: color var(--pb-color) var(--pb-ease) var(--pb-lag), border-color var(--pb-color) var(--pb-ease); }
html:root body .purisco-cf-toggle::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pb-blue); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--pb-shape) var(--pb-ease) var(--pb-lag); }
html:root body .purisco-cf-toggle > .purisco-swap, html:root body .purisco-cf-toggle > svg { order: 3; }
html:root body .purisco-cf-toggle.is-on, html:root body .purisco-cf-toggle:focus-visible { color: #FFFFFF; border-color: var(--pb-blue); background: #FFFFFF; }
html:root body .purisco-cf-toggle.is-on::before, html:root body .purisco-cf-toggle:focus-visible::before { transform: none; }
html:root body .purisco-cf-toggle.is-on .purisco-cf-toggle__count { background: #FFFFFF; color: var(--pb-blue); }

/* Drawers (Saved + Filters): main action = inverse (blue → white), other actions = ghost (transparent → blue); close = glass square. */
html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-inquire],
html:root body .purisco-cf-panel.is-drawer button.purisco-cf-panel__show,
html:root body .purisco-cf-panel button.purisco-cf-panel__show {
	position: relative; isolation: isolate; overflow: hidden; height: 48px; min-height: 48px; padding: 0 20px;
	border: 1px solid var(--pb-blue); border-radius: var(--pb-r); background: var(--pb-blue); color: #FFFFFF; font-size: 15px; font-weight: 500; transform: none;
	transition: color var(--pb-color) var(--pb-ease) var(--pb-lag);
}
html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-inquire]::before,
html:root body .purisco-cf-panel button.purisco-cf-panel__show::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #FFFFFF; transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--pb-shape) var(--pb-ease) var(--pb-lag); }
html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-inquire]:hover, html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-inquire]:focus,
html:root body .purisco-cf-panel button.purisco-cf-panel__show:hover, html:root body .purisco-cf-panel button.purisco-cf-panel__show:focus { background: var(--pb-blue); color: #FFFFFF; }
html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-inquire].is-on, html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-inquire]:focus-visible,
html:root body .purisco-cf-panel button.purisco-cf-panel__show.is-on, html:root body .purisco-cf-panel button.purisco-cf-panel__show:focus-visible { color: var(--pb-blue); }
html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-inquire].is-on::before, html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-inquire]:focus-visible::before,
html:root body .purisco-cf-panel button.purisco-cf-panel__show.is-on::before, html:root body .purisco-cf-panel button.purisco-cf-panel__show:focus-visible::before { transform: none; }

html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-browse],
html:root body .purisco-sp__foot .purisco-sp__secondary,
html:root body .purisco-cf-panel a.purisco-cf-panel__clear,
html:root body .purisco-cf-panel.is-drawer a.purisco-cf-panel__clear {
	position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; align-self: stretch; justify-self: stretch;
	width: 100%; height: 48px; min-height: 48px; padding: 0 20px; border: 1px solid var(--pb-line); border-radius: var(--pb-r);
	background: transparent; color: var(--pb-navy); font-size: 15px; font-weight: 500; text-decoration: none; transform: none;
	transition: color var(--pb-color) var(--pb-ease) var(--pb-lag), border-color var(--pb-color) var(--pb-ease);
}
html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-browse]::before,
html:root body .purisco-sp__foot .purisco-sp__secondary::before,
html:root body .purisco-cf-panel a.purisco-cf-panel__clear::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pb-blue); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--pb-shape) var(--pb-ease) var(--pb-lag); }
html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-browse]:hover, html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-browse]:focus,
html:root body .purisco-sp__foot .purisco-sp__secondary:hover, html:root body .purisco-sp__foot .purisco-sp__secondary:focus,
html:root body .purisco-cf-panel a.purisco-cf-panel__clear:hover, html:root body .purisco-cf-panel a.purisco-cf-panel__clear:focus { background: transparent; color: var(--pb-navy); text-decoration: none; }
html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-browse].is-on, html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-browse]:focus-visible,
html:root body .purisco-sp__foot .purisco-sp__secondary.is-on, html:root body .purisco-sp__foot .purisco-sp__secondary:focus-visible,
html:root body .purisco-cf-panel a.purisco-cf-panel__clear.is-on, html:root body .purisco-cf-panel a.purisco-cf-panel__clear:focus-visible { color: #FFFFFF; border-color: var(--pb-blue); }
html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-browse].is-on::before, html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-browse]:focus-visible::before,
html:root body .purisco-sp__foot .purisco-sp__secondary.is-on::before, html:root body .purisco-sp__foot .purisco-sp__secondary:focus-visible::before,
html:root body .purisco-cf-panel a.purisco-cf-panel__clear.is-on::before, html:root body .purisco-cf-panel a.purisco-cf-panel__clear:focus-visible::before { transform: none; }
html:root body .purisco-sp__foot { gap: 10px; }
html:root body .purisco-cf-panel.is-drawer .purisco-cf-panel__foot { gap: 10px; }

html:root body .purisco-sp__close,
html:root body .purisco-cf-panel.is-drawer button.purisco-cf-panel__close {
	position: relative; isolation: isolate; overflow: hidden; border-radius: var(--pb-r);
	transition: color var(--pb-color) var(--pb-ease) var(--pb-lag);
}
html:root body .purisco-sp__close::before,
html:root body .purisco-cf-panel.is-drawer button.purisco-cf-panel__close::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #FFFFFF; transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--pb-shape) var(--pb-ease) var(--pb-lag); }
html:root body .purisco-sp__close.is-on, html:root body .purisco-sp__close:focus-visible,
html:root body .purisco-cf-panel.is-drawer button.purisco-cf-panel__close.is-on, html:root body .purisco-cf-panel.is-drawer button.purisco-cf-panel__close:focus-visible { color: var(--pb-navy); }
html:root body .purisco-sp__close.is-on::before, html:root body .purisco-sp__close:focus-visible::before,
html:root body .purisco-cf-panel.is-drawer button.purisco-cf-panel__close.is-on::before, html:root body .purisco-cf-panel.is-drawer button.purisco-cf-panel__close:focus-visible::before { transform: none; }

/* Ingredient FAQ: the plus sits in a 7px square; on row hover it swaps up and blue rises from below. */
html:root body .purisco-faq__icon { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--pb-r); transition: color var(--pb-color) var(--pb-ease) var(--pb-lag), border-color var(--pb-color) var(--pb-ease); }
html:root body .purisco-faq__icon::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pb-blue); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--pb-shape) var(--pb-ease) var(--pb-lag); }
html:root body .purisco-faq__q.is-on .purisco-faq__icon, html:root body .purisco-faq__q:focus-visible .purisco-faq__icon { color: #FFFFFF; border-color: var(--pb-blue); }
html:root body .purisco-faq__q.is-on .purisco-faq__icon::before, html:root body .purisco-faq__q:focus-visible .purisco-faq__icon::before { transform: none; }

/* Remaining shapes: one radius. */
html:root body .purisco-media-toggle, html:root body .elementor-menu-toggle { border-radius: var(--pb-r); }
html:root body .purisco-role-pills .elementor-post-info__terms-list-item, html:root body .purisco-value-list__item { border-radius: var(--pb-r); }
html:root body .elementor-field-group .elementor-field:not([type=checkbox]):not([type=radio]) { border-radius: var(--pb-r); }

@media (prefers-reduced-motion: reduce) {
	.purisco-fill::before, html:root body .purisco-save::before, html:root body .purisco-saved-entry::before, html:root body .purisco-faq__icon::before { transition: none; }
}

/* ---------- 5. Phones (v0.10.1, Meir 2026-10-08: lighter on mobile) ---------- */
@media (max-width: 767px) {
	/* Phones use the same compact chevron as desktop (Meir 19:30): 44px, hugs its text. */

	/* Sticky "Request" bar on the ingredient page: the button takes only the width of its text, the name keeps the rest. */
	html:root body .purisco-request-bar .purisco-chev-wrap { justify-content: flex-end; }

	/* Carousel: on phones the whole card is the link and the "View Ingredient" row is hidden (widget CSS); hide the arrow copy too. */
	html:root body .purisco-carousel .purisco-card__link .purisco-swap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

	/* Text-heavy simple buttons a bit lighter. */
	html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-inquire], html:root body .purisco-cf-panel button.purisco-cf-panel__show,
	html:root body .purisco-sp__foot .purisco-sp__cta[data-sp-browse], html:root body .purisco-sp__foot .purisco-sp__secondary,
	html:root body .purisco-cf-panel a.purisco-cf-panel__clear, html:root body .purisco-404__browse.purisco-link .elementor-button { height: 48px; min-height: 48px; font-size: 15px; }
}


/* ---------- 6. Safari-safe sizing + fixes (v0.10.3, Meir 2026-10-08 18:51) ----------
   Mobile button rules: (1) the label never wraps; (2) no chevron relies on auto/intrinsic width (Safari sizes it too narrow):
   it is full width, a set width, or the width of its text (max-content) capped by its column; (3) in a bar it matches its neighbours' height. */
.purisco-chev__label { flex: none; white-space: nowrap !important; }
.purisco-chev__body { min-width: 0; }

/* Forms: the submit chevron always spans the form (both forms are set to stretch). */
html:root body .purisco-inquiry-form .elementor-field-type-submit,
html:root body .purisco-inquiry-form .e-form__buttons { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }
html:root body .purisco-inquiry-form .elementor-button.purisco-chev { flex: 0 0 auto; width: max-content !important; max-width: 100%; }

/* Role badges: side by side, wrapping, with room between them. */
html:root body .purisco-role-pills .elementor-icon-list-item,
html:root body .purisco-role-pills .elementor-post-info__item--type-terms { display: block; width: 100%; }
html:root body .purisco-role-pills .elementor-post-info__terms-list { display: flex !important; flex-wrap: wrap; gap: 8px 8px; font-size: 0; }
html:root body .purisco-role-pills .elementor-post-info__terms-list-item { margin: 0; }

@media (max-width: 767px) {
	/* Sticky "Request" bar: the compact chevron (44px, same as the Save next to it), width of its text. */
	html:root body .purisco-request-bar { flex: 0 0 auto; width: auto; max-width: none; }
	html:root body .purisco-request-bar .purisco-chev-wrap { display: flex; justify-content: flex-end; --pch-w-force: max-content; }
	html:root body .purisco-request-bar .purisco-chev { flex: 0 0 auto; }
}

/* ---------- 7. One slider card (v0.11.0, Meir approved 2026-10-08 19:24) ----------
   Home carousel (.purisco-card, on blue) and Related (.purisco-card-r, on white) share sizes, spacing, hover and Save
   behaviour; only the colour set follows the section. */
html:root body .purisco-carousel .purisco-card .purisco-card__name,
html:root body .purisco-card-r .purisco-card-r__title .elementor-heading-title { font-size: 26px; line-height: 1.15; }
html:root body .purisco-carousel .purisco-card .purisco-card__role,
html:root body .purisco-card-r .purisco-role-text, html:root body .purisco-card-r .purisco-role-text a { font-size: 16px; line-height: 1.5; }
/* "View Ingredient" right under the role line (no empty band in the home cards). */
html:root body .purisco-carousel .purisco-card__link { margin-top: 14px; }
/* Card hover: border brightens, artwork zooms 1.03, arrow swaps (JS). */
html:root body .purisco-carousel .purisco-card__image, html:root body .purisco-card-r .purisco-card-r__img img { transition: transform 400ms var(--pb-ease); }
html:root body .purisco-carousel .purisco-card.is-on .purisco-card__image, html:root body .purisco-card-r.is-on .purisco-card-r__img img { transform: scale(1.03); }
html:root body .purisco-card-r { transition: border-color 240ms var(--pb-ease); }
html:root body .purisco-card-r.is-on { border-color: #B9D0EA; }
@media (prefers-reduced-motion: reduce) { html:root body .purisco-carousel .purisco-card.is-on .purisco-card__image, html:root body .purisco-card-r.is-on .purisco-card-r__img img { transform: none; } }
@media (max-width: 767px) {
	html:root body .purisco-carousel .purisco-card .purisco-card__name,
	html:root body .purisco-card-r .purisco-card-r__title .elementor-heading-title { font-size: 22px; }
	html:root body .purisco-carousel .purisco-card .purisco-card__role,
	html:root body .purisco-card-r .purisco-role-text, html:root body .purisco-card-r .purisco-role-text a { font-size: 15px; }
}
/* Save that is already saved, on hover (pointer only): blue rises, the filled bookmark turns white = "click to remove". */
html:root body .purisco-save[aria-pressed="true"].is-on { color: #FFFFFF !important; border-color: var(--pb-blue) !important; }
html:root body .purisco-save[aria-pressed="true"].is-on::before { transform: none; background: var(--pb-blue); }
html:root body .purisco-save[aria-pressed="true"].is-on .purisco-bm { --pss-knock: var(--pb-blue); }

/* Related on desktop: more than three cards → one row that scrolls, with the same arrows as the home carousel. */
@media (min-width: 768px) {
	html:root body .purisco-related .elementor-loop-container:has(> .e-loop-item:nth-child(4)) {
		display: flex !important; flex-wrap: nowrap; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
	}
	html:root body .purisco-related .elementor-loop-container:has(> .e-loop-item:nth-child(4))::-webkit-scrollbar { display: none; }
	html:root body .purisco-related .elementor-loop-container:has(> .e-loop-item:nth-child(4)) > .e-loop-item { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
}
.purisco-related__nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.purisco-related__nav[hidden] { display: none; }
html:root body .purisco-related__nav button {
	--pb-fill-c: var(--pb-blue);
	width: 56px; height: 56px; min-height: 0; padding: 0; display: inline-grid; place-items: center;
	border: 1px solid var(--pb-line); border-radius: var(--pb-r); background: #FFFFFF; color: var(--pb-navy); cursor: pointer;
	transition: color var(--pb-color) var(--pb-ease) var(--pb-lag), border-color var(--pb-color) var(--pb-ease), opacity 200ms;
}
html:root body .purisco-related__nav button:hover, html:root body .purisco-related__nav button:focus { background: #FFFFFF; color: var(--pb-navy); }
html:root body .purisco-related__nav button.is-on, html:root body .purisco-related__nav button:focus-visible { color: #FFFFFF; border-color: var(--pb-blue); }
html:root body .purisco-related__nav button:disabled { opacity: .4; cursor: default; }
html:root body .purisco-related__nav button:disabled::before { transform: scaleX(0); }
html:root body .purisco-related__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 767px) { .purisco-related__nav { display: none; } }

/* ---------- 8. Touch screens (v0.11.1) ---------- */
/* iOS keeps :hover after a tap; Kit button hover colours then stuck on Save (blue after un-saving). Keep the state colours. */
html:root body .purisco-save:not([aria-pressed="true"]):hover, html:root body .purisco-save:not([aria-pressed="true"]):focus, html:root body .purisco-save:not([aria-pressed="true"]):active { background-color: var(--pss-bg); }
html:root body .purisco-save[aria-pressed="true"]:not(.is-on):hover, html:root body .purisco-save[aria-pressed="true"]:focus:not(.is-on), html:root body .purisco-save[aria-pressed="true"]:active { background-color: var(--pss-bg-on); }
/* FAQ on phones (Meir 19:26): no swap / rising fill on tap, only a calm colour change: open question = blue square, white icon. */
@media (hover: none), (max-width: 767px) {
	html:root body .purisco-faq__icon::before { display: none; }
	html:root body .purisco-faq__icon { transition: background-color 200ms var(--pb-ease), color 200ms var(--pb-ease), border-color 200ms var(--pb-ease); }
	html:root body .purisco-faq__item[open] .purisco-faq__icon { background-color: var(--pb-blue); border-color: var(--pb-blue); color: #FFFFFF; }
	html:root body .purisco-faq__q.is-on .purisco-faq__icon { color: inherit; }
	html:root body .purisco-faq__item[open] .purisco-faq__q .purisco-faq__icon { color: #FFFFFF; }
}

/* Touch screens: a drawer gives focus back to its opener (header Saved, Filters) and Safari draws that as :focus-visible;
   keep those openers plain after closing (Meir 19:33). */
@media (hover: none) {
	html:root body .purisco-saved-entry:focus-visible:not(.is-on), html:root body .purisco-cf-toggle:focus-visible:not(.is-on) { color: inherit; outline: none; }
	html:root body .purisco-saved-entry:focus-visible:not(.is-on)::before, html:root body .purisco-cf-toggle:focus-visible:not(.is-on)::before { transform: scaleY(0); }
}

/* ---------- 9. v0.13.0 (Meir 2026-10-08 20:02) ---------- */
/* Forms: the submit button sits on the right on tablet/desktop. */
@media (min-width: 768px) {
	html:root body .purisco-inquiry-form .elementor-field-type-submit, html:root body .purisco-inquiry-form .e-form__buttons { justify-content: flex-end !important; }
}
/* Carousel final card: simple transparent button; on hover white rises from below and the text turns blue. */
html:root body .purisco-carousel .purisco-cta .purisco-cta__simple {
	position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
	margin-top: clamp(24px, 2.2vw, 36px); height: 44px; min-height: 0; padding: 0 20px !important; box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--pb-r); background: transparent; color: #FFFFFF;
	font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
	transition: color var(--pb-color) var(--pb-ease) var(--pb-lag), border-color var(--pb-color) var(--pb-ease);
}
html:root body .purisco-carousel .purisco-cta .purisco-cta__simple::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #FFFFFF; transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--pb-shape) var(--pb-ease) var(--pb-lag); }
html:root body .purisco-carousel .purisco-cta .purisco-cta__simple.is-on, html:root body .purisco-carousel .purisco-cta .purisco-cta__simple:focus-visible { color: var(--pb-blue); border-color: #FFFFFF; }
html:root body .purisco-carousel .purisco-cta .purisco-cta__simple.is-on::before, html:root body .purisco-carousel .purisco-cta .purisco-cta__simple:focus-visible::before { transform: none; }
html:root body .purisco-carousel .purisco-cta .purisco-cta__simple:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
/* Slider Save (home carousel + Related, on the artwork): transparent glass; hover = white rises, navy icon;
   saved = blue with a white filled bookmark; saved + hover = white rises, blue filled bookmark ("click to remove"). */
html:root body .elementor-widget .purisco-carousel .purisco-card .purisco-save,
html:root body .elementor-element .purisco-card-r .purisco-save {
	/* No frame on the artwork (Meir 20:25): just the blue glass. */
	--pss-bg: rgba(9, 38, 68, .35); --pss-border: transparent; --pss-fg: #FFFFFF;
	--pss-fill: #FFFFFF; --pss-fg-h: var(--pb-navy); --pss-bg-h: rgba(9, 38, 68, .35); --pss-border-h: transparent;
	--pss-bg-on: var(--pb-blue); --pss-border-on: transparent; --pss-fg-on: #FFFFFF;
	--pss-bg-onh: var(--pb-blue); --pss-border-onh: transparent; --pss-fg-onh: var(--pb-blue);
	box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html:root body .elementor-widget .purisco-carousel .purisco-card .purisco-save .purisco-bm,
html:root body .elementor-element .purisco-card-r .purisco-save .purisco-bm { --pss-knock: transparent; }
html:root body .elementor-widget .purisco-carousel .purisco-card .purisco-save[aria-pressed="true"].is-on,
html:root body .elementor-element .purisco-card-r .purisco-save[aria-pressed="true"].is-on { color: var(--pb-blue) !important; border-color: transparent !important; }
html:root body .elementor-widget .purisco-carousel .purisco-card .purisco-save[aria-pressed="true"].is-on::before,
html:root body .elementor-element .purisco-card-r .purisco-save[aria-pressed="true"].is-on::before { background: #FFFFFF; }
html:root body .elementor-widget .purisco-carousel .purisco-card .purisco-save:not([aria-pressed="true"]):hover, html:root body .elementor-widget .purisco-carousel .purisco-card .purisco-save:not([aria-pressed="true"]):focus,
html:root body .elementor-element .purisco-card-r .purisco-save:not([aria-pressed="true"]):hover, html:root body .elementor-element .purisco-card-r .purisco-save:not([aria-pressed="true"]):focus { background-color: var(--pss-bg); }
/* Forms: the Kit's 1px hover lift on submit buttons stays off the chevron (Meir 20:12). */
html:root body .elementor-form .elementor-button.purisco-chev, html:root body .elementor-form .elementor-button.purisco-chev:hover, html:root body .elementor-form .elementor-button.purisco-chev:focus, html:root body .elementor-form .elementor-button.purisco-chev:active { transform: none !important; }
/* Forms (Meir 20:23): the submit chevron spans the full width of the form, on every screen. */
html:root body .purisco-inquiry-form .elementor-button.purisco-chev { width: 100% !important; max-width: 100%; flex: 0 0 100%; }
html:root body .elementor-widget .purisco-carousel .purisco-card .purisco-save.is-on, html:root body .elementor-element .purisco-card-r .purisco-save.is-on { border-color: transparent !important; }