/* retainer-brite-vs-efferdent: page-only parts. Loads after site.css and article.css and reuses their tokens
   and the TIDY KIT (rc-shead, rc-choose, rc-icards--rows, rc-expand, rc-srcline, rc-rels).
   Page classes start with bve-. Side A (Retainer Brite) wears lavender, side B (Efferdent) aqua, as on the homepage. */

/* ---------- duel header: photo, soak ring, maker, name, one water line ---------- */
.bve-duel{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;align-items:stretch}
.bve-side{margin:0;display:flex;flex-direction:column;min-width:0;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.bve-side--a{border-color:var(--lav-line)}
.bve-side__media{position:relative;padding:.5rem .5rem 0}
.bve-side__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:calc(var(--r-xl) - 8px);background:var(--mist)}
.bve-side__ring.rc-ring{position:absolute;right:1rem;bottom:-1.6rem;width:4.4rem;height:4.4rem;padding:.25rem;border-radius:999px;background:#fff;box-shadow:0 6px 16px -8px rgb(16 35 43/.35)}
.bve-side__ring.rc-ring svg{width:100%;height:100%}
.bve-side__ring.rc-ring b{font-size:1.1rem}
.bve-duel__vs{position:absolute;z-index:2;top:50%;right:calc(-1.25rem - .375rem - 1px);transform:translateY(-50%);display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:999px;background:var(--rasp);color:#fff;font:600 .875rem var(--display);box-shadow:0 0 0 4px var(--ground)}
.bve-side__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;padding:.75rem .85rem 1rem}
.bve-side__maker{font-size:.8125rem;font-weight:700;color:var(--muted);line-height:1.3;padding-right:4.6rem;min-height:2.1em}
.bve-side--a .bve-side__maker{color:var(--lav)}
.bve-side__name{font:600 clamp(1rem,.9rem + .45vw,1.2rem)/1.25 var(--display);color:var(--ink)}
.bve-side__line{display:inline-flex;align-items:center;gap:.35rem;font-size:.875rem;color:var(--text);line-height:1.35}
.bve-side__line .ic{color:var(--aqua)}
.bve-side--a .bve-side__line .ic{color:var(--lav)}
@media (max-width:479px){
  .bve-side__maker{padding-right:0;min-height:0;margin-top:1.6rem}
  .bve-side__ring.rc-ring{right:.6rem;width:3.9rem;height:3.9rem}
  .bve-side__ring.rc-ring b{font-size:1rem}
}
/* shorter photos where the duel spans the column */
@media (min-width:640px) and (max-width:1023px){.bve-side__media img{aspect-ratio:4/3}}
@media (min-width:1024px){.bve-side__media img{aspect-ratio:1/1}}

/* ---------- choose cards: Retainer Brite's in lavender ---------- */
.rc-choose__card .rc-btn{justify-self:start;margin-top:.15rem}
.bve-choose--a .rc-choose__art{background:var(--lav-tint)}
.bve-choose--a .rc-choose__art svg{--fizz:#d9d0f6;--fizz-tint:#efecfb;--fizz-dark:#5b3fb0}
@media (max-width:479px){.rc-choose__card .rc-btn{justify-self:stretch}}

/* ---------- table: maker under each name in the head ---------- */
.bve-th{display:grid;gap:.1rem;white-space:normal}
.bve-th small{font:500 .75rem/1.3 var(--body);color:var(--muted)}
.bve-th--a{color:#4a3292}
/* three columns that fit a phone: both tablets stay in view, no sideways swipe */
.bve-table{min-width:0}
.bve-table thead th{white-space:normal}
.bve-table tbody th{width:26%;font-weight:600;color:var(--ink)}
@media (max-width:479px){.bve-table{font-size:.86rem}.bve-table th,.bve-table td{padding:.55rem .55rem}.bve-table tbody th{min-width:0;width:30%;font-size:.86rem}}

/* ---------- difference rows ---------- */
.bve-nowrap{white-space:nowrap}
.rc-icard p a{color:var(--aqua-800);font-weight:700}
.bve-claims{display:grid;gap:.6rem}
@media (min-width:640px){.bve-claims{grid-template-columns:1fr 1fr}}
.bve-claims .rc-claim{background:#fff}
.bve-claims .rc-claim:first-child{background:var(--lav-tint);border-color:var(--lav-line)}
.bve-claims .rc-claim blockquote{font-size:.95rem}

/* ---------- one method line under the FAQ ---------- */
.bve-method{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem;line-height:1.5;color:var(--muted)}
.bve-method .ic{flex:none;width:1.05rem;height:1.05rem;margin-top:.12rem;color:var(--aqua)}
.bve-method a{color:var(--aqua-800);font-weight:700}

/* ---------- related ---------- */
.bve-taglinks{display:flex;flex-wrap:wrap;gap:.5rem}
.rc-rel__media.rc-art{display:grid;place-items:center}

/* ---------- related: 3 cards on one row from 768 (no card left alone); the heading never squeezes ---------- */
.rc-related__head{flex-wrap:wrap}
.rc-related__head h2{flex:none}
@media (min-width:768px){
  .rc-rels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rc-rel{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;gap:.6rem;padding:.5rem .5rem .85rem}
  .rc-rel__media{aspect-ratio:16/9}
  .rc-rel__media>svg{position:absolute;top:6%;left:50%;height:88%;width:auto;transform:translateX(-50%)}
  .rc-rel__body{padding-inline:.35rem}
}