@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.
*/
:root:root {
    --font-body:    'citrfontreg';
    --font-heading: var(--font-display);
    --font-bold:    var(--font-body);
    --font-display: 'citrfontboldalt';
    /* The accent slot CARRIES A FALLBACK, unlike the other three. Those are
       guaranteed to exist - lint fails without body and bold, and display ships
       with the kit - but accent is genuinely optional in the kit, so a build
       whose accent.woff2 has not landed yet would drop CTA labels and product
       prices to the browser default rather than to the body face. Naming
       citrfontreg behind it makes that degrade correctly. */
    --font-accent:  'citrfontaccent', 'citrfontreg';
}


/* ===========================================================================
   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 and --brand-accent are DELIBERATELY THE SAME VALUE. Add To Cart
       takes the primary brand colour, so the browse CTA and the buy CTA are the
       same pill. That was a decision, not an oversight - do not "fix" it.
       --brand-focus and --sale are absent from the design; both come from the
       client's previous site, which is why they are not the same green family
       as --brand to the last digit. */
    --brand: #7ABF41;
    --brand-dark: var(--brand-focus);
    --brand-accent: #7ABF41;
    --brand-link: #1E1E1E;
    --brand-focus: #619833;
    --sale: #c3193d;

    /* Ink on brand surfaces.
       BOTH ARE INK, NOT WHITE, AND THIS IS LOAD-BEARING. White on #7ABF41 is
       2.25:1, a hard accessibility fail; #1E1E1E on it is 7.43:1. The design
       already does this correctly. The client's live site does the opposite -
       it sets green type on white, the same failing pair - so do not carry that
       habit over. The brand green cannot legibly carry text in either
       direction; it is a fill only. */
    --text-on-brand: #1E1E1E;
    --text-on-accent: #1E1E1E;

    /* Canvas and ink. Two grounds only: white, and the #F4F4F4 panel used by
       the split sections and every product card. Never a border between them -
       the panel change IS the division. */
    --background: #FFFFFF;
    --background-raised: #F4F4F4;
    --text: #1E1E1E;
    --text-inverse: #FFFFFF;

    /* Geometry - TWO deliberate decisions, not one.
       Square everything: the search field, every image, every panel and every
       card outer are all border-radius 0 in the design. The pill is the ONE
       shape allowed to curve, and it is reserved for CTAs and carousel arrows.
       There is a third radius - 10px on the product card's inner image tile
       only - which is a --skin-* token in 99 because it is one element's crop,
       not a system value. */
    --global-radius: 0;
    --global-innerRadius: 0;
    --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. */
    /* Measured from the design's CTA: 48px tall, padding 16px 30px, DM Sans 500
       at 16px, line-height 100%, sentence case, no tracking, no border, green
       fill, ink label, full pill.

       Three departures from the kit default worth naming:
         - TextTransform is `none`. The design's labels read "Shop all", not
           "SHOP ALL". The kit default is uppercase.
         - Background is --brand, not --brand-dark. The design's primary CTA is
           the green pill; --brand-dark here is the deep green, which the design
           never uses as a button.
         - PaddingHover MATCHES Padding. The kit default changes padding on
           hover, which resizes the button. On a pill that reads as a wobble, and
           the design shows no hover state at all, so holding the box still is
           the conservative reading. */
    --global-buttonSize: var(--fontSize-md);
    --global-buttonFontFamily: var(--font-accent);
    --global-buttonLetterSpacing: normal;
    --global-buttonLineHeight: 1;
    --global-buttonTextTransform: none;
    --global-buttonColor: var(--text-on-brand);
    --global-buttonBorder: none;
    --global-buttonRadius: 999px;
    --global-buttonBackground: var(--brand);
    --global-buttonPadding: 1rem 1.875rem;
    --global-buttonBackgroundHover: var(--brand-focus);
    --global-buttonColorHover: var(--text-on-brand);
    --global-buttonBorderHover: none;
    --global-buttonPaddingHover: 1rem 1.875rem;
    --global-buttonRadiusHover: 999px;
    --global-buttonTransition: var(--global-transition);

    /* Add-to-cart, which usually wants the accent rather than the brand */
    --global-addToCart-background: var(--brand-accent);
    --global-addToCart-border: none;
    --global-addToCart-color: var(--text-on-accent);
    --global-addToCart-backgroundHover: oklch(from var(--brand-accent) calc(l + 0.2) c h);
    --global-addToCart-borderHover: none;
    --global-addToCart-colorHover: var(--text-on-accent);

    /* ---- Nav bar: SOLID state ------------------------------------------
       INERT UNLESS YOU OPT IN. These four only do anything on a page carrying
       class="cl-nav-over-hero" on <body>, which is off by default. On a normal
       solid-bar site the bar reads --navBackground in every state and you can
       ignore this block entirely.

       Where you have opted in: the bar floats transparent at rest and turns
       solid two ways - scrolled past 20px, or a panel is open - and BOTH read
       this one set, so they can never disagree.

       Only two things to think about:
           --navSolid-background   the fill
           the other three         everything sitting on it: links, their hover,
                                   the icons, and the masked wordmark (which
                                   follows --navSolid-linksHover)

       To invert to a DARK solid bar, change these four and nothing else:
           --navSolid-background: var(--brand-dark);
           --navSolid-links:      oklch(from var(--text-inverse) l c h / 0.85);
           --navSolid-linksHover: var(--text-inverse);
           --navSolid-icons:      var(--text-inverse);

       Values must name RAW colours, never var(--navLinks) and friends: 03 sets
       --navLinks: var(--navSolid-links), so pointing back would be a cyclic
       reference and both sides would resolve to invalid.

       Interior pages are NOT affected by any of this - they use --navBackground
       (03) in every state. */
    /* BIKE REMEDY: these four are INERT and left at kit defaults. This site
       does NOT opt in to cl-nav-over-hero - the design's first stripe starts at
       exactly the bar's height, so the bar sits below rather than floating
       under, and stripe 1's left half is #F4F4F4, which a transparent bar would
       put a white wordmark on top of. The real bar colours are set in the
       SWITCHES block as --navBackground and friends. */
    --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 {

    /* BIKE REMEDY: every string below is left on its framework default, by
       decision rather than by omission. The client had no wording to supply at
       brief time. --copy-search already matches the design, which draws
       "Search" as the field placeholder. */

    /* Footer newsletter - platform-emitted, read by 06 */
    --copy-newsletterTitle: "Join Our Newsletter";
    --copy-newsletterBody: "Sign up for news and offers.";

    /* Homepage stripes - no CMS field exists for either.
       Both are inert here: this homepage uses neither the `statement` stripe
       nor a signature flourish. */
    --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) ---------------------------------------- */

    /* THE BAR COLOURS. These four are NOT optional for this client.
       03 defaults --navBackground to var(--brand-dark), which resolves through
       --brand-focus to #619833 - a GREEN bar. The design's bar is near-black,
       so leaving these unset ships the wrong colour, and it ships it silently.

       #11110F is its own value and deliberately not --text (#1E1E1E): the
       design draws the bar a step darker than body ink.

       --navLinks is set to flat white because 03's default is white at 85%
       opacity and the design draws the links at full strength.

       --navLinks-hover is the one place the brand green may legibly carry type:
       #7ABF41 on #11110F is 8.42:1. On white it would be 2.25:1. */--navBackground: #11110F;--navLinks: #FFFFFF;--navLinks-hover: #7ABF41;
    /* --navIcons is already var(--text-inverse) in 03, which is what the
       design draws, so it is left alone. */

    /* No accent seam under the bar. Default is a 2px brand-light rule.
       The design has no border-bottom on the bar. Note this is also a change
       from the client's live site, which has a 2px green seam - the redesign
       drops it. */--navBorderBottom: 0;

    /* Nav link type. Defaults: --fontSize-sm, normal tracking, and the CMS
       author's own capitalisation.
       Design is 16px = --fontSize-md. Tracking and case are LEFT ALONE on
       purpose: the design draws "Men", "Women", "Gifts & Homeware" as typed,
       with no letter-spacing - which is another change from the live site, where
       the nav is uppercase at 0.05rem. */--nav-fontSize: var(--fontSize-md);/* --navItemsLetterSpacing: 0.1em; *//* --navItemsTextTransform: uppercase; */

    /* Disable the underline-draw hover device on nav links. Hover feedback
       then comes from the --navLinks -> --navLinks-hover contrast.
       KEPT (left commented). A static Figma frame cannot show hover, and the
       underline-draw is consistent with a design whose one visible link,
       "Shop all", is already underline-as-affordance. *//* --navUnderline-display: none; */

    /* Hide the platform CTA strip above the bar (TopSubBanner.ascx).
       The design's bar sits at top:0 with nothing above it. */--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.

       ON for this client - class="cl-search-exposed" is on <body>. Values are
       measured off the design's search field: 41px tall, square, hairline white
       at 20%, 19px of left padding, glyph at the right end.

       The border names --text-inverse through oklch() rather than a literal
       rgba(255,255,255,0.2), so it follows the ink token if that ever changes.

       HORIZONTAL POSITION IS A DEPARTURE FROM THE FIGMA DESIGN, ON PURPOSE.
       The design draws the field pinned RIGHT, beside a 68px icon cluster, in a
       two-row bar. This bar is CENTRED instead - asked for after seeing it
       rendered, which beats a reading of a static frame. The kit's bar is one
       row and reserves --navIconsWidth: 250px, so the design's right-pinned
       geometry never mapped cleanly onto it anyway.

       Width is also a departure: 32rem against the design's 255px. */--searchMaxWidth: 1460px;--searchHeight: 41px;--searchRadius: 0;--searchBorder: 1px solid oklch(from var(--text-inverse) l c h / 0.2);
    /* icon at the RIGHT end instead of the left: */--searchPadding: 0 var(--searchHeight) 0 2.5rem;
    /* CENTRED in the strip. All three work together, so change them together.

       At desktop 03 makes #search `position: absolute` (its "Desktop" media
       query), so centring is done by offsetting `left` by half the box's own
       width and leaving `right` at auto. There is no flexbox centring to lean
       on at this level - the justify-content:center inside the exposed-search
       block centres the INPUT within #search, not #search within the bar.

       The offset names --searchWidth instead of repeating 16rem, so changing
       the width keeps it centred. TWO THINGS THAT WILL BREAK IT SILENTLY:

         - --searchWidth MUST stay an explicit length. Set it to `auto` and
           calc() receives `auto`, the whole `left` declaration becomes
           invalid, `left` falls back to auto, and the bar jumps to the left
           edge with no error anywhere.
         - --searchMaxWidth caps the box independently, as a max-width on
           #search.srchCtr. If it is ever set BELOW --searchWidth the cap wins,
           the rendered box is narrower than the offset assumes, and the bar
           sits right of centre by half the difference. 1460px against 32rem
           has plenty of headroom. */
    --searchLeft: calc(50% - (var(--searchWidth) / 2));
    --searchRight: auto;
    --searchWidth: 32rem;

    /* Brand assets are PATHS, defaulted in 03. A reskin normally just replaces
       the files under /layout/generalLyout/. Repoint only if the client's asset
       layout differs.

       --logo IS SET, AND IT IS PAINTED RATHER THAN MASKED. The client's
       wordmark is a two-colour lockup - white "bike" and badge field, green
       "remedy" and starburst - and 03 paints --logo as a CSS mask filled with
       currentColor, which uses only the alpha channel. Masked, this mark loses
       both colours AND fills the white cross inside the badge, leaving a solid
       green blob. 99 therefore overrides the mask with background-image so the
       file paints in its own colours. BOTH are required; either alone gives a
       single-colour wordmark.

       IT IS THE SVG, NOT A PNG. The supplied Illustrator export turned out to
       be clean vector art with real fills, not a raster wrapper, so painting it
       needs no rasterising - and it stays sharp at any size, which a 119px-wide
       PNG would not on a retina screen. The file was cleaned of an unreferenced
       Polka_Dot_Pattern definition that was ~95% of its bytes.

       The ?v is a manual cache bust. Bump it whenever the file changes, because
       nothing else will. */--logo: url('/layout/generalLyout/logo.svg?v1');/* --icon-bag: url('/layout/generalLyout/icons/bag.svg'); *//* --icon-account: url('/layout/generalLyout/icons/account.svg'); *//* --icon-search: url('/layout/generalLyout/icons/search.svg'); */

    /* Design draws all three nav glyphs at 24px. Default is 22px. */--navIconSize: 24px;

    /* --- Banner collections (defaults in 04) ----------------------------- */

    /* Banner description copy is 20px throughout this design - the split hero,
       the 2x2 cards and the mirrored feature all draw body-md at 20px/130%.
       04 defaults to --fontSize-md (16px), and no step on 02's scale lands on
       20px at desktop: --fontSize-mdl clamps to 24px and --fontSize-xl to 36px.
       So this is a literal, which is allowed HERE and only here.
       Set globally rather than per-stripe because the design is consistent
       about it - every banner description is the same size. */--bannerDescSize: 1.25rem;--bannerDescLineHeight: 130%;

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

    /* Dashes instead of dots. Defaults are an 8px marker that widens active.
       Design draws four 36.5px x 1px rules, the active one solid and the rest
       at opacity 0.2. Note the active marker is the SAME WIDTH as the others -
       the kit default widens it, so WidthActive is set equal to Width on
       purpose. State is carried by opacity alone. */--splidePaginationWidth: 2.28rem;--splidePaginationHeight: 1px;--splidePaginationRadius: 0;--splidePaginationWidthActive: 2.28rem;

    /* Arrows. The design draws 50px WHITE CIRCLES with a black chevron, sitting
       over photography on both carousels - not the framework's transparent
       ghost arrow. Size is a 50px box; the circle comes from
       --global-buttonRadius (999px) in CC-Home, because on a square box the
       pill token IS a circle, and this design has exactly one curved shape.

       HoverColor has to be set: the framework default is --text-inverse, which
       is white, and a white chevron on a white button is invisible. */--splideArrowSize: 3.125rem;--splideArrowBg: var(--background);--splideArrowHoverBg: var(--background);--splideArrowHoverColor: var(--text);

    /* Quiet arrows with no bounce. Scale 1 disables the hover scale; the
       hover colour matching the rest state makes hover a gentle dim.
       KEPT (left commented) - the bounce stays. The design's arrows are white
       circles sitting over photography, where there is no other affordance cue,
       so removing hover feedback would make them read as inert. *//* --splideArrowHoverColor: var(--splideArrowColor); *//* --splideArrowHoverOpacity: 0.55; *//* --splideArrowHoverScale: 1; */}
/* CC-Global.css */

/* Body offset for fixed navigation */
body {
    padding-top: 75px !important;
}

.wrapper {
    float: none !important;
}

@media screen and (max-width: 1024px) {
    body {
        padding-top: 48px !important;
    }
}


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



/* child .logo already paints the full-colour SVG, so the mask isn't needed */
.wrapper.masthead .logoContainer {
  -webkit-mask: none;
  mask: none;
  background-color: transparent;
}

/* legacy GPU hack, not needed on a fixed header and a known iOS paint trigger */
.masthead { transform: none; }

/* Safari needs the prefix for the scrolled blur */
body.cl-nav-over-hero .wrapper.masthead.is-scrolled { -webkit-backdrop-filter: blur(12px); }


.wrapper.masthead [data-link="basket"]::before,
.wrapper.masthead [data-link="login"]::before,
.wrapper.masthead [data-link="search"]::before,
#search.srchCtr .icon-search::before {
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}
/* ==================== 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: 10px 20px;

    /* Mobile Typography */
    --mobile-navLinkSize: var(--fontSize-base);

    /* Navigation Width */
    --navWidth: var(--global-NavFooterWidth);

    /* General Navigation Colors */
    --navBackground: var(--brand-dark);
    --navIcons: var(--text-inverse);
    --navLinks: oklch(from var(--text-inverse) l c h / 0.85);
    --navLinks-hover: var(--text-inverse);

    /* Bar chrome switches -- each of these was a rule-level override in a
       client layer before. Retune in 01-CC-Brand.css; do not re-add rules.

         --navBorderBottom       the accent seam under the bar. Set to 0 where
                                 the bar (or a full-bleed hero beneath it)
                                 provides its own edge.
         --navItemsLetterSpacing tracking on the top-level nav links.
         --navItemsTextTransform case of those links. Leave `none` to let the
                                 CMS author's own capitalisation stand.
         --navUnderline-display  the underline-draw hover device on nav links.
                                 `none` disables it; hover feedback then comes
                                 from the --navLinks -> --navLinks-hover shift.
         --ctaStrip-display      the platform CTA strip above the bar
                                 (TopSubBanner.ascx). `none` hides it. It is
                                 applied to the strip's WRAPPER, not to
                                 .ctaContainer: the wrapper is what paints
                                 --ctaBackground, and hiding it takes the
                                 container inside it with it. One token, and
                                 .ctaContainer keeps its own flex layout for
                                 whenever the strip IS shown. */
    --navBorderBottom: 2px solid var(--brand-link-light);
    --navItemsLetterSpacing: normal;
    --navItemsTextTransform: none;
    --navUnderline-display: block;
    --ctaStrip-display: block;

    /* Exposed search bar. These size the bar that the "Search Bar (Exposed)"
       block further down draws, and they only do anything on a page whose
       <body> carries class="cl-search-exposed" - see that block for why the
       mode is gated on a class rather than on a display token. */
    --searchMaxWidth: 600px;
    --searchHeight: 40px;
    --searchRadius: var(--global-radius);
    --searchBorder: var(--global-border);
    /* leaves room for the icon, which sits at the LEFT end by default */
    --searchPadding: 0 0 0 var(--searchHeight);

    /* Desktop placement of the exposed bar. #search is absolutely positioned in
       the Layout block below, and by default it is CENTRED - which is what the
       left value expresses: half the bar's own width back from the midline.

       That calc used to be a literal `calc(50% - 300px)`, silently coupled to
       the 600px default. Any site that changed --searchMaxWidth was left
       off-centre by half the difference, with nothing to point at. It is
       derived now, so the two cannot disagree.

       To pin the bar to the RIGHT instead, next to the icon cluster, set
       --searchLeft: auto and give --searchRight a value - offsetting from
       --navIconsWidth keeps it clear of the icons without a magic number. Give
       --searchWidth an explicit value when you do: an absolutely positioned box
       with `left: auto` shrink-to-fits, and a width settles it. */
    --searchLeft: calc(50% - (var(--searchMaxWidth) / 2));
    --searchRight: auto;
    --searchWidth: auto;

    /* width of the right-hand icon cluster (.menu-icons-header) on desktop */
    --navIconsWidth: 250px;

    /* Masked brand assets -- see the Brand Assets section at the foot of this
       file. These are PATHS, deliberately defaulted rather than left unset: a
       reskin replaces the FILES at these paths, exactly as it does with the
       fonts. Override a URL here only if a client's asset layout differs.

       They must not be left to fall back, because the failure mode is silent
       and bad: an unset var() in mask-image computes to `none`, while the
       companion `content: ""` has already blanked the platform icon-font
       glyph -- so the icons would disappear rather than degrade.

       (`generalLyout` is misspelled. It is the established folder name on
       every existing site and is baked into asset URLs; left as found.) */
    --navIconSize: 22px;
    --logo: url('/layout/generalLyout/logo.svg');
    --icon-bag: url('/layout/generalLyout/icons/bag.svg');
    --icon-account: url('/layout/generalLyout/icons/account.svg');
    --icon-search: url('/layout/generalLyout/icons/search.svg');

    /* Sale Link Styles */
    --sale-color: var(--text-inverse);
    --sale-background: var(--sale);
    --sale-border: 1px solid var(--sale);
    --sale-padding: .2rem .5rem;
    --sale-radius: var(--global-buttonRadius);

    /* Sale Link Hover States */
    --sale-colorHover: var(--text-inverse);
    --sale-backgroundHover: var(--sale);
    --sale-borderHover: 1px solid var(--sale);
    --sale-paddingHover: var(--global-buttonPadding);
    --sale-transition: var(--global-buttonTransition);

    /* Sale Dropdown */
    --saleDropdownBackground: var(--sale);
    --saleDropdownText: var(--text-inverse);

    /* Dropdown Colors */
    --dropdownBackground: var(--background);
    --dropdownAreaBackground: var(--background);
    --dropdownAreaTitle: var(--text);
    --dropdownAreaTitleUnderline: 1px solid oklch(from var(--text) l c h / 0.2);
    --dropdownAreaLinks: var(--text);

    /* Login Dropdown */
    --loginDropdownBackground: var(--background);
    --loginTitleColor: var(--text);
    --loginLinkColor: var(--text);

    /* Search */
    --searchBackground: transparent;
    --searchText: var(--text-inverse);
    --searchIconColor: var(--text-inverse);
    --searchPlaceholderColor: oklch(from var(--text-inverse) l c h / 0.6);

    /* Mobile Navigation */
    --mobileNavLinkColor: var(--text-inverse);
    --mobileNavBackground: var(--brand-dark);
    --mobileHamburgerBackground: transparent;
    /* Rest-state value only. It must name a RAW colour, not var(--navIcons):
       a custom property resolves its var()s on the element that DECLARES it,
       so a :root indirection would bake in :root's white and never see the
       Solid State's body-level re-point. The solid value is set alongside the
       other four in that block instead. */
    --mobileHamburgerColor: var(--navIcons);
    --mobileNavOverlay: var(--black-50);
    --mobileNavBlur: blur(3px);

    /* CTA Bar */
    --ctaBackground: var(--brand-dark);
    --ctaColor: var(--text-inverse);
    --ctaFontSize: var(--fontSize-xs);
    --ctaDivider: 1px solid var(--white-30);

    /* Outlet Nav Button */
    --outletBorder: var(--text-inverse);
    --outletHoverBackground: var(--text-inverse);
    --outletHoverText: var(--text);

    /* Filter */
    --filterBackground: var(--background);
}

/* ==================== Navigation Solid State ====================
   Applies wherever body.cl-nav-over-hero is set - in practice the homepage.
   There the bar floats transparent over the hero (Transparent-over-hero, at
   the foot of this file), and it has to become solid whenever transparency
   would break it. Two ways in, one look - white bar, --brand-focus contents:

     the bar is SCROLLED   past 20px (.is-scrolled, homepage-nav.js)
     a PANEL is open       dropdown / mobile hamburger / account / search

   Scoped with .cl-nav-over-hero so it cannot reach interior pages, which keep
   the plain solid bar (--navBackground) in every state. Do not drop that
   scope without re-reading requirement 4.

   Implemented by re-pointing the four nav colour tokens rather than writing
   a parallel set of rules: every rule below already reads --navBackground /
   --navLinks / --navLinks-hover / --navIcons, so the whole bar follows - text,
   icons and the masked wordmark (Brand Assets paints it with --navLinks-hover)
   - with no new selectors and no specificity fight. The knobs are --navSolid-*
   in 01-CC-Brand: ONE set for both triggers, so the two can never disagree.

   Backgrounds are the exception and cannot be done by token:
   `body.cl-nav-over-hero .wrapper.masthead { background: transparent !important }`
   is a literal at (0,3,1) and has to be beaten declaration-to-declaration.
   Scrolled is handled below; the panel-open cases sit beside that transparent
   rule in Transparent-over-hero at the foot of this file. Keep those trigger
   lists in step with this one - all three now live in THIS file.

   On the triggers themselves:
     open-slide-menu  mobile hamburger panel. Stamped in two places by the
                      platform - #body-wrapper-overlay (see the rule below,
                      which display:none's it, so it CANNOT be a nav
                      ancestor) and a page wrapper, almost certainly <body>.
                      The markup is not on this share to check, so both
                      halves are covered: the class on body itself, and
                      :has() for anywhere else. :has() never matches its own
                      subject, which is why the pair is not redundant.
     .CSSFacetNavModules.active   a top-level nav node's dropdown
     .tbcntOpen                   the platform's toolbar-content open flag -
                                  account today, and search if it uses the
                                  same pattern (.srchCtr carries .tbcnt)
     #search:focus-within         belt and braces for search: covers the
                                  mobile field, which is permanently visible
                                  rather than a toggle. Focus only, never
                                  hover - 99 expands the desktop pill on
                                  hover too, and repainting the whole bar on
                                  a passing mouse would be twitchy.

   The mini-basket is deliberately NOT a trigger. */

body.cl-nav-over-hero:has(.wrapper.masthead.is-scrolled),
body.cl-nav-over-hero.open-slide-menu,
body.cl-nav-over-hero:has(.open-slide-menu),
body.cl-nav-over-hero:has(.wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active),
body.cl-nav-over-hero:has(.wrapper.masthead .tbcntOpen),
body.cl-nav-over-hero:has(#search.srchCtr:focus-within) {
    --navBackground: var(--navSolid-background);
    --navLinks: var(--navSolid-links);
    --navLinks-hover: var(--navSolid-linksHover);
    --navIcons: var(--navSolid-icons);
    /* The mobile hamburger needs re-pointing HERE and cannot just be declared
       as var(--navIcons) up in :root: a custom property substitutes its var()s
       on the element that declares it, so a :root indirection resolves against
       :root's --navIcons (white) and inherits down already resolved, blind to
       this body-level override. The other icons dodge this because 03 reads
       var(--navIcons) directly in a `color` declaration on the glyph itself.
       Mobile-only element, but harmless to set at every width. */
    --mobileHamburgerColor: var(--navSolid-icons);
}

/* ==================== Navigation Fix ==================== */
#body-wrapper-overlay.open-slide-menu {
    display: none;
}

/* ==================== Navigation Styles ==================== */

.wrapper.masthead .fixed {
    background: transparent;
}

/* Background & Borders */
.wrapper.masthead {
    background: var(--navBackground) !important;
    border-bottom: var(--navBorderBottom);
    /* One 400ms curve for every way this bar changes surface - the open state
       and the scroll state are the same physical bar and must move alike.
       NB the desktop block below re-declares `transition` for height; this
       list is repeated there so the shorthand cannot drop it. */
    transition:
        background-color 400ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1),
        backdrop-filter 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wrapper.masthead .container {
    background: transparent;
}

.wrapper.masthead .navIcons {
    border-bottom: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Navigation Links */
.wrapper.masthead .ctrNavigation > .CSSFacetNavModules {
    gap: 1.5rem;
}

.wrapper.masthead .NodeLevel0 > a {
    color: var(--navLinks);
    padding: 0;
    font-size: var(--nav-fontSize);
    letter-spacing: var(--navItemsLetterSpacing);
    text-transform: var(--navItemsTextTransform);
}

.wrapper.masthead .NodeLevel0 > a:hover,
.wrapper.masthead .NodeLevel0 > a.active,
.wrapper.masthead .NodeLevel0 > div.active + a {
    color: var(--navLinks-hover);
}

.wrapper.masthead .NodeLevel0 {
    margin: 0;
}

/* Remove Default Arrows */
.wrapper.masthead .NodeLevel0 > a:before,
.wrapper.masthead .NodeLevel0 > a:after {
    display: none;
}

/* Icon Colors */
.wrapper.masthead .navIcons *[class*="icon-"] {
    color: var(--navIcons);
    width: 42px; 
    height: 48px;
}

/* ==================== Sale Link ==================== */

.NodeLevel0[data-nodename*='Sale'] > a {
    color: var(--sale-color) !important;
    background: var(--sale-background) !important;
    border: var(--sale-border);
    padding: var(--sale-padding) !important;
    border-radius: var(--sale-radius);
    transition: var(--sale-transition);
    line-height: normal;
}

.wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > a:hover,
.wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > a.active,
.wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > div.active + a {
    color: var(--sale-colorHover) !important;
    background: var(--sale-backgroundHover) !important;
    border: var(--sale-borderHover);
    padding: var(--sale-paddingHover);
    filter: brightness(1.1);
}

/* Sale Dropdown */
[data-nodename="Sale"] .CSSFacetNavModules .NodeLevel1 {
    border: 1px solid var(--saleDropdownBackground) !important;
    background: var(--saleDropdownBackground) !important;
}

[data-nodename="Sale"] .NodeLevel1 > a {
    color: var(--saleDropdownText) !important;
    border-color: var(--saleDropdownText) !important;
}

.wrapper.masthead [data-nodename="Sale"] .NodeLevel1 > .CSSFacetNavModules a {
    color: var(--saleDropdownText);
}

/* ==================== Navigation Dropdown ==================== */

.wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
    background: var(--dropdownBackground);
    gap: .5rem;
    padding: 1rem;
    justify-content: center;
    border-radius: 0 0 var(--global-radius) var(--global-radius);
    border: 2px solid var(--brand-link-light);
    border-top: 0;
    max-height: 80vh;
}

/* Dropdown Areas */
.wrapper.masthead .NodeLevel1 {
    width: auto;
    background: var(--dropdownAreaBackground);
    padding: 1rem;
    border-radius: var(--global-radius);
    border: 2px solid var(--brand-link-light);
    min-width: 350px;
    flex: 1;
}

.wrapper.masthead .NodeLevel1 > .CSSFacetNavModules {
    display: flex;
    flex-flow: column;
    gap: .25rem;
}

/* Dropdown Titles */
.wrapper.masthead .NodeLevel1 > a {
    font-family: var(--font-bold);
    font-size: var(--dropdown-titleSize);
    letter-spacing: 1px;
    border-bottom: var(--dropdownAreaTitleUnderline);
    color: var(--dropdownAreaTitle);
    text-transform: none;
    opacity: 1;
}

/* Dropdown Links */
.wrapper.masthead .NodeLevel1 > .CSSFacetNavModules a {
    color: var(--dropdownAreaLinks);
    font-size: var(--dropdown-linkSize);
    opacity: .8;
}

.wrapper.masthead .NodeLevel1 > .CSSFacetNavModules a:hover {
    opacity: 1;
}

.wrapper.masthead .NodeLevel1 > .CSSFacetNavModules > div {
    padding: 0;
}

/* Remove Link Animations */
.wrapper.masthead .NodeLevel2 > a:before {
    display: none;
}

