/* Piqelo section colour hierarchy — subtle semantic tints, not a redesign */
:root{
  --tone-choice-bg:linear-gradient(145deg,rgba(8,43,45,.96),rgba(7,31,42,.96));
  --tone-choice-border:rgba(65,190,158,.34);
  --tone-score-bg:linear-gradient(145deg,rgba(8,34,57,.97),rgba(8,28,48,.96));
  --tone-score-border:rgba(76,144,204,.32);
  --tone-owner-bg:linear-gradient(145deg,rgba(28,31,57,.96),rgba(19,28,48,.96));
  --tone-owner-border:rgba(130,137,207,.30);
  --tone-reliability-bg:linear-gradient(145deg,rgba(8,42,37,.96),rgba(9,31,37,.96));
  --tone-reliability-border:rgba(79,168,132,.31);
  --tone-price-bg:linear-gradient(145deg,rgba(7,40,52,.96),rgba(7,31,44,.96));
  --tone-price-border:rgba(77,171,194,.31);
  --tone-research-bg:linear-gradient(145deg,rgba(12,35,49,.96),rgba(12,29,42,.96));
  --tone-research-border:rgba(104,157,184,.28);
  --tone-spec-bg:linear-gradient(145deg,rgba(18,34,49,.96),rgba(13,28,42,.96));
  --tone-spec-border:rgba(122,150,177,.27);
  --tone-alt-bg:linear-gradient(145deg,rgba(20,32,46,.96),rgba(14,27,40,.96));
  --tone-alt-border:rgba(128,151,170,.25);
  --tone-caution-bg:linear-gradient(145deg,rgba(47,39,24,.94),rgba(34,31,25,.95));
  --tone-caution-border:rgba(191,148,69,.30);
}

/* HOME — keep the existing visual language, but give the major blocks their own identity. */
#home .topPickPanel{
  background:var(--tone-choice-bg)!important;
  border-color:var(--tone-choice-border)!important;
  box-shadow:0 18px 44px rgba(0,17,29,.24),inset 0 1px 0 rgba(86,216,181,.05)!important;
}
#home .offersPanel{
  background:var(--tone-price-bg)!important;
  border-color:var(--tone-price-border)!important;
  box-shadow:0 18px 42px rgba(0,18,31,.20),inset 0 1px 0 rgba(102,205,220,.05)!important;
}
#home .topThreeSection .altCard{
  background:var(--tone-alt-bg)!important;
  border-color:var(--tone-alt-border)!important;
}
#home .topThreeSection .altCard.topThreeWinner{
  background:var(--tone-choice-bg)!important;
  border-color:var(--tone-choice-border)!important;
}
#home .fullShortlist{
  background:var(--tone-research-bg)!important;
  border-color:var(--tone-research-border)!important;
}
#home .trustStrip{
  background:linear-gradient(110deg,rgba(12,31,44,.91),rgba(9,37,45,.84))!important;
  border-color:rgba(97,157,176,.23)!important;
}
#home .seoExplore{background:linear-gradient(145deg,rgba(17,31,45,.58),rgba(11,27,40,.42));border-radius:20px;padding:18px;border:1px solid rgba(114,151,173,.16)}

/* DETAIL — semantic colour zoning. */
#product-detail .choiceAwardPanel{
  background:var(--tone-choice-bg)!important;
  border-color:var(--tone-choice-border)!important;
  box-shadow:0 18px 42px rgba(0,17,27,.22),inset 0 1px 0 rgba(83,211,174,.06)!important;
}
#product-detail #detailDecisionConfidence{
  background:var(--tone-score-bg)!important;
  border-color:var(--tone-score-border)!important;
}
#product-detail .keySpecsPanel{
  background:var(--tone-spec-bg)!important;
  border-color:var(--tone-spec-border)!important;
}
#product-detail .verdictPanel{
  background:linear-gradient(145deg,rgba(9,39,47,.96),rgba(8,30,42,.96))!important;
  border-color:rgba(70,172,158,.29)!important;
}
#product-detail .ownerPanel{
  background:var(--tone-owner-bg)!important;
  border-color:var(--tone-owner-border)!important;
}
#product-detail .detailSources{
  background:var(--tone-research-bg)!important;
  border-color:var(--tone-research-border)!important;
}
#product-detail .scorePanel{
  background:var(--tone-score-bg)!important;
  border-color:var(--tone-score-border)!important;
}
#product-detail .reliabilityPanel{
  background:var(--tone-reliability-bg)!important;
  border-color:var(--tone-reliability-border)!important;
}
#product-detail .priceDecisionPanel{
  background:var(--tone-price-bg)!important;
  border-color:var(--tone-price-border)!important;
}
#product-detail .fullSpecsPanel{
  background:var(--tone-spec-bg)!important;
  border-color:var(--tone-spec-border)!important;
}
#product-detail .detailAlternativesPanel{
  background:var(--tone-alt-bg)!important;
  border-color:var(--tone-alt-border)!important;
}

