@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 {
    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.

   THIS CLIENT: two families, four files, no bold anywhere in the design.
     body.ttf     Inter Regular        running text, nav links, CTA labels
     bold.ttf     EB Garamond Regular  NOT a bold - see below
     display.ttf  EB Garamond Regular  the same file as bold, deliberately
     accent.ttf   Inter Medium         product prices, the design's only 500

   The bold SLOT holds EB Garamond Regular by decision. That makes --font-heading's
   default ('citrfontbold') exactly the design's heading face - EB Garamond 400 -
   so it needs no repoint, and the ~186 platform citrfontbold declarations
   (PLP/PDP titles, basket furniture) go serif to match. --font-bold stays on
   the body face, so nav links and UI emphasis remain Inter 400 as drawn.
   Fonts are the Google Fonts static instances, swapped in 2026-10-12
   (previously PT Serif and DM Sans).
   =========================================================================== */
:root:root {
    --font-body:    'citrfontreg';
    --font-heading: 'citrfontbold';
    --font-bold:    var(--font-body);
    --font-display: 'citrfontboldalt';
    --font-accent:  'citrfontaccent';
}


/* ===========================================================================
   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 is the design's "brandColor", the CTA fill, and
       matches the badge's blue.

       FOUR OF THESE ARE PROVISIONAL KIT PLACEHOLDERS, NOT CLIENT VALUES - the
       design does not answer them and the client chose to leave them for now
       (briefs/JBRE.md, Q7). Revisit before go-live:
         --brand-focus   an unrelated navy. --brand-dark points at it, which is
                         why the nav colours and the button ramp below are set
                         explicitly rather than left to follow --brand-dark.
                         The badge's green, #203D23, is the obvious candidate.
         --brand-accent  near-black, so Add to Cart is dark while every other
                         CTA is blue. #2E6387 would unify them (6.46:1).
         --brand-link    near-black; close to the design's one link.
         --sale          a red, 5.88:1 on white - usable as it stands. */
    --brand: #2E6387;
    --brand-dark: var(--brand-focus);
    --brand-accent: #1E1E1E;
    --brand-link: #1E1E1E;
    --brand-focus: #191937;
    --sale: #c8102e;

    /* Ink on brand surfaces. White on --brand is 6.46:1; on the provisional
       accent, 16.7:1. */
    --text-on-brand: #FFFFFF;
    --text-on-accent: #FFFFFF;

    /* Canvas and ink. --text is the design's "Dark". The design also uses
       #1E1E1E and #000000 for a heading and the card text; both are folded into
       this one ink by decision - indistinguishable, and not worth two rules.
       18.90:1 on --background, 17.19:1 on --background-raised. */
    --background: #FFFFFF;
    --background-raised: #F4F4F4;
    --text: #11110F;
    --text-inverse: #FFFFFF;

    /* Geometry. 3px everywhere is the client's decision (brief, Q10) and a
       recorded departure: the design draws 5px CTAs and square photographs and
       cards. --global-buttonRadius is left following this one value. */
    --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.

       The design's buttonText style: Inter 400 16/100%, 0.03em, as typed,
       15px 16px padding, a flat #2E6387 fill with NO border. The fill and both
       borders name --brand rather than the kit's --brand-dark, which would
       paint the provisional navy. Hover padding matches rest so the box holds
       still - the design draws no hover, so the conservative reading is a
       colour change only. */
    --global-buttonSize: var(--fontSize-md);
    --global-buttonFontFamily: var(--font-body);
    --global-buttonLetterSpacing: 0.03em;
    --global-buttonLineHeight: 1;
    --global-buttonTextTransform: none;
    --global-buttonColor: var(--text-on-brand);
    --global-buttonBorder: 1px solid var(--brand);
    --global-buttonRadius: var(--global-radius);
    --global-buttonBackground: var(--brand);
    --global-buttonPadding: 0.9375rem 1rem;
    --global-buttonBackgroundHover: var(--background);
    --global-buttonColorHover: var(--brand);
    --global-buttonBorderHover: 1px solid var(--brand);
    --global-buttonPaddingHover: var(--global-buttonPadding);
    --global-buttonRadiusHover: var(--global-radius);
    --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. Neutral defaults, kept
       by decision (brief, Q14). The design's placeholder copy belongs to other
       clients and is deliberately not transcribed anywhere in this file. */
    --copy-newsletterTitle: "Join Our Newsletter";
    --copy-newsletterBody: "Sign up for news and offers.";

    /* Homepage stripes - no CMS field exists for either. This homepage uses
       neither the statement stripe nor a signature line. */
    --copy-statementEyebrow: "";
    --copy-signature: 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; */

    /* The logo is a PATH, defaulted in 03. A reskin normally just replaces the
       file under /layout/generalLyout/. Repoint only if the client's asset
       layout differs. Nav icons are inline SVG in modules/JS/nav-icons.js. */
    /* --logo: url('/layout/generalLyout/logo.svg'); */
    /* --navIconSize: 22px; */

    /* COLOUR WORDMARK. 03 paints --logo as a mask filled with the bar's ink,
       which keeps one file correct in every nav state but reads only the ALPHA
       channel - so any logo with more than one colour comes out flat.

       Most clients supply a colour PNG. Uncomment all three to paint it as an
       image instead. All three are required: --logoInk must go transparent or
       the fill covers the whole box once the mask stops clipping it.

       Trade-off: an image does not follow the bar's ink, so a site needing both
       a light and a dark bar needs two files. */
    /* --logoMask: none; */
    /* --logoImage: var(--logo); */
    /* --logoInk: transparent; */

    /* --- Carousels (defaults in 05) -------------------------------------- */

    /* Dots and the scale-bounce arrow hover are both kept on their defaults
       (brief, section 8) - nothing in the design shows either. */

    /* 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; */
}


