/** Shopify CDN: Minification failed

Line 3135:0 Unexpected "{"
Line 3135:1 Expected identifier but found "%"
Line 3138:12 Expected identifier but found whitespace
Line 3139:2 Unexpected "-"
Line 3142:1 Expected identifier but found "%"
Line 3144:0 Unexpected "{"
Line 3144:1 Unexpected "{"
Line 3144:3 Expected identifier but found "'mb-landing.css'"
Line 3146:0 Unexpected "{"
Line 3146:1 Expected identifier but found "%"
... and 106 more hidden warnings

**/
/* ============================================================
   MOTION BEDS — MATTRESS COLLECTION
   Exact visual system from standalone HTML reference.

   IMPORTANT:
   Typography uses PX equivalents of the HTML's REM values
   so Shopify's root font-size cannot shrink the design.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Mulish:wght@300;400;600;700&display=swap');


/* ============================================================
   CORE VARIABLES
   ============================================================ */

.mb-section {
  --mb-ink: #2A2620;
  --mb-green: #38463C;
  --mb-green-mid: #4B5C4E;
  --mb-brown: #5C4033;
  --mb-brass: #D1B98B;
  --mb-brass-deep: #B99C63;
  --mb-sage: #E3E7DD;
  --mb-cream: #F5F0E6;
  --mb-ivory: #FBF8F2;
  --mb-white: #FFFFFF;
  --mb-rule: rgba(42, 38, 32, .14);

  --mb-serif: "EB Garamond", Georgia, serif;
  --mb-sans: "Mulish", "Muli", system-ui, -apple-system, sans-serif;

  --mb-wrap: 1200px;
  --mb-pad: clamp(20px, 5vw, 48px);

  margin: 0 !important;
  padding: 0 !important;

  color: var(--mb-ink);

  font-family: var(--mb-sans) !important;
  font-size: 17.5px !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}


/* ============================================================
   RESET INSIDE MB PAGE ONLY
   ============================================================ */

.mb-section,
.mb-section *,
.mb-section *::before,
.mb-section *::after {
  box-sizing: border-box;
}

.mb-section img {
  display: block;
  max-width: 100%;
}

