/* loop-dream-earplugs-review.html only. Shared parts come from site.css, article.css (incl. its tidy kit:
   rp-asec, rp-expand, rp-itiles, rp-pc, rp-qline, rp-srcline, rp-safeline) and listing.css. Prefix lr-. */

/* hero: the two buttons under the disclosure line; chips on one line */
.lr-herocta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.rp-ahero__tags .rp-kind{align-self:center}
.rp-ahero{padding-bottom:clamp(1.25rem,1rem + 1vw,1.75rem)}
/* the phone/tablet TOC is hidden only from 1200 (where the rail turns on), so only then may the next block
   lose its top margin (review r2 P3-5: the rule at 1024 made the TOC touch the verdict box) */
@media (min-width:1200px){.rp-amain>.rp-toc+*{margin-top:0}}
/* jumps land at html's own scroll-padding (site.css), so no section adds a margin of its own (review P3-1) */
.rp-asec,.rp-verdictbox{scroll-margin-top:0}
/* 768-1023: the hero photo is full width; cap it so the verdict stays near the first screen (review P3-9) */
@media (min-width:768px) and (max-width:1023px){.rp-acover img{max-height:22rem}}

/* verdict: three one-line rows (best for / skip it if / the catch) */
.lr-vrows{display:grid;gap:.55rem;margin-top:1rem}
.lr-vrow{display:grid;grid-template-columns:7.25rem minmax(0,1fr);gap:.75rem;align-items:center;padding:.7rem .9rem;border-radius:var(--r-m);background:var(--ground);border:1px solid var(--line)}
.lr-vrow dt{display:flex;align-items:center;gap:.45rem;font:700 .95rem/1.3 var(--display);color:var(--ink)}
.lr-vrow dt .rp-ic{width:1.5rem;height:1.5rem;padding:.25rem;border-radius:999px;color:#fff;stroke-width:2.6;align-self:center}
.lr-vrow--yes dt .rp-ic{background:var(--ok)}
.lr-vrow--no dt .rp-ic{background:var(--bad)}
.lr-vrow--catch dt .rp-ic{background:var(--moon-text)}
.lr-vrow dd{color:var(--ink);font-size:.98rem;line-height:1.5}
@media (max-width:479px){.lr-vrow{grid-template-columns:minmax(0,1fr);gap:.2rem}}
.lr-expand{margin-top:.75rem}
.lr-who{grid-template-columns:minmax(0,1fr)}
.lr-who h3{font-size:1rem;margin-bottom:.45rem}
.lr-who ul{font-size:.93rem}
@media (min-width:640px){.lr-who{grid-template-columns:1fr 1fr;gap:1.25rem}}
.rp-verdictbox__cta{margin-top:1rem}

/* specs: eight icon tiles, four per row on wide columns */
@media (min-width:768px){.lr-specs{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* two compact sample quotes side by side */
.lr-quotes{display:grid;gap:.7rem}
@media (min-width:640px){.lr-quotes{grid-template-columns:1fr 1fr}}

/* fit: the drawing beside the insertion steps */
.lr-fit{display:grid;gap:1rem;align-items:start;padding:clamp(.9rem,.7rem + .8vw,1.25rem);border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.lr-fit__media img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-m);background:var(--lav)}
.lr-fit__media figcaption{margin-top:.4rem;font-size:.8rem;color:var(--muted)}
.lr-fit__side,.lr-fit__body{display:grid;gap:.75rem;align-content:start}
.lr-fit__body h3{font-size:1.12rem}
@media (min-width:768px){.lr-fit{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:1.25rem}}
.lr-steps4{display:grid;gap:.45rem;counter-reset:st4}
.lr-steps4 li{position:relative;display:flex;align-items:center;gap:.7rem;min-height:2.6rem;padding:.4rem .7rem .4rem .45rem;border-radius:12px;background:var(--ground);font-size:.93rem;line-height:1.4;color:var(--ink)}
.lr-steps4 li::before{counter-increment:st4;content:counter(st4);display:grid;place-items:center;flex:none;width:1.8rem;height:1.8rem;border-radius:999px;background:var(--night);color:var(--moon);font:800 .85rem/1 var(--display)}
.lr-rule{display:flex;gap:.5rem;align-items:flex-start;padding:.55rem .75rem;border-radius:12px;background:var(--lav);font-size:.9rem;line-height:1.45;color:var(--ink)}
.lr-rule .rp-ic{margin-top:.1rem;color:var(--act)}

/* the two tip types */
.lr-tips{display:grid;gap:.7rem}
.lr-tip{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:.85rem;align-items:center;padding:.85rem 1rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.lr-tip__name{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem;margin-bottom:.2rem;font:700 1.02rem/1.3 var(--display);color:var(--ink)}
.lr-tip__name .rp-pill{font-size:.78rem;padding:.16rem .55rem}
.lr-tip div>p:last-child{font-size:.92rem;line-height:1.45;color:var(--text)}
@media (min-width:640px){.lr-tips{grid-template-columns:1fr 1fr}}

/* the Loop range: three columns that fit a phone without a sideways scroll */
.lr-range .rp-table{min-width:0}
.lr-range .rp-table td:nth-child(2){white-space:nowrap}
.lr-range .rp-table th:first-child,.lr-range .rp-table td:first-child{min-width:0}
.rp-table .lr-row-top>*,.rp-table tbody tr.lr-row-top:nth-child(odd)>*{background:#fffaf0}
.rp-table .lr-row-top th{box-shadow:inset 4px 0 0 var(--moon),1px 0 0 var(--line)}
@media (max-width:599px){
  .lr-range .rp-table{font-size:.86rem}
  .lr-range .rp-table th,.lr-range .rp-table td{padding:.6rem .55rem}
  .lr-range .rp-table td:nth-child(2){white-space:normal;min-width:5.2rem}
  .lr-range .rp-table th:first-child{position:static;box-shadow:none}
}

/* cleaning: four short steps as numbered tiles */
.lr-clean{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;counter-reset:cl}
.lr-clean li{position:relative;display:flex;flex-direction:column;gap:.45rem;padding:.75rem .8rem;border-radius:var(--r-m);background:#fff;border:1px solid var(--line);font-size:.9rem;line-height:1.4;color:var(--ink)}
.lr-clean li::after{counter-increment:cl;content:counter(cl);position:absolute;right:.6rem;top:.6rem;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:999px;background:var(--lav);color:var(--chip-text);font:800 .78rem/1 var(--display)}
.lr-clean__ico{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:12px;background:var(--lav);color:var(--act)}
.lr-clean li:last-child .lr-clean__ico{background:var(--bad-tint);color:var(--bad)}
@media (min-width:768px){.lr-clean{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* the two tip-care tiles: icon beside the text on phones, side by side from 640 */
.lr-care{grid-template-columns:minmax(0,1fr)}
.lr-care .rp-itile{display:grid;grid-template-columns:2.5rem minmax(0,1fr);column-gap:.8rem;row-gap:.15rem;align-items:start}
.lr-care .rp-itile__ico{grid-row:1 / span 2;margin:0}
@media (min-width:640px){.lr-care{grid-template-columns:1fr 1fr}}

/* alternatives */
.lr-alts{display:grid;gap:.9rem}
@media (min-width:640px){.lr-alts{grid-template-columns:1fr 1fr}}
.lr-alt{display:flex;flex-direction:column;gap:.6rem;padding:1rem 1.1rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.lr-alt__head{display:flex;align-items:center;gap:.85rem}
.lr-alt__name{margin-top:.3rem;font-size:1.15rem}
.lr-alt>p{font-size:.93rem;line-height:1.5;color:var(--text)}
.lr-alt__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin-top:auto;padding-top:.7rem;border-top:1px dashed var(--line-2)}

/* desktop rail: the at-a-glance card */
.lr-railcard{display:grid;gap:.65rem}
.lr-railcard .rp-railcard__title{margin-bottom:0}
.lr-railcard__txt{font-size:.9rem;color:var(--muted)}

/* in-card links that wrap keep their chevron at the end of the text */
.lr-rank1{display:inline;white-space:normal;line-height:1.45}
.lr-rank1 .rp-ic{display:inline-block;vertical-align:-.15em;margin-left:.15rem}