/* Reviews on the storefront — the product page's section and the page
   editor's review blocks (core/ReviewUI.php draws the markup).

   Neutral on purpose: the template's font and text colour, with hairlines
   and tints mixed from that colour, so it sits in any design, light or dark.
   A template tunes it with:
     --cmsr-width      content width (default 1200px)
     --cmsr-gutter     side padding (default 20px)
     --cmsr-accent     the main button and active filter (default: near-black)
     --cmsr-on-accent  text on it (default: white)
     --cmsr-star       filled stars (default: amber)
     --cmsr-radius     corner rounding of boxes and cards (default 14px)
     --cmsr-button-radius  of buttons and filter chips (default: round ends)
   Everything is scoped under .cmsr, so nothing here reaches the template. */

/* The tunables' defaults, at zero specificity: a template's own :root wins,
   whichever stylesheet comes first. */
:where(:root) { --cmsr-star: #f59e0b; --cmsr-radius: 14px; --cmsr-button-radius: 999px; }

.cmsr {
  --cmsr-star-off: color-mix(in srgb, currentColor 16%, transparent);
  --cmsr-line: color-mix(in srgb, currentColor 13%, transparent);
  --cmsr-line-strong: color-mix(in srgb, currentColor 26%, transparent);
  --cmsr-soft: color-mix(in srgb, currentColor 4%, transparent);
  --cmsr-soft-2: color-mix(in srgb, currentColor 8%, transparent);
  --cmsr-muted: color-mix(in srgb, currentColor 64%, transparent);
  --cmsr-accent-c: var(--cmsr-accent, #1c1f26);
  --cmsr-on-accent-c: var(--cmsr-on-accent, #fff);
  --cmsr-ok: #15803d;
  --cmsr-bad: #b42318;
  --cmsr-r: var(--cmsr-radius);
  --cmsr-r-sm: calc(var(--cmsr-radius) * .7);
  --cmsr-star-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M12 1.6l3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.4l-6.2 3.3L7 13.8 2 8.9l6.9-1z'/%3E%3C/svg%3E");
  --cmsr-star-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.4l-6.2 3.3L7 13.8 2 8.9l6.9-1z'/%3E%3C/svg%3E");
  --cmsr-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 1.9 3.2-.1 1 3 2.6 1.9-1 3.1 1 3-2.6 1.9-1 3.1-3.2-.1L12 22.5l-2.6-1.9-3.2.1-1-3.1-2.6-1.9 1-3-1-3.1 2.6-1.9 1-3 3.2.1z'/%3E%3C/svg%3E");
  --cmsr-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  --cmsr-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
  --cmsr-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --cmsr-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --cmsr-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h3l2-3h6l2 3h3a1 1 0 011 1v11a1 1 0 01-1 1H4a1 1 0 01-1-1V8a1 1 0 011-1z'/%3E%3Ccircle cx='12' cy='13' r='3.6'/%3E%3C/svg%3E");
  --cmsr-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  --cmsr-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 5C6 6.4 3.5 9.5 3.5 13.6V19h6.2v-6.2H6.6c.1-2.5 1.6-4.4 3.9-5.4zm10.4 0c-3.6 1.4-6.1 4.5-6.1 8.6V19h6.2v-6.2H17c.1-2.5 1.6-4.4 3.9-5.4z'/%3E%3C/svg%3E");
  color: inherit;
  font: inherit;
  line-height: 1.55;
  text-align: left;
}
.cmsr *, .cmsr *::before, .cmsr *::after { box-sizing: border-box; }
.cmsr :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.cmsr :where(p, h2, h3, h4, blockquote, figure, fieldset) { margin: 0; }
.cmsr :where(button, input, textarea, select) { font: inherit; color: inherit; letter-spacing: inherit; }
.cmsr :where(a) { color: inherit; }
.cmsr :where(img) { max-width: 100%; display: block; }
.cmsr [hidden] { display: none !important; }
.cmsr-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cmsr-wrap { max-width: var(--cmsr-width, 1200px); margin: 0 auto; padding-inline: var(--cmsr-gutter, 20px); }
.cmsr-muted { color: var(--cmsr-muted); font-size: .9em; }

/* ── Icons (masks, so they take the text colour) ─────────────────────────── */
.cmsr-i-pen, .cmsr-i-plus, .cmsr-star-i, .cmsr-verified i, .cmsr-x::before, .cmsr-empty-i::before {
  display: inline-block; flex: none; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.cmsr-i-pen { --m: var(--cmsr-pen); width: 1.05em; height: 1.05em; }
.cmsr-i-plus { --m: var(--cmsr-plus); width: 1.15em; height: 1.15em; }
.cmsr-star-i { --m: var(--cmsr-star-1); width: .85em; height: .85em; background: var(--cmsr-star); }

/* ── Stars ─────────────────────────────────────────────────────────────────── */
.cmsr-stars {
  --s: 1em;
  display: inline-block; flex: none; vertical-align: -.12em;
  width: calc(var(--s) * 5 * 26 / 24); height: var(--s);
  background: linear-gradient(90deg, var(--cmsr-star) var(--cmsr-pct, 0%), var(--cmsr-star-off) 0);
  -webkit-mask: var(--cmsr-star-svg) 0 0 / calc(var(--s) * 26 / 24) var(--s) repeat-x;
  mask: var(--cmsr-star-svg) 0 0 / calc(var(--s) * 26 / 24) var(--s) repeat-x;
}
.cmsr-stars--sm { --s: .85em; }
.cmsr-stars--lg { --s: 1.3em; }
@media (forced-colors: active) { .cmsr-stars { forced-color-adjust: none; } }

/* ── Buttons, chips ───────────────────────────────────────────────────────── */
.cmsr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .55em 1.15em; border-radius: var(--cmsr-button-radius);
  border: 1px solid var(--cmsr-line-strong); background: transparent; color: inherit;
  font-weight: 600; font-size: .95em; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.cmsr-btn:hover { background: var(--cmsr-soft-2); border-color: color-mix(in srgb, currentColor 40%, transparent); }
.cmsr-btn:focus-visible, .cmsr-chip:focus-visible, .cmsr-ph:focus-visible, .cmsr-card-media:focus-visible, .cmsr-add:focus-within,
.cmsr-dist a:focus-visible, .cmsr-x:focus-visible, .cmsr-product-link:focus-visible, .cmsr-more-t:focus-visible {
  outline: 2px solid currentColor; outline-offset: 2px;
}
.cmsr-btn--primary { background: var(--cmsr-accent-c); border-color: var(--cmsr-accent-c); color: var(--cmsr-on-accent-c); }
.cmsr-btn--primary:hover { background: color-mix(in srgb, var(--cmsr-accent-c) 86%, #fff); border-color: transparent; color: var(--cmsr-on-accent-c); }
.cmsr-btn--ghost { border-color: transparent; }
.cmsr-btn--lg { min-height: 48px; padding-inline: 1.5em; font-size: 1em; }
.cmsr-btn[disabled], .cmsr-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.cmsr-btn .cmsr-spin { width: 1em; height: 1em; }

.cmsr-chip {
  display: inline-flex; align-items: center; gap: .45em; flex: none;
  min-height: 38px; padding: .35em .95em; border-radius: var(--cmsr-button-radius);
  border: 1px solid var(--cmsr-line-strong); background: transparent; color: inherit;
  font-size: .9em; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.cmsr-chip span { color: var(--cmsr-muted); font-variant-numeric: tabular-nums; }
.cmsr-chip--star::before { content: ""; width: .85em; height: .85em; background: var(--cmsr-star); -webkit-mask: var(--cmsr-star-1) center/contain no-repeat; mask: var(--cmsr-star-1) center/contain no-repeat; order: 2; margin-left: -.25em; }
.cmsr-chip--star span { order: 3; }
.cmsr-chip:hover { background: var(--cmsr-soft-2); }
.cmsr-chip[aria-current="true"] { background: var(--cmsr-accent-c); border-color: var(--cmsr-accent-c); color: var(--cmsr-on-accent-c); }
.cmsr-chip[aria-current="true"] span { color: inherit; opacity: .8; }

/* ── Product page section ─────────────────────────────────────────────────── */
.cmsr-product { margin-block: clamp(40px, 6vw, 72px); scroll-margin-top: 90px; }
.cmsr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 22px; }
.cmsr-head h2 { font-size: clamp(1.35em, 2.4vw, 1.75em); line-height: 1.2; font-weight: 700; display: flex; align-items: baseline; gap: .45em; }
.cmsr-head-n { font-size: .6em; font-weight: 600; color: var(--cmsr-muted); padding: .15em .6em; border-radius: 999px; background: var(--cmsr-soft-2); }

.cmsr-overview {
  display: grid; grid-template-columns: minmax(200px, 250px) minmax(220px, 360px); gap: 20px 48px; align-items: center;
  padding: 22px 24px; border: 1px solid var(--cmsr-line); border-radius: var(--cmsr-r); background: var(--cmsr-soft);
  width: fit-content; max-width: 100%;
}
.cmsr-overview.has-photos { grid-template-columns: max-content minmax(220px, 340px) minmax(0, 1fr); width: auto; }
.cmsr-summary { display: contents; }
.cmsr-score { display: flex; align-items: center; gap: 16px; }
.cmsr-score-num { font-size: clamp(2.4em, 5vw, 3.1em); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmsr-score-num small { font-size: .36em; letter-spacing: 0; font-weight: 500; color: var(--cmsr-muted); margin-left: .15em; }
.cmsr-score-meta p { margin-top: 6px; font-size: .9em; color: var(--cmsr-muted); white-space: nowrap; }
.cmsr-dist { display: grid; gap: 5px; font-size: .88em; }
.cmsr-dist a, .cmsr-dist-row {
  display: grid; grid-template-columns: 2.1em minmax(0, 1fr) 2.6em; align-items: center; gap: 10px;
  padding: 3px 6px; margin: 0 -6px; border-radius: 8px; text-decoration: none; color: inherit;
}
.cmsr-dist a:hover, .cmsr-dist a[aria-current="true"] { background: var(--cmsr-soft-2); }
.cmsr-dist-row.is-empty { opacity: .5; }
.cmsr-dist-s { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmsr-bar { display: block; height: 8px; border-radius: 99px; background: var(--cmsr-star-off); overflow: hidden; }
.cmsr-bar em { display: block; height: 100%; border-radius: inherit; background: var(--cmsr-star); }
.cmsr-dist-n { text-align: right; color: var(--cmsr-muted); font-variant-numeric: tabular-nums; }

.cmsr-strip { min-width: 0; }
.cmsr-strip h3 { font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cmsr-muted); margin-bottom: 10px; }
.cmsr-strip ul { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.cmsr-strip li { flex: none; }
.cmsr-strip .cmsr-ph { width: 76px; height: 76px; }
.cmsr-strip-all { display: inline-block; margin-top: 8px; font-size: .88em; font-weight: 600; }
/* Beside the bars: a mosaic of up to two rows, as tall as the bars. */
@media (min-width: 981px) {
  .cmsr-overview.has-photos .cmsr-strip ul { display: grid; grid-template-columns: repeat(var(--cmsr-strip-cols, 5), 64px); gap: 8px; overflow: visible; padding-bottom: 0; }
  .cmsr-overview.has-photos .cmsr-strip .cmsr-ph { width: 64px; height: 64px; }
}

.cmsr-filters {
  display: flex; gap: 8px; margin: 22px 0 6px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px; -webkit-overflow-scrolling: touch;
}
.cmsr-filters::-webkit-scrollbar { display: none; }

.cmsr-list { position: relative; }
.cmsr-list[aria-busy="true"] > .cmsr-card { opacity: .45; }
.cmsr-card--list { padding: 22px 0; border-bottom: 1px solid var(--cmsr-line); }
.cmsr-card--list:last-child { border-bottom: 0; }
.cmsr-card--list .cmsr-card-body { max-width: 760px; }

.cmsr-pager { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--cmsr-line); }
.cmsr-pager-n { font-size: .85em; color: var(--cmsr-muted); font-variant-numeric: tabular-nums; }

/* ── A review ─────────────────────────────────────────────────────────────── */
.cmsr-card { display: flex; flex-direction: column; min-width: 0; }
.cmsr-card-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cmsr-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmsr-card-top time { font-size: .84em; color: var(--cmsr-muted); }
.cmsr-card-title { font-size: 1.02em; font-weight: 700; line-height: 1.35; }
.cmsr-text { overflow-wrap: anywhere; }
.cmsr-text p + p { margin-top: .6em; }
.cmsr-text.is-clamped:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.cmsr-more-t { align-self: flex-start; background: none; border: 0; padding: 0; font-weight: 600; font-size: .9em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cmsr-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.cmsr-ph {
  display: block; position: relative; width: 84px; height: 84px; padding: 0; border: 0; border-radius: var(--cmsr-r-sm);
  overflow: hidden; cursor: zoom-in; background: var(--cmsr-soft-2);
}
.cmsr-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.cmsr-ph:hover img { transform: scale(1.05); }
.cmsr-ph-more { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: var(--cmsr-r-sm); background: var(--cmsr-soft-2); font-size: .85em; font-weight: 600; }
.cmsr-author { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; font-size: .9em; }
.cmsr-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--cmsr-soft-2); font-weight: 700; font-size: .85em; flex: none;
}
.cmsr-name { font-weight: 600; }
.cmsr-verified { display: inline-flex; align-items: center; gap: 5px; color: var(--cmsr-ok); font-weight: 600; font-size: .92em; }
.cmsr-verified i { --m: var(--cmsr-check); width: 1.05em; height: 1.05em; position: relative; }
.cmsr-verified i::after { content: ""; position: absolute; inset: 22%; background: #fff; -webkit-mask: var(--cmsr-tick) center/contain no-repeat; mask: var(--cmsr-tick) center/contain no-repeat; }
.cmsr-reply { margin-top: 4px; padding: 12px 14px; border-left: 3px solid var(--cmsr-line-strong); border-radius: 0 var(--cmsr-r-sm) var(--cmsr-r-sm) 0; background: var(--cmsr-soft); font-size: .93em; }
.cmsr-reply b { display: block; font-size: .78em; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.cmsr-reply p + p { margin-top: .5em; }
.cmsr-product-link { display: inline-flex; align-items: center; gap: 10px; font-size: .88em; font-weight: 600; text-decoration: none; color: inherit; min-width: 0; }
.cmsr-product-link img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--cmsr-soft-2); flex: none; }
.cmsr-product-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cmsr-product-link:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ── Empty and loading ───────────────────────────────────────────────────── */
.cmsr-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 20px; border: 1px dashed var(--cmsr-line-strong); border-radius: var(--cmsr-r); }
.cmsr-empty-i { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--cmsr-soft-2); margin-bottom: 6px; }
.cmsr-empty-i::before { content: ""; --m: var(--cmsr-star-1); width: 22px; height: 22px; background: var(--cmsr-star); }
.cmsr-empty-i--photo::before { --m: var(--cmsr-camera); background: currentColor; }
.cmsr-empty-t { font-weight: 700; }
.cmsr-empty-s { color: var(--cmsr-muted); font-size: .92em; }
.cmsr-skel { padding: 22px 0; border-bottom: 1px solid var(--cmsr-line); }
.cmsr-skel i { display: block; height: 12px; border-radius: 6px; margin-bottom: 10px; background: linear-gradient(90deg, var(--cmsr-soft-2) 30%, var(--cmsr-soft) 50%, var(--cmsr-soft-2) 70%) 0 0 / 300% 100%; animation: cmsr-shine 1.2s linear infinite; }
.cmsr-skel i:nth-child(1) { width: 110px; }
.cmsr-skel i:nth-child(2) { width: 88%; }
.cmsr-skel i:nth-child(3) { width: 60%; margin-bottom: 0; }
@keyframes cmsr-shine { to { background-position: -150% 0; } }
.cmsr-spin { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: cmsr-spin .7s linear infinite; }
@keyframes cmsr-spin { to { transform: rotate(360deg); } }
.cmsr-error-line { padding: 12px 14px; border-radius: var(--cmsr-r-sm); background: color-mix(in srgb, var(--cmsr-bad) 9%, transparent); color: var(--cmsr-bad); font-size: .92em; }

/* ── The form ────────────────────────────────────────────────────────────── */
.cmsr-compose { margin: 0 0 26px; }
.cmsr-form, .cmsr-done {
  max-width: 720px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--cmsr-line-strong); border-radius: 18px;
  background: color-mix(in srgb, currentColor 2.5%, transparent); display: grid; gap: 20px;
}
.cmsr-form-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cmsr-form-head h3 { font-size: 1.2em; font-weight: 700; }
.cmsr-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cmsr-x::before { content: ""; --m: var(--cmsr-x); width: 20px; height: 20px; }
.cmsr-x:hover { background: var(--cmsr-soft-2); }
.cmsr-note { padding: 12px 14px; border-radius: var(--cmsr-r-sm); background: var(--cmsr-soft-2); font-size: .93em; }
.cmsr-note--ok { background: color-mix(in srgb, var(--cmsr-ok) 10%, transparent); }
.cmsr-alert { padding: 12px 14px; border-radius: var(--cmsr-r-sm); background: color-mix(in srgb, var(--cmsr-bad) 9%, transparent); color: var(--cmsr-bad); font-weight: 600; font-size: .93em; outline: none; }
.cmsr-field { display: grid; gap: 7px; min-width: 0; border: 0; padding: 0; }
.cmsr-field > label:not(.cmsr-add), .cmsr-field legend, .cmsr-label { font-weight: 650; font-size: .95em; padding: 0; }
.cmsr-label small { font-weight: 400; color: var(--cmsr-muted); }
.cmsr-req { color: var(--cmsr-bad); margin-left: 2px; }
.cmsr-field input[type="text"], .cmsr-field input[type="email"], .cmsr-field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; font-size: 16px; line-height: 1.45;
  border: 1px solid var(--cmsr-line-strong); border-radius: 12px; background: transparent; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.cmsr-field textarea { min-height: 140px; resize: vertical; }
.cmsr-field input:focus, .cmsr-field textarea:focus { outline: none; border-color: currentColor; box-shadow: 0 0 0 3px var(--cmsr-soft-2); }
.cmsr-field.is-invalid input, .cmsr-field.is-invalid textarea { border-color: var(--cmsr-bad); }
.cmsr-field.is-invalid input:focus, .cmsr-field.is-invalid textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmsr-bad) 18%, transparent); }
.cmsr-hint, .cmsr-hint-row { font-size: .84em; color: var(--cmsr-muted); }
.cmsr-hint-row { display: flex; justify-content: space-between; gap: 12px; }
.cmsr-counter { font-variant-numeric: tabular-nums; }
.cmsr-counter.is-low { color: var(--cmsr-bad); }
.cmsr-err { color: var(--cmsr-bad); font-size: .88em; font-weight: 600; display: flex; gap: 6px; }
.cmsr-err::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--cmsr-bad); color: #fff; font-size: .8em; flex: none; margin-top: .1em; }
.cmsr-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.cmsr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Star input: radios in order 1…5; the stars up to the hovered or chosen one light up. */
.cmsr-rate-row { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.cmsr-rate-star { position: relative; width: 44px; height: 44px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
.cmsr-rate-star::before { content: ""; width: 34px; height: 34px; background: var(--cmsr-star-off); -webkit-mask: var(--cmsr-star-1) center/contain no-repeat; mask: var(--cmsr-star-1) center/contain no-repeat; transition: transform .12s, background .12s; }
.cmsr-rate-row:has(input:checked) .cmsr-rate-star::before,
.cmsr-rate-row:has(.cmsr-rate-star:hover) .cmsr-rate-star::before { background: var(--cmsr-star); }
/* Off after the chosen star — unless the pointer is previewing another choice. */
.cmsr-rate-row:not(:has(.cmsr-rate-star:hover)) input:checked + .cmsr-rate-star ~ .cmsr-rate-star::before,
.cmsr-rate-row .cmsr-rate-star:hover ~ .cmsr-rate-star::before { background: var(--cmsr-star-off); }
.cmsr-rate-star:hover::before { transform: scale(1.12); }
.cmsr-rate-row input:focus-visible + .cmsr-rate-star { outline: 2px solid currentColor; outline-offset: 1px; }
.cmsr-rate-word { margin-left: 10px; font-weight: 600; font-size: .95em; min-width: 6em; }
.cmsr-rate.is-invalid .cmsr-rate-star::before { background: color-mix(in srgb, var(--cmsr-bad) 30%, transparent); }

/* Photo picker */
.cmsr-up-list { display: flex; flex-wrap: wrap; gap: 10px; }
.cmsr-up-list:empty { display: none; }
.cmsr-up { position: relative; width: 92px; height: 92px; border-radius: 12px; overflow: hidden; background: var(--cmsr-soft-2); border: 1px solid var(--cmsr-line); }
.cmsr-up img { width: 100%; height: 100%; object-fit: cover; }
.cmsr-up.is-busy img { opacity: .5; filter: saturate(.6); }
.cmsr-up-state { position: absolute; inset: auto 6px 6px 6px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.55); overflow: hidden; }
.cmsr-up-state em { display: block; height: 100%; width: 0; background: var(--cmsr-accent-c); transition: width .2s; }
.cmsr-up.is-done .cmsr-up-state { display: none; }
.cmsr-up.is-error { border-color: var(--cmsr-bad); }
.cmsr-up.is-error img { opacity: .35; }
.cmsr-up-msg { position: absolute; inset: auto 0 0 0; padding: 4px 6px; font-size: .68em; line-height: 1.25; font-weight: 700; color: #fff; background: var(--cmsr-bad); }
.cmsr-up-x {
  position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(17, 17, 17, .72); color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.cmsr-up-x::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--cmsr-x) center/contain no-repeat; mask: var(--cmsr-x) center/contain no-repeat; }
.cmsr-up-x:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.cmsr-add {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 46px; padding: 10px 16px;
  border: 1.5px dashed var(--cmsr-line-strong); border-radius: 12px; cursor: pointer; font-weight: 600; font-size: .95em;
  transition: background .15s, border-color .15s;
}
.cmsr-add span { display: inline-flex; align-items: center; gap: 8px; }
.cmsr-add:hover { background: var(--cmsr-soft-2); border-color: currentColor; }
.cmsr-add.is-full { display: none; }
.cmsr-form-foot { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.cmsr-fine { flex-basis: 100%; font-size: .84em; color: var(--cmsr-muted); }
.cmsr-captcha { min-height: 0; }

.cmsr-done { justify-items: start; gap: 8px; outline: none; }
.cmsr-done-i { width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--cmsr-ok) 14%, transparent); position: relative; }
.cmsr-done-i::before { content: ""; position: absolute; inset: 12px; background: var(--cmsr-ok); -webkit-mask: var(--cmsr-tick) center/contain no-repeat; mask: var(--cmsr-tick) center/contain no-repeat; }
.cmsr-done-t { font-size: 1.15em; font-weight: 700; }
.cmsr-done-s { color: var(--cmsr-muted); }

