/* Barebones review layout (post tag `review-barebones`) — see review-v2/README.md.
   Ported from the "Barebones Article Mockup": a plain, early-2000s review column.
   Deliberately no shadows, gradients, rounded corners, buttons or sticky elements.
   Light palette only (the mockup's dark palette is left out, as with Review v2).
   The theme's Tailwind preflight sets `* { border: 0 solid }`, so every border below
   is declared in full. */

.rb-body {
  --rb-page: #d9d9d9;
  --rb-paper: #fff;
  --rb-text: #111;
  --rb-muted: #444;
  --rb-line: #999;
  --rb-soft: #eee;
  --rb-blue: #0000bb;
  --rb-visited: #551a8b;
  --rb-winner: #fffbd1;
  --rb-green: #e4f5dd;
  --rb-sans: Verdana, Tahoma, Arial, sans-serif;
  --rb-serif: Georgia, 'Times New Roman', serif;

  margin: 0;
  background: var(--rb-page);
  color: var(--rb-text);
  font-family: var(--rb-sans);
  font-size: 15px;
  line-height: 1.55;
}
.rb-body *,
.rb-body *::before,
.rb-body *::after {
  box-sizing: border-box;
}
html:has(.rb-body) {
  scroll-behavior: smooth;
  scroll-padding-top: 10px;
}
.rb-body img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Links: default-looking blue, underlined, visibly different once visited. */
.rb-page a {
  color: var(--rb-blue);
  text-decoration: underline;
}
.rb-page a:visited {
  color: var(--rb-visited);
}
.rb-page a:focus-visible {
  outline: 2px solid var(--rb-blue);
  outline-offset: 2px;
}
/* Links to the Dosaze store read slightly heavier so they are easy to spot. */
.rb-page a.rb-store {
  font-weight: bold;
}

.rb-main {
  display: block;
}
.rb-page {
  width: min(100%, 790px);
  margin: 0 auto;
  background: var(--rb-paper);
  padding: 10px 18px 54px;
  border-left: 1px solid var(--rb-line);
  border-right: 1px solid var(--rb-line);
}

.rb-masthead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 8px;
}
.rb-body .rb-logo {
  height: 34px;
  width: auto;
}

.rb-page h1,
.rb-page h2,
.rb-page h3 {
  font-family: var(--rb-serif);
  line-height: 1.14;
  color: var(--rb-text);
  font-weight: bold;
}
.rb-page h1 {
  font-size: 36px;
  margin: 5px 0 8px;
  letter-spacing: -0.3px;
}
.rb-page h2 {
  font-size: 26px;
  margin: 28px 0 10px;
  border-bottom: 2px solid var(--rb-text);
  padding-bottom: 3px;
}
.rb-page h3 {
  font-size: 21px;
  margin: 0 0 7px;
}
.rb-page p {
  margin: 8px 0 13px;
}
.rb-page ol,
.rb-page ul {
  list-style: revert;
}
.rb-page .rb-small {
  font-size: 12px;
  color: var(--rb-muted);
}

.rb-crumb {
  font: 12px Arial, sans-serif;
  color: var(--rb-muted);
  padding: 6px 0;
  border-top: 1px solid var(--rb-line);
  border-bottom: 1px solid var(--rb-line);
}
.rb-page .rb-byline {
  font-size: 12px;
  color: var(--rb-muted);
  margin: 4px 0 16px;
  padding-bottom: 6px;
  border-bottom: 1px dotted var(--rb-line);
}

.rb-intro {
  font-family: var(--rb-serif);
  font-size: 17px;
  line-height: 1.62;
}
.rb-intro p {
  margin: 0 0 14px;
}
.rb-featured {
  margin: 4px 0 16px;
}
.rb-featured img {
  width: 100%;
  border: 1px solid var(--rb-line);
  padding: 3px;
  background: #fff;
}
.rb-featured figcaption {
  font: 11px var(--rb-sans);
  color: var(--rb-muted);
  margin-top: 4px;
}

.rb-page .rb-short-answer {
  font: 13px/1.55 var(--rb-sans);
  border-top: 1px solid var(--rb-line);
  border-bottom: 1px solid var(--rb-line);
  padding: 8px 0;
  margin: 17px 0 22px;
}

.rb-method {
  background: var(--rb-soft);
  border: 1px solid var(--rb-line);
  padding: 10px 12px;
}
.rb-method ol {
  margin: 5px 0;
  padding-left: 22px;
}

/* Ranking table */
.rb-ranking {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 16px;
  font-size: 12px;
}
.rb-ranking th,
.rb-ranking td {
  border: 1px solid var(--rb-line);
  padding: 7px 6px;
  text-align: left;
  vertical-align: top;
}
.rb-ranking th {
  background: var(--rb-soft);
  font-family: Arial, sans-serif;
  font-weight: bold;
}
.rb-ranking .rb-winner-row {
  background: var(--rb-winner);
  font-weight: bold;
}
.rb-ranking .rb-rank {
  width: 38px;
  text-align: center;
}
.rb-ranking .rb-grade {
  width: 48px;
  text-align: center;
}
.rb-ranking .rb-bestfor {
  width: 145px;
}
.rb-mobile-only {
  display: none;
}

