/* ==========================================================================
   Alice Academy — product reviews.

   The Shopify block this is modelled on leans on gold stars and a blue tick
   to carry its hierarchy. Neither exists here, so the weight is carried by
   size and by fill: the average is the largest number on the page, filled
   stars are ink against hairline grey, and the verified tick is the same ink
   as the type around it. Disclosure pills are the one place a review says
   something the shop needs the reader to notice, so they get a bordered
   surface rather than another shade of grey text.

   Every value is a token from theme.css. Tracking stays at or below .05em on
   small uppercase labels and at 0 on anything 18px or larger.

   Layout: one column to 700px, then reviewer / review / photos side by side.
   ========================================================================== */

/* ------------------------------------------------------------------ shell */

.aa-rv {
	color: var(--aa-ink);
	font-size: var(--aa-fs-base);
}

.aa-rv__head { margin-bottom: 1.5rem; }

.aa-rv__title {
	margin: 0;
	letter-spacing: 0;
}

/* ---------------------------------------------------------------- summary */

.aa-rvsum {
	display: grid;
	gap: 1.75rem;
	padding: 1.5rem;
	margin-bottom: 1.75rem;
	border: 1px solid var(--aa-hairline);
	border-radius: var(--aa-radius-lg);
	background: var(--aa-surface-soft);
}

@media (min-width: 700px) {
	.aa-rvsum {
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 13rem);
		align-items: center;
		gap: 2.5rem;
		padding: 2rem;
	}
}

.aa-rvsum__score { text-align: center; }

@media (min-width: 700px) {
	.aa-rvsum__score {
		text-align: start;
		border-inline-end: 1px solid var(--aa-hairline);
		padding-inline-end: 2.5rem;
	}
}

.aa-rvsum__big {
	margin: 0 0 .35rem;
	font-size: var(--aa-fs-2xl);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	color: var(--aa-ink);
}

.aa-rvsum__meta {
	margin: .5rem 0 0;
	font-size: var(--aa-fs-sm);
	color: var(--aa-muted);
}

/* histogram */

.aa-rvsum__hist {
	display: grid;
	gap: .4rem;
}

.aa-rvsum__row {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) 2.5rem;
	align-items: center;
	gap: .75rem;
}

.aa-rvsum__rowlabel,
.aa-rvsum__rownum {
	font-size: var(--aa-fs-sm);
	color: var(--aa-muted);
	white-space: nowrap;
}

.aa-rvsum__rownum { text-align: end; }

.aa-rvsum__bar {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--aa-surface-strong);
	overflow: hidden;
}

.aa-rvsum__fill {
	display: block;
	height: 100%;
	background: var(--aa-ink);
	border-radius: inherit;
}

/* recommend rate */

.aa-rvsum__rec { text-align: center; }

@media (min-width: 700px) {
	.aa-rvsum__rec {
		border-inline-start: 1px solid var(--aa-hairline);
		padding-inline-start: 2.5rem;
	}
}

.aa-rvsum__recnum {
	margin: 0;
	font-size: var(--aa-fs-xl);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--aa-ink);
}

.aa-rvsum__recmeta {
	margin: .25rem 0 0;
	font-size: var(--aa-fs-sm);
	color: var(--aa-muted);
}

/* ------------------------------------------------------------------ stars */

.aa-rv-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	vertical-align: middle;
}

.aa-rv-star {
	width: 15px;
	height: 15px;
	flex: none;
	fill: var(--aa-surface-strong);
}

.aa-rv-star.is-on { fill: var(--aa-ink); }

/* --------------------------------------------------------------- controls */

.aa-rv__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--aa-hairline);
}

.aa-rv__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .75rem;
	margin: 0;
}

.aa-rv__control {
	display: grid;
	gap: .3rem;
	margin: 0;
}

.aa-rv__label {
	font-size: var(--aa-fs-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--aa-muted);
}

.aa-rv__select,
.aa-rv__input {
	min-height: 44px;
	padding: .5rem .75rem;
	border: 1px solid var(--aa-hairline);
	border-radius: var(--aa-radius);
	background: var(--aa-surface);
	color: var(--aa-ink);
	font-family: var(--aa-sans);
	font-size: var(--aa-fs-sm);
}

.aa-rv__select { min-width: 11rem; }

.aa-rv__searchwrap {
	position: relative;
	display: block;
}

.aa-rv__searchwrap .aa-rv__input {
	width: 100%;
	min-width: 12rem;
	padding-inline-start: 2.25rem;
}

.aa-rv__mag {
	position: absolute;
	inset-inline-start: .7rem;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--aa-muted);
	stroke-width: 1.8;
	stroke-linecap: round;
	pointer-events: none;
}

