/* ——— Блок «Відгуки» на сторінці товару. Числа 1:1 з Product.html ———
   Розмітку друкує mu-plugin fp-kit-04.php. Штатний блок відгуків
   WooCommerce прихований: заміна, а не нашарування. */

body.fp.single-product #tab-reviews,
body.fp.single-product .woocommerce-Reviews { display: none !important; }

body.fp .fp-rev {
  max-width: 1330px; width: 100%; margin: 32px auto 0; box-sizing: border-box;
  padding: 0 24px; display: flex; flex-direction: column; gap: 16px;
}
body.fp .fp-rev-h { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--ink, #1b1f24); }
body.fp .fp-rev-h span { font-size: 15px; font-weight: 500; color: var(--muted, #666); }

/* зведення: сіра картка 20/24, радіус 12, зазор 32 */
body.fp .fp-rev-sum {
  display: flex; align-items: center; gap: 32px; padding: 20px 24px;
  background: var(--surface-100, #f9f9f9); border-radius: var(--radius-lg, 12px); flex-wrap: wrap;
}
body.fp .fp-rev-sum-l { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
body.fp .fp-rev-avg { font-size: 44px; font-weight: 700; line-height: 1; color: var(--ink, #1b1f24); }
body.fp .fp-rev-meta { font-size: 12px; color: var(--muted, #666); }

/* зірки — єдине місце, де в макетах лишається золото */
body.fp .fp-rev-stars { color: var(--rating, #c9a24b); font-size: 16px; letter-spacing: 1px; white-space: nowrap; }
body.fp .fp-rev-stars span { color: var(--border-strong, #d5d5d5); }

/* чипи джерел: 24 px, радіус 12, 11/700 */
body.fp .fp-rev-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
body.fp .fp-rev-chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
  border: 1px solid var(--border, #e1e1e1); border-radius: 12px;
  font-size: 11px; font-weight: 700; color: var(--text, #555) !important; background: #fff;
}
body.fp .fp-rev-chip.is-on {
  border-color: var(--brand-blue-deep, #1b6e9b); color: var(--ink, #1b1f24) !important;
  background: var(--surface-100, #f9f9f9);
}

/* розподіл: 14px | смуга | 20px, смуга 6 px */
body.fp .fp-rev-sum-r { flex: 1; display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 220px; }
body.fp .fp-rev-row { display: grid; grid-template-columns: 14px 1fr 20px; gap: 8px; align-items: center; font-size: 12px; color: var(--muted, #666); }
body.fp .fp-rev-row > span:last-child { text-align: right; }
body.fp .fp-rev-bar { height: 6px; background: var(--surface-200, #f2f2f2); border-radius: 3px; overflow: hidden; }
body.fp .fp-rev-bar > span { display: block; height: 100%; background: var(--rating, #c9a24b); }

/* сітка відгуків: 3 колонки, зазор 20 */
body.fp .fp-rev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body.fp .fp-rev-item {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px;
  border: 1px solid var(--border, #e1e1e1); background: #fff;
}
body.fp .fp-rev-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; }
body.fp .fp-rev-name { font-size: 14px; font-weight: 700; color: var(--ink, #1b1f24); }
body.fp .fp-rev-date { font-size: 12px; color: var(--muted, #666); }
body.fp .fp-rev-item .fp-rev-stars { font-size: 14px; }
body.fp .fp-rev-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--success, #008000);
}
body.fp .fp-rev-badge > span {
  width: 14px; height: 14px; border-radius: 7px; background: var(--success, #008000);
  color: #fff; font-size: 9px; display: inline-flex; align-items: center; justify-content: center;
}
body.fp .fp-rev-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text, #555); }

@media (max-width: 767px) {
  body.fp .fp-rev { padding: 0 16px; }
  body.fp .fp-rev-grid { grid-template-columns: 1fr; gap: 12px; }
  body.fp .fp-rev-sum { gap: 16px; padding: 16px; }
}


/* кнопка «Залишити відгук» і перенесена сюди рідна форма WooCommerce */
body.fp .fp-rev-add { display: flex; flex-direction: column; gap: 16px; }
body.fp .fp-rev-add-btn {
  align-self: flex-start; min-height: 44px; padding: 0 22px;
  background: #fff; color: #222; border: 1px solid #222;
  border-radius: var(--radius-sm, 3px); font-size: 14px; font-weight: 700; cursor: pointer;
}
body.fp .fp-rev-add-btn:hover { background: #222; color: #fff; }
body.fp .fp-rev-form[hidden] { display: none; }
body.fp .fp-rev-form { border: 1px solid var(--border, #e1e1e1); padding: 20px 24px; background: #fff; }
body.fp .fp-rev-form input[type="text"],
body.fp .fp-rev-form input[type="email"],
body.fp .fp-rev-form textarea {
  box-sizing: border-box; width: 100%; border: 1px solid var(--border, #e1e1e1);
  border-radius: 0; padding: 0 14px; font-size: 14px; color: #222;
}
body.fp .fp-rev-form input[type="text"],
body.fp .fp-rev-form input[type="email"] { height: 44px; }
body.fp .fp-rev-form textarea { padding: 10px 14px; min-height: 110px; }
body.fp .fp-rev-form .submit {
  min-height: 48px; padding: 0 28px; background: #000; color: #fff; border: 0;
  border-radius: var(--radius-md, 5px); font-size: 15px; font-weight: 700; cursor: pointer;
}


/* блок відгуків опинився всередині сітки опису — на всю ширину і без
   власного контейнера, бо контейнер уже дає .fp-pt */
body.fp .fp-pt > .fp-rev { grid-column: 1 / -1; max-width: none; padding: 0; margin: 0; }