@charset "UTF-8";
/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
 	overflow-x: clip;
}

body {
  margin: 0;
  overflow: hidden;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;

}

button,
input,
optgroup,
select,
textarea {
  font-family: 'Poppins', sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/***** Base *****/
* {
  box-sizing: border-box;
}

body {
  background-color: rgba(255, 255, 255, 1);
  color: rgba(51, 51, 51, 1);
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Poppins', sans-serif;
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
}

h4 {
  font-size: 16px;
}

a {
  color: rgba(3, 33, 125, 1);
  text-decoration: none;
}
a:visited {
  color: rgba(1, 42, 165, 1);
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

.hbs-form input,
.hbs-form textarea, .search input,
.search textarea {
  color: #000;
  font-size: 14px;
}
.hbs-form input, .search input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
  /* We use the :where selector to not increase the specificity of the selector */
}
.hbs-form input:where(:not([type=checkbox])), .search input:where(:not([type=checkbox])) {
  outline: none;
}
.hbs-form input:where(:not([type=checkbox])):focus, .search input:where(:not([type=checkbox])):focus {
  border: 1px solid rgba(3, 33, 125, 1);
}
.hbs-form input[disabled], .search input[disabled] {
  background-color: #ddd;
}
.hbs-form select, .search select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #87929D;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}
.hbs-form select:focus, .search select:focus {
  border: 1px solid rgba(3, 33, 125, 1);
}
.hbs-form select::-ms-expand, .search select::-ms-expand {
  display: none;
}
.hbs-form textarea, .search textarea {
  border: 1px solid #87929D;
  border-radius: 16px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
.hbs-form textarea:focus, .search textarea:focus {
  border: 1px solid rgba(3, 33, 125, 1);
}

/* ============================================================
   CONTENT COLUMN (2026-09-14)
   ============================================================
   Every content column in this theme now has mattressman.co.uk's geometry, so moving between
   the shop and the Help Centre doesn't shift the page under you. Read off the live site:

     .container { width: 100%; max-width: 1408px; padding: 0 24px; margin-inline: auto; }
     @media (max-width: 991px) { .container { padding: 0 22px; } }

   That is the whole rule over there — one max-width, one gutter, one breakpoint.

   It replaces this theme's old idiom, which was three states and 248px narrower:
     <= 768px     padding 0 16px
     768–1160px   max-width 1160px, padding 0 5%
     >= 1160px    width 90%, max-width 1160px
   At a 1440px viewport that put our content at x=72 where the shop puts it at x=40.

   Anything that has to line up with the column uses these two tokens rather than repeating the
   numbers — .header, the footer's .container, .mm-cats, .mm-cta, the USP strip, the
   promo/utility/category bars and the search overlays. Change the geometry here, once.
   box-sizing matters: this theme has no global border-box, so width:100% plus padding would
   otherwise overflow. */
:root {
  --mm-container-max: 1408px;
  --mm-gutter: 24px;

  /* Brand gradient, supplied 2026-09-14. --mm-gradient is the filled form (it carries its own
     padding-box/border-box layers, so it needs `border: Npx solid transparent` to sit on). */
  --mm-gradient: linear-gradient(90deg, #8c43d7, #0e2484) padding-box,
                 linear-gradient(90deg, #8c43d7, #0e2484) border-box;
  --mm-gradient-text: linear-gradient(90deg, #8c43d7, #0e2484);
  --mm-gradient-border: linear-gradient(90deg, #8c43d7, #0e2484);
}
@media (max-width: 991px) {
  :root { --mm-gutter: 22px; }
}

.container {
  width: 100%;
  max-width: var(--mm-container-max);
  margin: 0 auto;
  padding: 0 var(--mm-gutter);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .blocks-list {
    gap: 8px !important;
  }
}

.container-divider {
  border-top: 1px solid #ddd;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.error-page {
  width: 100%;
  max-width: var(--mm-container-max);
  margin: 0 auto;
  padding: 0 var(--mm-gutter);
  box-sizing: border-box;
}

.visibility-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.mm-container {
  width: 100%;
  max-width: var(--mm-container-max);
  padding: 0 var(--mm-gutter);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/***** Buttons *****/
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid rgba(3, 33, 125, 1);
  border-radius: 16px;
  color: rgba(3, 33, 125, 1);
  cursor: pointer;
/*   display: inline-block; */
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
  display:none;
}
@media (min-width: 768px) {
  .button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
    width: auto;
  }
}
.button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited, .subscriptions-subscribe button:visited, .requests-table-toolbar .organization-subscribe button:visited, .community-follow button:visited, .article-subscribe button:visited, .section-subscribe button:visited, .split-button button:visited {
  color: rgba(3, 33, 125, 1);
}
.button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .subscriptions-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover, .community-follow button:hover, .article-subscribe button:hover, .section-subscribe button:hover, .split-button button:hover, .button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .subscriptions-subscribe button:active, .requests-table-toolbar .organization-subscribe button:active, .community-follow button:active, .article-subscribe button:active, .section-subscribe button:active, .split-button button:active, .button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .section-subscribe button:focus, .split-button button:focus, .button.button-primary, .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected=true], .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected=true], .community-follow button.button-primary, .article-subscribe button.button-primary, .article-subscribe button[data-selected=true], .section-subscribe button.button-primary, .section-subscribe button[data-selected=true], .split-button button.button-primary {
  background-color: #C994DD;
  border-color: #C994DD;
  color: rgba(3, 33, 125, 1);
  text-decoration: none;
}
.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected=true]:hover, .split-button button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected=true]:focus, .split-button button.button-primary:focus, .button.button-primary:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected=true]:active, .community-follow button.button-primary:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected=true]:active, .split-button button.button-primary:active {
  background-color: #C994DD;
  border-color: #C994DD;
  color: rgba(3, 33, 125, 1);
}
.button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link, [data-disabled].pagination-first-link, [data-disabled].pagination-last-link, .subscriptions-subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .community-follow button[data-disabled], .article-subscribe button[data-disabled], .section-subscribe button[data-disabled], .split-button button[data-disabled] {
  cursor: default;
}

.button-large, .hbs-form input[type=submit] {
  cursor: pointer;
  background-color: rgba(3, 33, 125, 1);
  border: 0;
  border-radius: 24px;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}
@media (min-width: 768px) {
  .button-large, .hbs-form input[type=submit] {
    width: auto;
  }
}
.button-large:visited, .hbs-form input[type=submit]:visited {
  color: rgba(255, 255, 255, 1);
}
.button-large:hover, .button-large:active, .button-large:focus, .hbs-form input[type=submit]:hover, .hbs-form input[type=submit]:active, .hbs-form input[type=submit]:focus {
  background-color: #C994DD;
  color: rgba(3, 33, 125, 1);
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #666;
  border: 1px solid #87929D;
  background-color: transparent;
}
.button-secondary:visited {
  color: #666;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(51, 51, 51, 1);
  border: 1px solid #87929D;
  background-color: #f7f7f7;
}

/***** Split button *****/
.split-button {
  display: flex;
}

.split-button button {
  background-color: rgba(3, 33, 125, 1);
  border: 0;
  color: rgba(255, 255, 255, 1);
  height: 32px;
  line-height: 16px;
  outline-color: rgba(3, 33, 125, 1);
}

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid rgba(255, 255, 255, 1);
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid rgba(255, 255, 255, 1);
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
.split-button button:not(:only-child):last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  padding: 0;
}
[dir=rtl] .split-button button:not(:only-child):last-child {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):last-child {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}
.table th,
.table th a {
  color: #666;
  font-size: 13px;
  text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}
.table td {
  display: block;
}
@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}
@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}
@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

/***** Forms *****/
.form {
  max-width: 650px;
  padding: 0 !important;
  margin:auto;
  display: block !important;
	justify-content: left !important;
  gap: 64px;
}
}

.form-field ~ .form-field {
  margin-top: 25px;
}

.form-field label {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
}

.form-field input {
  border: 1px solid #87929D;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid rgba(3, 33, 125, 1);
}

.form-field input[type=text] {
  border: 1px solid #87929D;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid rgba(3, 33, 125, 1);
}

.form-field input[type=checkbox] {
  width: auto;
}

.form-field .nesty-input {
  border-radius: 4px;
  border: 1px solid #87929D;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus {
  border: 1px solid rgba(3, 33, 125, 1);
  text-decoration: none;
}

.form-field .hc-multiselect-toggle {
  border: 1px solid #87929D;
}

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid rgba(3, 33, 125, 1);
  text-decoration: none;
}

.form-field textarea {
  vertical-align: middle;
}

.form-field input[type=checkbox] + label {
  margin: 0 0 0 10px;
}

.form-field .optional {
  color: #666;
  margin-left: 4px;
}

.form-field p {
  color: #666;
  font-size: 12px;
  margin: 5px 0;
}

.form footer {
  margin-top: 40px;
  padding-top: 30px;
}

.form footer a {
  color: #666;
  cursor: pointer;
  margin-right: 15px;
}

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}
.form .suggestion-list label {
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 5px;
}
.form .suggestion-list li {
  padding: 10px 0;
}
.form .suggestion-list li a:visited {
  color: rgba(1, 42, 165, 1);
}

@media (max-width: 768px) {
  .form {
    padding: 0 !important;;
  }
}

/***** Header *****/
.header {
  width: 100%;
  max-width: var(--mm-container-max);
  margin: 0 auto;
  padding: 0 var(--mm-gutter);
  box-sizing: border-box;
  position: relative;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.logo img {
  max-height: 50px;
  vertical-align: middle;
}
/* 225px wide against a 340.16 x 125.65 viewBox gives 83.1px tall — the shop's exact figures —
   and that is what lands the wordmark on the nav's line rather than floating it above. 768px,
   not 1024px, because that is where the shop stops treating the header as mobile. */
@media (min-width: 768px) {
  .logo img {
    width: 225px;
    height: auto;
    max-height: none;
  }
}
/* Below that, 160px wide — which renders 59.1px tall, the shop's figure. Note the shop's own
   `.hdr-logo { height: 42px }` is the anchor's layout box, not the artwork: its SVG overflows
   that box at 160 x 59.1. Matching the 42px instead gives a noticeably smaller wordmark. */
@media (max-width: 767px) {
  .header .logo img {
    width: 160px;
    height: auto;
    max-height: none;
  }
}

.logo span {
  margin: 0 10px;
  color: rgba(3, 33, 125, 1);
}

.logo a {
  display: inline-block;
}

.logo a:hover, .logo a:focus, .logo a:active {
  text-decoration: none;
}

.sign-in a {
  display: none !important;
}

a.sign-in {
    display: none;
}
.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}
.user-nav[aria-expanded=true] {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 100px;
  z-index: 1;
}
.user-nav[aria-expanded=true] > a {
  display: block;
  margin: 20px;
}
.user-nav[aria-expanded=true] > .user-nav-list li {
  display: block;
}
.user-nav[aria-expanded=true] > .user-nav-list a {
  display: block;
  margin: 20px;
}

.user-nav-list {
  display: block;
  list-style: none;
}
.user-nav-list > li {
  display: inline-block;
}

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: rgba(3, 33, 125, 1);
  display: none;
  font-size: 14px;
  padding: 0 0 0 20px;
  width: auto;
}
@media (min-width: 768px) {
  .nav-wrapper-desktop a {
    display: inline-block;
  }
}
[dir=rtl] .nav-wrapper-desktop a {
  padding: 0 0 0 20px;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  background-color: transparent;
  color: rgba(3, 33, 125, 1);
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  cursor: pointer;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 90px;
  z-index: 100;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 4px 0;
}

.nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories {
  padding: 0 16px;
}

.nav-wrapper-mobile .menu-list-mobile-items .nav-section {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(51, 51, 51, 1);
  font-weight: 600;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 0.1px solid #ddd;
  padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(51, 51, 51, 1);
  cursor: pointer;
  text-align: start;
}
.nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: #f3f3f3;
  text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: rgba(51, 51, 51, 1);
}
.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: #68737D;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

.skip-navigation {
  align-items: center;
  background-color: black;
  color: white;
  display: flex;
  font-size: 14px;
  justify-content: center;
  left: -999px;
  margin: 20px;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}
[dir=rtl] .skip-navigation {
  left: initial;
  right: -999px;
}
.skip-navigation:focus, .skip-navigation:active {
  left: auto;
  overflow: auto;
  text-align: center;
  text-decoration: none;
  top: auto;
  z-index: 999;
}
[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active {
  left: initial;
  right: auto;
}

#zd-modal-container ~ .skip-navigation {
  display: none;
}

/***** User info in header *****/
.user-info {
  display: inline-block;
}
.user-info .dropdown-toggle::after {
  display: none;
}
@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}
.user-info > button {
  border: 0;
  color: rgba(3, 33, 125, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: rgba(3, 33, 125, 1);
  background-color: transparent;
}
.user-info > button::after {
  color: rgba(3, 33, 125, 1);
  padding-right: 15px;
}
[dir=rtl] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}

#user #user-name {
  display: none;
  font-size: 14px;
}
@media (min-width: 768px) {
  #user #user-name {
    display: inline-block;
  }
}
#user #user-name:hover {
  text-decoration: underline;
}

/***** User avatar *****/
.user-avatar {
  height: 25px;
  width: 25px;
  border-radius: 50%;
/*   display: inline-block; */
  display: none;
  vertical-align: middle;
}

.avatar {
  display: inline-block;
  position: relative;
}
.avatar img {
  height: 40px;
  width: 40px;
}
.avatar .icon-agent {
  color: rgba(3, 33, 125, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: rgba(255, 255, 255, 1);
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer: see the full-width navy footer block further down *****/

.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: #666;
}

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  color: #666;
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
}
.breadcrumbs li a:visited {
  color: rgba(3, 33, 125, 1);
}

@media (max-width: 768px) {
  .breadcrumbs { 
  flex-wrap: wrap;
  }
  .sub-nav {
    margin-bottom:32px !important;
  }
}

/***** Search field *****/
.search-container {
  position: relative;
}

.search {
  border-color: #87929D;
  border-radius: 16px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:focus-within {
  border-color: rgba(3, 33, 125, 1);
}
.search input[type=search],
.search .clear-button {
  background-color: #FBF7FB;
  border-radius: 16px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: #FBF7FB;
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  height: 45px;
  width: 100%;
  font-size: 16px;
}
.search input[type=search]:focus {
  color: #555;
}
.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: rgba(3, 33, 125, 1);
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(3, 33, 125, 1);
}
.search-has-value .clear-button {
  display: flex;
}

[dir=ltr] .search input[type=search] {
  padding-left: 40px;
  padding-right: 20px;
}
[dir=ltr] .search-has-value input[type=search] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=ltr] .search-has-value input[type=search]:focus {
  border-right-color: rgba(3, 33, 125, 1);
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=ltr] .search .clear-button:focus {
  border-left-color: rgba(3, 33, 125, 1);
}

[dir=rtl] .search input[type=search] {
  padding-left: 20px;
  padding-right: 40px;
}
[dir=rtl] .search-has-value input[type=search] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=rtl] .search-has-value input[type=search]:focus {
  border-left-color: rgba(3, 33, 125, 1);
}
[dir=rtl] .search .clear-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=rtl] .search .clear-button:focus {
  border-right-color: rgba(3, 33, 125, 1);
}

.search-icon {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  left: 15px;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: #777;
  pointer-events: none;
}
[dir=rtl] .search-icon {
  left: auto;
  right: 15px;
}

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01K9M1DDYEDRDNWHZFHDM8Q5E6);
  background-position: center;
  background-size: cover;
  min-height: 200px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}
.hero-inner {
  position: relative;
/*   top: 50%; */
  transform: translateY(-50%);
  max-width: 610px;
  margin: 0;
}
.hero-text {
  color: rgba(3, 33, 125, 1);
}
.hero-text h3{
  margin: 0;
  font-weight: 400;
  font-size: 16px;
}
.hero-text h1 {
  padding-bottom: 16px;
  font-weight: 600;
}

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}
@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
  }
}
.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}
.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}
.page-header-description {
  font-style: italic;
  margin: 0 0 30px 0;
  word-break: break-word;
}
@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}
.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.sub-nav {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px 30px;
  justify-content: space-between;
  margin-bottom: 55px;
}
@media (min-width: 768px) {
  .sub-nav {
    flex-direction: row;
  }
}
.sub-nav .breadcrumbs {
  margin: 0;
}
.sub-nav .search-container {
  max-width: 300px;
  width: 100%;
}
@media (min-width: 768px) {
  .sub-nav .search-container {
    flex: 0 1 300px;
  }
}
.sub-nav input[type=search]::after {
  font-size: 15px;
}

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 8px 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0;
  }
}
.blocks-item {
  border: 1px solid rgba(3, 33, 125, 1);
  border-radius: 16px;
  box-sizing: border-box;
  color: rgba(3, 33, 125, 1);
  display: flex;
  flex: 1 0 340px;
  margin: 0;
  max-width: 280px;
  text-align: center;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0;
  }
}
@media (max-width: 768px) {
  .blocks-item {
    max-width: 160px !important;
    max-height: 140px !important;
  }
  .blocks-item-link {
    gap: 4px !important;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: #E4E6F5;
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: rgba(3, 33, 125, 1);
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: rgba(51, 51, 51, 1);
}
.blocks-item-link {
  color: rgba(3, 33, 125, 1);
  padding: 32px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
  align-items: center;
  gap: 8px;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(3, 33, 125, 1);
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
  display:none;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}
.blocks-list {
  gap: 24px;
}

/***** Homepage *****/
.section {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .section {
    margin-bottom: 40px;
  }
}

.home-section h2 {
  margin-bottom: 10px;
  text-align: center;
  color: rgba(3, 33, 125, 1);
}

/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .promoted-articles {
    flex-direction: row;
  }
}
.promoted-articles-item {
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 33%; /* Three columns on desktop */
  }
  [dir=rtl] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}
