/* ==========================================================================
   ARFA KHUSHBOO — 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 */

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

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

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

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

.ak-rvsum {
	display: grid;
	gap: 1.75rem;
	padding: 1.5rem;
	margin-bottom: 1.75rem;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius-lg);
	background: var(--ak-cream);
}

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

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

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

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

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

/* histogram */

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

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

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

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

.ak-rvsum__bar {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--ak-cream-deep);
	overflow: hidden;
}

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

/* recommend rate */

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

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

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

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

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

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

.ak-rv-star {
	width: 15px;
	height: 15px;
	flex: none;
	fill: var(--ak-line);
}

.ak-rv-star.is-on { fill: var(--ak-black); }

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

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

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

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

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

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

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

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

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

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

.ak-rv__go { flex: none; }

/* filter pills */

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

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

.ak-rv__pill:hover { border-color: var(--ak-black); }

.ak-rv__pill.is-on {
	background: var(--ak-black);
	border-color: var(--ak-black);
	color: var(--ak-white);
}

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

.ak-rv__pill.is-on .ak-rv__pillnum { color: var(--ak-line); }

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

/* result line */

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

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

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

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

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

.ak-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. */
.ak-rv__list.is-collapsed .ak-rvitem.is-folded { display: none; }

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

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

/* reviewer column */

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

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

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

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

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

.ak-rvitem__tickmark {
	fill: none;
	stroke: var(--ak-white);
	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. */
.ak-rvitem__disc { margin: 0; }

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

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

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

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

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

/* review column */

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

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

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

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

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

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

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

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

/* actions */

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

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

.ak-rvitem__vote,
.ak-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(--ak-radius);
	background: none;
	color: var(--ak-muted);
	font-family: var(--ak-sans);
	font-size: var(--ak-fs-sm);
	text-decoration: none;
	cursor: pointer;
	transition: color .18s var(--ak-ease), border-color .18s var(--ak-ease);
}

.ak-rvitem__vote:hover,
.ak-rvitem__share:hover,
.ak-rvitem__vote:focus-visible,
.ak-rvitem__share:focus-visible {
	color: var(--ak-black);
	border-color: var(--ak-line);
}

.ak-rvitem__vote.is-on {
	color: var(--ak-black);
	border-color: var(--ak-black);
}

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

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

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

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

/* photos */

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

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

.ak-rvitem__photo {
	position: relative;
	display: block;
	width: 72px;
	height: 72px;
	flex: none;
	overflow: hidden;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
	background: var(--ak-cream);
}

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

.ak-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(--ak-black);
	color: var(--ak-white);
	font-size: var(--ak-fs-sm);
	font-weight: 700;
	opacity: .82;
}

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

.ak-rv__first {
	display: grid;
	justify-items: start;
	gap: 1rem;
	padding: 1.75rem;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius-lg);
	background: var(--ak-cream);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ak-rvform__file {
	min-height: 44px;
	padding: .5rem 0;
	font-size: var(--ak-fs-sm);
	color: var(--ak-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 */

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

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

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

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

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

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

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

/* yes / no pills */

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

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

.ak-rvform__choice:checked + .ak-rvform__pill {
	background: var(--ak-black);
	border-color: var(--ak-black);
	color: var(--ak-white);
}

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

.ak-rvform__extras {
	display: grid;
	gap: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--ak-line);
	border-radius: var(--ak-radius);
	background: var(--ak-cream);
}

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

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

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

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

	.ak-rv__form { width: 100%; }

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

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

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

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

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