/* ============================================================
   Valabi AI Product Importer — product page content (front end)
   Styles the .vpi-* blocks the importer writes into descriptions
   and the how-to tab. Follows the theme's primary colour (Flatsome
   --fs-color-primary / --primary-color), RTL-first, mobile-first.
   ============================================================ */

.vpi-desc {
	/* --vpi-color = the shop's chosen colour (Settings → ظاهر); else the theme's primary colour */
	--vpi-accent: var(--vpi-color, var(--fs-color-primary, var(--primary-color, #28a35b)));
	--vpi-ink: #1b291d;
	--vpi-muted: #4e5d52;
	--vpi-soft: color-mix(in srgb, var(--vpi-accent) 9%, #fff);
	--vpi-line: color-mix(in srgb, var(--vpi-accent) 18%, #e7ebe8);
	--vpi-radius: 16px;
	color: var(--vpi-ink);
	line-height: 2;
	font-size: 15px;
	max-width: none; /* full width of the tab (was 880px: a narrow box inside a 1380px column) */
	overflow-wrap: anywhere; /* long ingredient names (Hydroxypinacolone Retinoate) must never widen the page */
}
.vpi-desc * { box-sizing: border-box; min-width: 0; }
.vpi-desc p { margin: 0 0 10px; }

.vpi-desc .vpi-block { margin: 0 0 28px; }
.vpi-desc .vpi-h {
	position: relative;
	margin: 0 0 14px;
	padding-inline-start: 14px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--vpi-ink);
}
.vpi-desc .vpi-h::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.25em;
	bottom: 0.25em;
	width: 4px;
	border-radius: 4px;
	background: var(--vpi-accent);
}

/* Intro */
.vpi-desc .vpi-intro {
	padding: 20px 22px;
	border-radius: var(--vpi-radius);
	background: linear-gradient(135deg, var(--vpi-soft), #fff 70%);
	border: 1px solid var(--vpi-line);
}
.vpi-desc .vpi-lead { font-size: 16px; font-weight: 600; color: var(--vpi-ink); }
.vpi-desc .vpi-intro p:last-child { margin-bottom: 0; color: var(--vpi-muted); }

/* Feature checklist */
.vpi-desc .vpi-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vpi-desc .vpi-checks li {
	position: relative;
	margin: 0;
	padding: 10px 14px;
	padding-inline-start: 44px;
	background: #fff;
	border: 1px solid var(--vpi-line);
	border-radius: 12px;
}
.vpi-desc .vpi-checks li::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--vpi-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

/* Ingredient / technology cards */
.vpi-desc .vpi-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 12px; }
.vpi-desc .vpi-card {
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--vpi-soft);
	border: 1px solid var(--vpi-line);
}
.vpi-desc .vpi-card__name { margin: 0 0 4px; font-weight: 700; color: var(--vpi-accent); line-height: 1.6; }
.vpi-desc .vpi-card__text { margin: 0; font-size: 14px; line-height: 1.9; color: var(--vpi-muted); }

/* Suitable-for callout */
.vpi-desc .vpi-callout {
	padding: 16px 20px;
	border-radius: var(--vpi-radius);
	background: #fff;
	border: 1px dashed var(--vpi-accent);
}
.vpi-desc .vpi-callout__title { margin: 0 0 4px; font-weight: 700; color: var(--vpi-accent); }
.vpi-desc .vpi-callout p:last-child { margin: 0; }

/* Numbered steps */
.vpi-desc .vpi-steps { list-style: none; counter-reset: vpi-step; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.vpi-desc .vpi-steps li {
	counter-increment: vpi-step;
	position: relative;
	margin: 0;
	padding: 12px 16px;
	padding-inline-start: 56px;
	background: #fff;
	border: 1px solid var(--vpi-line);
	border-radius: 12px;
	min-height: 48px;
}
.vpi-desc .vpi-steps li::before {
	content: counter(vpi-step);
	position: absolute;
	inset-inline-start: 12px;
	top: 12px;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: var(--vpi-accent);
	color: #fff;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
}

/* Warning box */
.vpi-desc .vpi-warn {
	padding: 14px 18px;
	border-radius: 14px;
	background: #fff8ec;
	border: 1px solid #f1d7a8;
}
.vpi-desc .vpi-warn__title { margin: 0 0 6px; font-weight: 700; color: #9a5b00; }
.vpi-desc .vpi-warn__title::before { content: "⚠ "; }
.vpi-desc .vpi-warn ul { margin: 0; padding-inline-start: 20px; }
.vpi-desc .vpi-warn li { margin: 0 0 4px; color: #5b4521; }

/* FAQ accordion */
.vpi-desc .vpi-faq { display: grid; gap: 8px; }
.vpi-desc .vpi-faq__item { border: 1px solid var(--vpi-line); border-radius: 12px; background: #fff; overflow: hidden; }
.vpi-desc .vpi-faq__item summary {
	cursor: pointer;
	list-style: none;
	padding: 12px 16px;
	padding-inline-end: 44px;
	font-weight: 600;
	position: relative;
}
.vpi-desc .vpi-faq__item summary::-webkit-details-marker { display: none; }
.vpi-desc .vpi-faq__item summary::after {
	content: "+";
	position: absolute;
	inset-inline-end: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--vpi-accent);
	font-size: 20px;
	font-weight: 700;
}
.vpi-desc .vpi-faq__item[open] summary { background: var(--vpi-soft); }
.vpi-desc .vpi-faq__item[open] summary::after { content: "−"; }
.vpi-desc .vpi-faq__item p { margin: 0; padding: 10px 16px 14px; color: var(--vpi-muted); }

@media (max-width: 549px) {
	.vpi-desc { font-size: 14px; }
	.vpi-desc .vpi-intro { padding: 16px; }
	.vpi-desc .vpi-cards { grid-template-columns: 1fr; }
}


/* ============ Persian infographic block (.vpi-info) ============ */
.vpi-desc .vpi-info { padding: 18px; border-radius: var(--vpi-radius); background: var(--vpi-soft); border: 1px solid var(--vpi-line); }
.vpi-desc .vpi-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 10px; margin: 0 0 14px; }
.vpi-desc .vpi-stat { background: #fff; border-radius: 14px; padding: 12px 10px; text-align: center; border: 1px solid var(--vpi-line); }
.vpi-desc .vpi-stat__v { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.3; color: var(--vpi-accent); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.vpi-desc .vpi-stat__u { font-size: 13px; font-weight: 700; color: var(--vpi-muted); }
.vpi-desc .vpi-stat__l { margin: 2px 0 0; font-size: 13px; color: var(--vpi-muted); line-height: 1.6; }
.vpi-desc .vpi-badges { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vpi-desc .vpi-badges li { margin: 0; padding: 4px 14px; border-radius: 99px; background: var(--vpi-accent); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.8; }
.vpi-desc .vpi-flow__title { margin: 0 0 8px; font-weight: 700; }
.vpi-desc .vpi-flow { list-style: none; counter-reset: vpi-flow; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.vpi-desc .vpi-flow li { counter-increment: vpi-flow; position: relative; margin: 0; padding: 34px 12px 12px; background: #fff; border-radius: 14px; border: 1px solid var(--vpi-line); font-size: 13.5px; line-height: 1.8; }
.vpi-desc .vpi-flow li::before { content: counter(vpi-flow); position: absolute; top: 8px; inset-inline-start: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--vpi-accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
@media (max-width: 549px) {
	.vpi-desc .vpi-info { padding: 12px; }
	.vpi-desc .vpi-stat__v { font-size: 20px; }
}

/* Promotional infographic image */
.vpi-promo { margin: 0 0 28px; }
.vpi-promo img { display: block; width: 100%; height: auto; border-radius: 16px; }


/* =================================================================
   Styles (Settings → «ظاهر صفحهٔ محصول»). The plugin puts vpi-skin-*
   on <body>; the HTML of every product stays the same, so switching
   style re-styles all products at once. «کارت‌ها» = the base above.
   ================================================================= */

.vpi-w-narrow .vpi-desc { max-width: 880px; margin-inline: auto; }

/* ---- مینیمال: no boxes, thin rules, quiet ---- */
.vpi-skin-minimal .vpi-desc .vpi-intro { background: none; border: 0; border-radius: 0; padding: 0 0 6px; border-bottom: 1px solid #e6e6e6; }
.vpi-skin-minimal .vpi-desc .vpi-h { padding: 0 0 6px; border-bottom: 1px solid #e6e6e6; }
.vpi-skin-minimal .vpi-desc .vpi-h::before { display: none; }
.vpi-skin-minimal .vpi-desc .vpi-checks { gap: 0; }
.vpi-skin-minimal .vpi-desc .vpi-checks li { background: none; border: 0; border-radius: 0; border-bottom: 1px dashed #e4e4e4; padding: 8px 0; padding-inline-start: 26px; }
.vpi-skin-minimal .vpi-desc .vpi-checks li::before { content: "—"; background: none; color: var(--vpi-accent); width: auto; inset-inline-start: 0; }
.vpi-skin-minimal .vpi-desc .vpi-card { background: none; border: 0; border-inline-start: 2px solid var(--vpi-accent); border-radius: 0; padding: 4px 12px; }
.vpi-skin-minimal .vpi-desc .vpi-callout { border: 0; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; border-radius: 0; padding: 12px 0; }
.vpi-skin-minimal .vpi-desc .vpi-steps li, .vpi-skin-minimal .vpi-desc .vpi-flow li { background: none; border: 0; border-bottom: 1px solid #eee; border-radius: 0; }
.vpi-skin-minimal .vpi-desc .vpi-steps li::before, .vpi-skin-minimal .vpi-desc .vpi-flow li::before { background: none; color: var(--vpi-accent); border: 1px solid var(--vpi-accent); }
.vpi-skin-minimal .vpi-desc .vpi-info { background: none; border: 0; padding: 0; }
.vpi-skin-minimal .vpi-desc .vpi-stat { border: 0; border-bottom: 1px solid #eee; border-radius: 0; text-align: start; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vpi-skin-minimal .vpi-desc .vpi-stat__v { font-size: 18px; }
.vpi-skin-minimal .vpi-desc .vpi-badges li { background: none; color: var(--vpi-ink); border: 1px solid #ccc; border-radius: 6px; }
.vpi-skin-minimal .vpi-desc .vpi-faq__item { border: 0; border-bottom: 1px solid #eee; border-radius: 0; }
.vpi-skin-minimal .vpi-desc .vpi-faq__item[open] summary { background: none; }

/* ---- مجله‌ای: big lead, big headings, huge numbers ---- */
.vpi-skin-magazine .vpi-desc .vpi-intro { background: none; border: 0; padding: 0; }
.vpi-skin-magazine .vpi-desc .vpi-lead { font-size: 20px; font-weight: 800; line-height: 1.8; }
.vpi-skin-magazine .vpi-desc .vpi-h { font-size: 22px; font-weight: 800; padding-inline-start: 0; }
.vpi-skin-magazine .vpi-desc .vpi-h::before { position: static; display: block; width: 48px; height: 4px; margin-bottom: 8px; }
.vpi-skin-magazine .vpi-desc .vpi-info { background: none; border: 0; padding: 0; }
.vpi-skin-magazine .vpi-desc .vpi-stat { background: none; border: 0; border-inline-start: 3px solid var(--vpi-ink); border-radius: 0; text-align: start; padding: 4px 14px; }
.vpi-skin-magazine .vpi-desc .vpi-stat__v { font-size: 38px; line-height: 1.15; }
.vpi-skin-magazine .vpi-desc .vpi-badges li { background: none; color: var(--vpi-accent); padding: 0; font-weight: 800; font-size: 15px; }
.vpi-skin-magazine .vpi-desc .vpi-badges li:not(:last-child)::after { content: " ·"; color: #999; }
.vpi-skin-magazine .vpi-desc .vpi-checks li { background: none; border: 0; border-bottom: 1px solid #eee; border-radius: 0; font-size: 16px; }
.vpi-skin-magazine .vpi-desc .vpi-card { background: #fff; border: 0; border-top: 4px solid var(--vpi-accent); border-radius: 0; box-shadow: 0 1px 0 #eee; }
.vpi-skin-magazine .vpi-desc .vpi-steps li, .vpi-skin-magazine .vpi-desc .vpi-flow li { background: none; border: 0; border-top: 3px solid var(--vpi-accent); border-radius: 0; }

/* ---- فنی: a spec sheet ---- */
.vpi-skin-technical .vpi-desc { font-variant-numeric: tabular-nums; }
.vpi-skin-technical .vpi-desc .vpi-intro { background: #f6f7f8; border-color: #e3e5e8; border-radius: 6px; }
.vpi-skin-technical .vpi-desc .vpi-h { background: #f1f2f4; border-radius: 4px; padding: 6px 12px; font-size: 15px; }
.vpi-skin-technical .vpi-desc .vpi-h::before { inset-inline-start: 0; border-radius: 4px 0 0 4px; }
.vpi-skin-technical .vpi-desc .vpi-info { background: #fff; border-color: #e3e5e8; border-radius: 6px; }
.vpi-skin-technical .vpi-desc .vpi-stats { grid-template-columns: 1fr; gap: 0; }
.vpi-skin-technical .vpi-desc .vpi-stat { display: grid; grid-template-columns: 1fr 1fr; align-items: center; text-align: start; border: 0; border-radius: 0; padding: 6px 12px; background: #fff; }
.vpi-skin-technical .vpi-desc .vpi-stat:nth-child(odd) { background: #f6f7f8; }
.vpi-skin-technical .vpi-desc .vpi-stat__v { order: 2; font-size: 15px; text-align: end; }
.vpi-skin-technical .vpi-desc .vpi-stat__l { order: 1; margin: 0; }
.vpi-skin-technical .vpi-desc .vpi-badges li { background: #1d2327; color: #fff; border-radius: 4px; font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0; line-height: 1.9; }
.vpi-skin-technical .vpi-desc .vpi-checks { gap: 0; border: 1px solid #e3e5e8; border-radius: 6px; overflow: hidden; }
.vpi-skin-technical .vpi-desc .vpi-checks li { border: 0; border-radius: 0; border-bottom: 1px solid #eef0f2; }
.vpi-skin-technical .vpi-desc .vpi-checks li:nth-child(even) { background: #f8f9fa; }
.vpi-skin-technical .vpi-desc .vpi-checks li::before { content: "▸"; background: none; color: var(--vpi-accent); font-size: 14px; }
.vpi-skin-technical .vpi-desc .vpi-cards { grid-template-columns: 1fr; gap: 0; border: 1px solid #e3e5e8; border-radius: 6px; overflow: hidden; }
.vpi-skin-technical .vpi-desc .vpi-card { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 12px; border: 0; border-bottom: 1px solid #eef0f2; border-radius: 0; background: #fff; }
.vpi-skin-technical .vpi-desc .vpi-steps li, .vpi-skin-technical .vpi-desc .vpi-flow li { border-radius: 6px; }
.vpi-skin-technical .vpi-desc .vpi-steps li::before, .vpi-skin-technical .vpi-desc .vpi-flow li::before { border-radius: 4px; }
.vpi-skin-technical .vpi-desc .vpi-faq__item { border-radius: 6px; }

/* ---- لوکس: space, hairlines, centred headings ---- */
.vpi-skin-luxury .vpi-desc { line-height: 2.2; --vpi-gold: color-mix(in srgb, var(--vpi-accent) 55%, #b08d57); }
.vpi-skin-luxury .vpi-desc .vpi-block { margin-bottom: 40px; }
.vpi-skin-luxury .vpi-desc .vpi-intro { background: none; border: 0; text-align: center; padding: 10px 6%; }
.vpi-skin-luxury .vpi-desc .vpi-lead { font-weight: 500; font-size: 17px; }
.vpi-skin-luxury .vpi-desc .vpi-h { text-align: center; padding: 0; font-weight: 600; letter-spacing: .02em; }
.vpi-skin-luxury .vpi-desc .vpi-h::before { position: static; display: block; width: 44px; height: 1px; margin: 0 auto 10px; background: var(--vpi-gold); }
.vpi-skin-luxury .vpi-desc .vpi-info { background: none; border: 0; border-top: 1px solid var(--vpi-gold); border-bottom: 1px solid var(--vpi-gold); border-radius: 0; }
.vpi-skin-luxury .vpi-desc .vpi-stat { background: none; border: 0; }
.vpi-skin-luxury .vpi-desc .vpi-stat__v { font-weight: 500; color: var(--vpi-gold); }
.vpi-skin-luxury .vpi-desc .vpi-badges { justify-content: center; }
.vpi-skin-luxury .vpi-desc .vpi-badges li { background: none; color: var(--vpi-ink); border-bottom: 1px solid var(--vpi-gold); border-radius: 0; font-weight: 500; }
.vpi-skin-luxury .vpi-desc .vpi-checks { max-width: 720px; margin-inline: auto; }
.vpi-skin-luxury .vpi-desc .vpi-checks li { background: none; border: 0; text-align: center; padding-inline-start: 14px; }
.vpi-skin-luxury .vpi-desc .vpi-checks li::before { content: "·"; position: static; display: inline; background: none; color: var(--vpi-gold); font-size: 22px; margin-inline-end: 8px; transform: none; }
.vpi-skin-luxury .vpi-desc .vpi-card { background: none; border: 1px solid color-mix(in srgb, var(--vpi-gold) 40%, #fff); border-radius: 2px; text-align: center; }
.vpi-skin-luxury .vpi-desc .vpi-card__name { color: var(--vpi-gold); }
.vpi-skin-luxury .vpi-desc .vpi-callout { border: 0; text-align: center; }
.vpi-skin-luxury .vpi-desc .vpi-steps li, .vpi-skin-luxury .vpi-desc .vpi-flow li { background: none; border: 0; border-bottom: 1px solid #eee; border-radius: 0; }
.vpi-skin-luxury .vpi-desc .vpi-steps li::before, .vpi-skin-luxury .vpi-desc .vpi-flow li::before { background: none; color: var(--vpi-gold); border: 1px solid var(--vpi-gold); border-radius: 50%; }
.vpi-skin-luxury .vpi-desc .vpi-faq__item { border: 0; border-bottom: 1px solid #eee; border-radius: 0; }

/* =================================================================
   Variety (Settings → «تنوع بین محصولات»): each product gets
   vpi-var-0/1/2 from its id, so a shop's pages don't all look alike.
   0 = the style as designed.
   ================================================================= */
.vpi-var-1 .vpi-desc .vpi-checks { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.vpi-var-1 .vpi-desc .vpi-steps { position: relative; gap: 14px; }
.vpi-var-1 .vpi-desc .vpi-steps::before { content: ""; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 26px; width: 2px; background: color-mix(in srgb, var(--vpi-accent) 30%, #fff); }
.vpi-var-1 .vpi-desc .vpi-steps li { background: none; border: 0; padding-top: 6px; }
.vpi-var-1 .vpi-desc .vpi-steps li::before { border-radius: 50%; z-index: 1; }
.vpi-var-1 .vpi-desc .vpi-cards { grid-template-columns: 1fr; }

.vpi-var-2 .vpi-desc .vpi-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.vpi-var-2 .vpi-desc .vpi-checks li { flex: 1 1 260px; }
.vpi-var-2 .vpi-desc .vpi-steps { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.vpi-var-2 .vpi-desc .vpi-steps li { padding-top: 46px; padding-inline-start: 16px; }
.vpi-var-2 .vpi-desc .vpi-steps li::before { top: 10px; }
.vpi-var-2 .vpi-desc .vpi-cards { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }
.vpi-var-2 .vpi-desc .vpi-lead { font-size: 18px; }

/* Technical = a spec sheet: its key-function rows stay one per line whatever the layout variety
   (vpi-var-2's narrow card grid squeezed the text column to one letter per line). Doubled class
   for specificity over .vpi-var-* (same cascade layer, earlier in the file). */
.vpi-skin-technical.vpi-skin-technical .vpi-desc .vpi-cards { grid-template-columns: 1fr; }
.vpi-skin-technical .vpi-desc .vpi-card { grid-template-columns: minmax(110px, 30%) minmax(0, 1fr); }
.vpi-skin-technical .vpi-desc .vpi-card > * { min-width: 0; overflow-wrap: break-word; word-break: normal; }
@media (max-width: 549px) { .vpi-skin-technical .vpi-desc .vpi-card { grid-template-columns: 1fr; gap: 2px; } }
/* No card text may collapse to a letter-wide column in any style. */
.vpi-desc .vpi-card__text, .vpi-desc .vpi-card__name { min-width: 0; word-break: normal; overflow-wrap: break-word; }

/* =================================================================
   0.12.0 — five more styles for Iranian shops + two shop controls
   (corners, bullet icon). Same markup as every other style.
   ================================================================= */

/* ---- پاستلی: rounded, airy, K-beauty pastel ---- */
.vpi-skin-soft .vpi-desc { --vpi-soft: color-mix(in srgb, var(--vpi-accent) 12%, #fff); --vpi-line: color-mix(in srgb, var(--vpi-accent) 14%, #fff); }
.vpi-skin-soft .vpi-desc .vpi-intro { border: 0; border-radius: 28px; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--vpi-accent) 20%, #fff), transparent 60%), radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--vpi-accent) 10%, #fff8f3), #fff 70%); }
.vpi-skin-soft .vpi-desc .vpi-h { display: inline-flex; align-items: center; gap: 8px; padding: 4px 16px 4px 14px; border-radius: 999px; background: var(--vpi-soft); color: var(--vpi-accent); font-size: 16px; }
.vpi-skin-soft .vpi-desc .vpi-h::before { position: static; width: 8px; height: 8px; border-radius: 50%; }
.vpi-skin-soft .vpi-desc .vpi-checks { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.vpi-skin-soft .vpi-desc .vpi-checks li { border: 0; border-radius: 18px; background: var(--vpi-soft); }
.vpi-skin-soft .vpi-desc .vpi-checks li::before { background: #fff; color: var(--vpi-accent); box-shadow: 0 2px 6px color-mix(in srgb, var(--vpi-accent) 25%, transparent); }
.vpi-skin-soft .vpi-desc .vpi-card { border: 0; border-radius: 24px; background: linear-gradient(160deg, var(--vpi-soft), #fff); box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--vpi-accent) 60%, transparent); }
.vpi-skin-soft .vpi-desc .vpi-callout { border: 0; border-radius: 24px; background: color-mix(in srgb, var(--vpi-accent) 7%, #fffaf5); }
.vpi-skin-soft .vpi-desc .vpi-steps li, .vpi-skin-soft .vpi-desc .vpi-flow li { border: 0; border-radius: 20px; background: var(--vpi-soft); }
.vpi-skin-soft .vpi-desc .vpi-steps li::before, .vpi-skin-soft .vpi-desc .vpi-flow li::before { border-radius: 50%; background: #fff; color: var(--vpi-accent); }
.vpi-skin-soft .vpi-desc .vpi-info { border: 0; border-radius: 28px; }
.vpi-skin-soft .vpi-desc .vpi-stat { border: 0; border-radius: 22px; }
.vpi-skin-soft .vpi-desc .vpi-badges li { background: #fff; color: var(--vpi-accent); box-shadow: inset 0 0 0 1px var(--vpi-line); }
.vpi-skin-soft .vpi-desc .vpi-warn { border: 0; border-radius: 22px; }
.vpi-skin-soft .vpi-desc .vpi-faq__item { border: 0; border-radius: 18px; background: var(--vpi-soft); }
.vpi-skin-soft .vpi-desc .vpi-faq__item[open] summary { background: none; color: var(--vpi-accent); }

/* ---- پررنگ: solid colour headers, strong contrast, promotional ---- */
.vpi-skin-bold .vpi-desc .vpi-intro { border: 0; border-radius: 14px; background: var(--vpi-accent); color: #fff; }
.vpi-skin-bold .vpi-desc .vpi-intro .vpi-lead, .vpi-skin-bold .vpi-desc .vpi-intro p:last-child { color: #fff; }
.vpi-skin-bold .vpi-desc .vpi-intro p:last-child { opacity: .9; }
.vpi-skin-bold .vpi-desc .vpi-lead { font-size: 18px; font-weight: 800; }
.vpi-skin-bold .vpi-desc .vpi-h { padding: 9px 16px; border-radius: 10px; background: var(--vpi-ink); color: #fff; font-size: 16px; }
.vpi-skin-bold .vpi-desc .vpi-h::before { inset-inline-start: auto; inset-inline-end: 14px; top: 50%; bottom: auto; width: 26px; height: 6px; transform: translateY(-50%); border-radius: 3px; }
.vpi-skin-bold .vpi-desc .vpi-checks li { border: 0; border-inline-start: 5px solid var(--vpi-accent); border-radius: 6px; background: #f6f6f6; font-weight: 600; }
.vpi-skin-bold .vpi-desc .vpi-checks li::before { border-radius: 4px; }
.vpi-skin-bold .vpi-desc .vpi-card { border: 0; border-radius: 10px; background: var(--vpi-ink); }
.vpi-skin-bold .vpi-desc .vpi-card__name { color: color-mix(in srgb, var(--vpi-accent) 55%, #fff); }
.vpi-skin-bold .vpi-desc .vpi-card__text { color: #e4e4e4; }
.vpi-skin-bold .vpi-desc .vpi-callout { border: 0; border-radius: 12px; background: var(--vpi-accent); color: #fff; }
.vpi-skin-bold .vpi-desc .vpi-callout__title { color: #fff; font-size: 16px; }
.vpi-skin-bold .vpi-desc .vpi-steps li { border: 0; border-radius: 10px; background: #f6f6f6; padding-inline-start: 64px; }
.vpi-skin-bold .vpi-desc .vpi-steps li::before { top: 0; bottom: 0; inset-inline-start: 0; width: 46px; height: auto; border-radius: 10px 0 0 10px; display: grid; place-items: center; font-size: 18px; }
[dir="rtl"] .vpi-skin-bold .vpi-desc .vpi-steps li::before, .rtl .vpi-skin-bold .vpi-desc .vpi-steps li::before { border-radius: 0 10px 10px 0; }
.vpi-skin-bold .vpi-desc .vpi-info { border: 0; background: var(--vpi-ink); }
.vpi-skin-bold .vpi-desc .vpi-stat { border: 0; background: rgba(255, 255, 255, .08); }
.vpi-skin-bold .vpi-desc .vpi-stat__v { color: #fff; }
.vpi-skin-bold .vpi-desc .vpi-stat__u, .vpi-skin-bold .vpi-desc .vpi-stat__l, .vpi-skin-bold .vpi-desc .vpi-flow__title { color: #cfcfcf; }
.vpi-skin-bold .vpi-desc .vpi-flow li { border: 0; background: rgba(255, 255, 255, .08); color: #eee; }
.vpi-skin-bold .vpi-desc .vpi-faq__item { border: 2px solid var(--vpi-ink); border-radius: 10px; }
.vpi-skin-bold .vpi-desc .vpi-faq__item summary { font-weight: 800; }
.vpi-skin-bold .vpi-desc .vpi-faq__item[open] summary { background: var(--vpi-ink); color: #fff; }
.vpi-skin-bold .vpi-desc .vpi-faq__item[open] summary::after { color: #fff; }

/* ---- نسیم: clean and airy — white cards with a thin gradient edge, gradient numbers and ticks ---- */
.vpi-skin-breeze .vpi-desc { --vpi-g2: color-mix(in srgb, var(--vpi-accent) 45%, #6d8bff); --vpi-grad: linear-gradient(135deg, var(--vpi-accent), var(--vpi-g2)); }
.vpi-skin-breeze .vpi-desc :is(.vpi-intro, .vpi-card, .vpi-callout, .vpi-info, .vpi-faq__item, .vpi-checks li, .vpi-steps li, .vpi-flow li, .vpi-stat) {
	border: 1px solid transparent;
	border-radius: 16px;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--vpi-accent) 35%, #fff), color-mix(in srgb, var(--vpi-g2) 30%, #fff)) border-box;
	box-shadow: 0 6px 20px -16px color-mix(in srgb, var(--vpi-accent) 70%, transparent);
}
.vpi-skin-breeze .vpi-desc .vpi-intro { padding: 22px 24px; background: linear-gradient(160deg, color-mix(in srgb, var(--vpi-accent) 6%, #fff), #fff 60%) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--vpi-accent) 40%, #fff), color-mix(in srgb, var(--vpi-g2) 35%, #fff)) border-box; }
.vpi-skin-breeze .vpi-desc .vpi-h { padding-inline-start: 0; font-size: 17px; }
.vpi-skin-breeze .vpi-desc .vpi-h::before { position: static; display: block; width: 36px; height: 3px; margin-bottom: 8px; border-radius: 3px; background: var(--vpi-grad); }
.vpi-skin-breeze .vpi-desc .vpi-checks li::before, .vpi-skin-breeze .vpi-desc .vpi-steps li::before, .vpi-skin-breeze .vpi-desc .vpi-flow li::before { background: var(--vpi-grad); }
.vpi-skin-breeze .vpi-desc .vpi-steps li::before { border-radius: 50%; }
.vpi-skin-breeze .vpi-desc .vpi-card__name { background: var(--vpi-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vpi-skin-breeze .vpi-desc .vpi-stat__v { background: var(--vpi-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vpi-skin-breeze .vpi-desc .vpi-info { padding: 18px; }
.vpi-skin-breeze .vpi-desc .vpi-badges li { background: var(--vpi-grad); }
.vpi-skin-breeze .vpi-desc .vpi-callout__title { color: var(--vpi-accent); }
.vpi-skin-breeze .vpi-desc .vpi-faq__item[open] summary { background: color-mix(in srgb, var(--vpi-accent) 5%, #fff); }
.vpi-skin-breeze .vpi-desc .vpi-warn { border-radius: 16px; }

/* ---- شیشه‌ای: frosted cards on a soft gradient ---- */
.vpi-skin-glass .vpi-desc {
	padding: 20px;
	border-radius: 26px;
	background:
		radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--vpi-accent) 22%, transparent), transparent 70%),
		radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--vpi-accent) 14%, #dfe9ff), transparent 70%),
		linear-gradient(160deg, #f7f9fc, #eef2f7);
}
.vpi-skin-glass .vpi-desc :is(.vpi-intro, .vpi-card, .vpi-callout, .vpi-info, .vpi-stat, .vpi-faq__item, .vpi-checks li, .vpi-steps li, .vpi-flow li, .vpi-warn) {
	border: 1px solid rgba(255, 255, 255, .85);
	border-radius: 18px;
	background: rgba(255, 255, 255, .62);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 28px -18px rgba(20, 40, 80, .35);
}
.vpi-skin-glass .vpi-desc .vpi-h::before { box-shadow: 0 0 12px var(--vpi-accent); }
.vpi-skin-glass .vpi-desc .vpi-stat__v { background: linear-gradient(135deg, var(--vpi-accent), color-mix(in srgb, var(--vpi-accent) 50%, #3b82f6)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vpi-skin-glass .vpi-desc .vpi-badges li { background: rgba(255, 255, 255, .7); color: var(--vpi-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); }
.vpi-skin-glass .vpi-desc .vpi-faq__item[open] summary { background: rgba(255, 255, 255, .5); }
@media (max-width: 549px) { .vpi-skin-glass .vpi-desc { padding: 12px; border-radius: 18px; } }

/* ---- گفت‌وگو: chat bubbles — the FAQ reads like a conversation ---- */
.vpi-skin-chat .vpi-desc .vpi-intro { border: 0; border-radius: 22px 22px 22px 6px; background: var(--vpi-soft); }
[dir="rtl"] .vpi-skin-chat .vpi-desc .vpi-intro, .rtl .vpi-skin-chat .vpi-desc .vpi-intro { border-radius: 22px 22px 6px 22px; }
.vpi-skin-chat .vpi-desc .vpi-h { padding-inline-start: 24px; }
.vpi-skin-chat .vpi-desc .vpi-h::before { top: 50%; bottom: auto; width: 14px; height: 12px; transform: translateY(-50%); border-radius: 50% 50% 50% 10%; }
.vpi-skin-chat .vpi-desc .vpi-checks li { border-radius: 18px; }
.vpi-skin-chat .vpi-desc .vpi-callout { border: 0; border-radius: 20px; background: color-mix(in srgb, var(--vpi-accent) 10%, #fff); }
.vpi-skin-chat .vpi-desc .vpi-faq { gap: 14px; }
.vpi-skin-chat .vpi-desc .vpi-faq__item { border: 0; background: none; overflow: visible; }
.vpi-skin-chat .vpi-desc .vpi-faq__item summary { display: inline-block; max-width: 88%; border-radius: 18px 18px 18px 4px; background: #f0f0f0; padding-inline-end: 40px; }
[dir="rtl"] .vpi-skin-chat .vpi-desc .vpi-faq__item summary, .rtl .vpi-skin-chat .vpi-desc .vpi-faq__item summary { border-radius: 18px 18px 4px 18px; }
.vpi-skin-chat .vpi-desc .vpi-faq__item[open] summary { background: #f0f0f0; }
.vpi-skin-chat .vpi-desc .vpi-faq__item p { width: fit-content; max-width: 88%; margin: 8px 0 0 auto; padding: 10px 16px; border-radius: 18px 18px 4px 18px; background: var(--vpi-accent); color: #fff; }
[dir="rtl"] .vpi-skin-chat .vpi-desc .vpi-faq__item p, .rtl .vpi-skin-chat .vpi-desc .vpi-faq__item p { margin: 8px auto 0 0; border-radius: 18px 18px 18px 4px; }
.vpi-skin-chat .vpi-desc .vpi-steps li { border-radius: 18px; }
.vpi-skin-chat .vpi-desc .vpi-steps li::before { border-radius: 50%; }
.vpi-skin-chat .vpi-desc .vpi-card { border-radius: 18px; }

/* ---- Shop controls: corners (round / soft = default / sharp) ---- */
.vpi-r-round .vpi-desc { --vpi-radius: 26px; }
.vpi-r-round .vpi-desc :is(.vpi-intro, .vpi-card, .vpi-callout, .vpi-info, .vpi-stat, .vpi-faq__item, .vpi-checks li, .vpi-steps li, .vpi-flow li, .vpi-warn) { border-radius: 22px !important; }
.vpi-r-sharp .vpi-desc { --vpi-radius: 2px; }
.vpi-r-sharp .vpi-desc :is(.vpi-intro, .vpi-card, .vpi-callout, .vpi-info, .vpi-stat, .vpi-faq__item, .vpi-faq__item summary, .vpi-faq__item p, .vpi-checks li, .vpi-steps li, .vpi-flow li, .vpi-warn, .vpi-h, .vpi-badges li) { border-radius: 2px !important; }

/* ---- Shop controls: bullet icon (✓ = default; the shop's choice wins over a style's own bullet) ---- */
.vpi-ic-dot .vpi-desc .vpi-checks li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; clip-path: none; background: var(--vpi-accent); }
.vpi-ic-star .vpi-desc .vpi-checks li::before { content: "★"; width: 22px; height: 22px; border-radius: 0; clip-path: none; background: none; color: var(--vpi-accent); font-size: 16px; line-height: 22px; }
.vpi-ic-spark .vpi-desc .vpi-checks li::before { content: "✦"; width: 22px; height: 22px; border-radius: 0; clip-path: none; background: none; color: var(--vpi-accent); font-size: 16px; line-height: 22px; }

@media (prefers-reduced-transparency: reduce) {
	.vpi-skin-glass .vpi-desc :is(.vpi-intro, .vpi-card, .vpi-callout, .vpi-info, .vpi-stat, .vpi-faq__item, .vpi-checks li, .vpi-steps li, .vpi-flow li, .vpi-warn) { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---- Advanced: internal links, «use it with», the shop's own H2 sections ---- */
.vpi-desc a.vpi-link { color: var(--vpi-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--vpi-accent) 45%, transparent); font-weight: 600; }
.vpi-desc a.vpi-link:hover { text-decoration-color: var(--vpi-accent); }
.vpi-desc .vpi-link-off { color: inherit; }
.vpi-desc .vpi-uses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.vpi-desc .vpi-uses li { margin: 0; padding: 12px 16px; border: 1px solid var(--vpi-line); border-radius: 14px; background: #fff; display: grid; gap: 2px; }
.vpi-desc .vpi-uses li a.vpi-link { text-decoration: none; font-weight: 700; }
.vpi-desc .vpi-uses__why { font-size: 13.5px; color: var(--vpi-muted); line-height: 1.8; }
.vpi-desc .vpi-uses li:has(.vpi-link-off) { display: none; } /* out of stock: the suggestion hides itself */
.vpi-desc h2.vpi-h { font-size: 18px; }
.vpi-skin-magazine .vpi-desc h2.vpi-h { font-size: 22px; }