/* ===========================================================================
   4a. SWITCHES SET FOR THIS CLIENT
   ---------------------------------------------------------------------------
   Everything above in block 4 is the kit's commented catalogue, left intact so
   the options stay discoverable. The live differences from framework default
   are here, together, so they can be read at a glance.
   =========================================================================== */
:root:root {

    /* --- Layout -----------------------------------------------------------

       The design insets every contained stripe by 20px on a 1440 canvas (the
       hero and cards are 1400 wide). --gutter is 02's token and defaults to a
       clamp that reaches 48px, so it is set here, once, rather than in each
       stripe. It also reaches the PLP and PDP, which the design does not draw;
       20px is the design's only side margin, so that is the consistent reading. */
    --gutter: 1.25rem;

    /* The design's body-md: Inter 20/150% under every stripe heading. 04's
       default is --fontSize-md (16px). */
    --bannerDescSize: 1rem;

    /* The hero stage: 781px on a 1440 canvas is 54vw. The floor keeps it usable
       on narrow desktops; the ceiling holds the drawn height on wide screens.
       Read by the hero-fade stripe. */
    --heroHeight: clamp(30rem, 54vw, 48.75rem);

    /* --- Nav bar (defaults in 03) ------------------------------------------

       A LIGHT BAR: white, ink links and icons. This is the INVERSE of 03's
       default, which paints --brand-dark - here the provisional navy - so every
       colour the bar and its panels read is set explicitly. The nav does not
       float over the hero (the design draws the bar above an inset hero), so
       the four --navSolid-* in block 2 are inert.

       --mobileHamburgerColor names a raw colour, not var(--navIcons) - see 03's
       comment on why an indirection there bakes in the wrong value. */
    --navBackground: var(--background);
    --navIcons: var(--text);
    --navLinks: var(--text);
    --navLinks-hover: var(--brand);
    --mobileNavBackground: var(--background);
    --mobileNavLinkColor: var(--text);
    --mobileHamburgerColor: var(--text);
    --searchText: var(--text);
    --searchIconColor: var(--text);
    --searchPlaceholderColor: oklch(from var(--text) l c h / 0.6);

    /* No accent seam - the design draws no rule under the bar. */
    --navBorderBottom: 0;

    /* Nav links: Inter 400 16px, as typed, normal tracking. Only the size
       differs from 03's default. 40px side padding is the design's. */
    --nav-fontSize: var(--fontSize-md);
    --navPadding: 5px 2.5rem;

    /* --- Wordmark ------------------------------------------------------------

       The colour badge, PAINTED rather than masked. It carries dark green, blue
       and white, and 03's mask reads only alpha, so masked it would come out as
       a solid badge silhouette with the bicycle and lettering lost. All three
       paint tokens are required - see 03, Brand Assets.

       --logo points at the PNG. logo.svg at 03's default path is a deliberate
       1x1 transparent placeholder: 03 hardcodes that path so it must resolve,
       and the kit's placeholder there is the Citrus Lime logo.

       The design draws the badge in a 121px box. logo.png is 242x197 - the
       cropped badge at 2x. */
    --logo: url('/layout/generalLyout/logo.png');
    --logoMask: none;
    --logoImage: var(--logo);
    --logoInk: transparent;
    --logoWidth: 7.5rem;
}
/* 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 slots
   ---------------------------------------------------------------------------
   FOUR physical slots. The family names below are fixed kit vocabulary and are
   never edited - no rule anywhere names them directly. A reskin swaps the FILES
   in /font/ and points the ROLE TOKENS in 01-CC-Brand.css at whichever slots it
   needs; every rule in the kit uses var(--font-body|bold|display|accent).

   woff2 is listed first and ttf second, so a client may hand over either format
   and the browser takes the first it understands. A slot no role token names is
   never downloaded, so an unused slot costs nothing and its files may simply be
   absent - which is how a two-face client works (point --font-bold at the same
   family as --font-body rather than shipping a duplicate font).

     slot              intended role              files
     citrfontreg       body / running text        font/body.woff2 | body.ttf
     citrfontbold      bold + semantic headings   font/bold.woff2 | bold.ttf
     citrfontboldalt   editorial display face     font/display.woff2 | display.ttf
     citrfontaccent    optional fourth face       font/accent.woff2 | accent.ttf

   `font-weight: normal !important` is load-bearing on all four: these are
   single-weight files, and without it the browser synthesises a fake bold on
   any element that also carries a font-weight. Do not remove it. */