.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}
.promoted-articles-item a {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}
.promoted-articles-item .icon-lock {
  vertical-align: baseline;
}
.promoted-articles-item:last-child a {
  border: 0;
}
@media (min-width: 1024px) {
  .promoted-articles-item:last-child a {
    border-bottom: 1px solid #ddd;
  }
}

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01KX3V6SRH81MFM9JESQ44GYQC);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: rgba(3, 33, 125, 1);
  text-decoration: underline;
}
.community a:visited {
  color: rgba(1, 42, 165, 1);
}
.community a:hover, .community a:active, .community a:focus {
  color: #0F3554;
}

.community,
.activity {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  display:none;
}

/***** Recent activity *****/
.recent-activity {
  padding: 0 80px;
  display:none;
}

.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}
.recent-activity-list {
  padding: 0;
}
.recent-activity-item {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 0;
}
.recent-activity-item a {
  color: #03217D;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 14px;
  font-weight: 400;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}
.recent-activity-item-link {
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.recent-activity-item-meta {
  color: rgba(51, 51, 51, 1);
  margin: 15px 0 0 0;
  float: none;
  display: none;
}
@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir=rtl] .recent-activity-item-meta {
    float: left;
  }
}
.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-block;
  font-size: 13px;
}
.recent-activity-item-comment {
  padding-left: 5px;
}
[dir=rtl] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}
.recent-activity-item-comment::before {
  display: inline-block;
}
.recent-activity-controls {
  padding-top: 15px;
}
.recent-activity-controls a {
  color: rgba(3, 33, 125, 1);
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: rgba(1, 42, 165, 1);
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: #0F3554;
}
.recent-activity-accessibility-label {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: rgba(3, 33, 125, 1);
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

@media (max-width: 768px) {
    .recent-activity {
    padding: 0 1rem;
  }
}

/***** Category pages *****/
.category-container, .section-container {
  display: flex;
  justify-content: flex-start;
  gap: 48px;
}
.category-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 80%;
  }
}

#main-content-small-padding {
 padding-top: 24px; 
}

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .section-tree {
    flex-direction: row;
  }
}
.section-tree .section {
  flex: initial;
  max-width: 100%;
}
@media (min-width: 1024px) {
.section-tree .section {
  flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */
}
}
.section-tree-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
}
.section-tree-title a {
  color: rgba(51, 51, 51, 1);
}
.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list-item {
  font-size: 16px;
  padding: 15px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.article-list-item a {
  color: rgba(51, 51, 51, 1);
}

.icon-star {
  color: rgba(3, 33, 125, 1);
  font-size: 18px;
}

/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}
.section-content {
  flex: 1;
  max-width: 100%;
}
/* @media (min-width: 1024px) {
  .section-content {
    flex: 0 0 80%;
  } */
}
.section-list {
  margin: 40px 0;
}

.section-list-item {
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  padding: 15px 0;
}
.section-list-item:first-child {
  border-top: 1px solid #ddd;
}
.section-list-item a {
  align-items: center;
  color: rgba(51, 51, 51, 1);
  display: flex;
  justify-content: space-between;
}

.see-all-sections-trigger {
  cursor: pointer;
  display: block;
  padding: 15px;
  text-align: center;
}
.see-all-sections-trigger[aria-hidden=true] {
  display: none;
}

/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
@media (max-width: 768px) {
  .article-container {
    gap: 0px;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
/*   margin-bottom: 40px; */
  margin-bottom: 0px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}

/* Article Author Hidden */
.article-author {
  margin-bottom: 10px;
  display:none; 
}
/* Article Subscribe Hidden */
.article-subscribe{
  display:none; 
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%; /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: rgba(3, 33, 125, 1);
  text-decoration: underline;
}
.article-body a:visited {
  color: rgba(1, 42, 165, 1);
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: #0F3554;
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}
.article-body ul {
  list-style-type: disc;
}
.article-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
	margin: 0 0 40px;
  /*   margin: 40px 0; */
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
/*   display: flex; */
  display: none;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #666;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(3, 33, 125, 1);
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
  }
}
.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  gap: 24px;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}
.article-relatives > *:last-child {
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
  display: none;
}
.article-votes-question {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: rgba(3, 33, 125, 1);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: rgba(1, 42, 165, 1);
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: #0F3554;
}
.article-return-to-top {
  border-top: 1px solid #ddd;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: rgba(51, 51, 51, 1);
  display: block;
  padding: 20px 0;
}
.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
}
.article-return-to-top-icon {
  transform: rotate(0.5turn);
}
.article td > p:first-child,
.article th > p:first-child {
  margin-top: 0;
}
.article td > p:last-child,
.article th > p:last-child {
  margin-bottom: 0;
}

.sidenav-title {
  font-size: 15px;
  position: relative;
  font-weight: 600;
}
.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-articles li,
.related-articles li {
  margin-bottom: 15px;
}

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.attachments .attachment-item:last-child {
  margin-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
  color: rgba(51, 51, 51, 1);
  left: 0;
  position: absolute;
  top: 5px;
}
[dir=rtl] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}
[dir=rtl] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}

.upload-dropzone span {
  color: #666;
}

/***** Social share links *****/
.share {
  padding: 0;
  white-space: nowrap;
}

.share li, .share a {
  display: inline-block;
}

.share li {
  height: 25px;
  width: 25px;
}

.share a {
  color: #666;
}
.share a:hover {
  text-decoration: none;
  color: rgba(3, 33, 125, 1);
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}
.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}
.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: #666;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: rgba(3, 33, 125, 1);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: rgba(1, 42, 165, 1);
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: #0F3554;
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #666;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid rgba(3, 33, 125, 1);
  padding: 40px 20px 20px;
}
@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}
.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}
.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}
.comment-avatar {
  margin-right: 10px;
}
[dir=rtl] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.comment-meta {
  flex: 1 1 auto;
}
.comment-labels {
  flex-basis: 100%;
}
@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}
.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}
.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}
.comment-container {
  width: 100%;
}
.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}
@media (min-width: 768px) {
  [dir=ltr] .comment-form-controls {
    text-align: right;
  }
}
.comment-form-controls input[type=submit] {
  margin-top: 15px;
}
@media (min-width: 1024px) {
  .comment-form-controls input[type=submit] {
    margin-left: 15px;
  }
  [dir=rtl] .comment-form-controls input[type=submit] {
    margin-left: 0;
    margin-right: 15px;
  }
}
.comment-form-controls input[type=checkbox] {
  margin-right: 5px;
}
.comment-form-controls input[type=checkbox] [dir=rtl] {
  margin-left: 5px;
}
.comment-ccs {
  display: none;
}
.comment-ccs + textarea {
  margin-top: 10px;
}
.comment-attachments {
  margin-top: 10px;
}
.comment-attachments a {
  color: rgba(3, 33, 125, 1);
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: rgba(3, 33, 125, 1);
  text-decoration: underline;
}
.comment-body a:visited {
  color: rgba(1, 42, 165, 1);
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: #0F3554;
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.comment-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figure.image {
  display: table;
  margin: 0 auto;
}
.comment-body figure.image > img {
  display: block;
  width: 100%;
}
.comment-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.comment-body ul,
.comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .comment-body ul,
[dir=rtl] .comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.comment-body ul > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body li > ul,
.comment-body li > ol {
  margin: 0;
}
.comment-body ul {
  list-style-type: disc;
}
.comment-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  font-style: italic;
  padding: 0 15px;
}
.comment-mark-as-solved {
  display: inline-block;
}

/***** Vote *****/
/* Used in article comments, post comments and post */
.vote {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.vote a:active, .vote a:hover, .vote a:focus {
  text-decoration: none;
}

.vote-sum {
  color: #666;
  display: block;
  margin: 3px 0;
}
[dir=rtl] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

.vote-up svg {
  transform: scale(1, -1);
}

.vote-up:hover,
.vote-down:hover {
  color: rgba(3, 33, 125, 1);
}

.vote-up, .vote-down {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vote-voted {
  color: rgba(3, 33, 125, 1);
}

.vote-voted:hover {
  color: #010719;
}

/***** Actions *****/
/* Styles admin and en user actions(edit, delete, change status) in comments and posts */
.actions {
  text-align: center;
  flex-shrink: 0; /*Avoid collapsing elements in Safari*/
}
.actions button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/***** Community *****/
.community-hero {
  background-image: url(/hc/theming_assets/01K83NCVCTAAVF15SRSJZH8HX8);
  margin-bottom: 10px;
}
.community-footer {
  padding-top: 50px;
  text-align: center;
}
.community-footer-title {
  font-size: 16px;
  margin-bottom: 20px;
}
.community-featured-posts .title {
  font-size: 18px;
  font-weight: 600;
}
.community-featured-posts, .community-activity {
  padding-top: 40px;
  width: 100%;
}
.community-header {
  margin-bottom: 30px;
}
.community-header .title {
  margin-bottom: 0;
  font-size: 16px;
}

.post-to-community {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .post-to-community {
    margin: 0;
  }
}

/* Community topics grid */
.topics {
  max-width: none;
  width: 100%;
}
.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}

/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}
@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}
.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}
@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

.no-posts-with-filter {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}
.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: #C994DD;
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, 1);
}
.community-follow button[data-selected=true] {
  background-color: rgba(3, 33, 125, 1);
  color: rgba(255, 255, 255, 1);
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, 1);
}
.community-follow button[data-selected=true]:hover {
  background-color: #C994DD;
  border-color: #ccc;
}
.community-follow button::after {
  border-left: 1px solid rgba(3, 33, 125, 1);
  content: attr(data-follower-count);
  color: rgba(3, 33, 125, 1);
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid rgba(3, 33, 125, 1);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: rgba(3, 33, 125, 1);
  margin-bottom: 10px;
  margin-right: 5px;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: rgba(1, 42, 165, 1);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #666;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}
.striped-list-count-item:last-child::after {
  display: none;
}
.striped-list-number {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: rgba(51, 51, 51, 1);
    display: block;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}
.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}
.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: rgba(3, 33, 125, 1);
}
.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}
[dir=rtl] .status-label-official {
  left: 30px;
  right: auto;
}
.status-label-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: #666;
}
.status-label-pending, .status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}
.status-label-open {
  background-color: #c72a1c;
}
.status-label-solved {
  background-color: #68737d;
}
.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}
.status-label-hold {
  background-color: #000;
}
.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}
@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}
.post-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}
.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}
.post-header .status-label {
  vertical-align: super;
}
.post-title {
  margin-bottom: 20px;
  width: 100%;
}
@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}
.post-title h1 {
  display: inline;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}
.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}
.post-avatar {
  margin-bottom: 30px;
}
.post-content {
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  word-break: break-word;
}
.post-info-container {
  display: flex;
  margin-bottom: 40px;
}
.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .post-info {
  padding-right: 0;
  padding-left: 20px;
}
.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}
[dir=rtl] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}
.post-body {
  display: flow-root;
}
.post-body a {
  color: rgba(3, 33, 125, 1);
  text-decoration: underline;
}
.post-body a:visited {
  color: rgba(1, 42, 165, 1);
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: #0F3554;
}
.post-body img {
  height: auto;
  max-width: 100%;
}
.post-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figure.image {
  display: table;
  margin: 0 auto;
}
.post-body figure.image > img {
  display: block;
  width: 100%;
}
.post-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.post-body ul,
.post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .post-body ul,
[dir=rtl] .post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.post-body ul > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body li > ul,
.post-body li > ol {
  margin: 0;
}
.post-body ul {
  list-style-type: disc;
}
.post-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #666;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: rgba(3, 33, 125, 1);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}
@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir=rtl] .post-sidebar {
    padding: 0 50px 0 0;
  }
}
.post-sidebar-title {
  font-size: 18px;
  font-weight: 600;
}
.post-comments {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

/***** Community Badges *****/
/* Styles labels used next to the authors of article comments, community posts, and community comments */
.community-badge-title {
  background-color: #04444d;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 0px 8px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}

.community-badge-titles {
  display: inline;
}

.community-badge-achievement {
  display: block;
  height: 16px;
  white-space: nowrap;
  width: 16px;
}
.community-badge-achievement img {
  width: 100%;
  height: 100%;
}

.community-badge-achievements {
  display: flex;
}

.community-badge-achievements-rest {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  vertical-align: top;
}

.community-badge {
  margin: 2px;
}

.profile-info .community-badge-title {
  padding: 2px 8px;
  line-height: 20px;
}
.profile-info .community-badge-achievement {
  height: 40px;
  width: 40px;
}
.profile-info .community-badge-achievements-rest {
  line-height: 40px;
  font-size: 20px;
}

/* Navigation element that collapses on mobile */
.collapsible-nav {
  flex-direction: column;
  font-size: 14px;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav {
    flex-direction: row;
  }
}

.collapsible-nav-border {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}
@media (min-width: 768px) {
  .collapsible-nav-border {
    border-top: 0;
  }
}

.collapsible-nav-toggle {
  top: 22.5px;
  transform: translateY(-50%);
  position: absolute;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .collapsible-nav-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-nav-toggle {
  left: 0;
  right: auto;
}
.collapsible-nav-toggle-icon {
  display: none;
}
.collapsible-nav-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-nav-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-nav-toggle:focus {
  outline: none;
  border: 1px solid rgba(3, 33, 125, 1);
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: rgba(51, 51, 51, 1);
  line-height: 45px;
  order: 1;
}
@media (min-width: 768px) {
  .collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
  }
  [dir=rtl] .collapsible-nav-list li {
    margin-left: 30px;
    margin-right: 0;
  }
  .collapsible-nav-list li a {
    text-decoration: none;
    padding: 15px 0;
  }
}
.collapsible-nav-list li a {
  color: rgba(51, 51, 51, 1);
  display: block;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current=page]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
  display: none;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected=true]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true] {
    padding: 15px 0 11px 0;
  }
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid rgba(3, 33, 125, 1);
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: rgba(51, 51, 51, 1);
}

.collapsible-nav[aria-expanded=true] li:not([aria-selected=true]),
.collapsible-nav[aria-expanded=true] li:not(.current) {
  display: block;
}

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid rgba(3, 33, 125, 1);
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded=true] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  display: block;
}

/***** My activities *****/
.my-activities-nav {
  background-color: #F7F0F8;
  margin-bottom: 20px;
}
.my-activities-sub-nav {
  margin-bottom: 30px;
}
.my-activities-table .striped-list-title { /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}
@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.my-activities-table thead {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}
.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}
@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}
.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}
.my-activities-table td:not(:first-child) {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}

/* Requests table */
.requests-search {
  width: 100%;
}
.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}
.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}
.requests-table-toolbar .request-table-filter {
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}
.requests-table-toolbar .request-filter {
  display: block;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir=rtl] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}
.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}
.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}
@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe {
    margin-left: 10px;
  }
  [dir=rtl] .requests-table-toolbar .organization-subscribe {
    margin: 0 10px 0 0;
  }
}
.requests-table-toolbar .organization-subscribe button {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}
.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}
.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}
.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}
.requests-table-toolbar + .requests {
  margin-top: 40px;
}
.requests .requests-table-meta {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}
.requests .requests-table thead {
  display: none;
}
@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}
.requests .requests-table-info {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}
.requests .requests-table .requests-link {
  position: relative;
}
.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */
@media (min-width: 768px) {
  .subscriptions-subscribe button {
    width: auto;
  }
}
.subscriptions-table td:last-child {
  display: block;
}
@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}
.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}
.subscriptions-table .user-avatar {
  margin-right: 10px;
}
.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

/* Contributions table */
.contributions-table td:last-child {
  color: #666;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #666;
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}
.request-container .comment-container {
  min-width: 0;
}
.request-breadcrumbs {
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}
.request-main {
  flex: 1 0 auto;
  order: 1;
}
.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}
.request-main .comment-fields.shown {
  display: block;
}
.request-main .request-submit-comment.shown {
  display: inline;
}
@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}
.request-main .comment-form-controls {
  display: block;
}
.request-main .comment-ccs {
  display: block;
}
.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #666;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}
.request-main .comment-show-container.hidden {
  display: none;
}
.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .form-field.comment-ccs > ul[data-hc-focus=true] {
  border: 1px solid rgba(3, 33, 125, 1);
}
.request-main .form-field.comment-ccs > input[type=text] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}
.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid rgba(3, 33, 125, 1);
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f7f7f7;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}
.request-sidebar h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}
.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}
.request-details:last-child {
  border: 0;
}
.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}
.request-details dd {
  padding: 0 10px;
  width: 60%;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  line-break: strict;
  color: #666;
  width: 40%;
}
.request-details .request-collaborators {
  display: inline-block;
}
.request-attachments dt, .request-attachments dd {
  width: 100%;
}
.request-attachments dd {
  margin: 10px 0 0 0;
}
.request-form textarea {
  min-height: 120px;
}
.request-follow-up {
  padding-top: 20px;
}

