/* best-ultrasonic-retainer-cleaners.html only. Builds on site.css + article.css (its TIDY KIT: rc-qpicks,
   rc-pcard, rc-pc2, rc-icards, rc-expand, rc-rels ...). Page classes start with bu-. Rebuilt 2026-10-18 (tidy). */

/* keep long chips and grid tracks from widening the column on phones */
.rc-article__main{grid-template-columns:minmax(0,1fr)}

/* hero: a line-up of the six cleaner drawings (no product photos on this page) */
.bu-hero .rc-disclose{max-width:38rem}
.bu-lineup.rc-cover--art{aspect-ratio:auto;padding:3.1rem .9rem 3rem}
.bu-lineup__grid{width:100%;max-width:34rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem .35rem}
.bu-lineup__item{position:relative;display:grid;place-items:center;padding:.35rem;border-radius:var(--r-m);background:rgb(255 255 255/.55)}
.bu-lineup__item svg{width:100%;height:auto;aspect-ratio:240/200}
.bu-lineup__item b{position:absolute;left:.4rem;top:.4rem;display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:8px;background:#fff;color:var(--aqua-900);font:600 .8125rem var(--display);box-shadow:0 0 0 1px var(--line)}
.bu-lineup__item:first-child b{background:var(--aqua);color:#fff;box-shadow:none}
.bu-lineup figcaption{color:var(--ink);font-weight:700}

/* comparison table: seven columns; the whole table fits the column on wide desktops */
.bu-table{min-width:50rem}
.bu-table td{min-width:5.5rem}
.bu-table tbody th{min-width:12rem}
.bu-table td:last-child{min-width:0}
.bu-table .bu-flag{color:var(--lav);font-weight:700}
@media (min-width:1100px) and (max-width:1199px){.rc-tsec .rc-table-hint{display:flex}}
@media (min-width:1200px){.bu-table{min-width:0;font-size:.875rem}.bu-table td{min-width:0}.bu-table tbody th{min-width:13rem}.bu-table th,.bu-table td{padding:.6rem .55rem}.bu-table thead th{white-space:normal}}
.bu-table td,.bu-table th{vertical-align:middle}

/* the six pick cards sit closer together than the page's sections */
.bu-ranked{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)}
.bu-ranked__note{padding:.55rem .8rem;border-radius:var(--r-s);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}

/* how it works: photo + three one-line rows */
.bu-how{display:grid;gap:.75rem}
@media (min-width:768px){.bu-how{grid-template-columns:.85fr 1.15fr;align-items:stretch}}
.bu-how__photo{position:relative;margin:0;border-radius:var(--r-l);overflow:hidden;background:var(--deep-2);aspect-ratio:16/8}
@media (min-width:768px){.bu-how__photo{aspect-ratio:auto;min-height:12rem}}
.bu-how__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* cleaner, tablets or brushing: three icon cards */
.bu-options{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.bu-options{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* what to look for: two columns of factor cards, the tank and power cards full width */
.bu-factors{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.bu-factors{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bu-duo{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.bu-duo figure{position:relative;margin:0;display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-m);overflow:hidden;background:var(--mist)}
.bu-duo img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (min-width:640px){.bu-duo img{aspect-ratio:16/9}}
.bu-duo figcaption{padding:.5rem .65rem;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-m) var(--r-m);font-size:.84rem;color:var(--text);line-height:1.4}
.bu-duo figcaption b{color:var(--ink)}

/* tank sizes: one aqua series, bars to scale, value printed beside each bar */
.bu-tanks{margin:0;display:grid;gap:.6rem;padding:.85rem 1rem .95rem;border-radius:var(--r-m);background:var(--ground);border:1px solid var(--line)}
.bu-tanks figcaption b{display:block;font:600 .95rem var(--display);color:var(--ink)}
.bu-tanks figcaption small{display:block;font-size:.84rem;color:var(--muted)}
.bu-tanks ul{display:grid;gap:.45rem}
.bu-tanks li{display:grid;grid-template-columns:minmax(6.5rem,9.5rem) 1fr 3.6rem;gap:.6rem;align-items:center;font-size:.875rem}
.bu-tanks__name{color:var(--ink);font-weight:700;line-height:1.25}
.bu-tanks__name small{display:block;font-weight:400;font-size:.8125rem;color:var(--muted)}
.bu-tanks__bar{height:.7rem;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.bu-tanks__bar i{display:block;height:100%;width:var(--v);min-width:4px;border-radius:4px;background:var(--aqua)}
.bu-tanks li b{font:600 .875rem var(--display);color:var(--ink);text-align:right;white-space:nowrap}
@media (max-width:420px){.bu-tanks li{grid-template-columns:1fr 3.4rem}.bu-tanks__bar{grid-column:1/-1;grid-row:2}}

/* safe use: the pacemaker card full width, then two cautions side by side */
.bu-safe{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.bu-safe{grid-template-columns:repeat(2,minmax(0,1fr))}}