/**
 * Estilos front-end de reseñas — Australcode Product Reviews.
 *
 * CAPA DE DOMINIO sobre el Australcode Frontend Kit (`assets/acfk/`). Acá vive
 * SOLO lo específico de reseñas: estrellas, distribución, orden, fotos, badge.
 * Card, grilla, botones, campos, meter y foco los da el kit — este archivo no
 * los reimplementa. Canon: wp-plugin-design/references/frontend-kit.md
 *
 * El header anterior afirmaba «hereda colores del tema vía currentColor cuando
 * puede». No era así: el archivo tenía 11 `rgba(0,0,0,…)` literales, que sobre
 * un theme oscuro simplemente desaparecen. Eso ahora lo resuelve el kit, que
 * deriva sus neutros de `currentColor` con `color-mix` bajo `@supports`.
 */

/* ── Puente de tokens ────────────────────────────────────────────────────────
   El contrato público del plugin (`--acprv-*`, documentado y escrito por el
   panel de ajustes) alimenta los tokens del kit. Va acá y no en el kit: así el
   kit se distribuye verbatim a todos los hermanos y el drift es detectable.
   Sin ciclo: si `--acprv-accent` no está seteado, cae a la cadena que el kit ya
   resolvió (theme.json → default premium). */
.acfk.acprv-scope {
	--acfk-accent: var( --acprv-accent, var( --acfk-_accent-resolved ) );
}

/* ── Encaje en temas de bloque ───────────────────────────────────────────────
   El layout `is-layout-constrained` de un tema de bloque fija `width` en el
   hijo directo, así que con `content-box` el padding se SUMA y el widget se
   desborda de la línea de contenido del tema. Medido en TT5 a 1440 con un `<p>`
   de control en el mismo contenedor: la línea del tema es x=398 w=645, y
   `.acprv-summary` renderizaba 687px de caja (645 + 40 de padding + 2 de
   borde), 21px de desborde por lado. Control negativo en Storefront (clásico):
   Δ 0/0/0, y en la PDP de ambos temas el Δ contra `#reviews` nativo también es
   0 — el defecto es específico de tema de bloque + layout constrained + página
   de contenido (FU-104). */
.acprv-scope,
.acprv-scope *,
.acprv-scope *::before,
.acprv-scope *::after {
	box-sizing: border-box;
}

.acprv-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	margin: 0 0 24px;
	padding: 18px 20px;
	border: 1px solid var( --acfk-hairline, rgba( 0, 0, 0, 0.12 ) );
	border-radius: var( --acfk-radius, 10px );
	background: var( --acfk-wash, rgba( 0, 0, 0, 0.025 ) );
}

.acprv-summary__score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 120px;
}

/* La escala y el `tabular-nums` los da `.acfk-stat__value`; acá el tamaño mayor
   del promedio destacado y su color.
   El color NO usa el acento heredado, y esto es deliberado: la regla dura del
   kit dice que el acento del theme solo pinta relleno de botón sólido, aro de
   foco y tintes ≤12% — nunca texto de cuerpo sobre un fondo que no controlamos.
   Se vio en el sandbox: con TT5, cuyo `accent-1` es amarillo, el «4.5» salía
   amarillo claro sobre blanco. El piso vuelve a ser `inherit` (el color de
   texto del theme) y el comerciante sigue pudiendo pintarlo desde Ajustes. */
.acprv-summary__avg {
	font-size: 34px;
	color: var( --acprv-accent, inherit );
}

.acprv-summary__count {
	font-size: 13px;
	opacity: 0.7;
}

.acprv-summary__bars {
	flex: 1 1 240px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.acprv-summary__row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}

.acprv-summary__label {
	width: 28px;
	flex-shrink: 0;
	opacity: 0.8;
}

/* Alto, radio, fondo y overflow los da `.acfk-meter`; acá solo el `flex` que
   pide el contexto de la fila. */
.acprv-summary__track {
	flex: 1;
}

/* Geometría desde `.acfk-meter__fill`; acá solo el color, que es el de
   estrellas y es configurable por el comerciante. */
