@charset "utf-8";
/* CSS Document */

/* Colours */
:root {
--grey: #5e676a;
--blue: #233c5a;
--bggrey_light: #faf9f9;
--bggrey_light_alt:	#f0efef;
--bggrey_mid: #bfbfbf;
--bggrey_mid_alt: #e2e1e2;
--black: #000000;
--blue_light: #779fd1;	
--blue_dark: #1a2d44;
	
	
--altgrey: #d4d5d6;

--blue_mid: #2E86E0;

--red: #83171f;
--redhover: #430204;
--green: #2EB700;
--green_light: #7ED47F;
--green_garden: #AECC2C;
--orange: #F7A11F;
--orange_pale: #fef0db;
--gold: #BD9D78;
--goldhover: #8c6138;
--purple: #BC7AEF;
--yellow: #FFCD00;
--yellow_hover: #ffb200;	
--yellowhover: #ffa500;
--pink_light: #fcebee;
	
--buttonprimary: var(--blue);
--buttonprimary_border: var(--blue);
--buttonprimary_colour: #fff;
--buttonprimaryhover: var(--blue_dark);
--buttonprimaryhover_border: var(--blue_dark);
--buttonprimaryhover_colour: #fff;
--buttonprimarytext: #fff;
--buttonprimaryhovertext: #fff;
--greybutton: var(--bggrey_light);
--greybuttonhover: var(--bggrey_mid);
	
--buttonsecondary: #F4F4F4;
--buttonsecondary_border: #333;
--buttonsecondary_colour: #333;
--buttonsecondaryhover: #ECECEC;
--buttonsecondaryhover_border: #000;
--buttonsecondaryhover_colour: #333;
--buttonsecondarytext: #000;
--buttonsecondaryhovertext: #000;
	
--font_title: 'avenir-b';
--font_standard: 'avenir-r';

}


/* FONTS */
/* outfit-regular - latin */
@font-face {
  font-family: 'avenir-r';
  src: url("../fonts/avenir-new/Avenir-Light.eot");
  src: url("../fonts/avenir-new/Avenir-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/avenir-new/Avenir-Light.woff2") format("woff2"), url("../fonts/avenir-new/Avenir-Light.woff") format("woff"), url("../fonts/avenir-new/Avenir-Light.ttf") format("truetype"); }

@font-face {
  font-family: 'avenir-b';
  src: url("../fonts/avenir-new/Avenir-Medium.eot");
  src: url("../fonts/avenir-new/Avenir-Medium?#iefix") format("embedded-opentype"), url("../fonts/avenir-new/Avenir-Medium.woff2") format("woff2"), url("../fonts/avenir-new/Avenir-Medium.woff") format("woff"), url("../fonts/avenir-new/Avenir-Medium.ttf") format("truetype"); }




/* REPEATABLE POSITION CLASSES - TOO MANY VARS FOR TAILWIND! */
.absolute-center-left { position: absolute; left:0; top:50%; transform: translate(0,-50%); }
.absolute-center-right { position: absolute; right:0; top:50%; transform: translate(0,-50%); }
.absolute-center-center { position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); }
.absolute-center-top { position: absolute; left:50%; top:0%; transform: translate(-50%,0%); }
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 1; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 3; }
.wish-button {  }
.wish-button span {  float:left; position:absolute; top:50%; left: 50%; transform: translate(-50%,-50%); }
.wish-button span.wish-icon-active { position:absolute; top:50%; left: 50%; transform: translate(-50%,-50%);  opacity: 0; transition: all 200ms ease; }
.wish-button:hover span.wish-icon-active { opacity: 1; }
body .cls-product-favourite-green--2 { fill:var(--blue); }
body .reach-sides:before { width: calc(calc(100vw - 100%) / 2) !important; left: calc(0px - calc(calc(100vw - 100%) / 2)) !important; }
body .reach-sides:after { width: calc(calc(100vw - 100%) / 2) !important; right: calc(0px - calc(calc(100vw - 100%) / 2)) !important; }

