/* Product ratings and reviews (storefront). Loaded after storefront.css. */
.stars { --v: 0; display: inline-block; font-size: 17px; letter-spacing: 2px; line-height: 1; white-space: nowrap; }
.stars::before { content: "★★★★★"; background: linear-gradient(90deg, #f5a623 calc(var(--v) / 5 * 100%), #d9dbe3 0); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.rating-line { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 12px; font-size: 14px; } .rating-line:hover b { text-decoration: underline; }
.reviews .rev-summary { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: center; margin-bottom: 26px; max-width: 640px; }
.rev-score { display: flex; flex-direction: column; gap: 6px; } .rev-score b { font-size: 44px; line-height: 1; letter-spacing: -.03em; }
.rev-bars { display: grid; gap: 6px; } .rev-bar { display: grid; grid-template-columns: 38px 1fr 28px; gap: 10px; align-items: center; font-size: 13px; }
.rev-bar i { display: block; height: 8px; border-radius: 99px; background: var(--bg-2); overflow: hidden; } .rev-bar u { display: block; height: 100%; background: #f5a623; border-radius: 99px; text-decoration: none; }
.rev-list { display: grid; gap: 0; max-width: 760px; } .rev { padding: 18px 0; border-top: 1px solid var(--line); } .rev p { margin: 8px 0; color: var(--ink-2); white-space: pre-line; }
.rev-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .verified { color: var(--success); }
.rev-reply { margin-top: 10px; padding: 12px 14px; border-left: 3px solid var(--brand); background: var(--bg-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 14px; } .rev-reply p { margin: 4px 0 0; }
.rev-form-wrap { margin-top: 28px; max-width: 640px; padding-top: 22px; border-top: 1px solid var(--line); } .rev-form-wrap h3 { font-size: 18px; margin-bottom: 8px; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; } .star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { font-size: 30px; line-height: 1; color: #d9dbe3; cursor: pointer; transition: color .1s; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: #f5a623; } .star-input input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 600px) { .reviews .rev-summary { grid-template-columns: 1fr; gap: 16px; } }
.p-rating { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin: 2px 0 4px; }