/* Small colour cues in section labels help users learn the hierarchy. */
#product-detail .choiceAwardEyebrow,#product-detail .verdictPanel>.eyebrow{color:#66ddc2!important}
#product-detail #detailDecisionConfidence .eyebrow,#product-detail .scorePanel>.eyebrow{color:#79bce9!important}
#product-detail .ownerPanel .eyebrow{color:#aaa9ef!important}
#product-detail .reliabilityPanel>.eyebrow{color:#7bd4ad!important}
#product-detail .priceDecisionPanel>.eyebrow{color:#79d0df!important}
#product-detail .detailSources>.eyebrow{color:#8bb8ca!important}
#product-detail .keySpecsPanel .eyebrow,#product-detail .fullSpecsPanel summary span{color:#9ab3c7!important}
#product-detail .detailAlternativesPanel .eyebrow{color:#a7b6c3!important}

/* Keep nested cards quieter than their parent section, so the hierarchy stays clear. */
#product-detail .ownerPanel .ownerSignal,
#product-detail .detailSources .sourceCard,
#product-detail .scorePanel .scoreBarRow,
#product-detail .reliabilityPanel .reliabilitySignal,
#product-detail .priceDecisionPanel .detailOfferCard,
#product-detail .keySpecsPanel .keySpecCard{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(160,193,209,.14)!important;
}

/* Buy / skip already carry meaning. Preserve it and make the distinction slightly clearer. */
#product-detail .decisionCard.buy{background:var(--tone-reliability-bg)!important;border-color:var(--tone-reliability-border)!important}
#product-detail .decisionCard.skip{background:var(--tone-caution-bg)!important;border-color:var(--tone-caution-border)!important}

/* COMPARE — winner, evidence and trade-offs each get a restrained zone. */
#compare .compareWinner{
  background:var(--tone-choice-bg)!important;
  border-color:var(--tone-choice-border)!important;
}
#compare .compareMetricsPanel,#compare .compareTablePanel:not(.compareSpecsPanel){
  background:var(--tone-score-bg)!important;
  border-color:var(--tone-score-border)!important;
}
#compare .compareSpecsPanel{
  background:var(--tone-spec-bg)!important;
  border-color:var(--tone-spec-border)!important;
}
#compare .compareDecisionPanel{
  background:var(--tone-owner-bg)!important;
  border-color:var(--tone-owner-border)!important;
}
#compare .smartDecisionCard{background:var(--tone-alt-bg)!important;border-color:var(--tone-alt-border)!important}
#compare .smartDecisionCard.winner{background:var(--tone-choice-bg)!important;border-color:var(--tone-choice-border)!important}