/*
 * Everything on the controls row is 44px tall.
 *
 * The row is bottom-aligned, so three different heights read as three
 * different top edges: the select and input are 44, `aa-btn--sm` made Apply
 * 38 and the full-size Write a review came out at 47. Pinning the buttons to
 * the field height lines all four up top and bottom, and 44 keeps them at the
 * minimum comfortable tap size.
 */
.aa-rv__go,
.aa-rv__write {
	flex: none;
	min-height: 44px;
	height: 44px;
	padding-block: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* filter pills */

.aa-rv__pills {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.aa-rv__pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 44px;
	padding: .5rem .9rem;
	border: 1px solid var(--aa-hairline);
	border-radius: 999px;
	background: var(--aa-surface);
	color: var(--aa-ink);
	font-size: var(--aa-fs-sm);
	text-decoration: none;
	transition: background .18s var(--aa-ease), border-color .18s var(--aa-ease), color .18s var(--aa-ease);
}

.aa-rv__pill:hover { border-color: var(--aa-rose); }

.aa-rv__pill.is-on {
	background: var(--aa-ink);
	border-color: var(--aa-ink);
	color: var(--aa-surface);
}

.aa-rv__pillnum {
	font-size: var(--aa-fs-xs);
	color: var(--aa-muted);
}

.aa-rv__pill.is-on .aa-rv__pillnum { color: var(--aa-sand); }

.aa-rv__write { margin-inline-start: auto; }

/* result line */

.aa-rv__count {
	margin: 1rem 0 0;
	font-size: var(--aa-fs-sm);
	color: var(--aa-muted);
}

.aa-rv__clear {
	color: var(--aa-ink);
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------- list */

.aa-rv__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aa-rvitem {
	padding-block: 1.75rem;
	border-bottom: 1px solid var(--aa-hairline);
}

.aa-rvitem:last-child { border-bottom: 0; }

/* JS collapse. Without JS nothing is hidden and the button never unhides,
   so a scriptless visitor simply gets the whole list. */
.aa-rv__list.is-collapsed .aa-rvitem.is-folded { display: none; }

.aa-rvitem__inner {
	display: grid;
	gap: 1rem;
}

@media (min-width: 700px) {
	.aa-rvitem__inner {
		grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) auto;
		gap: 2rem;
		align-items: start;
	}
}

/* reviewer column */

.aa-rvitem__who {
	display: grid;
	gap: .5rem;
	justify-items: start;
}

.aa-rvitem__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--aa-surface-strong);
	color: var(--aa-ink);
	font-size: var(--aa-fs-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
}

.aa-rvitem__name {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	font-size: var(--aa-fs-base);
	font-weight: 600;
	color: var(--aa-ink);
}

.aa-rvitem__tick {
	display: inline-flex;
	line-height: 0;
}

.aa-rvitem__tick svg {
	width: 15px;
	height: 15px;
	fill: var(--aa-ink);
}

.aa-rvitem__tickmark {
	fill: none;
	stroke: var(--aa-surface);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Disclosure. Deliberately a bordered pill and never a tick — a gifted
   reviewer is not a verified buyer and the two must not read alike. */
.aa-rvitem__disc { margin: 0; }

.aa-rvitem__discpill {
	display: inline-block;
	padding: .25rem .55rem;
	border: 1px solid var(--aa-hairline);
	border-radius: var(--aa-radius);
	background: var(--aa-surface-soft);
	color: var(--aa-ink);
	font-size: var(--aa-fs-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.aa-rvitem__facts {
	display: grid;
	gap: .2rem;
	margin: .25rem 0 0;
}

.aa-rvitem__fact {
	display: flex;
	gap: .4rem;
	font-size: var(--aa-fs-sm);
}

.aa-rvitem__fact dt {
	margin: 0;
	color: var(--aa-muted);
}

.aa-rvitem__fact dd {
	margin: 0;
	color: var(--aa-ink);
}

/* review column */

.aa-rvitem__main { min-width: 0; }

.aa-rvitem__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 0 0 .5rem;
}

.aa-rvitem__date {
	font-size: var(--aa-fs-sm);
	color: var(--aa-muted);
}

.aa-rvitem__title {
	margin: 0 0 .4rem;
	font-size: var(--aa-fs-md);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--aa-ink);
}

.aa-rvitem__body {
	max-width: var(--aa-max-text);
	color: var(--aa-ink);
}

.aa-rvitem__body p { margin: 0 0 .6rem; }
.aa-rvitem__body p:last-child { margin-bottom: 0; }

.aa-rvitem__rec {
	display: inline-block;
	margin: .8rem 0 0;
	padding: .35rem .7rem;
	border-radius: 999px;
	background: var(--aa-surface-soft);
	color: var(--aa-muted);
	font-size: var(--aa-fs-sm);
}

.aa-rvitem__rec strong { color: var(--aa-ink); }

/* actions */

.aa-rvitem__actions {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 1rem 0 0;
}

@media (min-width: 700px) {
	.aa-rvitem__actions { justify-content: flex-end; }
}

.aa-rvitem__vote,
.aa-rvitem__share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	min-width: 44px;
	min-height: 44px;
	padding: .4rem .6rem;
	border: 1px solid transparent;
	border-radius: var(--aa-radius);
	background: none;
	color: var(--aa-muted);
	font-family: var(--aa-sans);
	font-size: var(--aa-fs-sm);
	text-decoration: none;
	cursor: pointer;
	transition: color .18s var(--aa-ease), border-color .18s var(--aa-ease);
}

