/* Mushi Reviews — front end. All rules scoped to .mrv- to avoid theme conflicts. */
.mrv-wrap{
	--mrv-ink:#212121;
	--mrv-slate:#708090;
	--mrv-muted:#8b929a;
	--mrv-line:#e6e8ea;
	--mrv-bg:#ffffff;
	--mrv-soft:#f5f6f7;
	--mrv-star:#f5a623;
	--mrv-star-off:#e2e4e7;
	--mrv-radius:14px;
	--mrv-shadow:0 1px 3px rgba(33,33,33,.05),0 6px 24px rgba(33,33,33,.05);
	font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	color:var(--mrv-ink);
	max-width:960px;
	margin:0 auto;
	line-height:1.6;
	box-sizing:border-box;
}
.mrv-wrap *,.mrv-modal *,.mrv-lightbox *{box-sizing:border-box}

.mrv-heading{
	font-weight:700;
	font-size:1.9rem;
	text-align:center;
	color:var(--mrv-ink);
	margin:0 0 1.5rem;
	letter-spacing:-.01em;
}

/* ---------- Stars ---------- */
.mrv-stars{display:inline-flex;gap:2px;vertical-align:middle}
.mrv-star{width:20px;height:20px;display:block}
.mrv-star--full path{fill:var(--mrv-star)}
.mrv-star--empty path{fill:var(--mrv-star-off)}
.mrv-star-on{stop-color:var(--mrv-star)}
.mrv-star-off{stop-color:var(--mrv-star-off)}
.mrv-stars--sm .mrv-star{width:15px;height:15px}

/* ---------- Top bar ---------- */
.mrv-topbar{
	display:grid;
	grid-template-columns:1fr auto 1fr;
	align-items:center;
	gap:1rem;
	padding:1.75rem;
	background:var(--mrv-soft);
	border:1px solid var(--mrv-line);
	border-radius:var(--mrv-radius);
	margin-bottom:1.75rem;
}
.mrv-topbar__count{display:flex;flex-direction:column;line-height:1.1}
.mrv-count-num{font-weight:700;font-size:2rem;color:var(--mrv-ink)}
.mrv-count-label{font-size:.85rem;color:var(--mrv-muted);text-transform:uppercase;letter-spacing:.06em}
.mrv-topbar__summary{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center}
.mrv-summary-text{font-size:1rem;color:var(--mrv-slate)}
.mrv-summary-text strong{font-weight:700;font-size:1.5rem;color:var(--mrv-ink)}
.mrv-summary-sep{margin:0 .35rem;color:var(--mrv-muted)}
.mrv-topbar__action{display:flex;justify-content:flex-end}
.mrv-topbar--empty{grid-template-columns:1fr auto}
.mrv-empty-note{color:var(--mrv-muted);margin:.25rem 0 0;font-size:.95rem}

