/*
 * AI product summaries — «خلاصهٔ هوشمند محصول».
 *
 * DESIGN LAW (owner's final ruling, restated because it has been violated
 * twice elsewhere): flat surfaces, one hairline border, generous radius, NO
 * box-shadow and NO backdrop-filter. The glass/iOS language belongs to the
 * FrontDialog popups only.
 *
 * The violet is the AI SIGNIFIER (AudioReviewsModule::DEFAULT_ACCENT's
 * reasoning): it marks machine-generated content, following the convention the
 * owner pointed at on Digikala's own summary box. Chips are quiet tints —
 * green-leaning for pros, red-leaning for cons — never saturated pills, because
 * six saturated pills beside a paragraph is noise.
 */

/*
 * NO FRAME OF ITS OWN (owner, 2026-09-01). This card is always placed inside a
 * section the theme already draws as a rounded white panel, so its own border
 * produced a card inside a card — two rounded outlines a few pixels apart. The
 * reference has no such frame either: a head, then the speech box, directly on
 * the section.
 *
 * THE INSET IS PADDING, NEVER HORIZONTAL MARGIN — measured on the live site
 * after 0.26.85 shipped the margin version and the box escaped the panel. The
 * host container is a flex column that gives its children `width: 100%`; that
 * width resolves against the container's content box, so ANY horizontal margin
 * is added OUTSIDE an already-full width and the element overflows by exactly
 * the margin total. In RTL the overflow lands on the left, which is the edge
 * the owner saw it on.
 *
 * AND THAT ARGUMENT ONLY HOLDS UNDER border-box, which is why this component
 * now declares it for itself rather than inheriting the host theme's reset —
 * the independent audit's finding, reproduced before it was fixed: with the CSS
 * DEFAULT of content-box, `width: 100%` plus `padding: 0 12px` makes the outer
 * width 100% + 24px, so the very overflow this padding was meant to prevent
 * came back (measured: a 320px host, a 344px card, 23px escaping left). Scoped
 * to this component and its own descendants, so nothing outside it is touched.
 */
.asrtools-product-summary,
.asrtools-product-summary *,
.asrtools-product-summary *::before,
.asrtools-product-summary *::after {
	box-sizing: border-box;
}

.asrtools-product-summary {
	border: 0;
	color: #27241f;
	font-family: inherit;
	margin: 18px 0;
	padding: 0 12px;
}

/*
 * The specs lane used to render as bare prose with the badge underneath, which
 * read as a different feature from the review card on the same page. It is now
 * the SAME card — head, speech box, caution — sharing every rule below; only
 * its head text and the absence of chips tell them apart.
 */

.asrtools-product-summary__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	margin-bottom: 8px;
}

.asrtools-product-summary__title {
	font-size: 15px;
	font-weight: 700;
	margin: 0;
}

.asrtools-product-summary__badge {
	background: #f3effe;
	border: 1px solid #e2d8fb;
	border-radius: 999px;
	color: #7c3aed;
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.6;
	padding: 2px 10px;
	white-space: nowrap;
}

.asrtools-product-summary__text {
	font-size: 14px;
	line-height: 2;
	margin: 0 0 10px;
}

.asrtools-product-summary__caution {
	color: #7a746a;
	font-size: 11.5px;
	line-height: 1.8;
	margin: 6px 0 0;
}

/*
 * ===== The reviews card — owner-approved Digikala shape (2026-09-01) =====
 * Gradient sparkle beside the title, the badge demoted to a quiet subtitle,
 * a lavender speech box with a tail toward the icon, a CSS-only four-line
 * clamp, white hairline chips with a colored icon circle, caution inside
 * the box. Still flat: the gradient lives on the ICON only, never a surface.
 */

.asrtools-product-summary--reviews .asrtools-product-summary__head,
.asrtools-product-summary--specs .asrtools-product-summary__head {
	justify-content: flex-start;
	margin-bottom: 0;
}