/***** Pagination *****/
.pagination {
  margin: 20px 0;
  text-align: center;
}
.pagination-next, .pagination-prev, .pagination-first, .pagination-last {
  display: inline-block;
}
.pagination-first-link, .pagination-last-link {
  padding: 0 10px;
}
.pagination-first-text, .pagination-last-text {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.pagination-next-link {
  padding-right: 10px;
}
.pagination-next-text {
  margin-right: 10px;
}
[dir=rtl] .pagination-next-link {
  padding-left: 10px;
}
[dir=rtl] .pagination-next-text {
  margin-left: 10px;
}
.pagination-prev-link {
  padding-left: 10px;
}
.pagination-prev-text {
  margin-left: 10px;
}
[dir=rtl] .pagination-prev-link {
  padding-right: 10px;
}
[dir=rtl] .pagination-prev-text {
  margin-right: 10px;
}

/***** Metadata *****/
.meta-group {
  display: block;
}

.meta-group-opposite {
  float: right;
}

[dir=rtl] .meta-group-opposite {
  float: left;
}

.meta-group * {
  display: inline;
}

.meta-data {
  color: #666;
  font-size: 13px;
  display: none;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}

/* User Profiles */
.profile-header {
  padding: 30px 0;
  background-color: #FAF6FB;
}

.profile-header .container {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .container {
    flex-wrap: nowrap;
  }
}

.profile-header .profile-info {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 16px;
}
[dir=rtl] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-avatar .user-avatar {
  width: 80px;
  height: 80px;
}

.profile-avatar .icon-agent {
  bottom: 0;
  right: 0;
}

.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.profile-header .basic-info .name {
  margin: 0;
  line-height: 25px;
  vertical-align: middle;
  display: inline;
}

.profile-header .options {
  display: flex;
  flex-basis: 100%;
  margin-top: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .options {
    flex-wrap: nowrap;
    flex-basis: auto;
    margin-top: 0;
    margin-left: 10px;
  }
  [dir=rtl] .profile-header .options {
    margin-left: 0;
    margin-right: 10px;
  }
  .profile-header .options > :not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }
  [dir=rtl] .profile-header .options > :not(:last-child) {
    margin-left: 10px;
    margin-right: 0;
  }
}

.user-profile-actions {
  width: 100%;
  margin-bottom: 15px;
}

.profile-header .description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 15px 0;
  flex-basis: 100%;
}

.profile-stats {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.profile-stats .stat {
  display: flex;
  margin-bottom: 10px;
  justify-content: space-between;
}

.profile-stats .stat-label {
  color: #666;
  flex: 0 0 100px;
  margin-right: 10px;
}
[dir=rtl] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

.profile-stats-activity {
  border-top: solid 1px #ddd;
  margin-top: 15px;
}
@media (min-width: 768px) {
  .profile-stats-activity {
    border-top: 0;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat {
    flex-direction: column;
  }
}

.profile-stats-activity .stat:first-child {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .profile-stats-activity .stat:first-child {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat:not(:last-child) {
    margin-right: 40px;
  }
  [dir=rtl] .profile-stats-activity .stat:not(:last-child) {
    margin-left: 40px;
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat-label {
    flex: 0 1 auto;
  }
}

.profile-stats-counters {
  border-bottom: solid 1px #ddd;
}
@media (min-width: 768px) {
  .profile-stats-counters {
    flex: 0 0 200px;
    border-bottom: 0;
    margin-left: 40px;
  }
  [dir=rtl] .profile-stats-counters {
    margin-left: 0;
    margin-right: 40px;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters {
    flex: 0 0 270px;
    margin-left: 60px;
  }
  [dir=rtl] .profile-stats-counters {
    margin-right: 60px;
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat {
    flex-direction: column;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat:not(:last-child) {
    margin-bottom: 15px;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat-label {
    flex: 0 1 auto;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat-label {
    flex: 0 0 100px;
  }
}

.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px rgba(3, 33, 125, 1);
  border-radius: 4px;
  color: rgba(3, 33, 125, 1);
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}
.profile-private-badge .profile-private-icon {
  margin-left: 5px;
  line-height: 15px;
}
@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}

.profile-nav {
  background-color: #F7F0F8;
  margin-bottom: 37px;
}

.profile-section {
  width: 100%;
}
@media (min-width: 1024px) {
  .profile-section {
    width: calc(100% - 330px);
  }
}

.profile-section-header {
  display: flex;
  flex-wrap: wrap;
}

.profile-section-title {
  flex-basis: 100%;
  margin-bottom: 0;
}

.profile-section-description {
  flex-basis: 100%;
  padding: 10px 0;
  color: #666;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}

.profile-section-sorter {
  flex-basis: 100%;
  border-top: solid 1px #eee;
  font-size: 13px;
}
.profile-section-sorter .dropdown-toggle {
  padding: 10px 0;
  width: 100%;
}
.profile-section-sorter .dropdown-toggle::after {
  position: absolute;
  right: 0;
}
[dir=rtl] .profile-section-sorter .dropdown-toggle::after {
  left: 0;
  right: initial;
}
@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
}
@media (min-width: 768px) {
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }
  [dir=rtl] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}

.profile-badges-items {
  margin-top: 25px;
}
.profile-badges-item {
  border-top: 1px solid #ddd;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-start;
  padding: 27px 12px;
}
.profile-badges-item > div {
  padding-right: 12px;
  padding-left: 12px;
}
.profile-badges-item-image {
  height: 40px;
  width: 40px;
  margin-right: 12px;
}
.profile-badges-item-image img {
  max-height: 40px;
}
[dir=rtl] .profile-badges-item-image {
  margin-left: 12px;
  margin-right: 0;
}
.profile-badges-item-title, .profile-badges-item-metadata-title {
  font-size: 15px;
  margin-bottom: 10px;
}
.profile-badges-item-title {
  font-weight: 600;
}
.profile-badges-item-description, .profile-badges-item-metadata-description {
  color: #666;
  font-size: 13px;
  margin: 0;
}
.profile-badges-item-metadata {
  margin-left: auto;
  text-align: right;
}
[dir=rtl] .profile-badges-item-metadata {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.profile-contribution {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  padding: 20px 0;
  position: relative;
}

.profile-contribution-header {
  margin-bottom: 5px;
}

.profile-contribution-title {
  margin: 0 0 5px 0;
  display: inline;
  line-height: 21px;
  font-size: 15px;
  vertical-align: middle;
}

.profile-contribution-body {
  margin: 10px 0;
}

.profile-contribution-list > .profile-contribution {
  border-top: 1px solid #eee;
}
@media (min-width: 768px) {
  .profile-contribution-list > .profile-contribution {
    padding-left: 30px;
  }
  [dir=rtl] .profile-contribution-list > .profile-contribution {
    padding-right: 30px;
    padding-left: 0;
  }
}

.profile-contribution-list > .profile-contribution:last-child {
  border-bottom: 1px solid #eee;
}

.profile-contribution-icon {
  left: 0;
  position: absolute;
  color: #ccc;
  line-height: 25px;
}
[dir=rtl] .profile-contribution-icon {
  right: 0;
}
.profile-contribution-icon svg {
  vertical-align: middle;
}

.profile-contribution-list .profile-contribution-header {
  margin-left: 30px;
}
[dir=rtl] .profile-contribution-list .profile-contribution-header {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-contribution-list .profile-contribution-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-contribution-list .profile-contribution-header {
    padding-right: 0;
  }
}

.profile-comments .profile-contribution-breadcrumbs {
  margin-left: 30px;
}
[dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-comments .profile-contribution-breadcrumbs {
    margin-left: 0;
  }
  [dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
    padding-right: 0;
  }
}

.profile-section .no-activity,
.profile-section .private-activity {
  display: block;
  margin-top: 40px;
  color: #999;
}

.private-activity-icon {
  margin-right: 10px;
}
[dir=rtl] .private-activity-icon {
  margin-right: 0;
  margin-left: 10px;
}

.profile-activity-list {
  margin-top: 25px;
}

.profile-activity {
  position: relative;
  padding-bottom: 30px;
}
@media (min-width: 768px) {
  .profile-activity {
    padding-left: 20px;
  }
  [dir=rtl] .profile-activity {
    padding-right: 20px;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-activity:not(:last-child) {
    border-left: 1px solid #ddd;
  }
  [dir=rtl] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid #ddd;
  }
}

.profile-activity-header {
  display: flex;
  align-items: center;
  margin-left: 35px;
}
[dir=rtl] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}
@media (min-width: 768px) {
  .profile-activity-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-activity-header {
    margin-right: 0;
  }
}

.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  align-self: flex-start;
}
[dir=rtl] .profile-activity-header .user-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-activity-description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.profile-activity-description span:first-child {
  font-weight: 600;
  display: inline;
}

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #f7f7f7;
}
@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir=rtl] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}

.profile-activity-icon {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 1);
  background-position: 50% 50%;
  text-align: center;
  color: #ccc;
}
[dir=rtl] .profile-activity-icon {
  right: 0;
}
@media (min-width: 768px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir=rtl] .profile-activity-icon {
    right: -14px;
  }
}

.profile-activity-icon svg {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  margin: auto;
}

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}
.search-results-column {
    padding: 0 !important;
    display: block !important;
    flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}
.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
.search-results-sidebar .sidenav-item {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: rgba(51, 51, 51, 1);
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: #E9EBED;
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545C;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 15px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: rgba(3, 33, 125, 1);
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
  content: " ⌄";
  font-weight: bold;
}
.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}
.search-results-list {
  margin-bottom: 25px;
}
.search-results-list > li {
  padding: 20px 0;
}
.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}
.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: #2F3941;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
  color: #68737D;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
  color: rgba(3, 33, 125, 1);
}
.search-results .no-results .action-prompt a:visited {
  color: rgba(3, 33, 125, 1);
}

.search-result-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-result-title {
  font-size: 16px;
  margin-bottom: 0;
}
.search-result-votes, .search-result-meta-count {
  color: #666;
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: rgba(3, 33, 125, 1);
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: #666;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}
.search-result-meta-container .meta-data::after {
  content: none;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin-top: 10px;
  margin-bottom: 0;
  word-break: break-word;
}

/* By default use bold instead of italic to highlight */
.search-results-description em {
  font-style: normal;
  font-weight: bold;
}

/* Add a yellow background for Chinese */
html[lang|=zh] .search-results-description em {
  font-style: normal;
  background: yellow;
}

/***** Notifications *****/
.notification {
  border: 1px solid;
  display: table;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  padding: 13px 15px;
  transition: height 0.2s;
  width: 100%;
  color: #555;
}

.notification a {
  color: #158ec2;
}

.notification-inner {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 980px;
}

.notification-icon, .notification-inline.notification-error::before, .notification-text, .notification-dismiss {
  display: table-cell;
  vertical-align: middle;
}

.notification-text {
  padding: 0 15px;
  width: 100%;
}

.notification + .notification {
  margin-bottom: -1px;
  position: relative;
  top: -1px;
}

/* Error */
.notification-error {
  background: #ffeded;
  border-color: #f7cbcb;
}

.notification-error .notification-icon::before, .notification-error .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E");
}

/* Notice */
.notification-notice {
  background: #dbf3ff;
  border-color: #b5e0f5;
}

.notification-notice .notification-icon::before, .notification-notice .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Alert / Lock */
.notification-alert {
  color: #ad5e18;
  background: #fff8ed;
  border-color: #fcdba9;
}

.notification-alert .notification-icon::before, .notification-alert .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
}

.notification-icon::before, .notification-inline.notification-error::before {
  background-size: cover;
  content: "";
  display: inline-block;
  height: 14px;
  width: 14px;
  vertical-align: middle;
}

/* Dismiss button */
.notification-dismiss, a.notification-dismiss {
  color: #555;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 100ms ease;
  text-decoration: none !important;
}

.notification-dismiss:hover {
  opacity: 1;
}

/* Inline notifications */
.notification-inline {
  border-radius: 4px;
  line-height: 14px;
  margin-top: 5px;
  padding: 5px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}
[dir=rtl] .notification-inline {
  text-align: right;
}
.notification-inline[aria-hidden=true] {
  display: none;
}
.notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
  margin: -2px 5px 0 0;
}
[dir=rtl] .notification-inline.notification-error::before {
  margin: 0 0 0 5px;
}
.notification-inline.notification-error {
  background-color: #fff0f1;
  border: 1px solid #e35b66;
  color: #cc3340;
}
.notification-inline.notification-large {
  padding: 13px 15px;
  margin-bottom: 25px;
}

.notification-left-aligned {
  text-align: left;
  padding-left: 0;
}

html[dir=rtl] .notification-left-aligned {
  text-align: right;
  padding-left: auto;
  padding-right: 0;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-block;
  padding: 0;
  text-align: initial;
  vertical-align: middle;
}
.dropdown-toggle:hover {
  text-decoration: none;
}
.dropdown-toggle > * {
/*   display: inline-block; */
  display: none;
}
.dropdown-toggle[aria-expanded=true] + .dropdown-menu {
  display: block;
}

.dropdown-menu {
  background: #fff;
  border: 1px solid #d8dcde;
  border-radius: 3px;
  box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  padding: 10px 0;
  position: absolute;
  text-align: left;
  z-index: 1000;
}
[dir=rtl] .dropdown-menu {
  text-align: right;
}
.dropdown-menu [role=separator] {
  border-bottom: 1px solid #e9ebed;
  margin: 4px 0;
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  color: #2f3941;
  cursor: pointer;
  display: block;
  padding: 7px 40px 7px 20px;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  text-align: start;
  line-height: inherit;
  width: 100%;
}
[dir=rtl] .dropdown-menu [role=menuitem],
[dir=rtl] .dropdown-menu [role=menuitemradio] {
  padding: 7px 20px 7px 40px;
}
.dropdown-menu [role=menuitem]:hover, .dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover,
.dropdown-menu [role=menuitemradio]:focus {
  background: rgba(31, 115, 183, 0.08);
  text-decoration: none;
  color: #2f3941;
}
.dropdown-menu [role=menuitem][aria-selected=true], .dropdown-menu [role=menuitem][aria-checked=true],
.dropdown-menu [role=menuitemradio][aria-selected=true],
.dropdown-menu [role=menuitemradio][aria-checked=true] {
  cursor: default;
}
.dropdown-menu [role=menuitem][aria-selected=true]::after, .dropdown-menu [role=menuitem][aria-checked=true]::after,
.dropdown-menu [role=menuitemradio][aria-selected=true]::after,
.dropdown-menu [role=menuitemradio][aria-checked=true]::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  width: 12px;
}
[dir=rtl] .dropdown-menu [role=menuitem][aria-selected=true]::after, [dir=rtl] .dropdown-menu [role=menuitem][aria-checked=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-selected=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-checked=true]::after {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}
.dropdown-menu [role=menuitem][hidden], .dropdown-menu [role=menuitem][aria-hidden=true],
.dropdown-menu [role=menuitemradio][hidden],
.dropdown-menu [role=menuitemradio][aria-hidden=true] {
  display: none !important;
}

.dropdown-menu-end {
  left: auto;
  right: 0;
}

.dropdown-menu-top {
  bottom: 100%;
  margin-bottom: 1px;
}

[dir=rtl] .dropdown-menu {
  left: auto;
  right: 0;
  text-align: right;
}
[dir=rtl] .dropdown-menu-end {
  left: 0;
  right: auto;
}

.dropdown-chevron-icon {
  vertical-align: middle;
}

.content-tags > p {
  color: #68737D;
  margin-top: 32px;
  margin-bottom: 4px;
}
.content-tags-add-hint {
  color: #68737D;
  font-size: 14px;
}

.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  word-break: break-word;
}
.content-tag-list li {
  border-right: 1px solid #C2C8CC;
  margin-bottom: 4px;
}
[dir=ltr] .content-tag-list li {
  padding-right: 8px;
  margin-right: 8px;
}
[dir=rtl] .content-tag-list li {
  padding-left: 8px;
  margin-left: 8px;
}
.content-tag-list li:last-child {
  border: none;
}

/***** WYSIWYG Editor *****/
#hc-wysiwyg {
  border: 1px solid #87929D;
}

/***** Upload Dropzone *****/
.upload-dropzone {
  border: 1px solid #87929D;
}

/***** Summary component *****/
zd-summary-block {
  background: #f3f6f6;
}
[dir=ltr] zd-summary-block {
  border-left-color: #859fa1;
}
[dir=rtl] zd-summary-block {
  border-right-color: #859fa1;
}

.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: rgba(3, 33, 125, 1);
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: rgba(1, 42, 165, 1);
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: #0F3554;
}
.service-catalog-description img {
  height: auto;
  max-width: 100%;
}
.service-catalog-description p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figure.image {
  display: table;
  margin: 0 auto;
}
.service-catalog-description figure.image > img {
  display: block;
  width: 100%;
}
.service-catalog-description figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.service-catalog-description ul,
.service-catalog-description ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .service-catalog-description ul,
[dir=rtl] .service-catalog-description ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.service-catalog-description ul > ul,
.service-catalog-description ol > ol,
.service-catalog-description ol > ul,
.service-catalog-description ul > ol,
.service-catalog-description li > ul,
.service-catalog-description li > ol {
  margin: 0;
}
.service-catalog-description ul {
  list-style-type: disc;
}
.service-catalog-description :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.service-catalog-description blockquote {
  border-left: 1px solid #ddd;
  color: #666;
  font-style: italic;
  padding: 0 15px;
}

.category-icon {
  max-width: 48px;
}

.section-subheading {
	padding: 0px 0px;
}

.mm-link {
  color: #C994DD;
}

.text-centered-container {
	text-align: center;
  color: #03217d;
  max-width: 90%;
  margin: auto;
}

/* main hero banner */
#main-content {
  padding: 40px 80px 0 80px;
  display: flex;
  justify-content: center;
  gap: 64px;
}

@media (max-width: 768px) {
  #main-content {
    padding: 24px 24px 0 24px;
    flex-direction: column-reverse;
    align-items: center;
    gap: 24px;
    display:none;
  }
  .home-hero-image {
    max-width: 100%;
  }
  .hero-text {
    text-align: center;
  }
}

.home-hero-image {
  max-width: 380px;
  border-radius: 16px;
}

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  width: 100%;
  max-width: 400px;
}

.left-menu-category-table-container {
  border: 1px solid #8190BE;
  border-radius: 16px;
  overflow: hidden;
  min-width: 290px;
  font-weight: 500;
}

.left-menu-category-cell img {
  max-width:36px;
}

.left-menu-category-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid #8190BE;
}

.left-menu-category-row:last-child {
  border-bottom: none;
}