.aa-rvitem__vote:hover,
.aa-rvitem__share:hover,
.aa-rvitem__vote:focus-visible,
.aa-rvitem__share:focus-visible {
	color: var(--aa-rose);
	border-color: var(--aa-hairline);
}

.aa-rvitem__vote.is-on {
	color: var(--aa-ink);
	border-color: var(--aa-ink);
}

.aa-rvitem__vote svg,
.aa-rvitem__share svg {
	width: 17px;
	height: 17px;
	flex: none;
	fill: currentColor;
}

.aa-rvitem__share svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

.aa-rvitem__thumbdown { transform: rotate(180deg); }

.aa-rvitem__votenum { font-variant-numeric: tabular-nums; }

/* photos */

.aa-rvitem__photos {
	display: flex;
	gap: .5rem;
}

@media (min-width: 700px) {
	.aa-rvitem__photos { justify-content: flex-end; }
}

.aa-rvitem__photo {
	position: relative;
	display: block;
	width: 72px;
	height: 72px;
	flex: none;
	overflow: hidden;
	border: 1px solid var(--aa-hairline);
	border-radius: var(--aa-radius);
	background: var(--aa-surface-soft);
}

.aa-rvitem__photoimg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.aa-rvitem__photomore {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Scrim over the thumbnail. Opacity rather than an rgba() literal, so the
	   only colour involved is still the token. */
	background: var(--aa-ink);
	color: var(--aa-surface);
	font-size: var(--aa-fs-sm);
	font-weight: 700;
	opacity: .82;
}

/* ------------------------------------------------------------ empty state */

.aa-rv__first {
	display: grid;
	justify-items: start;
	gap: 1rem;
	padding: 1.75rem;
	border: 1px solid var(--aa-hairline);
	border-radius: var(--aa-radius-lg);
	background: var(--aa-surface-soft);
}

.aa-rv__firstline {
	margin: 0;
	max-width: var(--aa-max-text);
	color: var(--aa-ink);
}

.aa-rv__empty {
	margin: 1.5rem 0;
	color: var(--aa-muted);
}

.aa-rv__note {
	margin: 1.5rem 0 0;
	color: var(--aa-muted);
	font-size: var(--aa-fs-sm);
}

/* --------------------------------------------------------------- show more */

.aa-rv__more {
	margin: 1.5rem 0 0;
	text-align: center;
}

/* ------------------------------------------------------------------- form */

.aa-rv__formwrap {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--aa-hairline);
	scroll-margin-top: calc(var(--aa-header-h) + 1rem);
}

.aa-rvform__title {
	display: block;
	margin-bottom: 1.25rem;
	font-size: var(--aa-fs-lg);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--aa-ink);
}

.aa-rvform {
	display: grid;
	gap: 1rem;
	max-width: 40rem;
}

.aa-rvform__row {
	display: grid;
	gap: .35rem;
	margin: 0;
	border: 0;
	padding: 0;
}

.aa-rvform__label {
	padding: 0;
	font-size: var(--aa-fs-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--aa-muted);
}

.aa-rvform__opt {
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: none;
}

.aa-rvform .required { color: var(--aa-ink); }

.aa-rvform__input {
	width: 100%;
	min-height: 44px;
	padding: .6rem .75rem;
	border: 1px solid var(--aa-hairline);
	border-radius: var(--aa-radius);
	background: var(--aa-surface);
	color: var(--aa-ink);
	font-family: var(--aa-sans);
	font-size: var(--aa-fs-base);
}

.aa-rvform__input:focus-visible {
	outline: 2px solid var(--aa-ink);
	outline-offset: 1px;
}

textarea.aa-rvform__input { min-height: 8rem; resize: vertical; }

.aa-rvform__file {
	min-height: 44px;
	padding: .5rem 0;
	font-size: var(--aa-fs-sm);
	color: var(--aa-ink);
}

