.hotel-ratings {
  width: 100%;
  box-sizing: border-box;
  margin: .875rem 0 1rem;
  padding: .875rem 0 .45rem;
  border-block: 1px solid #dfe7e3;
  color: #17383c;
  font-size: .8125rem;
  line-height: 1.4;
  text-align: left;
}
.hotel-ratings-values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem 1.4rem;
}
.hotel-class { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.hotel-class > span:last-child { display: flex; flex-direction: column; }
/* The star count is available to assistive technology without repeating 5/5 visually. */
.hotel-class strong {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hotel-ratings small { display: block; color: #586c6d; font-size: .71875rem; font-weight: 400; }
.hotel-ratings .hotel-ratings-property { margin-bottom: .7rem; color: #36575b; font-size: .75rem; font-weight: 600; }
.hotel-stars { position: relative; display: inline-block; font-size: 1.0625rem; letter-spacing: .1em; line-height: 1; white-space: nowrap; }
.hotel-stars > span:first-child { color: #dce2df; }
.hotel-stars > span:last-child { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #946522; }
.hotel-guest-rating { display: flex; align-items: center; gap: .6rem; }
.hotel-guest-rating > span { display: flex; flex-direction: column; gap: .15rem; font-size: .75rem; font-weight: 650; }
.hotel-guest-score {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .1rem;
  min-width: 3.2rem;
  padding: .65rem .55rem;
  background: #245b62;
  border-radius: .5rem .5rem .5rem .12rem;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.hotel-guest-score small { color: #e4eeee; font-size: .625rem; font-weight: 500; letter-spacing: 0; }
.hotel-ratings-source { margin-top: .35rem; max-width: 36rem; color: #586c6d; font-size: .6875rem; }
.hotel-ratings-source > summary { display: list-item; min-height: 24px; box-sizing: border-box; padding: .3rem 0; cursor: pointer; color: inherit; font: inherit; }
.hotel-ratings-source > summary:hover { color: #17383c; }
.hotel-ratings-source > summary:focus-visible { outline: 2px solid #245b62; outline-offset: 3px; border-radius: .15rem; }
.hotel-ratings-source > p { margin: .2rem 0 .4rem; color: #36575b; font: inherit; line-height: 1.6; }
.lodging-detail-heading .hotel-ratings { grid-column: 1; }
.lodging-detail-hero .hotel-ratings { width: fit-content; max-width: 100%; }
.rank-compare-item .hotel-ratings, .buy-compare-row .hotel-ratings { padding-top: .65rem; font-size: .75rem; }
.rank-compare-item .hotel-ratings-values, .buy-compare-row .hotel-ratings-values { gap: .65rem 1rem; }
@media (max-width: 479px) {
  .hotel-ratings-values { gap: .75rem 1.1rem; }
  .hotel-guest-score { min-width: 3rem; padding: .6rem .45rem; }
  .hotel-guest-rating { gap: .5rem; }
}