/* ==================== Login Dropdown ==================== */

.wrapper.masthead .loginCtr.tbcnt.tbcntOpen {
    background: var(--loginDropdownBackground);
    border: 2px solid var(--brand-link-light);
    border-top: none;
    border-radius: 0 0 var(--global-radius) var(--global-radius);
}

.wrapper.masthead .loginCtr.tbcnt.tbcntOpen .boldfont {
    color: var(--loginTitleColor);
    font-size: var(--login-titleSize);
}

.wrapper.masthead .loginCtr a {
    color: var(--loginLinkColor);
    font-size: var(--login-linkSize);
    border-bottom: 1px solid var(--loginLinkColor);
}

/* ==================== Search ==================== */

.wrapper.masthead .srchCtr.tbcnt .searchBoxForm {
    background: var(--searchBackground);
    color: var(--searchText);
    font-size: var(--search-inputSize);
}

.wrapper.masthead .srchCtr.tbcnt .icon-search {
    color: var(--searchIconColor);
}

.wrapper.masthead .srchCtr.tbcnt .searchBoxForm::placeholder {
    color: var(--searchPlaceholderColor);
}

/* ==================== Navigation Mobile ==================== */

@media screen and (max-width: 1024px) {
    .wrapper.masthead .NodeLevel0 > a {
        color: var(--mobileNavLinkColor) !important;
        padding: 1rem;
        background: var(--mobileNavBackground);
        font-size: var(--mobile-navLinkSize);
        border-bottom: var(--global-border);
    }

    .wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > a {
        color: var(--sale-colorHover) !important;
        padding: 1rem 0.5rem 1rem 1rem !important;
        font-size: var(--mobile-navLinkSize) !important;
        background: var(--sale-backgroundHover) !important;
        border-radius: 0;
    }

    .wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
        flex-flow: column;
        padding: 1rem;
        padding-bottom: 15rem;
        display: flex;
        justify-content: flex-start;
    }

    .wrapper.masthead .ctrNavigation > .CSSFacetNavModules {
        height: fit-content;
    }

    .wrapper.masthead .NodeLevel1 {
        width: 100%;
    }

    .icon-menu.mobile {
        order: 5;
        background: var(--mobileHamburgerBackground);
        color: var(--mobileHamburgerColor) !important;
        border-radius: var(--global-radius);
        margin-right: 2px;
        margin-top: 1px;
    }

    .ctrNavigation {
        background: var(--mobileNavOverlay);
        backdrop-filter: var(--mobileNavBlur);
    }
}

/* ==================== Navigation Active State ==================== */

@media screen and (min-width: 1024px) {
    .open-slide-menu .NodeLevel0 > a:not(.active) {
        opacity: 0.3;
    }

    .wrapper.masthead {
        transition: height .5s ease,
                    background-color 400ms cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1),
                    backdrop-filter 400ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .wrapper.masthead.active {
        height: 75px;
    }

    .wrapper.masthead .CSSFacetNavModules {
        top: 0;
        opacity: 1;
        transition: .2s ease;
    }

    .wrapper.masthead.active .CSSFacetNavModules {
        top: 0px !important;
        opacity: 0;
    }

    /* Nav Link Underline Animation */
    .wrapper.masthead .NodeLevel0 > a:before {
        right: 0;
        transform: rotate(0deg);
    }

    .wrapper.masthead .NodeLevel0 > a::before {
        display: var(--navUnderline-display);
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px !important;
        bottom: 0;
        left: 0;
        background-color: var(--navLinks-hover);
        transform-origin: bottom center;
        transition: transform 0.25s ease-out;
        top: 23px;
    }

    .wrapper.masthead .NodeLevel0[data-nodename*='Sale'] > a::before {
        background-color: var(--sale-color);
    }

    .wrapper.masthead .NodeLevel0 > a:hover::before,
    .wrapper.masthead .NodeLevel0 > a.active::before {
        transform: scaleX(1);
        transform-origin: bottom center;
    }
}

/* ==================== Search Bar (Exposed) ====================
   OPT-IN, off by default. The platform normally hides search behind the
   magnifier toggle in .menu-icons-header; this block instead lays the input out
   inline in the bar and hides that toggle.

   Turn it on by adding class="cl-search-exposed" to <body>, exactly as
   cl-nav-over-hero is added. Tune it with the --search* tokens at the top of
   this file.

   WHY A BODY CLASS AND NOT A --searchExposed-display TOKEN
   The obvious shape - `.icon-search { display: var(--searchToggle-display,
   block) }` - is wrong here, because the DEFAULT would then force a display
   value onto the toggle on every site that never opted in. The platform styles
   that element outside this tree and we do not know what it sets; forcing
   `block` risks moving the icon on sites that asked for nothing. Gating on a
   class means that with no class NONE of these rules match and behaviour is
   byte-identical to this block not existing, which is the only safe default.

   Specificity note, as elsewhere in this file: `body.cl-search-exposed` adds
   (0,1,0) over each selector's own weight. Nothing here needs to beat the
   Solid State block, which re-points colour tokens rather than layout.
   ============================================================================ */

body.cl-search-exposed .menu-icons-header > .icon-search {
    display: none;
}

body.cl-search-exposed #search.srchCtr {
    display: flex;
    justify-content: center;
    padding: var(--navPadding);
    max-width: var(--searchMaxWidth);
    z-index: 999999;
}

body.cl-search-exposed #TopBanner1_clSearch1_containerSearch {
    display: flex;
    justify-content: center;
    max-width: var(--searchMaxWidth);
    width: 100%;
    /* the icon is positioned against this box by platform CSS */
    position: relative;
}

body.cl-search-exposed .srchCtr.tbcnt .icon-search {
    width: var(--searchHeight);
    height: var(--searchHeight);
    line-height: var(--searchHeight);
    min-width: var(--searchHeight);
    /* the whole pill is the click target; the glyph must not swallow it */
    pointer-events: none;
    top: -1px;
}

body.cl-search-exposed .srchCtr.tbcnt .searchBoxForm,
body.cl-search-exposed .srchCtr.tbcnt .searchBoxForm:focus {
    padding: var(--searchPadding);
    height: var(--searchHeight);
    line-height: var(--searchHeight);
    border-radius: var(--searchRadius);
    border: var(--searchBorder);
    width: 100%;
}

/* below the desktop bar the strip has no room to cap the width */
@media screen and (max-width: 1024px) {
    body.cl-search-exposed #search.srchCtr,
    body.cl-search-exposed #TopBanner1_clSearch1_containerSearch {
        max-width: none;
    }
}



/* ==================== Layout & Responsive ==================== */

body {
    padding-top: 115px !important;
}

/* Mobile */
@media screen and (max-width: 1024px) {
    .menu-icons-header {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    }

    

    .logoContainer {
        width: auto !important;
    }

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

    body {
        padding-top: 103px !important;
    }

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

    .ctrNavigation {
        top: 70px !important;
    }
    

/* Desktop */
@media screen and (min-width: 1024px) {
    #search {
        position: absolute;
        top: calc(-90px + 1.5rem);
        z-index: 1;
        /* centred by default; set --searchLeft:auto + --searchRight to pin it
           beside the icon cluster instead. See the tokens at the top. */
        left: var(--searchLeft);
        right: var(--searchRight);
        width: var(--searchWidth);
    }

    .wrapper.masthead .loginCtr.tbcnt.tbcntOpen {
        top: 40px;
        position: absolute;
    }

    .wrapper.masthead {
        height: 115px;
    }

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

    #navi {
        display: flex;
        top: 93px;
        position: fixed;
        justify-content: center;
        /* padding-inline: 2rem; */
        max-width: var(--navWidth);
        flex-grow: 0;
        width: 100%;
    }

    .wrapper.masthead .ctrNavigation > .CSSFacetNavModules {
        display: flex;
        float: none;
        justify-content: flex-start;
    }

    .wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active {
        top: 42px;
         width: calc(100% - 32px);
    }

    /* NB unscoped - .zflex-s is a platform flex utility used site-wide (e.g.
       .col-1.zflex-s on the detail page), so this reaches well beyond the
       masthead. `flex-wrap: wrap` was removed: the masthead row is a .zflex-s
       and both #navi and .navIcons are width:100%, so wrapping gave each one
       its own line and stacked the bar into logo / links / icons rows. With
       the default nowrap they shrink and share one row, which is the intended
       horizontal bar. Left as a removal rather than an explicit `nowrap` so
       the other .zflex-s containers keep whatever the platform gives them. */
    .zflex-s, .zflexInline-s {
        align-items: center;
        -webkit-align-items:stretch;
        -ms-align-items:stretch;
        -moz-align-items:stretch;
        display: flex;
        align-content: center;
    }

}

/* ==================== Filter ==================== */

.sticky.sticknow .FAFoptionsContainer {
    margin-top: 0 !important;
    position: fixed;
    top: 109px !important;
    z-index: 7;
    background: var(--filterBackground);
    width: 100%;
    left: 0;
}

/* ==================== Logo ==================== */

.logoContainer {
    width: auto;
    padding: 0px
}

/* ==================== CTA Bar ==================== */

/* Ctas */

.ctaContainer {display: flex;justify-content: flex-start;top: 0; background: transparent;}

.wrapper:has(.ctaContainer) {
    display: var(--ctaStrip-display);
    background: var(--ctaBackground);
}

div[id*="CTA_bannerCollectionPanel"] {
    display: flex;
    flex-flow: row nowrap;
    overflow-x: auto;
    padding: 0 !important;
    gap: 0 !important;
    width: 100%;
    justify-content: flex-start;
}

div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr {
    position: static;
    padding: 0 !important;
    grid-gap: 5px !important;
    justify-content: center !important;
    align-items: center !important;
    background: none !important;
    flex-flow: column;
}

div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr > span {
    font-size: var(--ctaFontSize) !important;
    width: auto;
    order: 0;
    text-align: center !important;
    color: var(--ctaColor) !important;
    background: none !important;
    padding: 0 !important;
    text-transform: none !important;
}

div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr > span.bannerTitle {

}

div[id*="CTA_bannerCollectionPanel"] .bannerTxtCtr > span.bannerView {
    display: none;
}

div[id*="CTA_bannerCollectionPanel"] .photo {
    display: none;
}

div[id*="CTA_bannerCollectionPanel"] .photo:after{
    width: 0 !important;
}

div[id*="CTA_bannerCollectionPanel"] .bannerDesc:before {
    display: none;
}

div[id*="CTA_bannerCollectionPanel"] a:hover .bannerTxtCtr {
    background: none;
}

div[id*="CTA_bannerCollectionPanel"] a {
    min-width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block: .5rem;
    border-left: var(--ctaDivider);
    border-radius: 0;
    gap: 1rem;
}


div[id*="CTA_bannerCollectionPanel"] a:nth-child(1) {
    border-left: none;
}

div[id*="CTA_bannerCollectionPanel"] a:last-child {
    border-right: none;
}

div[id*="CTA_bannerCollectionPanel"] .bannerDesc{
    display: none;
}

div[id*="CTA_bannerCollectionPanel"] a .bannerTxtCtr,
div[id*="CTA_bannerCollectionPanel"] a{
    max-width: fit-content !important;
    min-width: fit-content;
    padding-inline: 1rem;
    height: fit-content !important;
}

/* ==================== Outlet Nav Button ==================== */

.wrapper.masthead .NodeLevel0[data-nodename*='Outlet'] {
    margin-left: auto;
    border: 1px solid var(--outletBorder);
    padding: .2rem .5rem;
    transition: var(--global-transition);
}

.wrapper.masthead .NodeLevel0[data-nodename*='Outlet']:hover {
    background: var(--outletHoverBackground);
}

.wrapper.masthead .NodeLevel0[data-nodename*='Outlet']:hover > a {
    color: var(--outletHoverText) !important;
}

/* ==================== Brands Dropdown ==================== */

[data-nodename="Brands"] .NodeLevel1 .CSSFacetNavModules > div {
    min-width: 200px;
    max-width: 200px;
    display: flex;
}

[data-nodename="Brands"] .NodeLevel1 > .CSSFacetNavModules {
    flex-flow: row wrap !important;
    display: flex;
    justify-content: flex-start;
    gap: 1rem !important;
}

@media screen and (min-width: 1024px) {
    [data-nodename="Brands"] .NodeLevel1:nth-child(1) > .CSSFacetNavModules > div a {
        font-size: var(--fontSize-lg) !important;
        font-weight: bold;
    }
}



/* nav scroll animation */

.navIcons {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;

    /* Stays transparent in every state - the surface is painted by
       .wrapper.masthead beneath it. Only the ink animates here now; the
       background / shadow / blur transitions moved to the masthead with the
       fill they belong to.

       `color` is the row's inherited ink, tokenised so the Solid State block
       carries it. It was a literal `white`, which went invisible the moment
       the solid bar became white. --navIcons is white at rest, so this is a
       no-op outside the solid state. */
    background-color: transparent;
    color: var(--navIcons);

    transition: color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.navIcons a,
.navIcons button {
    color: inherit;
    transition: color 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.navIcons svg {
    fill: currentColor;
    stroke: currentColor;

    transition:
        fill 400ms cubic-bezier(0.22, 1, 0.36, 1),
        stroke 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scrolled SURFACE, homepage only. homepage-nav.js toggles .is-scrolled on
   .wrapper.masthead - the outermost masthead layer - so the fill covers the
   whole bar rather than just the inner .navIcons strip. Bump the ?v
   querystring in default.aspx if you touch that script.

   The .cl-nav-over-hero scope does double duty: it enforces requirement 4
   (interior pages never do this) AND lifts the selector to (0,4,1), which
   clears 99's `body.cl-nav-over-hero .wrapper.masthead { transparent !important }`
   at (0,3,1). Specificity beats source order, so this wins even though 99
   loads later - no duplicate override needed there.

   Do NOT rely on the script only being loaded on the homepage for the
   scoping; that was accidental, and a shared master page would undo it.

   Contents are not set here - the Solid State block at the top of this file
   re-points --navLinks / --navIcons / --navLinks-hover for the same trigger,
   which is what stops white text landing on this white bar.

   blur/shadow left as literals for now, by decision - they are surface
   texture rather than brand colour. */
body.cl-nav-over-hero .wrapper.masthead.is-scrolled {
    background: var(--navSolid-background) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}




    .masthead .fixed .navIcons {
        position: relative;
        padding: var(--navPadding);
    }

    .navIcons {
    height: 100%
}


/* Nav Icon Fixes */

    .navIcons > div:not(.icon-menu.mobile), .navIcons > a, .navIcons *[class*="icon-"]:not(.icon-menu.mobile) {
        width: auto;
        line-height: 1;
        font-size: 20px;
        position: relative;
        text-align: center;
        cursor: pointer;
        padding: 10px;
        display: flex;
        align-items: center;
    }

/* Icon order, left to right: search, account, bag. The platform emits them
   head, bag, menu, search - .menu-icons-header is flex at both breakpoints
   (438/483), so `order` does the reshuffle with no markup change. Keyed on
   data-link rather than the icon-font class names, same reasoning as 99: the
   data-link states the toggle's job, so a platform class rename cannot
   silently scramble the row. The mobile hamburger keeps its own order (310)
   and stays after these three. */

.menu-icons-header > [data-link="search"] {
    order: 1;
}

.menu-icons-header > [data-link="login"] {
    order: 2;
}

.menu-icons-header > [data-link="basket"] {
    order: 3;
}


/* ===========================================================================
   BRAND ASSETS -- wordmark and nav icons as CSS MASKS
   ---------------------------------------------------------------------------
   Promoted out of the client layer: this is mechanism every client needs and
   only the asset FILES differ. The technique is a mask filled with
   currentColor, so an asset inherits whatever ink the bar is painting and
   follows a reskin, a scroll state and a transparent-over-hero state with no
   second copy of the file and no edit here.

   To reskin: replace the files under /layout/generalLyout/. The URLs are
   tokens (--logo, --icon-bag, --icon-account, --icon-search) declared at the
   top of this file, so a client with a different asset layout can repoint
   them from 01-CC-Brand.css instead.
   =========================================================================== */

/* --- Wordmark ---
   The platform <img> is left in flow so the container keeps exactly the box it
   already had (sized in the Logo section above); only the PAINT changes. */
.logoContainer {
    -webkit-mask: var(--logo) left center / contain no-repeat;
            mask: var(--logo) left center / contain no-repeat;
    background-color: currentColor;
}

/* .logoContainer has no colour of its own -- the masthead only paints
   --navLinks onto the nav anchors -- so give it the nav's full-strength ink.
   This is the ONE knob: change `color` here and the wordmark follows, over a
   hero photo and a solid bar alike. */
.wrapper.masthead .logoContainer {
    color: var(--navLinks-hover);
}

/* --- Nav icons (bag / account / search) ---
   The platform emits these as icon-font glyphs in .menu-icons-header, each
   toggle tagged with a data-link:

     <div class="icon-head"        data-link="login"><div id="loggedInPip"></div></div>
     <div class="icon-bag"         data-link="basket"><div class="basketPip">0</div></div>
     <div class="icon-menu mobile" data-link="navi"></div>
     <div class="icon-search"      data-link="search"></div>

   Keyed on data-link rather than the icon-font class names: the data-link
   states the toggle's JOB, so a platform icon-font rename cannot silently
   blank an icon.

   The mask sits on ::before, not on the toggle. Two reasons: it replaces the
   glyph in place, so no `visibility: hidden` dance is needed; and a mask on
   the toggle itself would clip the pips nested inside it -- .basketPip (08)
   and #loggedInPip.

   The hamburger (data-link="navi") is deliberately NOT in this list. Blanking
   a glyph without supplying a mask renders it invisible, and there is no
   hamburger asset. That is also why these rules enumerate three toggles
   instead of reusing the *[class*="icon-"] wildcard above.

   Search needs both selectors: the .menu-icons-header toggle is hidden
   elsewhere in this file, and the visible glyph is the
   <span class="icon-search"> inside #search. Everything is scoped to the
   masthead / #search, so the PDP's .cc-lookup-service-lookupbutton.icon-search
   keeps the platform glyph. */



/* ===========================================================================
   TRANSPARENT-OVER-HERO -- the remainder of the mode
   ---------------------------------------------------------------------------
   Promoted out of the client layer so the whole mode lives in one file. The
   Solid State block at the top of this file re-points the token set; the
   Scrolled Surface block above paints the scrolled fill. These are the last
   two pieces: the at-rest transparency, and the panel-open cases that have to
   beat it declaration-to-declaration.

   OPT-IN, and OFF BY DEFAULT. Nothing here applies unless a page carries
   class="cl-nav-over-hero" on <body>, which the kit's default.aspx deliberately
   does NOT ship. Transparency is a special feature, not a house style: it only
   works over a full-bleed image, and over a light opening stripe it produces an
   invisible nav. A site that does not opt in gets the solid bar from
   --navBackground in every state, which is the correct default.

   Interior pages never carry the class.

   Note what else is gated on it: the Solid State block at the top of this file
   and the Scrolled Surface block above are BOTH scoped to the same class, so a
   non-transparent site gets no scroll blur/shadow either. That is consistent -
   there is no transparency for the scroll to resolve - but it does mean a
   client who wants a scrolled shadow on a solid bar needs a new switch rather
   than this class.

   ORDER MATTERS AND IS PRESERVED. This block sat in 99 (which loads after
   03-08) as one contiguous run. It is appended at the very END of 03, so its
   position relative to every rule in this file is unchanged, and its internal
   order is unchanged. The .active rule must stay ABOVE the panel-open list:
   the two tie at (0,4,1) and the panel-open cases win on order alone.
   =========================================================================== */

/* The hero slides under the fixed bar, so the body offset comes off. */
body.cl-nav-over-hero {
    padding-top: 0 !important;
}

body.cl-nav-over-hero .wrapper.masthead {
    background: transparent !important;
}

body.cl-nav-over-hero .wrapper.masthead.active {
    background: var(--navBackground) !important;
}

/* The transparent rule above is a literal `transparent !important`, not a
   token, so the Solid State block cannot reach it by re-pointing
   --navBackground -- it has to be beaten declaration-to-declaration. This is
   the case that state exists for: an open menu hanging off an invisible bar is
   the bug. The trigger list mirrors Solid State's exactly; keep the two in
   step. Each selector clears the transparent rule's (0,3,1) by one class. */
body.cl-nav-over-hero.open-slide-menu .wrapper.masthead,
body.cl-nav-over-hero:has(.open-slide-menu) .wrapper.masthead,
body.cl-nav-over-hero:has(.wrapper.masthead .NodeLevel0 > .CSSFacetNavModules.active) .wrapper.masthead,
body.cl-nav-over-hero:has(.wrapper.masthead .tbcntOpen) .wrapper.masthead,
body.cl-nav-over-hero:has(#search.srchCtr:focus-within) .wrapper.masthead {
    background: var(--navSolid-background) !important;
}
/* CC-BannerCollections.css
   Quiet luxury banner chrome: white canvas, full-bleed photography with
   ghost 1px-outline CTAs, hairline vocabulary. Tokens only. */

/* Banner Collection Variables */
:root {
    --bannerRadius: 0px;
    --bannerPadding: clamp(1rem, 3vw, 2.5rem);
    --bannerGap: var(--global-gap);
    --bannerBorder: var(--global-border);
    --bannerText: var(--text-inverse);
    --bannerCardBg: var(--background-raised);
    --bannerCardText: var(--text);
    /* Banner description type ramp - one typographic voice for every
       .cc-banner__desc. Colour/opacity stay per-band; only type lives here. */
    --bannerDescFontFamily: var(--font-body);
    --bannerDescSize: var(--fontSize-md);
    --bannerDescLineHeight: 150%;
    --bannerDescLetterSpacing: normal;
    --brandLogoFilter: brightness(0) opacity(0.35);
    --brandLogoFilterHover: none;
    --brandLogoMaxHeight: 55px;
    --bannerViewSize: var(--global-buttonSize);
    --bannerViewColor: var(--text);
    --bannerViewBorder: 1px solid var(--text);
    --bannerViewBackground: transparent;
    --bannerViewPadding: var(--global-buttonPadding);
    --bannerViewRadius: var(--global-buttonRadius);
    --bannerViewBackgroundHover: var(--brand-dark);
    --bannerViewColorHover: var(--text-inverse);
    --bannerViewBorderHover: 1px solid var(--brand-dark);
    --bannerViewPaddingHover: var(--global-buttonPaddingHover);
    --bannerViewTransition: var(--global-buttonTransition);
}


/* CC-bg Colour Modifier Classes
   Apply to any col-1 to set the colour context for that section.
   Rescopes banner tokens -- buttons, text, logos, Splide arrows all update. */

.CC-bgDark {
    background: var(--brand-dark) !important;
    --bannerText: var(--text-inverse);
    --bannerCardBg: var(--background-raised);
    --bannerCardText: var(--text);
    --comp-divider: oklch(from var(--text-inverse) l c h / 0.15);
    --brandLogoFilter: brightness(0) invert(1) opacity(0.4);
    --brandLogoFilterHover: brightness(0) invert(1) opacity(1);
    --bannerViewBackground: var(--brand-accent);
    --bannerViewColor: var(--text-on-accent);
    --bannerViewBorder: 1px solid var(--brand-accent);
    --bannerViewBackgroundHover: var(--brand-accent-dark);
    --bannerViewColorHover: var(--text-on-accent);
    --bannerViewBorderHover: 1px solid var(--brand-accent-dark);
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text-inverse);
    --splideArrowHoverColor: var(--text-inverse);
}

.CC-bgLight {
    background: var(--background-raised) !important;
    --bannerText: var(--text);
    --bannerCardBg: var(--background);
    --bannerCardText: var(--text);
    --comp-divider: oklch(from var(--text) l c h / 0.12);
    --brandLogoFilter: brightness(0) opacity(0.4);
    --brandLogoFilterHover: brightness(0) opacity(1);
    --bannerViewBackground: var(--brand);
    --bannerViewColor: var(--text-on-brand);
    --bannerViewBorder: 1px solid var(--brand);
    --bannerViewBackgroundHover: var(--brand-accent);
    --bannerViewColorHover: var(--text-on-accent);
    --bannerViewBorderHover: 1px solid var(--brand-accent);
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text);
}

.CC-bgBrand {
    background: var(--brand) !important;
    --bannerText: var(--text-on-brand);
    --bannerCardBg: oklch(from var(--brand) calc(l + 0.08) c h);
    --bannerCardText: var(--text-on-brand);
    --comp-divider: oklch(from var(--text-on-brand) l c h / 0.2);
    --brandLogoFilter: brightness(0) invert(1) opacity(0.4);
    --brandLogoFilterHover: brightness(0) invert(1) opacity(1);
    --bannerViewBackground: var(--brand-accent);
    --bannerViewColor: var(--text-on-accent);
    --bannerViewBorder: 1px solid var(--brand-accent);
    --bannerViewBackgroundHover: var(--brand-accent-dark);
    --bannerViewColorHover: var(--text-on-accent);
    --bannerViewBorderHover: 1px solid var(--brand-accent-dark);
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text-on-brand);
}

.CC-bgAccent {
    background: var(--brand-accent) !important;
    --bannerText: var(--text-on-accent);
    --bannerCardBg: oklch(from var(--brand-accent) calc(l + 0.08) c h);
    --bannerCardText: var(--text-on-accent);
    --comp-divider: oklch(from var(--text-on-accent) l c h / 0.2);
    --brandLogoFilter: brightness(0) invert(1) opacity(0.4);
    --brandLogoFilterHover: brightness(0) invert(1) opacity(1);
    --bannerViewBackground: var(--brand);
    --bannerViewColor: var(--text-on-brand);
    --bannerViewBorder: 1px solid var(--brand);
    --bannerViewBackgroundHover: oklch(from var(--brand) calc(l + 0.1) c h);
    --bannerViewColorHover: var(--text-on-brand);
    --bannerViewBorderHover: 1px solid oklch(from var(--brand) calc(l + 0.1) c h);
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text-on-accent);
}

.CC-bgWhite {
    background: var(--background) !important;
    --bannerText: var(--text);
    --bannerCardBg: var(--background-raised);
    --bannerCardText: var(--text);
    --comp-divider: oklch(from var(--text) l c h / 0.1);
    --brandLogoFilter: brightness(0) opacity(0.4);
    --brandLogoFilterHover: brightness(0) opacity(1);
    --bannerViewBackground: var(--brand);
    --bannerViewColor: var(--text-on-brand);
    --bannerViewBorder: 1px solid var(--brand);
    --bannerViewBackgroundHover: var(--brand-accent);
    --bannerViewColorHover: var(--text-on-accent);
    --bannerViewBorderHover: 1px solid var(--brand-accent);
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text);
}


/* cc-banner -- Visual Foundation
   Layout (grid columns, aspect-ratio, gap, padding) is set per-component
   in job CSS. This block owns only the visual style that must be consistent
   across every banner on every section.

   Height model: the <img> drives cc-banner height in-flow (no position:absolute
   chicken-and-egg). Per-component CSS sets aspect-ratio on the img, or for
   Splide the slide sets the height and cc-banner fills it. */

.cc-banner {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--bannerRadius);
    text-decoration: none;
}

.cc-banner__img {
    display: block;
    width: 100%;
}

.cc-banner__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    border-radius: var(--bannerRadius);
}

.cc-banner__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--text-block-wrap);
    padding: clamp(1rem, 2vw, 2rem);
    background: var(--gradient-overlay-diagonal);
    z-index: 2;
}

/* .text-wrap - the title + description wrapper. The two spans used to be
   direct flex children of .cc-banner__body; the wrapper has to reproduce that
   context or they collapse back to inline and run together on one line.
   gap/align-items are pulled from the parent so every band keeps the spacing
   and alignment it already declares. */
.text-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--text-wrap);
    align-items: inherit;
    min-width: 0;
}

.cc-banner__title {
    font-family: var(--font-bold);
    font-size: var(--fontSize-2xl);
    color: var(--bannerText);
    order: -1;
}

.cc-banner__desc {
    font-family: var(--bannerDescFontFamily);
    font-size: var(--bannerDescSize);
    line-height: var(--bannerDescLineHeight);
    letter-spacing: var(--bannerDescLetterSpacing);
    color: var(--bannerText);
    opacity: 0.9;
}




.cc-banner__desc:empty,
.cc-banner__title:empty,
.cc-banner__cta:empty {
    display: none !important;
}


/* cc-banner in Splide context
   Keep cc-banner__img in-flow so the flex slide has real content width.
   Height chain: .splide (explicit) -> track/list/slide (100%) -> cc-banner (100%)
   -> cc-banner__img (100%) -> img (100%, object-fit: cover). */

.splide__slide .cc-banner {
    height: 100%;
    border-radius: 0;
    overflow: hidden;
}

.splide__slide .cc-banner__img {
    display: block;
    height: 100%;
    overflow: hidden;
}

.splide__slide .cc-banner__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: unset;
}


/* cc-brand -- Brand Logo */

.cc-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
}

.cc-brand__img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: var(--brandLogoMaxHeight);
    object-fit: contain;
    filter: var(--brandLogoFilter);
    transition: filter var(--global-transition);
}

.cc-brand:hover .cc-brand__img {
    filter: var(--brandLogoFilterHover);
}


/* CC-HomepageTitles */

.CC-HomepageTitles {
    display: flex;
    flex-direction: column;
    gap: calc(var(--bannerGap) * 0.5);
    /* padding-bottom: clamp(0.75rem, 1.5vw, 2.25rem); */
    max-width: var(--navWidth);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
}

.CC-HomepageTitles h2 {
    font-family: var(--font-display);
    font-size: var(--fontSize-2xl);
    margin: 0;
    line-height: 1.2;
}

.CC-HomepageTitles p {
    font-size: var(--fontSize-base);
    margin: 0;
    opacity: 0.8;
}

.CC-HomepageTitles.wht,
.CC-HomepageTitles.wht h2,
.CC-HomepageTitles.wht p { color: var(--bannerText); }