@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
   ---------------------------------------------------------------------------
   One optional wrapper that holds a run of homepage stripes to a maximum
   measure and centres it. The kit's default page is edge to edge: every stripe
   is full-bleed and takes its own horizontal inset from --gutter. A design that
   sits on a fixed measure instead wraps that run in <div class="cc-container">
   in default.aspx and sets --container-maxWidth in 01.

   THE DEFAULTS ARE A NO-OP. --container-maxWidth is `none` and
   --container-gutter is 0, so the element is a transparent pass-through and
   adding the div changes nothing until a client sets a value. That is what
   makes it safe to carry in the page template and to copy onto a built site.

   The gutter defaults to 0 and NOT to --gutter deliberately. Stripes already
   apply --gutter to their own content, so a container that padded as well would
   inset the same text twice and the two insets would not stay in step. A client
   that wants the container to carry the inset instead sets it here and the
   stripes' own --gutter then measures from the container edge.

   A stripe that must stay full-bleed inside a contained page goes OUTSIDE the
   container: close the div before it and open a new one after. The absence of a
   breakout rule is deliberate. The usual `margin-inline: calc(50% - 50vw)`
   trick measures 100vw INCLUDING the scrollbar, so it overflows the page by the
   scrollbar width on every desktop browser that shows one. Splitting the
   container has no such failure mode and needs no CSS at all. */
.cc-container {
    max-width: var(--container-maxWidth);
    margin-inline: auto;
    padding-inline: var(--container-gutter);
}


/* Design Tokens
   Brand tokens (--brand, --brand-dark, --brand-accent, etc.)
   live in CC-Brand.css. That file must load before this one --
   the oklch() derivations below depend on those variables. */