.left-menu-category-cell.left-menu-category.last {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .category-container, .section-container {
    gap: 24px;
    display: flex;
    flex-direction:column-reverse;
    padding: 0 8px;
    margin-bottom: 24px;
  }
}

@media (min-width: 768px) {
  .category-content-right {
    width: 900px;
  }
}

.back-to-categories {
  padding: 4px 0;
}

/* Hide Subject/Description for Influencer Form */
#new-request-form:has(input[value="5547082092191"]) .StyledField-sc-12gzfsu-0:has(input[name*="request[subject]"]),
#new-request-form:has(input[value="5547082092191"]) .StyledField-sc-12gzfsu-0:has(textarea[name*="request[description]"]) {
  display: none !important;
}

/* Hide Subject/Description for Price Promise Form */
#new-request-form:has(input[value="5558227282463"]) .StyledField-sc-12gzfsu-0:has(input[name*="request[subject]"]),
#new-request-form:has(input[value="5558227282463"]) .StyledField-sc-12gzfsu-0:has(textarea[name*="request[description]"]) {
  display: none !important;
}

/* ===== Full-width navy header (match main site) ===== */

/* Solid #03217D bar that stretches the full viewport width, while the logo and nav stay on
   the content column. The horizontal half of this shorthand has to carry the gutter token:
   it lands after the .header rule that sets the column, so `padding: 25px 0` here would zero
   it. The old layout got its inset from `width: 90%` instead, which is gone. */

.header {
  background-color: #03217D;
  /* No vertical padding: the shop's equivalent row (.hdr-middle) is a flat 90px with
     `padding: 0 24px` on the container inside it, and the row's height comes from min-height
     alone. The 25px top and bottom here were adding to that, making our row 102px against
     their 90px — a 12px step every time you moved between the two sites. */
  padding: 0 var(--mm-gutter);
  min-height: 90px;
}
/* The shop steps .hdr-middle down twice on the way to a phone. Same numbers here. */
@media (max-width: 529px) {
  .header { min-height: 80px; }
}
@media (max-width: 429px) {
  .header { min-height: 70px; padding: 0 17.5px; }
}
.header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;      /* centre the full-width block */
  background-color: #03217D;
  z-index: -1;             /* sits behind the logo + nav */
}
/* White logo wordmark (only shows if show_brand_name is on) */
.logo span {
  color: #FFFFFF;
}

/* Desktop nav links: white, with a little room underneath */
.nav-wrapper-desktop a {
  color: #FFFFFF;
	font-weight: 600;
  font-size: 15px;
}
.nav-wrapper-desktop a:hover,
.nav-wrapper-desktop a:focus,
.nav-wrapper-desktop a:active {
  color: #FFFFFF;                 /* stay white on hover */
  text-decoration: underline;
  text-underline-offset: 6px;     /* drops the underline like the main site's "Quiz" item */
}

/* Mobile hamburger on the navy bar */
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  color: #FFFFFF;
}
/* keep it visible once the menu opens (light circle appears behind it) */
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  color: #03217D;
}

/* ===== Footer — mirrors the main site's footer from the signature lettering down =====
   Values are the shop's, converted from its 10px rem to px. Colours: navy #03217D, muted copy
   #B7C0E4, lilac accents #C994DD, rules rgba(255,255,255,.2). */
.footer {
  position: relative;
  margin: 60px 0 0;          /* page-to-footer gap; the band itself is flush, like the shop */
  padding: 0;
  border-top: 0;
  background-color: #03217D;
  color: #FFFFFF;
  font-size: 15px;
  line-height: 1.8;
  overflow: hidden;          /* clips the zzz watermark */
}
.footer a,
.footer a:visited {
  color: inherit;
  text-decoration: none;
}

/* Signature lettering between two hairlines */
.ftr-signature {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
  padding-top: 32px;
  color: #FFFFFF;
}
.ftr-signature::before,
.ftr-signature::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}
.ftr-signature-lettering {
  display: block;
  flex: 0 1 420px;
  width: 420px;
  max-width: 84%;
  height: auto;
}

/* Help directory */
.ftr-directory {
  position: relative;
  z-index: 1;
  padding: 40px 0 32px;
  color: #FFFFFF;
}
.ftr-directory-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 0.9fr;
  gap: 40px;
}
.ftr-directory-title,
.ftr-nav-group summary {
  margin: 0 0 16px;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
.ftr-contact p {
  margin: 0 0 10px;
  max-width: 320px;
  color: #B7C0E4;
  font-size: 13px;
  line-height: 1.6;
}
.ftr-directory a,
.ftr-directory a:visited {
  color: #B7C0E4;
  font-size: 13px;
  text-decoration: none;
  text-underline-offset: 4px;
}
.ftr-directory a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}
.ftr-directory a:focus-visible,
.ftr-nav-group summary:focus-visible {
  outline: 2px solid #C994DD;
  outline-offset: 4px;
}
.ftr-directory .ftr-contact-action,
.ftr-directory .ftr-store-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  min-height: 48px;
  margin: 8px 0 0;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.ftr-contact-action span,
.ftr-store-link span {
  color: #C994DD;
}
.ftr-nav-group summary {
  list-style: none;
  cursor: default;
}
.ftr-nav-group summary::-webkit-details-marker {
  display: none;
}
.ftr-nav-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ftr-nav-group li {
  padding: 0;
}
.ftr-nav-group a {
  display: inline-block;
  padding: 6px 0;
  line-height: 1.6;
}

/* Awards strip */
.ftr-recognition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.ftr-recognition-copy {
  flex: 1 1 280px;
  max-width: 520px;
}
.ftr-recognition-title {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}
.ftr-recognition-label {
  margin: 6px 0 0;
  color: #B7C0E4;
  font-size: 13px;
  line-height: 1.6;
}
.ftr-recognition-marks {
  display: flex;
  align-items: center;
  gap: 24px;
}
/* The highlights artwork is a wide strip; the pair box crops it to its left half. */
.ftr-recognition-pair {
  display: block;
  flex: 0 0 auto;
  width: 124px;
  height: 64px;
  overflow: hidden;
}
.ftr-recognition-pair img {
  display: block;
  width: 205.6px;
  max-width: none;
  height: 64px;
}
.ftr-recognition-award {
  display: block;
  width: 153px;
  max-width: 100%;
  height: auto;
}

/* Baseline: safe checkout, socials, policies, small print */
.ftr-baseline {
  position: relative;
  z-index: 1;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
  color: #FFFFFF;
}
.footer-col {
  padding-left: 10px;
  padding-right: 10px;
}
.footer-socials {
  align-items: center;
  justify-content: space-between;
}
.footer-block {
  font-size: 14px;
}
.ftr-baseline .footer-block {
  margin-bottom: 16px;
}
.ftr-baseline .footer-checkout {
  max-width: 440px;
}
.ftr-baseline .footer-checkout img {
  display: block;
  max-width: 100%;
  height: auto;
}
.footer-socials-list {
  display: inline-flex;
  margin-left: auto;
}
.footer-socials-list a + a {
  margin-left: 14px;
}
.footer-socials-list a:nth-child(2) {
  margin-right: 10px;
}
.ftr-baseline .footer-socials-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.ftr-baseline .footer-socials-list img {
  width: 24px;
  height: 24px;
}
.ftr-legal {
  margin-top: 10px;
}
.footer-privacy {
  color: #FFFFFF;
}
.footer-privacy ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}
.footer-privacy li {
  padding: 0;
  font-size: 12px;
  line-height: 16px;
}
.footer-privacy a,
.footer-privacy a:visited {
  color: #FFFFFF;
}
/* direct children only: the year lives in a nested span and must not get its own padding */
.footer-privacy ul li > a,
.footer-privacy ul li > span {
  display: inline-block;
  padding: 10px;
  font-size: inherit;
  line-height: inherit;
  border: 0;
}
.footer-privacy .txt-und {
  text-decoration: underline;
}
.footer-privacy .footer-language-selector button {
  color: #FFFFFF;
}
.ftr-note {
  margin: 0;
  padding: 0 0 20px;
  color: #FFFFFF;
}
.ftr-baseline small {
  display: block;
  color: #B7C0E4;
  font-size: 0.875em;
  line-height: 1.6;
}

/* zzz watermark */
.footer-zzz {
  position: absolute;
  bottom: 30px;
  left: 30px;
  z-index: 0;
  width: 100%;
  max-width: 2000px;
  pointer-events: none;
}
.footer-zzz path {
  fill: rgba(255, 255, 255, 0.03);
}

@media (max-width: 991px) {
  .ftr-directory {
    padding: 24px 0;
  }
  .ftr-directory-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ftr-contact {
    padding-bottom: 24px;
  }
  .ftr-directory-title {
    margin-bottom: 6px;
  }
  .ftr-nav-group {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  .ftr-nav-group:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  /* The last accordion's bottom rule already separates the awards strip; the shop draws a
     second line 32px under it. One is enough — the strip keeps its 24px padding above. */
  .ftr-recognition {
    margin-top: 0;
    border-top: 0;
  }
  .ftr-nav-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    margin: 0;
    cursor: pointer;
  }
  .ftr-nav-group summary::after {
    content: "+";
    font-size: 20px;
    color: #C994DD;
  }
  .ftr-nav-group[open] summary::after {
    content: "\2212";   /* minus sign */
  }
  .ftr-nav-group ul {
    padding-bottom: 12px;
  }
  .ftr-nav-group a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .ftr-baseline .footer-socials {
    flex-direction: row;
    align-items: center;
    gap: 0 20px;
  }
  .ftr-baseline .footer-checkout {
    width: 100%;
    max-width: 360px;
    margin-left: 0;
  }
  .ftr-baseline .footer-privacy ul li:first-child {
    flex-basis: 100%;
  }
}
@media (max-width: 380px) {
  .ftr-recognition-marks {
    gap: 12px;
  }
  .ftr-recognition-award {
    width: 130px;
  }
}

/* Force Poppins on header + footer and everything inside them */
.header,
.header *,
.footer,
.footer * {
  font-family: 'Poppins', 'poppins-fallback', sans-serif;
}

/* ===== Article call-to-action buttons ===== */
.article-body a.mm-btn,
.article-body a.mm-btn:visited {
  display: inline-block;
  background-color: #03217D;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  padding: 12px 28px;
  border-radius: 24px;
  text-decoration: none;
  margin: 0 8px;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.article-body a.mm-btn:hover,
.article-body a.mm-btn:focus,
.article-body a.mm-btn:active {
  background-color: #C994DD;
  color: #03217D;
  text-decoration: none;
}

/* Purple pill variant (like "More on sustainability") */
.article-body a.mm-btn-alt,
.article-body a.mm-btn-alt:visited {
  background-color: #C994DD;
  color: #03217D;
}
.article-body a.mm-btn-alt:hover,
.article-body a.mm-btn-alt:focus,
.article-body a.mm-btn-alt:active {
  background-color: #03217D;
  color: #FFFFFF;
}

.article-share{
  display:none;
}

.snooze-banner {
  display: block;
  background-image: url(/hc/theming_assets/01KX3V6SRH81MFM9JESQ44GYQC);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  aspect-ratio: 1032 / 360;
  width: 90%;
  max-width: 1160px;     /* was 890px */
  margin: 40px auto;
  overflow: hidden;
}

@media (max-width: 768px) {
  
  
  .footer {
    margin-top: 0px;
  }
}

/* ===== Homepage category carousel ===== */
/* .mm-cats lives inside the full-bleed band, so it has to recreate the .container geometry
   exactly — sharing the tokens is what keeps them in sync now. */
.mm-cats {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--mm-container-max);
  margin: 0 auto;
  padding: 0 var(--mm-gutter);
  box-sizing: border-box;
}

/* NEW — full-width light band behind the carousel (matches the main site) */
.mm-cats-band {
  position: relative;
  left: 50%;
  width: 100vw;
  margin: 40px -50vw;        /* full-bleed sideways + vertical spacing */
  padding: 48px 0;
  background: #F4F5F9;       /* the light lavender from the main site */
  overflow: hidden;          /* clips the zzz watermark to the band */
}

/* faint navy zzz watermark (same treatment as your footer) */
.mm-cats-zzz {
  position: absolute;
  bottom: 1.5rem;
  left: 3rem;
  width: 100%;
  max-width: 2000px;
  z-index: 0;
  pointer-events: none;
}

/* drag-to-scroll affordance */
.mm-cats-scroller { cursor: grab; }
.mm-cats-scroller.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;    /* let the drag move freely, no snapping mid-drag */
  user-select: none;
}
.mm-cats-scroller.is-dragging a { pointer-events: none; }
.mm-cats-scroller img { -webkit-user-drag: none; user-select: none; }

.mm-cats-heading {
  text-align: center;
  color: #03217D;
  margin-bottom: 24px;
}

/* The horizontal scroll row */
.mm-cats-scroller {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
  padding-bottom: 12px;                /* room for the scrollbar */
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: #C994DD transparent;
  width: max-content;      /* shrink to the width of the cards… */
  max-width: 100%;         /* …but never wider than the container (so it still scrolls) */
  margin-left: auto;       /* centre the row when it fits */
  margin-right: auto;
}
/* Slim purple scrollbar (WebKit) */
.mm-cats-scroller::-webkit-scrollbar {
  height: 8px;
}
.mm-cats-scroller::-webkit-scrollbar-thumb {
  background: #C994DD;
  border-radius: 4px;
}
.mm-cats-scroller::-webkit-scrollbar-track {
  background: transparent;
}

/* Each card: fixed width so they never squish, just scroll */
.mm-cat {
  flex: 0 0 173px;
  scroll-snap-align: start;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  display: block;
  aspect-ratio: 200 / 300;
}
.mm-cat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pill button overlay */
.mm-cat-btn {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: #FFFFFF;
  color: #03217D;
  font-weight: 600;
  font-size: 15px;
  min-width: 87%;
  text-align: center;
  padding: 12px 20px;
  border-radius: 24px;
  white-space: nowrap;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.mm-cat-btn:hover,
.mm-cat-btn:focus {
  background: #03217D;
  color: #FFFFFF;
  text-decoration: none;
}
.mm-cat:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.blocks-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 8px 0;
/*   width: 90%; */
  margin: auto;
}
.blocks-item {
  flex: none;          /* grid controls sizing now */
  max-width: none;     /* let each card fill its column */
}
.mm-cats-scroller img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;   /* let the mousedown fall through to the scroller/anchor */
}
@media (max-width: 768px) {
  .blocks-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px !important;
  }
  .blocks-item {
    max-width: none !important;   /* beat the theme's !important */
    max-height: none !important;
  }
}

/* ===== Full-width hero banner ===== */
#main-content.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  padding: 48px 5%;
  margin-bottom: 40px;
  /* full-bleed background */
  background-image: url({{asset 'home-hero-image.png'}}) !important;   /* or a wide banner asset */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* stretch the background edge-to-edge */
#main-content.hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: inherit;          /* reuse the same image */
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* optional dark overlay so text stays readable */
#main-content.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: linear-gradient(
    90deg, 
    rgba(63 63 63 / 73%) 0%, 
    rgba(44 44 44 / 59%) 55%,
		rgba(79 79 79 / 44%) 100%
  );
  z-index: 1;
}

.hero-left {
  position: relative;
  z-index: 2;
  max-width: 520px;
  /* no background / padding / border-radius needed now */
}
.hero-text h1,
.hero-text h3 {
  color: #FFFFFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* hide the old right-hand lorry image (now it's the background) */
.hero-right {
  display: none;
}
#main-content.hero .search {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  #main-content.hero {
    display: flex;             /* was display:none in your current mobile rule */
    min-height: 280px;
    padding: 32px 24px;
    text-align: center;
  }
}

/* ===== Trustpilot promo bar (above header) ===== */
/* Top strip — "Go to Mattressman homepage" (2026-09-14, was the Trustpilot score bar).
   35px is .hdr-topper's height on mattressman.co.uk, set as min-height on the inner flex row
   so it holds regardless of the icon or font that lands in it.
   #081C4E ink rather than white: white on #C994DD is 2.4:1 and fails AA, the navy is 6.8:1. */
.promotion-bar-header {
  background-color: #C994DD;
  color: #081C4E;
  font-family: 'Poppins', 'poppins-fallback', sans-serif;
  font-size: 13px;
}
.promotion-bar-header__link,
.promotion-bar-header__link:visited,
.promotion-bar-header__link:hover,
.promotion-bar-header__link:focus {
  display: block;
  color: #081C4E;
  text-decoration: none;
}
.promotion-bar-header__inner {
  width: 100%;
  max-width: var(--mm-container-max);
  margin: 0 auto;
  padding: 0 var(--mm-gutter);
  min-height: 35px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
}
.promotion-bar-header__link:hover .promotion-bar-header__inner span {
  text-decoration: underline;
}
.mm-backarrow { flex-shrink: 0; }

/* ---------- utility row (Speak with an Expert / Find your nearest store) ----------
   Lifted from mattressman.co.uk's .hdr-right. Sits on #03217D, the same blue as .header
   directly below it, so the two rows read as a single block. Desktop only — the mobile bar
   already carries its own Stores button, and the main site hides these below md too. */
