/* Shared customer reviews, designed for phone screens. */
.reviews { margin-top: 2.75rem; }
.reviews h2 { margin: 0; font-size: clamp(1.625rem, 7vw, 2rem); line-height: 1.2; letter-spacing: -.04em; }
.reviews h2 span { color: var(--wine); }
.reviews-summary { color: #76686c; font-size: .9375rem; }
.reviews-overview { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: 1rem; padding: 1.125rem; border: 1px solid #eadfe3; border-radius: .875rem; background: #faf5f6; }
.reviews-average-label { display: block; color: #76686c; font-size: .6875rem; font-weight: 650; letter-spacing: .12em; }
.reviews-average-stars { position: relative; width: max-content; color: #ded4d7; font-size: 2rem; line-height: 1.25; letter-spacing: 0; white-space: nowrap; }
.reviews-average-fill { position: absolute; top: 0; left: 0; width: 0; overflow: hidden; color: var(--wine); transition: width 350ms ease; }
.reviews-summary { margin: .875rem 0 1rem; }
@media (prefers-reduced-motion: reduce) { .reviews-average-fill { transition: none; } }
.reviews-list { display: grid; gap: .75rem; }
.review-card { padding: 1.125rem; border: 1px solid #eadfe3; border-radius: .875rem; }
.review-card header { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.review-card h3 { margin: 0; font-size: .9375rem; overflow-wrap: anywhere; }
.review-card time { color: #76686c; font-size: .75rem; white-space: nowrap; }
.review-card p { margin: .5rem 0 0; font-size: .9375rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.review-score { color: var(--wine); letter-spacing: .1em; }
.review-compose { margin: 1rem 0 1.75rem; border: 1px solid #eadfe3; border-radius: .875rem; }
.review-compose-title { margin: 0; padding: 1rem; color: var(--wine); font-size: 1.0625rem; font-weight: 650; }
#review-form { padding: 0 1rem 1rem; }
.review-rating { border: 0; margin: .25rem 0 1rem; padding: 0; }
.review-rating legend, .review-field { font-size: .9375rem; font-weight: 600; }
.review-stars { display: flex; justify-content: space-between; gap: .125rem; max-width: 18rem; margin-top: .75rem; padding: .375rem 0; }
.review-stars label { position: relative; display: grid; place-items: center; width: 44px; height: 48px; flex-shrink: 0; cursor: pointer; color: #c3b9b0; font-size: 2.25rem; -webkit-tap-highlight-color: transparent; }
.review-stars label > span[aria-hidden] { transition: color 160ms ease, transform 160ms ease; }
.review-stars label:active > span[aria-hidden] { transform: scale(1.15); }
.review-rating-caption { margin: .375rem 0 0; color: #76686c; font-size: .8125rem; min-height: 1.5em; }
.review-stars input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.review-stars label:has(input:checked), .review-stars label:has(~ label input:checked) { color: var(--wine); }
.review-writing:not([hidden]) { animation: review-reveal 220ms ease-out both; }
@keyframes review-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .review-writing:not([hidden]) { animation: none; } }
.review-stars label:has(input:focus-visible) { outline: 2px solid var(--wine); border-radius: .375rem; }
.review-field { display: grid; gap: .375rem; margin-top: 1rem; }
.review-field input, .review-field textarea { width: 100%; min-width: 0; padding: .75rem; border: 1px solid #dccbd1; border-radius: .5rem; font: inherit; font-weight: 400; font-size: 1rem; color: #202020; background: #fff; }
.review-field textarea { resize: vertical; }
.review-help { color: #76686c; font-size: .8125rem; line-height: 1.6; }
.review-submit, .reviews-more { min-height: 48px; border: 0; border-radius: .625rem; padding: .75rem 1rem; font: inherit; font-weight: 650; cursor: pointer; }
.review-submit { width: 100%; background: var(--wine); color: white; }
.review-submit:disabled { background: #eee8ea; color: #81747a; cursor: default; }
.reviews-more { margin-top: .75rem; width: 100%; color: var(--wine); background: #faf4f6; }
.reviews :is(input, textarea, button, summary):focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .review-stars label > span[aria-hidden] { transition: none; } .review-stars label:active > span[aria-hidden] { transform: none; } }