/* Evopure — reusable blocks (evopure-blocks.php): COMPARISON TABLE [evo_compare] · FAQ accordion [evo_faq]. Tokens come from chrome.css. No shadows. */

/* ---------------------------------------------------------------- COMPARISON — "ours" column carried through in navy; the others fall short quietly */
.evo-cmp { width: 100%; }
.evo-cmp__table { width: 100%; margin: 0; border: 0 !important; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: transparent; }
.evo-cmp__table th, .evo-cmp__table td { border: 0 !important; background: transparent; padding: 0; vertical-align: middle; }
.evo-cmp__table tbody tr:hover > td, .evo-cmp__table tbody tr:hover > th, .evo-cmp__table tbody > tr:nth-child(odd) > td, .evo-cmp__table tbody > tr:nth-child(odd) > th { background-color: transparent; }
.evo-cmp__corner { width: 40%; }
.evo-cmp__table .evo-cmp__col { padding: 18px 8px 16px; text-align: center; vertical-align: bottom; font-family: var(--e-global-typography-subheadcaps-font-family), sans-serif; font-weight: var(--evo-caps-w); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; color: var(--evo-slate); }
.evo-cmp__table .evo-cmp__col.is-ours { background: var(--evo-navy) !important; color: var(--evo-white); border-radius: 0 var(--evo-radius-card, 24px) 0 0; font-size: 12px; padding-top: 22px; }
.evo-cmp__table .evo-cmp__label { padding: 17px 16px 17px 0; text-align: left; font-family: var(--e-global-typography-body-font-family), sans-serif; font-weight: 500; font-size: 16px; line-height: 1.35; color: var(--evo-navy); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--evo-navy) 10%, transparent); }
.evo-cmp__table .evo-cmp__cell { text-align: center; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--evo-navy) 10%, transparent); }      /* row dividers, not boxes */
.evo-cmp__table .evo-cmp__cell.is-ours { background: var(--evo-navy) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--evo-white) 14%, transparent); }
.evo-cmp__table tbody tr:last-child .evo-cmp__cell.is-ours { padding-bottom: 8px; }
.evo-cmp__mark { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; font-family: var(--e-global-typography-subheadcaps-font-family), sans-serif; font-weight: var(--evo-caps-w); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--evo-slate); }
.evo-cmp__mark svg { display: block; }
.evo-cmp__mark--yes { width: 28px; height: 28px; border-radius: 50%; color: var(--evo-navy); box-shadow: inset 0 0 0 1.5px var(--evo-navy); }
.is-ours .evo-cmp__mark--yes { background: var(--evo-white); color: var(--evo-navy); box-shadow: none; }
.evo-cmp__mark--no { color: color-mix(in srgb, var(--evo-slate) 70%, transparent); }
.evo-cmp__mark--some span { width: 12px; height: 1.5px; background: currentColor; }
.is-ours .evo-cmp__mark--no, .is-ours .evo-cmp__mark--some, .is-ours .evo-cmp__mark--text { color: var(--evo-page); }
@media (max-width: 767px) {
	.evo-cmp__corner { width: 34%; }
	.evo-cmp__table .evo-cmp__col { padding: 12px 3px 10px; font-size: 8.5px; letter-spacing: .08em; hyphens: auto; }
	.evo-cmp__table .evo-cmp__col.is-ours { font-size: 9.5px; padding-top: 16px; }
	.evo-cmp__table .evo-cmp__label { padding: 13px 8px 13px 0; font-size: 14px; }
	.evo-cmp__mark--some { flex-direction: column; gap: 3px; font-size: 8.5px; letter-spacing: .08em; }
	.evo-cmp__mark--yes { width: 24px; height: 24px; } .evo-cmp__mark--yes svg { width: 14px; height: 14px; }
}

/* cells that SAY something ("yes: Every batch, ISO 17025"): the mark with a short specific under it */
.evo-cmp__say { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 11px 10px 12px; }
.evo-cmp__say .evo-cmp__mark--some { min-height: 28px; }
.evo-cmp__note { display: block; max-width: 27ch; font-family: var(--e-global-typography-body-font-family), sans-serif; font-weight: 400; font-size: 13.5px; line-height: 1.35; letter-spacing: 0; text-transform: none; text-wrap: balance; color: var(--evo-charcoal); }
.evo-cmp__cell:not(.is-ours) .evo-cmp__note { color: var(--evo-slate); }
.is-ours .evo-cmp__note { color: var(--evo-white); font-weight: 500; }
.evo-cmp--says .evo-cmp__table .evo-cmp__label { padding-block: 14px; }
.evo-cmp--says .evo-cmp__corner { width: 28%; }
.evo-cmp__hint { display: none; }
/* phones: the table keeps its shape and swipes sideways. The row labels stay pinned on the left, Evopure is the first column you see, and the last column
   peeks in from the edge so it is obvious there is more. (Stacked cards made this block two screens long.) */