/* ---------- Buttons ---------- */
.mrv-btn{
	font-family:inherit;font-size:.95rem;font-weight:500;
	padding:.7rem 1.5rem;border-radius:999px;border:1px solid transparent;
	cursor:pointer;transition:background .18s,color .18s,border-color .18s;
	line-height:1.2;white-space:nowrap;
}
.mrv-btn--primary{background:var(--mrv-ink);color:#fff}
.mrv-btn--primary:hover{background:#000}
.mrv-btn--ghost{background:transparent;color:var(--mrv-slate);border-color:var(--mrv-line)}
.mrv-btn--ghost:hover{border-color:var(--mrv-slate);color:var(--mrv-ink)}
.mrv-btn:disabled{opacity:.55;cursor:not-allowed}

/* ---------- Cards ---------- */
.mrv-cards{display:flex;flex-direction:column;gap:0}
.mrv-card{
	display:flex;gap:1.5rem;align-items:flex-start;
	padding:1.75rem 0;border-bottom:1px solid var(--mrv-line);
}
.mrv-card:first-child{padding-top:0}
.mrv-card__body{flex:1;min-width:0}
.mrv-card__meta{display:flex;align-items:center;gap:.65rem;margin:.65rem 0}
.mrv-avatar{
	width:38px;height:38px;border-radius:50%;flex-shrink:0;
	background:var(--mrv-slate);color:#fff;font-weight:600;font-size:1rem;
	display:flex;align-items:center;justify-content:center;
}
.mrv-card__name{display:block;font-weight:600;color:var(--mrv-ink);font-size:.95rem}
.mrv-card__date{display:block;font-size:.8rem;color:var(--mrv-muted)}
.mrv-card__text{margin:.5rem 0 .9rem;color:var(--mrv-ink);white-space:pre-line}
.mrv-see-more{
	display:inline-block;background:none;border:0;padding:0;margin:-.55rem 0 .9rem;
	font-family:inherit;font-size:.85rem;font-weight:600;color:var(--mrv-ink);cursor:pointer;
}
.mrv-see-more:hover{text-decoration:underline}
.mrv-card__product{
	background:var(--mrv-soft);border-radius:10px;padding:.6rem .9rem;
	font-size:.85rem;color:var(--mrv-muted);margin-bottom:.9rem;
}
.mrv-card__product a{color:var(--mrv-slate);text-decoration:underline;font-weight:500}
.mrv-card__product a:hover{color:var(--mrv-ink)}
.mrv-card__product span{margin-right:.35rem}
.mrv-card__share{display:flex;gap:.5rem}
.mrv-share{
	width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
	color:var(--mrv-muted);background:var(--mrv-soft);transition:background .18s,color .18s;
}
.mrv-share:hover{background:var(--mrv-ink);color:#fff}
.mrv-card__image{
	flex-shrink:0;width:150px;height:180px;padding:0;border:0;cursor:pointer;
	border-radius:12px;overflow:hidden;background:var(--mrv-soft);
}
.mrv-card__image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.mrv-card__image:hover img{transform:scale(1.04)}

/* ---------- Grid layout (premium cards) ---------- */
.mrv-wrap--grid{max-width:1180px}
.mrv-wrap--grid .mrv-cards{
	display:grid;
	grid-template-columns:1fr;
	gap:1.75rem;
	align-items:stretch;
}
@media(min-width:700px){
	.mrv-wrap--grid .mrv-cards{grid-template-columns:repeat(2,1fr)}
}
.mrv-wrap--grid .mrv-card{
	position:relative;
	flex-direction:column;
	align-items:stretch;
	gap:0;
	padding:0;
	border:1px solid var(--mrv-line);
	border-radius:var(--mrv-radius);
	background:var(--mrv-bg);
	box-shadow:var(--mrv-shadow);
	overflow:hidden;
	transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease,border-color .28s ease;
}
.mrv-wrap--grid .mrv-card::before{
	content:"";position:absolute;top:0;left:0;right:0;height:3px;
	background:linear-gradient(90deg,var(--mrv-ink),var(--mrv-slate));
	opacity:0;transition:opacity .28s ease;
}
.mrv-wrap--grid .mrv-card:hover{
	transform:translateY(-5px);
	border-color:transparent;
	box-shadow:0 12px 28px rgba(33,33,33,.10),0 24px 48px rgba(33,33,33,.08);
}
.mrv-wrap--grid .mrv-card:hover::before{opacity:1}
.mrv-wrap--grid .mrv-card__body{
	flex:1;display:flex;flex-direction:column;
	padding:1.6rem 1.6rem 1.4rem;
}
/* Line-clamp the review text; JS reveals "See more" only when it actually overflows */
.mrv-wrap--grid .mrv-card__text{
	display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
/* Photo sits framed *inside* the card, never edge-to-edge — the whole photo
   stays visible (object-fit:contain) instead of being harshly cropped. */
.mrv-wrap--grid .mrv-card__image{
	width:100%;height:210px;max-height:none;flex-shrink:0;
	border-radius:12px;border:1px solid var(--mrv-line);background:var(--mrv-soft);
	margin:.2rem 0 1rem;
}
.mrv-wrap--grid .mrv-card__image img{object-fit:contain}
.mrv-wrap--grid .mrv-card__product{margin-top:auto}
.mrv-wrap--grid .mrv-avatar{
	box-shadow:0 0 0 3px var(--mrv-bg),0 0 0 4px var(--mrv-line);
}

/* ---------- Pagination ---------- */
.mrv-pagination{
	display:flex;justify-content:center;align-items:center;gap:.4rem;
	margin-top:2rem;flex-wrap:wrap;
}
.mrv-page{
	min-width:42px;height:42px;padding:0 .55rem;border-radius:50%;border:1px solid transparent;
	background:transparent;color:var(--mrv-slate);font-family:inherit;font-size:.95rem;font-weight:500;
	display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
	transition:background .18s,color .18s,border-color .18s;
}
.mrv-page:hover:not(:disabled){background:var(--mrv-soft);color:var(--mrv-ink)}
.mrv-page.is-current{background:var(--mrv-ink);color:#fff;font-weight:600}
.mrv-page:disabled{opacity:.35;cursor:not-allowed}
.mrv-page-dots{color:var(--mrv-muted);padding:0 .3rem;letter-spacing:.05em}

/* Prev / Next — labelled pills with clear chevrons */
.mrv-page--prev,.mrv-page--next{
	width:auto;border-radius:999px;padding:0 1.1rem;gap:.45rem;
	border:1px solid var(--mrv-line);color:var(--mrv-ink);font-weight:500;
}
.mrv-page--prev{margin-right:.35rem}
.mrv-page--next{margin-left:.35rem}
.mrv-page--prev:hover:not(:disabled),
.mrv-page--next:hover:not(:disabled){
	background:var(--mrv-ink);color:#fff;border-color:var(--mrv-ink);
}
.mrv-page__ico{width:18px;height:18px;flex-shrink:0;display:block}
.mrv-page__label{line-height:1}

/* ---------- Modal ---------- */
.mrv-modal,.mrv-lightbox{
	position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:1rem;
}
.mrv-modal[hidden],.mrv-lightbox[hidden]{display:none}
.mrv-modal__overlay,.mrv-lightbox__overlay{position:absolute;inset:0;background:rgba(33,33,33,.55);backdrop-filter:blur(2px)}
.mrv-modal__panel{
	position:relative;background:var(--mrv-bg);border-radius:18px;
	width:100%;max-width:520px;max-height:90vh;overflow-y:auto;
	padding:2.25rem;box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.mrv-modal__close{
	position:absolute;top:1rem;right:1.1rem;background:none;border:0;font-size:1.7rem;line-height:1;
	color:var(--mrv-muted);cursor:pointer;padding:.2rem;
}
.mrv-modal__close:hover{color:var(--mrv-ink)}
.mrv-modal__title{
	font-weight:700;font-size:1.6rem;
	color:var(--mrv-ink);margin:0 0 1.1rem;text-align:center;
}
.mrv-steps{display:flex;justify-content:center;gap:.5rem;margin-bottom:1.5rem}
.mrv-step-dot{width:9px;height:9px;border-radius:50%;background:var(--mrv-line);transition:background .2s,width .2s}
.mrv-step-dot.is-active{background:var(--mrv-ink);width:26px;border-radius:999px}

/* ---------- Form ---------- */
.mrv-fs{border:0;margin:0;padding:0;display:none}
.mrv-fs.is-active{display:block;animation:mrv-fade .25s ease}
@keyframes mrv-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mrv-field{margin-bottom:1.15rem}
.mrv-field label{display:block;font-weight:500;font-size:.9rem;margin-bottom:.4rem;color:var(--mrv-slate)}
.mrv-req{color:var(--mrv-slate)}
.mrv-opt{color:var(--mrv-muted);font-weight:400}
.mrv-field input[type=text],
.mrv-field input[type=email],
.mrv-field input[type=url],
.mrv-field textarea,
.mrv-field input[type=file]{
	width:100%;font-family:inherit;font-size:.95rem;color:var(--mrv-ink);
	padding:.7rem .85rem;border:1px solid var(--mrv-line);border-radius:10px;background:#fff;
	transition:border-color .18s,box-shadow .18s;
}
.mrv-field input:focus,.mrv-field textarea:focus{
	outline:0;border-color:var(--mrv-slate);box-shadow:0 0 0 3px rgba(112,128,144,.22);
}
.mrv-field textarea{resize:vertical;min-height:110px}
.mrv-field.mrv-invalid input,.mrv-field.mrv-invalid textarea{border-color:#d64545}
.mrv-hint{display:block;font-size:.78rem;color:var(--mrv-muted);margin-top:.35rem}
.mrv-error{display:block;font-size:.8rem;color:#d64545;margin-top:.35rem;min-height:1em}

.mrv-rating-input{display:flex;gap:.25rem}
.mrv-rate-star{background:none;border:0;padding:.1rem;cursor:pointer;line-height:0}
.mrv-rate-star .mrv-star{width:34px;height:34px}
.mrv-rate-star .mrv-star path{fill:var(--mrv-star-off);transition:fill .12s}
.mrv-rate-star.is-on .mrv-star path,
.mrv-rating-input.is-hovering .mrv-rate-star.is-hover .mrv-star path{fill:var(--mrv-star)}

.mrv-form__nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.5rem}
.mrv-form__notice{
	background:#fdecea;color:#b3261e;border-radius:10px;padding:.7rem .9rem;font-size:.88rem;margin-bottom:1rem;
}
.mrv-form__success{text-align:center;padding:1.5rem 0}
.mrv-success-check{
	width:64px;height:64px;border-radius:50%;background:var(--mrv-ink);color:#fff;
	font-size:2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;
}
.mrv-success-title{
	font-weight:700;font-size:1.5rem;
	color:var(--mrv-ink);margin:0 0 .6rem;
}
.mrv-success-msg{color:var(--mrv-slate);margin:0 auto 1.5rem;max-width:340px}

/* Honeypot */
.mrv-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- Lightbox ---------- */
.mrv-lightbox__inner{
	position:relative;display:flex;background:#fff;border-radius:16px;overflow:hidden;
	width:100%;max-width:900px;max-height:88vh;box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.mrv-lightbox__close{
	position:absolute;top:.75rem;right:.9rem;z-index:2;background:rgba(255,255,255,.9);border:0;
	width:34px;height:34px;border-radius:50%;font-size:1.4rem;line-height:1;color:var(--mrv-ink);cursor:pointer;
}
.mrv-lightbox__media{flex:1 1 52%;background:var(--mrv-soft);display:flex;align-items:center;justify-content:center;min-height:300px}
.mrv-lightbox__media img{max-width:100%;max-height:88vh;object-fit:contain;display:block}
.mrv-lightbox__content{flex:1 1 48%;padding:2rem;overflow-y:auto}

/* "See more" (no photo) — full-width text panel, no image pane */
.mrv-lightbox--textonly .mrv-lightbox__inner{max-width:600px}
.mrv-lightbox--textonly .mrv-lightbox__media{display:none}
.mrv-lightbox--textonly .mrv-lightbox__content{flex:1 1 100%;padding:2.5rem}
.mrv-lb-head{display:flex;align-items:center;gap:.6rem;margin:.7rem 0}
.mrv-lb-name{display:block;font-weight:600;font-size:.95rem}
.mrv-lb-date{display:block;font-size:.8rem;color:var(--mrv-muted)}
.mrv-lb-review{color:var(--mrv-ink);margin:.5rem 0 1rem;white-space:pre-line}
.mrv-lb-product{background:var(--mrv-soft);border-radius:10px;padding:.6rem .9rem;font-size:.85rem;color:var(--mrv-muted)}
.mrv-lb-product a{color:var(--mrv-slate);text-decoration:underline}

/* ---------- Responsive ---------- */
@media(max-width:680px){
	.mrv-topbar{grid-template-columns:1fr;text-align:center;gap:1.1rem}
	.mrv-topbar__count{align-items:center}
	.mrv-topbar__action{justify-content:center}

	/* Card: text first, full-width photo below (uncropped, natural ratio) */
	.mrv-wrap:not(.mrv-wrap--grid) .mrv-card{flex-direction:column;gap:1rem}
	.mrv-wrap:not(.mrv-wrap--grid) .mrv-card__image{width:100%;height:auto;max-height:none;border-radius:12px}
	.mrv-wrap:not(.mrv-wrap--grid) .mrv-card__image img{height:auto;object-fit:contain}

	/* Grid layout: single boxed column, framed photo scales down a little */
	.mrv-wrap--grid .mrv-cards{grid-template-columns:1fr;gap:1.25rem}
	.mrv-wrap--grid .mrv-card__image{height:180px}
	.mrv-wrap--grid .mrv-card__body{padding:1.35rem 1.35rem 1.2rem}

	.mrv-modal__panel{padding:1.5rem}

	/* Lightbox: image on top (contained, no overlap), review scrolls below */
	.mrv-lightbox{padding:0}
	.mrv-lightbox__inner{flex-direction:column;max-width:100%;width:100%;height:100%;max-height:100%;border-radius:0}
	.mrv-lightbox__media{flex:0 0 auto;min-height:0;height:auto;max-height:46vh;padding:1rem}
	.mrv-lightbox__media img{max-height:44vh;width:auto;border-radius:10px}
	.mrv-lightbox__content{flex:1 1 auto;min-height:0;padding:1.25rem 1.25rem 2rem}
	.mrv-lightbox__close{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
}

/* Pagination on small screens: keep labelled prev/next but let it wrap tightly */
@media(max-width:520px){
	.mrv-page__label{display:none}
	.mrv-page--prev,.mrv-page--next{width:42px;padding:0;border-radius:50%}
	.mrv-page--prev{margin-right:.2rem}
	.mrv-page--next{margin-left:.2rem}
}