.mb-section a {
  color: var(--mb-brown);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.mb-section p {
  margin: 0 0 1em;
}

.mb-section p:last-child {
  margin-bottom: 0;
}

.mb-section h1,
.mb-section h2,
.mb-section h3,
.mb-section h4 {
  margin: 0 !important;
  padding: 0 !important;

  color: var(--mb-ink) !important;

  font-family: var(--mb-serif) !important;
  font-weight: 400 !important;
  font-style: normal !important;

  line-height: 1.12 !important;
  letter-spacing: -.005em !important;

  text-transform: none !important;
}


/* HTML reference:
   h1 2.5rem → 4.35rem
   40px → 69.6px
*/

.mb-section h1 {
  font-size: clamp(40px, 6vw, 69.6px) !important;
}


/* HTML:
   h2 2rem → 3.1rem
   32px → 49.6px
*/

.mb-section h2 {
  font-size: clamp(32px, 4.3vw, 49.6px) !important;
}


/* HTML:
   h3 1.35rem → 1.7rem
   21.6px → 27.2px
*/

.mb-section h3 {
  font-size: clamp(21.6px, 2.2vw, 27.2px) !important;
}


.mb-section :focus-visible {
  outline: 3px solid var(--mb-brass-deep);
  outline-offset: 3px;
}


/* ============================================================
   WRAPPER + SECTION SPACING
   ============================================================ */

.mb-section .wrap {
  width: 100% !important;
  max-width: var(--mb-wrap) !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: var(--mb-pad) !important;
  padding-right: var(--mb-pad) !important;
}


.mb-section .sect {
  width: 100%;

  margin: 0 !important;

  padding:
    clamp(56px, 8vw, 104px)
    0 !important;
}


.mb-section .sect--white {
  background: var(--mb-white) !important;
}

.mb-section .sect--ivory {
  background: var(--mb-ivory) !important;
}

.mb-section .sect--cream {
  background: var(--mb-cream) !important;
}

.mb-section .sect--sage {
  background: var(--mb-sage) !important;
}

.mb-section .sect--green {
  background: var(--mb-green) !important;

  color: var(--mb-ivory) !important;
}


.mb-section .sect--green h1,
.mb-section .sect--green h2,
.mb-section .sect--green h3,
.mb-section .sect--green h4 {
  color: var(--mb-ivory) !important;
}


/* ============================================================
   SECTION HEADINGS
   ============================================================ */

.mb-section .sect-head {
  width: 100%;
  max-width: 70ch;

  margin:
    0
    0
    clamp(34px, 5vw, 58px) !important;
}


.mb-section .eyebrow {
  margin: 0 0 16px !important;

  color: var(--mb-brown) !important;

  font-family: var(--mb-sans) !important;

  /* .72rem */
  font-size: 11.52px !important;

  font-weight: 700 !important;

  line-height: 1.4 !important;

  letter-spacing: .19em !important;

  text-transform: uppercase !important;
}


.mb-section .sect--green .eyebrow {
  color: var(--mb-brass) !important;
}


/* 1.08rem → 1.28rem */

.mb-section .lede {
  width: 100%;
  max-width: 60ch;

  color: rgba(42, 38, 32, .82) !important;

  font-family: var(--mb-sans) !important;

  font-size:
    clamp(17.28px, 1.6vw, 20.48px) !important;

  font-weight: 400 !important;

  line-height: 1.62 !important;

  letter-spacing: normal !important;

  text-transform: none !important;
}


.mb-section .lede p {
  margin: 0 0 1em !important;

  color: inherit !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;

  line-height: inherit !important;
  letter-spacing: inherit !important;
}


.mb-section .lede p:last-child {
  margin-bottom: 0 !important;
}


.mb-section .sect--green .lede {
  color: rgba(251, 248, 242, .84) !important;
}


/* ============================================================
   BUTTONS
   HTML = 1rem = 16px
   ============================================================ */

.mb-section .btn {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 10px !important;

  width: auto !important;

  min-height: 54px !important;

  margin: 0 !important;

  padding:
    16px
    30px !important;

  border:
    1.5px
    solid
    var(--mb-green) !important;

  border-radius: 2px !important;

  background: var(--mb-green) !important;

  color: var(--mb-ivory) !important;

  box-shadow: none !important;

  font-family: var(--mb-sans) !important;

  font-size: 16px !important;

  font-weight: 700 !important;

  line-height: 1.2 !important;

  letter-spacing: .02em !important;

  text-transform: none !important;

  text-decoration: none !important;

  cursor: pointer;

  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease !important;
}


.mb-section .btn::before,
.mb-section .btn::after {
  display: none !important;
  content: none !important;
}


.mb-section .btn:hover {
  background: var(--mb-green-mid) !important;

  border-color: var(--mb-green-mid) !important;

  color: var(--mb-ivory) !important;

  transform: translateY(-1px);
}


.mb-section .btn--ghost {
  background: transparent !important;

  border-color: var(--mb-green) !important;

  color: var(--mb-green) !important;
}


.mb-section .btn--ghost:hover {
  background: var(--mb-green) !important;

  color: var(--mb-ivory) !important;
}


.mb-section .btn--brass,
.mb-section .btn--onDark {
  background: var(--mb-brass) !important;

  border-color: var(--mb-brass) !important;

  color: var(--mb-ink) !important;
}


.mb-section .btn--brass:hover,
.mb-section .btn--onDark:hover {
  background: var(--mb-brass-deep) !important;

  border-color: var(--mb-brass-deep) !important;

  color: var(--mb-ink) !important;
}


.mb-section .btn--onDarkGhost {
  background: transparent !important;

  border-color:
    rgba(251, 248, 242, .5) !important;

  color: var(--mb-ivory) !important;
}


.mb-section .btn--onDarkGhost:hover {
  background:
    rgba(251, 248, 242, .12) !important;

  color: var(--mb-ivory) !important;
}


.mb-section .btn-row {
  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;

  gap: 14px !important;

  margin-top: 30px !important;
}


/* ============================================================
   HERO
   ============================================================ */

.mb-section .hero {
  position: relative;

  width: 100%;

  overflow: hidden;

  margin: 0 !important;

  padding:
    clamp(48px, 7vw, 86px)
    0
    clamp(48px, 7vw, 80px) !important;

  background: var(--mb-cream) !important;
}


.mb-section .hero__grid {
  display: grid !important;

  grid-template-columns:
    1.05fr
    .95fr !important;

  gap:
    clamp(30px, 5vw, 64px) !important;

  align-items: center !important;
}


.mb-section .hero h1 {
  margin:
    0
    0
    22px !important;
}


.mb-section .hero h1 em {
  color: var(--mb-brown) !important;

  font-family: var(--mb-serif) !important;

  font-size: inherit !important;

  font-weight: 400 !important;

  font-style: italic !important;

  line-height: inherit !important;

  letter-spacing: inherit !important;
}


/* HTML .86rem = 13.76px */

.mb-section .hero__badge {
  display: inline-flex !important;

  align-items: center !important;

  gap: 11px !important;

  width: auto !important;

  margin:
    0
    0
    24px !important;

  padding:
    9px
    20px
    9px
    14px !important;

  background: var(--mb-white) !important;

  border:
    1px
    solid
    var(--mb-brass) !important;

  border-radius: 999px !important;

  color: var(--mb-ink) !important;

  font-family: var(--mb-sans) !important;

  font-size: 13.76px !important;

  font-weight: 700 !important;

  line-height: 1.4 !important;

  letter-spacing: .03em !important;

  text-transform: none !important;
}


/* .78rem = 12.48px */

.mb-section .hero__badge b {
  display: inline-block !important;

  padding:
    3px
    11px !important;

  background: var(--mb-green) !important;

  border-radius: 999px !important;

  color: var(--mb-ivory) !important;

  font-family: var(--mb-sans) !important;

  font-size: 12.48px !important;

  font-weight: 700 !important;

  line-height: 1.4 !important;

  letter-spacing: .05em !important;
}


.mb-section .hero__facts {
  display: grid !important;

  gap: 11px !important;

  list-style: none !important;

  margin:
    30px
    0
    0 !important;

  padding: 0 !important;
}


/* 1.02rem = 16.32px */

.mb-section .hero__facts li {
  display: flex !important;

  align-items: flex-start !important;

  gap: 12px !important;

  margin: 0 !important;

  padding: 0 !important;

  color: var(--mb-ink) !important;

  font-family: var(--mb-sans) !important;

  font-size: 16.32px !important;

  font-weight: 400 !important;

  line-height: 1.62 !important;

  letter-spacing: normal !important;

  text-transform: none !important;
}


.mb-section .hero__facts li::before,
.mb-section .hero__facts li::after {
  display: none !important;
  content: none !important;
}


.mb-section .hero__facts svg {
  width: 17px !important;
  min-width: 17px !important;

  height: 17px !important;

  flex: 0 0 17px !important;

  margin-top: 5px !important;
}


.mb-section .hero__media {
  position: relative !important;

  width: 100% !important;

  min-width: 0 !important;
}


.mb-section .hero__media img,
.mb-section .hero__media .placeholder-svg {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;

  margin: 0 !important;

  border-radius: 2px !important;

  box-shadow:
    0
    26px
    60px
    -30px
    rgba(42, 38, 32, .5) !important;
}


/* 1.28rem = 20.48px */

.mb-section .hero__flag {
  position: absolute !important;

  bottom: -16px !important;
  left: -16px !important;

  z-index: 3;

  max-width: 230px !important;

  padding:
    18px
    22px !important;

  background: var(--mb-green) !important;

  color: var(--mb-ivory) !important;

  font-family: var(--mb-serif) !important;

  font-size: 20.48px !important;

  font-weight: 400 !important;

  line-height: 1.2 !important;
}


/* .7rem = 11.2px */

.mb-section .hero__flag small {
  display: block !important;

  margin-bottom: 6px !important;

  color: var(--mb-brass) !important;

  font-family: var(--mb-sans) !important;

  font-size: 11.2px !important;

  font-weight: 400 !important;

  line-height: 1.4 !important;

  letter-spacing: .16em !important;

  text-transform: uppercase !important;
}


/* ============================================================
   DECISION ROUTES
   ============================================================ */

.mb-section .routes {
  display: grid !important;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(255px, 1fr)
    ) !important;

  gap: 0 !important;

  width: 100%;

  background: var(--mb-white) !important;

  border:
    1px
    solid
    var(--mb-rule) !important;
}


.mb-section .route {
  display: flex !important;

  flex-direction: column !important;

  min-width: 0;

  padding:
    clamp(24px, 3vw, 32px) !important;

  background: var(--mb-white) !important;

  border-right:
    1px
    solid
    var(--mb-rule) !important;

  border-bottom:
    1px
    solid
    var(--mb-rule) !important;
}


/* 1.42rem = 22.72px */

.mb-section .route__q {
  min-height: 2.5em;

  margin:
    0
    0
    12px !important;

  color: var(--mb-ink) !important;

  font-family: var(--mb-serif) !important;

  font-size: 22.72px !important;

  font-weight: 400 !important;

  line-height: 1.24 !important;

  letter-spacing: normal !important;
}


/* .96rem = 15.36px */

.mb-section .route__body {
  flex: 1;

  margin:
    0
    0
    20px !important;

  color:
    rgba(42, 38, 32, .76) !important;

  font-family: var(--mb-sans) !important;

  font-size: 15.36px !important;

  font-weight: 400 !important;

  line-height: 1.62 !important;
}


.mb-section .route__body p {
  font: inherit !important;
  color: inherit !important;
}


.mb-section .route__pick {
  padding-top: 14px !important;

  border-top:
    2px
    solid
    var(--mb-brass) !important;
}


/* .68rem = 10.88 */

.mb-section .route__pick small {
  display: block;

  margin-bottom: 5px;

  color: var(--mb-brown) !important;

  font-family: var(--mb-sans) !important;

  font-size: 10.88px !important;

  font-weight: 700 !important;

  line-height: 1.4 !important;

  letter-spacing: .16em !important;

  text-transform: uppercase !important;
}


/* 1.22rem = 19.52 */

.mb-section .route__pick a {
  color: var(--mb-green) !important;

  font-family: var(--mb-serif) !important;

  font-size: 19.52px !important;

  font-weight: 500 !important;

  line-height: 1.25 !important;

  text-decoration: none !important;

  border-bottom:
    1px
    solid
    var(--mb-brass);
}