@media (max-width: 767px) {
	.evo-cmp--says { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: calc(100% + 2 * var(--evo-gutter, 20px)); margin-inline: calc(-1 * var(--evo-gutter, 20px)); padding-inline: var(--evo-gutter, 20px) 0; }
	.evo-cmp--says::-webkit-scrollbar { display: none; }
	.evo-cmp--says .evo-cmp__table { width: max-content; min-width: 100%; table-layout: auto; }
	.evo-cmp--says .evo-cmp__corner, .evo-cmp--says .evo-cmp__table .evo-cmp__label { position: sticky; left: 0; z-index: 2; width: 104px; min-width: 104px; max-width: 104px; background: var(--evo-cmp-bg, var(--evo-white)) !important; }
	.evo-cmp--says .evo-cmp__table .evo-cmp__label { padding: 12px 10px 12px 0; font-size: 13.5px; line-height: 1.3; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--evo-navy) 10%, transparent), calc(-1 * var(--evo-gutter, 20px)) 0 0 var(--evo-cmp-bg, var(--evo-white)); }      /* the second shadow masks the gutter, so swiped cells never show to the left of the labels */
	.evo-cmp--says .evo-cmp__corner { box-shadow: calc(-1 * var(--evo-gutter, 20px)) 0 0 var(--evo-cmp-bg, var(--evo-white)); }
	.evo-cmp--says .evo-cmp__table .evo-cmp__col, .evo-cmp--says .evo-cmp__table .evo-cmp__cell { width: 124px; min-width: 124px; max-width: 124px; }
	.evo-cmp__hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; font-family: var(--e-global-typography-subheadcaps-font-family), sans-serif; font-weight: var(--evo-caps-w, 600); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; line-height: 1; color: var(--evo-slate); }
	.evo-cmp__hint::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--evo-ico-arrow) center / 14px 14px no-repeat; mask: var(--evo-ico-arrow) center / 14px 14px no-repeat; }
	.evo-cmp--says .evo-cmp__table .evo-cmp__col { padding: 12px 8px 10px; font-size: 9px; letter-spacing: .1em; hyphens: manual; }
	.evo-cmp--says .evo-cmp__table .evo-cmp__col.is-ours { font-size: 10px; padding-top: 16px; }
	.evo-cmp--says .evo-cmp__table tr > :last-child { padding-right: var(--evo-gutter, 20px); box-sizing: content-box; }
	.evo-cmp__say { gap: 5px; padding: 10px 8px 11px; } .evo-cmp__note { font-size: 12px; line-height: 1.3; max-width: none; }
	.evo-cmp--says .evo-cmp__mark--yes { width: 22px; height: 22px; } .evo-cmp--says .evo-cmp__mark--yes svg { width: 13px; height: 13px; } .evo-cmp--says .evo-cmp__mark { min-height: 22px; }
}

/* motion (only where a page runs the scroll reveal: html.evo-anim + .is-in from home.js): the marks tick in row by row */
@media (prefers-reduced-motion: no-preference) {
	html.evo-anim .evo-cmp .evo-cmp__mark { transition: opacity 400ms var(--evo-ease), transform 400ms var(--evo-ease); transition-delay: calc(240ms + var(--evo-r, 0) * 70ms); }
	html.evo-anim .evo-cmp:not(.is-in) .evo-cmp__mark { opacity: 0; transform: scale(.6); }
}

/* ---------------------------------------------------------------- SPINNING TEXT BADGE [evo_badge text="…"] — a slow-turning ring of caps around a still mark
   Colour = currentColor (set by the block it sits in). Size: --evo-badge-size. One turn: --evo-badge-speed. Still for reduced motion. */
.evo-badge { position: relative; display: inline-block; width: var(--evo-badge-size, 164px); height: var(--evo-badge-size, 164px); border-radius: 50%; color: var(--evo-page); background: color-mix(in srgb, var(--evo-navy-deep) 38%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); line-height: 0; }
.evo-badge svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.evo-badge__ring { transform-origin: 50% 50%; animation: evo-badge-spin var(--evo-badge-speed, 28s) linear infinite; will-change: transform; }      /* the whole ring SVG turns; the mark is its own still SVG */
.evo-badge__ring text { font-family: var(--e-global-typography-subheadcaps-font-family), sans-serif; font-weight: var(--evo-caps-w, 600); font-size: 17px; letter-spacing: .06em; text-transform: uppercase; fill: currentColor; }
.evo-badge__mark { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes evo-badge-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .evo-badge__ring { animation: none; } }
.elementor-editor-active .evo-badge__ring { animation-play-state: paused; }

/* ---------------------------------------------------------------- FAQ — a calm accordion: questions in the functional sans (Neue Haas, not New Spirit: too heavy for a list),
   fine hairlines, one open at a time. The mark is ONE gesture: a plus in a ring that turns 45° into a close mark as the ring fills. */
