
/* Hipstersbuy editorial layout: scoped to this article only */
.hb-mertra-set {
  --hb-ink: #111111;
  --hb-text: #333333;
  --hb-muted: #686868;
  --hb-border: #dedede;
  --hb-soft: #f6f6f6;
  --hb-white: #ffffff;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  color: var(--hb-text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.74;
  overflow-wrap: break-word;
}
.hb-mertra-set, .hb-mertra-set * { box-sizing: border-box; }
.hb-mertra-set h2, .hb-mertra-set h3, .hb-mertra-set p,
.hb-mertra-set figure, .hb-mertra-set ul { margin-top: 0; }
.hb-mertra-set p { margin-bottom: 21px; }
.hb-mertra-set h2 {
  margin: 66px 0 23px;
  padding-top: 19px;
  border-top: 2px solid var(--hb-ink);
  color: var(--hb-ink);
  font-size: clamp(27px, 3vw, 36px);
  line-height: 1.22;
  letter-spacing: -.025em;
  scroll-margin-top: 28px;
}
.hb-mertra-set h3 {
  margin: 29px 0 13px;
  color: var(--hb-ink);
  font-size: 21px;
  line-height: 1.35;
}
.hb-mertra-set a {
  color: var(--hb-ink);
  font-weight: 700;
  text-decoration-color: #888;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.hb-mertra-set a:hover { text-decoration-color: var(--hb-ink); }
.hb-mertra-set a:focus-visible { outline: 3px solid #555; outline-offset: 3px; }
.hb-mertra-set .hb-mertra-lede {
  margin: 0 0 29px;
  color: #242424;
  font-size: 20px;
  line-height: 1.67;
}
/* A compact, wrapping H2-only contents navigation */
.hb-mertra-set .hb-mertra-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  width: 100%;
  padding: 12px;
  margin: 31px 0 43px;
  border: 1px solid var(--hb-border);
  background: var(--hb-soft);
}
.hb-mertra-set .hb-mertra-toc a {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid #cacaca;
  background: var(--hb-white);
  color: var(--hb-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  text-align: center;
}
.hb-mertra-set .hb-mertra-toc a:hover {
  background: var(--hb-ink);
  border-color: var(--hb-ink);
  color: var(--hb-white);
}
/* WYSIWYG-safe two-column comparison: each product stays in one table cell. */
.hb-mertra-set .hb-mertra-compare {
  width: 100%;
  margin: 32px 0 36px;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: transparent;
}
.hb-mertra-set .hb-mertra-compare .hb-mertra-slot {
  width: 50%;
  padding: 0 10px 0 0;
  border: 0;
  vertical-align: top;
  background: transparent;
}
.hb-mertra-set .hb-mertra-compare .hb-mertra-slot:last-child { padding: 0 0 0 10px; }
.hb-mertra-set .hb-mertra-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--hb-border);
  background: var(--hb-white);
  color: var(--hb-ink);
  text-decoration: none;
  font-weight: 400;
}
.hb-mertra-set .hb-mertra-card:hover { border-color: #898989; text-decoration: none; }
.hb-mertra-set .hb-mertra-card-media {
  display: block;
  width: 100%;
  height: 370px;
  background: #f3f3f3;
  overflow: hidden;
}
.hb-mertra-set .hb-mertra-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.hb-mertra-set .hb-mertra-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 22px 24px;
}
.hb-mertra-set .hb-mertra-eyebrow {
  display: block;
  margin: 0 0 9px;
  color: var(--hb-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hb-mertra-set .hb-mertra-card-title {
  display: block;
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.34;
  color: var(--hb-ink);
}
.hb-mertra-set .hb-mertra-card-description {
  display: block;
  margin: 0 0 20px;
  color: #494949;
  font-size: 15px;
  line-height: 1.67;
  font-weight: 400;
}
.hb-mertra-set .hb-mertra-card-action {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding: 11px 17px;
  background: var(--hb-ink);
  border: 1px solid var(--hb-ink);
  color: var(--hb-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.hb-mertra-set .hb-mertra-card:hover .hb-mertra-card-action { background: var(--hb-white); color: var(--hb-ink); }
/* One purposeful caveat, rather than recurring callout boxes */
.hb-mertra-set .hb-mertra-note {
  margin: 27px 0 30px;
  padding: 22px 25px;
  border-left: 4px solid var(--hb-ink);
  background: var(--hb-soft);
}
.hb-mertra-set .hb-mertra-note strong {
  display: block;
  margin-bottom: 7px;
  color: var(--hb-ink);
}
.hb-mertra-set .hb-mertra-note p { margin-bottom: 0; }
.hb-mertra-set .hb-mertra-checks { margin: 13px 0 24px; padding-left: 23px; }
.hb-mertra-set .hb-mertra-checks li { margin-bottom: 9px; padding-left: 4px; }
/* Stable FAQ: ordinary semantic H3, no editor-generated details labels */
.hb-mertra-set .hb-mertra-faq-item {
  margin: 0 0 12px;
  padding: 18px 22px 20px;
  border: 1px solid var(--hb-border);
  background: var(--hb-white);
}
.hb-mertra-set .hb-mertra-faq-item h3 {
  margin: 0 0 10px;
  color: var(--hb-ink);
  font-size: 18px;
  line-height: 1.4;
}
.hb-mertra-set .hb-mertra-faq-item p {
  margin: 0;
  font-size: 16px;
  line-height: 1.68;
}
/* Concluding collection action, not another product block */
.hb-mertra-set .hb-mertra-final {
  margin: 63px 0 0;
  padding: clamp(27px, 4.5vw, 46px);
  border: 2px solid var(--hb-ink);
  background: var(--hb-soft);
}
.hb-mertra-set .hb-mertra-final > strong {
  display: block;
  margin-bottom: 13px;
  color: var(--hb-ink);
  font-size: clamp(25px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.hb-mertra-set .hb-mertra-final p { margin-bottom: 21px; }
.hb-mertra-set .hb-mertra-main-action {
  display: inline-block;
  padding: 13px 20px;
  background: var(--hb-ink);
  border: 1px solid var(--hb-ink);
  color: var(--hb-white);
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
}
.hb-mertra-set .hb-mertra-main-action:hover {
  background: var(--hb-white);
  color: var(--hb-ink);
  text-decoration: none;
}
@media (max-width: 760px) {
  .hb-mertra-set { font-size: 16px; line-height: 1.71; }
  .hb-mertra-set h2 { margin-top: 53px; }
  .hb-mertra-set .hb-mertra-lede { font-size: 18px; }
  .hb-mertra-set .hb-mertra-toc a { flex: 1 1 calc(50% - 9px); }
  .hb-mertra-set .hb-mertra-compare,
  .hb-mertra-set .hb-mertra-compare tbody,
  .hb-mertra-set .hb-mertra-compare tr,
  .hb-mertra-set .hb-mertra-compare .hb-mertra-slot { display: block; width: 100%; }
  .hb-mertra-set .hb-mertra-compare .hb-mertra-slot,
  .hb-mertra-set .hb-mertra-compare .hb-mertra-slot:last-child { padding: 0; }
  .hb-mertra-set .hb-mertra-compare .hb-mertra-slot + .hb-mertra-slot { margin-top: 24px; }
  .hb-mertra-set .hb-mertra-card-media { height: 390px; }
}
@media (max-width: 460px) {
  .hb-mertra-set .hb-mertra-toc a { flex-basis: 100%; }
  .hb-mertra-set .hb-mertra-card-media { height: auto; }
  .hb-mertra-set .hb-mertra-card-media img { height: auto; max-height: 460px; }
  .hb-mertra-set .hb-mertra-card-body { padding: 20px; }
  .hb-mertra-set .hb-mertra-note { padding: 20px; }
  .hb-mertra-set .hb-mertra-main-action { display: block; text-align: center; }
}
