.product-reviews-summary__all,
.product-questions__all {
  width: 100%;
  padding: 0;
  background: #fff;
  font-family: Roboto, sans-serif;
  cursor: pointer;
}

.reviews-modal,
.questions-modal {
  width: min(94vw, 1020px);
  max-width: none;
  max-height: 90vh;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 100px rgb(0 0 0 / 38%);
}

.reviews-modal::backdrop,
.questions-modal::backdrop {
  background: rgb(15 18 24 / 70%);
  backdrop-filter: blur(5px);
}

.reviews-modal__shell,
.questions-modal__shell { overflow: hidden; border-radius: inherit; }

.reviews-modal__header,
.questions-modal__header {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  border-bottom: 1px solid #e9ebef;
  background: linear-gradient(135deg, #fff 55%, #fff3f4);
}

.reviews-modal__header small,
.questions-modal__header small {
  display: block;
  margin-bottom: 4px;
  color: #8b9098;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.reviews-modal__header h2,
.questions-modal__header h2 { margin: 0; color: #20242a; font-size: 23px; }

.reviews-modal__header > button,
.questions-modal__header > button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid #dfe2e7;
  border-radius: 50%;
  background: #fff;
  color: #24282e;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.reviews-modal__body {
  display: grid;
  overflow: hidden;
  max-height: calc(90vh - 78px);
  grid-template-columns: 270px minmax(0, 1fr);
}

.reviews-modal__summary { padding: 26px 22px; border-right: 1px solid #e8eaed; background: #fafbfc; }
.reviews-modal__rating { display: flex; align-items: center; flex-direction: column; padding-bottom: 22px; border-bottom: 1px solid #e5e7eb; }
.reviews-modal__rating strong { font-size: 50px; line-height: 1; }
.reviews-modal__rating span { margin: 10px 0 5px; color: #ffac00; font-size: 19px; letter-spacing: 2px; }
.reviews-modal__rating small { color: #7c828b; font-size: 12px; }
.reviews-modal__distribution { display: grid; gap: 10px; margin-top: 22px; }
.reviews-modal__distribution > div { display: grid; grid-template-columns: 34px 1fr 32px; align-items: center; gap: 8px; }
.reviews-modal__distribution b,
.reviews-modal__distribution small { font-size: 11px; font-weight: 600; }
.reviews-modal__distribution i { overflow: hidden; height: 7px; border-radius: 10px; background: #e4e6e9; }
.reviews-modal__distribution i span { display: block; height: 100%; border-radius: inherit; background: #ffad00; }
.reviews-modal__highlights { display: grid; gap: 9px; margin-top: 24px; }
.reviews-modal__highlights span { padding: 10px; border-radius: 8px; background: #edf8f0; color: #267541; font-size: 11px; font-weight: 600; }
.reviews-modal__content { display: flex; min-width: 0; flex-direction: column; }
.reviews-modal__toolbar { display: flex; min-height: 65px; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #eceef1; }
.reviews-modal__toolbar > strong { font-size: 14px; }
.reviews-modal__toolbar > div { display: flex; gap: 7px; }
.reviews-modal__toolbar button,
.reviews-modal__list footer button { border: 1px solid #dfe2e6; background: #fff; color: #555b64; font: 600 11px Roboto, sans-serif; cursor: pointer; }
.reviews-modal__toolbar button { height: 34px; padding: 0 12px; border-radius: 18px; }
.reviews-modal__toolbar button.is-active { border-color: #f3b5bc; background: #fff2f3; color: var(--brand-red); }
.reviews-modal__list { overflow-y: auto; padding: 0 22px 24px; }
.reviews-modal__list article { padding: 20px 0; border-bottom: 1px solid #eceef1; }
.reviews-modal__list article > header { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; }
.reviews-modal__list article > header > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: #eef3f8; color: #526477; font-size: 10px; font-weight: 800; }
.reviews-modal__list article > header div { display: flex; flex-direction: column; }
.reviews-modal__list article > header b { font-size: 13px; }
.reviews-modal__list article > header small { margin-top: 2px; color: #23964a; font-size: 10px; }
.reviews-modal__list time { color: #969ca5; font-size: 10px; }
.reviews-modal__stars { margin-top: 13px; color: #ffa900; font-size: 14px; letter-spacing: 1px; }
.reviews-modal__list h3 { margin: 8px 0 5px; color: #282d34; font-size: 14px; }
.reviews-modal__list p { margin: 0; color: #555c66; font-size: 12px; line-height: 1.65; }
.reviews-modal__list footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.reviews-modal__list footer > span { color: #8b9199; font-size: 10px; }
.reviews-modal__list footer button { padding: 6px 10px; border-radius: 16px; font-size: 10px; }
.reviews-modal__list footer button.is-active { border-color: #b9e3c5; background: #edf9f1; color: #208642; }

.questions-modal { width: min(94vw, 920px); }
.questions-modal__body { overflow-y: auto; max-height: calc(90vh - 78px); padding: 22px 25px 28px; }
.questions-modal__intro { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border: 1px solid #f2d6d9; border-radius: 12px; background: #fff6f7; }
.questions-modal__intro div { display: flex; flex-direction: column; gap: 4px; }
.questions-modal__intro strong { font-size: 14px; }
.questions-modal__intro span { color: #7a8088; font-size: 11px; }
.questions-modal__intro button { height: 38px; padding: 0 17px; border: 0; border-radius: 8px; background: var(--brand-red); color: #fff; font: 700 11px Roboto, sans-serif; cursor: pointer; }
.questions-modal__search { display: flex; height: 46px; align-items: center; gap: 10px; margin-top: 16px; padding: 0 14px; border: 1px solid #dfe2e7; border-radius: 10px; }
.questions-modal__search:focus-within { border-color: #ed8994; box-shadow: 0 0 0 3px rgb(237 0 23 / 8%); }
.questions-modal__search span { color: #777; font-size: 22px; }
.questions-modal__search input { min-width: 0; flex: 1; border: 0; outline: 0; font: 12px Roboto, sans-serif; }
.questions-modal__topics { display: flex; overflow-x: auto; align-items: center; gap: 7px; padding: 14px 0 4px; }
.questions-modal__topics span { margin-right: 3px; color: #6b7179; font-size: 11px; font-weight: 700; white-space: nowrap; }
.questions-modal__topics button { height: 30px; padding: 0 11px; border: 1px solid #e0e3e7; border-radius: 16px; background: #fff; color: #59606a; font: 600 10px Roboto, sans-serif; white-space: nowrap; cursor: pointer; }
.questions-modal__list article { padding: 19px 2px; border-bottom: 1px solid #eaecf0; }
.questions-modal__list article > header { display: flex; align-items: center; justify-content: space-between; }
.questions-modal__list article > header span { padding: 4px 8px; border-radius: 5px; background: #fff0f1; color: var(--brand-red); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.questions-modal__list time { color: #9aa0a8; font-size: 10px; }
.questions-modal__list h3 { margin: 10px 0; color: #292e35; font-size: 14px; }
.questions-modal__list article > div { position: relative; margin-left: 16px; padding: 13px 15px; border-radius: 0 10px 10px 10px; background: #f6f8fa; }
.questions-modal__list article > div::before { position: absolute; top: 0; left: -8px; border-top: 8px solid #f6f8fa; border-left: 8px solid transparent; content: ""; }
.questions-modal__list article > div b { color: #2b8248; font-size: 10px; }
.questions-modal__list article > div p { margin: 5px 0; color: #535a64; font-size: 12px; line-height: 1.6; }
.questions-modal__list article > div small { color: #8d939c; font-size: 9px; }
.questions-modal__empty { margin: 35px 0; padding: 25px; border-radius: 12px; background: #f7f8fa; color: #777e87; font-size: 13px; text-align: center; }
body.is-feedback-modal-open { overflow: hidden; }

@media (max-width: 767.98px) {
  .reviews-modal,
  .questions-modal { width: 95vw; max-height: 92vh; border-radius: 14px; }
  .reviews-modal__header,
  .questions-modal__header { min-height: 68px; padding: 0 16px; }
  .reviews-modal__header h2,
  .questions-modal__header h2 { font-size: 19px; }
  .reviews-modal__header small,
  .questions-modal__header small { font-size: 9px; }
  .reviews-modal__body { display: block; overflow-y: auto; max-height: calc(92vh - 68px); }
  .reviews-modal__summary { padding: 18px; border-right: 0; border-bottom: 1px solid #e8eaed; }
  .reviews-modal__rating { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 15px; align-items: center; padding-bottom: 16px; }
  .reviews-modal__rating strong { grid-row: 1 / 3; font-size: 42px; }
  .reviews-modal__rating span { margin: 0; font-size: 16px; }
  .reviews-modal__rating small { font-size: 10px; }
  .reviews-modal__distribution,
  .reviews-modal__highlights { display: none; }
  .reviews-modal__toolbar { min-height: 90px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 9px; padding: 12px 16px; }
  .reviews-modal__toolbar > div { overflow-x: auto; width: 100%; }
  .reviews-modal__toolbar button { flex: 0 0 auto; }
  .reviews-modal__list { overflow: visible; padding: 0 16px 18px; }
  .reviews-modal__list article > header { grid-template-columns: 34px 1fr; }
  .reviews-modal__list article > header > span { width: 34px; height: 34px; }
  .reviews-modal__list time { grid-column: 2; }
  .reviews-modal__list footer { align-items: flex-start; gap: 10px; }
  .questions-modal__body { max-height: calc(92vh - 68px); padding: 16px; }
  .questions-modal__intro { align-items: flex-start; flex-direction: column; gap: 12px; }
  .questions-modal__intro button { width: 100%; }
}