.evo-faq { width: 100%; }
.evo-faq__item { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--evo-navy) 10%, transparent); }      /* a rule between questions, not a box */
.evo-faq__item:first-child { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--evo-navy) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--evo-navy) 10%, transparent); }
.evo-faq .evo-faq__q { margin: 0; font-size: inherit; line-height: inherit; }
.evo-faq .evo-faq__btn {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0; width: 100%; margin: 0; padding: 21px 2px; text-align: left; cursor: pointer; white-space: normal;
	background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--evo-navy) !important; -webkit-tap-highlight-color: transparent;
	font-family: var(--evo-nav-sans, var(--e-global-typography-subheadcaps-font-family), sans-serif); font-weight: 500; font-style: normal; font-size: clamp(17px, 1.3vw, 19px); letter-spacing: 0; line-height: 1.35; text-transform: none;      /* Neue Haas, the Text cut (drawn for this size) */
}
.evo-faq .evo-faq__btn > span { padding-right: 24px; transition: transform var(--evo-t-hover) var(--evo-ease); }
.evo-faq .evo-faq__btn:focus-visible { outline: 1.5px solid var(--evo-navy); outline-offset: -2px; }
.evo-faq__mark { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--evo-navy); transition: background-color var(--evo-t-hover) var(--evo-ease), transform var(--evo-t-section) var(--evo-ease); }
.evo-faq__mark::before, .evo-faq__mark::after { content: ""; position: absolute; left: 9.5px; right: 9.5px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--evo-navy); transition: background-color var(--evo-t-hover) var(--evo-ease); }
.evo-faq__mark::after { transform: rotate(90deg); }
.evo-faq__item.is-open .evo-faq__mark { background: var(--evo-navy); transform: rotate(45deg); }
.evo-faq__item.is-open .evo-faq__mark::before, .evo-faq__item.is-open .evo-faq__mark::after { background: var(--evo-white); }
@media (hover: hover) {
	.evo-faq__btn:hover > span { transform: translateX(4px); }
	.evo-faq__btn:hover .evo-faq__mark { background: var(--evo-navy); } .evo-faq__btn:hover .evo-faq__mark::before, .evo-faq__btn:hover .evo-faq__mark::after { background: var(--evo-white); }
}
.evo-faq__a { display: grid; grid-template-rows: 1fr; }
.evo-faq.is-live .evo-faq__a { grid-template-rows: 0fr; transition: grid-template-rows var(--evo-t-section) var(--evo-ease); }
.evo-faq.is-live .evo-faq__item.is-open .evo-faq__a { grid-template-rows: 1fr; }
.evo-faq__inner { min-height: 0; overflow: hidden; }
.evo-faq.is-live .evo-faq__inner { opacity: 0; transition: opacity var(--evo-t-hover) var(--evo-ease), visibility 0s linear var(--evo-t-section); }
.evo-faq.is-live .evo-faq__item:not(.is-open) .evo-faq__inner { visibility: hidden; }
.evo-faq.is-live .evo-faq__item.is-open .evo-faq__inner { opacity: 1; transition: opacity var(--evo-t-section) var(--evo-ease) 120ms, visibility 0s; }
.evo-faq__inner > * { margin: 0 0 10px; max-width: 44em; padding: 0 64px 0 2px; font-family: var(--e-global-typography-body-font-family), sans-serif; font-weight: 300; font-size: 16px; line-height: 1.6; color: var(--evo-charcoal); }
.evo-faq__inner > *:first-child { padding-top: 0; }
.evo-faq__inner > *:last-child { margin-bottom: 0; padding-bottom: 26px; }
.evo-faq__inner a { color: var(--evo-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 767px) {
	.evo-faq .evo-faq__btn { padding: 18px 0; font-size: 17px; } .evo-faq .evo-faq__btn > span { padding-right: 14px; }
	.evo-faq__mark { width: 28px; height: 28px; } .evo-faq__mark::before, .evo-faq__mark::after { left: 8.5px; right: 8.5px; }
	.evo-faq__inner > * { padding: 0 8px 0 0; font-size: 15.5px; } .evo-faq__inner > *:last-child { padding-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) { .evo-faq.is-live .evo-faq__a, .evo-faq.is-live .evo-faq__inner, .evo-faq__mark, .evo-faq__mark::before, .evo-faq__mark::after, .evo-faq .evo-faq__btn > span { transition: none; } }

.evo-faq__inner ul, .evo-faq__inner ol { padding-left: 1.2em; } .evo-faq__inner li { margin: 0 0 6px; }

/* comparison notes: light like all copy; the Evopure "yes" note keeps its 500 emphasis */
.evo-cmp__note { font-weight: 300 !important; }
.is-ours .evo-cmp__note { font-weight: 500 !important; }