body.pixiedust  .pm-alignment.topleft { top: 0; bottom:0; left: 0; text-align:left; justify-content:left; transform:none !important; }	
body.pixiedust  .pm-alignment.topcenter { top:0; left: 50%; transform:translate(-50%,0); text-align:center; justify-content:center; }
body.pixiedust  .pm-alignment.topright  { top:0; right:0; left: auto; text-align:right; justify-content:right; transform:none !important; }
body.pixiedust  .pm-alignment.centerleft { top:50%; bottom:0; left: 0; transform:translate(0,-50%); text-align:left; justify-content:left; }
body.pixiedust  .pm-alignment.center { top:50%; left: 50%; transform:translate(-50%,-50%); text-align:center; justify-content:center; }
body.pixiedust  .pm-alignment.centerright { top:50%; right: 0; left:auto; transform:translate(0,-50%); text-align:right; justify-content:right; }
body.pixiedust  .pm-alignment.bottomleft {  bottom:0; left:0; top:auto; text-align:left; justify-content:left; transform:none !important; }
body.pixiedust  .pm-alignment.bottomcenter { bottom:0; left: 50%; top:auto; transform:translate(-50%,0); text-align:center; justify-content:center; }
body.pixiedust  .pm-alignment.bottomright { bottom:0; right:0; top:auto; left: auto; text-align:right; justify-content:right;  transform:none !important; }

