/* Clickit product reviews — uses the Clickit V2 design tokens, with fallbacks for other themes. RTL-first. */
.ck-rv {
  --rv-ink: var(--ck-ink, #2b2927);
  --rv-muted: var(--ck-muted, #6e6964);
  --rv-surface: var(--ck-surface, #f2ede4);
  --rv-white: var(--ck-white, #fff);
  --rv-divider: var(--ck-divider, rgba(43, 41, 39, 0.14));
  --rv-star: var(--ck-ink, #2b2927);
  --rv-ok: var(--ck-blue-700, #0c5e8a);
  --rv-ok-bg: var(--ck-blue-100, #e1f1fb);
  --rv-err: var(--ck-red-700, #a3251a);
  --rv-err-bg: var(--ck-red-100, #fde4df);
  --rv-r: var(--ck-r-lg, 8px);
  padding-block: 24px 96px;
  scroll-margin-top: var(--ck-header-offset, 80px);
}
.ck-rv .screen-reader-text,
.ck-rv__stars-row input {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.ck-rv__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-block-end: 24px;
}
.ck-rv__head h2 { margin: 0; }
.ck-rv__layout {
  display: grid;
  gap: 32px;
}
@media (min-width: 900px) {
  .ck-rv__layout:has(.ck-rv__summary) { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
}
.ck-rv__summary { display: grid; gap: 12px; align-content: start; }
.ck-rv__avg { display: grid; gap: 6px; margin: 0; }
.ck-rv__avg-num { font-size: 44px; font-weight: 700; line-height: 1; color: var(--rv-ink); }
.ck-rv__avg-text, .ck-rv__verified-count { font-size: 14px; color: var(--rv-muted); margin: 0; }

.ck-rv-stars { display: inline-flex; gap: 2px; color: var(--rv-star); vertical-align: middle; }
.ck-rv-star path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ck-rv-star--full path { fill: currentColor; }
.ck-rv-star--half path { fill: currentColor; fill-opacity: 0.45; }

.ck-rv__dist { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.ck-rv__dist-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: var(--ck-r-md, 6px);
  color: var(--rv-ink);
  font-size: 14px;
  text-decoration: none;
}
a.ck-rv__dist-row:hover, a.ck-rv__dist-row:focus-visible { background: var(--rv-surface); }
.ck-rv__dist-row.is-active { background: var(--rv-surface); font-weight: 700; }
.ck-rv__dist-row.is-empty { color: var(--rv-muted); }
.ck-rv__bar { block-size: 8px; border-radius: 999px; background: var(--rv-surface); overflow: hidden; }
.ck-rv__bar > span { display: block; block-size: 100%; background: var(--rv-ink); border-radius: inherit; }
.ck-rv__dist-n { text-align: end; color: var(--rv-muted); font-variant-numeric: tabular-nums; }

.ck-rv__tools { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; margin-block-end: 20px; }
.ck-rv__tools label { display: grid; gap: 4px; font-size: 13px; color: var(--rv-muted); }
.ck-rv__tools select {
  min-block-size: 40px;
  padding: 6px 12px;
  border: 1px solid var(--rv-divider);
  border-radius: var(--ck-r-md, 6px);
  background: var(--rv-white);
  color: var(--rv-ink);
  font: inherit;
  font-size: 15px;
}
.ck-rv.is-enhanced .ck-rv__apply { display: none; }

.ck-rv__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ck-rv__card { background: var(--rv-surface); border-radius: var(--rv-r); padding: 18px 20px; scroll-margin-top: var(--ck-header-offset, 80px); }
.ck-rv__card article { display: grid; gap: 10px; }
.ck-rv__card-head { display: grid; gap: 6px; }
.ck-rv__rating { margin: 0; }
.ck-rv__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--rv-ink); }
.ck-rv__body { font-size: 15px; line-height: 1.6; color: var(--ck-text-2, #5a5550); overflow-wrap: anywhere; }
.ck-rv__body p { margin: 0 0 8px; }
.ck-rv__body p:last-child { margin: 0; }
.ck-rv__photos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ck-rv__photos a { display: block; inline-size: 84px; block-size: 84px; border-radius: var(--ck-r-md, 6px); overflow: hidden; background: var(--ck-img-empty-2, #e4ddd2); }
.ck-rv__photos img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.ck-rv__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--rv-muted); }
.ck-rv__who { color: var(--rv-ink); font-weight: 600; }
.ck-rv__badge { display: inline-flex; align-items: center; gap: 4px; color: var(--rv-ok); font-weight: 600; }
.ck-rv__badge svg { fill: currentColor; }
.ck-rv__reply { border-inline-start: 3px solid var(--rv-ink); padding: 8px 14px; background: var(--rv-white); border-radius: var(--ck-r-md, 6px); font-size: 14px; }
.ck-rv__reply p { margin: 0 0 6px; }
.ck-rv__reply p:last-child { margin: 0; }
.ck-rv__reply-who { font-weight: 700; color: var(--rv-ink); }

.ck-rv__pages { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 20px; }
.ck-rv__pages a, .ck-rv__pages span {
  min-inline-size: 40px; min-block-size: 40px; display: inline-grid; place-items: center;
  border-radius: var(--ck-r-md, 6px); border: 1px solid var(--rv-divider); color: var(--rv-ink); text-decoration: none; font-size: 15px;
}
.ck-rv__pages span[aria-current] { background: var(--rv-ink); color: var(--rv-white); border-color: var(--rv-ink); }
.ck-rv__empty { color: var(--rv-muted); }

.ck-rv__notice { padding: 12px 16px; border-radius: var(--ck-r-md, 6px); font-size: 15px; margin: 0 0 16px; }
.ck-rv__notice--ok { background: var(--rv-ok-bg); color: var(--rv-ok); }
.ck-rv__notice--error { background: var(--rv-err-bg); color: var(--rv-err); }

.ck-rv__write { margin-block-start: 32px; border-top: var(--ck-rule, 2px solid var(--rv-divider)); padding-block-start: 20px; scroll-margin-top: var(--ck-header-offset, 80px); }
.ck-rv__write-summary { cursor: pointer; list-style: none; font-size: 19px; font-weight: 700; color: var(--rv-ink); display: flex; align-items: center; gap: 10px; }
.ck-rv__write-summary::-webkit-details-marker { display: none; }
.ck-rv__write-summary::after { content: "+"; font-weight: 400; font-size: 24px; line-height: 1; }
.ck-rv__write[open] > .ck-rv__write-summary::after { content: "–"; }
.ck-rv__write-body { padding-block: 16px 0; max-inline-size: 680px; }
.ck-rv__form { display: grid; gap: 16px; }
.ck-rv__field { display: grid; gap: 6px; margin: 0; }
.ck-rv__field label, .ck-rv__stars-input legend { font-size: 15px; font-weight: 600; color: var(--rv-ink); }
.ck-rv__field input[type="text"], .ck-rv__field input[type="email"], .ck-rv__field textarea {
  inline-size: 100%;
  box-sizing: border-box;
  min-block-size: 46px;
  padding: 10px 14px;
  border: 1px solid var(--ck-divider-hover, rgba(43, 41, 39, 0.4));
  border-radius: var(--ck-r-md, 6px);
  background: var(--rv-white);
  color: var(--rv-ink);
  font: inherit;
  font-size: 16px; /* No iOS zoom on focus. */
}
.ck-rv__field textarea { min-block-size: 130px; resize: vertical; }
.ck-rv__field input:focus-visible, .ck-rv__field textarea:focus-visible, .ck-rv__tools select:focus-visible { outline: 2px solid var(--ck-blue, #4fb3e8); outline-offset: 1px; }
.ck-rv__row { display: grid; gap: 16px; }
@media (min-width: 600px) { .ck-rv__row { grid-template-columns: 1fr 1fr; } .ck-rv__row .ck-rv__field--end { align-self: end; } }
.ck-rv__help { font-size: 13px; color: var(--rv-muted); margin: 0; }
.ck-rv__req { color: var(--rv-err); }
.ck-rv__hp { position: absolute !important; inset-inline-start: -9999px; block-size: 1px; overflow: hidden; }

/* Star selector: DOM order 5→1, shown 1→5 from the right in RTL. */
.ck-rv__stars-input { border: 0; padding: 0; margin: 0; }
.ck-rv__stars-row { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
[dir="ltr"] .ck-rv__stars-row { flex-direction: row-reverse; }
.ck-rv__stars-row label { cursor: pointer; color: var(--rv-star); padding: 4px; border-radius: var(--ck-r-sm, 4px); line-height: 0; }
.ck-rv__stars-row label path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; transition: fill 0.12s; }
.ck-rv__stars-row input:checked ~ label path,
.ck-rv__stars-row label:hover path,
.ck-rv__stars-row label:hover ~ label path { fill: currentColor; }
.ck-rv__stars-row:hover input:checked ~ label:not(:hover):not(:hover ~ label) path { fill: none; }
.ck-rv__stars-row input:focus-visible + label { outline: 2px solid var(--ck-blue, #4fb3e8); outline-offset: 1px; }

.ck-rv__check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--rv-ink); line-height: 1.5; cursor: pointer; }
.ck-rv__check input { inline-size: 20px; block-size: 20px; margin: 1px 0 0; flex: none; accent-color: var(--rv-ink); }
.ck-rv__photos-input input[type="file"] { font-size: 14px; max-inline-size: 100%; }
.ck-rv__preview { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ck-rv__preview:empty { display: none; }
.ck-rv__preview img { inline-size: 72px; block-size: 72px; object-fit: cover; border-radius: var(--ck-r-md, 6px); display: block; }
.ck-rv__photo-error { color: var(--rv-err); font-size: 13px; }
.ck-rv__photo-error:empty { display: none; }

.ck-rv__verify { margin-block-start: 24px; background: var(--rv-surface); border-radius: var(--rv-r); padding: 14px 18px; }
.ck-rv__verify > summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.ck-rv__verify form { margin-block: 14px 8px; }

@media (max-width: 599px) {
  .ck-rv { padding-block: 16px 64px; }
  .ck-rv__card { padding: 14px 16px; }
  .ck-rv__avg-num { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-rv__stars-row label path { transition: none; }
}
.ck-rv__field .ck-rv__check span { font-weight: 400; font-size: 14px; }