:root {

    /* Layout and Typography */

    --global-NavFooterWidth: 100% !important;

    /* Spacing */
    --global-padding: 1rem;
    --global-gap:     1rem;
    --global-margin:  1rem;

    /* Section rhythm -- the vertical tier every homepage stripe pads with.
       lg is the standard gap between stripes; sm is the tightened variant for a
       stripe that opens hard against the one above it, rather than sitting in
       its own air. Named no stripe on purpose: this is a framework file. */
    --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
       -----------------------------------------------------------------------
       The small end (xs..md) is PINNED: flat sizes on every viewport, because
       body copy, labels and inputs want a constant reading size, not one that
       shrinks with the window. They stay in rem so user zoom still scales them
       (1rem = 16px at the default root size).

       The display end (mdl..3xl) is FLUID. Each ramp hits its floor at a 375px
       viewport and its ceiling at 1440px, and every ceiling is the size this
       scale used to be pinned at - so nothing changes at 1440px and wider, and
       below that headings come down to something a phone can hold instead of
       staying at a flat 48px.

       The middles are written `rem + vw`, never bare `vw`. A bare-vw middle
       ignores the user's font size and breaks browser zoom; the rem term keeps
       zoom working.

       mdl is a new step. The scale used to jump straight from 1rem to 2rem with
       nothing in between, so any sub-heading either shouted or sat at body size
       and bands invented their own one-off values to cope. */
    --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 -- read by the h1-h6 rule further down. Defaults to
       --font-bold, so a file that never sets it renders exactly as it did when
       that rule named --font-bold directly.

       It exists so the two jobs --font-bold used to do can come apart. That one
       role carried both semantic headings AND bold UI emphasis - nav links,
       prices, stock labels, form labels, button text - so there was no way to
       ask for a regular-weight interface while keeping headings bold. Now
       --font-heading serves the headings and --font-bold serves the emphasis,
       and 01 repoints either without disturbing the other.

       The default is deliberately var(--font-bold) rather than a slot name: it
       keeps the token invisible until a client wants the split, and a site whose
       01 predates the token needs no edit to keep its current headings. */
    --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 -- read by the .cc-container rule above, which is where
       the reasoning lives. Both values are a no-op by design: `none` leaves the
       wrapper full-width, and 0 leaves the horizontal inset to the stripes
       themselves, so a page that carries the div but sets neither renders
       exactly as it did before. Set --container-maxWidth in 01 to hold the
       homepage to a measure. */
    --container-maxWidth: none;
    --container-gutter: 0;






    /* Auto-derived -- no need to touch for a reskin */

    /* Brand shades -- each base token gets -light and -dark only.
       --brand-dark is a base reskin token (CC-Brand.css),
       so --brand has only a -light shade here. */
    --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);

    --navHeight:90px;

    /* 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);
    /* Nav link FACE. Defaults to the body face, which is what these inherited
       before the token existed on every site whose platform rules do not name
       one. Point it at --font-bold or --font-accent for a nav in a different
       voice from body copy. It exists because a site that needed this had no
       way to ask for it except by hardcoding a face name into this file. */
    --navItemsFontFamily: var(--font-body);
    --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;

    /* total bar height under cl-nav-2row (see below) - row 1 (logo/search/
       icons) plus row 2 (nav links) plus breathing room. Token-driven rather
       than a hardcoded literal so a taller logo/link set can be accommodated
       per brand, same convention as --heroHeight. */
    --nav2RowHeight: 132px;

    /* Space between the icons in that cluster. Defaults to 0, which is what a
       flex row does anyway, so spacing stays whatever the platform gives its
       icons until a site says otherwise. */
    --navIconsGap: 0;

    /* Vertical placement of the exposed bar on desktop. #search is absolutely
       positioned and this offset is measured from its positioned ancestor, not
       from the bar, so there is no formula that centres it - it is a value to
       nudge until the field lines up with the icon cluster beside it. The
       default is the long-standing literal. */
    --searchTop: calc(-90px + 1.5rem);

    /* Brand assets -- see the Brand Assets section at the foot of this file.
       --logo is a PATH, deliberately defaulted rather than left unset: a
       reskin replaces the FILE at this path, exactly as it does with the
       fonts. The nav icons are inline SVG written by modules/JS/nav-icons.js;
       --navIconSize sizes them.

       (`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');


    /* Wordmark paint mode. These three defaults reproduce the mask exactly, so
       a site that never touches them is byte-identical in behaviour to before
       the switch existed. A colour logo flips all three - see Brand Assets at
       the foot of this file. */
    /* Width of the wordmark box. `auto` lets the platform img size it, which is
       the old behaviour. Set a length or a clamp where that box comes out wrong
       - image mode in particular fits the artwork to this box, so a box the
       wrong size shows a small or letterboxed wordmark.

       !important because the platform sets a width on this element and beats a
       plain (0,1,0) rule. The mobile rule below has always done the same; this
       makes the two breakpoints agree. */
    --logoWidth: auto;
    --logoMask: var(--logo);
    --logoImage: none;
    --logoInk: currentColor;

    /* 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: white;
    --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);
    font-family: var(--navItemsFontFamily);
    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.
   ============================================================================ */

/* The platform toggle, hidden because the field is now in the bar. Keyed on
   data-link at ANY depth: this was `.menu-icons-header > .icon-search`, which
   assumed the toggle is a direct child of the cluster. Sites that nest it one
   level deeper kept a second magnifier sitting beside the field. data-link is
   what the rest of this file keys icons on, and it states the toggle's JOB.

   The class selector is kept alongside for markup without data-link. Neither
   can reach the glyph inside the field: that is a <span class="icon-search">
   inside #search, outside .menu-icons-header, and it carries no data-link. */
body.cl-search-exposed .wrapper.masthead [data-link="search"],
body.cl-search-exposed .wrapper.masthead .icon-search:not(#search .icon-search) {
    display: none !important;
}

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;
    }
}

/* ==================== Nav 2-Row (Search exposed, links on row 2) ====================
   OPT-IN, off by default, DESKTOP ONLY. Always paired with cl-search-exposed
   (add both classes to <body>) - this block only handles the row split, it
   relies on cl-search-exposed above to keep #search visible and in normal
   flow (that block already neutralises #search's own position:absolute at
   min-width:1024px, since body.cl-search-exposed #search.srchCtr's
   display:flex + higher specificity wins over it).

   Mechanism: .navIcons (logo/nav-links/icon-cluster) and .menuOptions
   (search/login/basket panels) are SIBLING <div>s under one shared .col-1
   parent. Nothing in this file keys off .menuOptions as a box (only its
   children's ids/classes are ever targeted), so giving both wrappers
   display:contents is safe - it flattens their children into one shared
   layout context, letting a single grid on that shared .col-1 place logo,
   search, icons and nav-links together without moving any markup.

   SELECTOR NOTE: .navIcons and .menuOptions both also carry the generic
   .col-1 class themselves (col-1 is reused everywhere as a layout primitive),
   so the grid rule below targets the OUTER .col-1 via a child combinator
   from .container - a plain descendant selector would also match .navIcons/
   .menuOptions and, by specificity, could beat the display:contents rules.

   Both display:contents overrides are themselves scoped through
   .wrapper.masthead, not just body.cl-nav-2row - .navIcons already has a
   real rule elsewhere in this file (".wrapper.masthead .navIcons { display:
   flex; ... }", three classes) that otherwise wins on specificity alone
   regardless of source order, silently keeping it flex and breaking every
   grid-area placement inside it (this shipped broken once already - the
   whole row collapsed back to one line with nav-links absent, because
   .logoContainer/.menu-icons-header never became real grid items). Matching
   that rule's own three-class shape here (.wrapper.masthead + .navIcons,
   plus body.cl-nav-2row) is what actually beats it. */