/* ============================================================
   FEEL SCALE
   ============================================================ */

.mb-section .rail {
  width: 100%;

  padding:
    clamp(26px, 4vw, 44px) !important;

  background: var(--mb-white) !important;

  border:
    1px
    solid
    var(--mb-rule) !important;
}


/* .72rem = 11.52 */

.mb-section .rail__head {
  display: flex !important;

  justify-content: space-between !important;

  gap: 20px;

  margin-bottom: 10px;

  color: var(--mb-brown) !important;

  font-family: var(--mb-sans) !important;

  font-size: 11.52px !important;

  font-weight: 700 !important;

  line-height: 1.4 !important;

  letter-spacing: .16em !important;

  text-transform: uppercase !important;
}


.mb-section .rail__track {
  height: 6px;

  margin:
    0
    0
    8px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--mb-sage),
      var(--mb-brass)
    );
}


.mb-section .rail__ticks {
  display: flex;

  justify-content: space-between;

  margin-bottom: 26px;
}


.mb-section .rail__ticks span {
  width: 1px;
  height: 9px;

  background: var(--mb-rule);
}


.mb-section .rail__rows {
  display: grid;

  gap: 2px;
}


.mb-section .rail__row {
  display: grid !important;

  grid-template-columns:
    190px
    1fr
    96px !important;

  gap: 16px !important;

  align-items: center !important;

  padding:
    11px
    0 !important;

  border-bottom:
    1px
    solid
    var(--mb-rule);
}


/* 1.14rem = 18.24 */

.mb-section .rail__name {
  color: var(--mb-ink);

  font-family: var(--mb-serif) !important;

  font-size: 18.24px !important;

  font-weight: 400 !important;

  line-height: 1.25 !important;
}


/* .74rem = 11.84 */

.mb-section .rail__name small {
  display: block;

  color: var(--mb-brown);

  font-family: var(--mb-sans) !important;

  font-size: 11.84px !important;

  font-weight: 700 !important;

  line-height: 1.4 !important;

  letter-spacing: .1em !important;

  text-transform: uppercase !important;
}


.mb-section .rail__bar {
  position: relative;

  height: 26px;
}


.mb-section .rail__bar::before {
  content: "";

  position: absolute;

  top: 12px;
  left: 0;
  right: 0;

  height: 2px;

  background:
    repeating-linear-gradient(
      90deg,
      var(--mb-rule) 0 3px,
      transparent 3px 8px
    );
}


.mb-section .rail__dot {
  position: absolute;

  top: 3px;

  width: 20px;
  height: 20px;

  border:
    3px
    solid
    var(--mb-white);

  border-radius: 50%;

  background: var(--mb-green);

  box-shadow:
    0
    0
    0
    1px
    var(--mb-brass);

  transform: translateX(-50%);
}


/* .86rem = 13.76 */

.mb-section .rail__val {
  color: var(--mb-brown);

  font-family: var(--mb-sans) !important;

  font-size: 13.76px !important;

  font-weight: 700 !important;

  line-height: 1.4 !important;

  text-align: right;
}


/* ============================================================
   PRODUCT CARDS
   ============================================================ */

.mb-section .cards {
  display: grid !important;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(330px, 1fr)
    ) !important;

  gap:
    clamp(20px, 2.4vw, 28px) !important;

  width: 100%;
}


.mb-section .card {
  display: flex !important;

  flex-direction: column !important;

  min-width: 0;

  overflow: hidden;

  background: var(--mb-white) !important;

  border:
    1px
    solid
    var(--mb-rule) !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  transition:
    box-shadow .25s ease,
    transform .25s ease !important;
}


.mb-section .card:hover {
  box-shadow:
    0
    22px
    44px
    -26px
    rgba(42, 38, 32, .4) !important;

  transform: translateY(-3px);
}


.mb-section .card__media {
  width: 100%;

  overflow: hidden;

  padding: 22px !important;

  background: var(--mb-cream) !important;
}


.mb-section .card__media img,
.mb-section .card__media .placeholder-svg {
  width: 100%;

  height: auto;

  margin: 0 auto;

  object-fit: contain;
}


.mb-section .card__body {
  display: flex !important;

  flex: 1;

  flex-direction: column !important;

  padding:
    clamp(20px, 2.4vw, 28px) !important;
}


/* 1.62rem = 25.92 */

.mb-section .card__name {
  margin:
    0
    0
    4px !important;

  font-size: 25.92px !important;

  line-height: 1.12 !important;
}


/* .72rem */

.mb-section .card__feel {
  margin:
    0
    0
    16px !important;

  color: var(--mb-brown) !important;

  font-family: var(--mb-sans) !important;

  font-size: 11.52px !important;

  font-weight: 700 !important;

  line-height: 1.4 !important;

  letter-spacing: .14em !important;

  text-transform: uppercase !important;
}


.mb-section .meter {
  display: inline-flex;

  gap: 4px;

  margin-left: 8px;
}


.mb-section .meter i {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--mb-rule);
}


.mb-section .meter i.on {
  background: var(--mb-green);
}


/* 1.5rem = 24 */

.mb-section .card__price {
  margin:
    0
    0
    2px !important;

  color: var(--mb-ink) !important;

  font-family: var(--mb-serif) !important;

  font-size: 24px !important;

  font-weight: 400 !important;

  line-height: 1.2 !important;
}


/* .66rem = 10.56 */

.mb-section .card__price small {
  display: block;

  margin-bottom: 3px;

  color: var(--mb-brown);

  font-family: var(--mb-sans) !important;

  font-size: 10.56px !important;

  font-weight: 700 !important;

  line-height: 1.4 !important;

  letter-spacing: .13em !important;

  text-transform: uppercase !important;
}


/* .85rem = 13.6 */

.mb-section .card__vat {
  margin:
    0
    0
    18px !important;

  color:
    rgba(42, 38, 32, .66) !important;

  font-family: var(--mb-sans) !important;

  font-size: 13.6px !important;

  line-height: 1.5 !important;
}


/* .95rem = 15.2 */

.mb-section .card__for,
.mb-section .card__not {
  display: flex;

  gap: 11px;

  padding:
    14px
    0;

  border-top:
    1px
    solid
    var(--mb-rule);

  color: var(--mb-ink);

  font-family: var(--mb-sans) !important;

  font-size: 15.2px !important;

  font-weight: 400 !important;

  line-height: 1.62 !important;
}


.mb-section .card__for b,
.mb-section .card__not b {
  display: block;

  margin-bottom: 3px;

  color: var(--mb-brown);

  font-family: var(--mb-sans) !important;

  font-size: 10.88px !important;

  font-weight: 700 !important;

  line-height: 1.4 !important;

  letter-spacing: .14em !important;

  text-transform: uppercase !important;
}


/* .9rem = 14.4 */

.mb-section .card__spec {
  display: grid;

  gap: 7px;

  list-style: none;

  margin:
    16px
    0
    22px;

  padding:
    14px
    0
    0;

  border-top:
    1px
    solid
    var(--mb-rule);

  font-family: var(--mb-sans) !important;

  font-size: 14.4px !important;

  line-height: 1.45 !important;
}


.mb-section .card__spec li {
  display: flex;

  justify-content: space-between;

  gap: 12px;
}


