/* ============================================================
   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; }