.CC-HomepageTitles.blk,
.CC-HomepageTitles.blk h2,
.CC-HomepageTitles.blk p { color: var(--bannerCardText); }


/* CC-HomepageTitles - CMS-driven title block: a 1-item banner styled as heading + desc + CTA.
   The extra .cc-collection specificity (0,3,0) keeps a title banner above section tile rules. */
.CC-HomepageTitles .cc-collection { width: 100%; }
.CC-HomepageTitles .cc-collection .cc-banner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: calc(var(--bannerGap) * 0.5);
    /* opt out of tile styling that would otherwise leak in */
    opacity: 1; height: auto; aspect-ratio: auto; background: none;
    border-radius: 0; overflow: visible; box-shadow: none; transform: none !important;
}
.CC-HomepageTitles .cc-collection .cc-banner::after { display: none; }   /* no tile corner stamp */
.CC-HomepageTitles .cc-collection .cc-banner__img { display: none; }     /* image slot unused on titles */
.CC-HomepageTitles .cc-collection .cc-banner__body {
    position: static; inset: auto; background: none; padding: 0;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: calc(var(--bannerGap) * 0.5);
}
.CC-HomepageTitles .cc-collection .cc-banner__title {
    order: 0; font-family: var(--font-display); font-size: var(--fontSize-2xl);
    line-height: 1.2; margin: 0; max-width: none;
}
.CC-HomepageTitles .cc-collection .cc-banner__desc {
    order: 1; font-family: var(--bannerDescFontFamily); font-size: var(--bannerDescSize);
    line-height: var(--bannerDescLineHeight); letter-spacing: var(--bannerDescLetterSpacing);
    opacity: 0.8; margin: 0; text-transform: none;
}
/* CTA underneath - canonical banner-view button tokens (matches every other CTA) */
.CC-HomepageTitles .cc-collection .cc-banner__cta {
    order: 2;
    align-self: center;
    margin-top: 0.5rem;
    background: var(--bannerViewBackground);
    color: var(--bannerViewColor);
    border: var(--bannerViewBorder);
    padding: var(--bannerViewPadding);
    border-radius: var(--bannerViewRadius);
    font-family: var(--font-bold);
    font-size: var(--bannerViewSize);
    letter-spacing: 0.12em;
    transition: var(--global-transition);
}
.CC-HomepageTitles .cc-collection .cc-banner:hover .cc-banner__cta {
    background: var(--bannerViewBackgroundHover); color: var(--bannerViewColorHover);
    border: var(--bannerViewBorderHover);
}
/* colour variants - mirror .wht/.blk which otherwise only target h2/p */
.CC-HomepageTitles.wht .cc-collection .cc-banner__title,
.CC-HomepageTitles.wht .cc-collection .cc-banner__desc { color: var(--bannerText); }
.CC-HomepageTitles.blk .cc-collection .cc-banner__title,
.CC-HomepageTitles.blk .cc-collection .cc-banner__desc { color: var(--bannerCardText); }


/* Scroll-in Animation */

[data-animate] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-animate].inView {
    opacity: 1;
    transform: translateY(0);
}
/* CC-SplideBanners.css */

/* Splide Tokens */
:root {
    --splideArrowSize: 2.75rem;
    --splideArrowBg: transparent;
    --splideArrowColor: var(--text);
    --splideArrowHoverBg: transparent;

    /* Arrow hover personality. Set --splideArrowHoverScale to 1 for a house
       style with no bounce; the arrow then only changes colour/opacity. */
    --splideArrowHoverColor: var(--text-inverse);
    --splideArrowHoverOpacity: 1;
    --splideArrowHoverScale: 1.1;

    /* Pagination marker SHAPE. The defaults are dots: a square-ish 8px marker
       that widens when active. Set width/height/radius to get dashes
       (e.g. 1.5rem x 2px, radius 0) or bars, without touching a rule. */
    --splidePaginationSize: 8px;
    --splidePaginationWidth: var(--splidePaginationSize);
    --splidePaginationHeight: var(--splidePaginationSize);
    --splidePaginationRadius: 1px;
    --splidePaginationWidthActive: 1.5rem;
    --splidePaginationBg: oklch(from var(--brand-dark) l c h / 0.3);
    --splidePaginationActiveBg: var(--brand-dark);
}


/* Base Splide Structure
   [data-splide-opts] scoping gives (0,2,0) specificity minimum,
   beating Splide's native (0,1,0) selectors without !important. */

[data-splide-opts] .splide {
    position: relative;
    width: 100%;
    overflow: hidden;
}

[data-splide-opts] .splide__track {
    overflow: hidden;
    position: relative;
    z-index: 0;
}

[data-splide-opts] .splide__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-splide-opts] .splide__slide {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}


/* Arrows */

[data-splide-opts] .splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: var(--splideArrowSize);
    height: var(--splideArrowSize);
    background: var(--splideArrowBg);
    color: var(--splideArrowColor);
    border: 0;
    border-radius: var(--global-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    opacity: 1;
}

[data-splide-opts] .splide__arrow:hover {
    background: var(--splideArrowHoverBg);
    color: var(--splideArrowHoverColor);
    opacity: var(--splideArrowHoverOpacity);
    transform: translateY(-50%) scale(var(--splideArrowHoverScale));
}

[data-splide-opts] .splide__arrow svg {
    width: 1.5em;
    height: 1.5em;
    fill: currentColor;
}

[data-splide-opts] .splide__arrow--prev { left: var(--bannerPadding); }
[data-splide-opts] .splide__arrow--next { right: var(--bannerPadding); }

@media (max-width: 767px) {
    [data-splide-opts] .splide__arrow--prev { left: 0.4rem; }
    [data-splide-opts] .splide__arrow--next { right: 0.4rem; }
}

/* Arrows-top utility -- move arrows above the carousel */
.CC-SplideArrowsTop .splide__arrow {
    position: static;
    transform: none;
}
.CC-SplideArrowsTop .splide__arrow:hover {
    transform: scale(var(--splideArrowHoverScale));
}

.CC-SplideArrowsTop .splide__arrows {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0 var(--bannerPadding) 0.5rem;
}


/* Pagination */

[data-splide-opts] .splide__pagination {
    position: absolute;
    bottom: var(--bannerPadding);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0px;
    list-style: none;
    margin: 0;
    padding: 0;
}

[data-splide-opts] .splide__pagination__page {
    width: var(--splidePaginationWidth);
    height: var(--splidePaginationHeight);
    border-radius: var(--splidePaginationRadius);
    background: var(--splidePaginationBg);
    transition: background 0.2s ease, width 0.2s ease;
    cursor: pointer;
    border: 0;
    display: flex;
}

[data-splide-opts] .splide__pagination__page:hover {
    background: var(--splidePaginationActiveBg);
}

[data-splide-opts] .splide__pagination__page.is-active {
    width: var(--splidePaginationWidthActive);
    background: var(--splidePaginationActiveBg);
}


/* cc-banner in Splide context
   Height model for Splide carousels:
   Set height on .splide itself in per-component CSS, then chain 100% down.
   Splide's flex layout flows top-down -- the track/list/slide must all
   inherit from the .splide container, not from each other or the slide content.

   Per-component pattern:
     .hp-foo .splide                      { height: clamp(320px, 60vh, 780px); }
     .hp-foo .splide__track,
     .hp-foo .splide__list,
     .hp-foo .splide__slide               { height: 100%; }

   cc-banner and __img then fill the slide via the rules in 04-CC-BannerCollections.css. */
/* CC-Footer.css */

/* Footer Variables */
:root {
    --footer-titleSize: var(--fontSize-sm);
    --footer-textSize: var(--fontSize-sm);
    --footer-newsletterInputSize: var(--fontSize-sm);
    --footer-newsletterButtonSize: var(--fontSize-sm);
    --footer-width: var(--global-NavFooterWidth);
    --footer-maxWidth: 100%;
    --footer-padding: var(--global-padding);
    --footer-gap: var(--global-gap);
    --footer-borderRadius: var(--global-radius);
    --footer-background: #1e1e1e;
    --footer-innerBackground: #212121;
    --footer-text: #ffffff;
    --footer-titles: #ffffff;
    --footer-links: oklch(from var(--text l c h / 0.78));
    --footer-links: oklch(from var(--te l c h / 0.78));
    --footer-links: oklch(from var(--t l c h / 0.78));
    --footer-links: oklch(from var(- l c h / 0.78));
    --footer-links: oklch(from var( l c h / 0.78));
    --footer-links: oklch(from #ffffff l c h / 0.78);
    --social-iconColor: #ffffff;
    --social-iconSize: 44px;
    --social-iconHoverColor: brightness(0) opacity(1);
    --social-iconBackground: transparent;
    --company-text: #ffffff;
    --payment-background: transparent;
    --tagline-background: var(--background);
    --tagline-text: #ffffff;
    --footer-buttonSize: var(--global-buttonSize);
    --footer-buttonColor: var();
    --footer-buttonColor: var(--footer-background);
    --footer-buttonRadius: var(--global-buttonRadius);
    --footer-buttonBackground: #ffffff;
    --footer-buttonPadding: var(--global-buttonPadding);
    --footer-buttonBackgroundHover: #ffffff;
    --footer-buttonColorHover: var(--text-inverse);
    --footer-buttonBorderHover: 1px solid var(--brand-dark);
    --footer-buttonPaddingHover: var(--global-buttonPaddingHover);
    --footer-buttonTransition: var(--global-buttonTransition);
	--newsletter-inputBackground: #ffffff0a
}

/* Footer Width */

div#modular-footer-wrapper .fixed {
    max-width: var(--footer-width);
}

#modular-footer-wrapper {
    display: flex;
    flex-flow: row wrap;
    background: var(--footer-background) !important;
    margin: auto;
    float: none;
    max-width: var(--footer-maxWidth);
    padding-top: var(--footer-padding);
    padding-inline: var(--footer-padding);
    align-items: flex-start;
    gap: var(--footer-gap);
}

#modular-footer-wrapper:after {
    display: none;
}

#modular-footer-wrapper > div.fixed {
    width: 100%;
    justify-content: space-between;
    flex: 2;
    background: var(--footer-background);
    border-radius: var(--footer-borderRadius);
}

#modular-footer-wrapper :is(.modular-footer-socials, .modular-footer-retaillinks, .modular-footer-citruslime---tagline) {
    border-bottom: none;
}

#modular-footer-wrapper .modular-footer-socials,
#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    border-top: 0;
    padding: 0;
    width: 100%;
    align-items: flex-start;
    text-align: left;
    grid-gap: 2em;
    background: var(--footer-innerBackground);
    border-radius: var(--footer-borderRadius);
    color: var(--footer-text);
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
    flex: 0 0 auto;
    width: auto;
    padding: 2rem;
    border-radius: var(--footer-borderRadius);
    color: var(--footer-text);
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div br {
    display: none;
}


/* Inner footer column max width */

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container {
    height: auto;
    /* was var(--maxWidth) - a token declared nowhere, so this max-width was
       invalid and silently computed to `none`. The token is --footer-maxWidth
       (declared at the top of this file, 100%). Practical effect of the fix is
       nil, because width: 100% below already constrains this to the same box. */
    max-width: var(--footer-maxWidth);
    padding: 0rem 0rem 2rem 0rem;
    width: 100%;
    margin: 0;
    border-radius: var(--footer-borderRadius);
}


/* Main column ordering */

#modular-footer-wrapper > div.modular-footer-socials {
    flex-flow: column nowrap;
    order: 1;
    justify-content: flex-start;
    max-width: 500px !important;
    grid-gap: 0.5rem;
    border-radius: var(--footer-borderRadius);
    display: flex;
    padding: 1rem;
    align-items: flex-start;
    flex: 1;
    height: 100%;
    background: var(--footer-innerBackground);
}

#modular-footer-wrapper .modular-footer-retaillinks {
    order: 1;
}

#modular-footer-wrapper .modular-footer-retaillinks:nth-child(3) {
    order: 2;
}

#modular-footer-wrapper .modular-footer-citruslime---tagline {
    order: 4;
    background: var(--footer-innerBackground);
    color: var(--footer-titles);
    padding-block: 1em;
    border-radius: var(--footer-borderRadius);
}

@media screen and (max-width: 600px) {
    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container {
        padding: 0;
    }

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
        width: 100%;
    }
}


/* Social and Newsletter */

#modular-footer-wrapper .modular-footer-socials .modular-footer-icons {
    padding: 0;
    order: 1;
    display: flex;
    flex-flow: row nowrap;
    width: auto;
    grid-gap: 0.5rem;
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-icons > a {
    height: var(--social-iconSize);
    width: var(--social-iconSize);
    filter: var(--social-iconColor);
    margin: 0;
    background-color: var(--social-iconBackground);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-icons > a:hover {
    filter: var(--social-iconHoverColor);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter {
    padding: 0;
    border-radius: var(--footer-borderRadius);
}

#modular-footer-wrapper > div.modular-footer-socials::before {
    content: var(--copy-newsletterTitle, "Join Our Newsletter");
    font-family: var(--font-bold);
    display: block;
    margin-bottom: 0.5em;
    color: var(--footer-titles);
    font-size: var(--footer-titleSize);
    max-width: 1400px;
    text-align: left;
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container {
    padding: 0;
    max-width: 100%;
    height: auto;
    background: var(--footer-innerBackground);
    display: flex;
    flex-flow: column;
}

#newsletter-footer-text.newsletterFail {
    margin: auto;
    border-radius: var(--footer-borderRadius);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container .modular-footer-newsletter---container-inner {
    position: relative;
    gap: 1rem;
    background: var(--footer-innerBackground);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    background: var(--footer-innerBackground);
}

/* Newsletter input */
#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner input {
    border-radius: var(--footer-buttonRadius);
    margin: 0;
    height: 54px;
    line-height: 54px;
    font-size: var(--footer-newsletterInputSize);
    width: min(300px, 100%);
    background: var(--newsletter-inputBackground);
    max-width: 700px;
    color: var(--newsletter-inputText);
    justify-content: center;
    border: var(--footer-buttonBorder) !important;
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner input::placeholder {
    font-size: var(--footer-newsletterInputSize);
    color: var(--newsletter-inputPlaceholder);
}

/* Newsletter submit button */
#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit {
    border-radius: var(--footer-buttonRadius);
    font-size: var(--footer-buttonSize);
    height: 54px;
    line-height: 50px;
    color: var(--footer-buttonColor);
    background: var(--footer-buttonBackground);
    padding: var(--footer-buttonPadding);
    border: var(--footer-buttonBorder);
    transition: var(--footer-buttonTransition);
    display: flex;
    align-items: center;
    font-family: var(--font-bold);
}

#modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit:hover {
    background: var(--footer-buttonBackgroundHover);
    color: var(--footer-buttonColorHover);
    border: var(--footer-buttonBorderHover);
    padding: var(--footer-buttonPaddingHover);
}

/* Newsletter: tablet */
@media screen and (max-width: 1024px) {
    #modular-footer-wrapper .modular-footer-socials {
        flex-flow: column nowrap;
        justify-content: center;
        padding: 24px;
    }

    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container .modular-footer-newsletter---container-inner {
        flex-flow: row;
        justify-content: center;
        align-items: center;
        margin-bottom: 0;
    }

    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner input {
        order: 3;
        flex-basis: 90%;
        flex: 1;
        font-size: var(--footer-newsletterInputSize);
    }

    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter .modular-footer-newsletter---container > .modular-footer-newsletter---container-inner #newsletter-footer-submit {
        order: 4;
    }
}


/* Footer Column Links */

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner h4 {
    color: var(--footer-titles);
    font-size: var(--footer-titleSize);
    border-bottom: 1px solid var(--footer-underlineColor);
    padding-bottom: .5rem;
    margin-bottom: 1em;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner h4::after {
    content: "";
    display: none;
    width: 40px;
    height: 3px;
    background: var(--footer-background);
    margin: 10px 0px 10px 0px;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner a {
    color: var(--footer-links);
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner a:hover {
    color: var(--footer-linksHover);
}


/* Contact and Opening Hours */

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---contact {
    order: 3;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---contact a.mainFont {
    font-size: initial;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---contact a.mainFont:after {
    display: none;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---openinghours {
    display: block;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---openinghours dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0 0.5rem;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---openinghours dl dt {
    flex-basis: 50%;
    color: var(--footer-text);
    text-align: left;
}

#modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks---openinghours dl dd {
    font-weight: bold;
    color: var(--footer-text);
    text-align: right;
}


/* Payment Icons */

#modular-footer-wrapper .modular-footer-payment-icons {
    text-align: center;
    background: var(--payment-background);
    order: 4;
}

#modular-footer-wrapper .modular-footer-payment-icons img {
    height: 1.5em;
}


/* Tagline */

#modular-footer-wrapper .modular-footer-citruslime---tagline a {
    color: var(--footer-titles);
}


/* Footer: Mobile */

@media screen and (max-width: 768px) {
    #modular-footer-wrapper {
        flex-flow: column;
        justify-content: center;
        align-items: center;
        padding-inline: 1rem;
        gap: 1rem;
    }

    #modular-footer-wrapper > div.modular-footer-socials {
        order: -1;
        width: calc(100%);
        align-items: center;
        justify-content: center;
        border-radius: 0;
        margin-top: 0rem;
    }

    #modular-footer-wrapper .modular-footer-retaillinks {
        order: 2;
    }

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div,
    #modular-footer-wrapper .modular-footer-socials .modular-footer-newsletter {
        width: 100%;
    }

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner > div {
        text-align: left;
    }

    #modular-footer-wrapper .modular-footer-retaillinks .modular-footer-retaillinks-container .modular-footer-retaillinks-container-inner {
        grid-gap: 0rem;
    }

    #modular-footer-wrapper > div.fixed {
        border-radius: var(--footer-borderRadius);
    }
}

/* Company details */
#modular-footer-wrapper .modular-footer-company-details {
    order: 3;
    background: var(--footer-background);
    color: var(--footer-links);
}

#modular-footer-wrapper .modular-footer-company-details > div {
    color: var(--company-text) !important;
}


/* Footer Column Inner Flex */

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


/* Footer Logo (via ::after pseudo-element) */

.modular-footer-socials {
    display: flex;
}

.modular-footer-socials:after {
    content: "";
    display: block;
    height: 40px;
    width: 150px;
    background: url(/layout/generalLyout/logo.png) center center / contain no-repeat;
    order: -1;
}

#modular-footer-wrapper > div.modular-footer-socials::before {
    margin-bottom: 0;
}

/* Newsletter description text */
.modular-footer-newsletter---container:before {
    content: var(--copy-newsletterBody, "Sign up for news and offers.");
    display: block;
    margin-bottom: 1rem;
    opacity: .8;
}
/* CC-QuickLook.css */

/* Quick Look Variables */
:root {
    --quicklook-titleSize: var(--fontSize-lg);
    --quicklook-textSize: var(--fontSize-base);
    --quicklook-countSize: var(--fontSize-xs);
    --quicklook-background: var(--background);
    --quicklook-titleColor: var(--brand-dark);
    --quicklook-textColor: var(--text);
    --quicklook-countColor: var(--brand);
    --quicklook-hoverColor: var(--brand-link);
    --quicklook-padding: var(--global-padding);
    --quicklook-margin: var(--global-margin);
    --quicklook-gap: var(--global-gap);
    --quicklook-radius: var(--global-radius);
    --quicklook-buttonRadius: var(--global-buttonRadius);
    --quicklook-transition: var(--global-transition);
    --quicklook-border: var(--global-border);
    --quicklook-borderRadius: var(--global-radius);
    --quicklook-buttonSize: var(--global-buttonSize);
    --quicklook-buttonColor: var(--global-buttonColor);
    --quicklook-buttonBorder: var(--global-buttonBorder);
    --quicklook-buttonBackground: var(--global-buttonBackground);
    --quicklook-buttonPadding: var(--global-buttonPadding);
    --quicklook-buttonBackgroundHover: var(--global-buttonBackgroundHover);
    --quicklook-buttonColorHover: var(--global-buttonColorHover);
    --quicklook-buttonBorderHover: var(--global-buttonBorderHover);
    --quicklook-buttonPaddingHover: var(--global-buttonPaddingHover);
    --quicklook-buttonTransition: var(--global-buttonTransition);
    --quicklook-addToCart-background: var(--global-addToCart-background);
    --quicklook-addToCart-border: var(--global-addToCart-border);
    --quicklook-addToCart-color: var(--global-addToCart-color);
    --quicklook-addToCart-backgroundHover: var(--global-addToCart-backgroundHover);
    --quicklook-addToCart-borderHover: var(--global-addToCart-borderHover);
    --quicklook-addToCart-colorHover: var(--global-addToCart-colorHover);
    --quicklook-stockLabelWidth: 135px;
}


/* Quick Look Modal */

.quicklookitem-wrapper[data-state="open"] .quicklookitem-inner {
    border: var(--quicklook-border);
    border-radius: var(--quicklook-borderRadius);
    margin-top: 55px;
}

/* Close button */
.quicklookitem-wrapper .quicklookitem-close {
    border-radius: var(--quicklook-borderRadius);
}

/* Right-side content layout */
.quicklookitem-wrapper .quicklookitem-inner-right {
    display: flex;
    flex-flow: column;
    background: var(--quicklook-background);
}

/* Product name */
.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---name {
    font-size: var(--quicklook-titleSize);
}

/* Price */
.quicklookitem-wrapper .quicklookitem-inner-right---prices-price {
    font-family: var(--font-bold);
    font-size: var(--quicklook-titleSize);
}

/* Was price */
.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---prices .quicklookitem-inner-right---prices-wasprice {
    color: var(--quicklook-hoverColor);
}

/* View full details link */
.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---link {
    font-size: var(--quicklook-buttonSize);
    color: var(--quicklook-buttonColor);
    background: var(--quicklook-buttonBackground);
    border: var(--quicklook-buttonBorder);
    border-radius: var(--quicklook-buttonRadius);
    padding: var(--quicklook-buttonPadding);
    transition: var(--quicklook-buttonTransition);
}

.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---link:hover {
    background: var(--quicklook-buttonBackgroundHover);
    color: var(--quicklook-buttonColorHover);
    border: var(--quicklook-buttonBorderHover);
    padding: var(--quicklook-buttonPaddingHover);
}

/* Click and Collect notice */
.quicklookitem-wrapper .quicklookitem-inner-right .quicklookitem-inner-right---clickcollectnotice {
    margin-top: auto;
    background: transparent;
    border: none;
    color: var(--quicklook-textColor);
}

/* Product image spacing */
.quicklookitem-wrapper .quicklookitem-image > div {
    margin: var(--quicklook-margin);
}


/* Add to Cart Area */

.add-to-cart-area-1-row-2 > div {
    gap: .5rem;
}

/* Quantity label */
.quicklookitem-wrapper .add-to-cart-area-dropdown-qty-label {
    background: none;
    border: 0;
    color: var(--quicklook-textColor);
}

/* Quantity input */
.quicklookitem-wrapper .add-to-cart-area-dropdown-qty input {
    border: var(--quicklook-border);
    border-radius: var(--quicklook-borderRadius);
}

/* Add to cart button: in stock */
.quicklookitem-wrapper .add-to-cart-area-button.bgStandard {
    font-size: var(--quicklook-buttonSize);
    color: var(--quicklook-addToCart-color);
    background: var(--quicklook-addToCart-background);
    border: var(--quicklook-addToCart-border);
    border-radius: var(--quicklook-buttonRadius);
    padding: var(--quicklook-buttonPadding);
    width: 100%;
    display: flex;
    justify-content: center;
    transition: var(--quicklook-buttonTransition);
    line-height: normal;
    align-items: center;
}

.quicklookitem-wrapper .add-to-cart-area-button.bgStandard:hover {
    background: var(--quicklook-addToCart-backgroundHover);
    color: var(--quicklook-addToCart-colorHover);
    border: var(--quicklook-addToCart-borderHover);
}

/* Add to cart button: out of stock */
.quicklookitem-wrapper .add-to-cart-area-button[data-available="false"] {
    background: var(--quicklook-hoverColor);
}

/* Stock message */
.quicklookitem-wrapper .add-to-cart-area-msg-stock:after {
    text-align: left;
}

.quicklookitem-wrapper .add-to-cart-area-msg-stock:before {
    width: var(--quicklook-stockLabelWidth);
    text-align: left !important;
    margin-right: calc(var(--quicklook-gap) * 0.5);
    border-right: var(--quicklook-border);
    padding-right: calc(var(--quicklook-padding) * 0.5);
}

/* Handling message */
.quicklookitem-wrapper .add-to-cart-area-msg-handling:after {
    text-align: left !important;
}

.quicklookitem-wrapper .add-to-cart-area-msg-handling:before {
    width: var(--quicklook-stockLabelWidth);
    text-align: left !important;
    margin-right: calc(var(--quicklook-gap) * 0.5);
    border-right: var(--quicklook-border);
    padding-right: calc(var(--quicklook-padding) * 0.5);
}

/* Message container */
.quicklookitem-wrapper .add-to-cart-area-msg {
    border-top: none;
    margin-top: var(--quicklook-margin);
}
/* ==================== 08-CC-MiniBasket.css ====================
   Minibasket flyout. On mobile it becomes a full-height, 90%-width
   right-hand drawer; the "Continue Shopping" link (#ContinueLink, which
   calls clearAll() to close) is repurposed as a top-right close (x) on
   all viewports.
   Relocated here from 03-CC-NavigationSearch.css so all basket styling
   lives in one file. Loads last (08) so it wins the cascade.
   ============================================================ */

   :root {
    /* relocated basket tokens (unchanged values) */
    --basket-buttonSize: var(--fontSize-sm);
    --basket-pipSize: var(--fontSize-xs);
    --basketButtonBorder: var(--brand-dark);
    --basketButtonText: var(--text);
    --basketButtonHoverBackground: var(--brand-dark);
    --basketButtonHoverText: var(--text-inverse);
    --checkoutButtonBackground: var(--brand-accent);
    --basketPipBackground: var(--brand-accent);
    --basketPipColor: var(--text-on-accent);

    /* drawer knobs */
    --minibasket-width: 90%;          /* mobile */
    --minibasket-widthDesktop: 420px; /* desktop */
    --minibasket-z: 999999;


    --pipSize: 18px;
}

/* ---- relocated colour / border rules (unchanged behaviour) ---- */
.basketCtr.tbcnt.tbcntOpen {
    border-radius: var(--global-radius);
    border: 1px solid #c2c2c2
    min-height: 70dvh;
    max-height: 100%;
    top: 0px;
    right: 0;
    max-width: 500px;
}

.activeminilink {
    border-radius: var(--global-radius) var(--global-radius) 0 0;
}




/* Basket pip (count badge) */
.wrapper.masthead .basketPip {
    color: var(--basketPipColor);
    background: var(--basketPipBackground);
    font-size: var(--basket-pipSize);
    width: var(--pipSize);
    height: var(--pipSize);
    line-height: var(--pipSize);
    bottom: 50%;
    right: 5%;
}


.wrapper.masthead .basketPip2 {
    color: var(--basketPipColor);
    background: var(--basketPipBackground);
    border-radius: 100%;
}

/* Checkout button */
.wrapper.masthead .CCartBut > div:last-of-type > a {
    background: var(--checkoutButtonBackground);
    border-radius: var(--global-buttonRadius);
}

/* ---- Continue Shopping -> close (x), all viewports ----
   #basket is a fixed full-height drawer (below), so it is the containing
   block for this absolutely-positioned close button on every viewport. */
#basket .CCartBut > div:first-of-type {
    position: absolute;
    top: 0rem;
    right: 0rem;
    width: auto;
    margin: 0;
    z-index: 1;
}
#ContinueLink {
    font-size: 0;              /* hide the "Continue Shopping" text */
    line-height: 0;
    width: auto;
    min-width: 0;
    padding: 0.35rem 0.6rem;
    border: none;
    background: none;
}
#ContinueLink::before {
    content: "\00D7";          /* x */
    font-size: 1.75rem;
    line-height: 1;
    color: var(--text);
    transition: var(--global-transition);
}
#ContinueLink:hover::before { color: var(--brand); }

/* Checkout now fills the row (Continue is out of flow) */
#basket .CCartBut > div:last-of-type { width: 100%; }


/* ---- full-height right-hand drawer, slides in when opened (all viewports) ----
   Styled on .basketCtr (both states) and kept rendered off-canvas so the open
   transition can animate; display is forced on to beat the core display:none
   toggle, and the closed panel is hidden off-screen via transform + visibility. */
#basket.basketCtr {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: var(--minibasket-widthDesktop) !important;
    max-width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    z-index: var(--minibasket-z);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    display: flex !important;
    flex-flow: column;
    transform: translateX(100%);   /* off-canvas to the right */
    visibility: hidden;
    transition: transform 0.35s ease, visibility 0.35s ease;
}
/* open state - slide into view */
#basket.basketCtr.tbcntOpen {
    transform: translateX(0);
    visibility: visible;
}

/* Push bottom section down */

#basket .col-1:has(#MiniBasketMerchandiseTotal) {
    margin-top: auto;
}


/* mobile / tablet: wider drawer + larger close */
@media (max-width: 1024px) {
    #basket.basketCtr { width: var(--minibasket-width) !important; }
    #basket .CCartBut > div:first-of-type { top: 0.75rem; right: 0.75rem; }
    #ContinueLink::before { font-size: 2.25rem; }
}

/* product list */