.acprv-summary__fill {
	background: var( --acprv-star, #f5a623 );
}

/* Estrellas del promedio (overlay para puntajes parciales, ej. 4.5). */
.acprv-summary__stars {
	position: relative;
	display: inline-block;
	font-size: 18px;
	letter-spacing: 2px;
	color: var( --acfk-glyph-muted, rgba( 0, 0, 0, 0.48 ) );
	line-height: 1;
}
.acprv-summary__stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--acprv-star, #f5a623);
}

.acprv-summary__n {
	width: 28px;
	flex-shrink: 0;
	text-align: right;
	opacity: 0.7;
}

/* Botón "escribir reseña" del shortcode [acprv_form]. */
.acprv-write-review {
	display: inline-block;
	max-width: 100%;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	color: #fff;
	background: var(--acprv-accent, #1a7f37);
	border-radius: 8px;
	transition: opacity 0.15s ease;
}

.acprv-write-review:hover,
.acprv-write-review:focus {
	opacity: 0.9;
	color: #fff;
}

/* Contenedor del CTA — ver el porqué en `FormShortcode::render()`. Ocupa la
   línea de contenido completa, así que los `margin-inline: auto !important` que
   el tema de bloque le impone a sus hijos directos son un no-op sobre él, y el
   botón se alinea al inicio adentro en vez de quedar centrado (FU-104). */
.acprv-write-review-wrap {
	display: block;
	width: 100%;
	text-align: start;
}

.acprv-shortcode {
	margin: 24px 0;
}

.acprv-shortcode__heading {
	margin: 0 0 16px;
}

/* La grilla la da `.acfk-grid` (auto-fill 240px + gap + colapso a 1 columna bajo
   600px, que acá no existía). Queda solo el override de columnas fijas, que es
   de dominio: lo pide el atributo `columns` del shortcode. */

/* Columnas fijas: --acprv-cols (1-4) lo fija el shortcode por instancia. */
.acprv-shortcode--fixedcols {
	grid-template-columns: repeat(var(--acprv-cols, 3), minmax(0, 1fr));
}

/* El apilado lo da `.acfk-stack`. */

/* Móvil: una columna, sin importar las columnas fijas configuradas. */
@media (max-width: 600px) {
	.acprv-shortcode--grid {
		grid-template-columns: 1fr;
	}
}

.acprv-card__date {
	opacity: 0.6;
}

/* Conteo de "útil" de solo lectura en la tarjeta del shortcode (el voto
   interactivo vive en el PDP). */
.acprv-card__helpful {
	width: 100%;
	margin-top: 2px;
	font-size: 12px;
	opacity: 0.6;
}

/* Padding, borde y radio los da `.acfk-card`.
   El fondo cambia de fuente y vale explicar por qué: la regla anterior decía
   estar «tokenizada para degradar en themes oscuros» con `var(--acprv-card-bg,
   #fff)`, y ese fallback es justamente el que NO degrada — pinta blanco sobre
   negro salvo que el comerciante intervenga. El kit lo deriva de `currentColor`
   con `color-mix`, así que funciona en claro y en oscuro sin configurar nada.
   `--acprv-card-bg` sigue respetado como override explícito. */
.acprv-card {
	background: var( --acprv-card-bg, var( --acfk-wash, rgba( 0, 0, 0, 0.025 ) ) );
}

.acprv-card__stars {
	margin-bottom: 8px;
}

/* Estrellas auto-contenidas de la tarjeta (overlay para puntajes parciales).
   No depende del font de estrellas de WooCommerce: robusto fuera del PDP. */
.acprv-stars {
	position: relative;
	display: inline-block;
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 1;
	color: var( --acfk-glyph-muted, rgba( 0, 0, 0, 0.48 ) );
	white-space: nowrap;
}

.acprv-stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--acprv-star, #f5a623);
}

/* FU-206 — redundancia numérica de la nota en la card. `color: inherit` a
   propósito: un color fijo revienta en temas oscuros, que es el modo de falla
   exacto de FU-102. Se distingue por peso, no por color. */