.asrtools-product-summary__spark {
	align-items: center;
	background: linear-gradient(135deg, #a78bfa 0%, #7c5cf0 55%, #5b6cf5 100%);
	border-radius: 13px;
	color: #fff;
	display: inline-flex;
	flex: 0 0 38px;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.asrtools-product-summary__spark svg {
	height: 22px;
	width: 22px;
}

.asrtools-product-summary__heading {
	min-width: 0;
}

.asrtools-product-summary--reviews .asrtools-product-summary__title,
.asrtools-product-summary--specs .asrtools-product-summary__title {
	font-size: 15px;
	font-weight: 800;
}

/* In the reviews head the badge is the subtitle, not a pill. */
.asrtools-product-summary--reviews .asrtools-product-summary__badge,
.asrtools-product-summary--specs .asrtools-product-summary__badge {
	background: none;
	border: 0;
	color: #7b8290;
	font-size: 11.5px;
	font-weight: 500;
	padding: 0;
}

/*
 * NO MEASURE CAP (owner, 2026-09-01, on a wide desktop). 0.26.91 capped the
 * paragraph at 78ch for readability while the bubble stayed full width, and the
 * result was measured on the live site: a 1005px bubble holding 509px of text,
 * with 474px of empty surface on one side. Capping the BUBBLE instead only moved
 * the same lopsidedness one level out — a 681px bubble in a 1399px card.
 *
 * So the cap is gone. The host column is already a bounded reading width (1031px
 * measured on the live product page), the reference lets its own bubble and text
 * run the full column, and a self-imposed line limit that produces a visibly
 * half-empty surface is a worse fault than a long line. Any future limit belongs
 * on the bubble AND the text together, never on one of them alone.
 */
.asrtools-product-summary__box {
	background: #f5f5fb;
	border-radius: 20px;
	margin-top: 16px;
	padding: 20px 22px 18px;
	position: relative;
}

/* Speech tail toward the sparkle icon (RTL: icon sits at the right edge). */
.asrtools-product-summary__box::before {
	background: #f5f5fb;
	clip-path: polygon(20% 100%, 100% 100%, 85% 0);
	content: "";
	height: 18px;
	position: absolute;
	right: 14px;
	top: -8px;
	width: 18px;
}

/*
 * TYPOGRAPHY (owner, 2026-09-01, against the Digikala reference): the body was
 * 13px in a light grey and read as fine print beside the reference. Larger,
 * darker. No width cap: see the bubble rule above for why one produced a
 * visibly half-empty surface on the live site.
 */
.asrtools-product-summary__box .asrtools-product-summary__text {
	color: #23283a;
	font-size: 14.5px;
	line-height: 2.1;
	margin: 0;
	text-align: justify;
}

/*
 * THE CLAMP IS APPLIED ONLY TO A MEASURED CARD. Without the script there is no
 * clamp and no control: the reader sees the whole summary. The alternative —
 * clamping on the server and relying on a script to open it — is the one
 * failure that would actually cost a reader something, so it is not available
 * here by construction.
 */
.asrtools-product-summary--measured .asrtools-product-summary__text--clamp {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.asrtools-product-summary--expanded .asrtools-product-summary__text--clamp {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}

/*
 * A REAL BUTTON (independent audit, 2026-09-01). The checkbox+label pair it
 * replaces was exposed as a generic element with no role, Tab skipped it, no
 * state was announced and the touch target measured 74x17. Keyboard operation
 * and the announced role now come from the element itself; the only work left
 * for CSS is to keep it looking like the reference's quiet text link while
 * meeting a 44px target.
 *
 * EVERY RULE FOR IT IS SCOPED TO THE CARD, and that is not cosmetic. Measured on
 * the live site: the theme ships
 *   :is(.btn, .button, button, [type="submit"], [type="button"]) { ... }
 * and `:is()` takes the specificity of its most specific argument — a class —
 * so that rule is (0,1,0), exactly what a lone `.asrtools-product-summary__more`
 * is, and it loads after us. It therefore won every tie: our button rendered
 * with the theme's grey fill, its 5px/20px padding and its 42px min-height, and
 * — worst of all — the theme's `display: inline-flex` beat our `display: none`,
 * so the control appeared on cards the script had not measured and toggled
 * nothing. Adding the card class makes these (0,2,0) and settles it by
 * specificity rather than by !important.
 */
/*
 * A QUIET PILL, NOT AN UNDERLINED WORD (owner, 2026-09-01: "همچنان زشت"). The
 * underlined text link was the browser's default idea of a link dropped into a
 * card whose every other control — the chips beside it, the trust triggers below
 * it — is a hairline pill. It read as an accident. Same 44px target, same quiet
 * weight, now in the card's own vocabulary: white fill, one hairline, full
 * radius, and the AI violet only on the caret so the control still belongs to
 * the machine-written box it opens.
 */
.asrtools-product-summary .asrtools-product-summary__more {
	align-items: center;
	appearance: none;
	background: #fff;
	border: 1px solid #e6e8ee;
	border-radius: 999px;
	color: #1f2430;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	gap: 6px;
	justify-content: center;
	margin-top: 14px;
	min-height: 44px;
	padding: 0 18px;
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.asrtools-product-summary .asrtools-product-summary__more:hover {
	background: #faf8ff;
	border-color: #d9cdfa;
}

.asrtools-product-summary .asrtools-product-summary__more::after {
	border-bottom: 1.5px solid #7c3aed;
	border-right: 1.5px solid #7c3aed;
	content: "";
	height: 6px;
	transform: rotate(45deg) translateY(-1px);
	width: 6px;
}

.asrtools-product-summary .asrtools-product-summary__more[aria-expanded="true"]::after {
	transform: rotate(-135deg) translateY(-1px);
}

.asrtools-product-summary .asrtools-product-summary__more:focus-visible {
	outline: 2px solid #6d28d9;
	outline-offset: 2px;
	text-decoration: none;
}

.asrtools-product-summary__more-close,
.asrtools-product-summary__more[aria-expanded="true"] .asrtools-product-summary__more-open {
	display: none;
}

.asrtools-product-summary__more[aria-expanded="true"] .asrtools-product-summary__more-close {
	display: inline;
}

.asrtools-product-summary__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.asrtools-product-summary__chip {
	align-items: center;
	background: #fff;
	border: 1px solid #e6e8ee;
	border-radius: 999px;
	color: #1f2430;
	display: inline-flex;
	font-size: 12.5px;
	font-weight: 600;
	gap: 7px;
	line-height: 1.7;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 7px 14px;
	/*
	 * ONE LINE PER CHIP — BUT ONLY WHERE ONE LINE FITS. The longest label wrapped
	 * and rendered 47px tall beside 37px neighbours, which reads as one chip being
	 * bigger rather than one chip being longer, so 0.26.95 pinned every chip to a
	 * single line. That claim rested on "the producer caps a chip at 40 characters,
	 * so it always fits", and an independent audit disproved it by measuring the
	 * boundary: at a 320px viewport an exactly-40-character chip overflowed its own
	 * box by 24px, and at a 303px visual viewport by 41px — dragging 12px of
	 * overflow onto the DOCUMENT, which is a horizontal scrollbar on the whole
	 * page. A ragged chip is a blemish; a page that scrolls sideways is a defect.
	 *
	 * So the single line is now conditional on there being room for it. Below
	 * 420px the chip wraps and `overflow-wrap: anywhere` guarantees even a
	 * pathological unbroken token stays inside the column; `max-width: 100%` holds
	 * in both modes. 420px is derived, not guessed: 40 characters at 12.5px is
	 * ~280px of text, plus 28px padding, plus the 16px icon and its 7px gap, is
	 * ~331px of chip, which needs ~364px of viewport once the card's own 12px
	 * insets are paid — 420px clears that with margin on every font this store
	 * loads.
	 */
	white-space: normal;
}

@media (min-width: 420px) {
	.asrtools-product-summary__chip {
		white-space: nowrap;
	}
}

.asrtools-product-summary__chip-ic {
	align-items: center;
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	flex: 0 0 16px;
	height: 16px;
	justify-content: center;
	width: 16px;
}

.asrtools-product-summary__chip-ic svg {
	height: 12px;
	width: 12px;
}

.asrtools-product-summary__chip-ic--pro {
	background: #12b76a;
}

.asrtools-product-summary__chip-ic--con {
	background: #e02424;
}

.asrtools-product-summary__box .asrtools-product-summary__caution {
	color: #6a7180;
	font-size: 12px;
	margin-top: 16px;
	text-align: right;
}

/* Editor-only guidance never looks like a shipped card. */
.asrtools-product-summary--empty {
	border: 1px dashed #ddd7ca;
	border-radius: 28px;
	padding: 18px 20px;
}

/*
 * Mobile: one step down, never below the owner's 13px floor. The measure cap is
 * irrelevant on a narrow screen and would otherwise fight the padding.
 */
@media (max-width: 480px) {
	.asrtools-product-summary__box {
		padding: 16px 16px 14px;
	}

	.asrtools-product-summary__box .asrtools-product-summary__text {
		font-size: 13.5px;
		line-height: 2.05;
	}

	.asrtools-product-summary--reviews .asrtools-product-summary__title,
	.asrtools-product-summary--specs .asrtools-product-summary__title {
		font-size: 14px;
	}
}

/*
 * THE REVEAL IS HIDDEN UNTIL PROVEN NECESSARY (owner bug report, desktop): the
 * control rendered even when the whole text already fitted inside the clamp, so
 * it toggled nothing. The server cannot know how many lines a string occupies —
 * that depends on the viewport, the font size and which font actually loaded —
 * so assets/js/product-summary.js measures it and marks the card.
 *
 * THE CONTROL SHARES THE CLAMP'S GATE, and that is the whole safety argument.
 * The clamp is applied only to a `--measured` card, so with no JavaScript there
 * is no clamp: the reader gets the WHOLE summary. A control would then toggle
 * nothing, which is the very defect being fixed, so it stays hidden until the
 * same measurement that truncates the text proves it is needed. Neither half
 * can appear without the other, and the failure mode that costs a reader
 * something — text cut short with no way to open it — is unreachable.
 */
.asrtools-product-summary .asrtools-product-summary__more {
	display: none;
}

.asrtools-product-summary.asrtools-product-summary--measured.asrtools-product-summary--overflowing .asrtools-product-summary__more {
	display: inline-flex;
}