.mm-hdr-utility {
  background-color: #03217D;
  display: none;
}
.mm-hdr-utility-inner {
  width: 100%;
  max-width: var(--mm-container-max);
  margin: 0 auto;
  /* 7px top and bottom over a 22.4px line box = 36.4px, which is what .hdr-top measures on the
     shop. It was `8px … 0`, giving 29px. */
  padding: 7px var(--mm-gutter);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-family: 'Poppins', 'poppins-fallback', sans-serif;
}
/* 768px: the shop hides .hdr-top at max-width 767 and shows it above that, burger or no. */
@media (min-width: 768px) {
  .mm-hdr-utility { display: block; }
}
.mm-hdr-expert,
.mm-hdr-expert:visited,
.mm-hdr-store,
.mm-hdr-store:visited {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.6;          /* 22.4px, the shop's line box — it sets the row's height */
  text-decoration: none;
  white-space: nowrap;
}
.mm-hdr-expert { font-weight: 600; }
.mm-hdr-store {
  /* 600, matching "Speak with an Expert". The shop's .hdr-store wrapper computes to 400, but
     that wrapper also holds the small opening-hours line — its visible branch name
     (.hdr-store-name) is 600, and that is the part this link stands in for. */
  font-weight: 600;
  /* The divider between the two, exactly as the main site draws it. */
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.45);
}
.mm-hdr-expert:hover,
.mm-hdr-store:hover { text-decoration: underline; }
.mm-hdr-ico { flex-shrink: 0; color: #C994DD; }

/* ---------- desktop header nav ----------
   Stands in for the burger from 1024px up, where the shop shows its departments instead of one.
   Type and spacing are the shop's: 15px/500 white, 31px between items, 17px of vertical padding
   so each item fills the 90px header row and the hit area reaches its full height. */
/* flex: 1 1 0 with justify-content: center is how the shop centres .main-nav-wrap between the
   logo and the icons — the nav absorbs all the free space, so its items sit at the midpoint of
   the gap rather than butted up against the logo. min-width: 0 lets it shrink below its content
   instead of forcing the row wider. */
.mm-hdr-nav { display: none; flex: 1 1 0; min-width: 0; }

/* 1200px, not this theme's usual 1024px, because that is where the shop turns its own
   departments on (verified: hidden at 1199, shown at 1200). It is also where there is room —
   at 1024 the six items squeezed the search pill to 60px, which is unusable. Between 1024 and
   1199 the header keeps the burger it has always had, and the drawer behind it is untouched.

   The `.header` prefix is load-bearing: the 1024px block further down the file styles and shows
   .menu-button-desktop, and a bare class here would lose to it on source order. */
@media (min-width: 1200px) {
  .mm-hdr-nav { display: flex; justify-content: center; }
  .header .menu-button-desktop { display: none; }
}

/* Items fill the header's full height, which is what the shop does (its .menu-exp-lnk measures
   the full 90px). That is not cosmetic: the tray opens at the BOTTOM of the header, so if the
   item only wrapped its text there was a dead strip between the two — the pointer crossed it on
   the way down, fired mouseleave, and the tray shut before you could reach it. */
.mm-hdr-nav { align-self: stretch; }
.mm-hdr-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 31px;
}
.mm-hdr-nav-item { display: flex; }
/* static, not relative: the tray's containing block has to be .header so it can break out to
   the full viewport width, the way the shop's .menu-tray does (its li.menu-exp is static too). */
.mm-hdr-nav-item { position: static; }