div[data-boxcontext*="minibasket"]{
    max-height: 100% !important;
}/* ==================== 99-CC-Custom.css ====================================
   THE CLIENT CHROME LAYER. Loads last, wins over every framework file.
   REWRITE THIS FILE FROM SCRATCH FOR EACH NEW CLIENT - stale rules here will
   override the next skin, and unlike a stray colour a stray rule cannot be
   found by searching for a token.

   WHAT BELONGS HERE
   Rule-level treatments that are this client's TASTE and nothing else: the
   specific way their dropdowns are framed, the shape of their search control,
   the devices that make their footer theirs.

   WHAT DOES NOT BELONG HERE - and must not creep back in
   Mechanism every client needs, and choices between known options. Those are in
   the framework, driven from 01-CC-Brand.css:

     the masked wordmark and nav icons ......... 03, Brand Assets
     transparent-over-hero nav ................. 03, Transparent-over-hero
     nav bar seam / link case / link tracking .. 03, --navBorderBottom,
                                                 --navItems*
     nav underline hover device ................ 03, --navUnderline-display
     platform CTA strip visibility ............. 03, --ctaStrip-display
     carousel pagination shape and arrow feel .. 05, --splidePagination*,
                                                 --splideArrowHover*
     every word the CSS writes ................. 01, --copy-*
     the page canvas ........................... 02

   Before adding a rule, ask whether a token could express it. If one could, add
   the token to the owning framework file instead. The test that keeps this file
   honest: could the NEXT client want the opposite of this rule and get it by
   editing 01 alone? If yes, it is a switch, not chrome.

   Tokens declared here use the --skin-* prefix, never the client's initials. A
   --tj-* style vocabulary is how one client's assumptions survive into the next
   build unnoticed. lint.ps1 flags any other prefix.

   A worked example of this file, fully populated, is in
   examples/templeton-jones/99-CC-Custom.css - including two blocks that were
   deliberately NOT promoted, and the reasoning for each.

   ---------------------------------------------------------------------------
   THIS CLIENT: Bike Remedy.

   One white canvas broken by wide #F4F4F4 panels, never by a border - the panel
   change IS the division. Type does the work: a light serif (Sentient 300) at
   negative tracking for every heading, a neutral grotesk (DM Sans) for
   everything else, and no third voice. Chrome is square - zero radius on every
   image, panel, card and the search field - with one deliberate exception, the
   fully-rounded pill, which is the only shape allowed to curve and is reserved
   for CTAs and carousel arrows. Photography is full-bleed and edge-to-edge;
   where copy sits on it, a bottom-up black gradient carries it rather than a
   scrim or a box.

   The brand green is a FILL, never an ink. It cannot carry text in either
   direction at body size - 2.25:1 against white, both ways round - so it
   appears as a CTA ground with #1E1E1E on it, and as the nav link hover on the
   near-black bar where it reaches 8.42:1. The client's live site does the
   opposite and is inaccessible for it. Do not restore that.

   HOW SMALL THIS FILE IS, IS THE POINT. Almost everything this design asks for
   turned out to be expressible in 01 as raw values and switches - the pill
   radius over square chrome, the dark bar, the exposed search geometry, the
   dash pagination, the white circle arrows. Only three measurements and TWO
   RULES needed anything here, and both rules are about the same thing: the
   wordmark. One un-masks it in the nav so its two colours survive; one
   repoints the footer copy away from the kit's placeholder, which is Citrus
   Lime's own logo. If you find yourself adding a third unrelated block, check
   01 first.

   Both wordmark rules are specificity- and order-sensitive and both carry the
   reasoning inline. Read those comments before touching either selector.
   =========================================================================== */

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

       All three exist because 02's scale has no step that lands on the design's
       value at desktop, and a per-stripe literal in CC-Home.css would break the
       tokens-only rule there. They are declared here so CC-Home.css has one
       named place to read them from.

       --skin-headingSize is the design's H2: 32px, used FOUR times - both
       product row headings, and the title on each of the four cards in section
       3. 02's nearest steps clamp to 36px (--fontSize-xl) and 40px
       (--fontSize-2xl), both too large. The H1 needs no equivalent, because
       --fontSize-3xl resolves to exactly 3rem at the design's 1440 canvas.

       --skin-cardTextSize is the product card name and price: 20px. Note this
       is NOT --bannerDescSize, which is also 20px but is set in 01 because it
       governs banner descriptions site-wide. The two matching is a coincidence
       of this design, not a relationship - do not collapse them.

       --skin-cardTileRadius is the ONE rounded corner on the entire site. The
       global radius is 0 and the design holds that everywhere except the
       product card's inner image tile, which is 10px. It is a --skin-* rather
       than a promoted switch because it is one element's crop, not a system
       value: the next client wanting square product tiles gets them by having
       no such token at all. */
    --skin-headingSize: 2rem;
    --skin-cardTextSize: 1.25rem;
    --skin-cardTileRadius: 10px;
}


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

   THE WORDMARK IS PAINTED, NOT MASKED. This is the one rule on this site that
   fights the framework rather than configuring it, so read the reasoning before
   changing it.

   The wordmark is a TWO-COLOUR lockup: #FFFFFF for the badge field and "bike",
   #7AC143 for "remedy" and the starburst.

   03 paints --logo as a CSS MASK filled with currentColor (03:1021,
   `mask: var(--logo) left center / contain no-repeat`), which uses only the
   ALPHA channel. That is normally the feature - one file then works over a
   photo, a white bar and a dark bar alike - but this mark has TWO failure modes
   under it:

     1. both colours flatten into one, losing the green "remedy"
     2. worse, THE WHITE CROSS INSIDE THE BADGE DISAPPEARS. It is drawn as a
        hole in the green starburst with the white rounded rect showing through,
        so once every fill becomes a single colour the cross fills in and the
        badge is a solid blob.

   So the mask is switched off and the file is painted as a background-image
   instead, which renders its own colours. --logo is set in 01. BOTH halves are
   needed; either alone gives a single-colour wordmark.

   IT IS AN SVG, NOT A PNG. A PNG was the plan, on the assumption the client's
   file would be a raster wrapper like Williams Cycles' was. It is not - it is
   clean vector art with real fills, so it paints directly, stays sharp at any
   size, and needs no rasterising step. If a PNG is ever preferred, drop it in
   and repoint --logo in 01; nothing here needs to change.

   THE FOUR TRAPS, all learned the hard way on other sites:

   a) NEVER point --logo at an SVG that merely WRAPS a raster. It renders
      nothing, which makes an EMPTY MASK, which hides the container AND the
      platform background image behind it, with no error anywhere. This file is
      real vector art so it is safe - but check before swapping it.

   b) The ink knob is `.wrapper.masthead .logoContainer`, specificity (0,3,0).
      A bare `.logoContainer` here LOSES. The selector below is (0,3,0) as well
      and wins on load order, 99 being last.

   c) The anchor is EMPTY - 03 overrides the platform container's width with
      auto, so an <a class="logo"> with no content collapses to zero. Hence the
      explicit box: 7.4375rem x 1.55rem is the design's 119 x 24.8px.

   d) The mask must be cleared with BOTH the prefixed and unprefixed property.
      03 sets both, and leaving either alive keeps the mask alive. */

.wrapper.masthead .logoContainer .logo {
    -webkit-mask: none;
    mask: none;
    background-image: var(--logo);
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    width: 19rem;
    height: 2.35rem;
    max-width: 150px;
}


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

   Nothing. Every carousel decision this design makes was expressible as a
   token: the dash geometry and its equal-width active state, the 50px white
   circle arrows with a dark chevron, and the hover scale. All in 01's SWITCHES
   block, all reading defaults declared in 05.

   The one piece of real work is in CC-Home.css section 0, which rewrites the
   kit's _shared block to READ those tokens instead of hardcoding the geometry.
   That belongs there rather than here: it is the homepage's assembled chrome,
   not this client's taste. */


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

   ONE RULE, AND ONE KNOWN DEFECT LEFT IN PLACE DELIBERATELY.

   THE RULE - repointing the footer wordmark. 06:468 hardcodes
   `background: url(/layout/generalLyout/logo.png)` on
   .modular-footer-socials:after. That path is the kit's PLACEHOLDER, which is
   the CITRUS LIME logo - so without this override the footer of a client site
   displays Citrus Lime's branding. That is not a styling nicety, it is the
   wrong company's mark on the page, which is why it is fixed rather than
   flagged.

   It is repointed at the SVG because that is the only wordmark asset this site
   has; there is no logo.png for this client and no rasteriser was available to
   make one. Unlike the nav, 06 already PAINTS this as a background image rather
   than masking it, so the two-tone survives with no further work - only the URL
   is wrong.

   ABOUT logo.png - IT IS NOW A 68-BYTE TRANSPARENT 1x1, ON PURPOSE.

   It cannot simply be deleted: 06:468 is a FRAMEWORK file we do not edit, its
   `url()` still names logo.png, and lint fails on a CSS reference to a missing
   file. So the path has to resolve to something.

   It also could not be left as it shipped. The kit's placeholder logo.png is
   the CITRUS LIME logo, and leaving that in a client tree means the rule above
   is the only thing standing between this site and another company's mark in
   its footer. One deleted line and it is live. A transparent pixel removes that
   failure mode: if the override ever goes, the footer renders nothing, which is
   a visible bug someone will fix rather than a plausible-looking wrong logo
   nobody questions.

   If a real Bike Remedy PNG is ever supplied, drop it here and the rule above
   becomes unnecessary - 06 already paints rather than masks, so the hardcoded
   path would simply be correct. No rasteriser was available on the build
   machine, which is the only reason it is not already a PNG.

   THE DEFECT, accepted at brief time and still outstanding: 06 puts this
   wordmark on a WHITE ground, and this mark's "bike" half plus its badge field
   are #FFFFFF - so THAT HALF WILL BE INVISIBLE IN THE FOOTER. Predicted from
   the CSS, not suspected. Raised during the interview; the decision was to flag
   rather than fix so the footer could be looked at as a whole later. The same
   failure Williams Cycles recorded.

   THE TWO FIXES, either of which is cheap:

   1. Take the footer dark. Set 06's footer token group to the bar's own #11110F
      ground with --text-inverse ink. This also bookends the page - near-black
      bar at the top, near-black footer at the bottom, white canvas between -
      which suits a design whose only two grounds are #FFFFFF and #F4F4F4. This
      was the recommendation.

   2. Ship a second, dark-ink wordmark for the footer only, and repoint the rule
      below at it. Leaves two logo assets to keep in step.

   Do not do both. */

.modular-footer-socials:after {
    background-image: var(--logo);
}


/* ==================== PLP / PDP (faf, detail overrides) ==================== */
@charset "UTF-8";

@media screen and (max-width: 767.99px) {
    .a2bButtonGo {
        width: auto
    }
}

/* -- Add to Basket Grid */
#addBasketAnchor {
    padding: 16px
}

.addToBasketArea {
    background: #E4E4E4;
    border-left: none !important;
    border-right: none !important;
}

div.addMobile {
    display: none;
}

div.addDesktop {
    display: block;
    overflow: hidden;
    padding: 0px;
    clear: both;
}

.clAttributeGridContainer {
    margin: 0 auto;
}

.attRow {
    margin: 0 0 16px 0;
    background: #ffffff;
    display: flex;
    width: 100%;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: left;
    flex-direction: row;
}

    .attRow:last-of-type {
        margin: 0
    }

}

.attRow > div:first-child {
    text-align: left
}

.attRow > div {
    flex-direction: row;
    align-items: stretch;
    padding: 0 16px;
    padding: 21px;
    text-align: left;
}

#attCode {
    order: 1;
    flex-grow: 0;
    vertical-align: middle;
    color: cornflowerblue
}

#attName {
    order: 2;
}

#attPrice {
    order: 4;
    flex-basis: auto;
}

#attStockMessage {
    order: 6;
    background: rgba(227, 245, 198, 0.84);
    flex-grow: 1;
    -webkit-flex-grow: 1;
    text-align: left;
}

#attStockLookup {
    order: 4;
    color: #6a8a22;
    text-align: center;
    vertical-align: middle;
    flex-direction: row;
    align-items: stretch;
}

#attQty {
    order: 7;
    min-width: 125px;
    text-align: left;
    position: relative;
}

#attAdd {
    order: 8;
    background: #acd373;
    text-align: center;
    position: relative;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-basis: auto;
    overflow: hidden;
    position: relative;
}

    #attAdd:before {
        content: var(--01-add-to-basket-add);
        line-height: 66px;
    }

    #attAdd:hover {
        background: #96BD5C;
        color: #fff;
    }

#attOutStock {
    order: 9;
    padding: 0;
    background: #FFF2F0;
    padding: 9px;
    flex-grow: 1;
    -webkit-flex-grow: 1;
}

#trOutofStock, #trOutofStockAjax {
    display: none;
    width: 100%;
    background: white;
    padding: 32px;
    border: 1px solid #ebebeb;
    float: left;
    margin-top: 8px;
    position: relative;
    text-align: left;
}

    #trOutofStockAjax h3 {
        margin: 0 0 8px 0;
    }

    #trOutofStockAjax p {
        margin: 0 0 16px 0;
        padding: 0 0 16px 0;
        border-bottom: 1px dotted #aaa;
    }

.out-of-stock #trOutofStock, .out-of-stock #trOutofStockAjax {
    padding: 9px;
    order: 8;
    background: #FFF2F0;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    display: flex !important;
    position: relative;
}

.out-of-stock #attStockMessage {
    order: 5;
    background: #FFF2F0;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    display: flex !important;
    text-align: center !important;
    color: red;
}

    .out-of-stock #attStockMessage span {
        width: 100%;
        text-align: left;
    }

.out-of-stock #attAdd {
    display: none;
}

.out-of-stock #attStockLookup {
}

#trOutofStock input, #trOutofStockAjax input[type="text"] {
    border: none;
    outline: none;
    margin: 0;
    font-size: 14px;
    border: 1px solid #CCC;
    font-size: 18px;
    height: 48px;
    text-align: left;
    right: 9px;
    vertical-align: middle;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    text-indent: 14px;
    font-size: 15px;
    background-color: white;
    width: 100%;
}

.button-outofStock { /* display: block; */ /* width: 64px; */
    background: url("/layout/outofStock2.png") 50% no-repeat #5087B2; /* float: right; */
    cursor: pointer;
    -webkit-appearance: none;
    border-radius: 0;
    order: 7;
    flex-grow: 0 !important;
    cursor: pointer;
    height: 64px; /* position: absolute; */
    right: 0;
    background-size: 32px;
}

.dev-emailback-instock { /* display: block; */
    width: 48px;
    background: url("/layout/outofStock2.png") 50% no-repeat #5087B2; /* float: right; */
    cursor: pointer;
    -webkit-appearance: none;
    border-radius: 0;
    order: 7;
    flex-grow: 0 !important;
    cursor: pointer;
    height: 48px !important;
    position: absolute !important;
    right: 32px;
    background-size: 32px;
    text-indent: -999px;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

    .button-outofStock:hover, .dev-emailback-instock:hover, .dev-emailback-instock:focus, .dev-emailback-instock:active {
        background: url("/layout/outofStock2.png") 50% no-repeat #3B729C !important;
        color: #fff;
        background-size: 32px !important;
    }

.NotifyWarning {
    width: 100%;
    background: #FF5858;
    color: #ffffff;
    line-height: 250%;
    text-align: center;
}

.button-outofStock:before, .dev-emailback-instock:before {
    content: "\f1d8"; /* line-height: 66px; */
    position: absolute;
    right: 25px;
    top: 20px;
    color: #fff;
    z-index: 1;
}

.disableAdd {
    pointer-events: none;
    opacity: 0.9
}

.loader {
    display: none;
    margin: 19px auto;
    font-size: 5px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #ffffff;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 0.5s infinite linear;
}

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

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

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

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

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

.added #attAdd {
}

    .added #attAdd:before {
        content: "\f00c" !important;
        font-family: FontAwesome;
        font-size: 20px;
    }

.notAdded #attAdd:before {
    content: "\f00d" !important;
    font-family: FontAwesome;
    font-size: 20px;
}

.disableAdd #attAdd .loader {
    display: inherit !important
}

.disableAdd #attAdd:before {
    content: "" !important;
    line-height: 66px;
}

.nameCtr {
    display: block;
    color: #666;
}

.name { /* white-space: nowrap; */ /* overflow: hidden; */
    vertical-align: left;
}

.stock {
    display: block;
    min-width: 15%;
    text-align: center;
}

.InStockCSS {
    color: #6a8a22;
    text-align: center;
    vertical-align: middle;
    flex-direction: row;
    align-items: stretch;
}

.OutofStockCSS {
    display: block; /* background: #fff2f0; */
    color: #f54f36;
    width: 100%
}

.BackOrderCSS {
    display: block;
    color: #55acee;
    padding: 0 8px;
}

.locate {
    float: right;
    text-align: center;
    padding: 0 16px;
}

.StoreLookup:before {
    font-family: 'FontAwesome';
    content: "\f041";
    padding-right: 8px;
    color: #E4E4E4;
}

.StoreLookup {
    color: #0066CC;
    cursor: pointer;
    border-bottom: 1px solid #D6D6D6;
}

.price {
    display: block; /* height: 64px; */ /* line-height: 64px; */
    text-align: center;
    float: right;
    padding: 0 16px;
}

.oosEmail {
    display: block;
    height: 64px;
    float: right;
    background: #fff2f0;
    line-height: 64px;
    padding: 0;
}

.add {
    float: right;
    width: 64px;
    padding: 0 !IMPORTANT;
}

.button-matrix {
    cursor: pointer;
    height: 64px;
    width: 100%;
    position: absolute;
    right: 0;
}

.dev-qty {
    float: right
}

    .dev-qty input {
        border: none;
        outline: none;
        margin: 0;
        font-size: 14px;
        border: 1px solid #CCC; /* padding: 10px; */
        font-size: 18px;
        height: 48px; /* margin:8px; */
        text-align: center;
        position: absolute;
        width: 57px;
        top: 10px;
        right: 9px;
    }

#DDStoreLookupResults {
    display: none;
    width: 100%;
    float: left;
    max-height: 250px;
    overflow-y: auto !important;
    margin: 16px 0 0 0;
    border-radius: 4px;
    border: 1px solid #eaeaea;
    padding: 16px;
}

#storelookupresults {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    padding: 0;
    display: table;
}

.cncTitle {
    display: none;
}

#DDStoreLookupResults {
    text-align: left;
}

    #storelookupresults h3, #DDStoreLookupResults h3 {
        margin: 0;
        padding: 0;
        font-size: 1.3em;
    }

    #storelookupresults p, #DDStoreLookupResults p {
        margin: 0;
        padding: 0 0 16px 0;
    }

    #storelookupresults .col-1, #DDStoreLookupResults .col-1 {
        font-size: 12px;
        line-height: 18px;
    }

        #storelookupresults .col-1 h4, #DDStoreLookupResults .col-1 h4 {
            font-size: 12px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin: 0;
            padding: 0;
        }

.cncStore {
    display: block;
    float: left;
    width: 100%;
}

    .cncStore .col-2 span {
        width: 100%;
        float: left;
        display: block;
    }

.cncGMap {
    -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;
    color: #fff !important;
    background: rgba(30,144,255,0.8);
    border-radius: 4px;
    padding: 4px 8px;
    display: inline-block;
    margin: 4px 0 0 0;
}

    .cncGMap:hover {
        color: white;
        background: rgba(30,144,255,1);
    }

.cncAvail {
    color: green;
}

.cncUnavail {
    color: black;
}

.cncStoreOOS {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.75
}

#DDStoreLookupResults .cncStoreOOS {
    display: none;
}

.cncFooterTxt {
    float: left;
    width: 100%;
    display: block;
    font-size: 15px;
    line-height: 1.6em;
    padding-top: 16px;
}

.cncQty {
    text-align: right;
}

.collectLocation > div:nth-last-child(1) span,
.collectLocation > div:nth-last-child(1) .cncGMap,
.collectLocation > div[data-name*="warehouse"] span,
.collectLocation > div[data-name*="warehouse"] .cncGMap,
.collectLocation > div[data-name*="Warehouse"] span,
.collectLocation > div[data-name*="Warehouse"] .cncGMap {
    display: none
}

.collectLocation > div:only-of-type .cncGMap, .collectLocation > div:only-of-type span {
    display: inline-block !important;
}

.cncQty span {
    display: inline !important;
}

.added #attAdd {
}

    .added #attAdd:before {
        content: "\f00c" !important;
        font-family: FontAwesome;
        font-size: 20px;
    }

.notAdded #attAdd:before {
    content: "\f00d" !important;
    font-family: FontAwesome;
    font-size: 20px;
}

.disableAdd #attAdd .loader {
    display: inherit !important
}

.disableAdd #attAdd:before {
    content: "" !important;
    line-height: 66px;
}

.collectLocation .col-1[data-qty="0"] {
    background: #fff;
    order: 1;
}

    .collectLocation .col-1[data-qty="0"] div {
        opacity: 0.7;
    }

.collectLocation .col-1 {
    padding: 16px 0;
    border-top: 1px solid #eaeaea;
}

#storelookupresults .col-1[data-qty="0"] .cncStore .col-2 span .cncGMap { /* display:none; */
}

#storelookupresults .col-1[data-qty="0"] .cncGMap {
    display: none;
}

#storelookupresults .col-1[data-qty="0"] h4 {
    margin: 0;
}

#storelookupresults .col-1[data-qty="0"] .cncUnAvail {
    line-height: 14px;
}

.collectLocation {
    display: flex;
    flex-direction: column;
}

#map {
    height: 100%;
}

.mapContainer {
    padding: 16px;
}

/* Dropdown A2B */
.dropdownA2BWrap {
}

.dropdownA2B {
    padding: 0;
    min-width: 100%;
    display: block;
    overflow: hidden;
    background: #efefef;
    padding: 8px;
    position: relative;
}

    .dropdownA2B .a2btitle {
        text-align: left;
        font-size: small
    }

    .dropdownA2B .a2bsizing {
        text-align: right;
        font-size: 0.8em;
    }

    .dropdownA2B .a2bselect {
        position: relative;
        -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;
        opacity: 0;
        flex-grow: 1;
        width: 0;
        overflow: hidden;
    }

        .dropdownA2B .a2bselect[style*="opacity"] {
            width: 100%;
        }

        .dropdownA2B .a2bselect:before, .dropdownA2B .a2bselect:after {
            position: absolute;
            height: 2px;
            width: 9px;
            border-radius: 2px;
            content: ' ';
            display: block;
            background: #565656;
            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;
            z-index: 1;
        }

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

        .dropdownA2B .a2bselect:after {
            right: 16px;
            -moz-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .dropdownA2B .a2bselect select {
            background: #fff;
            border: 1px solid rgba(130, 130, 130, 0.2);
            height: 48px;
            line-height: 48px;
        }

            .dropdownA2B .a2bselect select option {
                background: white;
            }

                .dropdownA2B .a2bselect select option[data-status*="out of stock"], .dropdownA2B .a2bselect select option[data-status*="no stock"] {
                    background: #ffeae7;
                    color: tomato;
                }

                .dropdownA2B .a2bselect select option[data-status*="last few in stock"], .dropdownA2B .a2bselect select option[data-status*="last few"] {
                    background: #fff9c7;
                }

                .dropdownA2B .a2bselect select option[data-status*="special order available"] {
                    background: #d9f4ed;
                }

        .dropdownA2B .a2bselect table {
            width: 100%;
        }

    .dropdownA2B .a2bQuantity {
        width: 60px;
        min-width: 60px;
        height: 48px;
        border-radius: 6px;
        background: #ccc;
        border: 1px solid rgba(130, 130, 130, 0.2);
        position: relative;
        margin-left: 8px;
    }

        .dropdownA2B .a2bQuantity:empty {
            display: none;
        }

        .dropdownA2B .a2bQuantity input {
            width: 100%;
            min-width: 100%;
            max-width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            -webkit-appearance: none;
            appearance: none;
            margin: 0;
        }

            .dropdownA2B .a2bQuantity input::-webkit-outer-spin-button,
            .dropdownA2B .a2bQuantity input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

    .dropdownA2B .a2bButtonGo {
        margin-left: 8px;
    }

        .dropdownA2B .a2bButtonGo.a2bButtonInactive {
        }

        .dropdownA2B .a2bButtonGo.a2bButtonGoNotify {
            background: tomato;
        }

    .dropdownA2B .a2bStockCheck {
        padding: 0 16px 0 0; /* height:48px; */
        line-height: 28px;
        color: #17af45;
        float: left;
        font-size: 0.8em;
        display: none;
        text-align: left;
        text-transform: capitalize;
        line-height: 50px;
    }

        .dropdownA2B .a2bStockCheck[data-status*="out of stock"], .dropdownA2B .a2bStockCheck[data-status*="no stock"] {
            color: tomato;
        }

        .dropdownA2B .a2bStockCheck[data-status*="last few in stock"], .dropdownA2B .a2bStockCheck[data-status*="last few"] {
            color: #e3a000;
        }

        .dropdownA2B .a2bStockCheck[data-status*="special order available"] {
            color: #09b587;
        }

        .dropdownA2B .a2bStockCheck span {
            font-weight: bold;
            color: #333;
        }

.a2bSpinnerWrap {
    order: -1;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 48px;
}

.a2bselect[style*="opacity: 1"] + .a2bSpinnerWrap {
    display: none;
}

.a2bSpinner {
    height: 48px;
    width: 70px;
    text-align: center;
    padding: 15px 0;
}

    .a2bSpinner > div {
        width: 18px;
        height: 18px;
        background-color: dodgerblue;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .a2bSpinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .a2bSpinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

.a2bStockStore {
    display: none;
    cursor: pointer;
    height: 47px;
    float: left;
    margin: 8px 0 0 0;
    border-bottom: none;
    font-size: 0.8em;
    border-radius: 5px;
    background-color: #8abfaf;
    color: #ffffff;
    width: 100%;
    position: relative;
    padding: 0 61px 0 18px;
    line-height: 47px;
}

.a2bStockStoreInactive {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.a2bStockStore div span:first-child {
    font-size: larger
}

.a2bStockStore span:last-of-type {
    text-transform: uppercase;
    font-size: smaller
}

    .a2bStockStore span:last-of-type:after {
        content: "\e9b9";
        font-family: feather;
        margin: 0 0 0 16px;
        position: absolute;
        top: 0;
        background: #5b917a;
        height: 47px;
        padding: 0 16px;
        line-height: 47px;
        right: 0;
        border-radius: 0 4px 4px 0;
    }

.a2bMain:before {
    content: "Pick-up in Store"
}

.a2bSub:before {
    content: "Check Store Stock"
}

.a2bStockStoreInactive .a2bSub:before {
    content: "Choose an option"
}

#DDStoreLookupResults {
    display: none;
    width: 100%;
    float: left;
    max-height: 250px;
    overflow-y: auto !important;
    margin: 16px 0 0 0;
    border-radius: 4px;
    border: 1px solid #eaeaea;
    padding: 16px;
}

.a2bStockArea {
    width: 100%;
}

.AvaLeadtime {
    display: none;
}

.a2bCover {
    display: none;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.9);
    top: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    border-radius: 4px;
}

.a2bButtonGoNotify + .a2bCover {
    background: rgba(254, 132, 110, 0.9);
}

#m-check-mark {
    margin: 11px 0 0 0;
    width: 36px;
    height: auto;
    display: inline;
}

#checkmark {
}

.a2bAdded #checkmark {
    stroke-dasharray: 640;
    stroke-dashoffset: 640;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-animation-name: draw-around;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-name: draw-around;
    -ms-animation-duration: 1s;
    -ms-animation-delay: 0.3s;
    -ms-animation-iteration-count: 1;
    -ms-animation-fill-mode: forwards;
    animation-name: draw-around;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.a2bPayments {
    margin: 16px 0 0 0;
    padding: 8px 0 0 0;
    border-top: 1px solid #ebebeb;
    position: relative;
}

    .a2bPayments:before {
        content: '\f0d8';
        font-family: 'FontAwesome';
        position: absolute;
        top: -15px;
        right: 0;
        font-size: 20px;
        line-height: 100%;
        color: #ebebeb;
    }

    .a2bPayments img {
        margin: 4px auto;
        height: 24px;
        width: auto;
    }

