/* ==========================================================================
   Korjin — <korjin-reviews>. The review-app surface (Judge.me / Yotpo class).
   Ported from source css/pages/reviews.css. Tokens only (see tokens.css).
   Deferred to a Shopline review app; this renders the sample-demo surface so
   the page below it (xsell / footer) keeps its source geometry. The sort and
   live data are the app's job (see interactions.md dyn-001).
   ========================================================================== */

korjin-reviews {
  display: block;
}

/* The source relies on the browser's UA default list padding
   (padding-inline-start: 40px) for these <ul>s — its base.css never resets it,
   so the cards/rows carry a 40px start inset that drives their line-wrapping
   (and therefore the module's height, which sets xsell/footer geometry). This
   theme's base.css zeroes ul padding globally, so restore it here to match. */
.rv__list,
.rv__card-attrs,
.rv__dist,
.rv__attrs,
.rv__photos {
  padding-inline-start: 40px;
}

/* ---- the standing prototype banner ---------------------------------------- */

.rv__banner {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--gold-line);
  color: var(--gold-text);
  font-size: var(--label-xs);
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-transform: none;
}

.rv__banner-tag {
  padding: 0.15em 0.5em;
  background: var(--gold-line);
  color: var(--korjin-black);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}

.rv__head {
  margin-bottom: var(--sp-6);
}

.rv__head .title-lg {
  margin-top: var(--sp-3);
}

/* ---- stars ---------------------------------------------------------------- */

.rv-stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  white-space: nowrap;
}

.rv-stars__track,
.rv-stars__fill {
  display: flex;
}

.rv-stars svg {
  display: block;
  flex: none;
}

.rv-stars__track svg {
  fill: var(--rule-strong);
}

.rv-stars__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: var(--rv-fill, 0%);
}

.rv-stars__fill svg {
  fill: var(--gold-line);
}

/* ---- summary -------------------------------------------------------------- */

.rv__summary {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  gap: var(--sp-7);
  align-items: start;
  padding-block: var(--sp-6);
  border-block: 1px solid var(--rule);
}

.rv__score {
  text-align: center;
}

.rv__avg {
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.rv__score .small {
  margin-top: var(--sp-2);
}

.rv__dist,
.rv__attrs {
  list-style: none;
  display: grid;
  gap: var(--sp-2);
}

.rv__dist-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr 2rem;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 28px;
  text-align: left;
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.rv__dist-row:hover,
.rv__dist-row[aria-pressed="true"] {
  color: var(--ink);
}

.rv__bar {
  display: block;
  height: 6px;
  background: var(--ground-sunken);
  overflow: hidden;
}

.rv__bar-fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--gold-line);
}

.rv__dist-row[aria-pressed="true"] .rv__bar-fill {
  background: var(--accent-text);
}

.rv__attr {
  display: grid;
  grid-template-columns: 4.5rem 1fr 2rem;
  align-items: center;
  gap: var(--sp-3);
}

.rv__meter {
  position: relative;
  display: block;
  height: 1px;
  background: var(--rule-strong);
}

.rv__meter-dot {
  position: absolute;
  top: 50%;
  left: var(--p, 50%);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--gold-line);
}

.rv__write {
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
}

/* ---- write form ----------------------------------------------------------- */

.rv__form:not([hidden]) {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--ground-sunken);
}

.rv__form-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.rv__pick {
  display: flex;
  gap: var(--sp-1);
}

.rv__pick-star {
  padding: var(--sp-1);
  line-height: 0;
}

.rv__pick-star svg {
  fill: var(--rule-strong);
}

.rv__pick-star.is-on svg {
  fill: var(--gold-line);
}

.rv__form-cta {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

/* ---- controls ------------------------------------------------------------- */

.rv__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding-block: var(--sp-5);
}

.rv__chips {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.rv__chip {
  min-height: 32px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--rule);
  color: var(--ink-muted);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.rv__chip:hover {
  border-color: var(--rule-strong);
  color: var(--ink);
}

.rv__chip[aria-pressed="true"] {
  border-color: var(--accent-text);
  color: var(--accent-text);
}

.rv__sort {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-muted);
}

.rv__sort .field {
  min-height: 36px;
  padding-inline: var(--sp-3);
  /* The inline sort control is a flex row, not a stacked form field: drop the
     platform's default block-field bottom margin (20px desktop / 16px mobile),
     which otherwise inflates the control's cross-size and pushes xsell/footer
     down past their targets. */
  margin-block: 0;
}

/* ---- list ----------------------------------------------------------------- */

.rv__list {
  list-style: none;
  display: grid;
  gap: var(--sp-6);
}

.rv__card {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--rule);
}

.rv__card-top {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.rv__chip-sample {
  padding: 0.15em 0.5em;
  border: 1px solid var(--gold-line);
  color: var(--gold-text);
  font-size: var(--label-xs);
}

.rv__card-body {
  max-width: var(--measure);
}

.rv__photos {
  list-style: none;
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.rv__photos img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  background: var(--ground-sunken);
}

.rv__card-attrs {
  list-style: none;
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.rv__meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.rv__verified {
  color: var(--gold-text);
}

.rv__reply {
  margin-top: var(--sp-2);
  padding: var(--sp-4);
  border-left: 2px solid var(--gold-line);
  background: var(--ground-sunken);
  display: grid;
  gap: var(--sp-2);
}

.rv__helpful {
  justify-self: start;
  min-height: 32px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--rule);
  color: var(--ink-muted);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.rv__helpful:hover {
  border-color: var(--rule-strong);
  color: var(--ink);
}

.rv__helpful[aria-pressed="true"] {
  border-color: var(--gold-line);
  color: var(--gold-text);
}

.rv__more {
  margin-top: var(--sp-6);
}

.rv__none {
  padding-block: var(--sp-6);
}

/* The buy-box rating line. */
.pdp__reviews .rv-stars {
  margin-right: var(--sp-1);
  vertical-align: -0.15em;
}

.pdp__reviews .rv__chip-sample {
  margin-left: var(--sp-2);
}

/* ---- demo toggle (prototype-only) ----------------------------------------- */

.rv__demo {
  margin-top: var(--sp-7);
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.2rem;
  min-height: 44px;
}

.rv__demo:hover {
  color: var(--ink);
  border-color: var(--rule-strong);
}

/* ---- responsive ------------------------------------------------------------ */

@media (max-width: 1100px) {
  .rv__summary {
    grid-template-columns: auto 1fr;
    row-gap: var(--sp-6);
  }

  .rv__write {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .rv__summary {
    grid-template-columns: 1fr;
  }

  .rv__score {
    text-align: left;
  }

  .rv__controls {
    align-items: flex-start;
    flex-direction: column;
  }
}