/* Reviews */
.rb-review {
  padding: 20px 0 5px;
  border-bottom: 1px solid var(--rb-line);
  scroll-margin-top: 8px;
}
.rb-review::after {
  /* Keeps the floated product photo inside its own review. */
  content: '';
  display: table;
  clear: both;
}
.rb-winner-review {
  border-top: 2px solid var(--rb-text);
}
.rb-review-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.rb-review-no {
  font: bold 12px Arial, sans-serif;
  background: var(--rb-text);
  color: var(--rb-paper);
  padding: 2px 5px;
}
.rb-photo {
  float: right;
  width: 205px;
  margin: 1px 0 10px 14px;
  border: 1px solid var(--rb-line);
  background: #fff;
  padding: 4px;
}
.rb-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.rb-photo figcaption {
  font-size: 10px;
  color: #333;
  margin-top: 3px;
}
.rb-page .rb-facts {
  font-size: 12px;
  margin: 5px 0 10px;
  border-top: 1px dotted var(--rb-line);
  border-bottom: 1px dotted var(--rb-line);
  padding: 5px 0;
}
.rb-proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}
.rb-proscons > div {
  border: 1px solid var(--rb-line);
  padding: 7px;
  background: var(--rb-soft);
}
.rb-proscons .rb-pros {
  background: var(--rb-green);
}
.rb-proscons b {
  font-family: Arial, sans-serif;
  font-size: 13px;
}
.rb-proscons ul {
  margin: 4px 0;
  padding-left: 18px;
  font-size: 12px;
}
.rb-review p {
  font-family: var(--rb-serif);
  font-size: 16px;
}
.rb-review p.rb-facts,
.rb-review p.rb-small,
.rb-review p.rb-back {
  font-family: var(--rb-sans);
}
.rb-test-photo {
  clear: both;
  width: 100%;
  max-width: 620px;
  margin: 14px auto 16px;
}
.rb-test-photo img {
  width: 100%;
  border: 1px solid var(--rb-line);
  padding: 3px;
  background: #fff;
}
.rb-test-photo figcaption {
  font-size: 11px;
  color: var(--rb-muted);
  margin-top: 4px;
}
/* Embedded test videos (body blocks with a `video` URL), shared with the quick layout. */
.rb-video iframe,
.rb-video video,
.rb-video .wp-video {
  display: block;
  width: 100% !important;
  max-width: 100%;
}
.rb-video iframe {
  height: auto;
  aspect-ratio: 16 / 9;
}
.rb-review p.rb-back {
  font-size: 11px;
  text-align: right;
  clear: both;
}

#conclusion p {
  font-family: var(--rb-serif);
  font-size: 16px;
}

@media (max-width: 620px) {
  .rb-body {
    font-size: 14px;
    background: var(--rb-paper);
  }
  .rb-page {
    border: 0;
    padding: 8px 16px 42px;
  }
  .rb-page h1 {
    font-size: 27px;
    margin-top: 1px;
  }
  .rb-crumb {
    display: none;
  }
  .rb-page .rb-byline {
    font-size: 11px;
  }
  .rb-intro {
    font-size: 16px;
    line-height: 1.58;
  }
  .rb-page .rb-short-answer {
    font-size: 13px;
    margin: 15px 0 20px;
  }

  /* Ranking table → two compact lines per pillow, no horizontal scroll:
       1  Dosaze Contoured Orthopedic        Grade A
          Overall neck support   Read review / see price */
  .rb-ranking,
  .rb-ranking tbody {
    display: block;
  }
  .rb-ranking thead {
    display: none;
  }
  .rb-ranking {
    border: 1px solid var(--rb-line);
    font-size: 13px;
  }
  .rb-ranking tr {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto auto;
    grid-template-areas:
      'rank name name grade'
      'rank best links links';
    column-gap: 8px;
    row-gap: 1px;
    padding: 7px 8px;
    border-bottom: 1px solid var(--rb-line);
  }
  .rb-ranking tr:last-child {
    border-bottom: 0;
  }
  .rb-ranking td {
    display: block;
    border: 0;
    padding: 0;
    width: auto;
  }
  .rb-ranking .rb-rank {
    grid-area: rank;
    width: auto;
    text-align: left;
    font-weight: bold;
  }
  .rb-ranking .rb-name {
    grid-area: name;
    font-weight: bold;
  }
  .rb-ranking .rb-grade {
    grid-area: grade;
    width: auto;
    text-align: right;
    white-space: nowrap;
  }
  .rb-ranking .rb-bestfor {
    grid-area: best;
    width: auto;
    font-size: 12px;
    color: var(--rb-muted);
    font-weight: normal;
  }
  .rb-ranking .rb-links {
    grid-area: links;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
  }
  .rb-ranking .rb-mobile-only {
    display: inline;
    font-weight: normal;
    color: var(--rb-muted);
    font-size: 11px;
  }

  .rb-photo {
    float: none;
    width: 100%;
    margin: 8px 0;
  }
  .rb-photo img {
    aspect-ratio: auto;
    max-height: 260px;
    margin: 0 auto;
  }
  .rb-proscons {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.rb-body) {
    scroll-behavior: auto;
  }
}