/* star input — five radios, reversed so the row reads 1→5 left to right
   while `~` can still light the stars to the left of the checked one */

.aa-rvform__rating {
	margin: 0;
	padding: 0;
	border: 0;
}

.aa-rvform__stars {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
	margin-top: .3rem;
}

.aa-rvform__starlabel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	cursor: pointer;
}

.aa-rvform__starlabel svg {
	width: 26px;
	height: 26px;
	fill: var(--aa-surface-strong);
	transition: fill .12s var(--aa-ease);
}

.aa-rvform__radio:checked ~ .aa-rvform__starlabel svg,
.aa-rvform__radio:checked + .aa-rvform__starlabel svg {
	fill: var(--aa-ink);
}

.aa-rvform__stars:hover .aa-rvform__starlabel:hover svg,
.aa-rvform__stars:hover .aa-rvform__starlabel:hover ~ .aa-rvform__starlabel svg {
	fill: var(--aa-ink);
}

.aa-rvform__radio:focus-visible + .aa-rvform__starlabel {
	outline: 2px solid var(--aa-ink);
	outline-offset: -4px;
	border-radius: var(--aa-radius);
}

/* yes / no pills */

.aa-rvform__choices {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .3rem;
}

.aa-rvform__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 5rem;
	min-height: 44px;
	padding: .5rem 1rem;
	border: 1px solid var(--aa-hairline);
	border-radius: 999px;
	background: var(--aa-surface);
	color: var(--aa-ink);
	font-size: var(--aa-fs-sm);
	cursor: pointer;
	transition: background .18s var(--aa-ease), border-color .18s var(--aa-ease), color .18s var(--aa-ease);
}

.aa-rvform__choice:checked + .aa-rvform__pill {
	background: var(--aa-ink);
	border-color: var(--aa-ink);
	color: var(--aa-surface);
}

.aa-rvform__choice:focus-visible + .aa-rvform__pill {
	outline: 2px solid var(--aa-ink);
	outline-offset: 2px;
}

.aa-rvform__extras {
	display: grid;
	gap: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--aa-hairline);
	border-radius: var(--aa-radius);
	background: var(--aa-surface-soft);
}

.aa-rvform .form-submit { margin: 0; }

.aa-rvform__note {
	margin: 0;
	font-size: var(--aa-fs-sm);
	color: var(--aa-muted);
}

/* --------------------------------------------------------------- narrow */

@media (max-width: 699px) {
	.aa-rv__controls { align-items: stretch; }

	.aa-rv__form { width: 100%; }

	.aa-rv__control,
	.aa-rv__control--search { flex: 1 1 100%; }

	.aa-rv__write {
		margin-inline-start: 0;
		width: 100%;
	}

	.aa-rvitem__who {
		grid-template-columns: 40px minmax(0, 1fr);
		grid-template-areas:
			"avatar name"
			"avatar disc"
			"facts  facts";
		align-items: center;
		column-gap: .75rem;
	}

	.aa-rvitem__avatar { grid-area: avatar; }
	.aa-rvitem__name   { grid-area: name; }
	.aa-rvitem__disc   { grid-area: disc; }
	.aa-rvitem__facts  { grid-area: facts; }

	.aa-rvitem__actions { justify-content: flex-start; }
}

/* ------------------------------------------------- write a review, as a modal */

/* The form ships inline and this button ships hidden, so with JavaScript off
   the page keeps working. assets/js/review-modal.js swaps the two round. */
.aa-rv__opener { margin-block-start: 1.5rem; }

.aa-rv__formwrap.is-collapsed { display: none; }

.aa-rv__formwrap.is-open {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	align-content: start;
	justify-items: center;
	padding: 1.25rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: rgba(22, 18, 26, .55);
	-webkit-overflow-scrolling: touch;
}

.aa-rv__formwrap.is-open #review_form {
	position: relative;
	width: 100%;
	max-width: 40rem;
	margin-block: auto;
	padding: 1.75rem 1.25rem;
	border-radius: var(--aa-radius);
	background: var(--aa-surface);
	box-shadow: 0 20px 60px rgba(22, 18, 26, .32);
}

.aa-rv__close {
	position: absolute;
	inset-block-start: .35rem;
	inset-inline-end: .35rem;
	display: grid;
	place-items: center;
	width: 44px;               /* touch target */
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--aa-muted);
	cursor: pointer;
}

.aa-rv__close:hover,
.aa-rv__close:focus-visible { color: var(--aa-rose); }

@media (min-width: 700px) {
	.aa-rv__formwrap.is-open { padding: 2.5rem; }
	.aa-rv__formwrap.is-open #review_form { padding: 2rem; }
}