/* ==========================================================================
   ZadKeys Commerce — components.css
   Cards, pipeline, checklists, chips, FAQ, duo panels, price demos, flow.
   ========================================================================== */

/* --- Card grids --- */
.zc-card-grid { display: grid; gap: var(--space-5); }
.zc-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.zc-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) {
	.zc-card-grid--2, .zc-card-grid--3 { grid-template-columns: 1fr; }
}
.zc-card {
	background: var(--color-ink-soft); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-5);
	transition: border-color var(--transition), transform var(--transition);
}
.zc-card:hover { border-color: rgba(184, 243, 69, 0.45); }
.zc-section--cream .zc-card { background: #fff; border-color: #e5e0d5; box-shadow: 0 1px 2px rgba(13, 17, 23, 0.05); }
.zc-card h3 { font-size: var(--fs-h3); }
.zc-card p { color: var(--color-muted); font-size: var(--fs-small); margin: 0; }
.zc-section--cream .zc-card p { color: #4b5563; }

/* --- Split layout --- */
.zc-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.zc-split--start { align-items: start; }
@media (max-width: 900px) { .zc-split { grid-template-columns: 1fr; } }

/* --- Checklists --- */
.zc-checklist { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.zc-checklist li { position: relative; padding-inline-start: 1.9rem; color: var(--color-text); }
.zc-checklist li::before {
	content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.18em;
	inline-size: 1.15rem; block-size: 1.15rem; border-radius: var(--radius-full);
	background-repeat: no-repeat; background-position: center; background-size: 0.7rem;
}
.zc-checklist--ok li::before { background-color: rgba(184, 243, 69, 0.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23b8f345' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.zc-checklist--warn li::before { background-color: rgba(251, 191, 36, 0.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v9m0 4v.5' fill='none' stroke='%23fbbf24' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* --- Pipeline (numbered steps) --- */
.zc-pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.zc-pipeline__step { display: flex; flex-direction: column; gap: var(--space-3); position: relative; }
.zc-pipeline__index {
	display: inline-grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem;
	border-radius: var(--radius-full); background: var(--color-lime); color: var(--color-lime-ink);
	font-family: var(--font-mono); font-weight: 700;
}
.zc-pipeline__title { font-size: 1rem; margin: 0; }
.zc-pipeline__desc { font-size: var(--fs-small); color: #4b5563; margin: 0; }
@media (max-width: 900px) { .zc-pipeline { grid-template-columns: 1fr; } .zc-pipeline__step { flex-direction: row; align-items: flex-start; } }

/* --- License flow --- */
.zc-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.zc-flow__step { background: #fff; border: 1px solid #e5e0d5; border-radius: var(--radius-lg); padding: var(--space-5); }
.zc-flow__step h3 { font-size: 1rem; }
.zc-flow__step p { color: #4b5563; font-size: var(--fs-small); margin: 0; }
.zc-flow__icon { display: inline-grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: var(--radius-full); background: rgba(184, 243, 69, 0.16); color: #3f6212; margin-block-end: var(--space-3); }
@media (max-width: 900px) { .zc-flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .zc-flow { grid-template-columns: 1fr; } }

/* --- Chips --- */
.zc-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.zc-chip-static {
	font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600;
	padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
	border: 1px solid var(--color-border); color: var(--color-text); background: var(--color-ink-soft);
}

/* --- Security cards --- */
.zc-security-card { display: grid; gap: var(--space-2); align-content: start; }
.zc-security-card__icon { color: var(--color-lime); }
.zc-security-card h3 { margin: 0; }

/* --- Duo panels (ownership + WooCommerce) --- */
.zc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.zc-duo__panel { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--color-ink-soft); }
.zc-duo__panel h2 { font-size: 1.4rem; }
.zc-duo__panel p { color: var(--color-muted); margin: 0; }
.zc-duo__icon { display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: var(--radius-md); background: rgba(139, 92, 246, 0.16); color: var(--color-plum-soft); margin-block-end: var(--space-4); }
@media (max-width: 800px) { .zc-duo { grid-template-columns: 1fr; } }

/* --- Price demo --- */
.zc-price-demo__rows { margin: 0; display: grid; gap: var(--space-3); }
.zc-price-demo__rows > div { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); border-block-end: 1px dashed var(--color-border); }
.zc-price-demo__rows dt { color: var(--color-muted); font-size: var(--fs-small); }
.zc-price-demo__rows dd { margin: 0; font-family: var(--font-mono); font-weight: 700; text-align: end; }
.zc-price-demo__result dd { color: var(--color-lime); }
.zc-note { font-size: 0.82rem; color: var(--color-muted); margin-block-start: var(--space-4); }

/* --- FAQ accordion --- */
.zc-faq { display: grid; gap: var(--space-3); }
.zc-faq__item { background: #fff; border: 1px solid #e5e0d5; border-radius: var(--radius-md); overflow: hidden; }
.zc-faq__q { margin: 0; font-size: 1rem; }
.zc-faq__btn {
	width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
	background: none; border: 0; padding: var(--space-4) var(--space-5); cursor: pointer;
	font: inherit; font-weight: 700; color: var(--color-ink); text-align: start;
}
.zc-faq__chev { display: inline-flex; color: var(--color-plum); transition: transform var(--transition); }
.zc-faq__btn[aria-expanded="true"] .zc-faq__chev { transform: rotate(180deg); }
.zc-faq__a { padding: 0 var(--space-5) var(--space-4); }
.zc-faq__a p { margin: 0; color: #374151; font-size: var(--fs-small); }

/* --- Product highlight --- */
.zc-highlight__card { position: sticky; inset-block-start: 90px; }
.zc-product-mini { background: var(--color-ink); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.zc-product-mini h3 { font-size: 1.4rem; margin-block-end: var(--space-2); }
.zc-product-mini__price { font-size: 1.6rem; font-weight: 800; color: var(--color-lime); margin-block-end: var(--space-3); }
.zc-product-mini__price del { color: var(--color-muted); font-size: 1.05rem; font-weight: 500; margin-inline-end: var(--space-2); }
.zc-product-mini__desc { color: var(--color-muted); font-size: var(--fs-small); margin: 0; }
@media (max-width: 900px) { .zc-highlight__card { position: static; } }

/* --- Final CTA --- */
.zc-final-cta { background:
	radial-gradient(40rem 20rem at 50% 120%, rgba(184, 243, 69, 0.12), transparent 65%),
	var(--color-ink); text-align: center; }
.zc-final-cta__inner { display: grid; gap: var(--space-4); justify-items: center; padding-block: var(--space-7); }
.zc-final-cta h2 { font-size: var(--fs-h2); max-width: 22ch; }
.zc-final-cta p { color: var(--color-muted); max-width: 56ch; }

/* --- Forms (search, contact placeholders) --- */
input[type="search"], input[type="text"], input[type="email"], input[type="password"], textarea, select {
	font: inherit; color: var(--color-text); background: var(--color-ink-soft);
	border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.7rem 1rem; max-width: 100%;
}
label { font-weight: 600; font-size: var(--fs-small); display: block; margin-block-end: var(--space-1); }

/* --- Post cards --- */
.zc-post-list { display: grid; gap: var(--space-4); }
.zc-post-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); background: var(--color-ink-soft); }
.zc-post-card__title { font-size: 1.15rem; margin: 0 0 var(--space-2); }
.zc-post-card__title a { color: var(--color-text); }
.zc-post-card__excerpt { color: var(--color-muted); font-size: var(--fs-small); }
.zc-meta { color: var(--color-muted); font-size: var(--fs-small); font-family: var(--font-mono); }