/* ── Lightbox (the script builds it) ─────────────────────────────────────── */
.cmsr-lb {
  --cmsr-star: #f59e0b; --cmsr-star-off: rgba(255,255,255,.25); --cmsr-muted: rgba(255,255,255,.72); --cmsr-ok: #4ade80;
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  border-radius: 0; box-shadow: none; overflow: hidden;   /* whatever a theme gives bare dialogs */
  background: rgba(10, 10, 12, .94); color: #fff; font: inherit; z-index: 2147483000;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
}
.cmsr-lb:not([open]) { display: none; }
.cmsr-lb::backdrop { background: rgba(10, 10, 12, .94); }
.cmsr-lb-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 0 18px; font-size: .9em; color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; }
.cmsr-lb-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 8px 64px; }
.cmsr-lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; background: rgba(255,255,255,.04); }
.cmsr-lb .cmsr-x { color: #fff; }
.cmsr-lb .cmsr-x:hover { background: rgba(255,255,255,.12); }
.cmsr-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.cmsr-lb-nav::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--cmsr-chev) center/contain no-repeat; mask: var(--cmsr-chev) center/contain no-repeat; }
.cmsr-lb-prev { left: 10px; } .cmsr-lb-prev::before { transform: scaleX(-1); }
.cmsr-lb-next { right: 10px; }
.cmsr-lb-nav:hover { background: rgba(255,255,255,.22); }
.cmsr-lb-nav:focus-visible, .cmsr-lb .cmsr-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cmsr-lb-nav[hidden] { display: none; }
.cmsr-lb-info { max-width: 760px; width: 100%; margin: 0 auto; padding: 14px 20px 22px; max-height: 30vh; overflow: auto; display: grid; gap: 8px; }
.cmsr-lb-info .cmsr-text { font-size: .95em; color: rgba(255,255,255,.9); }
.cmsr-lb-info .cmsr-author { color: #fff; }
.cmsr-lb-info .cmsr-avatar { background: rgba(255,255,255,.14); }
.cmsr-lb-info:empty { display: none; }
.cmsr-lb-loading { color: rgba(255,255,255,.7); font-size: .9em; }

/* ── Review blocks (page editor) ─────────────────────────────────────────── */
.cmsr-block { padding-block: clamp(36px, 6vw, 72px); }
.cmsr-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 26px; }
.cmsr-block-head h2 { font-size: clamp(1.45em, 3vw, 2.1em); line-height: 1.15; font-weight: 700; }
.cmsr-block-head p { margin-top: 8px; color: var(--cmsr-muted); max-width: 640px; }
.cmsr-block-head .cmsr-block-rating { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95em; }
.cmsr-block--center .cmsr-block-head { flex-direction: column; align-items: center; text-align: center; }
.cmsr-block--center .cmsr-block-head p { margin-inline: auto; }
.cmsr-block-head [data-placeholder]:empty::before { content: attr(data-placeholder); opacity: .4; }
.cmsr-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--cmsr-soft-2); color: var(--cmsr-muted); margin-bottom: 10px; }
.cmsr-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 25%, transparent); }