.mm-hdr-nav-link,
.mm-hdr-nav-link:visited {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
/* The shop marks the open item with an underline rather than a rotating chevron, and it sits
   just under the word — not at the bottom of the 17px padding. text-decoration rather than a
   border-bottom for exactly that reason: a border draws at the edge of the padded box, which
   put a second line well below the one the generic a:hover rule was already drawing. */
.mm-hdr-nav-link:hover,
.mm-hdr-nav-link:focus-visible,
.mm-hdr-nav-link[aria-expanded="true"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---------- mega-menu tray ----------
   Same construction as the shop's .menu-tray: a white panel the full width of the viewport,
   dropping out of the bottom of the header, with its content sitting on the ordinary content
   column. The 100vw / -50vw pair is how it escapes .header's 1408px — the same trick
   .header::before already uses for the navy band.

   100vw counts the scrollbar, so the panel is ~15px wider than the viewport and overhangs by
   half that each side. That is invisible and causes no scrollbar: the theme already sets
   `overflow-x: clip` on html and `hidden` on body, which is what makes the ::before band work
   too. Worth knowing before either of those is ever removed. */
.mm-hdr-tray {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: 1001;
  padding: 24px 0 32px;
  background: #FFFFFF;
  box-shadow: 0 2px 35px rgba(0, 0, 0, 0.1);
  text-align: left;
}
.mm-hdr-tray[hidden] { display: none; }

/* 19px/700 in the shop's near-black, not the theme navy — same as .menu-title over there. */
.mm-hdr-tray-title {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: #141933;
}

/* The five categories spread across the width instead of stacking in one thin column, which
   is what the shop's multi-column trays look like. auto-fill so a longer category list wraps
   onto a second row rather than squeezing. */
.mm-hdr-tray-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 32px;
}
.mm-hdr-tray-list a,
.mm-hdr-tray-list a:visited {
  display: block;
  padding: 8px 0 3px;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: #333333;
  text-decoration: none;
}
.mm-hdr-tray-list a:hover,
.mm-hdr-tray-list a:focus-visible { color: #03217D; text-decoration: underline; }

/* The light bar that closes off every tray on the shop. */
.mm-hdr-tray-viewall {
  margin-top: 24px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #F4F5F9;
}
.mm-hdr-tray-viewall a,
.mm-hdr-tray-viewall a:visited {
  display: inline-block;
  padding: 5px 0;
  font-size: 15px;
  font-weight: 700;
  color: #03217D;
  text-decoration: none;
}
.mm-hdr-tray-viewall a::after { content: " \2192"; }
.mm-hdr-tray-viewall a:hover { text-decoration: underline; }

/* ---------- Chat tray cards (after the shop's Sale tray) ---------- */
.mm-hdr-tray-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mm-hdr-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(3, 33, 125, 0.08);
}
.mm-hdr-card--live { background: #EDF1FA; }
.mm-hdr-card--whatsapp { background: #E9F8F0; }
.mm-hdr-card-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #03217D;
  margin-bottom: 10px;
}
.mm-hdr-card-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #333333;
}
.mm-hdr-card-btn,
.mm-hdr-card-btn:visited {
  align-self: flex-start;
  display: inline-block;
  padding: 11px 22px;
  /* Transparent 2px border on all three, not just the quiz button: it is what the gradient
     border-box layer sits on there, and without it here the other two came out 4px shorter. */
  border: 2px solid transparent;
  border-radius: 999px;
  background: #03217D;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  /* Explicit, because "Start web chat" is a <button> and the other two are <a>: the UA gives a
     button `line-height: normal` where the links inherit 1.5, which left it 5px shorter. */
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}
.mm-hdr-card-btn:hover,
.mm-hdr-card-btn:focus-visible { background: #0D4269; }
/* These read as buttons, so the theme's generic a:hover underline shouldn't reach them. */
.mm-hdr-card-btn:hover,
.mm-hdr-card-btn:focus,
.mm-hdr-card-btn:focus-visible,
.mm-hdr-card-btn:active { text-decoration: none; }
.mm-hdr-card-btn--whatsapp,
.mm-hdr-card-btn--whatsapp:visited { background: #25D366; color: #06331B; }
.mm-hdr-card-btn--whatsapp:hover,
.mm-hdr-card-btn--whatsapp:focus-visible { background: #1FB855; color: #06331B; }

/* "Choose your Snooze" — the quiz promo, in the third column. */
.mm-hdr-card--snooze {
  background:
    radial-gradient(at 85% 12%, rgba(201, 148, 221, .55), transparent 55%),
    radial-gradient(at 8% 92%, rgba(201, 148, 221, .35), transparent 50%),
    linear-gradient(160deg, #ece3f8, #f5f2fb);
}

/* Filled gradient by default, hollow with a gradient rim and gradient lettering on hover.

   The rim is drawn by a masked ::before rather than a border-box background layer, because the
   interior has to stay transparent: a `transparent padding-box, gradient border-box` pair would
   just let the border layer show straight through and paint the whole pill. The mask punches the
   content box out of the ring, leaving 2px of gradient around a see-through middle — so the
   card's own wash shows inside it. */
.mm-hdr-card-btn--snooze,
.mm-hdr-card-btn--snooze:visited {
  position: relative;
  background: var(--mm-gradient);
  color: #FFFFFF;
}
.mm-hdr-card-btn--snooze span { position: relative; z-index: 1; }

.mm-hdr-card-btn--snooze::before {
  content: "";
  position: absolute;
  inset: -2px;                    /* covers the transparent border too */
  border-radius: inherit;
  padding: 2px;
  background: var(--mm-gradient-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}
.mm-hdr-card-btn--snooze:hover,
.mm-hdr-card-btn--snooze:focus-visible { background: none; }
.mm-hdr-card-btn--snooze:hover::before,
.mm-hdr-card-btn--snooze:focus-visible::before { opacity: 1; }
.mm-hdr-card-btn--snooze:hover span,
.mm-hdr-card-btn--snooze:focus-visible span {
  background-image: var(--mm-gradient-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Round badge for the drawer's contact rows, sized to match the 30px category icons beside
   them so the two lists read as one set. */
.mm-menu-ico {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mm-menu-ico svg { display: block; width: 18px; height: 18px; }
.mm-menu-ico--chat { background: #EDE3F7; color: #5B2E8C; }
.mm-menu-ico--whatsapp { background: #E9F8F0; color: #1FA855; }

/* Off unless the drawer's breakpoint turns it on. Without this it stays an in-flow child of
   .header at >=1200 (via .nav-wrapper-mobile's display: contents) and picks up the header's
   40px gap, leaving a phantom space after Shop Now. */
.mm-drawer-scrim { display: none; }

/* ---------- drawer footer: quiz bar + USP line ----------
   Pinned by flex (`flex: 0 0 auto` against the body's `flex: 1 1 0`), not position: fixed, so
   they sit inside the panel and travel with it as it slides. Sizing and artwork are the shop's
   own .mmp-quiz / .mmp-uspline. */
.mm-drawer-quiz {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 15px;
  padding: 14px 16px;
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(219, 201, 244, .43), rgba(234, 236, 247, 0)),
    url("https://www.mattressman.co.uk/cdn-cgi/image/format=auto/assets/images/home/quiz_bg_march.png");
  background-size: cover;
  background-position: center;
  text-decoration: none;
}
.mm-drawer-quiz-text b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #03217D;
}
.mm-drawer-quiz-text > span {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: #03217D;
}
.mm-drawer-quiz-btn {
  flex-shrink: 0;
  padding: 0 19px;
  border-radius: 999px;
  background: var(--mm-gradient-text);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  min-height: 46px;
  align-content: center;
}
.mm-drawer-quiz:hover,
.mm-drawer-quiz:focus { text-decoration: none; }

.mm-drawer-usp {
  flex: 0 0 auto;
  padding: 14px 17px;
  background: #F4F5F9;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #03217D;
}
.mm-drawer-usp-dot {
  margin: 0 6px;
  color: #C994DD;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
}

/* ---------- Help Centre category rows ----------
   The theme already bundles the six category icons as icon-<categoryId>.png; script.js now puts
   them in the drawer and the Guides tray. Sizing is the shop's drawer row: a 30px circular
   icon, 8px gap, 17px/500 label in #141933, 48px row. */
.mm-cat-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

/* In the tray the rows are lighter than the drawer's — 15px, matching the other tray links —
   but they keep the icon so the two read as the same set of things. */
.mm-hdr-tray-list a,
.mm-hdr-tray-list a:visited {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- category bar ----------
   Routes back into the shop, the way NEXT's department row does. #081C4E is one step darker
   than the header so the bars separate without a rule between them. It scrolls sideways rather
   than wrapping on narrow screens: six items never fit at 375px, and a second row would push
   the page content down on exactly the screens with least room. */
.mm-catbar {
  background-color: #081C4E;
  font-family: 'Poppins', 'poppins-fallback', sans-serif;
}
.mm-catbar .container { max-width: var(--mm-container-max); }
.mm-catbar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mm-catbar-list::-webkit-scrollbar { display: none; }
.mm-catbar-list li { flex: 0 0 auto; }
.mm-catbar-list a,
.mm-catbar-list a:visited {
  display: flex;
  align-items: center;
  height: 44px;               /* a comfortable touch target, and it sets the bar's height */
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
/* The 3px bar at the bottom is the whole indicator — the theme's generic a:hover was drawing a
   second underline right under the word on top of it. */
.mm-catbar-list a:hover,
.mm-catbar-list a:focus,
.mm-catbar-list a:focus-visible,
.mm-catbar-list a:active {
  color: #C994DD;
  border-bottom-color: #C994DD;
  text-decoration: none;
}
@media (min-width: 768px) {
  .mm-catbar-list { gap: 8px; }
  .mm-catbar-list a { padding: 0; font-size: 15px; }
}

/* Six stop fitting around here; Sale and Brands are the two that go. */
@media (max-width: 514px) {
  .mm-catbar-hide-sm { display: none; }
}
.promotion-bar-header__inner img {
  display: block;
}
/* Removed 2026-09-14 with the Trustpilot markup they styled: .promotion-bar-header__innerText
   (and its .no-margin / strong rules), .promotion-bar-header__innerLogo,
   .promotion-bar-header__innerStars and the .promo-bar-hide-mobile rule that hid the review
   count below 640px. The USP bar keeps its own Trustpilot item and is unaffected. */

.promotion-bar-header__inner svg {
  display: block;
  flex-shrink: 0;
}

/* ===== Main-site style mobile header =====
   767px, not 1023px, since 2026-09-14. The shop has three header states, and this matches them:
     >= 1200   logo | nav (centred) | search + icons        .main-nav-wrap visible
     768-1199  logo | search | burger + icons               .main-nav-wrap hidden, burger shown
     <= 767    Menu | Search | logo | Stores | Shop         .hdr-top hidden, logo 42px
   We were collapsing to the third state at 1023, so a tablet got a phone header where the shop
   still gives it the full-width one. ===== */
@media (max-width: 767px) {
  .header {
    position: relative;
    justify-content: center;
  }
  .header .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;            /* stops the centred logo blocking icon taps */
  }
  .header .logo a { pointer-events: auto; display: block; line-height: 0; }
  /* The shop centres a 42px box (.hdr-logo) and lets the 59.1px artwork hang below it — that
     overhang is what drops the wordmark onto the same line as the icon labels. Centring the
     whole image instead, as we were, sits it ~8.6px too high and leaves a gap underneath.
     line-height: 0 on the anchor keeps the img flush to the top of that box. */
  .header .logo { height: 42px; }
  .header .logo img {
    /* height comes from the flat 42px rule near .logo img — the shop has no second step. */
  }

  .nav-wrapper-mobile { width: 100%; }

  .mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .mobile-bar-group {
    display: flex;
    gap: 22px;
  }

  /* stacked icon + label buttons — force white on ALL of them */
  .mobile-icon-btn,
  .mobile-icon-btn:link,
  .mobile-icon-btn:visited,
  .mobile-icon-btn:hover,
  .mobile-icon-btn:focus,
  .mobile-icon-btn:active {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: 0;
    padding: 0;
    min-width: 0;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
  }
  .mobile-icon-btn svg {
    width: 24px;
    height: 24px;
    color: #FFFFFF;        /* currentColor fills/strokes now white */
  }
  .mobile-icon-label { color: #FFFFFF; }

  /* neutralise the theme's big circular hamburger tap-target */
  .mobile-bar .menu-button-mobile .icon-menu,
  .mobile-bar .menu-button-mobile[aria-expanded=true] .icon-menu {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #FFFFFF;
  }

  /* ---- Search panel: match main-site pill inside the navy bar ---- */
  .mobile-search-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #03217D;                 /* same navy as the header, not white */
    padding: 0 var(--mm-gutter) 16px;    /* line the pill up with the logo above it */
    z-index: 3;
  }
  .mobile-search-panel[hidden] { display: none; }

  /* the Zendesk .search wrapper -> translucent lighter-navy pill */
  .mobile-search-panel .search {
    background: rgba(255, 255, 255, 0.18);
    border: 0;
    border-radius: 12px;
  }
  .mobile-search-panel .search:focus-within {
    border: 0;
    background: rgba(255, 255, 255, 0.24);
  }
  .mobile-search-panel .search input[type=search],
  .mobile-search-panel .search .clear-button {
    background: transparent;
    color: #FFFFFF;
  }
  .mobile-search-panel .search input[type=search]::placeholder {
    color: rgba(255, 255, 255, 0.75);
  }
  /* the theme's search icon sits left; recolour it white */
  .mobile-search-panel .search-icon { color: #FFFFFF; }
}

/* Tighten the icon spacing before resorting to dropping anything — the shop buys its room the
   same way, by shrinking the gap and the gutter rather than hiding the labels early. */
@media (max-width: 440px) {
  .mobile-bar-group { gap: 10px; }
}
/* Smaller label type at the narrowest step, so the words stay off the logo. */
@media (max-width: 429px) {
  .mobile-icon-label { font-size: 11px; line-height: 1.2; }
}
/* Only below 400 do the labels go — the shop keeps them at 375, and they read as part of the
   button rather than decoration, so they stay as long as they fit. */
@media (max-width: 399px) {
  .mobile-icon-label { display: none; }
}

/* ===== Reusable "Need more help?" CTA section ===== */
/* No width here on purpose: pages that drop the CTA in at template top level (home,
   new_request) inherit the layout's own gutters, and setting a width here would inset it
   twice. The custom pages need the opposite — see .mm-fin/.mm-guide below. */
.mm-cta {
  max-width: var(--mm-container-max);
  margin: 56px auto;
}

/* Custom pages wrap the CTA in a full-bleed div (.mm-fin, .mm-guide) with no padding of its
   own, so without this the CTA renders edge to edge while every section above it sits in the
   column. It used to take three rules to track .container's three states — one gutter and one
   max-width now cover every width, so these two declarations reproduce the column exactly.
   .mm-cta itself deliberately has no width: home_page.hbs and new_request_page.hbs drop the
   placeholder in at template top level, where it inherits the layout's gutters and a width
   would inset it twice. */
.mm-fin .mm-cta,
.mm-guide .mm-cta {
  width: 100%;
  padding: 0 var(--mm-gutter);
  box-sizing: border-box;
}
.mm-cta-heading {
  text-align: center;
  color: #03217D;
  margin-bottom: 24px;
}
.mm-cta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.mm-cta-card {
  border: 1px solid #03217D;
  border-radius: 16px;
  padding: 32px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mm-cta-card h3 {
  color: #03217D;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
}
.mm-cta-card p {
  color: #333;
  line-height: 1.5;
  margin: 0 0 24px;
}
/* push button / socials to the bottom so cards line up regardless of text length */
.mm-cta-btn,
.mm-cta-socials {
  margin-top: auto;
}
.mm-cta-btn,
.mm-cta-btn:visited {
  display: inline-block;
  border: 1.5px solid #C994DD;
  color: #03217D;
  background: transparent;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 32px;
  border-radius: 24px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.mm-cta-btn:hover,
.mm-cta-btn:focus {
  background: #C994DD;
  color: #03217D;
  text-decoration: none;
}
.mm-cta-socials {
  display: flex;
  gap: 20px;
  align-items: center;
}
.mm-cta-socials a {
  color: #03217D;
  display: inline-flex;
  transition: color .15s ease;
}
.mm-cta-socials a:hover,
.mm-cta-socials a:focus {
  color: #C994DD;
  text-decoration: none;
}
.mm-cta-socials svg {
  width: 24px;
  height: 24px;
  display: block;
}

@media (max-width: 768px) {
  .mm-cta-grid { grid-template-columns: 1fr; }
  .mm-cta-card { padding: 24px; }
  .mm-cta-heading { font-size: 24px; }
}

/* ===== USP bar (below header, every page) ===== */
/* The gutter was 0 here, which put "Free next day delivery" hard against the column edge
   while the logo above it sat inside 24px. The shop aligns the two; so do we now. */
.key-msgs-con .container {
  max-width: var(--mm-container-max);
	padding: 0 var(--mm-gutter);
}
.key-msgs-con {
  background: #F4F5F9;
}
.key-msgs-wrap {
  height: 54px;              /* main site: fixed 54px strip */
  overflow: hidden;
}
.key-msgs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}
.key-msg,
.key-msg:visited {
  display: inline-flex;
  align-items: center;
  color: #333;               /* main site: dark grey text, navy icons */
  font-size: 14px;
  font-weight: 400;          /* main site: regular, not medium */
  line-height: 30px;
  white-space: nowrap;
  text-decoration: none;
}
.key-msg:hover,
.key-msg:focus {
  color: #333;
  text-decoration: underline;
}
.key-msg svg {
  flex-shrink: 0;
  margin-right: 10px;        /* main site: 10px icon gap */
}
.key-msg small { font-size: 11px; }
.fill-primary { fill: #03217D; }

/* first/last items hug the container edges (main site ≥992px) */
.key-msg:first-child { justify-content: flex-start; }
.key-msg:last-child  { justify-content: flex-end; }

/* 992–1199px: drop "Old mattress removal" (main site's d-lg-none d-xl-flex) */
@media (max-width: 1300px) and (min-width: 1161px) {
  .key-msg--hide-lg { display: none; }
}

/* ≤1060px: single USP, cycling vertically every 5s (JS drives .is-shown) */
@media (max-width: 1160px) {
  .key-msgs-wrap { height: 46px; }
  .key-msgs {
    position: relative;
    justify-content: center;
  }
  /* resting state: parked below, invisible, NO transition —
     so breakpoint changes and post-cycle resets are instant */
  .key-msg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 20px));
    opacity: 0;
    pointer-events: none;
  }
  /* the two animated states are the only ones that transition */
  .key-msg.is-shown {
    transform: translate(-50%, -50%);
    opacity: 1;
    pointer-events: auto;
    transition: transform .45s ease-in-out, opacity .45s ease-in-out;
  }
  .key-msg.is-leaving {
    transform: translate(-50%, calc(-50% - 20px));   /* exits upward */
    opacity: 0;
    transition: transform .45s ease-in-out, opacity .45s ease-in-out;
  }
  /* kill switch for the very first paint when entering mobile mode */
  .key-msgs.mm-no-anim .key-msg { transition: none !important; }
}

/* ============================================================
   Desktop header: burger menu + inline search + Shop Now / Contact
   ============================================================ */

/* Custom search icon inside both header search pills.
   The wrapper anchors the icon; the input's existing 40px
   left padding gives it room. */
.search-with-icon {
  position: relative;
}
.search-with-icon .hdr-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
/* hide the theme's default grey search icon inside these pills */
.search-with-icon .search-icon {
  display: none;
}

/* Hidden on mobile — the existing mobile bar stays exactly as-is */
.menu-button-desktop,
.desktop-search,
.desktop-actions {
  display: none;
}

@media (min-width: 768px) {

  .header {
    gap: 40px;
  }

  /* ---- Stacked icon + label buttons (mirrors .mobile-icon-btn) ---- */
  .menu-button-desktop,
  .desktop-actions .desktop-icon-btn,
  .desktop-actions .desktop-icon-btn:link,
  .desktop-actions .desktop-icon-btn:visited {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: 0;
    padding: 0;
    min-width: 0;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
  }
  .menu-button-desktop svg,
  .desktop-actions .desktop-icon-btn svg {
    width: 24px;
    height: 24px;
    color: #FFFFFF;
  }
  .desktop-icon-label {
    color: #FFFFFF;
    white-space: nowrap;
  }

  .menu-button-desktop:hover .desktop-icon-label,
  .menu-button-desktop:focus .desktop-icon-label,
  .desktop-actions .desktop-icon-btn:hover .desktop-icon-label,
  .desktop-actions .desktop-icon-btn:focus .desktop-icon-label {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* ---- Search pill: same styling as the mobile search panel ---- */
  .desktop-search {
    display: block;
    flex: 1 1 auto;
    max-width: 260px;
    margin-left: auto; /* logo stays left; search + icons sit right, like the main site */
  }
  .desktop-search .search {
    background: rgba(255, 255, 255, 0.18);
    border: 0;
    border-radius: 12px;
  }
  .desktop-search .search:focus-within {
    border: 0;
    background: rgba(255, 255, 255, 0.24);
  }
  .desktop-search .search input[type=search],
  .desktop-search .search .clear-button {
    background: transparent;
    color: #FFFFFF;
  }
  .desktop-search .search input[type=search]::placeholder {
    color: rgba(255, 255, 255, 0.75);
  }

  /* ---- Shop Now + Contact icons ---- */
  .desktop-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-shrink: 0;
  }

  /* ---- Keep the burger panel usable on desktop ----
     The theme hides .nav-wrapper-mobile at >=1024px; instead we hide
     only the mobile bar + mobile search panel and keep the menu
     panel available as a dropdown for the desktop burger button. */
  .nav-wrapper-mobile {
    display: contents;
  }
  .nav-wrapper-mobile .mobile-bar,
  .nav-wrapper-mobile .mobile-search-panel {
    display: none;
  }
}

/* ---- Burger dropdown: superseded 2026-09-14, kept at >=1200 where it is inert ----
   Everything below styled the old desktop-burger dropdown: a mega-menu panel hanging under the
   header. The burger now opens the slide-in drawer at every width it appears at (<=1199), so
   none of this should reach a real screen — but it lived in the >=768 block, where its
   `max-height: calc(100vh - 180px)` was still winning on source order and cutting the drawer
   short (620px in an 800px viewport), and its `top/left/transform` were fighting the panel.

   Scoped to >=1200 rather than deleted: the burger is hidden there, so these are unreachable,
   and keeping them costs nothing if the dropdown is ever wanted back. Note .nav-wrapper-mobile
   / .mobile-bar / .mobile-search-panel stayed in the >=768 block above — those are still doing
   real work at tablet widths. --- */
@media (min-width: 1200px) {
  /* ---- Burger dropdown: mega-menu panel (matches main site) ---- */
  /* Full viewport width: the header container is only 90% wide (max
     1408px), so we centre a 100vw panel under it and use padding to
     keep the content aligned with the header grid */
  .nav-wrapper-mobile .menu-list-mobile {
    top: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100vw;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    border: 0;
    border-top: 1px solid #E4E6F5;
    border-radius: 0;
    box-shadow: 0 24px 48px rgba(3, 33, 125, 0.18);
    padding: 24px calc((100vw - min(90vw, 1408px)) / 2) 32px;
  }
  /* two columns (links | promo card), action row wraps below full-width */
  .nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 48px;
  }
  .nav-wrapper-mobile .menu-list-mobile-items {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
  }

  /* "Choose your Snooze" promo card (desktop only) */
  .nav-wrapper-mobile .menu-promo {
    display: block;
    flex: 0 0 380px;
    max-width: 380px;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(3, 33, 125, 0.18);
  }
  .nav-wrapper-mobile .menu-promo:hover,
  .nav-wrapper-mobile .menu-promo:focus {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(3, 33, 125, 0.18);
  }
  .nav-wrapper-mobile .menu-promo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
  }

  /* "Help and Support Guides" — column heading like the main site's mega menu */
  .nav-wrapper-mobile .menu-list-mobile-items .nav-section {
    padding: 20px 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: #03217D;
  }

  /* Category links — single column */
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories {
    display: block;
    padding: 0;
  }
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories a {
    padding: 10px 0;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    border-radius: 0;
  }
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories a:hover,
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories a:focus {
    background: none;
    color: #03217D;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: #C994DD;
    text-decoration-thickness: 2px;
  }

  /* Bottom action-button row: full width, below links + promo */
  .nav-wrapper-mobile .menu-list-mobile .menu-contact {
    flex: 1 1 100%;
    width: 100%;
    border-top: 1px solid #eee;
    margin-top: 24px;
    padding: 0;
  }

  /* Signed-in agent row: single line, light blue strip */
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 28px;
    background: #f1f8ff;
    border-radius: 12px;
    padding: 8px 20px;
    margin: 16px 0 0;
  }
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row a,
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row button {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 500;
    color: #03217D;
    background: none;
    border: 0;
  }
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row a:hover,
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row a:focus,
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row button:hover,
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row button:focus {
    background: none;
    text-decoration: underline;
  }
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row .my-profile {
    gap: 8px;
  }
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row .menu-profile-avatar {
    margin: 0;
  }
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row .menu-profile-name {
    font-weight: 600;
  }

  /* hide the hairline dividers — spacing does the work now */
  .nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
    display: none;
  }
}

/* The drawer must never show at >=1200 — but if it was opened on a narrow window that is then
   widened, aria-expanded is still "true" and the inert dropdown rules above would render it as
   the old mega-menu. The header's matchMedia listener closes it on the way up; this is the
   belt to that braces, and it sits after the block so it wins on source order. */
@media (min-width: 1200px) {
  .nav-wrapper-mobile .menu-list-mobile,
  .nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
    display: none;
  }
  body.mm-drawer-open .mm-drawer-scrim {
    display: none;
  }
}


/* ===== Burger menu quick links / action buttons ===== */

/* --- Mobile: full-screen slide-out drawer from the left --- */
/* 1199px, not 767px: this is keyed to where the BURGER appears, which is not the same place the
   header switches to its mobile layout. Between 768 and 1199 the burger is on screen, so the
   drawer it opens has to be the slide-in panel here too — left at 767 it fell back to the base
   rules and dropped down as a full-width absolute panel under the header instead. */
@media (max-width: 1199px) {
  .nav-wrapper-mobile .menu-list-mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    /* A 400px panel that simply fills the screen once the screen is narrower than it —
       no second breakpoint needed. */
    width: 100%;
    max-width: 400px;
    background: #FFFFFF;
    border: 0;
    box-shadow: none;
    z-index: 1000;
    /* Flex column so the quiz bar and USP line can pin to the bottom while the list above them
       scrolls — the same arrangement the shop uses, and no position: fixed needed. The panel
       itself must not scroll, or the "pinned" rows would scroll away with the list. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .3s ease, visibility .3s ease;
  }
  /* the theme toggles display none/block on aria-expanded; keep it
     always block so the slide transition can run */
  .nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
    display: flex;
  }
  .nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
    display: flex;
    transform: translateX(0);
    visibility: visible;
  }

  /* Drawer top bar — the shop's .mm-hdr: 52.8px of #081C4E (the category bar's navy), title
     centred in 16px/700 white, close button on the right. It is full-bleed inside the drawer,
     so it cancels the panel's 24px side padding with a negative margin. */
  .nav-wrapper-mobile .menu-drawer-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 15px;
    min-height: 52.8px;
    box-sizing: border-box;
    background: #081C4E;
    border: 0;
  }
  /* 16px/700 white and centred, the shop's figures. */
  .nav-wrapper-mobile .menu-drawer-title {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
  }
  /* Absolute so the title stays centred on the bar rather than being pushed off by the button. */
  .nav-wrapper-mobile .menu-drawer-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    background: none;
    border: 0;
    color: #FFFFFF;
    cursor: pointer;
  }

  /* The only thing that scrolls. min-height: 0 is required — without it a flex child refuses
     to shrink below its content and the overflow never engages. */
  .nav-wrapper-mobile .menu-drawer-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 15px 24px;
    /* After the shop's: thin, rounded, inset top and bottom, grey going navy on hover.
       scrollbar-width/-color cover Firefox; the ::-webkit- rules cover the rest. */
    scrollbar-width: thin;
    scrollbar-color: #C7CEDB transparent;
  }
  .nav-wrapper-mobile .menu-drawer-body::-webkit-scrollbar { width: 6px; }
  .nav-wrapper-mobile .menu-drawer-body::-webkit-scrollbar-track {
    margin: 12px 0;
    background: transparent;
  }
  .nav-wrapper-mobile .menu-drawer-body::-webkit-scrollbar-thumb {
    background: #C7CEDB;
    border-radius: 7px;
  }
  .nav-wrapper-mobile .menu-drawer-body::-webkit-scrollbar-thumb:hover { background: #03217D; }

  /* Scrim behind the open drawer — the shop's .mm-ovl, same 50% black over a 0.2s fade.
     visibility keeps it from swallowing clicks while closed, and transitions alongside the
     opacity rather than snapping. */
  .mm-drawer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: #000;
    opacity: 0;
    visibility: hidden;
    touch-action: none;
    transition: opacity .2s cubic-bezier(0, 0, 1, 1), visibility .2s linear;
  }
  body.mm-drawer-open .mm-drawer-scrim {
    opacity: .5;
    visibility: visible;
  }

  /* ---- Contact Our Team ---- */
  .nav-wrapper-mobile .menu-contact {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  .nav-wrapper-mobile .menu-contact-list,
  .nav-wrapper-mobile .menu-plain-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* Same row as #mobile-dynamic-categories above: 48px, 8px gap, 17px/500 in #141933. */
  .nav-wrapper-mobile .menu-contact-list a,
  .nav-wrapper-mobile .menu-contact-list button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 9px 4px;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: #141933;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  /* ---- plain links under the divider ---- */
  .nav-wrapper-mobile .menu-plain-list {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #E4E6F5;
  }
  .nav-wrapper-mobile .menu-plain-list a {
    display: block;
    padding: 5px 4px;
    font-size: 15px;
    font-weight: 500;
    color: #333333;
    text-decoration: none;
  }

  /* section headings — same treatment as desktop */
  .nav-wrapper-mobile .menu-list-mobile-items .nav-section {
    padding: 20px 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #03217D;
  }

  /* Category rows, sized to the shop's drawer: 48px tall, 30px circular icon, 8px gap,
     17px/500 in #141933. */
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories {
    padding: 0;
  }
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 9px 4px;
    font-size: 17px;
    font-weight: 500;
    color: #141933;
    border-radius: 0;
  }
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories a:hover,
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories a:focus,
  .nav-wrapper-mobile .menu-list-mobile-items #mobile-dynamic-categories a:active {
    background: none;
    color: #03217D;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: #C994DD;
    text-decoration-thickness: 2px;
  }

  /* signed-in strip */
  .nav-wrapper-mobile .menu-list-mobile-items .menu-user-row {
    border-radius: 12px;
    padding: 4px 8px;
    margin-top: 16px;
  }

  /* Quick Links section */
  /* Was `border-top: 1px solid #eee; margin-top: 20px` — the categories list above already
     draws the divider, so this one doubled it. Kept as the single .menu-contact rule in this
     block rather than adding a third that fights it. */
  .nav-wrapper-mobile .menu-contact {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }
  .nav-wrapper-mobile .menu-quick-heading {
    display: block;
    padding: 20px 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #03217D;
  }
  .nav-wrapper-mobile .menu-actions {
    padding: 0;
  }
  .nav-wrapper-mobile .menu-actions .menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
  }
  .nav-wrapper-mobile .menu-actions .menu-btn:hover,
  .nav-wrapper-mobile .menu-actions .menu-btn:focus,
  .nav-wrapper-mobile .menu-actions .menu-btn:active {
    background: none;
    color: #03217D;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: #C994DD;
    text-decoration-thickness: 2px;
  }
  .nav-wrapper-mobile .menu-actions .menu-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #25D366;   /* WhatsApp glyph keeps its brand green */
  }
}

/* --- Desktop: pill buttons matching the main site ---
   - fill:     purple bg, navy text  (like "Send message")
   - outline:  purple border, navy text  (like "Start web chat" / phone)
   - whatsapp: WhatsApp green, white text */
