:root {
  --er-gold: #ffc107;
  --er-gray: #d8d8d8;
  --er-text: #333;
  --er-muted: #777;
  --er-verified: #15a347;
}
.er-stars { display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; gap: 2px; }
.er-stars .er-st { width: 16px; height: 16px; display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; flex: 0 0 16px; }
.er-stars .er-st-on { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23ffc107%27%3E%3Cpath%20d%3D%27M12%202l2.95%206.36%206.99.62-5.27%204.78%201.55%206.84L12%2017.27%205.78%2020.6l1.55-6.84L2.06%208.98l6.99-.62L12%202z%27%2F%3E%3C%2Fsvg%3E"); }
.er-stars .er-st-off { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23d8d8d8%27%3E%3Cpath%20d%3D%27M12%202l2.95%206.36%206.99.62-5.27%204.78%201.55%206.84L12%2017.27%205.78%2020.6l1.55-6.84L2.06%208.98l6.99-.62L12%202z%27%2F%3E%3C%2Fsvg%3E"); }
.er-stars.er-sm .er-st { width: 16px; height: 16px; flex: 0 0 16px; }
.er-stars.er-md .er-st { width: 20px; height: 20px; flex: 0 0 20px; }
.er-stars.er-lg .er-st { width: 26px; height: 26px; flex: 0 0 26px; }
.er-rating-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--er-text); white-space: nowrap; vertical-align: middle; }
.er-rating-inline .er-score { font-weight: 600; }
.er-rating-inline .er-count { color: var(--er-muted); font-size: 13px; }
.er-detail-rating { display: inline-flex; align-items: center; margin-left: 12px; padding-left: 12px; border-left: 1px solid #e0e0e0; }
.product-miniature .er-list-rating { display: flex !important; justify-content: flex-start !important; align-items: center; margin: 8px 0 4px; padding: 0; text-align: left; }
.product-miniature .er-list-rating .er-stars { gap: 2px; }
.product-miniature .er-list-rating .er-stars .er-st { width: 16px; height: 16px; flex: 0 0 16px; }
.er-reviews-block { display: block; box-sizing: border-box; max-width: 720px; width: 100%; margin: 30px auto 20px 0; padding: 24px; border: 1px solid #ececec; border-radius: 6px; background: #fff; clear: both; }
/* Hide the front-end "Write your review / Faça uma avaliação" button.
   Reviews are only allowed via the email-token flow after a delivered order. */
#product-comments-list-footer,
#product-comments-list-footer button,
#product-comments-list-footer .btn,
button[data-target="#post-product-comment-modal"],
a[data-target="#post-product-comment-modal"],
.post-product-comment,
#post-product-comment-modal-trigger,
.btn.post-product-comment-trigger { display: none !important; }
/* If the host column is narrow, escape it: span the full row width */
#product-comments-list-header.er-replaced-block,
.er-replaced-block { max-width: none !important; }
.er-reviews-block h3.er-reviews-title { margin: 0 0 20px; font-size: 18px; font-weight: 700; color: var(--er-text); text-transform: none; }
.er-reviews-summary { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
@media (max-width: 600px) { .er-reviews-summary { grid-template-columns: 1fr; gap: 16px; } }
.er-distribution { display: flex; flex-direction: column; gap: 6px; }
.er-distribution .er-dist-title { font-size: 13px; color: var(--er-muted); margin-bottom: 6px; }
.er-bar-row { display: grid; grid-template-columns: 80px 1fr 30px; align-items: center; gap: 10px; cursor: pointer; padding: 3px 6px; border-radius: 4px; transition: background .15s; }
.er-bar-row:hover { background: #fafafa; }
.er-bar-row.er-active { background: #fff8e1; }
.er-bar-row .er-bar-label { font-size: 13px; color: var(--er-text); }
.er-bar-row .er-bar-track { height: 8px; background: #efefef; border-radius: 4px; overflow: hidden; position: relative; }
.er-bar-row .er-bar-fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--er-gold); border-radius: 4px; transition: width .4s ease; }
.er-bar-row .er-bar-count { font-size: 13px; color: var(--er-muted); text-align: right; }
.er-global { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 140px; }
.er-global .er-dist-title { font-size: 13px; color: var(--er-muted); margin-bottom: 4px; }
.er-global .er-global-row { display: flex; align-items: center; gap: 10px; }
.er-global .er-global-score { font-size: 36px; font-weight: 700; color: var(--er-text); line-height: 1; }
.er-global .er-global-count { font-size: 12px; color: var(--er-muted); text-decoration: underline; cursor: pointer; }
.product-comment-list-item { padding: 18px 0 !important; border-bottom: 1px solid #f0f0f0 !important; }
.er-verified-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--er-verified); border: 1px solid var(--er-verified); border-radius: 999px; padding: 2px 9px 2px 7px; margin-top: 6px; background: #fff; }
.er-verified-badge::before { content: ''; width: 12px; height: 12px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%2315a347%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%20100%2020%2010%2010%200%20000-20zm-1%2014.5l-4.5-4.5%201.4-1.4%203.1%203.1%206.6-6.6%201.4%201.4z%27%2F%3E%3C%2Fsvg%3E"); }
.er-relative-time { display: block; font-size: 11px; color: var(--er-muted); margin-top: 4px; }
.er-recommend { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--er-text); }
.er-recommend .er-recommend-icon { width: 14px; height: 14px; display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; flex: 0 0 14px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23222%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%20100%2020%2010%2010%200%20000-20zm-1%2014.5l-4.5-4.5%201.4-1.4%203.1%203.1%206.6-6.6%201.4%201.4z%27%2F%3E%3C%2Fsvg%3E"); }
/* Zero-price disabled add-to-cart */
.er-zero-disabled { background: #c7c7c7 !important; color: #fff !important; cursor: not-allowed !important; pointer-events: none !important; opacity: .55 !important; }
.grade-stars { display: none !important; }
.grade-stars > * { display: none !important; }
/* But INSIDE the write-review modal, the grade-stars container itself MUST
   render (it holds our interactive picker). Children of legacy productcomments
   markup stay hidden; only our own .er-pick-star / hidden input show. */
/* Trustpilot-style large square star picker (modal + email form) */
#post-product-comment-modal .grade-stars,
.modal .grade-stars { display: inline-flex !important; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; }
#post-product-comment-modal .grade-stars > *,
.modal .grade-stars > * { display: none !important; }
#post-product-comment-modal .grade-stars .er-pick-star,
.modal .grade-stars .er-pick-star {
  display: inline-block !important;
  width: 56px; height: 56px;
  box-sizing: border-box;
  cursor: pointer;
  background-color: #d8d8d8;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 60%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23ffffff%27%3E%3Cpath%20d%3D%27M12%202l2.95%206.36%206.99.62-5.27%204.78%201.55%206.84L12%2017.27%205.78%2020.6l1.55-6.84L2.06%208.98l6.99-.62L12%202z%27%2F%3E%3C%2Fsvg%3E");
  border-radius: 4px;
  transition: background-color .12s;
  user-select: none;
  -webkit-user-select: none;
}
#post-product-comment-modal .grade-stars .er-pick-star *,
.modal .grade-stars .er-pick-star * { pointer-events: none; }
#post-product-comment-modal .grade-stars .er-pick-star.er-st-on,
.modal .grade-stars .er-pick-star.er-st-on { background-color: #f5a623; }
#post-product-comment-modal .grade-stars .er-pick-star.er-st-off,
.modal .grade-stars .er-pick-star.er-st-off { background-color: #d8d8d8; }
@media (max-width: 480px) {
  #post-product-comment-modal .grade-stars .er-pick-star,
  .modal .grade-stars .er-pick-star { width: 44px; height: 44px; }
}
#post-product-comment-modal .er-stars-sibling,
.modal .er-stars-sibling { display: none !important; }
.er-stars-sibling { display: inline-flex; vertical-align: middle; line-height: 1; margin-right: 4px; }
.product-comment-list-item .comment-infos .er-stars-sibling { margin-bottom: 8px; display: flex; }
/* Hide the duplicate "Grade ★★★" block at the top of the comments area
   (kept only inside the .er-replaced-block reviews summary block we built) */
.product-comments-additional-info > .comments-note { display: none !important; }
.er-replaced-block .product-comments-additional-info,
.er-replaced-block #product-comments-list-header > .comments-nb,
.er-replaced-block #product-comments-list-header > .comments-note { display: none !important; }
/* Customer account link: theme makes i { display:block; width:100%;
   padding-bottom:3.4rem }. Content-box height ≈ 0 (all space is padding).
   Glyph sits in content-box top → use text-align:center only (no flex). */
#elementar-reviews-link i.material-icons {
  text-align: center !important;
}

