@charset "UTF-8";
/* Generated by less 2.2.0 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
  display: block;
}
body,
html {
  line-height: 1;
  width: 100%;
  height: 100%;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
/* Document
   ========================================================================== */
html {
  /* Load system fonts */
  font-family: -apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe
      UI, Helvetica Neue, sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* Make type rendering look crisper */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Disable auto-enlargement of small text in Safari */
  text-size-adjust: 100%;
  /* Enable kerning and optional ligatures */
  text-rendering: optimizeLegibility;
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}
/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block;
}
/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}
/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}
/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}
/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}
/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}
/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}
/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}
/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}
/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}
/**
 * Add the correct display in IE.
 */
template {
  display: none;
}
/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}
@charset "UTF-8";
/* *********************************** */
/* ************ Z E S T Y ************ */
/* ************ M E D I A ************ */
/* ********* F R A M W O R K ********* */
/* *********************************** */
/* *********************************** */

/* -- Scaffolding Framework --*/
.wrapper { width: 100%; float: left }
.wrapper:after { content: ""; display: table; clear: both }
.grid { width: 100%; margin: 0 auto; padding: 0 }
.grid:after {content: "";display: table;clear: both;}
.container { float: left; width: 100%; margin: 0;}
.container:after { content: "";display: table;clear: both;}


/* -- col- used for layout --*/
[class*='col-'] {padding: 0;float: left;}
.col-1 { width: 100% }
.col-2 { width: 50% }
.col-3 { width: 33.33% }
.col-4 { width: 25% }
.col-5 { width: 20% }
.col-6 { width: 16.66%  }
/* -- No col-7's, they're filthy -- */
.col-8 { width: 12.50% }
.col-9 { width: 11.11% }
.col-10 { width: 10% }
/* -- No col-11's, they too are disgusting -- */
.col-12 { width: 8.33% }
.col-90p { width: 90% }
.col-80p { width: 80% }
.col-75p { width: 75% }
.col-70p { width: 70% }
.col-66p { width: 66.66% }
.col-60p { width: 60% }
/* -- You don't need a col-50, we have col-5 for that -- */
.col-40p { width: 40% }
.col-30p { width: 30% }
.col-25p { width: 25% }
.col-20p { width: 20% }
.col-10p { width: 10% }

.col-thumbnail {width: 12.5%; max-width:112px; }


/* -- This style enables the jQuery to target and address the element height -- */
.imgCtr, .imgCtr25, .imgCtr50, .imgCtr75, .imgCtr75a, .imgCtrHome  {position:relative;float:left;width:100%;}
.imgCtr:after, .imgCtr25:after, .imgCtr50:after, .imgCtr75:after, .imgCtr75a:after, .imgCtrHome:after {content: "";display: block;width:100%;}
.imgCtr:after {padding-bottom: 100%;}
.imgCtr25:after {padding-bottom: 25%;}
.imgCtr50:after {padding-bottom: 50%;}
.imgCtr75:after {padding-bottom: 75%;}
.imgCtr75a:after {padding-bottom: calc(75% + 4px);}
.imgCtrHome:after {padding-bottom: 40%;}

/* Layout - Muliple Location Change one, changes all */

/* -- Grid guttering --*/
[class*='gutter'] {padding: 0;float: left; }
.gutter8 {margin: 0 -4px;}
.gutter8 >li, .gutter8 >a, .gutter8 >div, .gutter8 >span, .gutter8 > img { padding: 4px;}
.gutter16 {margin: 0 -8px;}
.gutter16 >li, .gutter16 >a, .gutter16 >div, .gutter16 >span, .gutter16 > img { padding: 8px;}
.gutter32 {margin: 0 -16px;}
.gutter32 >li, .gutter32 >a, .gutter32 >div, .gutter32 >span, .gutter32 > img {padding: 0 16px;}

/* -- Embed Video Responsively */
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%
}

.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

/* Flex Box CSS */
*[class*="zflex"] {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: row;}
*[class*="zflexInline"] {display: -webkit-inline-flex;display: -ms-inline-flexbox; display: inline-flex;}
.zflex-w, .zflexInline-w {flex-wrap:wrap; display: -webkit-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; display: flex;   flex-wrap: wrap;}
.zflex-s, .zflexInline-s {align-items:stretch; -webkit-align-items:stretch; -ms-align-items:stretch; -moz-align-items:stretch;}
.zflex-ws, .zflexInline-ws {flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;-moz-flex-wrap:wrap;align-items:stretch;-webkit-align-items:stretch; -ms-align-items:stretch; -moz-align-items:stretch;}
.zflex-v, .zflexInline-v { justify-content:center; -webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; align-content:center; align-items:center; -webkit-align-items:center; -moz-align-items:center; -ms-align-items:center; }
.zflex-hm, .zflexInline-hm {display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex;flex-wrap:wrap; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap;}
.zflex-vs, .zflexInline-vs { align-items:center; -webkit-align-items:center; -moz-align-items:center; -ms-align-items:center; flex-wrap:wrap; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; }
.zflex-sa, .zflexInline-sa { justify-content: space-around; -webkit-justify-content: space-around; -moz-justify-content: space-around}
.zflex-sb, .zflexInline-sb { justify-content: space-between; -webkit-justify-content: space-between; -moz-justify-content: space-between}
.wrap {-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; display: flex;   flex-wrap: wrap;}
.flex-grow0 {flex-grow:0;-ms-flex-positive: 0;}
.flex-grow1 {flex-grow:1;-ms-flex-positive: 1;}
.flex-grow2 {flex-grow:2;-ms-flex-positive: 2;}
.flex-grow3 {flex-grow:3;-ms-flex-positive: 3;}
.modernizr-no-flexbox [class*="zflex"] {display:block;}
.hideallbutfirstpara * {display:none;}
.hideallbutfirstpara [data-firstpara="true"] {display:initial;}

.pos-rel {
    position:relative;
}

.pos-abs {
    position:absolute;
}

    .pos-abs.pos-top-right {
        top:0;
        right:0;
    }

.pos-fix {
    position:fixed;
}

.height-100-vh {
    height:100vh;
    min-height:100%;
}

.is-touch-device .hide-on-touch-device {
    display:none;
}

.isnot-touch-device .show-on-touch-device {
    display: none;
}

/* Grid CSS */
*[class*="cssGrid"] {display: -ms-grid;display: grid;}
.modernizr-no-cssgrid *[class*="cssGrid"] {
    display: block;
}

/* -- Mobile Phones  -- */
@media screen and (max-width: 767.9px) {
    /* -- col- used for layout --*/
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-90p, .col-80p, .col-75p, .col-70p, .col-66p, .col-60p, .col-40p, .col-30p, .col-25p, .col-20p, .col-10p, .col-1-mobile {
        width: 100%
    }
    .col-2-mobile {width:50%;}
	.col-8 { width: 12.50%}
	.col-9 { width: 11.11%}
	.col-10 { width: 10%}
	.col-12 { width: 8.33% }

	.zflex-sa {-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; display: flex;   flex-wrap: wrap; flex-grow:1;-ms-flex-positive: 1;}
	.zflex-sb {-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; display: flex;   flex-wrap: wrap; flex-grow:1;-ms-flex-positive: 1;}
	
	.gutter32, gutter16, gutter18 {margin: 0;}
	.gutter32 >li, .grid8 >a, .grid8 >div, .grid8 >span, .grid8 >img  { padding: 0px;}

    .hide-on-mobile {display:none !important;}

    .zflex-ws-mobonly {
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        align-items: stretch;
        -webkit-align-items: stretch;
        -ms-align-items: stretch;
        -moz-align-items: stretch;
    }

    .mobile-order--1 {
        order: -1;
    }
}
/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.99px)
{

  	/* Zesty Responsiveness */
  	.col-75p, .col-70p, .col-30p  { width:100%}

	/* -- Grid guttering --*/
	.gutter32 {margin: 0 -16px;}
	.gutter32 >li, .grid8 >a, .grid8 >div, .grid8 >span, .grid8 >img  { padding: 8px;}
}
/* -- Padding -- */
.leftPadding {padding-left: 32px}
.topPadding { padding:32px 0}
.ctrPadLeft16 {padding-left: 16px}
.ctrPadTop32 { padding:32px 0}
.ctrPadSide32 {padding:0 32px}
.ctrPadTop16 { padding:16px 0}
.ctrPadSide16 { padding:0 16px}
.ctrPadLeft32 {padding-left: 32px}
.ctrPad32 {padding: 32px}
.ctrPad32-left {padding-left: 32px}
.ctrPad32-right {padding-right: 32px}
.ctrPad32-top {padding-top: 32px}
.ctrPad32-bottom {padding-bottom: 32px}
.ctrPad16 {padding: 16px}
.ctrPad16-left {padding-left: 16px}
.ctrPad16-right {padding-right: 16px}
.ctrPad16-top {padding-top: 16px}
.ctrPad16-bottom {padding-bottom: 16px}
.ctrPad8 {padding: 8px}
.ctrPad8-left {padding-left: 8px}
.ctrPad8-right {padding-right: 8px}
.ctrPad8-top {padding-top: 8px}
.ctrPad8-bottom {padding-bottom: 8px}
.ctrPad4 {padding: 4px}
.ctrPad4-left {padding-left: 4px}
.ctrPad4-right {padding-right: 4px}
.ctrPad4-top {padding-top: 4px}
.ctrPad4-bottom {padding-bottom: 4px}
.ctrPad0 {padding: 0}
.ctrPad0-left {padding-left: 0}
.ctrPad0-right {padding-right: 0}
.ctrPad0-top {padding-top: 0}
.ctrPad0-bottom {padding-bottom: 0}
.ctrPadTighten {padding-left: 22%;padding-right: 22%;}

/* -- Margins -- */
.leftMargin {margin-left: 32px}
.ctrMrgLeft32 {margin-left: 32px}
.ctrMrgLeft16 {margin-left: 16px}
.ctrMgr32, .ctrMrg32 {margin: 32px}
.ctrMgr32-left {margin-left: 32px}
.ctrMgr32-right {margin-right: 32px}
.ctrMgr32-top {margin-top: 32px}
.ctrMgr32-bottom {margin-bottom: 32px}
.ctrMgr16, .ctrMrg16 {margin: 16px}
.ctrMgr16-left {margin-left: 16px}
.ctrMgr16-right {margin-right: 16px}
.ctrMgr16-top {margin-top: 16px}
.ctrMgr16-bottom {margin-bottom: 16px}
.ctrMgr8, .ctrMrg8 {margin: 8px}
.ctrMgr8-left {margin-left: 8px}
.ctrMgr8-right {margin-right: 8px}
.ctrMgr8-top {margin-top: 8px}
.ctrMgr8-bottom {margin-bottom: 8px}
.ctrMgr8-bottom-i {margin-bottom: 8px !important}
.ctrMgr4, .ctrMrg4 {margin: 4px}
.ctrMgr4-left {margin-left: 4px}
.ctrMgr4-right {margin-right: 4px}
.ctrMgr4-top {margin-top: 4px}
.ctrMgr4-bottom {margin-bottom: 4px}
.ctrMgr0 {margin: 0}
.ctrMgr0-left {margin-left: 0}
.ctrMgr0-right {margin-right: 0}
.ctrMgr0-top {margin-top: 0}
.ctrMgr0-bottom {margin-bottom: 0}

@media screen and (max-width: 767.9px) {
    /* -- Padding and margins -- */
	.ctrPad4 	{padding: 2px}
    .ctrPad4-left {padding-left: 2px}
    .ctrPad4-right {padding-right: 2px}
    .ctrPad4-top {padding-top: 2px}
    .ctrPad4-bottom {padding-bottom: 2px}
	.ctrPad8 	{padding: 4px}
    .ctrPad8-left {padding-left: 4px}
    .ctrPad8-right {padding-right: 4px}
    .ctrPad8-top {padding-top: 4px}
    .ctrPad8-bottom {padding-bottom: 4px}
	.ctrPad16 	{padding: 8px}
    .ctrPad16-left {padding-left: 8px}
    .ctrPad16-right {padding-right: 8px}
    .ctrPad16-top {padding-top: 8px}
    .ctrPad16-bottom {padding-bottom: 8px}
	.ctrPad32 	{padding: 16px}
    .ctrPad32-left {padding-left: 16px}
    .ctrPad32-right {padding-right: 16px}
    .ctrPad32-top {padding-top: 16px}
    .ctrPad32-bottom {padding-bottom: 16px}
    .ctrMrg4, .ctrMgr4 {margin: 2px}
    .ctrMgr4-left {margin-left: 2px}
    .ctrMgr4-right {margin-right: 2px}
    .ctrMgr4-top {margin-top: 2px}
    .ctrMgr4-bottom {margin-bottom: 2px}
    .ctrMrg8, .ctrMgr8 {margin: 4px}
    .ctrMgr8-left {margin-left: 4px}
    .ctrMgr8-right {margin-right: 4px}
    .ctrMgr8-top {margin-top: 4px}
    .ctrMgr8-bottom {margin-bottom: 4px}
    .ctrMgr8-bottom-i {margin-bottom: 4px !important}
    .ctrMrg16, .ctrMgr16 {margin: 8px}
    .ctrMgr16-left {margin-left: 8px}
    .ctrMgr16-right {margin-right: 8px}
    .ctrMgr16-top {margin-top: 8px}
    .ctrMgr16-bottom, .ctrMgr16-bottom-mobileonly {margin-bottom: 8px}
    .ctrMrg32, .ctrMgr32 {margin: 16px}
    .ctrMgr32-left {margin-left: 16px}
    .ctrMgr32-right {margin-right: 16px}
    .ctrMgr32-top {margin-top: 16px}
    .ctrMgr32-bottom {margin-bottom: 16px}
    .mobilepadding-0 {padding:0;}
    .mobilepadding-0-left {padding-left: 0;}
    .mobilepadding-0-right {padding-right: 0;}
    .mobilepadding-0-top {padding-top: 0;}
    .mobilepadding-0-bottom {padding-bottom: 0;}

	/* Layout - Muliple Location Change one, changes all */
	.leftMargin, .leftPadding,.topPadding,.ctrMrgLeft32,.ctrPadLeft32,.ctrMrgLeft16,.ctrPadLeft16,.ctrPadTop32,.ctrPadSide32,.ctrPadTop16,.ctrPadSide16 {margin: 0px;padding: 0px}
}

@media screen and (min-width : 768px) and (max-width : 1023.99px) {
    /* -- Padding and margins -- */
  	.ctrPad32 { padding:16px}

	/*  Fixed width */
	.leftMargin {margin-left: 16px}
	.leftPadding {padding-left: 16px}
	.topPadding { padding: 16px}
	.ctrMrgLeft32 {margin-left: 16px}
	.ctrPadLeft32 {padding-left: 16px}
	.ctrMrgLeft16 {margin-left: 16px}
	.ctrPadLeft16 {padding-left: 16px}
	.ctrPadTop32 { padding: 16px}
	.ctrPadSide32 {padding: 0 16px}
	.ctrPadTop16 { padding: 16px}
	.ctrPadSide16 { padding: 16px}
}

@media screen and (min-width : 1024px) and (max-width : 1439.99px)
{
  	/* -- Padding and margins -- */
  	.ctrPad32 { padding:16px}

	/*  Fixed width */
	.leftMargin {margin-left: 16px}
	.leftPadding {padding-left: 16px}
	.topPadding { padding: 16px}
	.ctrMrgLeft32 {margin-left: 16px}
	.ctrPadLeft32 {padding-left: 16px}
	.ctrMrgLeft16 {margin-left: 16px}
	.ctrPadLeft16 {padding-left: 16px}
	.ctrPadTop32 { padding: 16px}
	.ctrPadSide32 {padding: 0 16px}
	.ctrPadTop16 { padding: 16px}
	.ctrPadSide16 { padding: 16px}
}
@charset "UTF-8";
/* -- Global --*/
html, body { width: 100%; height: 100%; margin: 0; padding: 0;}
*, *:after, *:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}
a,a:hover,a:focus, a img{outline:none;text-decoration:none; border:none}
select::-ms-expand {display: none;}
select{-webkit-appearance: none;-moz-appearance: none;appearance:none;text-indent: 0.01px;text-overflow: '';}
.transition, .button, .flex-viewport, .flexslider, .flex-direction-nav, a, lable, input, textarea, .loading {-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
p, .p {margin-bottom: 0.75rem;}
.loading { opacity: 0}
.loading.loadingDone { opacity: 1}
.flex-container {-ms-box-orient: horizontal;display: -webkit-box;display: -moz-box;display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex;}
.flipmeContain, .bgContain { background-size:contain !important;}
img { vertical-align: middle; max-width: 100%; max-height: auto; }
img[src*="platformlayout/clear.gif"] {display:none;}
span[class*="noSaleIcon"] {display:none;}
.centralise { text-align: center }
em { font-style: italic }
.clearboth { clear:both}
.open {display:block !important;}
.middle { margin:0 auto !important; float:initial}
.desktop {display: initial;}
.mobile { display: none; }
.required, .errorFormInfo {color:#FF0004;}


/*  columnFlow */
.columnFlow {margin: auto;-moz-column-count: 2;-moz-column-gap: 64px;-webkit-column-count: 2;-webkit-column-gap: 64px;column-count: 2;}
.columnFlow h1, .columnFlow h2 {-webkit-column-span: all;column-span: all;}
.columnFlow p { text-align:left}
.columnFlow p:first-of-type{ padding-top:0px; margin-top:0}


/*  Transitions */
.transition, .button, button, .flex-viewport, .flexslider, .flex-direction-nav {-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}

.hideme,
[data-hideshow*="alse"],
[data-hideme*="true"],
[data-hideme*="True"] {
    display: none !important
}

.flexslider .flipme,
.flexslider .flipmeContain {
    max-width: 100vw;
    max-height: 100vh;
}

.zindex-2 {
    z-index: 2;
}
.zindex-100 {
    z-index:100;
}

.zindex-1000 {
    z-index: 1000;
}

/*  base font-size --*/
html { font-size: 100%; }

/* -- Headings --*/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: normal;
  line-height: 1.25;
}

h1, .h1, h2, .h2, h3, .h3 {
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}
h4, .h4, h5, .h5,h6, .h6 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

h1, .h1 { font-size: 1.6rem;; }
h2, .h2 {font-size: 1.5rem;}
h3, .h3 {font-size: 1.3rem;}
h4, .h4 {font-size: 1.2rem;}
h5, .h5 { font-size: 1.1rem; }
h6, .h6 { font-size: 1.0rem; }

/* -- Body --*/
p {
  margin: 0 0 1.5rem;
}
body, button, select, input, textarea {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-weight: 400;
    line-height: 1.55;
}

[type="checkbox"], [type="radio"] {width: initial;height: initial;}

/* -- Alignment --*/
.text-left           { text-align: left; }
.text-right          { text-align: right; }
.text-center         { text-align: center; }
.text-justify        { text-align: justify; }
.text-nowrap         { white-space: nowrap; }

/* -- Transformation --*/
.text-lowercase      { text-transform: lowercase; }
.text-uppercase      { text-transform: uppercase; }
.text-capitalize     { text-transform: capitalize; }

.no-user-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* -- Unordered and Ordered lists --*/
ul,ol {
  margin-top: 0;
  margin-bottom: 1.5;
}


/* -- Mobile Phones  -- */
@media screen and (max-width: 767.99px)
{
	html { font-size: 80%; }
	.desktop { display:none }
	.mobile {display:initial}

    *[class*="zflex"].mobile {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
    }

    *[class*="zflexInline"].mobile {
        display: -webkit-inline-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
    }

	/* -- Headings --*/
	h1, .h1 { font-size: 1.5rem;; }
	h2, .h2, h3, .h3,h4, .h4,h5, .h5,h6, .h6 {font-size: 1rem;}

     /*  columnFlow */
	.columnFlow {-moz-column-count: 1;-moz-column-gap: 0px;-webkit-column-count: 1;-webkit-column-gap: 0px;column-count: 1;}

    /* --- CSS images */
	.css-image-ipad, .css-image-laptops, .css-image-desktops {display:none;background: none !important;}
	.css-image-mobile {display:block;}

}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.99px)
{
  /* -- Global --*/
  html { font-size: 90%; }
  .desktop {display:none;}
  .mobile {display:initial;}

	/* -- Headings --*/
	h1, .h1 { font-size: 1.5rem;; }
	h2, .h2 {font-size: 1.4rem;}
	h3, .h3 {font-size: 1.3rem;}
	h4, .h4 {font-size: 1.2rem;}
	h5, .h5 { font-size: 1.1rem; }
	h6, .h6 { font-size: 1rem; }

  /* --- CSS images */
	.css-image-mobile, .css-image-laptops, .css-image-desktops {display:none;background: none !important;}
	.css-image-ipad {display:block;}

  /* Layout - Muliple Location Change one, changes all */
  .leftMargin {margin-left: 16px !important;}
	.leftPadding {padding-left: 16px !important;}
}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) and (max-width : 1439.99px)
{
  /* --- CSS images hide*/
	.hmBanner1 .imgCtr75 {height: calc(100vh - 250px);}
}

/* --- Start Payment Method ---*/
img[src*="cards/card-Adyen.png"]{display: none;}
/* --- End Payment Method ---*/
@charset "UTF-8";
/*  Top Banner Call to Actions */
.CNCCTA {
    background: #fafafa;
    color: #272929;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px !important;
    height: 42px;
    border-bottom: 1px solid #dcdcdc;
    font-size: 11px;
}

    .CNCCTA a, .CNCCTA p {
        color: inherit;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }

#flexsliderCTA .CNCCTA a {
    flex: 1;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

.CNCCTA a i {
    color: inherit;
    margin: 0 10px 0 0;
    display: inline-block;
}

.CNCCTA a div, .CNCCTA a span, .CNCCTA a p {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 100;
}

.CNCCTA .flex-direction-nav {
    display: none
}

.CNCCTA li {
    text-align: left;
    overflow: hidden;
}

.Message a {
    margin: 0 0 0 21px !important;
}

.hdrRewardsTitle {
}

.slides.thinBanner {
    margin: 0;
}

.backgrounrdsignup.thinBanner {
    padding: 0;
}

.slides.thinBanner li {
    text-align: center;
    list-style: none;
    padding: 10px 0;
    margin: 0;
}

    .slides.thinBanner li a {
        color: #FFFFFF;
        font-size: 20px;
        border: 0;
    }

        .slides.thinBanner li a:hover {
            text-decoration: underline;
        }

        .slides.thinBanner li a h2 {
            margin: 0;
            color: #fff;
        }

        .slides.thinBanner li a p {
            margin: 0;
            font-size: small;
        }

/*  Top Banner Layout */
.masthead {
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
    z-index: 100;
    clear: both;
    position: fixed;
    -webkit-transform: translate3d(0px,0px,0px);
    -ms-transform: translate3d(0px,0px,0px);
    transform: translate3d(0px,0px,0px);
}

    .masthead .fixed .navIcons {
        position: relative;
    }

.navIcons {
    z-index: 1;
    border-bottom: 1px solid #ababab4a;
    background: inherit;
    height: 75px;
}

    .navIcons > div, .navIcons > a, .navIcons *[class*="icon-"] {
        width: 75px;
        line-height: 75px;
        font-size: 18px;
        position: relative;
        text-align: center;
        cursor: pointer;
    }

    .navIcons .icon-menu {
        display: none;
    }

    .navIcons *[class*="icon-"].close:before {
        color: tomato;
        content: "\ea16";
    }

.basketPip {
    display: none;
    position: absolute;
    width: 22px;
    height: 22px;
    line-height: 23px;
    text-align: center;
    bottom: 50%;
    right: 25%;
    font-size: 10px;
    color: #fff;
    border-radius: 100%;
    font-family: monospace;
    background: rgba(255, 66, 66, 0.75);
}

.header-cart-item .imgCtr {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    height: 60px;
    background-size: contain !important;
}

.header-cart-item-qty {
    font-size: 12px;
    line-height: 24px;
    height: 24px;
    width: 24px;
    text-align: center;
    border-radius: 4px;
    color: #222;
    background: #eee;
}

.logoContainer {
    padding: 0 16px;
    width: 140px;
}

.logo {
    max-width: 170px;
    height: 47px;
}

.logo {
    background: url('/sitespecific/customcontent/layout/generalLyout/logo.png') center center no-repeat;
    background-size: contain;
    margin: 0;
    display: block;
    height: 75px;
    width: 100%;
    min-width: 75px;
    transition: background-image 1s ease-in-out;
}

.NodeLevel0 > a, .navIcons *[class*="icon-"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* NAVIGATION */
#body-wrapper-overlay.open-slide-menu {
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 9;
    touch-action: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
    backdrop-filter: blur(1px);
}

html.open-slide-menu, body.open-slide-menu {
    position: absolute;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}

.ctrNavigation {
    align-self: center;
}

    .ctrNavigation > .CSSFacetNavModules {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        justify-content: center
    }

.CSSFacetNavModules {
    width: 100%;
    float: left;
    text-align: center;
}

.NodeLevel0 {
    float: none;
    padding: 0;
    display: inline-block;
    margin: 0 8px;
    align-self: center;
}

    .NodeLevel0 > a {
        padding: 0 14px 0 0;
        position: relative;
        display: block;
        cursor: pointer;
        color: inherit;
    }

        .NodeLevel0 > a:before, .NodeLevel0 > a:after {
            position: absolute;
            height: 2px;
            width: 5px;
            border-radius: 2px;
            content: ' ';
            display: block;
            background: #bbb;
            top: calc(50% - 1px);
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
        }

        .NodeLevel0 > a:before {
            right: 3px;
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .NodeLevel0 > a:after {
            right: 0px;
            -moz-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .NodeLevel0 > a.active:before, .NodeLevel0 > a.active:after {
            background: dodgerblue;
        }

        .NodeLevel0 > a.active:before {
            -moz-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .NodeLevel0 > a.active:after {
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    /* Sub-options */
    .NodeLevel0 > .CSSFacetNavModules {
        display: none;
        position: absolute;
        top: 75px;
        left: 0;
        max-height: calc(100vh - 75px);
        background: white;
        padding: 16px;
        flex-direction: row;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        align-items: stretch;
        -webkit-align-items: stretch;
        -ms-align-items: stretch;
        -moz-align-items: stretch;
        overflow-y: auto;
        padding-left: 10%;
        padding-right: 10%;
        z-index: 11;
        margin: 0 auto;
        left: 0%;
    }

        .NodeLevel0 > .CSSFacetNavModules.active {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            max-width: 100%;
        }

.NodeLevel1 > a {
    width: 100%;
    display: block;
}

.NodeLevel1 > .CSSFacetNavModules {
    clear: both;
    -moz-column-count: 2;
    -moz-column-gap: 2;
    -webkit-column-count: 2;
    -webkit-column-gap: 2;
    column-count: 2;
}

.NodeLevel1 > .CSSFacetNavModules, .NodeLevel0 > .CSSFacetNavModules * {
    text-align: left;
    line-height: 40px;
    color: inherit;
}

.NodeLevel1 > .CSSFacetNavModules, .NodeLevel0 > .CSSFacetNavModules .NodeLevel2:has(.CSSChild) {
    line-height: 150%;
}

.NodeLevel1 {
    width: 50%;
    padding: 32px;
    float: left;
}

    .NodeLevel1 > .CSSFacetNavModules > div {
        float: none;
        width: 100%;
        display: table;
        padding: 0 16px 0 0;
    }

    .NodeLevel1 > .CSSFacetNavModules a {
    }

.allBrand {
    float: left;
    width: 100%;
    left: 0;
    text-align: center;
    padding: 0px 32px 64px 32px;
}

    .allBrand:before {
        font-family: 'feather';
        content: "\e981";
        padding-right: 8px;
    }

/* Icon Menus */
.menuOptions {
    position: relative;
    background: transparent;
}

.srchCtr.tbcnt, .loginCtr.tbcnt, .basketCtr.tbcnt {
    display: none;
    width: 100%;
    float: left;
}

    .srchCtr.tbcnt.tbcntOpen, .loginCtr.tbcnt.tbcntOpen, .basketCtr.tbcnt.tbcntOpen {
        display: block;
    }

    /* Search */
    .srchCtr.tbcnt > div {
        width: 100%;
        float: left;
        position: relative;
    }

    .srchCtr.tbcnt .searchBoxForm, .srchCtr.tbcnt .searchBoxForm:focus {
        width: 100%;
        height: 75px;
        padding: 0 0 0 75px;
        border: none;
        border-radius: 0px;
    }

    .srchCtr.tbcnt .icon-search {
        position: absolute;
        top: 0;
        left: 0;
        width: 75px;
        height: 75px;
        line-height: 75px;
        text-align: center;
    }

/* Login */
.loginCtr.tbcnt {
    text-align: right;
}

    .loginCtr.tbcnt h3 {
        margin: 0 0 16px 0;
    }

.loginCtr .lockIcon {
    display: none;
}

.loginCtr a {
    text-decoration: none;
    border-bottom: 1px solid dodgerblue;
}

.loginCtr > div > div {
    width: 100%;
    float: left;
}

.loginCtr #CustomerRewardsDisplay1-dev {
    float: right;
    margin-top: 16px;
}

.loginCtr .hdrRewardsTitle, .loginCtr .crNotLoggedIn {
    float: left;
}

.loginCtr .crNotLoggedIn {
    margin-left: 8px;
    border-bottom-color: green;
    color: green;
}

/* Basket */
.basketCtr {
    display: none;
    text-align: left;
    position: absolute;
    margin: 0;
    overflow: visible;
    max-width: 416px;
    top: 16px;
    right: 16px;
    z-index: 4000;
}

.basketPip2, .sbuy-offers {
    display: inline-block;
    line-height: 24px;
    padding: 0 8px;
    font-size: 12px;
    font-family: 'citrfontbold';
}

div.basketCtr .buttonSmall {
    float: right;
    font-size: 10px;
}

#CartList-dev, #CartList-dev-bk {
    display: block;
    width: 100%;
    float: left;
    text-align: left;
    margin: 0;
}

div#CartList-dev a, div#CartList-dev-bk a {
    text-decoration: none;
    display: block;
}

    div#CartList-dev a span.purse10, div#CartList-dev-bk a span.purse10 {
        display: none;
    }

    div#CartList-dev a span[id*="lblCount"], div#CartList-dev-bk a span[id*="lblCount"] {
        margin-left: 6px;
        padding-left: 6px;
    }

div.basketCtr h3 {
    margin: 0;
}

div.basketCtr a:not(.buttonSmall)[href='/cart/'] span {
    display: none;
}

    div.basketCtr a:not(.buttonSmall)[href='/cart/'] span[id*="lblTotal"] {
        display: block;
        font-family: 'citrfontbold';
    }

        div.basketCtr a:not(.buttonSmall)[href='/cart/'] span[id*="lblTotal"]:before {
            content: var(--03-header-total);
            color: inherit;
        }

.CCartLinks {
    justify-content: space-between;
    font-size: smaller;
}

    .CCartLinks a {
        color: dodgerblue;
        border-bottom: 1px solid dodgerblue
    }

.CCartBut {
    padding-top: 8px;
    font-size: small;
    width: 100%;
}

    .CCartBut > div {
        padding: 4px;
    }

        .CCartBut > div:first-of-type > a {
        }

        .CCartBut > div:last-of-type > a {
            color: #fff !important;
        }

#CCart-dev {
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

    #CCart-dev > a > .mini-basket-img {
        width: 80px !important;
        min-height: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
    }

    #CCart-dev > a[data-starbuy="true"] > .mini-basket-img:after {
        width: 80px !important;
        display: block;
        float: left;
        margin: 4px 0 0 0;
        background: #b07ed7;
        color: white;
        content: var(--03-header-star-buy);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        height: 20px;
        padding: 0 4px;
        font-size: 10px;
        line-height: 20px;
        text-align: center;
    }

    #CCart-dev > a [data-saving="0.00"],
    #CCart-dev > a [data-saving="0"],
    #CCart-dev > a [data-matrix="No Option"] {
        display: none;
    }

#CCartFreeMSG {
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: smaller;
}

    #CCartFreeMSG span {
        line-height: 18px;
    }

        #CCartFreeMSG span:before {
            font-family: 'feather';
            content: '\e91c';
            display: inline;
            margin: 0 8px 0 0;
        }

    #CCartFreeMSG p {
        margin: 0;
        display: inline;
        font-size: inherit;
    }

/* Modernizr */
.modernizr-no-flexbox .menu-icons-header {
    float: right;
}

.minibasket-toggles {
}

    .minibasket-toggles > div {
        line-height: 48px;
        text-align: center;
        background: #eee;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
        user-select: none;
    }

        .minibasket-toggles > div[data-boxlink="minibasket-starbuys"] {
            border-left: 1px solid #ccc;
        }

        .minibasket-toggles > div.activeminilink {
            line-height: 48px;
            text-align: center;
            background: white;
            border-bottom-color: white;
            cursor: default;
        }

div[data-boxcontext*="minibasket"] {
    max-height: calc(100vh - 400px);
    overflow: auto;
}

.basketstarbuyouter {
    margin-bottom: 8px;
    background: #f3ebfa;
    padding-right: 48px;
    position: relative;
}

    .basketstarbuyouter:after {
        position: absolute;
        top: 50%;
        right: 8px;
        width: 32px;
        font-family: 'feather';
        content: "\e910";
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        color: #a46ec2;
        font-size: 24px;
    }

    .basketstarbuyouter:last-of-type {
        margin-bottom: 0;
    }

    .basketstarbuyouter[data-status="applied"] {
        background: #D8ECDE;
        cursor: default;
    }

        .basketstarbuyouter[data-status="applied"]:before {
            color: #17af45;
            content: var(--03-header-offer-applied);
            display: block;
            font-family: 'citrfontbold';
        }

        .basketstarbuyouter[data-status="applied"]:after {
            color: #17af45;
            content: "\e93d";
        }

.basketstarbuy-strap {
}

.basketstarbuy-desc {
}

.sbuy-offers {
    background: #a46ec2;
}

.sbuy-offers-link {
    color: #a46ec2;
}

.smiley-loading-anim {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0 auto;
    position: relative;
    text-align: center;
}

    .smiley-loading-anim > span {
        display: block;
        min-height: 24px;
        line-height: 24px;
        font-family: 'citrfontbold';
        color: #a46ec2;
    }

        .smiley-loading-anim > span:before {
            content: var(--03-header-offers-loading);
        }

    .smiley-loading-anim[data-status="empty"] > span:before {
        content: var(--03-header-offers-none-found);
    }

    .smiley-loading-anim > img {
        width: 24px;
        height: 24px;
        margin: 8px;
        display: inline-block;
    }

    .smiley-loading-anim[data-status="loading"] > img[src*="sad"],
    .smiley-loading-anim[data-status="empty"] > img[src*="cool"] {
        display: none;
    }

/* -- Mobile Phones, iPads & Very Small Desktop Screens  -- */
@media screen and (max-width: 1024px) {
    /* Header */
    #body-wrapper-overlay, #body-wrapper-overlay.open-slide-menu {
    }

    .navIcons {
        height: 48px;
    }

    .logoContainer {
        width: 96px;
    }

    .logo {
        height: 48px;
        min-height: 48px;
        max-width: 80px;
    }

    .menu-icons-header {
        flex-grow: 1;
        -ms-flex-positive: 1;
    }

        .menu-icons-header .icon-menu {
            order: 1;
        }

        .menu-icons-header .icon-search {
            order: 2;
        }

        .menu-icons-header .icon-head {
            order: 3;
        }

        .menu-icons-header .icon-bag {
            order: 4;
        }

    .navIcons *[class*="icon-"] {
        width: 25%;
        display: block;
        float: left;
        height: 48px;
        line-height: 48px;
    }

    .ctrNavigation {
        display: none;
        order: 4;
        -webkit-order: 4;
        top: 48px;
        left: 0;
        width: 100%;
        background: white;
        padding: 0;
        height: calc(100vh - 48px);
        min-height: calc(100vh - 48px);
        max-height: calc(100vh - 48px);
        float: left;
        position: absolute;
        z-index: 100;
        height: 100%;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        -webkit-transform: translate3d(0px,0px,0px);
        -ms-transform: translate3d(0px,0px,0px);
        transform: translate3d(0px,0px,0px);
    }

        .ctrNavigation.tbcntOpen {
            display: block;
        }

        .ctrNavigation > .CSSFacetNavModules {
            z-index: 100;
            height: 100%;
            overflow: hidden;
            background: #f4f4f4;
            -webkit-overflow-scrolling: touch;
            -webkit-transform: translate3d(0px,0px,0px);
            -ms-transform: translate3d(0px,0px,0px);
            transform: translate3d(0px,0px,0px);
        }

    .CSSFacetNavModules {
    }

    .NodeLevel0 {
        width: 100%;
        float: left;
        display: block;
        text-align: left;
        line-height: 40px;
        max-height: 100%;
        margin: 0;
    }

        .NodeLevel0 > a {
            width: 100%;
            float: left;
            padding: 20px 48px 20px 16px;
            line-height: 100%;
            background: white;
            border-bottom: 1px solid #d7d7d7;
        }

    a#TopBanner1_CSSFacetNav2_TopLevel_ctl02_hylNode {
    }

    .NodeLevel0 > a:before {
        right: 19px;
    }

    .NodeLevel0 > a:after {
        right: 16px;
    }

    .NodeLevel0 > a.active:before, .NodeLevel0 > a.active:after {
        width: 10px;
        right: 16px;
        background: tomato;
    }

    .NodeLevel0 > .CSSFacetNavModules {
        position: relative;
        top: auto;
        left: auto;
        padding: 16px;
        max-height: calc(100vh - 48px);
        border-bottom: none;
        border-top: none;
        z-index: 10000;
        background: #f4f4f4;
        padding-bottom: 100px;
        -webkit-overflow-scrolling: touch;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }

    .NodeLevel1 {
        width: 100%;
        padding: 0 0 32px 0;
    }

        .NodeLevel1:last-child {
            padding-bottom: 64px;
        }

        .NodeLevel1 > .CSSFacetNavModules > div {
            width: 100%;
        }

    div.basketCtr {
        width: calc(100% - 32px) !important;
        left: 16px;
        max-width: 100%;
    }

    .ctrNavigation > .CSSFacetNavModules {
        display: inline
    }
}

/* iPads  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 769px) and (max-width : 1024px) {
    .NodeLevel1 > .CSSFacetNavModules {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1025px) and (max-width : 1439px) {
    /* Header */
    .NodeLevel0 > .CSSFacetNavModules {
        padding-left: 16px;
        padding-right: 16px;
    }

    .NodeLevel0 > a {
        padding-right: 0;
    }

        .NodeLevel0 > a:before, .NodeLevel0 > a:after {
            display: none;
        }
}

/* Desktops  ------------------------------------------------------------------------------------ */
@media screen and (min-width : 1440px) and (max-width : 1913px) {
    /* Header */
    .logoContainer {
        width: 200px;
    }
}

/* 4K   ------------------------------------------------------------------------------------------ */
@media screen and (min-width : 1914px) {
    /* Header */
    .logoContainer {
        width: 250px;
    }
}
/* NON-DEPLOYED FOOTER ******************************************************************** */
@charset "UTF-8";
/* -- Footer ----- */
.footer {font-size:small;opacity: 1;color: #000;}
.footer img {max-width:100%;margin-bottom: 16px;}
.footer a, .footer span, .footer p {display: block;margin-bottom: 0.5em;color: inherit;}
.citrusDate {
    display: inline-block !important;
    margin: 0 4px;
    margin-bottom: 0 !important;
}
.footer .col-8 > span, .footer .col-3 > span {color:#fff;text-align: left;}
.footer input {border-radius: 8px 0 0 8px;font-size: inherit;width: inherit;min-width: 220px;}
.footer input:active {border-bottom: 1px solid #999 ;}
.footer #newsletter-footer-submit {border-radius: 0px 8px 8px 0px;font-size: inherit;color: #fff;}
.cards a, .cards span, .cards {display: inline-block;font-size: 11px;opacity: 0.7;color: inherit;}
.footerRow:last-of-type {border-top: 1px solid #ababab4a;margin: 64px 0 32px;}
.Promise p {margin: 0 !important;}

.social a {
    height: 50px;
    width: 50px;
    border-radius: 100%;
    display: inline-block;
    margin: 8px;
    background-color: #333 !important;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
    background-position: center !important;
    color: white;
    padding: 16px;
    text-align: center;
}

    .social a.facebook {
        background-image: url("/modules/assets/icons/facebook.svg");
    }
        .social a.facebook:hover {
            background-color: #3b5998 !important;
        }

    .social a.twitter {
        background-image: url("/modules/assets/icons/twitter.svg");
    }
        .social a.twitter:hover {
            background-color: #1da1f2 !important;
        }

    .social a.instagram {
        background-image: url("/modules/assets/icons/instagram.svg");
    }
        .social a.instagram:hover {
            background-color: #c32aa3 !important;
        }

    .social a.pinterest {
        background-image: url("/modules/assets/icons/pinterest.svg");
    }
        .social a.pinterest:hover {
            background-color: #bd081c !important;
        }

    .social a.youtube {
        background-image: url("/modules/assets/icons/youtube.svg");
    }
        .social a.youtube:hover {
            background-color: #ff0000 !important;
        }

    .social a.linkedin {
        background-image: url("/modules/assets/icons/linkedin.svg");
    }

        .social a.linkedin:hover {
            background-color: #0a66c2 !important;
        }

    .social a.tiktok {
        background-image: url("/modules/assets/icons/tiktok.svg");
    }

        .social a.tiktok:hover {
            background-color: #00f2ea !important;
        }

    .social a.strava {
        background-image: url("/modules/assets/icons/strava.svg");
    }

        .social a.strava:hover {
            background-color: #f05222 !important;
        }

    .social a.snapchat {
        background-image: url("/modules/assets/icons/snapchat.svg");
    }

        .social a.snapchat:hover {
            background-color: #fffc00 !important;
        }

    .social a img {
        height: 20px;
        max-height: 100%;
        display: none;
    }

/* -- Mobile Phones  -- */
@media screen and (max-width: 767.99px)
{
    .footer, .footerNewsletter  { text-align:center}
    .footerRow > div { display: block; width: 100%; margin: 21px 0}
}


/* MODULAR FOOTER ******************************************************************** */
#modular-footer-wrapper {
    display:block;
    float:left;
    width:100%;
}

#modular-footer-wrapper .modular-footer-company-details {
    width: 100%;
    display: block;
    float: left;
    padding-top: 32px;
    font-size: 11px;
    text-align: center;
    overflow-wrap: break-word;
}

    #modular-footer-wrapper .modular-footer-company-details div {
        padding: 0 8px 8px 8px;
    }

#modular-footer-wrapper .modular-footer-citruslime---tagline {
    width: 100%;
    display: block;
    float: left;
    padding: 0 8px 8px 8px;
    font-size: 11px;
    text-align: center;
}

#modular-footer-wrapper .modular-footer-review---container,
#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter {
    background: white;
}

    #modular-footer-wrapper .modular-footer-review---container .modular-footer-review---container-inner,
    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container {
        max-width: 1366px;
        margin: auto;
        float: none;
        height: 1%;
        overflow: hidden;
        padding: 32px;
    }

    #modular-footer-wrapper .modular-footer-socials {
        padding: 16px;
        background: white;
        border-bottom: 1px solid #ddd;
        border-top: 1px solid #ddd;
    }

    #modular-footer-wrapper .modular-footer-socials .modular-footer-icons {
        width: 100%;
        display: block;
        float: left;
        padding: 32px 32px 0 32px;
        text-align: center;
    }

        #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a {
            height: 50px;
            width: 50px;
            border-radius: 100%;
            display: inline-block;
            margin: 8px;
            background-color: black;
            background-repeat: no-repeat !important;
            background-size: 20px !important;
            background-position: center !important;
            color: white;
            padding: 16px;
            text-align: center;
        }

            #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.facebook {
                background-image: url("/modules/assets/icons/facebook.svg");
            }

                #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.facebook:hover {
                    background-color: #3b5998 !important;
                }

            #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.twitter {
                background-image: url("/modules/assets/icons/twitter.svg");
            }

                #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.twitter:hover {
                    background-color: #1da1f2 !important;
                }

            #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.instagram {
                background-image: url("/modules/assets/icons/instagram.svg");
            }

                #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.instagram:hover {
                    background-color: #c32aa3 !important;
                }

            #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.pinterest {
                background-image: url("/modules/assets/icons/pinterest.svg");
            }

                #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.pinterest:hover {
                    background-color: #bd081c !important;
                }

            #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.youtube {
                background-image: url("/modules/assets/icons/youtube.svg");
            }

                #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.youtube:hover {
                    background-color: #ff0000 !important;
                }

            #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.linkedin {
                background-image: url("/modules/assets/icons/linkedin.svg");
            }

                #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.linkedin:hover {
                    background-color: #0a66c2 !important;
                }

            #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.tiktok {
                background-image: url("/modules/assets/icons/tiktok.svg");
            }

                #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.tiktok:hover {
                    background-color: #00f2ea !important;
                }

            #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.strava {
                background-image: url("/modules/assets/icons/strava.svg");
            }

                #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.strava:hover {
                    background-color: #f05222 !important;
                }

            #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.snapchat {
                background-image: url("/modules/assets/icons/snapchat.svg");
            }

                #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a.snapchat:hover {
                    background-color: #fffc00 !important;
                }

            #modular-footer-wrapper .modular-footer-socials .modular-footer-icons a img {
                height: 20px;
                max-height: 100%;
                display: none;
            }

    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter {
        width: 100%;
        display: block;
        float: left;
        padding: 16px;
        background: white;
    }

        #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner {
            width: 100%;
            display: -webkit-inline-flex;
            display: -ms-inline-flexbox;
            display: inline-flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

            #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner input {
                flex-grow: 1;
                background: white;
                outline: none !important;
                border: 1px solid #ddd;
                transition: 0.3s all ease-in-out;
                height: 56px;
                line-height: 56px;
                font-size: 18px;
                border-radius: 6px;
                margin-right: 8px;
            }

            #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit {
                flex-grow: 0;
                background: black;
                outline: none !important;
                border: 1px solid black;
                transition: 0.3s all ease-in-out;
                height: 56px;
                line-height: 56px;
                font-size: 18px;
                border-radius: 6px;
                padding: 0 18px;
                color: white;
                cursor: pointer;
                white-space: nowrap;
            }

                #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit:hover {
                    background: #46a4ff;
                }

        #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container #newsletter-footer-text {
            display: none;
            background: dodgerblue;
            color: white;
        }

            #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container #newsletter-footer-text.newsletterFail,
            #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container #newsletter-footer-text.newsletterSuccess {
                display: inline-block;
                padding: 16px;
                margin-top: 16px;
            }

            #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container #newsletter-footer-text.newsletterFail {
                background: crimson;
            }

            #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container #newsletter-footer-text.newsletterSuccess {
                background: #00b917;
            }

#modular-footer-wrapper .modular-footer-retaillinks {
    border-bottom:1px solid #ddd;
    background: white;
}

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container {
        max-width: 1366px;
        margin: auto;
        float: none;
        height: 1%;
        overflow: hidden;
        padding: 32px;
    }

        #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr;
            gap: 32px 32px;
            font-size: 13px;
            line-height: 26px;
        }

            #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
                flex-grow: 1;
            }

            #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner h4 {
                margin: 0 0 1em 0;
                font-size: 16px;
            }

            #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner .modular-footer-retaillinks---logo {
                
            }

                #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner .modular-footer-retaillinks---logo img {
                    max-width: 250px;
                    height: auto;
                }

            #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner a,
            #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner a {
                display: block;
                transition: 0.3s all ease-in-out;
            }

                #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner a:hover,
                #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner a:hover {
                    color: black;
                }

        #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---custommenu:empty {
            display:none;
        }


@media screen and (max-width: 767.99px) {
    #modular-footer-wrapper .modular-footer-citruslime---tagline, #modular-footer-wrapper .modular-footer-review---container .modular-footer-review---container-inner, #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container, #modular-footer-wrapper .modular-footer-citruslime---tagline, #modular-footer-wrapper .modular-footer-review---container .modular-footer-review---container-inner {
        padding: 16px;
    }

    #modular-footer-wrapper .modular-footer-socials {
        padding: 0;
    }

    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner input {
        margin-bottom: 8px;
    }
}

@media screen and (min-width: 768px) {
    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner {
        grid-template-columns: 1fr 1fr;
    }

    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner {
        flex-wrap: nowrap;
    }
}

@media screen and (min-width: 1366px) {
    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
@charset "UTF-8";

.form-section,
.input-section {
    line-height: 47px;
}

button, input, optgroup, select, textarea, [type="button"], [type="reset"], [type="submit"], .button, input[type="submit"], input[type="button"], .defaultbutton {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    height: 47px;
    line-height: 47px;
}

    input[type=checkbox], .checkbox, input[type=radio], input[type=radio], .radio, label {
        border: none;
        display: inline-block;
    }

.lable, lable {
    display: block;
}

input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    position: relative;
    background-color: #f1f1f1;
    height: 14px;
    width: 14px;
    border-radius: 100%;
    margin-right: 7px;
    outline: none;
    color: #666;
    cursor: pointer;
    border: none;
}

    input[type=radio]:checked::before {
        position: absolute;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        top: 50%;
        content: '\2022';
        line-height: 0;
        font-size: 26px;
        color: #fff;
    }

    input[type=radio]:hover {
        background-color: #f7f7f7;
    }

    input[type=radio]:checked {
        background-color: #525151;
        border: none;
    }
@charset "UTF-8";
/* accordion */
.accordianBox {
    border-bottom: 1px solid #e1e1e1;
    width: 100%;
    float: left;
}

.accordianHeader {
    cursor: pointer;
    width: calc(100% - 32px);
    position: relative;
    padding: 32px 0;
    font-family: 'citrfontbold';
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .accordianHeader p {
        margin: 0;
        padding: 0;
        display: inline-block
    }

    .accordianHeader > h3 {
        float: left;
        margin: 0;
        font-size: initial;
    }

    .accordianHeader > span.fa-unsorted {
        padding-left: 21px;
        position: absolute;
        right: -32px;
        top: 50%;
    }

        .accordianHeader > span.fa-unsorted:before, .accordianHeader > span.fa-unsorted:after {
            position: absolute;
            height: 1px;
            width: 13px;
            border-radius: 2px;
            content: ' ';
            display: block;
            background: #868686;
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
            z-index: 1;
        }

        .accordianHeader > span.fa-unsorted:before {
            right: 0;
        }

        .accordianHeader > span.fa-unsorted:after {
            right: 0;
            -moz-transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }

.accordianBox.active .accordianHeader > span.fa-unsorted:before {
    opacity: 0;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.accordianBox.active .accordianHeader > span.fa-unsorted:after {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}

.accordianHeader [class*="icon"] {
    margin-right: 8px;
    position: relative;
    bottom: 2px;
}

.accordianCtn {
    width: 100%;
    float: left;
    margin: 0 0 32px 0;
    display: none;
}

.accordianBox.active .accordianCtn {
    display: block;
}

/* -- Mobile Phones  -- */
@media screen and (max-width: 767.99px) {
    .accordianHeader {
        padding: 16px 0;
    }
}
@charset "UTF-8";
body.compensate-for-scrollbar {
    overflow: hidden
}

.fancybox-active {
    height: auto
}

.fancybox-iosfix {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    width: 100%
}

.fancybox-is-hidden {
    left: -9999px;
    margin: 0;
    position: absolute !important;
    top: -9999px;
    visibility: hidden
}

.fancybox-container {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
    height: 100%;
    left: 0;
    position: fixed;
    -webkit-tap-highlight-color: transparent;
    top: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    width: 100%;
    z-index: 99992
}

    .fancybox-container * {
        box-sizing: border-box
    }

.fancybox-bg, .fancybox-inner, .fancybox-outer, .fancybox-stage {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.fancybox-outer {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto
}

.fancybox-bg {
    background: #1e1e1e;
    opacity: 0;
    transition-duration: inherit;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.47,0,.74,.71)
}

.fancybox-is-open .fancybox-bg {
    opacity: .87;
    transition-timing-function: cubic-bezier(.22,.61,.36,1)
}

.fancybox-caption, .fancybox-infobar, .fancybox-navigation .fancybox-button, .fancybox-toolbar {
    direction: ltr;
    opacity: 0;
    position: absolute;
    transition: opacity .25s,visibility 0s linear .25s;
    visibility: hidden;
    z-index: 99997
}

.fancybox-show-caption .fancybox-caption, .fancybox-show-infobar .fancybox-infobar, .fancybox-show-nav .fancybox-navigation .fancybox-button, .fancybox-show-toolbar .fancybox-toolbar {
    opacity: 1;
    transition: opacity .25s,visibility 0s;
    visibility: visible
}

.fancybox-infobar {
    color: #ccc;
    font-size: 13px;
    -webkit-font-smoothing: subpixel-antialiased;
    height: 44px;
    left: 0;
    line-height: 44px;
    min-width: 44px;
    mix-blend-mode: difference;
    padding: 0 10px;
    pointer-events: none;
    text-align: center;
    top: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.fancybox-toolbar {
    right: 0;
    top: 0
}

.fancybox-stage {
    direction: ltr;
    overflow: visible;
    -webkit-transform: translateZ(0);
    z-index: 99994
}

.fancybox-is-open .fancybox-stage {
    overflow: hidden
}

.fancybox-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: none;
    height: 100%;
    left: 0;
    outline: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 44px;
    position: absolute;
    text-align: center;
    top: 0;
    transition-property: opacity,-webkit-transform;
    transition-property: transform,opacity;
    transition-property: transform,opacity,-webkit-transform;
    white-space: normal;
    width: 100%;
    z-index: 99994
}

    .fancybox-slide:before {
        content: "";
        display: inline-block;
        height: 100%;
        margin-right: -.25em;
        vertical-align: middle;
        width: 0
    }

.fancybox-is-sliding .fancybox-slide, .fancybox-slide--current, .fancybox-slide--next, .fancybox-slide--previous {
    display: block
}

.fancybox-slide--next {
    z-index: 99995
}

.fancybox-slide--image {
    overflow: visible;
    padding: 44px 0
}

    .fancybox-slide--image:before {
        display: none
    }

.fancybox-slide--html {
    padding: 6px 6px 0
}

.fancybox-slide--iframe {
    padding: 44px 44px 0
}

.fancybox-content {
    background: #fff;
    display: inline-block;
    margin: 0 0 6px;
    max-width: 100%;
    overflow: auto;
    padding: 0;
    padding: 24px;
    position: relative;
    text-align: left;
    vertical-align: middle
}

.fancybox-slide--image .fancybox-content {
    -webkit-animation-timing-function: cubic-bezier(.5,0,.14,1);
    animation-timing-function: cubic-bezier(.5,0,.14,1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    left: 0;
    margin: 0;
    max-width: none;
    overflow: visible;
    padding: 0;
    position: absolute;
    top: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    transition-property: opacity,-webkit-transform;
    transition-property: transform,opacity;
    transition-property: transform,opacity,-webkit-transform;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 99995
}

.fancybox-can-zoomOut .fancybox-content {
    cursor: zoom-out
}

.fancybox-can-zoomIn .fancybox-content {
    cursor: zoom-in
}

.fancybox-can-drag .fancybox-content {
    cursor: -webkit-grab;
    cursor: grab
}

.fancybox-is-dragging .fancybox-content {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.fancybox-container [data-selectable=true] {
    cursor: text
}

.fancybox-image, .fancybox-spaceball {
    background: transparent;
    border: 0;
    height: 100%;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    padding: 0;
    position: absolute;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%
}

.fancybox-spaceball {
    z-index: 1
}

.fancybox-slide--html .fancybox-content {
    margin-bottom: 6px
}

.fancybox-slide--iframe .fancybox-content, .fancybox-slide--map .fancybox-content, .fancybox-slide--video .fancybox-content {
    height: 100%;
    margin: 0;
    overflow: visible;
    padding: 0;
    width: 100%
}

.fancybox-slide--video .fancybox-content {
    background: #000
}

.fancybox-slide--map .fancybox-content {
    background: #e5e3df
}

.fancybox-slide--iframe .fancybox-content {
    background: #fff;
    height: calc(100% - 44px);
    margin-bottom: 44px
}

.fancybox-iframe, .fancybox-video {
    background: transparent;
    border: 0;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%
}

.fancybox-iframe {
    vertical-align: top
}

.fancybox-error {
    background: #fff;
    cursor: default;
    max-width: 400px;
    padding: 40px;
    width: 100%
}

    .fancybox-error p {
        color: #444;
        font-size: 16px;
        line-height: 20px;
        margin: 0;
        padding: 0
    }

.fancybox-button {
    background: rgba(30,30,30,.6);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    height: 44px;
    margin: 0;
    outline: none;
    padding: 10px;
    transition: color .2s;
    vertical-align: top;
    width: 44px
}

    .fancybox-button, .fancybox-button:link, .fancybox-button:visited {
        color: #ccc
    }

        .fancybox-button:focus, .fancybox-button:hover {
            color: #fff
        }

        .fancybox-button.disabled, .fancybox-button.disabled:hover, .fancybox-button[disabled], .fancybox-button[disabled]:hover {
            color: #888;
            cursor: default
        }

        .fancybox-button svg {
            display: block;
            overflow: visible;
            position: relative;
            shape-rendering: geometricPrecision
        }

            .fancybox-button svg path {
                fill: transparent;
                stroke: currentColor;
                stroke-linejoin: round;
                stroke-width: 3
            }

.fancybox-button--pause svg path:nth-child(1), .fancybox-button--play svg path:nth-child(2) {
    display: none
}

.fancybox-button--play svg path, .fancybox-button--share svg path, .fancybox-button--thumbs svg path {
    fill: currentColor
}

.fancybox-button--share svg path {
    stroke-width: 1
}

.fancybox-navigation .fancybox-button {
    height: 38px;
    opacity: 0;
    padding: 6px;
    position: absolute;
    top: 50%;
    width: 38px
}

.fancybox-show-nav .fancybox-navigation .fancybox-button {
    transition: opacity .25s,visibility 0s,color .25s
}

.fancybox-navigation .fancybox-button:after {
    content: "";
    left: -25px;
    padding: 50px;
    position: absolute;
    top: -25px
}

.fancybox-navigation .fancybox-button--arrow_left {
    left: 6px
}

.fancybox-navigation .fancybox-button--arrow_right {
    right: 6px
}

.fancybox-close-small {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #555 !important;
    cursor: pointer;
    height: 44px;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    z-index: 10;
}

    .fancybox-close-small svg {
        fill: transparent;
        opacity: .8;
        stroke: currentColor;
        stroke-width: 1.5;
        transition: stroke .1s;
        background: #3c3c3c;
        color: #fff;
    }

    .fancybox-close-small:focus {
        outline: none
    }

    .fancybox-close-small:hover svg {
        opacity: 1
    }

.fancybox-slide--iframe .fancybox-close-small, .fancybox-slide--image .fancybox-close-small, .fancybox-slide--video .fancybox-close-small {
    color: #ccc;
    padding: 5px;
    right: -12px;
    top: -44px
}

    .fancybox-slide--iframe .fancybox-close-small:hover svg, .fancybox-slide--image .fancybox-close-small:hover svg, .fancybox-slide--video .fancybox-close-small:hover svg {
        background: transparent;
        color: #fff
    }

.fancybox-is-scaling .fancybox-close-small, .fancybox-is-zoomable.fancybox-can-drag .fancybox-close-small {
    display: none
}

.fancybox-caption {
    bottom: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    left: 0;
    line-height: 1.5;
    padding: 25px 44px;
    right: 0
}

    .fancybox-caption:before {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEtCAQAAABjBcL7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHRJREFUKM+Vk8EOgDAIQ0vj/3+xBw8qIZZueFnIKC90MCAI8DlrkHGeqqGIU6lVigrBtpCWqeRWoHDNqs0F7VNVBVxmHRlvoVqjaYkdnDIaivH2HqZ5+oZj3JUzWB+cOz4G48Bg+tsJ/tqu4dLC/4Xb+0GcF5BwBC0AA53qAAAAAElFTkSuQmCC);
        background-repeat: repeat-x;
        background-size: contain;
        bottom: 0;
        content: "";
        display: block;
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: -25px;
        z-index: -1
    }

    .fancybox-caption:after {
        border-bottom: 1px solid hsla(0,0%,100%,.3);
        content: "";
        display: block;
        left: 44px;
        position: absolute;
        right: 44px;
        top: 0
    }

    .fancybox-caption a, .fancybox-caption a:link, .fancybox-caption a:visited {
        color: #ccc;
        text-decoration: none
    }

        .fancybox-caption a:hover {
            color: #fff;
            text-decoration: underline
        }

.fancybox-loading {
    -webkit-animation: a .8s infinite linear;
    animation: a .8s infinite linear;
    background: transparent;
    border: 6px solid hsla(0,0%,39%,.5);
    border-radius: 100%;
    border-top-color: #fff;
    height: 60px;
    left: 50%;
    margin: -30px 0 0 -30px;
    opacity: .6;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 60px;
    z-index: 99999
}

@-webkit-keyframes a {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes a {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

.fancybox-animated {
    transition-timing-function: cubic-bezier(0,0,.25,1)
}

.fancybox-fx-slide.fancybox-slide--previous {
    opacity: 0;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0)
}

.fancybox-fx-slide.fancybox-slide--next {
    opacity: 0;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0)
}

.fancybox-fx-slide.fancybox-slide--current {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.fancybox-fx-fade.fancybox-slide--next, .fancybox-fx-fade.fancybox-slide--previous {
    opacity: 0;
    transition-timing-function: cubic-bezier(.19,1,.22,1)
}

.fancybox-fx-fade.fancybox-slide--current {
    opacity: 1
}

.fancybox-fx-zoom-in-out.fancybox-slide--previous {
    opacity: 0;
    -webkit-transform: scale3d(1.5,1.5,1.5);
    transform: scale3d(1.5,1.5,1.5)
}

.fancybox-fx-zoom-in-out.fancybox-slide--next {
    opacity: 0;
    -webkit-transform: scale3d(.5,.5,.5);
    transform: scale3d(.5,.5,.5)
}

.fancybox-fx-zoom-in-out.fancybox-slide--current {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.fancybox-fx-rotate.fancybox-slide--previous {
    opacity: 0;
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn)
}

.fancybox-fx-rotate.fancybox-slide--next {
    opacity: 0;
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn)
}

.fancybox-fx-rotate.fancybox-slide--current {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}

.fancybox-fx-circular.fancybox-slide--previous {
    opacity: 0;
    -webkit-transform: scale3d(0,0,0) translate3d(-100%,0,0);
    transform: scale3d(0,0,0) translate3d(-100%,0,0)
}

.fancybox-fx-circular.fancybox-slide--next {
    opacity: 0;
    -webkit-transform: scale3d(0,0,0) translate3d(100%,0,0);
    transform: scale3d(0,0,0) translate3d(100%,0,0)
}

.fancybox-fx-circular.fancybox-slide--current {
    opacity: 1;
    -webkit-transform: scaleX(1) translateZ(0);
    transform: scaleX(1) translateZ(0)
}

.fancybox-fx-tube.fancybox-slide--previous {
    -webkit-transform: translate3d(-100%,0,0) scale(.1) skew(-10deg);
    transform: translate3d(-100%,0,0) scale(.1) skew(-10deg)
}

.fancybox-fx-tube.fancybox-slide--next {
    -webkit-transform: translate3d(100%,0,0) scale(.1) skew(10deg);
    transform: translate3d(100%,0,0) scale(.1) skew(10deg)
}

.fancybox-fx-tube.fancybox-slide--current {
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1)
}

.fancybox-share {
    background: #f4f4f4;
    border-radius: 3px;
    max-width: 90%;
    padding: 30px;
    text-align: center
}

    .fancybox-share h1 {
        color: #222;
        font-size: 35px;
        font-weight: 700;
        margin: 0 0 20px
    }

    .fancybox-share p {
        margin: 0;
        padding: 0
    }

.fancybox-share__button {
    border: 0;
    border-radius: 3px;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    line-height: 40px;
    margin: 0 5px 10px;
    min-width: 130px;
    padding: 0 15px;
    text-decoration: none;
    transition: all .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap
}

    .fancybox-share__button:link, .fancybox-share__button:visited {
        color: #fff
    }

    .fancybox-share__button:hover {
        text-decoration: none
    }

.fancybox-share__button--fb {
    background: #3b5998
}

    .fancybox-share__button--fb:hover {
        background: #344e86
    }

.fancybox-share__button--pt {
    background: #bd081d
}

    .fancybox-share__button--pt:hover {
        background: #aa0719
    }

.fancybox-share__button--tw {
    background: #1da1f2
}

    .fancybox-share__button--tw:hover {
        background: #0d95e8
    }

.fancybox-share__button svg {
    height: 25px;
    margin-right: 7px;
    position: relative;
    top: -1px;
    vertical-align: middle;
    width: 25px
}

    .fancybox-share__button svg path {
        fill: #fff
    }

.fancybox-share__input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #d7d7d7;
    border-radius: 0;
    color: #5d5b5b;
    font-size: 14px;
    margin: 10px 0 0;
    outline: none;
    padding: 10px 15px;
    width: 100%
}

.fancybox-thumbs {
    background: #fff;
    bottom: 0;
    display: none;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding: 2px 2px 4px;
    position: absolute;
    right: 0;
    -webkit-tap-highlight-color: transparent;
    top: 0;
    width: 212px;
    z-index: 99995
}

.fancybox-thumbs-x {
    overflow-x: auto;
    overflow-y: hidden
}

.fancybox-show-thumbs .fancybox-thumbs {
    display: block
}

.fancybox-show-thumbs .fancybox-inner {
    right: 212px
}

.fancybox-thumbs > ul {
    font-size: 0;
    height: 100%;
    list-style: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    position: absolute;
    position: relative;
    white-space: nowrap;
    width: 100%
}

.fancybox-thumbs-x > ul {
    overflow: hidden
}

.fancybox-thumbs-y > ul::-webkit-scrollbar {
    width: 7px
}

.fancybox-thumbs-y > ul::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,.3)
}

.fancybox-thumbs-y > ul::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 10px
}

.fancybox-thumbs > ul > li {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    cursor: pointer;
    float: left;
    height: 75px;
    margin: 2px;
    max-height: calc(100% - 8px);
    max-width: calc(50% - 4px);
    outline: none;
    overflow: hidden;
    padding: 0;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    width: 100px
}

.fancybox-thumbs-loading {
    background: rgba(0,0,0,.1)
}

.fancybox-thumbs > ul > li {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

    .fancybox-thumbs > ul > li:before {
        border: 4px solid #4ea7f9;
        bottom: 0;
        content: "";
        left: 0;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
        transition: all .2s cubic-bezier(.25,.46,.45,.94);
        z-index: 99991
    }

.fancybox-thumbs .fancybox-thumbs-active:before {
    opacity: 1
}

@media (max-width:800px) {
    .fancybox-thumbs {
        width: 110px
    }

    .fancybox-show-thumbs .fancybox-inner {
        right: 110px
    }

    .fancybox-thumbs > ul > li {
        max-width: calc(100% - 10px)
    }
}
@charset "UTF-8";
/*  Fixed width + Nav */
.fixed, .NodeLevel0 > .CSSFacetNavModules {
    max-width: 90%;
}

.maxInner {
    max-width: 1366px;
    margin: auto;
    float: none;
    height: 1%;
    overflow: hidden;
}




.xx-small {
    font-size: xx-small;
}

.x-small {
    font-size: x-small;
}

.small {
    font-size: small;
}

.normal {
    font-size: medium;
}

.large {
    font-size: large;
}

.x-large {
    font-size: x-large;
}

.xx-large {
    font-size: xx-large;
}

.tt-uppercase {
    text-transform:uppercase;
}

.ls---0-1em {
    letter-spacing:0.1em;
}

.lh--100-perc {
    line-height:100%;
}

/*  General */
html, body {
    background: #efefef
}

.container {
    background: #fff;
}

.colorwhite {
    color: white
}

.colorblack {
    color: black
}

.backgroundwhite {
    background: white
}

.backgroundblack {
    background: black
}

.backgroundblacki {
    background: black !important;
}

.left-aligned {
    text-align: left;
}

.right-aligned {
    text-align: right;
}

.centralised {
    text-align: center
}

.warning, .errorMsg {
    color: #F00;
    background: #FFF4F4;
    border-left: 1px solid #FF0000;
}

    .warning i {
        margin: 0 7px
    }

    .warning span {
        border-bottom: 1px solid #FF9999;
        text-transform: uppercase;
        font-weight: 700;
    }

/*  Alerts */
#divID {
    padding: 28px
}

.alert {
    border: 1px solid transparent;
    color: #000;
    font-weight: 500;
    padding: 16px;
    position: relative;
    margin: 8px 0;
    text-align: center;
    display: inline-block;
}

    .alert strong {
        font-size: large
    }

    .alert p {
        opacity: 0.8
    }

    .alert.info {
        border-color: #9fcdff;
        color: #2c76c7;
    }

    .alert.success {
        border-color: #96dab5;
        color: #35ac6b;
    }

    .alert.notice {
        border-color: #fed37d;
        color: #cf9215;
    }

    .alert.errorMsg {
        border-color: #ffbfbf;
        color: #cf1515;
    }


/*  Top Banner Call to Actions */
.tbCTA {
    background: #161b23;
    border-bottom: 1px solid #393f4a;
    font-size: x-small;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    height: 42px;
}

#flexsliderCTA li p {
    text-align: center;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 42px;
    line-height: 42px;
    overflow: hidden;
}

#flexsliderCTA .flex-direction-nav {
    display: none
}


.typo > div {
    margin-bottom: 56px;
}

    .typo > div > div {
        display: inline-block;
        margin-right: 16px;
        vertical-align: top;
    }


/*  Top body Padding, Sticky nav*/
body {
    padding-top: 75px
}

.fade-out-siblings:hover > * {
    -webkit-filter: grayscale(1);
}

    .fade-out-siblings:hover > *:hover {
        -webkit-filter: grayscale(0);
    }

/* Large Mobile Phones  --------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    body {
        padding-top: 48px
    }
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023px) {
    body {
        padding-top: 64px
    }
}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) and (max-width : 1439px) {
    body {
        padding-top: 75px
    }
}

/* Desktops  ------------------------------------------------------------------------------------ */
@media screen and (min-width : 1440px) and (max-width : 1913px) {
    body {
        padding-top: 75px
    }
}

/* 4K   ------------------------------------------------------------------------------------------ */
@media screen and (min-width : 1914px) {
    body {
        padding-top: 75px
    }
}


.cart-lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 13px;
}

    .cart-lds-ellipsis div {
        position: absolute;
        top: 0;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #ccc;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
    }

        .cart-lds-ellipsis div:nth-child(1) {
            left: 8px;
            animation: cart-lds-ellipsis1 0.6s infinite;
            background: antiquewhite;
        }

        .cart-lds-ellipsis div:nth-child(2) {
            left: 8px;
            animation: cart-lds-ellipsis2 0.6s infinite;
            background: aliceblue;
        }

        .cart-lds-ellipsis div:nth-child(3) {
            left: 32px;
            animation: cart-lds-ellipsis2 0.6s infinite;
            background: azure;
        }

        .cart-lds-ellipsis div:nth-child(4) {
            left: 56px;
            animation: cart-lds-ellipsis3 0.6s infinite;
            background: cornsilk;
        }

@keyframes cart-lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes cart-lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes cart-lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}
@charset "UTF-8";
div[class*="css-image"] {-webkit-background-size: 100% !important;-moz-background-size: cover !important;-o-background-size: cover !important;background-size: cover !important;background-position: center center !important; position: relative;width:100%;height:100%;z-index:1;}
div[class*="css-image"].bgContain {background-size:contain !important;}

/* Image Media Queries */
@media screen and (max-width : 320px)
{
	.css-image-414, .css-image-767, .css-image-1024, .css-image-1440, .css-image-1800, .css-image-4k {display:none !important; background: none !important;}
	.css-image-320 {display:block !important;}
}

@media screen and (min-width : 321px) and (max-width : 414px)
{
	#prodInfoLeft .MIViconPlus:before {top: 16px;left: 16px;}
	.css-image-320, .css-image-767, .css-image-1024, .css-image-1440, .css-image-1800, .css-image-4k {display:none !important; background: none !important;}
	.css-image-414 {display:block !important;}
}
@media screen and (min-width : 415px) and (max-width : 767px)
{
	.css-image-414, .css-image-320, .css-image-1024, .css-image-1440, .css-image-1800, .css-image-4k {display:none !important; background: none !important;}
	.css-image-767 {display:block !important;}
}
@media screen and (min-width : 768px) and (max-width : 1024px)
{
	.css-image-414, .css-image-767, .css-image-320, .css-image-1440, .css-image-1800, .css-image-4k {display:none !important; background: none !important;}
	.css-image-1024 {display:block !important;}
}
@media screen and (min-width : 1025px) and (max-width : 1440px)
{
	.css-image-414, .css-image-767, .css-image-1024, .css-image-320, .css-image-1800, .css-image-4k {display:none !important; background: none !important;}
	.css-image-1440 {display:block !important;}
}
@media screen and (min-width : 1441px) and (max-width : 1920px)
{
	.css-image-414, .css-image-767, .css-image-1024, .css-image-1440, .css-image-320, .css-image-4k {display:none !important; background: none !important;}
	.css-image-1800 {display:block !important;}
}
@media screen and (min-width : 1920.1px)
{
	.css-image-414, .css-image-767, .css-image-1024, .css-image-1440, .css-image-1800, .css-image-320 {display:none !important; background: none !important;}
	.css-image-4k {display:block !important;}
}
@charset "UTF-8";
.US_flag{
	left: -250px;
	top: 10%;
	margin-left: 50%;
	position: absolute;
	display: block;
	width: 500px;
	height: 20px;
	background: #cc0000;
	box-shadow: 0 20px 0 #f3f3f3, 0 40px 0 #cc0000, 0 60px 0 #f3f3f3, 0 80px 0 #cc0000, 0 100px 0 #f3f3f3, 0 120px 0 #cc0000, 0 140px 0 #f3f3f3, 0 160px 0 #cc0000, 0 180px 0 #f3f3f3, 0 200px 0 #cc0000, 0 220px 0 #f3f3f3, 0 240px 0 #cc0000;
}
.US_flag:before{
	content: "\0020";
	background: #191b6d;
	display: block;
	width: 200px;
	height: 140px;
	position: absolute;
}
.US_flag:after{
	content: "\2605";
	font-size: 14px;
	color: #f3f3f3;
	text-style: none;
	display: block;
	width: 500px;
	position: absolute;
	margin: 5px;
	text-shadow: 35px 0 0 #f3f3f3, 70px 0 0 #f3f3f3, 105px 0 0 #f3f3f3, 140px 0 0 #f3f3f3, 175px 0 0 #f3f3f3, 17px 14px 0 #f3f3f3, 52px 14px 0 #f3f3f3,   87px 14px 0 #f3f3f3,  122px 14px 0 #f3f3f3, 157px 14px 0 #f3f3f3, 0 28px 0 #f3f3f3, 35px 28px 0 #f3f3f3, 70px 28px 0 #f3f3f3, 105px 28px 0 #f3f3f3, 140px 28px 0 #f3f3f3, 175px 28px 0 #f3f3f3, 17px 42px 0 #f3f3f3, 52px 42px 0 #f3f3f3,   87px 42px 0 #f3f3f3,  122px 42px 0 #f3f3f3, 157px 42px 0 #f3f3f3, 0 56px 0 #f3f3f3, 35px 56px 0 #f3f3f3, 70px 56px 0 #f3f3f3, 105px 56px 0 #f3f3f3, 140px 56px 0 #f3f3f3, 175px 56px 0 #f3f3f3,    17px 70px 0 #f3f3f3, 52px 70px 0 #f3f3f3,   87px 70px 0 #f3f3f3,  122px 70px 0 #f3f3f3, 157px 70px 0 #f3f3f3, 0 84px 0 #f3f3f3, 35px 84px 0 #f3f3f3, 70px 84px 0 #f3f3f3, 105px 84px 0 #f3f3f3, 140px 84px 0 #f3f3f3, 175px 84px 0 #f3f3f3, 17px 98px 0 #f3f3f3, 52px 98px 0 #f3f3f3,   87px 98px 0 #f3f3f3,  122px 98px 0 #f3f3f3, 157px 98px 0 #f3f3f3, 0 112px 0 #f3f3f3, 35px 112px 0 #f3f3f3, 70px 112px 0 #f3f3f3, 105px 112px 0 #f3f3f3, 140px 112px 0 #f3f3f3, 175px 112px 0 #f3f3f3;
}
/*  Duplicated CSS - redundant file */
@charset "UTF-8";
/* -- Store pages ----- */
.tabs{padding: 0px;list-style: none;padding-top: 10px;padding-bottom: 14px;border-bottom: 1px solid #ababab4a;}
.tabs li{text-align: center;display: inline-block;vertical-align: middle;position: relative;margin-right: 32px;-webkit-transition: .3s;-o-transition: .3s;transition: .3s;cursor: pointer;font-style: normal; -webkit-touch-callout: none;  -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.tabs li:after {content: "";height: 2px;background: #63c8eb;width: 100%;left: 0;position: absolute;bottom: -14px;-webkit-transform: scaleX(0);-ms-transform: scaleX(0);transform: scaleX(0);-webkit-transition: .3s ease-in-out;-o-transition: .3s ease-in-out;transition: .3s ease-in-out;}
.tabs li.current:after { -webkit-transform: scaleX(1);-ms-transform: scaleX(1);transform: scaleX(1);}
.tabsContent { margin-top: 16px;}
.tabsContent > div {display: none;padding: 0px;margin: 0;width: 100%;}
.tabsContent > div.current {display:inline-block;}
@charset "UTF-8";
/*  Bradcrumbs */
.breadcrumbsContainer, .breadcrumbs {
    font-size: smaller;
}

    .breadcrumbs a {
        opacity: 0.5
    }

    .breadcrumbs a {
        padding: 0 18px 0 0;
        position: relative;
        cursor: pointer;
        color: inherit;
    }

        .breadcrumbs a:before, .breadcrumbs a:after {
            position: absolute;
            height: 2px;
            width: 5px;
            border-radius: 2px;
            content: ' ';
            display: block;
            background: #bbb;
            top: calc(50% - 2px);
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
        }

        .breadcrumbs a:before {
            right: 6px;
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .breadcrumbs a:after {
            right: 6px;
            top: 8px;
            -moz-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

            .breadcrumbs a:last-of-type:before, .breadcrumbs a:last-of-type:after {
                display:none;
            }
@charset "UTF-8";
@font-face {
    font-family: 'citrfontbold';
    src: url('/ssl/secure/resources/nner-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'citrfontreg';
    src: url('/ssl/secure/resources/nner-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MuliRegularFont';
    src: url('/ssl/secure/resources/nner-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MuliBoldFont';
    src: url('/ssl/secure/resources/nner-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* -- global  -- */
html, body {
    background: #fafafa;
    font-family: 'citrfontreg';
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .current, .bannerTitle, .NodeLevel0 > a > span, .NodeLevel0 > a, .mainFont, .ctaTitle, .boldfont {
    font-family: 'citrfontbold';
}

.regularfont {
    font-family: 'citrfontreg';
}

[class*="icon-"]:hover, .NodeLevel0 > a.active, .NodeLevel0 > a.active > span:after, .footer a:hover, .footer a:hover p, a, .checkList li:before {
    color: #2C3368
}

    .NodeLevel0 > a.active:before, .NodeLevel0 > a.active:after, .noUi-connect, .noUi-tooltip, .basketPip, a.flex-active, .noUi-tooltip, .noUi-connect, .facetSelectedff.checked, .wsPrice, a.flex-active, .social a {
        background: #2c3368
    }

.fixed, .NodeLevel0 > .CSSFacetNavModules {
    max-width: 90%;
}

@media screen and (max-width : 320px) {
    .fixed, .NodeLevel0 > .CSSFacetNavModules {
        max-width: 100%;
    }
}

@media screen and (min-width : 321px) and (max-width : 414px) {
    .fixed, .NodeLevel0 > .CSSFacetNavModules {
        max-width: 100%;
    }
}

@media screen and (min-width : 415px) and (max-width : 767px) {
    .fixed, .NodeLevel0 > .CSSFacetNavModules {
        max-width: 100%;
    }
}

@media screen and (min-width : 768px) and (max-width : 1024px) {
    .fixed, .NodeLevel0 > .CSSFacetNavModules {
        max-width: 100%;
    }
}

@media screen and (min-width : 1025px) and (max-width : 1440px) {
    .fixed, .NodeLevel0 > .CSSFacetNavModules {
        max-width: 95%;
    }
}

@media screen and (min-width : 1441px) and (max-width : 1920px) {
    .fixed, .NodeLevel0 > .CSSFacetNavModules {
        max-width: 90%;
    }
}

@media screen and (min-width : 1920.1px) {
}

/* Borders, Bakgrounds & Font Colours */
.border1 {
    border: 1px solid #ccc;
}

.border2 {
    border: 1px solid #2f76ec;
}

.border3 {
    border: 1px solid #ddd;
}

.border4 {
    border: 1px solid #eee;
}

.border5 {
    border: 1px solid #484848;
}

.border6 {
    border: 1px solid #46d82d;
}

.border7 {
    border: 1px solid #fd4239;
}

.border7i {
    border: 1px solid #fd4239 !important;
}

.borderi {
    border: 1px solid;
}

.borderdotted, .collect-open-CollectPlus {
    border-style: dotted;
}

.bbottomc {
    border-bottom: 1px solid;
    padding-bottom: 3px;
}

.border-thick {
    border-width: 3px;
}

.removeborder-left {
    border-left: none;
}

.removeborder-right {
    border-right: none;
}

.removeborder-top {
    border-top: none;
}

.removeborder-bottom {
    border-bottom: none;
}

.borderradius {
    border-radius: 4px;
}

.borderradius3 {
    border-radius: 3px;
}

.borderradius8 {
    border-radius: 8px;
}

.borderradius100 {
    border-radius: 100%;
}

@media screen and (max-width: 767px) {
    .removeborder-mobile {
        border: 0;
    }
}

.coGreen {
    color: #46d82d;
}

.coBlue, .coStandard, .requiredfield, .metapackselectspoof > span > i {
    color: #2f76ec;
}

.co888, .optionalfield {
    color: #555;
}

.coCCC {
    color: #ccc;
}

.coRED {
    color: #fd4239;
}

.coStarbuys {
    color: #a46ec2;
}

.coWhite {
    color: white;
}

.bgWhite {
    background: white;
}

.bgf4 {
    background: #f4f4f4;
}

.bgeb {
    background: #eee;
}

.bgd7 {
    background: #ddd;
}

.bgStandard {
    background: #2f76ec;
}

.bgGreen {
    background: #46d82d;
}

.bgLGreen {
    background: #E8FFED;
}

.bgLBlue {
    background: #e8f4ff;
}

.bgLRed {
    background: #fee7e6;
}

.bgSemiWhite {
    background: rgba(255,255,255,0.05);
}

.bgSemiDark {
    background: rgba(14, 19, 27, 0.5);
}

.opposite-colour {
    filter: hue-rotate(180deg);
}

/* -- Dark Them global  -- */
.dark, .dark form, .dark html, .dark body, .dark footer {
    background: #0E131B;
    color: #fff
}

    .dark .container, .dark .NodeLevel0 > .CSSFacetNavModules {
        background: #161d27;
    }

/* -- forms gloable  -- */
input, textarea, button, .button, select, .defaultbutton {
    padding: 0 16px;
    border-radius: 8px;
}

@media screen and (max-width: 767px) {
    input, textarea, button, .button, select, .defaultbutton {
        border-radius: 4px;
    }
}



/* -- forms input  -- */
input, textarea, select {
    border: none;
    clear: both;
    display: inline-block;
    border: 1px solid rgba(200,200,200,0.2);
    background: rgba(200,200,200,0.2);
    border-radius: 6px;
    width: 100%;
}

textarea {
    min-height: 200px
}

    input:hover, textarea:hover, select:hover {
        background: rgba(200,200,200,0.25);
    }

    input:active, input:focus, textarea:active, textarea:focus, select:active, select:focus {
        border: 1px solid #2f76ec;
        background: rgba(200,200,200,0.1);
    }

.dark input, .dark textarea {
    color: #fff
}

    .dark input:active, .dark input:focus, .dark textarea:active, .dark textarea:focus {
        border: 1px solid #f1752d
    }

    .dark input::-webkit-input-placeholder, .dark input:-moz-placeholder, .dark input::-moz-placeholder, .dark input:-ms-input-placeholder, .dark textarea::-webkit-input-placeholder, .dark textarea:-moz-placeholder, .dark textarea::-moz-placeholder, .dark textarea:-ms-input-placeholder, .dark select:-ms-input-placeholder, .dark select::-webkit-input-placeholder, .dark select:-moz-placeholder, .dark select::-moz-placeholder, .dark select:-ms-input-placeholder {
        color: #fff
    }

/* -- forms buttons  -- */

.pointer, button, .button, button:hover, .button:hover, input[type="submit"], input[type="button"], .defaultbutton {
    cursor: pointer;
}

button, .button, button:hover, .button:hover, input[type="submit"], input[type="button"] {
    -webkit-appearance: none;
    border: none;
    display: inline-block;
    text-decoration: none;
    color: #fff;
}

button, .button {
    background: #2f76ec;
    color: #fff;
    font-weight: 400;
    text-align: center;
}

    .button.buttonpunchdown {
        background-color: #e0ecff;
        color: #161d27;
    }

    .button.small-button {
        padding: 0 8px;
        line-height: 32px;
        height: 32px;
        font-size: 0.85em;
    }

.dark .button, .dark button {
    background-color: #f1752d;
}

button.ghost-button, input[type="submit"].ghost-button, a.ghost-button {
    background: transparent;
    border: 1px solid #2F76EC;
    color: #2f76ec;
}

    button.ghost-button:hover, input[type="submit"].ghost-button:hover, a.ghost-button:hover {
        color: white;
        background: #2f76ec;
        border: 1px solid #2F76EC;
    }

    button.ghost-button.ghost-button-red, input[type="submit"].ghost-button.ghost-button-red, a.ghost-button.ghost-button-red {
        border-color: crimson;
        color: crimson;
    }

        button.ghost-button.ghost-button-red:hover, input[type="submit"].ghost-button.ghost-button-red:hover, a.ghost-button.ghost-button-red:hover {
            background: crimson;
            border-color: crimson;
            color: white;
        }


/* -- forms select  -- */
select {
    position: relative;
    padding-right: 42px;
    display: block;
}

.dark select {
    color: #fff
}

.dark option {
    color: #000
}

.selectWrapper {
    position: relative
}

    .selectWrapper:before, .selectWrapper:after {
        height: 1px;
        width: 10px;
        border-radius: 2px;
        content: ' ';
        display: block;
        background: #868686;
        top: calc(50% - -1px);
        z-index: 1;
        position: absolute;
    }

    .selectWrapper:before {
        right: 21px;
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .selectWrapper:after {
        right: 14px;
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }


/* -- forms lable  -- */
.lable, lable {
    font-size: small;
    text-transform: uppercase;
    margin-bottom: 8px
}

/* -- forms feedback  -- */
.success {
    background: #4BA835 !important
}

.error {
    background: #A82123 !important
}

.disabled, :disabled, .a2bButtonInactive {
    opacity: 0.3;
    cursor: not-allowed !important;
    background: #333 !important
}

/* -- header basket  -- */
.basketCtr {
    background: #fff;
    -webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.10);
    -moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.10);
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.10);
    max-height: calc(100vh - 110px);
}

/* -- header Dropdown nav  -- */
.navIcons, .NodeLevel0 > .CSSFacetNavModules {
}

.NodeLevel1 > a {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
    width: 100%;
    display: block;
    border-bottom: 1px solid #ababab4a;
    margin-bottom: 16px;
}

.NodeLevel2 > a {
    position: relative;
    overflow: hidden;
    display: inline-block;
    
    line-height: 150% !important;
}

    .NodeLevel2 > a:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 1px;
        background: #9d9d9d;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .NodeLevel2 > a:hover:before {
        width: 100%;
    }
/* -- footer -- */

@charset "UTF-8";
/* CSS Document */
.topCTA {border-bottom: 1px solid #ababab4a;text-align: center;margin: auto;overflow: auto;justify-content: space-between;-webkit-overflow-scrolling: touch;}
.topCTA a {padding: 12px 16px;font-size: smaller;color: #666;flex-shrink: 0;}
.topCTA a:before{display:inline-block;font-family:feather;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscalel;font-size:smaller;margin-right: 8px;color: #286cc3;position: relative;bottom: 2px;}
.topCTA p { margin:0; padding:0; display: inline-block;}
.topCTA a:nth-child(1):before{ content:"\e9ec";}
.topCTA a:nth-child(2):before{ content:"\e9d1";}
.topCTA a:nth-child(3):before{ content:"\e9e5";}
.topCTA a:nth-child(4):before{ content:"\e901";}
.topCTA a:nth-child(5):before{ content:"\e046";}
.topCTA a:nth-child(6):before{ content:"\e009";}
@charset "UTF-8";

/*  Finance Calculator */
.finance-pop-wrap {max-width:1000px;}
#finance.fancybox-content {padding:0;}

table#radFinanceProductList {
    border-collapse: collapse;
    width: 100%;
    font-family: 'citrfontreg', Arial, Helvetica, sans-serif;
    line-height: 1em;
}

    table#radFinanceProductList tr {
        float: left;
        display: block;
        width: 100%;
        margin: 0;
        margin-bottom: 8px;
        line-height: 24px;
    }

    table#radFinanceProductList td {
        text-align: left;
        width: 100%;
        display: block;
    }

    table#radFinanceProductList input {
        display:none;
    }

        table#radFinanceProductList input + label{
            display: block;
            float: left;
            width: 100%;
        }

        table#radFinanceProductList input + label:before {
            display: block;
            float: left;
            margin-right:8px;
            content: '';
            font-family: "feather";
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 20px;
            border: 1px solid #ccc;
            background: #eee;
        }

        table#radFinanceProductList input:checked + label:before {
            content: "\e93d";
            border: 1px solid #BBD5FF;
            background: #e0ecff;
            color: #2f76ec;
        }


.financeAmount {
    float: left; /* width: 100%; */
    margin-bottom: 21px;
}
span.minMax {
    font-size: 1em;
    text-transform: capitalize;
}

.minVal {
    text-align: left;
}

.maxVal {
    text-align: right;
}

.financeAmountPay {
    float: left;
    display: block;
    width: 149px;
    text-align: left;
    color: #767676
}

.financeAmountSlider {
    float: left;
    display: block;
    padding: 30px;
    background: url(/layout/finance/blend.jpg);
    background-position: -100px -7px;
}

.financeAmountPayContainer {
    display: block;
    margin: 14px;
    padding: 7px;
    color: #444;
}

.financeDeposit {
    float: right;
    width: 184px;
    border: 1px solid #3d649a;
    height: 84px;
    text-align: center;
    padding: 16px;
    background: #5982ba;
    color: #fff;
    line-height: 180%;
    font-size: 13px;
}

    .financeDeposit b span {
        display: block;
        font-size: 24px;
    }

@media screen and (max-width: 767px) {

}

.ui-widget-content {
    border: 1px solid #2f76ec /*{borderColorContent}*/;
    background: #background: #c1d7ec;
    background: -moz-linear-gradient(left, cornflowerblue 0%, #2f76ec 100%) !important;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,cornflowerblue), color-stop(100%,#2f76ec)) !important;
    background: -webkit-linear-gradient(left, cornflowerblue 0%,#2f76ec 100%) !important;
    background: -o-linear-gradient(left, cornflowerblue 0%,#2f76ec 100%) !important;
    background: -ms-linear-gradient(left, cornflowerblue 0%,#2f76ec 100%) !important;
    background: linear-gradient(to right, cornflowerblue 0%,#2f76ec 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='cornflowerblue', endColorstr='#2f76ec',GradientType=1 ) !important;
    /*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png) /*{bgImgUrlContent}*/ 50% /*{bgContentXPos}*/ 50% /*{bgContentYPos}*/ repeat-x /*{bgContentRepeat}*/;
    color: #222222 /*{fcContent}*/;
}

#financeTopPanel a {
    color: #2f76ec;
    text-decoration: underline;
}

.ui-slider {
    position: relative;
    text-align: left;
    border-radius: 39px;
}

    .ui-slider .ui-slider-handle {
        position: absolute;
        z-index: 2;
        width: 20px;
        height: 20px;
        cursor: default;
        background-color: transparent !important;
    }

    .ui-slider .ui-slider-range {
        position: absolute;
        z-index: 1;
        font-size: .7em;
        display: block;
        border: 0;
        background-position: 0 0;
    }

.ui-slider-horizontal {
    height: .8em;
}

    .ui-slider-horizontal .ui-slider-handle {
        top: -.3em;
        margin-left: -.6em;
    }

    .ui-slider-horizontal .ui-slider-range {
        top: 0;
        height: 100%;
    }

    .ui-slider-horizontal .ui-slider-range-min {
        left: 0;
    }

    .ui-slider-horizontal .ui-slider-range-max {
        right: 0;
    }

.ui-slider-vertical {
    width: .8em;
    height: 100px;
}

    .ui-slider-vertical .ui-slider-handle {
        left: -.3em;
        margin-left: 0;
        margin-bottom: -.6em;
    }

    .ui-slider-vertical .ui-slider-range {
        left: 0;
        width: 100%;
    }

    .ui-slider-vertical .ui-slider-range-min {
        bottom: 0;
    }

    .ui-slider-vertical .ui-slider-range-max {
        top: 0;
    }


.ui-slider-horizontal .ui-state-default:before {
    content: "";
    width: 20px !important;
    height: 20px !important;
    background: #ffffff;
    z-index: 10;
    display: block;
    border-radius: 4px;
    border: 1px solid #c1d7ec;
}
@charset "UTF-8";

.bottom-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    color:white;
    z-index:90;
    padding-right:60px;
}

    .bottom-drawer[data-drawercolour="green"] {
        background: #47AB6C;
    }

    .bottom-drawer[data-drawercolour="blue"] {
        background: #0894A1;
    }

    .bottom-drawer[data-drawercolour="orange"] {
        background: #F2B134;
    }

    .bottom-drawer[data-drawercolour="red"] {
        background: #ED553B;
    }

    .bottom-drawer[data-drawercolour="grey"] {
        background: #70818B;
    }

    .bottom-drawer[data-drawercolour="dark"] {
        background: #334A5A;
    }

    .bottom-drawer[data-drawercolour="offblack"] {
        background: #0C1824;
    }

    .bottom-drawer a {
        color:white;
        border-bottom:1px solid white;
    }

.bottom-drawer---close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

    .bottom-drawer---close:hover {
        background:rgba(255,255,255,0.15);
    }

@media screen and (max-width: 767px) {
    .bottom-drawer {
        padding-right: 36px;
    }
    .bottom-drawer---close {
        width: 32px;
        height: 32px;
        line-height: 32px;
        top:0;
        right:0;
    }
}/* GDPR Cookies */
#GDPRCookieBox {
    position: fixed;
    left: 0;
    bottom: 0;
    background: rgba(6,16,32,0.85);
    z-index: 90000;
    width: 100%;
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -o-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    padding: 32px;
}

    #GDPRCookieBox.GDPRCookieBox-show {
        -moz-transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -o-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%);
    }

#GDPRCookieBox, .GDPRCookieBox-button {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.GDPRCookieBox-text, .GDPRCookieBox-link {
    color: white !important;
}

.GDPRCookieBox-text {
    color: white;
    font-size: 18px;
    line-height: 150%;
}

.GDPRCookieBox-link {
    font-size: 12px;
    text-decoration: underline;
    line-height: 12px;
    display: inline-block;
    margin: 16px 0;
    cursor: pointer;
}

    .GDPRCookieBox-link:hover {
        text-decoration: none;
    }

.GDPRCookieBox-button {
    display: inline-block;
    border-radius: 4px;
    padding: 8px 16px;
    margin: 4px;
    border: 1px solid white;
    color: white;
    cursor: pointer;
}

    .GDPRCookieBox-button:hover {
        background: white;
        color: #222;
    }

.GDPRCookieBox-accept {
    color: #222;
    background: #e8dc54;
    border-color: #e8dc54;
}

    .GDPRCookieBox-accept:hover {
        background: #feee37;
        border-color: #feee37;
    }

.GDPRCookieBox-close {
    margin-bottom: 0;
}
body {
}

modal-message, modal-message * {
    display: block;
    float: left;
    width: 100%;
}

modal-message {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 8000;
    opacity: 0;
}

    modal-message modal-message-inner {
        width: 480px;
        max-width: 90vw;
        position: absolute;
        top: 100px;
        left: 50%;
        z-index: 8000;
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        border-radius: 8px;
    }

        modal-message modal-message-inner modal-message-close {
            float: right;
            font-family: feather;
            width: 32px;
            height: 32px;
            line-height: 32px;
            text-align: right;
            font-size: 25px;
            margin-bottom: 8px;
            cursor: pointer;
            color: white;
            text-shadow: 0 0 4px #000000;
        }

            modal-message modal-message-inner modal-message-close:before {
                content: "\ea16";
            }

        modal-message modal-message-inner modal-message-inner-message {
            width: 100%;
            float: left;
            border-radius: 8px;
            background: white;
            -webkit-box-shadow: 0 20px 32px 16px rgba(0,0,0,0.15);
            box-shadow: 0 20px 32px 16px rgba(0,0,0,0.15);
        }

            modal-message modal-message-inner modal-message-inner-message modal-message-header,
            modal-message modal-message-inner modal-message-inner-message modal-message-body,
            modal-message modal-message-inner modal-message-inner-message modal-message-footer {
                padding: 32px;
                font-size: 16px;
            }

            modal-message modal-message-inner modal-message-inner-message modal-message-header,
            modal-message modal-message-inner modal-message-inner-message modal-message-footer {
                padding-top: 16px;
                padding-bottom: 16px;
                font-family: 'citrfontbold';
            }

            modal-message modal-message-inner modal-message-inner-message modal-message-header {
                background: dodgerblue;
                color: white;
                font-size: 24px;
                -webkit-border-radius: 4px 4px 0 0;
                border-radius: 4px 4px 0 0;
            }

                modal-message modal-message-inner[modal-type="success"] modal-message-inner-message modal-message-header {
                    background: #47ab6c;
                }

                modal-message modal-message-inner[modal-type="warning"] modal-message-inner-message modal-message-header {
                    background: #de9d00;
                }

                modal-message modal-message-inner[modal-type="error"] modal-message-inner-message modal-message-header {
                    background: #b62727;
                }

                modal-message modal-message-inner[modal-type="clpos"] modal-message-inner-message modal-message-header {
                    background-color: #23282e;
                }

        modal-message modal-message-inner modal-message-inner-message modal-message-body {
            max-height: calc(100vh - 350px);
            overflow: auto;
        }

        modal-message modal-message-inner modal-message-inner-message modal-message-footer {
            border-top: 1px solid #d7d7d7;
            font-size: 14px;
            text-align: right;
            letter-spacing: 0.035em;
        }

            modal-message modal-message-inner modal-message-inner-message modal-message-footer span {
                display: block;
                margin-left: 16px;
                float: right;
                width: auto;
                cursor: pointer;
            }

                modal-message modal-message-inner modal-message-inner-message modal-message-footer span[onclick*="false)"] {
                    color: #999;
                }

                modal-message modal-message-inner modal-message-inner-message modal-message-footer span[onclick*="true)"] {
                    color: dodgerblue;
                }

                    modal-message modal-message-inner[modal-type="success"] modal-message-inner-message modal-message-footer span[onclick*="true)"] {
                        color: #47ab6c;
                    }

                    modal-message modal-message-inner[modal-type="warning"] modal-message-inner-message modal-message-footer span[onclick*="true)"] {
                        color: #de9d00;
                    }

                    modal-message modal-message-inner[modal-type="error"] modal-message-inner-message modal-message-footer span[onclick*="true)"] {
                        color: #b62727;
                    }

                    modal-message modal-message-inner[modal-type="clpos"] modal-message-inner-message modal-message-footer span[onclick*="true)"] {
                        color: yellowgreen;
                    }

@media screen and (max-width: 767.9px) {
    modal-message modal-message-inner {
        top: 14px;
    }

        modal-message modal-message-inner modal-message-inner-message modal-message-body {
            max-height: calc(100vh - 200px);
            overflow: auto;
        }
}
.stateful-loader {
    margin: 0;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-left-color: #5cb85c;
    animation-name: loader-spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    position: absolute;
    display: block;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
    vertical-align: top;
    box-sizing: content-box;
    z-index:10;
}

    .stateful-loader,
    .stateful-loader:after {
        border-radius: 50%;
        width: 32px;
        height: 32px;
    }

.stateful-load-complete {
    -webkit-animation: none;
    animation: none;
    border-color: #5cb85c;
    transition: border 500ms ease-out;
}

.stateful-load-error {
    -webkit-animation: none;
    animation: none;
    border-color: red;
    transition: border 500ms ease-out;
}

.stateful-checkmark {
    display: none;
    box-sizing: content-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
}

    .stateful-checkmark.stateful-draw:after {
        opacity: 1;
        height: 16px;
        width: 8px;
        transform-origin: left top;
        border-right: 2px solid #5cb85c;
        border-top: 2px solid #5cb85c;
        content: '';
        left: 8px;
        top: 17px;
        position: absolute;
        animation-duration: 1.2s;
        animation-timing-function: ease;
        animation-name: checkmark;
        transform: scaleX(-1) rotate(135deg);
    }

    .stateful-checkmark.stateful-error:before, .stateful-checkmark.stateful-error:after {
        position: absolute;
        left: 15px;
        top: 6px;
        content: ' ';
        height: 20px;
        width: 2px;
        background-color: #f00;
    }

        .stateful-checkmark.stateful-error:before {
            transform: rotate(45deg);
        }

        .stateful-checkmark.stateful-error:after {
            transform: rotate(-45deg);
        }

@keyframes loader-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }

    33% {
        height: 6px;
        width: 8px;
        opacity: 1;
    }

    66% {
        height: 13px;
        width: 8px;
        opacity: 1;
    }

    100% {
        height: 16px;
        width: 8px;
        opacity: 1;
    }
}
.add-to-cart-area {
}

.add-to-cart-area-dropdown {
    background: white;
    border-radius: 3px;
    position: relative;
    margin-bottom: 6px;
}

    .add-to-cart-area-dropdown:after {
        content: '';
        width: 56px;
        height: 56px;
        position: absolute;
        top: 0;
        right: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' focusable='false' width='1em' height='1em' style='-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);' preserveAspectRatio='xMidYMid meet' viewBox='0 0 1200 1200'%3E%3Cpath d='M600.006 989.352l178.709-178.709L1200 389.357l-178.732-178.709L600.006 631.91L178.721 210.648L0 389.369l421.262 421.262l178.721 178.721h.023z' fill='%23626262'/%3E%3Crect x='0' y='0' width='1200' height='1200' fill='rgba(0, 0, 0, 0)' /%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center center;
    }

    .add-to-cart-area-dropdown select,
    .add-to-cart-area-dropdown-qty input,
    .add-to-cart-input-back-in-stock {
        background: transparent;
    }

    .add-to-cart-area-dropdown select,
    .add-to-cart-area-dropdown-qty input,
    .add-to-cart-area-dropdown-qty-label,
    .add-to-cart-input-back-in-stock {
        width: 100%;
        height: 56px;
        line-height: 56px;
        border-radius: 3px;
        outline: none;
        border: 1px solid #dfdfeb;
        -webkit-appearance: none;
        z-index: 1;
        font-family: 'citrfontreg';
    }

        .add-to-cart-area-dropdown select:focus,
        .add-to-cart-area-dropdown-qty input:focus,
        .add-to-cart-input-back-in-stock:focus {
            outline-color: #d0d0d7;
            border-color: #d0d0d7;
        }

    .add-to-cart-area-dropdown option {
        background: white;
    }

        .add-to-cart-area-dropdown option[data-status="out of stock"] {
            color: #bbb;
        }

.add-to-cart-area-dropdown-qty {
    margin-right: 6px;
    border-radius: 3px;
}

    .add-to-cart-area-dropdown-qty input {
        width: 56px;
    }

[data-browser="Internet Explorer"] .add-to-cart-area-dropdown-qty input {
    width: 100px;
}

.add-to-cart-area-dropdown-qty input {
    background: white;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}

.add-to-cart-area-dropdown-qty-label {
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding: 0 12px;
    font-family: 'citrfontbold';
    border-right: none;
}

.add-to-cart-area-button,
[onclick*="AddStockNotificationModular"] {
    width: auto;
    height: 56px;
    line-height: 56px;
    padding: 0 24px;
    border-radius: 3px;
    margin-left: 6px;
    color: white;
    font-family: 'citrfontbold';
    cursor: pointer;
}

    .add-to-cart-area-button:focus,
    .add-to-cart-area-button.focus-within,
    .add-to-cart-area-dropdown:focus-within,
    .add-to-cart-area-dropdown.focus-within,
    .add-to-cart-area-dropdown-qty:focus-within,
    .add-to-cart-area-dropdown-qty.focus-within {
        box-shadow: 0px 0px 5px 0px #e4e4e4;
        outline: none;
    }

    .add-to-cart-area-button[data-available="false"],
    [onclick*="AddStockNotificationModular"] {
        background: #0e73b6;
    }

        .add-to-cart-area-button[data-available="false"]:focus,
        [onclick*="AddStockNotificationModular"]:focus {
            outline-color: #319de4;
        }

    .add-to-cart-area-button[data-available=""] {
        filter: grayscale(100%);
        cursor: not-allowed;
    }

    .add-to-cart-area-button:before {
        content: var(--22-add-to-basket-add);
        white-space: nowrap;
    }

    .add-to-cart-area-button[data-available="false"]:before {
        content: var(--22-add-to-basket-notify);
    }

.add-to-cart-area-1 {
    margin-bottom: 6px;
}

.add-to-cart-area-dropdown-qty,
.add-to-cart-area-2,
.add-to-cart-area-3 {
    filter: grayscale(1);
    position: relative;
}

    .add-to-cart-area-dropdown-qty:before,
    .add-to-cart-area-2:before,
    .add-to-cart-area-3:before {
        content: '';
        z-index: 2;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0);
    }

    .add-to-cart-area-2:after {
        text-align: center;
        content: var(--22-add-to-basket-select-option-availability);
        width: 100%;
        font-size: small;
        display: block;
        float: left;
    }

[data-selected="true"] .add-to-cart-area-dropdown-qty,
[data-selected="true"] ~ .add-to-cart-area-2,
[data-selected="true"] ~ .add-to-cart-area-3 {
    filter: grayscale(0);
}

    [data-selected="true"] .add-to-cart-area-dropdown-qty:before,
    [data-selected="true"] ~ .add-to-cart-area-2:before,
    [data-selected="true"] ~ .add-to-cart-area-3:before {
        display: none;
    }

    [data-selected="true"] ~ .add-to-cart-area-2:after,
    [data-available="true"] ~ .add-to-cart-area-2:after,
    [data-available="false"] ~ .add-to-cart-area-2:after,
    .add-to-cart-area-1:not([data-selected="true"]) ~ .add-to-cart-area-2 .add-to-cart-area-msg-stock,
    .add-to-cart-area-1:not([data-selected="true"]) ~ .add-to-cart-area-2 .add-to-cart-area-msg-handling {
        display: none;
    }

[data-available="false"] ~ .add-to-cart-area-2 {
    display: none;
}

[checkstockmsg]:before {
    text-transform: uppercase;
    content: var(--22-add-to-basket-select-option);
}

[data-selected="true"] ~ .add-to-cart-area-3 [checkstockmsg]:before {
    content: var(--22-add-to-basket-check-stock);
}

.add-to-cart-area-msg {
    font-size: 14px;
    margin: 6px 0;
    border-top: 1px solid #dfdfeb;
}

.add-to-cart-area-msg-stock {
    font-family: 'citrfontbold';
    border-bottom: 1px solid #dfdfeb;
    padding: 10px 0;
}

    .add-to-cart-area-msg-stock:before,
    .add-to-cart-area-msg-stock:after {
        display: block;
        float: left;
    }

    .add-to-cart-area-msg-stock:before {
        content: var(--22-add-to-basket-stock-availability);
        width: 50%;
        text-align: left !important;
    }

    .add-to-cart-area-msg-stock:after {
        content: attr(data-amountmsg);
        width: 50%;
        text-align: right;
        color: #6db60e;
    }

.amountmsg-preorder.add-to-cart-area-msg-stock:after {
    content: attr(data-amountmsg);
    width: 50%;
    text-align: right;
    color: #832357;
}

.add-to-cart-area-msg-handling {
    border-bottom: 1px solid #dfdfeb;
    padding: 10px 0;
    font-family: 'citrfontbold';
}

    .add-to-cart-area-msg-handling:before,
    .add-to-cart-area-msg-handling:after {
        display: block;
        width: 50%;
        float: left;
    }

    .add-to-cart-area-msg-handling:before {
        content: var(--22-add-to-basket-estimated-despatch);
        text-align: left !important;
    }

    .add-to-cart-area-msg-handling:after {
        content: attr(data-handlingmsg);
        text-align: right;
    }

    .add-to-cart-area-msg-handling[data-handlingmsg=""]:before {
        content: var(--22-add-to-basket-estimated-collection);
    }

    .add-to-cart-area-msg-handling[data-handlingmsg=""]:after {
        content: attr(data-collectmsg);
        text-align: right;
    }

    .add-to-cart-area-msg-handling[data-handlingmsg="Checking with couriers ..."]:before {
        margin-left: 6px;
    }

    .add-to-cart-area-msg-handling[data-handlingmsg="Checking with couriers ..."]:after {
        content: '';
        display: block;
        float: left;
        width: 18px;
        height: 18px;
        border-radius: 100%;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
        animation: handling-loader 1s infinite;
    }

    .add-to-cart-area-msg-handling[data-handlingmsg*="null."] {
        display: none !important;
    }

@keyframes handling-loader {
    0% {
        background: #4CC9F0;
    }

    25% {
        -moz-transform: scale(0.75);
        -webkit-transform: scale(0.75);
        -o-transform: scale(0.75);
        -ms-transform: scale(0.75);
        transform: scale(0.75);
    }

    33% {
        background: #3F37C9;
    }

    50% {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    66% {
        background: #7209B7;
    }

    25% {
        -moz-transform: scale(0.75);
        -webkit-transform: scale(0.75);
        -o-transform: scale(0.75);
        -ms-transform: scale(0.75);
        transform: scale(0.75);
    }

    100% {
        background: #F72585;
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.add-to-cart-area-msg-stock[data-amountmsg="non tracked"],
.add-to-cart-area-msg-handling[data-handlingmsg="non tracked"] {
    display: none;
}

.add-to-cart-area-checkavailability {
    height: 56px;
    background: #5b917a;
    line-height: 56px;
    padding: 0 0 0 12px;
    color: white;
    border-radius: 3px;
    overflow: hidden;
    font-size: 14px;
    cursor: pointer;
    text-align: right;
}

    .add-to-cart-area-checkavailability[data-visible*="alse"] {
        display: none;
    }

    .add-to-cart-area-checkavailability span[class*="icon-"] {
        height: 56px;
        line-height: 56px;
        background: rgba(0, 0, 0, 0.2);
        margin-left: 12px;
        padding: 0 24px;
        color: white !important;
        float: right;
    }

        .add-to-cart-area-checkavailability span[class*="icon-"]:before {
            transform: rotate(90deg);
            display: inline-block;
        }

.add-to-cart-stock-availability-results .mapContainer,
.add-to-cart-stock-availability-results .mapContainer .ctrPad32 {
    padding: 0;
}

[data-backinstock] {
    margin-top: 8px;
    padding: 16px;
    font-size: 14px;
    border: 1px solid #4d7020;
    color: #4d7020;
    background: #e8f0df;
}

[data-backinstock="false"] {
    filter: hue-rotate(270deg);
}

[data-backinstock]:empty {
    display: none;
}

.add-to-cart-input-back-in-stock,
.add-to-cart-input-back-in-stock:hover,
.add-to-cart-input-back-in-stock:active {
    background: white;
    padding: 0 12px;
}

[onclick*="AddStockNotificationModular"] {
}

#cart-pills {
    justify-content: space-between;
}

    #cart-pills > div {
        font-size: 16px;
        border-radius: 3px;
        line-height: 56px;
        background: #f4f4f4;
        color: #282e33;
        padding: 0 12px;
        flex-grow: 1;
        text-align: left;
        width: 100%;
    }
[data-hidecc-message] .add-to-cart-area-msg-handling {
    display: none;
}

@media screen and (max-width: 415px) {
    .add-to-cart-area-1-row-2 {
        flex-wrap: wrap;
    }

    .add-to-cart-area-button {
        width: 100%;
        margin-left: 0;
        margin-top: 6px;
        text-align: center;
    }

    .add-to-cart-area-checkavailability {
        font-size: 12px;
    }

    #cart-pills > div {
        font-size: 14px;
    }

    .add-to-cart-area-dropdown:after {
        width: 40px;
    }

    .add-to-cart-area-dropdown:after,
    .add-to-cart-area-dropdown select,
    .add-to-cart-area-dropdown-qty input,
    .add-to-cart-area-dropdown-qty-label,
    .add-to-cart-input-back-in-stock,
    .add-to-cart-area-button,
    [onclick*="AddStockNotificationModular"],
    .add-to-cart-area-checkavailability,
    .add-to-cart-area-checkavailability span[class*="icon-"] {
        height: 40px;
    }

        .add-to-cart-area-dropdown select,
        .add-to-cart-area-dropdown-qty input,
        .add-to-cart-area-dropdown-qty-label,
        .add-to-cart-input-back-in-stock,
        .add-to-cart-area-button,
        [onclick*="AddStockNotificationModular"],
        .add-to-cart-area-checkavailability,
        .add-to-cart-area-checkavailability span[class*="icon-"],
        #cart-pills > div {
            line-height: 40px;
        }

            .add-to-cart-area-checkavailability span[class*="icon-"] {
                padding: 0 12px;
            }
}
/*
    *************************************************
    Grouped Styling
    *************************************************
*/
.cc-lookup-service-entry {
    overflow: hidden;
}

.cc-lookup-service-lookupresults-store .add-to-cart-area-button,
.cc-lookup-service-lookupbutton-location,
.cc-lookup-service-warningtext,
.cc-lookup-service-lookupresults-morelesstoggle a {
    user-select: none;
}

.cc-lookup-service-entry .cc-lookup-service-lookupbutton,
.cc-lookup-service-lookupbutton-location {
    cursor: pointer;
}

.cc-lookup-service-lookupbutton-location,
.cc-lookup-service-entry .cc-lookup-service-lookupbutton,
.cc-lookup-service-countryselect-wrapper select {
    padding: 0 16px;
}

.cc-lookup-service-lookupresults-morelesstoggle {
    margin-top: 8px;
}

.cc-lookup-service-entry > *,
.cc-lookup-service-divider > * {
    display: flex;
}

.cc-lookup-service-entry,
.cc-lookup-service-entry > *,
.cc-lookup-service-lookupbutton-location,
.cc-lookup-service-lookupresults-store .add-to-cart-area-button,
.cc-lookup-service-countryselect-wrapper:after,
.cc-lookup-service-countryselect-wrapper select,
.cc-lookup-service-lookupresults-morelesstoggle a {
    height: 47px;
}

    .cc-lookup-service-entry,
    .cc-lookup-service-entry > *,
    .cc-lookup-service-lookupbutton-location,
    .cc-lookup-service-entry .cc-lookup-service-lookupbutton:before,
    .cc-lookup-service-lookupresults-store .add-to-cart-area-button,
    .cc-lookup-service-countryselect-wrapper select,
    .cc-lookup-service-lookupresults-morelesstoggle a,
    .cc-lookup-service-lookupresults-morelesstoggle a:before {
        line-height: 47px;
    }

        .cc-lookup-service-entry input,
        .cc-lookup-service-entry select,
        .cc-lookup-service-countryselect-wrapper select {
            font-family: 'citrfontreg';
        }

.cc-lookup-service-lookupresults-store .add-to-cart-area-button,
.cc-lookup-service-warningtext,
.cc-lookup-service-lookupresults-store [data-availability],
.cc-lookup-service-lookupresults-store [data-leadtime],
.cc-lookup-service-lookupresults-store---name,
.cc-lookup-service-lookupresults-store---distance {
    font-family: 'citrfontbold';
}

modal-message[id*="ClickAndCollectLookupStoreViewMap"] modal-message-inner modal-message-inner-message modal-message-header,
modal-message[id*="ClickAndCollectLookupStoreViewOpeningHours"] modal-message-inner modal-message-inner-message modal-message-header,
.cc-lookup-service-lookupresults-store .add-to-cart-area-button {
    font-size: 16px;
}

.cc-lookup-service-entry input,
.cc-lookup-service-lookupbutton-location,
.cc-lookup-service-lookupresults-store,
.cc-lookup-service-lookupresults-store *,
.cc-lookup-service-countryselect-wrapper select,
.cc-lookup-service-lookupresults-morelesstoggle a {
    font-size: 14px;
}

.cc-lookup-service-divider > .cc-lookup-service-divider-middle,
.cc-lookup-service-warningtext,
a[onclick*=".cc-lookup-service-countryselect-wrapper"] {
    font-size: 12px;
}

.cc-lookup-service-lookupresults-store [data-availability],
.cc-lookup-service-lookupresults-store [data-leadtime] {
    font-size: 10px;
}

.cc-lookup-service-lookupresults-store .add-to-cart-area-button,
.cc-lookup-service-lookupbutton-location,
.cc-lookup-service-lookupresults-morelesstoggle a {
    text-align: center;
}

.cc-lookup-service-entry input {
    text-transform: capitalize;
}

.cc-lookup-service-entry .cc-lookup-service-lookupbutton,
.cc-lookup-service-lookupresults-store .add-to-cart-area-button,
.cc-lookup-service-lookupresults-morelesstoggle a:hover {
    background: #2f76ec;
}

.cc-lookup-service-entry input,
.cc-lookup-service-entry select,
.cc-lookup-service-countryselect-wrapper,
.cc-lookup-service-countryselect-wrapper option {
    background: white;
}

.cc-lookup-service-lookupbutton-location {
    background: #e8f4ff;
}

.cc-lookup-service-lookupbutton-location,
.cc-lookup-service-lookupresults-morelesstoggle a {
    color: #2f76ec;
}

    .cc-lookup-service-lookupresults-morelesstoggle a:hover {
        color: white;
    }

.cc-lookup-service-lookupbutton-location,
.cc-lookup-service-lookupresults-morelesstoggle a {
    border: 1px solid #2f76ec;
}

.cc-lookup-service-entry,
.cc-lookup-service-countryselect-wrapper select {
    border: 1px solid #dfdfeb;
}

    .cc-lookup-service-entry input,
    .cc-lookup-service-entry select {
        border: none;
    }

    .cc-lookup-service-entry input,
    .cc-lookup-service-entry select {
        outline: none !important;
    }

    .cc-lookup-service-entry,
    .cc-lookup-service-entry > *,
    .cc-lookup-service-lookupbutton-location,
    .cc-lookup-service-countryselect-wrapper,
    .cc-lookup-service-countryselect-wrapper select,
    .cc-lookup-service-lookupresults-store .add-to-cart-area-button,
    .cc-lookup-service-lookupresults-morelesstoggle a {
        border-radius: 3px;
    }

        .cc-lookup-service-countryselect-wrapper:after,
        .cc-lookup-service-entrysection[data-ilc=''][data-productid='']:before,
        .cc-lookup-service-divider > .cc-lookup-service-divider-left:before,
        .cc-lookup-service-divider > .cc-lookup-service-divider-right:before {
            content: '';
            position: absolute;
        }

/*
    *************************************************
    Element-specific Styling
    *************************************************
*/
        .cc-lookup-service-entry .cc-lookup-service-lookupbutton {
            color: white !important;
            -moz-border-radius-topleft: 0;
            -moz-border-radius-bottomleft: 0;
            -webkit-border-top-left-radius: 0;
            -webkit-border-bottom-left-radius: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

.cc-lookup-service-countryselect-wrapper {
    position: relative;
    margin-bottom: 6px;
}

    .cc-lookup-service-countryselect-wrapper:after {
        width: 47px;
        top: 0;
        right: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' focusable='false' width='1em' height='1em' style='-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);' preserveAspectRatio='xMidYMid meet' viewBox='0 0 1200 1200'%3E%3Cpath d='M600.006 989.352l178.709-178.709L1200 389.357l-178.732-178.709L600.006 631.91L178.721 210.648L0 389.369l421.262 421.262l178.721 178.721h.023z' fill='%23626262'/%3E%3Crect x='0' y='0' width='1200' height='1200' fill='rgba(0, 0, 0, 0)' /%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center center;
    }

    .cc-lookup-service-countryselect-wrapper select {
        background: transparent;
    }

    .cc-lookup-service-countryselect-wrapper select {
        width: 100%;
        outline: none;
        -webkit-appearance: none;
        z-index: 1;
    }

        .cc-lookup-service-countryselect-wrapper select:focus {
            outline-color: #d0d0d7;
            border-color: #d0d0d7;
        }

.cc-lookup-service-lookupresults[data-expanded="false"] > .cc-lookup-service-lookupresults-store:nth-child(n+4) {
    display: none;
}

.cc-lookup-service-lookupresults:empty + .cc-lookup-service-lookupresults-morelesstoggle,
.cc-lookup-service-lookupresults[data-hasstores="false"] + .cc-lookup-service-lookupresults-morelesstoggle,
.cc-lookup-service-lookupresults[data-storecount="0"] + .cc-lookup-service-lookupresults-morelesstoggle,
.cc-lookup-service-lookupresults[data-storecount="1"] + .cc-lookup-service-lookupresults-morelesstoggle,
.cc-lookup-service-lookupresults[data-storecount="2"] + .cc-lookup-service-lookupresults-morelesstoggle,
.cc-lookup-service-lookupresults[data-storecount="3"] + .cc-lookup-service-lookupresults-morelesstoggle {
    display: none;
}

.cc-lookup-service-lookupresults + .cc-lookup-service-lookupresults-morelesstoggle a:before {
    display: block;
}

.cc-lookup-service-lookupresults[data-expanded="false"] + .cc-lookup-service-lookupresults-morelesstoggle a:before {
    content: var(--22b-click-and-collect-lookup-service-view-all);
}

.cc-lookup-service-lookupresults[data-expanded="true"] + .cc-lookup-service-lookupresults-morelesstoggle a:before {
    content: var(--22b-click-and-collect-lookup-service-view-less);
}

.cc-lookup-service-lookupresults-store {
    border-bottom: 1px solid #dfdfeb;
    padding: 10px 0;
}

    .cc-lookup-service-lookupresults-store > div {
        border-left: 1px solid #1E1E44;
        margin: 10px 0;
    }

    .cc-lookup-service-lookupresults-store [data-leadtimeavailability] {
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

        .cc-lookup-service-lookupresults-store [data-leadtimeavailability] [data-leadtime],
        .cc-lookup-service-lookupresults-store [data-leadtimeavailability] [data-availability] {
            background: #1E1E44;
            color: white;
            padding: 4px 8px;
        }

        .cc-lookup-service-lookupresults-store [data-leadtimeavailability] [data-availability] {
            background: #26AA5B;
        }

        .cc-lookup-service-lookupresults-store [data-leadtimeavailability] [data-availability*="Unavailable"] {
            background: #D8150F;
        }

        .cc-lookup-service-lookupresults-store [data-leadtimeavailability] [data-availability*="Hurry"] {
            background: #E37F00;
        }

        .cc-lookup-service-lookupresults-store [data-leadtimeavailability] [data-availability*="Last Few"] {
            background: #D7A409;
        }

        .cc-lookup-service-lookupresults-store [data-leadtimeavailability] [data-availability*="Delivered to"] {
            background: #1BABA5;
        }

    .cc-lookup-service-lookupresults-store .add-to-cart-area-button {
        width: 100% !important;
        margin-left: 0;
    }

modal-message[id*="ClickAndCollectLookupStoreViewMap"] modal-message-inner modal-message-inner-message modal-message-body {
    padding: 0 !important;
}

.ccservice-results-padding-8 {
    padding: 8px;
}

.cc-lookup-service-entrysection[data-ilc=''][data-productid=''] {
    filter: grayscale(1);
}

    .cc-lookup-service-entrysection[data-ilc=''][data-productid='']:before {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.2);
        z-index: 1;
    }

    .cc-lookup-service-entrysection[data-ilc=''][data-productid=''] + div {
        opacity: 0;
    }

.cc-lookup-service-divider {
    margin: 8px 0;
}

    .cc-lookup-service-divider > .cc-lookup-service-divider-left,
    .cc-lookup-service-divider > .cc-lookup-service-divider-right {
        flex-grow: 1;
        position: relative;
    }

        .cc-lookup-service-divider > .cc-lookup-service-divider-left:before,
        .cc-lookup-service-divider > .cc-lookup-service-divider-right:before {
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            width: 100%;
            background: #dfdfeb;
        }

    .cc-lookup-service-divider > .cc-lookup-service-divider-middle {
        flex-grow: 0;
        height: 32px;
        line-height: 32px;
        padding: 0 8px;
    }

#cc-title,
#cc-tagline {
    font-family: 'citrfontbold', sans-serif;
}
/* Feather Icons & FontAwesome Icon Replacement */
@font-face {
    font-family: feather;
    src: url(/platformfont/feather-webfont.eot);
    src: url(/platformfont/feather-webfont.eot?#iefix) format("embedded-opentype"),url(/platformfont/feather-webfont.woff) format("woff"),url(/platformfont/feather-webfont.ttf) format("truetype"),url(/platformfont/feather-webfont.svg#feather) format("svg");
    font-weight: 400;
    font-style: normal
}

[class*=" icon-"], [class^=icon-], [data-icon]:before, .fa {
    display: inline-block;
    font-family: feather;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

    .fa:before, .fa:after {
        font-family: inherit;
    }

[data-icon]:before {
    content: attr(data-icon)
}

.icon-activity:before {
    content: "\e922";
}

.icon-air-play:before,
.icon-airplay:before {
    content: "\e923";
}

.icon-alert-circle:before {
    content: "\e924";
}

.icon-alert-octagon:before {
    content: "\e925";
}

.icon-alert-triangle:before {
    content: "\e926";
}

.icon-align-center:before {
    content: "\e903";
}

.icon-align-justify:before {
    content: "\e904";
}

.icon-align-left:before {
    content: "\e905";
}

.icon-align-right:before {
    content: "\e906";
}

.icon-alt:before {
    content: "\e088";
}

.icon-anchor:before {
    content: "\e907";
}

.icon-aperture:before {
    content: "\e908";
}

.icon-archive:before {
    content: "\e909";
}

.fa-angle-double-down:before,
.icon-arrow-down:before,
.fa-chevron-down:before,
.fa-arrow-down:before,
.fa-angle-down:before {
    content: "\e90a";
}

.icon-arrow-down-circle:before {
    content: "\e90b";
}

.icon-arrow-down-left:before {
    content: "\e90c";
}

.icon-arrow-down-right:before {
    content: "\e90d";
}

.fa-angle-left:before,
.fa-chevron-left:before,
.fa-arrow-left:before,
.icon-arrow-left:before,
.fa-angle-double-left:before {
    content: "\e90e";
}

.icon-arrow-left-circle:before {
    content: "\e90f";
}

.fa-angle-double-right:before,
.fa-chevron-right:before,
.fa-arrow-right:before,
.icon-arrow-right:before,
.fa-angle-right:before {
    content: "\e910";
}

.icon-arrow-right-circle:before {
    content: "\e911";
}

.fa-angle-up:before,
.fa-arrow-up:before,
.fa-angle-double-up:before,
.icon-arrow-up:before,
.fa-chevron-up:before {
    content: "\e912";
}

.icon-arrow-up-circle:before {
    content: "\e913";
}

.icon-arrow-up-left:before {
    content: "\e914";
}

.icon-arrow-up-right:before {
    content: "\e915";
}

.icon-at-sign:before {
    content: "\e916";
}

.icon-award:before {
    content: "\e917";
}

.icon-bag:before,
.fa-shopping-basket:before,
.fa-shopping-cart:before,
.fa-shopping-bag:before,
.icon-shopping-bag:before {
    content: "\e9e0";
}

.icon-ban:before {
    content: "\e107";
}

.icon-bar-graph:before,
.icon-bar-chart:before {
    content: "\e918";
}

.icon-bar-chart-2:before,
.icon-bar-graph-2:before {
    content: "\e919";
}

.icon-battery:before {
    content: "\e91a";
}

.icon-battery-charging:before {
    content: "\e91b";
}

.fa-truck:before,
.icon-bell:before {
    content: "\e91c";
}

.icon-bell-off:before {
    content: "\e91d";
}

.icon-bluetooth:before {
    content: "\e91e";
}

.icon-bold:before {
    content: "\e91f";
}

.icon-book:before {
    content: "\e920";
}

.icon-book-open:before {
    content: "\e900";
}

.icon-bookmark:before {
    content: "\e921";
}

.icon-box:before {
    content: "\e901";
}

.icon-briefcase:before {
    content: "\e902";
}

.icon-calendar:before {
    content: "\e939";
}

.fa-camera:before,
.icon-camera:before,
.fa-camera-retro:before {
    content: "\e93a";
}

.icon-camera-off:before {
    content: "\e93b";
}

.icon-cast:before {
    content: "\e93c";
}

.fa-check:before,
.icon-check:before {
    content: "\e93d";
}

.icon-chevron-down:before {
    content: "\e940";
}

.icon-chevron-left:before {
    content: "\e941";
}

.icon-chevron-right:before {
    content: "\e942";
}

.icon-chevron-up:before {
    content: "\e947";
}

.icon-chevrons-down:before {
    content: "\e943";
}

.icon-chevrons-left:before {
    content: "\e944";
}

.icon-chevrons-right:before {
    content: "\e945";
}

.icon-chevrons-up:before {
    content: "\e946";
}

.icon-chrome:before {
    content: "\e948";
}

.icon-circle:before {
    content: "\e949";
}

.icon-circle-check:before,
.icon-check-circle:before,
.fa-check-circle:before,
.fa-check-circle-o:before {
    content: "\e93e";
}

.icon-circle-cross:before {
    content: "\e043";
}

.icon-circle-minus:before,
.icon-minus-circle:before {
    content: "\e9b5";
}

.icon-circle-plus:before,
.icon-plus-circle:before {
    content: "\e9c9";
}

.icon-clipboard:before {
    content: "\e94a";
}

.icon-clock:before {
    content: "\e94b";
}

.fa-cloud:before,
.icon-cloud:before {
    content: "\e927";
}

.icon-download-cloud:before,
.icon-cloud-download:before,
.fa-cloud-download:before {
    content: "\e960";
}

.icon-cloud-drizzle:before {
    content: "\e928";
}

.icon-cloud-lightning:before {
    content: "\e929";
}

.icon-cloud-off:before {
    content: "\e92a";
}

.icon-cloud-rain:before {
    content: "\e92b";
}

.icon-cloud-snow:before {
    content: "\e92c";
}

.fa-cloud-upload:before,
.icon-cloud-upload:before,
.icon-upload-cloud:before {
    content: "\ea04";
}

.icon-code:before {
    content: "\e92d";
}

.icon-codepen:before {
    content: "\e92e";
}

.icon-codesandbox:before {
    content: "\e92f";
}

.icon-coffee:before {
    content: "\e930";
}

.icon-cog:before,
.icon-settings:before {
    content: "\e9db";
}

.icon-columns:before {
    content: "\e931";
}

.icon-command:before {
    content: "\e932";
}

.icon-compass:before {
    content: "\e933";
}

.icon-content-left:before {
    content: "\e101";
}

.icon-content-right:before {
    content: "\e100";
}

.icon-minimize:before,
.icon-contract:before {
    content: "\e9b2";
}

.icon-copy:before {
    content: "\e934";
}

.icon-corner-down-left:before {
    content: "\e935";
}

.icon-corner-down-right:before {
    content: "\e936";
}

.icon-corner-left-down:before {
    content: "\e937";
}

.icon-corner-left-up:before {
    content: "\e938";
}

.icon-corner-right-down:before {
    content: "\e970";
}

.icon-corner-right-up:before {
    content: "\e971";
}

.icon-corner-up-left:before {
    content: "\e972";
}

.icon-corner-up-right:before {
    content: "\e973";
}

.icon-cpu:before {
    content: "\e954";
}

.icon-credit-card:before {
    content: "\e955";
}

.icon-crop:before {
    content: "\e956";
}

.fa-close:before,
.icon-x:before,
.icon-cross:before {
    content: "\ea16";
}

.icon-crosshair:before {
    content: "\e957";
}

.icon-database:before {
    content: "\e958";
}

.icon-delete:before {
    content: "\e959";
}

.icon-disc:before {
    content: "\e95a";
}

.icon-divide:before {
    content: "\e95b";
}

.icon-divide-circle:before {
    content: "\e95c";
}

.icon-divide-square:before {
    content: "\e95d";
}

.icon-dollar-sign:before {
    content: "\e95e";
}

.icon-download:before {
    content: "\e95f";
}

.icon-dribbble:before {
    content: "\e961";
}

.icon-drop:before,
.icon-droplet:before {
    content: "\e962";
}

.icon-edit:before {
    content: "\e963";
}

.icon-edit-2:before {
    content: "\e964";
}

.icon-edit-3:before {
    content: "\e965";
}

.fa-ellipsis-h:before,
.icon-more-horizontal:before,
.icon-ellipsis:before {
    content: "\e9b9";
}

.icon-esc:before {
    content: "\e089";
}

.icon-expand:before,
.icon-maximize:before {
    content: "\e9aa";
}

.icon-external-link:before,
.icon-open:before,
.fa-external-link:before,
.fa-external-link-square:before {
    content: "\e966";
}

.icon-eye:before {
    content: "\e967";
}

.icon-eye-off:before {
    content: "\e968";
}

.icon-facebook:before {
    content: "\e969";
}

.icon-fast-forward:before {
    content: "\e96a";
}

.icon-feather:before {
    content: "\e96b";
}

.icon-figma:before {
    content: "\e96c";
}

.icon-file:before {
    content: "\e96d";
}

.icon-file-add:before {
    content: "\e125";
}

.icon-file-minus:before {
    content: "\e96e";
}

.icon-file-plus:before {
    content: "\e96f";
}

.icon-file-subtract:before {
    content: "\e126";
}

.icon-file-text:before {
    content: "\e94c";
}

.icon-film:before {
    content: "\e94d";
}

.icon-filter:before {
    content: "\e94e";
}

.icon-flag:before {
    content: "\e94f";
}

.icon-folder:before {
    content: "\e950";
}

.icon-folder-minus:before {
    content: "\e951";
}

.icon-folder-plus:before {
    content: "\e952";
}

.icon-framer:before {
    content: "\e953";
}

.icon-frown:before {
    content: "\e98c";
}

.icon-gift:before {
    content: "\e98d";
}

.icon-git-branch:before {
    content: "\e98e";
}

.icon-git-commit:before {
    content: "\e98f";
}

.icon-git-merge:before {
    content: "\e992";
}

.icon-git-pull-request:before {
    content: "\e993";
}

.icon-github:before {
    content: "\e990";
}

.icon-gitlab:before {
    content: "\e991";
}

.icon-globe:before {
    content: "\e994";
}

.icon-grid:before {
    content: "\e995";
}

.icon-grid-2:before {
    content: "\e103";
}

.icon-hard-drive:before {
    content: "\e996";
}

.icon-hash:before {
    content: "\e997";
}

.icon-user:before,
.icon-head:before {
    content: "\ea07";
}

.icon-headphones:before {
    content: "\e998";
}

.icon-heart:before {
    content: "\e974";
}

.icon-help:before,
.icon-help-circle:before {
    content: "\e975";
}

.icon-hexagon:before {
    content: "\e976";
}

.icon-home:before {
    content: "\e977";
}

.icon-image:before {
    content: "\e978";
}

.icon-inbox:before {
    content: "\e979";
}

.icon-info:before {
    content: "\e97a";
}

.icon-instagram:before {
    content: "\e97b";
}

.icon-italic:before {
    content: "\e97c";
}

.icon-key:before {
    content: "\e97d";
}

.icon-layers:before {
    content: "\e97e";
}

.icon-layout:before {
    content: "\e97f";
}

.icon-life-buoy:before {
    content: "\e980";
}

.icon-link:before {
    content: "\e981";
}

.icon-link-2:before {
    content: "\e982";
}

.icon-linkedin:before {
    content: "\e983";
}

.icon-list:before {
    content: "\e984";
}

.icon-loader:before {
    content: "\e985";
}

.icon-location:before {
    content: "\e070";
}

.icon-location-2:before {
    content: "\e071";
}

.icon-lock:before,
.fa-lock:before {
    content: "\e986";
}

.icon-log-in:before {
    content: "\e987";
}

.icon-log-out:before {
    content: "\e988";
}

.icon-mail:before,
.fa-envelope-open:before,
.fa-envelope-open-o:before,
.fa-envelope-square:before,
.fa-envelope:before,
.fa-envelope-o:before {
    content: "\e989";
}

.icon-map:before {
    content: "\e98a";
}

.icon-map-pin:before {
    content: "\e98b";
}

.icon-marquee:before {
    content: "\e082";
}

.icon-marquee-minus:before {
    content: "\e084";
}

.icon-marquee-plus:before {
    content: "\e083";
}

.icon-maximize:before,
.fa-arrows-alt:before,
.fa-arrows:before,
.fa-expand:before {
    content: "\e9aa";
}

.icon-maximize-2:before {
    content: "\e9ab";
}

.icon-meh:before {
    content: "\e9ac";
}

.fa-bars:before,
.icon-menu:before,
.fa-sliders:before {
    content: "\e9ad";
}

.icon-message-square:before {
    content: "\e9af";
}

.icon-mic-off:before {
    content: "\e9b1";
}

.icon-microphone:before,
.icon-mic:before {
    content: "\e9b0";
}

.icon-minimize:before,
.fa-compress:before {
    content: "\e9b2";
}

.icon-minimize-2:before {
    content: "\e9b3";
}

.icon-minus:before {
    content: "\e9b4";
}

.icon-monitor:before {
    content: "\e9b7";
}

.icon-moon:before {
    content: "\e9b8";
}

.icon-more-vertical:before {
    content: "\e9ba";
}

.icon-mouse-pointer:before {
    content: "\e9bb";
}

.icon-move:before {
    content: "\e9bc";
}

.icon-music:before {
    content: "\e9bd";
}

.icon-volume-x:before,
.icon-mute:before {
    content: "\ea11";
}

.icon-navigation:before {
    content: "\e9be";
}

.icon-navigation-2:before {
    content: "\e9bf";
}

.icon-octagon:before {
    content: "\e999";
}

.icon-outbox:before {
    content: "\e123";
}

.icon-package:before {
    content: "\e99a";
}

.icon-paper:before {
    content: "\e034";
}

.icon-paper-clip:before,
.icon-paperclip:before {
    content: "\e99b";
}

.icon-paper-stack:before {
    content: "\e035";
}

.icon-paragraph:before {
    content: "\e025";
}

.icon-pause:before {
    content: "\e99c";
}

.icon-pause-circle:before {
    content: "\e99d";
}

.icon-pen-tool:before {
    content: "\e99e";
}

.icon-percent:before {
    content: "\e99f";
}

.icon-phone:before {
    content: "\e9a0";
}

.icon-phone-call:before {
    content: "\e9a1";
}

.icon-phone-forwarded:before {
    content: "\e9a2";
}

.icon-phone-incoming:before {
    content: "\e9a3";
}

.icon-phone-missed:before {
    content: "\e9a4";
}

.icon-phone-off:before {
    content: "\e9a5";
}

.icon-phone-outgoing:before {
    content: "\e9a6";
}

.icon-pie-chart:before,
.icon-pie-graph:before {
    content: "\e9a7";
}

.icon-play:before {
    content: "\e9a8";
}

.icon-play-circle:before {
    content: "\e9a9";
}

.icon-plus:before {
    content: "\e9c8";
}

.icon-pocket:before {
    content: "\e9cb";
}

.icon-power:before {
    content: "\e9cc";
}

.icon-printer:before {
    content: "\e9cd";
}

.icon-radio:before {
    content: "\e9ce";
}

.icon-record:before {
    content: "\e049";
}

.icon-refresh-ccw:before {
    content: "\e9cf";
}

.icon-refresh-cw:before,
.icon-reload:before {
    content: "\e9d0";
}

.icon-repeat:before {
    content: "\e9d1";
}

.icon-rewind:before {
    content: "\e9d2";
}

.icon-ribbon:before {
    content: "\e009";
}

.icon-reply:before,
.icon-rotate-ccw:before {
    content: "\e9d3";
}

.icon-rotate-cw:before {
    content: "\e9d4";
}

.icon-rss:before {
    content: "\e9d5";
}

.icon-save:before {
    content: "\e9d6";
}

.icon-scissors:before {
    content: "\e9d7";
}

.icon-search:before {
    content: "\e9d8";
}

.icon-send:before {
    content: "\e9d9";
}

.icon-server:before {
    content: "\e9da";
}

.icon-share:before {
    content: "\e9dc";
}

.icon-share-2:before {
    content: "\e9dd";
}

.icon-shield:before {
    content: "\e9de";
}

.icon-shield-off:before {
    content: "\e9df";
}

.icon-shopping-cart:before {
    content: "\e9e1";
}

.fa-unsorted:before,
.icon-shuffle:before {
    content: "\e9e2";
}

.icon-sidebar:before {
    content: "\e9e3";
}

.icon-signal:before {
    content: "\e011";
}

.icon-skip-back:before {
    content: "\e9c0";
}

.icon-skip-forward:before {
    content: "\e9c1";
}

.icon-slack:before {
    content: "\e9c2";
}

.icon-slash:before {
    content: "\e9c3";
}

.icon-sliders:before {
    content: "\e9c4";
}

.icon-smartphone:before {
    content: "\e9c5";
}

.icon-smile:before {
    content: "\e9c6";
}

.icon-speaker:before {
    content: "\e9c7";
}

.icon-speech-bubble:before,
.icon-message-circle:before {
    content: "\e9ae";
}

.icon-square:before {
    content: "\e9e4";
}

.icon-check-square:before,
.icon-square-check:before,
.fa-check-square-o:before,
.fa-check-square:before {
    content: "\e93f";
}

.icon-square-cross:before {
    content: "\e047";
}

.icon-minus-square:before,
.icon-square-minus:before {
    content: "\e9b6";
}

.icon-square-plus:before,
.icon-plus-square:before {
    content: "\e9ca";
}

.icon-stack:before {
    content: "\e032";
}

.icon-stack-2:before {
    content: "\e033";
}

.icon-star:before {
    content: "\e9e5";
}

.icon-stop:before {
    content: "\e054";
}

.icon-stop-circle:before {
    content: "\e9e6";
}

.icon-sun:before {
    content: "\e9e7";
}

.icon-sunrise:before {
    content: "\e9e8";
}

.icon-sunset:before {
    content: "\e9e9";
}

.icon-table:before {
    content: "\e9ea";
}

.icon-tablet:before {
    content: "\e9eb";
}

.icon-tag:before {
    content: "\e9ec";
}

.icon-target:before {
    content: "\e9ed";
}

.icon-terminal:before {
    content: "\e9ee";
}

.icon-thermometer:before {
    content: "\e9ef";
}

.icon-thumbs-down:before {
    content: "\e9f0";
}

.icon-thumbs-up:before {
    content: "\e9f1";
}

.icon-toggle:before {
    content: "\e003";
}

.icon-toggle-left:before {
    content: "\e9f2";
}

.icon-toggle-right:before {
    content: "\e9f3";
}

.icon-tool:before {
    content: "\e9f4";
}

.icon-trash:before {
    content: "\e9f5";
}

.icon-trash-2:before {
    content: "\e9f6";
}

.icon-trello:before {
    content: "\e9f7";
}

.icon-trending-down:before {
    content: "\e9f8";
}

.icon-trending-up:before {
    content: "\e9f9";
}

.icon-triangle:before {
    content: "\e9fa";
}

.icon-truck:before {
    content: "\e9fb";
}

.icon-tv:before {
    content: "\e9fc";
}

.icon-twitch:before {
    content: "\e9fd";
}

.icon-twitter:before {
    content: "\e9fe";
}

.icon-type:before {
    content: "\e9ff";
}

.icon-umbrella:before {
    content: "\ea00";
}

.icon-underline:before {
    content: "\ea01";
}

.icon-unlock:before {
    content: "\ea02";
}

.icon-upload:before {
    content: "\ea03";
}

.icon-user-check:before {
    content: "\ea05";
}

.icon-user-minus:before {
    content: "\ea06";
}

.icon-user-plus:before {
    content: "\ea08";
}

.icon-user-x:before {
    content: "\ea0a";
}

.icon-users:before {
    content: "\ea09";
}

.icon-video:before {
    content: "\ea0b";
}

.icon-video-off:before {
    content: "\ea0c";
}

.icon-voicemail:before {
    content: "\ea0d";
}

.icon-volume:before {
    content: "\ea0e";
}

.icon-volume-1:before {
    content: "\ea0f";
}

.icon-volume-2:before {
    content: "\ea10";
}

.icon-watch:before {
    content: "\ea12";
}

.icon-wifi:before {
    content: "\ea13";
}

.icon-wifi-off:before {
    content: "\ea14";
}

.icon-wind:before {
    content: "\ea15";
}

.icon-x-circle:before {
    content: "\ea17";
}

.icon-x-octagon:before {
    content: "\ea18";
}

.icon-x-square:before {
    content: "\ea19";
}

.icon-youtube:before {
    content: "\ea1a";
}

.icon-zap:before {
    content: "\ea1b";
}

.icon-zap-off:before {
    content: "\ea1c";
}

.icon-zoom-in:before {
    content: "\ea1d";
}

.icon-zoom-out:before {
    content: "\ea1e";
}
.modular-review-faq-container---header {
    border-bottom: 1px solid black;
}

    .modular-review-faq-container---header span {
        line-height: 200%;
        background: #666;
        color: white;
        cursor: pointer;
    }

        .modular-review-faq-container---header span.r-section-active {
            background: black;
        }

        .modular-review-faq-container---header span i {
            display: block;
            float: right;
            background: rgba(255,255,255,0.15);
            font-size: smaller;
        }

.modular-review-faq-container---body {
    display: none;
}

    .modular-review-faq-container---body.r-section-active {
        display: block;
    }

.modular-review-faq-slidein {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.65);
    z-index: 100000;
    opacity: 0;
    display: none;
}

    .modular-review-faq-slidein.slidein-show {
        display: block;
        opacity: 1;
    }

.modular-review-faq-slidein-inner {
    background: white;
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100%;
    height: 100%;
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -o-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    overflow-y: auto;
}

.modular-review-faq-slidein.slidein-show .modular-review-faq-slidein-inner {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -o-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}


.modular-review-faq-slidein-close {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}
/**** STARBUY BRANDING ***************************************************************************/

:root {
    --starbuyColourOne: #f4eef8;
    --starbuyColourTwo: #e0d0ed;
    --starbuyColourThree: #9158bf;
    --starbuyColourOneApplied: #f4f8ee;
    --starbuyColourTwoApplied: #e3edd0;
    --starbuyColourThreeApplied: #789b43;
}

/**** DRAWER GENERICS ***************************************************************************/

.starbuy-drawer *:not(.fa),
.starbuy-drawer-promotion *:not(.fa),
.starbuy-faf-preview *:not(.fa) {
    font-family: 'MuliRegularFont' !important;
}

.starbuy-list-element *:not(.fa),
.starbuy-drawer-promo-header-description-top,
.starbuy-drawer-single-product .starbuy-drawer-single-product-info---name,
.starbuy-drawer-multi-products .starbuy-drawer-single-product-info---name,
.starbuy-drawer-single-product .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-explainer,
.starbuy-product-preview .starbuy-product-preview-header,
.starbuy-faf-preview .starbuy-faf-preview-message-lead,
.starbuy-faf-preview .starbuy-faf-preview-message-whenyoubuy {
    font-family: 'MuliBoldFont' !important;
}

.starbuy-drawer {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .starbuy-drawer[data-state="open"] {
        opacity: 1;
    }

    .starbuy-drawer[data-drawer-number="1"] {
        z-index: 500;
    }

    .starbuy-drawer[data-drawer-number="2"] {
        z-index: 501;
    }

.starbuy-drawer-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    min-height: 100%;
    width: 500px;
    max-width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    transform: translate(100%, 0px);
    -webkit-transform: translate(100%, 0px);
    -moz-transform: translate(100%, 0px);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .starbuy-drawer[data-state="open"] .starbuy-drawer-inner {
        transform: translate(0px, 0px);
        -webkit-transform: translate(0px, 0px);
        -moz-transform: translate(0px, 0px);
    }

    .starbuy-drawer[data-drawer-number="1"] .starbuy-drawer-inner {
        width: 500px;
    }

.starbuy-drawer-promotion {
    width: 100%;
    min-height: 100%;
    padding: 32px;
    background: white;
    flex-grow: 1;
    -webkit-box-shadow: -10px 0px 16px 0px rgba(0,0,0,0.35);
    box-shadow: -10px 0px 16px 0px rgba(0,0,0,0.35);
    overflow-x: none;
    overflow-y: auto;
    user-select: none;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

.starbuy-drawer-close {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    flex-grow: 0;
    min-width: 32px;
    cursor: pointer;
    position: relative;
    background: black;
}

    .starbuy-drawer-close:before, .starbuy-drawer-close:after {
        position: absolute;
        top: 8px;
        left: 15px;
        content: ' ';
        height: 16px;
        width: 2px;
        background-color: white;
    }

    .starbuy-drawer-close:before {
        transform: rotate(45deg);
    }

    .starbuy-drawer-close:after {
        transform: rotate(-45deg);
    }

.starbuy-drawer-close-inner {
    margin-top: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 0.0625rem solid;
    color: var(--starbuyColourThree);
    font-size: 0.75rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    gap: 0.25rem;
}

.starbuy-drawer-promo-header {
    margin-bottom: 16px;
}

.starbuy-drawer-promo-header-title {
    background-color: var(--starbuyColourThree);
    color: var(--starbuyColourOne);
    padding: 8px 0;
    margin-bottom: 8px;
    text-align: center;
}

    .starbuy-drawer-promo-header-title span:before {
        content: '\e9e5';
        font-family: feather;
    }

.starbuy-drawer-promo-header-description {
    padding: 16px;
    background-color: var(--starbuyColourOne);
}

.starbuy-drawer-promo-header-description-top {
    color: var(--starbuyColourThree);
    margin-bottom: 8px;
    font-size: 1.25em;
}

.starbuy-drawer-promo-header-description-bottom {
    color: #222;
    font-size: 0.9em;
}

.starbuy-drawer-divider {
    width:100%;
    float:left;
    height:1px;
    background: var(--starbuyColourTwo);
    margin: 16px 0;
}


/**** DRAWER 1 - PRODUCT ***************************************************************************/
.starbuy-list-element {
    padding: 16px 48px 16px 16px;
    font-size: 1.25em;
    margin-bottom: 16px;
    position: relative;
    color: var(--starbuyColourThree);
    background-color: var(--starbuyColourOne);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    user-select: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    -webkit-align-items: stretch;
    -ms-align-items: stretch;
    -moz-align-items: stretch;
}

    .starbuy-list-element:hover {
        background-color: var(--starbuyColourTwo);
    }

    .starbuy-list-element[data-applied="true"] {
        color: var(--starbuyColourThreeApplied);
        background-color: var(--starbuyColourTwoApplied);
        cursor: auto;
    }

        .starbuy-list-element[data-applied="true"]:hover {
            background-color: var(--starbuyColourTwoApplied);
        }

    .starbuy-list-element [class*="starbuy-list-element-"] {
        position: absolute;
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        width: 32px;
        height: 100%;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        justify-content: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        align-content: center;
        align-items: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        font-size: 0.8em;
    }

    .starbuy-list-element .starbuy-list-element-arrow {
        background-color: var(--starbuyColourTwo);
        color: var(--starbuyColourThree);
    }

        .starbuy-list-element .starbuy-list-element-arrow:after {
            content: '\e910';
            font-family: feather;
        }

    .starbuy-list-element .starbuy-list-element-check {
        background-color: var(--starbuyColourTwoApplied);
        color: var(--starbuyColourThreeApplied);
    }

        .starbuy-list-element .starbuy-list-element-check:after {
            content: '\e93d';
            font-family: feather;
        }

    .starbuy-list-element .starbuy-list-element-prefix {
        background-color: var(--starbuyColourThree);
        color: white;
        position: relative;
        padding: 0 8px;
        margin: 0 16px 0 0;
        width: auto;
        top: auto;
        bottom: auto;
        left: auto;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        font-size: 10px;
    }

        .starbuy-list-element .starbuy-list-element-prefix:before {
            content: '\e9e5';
            font-family: feather;
            margin-right: 4px;
        }

.basket-itemrow-offers .starbuy-product-preview {
    float: left;
    margin: 0 8px 16px 0;
}

/**** DRAWER 2 - OFFER ***************************************************************************/

.starbuy-drawer-single-product {
}

    .starbuy-drawer-multi-products,
    .starbuy-drawer-single-product,
    .starbuy-drawer-single-product .starbuy-drawer-single-product-info,
    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---image,
    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---name,
    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price,
    .starbuy-drawer-single-product .starbuy-drawer-addtobasket,
    .starbuy-drawer-single-product .starbuy-drawer-viewproduct,
    .starbuy-drawer-multi-products .starbuy-drawer-viewproduct,
    .starbuy-drawer-viewalloffers-backbutton,
    .starbuy-drawer-multi-products .starbuy-drawer-multi-products-items,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info > a,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info > div {
        width: 100%;
        float: left;
    }

        .starbuy-drawer-single-product .starbuy-drawer-viewproduct,
        .starbuy-drawer-multi-products .starbuy-drawer-viewproduct,
        .starbuy-drawer-viewalloffers-backbutton {
            transition: all 0.3s ease-in-out;
            cursor: pointer;
        }

        .starbuy-drawer-viewalloffers-backbutton {
            margin: 0 0 8px 0;
        }

        .starbuy-drawer-single-product .starbuy-drawer-viewproduct,
        .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproducttarget,
        .starbuy-drawer-viewalloffers-backbutton {
            color: white;
            background-color: var(--starbuyColourThree);
            text-align: center;
            border-radius: 3px;
            padding: 8px 0;
            font-size: 0.8em;
        }

            .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproducttarget,
            .starbuy-drawer-viewalloffers-backbutton {
                background-color: white;
                border: 1px solid;
                border-color: var(--starbuyColourThree);
                color: var(--starbuyColourThree);
            }

                .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproducttarget:hover,
                .starbuy-drawer-viewalloffers-backbutton:hover {
                    background-color: var(--starbuyColourThree);
                    color: white;
                }

        .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproductquicklook {
            color: var(--starbuyColourThree);
        }

            .starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproductquicklook:after {
                content: '\e966';
                font-family: feather;
                margin-left: 4px;
                display: inline-block;
            }

    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---image,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---image {
        margin: 0 0 16px 0;
        display: block;
    }

    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---name,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---name {
        margin: 0 0 8px 0;
    }

    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---name {
        min-height: calc(1.55em * 3);
    }

    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price,
    .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price {
        margin: 0 0 8px 0;
    }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price > div,
        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price > div {
            float: left;
        }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-afterstarbuy,
        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-afterstarbuy {
            color: var(--starbuyColourThree);
            margin: 0 16px 0 0;
        }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-beforestarbuy,
        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-beforestarbuy {
            color: #999;
            text-decoration: line-through;
        }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---price .starbuy-drawer-single-product-info---price-explainer {
            width: 100%;
            font-size: 0.7em;
        }

    .starbuy-drawer-single-product .starbuy-drawer-addtobasket {
        margin: 0 0 8px 0;
    }

        .starbuy-drawer-single-product .starbuy-drawer-addtobasket .add-to-cart-area-dropdown-qty {
            display: none !important;
        }

    .starbuy-drawer-multi-products .starbuy-drawer-multi-products-items {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin: 16px 0 0 0;
    }

        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---image {
            margin: 0 0 8px 0;
        }

        .starbuy-drawer-multi-products .starbuy-drawer-viewproduct {
            font-size: 0.8em;
            padding: 4px 0;
        }

        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---name {
            font-size:0.9em;
        }

        .starbuy-drawer-multi-products .starbuy-drawer-single-product-info---price {
            font-size: 0.8em;
        }

    .starbuy-drawer[data-drawer-number="2"] {
        --padding: 32px;
    }

    .starbuy-drawer[data-drawer-number="2"] .starbuy-drawer-promotion {
        padding: 0;
    }

    .starbuy-drawer[data-drawer-number="2"] .starbuy-drawer-single-product {
        padding: var(--padding, 32px);
    }

    .starbuy-drawer[data-drawer-number="2"] .starbuy-drawer-promotion > .starbuy-drawer-promo-header {
        padding: var(--padding, 32px);;
        margin-bottom: 0;
    }

    .starbuy-drawer[data-drawer-number="2"] .starbuy-drawer-promotion > .starbuy-drawer-viewalloffers-backbutton {
        margin-inline: var(--padding, 32px);
        width: calc( 100% - calc( var(--padding, 32px) * 2 ));
    }

    .starbuy-drawer[data-drawer-number="2"] :is(.starbuy-drawer-top-buttons, .starbuy-drawer-multi-products-items) {
        padding: 0 var(--padding, 32px) var(--padding, 32px) var(--padding, 32px);
        overflow: hidden;
    }

    .starbuy-drawer-bottom-buttons {
        width: 100%;
        float: left;
        display: block;
        padding: var(--padding, 32px);
        background: var(--starbuyColourTwo);
    }

    .starbuy-drawer-top-buttons {
        background: transparent;
    }

    .starbuy-drawer-bottom-buttons :is(.starbuy-drawer-multi-products .starbuy-drawer-viewproduct.starbuy-drawer-viewproducttarget, .starbuy-drawer-viewalloffers-backbutton) {
        background: var(--starbuyColourThree);
        color: #fff;
        text-transform: uppercase;
    }

@media screen and (max-width: 768px) {
    .starbuy-drawer[data-drawer-number="2"] {
        --padding: 16px;
    }
}

/**** PREVIEWS ***************************************************************************/

#detailfast-starbuys {
    width: 100%;
}

.starbuy-product-preview,
.starbuy-faf-preview {
    border: 1px solid;
    border-color: var(--starbuyColourThree);
    background: white;
    border-radius: 3px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    -webkit-align-items: stretch;
    line-height: 150%;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

    .starbuy-product-preview:hover {
        background: var(--starbuyColourOne);
    }

    .starbuy-product-preview > div,
    .starbuy-faf-preview > div {
        padding: 16px;
    }

    .starbuy-faf-preview {
        max-width: 100%;
        line-height: 135%;
        margin: 0 0 16px 0;
        background-color: var(--starbuyColourOne);
    }

    .starbuy-product-preview .starbuy-product-preview-header,
    .starbuy-faf-preview .starbuy-faf-preview-header {
        background: var(--starbuyColourThree);
        color: white;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 10px;
    }

        .starbuy-faf-preview .starbuy-faf-preview-header {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: row;
            justify-content: center;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            -ms-justify-content: center;
            align-content: center;
            align-items: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
        }

            .starbuy-product-preview .starbuy-product-preview-header .starbuy-product-preview-header-star:after,
            .starbuy-faf-preview .starbuy-faf-preview-header .starbuy-faf-preview-header-star:after {
                content: '\e9e5';
                font-family: feather;
            }

            .starbuy-faf-preview .starbuy-faf-preview-header .starbuy-faf-preview-header-star:after {
                margin-right: 3px;
            }

    .starbuy-product-preview .starbuy-product-preview-message {
        flex-grow: 1;
    }

        .starbuy-product-preview .starbuy-product-preview-message strong {
            text-transform: uppercase;
            color: var(--starbuyColourThree);
            font-weight: normal;
        }

    .starbuy-product-preview .starbuy-product-preview-link {
        color: var(--starbuyColourThree);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 10px;
    }

.starbuy-faf-preview .starbuy-faf-preview-message-lead {
    color: var(--starbuyColourThree);
    margin-bottom: 8px;
    font-size: 1.5em;
    line-height: 1.5em;
}

.starbuy-faf-preview .starbuy-faf-preview-message-whenyoubuy {
    font-size:1.2em;
}

.starbuy-faf-preview .starbuy-faf-preview-message-explainer {
    font-size: 0.9em;
    margin: 8px 0 0 0;
}

@media screen and (max-width: 767.99px) {
    .starbuy-drawer-promo-header-title {
        padding: 4px 0;
        margin-bottom: 4px;
    }

    .starbuy-drawer-promo-header-description {
        padding: 8px;
    }

    .starbuy-drawer-promo-header-description-top {
        font-size: 1em;
        margin-bottom: 4px;
    }

    .starbuy-drawer-promotion {
        padding: 16px;
    }

    .starbuy-drawer-single-product .starbuy-drawer-single-product-info---image {
        margin: 0 0 8px 0;
    }

        .starbuy-drawer-single-product .starbuy-drawer-single-product-info---image .imgCtr:after {
            padding-bottom: 75%;
        }

    .starbuy-drawer-single-product .starbuy-drawer-addtobasket .add-to-cart-area-msg {
        font-size: 0.8em;
    }

    .starbuy-product-preview,
    .starbuy-faf-preview {
        flex-wrap: wrap;
        display: -webkit-flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        display: flex;
        flex-wrap: wrap;
    }

        .starbuy-product-preview > div {
            width: 100%;
            padding: 0 8px;
            text-align: center;
            line-height: 32px;
        }

        .starbuy-faf-preview > div {
            width: 100%;
            padding: 8px;
        }

        .starbuy-product-preview .starbuy-product-preview-link {
            border-top: 1px dotted;
            border-color: var(--starbuyColourTwo);
            color: var(--starbuyColourThree);
        }

        .starbuy-faf-preview .starbuy-faf-preview-message-lead {
            font-size: 1.25em;
            line-height: 1.25em;
        }

        .starbuy-faf-preview .starbuy-faf-preview-message-whenyoubuy {
            font-size: 1em;
        }

        .starbuy-faf-preview .starbuy-faf-preview-message-explainer {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .starbuy-faf-preview[data-view-all-explainer="1"] .starbuy-faf-preview-message-explainer {
            text-overflow: unset;
            white-space: unset;
            overflow: unset;
        }

}
.quicklookitem-wrapper,
.quicklookitem-inner {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.quicklookitem-wrapper {
    z-index: 3000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    opacity: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: center;
    -webkit-justify-content: center;
    align-content: center;
    align-items: center;
    -webkit-align-items: center;
}

    .quicklookitem-wrapper[data-state="open"] {
        opacity: 1;
        overflow: auto;
    }

    .quicklookitem-wrapper .quicklookitem-inner {
        width: 1250px;
        height: auto;
        max-height: none;
        max-width: calc(100vw - 32px);
        margin: 16px;
        background: white;
        -webkit-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.5);
        top: 10px;
        position: relative;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        align-items: stretch;
        -webkit-align-items: stretch;
        -ms-align-items: stretch;
        -moz-align-items: stretch;
    }

    .quicklookitem-wrapper[data-state="open"] .quicklookitem-inner {
        top: 0px;
    }

.quicklookitem-inner .quicklookitem-inner-left,
.quicklookitem-inner .quicklookitem-inner-right {
    width: 50%;
    float: left;
}

.quicklookitem-inner-right {
    padding: 32px;
    position: relative;
}

    .quicklookitem-inner-right[data-isstarbuy="true"] {
        padding: 80px 32px 32px 32px;
        background-color: var(--starbuyColourOne);
    }

        .quicklookitem-inner-right[data-isstarbuy="true"] .lead-in-header-starbuys {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            line-height: 48px;
            text-align: center;
            color: white;
            background-color: var(--starbuyColourThree);
        }

    .quicklookitem-inner-right > div {
        width: 100%;
        float: left;
        margin-bottom: 16px;
    }

    .quicklookitem-inner-right .quicklookitem-inner-right---name {
        font-size: 1.25em;
        font-family: 'citrfontbold';
    }

    .quicklookitem-inner-right .quicklookitem-inner-right---prices {
        font-size: 0.9em;
    }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices > div {
            float: left;
            margin-right: 8px;
        }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-starbuy {
            color: var(--starbuyColourThree);
        }

            .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-starbuy + .quicklookitem-inner-right---prices-price {
                color: #999;
                text-decoration: line-through;
            }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-starbuy-explainer {
            color: var(--starbuyColourThree);
            font-size: 0.7em;
            width:100%;
        }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-price {
        }

        .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-wasprice {
            color: #999;
            text-decoration: line-through;
        }

    .quicklookitem-inner-right .quicklookitem-inner-right---clickcollectnotice {
        border: 1px solid #2f76ec;
        background: #e8f4ff;
        color: #2f76ec;
        padding: 8px;
        text-align: center;
        font-size: 0.9em;
    }

    .quicklookitem-inner-right .quicklookitem-inner-right---link {
        background: #2f76ec;
        color: white;
        border-radius: 4px;
        padding: 16px;
        text-align: center;
        display: block;
        float: left;
        width: 100%;
    }


.quicklookitem-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    max-width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: white;
    background: black;
    cursor: pointer;
    z-index: 3001;
}

@media screen and (max-width : 1023px) {
    .quicklookitem-wrapper {
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        -webkit-align-items: flex-start;
    }

    .quicklookitem-inner .quicklookitem-inner-left,
    .quicklookitem-inner .quicklookitem-inner-right {
        width: 100%;
    }

    .quicklookitem-inner-right {
        padding: 16px;
    }

        .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-button {
            width: auto;
            margin-top: 0;

        }

            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-button,
            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-dropdown-qty input,
            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-dropdown-qty-label,
            .quicklookitem-inner-right .add-to-cart-area-1 .add-to-cart-area-dropdown select {
                line-height: 36px;
                height: 36px;
            }

            .quicklookitem-inner-right .add-to-cart-area-1-row-2 .add-to-cart-area-dropdown-qty input {
                padding: 0 8px;
                width: 40px;
            }

        .quicklookitem-inner-right .add-to-cart-area-msg,
        .quicklookitem-inner-right .quicklookitem-inner-right---clickcollectnotice {
            font-size: 11px;
        }

        .quicklookitem-inner-right[data-isstarbuy="true"] {
            padding: 40px 16px 16px 16px;
        }

            .quicklookitem-inner-right[data-isstarbuy="true"] .lead-in-header-starbuys {
                height: 32px;
                line-height: 32px;
                font-size: 0.9em;
            }

        .quicklookitem-inner-right > div {
            margin-bottom: 8px;
        }

    .quicklookitem-inner .quicklookitem-inner-left .quicklookitem-image > div {
        background-size: cover !important;
    }

        .quicklookitem-inner .quicklookitem-inner-left .quicklookitem-image > div:after {
            padding-bottom: 80%;
        }

    .quicklookitem-inner-right .quicklookitem-inner-right---link {
        padding: 8px;
    }
}
 .imm-widget-anchor{
     display:flex !important;
     margin-bottom:0px !important;
     background: rgb(255, 255, 255);
 }
 .finance-output{
     width:100%;
 }
 .finance-output iframe{
     margin:0px auto;
     width:90% !important;
 }
.finance-hidden-price{
    display:none;
}
.view-all-link-container {
    align-items: center;
    display: flex;
    justify-content: end;
    padding: 0 1.25rem;
    width: 100%;
}
.view-all-link {
    font-size: 1rem;
    color: #0077cc;
}
.view-all-link:hover,
.view-all-link:focus {
    color: #004b99;
    text-decoration: underline;
}
/* Not found Page */
.not-found-page {
    display: flex;
    justify-content: center;
    width: 100%;
}

.not-found-container {
    align-items: center;
    background: #fff;
    background-position: center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 4rem;
    position: relative;
    width: 100%;
    z-index: 0;
    text-align: center;
}

    .not-found-container::before {
        align-items: center;
        bottom: 0;
        color: #f7f7f7;
        content: '404';
        display: flex;
        font-size: 20rem;
        justify-content: center;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }

.not-found-container-has-background::before {
    content: '';
}

.not-found-title {
    font-size: 4rem;
}

.not-found-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Classes only found in the default contents for the page. These may not be present, if the contents has been overridden. */
.not-found-paragraph-container {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.not-found-first-paragraph,
.not-found-second-paragraph {
    font-size: 2rem;
}

.not-found-link-container {
    display: flex;
    flex-direction: column;
}

.not-found-homepage-link {
    background-color: cornflowerblue;
    border-radius: 0.5rem;
    color: #fff;
    padding: 1rem;
}
/*
 *********************************
 * Collections Landing Page Styles
 *********************************
 */

 :root {
    --collections--content-search-gap: 2rem;
    --collections--clear-btn-color: #D54939;
    --collections--search-wrapper-count-color: #2f76ec;
    --collections--content-grid-columns: 1fr;
 }

 .filters-open {
    overflow-y: hidden
}

 .content-collection-landing-page {
    display: flex;
    justify-content: center;
}

.content-collection-container {
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    width: 90%;
}

#content-collection-search {
    grid-template-columns: var(--collections--content-grid-columns);
    gap: 3rem;
    display: grid;
    background: #fff;
}

#content-collection-search .search-column {
    display: flex;
    flex-direction: column;
    background: #fff;
    gap: var(--collections--content-search-gap);
}

#content-collection-search .search-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

#content-collection-search .search-wrapper:nth-child(n+2) {
    padding-top: var(--collections--content-search-gap);
    border-top: 1px solid #ccc;
}

#content-collection-search .search-wrapper:last-child {
    margin-top: auto;
}

#content-collection-search  .search-wrapper h4 {
    margin: 0;
    font-size: 1.125rem;
    line-height: 150%;
}

#content-collection-search  .search-wrapper > div {
    grid-row: 2;
    grid-column: 1 / -1;
}

#content-collection-search .tags {
    max-height: 33vh;
    overflow-y: auto;
}

.content-collection-title {
    margin: 0;
}

.content-collection-no-results-message {
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
}

.content-collection-grid {
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.content-collection-card {
    border-radius: 0.25rem;
    box-shadow: 0 4px 6px -1px #eee;
    color: black;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 150ms ease-in-out;
    padding: 0px;
    border: 1px solid #ccc;
    margin-bottom: 16px;
    background-color: #f9f9f9;
}

.content-collection-info-container {
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.content-collection-card:hover {
    background: #fcfcfc;
    transform: scale(1.01);
}

.content-collection-card-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    overflow: hidden;
}

.content-collection-image-container {
    width: 100%;
    padding-top: 75%;
    position: relative;
    background-color: #e5e5e5;
    overflow: hidden;
}

    .content-collection-image-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.content-collection-tag-container {
    display: flex;
    flex-flow: row wrap;
    gap: 0 0.25rem;
}

.content-collection-landing-page-content {
    width: 100%;
}

    .content-collection-landing-page-content[data-isempty="True"] {
        display: none;
    }

.search-tag, .content-collection-tag {
    border-radius: 0.75rem;
    border: 1px solid #2f76ec;
    color: #2f76ec;
    font-size: 0.75rem;
    padding: 0.4rem;
    transition: all 150ms ease-in-out;
    cursor: pointer;
    display: inline-flex;
    margin-bottom: 0.5em;
    white-space: nowrap;
}

.search-tag:hover {
    background: #1563e0;
    color: white;
    cursor: pointer;
}

.content-collection-filter-tag {
    background: #2f76ec;
    color: #fff;
}

.search-container {
    position: relative;
}

.clear-btn, .clear-tags-button {
    font-size: 14px;
    cursor: pointer;
}

.clear-btn {
    background: var(--collections--clear-btn-color);
    border-radius: 100%;
    color: #fff;
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    z-index: 10;
}

.clear-tags-button {
    color: var(--collections--clear-btn-color);
    text-decoration: underline;
}

.content-collection-description {
    font-size: 14px;
    color: #555;
}

.content-collection-date-created {
    font-size: 12px;
    color: #777;
    margin-top: auto;
}

.content-collection-hidden-element {
    display: none !important;
}

.search-wrapper-count {
    width: 3rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 0.25rem;
    border: 1px solid;
    font-size: 0.875rem;
    font-weight: bold;
    color: var(--collections--search-wrapper-count-color);
}


a.filter-button {
    text-align: center;
    padding: 0.75rem;
    color: #666;
    border: 1px solid;
    cursor: pointer;
}

a.filter-button:hover {
    border: 1px solid;
}

#TagSelectArea .tag-toggle-filters {
    display: flex;
    gap: 0.5rem;
    flex: 1 0 100%;
    padding: 0.5rem;
    background: #f4f4f4;
    margin-bottom: 1rem;
}

.content-collection-filter-type-button {
    flex:1;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    background: #f4f4f4;
    color: #000;
    border: none;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.75rem;
    text-transform: uppercase;
    border-radius: 0.25rem;
    height: auto;
    line-height: 100%;
    cursor: pointer;
}

.content-collection-filter-type-button:hover {
    background: #1563e0;
    color: #fff;
 }

.content-collection-filter-type-button.content-collection-filter-type-button-active {
    background: #2f76ec;
    color:white;
    cursor: default;
}

.collection-filter-actions {
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    gap: 0.5rem;
    margin-top: auto;
}

.collection-filter-actions > span {
    cursor: pointer;
    height: 48px;
    text-align: center;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    background: #2f76ec;
    color: #fff;
}

.ffclose:before {
    font: normal normal normal 14px / 1 feather;
    content: "\e117";
    color: #ffffff;
    line-height: 48px;
}

 #content-collection-search > .search-column {
    display: none;
 }

.filters-open #content-collection-search > .search-column {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 100;
    padding: 2rem;
    display: flex;
}

.content-collection-nopointer {
    pointer-events: none;
}

.content-collection-nopointer.collection-filter-actions ~.search-wrapper-count {
    border-color: #ccc;
}

.content-collection-nopointer.collection-filter-actions > span {
    background: #ccc;
}

@media screen and (min-width: 768px) {
    .content-collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1024px) {
    :root {
        --collections--content-grid-columns: 300px 1fr;
    }

    #content-collection-search > .search-column {
        display: flex;
     }

    #content-collection-search #collections-related-wrapper.search-wrapper,
    #filter-button {
        display: none;
    }
}

@media screen and (min-width: 1440px) {
    .content-collection-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1660px) {
    .content-collection-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/*
 *******************************
 * Collection Article Styles
 *******************************
 */

 :root {
    --collection-content-width: 80%;

    --collection-image-aspect-ratio: 2.35 / 1;
    --collection-image-border-radius: 0.5rem;

    --collection-content-image-border-radius: 0.5rem;
    --collection-content-link-color: #2163d6;
 }

 div[data-type="collection"] #FAFImg {
    width: 100%;
    display: flex;
    justify-content: center;
}

div[data-type="collection"] #FAFImg .collection-image {
    height: auto;
    width: 100%;
    aspect-ratio: var(--collection-image-aspect-ratio, 2.35 / 1);
    object-fit: cover;
    overflow: hidden;
    object-position: center center;
    display: flex;
    margin: 0;
    border-radius: var(--collection-image-border-radius, 0.5rem);
}

div[data-type="collection"] #FAFDesc {
    display: block;
    max-width: var(--collection-content-width, 80%);
    margin: auto;
    background: transparent;
    margin-block: 2rem;
}

    div[data-type="collection"] #FAFDesc img {
        width: 100%;
        height: auto;
        border-radius: var(--collection-content-image-border-radius, --collection-image-border-radius, 0.5rem);
    }

    div[data-type="collection"] #FAFDesc a {
        color: var(--collection-content-link-color, #2163d6);
        text-decoration: underline;
    }

@media screen and (max-width: 500px) {
    :root {
        --collection-content-width: 100%;
        --collection-image-aspect-ratio: 1;
    }
}
#aiRecCmdPaletteBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.2s ease;
}

    #aiRecCmdPaletteBackdrop.cmd-palette-visible {
        opacity: 1;
    }

@property --cmd-gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

#aiRecCmdPalettePanel {
    position: fixed;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    max-height: 70vh;
    border: 4px solid transparent;
    border-radius: 12px;
    background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--cmd-gradient-angle), #DAE343, #00AEEC, #DAE343) border-box;
    box-shadow: 0 16px 70px rgba(0, 0, 0, 0.35);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    animation: cmdGradientRotate 3s linear infinite;
    width: min(90vw, 1024px);
}

@keyframes cmdGradientRotate {
    to {
        --cmd-gradient-angle: 360deg;
    }
}

#aiRecCmdPalettePanel.cmd-palette-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#aiRecCmdPalettePanel .cmd-palette-search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: white;
}

#aiRecCmdPalettePanel .cmd-palette-search-icon {
    flex-shrink: 0;
    color: #9ca3af;
}

#aiRecCmdPalettePanel .cmd-palette-input,
#aiRecCmdPalettePanel .cmd-palette-textarea {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.05rem;
    color: #111827;
    background: transparent;
    line-height: 1.5;
}

#aiRecCmdPalettePanel .cmd-palette-textarea {
    padding: 1rem;
    resize: none;
}

    #aiRecCmdPalettePanel .cmd-palette-input::placeholder,
    #aiRecCmdPalettePanel .cmd-palette-textarea::placeholder {
        color: #9ca3af;
    }

#aiRecCmdPalettePanel .cmd-palette-search-btn {
    display: none;
}

#aiRecCmdPalettePanel .cmd-palette-loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    color: #6b7280;
    font-size: 0.875rem;
}

#aiRecCmdPalettePanel .cmd-palette-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #e5e7eb;
    border-top-color: #6b7280;
    border-radius: 50%;
    animation: cmdPaletteSpin 0.6s linear infinite;
}

@keyframes cmdPaletteSpin {
    to {
        transform: rotate(360deg);
    }
}

#aiRecCmdPalettePanel .cmd-palette-results {
    overflow-y: auto;
    overscroll-behavior: contain;
}

#aiRecCmdPalettePanel .cmd-palette-result {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.1s ease;
    cursor: pointer;
}

    #aiRecCmdPalettePanel .cmd-palette-result:hover,
    #aiRecCmdPalettePanel .cmd-palette-result.cmd-palette-result-active {
        background-color: #f9fafb;
    }

    #aiRecCmdPalettePanel .cmd-palette-result:last-child {
        border-bottom: none;
    }

#aiRecCmdPalettePanel .cmd-palette-result-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
    background: #f9fafb;
    flex-shrink: 0;
}

#aiRecCmdPalettePanel .cmd-palette-result-info {
    flex: 1;
    min-width: 0;
}

#aiRecCmdPalettePanel .cmd-palette-result-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#aiRecCmdPalettePanel .cmd-palette-result-brand {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.125rem;
}

#aiRecCmdPalettePanel .cmd-palette-result-meta {
    text-align: right;
    flex-shrink: 0;
}

#aiRecCmdPalettePanel .cmd-palette-result-price {
    font-weight: 600;
    font-size: 0.9rem;
    color: #111827;
}

#aiRecCmdPalettePanel .cmd-palette-result-price-original {
    font-weight: 400;
    font-size: 0.8rem;
    color: #9ca3af;
    text-decoration: line-through;
    margin-left: 0.375rem;
}

#aiRecCmdPalettePanel .cmd-palette-result-price-sale {
    color: #dc2626;
}

#aiRecCmdPalettePanel .cmd-palette-result-stock {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

#aiRecCmdPalettePanel .cmd-palette-result-stock-in {
    color: #16a34a;
}

#aiRecCmdPalettePanel .cmd-palette-result-stock-out {
    color: #9ca3af;
}

#aiRecCmdPalettePanel .cmd-palette-empty,
#aiRecCmdPalettePanel .cmd-palette-error {
    padding: 2rem 1.25rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

#aiRecCmdPalettePanel .cmd-palette-error {
    color: #dc2626;
}

#aiRecCmdPalettePanel .cmd-palette-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 0.75rem;
    color: #9ca3af;
    border-radius: 0 0 10px 10px;
}

#aiRecCmdPalettePanel .cmd-palette-footer-logo {
    height: 20px;
    width: auto;
    transition: opacity 0.2s ease;
}

    #aiRecCmdPalettePanel .cmd-palette-footer-logo:hover {
        opacity: 1;
    }

#aiRecCmdPalettePanel .cmd-palette-footer-hints {
    display: flex;
    gap: 1rem;
    margin-left: auto;
}

#aiRecCmdPalettePanel .cmd-palette-footer kbd {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.7rem;
    line-height: 1.4;
    box-shadow: 0 1px 0 #d1d5db;
}

#aiRecCmdPalettePanel .cmd-palette-model-controls {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

#aiRecCmdPalettePanel .cmd-palette-model-filter,
#aiRecCmdPalettePanel .cmd-palette-provider-select,
#aiRecCmdPalettePanel .cmd-palette-model-select,
#aiRecCmdPalettePanel .cmd-palette-edit-sp-btn {
    box-sizing: border-box;
    height: 32px;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 4px;
    outline: none;
    margin: 0;
}

#aiRecCmdPalettePanel .cmd-palette-model-filter {
    flex: 1;
    min-width: 0;
    padding: 2px 8px;
    border: none;
    color: #374151;
    background: #fff;
}

    #aiRecCmdPalettePanel .cmd-palette-model-filter:focus {
        border-color: #9ca3af;
    }

#aiRecCmdPalettePanel .cmd-palette-provider-select,
#aiRecCmdPalettePanel .cmd-palette-model-select {
    flex: 1;
    min-width: 0;
    padding: 0 22px 0 8px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 6px;
    border: 1px solid #d1d5db;
    color: #374151;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: auto;
}

    #aiRecCmdPalettePanel .cmd-palette-provider-select:focus,
    #aiRecCmdPalettePanel .cmd-palette-model-select:focus {
        border-color: #9ca3af;
    }

#aiRecCmdPalettePanel .cmd-palette-edit-sp-btn {
    flex-shrink: 0;
    padding: 0 10px;
    background: #323e48;
    border: 1px solid #323e48;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
    min-height: auto;
    width: auto;
}

    #aiRecCmdPalettePanel .cmd-palette-edit-sp-btn:hover {
        background: #435361;
        border-color: #435361;
    }

.cmd-palette-sp-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 55vw;
    min-width: 500px;
    height: 100vh;
    z-index: 100000;
    background: #1e1e1e;
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.7);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    flex-direction: column;
}

#cmdPaletteSystemPromptPanel .cmd-palette-sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #2d2d2d;
    flex-shrink: 0;
    background: #323e48;
}

#cmdPaletteSystemPromptPanel .cmd-palette-sp-header-title {
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    letter-spacing: 2px;
}

#cmdPaletteSystemPromptPanel .cmd-palette-sp-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-header-actions button {
        width: auto;
        height: auto;
        margin: 0;
    }

#cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn {
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #3c3c3c;
    background: #252526;
    color: #ccc;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn:hover {
        background: #2a2d2e;
    }

#cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn--save {
    background: #0e639c;
    border-color: #0e639c;
    color: #fff;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-action-btn--save:hover {
        background: #1177bb;
        border-color: #1177bb;
    }

#cmdPaletteSystemPromptPanel .cmd-palette-sp-textarea {
    flex: 1;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.6;
    border: none;
    padding: 2rem;
    resize: none;
    outline: none;
    overflow-y: auto;
}

    #cmdPaletteSystemPromptPanel .cmd-palette-sp-textarea,
    #cmdPaletteSystemPromptPanel .cmd-palette-sp-textarea:hover {
        background: #303234;
        color: #fff;
        border-radius: 0;
    }

@media (max-width: 680px) {
    #aiRecCmdPalettePanel {
        top: 1rem;
        width: auto;
        left: 1rem;
        right: 1rem;
        transform: translateY(-12px);
        max-width: none;
    }

        #aiRecCmdPalettePanel.cmd-palette-visible {
            transform: translateY(0);
        }
}
.recommendations-container {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
    position: relative;
    width: 100%;
    --recommendations-gap: 1rem;
    --recommendations-padding: 1rem;
}

.recommendations-repeater-prev,
.recommendations-repeater-next {
    align-items: center;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 100%;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    cursor: pointer;
    display: flex;
    height: 1.5rem;
    justify-content: center;
    position: absolute;
    top: 50%;
    transition: color 0.25s ease-in-out;
    width: 1.5rem;
    z-index: 10;
}

    .recommendations-repeater-prev:hover,
    .recommendations-repeater-next:hover {
        color: dodgerblue;
    }

    .recommendations-repeater-prev[aria-disabled="true"],
    .recommendations-repeater-next[aria-disabled="true"] {
        display: none;
    }

.recommendations-repeater-prev {
    left: 0.5rem;
}

    .recommendations-repeater-prev:before {
        content: '\e941';
        font-family: 'feather';
    }

.recommendations-repeater-next {
    right: 0.5rem;
}

    .recommendations-repeater-next:before {
        content: '\e942';
        font-family: 'feather';
    }

.recommendations-repeater {
    background: #fff;
    box-sizing: border-box;
    display: flex;
    gap: var(--recommendations-gap);
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding: var(--recommendations-padding);
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    --recommendations-page-size: 6;
}

    .recommendations-repeater::-webkit-scrollbar {
        display: none;
    }

body.new-basket .basket-wrapper a.recommendations-item,
a.recommendations-item,
.recommendations-item {
    border: 1px solid #ededed;
    border-radius: 2rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    box-sizing: border-box;
    color: #000;
    display: flex;
    flex: 0 0 calc((100cqi - 2 * var(--recommendations-padding) - (var(--recommendations-page-size) - 1) * var(--recommendations-gap)) / var(--recommendations-page-size));
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    transition: transform 0.25s ease-in-out;
}

    .recommendations-item:hover {
        transform: scale(1.02);
    }

    .recommendations-item .imgCtr {
        border: 1px solid #ededed;
        border-radius: 2rem;
    }

.recommendations-item-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .recommendations-item-details .pricingRepeater.fafSalePR {
        flex-wrap: wrap;
        line-height: normal;
    }

.recommendations-page-container {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.recommendations-page-dot {
    background: #ccc;
    border-radius: 100%;
    cursor: pointer;
    height: 0.5rem;
    transition: background 0.25s ease-in-out;
    width: 0.5rem;
}

    .recommendations-page-dot:hover {
        background: #999;
    }

    .recommendations-page-dot[aria-current="true"] {
        background: #000;
    }

.recommendations-repeater-footer {
    align-items: center;
    display: flex;
    font-weight: 600;
    gap: 0.25rem;
    justify-content: end;
}

@keyframes recommendations-border-rotate {
    from {
        --recommendations-border-angle: 0deg;
    }

    to {
        --recommendations-border-angle: 360deg;
    }
}

@property --recommendations-border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.recommendations-repeater-footer-badge {
    animation: recommendations-border-rotate 2s linear infinite;
    border-radius: 0.5rem;
    letter-spacing: 0.1rem;
    padding: 0.15rem 0.4rem;
    position: relative;
}

    .recommendations-repeater-footer-badge::before {
        animation: recommendations-border-rotate 3s linear infinite;
        background: conic-gradient(from var(--recommendations-border-angle), #dae343, #00aeec, #dae343);
        border-radius: inherit;
        content: '';
        inset: 0;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        padding: 1.5px;
        position: absolute;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
    }

@media only screen and (max-width: 1279px) {
    .recommendations-repeater {
        --recommendations-page-size: 4;
    }
}

@media only screen and (max-width: 899px) {
    .recommendations-repeater {
        --recommendations-page-size: 3;
    }
}

@media only screen and (max-width: 768px) {
    .recommendations-repeater {
        --recommendations-page-size: 2;
    }
}
/* CSS Document *//* ==================== 01-CC-Brand.css ======================================
   THE RESKIN SURFACE. This is the file you fill in to make a new client.

   It loads first. Everything after it - 02's derived ramps, 03-08's component
   tokens, the homepage stripes, the PLP and PDP - reads from here. Nothing here
   reads from anywhere else, which is what makes it safe to rewrite wholesale.

   FOUR BLOCKS, in the order you fill them:
     TYPE ROLES   which font file does which job
     BRAND        the raw colour, radius and button values
     COPY         every word the stylesheets write
     SWITCHES     choices between known options (only the differences)

   Lines tagged with a SET THIS marker are placeholders and will look wrong until
   replaced. Everything else is a sane default you may leave alone. Delete the
   marker once you have set the values under it - that is how you signal the
   decision was made rather than skipped.

   (This paragraph deliberately does not reproduce the marker exactly. Lint
   matches the arrowed form, and prose that spelled it out made the check fire on
   its own instructions, so a correctly filled file could never pass.)

   RULES
   - Raw values only. No selectors, no rules. If you need a rule, it belongs in
     99-CC-Custom.css, and read that file's header first.
   - Never hardcode a colour, radius, shadow or font size anywhere else. If a
     value is missing, add a token to the component that owns it, not here.
   - tools/lint.ps1 fails while any SET THIS marker remains.

   WHY EVERY BLOCK BELOW USES `:root:root`, NOT `:root`
   This file loads FIRST (01), and the component files that declare a token's
   default load AFTER it (03 nav, 05 carousels). Two `:root` declarations of the
   same token have identical specificity, so the LATER one wins - which means a
   plain `:root` here would be silently overridden by the very default it is
   meant to replace. Thirteen switches shipped inert that way before this was
   caught, each one a real visual regression that no error message reported.

   `:root:root` is (0,2,0) and beats a component's `:root` at (0,1,0) regardless
   of load order, so the reskin surface wins by construction. It is deliberately
   the ONE place in the kit that plays a specificity trick, and it is confined to
   token declarations.

   It does not disturb the nav state machinery: the Solid State and
   transparent-over-hero blocks in 03 are body-level selectors at (0,4,1) and
   above, so they still re-point nav tokens per state exactly as before.

   Keep `:root:root` on any block you add. lint.ps1 checks for it.
   =========================================================================== */


/* ===========================================================================
   1. TYPE ROLES
   ---------------------------------------------------------------------------
   The four (optionally five) typographic jobs. Every rule in the kit names a
   ROLE, never a font, so a reskin repoints a role here and nothing else is
   edited. The slots themselves are declared in 02 and map to files in /font/.

     --font-body     running text, inputs, CTA labels
     --font-heading  semantic headings only - the h1-h6 rule in 02, nothing else
     --font-bold     bold UI emphasis: nav links, prices, stock and form labels,
                     button text, facet headers, banner and section titles
     --font-display  the editorial face - big stripe statements, feature titles
     --font-accent   optional fifth face; leave pointed at body if unused

   --font-heading AND --font-bold ARE A SPLIT OF ONE OLD ROLE.
   --font-bold used to serve both, which meant a regular-weight interface was
   not expressible: dropping the weight took the headings with it. The h1-h6
   rule in 02 now names --font-heading and the other 30 rules keep --font-bold,
   so the two move independently. 02 defaults --font-heading to var(--font-bold),
   which is byte-identical to the old behaviour, so a site whose 01 predates the
   token needs no edit.

   THIS KIT SHIPS THE SPLIT SET: --font-bold points at the BODY face, so every
   emphasis use above renders regular, and only headings carry weight. Point
   --font-bold back at 'citrfontbold' for the older look where labels, prices and
   nav links are bold too.

   WHAT THIS DOES NOT REACH. The platform's own stylesheets (Modules/CSS/**,
   citr-*.css at the site root, ~186 declarations) name `citrfontreg` and
   `citrfontbold` LITERALLY. Those rules are outside this tree and cannot be
   repointed from here, so platform-rendered bold text - basket, checkout,
   account pages - stays bold no matter what these tokens say. Repointing
   --font-bold splits our typography from the platform's on purpose; on pages the
   platform styles heavily that split is visible.

   To go single-weight EVERYWHERE, including those 186 declarations, do it in the
   assets instead: ship the regular face as font/bold.* as well as font/body.*,
   which makes the `citrfontbold` slot itself regular. Then leave --font-bold on
   'citrfontbold' and point --font-heading at var(--font-display), because the
   bold slot no longer has any weight to give a heading.

   HARD CONSTRAINT - font/body.* and font/bold.* are NOT optional.
   Both slots must always contain a real font file, whatever the roles above say,
   or platform-styled text loses its face entirely.

   `citrfontboldalt` (display) and `citrfontaccent` are ours alone - no platform
   rule names them, so those slots are genuinely optional.

   A client with one text face for both body and bold ships that file twice, as
   font/body.* and font/bold.*. The duplication is required, not waste.
   =========================================================================== */
:root:root {
    --font-body:    'citrfontreg';
    --font-heading: 'citrfontbold';
    --font-bold:    var(--font-body);
    --font-display: 'citrfontboldalt';
    --font-accent:  var(--font-body);
}


/* ===========================================================================
   2. BRAND
   ---------------------------------------------------------------------------
   Raw values. 02-CC-Global.css derives shade, opacity, border, overlay and
   shadow ramps from these with oklch(), so you set a handful of colours and the
   whole system follows. Do not add derived values here.
   =========================================================================== */
:root:root {
    /* Core palette */
    --brand: #1A1A1A;
    --brand-dark: var(--brand-focus);
    --brand-accent: #9CA645;
    --brand-link: #1A1A1A;
    --brand-focus: #1A1A1A;
    --sale: #c8102e;

    /* Ink on brand surfaces */
    --text-on-brand: #FFFFFF;
    /* White on #9CA645 is ~2.6:1, below the 3:1 large-text minimum - ink reads
       at ~6.6:1 instead. */
    --text-on-accent: #1A1A1A;

    /* Canvas and ink */
    --background: #FFFFFF;
    --background-raised: #F5F4F2;
    --text: #1A1A1A;
    --text-inverse: #FFFFFF;

    /* Geometry */
    --global-radius: 3px;
    --global-innerRadius: 2px;
    --global-border: 1px solid var(--border-light);

    /* CTA type ramp - one typographic voice for every button and link-text.
       Retune here, not in page CSS. */
    --global-buttonSize: var(--fontSize-xs);
    --global-buttonFontFamily: var(--font-body);
    --global-buttonLetterSpacing: 10%;
    --global-buttonLineHeight: 1.2;
    --global-buttonTextTransform: uppercase;
    --global-buttonColor: var(--text-on-brand);
    --global-buttonBorder: 1px solid var(--brand-dark);
    /* Pill buttons site-wide - see the matching note on --global-buttonRadiusHover
       below: decoupled from --global-radius so only buttons round out, not
       cards/tiles/dropdowns. */
    --global-buttonRadius: 999px;
    --global-buttonBackground: var(--brand-dark);
    --global-buttonPadding: 0.95rem 1.7rem;
    --global-buttonBackgroundHover: var(--background);
    --global-buttonColorHover: var(--text);
    --global-buttonBorderHover: 1px solid var(--brand-dark);
    --global-buttonPaddingHover: 0.65rem 2.2rem;
    --global-buttonRadiusHover: 999px;
    --global-buttonTransition: var(--global-transition);

    /* Add-to-cart, which usually wants the accent rather than the brand */
    --global-addToCart-background: var(--brand-accent);
    --global-addToCart-border: none;
    --global-addToCart-color: var(--text-on-accent);
    --global-addToCart-backgroundHover: oklch(from var(--brand-accent) calc(l + 0.2) c h);
    --global-addToCart-borderHover: none;
    --global-addToCart-colorHover: var(--text-on-accent);

    /* ---- Nav bar: SOLID state ------------------------------------------
       INERT UNLESS YOU OPT IN. These four only do anything on a page carrying
       class="cl-nav-over-hero" on <body>, which is off by default. On a normal
       solid-bar site the bar reads --navBackground in every state and you can
       ignore this block entirely.

       Where you have opted in: the bar floats transparent at rest and turns
       solid two ways - scrolled past 20px, or a panel is open - and BOTH read
       this one set, so they can never disagree.

       Only two things to think about:
           --navSolid-background   the fill
           the other three         everything sitting on it: links, their hover,
                                   the icons, and the masked wordmark (which
                                   follows --navSolid-linksHover)

       To invert to a DARK solid bar, change these four and nothing else:
           --navSolid-background: var(--brand-dark);
           --navSolid-links:      oklch(from var(--text-inverse) l c h / 0.85);
           --navSolid-linksHover: var(--text-inverse);
           --navSolid-icons:      var(--text-inverse);

       Values must name RAW colours, never var(--navLinks) and friends: 03 sets
       --navLinks: var(--navSolid-links), so pointing back would be a cyclic
       reference and both sides would resolve to invalid.

       Interior pages are NOT affected by any of this - they use --navBackground
       (03) in every state. */
    --navSolid-background: var(--text-inverse);
    --navSolid-links: oklch(from var(--brand-focus) l c h / 0.85);
    --navSolid-linksHover: var(--brand-focus);
    --navSolid-icons: var(--brand-focus);
}


/* ===========================================================================
   3. COPY
   ---------------------------------------------------------------------------
   Every word the CSS puts on the page. Read that twice: these are strings the
   STYLESHEET writes, not content the client edits in the back office.

   They exist because the platform emits the element and we cannot re-template
   it - there is no markup to put words into, so a ::before is the only way in.
   That is fine; what is not fine is those words hiding inside a framework file.
   Before this block existed, 06-CC-Footer.css shipped a previous client's
   newsletter blurb about "the latest bikes", and only a matching override
   buried in the client layer stopped it reaching production.

   Each consumer reads var(--copy-x, "<neutral default>"), so a token you leave
   unset degrades to something bland and correct rather than blank.

   TWO tokens intentionally default to nothing rather than to words:
     --copy-signature         defaults to `none`, removing the pseudo-element
                              outright. Decorative; unset means no line at all.
     --copy-statementEyebrow  defaults to "" - an EMPTY STRING, not `none`. The
                              same ::before also draws the statement stripe's
                              opening hairline via border-top, so `none` would
                              delete the rule and take the hairline with it.

   Anything a client should be able to edit themselves belongs in a banner
   collection or an FAF repeater, NOT here.
   =========================================================================== */
:root:root {

    /* Footer newsletter - platform-emitted, read by 06 */
    --copy-newsletterTitle: "Join Our Newsletter";
    --copy-newsletterBody: "Sign up for news and offers.";

    /* Homepage stripes - no CMS field exists for either. statement is not in
       this build, so the eyebrow stays unused. cta-close IS in this build but
       ships with no closing signature line - --copy-signature: none removes
       that ::after entirely rather than rendering an empty one. */
    --copy-statementEyebrow: "";
    --copy-signature: none;

    /* hero-split's badge chip (e.g. "New Release") - no CMS field carries a
       per-slide eyebrow, so it is one uniform string across every slide.
       Defaults to none, which removes the ::before pill entirely rather than
       rendering an empty chip with padding and background but no text. */
    --copy-heroEyebrow: none;

    /* PDP - platform-emitted product page furniture */
    --copy-otherColours: "Other Colours Available";
    --copy-rrp: "RRP ";

    /* PLP - platform-emitted listing furniture and stock states */
    --copy-addToCart: "Add To Cart";
    --copy-stockNotification: "Stock Notification";
    --copy-specialOrder: "Special Order";
    --copy-comingSoon: "Coming Soon";
    --copy-search: "Search";
}


/* ===========================================================================
   4. SWITCHES
   ---------------------------------------------------------------------------
   Choices between known options. Each was a rule-level override in a client
   layer before; each is now a value, so the opposite choice is one line here
   rather than a block of CSS somewhere else.

   Only DIFFERENCES from the framework default need to appear. The defaults live
   with the component that owns them - 03 for the bar, 05 for carousels - and
   each is documented there. Deleting a line here returns that decision to the
   framework default; it does not break anything.

   The block below is COMMENTED OUT: a fresh build starts on framework defaults
   and switches on only what the design actually asks for. Uncomment what you
   need.
   =========================================================================== */
:root:root {

    /* --- Page container (defaults in 02) --------------------------------- */

    /* Hold the homepage to a measure instead of running edge to edge. The
       WRAPPER is markup, not a token: <div class="cc-container"> around the
       stripes it should hold, in default.aspx. Default is `none`, which is the
       edge-to-edge page every stripe is designed for, so the div does nothing
       until you set a width here.

       --container-gutter is the inset the CONTAINER carries and defaults to 0,
       because each stripe already insets its own content by --gutter. Set it
       only if you want the measure itself held off the viewport edge on
       viewports narrower than --container-maxWidth. */
    /* --container-maxWidth: 1440px; */
    /* --container-gutter: var(--gutter); */

    /* --- Nav bar (defaults in 03) ---------------------------------------- */

    /* No accent seam under the bar. Default is a 2px brand-light rule. */
    /* --navBorderBottom: 0; */

    /* Nav link type. Defaults: --fontSize-sm, normal tracking, and the CMS
       author's own capitalisation. */
    /* --nav-fontSize: var(--fontSize-xs); */
    /* --navItemsLetterSpacing: 0.1em; */
    /* --navItemsTextTransform: uppercase; */

    /* Disable the underline-draw hover device on nav links. Hover feedback
       then comes from the --navLinks -> --navLinks-hover contrast. */
    /* --navUnderline-display: none; */

    /* Hide the platform CTA strip above the bar (TopSubBanner.ascx). */
    /* --ctaStrip-display: none; */

    /* Expose the search input inline in the bar instead of behind the
       magnifier toggle. The MODE is a body class, not a token: add
       class="cl-search-exposed" to <body> in default.aspx. 03's "Search Bar
       (Exposed)" block explains why a display token would have been unsafe.
       Once it is on, these tune it. */
    /* --searchMaxWidth: 600px; */
    /* --searchHeight: 40px; */
    /* --searchRadius: 999px; */
    /* --searchBorder: 0; */
    /* icon at the RIGHT end instead of the left: */
    /* --searchPadding: 0 var(--searchHeight) 0 1.25rem; */
    /* pin the bar beside the icon cluster instead of centring it. Set all
       three together: an absolutely positioned box with left:auto shrink-to-
       fits, so it needs an explicit width. */
    /* --searchLeft: auto; */
    /* --searchRight: calc(var(--navIconsWidth) + 1.5rem); */
    /* --searchWidth: 20rem; */

    /* Brand assets are PATHS, defaulted in 03. A reskin normally just replaces
       the files under /layout/generalLyout/. Repoint only if the client's asset
       layout differs. */
    /* Real badge logo, not the placeholder logo.svg: a raster PNG since no
       vector exists yet. Repointed because the asset layout genuinely
       differs (a .png, not the default .svg) - see 99's Nav section for why
       the mask technique this token normally feeds is dropped for it. */
    --logo: url('/layout/generalLyout/logo-badge.png');
    /* --icon-bag: url('/layout/generalLyout/icons/bag.svg'); */
    /* --icon-account: url('/layout/generalLyout/icons/account.svg'); */
    /* --icon-search: url('/layout/generalLyout/icons/search.svg'); */
    /* --navIconSize: 22px; */

    /* --- Carousels (defaults in 05) -------------------------------------- */

    /* Dashes instead of dots. Defaults are an 8px marker that widens active. */
    /* --splidePaginationWidth: 1.5rem; */
    /* --splidePaginationHeight: 2px; */
    /* --splidePaginationRadius: 0; */
    /* --splidePaginationWidthActive: 2.5rem; */

    /* Quiet arrows with no bounce. Scale 1 disables the hover scale; the
       hover colour matching the rest state makes hover a gentle dim. */
    /* --splideArrowHoverColor: var(--splideArrowColor); */
    /* --splideArrowHoverOpacity: 0.55; */
    /* --splideArrowHoverScale: 1; */
}
/* CC-Global.css */

/* Body offset for fixed navigation */
body {
    padding-top: 75px !important;
}

.wrapper {
    float: none !important;
}

@media screen and (max-width: 1024px) {
    body {
        padding-top: 48px !important;
    }
}




@font-face {
    font-family: 'citrfontreg';
    src: url('/sitespecific/customcontent/font/body.woff2') format('woff2'),
         url('/sitespecific/customcontent/font/body.ttf') format('truetype');
    font-weight: normal !important;
    font-style: normal;
}

@font-face {
    font-family: 'citrfontbold';
    src: url('/sitespecific/customcontent/font/bold.woff2') format('woff2'),
         url('/sitespecific/customcontent/font/bold.ttf') format('truetype');
    font-weight: normal !important;
    font-style: normal;
}

@font-face {
    font-family: 'citrfontboldalt';
    src: url('/sitespecific/customcontent/font/display.woff2') format('woff2'),
         url('/sitespecific/customcontent/font/display.ttf') format('truetype');
    font-weight: normal !important;
    font-style: normal;
}

@font-face {
    font-family: 'citrfontaccent';
    src: url('/sitespecific/customcontent/font/accent.woff2') format('woff2'),
         url('/sitespecific/customcontent/font/accent.ttf') format('truetype');
    font-weight: normal !important;
    font-style: normal;
}

/* Full-width overrides */
.fixed,
.NodeLevel0 > .CSSFacetNavModules {
    max-width: var(--global-NavFooterWidth) !important;
}


/* Page container
 */
.cc-container {
    max-width: var(--container-maxWidth);
    margin-inline: auto;
    padding-inline: var(--container-gutter);
}


/* Design Tokens */

:root {

    /* Layout and Typography */

    --global-NavFooterWidth: 100% !important;

    /* Spacing */
    --global-padding: 1rem;
    --global-gap:     1rem;
    --global-margin:  1rem;

    /* Section rhythm  */
    --section-padding-lg: 5rem;
    --section-padding-sm: 3rem;

    --text-wrap: 1.25rem;
    --text-block-wrap: 1.875rem;

    /* Motion */
    --global-transition: 0.3s ease;

    /* Font scale */
    --fontSize-xs:   0.825rem;
    --fontSize-sm:   0.875rem;
    --fontSize-base: 0.925rem;
    --fontSize-md:   1rem;
    --fontSize-mdl:  clamp(1.15rem, 1.027rem + 0.526vw, 1.5rem);
    --fontSize-lg:   clamp(1.5rem,  1.324rem + 0.751vw, 2rem);
    --fontSize-xl:   clamp(1.65rem, 1.439rem + 0.901vw, 2.25rem);
    --fontSize-2xl:  clamp(1.8rem,  1.554rem + 1.052vw, 2.5rem);
    --fontSize-3xl:  clamp(2rem,    1.648rem + 1.502vw, 3rem);

    /* Heading face  */
    --font-heading: var(--font-bold);

    /* Content gutter -- the inline padding every full-bleed stripe holds its
       text off the viewport edge with. This exact clamp was repeated verbatim
       in eight places in CC-Home.css; it is one token now so the stripes cannot
       drift apart. */
    --gutter: clamp(1.25rem, 2.8vw, 3rem);

    /* Page container  */
    --container-maxWidth: 960px;
    --container-gutter: 15px;






    /* Auto-derived  */
    --brand-light:        oklch(from var(--brand) calc(l + 0.1) c h);

    --brand-accent-light: oklch(from var(--brand-accent) calc(l + 0.05) c h);
    --brand-accent-dark:  oklch(from var(--brand-accent) calc(l - 0.05) c h);

    --brand-link-light:   oklch(from var(--brand-link) calc(l + 0.05) c h);
    --brand-link-dark:    oklch(from var(--brand-link) calc(l - 0.05) c h);

    --brand-focus-light:  oklch(from var(--brand-focus) calc(l + 0.05) c h);
    --brand-focus-dark:   oklch(from var(--brand-focus) calc(l - 0.05) c h);

    --sale-light:         oklch(from var(--sale) calc(l + 0.1) c h);
    --sale-dark:          oklch(from var(--sale) calc(l - 0.1) c h);

    /* Background variants */
    --background-sunken:         oklch(from var(--background-raised) calc(l - 0.03) c h);
    --background-overlay:        oklch(from var(--brand) l c h / 0.04);
    --background-input:          oklch(from var(--background-raised) calc(l + 0.01) c h);
    --background-inverse:        var(--brand);
    --background-inverse-raised: var(--brand-dark);

    /* Text hierarchy */
    --text-secondary: oklch(from var(--text) calc(l + 0.25) c h);
    --text-muted:     oklch(from var(--text) calc(l + 0.35) c h);
    --text-subtle:    oklch(from var(--text) calc(l + 0.5) c h);
    --text-link:      var(--brand-link);

    /* Borders */
    --border:        oklch(from var(--text) calc(l + 0.6) c h);
    --border-light:  oklch(from var(--text) calc(l + 0.7) c h);
    --border-subtle: oklch(from var(--text) calc(l + 0.8) c h);
    --border-brand:  var(--brand-accent);

    /* Opacity variants */
    --white-90: oklch(from var(--text-inverse) l c h / 0.9);
    --white-60: oklch(from var(--text-inverse) l c h / 0.6);
    --white-55: oklch(from var(--text-inverse) l c h / 0.55);
    --white-30: oklch(from var(--text-inverse) l c h / 0.3);
    --black-80: oklch(from var(--text) l c h / 0.82);
    --black-65: oklch(from var(--text) l c h / 0.65);
    --black-50: oklch(from var(--text) l c h / 0.5);
    --black-10: oklch(from var(--text) l c h / 0.1);
    --black-05: oklch(from var(--text) l c h / 0.05);

    /* Overlays and gradients */
    --overlay-dark:              oklch(from #252525 l c h / 0.82);
    --overlay-medium:            oklch(from #252525 l c h / 0.65);
    --overlay-light:             oklch(from #252525 l c h / 0.4);
    --gradient-brand:            var(--brand-accent);
    --gradient-dark:             linear-gradient(0deg, var(--brand), var(--brand-dark));
    --gradient-dark-reverse:     linear-gradient(0deg, var(--brand-dark), var(--brand));
    --gradient-overlay-bottom:   linear-gradient(0deg, var(--overlay-dark), transparent 70%);
    --gradient-overlay-left:     linear-gradient(90deg, var(--overlay-dark), transparent 70%);
    --gradient-overlay-diagonal: linear-gradient(45deg, var(--overlay-dark), transparent 60%);

    /* Shadows */
    --shadow-sm: 0 2px 4px var(--black-05);
    --shadow-md: 0 4px 6px var(--black-10);
    --shadow-lg: 0 10px 15px oklch(from var(--text) l c h / 0.15);

    /* Status colors -- functional, not brand */
    --status-out-of-stock:      #e74c3c;
    --status-out-of-stock-dark: oklch(from #e74c3c calc(l - 0.05) c h);
    --status-special-order:      #f39c12;
    --status-special-order-dark: oklch(from #f39c12 calc(l - 0.08) c h);
    --status-coming-soon:        #3498db;
    --status-coming-soon-dark:   oklch(from #3498db calc(l - 0.05) c h);
}


/* Scrollbar */

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    height: 7px;
    -webkit-overflow-scrolling: auto;
}

::-webkit-scrollbar-thumb {
    border-radius: var(--global-radius);
    background-color: var(--brand-focus-light);
    -webkit-box-shadow: 0 0 1px var(--brand-focus-dark);
}


/* Base Typography */

html,
body {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: var(--fontSize-base);
    color: var(--text);
    /* The page canvas, painted explicitly so nothing leaks through between
       full-bleed stripes. Was a hardcoded #fff here with a client layer
       overriding it to the token - the token is the whole point, so it belongs
       here. A client with a warm or dark canvas now only sets --background. */
    background: var(--background);
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    body {
        padding-top: 48px !important;
    }
}

/* The only rule in the kit that paints a heading face. Everything else that
   wants weight names --font-bold, which is emphasis, not headings. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.current, .bannerTitle, .mainFont,
.ctaTitle, .boldfont {
    font-family: var(--font-heading);
    font-weight: 300;
    font-style: normal;
}


/* Disable empty-href links */

a[href=""] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}


/* Grid Row System */

[class*="grirow"] > div > a {
    position: relative;
    width: 100%;
    height: 100%;
}

[class*="grirow"] > div {
    display: grid;
}

.grirow1 > div { grid-template-columns: repeat(1, 1fr); }
.grirow2 > div { grid-template-columns: repeat(2, 1fr); }
.grirow3 > div { grid-template-columns: repeat(3, 1fr); }
.grirow4 > div { grid-template-columns: repeat(4, 1fr); }
.grirow5 > div { grid-template-columns: repeat(5, 1fr); }
.grirow6 > div { grid-template-columns: repeat(6, 1fr); }
.grirow7 > div { grid-template-columns: repeat(7, 1fr); }

/* Grid: mobile */
@media screen and (max-width: 767.9px) {
    [class*="grirow"] > div { grid-template-columns: repeat(1, 1fr); }
    .grirow2 > div            { grid-template-columns: repeat(1, 1fr); }
    .grirow4 > div            { grid-template-columns: repeat(2, 1fr); }
    .grirow5 > div            { grid-template-columns: repeat(2, 1fr); }
    .grirow6 > div            { grid-template-columns: repeat(2, 1fr); }
}

/* Grid: tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    [class*="grirow"] > div { grid-template-columns: repeat(1, 1fr); }
    .grirow2 > div            { grid-template-columns: repeat(1, 1fr); }
    .grirow4 > div            { grid-template-columns: repeat(2, 1fr); }
    .grirow5 > div            { grid-template-columns: repeat(2, 1fr); }
    .grirow6 > div            { grid-template-columns: repeat(2, 1fr); }
}



/* Starbuys and Coupon Drawer */

.coupon-drawer-container[data-state="open"],
.starbuy-drawer {
    z-index: 999999 !important;
}
/* ==================== Navigation Variables ==================== */
:root {
    /* Navigation Typography */
    --nav-fontSize: var(--fontSize-sm);
    --dropdown-titleSize: var(--fontSize-base);
    --dropdown-linkSize: var(--fontSize-base);
    --login-titleSize: var(--fontSize-md);
    --login-linkSize: var(--fontSize-sm);
    --search-inputSize: var(--fontSize-base);
    --navPadding: 5px 20px;

    /* Mobile Typography */
    --mobile-navLinkSize: var(--fontSize-base);

    /* Navigation Width */
    --navWidth: var(--global-NavFooterWidth);

    /* General Navigation Colors */
    --navBackground: var(--brand-dark);
    --navIcons: var(--text-inverse);
    --navLinks: oklch(from var(--text-inverse) l c h / 0.85);
    --navLinks-hover: var(--text-inverse);

    /* Bar chrome switches -- each of these was a rule-level override in a
       client layer before. Retune in 01-CC-Brand.css; do not re-add rules.

         --navBorderBottom       the accent seam under the bar. Set to 0 where
                                 the bar (or a full-bleed hero beneath it)
                                 provides its own edge.
         --navItemsLetterSpacing tracking on the top-level nav links.
         --navItemsTextTransform case of those links. Leave `none` to let the
                                 CMS author's own capitalisation stand.
         --navUnderline-display  the underline-draw hover device on nav links.
                                 `none` disables it; hover feedback then comes
                                 from the --navLinks -> --navLinks-hover shift.
         --ctaStrip-display      the platform CTA strip above the bar
                                 (TopSubBanner.ascx). `none` hides it. It is
                                 applied to the strip's WRAPPER, not to
                                 .ctaContainer: the wrapper is what paints
                                 --ctaBackground, and hiding it takes the
                                 container inside it with it. One token, and
                                 .ctaContainer keeps its own flex layout for
                                 whenever the strip IS shown. */
    --navBorderBottom: 2px solid var(--brand-link-light);
    --navItemsLetterSpacing: normal;
    --navItemsTextTransform: none;
    --navUnderline-display: block;
    --ctaStrip-display: block;

    /* Exposed search bar. These size the bar that the "Search Bar (Exposed)"
       block further down draws, and they only do anything on a page whose
       <body> carries class="cl-search-exposed" - see that block for why the
       mode is gated on a class rather than on a display token. */
    --searchMaxWidth: 600px;
    --searchHeight: 40px;
    --searchRadius: var(--global-radius);
    --searchBorder: var(--global-border);
    /* leaves room for the icon, which sits at the LEFT end by default */
    --searchPadding: 0 0 0 var(--searchHeight);

    /* Desktop placement of the exposed bar. #search is absolutely positioned in
       the Layout block below, and by default it is CENTRED - which is what the
       left value expresses: half the bar's own width back from the midline.

       That calc used to be a literal `calc(50% - 300px)`, silently coupled to
       the 600px default. Any site that changed --searchMaxWidth was left
       off-centre by half the difference, with nothing to point at. It is
       derived now, so the two cannot disagree.

       To pin the bar to the RIGHT instead, next to the icon cluster, set
       --searchLeft: auto and give --searchRight a value - offsetting from
       --navIconsWidth keeps it clear of the icons without a magic number. Give
       --searchWidth an explicit value when you do: an absolutely positioned box
       with `left: auto` shrink-to-fits, and a width settles it. */
    --searchLeft: calc(50% - (var(--searchMaxWidth) / 2));
    --searchRight: auto;
    --searchWidth: auto;

    /* width of the right-hand icon cluster (.menu-icons-header) on desktop */
    --navIconsWidth: 250px;

    /* Masked brand assets -- see the Brand Assets section at the foot of this
       file. These are PATHS, deliberately defaulted rather than left unset: a
       reskin replaces the FILES at these paths, exactly as it does with the
       fonts. Override a URL here only if a client's asset layout differs.

       They must not be left to fall back, because the failure mode is silent
       and bad: an unset var() in mask-image computes to `none`, while the
       companion `content: ""` has already blanked the platform icon-font
       glyph -- so the icons would disappear rather than degrade.

       (`generalLyout` is misspelled. It is the established folder name on
       every existing site and is baked into asset URLs; left as found.) */
    --navIconSize: 22px;
    --logo: url('/layout/generalLyout/logo.svg');
    --icon-bag: url('/layout/generalLyout/icons/bag.svg');
    --icon-account: url('/layout/generalLyout/icons/account.svg');
    --icon-search: url('/layout/generalLyout/icons/search.svg');

    /* Sale Link Styles */
    --sale-color: var(--text-inverse);
    --sale-background: var(--sale);
    --sale-border: 1px solid var(--sale);
    --sale-padding: .2rem .5rem;
    --sale-radius: var(--global-buttonRadius);

    /* Sale Link Hover States */
    --sale-colorHover: var(--text-inverse);
    --sale-backgroundHover: var(--sale);
    --sale-borderHover: 1px solid var(--sale);
    --sale-paddingHover: var(--global-buttonPadding);
    --sale-transition: var(--global-buttonTransition);

    /* Sale Dropdown */
    --saleDropdownBackground: var(--sale);
    --saleDropdownText: var(--text-inverse);

    /* Dropdown Colors */
    --dropdownBackground: var(--background);
    --dropdownAreaBackground: var(--background);
    --dropdownAreaTitle: var(--text);
    --dropdownAreaTitleUnderline: 1px solid oklch(from var(--text) l c h / 0.2);
    --dropdownAreaLinks: var(--text);

    /* Login Dropdown */
    --loginDropdownBackground: var(--background);
    --loginTitleColor: var(--text);
    --loginLinkColor: var(--text);

    /* Search */
    --searchBackground: transparent;
    --searchText: var(--text-inverse);
    --searchIconColor: var(--text-inverse);
    --searchPlaceholderColor: oklch(from var(--text-inverse) l c h / 0.6);

    /* Mobile Navigation */
    --mobileNavLinkColor: var(--text-inverse);
    --mobileNavBackground: var(--brand-dark);
    --mobileHamburgerBackground: transparent;
    /* Rest-state value only. It must name a RAW colour, not var(--navIcons):
       a custom property resolves its var()s on the element that DECLARES it,
       so a :root indirection would bake in :root's white and never see the
       Solid State's body-level re-point. The solid value is set alongside the
       other four in that block instead. */
    --mobileHamburgerColor: var(--navIcons);
    --mobileNavOverlay: var(--black-50);
    --mobileNavBlur: blur(3px);

    /* CTA Bar */
    --ctaBackground: var(--brand-dark);
    --ctaColor: var(--text-inverse);
    --ctaFontSize: var(--fontSize-xs);
    --ctaDivider: 1px solid var(--white-30);

    /* Outlet Nav Button */
    --outletBorder: var(--text-inverse);
    --outletHoverBackground: var(--text-inverse);
    --outletHoverText: var(--text);

    /* Filter */
    --filterBackground: var(--background);
}

/* ==================== Navigation Solid State ====================
   Applies wherever body.cl-nav-over-hero is set - in practice the homepage.
   There the bar floats transparent over the hero (Transparent-over-hero, at
   the foot of this file), and it has to become solid whenever transparency
   would break it. Two ways in, one look - white bar, --brand-focus contents:

     the bar is SCROLLED   past 20px (.is-scrolled, homepage-nav.js)
     a PANEL is open       dropdown / mobile hamburger / account / search

   Scoped with .cl-nav-over-hero so it cannot reach interior pages, which keep
   the plain solid bar (--navBackground) in every state. Do not drop that
   scope without re-reading requirement 4.

   Implemented by re-pointing the four nav colour tokens rather than writing
   a parallel set of rules: every rule below already reads --navBackground /
   --navLinks / --navLinks-hover / --navIcons, so the whole bar follows - text,
   icons and the masked wordmark (Brand Assets paints it with --navLinks-hover)
   - with no new selectors and no specificity fight. The knobs are --navSolid-*
   in 01-CC-Brand: ONE set for both triggers, so the two can never disagree.

   Backgrounds are the exception and cannot be done by token:
   `body.cl-nav-over-hero .wrapper.masthead { background: transparent !important }`
   is a literal at (0,3,1) and has to be beaten declaration-to-declaration.
   Scrolled is handled below; the panel-open cases sit beside that transparent
   rule in Transparent-over-hero at the foot of this file. Keep those trigger
   lists in step with this one - all three now live in THIS file.

   On the triggers themselves:
     open-slide-menu  mobile hamburger panel. Stamped in two places by the
                      platform - #body-wrapper-overlay (see the rule below,
                      which display:none's it, so it CANNOT be a nav
                      ancestor) and a page wrapper, almost certainly <body>.
                      The markup is not on this share to check, so both
                      halves are covered: the class on body itself, and
                      :has() for anywhere else. :has() never matches its own
                      subject, which is why the pair is not redundant.
     .CSSFacetNavModules.active   a top-level nav node's dropdown
     .tbcntOpen                   the platform's toolbar-content open flag -
                                  account today, and search if it uses the
                                  same pattern (.srchCtr carries .tbcnt)
     #search:focus-within         belt and braces for search: covers the
                                  mobile field, which is permanently visible
                                  rather than a toggle. Focus only, never
                                  hover - 99 expands the desktop pill on
                                  hover too, and repainting the whole bar on
                                  a passing mouse would be twitchy.

   The mini-basket is deliberately NOT a trigger. */

body.cl-nav-over-hero:has(.wrapper.masthead.is-scrolled),
body.cl-nav-over-hero.open-slide-menu,
body.cl-nav-over-hero:has(.open-slide-menu),
body.cl-nav-over-hero:has(.wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active),
body.cl-nav-over-hero:has(.wrapper.masthead .tbcntOpen),
body.cl-nav-over-hero:has(#search.srchCtr:focus-within) {
    --navBackground: var(--navSolid-background);
    --navLinks: var(--navSolid-links);
    --navLinks-hover: var(--navSolid-linksHover);
    --navIcons: var(--navSolid-icons);
    /* The mobile hamburger needs re-pointing HERE and cannot just be declared
       as var(--navIcons) up in :root: a custom property substitutes its var()s
       on the element that declares it, so a :root indirection resolves against
       :root's --navIcons (white) and inherits down already resolved, blind to
       this body-level override. The other icons dodge this because 03 reads
       var(--navIcons) directly in a `color` declaration on the glyph itself.
       Mobile-only element, but harmless to set at every width. */
    --mobileHamburgerColor: var(--navSolid-icons);
}

/* ==================== Navigation Fix ==================== */
#body-wrapper-overlay.open-slide-menu {
    display: none;
}

/* ==================== Navigation Styles ==================== */

.wrapper.masthead .fixed {
    background: transparent;
}

/* Background & Borders */
.wrapper.masthead {
    background: var(--navBackground) !important;
    border-bottom: var(--navBorderBottom);
    /* One 400ms curve for every way this bar changes surface - the open state
       and the scroll state are the same physical bar and must move alike.
       NB the desktop block below re-declares `transition` for height; this
       list is repeated there so the shorthand cannot drop it. */
    transition:
        background-color 400ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1),
        backdrop-filter 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wrapper.masthead .container {
    background: transparent;
}

.wrapper.masthead .navIcons {
    border-bottom: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Navigation Links */
.wrapper.masthead .ctrNavigation > .CSSFacetNavModules {
    gap: 1.5rem;
}

.wrapper.masthead .NodeLevel0 > a {
    color: var(--navLinks);
    padding: 0;
    font-size: var(--nav-fontSize);
    letter-spacing: var(--navItemsLetterSpacing);
    text-transform: var(--navItemsTextTransform);
}

.wrapper.masthead .NodeLevel0 > a:hover,
.wrapper.masthead .NodeLevel0 > a.active,
.wrapper.masthead .NodeLevel0 > div.active + a {
    color: var(--navLinks-hover);
}

.wrapper.masthead .NodeLevel0 {
    margin: 0;
}

/* Remove Default Arrows */
.wrapper.masthead .NodeLevel0 > a:before,
.wrapper.masthead .NodeLevel0 > a:after {
    display: none;
}

/* Icon Colors */
.wrapper.masthead .navIcons *[class*="icon-"] {
    color: var(--navIcons);
    width: 42px; 
    height: 48px;
}

/* ==================== Sale Link ==================== */

.NodeLevel0[data-nodename*='Sale'] > a {
    color: var(--sale-color) !important;
    background: var(--sale-background) !important;
    border: var(--sale-border);
    padding: var(--sale-padding) !important;
    border-radius: var(--sale-radius);
    transition: var(--sale-transition);
    line-height: normal;
}

.wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > a:hover,
.wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > a.active,
.wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > div.active + a {
    color: var(--sale-colorHover) !important;
    background: var(--sale-backgroundHover) !important;
    border: var(--sale-borderHover);
    padding: var(--sale-paddingHover);
    filter: brightness(1.1);
}

/* Sale Dropdown */
[data-nodename="Sale"] .CSSFacetNavModules .NodeLevel1 {
    border: 1px solid var(--saleDropdownBackground) !important;
    background: var(--saleDropdownBackground) !important;
}

[data-nodename="Sale"] .NodeLevel1 > a {
    color: var(--saleDropdownText) !important;
    border-color: var(--saleDropdownText) !important;
}

.wrapper.masthead [data-nodename="Sale"] .NodeLevel1 > .CSSFacetNavModules a {
    color: var(--saleDropdownText);
}

/* ==================== Navigation Dropdown ==================== */

.wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
    background: var(--dropdownBackground);
    gap: .5rem;
    padding: 1rem;
    justify-content: center;
    border-radius: 0 0 var(--global-radius) var(--global-radius);
    border: 2px solid var(--brand-link-light);
    border-top: 0;
    max-height: 80vh;
}

/* Dropdown Areas */
.wrapper.masthead .NodeLevel1 {
    width: auto;
    background: var(--dropdownAreaBackground);
    padding: 1rem;
    border-radius: var(--global-radius);
    border: 2px solid var(--brand-link-light);
    min-width: 350px;
    flex: 1;
}

.wrapper.masthead .NodeLevel1 > .CSSFacetNavModules {
    display: flex;
    flex-flow: column;
    gap: .25rem;
}

/* Dropdown Titles */
.wrapper.masthead .NodeLevel1 > a {
    font-family: var(--font-bold);
    font-size: var(--dropdown-titleSize);
    letter-spacing: 1px;
    border-bottom: var(--dropdownAreaTitleUnderline);
    color: var(--dropdownAreaTitle);
    text-transform: none;
    opacity: 1;
}

/* Dropdown Links */
.wrapper.masthead .NodeLevel1 > .CSSFacetNavModules a {
    color: var(--dropdownAreaLinks);
    font-size: var(--dropdown-linkSize);
    opacity: .8;
}

.wrapper.masthead .NodeLevel1 > .CSSFacetNavModules a:hover {
    opacity: 1;
}

.wrapper.masthead .NodeLevel1 > .CSSFacetNavModules > div {
    padding: 0;
}

/* Remove Link Animations */
.wrapper.masthead .NodeLevel2 > a:before {
    display: none;
}

/* ==================== Login Dropdown ==================== */

.wrapper.masthead .loginCtr.tbcnt.tbcntOpen {
    background: var(--loginDropdownBackground);
    border: 2px solid var(--brand-link-light);
    border-top: none;
    border-radius: 0 0 var(--global-radius) var(--global-radius);
}

.wrapper.masthead .loginCtr.tbcnt.tbcntOpen .boldfont {
    color: var(--loginTitleColor);
    font-size: var(--login-titleSize);
}

.wrapper.masthead .loginCtr a {
    color: var(--loginLinkColor);
    font-size: var(--login-linkSize);
    border-bottom: 1px solid var(--loginLinkColor);
}

/* ==================== Search ==================== */

.wrapper.masthead .srchCtr.tbcnt .searchBoxForm {
    background: var(--searchBackground);
    color: var(--searchText);
    font-size: var(--search-inputSize);
}

.wrapper.masthead .srchCtr.tbcnt .icon-search {
    color: var(--searchIconColor);
}

.wrapper.masthead .srchCtr.tbcnt .searchBoxForm::placeholder {
    color: var(--searchPlaceholderColor);
}

/* ==================== Navigation Mobile ==================== */

@media screen and (max-width: 1024px) {
    .wrapper.masthead .NodeLevel0 > a {
        color: var(--mobileNavLinkColor) !important;
        padding: 1rem;
        background: var(--mobileNavBackground);
        font-size: var(--mobile-navLinkSize);
        border-bottom: var(--global-border);
    }

    .wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > a {
        color: var(--sale-colorHover) !important;
        padding: 1rem 0.5rem 1rem 1rem !important;
        font-size: var(--mobile-navLinkSize) !important;
        background: var(--sale-backgroundHover) !important;
        border-radius: 0;
    }

    .wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
        flex-flow: column;
        padding: 1rem;
        padding-bottom: 15rem;
        display: flex;
        justify-content: flex-start;
    }

    .wrapper.masthead .ctrNavigation > .CSSFacetNavModules {
        height: fit-content;
    }

    .wrapper.masthead .NodeLevel1 {
        width: 100%;
    }

    .icon-menu.mobile {
        order: 5;
        background: var(--mobileHamburgerBackground);
        color: var(--mobileHamburgerColor) !important;
        border-radius: var(--global-radius);
        margin-right: 2px;
        margin-top: 1px;
    }

    .ctrNavigation {
        background: var(--mobileNavOverlay);
        backdrop-filter: var(--mobileNavBlur);
    }
}

/* ==================== Navigation Active State ==================== */

@media screen and (min-width: 1024px) {
    .open-slide-menu .NodeLevel0 > a:not(.active) {
        opacity: 0.3;
    }

    .wrapper.masthead {
        transition: height .5s ease,
                    background-color 400ms cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1),
                    backdrop-filter 400ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .wrapper.masthead.active {
        height: 75px;
    }

    .wrapper.masthead .CSSFacetNavModules {
        top: 0;
        opacity: 1;
        transition: .2s ease;
    }

    .wrapper.masthead.active .CSSFacetNavModules {
        top: 0px !important;
        opacity: 0;
    }

    /* Nav Link Underline Animation */
    .wrapper.masthead .NodeLevel0 > a:before {
        right: 0;
        transform: rotate(0deg);
    }

    .wrapper.masthead .NodeLevel0 > a::before {
        display: var(--navUnderline-display);
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px !important;
        bottom: 0;
        left: 0;
        background-color: var(--navLinks-hover);
        transform-origin: bottom center;
        transition: transform 0.25s ease-out;
        top: 23px;
    }

    .wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > a::before {
        background-color: var(--sale-color);
    }

    .wrapper.masthead .NodeLevel0 > a:hover::before,
    .wrapper.masthead .NodeLevel0 > a.active::before {
        transform: scaleX(1);
        transform-origin: bottom center;
    }
}

/* ==================== Search Bar (Exposed) ====================
   OPT-IN, off by default. The platform normally hides search behind the
   magnifier toggle in .menu-icons-header; this block instead lays the input out
   inline in the bar and hides that toggle.

   Turn it on by adding class="cl-search-exposed" to <body>, exactly as
   cl-nav-over-hero is added. Tune it with the --search* tokens at the top of
   this file.

   WHY A BODY CLASS AND NOT A --searchExposed-display TOKEN
   The obvious shape - `.icon-search { display: var(--searchToggle-display,
   block) }` - is wrong here, because the DEFAULT would then force a display
   value onto the toggle on every site that never opted in. The platform styles
   that element outside this tree and we do not know what it sets; forcing
   `block` risks moving the icon on sites that asked for nothing. Gating on a
   class means that with no class NONE of these rules match and behaviour is
   byte-identical to this block not existing, which is the only safe default.

   Specificity note, as elsewhere in this file: `body.cl-search-exposed` adds
   (0,1,0) over each selector's own weight. Nothing here needs to beat the
   Solid State block, which re-points colour tokens rather than layout.
   ============================================================================ */

body.cl-search-exposed .menu-icons-header > .icon-search {
    display: none;
}

body.cl-search-exposed #search.srchCtr {
    display: flex;
    justify-content: center;
    padding: var(--navPadding);
    max-width: var(--searchMaxWidth);
    z-index: 999999;
}

body.cl-search-exposed #TopBanner1_clSearch1_containerSearch {
    display: flex;
    justify-content: center;
    max-width: var(--searchMaxWidth);
    width: 100%;
    /* the icon is positioned against this box by platform CSS */
    position: relative;
}

body.cl-search-exposed .srchCtr.tbcnt .icon-search {
    width: var(--searchHeight);
    height: var(--searchHeight);
    line-height: var(--searchHeight);
    min-width: var(--searchHeight);
    /* the whole pill is the click target; the glyph must not swallow it */
    pointer-events: none;
    top: -1px;
}

body.cl-search-exposed .srchCtr.tbcnt .searchBoxForm,
body.cl-search-exposed .srchCtr.tbcnt .searchBoxForm:focus {
    padding: var(--searchPadding);
    height: var(--searchHeight);
    line-height: var(--searchHeight);
    border-radius: var(--searchRadius);
    border: var(--searchBorder);
    width: 100%;
}

/* below the desktop bar the strip has no room to cap the width */
@media screen and (max-width: 1024px) {
    body.cl-search-exposed #search.srchCtr,
    body.cl-search-exposed #TopBanner1_clSearch1_containerSearch {
        max-width: none;
    }
}



/* ==================== Layout & Responsive ==================== */

body {
    padding-top: 115px !important;
}

/* Mobile */
@media screen and (max-width: 1024px) {
    .menu-icons-header {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    }

    

    .logoContainer {
        width: auto !important;
    }

    /*
    .logo {
        max-width: 110px !important;
    } */

    body {
        padding-top: 103px !important;
    }

    #search.srchCtr {
        max-width: 100%;
    }

    .ctrNavigation {
        top: 50px !important;
    }
    

/* Desktop */
@media screen and (min-width: 1024px) {
    #search {
        position: absolute;
        top: calc(-90px + 1.5rem);
        z-index: 1;
        /* centred by default; set --searchLeft:auto + --searchRight to pin it
           beside the icon cluster instead. See the tokens at the top. */
        left: var(--searchLeft);
        right: var(--searchRight);
        width: var(--searchWidth);
    }

    .wrapper.masthead .loginCtr.tbcnt.tbcntOpen {
        top: 40px;
        position: absolute;
    }

    .wrapper.masthead {
        height: 115px;
    }

    .menu-icons-header {
        width: var(--navIconsWidth);
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    #navi {
        display: flex;
        top: 73px;
        /* position: fixed; ----- removed to put the navigation menu inline */
        justify-content: center;
        padding-inline: 2rem;
        max-width: var(--navWidth);
        flex-grow: 0;
        width: 100%;
    }

    .wrapper.masthead .ctrNavigation > .CSSFacetNavModules {
        display: flex;
        float: none;
        justify-content: flex-start;
    }

    .wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
        top: 42px;
    }

    /* NB unscoped - .zflex-s is a platform flex utility used site-wide (e.g.
       .col-1.zflex-s on the detail page), so this reaches well beyond the
       masthead. `flex-wrap: wrap` was removed: the masthead row is a .zflex-s
       and both #navi and .navIcons are width:100%, so wrapping gave each one
       its own line and stacked the bar into logo / links / icons rows. With
       the default nowrap they shrink and share one row, which is the intended
       horizontal bar. Left as a removal rather than an explicit `nowrap` so
       the other .zflex-s containers keep whatever the platform gives them. */
    .zflex-s, .zflexInline-s {
        align-items: center;
        -webkit-align-items:stretch;
        -ms-align-items:stretch;
        -moz-align-items:stretch;
        display: flex;
        align-content: center;
    }

}

/* ==================== Filter ==================== */

.sticky.sticknow .FAFoptionsContainer {
    margin-top: 0 !important;
    position: fixed;
    top: 109px !important;
    z-index: 7;
    background: var(--filterBackground);
    width: 100%;
    left: 0;
}

/* ==================== Logo ==================== */

.logoContainer {
    width: auto;
    padding: 0px
}

/* ==================== CTA Bar ==================== */

/* Ctas */

.ctaContainer {display: flex;justify-content: flex-start;top: 0; background: transparent;}

.wrapper:has(.ctaContainer) {
    display: var(--ctaStrip-display);
    background: var(--ctaBackground);
}

div[id*="CTA_bannerCollectionPanel"] {
    display: flex;
    flex-flow: row nowrap;
    overflow-x: auto;
    padding: 0 !important;
    gap: 0 !important;
    width: 100%;
    justify-content: flex-start;
}

div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr {
    position: static;
    padding: 0 !important;
    grid-gap: 5px !important;
    justify-content: center !important;
    align-items: center !important;
    background: none !important;
    flex-flow: column;
}

div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr > span {
    font-size: var(--ctaFontSize) !important;
    width: auto;
    order: 0;
    text-align: center !important;
    color: var(--ctaColor) !important;
    background: none !important;
    padding: 0 !important;
    text-transform: none !important;
}

div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr > span.bannerTitle {

}

div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr > span.bannerView {
    display: none;
}

div[id*="CTA_bannerCollectionPanel"] .photo {
    display: none;
}

div[id*="CTA_bannerCollectionPanel"] .photo:after{
    width: 0 !important;
}

div[id*="CTA_bannerCollectionPanel"] .bannerDesc:before {
    display: none;
}

div[id*="CTA_bannerCollectionPanel"] a:hover .bannerTxtCtr {
    background: none;
}

div[id*="CTA_bannerCollectionPanel"] a {
    min-width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block: .5rem;
    border-left: var(--ctaDivider);
    border-radius: 0;
    gap: 1rem;
}


div[id*="CTA_bannerCollectionPanel"] a:nth-child(1) {
    border-left: none;
}

div[id*="CTA_bannerCollectionPanel"] a:last-child {
    border-right: none;
}

div[id*="CTA_bannerCollectionPanel"] .bannerDesc{
    display: none;
}

div[id*="CTA_bannerCollectionPanel"] a .bannerTxtCtr,
div[id*="CTA_bannerCollectionPanel"] a{
    max-width: fit-content !important;
    min-width: fit-content;
    padding-inline: 1rem;
    height: fit-content !important;
}

/* ==================== Outlet Nav Button ==================== */

.wrapper.masthead .NodeLevel0[data-nodename*='Outlet'] {
    margin-left: auto;
    border: 1px solid var(--outletBorder);
    padding: .2rem .5rem;
    transition: var(--global-transition);
}

.wrapper.masthead .NodeLevel0[data-nodename*='Outlet']:hover {
    background: var(--outletHoverBackground);
}

.wrapper.masthead .NodeLevel0[data-nodename*='Outlet']:hover > a {
    color: var(--outletHoverText) !important;
}

/* ==================== Brands Dropdown ==================== */

[data-nodename="Brands"] .NodeLevel1 .CSSFacetNavModules > div {
    min-width: 200px;
    max-width: 200px;
    display: flex;
}

[data-nodename="Brands"] .NodeLevel1 > .CSSFacetNavModules {
    flex-flow: row wrap !important;
    display: flex;
    justify-content: flex-start;
    gap: 1rem !important;
}

@media screen and (min-width: 1024px) {
    [data-nodename="Brands"] .NodeLevel1:nth-child(1) > .CSSFacetNavModules > div a {
        font-size: var(--fontSize-lg) !important;
        font-weight: bold;
    }
}



/* nav scroll animation */

.navIcons {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;

    /* Stays transparent in every state - the surface is painted by
       .wrapper.masthead beneath it. Only the ink animates here now; the
       background / shadow / blur transitions moved to the masthead with the
       fill they belong to.

       `color` is the row's inherited ink, tokenised so the Solid State block
       carries it. It was a literal `white`, which went invisible the moment
       the solid bar became white. --navIcons is white at rest, so this is a
       no-op outside the solid state. */
    background-color: transparent;
    color: var(--navIcons);

    transition: color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.navIcons a,
.navIcons button {
    color: inherit;
    transition: color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.navIcons svg {
    fill: currentColor;
    stroke: currentColor;

    transition:
        fill 400ms cubic-bezier(0.22, 1, 0.36, 1),
        stroke 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scrolled SURFACE, homepage only. homepage-nav.js toggles .is-scrolled on
   .wrapper.masthead - the outermost masthead layer - so the fill covers the
   whole bar rather than just the inner .navIcons strip. Bump the ?v
   querystring in default.aspx if you touch that script.

   The .cl-nav-over-hero scope does double duty: it enforces requirement 4
   (interior pages never do this) AND lifts the selector to (0,4,1), which
   clears 99's `body.cl-nav-over-hero .wrapper.masthead { transparent !important }`
   at (0,3,1). Specificity beats source order, so this wins even though 99
   loads later - no duplicate override needed there.

   Do NOT rely on the script only being loaded on the homepage for the
   scoping; that was accidental, and a shared master page would undo it.

   Contents are not set here - the Solid State block at the top of this file
   re-points --navLinks / --navIcons / --navLinks-hover for the same trigger,
   which is what stops white text landing on this white bar.

   blur/shadow left as literals for now, by decision - they are surface
   texture rather than brand colour. */
body.cl-nav-over-hero .wrapper.masthead.is-scrolled {
    background: var(--navSolid-background) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}




    .masthead .fixed .navIcons {
        position: relative;
        padding: var(--navPadding);
    }

    .navIcons {
    height: 100%
}


/* Nav Icon Fixes */

    .navIcons > div:not(.icon-menu.mobile), .navIcons > a, .navIcons *[class*="icon-"]:not(.icon-menu.mobile) {
        width: auto;
        line-height: 1;
        font-size: 20px;
        position: relative;
        text-align: center;
        cursor: pointer;
        padding: 10px;
        display: flex;
        align-items: center;
    }

/* Icon order, left to right: search, account, bag. The platform emits them
   head, bag, menu, search - .menu-icons-header is flex at both breakpoints
   (438/483), so `order` does the reshuffle with no markup change. Keyed on
   data-link rather than the icon-font class names, same reasoning as 99: the
   data-link states the toggle's job, so a platform class rename cannot
   silently scramble the row. The mobile hamburger keeps its own order (310)
   and stays after these three. */

.menu-icons-header > [data-link="search"] {
    order: 1;
}

.menu-icons-header > [data-link="login"] {
    order: 2;
}

.menu-icons-header > [data-link="basket"] {
    order: 3;
}


/* ===========================================================================
   BRAND ASSETS -- wordmark and nav icons as CSS MASKS
   ---------------------------------------------------------------------------
   Promoted out of the client layer: this is mechanism every client needs and
   only the asset FILES differ. The technique is a mask filled with
   currentColor, so an asset inherits whatever ink the bar is painting and
   follows a reskin, a scroll state and a transparent-over-hero state with no
   second copy of the file and no edit here.

   To reskin: replace the files under /layout/generalLyout/. The URLs are
   tokens (--logo, --icon-bag, --icon-account, --icon-search) declared at the
   top of this file, so a client with a different asset layout can repoint
   them from 01-CC-Brand.css instead.
   =========================================================================== */

/* --- Wordmark ---
   The platform <img> is left in flow so the container keeps exactly the box it
   already had (sized in the Logo section above); only the PAINT changes. */
.logoContainer {
    -webkit-mask: var(--logo) left center / contain no-repeat;
            mask: var(--logo) left center / contain no-repeat;
    background-color: currentColor;
}

/* .logoContainer has no colour of its own -- the masthead only paints
   --navLinks onto the nav anchors -- so give it the nav's full-strength ink.
   This is the ONE knob: change `color` here and the wordmark follows, over a
   hero photo and a solid bar alike. */
.wrapper.masthead .logoContainer {
    color: var(--navLinks-hover);
}

/* --- Nav icons (bag / account / search) ---
   The platform emits these as icon-font glyphs in .menu-icons-header, each
   toggle tagged with a data-link:

     <div class="icon-head"        data-link="login"><div id="loggedInPip"></div></div>
     <div class="icon-bag"         data-link="basket"><div class="basketPip">0</div></div>
     <div class="icon-menu mobile" data-link="navi"></div>
     <div class="icon-search"      data-link="search"></div>

   Keyed on data-link rather than the icon-font class names: the data-link
   states the toggle's JOB, so a platform icon-font rename cannot silently
   blank an icon.

   The mask sits on ::before, not on the toggle. Two reasons: it replaces the
   glyph in place, so no `visibility: hidden` dance is needed; and a mask on
   the toggle itself would clip the pips nested inside it -- .basketPip (08)
   and #loggedInPip.

   The hamburger (data-link="navi") is deliberately NOT in this list. Blanking
   a glyph without supplying a mask renders it invisible, and there is no
   hamburger asset. That is also why these rules enumerate three toggles
   instead of reusing the *[class*="icon-"] wildcard above.

   Search needs both selectors: the .menu-icons-header toggle is hidden
   elsewhere in this file, and the visible glyph is the
   <span class="icon-search"> inside #search. Everything is scoped to the
   masthead / #search, so the PDP's .cc-lookup-service-lookupbutton.icon-search
   keeps the platform glyph. */
.wrapper.masthead [data-link="basket"]::before,
.wrapper.masthead [data-link="login"]::before,
.wrapper.masthead [data-link="search"]::before,
#search.srchCtr .icon-search::before {
    content: "";
    display: inline-block;
    width: var(--navIconSize);
    height: var(--navIconSize);
    vertical-align: middle;
    /* currentColor, NOT a --navSolid-* token: the toggle already gets
       `color: var(--navIcons)` from the Nav Icon rules above, and the Solid
       State block re-points --navIcons per state. Naming a state token here
       would pin the icons to ONE state and break transparent-over-hero. */
    background-color: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.wrapper.masthead [data-link="basket"]::before {
    -webkit-mask-image: var(--icon-bag);
            mask-image: var(--icon-bag);
}

.wrapper.masthead [data-link="login"]::before {
    -webkit-mask-image: var(--icon-account);
            mask-image: var(--icon-account);
}

.wrapper.masthead [data-link="search"]::before,
#search.srchCtr .icon-search::before {
    -webkit-mask-image: var(--icon-search);
            mask-image: var(--icon-search);
}


/* ===========================================================================
   TRANSPARENT-OVER-HERO -- the remainder of the mode
   ---------------------------------------------------------------------------
   Promoted out of the client layer so the whole mode lives in one file. The
   Solid State block at the top of this file re-points the token set; the
   Scrolled Surface block above paints the scrolled fill. These are the last
   two pieces: the at-rest transparency, and the panel-open cases that have to
   beat it declaration-to-declaration.

   OPT-IN, and OFF BY DEFAULT. Nothing here applies unless a page carries
   class="cl-nav-over-hero" on <body>, which the kit's default.aspx deliberately
   does NOT ship. Transparency is a special feature, not a house style: it only
   works over a full-bleed image, and over a light opening stripe it produces an
   invisible nav. A site that does not opt in gets the solid bar from
   --navBackground in every state, which is the correct default.

   Interior pages never carry the class.

   Note what else is gated on it: the Solid State block at the top of this file
   and the Scrolled Surface block above are BOTH scoped to the same class, so a
   non-transparent site gets no scroll blur/shadow either. That is consistent -
   there is no transparency for the scroll to resolve - but it does mean a
   client who wants a scrolled shadow on a solid bar needs a new switch rather
   than this class.

   ORDER MATTERS AND IS PRESERVED. This block sat in 99 (which loads after
   03-08) as one contiguous run. It is appended at the very END of 03, so its
   position relative to every rule in this file is unchanged, and its internal
   order is unchanged. The .active rule must stay ABOVE the panel-open list:
   the two tie at (0,4,1) and the panel-open cases win on order alone.
   =========================================================================== */

/* The hero slides under the fixed bar, so the body offset comes off. */
body.cl-nav-over-hero {
    padding-top: 0 !important;
}

body.cl-nav-over-hero .wrapper.masthead {
    background: transparent !important;
}

body.cl-nav-over-hero .wrapper.masthead.active {
    background: var(--navBackground) !important;
}

/* The transparent rule above is a literal `transparent !important`, not a
   token, so the Solid State block cannot reach it by re-pointing
   --navBackground -- it has to be beaten declaration-to-declaration. This is
   the case that state exists for: an open menu hanging off an invisible bar is
   the bug. The trigger list mirrors Solid State's exactly; keep the two in
   step. Each selector clears the transparent rule's (0,3,1) by one class. */
body.cl-nav-over-hero.open-slide-menu .wrapper.masthead,
body.cl-nav-over-hero:has(.open-slide-menu) .wrapper.masthead,
body.cl-nav-over-hero:has(.wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active) .wrapper.masthead,
body.cl-nav-over-hero:has(.wrapper.masthead .tbcntOpen) .wrapper.masthead,
body.cl-nav-over-hero:has(#search.srchCtr:focus-within) .wrapper.masthead {
    background: var(--navSolid-background) !important;
}
/* CC-BannerCollections.css
   Quiet luxury banner chrome: white canvas, full-bleed photography with
   ghost 1px-outline CTAs, hairline vocabulary. Tokens only. */

/* Banner Collection Variables */
:root {
    --bannerRadius: 0px;
    --bannerPadding: clamp(1rem, 3vw, 2.5rem);
    --bannerGap: var(--global-gap);
    --bannerBorder: var(--global-border);
    --bannerText: var(--text-inverse);
    --bannerCardBg: var(--background-raised);
    --bannerCardText: var(--text);
    /* Banner description type ramp - one typographic voice for every
       .cc-banner__desc. Colour/opacity stay per-band; only type lives here. */
    --bannerDescFontFamily: var(--font-body);
    --bannerDescSize: var(--fontSize-md);
    --bannerDescLineHeight: 150%;
    --bannerDescLetterSpacing: normal;
    --brandLogoFilter: brightness(0) opacity(0.35);
    --brandLogoFilterHover: none;
    --brandLogoMaxHeight: 55px;
    --bannerViewSize: var(--global-buttonSize);
    --bannerViewColor: var(--text);
    --bannerViewBorder: 1px solid var(--text);
    --bannerViewBackground: transparent;
    --bannerViewPadding: var(--global-buttonPadding);
    --bannerViewRadius: var(--global-buttonRadius);
    --bannerViewBackgroundHover: var(--brand-dark);
    --bannerViewColorHover: var(--text-inverse);
    --bannerViewBorderHover: 1px solid var(--brand-dark);
    --bannerViewPaddingHover: var(--global-buttonPaddingHover);
    --bannerViewTransition: var(--global-buttonTransition);
}


/* CC-bg Colour Modifier Classes
   Apply to any col-1 to set the colour context for that section.
   Rescopes banner tokens -- buttons, text, logos, Splide arrows all update. */

.CC-bgDark {
    background: var(--brand-dark) !important;
    --bannerText: var(--text-inverse);
    --bannerCardBg: var(--background-raised);
    --bannerCardText: var(--text);
    --comp-divider: oklch(from var(--text-inverse) l c h / 0.15);
    --brandLogoFilter: brightness(0) invert(1) opacity(0.4);
    --brandLogoFilterHover: brightness(0) invert(1) opacity(1);
    --bannerViewBackground: var(--brand-accent);
    --bannerViewColor: var(--text-on-accent);
    --bannerViewBorder: 1px solid var(--brand-accent);
    --bannerViewBackgroundHover: var(--brand-accent-dark);
    --bannerViewColorHover: var(--text-on-accent);
    --bannerViewBorderHover: 1px solid var(--brand-accent-dark);
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text-inverse);
    --splideArrowHoverColor: var(--text-inverse);
}

.CC-bgLight {
    background: var(--background-raised) !important;
    --bannerText: var(--text);
    --bannerCardBg: var(--background);
    --bannerCardText: var(--text);
    --comp-divider: oklch(from var(--text) l c h / 0.12);
    --brandLogoFilter: brightness(0) opacity(0.4);
    --brandLogoFilterHover: brightness(0) opacity(1);
    --bannerViewBackground: var(--brand);
    --bannerViewColor: var(--text-on-brand);
    --bannerViewBorder: 1px solid var(--brand);
    --bannerViewBackgroundHover: var(--brand-accent);
    --bannerViewColorHover: var(--text-on-accent);
    --bannerViewBorderHover: 1px solid var(--brand-accent);
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text);
}

.CC-bgBrand {
    background: var(--brand) !important;
    --bannerText: var(--text-on-brand);
    --bannerCardBg: oklch(from var(--brand) calc(l + 0.08) c h);
    --bannerCardText: var(--text-on-brand);
    --comp-divider: oklch(from var(--text-on-brand) l c h / 0.2);
    --brandLogoFilter: brightness(0) invert(1) opacity(0.4);
    --brandLogoFilterHover: brightness(0) invert(1) opacity(1);
    --bannerViewBackground: var(--brand-accent);
    --bannerViewColor: var(--text-on-accent);
    --bannerViewBorder: 1px solid var(--brand-accent);
    --bannerViewBackgroundHover: var(--brand-accent-dark);
    --bannerViewColorHover: var(--text-on-accent);
    --bannerViewBorderHover: 1px solid var(--brand-accent-dark);
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text-on-brand);
}

.CC-bgAccent {
    background: var(--brand-accent) !important;
    --bannerText: var(--text-on-accent);
    --bannerCardBg: oklch(from var(--brand-accent) calc(l + 0.08) c h);
    --bannerCardText: var(--text-on-accent);
    --comp-divider: oklch(from var(--text-on-accent) l c h / 0.2);
    --brandLogoFilter: brightness(0) invert(1) opacity(0.4);
    --brandLogoFilterHover: brightness(0) invert(1) opacity(1);
    --bannerViewBackground: var(--brand);
    --bannerViewColor: var(--text-on-brand);
    --bannerViewBorder: 1px solid var(--brand);
    --bannerViewBackgroundHover: oklch(from var(--brand) calc(l + 0.1) c h);
    --bannerViewColorHover: var(--text-on-brand);
    --bannerViewBorderHover: 1px solid oklch(from var(--brand) calc(l + 0.1) c h);
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text-on-accent);
}

.CC-bgWhite {
    background: var(--background) !important;
    --bannerText: var(--text);
    --bannerCardBg: var(--background-raised);
    --bannerCardText: var(--text);
    --comp-divider: oklch(from var(--text) l c h / 0.1);
    --brandLogoFilter: brightness(0) opacity(0.4);
    --brandLogoFilterHover: brightness(0) opacity(1);
    --bannerViewBackground: var(--brand);
    --bannerViewColor: var(--text-on-brand);
    --bannerViewBorder: 1px solid var(--brand);
    --bannerViewBackgroundHover: var(--brand-accent);
    --bannerViewColorHover: var(--text-on-accent);
    --bannerViewBorderHover: 1px solid var(--brand-accent);
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text);
}


/* cc-banner -- Visual Foundation
   Layout (grid columns, aspect-ratio, gap, padding) is set per-component
   in job CSS. This block owns only the visual style that must be consistent
   across every banner on every section.

   Height model: the <img> drives cc-banner height in-flow (no position:absolute
   chicken-and-egg). Per-component CSS sets aspect-ratio on the img, or for
   Splide the slide sets the height and cc-banner fills it. */

.cc-banner {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--bannerRadius);
    text-decoration: none;
}

.cc-banner__img {
    display: block;
    width: 100%;
}

.cc-banner__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    border-radius: var(--bannerRadius);
}

.cc-banner__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--text-block-wrap);
    padding: clamp(1rem, 2vw, 2rem);
    background: var(--gradient-overlay-diagonal);
    z-index: 2;
}

/* .text-wrap - the title + description wrapper. The two spans used to be
   direct flex children of .cc-banner__body; the wrapper has to reproduce that
   context or they collapse back to inline and run together on one line.
   gap/align-items are pulled from the parent so every band keeps the spacing
   and alignment it already declares. */
.text-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--text-wrap);
    align-items: inherit;
    min-width: 0;
}

.cc-banner__title {
    font-family: var(--font-bold);
    font-size: var(--fontSize-2xl);
    color: var(--bannerText);
    order: -1;
}

.cc-banner__desc {
    font-family: var(--bannerDescFontFamily);
    font-size: var(--bannerDescSize);
    line-height: var(--bannerDescLineHeight);
    letter-spacing: var(--bannerDescLetterSpacing);
    color: var(--bannerText);
    opacity: 0.9;
}




.cc-banner__desc:empty,
.cc-banner__title:empty,
.cc-banner__cta:empty {
    display: none !important;
}


/* cc-banner in Splide context
   Keep cc-banner__img in-flow so the flex slide has real content width.
   Height chain: .splide (explicit) -> track/list/slide (100%) -> cc-banner (100%)
   -> cc-banner__img (100%) -> img (100%, object-fit: cover). */

.splide__slide .cc-banner {
    height: 100%;
    border-radius: 0;
    overflow: hidden;
}

.splide__slide .cc-banner__img {
    display: block;
    height: 100%;
    overflow: hidden;
}

.splide__slide .cc-banner__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: unset;
}


/* cc-brand -- Brand Logo */

.cc-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
}

.cc-brand__img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: var(--brandLogoMaxHeight);
    object-fit: contain;
    filter: var(--brandLogoFilter);
    transition: filter var(--global-transition);
}

.cc-brand:hover .cc-brand__img {
    filter: var(--brandLogoFilterHover);
}


/* CC-HomepageTitles */

.CC-HomepageTitles {
    display: flex;
    flex-direction: column;
    gap: calc(var(--bannerGap) * 0.5);
    /* padding-bottom: clamp(0.75rem, 1.5vw, 2.25rem); */
    max-width: var(--navWidth);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
}

.CC-HomepageTitles h2 {
    font-family: var(--font-display);
    font-size: var(--fontSize-2xl);
    margin: 0;
    line-height: 1.2;
}

.CC-HomepageTitles p {
    font-size: var(--fontSize-base);
    margin: 0;
    opacity: 0.8;
}

.CC-HomepageTitles.wht,
.CC-HomepageTitles.wht h2,
.CC-HomepageTitles.wht p { color: var(--bannerText); }

.CC-HomepageTitles.blk,
.CC-HomepageTitles.blk h2,
.CC-HomepageTitles.blk p { color: var(--bannerCardText); }


/* CC-HomepageTitles - CMS-driven title block: a 1-item banner styled as heading + desc + CTA.
   The extra .cc-collection specificity (0,3,0) keeps a title banner above section tile rules. */
.CC-HomepageTitles .cc-collection { width: 100%; }
.CC-HomepageTitles .cc-collection .cc-banner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: calc(var(--bannerGap) * 0.5);
    /* opt out of tile styling that would otherwise leak in */
    opacity: 1; height: auto; aspect-ratio: auto; background: none;
    border-radius: 0; overflow: visible; box-shadow: none; transform: none !important;
}
.CC-HomepageTitles .cc-collection .cc-banner::after { display: none; }   /* no tile corner stamp */
.CC-HomepageTitles .cc-collection .cc-banner__img { display: none; }     /* image slot unused on titles */
.CC-HomepageTitles .cc-collection .cc-banner__body {
    position: static; inset: auto; background: none; padding: 0;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: calc(var(--bannerGap) * 0.5);
}
.CC-HomepageTitles .cc-collection .cc-banner__title {
    order: 0; font-family: var(--font-display); font-size: var(--fontSize-2xl);
    line-height: 1.2; margin: 0; max-width: none;
}
.CC-HomepageTitles .cc-collection .cc-banner__desc {
    order: 1; font-family: var(--bannerDescFontFamily); font-size: var(--bannerDescSize);
    line-height: var(--bannerDescLineHeight); letter-spacing: var(--bannerDescLetterSpacing);
    opacity: 0.8; margin: 0; text-transform: none;
}
/* CTA underneath - canonical banner-view button tokens (matches every other CTA) */
.CC-HomepageTitles .cc-collection .cc-banner__cta {
    order: 2;
    align-self: center;
    margin-top: 0.5rem;
    background: var(--bannerViewBackground);
    color: var(--bannerViewColor);
    border: var(--bannerViewBorder);
    padding: var(--bannerViewPadding);
    border-radius: var(--bannerViewRadius);
    font-family: var(--font-bold);
    font-size: var(--bannerViewSize);
    letter-spacing: 0.12em;
    transition: var(--global-transition);
}
.CC-HomepageTitles .cc-collection .cc-banner:hover .cc-banner__cta {
    background: var(--bannerViewBackgroundHover); color: var(--bannerViewColorHover);
    border: var(--bannerViewBorderHover);
}
/* colour variants - mirror .wht/.blk which otherwise only target h2/p */
.CC-HomepageTitles.wht .cc-collection .cc-banner__title,
.CC-HomepageTitles.wht .cc-collection .cc-banner__desc { color: var(--bannerText); }
.CC-HomepageTitles.blk .cc-collection .cc-banner__title,
.CC-HomepageTitles.blk .cc-collection .cc-banner__desc { color: var(--bannerCardText); }


/* Scroll-in Animation */

[data-animate] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-animate].inView {
    opacity: 1;
    transform: translateY(0);
}
/* CC-SplideBanners.css */

/* Splide Tokens */
:root {
    --splideArrowSize: 2.75rem;
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text);
    --splideArrowHoverBg: transparent;

    /* Arrow hover personality. Set --splideArrowHoverScale to 1 for a house
       style with no bounce; the arrow then only changes colour/opacity. */
    --splideArrowHoverColor: var(--text-inverse);
    --splideArrowHoverOpacity: 1;
    --splideArrowHoverScale: 1.1;

    /* Pagination marker SHAPE. The defaults are dots: a square-ish 8px marker
       that widens when active. Set width/height/radius to get dashes
       (e.g. 1.5rem x 2px, radius 0) or bars, without touching a rule. */
    --splidePaginationSize: 8px;
    --splidePaginationWidth: var(--splidePaginationSize);
    --splidePaginationHeight: var(--splidePaginationSize);
    --splidePaginationRadius: 1px;
    --splidePaginationWidthActive: 1.5rem;
    --splidePaginationBg: oklch(from var(--brand-dark) l c h / 0.3);
    --splidePaginationActiveBg: var(--brand-dark);
}


/* Base Splide Structure
   [data-splide-opts] scoping gives (0,2,0) specificity minimum,
   beating Splide's native (0,1,0) selectors without !important. */

[data-splide-opts] .splide {
    position: relative;
    width: 100%;
    overflow: hidden;
}

[data-splide-opts] .splide__track {
    overflow: hidden;
    position: relative;
    z-index: 0;
}

[data-splide-opts] .splide__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-splide-opts] .splide__slide {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}


/* Arrows */

[data-splide-opts] .splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: var(--splideArrowSize);
    height: var(--splideArrowSize);
    background: var(--splideArrowBg);
    color: var(--splideArrowColor);
    border: 0;
    border-radius: var(--global-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    opacity: 1;
}

[data-splide-opts] .splide__arrow:hover {
    background: var(--splideArrowHoverBg);
    color: var(--splideArrowHoverColor);
    opacity: var(--splideArrowHoverOpacity);
    transform: translateY(-50%) scale(var(--splideArrowHoverScale));
}

[data-splide-opts] .splide__arrow svg {
    width: 1.5em;
    height: 1.5em;
    fill: currentColor;
}

[data-splide-opts] .splide__arrow--prev { left: var(--bannerPadding); }
[data-splide-opts] .splide__arrow--next { right: var(--bannerPadding); }

@media (max-width: 767px) {
    [data-splide-opts] .splide__arrow--prev { left: 0.4rem; }
    [data-splide-opts] .splide__arrow--next { right: 0.4rem; }
}

/* Arrows-top utility -- move arrows above the carousel */
.CC-SplideArrowsTop .splide__arrow {
    position: static;
    transform: none;
}
.CC-SplideArrowsTop .splide__arrow:hover {
    transform: scale(var(--splideArrowHoverScale));
}

.CC-SplideArrowsTop .splide__arrows {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0 var(--bannerPadding) 0.5rem;
}


/* Pagination */

[data-splide-opts] .splide__pagination {
    position: absolute;
    bottom: var(--bannerPadding);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0px;
    list-style: none;
    margin: 0;
    padding: 0;
}

[data-splide-opts] .splide__pagination__page {
    width: var(--splidePaginationWidth);
    height: var(--splidePaginationHeight);
    border-radius: var(--splidePaginationRadius);
    background: var(--splidePaginationBg);
    transition: background 0.2s ease, width 0.2s ease;
    cursor: pointer;
    border: 0;
    display: flex;
}

[data-splide-opts] .splide__pagination__page:hover {
    background: var(--splidePaginationActiveBg);
}

[data-splide-opts] .splide__pagination__page.is-active {
    width: var(--splidePaginationWidthActive);
    background: var(--splidePaginationActiveBg);
}


/* cc-banner in Splide context
   Height model for Splide carousels:
   Set height on .splide itself in per-component CSS, then chain 100% down.
   Splide's flex layout flows top-down -- the track/list/slide must all
   inherit from the .splide container, not from each other or the slide content.

   Per-component pattern:
     .hp-foo .splide                      { height: clamp(320px, 60vh, 780px); }
     .hp-foo .splide__track,
     .hp-foo .splide__list,
     .hp-foo .splide__slide               { height: 100%; }

   cc-banner and __img then fill the slide via the rules in 04-CC-BannerCollections.css. */
/* CC-Footer.css */

/* Footer Variables */
:root {
    --footer-titleSize: var(--fontSize-sm);
    --footer-textSize: var(--fontSize-sm);
    --footer-newsletterInputSize: var(--fontSize-sm);
    --footer-newsletterButtonSize: var(--fontSize-sm);
    --footer-width: var(--global-NavFooterWidth);
    --footer-maxWidth: 100%;
    --footer-padding: var(--global-padding);
    --footer-gap: var(--global-gap);
    --footer-borderRadius: var(--global-radius);
    --footer-background: var(--background);
    --footer-innerBackground: var(--background);
    --footer-text: var(--text);
    --footer-titles: var(--text);
    --footer-links: oklch(from var(--text) l c h / 0.78);
    --footer-linksHover: var(--text);
    --footer-underlineColor: oklch(from var(--text) l c h / 0.2);
    --newsletter-inputBackground: var(--background);
    --newsletter-inputText: var(--text);
    --newsletter-inputPlaceholder: var(--text-muted);
    --social-iconColor: brightness(0) opacity(0.7);
    --social-iconSize: 44px;
    --social-iconHoverColor: brightness(0) opacity(1);
    --social-iconBackground: transparent;
    --company-text: var(--text);
    --payment-background: transparent;
    --tagline-background: var(--background);
    --tagline-text: var(--text);
    --footer-buttonSize: var(--global-buttonSize);
    --footer-buttonColor: var(--text);
    --footer-buttonBorder: 1px solid var(--text);
    --footer-buttonRadius: var(--global-buttonRadius);
    --footer-buttonBackground: transparent;
    --footer-buttonPadding: var(--global-buttonPadding);
    --footer-buttonBackgroundHover: var(--brand-dark);
    --footer-buttonColorHover: var(--text-inverse);
    --footer-buttonBorderHover: 1px solid var(--brand-dark);
    --footer-buttonPaddingHover: var(--global-buttonPaddingHover);
    --footer-buttonTransition: var(--global-buttonTransition);
}


/* Footer Width */

div#modular-footer-wrapper .fixed {
    max-width: var(--footer-width);
}

#modular-footer-wrapper {
    display: flex;
    flex-flow: row wrap;
    background: var(--footer-background) !important;
    margin: auto;
    float: none;
    max-width: var(--footer-maxWidth);
    padding-top: var(--footer-padding);
    padding-inline: var(--footer-padding);
    align-items: flex-start;
    gap: var(--footer-gap);
}

#modular-footer-wrapper:after {
    display: none;
}

#modular-footer-wrapper > div.fixed {
    width: 100%;
    justify-content: space-between;
    flex: 2;
    background: var(--footer-background);
    border-radius: var(--footer-borderRadius);
}

#modular-footer-wrapper :is(.modular-footer-socials, .modular-footer-retaillinks, .modular-footer-citruslime---tagline) {
    border-bottom: none;
}

#modular-footer-wrapper .modular-footer-socials,
#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    border-top: 0;
    padding: 0;
    width: 100%;
    align-items: flex-start;
    text-align: left;
    grid-gap: 2em;
    background: var(--footer-innerBackground);
    border-radius: var(--footer-borderRadius);
    color: var(--footer-text);
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
    flex: 0 0 auto;
    width: auto;
    padding: 2rem;
    border-radius: var(--footer-borderRadius);
    color: var(--footer-text);
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div br {
    display: none;
}


/* Inner footer column max width */

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container {
    height: auto;
    /* was var(--maxWidth) - a token declared nowhere, so this max-width was
       invalid and silently computed to `none`. The token is --footer-maxWidth
       (declared at the top of this file, 100%). Practical effect of the fix is
       nil, because width: 100% below already constrains this to the same box. */
    max-width: var(--footer-maxWidth);
    padding: 0rem 0rem 2rem 0rem;
    width: 100%;
    margin: 0;
    border-radius: var(--footer-borderRadius);
}


/* Main column ordering */

#modular-footer-wrapper > div.modular-footer-socials {
    flex-flow: column nowrap;
    order: 1;
    justify-content: flex-start;
    max-width: 500px !important;
    grid-gap: 0.5rem;
    border-radius: var(--footer-borderRadius);
    display: flex;
    padding: 1rem;
    align-items: flex-start;
    flex: 1;
    height: 100%;
    background: var(--footer-innerBackground);
}

#modular-footer-wrapper .modular-footer-retaillinks {
    order: 1;
}

#modular-footer-wrapper .modular-footer-retaillinks:nth-child(3) {
    order: 2;
}

#modular-footer-wrapper .modular-footer-citruslime---tagline {
    order: 4;
    background: var(--footer-innerBackground);
    color: var(--footer-titles);
    padding-block: 1em;
    border-radius: var(--footer-borderRadius);
}

@media screen and (max-width: 600px) {
    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container {
        padding: 0;
    }

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
        width: 100%;
    }
}


/* Social and Newsletter */

#modular-footer-wrapper .modular-footer-socials .modular-footer-icons {
    padding: 0;
    order: 1;
    display: flex;
    flex-flow: row nowrap;
    width: auto;
    grid-gap: 0.5rem;
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-icons > a {
    height: var(--social-iconSize);
    width: var(--social-iconSize);
    filter: var(--social-iconColor);
    margin: 0;
    background-color: var(--social-iconBackground);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-icons > a:hover {
    filter: var(--social-iconHoverColor);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter {
    padding: 0;
    border-radius: var(--footer-borderRadius);
}

#modular-footer-wrapper > div.modular-footer-socials::before {
    content: var(--copy-newsletterTitle, "Join Our Newsletter");
    font-family: var(--font-bold);
    display: block;
    margin-bottom: 0.5em;
    color: var(--footer-titles);
    font-size: var(--footer-titleSize);
    max-width: 1400px;
    text-align: left;
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container {
    padding: 0;
    max-width: 100%;
    height: auto;
    background: var(--footer-innerBackground);
    display: flex;
    flex-flow: column;
}

#newsletter-footer-text.newsletterFail {
    margin: auto;
    border-radius: var(--footer-borderRadius);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container .modular-footer-newsletter---container-inner {
    position: relative;
    gap: 1rem;
    background: var(--footer-innerBackground);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    background: var(--footer-innerBackground);
}

/* Newsletter input */
#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner input {
    border-radius: var(--footer-buttonRadius);
    margin: 0;
    height: 54px;
    line-height: 54px;
    font-size: var(--footer-newsletterInputSize);
    width: min(300px, 100%);
    background: var(--newsletter-inputBackground);
    max-width: 700px;
    color: var(--newsletter-inputText);
    justify-content: center;
    border: var(--footer-buttonBorder) !important;
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner input::placeholder {
    font-size: var(--footer-newsletterInputSize);
    color: var(--newsletter-inputPlaceholder);
}

/* Newsletter submit button */
#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit {
    border-radius: var(--footer-buttonRadius);
    font-size: var(--footer-buttonSize);
    height: 54px;
    line-height: 50px;
    color: var(--footer-buttonColor);
    background: var(--footer-buttonBackground);
    padding: var(--footer-buttonPadding);
    border: var(--footer-buttonBorder);
    transition: var(--footer-buttonTransition);
    display: flex;
    align-items: center;
    font-family: var(--font-bold);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit:hover {
    background: var(--footer-buttonBackgroundHover);
    color: var(--footer-buttonColorHover);
    border: var(--footer-buttonBorderHover);
    padding: var(--footer-buttonPaddingHover);
}

/* Newsletter: tablet */
@media screen and (max-width: 1024px) {
    #modular-footer-wrapper .modular-footer-socials {
        flex-flow: column nowrap;
        justify-content: center;
        padding: 24px;
    }

    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container .modular-footer-newsletter---container-inner {
        flex-flow: row;
        justify-content: center;
        align-items: center;
        margin-bottom: 0;
    }

    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner input {
        order: 3;
        flex-basis: 90%;
        flex: 1;
        font-size: var(--footer-newsletterInputSize);
    }

    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit {
        order: 4;
    }
}


/* Footer Column Links */

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner h4 {
    color: var(--footer-titles);
    font-size: var(--footer-titleSize);
    border-bottom: 1px solid var(--footer-underlineColor);
    padding-bottom: .5rem;
    margin-bottom: 1em;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner h4::after {
    content: "";
    display: none;
    width: 40px;
    height: 3px;
    background: var(--footer-background);
    margin: 10px 0px 10px 0px;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner a {
    color: var(--footer-links);
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner a:hover {
    color: var(--footer-linksHover);
}


/* Contact and Opening Hours */

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---contact {
    order: 3;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---contact a.mainFont {
    font-size: initial;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---contact a.mainFont:after {
    display: none;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---openinghours {
    display: block;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---openinghours dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0 0.5rem;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---openinghours dl dt {
    flex-basis: 50%;
    color: var(--footer-text);
    text-align: left;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---openinghours dl dd {
    font-weight: bold;
    color: var(--footer-text);
    text-align: right;
}


/* Payment Icons */

#modular-footer-wrapper .modular-footer-payment-icons {
    text-align: center;
    background: var(--payment-background);
    order: 4;
}

#modular-footer-wrapper .modular-footer-payment-icons img {
    height: 1.5em;
}


/* Tagline */

#modular-footer-wrapper .modular-footer-citruslime---tagline a {
    color: var(--footer-titles);
}


/* Footer: Mobile */

@media screen and (max-width: 768px) {
    #modular-footer-wrapper {
        flex-flow: column;
        justify-content: center;
        align-items: center;
        padding-inline: 1rem;
        gap: 1rem;
    }

    #modular-footer-wrapper > div.modular-footer-socials {
        order: -1;
        width: calc(100%);
        align-items: center;
        justify-content: center;
        border-radius: 0;
        margin-top: 0rem;
    }

    #modular-footer-wrapper .modular-footer-retaillinks {
        order: 2;
    }

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div,
    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter {
        width: 100%;
    }

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
        text-align: left;
    }

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner {
        grid-gap: 0rem;
    }

    #modular-footer-wrapper > div.fixed {
        border-radius: var(--footer-borderRadius);
    }
}

/* Company details */
#modular-footer-wrapper .modular-footer-company-details {
    order: 3;
    background: var(--footer-background);
    color: var(--footer-links);
}

#modular-footer-wrapper .modular-footer-company-details > div {
    color: var(--company-text) !important;
}


/* Footer Column Inner Flex */

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
}


/* Footer Logo (via ::after pseudo-element) */

.modular-footer-socials {
    display: flex;
}

.modular-footer-socials:after {
    content: "";
    display: block;
    height: 40px;
    width: 150px;
    background: url(/layout/generalLyout/logo.png) center center / contain no-repeat;
    order: -1;
}

#modular-footer-wrapper > div.modular-footer-socials::before {
    margin-bottom: 0;
}

/* Newsletter description text */
.modular-footer-newsletter---container:before {
    content: var(--copy-newsletterBody, "Sign up for news and offers.");
    display: block;
    margin-bottom: 1rem;
    opacity: .8;
}
/* CC-QuickLook.css */

/* Quick Look Variables */
:root {
    --quicklook-titleSize: var(--fontSize-lg);
    --quicklook-textSize: var(--fontSize-base);
    --quicklook-countSize: var(--fontSize-xs);
    --quicklook-background: var(--background);
    --quicklook-titleColor: var(--brand-dark);
    --quicklook-textColor: var(--text);
    --quicklook-countColor: var(--brand);
    --quicklook-hoverColor: var(--brand-link);
    --quicklook-padding: var(--global-padding);
    --quicklook-margin: var(--global-margin);
    --quicklook-gap: var(--global-gap);
    --quicklook-radius: var(--global-radius);
    --quicklook-buttonRadius: var(--global-buttonRadius);
    --quicklook-transition: var(--global-transition);
    --quicklook-border: var(--global-border);
    --quicklook-borderRadius: var(--global-radius);
    --quicklook-buttonSize: var(--global-buttonSize);
    --quicklook-buttonColor: var(--global-buttonColor);
    --quicklook-buttonBorder: var(--global-buttonBorder);
    --quicklook-buttonBackground: var(--global-buttonBackground);
    --quicklook-buttonPadding: var(--global-buttonPadding);
    --quicklook-buttonBackgroundHover: var(--global-buttonBackgroundHover);
    --quicklook-buttonColorHover: var(--global-buttonColorHover);
    --quicklook-buttonBorderHover: var(--global-buttonBorderHover);
    --quicklook-buttonPaddingHover: var(--global-buttonPaddingHover);
    --quicklook-buttonTransition: var(--global-buttonTransition);
    --quicklook-addToCart-background: var(--global-addToCart-background);
    --quicklook-addToCart-border: var(--global-addToCart-border);
    --quicklook-addToCart-color: var(--global-addToCart-color);
    --quicklook-addToCart-backgroundHover: var(--global-addToCart-backgroundHover);
    --quicklook-addToCart-borderHover: var(--global-addToCart-borderHover);
    --quicklook-addToCart-colorHover: var(--global-addToCart-colorHover);
    --quicklook-stockLabelWidth: 135px;
}


/* Quick Look Modal */

.quicklookitem-wrapper[data-state="open"] .quicklookitem-inner {
    border: var(--quicklook-border);
    border-radius: var(--quicklook-borderRadius);
    margin-top: 55px;
}

/* Close button */
.quicklookitem-wrapper .quicklookitem-close {
    border-radius: var(--quicklook-borderRadius);
}

/* Right-side content layout */
.quicklookitem-wrapper .quicklookitem-inner-right {
    display: flex;
    flex-flow: column;
    background: var(--quicklook-background);
}

/* Product name */
.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---name {
    font-size: var(--quicklook-titleSize);
}

/* Price */
.quicklookitem-wrapper .quicklookitem-inner-right---prices-price {
    font-family: var(--font-bold);
    font-size: var(--quicklook-titleSize);
}

/* Was price */
.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-wasprice {
    color: var(--quicklook-hoverColor);
}

/* View full details link */
.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---link {
    font-size: var(--quicklook-buttonSize);
    color: var(--quicklook-buttonColor);
    background: var(--quicklook-buttonBackground);
    border: var(--quicklook-buttonBorder);
    border-radius: var(--quicklook-buttonRadius);
    padding: var(--quicklook-buttonPadding);
    transition: var(--quicklook-buttonTransition);
}

.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---link:hover {
    background: var(--quicklook-buttonBackgroundHover);
    color: var(--quicklook-buttonColorHover);
    border: var(--quicklook-buttonBorderHover);
    padding: var(--quicklook-buttonPaddingHover);
}

/* Click and Collect notice */
.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---clickcollectnotice {
    margin-top: auto;
    background: transparent;
    border: none;
    color: var(--quicklook-textColor);
}

/* Product image spacing */
.quicklookitem-wrapper .quicklookitem-image > div {
    margin: var(--quicklook-margin);
}


/* Add to Cart Area */

.add-to-cart-area-1-row-2 > div {
    gap: .5rem;
}

/* Quantity label */
.quicklookitem-wrapper .add-to-cart-area-dropdown-qty-label {
    background: none;
    border: 0;
    color: var(--quicklook-textColor);
}

/* Quantity input */
.quicklookitem-wrapper .add-to-cart-area-dropdown-qty input {
    border: var(--quicklook-border);
    border-radius: var(--quicklook-borderRadius);
}

/* Add to cart button: in stock */
.quicklookitem-wrapper .add-to-cart-area-button.bgStandard {
    font-size: var(--quicklook-buttonSize);
    color: var(--quicklook-addToCart-color);
    background: var(--quicklook-addToCart-background);
    border: var(--quicklook-addToCart-border);
    border-radius: var(--quicklook-buttonRadius);
    padding: var(--quicklook-buttonPadding);
    width: 100%;
    display: flex;
    justify-content: center;
    transition: var(--quicklook-buttonTransition);
    line-height: normal;
    align-items: center;
}

.quicklookitem-wrapper .add-to-cart-area-button.bgStandard:hover {
    background: var(--quicklook-addToCart-backgroundHover);
    color: var(--quicklook-addToCart-colorHover);
    border: var(--quicklook-addToCart-borderHover);
}

/* Add to cart button: out of stock */
.quicklookitem-wrapper .add-to-cart-area-button[data-available="false"] {
    background: var(--quicklook-hoverColor);
}

/* Stock message */
.quicklookitem-wrapper .add-to-cart-area-msg-stock:after {
    text-align: left;
}

.quicklookitem-wrapper .add-to-cart-area-msg-stock:before {
    width: var(--quicklook-stockLabelWidth);
    text-align: left !important;
    margin-right: calc(var(--quicklook-gap) * 0.5);
    border-right: var(--quicklook-border);
    padding-right: calc(var(--quicklook-padding) * 0.5);
}

/* Handling message */
.quicklookitem-wrapper .add-to-cart-area-msg-handling:after {
    text-align: left !important;
}

.quicklookitem-wrapper .add-to-cart-area-msg-handling:before {
    width: var(--quicklook-stockLabelWidth);
    text-align: left !important;
    margin-right: calc(var(--quicklook-gap) * 0.5);
    border-right: var(--quicklook-border);
    padding-right: calc(var(--quicklook-padding) * 0.5);
}

/* Message container */
.quicklookitem-wrapper .add-to-cart-area-msg {
    border-top: none;
    margin-top: var(--quicklook-margin);
}
/* ==================== 08-CC-MiniBasket.css ====================
   Minibasket flyout. On mobile it becomes a full-height, 90%-width
   right-hand drawer; the "Continue Shopping" link (#ContinueLink, which
   calls clearAll() to close) is repurposed as a top-right close (x) on
   all viewports.
   Relocated here from 03-CC-NavigationSearch.css so all basket styling
   lives in one file. Loads last (08) so it wins the cascade.
   ============================================================ */

   :root {
    /* relocated basket tokens (unchanged values) */
    --basket-buttonSize: var(--fontSize-sm);
    --basket-pipSize: var(--fontSize-xs);
    --basketButtonBorder: var(--brand-dark);
    --basketButtonText: var(--text);
    --basketButtonHoverBackground: var(--brand-dark);
    --basketButtonHoverText: var(--text-inverse);
    --checkoutButtonBackground: var(--brand-accent);
    --basketPipBackground: var(--brand-accent);
    --basketPipColor: var(--text-on-accent);

    /* drawer knobs */
    --minibasket-width: 90%;          /* mobile */
    --minibasket-widthDesktop: 420px; /* desktop */
    --minibasket-z: 999999;


    --pipSize: 18px;
}

/* ---- relocated colour / border rules (unchanged behaviour) ---- */
.basketCtr.tbcnt.tbcntOpen {
    border-radius: var(--global-radius);
    border: 1px solid #c2c2c2
    min-height: 70dvh;
    max-height: 100%;
    top: 0px;
    right: 0;
    max-width: 500px;
}

.activeminilink {
    border-radius: var(--global-radius) var(--global-radius) 0 0;
}




/* Basket pip (count badge) */
.wrapper.masthead .basketPip {
    color: var(--basketPipColor);
    background: var(--basketPipBackground);
    font-size: var(--basket-pipSize);
    width: var(--pipSize);
    height: var(--pipSize);
    line-height: var(--pipSize);
    bottom: 50%;
    right: 5%;
}


.wrapper.masthead .basketPip2 {
    color: var(--basketPipColor);
    background: var(--basketPipBackground);
    border-radius: 100%;
}

/* Checkout button */
.wrapper.masthead .CCartBut > div:last-of-type > a {
    background: var(--checkoutButtonBackground);
    border-radius: var(--global-buttonRadius);
}

/* ---- Continue Shopping -> close (x), all viewports ----
   #basket is a fixed full-height drawer (below), so it is the containing
   block for this absolutely-positioned close button on every viewport. */
#basket .CCartBut > div:first-of-type {
    position: absolute;
    top: 0rem;
    right: 0rem;
    width: auto;
    margin: 0;
    z-index: 1;
}
#ContinueLink {
    font-size: 0;              /* hide the "Continue Shopping" text */
    line-height: 0;
    width: auto;
    min-width: 0;
    padding: 0.35rem 0.6rem;
    border: none;
    background: none;
}
#ContinueLink::before {
    content: "\00D7";          /* x */
    font-size: 1.75rem;
    line-height: 1;
    color: var(--text);
    transition: var(--global-transition);
}
#ContinueLink:hover::before { color: var(--brand); }

/* Checkout now fills the row (Continue is out of flow) */
#basket .CCartBut > div:last-of-type { width: 100%; }


/* ---- full-height right-hand drawer, slides in when opened (all viewports) ----
   Styled on .basketCtr (both states) and kept rendered off-canvas so the open
   transition can animate; display is forced on to beat the core display:none
   toggle, and the closed panel is hidden off-screen via transform + visibility. */
#basket.basketCtr {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: var(--minibasket-widthDesktop) !important;
    max-width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    z-index: var(--minibasket-z);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    display: flex !important;
    flex-flow: column;
    transform: translateX(100%);   /* off-canvas to the right */
    visibility: hidden;
    transition: transform 0.35s ease, visibility 0.35s ease;
}
/* open state - slide into view */
#basket.basketCtr.tbcntOpen {
    transform: translateX(0);
    visibility: visible;
}

/* Push bottom section down */

#basket .col-1:has(#MiniBasketMerchandiseTotal) {
    margin-top: auto;
}


/* mobile / tablet: wider drawer + larger close */
@media (max-width: 1024px) {
    #basket.basketCtr { width: var(--minibasket-width) !important; }
    #basket .CCartBut > div:first-of-type { top: 0.75rem; right: 0.75rem; }
    #ContinueLink::before { font-size: 2.25rem; }
}

/* product list */

div[data-boxcontext*="minibasket"]{
    max-height: 100% !important;
}/* ==================== 99-CC-Custom.css ====================================
   THE CLIENT CHROME LAYER. Loads last, wins over every framework file.
   REWRITE THIS FILE FROM SCRATCH FOR EACH NEW CLIENT - stale rules here will
   override the next skin, and unlike a stray colour a stray rule cannot be
   found by searching for a token.

   WHAT BELONGS HERE
   Rule-level treatments that are this client's TASTE and nothing else: the
   specific way their dropdowns are framed, the shape of their search control,
   the devices that make their footer theirs.

   WHAT DOES NOT BELONG HERE - and must not creep back in
   Mechanism every client needs, and choices between known options. Those are in
   the framework, driven from 01-CC-Brand.css:

     the masked wordmark and nav icons ......... 03, Brand Assets
     transparent-over-hero nav ................. 03, Transparent-over-hero
     nav bar seam / link case / link tracking .. 03, --navBorderBottom,
                                                 --navItems*
     nav underline hover device ................ 03, --navUnderline-display
     platform CTA strip visibility ............. 03, --ctaStrip-display
     carousel pagination shape and arrow feel .. 05, --splidePagination*,
                                                 --splideArrowHover*
     every word the CSS writes ................. 01, --copy-*
     the page canvas ........................... 02

   Before adding a rule, ask whether a token could express it. If one could, add
   the token to the owning framework file instead. The test that keeps this file
   honest: could the NEXT client want the opposite of this rule and get it by
   editing 01 alone? If yes, it is a switch, not chrome.

   Tokens declared here use the --skin-* prefix, never the client's initials. A
   --tj-* style vocabulary is how one client's assumptions survive into the next
   build unnoticed. lint.ps1 flags any other prefix.

   A worked example of this file, fully populated, is in
   examples/templeton-jones/99-CC-Custom.css - including two blocks that were
   deliberately NOT promoted, and the reasoning for each.

   ---------------------------------------------------------------------------
   THIS CLIENT: Ute City Cycles - a heritage/outdoors mountain-badge mark
   (mountains, a bike, a scalloped stamp edge) carried on an otherwise plain
   white canvas, near-black type and chrome, so the badge stays the one
   characterful element and product photography is never fighting a tinted
   background. One olive-lime accent (from the badge itself) for CTAs and
   emphasis; every other switch (nav, carousels) stays on the framework
   default. Barlow Condensed uppercase, tight tracking for every header; every button
   site-wide is a fully-rounded pill (--global-buttonRadius in 01, decoupled
   from --global-radius so cards/tiles stay square-cornered).
   =========================================================================== */

:root {
    /* Client-local values, --skin-* prefix. Delete what you do not use. */
}


/* ==================== Type ====================
   font/body.* = Roboto Regular. font/bold.* and font/display.* = Barlow
   Condensed Bold (same physical file in both slots; ttf added alongside
   woff2 after suspecting a server-side MIME gap - see CLAUDE.md). 01's TYPE
   ROLES is unchanged, so --font-bold still points at --font-body (Roboto) -
   our own authored UI emphasis (nav links, prices, labels) stays Roboto, and
   only the kit's one heading rule (h1-h6, citrfontbold) and --font-display
   (every stripe/banner title) render in Barlow Condensed.

   NOTE: the platform's own ~186 hardcoded citrfontbold declarations outside
   this tree (basket, checkout, account) are outside our control and will
   also render in whatever font/bold.woff2 holds - see 01's TYPE ROLES
   comment. That is an existing platform constraint, not new here.

   Uppercase + tight tracking is this client's specific header treatment, so
   it lives here rather than as a framework switch. Scoped to the semantic
   heading rule and the four stripe titles that use --font-display.
   hp-icon-strip's title is deliberately excluded - its own stripe.css sets
   --font-body on purpose (a small UI label, not a section header). */
h1, h2, h3, h4, h5, h6,
.hp-hero-split .cc-banner__title,
.hp-product-rail .faf-title,
.hp-category-grid > .cc-collection .cc-banner__title,
.hp-cta-close > .cc-collection .cc-banner__title {
    text-transform: uppercase;
    letter-spacing: -0.02em;
}


/* ==================== Nav (03 overrides) ==================== */

/* The real badge (--logo, repointed in 01 to logo-badge.png) is a two-tone
   raster - green ring, cream cutouts for the text/mountains/bike - not a
   flat single-colour silhouette. 03's mask technique only reads alpha/shape,
   so masking it would render the WHOLE badge as one solid blob, losing every
   internal detail. Dropped for this asset: plain background-image instead,
   real colours preserved. This costs nothing here specifically because this
   site's nav never changes colour state (solid bar always, no
   transparent-over-hero - see default.aspx) - the mask's actual purpose,
   recolouring one asset across nav states, was never in use. A future
   flat-colour vector badge could go back to --logo + the mask as normal;
   this override only exists because today's asset is raster and two-tone. */
.logoContainer {
    -webkit-mask: none;
    mask: none;
    background: var(--logo) center / contain no-repeat;
}


/* ==================== Carousels (05 overrides) ==================== */


/* ==================== Footer (06 overrides) ==================== */

/* 06's footer wordmark (.modular-footer-socials:after) hardcodes
   url(/layout/generalLyout/logo.png) with no token to repoint - and that
   exact file is still Templeton Jones' real logo, blocked by a server-side
   lock that survived several overwrite attempts (see CLAUDE.md). Sidestepped
   here instead of fought: same selector, repointed to the real badge, no
   change needed to the locked file or to 06 itself. */
.modular-footer-socials:after {
    background: url('/layout/generalLyout/logo-badge.png') center center / contain no-repeat;
}


/* ==================== PLP / PDP (faf, detail overrides) ==================== */
@charset "UTF-8";

/*  FlexSlider */
.flex-container a:active, .flexslider a:active {
    outline: none;
    border: 0;
}

.slides:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.flex-viewport {
    max-height: 2000px;
}

.loading .flex-viewport {
    max-height: 300px;
}

.carousel li {
    margin-right: 5px
}

html[xmlns] .slides {
    display: block;
    padding: 0;
    margin: 0;
}

* html .slides {
    height: 1%;
}

.flexslider {
    width: 100%;
    position: relative;
    zoom: 1;
    margin: 0;
    padding: 0;
}

    .flexslider ul {
        padding: 0;
        margin: 0;
    }

    .flexslider .slides > li {
        position: relative;
        list-style: none;
        -webkit-backface-visibility: hidden;
    }

#BasketRecommendations_RecommendationsRepeater .flexslider .slides > li > a {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    color: #000;
    border: none;
}

    #BasketRecommendations_RecommendationsRepeater .flexslider .slides > li > a + a {
        margin-top: 1rem;
    }

.item-repeater-info-name {
    font-size: 14px;
    margin-top: 0.25rem;
}

.no-js .slides > li:first-child {
    display: block;
}

.flexslider .slides img {
    max-width: 100%;
    display: block;
}

.flex-pauseplay span {
    text-transform: capitalize;
}

.slides:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.flex-container {
    width: 100%;
    zoom: 1;
    position: relative;
}

.flex-caption {
    background: none;
    zoom: 1;
    position: absolute;
    bottom: 0px;
    color: #666;
    font-size: 0;
    line-height: 50px;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75em;
}

    .flex-caption span {
        text-decoration: none;
        color: #000;
        font-weight: normal;
        margin: 0;
        padding: 7px 14px;
        background: rgba(255, 255, 255, 0.9);
        display: inline-block;
        line-height: 150%;
        float: left;
    }

        .flex-caption span:first-child {
            clear: both
        }

.hmBannerSmallContainer a:hover > .flex-caption > span {
    background: #00aeef;
    color: #ffffff;
}

.bannerTextsmall {
    font-size: 10px;
    display: none
}

span.Description {
    line-height: 100%;
    text-decoration: none;
    font-size: 11px;
    color: #333;
    font-weight: normal;
    margin: 0;
    padding: 0;
    padding: 7px 7px 7px 14px;
    background: rgba(255, 255, 255, 0.8);
    float: left;
    clear: both
}

span.link {
    text-decoration: none;
    color: #00aeef;
    font-weight: normal;
    margin: 0;
    padding: 3px 7px;
    line-height: 150%;
    float: none;
    margin-left: 7px;
    background: none;
}

.flexslider .slides > li a:hover p.flex-caption span.link {
    background: #00aeef;
    color: #FFF
}

.flexslider .slides > li a:hover p.flex-caption strong {
    color: #333;
}

.flex-direction-nav li {
    list-style: none
}

    .flex-direction-nav li a {
        width: 36px;
        height: 36px;
        margin: -13px 0 0;
        display: block;
        position: absolute;
        top: 49%;
        cursor: pointer;
        text-indent: -9999px;
        opacity: 0;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        overflow: hidden;
    }

        .flex-direction-nav li a:before {
            font-family: feather;
            display: block;
            width: 36px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            color: #484848;
            background: rgba(255,255,255,0.95);
            border-radius: 100%;
            text-indent: 0px;
        }

.flex-direction-nav > li > a.flex-next {
    right: 0;
    z-index: 2;
}

    .flex-direction-nav > li > a.flex-next:before {
        content: "\e910";
    }

.flex-direction-nav li .flex-prev {
    left: 0;
    z-index: 2;
}

.flex-direction-nav > li > a.flex-prev:before {
    content: "\e90e";
}

.flexslider:hover .flex-next {
    opacity: 0.8;
    right: 28px;
}

.flexslider:hover .flex-prev {
    opacity: 0.8;
    left: 28px;
}

    .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {
        opacity: 1;
    }

.flex-direction-nav li .flex-disabled {
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: default;
    display: none
}

.flex-control-nav {
    text-align: center;
    z-index: 2;
    padding: 16px 0;
    line-height: 100%;
}

    .flex-control-nav li {
        margin: 0 4px;
        display: inline-block;
        zoom: 1;
    }

        .flex-control-nav li a {
            width: 9px;
            height: 9px;
            display: block;
            background: #666;
            background: rgba(188,178,169,0.5);
            cursor: pointer;
            text-indent: -9999px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            -o-border-radius: 20px; /* border-radius: 20px; */
        }

            .flex-control-nav li a.active {
                background: #6280A8;
                background: rgba(98,128,168,0.8);
            }

            .flex-control-nav li a:hover {
                background: #333;
                background: rgba(170,160,149,0.7);
            }

            .flex-control-nav li a.flex-active {
                background: #000;
                background: rgba(170,160,149,0.9);
                cursor: default;
            }

.flex-control-thumbs {
    margin: 5px 0 0;
    position: static;
    overflow: hidden;
}

    .flex-control-thumbs li {
        width: 25%;
        float: left;
        margin: 0;
    }

    .flex-control-thumbs img {
        width: 100%;
        display: block;
        opacity: .7;
        cursor: pointer;
    }

        .flex-control-thumbs img:hover {
            opacity: 1;
        }

    .flex-control-thumbs .flex-active {
        opacity: 1;
        cursor: default;
    }
/*  END - FlexSlider */

/* ----- FAF related items ----- */
#flexsliderMPFAF .slides li, .flexsliderMP .slides li, #flexsliderMPFAF .slides li {
    margin-right: 16px
}

.pricingRepeater.fafSalePR {
    display: flex;
    gap: 0.5rem;
}

.pricingRepeater > span:nth-child(1) {
    font-weight: bold;
    '
}

.pricingRepeater.fafSalePR > span:nth-child(2) {
    color: #aaa;
    text-decoration: line-through
}

.pricingRepeater.fafSalePR > span:nth-child(3) {
    color: #cc2323;
}
@charset "UTF-8";
/*  Remarketing */
.banners>div{ display:inline-block; margin-right:28px; vertical-align: middle;}
.bannersContiner { background:#efefef}
.bannersBrands { /* float:left */}
.banners small { font-size:10px; color:#999}
.bannersAll { margin:0; padding: 28px; float:left; width:50%}
.bannersAll li { float:left; list-style:none; width:100%; padding:7px; border-bottom:1px solid #efefef}
.bannersAll li:hover { background:#f5f5f5}
.bannersAll li:nth-child(2) { border-bottom:1px solid #ccc}
.bannersAll li div { float:left; }
.bannersAll li div:nth-child(1) {font-weight:bold; width:25%}
.bannersAll li div:nth-child(2) {width:55%}
.bannersAll li div:nth-child(3) {width:20%}
.bannersTable {padding: 21px;}
.bannersTable table tr td {padding: 7px;}
.bannersTable table th { border-bottom:1px solid #ccc; font-weight:normal; padding: 7px;}
.bannersTable table tr td { border-bottom:1px solid #efefef;}
.bannersTable table tr td:nth-child(2), .bannersTable table tr th:nth-child(2) { width:60%}
.bannersTable table small { font-size:10px; color:#999; padding: 7px 0 0 0; float: left;}
.google, .webgains { border: 1px solid #E2E2D9; display: inline-block; position:relative; margin: 28px 14px 0; padding: 27px;}
.google a, .webgains a { display: inline-block; position:relative;}
.google img, .webgains  img { width:200px; outline: 1px solid #E2E2DD;}
.google span, .webgains  span {display:block;padding:7px;background:#fff;/* border: 1px solid #E2E2D9; */}
.webgains { display: inline-block;}
.bannmessage {position:absolute;background: #FFFFFF;padding: 0px 14px;left:14px;top:-14px;}
#brand1,#brand2,#brand3,#brand4,#brand5 {}
.socialBanners>div { display:inline-block; vertical-align:middle; margin:28px;}
.overlay { background:rgba(47,53,62,.9); padding:7px 14px; position:absolute; left:0; top:0}
.overlay p,.overlay a  { color:#fff}
.campaignBox {border: 1px solid #E2E2D9; display: inline-block; position:relative; margin: 28px 14px 0; padding: 27px;}
.google span, .webgains  span {display:block;padding:7px;background:#fff;/* border: 1px solid #E2E2D9; */}



/*  cookies */
#cookies{font-size:9.5pt;text-align:left;margin-bottom:20px;line-height:170%;}
#cookies p{color:#666;font-size:9.5pt;font-weight:400;font-style:normal;line-height:170%;text-decoration:none;}
#cookies th{background:#F5F5F5;font-weight:400;color:#666;border:1px solid #d6d6d6;padding:10px;}
#cookies tr{font-weight:400;color:#666;}
#cookies td{font-weight:400;border:1px solid #d6d6d6;text-align:left; padding:14px; background:#fff}
#cookies td a{color:#3477BB;font-size:9.5pt;}


/* -- Mobile Phones  -- */
@media screen and (max-width: 767.99px)
{
  /* Brand Page */
	.brandLanding a {display:block;}
	.brandPageLogo {display:none;}
}
@charset "UTF-8";
.formContiner li {margin-bottom: 32px}
.quickContact span { display:block}
.hours dt, .hours dd {float: left;}
.hours dt {clear: both;margin-right: 16px; min-width: 100px}

#ResetButton[disabled],
#ResetButton[disabled="disabled"] {
    display: none;
}
@charset "UTF-8";
.financeCalcOveride .hideFinanceOnMobile {
    display: block !important;
}

.financeCalcOveride .finance-pop-wrap {
    max-width: 100%;
}
@charset "UTF-8";
/* -- Customer product builder --*/
.cpb-standardSpecPrice {background:orange; height:64px; line-height: 64px;padding:0 16px; float:left; width:100%;}
.cpb-standardSpecPrice .now {font-size: 1.5em;margin-left: 0.5em;}
div[id*="ProductCustom1_panAttributes"] {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction:row;flex-wrap:wrap; align-contents:stretch;}
.cpb {width:33.33%;flex-basis:33.33%;padding:32px;border-left:1px solid #c6c9cd;border-bottom:1px solid #c6c9cd;}
.cpb-Header {float: left;width: 100%;display: block;clear: both;height: 45px;}
.cpb-Header strong {display:block; margin:16px 0 8px 0}
.attBlock {height:64px;background:none; margin-bottom:16px;display: flex;flex-direction: row;    clear: both;}
.attBlock > div:nth-of-type(2) {margin:0 !important; background:none !important;height:64px !important; line-height:64px; text-align:center;flex-grow:0 !important;width: auto !Important;}
.attBlock > div {height:64px !important;line-height:64px;font-size: 14px;flex-grow:0;}
.attName {float:left;flex-grow:2 !important; width: 180px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.attImage {float:left; text-align:center;max-width: 64px;flex-grow:0 !important;}
.attImage img {border:0 !important; display:inline-block; vertical-align:middle;border-radius:100%;margin:0 8px 0 0}
.attMoreInfo a img {display:none;}
.attMoreInfo a:before {content:'\f05a';font-family:'FontAwesome';margin:0 8px 0 0;font-size: 16px;color: #454545;}
.attPrice {float:right; text-align:right;padding: 0 16px;}
.attSelected {float:right;background:none !important; text-align:center;max-width: 64px;width:64px;flex-grow:0 !important;}
.attSelected input {display:inline-block; vertical-align:middle;}
#cpb-summary {}
#cpb-summary li {border-top: 1px solid #49515d;padding: 8px 0;list-style: none;}
#cpb-summary li:first-of-type {border-top: none;}
#cpb-summary li span {color:white;}
#cpb-summary li .cpb-selectedOption {display: inline-block;min-width: 176px;}
#cpb-summary li .cpb-chosenAtt {display: inline-block;}
.cpb-summaryAttLabel {color:orange;font-size:1.5em;padding-bottom: 8px;border-bottom: 1px solid orange;line-height:150%;}
.cpb-summaryAttLabel font {color:orange !important}
.cpb-finalPrice {color:orange;font-size:1.5em;padding-top: 8px;border-top: 1px solid orange;line-height:150%;}
.cpb-details .col-1 {margin:16px 0}
.cpb-purchaseItem {background:#e1e1e1;  margin: 0 0 16px 0 !important;}
.cpb-buttonAdd {}
.cpb-buttonAdd a {width:100%; display:block; height:64px; background:#a2c76c; text-align:center}
.cpb-buttonAdd a img {}
.cpb-allImageContainer .flex-direction-nav {display:none;}
.cpb-namePriceContainer {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-wrap:wrap;flex-direction:row;}
.cpb-namePriceContainer > div {width:100%;min-width:100%;flex-basis:100%;}
#cpb-summary li span {color: #48484d;}


/* -- Mobile Phones  -- */
@media screen and (max-width: 767.99px)
{
  /* -- Customer product builder --*/
  .attName {   white-space: nowrap;overflow: hidden;text-overflow: ellipsis; max-width: 50%;}
  .cpb-standardSpecPrice .now {margin-left: 0 !important;}
	.cpb-standardSpecPriceTitle {display:none !important}
	.attBlock > div {font-size:11px !important;}
	.attName {width:120px !important;}
	.attPrice {padding: 0 8px !important;}
	.cpb {width:100% !important;flex-basis:100% !important;padding:8px 0 !important;}
	.cpb {border-left:0 !important;}
	.cpb:nth-child(1n+1):nth-last-child(-n+1), .cpb:nth-child(1n+1):nth-last-child(-n+1) ~ .cpb {border-bottom:0 !important;}
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.99px)
{
  /* -- Customer product builder --*/
  .attBlock > div {font-size:12px !important;}
  .cpb {width:100% !important;flex-basis:100% !important;padding:32px !important;}
  .cpb {border-left:0 !important;}
  .cpb:nth-child(1n+1):nth-last-child(-n+1), .cpb:nth-child(1n+1):nth-last-child(-n+1) ~ .cpb {border-bottom:0 !important;}
}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) and (max-width : 1439.99px)
{
  /* -- Customer product builder --*/
  .cpb {width:50% !important;flex-basis:50% !important;padding:32px !important;}
  .cpb:nth-child(2n-1) {border-left:0 !important;}
  .cpb:nth-child(2n+1):nth-last-child(-n+2), .cpb:nth-child(2n+1):nth-last-child(-n+2) ~ .cpb {border-bottom:0 !important;}
}

/* 4K   ------------------------------------------------------------------------------------------ */
@media screen and (min-width : 1914px)
{
  /* -- Customer product builder --*/
	.cpb:nth-child(3n-2) {border-left:0 !important;}
	.cpb:nth-child(3n+1):nth-last-child(-n+3), .cpb:nth-child(3n+1):nth-last-child(-n+3) ~ .cpb {border-bottom:0 !important;}
}
@charset "UTF-8";
/*  Customer Rewards Page */
.crPageHeader {}
.crPageHeader h1 {margin:8px 0;}
.crPageHeader h2 {margin:0;color:#8dc63f}
.crPageExplain {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-wrap:wrap;flex-direction:row;align-items:stretch;}
.crPageExplain .col-3, .crPageExplain .col-2 {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items:stretch;}
.crPageExplain .col-3 .col-1, .crPageExplain .col-2 .col-1 {background:#e1e1e1;}
.crHelpMe {background:#f3d3d3 !important}
.crHelpMe h4, .crHelpMe h3, .crHelpMe a {color:#f5373c !important}
.crPagePointsDisplay {background:#e5f0d6 !important}
.crPagePointsDisplay h4, .crPagePointsDisplay h3, .crPagePointsDisplay a {color:#8dc63f !important}
.crPagePointsDisplay .crPointsBalance, .crPagePointsDisplay .crPointsValue {font-size:32px;}
.crPageInfo {margin:16px 0 0 0}
.crPageInfo .warning {color:dodgerblue; background:none; border-left:0; border-bottom:1px solid dodgerblue;padding-bottom:4px;}
.crPageInfo a {display:inline-block;padding:4px 16px;margin:0 8px 8px 8px;border-radius:4px;background:none;border:1px solid #31353E;color:#31353E;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;-webkit-appearance: none;-moz-appearance:none;appearance:none;font-weight: 700;text-transform: uppercase;font-size: 12px;letter-spacing: 2px;}
.crPageInfo a:hover {color:white;background:#8dc63f;border:1px solid #8dc63f;}
.crLinkForm {position:relative;display:inline-block}
.crLinkFormPassword {float:left;}
.crLinkFormPassword > input {-webkit-appearance: none;-moz-appearance:none;appearance:none;height: 34px;border-left: 1px solid #31353E; border-top: 1px solid #31353E; border-bottom: 1px solid #31353E; border-right:0;padding: 0 8px;font-size: 14px;font-family:inherit;-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-ms-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out;}
.crLinkFormButton {float:right;}
.crLinkFormButton > a {margin:0;border-radius: 0;-webkit-border-top-right-radius: 4px;-webkit-border-bottom-right-radius: 4px;-moz-border-radius-topright: 4px;-moz-border-radius-bottomright: 4px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;height: 34px;line-height: 34px;padding: 0 16px;}
.crLinkFormButton:hover + .crLinkFormPassword > input {border-left: 1px solid #8dc63f; border-top: 1px solid #8dc63f; border-bottom: 1px solid #8dc63f; border-right:0;}
.hdrRewardsTitle {float:left;margin-right:4px;}
.crNotLoggedIn, .crAccNotActive, .crNoAccFound, .crLnkAccounts, .crViewOffers {color: #8dc63f !important;border-bottom: 1px solid #d4d4d4;}
.crNotLoggedIn:hover, .crAccNotActive:hover, .crNoAccFound:hover, .crLnkAccounts:hover, .crViewOffers:hover { color:#7fd805; border-bottom:1px solid #7fd805 }
.detail-custmerRewardsBasket { position:absolute; right: 0; top: 3px; padding: 0 }
.detail-custmerRewardsBasket span.icon { display: block; width: 21px; height: 21px; float: left }
.detail-custmerRewardsBasket div { float: right }
.CRpointBasket { text-transform:capitalize; font-size:12px; font-weight:bold; color: #33333; margin-right:5px;  margin: 0; padding: 0; float: left; text-indent: 0px; margin: 0px 0 3px 0px;}
.CRpointBasket b {color: #4f9a11;}
.CRcopyBasket {text-transform:capitalize; font-size:12px; margin: 0px 0px 0px 3px; float: left }
.crShoppingCart {}
.crShoppingCartHeader {font-size: 24px;color: #6C884D;font-style:normal;text-decoration:none;background: url(layout/rewards/reward-small.png) no-repeat;background-position: 0px 3px; text-align:left;padding: 0px 1em 1em 2em;margin-bottom: 0.5em;}
.crShoppingCartCopy, .crShoppingCartPoints  { color:#769355; position: relative; width:100%; line-height: 150%;}
.crShoppingCartPoints span { display: block; margin-bottom: 16px}
.crShoppingCartPoints>input {/* position:absolute; *//* right: 0; *//* top: -43px; */padding-top: 18px;display: block; width: initial;height: initial;}
#CustomerRewardsApplyPoints_panPointsApplied { font-size:8.5pt;color:#769355;font-weight:bold;font-style:normal;text-decoration:none;background: #ebf6d9; text-align:left; border-bottom: 1px solid #acd373;border-top: 1px solid #acd373;padding: 14px 45px 14px 14px; position: relative; width:100%; margin-top: 7px;}
#CustomerRewardsApplyPoints_panPointsApplied>input { position:absolute; right:14px; top:6px}
#CustomerRewardPanel2 div.customerRewardsCtr {justify-content:flex-start; align-content:flex-start}
#CustomerRewardPanel2 div.crValueCtr {background: none;padding: 0 4px 0 0;}
#CustomerRewardPanel2 div.crValueCtr span {font-family:'pt_sansregular';}

/*  Customer Rewards Promotions */
ul.crCurrentPromo { display: block; width: 980px; list-style: none; padding: 0px; margin: 0px 14px 14px 0px; background: #f6f9e8; float: left; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border: 14px solid #f6f9e8 }
ul.crCurrentPromo li { font-size: 10px; color: #666; padding: 0px; margin: 0px 0px 7px 0px; float: left; display: block; width: 100% }
ul.crCurrentPromo li.crName { font: 21px/150%; color: #718a10; display: block; text-align: left; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid #9ba76a }
ul.crCurrentPromo li.crNote { display: block; width: 42px; border-right: 1px solid #9ba76a }
ul.crCurrentPromo li.crDescription { font: 12px/150%; color: #718a10; display: block; text-align: left; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid #9ba76a }
ul.crCurrentPromo li.crStartDate { text-indent: 7px; width: 196px; font-weight: bold }
ul.crCurrentPromo li.crEndDate { text-indent: 7px; width: 196px; font-weight: bold }
ul.crCurrentPromo li.crValue { text-indent: 7px; width: 196px; font-weight: bold }
ul.crCurrentPromo li.crType { text-indent: 7px; width: 196px; font-weight: bold }
ul.crFuturePromo { display: block; width: 980px; list-style: none; padding: 0px; margin: 0px 14px 14px 0px; background: #fafafa; float: left; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border: 14px solid #fafafa }
ul.crFuturePromo li { font-size: 10px; color: #666; padding: 0px; margin: 0px 0px 7px 0px; float: left; display: block; width: 100% }
ul.crFuturePromo li.crName { font: 21px/150%; color: #666; display: block; text-align: left; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid #e5e5e5 }
ul.crFuturePromo li.crNote { display: block; width: 42px; border-right: 1px solid #e5e5e5 }
ul.crFuturePromo li.crDescription { font: 12px/150%; color: #666; display: block; text-align: left; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid #e5e5e5 }
ul.crFuturePromo li.crStartDate { text-indent: 7px; width: 196px; font-weight: bold }
ul.crFuturePromo li.crEndDate { text-indent: 7px; width: 196px; font-weight: bold }
ul.crFuturePromo li.crValue { text-indent: 7px; width: 196px; font-weight: bold }
ul.crFuturePromo li.crType { text-indent: 7px; width: 196px; font-weight: bold }


/*  Customer Rewards */
div#CustomerRewardPanel {}
div.customerRewardsCtr { width: 100%;display: flex;align-items: stretch;padding: 16px 0 0;align-content: center;justify-content: center;}
div.crValueCtr {color: #4E9A14;margin: 0 0 0 0;background: url(/layout/rewards/cr.svg) no-repeat;display: flex;align-items: center;padding: 0 0 0 30px;}
div.crValueCtr span {text-align: center;display: inline-block;font-weight: 700;letter-spacing: 2px;font-size: small;width: 100%;}
div.crTextDesc {font-size: small;line-height: 150%;padding: 8px;}
div.crTextDesc span {color: #4E9A14;text-transform: lowercase;display: inline-block;font-weight: 400;}
div.crSignInUpCtr { background: #f1f1f1; height: 49px; width: 100%; float: left; border-top: 1px solid #e1e1e1;display: none;}
div.crLink { width: 45%; height: 48px; float: left }
div.crLink a { font-family: 'roboto'; width: 100%; height: 48px; text-align: center; line-height: 48px; display: block; text-decoration: underline; color: #0076a3 !important }
div.crLink a:hover { text-decoration: none }
div.crIcon { float: left; height: 48px; width: 10%; background: url(/layout/rewards/crIcon.jpg) top left no-repeat; background-position: center }


/* -- Mobile Phones  -- */
@media screen and (max-width: 767.99px)
{
  /* -- Customer Rewards Page ----- */
  .crPageExplain .col-3, .crPageExplain .col-2 {width:100% !important;}
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.99px)
{
  /* -- Customer Rewards Page ----- */
  .crPageExplain .col-3, .crPageExplain .col-2 {width:100% !important;}
}
/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) and (max-width : 1439.99px)
{
  /* -- Customer Rewards Page ----- */
	.crPageExplain .col-3, .crPageExplain .col-2 {min-width:50% !important;flex-grow:1}
}
@charset "UTF-8";
/*  Frequently Asked Questions (FAQ) and Avatars */
.faqContainer {padding: 32px 0;margin: 32px 0;border-top: 1px solid #E1E1E1;}
.faqContainer .formSingle {clear: none;margin: 0.5em 0 1em 0;color: #666;width: 100%;padding: 0.5em 0;clear: both;}
.faqContainer .faqFormTxt { display: block; line-height: 160%; margin: 1em 0 0 0; padding: 0px }
.faqCompleteCtr { vertical-align: top; list-style: none;}@charset "UTF-8";
/* Instagram  */
.Instagram { float:left; clear:both; margin:28px 0}
.instComments {position:relative;margin-bottom: 32px;width: 100%;}
.instagramTitle a, .instagramContent a { color:inherit}
.instComments .likes {font-size: 13px;font-weight: bold;color: #2f353e;text-decoration:none;background-position:0 3px;left:0;bottom:0;padding: 16px 0 8px;line-height:170%;display: inline-block;}
.instComments .likes:before {font: normal normal normal 12px/1 FontAwesome;content: "\f08a";padding-right: 8px;}
.instComments .caption {width: 100%;}
.instComments .likes:before {font: normal normal normal 12px/1 FontAwesome;content: "\f08a";padding-right: 8px;}
.instComments .comments {font-size: 13px;font-weight: bold;color: #2f353e;text-decoration:none;background-position:0 3px;left:0;bottom:0;padding: 16px 8px 8px 16px;/* width: auto; */line-height:170%;display: inline-block;}
.instComments .comments:before {font: normal normal normal 12px/1 FontAwesome;content: "\f0e5";padding-right: 8px;}
.instagramContent li  {position: relative;float: left;height:auto;list-style:none;}
.instagramContent li img  {width: 100%;height: auto;display: block;-webkit-transition: opacity 0.1s linear;}
.instagramContent li:hover div.likes {color: #2f353e;}
.instaproductpics {z-index:1;position:absolute;right: 16px;top: -32px;width: 100px;height: 100px;background-size: cover !important;padding: 0;margin: 0;}
.instaproductPrice {font-size: 10px;font-weight: bold;color: #2f353e;right: 0px;bottom: 0px;padding: 0 8px;width: auto;position: absolute;background: #fff;}
.instagramPicture img {-webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; width: 75px; height: 75px}
.instagramUsername { padding: 16px}
.instagramTitle { margin:auto}
.instagramPicture { display:inline-block}


/* Lined account */
.instaLinked .caption { width: 60%}


/* -- Mobile Phones  -- */
@media screen and (max-width: 767.99px)
{
	.instagramContent li  {width: 100%;}
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.99px)
{
	.instagramContent li  {width: 50%;}
}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) and (max-width : 1439.99px)
{
	.instagramContent li  {width: 33.33%;}
}

/* Desktops  ------------------------------------------------------------------------------------ */
@media screen and (min-width : 1440px) and (max-width : 1913.99px)
{
	.instagramContent li  {width: 25%;}
}
/* 4K   ------------------------------------------------------------------------------------------ */
@media screen and (min-width : 1914px)
{
	.instagramContent li  {width: 25%;}
	.instaproductpics {width: 150px !important; height: 150px !important; top: -64px !important}
}
@charset "UTF-8";
#newsletterPOPUP {display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100vh;background:rgba(0,0,0,0.3);z-index:3001;text-align: center;vertical-align: middle;}
#newsletterPOPUP.opennlpop {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
.newsletterPOPUPinner {width:800px; background-position: top right; display: inline-block;background:white;justify-content: flex-end;vertical-align: middle;opacity:0;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
#newsletterPOPUP.opennlpop .newsletterPOPUPinner {opacity:1;}
.newsletterPOPUPinner>.col-2, .newsletterPOPUP-info, .newsletterPOPUP-image {width:50%;float:right;text-align: left;}
.newsletterPOPUP-form {margin-top:16px;padding-top:32px;padding-bottom: 32px;border-top:1px solid #ddd;border-bottom: 1px solid #ddd;}
.newsletterPOPUP-info {position:relative;}
.newsletterPOPUP-info .fa-close {position:absolute;top: 8px;right: 8px;font-size: 24px;width: 32px;height: 32px;text-align: center;line-height: 32px; cursor:pointer;}
.newsletterPOPUP-form input {-webkit-appearance: none;-moz-appearance:none;appearance:none;width:100%;float:left;display:block;border:1px solid #999;padding:8px;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;background:white !important;}
.newsletterPOPUP-form input:hover, .newsletterPOPUP-form input:focus {border:1px solid #92cd1f;color:#333 !important;outline: none;box-shadow: none;}
.newsletterPOPUP-form input.failed-email {border:1px solid tomato;}
.newsletterPOPUP-form input.failed-email:hover {border:1px solid crimson;}
.newsletterPOPUP-form .newsletter-pop-new-send {display:block;float:left;padding:8px 24px; background:#92cd1f;color:white;margin:8px 8px 0 0; cursor: pointer;border-radius:4px;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.newsletterPOPUP-form .newsletter-pop-new-send:hover {background:#7baf15;}
.newsletterPOPUP-info .form-label-new {font-size:11px; margin:8px 0 4px 0;width:100%;float:left;line-height: 11px;}
.newsletterPOPUP-info .form-label-new span {color:dodgerblue;}
.newsletterPOPUP-info #newsletter-popup-new-text {width:100%;display:block;float:left;padding:0 0 32px 16px;color:dodgerblue;position:relative;}
.newsletterPOPUP-info #newsletter-popup-new-text.newsletterFail, .newsletterPOPUP-info #newsletter-popup-new-text.newsletterFail:before {background:transparent;color:#ff5858 !important;}
.newsletterPOPUP-info #newsletter-popup-new-text.newsletterSuccess, .newsletterPOPUP-info #newsletter-popup-new-text.newsletterSuccess:before {background: transparent;color:#92cd1f !important;}
.newsletterPOPUP-info .donotshow {margin: 8px 0 0 0;line-height: 40px; font-size:11px; text-decoration: underline;display:inline-block;float:right;cursor:pointer;}
.newsletterPOPUP-info .donotshow:hover {color:black;}

/* -- Mobile Phones  -- */
@media screen and (max-width: 767.99px)
{
  #newsletterPOPUP.zflex-v {align-content: flex-start;align-items: flex-start;padding: 16px !important;}
	.newsletterPOPUPinner {background-position: right center !important;vertical-align: top !important;width: 100% !important;}
	.newsletterPOPUPinner .newsletterPOPUP-info {width:100% !important;}
	.newsletterPOPUP-info h2 {margin:0 !important; padding-right:40px !important;}
	.newsletterPOPUP-info p {font-size:13px;margin: 8px 0;}
	.newsletterPOPUP-info #newsletter-popup-new-text {padding: 0 16px 8px 16px; font-size:13px !important;}
	.newsletterPOPUP-form {margin-top:8px !important; padding-top:16px !important; padding-bottom:8px !important;}
	.newsletterPOPUP-form input {padding:4px !important;}
}
/* Purposefully empty > Moved to modules/css/accounts folder */
@charset "UTF-8";
/* Return Form */
.returnsItems {background: #fff;margin-bottom: 16px;outline: 1px solid #dadada;}
.returnsItems:hover {outline: 1px solid #999;}
.returnsItems:last-of-type { margin-bottom:0}
.returnsItems div {padding: 16px;align-items: center;line-height: 100%;}
.returnsItems div small {margin-right:16px}
.returnsName {flex-grow: 2; -webkit-flex-grow: 2;text-align: left;}
.returnsOption small { min-width: 112px}
.returnsItems select{flex-grow: 1; -webkit-flex-grow: 1;}
.returnsAddress > div >div {flex-grow: 1; -webkit-flex-grow: 1;margin: 16px;}
.returnsItems input[type=checkbox] {outline-color: #999;margin-top: 0px !important;}
.returnsAddress {}
.returnsAddress span { font-size: small}
@charset "UTF-8";
/* New Courier Integrated Shipping Chart */
.courierchart, .courierchart ul, .courierchart li {margin:0;padding:0;list-style: none;}
.courierchart>li {display:none;}
.courierchart>li.country-GB, .courierchart>li.postcoderegion {display:block;}
.regionheader { font-size:24px;display:none;}
.courierchart .loctitle {background:#ebebeb;border: 1px solid #ddd;margin: 16px 0; font-size:18px;}
.couriercountries>li {margin-bottom:24px;border-top: 0px !important;border-bottom: 0px !important; display:block; list-style: none;}
.courierservicewrap {font-size:0;padding-bottom: 24px !important;}
.courierservice {border-radius:4px; border:1px solid #ebebeb; background:#f2f3f4; width:calc(25% - 8px); font-size:12px;  vertical-align: top; margin-bottom: 8px !important; list-style:none;}
.courierservice:nth-of-type(4n+1) {margin-right:8px;}
.courierservice:nth-of-type(4n+2) {margin-left:2px; margin-right:6px;}
.courierservice:nth-of-type(4n+3) {margin-left:6px; margin-right:2px;}
.courierservice:nth-of-type(4n+4) {margin-left:8px;}
.courierservice li {display:block;list-style: none;}
.courierserviceheader, .courierservicecharge {padding: 8px; margin: 0 0 8px 0; border-bottom: 1px solid #ebebeb;}
.courierprice {color:#2e61a0;margin:0 0 8px 8px;}


/* FLAGS : New Courier Integrated Shipping Chart */
li[class*="country-"] .loctitle:before, li[data-iso*="iso-"] .loctitle:before {display:block;float:left;width:16px;height:11px;content: '';margin: 7px 12px 0 0;}
.loctitle:before {
    background-size: contain !important;
    background-color:#fff !important;
    background-repeat:no-repeat !important;
}
.country-GB .loctitle:before, li.postcoderegion .loctitle:before {background:url('/platformlayout/flags/4x3/gb.png') no-repeat #fff !important; }
.country-UA .loctitle:before {background:url('/platformlayout/flags/4x3/ua.png');}
.country-SK .loctitle:before {background:url('/platformlayout/flags/4x3/sk.png');}
.country-MT .loctitle:before {background:url('/platformlayout/flags/4x3/mt.png');}
.country-LT .loctitle:before {background:url('/platformlayout/flags/4x3/lt.png');}
.country-LI .loctitle:before {background:url('/platformlayout/flags/4x3/li.png');}
.country-IS .loctitle:before {background:url('/platformlayout/flags/4x3/is.png');}
.country-HU .loctitle:before {background:url('/platformlayout/flags/4x3/hu.png');}
.country-GR .loctitle:before {background:url('/platformlayout/flags/4x3/gr.png');}
.country-GI .loctitle:before {background:url('/platformlayout/flags/4x3/gi.png');}
.country-EE .loctitle:before {background:url('/platformlayout/flags/4x3/ee.png');}
.country-CZ .loctitle:before {background:url('/platformlayout/flags/4x3/cz.png');}
.country-CY .loctitle:before {background:url('/platformlayout/flags/4x3/cy.png');}
.country-HR .loctitle:before {background:url('/platformlayout/flags/4x3/hr.png');}
.country-BA .loctitle:before {background:url('/platformlayout/flags/4x3/ba.png');}
.country-BY .loctitle:before {background:url('/platformlayout/flags/4x3/by.png');}
.country-AT .loctitle:before {background:url('/platformlayout/flags/4x3/at.png');}
.country-ES .loctitle:before {background:url('/platformlayout/flags/4x3/es.png');}
.country-NL .loctitle:before {background:url('/platformlayout/flags/4x3/nl.png');}
.country-FR .loctitle:before {background:url('/platformlayout/flags/4x3/fr.png');}
.country-TR .loctitle:before {background:url('/platformlayout/flags/4x3/tr.png');}
.country-PT .loctitle:before {background:url('/platformlayout/flags/4x3/pt.png');}
.country-LU .loctitle:before {background:url('/platformlayout/flags/4x3/lu.png');}
.country-DK .loctitle:before {background:url('/platformlayout/flags/4x3/dk.png');}
.country-BE .loctitle:before {background:url('/platformlayout/flags/4x3/be.png');}
.country-CH .loctitle:before {background:url('/platformlayout/flags/4x3/ch.png');width: 11px !important;margin-right:17px;}
.country-SE .loctitle:before {background:url('/platformlayout/flags/4x3/se.png');}
.country-FI .loctitle:before {background:url('/platformlayout/flags/4x3/fi.png');}
.country-AU .loctitle:before {background:url('/platformlayout/flags/4x3/au.png');}
.country-NZ .loctitle:before {background:url('/platformlayout/flags/4x3/nz.png');}
.country-US .loctitle:before {background:url('/platformlayout/flags/4x3/us.png');}
.country-CA .loctitle:before {background:url('/platformlayout/flags/4x3/ca.png');}
.country-AF .loctitle:before {background:url('/platformlayout/flags/4x3/af.png');}
.country-AX .loctitle:before {background:url('/platformlayout/flags/4x3/ax.png');}
.country-AL .loctitle:before {background:url('/platformlayout/flags/4x3/al.png');}
.country-DZ .loctitle:before {background:url('/platformlayout/flags/4x3/dz.png');}
.country-AS .loctitle:before {background:url('/platformlayout/flags/4x3/as.png');}
.country-AD .loctitle:before {background:url('/platformlayout/flags/4x3/ad.png');}
.country-AO .loctitle:before {background:url('/platformlayout/flags/4x3/ao.png');}
.country-AI .loctitle:before {background:url('/platformlayout/flags/4x3/ai.png');}
.country-AQ .loctitle:before {background:url('/platformlayout/flags/4x3/aq.png');}
.country-AG .loctitle:before {background:url('/platformlayout/flags/4x3/ag.png');}
.country-AR .loctitle:before {background:url('/platformlayout/flags/4x3/ar.png');}
.country-AM .loctitle:before {background:url('/platformlayout/flags/4x3/am.png');}
.country-AW .loctitle:before {background:url('/platformlayout/flags/4x3/aw.png');}
.country-AZ .loctitle:before {background:url('/platformlayout/flags/4x3/az.png');}
.country-BS .loctitle:before {background:url('/platformlayout/flags/4x3/bs.png');}
.country-BH .loctitle:before {background:url('/platformlayout/flags/4x3/bh.png');}
.country-BD .loctitle:before {background:url('/platformlayout/flags/4x3/bd.png');}
.country-BB .loctitle:before {background:url('/platformlayout/flags/4x3/bb.png');}
.country-BZ .loctitle:before {background:url('/platformlayout/flags/4x3/bz.png');}
.country-BJ .loctitle:before {background:url('/platformlayout/flags/4x3/bj.png');}
.country-BM .loctitle:before {background:url('/platformlayout/flags/4x3/bm.png');}
.country-BT .loctitle:before {background:url('/platformlayout/flags/4x3/bt.png');}
.country-BO .loctitle:before {background:url('/platformlayout/flags/4x3/bo.png');}
.country-BW .loctitle:before {background:url('/platformlayout/flags/4x3/bw.png');}
.country-BV .loctitle:before {background:url('/platformlayout/flags/4x3/bv.png');}
.country-BR .loctitle:before {background:url('/platformlayout/flags/4x3/br.png');}
.country-IO .loctitle:before {background:url('/platformlayout/flags/4x3/io.png');}
.country-BN .loctitle:before {background:url('/platformlayout/flags/4x3/bn.png');}
.country-BG .loctitle:before {background:url('/platformlayout/flags/4x3/bg.png');}
.country-BF .loctitle:before {background:url('/platformlayout/flags/4x3/bf.png');}
.country-BI .loctitle:before {background:url('/platformlayout/flags/4x3/bi.png');}
.country-KH .loctitle:before {background:url('/platformlayout/flags/4x3/kh.png');}
.country-CM .loctitle:before {background:url('/platformlayout/flags/4x3/cm.png');}
.country-CV .loctitle:before {background:url('/platformlayout/flags/4x3/cv.png');}
.country-KY .loctitle:before {background:url('/platformlayout/flags/4x3/ky.png');}
.country-CF .loctitle:before {background:url('/platformlayout/flags/4x3/cf.png');}
.country-TD .loctitle:before {background:url('/platformlayout/flags/4x3/td.png');}
.country-CL .loctitle:before {background:url('/platformlayout/flags/4x3/cl.png');}
.country-CN .loctitle:before {background:url('/platformlayout/flags/4x3/cn.png');}
.country-CX .loctitle:before {background:url('/platformlayout/flags/4x3/cx.png');}
.country-CC .loctitle:before {background:url('/platformlayout/flags/4x3/cc.png');}
.country-CO .loctitle:before {background:url('/platformlayout/flags/4x3/co.png');}
.country-KM .loctitle:before {background:url('/platformlayout/flags/4x3/km.png');}
.country-CG .loctitle:before {background:url('/platformlayout/flags/4x3/cg.png');}
.country-CD .loctitle:before {background:url('/platformlayout/flags/4x3/cd.png');}
.country-CK .loctitle:before {background:url('/platformlayout/flags/4x3/ck.png');}
.country-CR .loctitle:before {background:url('/platformlayout/flags/4x3/cr.png');}
.country-CI .loctitle:before {background:url('/platformlayout/flags/4x3/ci.png');}
.country-CU .loctitle:before {background:url('/platformlayout/flags/4x3/cu.png');}
.country-DJ .loctitle:before {background:url('/platformlayout/flags/4x3/dj.png');}
.country-DM .loctitle:before {background:url('/platformlayout/flags/4x3/dm.png');}
.country-DO .loctitle:before {background:url('/platformlayout/flags/4x3/do.png');}
.country-EC .loctitle:before {background:url('/platformlayout/flags/4x3/ec.png');}
.country-EG .loctitle:before {background:url('/platformlayout/flags/4x3/eg.png');}
.country-SV .loctitle:before {background:url('/platformlayout/flags/4x3/sv.png');}
.country-GQ .loctitle:before {background:url('/platformlayout/flags/4x3/gq.png');}
.country-ER .loctitle:before {background:url('/platformlayout/flags/4x3/er.png');}
.country-ET .loctitle:before {background:url('/platformlayout/flags/4x3/et.png');}
.country-FO .loctitle:before {background:url('/platformlayout/flags/4x3/fo.png');}
.country-FJ .loctitle:before {background:url('/platformlayout/flags/4x3/fj.png');}
.country-GF .loctitle:before {background:url('/platformlayout/flags/4x3/gf.png');}
.country-PF .loctitle:before {background:url('/platformlayout/flags/4x3/pf.png');}
.country-TF .loctitle:before {background:url('/platformlayout/flags/4x3/tf.png');}
.country-GA .loctitle:before {background:url('/platformlayout/flags/4x3/ga.png');}
.country-GM .loctitle:before {background:url('/platformlayout/flags/4x3/gm.png');}
.country-GE .loctitle:before {background:url('/platformlayout/flags/4x3/ge.png');}
.country-GH .loctitle:before {background:url('/platformlayout/flags/4x3/gh.png');}
.country-GD .loctitle:before {background:url('/platformlayout/flags/4x3/gd.png');}
.country-GP .loctitle:before {background:url('/platformlayout/flags/4x3/gp.png');}
.country-GU .loctitle:before {background:url('/platformlayout/flags/4x3/gu.png');}
.country-GT .loctitle:before {background:url('/platformlayout/flags/4x3/gt.png');}
.country-GN .loctitle:before {background:url('/platformlayout/flags/4x3/gn.png');}
.country-GW .loctitle:before {background:url('/platformlayout/flags/4x3/gw.png');}
.country-GY .loctitle:before {background:url('/platformlayout/flags/4x3/gy.png');}
.country-HT .loctitle:before {background:url('/platformlayout/flags/4x3/ht.png');}
.country-HM .loctitle:before {background:url('/platformlayout/flags/4x3/hm.png');}
.country-HN .loctitle:before {background:url('/platformlayout/flags/4x3/hn.png');}
.country-HK .loctitle:before {background:url('/platformlayout/flags/4x3/hk.png');}
.country-IN .loctitle:before {background:url('/platformlayout/flags/4x3/in.png');}
.country-ID .loctitle:before {background:url('/platformlayout/flags/4x3/id.png');}
.country-IR .loctitle:before {background:url('/platformlayout/flags/4x3/ir.png');}
.country-IQ .loctitle:before {background:url('/platformlayout/flags/4x3/iq.png');}
.country-IE .loctitle:before {background:url('/platformlayout/flags/4x3/ie.png');}
.country-IL .loctitle:before {background:url('/platformlayout/flags/4x3/il.png');}
.country-IT .loctitle:before {background:url('/platformlayout/flags/4x3/it.png');}
.country-JM .loctitle:before {background:url('/platformlayout/flags/4x3/jm.png');}
.country-JP .loctitle:before {background:url('/platformlayout/flags/4x3/jp.png');}
.country-JO .loctitle:before {background:url('/platformlayout/flags/4x3/jo.png');}
.country-KZ .loctitle:before {background:url('/platformlayout/flags/4x3/kz.png');}
.country-KE .loctitle:before {background:url('/platformlayout/flags/4x3/ke.png');}
.country-KI .loctitle:before {background:url('/platformlayout/flags/4x3/ki.png');}
.country-KP .loctitle:before {background:url('/platformlayout/flags/4x3/kp.png');}
.country-KR .loctitle:before {background:url('/platformlayout/flags/4x3/kr.png');}
.country-KW .loctitle:before {background:url('/platformlayout/flags/4x3/kw.png');}
.country-KG .loctitle:before {background:url('/platformlayout/flags/4x3/kg.png');}
.country-LA .loctitle:before {background:url('/platformlayout/flags/4x3/la.png');}
.country-LV .loctitle:before {background:url('/platformlayout/flags/4x3/lv.png');}
.country-LB .loctitle:before {background:url('/platformlayout/flags/4x3/lb.png');}
.country-LS .loctitle:before {background:url('/platformlayout/flags/4x3/ls.png');}
.country-LR .loctitle:before {background:url('/platformlayout/flags/4x3/lr.png');}
.country-LY .loctitle:before {background:url('/platformlayout/flags/4x3/ly.png');}
.country-MO .loctitle:before {background:url('/platformlayout/flags/4x3/mo.png');}
.country-MK .loctitle:before {background:url('/platformlayout/flags/4x3/mk.png');}
.country-MG .loctitle:before {background:url('/platformlayout/flags/4x3/mg.png');}
.country-MW .loctitle:before {background:url('/platformlayout/flags/4x3/mw.png');}
.country-MY .loctitle:before {background:url('/platformlayout/flags/4x3/my.png');}
.country-MV .loctitle:before {background:url('/platformlayout/flags/4x3/mv.png');}
.country-ML .loctitle:before {background:url('/platformlayout/flags/4x3/ml.png');}
.country-MH .loctitle:before {background:url('/platformlayout/flags/4x3/mh.png');}
.country-MQ .loctitle:before {background:url('/platformlayout/flags/4x3/mq.png');}
.country-MR .loctitle:before {background:url('/platformlayout/flags/4x3/mr.png');}
.country-MU .loctitle:before {background:url('/platformlayout/flags/4x3/mu.png');}
.country-YT .loctitle:before {background:url('/platformlayout/flags/4x3/yt.png');}
.country-MX .loctitle:before {background:url('/platformlayout/flags/4x3/mx.png');}
.country-FM .loctitle:before {background:url('/platformlayout/flags/4x3/fm.png');}
.country-MD .loctitle:before {background:url('/platformlayout/flags/4x3/md.png');}
.country-MC .loctitle:before {background:url('/platformlayout/flags/4x3/mc.png');}
.country-MN .loctitle:before {background:url('/platformlayout/flags/4x3/mn.png');}
.country-MS .loctitle:before {background:url('/platformlayout/flags/4x3/ms.png');}
.country-MA .loctitle:before {background:url('/platformlayout/flags/4x3/ma.png');}
.country-MZ .loctitle:before {background:url('/platformlayout/flags/4x3/mz.png');}
.country-MM .loctitle:before {background:url('/platformlayout/flags/4x3/mm.png');}
.country-NA .loctitle:before {background:url('/platformlayout/flags/4x3/na.png');}
.country-NR .loctitle:before {background:url('/platformlayout/flags/4x3/nr.png');}
.country-NP .loctitle:before {background:url('/platformlayout/flags/4x3/np.png');}
.country-AN .loctitle:before {background:url('/platformlayout/flags/4x3/an.png');}
.country-NC .loctitle:before {background:url('/platformlayout/flags/4x3/nc.png');}
.country-NI .loctitle:before {background:url('/platformlayout/flags/4x3/ni.png');}
.country-NE .loctitle:before {background:url('/platformlayout/flags/4x3/ne.png');}
.country-NG .loctitle:before {background:url('/platformlayout/flags/4x3/ng.png');}
.country-NU .loctitle:before {background:url('/platformlayout/flags/4x3/nu.png');}
.country-NF .loctitle:before {background:url('/platformlayout/flags/4x3/nf.png');}
.country-MP .loctitle:before {background:url('/platformlayout/flags/4x3/mp.png');}
.country-NO .loctitle:before {background:url('/platformlayout/flags/4x3/no.png');}
.country-OM .loctitle:before {background:url('/platformlayout/flags/4x3/om.png');}
.country-PK .loctitle:before {background:url('/platformlayout/flags/4x3/pk.png');}
.country-PW .loctitle:before {background:url('/platformlayout/flags/4x3/pw.png');}
.country-PS .loctitle:before {background:url('/platformlayout/flags/4x3/ps.png');}
.country-PA .loctitle:before {background:url('/platformlayout/flags/4x3/pa.png');}
.country-PG .loctitle:before {background:url('/platformlayout/flags/4x3/pg.png');}
.country-PY .loctitle:before {background:url('/platformlayout/flags/4x3/py.png');}
.country-PE .loctitle:before {background:url('/platformlayout/flags/4x3/pe.png');}
.country-PH .loctitle:before {background:url('/platformlayout/flags/4x3/ph.png');}
.country-PN .loctitle:before {background:url('/platformlayout/flags/4x3/pn.png');}
.country-PL .loctitle:before {background:url('/platformlayout/flags/4x3/pl.png');}
.country-PR .loctitle:before {background:url('/platformlayout/flags/4x3/pr.png');}
.country-QA .loctitle:before {background:url('/platformlayout/flags/4x3/qa.png');}
.country-RE .loctitle:before {background:url('/platformlayout/flags/4x3/re.png');}
.country-RO .loctitle:before {background:url('/platformlayout/flags/4x3/ro.png');}
.country-RU .loctitle:before {background:url('/platformlayout/flags/4x3/ru.png');}
.country-RW .loctitle:before {background:url('/platformlayout/flags/4x3/rw.png');}
.country-SH .loctitle:before {background:url('/platformlayout/flags/4x3/sh.png');}
.country-KN .loctitle:before {background:url('/platformlayout/flags/4x3/kn.png');}
.country-LC .loctitle:before {background:url('/platformlayout/flags/4x3/lc.png');}
.country-PM .loctitle:before {background:url('/platformlayout/flags/4x3/pm.png');}
.country-VC .loctitle:before {background:url('/platformlayout/flags/4x3/vc.png');}
.country-WS .loctitle:before {background:url('/platformlayout/flags/4x3/ws.png');}
.country-SM .loctitle:before {background:url('/platformlayout/flags/4x3/sm.png');}
.country-ST .loctitle:before {background:url('/platformlayout/flags/4x3/st.png');}
.country-SA .loctitle:before {background:url('/platformlayout/flags/4x3/sa.png');}
.country-SN .loctitle:before {background:url('/platformlayout/flags/4x3/sn.png');}
.country-CS .loctitle:before {background:url('/platformlayout/flags/4x3/cs.png');}
.country-SC .loctitle:before {background:url('/platformlayout/flags/4x3/sc.png');}
.country-SL .loctitle:before {background:url('/platformlayout/flags/4x3/sl.png');}
.country-SG .loctitle:before {background:url('/platformlayout/flags/4x3/sg.png');}
.country-SI .loctitle:before {background:url('/platformlayout/flags/4x3/si.png');}
.country-SB .loctitle:before {background:url('/platformlayout/flags/4x3/sb.png');}
.country-SO .loctitle:before {background:url('/platformlayout/flags/4x3/so.png');}
.country-ZA .loctitle:before {background:url('/platformlayout/flags/4x3/za.png');}
.country-GS .loctitle:before {background:url('/platformlayout/flags/4x3/gs.png');}
.country-LK .loctitle:before {background:url('/platformlayout/flags/4x3/lk.png');}
.country-SD .loctitle:before {background:url('/platformlayout/flags/4x3/sd.png');}
.country-SR .loctitle:before {background:url('/platformlayout/flags/4x3/sr.png');}
.country-SJ .loctitle:before {background:url('/platformlayout/flags/4x3/sj.png');}
.country-SZ .loctitle:before {background:url('/platformlayout/flags/4x3/sz.png');}
.country-SY .loctitle:before {background:url('/platformlayout/flags/4x3/sy.png');}
.country-TW .loctitle:before {background:url('/platformlayout/flags/4x3/tw.png');}
.country-TJ .loctitle:before {background:url('/platformlayout/flags/4x3/tj.png');}
.country-TZ .loctitle:before {background:url('/platformlayout/flags/4x3/tz.png');}
.country-TH .loctitle:before {background:url('/platformlayout/flags/4x3/th.png');}
.country-TL .loctitle:before {background:url('/platformlayout/flags/4x3/tl.png');}
.country-TG .loctitle:before {background:url('/platformlayout/flags/4x3/tg.png');}
.country-TK .loctitle:before {background:url('/platformlayout/flags/4x3/tk.png');}
.country-TO .loctitle:before {background:url('/platformlayout/flags/4x3/to.png');}
.country-TT .loctitle:before {background:url('/platformlayout/flags/4x3/tt.png');}
.country-TN .loctitle:before {background:url('/platformlayout/flags/4x3/tn.png');}
.country-TM .loctitle:before {background:url('/platformlayout/flags/4x3/tm.png');}
.country-TC .loctitle:before {background:url('/platformlayout/flags/4x3/tc.png');}
.country-TV .loctitle:before {background:url('/platformlayout/flags/4x3/tv.png');}
.country-UG .loctitle:before {background:url('/platformlayout/flags/4x3/ug.png');}
.country-AE .loctitle:before {background:url('/platformlayout/flags/4x3/ae.png');}
.country-UM .loctitle:before {background:url('/platformlayout/flags/4x3/um.png');}
.country-UY .loctitle:before {background:url('/platformlayout/flags/4x3/uy.png');}
.country-UZ .loctitle:before {background:url('/platformlayout/flags/4x3/uz.png');}
.country-VU .loctitle:before {background:url('/platformlayout/flags/4x3/vu.png');}
.country-VA .loctitle:before {background:url('/platformlayout/flags/4x3/va.png');}
.country-VE .loctitle:before {background:url('/platformlayout/flags/4x3/ve.png');}
.country-VN .loctitle:before {background:url('/platformlayout/flags/4x3/vn.png');}
.country-VG .loctitle:before {background:url('/platformlayout/flags/4x3/vg.png');}
.country-VI .loctitle:before {background:url('/platformlayout/flags/4x3/vi.png');}
.country-WF .loctitle:before {background:url('/platformlayout/flags/4x3/wf.png');}
.country-EH .loctitle:before {background:url('/platformlayout/flags/4x3/eh.png');}
.country-YE .loctitle:before {background:url('/platformlayout/flags/4x3/ye.png');}
.country-ZM .loctitle:before {background:url('/platformlayout/flags/4x3/zm.png');}
.country-ZW .loctitle:before {background:url('/platformlayout/flags/4x3/zw.png');}
.country-DE .loctitle:before {background:url('/platformlayout/flags/4x3/de.png');}



/* Courier Search */
.courierCountrySearch {float:left;border:1px solid #ebebeb;line-height:48px;position:relative; font-size:12px;}
.courierCountrySearch>li, .courierCountrySearch>span {display:block;float:left; list-style: none;padding:0 16px;}
.courierCountrySearch li {border-left:1px solid #ebebeb;border-right:1px solid #ebebeb;background:#f2f3f4;}
.courierCountrySearch li[class*="country-"] .loctitle:before, .courierCountrySearch li[data-iso*="iso-"] .loctitle:before {margin:19px 12px 0 0;}
.courierCountrySearch span { font-size:12px;}
.courierCountrySearch span.loctitle {text-transform: capitalize;}
.courierCountrySearch-select {background:#2e61a0; color:white; cursor:pointer;}
.courierCountrySelection { background:rgba(0,0,0,0.65); width:100%;height:100%; position: fixed; top:0; left:0; z-index:100000; }
.courierCountrySelection-inner { background:white; width:425px; max-width:100%; position:relative; float:left; }
.courierCountrySelection-head {background:#ddd; line-height: 24px;}
.courierCountrySelection-close {float:right; font-size:24px;cursor: pointer;}
.courierCountrySelection-search {border-bottom:1px solid #ebebeb; position: relative;}
.courierCountrySelection-search input {appearance:none;-webkit-appearance:none;-moz-appearance:none; display:block;width:100%;line-height:48px;border:1px solid #999; outline:none !important; padding:0 64px 0 16px;}
input[type="search"]::-webkit-search-cancel-button {-webkit-appearance: none;display: none;}
.courierCountrySelection-search .emptysearch {position: absolute;top: 17px;right: 17px;display: block;width: 48px;height: 48px;line-height: 48px;text-align: center; cursor: pointer;cursor: pointer;}
.courierCountrySelection-body { max-height:60vh; overflow-y:auto; }
.courierCountrySelection-body li {list-style:none;display:block;border-bottom:1px solid #ebebeb;cursor: pointer;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.courierCountrySelection-body li.hideLocationCourier {display:none;}
.courierCountrySelection-body li:hover {background:#f4f5f7;}

@media screen and (max-width: 321px)
{

	/* Courier Search */
	.courierCountrySearch>li, .courierCountrySearch>span {width:100% !important;}
	.courierchart .loctitle {font-size:16px;}
	.courierservice {width:100% !important;}
	.courierservice:nth-of-type(4n+1) {margin-right:0 !important;}
	.courierservice:nth-of-type(4n+2) {margin-left:0 !important; margin-right:0 !important;}
	.courierservice:nth-of-type(4n+3) {margin-left:0 !important; margin-right:0 !important;}
	.courierservice:nth-of-type(4n+4) {margin-left:0 !important;}
	.courierCountrySearch {line-height:32px !important; font-size:14px;}
	.courierCountrySearch>li, .courierCountrySearch>span {padding:0 8px !important;width:50% !important;}
	.courierCountrySearch li {border-left:1px solid #ebebeb;border-right:0 !important;background:#f2f3f4;}
	.courierCountrySearch li span:before {margin:11px 12px 0 0 !important;}
	.courierCountrySearch span.courierCountrySearch-select {width:100% !important;text-align:center; height: 48px;line-height: 48px;font-size: 1.2em;}
	.courierCountrySelection-search .emptysearch {top:9px !important;right:9px !important;}
	.courierCountrySearch>li, .courierCountrySearch>span {width:100% !important;}
	.courierchart .loctitle {font-size:16px;}

}

/* -- Mobile Phones  -- */
@media screen and (max-width: 767.99px)
{
  /* Courier Search */
	.courierservice {width:100% !important;}
	.courierservice:nth-of-type(4n+1) {margin-right:0 !important;}
	.courierservice:nth-of-type(4n+2) {margin-left:0 !important; margin-right:0 !important;}
	.courierservice:nth-of-type(4n+3) {margin-left:0 !important; margin-right:0 !important;}
	.courierservice:nth-of-type(4n+4) {margin-left:0 !important;}
	.courierCountrySearch {line-height:32px !important; font-size:14px;}
	.courierCountrySearch>li, .courierCountrySearch>span {padding:0 8px !important;width:50% !important;}
	.courierCountrySearch li {border-left:1px solid #ebebeb;border-right:0 !important;background:#f2f3f4;}
	.courierCountrySearch li span:before {margin:11px 12px 0 0 !important;}
	.courierCountrySearch span.courierCountrySearch-select {width:100% !important;text-align:center; height: 48px;line-height: 48px;font-size: 1.2em;}
	.courierCountrySelection-search .emptysearch {top:9px !important;right:9px !important;}
}
/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.99px)
{
	/* Courier Search */
	.courierservice {width:calc(50% - 8px) !important;}
	.courierservice:nth-of-type(4n+1), .courierservice:nth-of-type(4n+3) {margin-left:0 !important; margin-right:4px !important;}
	.courierservice:nth-of-type(4n+2), .courierservice:nth-of-type(4n+4) {margin-left:4px !important; margin-right:0 !important;}
}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) and (max-width : 1439.99px)
{
	/* Shipping Page */
	.courierservice {width:calc(50% - 8px) !important;}
	.courierservice:nth-of-type(4n+1), .courierservice:nth-of-type(4n+3) {margin-left:0 !important; margin-right:4px !important;}
	.courierservice:nth-of-type(4n+2), .courierservice:nth-of-type(4n+4) {margin-left:4px !important; margin-right:0 !important;}
}
@charset "UTF-8";
/* -- Shopping Cart */
.clWarning5 {
    color: #ff5858;
}

.ContentTableHeaderNone {
    margin: 16px 0;
}

    .ContentTableHeaderNone a.cOutNow {
        float: right;
    }

.ContentTableHeader {
}

.basketOptionsTopLeft h3 {
    font-size: 1em;
    text-decoration: none;
    padding: 0 1em 1em 0;
    margin: 0 0 0.5em 0;
}

.updateQty {
    margin: 1em 0 0 0;
    float: left;
    width: 100%
}

.bskRewardsBox {
    margin: 0;
    background: #E9F6DB;
    margin: 0 0 8px 0;
    border: 1px solid #c6d4b6;
}

.voucherBox {
    margin: 0
}

    .voucherBox h3 {
        font-size: 1em;
        text-decoration: none;
        padding: 0 1em 1em 0;
        margin: 0 0 0.5em 0;
    }

    .voucherBox .promoField {
        position: relative;
        margin-bottom: 16px;
        width: 100%;
    }

        .voucherBox .promoField p {
            margin-bottom: 0;
        }

    .voucherBox .formSingle {
        flex-grow: 1;
        width: initial !important;
    }

.shopDelCont {
}

.shippingCostMessage .cards {
    display: block;
    width: 100%;
    float: left;
    clear: both;
}

    .shippingCostMessage .cards div {
        float: left !important;
        margin: 0 0.5em 0.5em 0 !important;
    }

.metaPackDespatchMessage {
    outline: 1px solid #d0e6f2;
    background: #e6f3fa;
    padding: 16px;
    float: left;
    width: 100%;
    font-size: smaller;
}

    .metaPackDespatchMessage span:before {
        content: "\e91c";
        margin: 0 1em 0 0;
        font-family: 'feather';
        color: #93c4e0
    }

.dpdMessage {
    outline: 1px solid #d0e6f2;
    background: #e6f3fa;
    padding: 16px;
    float: left;
    width: 100%;
    font-size: smaller;
    margin-bottom: 14px
}

    .dpdMessage img {
        float: left;
        margin-bottom: 14px;
    }

.metaPack {
}

    .metaPack ul {
        margin: 1em 0;
        padding: 0;
        display: block;
        float: left;
        width: 100%;
    }

        .metaPack ul li {
            list-style: none;
            display: block;
            clear: both;
            padding: 1em 0;
            float: left;
            width: 100%;
            position: relative;
            border-bottom: 1px solid #e1e1e1;
        }

            .metaPack ul li .metaPackService {
                padding: 0 6em 0 0;
            }

            .metaPack ul li .metaPackName {
                padding-bottom: 8px;
            }

            .metaPack ul li .metaPackMessage {
                font-size: 0.8em;
                color: red;
            }

                .metaPack ul li .metaPackMessage span {
                    color: black;
                }

            .metaPack ul li .metaPackSelect {
                float: right;
                padding: 0;
                border-radius: 50%;
                width: 58px;
                height: 58px;
                text-align: center;
                line-height: 41px;
                color: cornflowerblue;
                position: absolute;
                top: 1em;
                right: 0;
                font-size: 1em;
                text-transform: uppercase;
            }

.orderCartWrap {
    margin-bottom: 8px;
}

.orderTotal {
    float: left;
    display: block;
    margin: 0;
    width: 100%;
}

    .orderTotal .ContentTableHeader {
        text-align: left;
        font-family: 'citrfontbold';
    }

    .orderTotal table {
        float: left;
        width: auto !important;
    }

    .orderTotal tr {
        width: 100%;
    }

    .orderTotal tr, .orderTotal td {
        float: left;
        display: block;
        max-width: 100% !important;
        text-align: left;
    }

        .orderTotal tr:nth-of-type(1) .Order-Total-text {
            font-weight: 600;
            color: #484848;
            outline: 0;
            font-weight: normal;
            font-size: 18px;
            line-height: 1.2em;
            margin: 0 0 16px 0
        }

.Order-Total-text {
    text-align: left !important;
    display: block;
    float: left;
    width: auto !important;
    font-size: 15px;
    line-height: 21px;
}

.buttonChkOut {
    color: #fff !important;
    border: 0 !important;
    outline: 0 !important;
    float: right;
    width: 100%;
}

    .buttonChkOut:hover {
    }

    .buttonChkOut#paypExpButton {
        background: url('/ssl/secure/resources/paypal-logo.png') #ffc439;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 104px;
        text-indent: -9999px;
        overflow: hidden;
    }

        .buttonChkOut#paypExpButton:hover {
            box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.05);
        }

#payment-request-button:empty {
    display: none;
}

.mesageCC, .messageCPlus, .messageUK, .messageWorld {
    color: #009ddc;
}

    .mesageCC span, .messageCPlus span, .messageUK span, .messageWorld span {
        margin: 0;
        font-size: 1em;
    }

.messageHighlight p {
    display: inline-block;
}

.bottomBasketButton {
}

div[class*="isoFlag"]:before {
    display: block;
    float: left;
    width: 16px;
    height: 11px;
    content: '';
    margin: 7px 12px 0 0;
}

.currencyCode {
    font-size: 10px
}

#GBP:before {
    background: url('/platformlayout/flags/4x3/gb.png') no-repeat #fff !important;
    background-size: contain !important;
}

#USD:before {
    background: url('/platformlayout/flags/4x3/us.png') no-repeat #fff !important;
    background-size: contain !important;
}

#EUR:before {
    background: url('/platformlayout/flags/4x3/eu.png') no-repeat #fff !important;
    background-size: contain !important;
}

#AUD:before {
    background: url('/platformlayout/flags/4x3/au.png') no-repeat #fff !important;
    background-size: contain !important;
}

#SEK:before {
    background: url('/platformlayout/flags/4x3/se.png') no-repeat #fff !important;
    background-size: contain !important;
}

#NOK:before {
    background: url('/platformlayout/flags/4x3/no.png') no-repeat #fff !important;
    background-size: contain !important;
}

#DKK:before {
    background: url('/platformlayout/flags/4x3/dk.png') no-repeat #fff !important;
    background-size: contain !important;
}

#NZD:before {
    background: url('/platformlayout/flags/4x3/nz.png') no-repeat #fff !important;
    background-size: contain !important;
}

#JPY:before {
    background: url('/platformlayout/flags/4x3/jp.png') no-repeat #fff !important;
    background-size: contain !important;
}

#CHF:before {
    background: url('/platformlayout/flags/4x3/ch.png') no-repeat #fff !important;
    background-size: contain !important;
}

#ISK:before {
    background: url('/platformlayout/flags/4x3/is.png') no-repeat #fff !important;
    background-size: contain !important;
}

#CAD:before {
    background: url('/platformlayout/flags/4x3/ca.png') no-repeat #fff !important;
    background-size: contain !important;
}

.bottomBasketButton a {
    text-align: center;
    width: 50%;
}

.buttonT3 {
    float: right;
    color: #fff !important;
    background: #484848 !important;
    border: 0 !important;
    outline: 0 !important
}

    .buttonT3:hover {
        background: #181b1d !important;
        color: white !important;
        border: 0 !important;
        outline: 0 !important
    }

.borderBottom {
    border-bottom: 1px solid #e6e8eb
}

.borderLeft {
    border-left: 1px solid #e6e8eb
}

.borderRight {
    border-right: 1px solid #e6e8eb
}

.floatRight {
    float: right !important
}

.bottomSpacing {
    padding: 0 0 32px 0;
    margin: 0 0 32px 0;
}

.nowPrice-repeater, .standardPrice-repeater, .percentOff-repeater, span.nowPrice-betterSearch, span.standardPrice-betterSearch, span.percentOff-betterSearch {
}

div.filterReorderCtr {
    margin: 0;
}

.col-80px {
    width: 80px;
    height: 80px;
    display: inline-block;
    margin: 16px;
    float: none;
}

.borderCart {
    border: 1px solid #d4d4d4
}

.bskCTAMessages .col-1 {
    margin: 0 0 8px 0;
}

    .bskCTAMessages .col-1:last-child {
        margin: 0;
    }

    .bskCTAMessages .col-1 span {
        float: left;
        color: yellowgreen;
        line-height: 24px;
        width: 24px;
        margin: 0 4px 0 0;
        text-align: center;
        font-size: 13px;
    }

        .bskCTAMessages .col-1 span.fa-lock {
            color: tomato
        }

    .bskCTAMessages .col-1 p {
        float: left;
        margin: 0;
        font-size: 13px;
        line-height: 24px;
        display: contents;
    }

.currencyShoppingCart ul li {
    float: none;
    display: inline-block;
    list-style: none;
    margin: 0 16px 16px 0;
    ;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.indicateShoppingCart {
    display: block;
    width: 100%;
    font-size: 8.5pt;
    font-weight: normal;
    color: #666;
    margin: 0;
    clear: both;
    float: left
}

.currencyConverted {
    font-size: inherit !important;
    float: left;
}

.basketPayPalBtn::after {
    content: var(--12-shopping-cart-paypal-checkout);
}

.supportcards img {
    margin: 8px
}

/* -- Mobile Phones  -- */
@media screen and (max-width: 768px) {
    /* Shopping Cart */
    .ContentTableHeaderNone a {
        margin-bottom: 1em;
        width: 100%;
        text-align: center
    }

    .voucherBox .promoField > .zflex {
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        align-items: stretch;
        -webkit-align-items: stretch;
        -ms-align-items: stretch;
        -moz-align-items: stretch;
    }

    .metaPack ul li .metaPackMessage span {
        color: black;
        display: block
    }

    .metaPack ul li .metaPackSelect {
        top: 17px
    }

    .updateQty {
        float: none;
    }

        .updateQty span {
            margin: 0.5em 0
        }

        .updateQty span, .updateQty a {
            width: 100%;
            text-align: center
        }

    .orderTotal a {
        display: none;
    }

    .orderTotal table {
        float: none;
        width: 100% !important;
    }

    .Order-Total-text {
        display: none;
    }

    .orderTotal tr:nth-of-type(3), .orderTotal tr:nth-of-type(3) td.Order-Total-text:nth-of-type(3), .orderTotal tr:nth-of-type(3) td.Order-Total-text:nth-of-type(4) {
        display: block;
        width: 100% !important;
        margin: 0 !Important;
        text-align: center !important;
    }

    .mesageCC, .messageCPlus, .messageUK, .messageWorld {
        text-align: left;
    }

        .mesageCC span, .messageCPlus span, .messageUK span, .messageWorld span {
            margin: 0;
            font-size: 1em;
        }

        .mesageCC p, .messageCPlus p, .messageUK p, .messageWorld p {
            display: inline-block;
            margin-left: 0.5em;
        }

    .bottomBasketButton a {
        text-align: center;
        width: 100%;
    }
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.9px) {
    /* Shopping Cart shopping-cart-main-content*/
    .FullCartWrap .col-66p,
    .FullCartWrap .col-3,
    .shopping-cart-main-content .col-66p,
    .shopping-cart-main-content .col-3 {
        width: 100% !important;
        padding: 16px 0 0;
    }
}

.autoCheckoutButton[disabled] {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray; /* IE 6-9 */
    opacity: 0.2;
}


/* TODO Remove this todo once Steph or Ben K has checked the CSS */
.rewards-item-estimate {
    font-size: small;
    display: inline-block;
    color: #4E9A14;
    font-weight: 400;
}

.rewards-basket-totalpanel {
    font-size: 14px;
    background-color: #DBE9D6;
    display: block;
    padding-right: 10px;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 70px;
    margin-left: 25px;
    margin-right: 25px;
}
.rewards-basket-title {
    font-weight: bold
}
.rewards-basket-total {
    color: #4E9A14;
}

.rewards-basket-totalexplain {
    font-size: small;
}
@charset "UTF-8";
/* Site Map  */
.siteMap .NodeLevel0 {
    margin: 0 0 32px 0;
    display: block;
    float: left;
    flex-direction: row;
    padding: 0 !important;
    width: 100%;
    align-content: flex-start;
    flex-wrap: wrap;
    border: none !important;
}

    .siteMap .NodeLevel0 > a:after {
        display: none !important;
    }

    .siteMap .NodeLevel0 > div {
        display: inline-flex !important;
    }

    .siteMap .NodeLevel0 > a {
        margin: 0 0 8px 0;
        padding: 0;
        cursor: default;
        pointer-events: none;
        font-size: 1.33em;
        flex-wrap: wrap;
        width: 100%;
        text-align: left;
    }

        .siteMap .NodeLevel0 > a:before, .siteMap .NodeLevel0 > a:after {
            display: none;
        }

        .siteMap .NodeLevel0 > a > span {
            letter-spacing: 1px;
            color: #333;
        }

            .siteMap .NodeLevel0 > a > span:after {
                display: none;
            }

    .siteMap .NodeLevel0 > .CSSFacetNavModules {
        position: relative;
        top: auto;
        display: -webkit-box !important;
        display: -moz-box !important;
        display: -ms-flexbox !important;
        display: -webkit-flex !important;
        display: flex !important;
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-height: initial !important;
        padding: 0 0 16px 0;
        background: white;
        z-index: initial;
        opacity: 1 !important;
    }

.siteMap .NodeLevel1 {
    width: 50% !important;
    padding: 8px 0;
    margin: 0;
}

    .siteMap .NodeLevel1 > a {
        margin: 0 0 8px 0;
        padding: 0;
        text-transform: capitalize;
        letter-spacing: normal;
        font-size: medium;
    }

.siteMap .NodeLevel2 {
    width: 100%;
    margin: 0 0 4px 0 !important;
}

    .siteMap .NodeLevel2 > a {
        color: #333;
        margin: 0 !important;
        font-size: smaller;
    }


/* -- Mobile Phones & iPads (portrait and landscape) -- */
@media screen and (max-width: 768px) {
    .siteMap > ul > li {
        width: 100%;
    }

    .siteMap .NodeLevel0 {
        float: left;
        width: 100% !important;
        margin: 0;
    }

        .siteMap .NodeLevel0 > a {
            background: black;
            color: white;
            padding: 8px;
            margin: 0;
        }

    .siteMap .NodeLevel1 {
        width: 100% !important;
    }

    .siteMap .NodeLevel2 > a {
        font-size: small;
    }
}


@media screen and (min-width: 425.1px) and (max-width: 768px) {
    .siteMap .NodeLevel1 > .CSSFacetNavModules {
        -moz-column-count: 3;
        -moz-column-gap: 3;
        -webkit-column-count: 3;
        -webkit-column-gap: 3;
        column-count: 3;
    }
}@charset "UTF-8";
/*  Starbuys -------------------------------------------------------------------------------------------*/
.taContainerSmall {
    background: #FFFFFF;
    padding: 0px !important;
}

.taContentContainerSmall {
    text-align: left;
}

.taTitle {
    width: 100%;
    border-bottom: 1px solid #E9D9EA;
    text-transform: uppercase;
    font-size: smaller !important;
    letter-spacing: 2px;
}

.taImg {
    position: relative;
    overflow: hidden;
    position: relative;
    overflow: hidden;
}

    .taImg span {
        position: absolute;
        background: #BD80BD;
        left: -8px;
        top: -40px;
        padding: 48px 22px;
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        transform: rotate(45deg);
    }

        .taImg span:after {
            content: "\f02b";
            font: 14px FontAwesome;
            color: #FFFFFF;
            position: absolute;
            left: 22px;
            top: 44px;
            -ms-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

    .taImg img {
        float: left;
        width: 100% !important;
        margin-bottom: 16px;
    }

.taTogeather, .taSeperately {
    padding: 0;
    list-style: none;
}

    .taTogeather li, .taSeperately li {
        margin: 16px 0px;
    }

.taTogeather {
    color: #a664a8;
    line-height: 180%;
}

    .taTogeather span, .taSeperately span {
        line-height: 150%;
        width: 63%;
        display: inline-block;
        vertical-align: text-top;
        padding: 0;
        margin: 0;
    }

        .taTogeather span:nth-child(2), .taSeperately span:nth-child(2) {
            padding: 0 16px;
            width: 34%;
        }

.taSeperately {
    font-size: smaller;
    line-height: 150%;
    line-height: 225%; /* padding: 0 16px; */
}

.taContentContainerSmall h2 {
    margin: 16px 0;
}

.taContentContainerSmall h3 {
    color: #a664a8;
    font-size: 18px;
    padding: 0 0 16px 0;
    margin: 0;
    text-align: left;
}

.taPromoTitleMultiItem {
    padding: 0 0 16px 0;
    margin: 0 0 16px 0;
    color: rgba(255, 255, 255, 0.49);
}

    .taPromoTitleMultiItem span {
        color: rgb(9, 9, 11);
        line-height: 200%;
    }

.taPromoTextMultiItem, .taPromoTextMultiItem p {
    margin: 0;
    padding: 32px 0;
    color: #BC8BBE;
    margin: 0 auto;
}

.taAddMessage {
    display: block;
    clear: both;
}

#prodInfoLeft {
    border-right: none;
}

.flexsliderMIVThumbnails {
    display: none;
}

.flexsliderMIV .flex-direction-nav {
    border-bottom: 1px solid #e1e1e1;
    display: none;
}

.detailReviewFAQ > .col-2:nth-of-type(1) {
    border-bottom: 1px solid #e1e1e1;
    border-right: none;
    margin: 0 0 16px 0;
    min-height: auto
}

.flexsliderReviews .flex-control-nav {
    display: block !important;
}

#StarbuysPopup {
    background: rgba(0, 0, 0, 0);
    color: white;
    width: 100%;
    height: 100%;
    float: left;
}

    #StarbuysPopup .col-2 {
        color: white;
    }

.StarbuysPopupTop p {
    color: #999
}

.StarbuysPopupTop span:after {
    content: "\f02b";
    font: normal normal normal 18px/1 FontAwesome;
    color: #BD80BD;
}

.StarbuysPopupTop h2 {
    color: white;
    font-size: 1.5em;
}

    .StarbuysPopupTop h2 span {
        color: #dddbf0
    }

.StarbuysPopupBottom {
    float: left;
    width: 100%;
}

    .StarbuysPopupBottom p {
        height: 51px;
        line-height: 51px;
        color: white;
        margin: 0;
        font-size: 0.75em;
    }

        .StarbuysPopupBottom p a {
            color: #999;
            border-bottom: 1px solid #999;
            padding-bottom: 8px;
        }

    .StarbuysPopupBottom .button {
        background: none !important;
        background-color: #BD80BD !important;
        color: #fff;
    }

        .StarbuysPopupBottom .button:hover {
            background: #A553A5 !important;
            color: #FFFFFF !important;
        }

/* -- Star Buys Promotion Page -- */
.taTitleContainer {
    background: #BD80BD;
    color: #fff;
    margin-bottom: 18px;
}

    .taTitleContainer h1, .taTitleContainer h2, .taTitleContainer h3 {
        color: #fff;
        font-weight: normal;
        margin: 0;
    }

        .taTitleContainer h1 span {
            color: #ccccff
        }

    .taTitleContainer a {
        color: #ccccff;
        text-decoration: none;
    }

.taContainer {
}

.taNoButton {
    margin-bottom: 4px;
    display: inline-block
}

.taBorderBottom {
    border-bottom: 1px solid #BD80BD
}

.taGreyBackground {
    background: #f4f5f6
}

.taStrapline {
    display: block;
    color: #7873b0;
}

.sbButton {
    border-color: #7873b0;
    color: #7873b0;
    border-style: solid;
    border-width: 1px;
    margin: 1em 0
}

    .sbButton:hover {
        background: #7873b0;
        color: #fff;
    }

.taNoButton {
    text-decoration: none;
    font-size: 0.8em;
    border-bottom: 1px solid #C7C7C7;
    padding-bottom: 7px;
}

.taBskt, .taMultiItemTextContainer h2, #lblCatPercent {
    color: #7873b0;
}

.taMultiItemContainer, .taSingleItemContainer {
    position: relative
}

.taMultiItemImageContainer {
}

    .taMultiItemImageContainer img {
        max-width: 100%
    }

.taMultiItemTextContainer {
}

.taRepeatContainerOuter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: stretch;
}

    .taRepeatContainerOuter > .col-3 {
        flex-basis: 33.33%
    }

.taMultiItemRepeater {
    vertical-align: top;
    margin: 0
}

.taMultiItemRepeaterContent {
}

    .taMultiItemRepeaterContent .taImg img {
        padding: 0 !important
    }

.taMultiItemRepeaterImageContainer {
    background-size: cover !important;
    border-right: 1px solid #e1e1e1
}

.taMultiItemRepeaterContentContainer {
    padding: 1em
}

.taMoreInfo {
}

.taMultiItemAttributes {
}

.taMultiItemProducts {
    float: right;
}

.taclAttributeGridContainer {
}

.taclAttributeGrid {
    padding: 0;
    margin: 0 0 8px 0;
    width: 100%;
    float: left;
    display: flex;
    flex-wrap: wrap;
}

    .taclAttributeGrid li {
        list-style: none;
        display: block;
        height: 48px;
        line-height: 48px;
        background: #f4f4f4;
    }

.taname {
    height: auto !important;
    background: #fafafa;
    padding: 0 16px;
    flex-grow: 1;
    width: 50%;
}

.taprice {
    background: #f4f4f4;
    padding: 0 16px;
    width: 50%;
}

.tastock {
    padding: 0 16px;
}

    .tastock .OutofStockCSS {
        height: 48px;
    }

.taadd {
    flex-grow: 1;
    float: left;
}

    .taadd img {
        width: 100%;
        height: 48px;
        display: block;
        cursor: pointer;
        background: url(/layout/addtobasket.png) top left no-repeat #a2c76c;
        background-position: center center;
    }

/*  Starbuys overrides */
.taNoButton {
    border-bottom: none;
    clear: both;
    display: block;
    border-bottom: none !important
}

.taname {
    width: initial;
    flex-grow: initial;
}

.filterReorderCtr, .reorderCtr, .betterSearchFilters {
    display: none
}

.col-268-betterSearch {
    height: 500px;
    padding: 16px
}

    .col-268-betterSearch img {
        height: auto
    }

    .col-268-betterSearch .productName {
        height: 55px;
        cursor: pointer;
        color: initial;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding: 0;
    }

#tagAlongPanel > div {
    padding: 32px;
}

.taContentContainerSmall > div:last-child {
    padding: 32px
}

span[id*="lblPromoText"] {
    font-size: initial
}

/* Starbuys v2 Page */
.sbv2-page-bg {
    background: #f3ebfa;
    position: relative;
    padding-right: 48px;
}

    .sbv2-page-bg:after {
        position: absolute;
        top: 50%;
        right: 8px;
        width: 32px;
        font-family: 'feather';
        content: "\e910";
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        color: #a46ec2;
        font-size: 24px;
    }

.sbv2-page---appto {
    padding-top: 10px;
    position: relative;
    color: #a46ec2;
    opacity: 0.6;
}

    .sbv2-page---appto:before {
        position: absolute;
        top: 0;
        left: 0;
        height: 2px;
        width: 16px;
        content: "";
        background: #a46ec2;
        display: block;
    }

.sb-ends-soon {
    order: -1;
}

    .sb-ends-soon:before {
        content: var(--14-starbuys-page-offer-ending);
        background: #a46ec2;
        display: block;
        color: white;
        writing-mode: vertical-rl;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        font-size: 10px;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        width: 20px;
        line-height: 20px;
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
        text-rendering: optimizeLegibility;
    }

/* -- Mobile Phones  -- */
@media screen and (max-width: 767.99px) {
    .col-268-betterSearch {
        width: 50%;
    }

    #tagAlongPanel > div {
        padding: 16px !important;
    }
}

@media screen and (min-width : 768px) and (max-width : 1023.99px) {
    .taOuter {
        padding: 0 !important;
    }

    .taTitleContainer h1 {
        font-size: 1.5em;
    }

    .taTitleContainer h2 {
        font-size: 1em;
    }

    .taTitleContainer h1 span {
        display: block;
    }

    .taMultiItemRepeaterImageContainer {
        border-bottom: 1px solid #e1e1e1;
        border-right: none;
    }

    .taMultiItemRepeaterContentContainer {
    }

    .taclAttributeGrid {
        padding: 0.5em 0;
    }

    .taname {
        line-height: 24px !important;
        padding: 16px 0 !important;
    }

    .taRepeatContainerOuter > .col-3 {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    .taclAttributeGrid li {
        width: 100%;
        text-align: center;
    }

    .col-268-betterSearch {
        width: 50%
    }
}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) and (max-width : 1439.99px) {
    /* -- Star Buys ----- */
    .taRepeatContainerOuter > .col-3 {
        flex-basis: 50% !important;
        width: 50% !important;
    }

    .taclAttributeGrid li {
        text-align: center;
    }

        .taclAttributeGrid li.taname, .taclAttributeGrid li.taprice, .taclAttributeGrid li.tastock > span {
            width: 100%;
        }

        .taclAttributeGrid li.taadd {
            min-width: 64px;
        }
}

@media screen and (min-width : 1440px) and (max-width : 1913.99px) {
    .col-268-betterSearch {
        width: 25%
    }
}

@media screen and (min-width : 1914px) {
    .col-268-betterSearch {
        width: 20%
    }
}
@charset "UTF-8";
/* Trusted Reviews  */
.reviewStars {font-family:'FontAwesome';color:#ffcc00;font-size:2.5em;}
.reviewStars span {display:none;}
.reviewStars span:first-of-type {display:block;}
#tReviewOverview .reviewOverview {display:none;}
#tReviewOverview .reviewOverview:first-of-type {display:block;}
#tReviewOverview h2 {color:#3b3d3f}
#tReviewOverview h2 span {color:#27af0f}
#tReviewBox {margin: 0 -16px;-webkit-flex-direction: row-reverse;-moz-flex-direction: row-reverse;-ms-flex-direction: row-reverse;	flex-direction: row-reverse;flex-flow: row-reverse wrap-reverse;-webkit-flex-wrap: wrap-reverse;-moz-flex-wrap: wrap-reverse;-ms-flex-wrap: wrap-reverse;	flex-wrap: wrap-reverse;}
#tReviewBox .reviewBox {background:#e6e8eb;    text-align: left;}
#tReviewBox .reviewBox h4 {background:#27af0f;color:white;width:80px;height:80px;position:relative;text-align:center;line-height:64px;font-size: 1.5em;padding: 0;margin: 0;}
#tReviewBox .reviewBox h4 span {background:#18181d;color:white;width:80px;position:absolute;bottom:0;left:0;font-size:0.6em;line-height:2em}
#tReviewBox .reviewBox h3 {border-bottom:1px solid #c6c9cd; margin-bottom:8px;padding-bottom:8px;margin-top:16px;height: auto;width: 100%;float: left;    text-align: left;}
#tReviewBox .reviewBox h3 span {float:right;font-size:0.8em;color:#999}
#tReviewBox .reviewBox .reviewComment {margin:0 0 16px 0;border-bottom:1px dotted #c6c9cd; text-align: left;}
#tReviewBox .reviewBox .reviewComment strong {display:block;}
#tReviewBox .ratingsBox {display:flex;flex-grow: 5;flex-flow: row wrap;width: 100%;float:left;}
#tReviewBox .reviewBox .ratings {background:#65bbdd;color:white;position:relative;text-align:center;line-height:64px;height: 80px;min-width: 80px;margin: 0 16px 16px 0;}
#tReviewBox .reviewBox .ratings span {background:#18181d;color:white;width:80px;position:absolute;bottom:0;left:0;font-size:0.6em;line-height:2em}
#tReviewBox > div { margin-bottom:32px}
@media screen and (max-width: 767.9px) {
    #tReviewBox > div { margin-bottom: 16px}
}@charset "UTF-8";
.workshop{margin-top:32px;margin-bottom:32px;width:100%;}
.workshop h3{padding: 0;margin: 0;}
.workshop .wsPrice{float:right;color:#fff;padding:2px 8px;}
.checkList{margin-top: 16px;padding:0;}
.checkList li{border-top: 1px dashed #D6D6D6;list-style:none;font-size:smaller;padding:16px 0;}
.checkList li:before {font-family: 'feather';content:"\e042";padding-right: 16px;color: inherit;}
.checkList li:first-of-type{border-top: 1px solid #999;}
.servicePackages .col3.blkBorder p{text-align:center;}
.servicePackages p strong{font-size:40px;}
.servicePackages span.spanner,.swcLanding .servicePackages span.spanner span{display:inline-block;background:url(/layout/workshopSpanner.jpg) 0 -70px repeat-x;width:100%;height:51px;background-size:50px;}
.servicePackages span.spanner.wider,.swcLanding .servicePackages span.spanner.wider span{height:55px;background-size:52px;}
.servicePackages span.spanner span{background-position:0 0;float:left;}
.leaders{overflow-x:hidden;list-style:none;text-align:left;width:100%;margin:32px 0;padding:0;}
.leaders li{position:relative;display:inline-table;width:100%;font-size:smaller;margin:16px 0;}
.leaders li:after{position:absolute;z-index:0;bottom:0;left:0;white-space:nowrap;vertical-align:middle;content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";}
.leaders strong:first-child{background:#FFF;padding-right:8px;z-index:1;position:relative;}
.leaders strong + strong{float:right;padding-left:8px;position:relative;background:#FFF;z-index:1;}
.leaders small{font-size:11px;}@charset "UTF-8";
/*  Returns  */
.returns, .returns div.container  {width: 100%;float: left;clear: both;padding-top: 56px;}
.returns .col-3 {background: #fdfdfd;border-radius: 10px;padding:32px;outline: 1px solid #efefef;}
.returns .col-2 { width:50%}
.returns h2, .returns h4 { text-align:center}
.newReturns {margin-top:-50px;background: #fff; position:relative;}
.returns ol {padding-left: 0px;}
.returns ol li {padding: 16px 0}
.returns li, .returns p {padding: 0px;}
.NewSash { position:absolute; top:16px; right:16px; background:#ff6448; padding:2px 8px; font-size:small; color:#fff; border-radius: 4px}
.returns a {color: #528abb;border-bottom: 1px dotted #b9b9b9;}
.returns a:hover {color: #1c588c;border-bottom: 1px dotted #528abb;}
.Xmas { display: none}


/* -- Mobile Phones  -- */
@media screen and (max-width: 767.99px)
{
	/*  Returns  */
	.returns .col-3 {padding:32px 16px ;  width:100%}
	.newReturns {margin:16px 0 }
	.returns .zflex-v { display: inline-block }
}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (max-width: 1439px) and (min-width: 1024px)
{
	/*  Returns  */
	.returns .col-3 {padding: 32px;}
	.newReturns {margin-top:-25px }
}/* 18-pages */
@charset "UTF-8";

.brandPageBoxNew>div {
    padding: 16px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    flex-grow: 1;
    ms-flex-grow:1;
    min-width: 20%
}

    .brandPageBoxNew>div strong {
        display:block;
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid #d2d2d2;
    }

    .brandPageBoxNew>div> a {
        font-size: large;
        clear: both;
        float: left;
        display: inline-block;
        color: #313131;
        margin: 0 28px 5px 0;
        padding: 0 0 3px 0;
        line-height: 130%;
        position: relative;
        overflow: hidden;
    }

@media screen and (max-width: 767px){
    .brandPageBoxNew > div {
        min-width: 50%
    }
}

@media screen and (min-width : 768px) and (max-width : 1023.99px) {
    .brandPageBoxNew > div {
        min-width: 33.33%
    }
}
/* Purposefully empty > Moved to modules/css/accounts folder */@charset "UTF-8";
/*  Compare Page  */

.compare-min-height {
    min-height: 71px;
}

#comparetgt p {
    margin: 0;
    min-height: 100px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#comparetgt > div {
    position: relative;
}

    #comparetgt > div > .imgCtr {
        overflow: hidden;
    }

        #comparetgt > div > .imgCtr:before {
            position: absolute;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            z-index: 2;
            background: black;
            color: white;
            line-height: 24px;
            height: 24px;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            width: 150px;
            text-align: center;
            top: 29px;
            right: -33px;
        }

    #comparetgt > div[data-before-tag="lowest"] {
        order: -2;
    }

        #comparetgt > div[data-before-tag="lowest"] > .imgCtr:before {
            content: var(--21-product-compare-best-value);
        }

    #comparetgt > div[data-before-tag="highest"] {
        order: -3;
    }

        #comparetgt > div[data-before-tag="highest"] > .imgCtr:before {
            content: var(--21-product-compare-premium-option);
        }

    #comparetgt > div[data-before-tag="average"] {
        order: -1;
    }

        #comparetgt > div[data-before-tag="average"] > .imgCtr:before {
            content: var(--21-product-compare-middle-ground);
        }

@media print {
    .printhide {
        display: none;
    }
}

/* -- Mobile Phones  -- */
@media screen and (max-width: 767.99px) {

    #comparestats {
        display: none;
    }

    #comparetgt > div {
        width: 50%;
    }

    .compare-min-height {
        font-size: medium !important;
    }

    #comparetgt p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* General styling --------------------------------------------------------------------------- */

body.new-basket {
}

    body.new-basket .basket-wrapper {
        font-size: 16px;
    }

        body.new-basket .basket-wrapper .x-small {
            font-size: 10px !important;
        }

        body.new-basket .basket-wrapper .small {
            font-size: 13px !important;
        }

        body.new-basket .basket-wrapper h1 {
            font-size: 30px;
            margin: 0 0 16px 0;
        }

        body.new-basket .basket-wrapper #new-basket-bubbles {
            margin-bottom: 16px;
        }

        body.new-basket .basket-wrapper > .grid > .container,
        body.new-basket .basket-wrapper #new-basket-shipping,
        body.new-basket .basket-wrapper #new-basket-totals,
        body.new-basket .basket-wrapper #new-basket-paymentoptions,
        body.new-basket .basket-wrapper #new-basket-reductionsmessage,
        body.new-basket .basket-wrapper #new-basket-additionalmessage {
            padding: 32px;
        }

            body.new-basket .basket-wrapper #new-basket-additionalmessage > div {
                padding-right: 16px;
            }

        body.new-basket .basket-wrapper p {
            text-align: justify;
        }

        body.new-basket .basket-wrapper button,
        body.new-basket .basket-wrapper .button {
            min-height: 48px;
            line-height: 150%;
            padding: 16px;
            height: auto;
        }

        body.new-basket .basket-wrapper,
        body.new-basket .basket-wrapper *:not(.fa) {
            font-family: 'MuliRegularFont';
        }

            body.new-basket .basket-wrapper .boldfont,
            body.new-basket .basket-wrapper .boldfont *:not(.fa),
            body.new-basket .basket-wrapper h1,
            body.new-basket .basket-wrapper h2,
            body.new-basket .basket-wrapper h3,
            body.new-basket .basket-wrapper h4,
            body.new-basket .basket-wrapper h5,
            body.new-basket .basket-wrapper h6 {
                font-family: 'MuliBoldFont';
            }

            body.new-basket .basket-wrapper a {
                color: dodgerblue;
                border-bottom: 1px solid;
            }

    body.new-basket button,
    body.new-basket [class*="button-"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        display: block;
        border-radius: 4px;
        color: white !important;
        border-bottom: none !important;
        margin-bottom: 16px;
    }

        body.new-basket button:hover,
        body.new-basket [class*="button-"]:hover {
            box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.05);
        }

    body.new-basket .new-basket-header {
        background: #222;
        color: white;
        padding: 4px 8px;
        margin-bottom: 8px;
    }

        body.new-basket .new-basket-header.no-margin {
            margin-bottom: 0;
        }

    body.new-basket .new-basket-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /*grid-template-rows: repeat(5, 1fr);*/
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        margin-bottom: 32px;
    }

        body.new-basket .new-basket-grid div[data-role="products"] {
            grid-area: 1 / 1 / 2 / 6;
        }

        body.new-basket .new-basket-grid div[data-role="shipping"] {
            grid-area: 2 / 1 / 4 / 2;
        }

        body.new-basket .new-basket-grid div[data-role="totals"] {
            grid-area: 2 / 2 / 3 / 3;
        }

        body.new-basket .new-basket-grid div[data-role="payment-options"] {
            grid-area: 2 / 3 / 3 / 4;
        }

        body.new-basket .new-basket-grid div[data-role="reductions-message"] {
            grid-area: 2 / 4 / 3 / 6;
        }

        body.new-basket .new-basket-grid div[data-role="additional-message"] {
            grid-area: 3 / 2 / 4 / 6;
        }

.new-basket-section .affirm-promo-panel {
    font-size: 13px;
}

@media screen and (max-width: 1023.9px) {

    body.new-basket .basket-wrapper > .grid > .container {
        padding: 16px;
    }

    body.new-basket .basket-wrapper #new-basket-shipping,
    body.new-basket .basket-wrapper #new-basket-totals,
    body.new-basket .basket-wrapper #new-basket-paymentoptions,
    body.new-basket .basket-wrapper #new-basket-reductionsmessage,
    body.new-basket .basket-wrapper #new-basket-additionalmessage {
        padding: 24px;
    }

    body.new-basket .new-basket-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

        body.new-basket .new-basket-grid div[data-role="products"] {
            grid-area: 1 / 1 / 1 / 1;
        }

        body.new-basket .new-basket-grid div[data-role="shipping"] {
            grid-area: 2 / 1 / 2 / 1;
        }

        body.new-basket .new-basket-grid div[data-role="totals"] {
            grid-area: 4 / 1 / 4 / 1;
        }

        body.new-basket .new-basket-grid div[data-role="payment-options"] {
            grid-area: 5 / 1 / 5 / 1;
        }

        body.new-basket .new-basket-grid div[data-role="reductions-message"] {
            grid-area: 3 / 1 / 3 / 1;
        }

        body.new-basket .new-basket-grid div[data-role="additional-message"] {
            grid-area: 6 / 1 / 6 / 1;
        }
}

/* CTA & Information section --------------------------------------------------------------------------- */
body.new-basket .new-basket-bubble {
    background: #5cdb94;
    min-height: 48px;
    width: 33.33%;
    padding: 8px 16px;
    user-select: none;
}

    body.new-basket .new-basket-bubble[data-toggle][style*="inline"] {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: -webkit-flex !important;
        display: flex !important;
    }

    /* Only 1 active */
    body.new-basket .new-basket-bubble:only-of-type {
        width: 100%;
    }

    /* Only 2 active */
    body.new-basket .new-basket-bubble:first-of-type:nth-last-of-type(2),
    body.new-basket .new-basket-bubble:last-of-type:nth-of-type(2) {
        width: 50%;
    }

    body.new-basket .new-basket-bubble:first-of-type:nth-last-of-type(2) {
        margin-right: 8px;
    }

    body.new-basket .new-basket-bubble:last-of-type:nth-of-type(2) {
        margin-left: 8px;
    }

    /* All active */

    body.new-basket .new-basket-bubble:first-of-type:nth-last-of-type(3) {
        margin-right: 8px;
    }

    body.new-basket .new-basket-bubble:last-of-type:nth-of-type(3) {
        margin-left: 8px;
    }

    body.new-basket .new-basket-bubble:nth-of-type(2):nth-last-of-type(3) {
        margin-left: 4px;
        margin-right: 4px;
    }

body.new-basket .new-basket-info,
body.new-basket .new-basket-error,
body.new-basket #stock-error-message-warning {
    color: #b3881a;
    border: 1px solid #b3881a;
    background: #f6f4ef;
    width: 100%;
    padding: 16px;
    margin-bottom: 16px;
}

body.new-basket .new-basket-error,
body.new-basket #stock-error-message-warning {
    color: tomato;
    background: #ffeae7;
    border-color: #ffeae7;
}

    body.new-basket .new-basket-error p {
        font-family: 'MuliBoldFont';
        margin: 0 0 0.25em 0;
    }

    body.new-basket .new-basket-error ul {
        margin: 0.75em 0 0 0;
        list-style: inside;
    }

/* Items section --------------------------------------------------------------------------- */

body.new-basket .basket-items .basket-itemrow {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    line-height: 150%;
    padding: 16px 0;
}

    body.new-basket .basket-items .basket-itemrow [class*="basket-items-column-"] {
        padding-right: 8px;
        line-height: 24px;
        position: relative;
    }

        body.new-basket .basket-items .basket-itemrow [class*="basket-items-column-"]:not(.zflex-v) {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: row;
            align-items: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            -moz-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
        }

    body.new-basket .basket-items .basket-itemrow .basket-items-column-product {
    }

    body.new-basket .basket-items .basket-itemrow .basket-items-column-img {
        width: 84px;
        min-width: 84px;
        max-width: 84px;
        flex-basis: 84px;
        padding-right: 0;
        margin-right: 8px;
    }

    body.new-basket .basket-items .basket-itemrow .basket-items-column-price,
    body.new-basket .basket-items .basket-itemrow .basket-items-column-saving {
        width: 80px;
        min-width: 80px;
        max-width: 80px;
        flex-basis: 80px;
    }

    body.new-basket .basket-items .basket-itemrow .basket-items-column-mng {
        width: 96px;
        min-width: 96px;
        max-width: 96px;
        flex-basis: 96px;
    }

    body.new-basket .basket-items .basket-itemrow .basket-items-column-total {
        width: 90px;
        min-width: 90px;
        max-width: 90px;
        flex-basis: 90px;
    }

    body.new-basket .basket-items .basket-itemrow .basket-items-column-qty {
        width: 32px;
        min-width: 32px;
        max-width: 32px;
        flex-basis: 32px;
    }

    body.new-basket .basket-items .basket-itemrow .basket-items-column-saving [data-savingvisible*="alse"],
    body.new-basket .basket-items [data-msg=""],
    body.new-basket .basket-items [data-matrix="No Option"] {
        display: none;
    }

    body.new-basket .basket-items .basket-itemrow .basket-items-ctrl {
        width: 24px;
        height: 24px;
        line-height: 22px;
        text-align: center;
        cursor: pointer;
        background: #222;
        color: white;
    }

        body.new-basket .basket-items .basket-itemrow .basket-items-ctrl.basket-items---remove {
            background: tomato;
        }

        body.new-basket .basket-items .basket-itemrow .basket-items-ctrl.basket-items---plus,
        body.new-basket .basket-items .basket-itemrow .basket-items-ctrl.basket-items---minus {
            margin-right: 8px;
        }

            body.new-basket .basket-items .basket-itemrow .basket-items-ctrl.basket-items---plus:hover,
            body.new-basket .basket-items .basket-itemrow .basket-items-ctrl.basket-items---minus:hover {
                background: dodgerblue;
                color: white;
            }

body.new-basket #new-basket-starbuyitems.basket-items .basket-itemrow .basket-items-ctrl.basket-items---plus,
body.new-basket #new-basket-starbuyitems.basket-items .basket-itemrow .basket-items-ctrl.basket-items---minus,
body.new-basket .basket-itemrow-wrapper[data-producturl*="/builder"] .basket-items-ctrl.basket-items---plus,
body.new-basket .basket-itemrow-wrapper[data-producturl*="/builder"] .basket-items-ctrl.basket-items---minus {
    display: none;
}

body.new-basket .basket-items .basket-itemrow .basket-items-ctrl:before {
    font-family: feather;
}

body.new-basket .basket-items .basket-itemrow .basket-items-ctrl.basket-items---plus:before {
    content: "\e9c8";
}

body.new-basket .basket-items .basket-itemrow .basket-items-ctrl.basket-items---minus:before {
    content: "\e9b4";
}

body.new-basket .basket-items .basket-itemrow .basket-items-ctrl.basket-items---remove:before {
    content: "\ea16";
}

body.new-basket .basket-items div[class*="new-basket-starbuy"] .basket-items-column-img {
    position: relative;
    margin-bottom: 24px;
}

    body.new-basket .basket-items div[class*="new-basket-starbuy"] .basket-items-column-img:after {
        background: #b07ed7;
        color: white;
        content: var(--22-new-basket-star-buy);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        position: absolute;
        bottom: -24px;
        left: 0;
        display: block;
        height: 20px;
        padding: 0 4px;
        font-size: 10px;
        line-height: 20px;
        width: 84px;
        text-align: center;
    }

body.new-basket .basket-items [data-starbuytitle] {
    display: none;
}

body.new-basket .basket-items div.new-basket-starbuychild [data-starbuytitle] {
    display: block;
    float: left;
    border-radius: 3px;
    overflow: hidden;
}

    body.new-basket .basket-items div.new-basket-starbuychild [data-starbuytitle] span {
        background: var(--starbuyColourThree);
        color: var(--starbuyColourOne);
        padding: 8px;
    }

        body.new-basket .basket-items div.new-basket-starbuychild [data-starbuytitle] span.starbuy-child-offer-explainer,
        body.new-basket .basket-items div.new-basket-starbuychild [data-starbuytitle] span.starbuy-child-offer-explainer * {
            background: var(--starbuyColourOne);
            color: var(--starbuyColourThree) !important;
        }

            body.new-basket .basket-items div.new-basket-starbuychild [data-starbuytitle] span.starbuy-child-offer-explainer .fa {
                vertical-align: text-top;
            }

@media screen and (max-width: 1023.9px) {
    body.new-basket .basket-items.basket-item-header {
        display: none;
    }

    body.new-basket .basket-items .basket-itemrow {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        body.new-basket .basket-items .basket-itemrow [class*="basket-items-column-"] {
            padding-right: 0;
            padding-bottom: 8px;
            width: 100%;
            min-width: 100%;
            max-width: 100%;
            flex-basis: 100%;
            padding-left: 96px;
        }

        body.new-basket .basket-items .basket-itemrow .basket-items-column-qty,
        body.new-basket .basket-items .basket-itemrow .basket-items-column-mng {
            width: auto;
            min-width: auto;
            max-width: auto;
            flex-basis: auto;
        }

        body.new-basket .basket-items .basket-itemrow .basket-items-column-mng {
            padding-left: 16px;
        }

        body.new-basket .basket-items .basket-itemrow .basket-items-column-product {
            -webkit-align-content: stretch !important;
            -moz-align-content: stretch !important;
            -ms-align-content: stretch !important;
            align-content: stretch !important;
            -webkit-align-items: flex-start !important;
            -moz-align-items: flex-start !important;
            -ms-align-items: flex-start !important;
            align-items: flex-start !important;
        }

        body.new-basket .basket-items .basket-itemrow .basket-items-column-img,
        body.new-basket .basket-items .basket-itemrow .basket-items-column-product {
            padding-left: 0;
        }

        body.new-basket .basket-items .basket-itemrow .basket-items-column-img {
            margin-right: 12px;
            width: 84px;
            min-width: 84px;
            max-width: 84px;
            flex-basis: 84px;
        }

        body.new-basket .basket-items .basket-itemrow .basket-items-column-price:before,
        body.new-basket .basket-items .basket-itemrow .basket-items-column-saving:before,
        body.new-basket .basket-items .basket-itemrow .basket-items-column-qty:before,
        body.new-basket .basket-items .basket-itemrow .basket-items-column-total:before {
            display: block;
            float: left;
            width: 64px;
            content: var(--22-new-basket-price);
        }

        body.new-basket .basket-items .basket-itemrow .basket-items-column-saving:before {
            content: var(--22-new-basket-saving);
        }

        body.new-basket .basket-items .basket-itemrow .basket-items-column-saving[data-savingvisible*="alse"] {
            display: none;
        }

        body.new-basket .basket-items .basket-itemrow .basket-items-column-qty:before {
            content: var(--22-new-basket-quantity);
        }

        body.new-basket .basket-items .basket-itemrow .basket-items-column-total {
            font-family: 'MuliBoldFont';
        }

            body.new-basket .basket-items .basket-itemrow .basket-items-column-total:before {
                content: var(--22-new-basket-total);
            }

        body.new-basket .basket-items .basket-itemrow .basket-items-ctrl {
            width: 34px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            background: #222;
            color: white;
        }

            body.new-basket .basket-items .basket-itemrow .basket-items-ctrl.basket-items---plus,
            body.new-basket .basket-items .basket-itemrow .basket-items-ctrl.basket-items---minus {
                margin-right: 12px;
            }

    body.new-basket .basket-items div.new-basket-starbuychild [data-starbuytitle] span {
        display: block;
        float: left;
        width: 100%;
        text-align: center;
        line-height: 1.3em;
    }
}

/* Shipping section --------------------------------------------------------- */

body.new-basket .basket-shippingrow {
    padding: 16px 0;
}

    body.new-basket .basket-shippingrow:first-of-type {
        padding-top: 0;
    }

    body.new-basket .basket-shippingrow:last-of-type {
        border-bottom: none;
    }

    body.new-basket .basket-shippingrow > div {
        margin-bottom: 8px;
    }

    body.new-basket .basket-shippingrow .basket-shippingrow-price {
        margin-left: 8px;
    }

/* Totals section --------------------------------------------------------- */

body.new-basket .new-basket-total-row {
}

    body.new-basket .new-basket-total-row .new-basket-total-title {
        width: 40%;
    }

    body.new-basket .new-basket-total-row .new-basket-total-value {
        width: 60%;
    }


body.new-basket #new-basket-currencytotal .basket-convertedtotal {
    float: left;
    width: 50%;
    line-height: 12px;
    padding-bottom: 16px;
    font-size: 12px !important;
}

    body.new-basket #new-basket-currencytotal .basket-convertedtotal:last-of-type {
        padding-bottom: 0;
    }

    body.new-basket #new-basket-currencytotal .basket-convertedtotal div[class*="isoFlag"]:before {
        margin-top: 0;
        margin-right: 6px;
    }

@media screen and (min-width: 1024px) {
    body.new-basket #new-basket-currencytotal .basket-convertedtotal {
        width: 50%;
    }
}


/* Payment Options section --------------------------------------------------------- */
body.new-basket #stock-error-message-warning {
    padding: 16px;
}

body.new-basket #cart-paymenticons img {
    width: 60px;
    height: 40px;
    margin: 0 8px 8px 0;
}

body.new-basket .payment-buttons button.button-card {
    background: dodgerblue;
}


body.new-basket .payment-buttons button.button-finance {
    background: #389583;
}

body.new-basket .payment-buttons .button-paypal {
    background: url(/ssl/secure/resources/paypal-logo.png) #ffc439;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 104px;
    text-indent: -9999px;
    overflow: hidden;
    height: 48px;
    line-height: 48px;
    text-align: center;
    padding: 0 16px;
}

@media screen and (max-width: 1023.9px) {
    body .new-basket .basket-wrapper .ctrPad32, body.new-basket .basket-wrapper .ctrPad16 {
        padding: 16px
    }

    body.new-basket .basket-wrapper .ctrPad8 {
        padding: 8px;
    }

    body.new-basket .new-basket-right {
        width: 100%;
        padding-left: 0 !important;
    }
}

body.new-basket [data-toggle] {
    display: none;
}


/* Essential Items Repeater --------------------------------------------------------- */
div#EssentialItemsRepeater_FAFCustomPanel {
    display: grid;
    width: 100%;
    align-items: center;
    grid-column: span 4;
}

    div#EssentialItemsRepeater_FAFCustomPanel > h2 {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
    }

    div#EssentialItemsRepeater_FAFCustomPanel > p {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
    }

    div#EssentialItemsRepeater_FAFCustomPanel > a {
        margin-left: auto;
        text-decoration: underline;
        grid-column: 2;
        grid-row: 1 / 3;
    }

    div#EssentialItemsRepeater_FAFCustomPanel #flexsliderMP {
        flex-basis: 100%;
        grid-column: span 2;
        margin-top: 0.5rem;
    }

@media screen and (max-width: 1024px) {
    div#EssentialItemsRepeater_FAFCustomPanel {
        grid-column: span 1;
    }
}

@media screen and (max-width: 768px) {
    div#EssentialItemsRepeater_FAFCustomPanel > p {
        display: none;
    }
}

div#EssentialItemsRepeater_FAFCustomPanel > div ul.slides > li {
    display: flex;
    flex-flow: column nowrap;
    border: none;
    position: relative;
    overflow: hidden;
}

div#EssentialItemsRepeater_FAFCustomPanel a {
    border: none;
}

div#EssentialItemsRepeater_FAFCustomPanel > div ul.slides > li .standardPrice-repeater {
    color: #bbbbbb;
    font-family: 'citrfontreg';
    display: inline-block;
    margin: 0 0 0 8px;
    padding: 0 0 0 8px;
    border-left: 1px solid #dadada;
    text-decoration: line-through;
}

div#EssentialItemsRepeater_FAFCustomPanel > div ul.slides > li .nowPrice-repeater {
    font-weight: bold;
}

div#EssentialItemsRepeater_FAFCustomPanel > div [id*="lblDiscounttext"] {
    color: #000;
    font-weight: bold;
    margin: 0 0 0 8px;
    padding: 0 0 0 8px;
    border-left: 1px solid #dadada;
}

div#EssentialItemsRepeater_FAFCustomPanel > div ul.slides > li .percentOff-repeater {
    margin-right: 4px;
}

div#EssentialItemsRepeater_FAFCustomPanel > div ul.slides > li .standardPrice-repeater,
div#EssentialItemsRepeater_FAFCustomPanel > div ul.slides > li .nowPrice-repeater,
div#EssentialItemsRepeater_FAFCustomPanel > div [id*="lblDiscounttext"] {
    font-size: 14px;
    color: initial;
}

div#EssentialItemsRepeater_FAFCustomPanel > div .pricingRepeater {
    border-bottom: 1px solid #ccc;
    margin: 0 0 8px 0;
    padding: 0 0 8px 0;
}

div#EssentialItemsRepeater_FAFCustomPanel > div > a {
    font-size: 0px;
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

    div#EssentialItemsRepeater_FAFCustomPanel > div > a::before {
        content: 'See More...';
        font-size: 20px;
        align-content: center;
        padding-right: 0.5em;
        align-items: center;
        display: flex;
        justify-content: flex-end;
        color: #163d66;
    }

    div#EssentialItemsRepeater_FAFCustomPanel > div > a::after:hover {
        background: #cbe3db;
    }

div#EssentialItemsRepeater_FAFCustomPanel .item-repeater-info {
    color: initial;
    margin-top: 0.5rem;
}

div#EssentialItemsRepeater_FAFCustomPanel ul.slides > li[data-onsale="True"] :is(.nowPrice-repeater, .percentOff-repeater) {
    color: #fd4239;
}

div#EssentialItemsRepeater_FAFCustomPanel span.saleIcon-repeater {
    position: absolute;
    text-transform: uppercase;
    top: 20px;
    right: -55px;
    text-align: center;
    width: 150px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

    div#EssentialItemsRepeater_FAFCustomPanel span.saleIcon-repeater:after {
        content: var(--citrus-styles-faf-sale);
        text-transform: uppercase;
        margin: 0;
        color: rgb(241,241,241);
        font-size: 10px;
        letter-spacing: 2.5px;
        position: absolute;
        padding: 3px;
        text-align: center;
        background: #d93131;
        top: 0;
        right: 0;
        width: 150px;
    }

body.new-basket .basket-wrapper a[data-type="AdyenAffirm"]  {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.3rem;
}
#google-payment-request-button button {
    border-radius: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    overflow:hidden;
}


#ModularPanel .bg-rewards-green,
#ModularPanel .rewards-questionlist-item:before,
#ModularPanel .rewards-button {
    background: #a2d161;
}

    #ModularPanel .rewards-button:hover {
        background: #8cba4d;
    }

#ModularPanel .order-2 {
    order:2;
}

#ModularPanel .rewards-questionlist-item:before {
    content: ' ';
    width:20%;
    height:3px;
    display:block;
    margin-bottom:8px;
}
.share-banner, .share-banner > * {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.share-banner {
    border-radius: 8px;
    padding: 32px;
    color: white;
    line-height: 30px;
    position: relative;
}

    .share-banner > .share-banner-button {
        float: right;
        background: white;
        color: #3014ff;
        border-radius: 4px;
        padding: 0 6px;
        font-size: 14px;
        box-shadow: -1px 10px 21px -4px #150e4b;
        -webkit-box-shadow: -1px 10px 21px -4px #150e4b;
        -moz-box-shadow: -1px 10px 21px -4px #150e4b;
        margin-left: 16px;
    }

        .share-banner > .share-banner-button:after {
            content: var(--24-share-banner-share);
        }

.share-banner-copy {
    color: #3014ff !important;
    background: #f6f5ff;
    line-height: 48px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dfdeef;
}

    .share-banner-copy > * {
        float: none !important;
        display: inline-flex !important;
        width: auto !important;
        opacity: 1;
    }

    .share-banner-copy input {
        appearance: none;
        background: transparent !important;
        color: inherit;
        user-select: all;
        line-height: inherit;
        outline: none !important;
        border: none;
        font-size: 12px;
    }

    .share-banner-copy span {
        line-height: inherit;
        padding: 0 16px;
        border-left: 1px solid #dfdeef;
        background: #3014ff !important;
        color: white;
        cursor: pointer;
    }

        .share-banner-copy span:after {
            content: var(--24-share-banner-copy);
            text-transform: uppercase;
        }
body.cyclescheme-info-page {
}

    body.cyclescheme-info-page .cyclescheme-info-page---banner {

    }

        body.cyclescheme-info-page .cyclescheme-info-page---banner .cyclescheme-info-page---banner---content {
            top: 50%;
            left: 0;
            right: 0;
            -moz-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            text-shadow: 0 0 10px rgba(0,0,0,0.5);
        }

.bg-cyclescheme {
    background: #144f79;
}

.bg-cyclescheme-pink {
    background: #ef539c;
}

.co-cyclescheme {
    color: #144f79;
}

.co-cyclescheme-pink {
    color: #ef539c;
}

.cyclescheme-pip {
    background: #ef539c;
    color: white;
    font-size: 0.5em;
    padding: 4px 8px;
    border-radius: 15px;
    display: inline;
    vertical-align: text-top;
}

.cyclescheme-timeline {
    border-left: 3px solid #ef539c;
    padding-left:32px;
}

    .cyclescheme-timeline > p {
        margin-top: 0;
        margin-bottom: 0;
    }

        .cyclescheme-timeline > p.cyclescheme-timeline---step {
            position: relative;
            overflow: visible;
            margin-top: 2em;
            margin-bottom: 0.25em;
        }

        .cyclescheme-timeline > p.cyclescheme-timeline---step:first-of-type {
            margin-top: 0;
        }

        .cyclescheme-timeline > p.cyclescheme-timeline---step:before {
            position: absolute;
            content: "";
            width: 16px;
            height: 3px;
            background: #ef539c;
            top: 0.5em;
            left: -33px;
        }

@media screen and (max-width: 767.9px) {
    .cyclescheme-info-page---banner.imgCtrHome:after {
        padding-bottom: 100%;
    }

    body.cyclescheme-info-page p {
        font-size: 14px;
    }

    body.cyclescheme-info-page .x-large {
        font-size: 20px;
    }

}
[class*="hmBanner"] > div {display: grid; padding: 0 0 1em 0; grid-gap:1em;}
[class*="hmBanner"] > div > a {position: relative; width: 100%; height: 100%}
[class*="hmBanner"] > div > a:hover .bannerView {background: #2b3266;}
.modernizr-no-cssgrid [class*="hmBanner"] > div { display: block}
.hmBanner1 > div {grid-template-columns: repeat(1,1fr); -ms-grid-columns: 1fr }
.photo {background: #efefef;background-size: cover; background-position: center; height: 100%}
.photo div:after {padding-bottom: 75%;content: "";display: block;width: 100%;}
.hmBanner1 > div > a:nth-child(1) {grid-column: 1/3;grid-row: 1/3;}
.hmBanner1 > div > a:nth-child(4) {grid-column: 2/4;grid-row: 3/5;}

/* text overlay  --------------------------------------------------------------- */
.bannerTxtCtr{position:absolute;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: row;align-items: center;justify-content: center;flex-wrap: wrap;text-align: center;padding: 32px;z-index: 2;width: 100%;height: 100%;flex-direction: column;-ms-flex-direction: column; color: white}
.bannerDesc, .bannerTitle, .bannerView {background: #000000a6;text-transform: uppercase;}
.bannerDesc:empty, .bannerTitle:empty, .bannerView:empty{display:none;}
.bannerTxtCtr > span { padding: 8px 16px}
.bannerDesc {letter-spacing: 2px;font-size: smaller;}
.bannerTitle {font-size: x-large;text-transform: uppercase;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.bannerView {margin-top: 8px;font-size: small;border: 1px solid #ffffff4a;}
.hmBanner3 .bannerTitle {font-size:small;max-height: 53px;}



/* Large Mobile Phones  --------------------------------------------------------------- */
@media screen and (max-width: 767.9px)
{
	[class*="hmBanner"] > div { padding: 0 0 0.5em 0; grid-gap:0.5em;}
	.bannerTxtCtr { padding:8px}
	.hmBanner1 > div {grid-template-columns: 1fr; -ms-grid-columns: 1fr}
	.hmBanner1 > div > a:nth-child(1) {grid-column:auto;grid-row:auto;}
	.hmBanner1 > div > a:nth-child(4) {grid-column: auto;grid-row: auto;}
	.hmBanner2 > div {grid-template-columns: repeat(1,1FR);}
	.hmBanner3 > div {grid-template-columns: repeat(2,1FR);font-size: small;}
	.hmBanner3 > div > span {grid-template-columns: repeat(2,1FR);font-size: small;}
	.bannerTitle {font-size: large;text-transform: uppercase;}
	.bannerTxtCtr > span { padding: 4px 8px}
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.9px)
{
	.bannerTitle {font-size: large;}
	.bannerTxtCtr { padding:16px;}
	.bannerTxtCtr > span {padding: 4px 8px;}
}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) and (max-width : 1439.9px)
{
    /* --- CSS images hide*/
	.bannerTxtCtr { padding:16px}
}

/* Desktops  ------------------------------------------------------------------------------------ */
@media screen and (min-width : 1440px) and (max-width : 1913.9px)
{
    /* --- Banner 1 override */
}

/* 4K   ------------------------------------------------------------------------------------------ */
@media screen and (min-width : 1914px)
{
	/* --- Banner 1 override */
}<strong></strong>/* -- Stores ----- */
[class*="hmBanner"] > div {display: grid; padding: 0 0 1em 0; grid-gap:1em;}
[class*="hmBanner"] > div > a {position: relative; width: 100%; height: 100%}
[class*="hmBanner"] > div > a:hover .bannerView {background: #2b3266;}
.modernizr-no-cssgrid [class*="hmBanner"] > div { display: block}
.hmBanner2 > div {grid-template-columns: repeat(3,1fr); -ms-grid-columns: 1fr 1fr 1fr }
.hmBanner3 > div {grid-template-columns: repeat(6,1fr); -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap:3em; }
.hmBanner3 .bannerTxtCtr { display: none}
.hmBanner3 div[class*="css-image"] {  background-size: contain !important}
.hmBanner3 .photo { background:none}


/* Large Mobile Phones  --------------------------------------------------------------- */
@media screen and (max-width: 767.9px)
{
	[class*="hmBanner"] > div { padding: 0 0 0.5em 0; grid-gap:0.5em;}
	.hmBanner2 > div {grid-template-columns: 1fr; -ms-grid-columns: 1fr}
	.hmBanner3 > div {grid-template-columns: repeat(3,1fr); -ms-grid-columns: 1fr 1fr 1fr; grid-gap:2em;  }
}


/* -- Main Banner overide ----- */
.storeImg, .storeImg div[class*="css-image"] { height:75vh !important; position: relative; overflow: hidden}
#map_canvas {height:75vh}
.storeImg .bannerView  { display: none}

.markers { width: 100%; max-width: 1440px; margin: 0 auto;float: inherit;}
.markers a {padding-bottom: 32px;margin: 0 auto;font-size: smaller;display: inline-block;}
.mpin {background:#ea4335;color: #fff;width:25px;height: 25px;border-radius: 100%;margin-right: 8px;text-align: center;line-height: 25px;float: left;margin-bottom: 66px;margin-right:18px;}
.mname { font-family: 'sourcesanspro-bold'; text-transform: uppercase;font-size: larger}
/* ==================== Contact Variables ==================== */
:root {
    /* Contact Typography */
    --contact-titleSize: var(--fontSize-2xl);
    --contact-subtitleSize: var(--fontSize-xl);
    --contact-textSize: var(--fontSize-base);
    --contact-labelSize: var(--fontSize-sm);
    --contact-buttonSize: var(--fontSize-base);
    
    /* Contact Colors */
    --contact-background: var(--background-raised);
    --contact-textColor: var(--text);
    --contact-titleColor: var(--text);
    --contact-labelColor: var(--text);
    --contact-borderColor: var(--global-border);
    --contact-linkColor: var(--brand);
    --contact-accentColor: var(--brand-accent);
    --contact-focusColor: var(--brand-focus);
    --contact-errorColor: var(--sale);
    
    /* Contact Layout & Spacing */
    --contact-padding: var(--global-padding);
    --contact-gap: var(--global-gap);
    --contact-margin: var(--global-margin);
    --contact-radius: var(--global-radius);
    --contact-formGap: calc(var(--global-gap) * 0.5);
    
    /* Contact Form Variables */
    --contact-inputPadding: 0.75rem 1rem;
    --contact-inputBorder: var(--global-border);
    --contact-inputBorderRadius: var(--global-radius);
    --contact-inputBackground: var(--background);
    --contact-inputFocusBorder: 2px solid var(--brand-focus);
    --contact-inputErrorBorder: 2px solid var(--sale);
    
    /* Contact Button Variables */
    --contact-buttonSize: var(--global-buttonSize);
    --contact-buttonColor: var(--global-buttonColor);
    --contact-buttonBorder: var(--global-buttonBorder);
    --contact-buttonBackground: var(--global-buttonBackground);
    --contact-buttonPadding: var(--global-buttonPadding);
    --contact-buttonRadius: var(--global-buttonRadius);
    
    /* Contact Button Hover States */
    --contact-buttonBackgroundHover: var(--global-buttonBackgroundHover);
    --contact-buttonColorHover: var(--global-buttonColorHover);
    --contact-buttonBorderHover: var(--global-buttonBorderHover);
    --contact-buttonPaddingHover: var(--global-buttonPaddingHover);
    --contact-buttonTransition: var(--global-buttonTransition);
    
    /* Contact Map Variables */
    --contact-mapHeight: 450px;
    --contact-mapBorderRadius: var(--global-radius);
    --contact-mapBorder: var(--global-border);
    
    /* Contact Info Variables */
    --contact-infoBackground: var(--background-raised);
    --contact-infoPadding: var(--global-padding);
    --contact-infoBorderRadius: var(--global-radius);
    --contact-infoBorder: var(--global-border);
    
    /* Contact Hours Variables */
    --contact-hoursBackground: var(--background-raised);
    --contact-hoursPadding: var(--global-padding);
    --contact-hoursBorderRadius: var(--global-radius);
    --contact-hoursBorder: var(--global-border);
}

/* ==================== Contact Page Layout ==================== */
/* Main contact wrapper */
.wrapper .grid.fixed .container .col-1.maxInner.ctrPad32 {
    padding: var(--contact-padding);
    max-width: 1600px;
    margin: 0 auto;
}

/* ==================== Contact Breadcrumbs ==================== */
.contact .contact-breadcrumbs {
    margin-bottom: var(--contact-margin);
    padding-bottom: calc(var(--contact-margin) * 0.5);
    border-bottom: var(--contact-borderColor);
}

.contact .breadcrumb-link {
    color: var(--contact-textColor);
    text-decoration: none;
    transition: var(--contact-buttonTransition);
    font-size: var(--contact-textSize);
}

.contact .breadcrumb-link:hover {
    color: var(--contact-linkColor);
}

.contact .breadcrumb-current {
    color: var(--contact-linkColor);
    font-weight: bold;
}

.contact .breadcrumb-separator {
    color: var(--contact-accentColor);
    margin: 0 0.5rem;
}

.contact .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==================== Contact Header ==================== */
.contact .contact-header {
    margin-bottom: var(--contact-margin);
    text-align: center;
}

.contact .contact-title {
    font-size: var(--contact-titleSize);
    color: var(--contact-titleColor);
    margin-bottom: calc(var(--contact-margin) * 0.5);
    font-family: var(--font-bold);
}

.contact .contact-subtitle {
    font-size: var(--contact-textSize);
    margin: 0;
    font-style: italic;
}

/* ==================== Contact Map Styles ==================== */
.contact .contact-map-section {
    margin-bottom: var(--contact-margin);
}

.contact .contact-map-container {
    position: relative;
    width: 100%;
    height: var(--contact-mapHeight);
    border-radius: var(--contact-mapBorderRadius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.contact .contact-map-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--contact-mapBorderRadius);
}

/* ==================== Contact Content Grid ==================== */
.contact .contact-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--contact-gap);
    margin-bottom: var(--contact-margin);
}

/* ==================== Contact Form Styles ==================== */

.contact .contact-form-section li{
    list-style: none;
}

.contact .contact-form-section {
    order: 1;
}

.contact .contact-form-container {
    background: var(--contact-background);
    padding: var(--contact-padding);
    border-radius: var(--contact-radius);
    border: var(--contact-borderColor);
    box-shadow: var(--shadow-sm);
    height: fit-content;
}

.contact .contact-form-header {
    margin-bottom: var(--contact-formGap);
    text-align: center;
}

.contact .contact-form-title {
    font-size: var(--contact-subtitleSize);
    color: var(--contact-titleColor);
    margin-bottom: calc(var(--contact-formGap) * 0.5);
    font-family: var(--font-bold);
}

.contact .contact-form-description {
    font-size: var(--contact-textSize);
    margin: 0;
    font-style: italic;
}

.contact .contact-form-wrapper {
    margin-top: var(--contact-formGap);
}

/* Form Input Styles */
.contact .contact-form-wrapper input[type="text"],
.contact .contact-form-wrapper input[type="email"],
.contact .contact-form-wrapper input[type="tel"],
.contact .contact-form-wrapper textarea,
.contact .contact-form-wrapper select {
    width: 100%;
    padding: var(--contact-inputPadding);
    border: var(--contact-inputBorder);
    border-radius: var(--contact-inputBorderRadius);
    background: var(--contact-inputBackground);
    font-size: var(--contact-textSize);
    color: var(--contact-textColor);
    font-family: var(--font-body);
    transition: var(--contact-buttonTransition);
    margin-bottom: var(--contact-formGap);
}

.contact .contact-form-wrapper input:focus,
.contact .contact-form-wrapper textarea:focus,
.contact .contact-form-wrapper select:focus {
    outline: none;
    border: var(--contact-inputFocusBorder);
    box-shadow: 0 0 0 3px oklch(from var(--contact-focusColor) l c h / 0.15);
}

.contact .contact-form-wrapper input.error,
.contact .contact-form-wrapper textarea.error,
.contact .contact-form-wrapper select.error {
    border: var(--contact-inputErrorBorder);
}

/* Form Labels */
.contact .contact-form-wrapper label {
    display: block;
    font-size: var(--contact-labelSize);
    color: var(--contact-labelColor);
    margin-bottom: calc(var(--contact-formGap) * 0.5);
    font-family: var(--font-bold);
}

/* Form Textarea */
.contact .contact-form-wrapper textarea {
    min-height: 120px;
    resize: vertical;
}

/* Form Submit Button */
.contact .contact-form-wrapper input[type="submit"],
.contact .contact-form-wrapper button[type="submit"] {
    font-size: var(--contact-buttonSize);
    color: var(--contact-buttonColor);
    background: var(--contact-buttonBackground);
    border: var(--contact-buttonBorder);
    border-radius: var(--contact-buttonRadius);
    padding: var(--contact-buttonPadding);
    cursor: pointer;
    transition: var(--contact-buttonTransition);
    font-family: var(--font-bold);
    width: auto;
    line-height: normal;
    min-width: 150px;
}

.contact .contact-form-wrapper input[type="submit"]:hover,
.contact .contact-form-wrapper button[type="submit"]:hover {
    background: var(--contact-buttonBackgroundHover);
    color: var(--contact-buttonColorHover);
    border: var(--contact-buttonBorderHover);
    padding: var(--contact-buttonPaddingHover);
}

/* Form Validation Messages */
.contact .contact-form-wrapper .error-message {
    color: var(--contact-errorColor);
    font-size: var(--contact-labelSize);
    margin-top: calc(var(--contact-formGap) * 0.5);
    display: block;
}

.contact .contact-form-wrapper .success-message {
    color: var(--contact-linkColor);
    font-size: var(--contact-textSize);
    margin-top: var(--contact-formGap);
    padding: var(--contact-padding);
    background: oklch(from var(--contact-focusColor) l c h / 0.1);
    border: 1px solid var(--contact-focusColor);
    border-radius: var(--contact-radius);
}

/* ==================== Contact Info Section ==================== */
.contact .contact-info-section {
    order: 2;
}

.contact .contact-info-container {
    display: flex;
    flex-direction: column;
    gap: var(--contact-formGap);
    height: fit-content;
}

/* Contact Info Block */
.contact .contact-info-block {
    background: var(--contact-infoBackground);
    padding: var(--contact-infoPadding);
    border-radius: var(--contact-infoBorderRadius);
    border: var(--contact-infoBorder);
    box-shadow: var(--shadow-sm);
}

.contact .contact-info-header {
    margin-bottom: var(--contact-formGap);
    text-align: center;
}

.contact .contact-info-title {
    font-size: var(--contact-subtitleSize);
    color: var(--contact-titleColor);
    margin: 0;
    font-family: var(--font-bold);
}

.contact .contact-info-content {
    display: flex;
    flex-direction: column;
    gap: var(--contact-formGap);
}

/* Contact Info Items */
.contact .contact-info-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--contact-formGap) * 0.25);
}

.contact .contact-info-label {
    font-size: var(--contact-labelSize);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact .contact-info-value {
    font-size: var(--contact-textSize);
    color: var(--contact-textColor);
    text-decoration: none;
    transition: var(--contact-buttonTransition);
}

.contact .contact-phone:hover,
.contact .contact-email:hover {
    color: var(--contact-linkColor);
}

.contact .contact-address-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--contact-formGap) * 0.25);
}

.contact .contact-address-content span {
    display: block;
    line-height: 1.4;
}

/* Contact Hours Block */
.contact .contact-hours-block {
    background: var(--contact-hoursBackground);
    padding: var(--contact-hoursPadding);
    border-radius: var(--contact-hoursBorderRadius);
    border: var(--contact-hoursBorder);
    box-shadow: var(--shadow-sm);
}

.contact .contact-hours-header {
    margin-bottom: var(--contact-formGap);
    text-align: center;
}

.contact .contact-hours-title {
    font-size: var(--contact-subtitleSize);
    color: var(--contact-titleColor);
    margin: 0;
    font-family: var(--font-bold);
}

.contact .contact-hours-content {
    text-align: center;
}

.contact .contact-hours-list {
    font-size: var(--contact-textSize);
    color: var(--contact-textColor);
    line-height: 1.6;
}

.contact .contact-hours-list div {
    margin-bottom: calc(var(--contact-formGap) * 0.5);
    padding: calc(var(--contact-formGap) * 0.25) 0;
    border-bottom: var(--contact-borderColor);
}

.contact .contact-hours-list div:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

/* ==================== Contact Responsive Styles ==================== */
@media screen and (max-width: 1024px) {
    .contact .contact-content-grid {
        grid-template-columns: 1fr;
        gap: var(--contact-margin);
    }
    
    .contact .contact-form-section {
        order: 1;
    }
    
    .contact .contact-info-section {
        order: 2;
    }
}

@media screen and (max-width: 768px) {
    .contact .contact-title {
        font-size: var(--contact-subtitleSize);
    }
    
    .contact .contact-form-title,
    .contact .contact-info-title,
    .contact .contact-hours-title {
        font-size: var(--contact-textSize);
    }
    
    .contact .contact-form-container,
    .contact .contact-info-block,
    .contact .contact-hours-block {
        padding: calc(var(--contact-padding) * 0.75);
    }
    
    .contact .contact-map-container {
        height: 300px;
    }
}

@media screen and (max-width: 480px) {
    .contact .wrapper .grid.fixed .container .col-1.maxInner.ctrPad32 {
        padding: calc(var(--contact-padding) * 0.5);
    }
    
    .contact .contact-form-wrapper input[type="submit"],
    .contact .contact-form-wrapper button[type="submit"] {
        width: 100%;
    }
    
    .contact .contact-map-container {
        height: 250px;
    }
    
    .contact .contact-header {
        text-align: left;
    }
    
    .contact .contact-form-header,
    .contact .contact-info-header,
    .contact .contact-hours-header {
        text-align: left;
    }
}

/* ==================== Contact Form Specific Elements ==================== */
/* Form Field Groups */
.contact .contact-form-wrapper .field-group {
    margin-bottom: var(--contact-formGap);
}

.contact .contact-form-wrapper .field-group:last-child {
    margin-bottom: 0;
}

/* Required Field Indicators */
.contact .contact-form-wrapper label.required::after {
    content: " *";
    color: var(--contact-errorColor);
}

/* Form Help Text */
.contact .contact-form-wrapper .help-text {
    font-size: var(--contact-labelSize);
    color: var(--contact-accentColor);
    margin-top: calc(var(--contact-formGap) * 0.5);
    font-style: italic;
}

/* Form Loading State */
.contact .contact-form-wrapper .loading {
    opacity: 0.6;
    pointer-events: none;
}

.contact .contact-form-wrapper .loading input[type="submit"],
.contact .contact-form-wrapper .loading button[type="submit"] {
    background: var(--contact-accentColor);
    color: var(--contact-buttonColorHover);
    cursor: not-allowed;
}


/* Contact form success animation */
.contact .contact-form-wrapper .success-message {
    animation: slideInDown 0.5s ease;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}