.cmsr-grid { display: grid; gap: 18px; grid-template-columns: repeat(var(--cmsr-cols, 3), minmax(0, 1fr)); }
.cmsr-grid > .cmsr-card, .cmsr-carousel .cmsr-card {
  padding: 20px; border: 1px solid var(--cmsr-line); border-radius: var(--cmsr-r); background: var(--cmsr-soft);
}
.cmsr-grid .cmsr-card-body { flex: 1; }
.cmsr-grid .cmsr-product-link, .cmsr-carousel .cmsr-product-link { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--cmsr-line); }
.cmsr-card--compact { flex-direction: row; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--cmsr-line); }
.cmsr-rows > .cmsr-card--compact:last-child { border-bottom: 0; }
.cmsr-rows { display: grid; column-gap: 32px; grid-template-columns: repeat(var(--cmsr-cols, 1), minmax(0, 1fr)); }

/* testimonials */
.cmsr-card--testimonial { text-align: left; }
.cmsr-grid > .cmsr-card--testimonial { padding: 26px 24px; }
.cmsr-card--testimonial .cmsr-text blockquote { font-size: 1.08em; line-height: 1.6; position: relative; padding-top: 30px; }
.cmsr-card--testimonial .cmsr-text blockquote::before { content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 22px; background: var(--cmsr-line-strong); -webkit-mask: var(--cmsr-quote) left top/contain no-repeat; mask: var(--cmsr-quote) left top/contain no-repeat; }
.cmsr-card--testimonial .cmsr-author { margin-top: auto; padding-top: 6px; }

