/* Piqelo v70.4 decision suite — incremental UX polish, not a redesign */
:root{
  --ds-teal:#3bcdb0;
  --ds-cyan:#48baf2;
  --ds-indigo:#9ba7ff;
  --ds-ink:#14364e;
  --ds-muted:#698396;
  --ds-border:rgba(111,158,184,.28);
}

/* Accessibility / interaction quality pass */
:where(a,button,[role="button"],[tabindex="0"]):focus-visible{
  outline:3px solid rgba(45,174,224,.42) !important;
  outline-offset:3px !important;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto !important;animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
@media(max-width:780px){
  :where(button,.btn,a.btn,.compareMini,.saveMini){min-height:42px}
}

/* Save / shortlist controls */
.saveMini,.saveHeroBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(105,151,177,.34);
  background:rgba(255,255,255,.055);color:inherit;border-radius:11px;padding:7px 10px;font:inherit;font-size:11.5px;font-weight:850;
  cursor:pointer;transition:.16s ease;text-decoration:none
}
.saveMini:hover,.saveHeroBtn:hover{border-color:rgba(56,195,176,.58);transform:translateY(-1px)}
.saveMini.saved,.saveHeroBtn.saved{background:rgba(50,197,166,.13);border-color:rgba(50,197,166,.42);color:#83e8d2}
.saveMini .saveGlyph,.saveHeroBtn .saveGlyph{font-size:15px;line-height:1}

.savedShortlistPanel{
  margin:18px 0 0;padding:18px;border:1px solid rgba(82,171,185,.30);border-radius:20px;
  background:linear-gradient(145deg,rgba(229,246,248,.94),rgba(236,244,252,.96));
  box-shadow:0 14px 32px rgba(28,70,93,.07);color:#15374f
}
.savedShortlistHead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}
.savedShortlistHead .eyebrow{color:#168f81}.savedShortlistHead h3{margin:3px 0 0;font-size:24px;color:#14364e}.savedShortlistHead p{margin:4px 0 0;color:#688294;font-size:12.5px}
.savedShortlistActions{display:flex;gap:8px;flex-wrap:wrap}.savedShortlistActions button{min-height:38px}
.savedShortlistGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.savedTvCard{position:relative;display:grid;grid-template-columns:80px minmax(0,1fr);gap:11px;align-items:center;padding:11px;border:1px solid rgba(126,163,184,.30);border-radius:15px;background:rgba(255,255,255,.72);cursor:pointer;transition:.16s ease}
.savedTvCard:hover{transform:translateY(-2px);border-color:rgba(71,168,184,.50);box-shadow:0 10px 22px rgba(35,80,104,.08)}
.savedTvCard img,.savedTvFallback{width:80px;height:58px;object-fit:contain;border-radius:10px;background:#fff;padding:4px}.savedTvFallback{display:grid;place-items:center;color:#7892a3}
.savedTvCard h4{margin:0 30px 3px 0;font-size:15px;color:#173a52}.savedTvCard small{display:block;color:#6a8496;font-size:11px}.savedTvMeta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.savedTvMeta span{font-size:10px;font-weight:800;padding:4px 6px;border-radius:999px;background:#e6f2f6;color:#37657e}
.savedTvRemove{position:absolute;right:8px;top:8px;width:28px;height:28px;min-height:0;border:0;border-radius:50%;background:#eef4f7;color:#607b8c;font-size:16px;cursor:pointer}
.savedEmpty{padding:14px;border:1px dashed rgba(112,157,181,.35);border-radius:14px;color:#668193;background:rgba(255,255,255,.46)}

.shortlistDock{position:fixed;z-index:72;right:18px;bottom:18px;display:flex;align-items:center;gap:8px;padding:8px;border-radius:16px;background:rgba(8,30,44,.94);border:1px solid rgba(80,190,183,.32);box-shadow:0 18px 42px rgba(0,17,29,.26);backdrop-filter:blur(14px)}
.shortlistDock button{border:0;border-radius:11px;min-height:38px;padding:8px 11px;background:rgba(255,255,255,.07);color:#e8f7fb;font-size:12px;font-weight:850;cursor:pointer}.shortlistDock button.primary{background:linear-gradient(105deg,#38b9ef,#4cddb7);color:#082538}.shortlistDock button:disabled{opacity:.48;cursor:default}
@media(max-width:860px){.savedShortlistGrid{grid-template-columns:1fr}.savedShortlistHead{align-items:flex-start;flex-direction:column}.shortlistDock{right:12px;bottom:84px;max-width:calc(100vw - 24px)}}

/* More useful 'Why this one?' block */
.whyWinsIntro{margin:16px 0 9px}.whyWinsIntro span{display:block;color:#54cfba;font-size:10px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.whyWinsIntro p{margin:5px 0 0;color:#a9c0cc;font-size:13px;line-height:1.45}
#detailWhyWins .whyWinCard{min-height:112px}.whyWinCard.decisionEdge{background:linear-gradient(145deg,rgba(24,96,100,.31),rgba(255,255,255,.025));border-color:rgba(73,208,181,.25)}
.whyWinCard.priceEdge{background:linear-gradient(145deg,rgba(19,83,120,.30),rgba(255,255,255,.025));border-color:rgba(71,174,224,.24)}

/* Smarter price context */
.detailPriceContext{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 12px}
.priceContextCard{padding:10px 11px;border-radius:13px;border:1px solid rgba(67,160,193,.22);background:rgba(255,255,255,.035)}
.priceContextCard span{display:block;color:#7fc9df;font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.priceContextCard b{display:block;color:#eefaff;font-size:15px;margin-top:4px}.priceContextCard small{display:block;color:#8da9b8;font-size:10.5px;line-height:1.35;margin-top:3px}
@media(max-width:680px){.detailPriceContext{grid-template-columns:1fr 1fr}.detailPriceContext .priceContextCard:first-child{grid-column:1/-1}}

/* Compare: answer first, detail second */
.compareQuickAnswer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 18px}
.compareQuickCard{padding:15px 16px;border:1px solid rgba(99,151,179,.25);border-radius:17px;background:linear-gradient(145deg,rgba(9,36,54,.94),rgba(7,28,43,.94));box-shadow:0 12px 28px rgba(0,16,28,.10)}
.compareQuickCard.primary{border-color:rgba(62,207,176,.36);background:linear-gradient(145deg,rgba(10,62,69,.94),rgba(8,39,55,.95))}.compareQuickCard span{display:block;color:#71cfc2;font-size:9.5px;font-weight:950;letter-spacing:.13em;text-transform:uppercase}.compareQuickCard b{display:block;color:#f1fbff;font-size:18px;line-height:1.2;margin:5px 0}.compareQuickCard p{margin:0;color:#9db7c6;font-size:12px;line-height:1.45}
@media(max-width:780px){.compareQuickAnswer{grid-template-columns:1fr}.compareQuickCard{padding:13px 14px}}

/* Internal research links */
.relatedResearchPanel{margin-top:16px;padding:18px;border:1px solid rgba(111,157,183,.24);border-radius:19px;background:linear-gradient(145deg,rgba(232,242,247,.92),rgba(239,247,248,.95));color:#173951}
.relatedResearchHead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:11px}.relatedResearchHead .eyebrow{color:#208e8d}.relatedResearchHead h2,.relatedResearchHead h3{margin:3px 0 0;color:#173951}.relatedResearchHead p{margin:4px 0 0;color:#688294;font-size:12.5px}
.relatedResearchGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.relatedResearchGrid a{display:block;text-decoration:none;padding:11px 12px;border:1px solid rgba(123,161,181,.28);border-radius:13px;background:rgba(255,255,255,.72);color:#173951;transition:.15s ease}.relatedResearchGrid a:hover{transform:translateY(-1px);border-color:rgba(61,160,180,.48)}.relatedResearchGrid b{display:block;font-size:13px}.relatedResearchGrid span{display:block;color:#6d8798;font-size:10.5px;margin-top:3px;line-height:1.35}
@media(max-width:760px){.relatedResearchGrid{grid-template-columns:1fr 1fr}.relatedResearchHead{align-items:flex-start;flex-direction:column}}
@media(max-width:460px){.relatedResearchGrid{grid-template-columns:1fr}}

/* Static page variant */
.piqeloRelatedResearch{margin:28px 0 0}.piqeloRelatedResearch .relatedResearchPanel{margin:0}

/* Don't let helper controls fight the existing premium buttons */
.compareCardActions .saveMini{margin-left:auto}.detailAlternative .saveMini{margin-top:8px}.result .saveMini,.altCard .saveMini{margin-top:8px}
/* Compare tray has priority over the shortlist dock when both could be visible. */
body:has(#compareTray[style*="display: grid"]) .shortlistDock{display:none !important}


/* Shortlist -> Compare flow v2 */
.savedCompareHint{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:6px 9px;border-radius:999px;border:1px solid rgba(52,161,176,.24);background:rgba(52,184,175,.075);color:#3d7185;font-size:10.5px;font-weight:820;line-height:1.2}
.savedTvCard.compareSelected{border-color:rgba(51,190,165,.58);background:linear-gradient(145deg,rgba(244,255,251,.93),rgba(239,250,253,.92));box-shadow:0 10px 24px rgba(31,116,112,.10),inset 0 0 0 1px rgba(62,201,174,.09)}
.savedTvCard.compareSelected:after{content:'';position:absolute;left:0;top:15px;bottom:15px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#42d0ad,#4bbced)}
.savedTvCopy{min-width:0}.savedTvCompareRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.savedCompareToggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:31px;padding:5px 9px;border:1px solid rgba(95,147,173,.30);border-radius:999px;background:#f3f7f9;color:#41697e;font:inherit;font-size:10.5px;font-weight:900;cursor:pointer;transition:.15s ease}
.savedCompareToggle:hover{transform:translateY(-1px);border-color:rgba(55,175,170,.46)}
.savedCompareToggle.selected{border-color:rgba(45,184,157,.48);background:linear-gradient(110deg,rgba(68,213,178,.18),rgba(69,178,225,.12));color:#0f7469}
.savedCompareCheck{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(92,141,166,.12);font-size:12px;line-height:1}.savedCompareToggle.selected .savedCompareCheck{background:#35c6a6;color:#fff;box-shadow:0 3px 8px rgba(30,145,121,.22)}
.savedCompareState{color:#8197a5;font-size:9.5px;font-weight:760}.savedTvCard.compareSelected .savedCompareState{color:#3e8d85}
.savedShortlistActions #compareSavedBtn:not(:disabled){box-shadow:0 8px 18px rgba(44,170,164,.15)}
@media(max-width:860px){.savedCompareHint{margin-top:8px}.savedTvCard{grid-template-columns:72px minmax(0,1fr);padding:10px}.savedTvCard img,.savedTvFallback{width:72px;height:54px}.savedTvCompareRow{margin-top:7px}.savedCompareToggle{min-height:34px;padding:6px 10px}.savedShortlistActions{width:100%}.savedShortlistActions #compareSavedBtn{flex:1}}
@media(max-width:460px){.savedTvCard{grid-template-columns:64px minmax(0,1fr);gap:9px}.savedTvCard img,.savedTvFallback{width:64px;height:50px}.savedTvCard h4{font-size:14px}.savedCompareState{display:none}.savedShortlistActions .btn{min-height:42px}}