@media screen and (min-width: 1024px) {
    body.cl-nav-2row .wrapper.masthead .container > .col-1 {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "logo search icons"
            "links links links";
        align-items: center;
        /* .navIcons normally supplies this padding + ink colour itself;
           both are lost once it becomes display:contents, so restated here */
        padding: var(--navPadding);
        color: var(--navIcons);
    }

    body.cl-nav-2row .wrapper.masthead .navIcons,
    body.cl-nav-2row .wrapper.masthead .menuOptions {
        display: contents;
    }

    body.cl-nav-2row .logoContainer {
        grid-area: logo;
    }

    body.cl-nav-2row #search.srchCtr {
        /* #search is `position: absolute` unconditionally on desktop (the
           plain cl-search-exposed block above, id selector) so its
           containing block is .wrapper.masthead (position: fixed) rather
           than this grid - grid-area is a no-op on an abspos item whose
           containing block isn't the grid itself, which is exactly why this
           shipped floating off the top of the bar (a negative computed y)
           instead of sitting in its cell. Back to a real in-flow grid item;
           --searchTop/Left/Right/Width (the plain exposed-search block's own
           placement knobs) simply don't apply once this class is on. */
        position: static;
        grid-area: search;
        justify-self: center;
    }

    /* login/basket are triggered popovers anchored to the icon cluster, not
       persistent bar content - they share its cell rather than needing a
       placement of their own */
    body.cl-nav-2row .menu-icons-header,
    body.cl-nav-2row #login.loginCtr,
    body.cl-nav-2row #basket.basketCtr {
        grid-area: icons;
    }

    body.cl-nav-2row #navi.ctrNavigation {
        grid-area: links;
        justify-content: center;
        width: 100%;
    }

    /* --nav2RowHeight replaces the plain framework's 115px single-row height
       (set unconditionally above) with room for both rows */
    body.cl-nav-2row .wrapper.masthead {
        height: var(--nav2RowHeight);
    }

    body.cl-nav-2row {
        padding-top: var(--nav2RowHeight) !important;
    }
}



/* ==================== 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;
        gap: var(--navIconsGap);
    }
    }

    

    .logoContainer {
        width: auto !important;
    }

    /*
    .logo {
        max-width: 110px !important;
    } */

    body {
        padding-top: var(--navHeight);
    }

    #search.srchCtr {
        max-width: 100%;
    }

    .ctrNavigation {
        top: 50px !important;
    }
    

/* Desktop */
@media screen and (min-width: 1024px) {
    #search {
        position: absolute;
        top: var(--searchTop);
        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: var(--navHeight);
    }

    .menu-icons-header {
        width: var(--navIconsWidth);
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: var(--navIconsGap);
    }

    #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: var(--navHeight);
    }

    /* 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: var(--logoWidth) !important;
    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(--global-buttonBackground);
}

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 as a CSS MASK, nav icons as INLINE SVG
   ---------------------------------------------------------------------------
   Promoted out of the client layer: this is mechanism every client needs and
   only the assets differ. Both paint in currentColor, so they inherit whatever
   ink the bar is painting and follow a reskin, a scroll state and a
   transparent-over-hero state with no second copy and no edit here.

   To reskin the wordmark: replace the file under /layout/generalLyout/, or
   repoint the --logo token from 01-CC-Brand.css. To reskin the nav icons:
   edit the path data in modules/JS/nav-icons.js.
   =========================================================================== */

/* --- 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.

   TWO PAINT MODES. The default is the mask: --logo is filled with currentColor,
   so one file follows the bar's ink through a reskin, a scroll state and
   transparent-over-hero. That only works for single-colour artwork, because a
   mask reads the ALPHA channel and throws the colours away.

   For a colour logo - which is most clients, since most supply a PNG - set all
   three tokens in 01 and the file paints as an image instead:

       --logoMask: none;
       --logoImage: var(--logo);
       --logoInk: transparent;

   All three are required. --logoInk must go transparent or the background
   colour fills the whole box once the mask stops clipping it, and --logoMask
   must go none or the artwork is still being cut to its own silhouette.

   The cost of image mode is that the wordmark no longer follows the bar's ink,
   so a client needing light and dark bars needs two files. That is a real
   trade, which is why mask remains the default rather than the other way
   round. */
