/**
 * Out-N-Out Product Reviews. Handle: oon-widget-product-reviews. Token-driven.
 * Shared by the theme single-product-reviews.php override and the Elementor
 * widget. Reviews / Questions tabs, summary + histogram, toolbar, review cards,
 * empty state, and the native WooCommerce review form.
 */
.oon-reviews {
	/* The live Quoli hero measures ~1120px — the review section has its own
	   content width, narrower than the 1170px page container. max-width (not a
	   fixed width) so it still scales down on smaller viewports. */
	max-width: 1120px;
	margin: 56px auto;
	/* Live Quoli sets one font on its component root and every element inherits
	   it (var(--quoli-pdp-font, inherit) → the Shopify body font, Jost). Mirror
	   that here so the whole review UI renders Jost, scoped to this widget. */
	font-family: var(--oon-font-body);
}

/* Star rating (track + gold overlay clipped to score). Gold = live Quoli
   --quoli-pdp-star token (#f5c518). 2px letter-spacing ≈ the live 2px star gap. */
.oon-stars {
	position: relative;
	display: inline-block;
	font-size: 1em;
	line-height: 1;
	white-space: nowrap;
	color: #f5c518;
}
.oon-stars::before {
	content: "\2605\2605\2605\2605\2605";
	color: #e3e3e3;
	letter-spacing: 2px;
}
.oon-stars__fill {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	white-space: nowrap;
}
.oon-stars__fill::before {
	content: "\2605\2605\2605\2605\2605";
	color: #f5c518;
	letter-spacing: 2px;
}