.mb-section .card__spec span:first-child {
  color:
    rgba(42, 38, 32, .62);
}


.mb-section .card__spec span:last-child {
  color: var(--mb-ink);

  font-weight: 600 !important;

  text-align: right;
}


.mb-section .card .btn {
  width: 100% !important;

  margin-top: auto !important;
}


/* ============================================================
   COMPARISON TABLE
   ============================================================ */

.mb-section .tblwrap {
  width: 100%;

  overflow-x: auto;

  background: var(--mb-white);

  border:
    1px
    solid
    var(--mb-rule);

  -webkit-overflow-scrolling: touch;
}


.mb-section .tblwrap table {
  width: 100%;
  min-width: 820px;

  margin: 0 !important;

  border-collapse: collapse;

  background: var(--mb-white);

  font-family: var(--mb-sans) !important;

  /* .92rem */
  font-size: 14.72px !important;

  line-height: 1.5 !important;
}


.mb-section .tblwrap th,
.mb-section .tblwrap td {
  padding:
    15px
    16px !important;

  text-align: left !important;

  vertical-align: top !important;

  border-bottom:
    1px
    solid
    var(--mb-rule) !important;
}


/* 1.06rem = 16.96 */

.mb-section .tblwrap thead th {
  background: var(--mb-green) !important;

  color: var(--mb-ivory) !important;

  font-family: var(--mb-serif) !important;

  font-size: 16.96px !important;

  font-weight: 400 !important;

  line-height: 1.3 !important;

  letter-spacing: .01em !important;

  text-transform: none !important;
}


/* .78rem = 12.48 */

.mb-section .tblwrap tbody th {
  width: 170px;

  background: var(--mb-cream) !important;

  color: var(--mb-brown) !important;

  font-family: var(--mb-sans) !important;

  font-size: 12.48px !important;

  font-weight: 700 !important;

  letter-spacing: .1em !important;

  text-transform: uppercase !important;
}


/* .82rem = 13.12 */

.mb-section .scroll-hint {
  margin-top: 12px !important;

  color: var(--mb-brown) !important;

  font-family: var(--mb-sans) !important;

  font-size: 13.12px !important;

  font-weight: 600 !important;
}


/* ============================================================
   REVIEWS
   ============================================================ */

.mb-section .rev__top {
  display: flex;

  flex-wrap: wrap;

  align-items: flex-end;

  justify-content: space-between;

  gap: 26px;

  margin-bottom: 34px;

  padding-bottom: 26px;

  border-bottom:
    1px
    solid
    var(--mb-rule);
}


/* 3.6rem = 57.6 */

.mb-section .rev__num {
  font-family: var(--mb-serif) !important;

  font-size: 57.6px !important;

  font-weight: 400 !important;

  line-height: 1 !important;
}


.mb-section .rev__score {
  display: flex;

  align-items: center;

  gap: 18px;
}


/* 1.18rem = 18.88 */

.mb-section .stars {
  color: var(--mb-brass-deep) !important;

  font-size: 18.88px !important;

  letter-spacing: 3px !important;
}


/* .9rem */

.mb-section .rev__meta {
  color:
    rgba(42, 38, 32, .7) !important;

  font-family: var(--mb-sans) !important;

  font-size: 14.4px !important;
}


/* .76rem = 12.16 */

.mb-section .rev__jm {
  color: var(--mb-brown) !important;

  font-family: var(--mb-sans) !important;

  font-size: 12.16px !important;

  font-weight: 700 !important;

  letter-spacing: .1em !important;

  text-transform: uppercase !important;
}


.mb-section .revs {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(290px, 1fr)
    );

  gap: 22px;
}


.mb-section .rev {
  display: flex;

  flex-direction: column;

  padding: 26px;

  background: var(--mb-white);

  border:
    1px
    solid
    var(--mb-rule);
}


/* 1.2rem = 19.2 */

.mb-section .rev h4 {
  margin:
    10px
    0
    8px !important;

  font-size: 19.2px !important;

  line-height: 1.2 !important;
}


/* .96rem = 15.36 */

.mb-section .rev > div:not(.stars):not(.rev__by) {
  color:
    rgba(42, 38, 32, .82);

  font-family: var(--mb-sans) !important;

  font-size: 15.36px !important;

  line-height: 1.62 !important;
}


/* .84rem = 13.44 */

.mb-section .rev__by {
  margin-top: 18px;

  padding-top: 14px;

  border-top:
    1px
    solid
    var(--mb-rule);

  font-family: var(--mb-sans) !important;

  font-size: 13.44px !important;
}


/* ============================================================
   CONTACT CARDS
   ============================================================ */

.mb-section .contact {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(290px, 1fr)
    );

  gap: 22px;
}


.mb-section .ccard {
  display: flex;

  flex-direction: column;

  padding:
    clamp(26px, 3vw, 34px);

  background: var(--mb-white);

  border:
    1px
    solid
    var(--mb-rule);

  border-top:
    4px
    solid
    var(--mb-brass);
}


.mb-section .ccard__ico {
  display: grid;

  place-items: center;

  width: 44px;
  height: 44px;

  margin-bottom: 18px;

  border-radius: 50%;

  background: var(--mb-sage);
}


.mb-section .ccard h3 {
  margin-bottom: 10px !important;
}


/* .96rem */

.mb-section .ccard > div:not(.ccard__ico):not(.ccard__hours) {
  color:
    rgba(42, 38, 32, .78);

  font-family: var(--mb-sans) !important;

  font-size: 15.36px !important;

  line-height: 1.62 !important;
}


/* 1.85rem = 29.6 */

.mb-section .ccard__big {
  display: block;

  margin:
    6px
    0
    4px;

  color: var(--mb-green) !important;

  font-family: var(--mb-serif) !important;

  font-size: 29.6px !important;

  font-weight: 400 !important;

  line-height: 1.2 !important;

  text-decoration: none !important;
}


/* .84rem */

.mb-section .ccard__hours {
  margin-bottom: 20px;

  color:
    rgba(42, 38, 32, .64);

  font-family: var(--mb-sans) !important;

  font-size: 13.44px !important;

  line-height: 1.55 !important;
}


.mb-section .ccard .btn {
  margin-top: auto !important;
}


/* ============================================================
   THEM VS US
   ============================================================ */

.mb-section .vs {
  display: grid;

  grid-template-columns: 1fr;

  border:
    1px
    solid
    rgba(251, 248, 242, .22);
}


.mb-section .vs__head,
.mb-section .vs__row {
  display: grid;

  grid-template-columns:
    1.05fr
    1fr
    1fr;
}


/* 1.22rem */

.mb-section .vs__head > div {
  padding:
    20px
    22px;

  border-bottom:
    1px
    solid
    rgba(251, 248, 242, .22);

  font-family: var(--mb-serif) !important;

  font-size: 19.52px !important;

  line-height: 1.25 !important;
}


.mb-section .vs__head > div:nth-child(2) {
  background:
    rgba(251, 248, 242, .06);

  color:
    rgba(251, 248, 242, .7);
}


.mb-section .vs__head > div:nth-child(3) {
  background: var(--mb-brass);

  color: var(--mb-ink);

  font-weight: 600 !important;
}


/* .96rem */

.mb-section .vs__row > div {
  padding:
    18px
    22px;

  border-bottom:
    1px
    solid
    rgba(251, 248, 242, .16);

  font-family: var(--mb-sans) !important;

  font-size: 15.36px !important;

  line-height: 1.5 !important;
}


