/* Citavelle Reviews (mm-reviews, port of Viresta Reviews 1.1.2) — storefront styles.
   Features and layout order are Viresta's; the look is missmerylin.in's design system (docs/DESIGN-MM.md):
   ink on white, sand panels, hairlines, square corners (true circles only for avatars and play buttons),
   Inter, 4-px spacing scale, 3D buttons that press on tap, black = selected. Stars are ink; the big summary
   stars are deep rose. Every token falls back to a literal so the hosted review page (no theme CSS) looks the same. */

:root {
	--mmr-ink: var(--mm-ink, #111);
	--mmr-ink-2: var(--mm-ink-2, #5f5f5f);
	--mmr-muted: var(--mm-ink-2, #5f5f5f);
	--mmr-line: var(--mm-hair, #e4e0da);
	--mmr-paper: var(--mm-sand, #f4f1ec);
	--mmr-card: #fff;
	--mmr-rose: var(--mm-rose, #a62b43);
	--mmr-accent: var(--mmr-ink);
	--mmr-star-color: var(--mmr-ink);
	--mmr-star-off: #d9d4cb;
	--mmr-font: var(--mm-font, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	--mmr-ease: var(--mm-ease-out, cubic-bezier(.2, .8, .2, 1));
	--mmr-press: var(--mm-press, 120ms);
	--mmr-depth: var(--mm-btn-depth, 0 3px 0 0 rgb(0 0 0 / .3), 0 8px 18px -10px rgb(0 0 0 / .45));
	--mmr-depth-press: var(--mm-btn-depth-press, 0 1px 0 0 rgb(0 0 0 / .3), 0 3px 8px -6px rgb(0 0 0 / .4));
	--mmr-control: var(--mm-control-h, 52px);
	--mmr-s1: 4px; --mmr-s2: 8px; --mmr-s3: 12px; --mmr-s4: 16px; --mmr-s5: 24px; --mmr-s6: 32px; --mmr-s7: 48px;
	--mmr-t-label: var(--mm-t-label, 11px);
	--mmr-t-small: var(--mm-t-small, 12px);
	--mmr-t-meta: var(--mm-t-meta, 13px);
	--mmr-t-ui: var(--mm-t-ui, 14px);
	--mmr-t-body: var(--mm-t-body, 15px);
	--mmr-t-sec: var(--mm-t-sec, 22px);
	--mmr-track: var(--mm-track, .1em);
}

.mmr-widget, .mmr-carousel, .mmr-modal, .mmr-lightbox, .mmr-drawer, .mmr-page, .mmr-badge, .mmr-float { font-family: var(--mmr-font); color: var(--mmr-ink); }
.mmr-widget *, .mmr-carousel *, .mmr-modal *, .mmr-lightbox *, .mmr-drawer *, .mmr-page * { box-sizing: border-box; }
.mmr-widget :focus-visible, .mmr-carousel :focus-visible, .mmr-modal :focus-visible, .mmr-lightbox :focus-visible { outline: 2px solid var(--mmr-ink); outline-offset: 2px; }
.mmr-lightbox .mmr-lb-media :focus-visible { outline-color: #fff; }

/* small uppercase label, used for section labels across the widget */
.mmr-strip-head, .mmr-fit-title, .mmr-f .mmr-f-label, .mmr-lb-count, .mmr-card-reply strong { font-size: var(--mmr-t-label); font-weight: 500; letter-spacing: var(--mmr-track); text-transform: uppercase; }

/* ---------------------------------------------------------------- stars */
.mmr-stars { display: inline-flex; gap: calc(var(--mmr-star) * .14); vertical-align: middle; line-height: 1; }
.mmr-star {
	width: var(--mmr-star); height: var(--mmr-star); display: inline-block; flex: none;
	background: linear-gradient(90deg, var(--mmr-star-color) var(--mmr-fill), var(--mmr-star-off) var(--mmr-fill));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.09 6.26 6.91 1-5 4.87 1.18 6.88L12 17.56l-6.18 3.25L7 13.93 2 9.06l6.91-1z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.09 6.26 6.91 1-5 4.87 1.18 6.88L12 17.56l-6.18 3.25L7 13.93 2 9.06l6.91-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------- badge */
.mmr-badge { display: inline-flex; align-items: center; gap: var(--mmr-s2); min-height: 24px; text-decoration: none !important; color: var(--mmr-ink) !important; font-size: var(--mmr-t-meta); line-height: 1; }
.mmr-badge--single { margin: 0 0 var(--mmr-s3); }
.mmr-badge--single .mmr-badge-avg { font-weight: 600; font-variant-numeric: tabular-nums; }
.mmr-badge--single .mmr-badge-count { color: var(--mmr-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mmr-line); }
.mmr-badge--single:hover .mmr-badge-count { text-decoration-color: currentColor; }
.mmr-badge--loop { gap: var(--mmr-s1); font-size: var(--mmr-t-small); margin: var(--mmr-s1) 0; min-height: 0; }
.mmr-badge--loop .mmr-badge-count { color: var(--mmr-muted); }
.mmr-trust { display: inline-flex; align-items: center; gap: 6px; }

/* --------------------------------------------------------------- widget */
.mmr-section-wrap { clear: both; padding: 0; }
.mmr-widget { margin: var(--mmr-s7) 0; font-size: var(--mmr-t-body); line-height: 1.5; container-type: inline-size; container-name: mmr; }
.mmr-title { margin: 0 0 var(--mmr-s4); font-family: var(--mmr-font); font-size: var(--mmr-t-sec); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--mmr-ink); }

/* summary panel: average | breakdown | fit | write */
.mmr-head { display: grid; grid-template-columns: 1fr; gap: var(--mmr-s5); align-items: start; padding: var(--mmr-s5) var(--mmr-s4); background: var(--mmr-paper); }
.mmr-score { display: flex; align-items: center; gap: var(--mmr-s4); }
.mmr-score-num { font-size: 56px; line-height: .9; font-weight: 300; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mmr-score-meta { display: grid; gap: var(--mmr-s2); }
.mmr-score .mmr-star { --mmr-star-color: var(--mmr-rose); }
.mmr-score-count { font-size: var(--mmr-t-meta); color: var(--mmr-muted); }
.mmr-empty-note { margin: 0; max-width: 34ch; font-size: var(--mmr-t-body); color: var(--mmr-muted); }

.mmr-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mmr-dist-row { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; min-height: 32px; display: grid; grid-template-columns: 30px 1fr 32px; align-items: center; gap: var(--mmr-s3); padding: 0 var(--mmr-s1); font-size: var(--mmr-t-small); color: var(--mmr-ink); font-variant-numeric: tabular-nums; transition: background-color 160ms ease; }
.mmr-dist-row:hover:not([disabled]) { background: rgb(17 17 17 / .05); }
.mmr-dist-row.is-on { background: var(--mmr-card); box-shadow: inset 0 0 0 1px var(--mmr-ink); }
.mmr-dist-row[disabled] { cursor: default; color: var(--mmr-muted); }
.mmr-dist-row:focus-visible { outline: 2px solid var(--mmr-ink); outline-offset: 0; }
.mmr-dist-label { display: inline-flex; align-items: center; gap: 3px; }
.mmr-dist-bar { height: 4px; background: rgb(17 17 17 / .1); overflow: hidden; }
.mmr-dist-bar > span { display: block; height: 100%; background: var(--mmr-ink); transform-origin: left; animation: mmr-grow .8s var(--mmr-ease) both; }
.mmr-dist li:nth-child(2) .mmr-dist-bar > span { animation-delay: .05s; }
.mmr-dist li:nth-child(3) .mmr-dist-bar > span { animation-delay: .1s; }
.mmr-dist li:nth-child(4) .mmr-dist-bar > span { animation-delay: .15s; }
.mmr-dist li:nth-child(5) .mmr-dist-bar > span { animation-delay: .2s; }
.mmr-dist-n { text-align: right; color: var(--mmr-muted); }
@keyframes mmr-grow { from { transform: scaleX(0); } }

.mmr-fit-title { display: flex; justify-content: space-between; gap: var(--mmr-s3); margin: 0 0 var(--mmr-s3); color: var(--mmr-muted); }
.mmr-fit-title span { color: var(--mmr-ink); font-weight: 600; }
.mmr-fit-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; height: 6px; }
.mmr-fit-seg { background: rgb(17 17 17 / .12); }
.mmr-fit-seg.is-on { background: var(--mmr-ink); }
.mmr-fit-dot { position: absolute; top: 50%; width: 2px; height: 16px; margin: -8px 0 0 -1px; background: var(--mmr-ink); box-shadow: 0 0 0 2px var(--mmr-paper); }
.mmr-fit-scale { display: flex; justify-content: space-between; margin-top: var(--mmr-s2); font-size: var(--mmr-t-small); color: var(--mmr-muted); }

.mmr-head-actions .mmr-btn { width: 100%; }
@container mmr (min-width: 620px) {
	.mmr-head { grid-template-columns: 1fr 1fr; gap: var(--mmr-s5) var(--mmr-s6); padding: var(--mmr-s6); }
	.mmr-head-main { grid-column: 1; }
	.mmr-head-actions { align-self: end; }
	.mmr-head-actions .mmr-btn { width: auto; min-width: 220px; }
}
@container mmr (min-width: 1040px) {
	.mmr-head { grid-template-columns: minmax(220px, 1fr) minmax(240px, 1.1fr) minmax(220px, 1fr) auto; gap: var(--mmr-s6) var(--mmr-s7); align-items: center; }
	.mmr-head-actions { align-self: center; justify-self: end; }
}

/* photo strip */
.mmr-strip { margin: var(--mmr-s5) 0 0; }
.mmr-strip-head { display: flex; align-items: baseline; gap: var(--mmr-s2); margin: 0 0 var(--mmr-s3); color: var(--mmr-ink); }
.mmr-strip-n { color: var(--mmr-muted); }
.mmr-strip-track { display: flex; gap: var(--mmr-s2); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; }
.mmr-strip-track::-webkit-scrollbar { display: none; }
.mmr-strip-tile { position: relative; flex: 0 0 88px; width: 88px; height: 88px; padding: 0; border: 0; background: var(--mmr-paper); cursor: pointer; overflow: hidden; scroll-snap-align: start; }
.mmr-strip-tile img, .mmr-strip-tile video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--mmr-ease); pointer-events: none; }
.mmr-strip-tile:hover img, .mmr-strip-tile:hover video { transform: scale(1.04); }
.mmr-strip-tile .mmr-play { width: 32px; height: 32px; }
.mmr-strip-tile .mmr-play::after { left: 12px; top: 9px; border-left-width: 10px; border-top-width: 7px; border-bottom-width: 7px; }

/* --------------------------------------------------------------- buttons */
.mmr-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--mmr-s2); min-height: 48px; padding: 0 var(--mmr-s5); font: inherit; font-family: var(--mmr-font); font-size: var(--mmr-t-meta); font-weight: 500; letter-spacing: var(--mmr-track); text-transform: uppercase; line-height: 1; white-space: nowrap; text-decoration: none !important; border: 1.5px solid var(--mmr-ink); border-radius: 0; background: var(--mmr-card); color: var(--mmr-ink) !important; cursor: pointer; box-shadow: 0 3px 0 0 var(--mmr-ink);
	transition: transform var(--mmr-press) var(--mmr-ease), box-shadow var(--mmr-press) var(--mmr-ease), background-color 160ms ease, color 160ms ease; }
.mmr-btn:hover { background: var(--mmr-paper); }
.mmr-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--mmr-ink); }
.mmr-btn--primary { background: var(--mmr-ink); border-color: var(--mmr-ink); color: #fff !important; box-shadow: var(--mmr-depth); }
.mmr-btn--primary:hover { background: #000; border-color: #000; }
.mmr-btn--primary:active { box-shadow: var(--mmr-depth-press); }
.mmr-btn:disabled { opacity: .55; cursor: progress; transform: none; }

/* --------------------------------------------------------------- toolbar */
.mmr-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--mmr-s3); margin: var(--mmr-s5) 0 var(--mmr-s4); flex-wrap: wrap; }
.mmr-chips { display: flex; flex-wrap: wrap; }
.mmr-chip { appearance: none; min-height: 40px; margin: 0 -1.5px 0 0; padding: 0 var(--mmr-s4); font: inherit; font-size: var(--mmr-t-small); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border: 1.5px solid var(--mmr-ink); border-radius: 0; background: var(--mmr-card); color: var(--mmr-ink); cursor: pointer;
	transition: transform var(--mmr-press) var(--mmr-ease), background-color 160ms ease, color 160ms ease; }
.mmr-chip:hover { background: var(--mmr-paper); }
.mmr-chip:active { transform: translateY(1px); }
.mmr-chip.is-on { background: var(--mmr-ink); color: #fff; position: relative; z-index: 1; }
.mmr-chip--rating { margin-left: var(--mmr-s2); }
.mmr-chip--rating::after { content: "  ×"; white-space: pre; }
.mmr-sort select { appearance: none; min-height: 40px; height: auto; width: auto; margin: 0; padding: 0 var(--mmr-s6) 0 var(--mmr-s3); font: inherit; font-size: var(--mmr-t-meta); color: var(--mmr-ink); border: 1px solid var(--mmr-line); border-radius: 0; cursor: pointer;
	background: var(--mmr-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") right 12px center no-repeat; }
.mmr-sort select:focus { border-color: var(--mmr-ink); outline: none; }

/* ------------------------------------------------------------ mosaic grid */
.mmr-grid { column-count: 2; column-gap: var(--mmr-s2); }
@container mmr (min-width: 620px) { .mmr-grid { column-count: 3; column-gap: var(--mmr-s4); } }
@container mmr (min-width: 960px) { .mmr-grid { column-count: 4; } }
.mmr-grid.is-loading { opacity: .45; transition: opacity .2s; }
.mmr-card { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 var(--mmr-s2); background: var(--mmr-card); border: 1px solid var(--mmr-line); border-radius: 0; overflow: hidden; cursor: pointer; transition: border-color 160ms ease; animation: mmr-rise .5s var(--mmr-ease) both; }
@container mmr (min-width: 620px) { .mmr-card { margin-bottom: var(--mmr-s4); } }
.mmr-card:hover, .mmr-card:focus-visible { border-color: var(--mmr-ink); outline: none; }
@keyframes mmr-rise { from { opacity: 0; transform: translateY(8px); } }
.mmr-card-media { position: relative; background: var(--mmr-paper); }
.mmr-card-media img, .mmr-card-media video { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }
.mmr-play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; border-radius: 50%; background: rgb(255 255 255 / .94); box-shadow: 0 4px 16px rgb(0 0 0 / .2); pointer-events: none; }
.mmr-play::after { content: ""; position: absolute; left: 19px; top: 15px; border-left: 14px solid var(--mmr-ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.mmr-media-count { position: absolute; right: var(--mmr-s2); bottom: var(--mmr-s2); padding: 3px 6px; font-size: var(--mmr-t-label); font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; background: rgb(17 17 17 / .78); color: #fff; }
.mmr-card-body { padding: var(--mmr-s4); }
.mmr-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--mmr-s2); }
.mmr-pin { color: var(--mmr-rose); font-size: 10px; }
.mmr-card-text { margin: 0 0 var(--mmr-s3); color: var(--mmr-ink); line-height: 1.55; font-size: var(--mmr-t-ui); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; }
.mmr-card.is-text .mmr-card-text { font-size: var(--mmr-t-body); -webkit-line-clamp: 9; }
.mmr-card-fit { margin: 0 0 var(--mmr-s3); font-size: var(--mmr-t-small); color: var(--mmr-muted); }
.mmr-card-foot { display: flex; align-items: center; gap: var(--mmr-s1) var(--mmr-s2); flex-wrap: wrap; font-size: var(--mmr-t-small); }
.mmr-author { font-weight: 600; font-size: var(--mmr-t-meta); color: var(--mmr-ink); }
.mmr-verified { display: inline-flex; align-items: center; gap: 4px; font-size: var(--mmr-t-label); font-weight: 500; letter-spacing: .04em; color: var(--mmr-ink-2); }
.mmr-verified::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--mmr-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") center / 12px no-repeat; }
.mmr-card-date { flex-basis: 100%; color: var(--mmr-muted); font-size: var(--mmr-t-label); letter-spacing: .02em; }
.mmr-card-product { display: block; margin-top: var(--mmr-s2); font-size: var(--mmr-t-small); color: var(--mmr-muted); }
.mmr-card-reply { margin-top: var(--mmr-s3); padding: var(--mmr-s3); background: var(--mmr-paper); border-left: 2px solid var(--mmr-ink); font-size: var(--mmr-t-small); color: var(--mmr-ink-2); line-height: 1.5; }
.mmr-card-reply strong { display: block; margin-bottom: 2px; color: var(--mmr-ink); }
.mmr-more-wrap { text-align: center; margin-top: var(--mmr-s4); }
.mmr-more-wrap[hidden] { display: none; }

/* ------------------------------------------------------------- overlays */
.mmr-lightbox, .mmr-modal, .mmr-drawer { position: fixed; inset: 0; z-index: 999999; }
.mmr-lightbox[hidden], .mmr-modal[hidden], .mmr-drawer[hidden] { display: none; }
.mmr-backdrop { position: absolute; inset: 0; background: rgb(17 17 17 / .78); animation: mmr-fade .2s both; }
@keyframes mmr-fade { from { opacity: 0; } }
@keyframes mmr-pop { from { opacity: 0; transform: translateY(12px); } }
@keyframes mmr-up { from { transform: translateY(100%); } }

/* square icon buttons: close, review nav, media nav (44px targets) */
.mmr-x, .mmr-lb-nav, .mmr-lb-mnav, .mmr-nav { appearance: none; position: absolute; z-index: 3; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: #fff; color: var(--mmr-ink); cursor: pointer; transition: transform var(--mmr-press) var(--mmr-ease), background-color 160ms ease; }
.mmr-x:active, .mmr-lb-nav:active, .mmr-lb-mnav:active, .mmr-nav:active { transform: scale(.94); }
.mmr-x { top: 0; right: 0; }
.mmr-x::before, .mmr-x::after { content: ""; position: absolute; left: 13px; right: 13px; top: 21px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.mmr-x::after { transform: rotate(-45deg); }
.mmr-lb-nav::before, .mmr-lb-mnav::before, .mmr-nav::before { content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.mmr-lb-prev::before, .mmr-lb-mprev::before, .mmr-prev::before { transform: translateX(2px) rotate(135deg); }
.mmr-lb-next::before, .mmr-lb-mnext::before, .mmr-next::before { transform: translateX(-2px) rotate(-45deg); }
.mmr-lb-nav[hidden], .mmr-lb-mnav[hidden] { display: none; }

/* ------------------------------------------------------------- lightbox */
.mmr-lb-panel { position: absolute; inset: 0; margin: auto; width: min(1080px, calc(100vw - 144px)); height: min(720px, calc(100vh - 64px)); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); background: var(--mmr-card); overflow: hidden; animation: mmr-pop .25s var(--mmr-ease) both; outline: none; }
.mmr-lb-panel.no-media { grid-template-columns: 1fr; width: min(600px, calc(100vw - 144px)); height: auto; max-height: calc(100vh - 64px); }
.mmr-lb-media { position: relative; min-height: 0; background: #0d0d0d; }
.mmr-lb-track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.mmr-lb-track::-webkit-scrollbar { display: none; }
.mmr-lb-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; scroll-snap-stop: always; }
.mmr-lb-slide img, .mmr-lb-slide video { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.mmr-lb-slide video { width: 100%; background: #000; }
.mmr-lb-mnav { top: 50%; margin-top: -22px; background: rgb(255 255 255 / .92); }
.mmr-lb-mprev { left: var(--mmr-s3); }
.mmr-lb-mnext { right: var(--mmr-s3); }
.mmr-lb-count { position: absolute; left: var(--mmr-s3); top: var(--mmr-s3); z-index: 2; padding: 4px 8px; background: rgb(17 17 17 / .7); color: #fff; font-variant-numeric: tabular-nums; }
.mmr-lb-thumbs { position: absolute; left: 0; right: 0; bottom: var(--mmr-s3); z-index: 2; display: flex; gap: var(--mmr-s2); justify-content: center; padding: 0 var(--mmr-s3); }
.mmr-lb-thumbs button { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: #222 center / cover no-repeat; cursor: pointer; opacity: .6; box-shadow: 0 0 0 1px rgb(255 255 255 / .25); transition: opacity 160ms ease; }
.mmr-lb-thumbs button video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mmr-lb-thumbs button.is-video::after { content: ""; position: absolute; left: 17px; top: 14px; border-left: 11px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .6)); }
.mmr-lb-thumbs button.is-on { opacity: 1; box-shadow: 0 0 0 2px #fff; }
.mmr-lb-info { position: relative; padding: var(--mmr-s6) var(--mmr-s6) var(--mmr-s5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--mmr-s3); }
.mmr-lb-info .mmr-card-text { -webkit-line-clamp: unset; font-size: var(--mmr-t-body); margin: 0; }
.mmr-lb-info .mmr-card-fit { margin: 0; }
.mmr-lb-author { display: flex; align-items: center; gap: var(--mmr-s3); padding-right: 44px; }
.mmr-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--mmr-paper); font-weight: 600; color: var(--mmr-ink); flex: none; }
.mmr-lb-date { font-size: var(--mmr-t-small); color: var(--mmr-muted); }
.mmr-lb-product { margin-top: auto; display: flex; align-items: center; gap: var(--mmr-s3); padding: var(--mmr-s3); border: 1px solid var(--mmr-line); text-decoration: none !important; color: var(--mmr-ink) !important; transition: border-color 160ms ease; }
.mmr-lb-product:hover { border-color: var(--mmr-ink); }
.mmr-lb-product img { width: 52px; height: 65px; object-fit: cover; flex: none; }
.mmr-lb-product span { font-size: var(--mmr-t-meta); font-weight: 500; line-height: 1.35; }
.mmr-lb-product small { display: block; color: var(--mmr-muted); font-weight: 400; margin-top: 2px; }
.mmr-helpful { align-self: flex-start; appearance: none; min-height: 44px; padding: 0 var(--mmr-s4); font: inherit; font-size: var(--mmr-t-small); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--mmr-line); border-radius: 0; background: var(--mmr-card); color: var(--mmr-ink); cursor: pointer; transition: border-color 160ms ease; }
.mmr-helpful:hover { border-color: var(--mmr-ink); }
.mmr-helpful span { font-variant-numeric: tabular-nums; color: var(--mmr-muted); margin-left: 4px; }
.mmr-helpful.is-on { border-color: var(--mmr-ink); background: var(--mmr-ink); color: #fff; }
.mmr-helpful.is-on span { color: #fff; }
.mmr-lb-nav { top: 50%; margin-top: -22px; }
.mmr-lb-prev { left: max(var(--mmr-s4), calc(50vw - 540px - 60px)); }
.mmr-lb-next { right: max(var(--mmr-s4), calc(50vw - 540px - 60px)); }
.mmr-lb-bar { display: none; }

/* --------------------------------------------------------------- carousel */
.mmr-carousel { margin: var(--mmr-s7) 0; container-type: inline-size; container-name: mmrc; }
.mmr-carousel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--mmr-s4); margin-bottom: var(--mmr-s4); }
.mmr-carousel-head .mmr-title { margin-bottom: var(--mmr-s1); }
.mmr-carousel-sub { display: flex; align-items: center; gap: 6px; font-size: var(--mmr-t-meta); color: var(--mmr-muted); }
.mmr-carousel-sub strong { color: var(--mmr-ink); font-weight: 600; }
.mmr-carousel-nav { display: flex; gap: var(--mmr-s2); }
.mmr-nav { position: relative; border: 1.5px solid var(--mmr-ink); background: var(--mmr-card); }
.mmr-nav:hover { background: var(--mmr-ink); color: #fff; }
.mmr-track { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--mmr-s4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.mmr-track::-webkit-scrollbar { display: none; }
.mmr-slide { position: relative; scroll-snap-align: start; overflow: hidden; background: var(--mmr-card); border: 1px solid var(--mmr-line); display: flex; flex-direction: column; cursor: pointer; transition: border-color 160ms ease; }
.mmr-slide:hover { border-color: var(--mmr-ink); }
.mmr-slide-media { position: relative; aspect-ratio: 3 / 4; background: var(--mmr-paper); }
.mmr-slide-media img, .mmr-slide-media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--mmr-ease); }
.mmr-slide:hover .mmr-slide-media img { transform: scale(1.03); }
.mmr-slide-body { padding: var(--mmr-s4) var(--mmr-s4) var(--mmr-s2); display: grid; gap: var(--mmr-s2); }
.mmr-slide-body p { margin: 0; font-size: var(--mmr-t-ui); line-height: 1.5; color: var(--mmr-ink); }
.mmr-slide-product { margin-top: auto; display: flex; align-items: center; gap: var(--mmr-s2); padding: var(--mmr-s2) var(--mmr-s4) var(--mmr-s4); text-decoration: none !important; color: var(--mmr-muted) !important; font-size: var(--mmr-t-small); }
.mmr-slide-product img { width: 30px; height: 38px; object-fit: cover; }
.mmr-carousel--gallery .mmr-slide { border: 0; }
.mmr-carousel--gallery .mmr-slide-product { position: absolute; left: var(--mmr-s2); right: var(--mmr-s2); bottom: var(--mmr-s2); padding: var(--mmr-s2); background: rgb(255 255 255 / .95); color: var(--mmr-ink) !important; }
.mmr-carousel--testimonial .mmr-track { grid-auto-columns: 86%; }
.mmr-carousel--testimonial .mmr-slide-body p { font-size: var(--mmr-t-body); }
@container mmrc (min-width: 620px) { .mmr-track { grid-auto-columns: calc((100% - 2 * 16px) / 3); } .mmr-carousel--testimonial .mmr-track { grid-auto-columns: calc((100% - 16px) / 2); } }
@container mmrc (min-width: 1000px) { .mmr-track { grid-auto-columns: calc((100% - 3 * 16px) / 4); } .mmr-carousel--testimonial .mmr-track { grid-auto-columns: calc((100% - 2 * 16px) / 3); } }
@container mmrc (max-width: 619px) { .mmr-carousel-nav { display: none; } }

/* ------------------------------------------------------- floating tab */
.mmr-float { position: fixed; top: 50%; z-index: 99998; appearance: none; min-height: 44px; padding: 0 var(--mmr-s4); font: inherit; font-family: var(--mmr-font); font-size: var(--mmr-t-small); font-weight: 500; letter-spacing: var(--mmr-track); text-transform: uppercase; border: 0; border-radius: 0; background: var(--mmr-ink); color: #fff; cursor: pointer; }
.mmr-float--right { right: 0; transform: translate(calc(50% - 22px), -50%) rotate(-90deg); }
.mmr-float--left { left: 0; transform: translate(calc(-50% + 22px), -50%) rotate(90deg); }
.mmr-drawer { background: rgb(17 17 17 / .55); animation: mmr-fade .2s both; }
.mmr-drawer-panel { position: absolute; top: 0; bottom: 0; width: min(880px, 100vw); background: var(--mmr-card); overflow-y: auto; padding: var(--mmr-s5) var(--mmr-s6) var(--mmr-s7); animation: mmr-in-r .3s var(--mmr-ease) both; }
.mmr-drawer-panel--right { right: 0; }
.mmr-drawer-panel--left { left: 0; animation-name: mmr-in-l; }
@keyframes mmr-in-r { from { transform: translateX(100%); } }
@keyframes mmr-in-l { from { transform: translateX(-100%); } }
.mmr-drawer .mmr-widget { margin: var(--mmr-s2) 0 0; }

/* ------------------------------------------------------------ write modal */
.mmr-modal-panel { position: absolute; inset: 0; margin: auto; width: min(560px, calc(100vw - 32px)); height: fit-content; max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain; background: var(--mmr-card); padding: var(--mmr-s6); animation: mmr-pop .25s var(--mmr-ease) both; }
.mmr-modal-title { margin: 0 44px var(--mmr-s5) 0; font-size: var(--mmr-t-label); font-weight: 500; letter-spacing: var(--mmr-track); text-transform: uppercase; color: var(--mmr-muted); }

/* ============================================================ review form */
.mmr-f { max-width: 560px; margin: 0 auto; font-size: var(--mmr-t-body); }
.mmr-f-progress { display: flex; gap: var(--mmr-s1); margin-bottom: var(--mmr-s5); }
.mmr-f-progress span { flex: 1; height: 2px; background: var(--mmr-line); }
.mmr-f-progress span.is-done { background: var(--mmr-ink); }
.mmr-f-product { display: flex; align-items: center; gap: var(--mmr-s3); margin-bottom: var(--mmr-s5); padding-bottom: var(--mmr-s4); border-bottom: 1px solid var(--mmr-line); }
.mmr-f-product img { width: 48px; height: 60px; object-fit: cover; background: var(--mmr-paper); flex: none; }
.mmr-f-product strong { display: block; font-size: var(--mmr-t-ui); font-weight: 500; line-height: 1.35; }
.mmr-f-product small { color: var(--mmr-muted); font-size: var(--mmr-t-small); }
.mmr-f-step { animation: mmr-step .3s var(--mmr-ease) both; }
@keyframes mmr-step { from { opacity: 0; transform: translateX(10px); } }
.mmr-f h2 { margin: 0 0 var(--mmr-s1); font-family: var(--mmr-font); font-size: var(--mmr-t-sec); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.mmr-f-sub { margin: 0 0 var(--mmr-s5); color: var(--mmr-muted); font-size: var(--mmr-t-ui); line-height: 1.5; }
.mmr-f-rate { display: flex; justify-content: center; gap: var(--mmr-s1); margin: var(--mmr-s6) 0 var(--mmr-s2); }
.mmr-f-rate button { appearance: none; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; transition: transform var(--mmr-press) var(--mmr-ease); }
.mmr-f-rate button:active { transform: scale(.9); }
.mmr-f-rate .mmr-star { --mmr-star: 40px; --mmr-star-color: var(--mmr-ink); }
.mmr-f-rate:hover button .mmr-star { --mmr-fill: 100% !important; }
.mmr-f-rate button:hover ~ button .mmr-star { --mmr-fill: 0% !important; }
.mmr-f-rate-label { text-align: center; min-height: 24px; margin-bottom: var(--mmr-s5); font-size: var(--mmr-t-meta); font-weight: 500; letter-spacing: var(--mmr-track); text-transform: uppercase; }
.mmr-f-reward { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--mmr-s3); padding: 6px 10px; background: var(--mmr-paper); color: var(--mmr-ink); font-size: var(--mmr-t-small); font-weight: 600; }
.mmr-f-drop { display: grid; place-items: center; gap: var(--mmr-s2); padding: var(--mmr-s6) var(--mmr-s4); text-align: center; border: 1px dashed #bdb6aa; background: var(--mmr-paper); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
.mmr-f-drop:hover, .mmr-f-drop.is-over, .mmr-f-drop:focus-within { border-color: var(--mmr-ink); background: #fff; }
.mmr-f-drop strong { font-size: var(--mmr-t-meta); font-weight: 500; letter-spacing: var(--mmr-track); text-transform: uppercase; }
.mmr-f-drop small { color: var(--mmr-muted); font-size: var(--mmr-t-small); }
.mmr-f-cam { width: 28px; height: 28px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 7h4l2-3h6l2 3h4v13H3z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 7h4l2-3h6l2 3h4v13H3z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center / contain no-repeat; }
.mmr-f-count { margin: var(--mmr-s3) 0 0; font-size: var(--mmr-t-small); color: var(--mmr-muted); }
.mmr-f-count:empty { display: none; }
.mmr-f-previews { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mmr-s2); margin-top: var(--mmr-s3); }
@media (min-width: 480px) { .mmr-f-previews { grid-template-columns: repeat(5, 1fr); } }
.mmr-f-previews:empty { display: none; }
.mmr-f-prev { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--mmr-paper); animation: mmr-rise .3s var(--mmr-ease) both; }
.mmr-f-prev img, .mmr-f-prev video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mmr-f-prev.is-video::before { content: "Video"; position: absolute; left: 4px; bottom: 4px; z-index: 1; padding: 2px 5px; background: rgb(17 17 17 / .78); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mmr-f-prev button { position: absolute; top: 0; right: 0; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 0; background: rgb(17 17 17 / .82); color: #fff; font-size: 16px; line-height: 28px; cursor: pointer; }
.mmr-f-prev button::after { content: ""; position: absolute; inset: -8px -8px -8px -8px; } /* 44px target */
.mmr-f textarea, .mmr-f input[type="text"], .mmr-f input[type="email"] { width: 100%; min-height: var(--mmr-control); margin: 0; padding: 0 var(--mmr-s4); font: inherit; font-size: 16px; border: 1px solid #cfc9bf; border-radius: 0; background: #fff; color: var(--mmr-ink); box-shadow: none; transition: border-color 160ms ease, box-shadow 160ms ease; }
.mmr-f textarea { min-height: 140px; padding: var(--mmr-s3) var(--mmr-s4); resize: vertical; line-height: 1.5; }
.mmr-f textarea:focus, .mmr-f input:focus { outline: none; border-color: var(--mmr-ink); box-shadow: inset 0 0 0 1px var(--mmr-ink); }
.mmr-f [aria-invalid="true"] { border-color: var(--mmr-rose) !important; box-shadow: inset 0 0 0 1px var(--mmr-rose) !important; }
.mmr-f .mmr-f-label { display: block; margin: var(--mmr-s5) 0 var(--mmr-s2); color: var(--mmr-ink); }
.mmr-f-chars { margin: var(--mmr-s1) 0 0; text-align: right; font-size: var(--mmr-t-label); color: var(--mmr-muted); font-variant-numeric: tabular-nums; }
.mmr-f-fit, .mmr-f-sizes { display: flex; flex-wrap: wrap; }
.mmr-f-fit button, .mmr-f-sizes button { appearance: none; flex: 1 1 0; min-height: 48px; margin: 0 -1.5px -1.5px 0; padding: 0 var(--mmr-s3); font: inherit; font-size: var(--mmr-t-small); font-weight: 500; letter-spacing: .04em; border: 1.5px solid var(--mmr-ink); border-radius: 0; background: #fff; color: var(--mmr-ink); cursor: pointer; transition: transform var(--mmr-press) var(--mmr-ease), background-color 160ms ease, color 160ms ease; }
.mmr-f-sizes button { flex: 0 0 auto; min-width: 56px; }
.mmr-f-fit button:active, .mmr-f-sizes button:active { transform: translateY(1px); }
.mmr-f-fit button.is-on, .mmr-f-sizes button.is-on { position: relative; z-index: 1; background: var(--mmr-ink); color: #fff; }
.mmr-f-note { margin: var(--mmr-s2) 0 0; font-size: var(--mmr-t-small); color: var(--mmr-muted); }
.mmr-f-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--mmr-s3); margin-top: var(--mmr-s5); }
.mmr-f-actions .mmr-btn--primary { flex: 1; max-width: 280px; margin-left: auto; min-height: var(--mmr-control); }
.mmr-f-link { appearance: none; min-height: 44px; padding: 0 var(--mmr-s1); border: 0; background: none; font: inherit; font-size: var(--mmr-t-meta); color: var(--mmr-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mmr-f-error { display: flex; align-items: flex-start; gap: var(--mmr-s2); margin: var(--mmr-s3) 0 0; min-height: 0; color: var(--mmr-rose); font-size: var(--mmr-t-meta); font-weight: 500; }
.mmr-f-error:not(:empty)::before { content: "!"; flex: none; width: 16px; height: 16px; margin-top: 1px; background: var(--mmr-rose); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.mmr-f-done { text-align: center; padding: var(--mmr-s4) 0 var(--mmr-s2); }
.mmr-f-check { position: relative; width: 64px; height: 64px; margin: 0 auto var(--mmr-s5); border: 1.5px solid var(--mmr-ink); border-radius: 50%; animation: mmr-pop .4s var(--mmr-ease) both; }
.mmr-f-check::after { content: ""; position: absolute; left: 23px; top: 15px; width: 14px; height: 26px; border-right: 1.5px solid var(--mmr-ink); border-bottom: 1.5px solid var(--mmr-ink); transform: rotate(45deg); }
.mmr-f-done .mmr-f-sub { max-width: 36ch; margin-left: auto; margin-right: auto; }
.mmr-f-code { display: inline-flex; align-items: center; gap: var(--mmr-s3); margin: var(--mmr-s4) 0 var(--mmr-s2); padding: var(--mmr-s2) var(--mmr-s2) var(--mmr-s2) var(--mmr-s4); border: 1px dashed var(--mmr-ink); font-size: 20px; font-weight: 600; letter-spacing: .1em; }
.mmr-f-code button { min-height: 40px; }
.mmr-f-done-actions { display: flex; flex-direction: column; align-items: center; gap: var(--mmr-s3); margin-top: var(--mmr-s5); }
.mmr-f-done-actions .mmr-btn { min-width: 240px; }
.mmr-f-progressbar { height: 2px; background: var(--mmr-line); overflow: hidden; margin-top: var(--mmr-s3); }
.mmr-f-progressbar span { display: block; height: 100%; width: 0; background: var(--mmr-ink); transition: width .2s; }
.mmr-hp { position: absolute !important; left: -9999px !important; }

/* ------------------------------------------------------ hosted page shell */
.mmr-page { margin: 0; min-height: 100vh; background: var(--mmr-paper); -webkit-font-smoothing: antialiased; }
.mmr-page-head { text-align: center; padding: var(--mmr-s5) var(--mmr-s4) var(--mmr-s2); }
.mmr-page-head img { max-height: 40px; max-width: 200px; }
.mmr-wordmark { font-size: 18px; letter-spacing: .24em; font-weight: 500; color: var(--mmr-ink); }
.mmr-page-head a { text-decoration: none; }
.mmr-page-main { padding: var(--mmr-s3) var(--mmr-s4) var(--mmr-s7); }
.mmr-page #mmr-form-root { max-width: 600px; margin: 0 auto; padding: var(--mmr-s6) var(--mmr-s5); background: var(--mmr-card); }
.mmr-page-msg { max-width: 520px; margin: var(--mmr-s6) auto; padding: var(--mmr-s6) var(--mmr-s5); text-align: center; background: #fff; }

/* ---------------------------------------------------------- phones */
@media (max-width: 760px) {
	.mmr-widget { margin: var(--mmr-s6) 0; }
	.mmr-score-num { font-size: 48px; }
	.mmr-card-body { padding: var(--mmr-s3); }
	.mmr-card-text { font-size: var(--mmr-t-meta); -webkit-line-clamp: 5; }
	.mmr-card.is-text .mmr-card-text { font-size: var(--mmr-t-ui); }

	/* lightbox: full screen; media swipes inside its track; review nav in a bottom bar */
	.mmr-lb-panel, .mmr-lb-panel.no-media { inset: 0; width: 100%; height: 100%; height: 100dvh; max-height: none; grid-template-columns: 1fr; grid-template-rows: minmax(0, 58fr) minmax(0, 42fr) auto; animation-name: mmr-up; animation-duration: .3s; }
	.mmr-lb-panel.no-media { grid-template-rows: minmax(0, 1fr) auto; }
	.mmr-lb-panel > .mmr-x { position: absolute; top: calc(env(safe-area-inset-top) + var(--mmr-s2)); right: var(--mmr-s2); }
	.mmr-lb-panel.no-media > .mmr-x { background: var(--mmr-paper); }
	.mmr-lb-mnav { display: none; }
	.mmr-lb-count { top: calc(env(safe-area-inset-top) + var(--mmr-s2)); left: var(--mmr-s2); }
	.mmr-lb-info { padding: var(--mmr-s5) var(--mmr-s4); }
	.mmr-lb-panel.no-media .mmr-lb-info { padding-top: calc(env(safe-area-inset-top) + 64px); }
	.mmr-lightbox > .mmr-lb-nav { display: none; }
	.mmr-lb-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid var(--mmr-line); padding-bottom: env(safe-area-inset-bottom); background: #fff; }
	.mmr-lb-bar button { appearance: none; min-height: 52px; padding: 0 var(--mmr-s4); border: 0; background: none; font: inherit; font-size: var(--mmr-t-small); font-weight: 500; letter-spacing: var(--mmr-track); text-transform: uppercase; color: var(--mmr-ink); cursor: pointer; }
	.mmr-lb-bar button:first-child { text-align: left; }
	.mmr-lb-bar button:last-child { text-align: right; }
	.mmr-lb-bar span { font-size: var(--mmr-t-small); color: var(--mmr-muted); font-variant-numeric: tabular-nums; }

	.mmr-modal-panel { inset: auto 0 0 0; width: 100%; max-height: 94vh; max-height: 94dvh; padding: var(--mmr-s5) var(--mmr-s4) calc(var(--mmr-s5) + env(safe-area-inset-bottom)); animation-name: mmr-up; }
	.mmr-drawer-panel { padding: var(--mmr-s4) var(--mmr-s4) var(--mmr-s6); }
	.mmr-page #mmr-form-root { padding: var(--mmr-s5) var(--mmr-s4); }
	.mmr-f-rate button { width: 48px; height: 48px; }
	.mmr-f-rate .mmr-star { --mmr-star: 36px; }
}
@container mmr (max-width: 619px) {
	.mmr-toolbar { align-items: stretch; }
	.mmr-sort { flex: 1 0 100%; }
	.mmr-sort select { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.mmr-widget *, .mmr-carousel *, .mmr-lightbox *, .mmr-modal *, .mmr-drawer *, .mmr-page *, .mmr-card, .mmr-btn { animation: none !important; transition: none !important; }
	.mmr-btn:active, .mmr-chip:active { transform: none; }
	.mmr-lb-track { scroll-behavior: auto; }
}

/* file input stays focusable (keyboard opens the picker) but is visually hidden inside the drop zone */
.mmr-f-drop { position: relative; }
.mmr-f-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.mmr-f-drop:has(.mmr-f-file:focus-visible) { outline: 2px solid var(--mmr-ink); outline-offset: 2px; }

/* the theme's body.mm-shell field rule (min-height 52px) would pin the review textarea to one line */
.mmr-f textarea { min-height: 140px !important; height: auto !important; }
/* lightbox text never shrinks to fit the panel; the info column scrolls instead */
.mmr-lb-info > * { flex-shrink: 0; }