/* Likes, sharing and rating. */
.engagement-wrap { padding-bottom: 110px; }
.engagement-wrap-front { padding-top: 30px; }
.engagement-panel { position: relative; display: grid; grid-template-columns: .8fr 1.25fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.engagement-panel > div { min-height: 130px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); }
.engagement-panel > div:last-of-type { border-right: 0; }
.engagement-kicker { color: var(--mid); font-size: calc(9px * var(--text-scale)); text-transform: uppercase; letter-spacing: .14em; }
.engagement-like > button { width: max-content; min-height:44px; padding: 0; display: inline-flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.engagement-like > button > span { font-size: 27px; line-height: 1; }
.engagement-like > button b { font-size: calc(18px * var(--text-scale)); }
.engagement-like > button em { font-size: calc(11px * var(--text-scale)); font-style: normal; color: var(--gray); }
.engagement-like > button[aria-pressed="true"] > span { color: var(--blue); }
.engagement-rating { flex-direction: row !important; align-items: flex-end; gap: 20px; }
.engagement-rating > div:first-child { display: grid; gap: 12px; }
.engagement-rating strong { font-family: var(--font-title); font-size: calc(28px * var(--title-scale)); font-weight: 580; }
.engagement-rating strong small { margin-left: 5px; color: var(--gray); font-family: var(--font-body); font-size: calc(10px * var(--text-scale)); font-weight: 400; }
.rating-stars { display: flex; gap: 3px; }
.rating-stars button { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--line); font-size: 22px; cursor: pointer; }
.rating-stars button:hover, .rating-stars button:focus-visible, .rating-stars button[aria-pressed="true"] { color: var(--blue); }
.rating-stars button:disabled { cursor: default; }
.share-actions { position: relative; }
.share-actions > button { min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 30px; border: 0; border-bottom: 1px solid; background: transparent; color: var(--ink); cursor: pointer; font-size: calc(12px * var(--text-scale)); }
.share-options { margin-top: 12px;  flex-wrap: wrap; gap: 6px; }
.share-options button { min-height: 44px; padding: 0 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font-size: calc(9px * var(--text-scale)); text-transform: uppercase; letter-spacing: .08em; }
.share-options button:hover, .share-options button:focus-visible { background: var(--blue); border-color: var(--blue); color: var(--on-primary); }
.engagement-status { position: absolute; left: 0; bottom: -30px; margin: 0; color: var(--mid); font-size: calc(10px * var(--text-scale)); }
.product-engagement { margin-top: 70px; }

@media (max-width: 680px) {
  .engagement-panel { grid-template-columns: 1fr; }
  .engagement-panel > div { min-height: 112px; border-right: 0; border-bottom: 1px solid var(--line); }
  .engagement-panel > div:last-of-type { border-bottom: 0; }
  .engagement-rating { align-items: flex-start; }
  .engagement-wrap { padding-bottom: 90px; }
}

/* Compact site-level engagement inside the dark footer. */
.share-options { display: none; }
.share-options.is-open { display: flex; }
.footer-engagement {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(var(--inverse-text-rgb),.16);
  color: var(--inverse-soft);
}
.footer-engagement .footer-label { margin-bottom: 14px; }
.footer-rating-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.footer-rating-summary strong { color: var(--inverse-text); font-family: var(--font-title); font-size: calc(28px * var(--title-scale)); font-weight: 570; line-height: 1; }
.footer-rating-summary strong small { margin-left: 3px; color: var(--inverse-accent); font: 400 calc(10px * var(--text-scale))/1 var(--font-body); }
.footer-rating-summary > span { color: var(--engagement-muted); font-size: calc(9px * var(--text-scale)); }
.footer-rating-stars { margin-top: 10px; }
.footer-rating-stars button { width: 44px; height: 44px; color: rgba(var(--inverse-text-rgb),.28); font-size: 18px; }
.footer-rating-stars button:hover,
.footer-rating-stars button:focus-visible,
.footer-rating-stars button[aria-pressed="true"] { color: var(--inverse-action); }
.footer-engagement-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.footer-like,
.footer-share > button {
  min-height: 44px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(var(--inverse-text-rgb),.22);
  background: transparent;
  color: var(--inverse-soft);
  cursor: pointer;
  font-size: calc(9px * var(--text-scale));
  transition: border-color .2s, background .2s, color .2s;
}
.footer-like em { font-style: normal; }
.footer-like b { font-weight: 600; }
.footer-like > span { font-size: 16px; line-height: 1; }
.footer-like:hover,
.footer-like:focus-visible,
.footer-like[aria-pressed="true"],
.footer-share > button:hover,
.footer-share > button:focus-visible { border-color: var(--inverse-action); background: rgba(var(--inverse-action-rgb),.1); color: var(--inverse-text); }
.footer-share { position: relative; }
.footer-share-options { margin-top: 7px; gap: 5px; }
.footer-share-options button { border-color: rgba(var(--inverse-text-rgb),.18); background: transparent; color: var(--inverse-soft); }
.footer-share-options button:hover,
.footer-share-options button:focus-visible { background: var(--inverse-action); border-color: var(--inverse-action); color: var(--inverse-action-text); }
.footer-engagement-status { position: static; min-height: 16px; margin: 7px 0 0; color: var(--inverse-accent); font-size: calc(8px * var(--text-scale)); }

@media (max-width: 680px) {
  .footer-engagement { max-width: 440px; }
}


/* v1.20.0 — engagement keyboard/touch hardening. */
.share-actions > button[aria-expanded="true"],
.footer-share > button[aria-expanded="true"] { color:var(--mid); }
.footer-share > button[aria-expanded="true"] { color:var(--inverse-text); border-color:var(--inverse-action); }
.rating-stars button:focus-visible,.share-options button:focus-visible,.engagement-like>button:focus-visible,.share-actions>button:focus-visible,.footer-like:focus-visible,.footer-share>button:focus-visible { outline-color:var(--focus-ring); }
.footer-rating-stars button:focus-visible { outline-color:var(--inverse-accent); }
@media(max-width:440px){.engagement-rating{flex-direction:column!important;align-items:flex-start!important;}.rating-stars{max-width:100%;flex-wrap:wrap;}}