/* Purisco Design Kit – Ingredient FAQ (canvas boards FAQ-Desktop / FAQ-Mobile, approved by Meir 2026-10-07).
   Band = the site's light-blue dotted band, identical to the catalog header band (Meir 2026-10-07).
   Place the widget in a full-width container with no padding so the band runs edge to edge. */
.purisco-faq {
	--pfq-navy: var(--e-global-color-text, #08294F); --pfq-blue: var(--e-global-color-primary, #0A6ED4);
	--pfq-muted: #4A6380; --pfq-body: #3A5573; --pfq-line: #C9D6E6; --pfq-ease: cubic-bezier(.22, .61, .36, 1);
	box-sizing: border-box; width: 100%; margin: 0;
	padding: 112px max(72px, calc((100% - 1296px) / 2)) 120px;
	/* Same layers as the site's page band (Kit CSS .purisco-page-band, catalog header): dots, white halo top right, soft blue glow bottom left, vertical tint. */
	background-color: #E3F0FC;
	background-image: radial-gradient(rgba(10, 110, 212, .06) .6px, transparent .7px), radial-gradient(60% 75% at 86% 0%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(55% 65% at 6% 100%, rgba(140, 192, 240, .45) 0%, rgba(140, 192, 240, 0) 72%), linear-gradient(180deg, #D3E7FA 0%, #EAF4FD 100%);
	background-size: 3px 3px, auto, auto, auto;
	color: var(--pfq-navy); font-family: inherit;
}
.purisco-faq *, .purisco-faq *::before, .purisco-faq *::after { box-sizing: border-box; }
.purisco-faq__inner { display: flex; flex-direction: column; gap: 44px; }
.purisco-faq h2.purisco-faq__heading {
	margin: 0; color: var(--pfq-navy); font-family: 'Newsreader', serif; font-weight: 500; font-size: 48px; line-height: 1.06; letter-spacing: -0.02em; text-transform: none;
}
.purisco-faq__list { display: flex; flex-direction: column; border-top: 1px solid var(--pfq-line); }

.purisco-faq__item { border-bottom: 1px solid var(--pfq-line); transition: background-color 240ms var(--pfq-ease), box-shadow 240ms var(--pfq-ease); }
.purisco-faq__item[open] { margin: 8px 0; border-bottom-color: transparent; border-radius: 14px; background: #FFFFFF; box-shadow: 0 10px 30px rgba(8, 41, 79, .07); }

.purisco-faq__q {
	display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; column-gap: 16px;
	padding: 26px 24px; list-style: none; cursor: pointer; color: var(--pfq-navy);
}
.purisco-faq--numbered .purisco-faq__q { grid-template-columns: 56px minmax(0, 1fr) 48px; column-gap: 0; }
.purisco-faq__q::-webkit-details-marker, .purisco-faq__q::marker { display: none; content: ""; }
.purisco-faq__q:focus { outline: none; }
.purisco-faq__q:focus-visible { outline: 2px solid var(--pfq-blue); outline-offset: 4px; border-radius: 12px; }

.purisco-faq__num { display: none; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--pfq-muted); font-variant-numeric: tabular-nums; }
.purisco-faq--numbered .purisco-faq__num { display: block; }

.purisco-faq h3.purisco-faq__title {
	margin: 0; color: inherit; font-family: 'Newsreader', serif; font-weight: 500; font-size: 24px; line-height: 1.25; letter-spacing: 0; text-transform: none;
	transition: color 180ms var(--pfq-ease);
}
.purisco-faq__icon {
	justify-self: end; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 7px;
	border: 1px solid var(--pfq-line); background: #FFFFFF; color: var(--pfq-navy);
	transition: background-color 180ms var(--pfq-ease), border-color 180ms var(--pfq-ease), color 180ms var(--pfq-ease);
}
.purisco-faq__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

@media (hover: hover) {
	.purisco-faq__q:hover .purisco-faq__title { color: var(--pfq-blue); }
	.purisco-faq__q:hover .purisco-faq__icon { border-color: var(--pfq-blue); }
}
.purisco-faq__item[open] .purisco-faq__title { color: var(--pfq-blue); }
.purisco-faq__item[open] .purisco-faq__icon { border-color: var(--pfq-blue); background: var(--pfq-blue); color: #FFFFFF; }
.purisco-faq__item[open] .purisco-faq__plus { display: none; }

.purisco-faq__a { padding: 0 120px 30px 24px; font-size: 17px; line-height: 1.65; color: var(--pfq-body); }
.purisco-faq--numbered .purisco-faq__a { padding-left: 80px; }
.purisco-faq__a > * { max-width: 760px; }
.purisco-faq__a p, .purisco-faq__a ul, .purisco-faq__a ol { margin: 0 0 .8em; }
.purisco-faq__a > :last-child { margin-bottom: 0; }
.purisco-faq__a a { color: var(--pfq-blue); text-decoration: underline; text-underline-offset: 2px; }
.purisco-faq__item[open] .purisco-faq__a { animation: purisco-faq-in 420ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes purisco-faq-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Tablet */
@media (max-width: 1024px) {
	.purisco-faq { padding: 88px 40px 96px; }
	.purisco-faq__inner { gap: 36px; }
	.purisco-faq h2.purisco-faq__heading { font-size: 40px; }
	.purisco-faq__a { padding-right: 64px; }
}

/* Mobile (board FAQ-Mobile): no numbers, 44px circle, card padding when open. */
@media (max-width: 767px) {
	.purisco-faq { padding: 64px 20px 72px; }
	.purisco-faq__inner { gap: 28px; }
	.purisco-faq h2.purisco-faq__heading { font-size: 32px; line-height: 1.08; letter-spacing: -0.015em; }
	.purisco-faq__item[open] { margin: 6px 0; box-shadow: 0 8px 24px rgba(8, 41, 79, .07); }
	.purisco-faq__q, .purisco-faq--numbered .purisco-faq__q { grid-template-columns: minmax(0, 1fr) 44px; column-gap: 16px; min-height: 72px; padding: 18px 0; -webkit-tap-highlight-color: transparent; }
	.purisco-faq__item[open] .purisco-faq__q { padding: 18px 16px; }
	.purisco-faq--numbered .purisco-faq__num { display: none; }
	.purisco-faq h3.purisco-faq__title { font-size: 20px; }
	.purisco-faq__icon { width: 44px; height: 44px; }
	.purisco-faq__icon svg { width: 16px; height: 16px; stroke-width: 1.7; }
	.purisco-faq__a, .purisco-faq--numbered .purisco-faq__a { padding: 0 16px 22px; font-size: 16px; line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
	.purisco-faq__item, .purisco-faq__title, .purisco-faq__icon { transition: none; }
	.purisco-faq__item[open] .purisco-faq__a { animation: none; }
}

/* Editor-only note when the previewed ingredient has no questions. */
.purisco-faq-empty { margin: 0; padding: 16px; border: 1px dashed #C9D6E6; color: #4A6380; font-size: 14px; }