<!---->
<!--/* This is where the email-specific AMPScript is inserted */-->
<!---->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<!--[if gte mso 9]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <![endif]-->
<title></title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="telephone=no" name="format-detection" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- DARK MODE META TAGS -->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style type="text/css">
.blockhide {display:none!important;}
</style>
<!--[if !mso]><!-->
<style type="text/css">
@media screen {
@font-face { font-family:'mns-london'; font-style:normal; font-weight:normal;
src:local('MnsLondon-Semibold'), url(https://www.marksandspencer.com/hp/assets/fonts/MnsLondon-Semibold-d9857631585e012f59e1161a8ffae314.woff2) format('woff2'); }
@font-face { font-family:'mns-london'; font-style:normal; font-weight:bold;
src:local('MnsLondon-Demibold'), url(https://www.marksandspencer.com/hp/assets/fonts/MnsLondon-Demibold-54e3b2892e5dc6f35624799614aa2b2c.woff2) format('woff2'); }
@font-face {
font-family:'MSLondoneText-Regular';
src:local('MSLondoneText-Regular'), url(https://int-asset1.cxnmarksandspencer.com/assets/fonts/mns-london-text/MSLondoneText-Regular.woff) format('woff');
}
@font-face {
font-family:'MSLondoneText-Semibold';
src:local('MSLondoneText-Semibold'), url(https://int-asset1.cxnmarksandspencer.com/assets/fonts/mns-london-text/MSLondoneText-Semibold.woff) format('woff');
}
@font-face {
font-family:'MSLondoneText-Demibold';
src:local('MSLondoneText-Demibold'), url(https://int-asset1.cxnmarksandspencer.com/assets/fonts/mns-london-text/MSLondoneText-Demibold.woff) format('woff');
}
@font-face {
font-family:'MSLeeds-Light';
src:local('MSLeeds-Light'), url(https://int-asset1.marksandspencer.com/75.1/res/common/assets/fonts/MandSLeedsW03Light.woff) format("woff");
}
@font-face{
font-family:mnsLondonBold; font-weight:bold;
src:url(https://static.marksandspencer.com/fonts/mnsLondon/mnsLondonBold.woff2) format('woff2');font-display:swap;
}
.webfont {font-family:'mns-london',Helvetica,Arial,sans-serif !important;}
.webfont-bold, .webfont strong {font-family:'mnsLondonBold',Helvetica,Arial,sans-serif !important;}
}
</style>
<!--<![endif]-->
<!-- Load live CSS -->
<style type="text/css">
/*////// RESET STYLES //////*/
body {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
} /* ADD line-height:100% !important; */
body, table, td, th, font {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table, td, th {
border-collapse: collapse !important;
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
img {
display: block;
border: 0;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a, span {
color: inherit; /*-webkit-font-smoothing:antialiased;*/
}
a {
text-decoration: none;
}
div[style*="margin:16px 0;"] {
margin: 0 !important;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
#MessageWebViewDiv, #MessageWebViewDiv .xz {
width: 100% !important
}
/*////// HIDE/SHOW OVERRIDES //////*/
.desktop_h {
width: 0;
max-height: 0;
display: none;
overflow: hidden;
font-size: 0;
line-height: 0;
padding: 0;
margin: 0;
mso-hide: all;
}
.tdhide {
display: none !important;
}
</style>
<style>
/* SPARKS TRANSITIONS */
@media only screen and (-webkit-min-device-pixel-ratio:1), (min--moz-device-pixel-ratio:1) {
.btn, .btn2, .btn3 {
transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-webkit-transition: .25s ease-in-out;
}
.btn:hover {
background-color: #163e35 !important;
color: #ffffff !important;
}
.btn2:hover {
background-color: #dae9de !important;
color: #163e35 !important;
}
.btn3:hover {
background-color: #22d081 !important;
color: #163e35 !important;
}
.zoom {
overflow: hidden;
}
.zoom img {
transition: transform .8s ease;
-webkit-animation-name: zoom;
-webkit-animation-duration: 2s;
}
.zoom:hover img {
transform: scale(1.15);
}
}
</style>
<style>
/*////// MOBILE STYLES //////*/
@media only screen and (max-width:600px) {
/* STRUCTURE OVERRIDES */
.wrapper {
width: 100% !important;
min-width: 100% !important;
}
.bg_cover {
background-size: cover !important;
}
.bg_contain {
background-size: contain !important;
}
.responsive-td {
width: 100% !important;
float: left !important;
padding: 0 !important;
}
/* RESPONSIVE OVERRIDES */
.display_block, .display_caption, .display_head, .display_foot, .display_row {
width: 100% !important;
}
.display_block {
display: block !important;
float: left !important;
}
.display_caption {
display: table-caption !important;
}
.display_head {
display: table-header-group !important;
}
.display_foot {
display: table-footer-group !important;
}
.display_row {
display: table-row !important;
}
.display_none {
display: none !important;
}
.desktop_h {
width: auto !important;
max-height: inherit !important;
display: block !important;
overflow: visible !important;
margin: 0 !important;
padding: 0 !important;
}
.tdhide {
display: table-cell !important;
}
/* SPACING OVERRIDES */
.pad_none {
padding: 0 !important;
}
.pad_top {
padding-top: 12px !important;
}
.pad_bottom {
padding-bottom: 12px !important;
}
.pad_top_hide {
padding-top: 0px !important;
}
.pad_bottom_hide {
padding-bottom: 0px !important;
}
.pad_vert_hide {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.pad_horz_hide {
padding-right: 0px !important;
padding-left: 0px !important;
}
.padt36 {
padding-top: 36px !important;
}
.padt24 {
padding-top: 24px !important;
}
.padt12 {
padding-top: 12px !important;
}
.padb36 {
padding-bottom: 36px !important;
}
.padb24 {
padding-bottom: 24px !important;
}
.padb5 {
padding-bottom: 5px !important;
}
.padr4 {
padding-right: 4px !important;
}
.padr5 {
padding-right: 5px !important;
}
.padr6 {
padding-right: 6px !important;
}
.padr8 {
padding-right: 8px !important;
}
.padl4 {
padding-left: 4px !important;
}
.padl5 {
padding-left: 5px !important;
}
.padl6 {
padding-left: 6px !important;
}
.padl8 {
padding-left: 8px !important;
}
.padl12 {
padding-left: 12px !important;
}
.padlr20 {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
</style>
<style>
@media only screen and (max-width:600px) {
/* TEXT OVERRIDES */
.text_right {
text-align: right !important;
}
.text_center {
text-align: center !important;
}
.text_left {
text-align: left !important;
}
/* COMPONENT OVERRIDES */
.comp_h0 {
font-size: 60px !important;
}
.comp_h1 {
font-size: 60px !important;
}
.comp_h2 {
font-size: 35px !important;
}
.comp_h3 {
font-size: 25px !important;
}
.comp_h4 {
font-size: 20px !important;
}
.comp_p, .comp_txtlink, .comp_btn, .comp_img {
font-size: 14px !important;
}
.comp_cap {
font-size: 10px !important;
}
/* SPARKS OVERRIDES */
.font_30 {
font-size: 30px !important;
line-height: 34px!important;
}
.font_26 {
font-size: 26px !important;
line-height: 30px!important;
}
.font_18 {
font-size: 18px !important;
line-height: 22px!important;
}
.font_16 {
font-size: 16px !important;
line-height: 20px!important;
}
.font_14 {
font-size: 14px !important;
line-height: 18px!important;
}
/* IMAGE OVERRIDES */
.image_100 {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
.image_75 {
max-width: 75% !important;
width: 75% !important;
height: auto !important;
}
.image_50 {
max-width: 50% !important;
width: 50% !important;
height: auto !important;
}
.image_49 {
max-width: 49% !important;
width: 49% !important;
height: auto !important;
}
.image_25 {
max-width: 25% !important;
width: 25% !important;
height: auto !important;
}
/* WIDTH OVERRIDES */
.width_auto {
width: auto !important;
height: auto !important;
}
.width_100 {
width: 100% !important;
height: auto !important;
}
.width_95 {
width: 95% !important;
height: auto !important;
}
.width_90 {
width: 90% !important;
height: auto !important;
}
.width_75 {
width: 75% !important;
height: auto !important;
}
.width_50 {
width: 50% !important;
height: auto !important;
}
.width_48 {
width: 48.5% !important;
height: auto !important;
}
.width_47 {
width: 47% !important;
height: auto !important;
}
.width_30 {
width: 30% !important;
height: auto !important;
}
.width_25 {
width: 25% !important;
height: auto !important;
}
.width_20 {
width: 20% !important;
height: auto !important;
}
.width_10 {
width: 10% !important;
height: auto !important;
}
.width_6 {
width: 6% !important;
height: auto !important;
}
.width_5 {
width: 5% !important;
height: auto !important;
}
.gutter {
width: 3% !important;
height: auto !important;
}
/* HEIGHT OVERRIDES */
.height_auto {
height: auto !important;
line-height: inherit !important;
}
.height_40 {
height: 40px !important;
line-height: 40px !important;
}
.height_20 {
height: 20px !important;
line-height: 20px !important;
}
.height_10 {
height: 10px !important;
line-height: 10px !important;
}
.height_0 {
height: 0px !important;
line-height: 0px !important;
}
}
</style>
<style>
/* CUSTOM OVERRIDES */
@media only screen and (max-width:600px) {
/* Temp CSS to make post-CPS header/footer work */
.MainTable {
width: 100%!important;
min-width: 320px!important
}
.m-hide, .m-hide * {
display: none!important;
height: 0!important;
width: 0!important;
visibility: hidden!important;
line-height: 0!important;
font-size: 0!important
}
.m-show {
display: block!important;
max-height: inherit!important;
max-width: inherit!important;
visibility: visible!important;
overflow: visible!important
}
.block, .drop, .drop table, .drop tbody, .drop tr {
float: none!important;
width: 100%!important;
padding: 0!important;
display: block!important
}
.width-100 {
width: 100%!important;
height: auto!important
}
.width-90 {
width: 90%!important;
height: auto!important
}
.width-80 {
width: 80%!important;
height: auto!important
}
.width-70 {
width: 70%!important;
height: auto!important
}
.width-61 {
width: 61%!important;
height: auto!important
}
.width-60 {
width: 60%!important;
height: auto!important
}
.width-50 {
width: 50%!important;
height: auto!important
}
.width-40 {
width: 40%!important;
height: auto!important
}
.width-30 {
width: 30%!important;
height: auto!important
}
.width-25 {
width: 25%!important;
height: auto!important
}
.width-20 {
width: 20%!important;
height: auto!important
}
.width-10 {
width: 10% !important;
height: auto !important;
}
.width-5 {
width: 5% !important;
height: auto !important;
}
.width-0 {
width: 0!important;
height: auto!important
}
.width-auto {
width: auto!important
}
.height-auto {
height: auto!important
}
.mns-component-p, .mns-component-btn, .mns-component-img {
font-size: 12px !important;
line-height: 100% !important;
}
.mns-component-txtlink {
font-size: 14px !important;
line-height: 100% !important;
}
.mns-component-cap {
font-size: 10px !important;
}
.bg-link-img-square-trig {
width: 38vw !important;
height: 25vw !important;
}
.bg-link-img-square {
width: 38vw !important;
height: 30vw !important;
}
.bg-link-img-portrait {
width: 38vw !important;
height: 47vw !important;
}
.bg-img-scale {
height: 48vw !important;
}
}
/* Force M&S brand font in form elements */
div.sc-box-sizing span.ie-label legend span.sc-box-sizing.ie-b-label-box, div.sc-box-sizing p, /**[style*="Arial"],*/
*[style*="MSLondoneText-Regular"], *[style*="MSLondoneText-Regular"] form, *[style*="MSLondoneText-Regular"] label {
font-family: 'MSLondoneText-Regular', Arial, sans-serif !important;
}
</style>
<style></style>
<style>
@media screen and (-webkit-min-device-pixel-ratio: 0), @supports (-webkit-overflowidth_scrolling:touch) and (aspect-ratio: 1 / 1) {
.fallback {
display: none !important;
}
#check:checked + .fallback {
display: none !important;
}
#check:checked + #hamburger-wrapper {
display: block !important;
max-height: none !important;
position: relative;
overflow: visible !important;
}
.checkmark {
display: none;
opacity: 0;
max-height: 0;
visibility: hidden;
}
.hamburger-menu {
position: relative;
width: 600px;
padding: 20px 0 5px;
}
.navbar {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: 0 20px;
}
.expanded-menu {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 80%;
padding: 10% 10% 10%;
position: absolute;
top: 0;
left: 0;
transform: translateY(-100%);
visibility: hidden;
z-index: 99;
}
.menu-black {
background-color: rgba(0, 0, 0, 0.75);
}
.menu-white {
background-color: #ffffff;
}
.menu-link {
padding-bottom:20px;
}
.menu-link a {
font-family: 'mns-london', 'MSLondoneText-Semibold', Helvetica, Arial, sans-serif;
font-size: 20px;
line-height: 125%;
font-weight: normal;
text-transform: uppercase;
text-decoration: underline;
}
.menu-black .menu-link a {
color: #ffffff;
}
.menu-white .menu-link a {
color: #000000;
}
.menu-black .menu-close .close {
color: #ffffff;
}
.menu-white .menu-close .close {
color: #000000;
}
/* Navigation arrows */
.menu-close {
position: relative;
width: 50px;
height: 50px;
}
.hamburger-icon {
position: absolute;
width: 50px;
height: 50px;
top: 20px;
left: 20px;
}
.menu, .close {
display: block;
z-index: 100;
width: 50px;
height: 100%;
cursor: pointer;
}
.menu::after, .close::after {
content: '';
width: 44px;
height: 44px;
position: absolute;
top: 3px;
left: 3px;
}
.menu::after {
background: no-repeat top center/100% url("https://image.news.marksandspencer.com/lib/fe9915737567017474/m/1/55dff19d-539d-4aba-9577-8882dc39b2ec.png");
}
.close::after {
content: "2715";
font-size: 40px !important;
color: currentColor;
}
/* Hamburger Controls */
#open-hamburger:checked ~ .navbar .expanded-menu {
animation: slideDown 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1 forwards;
}
#close-hamburger:checked ~ .navbar .expanded-menu {
animation: slideUp 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1 forwards;
}
/* PROOF ONLY - Hamburger Controls */
#open-hamburger1:checked ~ .navbar .expanded-menu {
animation: slideDown 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1 forwards;
}
#close-hamburger1:checked ~ .navbar .expanded-menu {
animation: slideUp 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1 forwards;
}
#open-hamburger2:checked ~ .navbar .expanded-menu {
animation: slideDown 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1 forwards;
}
#close-hamburger2:checked ~ .navbar .expanded-menu {
animation: slideUp 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1 forwards;
}
@keyframes slideDown {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
visibility: visible;
}
}
@keyframes slideUp {
0% {
transform: translateY(0%);
visibility: visible;
}
100% {
transform: translateY(-100%);
visibility: hidden;
}
}
@media screen and (max-width: 600px) {
.navbar {
justify-content: center;
}
.hamburger-menu {
width: 100vw !important;
}
.expanded-menu {
width: 80vw !important;
height: 650% !important;
padding: 20% 10% 10% !important;
}
}
@media screen and (max-width: 390px) {
.expanded-menu {
height: 600% !important;
}
}
@media screen and (max-width: 340px) {
.expanded-menu {
height: 550% !important;
}
}
}
</style>
<style>
/* Target - Samsung */
#MessageViewBody #check:checked + .fallback {
display: block !important;
max-height: none !important;
position: relative;
overflow: visible !important;
}
#MessageViewBody #check:checked + #hamburger-wrapper {
display: none !important;
}
</style>
<style>
body[data-outlook-cycle] .fallback, body[data-outlook-cycle] #check:checked + .fallback {
display: block !important;
max-height: none !important;
position: relative;
}
body[data-outlook-cycle] .interactive, body[data-outlook-cycle] #check:checked + #hamburger-wrapper {
display: none !important;
}
</style>
<style>
/* Target - Outlook Mail */
[data-ogsc] .fallback, [data-ogsc] #check:checked + .fallback {
display: block !important
}
[data-ogsc] #hamburger-wrapper {
display: none !important
}
</style>
<style>
/* Target - Outlook iOS/Andriod */
.fallback