.acprv-card__rating-value {
	margin-left: 6px;
	font-size: 13px;
	font-weight: 600;
	color: inherit;
}

/* FU-205 — estado vacío del shortcode. Sin cromo propio: hereda color y
   tipografía del tema, igual que el resto del widget. */
.acprv-shortcode__empty {
	margin: 0;
	color: inherit;
	color: color-mix( in srgb, currentColor 70%, transparent );
}

.acprv-card__text {
	font-size: 14px;
	line-height: 1.55;
}

.acprv-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 13px;
}

.acprv-card__author {
	font-weight: 600;
}

.acprv-card__product {
	opacity: 0.6;
}

.acprv-helpful {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
	/* Mismo criterio que `.acprv-sort__btn` (:440): el mínimo táctil manda sobre la densidad.
	   Medido 30,8px de alto a 375 en TT5 Y en Storefront — o sea es del componente, no del tema.
	   Este control se repite UNA VEZ POR RESEÑA, así que en una PDP con 20 reseñas son 20 blancos
	   chicos, contra los 3 botones de orden que ya cumplían. La remediación de FU-105 cubrió el
	   botón vecino y saltó éste; no fue regresión sino remediación incompleta.
	   `min-height` y no `height` para que la etiqueta pueda envolver en idiomas largos
	   («¿Te resultó útil?» ya mide más que el inglés). FU-102. */
	min-height: 44px;
	padding: 4px 12px;
	font-size: 13px;
	line-height: 1.6;
	color: inherit;
	background: transparent;
	border: 1px solid var( --acfk-field-line, rgba( 0, 0, 0, 0.18 ) );
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.acprv-helpful:hover:not(:disabled) {
	background: var( --acfk-wash-2, rgba( 0, 0, 0, 0.04 ) );
	border-color: currentColor;
}

.acprv-helpful:disabled {
	cursor: default;
	opacity: 0.85;
}

/* El estado votado deriva del accent configurable, no de un hex fijo: si el
   merchant cambia "Accent color" en Settings, el voto tiene que seguirlo. El
   fallback repite el default de --acprv-accent (:107) — al tocar uno, tocar el otro. */
.acprv-helpful--voted {
	color: var(--acprv-accent, #1a7f37);
	/* Fallback estático primero: los navegadores sin `color-mix` (pre-2023) descartan
	   las dos declaraciones de abajo y se quedan con estas, que son el estado previo. */
	border-color: rgba(26, 127, 55, 0.4);
	background: rgba(26, 127, 55, 0.08);
	border-color: color-mix(in srgb, var(--acprv-accent, #1a7f37) 40%, transparent);
	background: color-mix(in srgb, var(--acprv-accent, #1a7f37) 8%, transparent);
}

.acprv-helpful__count {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* FU-200 — mensaje de fallo del voto. Hereda `currentColor` como el resto del
   widget para no reventar en temas oscuros (es el modo de falla de FU-102), y se
   distingue del texto vecino por peso, no por color. */
.acprv-helpful__error {
	display: inline-block;
	margin-left: 8px;
	font-size: 13px;
	font-weight: 600;
	color: inherit;
}

.acprv-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.acprv-photo-link,
.acprv-photos .acprv-photo {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 8px;
	overflow: hidden;
	object-fit: cover;
}

.acprv-photo-link {
	border: 1px solid var( --acfk-hairline, rgba( 0, 0, 0, 0.1 ) );
}

.acprv-photo-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.comment-form-acprv-photos .acprv-photo-hint {
	display: block;
	margin-top: 4px;
	/* FU-201 / L-028 — NADA de `opacity` acá: se multiplicaba con el alpha 0.62 que
	   ya trae `--acfk-muted` en la regla base (:625), dejando el hint en 2.88:1 sobre
	   TT5 y 1.81:1 sobre Storefront, cuyo texto base ya es un gris medio (#6d6d6d).
	   El atenuado va por color, con un alpha único y auditable — que es exactamente lo
	   que `admin.css` hace en `.acprv-locked-preview` citando esta misma regla. El 13px
	   además saca al hint del umbral de «texto pequeño».
	   NO se atenúa por color TAMPOCO. El parche proponía `color-mix(currentColor 78%)`
	   prediciendo ~4.6:1 en Storefront; MEDIDO pintando el pixel real sobre el tema:
	   compuesto rgb(141,141,141) = **3.32:1**, o sea seguía fallando AA. La causa es
	   estructural y no del porcentaje: el texto base de Storefront (`#6d6d6d`) ya está
	   en **5.17:1**, así que cualquier atenuación lo hunde bajo 4.5 — para pasar, el
	   alpha tendría que ser ≥93%, que es no atenuar. El hint queda distinguido por
	   TAMAÑO y posición, no por contraste, que es justo lo que L-028 defiende: la
	   jerarquía no se compra con contraste. Medido después: 5.17:1 en Storefront,
	   12.6:1 en TT5. */
	font-size: 13px;
	opacity: 1;
	color: inherit;
}

/* Forma, escala y ritmo los da `.acfk-pill`. Acá solo lo de dominio: el color
   del badge (configurable), su tinte, y el margen respecto del meta de la
   reseña. El tinte se deriva del color configurado con `color-mix` en vez del
   `rgba(26,127,55,.1)` literal anterior, que ignoraba el color elegido por el
   comerciante: si ponía azul, el texto era azul y el fondo seguía verde. */
.acprv-verified-badge {
	margin-left: 8px;
	color: var( --acprv-badge, var( --acfk-success, #1a7f37 ) );
	border-color: transparent;
	white-space: nowrap;
}

@supports ( color: color-mix( in srgb, red 50%, blue ) ) {
	.acprv-verified-badge {
		/* El verde fijo fallaba AA en los TRES contextos medidos: 4.20:1 en TT5
		   claro, 4.30:1 en Storefront y 2.69:1 en un tema oscuro real — este
		   último también por debajo del piso 3:1. A 12px/600 no califica como
		   texto grande (haría falta ≥18.66px bold), así que el umbral es 4.5:1.
		   El resto del widget invertía bien por `currentColor` mientras el badge
		   seguía midiendo rgb(26,127,55) (FU-103).

		   Se compone el color de marca contra `currentColor`, que ya es el color
		   legible del tema en cualquier polaridad: arrastra la luminancia hacia
		   el lado correcto —oscurece en claro, aclara en oscuro— y conserva la
		   lectura «verde = verificado». El borde al 34% agrega la señal de
		   contorno que hoy da solo el relleno, para que la pieza no dependa del
		   color para leerse (SC 1.4.1).

		   El tinte y el borde salen del color CONFIGURADO, no de `currentColor`,
		   para preservar la propiedad que este bloque ya tenía: si el comerciante
		   pone azul, el fondo acompaña en vez de quedarse verde.

		   Los números NO son estéticos, son el resultado de resolver el peor de
		   los 3 contextos. El 72%/12% que se probó primero medía 4.43:1 sobre su
		   propio tinte en el tema oscuro — FAIL por poco. Con 65%/6% el peor caso
		   queda en 4.71:1 (TT5 7.84 · Storefront 4.71 · TT3 oscuro 5.15), y el
		   hue se mantiene en ~138° en los tres, así que sigue leyéndose «verde».
		   El tinte baja de 12% a 6% porque en polaridad oscura ACERCA el fondo al
		   texto: era lo que hundía el ratio, no el color del texto.
		   Referencia de que 4.71 es el techo razonable y no un compromiso flojo:
		   el propio texto de Storefront mide 5.00:1 sobre su fondo — el badge
		   queda a paridad con el tema, que es «convivir, no dominar».
		   La base sigue siendo la del kit (`--acfk-success`, #1a7f37): forkear el
		   kit para un fix de este plugin rompería a los 6 hermanos. */
		color: color-mix( in srgb, var( --acprv-badge, var( --acfk-success, #1a7f37 ) ) 65%, currentColor );
		background: color-mix( in srgb, var( --acprv-badge, var( --acfk-success, #1a7f37 ) ) 6%, transparent );
		border-color: color-mix( in srgb, var( --acprv-badge, var( --acfk-success, #1a7f37 ) ) 34%, transparent );
	}
}

/* Checkmark geométrico CSS (sin char Unicode: cross-OS estable, sin ruido en
   lectores de pantalla — el texto "Verified purchase" ya comunica el estado). */
.acprv-verified-badge::before {
	content: "";
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.5 3 8l1.1-1.1 2.4 2.4 5.4-5.4L13 5z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.5 3 8l1.1-1.1 2.4 2.4 5.4-5.4L13 5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width: 480px) {
	.acprv-summary {
		gap: 14px;
		padding: 14px;
	}
	.acprv-summary__avg {
		font-size: 28px;
	}
}

/* Controles de orden de reseñas (FASE 4.2) */
.acprv-sort {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}
.acprv-sort__label {
	font-size: 13px;
	opacity: 0.7;
}
.acprv-sort__btn {
	/* `<button>` NO hereda `color`: la hoja del UA le asigna `buttontext` (negro).
	   Sin este `color: inherit` el control se ve bien en cualquier tema que
	   resetee botones (TT5, Storefront) y DESAPARECE en el que no — medido en un
	   tema oscuro real (TT3 con base #202124): color computado rgb(0,0,0) sobre
	   body rgb(32,33,36) = 1.25:1. El `currentColor` del borde depende de lo
	   mismo, así que el contorno también se perdía. Solo `.is-active` se salvaba,
	   porque declara `color` más abajo y su `inherit` lo rescataba. */
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 4px;
	/* 30px de alto medidos a 375: el mínimo táctil manda sobre la densidad
	   (FU-105). `min-height` y no `height`, para que la etiqueta pueda envolver
	   en dos líneas en los idiomas largos — en es-CL «Mejor calificación» ya mide
	   128px a 375 y la fila envuelve a 2 renglones. */
	min-height: 44px;
	padding: 4px 12px;
	font-size: 13px;
	cursor: pointer;
	/* La distinción con el activo se hace por peso y borde, NO por `opacity`: la
	   opacidad rebaja el contraste del texto de forma acumulativa sobre el color
	   heredado, y en temas de texto atenuado (Storefront, #6d6d6d) el 0.8 dejaba
	   el botón en 3.45:1. */
	font-weight: 400;
}
.acprv-sort__btn:hover,
.acprv-sort__btn.is-active {
	font-weight: 600;
}

/* Wrapper de la inyección JS (resumen + orden) — FASE 7 */
.acprv-injected {
	margin-bottom: 20px;
}
.acprv-sort__btn.is-active {
	/* El accent es OPCIONAL — vacío = heredar del tema, y vacío es el default
	   documentado. Sin accent, `border-color` y `color` caían a
	   `currentColor`/`inherit`, o sea EXACTAMENTE el estado inactivo, y la única
	   señal que quedaba era el delta de opacity 0.8 → 1. Falla el playbook §8: el
	   color no puede ser el único diferenciador, y acá ni color había (FD-102).
	   El relleno da la señal de forma, que no depende de configuración.
	   `--acfk-wash-2` ya se usa en `.acprv-helpful:hover`, así que respeta el
	   contexto oscuro sin token nuevo. */
	border-color: var(--acprv-accent, currentColor);
	color: var(--acprv-accent, inherit);
	background: var(--acfk-wash-2, rgba(0, 0, 0, 0.06));
	font-weight: 600;
}

/* Estilos de tarjeta configurables del shortcode/bloque — FASE 7 */
.acprv-cardstyle-shadow .acprv-card {
	border-color: transparent;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.acprv-cardstyle-flat .acprv-card {
	border-color: transparent;
	background: transparent;
	padding-left: 0;
	padding-right: 0;
}

/* PDP (F-001): las estrellas nativas de WooCommerce de cada reseña heredan el
   color de estrella del plugin, para que el summary (naranja out-of-the-box) y
   las reseñas individuales coincidan. Solo se pinta el overlay lleno
   (`span::before`); el track de estrellas vacías (`.star-rating::before`) queda
   en gris para no perder la distinción lleno/vacío — pero NO en el gris del tema:
   medido en TT5, el `#cfc8d8` nativo da 1.63:1 sobre blanco, bajo el 3:1 de
   WCAG 1.4.11, y la 5ª estrella de un «4 de 5» no se lee. El mismo glifo en la
   barra de resumen ya está en 3.37:1 desde el acfk v1.0.12; esto empareja las dos
   superficies con el MISMO token en vez de dejar una a merced del tema activo.
   Sigue siendo el track vacío: se pinta `::before`, nunca `span::before` con el
   color lleno (eso fundiría lleno y vacío — ver MEMORY.md §Frontend). Scopeado a
   `.woocommerce #reviews .commentlist` → no derrama sobre otras `.star-rating`
   del catálogo. El owner puede sobre-escribir --acprv-star desde Settings. */
.woocommerce #reviews .commentlist .star-rating::before {
	color: var(--acprv-star-empty, var(--acfk-glyph-muted, rgba(0, 0, 0, 0.48)));
}

.woocommerce #reviews .commentlist .star-rating span::before {
	color: var(--acprv-star, #f5a623);
}

/* PDP a móvil (FD-124): WooCommerce flota el avatar y le da a `.comment-text` un
   `margin-left` fijo en px que NO colapsa en ningún breakpoint. Medido en TT5:
   offset 90px @1440 · 97px @768 · 86px @375. A 1440 es el 6,7% del ancho; a 375
   es el 28% del contenedor y deja el cuerpo en ~192px ≈ 30 caracteres, la mitad
   del piso legible. El bloque de resumen del PROPIO plugin mide 306px en el mismo
   render: la reseña sale 82px más angosta que su encabezado.

   Entra como hallazgo del plugin y no como nit porque `[acprv_reviews]` YA resuelve
   bien este caso —colapsa a una columna bajo 600px—: el plugin sabe cuál es el
   comportamiento correcto y lo pierde justo en la superficie nativa, que es la que
   ve el 99% de los clientes.

   Tres capas de scope: solo bajo 600px (a 1440/768 el offset actual es correcto y
   NO debe colapsarse), solo dentro de `.woocommerce #reviews` (no alcanza la
   `.commentlist` de blog), y solo margin/float/position — cero color o tipografía.
   Mismo scope tight que la regla F-001 de arriba, cuyo precedente ya está aceptado.

   `!important` deliberado y acotado a estas dos declaraciones: el margen lo emite
   `woocommerce.css`, que se encola DESPUÉS de esta hoja y con un selector más
   pesado, así que sin él la regla no gana. Es la excepción que el playbook admite
   para override de core, no `!important` por costumbre.
   `position: static` explícito porque sin él los themes que ponen el avatar en
   `absolute` dejan el nombre encimado. */
@media (max-width: 600px) {
	.woocommerce #reviews .commentlist li .comment-text {
		margin-left: 0 !important;
	}

	/* El offset tiene DOS fuentes, no una — medido en el DOM a 375 tras aplicar la
	   primera mitad: con `margin-left: 0` la tarjeta seguia 40px adentro. Los 40px
	   son el `padding-left` del `<ol>`, que no lo pone ninguna hoja sino el
	   USER-AGENT (la sangria de lista ordenada). La lista de resenas no se numera,
	   asi que esa sangria no compra nada y cuesta el 11% del ancho a 375. */
	.woocommerce #reviews ol.commentlist {
		padding-left: 0;
	}

	/* `#comments` va en el selector a proposito: WooCommerce declara
	   `.woocommerce #reviews #comments ol.commentlist li img.avatar` con DOS ids
	   —especificidad (2,3,3)— y sin el segundo id este bloque queda en (1,3,2) y
	   PIERDE. Medido: `position` computaba `absolute` con el avatar en `left: 0`
	   pese a estar declarado `static` aca. Es el mismo modo de falla de FD-121 en
	   los <select>: la regla matchea y no manda. */
	.woocommerce #reviews #comments ol.commentlist li img.avatar {
		position: static;
		float: none;
		margin: 0 0 8px;
	}
}

/* ── Formulario de reseña (markup nativo de WooCommerce) ─────────────────────
   La superficie de mayor fricción del plugin y la que peor se veía: WooCommerce
   emite labels sueltos, inputs de anchos distintos sin alinear y el botón del
   theme. Acá NO se reescribe su markup —eso rompería con cada versión de WC y
   con los plugins que también lo filtran—: se le pone el marcador `.acfk` desde
   PHP y se lo viste con los tokens del kit.

   Los selectores de elemento van dentro de `:where()` para que pesen 0: el
   theme y el comerciante siempre pueden ganar sin pelear especificidad. */
.acprv-form {
	display: flex;
	flex-direction: column;
	gap: var( --acfk-gap, 16px );
	margin-top: var( --acfk-gap, 16px );
	padding: 20px;
	border: 1px solid var( --acfk-hairline, rgba( 0, 0, 0, 0.12 ) );
	border-radius: var( --acfk-radius, 10px );
	background: var( --acfk-wash, rgba( 0, 0, 0, 0.025 ) );
}

/* WooCommerce envuelve cada campo en un <p>; el gap del stack ya separa. */
.acprv-form :where( p ) {
	margin: 0;
}

.acprv-form :where( label ) {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
}

.acprv-form :where( input[type="text"], input[type="email"], input[type="url"], textarea ) {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var( --acfk-field-line, rgba( 0, 0, 0, 0.22 ) );
	border-radius: var( --acfk-radius-sm, 6px );
	background: transparent;
	color: inherit;
	box-sizing: border-box;
}

.acprv-form :where( textarea ) {
	min-height: 120px;
	resize: vertical;
}

/* Fila de consentimiento/cookies: el checkbox no debe ocupar el ancho completo
   ni empujar su etiqueta a otra línea. */
.acprv-form :where( .comment-form-cookies-consent ) {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.acprv-form :where( .comment-form-cookies-consent ) :where( label ) {
	margin: 0;
	font-weight: 400;
}

.acprv-form :where( input[type="checkbox"] ) {
	width: auto;
	min-height: 0;
	margin-top: 3px;
	flex-shrink: 0;
}

/* Estrellas de puntuación: tap target real en móvil y un tamaño que se vea
   como control, no como texto suelto. */
.acprv-form :where( .comment-form-rating ) :where( p.stars ) {
	margin: 0;
	font-size: 22px;
	line-height: 1.2;
}

.acprv-form :where( .comment-form-rating ) :where( a ) {
	/* Medido a 375: con `padding: 4px 2px` el enlace salía 28x32 en TT5 y 22x22
	   en Storefront — o sea el comentario de arriba afirmaba un tap target que la
	   medición desmentía (FU-105). El tamaño dependía del `font-size` heredado
	   del tema, así que el padding solo no alcanzaba: hace falta caja explícita.
	   El tap target no puede depender de la tipografía del anfitrión. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
}

/* Input de archivo: el control nativo no se estiliza, pero su fila sí. */
.acprv-form :where( input[type="file"] ) {
	display: block;
	max-width: 100%;
	font-size: 14px;
	/* Quedaba fuera del `min-height: 44px` de arriba, que enumera
	   text/email/url/textarea. Medido: 281x23 con `min-height` computado en 0 —
	   y es el control de una feature bandera del tier Free (FU-105). */
	min-height: 44px;
	padding: 10px 0;
	box-sizing: border-box;
}

.acprv-photo-hint {
	display: block;
	margin-top: 6px;
	color: var( --acfk-muted, inherit );
	font-size: 13px;
}

/* El submit lo viste `.acfk-btn--solid` desde PHP; acá solo se evita que el
   theme lo estire a ancho completo en desktop. */
.acprv-form :where( .form-submit ) {
	margin: 0;
}

.acprv-form :where( .form-submit ) :where( input[type="submit"] ) {
	width: auto;
}

@media ( max-width: 600px ) {
	.acprv-form {
		padding: 16px;
	}
	.acprv-form :where( .form-submit ) :where( input[type="submit"] ) {
		width: 100%;
	}
}