/**
 * Pooled review grid — Loox card design.
 *
 * Measured against randmvapes.net (Loox) rather than CusRev's defaults. The
 * card markup comes from this plugin's templates/reviews-grid.php override, so
 * these rules style our own classes (crp-*) and only need to neutralise a few
 * of CusRev's wrappers.
 *
 * Card anatomy, top to bottom:
 *   photo (flush, full width)
 *   name + verified tick
 *   date (dd/mm/yyyy)
 *   stars (small, gold)
 *   review text
 *   divider
 *   product chip (small thumbnail + plain dark link)
 */

.crp-grid-wrap {
	--crp-cols: 4;
	--crp-gap: 12px;
	--crp-radius: 4px;
	--crp-border: #e3e3e3;
	--crp-divider: #ececec;
	--crp-star: #f5a623;
	--crp-text: #1a1a1a;
	--crp-muted: #8c8c8c;
	--crp-font: 13px;
	--crp-star-size: 11px;
	margin: 26px auto 0;
	max-width: 1080px; /* Loox's own widget width, from the Shopify source */
}

/* ---- header ---- */
.crp-grid-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}
.crp-grid-head-left { align-items: center; display: flex; gap: 8px; }
.crp-grid-stars { color: var(--crp-star); font-size: 16px; letter-spacing: 1px; line-height: 1; }
.crp-grid-count { color: var(--crp-text); font-size: 14px; font-weight: 500; }
.crp-grid-head .crp-write {
	border: 1px solid var(--crp-border);
	border-radius: 4px;
	color: var(--crp-text);
	font-size: 13px;
	padding: 7px 14px;
	text-decoration: none;
}
.crp-grid-head .crp-write:hover { background: #fafafa; }

/* CusRev wraps the whole grid in a bordered, padded box via an inline
 * $section_style built from its color_brdr / color_ex_brdr attributes. Loox has
 * no such frame, and an inline style can only be beaten with !important. */
.crp-grid-wrap .cr-reviews-grid {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* ---- masonry ----
 *
 * Real columns, laid out by CusRev's Colcade. The previous build used CSS
 * multi-column (columns: 4) with display:contents on the column divs, which
 * looks identical but re-flows every card whenever new ones are appended --
 * that is what made the order jump on "show more". Colcade appends into the
 * shortest column instead, so cards already on screen never move. */
.crp-grid-wrap .cr-reviews-grid-inner {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: var(--crp-gap);
	/* Stop the browser re-anchoring the viewport when columns grow. */
	overflow-anchor: none;
}

/* Safety net: a card Colcade has not claimed yet must still be visible rather
 * than collapsing in the flex row. */
.crp-grid-wrap .cr-reviews-grid-inner > .cr-review-card {
	flex: 1 1 220px;
	max-width: 100%;
}
.crp-grid-wrap .cr-reviews-grid-col {
	display: flex !important;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--crp-gap);
	min-width: 0;
}
/* CusRev hides col2/col3 on narrow screens, but Colcade still assigns cards to
 * hidden columns, which loses them. The JS removes columns instead. */
.crp-grid-wrap .cr-reviews-grid-col.cr-reviews-grid-col-none { display: flex !important; }

/* ---- card ---- */
.crp-grid-wrap .crp-card {
	-webkit-column-break-inside: avoid;
	background: #fff;
	border: 1px solid var(--crp-border);
	border-radius: var(--crp-radius);
	box-shadow: none;
	break-inside: avoid;
	display: block;
	margin: 0;
	overflow: hidden;
	padding: 0;
	width: 100%;
}
.crp-grid-wrap .crp-card .cr-review-card-content { padding: 0; }

/* ---- photo: flush to the card edges, no radius, no padding ---- */
.crp-grid-wrap .crp-media { display: block; line-height: 0; margin: 0; position: relative; }
.crp-grid-wrap .crp-media .image-row-img,
.crp-grid-wrap .crp-media .image-row-vid {
	border-radius: 0;
	cursor: pointer;
	display: block;
	height: auto;
	margin: 0;
	width: 100%;
}
/* With width/height on the <img>, height:auto lets the browser derive the
 * aspect ratio and reserve the space before the file arrives -- no reflow, so
 * the page does not jump while scrolling after "show more". */
.crp-grid-wrap .crp-media .image-row-img[width][height] { aspect-ratio: attr(width) / attr(height); }
.crp-grid-wrap .crp-media .image-row-img-none,
.crp-grid-wrap .crp-media .image-row-vid-none { display: none; }
.crp-grid-wrap .cr-comment-videoicon {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
}

/* ---- body ---- */
.crp-grid-wrap .crp-card-body {
	font-size: var(--crp-font);
	line-height: 1.45;
	padding: 10px 11px 11px;
}

/* name + verified on one line, like Loox */
.crp-grid-wrap .crp-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.crp-grid-wrap .crp-name {
	color: var(--crp-text);
	font-size: var(--crp-font);
	font-weight: 700;
}
.crp-grid-wrap .crp-verified {
	align-items: center;
	color: var(--crp-muted);
	display: inline-flex;
	font-size: 12px;
	font-weight: 400;
	gap: 3px;
}
.crp-grid-wrap .crp-check { color: #1a1a1a; flex: none; }

.crp-grid-wrap .crp-date {
	color: var(--crp-muted);
	font-size: 11.5px;
	margin-top: 2px;
}

/* small gold stars, no "5/5" label.
 *
 * CusRev draws these as two stacked layers: .cr-rating-icon-base (five empty
 * outlines) with .cr-rating-icon-frnt (the filled ones) absolutely positioned
 * over it and clipped to a percentage width. Both layers must keep the same
 * height or the empty row shows through beneath the filled row.
 *
 * CusRev sizes them with a four-class selector
 * (.cr-reviews-grid .cr-review-card .crstar-rating-svg .cr-rating-icon-base,
 * height 25px), which outranks a three-class override -- hence !important
 * rather than a specificity arms race. */
.crp-grid-wrap .crp-stars {
	display: inline-block;
	line-height: 0;
	margin: 5px 0 6px;
	position: relative;
}
.crp-grid-wrap .crp-stars .cr-rating-icon-base,
.crp-grid-wrap .crp-stars .cr-rating-icon-frnt,
.crp-grid-wrap .cr-reviews-grid .cr-review-card .crstar-rating-svg .cr-rating-icon-base,
.crp-grid-wrap .cr-reviews-grid .cr-review-card .crstar-rating-svg .cr-rating-icon-frnt {
	column-gap: 0 !important;
	display: flex;
	height: var(--crp-star-size) !important;
}
.crp-grid-wrap .crp-stars .cr-rating-icon-frnt {
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
}
.crp-grid-wrap .crp-stars svg,
.crp-grid-wrap .crp-stars .cr-rating-icon-base svg,
.crp-grid-wrap .crp-stars .cr-rating-icon-frnt svg {
	height: var(--crp-star-size) !important;
	width: var(--crp-star-size) !important;
}

.crp-grid-wrap .crp-title {
	color: var(--crp-text);
	font-size: var(--crp-font);
	font-weight: 600;
	margin-bottom: 3px;
}

/* plain body copy — no grey box */
.crp-grid-wrap .crp-text {
	background: none;
	border: 0;
	color: var(--crp-text);
	font-size: var(--crp-font);
	margin: 0;
	padding: 0;
	white-space: pre-line;
	word-break: break-word;
}
.crp-grid-wrap .crp-text p { margin: 0 0 5px; }
.crp-grid-wrap .cr-grid-read-more a,
.crp-grid-wrap .cr-grid-read-less a { color: var(--crp-muted); text-decoration: none; }

/* ---- product chip: divider above, small thumb, plain dark text ---- */
.crp-grid-wrap .crp-product {
	align-items: center;
	background: none;
	border-top: 1px solid var(--crp-divider);
	display: flex;
	gap: 8px;
	margin-top: 9px;
	padding: 8px 0 0;
}
.crp-grid-wrap .crp-product .cr-product-thumbnail { flex: none; line-height: 0; margin: 0; }
.crp-grid-wrap .crp-product .cr-product-thumbnail img {
	border-radius: 3px;
	display: block;
	height: 34px;
	object-fit: cover;
	width: 34px;
}
.crp-grid-wrap .crp-product .product-title { line-height: 1.3; }
.crp-grid-wrap .crp-product .product-title a,
.crp-grid-wrap .crp-product .product-title span {
	color: var(--crp-text);
	font-size: 12px;
	text-decoration: none;
}
.crp-grid-wrap .crp-product .product-title a:hover { text-decoration: underline; }

/* ---- show more ---- */
.crp-grid-wrap .cr-show-more { margin-top: 14px; text-align: center; }
.crp-grid-wrap .cr-show-more-button {
	background: none;
	border: 1px solid var(--crp-border);
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	padding: 9px 20px;
}
.crp-grid-wrap .cr-show-more-button:hover { background: #fafafa; }

/* ---- things CusRev adds that Loox does not show ---- */
.crp-grid-wrap .review-thumbnail,
.crp-grid-wrap .cr-grid-reply-thumbnail,
.crp-grid-wrap .rating-label,
.crp-grid-wrap .reviewer-verified img + br { display: none !important; }

/* ---- responsive ---- */
@media (max-width: 1100px) { .crp-grid-wrap { --crp-cols: 3; } }
@media (max-width: 820px)  { .crp-grid-wrap { --crp-cols: 2; } }

/* ---- mobile ----
 *
 * No column faking here. The template renders two real columns for mobile user
 * agents, so Colcade lays them out and appends to the shortest column exactly
 * as it does on desktop: cards already on screen never move, and new ones land
 * at the bottom. An earlier build used columns:2 + display:contents, which
 * re-flowed every card on "show more" and showed them in column order rather
 * than review order. */
@media (max-width: 820px) {
	.crp-grid-wrap .cr-reviews-grid-inner { gap: 8px; }
	.crp-grid-wrap .cr-reviews-grid-col { flex: 1 1 0; min-width: 0; }
}

@media (max-width: 600px) {
	.crp-grid-wrap {
		--crp-font: 12px;
		--crp-star-size: 10px;
		margin-top: 18px;
	}
	.crp-grid-wrap .crp-card-body { padding: 8px 8px 9px; }
	.crp-grid-wrap .crp-head { gap: 4px; }
	.crp-grid-wrap .crp-name { font-size: 12px; }
	.crp-grid-wrap .crp-verified { font-size: 10.5px; }
	.crp-grid-wrap .crp-check { height: 11px; width: 11px; }
	.crp-grid-wrap .crp-date { font-size: 10.5px; }
	.crp-grid-wrap .crp-stars { margin: 4px 0 5px; }
	.crp-grid-wrap .crp-text { font-size: 12px; line-height: 1.4; }

	.crp-grid-wrap .crp-product { gap: 6px; margin-top: 7px; padding-top: 6px; }
	.crp-grid-wrap .crp-product .cr-product-thumbnail img { height: 28px; width: 28px; }
	.crp-grid-wrap .crp-product .product-title a,
	.crp-grid-wrap .crp-product .product-title span { font-size: 11px; }

	.crp-grid-head { gap: 8px; margin-bottom: 12px; }
	.crp-grid-stars { font-size: 14px; }
	.crp-grid-count { font-size: 13px; }
	.crp-sort-toggle { padding: 7px 9px; }
	.crp-sort-menu { padding: 13px 0 8px; }
	.crp-sort-title { font-size: 15px; padding: 0 16px 8px; }
	.crp-sort-opt { font-size: 13px; padding: 10px 16px; }

	.crp-grid-wrap .cr-show-more-button { font-size: 12.5px; padding: 8px 16px; }
}


/* ------------------------------------------------------------------
 * Popovers: summary breakdown and sort menu
 *
 * Opened by a hidden checkbox plus <label for>, not <details> and not
 * JavaScript. <details> never opened on this theme, which is why the sort
 * appeared broken for so long -- its options could not be reached. A checked
 * checkbox is pure CSS and nothing can intercept it.
 * ---------------------------------------------------------------- */

.crp-pop-wrap { position: relative; }

.crp-pop-check {
	height: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 0;
}

.crp-pop {
	background: #fff;
	border: 1px solid var(--crp-border);
	border-radius: 10px;
	box-shadow: 0 10px 34px rgba(0, 0, 0, .14);
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	z-index: 40;
}
.crp-pop-check:checked ~ .crp-pop { display: block; }

/* ---- summary ---- */
.crp-summary-toggle {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	gap: 8px;
	margin: 0;
	user-select: none;
}
.crp-pop-check:disabled ~ .crp-summary-toggle { cursor: default; }
.crp-summary-caret { color: var(--crp-text); transition: transform .15s; }
.crp-pop-check:checked ~ .crp-summary-toggle .crp-summary-caret { transform: rotate(180deg); }

.crp-summary-panel { left: 0; min-width: 340px; padding: 20px 24px 18px; }

.crp-summary-score {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-bottom: 16px;
}
.crp-summary-star { color: var(--crp-star); flex: none; }
.crp-summary-score span { color: var(--crp-text); font-size: 34px; font-weight: 700; line-height: 1; }

.crp-summary-row {
	align-items: center;
	border-radius: 6px;
	display: flex;
	gap: 12px;
	padding: 5px 6px;
	text-decoration: none;
}
a.crp-summary-row:hover { background: #f5f5f5; }
.crp-summary-row.is-active { background: #f0f0f0; }
.crp-summary-row.is-empty { opacity: .55; }
.crp-summary-stars { color: var(--crp-star); flex: none; font-size: 15px; letter-spacing: 1px; line-height: 1; }
.crp-summary-bar {
	background: #eee;
	border-radius: 999px;
	display: block;
	flex: 1 1 auto;
	height: 9px;
	min-width: 90px;
	overflow: hidden;
}
.crp-summary-bar > span { background: #8d8d8d; border-radius: 999px; display: block; height: 100%; }
.crp-summary-num { color: var(--crp-text); flex: none; font-size: 13px; min-width: 48px; text-align: right; }

.crp-summary-clear {
	border-top: 1px solid var(--crp-border);
	color: var(--crp-text);
	display: block;
	font-size: 13px;
	margin-top: 10px;
	padding-top: 10px;
	text-align: center;
	text-decoration: none;
}
.crp-summary-clear:hover { text-decoration: underline; }

/* ---- sort ---- */
.crp-sort { margin-left: auto; }
.crp-sort-toggle {
	align-items: center;
	background: #fff;
	border: 1px solid var(--crp-border);
	border-radius: 4px;
	color: var(--crp-text);
	cursor: pointer;
	display: inline-flex;
	gap: 7px;
	line-height: 1;
	margin: 0;
	padding: 9px 13px;
	user-select: none;
}
.crp-sort-toggle:hover { background: #f6f6f6; }
.crp-sort-current { font-size: 13px; white-space: nowrap; }

.crp-sort-menu { min-width: 265px; padding: 16px 0 10px; right: 0; }
.crp-sort-title { color: var(--crp-text); font-size: 16px; font-weight: 700; padding: 0 20px 10px; }
.crp-sort-opt {
	align-items: center;
	color: var(--crp-text);
	display: flex;
	font-size: 14px;
	gap: 10px;
	justify-content: space-between;
	padding: 11px 20px;
	text-decoration: none;
}
.crp-sort-opt:hover { background: #f6f6f6; }
.crp-sort-tick { flex: none; opacity: 0; }
.crp-sort-opt.is-active .crp-sort-tick { opacity: 1; }

@media (max-width: 600px) {
	.crp-summary-panel { min-width: 0; padding: 16px; width: calc(100vw - 40px); }
	.crp-summary-score span { font-size: 28px; }
	.crp-summary-stars { font-size: 13px; }
	.crp-summary-num { font-size: 12px; min-width: 42px; }
	.crp-sort-menu { min-width: 0; width: calc(100vw - 40px); }
	.crp-sort-current { display: none; }
}

/* Grid dims while a filter is applied; min-height is held in JS so the page
 * below it does not jump while the new cards arrive. */
.crp-grid-wrap.crp-loading { opacity: .5; pointer-events: none; transition: opacity .12s; }