/* photo cards */
.cmsr-card--photo { padding: 0 !important; overflow: hidden; }
.cmsr-card--photo .cmsr-card-body { padding: 16px 18px 18px; }
.cmsr-card-media { display: block; width: 100%; aspect-ratio: var(--cmsr-ar, 4 / 3); padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: var(--cmsr-soft-2); }
.cmsr-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.cmsr-card-media:hover img { transform: scale(1.04); }

/* carousel */
.cmsr-carousel { position: relative; }
.cmsr-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cmsr-cols, 3) - 1) * 18px) / var(--cmsr-cols, 3)); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.cmsr-track::-webkit-scrollbar { display: none; }
.cmsr-track > * { scroll-snap-align: start; }
.cmsr-car-nav { display: flex; gap: 8px; }
.cmsr-car-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cmsr-line-strong); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: inherit; }
.cmsr-car-nav button::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--cmsr-chev) center/contain no-repeat; mask: var(--cmsr-chev) center/contain no-repeat; }
.cmsr-car-nav button:first-child::before { transform: scaleX(-1); }
.cmsr-car-nav button:hover { background: var(--cmsr-soft-2); }
.cmsr-car-nav button:disabled { opacity: .35; cursor: default; }

/* photo gallery */
.cmsr-gallery { display: grid; gap: 10px; grid-template-columns: repeat(var(--cmsr-cols, 4), minmax(0, 1fr)); }
.cmsr-gallery .cmsr-ph { width: 100%; height: auto; aspect-ratio: var(--cmsr-ar, 1); border-radius: var(--cmsr-r); }
.cmsr-gallery .cmsr-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)); opacity: 0; transition: opacity .2s; }
.cmsr-gallery .cmsr-ph:hover::after { opacity: 1; }
.cmsr-gallery .cmsr-ph .cmsr-stars { position: absolute; left: 10px; bottom: 10px; z-index: 1; --cmsr-star-off: rgba(255,255,255,.4); opacity: 0; transition: opacity .2s; }
.cmsr-gallery .cmsr-ph:hover .cmsr-stars, .cmsr-gallery .cmsr-ph:focus-visible .cmsr-stars { opacity: 1; }