/* .8rem = 12.8 */

.mb-section .vs__row > div:first-child {
  color: var(--mb-brass);

  font-size: 12.8px !important;

  font-weight: 700 !important;

  letter-spacing: .1em !important;

  text-transform: uppercase !important;
}


.mb-section .vs__row > div:nth-child(2) {
  background:
    rgba(251, 248, 242, .05);

  color:
    rgba(251, 248, 242, .72);
}


.mb-section .vs__row > div:nth-child(3) {
  background:
    rgba(209, 185, 139, .16);

  color: var(--mb-ivory);

  font-weight: 600 !important;
}


/* ============================================================
   14-DAY TRIAL
   ============================================================ */

.mb-section .trial {
  display: grid;

  grid-template-columns:
    .92fr
    1.08fr;

  gap:
    clamp(30px, 5vw, 64px);

  align-items: start;
}


.mb-section .steps {
  display: grid;

  gap: 2px;

  list-style: none;

  counter-reset: mb-step;

  margin: 0;

  padding: 0;
}


.mb-section .steps li {
  position: relative;

  counter-increment: mb-step;

  padding:
    22px
    24px
    22px
    74px;

  background: var(--mb-white);

  border:
    1px
    solid
    var(--mb-rule);
}


/* 1.6rem = 25.6 */

.mb-section .steps li::before {
  content: counter(mb-step);

  position: absolute;

  top: 22px;
  left: 24px;

  color: var(--mb-brass-deep);

  font-family: var(--mb-serif) !important;

  font-size: 25.6px !important;

  line-height: 1 !important;
}


/* 1.24rem = 19.84 */

.mb-section .steps b {
  display: block;

  margin-bottom: 5px;

  color: var(--mb-ink);

  font-family: var(--mb-serif) !important;

  font-size: 19.84px !important;

  font-weight: 400 !important;

  line-height: 1.2 !important;
}


/* .95rem */

.mb-section .steps span {
  color:
    rgba(42, 38, 32, .76);

  font-family: var(--mb-sans) !important;

  font-size: 15.2px !important;

  line-height: 1.62 !important;
}


.mb-section .trial__card {
  padding:
    clamp(28px, 4vw, 40px);

  background: var(--mb-green);

  color: var(--mb-ivory);
}


/* 3.4rem → 5.4rem
   54.4px → 86.4px
*/

.mb-section .trial__big {
  margin-bottom: 6px;

  color: var(--mb-brass);

  font-family: var(--mb-serif) !important;

  font-size:
    clamp(54.4px, 8vw, 86.4px) !important;

  font-weight: 400 !important;

  line-height: .92 !important;
}


.mb-section .trial__card h3 {
  color: var(--mb-ivory) !important;

  margin-bottom: 8px !important;
}


/* .98rem = 15.68 */

.mb-section .trial__card ul {
  display: grid;

  gap: 12px;

  list-style: none;

  margin:
    24px
    0
    0;

  padding:
    22px
    0
    0;

  border-top:
    1px
    solid
    rgba(251, 248, 242, .25);

  font-family: var(--mb-sans) !important;

  font-size: 15.68px !important;

  line-height: 1.5 !important;
}


.mb-section .trial__card li {
  display: flex;

  gap: 12px;

  color: var(--mb-ivory);
}


.mb-section .trial__card li b {
  color: var(--mb-brass);
}


/* .8rem */

.mb-section .smallprint {
  margin-top: 22px;

  color:
    rgba(251, 248, 242, .6);

  font-family: var(--mb-sans) !important;

  font-size: 12.8px !important;

  line-height: 1.55 !important;
}


/* ============================================================
   FOUNDER VIDEOS
   ============================================================ */

.mb-section .ads {
  display: grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap: 16px;
}


.mb-section .ad {
  display: flex;

  flex-direction: column;

  overflow: hidden;

  background: var(--mb-white);

  border:
    1px
    solid
    var(--mb-rule);
}


.mb-section .ad__frame {
  position: relative;

  display: grid;

  place-items: center;

  overflow: hidden;

  aspect-ratio: 9 / 16;

  background:
    linear-gradient(
      160deg,
      var(--mb-green) 0%,
      #2C382F 100%
    );
}


.mb-section .ad__frame .ad__video,
.mb-section .ad__frame .ad__poster,
.mb-section .ad__frame video,
.mb-section .ad__frame img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* 1.5rem = 24 */

.mb-section .ad__num {
  position: absolute;

  top: 12px;
  left: 14px;

  z-index: 2;

  color:
    rgba(209, 185, 139, .85);

  font-family: var(--mb-serif) !important;

  font-size: 24px !important;
}


.mb-section .ad__play {
  display: grid;

  place-items: center;

  width: 56px;
  height: 56px;

  z-index: 2;

  border:
    2px
    solid
    var(--mb-brass);

  border-radius: 50%;

  background:
    rgba(42, 38, 32, .34);
}


/* .66rem */

.mb-section .ad__len {
  position: absolute;

  right: 12px;
  bottom: 12px;

  z-index: 4;

  padding:
    4px
    9px;

  border-radius: 2px;

  background:
    rgba(42, 38, 32, .6);

  color: var(--mb-ivory);

  font-family: var(--mb-sans) !important;

  font-size: 10.56px !important;

  font-weight: 700 !important;

  letter-spacing: .1em !important;
}


.mb-section .ad__body {
  display: flex;

  flex: 1;

  flex-direction: column;

  padding:
    18px
    18px
    20px;
}


/* 1.1rem = 17.6 */

.mb-section .ad__hook {
  margin-bottom: 10px !important;

  color: var(--mb-ink) !important;

  font-family: var(--mb-serif) !important;

  font-size: 17.6px !important;

  line-height: 1.26 !important;
}


/* .72rem */

.mb-section .ad__who {
  margin-top: auto !important;

  color: var(--mb-brown) !important;

  font-family: var(--mb-sans) !important;

  font-size: 11.52px !important;

  font-weight: 700 !important;

  letter-spacing: .1em !important;

  text-transform: uppercase !important;
}


/* ============================================================
   SHOPIFY / RICHTEXT FIXES
   ============================================================ */

.mb-section .route__body p:last-child,
.mb-section .ccard > div p:last-child,
.mb-section .trial__card > div p:last-child {
  margin-bottom: 0 !important;
}


.mb-section .ccard__hours p,
.mb-section .smallprint p {
  margin: 0 !important;

  color: inherit !important;

  font: inherit !important;
}


.mb-section .placeholder-svg {
  width: 100%;

  height: auto;

  background: var(--mb-sage);

  fill:
    rgba(42, 38, 32, .28);
}


/* Judge.me */

.mb-section .jdgm-preview-badge {
  display: flex !important;

  align-items: center !important;

  gap: 14px !important;
}


.mb-section .rev__top .jdgm-widget {
  margin: 0 !important;
}


