/* Piqelo interaction polish — intentionally evolutionary, not a redesign */

/* Consistent icon language */
.uiIcon{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.trustRailIcon .uiIcon,.decisionIcon .uiIcon{width:17px;height:17px}

/* Pros / cons: calmer, more professional visual language */
.homePC h4{align-items:center!important}
.pcTitleIcon{width:24px;height:24px;flex:0 0 24px;border-radius:8px;display:inline-grid;place-items:center}
.pcTitleIcon.pro{background:rgba(34,170,132,.12);border:1px solid rgba(39,151,119,.22);color:#159276}
.pcTitleIcon.con{background:rgba(205,151,60,.12);border:1px solid rgba(185,132,44,.22);color:#9d6a16}
.homePoint{grid-template-columns:22px minmax(0,1fr)!important;gap:9px!important;align-items:start!important}
.homePointIcon{width:20px;height:20px;padding:3px;border-radius:7px;margin-top:1px}
.homePointIcon.pro{background:rgba(34,170,132,.10);border:1px solid rgba(39,151,119,.18);color:#16866f}
.homePointIcon.con{background:rgba(205,151,60,.10);border:1px solid rgba(185,132,44,.18);color:#936417}
.homePC.con{background:rgba(61,49,27,.78)!important;border-color:rgba(194,150,72,.38)!important}

#product-detail .pcCard h3{display:flex;align-items:center;gap:9px}
#product-detail .pcCard.good{background:linear-gradient(145deg,rgba(10,48,43,.94),rgba(9,42,39,.94))!important;border-color:rgba(53,161,128,.44)!important}
#product-detail .pcCard.bad{background:linear-gradient(145deg,rgba(45,39,26,.92),rgba(38,34,25,.94))!important;border-color:rgba(182,139,65,.42)!important}
.pcHeadingIcon{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;flex:0 0 27px}
.pcHeadingIcon.good{background:rgba(53,184,143,.13);border:1px solid rgba(74,190,153,.22);color:#65dfb8}
.pcHeadingIcon.caution{background:rgba(205,157,73,.13);border:1px solid rgba(198,151,69,.23);color:#e0b96d}
.pcItem{grid-template-columns:26px minmax(0,1fr)!important;gap:10px!important}
.pcItemIcon{width:24px;height:24px;padding:4px;border-radius:8px;margin-top:1px;box-sizing:border-box}
.pcItemIcon.goodIcon{background:rgba(53,184,143,.11);border:1px solid rgba(74,190,153,.20);color:#67ddb8}
.pcItemIcon.cautionIcon{background:rgba(205,157,73,.11);border:1px solid rgba(198,151,69,.20);color:#dfb66b}
#product-detail .pcCard.bad .ownerSignalTag:before{color:#d6aa5e!important}

/* Static review pages use the same visual language without rewriting their content. */
.pro>b,.con>b{display:flex;align-items:center;gap:9px}
.pro>b:before,.con>b:before{width:24px;height:24px;flex:0 0 24px;border-radius:8px;display:inline-grid;place-items:center;font-size:14px;font-weight:950}
.pro>b:before{content:"✓";background:rgba(34,170,132,.11);border:1px solid rgba(39,151,119,.20);color:#15886f}
.con>b:before{content:"–";background:rgba(205,151,60,.11);border:1px solid rgba(185,132,44,.20);color:#946418}

/* Clickable cards / metrics: small affordances only */
.interactiveCard,.metricJump,.detailJump,.heroVisual.interactiveProduct,.topPickLeft.interactiveProduct{cursor:pointer}
.interactiveCard,.detailJump,.metricJump,.heroVisual.interactiveProduct,.topPickLeft.interactiveProduct{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
.interactiveCard:hover,.detailJump:hover{transform:translateY(-2px)}
.pickCard.interactiveCard:hover,.compareProductCard.interactiveCard:hover{border-color:rgba(78,181,188,.62)!important;box-shadow:0 14px 30px rgba(10,52,75,.12)!important}
.metricJump{outline:none}
.metricJump:hover{transform:translateY(-1px);border-color:rgba(43,164,160,.55)!important;box-shadow:0 10px 22px rgba(26,86,104,.10)!important}
.metricJump:focus-visible,.interactiveCard:focus-visible,.detailJump:focus-visible,.heroVisual.interactiveProduct:focus-visible,.topPickLeft.interactiveProduct:focus-visible{outline:3px solid rgba(55,190,184,.42)!important;outline-offset:3px!important}
.metricHint{position:relative}
.metricHint:after{content:"View details";position:absolute;left:50%;bottom:-25px;transform:translateX(-50%) translateY(-2px);opacity:0;pointer-events:none;white-space:nowrap;padding:4px 7px;border-radius:7px;background:#15384d;color:#e7f5fa;font-size:9px;font-weight:800;box-shadow:0 7px 16px rgba(0,0,0,.14);transition:.16s;z-index:20}
.metricHint:hover:after,.metricHint:focus-visible:after{opacity:1;transform:translateX(-50%) translateY(0)}

/* Homepage top-pick image/copy are now discoverably clickable, without looking like buttons. */
.heroVisual.interactiveProduct:hover img#spotlightImage{transform:scale(1.012)}
.heroVisual img#spotlightImage{transition:transform .18s ease}
.topPickLeft.interactiveProduct:hover{box-shadow:inset 0 0 0 1px rgba(57,179,183,.20)}

/* Detail navigation metrics */
#product-detail .detailScore.metricJump,#product-detail .detailStat.metricJump{position:relative}
#product-detail .detailStat.metricJump:after{content:"↘";position:absolute;right:8px;top:7px;color:#6da0b2;font-size:10px;font-weight:900;opacity:.75}
.detailTrustRail>article.detailJump{position:relative}
.detailTrustRail>article.detailJump:after{content:"↘";position:absolute;right:8px;top:8px;color:#5e94a6;font-size:9px;opacity:.65}

/* Refined trust / decision icons */
.trustRailIcon,.decisionIcon{font-size:0!important}
.trustRailIcon{transition:background-color .16s ease,border-color .16s ease}
.detailJump:hover .trustRailIcon{background:rgba(53,199,188,.14)!important;border-color:rgba(74,191,183,.34)!important}
.skip .decisionIcon{color:#d9af62!important;background:rgba(196,149,66,.10)!important;border-color:rgba(199,153,70,.24)!important}

/* Choice labels behave like contextual links, not decorative stickers. */
.choiceInlineLabel.choiceJump{cursor:pointer}
.choiceInlineLabel.choiceJump:hover{border-color:rgba(41,157,153,.48);box-shadow:0 9px 20px rgba(18,75,94,.13)}
.choiceInlineLabel.choiceJump:focus-visible{outline:3px solid rgba(55,190,184,.38);outline-offset:2px}

/* Jump target confirmation: subtle and temporary */
.jumpHighlight{animation:piqeloJumpHighlight 1.05s ease-out}
@keyframes piqeloJumpHighlight{0%{box-shadow:0 0 0 0 rgba(42,198,174,.34)}45%{box-shadow:0 0 0 5px rgba(42,198,174,.14)}100%{box-shadow:0 0 0 0 rgba(42,198,174,0)}}

/* Existing full-card links on static pages get just a little feedback. */
a.rankcard,a.guide.card{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
a.rankcard:hover,a.guide.card:hover{transform:translateY(-2px)}
a.rankcard:focus-visible,a.guide.card:focus-visible{outline:3px solid rgba(55,190,184,.38);outline-offset:3px}

@media(max-width:780px){
  .metricHint:after{display:none}
  .interactiveCard:active,.metricJump:active,.detailJump:active,.heroVisual.interactiveProduct:active,.topPickLeft.interactiveProduct:active{transform:scale(.995)}
  .pcTitleIcon{width:22px;height:22px;flex-basis:22px}
  .homePoint{grid-template-columns:21px minmax(0,1fr)!important;gap:8px!important}
  .homePointIcon{width:19px;height:19px}
}
@media(prefers-reduced-motion:reduce){
  .interactiveCard,.metricJump,.detailJump,.heroVisual.interactiveProduct,.topPickLeft.interactiveProduct,a.rankcard,a.guide.card,.heroVisual img#spotlightImage{transition:none!important}
  .jumpHighlight{animation:none!important}
}

.productTitleJump{cursor:pointer;border-radius:7px;transition:color .16s ease,transform .16s ease}.productTitleJump:hover{color:#0f7f77!important}.productTitleJump:focus-visible{outline:3px solid rgba(55,190,184,.38);outline-offset:3px}