/* ASASA product reviews
   Same restrained palette as the rest of the shop: ink #141414, warm greys,
   magenta only where it has to pull the eye, gold only for stars. */

/* the dialog is printed outside .rv-wrap, so both need the palette */
.rv-wrap,
.rv-modal {
	--rv-ink: #141414;
	--rv-mute: #8a817b;
	--rv-line: #ece4de;
	--rv-gold: #e8a33d;
	--rv-pink: #d60890;
}
.rv-wrap {
	max-width: 1100px;
	margin: 0 auto;
	color: var(--rv-ink);
	scroll-margin-top: 130px; /* the header floats over anchors */
}

/* The shop's global button rules are heavy-handed (blue fills, borders,
   shadows). Reset ours once, here, rather than fighting each property. */
.rv-wrap button,
.rv-modal button {
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	background-image: none !important;
	font-family: inherit;
}

/* ---- stars ---- */
.rv-stars {
	position: relative;
	display: inline-block;
	width: 92px;
	height: 16px;
	flex: none;
	background: currentColor;
	color: #e2dad3;
	-webkit-mask: repeat left center/18.4px 16px url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m10 1.6 2.5 5.4 5.9.7-4.4 4 1.2 5.8L10 14.6 4.8 17.5 6 11.7 1.6 7.7l5.9-.7z'/%3E%3C/svg%3E");
	mask: repeat left center/18.4px 16px url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m10 1.6 2.5 5.4 5.9.7-4.4 4 1.2 5.8L10 14.6 4.8 17.5 6 11.7 1.6 7.7l5.9-.7z'/%3E%3C/svg%3E");
}
.rv-stars-fill {
	position: absolute;
	inset: 0 auto 0 0;
	background: var(--rv-gold);
}
.rv-stars--lg { width: 138px; height: 24px; -webkit-mask-size: 27.6px 24px; mask-size: 27.6px 24px; }