.logoContainer {
    -webkit-mask: var(--logoMask) left center / contain no-repeat;
            mask: var(--logoMask) left center / contain no-repeat;
    background: var(--logoImage) left center / contain no-repeat;
    background-color: var(--logoInk);
}

/* The platform emits an <img> inside this container on some sites and an empty
   <a> on others. In MASK mode it is clipped to the wordmark silhouette and lost
   under the currentColor fill, so it has never mattered. In IMAGE mode nothing
   clips it and it paints OVER --logoImage, ghosting it - which is what a
   half-masked-looking wordmark actually is.

   visibility, not display: on sites where the img is what gives the container
   its box, removing it from flow would collapse the wordmark entirely. */
.logoContainer img {
    visibility: hidden;
}

/* .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 SVG is inline markup written by modules/JS/nav-icons.js and prepended
   to each toggle, so the pips nested inside -- .basketPip (08) and
   #loggedInPip -- are left untouched.

   The platform glyph (::before) is only suppressed on a toggle that actually
   HAS the SVG (:has), so if the script fails to load the icon-font glyph
   stays and the bar degrades rather than going blank.

   The hamburger (data-link="navi") is deliberately NOT in this list: there is
   no hamburger SVG, so it keeps the platform glyph. 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"]:has(> .navIconSvg)::before,
.wrapper.masthead [data-link="login"]:has(> .navIconSvg)::before,
.wrapper.masthead [data-link="search"]:has(> .navIconSvg)::before,
#search.srchCtr .icon-search:has(> .navIconSvg)::before {
    content: none;
}

.wrapper.masthead .navIconSvg,
#search.srchCtr .navIconSvg {
    display: inline-block;
    width: var(--navIconSize);
    height: var(--navIconSize);
    vertical-align: middle;
    /* The SVG strokes in 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. */
    /* the toggle is the click target; the icon must not swallow it */
    pointer-events: none;
}


/* ===========================================================================
   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;

    /* Arrow shape and GLYPH. --splideArrowRadius defaults to the global radius so
       arrows follow the site's corner decision; 50% makes them circular
       independently of it.

       The glyph is OPT-IN and off by default: --splideArrowGlyphContent stays
       `none`, so no pseudo-element is generated and Splide's own SVG shows,
       exactly as before this existed. To supply a custom arrow set all four -
       the content token generates the box, the glyph masks it, the size scales
       it, and the svg opacity retires Splide's own.

       Masked rather than painted, so the glyph takes --splideArrowColor and
       follows every hover state for free. ONE asset serves both directions:
       --prev mirrors the same file. */
    --splideArrowRadius: var(--global-radius);
    --splideArrowGlyphContent: none;
    --splideArrowGlyph: none;
    --splideArrowGlyphSize: 45%;
    --splideArrowSvgOpacity: 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(--splideArrowRadius);
    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;
    opacity: var(--splideArrowSvgOpacity);
}

/* Custom glyph. Inert while --splideArrowGlyphContent is `none`: content:none
   generates no pseudo-element at all, so Splide's SVG is untouched. */
[data-splide-opts] .splide__arrow::before {
    content: var(--splideArrowGlyphContent);
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask: var(--splideArrowGlyph) center / var(--splideArrowGlyphSize) no-repeat;
            mask: var(--splideArrowGlyph) center / var(--splideArrowGlyphSize) no-repeat;
}

[data-splide-opts] .splide__arrow--prev::before {
    transform: scaleX(-1);
}