@media (min-width: 1200px) {
  /* Drawer chrome — title bar, close button, quick-links heading — and the pill-row treatment
     for .menu-actions. All of it is for the state where the drawer ISN'T used, so it tracks the
     burger's breakpoint (1200) rather than the header's (768).
     (.menu-btn bump needed so this outranks the pill styles below) */
  .nav-wrapper-mobile .menu-quick-heading,
  .nav-wrapper-mobile .menu-drawer-top,
  .nav-wrapper-mobile .menu-actions .menu-btn.menu-link-snooze {
    display: none;
  }
  .nav-wrapper-mobile .menu-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 24px 0 0;
  }
  .nav-wrapper-mobile .menu-actions .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    padding: 11px 26px;
    border-radius: 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }
  .nav-wrapper-mobile .menu-actions .menu-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  /* purple fill */
  .nav-wrapper-mobile .menu-actions .menu-btn-fill {
    background: #C994DD;
    border: 1.5px solid #C994DD;
    color: #03217D;
  }
  .nav-wrapper-mobile .menu-actions .menu-btn-fill:hover,
  .nav-wrapper-mobile .menu-actions .menu-btn-fill:focus {
    background: #03217D;
    border-color: #03217D;
    color: #FFFFFF;
    text-decoration: none;
  }
  /* purple outline */
  .nav-wrapper-mobile .menu-actions .menu-btn-outline {
    background: #FFFFFF;
    border: 1.5px solid #C994DD;
    color: #03217D;
  }
  .nav-wrapper-mobile .menu-actions .menu-btn-outline:hover,
  .nav-wrapper-mobile .menu-actions .menu-btn-outline:focus {
    background: #C994DD;
    color: #03217D;
    text-decoration: none;
  }
  /* whatsapp green */
  .nav-wrapper-mobile .menu-actions .menu-btn-whatsapp {
    background: #25D366;
    border: 1.5px solid #25D366;
    color: #FFFFFF;
  }
  .nav-wrapper-mobile .menu-actions .menu-btn-whatsapp:hover,
  .nav-wrapper-mobile .menu-actions .menu-btn-whatsapp:focus {
    background: #1EBE5B;
    border-color: #1EBE5B;
    color: #FFFFFF;
    text-decoration: none;
  }
}

/* Signed-in row: light blue strip on mobile too */
.nav-wrapper-mobile .menu-list-mobile-items .menu-user-row {
  background: #f1f8ff;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-user-row .my-profile {
  display: flex;
  align-items: center;
}

/* Promo card lives desktop-side only; hidden in the mobile menu */
@media (max-width: 767px) {
  .nav-wrapper-mobile .menu-promo {
    display: none;
  }
}

/* ===== Instant-search suggestions dropdown =====
   Zendesk renders suggestions in <zd-autocomplete role="listbox">
   elements attached to <body> (one per search input on the page).
   Zendesk's own JS sets inline left/top/width to pin the box under
   whichever input triggered it — we override left/right/width with
   !important so it spans the same 1408px-max, centred container as
   the header/mega-menu instead, giving it the same full-width,
   square-corner look. (Only "top" is left to Zendesk's JS, since
   that's the one value that correctly varies per input position.) */

zd-autocomplete[role="listbox"] {
  background: #FFFFFF;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 24px 48px rgba(3, 33, 125, 0.18) !important;
  padding: 24px var(--mm-gutter) 32px !important;
  margin: 0 auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 1408px !important;
  min-width: 0 !important;
  font-family: 'Poppins', 'poppins-fallback', sans-serif;
}
@media (min-width: 768px) {
  zd-autocomplete[role="listbox"] {
    padding: 16px 24px 16px !important;
    margin-top: 17px !important;
  }
}

/* a page can have several search inputs, each spawning its own
   (possibly empty) listbox — hide any that have no suggestions so
   they never stack behind the active one */
zd-autocomplete[role="listbox"]:not(:has([role="option"])) {
  display: none !important;
}

/* each suggestion row */
zd-autocomplete [role="option"] {
  display: block;
  border: 0 !important;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  color: #68737D;        /* breadcrumb line inherits this */
  font-size: 12px;
  line-height: 1.5;
}
zd-autocomplete [role="option"] + [role="option"] {
  margin-top: 2px;
}
zd-autocomplete [role="option"]:hover,
zd-autocomplete [role="option"][aria-selected=true] {
  background: #F4F5F9;
}

