/* Mattresses page */
.mt-subnav { background: #fff; border-bottom: 1px solid var(--haze); box-shadow: 0 8px 16px -14px rgba(20,36,64,0.35); }
.mt-subnav-row { gap: 8px; padding-block: 8px; }
.mt-subnav-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 76px; min-height: 60px;
  padding: 4px 8px; border-radius: var(--radius-sm); color: var(--navy); text-decoration: none; font-size: 12px; line-height: 1.2; font-weight: 700; white-space: nowrap;
}
.mt-subnav-link .icon { width: 20px; height: 18px; }
.mt-subnav-link:hover { background: var(--mist); color: var(--navy); }
@media (min-width: 900px) {
  .mt-subnav-row { justify-content: center; gap: 28px; overflow: visible; margin: 0; }
}

.mt-hero .eyebrow { color: var(--navy); }
.mt-hero h1 { margin-top: 8px; }
.mt-hero a { text-underline-offset: 3px; }

.mt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 900px) { .mt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }

.mt-card { scroll-margin-top: calc(var(--header-h) + 12px); padding: 16px; border: 1px solid var(--haze); border-radius: var(--radius); background: #fff; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { .mt-card { padding: 20px; } }
.mt-card-head { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.mt-card-name { font-size: 22px; }
.mt-card-name a { color: inherit; text-decoration: none; }
.mt-card-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mt-card-from { font-size: 14px; font-weight: 600; }
.mt-card-tag { font-size: 13px; color: var(--deep); }

.mt-card-media { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; }
.mt-card-media img { width: 100%; height: 100%; object-fit: cover; }
.mt-badge-models { position: absolute; top: 10px; inset-inline-start: 10px; padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--navy); font-size: 12px; line-height: 16px; font-weight: 700; }
.mt-badge-height { position: absolute; bottom: 0; inset-inline-end: 0; padding: 7px 12px; border-start-start-radius: 10px; background: #fff; color: var(--navy); font-size: 13px; line-height: 16px; font-weight: 700; }
@media (min-width: 900px) { .mt-card-media { aspect-ratio: auto; height: 260px; } }

.mt-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mt-pair.is-single { grid-template-columns: 1fr; }
.mt-model { display: flex; flex-direction: column; gap: 10px; padding-inline-end: 14px; min-width: 0; }
.mt-model + .mt-model { padding-inline: 14px 0; border-inline-start: 1px solid var(--haze); }
.mt-model-name { font-size: 15px; line-height: 1.3; }
.mt-model-name a { color: inherit; text-decoration: none; }
.mt-model-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mt-model-meta { margin-top: -6px; font-size: 12px; color: var(--deep); }
.mt-model-meta strong { color: var(--navy); }
.mt-feel { font-size: 12px; }
.mt-feel span:first-child { font-weight: 700; }
.mt-feel-val { padding: 2px 8px; border: 1px solid var(--sky); border-radius: 4px; color: var(--navy); }
.mt-bar-row { display: flex; flex-direction: column; gap: 6px; }
.mt-bar-label { font-size: 12px; font-weight: 700; }
.mt-bar-label .muted { font-weight: 400; }
.mt-bar { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--haze); }
.mt-bar > span { position: absolute; top: 0; width: 16%; height: 4px; border-radius: 2px; background: var(--navy); }
.mt-bar-fill > span { inset-inline-start: 0; }
.mt-also { font-size: 12px; line-height: 1.45; color: var(--deep); }
.mt-card-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }

.mt-find .container { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mt-find-title { font-size: clamp(32px, 4.2vw, 48px); max-width: 560px; }
.mt-find-text { max-width: 640px; font-size: 15px; }
.mt-find-btns { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 8px; }
@media (min-width: 700px) { .mt-find-btns { flex-direction: row; justify-content: center; width: auto; } }
@media (max-width: 699px) {
  .mt-inst { flex-direction: column; align-items: flex-start; text-align: start; }
  .mt-inst .bank-list { justify-content: flex-start; }
}