[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;
    /* var(--logo), not a hardcoded path. A literal here means a site whose
       wordmark is not at that exact filename gets someone else's mark, or
       nothing, from a FRAMEWORK file it must not edit. Three builds have now
       had to work around it in their client layer. */
    background: var(--logo) 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: Pedal and Power Bicycles. One white canvas, with flat #F4F4F4
   raised grounds for the product cards and the split panel. EB Garamond 400
   carries every headline over Inter 400 running text; there is no bold
   anywhere, and weight 500 appears only on prices. Photography supplies the
   colour - square-cornered, full-bleed or inset 20px, darkened by a bottom-up
   veil wherever copy sits on it. Chrome is flat: no borders, shadows or rules,
   one blue (#2E6387) for filled CTAs and a white CTA on dark photography.

   A rule belongs here only if it concerns a surface that vocabulary does not
   already cover. One has so far: the desktop search drop-down (Nav, below).

   The one likely candidate - the colour badge, which 03 would otherwise mask
   to a flat silhouette - did NOT need a rule. BREM needed two here for the same
   problem; the kit has since promoted them into 03 as the --logoMask /
   --logoImage / --logoInk switch, set in 01. If the badge renders flat or
   ghosted, fix it there, not here.

   The footer wordmark needed nothing either: 06 paints var(--logo) as a plain
   background image - never a mask - so the badge 01 points at arrives there in
   colour with no further work.
   =========================================================================== */

:root {
    /* Client-local values, --skin-* prefix. */

    /* Desktop search drop-down (see Nav below). --skin-searchPanelTop is where
       the panel starts, measured from the top of the viewport: the bottom of
       the bar. Nudge it if a gap or overlap shows under the bar. */
    --skin-searchPanelTop: var(--navHeight);
    --skin-searchPanelPadding: 1.5rem;
    --skin-searchFieldHeight: 52px;
    --skin-searchFieldMaxWidth: 640px;
    --skin-searchOverlay: var(--black-50);

    /* Top CTA strip (see CTA strip below). */
    --skin-ctaPaddingBlock: 0.75rem;
    --skin-ctaPaddingInline: clamp(var(--gutter), 5vw, 6rem);
    --skin-ctaGap: 2rem;

    /* Mobile search row (see Nav below): the field plus breathing room. */
    --skin-mobileSearchRow: calc(var(--searchHeight) + 1rem);
    /* the mobile body offset 03 already applies (its unscoped 115px
       !important); the search row is added on top of it */
    --skin-mobileNavOffset: 115px;
}


/* ==================== Nav (03 overrides) ==================== */

/* Search drop-down, DESKTOP ONLY. This site runs search in toggle mode (no
   cl-search-exposed), but 03's desktop #search rule still pins the field to
   the exposed-mode spot ON TOP of the bar, and with a white field on a white
   bar it reads as an empty box. When the magnifier opens it (the platform
   stamps .tbcntOpen on .srchCtr), it becomes a full-width white panel under
   the bar with a dimmed page beneath.

   #search itself covers the whole viewport below the bar. One gradient paints
   both layers: white for the panel's height, then the overlay. That keeps the
   panel and the dimmed page in one element, so there is no z-index contest
   with the masthead's stacking context.

   pointer-events: none on the overlay layer lets a click on the dimmed page
   reach the page instead of being swallowed. The field itself stays
   clickable. Mobile keeps the platform's own inline field. */
@media screen and (min-width: 1024px) {
    .wrapper.masthead #search.srchCtr.tbcntOpen {
        position: fixed;
        top: var(--skin-searchPanelTop);
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-width: none;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: var(--skin-searchPanelPadding) var(--gutter);
        margin: 0;
        border: 0;
        border-radius: 0;
        z-index: 1000;
        background: linear-gradient(
            to bottom,
            var(--background) 0 calc(var(--skin-searchFieldHeight) + 2 * var(--skin-searchPanelPadding)),
            var(--skin-searchOverlay) 0
        );
        backdrop-filter: var(--mobileNavBlur);
        pointer-events: none;
    }

    .wrapper.masthead #search.srchCtr.tbcntOpen > div {
        position: relative;
        width: 100%;
        max-width: var(--skin-searchFieldMaxWidth);
        pointer-events: auto;
    }

    .wrapper.masthead #search.srchCtr.tbcntOpen .searchBoxForm,
    .wrapper.masthead #search.srchCtr.tbcntOpen .searchBoxForm:focus {
        width: 100%;
        height: var(--skin-searchFieldHeight);
        line-height: var(--skin-searchFieldHeight);
        padding: 0 1rem 0 var(--skin-searchFieldHeight);
        background: var(--background);
        color: var(--text);
        font-size: var(--fontSize-md);
        border: 1px solid oklch(from var(--text) l c h / 0.3);
        border-radius: var(--global-radius);
        box-sizing: border-box;
    }

    .wrapper.masthead #search.srchCtr.tbcntOpen .searchBoxForm:focus {
        border-color: var(--brand);
        outline: 2px solid oklch(from var(--brand) l c h / 0.25);
        outline-offset: 0;
    }

    .wrapper.masthead #search.srchCtr.tbcntOpen .icon-search {
        position: absolute;
        top: 0;
        left: 0;
        width: var(--skin-searchFieldHeight);
        height: var(--skin-searchFieldHeight);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text);
        /* the field is the click target; the glyph must not swallow it */
        pointer-events: none;
    }
}


/* Search exposed, MOBILE ONLY. 03's cl-search-exposed is all-or-nothing and
   rides on a <body> class only default.aspx can set, so this mirrors it below
   the desktop breakpoint instead: the magnifier goes, and the field sits on
   its own full-width row under the bar on every page. Desktop keeps the
   toggle and the drop-down above.

   The row hangs off the bottom of the fixed masthead (top: 100%), so it does
   not depend on how the platform lays out the bar's own children. The body
   offset grows by the row's height so it does not cover the page. */