/* suggestion title: navy, medium weight, purple underline on hover */
zd-autocomplete [role="option"] a {
  color: #03217D;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
zd-autocomplete [role="option"]:hover a,
zd-autocomplete [role="option"][aria-selected=true] a {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: #C994DD;
  text-decoration-thickness: 2px;
}

/* matched-text highlighting: bold navy, never highlighter-yellow */
zd-autocomplete mark,
zd-autocomplete [role="option"] em,
zd-autocomplete [role="option"] strong,
zd-autocomplete [role="option"] b {
  background: none;
  color: #03217D;
  font-style: normal;
  font-weight: 700;
}

/* ===== "Search the Mattressman shop" CTA (appended by JS) ===== */
.mm-shop-search-cta {
  border-top: 1px solid #eee;
  margin: 10px 4px 2px;
  padding: 12px 8px 6px;
}
.mm-shop-search-cta .mm-shop-search-label {
  display: block;
  font-size: 13px;
  color: #68737D;
  margin-bottom: 4px;
}
.mm-shop-search-cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #03217D;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.mm-shop-search-cta a:hover,
.mm-shop-search-cta a:focus {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: #C994DD;
  text-decoration-thickness: 2px;
}

zd-autocomplete-multibrand:hover,
zd-autocomplete-multibrand[aria-selected="true"],
zd-autocomplete-option:hover,
zd-autocomplete-option[aria-selected="true"] {
  box-shadow: none !important;
}


zd-autocomplete [role="option"][aria-selected=true] {
    background: none !important;
}

zd-autocomplete [role="option"]:hover{
    background: #F4F5F9 !important;
}

/* Append this after the existing instant-search styles in style.css. */
.mm-search-empty-state {
  position: absolute;
  z-index: 1001;
  box-sizing: border-box;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1408px;
  margin: 0 auto;
  padding: 24px var(--mm-gutter) 32px;
  background: #FFFFFF;
  border: 0;
  border-radius: 0;
  box-shadow: 0 24px 48px rgba(3, 33, 125, 0.18);
  font-family: 'Poppins', 'poppins-fallback', sans-serif;
}

.mm-search-empty-state[hidden] {
  display: none !important;
}

.mm-search-empty-message {
  margin: 0 12px;
  color: #333333;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.mm-search-empty-state .mm-shop-search-cta {
  margin-top: 14px;
}

@media (min-width: 768px) {
  .mm-search-empty-state {
    padding: 16px 24px;
  }
}



/* =========================================================================
   FINANCE PAGES — hub + provider pages
   -------------------------------------------------------------------------
   Powers /hc/p/finance and the five provider pages (klarna, clearpay, paypal,
   v12, snap).

   Each provider page sets its brand tokens on the .mm-pv wrapper — see the
   token block at the top of that page's .hbs file. Everything here consumes
   those tokens, so a provider re-skins from ~9 custom properties and the
   structure can't drift between pages.

   TOKEN CONTRACT
     --pv-hero-bg / --pv-hero-ink   full-bleed hero band
     --pv-accent  / --pv-accent-ink text-bearing accents (step numbers, ticks).
                                    --pv-accent MUST be dark enough to carry
                                    --pv-accent-ink at 4.5:1. Never put text on
                                    --pv-tint.
     --pv-tint                      decorative only — rules, underlines, chips
     --pv-surface                   tinted panels in the body
     --pv-rule                      hairlines and borders
     --pv-btn / --pv-btn-ink / --pv-btn-hover

   Defaults below are Mattressman navy, so a page that forgets its tokens still
   renders correctly rather than unstyled.
   ========================================================================= */

.mm-pv,
.mm-fin {
  --pv-hero-bg: #F4F5F9;
  --pv-hero-ink: #03217D;
  --pv-accent: #03217D;
  --pv-accent-ink: #FFFFFF;
  --pv-tint: #C994DD;
  --pv-surface: #F4F5F9;
  --pv-rule: #E4E6F5;
  --pv-btn: #03217D;
  --pv-btn-ink: #FFFFFF;
  --pv-btn-hover: #C994DD;
  --pv-btn-hover-ink: #03217D;
  /* Body typography. Provider pages override these when navy isn't one of their
     colours — Clearpay, for instance, is a black-on-mint brand. */
  --pv-heading: #03217D;
  --pv-muted: #5566A5;
}


/* ---------- full-bleed branded hero ---------- */
.mm-pv-hero {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: var(--pv-hero-bg);
  color: var(--pv-hero-ink);
  padding: 52px 0 56px;
  text-align: center;
}
/* Hero logo. --logo-h is set per provider page for the same reason as the card
   logos: these lockups have very different proportions, and the padded artwork
   (Clearpay's pill, Snap's filled block) needs extra height for the mark itself to
   read. The padded artwork's background matches --pv-hero-bg, so it still reads as
   a flush logo rather than a tile. */
.mm-pv-logo {
  display: block;
  height: var(--logo-h, 34px);
  width: auto;              /* overrides the width attr baked into the SVGs */
  max-width: 78%;
  margin: 0 auto 20px;
}
.mm-pv-hero h1 {
  color: var(--pv-hero-ink);
  font-weight: 700;
  margin: 0;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.mm-pv-lede {
  color: var(--pv-hero-ink);
  opacity: .88;
  max-width: 660px;
  margin: 16px auto 0;
  line-height: 1.6;
  font-size: 17px;
}
/* Headline rule — the one flourish, tying the hero to the brand's own colour. */
.mm-pv-hero h1 + .mm-pv-rule {
  width: 64px;
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--pv-tint);
  margin: 20px auto 0;
}

/* ---------- sections ---------- */
.mm-fin-section { padding-top: 48px; padding-bottom: 8px; }

/* A provider's hosted page mounts into this section and brings its own full-width layout,
   gutters and top spacing. Ours must add none of that, or their page sits inset inside a
   second set of margins with a gap above it.

   Both selectors are deliberately compound. A bare .mm-fin-section--embed ties with the
   responsive .mm-fin-section rule further down the file and loses on order, so the top
   padding came back at <=768px. (The second half of this reason has lapsed: .container no
   longer sets a width at >=1160px for a single-class selector to lose to. The compound form
   is kept anyway — it is still needed for the first reason, and it is still correct.) */
.mm-fin .mm-fin-section--embed { padding-top: 0; }
.mm-fin-section--embed.container {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.mm-fin-heading {
  text-align: center;
  color: var(--pv-heading);
  font-weight: 700;
  font-size: 26px;
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.mm-fin-sub {
  text-align: center;
  color: var(--pv-muted);
  margin: 0 auto 28px;
  max-width: 680px;
  line-height: 1.6;
}

/* ---------- hub: provider grid ----------
   Three across at most, so the five providers land as 3 + 2 rather than 4 + 1 with a lone
   orphan card. This was `repeat(auto-fit, minmax(300px, 1fr))`, which gave three columns while
   the content column was 1160px wide — at 1408px it started fitting a fourth. Column counts are
   explicit now so the widening can't silently change them again. */
.mm-fin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .mm-fin-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .mm-fin-grid { grid-template-columns: repeat(3, 1fr); }
}
.mm-fin-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E4E6F5;
  border-radius: 14px;
  padding: 24px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.mm-fin-card:hover {
  box-shadow: 0 8px 24px rgba(3, 33, 125, .12);
  transform: translateY(-2px);
}
/* One generous fixed-height slot for every card, with each logo vertically centred
   inside it. That keeps all five cards' copy starting at the same y while letting
   each mark be sized for its own lockup — see --logo-h below. */
.mm-fin-logo-slot {
  display: flex;
  align-items: center;
  height: 58px;
  margin-bottom: 14px;
}
/* --logo-h is set per card because these lockups are not comparable: Klarna and
   PayPal are single-line wordmarks that read fine at 26px, whereas V12 and Snap are
   stacked two-line marks and Clearpay's badge is a pill inside a large padded
   canvas. A single shared height makes the stacked ones illegible. */
.mm-fin-logo {
  height: var(--logo-h, 26px);
  width: auto;
  max-width: var(--logo-max, 170px);
}
.mm-fin-card h3 {
  color: #03217D;
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 8px;
}
.mm-fin-card > p {
  color: #333;
  line-height: 1.6;
  margin: 0 0 18px;
  font-size: 15px;
}



.mm-pv-btn,
.mm-pv-btn:visited {
  display: inline-block;
  text-align: center;
  background: var(--pv-btn);
  color: var(--pv-btn-ink);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.mm-pv-btn:hover,
.mm-pv-btn:focus {
  background: var(--pv-btn-hover);
  color: var(--pv-btn-hover-ink, var(--pv-btn-ink));
  text-decoration: none;
}
.mm-pv-actions { margin-top: 30px; text-align: center; }

/* ---------- steps ---------- */
.mm-pv-steps {
  display: grid;
  /* Every step row on these pages is exactly 3 items, so explicit columns beat auto-fit:
     auto-fit passes through a 2 + 1 orphan at tablet widths. This goes 3 -> 1 directly. */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: mmpv;
}
@media (max-width: 700px) {
  .mm-pv-steps { grid-template-columns: 1fr; }
}
.mm-pv-step {
  background: var(--pv-surface);
  border-radius: 14px;
  padding: 26px 24px;
}
.mm-pv-step::before {
  counter-increment: mmpv;
  content: counter(mmpv);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pv-accent);
  color: var(--pv-accent-ink);
  font-weight: 700;
  font-size: 15px;
  /* Without this the digit sits high: the theme's inherited line-height (22.5px) makes a
     line box taller than the glyph, and centring that box isn't the same as centring the
     digit once the font's ascent and descent are asymmetric. */
  line-height: 1;
  margin-bottom: 14px;
}
.mm-pv-step h3 { color: #03217D; font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.mm-pv-step p { color: #333; font-size: 15px; line-height: 1.6; margin: 0; }



/* ---------- tick list ---------- */
.mm-pv-ticks { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; }
.mm-pv-ticks li {
  position: relative;
  padding: 11px 0 11px 32px;
  border-bottom: 1px solid var(--pv-rule);
  color: #333;
  line-height: 1.6;
}
.mm-pv-ticks li:last-child { border-bottom: 0; }
.mm-pv-ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 18px;
  width: 13px;
  height: 7px;
  border-left: 2.5px solid var(--pv-accent);
  border-bottom: 2.5px solid var(--pv-accent);
  transform: rotate(-45deg);
}

/* ---------- embed frame (Klarna placement, Snap shadow-DOM page) ---------- */
.mm-pv-embed {
  position: relative;   /* contains Snap's absolutely-positioned loading overlay */
  border: 1px solid var(--pv-rule);
  border-radius: 14px;
  padding: 8px;
  background: #fff;
  min-height: 120px;
}


/* ---------- small print ---------- */
.mm-fin-smallprint {
  margin-top: 40px;
  padding: 22px 0 8px;
  border-top: 1px solid #E4E6F5;
  color: #5566A5;
  font-size: 13px;
  line-height: 1.7;
}
.mm-fin-smallprint p { margin: 0 0 10px; }
.mm-fin-smallprint a { color: #03217D; font-weight: 600; }

/* Terms & Conditions body on the hub. No top rule — unlike .mm-fin-smallprint, the section
   heading above already does that job. Runs the full width of the container, centred, matching
   the other sections on this page. */
.mm-fin-terms {
  color: #333;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
}
.mm-fin-terms p { margin: 0 0 12px; }
.mm-fin-terms p:last-child { margin-bottom: 0; }
.mm-fin-terms a { color: #03217D; font-weight: 600; }

/* ---------- FAQ accordions ----------
   Native <details>/<summary>: keyboard-operable, findable by the browser's own in-page
   search when open, and needs no JavaScript. */
.mm-pv-faqs {
  max-width: 1000px;   /* matches .mm-pv-figure, so the FAQs line up with the banner above */
  margin: 0 auto;
  border: 1px solid var(--pv-rule);
  border-radius: 14px;
  overflow: hidden;
}
.mm-pv-faq { border-bottom: 1px solid var(--pv-rule); }
.mm-pv-faq:last-child { border-bottom: 0; }
.mm-pv-faq > summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 17px 20px;
  cursor: pointer;
  color: var(--pv-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
  list-style: none;
  transition: background-color .12s ease;
}
.mm-pv-faq > summary::-webkit-details-marker { display: none; }   /* Safari */
.mm-pv-faq > summary:hover { background: var(--pv-surface); }
.mm-pv-faq > summary:focus-visible {
  outline: 3px solid var(--pv-accent);
  outline-offset: -3px;
}
/* Chevron, drawn in CSS so there's no icon dependency. */
.mm-pv-faq > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-left: auto;
  margin-top: 5px;
  border-right: 2.5px solid var(--pv-accent);
  border-bottom: 2.5px solid var(--pv-accent);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.mm-pv-faq[open] > summary { background: var(--pv-surface); }
.mm-pv-faq[open] > summary::after { transform: rotate(-135deg); margin-top: 9px; }
.mm-pv-faq-body { padding: 0 20px 18px; }
.mm-pv-faq-body p {
  color: #333;
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 12px;
}
.mm-pv-faq-body p:last-child { margin-bottom: 0; }
.mm-pv-faq-body a { color: var(--pv-heading); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .mm-pv-faq > summary,
  .mm-pv-faq > summary::after { transition: none; }
}

/* ---------- provider-supplied artwork ----------
   Clearpay's "How It Works" artwork includes its own heading, strapline and small print,
   so it runs at full content width and the page adds no heading of its own above it. */
.mm-pv-figure { margin: 0 auto; max-width: 1000px; }
.mm-pv-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.mm-pv-figure figcaption {
  margin-top: 12px;
  text-align: center;
  color: var(--pv-muted);
  font-size: 13px;
}


/* ---------- two-product comparison table ----------
   Real <table> semantics (screen readers announce the row/column relationship), wrapped in
   a scroller so it degrades to a horizontal swipe on narrow screens rather than crushing
   the columns. Same approach as .mm-size-table-wrap on the size guide. */
.mm-pv-compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--pv-rule);
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}
.mm-pv-compare {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}
.mm-pv-compare th,
.mm-pv-compare td {
  text-align: left;
  padding: 16px 20px;
  vertical-align: top;
  border-bottom: 1px solid var(--pv-rule);
}
.mm-pv-compare thead th {
  color: var(--pv-heading);
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--pv-accent);
}
.mm-pv-compare thead th:first-child { border-bottom-color: var(--pv-rule); }
.mm-pv-compare tbody th {
  font-weight: 500;
  color: #333;
  width: 34%;
}
.mm-pv-compare tbody td { color: var(--pv-heading); font-weight: 600; }
.mm-pv-compare tbody tr:nth-child(even) { background: var(--pv-surface); }
.mm-pv-compare tbody tr:last-child th,
.mm-pv-compare tbody tr:last-child td { border-bottom: 0; }
.mm-pv-compare-mark {
  display: inline-block;
  height: 20px;
  width: auto;
  vertical-align: -4px;
  margin-right: 8px;
}
.mm-pv-compare-note {
  margin: 14px 0 0;
  color: var(--pv-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ---------- full-bleed brand band with numbered steps ---------- */
.mm-pv-band {
  position: relative;
  left: 50%;
  width: 100vw;
  margin: 52px -50vw 0;
  background: var(--band-bg, var(--pv-tint));
  padding: 52px 0 56px;
}
.mm-pv-band h2 {
  color: var(--band-ink, #fff);
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 32px;
}
.mm-pv-numsteps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* always 3 items — see .mm-pv-steps note */
  gap: 20px;
}
@media (max-width: 700px) {
  .mm-pv-numsteps { grid-template-columns: 1fr; }
}
.mm-pv-numstep {
  background: var(--step-card-bg, #fff);
  border-radius: 14px;
  padding: 26px 24px;
}
.mm-pv-numstep-n {
  display: block;
  color: var(--step-card-ink, var(--pv-heading));
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.mm-pv-numstep h3 {
  color: var(--step-card-ink, var(--pv-heading));
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
}
.mm-pv-numstep p {
  color: var(--step-card-body, #333);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.mm-pv-band + .mm-pv-band { margin-top: 0; }   /* adjacent bands meet flush */

@media (max-width: 768px) {
  .mm-pv-band { padding: 38px 0 42px; margin-top: 36px; }
  .mm-pv-band + .mm-pv-band { margin-top: 0; }
  .mm-pv-band h2 { font-size: 24px; }
}

/* ---------- button hierarchy ----------
   Three levels, so a provider's CTA and a link back to our own pages never read as equals:
     .mm-pv-btn                     solid  — primary action in its section
     .mm-pv-band .mm-pv-btn         inverted — the band is already the emphasis
     .mm-pv-btn--ghost              outline — onward navigation, deliberately quieter */
.mm-pv-band .mm-pv-btn,
.mm-pv-band .mm-pv-btn:visited {
  background: var(--band-btn, var(--band-ink, #fff));
  color: var(--band-btn-ink, var(--band-bg, var(--pv-tint)));
}
.mm-pv-band .mm-pv-btn:hover,
.mm-pv-band .mm-pv-btn:focus {
  background: var(--band-btn-ink, var(--band-bg, var(--pv-tint)));
  color: var(--band-btn, var(--band-ink, #fff));
}
.mm-pv-btn--ghost,
.mm-pv-btn--ghost:visited {
  background: transparent;
  color: var(--pv-btn);
  box-shadow: inset 0 0 0 2px var(--pv-btn);
}
.mm-pv-btn--ghost:hover,
.mm-pv-btn--ghost:focus {
  background: var(--pv-btn);
  color: var(--pv-btn-ink);
}



/* ---------- hub: full brand-colour provider cards ----------
   Each card takes the provider's own colour, so the grid reads as five brands rather than
   five identical tiles.

   Four tokens per card, set inline on .mm-fin-card--brand:
     --card-bg       the provider's colour
     --card-ink      text on it (heading and body)
     --card-btn      button fill  — MUST separate from --card-bg by >= 3:1, or the button
                                    stops reading as an object
     --card-btn-ink  button label — MUST reach 4.5:1 against --card-btn
     --card-btn-hover / --card-btn-hover-ink
                     hover pair — the hover fill ALSO needs >= 3:1 against --card-bg

   That first button rule is easy to miss: a grey button on Klarna pink measured 1.27:1
   against the card, so the label was perfectly legible while the button itself was almost
   invisible. Check both ratios, not just the label. */
.mm-fin-card--brand {
  background: var(--card-bg);
  border: 0;
  border-radius: 20px;
  padding: 28px;
  color: var(--card-ink);
}
.mm-fin-card--brand:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .16); }
.mm-fin-card--brand h3,
.mm-fin-card--brand > p { color: var(--card-ink); }
.mm-fin-card--brand h3 { font-size: 21px; margin-bottom: 10px; }
.mm-fin-card--brand > p { opacity: .92; margin-bottom: 24px; }
.mm-fin-card--brand .mm-fin-logo-slot { height: 52px; margin-bottom: 20px; }


/* ---------- hub: the whole card is the link ----------
   The <a> wraps the card, so every part of it is clickable — including the padding — with no
   JavaScript and no absolutely-positioned overlay. An overlay (the "stretched link" pattern)
   would give a shorter accessible name but blocks text selection across the card; wrapping
   keeps selection and keyboard behaviour normal. Trade-off: the link's accessible name is the
   card's whole text. Noted in finance.hbs.

   The arrow is decorative and has NO hover state of its own. The card already carries the
   affordance (shadow + lift), and a second moving part inside it competes for attention. */
a.mm-fin-card--brand,
a.mm-fin-card--brand:visited {
  text-decoration: none;
  color: var(--card-ink);
}
a.mm-fin-card--brand:hover,
a.mm-fin-card--brand:focus { text-decoration: none; }
a.mm-fin-card--brand:focus-visible {
  outline: 3px solid var(--card-ink);
  outline-offset: 3px;
}
.mm-fin-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: auto 0 0 auto;   /* auto-top pins it to the bottom, auto-left to the right */
  background: var(--card-btn);
  /* Glyph is the card's own colour, so the arrow reads as a cut-out of the card. Same
     ratio as btn-vs-card, which is 6.76:1 at worst across the five cards. */
  color: var(--card-bg);
}
.mm-fin-arrow svg { display: block; width: 18px; height: 18px; }

/* The hub's cards are <a> elements (the whole card is the link), which is why this is
   scoped by element type rather than needing another class. */
a.mm-fin-card--brand > p { font-size: 14px; }

/* ---------- V12 repayment calculator: plan picker ----------
   Replaces the <select>: one compact row per plan, so the whole product set is visible at
   a glance along with what each plan needs. The chosen plan's full breakdown stays in the
   output panel, which keeps the calculator to one self-contained section.

   Rows that aren't available at the current amount are NOT dimmed with opacity. Opacity
   drags every ratio down together, including the line saying what the plan needs — the one
   thing a customer has to be able to read here. They get a muted surface and grey text
   instead, both still clearing AA. */
.mm-v12-plans { display: grid; gap: 8px; }
/* WRAPPING (2026-09-01). V12's post-live review requires the rate to be spelled out in full
   ("24 months at 12.9% APR representative"), which is long enough to squeeze the payment note
   in the narrower two-column widths — roughly 861–1050px, i.e. most laptops. Left alone the
   term shrank and broke mid-phrase, dangling "representative" on its own line.

   width: max-content holds the term on one line; flex-shrink: 0 stops the note squeezing it;
   flex-wrap then drops the note to a line of its own when the two can't sit side by side. The
   max-width caps the term at the row instead of overflowing it, so a column too narrow for
   even one line falls back to wrapping the text — which is what happens on phones, where the
   ≤420px rule below has already stacked the row anyway. No breakpoint hardcodes the label. */
.mm-v12-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 12px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--pv-rule);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.mm-v12-plan:hover { border-color: var(--pv-accent); }
.mm-v12-plan-term {
  color: #03217D;
  font-size: 15px;
  font-weight: 600;
  width: max-content;
  max-width: 100%;
  flex-shrink: 0;
}
.mm-v12-plan-note { color: #5566A5; font-size: 13px; text-align: right; }

/* Chosen. The inset ring thickens the accent border without moving the row. */
.mm-v12-plan[aria-checked="true"] {
  border-color: var(--pv-accent);
  box-shadow: inset 0 0 0 1px var(--pv-accent);
  background: var(--pv-surface);
}

/* Not available at the current amount — the note says what would unlock it. */
.mm-v12-plan--off { background: #F7F8F9; cursor: not-allowed; }
.mm-v12-plan--off:hover { border-color: var(--pv-rule); }
.mm-v12-plan--off .mm-v12-plan-term { color: #4F5B63; }
.mm-v12-plan--off .mm-v12-plan-note { color: #5A6B76; }

@media (max-width: 420px) {
  .mm-v12-plan { flex-direction: column; align-items: flex-start; gap: 2px; }
  .mm-v12-plan-note { text-align: left; }
}

/* ---------- unfilled placeholder marker — deliberately loud ---------- */
.mm-fin-todo {
  background: #FFF3CD;
  color: #7A5B00;
  border: 1px dashed #C9A227;
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
  font-size: .93em;
}

/* ---------- V12 calculator ---------- */
.mm-fin-calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--pv-rule);
  border-radius: 14px;
  overflow: hidden;
}
.mm-fin-calc-inputs { padding: 28px; }
.mm-fin-calc-out {
  padding: 28px;
  background: var(--pv-surface);
  border-left: 1px solid var(--pv-rule);
}
.mm-fin-field { margin-bottom: 22px; }
.mm-fin-field:last-child { margin-bottom: 0; }
/* The plan picker is a radiogroup, not one control, so it carries a title rather than a
   <label> — same treatment either way. */
.mm-fin-field label,
.mm-fin-field-title {
  display: block;
  color: #03217D;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
}
.mm-fin-field-hint {
  display: block;
  color: #5566A5;
  font-weight: 500;
  font-size: 13px;
  margin-top: 5px;
}
.mm-fin-money {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--pv-rule);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.mm-fin-money span {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: #5566A5;
  font-weight: 700;
  background: var(--pv-surface);
  border-right: 1px solid var(--pv-rule);
}
.mm-fin-money input {
  border: 0;
  padding: 12px 14px;
  font-size: 17px;
  font-weight: 600;
  color: #03217D;
  width: 100%;
  background: transparent;
}
.mm-fin-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--pv-rule);
  margin-top: 14px;
}
.mm-fin-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pv-accent);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  cursor: pointer;
}
.mm-fin-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pv-accent);
  border: 3px solid #fff;
  cursor: pointer;
}
.mm-fin-out-label { color: #5566A5; font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.mm-fin-out-big {
  color: var(--pv-accent);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 2px;
  letter-spacing: -.02em;
}
.mm-fin-out-big span { font-size: 18px; font-weight: 600; color: #5566A5; }
.mm-fin-out-term { color: #5566A5; font-size: 14px; margin: 0 0 20px; }
.mm-fin-out-rows { list-style: none; margin: 0; padding: 0; }
.mm-fin-out-rows li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--pv-rule);
  font-size: 14px;
}
.mm-fin-out-rows li:last-child { border-bottom: 0; }
.mm-fin-out-rows .k { color: #5566A5; font-weight: 600; }
.mm-fin-out-rows .v { color: #03217D; font-weight: 700; text-align: right; }
.mm-fin-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--pv-rule);
  border-radius: 10px;
  color: #333;
  font-size: 13px;
  line-height: 1.65;
}
.mm-fin-warn {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: #FFF3CD;
  border: 1px solid #C9A227;
  border-radius: 10px;
  color: #7A5B00;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.mm-fin-warn[hidden] { display: none; }
.mm-fin-state {
  border: 1px solid var(--pv-rule);
  border-radius: 14px;
  padding: 40px 28px;
  text-align: center;
  color: #5566A5;
}
.mm-fin-state h3 { color: #03217D; margin: 0 0 8px; font-size: 19px; }
.mm-fin-state p { margin: 0 auto; max-width: 520px; line-height: 1.65; }
.mm-fin-state a { color: #03217D; font-weight: 600; }

/* ---------- quality floor ---------- */
.mm-fin a:focus-visible,
.mm-pv a:focus-visible,
.mm-pv button:focus-visible,
.mm-fin input:focus-visible,
.mm-fin select:focus-visible {
  outline: 3px solid #6D3F87;
  outline-offset: 2px;
  border-radius: 4px;
}
.mm-fin-money input:focus-visible { outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .mm-fin-card,
  .mm-pv-btn { transition: none; }
  .mm-fin-card:hover { transform: none; }
}

@media (max-width: 860px) {
  .mm-fin-calc { grid-template-columns: 1fr; }
  .mm-fin-calc-out { border-left: 0; border-top: 1px solid var(--pv-rule); }
}
@media (max-width: 768px) {
  .mm-pv-hero { padding: 38px 0 42px; }
  .mm-pv-hero h1 { font-size: 30px; }
  .mm-pv-lede { font-size: 16px; }
  .mm-pv-logo { height: calc(var(--logo-h, 34px) * 0.72); }   /* scale the token, don't override it */
  .mm-fin-heading { font-size: 22px; }
  .mm-fin-section { padding-top: 36px; }
  .mm-fin-out-big { font-size: 36px; }
}

/* ---------- Product recall page (recall.hbs) ----------
   Four fields and a button. Structure (hero, sections, headings, warn, state panel, focus
   rings) all comes from the FINANCE PAGES rules above — this block only styles the form. */
.mm-recall-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--pv-rule);
  border-radius: 14px;
}
.mm-recall-field { margin-bottom: 18px; }
.mm-recall-field label {
  display: block;
  color: #03217D;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}
.mm-recall-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #8089AE;      /* 3.44:1 on white — clears the 3:1 UI-component minimum */
  border-radius: 10px;
  background: #fff;
  color: #333;
  font: inherit;
  font-size: 16px;                /* 16px minimum stops iOS zooming the page on focus */
}
/* Off-screen, not display:none — hidden inputs are exactly what bots skip. */
.mm-recall-hp { position: absolute; left: -9999px; top: auto; }
.mm-recall-submit {
  width: 100%;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
.mm-recall-submit:disabled { opacity: .6; cursor: default; }
.mm-recall .mm-fin-warn a { color: inherit; font-weight: 700; }

/* ---------- recall: resolution dropdown + inline collection-date calendar ---------- */
.mm-recall-field .mm-recall-field-title {
  display: block;
  color: #03217D;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}

/* Field-shaped buttons: the dropdown trigger and the date field. Text left, chevron right
   with breathing room (flex gap + the button's own right padding). */
.mm-recall-fieldbtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}
.mm-recall-fieldbtn-text { color: #333; }
.mm-recall-fieldbtn-text.is-placeholder { color: #5566A5; }
.mm-recall-chevron { flex: 0 0 auto; color: #03217D; transition: transform .15s ease; }
.mm-recall-fieldbtn[aria-expanded="true"] .mm-recall-chevron { transform: rotate(180deg); }

/* Dropdown options panel, themed instead of the native OS list. */
.mm-recall-dd-wrap { position: relative; }
.mm-recall-dd {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #8089AE;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(3, 33, 125, 0.12);
}
.mm-recall-dd [role="option"] {
  padding: 11px 14px;
  border-radius: 6px;
  color: #333;
  font-size: 15px;
  cursor: pointer;
}
.mm-recall-dd [role="option"]:hover { background: #F4F5F9; }
.mm-recall-dd [role="option"]:focus { outline: none; }
.mm-recall-dd [role="option"]:focus-visible {
  outline: 3px solid #6D3F87;
  outline-offset: -3px;
}
.mm-recall-dd [role="option"][aria-selected="true"] { color: #03217D; font-weight: 700; }

/* Calendar reveal — in the page flow (pushes content down), not an overlay.
   Slide is the grid-rows trick: 0fr <-> 1fr animates where height:auto cannot. The -anim
   child clips the content while the row grows, and flips visibility only after the slide,
   so a collapsed calendar is out of the tab order without display:none (unanimatable). */
.mm-recall-cal-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;   /* keep in step with CAL_SLIDE_MS in the JS */
}
.mm-recall-cal-wrap--open { grid-template-rows: 1fr; }
.mm-recall-cal-anim {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s .28s;
}
.mm-recall-cal-wrap--open .mm-recall-cal-anim {
  visibility: visible;
  transition: visibility 0s 0s;
}
.mm-recall-cal-anim > .mm-recall-cal { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .mm-recall-cal-wrap, .mm-recall-cal-anim { transition: none; }
}

.mm-recall-cal {
  border: 1px solid #8089AE;    /* same 3.44:1 border as the inputs — it is a control too */
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}
.mm-recall-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.mm-recall-cal-title { color: #03217D; font-weight: 700; font-size: 15px; }
.mm-recall-cal-nav {
  width: 34px;
  height: 34px;
  border: 1px solid #8089AE;
  border-radius: 50%;
  background: #fff;
  color: #03217D;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.mm-recall-cal-nav:hover:not(:disabled) { background: #F4F5F9; }
.mm-recall-cal-nav:disabled { opacity: .35; cursor: default; }

.mm-recall-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.mm-recall-dow {
  padding: 6px 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #5566A5;
}
.mm-recall-day {
  padding: 0;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #03217D;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mm-recall-day:hover:not(:disabled):not(.mm-recall-day--on) { background: #F4F5F9; }
/* Blocked days (past, Sunday, inside the 4pm cutoff). Deliberately quiet — disabled
   controls are exempt from contrast minima, and looking unavailable is the point. */
.mm-recall-day:disabled {
  color: #9AA1B5;
  font-weight: 400;
  cursor: default;
}
.mm-recall-day--on { background: #03217D; color: #fff; }