.mch-comparison {
--mch-comparison-widesize: 100%;
--mch-outer-rim-widesize: 1px;
--mch-outer-rim-colour: var(--mch-shade);
--mch-outer-round: 6px;
--mch-rowline-rim-widesize: 1px;
--mch-rowline-rim-colour: var(--mch-shade);
--mch-rowline-outerspace-btm: 0px;
--mch-zebra-back: var(--mch-tone);
--mch-pointer-back: var(--mch-tone);
--mch-toprow-back: var(--mch-ink);
--mch-toprow-copytext-colour: #ffffff;
--mch-toprow-font-size: 14px;
--mch-toprow-font-wt: 600;
--mch-toprow-rim-widesize: 0px;
--mch-toprow-rim-colour: var(--mch-shade);
--mch-toprow-justify: left;
--mch-spot-padding: 11px 18px;
--mch-pillar-spacing: 0px;
--mch-badgeimg-upto-widesize: 120px;
--mch-badgeimg-upto-height: 60px;
--mch-badgeimg-rim-widesize: 0px;
--mch-badgeimg-rim-colour: var(--mch-shade);
--mch-badgeimg-rim-round: 0px;
--mch-lead-visual-upto-widesize: 120px;
--mch-lead-visual-upto-height: 60px;
--mch-lead-visual-rim-widesize: 0px;
--mch-lead-visual-rim-colour: var(--mch-shade);
--mch-lead-visual-rim-round: 0px;
--mch-deal-font-size: 16px;
--mch-deal-font-wt: 600;
--mch-deal-colour: var(--mch-ink);
--mch-deal-segment-colour: var(--mch-deal-colour);
--mch-deal-segment-font-size: var(--mch-deal-font-size);
--mch-deal-segment-font-wt: var(--mch-deal-font-wt);
--mch-grade-font-size: 16px;
--mch-grade-colour: var(--mch-ink);
--mch-grade-font-wt: 600;
--mch-grade-ptstar-size: 18px;
--mch-grade-ptstar-colour: var(--mch-main);
--mch-grade-single-ptstar-colour: var(--mch-grade-ptstar-colour);
--mch-grade-badge-back: transparent;
--mch-grade-badge-round: 0px;
--mch-grade-headlinetext-font-size: 14px;
--mch-grade-headlinetext-back: transparent;
--mch-grade-headlinetext-round: 0px;
--mch-grade-tail-font-size: 12px;
--mch-grade-tail-colour: var(--mch-paint);
--mch-grade-badge-padding: 2px 7px;
--mch-grade-meter-height: 10px;
--mch-grade-meter-round: 999px;
--mch-grade-meter-groove-back: var(--mch-shade);
--mch-grade-meter-fill: var(--mch-main);
--mch-grade-number-back: var(--mch-base);
--mch-grade-number-colour: #ffffff;
--mch-claim-widesize: auto;
--mch-claim-min-widesize: 120px;
--mch-claim-font-size: 14px;
--mch-claim-font-wt: 700;
--mch-claim-back-colour: var(--mch-base);
--mch-claim-copytext-colour: #ffffff;
--mch-claim-rim-widesize: 0px;
--mch-claim-rim-colour: var(--mch-base);
--mch-claim-round: 5px;
--mch-claim-pointer-back: var(--mch-base);
--mch-claim-padding: 9px 18px;
--mch-moreinfo-claim-widesize: auto;
--mch-moreinfo-claim-min-widesize: 120px;
--mch-moreinfo-claim-font-size: 14px;
--mch-moreinfo-claim-font-wt: 700;
--mch-moreinfo-claim-back-colour: var(--mch-base);
--mch-moreinfo-claim-copytext-colour: #ffffff;
--mch-moreinfo-claim-rim-widesize: 0px;
--mch-moreinfo-claim-rim-colour: var(--mch-base);
--mch-moreinfo-claim-round: 5px;
--mch-moreinfo-claim-pointer-back: var(--mch-base);
--mch-moreinfo-claim-padding: 9px 18px;
--mch-tiles-columns: 1fr;
--mch-pillar-qty: 1;
--mch-outerspace-headtop: 20px;
--mch-outerspace-btm: 20px;
--mch-outerspace-left: auto;
--mch-outerspace-right: auto;
--mch-padding-headtop: 0px;
--mch-padding-btm: 0px;
--mch-padding-left: 0px;
--mch-padding-right: 0px;
--mch-rowline-num-font-size: 14px;
--mch-rowline-num-font-wt: 700;
--mch-rowline-num-colour: #ffffff;
--mch-rowline-num-back: var(--mch-ink);
--mch-rowline-num-spot-back: inherit;
--mch-rowline-num-toprow-colour: #ffffff;
--mch-rowline-num-spot-rim-colour: var(--mch-shade);
--mch-rowline-num-rim-widesize: 0px;
--mch-rowline-num-rim-colour: var(--mch-shade);
--mch-rowline-num-rim-round: 50%;
--mch-rowline-num-padding: 4px;
--mch-rowline-num-padding-alt: 4px;
display: grid;
grid-template-columns: var(--mch-tiles-columns);
gap: var(--mch-pillar-spacing);
width: var(--mch-comparison-widesize);
max-width: 100%;
margin-top: var(--mch-outerspace-headtop);
margin-bottom: var(--mch-outerspace-btm);
margin-left: var(--mch-outerspace-left);
margin-right: var(--mch-outerspace-right);
padding-top: var(--mch-padding-headtop);
padding-bottom: var(--mch-padding-btm);
padding-left: var(--mch-padding-left);
padding-right: var(--mch-padding-right);
border-style: solid;
border-width: var(--mch-outer-rim-widesize, 0);
border-color: var(--mch-outer-rim-colour);
border-radius: var(--mch-outer-round);
background: var(--mch-comparison-back, transparent);
overflow: hidden;
font-family: inherit;
}
.mch-head,
.mch-core {
display: contents;
}
.mch-comparison[data-mch-toprow="off"] .mch-head {
display: none !important;
}
.mch-comparison:not([data-mch-toprow="off"]) .mch-core .mch-rowline:first-child {
margin-top: var(--mch-toprow-spacing, 0px) !important;
}
.mch-rowline {
display: contents;
}
.mch-comparison-listings,
.mch-comparison-listings > :is(thead, tbody) > tr > :is(th, td) {
display: contents !important;
}
.mch-comparison-listings,
.mch-comparison-listings > :is(thead, tbody),
.mch-comparison-listings > :is(thead, tbody) > tr,
.mch-comparison-listings > :is(thead, tbody) > tr > :is(th, td) {
font: inherit !important;
color: inherit !important;
letter-spacing: inherit !important;
word-spacing: inherit !important;
text-transform: inherit !important;
text-align: inherit !important;
text-indent: inherit !important;
text-shadow: inherit !important;
white-space: inherit !important;
word-break: inherit !important;
overflow-wrap: inherit !important;
hyphens: inherit !important;
line-break: inherit !important;
vertical-align: baseline !important;
}
.mch-comparison-listings > :is(thead, tbody) {
border: 0 none !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
.mch-comparison-listings > :is(thead, tbody) > tr {
margin-top: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-shadow: none !important;
}
.mch-comparison-listings > thead > tr {
border: 0 none !important;
}
.mch-comparison .mch-comparison-listings > tbody > tr.mch-rowline {
background: var(--mch-rowline-back, #ffffff);
}
.mch-comparison > :has(> .mch-comparison-listings) {
display: contents !important;
}
.mch-core .mch-rowline {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
border-style: solid;
border-width: var(--mch-rowline-rim-widths, 0 0 var(--mch-rowline-rim-widesize, 1px) 0);
border-color: var(--mch-rowline-rim-colour);
margin-bottom: var(--mch-rowline-outerspace-btm);
background: var(--mch-rowline-back, #ffffff);
border-radius: var(--mch-rowline-round, 0);
overflow: hidden;
}
.mch-spot.mch-spot-solid-ruleline {
grid-column: 1 / -1;
order: 1;
}
.mch-toprow-spot.mch-spot-solid-ruleline {
display: none;
}
.mch-comparison[data-mch-rowline-padding] .mch-core .mch-rowline {
padding: var(--mch-rowline-padding, 0);
}
.mch-comparison[data-mch-rowline-padding] .mch-head .mch-rowline {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
padding: var(--mch-rowline-padding, 0);
background: var(--mch-toprow-back);
}
.mch-core .mch-rowline:last-child {
margin-bottom: 0;
}
.mch-comparison:not([data-mch-rowline-frame]) .mch-core .mch-rowline:last-child {
border-bottom-width: 0;
}
.mch-toprow-spot {
background: var(--mch-toprow-back);
color: var(--mch-toprow-copytext-colour);
font-weight: var(--mch-toprow-font-wt);
font-size: var(--mch-toprow-font-size);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: var(--mch-toprow-rim-widesize) solid var(--mch-toprow-rim-colour);
}
.mch-core .mch-spot {
background: var(--mch-rowline-back, #ffffff);
}
.mch-comparison[data-mch-banding="true"] .mch-core .mch-rowline-alt .mch-spot {
background: var(--mch-zebra-back);
}
.mch-comparison[data-mch-pointer="true"] .mch-core .mch-rowline:hover .mch-spot {
background: var(--mch-pointer-back);
}
.mch-comparison[data-mch-banding="true"] .mch-core .mch-rowline-alt {
background: var(--mch-zebra-back);
}
.mch-comparison[data-mch-pointer="true"] .mch-core .mch-rowline:hover {
background: var(--mch-pointer-back);
}
.mch-comparison[data-mch-lead-opening="true"] .mch-core .mch-rowline-lead {
background: var(--mch-lead-back);
}
.mch-comparison[data-mch-lead-opening="true"] .mch-core .mch-rowline-lead .mch-spot {
background: var(--mch-lead-back);
}
.mch-comparison[data-mch-lead-rim="true"] .mch-core .mch-rowline-lead,
.mch-tiles-casingbox[data-mch-lead-rim="true"] .mch-rowline-lead {
border-style: solid;
border-width: var(--mch-lead-rim-widesize, 2px);
border-color: var(--mch-lead-rim-colour);
}
.mch-comparison[data-mch-lead-badge] .mch-core .mch-rowline-lead,
.mch-tiles-casingbox[data-mch-lead-badge] .mch-rowline-lead {
position: relative;
overflow: visible;
margin-top: 14px;
}
.mch-comparison[data-mch-lead-badge] .mch-core .mch-rowline-lead > .mch-spot:first-child,
.mch-comparison[data-mch-lead-badge] .mch-core .mch-rowline-lead > :first-child > .mch-spot {
border-top-left-radius: var(--mch-rowline-round, 0);
border-bottom-left-radius: var(--mch-rowline-round, 0);
}
.mch-comparison[data-mch-lead-badge] .mch-core .mch-rowline-lead > .mch-spot:last-child,
.mch-comparison[data-mch-lead-badge] .mch-core .mch-rowline-lead > :last-child > .mch-spot {
border-top-right-radius: var(--mch-rowline-round, 0);
border-bottom-right-radius: var(--mch-rowline-round, 0);
}
.mch-comparison[data-mch-lead-badge] .mch-core .mch-rowline-lead::before,
.mch-tiles-casingbox[data-mch-lead-badge] .mch-rowline-lead::before {
content: attr(data-mch-badge);
position: absolute;
top: 0;
left: 18px;
transform: translateY(-50%);
z-index: 2;
background: var(--mch-lead-badge-back, var(--mch-lead-rim-colour, var(--mch-ink)));
color: var(--mch-lead-badge-colour, #ffffff);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
line-height: 1;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 999px;
white-space: nowrap;
pointer-events: none;
}
.mch-comparison[data-mch-lead-badge="center"] .mch-core .mch-rowline-lead::before,
.mch-tiles-casingbox[data-mch-lead-badge="center"] .mch-rowline-lead::before {
left: 50%;
transform: translate(-50%, -50%);
}
.mch-comparison[data-mch-lead-badge="right"] .mch-core .mch-rowline-lead::before,
.mch-tiles-casingbox[data-mch-lead-badge="right"] .mch-rowline-lead::before {
left: auto;
right: 18px;
}
.mch-comparison[data-mch-rowline-num-pillar-back="true"] .mch-core .mch-num-spot {
background: var(--mch-rowline-num-spot-back);
}
.mch-comparison[data-mch-rowline-num-pillar-ruleline="true"]:not([data-mch-rowline-frame]):not([data-mch-rowline-padding]) .mch-core .mch-rowline {
border-bottom-width: 0;
}
.mch-comparison[data-mch-rowline-num-pillar-ruleline="true"]:not([data-mch-rowline-frame]):not([data-mch-rowline-padding]) .mch-core .mch-rowline .mch-spot {
border-bottom: var(--mch-rowline-rim-btm, 1px) solid var(--mch-rowline-rim-btm-colour, var(--mch-rowline-rim-colour));
}
.mch-comparison[data-mch-rowline-num-pillar-ruleline="true"]:not([data-mch-rowline-frame]):not([data-mch-rowline-padding]) .mch-core .mch-rowline .mch-num-spot {
border-bottom-color: var(--mch-rowline-num-spot-rim-colour);
}
.mch-comparison[data-mch-rowline-num-pillar-ruleline="true"]:not([data-mch-rowline-frame]):not([data-mch-rowline-padding]) .mch-core .mch-rowline:last-child .mch-spot {
border-bottom-width: 0;
}
.mch-comparison[data-mch-rowline-num-pillar-back="true"][data-mch-banding="true"] .mch-core .mch-rowline-alt .mch-num-spot,
.mch-comparison[data-mch-rowline-num-pillar-back="true"][data-mch-pointer="true"] .mch-core .mch-rowline:hover .mch-num-spot,
.mch-comparison[data-mch-rowline-num-pillar-back="true"][data-mch-lead-opening="true"] .mch-core .mch-rowline-lead .mch-num-spot {
background: var(--mch-rowline-num-spot-back);
}
.mch-comparison[data-mch-rowline-num-pillar-toprow="true"] .mch-head .mch-num-spot {
background: var(--mch-rowline-num-spot-back);
color: var(--mch-rowline-num-toprow-colour);
}
.mch-comparison[data-mch-rowline-num-pillar-toprow="true"][data-mch-rowline-num-pillar-ruleline="true"] .mch-head .mch-num-spot {
border-bottom-color: var(--mch-rowline-num-spot-rim-colour);
}
.mch-spot {
padding: var(--mch-spot-padding);
display: flex;
align-items: center;
min-width: 0;
word-wrap: break-word;
overflow-wrap: break-word;
}
.mch-spot .mch-spot-stack,
.mch-spot .mch-spot-unititem {
width: 100%;
}
.mch-spot[style*="text-align: center"] {
justify-content: center;
}
.mch-rowline-number {
box-sizing: content-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2ch;
height: auto;
font-variant-numeric: tabular-nums;
padding: var(--mch-rowline-num-padding);
font-size: var(--mch-rowline-num-font-size);
font-weight: var(--mch-rowline-num-font-wt);
color: var(--mch-rowline-num-colour);
background: var(--mch-rowline-num-back);
border-style: solid;
border-width: var(--mch-rowline-num-rim-widesize, 0);
border-color: var(--mch-rowline-num-rim-colour);
border-radius: var(--mch-rowline-num-rim-round);
line-height: 1;
}
.mch-spot[style*="text-align: right"] {
justify-content: flex-end;
}
.mch-badgeimg {
display: inline-flex;
align-items: center;
justify-content: center;
}
.mch-lead-visual {
display: inline-flex;
align-items: center;
justify-content: center;
}
.mch-badgeimg-photoimg,
.mch-badgeimg img {
display: block;
max-width: var(--mch-badgeimg-upto-widesize);
max-height: var(--mch-badgeimg-upto-height);
width: auto;
height: auto;
object-fit: contain;
border-style: solid;
border-width: var(--mch-badgeimg-rim-widesize, 0);
border-color: var(--mch-badgeimg-rim-colour);
border-radius: var(--mch-badgeimg-rim-round);
}
.mch-deal-segment {
color: var(--mch-deal-segment-colour);
font-size: var(--mch-deal-segment-font-size);
font-weight: var(--mch-deal-segment-font-wt);
}
.mch-deal {
font-size: var(--mch-deal-font-size);
color: var(--mch-deal-colour);
font-weight: var(--mch-deal-font-wt);
word-wrap: normal;
overflow-wrap: normal;
word-break: normal;
}
.mch-claim {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
width: var(--mch-claim-widesize);
min-width: var(--mch-claim-min-widesize);
padding: var(--mch-claim-padding);
font-size: var(--mch-claim-font-size);
font-weight: var(--mch-claim-font-wt);
text-transform: var(--mch-claim-copytext-case, uppercase);
letter-spacing: 0.5px;
background: var(--mch-claim-back-colour);
color: var(--mch-claim-copytext-colour) !important;
border-style: solid;
border-width: var(--mch-claim-rim-widesize, 0);
border-color: var(--mch-claim-rim-colour);
border-radius: var(--mch-claim-round);
text-decoration: var(--mch-claim-linestyle, none) !important;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.mch-claim:hover {
background: var(--mch-claim-pointer-back);
color: var(--mch-claim-pointer-copytext-colour, var(--mch-claim-copytext-colour)) !important;
text-decoration: var(--mch-claim-pointer-linestyle, none) !important;
}
.mch-claim:visited {
color: var(--mch-claim-copytext-colour) !important;
}
.mch-claim:active {
transform: scale(0.98);
}
.mch-spot-stack {
display: flex;
flex-direction: column;
gap: 6px;
align-items: stretch;
}
.mch-spot-unititem {
display: block;
}
[data-mch-piece-spacing="true"] .mch-spot-stack {
gap: var(--mch-piece-spacing);
}
[data-mch-piece-spacing="true"] .mch-spot-unititem {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
[data-mch-piece-spacing="true"] .mch-spot[style*="text-align: center"] .mch-spot-unititem {
justify-content: center;
}
[data-mch-piece-spacing="true"] .mch-spot[style*="text-align: right"] .mch-spot-unititem {
justify-content: flex-end;
}
.mch-moreinfo-claim {
width: var(--mch-moreinfo-claim-widesize, var(--mch-claim-widesize));
min-width: var(--mch-moreinfo-claim-min-widesize, var(--mch-claim-min-widesize));
padding: var(--mch-moreinfo-claim-padding, var(--mch-claim-padding));
font-size: var(--mch-moreinfo-claim-font-size, var(--mch-claim-font-size));
font-weight: var(--mch-moreinfo-claim-font-wt, var(--mch-claim-font-wt));
text-transform: var(--mch-moreinfo-claim-copytext-case, var(--mch-claim-copytext-case, uppercase));
background: var(--mch-moreinfo-claim-back-colour, var(--mch-claim-back-colour));
color: var(--mch-moreinfo-claim-copytext-colour, var(--mch-claim-copytext-colour)) !important;
border-style: solid;
border-width: var(--mch-moreinfo-claim-rim-widesize, var(--mch-claim-rim-widesize));
border-color: var(--mch-moreinfo-claim-rim-colour, var(--mch-claim-rim-colour));
border-radius: var(--mch-moreinfo-claim-round, var(--mch-claim-round));
text-decoration: var(--mch-moreinfo-claim-linestyle, none) !important;
}
.mch-moreinfo-claim:hover {
background: var(--mch-moreinfo-claim-pointer-back, var(--mch-claim-pointer-back));
color: var(--mch-moreinfo-claim-pointer-copytext-colour, var(--mch-moreinfo-claim-copytext-colour, var(--mch-claim-copytext-colour))) !important;
text-decoration: var(--mch-moreinfo-claim-pointer-linestyle, none) !important;
}
.mch-moreinfo-claim:visited {
color: var(--mch-moreinfo-claim-copytext-colour, var(--mch-claim-copytext-colour)) !important;
}
.mch-yes {
color: var(--mch-icon-yes-colour, var(--mch-base));
font-size: var(--mch-icon-yes-size, 1.25em);
font-weight: bold;
}
.mch-no {
color: var(--mch-icon-no-colour, var(--mch-brand));
font-size: var(--mch-icon-no-size, 1.25em);
font-weight: bold;
}
.mch-comparison[data-mch-icon-back="true"] .mch-yes,
.mch-tiles-casingbox[data-mch-icon-back="true"] .mch-yes,
.mch-yes-no-casingbox[data-mch-icon-back="true"] .mch-yes {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--mch-icon-yes-padding);
background: var(--mch-icon-yes-back);
border-style: solid;
border-width: var(--mch-icon-yes-rim-widesize, 0);
border-color: var(--mch-icon-yes-rim-colour);
border-radius: var(--mch-icon-yes-rim-round);
line-height: 1;
box-sizing: border-box;
}
.mch-comparison[data-mch-icon-back="true"] .mch-no,
.mch-tiles-casingbox[data-mch-icon-back="true"] .mch-no,
.mch-yes-no-casingbox[data-mch-icon-back="true"] .mch-no {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--mch-icon-no-padding);
background: var(--mch-icon-no-back);
border-style: solid;
border-width: var(--mch-icon-no-rim-widesize, 0);
border-color: var(--mch-icon-no-rim-colour);
border-radius: var(--mch-icon-no-rim-round);
line-height: 1;
box-sizing: border-box;
}
.mch-years {
font-size: var(--mch-years-font-size, inherit);
font-weight: var(--mch-years-font-wt, inherit);
color: var(--mch-years-colour, inherit);
}
.mch-other-copytext {
font-size: var(--mch-other-copytext-font-size, inherit);
font-weight: var(--mch-other-copytext-font-wt, inherit);
color: var(--mch-other-copytext-colour, inherit);
}
.mch-brand-name {
font-size: var(--mch-brand-name-font-size, inherit);
font-weight: var(--mch-brand-name-font-wt, inherit);
color: var(--mch-brand-name-colour, inherit);
}
.mch-headlinetext {
font-weight: var(--mch-brand-name-font-wt, 600);
}
.mch-conditions {
font-size: 13px;
color: var(--mch-paint);
}
.mch-grade {
font-size: var(--mch-grade-font-size);
font-weight: var(--mch-grade-font-wt);
color: var(--mch-grade-colour);
}
.mch-grade-headlinetext {
font-size: var(--mch-grade-headlinetext-font-size);
font-weight: 600;
white-space: nowrap;
}
.mch-grade-tail {
font-size: var(--mch-grade-tail-font-size);
color: var(--mch-grade-tail-colour);
}
.mch-grade-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--mch-grade-badge-back);
border-radius: var(--mch-grade-badge-round);
padding: var(--mch-grade-badge-padding);
white-space: nowrap;
}
.mch-grade-badge.mch-grade-badge-headlinetext {
background: var(--mch-grade-headlinetext-back);
border-radius: var(--mch-grade-headlinetext-round);
}
.mch-grade-single-ptstar {
color: var(--mch-grade-single-ptstar-colour);
font-size: var(--mch-grade-ptstar-size);
line-height: 1;
}
.mch-grade-starset {
display: inline-flex;
align-items: center;
gap: 2px;
}
.mch-grade-number {
margin: 0 6px 0 0;
padding: 3px 7px;
border-radius: 6px;
background: var(--mch-grade-number-back);
color: var(--mch-grade-number-colour);
font-size: calc(var(--mch-grade-ptstar-size) * 0.7);
font-weight: 700;
line-height: 1.2;
letter-spacing: 0;
}
.mch-grade-starset > .mch-grade-number:last-child {
margin: 0 0 0 6px;
}
.mch-grade-meter {
display: inline-flex;
align-items: center;
gap: 8px;
width: 100%;
min-width: 60px;
}
.mch-grade-meter-groove {
flex: 1 1 auto;
display: block;
height: var(--mch-grade-meter-height);
background: var(--mch-grade-meter-groove-back);
border-radius: var(--mch-grade-meter-round);
overflow: hidden;
}
.mch-grade-meter-fill {
display: block;
height: 100%;
background: var(--mch-grade-meter-fill);
border-radius: inherit;
}
.mch-grade-meter-number {
flex: 0 0 auto;
font-size: var(--mch-grade-font-size);
font-weight: var(--mch-grade-font-wt);
color: var(--mch-grade-colour);
line-height: 1;
}
.mch-grade-ptstar {
font-size: var(--mch-grade-ptstar-size);
line-height: 1;
}
.mch-ptstar-solid {
color: var(--mch-grade-ptstar-colour);
}
.mch-ptstar-off {
color: var(--mch-grade-ptstar-colour);
opacity: 0.3;
}
.mch-ptstar-fraction {
position: relative;
display: inline-block;
}
.mch-ptstar-fraction .mch-ptstar-back {
color: var(--mch-grade-ptstar-colour);
opacity: 0.3;
}
.mch-ptstar-fraction .mch-ptstar-front {
position: absolute;
left: 0;
top: 0;
color: var(--mch-grade-ptstar-colour);
overflow: hidden;
width: var(--mch-ptstar-fill, 50%);
}
img.mch-lead-visual,
img.mch-lead-visual-photoimg {
max-width: var(--mch-lead-visual-upto-widesize);
max-height: var(--mch-lead-visual-upto-height);
width: auto;
object-fit: contain;
border-style: solid;
border-width: var(--mch-lead-visual-rim-widesize, 0);
border-color: var(--mch-lead-visual-rim-colour);
border-radius: var(--mch-lead-visual-rim-round);
height: auto;
display: block;
}
.mch-notice,
.mch-no-hits {
padding: 20px;
text-align: center;
color: var(--mch-paint);
background: var(--mch-tone);
border-radius: 8px;
}
@media (max-width: 1000px) {
.mch-comparison.mch-hide-toprow-handheld .mch-head {
display: none !important;
}
.mch-handheld-stacked {
display: block !important;
}
.mch-handheld-stacked .mch-head {
display: none !important;
}
.mch-comparison.mch-hide-toprow-handheld,
.mch-handheld-stacked {
--mch-toprow-spacing: 0px !important;
}
.mch-handheld-stacked .mch-core {
display: block !important;
}
.mch-handheld-stacked .mch-rowline {
display: flex !important;
flex-direction: column;
padding: 16px;
margin-bottom: 12px;
border-radius: var(--mch-outer-round);
border: var(--mch-rowline-rim-widesize) solid var(--mch-rowline-rim-colour);
background: var(--mch-rowline-back, #ffffff);
}
.mch-handheld-stacked .mch-core .mch-rowline {
border-bottom: var(--mch-rowline-rim-widesize) solid var(--mch-rowline-rim-colour);
}
.mch-comparison.mch-handheld-stacked[data-mch-rowline-padding] .mch-core .mch-rowline {
padding: 16px;
}
.mch-comparison.mch-handheld-stacked .mch-core .mch-rowline:last-child {
border-bottom-width: var(--mch-rowline-rim-widesize) !important;
margin-bottom: 12px;
}
.mch-comparison.mch-handheld-stacked[data-mch-lead-opening="true"] .mch-rowline-lead {
background: var(--mch-lead-back);
}
.mch-comparison.mch-handheld-stacked[data-mch-lead-badge] {
padding-top: calc(var(--mch-padding-headtop, 0px) + 12px);
}
.mch-comparison.mch-handheld-stacked[data-mch-lead-opening="true"] .mch-core .mch-rowline-lead .mch-spot {
background: transparent;
}
.mch-comparison.mch-handheld-stacked[data-mch-rowline-num-pillar-back="true"] .mch-core .mch-rowline .mch-num-spot,
.mch-comparison.mch-handheld-stacked[data-mch-rowline-num-pillar-back="true"] .mch-core .mch-rowline:hover .mch-num-spot {
background: transparent;
}
.mch-comparison.mch-handheld-stacked[data-mch-rowline-num-pillar-back="true"][data-mch-rowline-num-unstyled="true"] .mch-core .mch-rowline-number {
background: var(--mch-rowline-num-spot-back);
}
.mch-handheld-stacked .mch-spot {
width: 100%;
padding: 8px 0;
flex-wrap: wrap;
justify-content: center !important;
text-align: center !important;
border-bottom: none !important;
}
.mch-handheld-stacked .mch-spot::before {
content: attr(data-mch-label);
display: block;
width: 100%;
font-weight: 600;
font-size: 12px;
color: var(--mch-paint);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.mch-handheld-stacked .mch-spot[data-mch-label=""]::before {
display: none;
}
.mch-handheld-stacked.mch-hide-toprow-handheld .mch-spot::before {
display: none !important;
}
.mch-handheld-stacked.mch-hide-toprow-handheld .mch-spot[data-mch-handheld-label="show"]:not([data-mch-label=""])::before {
display: block !important;
}
.mch-handheld-stacked .mch-spot[data-mch-handheld-label="hide"]::before {
display: none !important;
}
.mch-handheld-stacked .mch-badgeimg {
margin: 0 auto 8px;
}
.mch-handheld-stacked .mch-claim {
width: 100%;
margin-top: 8px;
}
}
.mch-comparison-outer {
container-type: inline-size;
}
.mch-comparison-outer > .mch-comparison {
margin-top: 0;
margin-bottom: 0;
}
@container (max-width: 870px) and (min-width: 821px) {
.mch-deal {
font-size: max(15px, calc(var(--mch-deal-font-size) * 0.85));
}
}
@container (max-width: 845px) and (min-width: 821px) {
.mch-deal {
font-size: max(14px, calc(var(--mch-deal-font-size) * 0.7));
}
}
@container (max-width: 820px) {
.mch-comparison.mch-hide-toprow-handheld .mch-head {
display: none !important;
}
.mch-handheld-stacked {
display: block !important;
}
.mch-handheld-stacked .mch-head {
display: none !important;
}
.mch-handheld-stacked .mch-core {
display: block !important;
}
.mch-handheld-stacked .mch-rowline {
display: flex !important;
flex-direction: column;
padding: 16px;
margin-bottom: 12px;
border-radius: var(--mch-outer-round);
border: var(--mch-rowline-rim-widesize) solid var(--mch-rowline-rim-colour);
background: var(--mch-rowline-back, #ffffff);
}
.mch-handheld-stacked .mch-core .mch-rowline {
border-bottom: var(--mch-rowline-rim-widesize) solid var(--mch-rowline-rim-colour);
}
.mch-comparison.mch-handheld-stacked[data-mch-rowline-padding] .mch-core .mch-rowline {
padding: 16px;
}
.mch-comparison.mch-handheld-stacked .mch-core .mch-rowline:last-child {
border-bottom-width: var(--mch-rowline-rim-widesize) !important;
margin-bottom: 12px;
}
.mch-comparison.mch-handheld-stacked[data-mch-lead-opening="true"] .mch-rowline-lead {
background: var(--mch-lead-back);
}
.mch-comparison.mch-handheld-stacked[data-mch-lead-badge] {
padding-top: calc(var(--mch-padding-headtop, 0px) + 12px);
}
.mch-comparison.mch-handheld-stacked[data-mch-lead-opening="true"] .mch-core .mch-rowline-lead .mch-spot {
background: transparent;
}
.mch-comparison.mch-handheld-stacked[data-mch-rowline-num-pillar-back="true"] .mch-core .mch-rowline .mch-num-spot,
.mch-comparison.mch-handheld-stacked[data-mch-rowline-num-pillar-back="true"] .mch-core .mch-rowline:hover .mch-num-spot {
background: transparent;
}
.mch-comparison.mch-handheld-stacked[data-mch-rowline-num-pillar-back="true"][data-mch-rowline-num-unstyled="true"] .mch-core .mch-rowline-number {
background: var(--mch-rowline-num-spot-back);
}
.mch-handheld-stacked .mch-spot {
width: 100%;
padding: 8px 0;
flex-wrap: wrap;
justify-content: center !important;
text-align: center !important;
border-bottom: none !important;
}
.mch-handheld-stacked .mch-spot::before {
content: attr(data-mch-label);
display: block;
width: 100%;
font-weight: 600;
font-size: 12px;
color: var(--mch-paint);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.mch-handheld-stacked .mch-spot[data-mch-label=""]::before {
display: none;
}
.mch-handheld-stacked.mch-hide-toprow-handheld .mch-spot::before {
display: none !important;
}
.mch-handheld-stacked.mch-hide-toprow-handheld .mch-spot[data-mch-handheld-label="show"]:not([data-mch-label=""])::before {
display: block !important;
}
.mch-handheld-stacked .mch-spot[data-mch-handheld-label="hide"]::before {
display: none !important;
}
.mch-handheld-stacked .mch-badgeimg {
margin: 0 auto 8px;
}
.mch-handheld-stacked .mch-claim {
width: 100%;
margin-top: 8px;
}
}
@media (max-width: 480px) {
.mch-handheld-stacked .mch-rowline {
padding: 12px;
}
.mch-deal {
font-size: 14px;
}
.mch-claim {
padding: 12px 16px;
font-size: 13px;
}
}
@media (max-width: 781px) {
.wp-block-columns:not(.is-not-stacked-on-mobile):not(:has(h1)) > .wp-block-column:has(.mch-lead-brand-frame) {
order: -1;
}
}
.mch-lead-brand-frame {
width: 100%;
box-sizing: border-box;
}
.mch-lead-brand-frame-badge-wrap {
position: relative;
box-sizing: border-box;
}
.mch-lead-brand-frame-badge {
position: absolute;
top: 0;
left: 18px;
transform: translateY(-50%);
z-index: 2;
background: var(--mch-fsb-badge-back, var(--mch-ink));
color: var(--mch-fsb-badge-colour, #ffffff);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
line-height: 1;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 999px;
white-space: nowrap;
pointer-events: none;
}
.mch-lead-brand-frame-badge.is-center {
left: 50%;
transform: translate(-50%, -50%);
}
.mch-lead-brand-frame-badge.is-right {
left: auto;
right: 18px;
}
.mch-lead-brand-frame-columns {
display: grid;
width: 100%;
}
@media (max-width: 768px) {
.mch-lead-brand-frame:not([class*="is-stacked-below-"]) .mch-lead-brand-frame-columns {
grid-template-columns: 1fr !important;
}
.mch-lead-brand-frame:not([class*="is-stacked-below-"]) .mch-lead-brand-frame-columns.has-dividers > .mch-lead-brand-frame-pillar::before {
display: none;
}
.mch-lead-brand-frame:not([class*="is-stacked-below-"]) .mch-lead-brand-frame-columns:not(.is-side-by-side) .is-stacked-left,
.mch-lead-brand-frame:not([class*="is-stacked-below-"]) .mch-lead-brand-frame-columns:not(.is-side-by-side) .is-stacked-left * {
text-align: left !important;
justify-content: flex-start !important;
}
.mch-lead-brand-frame:not([class*="is-stacked-below-"]) .mch-lead-brand-frame-columns:not(.is-side-by-side) .is-stacked-center,
.mch-lead-brand-frame:not([class*="is-stacked-below-"]) .mch-lead-brand-frame-columns:not(.is-side-by-side) .is-stacked-center * {
text-align: center !important;
justify-content: center !important;
}
.mch-lead-brand-frame:not([class*="is-stacked-below-"]) .mch-lead-brand-frame-columns:not(.is-side-by-side) .is-stacked-right,
.mch-lead-brand-frame:not([class*="is-stacked-below-"]) .mch-lead-brand-frame-columns:not(.is-side-by-side) .is-stacked-right * {
text-align: right !important;
justify-content: flex-end !important;
}
.mch-lead-brand-frame-columns.is-side-by-side {
grid-template-columns: var(--mch-fsb-columns) !important;
}
.mch-lead-brand-frame-columns.is-side-by-side.has-dividers > .mch-lead-brand-frame-pillar + .mch-lead-brand-frame-pillar::before {
display: block;
}
}
.mch-lead-brand-frame-pillar {
display: flex;
flex-direction: column;
box-sizing: border-box;
min-width: 0;
}
.mch-lead-brand-frame-pillar .mch-badgeimg,
.mch-lead-brand-frame-pillar .mch-lead-visual,
.mch-lead-brand-frame-pillar .mch-lead-brand-frame-visual {
max-width: 100%;
}
.mch-lead-brand-frame-pillar .mch-badgeimg,
.mch-lead-brand-frame-pillar .mch-lead-visual,
.mch-lead-brand-frame-pillar .mch-lead-brand-frame-visual,
.mch-lead-brand-frame-pillar .mch-lead-brand-frame-visual img {
vertical-align: top;
}
.mch-lead-brand-frame-pillar .mch-badgeimg-photoimg,
.mch-lead-brand-frame-pillar .mch-badgeimg img {
max-width: min(var(--mch-badgeimg-upto-widesize), 100%);
}
.mch-lead-brand-frame-pillar img.mch-lead-visual,
.mch-lead-brand-frame-pillar .mch-lead-visual-photoimg {
max-width: min(var(--mch-lead-visual-upto-widesize), 100%);
}
.mch-lead-brand-frame-columns.is-middle > .mch-lead-brand-frame-pillar {
justify-content: center;
}
.mch-lead-brand-frame-columns.is-bottom > .mch-lead-brand-frame-pillar {
justify-content: flex-end;
}
.mch-lead-brand-frame-columns.has-dividers > .mch-lead-brand-frame-pillar {
position: relative;
}
.mch-lead-brand-frame-columns.has-dividers > .mch-lead-brand-frame-pillar + .mch-lead-brand-frame-pillar::before {
content: "";
position: absolute;
left: calc(var(--mch-fsb-spacing, 20px) / -2 - var(--mch-fsb-separator-widesize, 1px) / 2);
top: calc((100% - var(--mch-fsb-separator-height, 100%)) / 2);
height: var(--mch-fsb-separator-height, 100%);
border-left: var(--mch-fsb-separator-widesize, 1px) solid var(--mch-fsb-separator-colour, var(--mch-shade));
pointer-events: none;
}
.mch-lead-brand-frame-columns.has-dividers > .mch-lead-brand-frame-pillar.is-full-row::before,
.mch-lead-brand-frame-columns.has-dividers > .mch-lead-brand-frame-pillar.is-full-row + .mch-lead-brand-frame-pillar::before {
display: none;
}
.mch-lead-brand-frame-bits {
display: flex;
flex-direction: column;
}
.mch-lead-brand-frame-piece {
width: 100%;
}
.mch-lead-brand-frame-piece.has-side-margins:not(.is-sized):not(.is-floated) {
width: auto;
align-self: stretch;
}
.mch-lead-brand-frame.has-element-gap .mch-lead-brand-frame-piece:not(.is-floated) > :first-child,
.mch-lead-brand-frame.has-element-gap .mch-lead-brand-frame-piece:not(.is-floated) > :first-child > :first-child {
margin-top: 0 !important;
}
.mch-lead-brand-frame.has-element-gap .mch-lead-brand-frame-piece:not(.is-floated) > :last-child,
.mch-lead-brand-frame.has-element-gap .mch-lead-brand-frame-piece:not(.is-floated) > :last-child > :last-child {
margin-bottom: 0 !important;
}
.mch-lead-brand-frame-bits.is-wrapping {
display: block;
}
.mch-lead-brand-frame-bits.is-wrapping::after {
content: "";
display: block;
clear: both;
}
.mch-lead-brand-frame-piece.is-sized .mch-badgeimg,
.mch-lead-brand-frame-piece.is-sized .mch-lead-visual,
.mch-lead-brand-frame-piece.is-sized .mch-lead-brand-frame-visual,
.mch-lead-brand-frame-piece.is-sized .mch-lead-brand-frame-justify {
display: block;
width: 100%;
}
.mch-lead-brand-frame-piece.is-sized img {
width: 100%;
max-width: 100%;
height: auto;
}
.mch-lead-brand-frame-heading {
font-weight: 700;
margin: 0;
}
.mch-lead-brand-frame-pill {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
}
.mch-lead-brand-frame-label {
display: flex;
gap: 6px;
align-items: center;
}
.mch-lead-brand-frame-label-above {
flex-direction: column;
align-items: flex-start;
}
.mch-lead-brand-frame-label-left {
flex-direction: row;
align-items: center;
}
.mch-lead-brand-frame-label-below {
flex-direction: column;
align-items: flex-start;
}
.mch-lead-brand-frame-label-right {
flex-direction: row;
align-items: center;
}
.mch-lead-brand-frame-label-copytext {
font-weight: 600;
flex-shrink: 0;
}
.mch-lead-brand-frame-label > .mch-spot-stack,
.mch-lead-brand-frame-label-copytext > .mch-spot-stack {
width: auto;
}
.mch-lead-brand-frame-amountval {
display: inline-flex;
align-items: center;
}
.mch-lead-brand-frame-copy p {
margin: 0 0 8px;
}
.mch-lead-brand-frame-copy p:last-child {
margin-bottom: 0;
}
.mch-lead-brand-frame-points {
margin: 0;
padding-left: 18px;
}
.mch-lead-brand-frame-points li {
margin-bottom: 6px;
}
.mch-lead-brand-frame-points li:last-child {
margin-bottom: 0;
}
.mch-lead-brand-frame-points.is-check {
list-style: none;
padding-left: 0;
}
.mch-lead-brand-frame-points.is-check li {
display: flex;
align-items: baseline;
gap: var(--mch-lead-brand-frame-point-spacing, 0px);
}
.mch-lead-brand-frame-points.is-check .mch-lead-brand-frame-point-ruleline {
display: block;
flex-shrink: 0;
width: var(--mch-lead-brand-frame-point-marker-widesize, 22px);
position: relative;
top: calc(0.5ex - 0.5cap);
}
.mch-lead-brand-frame-points.is-check .mch-lead-brand-frame-point-ruleline::before {
content: "\200b";
}
.mch-lead-brand-frame-points.is-check .mch-lead-brand-frame-point-marker {
display: inline-block;
vertical-align: middle;
line-height: 1;
color: var(--mch-lead-brand-frame-checkmark-colour, var(--mch-base));
font-weight: 700;
font-size: var(--mch-lead-brand-frame-checkmark-size, 1em);
}
.mch-lead-brand-frame-points.is-check .mch-lead-brand-frame-point-marker.is-check-mark {
position: relative;
top: -0.025em;
}
.mch-lead-brand-frame-points.is-check .mch-lead-brand-frame-point-copytext {
min-width: 0;
}
.mch-lead-brand-frame-justify {
width: 100%;
}
.mch-lead-brand-frame .mch-claim,
.mch-lead-brand-frame .mch-moreinfo-claim {
display: flex;
margin-left: auto;
margin-right: auto;
}
[data-mch-rowline-num-form="circle"] .mch-rowline-number,
[data-mch-rowline-num-form="square"] .mch-rowline-number {
aspect-ratio: 1 / 1;
padding: var(--mch-rowline-num-padding-alt);
}
[data-mch-rowline-num-form="circle"] .mch-rowline-number {
border-radius: 50%;
}
.mch-positives-against {
display: grid;
gap: 16px;
margin-bottom: 24px;
box-sizing: border-box;
}
.mch-positives-against.mch-positives-against--columns {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.mch-positives-against .mch-positives-against-vcol {
--mch-pc-stress: var(--mch-base);
min-width: 0;
box-sizing: border-box;
}
.mch-positives-against.mch-positives-against--boxed .mch-positives-against-vcol {
background: #ffffff;
border: 1px solid var(--mch-shade);
border-top: 3px solid var(--mch-pc-stress);
border-radius: 8px;
padding: 16px 18px;
}
.mch-positives-against .mch-positives-against-heading {
margin: 0 0 10px;
padding: 0;
}
.mch-positives-against p.mch-positives-against-heading {
font-weight: 700;
}
.mch-positives-against .mch-positives-against-heading.has-icon {
display: flex;
align-items: center;
gap: 8px;
}
.mch-positives-against .mch-positives-against-heading-icon {
display: inline-flex;
align-items: center;
flex: none;
line-height: 1;
}
.mch-positives-against .mch-positives-against-heading-icon svg {
display: block;
vertical-align: 0 !important;
}
.mch-positives-against .mch-positives-against-ul {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.mch-positives-against .mch-positives-against-ul > li {
display: flex;
align-items: baseline;
gap: var(--mch-pc-icon-spacing, 8px);
margin: 0;
padding: 0;
list-style: none;
}
.mch-positives-against .mch-positives-against-ul > li::before,
.mch-positives-against .mch-positives-against-ul > li::marker {
content: none;
}
.mch-positives-against .mch-positives-against-icon {
flex-shrink: 0;
color: var(--mch-pc-stress);
font-weight: 700;
line-height: 1;
}
.mch-positives-against.mch-positives-against--icons-number .mch-positives-against-icon {
min-width: 1.2em;
font-variant-numeric: tabular-nums;
}
.mch-positives-against.mch-positives-against--icon-back .mch-positives-against-ul > li {
align-items: center;
}
.mch-positives-against.mch-positives-against--icon-back .mch-positives-against-icon {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1em;
min-height: 1em;
box-sizing: content-box;
text-align: center;
}
.mch-positives-against .mch-positives-against-icon-ruleline {
display: block;
flex-shrink: 0;
}
.mch-positives-against .mch-positives-against-icon-ruleline::before {
content: "\200b";
}
.mch-positives-against.mch-positives-against--centred-icons .mch-positives-against-icon {
display: inline-block;
vertical-align: middle;
}
.mch-positives-against.mch-positives-against--centred-icons .mch-positives-against-icon.is-check-mark {
position: relative;
top: -0.025em;
}
.mch-positives-against.mch-positives-against--centred-icons .mch-positives-against-icon.is-cross-mark {
position: relative;
top: -0.08em;
}
.mch-positives-against .mch-positives-against-copytext {
min-width: 0;
}
.mch-ask {
display: flex;
flex-direction: column;
gap: var(--mch-ask-spacing, 10px);
margin: 0 0 1.5em;
}
.mch-ask.mch-ask--columns {
display: grid;
grid-template-columns: repeat(var(--mch-ask-columns, 3), minmax(0, 1fr));
align-items: start;
}
.mch-ask-pillar {
display: flex;
flex-direction: column;
gap: var(--mch-ask-spacing, 10px);
min-width: 0;
}
@media (max-width: 767px) {
.mch-ask.mch-ask--columns {
grid-template-columns: minmax(0, 1fr);
}
}
.mch-ask-unititem {
border-style: solid;
border-width: var(--mch-ask-rim-widesize, 1px);
border-color: var(--mch-ask-rim-colour, var(--mch-shade));
border-radius: var(--mch-ask-round, 6px);
overflow: hidden;
background: var(--mch-ask-reply-back, transparent);
}
.mch-ask .mch-ask-question {
margin: 0;
padding: 0;
font-size: var(--mch-ask-qn-size, 1.1em);
font-weight: var(--mch-ask-qn-wt, 600);
line-height: 1.4;
}
.mch-ask .mch-ask-switcherbtn,
.mch-ask .mch-ask-switcherbtn:hover,
.mch-ask .mch-ask-switcherbtn:focus {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
margin: 0;
padding: var(--mch-ask-qn-padding, 14px 18px);
border: 0;
border-radius: 0;
background: var(--mch-ask-qn-back, transparent);
color: var(--mch-ask-qn-colour, inherit);
font: inherit;
letter-spacing: inherit;
text-align: left;
text-transform: none;
text-decoration: none;
box-shadow: none;
cursor: pointer;
}
.mch-ask--icon-left .mch-ask-switcherbtn,
.mch-ask--icon-left .mch-ask-switcherbtn:hover,
.mch-ask--icon-left .mch-ask-switcherbtn:focus {
justify-content: flex-start;
}
.mch-ask--icon-left .mch-ask-icon {
order: -1;
}
.mch-ask .mch-ask-switcherbtn[aria-expanded="true"] {
background: var(--mch-ask-qn-shown-back, var(--mch-ask-qn-back, transparent));
}
.mch-ask .mch-ask-switcherbtn:focus-visible {
outline: 2px solid currentColor;
outline-offset: -4px;
}
.mch-ask-icon {
display: flex;
flex: 0 0 auto;
align-items: center;
color: var(--mch-ask-icon-colour, currentColor);
}
.mch-ask-icon svg {
display: block;
}
.mch-ask-icon .mch-ask-icon-shown,
.mch-ask-switcherbtn[aria-expanded="true"] .mch-ask-icon .mch-ask-icon-collapsed {
display: none;
}
.mch-ask-switcherbtn[aria-expanded="true"] .mch-ask-icon .mch-ask-icon-shown {
display: block;
}
.mch-ask-resolve {
padding: var(--mch-ask-reply-padding, 14px 18px);
color: var(--mch-ask-reply-colour, inherit);
}
.mch-ask-resolve[hidden] {
padding: 0;
}
.mch-ask-resolve > :first-child {
margin-top: 0;
}
.mch-ask-resolve > :last-child {
margin-bottom: 0;
}
.mch-tabpanel {
--mch-tabpanel-d-spacing: 4px;
--mch-tabpanel-d-switch-padding: 9px 18px;
--mch-tabpanel-d-switch-round: 6px 6px 0 0;
--mch-tabpanel-d-switch-rim-widesize: 1px;
--mch-tabpanel-d-switch-rim-colour: var(--mch-shade);
--mch-tabpanel-d-switch-back: var(--mch-tone);
--mch-tabpanel-d-switch-colour: inherit;
--mch-tabpanel-d-active-back: #ffffff;
--mch-tabpanel-d-active-colour: inherit;
--mch-tabpanel-d-active-rim: var(--mch-shade);
--mch-tabpanel-d-sheetpanel-padding: 18px 21px;
--mch-tabpanel-d-sheetpanel-back: #ffffff;
--mch-tabpanel-d-sheetpanel-rim-widesize: 1px;
--mch-tabpanel-d-sheetpanel-rim-colour: var(--mch-shade);
--mch-tabpanel-d-sheetpanel-round: 0 6px 6px 6px;
margin: 0 0 1.5em;
}
.mch-tabpanel--pills {
--mch-tabpanel-d-spacing: 7px;
--mch-tabpanel-d-switch-round: 999px;
--mch-tabpanel-d-switch-rim-widesize: 0;
--mch-tabpanel-d-switch-rim-colour: transparent;
--mch-tabpanel-d-active-back: var(--mch-fill);
--mch-tabpanel-d-active-colour: #ffffff;
--mch-tabpanel-d-active-rim: transparent;
--mch-tabpanel-d-sheetpanel-padding: 14px 4px;
--mch-tabpanel-d-sheetpanel-back: transparent;
--mch-tabpanel-d-sheetpanel-rim-widesize: 0;
--mch-tabpanel-d-sheetpanel-round: 0;
}
.mch-tabpanel--lined {
--mch-tabpanel-d-spacing: 4px;
--mch-tabpanel-d-switch-padding: 9px 14px;
--mch-tabpanel-d-switch-round: 0;
--mch-tabpanel-d-switch-rim-widesize: 0 0 2px 0;
--mch-tabpanel-d-switch-rim-colour: transparent;
--mch-tabpanel-d-switch-back: transparent;
--mch-tabpanel-d-active-back: transparent;
--mch-tabpanel-d-active-colour: var(--mch-fill);
--mch-tabpanel-d-active-rim: var(--mch-fill);
--mch-tabpanel-d-sheetpanel-padding: 14px 4px;
--mch-tabpanel-d-sheetpanel-back: transparent;
--mch-tabpanel-d-sheetpanel-rim-widesize: 0;
--mch-tabpanel-d-sheetpanel-round: 0;
}
.mch-tabpanel--boxed {
--mch-tabpanel-d-spacing: 7px;
--mch-tabpanel-d-switch-round: 5px;
--mch-tabpanel-d-switch-back: #ffffff;
--mch-tabpanel-d-active-back: #ffffff;
--mch-tabpanel-d-active-colour: var(--mch-fill);
--mch-tabpanel-d-active-rim: var(--mch-fill);
--mch-tabpanel-d-sheetpanel-round: 5px;
}
.mch-tabpanel--index.mch-tabpanel--upright {
--mch-tabpanel-d-switch-round: 6px 0 0 6px;
--mch-tabpanel-d-sheetpanel-round: 0 6px 6px 6px;
}
.mch-tabpanel--index.mch-tabpanel--upright.mch-tabpanel--right {
--mch-tabpanel-d-switch-round: 0 6px 6px 0;
--mch-tabpanel-d-sheetpanel-round: 6px 0 6px 6px;
}
.mch-tabpanel--lined.mch-tabpanel--upright {
--mch-tabpanel-d-switch-rim-widesize: 0 2px 0 0;
--mch-tabpanel-d-sheetpanel-padding: 4px 4px 4px 18px;
}
.mch-tabpanel--lined.mch-tabpanel--upright.mch-tabpanel--right {
--mch-tabpanel-d-switch-rim-widesize: 0 0 0 2px;
--mch-tabpanel-d-sheetpanel-padding: 4px 18px 4px 4px;
}
.mch-tabpanel--pills.mch-tabpanel--upright {
--mch-tabpanel-d-sheetpanel-padding: 4px 4px 4px 18px;
}
.mch-tabpanel--pills.mch-tabpanel--upright.mch-tabpanel--right {
--mch-tabpanel-d-sheetpanel-padding: 4px 18px 4px 4px;
}
.mch-tabpanel-ul {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: var(--mch-tabpanel-spacing, var(--mch-tabpanel-d-spacing));
margin: 0;
padding: 0;
}
.mch-tabpanel--justify-centre .mch-tabpanel-ul {
justify-content: center;
}
.mch-tabpanel--justify-right .mch-tabpanel-ul {
justify-content: flex-end;
}
.mch-tabpanel--justify-widefit .mch-tabpanel-ul .mch-tabpanel-switch {
flex: 1 1 0;
justify-content: center;
}
.mch-tabpanel--lined .mch-tabpanel-ul {
box-shadow: inset 0 -1px 0 var(--mch-tabpanel-sheetpanel-rim-colour, var(--mch-shade));
}
.mch-tabpanel .mch-tabpanel-switch,
.mch-tabpanel .mch-tabpanel-switch:hover,
.mch-tabpanel .mch-tabpanel-switch:focus,
.mch-tabpanel .mch-tabpanel-head,
.mch-tabpanel .mch-tabpanel-head:hover,
.mch-tabpanel .mch-tabpanel-head:focus {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: var(--mch-tabpanel-switch-padding, var(--mch-tabpanel-d-switch-padding));
border-style: solid;
border-width: var(--mch-tabpanel-switch-rim-widesize, var(--mch-tabpanel-d-switch-rim-widesize));
border-color: var(--mch-tabpanel-switch-rim-colour, var(--mch-tabpanel-d-switch-rim-colour));
border-radius: var(--mch-tabpanel-switch-round, var(--mch-tabpanel-d-switch-round));
background: var(--mch-tabpanel-switch-back, var(--mch-tabpanel-d-switch-back));
color: var(--mch-tabpanel-switch-colour, var(--mch-tabpanel-d-switch-colour));
font: inherit;
font-size: var(--mch-tabpanel-switch-size, 1em);
font-weight: var(--mch-tabpanel-switch-wt, 500);
line-height: 1.3;
letter-spacing: inherit;
text-align: left;
text-transform: none;
text-decoration: none;
box-shadow: none;
cursor: pointer;
}
.mch-tabpanel .mch-tabpanel-switch:hover,
.mch-tabpanel .mch-tabpanel-head:hover {
background: var(--mch-tabpanel-pointer-back, var(--mch-tabpanel-switch-back, var(--mch-tabpanel-d-switch-back)));
color: var(--mch-tabpanel-pointer-colour, var(--mch-tabpanel-switch-colour, var(--mch-tabpanel-d-switch-colour)));
}
.mch-tabpanel .mch-tabpanel-switch[aria-selected="true"],
.mch-tabpanel .mch-tabpanel-head[aria-expanded="true"] {
border-color: var(--mch-tabpanel-active-rim, var(--mch-tabpanel-d-active-rim));
background: var(--mch-tabpanel-active-back, var(--mch-tabpanel-d-active-back));
color: var(--mch-tabpanel-active-colour, var(--mch-tabpanel-d-active-colour));
}
.mch-tabpanel .mch-tabpanel-switch[aria-selected="true"],
.mch-tabpanel .mch-tabpanel-head[aria-expanded="true"] {
box-shadow: inset 0 var(--mch-tabpanel-active-ruleline-widesize, 4px) 0 var(--mch-tabpanel-active-ruleline, transparent);
}
.mch-tabpanel--upright:not(.mch-tabpanel--right) .mch-tabpanel-switch[aria-selected="true"] {
box-shadow: inset var(--mch-tabpanel-active-ruleline-widesize, 4px) 0 0 var(--mch-tabpanel-active-ruleline, transparent);
}
.mch-tabpanel--upright.mch-tabpanel--right .mch-tabpanel-switch[aria-selected="true"] {
box-shadow: inset calc(-1 * var(--mch-tabpanel-active-ruleline-widesize, 4px)) 0 0 var(--mch-tabpanel-active-ruleline, transparent);
}
.mch-tabpanel .mch-tabpanel-switch:focus-visible,
.mch-tabpanel .mch-tabpanel-head:focus-visible {
outline: 2px solid currentColor;
outline-offset: -4px;
}
.mch-tabpanel .mch-tabpanel-switch:focus:not(:focus-visible),
.mch-tabpanel .mch-tabpanel-head:focus:not(:focus-visible) {
outline: none;
}
.mch-tabpanel--index:not(.mch-tabpanel--upright) .mch-tabpanel-switch[aria-selected="true"] {
margin-bottom: calc(-1 * var(--mch-tabpanel-sheetpanel-rim-widesize, 1px));
border-bottom-color: var(--mch-tabpanel-active-back, var(--mch-tabpanel-d-active-back));
}
.mch-tabpanel--index.mch-tabpanel--upright:not(.mch-tabpanel--right) .mch-tabpanel-switch[aria-selected="true"] {
margin-right: calc(-1 * var(--mch-tabpanel-sheetpanel-rim-widesize, 1px));
border-right-color: var(--mch-tabpanel-active-back, var(--mch-tabpanel-d-active-back));
}
.mch-tabpanel--index.mch-tabpanel--upright.mch-tabpanel--right .mch-tabpanel-switch[aria-selected="true"] {
margin-left: calc(-1 * var(--mch-tabpanel-sheetpanel-rim-widesize, 1px));
border-left-color: var(--mch-tabpanel-active-back, var(--mch-tabpanel-d-active-back));
}
.mch-tabpanel-icon {
display: inline-flex;
flex: 0 0 auto;
}
.mch-tabpanel-icon svg {
display: block;
}
.mch-tabpanel .mch-tabpanel-visual {
display: block;
flex: 0 0 auto;
width: var(--mch-tabpanel-icon-size, 2.5em);
max-width: none;
height: auto;
margin: 0;
}
.mch-tabpanel-copytext {
display: block;
margin-top: 2px;
font-size: 0.8em;
font-weight: 400;
color: var(--mch-tabpanel-copytext-colour, inherit);
}
.mch-tabpanel--icon-above .mch-tabpanel-switch {
flex-direction: column;
gap: 6px;
}
.mch-tabpanel--icon-above .mch-tabpanel-switch .mch-tabpanel-label {
text-align: center;
}
.mch-tabpanel--boxed:not(.mch-tabpanel--upright) .mch-tabpanel-sections,
.mch-tabpanel--pills:not(.mch-tabpanel--upright) .mch-tabpanel-sections {
margin-top: var(--mch-tabpanel-spacing, var(--mch-tabpanel-d-spacing));
}
.mch-tabpanel-sheetpanel {
padding: var(--mch-tabpanel-sheetpanel-padding, var(--mch-tabpanel-d-sheetpanel-padding));
border-style: solid;
border-width: var(--mch-tabpanel-sheetpanel-rim-widesize, var(--mch-tabpanel-d-sheetpanel-rim-widesize));
border-color: var(--mch-tabpanel-sheetpanel-rim-colour, var(--mch-tabpanel-d-sheetpanel-rim-colour));
border-radius: var(--mch-tabpanel-sheetpanel-round, var(--mch-tabpanel-d-sheetpanel-round));
background: var(--mch-tabpanel-sheetpanel-back, var(--mch-tabpanel-d-sheetpanel-back));
color: var(--mch-tabpanel-sheetpanel-colour, inherit);
}
.mch-tabpanel .mch-tabpanel-sheetpanel[hidden] {
padding: 0;
border-width: 0;
}
.mch-tabpanel-sheetpanel > :first-child {
margin-top: 0;
}
.mch-tabpanel-sheetpanel > :last-child {
margin-bottom: 0;
}
.mch-tabpanel .mch-tabpanel-head {
display: none;
}
.mch-tabpanel--upright {
display: flex;
align-items: flex-start;
}
.mch-tabpanel--upright.mch-tabpanel--right {
flex-direction: row-reverse;
}
.mch-tabpanel--upright .mch-tabpanel-ul {
flex: 0 0 var(--mch-tabpanel-ul-widesize, 220px);
flex-direction: column;
flex-wrap: nowrap;
max-width: 40%;
}
.mch-tabpanel--upright .mch-tabpanel-ul .mch-tabpanel-switch {
width: 100%;
}
.mch-tabpanel--upright .mch-tabpanel-sections {
flex: 1 1 auto;
min-width: 0;
}
.mch-tabpanel--lined.mch-tabpanel--upright .mch-tabpanel-ul {
box-shadow: inset -1px 0 0 var(--mch-tabpanel-sheetpanel-rim-colour, var(--mch-shade));
}
.mch-tabpanel--lined.mch-tabpanel--upright.mch-tabpanel--right .mch-tabpanel-ul {
box-shadow: inset 1px 0 0 var(--mch-tabpanel-sheetpanel-rim-colour, var(--mch-shade));
}
.mch-tabpanel--boxed.mch-tabpanel--upright .mch-tabpanel-ul,
.mch-tabpanel--pills.mch-tabpanel--upright .mch-tabpanel-ul {
margin-right: var(--mch-tabpanel-spacing, var(--mch-tabpanel-d-spacing));
}
.mch-tabpanel--boxed.mch-tabpanel--upright.mch-tabpanel--right .mch-tabpanel-ul,
.mch-tabpanel--pills.mch-tabpanel--upright.mch-tabpanel--right .mch-tabpanel-ul {
margin-right: 0;
margin-left: var(--mch-tabpanel-spacing, var(--mch-tabpanel-d-spacing));
}
.mch-tabpanel-chevron {
display: none;
}
@media (max-width: 767px) {
.mch-tabpanel--upright {
display: block;
}
.mch-tabpanel .mch-tabpanel-ul {
display: none;
}
.mch-tabpanel-sections {
display: flex;
flex-direction: column;
gap: 8px;
}
.mch-tabpanel .mch-tabpanel-head,
.mch-tabpanel .mch-tabpanel-head:hover,
.mch-tabpanel .mch-tabpanel-head:focus {
display: flex;
width: 100%;
border-width: 1px;
border-color: var(--mch-tabpanel-sheetpanel-rim-colour, var(--mch-shade));
border-radius: 6px;
}
.mch-tabpanel .mch-tabpanel-head[aria-expanded="true"] {
border-radius: 6px 6px 0 0;
}
.mch-tabpanel-chevron {
display: inline-flex;
margin-left: auto;
}
.mch-tabpanel-head[aria-expanded="true"] .mch-tabpanel-chevron {
transform: rotate(180deg);
}
.mch-tabpanel .mch-tabpanel-sheetpanel {
margin-top: -1px;
padding: var(--mch-tabpanel-sheetpanel-padding-handheld, var(--mch-tabpanel-sheetpanel-padding, 16px 18px));
border-width: 1px;
border-color: var(--mch-tabpanel-sheetpanel-rim-colour, var(--mch-shade));
border-radius: 0 0 6px 6px;
}
.mch-tabpanel--boxed:not(.mch-tabpanel--upright) .mch-tabpanel-sections,
.mch-tabpanel--pills:not(.mch-tabpanel--upright) .mch-tabpanel-sections {
margin-top: 0;
}
}
.mch-jumpmenu {
box-sizing: border-box;
margin: var(--mch-jumpmenu-outerspace-headtop, 0) 0 var(--mch-jumpmenu-outerspace-btm, 1.5em);
border-style: solid;
border-width: var(--mch-jumpmenu-rim-widesize, 1px);
border-color: var(--mch-jumpmenu-rim-colour, var(--mch-shade));
border-radius: var(--mch-jumpmenu-round, 6px);
background: var(--mch-jumpmenu-frame-back, transparent);
overflow: hidden;
}
.mch-jumpmenu .mch-jumpmenu-headlinetext {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0;
padding: var(--mch-jumpmenu-headlinetext-padding, 14px 18px);
background: var(--mch-jumpmenu-headlinetext-back, transparent);
color: var(--mch-jumpmenu-headlinetext-colour, inherit);
font-size: var(--mch-jumpmenu-headlinetext-size, 1.1em);
font-weight: var(--mch-jumpmenu-headlinetext-wt, 600);
line-height: 1.4;
list-style: none;
cursor: pointer;
}
.mch-jumpmenu .mch-jumpmenu-headlinetext::-webkit-details-marker {
display: none;
}
.mch-jumpmenu .mch-jumpmenu-headlinetext::marker {
content: "";
}
.mch-jumpmenu .mch-jumpmenu-headlinetext:focus-visible {
outline: 2px solid currentColor;
outline-offset: -4px;
}
.mch-jumpmenu--icon-left .mch-jumpmenu-headlinetext {
justify-content: flex-start;
}
.mch-jumpmenu--icon-left .mch-jumpmenu-icon {
order: -1;
}
.mch-jumpmenu-icon {
display: flex;
flex: 0 0 auto;
align-items: center;
color: var(--mch-jumpmenu-icon-colour, currentColor);
}
.mch-jumpmenu-icon svg {
display: block;
}
.mch-jumpmenu-icon .mch-jumpmenu-icon-shown,
.mch-jumpmenu[open] .mch-jumpmenu-icon .mch-jumpmenu-icon-collapsed {
display: none;
}
.mch-jumpmenu[open] .mch-jumpmenu-icon .mch-jumpmenu-icon-shown {
display: block;
}
.mch-jumpmenu .mch-jumpmenu-core {
padding: var(--mch-jumpmenu-ul-padding, 4px 18px 16px);
font-size: var(--mch-jumpmenu-ul-size, inherit);
}
.mch-jumpmenu .mch-jumpmenu-ul {
margin: 0;
padding: 0 0 0 1.4em;
}
.mch-jumpmenu .mch-jumpmenu-ul .mch-jumpmenu-ul {
margin-top: var(--mch-jumpmenu-unititem-spacing, 6px);
}
.mch-jumpmenu .mch-jumpmenu-unititem {
margin: var(--mch-jumpmenu-unititem-spacing, 6px) 0 0;
line-height: 1.5;
}
.mch-jumpmenu .mch-jumpmenu-ul > .mch-jumpmenu-unititem:first-child {
margin-top: 0;
}
.mch-jumpmenu--points .mch-jumpmenu-ul {
list-style: disc;
}
.mch-jumpmenu--points .mch-jumpmenu-ul .mch-jumpmenu-ul {
list-style: circle;
}
.mch-jumpmenu--numbered .mch-jumpmenu-ul {
list-style: decimal;
}
.mch-jumpmenu--sub-numbered .mch-jumpmenu-ul {
list-style: none;
padding-left: 0;
counter-reset: toc-item;
}
.mch-jumpmenu--sub-numbered .mch-jumpmenu-ul .mch-jumpmenu-ul {
padding-left: 1.4em;
}
.mch-jumpmenu--sub-numbered .mch-jumpmenu-unititem {
counter-increment: toc-item;
}
.mch-jumpmenu--sub-numbered .mch-jumpmenu-unititem::before {
content: counters(toc-item, ".") ". ";
}
.mch-jumpmenu--nomark .mch-jumpmenu-ul {
list-style: none;
padding-left: 0;
}
.mch-jumpmenu--nomark .mch-jumpmenu-ul .mch-jumpmenu-ul {
padding-left: 1.2em;
}
.mch-jumpmenu--anchor-colour .mch-jumpmenu-unititem a {
color: var(--mch-jumpmenu-anchor-colour);
}
.mch-jumpmenu--anchor-pointer .mch-jumpmenu-unititem a:hover,
.mch-jumpmenu--anchor-pointer .mch-jumpmenu-unititem a:focus {
color: var(--mch-jumpmenu-anchor-pointer);
}
.mch-pill-ul {
display: flex;
flex-wrap: wrap;
gap: var(--mch-pill-spacing, 6px);
line-height: 1.4;
}
.mch-pill {
display: inline-block;
background: var(--mch-pill-back, var(--mch-tone));
color: var(--mch-pill-copytext, inherit);
font-size: var(--mch-pill-size, 13px);
font-weight: var(--mch-pill-wt, 600);
border-radius: var(--mch-pill-round, 999px);
padding: var(--mch-pill-padding, 4px 12px);
border: var(--mch-pill-rim-widesize, 0) solid var(--mch-pill-rim-colour, transparent);
white-space: nowrap;
}
.mch-spot[style*="text-align: center"] .mch-pill-ul {
justify-content: center;
}
.mch-spot[style*="text-align: right"] .mch-pill-ul {
justify-content: flex-end;
}
.mch-pill-readmore .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}