@media screen and (max-width: 1023px) {
    .wrapper.masthead [data-link="search"],
    .wrapper.masthead .icon-search:not(#search .icon-search) {
        display: none !important;
    }

    /* display !important: the platform hides the field until its toggle opens it */
    .wrapper.masthead #search.srchCtr {
        display: flex !important;
        align-items: flex-start;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        width: auto;
        max-width: none;
        height: var(--skin-mobileSearchRow);
        margin: 0;
        padding: 0 var(--gutter);
        box-sizing: border-box;
        background: var(--navBackground);
        z-index: 1;
    }

    .wrapper.masthead #TopBanner1_clSearch1_containerSearch {
        display: flex;
        width: 100%;
        max-width: none;
        /* the icon is positioned against this box by platform CSS */
        position: relative;
    }

    .wrapper.masthead #search.srchCtr .searchBoxForm,
    .wrapper.masthead #search.srchCtr .searchBoxForm:focus {
        width: 100%;
        height: var(--searchHeight);
        line-height: var(--searchHeight);
        padding: var(--searchPadding);
        border: var(--searchBorder);
        border-radius: var(--searchRadius);
        box-sizing: border-box;
    }

    .wrapper.masthead #search.srchCtr .icon-search {
        width: var(--searchHeight);
        height: var(--searchHeight);
        line-height: var(--searchHeight);
        min-width: var(--searchHeight);
        /* the field is the click target; the glyph must not swallow it */
        pointer-events: none;
    }

    /* body {
        padding-top: calc(var(--skin-mobileNavOffset) + var(--skin-mobileSearchRow)) !important;
    }  */
}

/* Double wordmark. 03 paints the badge on .logoContainer, but the platform
   also paints a logo background on the .logo link inside it, so two showed on
   mobile. Keep the link (it is the click target), drop its paint. */
.wrapper.masthead .logoContainer .logo {
    background-image: none;
}

/* Outline nav icons. 03's `.navIcons svg { fill: currentColor }` outranks the
   svg's fill="none" attribute and floods the stroked icons solid.
   TODO: promote to the kit's 03, on the .navIconSvg rule. */
.wrapper.masthead .navIconSvg,
#search.srchCtr .navIconSvg {
    fill: none;
}


/* CTA strip above the bar (TopSubBanner.ascx). A text-only row of messages
   spread edge to edge: copy, then an underlined link.

   03's CTA rules target the old banner markup (.photo, .bannerTxtCtr) and miss
   the .cc-banner markup BannerCollectionDisplayGrid.ascx renders, so 04's photo
   tile came through unstyled. Background and ink stay on 03's --ctaBackground /
   --ctaColor. TODO: promote to the kit's 03. */
.ctaContainer .cc-collection {
    display: flex;
    justify-content: center;
    align-items: center;
    /* !important only to beat 03's own `padding: 0 !important; gap: 0
       !important` on this panel (div[id*="CTA_bannerCollectionPanel"]) */
    gap: var(--skin-ctaGap) !important;
    width: 100%;
    padding: var(--skin-ctaPaddingBlock) var(--skin-ctaPaddingInline) !important;
    box-sizing: border-box;
    /* three messages will not fit a phone: they scroll sideways, unbarred */
    overflow-x: auto;
    scrollbar-width: none;
}

.ctaContainer .cc-collection::-webkit-scrollbar {
    display: none;
}

/* 03 also gives each link a divider, block margin and inline padding */
.ctaContainer .cc-banner {
    flex: 0 0 auto;
    overflow: visible;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--ctaColor);
}

.ctaContainer .cc-banner__img {
    display: none;
}

.ctaContainer .cc-banner__body,
.ctaContainer .text-wrap {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 0.35em;
    padding: 0;
    background: none;
}

.ctaContainer .cc-banner__body {
    display: flex;
    white-space: nowrap;
}

.ctaContainer .cc-banner__title,
.ctaContainer .cc-banner__desc,
.ctaContainer .cc-banner__cta {
    font-family: var(--font-body);
    font-size: var(--ctaFontSize);
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--ctaColor);
    opacity: 1;
}

.ctaContainer .cc-banner__cta {
    font-family: var(--font-bold);
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    padding: 0;
    border: 0;
    background: none;
}

.ctaContainer .cc-banner:hover .cc-banner__cta {
    text-decoration-thickness: 2px;
}

@media screen and (max-width: 1023px) {
    .ctaContainer .cc-collection {
        padding-inline: var(--gutter) !important;
    }
}


/* ==================== Carousels (05 overrides) ==================== */


/* ==================== Footer (06 overrides) ==================== */


/* ==================== 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);
    }
}