/* WAUW · läsbarhet på telefon · 2026-10-11
   Delad av sidorna som använder sidmallen (cx-mall). Laddas efter cx-mall och ändrar bara telefonbredd.
   Storlekarna i sig ligger i css/wauw-tokens.css (--fs-body, --fs-lead), inte här.
   Bakgrund: jämförelse mot apple.com och nike.com på iPhone. Spärrade versaler i mono var svåra att läsa och
   bröts över två rader, och pris- och villkorsraden låg på 12,5 px. */
@media (max-width: 599px) {
  /* Etiketter ovanför rubriker: mindre spärrning och en aning större, så de läses som ord och oftare ryms på en rad */
  .cx .cx-k,
  .cx .cx-strip-l {
    font-size: 12px;
    letter-spacing: .1em;
  }
  /* Pris, tid och villkor under knapparna är beslutsinformation, inte dekor */
  .cx .cx-fr {
    font-size: 14px;
  }
  .cx .cx-proof,
  .cx .cx-link {
    font-size: 15px;
  }
  /* Ingressen i startsidans pappersruta följer samma skala som övriga ingresser */
  .cx-start .cx-hero .cx-lead {
    font-size: var(--fs-lead);
  }
  /* Brödtext: tydligare kontrast och tätare radavstånd. 1,65 är för långa rader på dator;
     på en smal spalt gör det texten gles och svårare att följa. */
  .cx p,
  .cx li {
    line-height: 1.55;
    color: rgba(242, 237, 227, .92);
  }
  /* Hjälten kant i kant: filmen och pappersrutan tar hela bredden, så texten får 32 px mer spalt
     och rutan läses som en sida, inte som ett kort i ett kort. */
  .cx-start .cx-hero .cx-hero-img {
    margin: 0;
    width: 100%;
  }
  .cx-start .cx-hero .cx-hero-img figcaption {
    padding: 6px var(--g) 0;
  }
  .cx-start .cx-hero-txt {
    margin: 6px 0 0;
    max-width: none;
    padding: 26px var(--g) 28px;
  }
  /* Rubriker i listor och steg: lite större, så de bär strukturen när man skumläser */
  .cx h3 {
    font-size: 22px;
  }
  /* Numrerade steg: smalare nummerspalt (mer bredd åt texten) och pris/tid på egen rad under rubriken */
  .cx .cx-rows > li {
    grid-template-columns: 30px 1fr;
    gap: 4px 10px;
  }
  .cx .cx-rows h3 .cx-meta {
    display: block;
    margin: 4px 0 0;
  }
  /* Chattbubblan täckte brödtext i högerkanten. Mindre och närmare kanten på telefon. */
  #wauw-assistant-bubble {
    width: 48px !important;
    height: 48px !important;
    right: 12px !important;
  }
  #wauw-assistant-bubble svg {
    width: 22px;
    height: 22px;
  }
  /* Startsidans recensioner (2026-10-11): sektionen var 1,15 skärm på telefon mot 0,66 på dator.
     Rubriken säger redan "alla fem stjärnor" och länken under visar betyget, så stjärnraden per citat
     upprepar bara samma sak. Två citat räcker för socialt bevis; det tredje finns kvar från 600 px. */
  .cx-start .cx-quotes .c-st {
    display: none;
  }
  .cx-start .cx-quotes > li {
    padding: 18px 0;
  }
  .cx-start .cx-quotes > li:nth-child(n+3) {
    display: none;
  }
  .cx-start .cx-quotes > li:nth-child(2) {
    border-bottom: 1px solid var(--line);
  }
  .cx-start .cx-quotes .c-q {
    font-size: 18px;
    margin-bottom: 8px;
  }
}