@-ms-keyframes draw-around {
    0% {
        stroke-dashoffset: 640;
    }

    10% {
        stroke-dashoffset: 640;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes draw-around {
    0% {
        stroke-dashoffset: 640;
    }

    10% {
        stroke-dashoffset: 640;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes draw-around {
    0% {
        stroke-dashoffset: 640;
    }

    10% {
        stroke-dashoffset: 640;
    }

    100% {
        stroke-dashoffset: 0;
    }
}
@charset "UTF-8";
/*  Frequently Asked Questions (FAQ) and Avatars */
div.faqContainer {padding: 32px 0;margin: 32px 0;border-top: 1px solid #E1E1E1;}
div.faqContainer h2 {margin:0 0 1em 0;}
.faqContainerInner {float:none !important;  margin: 0 auto;}
#ask {display:none; width:100%;min-height: 100%; position:; top:0; right:0; z-index: 25;background: #e1e1e1;}
div.faqContainer .formSingle {clear: none;margin: 0.5em 0 1em 0;color: #666;width: 100%;padding: 0.5em 0;clear: both;}
div.faqContainer .faqFormTxt { display: block; line-height: 160%; margin: 1em 0 0 0; padding: 0px }
div.faqContainer #FAQQuestion {width:100%;margin: 1em 0;padding: 0.5em 0;height: 64px;}
.faqContainerInner .button {background:darkorange; color:white; cursor:pointer;border: 0;}
.faqContainerInner .button:hover {background:orange}
#faqStatusLbl {display: block;margin: 1em 0;}
div.faqContainer .faqSubmitBtnContainer { display: block; clear: both }
div#faq #faqAnswer { margin: 0px; padding: 0px }
div#faq a#faqAskBtn { position: relative; left: 0px; }
#faqAskBtn {  font-size: 1.2em;color: cornflowerblue;cursor: pointer;  margin-bottom: 16px;  display: block;}
div.hideTelephone { }
.faqCompleteCtr { vertical-align: top; margin: 0 0 16px 0 ; padding: 0 0 16px 0; border-bottom: 1px dotted #e1e1e1; list-style: none;}
.faqCompleteCtr:last-of-type {border-bottom: none;}
div.faqResponseContainer { display: block; padding: 0; margin: 17px 0 0 0; width: 100%; float: left; text-align: left;}
div.faqFlourishCtr {display: block;width: 100%;height: 0;overflow: visible;float: left;text-align: center;border-top: 1px solid #efefef;margin: 0 0 36px 0;}
div.faqFlourish { display: block; width: 32px; height: 32px; background: url(/layout/faqFlourish.png) top left no-repeat; float: none; position: relative; margin: 0; top: -16px }
div.faqFlourishCtrRev {display: block;width: 100%;height: 0;overflow: visible;float: left;text-align: center;border-top: 1px solid #efefef;margin: 32px 0;}
div.faqFlourishRev { display: block; width: 32px; height: 32px; background: url(/layout/faqFlourishRev.png) top left no-repeat; float: none; position: relative; margin: 0; top: -16px }
div.faqResponseContainer div.faqSummary {display: block;width: 100%;font-family: 'citrfontbold', "Helvetica Neue", Arial, Helvetica, Verdana, sans-serif;outline: 0;line-height:32px;padding-left: 48px;position: relative;}
div.faqResponseContainer div.faqSummary:before {content:'Q';height:32px;line-height:32px;width:32px;text-align:center;background:#e8f4ff;color:#2f76ec;float:left;display:block;margin-right:8px;position: absolute;left: 0;}
div.faqResponseContainer div.faqSmallTxt {display: block;color: #707070;font-size: small;}
div.faqResponseContainer div.faqResponse {display: block;width: 100%;line-height: 28px;padding-left: 48px;position: relative;}
div.faqResponseContainer div.faqResponse:before {content:'A';height:32px;line-height:32px;width:32px;text-align:center;background:#E8FFED;color:#46d82d;float:left;display:block;margin-right:8px;font-family: 'citrfontbold', "Helvetica Neue", Arial, Helvetica, Verdana, sans-serif;position: absolute;/* top: 0; */left: 0;}
div.faqAvatarCtr { width: 100%; float: left }
div.faqAvatarCtr div.avatarEssentialsCtr {display: flex;margin: 32px 0 0 0;float: left;text-align: left;align-items: center;}
div.faqAvatarCtr div.avatarHdr {display: block;text-indent: 0;margin-left: 16px;font-size: smaller;}
div.faqAvatarCtr div.avatarImgCtr { display: block; height: 0; overflow: visible; float: left; text-align: center; border-top: 1px solid #efefef ; margin-top: -24px;}
div.faqAvatarCtr div.avatarImg {width: 50px;height: 50px;border-radius: 50px;box-shadow: 0px 4px 0 #f1f1f1;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: 50% 50%;display: block;position: relative;top: 0;left: 0;float: left;}
.faqPage #faqStatusLbl {height:auto !Important}
.faqPage .faqContainer  { border-top:none; padding:16px 0 32px 0; margin:0}
.faqPage #writeFAQClose { display:none}
[data-financepayment="0"] #financeTopPanel,
[data-financepayment="0.00"] #financeTopPanel {
    display: none;
}

.clearpay-messaging-pdp .AfterpayMessage {
    margin: 0 0 8px 0 !important;
}

.clearpay-messaging-pdp .AfterpayMessage-text,
.clearpay-messaging-pdp .AfterpayMessage-learnMore {
    vertical-align: middle;
}
@charset "UTF-8";
/*  flags */
.priceBlock > div {display: inline-block;vertical-align: text-top;}
.currencylistitem-DEV {float: none;display: inline-block;list-style:none;margin: 0 16px 16px 0;display: -webkit-inline-flex;display: -ms-inline-flexbox;display: inline-flex;}
div[class*="isoFlag"]:before {display: inline-block;/* float:left; */width:16px;height: 12px;content: '';margin: 3px 9px 0 0;}
.currencyCode {font-size: 10px;text-align: left;}
#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;}
#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;}
#CNY:before {background:url('/platformlayout/flags/4x3/cn.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;}

#dynamicCurrencyPane,
#dynamicCurrencyPanel {
    float: left;
    font-size: smaller;
}

    #dynamicCurrencyPane .isoFlag,
    #dynamicCurrencyPanel .isoFlag,
    #dynamicCurrencyPane .currencyConvertedAye,
    #dynamicCurrencyPanel .currencyConverted,
    #dynamicCurrencyPane .valueContainer,
    #dynamicCurrencyPanel .valueContainer
    {
        float: left;
    }@charset "UTF-8";
#detailMiv {
    position: relative;
    background: #fff;
    outline: 1px solid #00000012;
}

    #detailMiv a {
        cursor: zoom-in;
    }

.MIVicon, .MIVicon2 {
    position: absolute;
    top: 0px;
    z-index: 5;
    -webkit-transition: all .2s ease;
    font-size: 12px;
    color: #848484;
    background: #ffffffc9;
}

    .MIVicon div, .MIVicon2 a {
        padding: 16px;
        color: inherit;
    }

    .MIVicon2 a {
        display: block
    }

    .MIVicon:hover, .MIVicon2:hover {
        background: rgba(0,0,0,0.75);
        color: #fff
    }

.MIVicon {
    left: 0px;
}

.MIVicon2 {
    right: 0px;
}

.MIViconZoom, .MIViconMore, .MIViconVideo {
    display: inline-block;
    font-family: feather;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    speak: none;
    line-height: 1;
    font-size: 1.4em;
    text-align: center;
    border-radius: 0;
    -moz-osx-font-smoothing: grayscale;
}

    .MIViconZoom:before {
        content: "\ea1d";
    }

    .MIViconMore:before {
        content: "\e9b9";
    }

    .MIViconVideo:before {
        content: "\e9a8";
    }

.MIViconMore {
    display: none
}

#detailMiv [class*="css-image"] {
    background-size: contain !important;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

.fancybox-slide--html #ModularShortDescription {
    width: 650px;
    max-width: 100%;
    padding: 64px;
    font-size: 36px;
    margin:0;
}

    .fancybox-slide--html #ModularShortDescription p {
        margin: 0;
        text-transform: uppercase;
        font-family: 'citrfontbold';
    }

a[href="#ModularShortDescription"] > div:before,
a#YouTubePane > div:before {
    content: "\e9b9";
    font-family: feather;
    font-size: 24px;
    line-height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

a#YouTubePane > div:before {
    content: "\e9a8";
}

#detailMivThumb {
    display: flex;
    align-items: center;
}

.broken-image {
    width: 100%;
    height: 100%;
    display: block;
    aspect-ratio: 1;
    position: relative;
    z-index: 6;
    background: #fff;
}

/* Large Mobile Phones  --------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .MIVicon, .MIVicon2 {
        bottom: 0;
        top: inherit;
        font-size: 11px;
    }

    .MIVicon2 {
        right: 0;
    }

        .MIVicon div, .MIVicon2 a {
            padding: 0;
            width: 48px;
            height: 48px;
            line-height: 48px;
            text-align: center;
        }

    .fancybox-slide--html #ModularShortDescription {
        font-size: 22px;
        padding: 48px;
        min-height: auto;
        text-align:center;
    }

    #detailMivThumb {
        overflow-x: auto;
    }
        #detailMivThumb .col-thumbnail {
            flex: 0 0 auto;
            width: 96px;
            flex-basis: 96px;
            flex-grow: 0 !important;
        }

}
/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.99px) {
    .MIVicon, .MIVicon2 {
        font-size: 11px;
    }

        .MIVicon div, .MIVicon2 a {
            padding: 8px;
        }
}
@charset "UTF-8";
/* -- Flexible repeaters -- */
.item-repeater-container {
}

.item-repeater-inner {
    outline: 1px solid #E8E8E8;
    text-align: left;
    background: white;
}

    .item-repeater-inner .flipme { /*border: 1px solid #DCD9D9;*/
    }

.item-repeater-info {
    width: 100%;
    float: left;
    text-align: left;
    padding: 0px !important;
}

    .item-repeater-info > div:first-of-type {
        border-bottom: 1px solid #efefef;
        padding: 8px 0;
        margin-bottom: 8px;
        font-size: smaller;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
    }

.item-repeater-info-name {
    font-size: smaller;
    color: #2e3236;
    padding-bottom: 8px;
}

.item-repeater-info span[id*="lblDiscounttext"] {
    width: 100%;
    display: none;
}

.item-repeater-inner .saleIcon-repeater {
    position: absolute;
    top: 16px;
    right: 16px;
    font-family: 'FontAwesome';
}

    .item-repeater-inner .saleIcon-repeater:before {
        color: white;
        text-align: center;
        line-height: 32px;
        border-radius: 100%;
        width: 32px;
        height: 32px;
        display: block;
    }

.item-rewards {
    background-size: 32px;
    clear: both;
}

.item-rewards-earned {
    font-size: smaller;
    color: #8f959e;
}

    .item-rewards-earned span {
        border-bottom: 1px solid #b8dfbe;
        color: #319e40;
    }

.item-repeater-outer:hover .item-repeater-info-name {
    color: #397BBE;
}

.nowPrice-repeater, .standardPrice-repeater {
    color: #707070;
    display: inline-block;
}

[data-onsale="True"] .nowPrice-repeater {
    font-family: 'citrfontreg';
    color: #ff4242;
}

.standardPrice-repeater {
    text-decoration: line-through;
    margin: 0 0 0 8px;
    padding: 0 0 0 8px;
    border-left: 1px solid #dadada;
}

.percentOff-repeater {
    font-family: 'citrfontreg';
    color: tomato;
    display: inline-block;
    margin: 0
}

.repQV {
    height: 42px;
    width: 100%;
    float: left;
    background: white;
    border-top: 1px solid #efefef;
    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;
    font-size: small;
}

    .repQV:before, .repQV:after {
        display: block;
        line-height: 42px;
        height: 42px;
    }

    .repQV:before {
        content: var(--06-repeaters-quickview);
        float: left;
    }

li[data-localstock='False'] .repQV:before, li[data-warehousestock='False'] .repQV:before {
    content: var(--06-repeaters-out-of-stock) !important;
    color: tomato
}

li[data-prelaunch='True'] .repQV:before {
    content: var(--06-repeaters-prelaunch) !important;
    color: darkslateblue
}

li[data-localstock='True'] .repQV:before, li[data-warehousestock='True'] .repQV:before {
    content: var(--06-repeaters-in-stock) !important;
    color: yellowgreen
}

.repQV:after {
    font-family: 'FontAwesome';
    content: "\f06e";
    float: right;
    width: 42px;
    text-align: center;
    background: #fafafa;
}

.starsContainer {
}

span.starsBS, span.starsBS span {
    display: inline-flex;
    background: url(/platformlayout/reviews/stars.png) 0 -16px repeat-x;
    width: 100px;
    height: 16px;
    text-indent: -5000px;
    vertical-align: middle;
}

    span.starsBS span {
        background-position: 0 0
    }

#dev-QuickLook {
    max-width: 800px;
}

#dev-QuickLook-img {
    padding: 32px 32px 0 32px;
}
/*#dev-QuickLook-content {padding:32px !important;}*/
#clPrice-dev .pricing {
    min-height: initial;
    margin: 16px 0 0 0;
}

#ShortDescription-dev p {
    font-size: 14px;
    margin: 16px 0 0 0;
}

#link-dev {
    margin: 16px 0 0 0;
}

    #link-dev a {
        color: #fff;
        font-size: 10px;
        font-weight: normal;
        line-height: 16px;
    }

#MIV-image-dev-small {
    margin-top: 0;
}

.qv-add-container {
    line-height: 32px;
    background: #f4f4f4;
    margin-bottom: 8px;
}

    .qv-add-container > div {
        padding: 16px;
        line-height: 16px;
        font-size: 12px;
    }

.qv-name, .qv-price, .qv-stock, .qv-add {
}

.qv-add {
    flex-grow: 0;
}

#attribute-quicklook-dev {
    background: white;
}

span[id*="lblPromoText"] {
    display: block;
    width: 100%;
    float: left;
    color: #a664a8;
    font-size: 12px;
    margin: 8px 0 0 0;
}

    span[id*="lblPromoText"]:before {
        display: inline-block;
        float: left;
        margin-right: 8px;
        content: "\e9ec";
        font-family: feather;
    }

/* Large Mobile Phones  --------------------------------------------------------------- */
@media screen and (max-width: 767.99px) {
    .item-repeater-outer {
        flex-basis: 50%;
        min-width: 50%;
        width: 50%;
    }

    .item-repeater-info-name, .item-repeater-inner span[class*="Price"] {
        font-size: 13px !important;
    }
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.99px) {
    /* -- Product Repeaters   */
    .item-repeater-outer {
        flex-basis: 33.33%;
        min-width: 33.33%;
        width: 33.33%;
    }

    .standardBSitems .item-bs {
        flex-basis: 50%;
        min-width: 50%;
        width: 50%;
    }
}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) and (max-width : 1439.99px) {
    /* -- Product Repeaters   */
    .item-repeater-outer {
        flex-basis: 25%;
        min-width: 25%;
        width: 25%;
    }

    .standardBSitems .item-bs {
        flex-basis: 16.66%;
        min-width: 16.66%;
        width: 16.66%;
    }
}
/* Desktops  ------------------------------------------------------------------------------------ */
@media screen and (min-width : 1440px) and (max-width : 1913.99px) {
    /* -- Product Repeaters   */
    .item-repeater-outer {
        flex-basis: 16.66%;
        min-width: 16.66%;
        width: 16.66%;
    }

    .standardBSitems .item-bs {
        flex-basis: 16.66%;
        min-width: 16.66%;
        width: 16.66%;
    }
}
/* 4K   ------------------------------------------------------------------------------------------ */
@media screen and (min-width : 1914px) {
    /* -- Product Repeaters   */
    .standardBSitems .item-bs {
        flex-basis: 25%;
        min-width: 25%;
        width: 25%;
    }

    .item-repeater-outer {
        width: 20%;
        display: inline-flex;
        flex-basis: 20%;
        min-width: 20%
    }
}
@charset "UTF-8";
/*  Reviews */
.ReviewStars { width: 100%; clear: both }
.ReviewStars a { margin-left: 7px auto; width: 120px }
.starsContiner a, .starsContiner  { font-size: 12px; line-height: 200% }
span.stars, span.stars span { display: inline-block; background: url("/platformlayout/reviews/stars.png") 0 -16px repeat-x; width: 100px; height: 16px; text-indent: -5000px; float: left }
span.stars span { background-position: 0 0 }
span.starsLarge, span.starsLarge span { display: block; background: url("/platformlayout/reviews/stars-large.png") 0 -23px repeat-x; width: 150px; height: 23px; float: left; text-indent: -5000px }
span.starsLarge span {background-position: 0 0 }
.reviewItem { border-bottom: 1px dotted whitesmoke; list-style: none;}
.reviewItem:last-of-type {border-bottom: none;}
.reviewItem h3 { margin: 0; padding: 0 ;font-size: 1em;}
span.reviewDate { display: none; width: 100% ; margin: 0 0 8px 0;}
span.reviewDate span { font-size: 0.8em; text-transform: inherit; letter-spacing: 0;}
div.starsCtr { width: 100px; margin: 8px 0; height: 16px }
div.reviewComment { width: 100%; overflow: hidden; padding: 0; line-height: 24px;}
div.recommendCtr { width: 100%; height: 48px; overflow: hidden; margin: 8px 0 0 0;  font-size: 16px; line-height: 68px;}
span.recYes {display: inline-block;width: 20px;height: 48px;line-height: 42px;text-align: center;font-size: 1em;float: left;overflow: hidden;}
span.recNo { display: inline-block; width: 20px; height: 48px; line-height: 48px; text-align: center; color: white; float: left; font-size: 1.5em;overflow: hidden;}
span.recYes, span.recNo {font-family:'feather';font-weight: normal;position: relative;text-indent: -99px;}
span.recYes:before {font-family:'feather';font-weight: normal;content:"\e974";color: #8dd145;background: none;text-indent: 0;position: absolute;top: 0;left: 0;}
span.recNo:before {font-family:'feather';font-weight: normal; content: "\e974";color:tomato; background: none;position: absolute;top: 0;left: 0;}
span.recommendTxt { width: 100%; height: 48px; line-height: 48px; text-align: left; text-indent: 32px; display: inline-block; float: left; font-size: 0.8em; position: relative; top: -48px }
.reviewRead > li > .stars { margin-top: 7px }
.reviewDate {}
#fancyAnchor {display:none; width:100%;min-height: 100%; position:; top:0; right:0; z-index: 25;background: #e1e1e1;}
#reviewWriterPanel {min-height: 100%;}
div.detailReviewSummary div.aggregateRating { height: 64px; float: left; overflow: hidden; width: 100% }
div.detailReviewSummary a.brandImg { display: block; width: 64px; height: 64px; float: right; position: relative; top: -64px }
div.starsPosition { display: inline-block; vertical-align: middle;}
span.totalReview { display: none;}
a.reviewLink {display: inline-block;color: #BDBDBD;font-size: 0.75em;}
.reviewContainerImg {   border-right: 0 !important;   margin:1em 0 0 0}
.reviewContainerCopy {height: 100%;background:;overflow: hidden;}
.reviewContainerImg img { width: 112px;    height: 112px; border-radius: 50%; display: inline-block; overflow: hidden;  margin: 0 1em 0 0;}
.reviewContainerCopytitle { display: inline-block;  text-align: left; margin: 16px 0 0 0;display: none !Important;}
.reviewContainerCopy {padding: 28px;line-height: 190%;padding:16px 0;margin:16px 0;}
.reviewContainerCopytitle span {  display: inline-block;float: none; }
.reviewContainerCopyField { padding: 0; margin: 0 auto; clear: both; float:none; display:inline-block}
.reviewContainerCopyField>li, .reviewContainerCopyField>div { list-style: none; margin:0 0 1em 0; text-align:left; min-height: 35px;  display: inline-block;}
.reviewContainerCopyField>li {padding:0 1em 0 0;}
.reviewContainerCopyField>div {}
.reviewContainerCopyField div input.formSingle-small {width:100%;padding: 8px;border: 1px solid #e1e1e1;}
.reviewContainerCopyField div textarea {width: 100%;height: 100px;/* border: 1px solid #e1e1e1; */}
.reviewContainerCopyOption { float: right }
.reviewContainerCopyField li.col-1 a {background:darkorange; color:white; cursor:pointer}
.reviewContainerCopyField li.col-1 a:hover {background:orange}
.starOn { background-image: url("/platformlayout/reviews/starOn.png"); background-repeat: no-repeat; width: 30px; height: 25px; float:left }
.starOff{ background-image: url("/platformlayout/reviews/starOff.png"); background-repeat: no-repeat; width: 30px; height: 25px; float:left }
#starRate { float: left; clear: both }
#starRate li { float: left; list-style: none }
#starRate a:hover, #starRate .on { background-image: url("/platformlayout/reviews/starOn.png"); background-repeat: no-repeat; width: 30px; cursor: pointer }
#starRate a, #starRate .off { float: left; background-image: url("/platformlayout/reviews/starOff.png"); background-repeat: no-repeat; width: 30px; height: 25px }
label.recNo { background-color: #9d1110; padding: 8px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; font-size: 1em;color:white;display: block;}
label.recYes { -webkit-border-radius: 0px; border-radius: 0px; width: 100%; text-align: center; margin-bottom: 14px; float: left; background: #7AA711;padding: 8px;display: block;}
.reviewAreaSummary {float:right;margin: 0 16px 0 0;}
.reviewAreaSummary .reviewBottom {/* display:none; */float: right;border-radius: 50%;background: cornflowerblue;width: 32px;height: 32px;text-align: center;line-height: 32px;color: #fff;margin-top: -4px;margin-left: 8px;font-size: 0.7em;}
#reviewShow {font-size: 1.2em;color: cornflowerblue;cursor: pointer;margin-bottom: 16px;display: block;}
#writeFAQClose, #writeReviewClose {font-family:'feather';font-weight: normal; font-size:2em; text-align:right; cursor:pointer; color:#666;margin: 0;}

@media screen and (max-width: 767px) {
    .reviewItem h3 {padding:16px 0 8px;}
}

/* Shopper Approved */
#product_just_stars {
    display: flex;
}

#product_just_stars .ind_cnt {
    display: inline-block;
    width: auto;
    margin: 4px 0px 0px 6px;
    font-size: 9pt;
}
/* End of Shopper Approved */
@charset "UTF-8";

#tagalongwrapper {
    display: none;
}

#tagAlongPanel {
    border-bottom: 1px solid #dcdcdc;
}

    #tagAlongPanel:empty {
        padding: 0;
        border-bottom: none;
    }

#starbuysV2target {
    display: block;
    float: right;
    order: -1;
    width: 100%;
}

div[id*="starbuyBtnDisplay"] label {
    display: block;
    float: left;
    font-size: 0;
    text-decoration: none;
    line-height: 0px;
    position: relative;
}

    div[id*="starbuyBtnDisplay"] label:before,
    div[id*="starbuyBtnDisplay"] label:after {
        content: var(--08-star-buys-detail-view-offer);
        display: block;
        white-space: nowrap;
        font-size: 11px;
        letter-spacing: 0.2em;
        line-height: 22px;
    }

    div[id*="starbuyBtnDisplay"] label:after {
        content: 'Click to view';
        color: rgba(255,255,255,0.5);
        -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;
        letter-spacing: 0.1em;
        font-size: 10px;
        display: none;
    }

div[id*="ProductDetail21_tagAlongV2_starbuyBtnDisplay:before"] {
    font-family: feather;
    content: "\e9e5";
    background: #a46ec2;
    padding: 8px;
}

/* New Starbuys PDP */
div[id*="starbuyBtnDisplay"] {
    background: rgb(145,88,191);
    background: linear-gradient(90deg, rgba(145,88,191,1) 0%, rgba(176,126,215,1) 100%);
    border-radius: 4px;
    color: white;
    text-align: left;
    line-height: 36px;
    height: 36px;
    position: relative;
    text-transform: uppercase;
    width: 100%;
    padding: 8px 8px 8px 40px;
    font-size: 11px;
    display: block;
    margin: 0 0 16px 0;
}

    div[id*="starbuyBtnDisplay"]:hover label:after {
        color: white;
    }

    div[id*="starbuyBtnDisplay"], div[id*="starbuyBtnDisplay"] * {
        cursor: pointer;
        text-decoration: underline;
    }

        div[id*="starbuyBtnDisplay"]:before {
            font-family: feather;
            content: "\e9e5";
            position: absolute;
            left: 0;
            top: 50%;
            width: auto;
            height: auto;
            line-height: 200%;
            text-align: center;
            color: white;
            letter-spacing: 0;
            padding: 0 9px;
            -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;
            -moz-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            border-right: 1px solid rgba(255,255,255,0.5);
        }

        div[id*="starbuyBtnDisplay"]:after {
            content: var(--08-star-buys-detail-click-here);
            width: auto;
            height: auto;
            line-height: 200%;
            text-align: center;
            color: white;
            letter-spacing: 0;
            padding: 0 9px;
            -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;
            display: block;
            float: right;
            border-radius: 4px;
            background: rgba(255,255,255,0.15);
        }

        div[id*="starbuyBtnDisplay"]:hover:after {
            background: rgb(132, 72, 181);
        }

#starbuyDisplayPanel {
    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: 1;
    -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;
    padding: 32px;
}

.starbuyDisplayPanel-Inner {
    width: 400px;
    max-width: 100%;
    background: rgb(145,88,191);
    background: linear-gradient(90deg, rgba(145,88,191,1) 0%, rgba(176,126,215,1) 100%);
    opacity: 1;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    position: relative;
    color: white;
}

.starbuyDisplayPanel-Inner-Close {
    width: 100%;
    background: white;
    opacity: 1;
}

.starbuyDisplayPanel-Close {
    background: white;
    border: 1px solid #a46ec2;
    color: #a46ec2;
}

    .starbuyDisplayPanel-Close:hover {
        background: #a46ec2;
        border: 1px solid #a46ec2;
        color: white;
    }

    .starbuyDisplayPanel-Close:before {
        font-family: feather;
        content: "\ea16";
        margin-right: 4px;
    }

    .starbuyDisplayPanel-Close:after {
        content: var(--08-star-buys-detail-continue-shopping);
    }


#starbuyDisplayPanel .sbuytag {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 100%;
    padding-bottom: 8px;
    font-size: 10px;
    border-bottom: 1px solid #a46ec2;
}

#starbuyDisplayPanel .sbuydesc {
    font-size: large;
    margin: 16px 0 8px 0;
    font-family: 'citrfontbold';
}

#starbuyDisplayPanel .sbuyreq {
    font-size: 12px;
    opacity: 0.8;
}

/*  Starbuys -------------------------------------------------------------------------------------------*/
.taContainerSmall {
    border: 2px solid #9158bf;
    background: #f3edf6;
    padding: 0px;
    max-width: 100%;
}

.taContentContainerSmall {
    text-align: left;
}

    .taContentContainerSmall .col-70p {
        padding: 32px
    }

.taTitle {
    width: 100%;
    text-transform: uppercase;
    font-size: smaller !important;
}

.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 {
            font-family: feather;
            content: "\e9e5";
            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;
    }

.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: 0;
}

.taContentContainerSmall h3 {
    color: #a664a8;
    font-size: 18px;
    padding: 0 0 8px 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;
    margin-top: 16px;
    float: left;
    font-size: x-small;
}

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

/*  Cust Edit for Pauls - Starbuys */
.taTogeather, .taSeperately {
    width: 100%;
}

.taSeperately {
    font-size: small
}

    .taTogeather li, .taSeperately li {
        margin: 0 !important;
        border-bottom: 1px dashed;
    }

.taTogeather li {
    border-bottom: inherit;
}

.taSeperately li {
    border-bottom: 1px dashed #e2e2e2;
}

.taImg span {
    background: #9158bf;
}

.taContentContainerSmall h3, .taTogeather, span[id*="lblPromoText"] {
    margin: 0 0 8px 0;
}

span[id*="lblPromoText"] {
    text-transform: uppercase;
    font-size: large;
}

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

    #tagAlongPanel {
        padding: 0;
    }

    .taContentContainerSmall > .col-2 {
        width: 100%;
    }

        .taContentContainerSmall > .col-2.taImg {
            display: none;
        }
}
@charset "UTF-8";
/*  Supplier tech data */
.techData { display: inline }
.techData li.techData-title { width: 100%; line-height: 150%; list-style: none; padding-bottom:18px; border-bottom: 1px solid #e5e5e5;}
.techDataLitem { float: left; margin-bottom: 28px; padding: 0;}
.techDataLitem li { width: 100%; font-weight: normal; list-style: none; padding: 14px ; float:left;table-layout: auto;}
.techDataLitem li:nth-child(odd) { background:#f5f5f5}
.techDataKey { float:left; width: 25%;     display: inline; zoom: 1;}
.techDataValue {float:left; width: 75%;padding-left: 14px;}

/*  Techical data top */
.quickTechInfo tr, .quickTechInfo li, .quickTechInfo p { display: none }
.quickTechInfo tr, .quickTechInfo td, .quickTechInfo p, .quickTechInfo th, .quickTechInfo li, .quickTechInfo span {padding: 0 3px;margin: 0 0 5px 0;line-height: 150%;vertical-align: baseline !important;}
.quickTechInfo tr:nth-child(1),
.quickTechInfo tr:nth-child(2),
.quickTechInfo tr:nth-child(3),
.quickTechInfo tr:nth-child(4),
.quickTechInfo li:nth-child(1),
.quickTechInfo li:nth-child(2),
.quickTechInfo li:nth-child(3),
.quickTechInfo li:nth-child(4){ display: inherit!important; }
.quickTechInfo li, .quickTechInfo tr {list-style:none; width: 100%; float: left;font-size: 12px;}
.quickTechInfo li:before, .quickTechInfo tr:before {content: "\f00c";font-family:'FontAwesome';color: #999;margin-right:6px;font-size: 12px;float:left;display:block;}
.quickTechInfoLink { font-size: 12px; margin-bottom: 16px;float:left;display:block;}

/*  Techical data top - SIM */
.quickTechInfo .techData > li, .quickTechInfo .techData > ul, .quickTechInfo .techDataLitem li {display: none !important;border-bottom: none;padding-bottom: 5px;background: none;}
.quickTechInfo .techData > ul:nth-child(2),
.quickTechInfo .techDataLitem li:nth-child(1),
.quickTechInfo .techDataLitem li:nth-child(2),
.quickTechInfo .techDataLitem li:nth-child(3),
.quickTechInfo .techDataLitem li:nth-child(4){ display: inherit!important; }
.quickTechInfo .techData > ul { margin-bottom:0px}
.quickTechInfo .techData-title, .quickTechInfo h2 { display: none !important }
.quickTechInfo .techDataKey {width: auto;font-weight: 700;}
.quickTechInfo .techDataValue { width: auto;}
.techDataLitem { font-size:inherit}
@charset "UTF-8";
/*  minimal setting */

#firstdetails {
    text-align: center;
    text-align: left;
    max-width: 100%;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-orient: vertical;
    width: 100%;
    margin: auto;
}

    #firstdetails > div, #firstdetails > a, #firstdetails > h1 {
        margin: 0 0 8px 0;
        padding: 0;
    }

.productPageTop {
    align-content: center;
    background: white;
    border-bottom: 1px solid #dcdcdc;
}

@media screen and (max-width: 1920px) and (min-width: 1441px) {
    .productPageTop {
        padding-right: 32px
    }
}



.productPrices {
    margin-bottom: 0px;
    display: inline-flex
}

    .productPrices .currencylistitem-DEV {
        margin: 0 8px 0 0
    }

    .productPrices .currencyCode {
        display: none
    }

    .productPrices itemtemplate, .productPrices ul, .productPrices li, .productPrices dev {
        padding: 0;
        margin: 0;
        float: none !important
    }


.product-icon-manager {
    max-width: 68px;
    margin: 0 8px 8px 0;
    float: left;
}


#firstdetails {
    max-width: 60%;
}