/* ---- summary ---- */
.rv-head {
	display: grid;
	grid-template-columns: minmax(190px, .8fr) minmax(240px, 1.1fr) minmax(200px, .9fr);
	gap: 34px;
	align-items: center;
	padding: 30px 32px;
	border: 1px solid var(--rv-line);
	border-radius: 22px;
	background: linear-gradient(180deg, #fffdfc, #fbf7f4);
}
.rv-score { display: flex; flex-direction: column; gap: 8px; }
.rv-score-num { font-size: 46px; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.rv-score-count { font-size: 12.5px; color: var(--rv-mute); }

.rv-bars { display: flex; flex-direction: column; gap: 5px; }
.rv-bar {
	display: grid;
	grid-template-columns: 34px 1fr 34px;
	align-items: center;
	gap: 10px;
	padding: 2px 6px;
	border-radius: 8px;
	text-decoration: none !important;
	color: inherit !important;
	transition: background-color .18s ease;
}
a.rv-bar:hover { background: #f3ece7; }
a.rv-bar.is-on { background: #efe6e0; box-shadow: inset 0 0 0 1px #ddd0c6; }
.rv-bar.is-empty { opacity: .55; }
.rv-bar-label { display: flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--rv-mute); }
.rv-bar-label svg { width: 11px; height: 11px; fill: var(--rv-gold); }
.rv-bar-track { height: 7px; border-radius: 999px; background: #eee6e0; overflow: hidden; }
.rv-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--rv-gold); }
.rv-bar-n { font-size: 11.5px; color: var(--rv-mute); text-align: right; }

.rv-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
button.rv-open-form {
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	min-height: 48px;
	padding: 0 24px !important;
	border-radius: 999px !important;
	background: var(--rv-ink, #141414) !important;
	color: #fff !important;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
button.rv-open-form:hover { background: var(--rv-pink, #d60890) !important; transform: translateY(-1px); }
button.rv-open-form svg { width: 16px; height: 16px; }
.rv-cta-note { font-size: 12px; line-height: 1.5; color: var(--rv-mute); }

/* ---- toolbar ---- */
.rv-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 26px 0 4px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--rv-line);
}
.rv-filters { display: flex; gap: 8px; flex-wrap: wrap; }
a.rv-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border-radius: 999px;
	background: #f3ece7;
	font-size: 12px;
	font-weight: 600;
	color: var(--rv-ink) !important;
	text-decoration: none !important;
}
a.rv-chip span { color: var(--rv-mute); }
.rv-sort { display: flex; gap: 16px; }
a.rv-sort-link {
	font-size: 12px;
	font-weight: 600;
	color: var(--rv-mute) !important;
	text-decoration: none !important;
	padding-bottom: 2px;
	border-bottom: 1.5px solid transparent;
}
a.rv-sort-link.is-on { color: var(--rv-ink) !important; border-bottom-color: var(--rv-ink); }

/* ---- list ---- */
ol.rv-list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
ol.rv-list li.rv-item {
	margin: 0 !important;
	padding: 24px 2px;
	border-bottom: 1px solid var(--rv-line);
	list-style: none !important;
}
.rv-item-head { display: flex; align-items: center; gap: 12px; }
.rv-avatar {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background: #f0e7e1;
	font-size: 15px;
	font-weight: 700;
	color: #7d726a;
}
.rv-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rv-author { font-size: 14px; font-weight: 700; }
.rv-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--rv-mute); }
.rv-flag { font-size: 13px; line-height: 1; }

.rv-title { margin: 14px 0 6px !important; font-size: 15px; font-weight: 700; }
.rv-body { font-size: 14px; line-height: 1.72; color: #403934; }
.rv-body p { margin: 0 0 8px !important; }
.rv-body p:last-child { margin-bottom: 0 !important; }

.rv-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
a.rv-photo {
	display: block;
	width: 78px;
	height: 78px;
	border-radius: 12px;
	overflow: hidden;
	background: #f3ece7;
	transition: transform .2s ease;
}
a.rv-photo:hover { transform: scale(1.04); }
a.rv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- pager ---- */
.rv-pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
a.rv-page {
	min-width: 38px;
	padding: 9px 13px;
	border-radius: 10px;
	background: #f6f1ed;
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
	color: var(--rv-ink) !important;
	text-decoration: none !important;
}
a.rv-page:hover { background: #ece2db; }
a.rv-page.is-on { background: var(--rv-ink); color: #fff !important; }

/* ---------------------------------------------------------------------------
 * Write-a-review dialog
 * ------------------------------------------------------------------------- */
body.rv-modal-open { overflow: hidden; }
.rv-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility 0s linear .25s;
}
.rv-modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.rv-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 12, 18, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.rv-modal-card {
	position: relative;
	width: min(560px, 100%);
	max-height: min(88vh, 900px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 26px 30px 30px;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 40px 90px -30px rgba(20, 4, 14, .5);
	transform: translateY(14px) scale(.985);
	transition: transform .28s cubic-bezier(.3, 1, .4, 1);
}
.rv-modal.is-open .rv-modal-card { transform: none; }

.rv-modal-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.rv-modal-top h3 { margin: 0 !important; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
button.rv-modal-close {
	display: grid !important;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: none;
	padding: 0 !important;
	border-radius: 50% !important;
	background: #f4efeb !important;
	color: #4a433e !important;
	cursor: pointer;
	transition: background-color .18s ease;
}
button.rv-modal-close:hover { background: #e8dfd8 !important; }
button.rv-modal-close svg { width: 16px; height: 16px; }

.rv-field { display: block; margin-bottom: 16px; }
.rv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rv-label {
	display: block;
	margin-bottom: 7px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rv-mute, #8a817b);
}
.rv-label b { color: #d60890; }
.rv-form input[type="text"],
.rv-form input[type="email"],
.rv-form textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1.5px solid #e5ddd6;
	border-radius: 14px;
	background: #fff;
	font-size: 14px;
	font-family: inherit;
	color: #141414;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.rv-form input:focus,
.rv-form textarea:focus {
	outline: none;
	border-color: #d60890;
	box-shadow: 0 0 0 3px rgba(214, 8, 144, .1);
}
.rv-form textarea { resize: vertical; min-height: 118px; line-height: 1.6; }
.rv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* star picker */
.rv-pick { display: flex; gap: 4px; }
button.rv-pick-star {
	width: 36px;
	height: 36px;
	min-height: 0 !important;
	padding: 0 !important;
	background: none !important;
	cursor: pointer;
	line-height: 0;
}
button.rv-pick-star svg { width: 30px; height: 30px; fill: #e2dad3; transition: fill .12s ease, transform .12s ease; }
button.rv-pick-star.is-on svg { fill: var(--rv-gold, #e8a33d); }
button.rv-pick-star:hover svg { transform: scale(1.12); }
button.rv-pick-star:focus-visible { outline: 2px solid #d60890; outline-offset: 2px; border-radius: 6px; }

/* photo picker */
.rv-drop {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 18px;
	border: 1.5px dashed #ddd3ca;
	border-radius: 16px;
	background: #fbf8f6;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}
.rv-drop:hover { border-color: #c9beb4; background: #f7f2ee; }
.rv-drop input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }
.rv-drop svg { width: 26px; height: 26px; flex: none; color: #a89d94; }
.rv-drop-text { display: flex; flex-direction: column; gap: 3px; }
.rv-drop-text b { font-size: 13.5px; font-weight: 700; }
.rv-drop-text em { font-style: normal; font-size: 11.5px; color: var(--rv-mute, #8a817b); }

.rv-previews { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.rv-preview { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: #f3ece7; }
.rv-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
button.rv-preview-x {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 21px;
	height: 21px;
	min-height: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: rgba(20, 20, 20, .74) !important;
	color: #fff !important;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.rv-consent { margin: 4px 0 14px !important; font-size: 11.5px; line-height: 1.6; color: var(--rv-mute, #8a817b); }
.rv-consent a { color: #d60890 !important; text-decoration: underline; }

.rv-form-msg { min-height: 0; font-size: 13px; }
.rv-form-msg.is-error {
	margin-bottom: 12px;
	padding: 10px 14px;
	border-radius: 12px;
	background: #fdeef6;
	color: #a5066f;
}

button.rv-submit {
	position: relative;
	width: 100%;
	min-height: 52px;
	padding: 0 !important;
	border-radius: 999px !important;
	background: var(--rv-ink, #141414) !important;
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s ease;
}
button.rv-submit:hover { background: #d60890 !important; }
.rv-spinner { display: none; }
.rv-form.is-busy button.rv-submit { pointer-events: none; opacity: .75; }
.rv-form.is-busy .rv-submit-text { visibility: hidden; }
.rv-form.is-busy .rv-spinner {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 19px;
	height: 19px;
	margin: -9.5px 0 0 -9.5px;
	border: 2.2px solid rgba(255, 255, 255, .3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: rv-spin .7s linear infinite;
}
@keyframes rv-spin { to { transform: rotate(360deg); } }

.rv-thanks { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px 10px; text-align: center; }
.rv-thanks svg { width: 54px; height: 54px; color: #23a06a; }
.rv-thanks p { margin: 0 !important; font-size: 15px; line-height: 1.6; }
button.rv-thanks-btn {
	min-height: 46px;
	padding: 0 34px !important;
	border-radius: 999px !important;
	background: #141414 !important;
	color: #fff !important;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ---- narrow screens ---- */
@media (max-width: 900px) {
	.rv-head { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px; }
	.rv-cta { align-items: stretch; }
	button.rv-open-form { justify-content: center; }
}
@media (max-width: 560px) {
	.rv-row { grid-template-columns: 1fr; }
	.rv-modal { padding: 0; place-items: end stretch; }
	.rv-modal-card {
		width: 100%;
		max-height: 92vh;
		border-radius: 24px 24px 0 0;
		padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
		transform: translateY(100%);
	}
	.rv-modal.is-open .rv-modal-card { transform: none; }
	.rv-score-num { font-size: 38px; }
}