/* DEF STYLES AND BUTTONS FOR USE IN WIDGETS ETC */
body.pixiedust span.xxlarge, body.pixiedust .xxlarge { font-size: clamp(34px, calc(14px + 1.5vw), 44px) !important; display:block; line-height:1.1; margin-bottom: 20px; display:block;  }
body.pixiedust span.xlarge, body.pixiedust .xlarge { font-size: clamp(24px,calc(14px + 1.5vw),34px) !important; display:block; line-height:1.1;  margin-bottom: 20px;display:block;  }
body.pixiedust span.large, body.pixiedust .large { font-size:  clamp(20px, calc(14px + 1.5vw), 24px) !important; display:block; line-height:1.1;  margin-bottom: 20px;display:block;  }
body.pixiedust span.medium { font-size: clamp(16px, calc(5px + 1.5vw), 20px) !important; line-height:1.1; margin-bottom: 20px; display:block;  }
body.pixiedust span.small { font-size: clamp(12px, calc(5px + 1.5vw), 14px) !important; line-height:1.4; margin-bottom: 20px; display:block; }
body.pixiedust span.xsmall { font-size: 12px; }
body.pixiedust p { font-size: clamp(14px,1.2vw,14px) !important; margin-bottom: 20px;  }
body.pixiedust .title { font-family: 'avenir-b'; font-weight: 500 !important; letter-spacing: 1px; }
body.pixiedust label, body.pixiedust label span, body.pixiedust .label, body.pixiedust .label span { font-family: 'avenir-b'; font-weight: 500 !important; }
body.pixiedust .text-shadow { text-shadow: 1px 2px 8px #00000094; }
body.pixiedust .grey { color:var(--grey) !important; }
body.pixiedust .green { color:var(--green) !important; }
body.pixiedust .yellow { color:var(--yellow) !important; }
body.pixiedust .red { color:var(--red) !important; }
body.pixiedust .blue { color:var(--blue_dark) !important }

body.pixiedust .divider { position: relative; font-size:0; width:100%; display:flex; height: 1px; margin: 6rem 0; }
body.pixiedust .divider span { display:none; }
body.pixiedust .divider:before { content:''; position:absolute; top:0; width: 100vw !important; left: calc(0px - calc(calc(100vw - 100%) / 2)) !important; height:1px; background:var(--bggrey-light);  }

body.pixiedust .font-semibold, body.pixiedust b, body.pixiedust .price { font-family: 'avenir-b'; font-weight:400 !important; }

@media screen and (max-width:1270px) { body.pixiedust .divider { margin: 3rem 0; }}

/* BUTTONS */
body.pixiedust .button, body.pixiedust a.btn { font-family:var(--font_title); display:inline-flex; align-items: center; justify-content: center; transition:all 200ms ease; background:var(--blue); border:1px solid var(--blue); box-sizing: border-box; padding:16px 24px; color:#fff !important; font-weight: 500; font-size:14px; line-height: 1; text-align: center; box-sizing: border-box; height: 50px;}
body.pixiedust .button:hover { background:var(--blue_dark); border-color:var(--blue_dark); }
body.pixiedust .button.whitebutton {  background:transparent; border-color:#fff; color:#fff !important;  }
body.pixiedust .button.whitebutton:hover { background:var(--blue); border-color:var(--blue); }
body.pixiedust .button.yellowbutton { background:var(--yellow); border-color:var(--yellow);  color:#000 !important;  }
body.pixiedust .button.yellowbutton:hover { background:var(--yellowhover); border-color:var(--yellowhover); }
body.pixiedust .button.blackbutton {  background:#333; border-color:#333; color:#fff !important;  }
body.pixiedust .button.blackbutton:hover { background:#000; border-color:#000; }
body.pixiedust .button.greybutton { background:transparent; border-color:var(--grey);  color:#000 !important;  }
body.pixiedust .button.greybutton:hover { background:var(--grey); border-color:var(--grey); color:#fff !important; }



body.pixiedust .button.lightgreybutton { background:var(--bggrey_light); border-color:var(--bggrey_light);  color:#000 !important;  }
body.pixiedust .button.lightgreybutton:hover { background:var(--bggrey_mid); border-color:var(--bggrey_mid); }
body.pixiedust .button.redbutton { background:var(--red); border-color:var(--red);  color:#fff !important;  }
body.pixiedust .button.redbutton:hover { background:var(--redhover); border-color:var(--redhover); }
body.pixiedust .button.bluebutton, body.pixiedust a.btn.btn-primary { background:var(--blue); border-color:var(--blue);  color:#fff !important;  }
body.pixiedust .button.bluebutton:hover, body.pixiedust a.btn.btn-primary:hover { background:var(--blue_dark); border-color:var(--blue_dark); }

body.pixiedust .button.bluelinebutton { background:transparent; border-color:var(--blue_dark);  color:var(--blue_dark) !important;  }
body.pixiedust .button.bluelinebutton:hover { background:var(--blue_dark); border-color:var(--blue_dark); color:#fff !important; }

body.pixiedust .button svg, body.pixiedust .btn svg { display: inline-block; width: 25px; height: 25px; margin:-4px 4px 0 0; }
body.pixiedust .scrollbutton:after { background:url(../images/assets/header-menu-arrow-black.svg) no-repeat center / 17px; content:''; width: 17px; height:12px; margin:0 -5px 0 5px; transform: rotate(90deg); filter: invert(1); }
body.pixiedust .button span, body.pixiedust .btn span { font-weight: 500; line-height: 1; }

@media screen and (max-width:880px) {
	body.pixiedust .button, body.pixiedust a.btn { height: 44px; }
}

@media screen and (max-width:640px) {
	body.pixiedust .button svg, body.pixiedust .btn svg { width:20px; height:20px; }
	body.pixiedust .button span, body.pixiedust .btn span { font-size: 12px; }
}

/* MESSAGES */
body .page.messages { position: static; }
.messages .message, body .message { justify-content: left; position: relative; }
.messages .message .close, body .message .close { position: absolute; right: 20px; top: 50%; transform: translate(0,-50%); }
.messages .message .close svg, .message .close svg  { background:var(--red); border-color:var(--red); border-radius: 50%; width: 22px; height: 22px; box-sizing: border-box; padding: 2px;}
.messages .message:before, body .message:before { margin-right: 10px;  }
.message.error:before { background:var(--red) url(../images/assets/cart/cart-message-error.svg) no-repeat center / calc(100% - 8px); box-sizing: border-box; padding: 5px; width:22px; min-width:22px; height: 22px; border-radius: 50%; content:''; }
.message.info:before, .message.warning:before, .message.notice:before { background:var(--orange) url(../images/assets/cart/cart-message-alert.svg) no-repeat center / calc(100% - 8px); box-sizing: border-box; padding: 5px; min-width:22px; width:22px; height: 22px; border-radius: 50%; content:''; }
.messages .message.info .close svg, .messages .message.warning .close svg, .messages .message.notice .close svg { background:var(--orange); border-color:var(--orange); }
.message.success:before { background:var(--blue) url(../images/assets/cart/cart-message-success.svg) no-repeat center / calc(100% - 8px); box-sizing: border-box; padding: 5px; min-width:22px; width:22px; height: 22px; border-radius: 50%; content:''; }
.messages .message.success .close svg { background:var(--blue); border-color:var(--blue); }

/* FORMS */
body [type='checkbox'], body [type='radio'], body [type='checkbox']:hover, body [type='radio']:hover { color:var(--grey); outline-color:var(--grey); border:1px solid var(--altgrey); box-shadow:none !important; background-color:var(--bggrey_light); outline:0; cursor: pointer; }
body input[type='checkbox']:checked, body input[type='checkbox']:checked:active, body input[type='checkbox']:checked:focus, body input[type='checkbox']:checked:hover { background:var(--bggrey_light_alt) url(../images/assets/product/checkbox-checkmark-blue.svg) no-repeat center / calc(100% + 10px); border:1px solid var(--grey); outline:0; }
body.pixiedust input, body.pixiedust select, body.pixiedust textarea { box-shadow:none !important; }
body.pixiedust input:focus, body.pixiedust select:focus, body.pixiedust input:active, body.pixiedust select:active { box-shadow: none !important; border-color:var(--bordergreylight); }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{  -webkit-box-shadow: 0 0 0 30px white inset !important; }
body.pixiedust select { min-width: 80px; }

/* PAGINATION */
body .widget ul.splide__pagination { text-align: center; width:100%; margin: 30px 0 20px;  }
body .splide__pagination li { margin:0 5px; }
body .splide__pagination button.splide__pagination__page  { background:var(--grey) !important; border:8px solid transparent; opacity:1; transform:scale(0.6); position:relative;}
body .splide__pagination button.splide__pagination__page.is-active { background:#000 !important; outline:1px solid #000; background-clip:content-box !important; position:relative; float:left; margin-top:5px; transform:scale(1.4); }
body .splide__pagination button.splide__pagination__page.is-active:after { content:''; width:5px !important; height:5px !important; border-radius:50%; background:#000; top:50%; left:50%; transform:translate(-50%,-50%); display:block; }

/* ARROWS & SPLIDE */
body .splide--draggable>.splide__track>.splide__list>.splide__slide { vertical-align: top; }
body .splide__arrow { background:transparent; position:absolute; opacity: 1; border:0; width:40px; height:40px; z-index:9; }
body .splide__arrow svg { width:100%; height:100%; position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); }
body .splide__arrow .cls-2 {  }
body .splide__arrow--prev svg { left: calc(50% - 1px); }
body .splide__arrow--next svg { left: calc(50% + 1px); }
body .splide__arrow--prev { left: 0px; }
body .splide__arrow--next { right: 0px; }
body .splide__arrow:disabled { display:none; }
@media screen and (min-width:1390px) { body .splide__arrow--prev { left: 0px; } body .splide__arrow--next { right: 0px; } }
@media screen and (min-width:1200px) { body .splide__arrow { transition:all 200ms ease; } body .splide__arrow:hover { opacity: 1 !important;  } }
@media screen and (max-width: 500px) { body .splide__arrow { width: 32px; height: 32px;  } body .splide__arrow--prev { left: -5px; } body .splide__arrow--next { right: -5px; } body .splide__arrow { width: 30px; height: 30px; } }

body.pixiedust .splide__arrow { background:#fff; border-radius: 50%; box-shadow: 0 0 12px -6px #000; transition: all 200ms ease; }
body.pixiedust .splide__arrow:hover { box-shadow: 0 0 12px -4px #000; }
body.pixiedust .splide__arrow svg { width: calc(100% - 16px); height: calc(100% - 16px); }

body.pixiedust #pixie-giftwrap-container .splide__arrow--prev { left: 10px; }
body.pixiedust #pixie-giftwrap-container .splide__arrow--next { right: 10px; }

@media screen and (min-width: 1390px) {
	body.pixiedust .splide__arrow--prev { left: -20px; }
	body.pixiedust .splide__arrow--next { right: -20px; }
	body.pixiedust #pixie-giftwrap-container .splide__arrow--prev { left: 20px; }
	body.pixiedust #pixie-giftwrap-container .splide__arrow--next { right: 20px; }
}


/* ANIMATIONS */

/* STRUCTURAL - TO DO - FIND IN CONFIG */
html { max-width: 100vw; overflow-x:hidden; color:var(--blue_dark); }
body { overflow-x:hidden; width:100vw; overflow-y:scroll; letter-spacing: 0.2px; }
body.pixiedust { color: var(--grey); }
.page-wrapper { position: relative;  }
body .page-wrapper .columns { max-width: 1350px !important; }
.cms-index-index .columns { gap:0; }
.cms-index-index .page-main { margin:0; }
.breadcrumbs { max-width:1350px; margin:auto; }
@media screen and (max-width:1370px) {
	body .columns { max-width:100%; }
	.breadcrumbs { max-width: calc(100vw - 40px); }
}