.cta-strip-summary a {
}

    .cta-strip-summary a p {
        margin: 0;
        display: inline;
    }

[id*="expandme-"] {
    display: none;
}

@media screen and (max-width: 767px) {
    #firstdetails {
        max-width: 100%;
    }
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023px) {
    #firstdetails {
        max-width: 90%;
    }
}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) and (max-width : 1439px) {
    #firstdetails {
        max-width: 80%;
    }
}

/* Desktops  ------------------------------------------------------------------------------------ */
@media screen and (min-width : 1440px) and (max-width : 1913px) {
    #firstdetails {
        max-width: 60%;
        padding-right: 0px;
    }
}

/* 4K   ------------------------------------------------------------------------------------------ */
@media screen and (min-width : 1914px) {
    #firstdetails {
        max-width: 60%;
        padding-right: 0px;
    }
}


@media screen and (max-width: 767.99px) {
    .productPageTop {
        padding: 0px;
    }
}

@media screen and (min-width : 768px) and (max-width : 1023.99px) {
    .productPageTop {
        padding: 0px;
    }
}



/* Call to Actions on minial */
.ctaIconLink {
    margin-top: 16px;
    display: inline-block
}

.ctaRight {
    border: 1px solid #dcdcdc;
}

.tdelay {
    color: #552249;
}

.timehour, .timeminutes, .fastone {
}

    .timehour .timehour, .timehour .timeminutes {
        color: #008a00;
    }

.fastone {
    margin-bottom: 0px;
}

.ctaRight > div {
    padding: 32px;
    display: inline-block;
    clear: both;
}

    .ctaRight > div:last-of-type {
        padding-bottom: 64px
    }

    .ctaRight > div a {
        color: inherit
    }

.ctaIcon {
    font-size: 26px;
}

    .ctaIcon.stars {
        font-size: 22px
    }

.ctaTitle, .ctaTitle span, .fastone strong {
    font-size: 1em;
    margin: 16px 0;
}

.ctaMessage {
    max-width: 400px;
    margin: auto !important;
    font-size: small;
}

    .ctaMessage p {
        margin: 0;
        padding: 0;
    }

    .ctaMessage .productName {
        font-size: small;
    }

#SizingGuide .container, .productPageTop .container {
    background: white;
}


div.detalCTA > div, div.detalCTA > span {
    margin-bottom: 16px;
    display: block;
    width: 100%;
    float: left;
}



/*  Product General */
.icon-container li {
    list-style: none;
    display: inline-block;
    margin: 3px;
}

.season {
    display: block;
    border-bottom: 1px dotted #e1e1e1;
    margin: 0 0 16px 0;
    padding: 16px 0 16px 0;
    -webkit-column-span: all;
    column-span: all;
    font-size: smaller;
}

    .season p {
        align-items: center;
        margin: 0 16px 0 0;
        display: inline-block
    }

.browseSimilar ul.pdlp li a:hover {
    background: white;
    color: #333;
}

.detailShortDesc {
    padding: 16px 0;
    font-size: larger;
}

    .detailShortDesc p, .detailShortDesc a, .detailShortDesc span, .detailShortDesc div {
        margin: 0px;
        padding: 0px;
    }


/* -- Customer rewards */
#CustomerRewardPanel, #CustomerRewardPane {
    color: green;
}

.crValueCtr {
    margin: 0 0 0 0;
    display: inline-block;
}

.crTextDesc {
    font-size: small;
    display: inline-block;
}

    .crTextDesc span {
        color: #4E9A14;
        text-transform: lowercase;
        display: inline-block;
        font-weight: 400;
    }

.crSignInUpCtr {
    background: #f1f1f1;
    height: 49px;
    width: 100%;
    float: left;
    border-top: 1px solid #e1e1e1;
    display: none;
}

.crLink {
    width: 45%;
    height: 48px;
    float: left
}

    .crLink a {
        width: 100%;
        height: 48px;
        text-align: center;
        line-height: 48px;
        display: block;
        text-decoration: underline;
        color: #0076a3 !important
    }

        .crLink a:hover {
            text-decoration: none
        }


.detailCTA a {
    display: block
}

    .detailCTA a:before {
        content: "\e93d";
        font-family: feather;
        margin-right: 8px;
        color: #dc3e25;
    }


/* -- Hide this image on Desktop Viewports */
div.mobileImage {
    display: none
}

/* Product Brand */
.brandImg {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: smaller
}

/* Prelaunch */
.prelaunch {
    line-height: 150%;
    margin: 0;
    background: #fbf1f6;
    border: 1px solid #832357;
    color: #832357;
    text-align: left;
    font-size: small;
    padding: 0 0 0 12px !important;
    border-radius: 6px;
    overflow: hidden;
}

    .prelaunch a {
        line-height: 150%;
        background: #832357;
        color: white;
        padding: 0 24px;
        white-space: nowrap;
    }

        .prelaunch a:hover {
            background: #b9176f;
            color: white;
        }

    .prelaunch span > span {
        font-family: 'citrfontbold';
    }

#preOrderTerms {
    width: 70%;
}

.pre-order, .pre-launch, .leadtime {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding: 14px;
    height: 1%;
    overflow: hidden;
}

.pre-launch {
    margin-right: 0px;
}

#preOrderTerms .title {
    color: #714071;
    float: none;
    margin: 16px 0;
}

.leadtime {
    clear: both;
    width: 100%;
    margin-top: 10px;
}

/* detail price */
.nowPrice, .standardPrice, .percentOff {
    display: inline-block;
    padding: 0 8px 0 0;
}

.nowPrice {
    font-weight: 700
}

.standardPrice {
    text-decoration: line-through;
    display: inline-block;
    color: #888888;
}

    .standardPrice:before {
        margin-right: 0.25em
    }

.percentOff {
    color: tomato;
}


/*  Detail Colour Picker */
.colourPicker {
}

    .colourPicker > div {
        cursor: pointer;
        width: 70px;
        margin: 8px;
        border: 1px solid #EBEBEB;
    }

        .colourPicker > div:hover {
            border: 1px solid #d7d7d7;
        }


/*  Detail CS Messages */
.detailCSMessages a {
    margin: 0 0 8px 0;
    padding: 0 16px 8px 16px;
    display: inline-block;
    color: cornflowerblue;
    text-decoration: none
}

.detailCSMessages span {
    font-family: 'FontAwesome';
    font-weight: normal;
    margin: 0 8px 0 0;
    text-decoration: none
}

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

.furtherInfoArea .detailCSMessages a {
    border-bottom: 1px solid #e1e1e1;
    width: 100%;
    text-align: left;
}

.furtherInfoArea .detailCSMessages h2 {
    margin: 0 0 16px 0;
    padding: 0 0 16px 0;
    color: orangered;
}

    .furtherInfoArea .detailCSMessages h2 span {
        font-family: 'FontAwesome';
        font-weight: normal;
        margin: 0 8px 0 0;
    }


/*  Detail C&C */
.detailCC h2 {
    margin: 0 0 16px 0;
    padding: 0 0 16px 0;
    color: orangered;
}

    .detailCC h2 span {
        font-family: 'FontAwesome';
        font-weight: normal;
        margin: 0 8px 0 0;
    }

.detailCC p {
    line-height: 1.5em;
}


/*  Detail Contact */
.detailContact {
}

    .detailContact h2 {
        margin: 0 0 16px 0;
        padding: 0 0 16px 0;
        color: orangered;
    }

        .detailContact h2 span {
            font-family: 'FontAwesome';
            font-weight: normal;
            margin: 0 8px 0 0;
        }

    .detailContact p {
        line-height: 1.5em;
    }

        .detailContact p a {
            color: orangered;
            text-decoration: none
        }

            .detailContact p a span {
                font-family: 'FontAwesome';
                font-weight: normal;
                margin: 0 8px 0 0;
            }


/*  Supplier tech data */
.techData {
    display: inline;
    margin: 0;
    padding: 0;
}

    .techData li.techData-title {
        clear: both;
        width: 100%;
        line-height: 150%;
        list-style: none;
        padding-bottom: 8px;
        border-bottom: 1px dotted #a6afbc;
    }

.techDataLitem {
    float: left;
    margin: 0 0 48px;
    padding: 0;
    width: 100%;
    font-size: small;
}

    .techDataLitem li {
        width: 100%;
        font-weight: normal;
        list-style: none;
        padding: 8px 0;
        float: left;
        table-layout: auto;
        border-bottom: 1px solid #efefef;
    }

        .techDataLitem li:nth-child(odd) {
        }

.techDataKey {
    float: left;
    width: 25%;
    display: inline;
    zoom: 1;
    word-break: break-all;
}

.techDataValue {
    float: left;
    width: 75%;
    padding-left: 14px;
}



/*  Buyers Guide */
.detailBuyers {
    text-align: justify;
    margin-top: 32px;
}

    .detailBuyers h2 {
        margin: 0 0 16px 0;
        font-weight: normal;
    }

        .detailBuyers h2 span {
            font-family: 'FontAwesome';
            font-weight: normal;
            margin: 0 8px 0 0;
            color: #e1e1e1;
        }

    .detailBuyers p {
        margin-bottom: 16px;
        text-align: justify
    }

        .detailBuyers p:last-of-type {
            margin-bottom: 0
        }



/*  Sizing Area & Charts */
.detailSize table {
    width: 100%;
    text-align: center;
    border: 1px solid #e1e1e1;
}

    .detailSize table tr {
    }

        .detailSize table tr td, .detailSize table tr th {
            border: 1px solid #e1e1e1;
        }

        .detailSize table tr:last-of-type td {
            border: 1px solid #e1e1e1;
        }

        .detailSize table tr:nth-of-type(odd) td, .detailSize table tr:nth-of-type(1) th {
            background: #f7f7f7
        }



/*  Video */
.detailVideo {
    margin-top: 32px;
}

    .detailVideo h2 {
        margin: 0 0 16px 0;
        font-weight: normal;
    }

        .detailVideo h2 span {
            font-family: 'FontAwesome';
            font-weight: normal;
            margin: 0 8px 0 0;
            color: #e1e1e1;
        }


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

.videoText {
    color: #b9b9b9;
}

    .videoText > span {
        display: block;
        padding: 8px
    }



/*  Long Description */
.mainProdDesc {
    background: none;
    max-width: 1600px;
    float: none;
    margin: 0 auto;
}

    .mainProdDesc p {
    }

    .mainProdDesc h2 {
        margin: 0 0 16px 0;
        font-weight: normal;
        padding: 0 0 21px 0;
    }

        .mainProdDesc h2 span {
            font-family: 'FontAwesome';
            font-weight: normal;
            margin: 0 8px 0 0;
            color: #e1e1e1;
        }

.detailLongDesc {
    text-align: justify
}

    .detailLongDesc h2 {
        margin-bottom: 16px
    }

    .detailLongDesc p {
        margin-bottom: 16px
    }

        .detailLongDesc p:last-of-type {
            margin-bottom: 0
        }

.longDesc ul {
    margin: 16px 0;
    padding: initial;
    list-style: initial;
}

.longDesc li {
    margin: 0 0 0 18px;
    padding: initial;
    list-style: initial;
}




/*  Pro.pinion */
.detailPropinion { /* color: #fff; */
    margin: 32px 0 0 0;
    float: left;
}

    .detailPropinion h2 {
        margin: 0 0 8px 0;
        padding: 0 0 8px 0;
        font-weight: normal;
    }

        .detailPropinion h2 span {
            font-family: 'FontAwesome';
            font-weight: normal;
            margin: 0 8px 0 0;
            color: #e1e1e1;
        }

    .detailPropinion p {
        margin-bottom: 16px;
        text-align: justify
    }

        .detailPropinion p:last-of-type {
            margin-bottom: 0
        }

div.propinion {
    float: left;
    margin-right: 10px;
    text-align: left;
    margin: 0 0 28px 0;
    padding: 28px;
    width: 100%;
    background: #55acee;
    color: white;
    position: relative;
    overflow: hidden
}

    div.propinion h2 {
        color: white;
        padding: 0 0 16px 0;
        border-bottom: 1px solid white
    }




/*  Price Match */



/*  Browse Similar Products */
.detailBrowseSimilar {
}

    .detailBrowseSimilar h2 {
        color: white;
        display: none;
    }

    .detailBrowseSimilar .pdlp {
        margin: 0;
        padding: 0;
    }

        .detailBrowseSimilar .pdlp li {
            display: inline-block;
            font-size: 1.5em
        }

            .detailBrowseSimilar .pdlp li a {
                text-decoration: none;
                color: white;
                height: 64px;
                line-height: 64px;
                display: inline-block;
                padding: 0 16px;
            }

                .detailBrowseSimilar .pdlp li a:hover {
                    background: rgba(255,255,255,0.075);
                }


/* -- Detail  repeater -- */
.detailRepeater .repeater {
    width: 100%;
    margin: 0 0 16px 0;
    padding: 0;
    display: flex !important;
    align-items: center;
}

    .detailRepeater .repeater a .itemImage {
        width: 100px;
        height: 100px;
        outline: 1;
    }

        .detailRepeater .repeater a .itemImage img {
            width: 100%;
            height: 100%;
        }

    .detailRepeater .repeater .itemInfo {
        width: 100%;
    }

        .detailRepeater .repeater .itemInfo a {
            display: block;
            font-size: 0.9em;
            color: #707070;
            text-decoration: none;
            flex-grow: 1;
            -webkit-flex-grow: 1;
            width: inherit;
            float: left;
            height: initial;
            background: none
        }

    .detailRepeater .repeater .productNameRelated {
        width: 100%;
        font-size: 1.2em;
        height: inherit;
    }

    .detailRepeater .repeater:hover a .productNameRelated {
        color: #201F4C;
        text-decoration: underline
    }

.saleIcon-repeater {
    color: tomato;
}



/*  Related Items */
.detailRelatedItems {
    background: whitesmoke;
    border-top: 1px solid #e1e1e1;
}


/*  Main Description */
.longDesc {
    margin: 0;
}

    .longDesc h2 {
        margin: 0 0 16px 0;
    }

div.mainDescription > div {
    margin-bottom: 16px;
    display: block;
    width: 100%;
    float: left;
}


/*  Reviews & FAQs */
.detailReviewFAQ {
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    position: relative
}

    .detailReviewFAQ h2 {
        border-bottom: 1px solid #e1e1e1;
        height: 64px;
        line-height: 64px;
        margin: 0;
        padding: 0 0 0 16px;
    }

        .detailReviewFAQ h2 a {
            height: 64px;
            display: inline-block;
            line-height: 64px;
            margin: 0;
            padding: 0 16px;
            float: right;
            border-left: 1px solid #e1e1e1;
            font-size: 16px;
            text-decoration: none;
            color: cornflowerblue;
        }

            .detailReviewFAQ h2 a:hover {
                background: cornflowerblue;
                color: white;
            }

    .detailReviewFAQ > .col-2:nth-of-type(2) {
        border-right: 1px solid #e1e1e1;
    }

.detailReviewFAQClosed {
    display: none !important;
}


/* ----- FAF related items ----- */
#flexsliderMPFAF .slides li, .flexsliderMP .slides li, #flexsliderRange .slides li {
    margin-right: 16px
}


.facetSelectedff.checked {
    background-color: #9d9d9d !important;
}




/*  Product repeater padding */
.flexslider .flipmeContain {
    max-width: 350px
}







@media screen and (max-width: 767.99px) {
    .ctaRightContainer {
        order: -1;
        margin-bottom: 32px
    }
    /* Product Page */
    #basketArea .ctrPad32 {
        padding: 0 !important
    }

    .productPageTop {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    #storelookupresults {
        width: 100%;
    }

    #prodInfoLeft {
        border-right: none;
    }

    #prodInfoRight {
        border-right: none;
    }

    .mobileproduct .brandlogo {
        display: inline-block;
        height: 62px;
        width: 64px;
        border: 1px solid #e3e3e3;
        background-size: contain !important;
    }

    span.starsLarge {
        display: none;
    }

    .reviewContainerCopyField div textarea {
        min-width: 100%;
    }

    #prodInfoLeft {
        border-right: none;
    }

    .flexsliderMIVThumbnails {
        display: none;
    }

    .flexsliderMIV .flex-direction-nav {
        border-bottom: 1px solid #e1e1e1;
    }

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

    div.mobileImage {
        display: block
    }

    div.addMobile {
        display: block
    }

    div.filter a:hover {
        background: none;
        color: #fff
    }

    div.reviewComment {
        height: auto !important;
        overflow: visible !important
    }

    #MIVPanel .col-6 {
        width: 50% !important;
    }

    #storelookupresults {
        margin-top: 96px;
        width: 90vw !important;
    }

    div.customerRewardsCtr { /* flex-wrap:wrap; */
    }

    div.crValueCtr, div.crTextDesc { /* width:100%; */ /* padding: 8px 16px; */ /* background-position: 25% 50%; */
    }

    #storelookupresults .cncStore {
        display: flex;
        width: 100%;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        flex-wrap: wrap;
        jflex-direction: row;
    }

        #storelookupresults .cncStore > div {
            order: 2;
        }

    .cncQty {
        text-align: left !important;
        order: 1 !important;
    }

    .cncAvail, .cncUnAvail {
        border-bottom: 1px dotted rgba(0, 128, 0,0.5);
        padding: 0 0 8px 0;
        margin: 0 0 8px 0;
        width: auto !Important;
    }

    .fixedBox {
        margin: 16px 0 8px 0
    }

    .currencyMain .currencylistitem-DEV {
        display: block;
        float: left !important;
        width: 50% !important;
        text-align: left;
    }

    .a2btitle, .a2bsizing {
        width: 50% !important;
    }

    /* Prelaunch */
    .prelaunch {
        flex-wrap: wrap;
        padding: 0 !important;
    }

        .prelaunch > span {
            width: 100%;
            padding: 12px;
        }

        .prelaunch a {
            line-height: 40px;
            width: 100%;
        }
}

@media screen and (max-width: 320px) {
    #reviewWriterPanel textarea {
        min-height: 100px;
        line-height: 200%;
    }
}

