/* ==========================================================================
   Troys Squad - phone layout

   Loads after ts-home.css. Everything here is a deliberate override for small
   screens: rows instead of stacks, swipe instead of scroll, and less vertical
   distance between the top of the page and the first product.

   Two things are NOT made side-by-side, and the reasons are in comments where
   they happen: the hero, and the build cards.
   ========================================================================== */

@media (max-width:900px){

  /* ---------- announcement ---------- */
  .ts-announce-run{font-size:11px;letter-spacing:.1em;padding:9px 0}
  .ts-announce-run span{padding:0 16px}

  /* ---------- hero ----------
     Not split into two columns. At 375px each column is about 170px, and
     "Wear the badge" at that width breaks to five lines. Instead the shot is
     shrunk and pulled up so the headline, the photo and the first button all
     land inside the opening screen - which is the actual goal. */
  .ts-hero{
    grid-template-columns:1fr 1fr;
    grid-template-areas:'copy copy' 'cta shot' 'stats stats';
    gap:18px 14px;padding:20px 0 24px;align-items:center}
  .ts-hero-copy .ts-h1{font-size:31px;line-height:1.02}
  .ts-hero-copy .ts-lede{font-size:14.5px;margin-top:10px}
  .ts-hero-cta{flex-direction:column;gap:9px;align-self:center}
  .ts-hero-cta .ts-btn{width:100%;padding:14px 12px;font-size:14px}
  .ts-hero-shot{max-width:none;margin:0}
  .ts-hero-shot::before{inset:8% 6% 16%}
  .ts-hero-cap{font-size:11.5px;margin-top:9px;gap:7px}
  .ts-hero-cap b{font-size:11.5px}
  .ts-hero-cap .ts-pill{font-size:11px;padding:4px 9px}
  .ts-stats{padding-top:16px;gap:0;justify-content:space-between}
  .ts-stat{flex:1 1 0;text-align:center}
  .ts-stat b{font-size:23px}
  .ts-stat span{font-size:10px;letter-spacing:.1em}
  /* ---------- trust strip: four across ---------- */
  .ts-strip{grid-template-columns:repeat(4,1fr)}
  .ts-tr{flex-direction:column;align-items:center;text-align:center;gap:8px;
    padding:15px 6px;border-right:1px solid var(--ts-edge);border-bottom:0}
  .ts-tr:last-child{border-right:0}
  .ts-tr::before{left:50%;top:34%;transform:translate(-50%,-50%);width:56px;height:56px}
  .ts-tr-ico{width:36px;height:36px}
  .ts-tr-ico svg{width:17px;height:17px}
  .ts-tr-txt b{font-size:11px;letter-spacing:.03em;line-height:1.15}
  .ts-tr-txt span{display:none}   /* the sub-line will not fit at 90px */

  /* ---------- categories: three across, swipe for the rest ---------- */
  .ts-cats{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 12px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .ts-cats::-webkit-scrollbar{display:none}
  .ts-cat{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;padding:0}
  .ts-cat-ico{width:70px;height:70px;margin-bottom:10px}
  .ts-cat-ico svg{width:29px;height:29px}
  .ts-cat-name{font-size:12px;line-height:1.15}
  .ts-cat-n{font-size:10.5px}

  /* ---------- leagues: three across, swipe ---------- */
  .ts-vids{display:flex;gap:11px;overflow-x:auto;padding:2px 2px 12px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ts-vids::-webkit-scrollbar{display:none}
  .ts-vid{flex:0 0 calc((100% - 22px)/3);scroll-snap-align:start}
  .ts-vid-body{padding:11px 10px 10px}
  .ts-vid-body b{font-size:12.5px;line-height:1.1}
  .ts-vid-body span{font-size:11px;margin-top:3px}

  /* ---------- shop by build ----------
     Not three across. Each card carries a four-row spec table; at 115px wide
     that is unreadable. Swiping at 1.4 cards wide keeps the spec legible and
     still shows there is more to the right. */
  .ts-builds{display:flex;gap:13px;overflow-x:auto;padding:2px 2px 12px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ts-builds::-webkit-scrollbar{display:none}
  .ts-build{flex:0 0 74%;scroll-snap-align:start;padding:22px 20px 20px}

  /* ---------- new arrivals ---------- */
  .ts-products{grid-template-columns:repeat(2,1fr);gap:11px}

  /* ---------- deal of the day: square, like a post ---------- */
  .ts-band{grid-template-columns:1fr}
  .ts-band-shot{order:-1;aspect-ratio:1;min-height:0}
  .ts-band-copy{padding:20px 20px 24px}
  .ts-band-copy .ts-h2{font-size:23px}
  .ts-band-copy .ts-lede{font-size:14.5px;margin-top:8px}
  .ts-band-copy .ts-price{font-size:28px !important}

  /* ---------- league + predictor: stacked ----------
     Side by side was too tight once the table had names in it. The five-row
     list is short enough that stacking costs very little height. */
  .ts-league{grid-template-columns:1fr;gap:12px}
  .ts-league>.ts-panel{padding:20px 18px !important}
  .ts-lg-panel{padding:15px 13px 14px}
  .ts-lg-head .ts-h3{font-size:13px}
  .ts-lg-head .ts-pill{font-size:10px;padding:4px 8px}
  .ts-lg-rows li{padding:8px 0;gap:8px;font-size:12.5px}
  .ts-lg-rank{flex:0 0 15px;font-size:12px}
  .ts-lg-pts{font-size:13.5px}
  .ts-league .ts-h3{font-size:16px}
  .ts-league .ts-muted{font-size:13px}
  .ts-league .ts-btn{font-size:12.5px;padding:11px 12px}

  /* ---------- reviews: swipe ---------- */
  .ts-quotes{display:flex;gap:11px;overflow-x:auto;padding:2px 2px 12px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ts-quotes::-webkit-scrollbar{display:none}
  .ts-quote{flex:0 0 48%;scroll-snap-align:start;align-self:flex-start}
  .ts-quote summary{flex-wrap:wrap;padding:12px 26px 12px 13px;gap:7px}
  .ts-quote summary::after{right:12px;width:7px;height:7px}
  .ts-quote .ts-stars{font-size:12px}
  .ts-quote-text{flex:1 1 100%;order:2;font-size:13.5px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .ts-quote[open] .ts-quote-text{display:none}
  .ts-quote-who{order:3;flex:1 1 100%;margin-top:2px;font-size:11px}
  .ts-quote-full{padding:0 13px 14px}
  .ts-quote-full p{font-size:14px;margin:12px 0 6px}

  /* ---------- blog: two across ---------- */
  .ts-posts{grid-template-columns:repeat(2,1fr);gap:11px}
  .ts-post-body{padding:12px 13px 15px}
  .ts-post-body h4{font-size:14px;line-height:1.2}
  .ts-post-body time{font-size:10.5px}

  /* ---------- section rhythm ---------- */
  .ts-dark .ts-sec{padding:36px 0}
  .ts-dark .ts-sechead{margin-bottom:18px}
  .ts-dark .ts-sechead .ts-h2{font-size:24px}
  .ts-dark .ts-sechead p{font-size:14.5px}
}

/* ---------- footer ----------
   Not three equal columns. Column one is a paragraph - email, WhatsApp, an
   instruction - and a paragraph in a 110px column is unreadable. So the text
   runs full width and the two link lists sit side by side underneath, which
   is where the height saving actually was. */
@media (max-width:900px){
  .footer-column,
  .footer-container .row>div[class*="col-"]{
    width:50% !important;max-width:50% !important;
    flex:0 0 50% !important;padding-left:10px;padding-right:10px}
  .footer-column:first-child,
  .footer-container .row>div[class*="col-"]:first-child{
    width:100% !important;max-width:100% !important;flex:0 0 100% !important}
  .footer-container .widget{margin-bottom:18px}
  .footer-container .widgettitle,
  .footer-container .widget-title{font-size:12px !important;letter-spacing:.08em;
    margin-bottom:9px}
  .footer-container .widget li,
  .footer-container .widget p{font-size:12.5px;line-height:1.5;margin-bottom:5px}
  .footer-container .widget_text p{font-size:12px}
}

@media (max-width:400px){
  .ts-cat-ico{width:60px;height:60px}
  .ts-cat-name{font-size:11px}
  .ts-tr-txt b{font-size:10px}
  .ts-vid-body b{font-size:11.5px}
  .ts-league .jdc-table th,
  .ts-league .jdc-table td{padding:7px 4px;font-size:11px}
}

/* ---------- price, everywhere, louder ---------- */
.ts-price{font-weight:700;letter-spacing:-.01em}
.ts-prod .ts-price{font-size:20px}
.ts-prod-foot{gap:8px;align-items:baseline}
.ts-stockdot{font-size:12px}
@media (max-width:900px){
  .ts-prod .ts-price{font-size:18px}
  .ts-prod-body h4{font-size:13.5px;line-height:1.25}
  .ts-prod-body{padding:11px 11px 13px;gap:6px}
}

/* The WPLoyalty launcher renders an empty circle over the page. */
body.ts-dark .wlr-launcher,
body.ts-dark .wlr-launcher-wrapper,
body.ts-dark [class*='wlr-launcher']{display:none !important}