.mb-section .jdgm-all-reviews-widget {
  padding: 0 !important;

  border: 0 !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media screen and (max-width: 1080px) {

  .mb-section .ads {
    grid-template-columns:
      repeat(3, 1fr);
  }

}


@media screen and (max-width: 860px) {

  .mb-section .hero__grid {
    grid-template-columns:
      1fr !important;
  }

  .mb-section .hero__media {
    order: -1 !important;
  }

  .mb-section .hero__flag {
    display: none !important;
  }

}


@media screen and (max-width: 840px) {

  .mb-section .trial {
    grid-template-columns:
      1fr;
  }

}


@media screen and (max-width: 800px) {

  .mb-section .vs__head {
    display: none;
  }

  .mb-section .vs__row {
    grid-template-columns:
      1fr;

    border-bottom:
      1px
      solid
      rgba(251, 248, 242, .3);
  }

  .mb-section .vs__row > div {
    padding:
      14px
      20px;

    border-bottom: 0;
  }

  .mb-section .vs__row > div:first-child {
    padding-top: 20px;
  }

  .mb-section .vs__row > div:nth-child(2)::before {
    content: "Most bed retailers: ";

    color: var(--mb-brass);

    font-weight: 700;
  }

  .mb-section .vs__row > div:nth-child(3)::before {
    content: "Motion Beds: ";

    color: var(--mb-brass);

    font-weight: 700;
  }

  .mb-section .vs__row > div:nth-child(3) {
    padding-bottom: 22px;
  }

}


@media screen and (max-width: 720px) {

  .mb-section .rail__row {
    grid-template-columns:
      1fr !important;

    gap: 6px !important;

    padding:
      16px
      0 !important;
  }

  .mb-section .rail__val {
    text-align: left;
  }

}


@media screen and (max-width: 680px) {

  .mb-section .ads {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


@media screen and (max-width: 520px) {

  .mb-section .sect {
    padding:
      56px
      0 !important;
  }

  .mb-section .cards,
  .mb-section .contact,
  .mb-section .revs {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .mb-section .hero__badge {
    max-width: 100%;

    flex-wrap: wrap;
  }

}


@media screen and (max-width: 420px) {

  .mb-section .ads {
    grid-template-columns:
      1fr;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .mb-section *,
  .mb-section *::before,
  .mb-section *::after {
    animation: none !important;

    transition: none !important;
  }

  .mb-section .card:hover {
    transform: none;
  }

}

/* ============================================================
   MB TYPOGRAPHIC EMPHASIS + LINKS
   Match standalone HTML reference exactly
   ============================================================ */


/* ------------------------------------------------------------
   ITALIC / EMPHASIS

   The HTML uses <em> for emphasized serif words such as
   "bends" in the hero.
   ------------------------------------------------------------ */

.mb-section em,
.mb-section i {
  font-style: italic !important;
}


/* Hero "bends" — exact reference treatment */

.mb-section .hero h1 em {
  color: #5C4033 !important;

  font-family:
    "EB Garamond",
    Georgia,
    serif !important;

  font-size: inherit !important;
  font-weight: 400 !important;
  font-style: italic !important;

  line-height: inherit !important;
  letter-spacing: inherit !important;

  text-transform: none !important;
}


/* If an emphasized word is used in another heading,
   keep the heading font rather than letting Shopify
   substitute its own italic font. */

.mb-section h1 em,
.mb-section h2 em,
.mb-section h3 em,
.mb-section h4 em {
  font-family:
    "EB Garamond",
    Georgia,
    serif !important;

  font-weight: inherit !important;
  font-style: italic !important;

  line-height: inherit !important;
}


/* ------------------------------------------------------------
   NORMAL INLINE LINKS

   Reference HTML:
   a {
     color:#5C4033;
     text-decoration-thickness:1px;
     text-underline-offset:3px;
   }

   Shopify frequently resets text-decoration to none,
   so force it back for links inside paragraph/richtext copy.
   ------------------------------------------------------------ */

.mb-section p a:not(.btn),
.mb-section .lede a:not(.btn),
.mb-section .route__body a:not(.btn),
.mb-section .smallprint a:not(.btn) {
  color: #5C4033 !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;

  text-decoration-line: underline !important;
  text-decoration-style: solid !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 1px !important;

  text-underline-offset: 3px !important;

  text-decoration-skip-ink: auto !important;
}


.mb-section p a:not(.btn):hover,
.mb-section .lede a:not(.btn):hover,
.mb-section .route__body a:not(.btn):hover,
.mb-section .smallprint a:not(.btn):hover {
  color: #38463C !important;
}


/* ------------------------------------------------------------
   DECISION ROUTE PRODUCT LINKS

   These are NOT normal underlined links in the HTML.
   They use a thin brass bottom border instead.
   ------------------------------------------------------------ */

.mb-section .route__pick a {
  display: inline !important;

  color: #38463C !important;

  font-family:
    "EB Garamond",
    Georgia,
    serif !important;

  font-size: 19.52px !important;
  font-weight: 500 !important;
  font-style: normal !important;

  line-height: 1.25 !important;

  text-decoration: none !important;

  border-bottom:
    1px
    solid
    #D1B98B !important;
}


.mb-section .route__pick a:hover {
  color: #38463C !important;

  border-bottom-color:
    #38463C !important;
}


/* ------------------------------------------------------------
   LINKS THAT MUST NOT BE UNDERLINED

   HTML explicitly removes decoration from buttons and
   the large contact/phone treatment.
   ------------------------------------------------------------ */

.mb-section .btn,
.mb-section a.btn,
.mb-section .ccard__big {
  text-decoration: none !important;
}


/* ------------------------------------------------------------
   STRONG / BOLD TEXT

   Preserve actual <strong> and <b> emphasis from rich text.
   Do not let Shopify normalize them back to 400.
   ------------------------------------------------------------ */

.mb-section strong {
  font-weight: 700 !important;
}


/* Specific contact address strong text */

.mb-section .ccard__hours strong {
  color: inherit !important;

  font-family:
    "Mulish",
    sans-serif !important;

  font-size: inherit !important;

  font-weight: 700 !important;
}


/* ------------------------------------------------------------
   HERO HEADING STRUCTURE
   ------------------------------------------------------------ */

.mb-section .hero h1 br {
  display: block !important;
}


/* Prevent Shopify from faking italic or overriding <em> */

.mb-section .hero h1 em::before,
.mb-section .hero h1 em::after {
  content: none !important;
}

/* =========================================
   INLINE TEXT LINKS — HTML REFERENCE
   ========================================= */

.mb-section .lede a:not(.btn),
.mb-section .route__body a:not(.btn),
.mb-section .smallprint a:not(.btn),
.mb-section p a:not(.btn) {
  color: #5C4033 !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;

  text-decoration-line: underline !important;
  text-decoration-style: solid !important;
  text-decoration-color: #5C4033 !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}

.mb-section .lede a:not(.btn):hover,
.mb-section .route__body a:not(.btn):hover,
.mb-section .smallprint a:not(.btn):hover,
.mb-section p a:not(.btn):hover {
  color: #5C4033 !important;
  text-decoration-color: #5C4033 !important;
}

/* ============================================================
   MB REVIEWS — EXACT HTML REFERENCE
   ============================================================ */

.mb-section .rev__top {
  display: flex !important;
  flex-wrap: wrap !important;

  align-items: flex-end !important;
  justify-content: space-between !important;

  gap: 26px !important;

  width: 100% !important;

  margin: 0 0 34px !important;
  padding: 0 0 26px !important;

  border-bottom: 1px solid rgba(42, 38, 32, .14) !important;
}


/* LEFT SIDE */

.mb-section .rev__left {
  display: block;
}

.mb-section .rev__left .eyebrow {
  margin: 0 0 16px !important;
}


/* SCORE + STARS */

.mb-section .rev__score {
  display: flex !important;

  align-items: center !important;

  gap: 18px !important;
}


.mb-section .rev__num {
  margin: 0 !important;

  color: #2A2620 !important;

  font-family:
    "EB Garamond",
    Georgia,
    serif !important;

  /* HTML 3.6rem */
  font-size: 57.6px !important;

  font-weight: 400 !important;

  line-height: 1 !important;

  letter-spacing: -.005em !important;
}


.mb-section .rev__rating-detail {
  display: block;
}


.mb-section .rev__rating-detail .stars {
  margin: 0 !important;

  color: #B99C63 !important;

  font-family: "Mulish", sans-serif !important;

  /* HTML 1.18rem */
  font-size: 18.88px !important;

  line-height: 1.2 !important;

  letter-spacing: 3px !important;
}


.mb-section .rev__meta {
  margin: 5px 0 0 !important;

  color: rgba(42, 38, 32, .7) !important;

  font-family: "Mulish", sans-serif !important;

  /* HTML .9rem */
  font-size: 14.4px !important;

  font-weight: 400 !important;

  line-height: 1.5 !important;
}


/* RIGHT SIDE */

.mb-section .rev__right {
  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

  gap: 0 !important;
}


.mb-section .rev__jm {
  margin: 0 0 12px !important;

  color: #5C4033 !important;

  font-family: "Mulish", sans-serif !important;

  /* HTML .76rem */
  font-size: 12.16px !important;

  font-weight: 700 !important;

  line-height: 1.4 !important;

  letter-spacing: .1em !important;

  text-transform: uppercase !important;
}


.mb-section .rev__right .btn {
  width: auto !important;

  min-height: 54px !important;

  padding: 16px 30px !important;
}


/* ============================================================
   REVIEW CARDS
   ============================================================ */

.mb-section .revs {
  display: grid !important;

  grid-template-columns:
    repeat(auto-fit, minmax(290px, 1fr)) !important;

  gap: 22px !important;

  width: 100%;
}


.mb-section .rev {
  display: flex !important;

  flex-direction: column !important;

  min-width: 0;

  padding: 26px !important;

  background: #FFFFFF !important;

  border:
    1px
    solid
    rgba(42, 38, 32, .14) !important;
}


.mb-section .rev .stars {
  margin: 0 !important;

  color: #B99C63 !important;

  font-size: 18.88px !important;

  letter-spacing: 3px !important;
}


.mb-section .rev h4 {
  margin:
    10px
    0
    8px !important;

  color: #2A2620 !important;

  font-family:
    "EB Garamond",
    Georgia,
    serif !important;

  font-size: 19.2px !important;

  font-weight: 400 !important;

  line-height: 1.2 !important;
}


.mb-section .rev__body {
  flex: 1;

  color: rgba(42, 38, 32, .82) !important;

  font-family: "Mulish", sans-serif !important;

  font-size: 15.36px !important;

  font-weight: 400 !important;

  line-height: 1.62 !important;
}


.mb-section .rev__body p {
  color: inherit !important;

  font: inherit !important;
}


.mb-section .rev__by {
  margin-top: 18px !important;

  padding-top: 14px !important;

  border-top:
    1px
    solid
    rgba(42, 38, 32, .14) !important;

  color: #2A2620 !important;

  font-family: "Mulish", sans-serif !important;

  font-size: 13.44px !important;

  line-height: 1.5 !important;
}


.mb-section .rev__by b {
  display: block;

  font-weight: 700 !important;
}


.mb-section .verified {
  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  color: #38463C !important;

  font-size: 11.2px !important;

  font-weight: 700 !important;

  letter-spacing: .1em !important;

  text-transform: uppercase !important;
}


/* ============================================================
   JUDGE.ME APP AREA
   ============================================================ */

.mb-section .mb-reviews-content {
  width: 100%;
}


.mb-section .mb-reviews-app {
  width: 100%;
}


.mb-section .mb-reviews-app > * {
  max-width: 100%;
}


.mb-section .mb-reviews-placeholder {
  padding: 30px;

  border:
    1px
    dashed
    rgba(42, 38, 32, .2);

  text-align: center;

  color:
    rgba(42, 38, 32, .6);

  font-family: "Mulish", sans-serif;

  font-size: 14px;
}


/* MOBILE */

@media screen and (max-width: 700px) {

  .mb-section .rev__top {
    display: block !important;
  }

  .mb-section .rev__right {
    margin-top: 26px !important;
  }

  .mb-section .revs {
    grid-template-columns: 1fr !important;
  }

}
{%- comment -%}
  Motion Beds — MB Reviews

  Behaviour:
  - If a Judge.me / app block is added, render the app.
  - If NO app block exists, automatically render the exact
    six review cards from the original HTML reference.
{%- endcomment -%}

{{ 'mb-landing.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign has_app_block = false

  for block in section.blocks
    if block.type == '@app'
      assign has_app_block = true
    endif
  endfor
-%}


<section
  class="sect sect--{{ section.settings.background }}"
  id="{{ section.settings.anchor | default: 'mb-reviews' }}"
>

  <div class="wrap">


    {%- comment -%}
      ==========================================================
      REVIEW HEADER
      Always visible — exactly like HTML reference
      ==========================================================
    {%- endcomment -%}

    <div class="rev__top">

      <div class="rev__left">

        {%- if section.settings.eyebrow != blank -%}
          <p class="eyebrow">
            {{ section.settings.eyebrow }}
          </p>
        {%- endif -%}


        <div class="rev__score">

          {%- if section.settings.score != blank -%}

            <div class="rev__num">
              {{ section.settings.score }}
            </div>

          {%- endif -%}


          <div class="rev__rating-detail">

            <div
              class="stars"
              aria-label="{{ section.settings.score }} out of 5 stars"
            >
              {{ section.settings.stars | default: '★★★★★' }}
            </div>


            {%- if section.settings.score_meta != blank -%}

              <p class="rev__meta">
                {{ section.settings.score_meta }}
              </p>

            {%- endif -%}

          </div>

        </div>

      </div>


      <div class="rev__right">

        {%- if section.settings.provider_line != blank -%}

          <p class="rev__jm">
            {{ section.settings.provider_line }}
          </p>

        {%- endif -%}


        {%- if section.settings.cta_label != blank -%}

          <a
            class="btn btn--ghost"
            href="{{ section.settings.cta_link | default: '#' }}"
          >
            {{ section.settings.cta_label }}
          </a>

        {%- endif -%}

      </div>

    </div>



    {%- comment -%}
      ==========================================================
      JUDGE.ME / APP

      If an app block exists, use it instead of fallback cards.
      ==========================================================
    {%- endcomment -%}

    {%- if has_app_block -%}

      <div class="mb-reviews-app">

        {%- for block in section.blocks -%}

          {%- if block.type == '@app' -%}

            <div
              class="mb-reviews-app__block"
              {{ block.shopify_attributes }}
            >
              {% render block %}
            </div>

          {%- endif -%}

        {%- endfor -%}

      </div>



    {%- else -%}


      {%- comment -%}
        ========================================================
        FALLBACK REVIEWS

        Exact review cards from the supplied HTML reference.
        These automatically appear whenever no app block exists.
        ========================================================
      {%- endcomment -%}


      <div class="revs">


        {%- comment -%}
          REVIEW 1
        {%- endcomment -%}

        <div class="rev">

          <div
            class="stars"
            aria-hidden="true"
          >
            ★★★★★
          </div>

          <h4>
            First full night's sleep in two years
          </h4>

          <p class="rev__body">
            I was sceptical about foam but the Cool Gel does not hold the heat like my old one. The bed profiles and the mattress just follows it. Delivery team took the old set away without me asking twice.
          </p>

          <div class="rev__by">

            <b>
              Margaret H.
            </b>

            <span class="verified">
              <svg
                width="12"
                height="12"
                viewBox="0 0 20 20"
                fill="none"
                aria-hidden="true"
              >
                <path
                  d="M4 10.5l4 4 8-9"
                  stroke="#38463C"
                  stroke-width="2.6"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>

              Verified buyer
            </span>

            <span class="rev__product">
              · Cool Gel, 4'6 Double
            </span>

          </div>

        </div>



        {%- comment -%}
          REVIEW 2
        {%- endcomment -%}

        <div class="rev">

          <div
            class="stars"
            aria-hidden="true"
          >
            ★★★★★
          </div>

          <h4>
            Getting in and out is the difference
          </h4>

          <p class="rev__body">
            After my hip replacement I could not push myself up off the old mattress. The Latex has enough give and enough spring back. Small thing that changed my mornings.
          </p>

          <div class="rev__by">

            <b>
              Derek P.
            </b>

            <span class="verified">

              <svg
                width="12"
                height="12"
                viewBox="0 0 20 20"
                fill="none"
                aria-hidden="true"
              >
                <path
                  d="M4 10.5l4 4 8-9"
                  stroke="#38463C"
                  stroke-width="2.6"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>

              Verified buyer

            </span>

            <span class="rev__product">
              · Latex, 3'0 Single
            </span>

          </div>

        </div>



        {%- comment -%}
          REVIEW 3
        {%- endcomment -%}

        <div class="rev">

          <div
            class="stars"
            aria-hidden="true"
          >
            ★★★★★
          </div>

          <h4>
            They talked me out of the expensive one
          </h4>

          <p class="rev__body">
            I rang up ready to buy the Natural and was told the Pocket was the better fit for how I sleep. Saved me several hundred pounds. Not what I expected from a bed company.
          </p>

          <div class="rev__by">

            <b>
              Susan T.
            </b>

            <span class="verified">

              <svg
                width="12"
                height="12"
                viewBox="0 0 20 20"
                fill="none"
                aria-hidden="true"
              >
                <path
                  d="M4 10.5l4 4 8-9"
                  stroke="#38463C"
                  stroke-width="2.6"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>

              Verified buyer

            </span>

            <span class="rev__product">
              · Pocket, 5'0 King
            </span>

          </div>

        </div>



        {%- comment -%}
          REVIEW 4
        {%- endcomment -%}

        <div class="rev">

          <div
            class="stars"
            aria-hidden="true"
          >
            ★★★★☆
          </div>

          <h4>
            Worth the wait, and it was a wait
          </h4>

          <p class="rev__body">
            The Natural took longer than I hoped but the quality is obvious the moment you sit on it. Wool and cotton, no plastic smell at all. Would order again.
          </p>

          <div class="rev__by">

            <b>
              Alan &amp; Joyce M.
            </b>

            <span class="verified">

              <svg
                width="12"
                height="12"
                viewBox="0 0 20 20"
                fill="none"
                aria-hidden="true"
              >
                <path
                  d="M4 10.5l4 4 8-9"
                  stroke="#38463C"
                  stroke-width="2.6"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>

              Verified buyer

            </span>

            <span class="rev__product">
              · Natural, 6'0 Super King
            </span>

          </div>

        </div>



        {%- comment -%}
          REVIEW 5
        {%- endcomment -%}

        <div class="rev">

          <div
            class="stars"
            aria-hidden="true"
          >
            ★★★★★
          </div>

          <h4>
            We are twelve stone apart
          </h4>

          <p class="rev__body">
            The Hybrid was recommended for exactly that reason and it works. I no longer roll into my husband every time he turns over. Two very different bodies, one mattress.
          </p>

          <div class="rev__by">

            <b>
              Pauline R.
            </b>

            <span class="verified">

              <svg
                width="12"
                height="12"
                viewBox="0 0 20 20"
                fill="none"
                aria-hidden="true"
              >
                <path
                  d="M4 10.5l4 4 8-9"
                  stroke="#38463C"
                  stroke-width="2.6"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>

              Verified buyer

            </span>

            <span class="rev__product">
              · Memory Hybrid, 5'0 King
            </span>

          </div>

        </div>



        {%- comment -%}
          REVIEW 6
        {%- endcomment -%}

        <div class="rev">

          <div
            class="stars"
            aria-hidden="true"
          >
            ★★★★★
          </div>

          <h4>
            Swapped it on day nine
          </h4>

          <p class="rev__body">
            The Memory was too soft for me so I used the 14 days and changed to the Hybrid. No argument, no charge, no fuss. That is why I am writing a review.
          </p>

          <div class="rev__by">

            <b>
              Raymond B.
            </b>

            <span class="verified">

              <svg
                width="12"
                height="12"
                viewBox="0 0 20 20"
                fill="none"
                aria-hidden="true"
              >
                <path
                  d="M4 10.5l4 4 8-9"
                  stroke="#38463C"
                  stroke-width="2.6"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>

              Verified buyer

            </span>

            <span class="rev__product">
              · Memory Hybrid, 4'0 Small Double
            </span>

          </div>

        </div>


      </div>

    {%- endif -%}


  </div>

</section>



{% schema %}
{
  "name": "MB Judge.me reviews",
  "tag": "section",
  "class": "mb-section",

  "settings": [

    {
      "type": "text",
      "id": "anchor",
      "label": "Anchor id",
      "default": "mb-reviews"
    },

    {
      "type": "select",
      "id": "background",
      "label": "Background",
      "default": "white",
      "options": [
        {
          "value": "white",
          "label": "White"
        },
        {
          "value": "ivory",
          "label": "Ivory"
        },
        {
          "value": "cream",
          "label": "Cream"
        },
        {
          "value": "sage",
          "label": "Sage"
        }
      ]
    },

    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow",
      "default": "Verified reviews"
    },

    {
      "type": "text",
      "id": "score",
      "label": "Average score",
      "default": "4.9"
    },

    {
      "type": "text",
      "id": "stars",
      "label": "Stars",
      "default": "★★★★★"
    },

    {
      "type": "text",
      "id": "score_meta",
      "label": "Review count line",
      "default": "Based on 412 verified customer reviews"
    },

    {
      "type": "text",
      "id": "provider_line",
      "label": "Provider line",
      "default": "Collected and verified by Judge.me"
    },

    {
      "type": "text",
      "id": "cta_label",
      "label": "Button",
      "default": "Read all reviews"
    },

    {
      "type": "url",
      "id": "cta_link",
      "label": "Button link"
    }

  ],

  "blocks": [
    {
      "type": "@app"
    }
  ],

  "presets": [
    {
      "name": "MB Judge.me reviews"
    }
  ]
}
{% endschema %}