/* rating summary block */
.cmsr-sumblock { display: grid; grid-template-columns: max-content minmax(240px, 420px); gap: 24px 56px; align-items: center; justify-content: start; width: fit-content; max-width: 100%; padding: 26px 28px; border: 1px solid var(--cmsr-line); border-radius: var(--cmsr-r); background: var(--cmsr-soft); }
.cmsr-sumblock + * { margin-top: 22px; }
.cmsr-block--center .cmsr-sumblock { justify-content: center; margin-inline: auto; }
.cmsr-sumblock .cmsr-summary { display: contents; }

.cmsr-block-more { display: flex; justify-content: center; margin-top: 22px; }
.cmsr-block-foot { display: flex; justify-content: center; margin-top: 18px; }

/* ── Narrow screens ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .cmsr-overview.has-photos { grid-template-columns: max-content minmax(0, 1fr); }
  .cmsr-overview.has-photos .cmsr-strip { grid-column: 1 / -1; }
  .cmsr-grid, .cmsr-gallery { grid-template-columns: repeat(min(var(--cmsr-cols, 3), 2), minmax(0, 1fr)); }
  .cmsr-track { grid-auto-columns: calc((100% - 18px) / 2); }
  .cmsr-rows { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cmsr-head { margin-bottom: 16px; }
  .cmsr-head .cmsr-btn { flex: 1 1 100%; }
  .cmsr-overview, .cmsr-overview.has-photos, .cmsr-sumblock { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 18px; }
  .cmsr-grid { grid-template-columns: minmax(0, 1fr); }
  .cmsr-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cmsr-track { grid-auto-columns: 86%; }
  .cmsr-ph { width: 76px; height: 76px; }
  .cmsr-lb-stage { padding: 6px 8px; }
  .cmsr-lb-nav { top: auto; bottom: 8px; transform: none; width: 44px; height: 44px; background: rgba(0,0,0,.5); }
  .cmsr-form-foot .cmsr-btn--primary { flex: 1 1 auto; }
  .cmsr-grid > .cmsr-card, .cmsr-carousel .cmsr-card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cmsr *, .cmsr *::before, .cmsr *::after { animation: none !important; transition: none !important; }
}