/* STATIC research pages — classes are added from the existing eyebrow labels. */
.card.panel.tone-choice{background:var(--tone-choice-bg)!important;border-color:var(--tone-choice-border)!important}
.card.panel.tone-score{background:var(--tone-score-bg)!important;border-color:var(--tone-score-border)!important}
.card.panel.tone-owner{background:var(--tone-owner-bg)!important;border-color:var(--tone-owner-border)!important}
.card.panel.tone-reliability{background:var(--tone-reliability-bg)!important;border-color:var(--tone-reliability-border)!important}
.card.panel.tone-price{background:var(--tone-price-bg)!important;border-color:var(--tone-price-border)!important}
.card.panel.tone-research{background:var(--tone-research-bg)!important;border-color:var(--tone-research-border)!important}
.card.panel.tone-spec{background:var(--tone-spec-bg)!important;border-color:var(--tone-spec-border)!important}
.card.panel.tone-alt{background:var(--tone-alt-bg)!important;border-color:var(--tone-alt-border)!important}
.card.panel.tone-caution{background:var(--tone-caution-bg)!important;border-color:var(--tone-caution-border)!important}
.card.panel.tone-choice .eyebrow{color:#66ddc2!important}
.card.panel.tone-score .eyebrow{color:#79bce9!important}
.card.panel.tone-owner .eyebrow{color:#aaa9ef!important}
.card.panel.tone-reliability .eyebrow{color:#7bd4ad!important}
.card.panel.tone-price .eyebrow{color:#79d0df!important}
.card.panel.tone-research .eyebrow{color:#8bb8ca!important}
.card.panel.tone-spec .eyebrow,.card.panel.tone-alt .eyebrow{color:#a3b6c5!important}
.card.panel.tone-caution .eyebrow{color:#ddb66d!important}

/* Mobile: retain the distinction but soften the chroma on smaller screens. */
@media(max-width:780px){
  #home .seoExplore{padding:14px;border-radius:18px}
  #product-detail .choiceAwardPanel,#product-detail #detailDecisionConfidence,#product-detail .detailPanel,
  #compare .compareWinner,#compare .compareTablePanel,#compare .compareDecisionPanel{box-shadow:0 12px 28px rgba(0,12,24,.16)!important}
}


/* ===== v70.4 Top 3 + mobile finder polish =====
   Keep the existing card/button design. Only strengthen ranking hierarchy
   and remove the redundant large finder CTA on phone-sized screens. */

/* The ranking becomes a real visual anchor instead of a tiny tag. */
#home .topThreeSection .altCopy{
  position:relative;
}
#home .topThreeSection .altRank{
  position:static !important;
  width:74px !important;
  height:68px !important;
  min-width:74px !important;
  padding:6px 8px 7px !important;
  margin:0 0 9px 0 !important;
  display:grid !important;
  grid-template-columns:auto 1fr !important;
  grid-template-rows:1fr auto !important;
  align-items:center !important;
  justify-items:start !important;
  column-gap:1px !important;
  border-radius:16px !important;
  border:1px solid rgba(137,176,198,.23) !important;
  background:rgba(255,255,255,.055) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055) !important;
  line-height:1 !important;
}
#home .topThreeSection .altRankHash{
  grid-column:1;
  grid-row:1;
  align-self:center;
  font-size:17px !important;
  line-height:1 !important;
  font-weight:900 !important;
  opacity:.74;
}
#home .topThreeSection .altRank strong{
  grid-column:2;
  grid-row:1;
  align-self:center;
  font-size:34px !important;
  line-height:.92 !important;
  letter-spacing:-.055em !important;
  font-weight:950 !important;
}
#home .topThreeSection .altRank small{
  grid-column:1 / -1;
  grid-row:2;
  font-size:8.5px !important;
  line-height:1 !important;
  letter-spacing:.14em !important;
  font-weight:900 !important;
  opacity:.76;
}
#home .topThreeSection .altCopy h4{
  margin-top:1px !important;
}

/* #1 clearly wins the hierarchy, while #2 and #3 remain restrained. */
#home .topThreeSection .altCard.topRank-1{
  border-color:rgba(75,202,164,.42) !important;
  box-shadow:0 17px 38px rgba(0,18,29,.18),inset 0 1px 0 rgba(91,228,188,.045) !important;
}
#home .topThreeSection .topRank-1 .altRank{
  color:#74ead0 !important;
  border-color:rgba(87,218,181,.34) !important;
  background:linear-gradient(145deg,rgba(27,116,99,.27),rgba(19,74,76,.18)) !important;
}
#home .topThreeSection .altCard.topRank-2{
  background:linear-gradient(145deg,rgba(12,37,55,.97),rgba(13,29,44,.96)) !important;
  border-color:rgba(77,148,198,.30) !important;
}
#home .topThreeSection .topRank-2 .altRank{
  color:#8dccf3 !important;
  border-color:rgba(88,159,207,.28) !important;
  background:linear-gradient(145deg,rgba(47,105,153,.22),rgba(28,64,101,.15)) !important;
}
#home .topThreeSection .altCard.topRank-3{
  background:linear-gradient(145deg,rgba(25,31,49,.96),rgba(15,28,42,.96)) !important;
  border-color:rgba(124,132,187,.26) !important;
}
#home .topThreeSection .topRank-3 .altRank{
  color:#b5b8f1 !important;
  border-color:rgba(137,141,202,.26) !important;
  background:linear-gradient(145deg,rgba(78,80,145,.20),rgba(45,50,94,.13)) !important;
}

/* Keep the visual order clear when Piqelo's Choice is also present. */
#home .topThreeSection .altChoiceBadge{
  z-index:5 !important;
}

/* Phone: the big finder CTA is redundant because the finder is already directly above it. */
@media(max-width:780px){
  #home #selectorCard .classicFindBtn{
    display:none !important;
  }

  #home .topThreeSection .altRank{
    width:70px !important;
    height:64px !important;
    min-width:70px !important;
    border-radius:15px !important;
    margin-bottom:8px !important;
  }
  #home .topThreeSection .altRank strong{
    font-size:31px !important;
  }
  #home .topThreeSection .altRankHash{
    font-size:16px !important;
  }
  #home .topThreeSection .altCopy h4{
    margin-top:0 !important;
  }
}


/* Extra Top 3 + mobile CTA hardening */
@media (max-width: 900px){
  #selectorCard .findBtn.classicFindBtn,
  #selectorCard button.classicFindBtn,
  #selectorCard .classicFindBtn{display:none !important;visibility:hidden !important;opacity:0 !important;height:0 !important;min-height:0 !important;max-height:0 !important;margin:0 !important;padding:0 !important;border:0 !important;overflow:hidden !important;pointer-events:none !important;box-shadow:none !important;}
}