/* silk-vs-satin-pillowcase.html only. Shared parts come from site.css, article.css (incl. its tidy kit:
   rp-asec, rp-compare, rp-qline, rp-cited, rp-srcline) and listing.css. Prefix sv-. */

/* hero: chips on one line; the duel photos get half the hero on desktop */
.rp-ahero__tags .rp-kind{align-self:center}
.rp-ahero{padding-bottom:clamp(1.25rem,1rem + 1vw,1.75rem)}
.sv-duel figcaption{margin-top:.7rem;text-align:center;font-size:.82rem;color:var(--muted)}
/* equal caption boxes keep both photos on one line when one caption wraps */
.sv-duel .rp-ab__side span{min-height:3.3em;line-height:1.65;text-wrap:balance}
@media (max-width:1023px){.sv-duel .rp-ab{max-width:32rem}}
@media (min-width:1024px){
  .sv-duel .rp-ab{gap:1.1rem}
  .rp-ahero__grid--media{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem}
}
/* 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 first card) */
@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,.sv-claims,.sv-choose{scroll-margin-top:0}

/* which one fits you: two split cards first */
.sv-choose{display:grid;gap:.8rem}
@media (min-width:640px){.sv-choose{grid-template-columns:1fr 1fr}}
.sv-pick{display:flex;flex-direction:column;gap:.7rem;padding:1rem 1.1rem 1.05rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);border-top:5px solid var(--lilac-2);box-shadow:var(--sh-1)}
.sv-pick--b{border-top-color:var(--moon)}
.sv-pick__head{display:flex;align-items:center;gap:.7rem}
.sv-pick__ico{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:12px;background:var(--lav);color:var(--act);flex:none}
.sv-pick--b .sv-pick__ico{background:var(--moon-soft);color:var(--moon-text)}
.sv-pick h3{font-size:1.2rem}
.sv-pick .rp-checks{font-size:.94rem;color:var(--ink)}
.sv-pick .rp-more{margin-top:auto}

/* the one comparison table: a source column, an icon on each row head */
.sv-rh{display:inline-flex;align-items:center;gap:.45rem;font:700 .95rem/1.3 var(--display);color:var(--ink)}
.sv-rh .rp-ic{flex:none;width:1.6rem;height:1.6rem;padding:.3rem;border-radius:8px;background:var(--lav);color:var(--act)}
@container (min-width:42rem){
  .sv-compare .rp-compare__table td:last-child{text-align:left;padding-right:.75rem;font-size:.82rem;color:var(--muted)}
  .sv-compare .rp-compare__table td{line-height:1.4}
}
@container (max-width:41.99rem){
  .sv-compare .rp-compare__table td:last-child{font-size:.82rem;color:var(--muted)}
  .sv-compare .rp-compare__table td:last-child::before{content:attr(data-label) ": ";display:inline;margin:0;font-size:inherit}
}

/* example care labels */
.sv-tags{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:.6rem;padding:1.1rem clamp(.75rem,.5rem + 1vw,1.5rem);border-radius:var(--r-l);background:linear-gradient(180deg,var(--lav),var(--ground));border:1px solid var(--line)}
.sv-tag{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:.2rem;width:100%;max-width:14rem;padding:1.2rem .8rem 1rem;border-radius:12px 12px 20px 20px;background:#fff;border:1px solid var(--line-2);border-top:4px solid var(--lilac);box-shadow:var(--sh-1);text-align:center}
.sv-tag__name{font:700 .95rem/1.25 var(--display);color:var(--ink)}
.sv-tag__k{margin-top:.5rem;font:700 .75rem/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sv-tag__v{font:800 clamp(1.05rem,.95rem + .5vw,1.35rem)/1.2 var(--display);color:var(--chip-text)}
.sv-tags .sv-tags__vs{align-self:center;width:2.6rem;height:2.6rem;font-size:.85rem;box-shadow:0 0 0 4px #fff,0 8px 18px -10px rgb(232 184 74/.9)}
.sv-tags figcaption{grid-column:1 / -1;margin-top:.3rem;text-align:center;font-size:.84rem;color:var(--muted)}

/* momme scale */
.sv-momme{padding:1.1rem 1.25rem 1rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.sv-momme__track,.sv-momme__ticks{position:relative;margin-inline:.9rem}
.sv-momme__track{height:.85rem;margin-top:.6rem;border-radius:999px;background:var(--lav)}
.sv-momme__band{position:absolute;top:0;bottom:0;left:31.25%;width:37.5%;border-radius:999px;background:linear-gradient(90deg,var(--lilac),var(--lilac-2))}
.sv-momme__mark{position:absolute;top:50%;left:50%;width:1.55rem;height:1.55rem;transform:translate(-50%,-50%);border-radius:999px;background:radial-gradient(circle at 36% 34%,#fff8de,var(--moon) 64%,#d4a03a);border:3px solid #fff;box-shadow:0 4px 12px -4px rgb(28 26 51/.45)}
.sv-momme__ticks{height:1.5rem;margin-top:.55rem}
.sv-momme__ticks span{position:absolute;top:0;transform:translateX(-50%);font:700 .875rem/1.4 var(--display);color:var(--ink)}
.sv-momme__keys{display:flex;flex-wrap:wrap;gap:.45rem 1.25rem;margin-top:.55rem;font-size:.875rem;color:var(--muted)}
.sv-momme__keys span{display:inline-flex;align-items:center;gap:.45rem}
.sv-key{display:inline-block;flex:none;width:.95rem;height:.95rem;border-radius:999px}
.sv-key--band{background:var(--lilac-2)}
.sv-key--mark{background:var(--moon);box-shadow:inset 0 0 0 2px #fff,0 0 0 1px #d4a03a}

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

/* hair and skin claims box: its title is an h2 for the outline, sized as a callout title */
.sv-claims h2.rp-callout__title{font-size:1.1rem}