/* Piqelo v826 — responsive Winner's Spotlight containment.
   Keeps the desktop composition above 1100px and gives tablet, mobile and
   in-app browsers one predictable single-column recommendation layout. */

@media(max-width:1100px){
  html,body{max-inline-size:100%;overflow-x:hidden;overflow-x:clip}

  #home .sourceRibbon{
    box-sizing:border-box!important;
    inline-size:100%!important;
    max-inline-size:100%!important;
    min-inline-size:0!important;
    overflow:hidden!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"label method" "marks marks" "legal legal"!important;
    column-gap:10px!important;
    row-gap:9px!important;
  }
  #home .sourceRibbonMarks{
    min-inline-size:0!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:9px 7px!important;
    align-items:center!important;
    justify-items:center!important;
  }
  #home .sourceRibbonMarks li{
    min-inline-size:0!important;
    max-inline-size:100%!important;
    text-align:center!important;
  }
  #home .sourceRibbonMark{
    max-inline-size:100%!important;
    font-size:12px!important;
  }
  #home .sourceRibbonLegal{
    min-inline-size:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  #home #topPickPanel{
    box-sizing:border-box!important;
    inline-size:100%!important;
    max-inline-size:100%!important;
    min-inline-size:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
  }
  #home #topPickPanel::before{
    box-sizing:border-box!important;
    inline-size:max-content!important;
    max-inline-size:calc(100% - 28px)!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    line-height:1.1!important;
  }
  #home #topPickPanel > .topPickLeft,
  #home #topPickPanel > .topPickRight{
    box-sizing:border-box!important;
    inline-size:100%!important;
    max-inline-size:100%!important;
    min-inline-size:0!important;
  }
  #home #topPickPanel > .topPickLeft{
    grid-template-columns:92px minmax(0,1fr)!important;
    gap:16px!important;
    padding:27px 24px 21px!important;
  }
  #home #topPickPanel .pickMeta,
  #home #topPickPanel .pickMetaTop,
  #home #topPickPanel .winnerSpotlightLeft,
  #home #topPickPanel .winnerSpotlightHeader,
  #home #topPickPanel .winnerSelectionCallout,
  #home #topPickPanel .winnerSpotlightBody{
    box-sizing:border-box!important;
    max-inline-size:100%!important;
    min-inline-size:0!important;
  }
  #home #topPickPanel #scoreRing{
    inline-size:82px!important;
    block-size:82px!important;
    min-inline-size:82px!important;
    min-block-size:82px!important;
    max-inline-size:82px!important;
    max-block-size:82px!important;
    flex-basis:82px!important;
    margin:2px auto 28px!important;
  }
  #home #topPickPanel #scoreRing .rtRingLabel{
    inline-size:92px!important;
    max-inline-size:92px!important;
    white-space:nowrap!important;
    text-align:center!important;
    font-size:8.5px!important;
    letter-spacing:.075em!important;
  }
  #home #topPickPanel #spotlightName{
    inline-size:100%!important;
    max-inline-size:100%!important;
    min-inline-size:0!important;
    margin:7px 0 5px!important;
    font-size:clamp(27px,4vw,38px)!important;
    line-height:1.04!important;
    letter-spacing:-.04em!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  #home #topPickPanel #spotlightBestFor,
  #home #topPickPanel .spotlightPriceRow{
    max-inline-size:100%!important;
    min-inline-size:0!important;
  }
  #home #topPickPanel .winnerSpotlightLeft{
    grid-column:1/-1!important;
    inline-size:100%!important;
    margin:9px 0 0!important;
    overflow:hidden!important;
  }
  #home #topPickPanel .winnerSpotlightHeader strong,
  #home #topPickPanel #winnerAwardLine,
  #home #topPickPanel .winnerSelectionCallout b,
  #home #topPickPanel .winnerSelectionCallout p{
    max-inline-size:100%!important;
    overflow-wrap:anywhere!important;
  }
  #home #topPickPanel > .topPickRight{
    grid-template-columns:minmax(0,1fr)!important;
    padding:20px 24px 22px!important;
    border-inline-start:0!important;
    border-block-start:1px solid rgba(75,130,155,.24)!important;
  }
  #home #topPickPanel .topPickAction,
  #home #topPickPanel .whyBox{
    inline-size:100%!important;
    max-inline-size:100%!important;
    min-inline-size:0!important;
  }
  #home #topPickPanel .topPickAction{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:780px){
  #home .sourceRibbon{
    padding:8px!important;
    border-radius:14px!important;
  }
  #home .sourceRibbonMarks{gap:8px 5px!important}
  #home .sourceRibbonMark{font-size:11px!important}

  #home #topPickPanel{
    border-radius:20px!important;
  }
  #home #topPickPanel::before{
    left:14px!important;
    top:-11px!important;
    max-inline-size:calc(100% - 28px)!important;
    padding:6px 9px!important;
    font-size:9px!important;
    letter-spacing:.13em!important;
  }
  #home #topPickPanel > .topPickLeft{
    grid-template-columns:84px minmax(0,1fr)!important;
    gap:11px!important;
    padding:21px 14px 15px!important;
  }
  #home #topPickPanel #scoreRing{
    inline-size:68px!important;
    block-size:68px!important;
    min-inline-size:68px!important;
    min-block-size:68px!important;
    max-inline-size:68px!important;
    max-block-size:68px!important;
    flex-basis:68px!important;
    margin:1px auto 25px!important;
  }
  #home #topPickPanel #scoreRing::after{inset:6px!important}
  #home #topPickPanel #scoreRing strong{font-size:25px!important}
  #home #topPickPanel #scoreRing .rtRingLabel{
    inline-size:82px!important;
    max-inline-size:82px!important;
    inset-block-start:calc(100% + 8px)!important;
    font-size:8px!important;
    letter-spacing:.065em!important;
  }
  #home #topPickPanel #spotlightName{
    font-size:clamp(21px,6.2vw,27px)!important;
    line-height:1.06!important;
  }
  #home #topPickPanel .pickMetaTop{
    gap:5px!important;
    flex-wrap:wrap!important;
  }
  #home #topPickPanel .spotlightPriceRow{
    gap:7px!important;
    flex-wrap:wrap!important;
  }
  #home #topPickPanel .winnerSpotlightLeft{
    padding:13px 12px 12px!important;
    border-radius:16px!important;
  }
  #home #topPickPanel > .topPickRight{
    padding:15px 14px 14px!important;
  }
  #home #topPickPanel .topPickAction{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

@media(max-width:430px){
  #home #topPickPanel > .topPickLeft{
    grid-template-columns:78px minmax(0,1fr)!important;
    gap:9px!important;
    padding-inline:11px!important;
  }
  #home #topPickPanel #scoreRing{
    inline-size:64px!important;
    block-size:64px!important;
    min-inline-size:64px!important;
    min-block-size:64px!important;
    max-inline-size:64px!important;
    max-block-size:64px!important;
    flex-basis:64px!important;
  }
  #home #topPickPanel #scoreRing .rtRingLabel{
    inline-size:76px!important;
    max-inline-size:76px!important;
    font-size:7.5px!important;
    letter-spacing:.055em!important;
  }
  #home #topPickPanel #spotlightName{
    font-size:21px!important;
  }
  #home .sourceRibbonMark{font-size:10.5px!important}
}

@media(prefers-reduced-motion:reduce){
  #home #topPickPanel *{scroll-behavior:auto!important}
}
/* Retain complete provider identities when the reading area becomes narrow. */
@media(max-width:780px){
  #home .sourceRibbonMarks{grid-template-columns:repeat(auto-fit,minmax(min(100%,100px),1fr))!important}
}