/* Tabs */
.oon-reviews__tabs {
	display: flex;
	gap: 40px;
	border-bottom: 1px solid var(--oon-color-border, #eee);
	margin-bottom: 32px;
}
.oon-reviews__tab {
	position: relative;
	padding: 10px 0;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--oon-font-body);
	font-weight: var(--oon-fw-medium, 500);
	font-size: 1.05rem;
	color: var(--oon-color-text, #212121);
	opacity: 0.55;
	transition: opacity var(--oon-transition, 0.25s ease);
}
.oon-reviews__tab::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 0;
	height: 2px;
	background: currentColor;
	transition: width var(--oon-transition, 0.25s ease);
}
.oon-reviews__tab:hover {
	opacity: 1;
}
.oon-reviews__tab.is-active {
	opacity: 1;
}
.oon-reviews__tab.is-active::after {
	width: 100%;
}
.oon-reviews__tab:focus-visible {
	outline: 2px solid var(--oon-color-accent, #9a84c8);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.oon-reviews__tab,
	.oon-reviews__tab::after,
	.oon-reviews__hist-bar {
		transition: none;
	}
}

.oon-reviews__panel[hidden] {
	display: none;
}

/* Summary hero: average | distribution | recommendation. Exact live grid —
   `minmax(200px,auto) minmax(0,1fr) minmax(220px,auto)`, 36px gap. The three
   tracks are kept at all times; the recommendation cell never disappears (its
   content is only rendered when real data exists — never fabricated). */
.oon-reviews__summary {
	display: grid;
	grid-template-columns: minmax(200px, auto) minmax(0, 1fr) minmax(220px, auto);
	gap: 36px;
	align-items: center;
	margin-bottom: 40px;
}
.oon-reviews__score {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
/* Score number + large stars share ONE row, as on live. */
.oon-reviews__score-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.oon-reviews__avg {
	font-family: var(--oon-font-body);
	font-weight: 600;
	font-size: 34px;      /* live .hero__score-num */
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--oon-color-text, #1a1a1a);
}
.oon-reviews__score-row .oon-stars {
	font-size: 30px;      /* live .stars--large */
}
.oon-reviews__count {
	font-family: var(--oon-font-body);
	font-size: 13px;
	line-height: 1.4;
	color: var(--oon-color-text-secondary, #666);
}
.oon-reviews__hist {
	display: flex;
	flex-direction: column;
	gap: 4px;             /* live .hero__dist gap */
	width: 100%;
	max-width: 360px;     /* live .hero__dist max-width */
	margin: 0 auto;       /* centered within the middle column, as on live */
}
.oon-reviews__hist-row {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) 40px;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--oon-color-text-secondary, #666);
}
.oon-reviews__hist-label {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--oon-color-text, #212121);
}
.oon-reviews__hist-label span {
	color: #f5c518; /* live gold star beside the numeral */
}
.oon-reviews__hist-track {
	position: relative;
	height: 6px;
	border-radius: 9999px;
	background: #ececec;
	overflow: hidden;
}
.oon-reviews__hist-bar {
	position: absolute;
	inset: 0 auto 0 0;
	height: 100%;
	background: #1a1a1a;
	border-radius: 9999px;
	transition: width var(--oon-transition, 0.25s ease);
}
.oon-reviews__hist-count {
	text-align: right;
}
/* Recommendation cell (live .hero__recommend-line): a single 13px/500 line,
   centered, in the third grid column. The grid reserves this track at all times
   so it never disappears; content renders only when real data exists. */
.oon-reviews__recommend {
	margin: 0;
	text-align: center;
	font-family: var(--oon-font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--oon-color-text, #1a1a1a);
}
.oon-reviews__recommend strong {
	font-weight: 600;
}

/* Toolbar — one horizontal row on desktop. flex-wrap only engages at narrow
   widths (see responsive block). Controls stay their natural size; the AI +
   Write buttons are pushed to the far right to mirror the live layout. */
.oon-reviews__toolbar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 26px;
}
/* Toolbar controls share the live 36px height + 13px type. Sort / search /
   filter chips are pills (999px); the two ACTION buttons (.btn — AI Summary +
   Write a review) use the live .btn radius of 8px (a small rectangle, NOT a
   pill), so they must not be grouped with the pill radius below. */
.oon-reviews__sort,
.oon-reviews__search,
.oon-reviews__filter {
	height: 36px;
	font-size: 13px;
	border-radius: 9999px;
}
.oon-reviews__ai,
.oon-reviews__write {
	height: 36px;
	font-size: 13px;
	border-radius: 8px; /* live .btn { border-radius: var(--quoli-pdp-radius, 8px) } */
}
.oon-reviews__sort {
	/* Override the global `select { width:100% }` base rule that otherwise
	   forced the sort control onto its own full-width row. */
	width: auto;
	flex: 0 0 auto;
	padding: 0 32px 0 14px;   /* live .sort-select padding */
	border: 1px solid var(--oon-color-border, #e5e5e5);
	background: #fff;
	font-family: var(--oon-font-body);
	cursor: pointer;
}
.oon-reviews__searchbox {
	position: relative;
	flex: 0 0 180px;          /* live .search width */
	width: 180px;
}
/* Search input. Scoped under .oon-reviews (specificity 0,2,0) so it OUT-SPECIFIES
   the theme's global `input[type="search"]` rule in base.css (0,1,1) — that rule
   otherwise wins and paints the field grey (--oon-color-form-field #f2f2f2) with
   a 4px radius, 12/16 padding and 1rem text. This descendant form only affects
   the review search field; no global input styling is touched, and no
   !important is needed. Values below are the live Quoli .search-input values. */
.oon-reviews .oon-reviews__search {
	width: 100%;
	height: 36px;
	padding: 0 12px 0 34px;   /* live .search-input padding (icon room on the left) */
	border: 1px solid #e5e5e5; /* live --quoli-pdp-border */
	border-radius: 9999px;     /* live pill radius (999px) */
	background: #fff;
	color: #1a1a1a;
	font-family: var(--oon-font-body);
	font-size: 13px;
	line-height: 1;
}
/* Live .search-input::placeholder — muted grey. */
.oon-reviews .oon-reviews__search::placeholder {
	color: #6d6d6d;
	opacity: 1;
}
/* Live .search-input:focus — dark 2px outline, no offset (overrides the global
   accent focus ring from base.css for this control only). */
.oon-reviews .oon-reviews__search:focus {
	outline: 2px solid #1a1a1a;
	outline-offset: 0;
}
/* Leading magnifier — live .search__icon: 14px, left 11px, muted #6d6d6d,
   1.5 stroke. Decorative (the input carries the accessible label). */
.oon-reviews__searchbox::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 50%;
	width: 14px;
	height: 14px;
	transform: translateY(-50%);
	pointer-events: none;
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236d6d6d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E");
}
.oon-reviews__filters {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
}
.oon-reviews__filter {
	padding: 0 16px;
	border: 1px solid var(--oon-color-border, #e5e5e5);
	background: #fff;
	cursor: pointer;
	font-family: var(--oon-font-body);
	color: var(--oon-color-text, #1a1a1a);
	white-space: nowrap;
	transition: background-color var(--oon-transition, 0.25s ease), color var(--oon-transition, 0.25s ease);
}
.oon-reviews__filter.is-active {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
}
.oon-reviews__ai {
	/* Pushes this button + "Write a review" to the far right of the row
	   (mirrors the live .toolbar__actions { margin-left:auto }). Light/white
	   secondary pill with dark text, matching the live AI Summary button. */
	margin-left: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0 18px;
	border: 1px solid #e1e3e5; /* live .btn border colour */
	border-radius: 8px;        /* live .btn radius — small rectangle, not a pill */
	background: #fff;
	cursor: pointer;
	color: #1a1a1a;
	font-family: var(--oon-font-body);
	white-space: nowrap;
	transition: background-color 120ms ease, border-color 120ms ease;
}
.oon-reviews__ai:hover {
	background: #f6f6f6;
	border-color: #d5d5d5;
}
.oon-reviews__write {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 18px; /* live .btn horizontal padding */
	background: #1a1a1a;
	color: #fff;
	font-family: var(--oon-font-body);
	font-weight: var(--oon-fw-medium, 500);
	white-space: nowrap;
	text-decoration: none;
}
.oon-reviews__write:hover {
	background: #000;
	color: #fff;
}

/* Review list + cards */
.oon-reviews__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.oon-review {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 24px;
	padding: 26px 0;
	border-top: 1px solid var(--oon-color-border, #eee);
}
.oon-review__author {
	display: flex;
	align-items: center;
	gap: 12px;
}
.oon-review__avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #e9e9e9;   /* live --quoli-pdp-surface-muted */
	color: #555;
	font-family: var(--oon-font-body);
	font-weight: var(--oon-fw-medium, 500);
	font-size: 13px;
}
.oon-review__name {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--oon-font-body);
	font-weight: 600;       /* live .review__name */
	font-size: 13px;
	line-height: 1.3;
	color: var(--oon-color-text, #1a1a1a);
}
.oon-review__verified {
	display: inline-flex;
	color: #2e7d32;
}
/* Meta row: stars + date on the left, actions pushed to the far right — the
   live card keeps like/dislike/share right-aligned on the rating row. */
.oon-review__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.oon-review__meta .oon-stars {
	font-size: 15px; /* compact stars aligned with the date, as on live */
}
.oon-review__date {
	font-size: 13px;
	color: var(--oon-color-text-secondary, #666);
}
.oon-review__title {
	margin: 0 0 6px;
	font-family: var(--oon-font-body);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.35;
	color: var(--oon-color-text, #212121);
}
.oon-review__text {
	max-width: 68ch; /* comfortable reading measure — matches the live card */
	font-family: var(--oon-font-body);
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--oon-color-text-secondary, #555);
}
.oon-review__text > :last-child {
	margin-bottom: 0;
}
.oon-review__media {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.oon-review__media img,
.oon-review__media video {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 6px;
}
/* Right-aligned on the meta row (like/dislike/share). */
.oon-review__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}
.oon-review__vote,
.oon-review__share {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--oon-color-text-secondary, #888);
	font-family: var(--oon-font-body);
	font-size: 0.85rem;
}
.oon-review__vote:hover,
.oon-review__share:hover,
.oon-review__vote.is-voted {
	color: var(--oon-color-text, #212121);
}
.oon-review__vote[disabled] {
	cursor: default;
	opacity: 0.7;
}

.oon-reviews__more-wrap {
	margin-top: 26px;
	text-align: center;
}
/* Load-more button — live Quoli .btn--load-more: 200px min-width, 12/28
   padding, 14px/500, outlined in the primary colour, fills on hover. Radius is
   the live .btn base value (var(--quoli-pdp-radius, 8px) → 8px) — a rounded
   rectangle, NOT the toolbar's 999px pill. */
.oon-reviews__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 200px;
	padding: 12px 28px;
	border: 1px solid #1a1a1a;
	border-radius: 8px;
	background: #fff;
	color: #1a1a1a;
	cursor: pointer;
	font-family: var(--oon-font-body);
	font-size: 14px;
	font-weight: var(--oon-fw-medium, 500);
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.oon-reviews__more:hover {
	border-color: #1a1a1a;
	background: #1a1a1a;
	color: #fff;
}
.oon-reviews__noresults {
	padding: 24px 0;
	color: var(--oon-color-text-secondary, #666);
}

/* Empty state */
.oon-reviews__empty {
	text-align: center;
	padding: 40px 20px;
}
.oon-reviews__empty .oon-stars {
	font-size: 1.5rem;
}
.oon-reviews__empty-title {
	margin: 14px 0 6px;
	font-family: var(--oon-font-body); /* live Quoli component is all-Jost, no serif */
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--oon-color-text, #212121);
}
.oon-reviews__empty-text {
	margin: 0 0 20px;
	color: var(--oon-color-text-secondary, #666);
}

/* Native WooCommerce review form, themed */
.oon-reviews__form {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--oon-color-border, #eee);
	max-width: 640px;
}
.oon-reviews__form-title {
	display: block;
	margin-bottom: 16px;
	font-family: var(--oon-font-body); /* live Quoli component is all-Jost, no serif */
	font-weight: 600;
	font-size: 1.3rem;
	color: var(--oon-color-text, #212121);
}
.oon-reviews__form .comment-form-rating select,
.oon-reviews__form input[type="text"],
.oon-reviews__form input[type="email"],
.oon-reviews__form textarea {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--oon-color-border, #ddd);
	border-radius: 6px;
	font-family: var(--oon-font-body);
}
.oon-reviews__form label {
	display: block;
	margin-bottom: 4px;
	font-family: var(--oon-font-body);
	font-weight: var(--oon-fw-medium, 500);
}
.oon-reviews__form p {
	margin: 0 0 16px;
}
.oon-reviews__form .submit,
.oon-reviews__form input[type="submit"] {
	padding: 12px 30px;
	background: #1a1a1a;
	color: #fff;
	border: none;
	border-radius: 9999px;
	cursor: pointer;
	font-weight: var(--oon-fw-medium, 500);
}

/* Responsive */
@media (max-width: 1024px) {
	/* Two columns on tablet: average + histogram share the top row, the
	   recommendation cell (when populated) spans full width beneath. */
	.oon-reviews__summary {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
		column-gap: 40px;
	}
	.oon-reviews__recommend {
		grid-column: 1 / -1;
		text-align: left;
	}
	/* Toolbar may wrap below desktop; the sort + search share the first line,
	   the filter pills and buttons flow onto the next. Nothing overflows. */
	.oon-reviews__toolbar {
		flex-wrap: wrap;
	}
	.oon-reviews__ai {
		margin-left: 0;
	}
}
@media (max-width: 767px) {
	.oon-reviews__summary {
		grid-template-columns: 1fr;
		gap: 24px;
		text-align: left;
	}
	.oon-reviews__searchbox {
		flex: 1 1 100%;
		width: auto;
		order: -1;
	}
	/* Filter pills scroll horizontally instead of forcing page-wide overflow. */
	.oon-reviews__filters {
		flex: 1 1 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.oon-reviews__filters::-webkit-scrollbar {
		display: none;
	}
	.oon-reviews__write {
		margin-left: auto;
	}
	.oon-review {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* ============================================================================
   Write-a-review modal (live Quoli-style). JS-enhanced; the native inline
   WooCommerce form is the no-JS fallback and is hidden once JS activates.
   ========================================================================= */
.oon-reviews.is-js .oon-reviews__form {
	display: none;
}

.oon-rvm[hidden] {
	display: none;
}
.oon-rvm {
	position: fixed;
	inset: 0;
	z-index: 1000000; /* above the sticky add-to-cart bar (99999) + header */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.oon-rvm__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}
.oon-rvm__dialog {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 40px);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: oon-rvm-in 180ms ease;
}
@keyframes oon-rvm-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.oon-rvm__dialog { animation: none; }
}
.oon-rvm__scroll {
	overflow-y: auto;
	padding: 26px 26px 22px;
	font-family: var(--oon-font-body);
	color: #1a1a1a;
}
.oon-rvm__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: #f4f4f4;
	color: #1a1a1a;
	cursor: pointer;
	transition: background-color 120ms ease;
}
.oon-rvm__close:hover {
	background: #e8e8e8;
}
.oon-rvm__title {
	margin: 0 34px 18px 0;
	font-family: var(--oon-font-body);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: #1a1a1a;
}
.oon-rvm__field {
	margin-bottom: 16px;
}
.oon-rvm__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 6px;
}
.oon-rvm__label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #1a1a1a;
}
.oon-rvm__req {
	color: #d33;
}
.oon-rvm__hint {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #6d6d6d;
}

/* Star rating control */
.oon-rvm__stars {
	display: inline-flex;
	gap: 6px;
}
.oon-rvm__star {
	padding: 2px;
	border: none;
	background: none;
	cursor: pointer;
	line-height: 0;
	color: inherit;
}
.oon-rvm__star svg path {
	fill: #dcdcdc;
	transition: fill 100ms ease;
}
.oon-rvm__star.is-on svg path,
.oon-rvm__stars:hover .oon-rvm__star.is-hover svg path {
	fill: #f5c518;
}
.oon-rvm__star:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Inputs / textarea — scoped (0,2,0) to beat base.css input[type=…] (0,1,1)
   which otherwise paints them grey with a 4px radius. */
.oon-rvm .oon-rvm__input,
.oon-rvm .oon-rvm__textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fff;
	color: #1a1a1a;
	font-family: var(--oon-font-body);
	font-size: 14px;
	line-height: 1.4;
}
.oon-rvm .oon-rvm__textarea {
	min-height: 92px;
	resize: vertical;
}
.oon-rvm .oon-rvm__input::placeholder,
.oon-rvm .oon-rvm__textarea::placeholder {
	color: #9a9a9a;
	opacity: 1;
}
.oon-rvm .oon-rvm__input:focus,
.oon-rvm .oon-rvm__textarea:focus {
	outline: 2px solid #1a1a1a;
	outline-offset: 0;
	border-color: #1a1a1a;
}

/* Upload dropzone */
.oon-rvm__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 20px;
	border: 1.5px dashed #d5d5d5;
	border-radius: 10px;
	text-align: center;
	cursor: pointer;
	transition: border-color 120ms ease, background-color 120ms ease;
}
.oon-rvm__drop:hover,
.oon-rvm__drop.is-drag {
	border-color: #1a1a1a;
	background: #fafafa;
}
.oon-rvm__file {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.oon-rvm__drop-icon {
	color: #1a1a1a;
	line-height: 0;
}
.oon-rvm__drop-title {
	font-size: 14px;
	font-weight: 600;
	color: #1a1a1a;
}
.oon-rvm__drop-hint {
	font-size: 12px;
	color: #6d6d6d;
}
.oon-rvm__previews {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}
.oon-rvm__preview {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 8px;
	overflow: hidden;
	background: #f2f2f2;
}
.oon-rvm__preview img,
.oon-rvm__preview video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.oon-rvm__preview-file {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 10px;
	color: #6d6d6d;
	padding: 4px;
	text-align: center;
	word-break: break-word;
}
.oon-rvm__preview-remove {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 18px;
	height: 18px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Error + submit + footer */
.oon-rvm__error {
	margin-bottom: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #fdecec;
	color: #b3261e;
	font-size: 13px;
}
.oon-rvm__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	margin-top: 4px;
	padding: 12px 20px;
	border: none;
	border-radius: 8px;
	background: #1a1a1a;
	color: #fff;
	font-family: var(--oon-font-body);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 120ms ease, opacity 120ms ease;
}
.oon-rvm__submit:disabled {
	background: #b7b7b7;
	cursor: not-allowed;
}
.oon-rvm__submit.is-loading {
	opacity: 0.75;
	cursor: progress;
}
.oon-rvm__foot {
	margin: 14px 0 0;
	text-align: center;
	font-size: 12px;
	color: #6d6d6d;
}
.oon-rvm__foot a {
	color: #1a1a1a;
	text-decoration: underline;
}

/* Success state */
.oon-rvm__success {
	text-align: center;
	padding: 30px 10px 14px;
}
.oon-rvm__success-icon {
	color: #2e7d32;
	line-height: 0;
}
.oon-rvm__success-title {
	margin: 14px 0 0;
	font-size: 16px;
	font-weight: 600;
	color: #1a1a1a;
}

@media (max-width: 480px) {
	.oon-rvm { padding: 0; align-items: flex-end; }
	.oon-rvm__dialog {
		max-width: none;
		max-height: 92vh;
		border-radius: 16px 16px 0 0;
	}
	.oon-rvm__row { grid-template-columns: 1fr; }
}

/* ============================================================================
   AI Summary panel (live Quoli-style summary modal). Opened from the toolbar
   "+ AI Summary" button. Reuses the overlay pattern of the review modal.
   ========================================================================= */
.oon-ai[hidden] { display: none; }
.oon-ai {
	position: fixed;
	inset: 0;
	z-index: 1000000; /* above the sticky add-to-cart bar (99999) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.oon-ai__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}
.oon-ai__dialog {
	position: relative;
	width: min(560px, 100%); /* live .summary-modal width */
	max-height: 92vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
	padding: 24px 28px;
	font-family: var(--oon-font-body);
	color: #1a1a1a;
	animation: oon-rvm-in 180ms ease;
}
@media (prefers-reduced-motion: reduce) {
	.oon-ai__dialog { animation: none; }
}
.oon-ai__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: #f4f4f4;
	color: #1a1a1a;
	cursor: pointer;
	transition: background-color 120ms ease;
}
.oon-ai__close:hover { background: #e8e8e8; }
.oon-ai__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 34px 14px 0;
	font-family: var(--oon-font-body);
	font-weight: 600;
	font-size: 18px;
	color: #1a1a1a;
}
.oon-ai__title svg { color: #7a5cff; flex: 0 0 auto; }
.oon-ai__body {
	font-size: 14px;
	line-height: 1.6;
	color: #333;
}

/* Loading skeleton (live --ghost state) */
.oon-ai__skeleton span {
	display: block;
	height: 12px;
	margin-bottom: 10px;
	border-radius: 6px;
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
	background-size: 400% 100%;
	animation: oon-ai-shimmer 1.2s ease infinite;
}
.oon-ai__skeleton span:nth-child(2) { width: 92%; }
.oon-ai__skeleton span:nth-child(3) { width: 78%; }
.oon-ai__skeleton span:last-child { width: 60%; margin-bottom: 0; }
@keyframes oon-ai-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
	.oon-ai__skeleton span { animation: none; }
}

/* Summary content */
.oon-ai__summary { margin: 0 0 12px; }
.oon-ai__points { margin: 0; padding-left: 18px; }
.oon-ai__points li { margin-bottom: 6px; }

/* Not-configured / info + error states */
.oon-ai__notice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	border-radius: 10px;
	background: #f6f5ff;
	border: 1px solid #e7e3ff;
}
.oon-ai__notice-icon { color: #7a5cff; flex: 0 0 auto; line-height: 0; margin-top: 1px; }
.oon-ai__notice-text { font-size: 13.5px; line-height: 1.55; color: #333; }
.oon-ai__meta {
	margin-top: 12px;
	font-size: 12.5px;
	color: #6d6d6d;
}
.oon-ai__error {
	padding: 12px 14px;
	border-radius: 8px;
	background: #fdecec;
	color: #b3261e;
	font-size: 13.5px;
}

@media (max-width: 480px) {
	.oon-ai { padding: 0; align-items: flex-end; }
	.oon-ai__dialog { width: 100%; max-height: 90vh; border-radius: 16px 16px 0 0; }
}