/* Modernizr */
.modernizr-no-flexbox #prodInfoRight {
    padding: 32px;
}
/* Purposefully empty, combined with 03-finance.css and moved to global/17-finance.css */@charset "UTF-8";
/* New Courier Integrated Shipping Chart */
.courierchart, .courierchart ul, .courierchart li {margin:0;list-style: none;text-align: left;}
.courierchart ul {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: column;}
.courierchart>li {display:none;}
.courierchart>li.country-GB {display:block;}
.regionheader { font-size:24px;display:none;}
.courierchart .loctitle {
    text-align: left;
    padding: 8px 0;
    margin: 0 0 8px 0;
    line-height: 150%;
    text-align: center;
}
.courierchart .loctitle { display:none;}
.couriercountries>li {margin-bottom:24px;border-top: 0px !important;border-bottom: 0px !important; display:block; list-style: none;}
.courierservicewrap {font-size:0 8px !important;flex-wrap: wrap;}
.courierservice {border-bottom: 1px solid #ebebeb;font-size:12px;vertical-align: top;margin-bottom: 8px !important;padding: 0 0 8px 0;width: 100%;line-height: 150%;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: row;padding: 0 0 8px 0 !important;justify-content: space-between;}
.courierservice li {display: inline-block;list-style: none;}
.courierservice ul li ul li:nth-child(2) {font-size: smaller;}
.courierservice ul li ul li:nth-child(2) > span {color: tomato;}

.courierserviceheader, .courierservice>ul {width:auto;}
.courierserviceheader { text-align:left}
.courierservice>ul { text-align:right}
.courierservicecharge {display: none !important;}
.courierprice {color:#2e61a0;margin: 0 0 0 8px;text-align: right;}

/* FLAGS : New Courier Integrated Shipping Chart */
li[class*="country-"] .loctitle:before, li[data-iso*="iso-"] .loctitle:before {display: inline-block;width:16px;height:11px;content: '';margin: 7px 12px 0 0;}
.country-GB .loctitle:before, li.postcoderegion .loctitle:before {background:url('/platformlayout/flags/4x3/gb.png') no-repeat #fff !important; background-size:contain !important;}
.country-UA .loctitle:before {background:url('/platformlayout/flags/4x3/ua.png') no-repeat #fff !important; background-size:contain !important;}
.country-SK .loctitle:before {background:url('/platformlayout/flags/4x3/sk.png') no-repeat #fff !important; background-size:contain !important;}
.country-MT .loctitle:before {background:url('/platformlayout/flags/4x3/mt.png') no-repeat #fff !important; background-size:contain !important;}
.country-LT .loctitle:before {background:url('/platformlayout/flags/4x3/lt.png') no-repeat #fff !important; background-size:contain !important;}
.country-LI .loctitle:before {background:url('/platformlayout/flags/4x3/li.png') no-repeat #fff !important; background-size:contain !important;}
.country-IS .loctitle:before {background:url('/platformlayout/flags/4x3/is.png') no-repeat #fff !important; background-size:contain !important;}
.country-HU .loctitle:before {background:url('/platformlayout/flags/4x3/hu.png') no-repeat #fff !important; background-size:contain !important;}
.country-GR .loctitle:before {background:url('/platformlayout/flags/4x3/gr.png') no-repeat #fff !important; background-size:contain !important;}
.country-GI .loctitle:before {background:url('/platformlayout/flags/4x3/gi.png') no-repeat #fff !important; background-size:contain !important;}
.country-EE .loctitle:before {background:url('/platformlayout/flags/4x3/ee.png') no-repeat #fff !important; background-size:contain !important;}
.country-CZ .loctitle:before {background:url('/platformlayout/flags/4x3/cz.png') no-repeat #fff !important; background-size:contain !important;}
.country-CY .loctitle:before {background:url('/platformlayout/flags/4x3/cy.png') no-repeat #fff !important; background-size:contain !important;}
.country-HR .loctitle:before {background:url('/platformlayout/flags/4x3/hr.png') no-repeat #fff !important; background-size:contain !important;}
.country-BA .loctitle:before {background:url('/platformlayout/flags/4x3/ba.png') no-repeat #fff !important; background-size:contain !important;}
.country-BY .loctitle:before {background:url('/platformlayout/flags/4x3/by.png') no-repeat #fff !important; background-size:contain !important;}
.country-AT .loctitle:before {background:url('/platformlayout/flags/4x3/at.png') no-repeat #fff !important; background-size:contain !important;}
.country-ES .loctitle:before {background:url('/platformlayout/flags/4x3/es.png') no-repeat #fff !important; background-size:contain !important;}
.country-NL .loctitle:before {background:url('/platformlayout/flags/4x3/nl.png') no-repeat #fff !important; background-size:contain !important;}
.country-FR .loctitle:before {background:url('/platformlayout/flags/4x3/fr.png') no-repeat #fff !important; background-size:contain !important;}
.country-TR .loctitle:before {background:url('/platformlayout/flags/4x3/tr.png') no-repeat #fff !important; background-size:contain !important;}
.country-PT .loctitle:before {background:url('/platformlayout/flags/4x3/pt.png') no-repeat #fff !important; background-size:contain !important;}
.country-LU .loctitle:before {background:url('/platformlayout/flags/4x3/lu.png') no-repeat #fff !important; background-size:contain !important;}
.country-DK .loctitle:before {background:url('/platformlayout/flags/4x3/dk.png') no-repeat #fff !important; background-size:contain !important;}
.country-BE .loctitle:before {background:url('/platformlayout/flags/4x3/be.png') no-repeat #fff !important; background-size:contain !important;}
.country-CH .loctitle:before {background:url('/platformlayout/flags/4x3/ch.png') no-repeat #fff !important; background-size:contain !important;width: 11px !important;margin-right:17px;}
.country-SE .loctitle:before {background:url('/platformlayout/flags/4x3/se.png') no-repeat #fff !important; background-size:contain !important;}
.country-FI .loctitle:before {background:url('/platformlayout/flags/4x3/fi.png') no-repeat #fff !important; background-size:contain !important;}
.country-AU .loctitle:before {background:url('/platformlayout/flags/4x3/au.png') no-repeat #fff !important; background-size:contain !important;}
.country-NZ .loctitle:before {background:url('/platformlayout/flags/4x3/nz.png') no-repeat #fff !important; background-size:contain !important;}
.country-US .loctitle:before {background:url('/platformlayout/flags/4x3/us.png') no-repeat #fff !important; background-size:contain !important;}
.country-CA .loctitle:before {background:url('/platformlayout/flags/4x3/ca.png') no-repeat #fff !important; background-size:contain !important;}
.country-AF .loctitle:before {background:url('/platformlayout/flags/4x3/af.png') no-repeat #fff !important; background-size:contain !important;}
.country-AX .loctitle:before {background:url('/platformlayout/flags/4x3/ax.png') no-repeat #fff !important; background-size:contain !important;}
.country-AL .loctitle:before {background:url('/platformlayout/flags/4x3/al.png') no-repeat #fff !important; background-size:contain !important;}
.country-DZ .loctitle:before {background:url('/platformlayout/flags/4x3/dz.png') no-repeat #fff !important; background-size:contain !important;}
.country-AS .loctitle:before {background:url('/platformlayout/flags/4x3/as.png') no-repeat #fff !important; background-size:contain !important;}
.country-AD .loctitle:before {background:url('/platformlayout/flags/4x3/ad.png') no-repeat #fff !important; background-size:contain !important;}
.country-AO .loctitle:before {background:url('/platformlayout/flags/4x3/ao.png') no-repeat #fff !important; background-size:contain !important;}
.country-AI .loctitle:before {background:url('/platformlayout/flags/4x3/ai.png') no-repeat #fff !important; background-size:contain !important;}
.country-AQ .loctitle:before {background:url('/platformlayout/flags/4x3/aq.png') no-repeat #fff !important; background-size:contain !important;}
.country-AG .loctitle:before {background:url('/platformlayout/flags/4x3/ag.png') no-repeat #fff !important; background-size:contain !important;}
.country-AR .loctitle:before {background:url('/platformlayout/flags/4x3/ar.png') no-repeat #fff !important; background-size:contain !important;}
.country-AM .loctitle:before {background:url('/platformlayout/flags/4x3/am.png') no-repeat #fff !important; background-size:contain !important;}
.country-AW .loctitle:before {background:url('/platformlayout/flags/4x3/aw.png') no-repeat #fff !important; background-size:contain !important;}
.country-AZ .loctitle:before {background:url('/platformlayout/flags/4x3/az.png') no-repeat #fff !important; background-size:contain !important;}
.country-BS .loctitle:before {background:url('/platformlayout/flags/4x3/bs.png') no-repeat #fff !important; background-size:contain !important;}
.country-BH .loctitle:before {background:url('/platformlayout/flags/4x3/bh.png') no-repeat #fff !important; background-size:contain !important;}
.country-BD .loctitle:before {background:url('/platformlayout/flags/4x3/bd.png') no-repeat #fff !important; background-size:contain !important;}
.country-BB .loctitle:before {background:url('/platformlayout/flags/4x3/bb.png') no-repeat #fff !important; background-size:contain !important;}
.country-BZ .loctitle:before {background:url('/platformlayout/flags/4x3/bz.png') no-repeat #fff !important; background-size:contain !important;}
.country-BJ .loctitle:before {background:url('/platformlayout/flags/4x3/bj.png') no-repeat #fff !important; background-size:contain !important;}
.country-BM .loctitle:before {background:url('/platformlayout/flags/4x3/bm.png') no-repeat #fff !important; background-size:contain !important;}
.country-BT .loctitle:before {background:url('/platformlayout/flags/4x3/bt.png') no-repeat #fff !important; background-size:contain !important;}
.country-BO .loctitle:before {background:url('/platformlayout/flags/4x3/bo.png') no-repeat #fff !important; background-size:contain !important;}
.country-BW .loctitle:before {background:url('/platformlayout/flags/4x3/bw.png') no-repeat #fff !important; background-size:contain !important;}
.country-BV .loctitle:before {background:url('/platformlayout/flags/4x3/bv.png') no-repeat #fff !important; background-size:contain !important;}
.country-BR .loctitle:before {background:url('/platformlayout/flags/4x3/br.png') no-repeat #fff !important; background-size:contain !important;}
.country-IO .loctitle:before {background:url('/platformlayout/flags/4x3/io.png') no-repeat #fff !important; background-size:contain !important;}
.country-BN .loctitle:before {background:url('/platformlayout/flags/4x3/bn.png') no-repeat #fff !important; background-size:contain !important;}
.country-BG .loctitle:before {background:url('/platformlayout/flags/4x3/bg.png') no-repeat #fff !important; background-size:contain !important;}
.country-BF .loctitle:before {background:url('/platformlayout/flags/4x3/bf.png') no-repeat #fff !important; background-size:contain !important;}
.country-BI .loctitle:before {background:url('/platformlayout/flags/4x3/bi.png') no-repeat #fff !important; background-size:contain !important;}
.country-KH .loctitle:before {background:url('/platformlayout/flags/4x3/kh.png') no-repeat #fff !important; background-size:contain !important;}
.country-CM .loctitle:before {background:url('/platformlayout/flags/4x3/cm.png') no-repeat #fff !important; background-size:contain !important;}
.country-CV .loctitle:before {background:url('/platformlayout/flags/4x3/cv.png') no-repeat #fff !important; background-size:contain !important;}
.country-KY .loctitle:before {background:url('/platformlayout/flags/4x3/ky.png') no-repeat #fff !important; background-size:contain !important;}
.country-CF .loctitle:before {background:url('/platformlayout/flags/4x3/cf.png') no-repeat #fff !important; background-size:contain !important;}
.country-TD .loctitle:before {background:url('/platformlayout/flags/4x3/td.png') no-repeat #fff !important; background-size:contain !important;}
.country-CL .loctitle:before {background:url('/platformlayout/flags/4x3/cl.png') no-repeat #fff !important; background-size:contain !important;}
.country-CN .loctitle:before {background:url('/platformlayout/flags/4x3/cn.png') no-repeat #fff !important; background-size:contain !important;}
.country-CX .loctitle:before {background:url('/platformlayout/flags/4x3/cx.png') no-repeat #fff !important; background-size:contain !important;}
.country-CC .loctitle:before {background:url('/platformlayout/flags/4x3/cc.png') no-repeat #fff !important; background-size:contain !important;}
.country-CO .loctitle:before {background:url('/platformlayout/flags/4x3/co.png') no-repeat #fff !important; background-size:contain !important;}
.country-KM .loctitle:before {background:url('/platformlayout/flags/4x3/km.png') no-repeat #fff !important; background-size:contain !important;}
.country-CG .loctitle:before {background:url('/platformlayout/flags/4x3/cg.png') no-repeat #fff !important; background-size:contain !important;}
.country-CD .loctitle:before {background:url('/platformlayout/flags/4x3/cd.png') no-repeat #fff !important; background-size:contain !important;}
.country-CK .loctitle:before {background:url('/platformlayout/flags/4x3/ck.png') no-repeat #fff !important; background-size:contain !important;}
.country-CR .loctitle:before {background:url('/platformlayout/flags/4x3/cr.png') no-repeat #fff !important; background-size:contain !important;}
.country-CI .loctitle:before {background:url('/platformlayout/flags/4x3/ci.png') no-repeat #fff !important; background-size:contain !important;}
.country-CU .loctitle:before {background:url('/platformlayout/flags/4x3/cu.png') no-repeat #fff !important; background-size:contain !important;}
.country-DJ .loctitle:before {background:url('/platformlayout/flags/4x3/dj.png') no-repeat #fff !important; background-size:contain !important;}
.country-DM .loctitle:before {background:url('/platformlayout/flags/4x3/dm.png') no-repeat #fff !important; background-size:contain !important;}
.country-DO .loctitle:before {background:url('/platformlayout/flags/4x3/do.png') no-repeat #fff !important; background-size:contain !important;}
.country-EC .loctitle:before {background:url('/platformlayout/flags/4x3/ec.png') no-repeat #fff !important; background-size:contain !important;}
.country-EG .loctitle:before {background:url('/platformlayout/flags/4x3/eg.png') no-repeat #fff !important; background-size:contain !important;}
.country-SV .loctitle:before {background:url('/platformlayout/flags/4x3/sv.png') no-repeat #fff !important; background-size:contain !important;}
.country-GQ .loctitle:before {background:url('/platformlayout/flags/4x3/gq.png') no-repeat #fff !important; background-size:contain !important;}
.country-ER .loctitle:before {background:url('/platformlayout/flags/4x3/er.png') no-repeat #fff !important; background-size:contain !important;}
.country-ET .loctitle:before {background:url('/platformlayout/flags/4x3/et.png') no-repeat #fff !important; background-size:contain !important;}
.country-FO .loctitle:before {background:url('/platformlayout/flags/4x3/fo.png') no-repeat #fff !important; background-size:contain !important;}
.country-FJ .loctitle:before {background:url('/platformlayout/flags/4x3/fj.png') no-repeat #fff !important; background-size:contain !important;}
.country-GF .loctitle:before {background:url('/platformlayout/flags/4x3/gf.png') no-repeat #fff !important; background-size:contain !important;}
.country-PF .loctitle:before {background:url('/platformlayout/flags/4x3/pf.png') no-repeat #fff !important; background-size:contain !important;}
.country-TF .loctitle:before {background:url('/platformlayout/flags/4x3/tf.png') no-repeat #fff !important; background-size:contain !important;}
.country-GA .loctitle:before {background:url('/platformlayout/flags/4x3/ga.png') no-repeat #fff !important; background-size:contain !important;}
.country-GM .loctitle:before {background:url('/platformlayout/flags/4x3/gm.png') no-repeat #fff !important; background-size:contain !important;}
.country-GE .loctitle:before {background:url('/platformlayout/flags/4x3/ge.png') no-repeat #fff !important; background-size:contain !important;}
.country-GH .loctitle:before {background:url('/platformlayout/flags/4x3/gh.png') no-repeat #fff !important; background-size:contain !important;}
.country-GD .loctitle:before {background:url('/platformlayout/flags/4x3/gd.png') no-repeat #fff !important; background-size:contain !important;}
.country-GP .loctitle:before {background:url('/platformlayout/flags/4x3/gp.png') no-repeat #fff !important; background-size:contain !important;}
.country-GU .loctitle:before {background:url('/platformlayout/flags/4x3/gu.png') no-repeat #fff !important; background-size:contain !important;}
.country-GT .loctitle:before {background:url('/platformlayout/flags/4x3/gt.png') no-repeat #fff !important; background-size:contain !important;}
.country-GN .loctitle:before {background:url('/platformlayout/flags/4x3/gn.png') no-repeat #fff !important; background-size:contain !important;}
.country-GW .loctitle:before {background:url('/platformlayout/flags/4x3/gw.png') no-repeat #fff !important; background-size:contain !important;}
.country-GY .loctitle:before {background:url('/platformlayout/flags/4x3/gy.png') no-repeat #fff !important; background-size:contain !important;}
.country-HT .loctitle:before {background:url('/platformlayout/flags/4x3/ht.png') no-repeat #fff !important; background-size:contain !important;}
.country-HM .loctitle:before {background:url('/platformlayout/flags/4x3/hm.png') no-repeat #fff !important; background-size:contain !important;}
.country-HN .loctitle:before {background:url('/platformlayout/flags/4x3/hn.png') no-repeat #fff !important; background-size:contain !important;}
.country-HK .loctitle:before {background:url('/platformlayout/flags/4x3/hk.png') no-repeat #fff !important; background-size:contain !important;}
.country-IN .loctitle:before {background:url('/platformlayout/flags/4x3/in.png') no-repeat #fff !important; background-size:contain !important;}
.country-ID .loctitle:before {background:url('/platformlayout/flags/4x3/id.png') no-repeat #fff !important; background-size:contain !important;}
.country-IR .loctitle:before {background:url('/platformlayout/flags/4x3/ir.png') no-repeat #fff !important; background-size:contain !important;}
.country-IQ .loctitle:before {background:url('/platformlayout/flags/4x3/iq.png') no-repeat #fff !important; background-size:contain !important;}
.country-IE .loctitle:before {background:url('/platformlayout/flags/4x3/ie.png') no-repeat #fff !important; background-size:contain !important;}
.country-IL .loctitle:before {background:url('/platformlayout/flags/4x3/il.png') no-repeat #fff !important; background-size:contain !important;}
.country-IT .loctitle:before {background:url('/platformlayout/flags/4x3/it.png') no-repeat #fff !important; background-size:contain !important;}
.country-JM .loctitle:before {background:url('/platformlayout/flags/4x3/jm.png') no-repeat #fff !important; background-size:contain !important;}
.country-JP .loctitle:before {background:url('/platformlayout/flags/4x3/jp.png') no-repeat #fff !important; background-size:contain !important;}
.country-JO .loctitle:before {background:url('/platformlayout/flags/4x3/jo.png') no-repeat #fff !important; background-size:contain !important;}
.country-KZ .loctitle:before {background:url('/platformlayout/flags/4x3/kz.png') no-repeat #fff !important; background-size:contain !important;}
.country-KE .loctitle:before {background:url('/platformlayout/flags/4x3/ke.png') no-repeat #fff !important; background-size:contain !important;}
.country-KI .loctitle:before {background:url('/platformlayout/flags/4x3/ki.png') no-repeat #fff !important; background-size:contain !important;}
.country-KP .loctitle:before {background:url('/platformlayout/flags/4x3/kp.png') no-repeat #fff !important; background-size:contain !important;}
.country-KR .loctitle:before {background:url('/platformlayout/flags/4x3/kr.png') no-repeat #fff !important; background-size:contain !important;}
.country-KW .loctitle:before {background:url('/platformlayout/flags/4x3/kw.png') no-repeat #fff !important; background-size:contain !important;}
.country-KG .loctitle:before {background:url('/platformlayout/flags/4x3/kg.png') no-repeat #fff !important; background-size:contain !important;}
.country-LA .loctitle:before {background:url('/platformlayout/flags/4x3/la.png') no-repeat #fff !important; background-size:contain !important;}
.country-LV .loctitle:before {background:url('/platformlayout/flags/4x3/lv.png') no-repeat #fff !important; background-size:contain !important;}
.country-LB .loctitle:before {background:url('/platformlayout/flags/4x3/lb.png') no-repeat #fff !important; background-size:contain !important;}
.country-LS .loctitle:before {background:url('/platformlayout/flags/4x3/ls.png') no-repeat #fff !important; background-size:contain !important;}
.country-LR .loctitle:before {background:url('/platformlayout/flags/4x3/lr.png') no-repeat #fff !important; background-size:contain !important;}
.country-LY .loctitle:before {background:url('/platformlayout/flags/4x3/ly.png') no-repeat #fff !important; background-size:contain !important;}
.country-MO .loctitle:before {background:url('/platformlayout/flags/4x3/mo.png') no-repeat #fff !important; background-size:contain !important;}
.country-MK .loctitle:before {background:url('/platformlayout/flags/4x3/mk.png') no-repeat #fff !important; background-size:contain !important;}
.country-MG .loctitle:before {background:url('/platformlayout/flags/4x3/mg.png') no-repeat #fff !important; background-size:contain !important;}
.country-MW .loctitle:before {background:url('/platformlayout/flags/4x3/mw.png') no-repeat #fff !important; background-size:contain !important;}
.country-MY .loctitle:before {background:url('/platformlayout/flags/4x3/my.png') no-repeat #fff !important; background-size:contain !important;}
.country-MV .loctitle:before {background:url('/platformlayout/flags/4x3/mv.png') no-repeat #fff !important; background-size:contain !important;}
.country-ML .loctitle:before {background:url('/platformlayout/flags/4x3/ml.png') no-repeat #fff !important; background-size:contain !important;}
.country-MH .loctitle:before {background:url('/platformlayout/flags/4x3/mh.png') no-repeat #fff !important; background-size:contain !important;}
.country-MQ .loctitle:before {background:url('/platformlayout/flags/4x3/mq.png') no-repeat #fff !important; background-size:contain !important;}
.country-MR .loctitle:before {background:url('/platformlayout/flags/4x3/mr.png') no-repeat #fff !important; background-size:contain !important;}
.country-MU .loctitle:before {background:url('/platformlayout/flags/4x3/mu.png') no-repeat #fff !important; background-size:contain !important;}
.country-YT .loctitle:before {background:url('/platformlayout/flags/4x3/yt.png') no-repeat #fff !important; background-size:contain !important;}
.country-MX .loctitle:before {background:url('/platformlayout/flags/4x3/mx.png') no-repeat #fff !important; background-size:contain !important;}
.country-FM .loctitle:before {background:url('/platformlayout/flags/4x3/fm.png') no-repeat #fff !important; background-size:contain !important;}
.country-MD .loctitle:before {background:url('/platformlayout/flags/4x3/md.png') no-repeat #fff !important; background-size:contain !important;}
.country-MC .loctitle:before {background:url('/platformlayout/flags/4x3/mc.png') no-repeat #fff !important; background-size:contain !important;}
.country-MN .loctitle:before {background:url('/platformlayout/flags/4x3/mn.png') no-repeat #fff !important; background-size:contain !important;}
.country-MS .loctitle:before {background:url('/platformlayout/flags/4x3/ms.png') no-repeat #fff !important; background-size:contain !important;}
.country-MA .loctitle:before {background:url('/platformlayout/flags/4x3/ma.png') no-repeat #fff !important; background-size:contain !important;}
.country-MZ .loctitle:before {background:url('/platformlayout/flags/4x3/mz.png') no-repeat #fff !important; background-size:contain !important;}
.country-MM .loctitle:before {background:url('/platformlayout/flags/4x3/mm.png') no-repeat #fff !important; background-size:contain !important;}
.country-NA .loctitle:before {background:url('/platformlayout/flags/4x3/na.png') no-repeat #fff !important; background-size:contain !important;}
.country-NR .loctitle:before {background:url('/platformlayout/flags/4x3/nr.png') no-repeat #fff !important; background-size:contain !important;}
.country-NP .loctitle:before {background:url('/platformlayout/flags/4x3/np.png') no-repeat #fff !important; background-size:contain !important;}
.country-AN .loctitle:before {background:url('/platformlayout/flags/4x3/an.png') no-repeat #fff !important; background-size:contain !important;}
.country-NC .loctitle:before {background:url('/platformlayout/flags/4x3/nc.png') no-repeat #fff !important; background-size:contain !important;}
.country-NI .loctitle:before {background:url('/platformlayout/flags/4x3/ni.png') no-repeat #fff !important; background-size:contain !important;}
.country-NE .loctitle:before {background:url('/platformlayout/flags/4x3/ne.png') no-repeat #fff !important; background-size:contain !important;}
.country-NG .loctitle:before {background:url('/platformlayout/flags/4x3/ng.png') no-repeat #fff !important; background-size:contain !important;}
.country-NU .loctitle:before {background:url('/platformlayout/flags/4x3/nu.png') no-repeat #fff !important; background-size:contain !important;}
.country-NF .loctitle:before {background:url('/platformlayout/flags/4x3/nf.png') no-repeat #fff !important; background-size:contain !important;}
.country-MP .loctitle:before {background:url('/platformlayout/flags/4x3/mp.png') no-repeat #fff !important; background-size:contain !important;}
.country-NO .loctitle:before {background:url('/platformlayout/flags/4x3/no.png') no-repeat #fff !important; background-size:contain !important;}
.country-OM .loctitle:before {background:url('/platformlayout/flags/4x3/om.png') no-repeat #fff !important; background-size:contain !important;}
.country-PK .loctitle:before {background:url('/platformlayout/flags/4x3/pk.png') no-repeat #fff !important; background-size:contain !important;}
.country-PW .loctitle:before {background:url('/platformlayout/flags/4x3/pw.png') no-repeat #fff !important; background-size:contain !important;}
.country-PS .loctitle:before {background:url('/platformlayout/flags/4x3/ps.png') no-repeat #fff !important; background-size:contain !important;}
.country-PA .loctitle:before {background:url('/platformlayout/flags/4x3/pa.png') no-repeat #fff !important; background-size:contain !important;}
.country-PG .loctitle:before {background:url('/platformlayout/flags/4x3/pg.png') no-repeat #fff !important; background-size:contain !important;}
.country-PY .loctitle:before {background:url('/platformlayout/flags/4x3/py.png') no-repeat #fff !important; background-size:contain !important;}
.country-PE .loctitle:before {background:url('/platformlayout/flags/4x3/pe.png') no-repeat #fff !important; background-size:contain !important;}
.country-PH .loctitle:before {background:url('/platformlayout/flags/4x3/ph.png') no-repeat #fff !important; background-size:contain !important;}
.country-PN .loctitle:before {background:url('/platformlayout/flags/4x3/pn.png') no-repeat #fff !important; background-size:contain !important;}
.country-PL .loctitle:before {background:url('/platformlayout/flags/4x3/pl.png') no-repeat #fff !important; background-size:contain !important;}
.country-PR .loctitle:before {background:url('/platformlayout/flags/4x3/pr.png') no-repeat #fff !important; background-size:contain !important;}
.country-QA .loctitle:before {background:url('/platformlayout/flags/4x3/qa.png') no-repeat #fff !important; background-size:contain !important;}
.country-RE .loctitle:before {background:url('/platformlayout/flags/4x3/re.png') no-repeat #fff !important; background-size:contain !important;}
.country-RO .loctitle:before {background:url('/platformlayout/flags/4x3/ro.png') no-repeat #fff !important; background-size:contain !important;}
.country-RU .loctitle:before {background:url('/platformlayout/flags/4x3/ru.png') no-repeat #fff !important; background-size:contain !important;}
.country-RW .loctitle:before {background:url('/platformlayout/flags/4x3/rw.png') no-repeat #fff !important; background-size:contain !important;}
.country-SH .loctitle:before {background:url('/platformlayout/flags/4x3/sh.png') no-repeat #fff !important; background-size:contain !important;}
.country-KN .loctitle:before {background:url('/platformlayout/flags/4x3/kn.png') no-repeat #fff !important; background-size:contain !important;}
.country-LC .loctitle:before {background:url('/platformlayout/flags/4x3/lc.png') no-repeat #fff !important; background-size:contain !important;}
.country-PM .loctitle:before {background:url('/platformlayout/flags/4x3/pm.png') no-repeat #fff !important; background-size:contain !important;}
.country-VC .loctitle:before {background:url('/platformlayout/flags/4x3/vc.png') no-repeat #fff !important; background-size:contain !important;}
.country-WS .loctitle:before {background:url('/platformlayout/flags/4x3/ws.png') no-repeat #fff !important; background-size:contain !important;}
.country-SM .loctitle:before {background:url('/platformlayout/flags/4x3/sm.png') no-repeat #fff !important; background-size:contain !important;}
.country-ST .loctitle:before {background:url('/platformlayout/flags/4x3/st.png') no-repeat #fff !important; background-size:contain !important;}
.country-SA .loctitle:before {background:url('/platformlayout/flags/4x3/sa.png') no-repeat #fff !important; background-size:contain !important;}
.country-SN .loctitle:before {background:url('/platformlayout/flags/4x3/sn.png') no-repeat #fff !important; background-size:contain !important;}
.country-CS .loctitle:before {background:url('/platformlayout/flags/4x3/cs.png') no-repeat #fff !important; background-size:contain !important;}
.country-SC .loctitle:before {background:url('/platformlayout/flags/4x3/sc.png') no-repeat #fff !important; background-size:contain !important;}
.country-SL .loctitle:before {background:url('/platformlayout/flags/4x3/sl.png') no-repeat #fff !important; background-size:contain !important;}
.country-SG .loctitle:before {background:url('/platformlayout/flags/4x3/sg.png') no-repeat #fff !important; background-size:contain !important;}
.country-SI .loctitle:before {background:url('/platformlayout/flags/4x3/si.png') no-repeat #fff !important; background-size:contain !important;}
.country-SB .loctitle:before {background:url('/platformlayout/flags/4x3/sb.png') no-repeat #fff !important; background-size:contain !important;}
.country-SO .loctitle:before {background:url('/platformlayout/flags/4x3/so.png') no-repeat #fff !important; background-size:contain !important;}
.country-ZA .loctitle:before {background:url('/platformlayout/flags/4x3/za.png') no-repeat #fff !important; background-size:contain !important;}
.country-GS .loctitle:before {background:url('/platformlayout/flags/4x3/gs.png') no-repeat #fff !important; background-size:contain !important;}
.country-LK .loctitle:before {background:url('/platformlayout/flags/4x3/lk.png') no-repeat #fff !important; background-size:contain !important;}
.country-SD .loctitle:before {background:url('/platformlayout/flags/4x3/sd.png') no-repeat #fff !important; background-size:contain !important;}
.country-SR .loctitle:before {background:url('/platformlayout/flags/4x3/sr.png') no-repeat #fff !important; background-size:contain !important;}
.country-SJ .loctitle:before {background:url('/platformlayout/flags/4x3/sj.png') no-repeat #fff !important; background-size:contain !important;}
.country-SZ .loctitle:before {background:url('/platformlayout/flags/4x3/sz.png') no-repeat #fff !important; background-size:contain !important;}
.country-SY .loctitle:before {background:url('/platformlayout/flags/4x3/sy.png') no-repeat #fff !important; background-size:contain !important;}
.country-TW .loctitle:before {background:url('/platformlayout/flags/4x3/tw.png') no-repeat #fff !important; background-size:contain !important;}
.country-TJ .loctitle:before {background:url('/platformlayout/flags/4x3/tj.png') no-repeat #fff !important; background-size:contain !important;}
.country-TZ .loctitle:before {background:url('/platformlayout/flags/4x3/tz.png') no-repeat #fff !important; background-size:contain !important;}
.country-TH .loctitle:before {background:url('/platformlayout/flags/4x3/th.png') no-repeat #fff !important; background-size:contain !important;}
.country-TL .loctitle:before {background:url('/platformlayout/flags/4x3/tl.png') no-repeat #fff !important; background-size:contain !important;}
.country-TG .loctitle:before {background:url('/platformlayout/flags/4x3/tg.png') no-repeat #fff !important; background-size:contain !important;}
.country-TK .loctitle:before {background:url('/platformlayout/flags/4x3/tk.png') no-repeat #fff !important; background-size:contain !important;}
.country-TO .loctitle:before {background:url('/platformlayout/flags/4x3/to.png') no-repeat #fff !important; background-size:contain !important;}
.country-TT .loctitle:before {background:url('/platformlayout/flags/4x3/tt.png') no-repeat #fff !important; background-size:contain !important;}
.country-TN .loctitle:before {background:url('/platformlayout/flags/4x3/tn.png') no-repeat #fff !important; background-size:contain !important;}
.country-TM .loctitle:before {background:url('/platformlayout/flags/4x3/tm.png') no-repeat #fff !important; background-size:contain !important;}
.country-TC .loctitle:before {background:url('/platformlayout/flags/4x3/tc.png') no-repeat #fff !important; background-size:contain !important;}
.country-TV .loctitle:before {background:url('/platformlayout/flags/4x3/tv.png') no-repeat #fff !important; background-size:contain !important;}
.country-UG .loctitle:before {background:url('/platformlayout/flags/4x3/ug.png') no-repeat #fff !important; background-size:contain !important;}
.country-AE .loctitle:before {background:url('/platformlayout/flags/4x3/ae.png') no-repeat #fff !important; background-size:contain !important;}
.country-UM .loctitle:before {background:url('/platformlayout/flags/4x3/um.png') no-repeat #fff !important; background-size:contain !important;}
.country-UY .loctitle:before {background:url('/platformlayout/flags/4x3/uy.png') no-repeat #fff !important; background-size:contain !important;}
.country-UZ .loctitle:before {background:url('/platformlayout/flags/4x3/uz.png') no-repeat #fff !important; background-size:contain !important;}
.country-VU .loctitle:before {background:url('/platformlayout/flags/4x3/vu.png') no-repeat #fff !important; background-size:contain !important;}
.country-VA .loctitle:before {background:url('/platformlayout/flags/4x3/va.png') no-repeat #fff !important; background-size:contain !important;}
.country-VE .loctitle:before {background:url('/platformlayout/flags/4x3/ve.png') no-repeat #fff !important; background-size:contain !important;}
.country-VN .loctitle:before {background:url('/platformlayout/flags/4x3/vn.png') no-repeat #fff !important; background-size:contain !important;}
.country-VG .loctitle:before {background:url('/platformlayout/flags/4x3/vg.png') no-repeat #fff !important; background-size:contain !important;}
.country-VI .loctitle:before {background:url('/platformlayout/flags/4x3/vi.png') no-repeat #fff !important; background-size:contain !important;}
.country-WF .loctitle:before {background:url('/platformlayout/flags/4x3/wf.png') no-repeat #fff !important; background-size:contain !important;}
.country-EH .loctitle:before {background:url('/platformlayout/flags/4x3/eh.png') no-repeat #fff !important; background-size:contain !important;}
.country-YE .loctitle:before {background:url('/platformlayout/flags/4x3/ye.png') no-repeat #fff !important; background-size:contain !important;}
.country-ZM .loctitle:before {background:url('/platformlayout/flags/4x3/zm.png') no-repeat #fff !important; background-size:contain !important;}
.country-ZW .loctitle:before {background:url('/platformlayout/flags/4x3/zw.png') no-repeat #fff !important; background-size:contain !important;}
.country-DE .loctitle:before {background:url('/platformlayout/flags/4x3/de.png') no-repeat #fff !important; background-size:contain !important;}



/* Courier Search */
.courierCountrySearch {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-wrap: wrap;flex-direction: row;position:relative;font-size:12px;margin: 16px 0;vertical-align: middle;justify-content: stretch;}
.courierCountrySearch>li, .courierCountrySearch>span {/* display:block; *//* float:left; */list-style: none;flex-grow: 1;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;}
.courierCountrySearch>span:first-child { display:none}
.courierCountrySearch li {border-left:1px solid #ebebeb;border-right:1px solid #ebebeb;background:#f2f3f4;flex-grow: 2;text-align: left;/* padding: 16px; */}
.courierCountrySearch li[class*="country-"] .loctitle:before, .courierCountrySearch li[data-iso*="iso-"] .loctitle:before {margin: 0px 12px 0 0;}
.courierCountrySearch span:first {font-size:12px; display:none}
.courierCountrySearch span.loctitle {text-transform: capitalize;padding: 10px;}
.courierCountrySearch-select {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 {}
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;text-align: left;}
.courierCountrySelection-body li.hideLocationCourier {display:none;}
.courierCountrySelection-body li:hover {background:#f4f5f7;}
@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;
    }

.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
}
@charset "UTF-8";
.showSwip {
    display: none !important
}
ul.tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: flex;
}

    ul.tabs li {
        background: none;
        color: #FFF;
        display: inline-block;
        cursor: pointer;
        background: #464646;
        padding: 8px 16px;
        flex-grow: 1;
        -webkit-flex-grow: 1;
        text-align: center;
    }

        ul.tabs li img {
            display: block
        }

        ul.tabs li:first-child {
            margin-right: 8px;
        }

        ul.tabs li.current {
            color: #181B1D;
            background: #43fee1;
        }

.tab-content {
    display: none;
    padding: 16px 0;
}

    .tab-content.current {
        display: inherit;
    }

.scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

ul.tabssc {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: inline-flex;
}

    ul.tabssc li {
        background: #f6f7fa;
        color: #333;
        cursor: pointer;
        padding: 21px 36px;
        text-align: center;
        outline: 1px solid #dadada;
        border-top: 1px solid #dadada;
        border-bottom: 1px solid #dadada;
    }

        ul.tabssc li:hover {
            background: #eaebef;
        }

        ul.tabssc li.currentsc {
            color: #a23825;
            background: #FFF;
            box-shadow: inset 0 2px 0 #f05451;
            border-bottom: 1px solid #fff;
        }

        ul.tabssc li img {
            display: block
        }

.tab-currentsc {
    display: none;
    background: #fff;
    padding: 16px
}

.tab-contentsc {
    display: none;
    background: #fff;
    padding: 16px
}

    .tab-contentsc.currentsc {
        display: inherit;
    }

.scInfo {
    display: flex;
    align-items: center;
    margin-top: 16px;
    background: #f6f7fa;
}

.showSwip {
    width: 100%;
    padding: 6px 12px;
    text-align: center;
    font-size: smaller;
    position: relative;
    border-bottom: 1px solid #efefef;
    position: relative;
}

    .showSwip:before {
        content: "\f053";
        font-family: feather;
        color: #adadad;
        font-size: inherit;
        left: 8px;
        top: 8px;
        position: absolute;
        padding: 5px;
    }

    .showSwip:after {
        content: "\f054";
        font-family: feather;
        color: #adadad;
        font-size: inherit;
        right: 8px;
        top: 8px;
        position: absolute;
        padding: 5px;
    }

.metricTab {
    border: 1px solid #dedede;
    display: inline-block;
    border-radius: 3px;
    margin-bottom: 16px;
    background: #f6f7fa;
}

    .metricTab a {
        padding: 12px 21px;
        display: inline-block;
        cursor: pointer;
        color: #888888;
    }

        .metricTab a:first-child {
            border-right: 1px solid #efefef
        }

.guide div {
    margin-top: 18px;
}

    .guide div i {
        background: #000;
        border-radius: 6px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        display: inline-block;
        text-align: center;
        font-size: 10px;
        color: #fff;
        font-style: normal;
        vertical-align: middle;
    }

    .guide div strong, .guide div p {
        display: inline;
        line-height: 100%;
        padding-left: 9px;
    }

.tabActive {
    display: inline !important
}

.metricTab a.tabActive {
    background: #fff;
    color: #000000;
}

    .metricTab a.tabActive:before {
        content: "\e93d";
        margin-right: 8px;
        color: #f05451;
        font-family: feather;
    }

.metricContent {
    display: none;
}

.sc table, #SizingGuide table {
    text-align: justify;
    border-collapse: collapse;
    width: 100%;
    padding: 0 !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.sc th, .sc tr, .sc td, #SizingGuide th, #SizingGuide tr, #SizingGuide td {
    padding: 10px 16px;
    margin: 0;
    color: #666;
    font-size: small;
    border: 1px solid #e6e7f1;
    background: #fff
}

.sc tbody tr:nth-of-type(odd) td, #SizingGuide tbody tr:nth-of-type(odd) td {
    background-color: #f6f7fa;
}

.sc th, #SizingGuide th {
    color: #222;
    text-align: left;
    font-weight: bold;
    font-size: larger;
    line-height: 200%;
}

.sc table tr:last-of-type td, #SizingGuide table tr:last-of-type td {
    border-bottom: none
}

.sc table tr td:first-of-type, #SizingGuide table tr td:first-of-type {
    font-weight: bold;
    border: aliceblue;
}

.scInfo {
    text-align: left;
    padding: 8px
}

    .scInfo > strong {
        border-bottom: 1px solid #999;
        padding: 12px;
        display: block;
        width: 100%;
        text-align: center
    }

    .scInfo > div {
        padding: 8px
    }

        .scInfo > div > img {
            width: 100%;
            height: auto;
        }

        .scInfo > div > strong {
            padding: 16px 0;
            display: block
        }

@media screen and (max-width: 767px) {
    .scInfo {
        flex-wrap: wrap
    }

    .sc th, .sc tr, .sc td {
        padding: 5px 8px !important;
        font-size: smaller;
        text-align: left;
    }
}
@charset "UTF-8";
/* Top Section width */
#prodInfoLeft {
    width: 50%;
    position: relative;
}

#prodInfoRight {
    width: 50%;
}

@media screen and (max-width: 767.99px) {
    #prodInfoLeft, #prodInfoRight {
        width: 100%;
    }
}

@media screen and (min-width : 768px) and (max-width : 1023.99px) {
    #prodInfoLeft, #prodInfoRight {
        width: 100%;
    }
}

/* change order */
.productBrands {
    order: -3;
}

.productName {
    order: -2;
    margin: 0;
    font-size: 1.25rem;
}
/* -- Mobile Phones  -- */
@media screen and (max-width: 767.99px) {
    .productName {
        font-size: 1rem;
    }
}

.detailOrder {
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 2em;
}

.ctaMain > div {
    padding: 32px;
    clear: both;
    width: 100%;
}

    .ctaMain > div:last-of-type {
        padding-bottom: 64px
    }

/* -- Mobile Phones  -- */
@media screen and (max-width: 767.9px) {
    .detailOrder {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 2em;
    }

    .ctaMain {
        padding: 16px !important;
    }

    .detailOrder > div {
        grid-column: 1/13 !important;
        grid-row: auto;
        border: none;
        text-align: left;
        padding: 0;
    }

    .ctaMain > div {
        padding: 16px 0 0 0;
    }

    .ctaMessage {
        max-width: 100%;
        margin: inherit;
    }
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.9px) {
    .detailOrder {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 2em;
    }

        .detailOrder > div {
            grid-column: 1/13 !important;
            grid-row: auto;
        }

    .ctaMain > div {
        padding: 16px
    }

    .ctaMessage {
    }
}


.detailOrder > div, .detailOrder > span {
    grid-column: 1/13;
}

.detalCTA {
    grid-column: 1/8 !important;
    grid-row: 1/2;
}

.ctaMain {
    grid-column: 8/13 !important;
    border: 1px solid #dcdcdc;
    text-align: center;
    background: #FAFAFA;
}

    .ctaMain .courierCountrySearch li {
        background: #fff;
    }

.productName {
    order: -2;
}

.productPrices {
    order: -1;
}

.productTechInfo {
    order: 5;
}

.productAddtoBasket {
    order: 1;
}

.productColourPicker {
    order: 7;
}

.productCustomerRewards {
    order: 6
}

.CTA {
    order: 9
}

#tagAlongPanel {
    order: 10
}

#prodInfoRight {
    align-items: start;
}

#firstdetails {
    max-width: 100%;
    margin: inherit;
}

/* Call to Actions on minial */
.ctaIconLink {
    margin-top: 16px;
    display: inline-block
}

.ctaRight {
    border: 1px solid #dcdcdc;
}

.tdelay {
    color: #552249;
}

.timehour, .timeminutes, .fastone {
}

    .timehour .timehour, .timehour .timeminutes {
        color: #008a00;
    }

.fastone {
    margin-bottom: 0px;
}

.ctaRight > div {
    padding: 32px;
    display: inline-block;
    clear: both;
    width: 100%;
}

    .ctaRight > div:last-of-type {
        padding-bottom: 64px
    }

    .ctaRight > div a {
        color: inherit
    }

.ctaIcon {
    font-size: 26px;
}

    .ctaIcon.stars {
        font-size: 22px
    }

.ctaTitle, .ctaTitle span, .fastone strong {
    font-size: 1em;
    margin: 16px 0;
}

.ctaMessage {
}

    .ctaMessage p {
        margin: 0;
        padding: 0;
    }

/* Call to Actions on minial */

.ctaIconLink {
    margin-top: 16px;
    display: inline-block
}

.ctaRight {
    border: 1px solid #dcdcdc;
}

.tdelay {
    color: #552249;
}

.timehour, .timeminutes, .fastone {
}

    .timehour .timehour, .timehour .timeminutes {
        color: #008a00;
    }

.fastone {
    margin-bottom: 0px;
}



.ctaMain > div a {
    color: inherit;
}

.ctaIcon {
    font-size: 26px;
    display: inline-block;
    margin-right: 16px;
}

    .ctaIcon.stars {
        font-size: 22px
    }

.ctaTitle, .ctaTitle span, .fastone strong {
    font-size: 1em;
    margin: 0px 0;
    margin-bottom: 16px;
    display: inline-block;
}

.ctaMessage {
}

.ct.ctaNextday {
    display: none !important
}

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

.ctaNextday {
    display: none
}

.more {
    color: cornflowerblue !important;
    font-size: small;
}



/* Custom Builder Overrides */
form[action*="/builder/"] #firstdetails .productName {
    font-size: 1.6rem;
    margin-bottom: 16px;
}

form[action*="/builder/"] #firstdetails .longDesc {
    order: 2;
}

#ProductCustom1_panAttributes {
    display: grid;
    padding: 0;
    grid-gap: 1em;
    grid-template-columns: repeat(3,1fr);
    -ms-grid-columns: 1fr 1fr 1fr;
}

    #ProductCustom1_panAttributes > .cpb {
        padding: 16px;
        background: white;
    }

.cpb-Header {
    border-bottom: 1px solid #999;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

    .cpb-Header strong {
        font-weight: normal;
        font-family: 'citrfontbold';
    }

.cpb .attBlock {
    display: grid;
    padding: 0;
    grid-gap: 0em 0.5em;
    grid-template-columns: 50px 5fr repeat(2, 1fr);
    -ms-grid-columns: 50px 5fr repeat(2, 1fr);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #F4F4F4;
    align-items: stretch;
    align-content: stretch;
}

    .cpb .attBlock .attName {
        grid-row: 1;
        grid-column: 2;
    }

    .cpb .attBlock .attPrice {
        grid-row: 2;
        grid-column: 2;
    }

    .cpb .attBlock .attImage {
        grid-row-start: 1;
        grid-row-end: 3;
        grid-column: 1;
    }

    .cpb .attBlock .attMoreInfoOuter {
        grid-column: 3;
    }

    .cpb .attBlock .attSelected {
        grid-column: 4;
    }

    .cpb .attBlock .attSelected,
    .cpb .attBlock .attMoreInfoOuter {
        grid-row-start: 1;
        grid-row-end: 3;
    }

        .cpb .attBlock .attSelected a,
        .cpb .attBlock .attMoreInfo a {
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 50px;
            padding: 0 6px;
            position: relative;
        }

    .cpb .attBlock:nth-last-of-type(2) {
        border-bottom: none;
    }

    .cpb .attBlock > div {
    }

    .cpb .attBlock .attName {
    }

    .cpb .attBlock .attPrice {
        font-size: small;
    }

    .cpb .attBlock div[style="display: block; width: 50px; height: 50px; float: left; margin-left: 8px; background: #fff"] {
        margin-left: 0 !important;
        height: 50px;
    }

    .cpb .attBlock .attImage {
        height: 50px;
    }

        .cpb .attBlock .attImage img#imgProductImage {
            border: 0 !important;
        }

    .cpb .attBlock .attSelected {
        height: 100%;
    }

        .cpb .attBlock .attSelected a,
        .cpb .attBlock .attMoreInfo a {
            display: flex;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 125%;
            padding: 6px 12px;
            position: relative;
            vertical-align: middle;
            font-size: 13px;
            align-items: center;
            justify-items: center;
            justify-content: center;
        }

            .cpb .attBlock .attSelected a[data-selected="true"] {
                overflow: hidden;
                text-indent: -9999px;
                white-space: nowrap;
                background: #6db60e;
                font-size: 0;
                line-height: 0;
            }

                .cpb .attBlock .attSelected a[data-selected="true"]:before {
                    text-indent: 0;
                    font-family: 'feather';
                    content: "\e93d";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    line-height: 100%;
                    -moz-transform: translateX(-50%) translateY(-50%);
                    -webkit-transform: translateX(-50%) translateY(-50%);
                    -o-transform: translateX(-50%) translateY(-50%);
                    -ms-transform: translateX(-50%) translateY(-50%);
                    transform: translateX(-50%) translateY(-50%);
                    font-size: 25px;
                }


        .cpb .attBlock .attSelected input {
            width: 50px;
            height: 50px;
            padding: 0;
        }

.cpb-summaryAttLabel {
    padding-bottom: 16px;
    font-size: 1.2rem;
    font-family: 'citrfontbold';
}

#cpb-summary li {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: minmax(min-content, 180px) 1fr;
    -ms-grid-columns: minmax(min-content, 180px) 1fr;
    list-style: none;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.15)
}

    #cpb-summary li > .cpb-selectedOption {
        grid-column: 1;
    }

    #cpb-summary li > .cpb-chosenAtt {
        grid-column: 2;
    }

.cpb-buttonAdd a:before {
    display: block;
    float: left;
    color: white;
    line-height: 100%;
}

.cpb-buttonAdd a img {
    display: none;
}

@media screen and (max-width: 768px) {
    #ProductCustom1_panAttributes {
        grid-gap: 0.5em;
        grid-template-columns: 1fr;
    }

    .cpb .attBlock {
        grid-template-columns: 50px 2fr repeat(2, 1fr);
    }
}

@media screen and (min-width : 769px) and (max-width : 1440px) {
    #ProductCustom1_panAttributes {
        grid-gap: 0.5em;
        grid-template-columns: repeat(2, 1fr);
    }

    .cpb .attBlock {
        grid-template-columns: 50px 2fr repeat(2, 1fr);
    }
}
#detailfast-coupons {
    width: 100%;
    overflow: auto;
    padding: 0.5rem 0;
}

.coupon-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border: solid 1px #A0A0A0;
    border-radius: 0.5rem;
    gap: 0.5rem;
}

.coupon-preview-button {
    cursor: pointer;
}

.coupon-preview-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
}

    .coupon-preview-label .coupon-description {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.coupon-label {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    overflow: hidden;
}

.coupon-label-description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coupon-count {
    color: #C04058;
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
}

.coupon-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.coupon-code-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.coupon-code {
    color: #C04058;
    font-weight: 600;
}

.coupon-copy-icon {
    font-family: feather;
    cursor: pointer;
    font-size: 1.25rem;
}

    .coupon-copy-icon:before {
        content: "\e934";
    }

    .coupon-copy-icon:hover {
        opacity: 50%;
    }

    .coupon-copy-icon[data-active="true"]:hover {
        opacity: 100%;
        cursor: default;
    }

    .coupon-copy-icon[data-active="true"]:before {
        content: "\e93d";
    }

.coupon-view-icon {
    font-size: 1.25rem;
    font-family: feather;
}
    .coupon-view-icon:before {
        content: "\e942";
    }

.coupon-preview:hover .coupon-view-icon {
    opacity: 50%;
}

.coupon-drawer-container {
    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;
    z-index: -1;
}

    .coupon-drawer-container[data-state="open"] {
        opacity: 1;
        z-index: 500;
    }

    .coupon-drawer-container .coupon-description {
        overflow: visible;
        white-space: normal;
    }

.coupon-drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    min-height: 100%;
    width: 30rem;
    max-width: 100%;
    background: #fff;
    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;
}

.coupon-drawer-container[data-state="open"] .coupon-drawer {
    transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
}

.coupon-drawer-close-icon {
    height: 2rem;
    width: 2rem;
    padding: 0.1rem;
    cursor: pointer;
    text-align: center;
    position: absolute;
    top: 0;
    left: -2rem;
    background: #000;
    font-family: feather;
    color: #fff;
    font-size: 1.25rem;
}

    .coupon-drawer-close-icon:before {
        content: '\ea16';
    }

.coupon-drawer-content {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    gap: 1rem;
    overflow-y: auto;
    height: 100%;
}

.coupon-drawer-divider {
    border-bottom: solid 1px #A0A0A0;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.coupon-drawer-header {
    background: #C04058;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
}

.coupon-drawer-close-button {
    margin-top: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 0.0625rem solid;
    color: #000;
    font-size: 0.75rem;
    cursor: pointer;
    letter-spacing: 0.1rem;
    gap: 0.25rem;
    font-family: feather;
}

    .coupon-drawer-close-button:before {
        content: '\ea16';
    }
/* empty by design - file moved to 07-reviews.css */
/* ==================== Detail Variables ==================== */
:root {
    --detail-titleSize: var(--fontSize-xl);
    --detail-textSize: var(--fontSize-base);
    --detail-priceSize: var(--fontSize-xl);
    --detail-nameSize: var(--fontSize-2xl);
    --detail-background: var(--background);
    --detail-titleColor: var(--brand-dark);
    --detail-textColor: var(--text);
    --detail-padding: var(--global-padding);
    --detail-gap: var(--global-gap);
    --detail-margin: var(--global-margin);
    --detail-radius: var(--global-radius);
    --detail-buttonRadius: var(--global-buttonRadius);
    --detail-border: var(--global-border);
    --detail-transition: var(--global-transition);
    --detail-buttonSize: var(--global-buttonSize);
    --detail-buttonColor: var(--global-buttonColor);
    --detail-buttonBorder: var(--global-buttonBorder);
    --detail-buttonBackground: var(--global-buttonBackground);
    --detail-buttonPadding: var(--global-buttonPadding);
    --detail-buttonBackgroundHover: var(--global-buttonBackgroundHover);
    --detail-buttonColorHover: var(--global-buttonColorHover);
    --detail-buttonBorderHover: var(--global-buttonBorderHover);
    --detail-buttonPaddingHover: var(--global-buttonPadding);
    --detail-price-color: var(--text);
    --detail-wasPrice-color: var(--brand-link);
    --detail-wasPrice-background: var(--background-raised);
    --detail-sale-background: var(--sale);
    --detail-sale-color: var(--text-inverse);
    --detail-brandBadge-background: var(--brand-dark);
    --detail-brandBadge-color: var(--text-inverse);
    --detail-brandBadge-size: var(--fontSize-md);
    --detail-finance-background: var(--brand);
    --detail-finance-border: 1px solid var(--brand);
    --detail-finance-color: var(--text-on-brand);
    --detail-pdpTopBackground: var(--background-raised);
    --detail-rewards-background: var(--brand);
    --detail-rewards-border: 2px solid var(--brand);
    --detail-rewards-color: var(--text-on-brand);
    --detail-addToCart-background: var(--global-addToCart-background);
    --detail-addToCart-border: var(--global-addToCart-border);
    --detail-addToCart-color: var(--global-addToCart-color);
    --detail-addToCart-backgroundHover: var(--global-addToCart-backgroundHover);
    --detail-addToCart-borderHover: var(--global-addToCart-borderHover);
    --detail-addToCart-colorHover: var(--global-addToCart-colorHover);
    --detail-stockLabelWidth: 135px;
    --detail-letterSpacing: 0;
}

.fixed.productPageTop{
    min-width: 100% !important;
    padding-right: 0;
    /* padding-top: 3rem; */
}

/* ==================== Customer Rewards Styles ==================== */

.productCustomerRewards{
    order: -1 !important;
}

.productCustomerRewards > div{
    background: var(--detail-rewards-background);
    border-radius: var(--detail-radius);
    padding: var(--detail-padding);
    border: var(--detail-rewards-border);
    color: var(--detail-rewards-color);
}

.productCustomerRewards > div .crTextDesc{
    font-size: var(--detail-textSize) !important;
}

.productCustomerRewards > div .crTextDesc .crValueCtr span{
    font-size: var(--detail-textSize) !important;
    color: var(--detail-rewards-color) !important;
    font-family: var(--font-bold);
}

/* ==================== Product Color Picker Styles ==================== */
/* Set order of color picker in layout */
#firstdetails .productColourPicker {
    order: -1;
}

/* Align color picker items */
#firstdetails .productColourPicker .colourPicker,
#firstdetails .productColourPicker.colourPicker {
    justify-content: flex-start;
}

/* Color picker header text */
#firstdetails .productColourPicker.colourPicker::before,
#firstdetails .productColourPicker .colourPicker::before {
    content: var(--copy-otherColours, "Other Colours Available");
    color: var(--detail-textColor);
    font-size: var(--detail-textSize);
    display: block;
    width: 100%;
    margin-top: var(--detail-margin);
    font-family: var(--font-bold);
}

/* Color picker item styling */
#firstdetails .productColourPicker.colourPicker a {
    border: var(--detail-border);
    border-radius: var(--detail-radius);
}

/* ==================== Price Display Styles ==================== */
.nowPrice {
    font-size: var(--detail-priceSize) !important;
    color: var(--detail-price-color);
}

span#productPrice {
    padding-block: var(--detail-padding);
}

.productPriceBlock + div:has(span) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
    align-items: center;
    border-radius: var(--detail-radius);
    overflow: hidden;
    /* border: var(--detail-border); */
    justify-content: space-evenly;
    justify-items: start;
}

.nowPrice, .standardPrice, .percentOff {
    display: block;
    text-align: center;
    padding-block: var(--detail-padding);
    font-size: var(--detail-textSize);
}

.nowPrice {
    grid-column: 1;
    grid-row: 1;
    /* background-color: var(--background-raised); */
}

.standardPrice {
    grid-column: 2;
    grid-row: 1;
    /* background-color: #eaeaea; */
    text-decoration: none;
}

.percentOff {
    grid-column: 3;
    grid-row: 1;
    background-color: var(--detail-sale-background);
    color: var(--detail-sale-color);
    border-radius: var(--detail-radius);
    width: fit-content;
    padding: calc(var(--detail-padding) * 0.5);
    justify-self: center;
}

.standardPrice:empty, .percentOff:empty {
    display: none;
}

.standardPrice:before {
    content: var(--copy-rrp, "RRP ");
}

/* ==================== CTA Button Styles ==================== */
/* Hide main CTA button */
.ctaMain {
    display: none;
}

/* Full-width CTA container */
.detailOrder>div.detalCTA {
    grid-column: 1/13 !important;
}

/* ==================== Range and Related Items Styles ==================== */
/* Remove padding from range viewer and related items */
.detailOrder>div#ShowRangeViewer,
.detailOrder>div#ShowRelatedRepeater {
    padding: 0;
}

/* ==================== Product Size Button Styles ==================== */
/* Size selector button base styles */
.productSize>a {
    display: flex;
    color: var(--detail-buttonColor);
    background: var(--detail-buttonBackground);
    border: var(--detail-buttonBorder);
    padding: var(--detail-buttonPadding);
    font-size: var(--detail-buttonSize);
    letter-spacing: var(--detail-letterSpacing);
    font-family: var(--font-bold);
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: var(--detail-gap);
    border-radius: var(--detail-buttonRadius);
    transition: var(--detail-transition);
}

/* Size selector button hover state */
.productSize>a:hover {
    color: var(--detail-buttonColorHover);
    background: var(--detail-buttonBackgroundHover);
    border: var(--detail-buttonBorderHover);
}

/* ==================== Responsive Layout Styles ==================== */
@media screen and (max-width: 1024px) {
    /* Adjust padding for tablet view */
    div#prodInfoRight>div#firstdetails,
    .shortdesc-block {
        padding: var(--detail-padding);
    }

    /* Remove padding from detail grid */
    .maxInner.cssGrid.detailOrder {
        padding: 0;
    }
}

@media screen and (max-width: 768px) {
    /* Single column layout for mobile description */
    .detailOrder>div.detalCTA #ModularLongDescription {
        -webkit-column-count: 1;
        column-count: 1;
    }
}

/* ==================== Product Header Styles ==================== */
/* Product name sizing */
h2.col-1.product-section-header.productName {
    font-size: var(--detail-titleSize);
}

/* Remove season border */
.col-1.season {
    border-bottom: none;
}

/* ==================== Button Styles ==================== */
/* Standard button styling */
span.col-.button,
.cc-lookup-service-lookupbutton.icon-search,
.col-1.cc-lookup-service-lookupbutton-location,
.productSize>a {
    font-size: var(--detail-buttonSize);
    color: var(--detail-buttonColor);
    background: var(--detail-buttonBackground);
    border: var(--detail-buttonBorder);
    border-radius: var(--detail-buttonRadius);
    padding: var(--detail-buttonPadding);
    transition: var(--detail-transition);
    display: flex;
    align-items: center;
}

/* Standard button hover states */
span.col-.button:hover,
.cc-lookup-service-lookupbutton.icon-search:hover,
.col-1.cc-lookup-service-lookupbutton-location:hover,
.productSize>a:hover {
    background: var(--detail-buttonBackgroundHover);
    color: var(--detail-buttonColorHover);
    border: var(--detail-buttonBorderHover);
}

/* ==================== Cart Target Styles ==================== */
/* Cart container styling */
div#cart-target {
    background: var(--detail-background);
    padding: var(--detail-padding);
    border-radius: var(--detail-radius);
    border: var(--detail-border);
}

/* Standard background class */
.bgStandard {
    background: var(--detail-buttonBackground);
    border-radius: var(--detail-buttonRadius);
    color: var(--detail-buttonColor);
}

/* ==================== Lookup Service Styles ==================== */
/* Lookup service layout */
.cc-lookup-service-entrysection {
    display: flex !important;
    flex-flow: row wrap;
    gap: var(--detail-gap);
}

/* Lookup service item sizing */
.cc-lookup-service-entrysection > div {
    flex-basis: 200px;
    flex-grow: 1;
}

/* Hide lookup service dividers */
.cc-lookup-service-divider > .cc-lookup-service-divider-left,
.cc-lookup-service-divider > .cc-lookup-service-divider-right,
.cc-lookup-service-divider {
    display: none !important;
}

/* Lookup button styling */
.cc-lookup-service-lookupbutton.icon-search {
    background: var(--detail-buttonBackground);
    transition: var(--detail-transition);
}

/* Lookup button icon color */
.cc-lookup-service-lookupbutton.icon-search::before {
    color: var(--detail-buttonColor);
}

/* Lookup service wrapper styling */
.cc-lookup-service-wrapper.col-1.ctrMgr8-top.ctrMgr16-bottom {
    background: var(--detail-background);
    padding: var(--detail-padding) !important;
    border-radius: var(--detail-radius);
    margin-bottom: var(--detail-margin) !important;
    border: var(--detail-border);
}

/* Location button styling */
.col-1.cc-lookup-service-lookupbutton-location {
    background: var(--detail-buttonBackground);
    color: var(--detail-buttonColor);
    border: var(--detail-buttonBorder);
    border-radius: var(--detail-buttonRadius);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--detail-gap) * 0.5);
    transition: var(--detail-transition);
    font-size: var(--detail-buttonSize);
    padding: var(--detail-buttonPadding);
}

/* Location button hover state */
.col-1.cc-lookup-service-lookupbutton-location:hover {
    background: var(--detail-buttonBackgroundHover);
    color: var(--detail-buttonColorHover);
    border: var(--detail-buttonBorderHover);
}

/* Location icon color */
span.icon-drop.coStandard:before {
    color: var(--detail-buttonColor);
    transition: var(--detail-transition);
}

.col-1.cc-lookup-service-lookupbutton-location:hover span.icon-drop.coStandard:before {
    color: var(--detail-buttonColorHover);
}

/* ==================== Input Field Styles ==================== */
/* General input styling */
input[type="text"],
input.text-center,
.col-1.zflex-s.pos-rel.cc-lookup-service-entry {
    border: var(--detail-border) !important;
    border-radius: var(--detail-buttonRadius);
}

.add-to-cart-area-dropdown-qty input[type="text"] {
    border-radius: var(--detail-radius);
}

/* ==================== Add to Cart Area Styles ==================== */
/* Cart area spacing */
.add-to-cart-area-1 {
    margin-bottom: var(--detail-margin) !important;
}

/* Remove borders and adjust spacing */
.col-1.add-to-cart-area-2 {
    border: none;
    padding-inline: calc(var(--detail-padding) * 0.5);
    margin: 0;
}

/* Add to cart button styling */
.add-to-cart-area-button.bgStandard {
    background: var(--detail-addToCart-background);
    color: var(--detail-addToCart-color);
    border: var(--detail-addToCart-border);
    border-radius: var(--detail-buttonRadius);
    width: 100%;
    padding: var(--detail-buttonPadding);
    transition: var(--detail-transition);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
}

/* Add to cart button hover */
.add-to-cart-area-button.bgStandard:hover {
    background: var(--detail-addToCart-backgroundHover);
    color: var(--detail-addToCart-colorHover);
    border: var(--detail-addToCart-borderHover);
}

/* Cart area message containers */
.col-1.add-to-cart-area-msg-stock,
.col-1.add-to-cart-area-msg-handling {
    /* border: none; */
    display: flex;
    align-items: center;
}

/* Cart area row spacing */
.col-1.zflex-s.add-to-cart-area-1-row-2 {
    margin-top: calc(var(--detail-margin) * 0.5);
}

/* ==================== Product Name Styles ==================== */
/* Product name container */
h1#devProductName {
    padding-inline: calc(var(--detail-padding) * 0.5);
    text-align: left;
    font-size: var(--detail-nameSize);
    padding-left: 0;
    color: var(--detail-titleColor);
    font-family: var(--font-display);
    font-weight: 700;
}

.col-1.zflex-s.pos-rel.cc-lookup-service-entry {
    border: none !important;
    gap: calc(var(--detail-gap) * 0.3);
}

.add-to-cart-area-msg-stock:after {
    text-align: left;
    width: fit-content;
}

.add-to-cart-area-msg-stock:before {
    width: var(--detail-stockLabelWidth);
    text-align: left !important;
    margin-right: calc(var(--detail-margin) * 0.5);
    border-right: var(--detail-border);
    padding-right: calc(var(--detail-padding) * 0.5);
    font-family: var(--font-body);
}

.add-to-cart-area-msg-handling:after {
    text-align: left !important;
}

.add-to-cart-area-msg-handling:before {
    width: var(--detail-stockLabelWidth);
    text-align: left !important;
    margin-right: calc(var(--detail-margin) * 0.5);
    border-right: var(--detail-border);
    padding-right: calc(var(--detail-padding) * 0.5);
    font-family: var(--font-body);
}

a#Brand {
    padding-inline: calc(var(--detail-padding) * 0.5);
    text-align: left;
    font-size: var(--detail-brandBadge-size);
    color: var(--detail-brandBadge-color);
    background: var(--detail-brandBadge-background);
    width: fit-content;
    border-radius: var(--detail-radius);
    font-family: var(--font-bold);
}

.col-1.flex-grow1.add-to-cart-area-msg {
    border-top: none;
}

div#detailMiv {
    outline: none;
}

div#detailMivThumb {
    margin: calc(var(--detail-margin) * 0.5);
    gap: calc(var(--detail-gap) * 0.5);
}

.imgCtr {
    border-radius: var(--detail-radius);
}

.col-1.dark.imgCtr {
    background: var(--detail-brandBadge-background);
}

.productColourPicker {
    order: -1;
    display: flex;
    justify-content: flex-start;
    gap: calc(var(--detail-gap) * 0.5);
    background: var(--detail-background);
    border-radius: var(--detail-radius);
    padding: var(--detail-padding) !important;
    border: var(--detail-border);
}

.productColourPicker:before {
    content: var(--copy-otherColours, "Other Colours Available") ": ";
    font-size: var(--detail-textSize);
    margin-top: 0 !important;
}

.productColourPicker img {
    border-radius: var(--detail-radius);
}

div#sizingInformationPane .col-12 {
    width: 100%;
}

/* ==================== Cart Area Styles ==================== */
/* Quantity row layout */
.add-to-cart-area-1-row-2>div {
    flex-flow: row;
    gap: calc(var(--detail-gap) * 0.5);
    display: flex;
    align-items: center;
}

/* Quantity label styling */
.add-to-cart-area-dropdown-qty-label.bgStandard {
    background: transparent;
    border: none;
    color: var(--detail-textColor);
    width: auto;
}

/* Quantity input styling */
input.text-center {
    margin: 0;
    border: var(--detail-border);
}

/* Add to cart button alignment */
.add-to-cart-area-button {
    text-align: center;
}


/* Custom */

/* Large Screen - Custom */

/* --- Product Detail Layout --- */
@media screen and (min-width: 1720px) {
  .MIVicon {
    top: 1.5rem;
    left: 1.5rem;
  }

  #brand-logo-area {
    padding: 1rem;
  }

  /* Main content split */
  #prodInfoLeft {
    display: flex;
    align-items: flex-start;
    border-right: var(--detail-border);
    width: 60%;
    gap: 1rem;
  }

  #prodInfoRight {
    width: 40%;
  }

  /* Thumbnail section */
  #detailMivThumb {
    display: flex;
        flex-wrap: wrap;
        gap: 0.5rem !important;
        max-width: fit-content;
        order: -1;
        position: sticky;
        align-items: flex-start;
        flex-flow: column;
  }

  #detailMivThumb > a,
  #detailMivThumb > div {
    width: 96px;
    flex: 0 0 auto; /* no flex-grow */
  }

  /* Main image / viewer */
  #detailMiv {
    flex: 1;
    height: 100%;
    border-left: var(--detail-border);
    width: 100%;
  }

  /* Product images cleanup */
  #prodInfoLeft div[class*="css-image"] {
    height: auto;
    background-position: top center !important;
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* Page container */
  div#webdes_pdp .productPageTop .maxInner {
    max-width: var(--global-NavFooterWidth);
    padding-inline: 1rem;
  }
}

/* Product Short Desc */

#prodInfoRight #firstdetails > div[data-hideshow="false"] {
    order: -1;
    display: block !important;
    margin-block: 0;
    border-top: var(--detail-border);
    font-size: var(--detail-textSize);
    padding-top: .5rem;
    display: none !important;
}

/* platform BG */

.bgeb{
    background: transparent;
}


/* Layout */

.detailOrder{
    display: flex;
    flex-direction: column;
}

/* Breadcrumbs */

span.breadcrumbs {order: -1;
                  margin-bottom: var(--detail-margin);
                 }

/* Finance */

div#financeTopPanel {
    padding: calc(var(--detail-padding) * 0.3);
    text-align: center;
    background: var(--detail-finance-background);
    border: var(--detail-finance-border);
    border-radius: var(--detail-radius);
}

#financeTopPanel a{
    text-decoration: none;
    color: var(--detail-finance-color);
}

/* Background */
.productPageTop .container{
       background: var(--detail-pdpTopBackground);
}

/* Product Size Position */

.col-1:has(.productSize){
    order: -1;
    display: flex;
    justify-content: flex-end;
}

/* Dynamic Currency Pane*/

.productPrices .productPrices:has(#dynamicCurrencyPane) {
    display: none !important;
}